/* Palette/tipografia da .claude/skills/application-layout/SKILL.md (ispirata a
   txtgroup.com), applicata qui in variante dark: --accent è il teal del gradiente
   invece del navy usato sul sito originale, perché un bottone navy su sfondo navy
   non avrebbe contrasto. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
    color-scheme: dark;
    --bg: #0d0e11;
    --fg: #eeeeee;
    --muted: #979797;
    --accent: #20d2b4;
    --accent-gradient-start: #41b6e6;
    --accent-gradient-end: #20d2b4;
    --card-bg: #1d1d1d;
    --card-border: rgba(255, 255, 255, 0.12);
    --error: #ff6b6b;
    --danger-gradient-start: #ff9466;
    --danger-gradient-end: #ff5252;
    --info-gradient-start: #6ec8ff;
    --info-gradient-end: #3d8bfd;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Menu principale condiviso da tutte le pagine (vedi js/nav.js). Resta hidden finché
   /api/me non ha risposto, per evitare un flash di voci non pertinenti (es.
   "Amministrazione" per un utente non admin) prima del check di sessione. */
.main-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.nav-brand {
    font-weight: 700;
    color: var(--fg);
    text-decoration: none;
    font-size: 1.05rem;
}

/* :not([hidden]) invece di un semplice "display: flex": senza, questa regola
   sovrascriverebbe l'attributo hidden impostato via JS (nav.js) finché /api/me non
   risponde, mostrando il menu anche a utente non autenticato/non admin. */
.nav-menu:not([hidden]) {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.nav-item {
    position: relative;
}

.nav-link {
    font: inherit;
    background: none;
    border: none;
    color: var(--fg);
    cursor: pointer;
    padding: 0.4rem 0.2rem;
}

.nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 10rem;
    padding: 0.35rem;
    z-index: 10;
}

.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu {
    display: block;
}

.nav-submenu a {
    display: block;
    padding: 0.5rem 0.65rem;
    border-radius: 0.35rem;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.9rem;
}

.nav-submenu a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav-profile:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.nav-profile-info {
    position: relative;
}

/* Tooltip custom al posto del title nativo: il browser applica un ritardo fisso
   (~1.5s in Chrome/Firefox) non regolabile via CSS/JS sull'attributo title, quindi
   per dimezzarlo (~0.75s) serve ricrearlo a mano. Il transition-delay sta sulla
   regola di default (non su :hover): così l'apparizione è ritardata ma la
   scomparsa al mouse-out è immediata, pattern CSS-only classico. */
.nav-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--fg);
    white-space: pre-line;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 20;
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
}

.nav-profile-info:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease 0.75s, visibility 0s linear 0.75s;
}

/* .btn/.btn-ghost sono pensati per CTA più grandi (es. "Accedi con Microsoft" nella
   card della home): dentro la nav bar stretta risultano più alti di .nav-link
   (44.3px vs 36.8px), sporgendo sopra/sotto. Override scoped solo qui, stesso
   pattern di .grid-toolbar .btn-export/.btn-icon sopra. */
.nav-profile .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.wip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

#auth-area {
    text-align: center;
}

/* Bottoni: pattern "fill"/"glass" da application-layout skill. Le custom property
   --btn-grad-a/-b sono animabili (@property) così l'hover è una transizione morbida
   del gradiente invece di uno scatto secco. Di base il gradiente è "chiuso" su un
   singolo colore (teal); all'hover si apre verso il blu. */
@property --btn-grad-a {
    syntax: '<color>';
    initial-value: #20d2b4;
    inherits: false;
}

@property --btn-grad-b {
    syntax: '<color>';
    initial-value: #20d2b4;
    inherits: false;
}

/* .btn si applica ad elementi <a> (navigazioni reali verso /login e /logout,
   non fetch: il login/logout è gestito lato server con redirect OIDC). */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #0d0e11;
    background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b));
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
    transition: --btn-grad-a 0.4s, --btn-grad-b 0.4s;
}

