@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Lato:wght@400;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

        :root {
            /* =====================================================================
               THEME COLOR — single source of truth for the panel's accent color.
               Change --theme-color (and the matching --theme-color-rgb) here and
               every themed element on the page updates automatically. The palette
               button in the top navbar can also change this live for the user,
               and remembers their choice in localStorage.
               ===================================================================== */
            --theme-color: #f97316;
            --theme-color-rgb: 249, 115, 22;
            --panel-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --panel-font-size: 14px;
            --panel-font-scale: 1;
        }

        html, body { height: 100%; }
        html { font-size: 16px; }
        body {
            font-family: var(--panel-font-family), sans-serif;
            font-size: var(--panel-font-size, 14px);
            font-weight: 400;
        }

        /* All normal controls inherit the selected panel font. */
        body, button, input, select, textarea, table, option, optgroup {
            font-family: var(--panel-font-family), sans-serif;
        }

        /* Themed, slim scrollbars everywhere (replaces the chunky default
           browser scrollbar) — width/colour follow the accent variable. */
        ::-webkit-scrollbar { width: 3px; height: 3px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background-color: rgba(var(--theme-color-rgb), 0.45); border-radius: 999px; }
        ::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--theme-color-rgb), 0.7); }
        html { scrollbar-width: thin; scrollbar-color: rgba(var(--theme-color-rgb), 0.45) transparent; }

        /* Theme-color driven utility classes (kept separate from Tailwind's
           built-in "orange" classes so the whole UI can be re-themed from
           the one CSS variable above). */
        .theme-bg { background-color: var(--theme-color); }
        .theme-text { color: var(--theme-color); }
        .theme-border { border-color: var(--theme-color); }
        .theme-bg-soft { background-color: rgba(var(--theme-color-rgb), 0.12); }
        .theme-border-soft { border-color: rgba(var(--theme-color-rgb), 0.35); }
        .theme-shadow { box-shadow: 0 10px 20px -8px rgba(var(--theme-color-rgb), 0.45); }

        /* Smooth Sidebar Transition */
        .sidebar-transition {
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
        }

        /* Nav icon/label pick up the accent color on hover, without touching
           Tailwind's dark:/hover: variants (those can't target custom classes). */
        .nav-link, .nav-dropdown-header { color: inherit; }
        .nav-link:hover i, .nav-dropdown-header:hover i,
        .nav-link:hover .nav-arrow, .nav-dropdown-header:hover .nav-arrow { color: var(--theme-color); }

        .subnav-link { color: #71717a; transition: color .15s ease; }
        .dark .subnav-link { color: #a1a1aa; }
        .subnav-link:hover { color: var(--theme-color); }
        .subnav-link i { font-size: calc(var(--panel-font-size) * 0.5); opacity: .55; }

        .user-menu-link { color: #52525b; transition: background-color .15s ease, color .15s ease; }
        .dark .user-menu-link { color: #d4d4d8; }
        .user-menu-link:hover { background-color: rgba(var(--theme-color-rgb), 0.12); color: var(--theme-color); }

        /* ---------------------------------------------------------------
           Collapsed-sidebar popovers: a floating panel for items that have
           a submenu, and a plain tooltip for single-link items.

           These are moved to <body> and shown/hidden purely through JS
           (see initSidebarPopovers below) rather than a CSS :hover
           combinator. Two reasons: the nav list scrolls (overflow-y: auto),
           which clips any absolutely-positioned child that pokes outside
           it — including these popovers; and the sidebar itself carries a
           CSS transform (for the slide-in/out), which silently becomes the
           containing block for any position:fixed descendant. Reparenting
           to <body> on hover sidesteps both problems.
           --------------------------------------------------------------- */
        .collapsed-dropdown {
            position: absolute;
            left: 100%;
            top: -6px;
            margin-left: 12px;
            min-width: 210px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-8px) scale(.97);
            transition: opacity .18s ease, transform .18s ease, visibility .18s;
            pointer-events: none;
        }
        .collapsed-dropdown::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 18px;
            width: 12px;
            height: 12px;
            background: inherit;
            border-left: 1px solid;
            border-bottom: 1px solid;
            border-color: inherit;
            transform: rotate(45deg);
        }
        .desktop-tooltip {
            position: absolute;
            left: 100%;
            top: 50%;
            margin-left: 12px;
            transform: translate(-8px, -50%) scale(.95);
            opacity: 0;
            visibility: hidden;
            transition: opacity .18s ease, transform .18s ease, visibility .18s;
            pointer-events: none;
            white-space: nowrap;
            z-index: 50;
        }
        /* JS toggles this class (instead of relying on :hover) so the popover
           still works correctly after being reparented to <body>. */
        .collapsed-dropdown.popover-visible,
        .desktop-tooltip.popover-visible {
            opacity: 1;
            visibility: visible;
            transform: translate(0, 0) scale(1);
            pointer-events: auto;
        }

        /* Collapsed-mode sidebar items center themselves and hide the
           expand-only chevron so only the icon shows. */
        .sidebar-collapsed .nav-dropdown-header,
        .sidebar-collapsed .single-nav { justify-content: center; }

        /* Hide the sidebar credit completely when the sidebar is collapsed. */
        .sidebar-collapsed .sidebar-footer {
            height: 0 !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            border-top-width: 0 !important;
            opacity: 0;
        }

        .sidebar-collapsed .sidebar-footer-text {
            display: none !important;
        }

        /* Selected sidebar menu: light/soft accent background instead of dark. */
        .nav-link.nav-selected,
        .nav-dropdown-header.nav-selected,
        .single-nav.nav-selected {
            background-color: rgba(var(--theme-color-rgb), 0.10) !important;
            color: var(--theme-color) !important;
            box-shadow: none !important;
        }

        .nav-link.nav-selected i,
        .nav-dropdown-header.nav-selected i,
        .single-nav.nav-selected i {
            color: var(--theme-color) !important;
        }

        .nav-link.nav-selected:hover,
        .nav-dropdown-header.nav-selected:hover,
        .single-nav.nav-selected:hover {
            background-color: rgba(var(--theme-color-rgb), 0.15) !important;
            color: var(--theme-color) !important;
        }

        /* Theme color swatch popover in the navbar — 4x4 grid, each circle
           filled at ~70% opacity so the picker itself reads soft, not loud. */
        #theme-color-menu button { transition: transform .12s ease; }
        #theme-color-menu button:hover { transform: scale(1.12); }
        #theme-color-menu .swatch-fill { opacity: .7; }
        
        #theme-color-menu > div {
		    display: grid;
		    grid-template-columns: repeat(4, 1fr);
		    gap: 12px;
		}
		#theme-color-menu button {
		    width: 28px;
		    height: 28px;
		    border-radius: 9999px;
		    overflow: hidden;
		    flex-shrink: 0;
		}




        /* Navbar circular controls */
        .navbar-action {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 9999px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow .18s ease, background-color .18s ease,
                        border-color .18s ease, transform .18s ease;
        }

        .navbar-action:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
        }

        .dark .navbar-action:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        }

        /* Centered dynamic greeting */
        .navbar-greeting {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            pointer-events: none;
        }

        .navbar-greeting-icon {
            color: var(--theme-color);
            font-size: calc(var(--panel-font-size) * 0.9375);
        }

        .navbar-greeting-text {
            font-size: calc(var(--panel-font-size) * 0.8125);
            font-weight: 600;
            letter-spacing: .01em;
        }

        .navbar-greeting-label {
            color: var(--theme-color);
            margin-right: 4px;
        }

        .navbar-greeting-name {
            color: #18181b;
            font-weight: 700;
        }

        .dark .navbar-greeting-name {
            color: #ffffff;
        }

        @media (max-width: 640px) {
            .navbar-greeting {
                display: none;
            }
            header {
		        position: fixed !important;
		        top: 0;
		        left: 0;
		        right: 0;
		        width: 100%;
		        height: 52px !important;
		        z-index: 9999;
		    }
		
		    .panel-main {
		        margin-top: 53px !important;
		    }

        }
        
        

