/* ════════════════════════════════════════════════════════════
   DASHBOARD FIXES — Complete Merged Version
   Covers all styles from Dashboard.cshtml inline <style> block.
   Theme-aware via pavitra-theme.css CSS variables.
   No hardcoded colors except intentional brand gradient.
   ════════════════════════════════════════════════════════════ */

/* ── Dashboard-specific CSS tokens ───────────────────────── */
:root {
    --db-grad-start: #0b3c5d;
    --db-grad-mid: #0e5a75;
    --db-grad-end: #2a8fa4;
    --db-card-text: #ffffff;
    --db-radius: 14px;
    --db-thead-bg: #1B3A6B;
    --db-thead-text: #ffffff;
    --db-row-odd: var(--pv-surface);
    --db-row-even: var(--pv-surface-raised);
    --db-row-hover: var(--pv-primary-light, #EBF1FB);
    --db-td-text: var(--pv-text);
    --db-td-border: var(--pv-border);
    --db-table-bg: var(--pv-surface);
    --db-scrollbar-thumb: var(--pv-primary-mid, #2A5298);
    --db-scrollbar-track: var(--pv-surface-raised);
    --db-nodata-bg: var(--pv-surface-raised);
    --db-nodata-text: var(--pv-text-muted);
    --db-nodata-border: var(--pv-border);
    --db-legend-bg: var(--pv-surface);
    --db-legend-text: var(--pv-text);
    --db-legend-border: var(--pv-border);
    --db-legend-hover: var(--pv-primary-light, #EBF1FB);
    /* Search inputs sit inside gradient cards → always dark bg */
    --db-search-bg: rgba(255,255,255,0.13);
    --db-search-text: #ffffff;
    --db-search-border: rgba(255,255,255,0.30);
    --db-search-ph: rgba(255,255,255,0.50);
}

[data-theme="dark"] {
    --db-thead-bg: #1a3a5c;
    --db-thead-text: #e2eaf8;
    --db-row-hover: #1e3a5a;
    --db-scrollbar-thumb: #3a6fa8;
}

/* ══════════════════════════════════════════════════════
   A — LAYOUT & ANIMATION
   ══════════════════════════════════════════════════════ */

.dashboard-container {
    animation: pvDashFadeIn 0.3s ease-in-out;
}

@keyframes pvDashFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 5-column grid (xl) */
@media (min-width: 1200px) {
    .col-xl-custom {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Ellipsis table cells */
.ellipsis-cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════
   B — STAT CARDS
   ══════════════════════════════════════════════════════ */

.stat-card {
    transition: transform 0.2s ease;
}

    .stat-card:hover {
        transform: translateY(-5px);
    }

    .stat-card p {
        font-size: 1rem;
    }

/* ══════════════════════════════════════════════════════
   C — GRADIENT CARDS (brand blue, always white text)
   ══════════════════════════════════════════════════════ */

.dashboard-container .card {
    background: linear-gradient(135deg, var(--db-grad-start) 0%, var(--db-grad-mid) 50%, var(--db-grad-end) 100%) !important;
    color: var(--db-card-text) !important;
    border: none !important;
    border-radius: var(--db-radius) !important;
    box-shadow: var(--pv-shadow-lg) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
}

    .dashboard-container .card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 14px 32px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    .dashboard-container .card h2,
    .dashboard-container .card h4,
    .dashboard-container .card h5,
    .dashboard-container .card h6,
    .dashboard-container .card p,
    .dashboard-container .card > div {
        color: var(--db-card-text) !important;
    }

.dashboard-container .stat-card .card-body,
.dashboard-container .stat-card .card-body * {
    color: var(--db-card-text) !important;
}

#govtLandContainer .card h6,
#govtLandContainer .card h4,
#govtLandContainer .card h2 {
    color: var(--db-card-text) !important;
}

/* Card body transparent (gradient shows through) */
.dashboard-container .card-body {
    background: transparent !important;
}

    /* Chart-holding card bodies use theme surface (white/dark) */
    .dashboard-container .card-body.chart-container,
    .dashboard-container .card-body.chart-container-bar,
    .dashboard-container .card-body.chart-container-govt {
        background: var(--pv-surface) !important;
        border-radius: 0 0 var(--db-radius) var(--db-radius) !important;
        padding: 16px !important;
        transition: background 0.25s ease !important;
    }

.dashboard-container canvas {
    background-color: transparent !important;
}

/* Card header */
.dashboard-container .card .card-header {
    background: linear-gradient(135deg, var(--db-grad-start) 0%, var(--db-grad-mid) 50%, var(--db-grad-end) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: var(--db-radius) var(--db-radius) 0 0 !important;
    padding: 12px 16px !important;
}

    .dashboard-container .card .card-header h5,
    .dashboard-container .card .card-header h6,
    .dashboard-container .card .card-header * {
        color: var(--db-card-text) !important;
        margin: 0 !important;
    }

/* ══════════════════════════════════════════════════════
   D — CHART CONTAINERS & CANVAS SIZING
   ══════════════════════════════════════════════════════ */

.dashboard-container .chart-container,
.dashboard-container .chart-container-bar {
    position: relative !important;
    overflow: hidden !important;
}

.dashboard-container .chart-container {
    height: 380px !important;
    width: 100% !important;
    max-width: 700px;
    margin: 0 auto;
}

    .dashboard-container .chart-container canvas {
        max-height: 360px !important;
    }

.dashboard-container .chart-container-bar {
    height: 300px !important;
    width: 100% !important;
    max-width: 580px;
    margin: 0 auto;
}

.dashboard-container .chart-container-govt {
    height: 270px !important;
    width: 270px !important;
    margin: 0 auto !important;
}

/* Specific chart canvas IDs */
#schoolChart,
#hospitalChart,
#govtLandChart {
    width: 100% !important;
    max-width: 665px !important;
    height: 380px !important;
    display: block;
}

/* DP chart container */
.dp-chart-container {
    position: relative;
    height: 280px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* No-data overlay (theme-aware) */
.dashboard-container .no-data-message {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    z-index: 2 !important;
    background: var(--db-nodata-bg) !important;
    color: var(--db-nodata-text) !important;
    border: 1px dashed var(--db-nodata-border) !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

    .dashboard-container .no-data-message:not(.d-none) {
        display: flex !important;
    }

/* ══════════════════════════════════════════════════════
   E — GOVT HEADER BAR (always brand gradient)
   High specificity beats site.css !important overrides
   ══════════════════════════════════════════════════════ */

.container-fluid .govt-header,
.main-container .govt-header,
div.govt-header {
    background: linear-gradient(135deg, #0b3c5d 0%, #0e5a75 50%, #2a8fa4 100%) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: 64px !important;
}

    .container-fluid .govt-header label,
    .container-fluid .govt-header .form-label,
    div.govt-header label,
    div.govt-header .form-label {
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-bottom: 3px !important;
    }

    .container-fluid .govt-header .form-select,
    .container-fluid .govt-header select,
    div.govt-header .form-select,
    div.govt-header select {
        background-color: rgba(255,255,255,0.15) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.35) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
    }

        .container-fluid .govt-header .form-select option,
        div.govt-header .form-select option {
            background: #0e5a75 !important;
            color: #ffffff !important;
        }

    .container-fluid .govt-header #btnClearSelection,
    div.govt-header #btnClearSelection {
        background-color: rgba(255,255,255,0.15) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.4) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        transition: background 0.2s ease !important;
    }

        .container-fluid .govt-header #btnClearSelection:hover,
        div.govt-header #btnClearSelection:hover {
            background-color: rgba(255,255,255,0.28) !important;
        }

        .container-fluid .govt-header #btnClearSelection i,
        div.govt-header #btnClearSelection i {
            color: #ffffff !important;
        }

/* ══════════════════════════════════════════════════════
   F — TABLES (fully theme-aware)
   ══════════════════════════════════════════════════════ */

.govt-table-wrapper,
.school-table-wrapper,
.class2-table-wrapper {
    background: var(--db-table-bg) !important;
    border-radius: var(--pv-radius) !important;
    overflow: hidden !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--db-scrollbar-thumb) var(--db-scrollbar-track) !important;
    transition: background 0.25s ease !important;
}

    .govt-table-wrapper table,
    .school-table-wrapper table,
    .class2-table-wrapper table {
        background: var(--db-table-bg) !important;
        color: var(--db-td-text) !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    /* Sticky thead */
    .govt-table-wrapper thead th,
    .school-table-wrapper thead th,
    .class2-table-wrapper thead th {
        background-color: var(--db-thead-bg) !important;
        color: var(--db-thead-text) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 10px 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
        border: none !important;
        border-bottom: 2px solid rgba(0,0,0,0.2) !important;
    }

    /* Alternating rows */
    .govt-table-wrapper tbody tr:nth-child(odd),
    .school-table-wrapper tbody tr:nth-child(odd),
    .class2-table-wrapper tbody tr:nth-child(odd) {
        background-color: var(--db-row-odd) !important;
    }

    .govt-table-wrapper tbody tr:nth-child(even),
    .school-table-wrapper tbody tr:nth-child(even),
    .class2-table-wrapper tbody tr:nth-child(even) {
        background-color: var(--db-row-even) !important;
    }

    .govt-table-wrapper tbody tr:hover,
    .school-table-wrapper tbody tr:hover,
    .class2-table-wrapper tbody tr:hover {
        background-color: var(--db-row-hover) !important;
    }

    /* Cells */
    .govt-table-wrapper tbody td,
    .school-table-wrapper tbody td,
    .class2-table-wrapper tbody td {
        background-color: transparent !important;
        color: var(--db-td-text) !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid var(--db-td-border) !important;
        vertical-align: middle !important;
        text-align: center !important;
        transition: color 0.25s ease !important;
    }

    .govt-table-wrapper tbody tr:hover td,
    .school-table-wrapper tbody tr:hover td,
    .class2-table-wrapper tbody tr:hover td {
        background-color: transparent !important;
        color: var(--db-td-text) !important;
    }

    /* Webkit scrollbar */
    .govt-table-wrapper::-webkit-scrollbar,
    .school-table-wrapper::-webkit-scrollbar,
    .class2-table-wrapper::-webkit-scrollbar {
        width: 5px !important;
        height: 5px !important;
    }

    .govt-table-wrapper::-webkit-scrollbar-thumb,
    .school-table-wrapper::-webkit-scrollbar-thumb,
    .class2-table-wrapper::-webkit-scrollbar-thumb {
        background: var(--db-scrollbar-thumb) !important;
        border-radius: 4px !important;
    }

    .govt-table-wrapper::-webkit-scrollbar-track,
    .school-table-wrapper::-webkit-scrollbar-track,
    .class2-table-wrapper::-webkit-scrollbar-track {
        background: var(--db-scrollbar-track) !important;
    }

/* Class-2 specific height */
#class2LandContainer .class2-table-wrapper,
#govtLandContainer .class2-table-wrapper {
    max-height: 320px !important;
}

    #class2LandContainer .class2-table-wrapper tbody tr:nth-child(odd),
    #govtLandContainer .class2-table-wrapper tbody tr:nth-child(odd) {
        background-color: var(--db-row-odd) !important;
    }

    #class2LandContainer .class2-table-wrapper tbody tr:nth-child(even),
    #govtLandContainer .class2-table-wrapper tbody tr:nth-child(even) {
        background-color: var(--db-row-even) !important;
    }

    #class2LandContainer .class2-table-wrapper tbody tr:hover,
    #govtLandContainer .class2-table-wrapper tbody tr:hover {
        background-color: var(--db-row-hover) !important;
    }

    #class2LandContainer .class2-table-wrapper tbody td,
    #govtLandContainer .class2-table-wrapper tbody td {
        background-color: transparent !important;
        color: var(--db-td-text) !important;
    }