.btn:hover {
    --btn-grad-a: var(--accent-gradient-start);
    --btn-grad-b: var(--accent-gradient-end);
}

/* Variante "glass": bordo + sfondo sfocato invece del gradiente pieno, stesso
   gradiente all'hover ma con testo chiaro (usata per "Esci"). */
.btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    color: var(--fg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
}

.btn-ghost:hover {
    background: linear-gradient(90deg, var(--accent-gradient-start), var(--accent-gradient-end));
    color: #0d0e11;
    border-color: transparent;
}

/* Variante "danger" (elimina/cestino): stessa tecnica di .btn (gradiente animato via
   @property, chiuso su un singolo tono di base, si apre all'hover), solo rossiccia
   invece che teal — stessa tonalità del "+" (.btn), non il glass neutro di .btn-ghost. */
@property --btn-danger-a {
    syntax: '<color>';
    initial-value: #ff6b6b;
    inherits: false;
}

@property --btn-danger-b {
    syntax: '<color>';
    initial-value: #ff6b6b;
    inherits: false;
}

.btn-danger {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #1a0d0d;
    background: linear-gradient(90deg, var(--btn-danger-a), var(--btn-danger-b));
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
    transition: --btn-danger-a 0.4s, --btn-danger-b 0.4s;
}

.btn-danger:hover {
    --btn-danger-a: var(--danger-gradient-start);
    --btn-danger-b: var(--danger-gradient-end);
}

/* Variante "info" (salva): stessa tecnica di .btn/.btn-danger, blu invece che
   teal/rossiccio, per distinguere "Salva" da "+ Nuovo" pur restando nella stessa
   famiglia di bottoni pieni (a differenza del glass neutro di .btn-ghost). */
@property --btn-info-a {
    syntax: '<color>';
    initial-value: #3d8bfd;
    inherits: false;
}

@property --btn-info-b {
    syntax: '<color>';
    initial-value: #3d8bfd;
    inherits: false;
}

.btn-info {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #0d0e11;
    background: linear-gradient(90deg, var(--btn-info-a), var(--btn-info-b));
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
    transition: --btn-info-a 0.4s, --btn-info-b 0.4s;
}

.btn-info:hover {
    --btn-info-a: var(--info-gradient-start);
    --btn-info-b: var(--info-gradient-end);
}

/* Bottoni icona-soltanto (niente testo, vedi js/icons.js): stessa base .btn/.btn-ghost,
   solo compattati in un quadrato con l'icona centrata. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
    /* Vince sia su .btn (0.5rem) che su .btn-ghost (1rem, quasi un cerchio su un
       riquadro di 36px): tutti i bottoni icona devono avere lo stesso arrotondamento. */
    border-radius: 0.5rem;
}

.btn-icon .icon {
    width: 16px;
    height: 16px;
}

.auth-error {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--error);
}

.site-footer {
    text-align: center;
    padding: 0 1.5rem 1.5rem;
    font-size: 0.8rem;
}

.site-footer a {
    color: var(--muted);
}

/* Contenuto a piena larghezza per le pagine non centrate in un card (es. griglie dati).
   display:flex + flex-direction:column: serve perché .grid-scroll (sotto) possa usare
   flex:1/min-height:0 e diventare l'unica area che scrolla, invece di far scrollare
   l'intera pagina (bug visto su Safari con JSpreadsheet). */
.page-content {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.page-content h1 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 300;
    flex-shrink: 0;
}

#page-title {
    font-size: 28px;
}

/* Toolbar sopra una griglia JSpreadsheet: icone a sinistra, azioni secondarie (es.
   export) spinte a destra da .btn-export con margin-left:auto. Riusabile da qualunque
   pagina admin con una griglia, non solo Account. */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.grid-toolbar .btn-export {
    margin-left: auto;
}

.year-select-label {
    color: var(--muted);
    font-size: 0.9rem;
}