/* ================================================================
   SIDEBAR VIEWPORT / PAGE LAYOUT
   ---------------------------------------------------------------
   Sidebar is fixed to the device viewport.
   The page wrapper is offset using the general-sibling selector
   because this component itself contains a <style> block after
   #app-sidebar.
   ================================================================ */

#app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 256px !important;
    flex: 0 0 256px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;

    min-height: 0 !important;
    overflow: hidden !important;

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

/*
 * IMPORTANT:
 * #app-sidebar + div was wrong because the <style> element in this
 * component sits immediately after the sidebar.
 *
 * ~ selects the actual page wrapper that comes after the sidebar.
 */
#app-sidebar ~ div {
    margin-left: 256px !important;
    width: calc(100% - 256px) !important;
    flex: 0 0 calc(100% - 256px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Desktop collapse: both html and body hooks are supported.
   html is applied before first paint, so there is no collapsed-sidebar flash. */
html.sidebar-collapsed #app-sidebar,
body.sidebar-collapsed #app-sidebar {
    width: 78px !important;
    flex-basis: 78px !important;
}

html.sidebar-collapsed #app-sidebar ~ div,
body.sidebar-collapsed #app-sidebar ~ div {
    margin-left: 78px !important;
    width: calc(100% - 78px) !important;
    flex-basis: calc(100% - 78px) !important;
}

html.sidebar-collapsed #app-sidebar .sidebar-text,
body.sidebar-collapsed #app-sidebar .sidebar-text {
    display: none !important;
}

html.sidebar-collapsed #app-sidebar #logo-img-expanded,
body.sidebar-collapsed #app-sidebar #logo-img-expanded {
    display: none !important;
}

html.sidebar-collapsed #app-sidebar .nav-dropdown-header,
body.sidebar-collapsed #app-sidebar .nav-dropdown-header,
html.sidebar-collapsed #app-sidebar .single-nav,
body.sidebar-collapsed #app-sidebar .single-nav {
    justify-content: center;
}

html.sidebar-collapsed #app-sidebar .sub-menu-list,
body.sidebar-collapsed #app-sidebar .sub-menu-list {
    display: none !important;
}

