/* =============================================================
   Design Tokens — Single source of truth for all visual values
   ============================================================= */

:root {
    /* ── Color Palette ─────────────────────────────────────── */
    --color-primary:       #4f46e5;
    --color-primary-dark:  #4338ca;
    --color-primary-light: #818cf8;
    --color-primary-50:    #eef2ff;
    --color-primary-a10:   rgba(79, 70, 229, 0.10);
    --color-primary-a30:   rgba(79, 70, 229, 0.30);

    --color-purple:        #7c3aed;
    --color-indigo-a20:    rgba(99, 102, 241, 0.20);
    --color-indigo-a10:    rgba(99, 102, 241, 0.10);

    --color-success:       #10b981;
    --color-success-dark:  #059669;
    --color-success-light: #f0fdf4;
    --color-success-200:   #a5d6a7;
    --color-warning:       #f59e0b;
    --color-warning-dark:  #d97706;
    --color-warning-light: #fef3c7;
    --color-warning-200:   #ffcc80;
    --color-danger:        #ef4444;
    --color-danger-dark:   #dc2626;
    --color-danger-light:  #fee2e2;
    --color-info:          #3b82f6;
    --color-info-dark:     #2563eb;
    --color-info-light:    #f0fbfc;
    --color-highlight:     #fff9c4;
    --color-highlight-alt: #fff59d;

    /* ── Overlay / Transparency ────────────────────────────── */
    --overlay-sm:   rgba(0, 0, 0, 0.1);
    --overlay-md:   rgba(0, 0, 0, 0.3);
    --overlay-lg:   rgba(0, 0, 0, 0.5);

    /* ── Neutral / Gray Scale ──────────────────────────────── */
    --color-white:     #ffffff;
    --color-gray-50:   #f8fafc;
    --color-gray-100:  #f1f5f9;
    --color-gray-150:  #f3f4f6;
    --color-gray-200:  #e2e8f0;
    --color-gray-300:  #cbd5e1;
    --color-gray-350:  #d1d5db;
    --color-gray-400:  #94a3b8;
    --color-gray-500:  #64748b;
    --color-gray-600:  #475569;
    --color-gray-650:  #374151;
    --color-gray-700:  #334155;
    --color-gray-800:  #1e293b;
    --color-gray-900:  #0f172a;

    /* ── Semantic / Layout ─────────────────────────────────── */
    --sidebar-width:            280px;
    --sidebar-collapsed-width:  70px;
    --header-height:            64px;

    /* Backward-compat aliases (used in billing_modern, printer, reconcile) */
    --primary-color: var(--color-primary);
    --primary-dark:  var(--color-primary-dark);

    --sidebar-bg:           var(--color-gray-900);
    --sidebar-hover:        var(--color-gray-800);
    --sidebar-text:         var(--color-gray-400);
    --sidebar-text-active:  var(--color-gray-50);
    --sidebar-border:       rgba(255, 255, 255, 0.05);

    --body-bg:          var(--color-gray-100);
    --body-color:       var(--color-gray-700);
    --surface:          var(--color-white);
    --surface-hover:    var(--color-gray-50);
    --border-color:     var(--color-gray-200);

    /* ── Typography ────────────────────────────────────────── */
    --font-sans:  'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Nirmala UI', 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.75rem;   /* 28px */

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ── Spacing Scale ─────────────────────────────────────── */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-sm:   0.375rem;  /* 6px  */
    --radius:      0.5rem;    /* 8px  */
    --radius-md:   0.75rem;   /* 12px */
    --radius-lg:   1rem;      /* 16px */
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ── Z-Index Scale ─────────────────────────────────────── */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-sidebar:  1040;
    --z-modal:    1050;
    --z-toast:    9999;
    --z-skip:     10000;

    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition:         200ms ease;
    --transition-slow:    300ms ease;
    --transition-sidebar: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Focus Ring (WCAG) ─────────────────────────────────── */
    --focus-ring:        3px solid var(--color-primary);
    --focus-ring-offset: 2px;
    --focus-shadow:      0 0 0 4px var(--color-primary-a30);

    /* ── Min Touch Target (WCAG 2.5.5) ─────────────────────── */
    --touch-target: 44px;

    /* ── Semantic Text Colors ──────────────────────────────── */
    --color-text:           var(--color-gray-800);
    --color-text-secondary: var(--color-gray-500);
    --color-text-muted:     var(--color-gray-400);
    --color-text-inverse:   var(--color-white);
    --color-link:           var(--color-primary);
    --color-link-hover:     var(--color-primary-dark);

    /* ── Background Semantic Tokens ────────────────────────── */
    --bg-page:     var(--color-gray-100);
    --bg-elevated: var(--color-white);
    --bg-sunken:   var(--color-gray-50);
    --bg-overlay:  rgba(0, 0, 0, 0.5);

    /* ── Status / Role Colors ──────────────────────────────── */
    --color-role-super-admin: #7c3aed;
    --color-role-admin:       #dc2626;
    --color-role-manager:     #059669;
    --color-role-staff:       #d97706;
    --color-role-cashier:     #0891b2;
    --color-role-auditor:     #7c3aed;
    --color-role-viewer:      #6b7280;

    /* ── Chart Palette (8 semantic colors) ─────────────────── */
    --chart-1: #4f46e5;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #8b5cf6;
    --chart-6: #06b6d4;
    --chart-7: #f97316;
    --chart-8: #ec4899;

    /* ── Transaction Type Colors ────────────────────────────── */
    --color-txn-purchase:     #dcfce7;
    --color-txn-sale:         #fef2f2;
    --color-txn-transfer-in:  #dbeafe;
    --color-txn-transfer-out: #fef9c3;
    --color-txn-adjustment:   #f3e8ff;
    --color-txn-breakage:     #fecaca;

    /* ── Component Size Tokens ─────────────────────────────── */
    --btn-height-sm:    32px;
    --btn-height:       40px;
    --btn-height-lg:    48px;
    --input-height:     40px;
    --input-height-sm:  32px;
    --card-padding:     var(--space-6);
    --card-padding-sm:  var(--space-4);
    --table-row-height: 48px;

    /* ── Container/Layout ──────────────────────────────────── */
    --content-max-width: 1400px;
    --page-padding:      var(--space-6);

    /* ── Breakpoints (for JS / documentation) ──────────────── */
    --bp-sm:  576px;
    --bp-md:  768px;
    --bp-lg:  992px;
    --bp-xl:  1200px;
    --bp-xxl: 1400px;

    /* ── Icon Scale ────────────────────────────────────────── */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    /* ── Bootstrap Overrides ───────────────────────────────── */
    --bs-primary:    var(--color-primary);
    --bs-success:    var(--color-success);
    --bs-danger:     var(--color-danger);
    --bs-warning:    var(--color-warning);
    --bs-info:       var(--color-info);
    --bs-body-font-family: var(--font-sans);
    --bs-border-radius:    var(--radius);
    --bs-border-color:     var(--border-color);
    --bs-primary-rgb:      79, 70, 229;
    --bs-success-rgb:      16, 185, 129;
    --bs-danger-rgb:       239, 68, 68;
    --bs-warning-rgb:      245, 158, 11;
    --bs-info-rgb:         59, 130, 246;
    --bs-body-bg:          var(--body-bg);
    --bs-body-color:       var(--body-color);
    --bs-secondary-rgb:    100, 116, 139;
    --bs-light-rgb:        241, 245, 249;
    --bs-dark-rgb:         30, 41, 59;
    --bs-link-color:       var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-lg);
    --bs-border-radius-xl:   var(--radius-xl);
    --bs-border-radius-pill: var(--radius-full);
    --bs-font-sans-serif:    var(--font-sans);
    --bs-secondary:    var(--color-gray-500);
    --bs-light:        var(--color-gray-100);
    --bs-dark:         var(--color-gray-800);
    --bs-card-border-color: var(--border-color);
    --bs-card-border-radius: var(--radius-lg);
    --bs-modal-border-radius: var(--radius-lg);
    --bs-btn-border-radius:   var(--radius);

    /* ── Interactive State Colors ───────────────────────────── */
    --color-primary-hover:    #4338ca;
    --color-primary-active:   #3730a3;
    --color-primary-disabled: rgba(79, 70, 229, 0.45);
    --color-success-hover:    #059669;
    --color-success-active:   #047857;
    --color-danger-hover:     #dc2626;
    --color-danger-active:    #b91c1c;
    --color-warning-hover:    #d97706;
    --color-warning-active:   #b45309;
    --color-info-hover:       #2563eb;
    --color-info-active:      #1d4ed8;

    /* ── Disabled/Muted ────────────────────────────────────── */
    --color-disabled-bg:      var(--color-gray-100);
    --color-disabled-text:    var(--color-gray-400);
    --color-disabled-border:  var(--color-gray-200);

    /* ── Inner & Focus-Elevated Shadows ────────────────────── */
    --shadow-inner:        inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-focus:        0 0 0 4px var(--color-primary-a30);
    --shadow-focus-danger: 0 0 0 4px rgba(239, 68, 68, 0.25);

    /* ── Motion / Animation ────────────────────────────────── */
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:  100ms;
    --duration:       200ms;
    --duration-slow:  350ms;
    --duration-enter: 250ms;
    --duration-exit:  200ms;

    /* ── Heading Typography ────────────────────────────────── */
    --heading-1: var(--text-3xl);
    --heading-2: var(--text-2xl);
    --heading-3: var(--text-xl);
    --heading-4: var(--text-lg);
    --heading-5: var(--text-base);
    --heading-weight: var(--font-bold);

    /* ── Page Width / Container ─────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;

    /* ── Badge Semantic Tokens ──────────────────────────────── */
    --badge-success-bg:    var(--color-success-light);
    --badge-success-text:  #166534;
    --badge-danger-bg:     var(--color-danger-light);
    --badge-danger-text:   #991b1b;
    --badge-warning-bg:    var(--color-warning-light);
    --badge-warning-text:  #92400e;
    --badge-info-bg:       var(--color-info-light);
    --badge-info-text:     #1e40af;
    --badge-neutral-bg:    var(--color-gray-100);
    --badge-neutral-text:  var(--color-gray-600);

    /* ── Status Colors (Active/Inactive/Pending) ───────────── */
    --color-status-active:   var(--color-success);
    --color-status-inactive: var(--color-gray-400);
    --color-status-pending:  var(--color-warning);
    --color-status-error:    var(--color-danger);
    --color-status-draft:    var(--color-gray-500);
    /* Governance Auto Tokens Start */
    --qa-color-00d26aef0ecd: rgba(0,0,0,0.15);
    --qa-color-00fcf96c3411: rgba(15,23,42,0.04);
    --qa-color-01b09fe9957b: rgba(52,152,219,0.3);
    --qa-color-03c53a05553b: rgba(var(--bs-{{color}}-rgb);
    --qa-color-047784cfa07b: rgba(40,167,69,0.3);
    --qa-color-0752d421c229: rgba(255,255,255,0.9);
    --qa-color-08a9fb880a62: rgba(0,0,0,0.9);
    --qa-color-092a83d1213e: rgba(79,70,229,0.05);
    --qa-color-0a880ac8d5b6: rgba(13,110,253,0.1);
    --qa-color-0e74138b47b4: rgba(255,255,255,0.18);
    --qa-color-0ffae8b2af92: rgba(238,90,111,0.3);
    --qa-color-17196c65191a: rgba(124,58,237,0.1);
    --qa-color-1c81862cf33a: rgba(255,255,255,0.6);
    --qa-color-21921d483186: rgba(40,167,69,0.1);
    --qa-color-227659e716dd: rgb(000/0.05);
    --qa-color-274c1329093d: rgba(255,255,255,0.15);
    --qa-color-2dd8ad37acd4: rgba(255,255,255,0.85);
    --qa-color-2ff065cb5af0: rgba(40,167,69,0.15);
    --qa-color-311895d47dc0: rgba(79,70,229,0.3);
    --qa-color-338f97acb0d5: rgba(255,255,255,0.3);
    --qa-color-348c93722b83: rgba(0,0,0,0.08);
    --qa-color-35913b41257f: rgba(0,0,0,0.075);
    --qa-color-391df9743671: rgba(0,0,0,0.2);
    --qa-color-3cffc531a614: rgba(102,16,242,0.1);
    --qa-color-43bcc0762eb6: rgba(255,255,255,0.25);
    --qa-color-44ca7d7a4288: #999;
    --qa-color-477e088c9a96: rgba(0,0,0,0.125);
    --qa-color-480244aff748: rgba(79,70,229,0.2);
    --qa-color-4ac867a41c71: rgba(0,0,0,0.35);
    --qa-color-4c46ca1826d1: rgba(0,0,0,0.5);
    --qa-color-4d820b4d2dc9: rgba(239,68,68,0.1);
    --qa-color-4fe472a79004: rgba(16,185,129,0.3);
    --qa-color-5711d3b2cf77: rgba(108,117,125,0.1);
    --qa-color-582d05175a56: rgba(220,53,69,.0);
    --qa-color-597929892d57: rgba(76,175,80,0.4);
    --qa-color-598b32b7d9f7: #000;
    --qa-color-60ce325d4031: rgba(118,75,162,0.1);
    --qa-color-6317262b8c24: rgba(220,53,69,0.1);
    --qa-color-6835182e99f6: rgba(0,123,255,0.4);
    --qa-color-69bf28ce780a: rgba(255,193,7,0.1);
    --qa-color-6a18b1d7b14f: rgba(0,123,255,.25);
    --qa-color-6e947ebce198: rgba(16,185,129,0.5);
    --qa-color-7371e081cd85: rgba(0,0,0,0.25);
    --qa-color-74b76757d2dc: rgba(255,255,255,0.03);
    --qa-color-766d35349d65: rgba(0,0,0,0.85);
    --qa-color-7672bb207e44: rgba(0,0,0,0.025);
    --qa-color-78f2335da7f2: rgba(255,255,255,0.8);
    --qa-color-7b8a99d45615: rgb(99102241/0.1);
    --qa-color-825491642479: rgb(000/0.1);
    --qa-color-829bbf7deb6d: rgba(255,255,255,0.5);
    --qa-color-83ca005294a6: rgb(000/0.2);
    --qa-color-85f89ec1d2ca: rgba(255,255,255,0.05);
    --qa-color-8696798716eb: rgba(0,0,0,0.3);
    --qa-color-878bbc229d6b: rgba(102,126,234,0.2);
    --qa-color-8a5132f530ad: rgba(102,126,234,0.4);
    --qa-color-93aaa71263ad: rgba(67,206,162,0.4);
    --qa-color-9e476f470fef: rgba(79,70,229,0.4);
    --qa-color-9f48e032d97f: rgba(52,152,219,0.4);
    --qa-color-9fdc1d3e2e6e: rgba(102,16,242,0.25);
    --qa-color-a107c331817f: rgba(0,0,0,0.05);
    --qa-color-a13a45c1cf83: rgba(102,126,234,0.12);
    --qa-color-a5a6f8d9e4c4: rgba(99,102,241,0.1);
    --qa-color-a5a9c1a487f5: rgba(255,255,255,0.2);
    --qa-color-a848765152f3: rgba(255,255,255,0.95);
    --qa-color-a8dc9bf479ed: rgba(40,167,69,0.25);
    --qa-color-b0cabdd7065d: rgba(16,185,129,0.1);
    --qa-color-b10ff0c82c81: rgba(220,53,69,.35);
    --qa-color-b204248b5d0a: #ddd;
    --qa-color-b67e9e7e7902: rgba(255,255,255,0.7);
    --qa-color-bd5aa653aa09: #f8f9fa;
    --qa-color-bed0e631fd82: rgba(102,126,234,0.3);
    --qa-color-bf275bb1d0a0: rgba(17,153,142,0.4);
    --qa-color-c230a1e7120f: rgba(25,135,84,0.1);
    --qa-color-c7238605a68e: rgba(0,0,0,0.1);
    --qa-color-cd6cbc6451a4: rgba(102,126,234,0.1);
    --qa-color-cead0cbd5e98: rgba(0,0,0,0.12);
    --qa-color-df9c1d2dbabb: #666;
    --qa-color-e3639b0e7a42: rgb(99102241/0.4);
    --qa-color-e5a987ac0560: rgba(99,102,241,0.15);
    --qa-color-e9306793f031: rgba(220,53,69,0.15);
    --qa-color-ef1bf7cd21a0: rgba(99,102,241,0.05);
    --qa-color-efa23319263a: rgba(102,126,234,0.05);
    --qa-color-f13ccc3455c2: rgba(240,147,251,0.3);
    --qa-color-f8200947b243: rgba(255,255,255,0.1);
    --qa-color-f863dbfa3219: rgba(0,0,0,0.06);
    --border-color-light: var(--border-color);
    --kpi-accent: var(--color-primary);
    /* Governance Auto Tokens End */
}

