/* ============================================
   MODERN POS UI - Premium Dark Theme
   TOP Brewery Point of Sale System
   ============================================ */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =====================
   CSS VARIABLES / TOKENS
   ===================== */
:root {
    /* Primary Palette */
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.3);

    /* Accent */
    --accent: #06b6d4;
    --accent-light: #22d3ee;
    --accent-glow: rgba(6, 182, 212, 0.3);

    /* Success / Warning / Danger */
    --success: #10b981;
    --success-light: #34d399;
    --success-bg: rgba(16, 185, 129, 0.12);
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.12);

    /* Surfaces */
    --bg-body: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-2: #334155;
    --bg-surface-3: #475569;
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-glass: rgba(30, 41, 59, 0.6);
    --bg-input: #1e293b;
    --bg-hover: rgba(99, 102, 241, 0.08);
    --bg-thead: #1e293b;
    --pos-bg: #0f172a;

    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;

    /* Borders */
    --border-color: rgba(148, 163, 184, 0.12);
    --border-focus: var(--primary);
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px var(--primary-glow);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* RGB for overlays */
    --bg-body-rgb: 15, 23, 42;
    --bg-surface-rgb: 30, 41, 59;
}

/* Air Datepicker Customization */
.air-datepicker {
    --adp-background-color: var(--bg-surface) !important;
    --adp-background-color-hover: var(--bg-hover) !important;
    --adp-background-color-active: var(--bg-surface-2) !important;
    --adp-background-color-in-range: rgba(99, 102, 241, 0.1) !important;
    --adp-background-color-in-range-focused: rgba(99, 102, 241, 0.2) !important;
    --adp-background-color-selected-other-month: var(--primary) !important;
    --adp-background-color-selected-other-month-focused: var(--primary-light) !important;
    --adp-border-color: var(--border-color) !important;
    --adp-border-color-inner: var(--border-color) !important;
    --adp-border-color-inline: var(--border-color) !important;
    --adp-color: var(--text-primary) !important;
    --adp-color-secondary: var(--text-secondary) !important;
    --adp-color-other-month: var(--text-muted) !important;
    --adp-color-other-month-hover: var(--text-secondary) !important;
    --adp-color-disabled: var(--text-muted) !important;
    --adp-color-current-date: var(--primary) !important;
    --adp-day-name-color: var(--text-muted) !important;
    --adp-day-name-color-hover: var(--text-secondary) !important;
    --adp-cell-background-color-hover: var(--bg-hover) !important;
    --adp-cell-background-color-selected: var(--primary) !important;
    --adp-cell-background-color-selected-hover: var(--primary-dark) !important;
    --adp-btn-color: var(--primary-light) !important;
    --adp-btn-color-hover: var(--primary) !important;
    --adp-btn-background-color-hover: var(--bg-hover) !important;
    --adp-nav-color-secondary: var(--text-secondary) !important;
    --adp-nav-arrow-color: var(--text-secondary) !important;
    --adp-time-track-color: var(--bg-surface-3) !important;
    --adp-time-track-color-hover: var(--bg-surface-2) !important;
    --adp-time-thumb-color: var(--primary) !important;
    --adp-pointer-color: var(--bg-surface) !important;
}

.air-datepicker--pointer:after {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Light Theme Overrides */
:root[data-theme="light"] {
    /* Primary / Accent remain mostly same, maybe tweak glow */
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-2: #f1f5f9;
    --bg-surface-3: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-input: #ffffff;
    --bg-hover: rgba(99, 102, 241, 0.1);
    --bg-thead: #f1f5f9;
    --pos-bg: #f8fafc;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    --border-color: rgba(15, 23, 42, 0.12);
    --bg-body-rgb: 248, 250, 252;
    --bg-surface-rgb: 255, 255, 255;
    
    #loading-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: var(--primary);
        box-shadow: 0 0 10px var(--primary-glow);
        width: 0;
        z-index: 10000;
        transition: width 0.4s cubic-bezier(0.1, 0.05, 0.1, 1), opacity 0.4s ease;
        pointer-events: none;
    }
}

:root[data-theme="light"] .dropdown-menu {
    pointer-events: none;
    transition: opacity 0.2s ease !important;
}

:root[data-theme="light"] .dropdown-menu.show {
    pointer-events: auto;
}

:root[data-theme="light"] {
    
    /* DataTables Processing Fix */
    .dataTables_processing {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-lg) !important;
        color: var(--primary) !important;
        border-radius: var(--border-radius) !important;
        padding: 1rem !important;
        font-weight: 600 !important;
        backdrop-filter: blur(10px);
    }
    
    /* Modify primary for better contrast on light */
    --primary-light: #6366f1;
    --accent-light: #06b6d4;

    /* Nav bar gradient for light mode */
    --bg-nav: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
}

