/* ---- SecretaryDashbaord.css ----*/


/* =================== Theme =================== */


:root {
    --body-text-color-white: #ffff;
    /* Theme */
    --dashboard-primary: #8ed1da;
    --dashboard-primary-darker: rgba(142, 209, 218, 1);
    --dashboard-primary-lighter: rgba(142, 209, 218, 0.35);
    /*    --dashboard-secondary: #063a6a;*/
    --dashboard-secondary: #0a929e;
    --dashboard-secondary-darker: rgba(10, 146, 158, 1);
    --dashboard-secondary-lighter: rgba(10, 146, 158, 0.35);
    /* Border colors */
    --card-heading-color: #7fe9fa;
    --card-border: #1c4f51;
    --border-heading-lines-color: rgba(28, 79, 81, 0.35);
    --border-lines-color: #20b4ba;
    /* Chart Zoom Model Colors */
    --zoomed-model-color: #05626a;
    /* other dasboard */
    --dashboard-accent: #22D3EE;
    --dashboard-emerald: #10b981;
    --dashboard-blue: #3BA2F1;
    --dashboard-yellow: #E5C95F;
    --dashboard-orange: #fb923c;
    --dashboard-red: #BF092F;
    --text-on-dark: #e9f0fb;
    --aside-max-h: clamp(420px,66vh,760px);
    /* ===== Choropleth COLORS ===== */
    /*--legend-color-lighter: #eff6ff;*/ /* very light */
    /*--legend-color-light: #dbeafe;*/ /* light */
    /*--legend-color-medium: #60a5fa;*/ /* mid */
    /*--legend-color-dark: #1d4ed8;*/ /* dark */
    /*--legend-color-darker: #1e3a8a;*/ /* very dark */

    --legend-color-lighter: #daeecc; /* very light, almost white */
    --legend-color-light: #a1f163; /* light peach */
    --legend-color-medium: #78d26d; /* soft orange */
    --legend-color-dark: #2fa53e; /* strong orange */
    --legend-color-darker: #2f793b; /* deep burnt orange */
    /* Canonical ownership brand colors */
    --color-ownership-gov: #10b981; /* Govt */
    --color-ownership-public: #10b981; /* Public (your theme maps to emerald) */
    --color-ownership-private: #2563eb; /* Private */
    --color-ownership-stroke: #4d4d4d; /* marker stroke/outline */
    /* Bars palette (unchanged) */
    --bar-1: #19b67b; /* green */
    --bar-2: #f1b42c; /* amber/gold */
    --bar-3: #e11f33; /* crimson red */
    --bar-4: #d6a06c; /* tan */
    --bar-5: #ef4444; /* red */
    --bar-6: #14b8a6; /* teal */
    /*--own-palette-1: #10b981;*/ /* emerald */
    /*--own-palette-2: #f97316;*/ /* orange */
    /*--own-palette-3: #0ea5e9;*/ /* sky */
    /*--own-palette-4: #ef4444;*/ /* red */
    /*--own-palette-5: #8b5cf6;*/ /* violet */
    /*--own-palette-6: #22c55e;*/ /* green */
    /*--own-palette-7: #f59e0b;*/ /* amber */
    /*--own-palette-8: #3b82f6;*/ /* blue */
    /*--own-palette-9: #a855f7;*/ /* purple */
    /*--own-palette-10: #14b8a6;*/ /* teal */
    /*--own-palette-11: #eab308;*/ /* yellow */
    /*--own-palette-12: #84cc16;*/ /* lime */
    /*--own-palette-13: #06b6d4;*/ /* cyan */
    /*--own-palette-14: #ec4899;*/ /* pink */
    /*--own-palette-15: #e11d48;*/ /* rose */
    /*--own-palette-16: #6366f1;*/ /* indigo */


    --own-palette-1: #09249e;
    --own-palette-2: #740ac1;
    --own-palette-3: #E5C95F;
    --own-palette-4: #BF092F;
    --own-palette-5: #d19537;
    --own-palette-6: #cd0cb1;
    --own-palette-7: #007E2E;
    --own-palette-8: #3de5ff;
    --own-palette-9: #e8ff00;
    --own-palette-10: #34495E;
    --own-palette-11: #00cfff;
    --own-palette-12: #d946ef;
    --own-palette-13: #fbbf24;
    --own-palette-14: #4ade80;
    --own-palette-15: #a855f7;
    --own-palette-16: #f43f5e;

    /* Hover*/
    --hover: #8ed1da;
}

