/* Ensure Inputs and Selects stay solid & highly readable */
        input,
        select,
        textarea {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
            color: #1e293b !important;
            transition: all 0.2s ease-in-out !important;
        }

        input:focus,
        select:focus,
        textarea:focus {
            background: #ffffff !important;
            border-color: var(--brand-color, #0F2942) !important;
            box-shadow: 0 0 0 3px var(--brand-ring, rgba(15, 41, 66, 0.1)) !important;
            outline: none !important;
        }

        #login-form input,
        #login-form select {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            color: #0f172a !important;
            border-radius: 8px !important;
            height: 48px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            padding-left: 2.75rem !important;
            padding-right: 2.5rem !important;
        }
        #login-form input:focus,
        #login-form select:focus {
            background: #ffffff !important;
            border-color: #0F2942 !important;
            box-shadow: 0 0 0 3px rgba(15, 41, 66, 0.1) !important;
        }
        #login-form select option {
            background-color: #ffffff !important;
            color: #1e293b !important;
        }
        #login-form input[type="checkbox"] {
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 0.25rem !important;
            width: 1rem !important;
            height: 1rem !important;
            padding: 0 !important;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }




        /* White Buttons */
        button.bg-white {
            background: #ffffff !important;
        }

        /* Clean Minimalist Background */
        body {
            -webkit-tap-highlight-color: transparent;
            background-color: #f1f5f9;
        }

        /* Modern Enterprise Solid Cards */
        @keyframes shimmer {
            100% { transform: translateX(150%); }
        }

        .glass {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        }

        /* Dark Modern Sidebar */
        .glass-dark,
        #desktop-sidebar {
            background: #0f172a !important;
            border-right: 1px solid #1e293b !important;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05) !important;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* Mobile Bottom Nav & Header */
        #mobile-bottom-nav,
        header.glass {
            background: #ffffff !important;
            border-top: 1px solid #e2e8f0 !important;
            box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05) !important;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(203, 213, 225, 0.8);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.8);
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Performance-optimized Scrolling & Hardware Acceleration */
        html,
        body {
            scroll-behavior: smooth;
        }
        
        #view-port,
        .overflow-y-auto,
        .overflow-x-auto {
            -webkit-overflow-scrolling: touch;
            will-change: scroll-position;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        #view-port {
            overflow-x: hidden !important;
            max-width: 100% !important;
        }

        /* Prevent layout thrashing on sticky columns/headers during scroll */
        .sticky,
        [class*="sticky"] {
            will-change: transform;
            transform: translateZ(0);
        }

        /* Premium Tab & View Switch Animations */
        .fade-in {
            animation: premiumFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            will-change: opacity, transform, filter;
        }

        @keyframes premiumFadeIn {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.98);
                filter: blur(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        /* Liquid Glow Removed for Solid Theme */

        .btn-liquid {
            position: relative;
            z-index: 1;
            overflow: hidden;
            background: linear-gradient(135deg, #0F2942, #1e3a5f);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .btn-liquid::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s;
            z-index: -1;
        }

        .btn-liquid:hover::before {
            left: 100%;
        }

        .btn-liquid:hover {
            box-shadow: 0 10px 20px rgba(15, 41, 66, 0.2);
            transform: translateY(-2px);
        }

        /* Enhanced Smooth State Transitions for Interactive Elements */
        button,
        select,
        input,
        .transition-all,
        .transition-colors {
            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
            transition-duration: 0.35s !important;
        }

        /* Mobile specific utilities */
        .pb-safe {
            padding-bottom: env(safe-area-inset-bottom, 20px);
        }

        /* Hide arrows in number inputs */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Pro-Level Theme Loader */
        .theme-loader {
            width: 60px;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 5px solid rgba(15, 41, 66, 0.08);
            /* Soft ACI Blue Base */
            border-right-color: #0F2942;
            /* ACI Blue */
            border-top-color: #F4A915;
            /* ACI Gold Accent */
            animation: l2 1s infinite linear;
        }

        @keyframes l2 {
            to {
                transform: rotate(1turn)
            }
        }

        /* Leaflet Custom Map Overrides */
        .leaflet-tooltip.custom-leaflet-tooltip {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
        }

        .leaflet-tooltip.custom-leaflet-tooltip::before {
            display: none !important;
            /* Hide default leaflet triangle */
        }

        .leaflet-container {
            font-family: 'Inter', sans-serif !important;
            background: #f1f5f9 !important;
            z-index: 10 !important;
        }

        #real-bd-map .leaflet-container {
            background: #0a1128 !important;
        }

        #real-bd-map.map-light .leaflet-container {
            background: #f8fafc !important;
        }

        .leaflet-control-attribution {
            display: none !important;
            /* Keep it ultra minimal */
        }

        /* Liquid Glass Design System */
        .liquid-glass-blur {
            backdrop-filter: blur(25px) saturate(200%);
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .liquid-container {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            filter: blur(40px);
        }

        .liquid-blob {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blob-color-1, #0F2942), var(--blob-color-2, #F4A915));
            animation: fluidMotion 15s infinite alternate ease-in-out;
            opacity: 0.5;
            mix-blend-mode: soft-light;
        }

        .liquid-blob:nth-child(2) {
            animation-duration: 25s;
            animation-delay: -5s;
            background: linear-gradient(225deg, #6366f1, #06b6d4);
            opacity: 0.4;
        }

        .liquid-blob:nth-child(3) {
            animation-duration: 20s;
            animation-delay: -10s;
            background: linear-gradient(45deg, #f43f5e, #fb923c);
            opacity: 0.3;
        }

        @keyframes fluidMotion {
            0% {
                transform: translate(-15%, -15%) scale(1) rotate(0deg);
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }

            33% {
                transform: translate(25%, 35%) scale(1.3) rotate(120deg);
                border-radius: 60% 40% 30% 70% / 50% 60% 50% 40%;
            }

            66% {
                transform: translate(-10%, 55%) scale(0.9) rotate(240deg);
                border-radius: 30% 70% 50% 50% / 60% 30% 70% 40%;
            }

            100% {
                transform: translate(15%, -10%) scale(1.15) rotate(360deg);
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }
        }

        .liquid-surface {
            background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #f1f5f9 100%);
            position: fixed;
            inset: 0;
            z-index: -2;
        }

        .mesh-gradient-sidebar {
            background: radial-gradient(at 0% 0%, rgba(15, 41, 66, 0.4) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(244, 169, 21, 0.1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(15, 41, 66, 0.4) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(244, 169, 21, 0.1) 0px, transparent 50%);
        }

        .glass-shine {
            position: relative;
            overflow: hidden;
        }

        .glass-shine::after {
            content: '';
            position: absolute;
            top: -150%;
            left: -150%;
            width: 300%;
            height: 300%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            animation: shine 6s infinite;
            pointer-events: none;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            20%,
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        .liquid-text {
            background: linear-gradient(90deg, #1e293b, #0F2942, #F4A915, #0F2942, #1e293b);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: liquidTextFlow 8s linear infinite;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
        }

        @keyframes liquidTextFlow {
            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        @keyframes brandInactivePulse {
            0%, 100% { opacity: 0.45; transform: scale(0.98); }
            50% { opacity: 0.8; transform: scale(1.02); }
        }

        @keyframes brandActiveGlow {
            0%, 100% { box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.12), 0 2px 4px -1px rgba(255, 255, 255, 0.08), 0 0 4px rgba(255, 255, 255, 0.15); transform: scale(1.05); }
            50% { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.25), 0 4px 6px -2px rgba(255, 255, 255, 0.12), 0 0 10px rgba(255, 255, 255, 0.4); transform: scale(1.08); }
        }

        /* Mobile Specific Premium Enhancements */
        @media (max-width: 640px) {
            #view-port {
                padding: 12px !important;
                padding-bottom: 80px !important;
            }

            .glass {
                border-radius: 1.25rem !important;
                padding: 1.25rem !important;
            }

            .kpi-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            .mobile-hide {
                display: none !important;
            }

            #app-header {
                padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
                padding-bottom: 12px !important;
                margin: 0px !important;
                border-radius: 0px !important;
                background: rgba(255, 255, 255, 0.85) !important;
                backdrop-filter: blur(20px) saturate(190%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
                border-top: none !important;
                border-left: none !important;
                border-right: none !important;
                position: sticky !important;
                top: 0px !important;
                z-index: 40 !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
                transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }

            #sidebar-header {
                padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
            }
        }



        .nav-tab-active {
            color: #0F2942;
            position: relative;
        }

        .nav-tab-active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: #F4A915;
            border-radius: full;
            box-shadow: 0 0 10px #F4A915;
        }

        /* Premium Territory Pulse Table Enhancements */
        .pulse-tr-premium {
            transition: all 0.2s ease-in-out !important;
        }
        .pulse-tr-premium:hover {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            filter: blur(40px);
        }

        .liquid-blob {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blob-color-1, #0F2942), var(--blob-color-2, #F4A915));
            animation: fluidMotion 15s infinite alternate ease-in-out;
            opacity: 0.5;
            mix-blend-mode: soft-light;
        }

        .liquid-blob:nth-child(2) {
            animation-duration: 25s;
            animation-delay: -5s;
            background: linear-gradient(225deg, #6366f1, #06b6d4);
            opacity: 0.4;
        }

        .liquid-blob:nth-child(3) {
            animation-duration: 20s;
            animation-delay: -10s;
            background: linear-gradient(45deg, #f43f5e, #fb923c);
            opacity: 0.3;
        }

        @keyframes fluidMotion {
            0% {
                transform: translate(-15%, -15%) scale(1) rotate(0deg);
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }

            33% {
                transform: translate(25%, 35%) scale(1.3) rotate(120deg);
                border-radius: 60% 40% 30% 70% / 50% 60% 50% 40%;
            }

            66% {
                transform: translate(-10%, 55%) scale(0.9) rotate(240deg);
                border-radius: 30% 70% 50% 50% / 60% 30% 70% 40%;
            }

            100% {
                transform: translate(15%, -10%) scale(1.15) rotate(360deg);
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }
        }

        .liquid-surface {
            background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #f1f5f9 100%);
            position: fixed;
            inset: 0;
            z-index: -2;
        }

        .mesh-gradient-sidebar {
            background: radial-gradient(at 0% 0%, rgba(15, 41, 66, 0.4) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(244, 169, 21, 0.1) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(15, 41, 66, 0.4) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(244, 169, 21, 0.1) 0px, transparent 50%);
        }

        .glass-shine {
            position: relative;
            overflow: hidden;
        }

        .glass-shine::after {
            content: '';
            position: absolute;
            top: -150%;
            left: -150%;
            width: 300%;
            height: 300%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            animation: shine 6s infinite;
            pointer-events: none;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            20%,
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        .liquid-text {
            background: linear-gradient(90deg, #1e293b, #0F2942, #F4A915, #0F2942, #1e293b);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: liquidTextFlow 8s linear infinite;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
        }

        @keyframes liquidTextFlow {
            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        @keyframes brandInactivePulse {
            0%, 100% { opacity: 0.45; transform: scale(0.98); }
            50% { opacity: 0.8; transform: scale(1.02); }
        }

        @keyframes brandActiveGlow {
            0%, 100% { box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.12), 0 2px 4px -1px rgba(255, 255, 255, 0.08), 0 0 4px rgba(255, 255, 255, 0.15); transform: scale(1.05); }
            50% { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.25), 0 4px 6px -2px rgba(255, 255, 255, 0.12), 0 0 10px rgba(255, 255, 255, 0.4); transform: scale(1.08); }
        }

        /* Mobile Specific Premium Enhancements */
        @media (max-width: 640px) {
            #view-port {
                padding: 12px !important;
                padding-bottom: 80px !important;
            }

            .glass {
                border-radius: 1.25rem !important;
                padding: 1.25rem !important;
            }

            .kpi-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            .mobile-hide {
                display: none !important;
            }

            #app-header {
                padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
                padding-bottom: 12px !important;
                margin: 0px !important;
                border-radius: 0px !important;
                background: rgba(255, 255, 255, 0.85) !important;
                backdrop-filter: blur(20px) saturate(190%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
                border-top: none !important;
                border-left: none !important;
                border-right: none !important;
                position: sticky !important;
                top: 0px !important;
                z-index: 40 !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
                transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }

            #sidebar-header {
                padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
            }
        }



        .nav-tab-active {
            color: #0F2942;
            position: relative;
        }

        .nav-tab-active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: #F4A915;
            border-radius: full;
            box-shadow: 0 0 10px #F4A915;
        }

        /* Premium Territory Pulse Table Enhancements */
        .pulse-tr-premium {
            transition: all 0.2s ease-in-out !important;
        }
        .pulse-tr-premium:hover {
            background-color: rgba(99, 102, 241, 0.03) !important;
        }
        .pulse-tr-premium:hover td.sticky-left {
            background-color: #f8fafc !important;
        }
        .pulse-badge-amber {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }


        /* Glassmorphism Conversion for Admin Panels */
        body.aurora-active {
            background-color: #f1f5f9; /* Slate 100 base */
            background-image: 
                radial-gradient(at 0% 0%, rgba(244, 169, 21, 0.03) 0, transparent 50%), 
                radial-gradient(at 50% 0%, rgba(99, 102, 241, 0.03) 0, transparent 50%), 
                radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.03) 0, transparent 50%);
        }

        body.aurora-active .bg-white {
            background: rgba(255, 255, 255, 0.65) !important;
            backdrop-filter: blur(20px) saturate(190%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
            border-color: rgba(255, 255, 255, 0.45) !important;
            box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 1px 0 rgba(255, 255, 255, 0.5) inset !important;
        }

        body.aurora-active select,
        body.aurora-active input,
        body.aurora-active textarea {
            background-color: rgba(255, 255, 255, 0.90) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* Fix table header sticky cells when glass is active */
        body.aurora-active td.sticky-left,
        body.aurora-active th.sticky-left {
            background-color: rgba(248, 250, 252, 0.85) !important;
            backdrop-filter: blur(8px) !important;
        }

        /* Compact Premium Table Styling for Territory Pulse & AM Sync */
        body.aurora-active table th,
        body.aurora-active table td {
            padding-top: 0.22rem !important; /* Extremely compact rows */
            padding-bottom: 0.22rem !important;
            line-height: 1.15 !important;
            font-size: 10px !important; /* Slightly smaller text for premium clean look */
        }

        body.aurora-active table thead tr:first-child th {
            padding-top: 0.35rem !important;
            padding-bottom: 0.35rem !important;
            font-size: 9px !important;
        }

        body.aurora-active table td div.flex {
            gap: 0.3rem !important;
        }

        body.aurora-active table span.rounded-lg {
            padding: 0.1rem 0.3rem !important;
            font-size: 9px !important;
        }

        /* Hover animation glow for rows (optimized for smooth scrolling) */
        body.aurora-active tbody tr {
            transition: background-color 0.1s ease !important;
        }

        body.aurora-active tbody tr:hover {
            background-color: rgba(99, 102, 241, 0.05) !important;
        }

        body.aurora-active tbody tr:hover td.sticky-left {
            background-color: rgba(241, 245, 249, 0.95) !important;
        }

/* Territory Pulse Performance & Smooth Native Scrolling */
.pulse-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
}

.pulse-table {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: max-content;
    min-width: 100%;
}

.pulse-table th,
.pulse-table td {
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle;
}

.pulse-table tbody tr {
    transition: background-color 0.08s ease !important;
}

.pulse-table th.sticky-left,
.pulse-table td.sticky-left {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
}

.pulse-table thead th.sticky-left {
    z-index: 25 !important;
}




/* Force Leaflet container to be transparent so SVG vector map is never hidden */
#real-bd-map, .leaflet-container, .leaflet-pane {
    background: transparent !important;
    background-color: transparent !important;
}

