/* Generatore Orario Scolastico — foglio di stile unico, senza dipendenze esterne */

:root {
    --blu: #2563eb; --blu-scuro: #1d4ed8; --blu-chiaro: #eff6ff;
    --verde: #16a34a; --verde-chiaro: #f0fdf4;
    --ambra: #d97706; --ambra-chiaro: #fffbeb;
    --rosso: #dc2626; --rosso-chiaro: #fef2f2;
    --viola: #7c3aed;
    --grigio-900: #0f172a; --grigio-700: #334155; --grigio-500: #64748b;
    --grigio-300: #cbd5e1; --grigio-200: #e2e8f0; --grigio-100: #f1f5f9; --grigio-50: #f8fafc;
    --bianco: #fff;
    --ombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --ombra-md: 0 4px 12px rgba(15,23,42,.09);
    --raggio: 10px;
    --sidebar: 250px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; line-height: 1.5; color: var(--grigio-900); background: var(--grigio-50);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }
small, .piccolo { font-size: .82rem; color: var(--grigio-500); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }

/* ---------- struttura ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar); flex: 0 0 var(--sidebar); background: var(--grigio-900); color: #cbd5e1;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .marchio { padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid #1e293b; }
.sidebar .marchio strong { display: block; color: #fff; font-size: .98rem; }
.sidebar .marchio span { font-size: .76rem; color: #94a3b8; }
.sidebar nav { padding: .6rem 0 1.5rem; flex: 1; }
.sidebar .gruppo { padding: .9rem 1.1rem .3rem; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .09em; color: #64748b; font-weight: 700; }
.sidebar a { display: flex; align-items: center; gap: .55rem; padding: .5rem 1.1rem; color: #cbd5e1;
    font-size: .875rem; border-left: 3px solid transparent; }
.sidebar a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.sidebar a.attivo { background: #1e293b; color: #fff; border-left-color: var(--blu); font-weight: 600; }
.sidebar .icona { width: 18px; text-align: center; opacity: .85; }

.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra { background: var(--bianco); border-bottom: 1px solid var(--grigio-200); padding: .7rem 1.4rem;
    display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 20; }
.barra .titolo { font-weight: 650; font-size: 1.02rem; }
.barra .spazio { flex: 1; }
.barra .utente { font-size: .82rem; color: var(--grigio-500); }
.contenuto { padding: 1.4rem; max-width: 1500px; width: 100%; }

/* ---------- componenti ---------- */
.scheda { background: var(--bianco); border: 1px solid var(--grigio-200); border-radius: var(--raggio);
    box-shadow: var(--ombra); margin-bottom: 1.1rem; }
.scheda > header { padding: .85rem 1.1rem; border-bottom: 1px solid var(--grigio-200);
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.scheda > header h2, .scheda > header h3 { margin: 0; }
.scheda > header .spazio { flex: 1; }
.scheda .corpo { padding: 1.1rem; }
.scheda .corpo.stretto { padding: 0; }

.griglia { display: grid; gap: 1rem; }
.griglia.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia.auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.statistica { background: var(--bianco); border: 1px solid var(--grigio-200); border-radius: var(--raggio);
    padding: .95rem 1.05rem; box-shadow: var(--ombra); }
.statistica .valore { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.statistica .etichetta { font-size: .78rem; color: var(--grigio-500); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 600; margin-top: .2rem; }
.statistica .nota { font-size: .78rem; color: var(--grigio-500); margin-top: .35rem; }
.statistica.ok .valore { color: var(--verde); }
.statistica.attenzione .valore { color: var(--ambra); }
.statistica.errore .valore { color: var(--rosso); }

/* ---------- tabelle ---------- */
table.dati { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.dati th { text-align: left; padding: .6rem .75rem; background: var(--grigio-50);
    border-bottom: 1px solid var(--grigio-200); font-weight: 650; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--grigio-500); white-space: nowrap; }
table.dati td { padding: .55rem .75rem; border-bottom: 1px solid var(--grigio-100); vertical-align: middle; }
table.dati tr:last-child td { border-bottom: 0; }
table.dati tbody tr:hover { background: var(--grigio-50); }
table.dati .azioni { text-align: right; white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* ---------- form ---------- */
.campo { margin-bottom: .85rem; }
.campo label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--grigio-700); }
.campo .aiuto { font-size: .76rem; color: var(--grigio-500); margin-top: .25rem; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=color], select, textarea {
    width: 100%; padding: .48rem .6rem; border: 1px solid var(--grigio-300); border-radius: 7px;
    font: inherit; background: var(--bianco); color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blu-chiaro); border-color: var(--blu); }
