/* ============================================================================
   Local Custom — Shared Design Chassis  (tools.localcustom.ca)
   Single source of truth for the "shop-floor terminal" identity.
   Owns: fonts, brand tokens (steel / heat / neutrals), and the shared
   navbar + button + chip + focus treatment.

   Does NOT own tool-specific semantic colors (status red/green/yellow/blue,
   warm-paper palettes) — those stay in each tool's own <style>.

   Usage:  <link rel="stylesheet" href="/lc-design.css">   (before the tool's inline <style>)
   Docs:   DESIGN-GUIDE.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand tokens (canonical names) ─────────────────────────────────── */
  --floor:   #e9eaec;   /* app background — the shop floor */
  --ticket:  #fbfbfa;   /* card / panel surface — ticket paper */
  --ink:     #17181b;   /* primary text */
  --steel:   #1f2226;   /* navbar / dark chrome */
  --steel-2: #33373d;   /* dark hairlines, borders on steel */
  --mut:     #6c6f75;   /* muted / secondary text */
  --line:    #d7d9dc;   /* light borders + dividers */
  --heat:    #e8531d;   /* primary accent — the heat press */
  --heat2:   #ff7d33;   /* accent hover / highlight */
  --amber:   #c88a12;   /* in-progress / caution accent */

  /* ── Legacy aliases (keep older tool CSS resolving to brand values) ──── */
  --heat-2:   #ff7d33;
  --black:    #17181b;
  --white:    #fbfbfa;
  --gray-50:  #e9eaec;
  --gray-100: #dbdce0;
  --gray-200: #c6c8cd;
  --gray-400: #71747a;
  --gray-600: #494c52;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: 'Archivo', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

/* ── Shared navbar (.topbar) — steel bar, light logo + text ─────────────
   !important is load-bearing: it overrides each tool's older light .topbar. */
.topbar, nav.topbar { background: var(--steel) !important; border-bottom: 1px solid #000 !important; }
.topbar-logo path, .topbar-logo-link svg path { fill: #f4f5f6 !important; }
.topbar-logo-link img, .topbar-logo img { filter: brightness(0) invert(1); }
.topbar-tag { color: #8c9096 !important; }
.topbar-sep { background: var(--steel-2) !important; }
.topbar-btn { color: #c9ccd0 !important; border-color: var(--steel-2) !important; background: none !important; }
.topbar-btn:hover { border-color: #5a5f66 !important; color: #f4f5f6 !important; }

/* ── Primary action — heat orange ───────────────────────────────────── */
.topbar-btn.primary, .btn.primary, .btn-primary { background: var(--heat) !important; color: #fff !important; border-color: var(--heat) !important; }
.topbar-btn.primary:hover, .btn.primary:hover, .btn-primary:hover { background: var(--heat2) !important; border-color: var(--heat2) !important; opacity: 1 !important; }

/* ── Active tab underline ───────────────────────────────────────────── */
.tab.active { border-bottom-color: var(--heat) !important; }

/* ── Baseline focus ring (tools may restyle; not !important) ─────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; }

/* ============================================================================
   Responsive layer — mobile baseline
   Goal: nothing forces the page wider than the viewport. Wide things scroll
   inside their own container instead of dragging the page.
   Single breakpoint: 720px. Never use body{overflow-x:hidden} — it clips
   content and breaks the sticky topbar.
   ========================================================================== */

/* Media and tables can never exceed their container. */
img, svg, canvas, video, table { max-width: 100%; }

/* Scroll container for wide tables. Wrap a <table> in <div class="table-wrap">. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Tab strips scroll within themselves rather than widening the page.
   Children are targeted as `> *` because tools disagree on the child class:
   production.html uses .nav-tab, jersey-admin.html uses .btn.
   min-width:0 lets the strip shrink below its content width inside a flex
   topbar — without it the strip claims its full 443px and forces a wrap. */
.tabs, .nav-tabs, .batch-tabs, .view-tabs, .st-subtabs, .mk-view-tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  min-width: 0;
}
.tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar,
.batch-tabs::-webkit-scrollbar, .view-tabs::-webkit-scrollbar,
.st-subtabs::-webkit-scrollbar, .mk-view-tabs::-webkit-scrollbar { display: none; }

.tabs > *, .nav-tabs > *, .batch-tabs > *, .view-tabs > *,
.st-subtabs > *, .mk-view-tabs > * { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 720px) {
  /* The topbar's button cluster is declared `display:flex` with no wrap in nine
     tools and never here. Let the bar grow to a second row instead of pushing
     the page wide. min-height keeps the desktop 56px feel on wider screens. */
  .topbar, nav.topbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .topbar-right { min-width: 0; flex-wrap: wrap; }
}