/* =========================
   FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body {
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
}

/* =========================
   BACKGROUND
========================= */
body {
    background: #F9FAFB;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

/* =========================
   HEADER
========================= */
.header {
    height: 60px;
    background: linear-gradient(90deg, #1E293B, #0F172A);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;

    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
}

/* =========================
   FILTER BAR
========================= */
.filter-container {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 16px 32px;

    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;

    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* =========================
   CARD
========================= */
.card {
    background: white;
    border-radius: 16px;
    padding: 20px;

    border: none;   /* 🔥 REMOVE border */
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);

    transition: all 0.25s ease;
}

.card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
/* =========================
   KPI TEXT
========================= */
.kpi-value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #0F172A;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-subtitle {
    font-size: 13px;
    color: #9CA3AF;
}
/* =========================
   KPI ICONS
========================= */
.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.kpi-election {
    background: #EEF2FF;
    color: #4F46E5;
}

.kpi-stipend {
    background: #ECFDF5;
    color: #16A34A;
}

.kpi-training {
    background: #FFFBEB;
    color: #D97706;
}

/* =========================
   DASH DROPDOWN
========================= */
.dash-dropdown button {
    background: linear-gradient(135deg, #4F46E5, #6366F1) !important;
    border: none !important;
    color: white !important;

    border-radius: 10px !important;
    height: 36px !important;

    padding: 0 14px !important;
    font-weight: 500;

    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
    transition: 0.25s;
}

.dash-dropdown button:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(79,70,229,0.4);
}

.dash-dropdown-value {
    color: #1E293B;
}

/* Dropdown menu */
.dash-dropdown-menu {
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;

    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
    padding: 6px !important;
}

/* Options */
.dash-dropdown-option {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: 0.2s;
}

.dash-dropdown-option:hover {
    background: #EEF2FF !important;
    color: #4F46E5 !important;
}

.dash-dropdown-option.selected {
    background: #E0E7FF !important;
    color: #3730A3 !important;
}

/*  =========================
   DATE PICKER
========================= */
/*.filter-container .DateRangePickerInput {
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    height: 36px;

    display: flex;
    align-items: center;
    padding: 0 8px;
}

.filter-container .DateRangePickerInput:hover {
    border-color: #4F46E5 !important;
}

.DateInput_input {
    height: 34px !important;
    font-size: 13px !important;
}

.DateRangePicker_picker {
    position: absolute !important;
    z-index: 9999 !important;
} */

/* =========================
   CHART FIX
========================= */
.js-plotly-plot,
.plotly,
.dash-graph {
    background: transparent !important;
}

/* =========================
   TAB SWITCH
========================= */
.tab-wrapper {
    position: relative;
    display: flex;
    min-width: 240px;
    width: fit-content;
    gap: 8px;
    background: #E2E8F0;
    border-radius: 12px;
    padding: 4px;
}

.tab-link {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #475569;
    font-weight: 500;
    padding: 8px 0;
    border-radius: 8px;
    transition: 0.25s;
}

.active-tab {
    background: white;
    color: #4F46E5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* =========================
   UTIL
========================= */
.hidden {
    display: none !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
    .chart-row {
        flex-direction: column !important;
    }
}

@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
        align-items: stretch;
    }
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;   /* optional for spacing */
}

.kpi-row {
    display: flex;      /* 🔥 CHANGE FROM GRID */
    gap: 20px;
    flex: 1;
}

.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.section {
    margin-bottom: 24px;
}

.kpi-card {
    position: relative;
    overflow: hidden;

    background: linear-gradient(145deg, #FFFFFF, #FAFAFA);
    border: 1px solid #e2e8f0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(0,0,0,0.04), transparent 70%);
}

.kpi-value {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
}
.section {
    margin-bottom: 28px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
}

.section-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;

    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    overflow:visible;
}

.kpi-body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;  /* LEFT bigger than donut */
    align-items: center;
    gap: 10px;
}

.kpi-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpi-breakdown {
    display: flex;
    gap: 18px;
    margin-top: 6px;
}

.kpi-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-mini p {
    font-size: 11px;
    color: #9CA3AF;
    margin: 0;
}

.kpi-mini h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.kpi-donut {
    display: flex;
    justify-content: center;
    align-items: center;
     opacity: 0.9;
}