.white-color {
    color: var(--body-text-color-white) !important;
}

.dark-layout body {
    background-color: var( --dashboard-primary) !important;
    color: var(--body-text-color-white) !important;
}


.dark-layout .header-navbar {
    background-color: #141e38 !important;
}

/* =================== Base =================== */
* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    background: var(--dashboard-primary);
    color: var(--body-text-color-white);
    font-family: 'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}


/* ===================  Vuexy-aware page offsets (generic, reusable)  =================== */
.vx-content {
    position: relative;
    transition: margin-left .2s ease, padding-top .2s ease;
}

/* Respect the floating header height */
.navbar-floating .vx-content {
    padding-top: 4.25rem; /* ~navbar height; tweak if needed */
}

/* Respect the left menu width */
.menu-expanded .vx-content {
    margin-left: 260px; /* Vuexy default expanded width */
}

.menu-collapsed .vx-content {
    margin-left: 80px; /* Vuexy default collapsed width */
}

/* On tablet/mobile, menu overlays, so remove left margin */
@media (max-width: 1199.98px) {
    .vx-content {
        margin-left: 0 !important;
    }
}

/* Optional: keep inner container paddings consistent */
.vx-content-body.container-fluid {
    padding: .75rem .75rem;
}

/* If you still use .render-content somewhere, make it follow the same rules */
.vx-content, .render-content {
    transition: margin-left .2s ease, padding-top .2s ease;
}

.menu-expanded .render-content {
    margin-left: 260px;
}

.menu-collapsed .render-content {
    margin-left: 80px;
}

@media (max-width: 1199.98px) {
    .render-content {
        margin-left: 0 !important;
    }
}

.navbar-floating .render-content {
    padding-top: 4.25rem;
}

body.menu-expanded .vx-content,
body.menu-collapsed .vx-content {
    margin-left: 0 !important;
}

/* Kill the top padding we added for the floating header; Vuexy layout already does it */
body.navbar-floating .vx-content {
    padding-top: 0 !important;
}

/* Keep mobile behavior clean (menu overlays, so no margin anyway) */
@media (max-width: 1199.98px) {
    .vx-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}

/* Optional: trim container padding so the map/cards align snugly */
.vx-content-body.container-fluid {
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: 0;
}
/* =================== Cards =================== */
.soft-card, .soft-card-light {
    --card-fill: var(--dashboard-secondary);
    position: relative;
    border-radius: .75rem;
    border: 2px solid var(--card-border);
    background: var(--dashboard-secondary);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    overflow: visible;
}


/* =================== Map & Layout =================== */
.map-wrap {
    border: 1px solid var(--dashboard-accent);
    border-radius: .6rem;
    overflow: hidden;
}

/* three columns never wrap on lg+ */
.flex-lg-nowrap {
    flex-wrap: wrap
}

@media (min-width:992px) {
    .flex-lg-nowrap {
        flex-wrap: nowrap;
    }

    /* >>> ADD BELOW: keep all three columns the same height <<< */
    .map-wrap {
        height: var(--aside-max-h);
    }

    .sidebar-scroll {
        height: var(--aside-max-h);
        max-height: var(--aside-max-h);
    }

    /* keep as-is to size the map canvas */
    .map-vh {
        height: var(--aside-max-h);
    }
}

/* =================== Sidebars =================== */
aside[class*="col-"] {
    min-height: 0
}

.sidebar-scroll {
    max-height: var(--aside-max-h);
    scrollbar-color: var(--dashboard-accent) transparent;
    overflow: auto; /* keep scrolling */
    -ms-overflow-style: none; /* IE/old Edge: hide without reserving space */
    scrollbar-width: none; /* Firefox: hide and don't reserve space */
}

