/* JB-Space Design System V1. Shared by the public map and team workspace.
   Gold is an accent; small text on pale gold uses the darker gold-ink token.
   Keep semantic rental, error and compass states distinguishable. */
:root {
  color-scheme: light;
  --brand-navy: #17354a;
  --brand-teal: #117e79;
  --brand-teal-hover: #0c6662;
  --brand-teal-soft: #eaf5f3;
  --brand-gold: #c9a66b;
  --brand-gold-soft: #f8f3e9;
  --brand-gold-ink: #775b2c;
  --surface: #ffffff;
  --page: #f5f7f8;
  --ink: #253849;
  --muted: #5f7180;
  --line: #dce4e8;
  --border-strong: #b7c8d0;
  --rent: #946627;
  --danger: #a34336;
  --shadow: 0 12px 44px #17354a1a;
  --map-area: var(--brand-navy);
  --map-draw: var(--brand-teal);
  /* Compatibility aliases for the original component styles. */
  --green: var(--brand-teal);
  --green-light: var(--brand-teal-soft);
  --cream: var(--page);
  --accent: var(--rent);
  background: var(--page);
}

body { background: var(--page); }
::selection { background: #cde8e5; color: var(--brand-navy); }
h1, h2, h3, h4, .brand, .card-price, .project-enquiry > strong,
.project-mobile-price, .profile-summary strong { color: var(--brand-navy); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand-teal);
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* A quiet white header, with navy reserved for brand and navigation. */
.header, .location-bar, .sidebar, dialog { background: var(--surface); }
.brand-mark { background: var(--brand-navy); color: var(--brand-gold); }
.brand-mark svg path:first-child { fill: var(--brand-gold); stroke: var(--brand-gold); }
.brand-mark svg path:last-child { fill: var(--brand-navy); stroke: var(--brand-navy); }
.brand small, .nav-link { color: var(--muted); }
.nav-link.active { color: var(--brand-navy); }
.nav-link.active::after { background: var(--brand-navy); }
.nav-link span { background: var(--page); }
#favoritesButton { min-width: 44px; }
#favoritesButton.active { color: var(--brand-teal); }
#favoritesButton.active::after { background: var(--brand-teal); }
#favoritesButton.active .favorites-icon svg { fill: currentColor; }
.team-button, .language-picker {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brand-navy);
}
.language-picker select { color: var(--brand-navy); }
.team-button:hover { background: var(--page); border-color: var(--border-strong); }
.state-field select { background: var(--page); color: var(--brand-navy); }
.region-chip { color: var(--muted); }
.region-chip:hover { background: var(--page); border-color: var(--border-strong); }
.region-chip.active { background: var(--brand-navy); border-color: var(--brand-navy); color: white; }
.region-chip span { opacity: 1; }

/* Search and filters use teal to make the next action easy to find. */
.sidebar { scrollbar-color: var(--border-strong) transparent; }
.sidebar-top { background: var(--surface); }
.eyebrow { color: var(--muted); }
h1 > span { color: var(--brand-teal); }
.sidebar .intro { font-size: 12px; }
.search-box {
  background: var(--page);
  border-color: var(--border-strong);
  color: var(--brand-teal);
  height: 46px;
}
.search-box input { font-size: 13px; }
.search-box:focus-within {
  background: var(--surface);
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px #117e791a;
}
.transaction-tabs button { color: var(--muted); }
.transaction-tabs button.active { color: var(--brand-teal); }
.transaction-tabs button span { opacity: 1; }
.filters select, .filter-button { min-height: 38px; border-color: var(--border-strong); }
.filter-button:hover, .filter-button[aria-expanded="true"] {
  background: var(--brand-teal-soft); color: var(--brand-teal-hover); border-color: var(--brand-teal);
}
.filter-dot { background: var(--brand-teal); }
.extra-filters { background: var(--page); }
.extra-filters :is(input, select) { border-color: var(--border-strong); }
.listing-kind-button, .sector-button {
  background: var(--surface); border-color: var(--line); color: var(--muted);
}
.listing-kind-button:hover, .sector-button:hover {
  background: var(--page); border-color: var(--border-strong);
}
.listing-kind-button.active, .sector-button.active {
  color: var(--brand-teal-hover); background: var(--brand-teal-soft);
  border-color: var(--brand-teal); box-shadow: inset 0 0 0 1px var(--brand-teal);
}
.listing-kind-button[data-listing-kind="project"].active {
  background: var(--brand-gold-soft); border-color: var(--brand-gold-ink);
  color: var(--brand-gold-ink); box-shadow: inset 0 0 0 1px var(--brand-gold-ink);
}
.sector-button small, .sector-button.active small { color: var(--muted); }
.sector-button b, .sector-button.active b { background: var(--brand-teal-soft); }