.kpi-card::after {
    transition: 0.3s;
}

.kpi-card:hover::after {
    transform: scale(1.2);
    opacity: 0.7;
}

.top-filters {
    display: flex;
    gap: 12px;
    align-items: center;

    padding: 8px 0;
}

.top-filters .Select-control,
.top-filters input {
    border-radius: 8px;
    border: 1px solid #E5E7EB;

    font-size: 13px;
    height: 34px;
}

.kpi-card:first-child {
    border: 1px solid #DDD6FE;
    box-shadow: 0 12px 30px rgba(124,58,237,0.15);
}
.kpi-card {
    background: linear-gradient(145deg, #FFFFFF, #F8FAFC);
    transition: all 0.25s ease;
}

.kpi-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.Select-menu-outer {
    z-index: 9999 !important;
}

.Select-menu-outer {
    max-height: 250px !important;
}

/* .Select-menu {
    max-height: 250px !important;
    overflow-y: auto !important;
} */

.Select-control {
    border-radius: 8px !important;
    border: 1px solid #E5E7EB !important;
}
/* =========================
   FINAL DROPDOWN (CLEAN + INTERACTIVE)
========================= */

/* Root */
.Select {
    position: relative;
    z-index: 1000;
}

/* Button */
.Select-control {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;

    border-radius: 12px !important;
    height: 36px !important;

    padding: 0 12px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;
}

/* Hover (lift) */
.Select-control:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 14px rgba(0,0,0,0.08);
}

/* Click (press) */
.Select-control:active {
    transform: scale(0.98);
}

/* Focus */
.is-focused .Select-control {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}

/* Value text */
.Select-value-label {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Dropdown menu */
.Select-menu-outer {
    z-index: 99999 !important;
    border-radius: 12px !important;

    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;

    overflow: hidden;
}

/* Inner scroll */
/* .Select-menu {
    max-height: 250px !important;
    overflow-y: auto !important;
} */

/* Option */
.Select-option {
    padding: 8px 12px !important;
    font-size: 13px;
    transition: all 0.15s ease;
}

/* Hover option */
.Select-option.is-focused {
    background: #EEF2FF !important;
    color: #4F46E5 !important;
}

/* Selected option */
.Select-option.is-selected {
    background: #E0E7FF !important;
    color: #3730A3 !important;
    font-weight: 600;
}

.section-box {
    overflow: visible !important;
}

/* =========================
   FINAL DROPDOWN BUTTON DESIGN
========================= */

/* Target only dropdown button wrapper */
.Select-control {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;

    border-radius: 12px !important;
    height: 36px !important;

    padding: 0 12px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.25s ease;
}

/* Hover */
.Select-control:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 14px rgba(0,0,0,0.08);
}

/* Focus */
.is-focused .Select-control {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}

/* Value text */
.Select-value-label {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =========================
   TARGET REAL BUTTON (FINAL)
========================= */

/* Actual dropdown button */
button[data-state] {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;

    border-radius: 12px !important;
    height: 36px !important;

    padding: 0 14px !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;
}
button[data-state]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

button[data-state]:active {
    transform: scale(0.97);
}

button[data-state]:focus {
    outline: none !important;
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}
/* =========================
   DATE RANGE PICKER FIX (FINAL)
========================= */

/* Outer box */
.DateRangePickerInput {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;

    border-radius: 12px !important;
    height: 36px !important;

    display: flex;
    align-items: center;

    padding: 0 8px;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;
}

/* Hover */
.DateRangePickerInput:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Individual inputs */
.DateInput_input {
    background: transparent !important;
    border: none !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    padding: 6px 4px;
}

/* Remove weird blue focus */
.DateInput_input:focus {
    outline: none !important;
}

/* Arrow */
.DateRangePickerInput_arrow {
    color: #64748B !important;
    font-weight: 600;
}

/* Close icon */
.DateRangePickerInput_clearDates {
    color: #64748B !important;
}

/* =========================
   NEW DATE PICKER FIX
========================= */

/* .dash-datepicker-input-wrapper {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;

    border-radius: 12px !important;
    height: 38px !important;

    padding: 0 12px !important;

    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;
}
.dash-datepicker-input-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.dash-datepicker-input-wrapper:focus-within {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}
.dash-datepicker-input-wrapper input {
    border: none !important;
    outline: none !important;
    background: transparent !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}
.dash-datepicker-input-wrapper svg {
    color: #64748B;
} */

.filter-panel {
    background: white;
    border: 1px solid #E2E8F0;
}
.filter-panel {
    flex: 0 0 280px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* ✅ FIX */
    gap: 12px;                    /* ✅ controlled spacing */
}
.kpi-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.kpi-row {
    flex: 1;   /* 🔥 THIS IS KEY */
}
.kpi-section {
    flex-wrap: wrap;
}

.kpi-section {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
/* =========================
   FINAL DATE FILTER (MATCH DROPDOWN)
========================= */

/* =========================
   MATCH DROPDOWN STYLE EXACTLY
========================= */

/* .DateRangePickerInput {
    width: 100% !important;
    height: 36px !important;

    /* SAME as dropdown */
    /* background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;

    display: flex;
    align-items: center;
    padding: 0 12px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    /* 🔥 THIS was missing */
    /* box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.25s ease;
} */ 

/* Hover SAME as dropdown */
/* .DateRangePickerInput:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
} */

/* Focus SAME as dropdown */
/* .DateRangePickerInput:focus-within {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
} */

/* Inner text */
/* .DateInput_input {
    background: transparent !important;
    border: none !important;
    outline: none !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
} */

/* Arrow alignment */
/* .DateRangePickerInput_arrow {
    padding: 0 6px;
    color: #64748B;
} */ 
/* =========================
   CLEAN DATE FILTER (FINAL FIX)
========================= */

.DateRangePickerInput {
    width: 100% !important;
    height: 36px !important;

    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;

    display: flex;
    align-items: center;
    padding: 0 12px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;

    overflow: hidden;   /* 🔥 IMPORTANT */
}

/* Remove internal split look */
.DateInput {
    border: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
}

/* Clean input */
.DateInput_input {
    border: none !important;
    background: transparent !important;
    outline: none !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    padding: 0;
}

/* Arrow */
.DateRangePickerInput_arrow {
    margin: 0 6px;
    color: #64748B;
}

/* Remove blue active state */
.DateRangePickerInput__focused {
    border-color: #CBD5E1 !important;
    box-shadow: none !important;
}

/* Hover */
.DateRangePickerInput:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Focus */
.DateRangePickerInput:focus-within {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}
/* 🔥 ACTUAL DATE FILTER (correct target) */
.dash-datepicker-input-wrapper {
    width: 100% !important;
    height: 36px !important;

    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;

    box-shadow: 
        0 2px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all 0.2s ease;
}

/* Hover same as dropdown */
.dash-datepicker-input-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Focus same as dropdown */
.dash-datepicker-input-wrapper:focus-within {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}

/* Input inside */
.dash-datepicker-input-wrapper input {
    border: none !important;
    outline: none !important;
    background: transparent !important;

    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

/* Icons */
.dash-datepicker-input-wrapper svg {
    color: #64748B;
}
.DateInput_input {
    font-weight: 700 !important;   /* 🔥 makes it bold */
}
/* =========================
   FINAL TABLET FIX (WORKING)
========================= */

@media (max-width: 1100px) {

    /* KPI + FILTER STACK */
    .kpi-section {
        flex-direction: column !important;
    }

    .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    

    /* CHART FIX */
    .chart-row {
        grid-template-columns: 1fr !important;
    }
}
body, html {
    overflow-x: hidden;
}
@media (max-width: 1200px) {

    /* stack KPI + filter */
    .kpi-section {
        flex-direction: column !important;
    }

    .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
    }


    .kpi-card > div > div > div:last-child {
        display: flex;
        justify-content: center;
    }

    /* charts */
    .chart-row {
        grid-template-columns: 1fr !important;
    }
}
/* =========================
   SMALL TABLET FIX (768)
========================= */

@media (max-width: 800px) {

    /* KPI cards full width */
    .kpi-row {
        flex-direction: column !important;
    }

    .kpi-card {
        width: 100% !important;
    }

    /* already stacked, just ensure clean */
    .kpi-section {
        flex-direction: column !important;
    }

    /* charts */
    .chart-row {
        grid-template-columns: 1fr !important;
    }

    /* reduce padding so it doesn’t look boxed */
    .page-container {
        padding: 0 12px !important;
    }
}
.header-inner {
    display: flex;
    justify-content: space-between;  /* 🔥 THIS PUSHES RIGHT */
    align-items: center;
}
/* =========================
   KPI FIX FOR SMALL SCREENS
========================= */

@media (max-width: 900px) {

    .kpi-left,
    .kpi-right {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .kpi-right {
        display: flex;
        justify-content: center;
    }
}
/* =========================
   KPI METRICS FIX (CSS ONLY)
========================= */

/* Target the 3-metrics row inside KPI card */
.kpi-card > div > div > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Ensure each metric doesn't overflow */
.kpi-card > div > div > div:nth-child(3) > div {
    min-width: 0;
}
html, body {
    overflow-x: hidden;
}

.page-container,
.section,
.kpi-section,
.chart-row,
.card {
    max-width: 100%;
    box-sizing: border-box;
}
.kpi-row,
.kpi-section {
    min-width: 0;
}

.card {
    min-width: 0;
}
.filter-panel {
    max-width: 100%;
}
@media (max-width: 1024px) {

    /* filter container */
    div[style*="padding: 12px 32px"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* each filter */
    div[style*="width: 260px"] {
        width: 100% !important;
    }
}
@media (max-width: 1024px) {

    #kpi_row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {

    #kpi_row {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 1024px) {

    /* main container */
    div[style*="display: flex"][style*="padding: 0 32px"] {
        flex-direction: column !important;
    }

    /* left + right columns */
    div[style*="width: 65%"],
    div[style*="width: 35%"] {
        width: 100% !important;
    }
}
@media (max-width: 768px) {

    .dash-graph {
        height: 300px !important;
    }
}
.card {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
@media (max-width: 1024px) {

    /* remove vertical clipping */
    div[style*="overflowY"] {
        overflow: visible !important;
        height: auto !important;
    }

}
@media (max-width: 1024px) {

    .chart-card .dash-graph {
        height: 350px !important;
        width: 100% !important;
    }

}
@media (max-width: 1024px) {

    /* main layout stack */
    div[style*="width: 65%"],
    div[style*="width: 35%"] {
        width: 100% !important;
    }

}
@media (max-width: 1024px) {

    .card {
        height: auto !important;
        min-height: unset !important;
    }

}
@media (max-width: 1100px) {

    /* main layout stack */
    div[style*="display: flex"][style*="padding: 0 32px"] {
        flex-direction: column !important;
    }

    /* left + right full width */
    div[style*="width: 65%"],
    div[style*="width: 35%"] {
        width: 100% !important;
    }

}
@media (max-width: 1100px) {

    div[style*="overflowY"] {
        overflow: visible !important;
        height: auto !important;
    }

}
@media (max-width: 1100px) {

    .dash-graph {
        width: 100% !important;
    }

}
div[style*="display: flex"] > div {
    min-width: 0;
}
/* container */
.shimmer-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* 🔥 ONLY show shimmer WHEN LOADING */
.shimmer-box:has(.dash-loading) {
    background: #f3f4f6;
}

/* shimmer layer ONLY when loading */
.shimmer-box:has(.dash-loading)::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );

    animation: shimmer 1.2s infinite;
    z-index: 2;
}

/* animation */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* hide graph while loading */
.shimmer-box .dash-loading .dash-graph {
    opacity: 0;
}
/* popup container */
.dash-dropdown-content {
    max-height: 260px !important;
    overflow: hidden !important;
}

/* options scroll only */
.dash-options-list {
    max-height: 180px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* keep search/buttons visible */
.dash-dropdown-search-container,
.dash-dropdown-actions {
    background: white;
    position: sticky;
    z-index: 2;
}

.dash-dropdown-search-container {
    top: 0;
}

.dash-dropdown-actions {
    top: 52px;
}

.mode-switch-container{

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 4px;
}

.mode-switch-btn{

    display:flex;
    align-items:center;
    gap:6px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    color:#6B7280;

    padding:6px 2px;

    transition:all 0.2s ease;

    position:relative;
}

.mode-switch-btn:hover{

    color:#7C3AED;
}

.mode-switch-btn svg{

    width:14px;
    height:14px;
}

.active-mode{

    color:#7C3AED;
}

.active-mode::after{

    content:"";

    position:absolute;

    bottom:-6px;
    left:0;

    width:100%;
    height:2px;

    background:#7C3AED;

    border-radius:2px;
}

.mode-divider{

    width:1px;
    height:18px;

    background:#D1D5DB;
}
.dash-spinner {
    margin: auto;
}

._dash-loading {
    width: 100%;
}
.js-plotly-plot {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.plot-container {
    will-change: transform;
}
#kpi_cards {
    position: relative;
}

/* Fade cards slightly while loading */
#kpi_cards[data-dash-is-loading="true"] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Loader container */
#kpi_cards[data-dash-is-loading="true"]::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 40px;
    height: 24px;

    transform: translate(-50%, -50%);

    z-index: 999;

    background-repeat: no-repeat;

    background-image:
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0);

    background-size:
        5px 100%,
        5px 100%,
        5px 100%,
        5px 100%,
        5px 100%;

    background-position:
        0 100%,
        10px 100%,
        20px 100%,
        30px 100%,
        40px 100%;

    animation: pulse-bars 1s infinite linear;
}

@keyframes pulse-bars {

    0% {
        background-size:
            5px 20%,
            5px 40%,
            5px 60%,
            5px 80%,
            5px 100%;
    }

    50% {
        background-size:
            5px 100%,
            5px 80%,
            5px 60%,
            5px 40%,
            5px 20%;
    }

    100% {
        background-size:
            5px 20%,
            5px 40%,
            5px 60%,
            5px 80%,
            5px 100%;
    }
}
.pulse-loader {

    width: 50px;
    height: 24px;

    background-repeat: no-repeat;

    background-image:
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0),
        linear-gradient(#7c3aed 0 0);

    background-size:
        5px 100%,
        5px 100%,
        5px 100%,
        5px 100%,
        5px 100%;

    background-position:
        0 100%,
        10px 100%,
        20px 100%,
        30px 100%,
        40px 100%;

    animation: pulse-bars 1s infinite linear;
}

@keyframes pulse-bars {

    0% {
        background-size:
            5px 20%,
            5px 40%,
            5px 60%,
            5px 80%,
            5px 100%;
    }

    50% {
        background-size:
            5px 100%,
            5px 80%,
            5px 60%,
            5px 40%,
            5px 20%;
    }

    100% {
        background-size:
            5px 20%,
            5px 40%,
            5px 60%,
            5px 80%,
            5px 100%;
    }
}
@media (max-width: 1100px) {

    .kpi-section {
        flex-direction: column !important;
    }

    .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .chart-row {
        grid-template-columns: 1fr !important;
    }

    /* preserve KPI proportions */
    .kpi-card {
        max-width: 760px;
        margin: 0 auto;
    }

}
@media (max-width: 1100px) {

    .kpi-body {

        /* grid-template-columns: auto 260px !important; */

        justify-content: space-between;
        align-items: center;

        gap: 12px !important;
    }

}
@media (max-width: 1100px) {

    .kpi-body {

        align-items: start !important;

    }

    .kpi-card {

        padding-top: 16px !important;
        padding-bottom: 16px !important;

    }

}
@media (max-width: 1100px) {

    /* KPI donut wrapper */
    .kpi-donut .js-plotly-plot,
    .kpi-donut .plot-container,
    .kpi-donut .svg-container {

        height: 220px !important;
        max-height: 220px !important;
    }

    /* actual graph */
    .kpi-donut .dash-graph {

        height: 220px !important;
    }

    /* tighten KPI body */
    .kpi-body {

        align-items: center !important;
        min-height: unset !important;
    }

}
/* =========================
   CLEAN TABLET KPI FIX
========================= */

@media (max-width: 1100px) {

    .kpi-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .chart-row {
        grid-template-columns: 1fr !important;
    }

    .kpi-card {
        max-width: 760px;
        margin: 0 auto;
        height: auto !important;
    }

    .kpi-body {
        grid-template-columns: 1fr 220px !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .kpi-donut .dash-graph {
        height: 180px !important;
    }

}
@media (max-width: 1100px) {

    .kpi-donut .dash-graph {
        height: 140px !important;
        width: 140px !important;
    }

}
/* ===================================
   TABLET CHART RESPONSIVENESS
=================================== */

@media (max-width: 1100px) {

    /* ALL PLOTLY WRAPPERS */
    .js-plotly-plot,
    .plot-container,
    .svg-container {

        width: 100% !important;
        max-width: 100% !important;
    }

    /* DASH GRAPH */
    .dash-graph {

        width: 100% !important;
    }

    /* CARD OVERFLOW FIX */
    .card,
    .chart-card {

        overflow-x: hidden !important;
    }

}
/* ===================================
   TABLET DETAILED DASHBOARD
=================================== */

@media (max-width: 1100px) {

    /* MAIN FLEX CONTAINER */
    div[style*="gap': '24px"],
    div[style*='gap: 24px'] {

        flex-direction: column !important;
    }

    /* LEFT COLUMN */
    div[style*="width': '65%'"],
    div[style*='width: 65%'] {

        width: 100% !important;
        max-width: 100% !important;
    }

    /* RIGHT COLUMN */
    div[style*="width': '35%'"],
    div[style*='width: 35%'] {

        width: 100% !important;
        max-width: 100% !important;
    }

}
/* ===================================
   TABLET POLLCODE FIX
=================================== */

@media (max-width: 1100px) {

    #pollcode_chart,
    #bonus_chart {

        min-height: 420px !important;
        height: auto !important;
    }

    #pollcode_chart .js-plotly-plot,
    #bonus_chart .js-plotly-plot,

    #pollcode_chart .plot-container,
    #bonus_chart .plot-container,

    #pollcode_chart .svg-container,
    #bonus_chart .svg-container {

        min-height: 420px !important;
        height: auto !important;
    }

}
/* =========================================
   FINAL MOBILE RESPONSIVE FIX
========================================= */

@media screen and (max-width: 480px) {

    /* PAGE */
    body {
        overflow-x: hidden !important;
    }

    /* HEADER */
/* MOBILE HEADER ONLY */
    .header > .page-container.header-inner {

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px !important;
    }

    /* TITLE */
    #page_title {

        font-size: 22px !important;
        line-height: 1.2 !important;

        word-break: break-word !important;
    }

    /* TOGGLE */
    .tab-wrapper {

        width: 100% !important;

        display: flex !important;
        justify-content: flex-start !important;
    }

    /* PERFORMANCE SNAPSHOT */
    .kpi-row {

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;
    }

    /* KPI CARD */
    .kpi-card {

        width: 100% !important;

        padding: 16px !important;

        min-height: auto !important;
        height: auto !important;
    }

    /* INTERNAL CARD LAYOUT */
    .kpi-body {

        display: block !important;
    gap: 18px !important;
        }

    /* KPI VALUE */
    .kpi-value {

        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    /* BREAKDOWN */
    .kpi-breakdown {

        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 12px !important;
    }

    /* DONUT */
    .kpi-donut {

        width: 100% !important;

        display: flex !important;
        justify-content: center !important;
    }

    .kpi-donut .dash-graph {

        width: 130px !important;
        height: 130px !important;
    }

    /* FILTERS */
    .filters-card {

        width: 100% !important;
    }

    /* DETAILED DASHBOARD */
    div[style*="width: 65%"],
    div[style*="width: 35%"] {

        width: 100% !important;
        max-width: 100% !important;
    }
    /* KPI LEFT CONTENT */
.kpi-left {

    width: 100% !important;
}

/* DONUT BELOW CONTENT */
.kpi-donut {

    width: 100% !important;

    display: flex !important;
    justify-content: center !important;

    margin-top: 18px !important;
}  

}
/* =========================================
   MOBILE FINAL FIX
========================================= */

@media screen and (max-width: 480px) {

    /* KPI SECTION */
    #forecast_hide_section {

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;
    }

    /* KPI CARD */
    .kpi-card {

        width: 100% !important;

        min-height: auto !important;
        height: auto !important;
    }

    /* INTERNAL KPI LAYOUT */
    .kpi-body {

        display: flex !important;
        flex-direction: column !important;

        gap: 18px !important;
    }

    /* DONUT BELOW */
    .kpi-donut {

        width: 100% !important;

        display: flex !important;
        justify-content: center !important;

        margin-top: 12px !important;
    }

    /* SMALL DONUT */
    .kpi-donut .dash-graph {

        width: 120px !important;
        height: 120px !important;
    }

    /* BREAKDOWN */
    .kpi-breakdown {

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 10px !important;
    }

}
/* =========================================
   TABLET + MOBILE TAB FIX
========================================= */

