/* ============================================================
   Gestione Turni B-Link S.r.l. - Design system condiviso
   Palette derivata dal blu istituzionale #2F5496, alleggerita
   per un'interfaccia gestionale moderna e leggibile.
   ============================================================ */

:root {
    /* Altezza della barra dei menu. Il valore qui e' solo un ripiego: app.js
       la misura davvero, perche' con molti pulsanti la barra va a capo e
       diventa piu' alta. Serve agli avvisi a comparsa, che devono restare
       sotto invece di coprirla. */
    --altezza-topbar: 3rem;
    --blu-900: #16233f;
    --blu-800: #1F3864;
    --blu-700: #2F5496;
    --blu-600: #3d6ab8;
    --blu-100: #e7edf8;
    --blu-50:  #f3f6fc;

    --grigio-900: #1b2030;
    --grigio-700: #414a60;
    --grigio-500: #6b7488;
    --grigio-300: #ccd2df;
    --grigio-200: #e3e7f0;
    --grigio-100: #eef1f7;
    --sfondo:     #f5f7fb;

    --verde:  #16794f;
    --verde-bg: #e3f5ec;
    --ambra:  #96620a;
    --ambra-bg: #fdf1d8;
    --rosso:  #b3261e;
    --rosso-bg: #fce8e6;
    --viola:  #6b3fa0;
    --viola-bg: #f0e9f9;

    --raggio: 10px;
    --raggio-sm: 7px;
    --ombra: 0 1px 2px rgba(22, 35, 63, .06), 0 4px 12px rgba(22, 35, 63, .05);
    --ombra-alta: 0 2px 6px rgba(22, 35, 63, .08), 0 12px 28px rgba(22, 35, 63, .10);
}

* { -webkit-font-smoothing: antialiased; }

body {
    background: var(--sfondo);
    color: var(--grigio-900);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    letter-spacing: -.005em;
}

