/* ============================================
   Wacana Playstation - Premium Theme System
   Posthog Dark + Yellow Playful Edition
   ============================================ */

/* ===== LIGHT THEME (Posthog Light - Warm Dark Surface) ===== */
:root {
    --bg-main: #f5f5f4;
    --bg-card: #ffffff;
    --bg-sidebar: #2a2118;
    --bg-header: rgba(255, 255, 255, 0.9);
    --text-primary: #1d1f27;
    --text-secondary: #6b7280;
    --border-color: #e5e5e5;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

    /* Accent - Yellow */
    --accent-primary: #f9bd2b;
    --accent-primary-soft: rgba(249, 189, 43, 0.1);
    --accent-primary-hover: rgba(249, 189, 43, 0.18);

    /* Status Colors */
    --color-available: #10b981;
    --color-available-bg: rgba(16, 185, 129, 0.08);
    --color-available-text: #047857;

    --color-playing: #f9bd2b;
    --color-playing-bg: rgba(249, 189, 43, 0.1);
    --color-playing-text: #b45309;

    --color-paused: #f97316;
    --color-paused-bg: rgba(249, 115, 22, 0.08);
    --color-paused-text: #c2410c;

    /* Sidebar Nav */
    --nav-active-bg: rgba(249, 189, 43, 0.15);
    --nav-active-border: #f9bd2b;
    --sidebar-text: #9ca3af;

    /* Bottom Nav (Mobile) */
    --bottom-nav-bg: rgba(255, 255, 255, 0.95);
    --bottom-nav-border: #e5e5e5;
    --bottom-nav-icon: #9ca3af;
    --bottom-nav-icon-active: #f9bd2b;

    /* Quick Action Buttons */
    --btn-blue-bg: rgba(249, 189, 43, 0.08);
    --btn-blue-hover: rgba(249, 189, 43, 0.15);
    --btn-blue-text: #b45309;
    --btn-green-bg: rgba(16, 185, 129, 0.08);
    --btn-green-hover: rgba(16, 185, 129, 0.14);
    --btn-green-text: #059669;
    --btn-purple-bg: rgba(99, 102, 241, 0.08);
    --btn-purple-hover: rgba(99, 102, 241, 0.14);
    --btn-purple-text: #4f46e5;
    --btn-orange-bg: rgba(249, 115, 22, 0.08);
    --btn-orange-hover: rgba(249, 115, 22, 0.14);
    --btn-orange-text: #ea580c;
    --btn-red-bg: rgba(239, 68, 68, 0.08);
    --btn-red-hover: rgba(239, 68, 68, 0.14);
    --btn-red-text: #dc2626;

    /* Badge / Chip */
    --badge-blue-bg: rgba(249, 189, 43, 0.12);
    --badge-blue-text: #b45309;
    --badge-green-bg: rgba(16, 185, 129, 0.1);
    --badge-green-text: #059669;
    --badge-red-bg: rgba(239, 68, 68, 0.1);
    --badge-red-text: #dc2626;
    --badge-yellow-bg: rgba(249, 189, 43, 0.12);
    --badge-yellow-text: #b45309;
    --badge-purple-bg: rgba(99, 102, 241, 0.1);
    --badge-purple-text: #4f46e5;

    /* Input */
    --input-bg: #ffffff;
    --input-border: #e5e5e5;
    --input-focus: #f9bd2b;

    /* Table */
    --table-header-bg: #fafafa;
    --table-row-hover: rgba(249, 189, 43, 0.04);
    --table-stripe: rgba(0, 0, 0, 0.015);

    /* Alert Banners */
    --alert-warning-bg: rgba(249, 189, 43, 0.06);
    --alert-warning-border: rgba(249, 189, 43, 0.3);
    --alert-warning-text: #92400e;
    --alert-danger-bg: rgba(239, 68, 68, 0.06);
    --alert-danger-border: rgba(239, 68, 68, 0.3);
    --alert-danger-text: #991b1b;

    /* Neon glow (disabled in light) */
    --neon-glow-primary: none;
    --neon-glow-success: none;
    --neon-glow-warning: none;

    /* Card border accent */
    --card-border-blue: rgba(249, 189, 43, 0.25);
    --card-border-green: rgba(16, 185, 129, 0.2);
    --card-border-purple: rgba(99, 102, 241, 0.2);
    --card-border-red: rgba(239, 68, 68, 0.2);
}