/* Dark Green Theme Overrides */
:root[data-theme="dark-green"] {
    --bg-body: #062c1a;
    --bg-surface: #0a3d25;
    --bg-surface-2: #124d31;
    --bg-surface-3: #1b5e3e;
    --bg-card: rgba(10, 61, 37, 0.8);
    --bg-glass: rgba(10, 61, 37, 0.6);
    --bg-input: #0a3d25;
    --bg-hover: rgba(16, 185, 129, 0.1);
    --bg-thead: #0a3d25;
    --pos-bg: #062c1a;

    --primary: #10b981;
    --primary-light: #34d399;
    --primary-dark: #059669;
    --primary-glow: rgba(16, 185, 129, 0.3);

    --text-primary: #f1f5f9;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    --border-color: rgba(16, 185, 129, 0.15);
    --bg-nav: linear-gradient(135deg, #062c1a 0%, #0a3d25 50%, #062c1a 100%);
    --bg-body-rgb: 6, 44, 26;
    --bg-surface-rgb: 10, 61, 37;
}

/* Off-White Theme Overrides */
:root[data-theme="off-white"] {
    --bg-body: #faf9f6;
    --bg-surface: #ffffff;
    --bg-surface-2: #f5f5f5;
    --bg-surface-3: #eeeeee;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-input: #ffffff;
    --bg-hover: rgba(99, 102, 241, 0.08);
    --bg-thead: #f5f5f5;
    --pos-bg: #faf9f6;

    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #737373;
    --text-inverse: #ffffff;

    --border-color: rgba(0, 0, 0, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #faf9f6 50%, #ffffff 100%);
    --bg-body-rgb: 250, 249, 246;
    --bg-surface-rgb: 255, 255, 255;
    
}

:root[data-theme="off-white"] .dropdown-menu {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Dark Orange Theme Overrides */
:root[data-theme="dark-orange"] {
    --bg-body: #1a0f05;
    --bg-surface: #2b1a0a;
    --bg-surface-2: #3d2410;
    --bg-surface-3: #4d2f16;
    --bg-card: rgba(43, 26, 10, 0.8);
    --bg-glass: rgba(43, 26, 10, 0.6);
    --bg-input: #2b1a0a;
    --bg-hover: rgba(249, 115, 22, 0.1);
    --bg-thead: #2b1a0a;
    --pos-bg: #1a0f05;

    --primary: #f97316;
    --primary-light: #fb923c;
    --primary-dark: #ea580c;
    --primary-glow: rgba(249, 115, 22, 0.3);

    --text-primary: #fff7ed;
    --text-secondary: #fed7aa;
    --text-muted: #9a3412;
    
    --border-color: rgba(249, 115, 22, 0.15);
    --bg-nav: linear-gradient(135deg, #1a0f05 0%, #2b1a0a 50%, #1a0f05 100%);
    --bg-body-rgb: 26, 15, 5;
    --bg-surface-rgb: 43, 26, 10;
}

/* Midnight Purple Theme Overrides */
:root[data-theme="midnight-purple"] {
    --bg-body: #0a0514;
    --bg-surface: #160d2b;
    --bg-surface-2: #21143d;
    --bg-surface-3: #2d1b54;
    --bg-card: rgba(22, 13, 43, 0.8);
    --bg-glass: rgba(22, 13, 43, 0.6);
    --bg-input: #160d2b;
    --bg-hover: rgba(168, 85, 247, 0.1);
    --bg-thead: #160d2b;
    --pos-bg: #0a0514;

    --primary: #a855f7;
    --primary-light: #c084fc;
    --primary-dark: #9333ea;
    --primary-glow: rgba(168, 85, 247, 0.3);

    --text-primary: #faf5ff;
    --text-secondary: #e9d5ff;
    --text-muted: #7e22ce;
    
    --border-color: rgba(168, 85, 247, 0.15);
    --bg-nav: linear-gradient(135deg, #0a0514 0%, #160d2b 50%, #0a0514 100%);
    --bg-body-rgb: 10, 5, 20;
    --bg-surface-rgb: 22, 13, 43;
}

/* Royal Gold Theme Overrides */
:root[data-theme="royal-gold"] {
    --bg-body: #141105;
    --bg-surface: #2b240a;
    --bg-surface-2: #3d3314;
    --bg-surface-3: #54461b;
    --bg-card: rgba(43, 36, 10, 0.8);
    --bg-glass: rgba(43, 36, 10, 0.6);
    --bg-input: #2b240a;
    --bg-hover: rgba(234, 179, 8, 0.1);
    --bg-thead: #2b240a;
    --pos-bg: #141105;

    --primary: #eab308;
    --primary-light: #facc15;
    --primary-dark: #ca8a04;
    --primary-glow: rgba(234, 179, 8, 0.3);

    --text-primary: #fefce8;
    --text-secondary: #fef08a;
    --text-muted: #a16207;
    
    --border-color: rgba(234, 179, 8, 0.15);
    --bg-nav: linear-gradient(135deg, #141105 0%, #2b240a 50%, #141105 100%);
    --bg-body-rgb: 20, 17, 5;
    --bg-surface-rgb: 43, 36, 10;
}

/* Light Green Theme */
:root[data-theme="light-green"] {
    --bg-body: #fafcfb;
    --bg-surface: #ffffff;
    --bg-surface-2: #f0fdf4;
    --bg-surface-3: #dcfce7;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-input: #ffffff;
    --bg-hover: rgba(16, 185, 129, 0.08);
    --bg-thead: #f0fdf4;
    --pos-bg: #fafcfb;

    --primary: #10b981;
    --primary-light: #34d399;
    --primary-dark: #059669;
    --primary-glow: rgba(16, 185, 129, 0.2);

    --text-primary: #064e3b;
    --text-secondary: #065f46;
    --text-muted: #10b981;
    
    --border-color: rgba(16, 185, 129, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #ffffff 100%);
    --bg-body-rgb: 250, 252, 251;
    --bg-surface-rgb: 255, 255, 255;
}

/* Light Orange Theme */
:root[data-theme="light-orange"] {
    --bg-body: #fffaf5;
    --bg-surface: #ffffff;
    --bg-surface-2: #fff7ed;
    --bg-surface-3: #ffedd5;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-input: #ffffff;
    --bg-hover: rgba(249, 115, 22, 0.08);
    --bg-thead: #fff7ed;
    --pos-bg: #fffaf5;

    --primary: #f97316;
    --primary-light: #fb923c;
    --primary-dark: #ea580c;
    --primary-glow: rgba(249, 115, 22, 0.2);

    --text-primary: #7c2d12;
    --text-secondary: #9a3412;
    --text-muted: #f97316;
    
    --border-color: rgba(249, 115, 22, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #fff7ed 50%, #ffffff 100%);
    --bg-body-rgb: 255, 250, 245;
    --bg-surface-rgb: 255, 255, 255;
}

/* Light Purple Theme */
:root[data-theme="light-purple"] {
    --bg-body: #faf5ff;
    --bg-surface: #ffffff;
    --bg-surface-2: #f5f3ff;
    --bg-surface-3: #ede9fe;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-input: #ffffff;
    --bg-hover: rgba(168, 85, 247, 0.08);
    --bg-thead: #f5f3ff;
    --pos-bg: #faf5ff;

    --primary: #a855f7;
    --primary-light: #c084fc;
    --primary-dark: #9333ea;
    --primary-glow: rgba(168, 85, 247, 0.2);

    --text-primary: #4c1d95;
    --text-secondary: #5b21b6;
    --text-muted: #a855f7;
    
    --border-color: rgba(168, 85, 247, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #f5f3ff 50%, #ffffff 100%);
    --bg-body-rgb: 250, 245, 255;
    --bg-surface-rgb: 255, 255, 255;
}

/* Light Gold Theme */
:root[data-theme="light-gold"] {
    --bg-body: #fefdf0;
    --bg-surface: #ffffff;
    --bg-surface-2: #fefce8;
    --bg-surface-3: #fef9c3;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-input: #ffffff;
    --bg-hover: rgba(234, 179, 8, 0.08);
    --bg-thead: #fefce8;
    --pos-bg: #fefdf0;

    --primary: #ca8a04;
    --primary-light: #eab308;
    --primary-dark: #a16207;
    --primary-glow: rgba(234, 179, 8, 0.2);

    --text-primary: #422006;
    --text-secondary: #713f12;
    --text-muted: #ca8a04;
    
    --border-color: rgba(234, 179, 8, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #fefce8 50%, #ffffff 100%);
    --bg-body-rgb: 254, 253, 240;
    --bg-surface-rgb: 255, 255, 255;
}

/* Ocean Deep Theme */
:root[data-theme="ocean-deep"] {
    --bg-body: #051622;
    --bg-surface: #0b2435;
    --bg-surface-2: #12334a;
    --bg-surface-3: #1a4361;
    --primary: #06b6d4;
    --primary-light: #22d3ee;
    --primary-dark: #0891b2;
    --primary-glow: rgba(6, 182, 212, 0.3);
    --text-primary: #ecfeff;
    --text-secondary: #a5f3fc;
    --text-muted: #0e7490;
    --border-color: rgba(6, 182, 212, 0.15);
    --bg-nav: linear-gradient(135deg, #051622 0%, #0b2435 50%, #051622 100%);
    --bg-body-rgb: 5, 22, 34;
    --bg-surface-rgb: 11, 36, 53;
}
:root[data-theme="light-ocean"] {
    --bg-body: #f0f9ff;
    --bg-surface: #ffffff;
    --bg-surface-2: #e0f2fe;
    --bg-surface-3: #bae6fd;
    --primary: #0891b2;
    --primary-light: #06b6d4;
    --primary-dark: #0e7490;
    --primary-glow: rgba(8, 145, 178, 0.2);
    --text-primary: #083344;
    --text-secondary: #0e7490;
    --text-muted: #0891b2;
    --border-color: rgba(8, 145, 178, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #ffffff 100%);
    --bg-body-rgb: 240, 249, 255;
    --bg-surface-rgb: 255, 255, 255;
}

/* Blood Red Theme */
:root[data-theme="blood-red"] {
    --bg-body: #110505;
    --bg-surface: #220b0b;
    --bg-surface-2: #331212;
    --bg-surface-3: #441a1a;
    --primary: #ef4444;
    --primary-light: #f87171;
    --primary-dark: #b91c1c;
    --primary-glow: rgba(239, 68, 68, 0.3);
    --text-primary: #fef2f2;
    --text-secondary: #fecaca;
    --text-muted: #991b1b;
    --border-color: rgba(239, 68, 68, 0.15);
    --bg-nav: linear-gradient(135deg, #110505 0%, #220b0b 50%, #110505 100%);
    --bg-body-rgb: 17, 5, 5;
    --bg-surface-rgb: 34, 11, 11;
}
:root[data-theme="light-red"] {
    --bg-body: #fff1f2;
    --bg-surface: #ffffff;
    --bg-surface-2: #ffe4e6;
    --bg-surface-3: #fecdd3;
    --primary: #dc2626;
    --primary-light: #ef4444;
    --primary-dark: #991b1b;
    --primary-glow: rgba(220, 38, 38, 0.2);
    --text-primary: #450606;
    --text-secondary: #991b1b;
    --text-muted: #dc2626;
    --border-color: rgba(220, 38, 38, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #ffe4e6 50%, #ffffff 100%);
    --bg-body-rgb: 255, 241, 242;
    --bg-surface-rgb: 255, 255, 255;
}

/* Cyberpunk Pink */
:root[data-theme="cyber-pink"] {
    --bg-body: #0d0208;
    --bg-surface: #1a0412;
    --bg-surface-2: #2b071e;
    --bg-surface-3: #3d0a2b;
    --primary: #f0abfc;
    --primary-light: #f5d0fe;
    --primary-dark: #e879f9;
    --primary-glow: rgba(240, 171, 252, 0.3);
    --text-primary: #fdf4ff;
    --text-secondary: #f5d0fe;
    --text-muted: #a21caf;
    --border-color: rgba(240, 171, 252, 0.15);
    --bg-nav: linear-gradient(135deg, #0d0208 0%, #1a0412 50%, #0d0208 100%);
    --bg-body-rgb: 13, 2, 8;
    --bg-surface-rgb: 26, 4, 18;
}
:root[data-theme="light-pink"] {
    --bg-body: #fdf2f8;
    --bg-surface: #ffffff;
    --bg-surface-2: #fce7f3;
    --bg-surface-3: #fbcfe8;
    --primary: #db2777;
    --primary-light: #f0abfc;
    --primary-dark: #9d174d;
    --primary-glow: rgba(219, 39, 119, 0.2);
    --text-primary: #500724;
    --text-secondary: #9d174d;
    --text-muted: #db2777;
    --border-color: rgba(219, 39, 119, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #fce7f3 50%, #ffffff 100%);
    --bg-body-rgb: 253, 242, 248;
    --bg-surface-rgb: 255, 255, 255;
}

/* Forest Shadow */
:root[data-theme="forest-shadow"] {
    --bg-body: #0a0f0d;
    --bg-surface: #141e1a;
    --bg-surface-2: #1e2d27;
    --bg-surface-3: #283c34;
    --primary: #2dd4bf;
    --primary-light: #5eead4;
    --primary-dark: #14b8a6;
    --primary-glow: rgba(45, 212, 191, 0.3);
    --text-primary: #f0fdfa;
    --text-secondary: #ccfbf1;
    --text-muted: #0f766e;
    --border-color: rgba(45, 212, 191, 0.15);
    --bg-nav: linear-gradient(135deg, #0a0f0d 0%, #141e1a 50%, #0a0f0d 100%);
    --bg-body-rgb: 10, 15, 13;
    --bg-surface-rgb: 20, 30, 26;
}
:root[data-theme="light-forest"] {
    --bg-body: #f0fdfa;
    --bg-surface: #ffffff;
    --bg-surface-2: #ccfbf1;
    --bg-surface-3: #99f6e4;
    --primary: #0f766e;
    --primary-light: #2dd4bf;
    --primary-dark: #0d9488;
    --primary-glow: rgba(15, 118, 110, 0.2);
    --text-primary: #042f2e;
    --text-secondary: #0d9488;
    --text-muted: #0f766e;
    --border-color: rgba(15, 118, 110, 0.1);
    --bg-nav: linear-gradient(135deg, #ffffff 0%, #ccfbf1 50%, #ffffff 100%);
    --bg-body-rgb: 240, 253, 250;
    --bg-surface-rgb: 255, 255, 255;
}

/* Premium Theme Toggle Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch-input {
    display: none;
}

.theme-switch-label {
    cursor: pointer;
    width: 50px;
    height: 26px;
    background: var(--bg-surface-3);
    display: block;
    border-radius: 100px;
    position: relative;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
    box-sizing: border-box !important;
}

.theme-switch-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box !important;
}

.theme-icon-moon, .theme-icon-sun {
    font-size: 11px;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Initially: Moon on right, Sun on left (revealed when ball moves) */
.theme-icon-moon {
    color: #f1c40f;
    order: 2; /* Push to right */
}

.theme-icon-sun {
    color: #f39c12;
    order: 1; /* Push to left */
    opacity: 0;
    transform: scale(0);
}

.theme-switch-ball {
    background-color: #fff;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
}

/* Light Mode Styles for Toggle */
.theme-switch-input:checked + .theme-switch-label {
    background: #e2e8f0;
    border-color: var(--primary);
}

.theme-switch-input:checked + .theme-switch-label .theme-switch-ball {
    left: 26px;
    background-color: var(--primary);
}

.theme-switch-input:checked + .theme-switch-label .theme-icon-moon {
    opacity: 0;
    transform: scale(0);
}

.theme-switch-input:checked + .theme-switch-label .theme-icon-sun {
    opacity: 1;
    transform: scale(1);
}

.theme-switch-input:checked + .theme-switch-label .theme-icon-moon {
    opacity: 0;
    transform: scale(0);
}

.theme-switch-input:checked + .theme-switch-label .theme-icon-sun {
    opacity: 1;
    transform: scale(1);
}

[data-theme="light"] .theme-switch-label {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Base Nav Gradient for Dark form (already inside :root but missed) */
:root {
    --bg-nav: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

/* =====================
   GLOBAL RESET & BASE
   ===================== */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* =====================
   BOOTSTRAP UTILITY OVERRIDES
   ===================== */
.text-light {
    color: var(--text-secondary) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.bg-dark {
    background-color: var(--bg-surface) !important;
}

.bg-light {
    background-color: var(--bg-surface-2) !important;
}

.bg-gradient {
    background-image: none !important;
}

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

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

.text-success {
    color: var(--primary) !important;
}

.text-danger {
    color: #ef4444 !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-success {
    background-color: var(--primary) !important;
}

.card {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-content {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* =====================
   SCROLLBAR - MODERN
   ===================== */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface) !important;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-surface-3) !important;
    border-radius: 10px;
    border: 2px solid var(--bg-surface);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary) !important;
}

/* =====================
   NAVIGATION BAR
   ===================== */
#topNavBar {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background 0.3s ease;
}

#topNavBar .navbar-brand {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    padding: 8px 16px;
}

#topNavBar .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 10px 16px !important;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
    position: relative;
    margin: 2px 2px;
}

#topNavBar .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover);
}

#topNavBar .nav-link.active,
#topNavBar .dropdown-toggle.active,
#topNavBar .dropdown-item.active,
#topNavBar button.dropdown-toggle.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: var(--shadow-glow) !important;
    border-color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Clock styling */
#clock {
    color: var(--accent-light) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    font-variant-numeric: tabular-nums;
    background: rgba(6, 182, 212, 0.1);
    border-radius: var(--border-radius-sm);
    padding: 8px 14px !important;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* User dropdown */
#topNavBar .dropdown-toggle {
    color: var(--text-primary) !important;
    font-weight: 500;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    transition: all var(--transition-normal);
    background: var(--bg-surface) !important;
}

#topNavBar .dropdown-toggle:hover {
    border-color: var(--primary) !important;
    background: var(--bg-hover) !important;
}

/* Navbar toggler */
.navbar-toggler {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* =====================
   DROPDOWN MENUS
   ===================== */
.dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(20px);
    padding: 6px !important;
    z-index: 2000 !important;
}

/* Smooth fade for dropdowns without movement */
.dropdown-menu.show {
    animation: fadeIn 0.15s ease-out;
}

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

.dropdown-item {
    color: var(--text-primary) !important;
    font-weight: 500;
    padding: 10px 16px !important;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg-hover) !important;
    color: var(--primary-light) !important;
}

.dropdown-item:active,
.dropdown-item.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* =====================
   PAGE CONTAINER
   ===================== */
#page-container {
    background: var(--bg-body);
    padding: var(--spacing-lg) !important;
    transition: opacity 0.2s ease-in-out;
}

.container {
    max-width: 100% !important;
}

/* =====================
   HEADINGS
   ===================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
    font-weight: 700;
    letter-spacing: -0.3px;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

hr {
    border-color: var(--border-color) !important;
    opacity: 0.5;
}

/* =====================
   CARDS - GLASSMORPHISM
   ===================== */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: rgba(99, 102, 241, 0.2) !important;
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--spacing-lg) !important;
}

.card-header .card-title {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.card-body {
    padding: var(--spacing-lg) !important;
}

/* Dashboard stat cards */
.card-deck .card {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-lg) !important;
    transition: all var(--transition-normal);
    cursor: default;
}

.card-deck .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary) !important;
}

.card.text-white.bg-dark {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%) !important;
    border: 1px solid var(--border-color) !important;
}

.card-deck .card .card-body {
    padding: 20px 24px !important;
}

.card-deck .card .fs-5 b,
.card-deck .card .fs-5 {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 600;
}

.card-deck .card .fs-6 {
    color: var(--accent-light) !important;
    font-size: 1.4rem !important;
    font-weight: 800;
}

.card-deck .card .fs-3 {
    font-size: 2rem !important;
}

.card-deck .card .text-primary {
    color: var(--primary-light) !important;
}

.card-deck .card .text-warning {
    color: var(--warning-light) !important;
}

.card-deck .card .text-info {
    color: var(--accent-light) !important;
}

/* =====================
   BUTTONS - MODERN
   ===================== */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    border-radius: var(--border-radius-sm) !important;
    padding: 10px 20px;
    font-size: 0.9rem;
    border: none !important;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px var(--primary-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important;
    box-shadow: 0 4px 20px var(--primary-glow);
    transform: translateY(-1px);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--success-light), var(--success)) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, var(--danger), #dc2626) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-light), var(--danger)) !important;
    transform: translateY(-1px);
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, var(--warning), #d97706) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning-light), var(--warning)) !important;
    transform: translateY(-1px);
}

/* Dark Button */
.btn-dark {
    background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface)) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-dark:hover {
    background: linear-gradient(135deg, var(--bg-surface-3), var(--bg-surface-2)) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
    background: var(--bg-surface-3) !important;
    border-color: var(--text-secondary) !important;
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, var(--accent), #0891b2) !important;
    color: #fff !important;
}

/* Outline Buttons */
.btn-outline-success {
    background: transparent !important;
    color: var(--success) !important;
    border: 1.5px solid var(--success) !important;
}

.btn-outline-success:hover {
    background: var(--success-bg) !important;
    color: var(--success-light) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1.5px solid var(--border-color) !important;
}

.btn-outline-secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
}

/* Button sizes */
.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* =====================
   FORM CONTROLS
   ===================== */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 10px 14px;
    font-size: 0.9rem !important;
    font-weight: 500;
    transition: all var(--transition-normal);
    min-height: 44px;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--bg-surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--bg-surface-2) !important;
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

.form-control-lg {
    padding: 14px 18px;
    font-size: 1.05rem !important;
    min-height: 52px;
}

.form-control-sm {
    padding: 8px 12px;
    font-size: 0.85rem !important;
    min-height: 40px;
}

/* Labels */
label,
.control-label,
.form-label {
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* =====================
   SELECT2 - MODERN THEME
   ===================== */
.select2-container--default .select2-selection--single {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px;
    transition: all var(--transition-normal);
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif !important;
    line-height: 44px !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    top: 0 !important;
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* Select2 Dropdown */
.select2-dropdown {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px;
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif !important;
    margin: 8px;
    width: calc(100% - 16px) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-glow) !important;
    outline: none;
}

.select2-results__option {
    padding: 10px 14px !important;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
    transition: all var(--transition-fast);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bg-hover) !important;
    color: var(--primary-light) !important;
}

.select2-results {
    background-color: var(--bg-surface) !important;
}

.select2-container {
    width: 100% !important;
}

/* =====================
   TABLES - MODERN
   ===================== */
.table {
    color: var(--text-primary) !important;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* GLOBAL STICKY HEADER FIX */
.table thead th {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background-color: var(--bg-thead) !important;
    background-repeat: no-repeat !important;
    background-position: center right 8px !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 12px !important;
    border-bottom: 2px solid var(--primary) !important;
    border-top: none !important;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* GLOBAL SCROLLABLE TABLE CONTAINER */
.table-responsive {
    max-height: 70vh;
    overflow-y: auto !important;
    overflow-x: auto !important;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    position: relative;
    background: var(--bg-surface);
}

.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.table tbody tr {
    transition: all var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--bg-hover) !important;
}

.table tbody td {
    padding: 12px 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(99, 102, 241, 0.03) !important;
    color: var(--text-primary) !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-bg: transparent !important;
    opacity: 1 !important;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-bg: transparent !important;
    opacity: 1 !important;
}

.table-hover > tbody > tr:hover > * {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
}

/* DataTables sorting column fix - prevents opacity fade */
table.dataTable tbody td.sorting_1,
table.dataTable tbody td.sorting_2,
table.dataTable tbody td.sorting_3,
table.dataTable tbody tr.odd td.sorting_1,
table.dataTable tbody tr.even td.sorting_1,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td {
    background: transparent !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

table.dataTable tbody tr.odd {
    background: rgba(99, 102, 241, 0.03) !important;
}

table.dataTable tbody tr.even {
    background: transparent !important;
}

table.dataTable tbody tr:hover td {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.table-bordered {
    border: 1px solid var(--border-color) !important;
}

.table-bordered td,
.table-bordered th {
    border-color: var(--border-color) !important;
}

/* Low stock warning rows */
.bg-danger.bg-opacity-25,
tr.bg-danger.bg-opacity-25 td {
    background: var(--danger-bg) !important;
    border-left: 3px solid var(--danger) !important;
}

.bg-dark.bg-opacity-25 {
    background: var(--bg-surface) !important;
}

/* =====================
   POS / SALES PAGE
   ===================== */
/* POS container dark background */
.w-100.h-100.mx-0.row.row-cols-2.bg-dark {
    background: var(--bg-surface) !important;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Product list heading */
h3.text-light {
    color: var(--text-primary) !important;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Search field in POS */
#search {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    padding: 12px 16px;
    min-height: 50px;
    border-radius: var(--border-radius-sm) !important;
}

#search:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* POS search label */
label[for="search"],
.fw-bolder.text-light {
    color: var(--text-secondary) !important;
}

/* POS product list */
#plist tbody tr {
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color);
}

#plist tbody tr:hover {
    background: var(--bg-hover) !important;
    transform: translateX(2px);
}

#plist tbody tr:active {
    background: rgba(99, 102, 241, 0.15) !important;
}

table.bg-light,
.bg-light {
    background: var(--bg-surface) !important;
}

.bg-light.bg-opacity-50,
.bg-light.bg-opacity-75 {
    background: var(--bg-surface) !important;
}

/* Cart / Items section */
.fs-5.fw-bolder.text-light {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 700;
}

#item-list tbody tr {
    cursor: pointer;
    transition: all var(--transition-fast);
}

