/* ═══════════════════════════════════════════════════════════════════════
   SHOPNC · Tech View · Design-System-Compliant Layer
   ───────────────────────────────────────────────────────────────────────
   Loaded after shopnc.css and shopnc-ds.css. Replaces the rounded /
   pastel / Rajdhani-based tech-view styling with classes that conform to
   shopnc-design-system.html:
     - Industrial workshop terminal aesthetic
     - Square corners, rule borders, raised panels
     - Archivo for numerics + headers, JetBrains Mono for labels/data
     - IBM Plex Sans for body
     - Strict semantic colour: amber = signal, ok/warn/danger = status only
     - No decorative gradients or rgba pastel washes

   These classes are tech-view-only (.tv-* prefixed where new). The
   existing .tv-user-bar etc. shopnc.css classes are overridden where
   needed; the JS markup is rewritten to use the new classes.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── User bar at top of tech view ────────────────────────────────────── */
/* Replaces the rounded soft-pastel pill version. Flat raised panel,
   amber signal stripe along the bottom. */
.tv-user-bar {
  background: var(--bg-raised, var(--surface));
  border-bottom: 1px solid var(--rule, var(--border));
  border-top: 3px solid var(--amber, var(--cyan));
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.tv-user-avatar {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: var(--ink, var(--text));
  color: var(--bg-panel, var(--surface));
  border-radius: 0;     /* explicit: no rounded avatar */
  flex-shrink: 0;
}
.tv-user-name {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, var(--text));
  line-height: 1.1;
}
.tv-user-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--text-muted));
  margin-top: 4px;
}
.tv-user-jobcount {
  font-family: 'Archivo', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, var(--text));
  line-height: 1;
  text-align: right;
}
.tv-user-jobcount-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--text-muted));
  margin-top: 4px;
  text-align: right;
}

/* Clock-in status badge — small flat pill (DS .pill outlined style) */
.tv-clock-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink-mute, var(--text-muted));
}
.tv-clock-pill.on { color: var(--ok, var(--green)); }
.tv-clock-pill .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.tv-clock-pill.on .led { animation: tv-led-pulse 1.5s infinite; }
@keyframes tv-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.tv-sign-out {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--rule, var(--border));
  background: transparent;
  color: var(--ink-mute, var(--text-muted));
  padding: 7px 12px;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.12s;
}
.tv-sign-out:hover {
  border-color: var(--amber, var(--cyan));
  color: var(--amber, var(--cyan));
}


/* ── KPI strip (Today Done / Hrs Worked / Hrs Sold / Efficiency) ─────── */
/* DS .stat pattern. Each tile gets a left-edge accent in its semantic
   colour. No rgba tint background — flat raised panels with rule
   borders. */
.tv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-deep, var(--surface2));
  border-bottom: 1px solid var(--rule, var(--border));
}
.tv-stat {
  background: var(--bg-raised, var(--surface));
  padding: 12px 14px;
  border-right: 1px solid var(--rule, var(--border));
  border-left: 3px solid transparent;   /* placeholder for accent */
}
.tv-stat:last-child { border-right: none; }
.tv-stat.ok     { border-left-color: var(--ok, var(--green)); }
.tv-stat.warn   { border-left-color: var(--warn, var(--gold)); }
.tv-stat.alert  { border-left-color: var(--amber, var(--cyan)); }
.tv-stat.danger { border-left-color: var(--danger, var(--red)); }
.tv-stat.info   { border-left-color: var(--info, var(--purple)); }
.tv-stat.neutral{ border-left-color: var(--rule-bright, var(--border)); }

.tv-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--text-muted));
  margin-bottom: 6px;
}
.tv-stat-val {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink, var(--text));
  line-height: 1;
}
.tv-stat-val.dim    { color: var(--ink-dim, var(--text-dim)); }
.tv-stat-val.ok     { color: var(--ok, var(--green)); }
.tv-stat-val.warn   { color: var(--warn, var(--gold)); }
.tv-stat-val.alert  { color: var(--amber, var(--cyan)); }
.tv-stat-val.danger { color: var(--danger, var(--red)); }
.tv-stat-val.info   { color: var(--info, var(--purple)); }


