/* ==========================================================================
GLOBAL CANVAS & LAYOUT THEME OVERRIDES
========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100%;
    background-color: #ffffff; /* Deep sci-fi dashboard backing base */
    color: #000000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
    /* background-image: url("https://ndma.gov.pk/assets/img/hero.png"); */
    /* background-attachment: fixed; */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
}

/* Base structural container spacing tweak */
.container-fluid {
    background: rgb(255, 255, 255) !important;
}
.top-nav-bar {
    background: rgba(254, 255, 255, 0.815) !important
}
.btn-dark-active{
    background-color:#576aff !important; 
    color:#fff !important; 
    font-weight:600 !important;
}
.btn-outline-dark-inactive{
    background-color:rgb(255, 255, 255) !important; 
    color: #000000 !important;
    border: 1px solid #576aff !important; 
}
.style-title {
    font-weight: 700;
    letter-spacing: 1px;

    background: linear-gradient(
        to right,
        #21c6ff 0%,
        #2d9cff 25%,
        #4b74ff 50%,
        #7a4dff 75%,
        #ff3b8d 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.btn-cyan{
    background-color:#576aff; 
    color:#fff; 
    font-weight:600;
}
.btn-reset{
    background-color:rgb(255, 255, 255); 
    color: #000000;
    border: 1px solid #576aff;    
}
/* ==========================================================================
HIGH-TECH GLASSMORPHIC PANEL WRAPPER
========================================================================== */
.glass-panel.high-tech-border {
    /* background: rgb(255, 255, 255) !important; */
    /* backdrop-filter: blur(6px) !important; */
    /* -webkit-backdrop-filter: blur(20px) !important; */
    /* border: 1px solid #3fe0c5 !important; Striking thin neon cyan line */
    border-radius: 12px !important;
    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(63, 224, 197, 0.15), 
                inset 0 0 12px rgba(63, 224, 197, 0.05) !important; */
    /* padding: 24px 20px; */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

/* .glass-panel.high-tech-border:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.7), 
                0 0 25px rgba(63, 224, 197, 0.25) !important;
} */

/* Panel Header Typography */
.panel-main-header {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000000;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
METRIC BANNER STRIPS & VALUE COUNT BADGES
========================================================================== */
.metric-summary-strip {
    /* background: #ffffff3d; */
    /* border: 1px solid rgba(63, 224, 197, 0.15); */
    border-radius: 10px;
    padding: 16px;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
    box-shadow: 0 0 11px rgb(0 150 136 / 26%) !important;
}

.metric-summary-strip-left {
    border-left: 3px solid #dc4236;
    background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(151 179 253 / 91%)), url(/mazer/static/images/icons/bg1.png);
}
.metric-summary-strip-right{
    border-left: 3px solid #fb6a00;
    background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 157 157 / 97%)), url(/mazer/static/images/icons/bg2.png);
}

.metric-main-title {
    /* font-size: 15px; */
    /* font-weight: 600; */
    /* color: #ffffff; */
    margin: 0;
}
.relief-total{
    font-size: 20px;
}

.metric-sub-date {
    /* font-size: 0.85rem; */
    color: #000;
    /* background: rgba(63, 224, 197, 0.1); */
    /* border: 1px solid rgba(63, 224, 197, 0.2); */
    padding: 1px 25px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}
.metric-sub-date-left{
    background: #ff00001f;
}
.metric-sub-date-right{
    background: #fb6a0052;
}

.head-icon-graphic {
    height: 90px;
    width: auto;
    object-fit: contain;
}
.death{
    background: #ff00001f;
    border-radius: 58px;
    border: 1px solid #ff000078;
}
.injuri{
    background: #fb6a0052;
    border-radius: 58px;
    border: 1px solid #fb6a00;
}
/* Counter Badges Wrapper Alignment */
.badge-value-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

/* High contrast display boxes */
.value-display-box {
    /* background: rgba(14, 28, 33, 0.85); */
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 1.05rem;
    font-weight: 500;
    /* color: #e2e8f0; */
    min-width: 170px;
    text-align: center;
    box-shadow: 0 0px 3px rgb(119 130 135 / 63%);
}