/* ===== DARK THEME (Posthog Dark + Yellow Playful) ===== */
[data-theme="dark"] {
    --bg-main: #1e1a14;
    --bg-card: rgba(38, 32, 24, 0.85);
    --bg-sidebar: rgba(42, 33, 24, 0.95);
    --bg-header: rgba(30, 26, 20, 0.9);
    --text-primary: #f0f0f0;
    --text-secondary: #9ca3af;
    --border-color: rgba(62, 52, 38, 0.6);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Accent - Yellow */
    --accent-primary: #f9bd2b;
    --accent-primary-soft: rgba(249, 189, 43, 0.12);
    --accent-primary-hover: rgba(249, 189, 43, 0.2);

    /* Status Colors (Neon Yellow) */
    --color-available: #10b981;
    --color-available-bg: rgba(16, 185, 129, 0.12);
    --color-available-text: #6ee7b7;

    --color-playing: #f9bd2b;
    --color-playing-bg: rgba(249, 189, 43, 0.12);
    --color-playing-text: #fcd34d;

    --color-paused: #f97316;
    --color-paused-bg: rgba(249, 115, 22, 0.12);
    --color-paused-text: #fdba74;

    /* Sidebar Nav */
    --nav-active-bg: rgba(249, 189, 43, 0.15);
    --nav-active-border: #f9bd2b;
    --sidebar-text: #9ca3af;

    /* Bottom Nav */
    --bottom-nav-bg: rgba(29, 31, 39, 0.95);
    --bottom-nav-border: rgba(61, 65, 80, 0.5);
    --bottom-nav-icon: #6b7280;
    --bottom-nav-icon-active: #f9bd2b;

    /* Quick Action Buttons */
    --btn-blue-bg: rgba(249, 189, 43, 0.1);
    --btn-blue-hover: rgba(249, 189, 43, 0.2);
    --btn-blue-text: #fcd34d;
    --btn-green-bg: rgba(16, 185, 129, 0.1);
    --btn-green-hover: rgba(16, 185, 129, 0.18);
    --btn-green-text: #6ee7b7;
    --btn-purple-bg: rgba(99, 102, 241, 0.1);
    --btn-purple-hover: rgba(99, 102, 241, 0.18);
    --btn-purple-text: #a5b4fc;
    --btn-orange-bg: rgba(249, 115, 22, 0.1);
    --btn-orange-hover: rgba(249, 115, 22, 0.18);
    --btn-orange-text: #fdba74;
    --btn-red-bg: rgba(239, 68, 68, 0.1);
    --btn-red-hover: rgba(239, 68, 68, 0.18);
    --btn-red-text: #fca5a5;

    /* Badge / Chip */
    --badge-blue-bg: rgba(249, 189, 43, 0.15);
    --badge-blue-text: #fcd34d;
    --badge-green-bg: rgba(16, 185, 129, 0.12);
    --badge-green-text: #6ee7b7;
    --badge-red-bg: rgba(239, 68, 68, 0.12);
    --badge-red-text: #fca5a5;
    --badge-yellow-bg: rgba(249, 189, 43, 0.15);
    --badge-yellow-text: #fcd34d;
    --badge-purple-bg: rgba(99, 102, 241, 0.12);
    --badge-purple-text: #a5b4fc;

    /* Input */
    --input-bg: rgba(29, 31, 39, 0.6);
    --input-border: rgba(61, 65, 80, 0.6);
    --input-focus: #f9bd2b;

    /* Table */
    --table-header-bg: rgba(29, 31, 39, 0.5);
    --table-row-hover: rgba(249, 189, 43, 0.04);
    --table-stripe: rgba(255, 255, 255, 0.015);

    /* Alert Banners */
    --alert-warning-bg: rgba(249, 189, 43, 0.06);
    --alert-warning-border: rgba(249, 189, 43, 0.2);
    --alert-warning-text: #fcd34d;
    --alert-danger-bg: rgba(239, 68, 68, 0.06);
    --alert-danger-border: rgba(239, 68, 68, 0.2);
    --alert-danger-text: #fca5a5;

    /* Neon glow effects - Yellow */
    --neon-glow-primary: 0 0 20px rgba(249, 189, 43, 0.15), 0 0 40px rgba(249, 189, 43, 0.05);
    --neon-glow-success: 0 0 20px rgba(16, 185, 129, 0.15), 0 0 40px rgba(16, 185, 129, 0.05);
    --neon-glow-warning: 0 0 20px rgba(249, 115, 22, 0.15), 0 0 40px rgba(249, 115, 22, 0.05);

    /* Card border accent */
    --card-border-blue: rgba(249, 189, 43, 0.2);
    --card-border-green: rgba(16, 185, 129, 0.15);
    --card-border-purple: rgba(99, 102, 241, 0.15);
    --card-border-red: rgba(239, 68, 68, 0.15);
}

