/* ===== Color Palette — Light Mode (HSL-inverted from dark) ===== */
:root {
  color-scheme: light;

  /* Backgrounds */
  --bg:             #dbdee9;
  --surface:        #ffffff;
  --surface-deep:   #ccd0e0;
  --table-surface:  #f8f9fc;

  /* Brand */
  --primary:        #213284;
  --primary-hover:  #172765;

  /* Text */
  --text:         #191b29;
  --text-sub:     #383b52;
  --text-muted:   #62667e;
  --text-faint:   #8b8fa5;

  /* Borders */
  --border:         #c4c8db;
  --border-light:   #d4d7e6;
  --cell-border-h:  #c9cddf;
  --cell-border-v:  #c4c8db;

  /* Table */
  --row-stripe:   #edeff6;
  --row-hover:    #e1e5f4;
  --row-selected: #d6dbf3;

  /* Shadows */
  --shadow-sm:    rgba(0,0,0,0.06);
  --shadow-md:    rgba(0,0,0,0.08);
  --shadow-lg:    rgba(0,0,0,0.18);
  --overlay:      rgba(0,0,0,0.4);

  /* Navbar */
  --navbar-bg:           #191b29;
  --navbar-link:         #a7abcb;
  --navbar-text:         #f3f4f8;
  --navbar-overlay-soft:   rgba(255,255,255,0.08);
  --navbar-overlay-strong: rgba(255,255,255,0.18);

  /* Layout */
  --tab-width:    80vw;

  /* Z-index scale — theme-independent (declared once here, not repeated in dark block).
     Named by role, not by number, so new UI picks a tier instead of inventing a value. */
  --z-raise-1:        1;   /* component-local: sits just above its own sibling content */
  --z-raise-2:        2;
  --z-raise-3:        3;
  --z-local-badge:    10;  /* small in-place badge/icon pinned within a card */
  --z-widget-menu:    20;  /* small menu anchored to a widget/button */
  --z-mobile-panel:   30;  /* mobile-only full-width overlay covering its container */
  --z-mobile-backdrop: 49; /* mobile nav scrim, just under the drawer */
  --z-popover:        50;  /* mobile drawer / small floating popover panel */
  --z-dropdown:       100; /* sticky navbar chrome + dropdown panels */
  --z-panel:          200; /* detached floating panel, notification dropdown, generic modal overlay */
  --z-login:          300; /* login gate — above any in-page panel */
  --z-modal:          1000;
  --z-modal-elevated: 1001; /* a modal opened on top of another modal */
  --z-float:          2000; /* floating tooltip/annotation above chart chrome */
  --z-toast:          9999; /* toasts, loading overlay — always topmost */

  /* Machine status types */
  --type-active:       var(--chart-running);
  --type-idle:         #02346c;
  --type-offline:      var(--chart-offline);
  --type-disconnected: #f59e0b;
  --type-unknown:      #505763;
  --unknown-row-bg:    rgba(80,87,99,0.08);

  /* Chart / type colors */
  --chart-running:      #2e8f6d;
  --chart-flagged:      #e06010;
  --offline-bg:         rgba(204,34,34,0.10);
  --chart-standby:      #2560a0;
  --chart-dormant:      #1e3a5f;
  --chart-dormant-tt:   #2560a0;
  --chart-offline:      #cc2222;
  --chart-unknown:      #4a5060;
  --chart-ongoing:      #17a898;
  --chart-disconnected: #b07600;

  /* Semantic state */
  --danger:        #b3261e;
  --danger-bg:     #fbe6e4;
  --danger-border: #eab6b1;
  --success:       #147a45;
  --success-bg:    #e2f5ea;
  --warning:            #92600a;
  --warning-bg:         #faedd2;
  --warning-highlight:  rgba(146,96,10,0.35);
  --fair:               #9a7d00;
  --fair-bg:            #fdf6c0;

  /* Accent (export / indigo) */
  --accent:        #0e119c;

  /* Inputs */
  --checkbox-bg:       #d1d1e5;

  /* Buttons */
  --on-primary:        #ffffff;
  --on-success:        #ffffff;
  --badge-special-bg:  #ffc107;
  --badge-special-text: #000000;

  /* Icon-action button backgrounds */
  --accept-bg:         rgba(34,197,94,0.12);
  --accept-bg-hover:   rgba(34,197,94,0.25);
  --reject-bg:         rgba(220,53,69,0.12);
  --reject-bg-hover:   rgba(220,53,69,0.25);
  --export-bg:         rgba(99,102,241,0.1);
  --export-bg-hover:   rgba(99,102,241,0.22);

  /* Badge semantic backgrounds */
  --badge-warning-bg:  rgba(245,158,11,0.12);
  --badge-success-bg:  rgba(34,197,94,0.12);
  --badge-danger-bg:   rgba(220,53,69,0.12);

  /* Performance tier — exceptional (>100%) */
  --exceptional-bg:    #ece3fa;
  --exceptional-color: #5b2fa8;
  /* BOM assembled badge shares the same purple */
  --assembled-bg:      var(--exceptional-bg);
  --assembled-color:   var(--exceptional-color);

  /* Session rows */
  --session-open-bg:      #a0bce1;
  --session-open-row-bg:  #bfcde5;
  --session-open-border:  #054a9f;
  --session-closed-bg:    #c4cfe1;
  --session-closed-color: #47566b;

  /* Badges */
  --info-bg:            #e2e9ff;
  --info-color:         #2c3fc7;

  /* Split cut rows */
  --split-row-bg:     rgba(220, 53, 69, 0.07);
  --split-row-border: rgba(220, 53, 69, 0.22);

  /* Spinner invert (0 = keep dark arrows on light bg) */
  --spinner-invert: 0;

  /* Chart tooltip — light mode */
  --tooltip-bg:     #ffffff;
  --tooltip-text:   #1a1a2e;
  --tooltip-border: rgba(0,0,0,0.12);

  /* Chart tooltip text — light mode */
  --tt-running: #059669;
  --tt-active:  #2563eb;
  --tt-flagged: #b45309;
  --tt-time:    #111827;
  --tt-muted:   #6b7280;
}