/* Only navigation scrolls. */
#sidebar-navigation {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: rgba(127,127,127,.35) transparent;
}

#sidebar-navigation::-webkit-scrollbar {
    width: 5px;
}

#sidebar-navigation::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar-navigation::-webkit-scrollbar-thumb {
    background: rgba(127,127,127,.30);
    border-radius: 999px;
}

#sidebar-navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(127,127,127,.50);
}

/* Footer always remains at the bottom of the sidebar. */
#sidebar-footer {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Mobile sidebar is an overlay; page uses the full viewport width. */
@media (max-width: 1023px) {
    #app-sidebar {
        width: 256px !important;
        flex-basis: 256px !important;
    }

    #app-sidebar ~ div,
    html.sidebar-collapsed #app-sidebar ~ div,
    body.sidebar-collapsed #app-sidebar ~ div {
        margin-left: 0 !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }

    html.sidebar-collapsed #app-sidebar,
    body.sidebar-collapsed #app-sidebar {
        width: 256px !important;
        flex-basis: 256px !important;
    }
}



    /* ============================================================
       GLOBAL LOADER
       ============================================================ */
    #global-loader {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(9, 9, 11, 0.62);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        padding: 20px;
    }

    #global-loader.is-visible {
        display: flex;
        animation: globalLoaderFadeIn .18s ease-out;
    }

    .global-loader-card {
        min-width: 210px;
        max-width: 280px;
        padding: 18px 22px;
        border: 1px solid var(--loader-card-border, rgba(249, 115, 22, .22));
        border-radius: 18px;
        background: rgba(24, 24, 27, .96);
        box-shadow:
            0 25px 60px rgba(0, 0, 0, .38),
            0 0 0 1px rgba(255, 255, 255, .03) inset,
            0 0 24px var(--loader-card-glow, rgba(249, 115, 22, .08));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 11px;
        text-align: center;
    }

    .global-loader-spinner {
        position: relative;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 3px solid var(--loader-theme-soft, rgba(249, 115, 22, .18));
        border-top-color: var(--loader-theme-color, #f97316);
        border-right-color: var(--loader-theme-color, #f97316);
        animation: globalLoaderSpin .78s linear infinite;
        box-shadow: 0 0 18px var(--loader-theme-glow, rgba(249, 115, 22, .18));
    }

    .global-loader-spinner::after {
        content: "";
        position: absolute;
        inset: 7px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-left-color: var(--loader-theme-soft-strong, rgba(249, 115, 22, .55));
        animation: globalLoaderSpinReverse .55s linear infinite;
    }

    .global-loader-title {
        color: #ffffff;
        font-size: calc(var(--panel-font-size) * 0.75);
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: .02em;
    }

    .global-loader-subtitle {
        color: #a1a1aa;
        font-size: calc(var(--panel-font-size) * 0.625);
        line-height: 1.3;
    }

    @keyframes globalLoaderSpin {
        to { transform: rotate(360deg); }
    }

    @keyframes globalLoaderSpinReverse {
        to { transform: rotate(-360deg); }
    }

    @keyframes globalLoaderFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }


    /* ============================================================
       TOAST NOTIFICATIONS
       ============================================================ */
    #toast-container {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 100000;
        width: min(380px, calc(100vw - 36px));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        pointer-events: none;
    }

    .panel-toast {
        position: relative;
        overflow: hidden;
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        min-height: 58px;
        padding: 10px 12px;
        border: 1px solid #e4e4e7;
        border-radius: 14px;
        background: rgba(255, 255, 255, .97);
        color: #18181b;
        box-shadow:
            0 16px 35px rgba(0, 0, 0, .13),
            0 3px 8px rgba(0, 0, 0, .06);
        transform: translateX(30px) scale(.97);
        opacity: 0;
        transition:
            transform .28s cubic-bezier(.22, 1, .36, 1),
            opacity .22s ease;
    }

    .dark .panel-toast {
        border-color: #27272a;
        background: rgba(24, 24, 27, .97);
        color: #ffffff;
        box-shadow:
            0 18px 40px rgba(0, 0, 0, .42),
            0 3px 10px rgba(0, 0, 0, .22);
    }

    .panel-toast.show {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    .panel-toast-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--panel-font-size) * 0.8125);
    }

    /* Success = green */
    .panel-toast-success .panel-toast-icon {
        color: #059669;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
    }

    .dark .panel-toast-success .panel-toast-icon {
        color: #34d399;
        background: rgba(16, 185, 129, .12);
        border-color: rgba(52, 211, 153, .20);
    }

    .panel-toast-success {
        border-left: 3px solid #10b981;
    }

    /* Error = red */
    .panel-toast-error .panel-toast-icon {
        color: #dc2626;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .dark .panel-toast-error .panel-toast-icon {
        color: #fb7185;
        background: rgba(244, 63, 94, .12);
        border-color: rgba(251, 113, 133, .20);
    }

    .panel-toast-error {
        border-left: 3px solid #ef4444;
    }

    .panel-toast-content {
        min-width: 0;
        flex: 1;
    }

    .panel-toast-title {
        font-size: calc(var(--panel-font-size) * 0.6875);
        line-height: 1.25;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .panel-toast-success .panel-toast-title {
        color: #059669;
    }

    .panel-toast-error .panel-toast-title {
        color: #dc2626;
    }

    .dark .panel-toast-success .panel-toast-title {
        color: #34d399;
    }

    .dark .panel-toast-error .panel-toast-title {
        color: #fb7185;
    }

    .panel-toast-message {
        font-size: calc(var(--panel-font-size) * 0.6875);
        line-height: 1.35;
        color: #52525b;
        word-break: break-word;
    }

    .dark .panel-toast-message {
        color: #d4d4d8;
    }

    .panel-toast-close {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #a1a1aa;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

    .panel-toast-close:hover {
        background: #f4f4f5;
        color: #52525b;
    }

    .dark .panel-toast-close:hover {
        background: #27272a;
        color: #e4e4e7;
    }

    .panel-toast-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        transform-origin: left center;
    }

    .panel-toast-success .panel-toast-progress {
        background: #10b981;
    }

    .panel-toast-error .panel-toast-progress {
        background: #ef4444;
    }

    .panel-toast-progress.animate {
        animation: panelToastProgress 3s linear forwards;
    }

    @keyframes panelToastProgress {
        from { transform: scaleX(1); }
        to { transform: scaleX(0); }
    }

   @media (max-width: 640px) {
    #toast-container {
        top: 10px;
        right: 10px;
        width: calc(90vw - 20px);
        gap: 4px;
    }

    .panel-toast {
        min-height: 48px;
        padding: 7px 9px;
        gap: 8px;
        border-radius: 11px;
    }

    .panel-toast-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 8px;
        font-size: calc(var(--panel-font-size) * 0.6875);
    }

    .panel-toast-title {
        font-size: calc(var(--panel-font-size) * 0.625);
        line-height: 1.2;
        margin-bottom: 1px;
    }

    .panel-toast-message {
        font-size: calc(var(--panel-font-size) * 0.625);
        line-height: 1.3;
    }

    .panel-toast-close {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 6px;
        font-size: calc(var(--panel-font-size) * 0.6875);
    }

    .panel-toast-progress {
        height: 1.5px;
    }
}