/* ── Section labels (UP NEXT, ON HOLD, etc.) ─────────────────────────── */
/* DS pattern: numbered amber prefix + uppercase label, JetBrains Mono.
   Spec ref: shopnc-design-system.html .section-label */
.tv-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, var(--text));
  margin: 18px 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tv-section-label .num {
  background: var(--amber, var(--cyan));
  color: #fff;
  font-weight: 800;
  padding: 1px 7px 2px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.tv-section-label .count {
  margin-left: auto;
  color: var(--ink-mute, var(--text-muted));
  font-weight: 600;
}


/* ── Job cards ───────────────────────────────────────────────────────── */
/* Replaces the gradient-tinted rounded version. Square panel, semantic
   left-edge accent stripe, structured head/body/foot rows. */
.tv-card {
  background: var(--bg-raised, var(--surface));
  border: 1px solid var(--rule, var(--border));
  border-left: 4px solid var(--rule-bright, var(--border));
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tv-card:hover {
  border-color: var(--amber, var(--cyan));
}
.tv-card.active  { border-left-color: var(--amber, var(--cyan)); }
.tv-card.hold    { border-left-color: var(--warn, var(--gold)); }
.tv-card.queue   { border-left-color: var(--rule-bright, var(--border)); }
.tv-card.advisor { border-left-color: var(--info, var(--purple)); }
.tv-card.done    { border-left-color: var(--ok, var(--green)); }

/* Card head — plate + meta on the LEFT, status pill on the RIGHT.
   The plate anchors the left edge across every card type so they
   visually line up vertically regardless of which status the card
   carries. (Earlier the status pill was left-of-plate, which meant a
   wide pill like "WAITING — PARTS" pushed its plate further right
   than the simple "#1" did, breaking the column alignment.) */
.tv-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule, var(--border));
  background: var(--bg-deep, var(--surface2));
  align-items: start;
}
.tv-card-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  align-self: start;
  color: var(--ink-mute, var(--text-muted));
  white-space: nowrap;
  flex-shrink: 0;     /* never let it squeeze */
}
.tv-card-status.active  { background: var(--amber, var(--cyan)); color: #fff; border-color: var(--amber, var(--cyan)); }
.tv-card-status.hold    { color: var(--warn, var(--gold)); }
.tv-card-status.queue   { color: var(--ink-mute, var(--text-muted)); }
.tv-card-status.advisor { color: var(--info, var(--purple)); }
.tv-card-status.done    { background: var(--ok, var(--green)); color: #fff; border-color: var(--ok, var(--green)); }

/* Plate — DS-compliant industrial badge with locale strip */
.tv-card-plate {
  background: var(--ink, var(--text));
  color: var(--bg, var(--surface));
  padding: 4px 12px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1;
  display: inline-block;
  position: relative;
}
.tv-card-plate .locale {
  display: block;
  font-size: 7px;
  letter-spacing: 0.2em;
  text-align: center;
  background: var(--amber, var(--cyan));
  color: #fff;
  margin: -4px -12px 3px -12px;
  padding: 1px 0;
  font-weight: 700;
}

.tv-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tv-card-veh {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, var(--text));
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-card-cust {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink, var(--text));
  text-transform: uppercase;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0.85;
}

/* Inline alert strips inside the card head — Stop & Notify, advisor flags */
.tv-card-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule, var(--border));
  background: var(--warn-soft, rgba(201,134,18,0.08));
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warn, var(--gold));
}
.tv-card-alert.danger {
  background: var(--danger-soft, rgba(168,48,26,0.08));
  color: var(--danger, var(--red));
}
.tv-card-alert::before {
  content: '';
  width: 8px; height: 8px;
  background: currentColor;
  flex-shrink: 0;
}