/* ===== Color Palette — Dark Mode ===== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bg:             #101018;
  --surface:        #212236;
  --surface-deep:   #2c2e47;
  --table-surface:  #1c1d2c;

  /* Brand */
  --primary:        #7b8cde;
  --primary-hover:  #9aaae8;

  /* Text */
  --text:         #eceef7;
  --text-sub:     #c6c9de;
  --text-muted:   #9599b3;
  --text-faint:   #676b87;

  /* Borders */
  --border:         #34364f;
  --border-light:   #2a2c40;
  --cell-border-h:  #3a3c56;
  --cell-border-v:  #34364f;

  /* Table */
  --row-stripe:   #1e1f30;
  --row-hover:    #23243a;
  --row-selected: #292b48;

  /* Shadows */
  --shadow-sm:    rgba(0,0,0,0.2);
  --shadow-md:    rgba(0,0,0,0.3);
  --shadow-lg:    rgba(0,0,0,0.5);
  --overlay:      rgba(0,0,0,0.6);

  /* Navbar */
  --navbar-bg:           #0b0b14;
  --navbar-link:         #8286a8;
  --navbar-text:         #f3f4f8;
  --navbar-overlay-soft:   rgba(255,255,255,0.10);
  --navbar-overlay-strong: rgba(255,255,255,0.25);

  /* Machine status types */
  --type-active:       var(--chart-running);
  --type-idle:         #93c5fd;
  --type-offline:      var(--chart-offline);
  --type-disconnected: #fbbf24;
  --type-unknown:      #9ca3af;
  --unknown-row-bg:    rgba(156,163,175,0.12);

  /* Chart / type colors */
  --chart-running:      #4caf90;
  --chart-flagged:      #f97316;
  --offline-bg:         rgba(239,68,68,0.12);
  --chart-standby:      #2e6fa8;
  --chart-dormant:      #2a4f80;
  --chart-dormant-tt:   #4a9fd4;
  --chart-offline:      #ef4444;
  --chart-unknown:      #6b7280;
  --chart-ongoing:      #21C4AF;
  --chart-disconnected: #f59e0b;

  /* Semantic state */
  --danger:        #f18b85;
  --danger-bg:     rgba(241,139,133,0.14);
  --danger-border: rgba(241,139,133,0.32);
  --success:       #4fd48a;
  --success-bg:    rgba(79,212,138,0.13);
  --warning:            #ecb84f;
  --warning-bg:         rgba(236,184,79,0.14);
  --warning-highlight:  rgba(236,184,79,0.35);
  --fair:               #f0d800;
  --fair-bg:            rgba(240,216,0,0.15);

  /* Accent (export / indigo) */
  --accent:        #6366f1;

  /* Inputs */
  --checkbox-bg:       #3a3a5c;

  /* Buttons */
  --on-primary:        #12132a;
  --on-success:        #0a2d18;
  --badge-special-bg:  #f8ba00;
  --badge-special-text: #000000;

  /* Icon-action button backgrounds */
  --accept-bg:         rgba(74,222,128,0.10);
  --accept-bg-hover:   rgba(74,222,128,0.25);
  --reject-bg:         rgba(248,113,113,0.10);
  --reject-bg-hover:   rgba(248,113,113,0.25);
  --export-bg:         rgba(99,102,241,0.1);
  --export-bg-hover:   rgba(99,102,241,0.22);

  /* Badge semantic backgrounds */
  --badge-warning-bg:  rgba(251,191,36,0.15);
  --badge-success-bg:  rgba(74,222,128,0.15);
  --badge-danger-bg:   rgba(248,113,113,0.15);

  /* Performance tier — exceptional (>100%) */
  --exceptional-bg:    rgba(185,140,240,0.15);
  --exceptional-color: #cbaef2;
  /* BOM assembled badge shares the same purple */
  --assembled-bg:      var(--exceptional-bg);
  --assembled-color:   var(--exceptional-color);

  /* Session rows */
  --session-open-bg:      #1e3a5f;
  --session-open-row-bg:  #1a2840;
  --session-open-border:  #60a5fa;
  --session-closed-bg:    #1e293b;
  --session-closed-color: #94a3b8;

  /* Badges */
  --info-bg:            rgba(143,155,255,0.16);
  --info-color:         #a9b3ff;

  /* Split cut rows */
  --split-row-bg:     rgba(248, 113, 113, 0.10);
  --split-row-border: rgba(248, 113, 113, 0.28);

  /* Spinner invert (1 = invert dark arrows to white on dark bg) */
  --spinner-invert: 1;

  /* Chart tooltip — dark mode */
  --tooltip-bg:     #1a1f2e;
  --tooltip-text:   #d0d4df;
  --tooltip-border: rgba(255,255,255,0.12);

  /* Chart tooltip text — dark mode */
  --tt-running: #4caf90;
  --tt-active:  #6ea8fe;
  --tt-flagged: #f59e0b;
  --tt-time:    #e0e4ef;
  --tt-muted:   #9aa0b4;
}