/* ===== BASE STYLES ===== */
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: background-color 0.4s ease, color 0.3s ease;
}

/* ===== CARD ===== */
.theme-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-card:hover {
    box-shadow: var(--shadow-md);
}

/* ===== HEADER ===== */
.theme-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ===== SIDEBAR ===== */
.theme-sidebar {
    background-color: var(--bg-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ===== TEXT ===== */
.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-border { border-color: var(--border-color); }

/* ===== INPUTS (Global override for dark mode) ===== */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 2px rgba(249, 189, 43, 0.2) !important;
}

/* ===== TABLES (Dark mode fix) ===== */
[data-theme="dark"] thead {
    background-color: var(--table-header-bg) !important;
}

[data-theme="dark"] tbody tr:hover {
    background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: var(--table-stripe);
}

/* ===== QUICK ACTION BUTTONS (Theme-aware) ===== */
[data-theme="dark"] .bg-blue-500\/20,
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-blue-50 {
    background-color: var(--btn-blue-bg) !important;
}
[data-theme="dark"] .hover\:bg-blue-100:hover,
[data-theme="dark"] .hover\:bg-blue-200:hover {
    background-color: var(--btn-blue-hover) !important;
}
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-600 {
    color: var(--btn-blue-text) !important;
}

[data-theme="dark"] .bg-green-500\/20,
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-green-50 {
    background-color: var(--btn-green-bg) !important;
}
[data-theme="dark"] .hover\:bg-green-100:hover,
[data-theme="dark"] .hover\:bg-green-200:hover {
    background-color: var(--btn-green-hover) !important;
}
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-600 {
    color: var(--btn-green-text) !important;
}

[data-theme="dark"] .bg-purple-500\/20,
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-purple-50 {
    background-color: var(--btn-purple-bg) !important;
}
[data-theme="dark"] .hover\:bg-purple-100:hover,
[data-theme="dark"] .hover\:bg-purple-200:hover {
    background-color: var(--btn-purple-hover) !important;
}
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-600 {
    color: var(--btn-purple-text) !important;
}

[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-amber-500\/20 {
    background-color: var(--btn-orange-bg) !important;
}
[data-theme="dark"] .hover\:bg-orange-100:hover,
[data-theme="dark"] .hover\:bg-orange-200:hover,
[data-theme="dark"] .hover\:bg-amber-100:hover {
    background-color: var(--btn-orange-hover) !important;
}
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 {
    color: var(--btn-orange-text) !important;
}

[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-500\/20 {
    background-color: var(--btn-red-bg) !important;
}
[data-theme="dark"] .hover\:bg-red-100:hover,
[data-theme="dark"] .hover\:bg-red-200:hover {
    background-color: var(--btn-red-hover) !important;
}
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-600 {
    color: var(--btn-red-text) !important;
}

[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-yellow-50 {
    background-color: var(--badge-yellow-bg) !important;
}
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-600 {
    color: var(--badge-yellow-text) !important;
}

/* ===== GRADIENT BANNERS (Dark mode fix) ===== */
[data-theme="dark"] .from-amber-50,
[data-theme="dark"] .from-amber-500\/10,
[data-theme="dark"] .to-orange-50,
[data-theme="dark"] .to-orange-500\/10 {
    --tw-gradient-from: rgba(249, 189, 43, 0.06) !important;
    --tw-gradient-to: rgba(249, 115, 22, 0.03) !important;
}

[data-theme="dark"] .from-purple-50,
[data-theme="dark"] .to-indigo-50 {
    --tw-gradient-from: rgba(99, 102, 241, 0.06) !important;
    --tw-gradient-to: rgba(99, 102, 241, 0.03) !important;
}

[data-theme="dark"] .from-red-500\/10,
[data-theme="dark"] .to-orange-500\/10 {
    --tw-gradient-from: rgba(239, 68, 68, 0.06) !important;
    --tw-gradient-to: rgba(249, 115, 22, 0.03) !important;
}

/* Alert banner borders in dark */
[data-theme="dark"] .border-amber-300,
[data-theme="dark"] .border-amber-200 {
    border-color: var(--alert-warning-border) !important;
}
[data-theme="dark"] .border-red-300,
[data-theme="dark"] .border-red-200 {
    border-color: var(--alert-danger-border) !important;
}
[data-theme="dark"] .border-purple-200 {
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Alert text in dark */
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700 {
    color: #f9bd2b !important;
}
[data-theme="dark"] .text-red-900,
[data-theme="dark"] .text-red-700 {
    color: #fca5a5 !important;
}
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-600 {
    color: #a5b4fc !important;
}

/* Alert icon backgrounds in dark */
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-red-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ===== CARD BORDER COLORS (Dark mode) ===== */
[data-theme="dark"] .border-blue-200 {
    border-color: var(--card-border-blue) !important;
}
[data-theme="dark"] .border-green-200 {
    border-color: var(--card-border-green) !important;
}
[data-theme="dark"] .border-purple-200 {
    border-color: var(--card-border-purple) !important;
}

/* ===== EMERALD/GREEN STAT TEXT (Dark) ===== */
[data-theme="dark"] .text-emerald-700 {
    color: #6ee7b7 !important;
}
[data-theme="dark"] .text-green-700 {
    color: var(--btn-green-text) !important;
}

/* ===== SCROLLBAR (Theme-aware) ===== */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(29, 31, 39, 0.5);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.2);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 189, 43, 0.4);
}

/* ===== AMBIENT BACKGROUND (Dark only) ===== */
.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    display: none;
}
[data-theme="dark"] .ambient-bg {
    display: block;
}
.ambient-pulse {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.1;
    animation: pulse-slow 10s infinite alternate;
}
@keyframes pulse-slow {
    0% { transform: scale(1); opacity: 0.06; }
    100% { transform: scale(1.4); opacity: 0.12; }
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bottom-nav-bg);
    border-top: 1px solid var(--bottom-nav-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.75rem 0;
    color: var(--bottom-nav-icon);
    transition: all 0.2s ease;
}

.mobile-bottom-nav-item.active {
    color: var(--bottom-nav-icon-active);
}

.mobile-bottom-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.mobile-bottom-nav-item span {
    font-size: 0.65rem;
    font-weight: 600;
}

@media (max-width: 1023px) {
    .mobile-bottom-nav {
        display: flex;
    }

    main {
        padding-bottom: 5rem !important;
    }

    #mobile-cart-fab {
        bottom: 5rem !important;
    }

    #ps-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    @media (min-width: 640px) {
        #ps-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

/* ===== CART COUNT BADGE (Dark fix) ===== */
[data-theme="dark"] .bg-blue-100.text-blue-700 {
    background-color: var(--badge-blue-bg) !important;
    color: var(--badge-blue-text) !important;
}

/* ===== FILTER BUTTONS (Active state in dark) ===== */
[data-theme="dark"] .filter-btn:not(.bg-blue-600) {
    background-color: rgba(29, 31, 39, 0.6) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .filter-btn:not(.bg-blue-600):hover {
    background-color: rgba(249, 189, 43, 0.1) !important;
    border-color: rgba(249, 189, 43, 0.3) !important;
}

/* ===== REVENUE SUMMARY (Dark fix) ===== */
[data-theme="dark"] .bg-green-500\/20 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
[data-theme="dark"] .bg-green-500\/20 .text-green-700 {
    color: #6ee7b7 !important;
}

/* ===== SELECT DROPDOWN (Dark) ===== */
[data-theme="dark"] select option {
    background-color: #2c2f3a;
    color: #f0f0f0;
}

/* ===== BULK ACTION BAR (Dark) ===== */
[data-theme="dark"] .bg-blue-500\/20 {
    background-color: rgba(249, 189, 43, 0.1) !important;
}
[data-theme="dark"] .border-blue-200 {
    border-color: rgba(249, 189, 43, 0.2) !important;
}
[data-theme="dark"] .text-blue-700 {
    color: #fcd34d !important;
}

/* ===== MODAL BACKDROP ENHANCEMENT ===== */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* ===== SIDEBAR TEXT (Always light - sidebar is always dark) ===== */
.theme-sidebar .theme-text-secondary,
#admin-sidebar .theme-text-secondary,
#sidebar .theme-text-secondary {
    color: #9ca3af !important;
}

.theme-sidebar .admin-nav-item,
#admin-sidebar .admin-nav-item,
#admin-sidebar a,
#sidebar .nav-item,
#sidebar a {
    color: #9ca3af !important;
}

.theme-sidebar .admin-nav-item.active,
#admin-sidebar .admin-nav-item.active,
#sidebar .nav-item.active {
    color: #f9bd2b !important;
}

/* ===== DARK MODE: ALL HARDCODED TEXT COLORS ===== */
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-700 {
    color: #f0f0f0 !important;
}
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
    color: #9ca3af !important;
}
[data-theme="dark"] .text-gray-400 {
    color: #6b7280 !important;
}

/* ===== DARK MODE: Gray backgrounds ===== */
[data-theme="dark"] .bg-gray-50 {
    background-color: rgba(29, 31, 39, 0.5) !important;
}
[data-theme="dark"] .bg-gray-100 {
    background-color: rgba(44, 47, 58, 0.5) !important;
}
[data-theme="dark"] .bg-gray-200 {
    background-color: rgba(61, 65, 80, 0.5) !important;
}
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: rgba(61, 65, 80, 0.6) !important;
}
[data-theme="dark"] .hover\:bg-blue-50:hover {
    background-color: rgba(249, 189, 43, 0.08) !important;
}

/* Gray borders in dark */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: rgba(61, 65, 80, 0.5) !important;
}

/* Dropdown menus in dark */
[data-theme="dark"] .hover\:bg-gray-100 {
    background-color: transparent !important;
}
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: rgba(249, 189, 43, 0.08) !important;
}

