/* ============================================================
   Scrubber Mill Wear Monitoring — Dashboard Styles
   Design: "Foundry Control" Brutalist Industrial
   Fonts: JetBrains Mono (numerics), IBM Plex Sans (labels)
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: #111318;
  color: #E8E9EC;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: #06B6D4; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* --- Tokens --- */
:root {
  --bg:         #111318;
  --surface:    #1C1F26;
  --elevated:   #242830;
  --border:     #2E323C;
  --border-sub: #22252D;
  --text:       #E8E9EC;
  --text-muted: #6B7280;
  --text-dim:   #4B5060;
  --cyan:       #06B6D4;
  --ok:         #22C55E;
  --warn:       #F59E0B;
  --crit:       #EF4444;
  --offline:    #64748B;
  --font-mono:  'JetBrains Mono', monospace;
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
}

/* --- Container --- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* --- Header --- */
.header {
  border-bottom: 1px solid var(--border);
  background: #161920;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 48px;
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-brand svg { color: var(--cyan); }
.header-brand h1 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-user {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-logout:hover { border-color: var(--crit); color: var(--crit); }

/* --- Status Bar --- */
.status-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.75rem;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.status-item .count { font-family: var(--font-mono); font-weight: 700; }
.status-item .label { color: var(--text-muted); }
.status-ok .count { color: var(--ok); }
.status-warn .count { color: var(--warn); }
.status-crit .count { color: var(--crit); }
.status-off .count { color: var(--offline); }

.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse-live 2s ease-in-out infinite;
}
.live-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* --- Scrubber Tabs --- */
.tabs-bar {
  border-bottom: 1px solid var(--border-sub);
  background: var(--bg);
  display: flex;
  height: 40px;
}
.tab-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0 1.25rem;
  height: 100%;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tab-btn:hover { color: #A0A4AE; background: rgba(28,31,38,0.4); }
.tab-btn.active { color: var(--text); background: var(--surface); }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cyan);
}
.tab-alert-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crit);
  animation: pulse-crit 1s ease-in-out infinite;
}

/* --- Section Title --- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.75rem;
}
.section-title h2 { font-size: 1.125rem; font-weight: 600; }
.section-title .meta {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* --- Mill Schematic --- */
.schematic-wrap {
  border: 1px solid var(--border-sub);
  background: #161920;
  overflow: hidden;
}
.schematic-wrap svg { display: block; width: 100%; height: auto; max-height: 380px; }

/* Sensor dots on schematic */
.sensor-dot { cursor: pointer; }
.sensor-dot circle.glow { transition: r 0.2s, opacity 0.2s; }
.sensor-dot circle.core { transition: r 0.2s; }
.sensor-dot:hover circle.glow { opacity: 0.25; }
.sensor-dot:hover circle.core { r: 7; }
.sensor-dot text { pointer-events: none; transition: fill 0.2s; }
.sensor-dot:hover text { fill: var(--text) !important; }

/* --- Tooltip --- */
.tooltip {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  white-space: nowrap;
  transform: translate(-50%, -110%);
  opacity: 0;
  transition: opacity 0.15s;
}
.tooltip.visible { opacity: 1; }
.tooltip-name { font-family: var(--font-mono); font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.tooltip-metrics { display: flex; gap: 1rem; color: var(--text-muted); }
.tooltip-metrics span.val { color: var(--text); font-family: var(--font-mono); }
.tooltip-time { font-size: 0.6rem; color: var(--text-dim); margin-top: 0.2rem; }

/* --- Data Table --- */
.table-wrap {
  border: 1px solid var(--border-sub);
  background: #161920;
  margin-top: 1rem;
}
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-sub);
}
.table-header span {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.table-scroll { overflow-x: auto; }
table.sensor-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.75rem;
}
table.sensor-table thead th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
table.sensor-table thead th.r { text-align: right; }
table.sensor-table tbody tr {
  border-bottom: 1px solid var(--border-sub);
  cursor: pointer;
  transition: background 0.1s;
}
table.sensor-table tbody tr:hover { background: rgba(28,31,38,0.5); }
table.sensor-table tbody tr.highlighted { background: rgba(6,182,212,0.06); border-color: rgba(6,182,212,0.15); }
table.sensor-table tbody tr.expanded { background: var(--surface); border-color: var(--border); }
table.sensor-table td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}
table.sensor-table td.r { text-align: right; }
table.sensor-table td.mono { font-family: var(--font-mono); }
table.sensor-table td.bold { font-weight: 600; }

/* Status dot in table */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.dot-ok    { background: var(--ok);      box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.dot-warn  { background: var(--warn);    box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.dot-crit  { background: var(--crit);    box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.dot-off   { background: var(--offline); box-shadow: 0 0 6px rgba(100,116,139,0.3); }

/* Health badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.badge-ok   { color: var(--ok);   background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.2); }
.badge-warn { color: var(--warn); background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); }
.badge-crit { color: var(--crit); background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.2); }
.badge-off  { color: var(--offline); background: rgba(100,116,139,0.08); border: 1px solid rgba(100,116,139,0.2); }

/* Color classes for numeric values */
.c-cyan { color: var(--cyan); }
.c-ok   { color: var(--ok); }
.c-warn { color: var(--warn); }
.c-crit { color: var(--crit); }
.c-off  { color: var(--offline); }
.c-dim  { color: var(--text-dim); }
.c-mut  { color: var(--text-muted); }

/* --- Expanded Row (Diagnostics) --- */
.expand-row { display: none; }
.expand-row.open { display: table-row; }
.expand-content {
  background: #161920;
  padding: 1rem 1.5rem;
}
.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem 1.5rem;
}
.diag-cell .diag-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
}
.diag-cell .diag-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.diag-cell .diag-value.fail { color: var(--crit); }

/* --- Sparkline --- */
.sparkline { display: inline-block; vertical-align: middle; }

/* --- Sensor Detail Page --- */
.detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}
.btn-back {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.15s;
}
.btn-back:hover { color: var(--cyan); }
.detail-title { font-size: 0.875rem; font-weight: 600; }
.detail-label { font-size: 0.75rem; color: var(--text-muted); }
.detail-badge { margin-left: auto; }

/* Metric cards */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border-sub);
  padding: 0.75rem;
}
.metric-card .mc-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}
.metric-card .mc-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.metric-card .mc-value.accent { color: var(--cyan); }
.metric-card .mc-unit {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-left: 0.2rem;
}

/* Chart section */
.chart-section {
  border: 1px solid var(--border-sub);
  background: #161920;
  padding: 1rem;
  margin-bottom: 1rem;
}
.chart-section h3 {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.chart-canvas-wrap { position: relative; height: 220px; }

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border-sub);
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.footer p {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.footer .date { font-family: var(--font-mono); }

/* --- Animations --- */
@keyframes pulse-ok {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
@keyframes pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}
@keyframes pulse-crit {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.anim-ok   { animation: pulse-ok 2.5s ease-in-out infinite; }
.anim-warn { animation: pulse-warn 1.8s ease-in-out infinite; }
.anim-crit { animation: pulse-crit 1s ease-in-out infinite; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .status-bar { display: none; }
  .section-title .meta { display: none; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .diag-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Loading / No data --- */
.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 0.75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }