/* Millennium Alliance — Ops Platform — Premium Editorial */

:root {
  /* Brand */
  --ma-blue: #00429d;
  --ma-blue-deep: #00285e;
  --ma-blue-bright: #38b6ff;
  --ma-blue-50: #eef3fb;
  --ma-blue-100: #dbe6f5;
  --ma-blue-200: #b6cde9;
  --ma-blue-300: #7ea7d6;
  --ma-blue-700: #003c8c;

  /* Neutrals (warm, low-sat) */
  --ink: #0c1117;
  --ink-2: #1c2330;
  --muted: #5a6677;
  --muted-2: #828b99;
  --line: #e6e8ec;
  --line-strong: #d6d9df;
  --canvas: #fafaf7;       /* warm off-white */
  --canvas-2: #f4f4ef;
  --surface: #ffffff;
  --surface-tint: #fbfaf6;

  /* Functional */
  --green: #1f7a4d;
  --green-tint: #ecf5ef;
  --amber: #a36b1b;
  --amber-tint: #fbf2e4;
  --red: #9a2b2b;
  --red-tint: #f8ebeb;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(12, 17, 23, 0.04), 0 1px 1px rgba(12, 17, 23, 0.03);
  --shadow-md: 0 6px 24px rgba(12, 17, 23, 0.05), 0 1px 2px rgba(12, 17, 23, 0.04);
  --shadow-lg: 0 18px 42px rgba(12, 17, 23, 0.08), 0 2px 6px rgba(12, 17, 23, 0.04);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--ma-blue); color: white; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

/* Page transitions */
.view-enter { opacity: 0; transform: translateY(6px); }
.view-enter-active { opacity: 1; transform: translateY(0); transition: opacity 240ms ease, transform 240ms ease; }

/* Shared shell ---------------------------------------------------------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }

.topnav {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.topnav-inner {
  max-width: 1360px; margin: 0 auto; height: 100%;
  padding: 0 32px;
  display: flex; align-items: center; gap: 28px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 15px;
}
.brand .logomark {
  width: 30px; height: 30px;
  background: var(--ma-blue);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15);
}
.brand-wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand-wordmark .top { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.brand-wordmark .sub { font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 3px;}

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-link {
  padding: 7px 12px;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted); border-radius: 7px;
  transition: color 120ms, background 120ms;
}
.nav-link:hover { color: var(--ink); background: var(--canvas-2); }
.nav-link.active { color: var(--ink); background: var(--canvas-2); }

.nav-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.sync-dot {
  width: 6px; height: 6px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(31,122,77,0.12);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #1c2330, #4a5566);
  display: grid; place-items: center;
  color: white; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}

/* Page container */
.page {
  width: 100%;
  max-width: 1360px; margin: 0 auto;
  padding: 40px 32px 80px;
}
.page-wide { max-width: 1440px; }

