@import '../features/onboarding/onboarding.css';
@import '../features/listone/listone.css';
@import '../features/asta/asta.css';
@import '../features/dashboard/dashboard.css';
@import '../features/admin/admin.css';
@import '../features/backup/backup.css';
@import '../shared/nav.css';

/*
 * Stili di base. Tema scuro fisso: l'asta si gioca di sera, e la schermata TV
 * sta su uno schermo grande in una stanza con le luci basse.
 */

:root {
  --ground: #0b0f12;
  --surface: #141a1f;
  --border: #232c33;
  --text: #e8eef2;
  --text-muted: #93a3ae;
  --accent: #12b981;
  --warn: #f0b429;

  --radius: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

/*
 * `hidden` deve vincere su qualunque `display` dichiarato.
 *
 * La regola dello user-agent e' `[hidden] { display: none }`, con specificita'
 * bassissima: basta un `.qualcosa { display: flex }` per batterla, e da quel
 * momento `nodo.hidden = true` non nasconde piu' niente — in silenzio, perche'
 * l'attributo nel DOM c'e'. Le viste qui usano `hidden` per cose che *devono*
 * sparire, come il pulsante del banditore per chi non e' admin.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Utility condivise ───────────────────────────────────────────────────── */

h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.02em;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tagline {
  margin: 0.5rem 0 2rem;
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.status {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9rem;
}

.status--ok {
  border-left-color: var(--accent);
}

.status--warn {
  border-left-color: var(--warn);
}

.link {
  color: var(--accent);
}

/* ── Not-found ───────────────────────────────────────────────────────────── */

.not-found {
  max-width: 32rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 6rem) 1.25rem;
  text-align: center;
}

.not-found h1 {
  margin-bottom: 0.75rem;
}