/* SaveState Admin — mirrors the app's design tokens
   (apps/mobile/lib/core/ui/theme/app_colors.dart / app_spacing.dart). */
:root {
  --background: #0d1017;
  --surface: #141923;
  --surface-card: #1a2029;
  --surface-elevated: #222937;
  --accent: #00ff94;
  --accent-subtle: rgba(0, 255, 148, 0.1);
  --accent-dim: rgba(0, 255, 148, 0.3);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.54);
  --text-disabled: rgba(255, 255, 255, 0.38);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --error: #ff6b6b;
  --award: #ffd700;

  --brand-playstation: #0070d1;
  --brand-xbox: #107c10;
  --brand-nintendo: #e4000f;
  --brand-ea: #ff4747;
  --brand-ubisoft: #148eff;

  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 20px;

  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; white-space: nowrap; }
.brand-state { color: var(--accent); }
.brand-tag {
  margin-left: var(--sp-xs);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-card); border-radius: var(--radius-pill);
  padding: 2px var(--sp-sm); vertical-align: middle;
}
.nav { display: flex; gap: var(--sp-xs); flex: 1; }
.nav a {
  color: var(--text-secondary); text-decoration: none; font-weight: 500;
  padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-pill);
}
.nav a.active { color: var(--accent); background: var(--accent-subtle); }
.user { display: flex; align-items: center; gap: var(--sp-md); margin-left: auto; color: var(--text-muted); font-size: 13px; }

.container { max-width: 1100px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg) 64px; }
.loading, .empty { color: var(--text-muted); padding: var(--sp-xl) 0; }

/* ── Type ────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
.section-title { display: flex; align-items: center; gap: var(--sp-sm); }
.section-title::before {
  content: ''; width: 3px; height: 16px; border-radius: var(--radius-pill); background: var(--accent);
}
.muted { color: var(--text-muted); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); margin-bottom: var(--sp-xl); flex-wrap: wrap; }

/* ── Cards / forms ───────────────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
}
.stack > * + * { margin-top: var(--sp-lg); }

.input {
  width: 100%;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-lg);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input-date { width: auto; padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius-md); }
label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-xs); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  font: inherit; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-lg); border: 1px solid transparent;
  padding: var(--sp-md) var(--sp-xl); cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); color: #000; }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-card); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: var(--sp-xs) var(--sp-md); font-size: 13px; }
.btn-ghost:hover { color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--error); padding: var(--sp-xs) var(--sp-sm); font-size: 13px; }
.btn-block { width: 100%; }

.divider { display: flex; align-items: center; gap: var(--sp-md); color: var(--text-disabled); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-card); }

.error-text { color: var(--error); font-size: 13px; }

/* ── Login ───────────────────────────────────────────────────────────── */
.login { max-width: 400px; margin: 48px auto 0; }

/* ── Service chips (same as the app's filled CoverChip) ──────────────── */
.chip {
  display: inline-block;
  font-size: 11px; font-weight: 700; color: #fff;
  border-radius: var(--radius-sm);
  padding: 1px var(--sp-xs);
  background: var(--chip-color);
}
.toggle {
  font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px var(--sp-md);
}
.toggle.on { color: #fff; background: var(--chip-color); border-color: var(--chip-color); font-weight: 600; }
.toggles { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

/* ── Search results ──────────────────────────────────────────────────── */
.results {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.result {
  background: none; border: 2px solid transparent; border-radius: var(--radius-md);
  padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.result.selected { border-color: var(--accent); }
.cover {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-md); background: var(--surface-elevated);
}
.result-name { font-size: 12px; margin-top: var(--sp-xs); padding: 0 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.result-year { font-size: 11px; color: var(--text-muted); padding: 0 2px; }

.selected-game { display: flex; gap: var(--sp-lg); align-items: flex-start; }
.selected-game .cover { width: 90px; flex-shrink: 0; }

/* ── Current list ────────────────────────────────────────────────────── */
.game-row {
  display: flex; gap: var(--sp-lg); align-items: flex-start;
  padding: var(--sp-lg) 0; border-top: 1px solid var(--border-subtle);
}
.game-row:first-child { border-top: none; }
.game-row .cover { width: 56px; flex-shrink: 0; }
.game-row-body { flex: 1; min-width: 0; }
.game-row-name { font-weight: 600; margin-bottom: var(--sp-sm); }
.service-line { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; padding: var(--sp-xs) 0; }
.service-line .chip { min-width: 36px; text-align: center; }
.tag-expired { font-size: 11px; font-weight: 600; color: var(--award); }
.service-line.expired .chip { opacity: 0.45; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-xl); transform: translateX(-50%);
  background: var(--surface-elevated); border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); padding: var(--sp-md) var(--sp-lg);
  max-width: calc(100% - 32px);
}
.toast.error { border-color: var(--error); color: var(--error); }

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: var(--sp-md); }
  .user span { display: none; }
  .card { padding: var(--sp-lg); }
}