/* ══════════════════════════════════════════════════════
   G — DP MODULE TABLES & INPUTS
   ══════════════════════════════════════════════════════ */

.dp-table-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 320px !important;
    border-radius: var(--pv-radius-sm) !important;
    background: var(--db-table-bg) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--db-scrollbar-thumb) var(--db-scrollbar-track) !important;
}

#dpContainer .table thead tr th {
    background-color: var(--db-thead-bg) !important;
    color: var(--db-thead-text) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    text-align: center !important;
}

#dpContainer .table tbody tr td {
    color: var(--db-td-text) !important;
    background: var(--db-row-odd) !important;
}

#dpContainer .table tbody tr:nth-child(even) td {
    background: var(--db-row-even) !important;
}

#dpContainer .table tbody tr:hover td {
    background: var(--db-row-hover) !important;
    color: var(--db-td-text) !important;
    cursor: pointer !important;
}

/* DP search inputs — inside gradient cards → dark style */
#dpContainer .form-control {
    background: var(--db-search-bg) !important;
    color: var(--db-search-text) !important;
    border-color: var(--db-search-border) !important;
}

    #dpContainer .form-control:focus {
        border-color: rgba(255,255,255,0.6) !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important;
    }

    #dpContainer .form-control::placeholder {
        color: var(--db-search-ph) !important;
    }

