/* Dashboard filiera — foglio di stile.
   Palette e impianto ripresi dal CdC Manager (plan #157): :root = tema chiaro,
   [data-theme="dark"] = scelta esplicita del toggle, @media = automatico dal
   sistema quando l'utente non ha forzato nulla.
   Aggiunte proprie: barre di avanzamento, riquadri dei totali, gruppi
   collassabili, e un impianto responsive — questa pagina verrà aperta dal
   telefono, non dalla scrivania. */

:root {
  --bg: #f6f6f4;
  --fg: #222;
  --surface: #fff;
  --surface-alt: #eceadf;
  --border: #e4e4e0;
  --hr: #ddd;
  --nav-bg: #2b2d42;
  --nav-fg: #fff;
  --nav-link: #d6d8e7;
  --nav-who: #9aa0c3;
  --muted: #777;
  --accent: #2b6cb0;
  --danger: #b03030;
  --warn-accent: #c77700;
  --input-border: #bbb;
  --btn-border: #888;
  --btn-border-ghost: #999;
  --badge-bg: #e0e0db;
  --ok-bg: #d3efd8;    --ok-fg: #1d6330;
  --warn-bg: #ffe4b3;  --warn-fg: #7a4d00;
  --error-bg: #f6c8c8; --error-fg: #8c1d1d;
  --bar-track: #e2e2dc;
  --bar-idle: #b9b9b2;
  --bar-started: #2b6cb0;
  --bar-done: #1d6330;
  color-scheme: light dark;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
}

/* I due selettori del tema scuro condividono gli stessi valori (duplicati:
   nessun preprocessore in questo progetto). */
:root[data-theme="dark"] {
  --bg: #17181c;
  --fg: #e6e7ea;
  --surface: #22242b;
  --surface-alt: #2b2e37;
  --border: #363942;
  --hr: #363942;
  --nav-bg: #0f1014;
  --nav-fg: #f0f1f5;
  --nav-link: #b8bcd0;
  --nav-who: #8f94ad;
  --muted: #9aa0ab;
  --accent: #4a90d9;
  --danger: #d05a5a;
  --warn-accent: #d99a3c;
  --input-border: #454852;
  --btn-border: #565a66;
  --btn-border-ghost: #565a66;
  --badge-bg: #33363e;
  --ok-bg: #16351f;    --ok-fg: #7fe0a0;
  --warn-bg: #3a2e12;  --warn-fg: #f0c766;
  --error-bg: #3a1d1d; --error-fg: #f0a5a5;
  --bar-track: #33363e;
  --bar-idle: #565a66;
  --bar-started: #4a90d9;
  --bar-done: #4bbf74;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181c;
    --fg: #e6e7ea;
    --surface: #22242b;
    --surface-alt: #2b2e37;
    --border: #363942;
    --hr: #363942;
    --nav-bg: #0f1014;
    --nav-fg: #f0f1f5;
    --nav-link: #b8bcd0;
    --nav-who: #8f94ad;
    --muted: #9aa0ab;
    --accent: #4a90d9;
    --danger: #d05a5a;
    --warn-accent: #d99a3c;
    --input-border: #454852;
    --btn-border: #565a66;
    --btn-border-ghost: #565a66;
    --badge-bg: #33363e;
    --ok-bg: #16351f;    --ok-fg: #7fe0a0;
    --warn-bg: #3a2e12;  --warn-fg: #f0c766;
    --error-bg: #3a1d1d; --error-fg: #f0a5a5;
    --bar-track: #33363e;
    --bar-idle: #565a66;
    --bar-started: #4a90d9;
    --bar-done: #4bbf74;
    color-scheme: dark;
  }
}
:root[data-theme="light"] { color-scheme: light; }

/* --- impianto ----------------------------------------------------------- */
body { margin: 0; background: var(--bg); }
nav { display: flex; gap: 1rem; align-items: center; background: var(--nav-bg);
      color: var(--nav-fg); padding: .6rem 1rem; flex-wrap: wrap; }
nav a { color: var(--nav-link); text-decoration: none; }
nav a:hover { color: var(--nav-fg); }
nav a.brand { font-weight: 700; color: var(--nav-fg); }
nav .spacer { flex: 1; }
nav .who { color: var(--nav-who); font-size: .9rem; }
nav button.ghost { color: var(--nav-link); }
main { max-width: 1040px; margin: 1rem auto; padding: 0 1rem 3rem; }
h1 { font-size: 1.4rem; margin-bottom: .2rem; }
h2 { font-size: 1.05rem; margin-top: 1.6rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
hr { border: none; border-top: 1px solid var(--hr); margin: 1.4rem 0; }

/* --- tabelle ------------------------------------------------------------ */
/* Su schermo stretto la tabella scorre DENTRO il suo contenitore: senza
   questo, una riga larga fa scorrere l'intera pagina in orizzontale e la
   navigazione col pollice diventa un terno al lotto. */
table { width: 100%; border-collapse: collapse; background: var(--surface);
        display: block; overflow-x: auto; }
@media (min-width: 720px) { table { display: table; } }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border);
         white-space: nowrap; }