#item-list tbody tr:hover {
    background: var(--bg-hover) !important;
}

#item-list tbody tr.selected-item {
    background: rgba(99, 102, 241, 0.15) !important;
    border-left: 3px solid var(--primary) !important;
}

/* Cart quantity input */
#item-list input[type="number"] {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    text-align: center;
    font-weight: 700;
    font-size: 1rem !important;
    min-height: 44px;
}

#item-list input[type="number"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* Totals section */
#subTotal,
#t_discount,
#t_profit,
#total {
    background: var(--bg-surface-2) !important;
    color: var(--accent-light) !important;
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    font-weight: 800;
    font-size: 1.1rem !important;
    font-variant-numeric: tabular-nums;
}

/* Save Transaction button */
#transaction-save-btn {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    padding: 12px 28px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    min-height: 50px;
    border-radius: var(--border-radius-sm) !important;
}

#transaction-save-btn:hover {
    background: linear-gradient(135deg, var(--success-light), var(--success)) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
}

/* Remove item / Trash button */
#remove-item {
    background: linear-gradient(135deg, var(--danger), #dc2626) !important;
    border-radius: var(--border-radius-sm) !important;
    min-width: 48px;
    min-height: 48px;
}

/* =====================
   PAYMENT METHODS
   ===================== */
#payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#payment-methods button,
.btn-mm {
    min-width: 90px;
    min-height: 72px !important;
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    border: 2px solid transparent !important;
    transition: all var(--transition-normal);
}

