/* ═══════════════════════════════════════════════════════════
   MES Dashboard — Shared Theme (dark default / light toggle)
   Add <link rel="stylesheet" href="/theme.css"> to each page
═══════════════════════════════════════════════════════════ */

/* ── Toggle button (all pages) ──────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border, #333842);
  border-radius: 6px;
  color: var(--text-dim, #8b8f96);
  cursor: pointer;
  font-size: 15px;
  padding: 4px 8px;
  line-height: 1;
  transition: .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent, #4facfe);
  color: var(--accent, #4facfe);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE
═══════════════════════════════════════════════════════════ */
html.light {
  /* Standard pages */
  --bg: #f0f2f5;
  --card: #ffffff;
  --card-hover: #f5f7fa;
  --border: #dde1e7;
  --text: #1a1d23;
  --text-dim: #6b7280;
  --accent: #0078d4;
  --green: #16a34a;
  --yellow: #b45309;
  --red: #dc2626;
  --blue: #2563eb;
  --orange: #ea580c;
  /* AGV page extra vars */
  --surface: #ffffff;
  --card2: #f8f9fc;
  --border2: #edf0f7;
  --dim: #718096;
  --dimmer: #a0aec0;
}

html.light body { background: var(--bg); color: var(--text); }

/* ── Structural (shared across pages) ───────────────────── */
html.light .header,
html.light .sidebar,
html.light .mobile-nav {
  background: #ffffff;
}

/* Inputs */
html.light input,
html.light select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* ── rgba(255,255,255,x) subtle backgrounds → dark equivalent */
html.light .station-stats span,
html.light .detail-item,
html.light .detail-part,
html.light .st-kpi,
html.light .stat-card,
html.light .line2-kpi,
html.light .bin-tank,
html.light .chart-card,
html.light .srow,
html.light .compare-val { background: rgba(0,0,0,.04); }

html.light .param-bar-bg { background: rgba(0,0,0,.08); }

html.light .event-row,
html.light .srow { border-bottom-color: rgba(0,0,0,.07); }

/* ── index.html ─────────────────────────────────────────── */
html.light .station-card   { background: #f5f7fa; }
html.light .chart-modal    { background: var(--card); }
html.light .filter-bar,
html.light .kpi,
html.light .line-section,
html.light .events-panel,
html.light .detail-panel,
html.light .bins-section   { background: var(--card); }
html.light .fchip {
  background: rgba(0,0,0,.04);
  border-color: var(--border);
  color: var(--text-dim);
}
html.light .nav-item:hover,
html.light .nav-item.active { background: rgba(0,120,212,.08); }
html.light .line2-stopped-overlay { color: var(--text-dim); }

/* ── stats.html ─────────────────────────────────────────── */
html.light .chart-panel { background: var(--card); }
html.light #custom-range {
  background: var(--card) !important;
  border-bottom-color: var(--border);
}
html.light #custom-range input {
  background: var(--bg);
}

/* ── gantt.html ─────────────────────────────────────────── */
html.light .gantt-card  { background: var(--card); }
html.light .gantt-axis  { background: var(--bg); }
html.light .gantt-table .st-name { background: var(--card); }

/* ── spc.html ───────────────────────────────────────────── */
html.light .spc-controls { background: var(--card); }

/* ── mesures.html ───────────────────────────────────────── */
html.light .serial-panel,
html.light .serial-header,
html.light .summary-st,
html.light .st-card      { background: var(--card); }

/* ── report.html ────────────────────────────────────────── */
html.light .report-header,
html.light .station-block { background: var(--card); }

/* ── trace.html ─────────────────────────────────────────── */
html.light .params-card,
html.light .chart-card    { background: var(--card); }
html.light .station-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* ── shift.html ─────────────────────────────────────────── */
html.light .shift-header,
html.light .compare-card,
html.light .events-card  { background: var(--card); }
html.light .st-card      { background: var(--card); }

