app/assets/style.css

/* Phoenix Upzoning Scanner — Dark theme */

/* ── Global ─────────────────────────────────────────────────────────────── */
body {
    background: #1A1A2E;
    color: #E0E0E0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* ── Sidebar scrollbar ───────────────────────────────────────────────────── */
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: #1A1A2E; }
#sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* ── Section labels ──────────────────────────────────────────────────────── */
.section-label {
    color: #7B8CDE;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Dropdowns (dark) ────────────────────────────────────────────────────── */
.dark-dropdown .Select-control,
.dark-dropdown .Select-menu-outer {
    background: #16213E !important;
    border-color: #2A2A4A !important;
    color: #E0E0E0 !important;
}
.dark-dropdown .Select-value-label,
.dark-dropdown .Select-placeholder { color: #E0E0E0 !important; }
.dark-dropdown .Select-option { background: #16213E; color: #E0E0E0; }
.dark-dropdown .Select-option:hover,
.dark-dropdown .Select-option.is-focused { background: #0F3460 !important; }

/* ── Scorecard tabs ──────────────────────────────────────────────────────── */
.scorecard-tabs .nav-link {
    color: #9E9E9E;
    font-size: 0.78rem;
    padding: 6px 10px;
    border-color: #2A2A4A;
    background: transparent;
}
.scorecard-tabs .nav-link.active,
.scorecard-tabs .nav-link.fw-bold {
    color: #E0E0E0;
    background: #0F3460;
    border-color: #7B8CDE #7B8CDE #0F3460;
    font-weight: 700;
}
.scorecard-tabs .tab-content { padding-top: 12px; }

/* ── Metric cards ────────────────────────────────────────────────────────── */
.metric-card {
    background: #16213E;
    border: 1px solid #2A2A4A !important;
    border-radius: 6px;
}
.metric-card .card-body { padding: 8px 12px; }

/* ── Floating layer panel ────────────────────────────────────────────────── */
.form-check-input:checked {
    background-color: #7B8CDE;
    border-color: #7B8CDE;
}
.collapsing { transition: height 0.15s ease; }

/* ── Leaflet controls ────────────────────────────────────────────────────── */
.leaflet-draw-toolbar a,
.leaflet-control-zoom a {
    background: #1A1A2E !important;
    color: #E0E0E0 !important;
    border-color: #333 !important;
}
.leaflet-draw-toolbar a:hover,
.leaflet-control-zoom a:hover { background: #0F3460 !important; }

/* Leaflet draw icons — use unpkg sprite */
.leaflet-draw-toolbar .leaflet-draw-draw-polygon,
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle,
.leaflet-draw-toolbar .leaflet-draw-edit-edit,
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background-image: url('https://unpkg.com/leaflet-draw@1.0.4/dist/images/spritesheet.png') !important;
    background-repeat: no-repeat;
}

/* ── DataTable (zone breakdown) ──────────────────────────────────────────── */
.dash-table-container { border-radius: 4px; overflow: hidden; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress { background: #2A2A4A; }

/* ── Modal dark ──────────────────────────────────────────────────────────── */
.modal-content {
    background: #1A1A2E !important;
    color: #E0E0E0 !important;
    border: 1px solid #2A2A4A !important;
}
.modal-header { border-bottom-color: #2A2A4A !important; }
.modal-footer { border-top-color: #2A2A4A !important; }
.modal-title  { color: #E0E0E0 !important; font-size: 0.95rem; }
.btn-close    { filter: invert(1); }

/* ── Map background ──────────────────────────────────────────────────────── */
.leaflet-container { background: #0d0d1a; }

/* ── Leaflet attribution ─────────────────────────────────────────────────── */
.leaflet-control-attribution {
    background: rgba(22,33,62,0.8) !important;
    color: #9E9E9E !important;
    font-size: 9px !important;
}
.leaflet-control-attribution a { color: #7B8CDE !important; }