.sidebar-scroll::-webkit-scrollbar { /* Chrome/Safari/Edge (Blink/WebKit) */
        width: 0; /* no gutter = no space */
        height: 0;
        background: transparent; /* just in case */
    }


@media (min-width: 992px) {
    .sidebar-scroll { /* same rules as above */
    }

        .sidebar-scroll::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
}

/* =================== Utilities =================== */
.sq {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block
}

.progress.progress-slim {
    height: 10px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
}
.progress.progress-slim .progress-bar {
        border-radius: 3px
    }

.section-hd {
    padding: .32rem .5rem;
    font-size: .9rem;
    color: var(--card-heading-color);
    border-bottom: 1px solid var(--card-border);
    /*border-bottom: 1px solid var(--border-heading-lines-color);*/ /*Akaash*/
}

.pb-2 {
    padding-bottom: 0.1rem !important;
}

.section-row {
    /*    padding: .44rem .55rem;*/
    padding: .55rem .6rem;
    font-size: .85rem;
}

.panel-fixed {
    min-height: 240px
}


/* Static segmented bar with active state (no overlays) */
.segbar {
    position: relative;
    isolation: isolate;
    z-index: 10;
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: .5rem;
    background: var(--dashboard-secondary);
    border: 2px solid var(--card-border);
    border-radius: .6rem;
    overflow: hidden;
}

.segbar .seg {
        flex: 1 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 .6rem;
        font-size: .85rem;
        line-height: 1;
        color: #eaf6ff;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: background-color .18s ease, color .18s ease, font-weight .18s ease;
    }

.segbar .seg + .seg {
            border-left: 1px solid var(--border-heading-lines-color);
        }
/* divider */

/* Active look: filled pill per segment */
.segbar .seg.is-active {
            background: #8ed1da;
            color: #ffffff;
            font-weight: 600;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
            height: 30px;
        }
/* keep rounded edges when first/last is active */
.segbar .seg:first-child.is-active {
            border-radius: .6rem 0 0 .6rem;
        }

.segbar .seg:last-child.is-active {
            border-radius: 0 .6rem .6rem 0;
        }

/* Remove inner padding that was creating visual gap on the ownership row */
#ownershipSegWrap {
    padding: 0 !important;
}

/* Keep horizontal scroll working, keep scrollbar invisible, no vertical scroll */
#ownershipSegWrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/old Edge */
    padding-block: 0;
}

 #ownershipSegWrap::-webkit-scrollbar {
        width: 0;
        height: 0; /* WebKit */
    }

.segbar {
    margin-bottom: 0 !important;
    overflow: hidden; /* frame stays fixed */
    position: relative;
}

.segbar .segbar-track {
        display: flex;
        align-items: center;
        gap: 0; /* keep your dividers working */
        overflow-x: auto; /* scroll only the pills */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox: hide bar */
    }

.segbar .segbar-track::-webkit-scrollbar {
            width: 0;
            height: 0; /* WebKit: hide bar */
        }


/* Small donut wrapper */
.donut-sm {
    width: 140px; /* tweak this to taste */
    height: 240px;
    margin: 0 auto; /* center in the card */
}

.donut-sm canvas {
        width: 100% !important;
        height: 100% !important; /* Chart.js will respect the box */
        display: block;
    }


/* Hide scrollbars; show on hover */
.sidebar-scroll {
    overflow: auto;
    max-height: var(--aside-max-h); /* keep your height cap */
    /* Firefox */
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    /* Old IE/Edge */
    -ms-overflow-style: none;
    /* Avoid layout shift when bar appears (supported browsers) */
    scrollbar-gutter: stable both-edges;
}
/* WebKit (Chrome, Edge, Safari) — hidden by default */
.sidebar-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }


/* ===== Compact mode: smaller fonts, paddings, gaps ===== */
/* Global text + line-height */
body {
    font-size: .92rem;
    line-height: 1.35;
}

/* =========================
   Filter Modal scrolling constraints
   ========================= */
