/* =========================================================
   ISF-MIS — BOOTSTRAP 5 DARK THEME
   ========================================================= */

:root {
    /* Bootstrap 5 dark palette */
    --iis-body-bg: #212529;
    --iis-surface: #2b3035;
    --iis-surface-2: #343a40;
    --iis-surface-3: #3d4246;

    --iis-text: #f8f9fa;
    --iis-text-secondary: #adb5bd;
    --iis-text-muted: #8b949e;

    --iis-border: #495057;
    --iis-border-soft: rgba(255, 255, 255, .10);

    /* ISF-MIS blue */
    --iis-blue: #0d6efd;
    --iis-blue-dark: #0a58ca;
    --iis-blue-light: rgba(13, 110, 253, .15);
    --iis-blue-hover: #3d8bfd;

    --iis-navy: #f8f9fa;
    --iis-gray: #adb5bd;

    /* Status colors */
    --iis-green: #20c997;
    --iis-green-dark: #198754;
    --iis-green-bg: rgba(25, 135, 84, .16);

    --iis-orange: #fd7e14;
    --iis-orange-bg: rgba(253, 126, 20, .16);

    /* Bootstrap-style focus */
    --iis-focus: rgba(13, 110, 253, .25);
}


/* =========================================================
   BODY
========================================================= */

html,
body {
    background-color: var(--iis-body-bg);
}

body {
    margin: 0;

    background: var(--iis-body-bg);

    color: var(--iis-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   BOOTSTRAP DARK THEME
========================================================= */

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-color: #f8f9fa;
    --bs-body-color-rgb: 248, 249, 250;

    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;

    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: rgba(255, 255, 255, .75);
    --bs-secondary-color-rgb: 255, 255, 255;

    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;

    --bs-tertiary-color: rgba(255, 255, 255, .5);
    --bs-tertiary-color-rgb: 255, 255, 255;

    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;

    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, .15);

    --bs-heading-color: #f8f9fa;

    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
}


/* =========================================================
   NAVBAR
========================================================= */

.iis-navbar {

    height: 70px;
    width: 100%;

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

    padding: 0 28px;

    background:
        linear-gradient(
            180deg,
            #2b3035 0%,
            #212529 100%
        );

    border-bottom: 1px solid var(--iis-border-soft);

    box-shadow:
        0 2px 12px rgba(0, 0, 0, .35);

    position: relative;

    z-index: 1000;
}


/* =========================================================
   BLUE TOP ACCENT
========================================================= */

.iis-navbar::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #084298,
            #0d6efd,
            #38bdf8,
            #0d6efd,
            #084298
        );
}


/* =========================================================
   BRAND
========================================================= */

.iis-brand {

    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* =========================================================
   LOGO
========================================================= */

.iis-logo-wrap {

    width: 60px;
    height: 60px;

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

    background: #fff;

    border-radius: 13px;

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .30);

    overflow: hidden;

    position: relative;
}


.iis-logo-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(13, 110, 253, .08),
            transparent
        );

    pointer-events: none;
}


.iis-logo {

    width: 50px;
    height: 50px;

    object-fit: contain;

    position: relative;

    z-index: 1;
}


/* =========================================================
   BRAND TEXT
========================================================= */

.iis-brand-info {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.iis-brand-title {

    color: #f8f9fa;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -.02em;

    line-height: 1.1;
}


.iis-brand-subtitle {

    color: #adb5bd;

    font-size: 15px;

    margin-top: 5px;

    letter-spacing: .015em;

    white-space: nowrap;
}


.brand-divider {

    color: #6c757d;

    margin: 0 5px;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.iis-nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   PUBLIC DASHBOARD STATUS
========================================================= */

.public-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    background: rgba(25, 135, 84, .14);

    border: 1px solid rgba(32, 201, 151, .22);

    border-radius: 30px;

    color: #75b798;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .035em;
}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #20c997;

    box-shadow:
        0 0 0 3px rgba(32, 201, 151, .15);

    animation: statusPulse 2s infinite;
}


