/* ============================================================
   Seido Operations — Design System
   ============================================================
   Aesthetic: dark ops-center / command-deck.
   Typography pair: Bricolage Grotesque (display) + IBM Plex Sans
   (body) + IBM Plex Mono (data). Distinctive, technical, calm.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Palette */
  --bg-0: #0a0c10;          /* page */
  --bg-1: #11141a;          /* surface */
  --bg-2: #181c25;          /* raised */
  --bg-3: #1f2532;          /* hover */
  --bg-input: #0f1218;
  --border: #1a2438;
  --border-strong: #1e3a58;
  --text: #e8eaf0;
  --text-dim: #5aafd4;
  --text-muted: #3a7ea8;

  /* Accent — Seido electric blue */
  --accent: #1e72e4;
  --accent-soft: #1e72e415;
  --accent-strong: #4da8ff;

  /* Status — must be vivid, glanceable */
  --status-green: #4ade80;
  --status-yellow: #facc15;
  --status-red: #f87171;
  --status-blue: #60a5fa;

  /* Glow halos for status lights */
  --glow-green: #4ade8055;
  --glow-yellow: #facc1555;
  --glow-red: #f8717155;
  --glow-blue: #60a5fa55;

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing rhythm */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px;
  --r-6: 32px; --r-7: 48px; --r-8: 64px;

  /* Radii — zero curve, angular like the Seido triangle */
  --rad-1: 0px; --rad-2: 0px; --rad-3: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* iOS Safari and Android Chrome auto-inflate text on pages they judge to be
     narrow, which makes the dashboard look zoomed in at inconsistent sizes per
     device. Pinning this to 100% keeps type at the size it was designed at.
     (Actual browser zoom stays the user's control — a page can't and shouldn't
     override it.) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Subtle background grid — adds atmosphere, doesn't compete */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 80%);
}

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

button { font-family: inherit; }

/* ============================================================
   Layout shell — sidebar + main
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: var(--r-5) var(--r-3);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; justify-content: center;
  padding: var(--r-3) var(--r-3) var(--r-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--r-4);
}
.brand-logo {
  width: 100%; max-width: 160px; display: block;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-mark::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--accent);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav a {
  display: flex; align-items: center; gap: var(--r-3);
  padding: var(--r-3);
  border-radius: 0;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  border-left: 3px solid transparent;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.nav a:hover {
  background: var(--bg-2);
  color: var(--text);
}
/* Horizontal flare spreading edge-to-edge on hover/active */
.nav a::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 100% 70% at 50% 100%,
    rgba(120, 205, 255, 0.55) 0%,
    rgba(60,  160, 255, 0.3)  40%,
    transparent               75%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.nav a:hover::after { opacity: 1; }
.nav a.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-left-color: var(--accent);
}
.nav a.active::after  { opacity: 1; }
.nav a .nav-icon {
  width: 18px; height: 18px;
  opacity: 0.85;
  flex-shrink: 0;
}
.nav-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--r-4) var(--r-3) var(--r-2);
}