/* Color theme parameters for metric groups */
.deceased-box { border: 1px solid #f5120d;background: #ffd4d3; }
.injured-box { border: 1px solid #FFC107;background: #feff8a; }
.cumulative-deceased-box { border: 1px solid #f5120d;background: #ffd4d3; }
.cumulative-injured-box { border: 1px solid #FFC107;background: #feff8a; }

/* Counter number typography strings */
.counter-num {
    font-size: 1.35rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.deceased-box .counter-num, 
.injured-box .counter-num { 
    color: #ff0000c9; 
    /* text-shadow: 0 0 8px rgba(63, 224, 197, 0.4); */
}
.cumulative-deceased-box .counter-num, 
.cumulative-injured-box .counter-num { 
    color: #fb6a00; 
    /* text-shadow: 0 0 8px rgba(229, 142, 60, 0.4); */
}

/* ==========================================================================
CHART COMPONENT ELEMENT HOUSING
========================================================================== */
.chart-container-box {
    /* background: #ffffff3d; */
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
    border-radius: 8px;
    padding: 12px 8px;
    height: 100%;
    box-shadow: 0 0 11px rgb(0 150 136 / 26%) !important;
}
.chart-container-box-left{
    border-left: 3px solid #673AB7
}
.chart-container-box-right{
    border-left: 3px solid #3efb55
}
.neon-divider {
    border-top: 1px solid rgb(2 60 51 / 47%);
    opacity: 1;
    margin: 20px 0;
}

.inner-section-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.icon_mf {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.inner_img {
    height: 30px;
}

/* Override ApexCharts internal label colors safely to fix dark visual leakage */
.apexcharts-canvas text {
    fill: #000 !important;
}
.apexcharts-tooltip-title,
.apexcharts-tooltip-text,
.apexcharts-tooltip-y-label,
.apexcharts-tooltip-y-value {
    color: #0b1519 !important;
}

/* ==========================================================================
DARK HIGH-TECH SCANNABLE DATA TABLES
========================================================================== */
.table-responsive.custom-scrollbar {
    max-height: 360px;
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #ffffff3d;
}

.table-dark-custom {
    margin-bottom: 0;
    /* background-color: transparent !important;
    color: #e2e8f0 !important; */
}

.table-dark-custom th {
    background-color: rgb(203 203 203 / 95%) !important;
    /* color: #3fe0c5 !important; */
    /* font-weight: 600; */
    /* font-size: 0.9rem; */
    /* border-color: rgba(255, 255, 255, 0.12) !important; */
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}
.table-dark-custom td {
    /* background-color: rgba(255, 255, 255, 0.01) !important; */
    /* border-color: #000 !important; */
    /* color: #cbd5e0 !important; */
    /* font-size: 0.95rem; */
    /* vertical-align: middle; */
}

.table-dark-custom tr:hover td {
    /* background-color: rgba(63, 224, 197, 0.06) !important; */
    /* color: #ffffff !important; */
}
.relief-item th{
    font-weight: 500;
    font-size: 10px;
}
.relief-item td{
    font-size: 11px;
}
.grand-total td{
    background-color: rgb(203 203 203 / 95%) !important;
}
/* Custom Webkit scroll tracking for tables */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(63, 224, 197, 0.35);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(63, 224, 197, 0.6);
}

/* ==========================================================================
MAP WRAPPER SHELLS & INTERACTIVE COMPONENT VECTOR GLOWS
========================================================================== */
.interactive-map-frame-box {
    border-radius: 8px;
    overflow: hidden;
    /* background: rgba(5, 12, 15, 0.5); */
    /* height: 88%; */
    /* min-height: 230px; */
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.death-map-glow { border: 1px solid rgba(251, 91, 106, 0.7); }
.injured-map-glow { border: 1px solid rgba(91, 144, 251, 0.7); }

.map-title-bar {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding: 6px 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.background-death { background: #fb5b6a; }
.background-injured { background: #5b90fb; }

.map-render-area {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
INLINE VECTOR 3D-MAP INTERACTION SPECS
========================================================================== */
.map-render-area svg {
    width: 100%;
    height: auto;
    max-height: 175px;
    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.6));
}

.map-render-area path {
    fill: #112429;
    stroke: #2bbfa7;
    stroke-width: 1.2;
    transition: fill 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                stroke-width 0.25s, 
                filter 0.25s;
}

/* High-tech area active interaction map feedback hover rules */
.map-render-area path:hover {
    fill: #1a3c45;
    stroke: #3fe0c5;
    stroke-width: 1.8;
    cursor: pointer;
    filter: brightness(1.2);
}
.spacer{
    margin-top: 45px;
}
.province-list {
    gap:6px; 
    /* max-width: 40%; */
}
@media (max-width: 576px) {
    .province-list {
        gap:6px; 
        /* max-width: 40%; */
    }
}
@media (max-width: 768px) {
    .province-list {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 5px;
    }

    /* .province-list a {
        white-space: nowrap;
        flex-shrink: 0;
    } */
    .form-filter{
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 5px;
    }
    .spacer{
        margin-top: 105px;
    }
    .value-display-box{
        min-width: 130px;
    }
}
    .donor-pill {
    display: inline-flex;
    align-items: center;
    padding: 0px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1.5px solid transparent;
    cursor: pointer;
    /* background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); */
    background: rgba(63, 224, 197, 0.1);
    color: #4a6fa5;
    /* color: #fff; */
    border-color: #3edcc2;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.donor-pill:hover {
    background: #3fe0c5;
    color: #000;
    border-color: #3fe0c5;
    box-shadow: 0 2px 6px rgba(80,120,220,0.15);
    transform: translateY(-1px);
}
.donor-pill-active {
    background: #3fe0c5;
    color: #000 !important;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(102,126,234,0.4);
    transform: translateY(-1px);
}
.donor-btn-group { align-items: center; }
.left-section{border-left: 3px solid #009688;}

    .province-punjab td {
      background-color:#f3e9ff; /* Light Blue */
    }

    .province-sindh td {
      background-color: #a1e7e599; /* Light Green */
    }

    .province-balochistan td {
      background-color: #e1e4ff !important; /* Light Yellow */
    }


    .province-kp td {
      background-color: #fce4ec!important; /* Light Pink */
    }

    .province-ajk td {
      background-color: #cafffa !important; /* Light Purple */
    }

    .province-gb td {
      background-color: #f3e5f5!important; /* Lilac */
    }

    .province-ict td {
      background-color: #f1f8e9!important; /* Pale Green */
    }
    .province-punjab {
      background-color:#f3e9ff !important; /* Light Blue */
    }

    .province-sindh {
      background-color: #a1e7e599 !important; /* Light Green */
    }

    .province-balochistan {
      background-color: #e1e4ff !important; /* Light Yellow */
    }


    .province-kp {
      background-color: #fce4ec!important; /* Light Pink */
    }

    .province-ajk {
      background-color: #cafffa !important; /* Light Purple */
    }

    .province-gb {
      background-color: #f3e5f5!important; /* Lilac */
    }

    .province-ict {
      background-color: #f1f8e9!important; /* Pale Green */
    }