/* White property cards keep photography and the price in the foreground. */
.results-header, .listings, .sidebar-footer { background: var(--page); }
.results-header { padding-top: 18px; }
.property-card { border-color: var(--line); box-shadow: 0 3px 10px #17354a06; }
.property-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 24px #17354a14; }
.card-image, .detail-gallery, .project-hero { background: #eaf0f2; }
.card-title { color: var(--ink); line-height: 1.6; }
.card-location, .card-specs, .project-card-footer { font-size: 11px; }
.card-specs { border-color: var(--line); color: var(--muted); }
.card-specs .spec-type, .illustration-label, .sidebar-footer { color: var(--muted); }
.badge.sale { background: var(--brand-teal); color: white; }
.badge.rent { background: var(--rent); color: white; }
.badge.status { background: var(--muted); color: white; }
.save-button { background: #fffffff2; color: var(--muted); }
.save-button:hover { color: var(--brand-teal); }
.save-button.saved { color: var(--brand-teal); }
.save-button.saved svg { fill: var(--brand-teal); stroke: var(--brand-teal); }
.status-dot, .live-pill i { background: var(--brand-teal); }
.demo-note, .detail-sample-note, .project-demo-note {
  color: var(--brand-gold-ink); background: var(--brand-gold-soft);
}
.demo-note { padding-top: 9px; }

/* Gold is limited to curated projects and small editorial details. */
.featured-section { background: var(--page); border-color: var(--line); }
.featured-section-heading span, .featured-section-heading > p, #toggleFeatured { color: var(--muted); }
.featured-section-heading span::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  margin-right: 7px; vertical-align: middle; background: var(--brand-gold);
}
.featured-card { border-color: var(--brand-gold); box-shadow: 0 3px 12px #17354a08; }
.featured-card[data-project]:hover { box-shadow: 0 5px 18px #17354a24; }
.featured-shade { background: linear-gradient(90deg, #17354aeb, #17354ab8 65%, #17354a38); }
.featured-order { color: #f1d9af; }
.featured-copy small, .featured-copy em { opacity: 1; }
.featured-copy small { color: #f1f5f7; }
.featured-empty, .featured-empty.slot-2, .featured-empty.slot-3 {
  background: var(--surface); color: var(--brand-navy);
}
.featured-empty .featured-order { color: var(--brand-gold-ink); }
.featured-empty > small { color: var(--muted); opacity: 1; }
.project-logo { background: var(--surface); border-color: var(--line); }
.project-logo-placeholder { background: var(--page); color: var(--brand-navy); }
.project-card-tag {
  color: var(--brand-gold-ink); background: var(--brand-gold-soft); border-color: var(--brand-gold);
}
.project-card-footer { border-color: var(--line); color: var(--brand-teal); }
.project-developer-name, .project-stat-row small, .project-enquiry > small,
.project-enquiry > p, .project-location-line, .brochure-card small,
.developer-profile-snippet p, .developer-profile-snippet small,
.developer-project-list small { color: var(--muted); }
.project-hero::after { background: linear-gradient(0deg, #17354aeb, transparent); }
.project-hero-caption h2 { color: white; }
.project-long-copy, .project-highlights { color: var(--ink); }
.project-stat-row, .developer-profile-header { border-color: var(--line); }
.project-enquiry, .brochure-card, .developer-profile-snippet, .developer-project-list button {
  background: var(--page); border-color: var(--line);
}
.brochure-card:hover, .developer-project-list button:hover { border-color: var(--brand-teal); }
.brochure-card > svg, .brochure-card > b, .developer-profile-header a { color: var(--brand-teal); }

/* Navy areas, teal sale prices and dark amber rentals match the legend. */
.map-panel, .leaflet-container { background: #e9eef0; }
.map-heading h2 { color: var(--brand-navy); }
.map-heading h2 span, .boundary-legend, .map-sector-panel > p { color: var(--muted); }
.live-pill, .map-legend, .map-tip, .pick-bar {
  background: #fffffff2; border-color: var(--line); color: var(--ink);
  box-shadow: 0 4px 18px #17354a0d;
}
.tip-icon { color: var(--brand-teal); background: var(--brand-teal-soft); }
.map-tip p, .map-tip button { color: var(--muted); }
.map-tools button { background: var(--surface); border-color: var(--line); color: var(--brand-navy); }
.map-tools button:hover { border-color: var(--brand-teal); }
.leaflet-control-zoom { border-color: var(--border-strong) !important; }
.leaflet-control-zoom a { color: var(--brand-navy) !important; background: var(--surface) !important; }
.leaflet-control-attribution { background: #fffffff2 !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--brand-teal) !important; }
.area-pin { color: var(--brand-navy); background: var(--surface); border-color: var(--border-strong); }
.area-pin::after { border-color: var(--border-strong); }
.area-pin .pin-count { color: var(--brand-navy); background: var(--page); }
.area-pin.active { color: white; background: var(--brand-navy); border-color: var(--brand-navy); }
.area-pin.active::after { border-color: var(--brand-navy); }
.area-pin.active .pin-count { background: #ffffff26; color: white; }
.legend-area { background: var(--brand-navy); }
.legend-sale, .price-pin { background: var(--brand-teal); }
.legend-rent, .price-pin.rent { background: var(--rent); }
.price-pin:hover, .price-pin.highlight { background: var(--brand-navy); }
.project-map-pin .project-logo { border-color: var(--brand-gold); }
.project-map-pin > strong {
  border-color: var(--brand-gold); background: var(--surface); color: var(--brand-navy);
}
.map-error { background: #f8f3e9f5; color: var(--brand-gold-ink); }

/* The same brand in the workspace, with neutral panels and compact tables. */
.button { background: var(--brand-teal); border-color: var(--brand-teal); }
.button:hover { background: var(--brand-teal-hover); border-color: var(--brand-teal-hover); }
.button.secondary { background: var(--surface); color: var(--brand-teal); border-color: var(--border-strong); }
.button.secondary:hover { background: var(--brand-teal-soft); color: var(--brand-teal-hover); border-color: var(--brand-teal); }
.danger-text { color: var(--danger) !important; }
.danger-button { background: var(--danger); border-color: var(--danger); }
.danger-button:hover { background: #84352b; border-color: #84352b; }
dialog { border-color: var(--line); }
dialog::backdrop { background: #17354a66; }
.dialog-close { background: #fffffff2; border-color: var(--line); color: var(--muted); }
.dialog-symbol { background: var(--brand-teal-soft); color: var(--brand-teal); }
form input, form select, form textarea { border-color: var(--border-strong); outline-color: var(--brand-teal); }
form input:focus, form select:focus, form textarea:focus { border-color: var(--brand-teal); }
.form-error { color: var(--danger); }
.form-error.upload-success { color: var(--brand-teal); }
.field-help, .area-picker > label > span, .account-field-note,
.account-photo-field > div p, .profile-summary p, .team-control-note span,
.invitation-list-heading p, .recovery-help p, .member-details dt,
.catalog-intro p, .catalog-admin-card p, .catalog-admin-card small,
.catalog-muted, .catalog-empty, .catalog-edit-dialog label small { color: var(--muted); }
.account-field-note a, .area-picker-fields select optgroup { color: var(--brand-teal); }
.area-picker-fields select option { color: var(--ink); }
.upload-label, .account-photo-field { background: var(--page); border-color: var(--border-strong); color: var(--brand-teal); }
.account-avatar { background: var(--page); border-color: var(--line); }
.account-avatar-placeholder { color: var(--brand-navy); }
.account-role { background: var(--brand-teal-soft); color: var(--brand-teal-hover); }
.account-profile-form input[readonly] { background: var(--page); color: var(--muted); }
.team-control-note, .recovery-help, .catalog-intro, .catalog-upload-section {
  background: var(--page); border-color: var(--line);
}
.workspace-privacy { background: var(--page); border-color: var(--line); color: var(--brand-navy); }
.workspace-privacy p { color: var(--muted); }
.catalog-admin-card { background: var(--surface); border-color: var(--line); }
.account-secret-code { background: var(--page); border-color: var(--border-strong); color: var(--brand-navy); }
.admin-tabs .active { color: var(--brand-navy); border-color: var(--brand-teal); }
.admin-table th { background: var(--page); color: var(--muted); }
.status-tag { background: var(--brand-teal-soft); color: var(--brand-teal-hover); }
.status-tag.inactive, .demo-controls { background: var(--brand-gold-soft); color: var(--brand-gold-ink); }
.boundary-box { background: var(--page); border-color: var(--border-strong); }
.boundary-box > span { color: var(--brand-teal); }
.detail-meta span { background: var(--page); color: var(--muted); }
.detail-description { color: var(--ink); font-size: 12px; }
.detail-thumbs button.selected { border-color: var(--brand-teal); box-shadow: 0 0 0 1px var(--brand-teal); }
.detail-thumbs .video-thumb { background: var(--brand-navy); }
.toast { background: var(--brand-navy); color: white; }
.mobile-switch { background: var(--surface); border-color: var(--line); box-shadow: 0 6px 28px #17354a24; }
.mobile-switch button { color: var(--muted); }
.mobile-switch .active { background: var(--brand-teal); color: white; }

@media (max-width: 760px) {
  .listing-kind-button { min-height: 52px; }
  .transaction-tabs button, .filters select, .filter-button { min-height: 44px; }
  .card-title { font-size: 14px; }
  .card-location, .card-specs { font-size: 12px; }
  .mobile-switch button { min-height: 44px; }
}

/* Listing cards: title, tappable photography, facts, then a clear next step. */
.listing-card { display: flex; flex-direction: column; border-radius: 16px; }
.listing-card-heading { display: flex; align-items: flex-start; gap: 10px; padding: 18px 16px 13px; }
.listing-card-heading .card-title { flex: 1; min-width: 0; height: 3em; margin: 0; font-size: 15px; line-height: 1.5; }
/* Reserve two title lines even for short names; keep the full name in the DOM. */
.listing-card-heading .card-title button {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  width: 100%; height: 3em; line-height: inherit; overflow: hidden; text-overflow: ellipsis;
  text-align: left; padding: 0; color: var(--brand-navy); overflow-wrap: anywhere;
}
.listing-card-heading .save-button { position: static; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--line); }
.listing-card .card-photo { flex-shrink: 0; width: calc(100% - 32px); margin: 0 16px; border-radius: 12px; overflow: hidden; }
.listing-card .card-image { height: auto; aspect-ratio: 4 / 3; max-height: 280px; }
.card-photo-count {
  position: absolute; display: inline-flex; align-items: center; gap: 5px;
  background: #17354ae8; color: white; padding: 6px 8px; border-radius: 6px; font-size: 10px;
}
.card-photo-count { right: 10px; bottom: 10px; }
.card-photo-count svg { width: 14px; height: 14px; }
.listing-card .card-video-play { top: 12px; right: 12px; bottom: auto; left: auto; background: var(--brand-navy); color: white; }
.listing-card .card-content { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.listing-card .card-price { display: block; font-size: 25px; }
.listing-card .card-location { line-height: 1.6; min-height: 1.6em; }
/* Reserve two fact lines for both listings and projects at narrow widths. */
.listing-card .card-specs { display: flex; line-height: 1.8; min-height: calc(3.6em + 17px); row-gap: 4px; align-content: flex-start; }
.listing-card .spec-type { margin-left: 0; }
.listing-reference {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 14px 0;
  padding: 9px 10px; background: var(--page); color: var(--muted); border-radius: 8px;
  font-size: 10px; line-height: 1.6; overflow-wrap: anywhere;
}
.listing-demo-label { margin-left: auto; color: var(--brand-gold-ink); }
.listing-card-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: auto; }
.listing-card-actions .button { min-width: 0; min-height: 44px; padding: 10px 6px; font-size: 11px; }
.listing-card-actions .button:disabled { opacity: 1; background: var(--page); border-color: var(--line); color: var(--muted); cursor: default; }
.gallery-photo-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.agent-portrait { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; }
.agent-portrait .agent-avatar { width: 46px; height: 46px; object-fit: cover; background: var(--page); color: var(--brand-navy); border: 1px solid var(--line); }
.agent-avatar-fallback svg { width: 23px; height: 23px; }
.detail-agent strong { font-size: 12px; }
.detail-agent small { font-size: 11px; line-height: 1.6; }
#photoCount { margin-top: 12px; }
.legacy-media-note { font-size: 11px; line-height: 1.7; padding: 10px; color: var(--brand-gold-ink); background: var(--brand-gold-soft); border-radius: 8px; }

/* A real photo viewer stays above the details dialog and returns to it on close. */
html.photo-viewing, html.photo-viewing body { overflow: hidden; }
.photo-viewer {
  width: 1200px; max-width: calc(100vw - 32px);
  height: calc(var(--photo-viewer-height, 100vh) - 32px); max-height: 900px;
  background: #0d2332; color: white; border-color: #355062; border-radius: 14px; overflow: hidden;
}
.photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-viewer::backdrop { background: #0d2332e6; }
.photo-viewer-heading { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-shrink: 0; }
.photo-viewer-heading h2 { flex: 1; min-width: 0; color: white; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#photoViewerCount { color: #d5e2ea; font-size: 12px; white-space: nowrap; }
.viewer-close { font-size: 29px; width: 44px; height: 44px; color: white; border-radius: 50%; }
.viewer-close:hover, .photo-viewer-footer button:hover { background: #233e50; }
.photo-viewer-frame { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.photo-viewer-stage { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: contain; background: #091b27; touch-action: pan-y pinch-zoom; }
.photo-viewer-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-zoomed .photo-viewer-stage { overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.photo-zoomed .photo-viewer-stage img { position: static; max-width: none; max-height: none; height: auto; }
.photo-viewer-stage p { padding: 24px; color: #d5e2ea; line-height: 1.8; }
.viewer-nav { position: absolute; top: calc(50% - 24px); width: 48px; height: 48px; border: 1px solid #ffffff66; border-radius: 50%; background: #17354ae8; color: white; font-size: 35px; line-height: 1; }
.viewer-nav:hover { background: var(--brand-teal); }
.viewer-previous { left: 12px; }
.viewer-next { right: 12px; }
.photo-viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-shrink: 0; }
.photo-viewer-footer p { font-size: 11px; color: #d5e2ea; }
.photo-viewer-footer button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; color: white; border: 1px solid #617d8e; border-radius: 8px; white-space: nowrap; font-size: 12px; }

/* Sharing is an explicit choice, with system sharing where the device supports it. */
.share-dialog .dialog-body { padding: 32px 24px 24px; }
.share-dialog .eyebrow { margin-bottom: 9px; }
.share-listing-preview { padding: 16px; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.share-listing-preview strong { font-size: 14px; color: var(--brand-navy); line-height: 1.6; overflow-wrap: anywhere; }
.share-listing-preview p { margin-top: 7px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.share-options { display: grid; gap: 9px; }
.share-option { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--brand-navy); text-align: left; font-size: 13px; }
.share-option:hover { background: var(--brand-teal-soft); border-color: var(--brand-teal); }
.share-option > span:last-child { margin-left: auto; }
.share-option svg { width: 22px; height: 22px; color: var(--brand-teal); }
.facebook-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2160b3; color: white; font: bold 20px Arial, sans-serif; }
.share-url-label { display: block; margin: 22px 0 9px; font-size: 12px; color: var(--muted); }
.share-url-row { display: flex; gap: 8px; }
.share-url-row input { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--page); padding: 11px; color: var(--ink); font-size: 12px; }
.share-url-row .button { flex-shrink: 0; font-size: 11px; }
.share-status { min-height: 22px; font-size: 12px; color: var(--brand-teal-hover); line-height: 1.7; margin: 12px 0 0; }

@media (max-width: 760px) {
  .listing-card-heading .card-title { font-size: 16px; }
  .listing-card .card-image { max-height: none; }
  .listing-card .card-price { font-size: 27px; }
  .listing-card-actions .button { font-size: 12px; }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .photo-viewer {
    position: fixed; inset: 0; margin: 0; width: 100%; max-width: none;
    height: var(--photo-viewer-height, 100vh); max-height: none; border: 0; border-radius: 0;
  }
  .photo-viewer-heading {
    gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px));
  }
  .photo-viewer-frame { margin-left: env(safe-area-inset-left, 0px); margin-right: env(safe-area-inset-right, 0px); }
  .photo-viewer-footer {
    padding: 8px max(10px, env(safe-area-inset-right, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); gap: 6px;
  }
  .photo-viewer-footer p { font-size: 10px; }
  .viewer-nav { width: 44px; height: 44px; }
  .viewer-previous { left: 7px; }
  .viewer-next { right: 7px; }
}

/* Private listing records and inventory lookup. */
.property-reference { color: var(--brand-teal); font-weight: 600; }
.internal-contact-fields { min-width: 0; margin: 4px 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.internal-contact-fields legend { padding: 0 6px; color: var(--brand-navy); font-size: 12px; font-weight: 600; }
.internal-contact-fields > p { margin-bottom: 14px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.internal-contact-fields label { margin-bottom: 12px; }
.inventory-search-panel { margin-top: 18px; }
.inventory-search { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--brand-teal); }
.inventory-search:focus-within { border-color: var(--brand-teal); box-shadow: 0 0 0 2px var(--brand-teal-soft); }
.inventory-search > span svg { width: 19px; height: 19px; }
.inventory-search input { min-width: 0; flex: 1; width: 100%; border: 0; outline: 0; background: transparent; padding: 13px 0; color: var(--ink); font-size: 12px; }
.inventory-search input::-webkit-search-cancel-button { display: none; }
.inventory-search button { width: 36px; height: 40px; flex-shrink: 0; font-size: 24px; color: var(--muted); }
.inventory-search-panel > p { margin-top: 7px; font-size: 10px; color: var(--muted); line-height: 1.6; }
.admin-table td.inventory-primary { min-width: 240px; max-width: 400px; white-space: normal; overflow-wrap: anywhere; }
.inventory-reference { display: block; margin-bottom: 5px; color: var(--brand-teal); font-size: 12px; font-weight: 600; }
.inventory-contact { margin-top: 10px; padding: 9px 11px; background: var(--page); border-radius: 7px; }
.inventory-contact strong, .inventory-contact a { display: block; margin-top: 3px; }
.inventory-contact a { color: var(--brand-teal); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.detail-info .detail-reference { margin: 10px 0; padding: 8px 10px; }
@media (max-width: 500px) { .internal-contact-fields .form-grid > label { grid-column: 1 / -1; } }

/* Desktop list-only browsing keeps the map instance and phone view switch. */
.desktop-map-toggle { display: none; }
@media (min-width: 761px) {
  .desktop-map-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 40px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--brand-navy); font-size: 12px; font-weight: 600; white-space: nowrap; }
  .desktop-map-toggle:hover { border-color: var(--brand-teal); background: var(--brand-teal-soft); color: var(--brand-teal-hover); }
  .desktop-map-toggle > span:first-child { display: flex; }
  .desktop-map-toggle svg { width: 17px; height: 17px; }
  .map-toggle-chevron { font-size: 21px; line-height: 1; }
  .desktop-map-collapsed .map-toggle-chevron { transform: rotate(180deg); }
  .desktop-map-collapsed .desktop-map-toggle { border-color: var(--brand-teal); background: var(--brand-teal-soft); color: var(--brand-teal-hover); }
  .desktop-map-collapsed .workspace { grid-template-columns: minmax(0, 1fr); }
  .desktop-map-collapsed .map-panel { display: none; }
  .desktop-map-collapsed .sidebar { background: var(--page); }
  .desktop-map-collapsed .sidebar-top { max-width: 1000px; margin-inline: auto; }
  .desktop-map-collapsed .results-header, .desktop-map-collapsed .listings { width: 100%; max-width: 1560px; margin-inline: auto; }
  .desktop-map-collapsed .listings { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
  .desktop-map-collapsed .listings > .empty-state { grid-column: 1 / -1; }
  .desktop-map-collapsed .pf-request-cta { max-width: 960px; margin-inline: auto; width: calc(100% - 44px); }
  body.picking .desktop-map-toggle { visibility: hidden; }
}

/* Keep the map key available on demand instead of covering the map. */
.map-tools { z-index: 510; }
.map-legend-control { position: relative; }
.map-legend-control > summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 10px; list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--brand-navy); font-size: 11px; font-weight: 600; box-shadow: 0 3px 12px #17354a0d; }
.map-legend-control > summary::-webkit-details-marker { display: none; }
.map-legend-control > summary > span:first-child { display: flex; }
.map-legend-control > summary:hover, .map-legend-control[open] > summary { border-color: var(--brand-teal); background: var(--brand-teal-soft); color: var(--brand-teal-hover); }
.map-legend-control > summary:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; }
.map-legend-control .map-legend { top: calc(100% + 8px); right: 0; left: auto; display: grid; gap: 10px; width: 222px; max-width: calc(100vw - 40px); padding: 12px; font-size: 11px; line-height: 1.6; white-space: normal; border-radius: 10px; box-shadow: 0 8px 24px #17354a24; }
.map-legend-control:not([open]) .map-legend { display: none; }
.map-legend-items { display: flex; flex-wrap: wrap; gap: 7px 13px; }
.map-legend-items > span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend-control .boundary-legend { align-items: flex-start; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.map-legend .legend-boundary { flex: 0 0 20px; height: 0; margin-top: 8px; border-top: 2px dashed var(--brand-navy); border-radius: 0; }
.map-sector-panel { top: 117px; }
@media (max-width: 760px) {
  .map-sector-panel { top: 114px; }
}

/* Area grouping uses the agent's existing private inventory and location IDs. */
.inventory-area-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; margin-bottom: 14px; }
.inventory-area-filter label { display: grid; gap: 7px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--brand-navy); }
.inventory-area-filter select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12px; text-overflow: ellipsis; }
.inventory-area-filter .text-button { min-height: 44px; padding: 8px; font-size: 11px; }
.inventory-area-filter > p { grid-column: 1 / -1; font-size: 10px; line-height: 1.7; color: var(--muted); }
@media (max-width: 600px) {
  .inventory-area-filter { grid-template-columns: minmax(0, 1fr); }
  .inventory-area-filter .text-button { justify-self: start; }
}