/* ================================================================
   DASHBOARD-ONLY STYLES
   Shared sidebar/navbar/footer styles remain in include files.
   ================================================================ */

.dashboard-card {
    border: 1px solid rgb(228 228 231 / .9);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .035);
}

.dark .dashboard-card {
    border-color: rgb(39 39 42 / .9);
    background: #18181b;
    box-shadow: 0 2px 12px rgb(0 0 0 / .12);
}

.dashboard-hover {
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgb(0 0 0 / .08);
}

.dark .dashboard-hover:hover {
    box-shadow: 0 14px 30px rgb(0 0 0 / .22);
}

.dashboard-label {
    font-size: calc(var(--panel-font-size) * 0.5625);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #71717a;
}

.dark .dashboard-label {
    color: #a1a1aa;
}

.dashboard-value {
    margin-top: 7px;
    font-size: calc(var(--panel-font-size) * 1.375);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.02em;
    color: black;
}

.dark .dashboard-value {
    color: #fafafa;
}

.dashboard-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--panel-font-size) * 0.875);
    flex-shrink: 0;
}

.dashboard-blue {
    color: #2563eb;
    background: #eff6ff;
}

.dark .dashboard-blue {
    color: #60a5fa;
    background: rgb(37 99 235 / .12);
}

.dashboard-amber {
    color: #d97706;
    background: #fffbeb;
}

.dark .dashboard-amber {
    color: #fbbf24;
    background: rgb(217 119 6 / .12);
}

.dashboard-violet {
    color: #7c3aed;
    background: #f5f3ff;
}

.dark .dashboard-violet {
    color: #a78bfa;
    background: rgb(124 58 237 / .12);
}

.dashboard-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: calc(var(--panel-font-size) * 0.5625);
    font-weight: 700;
}

.dashboard-trend-up {
    color: #059669;
    background: #ecfdf5;
}

.dark .dashboard-trend-up {
    color: #34d399;
    background: rgb(16 185 129 / .12);
}

.dashboard-trend-warning {
    color: #d97706;
    background: #fffbeb;
}

.dark .dashboard-trend-warning {
    color: #fbbf24;
    background: rgb(217 119 6 / .12);
}

.dashboard-muted {
    color: #a1a1aa;
    font-size: calc(var(--panel-font-size) * 0.5625);
}

.dashboard-title {
    font-size: calc(var(--panel-font-size) * 0.875);
    line-height: 1.3;
    font-weight: 700;
    color: #18181b;
}

.dark .dashboard-title {
    color: #fafafa;
}

.dashboard-subtitle {
    margin-top: 3px;
    font-size: calc(var(--panel-font-size) * 0.625);
    color: #71717a;
}

.dark .dashboard-subtitle {
    color: #a1a1aa;
}

.dashboard-table {
    min-width: 720px;
}