#dpContainer h5.fw-bold,
#dpContainer .card h4,
#dpContainer .card h5,
#dpContainer .card h6,
#dpContainer .card p {
    color: var(--db-card-text) !important;
}

/* ══════════════════════════════════════════════════════
   H — SEARCH INPUTS (inside gradient cards)
   ══════════════════════════════════════════════════════ */

#schoolSearch,
#gatSurveyNoSearch,
#govLandSearch {
    background: var(--db-search-bg) !important;
    color: var(--db-search-text) !important;
    border: 1px solid var(--db-search-border) !important;
    border-radius: var(--pv-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    width: 100% !important;
    max-width: 320px !important;
}

    #schoolSearch::placeholder,
    #gatSurveyNoSearch::placeholder,
    #govLandSearch::placeholder {
        color: var(--db-search-ph) !important;
    }

    #schoolSearch:focus,
    #gatSurveyNoSearch:focus,
    #govLandSearch:focus {
        outline: none !important;
        border-color: rgba(255,255,255,0.6) !important;
        background: rgba(255,255,255,0.2) !important;
    }

/* ══════════════════════════════════════════════════════
   I — LEAFLET MAP: GOVT LAND (#dashboardMap)
   ══════════════════════════════════════════════════════ */

#dashboardMap {
    position: relative !important;
    height: 550px;
    width: 100%;
    z-index: 1;
}

    #dashboardMap .leaflet-container {
        position: absolute !important;
        inset: 0;
    }

    #dashboardMap .leaflet-tile-pane {
        z-index: 100;
    }

    #dashboardMap .leaflet-overlay-pane {
        z-index: 400;
    }

    #dashboardMap .leaflet-control-container {
        position: absolute !important;
        inset: 0;
        pointer-events: none;
        z-index: 1000 !important;
    }

    #dashboardMap .leaflet-control {
        pointer-events: auto;
        z-index: 1100 !important;
        background: white;
    }

    #dashboardMap .leaflet-control-zoom {
        z-index: 1200 !important;
    }

    #dashboardMap .leaflet-top,
    #dashboardMap .leaflet-bottom {
        z-index: 1200 !important;
    }

