/**
 * comps.css
 *
 * All styling for views/comps.php — loaded only on that page (see
 * layouts/head.php's $page === 'comps' check), alongside search.css
 * (reused directly for .sr-checkbox-row/.sr-field/.sr-card-status/
 * .sr-status-*, .sr-empty, .sr-error — see this page's own docblock on
 * why those are reused rather than redefined) and listing-detail.css
 * (reused for .ld-wrap's generic page padding/.ld-notfound, same
 * pattern views/mortgage-calculator.php's own head.php gating already
 * established). Same palette as those two (#12233D text, #DCE1E8
 * borders, #F7F8FA panel bg, #1E40AF accent, #5B6B82 muted text) for
 * visual consistency across every listings-related page.
 */

.comps-wrap {
  /* Wider than listing-detail.css's own 960px .ld-wrap default — this
     page's map + results list sit side by side (see .comps-results-layout
     below) and need the extra room .sr-wrap's own 1140px already gives
     views/search.php's Map view for the same reason. */
  max-width: 1140px;
}

/* Same shape as home.css's own .hp-section-header (heading left, a
   right-aligned link on the opposite side, one row instead of two) —
   .comps-title's own margin-bottom moved here (see that rule below) for
   the same reason .hp-section-header .hp-section-heading resets its own
   margin: flex items don't collapse margins with siblings the way a
   block-level heading normally would, so left on .comps-title itself
   that margin would misalign .comps-back against its vertical center on
   top of doubling up with this row's own margin-bottom. */
.comps-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.comps-back {
  flex: 0 0 auto;
  color: #4B5A70;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.comps-back:hover {
  color: #12233D;
  text-decoration: underline;
}

.comps-title {
  font-size: 28px;
  margin: 0;
}

/* ---- Property Summary band ---- */
.comps-summary {
  display: flex;
  gap: 20px;
  border: 1px solid #DCE1E8;
  border-radius: 8px;
  background: #F7F8FA;
  padding: 20px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.comps-summary-thumb {
  flex: 0 0 160px;
  width: 160px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  background: #EEF1F5;
}

.comps-summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comps-summary-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comps-summary-thumb-placeholder svg {
  width: 40%;
  height: 40%;
  color: #C2CBD6;
}

/* ---- Print-only: subject photo strip (up to 3 photos) ---- */
/* Absent on screen — views/comps.php only ever renders this from
   $subjectPrintPhotos (a separate, print-only query, see that array's
   own docblock) when printing, and even then it's only ever shown via
   the @media print block below; .comps-summary-thumb above (the single
   on-screen photo) stays exactly as-is both on screen and hidden in
   print, where this is what shows in its place. */
.comps-print-summary-photos {
  display: none;
}

.comps-print-summary-photo {
  border-radius: 6px;
  overflow: hidden;
  background: #EEF1F5;
}

.comps-print-summary-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comps-summary-body {
  flex: 1 1 auto;
  min-width: 0;
}

.comps-summary-address {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.comps-summary-price {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 14px;
}

.comps-summary-price-label {
  font-size: 13px;
  font-weight: 600;
  color: #5B6B82;
}

.comps-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.comps-summary-stat {
  display: flex;
  flex-direction: column;
}

.comps-summary-stat-value {
  font-size: 16px;
  font-weight: 700;
}

.comps-summary-stat-label {
  font-size: 12px;
  color: #5B6B82;
}

/* ---- Filter panel ---- */
/* An always-open, static panel — not the floating <details> pills
   .sr-filter-pill uses on /search — a comps workflow needs every filter
   visible together at once, but reuses that same page's checkbox row
   (.sr-checkbox-row)/min-max field (.sr-field) styling directly (see
   views/comps.php's own markup) so the individual controls still read as
   the same visual language as everywhere else on the site. */
/* ---- Collapsible <details>/<summary> wrapper, collapsed by default ---- */
/* Same CSS-only collapse pattern as search.css's .sr-filter-pill and
   listing-detail.css's own earlier "Request a Showing" iteration — marker
   hidden, .comps-filters-summary styled as a standard accordion header
   bar (label left, rotating chevron right, hover state) rather than a
   disclosure triangle or plain text toggle. .comps-filters itself
   (below) is unchanged when open, just merges visually with the summary
   bar above it (border-top: none, only the bottom corners rounded)
   instead of standing apart. */
.comps-filters-details {
  margin-bottom: 20px;
}

.comps-filters-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: #1E40AF;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-sizing: border-box;
  transition: background 0.15s ease;
}

/* Subtle background darken on hover — same darken-on-hover convention
   as this site's other filled-blue buttons (.comps-search-btn below,
   search.css's .sr-search-btn family) — so this reads as clickable even
   before a visitor tries it, not just once they discover the cursor
   changes. */
.comps-filters-summary:hover {
  background: #16327F;
}

.comps-filters-summary::-webkit-details-marker {
  display: none;
}

.comps-filters-summary::marker {
  content: '';
}

/* Chevron rotates 180° between collapsed (pointing down, "click to
   expand") and open (pointing up, "click to collapse") — the one visual
   cue standard accordion headers always carry that plain bold text on
   its own doesn't. transition/transform-origin keep the rotation
   smooth and centered on the glyph itself rather than the SVG's box. */
.comps-filters-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.comps-filters-details[open] .comps-filters-chevron {
  transform: rotate(180deg);
}

.comps-filters-details[open] .comps-filters-summary {
  border-radius: 8px 8px 0 0;
}

.comps-filters-details[open] .comps-filters {
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* Small secondary-text disclaimer directly under the filter panel above —
   same quiet treatment as views/market-report.php's own .mw-disclaimer. */
.comps-disclaimer {
  font-size: 12px;
  color: #5B6B82;
  margin: 8px 0 20px;
}

/* A proper grid, not flex — every filter group (checkbox list or
   min/max input pair alike) sits in a same-width column, and
   align-items: start keeps every group's label flush with the same top
   edge regardless of how tall its own control ends up (a 4-row checkbox
   list next to a single select), instead of flex's align-items:
   flex-end pinning mismatched-height groups to their BOTTOM edge, which
   is what made Property Type/Status read at a different vertical rhythm
   than the dropdown/input groups beside them. Document order already
   groups Property Type/Status/Radius/Sold Within as the first four
   children and Beds/Baths/Living Area/Lot Size as the next four, so a
   plain 4-column auto-flow grid lands them on two clean rows with no
   explicit grid-column/grid-row placement needed on any individual
   group. */
.comps-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 24px;
  align-items: start;
  border: 1px solid #DCE1E8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 0;
}

.comps-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comps-filter-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5B6B82;
  margin: 0;
}

