/* ==========================================================================
   Monkey Theme — shared design system for SuperAngryMonkey projects

   This is a copy of /Users/jamessmith/Projects/.shared/monkey-theme.css
   for serving by Flask. DO NOT EDIT HERE — edit the canonical source and
   re-copy.
   ========================================================================== */


/* --- Design tokens: change these to reskin everything ---------------------- */

:root {
  /* Backgrounds — 4 dark steps, darkest to slightly-lighter */
  --c1: #0a0a0f;   /* page background */
  --c2: #0f0f1a;   /* panel background */
  --c3: #14141f;   /* inset / row background */
  --c4: #1a1a2e;   /* hover / highlight */

  /* Accents — cyan (primary), orange (warn/secondary), green (ok/tertiary) */
  --acc:  #00d4ff;
  --acc2: #ff6b35;
  --acc3: #00ff88;
  --danger: #ff3366;

  /* Text — three shades of muted grey-lavender */
  --txt:  #e8e8f0;  /* primary */
  --txt2: #8888aa;  /* secondary / labels */
  --txt3: #4444aa;  /* tertiary / inactive */

  /* Typography */
  --fmono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fdisplay: 'Bebas Neue', sans-serif;

  /* Lines */
  --border: 1px solid rgba(0, 212, 255, 0.12);
  --border-strong: 1px solid rgba(0, 212, 255, 0.2);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
}


/* --- Reset & base --------------------------------------------------------- */

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

html, body {
  height: 100%;
  background: var(--c1);
  color: var(--txt);
  font-family: var(--fmono);
  font-size: 12px;
}

body {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}


/* --- Header --------------------------------------------------------------- */

.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: var(--border-strong);
}

.hdr-left  { display: flex; align-items: baseline; gap: 16px; }
.hdr-right { display: flex; align-items: center;  gap: 20px; }

.logo {
  font-family: var(--fdisplay);
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--acc);
  line-height: 1;
  text-decoration: none;
}

.subtitle {
  font-size: 10px;
  color: var(--txt2);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.clock {
  font-size: 16px;
  color: var(--txt2);
  letter-spacing: 2px;
}


/* --- Status indicator (pulsing dot + label) ------------------------------- */

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc3);
  box-shadow: 0 0 8px var(--acc3);
  animation: pulse 2s infinite;
}