/* ══════════════════════════════════════════════════════
   J — LEAFLET MAP: DP (#dpDashboardMap)
   ══════════════════════════════════════════════════════ */

#dpDashboardMap {
    position: relative !important;
    height: 700px;
    width: 100%;
    z-index: 1;
}

    #dpDashboardMap .leaflet-control-container {
        position: absolute !important;
        inset: 0;
        pointer-events: none;
        z-index: 1000 !important;
    }

    #dpDashboardMap .leaflet-control {
        pointer-events: auto;
        z-index: 1100 !important;
    }

    #dpDashboardMap .leaflet-popup-content-wrapper,
    #dpDashboardMap .leaflet-popup-tip {
        background: white;
        color: #333;
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        border-radius: 12px;
        
    }

    #dpDashboardMap .leaflet-popup-content {
        width: 350px !important;
        max-height: 340px;
        overflow-y: auto;
        margin: 8px;
        padding-right: 6px;
        scrollbar-width: thin;
    }

/* ══════════════════════════════════════════════════════
   K — LEAFLET POPUPS (shared across all maps)
   ══════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 10px;
}


    .leaflet-popup-content::-webkit-scrollbar {
        width: 6px;
    }

    .leaflet-popup-content::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 4px;
    }

        .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
            background: #777;
        }

.leaflet-interactive {
    outline: none !important;
}

.hospital-popup .leaflet-popup-close-button:hover {
    background: #c62828 !important;
    color: #000 !important;
}

.hospital-popup .leaflet-popup-close-button:focus {
    outline: none;
}

/* ══════════════════════════════════════════════════════
   L — SHAPEFILE LABELS (theme-aware, always readable)
   ══════════════════════════════════════════════════════ */

