/* ===== CSS Custom Properties ===== */
:root {
  --bg:           #f4f5f7;
  --surface:      #ffffff;
  --surface-alt:  #f0f0f0;
  --navy:         #1a1a2e;
  --navy-hover:   #2a2a4e;
  --text:         #1a1a2e;
  --text-sub:     #333;
  --text-muted:   #555;
  --text-faint:   #888;
  --border:       #ccc;
  --border-light: #eee;
  --border-mid:   #ddd;
  --row-hover:    #f0f4ff;
  --row-selected: #e8edff;
  --btn-hover-bg: #e8edff;
  --shadow-sm:    rgba(0,0,0,0.06);
  --shadow-md:    rgba(0,0,0,0.08);
  --shadow-lg:    rgba(0,0,0,0.18);
  --overlay:      rgba(0,0,0,0.4);
  --navbar-bg:    #1a1a2e;
  --navbar-brand: #e0e0e0;
  --navbar-link:  #a0a8b8;

  --tab-width:    80vw;

  --type-active:       #059669;
  --type-idle:         #2e6fa8;
  --type-offline:      #dc2626;
  --type-disconnected: #d97706;
  --type-unknown:      #6b7280;

  /* Semantic state colors */
  --danger:        #842029;
  --danger-bg:     #f8d7da;
  --danger-border: #f5c2c7;
  --success:       #1e6f35;
  --success-bg:    #d4edda;
  --warning:       #856404;
  --warning-bg:    #fff3cd;

  /* Session row / badge */
  --session-open-bg:      #dbeafe;
  --session-open-row-bg:  #eff8ff;
  --session-open-color:   #1d4ed8;
  --session-open-border:  #3b82f6;
  --session-closed-bg:    #f1f5f9;
  --session-closed-color: #64748b;

  /* Badge semantic */
  --badge-info-bg:      #cfe2ff;
  --badge-info-color:   #0a3880;
  --badge-purple-bg:    #e2d9f3;
  --badge-purple-color: #432874;

  /* Chart tooltip — always dark bg, no dark-mode override needed */
  --tooltip-bg:   #1a1f2e;
  --tooltip-text: #d0d4df;

  /* Chart tooltip text colors */
  --tt-teal:   #4caf90;
  --tt-blue:   #6ea8fe;
  --tt-steel:  #5b9fd4;
  --tt-amber:  #f59e0b;
  --tt-red:    #ef4444;
  --tt-time:   #e0e4ef;
  --tt-muted:  #9aa0b4;
}

[data-theme="dark"] {
  --bg:           #0f0f1a;
  --surface:      #1a1a2e;
  --surface-alt:  #252540;
  --navy:         #7b8cde;
  --navy-hover:   #9aaae8;
  --text:         #e0e0f0;
  --text-sub:     #c0c0d8;
  --text-muted:   #a0a8b8;
  --text-faint:   #6a7080;
  --border:       #2e2e48;
  --border-light: #252540;
  --border-mid:   #2a2a44;
  --row-hover:    #1e1e38;
  --row-selected: #222240;
  --btn-hover-bg: #222240;
  --shadow-sm:    rgba(0,0,0,0.2);
  --shadow-md:    rgba(0,0,0,0.3);
  --shadow-lg:    rgba(0,0,0,0.5);
  --overlay:      rgba(0,0,0,0.6);
  --navbar-bg:    #0a0a14;
  --navbar-brand: #c0c0d8;
  --navbar-link:  #7080a0;

  --type-active:       #6ee7b7;
  --type-idle:         #93c5fd;
  --type-offline:      #f87171;
  --type-disconnected: #fcd34d;
  --type-unknown:      #9ca3af;

  --danger:        #f87171;
  --danger-bg:     rgba(248,113,113,0.15);
  --danger-border: rgba(248,113,113,0.3);
  --success:       #4ade80;
  --success-bg:    rgba(74,222,128,0.15);
  --warning:       #fbbf24;
  --warning-bg:    rgba(251,191,36,0.15);

  --session-open-bg:      #1e3a5f;
  --session-open-row-bg:  #1a2840;
  --session-open-color:   #93c5fd;
  --session-open-border:  #60a5fa;
  --session-closed-bg:    #1e293b;
  --session-closed-color: #94a3b8;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Constrain tab content to a shared width so all tables are consistent */
#tab-bom,
#tab-library,
#tab-workers,
#tab-quality,
#tab-system,
#tab-users,
#tab-account,
#tab-quote {
  max-width: var(--tab-width);
  margin: 0 auto;
}

#tab-production {
  max-width: var(--tab-width);
  margin: 0 auto;
}

/* Home */
.home-hero {
  text-align: center;
  padding: 5rem 1rem;
}

.home-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.home-hero p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.hidden {
  display: none !important;
}