/* ---------- Barra di navigazione ---------- */
.topbar {
    background: linear-gradient(180deg, var(--blu-800) 0%, var(--blu-900) 100%);
    padding: 0;
    box-shadow: var(--ombra);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.topbar .topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .55rem 1.25rem;
    flex-wrap: wrap;
}
.topbar .marchio {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.02em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
}
/* Logo aziendale: nel tema scuro icona e testi passano a tonalità chiare */
.b-link-logo .logo-icona   { fill: #48549e; }
.b-link-logo .logo-accento { fill: #f06823; }
.b-link-logo .logo-testo   { fill: #1b2030; font-family: 'Inter', Lato, system-ui, sans-serif; }
.b-link-logo .logo-nome    { font-size: 80.2px; font-weight: 600; }
.b-link-logo .logo-tld     { font-size: 24.8px; }
.b-link-logo .logo-claim   { font-size: 23px; }
.topbar .b-link-logo .logo-icona { fill: #9dc0ff; }
.topbar .b-link-logo .logo-testo { fill: #ffffff; }
.topbar .marchio-titolo {
    border-left: 1px solid rgba(255, 255, 255, .25);
    padding-left: .6rem;
    font-weight: 500;
    opacity: .85;
}
:root[data-tema="scuro"] .b-link-logo .logo-icona { fill: #a5b4fc; }
:root[data-tema="scuro"] .b-link-logo .logo-testo { fill: #f3f4f6; }
.topbar nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.topbar nav a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    padding: .38rem .7rem;
    border-radius: var(--raggio-sm);
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.topbar nav a.attiva { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.topbar .azioni {
    margin-left: auto;
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;          /* con molti pulsanti si va a capo, non si sovrappone */
    justify-content: flex-end;
}
.topbar .azioni form { display: inline-flex; margin: 0; }

/* ---------- Contenitori e schede ---------- */
.card {
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    background: #fff;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--grigio-200);
    font-weight: 600;
    font-size: .85rem;
    color: var(--grigio-900);
    letter-spacing: -.01em;
    padding: .7rem 1rem;
    border-radius: var(--raggio) var(--raggio) 0 0 !important;
}
.card-footer { background: var(--blu-50); border-top: 1px solid var(--grigio-200); }

.titolo-pagina { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.sottotitolo { color: var(--grigio-500); font-size: .82rem; }

/* ---------- Indicatori numerici ---------- */
.kpi-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; }
.kpi-scheda {
    background: #fff;
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: .85rem 1rem;
}
.kpi-etichetta {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grigio-500);
    font-weight: 600;
    margin-bottom: .25rem;
}
.kpi-valore { font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.kpi-nota { font-size: .72rem; color: var(--grigio-500); margin-top: .15rem; }
.testo-verde { color: var(--verde); }
.testo-rosso { color: var(--rosso); }
.testo-blu   { color: var(--blu-700); }

/* ---------- Tabelle ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead > tr > th {
    background: var(--grigio-100);
    color: var(--grigio-700);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--grigio-200);
    padding: .55rem .7rem;
    white-space: nowrap;
}
.table > tbody > tr > td { padding: .55rem .7rem; border-color: var(--grigio-200); }
.table-hover > tbody > tr:hover > td { background: var(--blu-50); }
.table-responsive { border-radius: 0 0 var(--raggio) var(--raggio); }

/* ---------- Etichette di stato ---------- */
.badge {
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .01em;
    padding: .3em .6em;
    border-radius: 100px;
}
.pill-verde { background: var(--verde-bg); color: var(--verde); }
.pill-ambra { background: var(--ambra-bg); color: var(--ambra); }
.pill-rosso { background: var(--rosso-bg); color: var(--rosso); }
.pill-viola { background: var(--viola-bg); color: var(--viola); }
.pill-blu   { background: var(--blu-100);  color: var(--blu-700); }
.pill-grigio{ background: var(--grigio-100); color: var(--grigio-500); }

/* ---------- Controlli ---------- */
.form-label { font-size: .74rem; font-weight: 600; color: var(--grigio-700); margin-bottom: .2rem; }
.form-control, .form-select {
    border-color: var(--grigio-300);
    border-radius: var(--raggio-sm);
    font-size: .82rem;
    color: var(--grigio-900);
}
.form-control:focus, .form-select:focus {
    border-color: var(--blu-600);
    box-shadow: 0 0 0 3px rgba(47, 84, 150, .12);
}
.btn { border-radius: var(--raggio-sm); font-size: .8rem; font-weight: 600; letter-spacing: -.005em; }
.btn-primary { background: var(--blu-700); border-color: var(--blu-700); }
.btn-primary:hover, .btn-primary:focus { background: var(--blu-800); border-color: var(--blu-800); }
.btn-outline-primary { color: var(--blu-700); border-color: var(--grigio-300); }
.btn-outline-primary:hover { background: var(--blu-700); border-color: var(--blu-700); }
.btn-success { background: var(--verde); border-color: var(--verde); }
.btn-success:hover { background: #12643f; border-color: #12643f; }

.alert { border: 1px solid transparent; border-radius: var(--raggio); font-size: .84rem; }
.alert-success { background: var(--verde-bg); border-color: #bfe5d3; color: var(--verde); }
.alert-danger  { background: var(--rosso-bg); border-color: #f3c9c6; color: var(--rosso); }
.alert-warning { background: var(--ambra-bg); border-color: #f0dcae; color: var(--ambra); }
.alert-info    { background: var(--blu-100);  border-color: #c9d9f2; color: var(--blu-700); }
.alert-secondary { background: var(--grigio-100); border-color: var(--grigio-200); color: var(--grigio-700); }

/* ---------- Tabellone turni (dipendente-centrico) ---------- */
.tabella-turni { border-collapse: separate; border-spacing: 0; }
.tabella-turni th, .tabella-turni td {
    vertical-align: top;
    border-bottom: 1px solid var(--grigio-200);
    border-right: 1px solid var(--grigio-200);
}
.tabellone-scroll {
    max-height: calc(100vh - 150px);
    overflow: auto;
    border-radius: var(--raggio);
    border: 1px solid var(--grigio-200);
    background: #fff;
}
.tabella-turni thead th {
    /* Ancorato al bordo del contenitore scorrevole, non alla pagina:
       con un offset diverso da zero l'intestazione coprirebbe la prima riga. */
    position: sticky; top: 0; z-index: 5;
    background: var(--blu-800); color: #fff;
    text-transform: none; font-size: .74rem; letter-spacing: .01em;
    text-align: center;
}
.tabella-turni thead th .giorno-data { font-weight: 400; opacity: .72; font-size: .68rem; }
.col-dipendente { min-width: 170px; width: 170px; background: #fff; }
.col-giorno { min-width: 180px; }

/* La banda di sezione vale sia come riga di tabella sia come blocco a se':
   index.php e servizi_biblos.php la usano su un <div>, dove il selettore per
   la sola cella non avrebbe colorato nulla. */
.riga-campus td,
div.riga-campus {
    background: var(--blu-100);
    color: var(--blu-800);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .45rem .7rem;
}

/* Riga di subtotale in fondo a un raggruppamento: si distingue dalle righe di
   dettaglio senza pesare come un'intestazione. */
.riga-subtotale td {
    background: var(--grigio-100);
    border-top: 1px solid var(--grigio-300);
}

/* Barretta di quota: quanto pesa una voce sul totale. Nessun numero sopra,
   il valore esatto e' gia' nella colonna accanto. */
.barra-quota {
    background: var(--grigio-200);
    border-radius: 999px;
    height: .5rem;
    overflow: hidden;
}
.barra-quota > span {
    display: block;
    height: 100%;
    background: var(--blu-600);
    border-radius: 999px;
}
.nome-tecnico { font-weight: 600; font-size: .82rem; letter-spacing: -.01em; }
.meta-tecnico { font-size: .69rem; color: var(--grigio-500); line-height: 1.4; }

/* Blocchi turno: colori pastello con banda laterale di stato */
.turno {
    border-radius: var(--raggio-sm);
    padding: .4rem .5rem;
    margin-bottom: .35rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: .74rem;
    line-height: 1.35;
}
.turno-ordinario { background: var(--blu-50);   border-color: var(--grigio-200); border-left-color: var(--blu-600); }
.turno-straord   { background: var(--ambra-bg); border-color: #f0dcae; border-left-color: #d99a1c; }
.turno-emergenza { background: #e8f1fb;         border-color: #c9ddf5; border-left-color: #2f80d8; }
.turno-socio     { background: #e8f1fb;         border-color: #c9ddf5; border-left-color: #2f80d8; }
.turno-biblos    { background: var(--viola-bg); border-color: #ddcbf0; border-left-color: var(--viola); }
.turno-scoperto  { background: var(--rosso-bg); border-color: #f3c9c6; border-left-color: var(--rosso); }
.turno-assenza   { background: var(--grigio-100); border-color: var(--grigio-200); border-left-color: var(--grigio-500); }
.turno-orario { font-weight: 700; font-size: .76rem; letter-spacing: -.01em; }
.turno-servizio { color: var(--grigio-700); font-size: .71rem; }
.turno .badge { font-size: .6rem; margin-top: .15rem; }
.select-slot, .select-copertura {
    font-size: .71rem;
    margin-top: .3rem;
    padding: .15rem 1.4rem .15rem .4rem;
    border-color: var(--grigio-300);
    background-color: rgba(255, 255, 255, .75);
}
.cella-vuota { color: var(--grigio-300); text-align: center; padding-top: .4rem; }

/* ---------- Legenda ---------- */
.legenda { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.legenda .voce {
    font-size: .71rem;
    padding: .2rem .55rem;
    border-radius: var(--raggio-sm);
    border-left-width: 3px;
    border-left-style: solid;
}

/* ---------- Statistiche ---------- */
.diff-negativa { color: var(--rosso); font-weight: 700; }
.diff-zero { color: var(--verde); font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: .74rem; }

/* ---------- Elenchi laterali ---------- */
.list-group-item { border-color: var(--grigio-200); font-size: .82rem; }
.list-group-item.active { background: var(--blu-700); border-color: var(--blu-700); }

.piede { color: var(--grigio-500); font-size: .72rem; }
/* Riga in fondo alla griglia oraria: allunga la giornata di questa settimana.
   Volutamente sobria, e' un comando raro che non deve competere con le celle. */
.riga-estendi td { background: transparent; border: none; padding-top: .35rem; }
.btn-estendi-griglia {
    width: 100%;
    border: 1px dashed var(--grigio-300);
    border-radius: var(--raggio-sm);
    background: transparent;
    color: var(--grigio-500);
    font-weight: 700;
    line-height: 1.1;
    padding: .2rem 0;
}
.btn-estendi-griglia:hover { border-color: var(--blu-600); color: var(--blu-600); }
.testo-estendi { color: var(--grigio-500); font-size: .72rem; padding-left: .5rem; }

/* Suggerimento delle celle del tabellone: piu' largo e piu' leggibile del
   riquadro predefinito, che e' pensato per una riga sola. */
.suggerimento-cella .tooltip-inner {
    max-width: 22rem;
    text-align: left;
    padding: .5rem .65rem;
    font-size: .78rem;
    line-height: 1.45;
    background: var(--grigio-900);
}
.suggerimento-cella .tooltip-inner b { font-size: .84rem; }
.suggerimento-cella .tooltip-arrow::before { border-top-color: var(--grigio-900); }

/* ---- Finestra "Verifica coperture" ----
   Tre livelli di lettura: i numeri di sintesi, i titoli delle categorie, il
   dettaglio riga per riga. I colori vengono dalle variabili del tema, cosi' la
   finestra resta leggibile anche in scuro. */
.sintesi-verifica {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.riquadro-sintesi {
    flex: 1 1 8rem;
    padding: .5rem .7rem;
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio-sm);
    background: var(--grigio-100);
}
/* Il corpo scorre per conto suo: con venti segnalazioni la finestra
   diventerebbe piu' alta dello schermo e i pulsanti finirebbero fuori vista. */
.corpo-verifica {
    max-height: 52vh;
    overflow-y: auto;
    padding-right: .25rem;
}
.fascia-verifica + .fascia-verifica { margin-top: 1rem; }
.titolo-fascia {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio-500);
    padding-bottom: .25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--grigio-200);
}
.gruppo-verifica {
    border: 1px solid var(--grigio-200);
    border-radius: var(--raggio-sm);
    margin-bottom: .5rem;
}
.gruppo-verifica > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    cursor: pointer;
    list-style: none;
}
.gruppo-verifica > summary::-webkit-details-marker { display: none; }
/* Freccia disegnata a mano: il triangolo predefinito cambia forma da un
   browser all'altro e non segue il colore del tema. */
.gruppo-verifica > summary::after {
    content: '';
    margin-left: auto;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid var(--grigio-500);
    border-bottom: 2px solid var(--grigio-500);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.gruppo-verifica[open] > summary::after { transform: rotate(-135deg); }
.gruppo-verifica > summary:hover { background: var(--grigio-100); border-radius: var(--raggio-sm); }
.titolo-gruppo { font-weight: 600; }
.voci-verifica {
    list-style: none;
    margin: 0;
    padding: 0 .6rem .5rem;
}
.voci-verifica li {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    padding: .3rem 0;
    border-top: 1px solid var(--grigio-200);
}
/* Soggetto a larghezza fissa: i nomi incolonnati si scorrono con l'occhio,
   mentre a larghezza variabile andrebbero cercati riga per riga. */
.voci-verifica li > b { flex: 0 0 13rem; }
.voci-verifica li > span { flex: 1 1 16rem; color: var(--grigio-700); }
@media (max-width: 575px) {
    .voci-verifica li > b { flex-basis: 100%; }
}

/* Gli avvisi a comparsa nascono in alto a destra, dove c'e' la barra dei menu:
   senza questo scarto la coprono. Lo scarto e' misurato sull'altezza della
   barra, non a occhio, cosi' resta corretto se cambia l'imbottitura. */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    padding-top: calc(var(--altezza-topbar) + .75rem);
}

/* Voce del piede che apre il pannello tecnico: è un <button> perché esegue
   un'azione, ma deve leggersi come un collegamento del piede pagina. */
.collegamento-piede {
    background: none;
    border: 0;
    padding: 0;
    color: var(--blu-600);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.collegamento-piede:hover { color: var(--blu-700); }
.collegamento-piede:disabled { opacity: .5; cursor: default; }

@media (max-width: 992px) {
    .topbar .topbar-inner { gap: .6rem; }
    .topbar .azioni { margin-left: 0; }
    .tabellone-scroll { max-height: none; }
    .tabella-turni thead th { position: static; }
}

/* ============================================================
   Interruttore tema e componenti premium (v7)
   ============================================================ */
.btn-tema {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem;
    transition: background .2s ease, transform .2s ease;
}
.btn-tema:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }

/* Selettore del profilo: stesso aspetto del pulsante tema ma con il testo
   dentro, quindi larghezza automatica. Riusare .btn-tema, che e' un quadrato
   fisso di 32px, faceva debordare l'etichetta sopra i pulsanti vicini. */
.btn-profilo {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    height: 32px;
    padding: 0 .6rem;
    border-radius: 8px;
    display: inline-flex; align-items: center;
    font-size: .74rem;
    white-space: nowrap;
    transition: background .2s ease;
}
.btn-profilo:hover { background: rgba(255, 255, 255, .22); }

/* Transizioni morbide su elementi interattivi */
.btn, .turno, .kpi-scheda, .list-group-item, .table-hover > tbody > tr {
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .2s ease, color .25s ease;
}
.kpi-scheda:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); }
.turno:hover { box-shadow: var(--ombra); }

.kpi-icona {
    float: right;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    background: var(--blu-100);
    color: var(--blu-700);
}
.grafico-contenitore { position: relative; height: 230px; }

/* Select2 allineato al design system */
.select2-container--default .select2-selection--single {
    border-color: var(--grigio-300);
    border-radius: var(--raggio-sm);
    height: auto;
    padding: .1rem .2rem;
    background: rgba(255, 255, 255, .75);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: .71rem; line-height: 1.5; color: var(--grigio-900); padding-left: .3rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 24px; }
.select2-dropdown { border-color: var(--grigio-300); border-radius: var(--raggio-sm); font-size: .78rem; }
/* Voci scartate dal filtro (iniettate da estensioni): Select2 le rende come
   <li> vuoti, che altrimenti lascerebbero righe bianche nel menu. */
.select2-results__option:empty { display: none; }
/* Un gruppo le cui voci sono state tutte filtrate resterebbe come intestazione
   sospesa sul nulla: :has() lo tiene solo se ha almeno una voce visibile. */
.select2-results__option--group:not(:has(.select2-results__option:not(:empty))) { display: none; }
.select2-results__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grigio-500); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blu-700); }

/* ============================================================
   Tema scuro
   ============================================================ */
:root[data-tema="scuro"] {
    --blu-100: #23345a;
    --blu-50:  #1a2440;
    --grigio-900: #e8ecf5;
    --grigio-700: #b3bdd1;
    --grigio-500: #8792a8;
    --grigio-300: #3a4560;
    --grigio-200: #2b3550;
    --grigio-100: #232c44;
    --sfondo:     #141b2d;
    --verde-bg: #143528;
    --ambra-bg: #3a2e12;
    --rosso-bg: #3d1c1a;
    --viola-bg: #2c1f43;
    --verde: #5dd6a0;
    --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .28);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .38);
}
:root[data-tema="scuro"] { --ambra: #e8b563; --rosso: #f28b82; --viola: #c4a2f0; }
:root[data-tema="scuro"] body { background: var(--sfondo); color: var(--grigio-900); }
:root[data-tema="scuro"] .card,
:root[data-tema="scuro"] .kpi-scheda,
:root[data-tema="scuro"] .card-header { background: #1c2438; border-color: var(--grigio-200); color: var(--grigio-900); }
:root[data-tema="scuro"] .card-footer { background: #192033; }
:root[data-tema="scuro"] .table { color: var(--grigio-900); }
:root[data-tema="scuro"] .table > thead > tr > th { background: #232c44; color: var(--grigio-700); }
:root[data-tema="scuro"] .table > tbody > tr > td { border-color: var(--grigio-200); }
:root[data-tema="scuro"] .table-hover > tbody > tr:hover > td { background: #232c44; }
:root[data-tema="scuro"] .table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--grigio-900); }
:root[data-tema="scuro"] .form-control,
:root[data-tema="scuro"] .form-select,
:root[data-tema="scuro"] .select2-container--default .select2-selection--single {
    background: #232c44; border-color: var(--grigio-300); color: var(--grigio-900);
}
:root[data-tema="scuro"] .select2-dropdown { background: #232c44; }
:root[data-tema="scuro"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--grigio-900); }
:root[data-tema="scuro"] .form-control::placeholder { color: var(--grigio-500); }
:root[data-tema="scuro"] .list-group-item { background: #1c2438; color: var(--grigio-900); }
:root[data-tema="scuro"] .col-dipendente { background: #1c2438; }
:root[data-tema="scuro"] .tabellone-scroll { background: #1c2438; border-color: var(--grigio-200); }
:root[data-tema="scuro"] .riga-campus td,
:root[data-tema="scuro"] div.riga-campus { background: #23345a; color: #cfe0ff; }
:root[data-tema="scuro"] .riga-subtotale td { background: #1a2542; border-top-color: #2c3c62; }
:root[data-tema="scuro"] .barra-quota { background: #2c3c62; }
:root[data-tema="scuro"] .turno-ordinario { background: #1e2c47; border-color: #2c3a58; }
:root[data-tema="scuro"] .turno-straord   { background: #3a2e12; border-color: #574417; }
:root[data-tema="scuro"] .turno-emergenza,
:root[data-tema="scuro"] .turno-socio     { background: #1b3350; border-color: #2a4a70; }
:root[data-tema="scuro"] .turno-biblos    { background: #2c1f43; border-color: #443063; }
:root[data-tema="scuro"] .turno-scoperto  { background: #3d1c1a; border-color: #5c2a27; }
:root[data-tema="scuro"] .turno-assenza   { background: #232c44; border-color: var(--grigio-300); }
:root[data-tema="scuro"] .turno-servizio { color: var(--grigio-700); }
:root[data-tema="scuro"] .kpi-icona { background: #23345a; color: #9dc0ff; }
:root[data-tema="scuro"] .swal2-popup { background: #1c2438; color: var(--grigio-900); }

/* ---------- Filtri rapidi del tabellone ---------- */
#filtri-campus .btn.attivo,
#ordina-tecnici .btn.attivo {
    background: var(--blu-700);
    border-color: var(--blu-700);
    color: #fff;
}

/* ---------- DataTables 2.x allineato al design system ---------- */
/* I selettori seguono la nomenclatura di DataTables 2 (dt-container,
   dt-search, dt-length, dt-info), diversa da quella della serie 1.x. */
.dt-container { padding: .55rem .75rem 0; font-size: .8rem; }
.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-sm);
    font-size: .8rem;
    padding: .2rem .45rem;
    background: transparent;
    color: var(--grigio-900);
    margin-left: .35rem;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    outline: none;
    border-color: var(--blu-600);
    box-shadow: 0 0 0 3px rgba(47, 84, 150, .12);
}
.dt-container .dt-info,
.dt-container .dt-length label,
.dt-container .dt-search label { color: var(--grigio-500); font-size: .76rem; }
.dt-container .dt-paging { margin-top: .35rem; }
table.dataTable > thead > tr > th { cursor: pointer; }
table.dataTable > thead > tr > th[data-no-ordinamento] { cursor: default; }
.page-link { font-size: .78rem; color: var(--blu-700); border-color: var(--grigio-200); }
.page-item.active .page-link { background: var(--blu-700); border-color: var(--blu-700); }

:root[data-tema="scuro"] .dt-container .dt-search input,
:root[data-tema="scuro"] .dt-container .dt-length select {
    background: #232c44; border-color: var(--grigio-300); color: var(--grigio-900);
}
:root[data-tema="scuro"] .page-link { background: #1c2438; border-color: var(--grigio-200); color: #9dc0ff; }
:root[data-tema="scuro"] .page-item.disabled .page-link { background: #1c2438; color: var(--grigio-500); }
:root[data-tema="scuro"] table.dataTable > thead > tr > th.dt-orderable-asc:hover,
:root[data-tema="scuro"] table.dataTable > thead > tr > th.dt-orderable-desc:hover { background: #2b3550; }


/* ============================================================
   Griglia oraria a 11 slot (v8)
   ============================================================ */
.scheda-tecnico { margin-bottom: 1rem; }
.scheda-tecnico .card-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tabella-slot { border-collapse: separate; border-spacing: 0; width: 100%; }
.tabella-slot th, .tabella-slot td {
    border-bottom: 1px solid var(--grigio-200);
    border-right: 1px solid var(--grigio-200);
    padding: 0;
    font-size: .72rem;
}
.tabella-slot thead th {
    background: var(--grigio-100);
    color: var(--grigio-700);
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .05em;
    text-align: center;
    padding: .35rem .3rem;
}
.col-slot {
    width: 104px; min-width: 104px;
    background: var(--blu-50);
    color: var(--grigio-500);
    font-weight: 600;
    text-align: center;
    padding: .3rem !important;
    white-space: nowrap;
}
/* Il bordo colorato che segnala lo stato del turno sta sulla CELLA e non sul
   <select>: Select2 nasconde l'elemento originale (select2-hidden-accessible)
   e con esso ogni sua decorazione, che resterebbe visibile solo nel breve
   istante prima dell'inizializzazione per poi sparire. */
.cella-slot {
    position: relative;
    height: 26px;
    border-left: 3px solid transparent;
}
.cella-slot .contenuto {
    display: block;
    height: 100%;
    padding: .25rem .35rem;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Il colore di fondo vive sulla cella: sul <select> comparirebbe prima
   dell'inizializzazione di Select2 e poi scomparirebbe. */
.cella-slot select.contenuto { background: transparent; }
.cella-slot .contenuto:hover { filter: brightness(.97); }

/* Colori pastello fedeli al tabellone originale */
.slot-libero     { background: transparent; color: var(--grigio-300); }
.slot-ordinario  { background: #FAFBFD; border-left-color: var(--blu-600) !important; color: var(--grigio-900); }
.slot-straord    { background: #E3F2FD; border-left-color: #1565C0 !important; color: #1565C0; font-weight: 600; }
.slot-emergenza  { background: #FFF3E0; border-left-color: #E65100 !important; color: #E65100; font-weight: 600; }
.slot-socio      { background: #E8F5E9; border-left-color: #2E7D32 !important; color: #2E7D32; font-weight: 600; }
.slot-biblos     { background: #D5C2F0; border-left-color: #5B2C87 !important; color: #5B2C87; font-weight: 600; }
                 /* violetto e non rosa: nell'export conviveva col rosso di
                    slot-scoperto ed erano difficili da distinguere */
.slot-scoperto   { background: #FFEBEE; border-left-color: #C62828 !important; color: #C62828; font-weight: 600; }
.slot-ferie      { background: #FFFDE7; border-left-color: #F57F17 !important; color: #F57F17; font-weight: 600; }
.slot-malattia   { background: #FCE4EC; border-left-color: #C2185B !important; color: #C2185B; font-weight: 600; }
/* Le quattro assenze hanno ciascuna il proprio colore: ferie, permesso,
   malattia e congedo pesano in modo diverso su chi pianifica, e mostrarle
   uguali obbligava a leggere l'etichetta di ogni cella.
   Cyan e bruno sono stati scelti misurando la distanza dagli undici sfondi
   gia' in uso (38,7 e 50,2 su scala RGB) e il contrasto del testo (5,3:1 e
   6,1:1). Un indaco per il congedo e' stato scartato: 13,9 dal viola di Biblos. */
.slot-permesso   { background: #B2EBF2; border-left-color: #00646E !important; color: #00646E; font-weight: 600; }
.slot-congedo    { background: #E0CDB8; border-left-color: #5D4030 !important; color: #5D4030; font-weight: 600; }
/* Permesso per cariche pubbliche: ricorrente e NON bloccante, quindi una cosa
   diversa dall'assenza "Permesso" qui sopra. */
.slot-p3         { background: #ECEFF1; border-left-color: #37474F !important; color: #37474F; font-weight: 600; }
/* Tinta per dipendente: nella vista per servizio ogni persona ha il proprio
   colore, cosi' il cambio di titolare a meta' giornata si vede a colpo d'occhio.
   La tonalita' arriva dal PHP come --tinta (angolo aureo sull'id: due persone
   diverse non ricevono mai la stessa sfumatura). Il bordo sinistro resta libero
   di indicare lo stato del turno (straordinario, emergenza, socio). */
.cella-slot.slot-dip { background: hsl(var(--tinta), 62%, 92%); }
.cella-slot.slot-dip .contenuto { color: hsl(var(--tinta), 45%, 28%); font-weight: 600; }
.cella-slot.slot-dip .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, .45);
}
:root[data-tema="scuro"] .cella-slot.slot-dip { background: hsl(var(--tinta), 32%, 22%); }
:root[data-tema="scuro"] .cella-slot.slot-dip .contenuto { color: hsl(var(--tinta), 55%, 78%); }
:root[data-tema="scuro"] .cella-slot.slot-dip .select2-container--default .select2-selection--single {
    background: rgba(0, 0, 0, .25);
}

/* Nota libera della giornata, in coda alla scheda del tecnico */
.riga-nota .col-slot { font-style: italic; }
.cella-nota { padding: .25rem !important; vertical-align: middle; }
.testo-nota {
    display: block;
    min-height: 22px;
    padding: .2rem .35rem;
    border: 1px dashed var(--grigio-300);
    border-radius: var(--raggio-sm);
    font-size: .72rem;
    line-height: 1.3;
    color: var(--grigio-900);
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
}
.testo-nota:hover, .testo-nota:focus { border-color: var(--blu-600); background: rgba(47, 84, 150, .06); outline: none; }
.testo-nota.vuota { color: var(--grigio-500); font-style: italic; }
:root[data-tema="scuro"] .testo-nota:hover,
:root[data-tema="scuro"] .testo-nota:focus { background: rgba(255, 255, 255, .07); }

/* Collaboratore esterno: il servizio è erogato, quindi niente allarme; verde
   azzurrato per distinguerlo sia dai dipendenti sia dal violetto di Biblos */
.slot-collaboratore { background: #B7E1CD; border-left-color: #1B7A4B !important; color: #14603A; font-weight: 600; }
:root[data-tema="scuro"] .slot-collaboratore { background: #14352a; color: #8fd6b0; }

/* Servizio volutamente ridotto: non e' un buco da coprire, quindi niente rosso */
.slot-ridotto    { background: #ECEFF1; border-left-color: #607D8B !important; color: #546E7A;
                   font-style: italic; font-weight: 500; }
:root[data-tema="scuro"] .slot-ridotto   { background: #263238; color: #90A4AE; }

/* Invito a estendere un servizio extra a un giorno non ancora coperto */
.btn-estendi-giorno {
    display: block;
    width: 100%;
    padding: .2rem .3rem;
    border: 1px dashed var(--grigio-300);
    border-radius: var(--raggio-sm);
    background: transparent;
    color: var(--grigio-500);
    font-size: .68rem;
    font-style: italic;
    cursor: pointer;
    opacity: .45;
    transition: opacity .12s ease, border-color .12s ease;
}
.cella-slot:hover .btn-estendi-giorno { opacity: 1; }
.btn-estendi-giorno:hover { border-color: var(--blu-600); color: var(--blu-700); border-style: solid; }

/* Pulsante "ripeti la fascia precedente", visibile al passaggio sulla cella */
.cella-slot { position: relative; }
.btn-copia-sopra {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 1;
    font-size: .7rem;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-sm);
    background: rgba(255, 255, 255, .9);
    color: var(--grigio-700);
    opacity: 0;
    transition: opacity .12s ease;
    cursor: pointer;
}
/* I pulsanti stanno sopra la cella, all'estremita' destra, dove il browser
   disegna anche la freccia della tendina. Si riserva lo spazio spostando la
   freccia verso sinistra: spostare i pulsanti non basterebbe, e riservarlo solo
   al passaggio del mouse farebbe saltare la freccia avanti e indietro.
   Due misure diverse perche' le celle dei servizi hanno due pulsanti e quelle
   dei dipendenti uno solo. */
/* Le misure vengono dalla geometria reale, non a occhio. Dal bordo destro:
   il pulsante "copia sopra" occupa 2-20px, "resto giornata" 24-42px.
   La freccia di Bootstrap e' larga 16px e centrata sul valore indicato, quindi
   con 3,2rem (51px) occupa 43-59px: appena oltre i pulsanti. Quella di Select2
   e' larga 20px e ancorata a destra, quindi le basta partire da 2,8rem (45px).
   Nelle celle dei dipendenti c'e' un pulsante solo e serve meta' spazio. */
.cella-slot .select-servizio {
    padding-right: 4rem;
    background-position: right 3.2rem center;
}
.cella-slot .select-slot {
    padding-right: 2.7rem;
    background-position: right 1.9rem center;
}
/* Stessa cosa quando la tendina e' gia' diventata un widget Select2: li' la
   freccia e' un elemento, non un'immagine di sfondo. */
.cella-slot .select-servizio + .select2-container .select2-selection__arrow { right: 2.8rem; }
.cella-slot .select-slot + .select2-container .select2-selection__arrow { right: 1.4rem; }
.cella-slot .select-servizio + .select2-container .select2-selection__rendered { padding-right: 4rem; }
.cella-slot .select-slot + .select2-container .select2-selection__rendered { padding-right: 2.7rem; }

/* "Assegna per il resto della giornata": stessa forma del precedente, spostato
   a sinistra per stare accanto senza coprirlo. */
.btn-resto-giornata {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 1;
    font-size: .7rem;
    border: 1px solid var(--grigio-300);
    border-radius: var(--raggio-sm);
    background: rgba(255, 255, 255, .9);
    color: var(--grigio-700);
    opacity: 0;
    transition: opacity .12s ease;
    cursor: pointer;
}
.cella-slot:hover .btn-copia-sopra,
.cella-slot:hover .btn-resto-giornata,
.btn-copia-sopra:focus,
.btn-resto-giornata:focus { opacity: 1; }
.btn-copia-sopra:hover,
.btn-resto-giornata:hover { background: var(--blu-600); border-color: var(--blu-600); color: #fff; }
:root[data-tema="scuro"] .btn-copia-sopra,
:root[data-tema="scuro"] .btn-resto-giornata { background: rgba(0, 0, 0, .5); color: var(--grigio-500); }

/* Pausa pranzo: riga non assegnabile, attraversa tutti i giorni del servizio */
.slot-pausa      { background: #F5F5F5; border-left-color: #9E9E9E !important; color: var(--grigio-500);
                   font-style: italic; font-weight: 500; }
.riga-pausa .col-slot { opacity: .75; }

:root[data-tema="scuro"] .col-slot { background: #1a2440; color: var(--grigio-500); }
:root[data-tema="scuro"] .slot-ordinario { background: #1e2c47; color: var(--grigio-900); }
:root[data-tema="scuro"] .slot-straord   { background: #14304d; color: #8fc3f5; }
:root[data-tema="scuro"] .slot-emergenza { background: #3d2a12; color: #f0b070; }
:root[data-tema="scuro"] .slot-socio     { background: #143528; color: #7fd3a4; }
:root[data-tema="scuro"] .slot-biblos    { background: #2e2144; color: #c4a8ea; }
:root[data-tema="scuro"] .slot-scoperto  { background: #3d1c1a; color: #f28b82; }
:root[data-tema="scuro"] .slot-ferie     { background: #3a3312; color: #e8cf63; }
:root[data-tema="scuro"] .slot-malattia  { background: #3d1c2c; color: #f28bb0; }
/* In scuro le tinte devono essere piu' chiare che in chiaro: i valori molto
   scuri finivano addosso al blu dello straordinario e al giallo delle ferie.
   Misurati: 35,1 e 51,8 di distanza dal vicino piu' prossimo, contrasto del
   testo 5,5:1 e 5,6:1. */
:root[data-tema="scuro"] .slot-permesso  { background: #155159; color: #a8e6ee; }
:root[data-tema="scuro"] .slot-congedo   { background: #5a4636; color: #e8c9a8; }
:root[data-tema="scuro"] .slot-p3        { background: #2a3138; color: #b0bec5; }
:root[data-tema="scuro"] .slot-pausa     { background: #232c44; color: var(--grigio-500); }

/* --- Striscia delle settimane vicine (tabellone) -------------------------
   Ogni settimana e' una pastiglia con il numero ISO e una barra di
   completamento: quali sono gia' pronte si deve vedere senza aprirle. */
.striscia-settimane { display: flex; flex-wrap: wrap; gap: .3rem; align-items: stretch; }
.sett-pill {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    min-width: 2.6rem; padding: .22rem .35rem .28rem;
    border: 1px solid var(--grigio-200); border-radius: var(--raggio-sm);
    text-decoration: none; color: var(--grigio-700); background: var(--grigio-100);
    font-size: .76rem; line-height: 1; transition: transform .1s ease, box-shadow .1s ease;
}
.sett-pill:hover { transform: translateY(-1px); box-shadow: var(--ombra); color: var(--grigio-900); }
.sett-numero { font-weight: 600; font-variant-numeric: tabular-nums; }
.sett-barra { display: block; width: 100%; height: 3px; border-radius: 2px;
              background: var(--grigio-300); overflow: hidden; }
.sett-barra i { display: block; height: 100%; background: currentColor; }
.sett-pill.vuota    { color: var(--grigio-500); }
.sett-pill.iniziata { color: var(--rosso);  background: var(--rosso-bg);  border-color: var(--rosso); }
.sett-pill.quasi    { color: var(--ambra);  background: var(--ambra-bg);  border-color: var(--ambra); }
.sett-pill.pronta   { color: var(--verde);  background: var(--verde-bg);  border-color: var(--verde); }
/* La settimana aperta e quella odierna devono restare riconoscibili anche
   quando hanno lo stesso stato di quelle accanto. */
.sett-pill.mostrata { outline: 2px solid var(--blu-600); outline-offset: 1px; }
.sett-pill.oggi .sett-numero { text-decoration: underline; text-underline-offset: 2px; }
.testo-pronta { color: var(--verde); }
.testo-quasi  { color: var(--ambra); }