.dashboard-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: calc(var(--panel-font-size) * 0.5625);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: #71717a;
    background: #fafafa;
    white-space: nowrap;
}

.dark .dashboard-table th {
    color: #a1a1aa;
    background: #18181b;
}

.dashboard-table td {
    padding: 13px 14px;
    font-size: calc(var(--panel-font-size) * 0.625);
    color: #52525b;
    border-top: 1px solid #f4f4f5;
    white-space: nowrap;
}

.dark .dashboard-table td {
    color: #a1a1aa;
    border-color: #27272a;
}

.dashboard-table tbody tr {
    transition: background .15s ease;
}

.dashboard-table tbody tr:hover {
    background: #fafafa;
}

.dark .dashboard-table tbody tr:hover {
    background: #202023;
}

.status {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: calc(var(--panel-font-size) * 0.5);
    font-weight: 700;
}

.status-success {
    color: #059669;
    background: #ecfdf5;
}

.dark .status-success {
    color: #34d399;
    background: rgb(16 185 129 / .12);
}

.status-warning {
    color: #b45309;
    background: #fffbeb;
}

.dark .status-warning {
    color: #fbbf24;
    background: rgb(245 158 11 / .12);
}

.status-danger {
    color: #be123c;
    background: #fff1f2;
}

.dark .status-danger {
    color: #fb7185;
    background: rgb(244 63 94 / .12);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: calc(var(--panel-font-size) * 0.625);
    font-weight: 600;
    color: #3f3f46;
    transition: background .15s ease, transform .15s ease;
}

.dark .quick-action {
    color: #d4d4d8;
}

.quick-action:hover {
    background: #f4f4f5;
    transform: translateX(2px);
}

.dark .quick-action:hover {
    background: #27272a;
}

.quick-action-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color);
    background: rgba(var(--theme-color-rgb), .11);
}

.quick-arrow {
    margin-left: auto;
    font-size: calc(var(--panel-font-size) * 0.5);
    color: #a1a1aa;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.activity-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--panel-font-size) * 0.6875);
}

.activity-green {
    color: #059669;
    background: #ecfdf5;
}

.dark .activity-green {
    color: #34d399;
    background: rgb(16 185 129 / .12);
}

.activity-blue {
    color: #2563eb;
    background: #eff6ff;
}

.dark .activity-blue {
    color: #60a5fa;
    background: rgb(37 99 235 / .12);
}

.activity-violet {
    color: #7c3aed;
    background: #f5f3ff;
}

.dark .activity-violet {
    color: #a78bfa;
    background: rgb(124 58 237 / .12);
}

.activity-title {
    font-size: calc(var(--panel-font-size) * 0.625);
    line-height: 1.3;
    font-weight: 700;
    color: #27272a;
}

.dark .activity-title {
    color: #f4f4f5;
}

.activity-text {
    margin-top: 2px;
    font-size: calc(var(--panel-font-size) * 0.5625);
    line-height: 1.4;
    color: #71717a;
}

.activity-time {
    margin-top: 3px;
    font-size: calc(var(--panel-font-size) * 0.5);
    color: #a1a1aa;
}

.package-name {
    font-size: calc(var(--panel-font-size) * 0.625);
    font-weight: 700;
    color: #3f3f46;
}

.dark .package-name {
    color: #e4e4e7;
}

.package-percent {
    font-size: calc(var(--panel-font-size) * 0.5625);
    font-weight: 800;
    color: var(--theme-color);
}

.package-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f4f4f5;
}

.dark .package-progress {
    background: #27272a;
}

.package-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--theme-color);
}

.package-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    font-size: calc(var(--panel-font-size) * 0.5625);
    color: #a1a1aa;
}

.package-meta strong {
    color: #52525b;
}

.dark .package-meta strong {
    color: #d4d4d8;
}




/* =========================================================
   PAGE CONTENT STYLES ONLY
   ========================================================= */

.dashboard-card {
    border: 1px solid rgb(228 228 231 / .9);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .035);
}

.dark .dashboard-card {
    border-color: rgb(39 39 42 / .9);
    background: #18181b;
    box-shadow: 0 2px 12px rgb(0 0 0 / .12);
}


.dashboard-label {
    font-size: calc(var(--panel-font-size) * 0.5625);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #71717a;
}

.dark .dashboard-label {
    color: #a1a1aa;
}


.dashboard-value {
    margin-top: 7px;
    font-size: calc(var(--panel-font-size) * 1.375);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.02em;
    color: #18181b;
}

.dark .dashboard-value {
    color: #fafafa;
}


.dashboard-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--panel-font-size) * 0.875);
    flex-shrink: 0;
}


.icon-orange {
    color: #ea580c;
    background: #fff7ed;
}

.icon-blue {
    color: #2563eb;
    background: #eff6ff;
}

.icon-green {
    color: #059669;
    background: #ecfdf5;
}

.icon-violet {
    color: #7c3aed;
    background: #f5f3ff;
}

.icon-amber {
    color: #d97706;
    background: #fffbeb;
}


.dark .icon-orange {
    color: #fb923c;
    background: rgba(249,115,22,.12);
}

