/* Antistasi Stats — stylesheet
   Closely follows the reference design (report_apr10.html)
   with additions for campaign/session selectors and loading states.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #ffffff;
  --bg2:        #f5f5f3;
  --bg3:        #eeecea;
  --text:       #1a1a1a;
  --text2:      #6b6b6b;
  --border:     rgba(0,0,0,0.10);
  --border2:    rgba(0,0,0,0.18);
  --radius:     10px;
  --accent-sys:  #185FA5;
  --accent-game: #3B6D11;
  --red:         #A32D2D;
  --amber:       #854F0B;
  --font:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', 'Consolas', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #1c1c1c;
    --bg2:     #252525;
    --bg3:     #2e2e2e;
    --text:    #e8e8e8;
    --text2:   #999;
    --border:  rgba(255,255,255,0.10);
    --border2: rgba(255,255,255,0.18);
  }
}

body {
  font-family: var(--font);
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  padding: 24px 16px 48px;
}

/* ── App shell ──────────────────────────────────────────────────── */
.shell {
  max-width: 1160px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--radius);
  border: 0.5px solid var(--border2);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  padding: 16px 24px 0;
  background: var(--bg2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0.5px solid var(--border2);
}

.topbar-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

/* Topbar auth */
.topbar-auth {
  position: absolute; top: 16px; right: 24px;
  display: flex; align-items: center; gap: 8px;
}
.auth-level-label {
  font-size: 11px; color: var(--text2);
}
.auth-btn {
  padding: 5px 14px; font-size: 12px; font-family: var(--font);
  font-weight: 500; cursor: pointer; border-radius: 6px;
  border: 0.5px solid var(--border2);
  background: var(--bg3); color: var(--text);
  transition: background 0.12s;
}
.auth-btn:hover { background: var(--bg); }
.latest-btn {
  align-self: flex-end; margin-bottom: 1px;
  padding: 5px 14px; font-size: 12px; font-family: var(--font);
  font-weight: 500; cursor: pointer; border-radius: 6px;
  border: 0.5px solid var(--accent-sys);
  background: transparent; color: var(--accent-sys);
  transition: background 0.12s;
}
.latest-btn:hover { background: var(--accent-sys); color: #fff; }
.latest-btn:disabled { opacity: 0.4; cursor: default; }

.topbar-meta {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 8px;
}

/* Campaign + Session selectors */
.topbar-selectors {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.selector-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.selector-group label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.selector-group select {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  min-width: 180px;
}

.selector-group select:focus {
  border-color: var(--accent-sys);
}

/* Session time strip */
.topbar-tz {
  display: flex;
  gap: 20px;
  font-size: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tz-block { display: flex; flex-direction: column; gap: 1px; }
.tz-label {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text2);
}
.tz-value { font-variant-numeric: tabular-nums; color: var(--text); }

.camp-status-ongoing { color: var(--accent-game); font-weight: 700; }
.camp-status-closed  { color: var(--text2); font-weight: 400; }

.tz-block-picker { margin-left: auto; }
.tz-picker {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
  max-width: 180px;
}

/* Tabs */
.tabs { display: flex; gap: 2px; }
.tab {
  padding: 8px 20px;
  font-size: 13px; font-weight: 500;
  border: 0.5px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  color: var(--text2);
  background: transparent;
  position: relative; top: 1px;
  transition: background 0.12s;
  user-select: none;
}
.tab:hover { background: var(--bg3); color: var(--text); }
.tab.active-sys  { background: var(--bg); color: var(--accent-sys);  border-color: var(--border2); }
.tab.active-game { background: var(--bg); color: var(--accent-game); border-color: var(--border2); }

/* ── Panels ─────────────────────────────────────────────────────── */
.panel { display: none; padding: 24px; }
.panel.visible { display: block; }

/* ── Empty / loading states ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text2);
  font-size: 14px;
}
.empty-state p { margin-bottom: 6px; }
.empty-state .hint { font-size: 12px; }

.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 13px;
  padding: 24px 0;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent-sys);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Metric cards ───────────────────────────────────────────────── */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.metric {
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px 14px;
}
.metric-label {
  font-size: 11px; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.metric-value {
  font-size: 22px; font-weight: 500; color: var(--text);
}
.metric-value.red    { color: var(--red); }
.metric-value.amber  { color: var(--amber); }
.metric-value.blue   { color: var(--accent-sys); }
.metric-value.green  { color: var(--accent-game); }
.metric-sub {
  font-size: 11px; color: var(--text2); margin-top: 2px;
}
.metric-sub.pos { color: var(--accent-game); }
.metric-sub.neg { color: var(--red); }

/* ── Section label ──────────────────────────────────────────────── */
.section-label {
  font-size: 11px; font-weight: 500;
  color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px; margin-top: 4px;
}

/* ── Event/system table ─────────────────────────────────────────── */
.event-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: 28px; position: relative;
}
.event-table th {
  font-size: 11px; font-weight: 500;
  color: var(--text2); text-transform: uppercase;
  letter-spacing: 0.04em; text-align: left;
  padding: 7px 12px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border2);
}
.ev-row td {
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}
.ev-row:last-child td { border-bottom: none; }
.ev-row { cursor: default; }
.ev-row:hover { background: var(--bg2); }

/* Severity badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge.critical { background: #FCEBEB; color: #A32D2D; }
.badge.error    { background: #FAEEDA; color: #854F0B; }
.badge.warning  { background: #FAEEDA; color: #633806; }
.badge.info     { background: #E6F1FB; color: #185FA5; }

/* ── Charts ─────────────────────────────────────────────────────── */
.chart-wrap {
  position: relative; margin-bottom: 28px;
  height: 220px;
}
.chart-wrap.short { height: 160px; }
.chart-wrap.tall  { height: 280px; }

/* ── Divider ────────────────────────────────────────────────────── */
hr.div { border: none; border-top: 0.5px solid var(--border); margin: 22px 0; }

/* ── Timeline ───────────────────────────────────────────────────── */
/* ── Promotions ─────────────────────────────────────────────────── */
#bf-promotions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
.promo-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 0.5px solid var(--border2);
  border-radius: 6px; padding: 6px 12px;
  font-size: 13px;
}
.promo-player { font-weight: 500; color: var(--text); }
.promo-time   { font-size: 11px; color: var(--text2); }
.rank-badge {
  display: inline-block;
  padding: 2px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; font-family: var(--mono);
  background: #F5EDD0; color: #7A5500;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .rank-badge { background: #2e2200; color: #c8960c; }
}
.promo-arrow { color: var(--text2); font-size: 12px; }

