@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
/* List Uploads Data Table Styles */
.list-uploads-data-table {
  margin-top: 1rem;
  text-align: center !important;
  font-size: 18px !important;
}

/* Table Body Styles */
.list-uploads-data-table .p-datatable-wrapper tr td {
  font-size: 15px !important;
}

/* Header Row Styles */
.list-uploads-header-row th {
  background: rgb(248, 250, 252) !important;
  border: 1px solid rgb(226, 232, 240) !important;
  padding: 14px !important;
}

/* Column Body Styles (Text inside the column headed "List Name") */
.list-uploads-data-table .p-datatable-tbody tr td.datatable-list-uploads-list-name-column {
  font-size: 18px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Column Header Content Styles (Text left of the sort icon) */
.p-column-header-content .p-column-title{
  padding-right: 10px !important;
}

td.datatable-list-uploads-show-column a{
  font-size: 14px !important;
  color: rgb(13, 13, 177) !important;
  text-decoration: underline !important;
}


/* Sold AVM Comps Table Styles */
#sold-avm-comps-table  {

}

#sold-avm-comps-table .p-datatable-thead > tr > th {
  background-color: rgb(79, 70, 229) !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  color: white !important;
}

#sold-avm-comps-table .p-datatable-tbody tr td {
  line-height: 1rem !important;
  padding: 0.5rem !important;
  height: 1.5rem !important;
}


[aria-selected="true"] {
  background-color: rgba(99, 102, 241, 0.25) !important;
}
/* styles for decision-making-page EditPropertyNotesModal */
.p-toast-message {
  padding: 5px;
}
/* General Styles for DataTable */
#fdm-properties-data-table {
    border: 1px solid #cdd4dc !important;
    overflow-x: auto !important; /* Ensures responsiveness on smaller screens */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; /* Subtle shadow for depth */
    z-index: 0 !important;
}

/* Header Row Styling */
#fdm-properties-data-table .fdm-table-header-row {
    border-bottom: 2px solid #cdd4dc !important;
    background: #f9fafb !important;
}

#fdm-properties-data-table .fdm-table-header-row th {
    padding: 5px 10px !important; /* Increased padding for better spacing */
    font-size: 12px !important;
    text-transform: uppercase !important; /* Makes headers more distinctive */
    font-weight: bold !important;
    width: 100px !important;
}

/* Styling for sortable columns to indicate they are interactive */
#fdm-properties-data-table .fdm-table-header-row .p-sortable-column {
    border: 1px solid rgb(205, 212, 220) !important;
    background: rgb(249, 250, 251) !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out !important;
}

#fdm-properties-data-table .fdm-table-header-row th .p-column-header-content .p-column-title{
    padding: 0px 5px !important;

}

#fdm-properties-data-table .fdm-table-header-row .p-sortable-column:hover {
    background-color: #e2e8f0 !important; /* Lighter shade on hover for interaction */
}

/* Content Alignment in Header */
.p-column-header-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Row and Cell Styling */
.p-datatable-tbody tr td {
    height: 45px !important; /* Consistency in row height */
    border: 1px solid #e2e8f0 !important; /* Subtle borders within rows */
    padding: 0 10px !important; /* Horizontal padding for content spacing */
    vertical-align: middle !important; /* Align content vertically for better presentation */
    color: #334155 !important; /* Dark gray for better readability */
    font-size: 12px !important; /* Slightly smaller font size for table data */
}

.p-datatable-tbody tr:hover {
    background-color: #f1f5f9 !important; /* Highlight row on hover */
}

/* Responsive Handling for smaller devices */
@media (max-width: 640px) {
    .p-datatable .p-datatable-thead > tr > th,
    .p-datatable .p-datatable-tbody > tr > td {
        padding: 8px !important; /* Smaller padding on smaller screens */
    }
}
/* DataTable Row Styles */
.list-sort-datatable .p-highlight.p-selectable-row {
  background-color: rgb(240, 241, 242) !important;
  color: #fff !important;
}

.list-sort-datatable .p-datatable-tbody tr:hover {
  background-color: #E0E7FF !important;
}

.list-sort-datatable .p-datatable-tbody tr td {
  font-size: 15px !important;
}

/* DataTable Header Row Styles */
.list-sort-header-row {
  background-color: rgb(249, 250, 251) !important;
}

.list-sort-header-row th {
  align-items: center !important;
  padding: 6px !important;
}

/* Column Header Content Styles */
.list-sort-datatable .p-column-header-content {
  padding: 6px !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: rgb(75, 85, 99) !important;
  white-space: pre-line;
}

.list-sort-header-row .p-column-header-content {
  justify-content: center !important;
  align-items: center !important;
  font-size: unset !important;
}

.list-sort-datatable .p-component-overlay {
  top: 100% !important;
}

/* Column Title Styles */
.list-sort-datatable .p-column-title {
  padding-right: 10px !important;
  font-size: 18px !important;
}
.mapboxgl-popup-content {
  padding: 0 !important;
  background: none !important;
}