@media screen and (max-width: 768px) {

    .tab-wrapper {

        transform: none;
        transform-origin: left center;

        width: fit-content !important;

        margin-top: 6px !important;
    }

}
/* ========================================
   DROPDOWN PANEL
======================================== */

.dash-dropdown-content {

    border-radius: 14px !important;

    border: 1px solid #E5E7EB !important;

    background: white !important;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.04) !important;
}


/* ========================================
   SEARCH CONTAINER
======================================== */

.dash-dropdown-search-container {

    padding: 6px 10px !important;

    border-bottom: 1px solid #F3F4F6 !important;

    background: white !important;

    border: none !important;

    box-shadow: none !important;
}


/* ========================================
   SEARCH INPUT
======================================== */

.dash-dropdown-search {

    width: 100% !important;

    height: 32px !important;

    border-radius: 8px !important;

    border: 1px solid #D1D5DB !important;

    background: #FAFAFA !important;

    padding-left: 30px !important;

    font-size: 13px !important;

    color: #374151 !important;

    box-shadow: none !important;

    outline: none !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.dash-dropdown-search:focus {

    border-color: #A78BFA !important;

    background: white !important;

    box-shadow:
        0 0 0 2px rgba(124,58,237,0.08) !important;
}


/* ========================================
   SEARCH ICON
======================================== */

.dash-dropdown-search-icon {

    color: #9CA3AF !important;
}


/* ========================================
   ACTION BAR
======================================== */

.dash-dropdown-actions {

    display: flex;

    gap: 14px;

    padding: 8px 14px;

    border-bottom: 1px solid #F3F4F6;

    background: white;
}


/* ========================================
   ACTION BUTTONS
======================================== */

.dash-dropdown-action-button {

    border: none !important;

    background: transparent !important;

    color: #7C3AED !important;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    padding: 0 !important;

    transition: color 0.15s ease;
}

.dash-dropdown-action-button:hover {

    color: #5B21B6 !important;
}


/* ========================================
   OPTIONS LIST
======================================== */

.dash-dropdown-options {

    max-height: 220px;

    overflow-y: auto;

    background: white;
}


/* ========================================
   OPTION ROW
======================================== */

.dash-dropdown-option {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px !important;

    border-bottom: 1px solid #F9FAFB;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


/* ========================================
   OPTION HOVER
======================================== */

.dash-dropdown-option:hover {

    background:
        rgba(124,58,237,0.05);

    cursor: pointer;
}


/* ========================================
   CHECKBOX
======================================== */

.dash-options-list-option-checkbox {

    accent-color: #7C3AED;

    cursor: pointer;
}


/* ========================================
   OPTION TEXT
======================================== */

.dash-options-list-option-text {

    font-size: 13px;

    font-weight: 500;

    color: #374151;
}


/* ========================================
   SCROLLBAR
======================================== */

.dash-dropdown-options::-webkit-scrollbar {

    width: 5px;
}

.dash-dropdown-options::-webkit-scrollbar-thumb {

    background: #D1D5DB;

    border-radius: 999px;
}

.dash-dropdown-options::-webkit-scrollbar-track {

    background: transparent;
}
/* ========================================
   DATEPICKER POPOVER
======================================== */

[data-radix-popper-content-wrapper] {

    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.10),
        0 4px 12px rgba(0,0,0,0.05) !important;
}


/* ========================================
   CALENDAR PANEL
======================================== */

.dash-datepicker-calendar,
.dash-datepicker-content {

    border-radius: 18px !important;

    overflow: hidden !important;

    border: 1px solid #E5E7EB !important;

    background: white !important;
}
@media screen and (max-width: 1024px) {

    /* KPI BREAKDOWN ROW */

    #top_section div[style*="justify-content: space-between"][style*="margin-top: 10px"] {

        flex-wrap: wrap !important;

        row-gap: 8px !important;

        column-gap: 14px !important;
    }


    /* KPI ITEMS */

    #top_section div[style*="justify-content: space-between"][style*="margin-top: 10px"] > div {

        min-width: 90px !important;
    }


    /* MAIN KPI VALUE */

    #top_section h1 {

        font-size: 30px !important;

        line-height: 1.15 !important;
    }
}
/* ========================================
   DETAILED KPI VALUE FIX
======================================== */