.sidebar-footer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: var(--r-3);
  border-top: 1px solid var(--border);
  margin-top: var(--r-4);
}
.sidebar-footer .pulse {
  color: var(--status-green);
}
.sidebar-footer .pulse::before {
  content: '●';
  display: inline-block;
  margin-right: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.main {
  padding: var(--r-6) var(--r-7);
  max-width: 1600px;
}
@media (max-width: 1100px) {
  .main { padding: var(--r-5); }
}

/* ============================================================
   Page header
   ============================================================ */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--r-5);
  margin-bottom: var(--r-6);
  padding-bottom: var(--r-4);
  border-bottom: 1px solid var(--border);
}
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
.page-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.page-head-actions { display: flex; gap: var(--r-3); flex-wrap: wrap; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--rad-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 120ms;
}
.btn:hover { background: var(--bg-3); border-color: var(--accent); }
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
.btn-danger:hover {
  border-color: var(--status-red);
  color: var(--status-red);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon {
  padding: 6px;
  width: 30px; height: 30px;
  justify-content: center;
}

/* ============================================================
   KPI cards (dashboard hero stats)
   ============================================================ */
/* Tiles reflow to fit whatever width is available instead of being pinned to a
   fixed column count. auto-fit collapses any track it can't fill, so a 4-tile
   grid still renders 4 across and a 5-tile grid 5 across on a wide screen —
   but as the window (or a phone) narrows they wrap to 3, 2, then 1 per row
   rather than being crushed until the numbers break apart mid-digit. This
   replaces a single hard 1100px breakpoint that jumped straight to 2 columns
   and, more importantly, was being overridden entirely by inline
   grid-template-columns on the pilot dashboard. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--r-4);
  margin-bottom: var(--r-6);
}

.kpi {
  background: linear-gradient(135deg, #1f2c3f 0%, #141d2c 48%, #0c1420 100%);
  border: 1px solid rgba(80, 130, 195, 0.22);
  border-top: 1px solid rgba(155, 200, 240, 0.32);
  border-left: 1px solid rgba(130, 180, 225, 0.26);
  border-radius: 0;
  padding: var(--r-4) var(--r-5);
  position: relative;
  overflow: hidden;
  min-width: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 200ms, box-shadow 400ms;
}
.kpi::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom left,
    rgba(160, 210, 250, 0.07) 0%,
    rgba(0, 0, 0, 0.15)       100%
  );
  pointer-events: none;
  z-index: 0;
}
.kpi::after {
  content: '';
  position: absolute;
  top: 75%; left: 50%;
  width: 600px; height: 400px;
  margin: -200px 0 0 -300px;
  background:
    /* Center node */
    radial-gradient(circle 55px at 50% 60%,
      rgba(220, 242, 255, 0.18) 0%,
      rgba(130, 205, 255, 0.12) 50%,
      transparent                100%
    ),
    /* Horizontal arm */
    radial-gradient(ellipse 95% 18% at 50% 60%,
      rgba(170, 225, 255, 0.15) 0%,
      rgba(80,  175, 255, 0.09) 45%,
      transparent                80%
    ),
    /* Vertical arm */
    radial-gradient(ellipse 10% 90% at 50% 60%,
      rgba(200, 235, 255, 0.11) 0%,
      rgba(80,  170, 255, 0.05) 50%,
      transparent                80%
    );
  pointer-events: none;
  z-index: 1;
  transform: scale(0);
  opacity: 0;
  transition: transform 350ms ease, opacity 350ms ease;
}
.kpi > * { position: relative; z-index: 2; }
.kpi:hover {
  border-color: rgba(80, 130, 195, 0.55);
  border-top-color: rgba(155, 200, 240, 0.65);
  box-shadow: 0 0 18px rgba(80, 160, 240, 0.12), 0 0 4px rgba(80, 160, 240, 0.08);
}
.kpi:hover::after {
  transform: scale(0);
  opacity: 0;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--r-2);
}
.kpi-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  /* Keep figures intact. break-word let a squeezed tile shatter "$1,408" into
     a vertical column of single characters; a currency figure has no sane
     break point, so it must stay whole and let the grid above find it room. */
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0;
}
.kpi-projected {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: var(--r-3);
}
.kpi-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-top: var(--r-2);
  display: flex; gap: var(--r-3); flex-wrap: wrap;
}
.kpi-sub-item .label {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 4px;
}

/* Asset-type breakdown row inside KPI cards */
.kpi-asset-row {
  display: grid;
  /* Was a fixed 1fr 1fr. The breakdown now emits a variable number of tiles
     (one per contract+subtype flown), so the row has to flow — and this also
     stops the tiles being crushed side-by-side on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--r-2);
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px solid var(--border);
}
.kpi-asset {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.kpi-asset-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
/* Contract that a tile's assets belong to. Deliberately dimmer and smaller
   than the subtype label — it disambiguates during a contract changeover
   (two contracts running the same subtype) without competing for attention. */
.kpi-asset-contract {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-asset-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.kpi-asset-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
}

/* Asset-type chips (tower / pole authorization) */
.chip.chip-tower {
  background: rgba(91, 192, 235, 0.15);
  color: var(--status-blue);
  border: 1px solid var(--status-blue);
}
.chip.chip-pole {
  background: rgba(76, 217, 100, 0.15);
  color: var(--status-green);
  border: 1px solid var(--status-green);
}

/* ============================================================
   Section header
   ============================================================ */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--r-7) 0 var(--r-4);
  gap: var(--r-4);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
}
.section-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   Card grid (pilot cards, drone cards, kit cards, etc.)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--r-4);
}