.year-select {
    font: inherit;
    font-weight: 600;
    color: var(--fg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
}

.grid-status {
    font-size: 0.85rem;
    color: var(--muted);
}

.grid-status.grid-status-error {
    color: var(--error);
}

/* L'area che effettivamente scrolla (in entrambe le direzioni) quando la griglia è
   più grande dello spazio disponibile — vedi commento su .page-content sopra.
   Porta anche lo stile "pannello" (sfondo bianco, angoli arrotondati): DEVE essere lo
   stesso elemento che scrolla, non un wrapper esterno con overflow:hidden — quel
   pattern taglia il contenuto prima che .grid-scroll possa vederne l'overflow, quindi
   niente scrollbar orizzontale e il lato destro della tabella spariva (bug reale,
   trovato scrollando la griglia in Safari). overflow:auto ritaglia comunque agli
   angoli arrotondati, non serve un overflow:hidden separato.
   JSpreadsheet (jspreadsheet-ce/jsuites) porta il proprio CSS chiaro, non ancora
   adattato al tema scuro: lo sfondo bianco qui sotto è per restare leggibile invece di
   scontrarsi con lo sfondo scuro della pagina. */
.grid-scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem;
    color-scheme: light;
    color: #1c1e21;
}

/* Master-detail (vedi customers.html): due sezioni indipendenti dentro
   .page-content, ciascuna con il proprio .grid-toolbar + .grid-scroll. .grid-section
   (il master) non cresce come farebbe di default — resta compatta, lasciando tutto lo
   spazio verticale restante a .grid-section-detail (che riusa .grid-scroll normale,
   flex:1, esattamente come una pagina a griglia singola). */
.grid-section {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-bottom: 1.5rem;
}

.grid-section-detail {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Modificatore per il master: sostituisce il flex:1 di .grid-scroll con un'altezza
   massima fissa (circa 8 righe), così una lista clienti lunga scrolla al proprio
   interno invece di espandersi e schiacciare il dettaglio sotto. */
.grid-scroll-compact {
    flex: 0 0 auto;
    max-height: 260px;
}

/* Safari: jspreadsheet.css mette `position: sticky` sulle celle header (per tenerle
   fisse durante lo scroll — vedi .jss_worksheet > thead > tr > td nel CSS della
   libreria). WebKit ha un bug noto per cui un elemento sticky dentro un contenitore
   overflow:auto non viene composto in un proprio layer finché il contenuto non eccede
   davvero l'altezza visibile (scroll realmente attivo) — con poche righe l'header
   sparisce, con abbastanza righe da scrollare funziona (comportamento osservato: si
   rompe sotto le 7 righe, va bene da 7 in su). Il fix va sull'elemento sticky stesso,
   non sul contenitore: un transform sul contenitore (tentato prima, non risolve questo
   bug) romperebbe anche il posizionamento fixed del menu contestuale di JSpreadsheet. */
.grid-scroll .jss_worksheet > thead > tr > td {
    transform: translateZ(0);
}

/* Selezione multi-riga per "Elimina righe selezionate" (Forecast, Costi risorse):
   tracciata via un Set di indici aggiornato da un click listener delegato (stessa
   tecnica data-y di leave-years.html/customers.html, qui estesa a più righe invece di
   una sola), non dalla selezione interna di JSpreadsheet — vedi commento in
   forecast.html/resource-costs.html sul perché getSelectedRows() non è affidabile. */
.grid-scroll tr.jss-row-selected > td {
    background: rgba(32, 210, 180, 0.16);
}

/* Popup errori di salvataggio (riusabile da qualunque pagina): salvataggio parziale,
   le righe valide si salvano comunque, quelle in errore finiscono in questa lista. */
.modal-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    max-width: 32rem;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.modal-error-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--error);
    font-size: 0.9rem;
}

/* Corpo/azioni dei modal di conferma a digitazione (Elimina anno) e conferma semplice
   (Elimina account con storico ferie) — riusano .modal-overlay/.modal-box sopra. */