.card-hover h3 {

    font-size: clamp(15px, 1vw, 20px) !important;

    line-height: 1.1 !important;

    white-space: nowrap !important;
}


/* HERO CARD */

#kpi_row > div:first-child h1 {

    font-size: clamp(26px, 2vw, 42px) !important;

    line-height: 1.1 !important;

    white-space: nowrap !important;
}
/* ========================================
   PLOTLY RESPONSIVE FIX
======================================== */

.js-plotly-plot,
.plot-container,
.svg-container {

    width: 100% !important;

    max-width: 100% !important;
}


/* actual chart svg */

.main-svg {

    width: 100% !important;
}
/* ========================================
   REMOVE EXTRA CHART WHITESPACE
======================================== */

.shimmer-box {

    display: flex;

    flex-direction: column;

    justify-content: flex-start !important;
}


/* graph area */

.js-plotly-plot {

    margin-bottom: 0 !important;
}
/* ========================================
   POLLCODE CHART ONLY
======================================== */

#pollcode_chart {

    height: 100% !important;
}


/* scroll wrapper only */

#pollcode_chart .js-plotly-plot {
    min-height: 560px !important;
}
/* ========================================
   OVERALL KPI PERFECT BALANCE FIX
======================================== */

#top_section div[style*="justify-content: space-between"][style*="margin-top: 10px"] {

    gap: 12px !important;
}