.comps-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comps-select {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #DCE1E8;
  border-radius: 6px;
  background: #FFFFFF;
  color: #12233D;
  min-width: 100px;
}

.comps-range-fields {
  display: flex;
  gap: 8px;
}

/* Overrides search.css's own .sr-field input/select { min-width: 140px }
   (sized for that page's wider, standalone filter row) — inside this
   grid's narrower per-group columns, two 140px-min-width siblings no
   longer fit side by side, so flexbox squeezed Max down to make room
   for Min's enforced minimum instead of splitting the column evenly.
   These are 1-3 digit numbers (beds/baths/sqft), not free text, so a
   compact, evenly-split pair reads better here regardless. flex: 1 1 0
   ignores each input's own content-based basis and splits the column
   50/50; box-sizing: border-box keeps that computed width inclusive of
   padding/border instead of adding them on top of it. */
.comps-range-fields .sr-field {
  flex: 1 1 0;
  min-width: 0;
}

.comps-range-fields .sr-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Spans every column and sits right-aligned on its own row below the
   last filter row — grid-column: 1 / -1 rather than a fixed "5" so this
   still spans the full width if the column count above ever changes. */
.comps-search-btn {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 14px;
  font-weight: 700;
  background: #1E40AF;
  color: #FFFFFF;
  border: none;
  padding: 11px 24px;
  border-radius: 8px;
  cursor: pointer;
}

.comps-search-btn:hover {
  background: #1B3899;
}

/* ---- Estimated Value ---- */
.comps-value-box {
  /* Positioning context for .comps-print-btn below, pinned to this box's
     own corner rather than sitting in its own separate row. */
  position: relative;
  border: 1px solid #DCE1E8;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 20px 24px;
  margin-bottom: 24px;
  text-align: center;
}

/* Calls window.print() (js/comps.js) — near the Estimated Value box, not
   part of its centered stat layout, so it's pinned to the corner instead
   of interrupting .comps-value-stats' own flex row. */
.comps-print-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #DCE1E8;
  color: #4B5A70;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.comps-print-btn:hover {
  background: #F7F8FA;
  color: #12233D;
}

.comps-print-btn svg {
  width: 15px;
  height: 15px;
}

/* Estimated Value | Average $/Sqft, side by side — both equally
   prominent (each is just a .comps-value-title/-amount pair, the exact
   same styling either stat gets, see those two rules below) rather than
   one being visually primary and the other a smaller secondary figure.
   flex-wrap lets them stack instead of crushing together at a narrow
   viewport. */
.comps-value-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 48px;
  margin-bottom: 8px;
}

.comps-value-stat {
  flex: 0 1 auto;
  min-width: 140px;
}

.comps-value-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5B6B82;
  margin: 0 0 8px;
}