/* Slate text */
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-700 {
    color: #f0f0f0 !important;
}

/* Fix main content text */
[data-theme="dark"] main .theme-text-secondary {
    color: #9ca3af !important;
}
[data-theme="dark"] main .theme-text-primary {
    color: #f0f0f0 !important;
}

/* ===== LIGHT MODE POLISH ===== */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f5f5f4 0%, #fafaf9 50%, #f5f5f4 100%);
}

/* Light mode card subtle hover glow - yellow */
[data-theme="light"] .theme-card:hover {
    border-color: rgba(249, 189, 43, 0.25);
}

/* ===== DARK MODE CARD GLOW ON HOVER - Yellow ===== */
[data-theme="dark"] .theme-card:hover {
    border-color: rgba(249, 189, 43, 0.2);
    box-shadow: var(--shadow-md), 0 0 20px rgba(249, 189, 43, 0.05);
}

/* ===== DARK MODE: Specific color overrides ===== */
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700 {
    color: #a5b4fc !important;
}
[data-theme="dark"] .text-teal-600,
[data-theme="dark"] .text-teal-700 {
    color: #5eead4 !important;
}
[data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700 {
    color: #67e8f9 !important;
}
[data-theme="dark"] .text-pink-600,
[data-theme="dark"] .text-pink-700 {
    color: #f9a8d4 !important;
}

/* ===== DARK MODE: Fix stat values ===== */
[data-theme="dark"] .text-blue-600 {
    color: #fcd34d !important;
}
[data-theme="dark"] .text-green-600 {
    color: #6ee7b7 !important;
}
[data-theme="dark"] .text-purple-600 {
    color: #a5b4fc !important;
}
[data-theme="dark"] .text-red-600 {
    color: #fca5a5 !important;
}
[data-theme="dark"] .text-yellow-600 {
    color: #fcd34d !important;
}
[data-theme="dark"] .text-orange-600 {
    color: #fdba74 !important;
}

/* ===== DARK MODE: Fix banner/alert text ===== */
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 {
    color: #f9bd2b !important;
}
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 {
    color: #fca5a5 !important;
}
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-900 {
    color: #a5b4fc !important;
}
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 {
    color: #6ee7b7 !important;
}
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 {
    color: #fcd34d !important;
}

/* ===== DARK MODE: Fix opacity text ===== */
[data-theme="dark"] .text-white\/70 {
    color: rgba(240, 240, 240, 0.7) !important;
}

/* ===== DARK MODE: Fix placeholder text in cards ===== */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: inherit;
}

