/* ============================================================
   PROD — Modulo Dipendenti (fascicolo, scadenze)

   File a se' e non un'aggiunta ai sei monoliti, sullo stesso criterio di
   certificazioni-module.css: il modulo deve poter essere smontato cancellando
   un file, e i sei della catena sono file caldi che una modifica costringe a
   risigillare.

   Namespace `dip-`, e nessuna classe presa in prestito da altri moduli: le
   `.cert-*` e le `.imp-*` vivono nei fogli di Certificazioni e Impostazioni, e
   alcune leggono token dichiarati sul guscio di quei moduli — fuori da li' non
   avrebbero valore. Dove la forma e' la stessa il pattern e' copiato, non
   importato. Restano condivise solo le classi del guscio dell'app
   (`.modal-overlay`, `.ui-btn`, `.input-field-modern`, `.pill-tab-badge`), che
   vivono nel monolite e non appartengono a nessun modulo.

   Solo token canonici di style-core.css: ruotano gia' col tema, e il tema
   chiaro funziona senza una riga in piu'.
   ============================================================ */

/* PROD non ha un box-sizing globale: senza questo un'altezza dichiarata e' solo
   quella del contenuto, e ogni riga da 46px ne misura 58 col padding. Elencate
   una per una, non con *, per non cambiare regola sotto a markup che non e'
   nostro. */
.dip-pagina,
.dip-testata,
.dip-cerca,
.dip-filtri,
.dip-filtro,
.dip-spunta,
.dip-chip,
.dip-tabella,
.dip-scadenza,
.dip-riga-elenco,
.dip-scheda,
.dip-scheda__testata,
.dip-tab,
.dip-dato,
.dip-sezione,
.dip-pericolo,
.dip-conferma,
.dip-det,
.dip-gr,
.dip-scheda-ore,
.dip-campo,
.dip-icona,
.dip-avatar,
.dip-nota,
.dip-vuoto {
    box-sizing: border-box;
}

/* I token locali stanno sul guscio della pagina E sul modale, perche' il modale
   vive appeso al body e fuori da .dip-pagina non erediterebbe niente. */
.dip-pagina,
.dip-modale {
    --dip-riga-h: 46px;
    /* Il rosso e l'ambra su fondo chiaro stanno sotto la soglia leggibile come
       testo. Sul tema chiaro si scrivono con una variante scura dello stesso
       colore: una riga qui, invece del colore cablato in ogni regola. */
    --dip-allarme-testo: var(--error);
    --dip-avviso-testo: var(--warning);
    --dip-ok-testo: var(--success);
}

:root[data-tema="chiaro"] .dip-pagina,
:root[data-tema="chiaro"] .dip-modale {
    --dip-allarme-testo: color-mix(in srgb, var(--error) 82%, black);
    --dip-avviso-testo: color-mix(in srgb, var(--warning) 82%, black);
    --dip-ok-testo: color-mix(in srgb, var(--success) 78%, black);
}

/* La ricerca globale della topbar qui non serve: la pagina ha la sua, sopra
   l'elenco. Non e' solo spazio guadagnato — restando visibile, la search card
   si prende il fondo della barra e le pastiglie finiscono a meta' strada
   invece che a filo destro, cioe' in un posto diverso da tutti gli altri
   moduli. Sta qui e non in style-core.css apposta: cancellare questo file deve
   bastare a smontare il modulo. L'!important batte le due regole che in
   @media(min-width:769px) impongono display:flex !important alla search card. */
html:root body.page-dipendenti .top-search-card {
    display: none !important;
}

.dip-pagina {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 32px;
    color: var(--text-strong);
    font-family: var(--font-ui);
}

/* ── Testata ─────────────────────────────────────────────── */

.dip-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dip-testata__chi {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.dip-testata__titolo {
    font-family: var(--font-titolo);
    font-size: 1.35rem;
    font-weight: 700;
}

.dip-testata__sotto {
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.dip-testata__azioni {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dip-cerca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 0;
    padding: 0 12px;
    height: 36px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-pill);
    background: var(--panel-soft);
    color: var(--text-tertiary);
}

.dip-cerca input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.86rem;
    outline: none;
}

