/* PropertIQ light theme — matches certezzarealty.com (Deploy/CertezzaSite/assets/site.css).
 *
 * How it works: index.html keeps its original dark palette in :root. This file only applies when
 * <html data-theme="light"> (the default; the user menu has a Dark mode switch saved in localStorage
 * "piq-theme"). It re-points the same variables to the light palette, then fixes the spots in
 * index.html that use hard-coded colors.
 *
 * Hook variables (undefined in dark, so dark keeps its fallbacks):
 *   --gold-ink   text that used var(--gold)   (darker gold so small text stays readable on white)
 *   --on-gold    text on gold buttons          (was var(--navy) / var(--navy-dark))
 *   --font-sans / --font-serif                 (were DM Sans / DM Serif Display)
 *   --rs         corner-radius scale for 3–16px radii (1 = original, 0.25 = near square)
 *
 * White-label later: a brokerage brand profile only needs to override the variables below.
 * Docs: _docs/features/propertiq/LIGHT_THEME.md
 */
html[data-theme="light"] {
  --navy: #FAF8F4;          /* page background (ivory) */
  --navy-mid: #FFFFFF;      /* panels, inputs */
  --navy-light: #F1ECE3;    /* sand: hover, chips, sub-panels */
  --navy-border: #E6E0D6;   /* lines */
  --card-bg: #FFFFFF;
  --navy-dark: #FFFFFF;     /* solid surface for modals (sign-up, map list) */
  --white: #1C2430;         /* headings / strong text (ink) */
  --text: #3B4552;          /* body text */
  --light: #3B4552;
  --muted: #6E747E;
  --gold: #B08D57;
  --gold-light: #C8A96E;
  --gold-ink: #8A6A36;
  --on-gold: #FFFFFF;
  --green: #2F7D55;
  --red: #B8394A;
  --amber: #A76B12;
  --font-sans: 'Manrope';
  --font-serif: 'Cormorant Garamond';
  --rs: 0.25;
  --shadow: 0 10px 30px rgba(28,36,48,.08);
  color-scheme: light;
}

html[data-theme="light"] body { background: var(--navy); color: var(--text); -webkit-font-smoothing: antialiased; }
html[data-theme="light"] ::selection { background: #EADFC9; color: #1C2430; }

/* Serif headings: Cormorant is lighter than DM Serif Display, so give it weight */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .topbar-logo { font-weight: 600; letter-spacing: -0.01em; }

/* ── Shell ── */
html[data-theme="light"] .topbar { background: #FAF8F4; } /* no backdrop-filter: it would trap the fixed mobile drawer inside the bar */
html[data-theme="light"] .topbar-logo { color: var(--white); }
/* Navy logo panel with a slanted edge, same as the logo panel on certezzarealty.com */
html[data-theme="light"] .topbar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 220px; background: #0D1B2A;
  clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%); pointer-events: none; }
