:root {
            --brand: #0050a8; /* Moka Blue */
            --brand-2: #0061c9; /* Lighter Moka Blue */
        }

        html,
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #f1f5f9; /* Slate 100 agar lebih kuat dan kontras dengan kartu */
            color: #0f172a;
        }

        .glass {
            background: #ffffff; /* Header putih solid */
            border-bottom: 1px solid rgba(0, 80, 168, 0.15); /* Border senada dengan sidebar */
            border-right: 1px solid rgba(0, 80, 168, 0.15);
        }
        
        /* SIDEBAR GELAP */
        #sidebar {
            background: #0050a8; /* Moka Blue sedikit lebih gelap */
            border-right: none;
            color: #ffffff;
        }

        #sidebar h1, #sidebar p, #sidebar span, #sidebar button {
            color: #ffffff !important;
        }
        
        #sidebar svg:not([fill="currentColor"]) {
            stroke: #ffffff !important;
        }

        #sidebar .text-slate-500,
        #sidebar .text-slate-400 {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        #sidebar .border-slate-200\/70,
        #sidebar .border-slate-200\/60 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .brand-grad {
            background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
        }

        .brand-grad-soft {
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        }

        .neon-glow:hover {
            box-shadow: 0 0 0 3px rgba(14, 165, 233, .2), 0 10px 30px -10px rgba(14, 165, 233, .4);
        }

        .btn-press {
            transition: all .25s ease
        }

        .btn-press:hover {
            transform: translateY(-1px) scale(1.02)
        }

        .btn-press:active {
            transform: scale(.97)
        }

        .scroll-thin::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }

        .scroll-thin::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px
        }

        .scroll-thin::-webkit-scrollbar-track {
            background: transparent
        }

        .page {
            display: none;
            animation: fadeIn .35s ease
        }

        .page.active {
            display: block
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(6px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .pulse-dot {
            animation: pulse 1.6s infinite
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .4
            }
        }

        .nav-item {
            transition: all .2s ease
        }

        .nav-item:hover {
            background: rgba(14, 165, 233, .08);
            color: #0ea5e9;
        }

        .nav-item.active {
            background: linear-gradient(90deg, rgba(14, 165, 233, .15), rgba(14, 165, 233, .02));
            color: #0ea5e9;
            font-weight: 500;
            text-shadow: none;
            box-shadow: none;
        }

        .nav-item.active .nav-icon {
            color: #0ea5e9;
        }

        /* Sidebar Nav Item Overrides */
        #sidebar .nav-item:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }

        #sidebar .nav-item.active {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
            font-weight: 500 !important;
            text-shadow: none !important;
            box-shadow: none !important;
        }

        #sidebar .nav-item.active .nav-icon {
            color: #38bdf8 !important; /* Sky 400 */
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease
        }

        .submenu.open {
            max-height: 400px
        }

        .tab-active {
            color: #0284c7;
            border-color: #0284c7
        }

        .product-card {
            transition: all .25s ease
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px -12px rgba(14, 165, 233, .35)
        }

        .stat-card {
            transition: all .3s ease;
            box-shadow: 0 4px 24px -6px rgba(0, 80, 168, 0.08); /* Glow dark blue tipis (static) */
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px -8px rgba(0, 80, 168, 0.25); /* Glow lebih kuat saat hover */
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
            border-color: #0ea5e9
        }

        .sync-online {
            background: #dcfce7;
            color: #15803d
        }

        .sync-offline {
            background: #fef3c7;
            color: #b45309
        }

        .sync-syncing {
            background: #dbeafe;
            color: #1d4ed8
        }

        .divider-dot {
            width: 3px;
            height: 3px;
            border-radius: 999px;
            background: #cbd5e1
        }

        .mobile-nav-btn.active {
            color: var(--brand);
        }

        .border-brand { border-color: var(--brand) !important; }
        .text-brand { color: var(--brand) !important; }

/* Fix table word wrap in transfer menu */
#transferTableBody td {
    white-space: nowrap;
}
#transferTableBody td:nth-child(2) {
    white-space: normal;
}

/* Fix thead wrap for transfer menu */
#transferTableBody preceeding-sibling thead th {
    white-space: nowrap;
}