.dip-corpo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Filtri ──────────────────────────────────────────────── */

.dip-filtri {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* Il filtro con cui si e' arrivati dal Referto, con la sua via d'uscita.
   Senza, chi atterra qui vede un elenco corto e crede che le altre scadenze
   non esistano. */
.dip-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: var(--radius-pill);
    background: var(--accent-wash);
    font-size: 0.8rem;
    color: var(--text-strong);
    width: fit-content;
    max-width: 100%;
}

.dip-chip i { color: var(--accent); font-size: 0.78rem; }

.dip-chip button {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.dip-chip button:hover { color: var(--text-strong); }

/* I ruoli di una persona, nella linguetta Obblighi: pastiglie che vanno a
   capo. `dip-chip` da solo e' un flex che occupa tutta la riga. */
.dip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;
}

.dip-chips .dip-chip { display: inline-flex; }

/* Va a capo. Sulla sezione Ore i bottoni sono quattro, e in fila su un telefono
   spingono fuori tutta la pagina: la coda cresce oltre il contenitore e si
   porta dietro il resto. Con due bottoni non si vedeva. */
.dip-filtri__coda {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.dip-filtro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Un flex item non scende sotto la larghezza intrinseca del suo contenuto,
       e una select ne ha una generosa: senza questo il filtro spinge la coda
       fuori dalla riga. */
    min-width: 0;
}

.dip-filtro__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Il bottone che apre la tendina di PROD, al posto della select di sistema:
   stessa altezza che aveva lei, cosi' la riga dei filtri non cambia. Acceso
   quando un valore e' in vigore, perche' un filtro che non si vede e' un
   filtro che nasconde persone. */
.dip-filtro__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 150px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-mid);
    color: var(--text-strong);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dip-filtro__btn i { font-size: 0.62rem; color: var(--text-tertiary); }
.dip-filtro__btn:hover { border-color: var(--panel-border-mid); }
.dip-filtro__btn.is-attivo { border-color: var(--accent); }
.dip-filtro__btn.is-aperta { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.dip-spunta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── L'elenco ────────────────────────────────────────────── */

.dip-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.dip-tabella th {
    text-align: left;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.dip-tabella td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--panel-border);
    vertical-align: middle;
}

.dip-col-stato { text-align: right; }

.dip-riga {
    cursor: pointer;
    transition: background 0.16s ease;
}

.dip-riga:hover { background: var(--surface-hover-soft); }

.dip-riga:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
    outline-offset: -2px;
}

.dip-persona {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dip-persona__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dip-persona__nome {
    font-weight: 600;
    color: var(--text-strong);
}

.dip-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

:root[data-tema="chiaro"] .dip-avatar { color: var(--accent-strong); }

.dip-sub {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

/* ── I tre pallini ───────────────────────────────────────── */

.dip-pallini {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.dip-pallino {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--panel-border-mid);
}

.dip-pallino--ok { background: var(--success); }
.dip-pallino--avviso { background: var(--warning); }
.dip-pallino--allarme { background: var(--error); }

/* ── Pastiglie ───────────────────────────────────────────── */

.dip-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.dip-pill--neutro {
    background: var(--panel-soft);
    color: var(--text-secondary);
}

.dip-pill--ok {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--dip-ok-testo);
}

.dip-pill--attesa {
    background: var(--panel-soft);
    color: var(--text-secondary);
}

.dip-pill--avviso {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--dip-avviso-testo);
}

.dip-pill--allarme {
    background: color-mix(in srgb, var(--error) 18%, transparent);
    color: var(--dip-allarme-testo);
}

/* ── Lo scadenzario ──────────────────────────────────────── */

.dip-scadenzario {
    display: flex;
    flex-direction: column;
}

.dip-gruppo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 6px;
}

.dip-gruppo:first-child { margin-top: 0; }

