* {
    box-sizing: border-box
}

:root {
    --bg: #f9fafb;
    --card: #ffffff;
    --muted: #667085;
    --accent: #007aff;
    --accent-2: #0ea5a4;
    --shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px
}

html,
body,
#app {
    height: 100%;
    font-size: 16px
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    color: #0f172a;
    background: var(--bg);
    -webkit-font-smoothing: antialiased
}

.topbar {
    height: 64px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-3);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06)
}

.title {
    font-weight: 700;
    font-size: 16px
}

/* Brand wrapper: keep logo and text inline; show text only on larger screens */
.brand{ display:flex; align-items:center; gap:8px }
.brand-text{ display:none; margin-left:6px }
@media (min-width: 700px){
    .brand-text{ display:inline-block }
}

.icon-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease
}

.icon-btn:hover {
    background: rgba(15, 23, 42, 0.04)
}

.side-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    background: var(--surface);
    color: inherit;
    box-shadow: 4px 0 30px rgba(15, 23, 42, 0.06);
    transform: translateX(-110%);
    transition: transform .22s ease, visibility .2s ease, opacity .2s ease;
    z-index: 60;
}

.side-menu .menu-inner {
    padding: 18px
}

/* Menu form layout: stack labels and fields with consistent spacing */
.side-menu .menu-inner label.small { display:block; margin:8px 0 6px; font-weight:600; color:var(--muted); }
.side-menu .menu-inner input.input,
.side-menu .menu-inner select.select {
    width:100%;
    box-sizing:border-box;
    margin-bottom:8px;
}
.side-menu .menu-inner .menu-row{ display:flex; gap:8px; align-items:center }
.side-menu .menu-inner .menu-actions{ display:flex; gap:8px; margin-top:8px }

.side-menu .menu-link {
    display: block;
    padding: 10px 12px;
    color: #0f172a;
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all .18s ease;
    width: 90%;
}

.side-menu .menu-link:hover {
    background: rgba(15, 23, 42, 0.04)
}

.side-menu .close-btn {
    float: right;
    border: none;
    background: transparent;
    font-size: 22px;
    position: relative;
    z-index: 2000;
    cursor: pointer;
}

.side-menu.visible {
    transform: translateX(0);
    z-index: 999
}

.app {
    padding: var(--space-3)
}

.controls-row,
.filters-row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Layout for individual filter items: label on left, control/value on right */
.filters-row .filter-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:140px }
.filters-row .filter-item label.small{ margin:0; min-width:50px }
.filters-row .filter-item input[type=range]{ width:160px }
.filters-row .filter-item .small{ white-space:nowrap }

/* Make filter items and multi-selects shrink/wrap nicely instead of
     pushing content out; ensures label, control and value stay on one line
     when there's space. */
.filters-row .filter-item,
.filters-row .multi-select {
    flex: 0 1 auto;
    min-width: 160px;
}

@media (min-width: 700px) {
    /* Make native and noUi sliders expand to fill the available space inside
         a filter-item on larger screens so handles are not tiny. This ensures the
         slider (native or .noUi-target) grows while label and value keep their
         minimum widths. */
    .filters-row .filter-item input[type="range"],
    .filters-row .filter-item .noui-single,
    .filters-row .filter-item .noui-slider,
    .filters-row .filter-item .noUi-target {
        flex: 1 1 220px;
        min-width: 160px;
        margin: 0 8px;
        width: auto;
    }

    /* Ensure the noUi internal target stretches fully within our container */
    .noui-single .noUi-target,
    .noui-slider .noUi-target { width: 100%; }
}

/* Filters layout: align sliders and selects vertically centered */
.filter-item{ display:flex; align-items:center; gap:8px }

.price-filter .price-range,
.price-range {
    position: relative;
    display: block;
    width: 100%;
    /* Reserve vertical space so absolute inputs don't collapse layout */
    min-height: 44px;
    height: auto;
    padding: 8px 0;
    box-sizing: border-box;
}