.card {
  background: linear-gradient(135deg, #1f2c3f 0%, #141d2c 48%, #0c1420 100%);
  border: 1px solid rgba(80, 130, 195, 0.22);
  border-top: 1px solid rgba(155, 200, 240, 0.32);
  border-left: 1px solid rgba(130, 180, 225, 0.26);
  border-radius: 0;
  padding: var(--r-4);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 200ms, filter 400ms ease;
}
/* Soft corner-to-corner depth shading — lit upper face, shadowed lower face */
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom left,
    rgba(160, 210, 250, 0.07) 0%,
    rgba(0, 0, 0, 0.15)       100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Sunrise flare — horizontal line spreads edge-to-edge, thin vertical spike rises up */
.card::after {
  content: '';
  position: absolute;
  top: 75%; left: 50%;
  width: 600px; height: 500px;
  margin: -250px 0 0 -300px;
  background:
    /* Center node */
    radial-gradient(circle 55px at 50% 60%,
      rgba(220, 242, 255, 0.18) 0%,
      rgba(130, 205, 255, 0.12) 50%,
      transparent                100%
    ),
    /* Horizontal arm */
    radial-gradient(ellipse 95% 18% at 50% 60%,
      rgba(170, 225, 255, 0.15) 0%,
      rgba(80,  175, 255, 0.09) 45%,
      transparent                80%
    ),
    /* Vertical arm */
    radial-gradient(ellipse 10% 90% at 50% 60%,
      rgba(200, 235, 255, 0.11) 0%,
      rgba(80,  170, 255, 0.05) 50%,
      transparent                80%
    );
  pointer-events: none;
  z-index: 1;
  transform: scale(0);
  opacity: 0;
  transition: transform 350ms ease, opacity 350ms ease;
}
.card > * { position: relative; z-index: 2; }
/* Hover — subtle overall card glow, no internal radial */
.card:hover {
  border-color: rgba(80, 130, 195, 0.55);
  border-top-color: rgba(155, 200, 240, 0.65);
  box-shadow: 0 0 18px rgba(80, 160, 240, 0.12), 0 0 4px rgba(80, 160, 240, 0.08);
}
.card:hover::after {
  transform: scale(0);
  opacity: 0;
}

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--r-3);
  margin-bottom: var(--r-3);
  /* Wrap so a card's right-hand block (big payout figure, status badge) drops
     below the title on a phone instead of being squeezed against it. Only
     engages when the row genuinely won't fit — desktop layout is unchanged. */
  flex-wrap: wrap;
}
/* Left content shrinks; status badge never does */
.card-head > div:first-child { min-width: 0; flex: 1; }
.card-head .status { flex-shrink: 0; }
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
}
.card-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.card-body { display: flex; flex-direction: column; gap: var(--r-3); }
.card-actions {
  display: flex; gap: var(--r-2);
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px solid var(--border);
}

/* ============================================================
   Status lights
   ============================================================ */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-green  { background: var(--status-green);  box-shadow: 0 0 8px var(--glow-green),  0 0 16px var(--glow-green); }
.dot-yellow { background: var(--status-yellow); box-shadow: 0 0 8px var(--glow-yellow), 0 0 16px var(--glow-yellow); }
.dot-red    { background: var(--status-red);    box-shadow: 0 0 8px var(--glow-red),    0 0 16px var(--glow-red); }
.dot-blue   { background: var(--status-blue);   box-shadow: 0 0 8px var(--glow-blue),   0 0 16px var(--glow-blue); }
.dot-off    { background: var(--bg-3); border: 1px solid var(--border); box-shadow: none; }

.status.green  { color: var(--status-green); }
.status.yellow { color: var(--status-yellow); }
.status.red    { color: var(--status-red); }
.status.blue   { color: var(--status-blue); }

/* ============================================================
   Stat rows inside cards (income, etc.)
   ============================================================ */
.stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.stat-row:last-child { border-bottom: 0; }
.stat-row .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-row .value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.stat-row .value.accent { color: var(--accent); }
.stat-row .value.green { color: var(--status-green); }