.comps-value-amount {
  font-size: 36px;
  font-weight: 800;
  color: #1E40AF;
  margin: 0 0 6px;
}

.comps-value-range {
  font-size: 14px;
  font-weight: 600;
  color: #12233D;
  margin: 0 0 6px;
  /* Empty (no text content) whenever recomputeEstimatedValue() has
     nothing valid to show — same graceful-empty-state cases as
     .comps-value-amount's own "—" (zero checked, none with both fields
     on file, etc.) — an empty <p> just collapses to nothing rather than
     leaving a stray "—" sitting next to the note that already explains
     why. */
}

.comps-value-note {
  font-size: 13px;
  color: #5B6B82;
  margin: 0;
}

/* ---- Map + results ---- */
.comps-results-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.comps-map-container {
  flex: 1 1 55%;
  /* Own stacking context — same Leaflet-internal-z-index containment
     reasoning as .sr-map-container in search.css (that rule's own
     comment has the full explanation of why this matters). */
  position: relative;
  z-index: 0;
}

.comps-map {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  border: 1px solid #DCE1E8;
}

/* .comps-results-list used to be the flex item directly inside
   .comps-results-layout (flex: 1 1 45%) — now wrapped one level deeper
   by .comps-results-panel, so the toolbar above it (sort + Select All
   Sold/Deselect All) shares the same column width instead of stretching
   the map's own share of the row. */
.comps-results-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 45%;
  min-width: 0;
}

.comps-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.comps-results-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comps-results-sort label {
  font-size: 13px;
  font-weight: 600;
  color: #5B6B82;
}

.comps-results-bulk-actions {
  display: flex;
  gap: 12px;
}

.comps-toolbar-btn {
  font-size: 13px;
  font-weight: 600;
  color: #1E40AF;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.comps-toolbar-btn:hover {
  text-decoration: underline;
}

.comps-results-list {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #DCE1E8;
  border-radius: 8px;
}

.comps-loading {
  padding: 24px;
  color: #5B6B82;
  text-align: center;
}

.comps-result-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #EEF1F5;
}

.comps-result-row:last-child {
  border-bottom: none;
}

/* Hover-sync: a marker hovered on the map highlights its matching list
   row (js/comps.js toggles this class) — same background-tint treatment
   as css/search.css's own .sr-map-list-card--active, no layout shift. */
.comps-result-row--active {
  background: #EEF3FC;
}

.comps-result-checkbox {
  flex: 0 0 20px;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.comps-result-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Small square thumbnail, same placeholder-icon fallback (identical SVG
   markup) as .comps-summary-thumb-placeholder above and listing-card.php's
   own card component — see js/comps.js's own resultRowHtml(), which
   renders this client-side rather than server-rendering it here (this
   whole results list is JS-built, see views/comps.php's own docblock). */
.comps-result-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #EEF1F5;
}

.comps-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comps-result-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comps-result-thumb-placeholder svg {
  width: 45%;
  height: 45%;
  color: #C2CBD6;
}

.comps-result-body {
  flex: 1 1 auto;
  min-width: 0;
}

.comps-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.comps-result-address {
  font-size: 14px;
  font-weight: 700;
  color: #12233D;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comps-result-address:hover {
  text-decoration: underline;
}

/* .sr-card-status (search.css) is position: absolute by default, meant
   to overlay a card's photo — this page shows it inline instead, next to
   the address, so those positioning rules need to be reset back to
   normal flow here. */
.comps-result-status {
  position: static;
}

.comps-result-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: #5B6B82;
}

.comps-result-price {
  font-weight: 700;
  color: #12233D;
}

/* ---- Map markers ---- */
.comps-map-marker-icon {
  background: transparent;
  border: none;
}

.comps-map-subject-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1E40AF;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 2px #1E40AF, 0 2px 6px rgba(18, 35, 61, 0.4);
}

.comps-map-marker-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(18, 35, 61, 0.35);
  transition: transform 0.15s ease;
}

/* Hover-sync the other direction: a list row hovered highlights its
   matching marker (js/comps.js toggles this class) — same scale-up
   treatment as css/search.css's own .sr-map-marker-icon--active. Also
   applies on the marker's own direct :hover so mousing over it on the
   map gets the same emphasis without waiting on the mouseover handler. */
.comps-map-marker-icon--active .comps-map-marker-dot,
.comps-map-marker-dot:hover {
  transform: scale(1.4);
}