/* Sales360 Smart Stage Navigation Exit Toast */
.sales360-exit-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    z-index: 999999 !important;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 9999px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sales360-exit-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.sales360-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales360-toast-icon.back {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

.sales360-toast-icon.exit {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* ==========================================================================
   TERRITORY PERFORMANCE EVALUATION & PDF REPORT STYLES
   ========================================================================== */
.eval-card-shadow {
    box-shadow: 0 10px 30px -5px rgba(15, 41, 66, 0.08), 0 4px 12px -2px rgba(15, 41, 66, 0.04);
}

.eval-report-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.eval-table th {
    letter-spacing: 0.05em;
}

.eval-avoid-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.eval-page-break {
    page-break-after: always !important;
    break-after: page !important;
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .no-print, #app-header, #desktop-sidebar, #copyright-footer, #ai-chat-widget, #sidebar-overlay {
        display: none !important;
    }
    .eval-report-container {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    @page {
        size: A4 landscape;
        margin: 8mm 6mm 8mm 6mm;
    }
}



/* ===== Admin compact side rail (large screens): icons only, opens over the page on hover ===== */
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar {
        transform: none !important;
        width: 76px;
        overflow: hidden;
        transition: width .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease;
        box-shadow: 4px 0 22px rgba(2, 6, 23, .22);
        border-right: 1px solid rgba(255, 255, 255, .06);
    }
    body.admin-rail #desktop-sidebar > * { width: 256px; flex-shrink: 0; }
    body.admin-rail #desktop-sidebar > nav { flex-shrink: 1; }
    body.admin-rail #desktop-sidebar:hover,
    body.admin-rail #desktop-sidebar:focus-within {
        width: 256px;
        box-shadow: 24px 0 60px rgba(2, 6, 23, .38);
    }
    /* glowing edge line */
    body.admin-rail #desktop-sidebar::after {
        content: '';
        position: absolute; top: 0; right: 0; width: 2px; height: 100%;
        background: linear-gradient(180deg, transparent, rgba(251, 191, 36, .55) 35%, rgba(56, 189, 248, .45) 70%, transparent);
        opacity: .55; pointer-events: none; transition: opacity .3s;
    }
    body.admin-rail #desktop-sidebar:hover::after { opacity: .9; }
    body.admin-rail #app-container > main { padding-left: 76px; }
    body.admin-rail #sidebar-overlay,
    body.admin-rail #sidebar-toggle-btn,
    body.admin-rail #desktop-sidebar .sb-close { display: none !important; }

    /* line the icons up in the 76px rail */
    body.admin-rail #sidebar-header { padding-left: 22px; }
    body.admin-rail #sidebar-user { padding-left: 22px; }
    body.admin-rail #sidebar-nav { padding-left: 10px; padding-right: 10px; scrollbar-width: none; }
    body.admin-rail #sidebar-nav::-webkit-scrollbar { display: none; }
    body.admin-rail #sidebar-foot { padding-left: 10px; }
    body.admin-rail #sidebar-foot button { padding-left: 18px; }

    /* labels fade in as the rail opens */
    body.admin-rail #desktop-sidebar .sb-fade { transition: opacity .22s ease .06s; white-space: nowrap; }
    body.admin-rail #desktop-sidebar:not(:hover):not(:focus-within) .sb-fade { opacity: 0; transition-delay: 0s; }

    /* rail icons: lift on hover, the active one glows */
    body.admin-rail .sb-btn > div:first-of-type > div { transition: transform .2s ease, box-shadow .2s ease; }
    body.admin-rail .sb-btn:hover > div:first-of-type > div { transform: scale(1.08); }
    body.admin-rail .sb-active > div:first-of-type > div { box-shadow: 0 0 0 1px rgba(251, 191, 36, .35), 0 0 14px rgba(245, 158, 11, .45); }
}
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar .sb-btn { margin-top: 2px; margin-bottom: 2px; padding-top: 7px; padding-bottom: 7px; }
    body.admin-rail #sidebar-user { padding-top: 10px; padding-bottom: 10px; }
    body.admin-rail #desktop-sidebar:hover #sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .35) transparent; }
    body.admin-rail #desktop-sidebar:hover #sidebar-nav::-webkit-scrollbar { display: block; width: 4px; }
    body.admin-rail #desktop-sidebar:hover #sidebar-nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .35); border-radius: 4px; }
}

/* ===== Admin rail v2: minimal glass, clean icons, glowing active pill ===== */
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar {
        width: 72px;
        background: linear-gradient(180deg, #0A101C 0%, #0E1A2C 52%, #0A1322 100%) !important;
        backdrop-filter: blur(18px);
        border-right: 1px solid rgba(148, 163, 184, .08);
        box-shadow: 6px 0 30px rgba(2, 6, 23, .28);
    }
    body.admin-rail #desktop-sidebar:hover,
    body.admin-rail #desktop-sidebar:focus-within { width: 248px; box-shadow: 30px 0 70px rgba(2, 6, 23, .45); }
    body.admin-rail #desktop-sidebar > * { width: 248px; }
    body.admin-rail #app-container > main { padding-left: 72px; }
    body.admin-rail #desktop-sidebar::after {
        background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .55) 30%, rgba(129, 140, 248, .5) 70%, transparent);
        opacity: .45;
    }
    /* header and user: quiet, aligned to the rail */
    body.admin-rail #sidebar-header { padding: 18px 0 14px 20px; border-bottom-color: rgba(148, 163, 184, .08); background: transparent; }
    body.admin-rail #sidebar-header .text-\[8px\] { display: none; }
    body.admin-rail #sidebar-user { padding: 10px 0 12px 18px; border-bottom-color: rgba(148, 163, 184, .08); }
    body.admin-rail #sidebar-user > p { display: none; }
    body.admin-rail #sidebar-user-initial {
        width: 36px; height: 36px; font-size: 13px;
        background: linear-gradient(135deg, #38BDF8, #6366F1) !important;
        box-shadow: 0 0 0 2px rgba(10, 16, 28, 1), 0 0 0 3.5px rgba(56, 189, 248, .45), 0 6px 18px -4px rgba(99, 102, 241, .6);
    }
    body.admin-rail #sidebar-nav { padding: 10px 12px; }
    /* menu items: no boxes, just icons */
    body.admin-rail #desktop-sidebar .sb-btn {
        border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
        border-radius: 14px !important; padding: 7px 8px !important; margin: 2px 0 !important;
        color: #8A99B4 !important; font-weight: 600 !important; position: relative;
    }
    body.admin-rail #desktop-sidebar .sb-btn > div:first-of-type > div {
        background: transparent !important; border: 0 !important; box-shadow: none !important;
        padding: 7px !important; border-radius: 11px !important; transform: none;
    }
    body.admin-rail #desktop-sidebar .sb-btn svg, body.admin-rail #desktop-sidebar .sb-btn i { color: currentColor !important; width: 18px !important; height: 18px !important; stroke-width: 1.9; }
    body.admin-rail #desktop-sidebar .sb-btn:hover { background: rgba(148, 163, 184, .09) !important; color: #E2E8F0 !important; }
    body.admin-rail #desktop-sidebar .sb-btn:hover > div:first-of-type > div { transform: scale(1.06); }
    /* active page: glowing gradient pill */
    body.admin-rail #desktop-sidebar .sb-active { color: #fff !important; background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(99, 102, 241, .14)) !important; box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .18) !important; }
    body.admin-rail #desktop-sidebar .sb-active > div:first-of-type > div {
        background: linear-gradient(135deg, #38BDF8, #6366F1) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 20px -4px rgba(56, 189, 248, .75) !important;
    }
    body.admin-rail #desktop-sidebar .sb-active > .absolute { left: -12px !important; width: 3px !important; height: 22px !important; background: linear-gradient(180deg, #38BDF8, #818CF8) !important; box-shadow: 0 0 12px rgba(56, 189, 248, .8) !important; }
    body.admin-rail #desktop-sidebar .sb-active svg.lucide-chevron-right { color: #7DD3FC !important; }
    /* footer */
    body.admin-rail #sidebar-foot { border-top-color: rgba(148, 163, 184, .08); padding: 10px 12px; }
    body.admin-rail #sidebar-foot button { padding: 9px 15px !important; border-radius: 14px; color: #8A99B4; }
    body.admin-rail #sidebar-foot button:hover { background: rgba(244, 63, 94, .12) !important; color: #FDA4AF !important; }
    body.admin-rail #sidebar-foot > div { display: none; }
}

/* Admin pages use the full width beside the rail */
@media (min-width: 1024px) {
    body.admin-rail #view-port { padding-left: 16px !important; padding-right: 16px !important; padding-top: 16px !important; }
    body.admin-rail #app-header { padding-left: 16px; padding-right: 16px; }
}