@keyframes statusPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(32, 201, 151, .30);
    }

    70% {
        box-shadow:
            0 0 0 5px rgba(32, 201, 151, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(32, 201, 151, 0);
    }
}


/* =========================================================
   STAFF PORTAL
========================================================= */

.staff-portal {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 165px;

    padding: 6px 9px 6px 7px;

    border-radius: 13px;

    color: #fff !important;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #0d6efd 0%,
            #0b5ed7 45%,
            #084298 100%
        );

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow:
        0 5px 14px rgba(11, 94, 215, .28);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


.staff-portal:hover {

    color: #fff !important;

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 9px 22px rgba(11, 94, 215, .38);
}


.staff-portal:active {
    transform: translateY(0);
}


.staff-icon {

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .16);

    border:
        1px solid rgba(255, 255, 255, .18);

    font-size: 15px;
}


.staff-content {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

    flex: 1;
}


.staff-title {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .01em;
}


.staff-subtitle {

    font-size: 8px;

    margin-top: 4px;

    opacity: .72;

    text-transform: uppercase;

    letter-spacing: .07em;
}


.staff-arrow {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 7px;

    background:
        rgba(255, 255, 255, .10);

    font-size: 11px;

    transition:
        transform .2s ease,
        background .2s ease;
}


.staff-portal:hover .staff-arrow {

    transform:
        translate(2px, -2px);

    background:
        rgba(255, 255, 255, .18);
}


/* =========================================================
   ABOUT BUTTON
========================================================= */

.about-button {

    display: inline-flex;

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

    gap: 7px;

    height: 43px;

    padding: 0 14px;

    border-radius: 11px;

    background: #2b3035;

    border: 1px solid #495057;

    color: #ced4da;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    transition:
        all .2s ease;
}


.about-button i {

    font-size: 15px;

    color: #6ea8fe;
}


.about-button:hover {

    color: #fff;

    border-color: #6ea8fe;

    background: #343a40;

    box-shadow:
        0 4px 12px rgba(13, 110, 253, .18);

    transform: translateY(-1px);
}


/* =========================================================
   TOP NAVIGATION
========================================================= */

.topbar {

    height: 72px;

    background: #212529;

    border-bottom: 1px solid var(--iis-border);

    position: relative;

    z-index: 1000;
}




.public-badge {

    background:
        rgba(13, 110, 253, .16);

    color: #6ea8fe;

    font-size: 11px;

    font-weight: 700;

    padding: 6px 10px;

    border-radius: 20px;
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard {

    height: calc(100vh - 72px);

    min-height: 650px;

    overflow: hidden;

    background: #212529;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

    width: 390px;

    background: #2b3035;

    border-right: 1px solid var(--iis-border);

    overflow-y: auto;

    z-index: 20;
}


.sidebar-content {

    padding: 24px;
}


/* =========================================================
   DASHBOARD TITLE
========================================================= */

.dashboard-title {

    font-size: 24px;

    font-weight: 800;

    color: #f8f9fa;

    margin-bottom: 4px;
}


.dashboard-description {

    font-size: 13px;

    line-height: 1.6;

    color: #adb5bd;
}


/* =========================================================
   STAT CARDS
========================================================= */

.stat-card {

    border: 1px solid #495057;

    border-radius: 14px;

    background: #343a40;

    padding: 16px;

    height: 100%;

    transition: .2s ease;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .12);
}


.stat-card:hover {

    border-color: #5c636a;

    background: #383e44;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .18);
}


.stat-icon {

    width: 38px;
    height: 38px;

    border-radius: 10px;

    display: flex;

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

    font-size: 17px;

    margin-bottom: 12px;
}


.icon-blue {

    background:
        rgba(13, 110, 253, .16);

    color: #6ea8fe;
}


.icon-orange {

    background:
        rgba(253, 126, 20, .16);

    color: #ffb26b;
}


.icon-green {

    background:
        rgba(25, 135, 84, .16);

    color: #75b798;
}