.dip-gruppo__titolo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.dip-gruppo__filo {
    flex: 1;
    height: 1px;
    background: var(--panel-border);
}

.dip-gruppo__conta {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-tertiary);
}

.dip-scadenza,
.dip-riga-elenco {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dip-riga-h);
    padding: 8px 10px;
    border-bottom: 1px solid var(--panel-border);
}

.dip-scadenza {
    cursor: pointer;
    transition: background 0.16s ease;
}

.dip-scadenza:hover { background: var(--surface-hover-soft); }

.dip-scadenza:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
    outline-offset: -2px;
}

.dip-scadenza__icona {
    flex: none;
    width: 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.dip-scadenza__cosa {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.dip-scadenza__titolo {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
}

.dip-scadenza__quando {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: none;
}

/* ── La scheda ───────────────────────────────────────────── */

.dip-scheda {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dip-scheda__testata {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
}

.dip-scheda__testata .dip-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
}

.dip-scheda__chi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.dip-scheda__nome {
    font-family: var(--font-titolo);
    font-size: 1.05rem;
    font-weight: 700;
}

.dip-scheda__azioni {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dip-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-mid);
    scrollbar-width: none;
}

.dip-tabs::-webkit-scrollbar { display: none; }

.dip-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    border: 0;
    padding: 7px 13px;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.dip-tab:hover { color: var(--text-strong); }

.dip-tab.is-attiva {
    background: var(--accent-wash);
    color: var(--text-strong);
}

.dip-tab.is-attiva i { color: var(--accent); }

.dip-tab i { font-size: 0.82em; opacity: 0.85; }

.dip-scheda__corpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── I dati dell'anagrafica ──────────────────────────────── */

.dip-dati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.dip-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: var(--radius-card);
    background: var(--panel-soft);
    min-width: 0;
}

.dip-dato__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.dip-dato__valore {
    font-size: 0.88rem;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

/* ── Blocchi ed elenchi dentro la scheda ─────────────────── */

.dip-sezione {
    display: flex;
    flex-direction: column;
}

.dip-sezione__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 4px;
}

.dip-sezione:first-child .dip-sezione__testa { margin-top: 0; }