#filterModal .no-scrollbar .select2-results__options {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

#filterModal .no-scrollbar .select2-results__options::-webkit-scrollbar {
        width: 0;
        height: 0; /* WebKit */
    }
/* Keep dropdown contained to viewport */
#filterModal .select2-dropdown {
    max-height: 60vh;
    overflow: hidden; /* inner options list will scroll */
}
/* Modal body can overflow with many fields */
#filterModal .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#filterModal .modal-body::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* ===== Dark layout css start ===== */

.dark-layout .border,
.dark-layout .border-top,
.dark-layout .border-end,
.dark-layout .border-bottom,
.dark-layout .border-start {
    /*border-color: var(--card-border) !important;*/ /*Akaash*/
    border-color: var(--border-lines-color) !important;
}

.dark-layout h1,
.dark-layout h2,
.dark-layout h3,
.dark-layout h4,
.dark-layout h5,
.dark-layout h6 {
    color: var(--body-text-color-white);
}

.dark-layout .modal .modal-header, .dark-layout .modal .modal-header[class*='bg-'] {
    background-color: var(--dashboard-secondary);
}

.dark-layout label {
    color: var(--body-text-color-white);
}

.dark-layout .modal .modal-content, .dark-layout .modal .modal-body, .dark-layout .modal .modal-footer {
    background-color: var(--dashboard-primary);
    border-color: var( --card-border);
    border: 2px solid var( --card-border);
}
.dark-layout .table.table-hover tbody tr:hover {
    --bs-table-accent-bg: var(--hover);
}
.dark-layout .table:not(.table-dark):not(.table-light) thead:not(.table-dark) th, .dark-layout
.table:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th {
    background-color: var(--dashboard-secondary);
    max-height: 15px;
    color: var(--body-text-color-white);
}
/*dark-layout .table:not(.table-dark):not(.table-light) thead:not(.table-dark) th,
.dark-layout .table:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th {
    background-color: #343d55;
}

.dark-layout .table:not(.table-dark):not(.table-light) thead:not(.table-dark) th,
.dark-layout .table:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th {
    background-color: var(--dashboard-primary);
}*/
/* ===== Dark layout css end ===== */
.soft-card, .soft-card-light {
    border-radius: .3rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}

 /* Tighten card paddings (override Bootstrap utility on these cards) */
.soft-card.p-3, .soft-card-light.p-3 {
        padding: .85rem !important;
    }

 .soft-card.p-2, .soft-card-light.p-2 {
        padding: .45rem !important;
    }

/* Chips */
.badge-chip {
    padding: .14rem .4rem;
    font-size: .68rem;
    border-radius: 999px;
}

/* Progress bars */
.progress.progress-slim {
    height: 8px;
}

/* Segmented filters */
.segbar {
    min-height: 34px;
    border-radius: .5rem;
}

.segbar .seg {
        padding: 0 .5rem;
        font-size: .8rem;
    }

/* Donut charts a bit smaller */
.donut-sm {
    width: 110px;
    height: 110px;
}

/* Reduce layout spacing */
.g-2 {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .5rem;
}
/* rows with g-2 */
.gap-2 {
    gap: .4rem !important;
}

/* Optional: slightly smaller legend text under charts */
.small, small {
    font-size: .78em;
}

/* Modal backdrop and content in dashboard dark */
.modal-backdrop.show {
    background: #0a1420;
    opacity: .68;
}