/* Ensure main content inherits properly */
[data-theme="dark"] main {
    color: #f0f0f0;
}
[data-theme="light"] main {
    color: #1d1f27;
}

/* ===== FIX: Admin Mode badge in header ===== */
[data-theme="dark"] .bg-purple-600\/20 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}
[data-theme="dark"] .text-purple-300 {
    color: #a5b4fc !important;
}

/* Fix theme switcher dropdown text & background */
[data-theme="light"] .group-hover\:visible,
[data-theme="light"] .group-hover\:opacity-100 {
    background-color: #ffffff !important;
    border-color: #e5e5e5 !important;
}
[data-theme="light"] .group-hover\:visible button,
[data-theme="light"] .group-hover\:opacity-100 button {
    color: #1d1f27 !important;
}
[data-theme="light"] .group-hover\:visible button:hover,
[data-theme="light"] .group-hover\:opacity-100 button:hover {
    background-color: #f5f5f4 !important;
}
[data-theme="dark"] .group-hover\:visible button,
[data-theme="dark"] .group-hover\:opacity-100 button {
    color: #f0f0f0 !important;
}

/* ===== TRANSITION SMOOTHNESS ===== */
* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0s;
}

body, .theme-card, .theme-header, .theme-sidebar,
.theme-text-primary, .theme-text-secondary, .theme-border,
.mobile-bottom-nav, .mobile-bottom-nav-item,
input, select, textarea {
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* ===== POSTHOG YELLOW ACCENT OVERRIDES (Both themes) ===== */
/* Primary blue → yellow (buttons, badges, active states) */
.bg-blue-600 {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}
.bg-blue-600:hover, .hover\:bg-blue-700:hover {
    background-color: #e5a91f !important;
}
.bg-blue-500 {
    background-color: #f9bd2b !important;
}
.text-blue-600 {
    color: #f9bd2b !important;
}
.text-blue-700 {
    color: #e5a91f !important;
}
.text-blue-500 {
    color: #f9bd2b !important;
}
.bg-blue-50, .bg-blue-100 {
    background-color: rgba(249, 189, 43, 0.1) !important;
}
.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover {
    background-color: rgba(249, 189, 43, 0.18) !important;
}
.border-blue-500, .border-blue-600 {
    border-color: #f9bd2b !important;
}
.ring-blue-500, .focus\:ring-blue-500:focus {
    --tw-ring-color: #f9bd2b !important;
}
.focus\:border-blue-500:focus {
    border-color: #f9bd2b !important;
}

/* Gradient overrides */
.from-blue-500 {
    --tw-gradient-from: #f9bd2b !important;
}
.to-blue-600, .to-blue-700 {
    --tw-gradient-to: #e5a91f !important;
}
.from-blue-600 {
    --tw-gradient-from: #f9bd2b !important;
}

/* Fix: blue text on blue bg (buttons) - ensure contrast */
.bg-blue-600 .text-white, .bg-blue-600 i, .bg-blue-600 span {
    color: #1d1f27 !important;
}

/* Filter buttons active state */
.filter-btn.bg-blue-600 {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}

/* Category tabs active */
.cat-tab.bg-blue-600, .start-cat-tab.bg-blue-600, .additem-cat-tab.bg-blue-600 {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}

/* Badge blue */
.bg-blue-600.text-white {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}

/* Sidebar active nav override */
.nav-item.active {
    background: rgba(249, 189, 43, 0.15) !important;
    border-right-color: #f9bd2b !important;
}

/* Sidebar background override (Tailwind bg-slate-900 hardcoded in HTML) */
#sidebar.bg-slate-900,
#admin-sidebar.bg-slate-900 {
    background-color: var(--bg-sidebar) !important;
}

/* Admin sidebar nav */
.admin-nav-item.active {
    background: rgba(249, 189, 43, 0.15) !important;
    border-color: #f9bd2b !important;
}

/* Sidebar logo icon */
#sidebar .bg-blue-600, #admin-sidebar .bg-blue-600 {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}

