/*
 * Jetons de `docs/DESIGN_SYSTEM.md` §2, recopiés ici en CSS brut : cette page
 * n'a pas accès à `app/theme/tokens.dart`, elle n'est pas Flutter. Palette
 * sombre par défaut, dérivée claire sous `prefers-color-scheme: light` (la
 * même logique que l'app, où le thème clair est une exigence de premier
 * niveau, pas une variante dégradée).
 *
 * Police : empilement système plutôt que Sora chargée depuis un CDN — cette
 * page porte un jeton de confirmation dans son URL, elle n'envoie sa
 * présence à aucun tiers (docs/SECURITY_AND_PRIVACY.md §3).
 */
:root {
  --surface-deep: #0a0f17;
  --surface: #111827;
  --surface-elevated: #1e293b;
  --primary: #2563eb;
  --success: #a3e635;
  --warning: #f59e0b;
  --danger: #ef4444;
  --on-surface: #f8fafc;
  --on-surface-muted: #94a3b8;
  --outline: #334155;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --surface-deep: #f8fafc;
    --surface: #ffffff;
    --surface-elevated: #f1f5f9;
    --primary: #1d4ed8;
    --success: #4d7c0f;
    --warning: #b45309;
    --danger: #dc2626;
    --on-surface: #0f172a;
    --on-surface-muted: #475569;
    --outline: #cbd5e1;
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-deep);
  color: var(--on-surface);
  font-family:
    'Segoe UI',
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xxl);
}

.loading,
.error-banner {
  color: var(--on-surface-muted);
}

h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}

p {
  margin: 0 0 var(--space-md);
}

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.status-banner {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.status-banner.info {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--on-surface);
}

.status-banner.warning {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--on-surface);
}

.status-banner.error {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--on-surface);
}

.status-banner.success {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--on-surface);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  color: var(--on-surface-muted);
  font-size: 14px;
  margin-bottom: var(--space-lg);
}

.teams {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.team-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--outline);
}

.team-row:last-child {
  border-bottom: none;
}

.team-names {
  font-weight: 600;
}

.team-names .winner-tag {
  font-weight: 500;
  font-size: 12px;
  color: var(--success);
  margin-left: var(--space-sm);
}

.score-lines {
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-muted);
  font-size: 14px;
  margin: 0 0 var(--space-lg);
}

.score-lines li {
  margin-bottom: var(--space-xs);
}

.termination-note {
  font-size: 14px;
  color: var(--on-surface-muted);
  margin-bottom: var(--space-lg);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

button {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  min-height: 48px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
}

button.primary {
  background: var(--primary);
  color: #ffffff;
}

button.secondary {
  background: var(--surface-elevated);
  color: var(--on-surface);
  border: 1px solid var(--outline);
}

button.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea {
  width: 100%;
  font: inherit;
  color: var(--on-surface);
  background: var(--surface-elevated);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-height: 96px;
  margin-bottom: var(--space-md);
  resize: vertical;
}

.field-error {
  color: var(--danger);
  font-size: 14px;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
}

.dispute-form {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--outline);
}

footer {
  color: var(--on-surface-muted);
  font-size: 12px;
  text-align: center;
  margin-top: var(--space-xxl);
}