/* ============================================================================
 * APP THEME — brand overlay for the FloorManager app (Shift + Slate)
 *
 * Loaded AFTER styles.css to retheme without touching the base stylesheet.
 * Both themes live in this single file, scoped under :root[data-theme="..."].
 * The theme switcher in the topbar just toggles document.documentElement's
 * data-theme attribute. No stylesheet enable/disable juggling.
 *
 * The base styles.css uses these tokens:
 *   --ink (text) · --muted · --panel · --soft · --soft-2
 *   --accent · --accent-strong · --accent-glow · --accent-2 · --blue
 *   --warn · --danger · --ok
 * Hardcoded inky backgrounds (#050509, #111118, etc.) in styles.css are kept
 * intentionally — they already match the dark surface palette.
 * ============================================================================ */

/* ── Default tokens (fallback if no data-theme set) ──────────────────────── */
:root {
  --accent-soft:    rgba(255, 106, 0, .14);
  --accent-soft-2:  rgba(255, 106, 0, .05);
  --accent-border:  rgba(255, 106, 0, .30);
  --accent-on:      #050507;     /* text color on accent fills */
}

/* ── SHIFT theme — signal orange ─────────────────────────────────────────── */
:root[data-theme="shift"] {
  --accent:        #ff6a00;
  --accent-strong: #ff6a00;
  --accent-2:      #ff8a3a;
  --accent-glow:   rgba(255, 106, 0, .35);
  --blue:          #ff6a00;
  --accent-soft:   rgba(255, 106, 0, .14);
  --accent-soft-2: rgba(255, 106, 0, .05);
  --accent-border: rgba(255, 106, 0, .30);
  --accent-on:     #050507;

  --warn:   #ffac6e;
  --danger: #f87171;
  --ok:     #34d399;

  --ink:   #e6e8eb;
  --muted: #a1a6ad;

  /* Status-tag re-tunes that need exact colors */
  --tag-ok-bg:     rgba(52, 211, 153, .14);
  --tag-ok-border: rgba(52, 211, 153, .30);
  --tag-danger-bg:     rgba(248, 113, 113, .14);
  --tag-danger-border: rgba(248, 113, 113, .30);
  --tag-warn-bg:     rgba(255, 172, 110, .12);
  --tag-warn-border: rgba(255, 172, 110, .30);
}

/* ── SLATE theme — quiet steel blue ──────────────────────────────────────── */
:root[data-theme="slate"] {
  --accent:        #7891b5;
  --accent-strong: #7891b5;
  --accent-2:      #9fb3cf;
  --accent-glow:   rgba(120, 145, 181, .28);
  --blue:          #7891b5;
  --accent-soft:   rgba(120, 145, 181, .14);
  --accent-soft-2: rgba(120, 145, 181, .05);
  --accent-border: rgba(120, 145, 181, .30);
  --accent-on:     #0c0f14;

  --warn:   #d4b48a;
  --danger: #d88787;
  --ok:     #7bb39a;

  --ink:   #e6e8ec;
  --muted: #98a0aa;

  --tag-ok-bg:     rgba(123, 179, 154, .14);
  --tag-ok-border: rgba(123, 179, 154, .30);
  --tag-danger-bg:     rgba(216, 135, 135, .14);
  --tag-danger-border: rgba(216, 135, 135, .30);
  --tag-warn-bg:     rgba(212, 180, 138, .12);
  --tag-warn-border: rgba(212, 180, 138, .30);
}

/* ============================================================================
 * Below: structural rules that reference the tokens above.
 * Unscoped — they work for whichever theme is active.
 * ============================================================================ */

