/*
 * da-kimi - stile comune
 * Tavolozza "proposta C" (colori del logo), tema chiaro e scuro.
 * Il tema segue il dispositivo; data-theme="light|dark" su <html> lo forza (vedi app.js).
 */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700-italic.woff2') format('woff2');
}

/* ---------- Colori ---------- */

:root {
  --bg: #EEF5FB;
  --surface: #FFFFFF;
  --surface-2: color-mix(in srgb, var(--bg) 50%, var(--surface));
  --ink: #0E2A55;
  --muted: #50657F;
  --line: #CFE0EF;
  --grid: #E3EEF7;
  --title: #00378A;
  --header-bg: #FFFFFF;
  --primary: #0469B1;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #000);
  --on-primary: #FFFFFF;
  --primary-ink: #035A99;

  --pensione-bg: #FBE3E0; --pensione-line: #E39A92; --pensione-ink: #6E1A13;
  --asilo-bg: #FFF1C2;    --asilo-line: #E3BD4E;    --asilo-ink: #5C4300;
  --inser-bg: #DDF3F7;    --inser-line: #7CC6D6;    --inser-ink: #0B4F5E;

  --err: #A8231B;  --err-bg: #FBE3E0;
  --warn: #7A5000; --warn-bg: #FFF1CF;
  --ok: var(--primary-ink); --ok-bg: color-mix(in srgb, var(--primary) 12%, var(--surface));

  --logo-bg: transparent;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1620;
    --surface: #10212F;
    --ink: #E1EEF8;
    --muted: #93ABC0;
    --line: #22394C;
    --grid: #18303F;
    --title: #E1EEF8;
    --header-bg: #10212F;
    --primary: #5DB0EE;
    --primary-hover: color-mix(in srgb, var(--primary) 85%, #fff);
    --on-primary: #06121B;
    --primary-ink: #7CC0F2;

    --pensione-bg: #47201C; --pensione-line: #8E3F36; --pensione-ink: #FFD2CC;
    --asilo-bg: #3F3312;    --asilo-line: #8C7123;    --asilo-ink: #FBE3A0;
    --inser-bg: #123A43;    --inser-line: #2F7F90;    --inser-ink: #C4EEF7;

    --err: #FF9A90;  --err-bg: #3D1C19;
    --warn: #F2C46B; --warn-bg: #3A2E12;

    --logo-bg: #FFFFFF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A1620;
  --surface: #10212F;
  --ink: #E1EEF8;
  --muted: #93ABC0;
  --line: #22394C;
  --grid: #18303F;
  --title: #E1EEF8;
  --header-bg: #10212F;
  --primary: #5DB0EE;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #fff);
  --on-primary: #06121B;
  --primary-ink: #7CC0F2;

  --pensione-bg: #47201C; --pensione-line: #8E3F36; --pensione-ink: #FFD2CC;
  --asilo-bg: #3F3312;    --asilo-line: #8C7123;    --asilo-ink: #FBE3A0;
  --inser-bg: #123A43;    --inser-line: #2F7F90;    --inser-ink: #C4EEF7;

  --err: #FF9A90;  --err-bg: #3D1C19;
  --warn: #F2C46B; --warn-bg: #3A2E12;

  --logo-bg: #FFFFFF;
  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

[hidden] { display: none !important; }
a { color: var(--primary-ink); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; }

/* ---------- Intestazione ---------- */

.topbar-wrap { background: var(--header-bg); border-bottom: 1px solid var(--line); }

.topbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  color: var(--title);
  text-decoration: none;
}
.brand img {
  display: block;
  height: 44px;
  width: auto;
  background: var(--logo-bg);
  border-radius: 8px;
  padding: 2px 4px;
}
.brand span { font-size: 1.25rem; font-weight: 700; }

.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
.tabs a {
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 700; }

.user-menu { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.user-menu .user-name { color: var(--muted); font-size: .92rem; }

/* ---------- Contenuto ---------- */

main { max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
}
.toolbar h1, .toolbar h2 { margin: 0; font-size: 1.3rem; }

.hint { color: var(--muted); font-size: .92rem; margin: 0 0 12px; max-width: 72ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
}

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state h2 { color: var(--ink); margin: 0 0 8px; font-size: 1.2rem; }
.empty-state p { margin: 0 auto; max-width: 56ch; }

/* ---------- Pulsanti ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-small { padding: 6px 12px; font-size: .9rem; }
.btn-danger { color: var(--err); border-color: currentColor; background: transparent; }
.btn-block { width: 100%; }

/* ---------- Moduli ---------- */

.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: .92rem; color: var(--muted); }
.field input, .field select, .field textarea {
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field .field-error { color: var(--err); font-size: .88rem; }
.check { display: flex; align-items: center; gap: 8px; }

/* ---------- Messaggi ---------- */

.msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: .95rem; }
.msg ul { margin: 0; padding-left: 18px; }
.msg-err { background: var(--err-bg); color: var(--err); }
.msg-warn { background: var(--warn-bg); color: var(--warn); }
.msg-ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- Pagine di accesso ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.auth-box { width: min(400px, 100%); }
.auth-logo { text-align: center; margin-bottom: 16px; }
.auth-logo img {
  width: min(260px, 70%);
  height: auto;
  background: var(--logo-bg);
  border-radius: 12px;
  padding: 6px 10px;
}
.auth-box h1 { margin: 0 0 16px; font-size: 1.3rem; color: var(--title); text-align: center; }
.auth-links { margin-top: 14px; text-align: center; font-size: .92rem; }

/* ---------- Pagine di errore ---------- */

.error-page { text-align: center; padding: 64px 20px; }
.error-page .code { font-size: 3rem; font-weight: 700; color: var(--primary-ink); margin: 0; }
.error-page h1 { margin: 8px 0 12px; font-size: 1.4rem; }
.error-page p { color: var(--muted); margin: 0 auto 20px; max-width: 56ch; }

/* ---------- Telefono ---------- */

@media (max-width: 600px) {
  .topbar { padding: 10px 16px 0; }
  main { padding: 0 16px 40px; }
  .brand img { height: 36px; }
  .brand span { font-size: 1.05rem; }
  .user-menu .user-name { display: none; }
}