.modal-body {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg);
    font: inherit;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* wwwroot/leave/plan.html + plan.js: bacheca ferie, griglia HTML nativa (nessuna
   libreria spreadsheet esterna). .leave-scroll è la stessa ricetta di .grid-scroll
   (pannello chiaro su tema scuro) ma una classe separata, mantenuta per non toccare
   il markup esistente. */
.leave-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.leave-chip {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.leave-chip-holiday { background: #ff5252; }
.leave-chip-vacation { background: #ffeb3b; }
.leave-chip-oncall { background: #42a5f5; }
.leave-chip-working { background: #66bb6a; }
.leave-chip-invalid { background: #d9d9d9; }

.leave-scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem;
    color-scheme: light;
    color: #1c1e21;
}

/* --- Griglia piano ferie (wwwroot/leave/plan.js) --------------------------------- */

.leave-grid {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: max-content;
    font-size: 16px;
}

.col-w-team { width: 75px; }
.col-w-name { width: 150px; }
.col-w-day { width: 24px; }
.col-w-tot { width: 90px; }

.leave-grid td, .leave-grid th {
    height: 22px;
    padding: 0 2px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    border-right: 1px solid rgba(28, 30, 33, 0.08);
    border-bottom: 1px solid rgba(28, 30, 33, 0.08);
}

/* Colonne Team/Nome fisse durante lo scroll orizzontale (equivalente nativo del
   freezeColumns:2 di JSpreadsheet). Sfondo esplicito e opaco: senza, il contenuto
   sottostante scorrerebbe in trasparenza sotto la colonna fissa. transform:
   translateZ(0) è lo stesso fix Safari già usato per lo sticky header di prima —
   qui riapplicato all'asse "left" invece che "top", va riverificato in Safari reale. */
.leave-grid .col-team, .leave-grid .col-name {
    position: sticky;
    z-index: 2;
    background: #ffffff;
    text-align: left;
    padding-left: 6px;
    transform: translateZ(0);
}

.leave-grid .col-team { left: 0; width: 75px; }
.leave-grid .col-name { left: 75px; width: 150px; }

.leave-grid .row-banner td {
    height: 44px;
    background: #0d0d0d;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    padding-left: 6px;
    vertical-align: middle;
}

.leave-grid .row-daynum th,
.leave-grid .row-daynum td,
.leave-grid .row-daylabel td {
    background: #b0bec5;
    color: #263238;
}

.leave-grid .row-daynum th { font-weight: bold; }
.leave-grid .row-daynum .col-team,
.leave-grid .row-daynum .col-name {
    background: #b0bec5;
    font-weight: bold;
}

.leave-grid .row-separator td {
    height: 8px;
    padding: 0;
    background: transparent;
}

.leave-grid .cell-invalid { background: #d9d9d9; }

.leave-grid .cell-day {
    position: relative;
    cursor: cell;
    user-select: none;
}

.leave-grid .cell-vacation { background: #ffeb3b; font-weight: bold; }
.leave-grid .cell-oncall { background: #42a5f5; font-weight: bold; color: #ffffff; }
.leave-grid .cell-working { background: #66bb6a; font-weight: bold; color: #ffffff; }
.leave-grid .cell-holiday { background: #ff5252; color: #ffffff; }

.leave-grid .cell-selected {
    box-shadow: inset 0 0 0 2px var(--accent-gradient-start);
}

.leave-grid .cell-active {
    box-shadow: inset 0 0 0 2px var(--accent-gradient-end);
}

.leave-grid .cell-fill-preview {
    box-shadow: inset 0 0 0 1px var(--accent-gradient-end);
}

.leave-grid td.has-fill-handle::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 7px;
    height: 7px;
    background: var(--accent-gradient-start);
    border: 1px solid #ffffff;
    cursor: crosshair;
    z-index: 4;
}

/* Target reale del focus da tastiera durante l'uso della griglia: intercetta i veri
   eventi nativi copy/paste del browser (interoperabilità col clipboard di sistema,
   incluso Excel). Deve restare focalizzabile — mai display:none/visibility:hidden. */
#leave-clipboard-bridge {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    resize: none;
    overflow: hidden;
}