/* ── Type system ──────────────────────────────────────────────────────────── */
html, body {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, .topbar h1, .view-title, .panel h2, .panel h3 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
}
.eyebrow,
.meta,
.tag,
code, kbd, samp, pre,
input[type="number"] {
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Theme switcher (topbar) ─────────────────────────────────────────────── */
.theme-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
}
.theme-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.theme-chip:hover { color: var(--ink); }
.theme-chip.active {
  background: rgba(255,255,255,.06);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.theme-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.theme-dot-shift { background: #ff6a00; box-shadow: 0 0 0 2px rgba(255,106,0,.18); }
.theme-dot-slate { background: #7891b5; box-shadow: 0 0 0 2px rgba(120,145,181,.18); }

/* ── Brand mark — chevron-F SVG container ────────────────────────────────── */
.brand-mark {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-size: 0;
  padding: 0;
  overflow: hidden;
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
/* Brand-mark dot follows the active theme */
.brand-mark svg circle { fill: var(--accent) !important; }

.brand strong {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.brand span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Active nav item ─────────────────────────────────────────────────────── */
.nav-item.active {
  color: #fff;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item.active svg { color: var(--accent); }
.nav-item:hover:not(.active) { background: rgba(255,255,255,.04); }

/* ── Primary buttons ─────────────────────────────────────────────────────── */
.primary-action,
button.primary-action,
button.primary,
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.primary-action:hover,
button.primary-action:hover,
button.primary:hover,
.btn-primary:hover {
  background: var(--accent-2);
  box-shadow: 0 0 24px var(--accent-glow);
}

.segmented button.active {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}

/* ── Status tags ─────────────────────────────────────────────────────────── */
.tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
}
.tag.running, .tag.warning {
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid var(--accent-border);
}
.tag.planned {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.12);
}
.tag.done {
  background: var(--tag-ok-bg);
  color: var(--ok);
  border: 1px solid var(--tag-ok-border);
}
.tag.danger {
  background: var(--tag-danger-bg);
  color: var(--danger);
  border: 1px solid var(--tag-danger-border);
}
.tag.hold {
  background: var(--tag-warn-bg);
  color: var(--warn);
  border: 1px solid var(--tag-warn-border);
}

.tag.priority-urgent {
  background: var(--tag-danger-bg);
  color: var(--danger);
  border-color: var(--tag-danger-border);
}
.tag.priority-high {
  background: var(--accent-soft);
  color: var(--accent-2);
  border-color: var(--accent-border);
}
.tag.priority-low {
  background: transparent;
  color: var(--muted);
  border-color: rgba(255,255,255,.12);
}

/* ── Metric cards ────────────────────────────────────────────────────────── */
#dashboard-view .metric strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#dashboard-view .metric span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
}

#dashboard-view .panel,
#dashboard-view .metric,
#schedule-view .machine-column,
.calendar-day,
.attention-card,
.bom-card,
.timer-card {
  border-color: rgba(255,255,255,.08);
}

/* ── Sync / license badges (top bar pills) ───────────────────────────────── */
.sync-badge {
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.sync-badge strong { color: var(--ok); font-weight: 600; }
.license-badge strong { color: var(--accent-2); }
.sync-badge small { color: var(--muted); letter-spacing: .04em; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.data-table thead th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.data-table tbody tr:hover {
  background: var(--accent-soft-2);
}

/* ── Inputs / focus ──────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Industry picker (was hardcoded blue) ────────────────────────────────── */
.industry-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft-2);
}
.industry-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Capacity / progress bars ────────────────────────────────────────────── */
.bar span { background: var(--accent); }
.bar span.warn { background: var(--warn); }
.bar span.danger { background: var(--danger); }

.capacity-row strong,
.scrap-wheel-value,
.dash-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Scrap dial ──────────────────────────────────────────────────────────── */
#dashboard-view .scrap-wheel {
  background: conic-gradient(var(--accent) calc(var(--scrap-pct, 0) * 1%), rgba(255,255,255,.06) 0) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
* { scrollbar-color: rgba(255,255,255,.12) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; border: 3px solid #050509; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection { background: var(--accent-glow); color: #fff; }

/* ── Focus-visible (keyboard navigation) ─────────────────────────────────── */
.primary-action:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
.nav-item:focus-visible,
.theme-chip:focus-visible {
  outline: 2px solid var(--accent, #ff6a00);
  outline-offset: 2px;
}