/* ============================================================
   Tags / chips
   ============================================================ */
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.chip.accent { border-color: var(--accent); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
  background: linear-gradient(148deg, #1e2b3e 0%, #141d2c 45%, #0d1521 100%);
  border: 1px solid rgba(80, 130, 195, 0.22);
  border-top: 1px solid rgba(155, 200, 240, 0.32);
  border-left: 1px solid rgba(130, 180, 225, 0.26);
  border-radius: 0;
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  background: var(--bg-2);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--r-3) var(--r-4);
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: var(--r-3) var(--r-4);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-2); }
td.num, th.num { text-align: right; font-family: var(--font-mono); }

/* ============================================================
   Forms (modal)
   ============================================================ */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(5, 7, 11, 0.85);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--r-5);
  z-index: 100;
}
.modal-back.open { display: flex; }
.modal {
  background: linear-gradient(148deg, #1e2b3e 0%, #141d2c 45%, #0d1521 100%);
  border: 1px solid rgba(80, 130, 195, 0.3);
  border-top: 1px solid rgba(155, 200, 240, 0.4);
  border-left: 1px solid rgba(130, 180, 225, 0.3);
  border-radius: 0;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--r-5);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 40px rgba(30, 114, 228, 0.08);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.modal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 var(--r-4);
  letter-spacing: -0.015em;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: var(--r-3);
  margin-top: var(--r-5);
  padding-top: var(--r-4);
  border-top: 1px solid var(--border);
}

.field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: var(--r-3);
}
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--rad-2);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 120ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r-3);
}

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  background: var(--bg-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--rad-3);
  padding: var(--r-7);
  text-align: center;
  color: var(--text-dim);
}
.empty h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 var(--r-2);
  color: var(--text);
}
.empty p { margin: 0; }

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--r-5);
}
.tab {
  padding: var(--r-3) var(--r-4);
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   Slot cards (cell sheet)
   ============================================================ */

/* Outer page: 2-column grid of cell cards */
#cell-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) { #cell-grid { grid-template-columns: 1fr; } }

/* Internal card layout — manager / seniors / ops stacked */
.cell-slot-layout {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  margin-top: var(--r-3);
}
.cell-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r-2);
}

/* Base slot tile */
.slot {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--rad-2);
  padding: var(--r-3);
  display: flex; flex-direction: column;
  gap: 5px;
}
.slot.manager     { border-color: var(--status-blue);   background: linear-gradient(180deg, var(--status-blue)12 0%, var(--bg-2) 70%); }
.slot.senior      { border-color: var(--status-green);  background: linear-gradient(180deg, var(--status-green)12 0%, var(--bg-2) 70%); }
.slot.operational { border-color: var(--status-yellow); background: linear-gradient(180deg, var(--status-yellow)12 0%, var(--bg-2) 70%); }

/* Compact manager bar — single horizontal row */
.slot.slot-compact {
  flex-direction: row;
  align-items: center;
  gap: var(--r-3);
  padding: 8px var(--r-3);
  min-height: unset;
}
.slot-compact-name {
  flex: 1;
  text-align: right;
  font-size: 14px !important;
}

.slot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.slot-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.slot-empty {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: var(--r-5); right: var(--r-5);
  background: var(--bg-2);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: var(--r-3) var(--r-4);
  border-radius: var(--rad-2);
  font-size: 13px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: toast-in 200ms ease-out;
}
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Utility
   ============================================================ */
.row { display: flex; gap: var(--r-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--r-3); }
.mono { font-family: var(--font-mono); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.spacer-1 { height: var(--r-2); }
.spacer-2 { height: var(--r-4); }
.flex-1 { flex: 1; }

/* Sub-card (for batteries inside drone cards, etc.) */
.subcard {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--rad-2);
  padding: 10px var(--r-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-3);
}
.subcard-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Gear tile grid (pilot dashboard kit card) */
.gear-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gear-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--rad-2);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.gear-tile-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gear-tile-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gear-tile-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.gear-tile-dot.green  { background: var(--status-green);  box-shadow: 0 0 6px var(--glow-green); }
.gear-tile-dot.yellow { background: var(--status-yellow); box-shadow: 0 0 6px var(--glow-yellow); }
.gear-tile-dot.red    { background: var(--status-red);    box-shadow: 0 0 6px var(--glow-red); }
.gear-tile-dot.off    { background: var(--bg-3); border: 1px solid var(--border); }

/* Day-by-day payroll calendar row */
.payroll-day {
  display: grid;
  grid-template-columns: 110px 1fr 100px 100px 100px;
  gap: var(--r-3);
  padding: 10px var(--r-3);
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
}
.payroll-day:last-child { border-bottom: 0; }
.payroll-day.header {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-2);
}
.payroll-day .num { text-align: right; }

/* QA flag badge */
.qa-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  background: var(--status-yellow)20;
  color: var(--status-yellow);
  border: 1px solid var(--status-yellow);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Refresh button spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Profitability / investment recovery tracker */
.recovery-track {
  height: 6px;
  background: var(--border);
  border-radius: 0;
  margin: 8px 0 4px;
  overflow: hidden;
}
.recovery-fill {
  height: 100%;
  border-radius: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}
.recovery-fill.complete { background: var(--status-green); }
.recovery-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Payroll Calendar Tracker ─────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-hdr {
  text-align: center;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: .06em;
  padding: 4px 0 6px;
}
.cal-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px 10px;
  min-height: 58px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cal-cell:hover:not(.cal-future):not(.cal-blank) {
  border-color: var(--accent);
  background: var(--bg-3, var(--bg-2));
}
.cal-blank {
  background: transparent;
  border: none;
  cursor: default;
  min-height: 0;
}
.cal-future {
  opacity: 0.35;
  cursor: default;
}
.cal-today {
  border-color: var(--accent);
}
.cal-today .cal-num {
  color: var(--accent);
}
.cal-selected {
  background: var(--accent);
  border-color: var(--accent);
}
.cal-selected .cal-num,
.cal-selected .cal-val {
  color: #fff;
}
.cal-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
}
.cal-val {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent);
  margin-top: 6px;
  line-height: 1;
}

/* ============================================================
   Pilot Resources cards
   ============================================================ */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--r-4);
}
.res-card {
  display: flex;
  flex-direction: column;
  position: relative; /* anchors the .is-soon diagonal band */
  background: linear-gradient(135deg, #1f2c3f 0%, #141d2c 48%, #0c1420 100%);
  border: 1px solid rgba(80, 130, 195, 0.22);
  border-top: 1px solid rgba(155, 200, 240, 0.32);
  border-left: 1px solid rgba(130, 180, 225, 0.26);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  padding: var(--r-5);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms, border-color 200ms, box-shadow 400ms;
}
.res-card:hover {
  transform: translateY(-2px);
  border-color: rgba(80, 130, 195, 0.55);
  border-top-color: rgba(155, 200, 240, 0.65);
  box-shadow: 0 0 18px rgba(80, 160, 240, 0.12), 0 0 4px rgba(80, 160, 240, 0.08);
}
.res-icon {
  width: 52px; height: 52px;
  color: var(--accent-strong, #6ea8ff);
  margin-bottom: var(--r-3);
}
.res-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text);
}
.res-desc {
  margin: 0 0 var(--r-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  flex: 1;
}
.res-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-3); flex-wrap: wrap;
  padding-top: var(--r-3);
  border-top: 1px solid var(--border);
}
.res-go {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--accent);
}
/* Unbuilt modules are hidden from pilots entirely for now — the markup stays
   in pilot.html so nothing has to be rebuilt later. Removing `is-soon` from a
   card brings it back AND drops the band and desaturation in one edit, so
   launching a vertical is a single-word change.
   To show them again as teasers instead, comment out this one rule; the
   styling below is intact and will take over. */
.res-card.is-soon { display: none; }

/* Placeholder modules: desaturated, and the hover lift is cancelled so they
   don't advertise themselves as ready. */
.res-card.is-soon { opacity: 0.62; }
.res-card.is-soon:hover {
  transform: none;
  border-color: rgba(80, 130, 195, 0.22);
  border-top-color: rgba(155, 200, 240, 0.32);
  box-shadow: none;
}
.res-card.is-soon .res-icon { color: var(--text-muted); }
.res-card.is-soon .res-go { color: var(--text-muted); }
/* Diagonal band across a placeholder card. Everything that marks a module as
   unbuilt hangs off this one `is-soon` class — delete it from the card's class
   list in pilot.html and the card goes live-looking with no other edits.
   The card's clip-path trims the band flush to the corner cut. Change the text
   below to "COMING SOON" if that reads better. */