.dark .icon-blue {
    color: #60a5fa;
    background: rgba(37,99,235,.12);
}

.dark .icon-green {
    color: #34d399;
    background: rgba(16,185,129,.12);
}

.dark .icon-violet {
    color: #a78bfa;
    background: rgba(124,58,237,.12);
}

.dark .icon-amber {
    color: #fbbf24;
    background: rgba(217,119,6,.12);
}


.trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: calc(var(--panel-font-size) * 0.5625);
    font-weight: 700;
}

.trend-green {
    color: #059669;
    background: #ecfdf5;
}

.trend-blue {
    color: #2563eb;
    background: #eff6ff;
}

.trend-amber {
    color: #d97706;
    background: #fffbeb;
}

.trend-violet {
    color: #7c3aed;
    background: #f5f3ff;
}


.dashboard-muted {
    color: #a1a1aa;
    font-size: calc(var(--panel-font-size) * 0.5625);
}


.dashboard-title {
    font-size: calc(var(--panel-font-size) * 0.875);
    line-height: 1.3;
    font-weight: 700;
    color: #18181b;
}

.dark .dashboard-title {
    color: #fafafa;
}


.dashboard-subtitle {
    margin-top: 3px;
    font-size: calc(var(--panel-font-size) * 0.625);
    color: #71717a;
}

.dark .dashboard-subtitle {
    color: #a1a1aa;
}


.chart-main {
    height: 280px;
    margin-top: 16px;
    position: relative;
}

.chart-small {
    height: 245px;
    margin-top: 16px;
    position: relative;
}

.chart-pie {
    height: 245px;
    max-width: 320px;
    margin: 12px auto 0;
    position: relative;
}


.quick-action {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: calc(var(--panel-font-size) * 0.625);
    font-weight: 600;
    color: #3f3f46;
    transition: background .15s ease, transform .15s ease;
}

.dark .quick-action {
    color: #d4d4d8;
}

.quick-action:hover {
    background: #f4f4f5;
    transform: translateX(2px);
}

.dark .quick-action:hover {
    background: #27272a;
}


.quick-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--panel-font-size) * 0.6875);
}


.quick-arrow {
    margin-left: auto;
    font-size: calc(var(--panel-font-size) * 0.5);
    color: #a1a1aa;
}


.dashboard-table {
    min-width: 720px;
}

.dashboard-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: calc(var(--panel-font-size) * 0.5625);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: #71717a;
    background: #fafafa;
    white-space: nowrap;
}

.dark .dashboard-table th {
    color: #a1a1aa;
    background: #18181b;
}


.dashboard-table td {
    padding: 13px 14px;
    font-size: calc(var(--panel-font-size) * 0.625);
    color: #52525b;
    border-top: 1px solid #f4f4f5;
    white-space: nowrap;
}

.dark .dashboard-table td {
    color: #a1a1aa;
    border-color: #27272a;
}


.dashboard-table tbody tr:hover {
    background: #fafafa;
}

.dark .dashboard-table tbody tr:hover {
    background: #202023;
}


.status {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: calc(var(--panel-font-size) * 0.5);
    font-weight: 700;
}

.status-success {
    color: #059669;
    background: #ecfdf5;
}

.status-warning {
    color: #b45309;
    background: #fffbeb;
}


.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.activity-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--panel-font-size) * 0.6875);
}


.activity-title {
    font-size: calc(var(--panel-font-size) * 0.625);
    line-height: 1.3;
    font-weight: 700;
    color: #27272a;
}

.dark .activity-title {
    color: #f4f4f5;
}


.activity-text {
    margin-top: 2px;
    font-size: calc(var(--panel-font-size) * 0.5625);
    line-height: 1.4;
    color: #71717a;
}


.activity-time {
    margin-top: 3px;
    font-size: calc(var(--panel-font-size) * 0.5);
    color: #a1a1aa;
}


.due-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid #f4f4f5;
}

.due-item:last-child {
    border-bottom: 0;
}

.dark .due-item {
    border-color: #27272a;
}


.due-name {
    font-size: calc(var(--panel-font-size) * 0.625);
    font-weight: 700;
    color: #3f3f46;
}

.dark .due-name {
    color: #e4e4e7;
}


.due-sub {
    margin-top: 3px;
    font-size: calc(var(--panel-font-size) * 0.5);
    color: #a1a1aa;
}


.due-item strong {
    font-size: calc(var(--panel-font-size) * 0.6875);
    color: #d97706;
}

.dark .due-item strong {
    color: #fbbf24;
}




.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: calc(var(--panel-font-size) * 0.75);
    font-weight: 600;
    color: #52525b;
}

.dark .form-label {
    color: #d4d4d8;
}

.form-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e4e4e7;
    border-radius: 9px;
    background: #fff;
    color: #27272a;
    font-size: calc(var(--panel-font-size) * 0.8125);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-input::placeholder {
    color: #a1a1aa;
}

.form-input:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), .10);
}

.dark .form-input {
    border-color: #3f3f46;
    background: #18181b;
    color: #f4f4f5;
}

.dark .form-input:focus {
    border-color: var(--theme-color);
}