/* ===== Admin rail v3: floating liquid glass ===== */
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar {
        top: 12px !important; left: 12px !important; height: calc(100% - 24px) !important;
        width: 68px; border-radius: 26px; overflow: hidden;
        background: linear-gradient(160deg, rgba(255, 255, 255, .66) 0%, rgba(240, 246, 255, .42) 45%, rgba(226, 236, 250, .36) 100%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
        border: 1px solid rgba(255, 255, 255, .75) !important;
        box-shadow: 0 18px 50px -18px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(148, 163, 184, .18) !important;
        color: #334155 !important;
        transition: width .34s cubic-bezier(.2, .8, .2, 1), box-shadow .34s ease, background .34s ease;
    }
    body.admin-rail #desktop-sidebar:hover,
    body.admin-rail #desktop-sidebar:focus-within {
        width: 240px;
        background: linear-gradient(160deg, rgba(255, 255, 255, .86) 0%, rgba(244, 248, 255, .74) 55%, rgba(232, 240, 252, .7) 100%) !important;
        box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .45), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    }
    body.admin-rail #desktop-sidebar > * { width: 240px; position: relative; z-index: 1; }
    /* liquid highlight: soft specular glow at the top and a slow-moving sheen */
    body.admin-rail #desktop-sidebar::before {
        content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
        background:
            radial-gradient(120px 90px at 20% 0%, rgba(255, 255, 255, .9), transparent 70%),
            radial-gradient(160px 140px at 90% 105%, rgba(56, 189, 248, .16), transparent 70%),
            radial-gradient(140px 120px at 0% 60%, rgba(129, 140, 248, .12), transparent 70%);
    }
    body.admin-rail #desktop-sidebar::after {
        content: ''; position: absolute; top: -40%; left: -60%; width: 60%; height: 180%; pointer-events: none; z-index: 0;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
        opacity: .5; transform: rotate(8deg); animation: railSheen 9s ease-in-out infinite;
    }
    @keyframes railSheen { 0%, 70% { left: -70%; } 100% { left: 160%; } }
    body.admin-rail #app-container > main { padding-left: 92px; }

    /* header (logo) */
    body.admin-rail #sidebar-header { order: 1; padding: 16px 0 12px 17px; border-bottom: 1px solid rgba(148, 163, 184, .18) !important; background: transparent !important; }
    body.admin-rail #sidebar-header .text-white,
    body.admin-rail #sidebar-header .font-black { color: #0F172A !important; }
    body.admin-rail #sidebar-header .text-slate-400 { color: #64748B !important; }
    body.admin-rail #sidebar-header .bg-white { background: linear-gradient(135deg, #0F172A, #1E3A8A) !important; border-color: rgba(255, 255, 255, .6) !important; }
    body.admin-rail #sidebar-header .bg-white span { color: #fff !important; }

    /* menu */
    body.admin-rail #sidebar-nav { order: 2; padding: 10px 10px; }
    body.admin-rail #desktop-sidebar .sb-btn { color: #475569 !important; }
    body.admin-rail #desktop-sidebar .sb-btn:hover { background: rgba(255, 255, 255, .7) !important; color: #0F172A !important; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, 1) !important; }
    body.admin-rail #desktop-sidebar .sb-active {
        color: #fff !important;
        background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%) !important;
        box-shadow: 0 10px 24px -10px rgba(30, 58, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    }
    body.admin-rail #desktop-sidebar .sb-active > div:first-of-type > div {
        background: linear-gradient(135deg, #38BDF8, #6366F1) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 18px -4px rgba(56, 189, 248, .8) !important;
    }
    body.admin-rail #desktop-sidebar .sb-active > .absolute { left: -10px !important; background: linear-gradient(180deg, #38BDF8, #6366F1) !important; }

    /* user: small, at the bottom */
    body.admin-rail #sidebar-user { order: 3; padding: 8px 0 8px 16px !important; border-bottom: 0 !important; border-top: 1px solid rgba(148, 163, 184, .18); }
    body.admin-rail #sidebar-user-initial { width: 30px !important; height: 30px !important; font-size: 11px !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 12px -4px rgba(99, 102, 241, .7) !important; }
    body.admin-rail #sidebar-user-name { color: #0F172A !important; font-size: 11px !important; line-height: 1.1; }
    body.admin-rail #sidebar-user-role { font-size: 8.5px !important; letter-spacing: .08em; color: #64748B !important; }
    body.admin-rail #sidebar-foot { order: 4; border-top: 0 !important; padding: 2px 10px 10px; }
    body.admin-rail #sidebar-foot button { color: #64748B !important; padding: 8px 14px !important; margin-bottom: 0 !important; }
    body.admin-rail #sidebar-foot button:hover { background: rgba(254, 226, 226, .8) !important; color: #E11D48 !important; }
}

/* ===== Admin top bar ===== */
#admin-topbar .atb-page-icon { width: 32px; height: 32px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0F172A, #1E3A8A); box-shadow: 0 6px 16px -6px rgba(30, 58, 138, .6); flex-shrink: 0; }
#admin-topbar .atb-search input {
    width: 100%; height: 38px; border-radius: 14px; padding: 0 64px 0 36px; font-size: 12.5px; font-weight: 600; color: #0F172A;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(203, 213, 225, .8);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); outline: none; transition: box-shadow .2s, border-color .2s, background .2s;
}
#admin-topbar .atb-search input:focus { background: #fff; border-color: #93C5FD; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
#admin-topbar .atb-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 9.5px; font-weight: 800; color: #64748B; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 7px; padding: 2px 6px; pointer-events: none; }
#admin-topbar .atb-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 380px; overflow-y: auto; padding: 6px; z-index: 60;
    background: rgba(255, 255, 255, .985); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, .9); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35);
}
#admin-topbar .atb-group { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; padding: 8px 10px 4px; }
#admin-topbar .atb-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: #334155; text-align: left; }
#admin-topbar .atb-item span { flex: 1; }
#admin-topbar .atb-item .atb-enter { opacity: 0; color: #94A3B8; }
#admin-topbar .atb-item:hover, #admin-topbar .atb-item.is-sel { background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(99, 102, 241, .1)); color: #0F172A; }
#admin-topbar .atb-item.is-sel .atb-enter { opacity: 1; }
#admin-topbar .atb-empty { padding: 14px; text-align: center; font-size: 12px; font-weight: 700; color: #94A3B8; }
#admin-topbar .atb-chip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; font-size: 11px; font-weight: 800; color: #475569; background: rgba(255, 255, 255, .7); border: 1px solid rgba(226, 232, 240, .9); white-space: nowrap; }
#admin-topbar .atb-btn { cursor: pointer; transition: background .2s, color .2s; }
#admin-topbar .atb-btn:hover { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
#admin-topbar .atb-dot { width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); animation: atbPulse 2.4s ease-in-out infinite; }
@keyframes atbPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, .05); } }
#admin-topbar .atb-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #475569; background: rgba(255, 255, 255, .7); border: 1px solid rgba(226, 232, 240, .9); transition: all .2s; }
#admin-topbar .atb-icon:hover { color: #fff; background: linear-gradient(135deg, #0F172A, #1E3A8A); border-color: transparent; transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(30, 58, 138, .7); }

/* ===== Admin rail v4: slimmer, floating further in ===== */
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar { left: 18px !important; top: 14px !important; height: calc(100% - 28px) !important; width: 58px; border-radius: 22px; }
    body.admin-rail #desktop-sidebar:hover,
    body.admin-rail #desktop-sidebar:focus-within { width: 228px; }
    body.admin-rail #desktop-sidebar > * { width: 228px; }
    body.admin-rail #app-container > main { padding-left: 88px; }
    body.admin-rail #sidebar-header { padding: 14px 0 10px 12px; }
    body.admin-rail #sidebar-nav { padding: 8px 7px; }
    body.admin-rail #desktop-sidebar .sb-btn { padding: 6px 6px !important; margin: 1px 0 !important; border-radius: 12px !important; }
    body.admin-rail #desktop-sidebar .sb-btn > div:first-of-type > div { padding: 6px !important; border-radius: 10px !important; }
    body.admin-rail #desktop-sidebar .sb-btn svg, body.admin-rail #desktop-sidebar .sb-btn i { width: 16px !important; height: 16px !important; }
    body.admin-rail #desktop-sidebar .sb-active > .absolute { left: -7px !important; height: 18px !important; }
    body.admin-rail #sidebar-user { padding: 7px 0 7px 12px !important; }
    body.admin-rail #sidebar-user-initial { width: 28px !important; height: 28px !important; font-size: 10.5px !important; }
    body.admin-rail #sidebar-foot { padding: 2px 7px 8px; }
    body.admin-rail #sidebar-foot button { padding: 7px 11px !important; }
}

/* ===== Admin dashboard polish (same layout, same charts, theme colours) ===== */
#view-port { scroll-behavior: smooth; }
#admin-dash { --navy: #0F2942; --gold: #F4A915; --foton: #041A54; --mahindra: #E5223E; }
#admin-dash .tabular, #admin-dash td, #admin-dash th { font-variant-numeric: tabular-nums; }
/* cards: soft depth instead of hard outlines (no coloured top / side strips) */
#admin-dash .bg-white.rounded-2xl,
#admin-dash .bg-white.rounded-xl,
#admin-dash .bg-white.rounded-3xl {
    border-color: rgba(15, 41, 66, .07) !important;
    box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 12px 32px -20px rgba(15, 41, 66, .22) !important;
    transition: box-shadow .3s ease, transform .3s ease;
}
#admin-dash .bg-white.rounded-2xl:hover { box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 18px 40px -22px rgba(15, 41, 66, .32) !important; }
/* buttons: calm hover, clear press, visible keyboard focus */
#admin-dash button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease; }
#admin-dash button:active { transform: scale(.97); }
#admin-dash button:focus-visible, #admin-dash select:focus-visible, #admin-dash input:focus-visible { outline: 2px solid rgba(244, 169, 21, .7); outline-offset: 2px; }
#admin-dash select { transition: border-color .2s, box-shadow .2s; }
#admin-dash select:hover { border-color: rgba(15, 41, 66, .25) !important; }
#admin-dash select:focus { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(15, 41, 66, .10) !important; }
/* tables: gentle row highlight in the theme navy */
#admin-dash table tbody tr { transition: background-color .15s ease; }
#admin-dash table tbody tr:hover { background-color: rgba(15, 41, 66, .035) !important; }
/* thin, quiet scrollbars for ribbons and wide tables */
#admin-dash .overflow-x-auto, #admin-dash .custom-scrollbar, #view-port { scrollbar-width: thin; scrollbar-color: rgba(15, 41, 66, .22) transparent; }
#admin-dash .overflow-x-auto::-webkit-scrollbar, #admin-dash .custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
#admin-dash .overflow-x-auto::-webkit-scrollbar-thumb, #admin-dash .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(15, 41, 66, .18); border-radius: 99px; }
#admin-dash .overflow-x-auto::-webkit-scrollbar-thumb:hover, #admin-dash .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(15, 41, 66, .35); }
#view-port::-webkit-scrollbar { width: 8px; }
#view-port::-webkit-scrollbar-thumb { background: rgba(15, 41, 66, .16); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
#view-port::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 41, 66, .32); }

/* scroll progress line and floating scroll buttons */
#vp-progress { position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 70; background: linear-gradient(90deg, #0F2942, #F4A915); box-shadow: 0 0 8px rgba(244, 169, 21, .5); transition: width .12s linear; pointer-events: none; }
#vp-fab { position: fixed; right: 22px; bottom: 86px; z-index: 65; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
#vp-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
#vp-fab button { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #0F2942;
    background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 24px -12px rgba(15, 41, 66, .45), inset 0 1px 0 #fff; transition: transform .18s ease, background .18s ease, color .18s ease; }
#vp-fab button:hover { background: #0F2942; color: #F4A915; transform: translateY(-2px); }
#vp-fab button:active { transform: scale(.94); }

/* ===== Admin rail v5: flush with the left edge ===== */
@media (min-width: 1024px) {
    body.admin-rail #desktop-sidebar { left: 0 !important; top: 0 !important; height: 100% !important; border-radius: 0 22px 22px 0; border-left: 0 !important; }
    body.admin-rail #app-container > main { padding-left: 70px; }
}

/* ===== Upazila sales map: compact header, minimal KPIs, clear filters ===== */
#map-page .mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 10px 26px -18px rgba(15, 41, 66, .25); }
#map-page .mp-logo { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #F4A915; background: linear-gradient(135deg, #0F2942, #1E3A8A); box-shadow: 0 8px 18px -8px rgba(15, 41, 66, .7); flex-shrink: 0; }
#map-page .mp-tag { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #0F2942; background: rgba(15, 41, 66, .07); padding: 2px 8px; border-radius: 99px; }
#map-page .mp-fy { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #0F2942, #1E3A8A); box-shadow: 0 8px 18px -10px rgba(15, 41, 66, .8); cursor: pointer; }
#map-page .mp-fy i:first-child { color: #F4A915; }
#map-page .mp-fy select { appearance: none; background: transparent; border: 0; color: #fff; font-size: 12px; font-weight: 800; padding-right: 2px; cursor: pointer; outline: none; }
#map-page .mp-fy select option { color: #0F2942; }
#map-page .mp-ghost { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 11px; font-size: 11.5px; font-weight: 800; color: #475569; background: #fff; border: 1px solid rgba(15, 41, 66, .1); }
#map-page .mp-ghost:hover { color: #0F2942; border-color: rgba(15, 41, 66, .25); }