.status-dot.warn { background: var(--acc2); box-shadow: 0 0 8px var(--acc2); }
.status-dot.err  { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

.status-txt {
  font-size: 10px;
  color: var(--acc3);
  letter-spacing: 1px;
}

.status-txt.warn { color: var(--acc2); }
.status-txt.err  { color: var(--danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* --- Navigation tabs ------------------------------------------------------ */

.nav {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: var(--border-subtle);
}

.nav a {
  padding: 10px 18px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.nav a:hover { color: var(--txt); }
.nav a.active {
  color: var(--acc);
  border-bottom-color: var(--acc);
}


/* --- Metric cards --------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.metric {
  background: var(--c2);
  border: var(--border);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.metric.blue::before   { background: var(--acc);    }
.metric.orange::before { background: var(--acc2);   }
.metric.green::before  { background: var(--acc3);   }
.metric.red::before    { background: var(--danger); }

.metric-label {
  font-size: 9px;
  color: var(--txt2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-val {
  font-family: var(--fdisplay);
  font-size: 36px;
  letter-spacing: 2px;
  line-height: 1;
}

.metric.blue   .metric-val { color: var(--acc);    }
.metric.orange .metric-val { color: var(--acc2);   }
.metric.green  .metric-val { color: var(--acc3);   }
.metric.red    .metric-val { color: var(--danger); }

.metric-sub {
  font-size: 9px;
  color: var(--txt3);
  margin-top: 4px;
}

/* Stale state — overrides colored value with muted to make clear the
   reading is from a previous engine cycle, not live data. */
.metric.stale .metric-val { color: var(--txt3); }
.metric.stale::before     { background: var(--txt3); opacity: 0.5; }

.stale-tag {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--acc2);
  border: 1px solid var(--acc2);
  padding: 1px 5px;
  text-transform: uppercase;
}


/* --- Vitals strip (compact secondary metrics under hero cards) ----------- */

.vitals {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.vital {
  background: var(--c2);
  border: var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vital-label {
  font-size: 8px;
  color: var(--txt2);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vital-val {
  font-family: var(--fdisplay);
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--acc);
}

.vital-unit {
  font-family: var(--fmono);
  font-size: 9px;
  color: var(--txt3);
  letter-spacing: 0;
  margin-left: 4px;
}

.vital.stale .vital-val {
  color: var(--txt3);
}


/* --- Panels (generic content container) ----------------------------------- */

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.panel {
  background: var(--c2);
  border: var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.panel-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: var(--border-subtle);
}

.panel-title {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--txt2);
}

.panel-badge {
  font-size: 9px;
  padding: 2px 8px;
  border: 1px solid;
  letter-spacing: 1px;
}

.panel-badge.live { color: var(--acc3);  border-color: var(--acc3);  }
.panel-badge.warn { color: var(--acc2);  border-color: var(--acc2);  }
.panel-badge.err  { color: var(--danger); border-color: var(--danger); }


/* --- Data tables ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt2);
  padding: 8px 12px;
  border-bottom: var(--border-subtle);
  font-weight: 500;
}

td {
  padding: 8px 12px;
  border-bottom: var(--border-subtle);
  color: var(--txt);
}

tr:hover td { background: var(--c3); }

td a { color: var(--acc); text-decoration: none; }
td a:hover { text-decoration: underline; }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.muted { color: var(--txt3); }
td.warn  { color: var(--acc2); }
td.err   { color: var(--danger); }
td.ok    { color: var(--acc3); }


/* --- Key/value info strip ------------------------------------------------- */

.fg {
  background: var(--c2);
  border: var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.fg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.fg-item { display: flex; flex-direction: column; gap: 2px; }

.fg-key {
  font-size: 9px;
  color: var(--txt3);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fg-val { font-size: 13px; color: var(--txt); }
.fg-val.acc { color: var(--acc); }


/* --- Buttons -------------------------------------------------------------- */

.btn {
  background: transparent;
  border: 1px solid var(--acc);
  color: var(--acc);
  font-family: var(--fmono);
  font-size: 10px;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.2s;
}
.btn:hover { background: rgba(0, 212, 255, 0.1); }

.btn.warn   { border-color: var(--acc2);   color: var(--acc2);   }
.btn.warn:hover { background: rgba(255, 107, 53, 0.1); }

.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: rgba(255, 51, 102, 0.1); }


/* --- DTC severity tags ---------------------------------------------------- */

.dtc-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid;
}

.dtc-tag.critical { color: var(--danger); border-color: var(--danger); }
.dtc-tag.warn     { color: var(--acc2);   border-color: var(--acc2);   }
.dtc-tag.info     { color: var(--txt2);   border-color: var(--txt2);   }

.dtc-tag.active    { color: var(--danger); border-color: var(--danger); }
.dtc-tag.pending   { color: var(--acc2);   border-color: var(--acc2);   }
.dtc-tag.permanent { color: var(--acc);    border-color: var(--acc);    }


/* --- Empty state --------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--txt3);
  font-size: 11px;
  letter-spacing: 2px;
}


/* --- Charts --------------------------------------------------------------- */

.chart-wrap {
  position: relative;
  height: 240px;
  margin-top: 10px;
}
.chart-wrap.tall { height: 360px; }


/* --- Footer --------------------------------------------------------------- */

.footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: var(--border-subtle);
  font-size: 9px;
  color: var(--txt3);
  text-align: center;
  letter-spacing: 1px;
}

.footer .epigraph {
  font-style: italic;
  margin-bottom: 4px;
  letter-spacing: 0;
}


/* --- Responsive: collapse grids on narrow viewports ----------------------- */

@media (max-width: 1100px) {
  .vitals { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .grid2   { grid-template-columns: 1fr; }
  .fg-grid { grid-template-columns: repeat(3, 1fr); }
  .vitals  { grid-template-columns: repeat(2, 1fr); }
}