.price-range input[type="range"],
.price-filter .price-range input[type="range"] {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* track should not intercept; thumb accepts events */
    background: transparent;
    margin: 0;
    height: 24px;
}
.noUi-target {
    width: 90% !important;
    margin-left: 12px;
}

/* Ensure noUi connect and handles use app accent so sliders and spinners match */
.noUi-connect { background: var(--accent) !important; }
.noUi-horizontal .noUi-handle { border: 2px solid var(--accent) !important; background: #fff !important; box-shadow: 0 4px 10px rgba(2,6,23,0.12) !important; }

/* Make thumbs accept pointer events even when parent inputs have pointer-events:none */
.price-range input[type="range"]::-webkit-slider-thumb,
.price-range input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    /* larger, touch-friendly thumb */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 4px 10px rgba(2,6,23,0.12);
    cursor: pointer;
}

/* Firefox specific sizing for track/thumb */
.price-range input[type="range"]::-moz-range-track { height: 6px; }
.price-range input[type="range"]::-moz-range-thumb { margin-top: -6px; }

.range-min { z-index: 5 }
.range-max { z-index: 4 }

/* Ensure range sliders (beds/baths) don't inherit the tall input height and align nicely */
.filters-row input[type=range]{ height:28px; }

/* Value labels next to sliders should be right-aligned and have a minimum width */
#bedsVal, #bathsVal, #minPriceVal, #maxPriceVal { text-align:right; display:inline-block }

/* Simple custom multiselect (search + chips) */
.multi-select{ min-width:180px; max-width:320px; position:relative; font-size:14px }
.multi-select .multi-label{ display:block; margin:6px 8px 6px 0; font-weight:600; color:var(--muted); font-size:13px }
.multi-select .chips{ display:flex; gap:6px; flex-wrap:wrap; padding:6px 8px; min-height:44px; align-items:center; border-radius:12px; border:1px solid rgba(15,23,42,0.06); background:var(--surface) }
.multi-select .chip{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; background:rgba(0,0,0,0.04); border-radius:999px; font-size:13px }
.multi-select .chip button{ border:none; background:transparent; cursor:pointer; font-weight:700 }
.multi-select .multi-input{ border:none; outline:none; min-width:120px; font-size:14px; padding:6px }
.multi-select .multi-dropdown{ position:absolute; left:0; right:0; top:calc(100% + 8px); max-height:220px; overflow:auto; background:var(--surface); border-radius:10px; box-shadow:0 10px 30px rgba(2,6,23,0.08); z-index:90; padding:8px; display:none }
.multi-select .multi-dropdown.open{ display:block }
.multi-select .multi-dropdown label{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px }
.multi-select .multi-dropdown label:hover{ background: rgba(15,23,42,0.02) }

/* Offer suggestion styling */
.price-section{ display:flex; flex-direction:column; gap:6px }
.price-label{ font-size:13px; color:var(--muted) }
.price-value{ font-weight:700; font-size:18px }
.offer-suggestion{ font-size:0.9rem; margin-top:4px; opacity:0.95; display:flex; align-items:center; gap:8px; transition:all .2s ease }
.offer-down{ color:#dc2626 }
.offer-up{ color:#16a34a }
.offer-neutral{ color:#64748b }
.offer-suggestion:hover{ opacity:1; transform:translateY(-1px) }

/* Pricing breakdown card (compact, subtle) */
.pricing-breakdown{ margin-top:8px; border-radius:8px; padding:6px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98)); border: 1px solid rgba(15,23,42,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.03); }
.pricing-breakdown .bd-table{ border-collapse: collapse; width:100%; font-size:0.85rem; color:var(--muted); }
.pricing-breakdown .bd-table td{ border-top: 1px solid rgba(15,23,42,0.04); }
.pricing-breakdown .bd-table tr.bd-row:nth-child(even){ background: rgba(15,23,42,0.02); }
.pricing-breakdown .bd-table tr.bd-row td{ padding:8px 10px; }
.pricing-breakdown.hidden{ display:none }
.break-toggle{ font-size:0.85rem; color:var(--muted); text-decoration:underline; background:transparent; border:none; padding:6px 0; }

/* ensure divider variable exists */
:root{ --divider: rgba(15,23,42,0.06); }

/* AI Insight modal */
.modal{ position: fixed; inset: 0; display:flex; align-items:flex-start; justify-content:center; background: rgba(0,0,0,0.32); transition: opacity .2s ease; opacity: 1; z-index: 99999; padding: 20px; overflow-y: auto; }
.modal.modal-hidden{ opacity: 0; pointer-events: none; }
.modal .modal-content{ background: var(--surface); border-radius: 12px; padding: 1.25rem; max-width: 600px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 8px 30px rgba(2,6,23,0.12); position: relative; margin: auto; }
.modal .modal-content h3{ margin:0 0 12px 0; font-size:18px; padding-right: 30px; }
.close-modal{ position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); z-index: 1; line-height: 1; padding: 4px 8px; }
.close-modal:hover{ color: var(--text); }