.form-textarea {
    height: auto;
    min-height: 95px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.dashboard-card {
    border: 1px solid rgb(228 228 231 / .9);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .035);
}

.dark .dashboard-card {
    border-color: rgb(39 39 42 / .9);
    background: #18181b;
    box-shadow: 0 2px 12px rgb(0 0 0 / .12);
}



        
        :root {
            --theme-color: #f97316;
            --theme-color-rgb: 249, 115, 22;
        }

        .login-page { font-family: 'Inter', sans-serif; }

        /* ============================================================
           LOGIN PAGE THEME
           Uses the same saved settings as the dashboard:
           crm_theme       = dark / light
           crm_theme_color = selected accent color
           ============================================================ */
        :root {
            --login-bg: #09090b;
            --login-card: #18181b;
            --login-input: #09090b;
            --login-border: #27272a;
            --login-text: #ffffff;
            --login-muted: #a1a1aa;
            --login-placeholder: #52525b;
        }

        html:not(.dark) {
            --login-bg: #f4f4f5;
            --login-card: #ffffff;
            --login-input: #fafafa;
            --login-border: #d4d4d8;
            --login-text: #18181b;
            --login-muted: #71717a;
            --login-placeholder: #a1a1aa;
        }

        .login-page {
            background-color: var(--login-bg) !important;
            color: var(--login-text);
        }

        .login-card {
            background-color: var(--login-card);
            border-color: var(--login-border);
        }

        .login-input {
            background-color: var(--login-input) !important;
            border-color: var(--login-border) !important;
            color: var(--login-text) !important;
        }

        .login-input::placeholder {
            color: var(--login-placeholder) !important;
        }

        .login-label {
            color: var(--login-muted) !important;
        }

        .login-title {
            color: var(--login-text) !important;
        }

        .login-footer {
            background-color: var(--login-input) !important;
            border-color: var(--login-border) !important;
        }

        .theme-toggle {
            background-color: var(--login-card);
            border-color: var(--login-border);
        }

        .theme-toggle:hover {
            background-color: rgba(var(--theme-color-rgb), .10);
        }

        .theme-icon {
            color: var(--theme-color);
        }

        .theme-text { color: var(--theme-color) !important; }
        .theme-border { border-color: var(--theme-color) !important; }
        .theme-bg { background-color: var(--theme-color) !important; }
        .theme-shadow { box-shadow: 0 10px 20px -8px rgba(var(--theme-color-rgb), .45); }
        .login-banner {
            background: linear-gradient(135deg, var(--theme-color), var(--theme-color));
        }
        .login-button:hover {
            filter: brightness(.92);
        }
        .theme-focus:focus {
            border-color: var(--theme-color) !important;
        }
        .theme-hover:hover {
            color: var(--theme-color) !important;
        }




/* ================================================================
   GLOBAL PANEL LAYOUT
   ================================================================ */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

.panel-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 20px;
    background: #f4f4f5;
}

.dark .panel-main {
    background: #09090b;
}

.page-container {
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

/* Common content card */
.dashboard-card {
    box-sizing: border-box;
}

/* Common form controls */
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    line-height: 1.35;
    font-weight: 600;
    color: #52525b;
}

.dark .form-label { color: #d4d4d8; }

.form-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e4e4e7;
    border-radius: 9px;
    background: #fff;
    color: #27272a;
    font-size: .8125rem;
    line-height: 1.4;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-input::placeholder { color: #a1a1aa; }
.form-input:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), .10);
}

.dark .form-input {
    border-color: #3f3f46;
    background: #18181b;
    color: #f4f4f5;
}

.dark .form-input:focus { border-color: var(--theme-color); }

.form-textarea {
    height: auto;
    min-height: 95px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

/* Mobile content spacing: exactly 5px left/right */
@media (max-width: 1023px) {
    .panel-main {
        padding: 5px !important;
    }

    .page-container {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .panel-main {
        padding: 20px !important;
    }
}

/* Login page is intentionally full viewport and does not use panel layout. */
.login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 640px) {
    .login-page {
        padding: 16px !important;
    }
}


/* ================================================================
   COMMON SIDEBAR TYPOGRAPHY
   ================================================================ */
#app-sidebar .nav-link,
#app-sidebar .nav-dropdown-header {
    font-size: calc(.8125rem * var(--panel-font-scale)) !important;
}

#app-sidebar .sidebar-text {
    font-size: calc(.8125rem * var(--panel-font-scale)) !important;
}

#app-sidebar .subnav-link {
    font-size: calc(.8125rem * var(--panel-font-scale)) !important;
}

#app-sidebar .collapsed-dropdown a {
    font-size: calc(.8125rem * var(--panel-font-scale)) !important;
}

#app-sidebar .collapsed-dropdown > div {
    font-size: calc(.6875rem * var(--panel-font-scale)) !important;
}

#app-sidebar .desktop-tooltip {
    font-size: calc(.75rem * var(--panel-font-scale)) !important;
}

#app-sidebar .sidebar-footer {
    font-size: calc(.75rem * var(--panel-font-scale)) !important;
}


/* ================================================================
   PASSWORD HASH GENERATOR
   ================================================================ */