.modal-content.dashboard-modal {
    --card-fill: var(--dashboard-secondary);
    color: var(--text-on-dark);
    border: 1px solid transparent;
    border-radius: .6rem;
    background: linear-gradient(var(--card-fill),var(--card-fill)) padding-box, linear-gradient(135deg,var(--dashboard-accent),rgba(34,211,238,.35),var(--dashboard-accent)) border-box;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.modal-header {
    background: var(--dashboard-primary);
    border-bottom: 1px solid rgba(34,211,238,.25);
}

.modal-footer {
    background: var(--dashboard-primary);
    border-top: 1px solid rgba(34,211,238,.15);
}

.btn-ghost {
    background: var(--dashboard-secondary);
    border: 1px solid var(--dashboard-accent);
    color: var(--text-on-dark);
    border-radius: .55rem;
    padding: .45rem .9rem;
   
}
.btn-prev-next {
    background: var(--dashboard-secondary);
    border: 1px solid var(--card-border);
    color: var(--body-text-color-white);
    border-radius: .55rem;
    padding: .45rem .9rem;
    height: 80px;
    width: 30px;
}

.btn-emerald {
    background: linear-gradient(90deg,#1bbf85,#0b9f6a);
    color: #fff;
    border: 0;
    border-radius: .55rem;
    padding: .48rem 1rem;
}

/* ===== Select2 dark theme (theme: 'dark') ===== */
.select2-container--dark .select2-selection--single,
.select2-container--dark .select2-selection--multiple {
    background: var(--dashboard-secondary);
    border: 1px solid rgba(34,211,238,.45);
    border-radius: .5rem;
    min-height: 40px;
}

.select2-container--dark .select2-selection__rendered {
    color: var(--text-on-dark);
    line-height: 38px;
    padding-left: .75rem;
}

.select2-container--dark .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .35rem .5rem;
}

.select2-container--dark .select2-selection__arrow b {
    border-color: var(--text-on-dark) transparent transparent transparent;
}

/* Selection choices */
.select2-container--dark .select2-selection__choice,
.dark-layout .select2-container .select2-selection--multiple .select2-selection__choice {
    background: rgba(34,211,238,.12);
    border: 1px solid var(--dashboard-accent);
    color: var(--text-on-dark);
    border-radius: .4rem;
    padding: .1rem .4rem;
}

/* Override for dark layout specifically */
.dark-layout .select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--dashboard-primary) !important;
    border: 1px solid var(--card-border);
    color: var(--body-text-color-white) !important;
}

.dark-layout .select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
        color: var(--dashboard-red) !important;
    }

/* Dropdown panel */
.select2-container--dark .select2-dropdown {
    background: var(--dashboard-primary);
    border: 1px solid rgba(34,211,238,.35);
    border-radius: .5rem;
    overflow: hidden;
}

.select2-container--dark .select2-results__option {
    color: var(--text-on-dark);
    padding: .45rem .6rem;
    font-size: .9rem;
}

.select2-container--dark .select2-results__option--highlighted {
    background: var(--dashboard-primary);
    color: #fff;
}

.select2-container--dark .select2-search__field {
    color: var(--text-on-dark);
    background: var(--dashboard-secondary);
    border: 1px solid rgba(34,211,238,.35);
    border-radius: .4rem;
    padding: .35rem .5rem;
}

/* Compact labels inside modal */
.dashboard-modal .form-label {
    font-size: .85rem;
    color: #9fe9ff;
}
/* Laptop+ — full width, exactly 44px tall, safe cropping */
@media (min-width: 992px) {
    /* Stable full-width, fixed-height banner (no jitter) */
    .header-navbar .nav-banner-middle {
        flex: 1 1 0; /* stable flex item */
        height: 60px; /* fixed height */
        min-height: 44px;
        overflow: hidden; /* clip cropping edges cleanly */
        border-radius: 6px;
        display: block; /* avoid flex child jitter */
        padding: 0; /* optional side space */
    }

    .header-navbar .header-banner {
        display: block;
        width: 100%;
        height: 60px; /* exact same as container */
        min-height: 50px;
        object-fit: fill; /* fill width, crop vertically */
        object-position: center;
        transform: translateZ(0); /* 🩵 fixes subpixel rendering jitter */
        will-change: transform; /* hint GPU to lock image */
    }
}

b[role="presentation"] {
    display: none;
}

/* table override*/

.dark-layout .table .thead tr:not([class*='table-']) th,
.dark-layout .table .thead tr:not([class*='table-']) td,
.dark-layout .table tbody tr:not([class*='table-']) th,
.dark-layout .table tbody tr:not([class*='table-']) td {
    color: var(--body-text-color-white);
    border-color: var(--card-border) !important;
}