/* AI text content styling */
#aiText{ line-height: 1.6; }
#aiText p{ margin: 0.75em 0; }
#aiText ul.ai-list{ margin: 1em 0; padding-left: 1.5em; }
#aiText ul.ai-list li{ margin: 0.5em 0; }

/* spinner used while LLM responds */
.ai-spinner{ width:36px; height:36px; border-radius:50%; border:4px solid rgba(15,23,42,0.06); border-top-color:var(--accent); animation: spin 1s linear infinite; margin: 6px auto }

/* small muted paragraph inside modal */
.modal .small { margin-top:6px }

/* Price row layout: asking price left, suggested badge + AI on the right; breakdown toggled below */
.price-section { width: 100%; }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price-left { flex: 1 1 auto; min-width: 0 }
.price-left .price-value{ font-weight:700; font-size:18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.price-controls{ display:flex; align-items:center; gap:8px }
.price-right{ display:flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap }
.suggest-badge{ padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.0); font-weight:700; white-space:nowrap }
.suggest-good{ color:#16a34a; background: linear-gradient(90deg, rgba(16,185,129,0.06), rgba(241,253,244,0.02)); }
.suggest-bad{ color:#dc2626; background: linear-gradient(90deg, rgba(254,226,226,0.06), rgba(255,244,244,0.02)); }
.suggest-neutral{ color:#64748b; background: linear-gradient(90deg, rgba(247,249,250,0.04), rgba(255,255,255,0.02)); }

/* center the breakdown toggle when asked to */
.break-toggle.center{ display:block; margin:8px auto 0; background:transparent; border:none; color:var(--muted); cursor:pointer }

.input {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
    flex: 1;
    min-width: 120px;
    transition: all .18s ease;
    appearance: none
}

.input:focus {
    box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.06);
    outline: none;
    border-color: rgba(0, 122, 255, 0.3)
}

.select {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
    min-width: 120px;
    transition: all .18s ease
}

.list-container {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

@media(min-width:1100px) {
    .list-container {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
    }
}

.card {
    background: var(--card);
    padding: var(--space-3);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    transition: all .2s ease
}

/* ensure absolute badges are positioned relative to the card */
.card{ position: relative }

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06)
}

.card img {
    width: 140px;
    height: 98px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0
}

.card .meta {
    flex: 1
}

.card .meta h3 {
    margin: 0;
    font-size: 16px
}

.card .meta p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px
}

.btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
    cursor: pointer;
    transition: all .18s ease
}