.res-card.is-soon::after {
  content: 'COMING SOON';
  position: absolute;
  top: 50%;
  left: -25%;
  width: 150%;
  transform: translateY(-50%) rotate(-20deg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--status-yellow);
  /* Dark backing rather than a yellow tint: the card's own title and copy sit
     directly behind the band, and a translucent tint left the label barely
     readable over them. */
  background: rgba(10, 13, 19, 0.88);
  border-top: 1px solid rgba(250, 204, 21, 0.6);
  border-bottom: 1px solid rgba(250, 204, 21, 0.6);
  padding: 7px 0;
  pointer-events: none;
}

/* ============================================================
   Mobile navigation drawer
   ------------------------------------------------------------
   Below 860px the 260px sidebar eats most of a phone screen, so it
   slides off-canvas behind a hamburger button. Desktop is untouched —
   every rule here is inside the media query except the button/backdrop
   defaults, which stay hidden until the query activates.
   ============================================================ */
.nav-toggle {
  display: none;
  position: fixed; top: 10px; left: 10px;
  z-index: 1001;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.nav-toggle:hover { background: var(--bg-3); border-color: var(--accent); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
}

/* Default position for the injected admin/pilot switcher. Set here rather than
   inline so the media query below can move it — and declared BEFORE that query,
   since both selectors have equal specificity and the later rule would win. */
#view-switcher { left: 10px; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 260px; height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 1000;
    border-right: 1px solid var(--border-strong);
  }
  .sidebar.is-open { transform: translateX(0); }
  /* Stop a scroll gesture inside the drawer from continuing into the page
     underneath once the menu hits its top/bottom. */
  .sidebar { overscroll-behavior: contain; }
  .nav-toggle { display: flex; }
  .nav-backdrop.is-open { display: block; }
  /* Dragging on the dimmed backdrop shouldn't scroll the page either. */
  .nav-backdrop { overscroll-behavior: none; touch-action: none; }
  /* Clear the fixed hamburger so page headings aren't hidden behind it. */
  .main { padding: 64px var(--r-4) var(--r-5); }
  /* The admin/pilot switcher also pins to the top-left — shift it clear of the
     42px hamburger (10px inset + 42px button + 10px gap). */
  #view-switcher { left: 62px; }
}

/* Page freeze while the mobile drawer is open. `overflow:hidden` on <body>
   alone is unreliable in iOS Safari, so the body is pinned with position:fixed
   and the scroll offset is reapplied as a negative `top` (set from JS) — then
   restored on close, otherwise opening the menu would snap the page to the
   top. */
body.nav-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Contract roll-up at the foot of each dashboard KPI card. Rendered only when
   the period actually had work, so quiet periods stay clean. */
.kpi-contracts {
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px solid var(--border);
}
.kpi-contracts-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.kpi-contract-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--r-3);
  font-size: 12px;
  padding: 2px 0;
}
.kpi-contract-name {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-contract-value {
  font-family: var(--font-mono);
  color: var(--text);
  flex-shrink: 0;
}

/* "Awaiting Client Approval" — the portion of a period's logged work that is
   not in this cycle's payout. Deliberately neutral (blue/dim), NOT the yellow
   used for QA holds: a QA flag means something is wrong with the work, whereas
   this means the work is fine and the client simply hasn't cleared it yet. */
.awaiting-note {
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px dashed var(--border);
}
.awaiting-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--r-3); flex-wrap: wrap;
}
.awaiting-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--status-blue);
}
.awaiting-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--status-blue);
}
.awaiting-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* ============================================================
   Collapsible sidebar sections
   ============================================================
   The section header replaces the old static .nav-section-label and keeps its
   look — same size, spacing, letterspacing and muted colour — so the sidebar
   reads as it always did until you click one. */
.nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--r-4) var(--r-3) var(--r-2);
  text-align: left;
  transition: color 120ms;
}
.nav-section:hover { color: var(--text-dim); }
.nav-section.is-open { color: var(--accent-strong); }

.nav-caret {
  width: 12px; height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 160ms ease;
}
.nav-section.is-open .nav-caret { transform: rotate(90deg); }