.stat-label {

    font-size: 12px;

    color: #adb5bd;

    margin-bottom: 4px;
}


.stat-value {

    font-size: 25px;

    font-weight: 800;

    color: #f8f9fa;
}


.stat-change {

    font-size: 11px;

    color: #75b798;

    margin-top: 3px;
}


/* =========================================================
   FILTERS
========================================================= */

.section-title {

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .05em;

    color: #ced4da;

    margin-bottom: 14px;
}


.form-label {

    font-size: 12px;

    font-weight: 600;

    color: #adb5bd;
}


.form-select,
.form-control {

    border-radius: 9px;

    border-color: #495057;

    background-color: #212529;

    color: #f8f9fa;

    font-size: 13px;

    padding: 9px 12px;
}


.form-control::placeholder {

    color: #6c757d;
}


.form-select:focus,
.form-control:focus {

    background-color: #212529;

    color: #fff;

    border-color: #6ea8fe;

    box-shadow:
        0 0 0 .2rem rgba(13, 110, 253, .20);
}


.form-select option {

    background: #212529;

    color: #f8f9fa;
}


/* =========================================================
   TOM SELECT — BARANGAY FILTER
========================================================= */

#barangayFilter + .ts-wrapper {

    width: 100%;
}


#barangayFilter + .ts-wrapper .ts-control {

    min-height: 40px;

    background-color: #212529 !important;

    background-image: none !important;

    border: 1px solid #495057 !important;

    border-radius: 9px !important;

    box-shadow: none !important;

    color: #f8f9fa !important;

    opacity: 1 !important;

    font-size: 13px;

    padding: 8px 12px;
}


#barangayFilter + .ts-wrapper .ts-control input {

    color: #f8f9fa !important;

    background: transparent !important;
}


#barangayFilter + .ts-wrapper .ts-control input::placeholder {

    color: #8b949e !important;

    opacity: 1 !important;
}


#barangayFilter + .ts-wrapper .ts-control .item {

    color: #f8f9fa !important;

    background: transparent !important;
}


/* Focus */

#barangayFilter + .ts-wrapper.focus .ts-control {

    border-color: #6ea8fe !important;

    box-shadow:
        0 0 0 .2rem rgba(13, 110, 253, .20) !important;
}


/* Dropdown */

#barangayFilter + .ts-wrapper .ts-dropdown {

    background: #2b3035 !important;

    border: 1px solid #495057 !important;

    border-radius: 9px !important;

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

    color: #f8f9fa !important;

    z-index: 9999 !important;
}


#barangayFilter + .ts-wrapper .ts-dropdown .option {

    background: #2b3035 !important;

    color: #ced4da !important;

    font-size: 13px;

    padding: 9px 12px;
}


#barangayFilter + .ts-wrapper .ts-dropdown .option:hover,
#barangayFilter + .ts-wrapper .ts-dropdown .active {

    background: rgba(13, 110, 253, .16) !important;

    color: #6ea8fe !important;
}


/* Selected item */

#barangayFilter + .ts-wrapper .ts-dropdown .selected {

    background: rgba(13, 110, 253, .20) !important;

    color: #9ec5fe !important;
}


/* Clear button */

#barangayFilter + .ts-wrapper .clear-button {

    color: #adb5bd !important;
}


#barangayFilter + .ts-wrapper .clear-button:hover {

    color: #fff !important;
}


/* =========================================================
   LEGEND
========================================================= */

.legend {

    border: 1px solid #495057;

    background: #343a40;

    border-radius: 12px;

    padding: 14px;
}


.legend-item {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 12px;

    color: #adb5bd;

    margin-bottom: 8px;
}


.legend-item:last-child {

    margin-bottom: 0;
}


.legend-color {

    width: 17px;

    height: 17px;

    border-radius: 4px;
}


/* =========================================================
   MAP
========================================================= */

.map-container {

    position: relative;

    flex: 1;

    min-width: 0;

    height: 100%;
}