.shapefile-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    background: none !important;
    border: none !important;
    text-shadow: -1px -1px 0 rgba(255,255,255,0.95), 1px -1px 0 rgba(255,255,255,0.95), -1px 1px 0 rgba(255,255,255,0.95), 1px 1px 0 rgba(255,255,255,0.95) !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════
   M — LEGEND (theme-aware)
   ══════════════════════════════════════════════════════ */

.leaflet-control.category-legend,
.leaflet-control.info.legend,
div.legend {
    background: var(--db-legend-bg) !important;
    color: var(--db-legend-text) !important;
    border: 1px solid var(--db-legend-border) !important;
    border-radius: var(--pv-radius) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    box-shadow: var(--pv-shadow) !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

    .leaflet-control.category-legend strong,
    .leaflet-control.info.legend strong,
    div.legend strong {
        color: var(--db-legend-text) !important;
        display: block !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--db-legend-border) !important;
        padding-bottom: 5px !important;
    }

/* Category legend fixed width */
.category-legend {
    width: 320px;
    max-height: 260px;
    overflow-y: auto;
    box-sizing: border-box;
}

    .category-legend .legend-item,
    .info.legend .legend-item,
    div.legend .legend-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 3px 5px !important;
        border-radius: var(--pv-radius-sm) !important;
        cursor: pointer !important;
        margin-bottom: 3px !important;
        transition: background 0.15s !important;
    }

        .category-legend .legend-item span,
        .info.legend .legend-item span,
        div.legend .legend-item span {
            color: var(--db-legend-text) !important;
            font-size: 12px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 200px !important;
            flex: 1 !important;
            min-width: 0 !important;
            line-height: 1.4 !important;
        }

        .category-legend .legend-item i,
        .info.legend .legend-item i,
        div.legend .legend-item i {
            width: 14px !important;
            height: 14px !important;
            flex-shrink: 0 !important;
            border: 1px solid rgba(0,0,0,0.3) !important;
            display: inline-block !important;
        }

        .category-legend .legend-item:hover,
        .info.legend .legend-item:hover,
        div.legend .legend-item:hover {
            background-color: var(--db-legend-hover) !important;
        }

            .category-legend .legend-item:hover span,
            .info.legend .legend-item:hover span {
                white-space: normal !important;
                overflow: visible !important;
            }

/* ══════════════════════════════════════════════════════
   N — ROAD MAP STYLES
   ══════════════════════════════════════════════════════ */

.road-line {
    stroke: #ff3b30 !important;
    stroke-width: 7px !important;
    stroke-linecap: round;
    animation: glowPulse 2s infinite ease-in-out;
}

.road-outline {
    stroke: #ffffff !important;
    stroke-width: 11px !important;
    stroke-linecap: round;
    opacity: 0.9;
}

.road-tooltip {
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    border: none;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 1;
        stroke-opacity: 1;
    }

    50% {
        opacity: 0.6;
        stroke-opacity: 0.6;
    }
}

