/* ============================================================================
   mbproxy admin console — shared theme
   Refined technical-light: warm-neutral paper, hairline rules, IBM Plex type,
   monospace numerics, status carried by colour. Layered over Bootstrap 5 via
   --bs-* variable overrides. Owned by Phase 3; the dashboard and detail views
   add only view-specific rules in dashboard.css / detail.css.
   ========================================================================= */

/* ── Vendored fonts (embedded woff2, no network fetch) ───────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/ibm-plex-mono-500.woff2') format('woff2');
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --paper:        #f4f4f1;
  --card:         #ffffff;
  --ink:          #1b1d21;
  --ink-soft:     #5a6066;
  --ink-faint:    #8b9097;
  --rule:         #e4e4df;
  --rule-strong:  #d2d2cb;

  --accent:       #2f5fd0;
  --accent-deep:  #1e3f99;

  --ok:           #2f9e44;
  --warn:         #e8920c;
  --bad:          #e03131;
  --idle:         #868e96;

  --ok-bg:        #e9f6ec;
  --warn-bg:      #fdf1dd;
  --bad-bg:       #fceaea;
  --idle-bg:      #eef0f2;

  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg:          var(--paper);
  --bs-body-color:       var(--ink);
  --bs-body-font-family: var(--sans);
  --bs-body-font-size:   0.9rem;
  --bs-primary:          var(--accent);
  --bs-border-color:     var(--rule);
  --bs-emphasis-color:   var(--ink);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(1200px 480px at 88% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.numeric,
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ── App chrome: top bar ─────────────────────────────────────────────────── */
.app-bar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--rule-strong);
}
.app-bar .brand {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.app-bar .brand .mark { color: var(--accent); }
.app-bar .crumb { color: var(--ink-faint); font-size: 0.85rem; }
.app-bar .spacer { flex: 1; }
.app-bar .meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ── Connection-state pill (SignalR link health) ─────────────────────────── */
.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  background: var(--card);
}
.conn-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--idle);
}
.conn-pill[data-state="connected"]    { color: var(--ok);  border-color: #bfe3c6; background: var(--ok-bg); }
.conn-pill[data-state="connected"] .dot { background: var(--ok); }
.conn-pill[data-state="connecting"]   { color: var(--warn); border-color: #f0d9ab; background: var(--warn-bg); }
.conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.conn-pill[data-state="disconnected"] { color: var(--bad); border-color: #f0c0c0; background: var(--bad-bg); }
.conn-pill[data-state="disconnected"] .dot { background: var(--bad); }

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

/* ── Status text helpers ─────────────────────────────────────────────────── */
.s-ok   { color: var(--ok); }
.s-warn { color: var(--warn); }
.s-bad  { color: var(--bad); }
.s-idle { color: var(--idle); }

/* State chip — used for listener state and health badges */
.chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.chip-ok   { color: var(--ok);   background: var(--ok-bg);   border-color: #c6e6cd; }
.chip-warn { color: #b56a00;     background: var(--warn-bg); border-color: #efd6a6; }
.chip-bad  { color: var(--bad);  background: var(--bad-bg);  border-color: #eec3c3; }
.chip-idle { color: var(--ink-soft); background: var(--idle-bg); border-color: var(--rule-strong); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.panel-head {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}

/* Generic page padding */
.page { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }

/* Staggered panel reveal on first paint */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.4s ease both; }