.dip-sezione__titolo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.dip-azioni {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.dip-riga-elenco__azioni {
    display: flex;
    gap: 4px;
    flex: none;
}

.dip-icona {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.dip-icona:hover {
    background: var(--surface-hover-soft);
    color: var(--text-strong);
}

.dip-icona--rischio:hover { color: var(--dip-allarme-testo); }

/* ── La finestra di import dagli utenti di PROD ──────────── */
/* Quattro colonne fisse e non una griglia elastica: le righe devono
   incolonnarsi fra loro, o l'intestazione non dice piu' a cosa serve il campo
   sotto. La prima e' la spunta, che resta stretta. */

.dip-importa {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 12px;
}

.dip-importa__riga {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.dip-importa__riga--testa {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--panel-border);
}

.dip-importa__riga:not(.dip-importa__riga--testa) { cursor: pointer; }

.dip-importa input[type="text"],
.dip-importa .input-field-modern {
    width: 100%;
    min-width: 0;
}

/* ── Ferie e permessi ────────────────────────────────────── */

.dip-mesenav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dip-mesenav__nome {
    font-family: var(--font-titolo);
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 130px;
    text-align: center;
    text-transform: capitalize;
}

/* Il calendario di reparto. Una riga per persona, una casella per giorno: serve
   a rispondere a una domanda sola — se approvo questa, chi resta? — e per
   quella il buco si deve vedere senza contare.

   Le celle stanno in una griglia a colonne uguali e non in un flex: con il flex
   una riga da trentun caselle e una da ventotto si allineerebbero male, e le
   colonne dei giorni non starebbero incolonnate fra una persona e l'altra. */
.dip-mese {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.dip-mese__riga {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dip-mese__chi {
    flex: none;
    width: 150px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.dip-mese__chi:hover { color: var(--text-strong); }

.dip-mese__celle {
    display: grid;
    grid-template-columns: repeat(var(--dip-giorni, 31), minmax(11px, 1fr));
    gap: 2px;
    flex: 1;
    min-width: 380px;
}

.dip-mese__giorno {
    font-size: 0.62rem;
    text-align: center;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.dip-mese__giorno.is-fermo { opacity: 0.4; }

.dip-cella {
    display: block;
    height: 20px;
    border-radius: 3px;
    background: var(--panel-soft);
}

.dip-cella--fermo { background: color-mix(in srgb, var(--panel-soft) 50%, transparent); }
.dip-cella--ferie { background: var(--accent); }
.dip-cella--permesso { background: var(--warning); }
.dip-cella--malattia { background: var(--error); }
.dip-cella--altro { background: var(--text-tertiary); }

/* Ancora da approvare: a righe, non di un colore diverso. Un quarto colore
   avrebbe voluto dire un'altra voce di legenda, e le righe dicono «non e'
   ancora deciso» senza doverlo spiegare. */
.dip-cella.is-attesa {
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 6px);
}

:root[data-tema="chiaro"] .dip-cella.is-attesa {
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.75) 0 3px, transparent 3px 6px);
}

.dip-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.dip-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dip-legenda .dip-cella {
    width: 14px;
    height: 14px;
    flex: none;
}

/* ── Il foglio ore ───────────────────────────────────────── */

.dip-cella--lavorato { background: color-mix(in srgb, var(--success) 62%, transparent); }

/* Scritto a mano: si vede, e deve vedersi. Un mese tutto corretto a mano merita
   un'occhiata diversa da uno generato, e senza un segno i due sono identici. */
.dip-cella--mano {
    background: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 40%, transparent);
}

.dip-tabella--ore .dip-col-striscia { width: 46%; min-width: 220px; }

/* La striscia del calendario di reparto ha una larghezza minima perche' li' e'
   un calendario che si legge giorno per giorno, e sotto quella soglia le
   caselle diventano illeggibili: scorre dentro `.dip-mese`. Qui invece e' una
   forma d'insieme — dove sono i buchi del mese — e deve restringersi con la
   riga, o sul telefono spinge fuori tutta la pagina. */
.dip-tabella--ore .dip-mese__celle { min-width: 0; }
.dip-col-num { text-align: right; white-space: nowrap; }

.dip-h {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.dip-riga.is-aperta { background: var(--accent-wash); }

/* Il riquadro che contiene la scheda di presenza di una persona. */
.dip-det {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
    box-sizing: border-box;
}

.dip-det__testa {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dip-det__testa .dip-icona { margin-left: auto; }

/* I sette campi dell'orario settimanale. Sette e non «ore a settimana»:
   quaranta ore su cinque giorni e quaranta su sei sono due mesi diversi. */
.dip-orario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 4px 0 12px;
}

.dip-orario__giorno {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dip-orario__giorno input {
    width: 100%;
    min-width: 0;
    text-align: center;
}

/* Il riquadro che chiede la conferma del proprio mese. Sostituisce la firma
   sulla carta, quindi ha il peso visivo di una firma: staccato, con l'accento,
   e con lo spazio per dire cosa non torna prima di confermare. */
.dip-conferma {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: var(--radius-card);
    background: var(--accent-wash);
    box-sizing: border-box;
}

.dip-conferma > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 240px;
    min-width: 0;
}

.dip-conferma input { flex: 1 1 200px; min-width: 0; }

/* ── I saldi ─────────────────────────────────────────────── */

.dip-saldi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.dip-saldo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--radius-card);
    background: var(--panel-soft);
    min-width: 0;
}

.dip-saldo__nome {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.dip-saldo__grande {
    font-family: var(--font-titolo);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.dip-saldo__grande small {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 6px;
}

.dip-saldo__vuoto {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* L'avviso dentro il modale della richiesta: cosa succede se si conferma cosi'.
   Non blocca — PROD non sa quante persone servono in linea, e non deve fingere
   di saperlo. */
.dip-avviso {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--warning) 9%, transparent);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--dip-avviso-testo);
    box-sizing: border-box;
}

/* ── La riga che cancella ────────────────────────────────── */
/* Staccata dal resto e in fondo, non fra i dati: e' l'unica azione di questa
   scheda che non si annulla, e non deve stare a un dito da «Modifica». */

.dip-pericolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--error) 7%, transparent);
}

.dip-pericolo > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 260px;
}

.dip-pericolo__titolo {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--dip-allarme-testo);
}

.dip-btn-pericolo {
    border-color: color-mix(in srgb, var(--error) 45%, transparent);
    color: var(--dip-allarme-testo);
    flex: none;
}

.dip-btn-pericolo:hover {
    background: color-mix(in srgb, var(--error) 14%, transparent);
}

/* ── Vuoti e note ────────────────────────────────────────── */

.dip-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: var(--text-tertiary);
    text-align: center;
}

.dip-vuoto i { font-size: 1.6rem; opacity: 0.7; }
.dip-vuoto p { margin: 0; font-size: 0.92rem; color: var(--text-secondary); font-weight: 600; }
.dip-vuoto span { font-size: 0.82rem; }

/* La nota di paragrafo: cio' che va detto ma non merita una riga cliccabile.
   In fondo al gruppo, non sopra le righe. */
.dip-nota {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-tertiary);
}

/* ── Il modale ───────────────────────────────────────────── */
/* La larghezza segue cio' che deve contenere. L'anagrafica ha dodici campi e
   non e' una tabella: e' un modulo, e si impagina su due colonne. Il minmax a
   210px e' misurato sul campo piu' lungo — una data con il suo selettore — e
   `min-width: 0` sul campo insieme a `width: 100%` sull'input e' cio' che
   impedisce al secondo di uscire dal bordo: un flex item non scende sotto la
   larghezza intrinseca del contenuto, e un input ne ha una di serie generosa. */

/* `width` e non `max-width`: `.modal-content` dichiara gia'
   `width: min(500px, ...)`, e un `max-width: 720px` non allarga niente — mette
   solo un tetto piu' alto di una larghezza che resta 500. Il modale «largo»
   sarebbe rimasto identico agli altri, e la sola prova sarebbe stata contare le
   colonne della griglia. */
.dip-modale { width: min(520px, calc(100vw - 24px)); }
.dip-modale--largo { width: min(720px, calc(100vw - 24px)); }

.dip-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 4px 0 12px;
}

.dip-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.dip-campo--largo { grid-column: 1 / -1; }

.dip-campo__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* La tendina e il calendario di PROD dentro il modale NON si rivestono qui:
   il loro vestito sta in style-overlays.css ed e' lo stesso in tutta l'app
   (tools/tests/calendario-unico.test.mjs). */
.dip-campo input,
.dip-campo textarea {
    width: 100%;
    min-width: 0;
}

/* ── Sul telefono ────────────────────────────────────────── */
/* Le tabelle non si rimpiccioliscono: la riga diventa una scheda impilata, e
   l'intestazione sparisce perche' l'etichetta di ogni valore e' gia' nel
   contesto. Le viste vere del telefono arriveranno con dipendenti-mobile.js:
   questo e' il minimo perche' nel frattempo la pagina resti leggibile. */

@media (max-width: 768px) {
    .dip-pagina { gap: 14px; }

    .dip-tabella:not(.dip-tabella--scheda) thead { display: none; }

    /* LA SCHEDA DI PRESENZA RESTA UNA TABELLA anche sul telefono, ed e'
       l'eccezione che vale la pena scrivere: impilata diventerebbe una colonna
       di trecentosessanta caselle senza intestazione, dove non si capisce piu'
       quale ora sia l'entrata e quale l'uscita. Scorre invece dentro il suo
       riquadro — .dip-scheda-ore__tabella — e la pagina sotto non si muove. */
    .dip-tabella:not(.dip-tabella--scheda),
    .dip-tabella:not(.dip-tabella--scheda) tbody,
    .dip-tabella:not(.dip-tabella--scheda) tr,
    .dip-tabella:not(.dip-tabella--scheda) td {
        display: block;
        width: 100%;
    }

    .dip-tabella:not(.dip-tabella--scheda) tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--panel-border);
    }

    .dip-tabella:not(.dip-tabella--scheda) td {
        padding: 2px 0;
        border: 0;
    }

    .dip-tabella td.dip-col-stato {
        text-align: left;
        padding-top: 8px;
    }

    .dip-filtri__coda { margin-left: 0; }

    .dip-scadenza,
    .dip-riga-elenco {
        flex-wrap: wrap;
    }

    .dip-scadenza__quando {
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }
}

/* ── La scheda di presenza ────────────────────────────────────
   La forma del foglio che l'azienda compila da anni: un giorno per riga, gli
   orari da scrivere, il totale e il saldo a destra. Righe e non una griglia di
   trentun colonne — in una casella da undici pixel non ci si scrive un orario. */

.dip-scheda-ore {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
}

/* I numeri che dicono se il mese torna, prima della tabella che dice perche'. */
.dip-sommario {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.dip-sommario__voce {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 84px;
    padding: 6px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-soft);
}