input[type=color] { padding: 2px; height: 36px; }
input[type=checkbox], input[type=radio] { accent-color: var(--blu); width: 15px; height: 15px; vertical-align: -2px; }
textarea { min-height: 70px; resize: vertical; }
fieldset { border: 1px solid var(--grigio-200); border-radius: var(--raggio); padding: .9rem; margin: 0 0 1rem; }
legend { font-size: .8rem; font-weight: 650; padding: 0 .4rem; color: var(--grigio-700); }
.riga-campi { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.checkbox-riga { display: flex; align-items: center; gap: .45rem; font-size: .86rem; margin-bottom: .35rem; }

/* ---------- pulsanti ---------- */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 7px;
    border: 1px solid var(--grigio-300); background: var(--bianco); color: var(--grigio-900);
    font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--grigio-100); text-decoration: none; }
.btn.primario { background: var(--blu); border-color: var(--blu); color: #fff; }
.btn.primario:hover { background: var(--blu-scuro); }
.btn.successo { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.pericolo { background: var(--bianco); border-color: #fecaca; color: var(--rosso); }
.btn.pericolo:hover { background: var(--rosso-chiaro); }
.btn.piccolo { padding: .28rem .55rem; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-gruppo { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- etichette ---------- */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem;
    font-weight: 650; background: var(--grigio-100); color: var(--grigio-700); }
.badge.success { background: var(--verde-chiaro); color: #15803d; }
.badge.info { background: var(--blu-chiaro); color: var(--blu-scuro); }
.badge.warning { background: var(--ambra-chiaro); color: #b45309; }
.badge.danger { background: var(--rosso-chiaro); color: var(--rosso); }
.badge.muted { background: var(--grigio-100); color: var(--grigio-500); }

.avviso { padding: .7rem .9rem; border-radius: var(--raggio); margin-bottom: .9rem; font-size: .88rem;
    border: 1px solid transparent; }
.avviso.successo { background: var(--verde-chiaro); border-color: #bbf7d0; color: #14532d; }
.avviso.errore { background: var(--rosso-chiaro); border-color: #fecaca; color: #7f1d1d; }
.avviso.attenzione { background: var(--ambra-chiaro); border-color: #fde68a; color: #78350f; }
.avviso.info { background: var(--blu-chiaro); border-color: #bfdbfe; color: #1e3a8a; }
.avviso ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---------- griglia orario ---------- */
.orario { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.orario th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio-500);
    padding: .35rem; font-weight: 700; }
.orario th.ora { width: 74px; text-align: right; padding-right: .55rem; }
.orario td { vertical-align: top; height: 62px; padding: 0; }
.cella { height: 100%; border-radius: 8px; padding: .35rem .45rem; font-size: .78rem; line-height: 1.28;
    border: 1px solid var(--grigio-200); background: var(--bianco); overflow: hidden;
    display: flex; flex-direction: column; gap: 1px; cursor: grab; position: relative; }
.cella.vuota { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
    border-style: dashed; cursor: default; }
.cella .materia { font-weight: 700; font-size: .8rem; }
.cella .docente, .cella .aula { font-size: .72rem; opacity: .85; }
.cella .aula { font-variant-numeric: tabular-nums; }
.cella.bloccata { box-shadow: inset 0 0 0 2px var(--ambra); cursor: not-allowed; }
.cella .lucchetto { position: absolute; top: 2px; right: 4px; font-size: .7rem; }
.cella.trascinata { opacity: .35; }
.cella.destinazione { outline: 2px dashed var(--blu); outline-offset: -3px; }
.cella.conflitto { outline: 2px solid var(--rosso); }

.legenda { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.legenda span { font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; }

/* ---------- utilità ---------- */
.riga { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.destra { margin-left: auto; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .m0 { margin: 0; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.barra-progresso { height: 7px; background: var(--grigio-200); border-radius: 999px; overflow: hidden; }
.barra-progresso i { display: block; height: 100%; background: var(--blu); }
.vuoto { text-align: center; padding: 2.4rem 1rem; color: var(--grigio-500); }

/* ---------- login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e293b, #0f172a); padding: 1.2rem; }
.login .box { background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28);
    width: 100%; max-width: 380px; padding: 1.9rem; }
.login h1 { font-size: 1.22rem; margin-bottom: .2rem; }
.login .sotto { color: var(--grigio-500); font-size: .85rem; margin-bottom: 1.3rem; }

/* ---------- stampa ---------- */
@media print {
    .sidebar, .barra, .no-stampa { display: none !important; }
    body { background: #fff; font-size: 11px; }
    .contenuto { padding: 0; max-width: none; }
    .scheda { box-shadow: none; border: 0; margin-bottom: .6rem; page-break-inside: avoid; }
    .orario td { height: 48px; }
    .cella { border: 1px solid #999 !important; }
    .pagina-nuova { page-break-before: always; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .griglia.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .griglia.c3, .griglia.c2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; }
    .sidebar nav { display: none; }
    .sidebar.aperta nav { display: block; }
    .contenuto { padding: .9rem; }
    .griglia.c4 { grid-template-columns: 1fr; }
    .orario { font-size: .7rem; }
}