/* Info chip strip — duration / parts / inspection / flags */
.tv-card-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-deep, var(--surface2));
  border-bottom: 1px solid var(--rule, var(--border));
}
.tv-card-chips:last-child { border-bottom: none; }
.tv-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-right: 1px solid var(--rule, var(--border));
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--text-muted));
}
.tv-chip:last-child { border-right: none; }
.tv-chip.has-data    { color: var(--ink, var(--text)); }
.tv-chip.ok          { color: var(--ok, var(--green)); }
.tv-chip.warn        { color: var(--warn, var(--gold)); }
.tv-chip.alert       { color: var(--amber, var(--cyan)); }
.tv-chip.tappable    { cursor: pointer; }
.tv-chip.tappable:hover { background: var(--bg-raised, var(--surface)); }
.tv-chip-icon {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

/* Elapsed-time bar at bottom of active cards */
.tv-elapsed {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  background: var(--bg-deep, var(--surface2));
}
.tv-elapsed-time,
.tv-elapsed-rem {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tv-elapsed-time.ok,
.tv-elapsed-rem.ok     { color: var(--ok, var(--green)); }
.tv-elapsed-time.warn,
.tv-elapsed-rem.warn   { color: var(--warn, var(--gold)); }
.tv-elapsed-time.alert,
.tv-elapsed-rem.alert  { color: var(--amber, var(--cyan)); }
.tv-elapsed-time.danger,
.tv-elapsed-rem.danger { color: var(--danger, var(--red)); }
.tv-elapsed-bar {
  height: 4px;
  background: var(--bg, var(--surface3));
  border: 1px solid var(--rule, var(--border));
  position: relative;
  overflow: hidden;
}
.tv-elapsed-fill {
  height: 100%;
  background: var(--rule-bright, var(--text-muted));
  transition: width 1.5s linear;
}
.tv-elapsed-fill.ok     { background: var(--ok, var(--green)); }
.tv-elapsed-fill.warn   { background: var(--warn, var(--gold)); }
.tv-elapsed-fill.alert  { background: var(--amber, var(--cyan)); }
.tv-elapsed-fill.danger { background: var(--danger, var(--red)); }


/* ── With Advisor / Completed Today cards (compact layout) ───────────── */
.tv-card-compact {
  background: var(--bg-raised, var(--surface));
  border: 1px solid var(--rule, var(--border));
  border-left: 4px solid var(--rule-bright, var(--border));
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 10px 16px;
  align-items: center;
}
.tv-card-compact.advisor { border-left-color: var(--info, var(--purple)); }
.tv-card-compact.done    { border-left-color: var(--ok, var(--green)); }
.tv-card-compact-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tv-card-compact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--text-muted));
}
.tv-card-compact-label.advisor { color: var(--info, var(--purple)); }
.tv-card-compact-label.done    { color: var(--ok, var(--green)); }
.tv-card-compact-numbers {
  text-align: right;
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.tv-card-compact-actual {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--amber, var(--cyan));
  line-height: 1;
}
.tv-card-compact-est {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-mute, var(--text-muted));
  text-transform: uppercase;
}


/* ── Body container & empty state ────────────────────────────────────── */
.tv-body {
  padding: 4px 16px 24px;
  background: var(--bg, var(--bg2));
}

.tv-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--rule, var(--border));
  background: var(--bg-raised, var(--surface));
  margin: 24px 0;
}
.tv-empty-title {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, var(--text));
  margin-bottom: 6px;
}
.tv-empty-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-mute, var(--text-muted));
  line-height: 1.6;
}


/* ── Light/dark fallbacks for older shopnc.css that doesn't have the
   DS tokens yet. The var() defaults above (e.g. var(--ink, var(--text)))
   handle that, but for tokens that don't have a single existing fallback
   we explicitly map them in the workbench-mode body class below. */
body.tv-mode {
  --bg-raised: var(--surface);
  --bg-deep:   var(--surface2);
  --rule:      var(--border);
  --rule-bright: var(--border2, var(--border));
  --ink:       var(--text);
  --ink-soft:  var(--text);
  --ink-mute:  var(--text-muted);
  --ink-dim:   var(--text-dim);
  --amber:     var(--cyan);
  --amber-soft: rgba(232,85,32,0.08);
  --warn:      var(--gold);
  --warn-soft: rgba(201,134,18,0.08);
  --ok:        var(--green);
  --ok-soft:   rgba(58,138,71,0.08);
  --danger:    var(--red);
  --danger-soft: rgba(201,58,31,0.08);
  --info:      var(--purple);
  --info-soft: rgba(168,85,247,0.08);
}

/* Phone-responsive tech-mode rules live in shopnc-tech-mobile.css —
   loaded after this file in index.html. Anything in THIS file should
   work at any width (tablet baseline + desktop). Don't add @media
   rules here; add them to shopnc-tech-mobile.css instead. */