/* ── Dark Mode ─────────────────────────────────────────────── */
/* Activated by adding data-theme="dark" to <html>, or automatically
   via prefers-color-scheme when data-theme="auto". Toggle via JS. */
[data-theme="dark"],
html.theme-auto[data-theme="auto"] {
    --body-bg:                var(--color-gray-900);
    --body-color:             var(--color-gray-200);
    --bg-page:                #0c1222;
    --bg-elevated:            var(--color-gray-800);
    --bg-sunken:              var(--color-gray-900);
    --bg-overlay:             rgba(0, 0, 0, 0.7);
    --surface:                var(--color-gray-800);
    --surface-hover:          var(--color-gray-700);
    --border-color:           rgba(255, 255, 255, 0.10);

    --color-text:             var(--color-gray-100);
    --color-text-secondary:   var(--color-gray-400);
    --color-text-muted:       var(--color-gray-500);
    --color-text-inverse:     var(--color-gray-900);

    --sidebar-bg:             #070d1a;
    --sidebar-hover:          var(--color-gray-800);
    --sidebar-text:           var(--color-gray-400);
    --sidebar-text-active:    var(--color-gray-50);
    --sidebar-border:         rgba(255, 255, 255, 0.06);

    --color-primary-50:       rgba(79, 70, 229, 0.15);
    --color-success-light:    rgba(16, 185, 129, 0.15);
    --color-warning-light:    rgba(245, 158, 11, 0.15);
    --color-danger-light:     rgba(239, 68, 68, 0.15);
    --color-info-light:       rgba(59, 130, 246, 0.15);

    --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:                 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-md:              0 4px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl:              0 20px 25px rgba(0, 0, 0, 0.55);
    --shadow-inner:           inset 0 2px 4px rgba(0, 0, 0, 0.3);

    --color-disabled-bg:      var(--color-gray-700);
    --color-disabled-text:    var(--color-gray-500);
    --color-disabled-border:  var(--color-gray-600);

    --badge-success-bg:       rgba(16, 185, 129, 0.2);
    --badge-success-text:     #6ee7b7;
    --badge-danger-bg:        rgba(239, 68, 68, 0.2);
    --badge-danger-text:      #fca5a5;
    --badge-warning-bg:       rgba(245, 158, 11, 0.2);
    --badge-warning-text:     #fcd34d;
    --badge-info-bg:          rgba(59, 130, 246, 0.2);
    --badge-info-text:        #93c5fd;
    --badge-neutral-bg:       var(--color-gray-700);
    --badge-neutral-text:     var(--color-gray-300);

    --color-txn-purchase:     rgba(16, 185, 129, 0.15);
    --color-txn-sale:         rgba(239, 68, 68, 0.15);
    --color-txn-transfer-in:  rgba(59, 130, 246, 0.15);
    --color-txn-transfer-out: rgba(245, 158, 11, 0.15);
    --color-txn-adjustment:   rgba(139, 92, 246, 0.15);
    --color-txn-breakage:     rgba(239, 68, 68, 0.2);

    /* Bootstrap dark overrides */
    --bs-body-bg:      var(--body-bg);
    --bs-body-color:   var(--body-color);
    --bs-border-color: var(--border-color);

    color-scheme: dark;
}

