:root {

    --primary: #012471;
    --primary-dark: #0A1F44;
    --accent: #DC4226;

    --bg: #F5F7FB;
    --card: #FFFFFF;

    --text: #111827;
    --text-light: #6B7280;

    --border: #E5E7EB;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow:
        0 4px 20px rgba(0,0,0,.06);

    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 20px;

}


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

.mobile-menu-btn {

    display: none;

}


.sidebar-overlay {

    display: none;

}


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

@media (max-width: 768px) {


    /* -----------------------------------------
       HAMBURGER BUTTON
    ----------------------------------------- */

    .mobile-menu-btn {

        display: flex;

        position: fixed;

        top: 14px;
        left: 14px;

        width: 42px;
        height: 42px;

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

        border: none;
        border-radius: 10px;

        background: #012471;

        color: #ffffff;

        font-size: 18px;

        cursor: pointer;

        z-index: 99999;

        box-shadow:
            0 5px 15px rgba(1, 36, 113, 0.25);

    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .sidebar {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 270px !important;
        height: 100vh !important;

        z-index: 99998 !important;

        transform:
            translateX(-110%) !important;

        transition:
            transform 0.3s ease !important;

        overflow-y: auto !important;

        box-shadow:
            8px 0 25px rgba(0,0,0,0.18);

    }


    /* -----------------------------------------
       SIDEBAR OPEN
    ----------------------------------------- */

    .sidebar.mobile-sidebar-open {

        transform:
            translateX(0) !important;

    }


    /* -----------------------------------------
       DARK OVERLAY
    ----------------------------------------- */

    .sidebar-overlay {

        display: block;

        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        background:
            rgba(0,0,0,0.45);

        z-index: 99997;

        opacity: 0;

        visibility: hidden;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

    }


    /* -----------------------------------------
       OVERLAY ACTIVE
    ----------------------------------------- */

    .sidebar-overlay.active {

        opacity: 1;

        visibility: visible;

    }


    /* -----------------------------------------
       MAIN CONTENT
    ----------------------------------------- */

    .main-content {

        margin-left: 0 !important;

        width: 100% !important;

    }


    /* -----------------------------------------
       MOBILE HEADER SPACE
    ----------------------------------------- */

    .user-page-header {

        padding-left: 70px !important;

    }

}

/* COMMON LIVE DATE & TIME - ALL PORTAL PAGES */

.dashboard-live-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 205px;
    min-width: 205px;
    max-width: 205px;
    flex: 0 0 205px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

#dashboardLiveDate,
#dashboardLiveTime {
    display: inline-block;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

#dashboardLiveDate {
    width: 78px;
    text-align: center;
}

#dashboardLiveTime {
    width: 78px;
    text-align: center;
}