@media (max-width: 860px) {
  .comps-summary {
    flex-direction: column;
  }

  .comps-summary-thumb {
    width: 100%;
    flex-basis: auto;
  }

  .comps-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comps-results-layout {
    flex-direction: column;
  }

  .comps-map-container,
  .comps-results-panel {
    flex: 1 1 auto;
    width: 100%;
  }

  .comps-map {
    height: 360px;
  }

  .comps-results-list {
    max-height: 480px;
  }

  /* Below this width the corner-pinned button (see .comps-print-btn's own
     rule above) starts crowding the centered stats beside it — drop back
     to a normal static row above them instead. */
  .comps-print-btn {
    position: static;
    margin: 0 0 16px;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .comps-filters {
    grid-template-columns: 1fr;
  }

  .comps-search-btn {
    justify-self: stretch;
  }
}

/* ---- Print-only comps table ---- */
/* Built by js/comps.js's buildPrintCompsTable() (see that function's own
   docblock) — empty/absent on screen, only ever populated and shown via
   the @media print block below. */
.comps-print-table-wrap {
  display: none;
}

.comps-print-heading {
  font-size: 16px;
  margin: 0 0 10px;
}

.comps-print-note {
  font-size: 13px;
  color: #5B6B82;
}

.comps-print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.comps-print-table th,
.comps-print-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #DCE1E8;
  vertical-align: top;
}

.comps-print-table th {
  font-weight: 700;
  color: #12233D;
}

/* ---- Print / Save as PDF ---- */
/* Whitelist approach, not a blacklist of individual things to hide: hide
   EVERY body-level element except this page's own content wrapper, then
   show it back. This is what catches the nav header, the footer, AND the
   Tawk.to chat widget in one rule — that widget injects its own
   container with a RANDOMIZED id on every single page load (confirmed by
   inspecting the live DOM twice — a different id each time), so there is
   no fixed selector that could ever target it directly; nothing needs to
   guess at it here since it's simply never in the allow-list. */
@media print {
  body > *:not(.comps-wrap) {
    display: none !important;
  }

  .comps-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* The back-to-listing link has nowhere useful to go on paper. */
  .comps-back {
    display: none;
  }

  /* Interactive-only chrome: the filter panel (collapsed or expanded —
     <details>'s own open state doesn't matter, this hides it either
     way), the disclaimer just below it (references "the filters above",
     meaningless once that panel itself is hidden), the Print button
     itself, and the entire map/results-list experience (checkboxes,
     Deselect All, Sort, and the Leaflet map — excluded deliberately: its
     tiles are async-loaded images that are unreliable in print output,
     so a broken/blank map area is avoided entirely rather than risked).
     #comps-print-table-wrap below is the print-appropriate replacement
     for the comps portion of this. */
  .comps-filters-details,
  .comps-disclaimer,
  .comps-print-btn,
  .comps-results-layout {
    display: none !important;
  }

  .comps-print-table-wrap {
    display: block;
  }

  .comps-summary,
  .comps-value-box {
    border: 1px solid #999;
    box-shadow: none;
  }

  /* Stacks the photo area above the address/price/stats body instead of
     side by side — declared explicitly here rather than left to ride on
     the fact that the (max-width: 860px) rule above has no "screen and"
     qualifier and happens to also apply to print's own narrower page
     width today: that's real, confirmed behavior (checked directly),
     but relying on an unrelated bug in a different rule to keep this
     layout correct would silently break this the moment that "screen
     and" gets added there for its own, separate reasons. */
  .comps-summary {
    flex-direction: column;
  }

  /* The on-screen single-photo box (.comps-summary-thumb, 160x120) is
     replaced in print by the photo strip below — up to 3 photos instead
     of one, so the row doesn't read as a small square with a lot of
     empty space beside it once it's print-page-wide. */
  .comps-summary-thumb {
    display: none;
  }

  /* Subject photo strip: however many of $subjectPrintPhotos actually
     came back (1, 2, or 3 — views/comps.php never renders empty slots
     for missing ones) share the row's own full width equally (flex: 1 1
     0, the default flex-basis of 0 is what makes them grow to fill all
     available space rather than sizing from content) — fewer photos
     means each gets a bigger equal share, not smaller. aspect-ratio: 1
     is what keeps each one a true square regardless of that computed
     width, so it's automatically taller than the old fixed 160x160 box
     the moment the row itself is wider than 480px (three squares) or
     160px (one) — no separately hardcoded height needed for "noticeably
     taller". object-fit: cover (not contain) on each <img> is the same
     crop-to-fill treatment .comps-summary-thumb used to have, just
     applied per photo here instead of once. */
  .comps-print-summary-photos {
    display: flex;
    gap: 8px;
  }

  .comps-print-summary-photo {
    flex: 1 1 0;
    aspect-ratio: 1;
  }

  .comps-print-table {
    page-break-inside: auto;
  }

  /* Keeps one comp's own row (address through sold date) from splitting
     across a page boundary — the whole row moves to the next page
     together instead. break-inside is the modern property name;
     page-break-inside is kept alongside it for older print engines that
     don't recognize break-inside. */
  .comps-print-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}