/* each metric */

#top_section div[style*="justify-content: space-between"][style*="margin-top: 10px"] > div {

    flex: 1 1 0 !important;

    min-width: 85px !important;

    max-width: 120px !important;
}


/* metric values */

#top_section p[style*="font-weight: 500"] {

    font-size: 13px !important;

    white-space: nowrap !important;
}
/* spacing between mini KPIs */

#top_section div[style*="justify-content: space-between"][style*="margin-top: 10px"] {

    gap: 18px !important;
}
/* ========================================
   DROPDOWN CLIPPING FIX
======================================== */

.filter-panel,
.section-box,
.card,
.kpi-card {

    overflow: visible !important;
}

/* dropdown portal */

.dash-dropdown-content {

    overflow: visible !important;

    z-index: 99999 !important;
}

/* radix/popper wrapper */

[data-radix-popper-content-wrapper] {

    z-index: 999999 !important;
}
/* =====================================
   DROPDOWN MENU VISUAL FIX
===================================== */

.Select-menu-outer {

    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.08) !important;

    border: 1px solid #E5E7EB !important;
}

/* option container */

.VirtualizedSelectOption {

    border-bottom: none !important;
}

/* remove clipping */

.VirtualizedSelectGrid {

    overflow: visible !important;
}
/* =========================================
   DATE PICKER OVERLAY FIX
========================================= */