/* AI Insight button specific styling so it reads clearly as a button */
.ai-insight-btn{ font-family: 'Inter'; border: 1px solid var(--divider); background: #fff; padding: 8px 12px; border-radius: 10px; font-weight:600 }
.ai-btn-row{ font-family: 'Inter'; margin-bottom:6px; display:flex; justify-content:center }

/* Responsive: on small screens stack the suggested badge below the price to avoid cutoff */
@media(max-width:700px){
    .price-row{ flex-direction: column; align-items: stretch; gap:8px }
    .price-left{ width:100% }
    .price-right{ justify-content:flex-start; width:100%; margin-top:0 }
    .suggest-badge{ display:inline-block; margin-top:6px }
    .ai-btn-row{ font-family: 'Inter'; justify-content:center }
}

.btn.primary {
    background: var(--accent);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.08)
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3)
}

.page .detail-page {
    padding: 6px
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4)
}

@media(min-width:700px) {
    .detail-grid {
        grid-template-columns: 320px 1fr
    }
}

.detail-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px
}

.mortageContainer .field {
    width: 100%;
}
.field {
    background: #fff;
    padding: var(--space-3);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.04)
}

.field strong {
    display: block;
    color: #111827
}

.muted {
    color: var(--muted)
}

.controls-row .input {
    flex: 2
}

.ai-controls {
    font-family: 'Inter'; 
    display: flex;
    gap: var(--space-2);
    margin: var(--space-2) 0
}

/* AI page specific styling: use app accent and larger textarea */
.ai-page .btn.primary {
    font-family: 'Inter'; 
    /* prefer the secondary accent (teal) for AI actions */
    background: var(--accent-2) !important;
    box-shadow: 0 8px 20px rgba(1,206,162,0.12) !important;
}
.ai-page .btn.primary:hover {
    font-family: 'Inter'; 
    background: color-mix(in srgb, var(--accent-2) 80%, black 20%) !important;
}
.ai-page textarea.input,
.ai-page textarea#aiInput {
    font-family: 'Inter'; 
    min-height: 140px !important;
    font-size: 16px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#aiClear {
    font-family: 'Inter'; 
}

.small {
    font-size: 13px;
    color: var(--muted)
}

.hidden {
    display: none
}

.card:focus-within,
.card:focus {
    outline: 2px solid rgba(0, 122, 255, 0.12);
    outline-offset: 2px
}

.icon-btn:focus {
    outline: 2px solid rgba(0, 122, 255, 0.14);
    outline-offset: 2px
}

/* small utility */
.text-muted {
    color: var(--muted)
}

/* DEV badge */
.dev-badge {
    display: inline-block;
    background: #fff6f0;
    color: #7a2b00;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    margin-left: 10px;
    border: 1px solid rgba(255, 120, 40, 0.12)
}

.dev-badge.hidden {
    display: none
}

/* ===================== Enterprise polish overrides ===================== */
/* Central design tokens and overrides to strengthen visual hierarchy,
	 spacing, rounded corners, transitions, and subtle shadows. Paste-safe
	 and non-structural — appended to override earlier definitions. */
:root {
    --bg: #f9fafb;
    --surface: #ffffff;
    --muted: #667085;
    --accent: #007aff;
    --accent-strong: #005fcc;
    --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.035);
    --shadow-strong: 0 12px 30px rgba(15, 23, 42, 0.055);
    --divider: rgba(15, 23, 42, 0.06);
    --card-radius: 10px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --transition: all .18s ease;
    --focus-ring: 0 0 0 6px rgba(0, 122, 255, 0.06);
}

/* Typography hierarchy */
body {
    line-height: 1.45;
    color: #0f172a;
    font-size: 16px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1.page-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 var(--space-4) 0;
}

.card .meta h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.card .meta .small {
    font-size: 13px;
    color: var(--muted);
}

.field strong {
    font-size: 14px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

/* Card polish */
.card {
    background: var(--surface) !important;
    padding: var(--space-3) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition) !important;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-strong) !important;
}

/* Inputs & selects: touch-friendly height and focus ring */
.input,
.select {
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: var(--card-radius) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    background: var(--surface) !important;
    transition: var(--transition) !important;
    font-size: 14px !important;
    box-sizing: border-box;
}

.input::placeholder {
    color: #98A0B3
}

