/* Gestionale PIVA — stile applicativo (mobile-first, barra laterale da lg in su)
   Sezioni: 1. fondamenta (token) · 2. componenti comuni · 3. struttura e navigazione · 4. pagine · 5. utilità */

/* === 1. Fondamenta ======================================================= */
:root {
    /* Colori di marca */
    --app-primario: #1f3a5f;
    --app-primario-chiaro: #2c5282;
    --app-accento: #2f6fb0;
    --app-accento-tenue: #e8f0fa;

    /* Neutri */
    --app-sfondo: #f3f5f8;
    --app-superficie: #fff;
    --app-superficie-2: #f8fafc;
    --app-bordo: #e2e6ec;
    --app-bordo-forte: #cfd6df;
    --app-testo: #1e293b;
    --app-testo-tenue: #64748b;

    /* Stati: testo scuro su fondo tenue (contrasto ≥ 4.5:1) e colore pieno per barre e bordi */
    --stato-successo: #15803d;   --stato-successo-fondo: #e8f6ed;   --stato-successo-pieno: #16a34a;
    --stato-attenzione: #92400e; --stato-attenzione-fondo: #fdf3e1; --stato-attenzione-pieno: #f59e0b;
    --stato-pericolo: #b91c1c;   --stato-pericolo-fondo: #fdecec;   --stato-pericolo-pieno: #dc2626;
    --stato-info: #1d4f8a;       --stato-info-fondo: #e8f0fa;       --stato-info-pieno: #2f6fb0;
    --stato-neutro: #475569;     --stato-neutro-fondo: #eef1f5;     --stato-neutro-pieno: #94a3b8;

    /* Spaziature (scala da 4px), raggi, ombre */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
    --raggio-s: .5rem;
    --raggio: .75rem;
    --ombra-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --ombra-2: 0 4px 16px rgba(15, 23, 42, .08);

    /* Tipografia */
    --testo-xs: .75rem; --testo-s: .8125rem; --testo-m: .9375rem;
    --titolo-pagina: 1.625rem;

    --app-sidebar-larghezza: 248px;
    --app-bottom-altezza: 60px;

    /* --bs-body-bg resta bianco: Bootstrap lo usa anche per card, campi ed elenchi. */
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--app-testo);
    --bs-border-color: var(--app-bordo);
    --bs-link-color: var(--app-accento);
    --bs-link-color-rgb: 47, 111, 176;
    --bs-link-hover-color: var(--app-primario);
    --bs-primary: var(--app-accento);
    --bs-primary-rgb: 47, 111, 176;
}

/* Spazio della barra di scorrimento sempre riservato: il contenuto non salta tra pagine corte e lunghe. */
html { scrollbar-gutter: stable; }

/* Le icone hanno un riquadro fisso: finché il font non è caricato occupano comunque lo stesso spazio,
   così le etichette accanto non si spostano (effetto "tremolio" nel menu). */
.app-sidebar-link .bi,
.app-sidebar-marchio .bi,
.app-sidebar-utente .bi,
.lista-menu .list-group-item .bi:first-child {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    text-align: center;
    line-height: 1;
}
.app-bottom-link .bi {
    height: 1.375rem;
    width: 1.5rem;
    text-align: center;
}

body.app {
    background: var(--app-sfondo);
    color: var(--app-testo);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}
/* Numeri sempre allineati in colonna */
.app .table, .riquadro-valore, .text-end, .badge { font-variant-numeric: tabular-nums; }

/* === 2. Componenti comuni ================================================ */

/* --- Bottoni e campi: area di tocco minima 44px ------------------------- */
.app .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.app .btn-lg { min-height: 52px; }
.app .form-control,
.app .form-select { min-height: 44px; }

.btn-primary {
    --bs-btn-bg: var(--app-accento);
    --bs-btn-border-color: var(--app-accento);
    --bs-btn-hover-bg: var(--app-primario-chiaro);
    --bs-btn-hover-border-color: var(--app-primario-chiaro);
    --bs-btn-active-bg: var(--app-primario);
    --bs-btn-active-border-color: var(--app-primario);
    --bs-btn-disabled-bg: var(--app-accento);
    --bs-btn-disabled-border-color: var(--app-accento);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-accento);
    --bs-btn-border-color: var(--app-accento);
    --bs-btn-hover-bg: var(--app-accento);
    --bs-btn-hover-border-color: var(--app-accento);
    --bs-btn-active-bg: var(--app-primario);
    --bs-btn-active-border-color: var(--app-primario);
}
.btn-outline-secondary {
    --bs-btn-color: var(--app-testo);
    --bs-btn-border-color: var(--app-bordo-forte);
    --bs-btn-bg: var(--app-superficie);
    --bs-btn-hover-color: var(--app-primario);
    --bs-btn-hover-bg: var(--app-superficie-2);
    --bs-btn-hover-border-color: var(--app-accento);
    --bs-btn-active-color: var(--app-primario);
    --bs-btn-active-bg: var(--app-accento-tenue);
    --bs-btn-active-border-color: var(--app-accento);
}
.btn-outline-danger { --bs-btn-bg: var(--app-superficie); }
.app .btn { font-weight: 500; border-radius: var(--raggio-s); }
.app .btn-sm { border-radius: .375rem; }
.form-control:focus,
.form-select:focus {
    border-color: var(--app-accento);
    box-shadow: 0 0 0 .2rem rgba(47, 111, 176, .2);
}

/* --- Form ---------------------------------------------------------------- */
.app .form-label { font-weight: 500; font-size: var(--testo-m); margin-bottom: .375rem; }
.app .form-text { font-size: var(--testo-s); color: var(--app-testo-tenue); }
.app .form-control, .app .form-select { border-color: var(--app-bordo-forte); border-radius: var(--raggio-s); }
.app .is-invalid { border-color: var(--stato-pericolo-pieno); }
.app .invalid-feedback { font-weight: 500; color: var(--stato-pericolo); }
.titolo-sezione-form {
    font-size: var(--testo-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-testo-tenue);
    margin: var(--sp-6) 0 var(--sp-3);
}