/* Collapsed by default. Height is animated via max-height rather than
   display:none so the open/close reads as a movement instead of a jump;
   the generous ceiling just needs to clear the tallest section. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}
.nav-group.is-open { max-height: 480px; }

/* Disabled buttons had no styling at all, so a button that could not be
   clicked looked identical to one that could — most visible on the SOW
   "Sign & Accept", which stays disabled until the pilot has both signed and
   ticked the consent box. Without this it reads as broken rather than gated. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.4);
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--bg-2);
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
  background: var(--accent);
}

/* ============================================================
   Pool bar
   ============================================================
   One bar per pilot per contract, showing where their earnings sit. Money
   flows LEFT to RIGHT out of the pool and toward paid — pool, then pending,
   then processing, then paid. That direction is deliberate: this is a
   pipeline, not a progress bar. There is no finish line (new assets keep
   arriving), so filling toward a goal would imply something untrue. The pool
   leads because "what am I owed" is the live question; paid is history. */
:root {
  --pool-deep:    #17518f;   /* pool — earned, unclaimed */
  --pool-pending: #4da8ff;   /* pending — next payout, entered */
  --pool-paid:    #a2adb7;   /* paid — settled, deliberately neutral */
}

.pool-bar {
  display: flex;
  width: 100%;
  height: 26px;
  overflow: hidden;
  /* The track is silver, not the page's dark surface. It is never visible at
     rest — the segments always sum to 100% — but during the fill the not-yet
     drawn portion reads as "settled" rather than as an empty dark gap, so the
     bar looks like the owed part filling IN rather than the bar being unbuilt. */
  background: var(--pool-paid);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.pool-seg {
  height: 100%;
  /* Width is the only thing that animates, so a payout visibly moves from one
     state to the next instead of the bar redrawing. */
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.pool-seg-pool    { background: var(--pool-deep); }
.pool-seg-pending { background: var(--pool-pending); }
/* Right-anchored so the fill animation has a gap to close. Identical to
   normal flex packing at rest, because the segments already sum to 100%. */
.pool-seg-paid    { background: var(--pool-paid); margin-left: auto; }

/* Processing replaces pending in place — same money, new state — so it is the
   same colour with stripes over it rather than a separate segment appearing.
   The drift makes "in flight" read at a glance without needing the legend. */
.pool-seg-processing {
  background: repeating-linear-gradient(
    -45deg,
    var(--pool-pending) 0 7px,
    var(--pool-deep)    7px 14px
  );
  background-size: 19.8px 19.8px;
  animation: pool-stripe 1.1s linear infinite;
}
@keyframes pool-stripe {
  from { background-position: 0 0; }
  to   { background-position: 19.8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pool-seg { transition: none; }
  .pool-seg-processing { animation: none; }
}

.pool-legend {
  display: flex; flex-wrap: wrap;
  gap: var(--r-3);
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}
.pool-legend-item { display: flex; align-items: center; gap: 5px; }
.pool-swatch {
  width: 14px; height: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
}
.pool-legend-value { color: var(--text); }

/* Total earned — the summary at the far right of the legend. `margin-left:auto`
   pushes it away from the segment items so it reads as the sum of them rather
   than as one more state, and the rule on its left is the only separator that
   survives the legend wrapping onto a second row on a narrow card. It carries
   no swatch, so it needs that rule to keep from looking like a stray item. */
.pool-legend-total {
  margin-left: auto;
  padding-left: var(--r-3);
  border-left: 1px solid var(--border);
  color: var(--text-muted);
}
.pool-legend-total .pool-legend-value { font-weight: 600; }

.pool-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--r-3); flex-wrap: wrap;
  margin-bottom: 6px;
}
.pool-contract { font-size: 13px; font-weight: 600; }
.pool-total { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.pool-closed {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Withholdings and extras on the queued payout, itemised under the bar.
   Indented and quiet: it explains the gap between the base and the cash
   without competing with the bar itself. */
.pool-held {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}
.pool-held-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.pool-held-amt { flex: 0 0 auto; font-weight: 600; }
.pool-held-amt.is-less { color: var(--status-red); }
.pool-held-amt.is-more { color: var(--status-green); }
.pool-held-note { color: var(--text-muted); font-style: italic; }
.pool-held-sum { margin-top: 4px; color: var(--text-muted); }
.pool-held-sum strong { color: var(--text); }

/* ============================================================
   Admin pilot pool grid
   ============================================================
   Two pilots side by side. auto-fit with a 360px floor means it drops to one
   column on a narrow window by itself rather than squeezing two half-cards
   that neither reads nor fits. */
.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--r-4);
  align-items: start;
}
.pool-pilot .card-body { display: flex; flex-direction: column; }
.pool-pilot-head {
  display: flex; align-items: baseline; gap: var(--r-3);
  flex-wrap: wrap; margin-bottom: var(--r-4);
}
.pool-pilot-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.pool-pilot-title {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Each bar is a button: it opens the payout form. Stripped back to its content
   so the bar looks identical to the read-only one on the pilot side — the only
   affordance is the hover, because a bar styled like a control would imply the
   segments themselves are clickable. */
.pool-open {
  display: block; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pool-open .pool-block { margin-bottom: var(--r-3) !important; }
.pool-open:hover .pool-contract { color: var(--accent-strong); }
.pool-open:hover .pool-bar { border-color: var(--border-strong); }
.pool-open:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* Totals for the whole pilot, under their contracts. margin-top:auto pins this
   to the bottom so two cards with different contract counts still line their
   stat rows up with each other. */
.pool-pilot-stats {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--r-3);
  margin-top: auto; padding-top: var(--r-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px;
}
.pool-pilot-stats .label {
  display: block;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2px;
}

/* Closed contracts. Collapsed rather than removed — a contract that closed out
   of balance has to stay reachable. */
.pool-closed-list,
.former-list { margin-top: var(--r-5); }
.pool-closed-list > summary,
.former-list > summary {
  cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: var(--r-3) 0;
}
.pool-closed-list > summary:hover,
.former-list > summary:hover { color: var(--text); }
.pool-closed-inner { padding-top: var(--r-3); }

/* Draft entry sitting under each pool bar. One row per asset type the pilot
   has actually logged on that contract — you cannot enter a type they never
   flew, because there would be nothing to draw it from. */
.pool-entry {
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px solid var(--border);
}
.pool-entry-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.pool-entry-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-3); flex-wrap: wrap;
}
.pool-entry-head .pool-entry-label { margin-bottom: 0; }
/* Asset counts or a flat amount. Only one is ever filled in, so they share the
   row rather than sitting side by side — the toggle says which is live. */
.pool-mode { display: flex; gap: 0; margin-bottom: 8px; }
.pool-mode-btn {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer;
  background: var(--bg-input); color: var(--text-muted);
  border: 1px solid var(--border);
}
.pool-mode-btn + .pool-mode-btn { border-left: 0; }
.pool-mode-btn:hover:not(:disabled) { color: var(--text); }
.pool-mode-btn.is-on {
  background: var(--accent); color: #ffffff;
  border-color: var(--accent);
}
.pool-mode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pool-entry[data-mode="assets"] [data-rows="amount"],
.pool-entry[data-mode="amount"] [data-rows="assets"] { display: none; }
.pool-entry-note {
  font-size: 11px; color: var(--text-muted);
  align-self: center;
}
.pool-entry-rows {
  display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: flex-end;
}
.pool-entry-field { display: flex; flex-direction: column; gap: 3px; }
.pool-entry-field label {
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.pool-entry-field .avail { color: var(--text-muted); font-size: 10px; }
.pool-entry-field input {
  width: 110px; padding: 7px 9px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: 13px;
}
.pool-entry-field input:focus { outline: none; border-color: var(--accent); }
.pool-entry-total {
  margin-left: auto; display: flex; align-items: baseline; gap: 8px;
}
.pool-entry-total .val {
  font-family: var(--font-mono); font-size: 18px; color: var(--accent-strong);
}
.pool-entry-actions { display: flex; gap: var(--r-2); margin-top: var(--r-3); flex-wrap: wrap; align-items: center; }
.pool-warn { font-size: 11px; color: var(--status-yellow); margin-top: 6px; }

/* Cell hierarchy: ops drawn under the senior they report to. Indent plus a
   connecting rule, rather than a nested card — a cell inside a cell would
   imply a structure that does not exist. */
.senior-group { margin-bottom: var(--r-3); }
.senior-reports {
  margin-left: var(--r-4);
  padding-left: var(--r-3);
  border-left: 2px solid var(--border-strong);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--r-2);
  margin-top: var(--r-2);
}
.senior-reports-empty {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.senior-unassigned-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}