.DateRangePicker_picker {

    z-index: 99999 !important;
}

.DateRangePicker_picker__portal {

    z-index: 99999 !important;
}

/* CRITICAL FIX */

.DayPicker {

    overflow: hidden !important;
}

/* prevent overlay trapping */

.DateRangePicker {

    overflow: visible !important;
}

/* restore click handling */

.DayPicker_transitionContainer {

    overflow: hidden !important;
}

/* IMPORTANT */

.CalendarMonthGrid {

    overflow: hidden !important;
}
.Select-menu-outer {
    overflow: visible !important;
}
.Select {
    overflow: visible !important;
}
.header-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;
}
.header-export-btn{

    background:#FFFFFF;

    color:#1F2937;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:0 18px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:all 0.2s ease;

    white-space:nowrap;
}
.header-export-btn:hover{

    background:#F8FAFC;

    border-color:#C7D2FE;

    color:#5B4DF6;
}
.header-export-btn:active{

    transform: scale(0.97);
}
.Select-menu-outer{

    z-index: 9999 !important;
}
.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;
    gap: 16px;
}

.header-left{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

    flex:1;
}
@media screen and (min-width:768px) and (max-width:1024px){

    #page_title{

        font-size:22px !important;
    }

    .header-export-btn{

        height:36px !important;

        padding:0 14px !important;

        font-size:12px !important;
    }

    .tab-wrapper{

        height:40px;

        padding:4px;

        border-radius:12px;
    }

    .tab-link{

        font-size:14px;

        padding:8px 18px;
    }
}