html[data-theme="light"] .topbar-logo { position: relative; z-index: 1; color: #FAF8F4; flex-shrink: 0; min-width: 196px; }
/* Signed-in agents see up to 7 tabs: keep each on one line and keep the row clear of the navy panel */
html[data-theme="light"] .topbar-nav { flex: 1 1 auto; min-width: 0; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
html[data-theme="light"] .topbar-nav::-webkit-scrollbar { display: none; }
html[data-theme="light"] .topbar .nav-tab { white-space: nowrap; padding: 8px 12px; }
html[data-theme="light"] .topbar-right, html[data-theme="light"] .agent-badge, html[data-theme="light"] #topbar-invite-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1500px) { html[data-theme="light"] .topbar .nav-tab { padding: 8px 9px; letter-spacing: .08em; } }
@media (max-width: 1300px) { html[data-theme="light"] .topbar .nav-tab { padding: 8px 6px; letter-spacing: .04em; font-size: 10.5px; }
  html[data-theme="light"] #agent-name-display { display: none; } }
@media (max-width: 1180px) and (min-width: 769px) {
  html[data-theme="light"] .topbar { padding: 0 20px; }
  html[data-theme="light"] .topbar-logo { min-width: 150px; }
  html[data-theme="light"] .topbar::before { width: 180px; clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); }
  html[data-theme="light"] .topbar .nav-tab { font-size: 10px; padding: 8px 5px; letter-spacing: .02em; }
  html[data-theme="light"] #topbar-invite-btn .invite-btn-label { display: none; }
  html[data-theme="light"] #topbar-invite-btn .invite-btn-icon { display: inline !important; }
}
html[data-theme="light"] .topbar-logo span { color: #C8A96E; }
html[data-theme="light"] .mobile-nav-header { background: #0D1B2A; border-bottom-color: #0D1B2A; }
html[data-theme="light"] .mobile-nav-title { color: #FAF8F4; }
html[data-theme="light"] .mobile-nav-title span { color: #C8A96E !important; }
html[data-theme="light"] .mobile-nav-close { color: #C9CED6; }
@media (max-width: 768px) { html[data-theme="light"] .topbar-logo { min-width: 0; } html[data-theme="light"] .topbar::before { width: 158px; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); } }
html[data-theme="light"] .nav-tab { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 600; color: var(--text); }
html[data-theme="light"] .nav-tab:hover { background: transparent; color: var(--white); box-shadow: inset 0 -1px 0 var(--gold); }
html[data-theme="light"] .nav-tab.active { background: transparent; color: var(--white); box-shadow: inset 0 -2px 0 var(--gold); }
html[data-theme="light"] .user-dropdown { box-shadow: var(--shadow); }
html[data-theme="light"] .user-dropdown-item:hover { background: var(--navy-light); }
html[data-theme="light"] .user-dropdown-danger { color: var(--red); }
html[data-theme="light"] .user-dropdown-danger:hover { background: rgba(184,57,74,.08); }
html[data-theme="light"] .mobile-bottom-nav { background: rgba(255,255,255,.97); border-top: 1px solid var(--navy-border); box-shadow: 0 -6px 20px rgba(28,36,48,.06); }
html[data-theme="light"] #login-screen::before {
  background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(176,141,87,.10) 0%, transparent 60%),
              radial-gradient(ellipse 40% 60% at 80% 70%, rgba(241,236,227,.9) 0%, transparent 60%);
}
html[data-theme="light"] .login-card { box-shadow: var(--shadow); }

/* Primary buttons: website style (uppercase, letter-spaced, square) */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .filter-apply-btn {
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .filter-apply-btn:hover { background: var(--white); color: #fff; }

/* Inputs: white with a hairline */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme: light; }

/* Overlays & modals: soft ink veil instead of near-black */
html[data-theme="light"] .prop-modal-overlay,
html[data-theme="light"] .modal-overlay { background: rgba(28,36,48,.55); }

/* Things that sit ON photos stay dark with white text */
html[data-theme="light"] .idx-fav-btn,
html[data-theme="light"] .prop-modal-close,
html[data-theme="light"] .prop-nav-arrow,
html[data-theme="light"] .prop-gallery-more,
html[data-theme="light"] .hc-gallery-more-overlay,
html[data-theme="light"] .hc-see-all-btn { color: #fff; }
html[data-theme="light"] .prop-nav-bottom { background: rgba(255,255,255,.97); border-top: 1px solid var(--navy-border); }

/* Hairlines that were navy-blue */
html[data-theme="light"] .pitia-row, html[data-theme="light"] .pitia-hero, html[data-theme="light"] .pitia-controls,
html[data-theme="light"] .pitia-breakdown[open] summary,
html[data-theme="light"] .cd-proj-row, html[data-theme="light"] .cd-summary-row,
html[data-theme="light"] .cd-ctc-row, html[data-theme="light"] .cd-detail-row { border-bottom-color: var(--navy-border); }
html[data-theme="light"] .pitia-rate-stepper button:hover,
html[data-theme="light"] .pitia-rate-stepper .pitia-rate-display:hover,
html[data-theme="light"] .pitia-rate-stepper .pitia-rate-display:focus,
html[data-theme="light"] .pitia-loading-step,
html[data-theme="light"] .stm-alt-block { background: var(--navy-light); }
html[data-theme="light"] .pitia-down-chip:hover { border-color: var(--gold); }

/* Panels that hard-coded dark navy */
html[data-theme="light"] .share-dropdown { background: #fff; box-shadow: var(--shadow); }
html[data-theme="light"] .ss-panel,
html[data-theme="light"] .ss-panel-header { background: #fff; }
html[data-theme="light"] .ss-panel { box-shadow: -10px 0 30px rgba(28,36,48,.08); }
html[data-theme="light"] .map-search-area-btn { color: #fff; }
html[data-theme="light"] .leaflet-draw-toolbar a,
html[data-theme="light"] .leaflet-draw-edit-toolbar a,
html[data-theme="light"] .leaflet-touch .leaflet-draw-toolbar a,
html[data-theme="light"] .leaflet-touch .leaflet-draw-edit-toolbar a { background-color: #fff !important; border-bottom-color: var(--navy-border) !important; }
html[data-theme="light"] .leaflet-draw-toolbar a:hover,
html[data-theme="light"] .leaflet-draw-edit-toolbar a:hover { background-color: var(--navy-light) !important; }
html[data-theme="light"] .leaflet-draw-toolbar, html[data-theme="light"] .leaflet-draw-edit-toolbar { box-shadow: var(--shadow) !important; border-color: var(--gold) !important; }
html[data-theme="light"] .leaflet-draw-draw-polygon::after, html[data-theme="light"] .leaflet-draw-draw-rectangle::after,
html[data-theme="light"] .leaflet-draw-draw-circle::after { color: var(--gold-ink); }

/* Custom dialog (piq-dlg) was hard-coded dark */
html[data-theme="light"] .piq-dlg-bg { background: rgba(28,36,48,.5); }
html[data-theme="light"] .piq-dlg { background: #fff; color: var(--text); border-color: var(--navy-border); box-shadow: 0 30px 60px rgba(28,36,48,.18); font-family: var(--font-sans), sans-serif; }
html[data-theme="light"] .piq-dlg-title { color: var(--white); font-family: var(--font-serif), serif; font-size: 22px; }
html[data-theme="light"] .piq-dlg-msg { color: var(--text); }
html[data-theme="light"] .piq-dlg-input { background: #fff; border-color: var(--navy-border); color: var(--white); }
html[data-theme="light"] .piq-dlg-input:focus { border-color: var(--gold); }
html[data-theme="light"] .piq-dlg-btn { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
html[data-theme="light"] .piq-dlg-btn-cancel { color: var(--text); border-color: var(--navy-border); }
html[data-theme="light"] .piq-dlg-btn-cancel:hover { color: var(--white); border-color: var(--white); }
html[data-theme="light"] .piq-dlg-btn-primary { background: var(--white); color: #fff; }
html[data-theme="light"] .piq-dlg-btn-primary:hover { background: var(--gold); box-shadow: none; }

/* ── Inline styles generated in JS (attribute selectors) ── */
/* Light text that was meant for a dark panel */
html[data-theme="light"] [style*="color:#fff"]:not([style*="background"]),
html[data-theme="light"] [style*="color: #fff"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#ffffff"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#f5f5f5"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#F5F5F5"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#e2e8f0"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#eee"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#ddd"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#bed"]:not([style*="background"]) { color: var(--white) !important; }
html[data-theme="light"] [style*="color:#c8a96e"], html[data-theme="light"] [style*="color:#C8A96E"],
html[data-theme="light"] [style*="color:#c9a84c"], html[data-theme="light"] [style*="color:#f5c842"],
html[data-theme="light"] [style*="color:#c8913a"] { color: var(--gold-ink) !important; }
/* Text on photo / colored-gradient headers stays white */
html[data-theme="light"] [style*="linear-gradient(135deg,#"] *:not(#_),
html[data-theme="light"] [style*="linear-gradient(to top,rgba(0,0,0"] *:not(#_) { color: #fff !important; }
/* Status text tuned for dark backgrounds → darker equivalents */
html[data-theme="light"] [style*="color:#f87171"], html[data-theme="light"] [style*="color:#e74c3c"],
html[data-theme="light"] [style*="color:#c53030"] { color: var(--red) !important; }
html[data-theme="light"] [style*="color:#4ade80"], html[data-theme="light"] [style*="color:#2ecc71"],
html[data-theme="light"] [style*="color:#7dd3a8"], html[data-theme="light"] [style*="color:#276749"] { color: var(--green) !important; }
html[data-theme="light"] [style*="color:#fbbf24"], html[data-theme="light"] [style*="color:#f59e0b"] { color: var(--amber) !important; }
html[data-theme="light"] [style*="color:#63b3ed"], html[data-theme="light"] [style*="color:#60a5fa"],
html[data-theme="light"] [style*="color:#3498db"] { color: #1F5F99 !important; }
/* Dark panels/backgrounds hard-coded in templates */
html[data-theme="light"] [style*="background:#0d1b2a"], html[data-theme="light"] [style*="background:#0D1B2A"],
html[data-theme="light"] [style*="background:#0a1628"], html[data-theme="light"] [style*="background:#112240"],
html[data-theme="light"] [style*="background:#0F1E33"], html[data-theme="light"] [style*="background:#0f1e33"],
html[data-theme="light"] [style*="background:#0a1a2a"], html[data-theme="light"] [style*="background:#1a365d"],
html[data-theme="light"] [style*="background:#1a2a1a"], html[data-theme="light"] [style*="background:#1a1a2a"],
html[data-theme="light"] [style*="background:#0a2a1a"], html[data-theme="light"] [style*="background:#1a2a0a"],
html[data-theme="light"] [style*="background:#2a1a0a"], html[data-theme="light"] [style*="background:#111"] {
  background: #fff !important; color: var(--text) !important; border-color: var(--navy-border) !important;
}
html[data-theme="light"] [style*="background:rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.1"] { background: var(--navy-light) !important; }
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"] { border-color: var(--navy-border) !important; }

/* ── Listing cards ── */
html[data-theme="light"] .idx-status-badge { background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
html[data-theme="light"] .idx-card-ppsf { font-family: var(--font-sans), sans-serif; font-size: 11px; font-weight: 500; }

/* "Recessed" boxes that darkened a dark panel (rgba black 10–20%) → faint ink tint */
html[data-theme="light"] [style*="background:rgba(0,0,0,0.1)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.12)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.15)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,0.15)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,0.2)"] { background: rgba(28,36,48,.04) !important; }
html[data-theme="light"] .pitia-rate-stepper,
html[data-theme="light"] .pitia-down-chip,
html[data-theme="light"] .pitia-down-chip-other { background: #fff; }
html[data-theme="light"] #map-results-list { background: var(--navy); }
html[data-theme="light"] .idx-card-img .idx-fav-btn { background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Bright accent text tuned for dark → readable equivalents */
html[data-theme="light"] [style*="color:#34d399"], html[data-theme="light"] [style*="color:#86efac"] { color: var(--green) !important; }
html[data-theme="light"] [style*="color:#93c5fd"], html[data-theme="light"] [style*="color:#38bdf8"],
html[data-theme="light"] [style*="color:#4a90e2"] { color: #1F5F99 !important; }
html[data-theme="light"] [style*="color:#f472b6"], html[data-theme="light"] [style*="color:#f9a8d4"] { color: #A3306B !important; }
html[data-theme="light"] [style*="color:#c084fc"], html[data-theme="light"] [style*="color:#9b59b6"] { color: #6B3FA0 !important; }
html[data-theme="light"] [style*="color:#fb923c"], html[data-theme="light"] [style*="color:#e07b39"],
html[data-theme="light"] [style*="color:#F59E0B"], html[data-theme="light"] [style*="color:#f1c40f"] { color: var(--amber) !important; }
html[data-theme="light"] [style*="color:#e2b96f"], html[data-theme="light"] [style*="color:#d4a94b"],
html[data-theme="light"] [style*="color:#C9A84C"] { color: var(--gold-ink) !important; }
html[data-theme="light"] [style*="color:#F5F5F5"]:not([style*="background"]), html[data-theme="light"] [style*="color:#8899AA"] { color: var(--text) !important; }
html[data-theme="light"] [style*="color:#e57373"] { color: var(--red) !important; }

/* Class-based text colors tuned for dark */
html[data-theme="light"] .stm-field-error { color: var(--red); }
html[data-theme="light"] .ss-card-actions button.ss-delete { color: var(--red); }
html[data-theme="light"] .ss-card-badge.badge-client, html[data-theme="light"] .ss-card-client-name,
html[data-theme="light"] .pitia-loading-step.done { color: var(--green); }