#payment-methods button i {
    font-size: 1.4rem;
}

#payment-methods button.active,
#payment-methods button:focus {
    border-color: #fff !important;
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}

/* =====================
   MODALS - MODERN
   ===================== */


.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-xl) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px);
    overflow: hidden;
    color: var(--text-primary) !important;
}

.modal-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 20px 24px !important;
}

.modal-header .modal-title {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: 1.15rem;
}

.modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.7;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    padding: 24px !important;
}

/* Ensure container-fluid inside modals is dark */
.modal-body .container-fluid,
.modal-body .container,
.modal-body form,
.modal-body div {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 16px 24px !important;
    gap: 10px;
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}


/* =====================
   ALERTS
   ===================== */
.alert {
    border-radius: var(--border-radius) !important;
    border: none !important;
    font-weight: 500;
    padding: 14px 20px;
}

.alert-success {
    background: var(--success-bg) !important;
    color: var(--success-light) !important;
    border-left: 4px solid var(--success) !important;
}

.alert-danger {
    background: var(--danger-bg) !important;
    color: var(--danger-light) !important;
    border-left: 4px solid var(--danger) !important;
}

.alert-warning {
    background: var(--warning-bg) !important;
    color: var(--warning-light) !important;
    border-left: 4px solid var(--warning) !important;
}

