/* ──────────────────────────────────────────────────────────────────────────
   Elitez LMS — admin.css
   Admin-only chrome for /admin.html + /admin-insights.html.
   Depends on main.css + components.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Admin nav strip (sits below site-header) ─────────────────────────── */
.admin-strip {
  position: sticky;
  top: var(--nav-height);
  z-index: 150;
  background: var(--card-hi);
  border-bottom: 1px solid var(--border);
}
.admin-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  max-width: var(--container-max);
  margin: 0 auto;
  flex-wrap: wrap;
}
.admin-strip__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  font-weight: 600;
}
.admin-strip__nav {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.admin-strip__link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.admin-strip__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent2);
}
.admin-strip__link:hover { color: var(--accent); }
.admin-strip__source {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted2);
  letter-spacing: 0.05em;
}

/* admin pages: bump main padding to account for sticky strip */
body[data-page="admin"] main,
body[data-page="admin-insights"] main { padding-top: var(--nav-height); }

/* ── Top-5 threat cards ──────────────────────────────────────────────── */
.threat-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .threat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .threat-grid { grid-template-columns: repeat(5, 1fr); } }

.threat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent2);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.threat-card__rank {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent2);
  font-weight: 600;
}
.threat-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.threat-card__category {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
}
.threat-card__rationale {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.threat-card__meta {
  display: flex;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.threat-card__meta strong { color: var(--accent); font-weight: 600; }

/* ── Strategy radar (SVG) ────────────────────────────────────────────── */
.radar-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .radar-wrap { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.radar-svg { width: 100%; height: auto; }
.radar-svg .axis-line { stroke: var(--border); stroke-width: 1; }
.radar-svg .axis-grid { stroke: var(--border); stroke-width: 1; fill: none; }
.radar-svg .axis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--muted);
  text-transform: uppercase;
}
.radar-svg .series-elitez {
  fill: rgba(0, 58, 112, 0.15);
  stroke: var(--accent);
  stroke-width: 2;
}
.radar-svg .series-elitez-dot { fill: var(--accent); }
.radar-svg .series-comp {
  fill: rgba(242, 101, 34, 0.10);
  stroke: var(--accent2);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.radar-svg .series-comp-dot { fill: var(--accent2); }

.radar-legend {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: 0.86rem;
}
.radar-legend__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.radar-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.radar-legend__swatch--us { background: var(--accent); }
.radar-legend__swatch--them {
  background: var(--accent2);
  opacity: 0.7;
}
.radar-legend select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.radar-legend__scores {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.radar-legend__scores li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.radar-legend__scores li strong { color: var(--text); font-weight: 500; }

/* ── Competitor table filters ────────────────────────────────────────── */
.table-filters {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  align-items: center;
}
.table-filters input,
.table-filters select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 8px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.table-filters input[type="search"] { min-width: 240px; }
.threat-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.threat-pill--5, .threat-pill--4 { background: rgba(242,101,34,0.14); color: var(--accent2); }
.threat-pill--3 { background: rgba(0,58,112,0.10); color: var(--accent); }
.threat-pill--2, .threat-pill--1 { background: var(--card-hi); color: var(--muted); }

/* ── Detail modal ────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 26, 46, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-5);
  overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-6);
  max-width: 640px;
  width: 100%;
  margin: 64px 0;
  box-shadow: var(--shadow-lg);
}
.modal__close {
  float: right;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  color: var(--muted);
  cursor: pointer;
  margin-top: -8px;
  margin-right: -8px;
}
.modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 var(--s-3);
}
.modal__meta {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  background: var(--card-hi);
  border-radius: var(--radius-sm);
}
.modal__meta strong { color: var(--text); font-weight: 500; }
.modal__col {
  margin: var(--s-4) 0;
}
.modal__col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}
.modal__col ul {
  margin: 0;
  padding-left: var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Market funnel ───────────────────────────────────────────────────── */
.funnel {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .funnel { grid-template-columns: repeat(3, 1fr); } }
.funnel__stage {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.funnel__stage:nth-child(2) { border-top-color: var(--accent2); }
.funnel__stage:nth-child(3) { border-top-color: var(--accent-d); }
.funnel__stage-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.funnel__stage-result {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.funnel__stage:nth-child(2) .funnel__stage-result { color: var(--accent2); }
.funnel__stage-subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.funnel__stage-equation {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding: var(--s-3);
  background: var(--card-hi);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.funnel__stack {
  border-left: 2px solid var(--border);
  padding-left: var(--s-3);
  margin-top: var(--s-2);
}
.funnel__stack-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: var(--s-2) 0 var(--s-1);
}
.funnel__stack-source {
  font-size: 0.78rem;
  color: var(--muted2);
  margin: 0 0 var(--s-2);
  font-style: italic;
}

/* ── Persona cards ───────────────────────────────────────────────────── */
.persona-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .persona-grid { grid-template-columns: repeat(3, 1fr); } }

.persona-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.persona-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
}
.persona-card__icp {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.persona-card__section h4 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}
.persona-card__pains {
  margin: 0;
  padding-left: var(--s-4);
  display: grid;
  gap: var(--s-1);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.persona-card__wtp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--card-hi);
  border-radius: var(--radius-sm);
}
.persona-card__wtp-cell { text-align: center; }
.persona-card__wtp-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.persona-card__wtp-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.persona-card__nba {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}
.persona-card__nba-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}
.persona-card__nba-summary {
  font-size: 0.82rem;
  color: var(--muted);
  margin: var(--s-2) 0 0 0;
  line-height: 1.5;
}

/* ── Heatmap ─────────────────────────────────────────────────────────── */
.heatmap-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  overflow-x: auto;
}
.heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  min-width: 720px;
}
.heatmap th,
.heatmap td {
  padding: var(--s-3);
  text-align: center;
  vertical-align: middle;
  font-size: 0.82rem;
}
.heatmap thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  background: transparent;
  border-bottom: 2px solid var(--accent);
  vertical-align: bottom;
}
.heatmap tbody th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card-hi);
  border-radius: var(--radius-sm);
}
.heatmap-cell {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  position: relative;
  cursor: help;
}
.heatmap-cell[data-score="0"] { background: var(--card-hi); color: var(--muted2); }
.heatmap-cell[data-score="1"] { background: rgba(0,58,112,0.08); color: var(--accent); }
.heatmap-cell[data-score="2"] { background: rgba(0,58,112,0.18); color: var(--accent); }
.heatmap-cell[data-score="3"] { background: rgba(0,58,112,0.32); color: #fff; }
.heatmap-cell[data-score="4"] { background: rgba(0,58,112,0.55); color: #fff; }
.heatmap-cell[data-score="5"] { background: var(--accent); color: #fff; }
.heatmap-cell--ours[data-score="5"] { background: var(--accent2); color: #fff; }
.heatmap-cell--ours[data-score="4"] { background: rgba(242,101,34,0.6); color: #fff; }
.heatmap-cell--ours[data-score="3"] { background: rgba(242,101,34,0.4); color: var(--accent2); }
.heatmap-key {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.heatmap-key__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Attack plans ────────────────────────────────────────────────────── */
.attack-plan {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.attack-plan:nth-child(2) { border-left-color: var(--accent2); }
.attack-plan:nth-child(3) { border-left-color: var(--accent-d); }
.attack-plan:nth-child(4) { border-left-color: var(--accent2); }
.attack-plan:nth-child(5) { border-left-color: var(--accent); }
.attack-plan__rank {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
}
.attack-plan__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
}
.attack-plan__tam {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--accent2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.attack-plan__row {
  display: grid;
  gap: var(--s-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.attack-plan__row strong {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* ── Country readiness table override ────────────────────────────────── */
.country-table .readiness-bar {
  display: inline-block;
  background: var(--card-hi);
  border-radius: 100px;
  height: 8px;
  width: 80px;
  vertical-align: middle;
  margin-left: var(--s-2);
  position: relative;
}
.country-table .readiness-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
}