@import url("base.css");

/* FMI Gestione per Windows: barra laterale + contenuto, come l'app per Mac */
body { display: block; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.barra {
  background: var(--legno); border-right: 1px solid #E0D5C1; padding: 18px 10px 12px;
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.barra .intestazione { padding: 6px 12px 16px; }
.barra .intestazione h1 { font-size: 22px; }
.barra .intestazione p { font-size: 12px; color: var(--testo2); }
.barra .gruppo { font-size: 12px; color: var(--testo2); padding: 14px 12px 4px; }
.voce {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; text-decoration: none;
  color: var(--testo); font-size: 14px;
}
.voce:hover { background: rgba(79, 107, 74, .08); }
.voce.attiva { background: var(--salvia-tenue); font-weight: 700; }
.voce svg { width: 17px; height: 17px; flex: none; color: var(--salvia); }
.voce .conta { margin-left: auto; font-size: 12px; color: var(--testo2); }
.barra .stato { margin-top: auto; padding: 12px; font-size: 12px; color: var(--testo2); border-top: 1px solid #E0D5C1; }
.barra .stato strong { color: var(--testo); display: block; font-size: 13px; }
.barra .stato .riga { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--spento); flex: none; }
.pallino.ok { background: var(--perla-verde); }
.pallino.attesa { background: var(--perla-oro); }
.pallino.errore { background: var(--rosso); }

.contenuto { min-width: 0; display: flex; flex-direction: column; }
.contenuto > .testata-pagina {
  display: flex; align-items: center; gap: 10px; padding: 12px 28px; border-bottom: 1px solid var(--separatore);
  font-weight: 700; font-size: 14px; position: sticky; top: 0; background: var(--lino); z-index: 4; min-height: 52px;
}
.testata-pagina .bottone-icona { background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 8px; color: var(--testo2); font-size: 18px; }
.testata-pagina .bottone-icona:hover { background: var(--neutro); }
.pagina { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.striscia-demo { position: static; }

/* Intestazioni e griglie */
.intestazione-pagina { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.intestazione-pagina .testi { flex: 1; min-width: 260px; }
.intestazione-pagina h1 { font-size: 28px; }
.griglia-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.statistica {
  background: var(--carta); border: 1px solid var(--bordo-carta); border-radius: var(--raggio); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: inherit;
}
button.statistica { cursor: pointer; }
button.statistica:hover { border-color: var(--bordo-controllo); }
.statistica .etichetta-stat { font-size: 13px; color: var(--testo2); }
.statistica .valore { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.statistica.piccola .valore { font-size: 22px; }
.statistica .nota-stat { font-size: 12px; color: var(--testo2); }

/* Tabelle */
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-weight: 400; font-size: 12px; color: var(--testo2); padding: 7px 10px; border-bottom: 1px solid var(--separatore); white-space: nowrap; }
.tabella td { padding: 9px 10px; border-bottom: 1px solid var(--separatore); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tbody tr { cursor: pointer; }
.tabella tbody tr:hover td { background: rgba(79, 107, 74, .05); }
.tabella tr.scelta td { background: #EDEEE6; }
.tabella .nome { font-weight: 700; }
.tabella .sotto { display: block; color: var(--testo2); font-size: 12px; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scorre { overflow: auto; }

.affiancati { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.pannello { position: sticky; top: 70px; }
.campo-dettaglio { display: flex; flex-direction: column; gap: 3px; }
.campo-dettaglio span:first-child { font-size: 12px; color: var(--testo2); }
.campo-dettaglio span:last-child { font-size: 13px; white-space: pre-line; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--salvia-tenue); color: var(--salvia);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 17px; flex: none;
}
.riga { display: flex; gap: 10px; align-items: center; }
.colonna-flex { display: flex; flex-direction: column; gap: 8px; }
.filtri { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pillola {
  font: 700 13px var(--sans); border: 0; border-radius: 999px; padding: 0 14px; min-height: 32px; cursor: pointer;
  background: var(--neutro); color: var(--testo3);
}
.pillola.attiva { background: var(--salvia); color: #fff; }
.ricerca {
  font: 400 14px var(--sans); border: 1px solid var(--bordo-controllo); border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 240px;
}
.barra-avanzamento { height: 6px; border-radius: 999px; background: var(--neutro); overflow: hidden; }
.barra-avanzamento i { display: block; height: 100%; border-radius: 999px; }
.cerchio {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--spento); background: none; cursor: pointer; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px;
}
.cerchio.ritardo { border-color: var(--rosso); }
.cerchio.fatta { background: var(--salvia); border-color: var(--salvia); }
.data-cal { width: 46px; text-align: center; background: var(--lino); border-radius: 10px; padding: 4px 0; flex: none; }
.data-cal .m { font-size: 11px; font-weight: 700; color: var(--rosso); text-transform: uppercase; }
.data-cal .g { font-family: var(--serif); font-size: 18px; line-height: 1.1; }
.vuoto-pagina { padding: 60px 20px; text-align: center; color: var(--testo2); }
.vuoto-pagina h2 { color: var(--testo); margin-bottom: 8px; font-size: 24px; }

/* Moduli e fogli */
dialog.foglio {
  border: 1px solid var(--bordo-carta); border-radius: 18px; padding: 0; background: var(--lino); color: var(--testo);
  width: min(560px, 94vw); max-height: 90vh; box-shadow: 0 20px 60px rgba(46, 42, 36, .25);
}
dialog.foglio::backdrop { background: rgba(46, 42, 36, .28); }
.foglio-testata { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--separatore); background: var(--carta); position: sticky; top: 0; }
.foglio-testata h2 { font-size: 18px; }
.foglio-corpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: calc(90vh - 60px); }
.modulo { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.modulo label { font-size: 13px; color: var(--testo2); }
.modulo input, .modulo select, .modulo textarea {
  font: 400 14px var(--sans); color: var(--testo); background: #fff; border: 1px solid var(--bordo-controllo);
  border-radius: 9px; padding: 8px 10px; width: 100%;
}
.modulo textarea { min-height: 70px; resize: vertical; }
.modulo .intera { grid-column: 1 / -1; }
.azioni-modulo { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1100px) {
  .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .affiancati { grid-template-columns: 1fr; }
  .pannello { position: static; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .barra { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .barra .intestazione, .barra .gruppo, .barra .stato { display: none; }
  .griglia-2 { grid-template-columns: 1fr; }
  .modulo { grid-template-columns: 1fr; }
  .pagina { padding: 18px; }
}

/* Elenchi (come in FMI Corsi) */
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco > li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--separatore); }
.elenco > li:first-child { border-top: 0; padding-top: 2px; }
.elenco .principale { flex: 1; min-width: 0; }
.elenco .principale strong { display: block; }
.elenco .dettaglio { color: var(--testo2); font-size: 12px; }
.carta-corso { transition: border-color .15s, transform .15s; }
.carta-corso:hover { border-color: var(--bordo-controllo); transform: translateY(-1px); }