/* Global Button Enhancements */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #000 !important;
}

/* =====================
   BADGES
   ===================== */
.badge {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

.badge.bg-success,
.bg-success {
    background: var(--success) !important;
}

.badge.bg-danger,
.badge.rounded-pill.bg-danger {
    background: var(--danger) !important;
}

/* =====================
   LIST GROUPS (Maintenance)
   ===================== */
.list-group-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 14px 18px;
    transition: all var(--transition-fast);
}

.list-group-item:hover {
    background: var(--bg-hover) !important;
}

/* =====================
   DATATABLES OVERRIDES
   ===================== */
.dataTables_wrapper {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary) !important;
    font-size: 0.85rem;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_length select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 6px 12px;
    min-height: 38px;
}

.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 8px 14px;
    min-height: 40px;
    transition: all var(--transition-normal);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate {
    margin-top: var(--spacing-md);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 8px 14px !important;
    margin: 2px 3px !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary-light) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Sorting icons */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    opacity: 0.5;
}

/* =====================
   RESTOCK BUTTON
   ===================== */
/* a.restock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    color: #fff !important;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.75rem;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.2);
}

a.restock:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.4);
    background: linear-gradient(135deg, #fbbf24, #f97316) !important;
    color: #fff !important;
}

a.restock i {
    font-size: 0.9rem;
} */