th { background: var(--surface-alt); font-size: .85rem; }
table.people td:first-child, table.people th:first-child { white-space: normal; min-width: 12rem; }

/* --- riquadri e pannelli ------------------------------------------------ */
.panel { background: var(--surface); border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0; }
.panel.warn { border-left: 4px solid var(--warn-accent); }
.panel.error { border-left: 4px solid var(--danger); }
.panel.ok { border-left: 4px solid var(--ok-fg); }
.flash { padding: .55rem .9rem; border-radius: 6px; margin-bottom: .8rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash.warn { background: var(--warn-bg); color: var(--warn-fg); }
.flash.error { background: var(--error-bg); color: var(--error-fg); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 9px;
         font-size: .78rem; background: var(--badge-bg); }
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.error { background: var(--error-bg); color: var(--error-fg); }

/* --- i tre numeri in cima ----------------------------------------------- */
.totals { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.tile { background: var(--surface); border-radius: 10px; padding: .8rem 1rem;
        flex: 1 1 8rem; display: flex; flex-direction: column; gap: .15rem; }
.tile.wide { flex: 2 1 16rem; justify-content: center; }
.tile .n { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.tile .l { font-size: .8rem; color: var(--muted); }

/* --- barre -------------------------------------------------------------- */
.bar { display: inline-block; vertical-align: middle; width: 7rem; height: .55rem;
       background: var(--bar-track); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--bar-idle); }
.bar-fill.started { background: var(--bar-started); }
.bar-fill.done { background: var(--bar-done); }
.bar-num { font-size: .8rem; color: var(--muted); margin-left: .4rem;
           font-variant-numeric: tabular-nums; }

/* --- gruppi collassabili ------------------------------------------------ */
details.group { background: var(--surface); border-radius: 8px; padding: .55rem .9rem;
                margin: .5rem 0; }
details.group summary { cursor: pointer; display: flex; gap: .6rem; align-items: center;
                        flex-wrap: wrap; list-style: none; }
/* Un `summary` in flex perde il triangolo nativo (`::marker` non si disegna sui
   contenitori flex), e senza nessun segno le righe sembrano statiche: nessuno
   prova ad aprirle. Il triangolo va quindi ridisegnato a mano, e ruota
   all'apertura per dare il verso. */
details.group summary::-webkit-details-marker { display: none; }
details.group summary::before {
  content: "▸"; color: var(--muted); font-size: .9rem;
  transition: transform .12s ease; display: inline-block;
}
details.group[open] summary::before { transform: rotate(90deg); }
.g-label { font-weight: 600; }
.g-meta { color: var(--muted); font-size: .85rem; flex: 1; }
.drill { margin: .6rem 0 .4rem; font-size: .9rem; }
ul.mini { margin: .3rem 0 .5rem; padding-left: 1.2rem; font-size: .88rem; color: var(--muted); }

/* --- moduli e controlli ------------------------------------------------- */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin: .9rem 0; align-items: end; }
input, select, button { font: inherit; padding: .35rem .5rem; }
input, select { border: 1px solid var(--input-border); border-radius: 5px;
                background: var(--surface); color: var(--fg); }
label { display: inline-flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
button { border: 1px solid var(--btn-border); border-radius: 6px; background: var(--surface);
         cursor: pointer; color: var(--fg); padding: .4rem .8rem; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: transparent; border-color: var(--btn-border-ghost); color: inherit; }
.inline { display: inline-flex; gap: .4rem; align-items: center; }
.login-box { max-width: 360px; margin: 12vh auto; background: var(--surface);
             padding: 1.5rem; border-radius: 10px; }
.login-box form { display: flex; flex-direction: column; gap: .8rem; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.kv dt { color: var(--muted); font-size: .88rem; }
dl.kv dd { margin: 0; }

/* --- le due età, in fondo a ogni pagina --------------------------------- */
footer.ages { margin-top: 2.5rem; padding-top: .8rem; border-top: 1px solid var(--hr);
              font-size: .82rem; color: var(--muted); display: flex; gap: .5rem;
              flex-wrap: wrap; }
footer.ages .sep { opacity: .5; }

/* Progressive enhancement: senza JavaScript i controlli che ne dipendono non
   compaiono affatto, invece di comparire e non funzionare. */
.js-only { display: none; }
.js .js-only { display: inline-flex; }
ul.mini.linked { list-style: none; padding-left: .2rem; }
ul.mini.linked li { padding: .12rem 0; color: var(--fg); }