/* ============================================================
   AUTOVTS — Colors & Type
   Brand: AUTOVTS (by Vinatech Group)
   Product: Warehouse Execution System (WES)
   Source of truth: Brand Guideline VTS (official) + WES codebase tokens.
   ============================================================ */

/* Fonts — self-hosted brand typefaces (uploaded TTF). Files live in /fonts.
   Open Sans = sans/display; JetBrains Mono = telemetry/mono. (SIL OFL) */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 125%; font-display: swap; src: url("fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-stretch: 75% 125%; font-display: swap; src: url("fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap; src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype"); }

/* ------------------------------------------------------------
   Brand-font load shim.
   Forces the browser to fetch the default-weight Open Sans and
   JetBrains Mono faces even on pages where no visible text uses
   them (e.g. cards that only render h1/h2 at weight 600+, or
   pure-mono numeric cards). Without this, `document.fonts.check
   ('14px "Open Sans"')` returns false on such pages and any tooling
   that probes font load state will incorrectly conclude the
   brand fonts are missing and a substitute is being rendered.
   The shim renders a 0×0 hidden glyph in each weight — no
   visual side-effect, one extra font fetch per page.
   ------------------------------------------------------------ */
html::before {
  content: "·";
  position: fixed; left: -9999px; top: 0;
  width: 0; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-family: "Open Sans"; font-weight: 400; font-style: normal;
}
html::after {
  content: "·";
  position: fixed; left: -9999px; top: 0;
  width: 0; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-family: "Open Sans"; font-weight: 700; font-style: normal;
}
body::before {
  content: "·";
  position: fixed; left: -9999px; top: 0;
  width: 0; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-family: "JetBrains Mono"; font-weight: 400; font-style: normal;
}
body::after {
  content: "·";
  position: fixed; left: -9999px; top: 0;
  width: 0; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-family: "Manrope"; font-weight: 800; font-style: normal;
}

:root {
  /* -------- BRAND · canonical palette (per Brand Guideline VTS) -------- */
  --brand-orange:    #F26739;   /* primary · R242 G103 B57 · CMYK 0/80/92/0 */
  --brand-orange-2:  #F29239;   /* secondary highlight */
  --brand-black:     #231F20;   /* R35 G31 B32 · CMYK 70/67/64/74 */
  --brand-gray:      #4D4D4D;   /* dark gray accent */
  --brand-white:     #FFFFFF;

  /* -------- Orange ramp (derived) -------- */
  --orange-50:  #FEF1EC;
  --orange-100: #FDDCCB;
  --orange-200: #FBB89B;
  --orange-300: #F9966B;
  --orange-400: #F47A47;
  --orange-500: #F26739;   /* = brand */
  --orange-600: #DA5326;
  --orange-700: #B23F1B;
  --orange-800: #8C3014;
  --orange-900: #5E1F0C;

  /* -------- Neutrals (warm-gray, anchored to brand-black) -------- */
  --ink-900:    #231F20;   /* primary text · brand-black */
  --ink-800:    #2E2A2B;
  --ink-700:    #3B3637;
  --ink-600:    #4D4D4D;   /* brand-gray · secondary text */
  --ink-500:    #6B6B6B;
  --ink-400:    #8C8C8E;   /* muted text */
  --ink-300:    #B5B5B7;
  --ink-200:    #D4D4D6;
  --ink-150:    #E5E5E7;   /* default border */
  --ink-100:    #ECECEE;
  --ink-50:     #F4F4F5;
  --surface:    #F6F6F7;   /* page bg · matches codebase */
  --surface-2:  #FAFAFB;   /* row hover, alt surface */
  --white:      #FFFFFF;

  /* -------- Status · operational state palette --------
     Chip pattern: solid (dot/icon) + soft bg + text-color. */
  --status-success:       #16A34A;
  --status-success-soft:  #DCFCE7;
  --status-success-text:  #15803D;

  --status-warning:       #F29239;          /* uses brand secondary orange */
  --status-warning-soft:  #FEF3C7;
  --status-warning-text:  #B45309;

  --status-busy:          #F26739;          /* uses brand primary orange */
  --status-busy-soft:     #FEE4D6;
  --status-busy-text:     #B23F1B;

  --status-error:         #DC2626;
  --status-error-soft:    #FEE2E2;
  --status-error-text:    #B91C1C;

  --status-info:          #2563EB;          /* in-progress · normal · assigned */
  --status-info-soft:     #DBEAFE;
  --status-info-text:     #1D4ED8;

  --status-offline:       #9CA3AF;          /* offline · canceled · inactive */
  --status-offline-soft:  #F1F5F9;
  --status-offline-text:  #4B5563;

  /* -------- Semantic UI roles -------- */
  --color-bg:            var(--surface);
  --color-surface:       var(--white);
  --color-surface-2:     var(--surface-2);
  --color-border:        var(--ink-150);
  --color-border-strong: var(--ink-200);
  --color-divider:       var(--ink-100);

  --color-fg-1:          var(--ink-900);    /* primary text */
  --color-fg-2:          var(--ink-600);    /* secondary text */
  --color-fg-3:          var(--ink-400);    /* muted / caption */
  --color-fg-on-dark:    var(--white);
  --color-fg-on-brand:   var(--white);

  --color-accent:        var(--brand-orange);
  --color-accent-hover:  var(--orange-600);
  --color-accent-active: var(--orange-700);
  --color-accent-soft:   var(--orange-50);
  --color-link:          var(--brand-orange);

  /* Sidebar — dark navy/black */
  --color-sidebar:           var(--brand-black);
  --color-sidebar-active:    var(--brand-orange);
  --color-sidebar-active-fg: var(--white);
  --color-sidebar-fg:        rgba(255, 255, 255, 0.78);
  --color-sidebar-muted:     rgba(255, 255, 255, 0.42);
  --color-sidebar-divider:   rgba(255, 255, 255, 0.06);
  --color-sidebar-hover:     rgba(255, 255, 255, 0.05);

  /* -------- Type families -------- */
  /* Manrope (geometric humanist sans · display/headings, self-hosted brand upload) +
     Open Sans (body/UI, highly legible at small sizes) +
     JetBrains Mono (telemetry). All self-hosted from uploaded brand files. */
  --font-sans:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: "Manrope", "Open Sans", system-ui, sans-serif;

  /* -------- Type scale (px) -------- */
  --text-xs:       11px;
  --text-sm:       12px;
  --text-base:     13px;
  --text-md:       14px;
  --text-lg:       16px;
  --text-xl:       18px;
  --text-2xl:      20px;
  --text-3xl:      22px;
  --text-4xl:      28px;
  --text-display:  40px;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-caps:   0.12em;

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */

  /* -------- Spacing scale (4px base) -------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* -------- Radii -------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;     /* default · cards, inputs, buttons */
  --radius-lg:   10px;    /* prominent cards (matches shadcn --radius) */
  --radius-xl:   14px;
  --radius-pill: 9999px;

  /* -------- Shadow / elevation -------- */
  --shadow-xs:      0 1px 0 rgba(35, 31, 32, 0.04);
  --shadow-sm:      0 1px 2px rgba(35, 31, 32, 0.06), 0 1px 1px rgba(35,31,32,0.04);
  --shadow-md:      0 4px 12px rgba(35, 31, 32, 0.06), 0 1px 2px rgba(35,31,32,0.04);
  --shadow-lg:      0 12px 28px rgba(35, 31, 32, 0.10), 0 2px 6px rgba(35,31,32,0.05);
  --shadow-popover: 0 8px 24px rgba(35, 31, 32, 0.12);
  --ring-focus:     0 0 0 3px rgba(242, 103, 57, 0.28);   /* orange focus ring */

  /* -------- Charts (recharts palette) -------- */
  --chart-1: var(--brand-orange);   /* primary series */
  --chart-2: var(--brand-black);    /* dark counter series */
  --chart-3: var(--brand-orange-2);
  --chart-4: var(--status-success);
  --chart-5: var(--status-info);
  --chart-6: #7C3AED;
  --chart-grid: var(--ink-100);

  /* -------- Motion -------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    180ms; /* @kind other */
  --dur-slow:    260ms; /* @kind other */

  /* -------- Operator / touch ergonomics --------
     Warehouse floor use: gloves, motion, glare, glance-distance reading.
     Operator mode (set data-density="operator" on <html>) scales these up. */
  --touch-min:        44px;   /* absolute minimum hit target (WCAG) */
  --control-h:        36px;   /* default control height (desk/control-room) */
  --control-h-touch:  56px;   /* glove-friendly floor control height */
  --tap-gap:          8px;    /* min gap between adjacent tap targets */
  --tap-gap-touch:    14px;   /* operator-mode gap (prevents mis-taps) */
  --row-h:            44px;   /* default dense table row */
  --row-h-touch:      60px;   /* operator-mode table row */
  --focus-w:          3px;    /* focus ring width (desk) */
  --focus-w-touch:    4px;    /* thicker ring for floor visibility */
  --font-scale:       1;      /* operator mode bumps this for glance reading */
}

/* ============================================================
   DARK THEME — control-room & night-shift surfaces.
   Apply with <html data-theme="dark"> (or on any container).
   Warm-neutral dark anchored on brand-black; orange stays the accent.
   Status soft-fills become low-opacity tints; text becomes light.
   ============================================================ */
[data-theme="dark"] {
  --color-bg:            #16140F;   /* warm near-black page */
  --color-surface:       #211E1B;   /* card */
  --color-surface-2:     #2A2623;   /* row hover / alt */
  --color-border:        #38332E;
  --color-border-strong: #4A443D;
  --color-divider:       #2E2A26;

  --color-fg-1:          #F6F3EF;   /* primary text */
  --color-fg-2:          #BBB3AA;   /* secondary */
  --color-fg-3:          #8A837A;   /* muted / caption */
  --color-fg-on-dark:    #F6F3EF;
  --color-fg-on-brand:   #FFFFFF;

  --color-accent:        #FF7A4D;   /* slightly brighter orange for dark bg */
  --color-accent-hover:  #FF8C63;
  --color-accent-active: #F26739;
  --color-accent-soft:   rgba(242, 103, 57, 0.16);
  --color-link:          #FF8C63;

  /* Sidebar stays dark but a touch deeper than surface for separation */
  --color-sidebar:           #0F0D0A;
  --color-sidebar-active:    var(--brand-orange);
  --color-sidebar-active-fg: #FFFFFF;
  --color-sidebar-fg:        rgba(255, 255, 255, 0.74);
  --color-sidebar-muted:     rgba(255, 255, 255, 0.40);
  --color-sidebar-divider:   rgba(255, 255, 255, 0.07);
  --color-sidebar-hover:     rgba(255, 255, 255, 0.06);

  /* Status — brighter solids for dark-bg legibility, tinted soft fills */
  --status-success:       #34D17F;
  --status-success-soft:  rgba(52, 209, 127, 0.16);
  --status-success-text:  #6FE6A6;

  --status-warning:       #F6A93B;
  --status-warning-soft:  rgba(246, 169, 59, 0.16);
  --status-warning-text:  #FCC36B;

  --status-busy:          #FF7A4D;
  --status-busy-soft:     rgba(255, 122, 77, 0.18);
  --status-busy-text:     #FFA886;

  --status-error:         #F2564E;
  --status-error-soft:    rgba(242, 86, 78, 0.18);
  --status-error-text:    #FF8A82;

  --status-info:          #4D90F0;
  --status-info-soft:     rgba(77, 144, 240, 0.18);
  --status-info-text:     #8FBAF7;

  --status-offline:       #8A8F99;
  --status-offline-soft:  rgba(138, 143, 153, 0.18);
  --status-offline-text:  #B6BBC4;

  /* Elevation: shadows read poorly on dark — lean on borders + faint glow */
  --shadow-xs:      0 0 0 1px rgba(0,0,0,0.4);
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:      0 6px 16px rgba(0,0,0,0.55);
  --shadow-lg:      0 16px 36px rgba(0,0,0,0.6);
  --shadow-popover: 0 10px 28px rgba(0,0,0,0.6);
  --ring-focus:     0 0 0 3px rgba(255, 122, 77, 0.4);

  --chart-2:    #BBB3AA;   /* "dark counter series" must be light on dark */
  --chart-grid: #2E2A26;
}

/* ============================================================
   OPERATOR DENSITY — glove + glance optimized.
   Apply with <html data-density="operator">. Larger targets, bigger
   base font, thicker focus rings. Pair with either theme.
   ============================================================ */
[data-density="operator"] {
  --control-h:    var(--control-h-touch);
  --row-h:        var(--row-h-touch);
  --tap-gap:      var(--tap-gap-touch);
  --focus-w:      var(--focus-w-touch);
  --font-scale:   1.12;
  --text-md:      15px;
  --text-base:    14px;
  --text-sm:      13px;
}

/* ============================================================
   Base typography — semantic HTML elements
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-base);
  color: var(--color-fg-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-1);
}
h2, .h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
  line-height: var(--leading-snug);
  color: var(--color-fg-1);
}
h3, .h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  line-height: var(--leading-snug);
  color: var(--color-fg-1);
}
h4, .h4 {
  font-size: var(--text-md);
  font-weight: var(--fw-semi);
  line-height: var(--leading-snug);
}

p, .body {
  font-size: var(--text-md);
  line-height: var(--leading-base);
  color: var(--color-fg-2);
}

.body-sm { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-fg-2); }

/* Display — hero metrics (login stats, big KPI numbers) */
.display, .num-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--fw-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-1);
}

/* KPI numeric · 28px tabular bold */
.metric {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-1);
}

/* Caption — all-caps eyebrow labels */
.caption, .eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-3);
  line-height: 1;
}

/* Table header / body */
.th, th {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-fg-3);
  text-align: left;
}
.td, td {
  font-size: var(--text-base);
  color: var(--color-fg-1);
  font-variant-numeric: tabular-nums;
}

/* Mono — IDs, codes, time, telemetry */
.mono, code, kbd, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a, .link { color: var(--color-link); text-decoration: none; }
a:hover, .link:hover { text-decoration: underline; }

::selection { background: var(--orange-200); color: var(--brand-black); }