/* Eyebrow / section labels */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ma-blue);
}
.eyebrow.muted { color: var(--muted); }
h1.hero { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 6px 0 12px; }
h1.hero.serif, h2.section.serif { line-height: 1.25; }
h2.section { font-size: 22px; line-height: 1.2; letter-spacing: -0.012em; font-weight: 600; margin: 0; }
h3.sub { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.lede { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 60ch; margin: 8px 0 0; }

/* Card */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card.hover { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.card.hover:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-pad { padding: 22px 24px; }

/* Metric card */
.metric {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 168px;
}
.metric-label { font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; font-weight: 500; }
.metric-value { font-size: 38px; line-height: 1; letter-spacing: -0.025em; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-value .unit { font-size: 18px; color: var(--muted); margin-left: 4px; font-weight: 500; letter-spacing: -0.01em; }
.metric-delta { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.metric-delta.up { color: var(--green); }
.metric-delta.down { color: var(--red); }
.metric-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.metric-spark { height: 32px; flex: 1; min-width: 0; }
.metric-context { font-size: 12px; color: var(--muted); margin-top: -8px; }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.pill.healthy { background: var(--green-tint); color: var(--green); }
.pill.healthy .dot { background: var(--green); }
.pill.warning { background: var(--amber-tint); color: var(--amber); }
.pill.warning .dot { background: var(--amber); }
.pill.critical { background: var(--red-tint); color: var(--red); }
.pill.critical .dot { background: var(--red); }
.pill.neutral { background: var(--canvas-2); color: var(--muted); }
.pill.neutral .dot { background: var(--muted); }
.pill.blue { background: var(--ma-blue-50); color: var(--ma-blue); }
.pill.blue .dot { background: var(--ma-blue); }

/* Grade chip */
.grade {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.grade .d { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.grade.diamond .d { background: #5a6fa7; }
.grade.platinum .d { background: #8893a8; }
.grade.gold .d { background: #b48d36; }
.grade.silver .d { background: #b6bcc6; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  border: 1px solid transparent;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}
.btn.primary { background: var(--ma-blue); color: white; }
.btn.primary:hover { background: var(--ma-blue-700); }
.btn.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.secondary:hover { background: var(--canvas-2); border-color: var(--muted-2); }
.btn.ghost { color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--canvas-2); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }

/* Inputs */
.input, .select {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: 13.5px;
  transition: border-color 120ms, box-shadow 120ms;
}
.input:focus, .select:focus { outline: none; border-color: var(--ma-blue); box-shadow: 0 0 0 3px rgba(0,66,157,0.12); }
.input::placeholder { color: var(--muted-2); }
.search {
  position: relative;
}
.search .input { padding-left: 36px; width: 320px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
  text-align: left; font-weight: 500;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: transparent;
}
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--ink); }
.table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-tint); }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-primary { font-weight: 500; }
.cell-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Hero gradient surface for event detail */
.hero-gradient {
  position: relative;
  background: linear-gradient(135deg, #001a4a 0%, #00285e 38%, #00429d 100%);
  color: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero-gradient .city {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360'%3E%3Cg fill='none' stroke='%2338b6ff' stroke-width='0.6' stroke-opacity='0.18'%3E%3Cpath d='M0 320 L60 320 L60 180 L100 180 L100 280 L140 280 L140 160 L180 160 L180 240 L220 240 L220 120 L260 120 L260 200 L300 200 L300 80 L340 80 L340 220 L380 220 L380 140 L420 140 L420 260 L460 260 L460 100 L500 100 L500 220 L540 220 L540 60 L580 60 L580 200 L620 200 L620 140 L660 140 L660 260 L700 260 L700 90 L740 90 L740 220 L780 220 L780 130 L820 130 L820 250 L860 250 L860 110 L900 110 L900 230 L940 230 L940 70 L980 70 L980 210 L1020 210 L1020 160 L1060 160 L1060 280 L1100 280 L1100 200 L1140 200 L1140 320 L1200 320'/%3E%3Cpath d='M0 320 L1200 320'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
  opacity: 0.6;
  pointer-events: none;
}
.hero-gradient .content { position: relative; padding: 36px 40px 32px; }
.hero-gradient .eyebrow { color: var(--ma-blue-bright); }
.hero-gradient h1 { color: white; font-size: 36px; letter-spacing: -0.02em; font-weight: 600; margin: 8px 0 14px; line-height: 1.1; }
.hero-gradient .meta { display: flex; gap: 28px; color: rgba(255,255,255,0.78); font-size: 14px; flex-wrap: wrap; }
.hero-gradient .meta strong { color: white; font-weight: 500; }

/* Sidebar / detail layout */
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: 1fr; } }

/* Filter bar */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.filter-chip:hover { border-color: var(--line-strong); }
.filter-chip.active { background: var(--ma-blue-50); border-color: var(--ma-blue-200); color: var(--ma-blue); }
.filter-chip .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-chip.active .count { color: var(--ma-blue); opacity: 0.7; }

/* Progress / ratio */
.bar { width: 100%; height: 6px; background: var(--canvas-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ma-blue); border-radius: 999px; }
.bar.thin { height: 4px; }
.bar > span.amber { background: var(--amber); }
.bar > span.red { background: var(--red); }
.bar > span.green { background: var(--green); }

/* Track card (assembly) */
.track-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  background: var(--surface);
}
.track-code {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ma-blue);
  background: var(--ma-blue-50);
  border-radius: 6px;
  padding: 2px 7px;
  display: inline-block;
}

/* Divider */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Sidebar grade bar */
.grade-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.grade-row .swatch { width: 10px; height: 10px; border-radius: 3px; }
.grade-row .label { font-size: 13.5px; flex: 1; }
.grade-row .num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Login */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-pane { padding: 60px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); }
.login-art {
  background: linear-gradient(160deg, #001a4a 0%, #00285e 45%, #00429d 100%);
  position: relative; overflow: hidden;
  color: white;
  padding: 60px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-art .city {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%2338b6ff' stroke-width='0.5' stroke-opacity='0.22'%3E%3Cpath d='M0 760 L40 760 L40 600 L80 600 L80 700 L120 700 L120 540 L160 540 L160 660 L200 660 L200 500 L240 500 L240 620 L280 620 L280 460 L320 460 L320 580 L360 580 L360 420 L400 420 L400 560 L440 560 L440 380 L480 380 L480 540 L520 540 L520 350 L560 350 L560 500 L600 500 L600 320 L640 320 L640 480 L680 480 L680 290 L720 290 L720 460 L760 460 L760 270 L800 270 L800 440 L840 440 L840 250 L880 250 L880 420 L920 420 L920 230 L960 230 L960 400 L1000 400 L1000 220 L1040 220 L1040 390 L1080 390 L1080 210 L1120 210 L1120 380 L1160 380 L1160 220 L1200 220 L1200 760'/%3E%3Cpath d='M0 760 L1200 760'/%3E%3Cpath d='M50 760 L50 660 M90 760 L90 720 M130 760 L130 610 M170 760 L170 690 M210 760 L210 570 M250 760 L250 680 M290 760 L290 540 M330 760 L330 660 M370 760 L370 500 M410 760 L410 640 M450 760 L450 470 M490 760 L490 620 M530 760 L530 440 M570 760 L570 600 M610 760 L610 410 M650 760 L650 580 M690 760 L690 380 M730 760 L730 560 M770 760 L770 360 M810 760 L810 540 M850 760 L850 350 M890 760 L890 520 M930 760 L930 320 M970 760 L970 500 M1010 760 L1010 320 M1050 760 L1050 480 M1090 760 L1090 300 M1130 760 L1130 480 M1170 760 L1170 320'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: bottom;
  opacity: 0.85;
}
.login-art .stars {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0.5px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.05;
}

.login-form { max-width: 380px; }
.google-btn {
  width: 100%; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  transition: background 120ms, border-color 120ms;
}
.google-btn:hover { background: var(--canvas-2); border-color: var(--muted-2); }

/* At-risk banner */
.alert-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 20px 22px;
  background: var(--surface);
  display: grid; grid-template-columns: 8px 1fr auto; gap: 20px; align-items: center;
}
.alert-card .accent { width: 4px; align-self: stretch; border-radius: 4px; }
.alert-card.critical .accent { background: var(--red); }
.alert-card.warning .accent { background: var(--amber); }
.alert-card.healthy .accent { background: var(--green); }

/* Calendar mini */
.cal-month { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* Sparkline color */
.spark-line { stroke: var(--ma-blue); fill: none; stroke-width: 1.5; }
.spark-area { fill: var(--ma-blue-100); opacity: 0.45; }

/* Icon button */
.icon-btn {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
  transition: background 120ms, color 120ms;
}
.icon-btn:hover { background: var(--canvas-2); color: var(--ink); }

/* Tooltip-ish */
.kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--muted);
}

/* Sponsor logo placeholder */
.sponsor-logo {
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 14px;
  text-align: center;
}

/* Ratio ring */
.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring { transform: rotate(-90deg); }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--ma-blue); }

/* Mini stat block */
.stat {
  display: flex; flex-direction: column; gap: 4px;
}
.stat .v { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); }

/* Definition row */
.dl { display: grid; grid-template-columns: 140px 1fr; row-gap: 12px; column-gap: 18px; font-size: 13.5px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; color: var(--ink); font-weight: 500; }

/* Misc */
.row-link { color: var(--ma-blue); font-weight: 500; }
.row-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Roster source chip */
.source-chip {
  display: inline-flex; gap: 5px; align-items: center;
  font-size: 11.5px; color: var(--muted);
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface);
}
.source-chip.ma { color: var(--ma-blue); border-color: var(--ma-blue-100); background: var(--ma-blue-50); }

/* Page header row */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }

/* Toggle group */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 3px;
}
.seg button {
  height: 28px; padding: 0 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  border-radius: 6px;
}
.seg button.active { background: var(--ma-blue); color: white; }
.seg button:not(.active):hover { color: var(--ink); }

/* Subtle scrollbar */
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }