/* ===================================
   MARKET DASHBOARD — styles.css
   =================================== */

:root {
    --subject: #D64045;
    --subject-bg: #FEF0F0;
    --market: #2D6A9F;
    --market-bg: #EDF4FA;
    --bg: #F7F7F5;
    --card: #FFFFFF;
    --text: #1A1A1A;
    --muted: #6B7280;
    --border: #E5E5E3;
    --accent: #2D6A9F;
    --green: #22863A;
    --nav-bg: #1A1A1A;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }

/* -- Nav -- */
.top-bar { background:var(--nav-bg); padding:0 24px; display:flex; align-items:center; height:52px; gap:24px; position:sticky; top:0; z-index:50; }
.top-bar .brand { font-family:'DM Serif Display',serif; color:#fff; font-size:1.1rem; white-space:nowrap; }
.top-bar .brand span { color:var(--subject); }
.top-bar-nav { display:flex; gap:2px; margin-left:24px; }
.nav-btn { background:none; border:none; color:#9CA3AF; font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:500; padding:14px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; }
.nav-btn:hover { color:#fff; }
.nav-btn.active { color:#fff; border-bottom-color:var(--subject); }
.tab-nav { display:flex; gap:4px; margin-left:auto; }
.tab-btn { background:none; border:none; color:#9CA3AF; font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:500; padding:14px 16px; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; }
.tab-btn:hover { color:#fff; }
.tab-btn.active { color:#fff; border-bottom-color:var(--subject); }

/* -- Controls -- */
.controls-bar { background:var(--card); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.control-group { display:flex; align-items:center; gap:8px; }
.control-group label { font-size:0.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.control-group select { font-family:'DM Sans',sans-serif; font-size:0.85rem; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text); cursor:pointer; }
.control-group select:focus { outline:none; border-color:var(--accent); }
.control-sep { width:1px; height:24px; background:var(--border); }

/* -- Layout -- */
.dashboard { max-width:1200px; margin:0 auto; padding:32px 24px; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* -- Page Headers -- */
.page-header h1 { font-family:'DM Serif Display',serif; font-size:2rem; margin-bottom:4px; }
.page-header .page-desc { color:var(--muted); font-size:0.88rem; margin-bottom:24px; }

/* -- Filter Bar -- */
.filter-bar { display:flex; gap:10px; margin-bottom:20px; align-items:center; flex-wrap:wrap; }
.filter-input {
    font-family:'DM Sans',sans-serif; font-size:0.85rem;
    padding:8px 14px; width:280px; border:1px solid var(--border);
    border-radius:8px; background:var(--card); color:var(--text); outline:none;
}
.filter-input:focus { border-color:var(--accent); }
.filter-select {
    font-family:'DM Sans',sans-serif; font-size:0.82rem;
    padding:8px 10px; border:1px solid var(--border);
    border-radius:8px; background:var(--card); color:var(--text); cursor:pointer;
}
.filter-count { font-size:0.82rem; color:var(--muted); margin-left:auto; }

/* -- Sortable Table Headers -- */
.table-wrap { overflow-x:auto; }
.sortable { cursor:pointer; user-select:none; }
.sortable:hover { color:var(--accent); }
.sortable.sort-asc::after { content:' \u25B2'; font-size:0.65rem; }
.sortable.sort-desc::after { content:' \u25BC'; font-size:0.65rem; }

/* -- Inline Editable Cells -- */
.inline-select {
    font-family:'DM Sans',sans-serif; font-size:0.78rem;
    padding:3px 6px; border:1px solid transparent; border-radius:4px;
    background:transparent; color:var(--text); cursor:pointer;
    max-width:120px; appearance:none; -webkit-appearance:none;
}
.inline-select:hover { border-color:var(--border); background:var(--bg); }
.inline-select:focus { border-color:var(--accent); background:var(--card); outline:none; }

/* -- Class Badges -- */
.class-badge {
    display:inline-block; padding:2px 8px; border-radius:4px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
}
.class-badge.class-A { background:#DCFCE7; color:#166534; }
.class-badge.class-B { background:#DBEAFE; color:#1E40AF; }
.class-badge.class-C { background:#FEF3C7; color:#92400E; }
.class-badge.class-D { background:#FEE2E2; color:#991B1B; }

/* -- Buttons -- */
.btn-primary {
    font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:600;
    padding:10px 20px; border:none; border-radius:8px;
    background:var(--subject); color:#fff; cursor:pointer;
    transition:background 0.15s;
}
.btn-primary:hover { background:#C13538; }
.btn-secondary {
    font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:600;
    padding:10px 20px; border:1px solid var(--border); border-radius:8px;
    background:var(--card); color:var(--text); cursor:pointer;
}
.btn-secondary:hover { background:var(--bg); }
.btn-sm {
    font-size:0.78rem; padding:5px 12px; border-radius:6px;
    border:1px solid var(--border); background:var(--card);
    font-family:'DM Sans',sans-serif; cursor:pointer; color:var(--text);
}
.btn-sm:hover { background:var(--bg); }
.btn-danger { color:var(--subject); border-color:var(--subject); }
.btn-danger:hover { background:var(--subject-bg); }

/* -- Comp Set Builder -- */
.comp-set-builder {
    background:var(--card); border-radius:12px; padding:24px;
    margin:20px 0; box-shadow:0 2px 8px rgba(0,0,0,0.06);
    border:1px solid var(--border);
}
.comp-set-builder h3 { font-family:'DM Serif Display',serif; font-size:1.2rem; margin-bottom:16px; }
.builder-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:flex; flex-direction:column; gap:6px; }
.form-row label { font-size:0.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.form-row input, .form-row select {
    font-family:'DM Sans',sans-serif; font-size:0.88rem;
    padding:10px 14px; border:1px solid var(--border); border-radius:8px;
    background:var(--card); color:var(--text); outline:none;
}
.form-row input:focus, .form-row select:focus { border-color:var(--accent); }
.form-actions { display:flex; gap:10px; margin-top:8px; }

/* -- Comp Picker -- */
.comp-picker { display:flex; flex-direction:column; gap:8px; }
.comp-picker input {
    font-family:'DM Sans',sans-serif; font-size:0.85rem;
    padding:8px 12px; border:1px solid var(--border); border-radius:8px;
    background:var(--card); color:var(--text); outline:none;
}
.comp-options {
    max-height:200px; overflow-y:auto; border:1px solid var(--border);
    border-radius:8px; background:var(--card); display:none;
}
.comp-options.show { display:block; }
.comp-option {
    padding:8px 12px; cursor:pointer; font-size:0.83rem;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--border);
}
.comp-option:last-child { border-bottom:none; }
.comp-option:hover { background:var(--bg); }
.comp-option.selected { background:var(--market-bg); font-weight:600; }
.comp-selected { display:flex; flex-wrap:wrap; gap:6px; }
.comp-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; border-radius:6px; font-size:0.78rem;
    background:var(--market-bg); color:var(--market); font-weight:600;
}
.comp-tag .remove { cursor:pointer; font-size:0.9rem; opacity:0.6; }
.comp-tag .remove:hover { opacity:1; }

/* -- Comp Sets List -- */
.comp-sets-list { margin-top:24px; }
.comp-set-card {
    background:var(--card); border-radius:10px; padding:18px 20px;
    margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,0.05);
    display:flex; align-items:center; gap:16px;
    border-left:4px solid var(--accent); cursor:pointer;
    transition:all 0.15s;
}
.comp-set-card:hover { box-shadow:0 3px 10px rgba(0,0,0,0.08); transform:translateY(-1px); }
.comp-set-card .cs-name { font-weight:700; font-size:0.95rem; }
.comp-set-card .cs-detail { font-size:0.8rem; color:var(--muted); }
.comp-set-card .cs-actions { margin-left:auto; display:flex; gap:8px; }

/* -- KPIs -- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:36px; }
.kpi-card { background:var(--card); border-radius:10px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,0.05); border-left:4px solid var(--border); }
.kpi-card.s { border-left-color:var(--subject); }
.kpi-card.m { border-left-color:var(--market); }
.kpi-card.n { border-left-color:var(--muted); }
.kpi-val { font-size:1.7rem; font-weight:700; line-height:1.2; }
.kpi-lbl { font-size:0.75rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:0.04em; }

/* -- Sections -- */
.section { margin-bottom:48px; }
.section h2 { font-family:'DM Serif Display',serif; font-size:1.4rem; font-weight:400; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.section-desc { font-size:0.82rem; color:var(--muted); margin-bottom:16px; }
.section h3 { font-size:0.95rem; font-weight:700; margin:20px 0 10px; color:var(--accent); }

/* -- Legend -- */
.legend { display:flex; gap:18px; margin-bottom:14px; font-size:0.82rem; }
.legend-item { display:flex; align-items:center; gap:5px; }
.legend-sw { width:12px; height:12px; border-radius:3px; }

/* -- Tables -- */
.dt { width:100%; border-collapse:collapse; font-size:0.83rem; margin-bottom:10px; background:var(--card); border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.dt thead th { background:#F3F3F1; padding:9px 11px; text-align:left; font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); border-bottom:2px solid var(--border); white-space:nowrap; }
.dt td { padding:8px 11px; border-bottom:1px solid var(--border); }
.dt .n, .dt thead th.n { text-align:right; font-variant-numeric:tabular-nums; }
.dt tbody tr:last-child td { border-bottom:none; }
.dt tbody tr:hover { background:#FAFAF8; }
.dt .sr { background:var(--subject-bg) !important; font-weight:700; }
.dt .sr td:first-child { color:var(--subject); border-left:3px solid var(--subject); }
.dt .mr { background:var(--market-bg) !important; }
.dt .mr td:first-child { color:var(--market); font-weight:700; border-left:3px solid var(--market); }
.dt .tr { background:#F3F3F1 !important; font-weight:700; }
.dt .tr td { border-top:2px solid var(--border); }
.psf { font-size:0.72rem; color:var(--muted); font-style:italic; }

/* -- Charts -- */
.chart-wrap { margin:16px 0; position:relative; }
.chart-wrap canvas { display:block; width:100%; max-width:760px; }
#iqr-charts-container .chart-wrap { margin-bottom:24px; }

/* -- Tooltip -- */
.tt { position:fixed; pointer-events:none; z-index:100; background:#1A1A1A; color:#fff; padding:10px 14px; border-radius:8px; font-size:0.76rem; line-height:1.5; box-shadow:0 4px 16px rgba(0,0,0,0.2); max-width:300px; opacity:0; transition:opacity 0.12s; white-space:nowrap; }
.tt.show { opacity:1; }
.tt-label { font-weight:700; margin-bottom:2px; font-size:0.8rem; }
.tt-row { display:flex; justify-content:space-between; gap:16px; }
.tt-row .k { color:#9CA3AF; }
.tt-row .v { font-weight:600; font-variant-numeric:tabular-nums; }
.tt-sw { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

/* -- Loading -- */
.loading { text-align:center; padding:60px; color:var(--muted); }
.loading::after { content:''; display:block; width:32px; height:32px; margin:16px auto; border:3px solid var(--border); border-top-color:var(--subject); border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* -- Footer -- */
.footer { margin-top:40px; padding-top:14px; border-top:1px solid var(--border); font-size:0.78rem; color:var(--muted); text-align:center; }

/* -- Dashboard Header -- */
.dash-header {
    display:flex; align-items:center; gap:16px;
    margin-bottom:28px; padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.btn-back {
    font-size:1.2rem; width:36px; height:36px; border-radius:8px;
    border:1px solid var(--border); background:var(--card); cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--text);
    transition:all 0.15s;
}
.btn-back:hover { background:var(--bg); border-color:var(--muted); }
.dash-header-info { flex:1; }
.dash-header-name { font-family:'DM Serif Display',serif; font-size:1.5rem; line-height:1.2; }
.dash-header-detail { font-size:0.82rem; color:var(--muted); }

/* -- Toast Notifications -- */
.toast-container {
    position:fixed; bottom:24px; right:24px; z-index:200;
    display:flex; flex-direction:column; gap:8px;
}
.toast {
    background:var(--nav-bg); color:#fff; padding:12px 20px;
    border-radius:8px; font-size:0.85rem; font-weight:500;
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
    animation:toastIn 0.2s ease-out;
    display:flex; align-items:center; gap:10px;
}
.toast.success { border-left:4px solid var(--green); }
.toast.error { border-left:4px solid var(--subject); }
.toast.fade-out { animation:toastOut 0.3s ease-in forwards; }
@keyframes toastIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(10px); } }

/* -- Map View -- */
.dashboard-wide { max-width:1400px; }
#map-container { height:600px; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); border:1px solid var(--border); }
.map-controls { display:flex; gap:10px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.map-legend { display:flex; gap:16px; margin-bottom:12px; font-size:0.82rem; flex-wrap:wrap; }
.map-legend-item { display:flex; align-items:center; gap:5px; }
.map-legend-dot { width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); }

/* -- Map Gradient Legend -- */
.map-gradient-legend {
    display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:0.82rem;
}
.map-gradient-bar {
    width:200px; height:14px; border-radius:7px;
    border:1px solid var(--border);
}
.map-gradient-labels { display:flex; justify-content:space-between; width:200px; font-size:0.72rem; color:var(--muted); }

/* Leaflet popup override */
.leaflet-popup-content-wrapper { border-radius:10px !important; font-family:'DM Sans',sans-serif; }
.leaflet-popup-content { margin:12px 16px !important; font-size:0.83rem; line-height:1.5; }
.map-popup-name { font-weight:700; font-size:0.95rem; margin-bottom:4px; }
.map-popup-addr { color:var(--muted); font-size:0.78rem; margin-bottom:8px; }
.map-popup-stats { display:grid; grid-template-columns:auto auto; gap:2px 12px; font-size:0.82rem; }
.map-popup-stats .k { color:var(--muted); }
.map-popup-stats .v { font-weight:600; text-align:right; }
.map-popup-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.72rem; font-weight:700; margin-right:4px; }

/* -- Inventory -- */
.inventory-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.inventory-breadcrumb { display:flex; align-items:center; gap:4px; font-size:0.85rem; }
.bc-item { padding:4px 10px; border-radius:6px; cursor:pointer; color:var(--accent); font-weight:500; }
.bc-item:hover { background:var(--market-bg); }
.bc-item.active { background:var(--accent); color:#fff; cursor:default; }
.bc-sep { color:var(--muted); font-size:0.75rem; }
.inventory-view-toggle { display:flex; gap:4px; }
.inventory-view-toggle .btn-sm.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.status-available { background:#16A34A; }
.status-future { background:#D97706; }
.status-occupied { background:#9CA3AF; }
.clickable-row { cursor:pointer; }
.clickable-row:hover td:first-child { color:var(--accent); }

/* -- Property Detail -- */
.detail-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.detail-gallery img { width:100%; border-radius:8px; cursor:pointer; transition:transform 0.15s; object-fit:cover; height:150px; }
.detail-gallery img:hover { transform:scale(1.03); }
.amenity-tags { display:flex; flex-wrap:wrap; gap:6px; }
.amenity-tag { padding:5px 12px; border-radius:20px; background:var(--bg); border:1px solid var(--border); font-size:0.78rem; }
.tour-card { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:8px; background:var(--card); border:1px solid var(--border); margin:4px; font-size:0.83rem; text-decoration:none; color:var(--accent); transition:all 0.15s; }
.tour-card:hover { border-color:var(--accent); background:var(--market-bg); }
.score-bar { display:inline-block; width:40px; height:6px; border-radius:3px; background:var(--border); margin-right:6px; vertical-align:middle; }
.score-fill { display:block; height:100%; border-radius:3px; }

/* -- Comp Picker Filters -- */
.comp-picker-filters { display:flex; gap:8px; margin-top:4px; }

/* -- Responsive -- */
@media (max-width:768px) {
    .controls-bar { flex-direction:column; align-items:flex-start; }
    .control-sep { display:none; }
    .top-bar { flex-wrap:wrap; height:auto; padding:8px 16px; gap:8px; }
    .filter-bar { flex-direction:column; }
    .filter-input { width:100%; }
}
@media print { .top-bar,.controls-bar { position:static; } .tt { display:none; } }