.restocks {
    text-decoration: none !important;
}

.restocks:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

/* =====================
   FOOTER
   ===================== */
#sticky-footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color);
    padding: 16px 0 !important;
}

#sticky-footer small {
    color: var(--text-muted) !important;
    font-size: 0.8rem;
}

#sticky-footer a {
    color: var(--primary-light) !important;
    text-decoration: none;
}

#sticky-footer a:hover {
    color: var(--accent-light) !important;
}

/* =====================
   RECEIPT VIEW
   ===================== */
#outprint_receipt {
    background: #fff !important;
    color: #000 !important;
    border-radius: var(--border-radius);
    padding: 20px;
}

#outprint_receipt .table {
    color: #000 !important;
}

#outprint_receipt td,
#outprint_receipt th {
    color: #000 !important;
}

/* =====================
   EMPTY TABLE STATES
   ===================== */
.dataTables_empty, 
tr.empty-row td, 
tr.empty-row th,
table tbody tr td[colspan]:only-child,
table tbody tr th[colspan]:only-child {
    background-color: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    padding: 1.5rem !important;
    font-style: italic !important;
    border-color: var(--border-color) !important;
}

/* Ensure centers inside empty rows don't break layout */
table tbody tr td[colspan] center,
table tbody tr th[colspan] center {
    display: block;
    width: 100%;
}

