:root{
  --chrome-bg:#F3F2F1;
  --chrome-surface:#FFFFFF;
  --chrome-border:#E1DFDD;
  --chrome-text:#1B1A19;
  --chrome-text-dim:#605E5C;
  --accent:#217346;
  --accent-ink:#0F3D26;
  --chip-ring:#0B5FFF;
  --sheet-bg:#FFFFFF;
  --sheet-line:#B7B7B7;
  --sheet-line-strong:#404040;
  --sheet-text:#1A1A1A;
  --gutter-text:#8A8886;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --chrome-bg:#1F1F1F;
    --chrome-surface:#2B2B2B;
    --chrome-border:#3B3B3B;
    --chrome-text:#F3F2F1;
    --chrome-text-dim:#B3B0AD;
    --accent:#3FA66E;
    --accent-ink:#BFF0D6;
  }
}
:root[data-theme="dark"]{
  --chrome-bg:#1F1F1F;
  --chrome-surface:#2B2B2B;
  --chrome-border:#3B3B3B;
  --chrome-text:#F3F2F1;
  --chrome-text-dim:#B3B0AD;
  --accent:#3FA66E;
  --accent-ink:#BFF0D6;
}
body{
  background:var(--chrome-bg);
  color:var(--chrome-text);
  font-family:Calibri,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* height, non min-height: un flex container ha bisogno di un'altezza "definita"
   perché flex:1 + min-height:0 sotto (.sheet-wrap) possa davvero clippare il
   contenuto invece di farlo scrollare crescendo oltre la viewport — min-height
   da solo fissa un minimo ma non impedisce la crescita (verificato dal vivo:
   con min-height la pagina intera cresceva a 1914px anche su una viewport di
   922px, .statusbar finiva fuori dallo schermo). */
.app{display:flex;flex-direction:column;height:100dvh;}

/* ---------- title bar ---------- */
.titlebar{
  display:flex;align-items:baseline;gap:.6rem;
  padding:14px 20px 4px;
  flex-wrap:wrap;
}
.titlebar h1{
  font-size:1.35rem;margin:0;font-weight:700;letter-spacing:.2px;
}
.titlebar .badge{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:2px 8px;border-radius:999px;
}
.titlebar .sub{
  font-size:.82rem;color:var(--chrome-text-dim);
}
.titlebar .spacer-flex{flex:1 1 auto;}
/* display:contents: il form non deve generare una propria box nel flex della
   titlebar, altrimenti il bottone al suo interno si allinea/dimensiona in modo
   diverso dai MudButton diretti (visto: ESCI più alto e disallineato). */
.titlebar form{display:contents;}
.titlebar .mud-button-root{white-space:nowrap;flex-shrink:0;}

/* ---------- navigazione periodo (precedente/Oggi/successivo) — issue #124:
   prima erano un'icona nuda e un link testuale, "troppo essenziali". Pillole
   arrotondate in linea con badge/palette del resto del portale. ---------- */
.nav-buttons{display:flex;align-items:center;gap:6px;}
.nav-buttons .nav-btn{
  border-radius:8px !important;border:1px solid var(--chrome-border) !important;
  background:var(--chrome-surface) !important;color:var(--chrome-text) !important;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease;
}
.nav-buttons .nav-btn:hover{
  background:var(--accent) !important;color:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.nav-buttons .nav-btn:active{transform:translateY(1px);}
.nav-buttons .nav-btn-today{font-weight:600;padding:4px 18px !important;}
.nav-buttons .nav-btn-icon{width:34px;height:34px;}

.occupato-opaco{font-style:italic;color:var(--chrome-text-dim);font-size:.62rem;}

/* ---------- sheet ---------- */
/* min-height:0 indispensabile: un flex item con overflow:auto senza questo si
   espande al contenuto invece di scrollare al suo interno (gotcha classico di
   Flexbox) — con 28 settimane di righe, l'intera pagina cresceva oltre lo
   schermo e la .statusbar sotto finiva trascinata fuori dalla vista, invisibile
   senza scrollare tutta la pagina fino in fondo. */
.sheet-wrap{flex:1;min-height:0;overflow:auto;padding:18px 20px 30px;background:var(--chrome-bg);}
.sheet{
  background:var(--sheet-bg);
  display:inline-block;
  padding:14px;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.band + .band{margin-top:16px;}
.band-row{display:flex;}
.week{display:flex;flex-direction:column;margin-left:10px;}
.week:first-of-type{margin-left:0;}
.week-row{display:flex;}
.daycol{width:80px;}
.daycol + .daycol{border-left:1px solid var(--sheet-line);}
.week .daycol:first-child{border-left:2px solid var(--sheet-line-strong);}
.week .daycol:last-child{border-right:2px solid var(--sheet-line-strong);}

.gutter{width:34px;flex:none;}
/* Stessi spessori di bordo delle celle reali (LUN/data/anno-settimana), solo trasparenti:
   "none" li azzererebbe, disallineando le ore a sinistra rispetto agli slot sotto, che
   restano alla stessa altezza dettata dai bordi veri delle celle del giorno. */
.gutter .hdr-cell,.gutter .date-cell,.gutter .week-num{background:transparent;}
.gutter .week-num{border-top-color:transparent;}
.gutter .hdr-cell{border-top-color:transparent;border-bottom-color:transparent;}
.gutter .date-cell{border-bottom-color:transparent;}
.gutter .hourlabel{
  height:22px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;font-size:.6rem;color:var(--gutter-text);
  font-variant-numeric:tabular-nums;
}
.gutter .lunch{height:8px;}

.hdr-cell,.date-cell{
  color:var(--sheet-text);
  text-align:center;font-weight:700;font-size:.78rem;
  border-top:2px solid var(--sheet-line-strong);
  border-bottom:1px solid var(--sheet-line);
  padding:3px 2px;line-height:1.2;background:var(--sheet-bg);
  font-variant-numeric:tabular-nums;
}
/* Bordo forte (non il border-bottom:1px ereditato sopra) per chiudere il riquadro
   LUN/data: un rettangolo attorno solo a queste due righe, non a tutta la settimana.
   .gutter .date-cell resta border-bottom:none (vedi regola sopra, più specifica). */
.date-cell{border-top:none;font-weight:700;border-bottom:2px solid var(--sheet-line-strong);}

/* Riga anno/settimana ISO sopra LUN-VEN (issue: "a fianco sopra 9-10 l'anno e il numero
   di settimana"): stessa fascia grigia del gutter, font più piccolo perché è un dettaglio
   di riferimento, non l'informazione principale della colonna. */
.week-num{
  text-align:center;font-size:.6rem;color:var(--chrome-text-dim);font-weight:600;
  border-top:2px solid var(--sheet-line-strong);
  padding:1px 2px;line-height:1.3;background:var(--chrome-bg);
  font-variant-numeric:tabular-nums;
}
/* Bordi laterali forti, come il resto della settimana sotto: senza questi la riga anno/
   settimana "sborda" a sinistra e a destra rispetto al riquadro LUN-VEN. Solo sulla riga
   dentro .week: quella nel gutter resta senza bordo, come le altre celle del gutter. */
.week > .week-num{border-left:2px solid var(--sheet-line-strong);border-right:2px solid var(--sheet-line-strong);}
.daycol.passato .hdr-cell,.daycol.passato .date-cell{background:#FFF3B0;}
.daycol.festivo .hdr-cell,.daycol.festivo .date-cell{background:#F4C7C3;}
.daycol.oggi .hdr-cell,.daycol.oggi .date-cell{background:#B8F0C1;}
/* Menu "Copia/Incolla giornata" sull'intestazione del giorno (issue #79). */
.daycol{position:relative;}
.week .hdr-cell{cursor:pointer;}
.week .hdr-cell:hover{filter:brightness(0.95);}
.daycol.giornata-copiata .hdr-cell,.daycol.giornata-copiata .date-cell{outline:2px dashed var(--accent);outline-offset:-2px;}
.menu-giorno-backdrop{position:fixed;inset:0;z-index:20;}
.menu-giorno{
  position:absolute;top:100%;left:0;z-index:21;min-width:170px;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--sheet-line-strong);border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);padding:4px 0;
}
.menu-giorno button{
  border:none;background:transparent;text-align:left;
  padding:6px 12px;font-size:.78rem;cursor:pointer;color:var(--sheet-text);white-space:nowrap;
}
.menu-giorno button:hover{background:#F3F7FF;}
.menu-giorno button.pericolo{color:#C62828;}
.menu-giorno button.pericolo:hover{background:#FDECEA;}
.menu-cella{position:fixed;top:auto;left:auto;}
.menu-giorno .nessuna-azione{padding:6px 12px;font-size:.78rem;color:#888;white-space:nowrap;}
.slots{display:flex;flex-direction:column;border-bottom:2px solid var(--sheet-line-strong);}
.slot{
  height:22px;position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;line-height:1.1;padding:1px 3px;
  cursor:pointer;background:var(--sheet-bg);color:var(--sheet-text);
  border-bottom:1px solid var(--sheet-line);
  outline-offset:-2px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
/* Prima non aveva bordo/sfondo distinti (stesso bianco delle celle, nessuna
   linea sotto): si fondeva visivamente con la cella "14-15" appena sotto,
   dando l'impressione di un unico blocco più alto invece di gap+cella normale
   (issue #43). Bordo e sfondo diversi separano davvero mattino e pomeriggio. */
.slot.lunch-gap{
  height:8px;flex:none;cursor:default;
  background:var(--chrome-bg);
  border-top:1px solid var(--sheet-line-strong);
  border-bottom:1px solid var(--sheet-line-strong);
}
.slot:last-child{border-bottom:none;}
.slot:not(.lunch-gap):hover{filter:brightness(0.97);}
.slot[data-empty="1"]:not(.lunch-gap):hover{background:#F3F7FF;}
.slot.selected{outline:2px solid var(--chip-ring);z-index:1;}
.slot.editing{cursor:text;outline:2px solid var(--accent);z-index:2;}
.slot.editing input{width:100%;height:100%;border:none;background:transparent;font:inherit;color:inherit;text-align:center;padding:0;}
.slot.editing input:focus{outline:none;}
.slot.drag-over{outline:2px dashed var(--chip-ring);z-index:1;}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:8px 20px;font-size:.72rem;color:var(--chrome-text-dim);
  border-top:1px solid var(--chrome-border);background:var(--chrome-surface);
}
.statusbar b{color:var(--chrome-text);}
.statusbar .spacer-flex{flex:1 1 auto;}
.statusbar .k{
  background:var(--chrome-bg);border:1px solid var(--chrome-border);
  border-radius:4px;padding:0 5px;font-family:ui-monospace,Menlo,monospace;font-size:.68rem;
}

/* ---------- login ---------- */
.login-page{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:var(--chrome-bg);padding:24px;
}
.login-card{
  background:var(--chrome-surface);border:1px solid var(--chrome-border);
  border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.12);
  padding:32px 36px;width:100%;max-width:380px;
}
.login-logo{display:block;max-width:220px;width:100%;height:auto;margin:0 auto 22px;}
.login-card h1{font-size:1.1rem;text-align:center;margin:0 0 20px;color:var(--chrome-text);font-weight:700;}
.login-footer{text-align:center;margin-top:14px;font-size:.85rem;}

/* ---------- toggle mostra/nascondi password ---------- */
.pwd-field .form-control{padding-right:2.75rem;}
.pwd-field{position:relative;}
.password-toggle-btn{
  position:absolute;top:0;right:0;height:100%;width:2.75rem;
  border:none;background:transparent;cursor:pointer;font-size:1.05rem;line-height:1;
  color:#6c757d;z-index:5;
}
.password-toggle-btn:hover{color:#212529;}

/* Finestra Help (issue #84). */
.help-dialog ul{margin:0 0 12px;padding-left:20px;}
.help-dialog li{margin-bottom:4px;font-size:.88rem;line-height:1.4;}
.help-dialog .help-titolo{font-weight:700;margin-top:4px;}

/* ---------- mobile: settimana orizzontale con scroll (issue #109) ---------- */
@media (max-width: 768px) {
  .sheet-wrap {
    padding: 10px 8px 20px;
  }

  .sheet {
    padding: 10px;
    width: 100%;
    display: block;
  }

  .band + .band {
    margin-top: 12px;
  }

  /* banda-row: colonna, ogni banda sopra l'altra */
  .band-row {
    flex-direction: column;
  }

  /* il gutter: lo rendiamo invisibile su mobile */
  .gutter {
    display: none;
  }

  /* ogni settimana: orizzontale, scroll se serve */
  .week {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;
    margin-bottom: 12px;
    border: 1px solid var(--sheet-line);
    border-radius: 4px;
    overflow: hidden;
  }

  .week:last-of-type {
    margin-bottom: 0;
  }

  /* etichetta numero settimana */
  .week > .week-num {
    display: block;
    background: var(--chrome-bg);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    padding: 4px 2px;
    border-bottom: 1px solid var(--sheet-line);
    border-left: none !important;
    border-right: none !important;
  }

  /* riga della settimana: orizzontale con scroll */
  .week > .week-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex: 1 1 auto;
  }

  /* colonna giorno: si espande per riempire lo spazio disponibile */
  .daycol {
    flex: 1 1 0;
    min-width: 0;
    border-left: none !important;
    border-right: none !important;
  }

  .daycol + .daycol {
    border-left: 1px solid var(--sheet-line) !important;
  }

  .daycol:first-child {
    border-left: 2px solid var(--sheet-line-strong) !important;
  }

  .daycol:last-child {
    border-right: 2px solid var(--sheet-line-strong) !important;
  }

  /* header giorno compattato */
  .daycol > .hdr-cell {
    border-top: 1px solid var(--sheet-line-strong);
    border-bottom: 1px solid var(--sheet-line);
    padding: 2px 1px;
    font-size: 0.58rem;
    line-height: 1.2;
  }

  .daycol > .date-cell {
    border-top: none;
    border-bottom: 1px solid var(--sheet-line);
    padding: 1px 1px;
    font-size: 0.6rem;
  }

  /* slot: più piccoli, adatti al narrow column */
  .daycol .slot {
    font-size: 0.48rem;
    padding: 1px 1px;
    height: 20px;
  }

  .daycol .slot.lunch-gap {
    height: 5px;
  }

  /* statusbar responsive */
  .statusbar {
    font-size: 0.65rem;
    gap: 8px;
    padding: 6px 10px;
  }
}

/* Testo abbreviato dei pulsanti: visibile solo su mobile (issue #113) */
.titlebar .btn-abbreviate .btn-short {
  display: none;
}

/* ---------- mobile: titlebar compatta (issue #111) ---------- */
@media (max-width: 768px) {
  .titlebar {
    padding: 8px 10px 2px;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  /* Riga 1: titolo + badge + utente su un'unica riga */
  .titlebar h1 {
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
  }

  .titlebar .badge {
    font-size: 0.55rem;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .titlebar .sub {
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }

  /* Nascondi il MudSelect di impersona su mobile */
  .titlebar MudSelect {
    display: none !important;
  }

  /* Riga 2: tutti i pulsanti su un'unica riga */
  .titlebar .spacer-flex {
    flex: 0 0 100%;
    height: 0;
  }

  /* Compatta i MudButton */
  .titlebar .mud-button-root {
    font-size: 0.68rem;
    padding: 0 6px;
    height: 28px;
    line-height: 28px;
    flex-shrink: 0;
    min-width: 0;
  }

  .titlebar .mud-icon-button-root {
    padding: 2px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .titlebar .mud-button-type-outlined {
    border-width: 1px;
  }

  /* Pulsanti con abbreviazione mobile */
  .titlebar .btn-abbreviate .btn-full {
    display: none;
  }

  .titlebar .btn-abbreviate .btn-short {
    display: inline;
  }
}