/* ── Shared button styles (period-btn, shift-btn) ────────── */
html.light .period-btn,
html.light .shift-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-dim);
}
html.light .period-btn:hover,
html.light .shift-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── agv.html ───────────────────────────────────────────── */
html.light .hdr {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: var(--border);
}
html.light .nav a       { color: var(--dim); }
html.light .nav a:hover { color: var(--text); background: rgba(0,0,0,.05); }
html.light .nav a.active { color: var(--accent); background: rgba(0,120,212,.08); }
html.light .fc          { background: var(--card); border-color: var(--border); }
html.light .fc-hdr      { background: rgba(0,0,0,.03); border-bottom-color: var(--border); }
html.light .panel       { background: var(--card); border-color: var(--border); }
html.light .ff          { background: var(--bg) !important; }
html.light .prog-track  { background: var(--border); }
html.light .kpi         { background: var(--card); border-color: var(--border); }
html.light .srow        { border-bottom-color: var(--border2); }
html.light .spill.S     { background: rgba(0,0,0,.04); color: var(--dim); }

/* ── agv.html replenishment SVG ─────────────────────────────────────────── */
html.light #binbg-N010, html.light #binbg-N020, html.light #binbg-N030,
html.light #binbg-N040, html.light #binbg-N050, html.light #binbg-N060 {
  fill: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL DESIGN POLISH — applied across all pages
═══════════════════════════════════════════════════════════ */

/* ── Header depth ───────────────────────────────────────── */
.header {
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,.28);
}
html.light .header {
  box-shadow: 0 1px 0 var(--border), 0 2px 10px rgba(0,0,0,.07);
}

/* ── Logo glow ──────────────────────────────────────────── */
.logo {
  box-shadow: 0 0 20px rgba(79,172,254,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
html.light .logo {
  box-shadow: 0 0 16px rgba(0,120,212,.18);
}

/* ── KPI card — inset top accent + elevation ────────────── */
.kpi {
  box-shadow: inset 0 2px 0 var(--accent, #4facfe), 0 2px 10px rgba(0,0,0,.22);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.kpi:hover {
  box-shadow: inset 0 2px 0 var(--accent, #4facfe), 0 6px 20px rgba(0,0,0,.32);
  transform: translateY(-1px);
}
html.light .kpi {
  box-shadow: inset 0 2px 0 var(--accent, #0078d4), 0 1px 4px rgba(0,0,0,.09);
}
html.light .kpi:hover {
  box-shadow: inset 0 2px 0 var(--accent, #0078d4), 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* ── Nav active gradient ────────────────────────────────── */
.nav-item:hover {
  background: linear-gradient(90deg, rgba(79,172,254,.12), rgba(79,172,254,.03)) !important;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(79,172,254,.18), rgba(79,172,254,.05)) !important;
  border-right: 3px solid var(--accent) !important;
}
html.light .nav-item:hover {
  background: linear-gradient(90deg, rgba(0,120,212,.1), transparent) !important;
}
html.light .nav-item.active {
  background: linear-gradient(90deg, rgba(0,120,212,.14), rgba(0,120,212,.04)) !important;
}

/* ── Period / shift buttons ─────────────────────────────── */
.period-btn.active, .shift-btn.active {
  background: linear-gradient(135deg, rgba(79,172,254,.2), rgba(124,58,237,.1)) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(79,172,254,.15) !important;
}

/* ── Scrollbar hover ────────────────────────────────────── */
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* ── Action button base ─────────────────────────────────── */
.action-btn {
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: background .15s, box-shadow .15s;
}
.action-btn:hover {
  box-shadow: 0 2px 8px rgba(79,172,254,.3);
}

/* ── Filter chips ───────────────────────────────────────── */
.fchip {
  transition: all .15s;
}
.fchip.active {
  box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(79,172,254,.2);
}

/* ── Theme toggle button ────────────────────────────────── */
.theme-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
}