/* 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.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            will-change: opacity, transform;
        }

        /* opacity + transform only: both run on the GPU compositor, so the page change never stutters */
        @keyframes premiumFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.985);
            }

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

        /* 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: -70%; 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: translateX(0) rotate(8deg); animation: railSheen 9s ease-in-out infinite;
    }
    @keyframes railSheen { 0%, 70% { transform: translateX(0) rotate(8deg); } 100% { transform: translateX(383.33%) rotate(8deg); } }
    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 { position: relative; isolation: isolate; width: 7px; height: 7px; border-radius: 50%; background: #10B981; }
#admin-topbar .atb-dot::after { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 50%; background: rgba(16, 185, 129, .18); animation: atbRing 2.4s ease-in-out infinite; }
@keyframes atbRing { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.46); opacity: .28; } }
@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; }

/* Sale type: icons inside the two segments */
.md-type > .md-chip i { opacity: .55; }
.md-type > .md-chip.is-on i { opacity: 1; color: #F4A915; }

/* Brand tiles: Foton blue, Mahindra red */
.md-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-brand-tile { --b1: #2563EB; --b2: #041A54; --bt: #1D4ED8; --bs: rgba(37, 99, 235, .55); position: relative; min-height: 64px; padding: 8px 12px 8px 8px; gap: 10px; white-space: normal; text-align: left; overflow: hidden; border-color: color-mix(in srgb, var(--bt) 22%, #E2E8F0); background: linear-gradient(135deg, color-mix(in srgb, var(--bt) 6%, #fff), #fff 70%); }
.md-brand-tile.is-mahindra { --b1: #F43F5E; --b2: #B3122A; --bt: #E5223E; --bs: rgba(229, 34, 62, .55); }
.md-brand-tile::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--b1), var(--b2)); transition: opacity .2s; }
.md-brand-mark { flex-shrink: 0; width: 38px; height: 38px; margin-left: 4px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 6px 14px -8px var(--bs), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.md-brand-tile.is-mahindra .md-brand-mark { font-style: italic; }
.md-brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.md-brand-txt b { font-size: 15px; font-weight: 900; color: var(--bt); letter-spacing: .01em; }
.md-brand-tile.is-foton .md-brand-txt b { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.md-brand-txt small { font-size: 10.5px; font-weight: 700; color: #94A3B8; margin-top: 2px; }
.md-brand-tile.is-on { border-color: transparent; background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 10px 22px -10px var(--bs); color: #fff; }
.md-brand-tile.is-on::before { opacity: 0; }
.md-brand-tile.is-on .md-brand-mark { background: #fff; color: var(--bt); transform: rotate(-6deg) scale(1.05); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); }
.md-brand-tile.is-on .md-brand-txt b { color: #fff; }
.md-brand-tile.is-on .md-brand-txt small { color: rgba(255, 255, 255, .75); }
.md-brand-tile.is-on .md-reg-tick { transform: scale(1); background: #fff; color: var(--bt); }
.md-brand-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.md-brand-tile.is-on::after { animation: mdRegShine .7s ease .05s; }
.md-chip.is-on.is-f { background: linear-gradient(135deg, #2563EB, #041A54); border-color: #1D4ED8; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .8); }
.md-chip.is-on.is-m { background: linear-gradient(135deg, #F43F5E, #B3122A); }
@media (prefers-reduced-motion: reduce) { .md-brand-tile.is-on::after { animation: none; } .md-brand-mark { transition: none; } }

/* Vehicle registration: two number-plate tiles */
.md-reg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.md-reg-tile { position: relative; min-height: 62px; padding: 8px 10px; gap: 10px; white-space: normal; text-align: left; overflow: hidden; }
.md-reg-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.md-reg-tile.is-on::after { animation: mdRegShine .7s ease .05s; }
@keyframes mdRegShine { to { transform: translateX(120%); } }
.md-plate { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 6px; font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; padding-left: 3px; transition: transform .2s; }
.md-plate i { position: absolute; left: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 99px; background: currentColor; opacity: .35; }
.md-reg-tile.is-pvt .md-plate { background: #fff; color: #0F2942; border: 2px solid #0F2942; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #CBD5E1; }
.md-reg-tile.is-com .md-plate { background: linear-gradient(180deg, #FCD34D, #F4A915); color: #0F2942; border: 2px solid #B7791F; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.md-reg-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.md-reg-txt b { font-size: 13.5px; font-weight: 900; }
.md-reg-txt small { font-size: 10.5px; font-weight: 700; color: #94A3B8; margin-top: 2px; }
.md-reg-tick { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: #10B981; color: #fff; transform: scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.md-reg-tile.is-on .md-reg-tick { transform: scale(1); }
.md-reg-tile.is-on .md-plate { transform: rotate(-4deg) scale(1.06); }
.md-reg-tile.is-on .md-reg-txt small { color: #CBD5E1; }
.md-reg-tile.is-com.is-on { background: linear-gradient(135deg, #0F2942 55%, #3B2A06); border-color: #F4A915; box-shadow: 0 8px 18px -10px rgba(244, 169, 21, .9); }
.md-reg-tile.is-com.is-on .md-reg-tick { background: #F4A915; color: #0F2942; }
@media (prefers-reduced-motion: reduce) { .md-reg-tile.is-on::after { animation: none; } .md-plate, .md-reg-tick { transition: none; } }

.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; }


/* Summary cards: Manual Deliveries and EMI Analytics */
.gc-card { --gc: #4F46E5; --gc2: #2563EB; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 10%, #fff), #fff 68%); border: 1px solid color-mix(in srgb, var(--gc) 20%, #fff); box-shadow: none; transition: transform .2s; }
.gc-card:hover { transform: translateY(-2px); box-shadow: none; }
.gc-card::after { content: ''; position: absolute; right: -22px; bottom: -30px; width: 76px; height: 76px; border-radius: 50%; border: 12px solid color-mix(in srgb, var(--gc) 8%, transparent); pointer-events: none; }
.gc-card > * { position: relative; z-index: 1; }
.gc-card .p-1\.5 { background: linear-gradient(135deg, var(--gc), var(--gc2)) !important; color: #fff !important; border-radius: 9px; box-shadow: none; }
.gc-card .mt-2 { margin-top: 4px; }
.gc-indigo { --gc: #4F46E5; --gc2: #2563EB; }
.gc-amber { --gc: #F59E0B; --gc2: #EA580C; }
.gc-emerald { --gc: #10B981; --gc2: #0D9488; }
.gc-cyan { --gc: #06B6D4; --gc2: #2563EB; }
.gc-dark { --gc: #F4A915; --gc2: #D97706; background: linear-gradient(135deg, #0F2942, #1E4A7A); border-color: #0F2942; }
.gc-dark::after { border-color: rgba(244, 169, 21, .14); }
.emi-kpis .ap-kpi { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); box-shadow: none; transition: transform .2s; }
.emi-kpis .ap-kpi:hover { transform: translateY(-2px); box-shadow: none; }
.emi-kpis .ap-kpi-top svg { box-sizing: border-box; width: 18px; height: 18px; margin: -2px 0; padding: 3px; border-radius: 6px; background: var(--c); color: #fff; }
.emi-kpis .ap-kpi-v { color: var(--c); }
@media (prefers-reduced-motion: reduce) { .gc-card:hover, .emi-kpis .ap-kpi:hover { transform: none; } }


/* Market Analytics */
#admin-market { display: flex; flex-direction: column; gap: 12px; }
#mk-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-hero { position: relative; overflow: hidden; padding: 18px 20px 16px; border-radius: 18px; color: #fff; background: radial-gradient(420px 220px at 92% -20%, rgba(244, 169, 21, .28), transparent 70%), linear-gradient(120deg, #0B2036, #0F2942 55%, #1E4A7A); box-shadow: 0 16px 34px -22px rgba(15, 41, 66, .9); }
.mk-hero-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mk-hero-top > .min-w-0 { flex: 1 1 340px; }
.mk-kicker { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #F4A915; }
.mk-hero h1 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; }
.mk-hero p { font-size: 13px; color: #CBD5E1; margin-top: 4px; }
.mk-hero p b { color: #FCD34D; font-weight: 800; }
.mk-filters { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mk-pills { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255, 255, 255, .09); }
.mk-pills button { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #CBD5E1; transition: all .15s; white-space: nowrap; }
.mk-pills button:hover { color: #fff; }
.mk-pills button.is-on { background: #F4A915; color: #0F2942; }
.mk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mk-kpi { min-width: 0; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .11); }
.mk-kpi-l { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.mk-kpi-l svg { color: #F4A915; }
.mk-kpi-v { font-size: 16px; font-weight: 900; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi-s { font-size: 10px; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-focus { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }
.mk-focus button { margin-left: auto; font-weight: 900; color: #0F2942; text-decoration: underline; }
.mk-grid { display: grid; gap: 12px; min-width: 0; }
.mk-g-map { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.mk-g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mk-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-card { min-width: 0; padding: 13px 14px; border-radius: 16px; background: #fff; border: 1px solid #E8EDF3; box-shadow: 0 8px 22px -20px rgba(15, 41, 66, .5); }
.mk-card > header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.mk-card h3 { font-size: 14px; font-weight: 900; color: #0F2942; letter-spacing: -.01em; }
.mk-card header p { font-size: 11px; color: #94A3B8; font-weight: 500; }
.mk-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 30%; color: #fff; background: var(--c); box-shadow: 0 5px 10px -6px var(--c); }
.mk-seg-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.mk-seg { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border-radius: 10px; text-align: left; transition: background .15s; }
.mk-seg:hover { background: #F8FAFC; }
.mk-seg.is-on { background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1.5px var(--c); }
.mk-seg-rank { width: 12px; font-size: 10px; font-weight: 800; color: #94A3B8; text-align: center; }
.mk-seg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-seg-row { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #64748B; font-weight: 700; }
.mk-seg-row b { font-size: 12px; color: #0F2942; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-seg-row span { white-space: nowrap; }
.mk-seg-row em { font-style: normal; font-size: 8px; }
.mk-seg-row em.is-up { color: #059669; } .mk-seg-row em.is-down { color: #E11D48; }
.mk-bar { display: block; height: 5px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.mk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c, #0F2942); transition: width .35s; }
.mk-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: #94A3B8; }
.mk-legend i { width: 48px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, #fff), var(--c)); }
#mk-map { height: 340px; background: transparent; border-radius: 12px; }
.mk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: #92400E; background: #FEF3C7; white-space: nowrap; }
.mk-plays { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 10px; }
.mk-play { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 9%, #fff), #fff 62%); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.mk-play::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c), transparent); }
.mk-play-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mk-play-kind { padding: 2px 8px; border-radius: 99px; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #1D4ED8; }
.mk-play.is-gold .mk-play-kind { background: #0F2942; color: #FCD34D; }
.mk-play.is-green .mk-play-kind { background: #059669; }
.mk-play-pri { font-size: 10px; font-weight: 800; color: #64748B; white-space: nowrap; }
.mk-play-title { display: flex; align-items: center; gap: 8px; }
.mk-play-title h4 { font-size: 14px; font-weight: 900; color: #0F2942; line-height: 1.15; }
.mk-play-title span:not(.mk-mark) { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #64748B; }
.mk-play-why { font-size: 11px; font-weight: 600; color: #475569; }
.mk-play-do { padding: 7px 9px; border-radius: 10px; background: #F8FAFC; font-size: 11.5px; font-weight: 700; color: #0F2942; line-height: 1.3; }
.mk-play-do b { display: block; font-size: 8.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; margin-bottom: 1px; }
.mk-play-do small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: #64748B; }
.mk-play-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.mk-play-chips span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #E2E8F0; }
.mk-heat { display: grid; gap: 3px; align-items: center; overflow-x: auto; }
.mk-heat-h { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mk-heat-h small { font-size: 8.5px; font-weight: 800; color: #64748B; }
.mk-heat-d { font-size: 11px; font-weight: 800; color: #0F2942; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cell { position: relative; height: 28px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #0F2942; background: color-mix(in srgb, var(--c) var(--a), #F8FAFC); transition: transform .12s; }
.mk-cell:hover { transform: scale(1.07); }
.mk-cell.is-on { box-shadow: 0 0 0 2px #0F2942; }
.mk-cell sup { position: absolute; top: 5px; right: 3px; font-size: 8px; color: #92400E; }
.mk-chart { position: relative; height: 262px; }
.mk-row { margin-bottom: 7px; }
.mk-row-t { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; color: #334155; margin-bottom: 2px; }
.mk-row-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-t b { color: #0F2942; font-weight: 900; }
.mk-buy { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(36px, 1fr) 30px 40px; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.mk-buy > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-buy b { color: #0F2942; text-align: right; font-weight: 900; }
.mk-buy small { font-size: 9.5px; color: #94A3B8; font-weight: 700; text-align: right; }
.mk-split { display: block; height: 6px; border-radius: 99px; background: #D1FAE5; overflow: hidden; }
.mk-split i { display: block; height: 100%; background: #0F2942; }
.mk-unmapped { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 10.5px; color: #64748B; }
.mk-unmapped span { padding: 1px 7px; border-radius: 99px; background: #F1F5F9; font-weight: 600; }
.mk-foot { font-size: 10.5px; color: #94A3B8; }
.mk-none { padding: 18px 8px; text-align: center; font-size: 12px; color: #94A3B8; }
.mk-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 42px 16px; border-radius: 16px; background: #fff; border: 1px dashed #CBD5E1; color: #64748B; font-size: 12.5px; text-align: center; }
.mk-empty b { color: #0F2942; font-size: 14px; }
@media (max-width: 1100px) { .mk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-g-map, .mk-g-2 { grid-template-columns: minmax(0, 1fr); } .mk-g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-g-3 { grid-template-columns: minmax(0, 1fr); } .mk-filters { align-items: flex-start; } .mk-hero h1 { font-size: 19px; } #mk-map { height: 280px; } }

/* Market Analytics: compact layout, flat cards, tabs and deeper views */
#mk-root, #admin-market { gap: 8px; }
.mk-grid { gap: 8px; }
.mk-hero { padding: 10px 14px; border-radius: 14px; box-shadow: none; }
.mk-hero-top { gap: 10px; align-items: center; }
.mk-hero-top > .min-w-0 { flex: 1 1 280px; }
.mk-hero p { font-size: 13px; color: #E2E8F0; margin-top: 1px; }
.mk-filters { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.mk-pills button { padding: 3px 8px; font-size: 10.5px; }
.mk-select { height: 24px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 800; color: #E2E8F0; background: rgba(255, 255, 255, .09); border: 0; outline: none; }
.mk-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.mk-kpi { padding: 5px 9px; border-radius: 10px; }
.mk-kpi-v { font-size: 13.5px; margin-top: 0; line-height: 1.25; }
.mk-kpi-l { font-size: 8.5px; }
.mk-kpi-s { font-size: 9.5px; }
.mk-tabs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; border: 1px solid #E8EDF3; overflow-x: auto; }
.mk-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #64748B; white-space: nowrap; transition: all .15s; }
.mk-tabs button:hover { color: #0F2942; }
.mk-tabs button.is-on { background: #0F2942; color: #fff; }
.mk-tabs button span { padding: 0 5px; border-radius: 99px; font-size: 9.5px; background: #F4A915; color: #0F2942; }
.mk-tabs .mk-export { margin-left: auto; color: #047857; background: #ECFDF5; }
.mk-focus { padding: 5px 10px; border-radius: 10px; font-size: 11.5px; }
.mk-card { padding: 9px 11px; border-radius: 13px; box-shadow: none; }
.mk-card > header { margin-bottom: 7px; }
.mk-card h3 { font-size: 13px; }
.mk-card header p { font-size: 10.5px; }
.mk-mark { box-shadow: none; }
.mk-seg-list { max-height: 262px; gap: 1px; }
.mk-seg { padding: 3px 5px; }
#mk-map { height: 262px; }
.mk-chart { height: 214px; }
.mk-cell { height: 24px; }
.mk-row { margin-bottom: 5px; }
.mk-buy { margin-bottom: 4px; }
.mk-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mk-insight { --t: #0F2942; --b: #F8FAFC; display: flex; gap: 7px; padding: 6px 8px; border-radius: 10px; background: var(--b); }
.mk-insight.is-gold { --t: #B45309; --b: #FFFBEB; }
.mk-insight.is-blue { --t: #1D4ED8; --b: #EFF6FF; }
.mk-insight.is-red { --t: #DC2626; --b: #FEF2F2; }
.mk-insight.is-grey { --t: #475569; --b: #F1F5F9; }
.mk-insight-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: var(--t); }
.mk-insight b { display: block; font-size: 11.5px; font-weight: 900; color: #0F2942; line-height: 1.2; }
.mk-insight p { font-size: 10.5px; color: #64748B; font-weight: 500; line-height: 1.3; margin-top: 1px; }
.mk-budget { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 9px; font-size: 11px; font-weight: 800; color: #047857; background: #ECFDF5; white-space: nowrap; }
.mk-budget input { width: 96px; padding: 1px 5px; border-radius: 6px; border: 1px solid #A7F3D0; background: #fff; color: #0F2942; font-weight: 800; font-size: 11px; outline: none; }
.mk-plays { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 7px; align-items: start; }
.mk-play { gap: 4px; padding: 8px 9px; border-radius: 11px; }
.mk-play::before { display: none; }
.mk-play-top { justify-content: flex-start; }
.mk-play-kind { font-size: 8.5px; padding: 1px 6px; }
.mk-play-pri { font-size: 9.5px; }
.mk-play-budget { margin-left: auto; font-size: 11.5px; font-weight: 900; color: #047857; }
.mk-play-title { gap: 6px; }
.mk-play-title h4 { font-size: 12.5px; }
.mk-play-title span:not(.mk-mark) { font-size: 10.5px; }
.mk-play-why { font-size: 10.5px; }
.mk-play-do { padding: 4px 7px; border-radius: 8px; font-size: 11px; }
.mk-play-chips span { font-size: 9.5px; padding: 1px 6px; }
.mk-play-more summary { font-size: 10.5px; font-weight: 800; color: #1D4ED8; cursor: pointer; }
.mk-play-more dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 3px 6px; margin-top: 4px; font-size: 10.5px; }
.mk-play-more dt { font-weight: 800; color: #94A3B8; }
.mk-play-more dd { margin: 0; color: #334155; font-weight: 600; line-height: 1.3; }
.mk-moves { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.mk-move { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.mk-move.is-invest { background: #D1FAE5; color: #047857; }
.mk-move.is-defend { background: #FEE2E2; color: #B91C1C; }
.mk-move.is-emerging { background: #DBEAFE; color: #1D4ED8; }
.mk-move.is-seed { background: #F1F5F9; color: #475569; }
.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #334155; }
.mk-table th { padding: 4px 6px; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; border-bottom: 1px solid #E8EDF3; white-space: nowrap; }
.mk-table td { padding: 3px 6px; border-bottom: 1px solid #F1F5F9; white-space: nowrap; }
.mk-table tbody tr { cursor: pointer; }
.mk-table tbody tr:hover, .mk-table tbody tr.is-on { background: #F8FAFC; }
.mk-table td b { color: #0F2942; font-weight: 800; }
.mk-table td small { margin-left: 5px; font-size: 9.5px; color: #94A3B8; }
.mk-table .mk-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.mk-table .is-up { color: #059669; } .mk-table .is-down { color: #E11D48; }
.mk-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.mk-spark i { display: block; width: 5px; border-radius: 1px; background: #0F2942; }
.mk-top-seg { display: inline-flex; align-items: center; gap: 4px; }
.mk-brand-split { display: block; width: 76px; height: 6px; border-radius: 99px; overflow: hidden; background: #E5223E; }
.mk-brand-split i { display: block; height: 100%; background: #1D4ED8; }
.mk-cal-wrap { overflow-x: auto; }
.mk-cal { display: grid; grid-template-columns: minmax(150px, 1.8fr) repeat(12, minmax(34px, 1fr)); gap: 2px; align-items: center; min-width: 600px; }
.mk-cal-h { text-align: center; font-size: 9.5px; font-weight: 800; color: #94A3B8; }
.mk-cal-h.is-now { color: #0F2942; }
.mk-cal-seg { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mk-cal-seg b { display: block; font-size: 11px; font-weight: 800; color: #0F2942; white-space: nowrap; }
.mk-cal-seg small { display: block; font-size: 9px; color: #94A3B8; white-space: nowrap; }
.mk-cal-c { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #0F2942; background: color-mix(in srgb, var(--c) var(--a), #F8FAFC); }
.mk-cal-c.is-peak { outline: 2px solid #0F2942; outline-offset: -2px; }
.mk-note { margin-top: 6px; font-size: 11px; color: #64748B; }
.mk-note b { color: #0F2942; }
.mk-fights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.mk-fight { display: flex; align-items: center; gap: 7px; }
.mk-fight > .min-w-0 { flex: 1; }
.mk-fight-t { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #64748B; font-weight: 700; }
.mk-fight-t b { color: #0F2942; font-weight: 800; }
.mk-fight-t em { font-style: normal; color: #DC2626; font-weight: 900; }
.mk-fight-bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; margin: 2px 0; background: #F1F5F9; }
.mk-fight-bar i { display: block; background: #1D4ED8; }
.mk-fight-bar u { display: block; background: #E5223E; }
.mk-fight-s { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; font-weight: 700; color: #94A3B8; }
@media (max-width: 1100px) { .mk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-kpis, .mk-insights, .mk-fights { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mk-insights, .mk-fights { grid-template-columns: minmax(0, 1fr); } .mk-filters { justify-content: flex-start; } }

/* Market Analytics: map studio and overview tools */
.mk-g-map2 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.mk-g-trend { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.mk-studio { display: flex; flex-direction: column; gap: 6px; }
.mk-studio.is-full { position: fixed; inset: 8px; z-index: 9000; overflow: auto; }
.mk-studio.is-full .mk-studio-main { flex: 1; min-height: 0; }
.mk-studio.is-full #mk-map { flex: 1; height: auto; min-height: 70vh; }
.mk-studio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 900; color: #0F2942; margin-right: auto; min-width: 0; }
.mk-crumb button { font-weight: 800; color: #1D4ED8; }
.mk-crumb i { font-style: normal; color: #94A3B8; }
.mk-mini { display: inline-flex; gap: 1px; padding: 2px; border-radius: 9px; background: #F1F5F9; }
.mk-mini button { padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; color: #64748B; white-space: nowrap; }
.mk-mini button.is-on { background: #0F2942; color: #fff; }
.mk-search { width: 150px; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid #E2E8F0; font-size: 11px; font-weight: 600; color: #0F2942; outline: none; }
.mk-search:focus { border-color: #1D4ED8; }
.mk-tools { display: inline-flex; gap: 2px; }
.mk-tools button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: #475569; background: #F1F5F9; }
.mk-tools button:hover { color: #0F2942; background: #E2E8F0; }
.mk-tools button.is-on { color: #fff; background: #0F2942; }
.mk-studio-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.mk-map-wrap { position: relative; min-width: 0; border-radius: 11px; background: #F8FAFC; overflow: hidden; display: flex; flex-direction: column; }
#mk-map { height: 372px; background: transparent; border-radius: 0; flex: none; }
.mk-map-legend { position: absolute; left: 8px; top: 8px; z-index: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; max-width: 62%; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .92); font-size: 9.5px; font-weight: 700; color: #64748B; }
.mk-map-legend small { font-size: 9.5px; color: #94A3B8; font-weight: 600; }
.mk-ramp { display: inline-flex; align-items: center; gap: 4px; }
.mk-ramp i { display: block; width: 58px; height: 6px; border-radius: 99px; }
.mk-key { display: inline-flex; align-items: center; gap: 3px; }
.mk-key i { display: block; width: 8px; height: 8px; border-radius: 3px; }
.mk-time { display: flex; align-items: center; gap: 7px; padding: 4px 9px; background: #fff; border-top: 1px solid #EEF2F7; }
.mk-time.is-off { display: none; }
.mk-time button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; color: #0F2942; background: #F4A915; }
.mk-time input { flex: 1; min-width: 0; accent-color: #0F2942; }
.mk-time span { width: 66px; text-align: right; font-size: 10.5px; font-weight: 800; color: #0F2942; white-space: nowrap; }
.mk-pin { background: none; border: 0; }
.mk-pin span { display: inline-block; transform: translate(-50%, -50%); padding: 0 4px; border-radius: 5px; font-size: 9px; font-weight: 700; line-height: 14px; white-space: nowrap; color: #0F2942; background: rgba(255, 255, 255, .86); }
.mk-pin b { font-weight: 800; }
.mk-profile { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 8px 9px; border-radius: 11px; background: #F8FAFC; overflow-y: auto; }
.mk-p-head h4 { font-size: 14px; font-weight: 900; color: #0F2942; line-height: 1.15; }
.mk-p-head span { font-size: 10px; font-weight: 700; color: #94A3B8; }
.mk-p-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.mk-p-stat { padding: 3px 2px; border-radius: 7px; background: #fff; text-align: center; }
.mk-p-stat span { display: block; font-size: 8.5px; font-weight: 800; color: #94A3B8; text-transform: uppercase; }
.mk-p-stat b { font-size: 12.5px; font-weight: 900; color: #0F2942; }
.mk-p-stat b.is-up { color: #059669; } .mk-p-stat b.is-down { color: #E11D48; }
.mk-p-seg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; font-size: 10.5px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.mk-p-seg > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-p-seg b { color: #0F2942; font-weight: 900; }
.mk-p-seg .mk-bar { grid-column: 1 / -1; height: 4px; }
.mk-p-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 10.5px; margin: 0; }
.mk-p-list dt { color: #94A3B8; font-weight: 700; }
.mk-p-list dd { margin: 0; color: #0F2942; font-weight: 800; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-p-move { padding: 5px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: #334155; background: #F1F5F9; margin-top: auto; }
.mk-p-move b { display: block; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.mk-p-move.is-invest { background: #D1FAE5; } .mk-p-move.is-invest b { color: #047857; }
.mk-p-move.is-defend { background: #FEE2E2; } .mk-p-move.is-defend b { color: #B91C1C; }
.mk-p-move.is-emerging { background: #DBEAFE; } .mk-p-move.is-emerging b { color: #1D4ED8; }
.mk-mover { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 4px; border-radius: 8px; text-align: left; }
.mk-mover:hover { background: #F8FAFC; }
.mk-mover > span:nth-child(2) { flex: 1; }
.mk-mover b { display: block; font-size: 11px; font-weight: 800; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mover small { display: block; font-size: 9.5px; color: #94A3B8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mover em { font-style: normal; font-size: 12px; font-weight: 900; }
.mk-mover em.is-up { color: #059669; } .mk-mover em.is-down { color: #E11D48; }
.mk-card > header > .mk-mini { flex-shrink: 0; }
@media (max-width: 1100px) { .mk-g-map2, .mk-g-trend { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .mk-studio-main { grid-template-columns: minmax(0, 1fr); } #mk-map { height: 300px; } .mk-map-legend { max-width: 86%; } }

/* Market Analytics: plain step-by-step action plan */
.mk-step-group + .mk-step-group { margin-top: 10px; }
.mk-step-title { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.mk-step-title b { font-size: 12.5px; font-weight: 900; color: #0F2942; }
.mk-step-title span { font-size: 10.5px; font-weight: 600; color: #64748B; }
.mk-step { padding: 8px 10px; border-radius: 11px; background: #F8FAFC; border: 1px solid #E8EDF3; }
.mk-step + .mk-step { margin-top: 6px; }
.mk-step-head { display: flex; align-items: center; gap: 8px; }
.mk-step-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 900; color: #fff; background: #0F2942; }
.mk-step-head h4 { font-size: 13px; font-weight: 900; color: #0F2942; line-height: 1.2; }
.mk-step-head p { font-size: 11px; font-weight: 500; color: #475569; }
.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; margin-top: 7px; }
.mk-fact { min-width: 0; }
.mk-fact span { display: flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: #94A3B8; }
.mk-fact b { display: block; font-size: 11px; font-weight: 700; color: #0F2942; line-height: 1.25; }
.mk-step .mk-play-more { margin-top: 5px; }
.mk-play-more ol { margin: 4px 0 0; padding-left: 16px; list-style: decimal; font-size: 11px; color: #334155; line-height: 1.35; }
.mk-play-more ol b { color: #0F2942; }
@media (max-width: 820px) { .mk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Market Analytics: buyer quality */
.mk-g-q { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
#mk-map.is-short { height: 270px; }
.mk-q-top { display: flex; align-items: center; gap: 12px; }
.mk-q-ring { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(#059669 var(--p), #E2E8F0 0); }
.mk-q-ring > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; }
.mk-q-ring b { font-size: 16px; font-weight: 900; color: #0F2942; line-height: 1; }
.mk-q-ring small { font-size: 8.5px; font-weight: 700; color: #94A3B8; }
.mk-q-tiles { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mk-q-tile { --k: #0F2942; padding: 5px 9px; border-radius: 10px; background: #F8FAFC; min-width: 0; }
.mk-q-tile.is-cash { --k: #059669; } .mk-q-tile.is-semi { --k: #0D9488; } .mk-q-tile.is-high { --k: #2563EB; } .mk-q-tile.is-standard { --k: #94A3B8; }
.mk-q-tile span { display: block; font-size: 9.5px; font-weight: 800; color: var(--k); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-q-tile b { display: block; font-size: 16px; font-weight: 900; color: #0F2942; line-height: 1.15; }
.mk-q-tile small { display: block; font-size: 9.5px; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-q-bar { display: flex; width: 100%; min-width: 90px; height: 7px; border-radius: 99px; overflow: hidden; background: #F1F5F9; }
.mk-q-bar i { display: block; height: 100%; }
.mk-q-bar i.is-cash { background: #059669; } .mk-q-bar i.is-semi { background: #2DD4BF; } .mk-q-bar i.is-high { background: #2563EB; } .mk-q-bar i.is-standard { background: #CBD5E1; }
.mk-k { font-style: normal; font-weight: 700; margin-right: 5px; }
.mk-k::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; }
.mk-k.is-cash::before { background: #059669; } .mk-k.is-semi::before { background: #2DD4BF; } .mk-k.is-high::before { background: #2563EB; } .mk-k.is-standard::before { background: #CBD5E1; }
.mk-grade { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.mk-grade.is-excellent { background: #D1FAE5; color: #047857; } .mk-grade.is-good { background: #DBEAFE; color: #1D4ED8; } .mk-grade.is-fair { background: #FEF3C7; color: #92400E; } .mk-grade.is-risky { background: #FEE2E2; color: #B91C1C; }
.mk-quad { display: block; width: 100%; height: auto; }
.mk-dot { cursor: pointer; }
.mk-q-seg { display: grid; grid-template-columns: 20px minmax(0, 1.1fr) minmax(0, 1fr) 32px; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 5px; }
.mk-q-seg > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-q-seg .mk-q-bar { min-width: 0; }
.mk-q-seg b { text-align: right; color: #0F2942; font-weight: 900; }
.mk-dp-bands { display: flex; align-items: flex-end; gap: 6px; height: 112px; }
.mk-dp-bands > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk-dp-bands b { font-size: 10.5px; font-weight: 900; color: #0F2942; }
.mk-dp-col { display: flex; align-items: flex-end; width: 100%; height: 74px; }
.mk-dp-col i { display: block; width: 100%; border-radius: 5px 5px 0 0; background: #CBD5E1; }
.mk-dp-col i.is-good { background: #059669; }
.mk-dp-bands small { font-size: 8.5px; font-weight: 700; color: #94A3B8; white-space: nowrap; }
@media (max-width: 1100px) { .mk-g-q { grid-template-columns: minmax(0, 1fr); } .mk-q-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-q-top { flex-direction: column; align-items: stretch; } .mk-q-ring { align-self: center; } .mk-q-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Delivery form: purpose of use tiles */
.md-pur-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-radius: 14px; }
.md-pur-grid:empty { display: none; }
.md-pur-grid.md-bad { box-shadow: 0 0 0 2px #F43F5E; padding: 4px; margin: -4px; }
.md-pur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 66px; padding: 6px 3px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #fff; transition: all .15s; -webkit-tap-highlight-color: transparent; animation: mdIn .2s ease; }
.md-pur:active { transform: scale(.95); }
.md-pur span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); transition: all .15s; }
.md-pur b { font-size: 11px; font-weight: 800; line-height: 1.1; color: #334155; text-align: center; }
.md-pur.is-on { border-color: var(--c); background: var(--c); }
.md-pur.is-on span { color: var(--c); background: #fff; }
.md-pur.is-on b { color: #fff; }
.md-pur.is-more { border-style: dashed; --c: #64748B; }
.md-pur-input { margin-top: 8px; }

/* Delivery form: purpose of use picker */
.md-pur-field { --c: #94A3B8; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 6px 10px; border-radius: 14px; border: 1.5px solid #E2E8F0; background: #FBFCFE; text-align: left; transition: border-color .15s; }
.md-pur-field span { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.md-pur-field b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #A9B4C2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-pur-field.is-set { border-color: var(--c); background: #fff; }
.md-pur-field.is-set b { color: #0F2942; font-weight: 800; }
.md-pur-field > svg { flex-shrink: 0; color: #94A3B8; }
.md-pop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 41, 66, .45); animation: mdPopFade .15s ease; }
@keyframes mdPopFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdPopUp { from { transform: translateY(24px); } to { transform: none; } }
.md-pop-card { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; max-height: 78vh; padding: 12px; border-radius: 20px 20px 0 0; background: #fff; animation: mdPopUp .2s ease; }
.md-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-pop-head b { font-size: 14.5px; font-weight: 900; color: #0F2942; }
.md-pop-head button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #475569; background: #F1F5F9; }
.md-pop .md-pur-grid { overflow-y: auto; min-height: 0; padding: 1px; }
@media (min-width: 640px) { .md-pop { align-items: center; } .md-pop-card { border-radius: 20px; } }

/* ===== TIV: officer entry (mobile first) ===== */
.tv-wrap { max-width: 640px; margin: 0 auto; padding-bottom: 8px; }
.tv-hero { border-radius: 22px; padding: 16px 16px 14px; background: linear-gradient(135deg, #0B1F36, #0F2942 60%, #16365A); color: #fff; margin-bottom: 10px; }
.tv-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tv-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(226, 232, 240, .65); }
.tv-title { font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; }
.tv-state { flex-shrink: 0; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 900; }
.tv-deadline { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 800; color: #F4D58D; }
.tv-hero-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tv-hero-nums div { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.tv-hero-nums span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(226, 232, 240, .6); }
.tv-hero-nums b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tv-share { margin-top: 12px; }
.tv-share-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.tv-share-bar i { display: block; height: 100%; transition: width .25s; }
.tv-share-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 11px; font-weight: 700; color: rgba(226, 232, 240, .85); }
.tv-share-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 5px; }
.tv-share-empty { font-size: 11.5px; font-weight: 600; color: rgba(226, 232, 240, .55); }
.tv-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.tv-chips::-webkit-scrollbar { display: none; }
.tv-chips button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 99px; border: 1.5px solid #E2E8F0; background: #fff; color: #475569; font-size: 12.5px; font-weight: 800; }
.tv-chips button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.tv-cdot { width: 7px; height: 7px; border-radius: 99px; }
.tv-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #F1F5F9; color: #334155; font-size: 12.5px; font-weight: 700; }
.tv-note.is-gold { background: #FFF7E0; color: #8A5A00; } .tv-note.is-violet { background: #F3EEFF; color: #5B21B6; } .tv-note.is-red { background: #FFF1F2; color: #BE123C; }
.tv-tools { display: flex; gap: 6px; margin-bottom: 8px; }
.tv-search { flex: 1; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 13px; border: 1.5px solid #E2E8F0; background: #fff; color: #94A3B8; min-width: 0; }
.tv-search:focus-within { border-color: #0F2942; }
.tv-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 16px; font-weight: 700; color: #0F2942; }
.tv-ghost { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 12px; border-radius: 13px; border: 1.5px solid #E2E8F0; background: #fff; color: #0F2942; font-size: 12.5px; font-weight: 800; }
.tv-list { display: flex; flex-direction: column; gap: 8px; }
.tv-brand { border-radius: 18px; background: #fff; border: 1px solid #EEF2F7; overflow: hidden; }
.tv-brand-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FBFCFE; border-bottom: 1px solid #F1F5F9; }
.tv-bdot { width: 10px; height: 10px; border-radius: 99px; background: var(--bc); }
.tv-bname { flex: 1; font-size: 14px; font-weight: 900; color: #0F2942; }
.tv-bsum { min-width: 32px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--bc) 12%, #fff); color: var(--bc); font-size: 12.5px; font-weight: 900; text-align: center; }
.tv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #F5F7FA; }
.tv-row:last-child { border-bottom: 0; }
.tv-model { min-width: 0; display: flex; flex-direction: column; }
.tv-model span { font-size: 13.5px; font-weight: 800; color: #1E293B; }
.tv-model small { font-size: 11px; font-weight: 600; color: #94A3B8; }
.tv-step { display: flex; align-items: center; flex-shrink: 0; height: 42px; border-radius: 13px; border: 1.5px solid #E2E8F0; overflow: hidden; background: #FBFCFE; }
.tv-step button { width: 42px; height: 100%; font-size: 20px; font-weight: 700; color: #0F2942; }
.tv-step button:active { background: #EEF2F7; }
.tv-step input { width: 52px; height: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; text-align: center; font-size: 17px; font-weight: 900; color: #0F2942; -moz-appearance: textfield; }
.tv-step input::-webkit-outer-spin-button, .tv-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-step:focus-within { border-color: #0F2942; }
.tv-val { min-width: 44px; text-align: center; font-size: 17px; font-weight: 900; color: #0F2942; }
.tv-val.is-zero { color: #CBD5E1; }
.tv-empty { padding: 22px; text-align: center; color: #94A3B8; font-weight: 700; background: #fff; border-radius: 16px; }
.tv-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + 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); }
.tv-foot-in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.tv-foot-sum { display: flex; flex-direction: column; line-height: 1.1; }
.tv-foot-sum b { font-size: 22px; font-weight: 900; color: #0F2942; }
.tv-foot-sum span { font-size: 11px; font-weight: 700; color: #94A3B8; }
.tv-submit { flex: 1; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #0F2942, #1E3A8A); color: #fff; font-size: 15px; font-weight: 900; }
.tv-submit:active { transform: scale(.98); }
.tv-submit.is-full { width: 100%; flex: none; margin-top: 10px; }
.tv-submit:disabled { opacity: .6; }
.tv-sheet { position: relative; z-index: 2; width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: mdIn .2s ease; }
@media (min-width: 640px) { .tv-sheet { border-radius: 22px; } }
.tv-sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tv-sheet-h .tv-kicker { color: #94A3B8; }
.tv-sheet-h h3 { font-size: 19px; font-weight: 900; color: #0F2942; }
.tv-sheet-total { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 8px; }
.tv-sheet-total b { font-size: 34px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; }
.tv-sheet-total span { font-size: 12.5px; font-weight: 700; color: #64748B; }
.tv-sheet-total em { font-style: normal; font-weight: 900; } .tv-sheet-total em.up { color: #059669; } .tv-sheet-total em.dn { color: #E11D48; }
.tv-sheet-list { border-radius: 14px; border: 1px solid #EEF2F7; overflow: hidden; margin-bottom: 8px; }
.tv-sheet-list > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #F5F7FA; font-size: 13px; font-weight: 800; color: #1E293B; }
.tv-sheet-list > div:last-child { border-bottom: 0; }
.tv-sheet-list span { display: inline-flex; align-items: center; gap: 7px; }
.tv-sheet-list i { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.tv-sheet-list b { font-weight: 900; color: #0F2942; } .tv-sheet-list b.is-zero { color: #CBD5E1; }
.tv-sheet-list .tv-sb { background: #FBFCFE; }
.tv-sheet-list .tv-sm { padding-left: 28px; font-weight: 600; color: #475569; }
.tv-sheet-list .tv-sm small { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #94A3B8; }
.tv-sheet-s { font-size: 11.5px; font-weight: 600; color: #94A3B8; }
.tv-banner { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 16px; background: color-mix(in srgb, var(--sc) 8%, #fff); border: 1px solid color-mix(in srgb, var(--sc) 30%, #fff); color: var(--sc); text-align: left; }
.tv-banner-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sc); color: #fff; flex-shrink: 0; }
.tv-banner-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-banner-t b { font-size: 13.5px; font-weight: 900; color: #0F2942; }
.tv-banner-t small { font-size: 11.5px; font-weight: 700; color: #64748B; }

/* ===== TIV: admin follow-up (flat cards) ===== */
.tva { padding-bottom: 32px; }
.tva-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tva-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #0F2942; color: #F4A915; flex-shrink: 0; }
.tva-t { font-size: 20px; font-weight: 900; color: #0F2942; letter-spacing: -.02em; }
.tva-s { font-size: 11.5px; font-weight: 600; color: #94A3B8; }
.tva-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #F1F5F9; }
.tva-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #64748B; }
.tva-tabs button.is-on { background: #0F2942; color: #fff; }
.tva-periods { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.tva-periods button { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 92px; padding: 7px 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; text-align: left; }
.tva-periods b { font-size: 12.5px; font-weight: 900; color: #0F2942; }
.tva-periods small { font-size: 10.5px; font-weight: 700; color: #94A3B8; }
.tva-periods em { font-style: normal; font-size: 9.5px; font-weight: 900; color: #B45309; text-transform: uppercase; letter-spacing: .06em; }
.tva-periods button.is-on { background: #0F2942; border-color: #0F2942; }
.tva-periods button.is-on b { color: #fff; } .tva-periods button.is-on small { color: rgba(226, 232, 240, .7); } .tva-periods button.is-on em { color: #F4A915; }
.tva-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 10px; border-radius: 18px; background: #fff; border: 1px solid #E8EDF3; }
.tva-ring { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: conic-gradient(#059669 calc(var(--p) * 1%), #EEF2F7 0); flex-shrink: 0; }
.tva-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.tva-ring b, .tva-ring span { position: relative; line-height: 1.1; }
.tva-ring b { font-size: 17px; font-weight: 900; color: #0F2942; }
.tva-ring span { font-size: 10px; font-weight: 800; color: #94A3B8; }
.tva-hero-mid { flex: 1; min-width: 220px; }
.tva-kicker { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.tva-dl { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 14px; font-weight: 900; color: #0F2942; }
.tva-dl.is-soon { color: #B45309; } .tva-dl.is-late { color: #BE123C; }
.tva-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.tva-counts span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--c); font-size: 11px; font-weight: 800; }
.tva-counts b { font-size: 13px; font-weight: 900; }
.tva-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tva-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid #E2E8F0; background: #fff; color: #0F2942; font-size: 12px; font-weight: 800; }
.tva-btn:hover { border-color: #0F2942; }
.tva-btn.is-gold { background: #F4A915; border-color: #F4A915; color: #0F2942; }
.tva-btn.is-green { background: #059669; border-color: #059669; color: #fff; }
.tva-btn.is-ghost { color: #64748B; }
.tva-btn:disabled { opacity: .45; cursor: not-allowed; }
.tva-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tva-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tva-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 99px; border: 1px solid #E2E8F0; background: #fff; color: #475569; font-size: 12px; font-weight: 800; }
.tva-chips button i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }
.tva-chips button b { font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: #F1F5F9; color: #0F2942; }
.tva-chips button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.tva-chips button.is-on b { background: #F4A915; }
.tva-search { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; color: #94A3B8; min-width: 220px; }
.tva-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 12.5px; font-weight: 700; color: #0F2942; }
.tva-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 1100px) { .tva-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .tva-grid.is-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.tva-card { border-radius: 18px; background: #fff; border: 1px solid #E8EDF3; padding: 12px; min-width: 0; overflow: hidden; }
.tva-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tva-card-h b { font-size: 13px; font-weight: 900; color: #0F2942; }
.tva-card-h span { font-size: 11px; font-weight: 700; color: #94A3B8; }
.tva-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
.tva-table th { position: sticky; top: 0; background: #0F2942; color: rgba(226, 232, 240, .9); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; text-align: right; }
.tva-table th:first-child { border-radius: 10px 0 0 0; } .tva-table th:last-child { border-radius: 0 10px 0 0; }
.tva-table th.l, .tva-table td.l { text-align: left; }
.tva-table td { padding: 8px 10px; border-bottom: 1px solid #F1F5F9; text-align: right; color: #334155; font-weight: 700; vertical-align: middle; }
.tva-table tbody tr:hover td { background: #F8FAFC; }
.tva-name { display: block; color: #0F2942; font-weight: 900; }
.tva-table td.l small { display: block; font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.tva-off { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: #475569; }
.tva-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 900; }
.tva-st i { width: 6px; height: 6px; border-radius: 99px; display: inline-block; }
.tva-when { color: #64748B; font-weight: 600; } .tva-when em { font-style: normal; font-size: 10px; font-weight: 900; color: #7C3AED; margin-left: 4px; }
.tva-late { color: #E11D48; font-weight: 900; }
.tva-act { white-space: nowrap; }
.tva-act button { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #64748B; }
.tva-act button:hover { background: #0F2942; color: #fff; }
.tva-empty { text-align: center !important; padding: 26px !important; color: #94A3B8 !important; }
.tva-table.is-mini th { position: static; }
.tva-table.is-mini small { font-size: 10px; color: #94A3B8; margin-left: 4px; }
.tva-cons-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tva-cons-h b { font-size: 13px; font-weight: 900; color: #0F2942; } .tva-cons-h span { font-size: 11px; font-weight: 700; color: #94A3B8; }
.tva-cons-head, .tva-cons-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, 20px) 34px; align-items: center; gap: 4px; }
.tva-cons-head span { font-size: 9.5px; font-weight: 900; color: #94A3B8; text-align: center; text-transform: uppercase; }
.tva-cons-list { max-height: 520px; overflow-y: auto; }
.tva-cons-row { padding: 4px 0; border-bottom: 1px solid #F5F7FA; }
.tva-cons-n { font-size: 12px; font-weight: 800; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tva-cons-row i { width: 20px; height: 14px; border-radius: 4px; display: block; }
.tva-cons-row b { font-size: 11.5px; font-weight: 900; text-align: right; }
.tva-cons-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 10.5px; font-weight: 700; color: #64748B; }
.tva-cons-leg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.tva-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (min-width: 900px) { .tva-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tva-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #E8EDF3; min-width: 0; }
.tva-kpis span { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.tva-kpis b { font-size: 22px; font-weight: 900; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tva-kpis b.is-txt { font-size: 16px; line-height: 1.6; } .tva-kpis b.is-up { color: #059669; } .tva-kpis b.is-dn { color: #E11D48; }
.tva-kpis small { font-size: 11px; font-weight: 700; color: #94A3B8; }
.tva-share { display: flex; flex-direction: column; gap: 7px; }
.tva-share-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px 42px; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #1E293B; }
.tva-share-row span { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tva-share-row span i { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.tva-share-bar { height: 8px; border-radius: 99px; background: #F1F5F9; overflow: hidden; }
.tva-share-bar i { display: block; height: 100%; border-radius: 99px; }
.tva-share-row b { text-align: right; font-weight: 900; color: #0F2942; } .tva-share-row em { font-style: normal; text-align: right; color: #94A3B8; font-weight: 800; }
.tva-form { display: flex; flex-wrap: wrap; gap: 6px; }
.tva-form input, .tva-form select { flex: 1; min-width: 140px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid #E2E8F0; font-size: 13px; font-weight: 700; color: #0F2942; background: #fff; }
.tva-form button { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 11px; background: #0F2942; color: #fff; font-size: 12.5px; font-weight: 900; }
.tva-note { margin-top: 10px; font-size: 11px; font-weight: 600; color: #94A3B8; }
.tva-brands { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 70vh; overflow-y: auto; }
@media (min-width: 700px) { .tva-brands { grid-template-columns: 1fr 1fr; } }
.tva-brand { border-radius: 14px; border: 1px solid #EEF2F7; padding: 10px; background: #FBFCFE; }
.tva-brand-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.tva-brand-h span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 900; color: #0F2942; }
.tva-brand-h span i { width: 10px; height: 10px; border-radius: 99px; background: var(--bc); }
.tva-brand-h button { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #94A3B8; }
.tva-brand-h button:hover { background: #FFF1F2; color: #E11D48; }
.tva-models { display: flex; flex-wrap: wrap; gap: 5px; }
.tva-models span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 8px; background: #fff; border: 1px solid #E2E8F0; font-size: 11.5px; font-weight: 700; color: #334155; }
.tva-models span button { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #94A3B8; }
.tva-models span button:hover { background: #FFF1F2; color: #E11D48; }
.tva-models em { font-size: 11.5px; color: #94A3B8; }

/* ===== TIV: deadline extension + analytics (flat cards) ===== */
.tva-btn.is-navy { background: #0F2942; border-color: #0F2942; color: #fff; }
.tva-ext { display: block; font-size: 10.5px; font-weight: 700; color: #7C3AED; margin-top: 2px; }
.tva-dl .tva-ext { display: inline; margin-left: 8px; color: #94A3B8; text-decoration: line-through; }
.tva-ext-l { display: block; margin: 12px 2px 6px; font-size: 11.5px; font-weight: 800; color: #64748B; }
.tva-ext-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.tva-ext-q button { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; font-size: 12.5px; font-weight: 900; color: #0F2942; }
.tva-ext-q button small { font-size: 10.5px; font-weight: 700; color: #94A3B8; }
.tva-ext-q button.is-on { background: #0F2942; border-color: #0F2942; color: #fff; }
.tva-ext-q button.is-on small { color: #F4D58D; }
.tva-ext-date { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #E2E8F0; font-size: 15px; font-weight: 800; color: #0F2942; }
.tva-ext-scope { display: flex; flex-direction: column; gap: 6px; }
.tva-ext-scope label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid #E2E8F0; font-size: 13px; font-weight: 800; color: #0F2942; cursor: pointer; }
.tva-ext-scope label small { width: 100%; padding-left: 24px; font-size: 11px; font-weight: 600; color: #94A3B8; }
.tva-ext-scope input, .tva-ext-list input { accent-color: #0F2942; width: 16px; height: 16px; }
.tva-ext-list { margin-top: 8px; max-height: 220px; overflow-y: auto; border-radius: 12px; border: 1px solid #EEF2F7; padding: 6px; }
.tva-ext-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #334155; cursor: pointer; }
.tva-ext-list label:hover { background: #F5F8FC; }
.tva-ext-list label em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #7C3AED; font-weight: 800; }
.tva-ext-acts { display: flex; gap: 10px; padding: 2px 8px 6px; }
.tva-ext-acts button { font-size: 11.5px; font-weight: 900; color: #0F2942; }
.tva-ext-clear { width: 100%; margin-top: 8px; font-size: 12px; font-weight: 800; color: #E11D48; }

.tvn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tvn-sel { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; }
.tvn-sel span { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.tvn-sel select { border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 12.5px; font-weight: 800; color: #0F2942; padding: 0 4px !important; height: 32px; }
.tvn-range { margin-left: auto; font-size: 11px; font-weight: 700; color: #94A3B8; }
@media (min-width: 900px) { .tva-kpis.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tvn-up { color: #059669 !important; font-weight: 900; } .tvn-dn { color: #E11D48 !important; font-weight: 900; }
.tvn-story { margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; background: #FFFCF4; border: 1px solid #F6E7C1; }
.tvn-story-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #8A5A00; }
.tvn-story ul { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 900px) { .tvn-story ul { grid-template-columns: 1fr 1fr; } }
.tvn-story li { display: flex; align-items: flex-start; gap: 9px; }
.tvn-story li > span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: #fff; border: 1px solid #F6E7C1; color: #B45309; }
.tvn-story p { font-size: 12.5px; font-weight: 600; color: #334155; line-height: 1.45; }
.tvn-story p b { color: #0F2942; font-weight: 900; } .tvn-story p b.up { color: #059669; } .tvn-story p b.dn { color: #E11D48; }
@media (min-width: 1100px) { .tva-grid.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tva-grid.is-even { margin-bottom: 10px; }
.tvn-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 900; color: #0F2942; }
.tvn-brand em { font-style: normal; width: 16px; font-size: 10.5px; color: #94A3B8; text-align: right; }
.tvn-brand i { width: 9px; height: 9px; border-radius: 99px; }
.tvn-focus td { background: #FFFCF4; }
.tvn-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.tvn-spark i { width: 5px; border-radius: 2px; background: var(--bc); opacity: .85; }
.tvn-bar { display: inline-block; width: 46px; height: 5px; margin-right: 6px; border-radius: 99px; background: #F1F5F9; overflow: hidden; vertical-align: middle; }
.tvn-bar.is-sm { width: 34px; }
.tvn-bar i { display: block; height: 100%; border-radius: 99px; }
.tvn-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
@media (min-width: 700px) { .tvn-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tvn-quad > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.tvn-quad b { font-size: 18px; font-weight: 900; color: var(--c); line-height: 1.1; }
.tvn-quad span { font-size: 11.5px; font-weight: 900; color: #0F2942; }
.tvn-quad small { font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.tvn-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tvn-model { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FBFCFE; border: 1px solid #EEF2F7; }
.tvn-m-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; font-weight: 900; color: #0F2942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvn-m-name small { font-size: 10.5px; font-weight: 700; color: #94A3B8; }
.tvn-model b { font-size: 15px; font-weight: 900; color: #0F2942; }
.tvn-model em { font-style: normal; min-width: 34px; text-align: right; font-size: 12px; font-weight: 900; color: #94A3B8; }

/* --- Month closing extension (admin card + officer banner) --- */
.mc-card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;padding:16px}
.mc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.mc-head h3{font-size:13px;font-weight:900;color:#1E293B}
.mc-head p{font-size:11px;color:#64748B;font-weight:500}
.mc-ico{width:32px;height:32px;border-radius:10px;background:#FEF3C7;color:#B45309;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-tag{font-size:10px;font-weight:900;color:#0F2B5B;background:#E0E7FF;border:1px solid #C7D2FE;border-radius:999px;padding:3px 9px;white-space:nowrap}
.mc-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-bottom:10px}
.mc-day{position:relative;display:flex;flex-direction:column;align-items:center;padding:7px 2px 9px;border-radius:12px;border:1px solid #E2E8F0;background:#fff;color:#334155;transition:background .15s,border-color .15s}
.mc-day:not(:disabled):hover{border-color:#F59E0B;background:#FFFBEB}
.mc-day:disabled{cursor:default}
.mc-day.is-closed{background:#EEF2F7;color:#64748B}
.mc-day.is-ext{background:#FEF3C7;border-color:#FCD34D;color:#92400E}
.mc-day.is-end{background:#0F2B5B;border-color:#0F2B5B;color:#fff}
.mc-day.is-end.is-ext{background:#D97706;border-color:#D97706}
.mc-dow{font-size:9px;font-weight:700;text-transform:uppercase;opacity:.75}
.mc-num{font-size:17px;font-weight:900;line-height:1.1}
.mc-mon{font-size:9px;font-weight:800;opacity:.8}
.mc-flag{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;background:#fff;color:#0F2B5B;border:1px solid currentColor;border-radius:999px;padding:0 5px;white-space:nowrap}
.mc-day.is-end.is-ext .mc-flag{color:#B45309}
.mc-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:999px;background:#10B981}
.mc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 10px}
.mc-chip{height:30px;padding:0 11px;border-radius:999px;border:1px solid #E2E8F0;background:#fff;font-size:11px;font-weight:800;color:#334155}
.mc-chip:not(:disabled):hover{border-color:#F59E0B;color:#B45309}
.mc-chip.is-on{background:#0F2B5B;border-color:#0F2B5B;color:#fff}
.mc-chip:disabled{opacity:.45;cursor:not-allowed}
.mc-pick{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;border-radius:999px;border:1px solid #E2E8F0;background:#fff;color:#64748B}
.mc-pick input{border:0;outline:0;background:transparent;font-size:11px;font-weight:800;color:#334155;width:112px}
.mc-pick.is-off{opacity:.45}
.mc-status{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:#475569;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:10px 12px}
.mc-status b{color:#0F172A}
.mc-status.is-live{background:#FFFBEB;border-color:#FDE68A;color:#78350F}
.mc-status.is-warn{background:#F0F9FF;border-color:#BAE6FD;color:#0C4A6E}
.mc-pulse{width:9px;height:9px;margin-top:4px;border-radius:999px;background:#F59E0B;flex-shrink:0;animation:mcPulse 1.6s ease-in-out infinite}
@keyframes mcPulse{0%,100%{opacity:1}50%{opacity:.35}}
.mc-roll{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mc-note{display:flex;gap:6px;align-items:flex-start;margin-top:10px;font-size:10.5px;color:#94A3B8;font-weight:600}
.mc-banner{display:flex;align-items:center;gap:10px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:14px;padding:10px 12px;margin-bottom:10px}
.mc-banner-ico{width:32px;height:32px;border-radius:10px;background:#FEF3C7;color:#B45309;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-banner-t{font-size:12px;font-weight:900;color:#78350F}
.mc-banner-s{font-size:11px;color:#92400E;font-weight:500;line-height:1.35}
.mc-banner-left{font-size:10px;font-weight:900;color:#B45309;background:#fff;border:1px solid #FDE68A;border-radius:999px;padding:3px 8px;white-space:nowrap}
@media (max-width:480px){.mc-strip{gap:4px}.mc-num{font-size:14px}.mc-head{flex-wrap:wrap}}

/* --- Installable app + phone alerts (officer card, Alerts page, heads-up, sheet) --- */
.s360-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 13px;border-radius:11px;font-size:12px;font-weight:800;border:1px solid #E2E8F0;background:#fff;color:#0F172A;white-space:nowrap;transition:background .15s,border-color .15s}
.s360-btn:hover{border-color:#CBD5E1;background:#F8FAFC}
.s360-btn.is-navy{background:#0F2942;border-color:#0F2942;color:#fff}
.s360-btn.is-navy:hover{background:#163a5c}
.s360-btn.is-gold{background:#F4A915;border-color:#F4A915;color:#0F2942;height:42px;padding:0 18px;font-size:13px}
.s360-btn.is-ghost{background:#fff}
.s360-x{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#94A3B8;flex-shrink:0}
.s360-x:hover{background:#F1F5F9;color:#475569}
.s360-card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;padding:12px;margin-bottom:10px}
.s360-card-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.s360-card-logo{width:40px;height:40px;border-radius:12px;border:1px solid #E2E8F0;background:#fff;flex-shrink:0}
.s360-card-t{font-size:13px;font-weight:900;color:#0F172A}
.s360-card-s{font-size:11px;color:#64748B;line-height:1.4;margin-top:1px}
.s360-step{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:8px 10px;margin-top:6px}
.s360-step-n{width:24px;height:24px;border-radius:999px;background:#E0E7FF;color:#3730A3;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s360-step.is-done .s360-step-n{background:#D1FAE5;color:#047857}
.s360-step.is-done .s360-step-t{color:#047857}
.s360-step-t{font-size:12px;font-weight:800;color:#0F172A}
.s360-step-s{font-size:10.5px;color:#64748B}
.s360-k{display:inline-block;min-width:18px;padding:0 4px;border:1px solid #CBD5E1;border-radius:5px;font-size:11px;text-align:center;background:#fff}
.s360-page{max-width:640px;margin:0 auto;padding-bottom:40px}
.s360-page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.s360-page-h h1{font-size:22px;font-weight:900;color:#0F172A;letter-spacing:-.02em}
.s360-page-h p{font-size:12px;color:#64748B}
.s360-link{font-size:11px;font-weight:800;color:#1D4ED8}
.s360-link:hover{text-decoration:underline}
.s360-status{display:flex;align-items:center;gap:10px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:11px 12px;color:#475569;margin-bottom:10px}
.s360-status.is-on{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.s360-status.is-bad{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.s360-status-t{font-size:13px;font-weight:900}
.s360-status-s{font-size:11px;opacity:.85;line-height:1.4}
.s360-dot{width:10px;height:10px;border-radius:999px;background:#10B981;flex-shrink:0;animation:mcPulse 1.8s ease-in-out infinite}
.s360-hero{text-align:center;background:#0F2942;color:#fff;border-radius:18px;padding:22px 18px;margin-bottom:10px}
.s360-hero-bell{width:52px;height:52px;margin:0 auto 10px;border-radius:16px;background:rgba(244,169,21,.16);color:#F4A915;display:flex;align-items:center;justify-content:center;animation:s360Ring 2.4s ease-in-out infinite;transform-origin:50% 10%}
@keyframes s360Ring{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(12deg)}80%{transform:rotate(-10deg)}85%{transform:rotate(7deg)}90%{transform:rotate(-4deg)}}
.s360-hero-t{font-size:16px;font-weight:900}
.s360-hero-s{font-size:12px;color:#CBD5E1;margin:4px auto 14px;max-width:340px;line-height:1.45}
.s360-row-btn{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:9px 12px;margin-bottom:10px}
.s360-row-btn b{display:block;font-size:12.5px;color:#0F172A}
.s360-row-btn small{display:block;font-size:10.5px;color:#64748B}
.s360-sec{margin-top:14px}
.s360-sec-t{font-size:10.5px;font-weight:900;color:#64748B;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.s360-mini{font-size:10.5px;color:#94A3B8;margin-top:6px}
.s360-cats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.s360-cat{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:9px 10px;font-size:11.5px;font-weight:800;color:#64748B;text-align:left}
.s360-cat.is-on{color:#0F172A;border-color:#CBD5E1}
.s360-sw{margin-left:auto;width:30px;height:18px;border-radius:999px;background:#E2E8F0;position:relative;flex-shrink:0;transition:background .15s}
.s360-sw span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;background:#fff;transition:left .15s}
.s360-cat.is-on .s360-sw{background:#10B981}
.s360-cat.is-on .s360-sw span{left:14px}
.s360-list{background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden}
.s360-grp{font-size:10px;font-weight:900;color:#94A3B8;text-transform:uppercase;letter-spacing:.08em;padding:9px 12px 4px;background:#F8FAFC;border-top:1px solid #F1F5F9}
.s360-grp:first-child{border-top:0}
.s360-item{width:100%;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-top:1px solid #F1F5F9;position:relative}
.s360-item:hover{background:#F8FAFC}
.s360-item.is-new{background:#FFFBEB}
.s360-av{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.s360-item-t{display:block;font-size:12.5px;font-weight:800;color:#0F172A;line-height:1.3}
.s360-item-b{display:block;font-size:11.5px;color:#475569;line-height:1.4;margin-top:1px}
.s360-item-m{display:block;font-size:10px;color:#94A3B8;margin-top:3px;font-weight:600}
.s360-new{width:8px;height:8px;border-radius:999px;background:#F59E0B;margin-top:5px;flex-shrink:0}
.s360-empty{text-align:center;padding:28px 16px;color:#64748B}
.s360-empty span{font-size:28px}
.s360-empty p{font-size:13px;font-weight:800;color:#0F172A;margin-top:4px}
.s360-empty small{font-size:11px}
#s360-headsup{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;width:min(420px,calc(100vw - 20px));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.s360-hu{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:100%;background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:10px 12px;box-shadow:0 10px 30px rgba(15,41,66,.16);transform:translateY(-120%);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s}
.s360-hu.is-in{transform:translateY(0);opacity:1}
.s360-hu-ico{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.s360-hu-app{display:block;font-size:9.5px;font-weight:800;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em}
.s360-hu-t{display:block;font-size:12.5px;font-weight:900;color:#0F172A;line-height:1.3}
.s360-hu-b{display:block;font-size:11.5px;color:#475569;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s360-sheet{position:fixed;inset:0;z-index:9998}
.s360-sheet-bg{position:absolute;inset:0;background:rgba(15,23,42,.45);opacity:0;transition:opacity .2s}
.s360-sheet{position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);width:min(480px,100vw);background:#fff;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));transition:transform .3s cubic-bezier(.2,.9,.3,1)}
#s360-sheet.is-in .s360-sheet-bg{opacity:1}
#s360-sheet.is-in .s360-sheet{transform:translate(-50%,0)}
.s360-sheet-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.s360-sheet-h h3{font-size:15px;font-weight:900;color:#0F172A}
.s360-sheet-h p{font-size:11.5px;color:#64748B}
.s360-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s360-steps{list-style:none;padding:0;margin:0 0 14px}
.s360-steps li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #F1F5F9;font-size:12.5px;color:#334155}
.s360-steps li>span{width:24px;height:24px;border-radius:999px;background:#0F2942;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* --- Admin: Notifications page (flat cards) --- */
.pc{padding-bottom:40px}
.pc-loading{padding:40px;text-align:center;color:#94A3B8;font-size:13px;font-weight:700}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pc-head h1{font-size:20px;font-weight:900;color:#0F172A;letter-spacing:-.02em}
.pc-head p{font-size:12px;color:#64748B}
.pc-ico{width:40px;height:40px;border-radius:12px;background:#FEF3C7;color:#B45309;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pc-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:10px;border:1px solid #E2E8F0;background:#fff;font-size:11.5px;font-weight:800;color:#334155;white-space:nowrap}
.pc-btn:hover{border-color:#CBD5E1}
.pc-btn.is-navy{background:#0F2942;border-color:#0F2942;color:#fff;height:36px;padding:0 16px}
.pc-btn:disabled{opacity:.45;cursor:not-allowed}
.pc-warn{display:flex;gap:8px;align-items:center;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:12px;padding:9px 12px;font-size:12px;font-weight:700;margin-bottom:12px}
.pc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.pc-kpi{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:11px 12px;position:relative}
.pc-kpi p{font-size:10px;font-weight:900;color:#64748B;text-transform:uppercase;letter-spacing:.06em}
.pc-kpi b{display:block;font-size:13px;font-weight:900;color:#0F172A;margin-top:4px}
.pc-kpi b.pc-big{font-size:22px;letter-spacing:-.02em}
.pc-kpi small{display:block;font-size:10.5px;color:#94A3B8;font-weight:600}
.pc-ring{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:999px;background:conic-gradient(#10B981 calc(var(--p)*1%),#E2E8F0 0);display:flex;align-items:center;justify-content:center}
.pc-ring span{width:34px;height:34px;border-radius:999px;background:#F8FAFC;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#047857}
.pc-kpi:first-child b{margin-top:16px}
.pc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.pc-grid.is-even{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-side{display:flex;flex-direction:column;gap:12px}
.pc-card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;padding:14px}
.pc-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pc-card-h h3{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:900;color:#0F172A}
.pc-reach{font-size:11px;font-weight:900;color:#065F46;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:999px;padding:3px 10px}
.pc-tpls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pc-tpl{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:999px;border:1px solid #E2E8F0;background:#fff;font-size:11.5px;font-weight:800;color:#334155}
.pc-tpl.is-on{background:#0F2942;border-color:#0F2942;color:#fff}
.pc-lbl{display:flex;justify-content:space-between;font-size:10.5px;font-weight:900;color:#64748B;text-transform:uppercase;letter-spacing:.06em;margin:10px 0 5px}
.pc-lbl span{font-weight:700;color:#94A3B8;text-transform:none;letter-spacing:0}
.pc-in{width:100%;background:#fff;border:1px solid #E2E8F0;border-radius:11px;padding:9px 11px;font-size:13px;color:#0F172A;outline:none;resize:vertical}
.pc-in:focus{border-color:#0F2942}
.pc-search{margin-bottom:6px;padding:7px 10px;font-size:12px}
.pc-segs{display:flex;flex-wrap:wrap;gap:5px}
.pc-segs.is-sm .pc-seg{height:26px;font-size:10.5px;padding:0 9px}
.pc-seg{height:30px;padding:0 11px;border-radius:9px;border:1px solid #E2E8F0;background:#fff;font-size:11.5px;font-weight:800;color:#475569}
.pc-seg.is-on{background:#E0E7FF;border-color:#A5B4FC;color:#312E81}
.pc-pick{display:flex;flex-wrap:wrap;gap:5px;max-height:150px;overflow:auto;margin-top:8px;padding:8px;background:#fff;border:1px solid #E2E8F0;border-radius:11px}
.pc-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;border:1px solid #E2E8F0;background:#F8FAFC;font-size:11px;font-weight:700;color:#475569}
.pc-chip.is-on{background:#0F2942;border-color:#0F2942;color:#fff}
.pc-on{width:7px;height:7px;border-radius:999px;background:#CBD5E1}
.pc-on.is-y{background:#10B981}
.pc-toggle{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:11.5px;color:#475569;cursor:pointer}
.pc-toggle input{display:none}
.pc-sw{width:34px;height:20px;border-radius:999px;background:#E2E8F0;position:relative;flex-shrink:0;transition:background .15s}
.pc-sw span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:#fff;transition:left .15s}
.pc-toggle input:checked+.pc-sw{background:#F59E0B}
.pc-toggle input:checked+.pc-sw span{left:16px}
.pc-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #E2E8F0}
.pc-mini{font-size:11px;color:#64748B;line-height:1.45}
.pc-phone{width:100%;max-width:380px;margin:0 auto;background:#0F2942;border-radius:26px;padding:14px 12px 16px;color:#fff;border:6px solid #1E293B}
.pc-ph-top{display:flex;justify-content:space-between;font-size:10px;font-weight:700;opacity:.8;padding:0 6px}
.pc-ph-clock{text-align:center;font-size:40px;font-weight:300;letter-spacing:-.02em;margin-top:8px;line-height:1}
.pc-ph-date{text-align:center;font-size:11px;opacity:.75;margin-bottom:14px}
.pc-ph-n{background:rgba(255,255,255,.94);color:#0F172A;border-radius:16px;padding:10px 12px}
.pc-ph-app{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#64748B}
.pc-ph-app img{width:16px;height:16px;border-radius:4px}
.pc-ph-imp{margin-left:auto;font-size:9px;font-weight:900;color:#B45309;background:#FEF3C7;border-radius:999px;padding:1px 6px}
.pc-ph-t{font-size:12.5px;font-weight:900;margin-top:5px;line-height:1.3;word-break:break-word}
.pc-ph-b{font-size:11.5px;color:#334155;line-height:1.35;margin-top:2px;word-break:break-word}
.pc-ph-acts{display:flex;gap:14px;margin-top:8px;padding-top:7px;border-top:1px solid #E2E8F0;font-size:11px;font-weight:800;color:#1D4ED8}
.pc-ph-cap{text-align:center;font-size:9.5px;opacity:.55;margin-top:10px;text-transform:uppercase;letter-spacing:.1em}
.pc-nudge{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:11px;padding:7px 10px;font-size:11.5px;font-weight:700;color:#92400E;margin-bottom:8px}
.pc-people{max-height:340px;overflow:auto;background:#fff;border:1px solid #E2E8F0;border-radius:12px}
.pc-person{display:flex;align-items:center;gap:9px;padding:8px 10px;border-top:1px solid #F1F5F9}
.pc-person:first-child{border-top:0}
.pc-avatar{width:30px;height:30px;border-radius:10px;background:#E0E7FF;color:#3730A3;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pc-p-n{font-size:12px;font-weight:800;color:#0F172A}
.pc-p-n small{font-size:9.5px;color:#94A3B8;font-weight:800;margin-left:3px}
.pc-p-s{font-size:10.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-tag{font-size:10px;font-weight:900;color:#64748B;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:999px;padding:2px 8px;white-space:nowrap;text-align:right}
.pc-tag small{display:block;font-size:9px;font-weight:700;opacity:.8}
.pc-tag.is-on{color:#047857;background:#ECFDF5;border-color:#A7F3D0;border-radius:10px}
.pc-auto{background:#fff;border:1px solid #E2E8F0;border-radius:12px;margin-bottom:8px}
.pc-auto-r{display:flex;gap:10px;padding:9px 11px;border-top:1px solid #F1F5F9}
.pc-auto-r:first-child{border-top:0}
.pc-auto-e{font-size:16px;line-height:1.2}
.pc-auto-r p{font-size:12px;font-weight:800;color:#0F172A}
.pc-auto-r small{font-size:10.5px;color:#64748B;line-height:1.4}
.pc-hist{background:#fff;border:1px solid #E2E8F0;border-radius:12px;max-height:440px;overflow:auto}
.pc-h-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-top:1px solid #F1F5F9}
.pc-h-row:first-child{border-top:0}
.pc-h-t{font-size:12px;font-weight:800;color:#0F172A}
.pc-h-b{font-size:11px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-h-m{font-size:10px;color:#94A3B8;margin-top:2px}
.pc-h-d{width:70px;flex-shrink:0;text-align:right}
.pc-h-d b{font-size:11.5px;font-weight:900;color:#0F172A}
.pc-bar{display:block;height:5px;border-radius:999px;background:#E2E8F0;margin-top:4px;overflow:hidden}
.pc-bar span{display:block;height:100%;background:#10B981;border-radius:999px}
@media (max-width:1024px){.pc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-grid,.pc-grid.is-even{grid-template-columns:1fr}}
@media (max-width:480px){.s360-cats{grid-template-columns:1fr}.pc-head{flex-wrap:wrap}}

/* EMI Analytics: earlier months (flat cards) */
.eh-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 30px 0 12px; border-radius: 12px; background: #fff; border: 2px solid #E2E8F0; color: #0F2942; }
.eh-pick.is-past { background: #FFF8E6; border-color: #F4A915; }
.eh-pick select { appearance: none; background: transparent !important; border: 0 !important; outline: 0; font-size: 12px; font-weight: 900; color: #0F2942; cursor: pointer; padding: 0 2px 0 0 !important; min-height: 0 !important; box-shadow: none !important; border-radius: 0; }
.eh-pick-caret { position: absolute; right: 10px; pointer-events: none; color: #94A3B8; }
.eh-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: #FFF8E6; border: 1px solid #F8D98A; }
.eh-banner-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #0F2942; color: #F4A915; flex-shrink: 0; }
.eh-banner-t { font-size: 13px; font-weight: 900; color: #0F2942; }
.eh-banner-t span { font-weight: 700; color: #B7791F; }
.eh-banner-s { font-size: 11px; color: #64748B; font-weight: 600; margin-top: 1px; }
.eh-banner-w { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #B45309; margin-top: 4px; }
.eh-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; font-size: 11px; font-weight: 800; color: #0F2942; background: #fff; border: 1px solid #E2E8F0; }
.eh-btn:hover { border-color: #0F2942; }
.eh-btn-solid { background: #0F2942; color: #fff; border-color: #0F2942; }
.eh-btn-solid:hover { background: #1E4A75; }
.eh-trend { padding: 12px 14px 10px; border-radius: 14px; background: linear-gradient(135deg, #F5F8FC, #fff 70%); border: 1px solid #E2E8F0; }
.eh-trend-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.eh-trend-t { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #0F2942; }
.eh-trend-s { font-size: 10px; font-weight: 600; color: #94A3B8; }
.eh-trend-legend { display: flex; gap: 10px; font-size: 10px; font-weight: 700; color: #64748B; }
.eh-trend-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.eh-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.eh-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .15s; min-width: 0; }
.eh-bar:hover { background: #EEF2F7; }
.eh-bar.is-on { background: #FFF8E6; border-color: #F4A915; }
.eh-bar-v { font-size: 10px; font-weight: 900; color: #0F2942; font-variant-numeric: tabular-nums; }
.eh-bar-track { position: relative; width: 100%; max-width: 30px; height: 70px; display: flex; align-items: flex-end; }
.eh-bar-due { position: relative; width: 100%; border-radius: 6px 6px 3px 3px; background: #E2E8F0; display: flex; align-items: flex-end; overflow: hidden; }
.eh-bar-col { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.eh-bar-m { font-size: 10px; font-weight: 800; color: #64748B; line-height: 1.1; text-align: center; }
.eh-bar-m small { display: block; font-size: 8.5px; color: #94A3B8; font-weight: 700; }
.eh-bar.is-on .eh-bar-m { color: #0F2942; }
.eh-delta { font-size: 10px; font-weight: 900; color: #64748B; }
.eh-delta.up { color: #059669; }
.eh-delta.down { color: #E11D48; }
.eh-st { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
@media (max-width: 640px) { .eh-bars { gap: 2px; } .eh-bar-v { font-size: 8.5px; } .eh-bar-track { height: 54px; } }
.s360-reinstall { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; padding: 9px 11px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F8D98A; font-size: 11.5px; line-height: 1.45; color: #5B4A1F; font-weight: 600; }
.s360-reinstall b { color: #0F2942; font-weight: 900; }
.s360-reinstall i, .s360-reinstall svg { flex-shrink: 0; margin-top: 2px; color: #B7791F; }
/* Area Summary: earlier months of the FY */
.pt-table .pt-pm-h { background: #F5F8FC; color: #0F2942; }
.pt-table td.pt-pm { background: #FAFCFE; }
.pt-pm-v { font-weight: 900; color: #0F2942; font-variant-numeric: tabular-nums; }
.pt-pm-v small { font-size: 9.5px; font-weight: 700; color: #94A3B8; margin-left: 1px; }
.pt-pm-a { display: inline-block; min-width: 38px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); text-align: center; font-variant-numeric: tabular-nums; }
.pt-totrow .pt-pm-v, .pt-totrow .pt-pm-v small { color: inherit; }
.pt-totrow td.pt-pm { background: transparent; }
/* Growth vs SPLY (Territory Pulse, Area Summary) */
.pt-grow { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-grow.is-up { color: #059669; background: #ECFDF5; }
.pt-grow.is-down { color: #E11D48; background: #FFF1F2; }
.pt-grow.is-flat { color: #64748B; background: #F1F5F9; }
.pt-grow.is-new { color: #4F46E5; background: #EEF2FF; }
.pt-grow.is-dark.is-up { color: #6EE7B7; background: rgba(16, 185, 129, .15); }
.pt-grow.is-dark.is-down { color: #FDA4AF; background: rgba(244, 63, 94, .15); }
.pt-grow.is-dark.is-flat, .pt-grow.is-dark.is-new { color: #E2E8F0; background: rgba(255, 255, 255, .1); }
.brand-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; margin-left: 6px; border-radius: 99px; vertical-align: middle; background: #fff; border: 1px solid #E2E8F0; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.brand-badge.is-f { border-color: #BFD3F5; color: #041A54; background: #F2F6FD; }
.brand-badge.is-m { border-color: #F9C3CB; color: #B81B31; background: #FFF4F5; }
.brand-badge.is-both { border-color: #D8CCF5; color: #4C1D95; background: #F7F4FE; }
.brand-badge i { font-style: normal; color: #94A3B8; }

/* Manual deliveries: ERP check and carry forward */
.rc-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(15, 41, 66, .55); backdrop-filter: blur(3px); }
.rc-card { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 1040px; max-height: 92vh; padding: 12px 14px; border-radius: 18px; background: #fff; }
.rc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: -12px -14px 0; border-radius: 18px 18px 0 0; color: #fff; background: linear-gradient(120deg, #0B2036, #0F2942 60%, #1E4A7A); }
.rc-kicker { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #F4A915; }
.rc-flow { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rc-month { padding: 3px 11px; border-radius: 99px; font-size: 13px; font-weight: 900; background: rgba(255, 255, 255, .12); }
.rc-month.is-to { background: #F4A915; color: #0F2942; }
.rc-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #CBD5E1; }
.rc-head p { font-size: 11.5px; color: #CBD5E1; margin-top: 6px; }
.rc-head-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rc-head-r select { height: 28px; padding: 0 8px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #0F2942; background: #fff; border: 0; }
.rc-x { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .14); }
.rc-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 12px; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }
.rc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.rc-tile { --k: #0F2942; text-align: left; padding: 7px 10px; border-radius: 12px; background: #F8FAFC; border: 1.5px solid transparent; transition: all .15s; }
.rc-tile.is-done { --k: #059669; } .rc-tile.is-carry { --k: #D97706; } .rc-tile.is-review { --k: #64748B; }
.rc-tile span { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: var(--k); }
.rc-tile b { display: block; font-size: 20px; font-weight: 900; color: #0F2942; line-height: 1.15; }
.rc-tile small { font-size: 10px; font-weight: 600; color: #94A3B8; }
.rc-tile.is-on { border-color: var(--k); background: color-mix(in srgb, var(--k) 8%, #fff); }
.rc-split { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: #EEF2F7; }
.rc-split i { display: block; height: 100%; }
.rc-split .is-done { background: #10B981; } .rc-split .is-carry { background: #F59E0B; } .rc-split .is-review { background: #94A3B8; }
.rc-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-search { flex: 1 1 220px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid #E2E8F0; font-size: 12px; outline: none; }
.rc-search:focus { border-color: #1D4ED8; }
.rc-tools select, .rc-tools button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: #334155; background: #F1F5F9; border: 0; }
.rc-tools button:hover { background: #E2E8F0; }
.rc-table-wrap { flex: 1; min-height: 120px; overflow: auto; border: 1px solid #EEF2F7; border-radius: 12px; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 11.5px; color: #334155; }
.rc-table th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; text-align: left; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; background: #F8FAFC; white-space: nowrap; }
.rc-table td { padding: 5px 8px; border-top: 1px solid #F1F5F9; vertical-align: middle; }
.rc-table tr.is-picked td { background: #FFFBEB; }
.rc-table td small { display: block; font-size: 10px; color: #94A3B8; }
.rc-table input { width: 15px; height: 15px; accent-color: #D97706; }
.rc-id { font-family: ui-monospace, Menlo, Consolas, monospace; color: #0F2942; }
.rc-num { text-align: right; font-weight: 800; }
.rc-note { font-size: 10.5px; color: #64748B; min-width: 200px; }
.rc-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.rc-tag.is-done { background: #D1FAE5; color: #047857; } .rc-tag.is-carry { background: #FEF3C7; color: #92400E; } .rc-tag.is-review { background: #F1F5F9; color: #475569; }
.rc-cf { margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 8.5px; font-weight: 900; color: #6D28D9; background: #EDE9FE; }
.rc-empty { padding: 30px; text-align: center; font-size: 12px; color: #94A3B8; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #475569; }
.rc-foot b { color: #0F2942; }
.rc-foot em { font-style: normal; color: #B45309; font-weight: 700; }
.rc-go { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 900; color: #0F2942; background: #F4A915; }
.rc-go:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) { .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-head { flex-direction: column; } }

/* Territory Pulse / Area Summary: column switches */
.pt-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 16px; border-bottom: 1px solid #EEF2F7; background: #FBFCFE; }
.pt-cols-l { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.pt-col { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; color: #94A3B8; background: #fff; border: 1px dashed #CBD5E1; transition: all .15s; }
.pt-col:hover { color: #0F2942; border-color: #0F2942; }
.pt-col.is-on { color: #fff; background: #0F2942; border: 1px solid #0F2942; }
.pt-col-reset { margin-left: 4px; font-size: 10.5px; font-weight: 800; color: #1D4ED8; text-decoration: underline; }

/* Export studio (Excel and PowerPoint) */
.tx-overlay { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(15, 41, 66, .55); backdrop-filter: blur(3px); }
.tx-card { display: flex; flex-direction: column; width: 100%; max-width: 1220px; height: min(860px, 94vh); border-radius: 18px; background: #fff; overflow: hidden; }
.tx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; background: linear-gradient(120deg, #0B2036, #0F2942 60%, #1E4A7A); }
.tx-kicker { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #F4A915; }
.tx-tabs { display: flex; gap: 4px; margin-top: 6px; }
.tx-tabs button { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #CBD5E1; background: rgba(255, 255, 255, .09); }
.tx-tabs button.is-on { color: #0F2942; background: #F4A915; }
.tx-x { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .14); }
.tx-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.tx-side { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-right: 1px solid #EEF2F7; overflow-y: auto; background: #FBFCFE; }
.tx-l { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.tx-link { font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #1D4ED8; }
.tx-in { height: 32px; padding: 0 9px; border-radius: 9px; border: 1px solid #E2E8F0; font-size: 12px; font-weight: 600; color: #0F2942; outline: none; background: #fff; }
.tx-in:focus { border-color: #1D4ED8; }
.tx-groups { display: flex; flex-direction: column; gap: 5px; }
.tx-group { padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid #E8EDF3; }
.tx-group.is-off { opacity: .6; }
.tx-group-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #0F2942; cursor: pointer; }
.tx-group-h b { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-group-h em { font-style: normal; padding: 0 6px; border-radius: 99px; font-size: 9px; font-weight: 900; color: #0F2942; background: #F4A915; }
.tx-group-h span { font-size: 10px; font-weight: 700; color: #94A3B8; }
.tx-group input, .tx-checks input { width: 14px; height: 14px; accent-color: #0F2942; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.tx-chips button { padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #94A3B8; background: #F1F5F9; text-decoration: line-through; }
.tx-chips button.is-on { color: #0F2942; background: #E0E7FF; text-decoration: none; }
.tx-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 9px; background: #EEF2F7; }
.tx-seg button { padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #64748B; }
.tx-seg button.is-on { color: #fff; background: #0F2942; }
.tx-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.tx-checks label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #334155; cursor: pointer; }
.tx-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; }
.tx-prev-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tx-prev-h b { font-size: 14px; font-weight: 900; color: #0F2942; }
.tx-prev-h span { font-size: 11px; font-weight: 600; color: #94A3B8; }
.tx-prev-h em { font-style: normal; color: #B45309; }
.tx-prev-wrap { flex: 1; min-height: 0; overflow: auto; padding: 10px; border-radius: 12px; background: repeating-conic-gradient(#F8FAFC 0 25%, #FFFFFF 0 50%) 0 0 / 16px 16px; border: 1px solid #EEF2F7; }
.tx-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: #64748B; }
.tx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #EEF2F7; }
.tx-actions { display: flex; gap: 8px; }
.tx-ghost { font-size: 11.5px; font-weight: 700; color: #64748B; text-decoration: underline; }
.tx-copy, .tx-go { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 11px; font-size: 12.5px; font-weight: 900; }
.tx-copy { color: #0F2942; background: #F4A915; }
.tx-go { color: #fff; background: #047857; }
@media (max-width: 900px) { .tx-main { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .tx-side { border-right: 0; border-bottom: 1px solid #EEF2F7; } .tx-card { height: 94vh; } }

/* Top bar v2: command palette search */
#admin-topbar .atb-s-ic { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #0F2942, #1E4A7A); pointer-events: none; }
#admin-topbar .atb-search input { height: 40px; border-radius: 14px; padding: 0 70px 0 42px; font-size: 13px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(203, 213, 225, .9); }
#admin-topbar .atb-search input::placeholder { color: #94A3B8; font-weight: 600; }
#admin-topbar .atb-search input:focus { background: #fff; border-color: #F4A915; box-shadow: 0 0 0 4px rgba(244, 169, 21, .16); }
#admin-topbar .atb-search input::-webkit-search-cancel-button { display: none; }
#admin-topbar .atb-kbd { color: #0F2942; background: #fff; border-color: #E2E8F0; box-shadow: 0 1px 0 #CBD5E1; }
#admin-topbar .atb-results { padding: 0; max-height: none; overflow: hidden; border-radius: 16px; display: flex; flex-direction: column; }
#admin-topbar .atb-results.hidden { display: none; }
#admin-topbar .atb-scroll { max-height: min(460px, 64vh); overflow-y: auto; padding: 6px; }
#admin-topbar .atb-group { padding: 8px 10px 3px; }
#admin-topbar .atb-item { padding: 6px 8px; gap: 9px; }
#admin-topbar .atb-item .atb-it-ic { --k: #0F2942; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: var(--k); background: color-mix(in srgb, var(--k) 10%, #fff); }
#admin-topbar .atb-item.is-action .atb-it-ic { --k: #B45309; }
#admin-topbar .atb-item.is-terr .atb-it-ic { --k: #059669; }
#admin-topbar .atb-item.is-user .atb-it-ic { --k: #7C3AED; }
#admin-topbar .atb-item.is-cust .atb-it-ic { --k: #DB2777; }
#admin-topbar .atb-item.is-model .atb-it-ic { --k: #1D4ED8; }
#admin-topbar .atb-it-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#admin-topbar .atb-it-txt b { font-size: 12.5px; font-weight: 800; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-topbar .atb-it-txt small { font-size: 10.5px; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-topbar .atb-item mark { background: rgba(244, 169, 21, .28); color: inherit; border-radius: 3px; padding: 0 1px; }
#admin-topbar .atb-meta { flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 800; color: #475569; background: #F1F5F9; padding: 2px 7px; border-radius: 99px; }
#admin-topbar .atb-item:hover, #admin-topbar .atb-item.is-sel { background: #F4F7FB; box-shadow: none; }
#admin-topbar .atb-item.is-sel .atb-it-ic { color: #fff; background: var(--k); }
#admin-topbar .atb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; }
#admin-topbar .atb-foot { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-top: 1px solid #EEF2F7; background: #F8FAFC; font-size: 10.5px; font-weight: 700; color: #94A3B8; }
#admin-topbar .atb-foot kbd { display: inline-block; min-width: 18px; margin-right: 3px; padding: 0 4px; border-radius: 5px; font-size: 9.5px; font-family: inherit; text-align: center; color: #0F2942; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 1px 0 #CBD5E1; }
#admin-topbar .atb-foot-r { margin-left: auto; }

/* Month-start bell and checklist */
.mt-bell { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; color: #475569; background: rgba(255, 255, 255, .85); border: 1px solid rgba(226, 232, 240, .95); transition: all .2s; }
.mt-bell:hover { color: #fff; background: #0F2942; border-color: #0F2942; }
.mt-bell.has-tasks { color: #0F2942; }
.mt-bell.has-tasks svg { transform-origin: 50% 4px; animation: mtRing 3.2s ease-in-out 1s infinite; }
@keyframes mtRing { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }
.mt-bell b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; font-size: 10px; font-weight: 900; line-height: 18px; color: #0F2942; background: #F4A915; border: 2px solid #fff; }
.mt-bell em { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #10B981; border: 1.5px solid #fff; }
@media (prefers-reduced-motion: reduce) { .mt-bell.has-tasks svg { animation: none; } }
.mt-pop { position: fixed; top: 64px; right: 16px; z-index: 140; display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 80px); border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -24px rgba(15, 41, 66, .45); overflow: hidden; animation: mtIn .18s ease; }
@keyframes mtIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mt-head { display: flex; align-items: center; gap: 12px; padding: 14px; color: #fff; background: linear-gradient(120deg, #0B2036, #0F2942 60%, #1E4A7A); }
.mt-ring { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#F4A915 var(--p), rgba(255, 255, 255, .14) 0); }
.mt-ring span { display: flex; align-items: baseline; justify-content: center; width: 42px; height: 42px; padding-top: 10px; border-radius: 50%; font-size: 16px; font-weight: 900; background: #0F2942; }
.mt-ring small { font-size: 10px; color: #94A3B8; }
.mt-kicker { font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #F4A915; }
.mt-flow { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; font-weight: 900; }
.mt-flow span { padding: 1px 9px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.mt-flow span.is-new { color: #0F2942; background: #F4A915; }
.mt-head p { margin-top: 4px; font-size: 11px; color: #CBD5E1; }
.mt-again { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); align-self: flex-start; }
.mt-again.is-spin svg { animation: mtSpin 1s linear infinite; }
@keyframes mtSpin { to { transform: rotate(360deg); } }
.mt-allset { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 9px 12px; border-radius: 12px; color: #047857; background: #ECFDF5; }
.mt-allset span { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; }
.mt-allset b { font-size: 13px; font-weight: 900; }
.mt-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; }
.mt-step { margin-top: 8px; }
.mt-step-h { display: flex; align-items: center; gap: 6px; padding: 0 2px 5px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #0F2942; }
.mt-step-h span { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #94A3B8; }
.mt-task { --k: #0F2942; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 12px; background: #F8FAFC; border: 1px solid #EEF2F7; }
.mt-task + .mt-task { margin-top: 5px; }
.mt-task.is-done { --k: #059669; background: #fff; }
.mt-task.is-done .mt-txt b { color: #64748B; text-decoration: line-through; text-decoration-color: #CBD5E1; }
.mt-task.is-todo { --k: #1D4ED8; }
.mt-task.is-warn { --k: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.mt-task.is-late { --k: #DC2626; background: #FEF2F2; border-color: #FECACA; }
.mt-task.is-blocked { --k: #94A3B8; opacity: .75; }
.mt-task.is-wait { --k: #7C3AED; }
.mt-ic, .mt-tick { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--k); }
.mt-task.is-done .mt-ic, .mt-task.is-done .mt-tick { background: #10B981; }
.mt-tick { color: var(--k); background: #fff; border: 1.5px dashed var(--k); }
.mt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mt-txt b { font-size: 12px; font-weight: 800; color: #0F2942; line-height: 1.25; }
.mt-txt small { font-size: 10.5px; font-weight: 500; color: #64748B; line-height: 1.3; }
.mt-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mt-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; color: var(--k); background: color-mix(in srgb, var(--k) 12%, #fff); }
.mt-go { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 800; color: #1D4ED8; white-space: nowrap; }
.mt-go:hover { text-decoration: underline; }
.mt-foot { padding: 7px 14px; font-size: 10px; color: #94A3B8; border-top: 1px solid #EEF2F7; }

/* Top bar v3: minimal search pill that widens when used */
#admin-topbar .atb-search { max-width: 340px; transition: max-width .35s cubic-bezier(.2, .8, .2, 1); }
#admin-topbar .atb-search:focus-within { max-width: 520px; }
#admin-topbar .atb-s-ic { left: 12px; width: auto; height: auto; border-radius: 0; color: #94A3B8; background: none; transition: color .2s, transform .3s; }
#admin-topbar .atb-search:focus-within .atb-s-ic { color: #0F2942; transform: translateY(-50%) scale(1.1); }
#admin-topbar .atb-search input { height: 36px; border-radius: 999px; padding: 0 64px 0 36px; font-size: 12.5px; font-weight: 600; background: rgba(15, 41, 66, .05); border: 1px solid transparent; box-shadow: none; transition: background .2s, border-color .2s, box-shadow .2s; }
#admin-topbar .atb-search input:hover { background: rgba(15, 41, 66, .08); }
#admin-topbar .atb-search input:focus { background: #fff; border-color: #E2E8F0; box-shadow: 0 0 0 3px rgba(244, 169, 21, .18), 0 10px 24px -14px rgba(15, 41, 66, .4); }
#admin-topbar .atb-search input::placeholder { color: #94A3B8; font-weight: 600; transition: opacity .18s; }
#admin-topbar .atb-search input.is-swap::placeholder { opacity: 0; }
#admin-topbar .atb-kbd { right: 12px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #94A3B8; opacity: .8; transition: opacity .2s; }
#admin-topbar .atb-search:focus-within .atb-kbd { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #admin-topbar .atb-search { transition: none; } }

/* ===== Smooth & fast: GPU-friendly glass and motion ===== */
body.aurora-active #view-port .bg-white:not(.fixed, .absolute, .sticky, .fixed *, .absolute *, .sticky *) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* momentum scrolling on older iPhones (pull-to-refresh on phones is left as it was) */
#view-port { -webkit-overflow-scrolling: touch; }
/* Apple-like easing for hover and state transitions that do not pick their own curve */
body :is(.transition, .transition-all, .transition-colors, .transition-opacity, .transition-transform, .transition-shadow):not([class*="ease-"]) {
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .fade-in { animation-duration: .01s; }
    #admin-topbar .atb-dot::after { animation: none; }
}

/* popups open with a soft rise, like the bell panel (transform + opacity only) */
.rc-overlay, .tx-overlay { animation: s360Fade .2s ease-out; }
.rc-overlay.is-opening .rc-card, .tx-overlay.is-opening .tx-card { animation: s360Rise .28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes s360Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s360Rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rc-overlay, .tx-overlay, .rc-card, .tx-card { animation: none; } }