/* ══════════════════════════════════════════════════════
   O — GOVTLAND BOTTOM TABLE CARD WRAPPERS
   ══════════════════════════════════════════════════════ */

#govtLandContainer .card.shadow-sm.mt-4 {
    border-radius: var(--db-radius) !important;
    padding: 16px !important;
    border: none !important;
}

    #govtLandContainer .card.shadow-sm.mt-4 h4 {
        color: var(--db-card-text) !important;
        margin-bottom: 12px !important;
    }

/* ══════════════════════════════════════════════════════
   P — HOSPITAL CONTAINER (teal variant)
   ══════════════════════════════════════════════════════ */

#hospitalContainer .card {
    background: linear-gradient(135deg, #134e5e 0%, #1f7a8c 50%, #5fa8a3 100%) !important;
    color: var(--db-card-text) !important;
    border-radius: var(--db-radius) !important;
    box-shadow: var(--pv-shadow-lg) !important;
}

#hospitalContainer thead th {
    background: #1f7a8c !important;
    color: var(--db-card-text) !important;
}

/* ══════════════════════════════════════════════════════
   Q — CLASS-2 PLACEHOLDER
   ══════════════════════════════════════════════════════ */

#class2LandMapPlaceholder.class2-map-placeholder {
    background: rgba(0,0,0,0.15) !important;
    border: 1px dashed rgba(255,255,255,0.3) !important;
    border-radius: var(--db-radius) !important;
}

#class2LandMapPlaceholder .card-body {
    color: rgba(255,255,255,0.7) !important;
    padding: 28px 16px !important;
}

#class2LandMapPlaceholder i {
    color: rgba(255,255,255,0.55) !important;
}

/* ══════════════════════════════════════════════════════
   R — LAYOUT SIDEBAR DASHBOARD SUB-LINKS
   ══════════════════════════════════════════════════════ */

#navDashboard .pv-sidebar-sub,
#navDashboard .pv-sidebar-sub li {
    list-style: none !important;
    padding-left: 0 !important;
}

    #navDashboard .pv-sidebar-sub li::marker,
    #navDashboard .pv-sidebar-sub li::before {
        content: none !important;
        display: none !important;
    }

#navDashboard .pv-sidebar-sub-link i {
    font-size: 1rem !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

#navDashboard .pv-sidebar-sub-link,
#navDashboard .pv-sidebar-sub-link i {
    color: #ffffff !important;
}

    #navDashboard .pv-sidebar-sub-link:hover,
    #navDashboard .pv-sidebar-sub-link:hover i {
        color: #ffffff !important;
        opacity: 0.82 !important;
    }

    #navDashboard .pv-sidebar-sub-link.active,
    #navDashboard .pv-sidebar-sub-link.active i {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

/* ══════════════════════════════════════════════════════
   S — OLD INTERNAL SIDEBAR (kept for fallback)
   ══════════════════════════════════════════════════════ */

.sidebar {
    min-height: 100vh !important;
    background: linear-gradient(180deg, var(--db-grad-start) 0%, var(--db-grad-mid) 60%, #1b7a95 100%) !important;
}

    .sidebar h4 {
        color: var(--db-card-text) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 0 12px 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        margin-bottom: 8px !important;
    }

    .sidebar .nav-link {
        color: rgba(255,255,255,0.85) !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        padding: 10px 14px !important;
        border-radius: var(--pv-radius-sm) !important;
        margin-bottom: 2px !important;
        transition: background 0.2s !important;
        border-bottom: none !important;
    }

        .sidebar .nav-link:hover {
            background-color: rgba(255,255,255,0.15) !important;
            color: var(--db-card-text) !important;
        }

        .sidebar .nav-link.active {
            background-color: rgba(255,255,255,0.22) !important;
            color: var(--db-card-text) !important;
            font-weight: 700 !important;
            border-left: 3px solid #7dd3fc !important;
        }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .govt-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .dashboard-container .chart-container {
        height: 280px !important;
    }

    .dashboard-container .chart-container-bar {
        height: 220px !important;
    }
}