.password-generator-page {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.password-generator-page .box {
    width: 100%;
    max-width: 500px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.password-generator-page h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.password-generator-page input {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: calc(var(--panel-font-size) * 0.9375);
}

.password-generator-page button {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background: #168b4f;
    color: #fff;
    font-size: calc(var(--panel-font-size) * 0.9375);
    cursor: pointer;
}

.password-generator-page button:hover { opacity: .9; }

.password-generator-page textarea {
    width: 100%;
    min-height: 100px;
    margin-top: 15px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
    font-family: monospace;
}

/*-======================== Select dropdown for dark and light mode ====================== */
/* ============================================================
   GLOBAL SELECT / DROPDOWN THEME
   Works across all pages
   ============================================================ */

select,
select.profile-input,
select.form-input,
select.input-field {
    color-scheme: light;
    color: #18181b;
    background-color: #ffffff;
}

/* Light mode */
select option,
select optgroup {
    color: #18181b;
    background-color: #ffffff;
}

select option:checked {
    color: #ffffff;
    background-color: rgb(var(--theme-color-rgb));
}

select option:hover {
    color: #ffffff;
    background-color: rgb(var(--theme-color-rgb));
}


/* ============================================================
   DARK MODE
   ============================================================ */

.dark select,
.dark select.profile-input,
.dark select.form-input,
.dark select.input-field {
    color-scheme: dark;
    color: #f4f4f5;
    background-color: #18181b;
}

.dark select option,
.dark select optgroup {
    color: #f4f4f5;
    background-color: #18181b;
}

.dark select option:checked {
    color: #ffffff;
    background-color: rgb(var(--theme-color-rgb));
}

.dark select option:hover {
    color: #ffffff;
    background-color: rgb(var(--theme-color-rgb));
}


/* Disabled options */
select option:disabled,
.dark select option:disabled {
    color: #71717a;
    background-color: inherit;
}


/* Multiple select */
select[multiple] option {
    padding: 7px 10px;
}


/* Firefox / Chromium native control hint */
html.dark,
body.dark {
    color-scheme: dark;
}

html:not(.dark),
body:not(.dark) {
    color-scheme: light;
}

/* ============================================================
   GLOBAL USER TYPOGRAPHY
   Font settings are read once by include/header.php and inherited
   by every authenticated page. Layout spacing is NOT scaled.
   ============================================================ */
:root { --panel-font-scale: 1; }

body, body button, body input, body select, body textarea, body table,
body option, body optgroup {
    font-family: var(--panel-font-family), sans-serif;
}

/* Tailwind typography utilities are rem-based. Scale only their text,
   not the page's padding/margins/widths, so changing font size cannot
   change the sidebar/content gap. */
.panel-main .text-xs { font-size: calc(.75rem * var(--panel-font-scale)) !important; }
.panel-main .text-sm { font-size: calc(.875rem * var(--panel-font-scale)) !important; }
.panel-main .text-base { font-size: calc(1rem * var(--panel-font-scale)) !important; }
.panel-main .text-lg { font-size: calc(1.125rem * var(--panel-font-scale)) !important; }
.panel-main .text-xl { font-size: calc(1.25rem * var(--panel-font-scale)) !important; }
.panel-main .text-2xl { font-size: calc(1.5rem * var(--panel-font-scale)) !important; }
.panel-main .text-3xl { font-size: calc(1.875rem * var(--panel-font-scale)) !important; }
.panel-main .text-4xl { font-size: calc(2.25rem * var(--panel-font-scale)) !important; }

/* Shared semantic text elements without a Tailwind size utility. */
.panel-main h1,.panel-main h2,.panel-main h3,.panel-main h4,.panel-main h5,.panel-main h6,
.panel-main p,.panel-main label,.panel-main th,.panel-main td,
.panel-main input,.panel-main select,.panel-main textarea,.panel-main button {
    font-family: var(--panel-font-family), sans-serif;
}

/* Date + time display used everywhere a business date is shown. */
.mr-date-time { display:inline-flex; flex-direction:column; gap:2px; line-height:1.15; vertical-align:middle; }
.mr-date-time .mr-date { display:flex; align-items:center; gap:5px; font-weight:700; }
.mr-date-time .mr-date i { color:var(--theme-color); font-size:calc(var(--panel-font-size) * .62); }
.mr-date-time .mr-time { display:flex; align-items:center; gap:4px; color:#a1a1aa; font-size:calc(var(--panel-font-size) * .56); font-weight:600; }
.mr-date-time .mr-time i { color:#a1a1aa; font-size:calc(var(--panel-font-size) * .82); }
.dark .mr-date-time .mr-time { color:#a1a1aa; }

/* Navbar typography follows the same global font scale. */
header .text-xs { font-size: calc(.75rem * var(--panel-font-scale)) !important; }
header .text-sm { font-size: calc(.875rem * var(--panel-font-scale)) !important; }
header .navbar-greeting-text { font-size: calc(.8125rem * var(--panel-font-scale)); }
header .navbar-greeting-icon { font-size: calc(.9375rem * var(--panel-font-scale)); }