/* ===== DARK MODE: Extra fixes for visibility ===== */
[data-theme="dark"] .dark\:bg-slate-800 {
    background-color: var(--bg-card) !important;
}
[data-theme="dark"] .dark\:hover\:bg-slate-700:hover {
    background-color: rgba(50, 42, 30, 0.9) !important;
}
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}
[data-theme="dark"] .bg-white\/80, [data-theme="dark"] .bg-white\/90 {
    background-color: rgba(44, 47, 58, 0.85) !important;
}
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: #f0f0f0 !important;
}
[data-theme="dark"] .text-gray-700 {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .text-gray-600 {
    color: #9ca3af !important;
}
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: rgba(61, 65, 80, 0.5) !important;
}
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-50 {
    background-color: rgba(29, 31, 39, 0.6) !important;
}
[data-theme="dark"] .bg-gray-200 {
    background-color: rgba(61, 65, 80, 0.5) !important;
}
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode: fix buttons that become invisible */
[data-theme="dark"] .bg-gray-800 {
    background-color: #3d4150 !important;
}
[data-theme="dark"] .hover\:bg-gray-700:hover {
    background-color: #4d5060 !important;
}
[data-theme="dark"] .bg-green-600 {
    background-color: #10b981 !important;
}
[data-theme="dark"] .bg-purple-600 {
    background-color: #6366f1 !important;
}
[data-theme="dark"] .bg-red-600 {
    background-color: #ef4444 !important;
}
[data-theme="dark"] .bg-orange-500 {
    background-color: #f97316 !important;
}
[data-theme="dark"] .bg-indigo-600 {
    background-color: #6366f1 !important;
}

/* Dark mode: modal backgrounds */
[data-theme="dark"] .bg-white.rounded-2xl,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-3xl {
    background-color: #2c2f3a !important;
    border: 1px solid rgba(61, 65, 80, 0.5);
}

/* Dark mode: stat card gradient */
[data-theme="dark"] .bg-gradient-to-br.from-blue-500.to-blue-600 {
    background: linear-gradient(to bottom right, #f9bd2b, #e5a91f) !important;
}
[data-theme="dark"] .bg-gradient-to-br.from-blue-500.to-blue-600 * {
    color: #1d1f27 !important;
}

/* ===== POSTHOG: Purple buttons → Yellow (except QRIS-specific) ===== */
/* Panel Admin button & general purple buttons */
.bg-purple-600:not([data-qris]) {
    background-color: #f9bd2b !important;
    color: #1d1f27 !important;
}
.bg-purple-600:not([data-qris]):hover, .hover\:bg-purple-700:hover {
    background-color: #e5a91f !important;
}
.text-purple-600, .text-purple-700 {
    color: #f9bd2b !important;
}
.bg-purple-100, .bg-purple-50 {
    background-color: rgba(249, 189, 43, 0.1) !important;
}
.hover\:bg-purple-100:hover {
    background-color: rgba(249, 189, 43, 0.18) !important;
}

/* Bottom nav active → yellow */
.mobile-bottom-nav-item.active {
    color: #f9bd2b !important;
}
.mobile-bottom-nav-item.active i {
    color: #f9bd2b !important;
}

/* Admin nav active */
.admin-nav-item.active, .admin-nav-item.active i, .admin-nav-item.active span {
    color: #f9bd2b !important;
}

/* Fix green stat card — keep green but make it match theme */
[data-theme="dark"] .bg-gradient-to-br.from-green-500,
[data-theme="dark"] .bg-gradient-to-br.from-emerald-500 {
    background: linear-gradient(to bottom right, #10b981, #059669) !important;
}

/* Fix: ensure white text on colored buttons stays white */
.bg-green-600, .bg-green-600:hover { color: #fff !important; }
.bg-red-600, .bg-red-600:hover { color: #fff !important; }
.bg-purple-600[data-qris], .bg-indigo-600 { color: #fff !important; }

/* QRIS buttons keep purple identity */
button[onclick*="qris"] .bg-purple-600,
button[onclick*="QRIS"] {
    background-color: #6366f1 !important;
    color: #fff !important;
}

/* Light mode: ensure yellow accent is visible on light bg */
[data-theme="light"] .text-blue-600,
[data-theme="light"] .text-blue-700 {
    color: #92400e !important;
}
[data-theme="light"] .text-purple-600,
[data-theme="light"] .text-purple-700 {
    color: #92400e !important;
}