.timeline {
  position: relative; padding-left: 22px;
  margin-bottom: 24px;
  max-height: 480px; overflow-y: auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border2);
}
.tl-item { position: relative; margin-bottom: 14px; font-size: 13px; }
.tl-dot {
  position: absolute; left: -18px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; background: var(--bg);
}
.tl-time {
  font-size: 11px; color: var(--text2);
  margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.tl-text { color: var(--text); line-height: 1.45; }
.tl-tag {
  display: inline-block; font-size: 10px;
  padding: 1px 6px; border-radius: 3px;
  margin-left: 6px; vertical-align: middle;
}

/* Timeline event category colours */
.tl-enemy_attack  { color: #A32D2D; }
.tl-enemy_attack .tl-tag { background: #FCEBEB; color: #A32D2D; }
.tl-combat        { color: #854F0B; }
.tl-combat .tl-tag { background: #FAEEDA; color: #854F0B; }
.tl-territory     { color: #712B13; }
.tl-territory .tl-tag { background: #FCEBEB; color: #712B13; }
.tl-logistics     { color: #534AB7; }
.tl-logistics .tl-tag { background: #EEEDFE; color: #3C3489; }
.tl-friendly_fire { color: #633806; }
.tl-friendly_fire .tl-tag { background: #FAEEDA; color: #633806; }
.tl-other         { color: var(--text2); }
.tl-other .tl-tag { background: var(--bg2); color: var(--text2); }
.tl-liberation     { color: #1A6B2F; }
.tl-liberation .tl-tag { background: #E6F4EB; color: #1A6B2F; }
.tl-milestone      { color: #185FA5; }
.tl-milestone .tl-tag { background: #E8F1FB; color: #185FA5; }
.tl-enemy_response { color: #7A4000; }
.tl-enemy_response .tl-tag { background: #FDF0E0; color: #7A4000; }
.tl-zeus     { color: #4A2D8A; }
.tl-zeus .tl-tag { background: #EDE8F8; color: #4A2D8A; }

/* ── Generic data table ─────────────────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-bottom: 24px;
}
.data-table th {
  font-size: 11px; font-weight: 500;
  color: var(--text2); text-transform: uppercase;
  letter-spacing: 0.04em; text-align: left;
  padding: 7px 10px;
  border-bottom: 0.5px solid var(--border2);
  background: var(--bg2);
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text); vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg2); }

/* ── Layout helpers ─────────────────────────────────────────────── */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* ── Tooltip ────────────────────────────────────────────────────── */
.tooltip {
  display: none; position: fixed; z-index: 9999;
  max-width: 480px; background: var(--bg);
  border: 0.5px solid var(--border2); border-radius: 8px;
  padding: 10px 14px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  pointer-events: none;
}

/* ── Tabular numbers ────────────────────────────────────────────── */
.num { font-variant-numeric: tabular-nums; }
.steam-link { color: inherit; text-decoration: none; }
.steam-link:hover { text-decoration: underline; color: var(--accent-sys); }
.verdict-guilty    { color: var(--red); font-size: 12px; font-weight: 500; white-space: nowrap; }
.verdict-warning   { color: var(--amber); font-size: 12px; font-weight: 500; }
.verdict-acquitted { color: #3B8A3E; font-size: 12px; font-weight: 500; }
.mono { font-family: var(--mono); font-size: 11px; }
.muted { color: var(--text2); }
.small { font-size: 12px; }

/* ── Utility colour spans ───────────────────────────────────────────── */
.green { color: var(--accent-game); }
.red   { color: var(--red); }
.blue  { color: var(--accent-sys); }
.amber { color: var(--amber); }

/* ── Collapsible section ────────────────────────────────────────── */
.collapsible-section { border: none; }
.collapsible-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text2);
  padding: 8px 0; user-select: none;
}
.collapsible-header::-webkit-details-marker { display: none; }
.collapsible-header::before {
  content: '▶';
  display: inline-block; margin-right: 6px;
  font-size: 9px; transition: transform 0.15s;
  color: var(--text2);
}
details[open] .collapsible-header::before { transform: rotate(90deg); }
.collapsible-hint {
  font-size: 11px; color: var(--text2); font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 750px) {
  body { padding: 8px 8px 48px; }

  .two-col, .three-col { grid-template-columns: 1fr; }
  .metrics-row { grid-template-columns: 1fr 1fr; }

  /* Topbar */
  .topbar { padding: 12px 16px 0; }
  .topbar-auth {
    position: static;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
  }
  .topbar-selectors {
    flex-direction: column; align-items: flex-start;
  }
  .selector-group { flex-direction: column; align-items: flex-start; gap: 3px; }
  .selector-group select { min-width: 0; width: 100%; }

  /* Tabs — compact on mobile */
  .tab { padding: 7px 12px; font-size: 12px; }

  /* Panels — clip overflow so tables can't expand the shell */
  .panel { padding: 16px 12px; overflow-x: hidden; }

  /* Tables — scroll inside their container */
  .data-table,
  .event-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid cells must not expand beyond their track */
  .two-col > *, .three-col > * { min-width: 0; overflow-x: auto; }

  /* Shell clips any remaining overflow */
  .shell { overflow-x: hidden; }

  /* Modal */
  .modal { width: calc(100vw - 32px); padding: 20px 16px; }

  /* Promo cards wrap tighter */
  #bf-promotions { gap: 6px; }
  .promo-item { font-size: 12px; padding: 5px 8px; }

  /* Chart heights reduce slightly */
  .chart-wrap { height: 180px; }
  .chart-wrap.tall { height: 220px; }
  .chart-wrap.short { height: 100px; }
}

/* ── Active state for Server Member tab ─────────────────────────── */
.tab.active-member { background: var(--bg); color: var(--amber); border-color: var(--border2); }

/* ── Locked (unauthenticated) tab state ─────────────────────────── */
.tab.locked {
  opacity: 0.45;
  cursor: pointer;
}
.tab.locked::after {
  content: ' 🔒';
  font-size: 10px;
  opacity: 0.8;
}

/* ── Login modal ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius);
  padding: 28px 32px;
  width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-title {
  font-size: 15px; font-weight: 500; margin-bottom: 6px;
}
.modal-hint {
  font-size: 13px; color: var(--text2); margin-bottom: 18px;
}
.modal-input {
  width: 100%; padding: 8px 12px;
  font-size: 14px; font-family: var(--font);
  background: var(--bg2); color: var(--text);
  border: 0.5px solid var(--border2); border-radius: 6px;
  outline: none;
}
.modal-input:focus { border-color: var(--accent-sys); }
.modal-error {
  font-size: 12px; color: var(--red);
  min-height: 18px; margin-top: 6px;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}
.modal-btn-cancel {
  padding: 7px 16px; font-size: 13px; font-family: var(--font);
  background: transparent; color: var(--text2);
  border: 0.5px solid var(--border2); border-radius: 6px; cursor: pointer;
}
.modal-btn-cancel:hover { background: var(--bg3); }

.modal-btn-submit {
  padding: 7px 16px; font-size: 13px; font-family: var(--font);
  background: var(--accent-sys); color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-weight: 500;
}
.modal-btn-submit:hover { opacity: 0.88; }

/* -- Guest / Discord invite panel -- */
#guest-panel {
  display: flex;
  justify-content: center;
  padding: 32px 20px 48px;
}

.dc-card {
  width: min(700px, 100%);
  background: #1e1f22;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
}

.dc-banner { width: 100%; line-height: 0; }
.dc-banner img {
  width: 100%; height: auto;
  display: block;
}

.dc-avatar-wrap {
  position: relative; display: inline-block;
  margin: -28px 0 0 20px;
}

.dc-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #3B6D11, #185FA5);
  border: 5px solid #1e1f22;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: 1px; font-family: var(--font);
}

.dc-online-dot {
  position: absolute; bottom: 4px; right: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #23a55a; border: 3px solid #1e1f22;
}

.dc-body { padding: 10px 20px 24px; }

.dc-name {
  font-size: 20px; font-weight: 700; color: #f2f3f5;
  font-family: var(--font); margin-top: 2px;
}

.dc-tagline { font-size: 13px; color: #b5bac1; margin-top: 3px; font-family: var(--font); }

.dc-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.dc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-family: var(--font);
  padding: 4px 10px; border-radius: 20px; font-weight: 500;
}

.chip-members {
  background: rgba(88,101,242,0.18); color: #a8b4ff;
  border: 1px solid rgba(88,101,242,0.3);
}

.chip-game {
  background: rgba(59,109,17,0.22); color: #8db56a;
  border: 1px solid rgba(59,109,17,0.35);
}

.dc-join-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 18px; padding: 12px 0; width: 100%;
  background: #23a55a; color: #fff;
  font-size: 15px; font-weight: 600; font-family: var(--font);
  border-radius: 8px; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(35,165,90,0.35);
}

.dc-join-btn:hover {
  background: #1a8a49; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(35,165,90,0.45);
}

.dc-join-btn:active { transform: translateY(0); }