.dip-sommario__voce small {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.dip-sommario__voce b {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.dip-sommario__voce.is-piu b { color: var(--dip-ok-testo); }
.dip-sommario__voce.is-meno b { color: var(--dip-allarme-testo); }

/* La tabella scorre da sola invece di allargare la pagina: dodici colonne su un
   telefono non ci stanno, e senza questo si porterebbero dietro tutto il
   guscio dell'app in orizzontale. */
.dip-scheda-ore__tabella {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dip-tabella--scheda {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Con due coppie dalle/alle invece di tre restano centoquaranta pixel: vanno
   in aria fra le colonne, non in una colonna in piu'. */
.dip-tabella--scheda th,
.dip-tabella--scheda td {
    padding: 4px 8px;
    white-space: nowrap;
}

.dip-tabella--scheda tfoot th,
.dip-tabella--scheda tfoot td {
    padding-top: 7px;
    border-top: 2px solid var(--panel-border);
    font-weight: 700;
}

.dip-tabella--scheda tfoot th { text-align: left; }

/* Sabato, domenica e le feste: si vedono a colpo d'occhio senza leggere la
   data, come sul foglio di carta. */
.dip-gr.is-fermo { background: var(--panel-soft); }
.dip-gr.is-mano { box-shadow: inset 2px 0 0 var(--accent); }

.dip-gr__giorno {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.dip-gr__data {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.dip-ora__campo {
    /* `width` e non `max-width`: un input ha una larghezza intrinseca sua di
       circa 200px, e senza questo le colonne pretenderebbero il triplo dello
       spazio disponibile. */
    width: 82px;
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.82rem;
    text-align: center;
}

/* IL `display` DELLA CELLA RESTA QUELLO DI UNA CELLA. Un `td` che dichiara
   grid o flex smette di essere una cella di tabella: il browser gli mette
   intorno una cella anonima, e il bordo che arriva da `.dip-tabella td` viene
   disegnato attorno a una scatola alta quanto il suo contenuto invece che
   quanto la riga. Il filo fra una riga e l'altra si spezzava proprio qui, e si
   spostava su e giu' a seconda che il giorno avesse la pastiglia o no. La
   griglia sta dentro, su `.dip-gr__nota-box`. */
.dip-gr__nota { min-width: 260px; }

/* Due posti, e il primo e' largo sempre uguale anche quando e' vuoto. Senza, il
   campo della nota partiva dopo la pastiglia — cioe' da un punto diverso in
   ogni riga — e la colonna si leggeva sfrangiata. */
/* 132px, che e' quanto misura «Permesso ROL 4:00» — l'etichetta piu' lunga fra
   quelle che capitano davvero. Le altre due che si misurano in ore («Ex
   festivita'», «Permesso non retribuito») restano accorciate, e il `title`
   della pastiglia le dice per intero: allargare il posto fino alla piu' lunga
   di tutte ruberebbe sessanta pixel a ogni riga per un caso raro. */
.dip-gr__nota-box {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.dip-gr__segno {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

/* Un'etichetta lunga — «Permesso ROL 2:00» — si accorcia invece di allargare la
   colonna: allargarla rimetterebbe le righe fuori squadra, che e' il difetto
   che questa regola esiste per togliere. */
.dip-gr__segno .dip-pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dip-gr__nota-campo {
    min-width: 0;
    padding: 3px 7px;
    font-size: 0.8rem;
}

.dip-piu { color: var(--dip-ok-testo); font-weight: 600; }
.dip-meno { color: var(--dip-allarme-testo); font-weight: 600; }

.dip-scheda-ore__coda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.dip-scheda-ore__nota {
    flex: 1 1 220px;
    min-width: 0;
}

/* L'indirizzo a cui vanno le schede, dentro le impostazioni degli orari. */
.dip-destinatario {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dip-destinatario input {
    flex: 1;
    min-width: 0;
}

.dip-orario__fasce {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dip-orario__fascia {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dip-orario__fascia input {
    width: 92px;
    min-width: 0;
}

/* Sul telefono i campi si stringono, ma le colonne restano tutte: nasconderne
   due farebbe sbagliare il colspan della riga dei totali, e una riga «saldo
   ore» disallineata su un documento di paghe si nota subito. La tabella scorre
   dentro il suo riquadro, e la pagina sotto non si muove. */
/* La colonna delle note NON si stringe qui. Stringerla a 150px lasciava al
   campo sedici pixel — il posto della pastiglia ne prende 132 piu' il divario —
   cioe' una casella in cui non si vede quel che si scrive. La tabella scorre
   gia' di suo: una colonna larga costa uno scorrimento, una colonna inservibile
   costa la nota. */
@media (max-width: 640px) {
    .dip-ora__campo { width: 66px; padding: 3px 2px; }
}

/* ── I tre tasti della riga ───────────────────────────────────
   A assente, P permesso, C malattia. Stanno in testa alla riga perché sul
   telefono è il primo posto dove arriva il pollice, e perché segnare un giorno
   è l'azione più frequente della scheda: prima ancora di leggere le ore. */

.dip-gr__codici {
    white-space: nowrap;
    padding-right: 6px;
}

.dip-codice {
    width: 22px;
    height: 22px;
    margin-right: 2px;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-soft);
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.dip-codice:hover {
    border-color: var(--accent);
    color: var(--text-strong);
}

/* Il tasto del codice già segnato resta acceso: senza, per sapere cosa c'è su
   quel giorno bisogna leggere la pastiglia in fondo alla riga. */
.dip-codice.is-attivo {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--panel-bg);
}

.dip-icona--cert { color: var(--accent); }

/* La spunta e' gia' dichiarata piu' su, per il filtro dei cessati: qui c'e'
   solo cio' che le mancava. Ridichiararla per intero avrebbe cambiato anche
   quella — stesso nome, stesso file, vince l'ultima. */
.dip-spunta input { width: 16px; height: 16px; margin: 0; }

/* Dentro un modale la spunta ha una riga sotto di se', non un'altra spunta. */
.dip-modale .dip-spunta { margin-bottom: 10px; }

/* ── La Dashboard ─────────────────────────────────────────────
   Chi sono, il mio mese, le mie ferie, cio' che mi scade: blocchi corti su una
   pagina sola. Niente riquadri intorno — sarebbero quattro cornici dentro la
   cornice della pagina per separare cose che si distinguono gia' da sole. */

.dip-dash__testa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dip-dash__testa .ui-btn { margin-left: auto; }

.dip-dash__blocco + .dip-dash__blocco { margin-top: 18px; }

/* ── L'interruttore «Le mie · Tutte» ──────────────────────────
   Sta in testa alla riga dei filtri, staccato da cio' che segue: non filtra
   quello che c'e' sotto, cambia di chi sono le cose. `margin-right` e non un
   `gap` della riga, che vale gia' fra tutti gli altri. */

.dip-ambito {
    margin-right: 4px;
    flex: none;
}

.dip-ambito .dip-tab { padding: 5px 11px; }

/* ── La matrice persone × obblighi ────────────────────────────
   Una riga per persona, una colonna per obbligo, lo stato in ogni casella.
   Scorre dentro il suo riquadro — quattordici colonne su un telefono non ci
   stanno — e la colonna delle persone resta ferma mentre il resto scorre,
   o a meta' tabella non si sa piu' di chi e' la riga. */

.dip-matrice__scorri {
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
}

.dip-matrice {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}

.dip-matrice th,
.dip-matrice td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--panel-border);
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.dip-matrice thead th {
    padding: 10px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--panel-mid);
}

.dip-matrice tbody tr:last-child th,
.dip-matrice tbody tr:last-child td { border-bottom: 0; }

/* La colonna delle persone: ferma a sinistra, col fondo pieno perche' le
   caselle che le scorrono sotto non trasparissero. */
.dip-matrice th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    padding-left: 12px;
    text-align: left;
    background: var(--panel-mid);
    box-shadow: 1px 0 0 var(--panel-border);
}

.dip-matrice__persona {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.dip-matrice__persona:hover .dip-persona__nome { color: var(--accent); }

.dip-matrice__riga.is-manca th:first-child,
.dip-matrice__riga.is-scaduto th:first-child { box-shadow: inset 3px 0 0 var(--error), 1px 0 0 var(--panel-border); }
.dip-matrice__riga.is-in-scadenza th:first-child { box-shadow: inset 3px 0 0 var(--warning), 1px 0 0 var(--panel-border); }

/* La persona a cui nessuno ha scritto cosa deve avere: una riga intera che
   lo dice, e che porta alla linguetta dove si scrive. */
.dip-matrice__riga.is-senza td { text-align: left; padding-left: 10px; }

.dip-matrice__senza {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed color-mix(in srgb, var(--warning) 60%, transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--dip-avviso-testo);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.dip-matrice__senza:hover { background: color-mix(in srgb, var(--warning) 12%, transparent); }

/* La casella: un quadrato, un colore, un segno. Il colore dice lo stato da
   lontano, il segno da vicino, il title al passaggio del mouse. */
.dip-cella-obbligo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.dip-cella-obbligo:hover { transform: scale(1.08); border-color: var(--text-tertiary); }

.dip-cella-obbligo--manca,
.dip-cella-obbligo--scaduto {
    background: color-mix(in srgb, var(--error) 22%, transparent);
    color: var(--dip-allarme-testo);
}

.dip-cella-obbligo--in-scadenza {
    background: color-mix(in srgb, var(--warning) 24%, transparent);
    color: var(--dip-avviso-testo);
}

.dip-cella-obbligo--valido {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    color: var(--dip-ok-testo);
}

.dip-cella-obbligo--riservato {
    background: var(--panel-soft);
    color: var(--text-tertiary);
    cursor: default;
}

.dip-cella-obbligo--riservato:hover { transform: none; border-color: transparent; }

.dip-cella-obbligo--nessuno {
    background: transparent;
    color: var(--text-tertiary);
}

/* I numeri in testa alla matrice sono bottoni: ognuno accende il filtro che
   lo spiega. Stessa forma delle voci del mese, piu' il fuoco e l'acceso. */
.dip-sommario--matrice { margin: 0 0 6px; }

.dip-sommario__voce--btn {
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.dip-sommario__voce--btn:hover { border-color: var(--panel-border-mid); }
.dip-sommario__voce--btn.is-attivo { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.dip-sommario__voce--btn.is-avviso b { color: var(--dip-avviso-testo); }