/* ─────────────────────────────────────────────────────────────────────────
   ops.css — Sideline's internal portal.

   FIXED, NEUTRAL, AND NOTHING LIKE THE TENANT APP. It reads none of the
   school colour tokens on purpose: an internal tool wearing a customer's
   branding is a tool that lets you forget whose data is on the screen.
   ───────────────────────────────────────────────────────────────────────── */

.ops-body {
  --ops-bg:    #14161a;
  --ops-panel: #1c2027;
  --ops-line:  #2c323c;
  --ops-ink:   #e7eaef;
  --ops-soft:  #97a0ae;
  --ops-hot:   #ffb020;

  background: var(--ops-bg); color: var(--ops-ink); min-height: 100vh;
}

.ops-bar {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: #0f1114; border-bottom: 1px solid var(--ops-line);
}
.ops-brand { font-weight: 800; letter-spacing: -0.01em; color: var(--ops-ink); text-decoration: none; }
.ops-brand span { color: var(--ops-hot); }
.ops-nav { display: flex; gap: var(--space-4); margin-right: auto; }
.ops-nav-item { color: var(--ops-soft); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.ops-nav-item.is-on, .ops-nav-item:hover { color: var(--ops-ink); }
.ops-me { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); color: var(--ops-soft); }
.ops-me button {
  appearance: none; cursor: pointer; font: inherit;
  background: transparent; border: 1px solid var(--ops-line); color: var(--ops-soft);
  border-radius: var(--radius-sm); padding: 4px var(--space-3);
}
.ops-me button:hover { color: var(--ops-ink); border-color: var(--ops-soft); }

.ops-main { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
.ops-main h1 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }

/* The shared components render on the dark ground without being restyled
   individually — one override per surface, not per element. */
.ops-body .panel, .ops-body .card, .ops-body .table-scroll, .ops-body .kpi {
  background: var(--ops-panel); border-color: var(--ops-line); color: var(--ops-ink);
}
.ops-body .data-table td { border-bottom-color: var(--ops-line); }
.ops-body .data-table thead th { color: var(--ops-soft); border-bottom-color: var(--ops-line); }
.ops-body .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.ops-body .data-table tbody tr:hover, .ops-body .data-table tbody tr:nth-child(even):hover { background: rgba(255,255,255,.05); }
.ops-body .data-table tbody .col-primary .table-link { color: var(--ops-ink); }
.ops-body .row-note, .ops-body .kpi-label, .ops-body .panel-empty { color: var(--ops-soft); }
.ops-body .form-input, .ops-body .form-select {
  background: #10131a; border-color: var(--ops-line); color: var(--ops-ink);
}
.ops-body .tab { color: var(--ops-soft); }
.ops-body .tab.is-active { color: var(--ops-ink); border-bottom-color: var(--ops-hot); }
.ops-body a { color: var(--ops-hot); }
.ops-body .join-code { background: #10131a; color: var(--ops-hot); }
.ops-body .danger-zone { background: rgba(255,255,255,.03); border-color: var(--ops-line); }

.ops-login {
  max-width: 360px; margin: 12vh auto; padding: var(--space-6);
  background: var(--ops-panel); border: 1px solid var(--ops-line); border-radius: var(--radius-lg);
}
.ops-login h1 { text-align: center; margin-bottom: var(--space-5); font-weight: 800; }
.ops-login h1 span { color: var(--ops-hot); }
.ops-login .btn { width: 100%; }

/* Non-production credential hint. Deliberately plain and slightly ugly: it is
   scaffolding, and it should not look like part of the product. */
.ops-creds {
  margin-top: var(--space-5); padding: var(--space-3);
  border: 1px dashed var(--ops-line); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--ops-soft); line-height: 1.7;
}
.ops-creds strong { display: block; color: var(--ops-hot); text-transform: uppercase; letter-spacing: .08em; }
.ops-creds code { color: var(--ops-ink); font-family: var(--font-mono, ui-monospace, monospace); }
.ops-creds p { margin: var(--space-2) 0 0; opacity: .7; }

/* ── Messaging ────────────────────────────────────────────────────────────────
   Delivery outcomes. flag-ok / flag-warn come from roster.css; the "it did not
   arrive" case had no class because until now nothing could report one. */
.flag-bad { background: var(--st-danger-bg); color: var(--st-danger-fg); }

.ops-tiles { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
.ops-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 96px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.03); border: 1px solid var(--ops-line);
  border-radius: var(--radius-sm);
}
.ops-tile-n { font-size: var(--fs-xl); font-weight: 800; color: var(--ops-ink); }
.ops-tile-k { font-size: var(--fs-xs); color: var(--ops-soft); text-transform: uppercase; letter-spacing: .06em; }

/* Which sender the platform is actually using — the first thing to check when
   carriers start dropping traffic. */
.ops-sender { font-size: var(--fs-xs); color: var(--ops-soft); }
.ops-tz { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ops-soft); }