/* ============================================================
   Production dashboard: design tokens (single source of truth).
   Craft of the Octomatica design language (Manrope only, hairlines,
   light and dark) with the client's own neutral slate-blue brand layer.
   Load fonts.css (Manrope) before this file (see base.html).
   ============================================================ */

:root {
  /* ── Surfaces (cool neutral paper + graphite sidebar) ── */
  --paper: #F6F7F9;                        /* page canvas */
  --paper-2: #EEF0F3;                      /* deeper section bands */
  --surface: #FFFFFF;                      /* cards */
  --surface-2: #F5F6F8;                    /* subtle card */
  --ink-surface: #1D2229;                  /* dark sidebar band */
  --ink-surface-2: #262C35;                /* raised card on dark band */

  /* ── Ink (text) ── */
  --ink: #171A1F;                          /* primary */
  --ink-2: #454B54;                        /* secondary */
  --ink-3: #6B717B;                        /* muted (WCAG-AA on paper) */
  --ink-on-dark: #EDEEF2;                  /* primary text on dark sidebar */
  --ink-on-dark-2: #9BA1AC;                /* muted text on dark sidebar */

  /* ── Lines / hairlines ── */
  --line: #E4E6EA;
  --line-2: #D2D5DB;
  --line-strong: #171A1F;
  --ink-line: rgba(237,238,242,.10);

  /* ── Accent — one restrained slate-blue, no brand-green ── */
  --accent: #3E6B99;
  --accent-bright: #4B7EB0;
  --accent-deep: #2C4E70;
  --accent-on-ink: #7FB0DA;
  --accent-soft: #E4ECF3;
  --accent-softer: #EFF4F8;
  --accent-on: #FFFFFF;
  --glow: rgba(62,107,153,.18);
  --glow-2: rgba(62,107,153,.08);

  /* ── Category / data hues — muted, desaturated (charts only) ── */
  --c-coral: #B97355;
  --c-blue:  #5C7FA8;
  --c-amber: #B4903B;
  --c-purple:#847E9E;
  --c-teal:  #4E8C82;
  --c-pink:  #A97A8C;

  /* ── Status (OEE vs. threshold) ── */
  --status-good: #2F7D4F;
  --status-good-soft: #E4F1E8;
  --status-warn: #A6791E;
  --status-warn-soft: #F5EEDD;
  --status-bad: #B03B2E;
  --status-bad-soft: #F5E4E1;

  /* ── Radii ── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* ── Shadows ── */
  --sh-sm: 0 1px 2px rgba(20,22,26,.05), 0 2px 8px rgba(20,22,26,.04);
  --sh-md: 0 4px 14px rgba(20,22,26,.06), 0 14px 36px -10px rgba(20,22,26,.09);
  --sh-lg: 0 8px 24px rgba(20,22,26,.07), 0 30px 70px -20px rgba(20,22,26,.14);
  --sh-glow: 0 10px 28px -8px var(--glow);

  /* ── Spacing (4pt scale) ── */
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  /* ── Motion ── */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);

  /* ── Type ── */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-head:    'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, sans-serif;
  /* No mono face: figures use Manrope with tabular numerals (see .num). */
  --font-mono:    'Manrope', system-ui, sans-serif;

  /* ── Label scale (sentence case, no tracked capitals) ── */
  --fs-label: .8rem;
  --fs-small: .84rem;

  /* ── Layout ── */
  --maxw: 1160px;
  --maxw-wide: 1440px;
  --nav-h: 62px;

  color-scheme: light;
}

/* ── Dark: follows the OS unless the page pins data-theme="light". ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111416; --paper-2: #0d1012; --surface: #17191b; --surface-2: #1d2123;
    --ink-surface: #0b0d0e; --ink-surface-2: #17191b;
    --ink: #f1f3ee; --ink-2: #cbd0cd; --ink-3: #a3aba6;
    --line: rgba(241,243,238,.10); --line-2: rgba(241,243,238,.18); --line-strong: #f1f3ee;
    --accent-bright: #4B7EB0; --accent-deep: #9CC3E6; --accent-on-ink: #9CC3E6;
    --accent-soft: rgba(127,176,218,.18); --accent-softer: rgba(127,176,218,.08);
    --glow: rgba(0,0,0,.35); --glow-2: rgba(0,0,0,.2);
    --c-coral: #D99A7E; --c-blue: #8FB0D6; --c-amber: #D6B465; --c-purple: #ABA5C6; --c-teal: #7DBDB2; --c-pink: #CFA2B3;
    --status-good: #6CC995; --status-good-soft: rgba(108,201,149,.14);
    --status-warn: #E0B25A; --status-warn-soft: rgba(224,178,90,.14);
    --status-bad: #F08A7D; --status-bad-soft: rgba(240,138,125,.14);
    --sh-sm: none; --sh-md: 0 12px 38px rgba(0,0,0,.3); --sh-lg: 0 28px 80px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111416; --paper-2: #0d1012; --surface: #17191b; --surface-2: #1d2123;
  --ink-surface: #0b0d0e; --ink-surface-2: #17191b;
  --ink: #f1f3ee; --ink-2: #cbd0cd; --ink-3: #a3aba6;
  --line: rgba(241,243,238,.10); --line-2: rgba(241,243,238,.18); --line-strong: #f1f3ee;
  --accent-bright: #4B7EB0; --accent-deep: #9CC3E6; --accent-on-ink: #9CC3E6;
  --accent-soft: rgba(127,176,218,.18); --accent-softer: rgba(127,176,218,.08);
  --glow: rgba(0,0,0,.35); --glow-2: rgba(0,0,0,.2);
  --c-coral: #D99A7E; --c-blue: #8FB0D6; --c-amber: #D6B465; --c-purple: #ABA5C6; --c-teal: #7DBDB2; --c-pink: #CFA2B3;
  --status-good: #6CC995; --status-good-soft: rgba(108,201,149,.14);
  --status-warn: #E0B25A; --status-warn-soft: rgba(224,178,90,.14);
  --status-bad: #F08A7D; --status-bad-soft: rgba(240,138,125,.14);
  --sh-sm: none; --sh-md: 0 12px 38px rgba(0,0,0,.3); --sh-lg: 0 28px 80px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ── Base setup (mobile-first: box-sizing + no accidental horizontal scroll) ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: var(--accent-soft); color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }

/* ── Accessible focus (keyboard nav — visible ring using the accent token) ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* ── Loading / skeleton states ── */
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.is-loading { position: relative; color: transparent !important; background: var(--line) !important; border-radius: var(--r-xs); overflow: hidden; }
.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent);
  animation: skeleton-shimmer 1.3s infinite;
}
td.table-loading, td.table-empty { text-align: center; color: var(--ink-3); padding: var(--space-xl) var(--space-md) !important; font-size: .86rem; }