/* Auto-theme: respect OS preference */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --body-bg:              var(--color-gray-900);
        --body-color:           var(--color-gray-200);
        --bg-page:              #0c1222;
        --bg-elevated:          var(--color-gray-800);
        --bg-sunken:            var(--color-gray-900);
        --surface:              var(--color-gray-800);
        --surface-hover:        var(--color-gray-700);
        --border-color:         rgba(255, 255, 255, 0.10);
        --color-text:           var(--color-gray-100);
        --color-text-secondary: var(--color-gray-400);
        --sidebar-bg:           #070d1a;
        --sidebar-hover:        var(--color-gray-800);
        --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow:               0 4px 6px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}

/* Dark mode specific component overrides */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--color-text);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-sunken);
    border-color: var(--border-color);
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--surface);
    --bs-table-striped-bg: var(--bg-sunken);
    --bs-table-hover-bg: var(--surface-hover);
    color: var(--color-text);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-sunken);
    color: var(--color-text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-gray-700);
    border-color: var(--color-primary);
    color: var(--color-text);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-gray-500);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-gray-600);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-sunken) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .stat-card {
    background: var(--surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-card .stat-value {
    color: var(--color-text);
}

[data-theme="dark"] .filter-bar {
    background: var(--bg-sunken);
}

[data-theme="dark"] .data-table-wrapper {
    background: var(--surface);
}

[data-theme="dark"] .alert {
    border-color: var(--border-color);
}

[data-theme="dark"] .alert-info {
    background-color: var(--badge-info-bg);
    color: var(--badge-info-text);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

[data-theme="dark"] .alert-success {
    background-color: var(--badge-success-bg);
    color: var(--badge-success-text);
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-sunken);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--color-text);
}

[data-theme="dark"] .page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--color-text);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--surface-hover);
}

/* ── Dark mode skeleton adjustment ─────────────────────────── */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-row .skeleton-cell {
    background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 50%, var(--color-gray-700) 75%);
    background-size: 200% 100%;
}

/* ── Dark mode command palette ─────────────────────────────── */
[data-theme="dark"] .command-palette-input input {
    color: var(--color-text);
}

[data-theme="dark"] .command-palette-results .cp-item {
    color: var(--color-text);
}

[data-theme="dark"] .command-palette-results .cp-item:hover,
[data-theme="dark"] .command-palette-results .cp-item.highlighted {
    background: rgba(79, 70, 229, 0.2);
}