/* --- Card ---------------------------------------------------------------- */
.card {
    border-color: var(--app-bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
}
.card-header {
    background: var(--app-superficie);
    border-bottom-color: var(--app-bordo);
    font-weight: 600;
    color: var(--app-primario);
    padding: .75rem 1.125rem;
}
.card-header > .bi:first-child { color: var(--app-accento); }
.card-header p, .card-header small, .card-header .small { font-weight: 400; color: var(--app-testo-tenue); }
.card-header:first-child { border-radius: var(--raggio) var(--raggio) 0 0; }
.card-body { padding: 1.125rem; }
.card-footer { background: var(--app-superficie-2); border-top-color: var(--app-bordo); padding: .75rem 1.125rem; }
.card-footer:last-child { border-radius: 0 0 var(--raggio) var(--raggio); }
.card-piatta { box-shadow: none; }
.card-evidenziata { border-color: var(--app-accento); box-shadow: 0 0 0 1px var(--app-accento), var(--ombra-1); }

/* --- Tabelle ------------------------------------------------------------- */
.app .table {
    --bs-table-hover-bg: #f5f8fc;
    --bs-table-striped-bg: var(--app-superficie-2);
    margin-bottom: 0;
}
.app .table > thead > tr > th,
.app .table > thead > tr > td {
    font-size: var(--testo-s);
    font-weight: 600;
    color: var(--app-testo-tenue);
    background: var(--app-superficie-2);
    border-bottom: 1px solid var(--app-bordo);
    white-space: nowrap;
    vertical-align: middle;
}
.app .table > :not(caption) > * > * { border-bottom-color: var(--app-bordo); }
.app .table > tbody > tr:last-child > * { border-bottom-width: 0; }
.app .table > tfoot > tr > * {
    background: var(--app-superficie-2);
    border-top: 1.5px solid var(--app-bordo-forte);
    border-bottom-width: 0;
    font-weight: 600;
    color: var(--app-primario);
}
/* Tabelle dentro card a filo: prima e ultima colonna allineate al testo della card */
.card > .table > :not(caption) > * > *:first-child,
.card > .table-responsive > .table > :not(caption) > * > *:first-child,
.card-body.p-0 > .table > :not(caption) > * > *:first-child,
.card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:first-child { padding-left: 1.125rem; }
.card > .table > :not(caption) > * > *:last-child,
.card > .table-responsive > .table > :not(caption) > * > *:last-child,
.card-body.p-0 > .table > :not(caption) > * > *:last-child,
.card-body.p-0 > .table-responsive > .table > :not(caption) > * > *:last-child { padding-right: 1.125rem; }
.app .table-sm > :not(caption) > * > * { padding-top: .4375rem; padding-bottom: .4375rem; }

/* --- Badge e stati: fondo tenue, testo scuro ----------------------------- */
.app .badge { font-weight: 600; border-radius: 999px; padding: .3em .65em; letter-spacing: .01em; }
.app .badge.text-bg-secondary { background: var(--stato-neutro-fondo) !important; color: var(--stato-neutro) !important; }
.app .badge.text-bg-success   { background: var(--stato-successo-fondo) !important; color: var(--stato-successo) !important; }
.app .badge.text-bg-warning   { background: var(--stato-attenzione-fondo) !important; color: var(--stato-attenzione) !important; }
.app .badge.text-bg-danger    { background: var(--stato-pericolo-fondo) !important; color: var(--stato-pericolo) !important; }
.app .badge.text-bg-primary,
.app .badge.text-bg-info      { background: var(--stato-info-fondo) !important; color: var(--stato-info) !important; }
.app .badge.text-bg-light     { background: var(--app-superficie) !important; color: var(--app-testo) !important; border-color: var(--app-bordo-forte) !important; }
.app .badge.text-bg-dark      { background: var(--app-primario) !important; }
/* Badge sulle voci di elenco attive (fondo pieno) */
.list-group-item.active > .badge.text-bg-secondary { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }

/* --- Avvisi --------------------------------------------------------------- */
.app .alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--raggio-s);
    padding: .75rem 1rem;
    font-size: var(--testo-m);
}
.app .alert-warning   { background: var(--stato-attenzione-fondo); border-color: #f3dcb0; border-left-color: var(--stato-attenzione-pieno); color: var(--stato-attenzione); }
.app .alert-danger    { background: var(--stato-pericolo-fondo); border-color: #f5c9c9; border-left-color: var(--stato-pericolo-pieno); color: var(--stato-pericolo); }
.app .alert-success   { background: var(--stato-successo-fondo); border-color: #c4e6d0; border-left-color: var(--stato-successo-pieno); color: var(--stato-successo); }
.app .alert-info      { background: var(--stato-info-fondo); border-color: #c9dbf0; border-left-color: var(--stato-info-pieno); color: var(--stato-info); }
.app .alert-secondary { background: var(--stato-neutro-fondo); border-color: var(--app-bordo); border-left-color: var(--stato-neutro-pieno); color: var(--stato-neutro); }
.app .alert .alert-link, .app .alert a { color: inherit; font-weight: 600; }
.app .alert > .bi:first-child { margin-right: .375rem; }

/* --- Elenchi --------------------------------------------------------------- */
.app .list-group { --bs-list-group-border-color: var(--app-bordo); --bs-list-group-border-radius: var(--raggio); }
.app .list-group-item-action:hover { background: #f5f8fc; }
/* Card intera cliccabile (es. "Spese fisse mensili" in Spese) */
.card-collegamento { color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.card-collegamento:hover { border-color: var(--app-accento); box-shadow: var(--ombra-2); color: inherit; }

/* === 3. Struttura e navigazione ========================================== */
.app-shell { min-height: 100vh; min-height: 100dvh; }
.app-main { min-width: 0; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--app-primario);
    color: #fff;
    padding: calc(env(safe-area-inset-top) + .875rem) 1rem .875rem;
}
.app-topbar-titolo { font-weight: 600; font-size: 1.125rem; }

.app-content {
    padding: 1rem 1rem calc(var(--app-bottom-altezza) + env(safe-area-inset-bottom) + 1.5rem);
}

.app-titolo {
    font-size: var(--titolo-pagina);
    font-weight: 650;
    letter-spacing: -.01em;
    margin-bottom: 1.5rem;
    color: var(--app-primario);
}
.app-sottotitolo { margin: -1.25rem 0 1.5rem; color: var(--app-testo-tenue); font-size: var(--testo-m); }
/* Titoletti di sezione dentro le pagine (h2.h5, h2.h6) */
.app-content h2.h5, .app-content h2.h6 { color: var(--app-primario); font-weight: 600; }

/* --- Navigazione in basso (telefono) ------------------------------------ */
.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--app-bordo);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .05);
}
.app-bottom-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--app-bottom-altezza);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--app-testo-tenue);
    text-decoration: none;
    font-size: .6875rem;
    font-weight: 500;
}
.app-bottom-link .bi { font-size: 1.375rem; line-height: 1; }
.app-bottom-link.attivo { color: var(--app-accento); font-weight: 600; }
/* Voce attiva: icona su una "pillola" tenue, come nelle app native */
.app-bottom-link.attivo .bi { background: var(--app-accento-tenue); border-radius: 999px; width: 3.25rem; box-shadow: 0 0 0 .1875rem var(--app-accento-tenue); }
.app-bottom-link:hover { color: var(--app-primario); }

/* --- Barra laterale (PC) ------------------------------------------------ */
.app-sidebar {
    flex-direction: column;
    background: var(--app-primario);
    color: #fff;
    padding: 1.25rem .875rem;
}
.app-sidebar-marchio {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    padding: .25rem .875rem 1.25rem;
}
.app-sidebar-marchio .bi { font-size: 1.375rem; color: #8fb8e8; }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar-gruppo {
    display: block;
    padding: 1rem .875rem .375rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
}
.app-sidebar-gruppo:first-child { padding-top: 0; }
.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .5rem .875rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    text-align: left;
    font-size: .9375rem;
}
.app-sidebar-link .bi { font-size: 1.125rem; }
.app-sidebar-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.app-sidebar-link.attivo { position: relative; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.app-sidebar-link.attivo::before {
    content: "";
    position: absolute;
    left: -.875rem;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #8fb8e8;
}
.app-sidebar-link.attivo .bi { color: #8fb8e8; }
.app-sidebar-link:focus-visible,
.app-bottom-link:focus-visible { outline: 2px solid #8fb8e8; outline-offset: -2px; }
.app-sidebar-piede {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.app-sidebar-utente {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .875rem .5rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .6);
}
.app-sidebar-utente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 992px) {
    .app-shell { display: flex; }
    .app-sidebar {
        position: sticky;
        top: 0;
        width: var(--app-sidebar-larghezza);
        flex: 0 0 var(--app-sidebar-larghezza);
        height: 100vh;
        overflow-y: auto;
    }
    .app-main { flex: 1 1 auto; }
    .app-content { padding: 2rem 2.5rem; max-width: 1400px; }
}

/* --- Toast --------------------------------------------------------------- */
.app-toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top) + .75rem);
    left: .75rem;
    right: .75rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    pointer-events: none;
}
.app-toast-container .toast { pointer-events: auto; max-width: 100%; }
@media (min-width: 576px) {
    .app-toast-container { left: auto; align-items: flex-end; }
}

/* --- Stati vuoti e segnaposto ------------------------------------------- */
.vuoto {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--app-superficie);
    border: 1px dashed var(--app-bordo-forte);
    border-radius: var(--raggio);
    color: var(--app-testo-tenue);
}
.vuoto-compatto { padding: 1.5rem 1rem; border: 0; }
.vuoto-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .875rem;
    border-radius: 50%;
    background: var(--app-accento-tenue);
    font-size: 1.75rem;
    color: var(--app-accento);
}
.vuoto-compatto .vuoto-icona { width: 3rem; height: 3rem; font-size: 1.375rem; }
.vuoto p:last-child { margin-bottom: 0; }
.vuoto .btn { margin-top: .75rem; }

/* === 4. Pagine =========================================================== */

/* --- Oggi ---------------------------------------------------------------- */
.oggi-data {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-primario);
    margin-bottom: 1rem;
}
.azioni-rapide { display: grid; gap: .75rem; }
.btn-azione {
    min-height: 64px !important;
    justify-content: flex-start !important;
    gap: .875rem !important;
    padding: .75rem 1.125rem;
    background: #fff;
    border: 1px solid var(--app-bordo);
    border-radius: .75rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--app-primario);
    text-align: left;
}
.btn-azione .bi { font-size: 1.5rem; color: var(--app-accento); }
.btn-azione:hover { background: #fff; border-color: var(--app-accento); color: var(--app-primario); }
.btn-azione-primaria,
.btn-azione-primaria:hover { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }
.btn-azione-primaria .bi { color: #fff; }
.btn.btn-azione:disabled { opacity: .55; background: #fff; border-color: var(--app-bordo); color: var(--app-primario); }
.btn.btn-azione-primaria:disabled { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }

/* --- Menu "Altro" -------------------------------------------------------- */
.lista-menu .list-group-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 52px;
    width: 100%;
    text-align: left;
}
.lista-menu .list-group-item .bi:first-child { font-size: 1.25rem; width: 1.5rem; text-align: center; }
.titolo-gruppo-menu {
    margin: 1.25rem .25rem .5rem;
    font-size: var(--testo-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-testo-tenue);
}
.titolo-gruppo-menu:first-child { margin-top: 0; }
.lista-menu .list-group-item .bi:first-child { color: var(--app-accento); }
.lista-menu > form > .list-group-item {
    border-top-width: 0;
    border-radius: 0 0 var(--bs-list-group-border-radius) var(--bs-list-group-border-radius);
}

/* --- Barra superiore: pulsante indietro --------------------------------- */
.app-topbar { display: flex; align-items: center; gap: .5rem; }
.app-topbar-indietro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -.625rem 0 -.625rem -.75rem;
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
}

/* --- Schede di Impostazioni (scorrono in orizzontale sul telefono) ------ */
/* Una riga sola con la scheda attiva sottolineata; sul telefono scorre in orizzontale. */
.schede-impostazioni {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    margin: 0 -1rem 1.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--app-bordo);
    scrollbar-width: none;
}
.schede-impostazioni::-webkit-scrollbar { display: none; }
.scheda {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .375rem .75rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--app-testo-tenue);
    text-decoration: none;
    font-size: var(--testo-m);
    font-weight: 500;
    white-space: nowrap;
}
.scheda:hover { color: var(--app-primario); border-bottom-color: var(--app-bordo-forte); }
.scheda.attiva { color: var(--app-accento); border-bottom-color: var(--app-accento); font-weight: 600; }
@media (min-width: 992px) {
    /* Su PC le schede vanno a capo invece di scorrere (Impostazioni ne ha molte). */
    .schede-impostazioni { margin: 0 0 1.5rem; padding: 0; flex-wrap: wrap; overflow: visible; column-gap: .25rem; }
}

/* --- Elenchi delle anagrafiche ------------------------------------------ */
.riga-elenco { display: flex; align-items: center; gap: .875rem; min-height: 56px; }
.riga-elenco > .bi { font-size: 1.25rem; color: var(--app-testo-tenue); flex: 0 0 1.5rem; width: 1.5rem; text-align: center; }
.riga-elenco.active > .bi,
.riga-elenco.active .text-body-secondary { color: rgba(255, 255, 255, .85) !important; }
.list-group-item.active { background: var(--app-accento); border-color: var(--app-accento); }

/* --- Colori delle attività (variabili --att da colori.php) -------------- */
.badge-attivita { background: var(--att, #64748b); color: var(--att-testo, #fff); font-weight: 500; }
.pallino-attivita {
    display: inline-block;
    flex: 0 0 auto;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    background: var(--att, #64748b);
}

/* --- Registrazioni (Oggi, elenco ore) ----------------------------------- */
.registrazione {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    min-height: 60px;
    border-left: 4px solid var(--att, var(--app-bordo)) !important;
}
.registrazione-orario { font-weight: 600; font-variant-numeric: tabular-nums; }
.registrazione-dettaglio { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-width: 0; }
.registrazione-durata { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--app-primario); }
.registrazione-durata .bi { color: var(--app-testo-tenue); margin-left: .25rem; }

.giorno { margin-bottom: 1.25rem; }
.giorno-intestazione {
    display: flex;
    justify-content: space-between;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--app-primario);
    margin: 0 .25rem .5rem;
}

/* --- Barra del periodo e filtri ----------------------------------------- */
.barra-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.navigazione-periodo { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; }
.titolo-periodo {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
    color: var(--app-primario);
    text-decoration: none;
}
.campo-mese { flex: 1 1 auto; text-align: center; }
.barra-periodo > .btn-primary { width: 100%; }
@media (min-width: 992px) {
    .navigazione-periodo { flex: 0 1 auto; }
    .titolo-periodo { min-width: 15rem; }
    .campo-mese { flex: 0 0 13rem; }
    .barra-periodo > .btn-primary { width: auto; }
}
.filtri > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.filtri > summary::-webkit-details-marker { display: none; }
.filtri[open] > summary { border-bottom: 1px solid var(--app-bordo); }

/* --- Riquadri numerici --------------------------------------------------- */
.riquadro-numero {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    height: 100%;
    padding: 1rem 1.125rem;
    background: var(--app-superficie);
    border: 1px solid var(--app-bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
}
.riquadro-piatto { padding: 0; border: 0; box-shadow: none; background: transparent; }
.riquadro-etichetta {
    font-size: var(--testo-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--app-testo-tenue);
}
.riquadro-valore { font-size: 1.5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; color: var(--app-primario); font-variant-numeric: tabular-nums; }
.riquadro-valore.text-success { color: var(--stato-successo) !important; }
.riquadro-valore.text-warning { color: var(--stato-attenzione) !important; }
.riquadro-valore.text-danger { color: var(--stato-pericolo) !important; }

/* --- Tabelle ------------------------------------------------------------- */
.tabella-ore td, .tabella-ore th { white-space: nowrap; }
.tabella-ore tbody tr { cursor: pointer; }
.th-ordina {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
}
a.th-ordina { text-decoration: none; }
a.th-ordina:hover { color: var(--app-primario); text-decoration: underline; }
/* Pagine di un elenco (partials/paginazione.php) */
.paginazione { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.paginazione-stato { font-size: var(--testo-s); color: var(--app-testo-tenue); white-space: nowrap; }
th[aria-sort] .th-ordina::after { content: " ▲"; font-size: .7em; color: var(--app-accento); }
th[aria-sort="descending"] .th-ordina::after { content: " ▼"; }

/* --- Settimana (Oggi su PC) ---------------------------------------------- */
.settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.settimana-giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .25rem 0;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.settimana-giorno:hover { background: var(--app-sfondo); }
.settimana-barra {
    position: relative;
    display: block;
    width: 1.75rem;
    height: 5rem;
    background: var(--app-sfondo);
    border-radius: .375rem;
    overflow: hidden;
}
.settimana-riempimento { position: absolute; left: 0; right: 0; bottom: 0; background: var(--app-accento); border-radius: .375rem; }
.settimana-ore { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.settimana-nome { font-size: .75rem; color: var(--app-testo-tenue); text-transform: capitalize; }
.settimana-giorno.oggi .settimana-nome { color: var(--app-accento); font-weight: 600; }
.altezza-0 { height: 0; } .altezza-5 { height: 5%; } .altezza-10 { height: 10%; } .altezza-15 { height: 15%; }
.altezza-20 { height: 20%; } .altezza-25 { height: 25%; } .altezza-30 { height: 30%; } .altezza-35 { height: 35%; }
.altezza-40 { height: 40%; } .altezza-45 { height: 45%; } .altezza-50 { height: 50%; } .altezza-55 { height: 55%; }
.altezza-60 { height: 60%; } .altezza-65 { height: 65%; } .altezza-70 { height: 70%; } .altezza-75 { height: 75%; }
.altezza-80 { height: 80%; } .altezza-85 { height: 85%; } .altezza-90 { height: 90%; } .altezza-95 { height: 95%; }
.altezza-100 { height: 100%; }

/* --- Form ore ------------------------------------------------------------ */
.modulo-stretto { max-width: 640px; }
.scelta-pulsanti { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-scelta {
    flex: 1 1 0;
    min-height: 48px !important;
    border: 1px solid var(--app-bordo);
    background: #fff;
    color: var(--app-primario);
    font-weight: 500;
}
.btn-scelta:hover { border-color: var(--app-accento); color: var(--app-primario); background: #fff; }
.btn-check:checked + .btn-scelta { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }
.btn-check:checked + .btn-attivita { background: var(--att); border-color: var(--att); color: var(--att-testo); }
.btn-check:focus-visible + .btn-scelta { outline: 2px solid var(--app-accento); outline-offset: 2px; }
.app legend.form-label { font-size: 1rem; margin-bottom: .5rem; }

.anteprima {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .875rem 1rem;
    background: #eef4fb;
    border-radius: .75rem;
    font-variant-numeric: tabular-nums;
}
.anteprima > div { display: flex; flex-direction: column; }
.anteprima-etichetta { font-size: .75rem; color: var(--app-testo-tenue); }
.anteprima-errore { grid-column: 1 / -1; margin: .25rem 0 0; color: #b42318; font-size: .875rem; }
.anteprima.anteprima-ko { background: #fdf0ef; }

/* --- Modelli di giornata ------------------------------------------------- */
.riga-modello {
    padding: .75rem .875rem .25rem;
    margin-bottom: .75rem;
    border: 1px solid var(--app-bordo);
    border-radius: .75rem;
    background: #fafbfc;
}
.riga-modello .mb-3 { margin-bottom: .5rem !important; }
/* Selettori compatti: in tre colonne sul telefono l'orario deve restare leggibile. */
.riga-modello .form-select {
    padding-left: .5rem;
    padding-right: 1.5rem;
    background-position: right .375rem center;
}

/* Interruttori e caselle nel colore dell'app */
.form-check-input:checked { background-color: var(--app-accento); border-color: var(--app-accento); }
.form-check-input:focus { border-color: var(--app-accento); box-shadow: 0 0 0 .2rem rgba(47, 111, 176, .2); }

/* Sottotitolo dei pulsanti rapidi (es. "copia ven 16/10") */
.btn-azione small { font-size: .8125rem; font-weight: 400; color: var(--app-testo-tenue); }
.btn-azione-primaria small { color: rgba(255, 255, 255, .85); }

/* --- Riepilogo ----------------------------------------------------------- */
.riga-riepilogo > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem 1rem;
    cursor: pointer;
    list-style: none;
}
.riga-riepilogo > summary::-webkit-details-marker { display: none; }
.riga-riepilogo-descrizione { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.riga-riepilogo-calcolo { color: var(--app-testo-tenue); font-variant-numeric: tabular-nums; }
.riga-riepilogo-importo { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
    .riga-riepilogo > summary { grid-template-columns: 1fr 14rem 8rem; align-items: center; }
    .riga-riepilogo-descrizione { grid-column: auto; }
}
.dettaglio-giorni { font-size: .875rem; }
.totale-riepilogo { font-size: 1.125rem; background: #fff; }
.totale-riepilogo strong { font-size: 1.25rem; color: var(--app-primario); }

/* --- Mappe e trasferte -------------------------------------------------- */
.mappa { height: 300px; background: #e5e9ef; border-radius: .75rem .75rem 0 0; z-index: 0; }
.mappa-luogo { height: 240px; border-radius: .5rem; }
@media (min-width: 992px) {
    .mappa { height: 440px; }
    .mappa-luogo { height: 280px; }
}
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: .6875rem; }

.tappa { display: flex; align-items: flex-end; gap: .5rem; }
.tappa > .mb-3 { flex: 1 1 auto; }
.tappa > .btn { margin-bottom: 1rem; }

.km-manuali { padding: .75rem .875rem .25rem; margin-bottom: 1rem; background: #fafbfc; border: 1px dashed var(--app-bordo); border-radius: .75rem; }

.esito-trasferta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem 1rem;
    font-variant-numeric: tabular-nums;
}
.esito-trasferta > div { display: flex; flex-direction: column; }
.esito-trasferta strong { font-size: 1.125rem; color: var(--app-primario); }
.esito-trasferta strong.text-success { color: #15803d !important; }
.esito-trasferta strong.text-danger { color: #b42318 !important; }
@media (min-width: 576px) { .esito-trasferta { grid-template-columns: repeat(4, 1fr); } }
.tratte .badge { font-weight: 500; }

.barra-periodo > .azioni-periodo { width: 100%; }
.azioni-periodo > * { flex: 1 1 0; }
@media (min-width: 992px) {
    .barra-periodo > .azioni-periodo { width: auto; }
    .azioni-periodo > * { flex: 0 0 auto; }
}
.voci-trasferta td, .voci-trasferta th { padding-left: 0; padding-right: 0; }
.pedaggio-tratta .input-group-text { font-size: .8125rem; }
.riepilogo-compatto:empty { display: none; }
.riepilogo-compatto { margin: 0 0 .75rem; font-weight: 500; color: var(--app-primario); font-variant-numeric: tabular-nums; }
.trasferta-riga { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; min-height: 60px; }
.trasferta-data { font-weight: 600; white-space: nowrap; }
.trasferta-dettaglio { display: flex; flex-direction: column; min-width: 0; }
.trasferta-numeri { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Chip (filtri e scelte) --------------------------------------------- */
.gruppo-chip legend { font-size: .9375rem; margin-bottom: .375rem; }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 36px;
    padding: .25rem .875rem;
    border: 1px solid var(--app-bordo);
    border-radius: 999px;
    background: #fff;
    color: var(--app-primario);
    font-size: .875rem;
    cursor: pointer;
    user-select: none;
}
.chip:hover { border-color: var(--app-accento); }
.btn-check:checked + .chip { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }
.btn-check:checked + .chip.att-chip { background: var(--att); border-color: var(--att); color: var(--att-testo); }
.btn-check:focus-visible + .chip { outline: 2px solid var(--app-accento); outline-offset: 2px; }
.chip .bi { font-size: 1rem; }
.chip-tipo .bi { color: var(--tipo, var(--app-testo-tenue)); }
.btn-check:checked + .chip-tipo .bi { color: #fff; }
button.chip { font: inherit; font-size: .875rem; }
button.chip.attivo { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }
.filtri .gruppo-chip:last-of-type { margin-bottom: .5rem; }

/* --- Bilancio ore del mese (lavorate / mancanti / perse) ---------------- */
.bilancio { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 992px) { .bilancio { grid-template-columns: repeat(4, 1fr); } }
.bilancio .riquadro-numero { border-left-width: 4px; }
.bilancio .lavorate { border-left-color: var(--stato-successo-pieno); }
.bilancio .lavorate .riquadro-valore { color: var(--stato-successo); }
.bilancio .mancanti { border-left-color: var(--stato-attenzione-pieno); }
.bilancio .mancanti .riquadro-valore { color: var(--stato-attenzione); }
.bilancio .perse { border-left-color: var(--stato-pericolo-pieno); }
.bilancio .perse .riquadro-valore { color: var(--stato-pericolo); }
.bilancio .assenze { border-left-color: var(--stato-neutro-pieno); }
.barra-bilancio { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--app-bordo); margin-top: .75rem; }
.barra-bilancio > span { display: block; height: 100%; }
.barra-bilancio .lavorate { background: var(--stato-successo-pieno); }
.barra-bilancio .assenze { background: var(--stato-neutro-pieno); }
.barra-bilancio .perse { background: var(--stato-pericolo-pieno); }
.barra-bilancio .mancanti { background: var(--stato-attenzione-pieno); }

/* --- Icone dei tipi di luogo (variabile --tipo da colori.php) ----------- */
.icona-tipo { color: var(--tipo, var(--app-testo-tenue)); }
.riga-elenco.active .icona-tipo { color: #fff; }
.segnaposto-tipo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--tipo, #64748b);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.segnaposto-tipo .bi { transform: rotate(45deg); color: #fff; font-size: 1rem; }
.mappa-grande { height: calc(100vh - 220px); min-height: 420px; border-radius: .75rem; }
@media (max-width: 991.98px) { .mappa-grande { height: calc(100dvh - 260px); } }
.mappa-grande:fullscreen { height: 100vh; border-radius: 0; }
.controllo-misura { background: #fff; border-radius: .5rem; padding: .25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.controllo-misura button { border: 0; background: none; min-width: 34px; min-height: 34px; font-size: 1.125rem; }
.controllo-misura button.attivo { background: var(--app-accento); color: #fff; border-radius: .375rem; }
.misura-esito { background: rgba(255, 255, 255, .95); padding: .25rem .625rem; border-radius: .375rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* --- Settimana divisa per attività (Oggi su PC) ------------------------- */
.settimana-riempimento.impilata { display: flex; flex-direction: column-reverse; background: none; overflow: hidden; }
.registrazione.assenza { border-left-color: #94a3b8 !important; }
.filtri-interni > summary { cursor: pointer; list-style: none; color: var(--app-testo-tenue); font-size: .875rem; }
.filtri-interni > summary::-webkit-details-marker { display: none; }
.settimana-riempimento.impilata > span { display: block; background: var(--att, var(--app-accento)); width: 100%; }
.legenda-attivita { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; color: var(--app-testo-tenue); }
.legenda-attivita span { display: inline-flex; align-items: center; gap: .375rem; }

/* --- Layout semplice (login, installazione, errori) --------------------- */
.semplice-contenitore {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top) + 1.5rem) 1rem calc(env(safe-area-inset-bottom) + 1.5rem);
}
.semplice-marchio {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-primario);
}
.semplice-marchio .bi { color: var(--app-accento); font-size: 1.5rem; }
.semplice-card { width: 100%; max-width: 400px; }
.semplice-card-larga { max-width: 520px; }
.semplice-card .card-body { padding: 1.75rem 1.5rem; }

/* === 5. Utilità ========================================================== */

/* Larghezze in percentuale (barre senza stili inline) */
.larghezza-0 { width: 0%; }
.larghezza-1 { width: 1%; }
.larghezza-2 { width: 2%; }
.larghezza-3 { width: 3%; }
.larghezza-4 { width: 4%; }
.larghezza-5 { width: 5%; }
.larghezza-6 { width: 6%; }
.larghezza-7 { width: 7%; }
.larghezza-8 { width: 8%; }
.larghezza-9 { width: 9%; }
.larghezza-10 { width: 10%; }
.larghezza-11 { width: 11%; }
.larghezza-12 { width: 12%; }
.larghezza-13 { width: 13%; }
.larghezza-14 { width: 14%; }
.larghezza-15 { width: 15%; }
.larghezza-16 { width: 16%; }
.larghezza-17 { width: 17%; }
.larghezza-18 { width: 18%; }
.larghezza-19 { width: 19%; }
.larghezza-20 { width: 20%; }
.larghezza-21 { width: 21%; }
.larghezza-22 { width: 22%; }
.larghezza-23 { width: 23%; }
.larghezza-24 { width: 24%; }
.larghezza-25 { width: 25%; }
.larghezza-26 { width: 26%; }
.larghezza-27 { width: 27%; }
.larghezza-28 { width: 28%; }
.larghezza-29 { width: 29%; }
.larghezza-30 { width: 30%; }
.larghezza-31 { width: 31%; }
.larghezza-32 { width: 32%; }
.larghezza-33 { width: 33%; }
.larghezza-34 { width: 34%; }
.larghezza-35 { width: 35%; }
.larghezza-36 { width: 36%; }
.larghezza-37 { width: 37%; }
.larghezza-38 { width: 38%; }
.larghezza-39 { width: 39%; }
.larghezza-40 { width: 40%; }
.larghezza-41 { width: 41%; }
.larghezza-42 { width: 42%; }
.larghezza-43 { width: 43%; }
.larghezza-44 { width: 44%; }
.larghezza-45 { width: 45%; }
.larghezza-46 { width: 46%; }
.larghezza-47 { width: 47%; }
.larghezza-48 { width: 48%; }
.larghezza-49 { width: 49%; }
.larghezza-50 { width: 50%; }
.larghezza-51 { width: 51%; }
.larghezza-52 { width: 52%; }
.larghezza-53 { width: 53%; }
.larghezza-54 { width: 54%; }
.larghezza-55 { width: 55%; }
.larghezza-56 { width: 56%; }
.larghezza-57 { width: 57%; }
.larghezza-58 { width: 58%; }
.larghezza-59 { width: 59%; }
.larghezza-60 { width: 60%; }
.larghezza-61 { width: 61%; }
.larghezza-62 { width: 62%; }
.larghezza-63 { width: 63%; }
.larghezza-64 { width: 64%; }
.larghezza-65 { width: 65%; }
.larghezza-66 { width: 66%; }
.larghezza-67 { width: 67%; }
.larghezza-68 { width: 68%; }
.larghezza-69 { width: 69%; }
.larghezza-70 { width: 70%; }
.larghezza-71 { width: 71%; }
.larghezza-72 { width: 72%; }
.larghezza-73 { width: 73%; }
.larghezza-74 { width: 74%; }
.larghezza-75 { width: 75%; }
.larghezza-76 { width: 76%; }
.larghezza-77 { width: 77%; }
.larghezza-78 { width: 78%; }
.larghezza-79 { width: 79%; }
.larghezza-80 { width: 80%; }
.larghezza-81 { width: 81%; }
.larghezza-82 { width: 82%; }
.larghezza-83 { width: 83%; }
.larghezza-84 { width: 84%; }
.larghezza-85 { width: 85%; }
.larghezza-86 { width: 86%; }
.larghezza-87 { width: 87%; }
.larghezza-88 { width: 88%; }
.larghezza-89 { width: 89%; }
.larghezza-90 { width: 90%; }
.larghezza-91 { width: 91%; }
.larghezza-92 { width: 92%; }
.larghezza-93 { width: 93%; }
.larghezza-94 { width: 94%; }
.larghezza-95 { width: 95%; }
.larghezza-96 { width: 96%; }
.larghezza-97 { width: 97%; }
.larghezza-98 { width: 98%; }
.larghezza-99 { width: 99%; }
.larghezza-100 { width: 100%; }

/* Impostazioni a sezioni */
.larghezza-form { max-width: 44rem; }
.card-sezione { transition: border-color .15s ease, box-shadow .15s ease; }
.card-sezione:hover, .card-sezione:focus-visible { border-color: var(--bs-primary); box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.menu-impostazioni { position: sticky; top: 1rem; }
.menu-impostazioni .list-group-item { min-height: 44px; }
.imp-interruttore .form-check.mb-3 { margin-bottom: .125rem !important; }

/* Selezione di righe ed eliminazione multipla (selezione.js) */
.riga-selezionabile { display: flex; align-items: stretch; }
.riga-selezionabile > .list-group-item { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.riga-selezionabile + .riga-selezionabile > .list-group-item { border-top-width: 0; }
.list-group:has(> .riga-selezionabile) { overflow: hidden; }
.casella-selezione {
    display: none;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bs-body-bg);
}
.in-selezione .casella-selezione { display: flex; }
.casella-selezione .form-check-input, .col-selezione .form-check-input { width: 1.35rem; height: 1.35rem; margin: 0; cursor: pointer; }
.riga-selezionabile.selezionata > .list-group-item { background: var(--bs-primary-bg-subtle); }
tr.selezionata > * { --bs-table-bg-state: var(--bs-primary-bg-subtle); }
.col-selezione { width: 2.75rem; }
.tabella-ore tr.riga-assenza > td { color: var(--app-testo-tenue); font-style: italic; }
.barra-selezione {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--app-bottom-altezza) + env(safe-area-inset-bottom) + .75rem);
    z-index: 1031;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .375rem .375rem .375rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--app-bordo);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
    white-space: nowrap;
}
.barra-selezione[hidden] { display: none; }
.barra-selezione .btn { border-radius: 999px; min-height: 44px; }
@media (min-width: 992px) { .barra-selezione { bottom: 1.5rem; } }

/* Durata con − / + (campo_durata) */
.durata-controlli { display: flex; align-items: center; gap: .75rem; }
.durata-pulsante { width: 52px; min-height: 52px; font-size: 1.25rem; border-radius: 50%; }
.durata-valore { min-width: 6.5rem; text-align: center; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--app-primario); }
.chip.attiva { background: var(--app-accento); border-color: var(--app-accento); color: #fff; }

/* Dal fatturato al netto (riepilogo) */
.tabella-netto { max-width: 34rem; }
.tabella-netto .riga-totale > * { border-top: 1.5px solid var(--app-bordo); }
.accantona { color: #b45309; }

/* Bilancio del mese spiegato */
.riquadro-nota { display: block; font-size: .75rem; line-height: 1.3; color: var(--app-testo-tenue); margin-top: .25rem; }
.conto-bilancio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; font-size: .875rem; }
.conto-bilancio .segno { color: var(--app-testo-tenue); }
.conto-bilancio .c-lavorate { color: #15803d; font-weight: 600; }
.conto-bilancio .c-assenze { color: #475569; font-weight: 600; }
.conto-bilancio .c-perse { color: #b91c1c; font-weight: 600; }
.conto-bilancio .c-mancanti { color: #b45309; font-weight: 600; }

/* Assenze nella schermata Oggi */
.settimana-riempimento.impilata > .seg-assenza { background: #94a3b8; }
.pallino-attivita.pallino-assenza { background: #94a3b8; }

/* Spese e giustificativi */
.spesa-riga { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; min-height: 60px; }
.griglia-allegati, .anteprime-allegati { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.anteprime-allegati:not(:empty) { margin-top: .75rem; }
.allegato { margin: 0; border: 1px solid var(--app-bordo); border-radius: .5rem; overflow: hidden; background: #fff; }
.allegato img { display: block; width: 100%; height: 140px; object-fit: cover; }
.allegato-pdf { display: flex; align-items: center; justify-content: center; gap: .25rem; height: 140px; font-weight: 600; color: #b91c1c; background: #fef2f2; }
.allegato figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .5rem; font-size: .75rem; min-width: 0; }
.riquadro-riaddebito { padding: .75rem; border: 1px dashed var(--app-bordo); border-radius: .5rem; }
.modulo-rapido > summary, .filtri > summary { cursor: pointer; }
.riga-spesa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* Cruscotto fiscale */
.semaforo-verde { color: #15803d; }
.semaforo-giallo { color: #a16207; }
.semaforo-arancione { color: #c2410c; }
.semaforo-rosso { color: #b91c1c; }
.semaforo { font-weight: 600; }
.barra-soglia { display: flex; height: 1rem; border-radius: 999px; overflow: hidden; background: var(--app-sfondo); border: 1px solid var(--app-bordo); }
.barra-soglia > span { display: block; height: 100%; }
.semaforo-sfondo-verde { background: #16a34a; }
.semaforo-sfondo-giallo { background: #eab308; }
.semaforo-sfondo-arancione { background: #f97316; }
.semaforo-sfondo-rosso { background: #dc2626; }
.barra-soglia .proiezione { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 4px, #e2e8f0 4px, #e2e8f0 8px); }
.riga-picco > td { background: #fffbeb; }
.contenitore-grafico { position: relative; height: 260px; }

.schede-impostazioni .scheda .bi { margin-right: .375rem; }

/* Indietro su PC (pagine aperte da un'altra pagina: torna alla provenienza) */
.app-indietro { align-items: center; gap: .25rem; margin-bottom: .25rem; font-size: .875rem; color: var(--app-testo-tenue); text-decoration: none; }
.app-indietro:hover { color: var(--app-primario); }

/* Registro operazioni */
.dati-registro th { width: 30%; font-weight: 500; color: var(--app-testo-tenue); font-size: .8125rem; }
.dati-registro td { font-size: .8125rem; word-break: break-word; }
.min-w-0 { min-width: 0; }

/* Progetti: avanzamento sul budget */
.barra-progetto { height: .625rem; border-radius: 999px; overflow: hidden; background: var(--app-sfondo); border: 1px solid var(--app-bordo); }
.barra-progetto > span { display: block; height: 100%; background: #16a34a; }
.livello-attenzione .barra-progetto > span { background: #eab308; }
.livello-superato .barra-progetto > span { background: #dc2626; }
.livello-attenzione .testo-livello { color: #a16207; font-weight: 600; }
.livello-superato .testo-livello { color: #b91c1c; font-weight: 600; }

/* Tipi di fase (colori da colori.php: --fase, --fase-testo) */
.pallino-fase { display: inline-block; flex: 0 0 auto; width: .875rem; height: .875rem; border-radius: 3px; background: var(--fase, #64748b); }
.btn-check:checked + .chip.chip-fase { background: var(--fase); border-color: var(--fase); color: var(--fase-testo); }
.badge-fase { background: var(--fase, #64748b); color: var(--fase-testo, #fff); font-weight: 600; }
.app .btn.min-altezza-0 { min-height: 0; }
/* Ore per fase nell'elenco ore e blocco "Fasi" del form */
.chips-fasi { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; white-space: normal; }
.chip-fase-ore { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .375rem; border-radius: 999px; font-size: var(--testo-xs);
    background: var(--app-superficie-2); border: 1px solid var(--app-bordo); color: var(--app-testo); white-space: normal; max-width: 16rem; }
.chip-fase-ore .pallino-fase { width: .5rem; height: .5rem; }
.quota-fase { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.quota-ore { flex: 0 0 8.5rem; }

/* Progetti: scheda di una fase (bordo nel colore del tipo) con i dettagli */
.fase-card { border-left: 4px solid var(--fase, var(--app-accento)); }
.fase-intestazione { display: flex; align-items: center; gap: .5rem; }
.fase-titolo { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; flex: 1 1 auto; min-width: 0; }
.fase-numeri { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: var(--testo-m); }
.fase-numeri .text-body-secondary { font-size: var(--testo-s); margin-right: .25rem; }
.fase.dettaglio { padding-left: 1.75rem; background: var(--app-superficie-2); }
.barra-sottile { height: .375rem; }
.modulo-laterale { position: sticky; top: 1rem; }

/* Progetti: fasi (frecce d'ordine, testo, completamento, azioni) */
.fase { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ordine testo azioni" "ordine completamento completamento"; gap: .5rem .75rem; align-items: center; }
.fase-ordine { grid-area: ordine; display: flex; flex-direction: column; }
.fase-ordine .btn { min-height: 32px; }
.fase-testo { grid-area: testo; min-width: 0; }
.fase-completamento { grid-area: completamento; }
.fase-completamento .form-select { width: 7.5rem; }
.fase-azioni { grid-area: azioni; display: flex; }
@media (min-width: 768px) {
    .fase { grid-template-columns: auto 1fr 8rem auto; grid-template-areas: "ordine testo completamento azioni"; }
}

/* Calendario delle ore (partials/calendario_ore.php): ore del giorno e barra per attività */
.calendario-ore { display: grid; gap: 1px; background: var(--app-bordo); border: 1px solid var(--app-bordo); border-radius: var(--raggio-s); overflow: hidden; }
.calendario-testa, .calendario-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.calendario-testa > div { background: var(--app-superficie-2); padding: .375rem .5rem; font-size: var(--testo-xs); font-weight: 600; text-transform: uppercase; color: var(--app-testo-tenue); }
.calendario-giorno { background: var(--app-superficie); min-height: 5.25rem; }
.calendario-giorno.riposo { background: var(--app-superficie-2); }
.calendario-giorno.fuori { background: var(--app-sfondo); }
.calendario-giorno.fuori .calendario-numero { color: var(--app-bordo-forte); }
.calendario-link { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .375rem .5rem; color: inherit; text-decoration: none; }
.calendario-link:hover { background: #f5f8fc; color: inherit; }
.calendario-numero { font-size: var(--testo-s); font-weight: 600; color: var(--app-testo-tenue); }
.calendario-giorno.oggi .calendario-numero { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--app-accento); color: #fff; }
.calendario-ore-tot { font-size: 1.0625rem; font-weight: 650; color: var(--app-primario); font-variant-numeric: tabular-nums; }
.calendario-assenza { font-size: var(--testo-xs); color: var(--stato-neutro); }
.calendario-barra { display: flex; height: .5rem; margin-top: auto; border-radius: 999px; overflow: hidden; background: var(--app-bordo); }
.calendario-barra > span { display: block; height: 100%; background: var(--att, var(--app-accento)); }
.calendario-barra > .seg-assenza { background: var(--stato-neutro-pieno); }
@media (max-width: 575.98px) {
    .calendario-giorno { min-height: 4rem; }
    .calendario-link { padding: .25rem; }
    .calendario-ore-tot { font-size: var(--testo-s); }
    .calendario-assenza { display: none; }
}

/* Scheda fase a tendina: intestazione sempre visibile, corpo e dettagli si aprono e chiudono */
.fase-card > summary { list-style: none; cursor: pointer; }
.fase-card > summary::-webkit-details-marker { display: none; }
.fase-freccia { flex: 0 0 auto; color: var(--app-testo-tenue); transition: transform .15s; }
.fase-card[open] .fase-freccia { transform: rotate(90deg); }
.fase-card:not([open]) > summary { border-bottom: 0; border-radius: var(--raggio); }
.fase-titolo { font-size: var(--testo-m); line-height: 1.3; }
.fase-riassunto { flex-basis: 100%; font-size: var(--testo-xs); font-weight: 400; color: var(--app-testo-tenue); font-variant-numeric: tabular-nums; }

/* Preventivi: voci, testi */
.voce-preventivo { display: flex; align-items: center; gap: .75rem; }
.sezione-preventivo.nascosta { opacity: .55; }
.testo-sezione { font-size: var(--testo-m); white-space: normal; }
.dati-preventivo th { width: 12rem; font-weight: 500; color: var(--app-testo-tenue); }

/* Preventivo: menu "Sposta a…" accanto alle frecce di sezioni e voci */
.sposta-a .form-select { width: auto; max-width: 11rem; min-height: 32px; padding-top: .15rem; padding-bottom: .15rem; font-size: .8rem; }
@media (max-width: 575.98px) { .sposta-a .form-select { max-width: 7.5rem; } }

/* Impostazioni per aree: sotto le schede delle aree, le voci dell'area come pulsanti a pillola */
.voci-impostazioni { display: flex; flex-wrap: wrap; gap: .375rem; margin: -.5rem 0 1.25rem; }
.voce-impostazioni {
    display: inline-flex; align-items: center; gap: .375rem; min-height: 40px; padding: .3rem .85rem;
    border: 1px solid var(--app-bordo); border-radius: 999px; background: var(--bs-body-bg);
    color: var(--app-testo-tenue); text-decoration: none; font-size: var(--testo-s, .875rem); font-weight: 500;
}
.voce-impostazioni:hover { color: var(--app-primario); border-color: var(--app-bordo-forte); }
.voce-impostazioni.attiva { color: #fff; background: var(--app-accento); border-color: var(--app-accento); }
.voce-impostazioni .nota-voce { font-size: .72rem; font-weight: 400; opacity: .8; }
@media (max-width: 575.98px) {
    .voci-impostazioni { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
    .voce-impostazioni { flex: 0 0 auto; }
}