/* ===== Variables ===== */
:root {
  /* Couleurs */
  --color-bg: #0f1419;
  --color-surface: #1a222c;
  --color-surface-raised: #232d3a;
  --color-text: #e8edf2;
  --color-text-muted: #9aa8b6;
  --color-primary: #3d8bfd;
  --color-ok: #2e9d57;
  --color-warning: #d9a21b;
  --color-danger: #d64545;
  --color-border: #2f3b4a;

  /* Espacements */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Tailles et formes */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2.25rem;
  --radius-md: 10px;
  --indicator-size: 18px;
  --max-width-page: 920px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-size-md);
  line-height: 1.5;
}
h1, h2 { margin: 0 0 var(--spacing-md); }

/* ===== Composants ===== */
.page { max-width: var(--max-width-page); margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.field { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
.field-label { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.field-input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-md);
}
.button {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
}
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.button-danger { background: var(--color-danger); }
.button-call { font-size: var(--font-size-lg); padding: var(--spacing-lg) var(--spacing-xl); background: var(--color-ok); }

.status-row { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-xl); font-weight: 700; }
.status-indicator { width: var(--indicator-size); height: var(--indicator-size); border-radius: 50%; background: var(--color-text-muted); flex: none; }
.status-indicator.is-ok { background: var(--color-ok); }
.status-indicator.is-warning { background: var(--color-warning); }
.status-indicator.is-danger { background: var(--color-danger); }

.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-md); }
.counter-value { font-size: var(--font-size-lg); font-weight: 700; }
.counter-label { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.event-log { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--font-size-sm); max-height: 260px; overflow: auto; }
.event-log-item { padding: 2px 0; border-bottom: 1px solid var(--color-border); }
.event-log-item.is-error { color: var(--color-danger); }

.call-overlay { position: fixed; inset: 0; background: #000; display: none; z-index: 10; }
.call-overlay.is-visible { display: block; }
.call-remote-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.call-local-video { position: absolute; right: var(--spacing-md); bottom: var(--spacing-md); width: 22vw; max-width: 240px; border-radius: var(--radius-md); border: 2px solid var(--color-border); background: #111; }
.call-controls { position: absolute; left: 0; right: 0; bottom: var(--spacing-lg); display: flex; justify-content: center; }

.audio-unlock { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; text-align: center; font-size: var(--font-size-lg); z-index: 20; padding: var(--spacing-lg); }
.audio-unlock.is-visible { display: flex; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border); }
.data-table th { color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-sm); }

.verdict { font-size: var(--font-size-lg); font-weight: 700; }
.verdict.is-go { color: var(--color-ok); }
.verdict.is-nogo { color: var(--color-warning); }
.check-list { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; }
.check-item::before { content: "✗ "; color: var(--color-danger); }
.check-item.is-ok::before { content: "✓ "; color: var(--color-ok); }

.muted { color: var(--color-text-muted); }

/* ===== Utilitaires ===== */
.is-hidden { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .status-row { font-size: var(--font-size-lg); }
  .call-local-video { width: 30vw; }
}