/**
 * 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;
}

.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;
}

/* 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 {
  border: 1px solid #DCE1E8;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 20px 24px;
  margin-bottom: 24px;
  text-align: center;
}

/* 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;
}

.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;
}

/* Same footprint as the real checkbox above, so an Active/Under Contract
   row's own facts line stays aligned with every Sold row's — just
   nothing rendered inside it, not even a disabled control, per this
   page's own "avoid the confusing case of a visitor checking something
   that silently does nothing" rule (see js/comps.js's own
   resultRowHtml()). */
.comps-checkbox-placeholder {
  display: block;
  width: 16px;
  height: 16px;
}

/* 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);
}

@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;
  }
}

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

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