.input:focus,
.select:focus {
    box-shadow: var(--focus-ring) !important;
    outline: none;
    border-color: rgba(0, 122, 255, 0.28) !important
}

/* Buttons */
.btn {
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important
}

.btn {
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: var(--card-radius) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important
}

.btn.primary {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.08) !important
}

.btn:hover {
    transform: translateY(-2px)
}

/* Header & menu spacing */
/* header spacing and control sizing */
.topbar {
    height: 64px !important;
    padding: 0 var(--space-4) !important;
    border-bottom: 1px solid var(--divider) !important
}

.right-controls {
    display: flex;
    gap: 12px;
    align-items: center
}

.icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.side-menu {
    width: 100% !important;
    max-width: 360px !important
}

@media(min-width:900px) {
    .side-menu {
        max-width: 320px !important
    }
}

/* Card image & truncation */
.card img {
    width: 140px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important
}

/* Metro line badge */
.line-badge{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:middle; box-shadow:0 1px 0 rgba(0,0,0,0.08); }

.card .meta {
    min-width: 0
}

.card .meta h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Links styling */
a,
a:visited {
    color: var(--accent)
}

a:hover {
    color: var(--accent-strong)
}

.card a {
    color: inherit
}

/* Section spacing */
.controls-row,
.filters-row {
    gap: var(--space-3) !important;
    margin-bottom: var(--space-4) !important
}

.list-container {
    gap: var(--space-4) !important
}

.detail-grid {
    gap: var(--space-4) !important;
    padding-top: var(--space-3) !important
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important
    }
}

/* Thin dividers and grouping */
.menu-inner hr {
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.04);
    margin: var(--space-3) 0
}

.field+.field {
    margin-top: var(--space-3)
}

/* Keyboard focus tweak */
.card:focus,
.card:focus-within {
    outline: 2px solid rgba(0, 122, 255, 0.10);
    outline-offset: 2px
}

/* End enterprise overrides */

/* ===== Spinner ===== */
.spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(15, 23, 42, 0.06);
    border-top-color: var(--accent-2);
    animation: spin 1s linear infinite;
    margin: 12px auto
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ===== Rates table styling ===== */
.rates-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    table-layout: fixed; /* keep table within container width */
}

.rates-table th,
.rates-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    font-size: 13px;
    color: #0f172a;
    word-break: break-word;
    white-space: normal; /* allow wrapping to avoid overflowing container */
}

.rates-table thead th {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px
}

.rates-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.02)
}

.rates-table a {
    color: var(--accent)
}

/* Map embed styling */
.map-embed{
    width:100%;
    height:240px;
    border-radius:10px;
    border: 1px solid var(--divider);
    display:block;
}