/* =====================
   TABLE FOOTER / TOTAL ROWS
   ===================== */
table tfoot tr,
table tr.bg-dark.bg-opacity-25,
table tr.text-bold {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
}

table tfoot td,
table tr.bg-dark.bg-opacity-25 td,
table tr.text-bold td {
    padding: 8px 12px !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--border-color) !important;
    vertical-align: middle !important;
}

table tr.bg-dark.bg-opacity-25 h6,
table tr.text-bold h6 {
    margin-bottom: 0 !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
}

/* =====================
   CONFIRMATION MODAL
   ===================== */
#delete_content {
    color: var(--text-primary) !important;
    font-size: 1rem;
    line-height: 1.6;
}

/* =====================
   ANIMATIONS
   ===================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.card-deck .card {
    animation: fadeInUp 0.4s ease forwards;
}

.card-deck:nth-child(1) .card { animation-delay: 0.05s; }
.card-deck:nth-child(2) .card { animation-delay: 0.1s; }
.card-deck:nth-child(3) .card { animation-delay: 0.15s; }
.card-deck:nth-child(4) .card { animation-delay: 0.2s; }

/* =====================
   MISC OVERRIDES
   ===================== */
/* Body background overrides */
.body-bg {
    background-color: var(--bg-body) !important;
}

/* Links */
a {
    color: var(--primary-light);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-light);
}

/* Text utilities override */
.text-dark {
    color: var(--text-primary) !important;
}

.text-light {
    color: var(--text-primary) !important;
}

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

.text-primary {
    color: var(--primary-light) !important;
}

.text-white-50 {
    color: var(--text-muted) !important;
}

/* Border overrides */
.border-bottom.border-dark {
    border-color: var(--border-color) !important;
}

.border.rounded-1.border-dark {
    border-color: var(--border-color) !important;
    border-radius: var(--border-radius) !important;
}

/* Background overrides */
.bg-dark {
    background: var(--bg-surface) !important;
}

.bg-dark.bg-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Print button group */
#print_data,
#print_data_s {
    margin: 4px 4px 4px 0;
}

/* Opacity overrides */
.bg-primary.bg-opacity-50 {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* =====================
   RESPONSIVE ADJUSTMENTS
   ===================== */
@media (max-width: 768px) {
    #page-container {
        padding: var(--spacing-md) !important;
    }

    .card-header {
        padding: var(--spacing-md) !important;
    }

    .card-body {
        padding: var(--spacing-md) !important;
    }

    #topNavBar .nav-link {
        padding: 12px 20px !important;
        border-bottom: 1px solid var(--border-color);
    }
}

/* =====================
   POS-SPECIFIC TEXT COLORS
   ===================== */
#plist td,
#plist th,
#item-list td,
#item-list th {
    color: var(--text-primary) !important;
}

.td {
    color: var(--text-primary) !important;
}

/* fix the profit display none */
.profit {
    display: none;
}

/* =====================
   TABLE TEXT FIXES
   Ensure all table content is
   visible on dark background
   ===================== */
.table td,
.table th,
.table tbody td,
.table tbody th,
.table tfoot td,
.table tfoot th {
    color: var(--text-primary) !important;
}

/* Low-stock rows - keep text visible */
tr.bg-danger td,
tr.bg-danger th,
.bg-danger.bg-opacity-50 td,
.bg-danger.bg-opacity-50 th,
tr.bg-danger.bg-opacity-50 td,
tr.bg-danger.bg-opacity-50 th {
    color: var(--danger-light) !important;
    background: var(--danger-bg) !important;
}

/* DataTable text elements */
.dataTables_wrapper td,
.dataTables_wrapper th,
.dataTables_empty {
    color: var(--text-primary) !important;
}