.mapboxgl-popup-tip {
  display: none;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border: 2px solid red;
  }

  .top {
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-size: 36px;
    border: 2px solid blue;

  }

  .left {
    width: 50%;
    height: calc(60% - 40px);
    border: 2px solid green;
    display: flex;
    flex-wrap: wrap;
  }

  .right {
    width: 50%;
    height: calc(60% - 40px);
    border: 2px solid yellow;
    display: flex;
    flex-wrap: wrap;
  }

  .top-left {
    width: 100%;
    height: 40%;
    border: 2px solid orange;
  }

  .bottom-left {
    width: 100%;
    height: 60%;
    border: 2px solid purple;
  }

  .top-right {
    width: 100%;
    height: 80%;
    border: 2px solid pink;
  }

  .bottom-right {
    width: 100%;
    height: 20%;
    border: 2px solid brown;
  }
/* styles for decision-making-page NoListSortsModal */
.p-dialog-mask {
  background-color:rgba(0,0,0,0.3);
}
/* styles for property-detail-page PropertGalleria */
.p-galleria-mask {
  display: block;
}

.p-galleria-content {
  padding: 4% 3vw 10% 3vw;
}

/* close button */
.p-galleria-close {
  color: white !important;
  padding: 20px 20px 0 0;
  z-index: 50;
  cursor: pointer;
}

.p-galleria-close:hover {
  color: #330EEA !important;
}

/* item styling */
.p-galleria-item-container {
  overflow-y: hidden;
  height: 600px;
  width: 100%;
}

.p-galleria-item {
  min-width: auto;
}

.p-galleria-item-next {
  color: white !important;
  cursor: pointer;
  z-index: 40;
}

.p-galleria-item-next .p-galleria-item-next-icon {
  width: 50px;
  height: 50px;
}

.p-galleria-item-next:hover {
  color: #330EEA !important;
}

.p-galleria-item-prev  {
  color: white !important;
  cursor: pointer;
  z-index: 40;
}

.p-galleria-item-prev .p-galleria-item-prev-icon {
  width: 50px;
  height: 50px;
}

.p-galleria-item-prev:hover {
  color: #330EEA !important;
}

/* thumbnail styling */
.p-galleria-thumbnail-container {
  margin: 25px 18.25vw 1vh 18.25vw;
  padding: 0 1px 2px 1px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.p-galleria-thumbnail-next {
  color: white !important;
  z-index: 100;
}

.p-galleria-thumbnail-next:hover {
  color: #330EEA !important;
}

.p-galleria-thumbnail-prev {
  z-index: 100 !important;
  color: white !important;
}

.p-galleria-thumbnail-prev:hover {
  color: #330EEA !important;
}
/* styles for property-list-viewer PropertyList */
#properties-list .custom-padding-small .p-2 {
    padding: 2px !important;
}

#properties-list .custom-padding-normal .p-2 {
    padding: 6px !important;
}

#properties-list .custom-padding-large .p-4 {
    padding: 10px !important;
}

#properties-list .p-paginator-left-content {
    margin: unset;
}

.p-paginator-bottom {
    border-top: 1px solid rgb(209, 213, 219);
    border-radius: 0px;
}

.p-datatable-table.p-datatable-scrollable-table {
    border-collapse: unset !important;
}

/* This controls the frozen row when a row is locked at the top */
.p-datatable-tbody.p-datatable-frozen-tbody tr {
    box-shadow: 0 4px 6px rgba(0, 0, 255, 0.1);
    padding: 16px;
    border-radius: 8px;
    background-color: #3498db;
    color: #fff;
}

#properties-list-data-table .p-datatable-table .p-datatable-thead th {
    padding: 10px !important;
}
/* styles for decision-making-page SelectListSortBtn */
.p-dropdown-item {
  padding: 5px;
}

.p-dropdown-item:hover {
  background-color: #330EEA;
  color: white;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.p-dialog-mask.p-dialog-right {
  background-color: unset;
  top: 25%;
  z-index: 5 !important;
}

.p-dialog-mask.p-dialog-center {
  background-color: unset;
  top: 25%;
  z-index: 5 !important;
}

/* Mobile styles for the dialog  */
@media (max-width: 768px) {
  .p-dialog-mask.p-dialog-center {
    justify-content: unset !important;
  }
  .p-dialog .p-dialog-content {
    padding: 0 !important;
  }
}

/* Styles for the final decision making table to get responsive scrollHeight for DataTable */
#fdm-properties-data-table {
  max-height: calc(100vh - 300px) !important;
}
@media (max-width: 768px) {
  #fdm-properties-data-table {
    max-height: calc(55vh) !important;
  }

  #fdm-container {
    padding: 0 !important;
  }
}
#search-criteria-drawer>div {
  height: 100vh;
  padding-top: 65px;
  /* When we get around to refactoring this or preparing for a mobile launch, this can be removed */
  min-width: 500px;
  display: flex;
  flex-direction: column;
}

#property-list-viewer-header #search-string-container {
  min-width: 300px;
}

:root {
  --header-height: 100px;
}