#map-page .mp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#map-page .mp-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "k k" "v v" "bar bar" "s s"; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 8px 20px -16px rgba(15, 41, 66, .3); min-width: 0; }
#map-page .mp-k { grid-area: k; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; }
#map-page .mp-v { grid-area: v; font-size: 18px; font-weight: 900; color: #0F2942; line-height: 1.15; margin-top: 1px; font-variant-numeric: tabular-nums; }
#map-page .mp-v small { font-size: 11px; font-weight: 700; color: #94A3B8; margin-left: 1px; }
#map-page .mp-v.mp-txt { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map-page .mp-bar { grid-area: bar; display: flex; height: 4px; border-radius: 99px; background: #EEF2F7; overflow: hidden; margin-top: 5px; }
#map-page .mp-bar i { display: block; height: 100%; }
#map-page .mp-s { grid-area: s; font-size: 10px; font-weight: 700; color: #64748B; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#map-page .mp-filters { padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 10px 26px -18px rgba(15, 41, 66, .25); display: flex; flex-direction: column; gap: 9px; }
#map-page .mp-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
#map-page .mp-group, #map-page .mp-field { display: flex; flex-direction: column; gap: 4px; }
#map-page .mp-label { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; }
#map-page .mp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: #F1F5F9; }
#map-page .mp-seg button { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #64748B; transition: all .18s; }
#map-page .mp-seg button:hover { color: #0F2942; }
#map-page .mp-seg button.is-on { background: #fff; color: #0F2942; box-shadow: 0 2px 8px -2px rgba(15, 41, 66, .25); }
#map-page .mp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#map-page .mp-field select { appearance: none; height: 34px; min-width: 140px; padding: 0 30px 0 11px; border-radius: 11px; font-size: 12px; font-weight: 800; color: #334155; background: #F8FAFC; border: 1px solid rgba(15, 41, 66, .1); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
#map-page .mp-field select:hover { border-color: rgba(15, 41, 66, .25); }
#map-page .mp-field select:focus { outline: none; border-color: #0F2942; box-shadow: 0 0 0 3px rgba(15, 41, 66, .1); }
#map-page .mp-field.is-on select { background: #FFFBEB; border-color: #F4A915; color: #0F2942; }
#map-page .mp-toggle { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 11px; font-size: 11.5px; font-weight: 800; color: #64748B; background: #F8FAFC; border: 1px solid rgba(15, 41, 66, .1); }
#map-page .mp-switch { width: 26px; height: 15px; border-radius: 99px; background: #CBD5E1; position: relative; transition: background .2s; }
#map-page .mp-switch span { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); }
#map-page .mp-toggle.is-on { color: #0F2942; border-color: #F4A915; background: #FFFBEB; }
#map-page .mp-toggle.is-on .mp-switch { background: #0F2942; }
#map-page .mp-toggle.is-on .mp-switch span { transform: translateX(11px); }
#map-page .mp-period { align-items: center; padding-top: 8px; border-top: 1px dashed rgba(15, 41, 66, .1); }
#map-page .mp-presets, #map-page .mp-months { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#map-page .mp-presets button { height: 28px; padding: 0 11px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #475569; background: #F1F5F9; transition: all .18s; }
#map-page .mp-presets button:hover { color: #0F2942; background: #E2E8F0; }
#map-page .mp-presets button.is-on { color: #fff; background: #0F2942; box-shadow: 0 6px 14px -8px rgba(15, 41, 66, .8); }
#map-page .mp-months { margin-left: auto; padding: 3px; border-radius: 11px; background: #F1F5F9; gap: 2px; }
#map-page .mp-months button { width: 38px; height: 26px; border-radius: 8px; font-size: 10.5px; font-weight: 800; color: #94A3B8; transition: all .15s; }
#map-page .mp-months button:hover { color: #0F2942; background: rgba(255, 255, 255, .7); }
#map-page .mp-months button.is-on { color: #0F2942; background: #fff; box-shadow: 0 2px 6px -2px rgba(15, 41, 66, .3); }
#map-page .mp-months button.is-on::after { content: ''; display: block; width: 14px; height: 2px; border-radius: 2px; background: #F4A915; margin: 1px auto 0; }
#map-page .mp-months button.is-future { opacity: .55; }
#map-page .mp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#map-page .mp-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #0F2942; background: #FFFBEB; border: 1px solid rgba(244, 169, 21, .5); transition: all .18s; }
#map-page .mp-chip:hover { background: #FEF3C7; }
#map-page .mp-chip i { opacity: .6; }
#map-page .mp-clear { font-size: 11px; font-weight: 800; color: #64748B; text-decoration: underline; text-underline-offset: 2px; }
#map-page .mp-clear:hover { color: #E11D48; }
@media (max-width: 1100px) { #map-page .mp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } #map-page .mp-months { margin-left: 0; } }

/* ===== Admin EMI Analytics & Manual Deliveries: compact premium polish (same layout) ===== */
.admin-pro { --navy: #0F2942; --gold: #F4A915; font-variant-numeric: tabular-nums; }
/* cards: compact, soft depth, faint outline */
.admin-pro .bg-white.rounded-2xl, .admin-pro .bg-white.rounded-xl, .admin-pro .bg-white.rounded-3xl,
.admin-pro [class*="bg-white/"][class*="rounded-"] {
    border-color: rgba(15, 41, 66, .07) !important;
    box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 10px 26px -18px rgba(15, 41, 66, .26) !important;
    transition: box-shadow .25s ease, transform .25s ease;
}
.admin-pro .bg-white.rounded-2xl:hover, .admin-pro [class*="bg-white/"].rounded-xl:hover { box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 16px 34px -20px rgba(15, 41, 66, .34) !important; transform: translateY(-1px); }
.admin-pro .p-6 { padding: 1.1rem !important; }
.admin-pro .p-5 { padding: 1rem !important; }
.admin-pro .p-4 { padding: .85rem !important; }
.admin-pro .mb-6 { margin-bottom: 1rem !important; }
.admin-pro .gap-6 { gap: 1rem !important; }
.admin-pro .text-3xl { font-size: 1.6rem !important; letter-spacing: -.02em; }
.admin-pro .text-2xl { font-size: 1.35rem !important; letter-spacing: -.015em; }
/* progress bars in theme navy → blue */
.admin-pro .rounded-full.h-2 > div, .admin-pro .rounded-full.h-1\.5 > div { background-image: linear-gradient(90deg, #0F2942, #2F6FE4) !important; }
.admin-pro .bg-slate-100.rounded-full { background-color: #EEF2F7 !important; box-shadow: none !important; }
/* tables: navy header, calm rows, sticky head */
.admin-pro table thead th { background: #0F2942 !important; color: #E2E8F0 !important; font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase; border-color: rgba(255, 255, 255, .06) !important; position: sticky; top: 0; z-index: 2; }
.admin-pro table tbody tr { transition: background-color .15s ease; }
.admin-pro table tbody tr:nth-child(even) { background-color: rgba(15, 41, 66, .018); }
.admin-pro table tbody tr:hover { background-color: rgba(244, 169, 21, .07) !important; }
.admin-pro table td { border-color: rgba(15, 41, 66, .06) !important; }
/* buttons / inputs */
.admin-pro button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease; }
.admin-pro button:active { transform: scale(.97); }
.admin-pro button:focus-visible, .admin-pro select:focus-visible, .admin-pro input:focus-visible { outline: 2px solid rgba(244, 169, 21, .7); outline-offset: 2px; }
.admin-pro select, .admin-pro input[type="text"], .admin-pro input[type="search"], .admin-pro input[type="date"], .admin-pro input[type="number"] { border-radius: 11px !important; border-color: rgba(15, 41, 66, .12) !important; transition: border-color .2s, box-shadow .2s; }
.admin-pro select:hover, .admin-pro input:hover { border-color: rgba(15, 41, 66, .28) !important; }
.admin-pro select:focus, .admin-pro input:focus { border-color: #0F2942 !important; box-shadow: 0 0 0 3px rgba(15, 41, 66, .1) !important; outline: none; }
/* status pills: crisper */
.admin-pro .rounded-md.border, .admin-pro .rounded-full.border { font-weight: 800; }
/* scrollbars */
.admin-pro .overflow-x-auto, .admin-pro .overflow-y-auto { scrollbar-width: thin; scrollbar-color: rgba(15, 41, 66, .22) transparent; }
.admin-pro .overflow-x-auto::-webkit-scrollbar, .admin-pro .overflow-y-auto::-webkit-scrollbar { height: 6px; width: 6px; }
.admin-pro .overflow-x-auto::-webkit-scrollbar-thumb, .admin-pro .overflow-y-auto::-webkit-scrollbar-thumb { background: rgba(15, 41, 66, .2); border-radius: 99px; }

/* ===== EMI / Manual: minimal KPI cards, chips, search, sortable headings ===== */
.ap-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .ap-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-kpi { padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 8px 20px -16px rgba(15, 41, 66, .3); min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.ap-kpi:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 14px 28px -18px rgba(15, 41, 66, .38); }
.ap-kpi-top { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; }
.ap-kpi-top i, .ap-kpi-top svg { color: var(--c); }
.ap-kpi-v { font-size: 17px; font-weight: 900; color: #0F2942; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ap-kpi-bar { height: 4px; border-radius: 99px; background: #EEF2F7; overflow: hidden; margin-top: 5px; }
.ap-kpi-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ap-kpi-s { font-size: 10px; font-weight: 700; color: #94A3B8; margin-top: 3px; }
.ap-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #475569; background: #F1F5F9; transition: all .18s; }
.ap-chip span { min-width: 18px; padding: 0 5px; border-radius: 99px; font-size: 10px; background: #fff; color: #0F2942; text-align: center; }
.ap-chip:hover { color: #0F2942; background: #E2E8F0; }
.ap-chip.is-on { color: #fff; background: #0F2942; box-shadow: 0 6px 14px -8px rgba(15, 41, 66, .8); }
.ap-chip.is-on span { background: #F4A915; color: #0F2942; }
.ap-search { height: 30px; width: 210px; padding: 0 12px; border-radius: 99px !important; font-size: 11.5px; font-weight: 600; color: #0F2942; background: #fff; border: 1px solid rgba(15, 41, 66, .12); }
.ap-rate { display: inline-flex; align-items: center; gap: 6px; }
.ap-rate-bar { width: 56px; height: 5px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.ap-rate-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ap-rate b { font-size: 10.5px; font-weight: 900; color: var(--c); min-width: 32px; text-align: right; }
.admin-pro th.ap-sort { cursor: pointer; user-select: none; }
.admin-pro th.ap-sort:hover { color: #F4A915 !important; }
.admin-pro th.ap-sort::after { content: ' ↕'; opacity: .35; font-size: 9px; }
.admin-pro th.ap-sort[data-dir="asc"]::after { content: ' ▲'; opacity: 1; color: #F4A915; }
.admin-pro th.ap-sort[data-dir="desc"]::after { content: ' ▼'; opacity: 1; color: #F4A915; }
.admin-pro table thead tr + tr th { background: #F1F5F9 !important; color: #64748B !important; position: static; }

/* ===== Admin dashboard: minimal colour palette (navy · gold · brand colours) ===== */
/* table headers: purple / indigo gradients -> deep navy */
#admin-dash tr[class*="from-purple-700"], #admin-dash thead [class*="from-purple-7"] {
    background-image: linear-gradient(90deg, #0B1F36, #0F2942 55%, #16365A) !important;
    border-color: rgba(244, 169, 21, .35) !important;
}
#admin-dash th[class*="bg-purple-8"], #admin-dash th[class*="bg-purple-7"], #admin-dash td[class*="bg-purple-8"],
#admin-dash [class*="bg-purple-850"] { background-color: #16365A !important; border-color: rgba(255, 255, 255, .08) !important; }
#admin-dash [class*="border-purple-4"], #admin-dash [class*="border-purple-6"] { border-color: rgba(255, 255, 255, .1) !important; }
/* active toggles (pulse brand / sub-rows / report): violet gradients -> navy with a gold edge */
#admin-dash button[class*="from-purple-700"], #admin-dash button[class*="from-indigo-600"][class*="to-purple"] {
    background-image: none !important; background-color: #0F2942 !important; color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(244, 169, 21, .55), 0 6px 14px -8px rgba(15, 41, 66, .7) !important;
}
/* header action buttons: loud gradients -> quiet white chips with a coloured icon */
#admin-dash button[class*="from-sky-500"], #admin-dash button[class*="from-emerald-500"], #admin-dash button[class*="from-indigo-500"] {
    background-image: none !important; background-color: #fff !important; color: #0F2942 !important;
    border: 1px solid rgba(15, 41, 66, .12) !important; box-shadow: 0 1px 2px rgba(15, 41, 66, .05) !important;
}
#admin-dash button[class*="from-sky-500"] svg { color: #2F6FE4; }
#admin-dash button[class*="from-emerald-500"] svg { color: #059669; }
#admin-dash button[class*="from-indigo-500"] svg { color: #F4A915; }
#admin-dash button[class*="from-sky-500"]:hover, #admin-dash button[class*="from-emerald-500"]:hover, #admin-dash button[class*="from-indigo-500"]:hover {
    background-color: #0F2942 !important; color: #fff !important; border-color: #0F2942 !important;
}
#admin-dash button[class*="from-sky-500"]:hover svg, #admin-dash button[class*="from-emerald-500"]:hover svg, #admin-dash button[class*="from-indigo-500"]:hover svg { color: #F4A915; }
#admin-dash button[class*="from-sky-500"] > span.absolute, #admin-dash button[class*="from-emerald-500"] > span.absolute, #admin-dash button[class*="from-indigo-500"] > span.absolute { display: none; }
/* icon tiles: blue/indigo gradient -> navy */
#admin-dash div[class*="from-blue-600"][class*="to-indigo-600"] { background-image: linear-gradient(135deg, #0F2942, #1E3A8A) !important; box-shadow: 0 6px 14px -6px rgba(15, 41, 66, .6) !important; }
/* soft purple / indigo pills and highlights -> neutral navy tint */
#admin-dash [class*="bg-purple-50"], #admin-dash [class*="from-purple-100"] { background-image: none !important; background-color: rgba(15, 41, 66, .05) !important; border-color: rgba(15, 41, 66, .1) !important; color: #0F2942 !important; }
#admin-dash .text-purple-800, #admin-dash .text-purple-700, #admin-dash .text-purple-600 { color: #0F2942 !important; }
#admin-dash [class*="bg-indigo-100/50"] { background-color: rgba(244, 169, 21, .1) !important; }
#admin-dash .text-indigo-900 { color: #0F2942 !important; }
/* current-month / highlight columns: indigo tints -> soft gold, the theme's highlight colour */
#admin-dash td[class*="bg-indigo-50"], #admin-dash td[class*="bg-indigo-100"], #admin-dash td[class*="bg-indigo-200"],
#admin-dash div[class*="bg-indigo-50/90"] { background-color: rgba(244, 169, 21, .09) !important; border-color: rgba(244, 169, 21, .28) !important; }
#admin-dash td[class*="bg-indigo-200"] { background-color: rgba(244, 169, 21, .16) !important; }
#admin-dash div[class*="ring-indigo-500"] { --tw-ring-color: rgba(244, 169, 21, .35) !important; }
#admin-dash tr[class*="hover:bg-indigo-50"]:hover { background-color: rgba(15, 41, 66, .035) !important; }
/* small pills, icon wells and soft panels -> navy tint */
#admin-dash span[class*="bg-indigo-50"], #admin-dash div[class*="bg-indigo-50"]:not([class*="bg-indigo-50/90"]),
#admin-dash [class*="bg-indigo-500/10"], #admin-dash [class*="from-indigo-50"] {
    background-image: none !important; background-color: rgba(15, 41, 66, .05) !important; border-color: rgba(15, 41, 66, .1) !important;
}
#admin-dash [class*="hover:bg-indigo-100"]:hover { background-color: rgba(15, 41, 66, .08) !important; }
/* indigo text and icons -> navy */
#admin-dash .text-indigo-400, #admin-dash .text-indigo-500, #admin-dash .text-indigo-600, #admin-dash .text-indigo-700,
#admin-dash .text-indigo-800, #admin-dash .text-indigo-950, #admin-dash .text-purple-400 { color: #0F2942 !important; }
#admin-dash .text-indigo-200, #admin-dash [class*="text-indigo-300"] { color: rgba(226, 232, 240, .8) !important; }
#admin-dash [class*="group-hover:text-indigo-600"] { transition: color .15s; }
#admin-dash .group:hover [class*="group-hover:text-indigo-600"] { color: #F4A915 !important; }
#admin-dash .bg-indigo-500 { background-color: #F4A915 !important; }
#admin-dash input[class*="text-indigo-600"] { accent-color: #0F2942; color: #0F2942 !important; }
#admin-dash [class*="focus:ring-indigo-500"]:focus { --tw-ring-color: rgba(15, 41, 66, .2) !important; border-color: #0F2942 !important; }
/* solid indigo buttons, tiles and dark panels -> navy */
#admin-dash .bg-indigo-600 { background-color: #0F2942 !important; box-shadow: inset 0 0 0 1px rgba(244, 169, 21, .5) !important; }
#admin-dash div[class*="to-indigo-600"] { background-image: linear-gradient(135deg, #0F2942, #1E3A8A) !important; }
#admin-dash .bg-indigo-900, #admin-dash .bg-indigo-950 { background-color: #0F2942 !important; }
#admin-dash [class*="border-indigo-8"], #admin-dash [class*="border-indigo-9"] { border-color: rgba(255, 255, 255, .1) !important; }
#admin-dash [class*="shadow-indigo"] { --tw-shadow-color: rgba(15, 41, 66, .18) !important; }
#admin-dash span.bg-indigo-100, #admin-dash button.bg-indigo-50 { background-color: rgba(15, 41, 66, .06) !important; border-color: rgba(15, 41, 66, .12) !important; }
#admin-dash button.bg-indigo-50:hover { background-color: #0F2942 !important; color: #fff !important; }

/* ===== Territory Pulse: compact table (minimal premium) ===== */
.pt-shell { background: #fff; }
.pt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #EEF2F7; background: linear-gradient(180deg, #FBFCFE, #fff); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; color: #475569; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; transition: all .15s; }
.pt-chip:hover { border-color: #CBD5E1; color: #0F2942; }
.pt-chip.is-on { background: #0F2942; border-color: #0F2942; color: #fff; box-shadow: 0 6px 14px -8px rgba(15, 41, 66, .7); }
.pt-chip-n { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #F1F5F9; color: #0F2942; font-size: 9.5px; font-weight: 900; text-align: center; }
.pt-chip.is-on .pt-chip-n { background: #F4A915; color: #0F2942; }
.pt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); flex-shrink: 0; }
.pt-tools { display: flex; align-items: center; gap: 6px; }
.pt-search { position: relative; display: flex; align-items: center; height: 30px; padding: 0 8px 0 9px; gap: 6px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; color: #94A3B8; transition: all .15s; }
.pt-search:focus-within { border-color: #0F2942; box-shadow: 0 0 0 3px rgba(15, 41, 66, .08); color: #0F2942; }
.pt-search input { width: 150px; border: 0; outline: 0; background: transparent; font-size: 11px; font-weight: 700; color: #0F2942; }
.pt-search input::placeholder { color: #94A3B8; font-weight: 600; }
.pt-search button { color: #94A3B8; padding: 2px; border-radius: 6px; }
.pt-search button:hover { color: #0F2942; background: #F1F5F9; }
.pt-ghost { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; color: #475569; font-size: 10.5px; font-weight: 800; transition: all .15s; }
.pt-ghost:hover { border-color: #0F2942; color: #0F2942; }
.pt-ghost.is-on { background: rgba(244, 169, 21, .12); border-color: rgba(244, 169, 21, .5); color: #0F2942; }

.pt-wrap { max-height: 72vh; overflow: auto; }
.pt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.pt-table thead th { position: sticky; z-index: 3; background: #0F2942; color: #fff; }
.pt-table thead tr.pt-g th { top: 0; height: 28px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .92); background: #0B1F36; padding: 0 10px; }
.pt-table thead tr.pt-g th small { margin-left: 4px; font-size: 9px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); font-weight: 800; }
.pt-table thead tr.pt-g th.is-cur { box-shadow: inset 0 -2px 0 #F4A915, inset 1px 0 0 rgba(255, 255, 255, .1); }
.pt-table thead tr.pt-s th { top: 28px; height: 30px; padding: 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(226, 232, 240, .85); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pt-th { cursor: pointer; transition: background .15s, color .15s; user-select: none; }
.pt-th:hover { background: #16365A !important; color: #fff !important; }
.pt-th.is-sorted { color: #F4A915 !important; }
.pt-th-in { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pt-table thead svg { width: 11px; height: 11px; color: rgba(255, 255, 255, .35) !important; }
.pt-th.is-sorted svg { color: #F4A915 !important; }
.pt-mh { cursor: default; color: rgba(226, 232, 240, .7) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.pt-table thead .pt-corner { left: 0; top: 0; z-index: 5; min-width: 210px; text-align: left; padding: 0 16px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; background: #0B1F36; cursor: pointer; box-shadow: 1px 0 0 rgba(255, 255, 255, .08); }
.pt-table thead .pt-corner .pt-th-in { justify-content: flex-start; }
.pt-table .pt-gs { box-shadow: inset 1px 0 0 rgba(15, 41, 66, .08); }
.pt-table thead .pt-gs { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }

.pt-table tbody td { padding: 6px 8px; border-bottom: 1px solid #F1F5F9; color: #334155; font-weight: 700; background: #fff; transition: background .12s; }
.pt-table tbody td.pt-cur { background: #FFFCF4; }
.pt-table tbody td.pt-key { background: #FFF8E8; }
.pt-row:hover td { background: #F5F8FC !important; }
.pt-row:hover td.pt-terr { box-shadow: inset 3px 0 0 #F4A915, 1px 0 0 #EEF2F7; }
.pt-terr { position: sticky; left: 0; z-index: 2; text-align: left; padding: 6px 14px !important; box-shadow: 1px 0 0 #EEF2F7; }
.pt-terr-in { display: flex; align-items: center; gap: 9px; }
.pt-rank { width: 18px; text-align: right; font-size: 9.5px; font-weight: 800; color: #94A3B8; }
.pt-terr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-name { font-weight: 800; color: #0F2942; font-size: 11.5px; letter-spacing: -.005em; }
.pt-mini { display: block; width: 96px; height: 3px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.pt-mini i { display: block; height: 100%; border-radius: 99px; }
.pt-mute { color: #94A3B8 !important; font-weight: 600 !important; }
.pt-strong { color: #0F2942; font-weight: 900; }
.pt-nil { color: #CBD5E1; font-weight: 700; }
.pt-fy { display: inline-block; min-width: 34px; padding: 2px 8px; border-radius: 8px; background: rgba(244, 169, 21, .12); color: #8A5A00; font-weight: 900; font-size: 10.5px; }
.pt-fy.is-dark { background: #F4A915; color: #0F2942; }
.pt-short { color: #E11D48; font-weight: 800; }
.pt-done { color: #059669; font-weight: 900; }
.pt-model { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 7px; background: rgba(4, 26, 84, .07); color: #041A54; font-weight: 900; font-size: 10.5px; }
.pt-model.is-m { background: rgba(229, 34, 62, .08); color: #BE123C; }
.pt-total { font-size: 13px; font-weight: 900; color: #0F2942; }
.pt-ach { display: inline-flex; align-items: center; gap: 6px; }
.pt-ach-bar { width: 34px; height: 4px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.pt-ach-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.pt-ach b { min-width: 32px; text-align: left; font-size: 10.5px; font-weight: 900; color: var(--c); }
.pt-ach.is-dark .pt-ach-bar { background: rgba(255, 255, 255, .15); }
.pt-ach.is-dark b { color: #fff; }
.pt-ach.is-dark .pt-ach-bar i { background: #F4A915; }
.pt-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px dashed #CBD5E1; color: #64748B; font-size: 9.5px; font-weight: 800; }
.pt-tag.is-dark { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .75); }
.pt-table tbody tr.pt-totrow td { position: sticky; bottom: 0; z-index: 2; background: #0F2942 !important; color: #fff; font-weight: 900; border: 0; padding-top: 8px; padding-bottom: 8px; }
.pt-table tbody tr.pt-totrow td.pt-terr { z-index: 4; }
.pt-totrow .pt-name { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.pt-totrow .pt-mute { color: rgba(226, 232, 240, .65) !important; }
.pt-totrow .pt-strong, .pt-totrow .pt-total { color: #fff; }
.pt-totrow .pt-short { color: #FDA4AF; }
.pt-totrow .pt-gs { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.pt-empty { padding: 28px !important; color: #94A3B8 !important; font-weight: 700; }
.pt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 16px; border-top: 1px solid #EEF2F7; font-size: 10px; font-weight: 800; color: #475569; background: #FBFCFE; }
.pt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pt-legend em { font-style: normal; font-weight: 600; color: #94A3B8; }
.pt-legend .pt-legend-r { margin-left: auto; font-weight: 600; color: #94A3B8; }
/* pulse header toolbar: violet detailed-view toggle -> navy */
#admin-dash button[class*="from-violet-600"] { background-image: none !important; background-color: #0F2942 !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(244, 169, 21, .55) !important; }
.pt-search input { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; border-radius: 0 !important; }
.pt-total.is-zero { color: #CBD5E1; font-size: 11px; }

/* ===== Territory Pulse: shared toolbar second line (Detailed View) ===== */
.pt-bar2 { padding-top: 8px; padding-bottom: 8px; background: #fff; justify-content: flex-start; gap: 10px 22px; }
.pt-opt { display: flex; align-items: center; gap: 8px; }
.pt-opt-l { font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.pt-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: #F1F5F9; border: 1px solid #E8EDF3; }
.pt-seg button { height: 24px; padding: 0 10px; border-radius: 8px; font-size: 10.5px; font-weight: 800; color: #64748B; transition: background .12s, color .12s; }
.pt-seg button:hover { color: #0F2942; }
.pt-seg button.is-on { background: #0F2942; color: #fff; box-shadow: 0 4px 10px -6px rgba(15, 41, 66, .8); }

/* ===== Territory Pulse: Detailed View table (light markup, sticky header / columns / totals) ===== */
.pd-wrap { max-height: 74vh; }
.pd-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 11px; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.pd-table th { position: sticky; z-index: 3; background: #0F2942; color: rgba(226, 232, 240, .85); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.pd-h1 th { top: 0; height: 28px; background: #0B1F36; color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pd-h2 th { top: 28px; height: 24px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.pd-h3 th { top: 52px; height: 24px; font-size: 9px; letter-spacing: .03em; color: rgba(226, 232, 240, .6); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pd-table th.gs { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.pd-q.can-fold { cursor: pointer; }
.pd-q.can-fold:hover { background: #16365A; }
.pd-q-in { display: inline-flex; align-items: center; gap: 6px; }
.pd-fold { width: 6px; height: 6px; border-right: 2px solid #F4A915; border-bottom: 2px solid #F4A915; transform: rotate(-45deg); transition: transform .15s; }
.pd-fold.is-open { transform: rotate(45deg); margin-top: -3px; }
.pd-h1 th.fy, .pd-h2 th.fy { background: #1B3A5C; }
.pd-h2 th.qt, .pd-h3 th.qt { background: #132F4E; color: #fff; }
.pd-h2 th.cur { color: #F4A915; box-shadow: inset 0 -2px 0 #F4A915, inset 1px 0 0 rgba(255, 255, 255, .1); }
.pd-h2 th.cur small { font-size: 8px; padding: 0 4px; border-radius: 4px; background: #F4A915; color: #0F2942; margin-left: 3px; letter-spacing: .04em; }
.pd-h2 th.fut { color: rgba(226, 232, 240, .4); }
.pd-h3 th.cur { color: #F4A915; }
.pd-h3 th.fy { background: #1B3A5C; color: #fff; }
.pd-sort { cursor: pointer; }
.pd-sort:hover { color: #F4A915 !important; }
.pd-sort.is-sorted { color: #F4A915 !important; }
.pd-corner { left: 0; top: 0; z-index: 6 !important; background: #0B1F36 !important; color: #fff !important; text-align: left; padding: 0 14px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pd-corner .pt-th-in { justify-content: flex-start; }
.pd-corner svg { width: 11px; height: 11px; color: rgba(255, 255, 255, .4) !important; }
.pd-fyh { left: 190px; top: 0; z-index: 6 !important; background: #0B1F36 !important; color: #F4A915 !important; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; box-shadow: 1px 0 0 rgba(255, 255, 255, .1); }

.pd-table td { padding: 0 4px; height: 30px; border-bottom: 1px solid #F1F5F9; background: #fff; color: #334155; font-weight: 700; }
.pd-table td.gs { box-shadow: inset 1px 0 0 #EEF2F7; }
.pd-table td.cur { background: #FFFBF0; }
.pd-table td.fut { color: #CBD5E1; }
.pd-table td.qt { background: #F6F8FB; }
.pd-table td.fy { background: #FFF6E0; }
.pd-terr { position: sticky; left: 0; z-index: 2; text-align: left; padding: 0 12px !important; box-shadow: 1px 0 0 #EEF2F7; }
.pd-fyb { position: sticky; left: 190px; z-index: 2; box-shadow: 1px 0 0 #E2E8F0; }
.pd-fyb span { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 7px; background: rgba(244, 169, 21, .13); color: #8A5A00; font-weight: 900; font-size: 10.5px; }
.pd-ti { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.pd-rank { width: 16px; text-align: right; font-size: 9.5px; font-weight: 800; color: #94A3B8; flex-shrink: 0; }
.pd-name { font-weight: 800; color: #0F2942; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.pd-exp { width: 16px; height: 16px; border-radius: 5px; display: inline-grid; place-items: center; flex-shrink: 0; color: #94A3B8; }
.pd-exp::before { content: ''; width: 5px; height: 5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.pd-exp.is-open::before { transform: rotate(45deg); margin-top: -2px; }
.pd-exp:hover { background: #F1F5F9; color: #0F2942; }
.pd-row:hover td { background: #F5F8FC; }
.pd-row:hover td.pd-terr { box-shadow: inset 3px 0 0 #F4A915, 1px 0 0 #EEF2F7; }

/* brand sub-rows: quieter, smaller */
.pd-sub td { height: 24px; font-size: 10px; font-weight: 600; color: #64748B; background: #FCFDFE; border-bottom-color: #F5F7FA; }
.pd-sub td.cur { background: #FFFDF6; }
.pd-sub td.qt { background: #F8FAFC; }
.pd-sub td.fy { background: #FFF9EB; }
.pd-sub .pd-fyb { font-weight: 800; color: #8A5A00; }
.pd-ti-sub { padding-left: 42px; font-size: 10px; font-weight: 800; color: #475569; gap: 6px; }
.pd-sub.f td.ms { color: #041A54; }
.pd-sub.m td.ms { color: #BE123C; }
.pd-sub:hover td { background: #F5F8FC; }

/* metric cells */
.pd-table td.mb, .pd-table td.mp { color: #94A3B8; font-weight: 600; }
.pd-table td.ms { color: #0F2942; font-weight: 900; }
.pd-table td.ms.z { color: #CBD5E1; font-weight: 700; }
.pd-table td.ma { font-weight: 900; }
.pd-table td.a1 { color: #059669; }
.pd-table td.a2 { color: #D97706; }
.pd-table td.a3 { color: #E11D48; }
.pd-table td.a0 { color: #CBD5E1; }
.pd-table td.mg { font-size: 10px; color: #CBD5E1; }
.pd-table td.mg.up { color: #059669; }
.pd-table td.mg.dn { color: #E11D48; }
.pd-table td.fut.ms, .pd-table td.fut.ma, .pd-table td.fut.mg { color: #E2E8F0; }

/* grand totals stay pinned at the bottom */
.pd-tot td { position: sticky; bottom: var(--b, 0px); z-index: 2; height: 32px; border: 0; background: #16365A !important; color: rgba(255, 255, 255, .92); font-weight: 900; }
.pd-tot.is-g td { background: #0F2942 !important; }
.pd-tot td.pd-terr, .pd-tot td.pd-fyb { z-index: 4; }
.pd-tot td.gs { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.pd-tot .pd-name { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.pd-tot .pd-fyb span { background: #F4A915; color: #0F2942; }
.pd-tot td.mb, .pd-tot td.mp { color: rgba(226, 232, 240, .6); }
.pd-tot td.ms, .pd-tot td.ms.z { color: #fff; }
.pd-tot td.a1 { color: #34D399; } .pd-tot td.a2 { color: #FBBF24; } .pd-tot td.a3 { color: #FDA4AF; } .pd-tot td.a0 { color: rgba(255, 255, 255, .35); }
.pd-tot td.mg.up { color: #34D399; } .pd-tot td.mg.dn { color: #FDA4AF; }
.pd-tot td.fy { background: #1B3A5C !important; }
.pd-tot td.fut { color: rgba(255, 255, 255, .3) !important; }

/* legend keys */
.pd-key { display: inline-block; padding: 0 6px; margin-right: 3px; border-radius: 5px; font-weight: 900; font-size: 9.5px; background: #F8FAFC; }
.pd-key.a1 { color: #059669; } .pd-key.a2 { color: #D97706; } .pd-key.a3 { color: #E11D48; }
.pd-swatch { display: inline-block; width: 12px; height: 10px; border-radius: 3px; border: 1px solid #E2E8F0; }
.pd-swatch.cur { background: #FFFBF0; border-color: #F4A915; } .pd-swatch.qt { background: #F6F8FB; } .pd-swatch.fy { background: #FFF6E0; }
.pd-h1 th.pd-q { text-align: left; padding: 0 12px; }
.pd-h1 th.pd-q.fy { text-align: center; }
.pd-q-in { color: #fff; }

/* ===== Area Summary header (matches the pulse tables) ===== */
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #EEF2F7; background: linear-gradient(180deg, #FBFCFE, #fff); }
.pt-head-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0F2942, #1E3A8A); box-shadow: 0 6px 14px -8px rgba(15, 41, 66, .8); flex-shrink: 0; }
.pt-head-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: #0F2942; letter-spacing: -.01em; }
.pt-head-tag { padding: 2px 8px; border-radius: 999px; background: rgba(244, 169, 21, .14); color: #8A5A00; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pt-head-s { margin-top: 2px; font-size: 10px; font-weight: 700; color: #94A3B8; letter-spacing: .04em; text-transform: uppercase; }
.pt-avatar { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; background: #0F2942; color: #F4A915; font-size: 9.5px; font-weight: 900; }
.pt-table td.pt-am { text-align: left; color: #475569; font-weight: 700; padding-left: 12px; }
.pt-table thead tr.pt-s th:not(.pt-th) { cursor: default; }
/* any remaining purple / indigo borders: quiet white on navy headers, soft slate in body cells */
#admin-dash th[class*="border-purple"], #admin-dash tr[class*="border-purple"], #admin-dash th[class*="border-indigo"], #admin-dash tr[class*="border-indigo"] { border-color: rgba(255, 255, 255, .1) !important; }
#admin-dash td[class*="border-purple"], #admin-dash td[class*="border-indigo"], #admin-dash table[class*="border-indigo"], #admin-dash div[class*="border-indigo-2"] { border-color: #EEF2F7 !important; }

/* ===== Officer: Log / edit manual delivery (mobile-first bottom sheet) ===== */
.md-sheet { position: relative; z-index: 10; width: 100%; max-height: 94dvh; height: 94dvh; display: flex; flex-direction: column; background: #F6F8FB; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -20px rgba(15, 41, 66, .45); transition: transform .32s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
@media (min-width: 640px) { .md-sheet { max-width: 560px; height: auto; max-height: 92vh; border-radius: 24px; } }
.md-grab { width: 44px; height: 5px; border-radius: 99px; background: #CBD5E1; margin: 8px auto 0; flex-shrink: 0; }
.md-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 18px 10px; background: #fff; flex-shrink: 0; }
.md-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-title { font-size: 21px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; }
.md-x { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: #F1F5F9; color: #475569; flex-shrink: 0; }
.md-x:active { transform: scale(.94); }
.md-progress { height: 3px; background: #EEF2F7; flex-shrink: 0; }
.md-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0F2942, #F4A915); transition: width .3s ease; }
.md-steps { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; background: #fff; border-bottom: 1px solid #EEF2F7; flex-shrink: 0; scrollbar-width: none; }
.md-steps::-webkit-scrollbar { display: none; }
.md-steps button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid #E2E8F0; background: #fff; color: #64748B; font-size: 12px; font-weight: 800; }
.md-steps button.is-cur { border-color: #0F2942; color: #0F2942; }
.md-steps button.is-done { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.md-steps button.is-done.is-cur { border-color: #059669; }

.md-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px 0; scroll-padding-top: 12px; }
.md-space { height: 16px; }
.md-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: #FFF7E0; color: #8A5A00; font-size: 12.5px; font-weight: 700; }
.md-note span { flex: 1; }
.md-note button { font-weight: 900; color: #0F2942; text-decoration: underline; }
.md-note.is-admin { background: #EEF4FF; color: #1E3A8A; }

.md-card { background: #fff; border-radius: 20px; padding: 14px 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15, 41, 66, .04), 0 8px 24px -18px rgba(15, 41, 66, .25); }
.md-card-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: #0F2942; margin-bottom: 4px; }
.md-num { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: #0F2942; color: #F4A915; font-size: 11px; font-weight: 900; }
.md-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #64748B; margin: 12px 2px 6px; }
.md-label.md-warn { color: #B45309; }
.md-opt { font-size: 10px; font-weight: 700; color: #94A3B8; padding: 1px 6px; border-radius: 6px; background: #F1F5F9; }
.md-input { width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #FBFCFE; font-size: 16px; font-weight: 700; color: #0F2942; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none; }
.md-input::placeholder { color: #A9B4C2; font-weight: 600; }
.md-input:focus { border-color: #0F2942; background: #fff; box-shadow: 0 0 0 4px rgba(15, 41, 66, .08); }
.md-select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; text-overflow: ellipsis; }
.md-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.md-row2 { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
@media (min-width: 400px) { .md-row2 { grid-template-columns: 1fr 1fr; } }
.md-hint { min-height: 15px; margin: 4px 4px 0; font-size: 11px; font-weight: 700; color: #94A3B8; }
.md-hint.is-ok { color: #059669; } .md-hint.is-warn { color: #D97706; } .md-hint.is-bad { color: #E11D48; }
.md-reveal { animation: mdIn .22s ease; }
@keyframes mdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.md-chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 16px; transition: box-shadow .2s; }
.md-chips.md-scroll { flex-wrap: nowrap; overflow-x: auto; margin: 8px -14px 0; padding: 0 14px 2px; scrollbar-width: none; }
.md-chips.md-scroll::-webkit-scrollbar { display: none; }
.md-seg2 > .md-chip, .md-seg3 > .md-chip { flex: 1 1 0; justify-content: center; }
.md-seg5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.md-seg5 > .md-chip { justify-content: center; padding: 0 4px; }
.md-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #fff; color: #334155; font-size: 14px; font-weight: 800; white-space: nowrap; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.md-chip:active { transform: scale(.96); }
.md-chip.is-sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 99px; flex-shrink: 0; color: #475569; }
.md-chip.is-on { background: #0F2942; border-color: #0F2942; color: #fff; box-shadow: 0 8px 18px -10px rgba(15, 41, 66, .8); }
.md-chip.is-on.is-m { background: #E5223E; border-color: #E5223E; box-shadow: 0 8px 18px -10px rgba(229, 34, 62, .8); }
.md-chip.is-on .md-dot { background: #F4A915 !important; }
.md-dot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.md-empty { font-size: 12.5px; font-weight: 700; color: #A9B4C2; padding: 8px 2px; }
.md-bad, .md-input.md-bad { border-color: #F43F5E !important; box-shadow: 0 0 0 4px rgba(244, 63, 94, .12) !important; }
.md-chips.md-bad { box-shadow: 0 0 0 2px #F43F5E; padding: 4px; margin: -4px; }
.md-chips.md-scroll.md-bad { margin: 8px -14px 0; }

.md-stepper { display: flex; align-items: center; height: 48px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #FBFCFE; overflow: hidden; }
.md-stepper button { width: 52px; height: 100%; font-size: 22px; font-weight: 700; color: #0F2942; flex-shrink: 0; }
.md-stepper button:active { background: #EEF2F7; }
.md-stepper input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; text-align: center; font-size: 18px; font-weight: 900; color: #0F2942; outline: none; -moz-appearance: textfield; }
.md-stepper input::-webkit-outer-spin-button, .md-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.md-money { position: relative; }
.md-money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-weight: 800; font-size: 15px; pointer-events: none; }
.md-money .md-input { padding-left: 32px; }
.md-dp-badge { margin-left: auto; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 900; background: #E2E8F0; color: #475569; }
.md-dp-badge[data-band="30"] { background: #FEF3C7; color: #92400E; }
.md-dp-badge[data-band="40"] { background: #DBEAFE; color: #1E3A8A; }
.md-dp-badge[data-band="50"] { background: #D1FAE5; color: #065F46; }
.md-dpbar { position: relative; height: 6px; margin: 10px 2px 0; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.md-dpbar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #0F2942, #F4A915); transition: width .25s; }
.md-dpbar span { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 255, 255, .9); }
.md-quick { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.md-quick span { font-size: 11px; font-weight: 800; color: #94A3B8; margin-right: 2px; }
.md-quick button { flex: 1; height: 34px; border-radius: 10px; background: #F1F5F9; color: #0F2942; font-size: 12.5px; font-weight: 900; }
.md-quick button:active { background: #0F2942; color: #fff; }

.md-foot { flex-shrink: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid #EEF2F7; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.md-summary { font-size: 12px; font-weight: 700; color: #64748B; margin: 0 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-summary b { color: #0F2942; }
.md-submit { width: 100%; height: 54px; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #94A3B8; color: #fff; font-size: 15.5px; font-weight: 900; letter-spacing: .01em; transition: background .2s, transform .1s, box-shadow .2s; }
.md-submit b { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.md-submit b:empty { display: none; }
.md-submit.is-ready { background: linear-gradient(135deg, #0F2942, #1E3A8A); box-shadow: 0 14px 28px -14px rgba(15, 41, 66, .9); }
.md-submit:active { transform: scale(.98); }

/* ===== Officer: my logged deliveries ===== */
.ml-wrap { margin-bottom: 24px; }
.ml-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ml-ic { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: #0F2942; color: #F4A915; flex-shrink: 0; }
.ml-title { font-size: 15px; font-weight: 900; color: #0F2942; }
.ml-sub2 { font-size: 11px; font-weight: 700; color: #94A3B8; }
.ml-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ml-chips { display: flex; gap: 6px; }
.ml-chips button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; border: 1.5px solid #E2E8F0; background: #fff; color: #475569; font-size: 12.5px; font-weight: 800; }
.ml-chips button b { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: #F1F5F9; color: #0F2942; font-size: 10.5px; text-align: center; }
.ml-chips button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.ml-chips button.is-on b { background: #F4A915; }
.ml-search { flex: 1 1 160px; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #E2E8F0; background: #fff; color: #94A3B8; }
.ml-search:focus-within { border-color: #0F2942; color: #0F2942; }
.ml-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 700; color: #0F2942; }
.ml-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .ml-list { grid-template-columns: 1fr 1fr; } }
.ml-card { position: relative; background: #fff; border-radius: 18px; padding: 12px 12px 10px; box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 10px 26px -20px rgba(15, 41, 66, .35); overflow: hidden; }
.ml-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--b); }
.ml-top { display: flex; align-items: center; gap: 10px; }
.ml-avatar { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--b) 10%, #fff); color: var(--b); font-weight: 900; font-size: 15px; flex-shrink: 0; }
.ml-main { flex: 1; min-width: 0; }
.ml-name { font-size: 14.5px; font-weight: 900; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-sub { font-size: 12px; font-weight: 700; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: #FFF7E0; color: #B45309; font-size: 10.5px; font-weight: 900; flex-shrink: 0; }
.ml-status.is-done { background: #ECFDF5; color: #047857; }
.ml-pulse { width: 7px; height: 7px; border-radius: 99px; background: #F59E0B; box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: mlPulse 1.8s infinite; }
@keyframes mlPulse { 70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.ml-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.ml-tag { padding: 2px 8px; border-radius: 7px; background: #F1F5F9; color: #475569; font-size: 10.5px; font-weight: 800; }
.ml-tag.is-new { background: #ECFDF5; color: #047857; } .ml-tag.is-rs { background: #FFF7E0; color: #B45309; } .ml-tag.is-cn { background: #FFF1F2; color: #BE123C; }
.ml-tag.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ml-date { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #94A3B8; }
.ml-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 7px 9px; border-radius: 10px; background: #EEF4FF; color: #1E3A8A; font-size: 11.5px; font-weight: 700; }
.ml-actions { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #EEF2F7; }
.ml-edit { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 12px; background: #0F2942; color: #fff; font-size: 13px; font-weight: 900; }
.ml-edit:active { transform: scale(.96); }
.ml-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #94A3B8; }
.ml-empty { padding: 22px; text-align: center; font-size: 13px; font-weight: 700; color: #94A3B8; background: #fff; border-radius: 16px; }

/* ===== Delivery form: one chassis per unit ===== */
.md-units-row { display: flex; align-items: flex-end; gap: 12px; }
.md-units-row > div:first-child { width: 160px; flex-shrink: 0; }
.md-units-note { flex: 1; padding-bottom: 14px; font-size: 12px; font-weight: 700; color: #94A3B8; line-height: 1.3; }
.md-units-note b { color: #0F2942; }
.md-chassis { display: flex; flex-direction: column; gap: 8px; }
.md-ch-row { position: relative; display: flex; align-items: center; animation: mdIn .25s ease both; }
.md-ch-no { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: #0F2942; color: #F4A915; font-size: 11.5px; font-weight: 900; pointer-events: none; transition: background .2s; }
.md-ch-row .md-ch-in { padding-left: 44px; padding-right: 74px; }
.md-ch-state { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 900; color: #94A3B8; pointer-events: auto; }
.md-ch-row.is-ok .md-ch-no { background: #059669; color: #fff; }
.md-ch-row.is-ok .md-ch-state { color: #059669; font-size: 14px; }
.md-ch-row.is-warn .md-ch-state { color: #D97706; }
.md-ch-row.is-bad .md-ch-no { background: #E11D48; color: #fff; }
.md-ch-row.is-bad .md-ch-state { color: #E11D48; }
.md-ch-row.is-bad .md-ch-in { border-color: #FDA4AF; }

/* ===== My logged deliveries: compact list ===== */
.ml-head { margin-bottom: 8px; }
.ml-panel { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 12px 30px -22px rgba(15, 41, 66, .4); overflow: hidden; }
.ml-tools { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #F1F5F9; }
.ml-seg { display: flex; padding: 2px; border-radius: 11px; background: #F1F5F9; flex-shrink: 0; }
.ml-seg button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #64748B; }
.ml-seg button b { font-size: 10px; font-weight: 900; color: #94A3B8; }
.ml-seg button.is-on { background: #0F2942; color: #fff; box-shadow: 0 4px 10px -6px rgba(15, 41, 66, .8); }
.ml-seg button.is-on b { color: #F4A915; }
.ml-tools .ml-search { flex: 1 1 auto; min-width: 0; height: 34px; border-width: 1px; border-radius: 10px; }
.ml-rows { max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ml-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-bottom: 1px solid #F5F7FA; transition: background .12s; }
.ml-row:last-child { border-bottom: 0; }
.ml-row:active { background: #F5F8FC; }
.ml-edge { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--b); }
.ml-mid { flex: 1; min-width: 0; }
.ml-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ml-l1 .ml-name { font-size: 13.5px; font-weight: 900; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-type { flex-shrink: 0; padding: 0 6px; border-radius: 6px; font-size: 9.5px; font-weight: 900; line-height: 17px; }
.ml-type.is-new { background: #ECFDF5; color: #047857; } .ml-type.is-rs { background: #FFF7E0; color: #B45309; } .ml-type.is-cn { background: #FFF1F2; color: #BE123C; }
.ml-qty { flex-shrink: 0; font-size: 11px; font-weight: 900; color: var(--b); }
.ml-l2 { margin-top: 1px; font-size: 11.5px; font-weight: 600; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-l3 { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; font-weight: 700; color: #1E3A8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ml-st { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 900; color: #B45309; }
.ml-st.is-done { color: #047857; }
.ml-dt { font-size: 10.5px; font-weight: 700; color: #A9B4C2; }
.ml-btn { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: #0F2942; color: #fff; }
.ml-btn:active { transform: scale(.92); }
.ml-btn.is-lock { background: #F1F5F9; color: #A9B4C2; }
.ml-row.is-done .ml-l1 .ml-name { color: #334155; }
.ml-search input { border: 0 !important; padding: 0 !important; box-shadow: none !important; height: auto !important; border-radius: 0 !important; background: transparent !important; }
.ml-cid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: #94A3B8; }

/* ===== Historical analytics: theme + Period analyzer ===== */
#admin-dash[data-page="analytics"] div[class*="from-sky-500"][class*="to-indigo-600"] { background-image: linear-gradient(135deg, #0F2942, #1E3A8A) !important; box-shadow: 0 6px 14px -6px rgba(15, 41, 66, .6) !important; }
#admin-dash[data-page="analytics"] [class*="bg-sky-100"] { background-color: rgba(244, 169, 21, .14) !important; color: #8A5A00 !important; border-color: rgba(244, 169, 21, .35) !important; }
#admin-dash[data-page="analytics"] button.bg-white[class*="text-sky-7"], #admin-dash[data-page="analytics"] button.bg-white[class*="text-indigo-7"], #admin-dash[data-page="analytics"] button.bg-white[class*="text-amber-7"], #admin-dash[data-page="analytics"] button.bg-white[class*="text-emerald-7"] { background: #0F2942 !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(244, 169, 21, .5) !important; }
#admin-dash[data-page="analytics"] [class*="bg-sky-50"][class*="border-sky-300"] { background: #0F2942 !important; color: #fff !important; border-color: #0F2942 !important; }

.ra-card { background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 18px 40px -28px rgba(15, 41, 66, .45); overflow: hidden; }
.ra-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; background: linear-gradient(120deg, #0B1F36, #0F2942 60%, #16365A); color: #fff; }
.ra-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(244, 169, 21, .16); color: #F4A915; flex-shrink: 0; }
.ra-title { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.ra-subt { font-size: 11px; font-weight: 600; color: rgba(226, 232, 240, .7); margin-top: 1px; }
.ra-ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 11.5px; font-weight: 800; border: 1px solid rgba(255, 255, 255, .15); }
.ra-ghost:hover { background: #F4A915; color: #0F2942; border-color: #F4A915; }
.ra-controls { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #EEF2F7; background: #FBFCFE; }
.ra-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ra-dates label { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px; border-radius: 12px; border: 1.5px solid #E2E8F0; background: #fff; }
.ra-dates label:focus-within { border-color: #0F2942; box-shadow: 0 0 0 3px rgba(15, 41, 66, .08); }
.ra-dates label span { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.ra-dates input { border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 4px !important; font-size: 13.5px; font-weight: 800; color: #0F2942; height: 36px; }
.ra-days { padding: 3px 10px; border-radius: 99px; background: rgba(244, 169, 21, .14); color: #8A5A00; font-size: 11px; font-weight: 900; }
.ra-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ra-presets::-webkit-scrollbar { display: none; }
.ra-presets button { flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid #E2E8F0; background: #fff; color: #475569; font-size: 11.5px; font-weight: 800; }
.ra-presets button:hover { border-color: #0F2942; color: #0F2942; }
.ra-presets button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.ra-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ra-sel { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; color: #94A3B8; }
.ra-sel select { border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 12px; font-weight: 800; color: #0F2942; padding: 0 4px !important; max-width: 200px; height: 32px; }
.ra-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: #F1F5F9; }
.ra-seg button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #64748B; }
.ra-seg button.is-on { background: #0F2942; color: #fff; box-shadow: 0 4px 10px -6px rgba(15, 41, 66, .8); }
.ra-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; vertical-align: 1px; }
.ra-seg .ra-dot { margin-right: 0; }
.ra-context { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 18px; font-size: 11.5px; font-weight: 600; color: #64748B; border-bottom: 1px solid #F1F5F9; }
.ra-context b { color: #0F2942; }
.ra-context-r { margin-left: auto; color: #94A3B8; }
.ra-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #EEF2F7; border-bottom: 1px solid #EEF2F7; }
@media (min-width: 640px) { .ra-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ra-kpis { grid-template-columns: repeat(6, 1fr); } }
.ra-kpi { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: #fff; }
.ra-k { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.ra-v { font-size: 24px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ra-s { font-size: 11px; font-weight: 700; color: #94A3B8; }
.ra-kpi.is-main { background: linear-gradient(180deg, #FFFCF4, #fff); }
.ra-kpi.is-main::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #F4A915; }
.ra-kpi.is-up .ra-v { color: #059669; } .ra-kpi.is-dn .ra-v { color: #E11D48; } .ra-kpi.is-cn .ra-v { color: #BE123C; }
.ra-kpi.is-ach { padding-right: 64px; }
.ra-ring { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #EEF2F7 0); }
.ra-ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.ra-chartbox { padding: 14px 18px 10px; border-bottom: 1px solid #F1F5F9; }
.ra-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 900; color: #0F2942; }
.ra-legend { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: #64748B; }
.ra-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ra-legend i.is-line { height: 3px; border-radius: 2px; vertical-align: 2px; }
.ra-break { padding: 12px 18px 16px; }
.ra-break-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ra-break-t { font-size: 12px; font-weight: 900; color: #0F2942; }
.ra-tablewrap { max-height: 440px; overflow: auto; border-radius: 14px; border: 1px solid #EEF2F7; }
.ra-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ra-table th { position: sticky; top: 0; z-index: 2; background: #0F2942; color: rgba(226, 232, 240, .9); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; text-align: right; cursor: pointer; }
.ra-table th.l, .ra-table td.l { text-align: left; }
.ra-table th[data-dir] { color: #F4A915; }
.ra-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid #F1F5F9; font-weight: 700; color: #334155; }
.ra-table tbody tr:hover td { background: #F5F8FC; }
.ra-table td.l { font-weight: 800; color: #0F2942; }
.ra-table td.mu { color: #94A3B8; font-weight: 600; }
.ra-table td.st { color: #0F2942; font-weight: 900; }
.ra-table tfoot td { position: sticky; bottom: 0; background: #0F2942; color: #fff; font-weight: 900; border: 0; }
.ra-table tfoot .ra-ach b { color: #fff; }
.ra-table tfoot .ra-ach-bar { background: rgba(255, 255, 255, .15); }
.ra-ach { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ra-ach-bar { width: 38px; height: 4px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.ra-ach-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ra-ach b { min-width: 36px; text-align: right; color: var(--c); font-weight: 900; }
.ra-up { color: #059669; font-weight: 900; } .ra-dn { color: #E11D48; font-weight: 900; } .ra-flat { color: #94A3B8; }
.ra-new { padding: 1px 7px; border-radius: 99px; background: #EEF4FF; color: #1E3A8A; font-size: 10.5px; font-weight: 900; }
.ra-cn { padding: 1px 8px; border-radius: 99px; background: #FFF1F2; color: #BE123C; font-weight: 900; }
.ra-nil { color: #CBD5E1; }
.ra-table tfoot .ra-up { color: #34D399; } .ra-table tfoot .ra-dn { color: #FDA4AF; }
.ra-empty { text-align: center !important; padding: 26px !important; color: #94A3B8 !important; }
.ra-foot { margin-top: 10px; font-size: 11px; font-weight: 600; color: #94A3B8; line-height: 1.5; }

/* ===== Period analyzer: multiple territory picker ===== */
.ra-tp { position: relative; }
.ra-tp-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 320px; padding: 0 10px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; color: #94A3B8; font-size: 12px; font-weight: 800; }
.ra-tp-btn:hover, .ra-tp.is-open .ra-tp-btn { border-color: #0F2942; }
.ra-tp-btn.is-set { background: #0F2942; border-color: #0F2942; color: #F4A915; }
.ra-tp-label { color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-tp-btn.is-set .ra-tp-label { color: #fff; }
.ra-tp-btn b { min-width: 20px; padding: 0 6px; border-radius: 99px; background: #F4A915; color: #0F2942; font-size: 10.5px; line-height: 18px; text-align: center; }
.ra-tp-chev { transition: transform .15s; }
.ra-tp.is-open .ra-tp-chev { transform: rotate(180deg); }
.ra-tp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 320px; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(15, 41, 66, .45), 0 0 0 1px rgba(15, 41, 66, .06); overflow: hidden; animation: mdIn .18s ease; }
.ra-tp-search { display: flex; align-items: center; gap: 7px; margin: 10px 10px 6px; height: 36px; padding: 0 10px; border-radius: 10px; background: #F1F5F9; color: #94A3B8; }
.ra-tp-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 13px; font-weight: 700; color: #0F2942; }
.ra-tp-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 10px 8px; }
.ra-tp-areas span { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; margin-right: 2px; }
.ra-tp-areas button { height: 26px; padding: 0 9px; border-radius: 99px; border: 1px solid #E2E8F0; background: #fff; color: #475569; font-size: 11px; font-weight: 800; }
.ra-tp-areas button.is-part { border-color: #F4A915; color: #8A5A00; background: rgba(244, 169, 21, .1); }
.ra-tp-areas button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.ra-tp-acts { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9; }
.ra-tp-acts button { font-size: 11.5px; font-weight: 900; color: #0F2942; }
.ra-tp-acts button:hover { color: #B45309; }
.ra-tp-acts span { margin-left: auto; font-size: 11px; font-weight: 700; color: #94A3B8; }
.ra-tp-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.ra-tp-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #334155; cursor: pointer; }
.ra-tp-item:hover { background: #F5F8FC; }
.ra-tp-item input { width: 16px; height: 16px; accent-color: #0F2942; flex-shrink: 0; }
.ra-tp-item input:checked + span { color: #0F2942; font-weight: 900; }
.ra-tp-foot { padding: 8px 10px; border-top: 1px solid #F1F5F9; }
.ra-tp-foot button { width: 100%; height: 34px; border-radius: 10px; background: #0F2942; color: #fff; font-size: 12.5px; font-weight: 900; }
.ra-controls { position: relative; z-index: 20; }
.ra-tp.is-open { z-index: 40; }

/* ===== Sales Analytics page: compact historical section ===== */
.ha-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ha-page-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #0F2942, #1E3A8A); color: #F4A915; box-shadow: 0 8px 18px -10px rgba(15, 41, 66, .8); flex-shrink: 0; }
.ha-page-t { font-size: 20px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; line-height: 1.1; }
.ha-page-s { font-size: 11.5px; font-weight: 600; color: #94A3B8; margin-top: 2px; }
.ha-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ha-sec-bar { width: 4px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, #F4A915, #0F2942); flex-shrink: 0; }
.ha-sec-t { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: #0F2942; letter-spacing: -.01em; }
.ha-sec-tag { padding: 2px 8px; border-radius: 99px; background: rgba(244, 169, 21, .14); color: #8A5A00; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.ha-sec-s { font-size: 11px; font-weight: 600; color: #94A3B8; }
.ha-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 41, 66, .06), 0 0 0 1px #EEF2F7; overflow-x: auto; scrollbar-width: none; }
.ha-tabs::-webkit-scrollbar { display: none; }
.ha-tabs button { flex-shrink: 0; }

.ha-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 10px; background: #EEF2F7; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 12px 28px -24px rgba(15, 41, 66, .45); }
@media (min-width: 640px) { .ha-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ha-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ha-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: #fff; min-width: 0; }
.ha-kpi.is-main { background: linear-gradient(180deg, #FFFCF4, #fff); box-shadow: inset 0 3px 0 #F4A915; }
.ha-k { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.ha-v { font-size: 20px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-v.is-txt { font-size: 14.5px; line-height: 1.6; }
.ha-v.is-up { color: #059669; } .ha-v.is-dn { color: #E11D48; }
.ha-s { font-size: 10.5px; font-weight: 700; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ha-ins { margin-bottom: 14px; padding: 10px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 12px 28px -24px rgba(15, 41, 66, .45); }
.ha-ins-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #0F2942; }
.ha-ins-h svg { color: #F4A915; }
.ha-ins-h span { font-weight: 700; letter-spacing: 0; text-transform: none; color: #94A3B8; }
.ha-ins-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .ha-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ha-ins-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ha-in { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 12px; background: #F8FAFC; min-width: 0; }
.ha-in-ic { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: #E2E8F0; color: #475569; }
.ha-in.is-up .ha-in-ic { background: #D1FAE5; color: #047857; }
.ha-in.is-dn .ha-in-ic { background: #FFE4E6; color: #BE123C; }
.ha-in.is-mid .ha-in-ic { background: #FEF3C7; color: #B45309; }
.ha-in-t { font-size: 12.5px; font-weight: 900; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-in-s { font-size: 11px; font-weight: 600; color: #64748B; line-height: 1.35; }

/* tighter historical cards and charts */
#admin-dash[data-page="analytics"] .sm\:p-5 { padding: 12px 14px !important; }
#admin-dash[data-page="analytics"] .p-3\.5 { padding: 10px 12px !important; }
#admin-dash[data-page="analytics"] .mb-4 { margin-bottom: 10px !important; }
#admin-dash[data-page="analytics"] .gap-4 { gap: 10px !important; }
#admin-dash[data-page="analytics"] .h-64 { height: 13.5rem !important; }
#admin-dash[data-page="analytics"] .h-72 { height: 15rem !important; }
#admin-dash[data-page="analytics"] .h-80 { height: 16rem !important; }