#map {

    position: absolute;

    inset: 0;
}


.map-overlay {

    position: absolute;

    z-index: 10;

    top: 18px;

    left: 18px;

    right: 18px;

    pointer-events: none;
}


.map-search {

    width: 320px;

    pointer-events: auto;
}


.map-search .form-control {

    background:
        rgba(33, 37, 41, .96);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow:
        0 3px 15px rgba(0, 0, 0, .35);

    padding: 12px 14px;
}


.map-search .form-control::placeholder {

    color: #adb5bd;
}


 .map-info {
            position: absolute;
            right: 18px;
            top: 18px;
            background: rgba(255,255,255,.96);
            border-radius: 12px;
            padding: 12px 16px;
            box-shadow: 0 3px 15px rgba(0,0,0,.12);
            pointer-events: auto;
        }

        .map-info-title {
            font-size: 11px;
            color: #14171c;
        }

        .map-info-value {
            font-weight: 800;
            color: #102a43;
        }




 /* =========================
           MAP POPUP
        ========================== */

        .popup-card {
            min-width: 250px;
        }

        .popup-title {
            font-size: 16px;
            font-weight: 800;
            color: #102a43;
            margin-bottom: 3px;
        }

        .popup-subtitle {
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 12px;
        }

        .popup-stat {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px solid #eef1f4;
            font-size: 12px;
            color:#102a43;
        }

        .popup-stat:last-child {
            border-bottom: 0;
        }

        .popup-stat strong {
            color: #102a43;
        }




/* =========================================================
   PRIVACY NOTICE
========================================================= */

.privacy-notice {

    font-size: 12px;

    line-height: 1.7;

    color: #8b949e;

    padding-top: 18px;

    border-top: 1px solid #495057;

    margin-top: 22px;
}


/* =========================================================
   SCROLLBAR — DARK
========================================================= */

.sidebar::-webkit-scrollbar {

    width: 7px;
}


.sidebar::-webkit-scrollbar-track {

    background: #212529;
}


.sidebar::-webkit-scrollbar-thumb {

    background: #495057;

    border-radius: 10px;
}


.sidebar::-webkit-scrollbar-thumb:hover {

    background: #5c636a;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

    .iis-brand-subtitle {

        display: none;
    }
}


@media (max-width: 991px) {

    .dashboard {

        height: auto;

        overflow: visible;
    }


    .sidebar {

        width: 100%;

        border-right: 0;
    }


    .map-container {

        height: 600px;

        min-height: 600px;
    }


    .map-search {

        width: calc(100% - 36px);
    }


    .map-info {

        display: none;
    }
}


@media (max-width: 800px) {

    .iis-navbar {

        height: 68px;

        padding: 0 16px;
    }


    .iis-logo-wrap {

        width: 43px;

        height: 43px;
    }


    .iis-logo {

        width: 38px;

        height: 38px;
    }


    .iis-brand-title {

        font-size: 15px;
    }


    .public-status span:not(.status-dot) {

        display: none;
    }


    .public-status {

        width: 32px;

        height: 32px;

        justify-content: center;

        padding: 0;
    }


    .staff-portal {

        min-width: 43px;

        width: 43px;

        height: 43px;

        padding: 4px;

        justify-content: center;
    }


    .staff-content,
    .staff-arrow {

        display: none;
    }


    .staff-icon {

        width: 33px;

        height: 33px;
    }


    .about-button span {

        display: none;
    }


    .about-button {

        width: 43px;

        justify-content: center;

        padding: 0;
    }
}


@media (max-width: 480px) {

    .iis-navbar {

        padding: 0 11px;
    }


    .iis-nav-actions {

        gap: 5px;
    }


    .iis-brand {

        gap: 8px;
    }


    .iis-logo-wrap {

        width: 39px;

        height: 39px;

        border-radius: 10px;
    }


    .iis-logo {

        width: 34px;

        height: 34px;
    }


    .iis-brand-title {

        font-size: 14px;
    }
}