/* Bootstrap bg utility text fix */
.bg-primary.bg-opacity-50,
.bg-primary.bg-opacity-25 {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* Override any remaining dark text on dark bg */
.fw-bold,
.fw-bolder,
b, strong {
    color: inherit;
}

/* Ensure anchor text inside tables is visible */
.table a {
    color: var(--primary-light) !important;
}

.table a:hover {
    color: var(--accent-light) !important;
}

/* Status badges */
.badge.bg-success {
    background: var(--success) !important;
    color: #fff !important;
}

.badge.bg-primary {
    background: var(--primary) !important;
    color: #fff !important;
}

.badge.bg-warning {
    background: var(--warning) !important;
    color: var(--text-inverse) !important;
}

.badge.bg-danger {
    background: var(--danger) !important;
    color: #fff !important;
}

.badge.bg-info {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Select2 inside DataTables */
.dataTables_length .select2-container {
    min-width: 80px;
}

/* Toast / Confirm modal */
#confirm_modal .modal-body {
    color: var(--text-primary) !important;
}

/* Fix for maintenance page icons */
.list-group-item .btn-sm {
    min-width: 40px;
    min-height: 40px;
}

/* Home page stat card icons */
.card-deck .fa,
.card-deck .fas,
.card-deck .far,
.card-deck .fab,
.card-deck [class^="fa-"] {
    color: inherit;
}

/* =====================
   DATATABLES PAGINATION FIXES
   Ensure pagination buttons are 
   clean and visible
   ===================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    margin-left: 4px;
    padding: 6px 14px;
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
    background: var(--bg-hover) !important;
    color: var(--primary) !important;
    border-color: var(--primary-light) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px var(--primary-glow);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: default;
}

/* POS Table Quantity Highlight */
.table tbody tr.qty-highlight {
    background-color: rgba(6, 182, 212, 0.15) !important; /* Cyan subtle highlight */
    transition: background-color 0.3s ease;
}

/* Dark mode specific intensity if needed, mostly handled by rgb alpha */
:root[data-theme="dark"] .table tbody tr.qty-highlight {
    background-color: rgba(6, 182, 212, 0.25) !important;
}

/* Fix theme toggle switch visibility */
#themeSwitch.form-check-input {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

#themeSwitch.form-check-input:focus {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

:root[data-theme="light"] #themeSwitch.form-check-input {
    background-color: rgba(255, 255, 255, 1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23475569'/%3e%3c/svg%3e") !important;
}

#themeSwitch.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}


/* --- Receipt Preview (On-Screen) --- */
#outprint_receipt {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 1.5rem !important;
    border-radius: var(--border-radius-sm) !important;
    width: 100% !important;
    max-width: 3.5in !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Force everything inside the receipt to be black on white */
#outprint_receipt,
#outprint_receipt p,
#outprint_receipt span,
#outprint_receipt div,
#outprint_receipt h1,
#outprint_receipt h2,
#outprint_receipt h3,
#outprint_receipt h4,
#outprint_receipt h5,
#outprint_receipt h6,
#outprint_receipt b,
#outprint_receipt strong,
#outprint_receipt th,
#outprint_receipt td,
#outprint_receipt table {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #eeeeee !important;
}

#outprint_receipt table thead th {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #333333 !important;
}

#outprint_receipt .table-responsive {
    border: none !important;
}

#outprint_receipt .fw-bold {
    color: #000000 !important;
}

/* --- Print Optimization (B&W / POS Printers) --- */
@media print {
    body, html {
        background: #fff !important;
        color: #000 !important;
        width: 100% !important;
    }
    *, p, span, div, h1, h2, h3, h4, h5, h6, b, small, strong, th, td {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: #000 !important;
    }
    #topNavBar, .navbar, .btn, .no-print, .modal-footer, footer, .form-group, #filter, #reset-btn, #filter-btn, #dropdownMenuButton1 {
        display: none !important;
    }
    #outprint, #outprint_receipt, .print-container {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        position: static !important;
    }
    .table td, .table th {
        border: 1px solid #000 !important;
        padding: 4px !important;
        font-size: 11px !important;
    }
    #outprint_receipt {
        width: 3in !important;
        font-family: 'Courier New', Courier, monospace !important;
    }
}

/* --- Global DataTables Premium Styling --- */
.dataTables_wrapper {
    padding: 1rem 0;
}

.dataTables_length, 
.dataTables_filter {
    margin-bottom: 1.5rem !important;
}

/* THE STACKING FIX: Ensure labels are flex-row and don't wrap */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* Hide line breaks that DataTables sometimes injects */
.dataTables_wrapper .dataTables_length label br,
.dataTables_wrapper .dataTables_filter label br {
    display: none !important;
}

/* Force inputs to be inline and not take full width */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    display: inline-block !important;
    width: auto !important;
    min-width: 80px !important;
    margin: 0 10px !important;
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 250px !important;
}

/* Pagination Styling */
.dataTables_paginate {
    margin-top: 1.5rem !important;
}

.dataTables_paginate .paginate_button {
    background: var(--bg-surface-2) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    margin-left: 5px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--primary-glow) !important;
}

/* Info Text */
.dataTables_info {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    margin-top: 1.5rem !important;
}

/* Date/Time Inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 8px 12px !important;
}

::-webkit-calendar-picker-indicator {
    filter: invert(var(--theme-invert));
    cursor: pointer;
}

/* --- SweetAlert2 Premium Integration --- */
.swal2-popup {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 2rem !important;
}

.swal2-title {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

.swal2-html-container {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
}

.swal2-confirm.swal2-styled {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px var(--primary-glow) !important;
}

.swal2-cancel.swal2-styled {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 10px 24px !important;
}

/* Fix for icons in dark mode */
.swal2-icon.swal2-warning, 
.swal2-icon.swal2-error, 
.swal2-icon.swal2-info, 
.swal2-icon.swal2-question {
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Premium Toast Notification */

#toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
}

.toast-notification {
    pointer-events: auto;
    width: 320px;
    background: var(--bg-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    padding: 16px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
    overflow: hidden;
}

.toast-notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.toast-notification.success::before { background: var(--success); }
.toast-notification.error::before { background: var(--danger); }
.toast-notification.warning::before { background: var(--warning); }
.toast-notification.info::before { background: var(--accent); }

.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.success .toast-icon { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.error .toast-icon { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.warning .toast-icon { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.info .toast-icon { background: rgba(6, 182, 212, 0.15); color: var(--accent); }

.toast-content {
    flex-grow: 1;
}

.toast-title {
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
    opacity: 0.7;
}

.toast-message {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.toast-close:hover {
    color: var(--danger);
    transform: rotate(90deg);
}

@keyframes toastSlideIn {
    0% { opacity: 0; transform: translateX(50px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastSlideOut {
    0% { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(30px) scale(0.95); }
}

.toast-notification.hide {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideDown {
    0% { opacity: 0; transform: translateY(-30px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}