/* Property indicator badge (card) and detail indicator */
.prop-indicator{
    position: absolute;
    left: 12px;
    top: 12px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color: #04263b;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.prop-indicator.good{ color:#065f46; background: linear-gradient(90deg,#ecfdf5,#f0fdf4); }
.prop-indicator.bad{ color:#7f1d1d; background: linear-gradient(90deg,#fff1f2,#fff4f4); }
.prop-indicator.warn{ color:#92400e; background: linear-gradient(90deg,#fff7ed,#fffaf0); }
.prop-indicator.neutral{ color:#0f172a; background: linear-gradient(90deg,#fbfbff,#ffffff); }
.prop-indicator svg{ width:16px; height:16px }
.prop-indicator .prop-label{ margin-left:4px; font-size:12px }

.indicator-note.warn{ background: linear-gradient(90deg,#fff7ed,#fffaf0); border:1px solid rgba(153,77,0,0.06) }
.indicator-svg.good svg{ color: #065f46 }
.indicator-svg.bad svg{ color: #7f1d1d }
.indicator-svg.warn svg{ color: #92400e }
.indicator-svg.neutral svg{ color: #0f172a }

/* Popover used by indicator badges */
.prop-popover{
    position: absolute;
    right: 12px;
    top: 44px;
    min-width: 200px;
    max-width: 300px;
    background: var(--surface);
    color: inherit;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    font-size: 13px;
    z-index: 120;
}
.prop-popover .title{ font-weight:700; margin-bottom:6px }
.prop-popover .note{ color:var(--muted); font-size:12px }

/* favicon next to field labels */
.field-favicon{ display:inline-block; width:18px; height:18px; vertical-align:middle; margin-right:8px; border-radius:4px; object-fit:cover; box-shadow: 0 1px 2px rgba(2,6,23,0.08); background: #fff }

/* move card badge slightly inward on small screens and ensure it doesn't overlap text */
.prop-indicator{ left: 12px; top: 12px; z-index:60 }
@media(max-width:700px){ .prop-indicator{ left:8px; top:8px; padding:4px 6px; font-size:11px } }

/* Indicator note background variations */
.indicator-note.good{ background: linear-gradient(90deg,#ecfdf5,#f0fdf4); border:1px solid rgba(6,95,70,0.06) }
.indicator-note.bad{ background: linear-gradient(90deg,#fff1f2,#fff4f4); border:1px solid rgba(127,29,29,0.06) }
.indicator-note.neutral{ background: linear-gradient(90deg,#fbfbff,#ffffff); border:1px solid rgba(15,23,42,0.03) }

/* Dark theme overrides: toggled via [data-theme="dark"] on <html> */
[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #0f1724;
    --muted: #9aa6b2;
    --accent: #3aa0ff;
    --accent-strong: #68b6ff;
    --divider: rgba(255,255,255,0.04);
    color: #e6eef8;
}

/* Make icon buttons visible in dark mode */
[data-theme="dark"] .icon-btn {
    color: #ffffff !important;
}
[data-theme="dark"] .icon-btn:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* Ensure elements that used hard-coded dark text become light in dark mode
   and avoid bright white backgrounds behind white text by tinting them. */
[data-theme="dark"] .card .meta h3,
[data-theme="dark"] .card .meta .small,
[data-theme="dark"] .field strong,
[data-theme="dark"] .rates-table th,
[data-theme="dark"] .rates-table td,
[data-theme="dark"] .prop-indicator.neutral,
[data-theme="dark"] .indicator-svg.neutral svg,
[data-theme="dark"] .img-tags .img-tag,
[data-theme="dark"] .img-tag,
[data-theme="dark"] .img-tag.age,
[data-theme="dark"] .img-tag.price-drop,
[data-theme="dark"] .prop-popover,
[data-theme="dark"] .menu-link,
[data-theme="dark"] .side-menu .menu-inner label.small {
    color: #e6eef8 !important;
}

/* Tint white-ish badge backgrounds so white text remains readable */
[data-theme="dark"] .img-tag,
[data-theme="dark"] .prop-indicator,
[data-theme="dark"] .prop-indicator.neutral,
[data-theme="dark"] .price-drop-badge {
    background: rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
}

/* Slightly strengthen divider/menu visuals in dark */
[data-theme="dark"] .menu-divider{ background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.04), rgba(255,255,255,0)) }

/* Image loading placeholder / skeleton */
.img-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.06) 50%, rgba(15,23,42,0.04) 100%);
    overflow: hidden;
    border-radius: 10px;
}
.img-wrap.loading::after{
    content: '';
    position: absolute;
    left: -150%;
    top: 0; bottom:0; width: 150%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { transform: translateX(200%);} }
.img-wrap img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; transition:opacity .18s ease; opacity:0 }
.img-wrap img.loaded{ opacity:1 }

/* overlay tags on property image */
.img-tags{ position:absolute; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap; z-index:80 }
.img-tag{ background: rgba(255,255,255,0.9); color: #0f172a; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px; box-shadow: 0 6px 18px rgba(2,6,23,0.04); }
.img-tag.age{ background: linear-gradient(90deg,#fff7ed,#fffaf0); color:#92400e }

/* price drop styling for list card badge */
.price-drop-badge{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:4px 8px; border-radius:999px; background: linear-gradient(90deg,#fff7ed,#fffaf0); color:#92400e; font-weight:700; font-size:12px }
.price-drop-badge .drop-dollar{ font-weight:800; font-size:12px; margin-right:2px }
.price-drop-badge svg{ display:block; width:12px; height:12px }

/* price drop overlay tag on detail image */
.img-tag.price-drop{ background: linear-gradient(90deg,#fff7ed,#fffaf0); color:#92400e; border:1px solid rgba(153,77,0,0.06) }

/* small accessible sr-only text for badge icons */
.sr-text{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }

/* Ensure right column in detail grid can shrink on small screens */
.detail-grid > * { min-width: 0 }
.detail-grid .field { word-break: break-word }
.detail-img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }

/* Small tweak: side-menu initially should not be display:none so transform works */
.side-menu.hidden { visibility: hidden; opacity: 0 }
.side-menu { visibility: visible; opacity: 1 }

/* Make topbar sticky so controls stay visible while scrolling */
.topbar{ position: sticky; top: 0; z-index: 240 }

/* Ensure the menu content is scrollable when open */
.side-menu .menu-inner{ overflow:auto; max-height: calc(100vh - 24px); padding-bottom: 24px }

/* Classy divider used before Settings in the menu */
.menu-divider{ border: none; height: 1px; margin: 12px 0; background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,0.06), rgba(15,23,42,0)) }

/* Add some breathing room at the bottom of the detail page so the last field isn't flush with the viewport bottom */
.detail-page{ padding-bottom: 48px }

/* App-level spinner and aggressive mobile/filter overrides were removed to
   restore the original, contained filter layout. If you still need a
   loading spinner or a mobile toggle for filters, we can add a minimal,
   non-invasive implementation that keeps fields contained within their
   container rather than hiding or aggressively shrinking them. */

/* Minimal app-spinner: centered, responsive, non-blocking layout (keeps
    background overlay but allows accessibility via aria-hidden). */
.app-spinner{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(11,18,32,0.45); z-index: 9999 }
.app-spinner.hidden{ display:none }
.app-spinner .spinner-container{ display:flex; flex-direction:column; align-items:center; gap:16px }
.app-spinner .loading-counter{ color:#fff; font-size:14px; text-align:center; opacity:0.9; font-weight:500; transition: opacity 0.3s ease }
.app-spinner .loading-counter.hidden{ display:none }

/* On narrow screens hide filters by default; toggle visible with
    `html.filters-open` (wired by JS). This keeps desktop layout unchanged
    while allowing a compact mobile UX. */
@media(max-width:700px){
     .filters-row{ display:none }
     html.filters-open .filters-row{ display:flex; flex-direction:column; gap:10px; padding:12px; background: var(--surface); position:relative }
     /* When filters are shown in column on small screens, stack each filter-item
        so label sits above the control and items stretch full width. This avoids
        the right-aligned appearance caused by `justify-content: space-between`. */
     html.filters-open .filters-row .filter-item{
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         width: 100%;
         gap: 6px;
         min-width: 0;
     }
     /* Multi-selects should expand to full width in the mobile filter column */
     html.filters-open .filters-row .multi-select{ width: 100%; min-width: 0; }
     html.filters-open .filters-row .filter-item label.small{ margin-bottom:6px }

     /* Add a visible track (rail) for the price-range so the inputs stacked
        absolutely still show a background bar. The thumbs remain interactive. */
     html.filters-open .filters-row .price-range::before,
     .price-range::before {
         content: '';
         position: absolute;
         left: 0;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         height: 6px;
         background: var(--divider);
         border-radius: 999px;
         z-index: 1;
     }
     /* Ensure the inputs and thumbs sit above the track */
     html.filters-open .filters-row .price-range input[type="range"],
     .price-range input[type="range"] { height: 24px; }
}