/* =========================================================================
   MARVION.CSS — lo strato comune del redesign (ticket 102, D639)
   =========================================================================
   Caricato PER ULTIMO da ogni pagina: `base.html`, le 16 pagine col proprio
   <head> e il login. Tiene i token e le regole che tutte le pagine condividono.

   Perche' ci sono `!important`: le regole ereditate da `style.css` e
   `marvion-light.css` (il blocco qui sotto, ticket 114) forzano con `!important`
   le regole generiche (tabelle, titoli, campi, pulsanti, e `html, body, body *`
   sul peso del carattere). Una regola dello strato comune vince solo con
   `!important` e specificita' almeno uguale, e vince perche' arriva dopo.
   Distribuire l'eredita' nei fogli di pagina permettera' di toglierne molti.

   La barra usa classi SUE (`barra-*`): nessuna regola vecchia la raggiunge, se
   non quelle generiche su elementi nudi, battute qui dove serve.
   ========================================================================= */

/* Il carattere (ticket 113): prima di ogni regola, perche' un @import dopo una
   regola il browser lo ignora senza dirlo. */
@import url('vendor/figtree/figtree.css');

/* =========================================================================
   L'EREDITA' DI style.css E marvion-light.css (ticket 114, D851)
   =========================================================================
   Le regole dei due fogli vecchi che servono ancora, INTATTE e nello stesso
   ordine in cui si caricavano (style.css, poi marvion-light.css): stando in
   cima a questo foglio, la cascata e' la stessa di quando erano fogli a parte.
   Tolte le regole morte e quelle che non vincevano mai, misurate su ogni
   pagina, a ogni larghezza fra le soglie, in stampa, al tocco e coi pannelli
   aperti. Tenute anche quelle che nessuna sonda ha visto ma le cui classi il
   codice scrive (D852): l'elenco e' nel ticket 114.
   ⚠️ Non si estende: una regola nuova va nello strato comune piu' sotto o nel
   foglio della sua pagina. Distribuire questo blocco e' lavoro dopo l'Expo.
   Nei commenti di questo foglio, `style.css` e `marvion-light.css` sono le
   regole di questo blocco: i due file non esistono piu'.
   ========================================================================= */

/* ---- da style.css ---- */
/* =========================================================
FLEET MANAGER - FULL ENTERPRISE DEFINITIVE UI
========================================================= */

/* =========================================================
ROOT
========================================================= */
:root{
--bg-body: #75b3ff;
--bg-body-2: #e8edf5;
--bg-body-3: #dde6f1;

--bg-dark: #0f172a;  
--bg-dark-2: #111827;  
--bg-dark-3: #1e293b;  
--bg-dark-4: #334155;  

--panel: #ffffff;  
--panel-soft: #f8fafc;  
--panel-soft-2: #f1f5f9;  
--panel-soft-3: #e2e8f0;  
--panel-soft-4: #cbd5e1;  

--text: #0f172a;  
--text-soft: #334155;  
--text-muted: #64748b;  
--text-faint: #94a3b8;  

--line: #e2e8f0;  
--line-strong: #cbd5e1;  
--line-dark: rgba(255,255,255,0.08);  

--primary: #2563eb;  
--primary-2: #1d4ed8;  
--primary-3: #3b82f6;  
--primary-4: #60a5fa;  
--primary-soft: #eff6ff;  
--primary-soft-2: #dbeafe;  

--success: #16a34a;  
--success-2: #15803d;  
--success-soft: #dcfce7;  
--success-soft-2: #bbf7d0;  

--warning: #d97706;  
--warning-2: #b45309;  
--warning-soft: #fff7ed;  
--warning-soft-2: #fef3c7;  

--danger: #dc2626;  
--danger-2: #b91c1c;  
--danger-soft: #fef2f2;  
--danger-soft-2: #fee2e2;  

--info: #0891b2;  
--info-2: #0e7490;  
--info-soft: #ecfeff;  
--info-soft-2: #cffafe;  

--purple: #7c3aed;  
--purple-soft: #f3e8ff;  

--shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.03);  
--shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.04);  
--shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);  
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);  
--shadow-lg: 0 16px 42px rgba(15, 23, 42, 0.12);  
--shadow-xl: 0 26px 70px rgba(15, 23, 42, 0.18);  

--radius-xs: 8px;  
--radius-sm: 12px;  
--radius-md: 16px;  
--radius-lg: 20px;  
--radius-xl: 24px;  
--radius-2xl: 30px;  

--sidebar-width: 260px;   /* il valore VERO. Fino al 26/08/2026 qui c'era 292px, ma due ridichiarazioni piu' in basso (300px e 260px, in due blocchi :root incollati in coda al foglio) lo sovrascrivevano: il browser misurava 260px a ogni larghezza. Tolte quelle, il numero scritto qui e' quello che si applica. */

--transition-fast: 0.16s ease;  
--transition: 0.22s ease;  
--transition-slow: 0.32s ease;  

--ease-god: cubic-bezier(.22,.61,.36,1);  
--glow-primary: 0 0 0 1px rgba(59,130,246,.18), 0 18px 40px rgba(37,99,235,.16);  
--glow-success: 0 0 0 1px rgba(34,197,94,.18), 0 18px 40px rgba(34,197,94,.12);  
--glow-warning: 0 0 0 1px rgba(245,158,11,.18), 0 18px 40px rgba(245,158,11,.14);  
--glow-danger: 0 0 0 1px rgba(239,68,68,.18), 0 18px 40px rgba(239,68,68,.14);

}

/* =========================================================
   RESET
========================================================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

html, body{
    min-height: 100%;
}

body{
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.05), transparent 26%),
        radial-gradient(circle at bottom left, rgba(14,165,233,0.04), transparent 28%),
        linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body-2) 55%, var(--bg-body-3) 100%);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .35s var(--ease-god), color .25s var(--ease-god);
}

a{
    color: inherit;
    text-decoration: none;
}

img{
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea{
    font: inherit;
}

hr{
    border: none;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

/* =========================================================
   SCROLLBAR
========================================================= */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track{
    background: transparent;
}

::-webkit-scrollbar-thumb{
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover{
    background: #94a3b8;
}

/* =========================================================
   HELPERS
========================================================= */
.hidden{ display: none !important; }
.center{ text-align: center; }
.right{ text-align: right; }
.bold{ font-weight: 800; }

.mt-16{ margin-top: 16px; }

/* =========================================================
   LOGIN PAGE
========================================================= */
.login-body,
.login-page{
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(0, 35, 111, 0.874), transparent 28%),
        radial-gradient(circle at bottom right, rgba(0, 35, 111, 0.874), transparent 30%),
        linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 52%, var(--bg-dark-3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.login-shell{
    width: 100%;
    max-width: 1240px;
    min-height: 720px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(15px);
}

.login-left{
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    background:
        linear-gradient(160deg, rgba(0, 35, 111, 0.874), rgba(0, 35, 111, 0.874)),
        transparent;
}

.login-brand h1{
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -0.5px;
    margin: 0;
}

.login-brand p{
    margin-top: 8px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.login-copy h2{
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.06;
    letter-spacing: -0.8px;
}

.login-right{
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
}

.login-card,
.login-box{
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 26px;
    padding: 34px 32px;
}

.login-card .subtitle,
.login-box .subtitle{
    margin: 10px 0 24px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.login-card label,
.login-box label{
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
}

.login-card input,
.login-box input{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    padding: 13px 14px;
    outline: none;
    transition: var(--transition);
}

.login-card input:focus,
.login-box input:focus{
    border-color: rgba(0, 35, 111, 0.874);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.11);
}

.login-note{
    margin-top: 18px;
    text-align: center;
}

/* =========================================================
   APP LAYOUT
========================================================= */
.app-shell{
    min-height: 100vh;
    display: flex;
}

.main-content{
    flex: 1;
    min-width: 0;
    padding: 28px;
}

/* =========================================================
   TYPOGRAPHY / HEADERS
========================================================= */
.page-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.subtitle{
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.page-header-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.section-block{
    margin-top: 1px;
    animation: godFadeUp .45s var(--ease-god);
}

.section-header{
    margin-bottom: 16px;
}

.section-subtitle{
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.page-kicker{
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* =========================================================
   BUTTONS
========================================================= */
button,
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.15;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Il `display` qui sopra scavalca l'attributo `hidden` (vedi `.status-pill[hidden]`):
   un pulsante nascosto con `hidden` deve sparire davvero. */
.btn[hidden]{
    display: none;
}

button::after,
.btn::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease-god);
}

button:hover::after,
.btn:hover::after{
    transform: translateX(120%);
}

button{
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 24px rgba(37,99,235,0.22);
}

button:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.btn.back:hover{
    background: var(--panel-soft);
}

.btn:disabled,
button:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   ALERTS / INFO / BADGES
========================================================= */
.alert-box{
    background: var(--warning-soft);
    color: #9a3412;
    border: 1px solid #fdba74;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
}

.alert-box h3,
.alert-box strong{
    display: block;
    margin-bottom: 8px;
}

.alert-box p,
.alert-box li{
    margin: 6px 0;
    line-height: 1.5;
}

.info-box{
    margin-bottom: 20px;
    background: var(--info-soft);
    color: #155e75;
    border: 1px solid #a5f3fc;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-md);
}

.status-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

/* L'attributo `hidden` da solo NON basta: `display: none` del browser sta
   nell'origine "user agent", e QUALUNQUE regola d'autore che dichiari `display`
   la scavalca -- qui `.status-pill{display:inline-flex}`. Misurato col browser
   in PR 5.3: la pillola d'esito, vuota, si vedeva dal caricamento della pagina.
   La correzione sta sulla CLASSE e non su una singola istanza, cosi' vale per
   ogni pillola dell'applicazione; `(0,2,0)` batte `(0,1,0)` senza `!important`. */
.status-pill[hidden]{
    display: none;
}

.status-pill.success{
    background: var(--success-soft);
    color: #166534;
}

.status-pill.warning{
    background: var(--warning-soft-2);
    color: #92400e;
}

.status-pill.danger{
    background: var(--danger-soft-2);
    color: #991b1b;
}

.status-pill.info{
    background: var(--primary-soft-2);
    color: #1d4ed8;
}

.inline-tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 800;
}

.smart-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--danger), #ef4444);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
    animation: badgeBounce 1.8s ease-in-out infinite;
}

/* =========================================================
   METRICS / CARDS
========================================================= */
.metric-grid{
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.metric-card,
.card,
.branch-quick-card{
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god),
        color .22s var(--ease-god),
        opacity .22s var(--ease-god);
}

.metric-card:hover,
.card:hover,
.chart-box:hover,
.form-box:hover,
.table-box:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.metric-card.info:hover{ box-shadow: var(--glow-primary); }
.metric-card.success:hover{ box-shadow: var(--glow-success); }
.metric-card.warning:hover{ box-shadow: var(--glow-warning); }
.metric-card.danger:hover{ box-shadow: var(--glow-danger); }

.metric-card.info,
.card.info{
    border-left: 6px solid var(--info);
}

.metric-card.success,
.card.success{
    border-left: 6px solid var(--success);
}

.metric-card.warning,
.card.warning{
    border-left: 6px solid var(--warning);
}

.metric-value,
.card p{
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text);
}

.metric-value.small{
    font-size: 22px;
    line-height: 1.28;
}

.metric-note,
.card-link-text,
.branch-quick-text{
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.metric-link,
.card-link,
.action-tile,
.branch-quick-card{
    transition: var(--transition);
}

.metric-link:hover,
.card-link:hover,
.action-tile:hover,
.branch-quick-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.branch-quick-title{
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 8px;
}

/* =========================================================
   DASHBOARD / ACTION TILES
========================================================= */
.dashboard{
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

/* =========================================================
   CHARTS
========================================================= */
.chart-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.chart-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    min-height: 360px;
    box-shadow: var(--shadow-md);
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.chart-box h3{
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.2;
}

.chart-toolbar{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.chart-legend-note{
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =========================================================
   FORMS
========================================================= */
.form-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
    animation: godFadeUp .45s var(--ease-god);
}

.form-box h2{
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.18;
}

.form-box h3{
    margin: 24px 0 14px;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
}

.form-box form{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-box label{
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
}

/* Le caselle di spunta restano fuori da questa regola e dalle due altezze
   minime piu' sotto: con la larghezza al 100%, l'imbottitura e un
   `min-height` `!important` diventano un campo di testo vuoto, staccato dalla
   sua etichetta (ticket 79, D423).

   🔴 `:where()` e non `:not()` da solo: `input:not([type="checkbox"])` vale
   (0,1,1), una classe in piu' di `input`, e le regole scritte come
   `.live-filter-bar input` PRIMA di queste perderebbero il pareggio -- misurato
   nel browser: 627 differenze su 28 pagine. `:where()` pesa zero, quindi la
   regola resta forte quanto `input` nudo e cambia solo per le caselle. Lo
   tiene fermo `tests/test_stile_caselle_di_spunta.py`. */
input:where(:not([type="checkbox"])),
select,
textarea{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    padding: 13px 14px;
    outline: none;
    transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus{
    border-color: rgba(37,99,235,0.46);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.11);
    transform: translateY(-1px);
}

input[readonly]{
    background: var(--panel-soft);
    color: var(--text-muted);
}

input[type="file"]{
    /* 5px e non 11: dentro c'e' il pulsante disegnato piu' sotto, che porta
       un padding suo. Con gli 11px di prima il campo usciva 58px contro i 46
       del menu accanto -- misurato il 02/09, non dedotto. */
    padding: 5px 10px;
    background: #ffffff;
}

textarea{
    min-height: 110px;
    resize: vertical;
}

.form-actions-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

/* =========================================================
   SEARCH / FILTERS
========================================================= */
.search-toolbar-group{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.search-panel{
    display: none;
}

.search-panel.open{
    display: block;
    animation: godExpand .34s var(--ease-god);
}

.live-filter-bar{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
    animation: godFadeUp .45s var(--ease-god);
}

.live-filter-bar .filter-chip{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.live-filter-bar .filter-chip:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.live-filter-bar .filter-chip span{
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.live-result-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border: 1px solid rgba(59,130,246,0.20);
    font-weight: 900;
    box-shadow: var(--shadow-xs);
}

/* =========================================================
   TABLES
========================================================= */
.table-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
    overflow: hidden;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
    animation: godFadeUp .45s var(--ease-god);
}

.table-box h2{
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.18;
}

.table-scroll{
    overflow-x: auto;
}

.table-scroll table{
    min-width: 780px;
}

table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th{
    text-align: left;
    padding: 14px 12px;
    background: var(--panel-soft);
    color: var(--text-soft);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

tbody td{
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

tbody tr{
    transition: background .18s var(--ease-god), transform .18s var(--ease-god);
}

tbody tr:hover{
    background: rgba(148,163,184,0.08);
    transform: scale(1.002);
}

.actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   VEHICLE EXPAND DETAIL
========================================================= */
.vehicle-summary-row{
    cursor: pointer;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    position: relative;
}

.vehicle-summary-row:hover{
    background: rgba(59,130,246,0.08);
    transform: translateY(-1px);
}

.vehicle-summary-row.is-open{
    background: rgba(37,99,235,0.10);
    box-shadow: inset 3px 0 0 var(--primary);
}

.vehicle-arrow{
    min-width: 28px;
    justify-content: center;
    transition: transform .28s var(--ease-god), background .22s var(--ease-god), color .22s var(--ease-god);
}

.vehicle-details-row{
    display: table-row;
}

.vehicle-details-row td{
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vehicle-details-row .details-panel{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        padding 0.25s ease,
        margin 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.vehicle-details-row.open .details-panel{
    max-height: 2200px;
    opacity: 1;
    transform: translateY(0);
    padding: 18px;
    margin-top: 10px;
    margin-bottom: 14px;
    animation: godExpand .34s var(--ease-god);
}

.details-panel{
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god);
}

.details-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.details-item{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.details-item:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.details-item-wide{
    grid-column: 1 / -1;
}

.details-item-label{
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.details-item-value{
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.details-section{
    margin-top: 18px;
}

.details-section h3{
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.2;
    color: var(--text);
}

.doc-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--primary-2);
    font-weight: 800;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.doc-link:hover{
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.photo-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.photo-card{
    width: 160px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.photo-card:hover{
    transform: translateY(-2px);
}

.photo-card span{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 800;
    text-align: center;
}

.detail-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* =========================================================
   PREVIEW / FILES
========================================================= */
.thumb{
    width: 150px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
    transition: transform .26s var(--ease-god), box-shadow .26s var(--ease-god);
}

.photo-card:hover .thumb{
    transform: scale(1.035);
    box-shadow: var(--shadow-md);
}

.preview-box{
    margin-top: 12px;
}

/* =========================================================
   INFO GRID / EMPTY STATES
========================================================= */

.empty-state-pro{
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 38px 22px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state-pro h3{
    margin-bottom: 8px;
    font-size: 22px;
    color: var(--text);
}

.empty-state-pro p{
    color: var(--text-muted);
    line-height: 1.6;
}

.table-summary-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.table-summary-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   FILIALI / QUICK CARDS
========================================================= */

.branch-quick-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* =========================================================
   RIFORNIMENTI BADGES
========================================================= */

/* =========================================================
   TOAST
========================================================= */
.toast-stack{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast{
    min-width: 280px;
    max-width: 420px;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px) translateX(10px);
    animation: toastIn .28s var(--ease-god) forwards;
}

.toast.success{ border-left: 5px solid var(--success); }
.toast.info{ border-left: 5px solid var(--primary); }
.toast.warning{ border-left: 5px solid var(--warning); }
.toast.danger{ border-left: 5px solid var(--danger); }

.toast-title{
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.toast-text{
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-soft);
}

.toast.hide{
    animation: toastOut .24s var(--ease-god) forwards;
}

/* =========================================================
   LOADER
========================================================= */
.app-loader{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.28);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.app-loader.show{
    display: flex;
}

.loader-card{
    min-width: 220px;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.loader-ring{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(148,163,184,.22);
    border-top-color: var(--primary);
    margin: 0 auto 14px;
    animation: spinGod .8s linear infinite;
}

.loader-text{
    font-size: 14px;
    font-weight: 800;
    color: var(--text-soft);
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes godFadeUp{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes godExpand{
    from{
        opacity: 0;
        transform: translateY(-6px) scale(.995);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes godPulse{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.03); }
}

@keyframes toastIn{
    to{
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes toastOut{
    to{
        opacity: 0;
        transform: translateY(-6px) translateX(16px);
    }
}

@keyframes badgeBounce{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
}

@keyframes spinGod{
    to{ transform: rotate(360deg); }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1450px){
    
    .dashboard-actions,
    .branch-quick-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 1180px){
    .login-shell{
        grid-template-columns: 1fr;
    }

    .login-left{
        min-height: 290px;
    }

    .dashboard-2,
    .chart-grid{
        grid-template-columns: 1fr;
    }

    .dashboard-actions,
    .branch-quick-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 980px){
    .main-content{
        padding: 20px;
    }

    .page-header{
        flex-direction: column;
    }

    .dashboard-actions,
    .details-grid,
    .branch-quick-grid{
        grid-template-columns: 1fr;
    }

    /* `minmax(0, 1fr)` e non `1fr`, come la regola a due colonne: una colonna
       `1fr` non scende sotto la larghezza minima del suo contenuto, e un campo
       data-ora o una tendina lunga la allargavano oltre la card (misurato a
       390 px: colonna di 210 px in una griglia di 198). */
    .grid-2{
        grid-template-columns: minmax(0, 1fr);
    }

    .table-box{
        overflow-x: auto;
    }

    .table-box table{
        min-width: 960px;
    }

    .photo-card{
        width: 100%;
        max-width: 220px;
    }

    .live-filter-bar{
        grid-template-columns: 1fr;
    }

    .toast-stack{
        right: 12px;
        left: 12px;
        top: 12px;
    }

    .toast{
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 680px){

    .login-copy h2{
        font-size: 30px;
    }

    .main-content{
        padding: 16px;
    }

    .form-box,
    .table-box,
    .metric-card,
    .card,
    .chart-box,
    .branch-quick-card{
        padding: 18px;
        border-radius: 18px;
    }

    .page-header-actions,
    .form-actions-row{
        width: 100%;
    }

    .thumb{
        width: 100%;
        max-width: 220px;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

#newFormPanel{
    display:none;
    margin-top:12px;
}

.tree-level{
    margin-bottom:12px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#ffffff;
    padding:10px 14px;
}

.tree-level summary{
    cursor:pointer;
    font-weight:700;
    color:#0A2342;
    padding:6px 0;
    list-style:none;
}

.tree-level summary::-webkit-details-marker{
    display:none;
}

.tree-level summary::before{
    content:"▸";
    display:inline-block;
    margin-right:8px;
    color:#1E3A5F;
    transition:transform 0.2s ease;
}

.tree-level[open] > summary::before{
    transform:rotate(90deg);
}

.status-detail-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.status-detail-column{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.status-detail-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.status-detail-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.status-detail-header h2{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-soft);
}

.status-vehicle-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-soft);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.status-vehicle-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.status-vehicle-main{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-vehicle-meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

@media (max-width: 1200px){
    .status-detail-grid{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px){
    .status-detail-grid{
        grid-template-columns: 1fr;
    }
}

.status-detail-toggle{
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 16px 0;
    cursor: pointer;
    text-align: left;
}

.sheet-detail-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sheet-detail-grid > div{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
}

.sheet-detail-grid strong{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.sheet-detail-grid span{
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
}

.sheet-link-list,
.sheet-mini-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sheet-mini-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
}

.sheet-mini-item strong{
    font-size: 13px;
    color: var(--text-soft);
}

.sheet-mini-item span{
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 760px){
    .sheet-detail-grid{
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   BRANDING DINAMICO
========================================================= */

/* =========================================================
   DASHBOARD ADMIN - EXECUTIVE OVERVIEW
========================================================= */

.admin-chart-box,
.admin-scadenze-box{
    min-height:100%;
}

.metric-grid .metric-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* =========================================================
   STATO FILIALI - VERSIONE PRO (NO SEMAFORI)
========================================================= */

/* =========================================================
   ADMIN FILIALI - HEADER CARD PREMIUM
========================================================= */

/* =========================================================
   SIDEBAR PRO UPGRADE
========================================================= */

.vehicle-summary-row.is-open {
    background: rgba(15, 23, 42, 0.04);
}

.vehicle-details-row {
    display: none;
}

.vehicle-details-row.open {
    display: table-row;
}

/* ===== LISTA FILIALI - ALLINEAMENTO CENTRATO ===== */

.filiali-table th,
.filiali-table td {
    text-align: center;
    vertical-align: middle;
}

/* Migliora spaziatura */
.filiali-table th {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Lista veicoli dentro filiale */
.filiale-veicoli {
    width: 100%;
    margin-top: 10px;
}

/* Freccia + icona centrata */
.filiale-toggle,
.vehicle-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.filiali-table td {
    padding: 12px 10px;
}

.filiali-table tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

.branch-details-row,
.vehicle-details-row {
    display: none;
}

.branch-details-row.open,
.vehicle-details-row.open {
    display: table-row;
}

/* =========================================================
   PRO UI DEFINITIVO - SAAS CLEAN ENTERPRISE
   INCOLLA QUESTO BLOCCO ALLA FINE DI style.css
========================================================= */

:root{
    --saas-bg: #f3f7fd;
    --saas-panel: #ffffff;
    --saas-blue: #1266f1;
    --saas-blue-2: #0ea5e9;
    --saas-text: #07152d;
    --saas-muted: #64748b;
    --saas-line: #e5edf7;
    --saas-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --saas-shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* LAYOUT */
.app-shell{
    display: flex !important;
    min-height: 100vh;
    background: transparent;
}

.main-content{
    flex: 1;
    min-width: 0;
    padding: 28px 34px !important;
}

/* SIDEBAR COME MOCKUP */

/* NAV */

/* FOOTER SIDEBAR */

/* HEADER */
.page-header{
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
}

.page-kicker{
    color: #1266f1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
}

.subtitle{
    color: #475569 !important;
    font-size: 17px !important;
    margin-top: 8px !important;
}

.page-header-actions{
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.btn.back,
.btn.edit{
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
    font-weight: 900 !important;
}

/* KPI COME IMMAGINE */
.metric-grid{
    display: grid !important;
    gap: 22px !important;
    margin-bottom: 24px !important;
}

.metric-card{
    min-height: 150px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
    padding: 26px 24px !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 12px !important;
}

.metric-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 24px 0 0 24px;
}

.metric-card.info::before{ background: #0ea5e9; }
.metric-card.success::before{ background: #22c55e; }
.metric-card.warning::before{ background: #f97316; }
.metric-card.danger::before{ background: #8b5cf6; }

.metric-card.neutral::before{ background: #64748b; }

.metric-card.info,
.metric-card.success,
.metric-card.warning,
.metric-card.danger,
.metric-card.primary,
.metric-card.neutral{
    border-left: 1px solid #e2eaf5 !important;
}

.metric-value{
    font-size: 31px !important;
    font-weight: 900 !important;
    color: #07152d !important;
    letter-spacing: -0.7px !important;
}

.metric-value.small{
    font-size: 28px !important;
}

.metric-note{
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

/* BOX TABELLE PREMIUM */
.table-box,
.form-box,
.chart-box{
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 28px !important;
    box-shadow: var(--saas-shadow) !important;
    padding: 26px !important;
}

.table-box h2{
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #07152d !important;
}

/* TABELLE */
table{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

thead th{
    background: #f4f7fc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-align: center !important;
    padding: 16px 14px !important;
    border-bottom: 1px solid #e2eaf5 !important;
}

tbody td{
    text-align: center !important;
    vertical-align: middle !important;
    padding: 18px 14px !important;
    border-bottom: 1px solid #edf2f8 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

tbody tr:hover{
    background: #f8fbff !important;
    transform: none !important;
}

/* RIGHE MESE / GIORNO CHIUSE */
.month-details-row,
.day-details-row,
.branch-details-row,
.vehicle-details-row{
    display: none !important;
}

.month-details-row.open,
.day-details-row.open,
.branch-details-row.open,
.vehicle-details-row.open{
    display: table-row !important;
}

.branch-summary-row,
.month-summary-row,
.day-summary-row,
.vehicle-summary-row{
    cursor: pointer !important;
}

.branch-summary-row.is-open,
.month-summary-row.is-open,
.day-summary-row.is-open,
.vehicle-summary-row.is-open{
    background: #eef5ff !important;
    box-shadow: inset 4px 0 0 #1266f1 !important;
}

.vehicle-arrow,
.inline-tag{
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: #1266f1 !important;
    border: 1px solid #d7e6fb !important;
    font-weight: 900 !important;
    padding: 0 !important;
}

/* DETTAGLI APERTI */
.details-panel{
    background: #ffffff !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 22px !important;
    box-shadow: inset 0 0 0 1px rgba(226,234,245,0.6) !important;
    padding: 18px !important;
}

.details-grid{
    gap: 16px !important;
}

.details-item{
    background: #f8fbff !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 18px !important;
    padding: 16px !important;
}

/* FILTRI */
.live-filter-bar{
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr auto auto !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.live-filter-bar .filter-chip,
.live-result-count{
    min-height: 56px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
}

.live-filter-bar .filter-chip span{
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.live-filter-bar input,
.live-filter-bar select{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* INPUT GENERALE */
input:where(:not([type="checkbox"])),
select,
textarea{
    background: #ffffff !important;
    border: 1px solid #dbe7f3 !important;
    border-radius: 15px !important;
    min-height: 48px !important;
}

/* RESPONSIVE */
@media (max-width: 1050px){
    .live-filter-bar{
        grid-template-columns: 1fr !important;
    }

    .main-content{
        padding: 22px !important;
    }
}

/* =========================================================
   PRO UI CLEAN DEFINITIVO - COME MOCKUP
   INCOLLA ALLA FINE DI style.css
========================================================= */

:root{
    --pro-bg: #f6f9fd;
    --pro-panel: #ffffff;
    --pro-text: #07152d;
    --pro-muted: #64748b;
    --pro-line: #e2eaf5;
    --pro-blue: #1266f1;
    --pro-blue-2: #0ea5e9;
    --pro-green: #16a34a;
    --pro-orange: #f97316;
    --pro-purple: #7c3aed;
    --pro-red: #ef4444;
    --pro-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    --pro-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.05);
}

/* LAYOUT */
.app-shell{
    display: flex !important;
    min-height: 100vh !important;
}

.main-content{
    flex: 1 !important;
    padding: 22px 30px !important;
    min-width: 0 !important;
}

/* =========================================================
   SIDEBAR COMPATTA CON TUTTA LA LISTA
========================================================= */

/* NAV LISTA SENZA SCROLL */

/* FOOTER COMPATTO */

/* =========================================================
   HEADER PULITO
========================================================= */

.page-header{
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.page-kicker{
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .20em !important;
    color: var(--pro-blue) !important;
    margin-bottom: 8px !important;
}

.subtitle{
    margin-top: 8px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    line-height: 1.45 !important;
}

.page-header-actions{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.btn.back,
.btn.edit{
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 17px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: var(--pro-text) !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.btn.edit,
button{
    background: linear-gradient(135deg, var(--pro-blue), #0b5de8) !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================================
   CARD KPI PIÙ LEGGERE
========================================================= */

.metric-grid{
    display: grid !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

.metric-card{
    min-height: 122px !important;
    padding: 20px 22px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 9px !important;
}

.metric-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
}

.metric-card.info::before,
.metric-card.primary::before{ background: var(--pro-blue); }

.metric-card.success::before{ background: var(--pro-green); }

.metric-card.warning::before{ background: var(--pro-orange); }

.metric-card.danger::before{ background: var(--pro-purple); }

.metric-card.neutral::before{ background: #64748b; }

.metric-card.info,
.metric-card.success,
.metric-card.warning,
.metric-card.danger,
.metric-card.primary,
.metric-card.neutral{
    border-left: 1px solid var(--pro-line) !important;
}

.metric-value{
    font-size: 29px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    color: var(--pro-text) !important;
    letter-spacing: -.6px !important;
}

.metric-value.small{
    font-size: 23px !important;
}

.metric-note{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--pro-muted) !important;
}

/* =========================================================
   CARD FUNZIONI / FORM / TABELLE
========================================================= */

.form-box,
.table-box,
.chart-box,
.branch-quick-card,
.card{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--pro-shadow-soft) !important;
    padding: 22px !important;
    margin-bottom: 18px !important;
}

.form-box h2,
.table-box h2,
.chart-box h3{
    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: var(--pro-text) !important;
    margin-bottom: 14px !important;
}

.branch-quick-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.branch-quick-card{
    min-height: 115px !important;
}

.branch-quick-title{
    font-size: 16px !important;
    font-weight: 750 !important;
}

.branch-quick-text{
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--pro-muted) !important;
}

/* =========================================================
   FILTRI COMPATTI
========================================================= */

.search-toolbar-group{
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.live-filter-bar{
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr auto auto !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.live-filter-bar .filter-chip,
.live-result-count{
    min-height: 48px !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.live-filter-bar .filter-chip span{
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #52637a !important;
}

.live-filter-bar input,
.live-filter-bar select{
    border: none !important;
    background: transparent !important;
    min-height: 36px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   TABELLE PIÙ PULITE
========================================================= */

.table-scroll{
    overflow-x: auto !important;
}

table{
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 14px !important;
}

thead th{
    background: #f6f9fd !important;
    color: #52637a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--pro-line) !important;
    text-align: center !important;
}

tbody td{
    padding: 15px 12px !important;
    border-bottom: 1px solid #edf2f8 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #10233f !important;
}

tbody td strong{
    font-weight: 700 !important;
}

tbody tr:hover{
    background: #f8fbff !important;
    transform: none !important;
}

.actions{
    justify-content: center !important;
}

/* BOTTONI TABELLA */
.actions .btn,
td .btn{
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* FORM PIÙ COMPATTI */
.grid-2{
    gap: 14px !important;
}

.form-box label{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

input:where(:not([type="checkbox"])),
select,
textarea{
    min-height: 45px !important;
    border-radius: 14px !important;
    border: 1px solid #dce7f3 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* DETTAGLI */
.details-panel{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px !important;
}

.details-grid{
    gap: 12px !important;
}

.details-item{
    background: #f8fbff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 15px !important;
    padding: 13px !important;
}

.details-item-label{
    font-size: 11px !important;
    font-weight: 800 !important;
}

.details-item-value{
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* FRECCE */
.vehicle-arrow,
.inline-tag{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: var(--pro-blue) !important;
    border: 1px solid #d7e6fb !important;
    padding: 0 !important;
    font-weight: 800 !important;
}

.branch-summary-row,
.vehicle-summary-row,
.month-summary-row,
.day-summary-row{
    cursor: pointer !important;
}

.branch-summary-row.is-open,
.vehicle-summary-row.is-open,
.month-summary-row.is-open,
.day-summary-row.is-open{
    background: #eef5ff !important;
    box-shadow: inset 4px 0 0 var(--pro-blue) !important;
}

.branch-details-row,
.vehicle-details-row,
.month-details-row,
.day-details-row{
    display: none !important;
}

.branch-details-row.open,
.vehicle-details-row.open,
.month-details-row.open,
.day-details-row.open{
    display: table-row !important;
}

/* SPAZI VUOTI RIDOTTI */
.section-block{
    margin-top: 18px !important;
}

.table-summary-row{
    margin-bottom: 14px !important;
    gap: 10px !important;
}

/* RESPONSIVE */
@media (max-width: 1180px){
    .branch-quick-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px){
    .main-content{
        padding: 18px !important;
    }

    .branch-quick-grid,
    .live-filter-bar{
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SIDEBAR FIX - SCROLL + ICONE PROFESSIONALI
========================================================= */

/* =========================================================
   SIDEBAR UPGRADE FINALE - SVG PREMIUM
========================================================= */

/* =========================================================
   STEP FINALE UI - SIDEBAR COLLASSABILE PREMIUM
========================================================= */

/* =========================================================
   FONT TUNING POPPINS (LOOK SaaS PREMIUM)
========================================================= */

/* Titoli */
h1, h2, h3{
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

/* Sottotitoli */
.subtitle{
    font-weight: 400 !important;
    opacity: 0.85;
}

/* Label e piccoli testi */
label,
.metric-label,
.details-item-label,
.table-box th{
    font-weight: 600 !important;
}

/* Valori importanti */
.metric-value,
.admin-branch-name{
    font-weight: 700 !important;
}

/* Sidebar */

/* Tabelle */
table td{
    font-weight: 400 !important;
}

/* =========================================================
   UI SLIM MODE (LOOK PROFESSIONALE)
========================================================= */

/* Sottotitolo */
.subtitle{
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.75 !important;
}

/* KPI card */
.metric-value{
    font-size: 26px !important;
    font-weight: 600 !important;
}

/* Label KPI */
.metric-label{
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.7;
}

/* Riduzione padding card */
.metric-card,
.card{
    padding: 16px !important;
    border-radius: 16px !important;
}

.dashboard{
    gap: 14px !important;
}

/* Tabelle */
table td{
    padding: 10px 10px !important;
    font-size: 13px !important;
}

thead th{
    font-size: 11px !important;
}

/* Bottoni più compatti */
button,
.btn{
    padding: 9px 14px !important;
    font-size: 13px !important;
}

/* Riduce blocchi */
.section-block{
    margin-top: 18px !important;
}

/* =========================================================
   GLOBAL TEXT LIGHT MODE - UI PIÙ SNELLA
========================================================= */

/* Titoli sezioni / box */
h2,
.table-box h2,
.form-box h2,
.chart-box h3,
.section-header h2{
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.25px !important;
}

/* Sottotitoli */
.subtitle,
.section-subtitle,
.table-box p,
.form-box p{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Kicker sopra i titoli */
.page-kicker{
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
}

/* KPI */
.metric-label,
.card label,
.details-item-label,
.info-item-label,
.admin-expiry-label{
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .8px !important;
}

.metric-value,
.card p,
.admin-expiry-value,
.status-kpi-value{
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
}

.metric-value.small{
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Testi piccoli nelle card */
.metric-note,
.card-link-text,
.branch-quick-text,
.admin-branch-summary,
.admin-branch-coordinator,
.admin-branch-coordinator-inline{
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Tabelle */
table{
    font-size: 13px !important;
}

thead th{
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .7px !important;
}

tbody td{
    font-size: 13px !important;
    font-weight: 400 !important;
}

tbody td strong,
table strong{
    font-weight: 600 !important;
}

/* Form */
label{
    font-size: 12px !important;
    font-weight: 500 !important;
}

input,
select,
textarea{
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Bottoni */
button,
.btn{
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* Sidebar */

/* Badge / pill */
.status-pill,
.inline-tag,
.table-summary-pill,
.rifornimenti-badge{
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Admin branch */

/* =========================================================
   GLOBAL ULTRA LIGHT TYPOGRAPHY - DEFINITIVO
   Deve stare come ULTIMO blocco del CSS
========================================================= */

html,
body,
body *{
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* TITOLI */
h1,
.page-header h1{
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.15 !important;
}

h2,
.table-box h2,
.form-box h2,
.section-header h2{
    font-size: 19px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

h3,
.chart-box h3,
.details-section h3{
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.1px !important;
}

/* TESTI GENERALI */
p,
li,
span,
div,
a{
    font-weight: 400 !important;
}

.subtitle,
.section-subtitle,
.muted-text,
.metric-note,
.card-link-text,
.branch-quick-text,
.table-box p,
.form-box p{
    font-size: 12.5px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}

/* LABEL / KICKER */
.page-kicker,
.metric-label,
.details-item-label,
.info-item-label,
.status-kpi-label,
.admin-expiry-label,
label{
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
}

/* NUMERI KPI */
.metric-value,
.card p,
.status-kpi-value,
.admin-expiry-value,
.details-item-value{
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.3px !important;
}

.metric-value.small{
    font-size: 17px !important;
    font-weight: 500 !important;
}

/* TABELLE */
table,
table *{
    font-weight: 400 !important;
}

thead th,
table th{
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

tbody td,
table td{
    font-size: 12.5px !important;
    font-weight: 300 !important;
    color: #334155 !important;
}

tbody td strong,
table td strong,
table strong{
    font-weight: 500 !important;
    color: #0f172a !important;
}

/* BOTTONI */
button,
.btn,
button *,
.btn *{
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* FORM */
input,
select,
textarea,
option{
    font-size: 12.5px !important;
    font-weight: 300 !important;
}

input::placeholder,
textarea::placeholder{
    font-weight: 300 !important;
    color: #94a3b8 !important;
}

/* SIDEBAR */

/* «in arrivo» accanto a una voce della barra, solo in demo (ticket 17, D203).
   Tre classi e !important: deve battere `.sidebar-nav .nav-link span` e
   `.sidebar *`, che forzano dimensione e peso. Nella barra ridotta lo nasconde
   gia' `.sidebar-collapsed .nav-link span:not(.nav-icon)`. */

/* BADGE / TAG / PILL */
.status-pill,
.inline-tag,
.table-summary-pill,
.rifornimenti-badge,
.smart-badge,
.admin-branch-status-badge{
    font-size: 10.5px !important;
    font-weight: 500 !important;
}

/* DETTAGLI / CARD */
.details-item-value,
.info-item-value,
.admin-branch-name,
.admin-branch-metric strong,
.admin-branch-fuel-value,
.status-vehicle-main strong,
.sheet-mini-item strong{
    font-weight: 500 !important;
}

.admin-branch-summary,
.admin-branch-coordinator,
.admin-branch-coordinator-inline,
.status-vehicle-main span,
.status-vehicle-meta,
.sheet-mini-item span{
    font-weight: 300 !important;
}

/* RIDUZIONE SPAZI PER LOOK PIÙ SNELLO */
.metric-card,
.card,
.form-box,
.table-box,
.chart-box{
    padding: 16px !important;
}

.metric-grid,
.chart-grid,
.grid-2,
.details-grid{
    gap: 12px !important;
}

tbody td{
    padding: 9px 10px !important;
}

thead th{
    padding: 10px 10px !important;
}

button,
.btn{
    padding: 8px 13px !important;
}

/* =========================================================
   FILIALI - ADD PANEL PREMIUM
========================================================= */

.add-branch-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 10px 16px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

.add-branch-btn:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09) !important;
}

.add-branch-icon{
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #ffffff !important;
}

.add-branch-icon svg{
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 2.3 !important;
    fill: none !important;
    stroke-linecap: round !important;
}

.add-filiale-panel{
    display: none !important;
}

.add-filiale-panel.open{
    display: block !important;
    animation: godExpand .28s ease !important;
}

.add-filiale-panel.is-hidden{
    display: none !important;
}

.add-filiale-panel:not(.is-hidden){
    display: block !important;
}

.add-branch-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 10px 18px 10px 10px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

.add-branch-icon{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

.add-branch-icon svg{
    width: 21px !important;
    height: 21px !important;
    stroke: #ffffff !important;
    stroke-width: 2.1 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.add-branch-btn span:last-child{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* =========================================================
   UI DEPTH UPGRADE - MENO BIANCO, PIÙ PREMIUM
========================================================= */

.metric-card,
.table-box,
.form-box,
.search-toolbar,
.live-filter-bar .filter-chip,
.live-result-count{
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.78)) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow:
        0 18px 40px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(10px);
}

.metric-card{
    min-height: 110px !important;
}

thead th{
    background: linear-gradient(180deg, #eef4fb, #e8eff7) !important;
    color: #475569 !important;
}

tbody tr:nth-child(even){
    background: rgba(248,250,252,0.65);
}

tbody tr:hover{
    background: rgba(219,234,254,0.55) !important;
}

.page-kicker{
    color: #1d4ed8 !important;
}

.metric-label,
.table-box th,
.filter-chip span{
    color: #475569 !important;
}

.metric-value{
    color: #111827 !important;
}

.metric-note,
tbody td{
    color: #475569 !important;
}

.add-branch-btn{
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,0.08) !important;
}

.vehicle-cost-form{
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-soft);
}

.no-anim {
    animation: none !important;
    transition: none !important;
}

/* =========================================================
   COSTI VEICOLO - PREMIUM BOX
========================================================= */

.form-section-title{
    margin: 26px 0 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.cost-premium-box{
    margin: 12px 0 24px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(203,213,225,0.9);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.88));
    box-shadow:
        0 16px 34px rgba(15,23,42,0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.cost-premium-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.cost-premium-header strong{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.cost-premium-header span{
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.cost-premium-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cost-premium-grid label{
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.cost-premium-grid input{
    background: #ffffff !important;
    border: 1px solid #dbe7f3 !important;
    border-radius: 14px !important;
    min-height: 46px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}

@media (max-width: 1200px){
    .cost-premium-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px){
    .cost-premium-grid{
        grid-template-columns: 1fr;
    }
}

/* FIX toolbar veicoli più ordinata */
.search-toolbar-group{
    align-items: center !important;
    gap: 18px !important;
    /* Lo stacco sopra era 6px contro i 18 che il gruppo ha sotto e i 18 che
       ha fra un pulsante e l'altro: in Veicoli i pulsanti risultavano incollati
       al riquadro «Costo totale flotta» (misurato: fondo del riquadro a 1487,
       cima dei pulsanti a 1493).
       Si vedeva SOLO in Veicoli, e il motivo non e' la regola: sulle altre
       quattro pagine che usano questo gruppo sopra c'e' una griglia di schede,
       il cui margine inferiore e' piu' grande e assorbe questo (i margini
       verticali fra due fratelli si fondono e vince il maggiore). In Veicoli
       sopra c'e' una scheda sola, e i 6px restavano nudi. */
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

.search-toolbar-group .add-branch-btn{
    min-width: 260px !important;
    height: 64px !important;
    padding: 10px 22px 10px 12px !important;
    justify-content: flex-start !important;
}

.search-toolbar-group .add-branch-icon{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
}

.search-toolbar-group .add-branch-btn span:last-child{
    white-space: nowrap !important;
}

.metric-card.danger .metric-value,
.metric-card.danger .metric-value.small{
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* DASHBOARD ADMIN - COSTO FLOTTA + KPI COMPATTI */

.no-anim,
.no-anim *,
.admin-cost-card,
.admin-cost-card *{
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* =========================================================
   DASHBOARD COSTI FLOTTA PRO
========================================================= */

/* =========================================================
   COSTI FLOTTA - LAYOUT PRO
========================================================= */

/* =========================================================
   COSTI FLOTTA - DETTAGLIO VEICOLO COMPATTO
========================================================= */

.costs-vehicle-detail .details-panel{
    padding: 14px 16px;
    border-radius: 18px;
}

.costs-vehicle-detail .details-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
}

.costs-vehicle-detail .details-item{
    padding: 10px 12px;
    border-radius: 14px;
    min-height: auto;
}

.costs-vehicle-detail .details-item-label{
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.costs-vehicle-detail .details-item-value{
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}

.costs-vehicle-detail .details-section{
    margin-top: 14px;
    padding-top: 12px;
}

.costs-vehicle-detail .detail-actions{
    margin-top: 12px;
    gap: 8px;
}

@media (max-width: 1200px){
    .costs-vehicle-detail .details-grid{
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 800px){
    .costs-vehicle-detail .details-grid{
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

/* COSTI FLOTTA - SCHEDA COMPATTA DEFINITIVA */

.details-panel.costs-vehicle-detail{
    padding: 10px 12px !important;
}

.details-panel.costs-vehicle-detail .details-grid{
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

.details-panel.costs-vehicle-detail .details-item{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    min-height: 58px !important;
}

.details-panel.costs-vehicle-detail .details-item-label{
    font-size: 9px !important;
    margin-bottom: 3px !important;
}

.details-panel.costs-vehicle-detail .details-item-value{
    font-size: 14px !important;
    line-height: 1.1 !important;
}

.details-panel.costs-vehicle-detail .details-section{
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* =========================================================
   FLOTTA VEICOLI - VERSIONE COMPATTA
========================================================= */

.details-panel.compact-vehicle{
    padding: 12px 14px !important;
}

.details-panel.compact-vehicle .details-grid{
    grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
    gap: 10px !important;
}

.details-panel.compact-vehicle .details-item{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    min-height: 64px !important;
}

.details-panel.compact-vehicle .details-item-label{
    font-size: 10px !important;
    margin-bottom: 4px !important;
}

.details-panel.compact-vehicle .details-item-value{
    font-size: 15px !important;
    font-weight: 400 !important;
}

.details-panel.compact-vehicle .details-section{
    margin-top: 12px !important;
    padding-top: 10px !important;
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 700px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* RIMUOVE GRASSETTO DETTAGLI VEICOLO */

.details-panel .details-item-value{
    font-weight: 500 !important;
}

.details-panel .details-item-value{
    font-weight: 500 !important;
    color: #1e293b !important;
}

.details-panel .details-item-label{
    font-weight: 600 !important;
    color: #64748b !important;
}

/* LABEL leggere */
.vehicle-details-row .details-item-label{
    font-weight: 500 !important;
    color: #64748b !important;
}

/* VALORI normali */
.vehicle-details-row .details-item-value{
    font-weight: 400 !important;
    color: #0f172a !important;
}

/* LABEL leggere */
.details-grid div{
    font-weight: 400 !important;
    color: #1e293b;
}

/* SOLO numeri importanti evidenziati */
.details-grid div:has(span),
.details-grid div:has(.value){
    font-weight: 600 !important;
}

/* ===== ACCORDION COSTI FLOTTA ===== */

.fleet-accordion{
    overflow: hidden;
}

/* KPI dimensioni corrette enterprise */
.metric-card{
    padding: 16px 18px !important;
    min-height: 90px;
}

.metric-value{
    font-size: 22px;
    font-weight: 500;
}

.metric-note{
    font-size: 12px;
    color: var(--text-muted);
}

/* =========================================================
   COSTI FLOTTA - UI DEFINITIVA PULITA
========================================================= */

.chart-box{
    padding:18px !important;
}

/* Accordion tabelle grigio professionale */
.fleet-accordion{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:12px;
    margin-top:16px;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.fleet-accordion-header:hover{
    background:#e2e8f0 !important;
}

.fleet-accordion-body{
    display:none;
    margin-top:14px;
}

.fleet-accordion-body.open{
    display:block;
}

.chart-grid{
    margin-top: 34px !important;
}

.chart-box{
    padding: 26px !important;
    border-radius: 24px !important;
}

/* =========================================================
   FIX DEFINITIVO DETTAGLIO VEICOLI - COSTI / DOCUMENTI / FOTO
   INCOLLARE IN FONDO A style.css
========================================================= */

.vehicle-cost-form,
.cost-premium-box{
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
    padding: 18px !important;
}

.vehicle-cost-form *,
.cost-premium-box *,
.details-panel *,
.details-section *,
.doc-links *,
.photo-grid *,
.table-scroll *{
    color: #111827 !important;
    opacity: 1 !important;
}

.vehicle-cost-form label,
.cost-premium-box label{
    color: #334155 !important;
    font-weight: 600 !important;
}

.vehicle-cost-form input,
.vehicle-cost-form select,
.vehicle-cost-form textarea,
.cost-premium-box input,
.cost-premium-box select,
.cost-premium-box textarea{
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

.vehicle-cost-form input::placeholder,
.vehicle-cost-form textarea::placeholder,
.cost-premium-box input::placeholder,
.cost-premium-box textarea::placeholder{
    color: #64748b !important;
    opacity: 1 !important;
}

.doc-link,
.file-link{
    background: #f8fafc !important;
    color: #1d4ed8 !important;
    border: 1px solid #cbd5e1 !important;
}

.photo-card span,
.vehicle-photo-label{
    color: #111827 !important;
    opacity: 1 !important;
}

/* =========================================================
   DETTAGLIO TESSERE CARBURANTE - COME DETTAGLI VEICOLI
========================================================= */

.details-panel.compact-vehicle{
    padding:14px 16px !important;
    border-radius:18px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:0 10px 26px rgba(15,23,42,.05) !important;
}

.details-panel.compact-vehicle .details-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(140px,1fr)) !important;
    gap:10px !important;
}

.details-panel.compact-vehicle .details-item{
    padding:11px 12px !important;
    border-radius:14px !important;
    min-height:64px !important;
    background:#f8fafc !important;
    border:1px solid #e2e8f0 !important;
}

.details-panel.compact-vehicle .details-item-label{
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:#334155 !important;
    margin-bottom:5px !important;
}

.details-panel.compact-vehicle .details-item-value{
    font-size:15px !important;
    font-weight:500 !important;
    color:#0f172a !important;
}

.details-panel.compact-vehicle .details-section{
    margin-top:14px !important;
    padding-top:12px !important;
    border-top:1px solid #e2e8f0 !important;
}

.details-panel.compact-vehicle .detail-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
}

.details-panel.compact-vehicle .btn{
    min-height:36px !important;
    padding:8px 13px !important;
    border-radius:11px !important;
    font-size:12px !important;
}

@media(max-width:1100px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns:1fr !important;
    }
}

#gpsMap{
    width:100%;
    height:700px;
    border-radius:22px;
    overflow:hidden;
    margin-top:18px;
    border:1px solid rgba(255,255,255,0.08);
}

#gpsMap{
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

@media(max-width: 900px){

    #gpsMap{
        height: 480px !important;
        min-height: 480px !important;
    }
}

#gpsMap{
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

@media(max-width: 900px){
    #gpsMap{
        height: 480px !important;
        min-height: 480px !important;
    }
}

/* GPS ENTERPRISE MARKERS */

.gps-marker{
    background: transparent !important;
    border: none !important;
}

.gps-marker-pin{
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 10px 24px rgba(15,23,42,.28);
    border: 3px solid #ffffff;
    position: relative;
}

.gps-marker-pin span{
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    top: 9px;
    left: 9px;
}

.gps-popup{
    min-width: 260px;
}

.gps-popup-title{
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.gps-popup-subtitle{
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.gps-popup-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gps-popup-grid div{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
}

.gps-popup-grid span{
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 3px;
}

.gps-popup-grid strong{
    font-size: 12px;
    color: #0f172a;
}

.gps-popup-footer{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
}

.gps-online{
    color: #16a34a !important;
}

.gps-offline{
    color: #dc2626 !important;
}

#gpsMap{
    height: 560px !important;
    min-height: 560px !important;
}

@media(max-width: 700px){

    #gpsMap{
        height: 460px !important;
        min-height: 460px !important;
    }
}

.gps-live-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gps-live-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: .2s ease;
}

.gps-live-row:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.gps-live-row-left{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
}

.gps-live-status{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 0;
}

.gps-live-status.online{
    background: #16a34a;
    box-shadow: 0 0 0 6px rgba(22,163,74,.15);
}

.gps-live-status.offline{
    background: #dc2626;
    box-shadow: 0 0 0 6px rgba(220,38,38,.12);
}

.gps-live-targa{
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.gps-live-sub{
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.gps-live-center{
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.gps-live-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gps-live-info span{
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
}

.gps-live-info strong{
    font-size: 13px;
    color: #0f172a;
}

.gps-live-row-right{
    display: flex;
    align-items: center;
    gap: 14px;
}

.gps-live-update{
    font-size: 12px;
    color: #64748b;
}

.gps-center-btn{
    border: none;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: white;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.gps-center-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37,99,235,.25);
}

.gps-empty-state{
    padding: 40px;
    text-align: center;
    color: #64748b;
}

@media(max-width: 1100px){

    .gps-live-row{
        flex-direction: column;
        align-items: flex-start;
    }

    .gps-live-center{
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
    }

    .gps-live-row-right{
        width: 100%;
        justify-content: space-between;
    }
}

#gpsMap{
    height: 520px !important;
    min-height: 520px !important;
}

.gps-live-row{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 12px !important;
}

@media(max-width: 700px){

    #gpsMap{
        height: 440px !important;
        min-height: 440px !important;
    }
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:22px;
    align-items:center;
}

#gpsHistoryMap{
    width: 100% !important;
    height: 540px !important;
    min-height: 540px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

@media(max-width: 800px){
    #gpsHistoryMap{
        height: 440px !important;
        min-height: 440px !important;
    }
}

.vehicle-details-panel,
.details-panel,
.vehicle-expanded-panel {
    max-height: none !important;
    overflow: visible !important;
}

.table-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.main-content {
    padding-bottom: 120px;
}

/* =========================================================
   CALENDARIO OPERATIVO (feature C)
   `.dashboard-date` e non `.dashboard-date-right` come nel foglio di stile di
   produzione: li' il selettore non combacia con la classe usata dal template,
   quindi la data in dashboard resta senza stile. Tolto anche `text-align:right`,
   che allineava a destra un elemento che sta nella colonna sinistra
   dell'intestazione.
   ========================================================= */

.calendar-modal{
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.calendar-modal.show{
    display: flex;
}

.calendar-modal-box{
    width: 420px;
    max-width: calc(100vw - 30px);
    background: #ffffff;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .30);
}

.calendar-modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.calendar-modal-header h3{
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.calendar-modal-header button{
    border: 0;
    background: #f3f4f6;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
}

.calendar-modal-box label{
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin: 10px 0 5px;
}

.calendar-modal-box .form-control{
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 8px;
}

.calendar-detail-row{
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #374151;
}

.calendar-detail-actions{
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

/* =========================================================
   SINISTRI (PR 4.2)
   Sostituisce le ~1.000 righe di <style> che la pagina di
   produzione portava dentro il <body>. Qui c'e' solo cio' che
   non esiste gia': il percorso a tappe, la checklist, la
   galleria e la cronologia. Stati, riquadri, tabelle, campi e
   stati vuoti riusano le classi comuni
   (.status-pill, .metric-card, .filiali-table, .details-grid,
   .empty-state-pro).
========================================================= */

.claim-proposal[hidden]{
    display: none;
}

.claim-checklist-esito{
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 18px;
}

.claim-checklist-esito.errore{
    color: var(--danger);
    font-weight: 700;
}

/* =========================================================
   SINISTRI - moduli di apertura e modifica (PR 4.3)
   Le pagine di produzione portavano dentro il <body> altre
   ~700 righe di stile. Qui c'e' solo il selettore delle parti
   danneggiate e la nota sotto un campo: tutto il resto sono
   .form-box, .grid-2, .form-actions e .metric-card, cioe' le
   stesse classi degli altri moduli dell'app.
========================================================= */

/* --- La proposta sul contachilometri (scheda veicolo) ---------------------
   Il riquadro lo disegna il server dentro la cella del campo «KM attuali», e
   solo quando i documenti dicono un numero piu' basso di quello memorizzato.
   Niente `hidden` e niente JavaScript che lo accenda: il pulsante si limita a
   scrivere il valore nel campo, e la scheda si salva come sempre.

   Il bordo tratteggiato e lo sfondo tenue sono gli stessi di
   `.claim-proposal`: nell'applicazione «proposta che aspetta una conferma» ha
   gia' questa faccia, e vale la pena che se ne riconosca una sola. */
.km-proposta{
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed var(--primary-2);
    background: var(--primary-soft);
}

.km-proposta-cifre{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}

.km-proposta-delta{
    font-weight: 800;
    color: var(--danger);
}

.km-proposta-motivo{
    margin: 8px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* =========================================================
   MENU LATERALE RICHIUDIBILE
   -----------------------------------------------------------
   STA IN FONDO A QUESTO FILE PER DUE MOTIVI, entrambi misurati e non supposti.

   1) E' l'unico foglio che TUTTE le pagine caricano. Su 54 template solo 24
      estendono `base.html`, e `marvion-light.css` e' caricato da UN template
      soltanto: una regola scritta la' non varrebbe sulle 21 pagine che hanno il
      menu ma il proprio <head> (Veicoli, Utenti, Scadenze, Rifornimenti...).
   2) Deve stare DOPO le regole che corregge. `.sidebar-nav` in questo file e'
      dichiarata sette volte; a parita' di `!important` e di specificita' vince
      l'ultima dichiarata, quindi l'unico modo sicuro di avere l'ultima parola
      e' scrivere in fondo.

   La classe `sidebar-collapsed` la mette lo script di `sidebar.html` su <html>.
   L'aspetto a sole icone e' gia' scritto piu' sopra (sezione «SIDEBAR
   COLLASSABILE PREMIUM», riga ~4861): era stato previsto e mai collegato a un
   pulsante. Qui si aggiunge solo cio' che manca.
========================================================= */

/* Una freccia per stato: «<» col menu aperto (il pulsante lo chiude), «>» col
   menu ridotto (il pulsante lo riapre). Si nasconde quella che non serve invece
   di ruotarne una sola, cosi' la direzione resta esatta anche se un domani i
   due disegni cambiano. */

/* Il pulsante sta in alto a destra DENTRO la barra: al logo serve spazio sopra,
   altrimenti i due si sovrappongono. */

/* A menu ridotto restano il pulsante e un logo piccolo: senza questa riga la
   scatola bianca resta alta come a menu aperto e il logo ci galleggia dentro. */

/* Si agisce sui figli diretti di `.sidebar-nav` invece che su `.nav-link`, e
   non e' un vezzo: fino al 16 agosto «Costi flotta» portava la sola classe
   `nav-item` -- che non ha alcuno stile in tutto il foglio -- e sarebbe stata
   l'unica voce a mostrare ancora il testo a menu ridotto. La classe ora e'
   allineata alle altre, ma il selettore resta largo perche' una voce nuova
   scritta con una classe diversa continui a comportarsi bene. */

/* -----------------------------------------------------------
   IL MENU RESTA LATERALE A OGNI LARGHEZZA
   -----------------------------------------------------------
   Il foglio aveva una DOPPIA FORMA: barra laterale sopra una certa larghezza,
   striscia orizzontale sotto. La forma orizzontale era rotta -- dichiarava
   `overflow-x: auto`, ma due regole senza condizione piu' in basso lo
   riportavano a `hidden` vincendo per posizione, e delle 19 voci ne restavano
   raggiungibili 6: nessuna barra di scorrimento, nessun gesto per arrivare
   alle altre 13. Da qui la scelta di tenere il menu SEMPRE laterale.

   QUESTA SEZIONE NON CONTRASTA PIU' NIENTE, ed e' il punto: le regole che
   impilavano lo scafo sono state TOLTE dai tre blocchi che le portavano,
   invece di essere annullate da qui. Contrastarle funzionava solo finche'
   questo blocco era l'ultimo dichiarato E copriva le stesse larghezze -- e la
   seconda condizione non era vera: un blocco a `max-width: 1050px` impilava
   anche fra 981 e 1050px, dove questa media query (980) non arriva. Misurato
   su una finestra da 1024px, cioe' un tablet in orizzontale: barra alta quanto
   lo schermo a x=0 e contenuto disegnato SOTTO di lei, 86px sovrapposti a menu
   ridotto e 260 a menu aperto.

   Ora la difesa non e' una regola CSS invisibile ma un test
   (`test_nessuna_regola_impila_lo_scafo`): chi rimettesse una di quelle regole
   se lo sente dire, invece di scoprirlo da una fascia di larghezze che nessuno
   guarda. Qui resta solo cio' che il menu laterale AGGIUNGE: la forma ridotta
   e la forma che copre.
----------------------------------------------------------- */

/* Lo sfondo scurito del menu che copre e' spento di suo: solo la media query
   qui sotto lo accende. Sopra la soglia non c'e' nulla da disegnare e nulla che
   possa intercettare un clic, senza bisogno di dirlo nel codice. */

/* =========================================================
   UN GRAFICO NON PUO' USCIRE DAL PROPRIO RIQUADRO
========================================================= */

/* Chart.js scrive la larghezza in pixel sul canvas e la ricalcola solo quando
   il contenitore cambia dimensione. Senza un tetto, il canvas gia' disegnato
   TIENE APERTO il contenitore: il contenitore non si restringe piu', quindi
   Chart.js non si accorge di dover rimpicciolire e il grafico resta largo.
   Misurato sulla dashboard admin a 900px: richiudendo e riaprendo il menu il
   canvas restava a 710px e la pagina scorreva di 144px in orizzontale.
   Il ridimensionamento della FINESTRA non lo produce (li' Chart.js ridisegna):
   lo produce il pulsante del menu, che cambia lo spazio senza toccare la
   finestra -- cioe' una cosa che prima del menu richiudibile non si poteva fare.
   Il tetto e' relativo al contenitore, quindi vale a ogni larghezza e non va
   aggiornato quando cambia un riquadro. */
canvas{
    max-width: 100% !important;
}

/* =========================================================
   L'INTESTAZIONE NON PUO' ESSERE PIU' LARGA DELLO SPAZIO CHE HA
========================================================= */

/* `.page-header` e' un flex e il blocco del titolo e' un suo elemento: un
   elemento flex non si restringe sotto il proprio `min-content`, e li' il
   min-content e' la parola piu' lunga dell'h1 -- cioe' il nome dell'utente, che
   arriva dal database e non dal template. Con un nome tutto attaccato di ~16
   caratteri o piu' il blocco resta piu' largo del suo posto e la pagina scorre
   in orizzontale. Misurato: 261px in uno spazio di 218, 17px di scorrimento.

   `anywhere` e NON `break-word`: sono state provate tutte e tre le strade nel
   browser e solo questa funziona. `break-word` rompe la parola quando sborda ma
   **non riduce il min-content**, quindi l'elemento flex resta larghissimo (261px
   e 17px di scorrimento, identico a non fare niente); `min-width: 0` da solo non
   serve perche' il testo non si romperebbe comunque. Con `anywhere`: 218px e
   scorrimento zero. Andare a memoria qui produce una correzione che non corregge.

   Solo sull'h1, di proposito: e' l'unico dei tre testi del blocco che contiene un
   dato non controllato. Kicker e sottotitolo sono fissi nel template e i loro
   min-content (61 e 74px) stanno larghi.

   Niente `!important`: nessun'altra regola dichiara `overflow-wrap` su questo
   elemento, e stando in fondo al foglio vince per ordine. */
.page-header h1{
    overflow-wrap: anywhere;
}

/* =========================================================
   I GRUPPI DELLA BARRA LATERALE
========================================================= */

/* La barra porta diciannove voci tutte allo stesso livello. Questa e' la prima
   intestazione di gruppo, e raccoglie voci che avevano gia' la stessa guardia di
   ruolo: il gruppo da' un nome a cio' che era gia' insieme, non sposta permessi.

   L'elemento e' un FRATELLO dei link, mai un contenitore intorno a loro. Le
   regole della forma ridotta selezionano `.sidebar-nav > a`, cioe' i figli
   DIRETTI: avvolgere i link li farebbe uscire da quella selezione e la barra
   stretta si romperebbe sulle sole voci raggruppate. Chi aggiungera' il secondo
   gruppo tenga la stessa forma.

   L'intestazione APRE E CHIUDE il gruppo, e resta comunque un `<div>` e non un
   `<button>`: le regole generiche `button, .btn` di questo stesso foglio
   dichiarano SETTE proprieta' con `!important` -- e una seleziona anche
   `button *`, cioe' l'etichetta dentro -- quindi un pulsante vero avrebbe
   bisogno di nove dichiarazioni forzate per somigliare a un titolo. Il
   ragionamento del blocco resta percio' quello di prima, ed e' il motivo per
   cui qui non serve nessun `!important`: nessuna regola generica contende
   questa classe, e il blocco sta in fondo al foglio, quindi vince per ordine.
   Un test tiene ferma la decisione, e la ribalta da solo il giorno in cui
   quelle regole generiche smettessero di forzare. */

/* L'opacita' che sale fa da segnale che la riga si puo' premere: senza, un
   titolo che apre e chiude sarebbe indistinguibile da uno che sta li' e basta. */

/* Raggiungibile con la tastiera vuol dire che il fuoco si deve VEDERE: senza
   contorno, chi naviga a tabulazioni attraversa una riga che reagisce
   all'invio senza alcun segno di essere quella selezionata. `:focus-visible` e
   non `:focus`, cosi' il contorno non compare a chi ci arriva col mouse. */

/* Il gruppo che contiene la pagina aperta resta in evidenza anche da chiuso.
   Senza, queste sarebbero le uniche pagine dell'app in cui la barra non dice
   dove sei: la voce attiva e' li' dentro e non si vede. Lo stato lo decide il
   server (`request.endpoint`), non il browser, quindi e' gia' giusto al primo
   disegno. */

/* LA FRECCIA indica lo STATO -- chiusa a destra, aperta in giu' -- e non cosa
   fara' il pulsante: e' l'opposto della freccia che riduce la barra, dove lo
   stato si legge dalla larghezza mentre qui no.

   Ruota su `aria-expanded`, cioe' sull'attributo che quello stato lo dichiara
   gia' per chi non vede: una regola sola vale per ogni gruppo, presente e
   futuro, invece di una per nome. Niente transizione, di proposito: lo stato
   iniziale viene scritto dallo script subito dopo il disegno, e con una
   transizione la freccia girerebbe sotto gli occhi a ogni caricamento. */

/* 🔴 NON aggiungere qui `overflow: hidden` (per esempio per dei puntini di
   sospensione) senza aggiungere ANCHE `flex-shrink: 0`. La prima versione di
   questo blocco lo faceva, e l'intestazione usciva ALTA ZERO: presente nel DOM
   col suo testo, larga 224px, e invisibile.

   Il meccanismo, misurato col browser e non dedotto: il contenitore e' un
   `flex column` di altezza vincolata con diciannove voci dentro, quindi
   comprime i propri elementi; le voci resistono perche' la loro icona ha una
   dimensione propria. Il minimo automatico che proteggerebbe anche questa riga
   (`min-height: auto`) per specifica vale ZERO quando `overflow` non e'
   `visible` -- cioe' la dichiarazione scritta per troncare il testo e' la
   stessa che permette di schiacciarlo a nulla. `height` 0px con `scrollHeight`
   16, e con `flex-shrink: 1` il difetto torna identico.

   Le difese sono state TOLTE invece che compensate, e la misura dice che la
   forma nuda e' migliore: senza `overflow`, `nowrap` ed ellissi l'altezza resta
   16px, e un nome di gruppo da 38 caratteri VA A CAPO (32px) invece di essere
   troncato, con scorrimento orizzontale 0. Nella barra da 260px ci stanno 30
   caratteri: il troncamento non e' un caso che si presenta. */

/* A barra ridotta restano le sole icone, e un'etichetta di gruppo non avrebbe
   ne' spazio ne' significato: la riga sparisce del tutto invece di stringersi,
   cosi' le icone non si allontanano fra loro. Il nome di ogni voce resta
   leggibile dal riquadro al passaggio del mouse (`data-title`). */

/* =========================================================
   I GRUPPI CHE SI CHIUDONO
========================================================= */

/* UNA RIGA PER GRUPPO, ed e' l'unico punto in cui il nome compare nel foglio.
   Lo stato sta sulla radice perche' viene deciso PRIMA che il menu esista
   (script in cima a `sidebar.html`), e il CSS non sa mettere in relazione il
   valore di un attributo con quello di un altro elemento: da qui una riga per
   gruppo invece di una regola sola. Un test pretende che ogni gruppo
   dichiarato nel menu ce l'abbia, cosi' un gruppo nuovo non resta a meta'.

   🔴 `!important` E' NECESSARIO, e la misura lo dice: `.sidebar-nav a` e
   `.nav-link` dichiarano `display: flex !important` TRE volte ciascuna in
   questo foglio. Un `display: none` nudo qui non nasconderebbe niente -- e'
   la stessa forma della pillola d'esito che si vedeva pur essendo `hidden`.

   🔴 `:not(.sidebar-collapsed)` NON e' un dettaglio: a barra ridotta
   l'intestazione e' `display: none`, quindi non resta NIENTE su cui premere
   per riaprire. Senza quella condizione un gruppo chiuso renderebbe le
   proprie voci irraggiungibili -- che e' esattamente il difetto del 16
   agosto, quando tredici voci su diciannove non si potevano raggiungere in
   alcun modo. A barra ridotta il raggruppamento non esiste: le icone si
   vedono tutte. */

/* =========================================================
   I RIQUADRI DEI NUMERI DECIDONO SULLO SPAZIO, NON SULLA FINESTRA

   Una regola sola al posto di UNDICI. Prima il numero di colonne era fissato
   a 4/3/2/1 da undici dichiarazioni in tre generazioni sovrapposte, quasi
   tutte con `!important`, e vinceva l'ultima: da qui i cinque riquadri del
   mese e i sei della giornata che andavano a capo anche su uno schermo largo.

   `auto-fit` fa decidere alla griglia in base allo spazio che ha DAVVERO:
   si autocorregge quando la barra laterale si apre o si chiude -- cosa che
   nessuna media query puo' vedere, perche' guardano la finestra -- e su
   telefono impila da sola. E' la proposta A della voce §E22.

   I 145px non sono scelti a occhio: sono il PIU' GRANDE `min-content` fra le
   124 schede misurate col browser su tutte le pagine che usano questa griglia
   (il caso peggiore e' «Ruolo attuale coordinatore»). Sotto quel valore un
   testo sborderebbe dalla propria traccia; sopra, i sei riquadri della
   giornata smettono di stare su una riga sola gia' a 1280px. E' insieme il
   pavimento e l'ottimo, misurato a nove larghezze da 1920 a 390.

   ⚠️ Se un giorno una scheda porta un testo piu' lungo, questo numero va
   RIMISURATO, non aumentato a intuito: aumentarlo toglie una colonna.
========================================================= */
.metric-grid{
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

/* =========================================================
   PERFORMANCE — la sezione che non era mai stata scritta

   La pagina usava UNDICI classi dichiarate da nessuna parte (nove `perf-*`,
   inventate fra le PR 5.2 e 5.6). Per i Sinistri, due serie di PR prima, la
   sezione dedicata era stata scritta -- 55 dichiarazioni `.claim-*`; per
   Performance no, ed e' andata in produzione cosi' il 17 agosto.

   Le conseguenze non erano estetiche: le caselle dei contatori ereditavano la
   regola generica dei campi di modulo (13px di riempimento per lato, pensati
   per un campo largo 400) dentro celle larghe una cinquantina di pixel, e
   dell'area di testo non restava quasi nulla. Misurato sulla pagina vera:
   «LDV ok» aveva 12px di testo utile, cioe' UNA cifra.
========================================================= */

/* Campi affiancati. `.form-row` e `.form-group-azione` esistono solo in questa
   pagina; `.form-group` invece e' usata in altri sette template ed e' orfana
   anche li', quindi qui si tocca solo DENTRO `.form-row` -- gli altri sette
   restano esattamente come sono.

   DUE INTENZIONI DIVERSE, DUE DICHIARAZIONI DIVERSE, e non e' pignoleria:
   fin qui le decideva `align-items: flex-end` da sola, e per una riga andava
   bene e per un'altra no.
     - i CAMPI si allineano in ALTO, cosi' due colonne di altezza diversa
       partono dalla stessa riga. Serve dove una colonna porta qualcosa in
       piu': in «Mezzi fermi» la tendina ha sotto la nota «Solo i mezzi senza
       un giro», e col fondo in comune la Causale accanto scendeva di 27,7px
       (misurato, non stimato: le colonne sono alte 98,8 e 71).
     - il PULSANTE resta in BASSO, allineato al campo che gli sta accanto
       invece che appiccicato sotto. Lo dichiara `align-self`, che riguarda
       quel solo elemento.

   La correzione «ovvia» -- il solo `flex-start` senza la riga sull'azione --
   e' stata provata nel browser e SCARTATA: allinea le etichette ma fa risalire
   i tre pulsanti di 26-27px, cioe' rimette il difetto che CP1 aveva corretto. */
.form-row{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.form-row .form-group{
    flex: 1 1 240px;
    min-width: 0;
}

.form-row .form-group-azione{
    flex: 0 0 auto;
    align-self: flex-end;
}

/* I contatori della tabella a sedici colonne. Il riempimento scende da 14px a
   6px per lato e la casella non puo' essere piu' stretta di 48px: l'area di
   testo passa da 12 a 34 pixel, cioe' da una cifra a quattro. */
.performance-tabella .perf-contatore{
    width: 100%;
    min-width: 48px;
    padding: 6px 6px !important;
    min-height: 36px !important;
    text-align: center;
}

/* La colonna del pulsante «Togli» prende solo lo spazio che le serve, cosi' le
   colonne con del testo se lo dividono tutto. */
.perf-colonna-azione{
    width: 1%;
    white-space: nowrap;
}

.perf-causale{
    width: 100%;
    min-width: 150px;
    padding: 6px 10px !important;
    min-height: 36px !important;
}

.perf-modulo-fermo{
    margin-bottom: 14px;
}

.perf-esito-modulo{
    margin-top: 6px;
}

/* La percentuale di consegne, colorata. Le classi del riquadro sono quelle che
   l'applicazione dichiara GIA' (`.metric-card.success/.warning/.danger`):
   inventarne di nuove avrebbe voluto dire riscrivere lo stesso colore da capo,
   che e' il difetto che questa sezione esiste per chiudere.

   ⚠️ L'`!important` qui non e' pigrizia ed e' stato verificato nel browser, non
   dedotto: `.metric-value` e' dichiarata `color: #111827 !important` piu' su,
   quindi una regola senza `!important` non fa NIENTE per quanto sia specifica.

   ⚠️ Il bordo sinistro colorato che quei modificatori dichiarano e' inerte in
   tutta l'applicazione (scavalcato altrove): il segnale arriva dal numero.

   Le soglie NON sono qui. Stanno in `SOGLIE_CONSEGNE` dentro
   `blueprints/performance.py`, in un posto solo, e da li' arrivano anche allo
   script che riscrive il riquadro dopo una correzione in linea. */
.perf-riquadri .metric-card.success .metric-value{
    color: var(--success) !important;
}

.perf-riquadri .metric-card.warning .metric-value{
    color: var(--warning) !important;
}

.perf-riquadri .metric-card.danger .metric-value{
    color: var(--danger) !important;
    /* Senza questa riga il numero PULSA all'infinito: `.metric-card.danger
       .metric-value` dichiara un'animazione, e su una pagina che un
       coordinatore guarda tutto il giorno e' rumore. */
    animation: none;
}

/* =========================================================
   DEMO -- il banner della demo: quando scade e, coi dati finti, l'avviso di
   non inserire dati reali

   Sta qui e non in un blocco `<style>` del modello per una ragione misurata: il
   banner entra in OGNI pagina HTML, quindi un blocco inline si ripeterebbe su
   tutte -- e il repo ha gia' dei test che pretendono zero `<style>` in pagina
   (Sinistri, Performance). Le pagine che lo mostrano caricano tutte questo
   foglio (`base.html`, `login.html`), percio' nessuna resta senza stile.

   Dal ticket 151 il suo posto lo dichiarano i modelli: `base.html` lo include
   in testa al contenuto, `login.html` in testa al modulo. In cima al `<body>`
   lo mette solo la rete di `demo._aggiungi_banner`, per una pagina che non lo
   include: li' finiva sotto la barra fissa della cornice.

   In produzione queste regole sono inerti: il banner non viene mai reso,
   perche' `demo` nei modelli non esiste e l'aggancio non e' nemmeno registrato.
========================================================= */

.demo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: #fff4e5;
    border: 1px solid #ffb866;
    /* Colore esplicito: non deve ereditare quello del contenitore in cui sta
       (il contenuto della pagina, la card del login). Su questo sfondo ambrato
       un testo chiaro sparirebbe. */
    color: #8a4b00;
    font-size: 14px;
    line-height: 1.4;
}

.demo-banner-icona {
    font-size: 18px;
}

/* `html, body, body *` forza il peso a 400 con `!important`: senza questa riga
   il grassetto non si vedrebbe -- ne' quello dell'avviso sui dati reali, ne'
   quello dei giorni che restano. Un test tiene ferma la regola
   (`test_il_grassetto_del_banner_ha_la_sua_regola`); che vinca davvero lo
   misura solo il browser. */
.demo-banner strong {
    font-weight: 700 !important;
}

/* =========================================================
   LE LINGUETTE DELLA SCHEDA UTENTE
   =========================================================
   Componente NUOVO: il programma non ne aveva uno. Misurato prima di scriverlo,
   ogni corrispondenza `tab*` nel foglio e' `table-*`, `tabella`, `tablet` o
   `tabulazioni` -- nessuna e' un componente a linguette.

   Colori dai TOKEN della famiglia principale, non cablati: nel foglio il 55%
   dei colori e' scritto a mano e questo blocco non allarga quel numero. Le
   famiglie parallele `--saas-*` e `--pro-*` non si usano nel codice nuovo.

   Verificato prima di scrivere: `--panel`, `--panel-soft-2`, `--line`, `--text`
   e `--primary` sono dichiarati UNA volta sola, e mai ridefiniti in
   `marvion-light.css`. Non e' pedanteria: un token dichiarato in piu' `:root`
   vale l'ultimo, non il primo, ed e' gia' costato una larghezza di barra
   laterale letta 292px e applicata 260px.

   🔴 ZERO `!important` aggiunti, e la conseguenza va detta perche' non e'
   ovvia: `body *` forza `font-weight: 400 !important` in ENTRAMBI i fogli,
   quindi la linguetta attiva NON puo' distinguersi col grassetto. Si distingue
   con il fondo pieno e il testo invertito, che sono un segnale piu' forte del
   peso e non richiedono di aggiungere il 1.275esimo `!important` al foglio.

   `a{color:inherit}` (riga 139) non ha `!important`: una classe lo scavalca
   per specificita', senza forzature. */

.scheda-linguette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px 0;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* 44px di altezza, come i pulsanti che l'app ha gia' -- misurati nel browser,
   non dedotti: `.btn back` e `.btn edit` escono entrambi 44 con `padding: 0 17px`.
   La stessa strada (altezza minima, non riempimento verticale) invece di
   inventarne una: una linguetta piu' bassa dei pulsanti che le stanno sopra si
   nota, e soprattutto Marco il gestionale lo usa anche dal telefono, dove un
   bersaglio da 36px si sbaglia. E' il difetto che in quest'area e' gia' costato
   tre occorrenze (`class="btn"` nudo, 30px invece di 44). */
.scheda-linguetta {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 9px;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.scheda-linguetta:hover {
    background: var(--panel-soft-2);
}

/* Il bianco resta cablato perche' NON esiste un token per «testo sopra il
   colore primario»: `--panel` vale #ffffff ma nomina una superficie, e usarlo
   per un testo sarebbe una bugia semantica che si rompe il giorno in cui
   qualcuno scurisce i pannelli. Un token si aggiunge quando serve a piu' di un
   posto, non per far tornare un conteggio. */
.scheda-linguetta.attiva {
    background: var(--primary);
    color: #ffffff;
}

/* =========================================================
   IL GRAFICO DELLA PRODUTTIVITA' (linguetta «Grafico performance»)
   =========================================================
   🔴 Le serie erano DUE fino al 31/08/2026, e la seconda -- «consegnato
   puntuale» -- e' stata tolta perche' non era una misura che esiste: nasceva da
   `(ldv_ok - ldv_rit) / ldv_aff`, cioe' consegne meno RITIRI, su un campo che il
   glossario interno chiamava per errore «in ritardo». Ne resta una sola, e i
   ritiri stanno nella tabella come conteggio: sono un volume, e un volume
   sull'asse di una percentuale sarebbe un secondo asse travestito.

   ⚠️ La scelta del colore era stata VALIDATA col validatore invece che a
   occhio, e quel lavoro non si butta anche se una delle due linee non c'e' piu':
   `--primary-2` e `--primary-4` davano deutan 21,8, tritan 20,5 e visione
   normale 23,9, tutte sopra la soglia di 8, dove il blu + viola che l'istinto
   sceglieva dava deutan 0,4 -- due linee IDENTICHE per chi non distingue il
   rosso dal verde. Resta scritto qui perche' il giorno in cui una seconda serie
   tornera' davvero, il passo gia' verificato e' `--primary-4`, e non c'e' motivo
   di rifare la misura ne' di rischiare di sceglierlo a occhio.

   Nessun token nuovo e nessun !important: sono tutti token della famiglia
   principale, dichiarati una volta sola in :root. */
/* Con due figure nella stessa linguetta ognuna porta il proprio titolo: la
   legenda nomina la serie, il titolo nomina la QUANTITA'. Il margine superiore
   e' quello che stacca il secondo grafico dalla tabella del primo. */
.grafico-titolo {
    margin: 28px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.grafico-contenitore {
    /* Il grafico e' largo: su finestra stretta scorre nel PROPRIO riquadro
       invece di allargare la pagina. */
    overflow-x: auto;
    margin: 12px 0 4px;
}

/* A schermo la larghezza la decide `scheda.css` (720-900 px, ticket 130): questo
   520 vale sulla carta. */
.grafico-performance {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
}

/* Griglia e tacche: recessive. Sono un riferimento, non un dato. */
.grafico-griglia {
    stroke: var(--line);
    stroke-width: 1;
}

/* Il 100% si vede piu' della griglia perche' e' la soglia che rende leggibile
   l'anomalia, ma resta tratteggiato: non e' una serie, e' un riferimento. */
.grafico-riferimento {
    stroke: var(--line-strong);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.grafico-linea {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.grafico-linea.consegnato {
    stroke: var(--primary-2);
}

/* La seconda serie sta in un GRAFICO SUO, non accanto alla prima: il colore
   qui non porta identita' -- quella la porta il titolo sopra la figura -- e
   serve solo a non far leggere le due linee come la stessa quantita'.

   Misurato con simulazione Vienot e distanza CIEDE2000 contro --primary-2:
   --info-2 vale 21,9 in visione normale ma 14,2 in deuteranopia, appena sotto
   la soglia utile di 15. Passa invece --warning-2 con 51,2 -- ed e' scartato
   apposta: dipingerebbe di allarme un volume di lavoro che non e' ne' buono ne'
   cattivo, cioe' direbbe col colore una cosa che i dati non dicono. Il costo
   che si accetta al suo posto e' nullo per il lettore, perche' i due grafici
   non condividono mai un riquadro. */
.grafico-linea.ritiri {
    stroke: var(--info-2);
}

/* L'anello del colore del pannello stacca il punto dalla linea che lo
   attraversa, e dalla griglia quando ci cade sopra. */
.grafico-punto {
    stroke: var(--panel);
    stroke-width: 1.5;
}

.grafico-punto.consegnato {
    fill: var(--primary-2);
}

.grafico-punto.ritiri {
    fill: var(--info-2);
}

/* La giornata senza numero: grigia, quadrata, e in una striscia sotto il
   riquadro. Non e' un valore basso, e' l'assenza di un valore. */
.grafico-marcatore {
    fill: var(--text-faint);
}

/* Il testo porta i token di TESTO, mai il colore di una serie: il colore
   identifica la linea, l'etichetta la nomina. */
.grafico-etichetta {
    fill: var(--text-muted);
    font-size: 11px;
}

.grafico-etichetta.fine-riga {
    text-anchor: end;
}

.grafico-etichetta.al-centro {
    text-anchor: middle;
}

/* Con due serie la legenda c'e' SEMPRE: l'identita' non puo' stare nel solo
   colore. La terza voce nomina i marcatori grigi, che non sono una serie ma
   senza spiegazione sembrerebbero un guasto. */
.grafico-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

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

.grafico-pastiglia {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.grafico-pastiglia.consegnato {
    background: var(--primary-2);
}

.grafico-pastiglia.ritiri {
    background: var(--info-2);
}

.grafico-pastiglia.assente {
    background: var(--text-faint);
}

/* La tabella non e' un di piu': e' la lettura ESATTA dei valori che il grafico
   mostra approssimati, ed e' la via d'accesso per chi non distingue i due blu.
   Il validatore segnala il blu chiaro sotto 3:1 di contrasto e chiede
   esattamente questo come rimedio. */
.grafico-tabella {
    margin-top: 18px;
}

/* I mesi della tabella, che si aprono e si chiudono con `<details>` nativo:
   zero JavaScript, perche' le linguette di questa scheda sono link GET proprio
   per non averne. Aperto il mese piu' recente, chiusi gli altri: senza, a un
   anno di storico questa tabella stampa ~275 righe di seguito.

   La riga del mese e' un COMANDO, quindi lo dichiara: `cursor: pointer` e uno
   sfondo che la stacca dalle righe di dati. `list-style` su `summary` toglie il
   triangolino di sistema solo dove serve sostituirlo, e qui non serve: resta,
   perche' e' il segno che dice «questo si apre» senza doverlo scrivere.

   Nessun `!important` e nessun colore nuovo: tutti token della famiglia
   principale. */
.grafico-mese {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.grafico-mese > summary {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text);
    background: var(--panel-soft-2);
    border-radius: 8px;
}

/* Aperto, il riquadro del mese continua nella tabella: gli angoli tondi in
   basso apparterrebbero alla riga del titolo e taglierebbero la prima riga
   di dati. */
.grafico-mese[open] > summary {
    border-radius: 8px 8px 0 0;
}

/* La tabella dentro un mese non ripete lo stacco di `.grafico-tabella`: quello
   separa la tabella dal grafico, qui sopra c'e' gia' la riga del mese. */
.grafico-mese > .grafico-tabella {
    margin-top: 0;
}

/* ------------------------------------------------------------------
   DUE DIFETTI DI SPAZIO NELLA SCHEDA, MISURATI NEL BROWSER

   Visti da Thiago il 02/09 e misurati con `getComputedStyle` dentro il
   contenitore vero, non dedotti dall'HTML: i test rendono marcatura, non
   stile calcolato, quindi nessuno di questi due sarebbe andato rosso.

   1. IL RIQUADRO DEL REGISTRO stava a **0px** dalla griglia sopra, che
      dentro di se' ha un passo di 20px. Due gruppi diversi -- chi e' la
      persona, e cosa le e' stato cambiato -- separati da MENO spazio di
      quanto ne separi le tessere dello stesso gruppo. Il salto e' 32px,
      cioe' piu' del passo interno: e' quello che dice «qui finisce una
      cosa e ne comincia un'altra». Non un bordo colorato, che in questo
      sistema visivo significherebbe uno STATO e il registro non ne ha.

   2. NEI MODULI gli intervalli misurati erano 2,4 / 6,4 / 2,4 / 0 px,
      col pulsante appiccicato al campo e la nota a 0px dal pulsante. La
      causa radice non e' un margine mancante: `label` e' `display:
      inline`, e su un elemento in linea i margini verticali NON si
      applicano affatto -- si sarebbero potuti scrivere e non sarebbe
      cambiato niente. Quindi non si aggiungono margini: si da' al modulo
      una struttura, coppie etichetta+campo strette dentro (6px) e larghe
      fuori (18px). Il ritmo lo fa il contrasto fra i due valori, non un
      valore ripetuto.

   🔴 ZERO `!important` aggiunti, e la conseguenza va detta perche' non e'
   ovvia: il peso del carattere delle etichette resta **400**. `body *` lo
   forza in entrambi i fogli, e le tre regole che gia' dichiarano 500 o
   600 su `label` sono TUTTE inerti -- verificato nel CSSOM. Aggiungerne
   una quarta sarebbe la quarta dichiarazione senza effetto, non una
   correzione. La gerarchia qui la fanno lo spazio e il maiuscoletto che
   le etichette hanno gia'.
   ------------------------------------------------------------------ */
.scheda-registro {
    margin-top: 32px;
}

/* La tabella scorre dentro il riquadro, non fa scorrere la PAGINA. Niente
   `min-width` come in `.table-scroll`, che ne impone 780px: qui le colonne
   sono tre e su schermo largo ci stanno comode -- forzarle a 780 farebbe
   scorrere anche dove non serve. */
.scheda-tabella-scorre {
    overflow-x: auto;
}

/* Il momento e il nome NON vanno a capo: su telefono `2026-08-27 09:40:00`
   si spezzava in tre righe, che e' peggio di uno scorrimento -- il
   contenitore qui sopra scorre gia', quindi la larghezza in piu' non costa
   nulla. La terza colonna e' prosa e va a capo come deve. */
.scheda-tabella-scorre td:first-child,
.scheda-tabella-scorre th:first-child,
.scheda-tabella-scorre td:nth-child(2),
.scheda-tabella-scorre th:nth-child(2) {
    white-space: nowrap;
}

.scheda-modulo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* La coppia etichetta+campo e' UN oggetto, non due cose vicine. */
.scheda-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Senza `align-self` il pulsante si stira a tutta larghezza: in una
   colonna flex i figli valgono `stretch`, quindi diventerebbe largo come
   il modulo per il solo fatto di essere entrato in un flex. I 45px sono
   quelli che `input, select, textarea` hanno gia' in questo foglio: tre
   altezze diverse in fila (46 il menu, 45 il campo, 30 il pulsante) sono
   il difetto, non il pulsante piu' basso in se'. */
.scheda-modulo button[type="submit"] {
    align-self: flex-start;
    min-height: 45px;
    padding: 0 20px;
}

/* La nota che spiega cosa fa il modulo: appartiene al modulo, ma dopo. */
.scheda-modulo + .muted-text {
    margin-top: 18px;
}

/* IL PULSANTE NATIVO DEL CAMPO FILE.

   Nessuna regola in tutto il foglio lo toccava, e si vedeva: carattere di
   sistema e angoli vivi dentro un campo che ha Poppins e 14px di raggio.
   E' una superficie del browser, non una che abbiamo disegnato noi --
   quelle sono il posto in cui si vede se una pagina e' stata costruita o
   assemblata.

   La regola e' GLOBALE e non agganciata alla scheda di proposito: il
   difetto e' identico su tutti i campi file dell'applicazione, e curarne
   uno solo lascerebbe i vicini sbagliati accanto a quello giusto.

   Il fondo e' `--panel-soft-2` e non bianco perche' il campo che lo
   contiene E' bianco: un pulsante bianco su bianco non si vedrebbe.

   ⚠️ Le due sintassi vanno in DUE regole separate, mai in un elenco con
   la virgola: un selettore che il browser non conosce invalida l'INTERA
   regola, quindi unirle significherebbe perderle entrambe. */
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    background: var(--panel-soft-2);
    color: var(--text-soft);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 6px 14px;
    background: var(--panel-soft-2);
    color: var(--text-soft);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

input[type="file"]:hover::file-selector-button {
    background: var(--panel-soft-3);
}

/* ===========================================================================
   PRESENZE -- la griglia del mese, persone per giorni.

   UNO STILE SOLO PER TUTTE LE ASSENZE, ed e' una scelta di riservatezza e non
   di gusto: colorare la malattia diversamente dalle ferie la renderebbe
   leggibile a distanza, da chiunque passi dietro allo schermo di chi compila.
   La sigla la si legge guardando la casella, non il colore della riga.

   🔴 PERCHE' I SELETTORI SONO DOPPI E PORTANO `!important`. Non e' pigrizia:
   e' quanto serve per non essere INERTI, misurato nel browser col CSSOM e non
   dedotto dal sorgente. La prima stesura aveva le classi giuste e non si
   vedeva: tutte le caselle uscivano dello stesso colore.

   Due difese diverse battevano queste regole, e vanno superate in due modi:

     1. `tbody td` in `static/marvion-light.css` forza QUATTRO proprieta' con
        `!important` -- `background`, `color`, `border`, `text-align`. Un
        `!important` lo batte solo un altro `!important`: da qui quelli sulle
        proprieta' che devono vincere. `text-align: center` NON e' fra loro,
        perche' coincide con cio' che serve qui.

     2. `.table-scroll *` (in ENTRAMBI i fogli, `color: #111827 !important`)
        ha la stessa specificita' di una classe sola ed e' dichiarato DOPO:
        a parita' vince l'ultimo, quindi il colore del testo restava il suo.
        Per questo i selettori qui sotto sono DOPPI -- `.presenze-griglia`
        piu' la classe di stato -- che vince per specificita' e non per ordine.
        La griglia sta dentro `.table-scroll` perche' trentun colonne devono
        poter scorrere: il contenitore non e' negoziabile, la specificita' si'.

   ⚠️ La causa radice sarebbe togliere quegli `!important` dai due fogli, che
   pero' ristilerebbe OGNI tabella dell'applicazione: segnalato e non toccato.

   Il grassetto ha un terzo avversario: `html, body, body *` in questo stesso
   foglio forza `font-weight: 400 !important`. Verificato dopo la correzione:
   la sigla esce a 700.
   =========================================================================== */

/* La colonna dei nomi resta ferma mentre i giorni scorrono: con trentun
   colonne, senza di lei si perde di vista di chi sia la riga che si guarda.
   Stesso idioma delle tabelle delle Scadenze (`scadenze.css`). */
.presenze-griglia th.presenze-persona {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--panel-soft-2);
    text-align: left;
    white-space: nowrap;
    padding-right: 12px;
}

.presenze-griglia th.presenze-giorno {
    width: 26px;
    text-align: center;
    color: var(--text-muted);
    padding: 4px 0;
}

.presenze-griglia .presenze-cella {
    width: 26px;
    padding: 4px 0;
    border: 1px solid var(--line) !important;
    cursor: pointer;
}

.presenze-griglia .presenze-cella:hover {
    outline: 2px solid var(--primary-3);
}

/* 🔴 LA RIGA DELLA SCHEDA UTENTE MOSTRA E NON SCRIVE, e le caselle non
   devono sembrare cliccabili. Sulla griglia il puntatore e il contorno
   annunciano il modulo che si precompila col clic; nella linguetta
   Presenze quel modulo non esiste, e un puntatore a manina su qualcosa
   che non risponde e' una promessa non mantenuta. Le due regole stanno
   qui e non nel blocco della scheda perche' e' qui che si legge da cosa
   stanno tornando indietro. */
.presenze-griglia.presenze-sola-lettura .presenze-cella {
    cursor: default;
}

.presenze-griglia.presenze-sola-lettura .presenze-cella:hover {
    outline: none;
}

.presenze-griglia .presenze-assenza {
    background: var(--primary-soft-2) !important;
    color: var(--primary-2) !important;
    font-weight: 700 !important;
}

/* La «P» e il puntino condividono la tinta, e la gerarchia la fanno il
   grassetto e lo sfondo della sigla, non tre tinte in scala. Misurato:
   `--text-faint` sul bianco della cella dava un contrasto di 2.45, cioe' una
   «P» che si intuisce invece di leggersi. Con `--text-muted` sale a 4.55. */
.presenze-griglia .presenze-lavoro {
    color: var(--text-muted) !important;
}

/* LE TRE FORME DELLA «P», dalla piu' certa alla meno (D265, D228, D229).
   La confermata e' un dato scritto da una persona, e ha la tinta del residuo
   verde. La proposta e' la «P» del lavoro registrato in corsivo: si legge come
   una «P», e il corsivo dice che nessuno l'ha ancora scritta. La MG proposta si
   EVIDENZIA, come chiede D229: e' la sola delle tre che chiede un gesto su una
   persona, e non sulla giornata. */
.presenze-griglia .presenze-presenza {
    background: var(--success-soft) !important;
    color: var(--success-2) !important;
    font-weight: 700 !important;
}

.presenze-griglia .presenze-proposta {
    color: var(--text-muted) !important;
    font-style: italic;
}

.presenze-griglia .presenze-proposta-mg {
    background: var(--warning-soft) !important;
    color: var(--warning-2) !important;
    font-weight: 700 !important;
    font-size: 10px;
}

/* Il pulsante della conferma sta dentro una colonna da 26px, nella riga «Da
   confermare». Le regole generiche su `button` ne forzano sette proprieta' con
   `!important` (vedi la regola dei template), quindi ogni misura qui le batte
   con un `!important` suo: senza, il pulsante uscirebbe alto 44px e largo piu'
   della colonna, e la tabella si allargherebbe di trenta pulsanti. */
.presenze-griglia .presenze-conferma-giorno {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 24px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--success-2) !important;
    border-radius: 4px !important;
    background: var(--success-soft) !important;
    color: var(--success-2) !important;
    font-size: 11px !important;
    line-height: 20px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.presenze-griglia .presenze-conferma-giorno:hover,
.presenze-griglia .presenze-conferma-giorno:focus-visible {
    outline: 2px solid var(--primary-3);
}

/* Il giorno fuori forza (D504) e' grigio come quello non lavorativo: in
   nessuno dei due si lavora. Lo distingue il suggerimento della casella. */
.presenze-griglia .presenze-non-lavorativo,
.presenze-griglia .presenze-fuori-forza {
    background: var(--panel-soft-3) !important;
}

/* L'export del mese, «cessato il» e la tendina sulla casella stanno in
   `static/presenze.css` (ticket 107, D707): li usa solo la pagina Presenze. */

/* Il puntino di «da controllare»: si vede se lo si cerca, non salta agli
   occhi. Non e' un errore -- e' un giorno su cui qualcuno deve decidere. */
.presenze-griglia .presenze-da-controllare {
    color: var(--text-muted) !important;
}

.presenze-mezza {
    font-size: 10px;
    vertical-align: super;
}

.presenze-griglia .presenze-conteggio {
    width: 26px;
    text-align: center;
    color: var(--text-soft) !important;
    padding: 4px 0;
}

/* Le due colonne del residuo, in fondo a destra. Selettori DOPPI come tutto il
   resto di questo cartiglio: `.table-scroll *` forza il colore del testo con
   `!important` da entrambi i fogli, e a parita' di specificita' vincerebbe
   l'ultimo dichiarato. Il perche' per esteso e' scritto in cima al cartiglio. */
.presenze-griglia th.presenze-saldo-testata {
    text-align: right;
    color: var(--text-muted);
    padding: 4px 6px;
}

.presenze-griglia .presenze-saldo {
    text-align: right;
    padding: 4px 6px;
    border-left: 1px solid var(--line) !important;
}

/* 🔴 LE DUE COLONNE RESTANO FERME A DESTRA, e non e' una rifinitura: senza,
   dopo trenta colonne di giorni finiscono OLTRE il bordo del contenitore e non
   le vede nessuno. Misurato nel browser prima della cura: su una finestra da
   1440 la colonna «Ferie» cominciava a 1405, e con un mese di 31 giorni
   sparirebbe del tutto. Il difetto non si vedeva dai test -- che leggono
   l'HTML, dove le celle ci sono -- ne' da una sonda sul `body`, che NON scorre:
   a scorrere e' `.table-scroll`.

   Stesso idioma di `th.presenze-persona`, che resta ferma a sinistra, con la
   larghezza dichiarata perche' la prima delle due deve sapere quanto e' larga
   la seconda per starle accanto.

   ⚠️ LA LARGHEZZA DEVE CONTENERE L'INTESTAZIONE, o l'aggancio mente. Fino al
   19/09 era 62px, ma «PERMESSI» in maiuscoletto rende la colonna larga 73: la
   tabella allarga la cella, `right` resta 62, e a inizio scorrimento Ferie
   copriva 11px di Permessi -- l'unita' «gg» usciva tagliata. Misurato nel
   browser a 1440, identico col testo di prima e senza celle unite: c'era gia'
   dal ticket 29. Chi cambia l'intestazione rimisuri qui. */
.presenze-griglia .presenze-saldo,
.presenze-griglia th.presenze-saldo-testata {
    position: sticky;
    z-index: 2;
    width: 76px;
    min-width: 76px;
    /* Opaco: sotto ci scorrono le caselle dei giorni, e una cella trasparente
       le lascerebbe leggere attraverso il numero. I due colori qui sotto
       vincono su questo, e sono opachi a loro volta. */
    background-color: var(--panel-soft-2);
}

.presenze-griglia .presenze-saldo-primo {
    right: 76px;
}

.presenze-griglia .presenze-saldo-secondo {
    right: 0;
}

/* 🔴 SU SCHERMO STRETTO LE DUE COLONNE TORNANO A SCORRERE, e non e' una
   rifinitura: misurato a 390px, il contenitore della tabella e' largo 238px
   mentre la colonna dei nomi ne prende 132 e i due saldi 131 -- piu' del
   contenitore intero. Restando ferme si sovrapporrebbero fra loro e non
   lascerebbero UN SOLO pixel alle caselle dei giorni, che sono il motivo per
   cui la pagina esiste. Dal telefono si scorre fino in fondo e si trovano li',
   che e' come stavano prima di essere rese ferme.
   900px e' una soglia gia' usata da questo foglio, non una nuova. */
@media (max-width: 900px) {
    .presenze-griglia .presenze-saldo,
    .presenze-griglia th.presenze-saldo-testata {
        position: static;
    }
}

/* Chi non ha un residuo -- saldo dell'anno non inserito, o una data di
   cessazione: due colonne in una, e il testo va a capo invece di allargare la
   colonna -- il resto della frase sta nel suggerimento. */
.presenze-griglia .presenze-saldo-senza-numero {
    width: 152px;
    min-width: 152px;
    text-align: right;
    white-space: normal;
    line-height: 1.15;
    color: var(--text-muted) !important;
}

/* Verde e rosso sono SFONDI tenui e non solo testo colorato: la colonna si
   legge di scorcio, e un rosso su bianco a dodici pixel si perde. Il testo
   resta scuro perche' e' un numero da leggere, non un'etichetta.

   ⚠️ I DUE COLORI VALGONO ANCHE FUORI DALLA GRIGLIA: la linguetta Presenze
   della scheda utente mostra gli stessi residui in una tabella normale, e
   una soglia che colorasse in un posto e non nell'altro direbbe due cose
   diverse sullo stesso numero. Si ESTENDE il selettore invece di ricopiare
   le tinte: due copie della stessa regola divergono, e nessun test lo vede. */
.presenze-griglia .presenze-saldo-verde,
.grafico-tabella .presenze-saldo-verde {
    background: var(--success-soft) !important;
    color: var(--success-2) !important;
    font-weight: 700 !important;
}

.presenze-griglia .presenze-saldo-rosso,
.grafico-tabella .presenze-saldo-rosso {
    background: var(--danger-soft) !important;
    color: var(--danger-2) !important;
    font-weight: 700 !important;
}

/* L'unita' accanto al numero: si vede, ma non compete col numero. */
.presenze-unita {
    font-size: 10px;
    color: var(--text-muted) !important;
    margin-left: 2px;
}

/* Il residuo A OGGI sotto quello dopo le pianificate (D278): una riga sua,
   piccola, dentro la stessa casella, cosi' la griglia resta a due colonne.

   Niente `nowrap`: le due colonne sono incollate a destra su una larghezza
   FISSA (sopra), e una riga che non puo' andare a capo allargherebbe la
   colonna oltre il suo aggancio. */
.presenze-saldo-oggi {
    display: block;
    font-size: 10px;
    line-height: 1.15;
    color: var(--text-muted) !important;
}

/* =========================================================
   LA STAMPA (ticket 43, D179-D200)
   =========================================================
   Fino al 14/09/2026 il repository non aveva una sola regola di stampa: `Ctrl+P`
   mandava in carta il layout dello schermo -- la barra laterale, una linguetta su
   sette, i giorni del mese tagliati dal contenitore che scorre, e il grigio dei
   giorni non lavorativi sparito, perche' i browser non stampano gli sfondi.

   🔴 OGNI SELETTORE DI STAMPA PARTE DA `html body`, e non per stile. Questo foglio
   ha piu' di mille `!important`, e `marvion-light.css` si carica DOPO di lui: a
   parita' di importanza vince la specificita', poi l'ordine. Una regola di stampa
   con la sola classe perderebbe contro un `!important` dello schermo e sembrerebbe
   scritta senza fare niente -- ed e' cosi' che e' morto il tema scuro. Che ogni
   proprieta' cambi DAVVERO fra schermo e stampa lo misura la sonda sul PDF
   (`.scratch/design-partner/stampa-43/`), non pytest.
   ========================================================================= */

/* Cio' che esiste solo sul foglio: l'intestazione di ogni sezione e la riga
   della legenda del `/` (D198, D199). */
.solo-stampa {
    display: none;
}

/* La riga dei comandi sotto la barra delle linguette (D194): a destra, e va a
   capo da sola sul telefono. Nel fascicolo il selettore del mese sta a sinistra. */
.scheda-comandi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 16px 0;
}

.scheda-comandi-mese {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

@media print {
    /* A4 verticale (D182), e il numero di pagina nel margine (D191): dove il
       browser non conosce i riquadri del margine, il numero manca e basta. */
    @page {
        size: A4 portrait;
        margin: 12mm 12mm 16mm 12mm;

        @bottom-right {
            content: "Pagina " counter(page) " di " counter(pages);
            font-size: 9pt;
        }
    }

    /* Cio' che sul foglio non serve (D181, D188, D199). I collegamenti dentro le
       sezioni della scheda sono tutti COMANDI («Apri», «Modifica»): se ne nasce uno
       che porta contenuto, va escluso da questa regola, o sparisce dalla carta. */
    html body .sidebar,
    html body .sidebar-backdrop,
    html body .page-header-actions,
    html body .solo-schermo,
    html body .alert-box,
    html body .scheda-linguette,
    html body .scheda-comandi,
    html body .scheda-sezione form,
    html body .scheda-sezione .form-box,
    html body .scheda-sezione a,
    html body .scheda-sezione details.scheda-aggiungi,
    html body .scheda-sezione .btn,
    html body .scheda-sezione button {
        display: none !important;
    }

    html body .solo-stampa {
        display: block !important;
        /* compare al momento della stampa: un'animazione d'entrata
           ripartirebbe da zero, e il foglio la fotografa a opacita' 0 */
        animation: none !important;
    }

    html body .main-content {
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    /* Cio' che a schermo scorre, su carta non scorre: si taglierebbe. */
    html body .table-scroll {
        overflow: visible !important;
    }

    html body .table-scroll table {
        min-width: 0 !important;
    }

    /* ...e le testate vanno a capo: `thead th` e' `nowrap` per lo schermo, dove la
       tabella scorre; sulla carta una testata che non va a capo allarga la tabella
       oltre il suo riquadro, che la taglia (Banca ore: 772 px contro 623). Una
       tabella che ci sta resta com'era: il layout automatico va a capo solo se serve. */
    html body thead th {
        white-space: normal !important;
    }

    /* Nel fascicolo ogni sezione comincia su un foglio nuovo (D190). */
    html body .scheda-sezione + .scheda-sezione {
        break-before: page;
    }

    /* I BOX NON SI TAGLIANO A META' (Thiago, 16/09, guardando i PDF). Un box
       interno -- il riquadro di un elenco vuoto, una tabella, una riga -- entra
       in un foglio intero o va al foglio dopo. La card della sezione invece e'
       spesso piu' alta di un foglio: quella si divide, ma ogni pezzo si chiude
       col suo bordo (`box-decoration-break: clone`) invece di finire tagliato.
       Il `clone` serve anche a Firefox, che senza sposta al foglio dopo la card
       intera quando a sporgere e' SOLO il suo padding in fondo (misurato il
       15/09 su Firefox 155: la linguetta Presenze lasciava vuoto il 70% del
       primo foglio). */
    html body .scheda-sezione .status-detail-card,
    html body .scheda-sezione .empty-state-pro,
    html body .scheda-sezione table {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    html body .scheda-sezione .empty-state-pro,
    html body .scheda-sezione tr {
        break-inside: avoid;
    }

    /* Un titolo non resta solo in fondo al foglio: scende col suo contenuto. */
    html body .scheda-sezione .status-detail-header,
    html body .intestazione-stampa {
        break-after: avoid;
    }

    /* Lo stacco fra un box e il titolo che lo segue: `.status-detail-header` ha
       solo il margine sotto, e sul foglio i titoli si appoggiavano al box sopra. */
    html body .scheda-sezione .status-detail-header {
        margin-top: 26px;
    }

    html body .scheda-sezione .status-detail-card > .status-detail-header:first-child {
        margin-top: 0;
    }

    html body .intestazione-stampa {
        margin: 0 0 10px 0;
        font-size: 10pt;
    }

    /* IL MESE, sulla linguetta della scheda (A4 verticale, D182) e sulla pagina
       Presenze (A4 orizzontale, D433): le colonne dei giorni si dividono la
       larghezza utile invece di tenere i 26 px dello schermo, che non ci stanno. */
    html body .presenze-griglia {
        width: 100% !important;
        table-layout: fixed;
        font-size: 9px;
    }

    html body .presenze-griglia th.presenze-giorno,
    html body .presenze-griglia .presenze-cella,
    html body .presenze-griglia .presenze-conteggio {
        width: auto !important;
        padding: 3px 0 !important;
    }

    /* IL COLORE E' IL SIGNIFICATO (D183): a colori il grigio si stampa davvero,
       e in bianco e nero lo sostituisce il `/`, che nessuna sigla di D64 contiene. */
    html body .presenze-griglia .presenze-cella {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html body .presenze-griglia .presenze-non-lavorativo::after,
    html body .presenze-griglia .presenze-fuori-forza::after {
        content: "/";
    }

    /* LE SETTE PAGINE CURATE (D431-D436). Cio' che sulla carta non serve porta
       `solo-schermo` nel template, a mano: una regola larga su moduli e pulsanti
       toglierebbe anche i dati che stanno nei campi -- la riga «Da confermare» delle
       Presenze, i contatori di Performance -- e la stampa delle altre pagine. */

    /* Un grafico, una card di metriche o un riquadro di filiale entra in un foglio
       intero o va al foglio dopo (D435): spezzato, un grafico non si legge. */
    html body .chart-box,
    html body .metric-card,
    html body .admin-branch-card {
        break-inside: avoid;
    }

    /* I CAMPI CHE PORTANO DATI si stampano come testo (D434): il numero del
       contatore, la causale scelta, il numero delle presenze da confermare. */
    html body .performance-tabella .perf-contatore,
    html body select.perf-causale,
    html body .presenze-griglia .presenze-conferma-giorno {
        -webkit-appearance: none;
        appearance: none;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        width: auto !important;
        max-width: 7ch !important;
        font-size: inherit !important;
        color: inherit !important;
        text-align: center;
    }

    html body select.perf-causale {
        max-width: none !important;
        text-align: left;
    }

    /* LE PAGINE LARGHE SU A4 ORIZZONTALE, misurato. Presenze (D433): il nome,
       trentuno giorni e i due saldi sono 34 colonne, e in verticale si tagliavano
       al giorno 22. Performance (D434): 16 colonne, 1.184 px contro i 623 del
       foglio verticale. Affidamento col giorno aperto (D437): 18 colonne, 1.595 px.
       La pagina nominata vale per tutta la pagina che porta la classe; margini e
       numero di pagina li prende dalla regola `@page` di sopra. */
    @page orizzontale {
        size: A4 landscape;
    }

    html body .stampa-orizzontale {
        page: orizzontale;
    }

    /* Anche in orizzontale le due tabelle entrano solo strette: testo a 8 px, celle
       a 2 px, e i pannelli annidati degli affidamenti senza imbottitura (misurato:
       982 px su 982, la tabella del giorno 942 su 942). */
    html body .stampa-orizzontale .filiali-table,
    html body .stampa-orizzontale .filiali-table th,
    html body .stampa-orizzontale .filiali-table td,
    html body .stampa-giorno-aperto th,
    html body .stampa-giorno-aperto td {
        font-size: 8px !important;
    }

    html body .stampa-orizzontale .filiali-table th,
    html body .stampa-orizzontale .filiali-table td,
    html body .stampa-giorno-aperto th,
    html body .stampa-giorno-aperto td {
        padding: 3px 2px !important;
    }

    html body .stampa-orizzontale .filiali-table .details-panel {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Sulla carta non scorre niente: le colonne ferme dello schermo tornano al
       loro posto nella tabella. */
    html body .stampa-orizzontale .presenze-griglia th.presenze-persona,
    html body .stampa-orizzontale .presenze-griglia .presenze-saldo,
    html body .stampa-orizzontale .presenze-griglia th.presenze-saldo-testata {
        position: static;
    }

    html body .stampa-orizzontale .presenze-griglia th.presenze-persona {
        width: 26mm;
        white-space: normal;
    }

    html body .stampa-orizzontale .presenze-griglia .presenze-saldo,
    html body .stampa-orizzontale .presenze-griglia th.presenze-saldo-testata {
        width: 17mm;
        min-width: 0;
        padding: 2px 3px !important;
    }

    /* AFFIDAMENTO: il giorno aperto sta in cima, nel riquadro che il JS riempie
       al clic; dentro l'elenco dei mesi non si stampa. Senza giorni aperti il
       riquadro e' vuoto e non esce. */
    html body .stampa-orizzontale tr[id^="details-aff-day-"],
    html body .stampa-giorno-aperto:empty {
        display: none !important;
    }

    /* UN GRAFICO SI RIMPICCIOLISCE IN PROPORZIONE. `canvas { max-width: 100% }`
       lo stringe alla larghezza del foglio, ma l'altezza resta quella che Chart.js
       ha scritto sul canvas per lo schermo: la ciambella diventava un ovale e le
       scritte si schiacciavano. Con l'altezza automatica il canvas segue la
       proporzione del suo disegno. */
    html body canvas {
        height: auto !important;
    }

    /* Un riquadro piu' alto di un foglio si chiude col suo bordo a fine foglio e
       si riapre nel successivo, con le testate della tabella ripetute: e' la
       regola della scheda utente (43), qui per Flotta veicoli e Costi flotta.
       Le caselle e le sezioni del dettaglio di un mezzo non si spezzano. */
    html body .table-box,
    html body .section-block,
    html body .details-panel {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    html body .details-item,
    html body .details-section {
        break-inside: avoid;
    }

    /* ...e il pezzo che si riapre ha un bordo che si vede, come quello che si
       chiude. Il bordo dei riquadri e' `--line`, quasi bianco sulla carta: la
       chiusura in fondo al foglio la disegnava l'ombra, spostata in basso, che in
       cima non c'e' e sotto il riquadro lascia una fascia grigia tagliata. Sulla
       carta questi riquadri non hanno ombra e prendono `--line-strong`. Le card
       dei numeri e dei grafici non si spezzano e restano come sono. */
    html body .table-box,
    html body .details-panel,
    html body .details-panel.compact-vehicle,
    html body .scheda-sezione .status-detail-card {
        box-shadow: none !important;
        border-color: var(--line-strong) !important;
    }

    /* Un riquadro `stampa-intera` va intero al foglio dopo invece di spezzarsi.
       La classe la mette a mano il template, sui riquadri che stanno di norma in
       un foglio (Performance, Banca ore): su Flotta veicoli e Affidamento il
       riquadro e' piu' alto di un foglio, e intero lascerebbe vuoto il primo.
       Uno piu' alto di un foglio va a capo e si divide lo stesso. */
    html body .stampa-intera {
        break-inside: avoid;
    }

    /* SULLA CARTA IL PUNTATORE NON C'E'. Dopo il clic che apre una riga il
       puntatore resta sul riquadro, e il browser stampa anche lo stato `:hover`:
       `.table-box:hover` solleva il riquadro di 2 px, e il pezzo che si riapre in
       cima a un foglio lasciava la riga del bordo in fondo al foglio prima. Vale per
       ogni regola `:hover` che sposta un box (riquadri, card, righe, pulsanti):
       nessuno si sposta e niente si anima nel passaggio alla stampa. `:root` pesa
       una classe e serve a battere `.cost-card-link:hover`, che ha `!important`. */
    :root body :hover {
        transform: none !important;
        transition: none !important;
    }

}

/* =========================================================
   NOTIFICHE (ticket 95): il riquadro delle segnalazioni dall'app,
   reso da `_riquadro_notifiche.html` su ogni pagina con la barra.
   Sta qui e non nel pezzo: le pagine curate non portano stile nel
   corpo, e `style.css` e' l'unico foglio che tutte caricano.
   ========================================================= */
#notifiche {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    width: min(360px, calc(100vw - 32px));
    color: var(--text);
}
#notifiche[hidden],
#notifiche [hidden] {
    display: none !important;
}
#notifiche .notifiche-riquadro {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
#notifiche .notifiche-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
/* `html, body, body *` forza il peso 400 con `!important`: senza il suo,
   il grassetto qui sarebbe inerte. */
#notifiche .notifiche-titolo {
    font-size: 14px;
    font-weight: 600 !important;
}
#notifiche .notifiche-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}
#notifiche .notifiche-elenco li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}
#notifiche .notifiche-elenco a {
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}
#notifiche .notifiche-elenco a:hover {
    text-decoration: underline;
}
#notifiche .notifiche-alta {
    color: var(--danger);
    font-weight: 600 !important;
}
#notifiche .notifiche-ora {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
/* I `button` escono blu, bianchi e imbottiti da tre regole globali con
   `!important`: qui l'id le batte dove non servono. */
#notifiche button.notifiche-chiudi,
#notifiche button.notifiche-riduci {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1;
}
#notifiche button.notifiche-chiudi:hover,
#notifiche button.notifiche-riduci:hover {
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}
#notifiche button.notifiche-windows {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px;
}
#notifiche button.notifiche-linguetta {
    margin-left: auto;
    display: block;
    box-shadow: var(--shadow-lg);
}
/* Ridotto, la scatola si stringe alla linguetta: larga come il riquadro e
   trasparente, prendeva i clic della pagina a sinistra della linguetta. */
#notifiche.notifiche-ridotte {
    width: auto;
}
/* Una notifica non ancora vista a riquadro aperto accende la linguetta,
   invece di aprire il riquadro sopra la pagina (D606). */
#notifiche button.notifiche-linguetta.notifiche-novita {
    background: var(--warning-2) !important;
    border-color: var(--warning-2) !important;
}
/* Fisso in basso a destra, sul foglio finirebbe sopra la pagina stampata. */
@media print {
    #notifiche {
        display: none !important;
    }
}

/* ---- da marvion-light.css ---- */
/* =========================================================
   MARVION LIGHT THEME - FINAL CLEAN
========================================================= */

.main-content{
    padding:30px 34px !important;
    background:transparent !important;
}

/* SIDEBAR */
.sidebar{
    background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%) !important;
    border-right:1px solid #dbe4f0 !important;
    color:#0f172a !important;
}

.page-kicker{
    color:#2563eb !important;
    font-weight:500 !important;
}

/* CARD GENERALI */
.metric-card,
.chart-box,
.section-block,
.table-box,
.form-box,
.admin-branch-card,
.admin-expiry-card,
.vehicle-status-summary,
.status-kpi-card{
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:22px !important;
    box-shadow:0 14px 32px rgba(15,23,42,.07) !important;
    color:#0f172a !important;
}

/* KPI */
.metric-card{
    min-height:115px !important;
    padding:20px !important;
}

.metric-value{
    color:#0f172a !important;
    font-size:20px !important;
    font-weight:500 !important;
}

.metric-note{
    color:#64748b !important;
}

/* DASHBOARD GRANDI */

.chart-grid,
.admin-overview-grid{
    gap:24px !important;
    margin-top:24px !important;
    margin-bottom:28px !important;
}

/* TABELLE */
.table-box{
    padding:24px !important;
}

thead th{
    background:#f1f5f9 !important;
    color:#64748b !important;
    border:none !important;
    text-align:center !important;
}

tbody tr{
    background:#ffffff !important;
}

tbody td{
    background:#f8fafc !important;
    color:#334155 !important;
    border:none !important;
    text-align:center !important;
}

/* RESPONSIVE */

/* =========================================================
   MARVION LIGHT - FIX PULIZIA DASHBOARD
========================================================= */

/* Rimuove grassetto eccessivo */
/* Ticket 114: l'unica regola dell'eredita' non intatta. Il login non caricava
   marvion-light.css, e qui portava i suoi campi da 300 a 400 (login_larghezze.js,
   25 condizioni su 25). `:where` non pesa: sulle altre pagine la cascata e' quella
   di prima. */
body:where(:not(.login-body)),
body:where(:not(.login-body)) *{
    font-weight: 400 !important;
}

.metric-value,
.fleet-cost-value,
.vehicle-status-total-value,
.admin-expiry-value{
    font-weight: 500 !important;
}

/* Rimuove doppio sfondo */
.section-block{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Spazi più puliti */
.chart-grid,
.admin-overview-grid{
    gap: 18px !important;
    margin-top: 18px !important;
}

.chart-box{
    padding: 22px !important;
}

/* Stato generale flotta */

/* Grafico donut */

/* Scadenze */
.admin-scadenze-box{
    padding: 22px !important;
}

.metric-note,
.chart-legend-note,
.section-subtitle,
.subtitle{
    font-weight: 300 !important;
    color: #64748b !important;
}

/* Filiali: meno “sbiadite” */

/* Responsive */

/* =========================================================
   HOVER CLEAN - NO BLOCCO BIANCO
========================================================= */

.cost-card-link:hover .metric-card,
.cost-card-link:hover .fleet-cost-hero,
.metric-link:hover,
.metric-card:hover,
.fleet-cost-hero:hover{
    transform: none !important;
    box-shadow: 0 14px 32px rgba(15,23,42,.07) !important;
    background: #ffffff !important;
}

.metric-card::after,
.fleet-cost-hero::after,
.btn::after,
button::after{
    display: none !important;
    content: none !important;
}

/* FILIALI ACCORDION FIX */

/* scheda chiusa più compatta */

/* evita altezza eccessiva quando chiusa */

/* =========================================================
   MARVION COMPACT LAYOUT FIX
========================================================= */

.main-content{
    padding: 22px 26px !important;
}

.subtitle,
.section-subtitle{
    font-size: 12px !important;
}

.section-block{
    margin-top: 18px !important;
}

.metric-value{
    font-size: 22px !important;
}

.metric-note{
    font-size: 11px !important;
}

/* CEO */

/* Stato + scadenze */

.chart-box{
    padding: 18px !important;
    border-radius: 20px !important;
}

/* Scadenze */

/* Filiali più compatte */

/* responsive */

/* TESTI KPI STATO FLOTTA */

/* =========================================================
   FIX DEFINITIVO DETTAGLIO VEICOLI
   prende details-panel, costi, documenti, foto
========================================================= */

.details-panel,
.details-panel *,
.vehicle-cost-form,
.vehicle-cost-form *,
.doc-links,
.doc-links *,
.doc-link,
.file-link,
.photo-grid,
.photo-grid *,
.photo-card,
.photo-card *,
.table-scroll,
.table-scroll *{
    color: #111827 !important;
    opacity: 1 !important;
}

/* titoli sezione sbiaditi */
.details-section h3,
.details-section,
.details-section *,
.form-section-title{
    color: #111827 !important;
    opacity: 1 !important;
}

/* form costo veicolo: via sfondo nero */
.vehicle-cost-form,
.cost-premium-box{
    background: #ffffff !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}

/* label del form */
.vehicle-cost-form label,
.cost-premium-box label{
    color: #334155 !important;
    opacity: 1 !important;
}

/* input leggibili */
.vehicle-cost-form input,
.vehicle-cost-form select,
.vehicle-cost-form textarea,
.cost-premium-box input,
.cost-premium-box select,
.cost-premium-box textarea{
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    opacity: 1 !important;
}

/* placeholder leggibile */
.vehicle-cost-form input::placeholder,
.vehicle-cost-form textarea::placeholder,
.cost-premium-box input::placeholder,
.cost-premium-box textarea::placeholder{
    color: #64748b !important;
    opacity: 1 !important;
}

/* bottoni documenti */
.doc-link,
.file-link{
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #1d4ed8 !important;
}

/* foto veicolo */
.photo-card span,
.vehicle-photo-label{
    color: #111827 !important;
    opacity: 1 !important;
}
/* ---- fine dell'eredita' ---- */

:root {
    /* fondo, superfici, bordi: un neutro freddo e chiaro, la carta e' bianca */
    --m-fondo: #f3f5f9;
    --m-superficie: #ffffff;
    --m-superficie-2: #f7f9fc;
    --m-bordo: #e3e8ef;
    --m-bordo-forte: #cfd7e3;

    /* testo */
    --m-testo: #0f172a;
    --m-testo-2: #3d4b60;
    --m-testo-3: #64748b;

    /* l'accento: il blu dei mockup, solo per azioni, selezione e stato */
    --m-accento: #1d5fe0;
    --m-accento-forte: #164bb4;
    --m-accento-tenue: #e9f0fd;

    /* stati */
    --m-ok: #15803d;
    --m-ok-tenue: #e7f6ec;
    --m-attenzione: #b45309;
    --m-attenzione-tenue: #fdf3e2;
    --m-errore: #b91c1c;
    --m-errore-tenue: #fdeceb;

    /* forme e profondita' */
    --m-raggio: 12px;
    --m-raggio-piccolo: 8px;
    --m-ombra: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.05);
    --m-ombra-alta: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);

    /* la barra */
    --barra-chiusa: 72px;
    --barra-aperta: 300px;      /* «Tracciamento GPS» con la pillola «in arrivo» ci sta intero */
    --barra-telefono: 56px;
    --m-anima: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* la barra aperta: a 0,9 si leggeva bianca piena. Il vetro sfoca e basta: una
       saturazione ravvivava un bottone blu sotto la barra fino a sembrare uno stato */
    --m-vetro: rgba(255, 255, 255, 0.82);

    /* il carattere: Figtree ha le cifre a larghezza fissa, Poppins no (ticket 113) */
    --m-carattere: "Figtree", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================================================================
   LA BARRA (D624, D630, D644)
   La colonna sta FUORI dal flusso (`position: fixed`) e lo spazio per lei lo
   tiene `.app-shell`, sempre uguale: aprirla non sposta ne' stringe la pagina.
   ========================================================================= */

html body .app-shell {
    display: block !important;
    padding-left: var(--barra-chiusa);
}

.barra {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 900;
    width: var(--barra-chiusa);
    display: flex;
    flex-direction: column;
    background: var(--m-superficie);
    border-right: 1px solid var(--m-bordo);
    overflow: hidden;
    transition: width var(--m-anima), box-shadow var(--m-anima), background-color var(--m-anima);
}

/* Aperta: col mouse sopra (dopo un attimo, cosi' attraversarla non la apre),
   col fuoco dentro, o dallo stato dei tocchi. Lo sfondo in trasparenza (D624). */
@media (hover: hover) {
    .barra:hover { transition-delay: 90ms; }
    .barra:hover,
    .barra:focus-within {
        width: var(--barra-aperta);
        background: var(--m-vetro);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: var(--m-ombra-alta);
    }
}
@media (hover: none) and (min-width: 768px) {
    html.barra-aperta .barra,
    .barra:focus-within {
        width: var(--barra-aperta);
        background: var(--m-vetro);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: var(--m-ombra-alta);
    }
}

.barra-marchio {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 16px;
    flex: 0 0 auto;
    text-decoration: none !important;
    color: var(--m-testo) !important;
    border-bottom: 1px solid var(--m-bordo);
}
/* Il solo marchio (furgone e segnaposto), senza la scritta del logo: intero,
   36x36 diventava una macchia. Largo 40 e centrato sull'asse delle icone (36). */
.barra-marchio-logo {
    width: 40px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 40px;
}
html body .barra .barra-marchio-nome {
    font-weight: 600 !important;
    font-size: 15px;
    letter-spacing: -0.01em !important;
}

.barra-nav {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-bordo-forte) transparent;
    /* Se sotto c'e' altro, un'ombra sul bordo basso lo dice. L'ombra (`scroll`)
       resta ferma sul bordo; la copertura (`local`) scorre col contenuto e la
       nasconde solo arrivati in fondo. Niente script: nessuna misura da tenere
       aggiornata quando un gruppo si apre o la finestra cambia. */
    background:
        linear-gradient(rgba(255, 255, 255, 0), var(--m-superficie) 70%) bottom / 100% 32px no-repeat local,
        radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) bottom / 100% 12px no-repeat scroll;
}

.barra-voce,
.barra-gruppo-titolo,
.barra-utente {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 38px;
    margin: 1px 12px;
    padding: 0 12px;
    border-radius: var(--m-raggio-piccolo);
    color: var(--m-testo-2) !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.barra-voce:hover,
.barra-gruppo-titolo:hover {
    background: var(--m-superficie-2);
    color: var(--m-testo) !important;
}
.barra-voce[aria-current="page"] {
    background: var(--m-accento-tenue);
    color: var(--m-accento) !important;
}
html body .barra .barra-voce[aria-current="page"] .barra-etichetta {
    font-weight: 600 !important;
}
.barra-voce:focus-visible,
.barra-gruppo-titolo:focus-visible,
.barra-marchio:focus-visible {
    outline: 2px solid var(--m-accento);
    outline-offset: -2px;
}

.barra-icona {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.barra-icona svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Le etichette esistono sempre (chi non vede le legge anche a barra chiusa):
   a barra chiusa sono trasparenti e fuori dalla colonna, che le taglia. */
.barra-etichetta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    opacity: 0;
    transition: opacity 120ms ease;
}
@media (hover: hover) {
    .barra:hover .barra-etichetta,
    .barra:focus-within .barra-etichetta,
    .barra:hover .barra-gruppo-freccia,
    .barra:focus-within .barra-gruppo-freccia,
    .barra:hover .barra-in-arrivo,
    .barra:focus-within .barra-in-arrivo { opacity: 1; }
}
html.barra-aperta .barra .barra-etichetta,
html.barra-aperta .barra .barra-gruppo-freccia,
html.barra-aperta .barra .barra-in-arrivo,
.barra:focus-within .barra-etichetta,
.barra:focus-within .barra-gruppo-freccia,
.barra:focus-within .barra-in-arrivo { opacity: 1; }

/* I gruppi: una riga di titolo sopra le sue voci, separata dalla precedente. */
.barra-gruppo {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--m-bordo);
}
/* Colori scuri anche per i titoli: sopra il vetro, dietro un bottone blu il fondo
   scende a (216, 230, 255), e il grigio chiaro li' si leggeva a 3,8 su 4,5. */
.barra-gruppo-titolo {
    color: var(--m-testo-2) !important;
}
/* Stesso colore delle voci (il contrasto), ma in maiuscolo piccolo e spaziato:
   si leggono come l'intestazione del gruppo, non come una voce in grassetto. */
html body .barra .barra-gruppo-titolo .barra-etichetta {
    font-size: 11.5px;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
}
.barra-gruppo-titolo[data-attivo] { color: var(--m-accento-forte) !important; }
.barra-gruppo-freccia {
    margin-left: auto;
    display: inline-flex;
    opacity: 0;
    transition: opacity 120ms ease, transform var(--m-anima);
}
.barra-gruppo-freccia svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.barra-gruppo-titolo[aria-expanded="false"] .barra-gruppo-freccia { transform: rotate(-90deg); }

.barra-in-arrivo {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--m-attenzione-tenue);
    color: var(--m-attenzione);
    font-size: 11px;
    opacity: 0;
}

.barra-piede {
    flex: 0 0 auto;
    padding: 8px 0 12px;
    border-top: 1px solid var(--m-bordo);
}
.barra-utente { cursor: default; color: var(--m-testo) !important; height: auto; min-height: 44px; }
.barra-utente:hover { background: none; }
.barra-utente .barra-etichetta { display: flex; flex-direction: column; line-height: 1.25; }
html body .barra .barra-utente-nome { font-weight: 600 !important; font-size: 13.5px; }
.barra-utente-ruolo { font-size: 12px; color: var(--m-testo-3); }
.barra-esci:hover { background: var(--m-errore-tenue); color: var(--m-errore) !important; }

/* La striscia del telefono e lo sfondo: spenti finche' la finestra e' larga. */
.barra-telefono,
.barra-sfondo { display: none; }

/* ---- IL TELEFONO (D630): niente colonna; il ☰ apre il menu a tutta altezza,
   che scorre per conto suo e si chiude toccando fuori. -------------------- */
@media (max-width: 767px) {
    html body .app-shell { padding-left: 0; padding-top: var(--barra-telefono); }

    .barra-telefono {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 880;
        height: var(--barra-telefono);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--m-bordo);
    }
    /* Un <button> vero: le sette proprieta' che `style.css` forza su ogni
       pulsante vanno riscritte qui, una per una. */
    html body .barra-telefono .barra-telefono-apri {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--m-raggio-piccolo) !important;
        background: transparent !important;
        color: var(--m-testo) !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    html body .barra-telefono .barra-telefono-apri:active { background: var(--m-superficie-2) !important; }
    .barra-telefono-apri svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
    html body .barra-telefono .barra-telefono-nome { font-weight: 600 !important; font-size: 16px; color: var(--m-testo); }

    .barra {
        width: min(86vw, 320px);
        transform: translateX(-100%);
        transition: transform var(--m-anima), box-shadow var(--m-anima);
        border-right: 0;
        /* sopra il riquadro delle notifiche (1500, in basso a destra), sotto
           avvisi e finestre modali (9998-9999). Sul PC non s'incrociano. */
        z-index: 1510;
    }
    html.barra-aperta .barra {
        transform: none;
        box-shadow: var(--m-ombra-alta);
    }
    .barra .barra-etichetta,
    .barra .barra-gruppo-freccia,
    .barra .barra-in-arrivo { opacity: 1; }
    .barra-voce, .barra-gruppo-titolo { height: 44px; }

    html.barra-aperta .barra-sfondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1505;
        background: rgba(15, 23, 42, 0.36);
    }
}

/* =========================================================================
   LO STRATO COMUNE (D639, D614, D615)
   Ogni selettore ha la STESSA specificita' delle regole generiche vecchie che
   sostituisce (`button`, `.btn`, `.btn.back`, `thead th`, `.page-header h1`...):
   vince perche' arriva dopo, e le regole di pagina piu' specifiche continuano a
   vincere su di lui. Si forzano solo proprieta' che le vecchie gia' forzavano.
   ⚠️ Nessun `display` su `button` e `.btn`: batterebbe l'attributo `hidden`.
   ========================================================================= */

/* ---- fondo, testo, superfici del browser -------------------------------- */
html body {
    background: var(--m-fondo) !important;
    color: var(--m-testo) !important;
}
/* La famiglia su ogni elemento. L'`!important` e `.leaflet-container` non
   servono piu' contro `style.css` (le sue dichiarazioni Poppins le ha tolte il
   114), ma contro `leaflet.css`, che GPS Live e Storico caricano DOPO questo
   foglio: `.leaflet-container` dichiara Helvetica, i pulsanti dello zoom e la
   chiusura dei popup `font:` Lucida Console e Tahoma. Senza, la sonda della
   famiglia del 113 li trova fuori da Figtree (ticket 114). */
html,
body,
body *,
.leaflet-container {
    font-family: var(--m-carattere) !important;
}
.main-content {
    background: transparent;
    border-left: 0;
}
html {
    accent-color: var(--m-accento);
    scrollbar-color: var(--m-bordo-forte) transparent;
}
::selection {
    background: #cddcfb;
    color: var(--m-testo);
}
:focus-visible {
    outline: 2px solid var(--m-accento);
    outline-offset: 2px;
}

/* ---- l'intestazione di pagina ------------------------------------------ */
/* La soprascritta sopra il titolo ripeteva il gruppo del menu: e' uno dei tratti
   da togliere (D614), e la barra dice gia' dove si e'. */
.page-kicker {
    display: none !important;
}
.page-header {
    margin-bottom: 24px !important;
}
.page-header h1 {
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--m-testo) !important;
}
/* Sul telefono i comandi dell'intestazione stanno in riga e vanno a capo solo se
   non ci stanno: in colonna, a mezza larghezza, spingevano il contenuto 400 px
   piu' in basso. */
@media (max-width: 767px) {
    .page-header .page-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .page-header-actions .btn,
    .page-header-actions button {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 14px !important;
    }
}
.subtitle {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--m-testo-3) !important;
}

/* ---- i bottoni ----------------------------------------------------------- */
/* Il <button> nudo e' il primario dei moduli («Mostra», «Salva»). */
button {
    background: var(--m-accento) !important;
    color: #ffffff !important;
    border: 1px solid var(--m-accento) !important;
    border-radius: var(--m-raggio-piccolo) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover {
    background: var(--m-accento-forte) !important;
    border-color: var(--m-accento-forte) !important;
}
.btn {
    border-radius: var(--m-raggio-piccolo) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* `edit` e' il primario, `back` il secondario, `delete` l'azione che toglie.
   Forma, peso e ombra si riscrivono anche qui: `style.css` li forza su ogni
   variante a (0,2,0), che batte il `.btn` qui sopra. */
.btn.edit,
.btn.back,
.btn.delete {
    height: auto !important;
    min-height: 40px !important;
    border-radius: var(--m-raggio-piccolo) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.btn.edit {
    background: var(--m-accento) !important;
    color: #ffffff !important;
    border: 1px solid var(--m-accento) !important;
}
.btn.edit:hover {
    background: var(--m-accento-forte) !important;
    border-color: var(--m-accento-forte) !important;
}
.btn.back {
    background: var(--m-superficie) !important;
    color: var(--m-testo) !important;
    border: 1px solid var(--m-bordo-forte) !important;
}
.btn.back:hover {
    background: var(--m-superficie-2) !important;
    border-color: var(--m-testo-3) !important;
}
.btn.delete {
    background: var(--m-superficie) !important;
    color: var(--m-errore) !important;
    border: 1px solid #efc4c0 !important;
}
.btn.delete:hover {
    background: var(--m-errore-tenue) !important;
    border-color: var(--m-errore) !important;
}
/* Il riflesso che scorre sul bottone al passaggio del mouse: decorazione che non
   dice nessuno stato, gia' spenta da `marvion-light.css` sulle pagine che lo
   caricano. Spento ovunque: sulle pagine col proprio <head> allargava il
   contenuto del bottone oltre il bordo (Rifornimenti a 390 px, «Reset»). */
.btn::after,
button::after {
    display: none !important;
    content: none !important;
}
button:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- le superfici: card, riquadri, tabelle ------------------------------ */
.metric-card,
.form-box,
.table-box {
    background: var(--m-superficie) !important;
    border: 1px solid var(--m-bordo) !important;
    border-radius: var(--m-raggio) !important;
    box-shadow: var(--m-ombra) !important;
}
.metric-label {
    font-size: 12px !important;
    color: var(--m-testo-3) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
}
/* La striscia colorata a sinistra della card (uno pseudo-elemento, non un bordo)
   e' uno dei tratti da togliere (D614). Non diceva uno stato: le varianti
   (`success`, `danger`...) colorano per categoria -- «Manutenzioni del mese»
   usciva rossa senza essere un errore --, quindi il colore non si sposta altrove. */
.metric-card::before {
    display: none !important;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
thead th {
    background: var(--m-superficie-2) !important;
    color: var(--m-testo-3) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--m-bordo) !important;
}
thead th:first-child,
thead th:last-child,
tbody td:first-child,
tbody td:last-child {
    border-radius: 0 !important;
}
tbody td {
    background: transparent !important;
    color: var(--m-testo-2) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--m-bordo) !important;
    font-variant-numeric: tabular-nums;
}
tbody tr:hover {
    background: var(--m-superficie-2) !important;
}

/* ---- etichette e campi --------------------------------------------------- */
label {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--m-testo-2);
}
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"])),
select,
textarea {
    background: var(--m-superficie) !important;
    border: 1px solid var(--m-bordo-forte) !important;
    border-radius: var(--m-raggio-piccolo) !important;
    color: var(--m-testo);
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"])),
select {
    min-height: 40px !important;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--m-accento) !important;
    box-shadow: 0 0 0 3px rgba(29, 95, 224, 0.16) !important;
    outline: none;
}
input::placeholder,
textarea::placeholder {
    color: #8a97aa !important;
    font-weight: 400 !important;
}

/* ---- il login ------------------------------------------------------------ */
/* A sinistra il blu dell'accento, a tutta altezza; a destra la carta bianca. */
html body.login-body {
    background: var(--m-fondo) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.login-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    overflow: visible;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
}
/* marchio in cima, titolo e frase al centro esatto del pannello, sull'asse del modulo a destra */
.login-left {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: 32px;
    padding: 48px 56px;
    background: var(--m-accento) !important;
    color: #ffffff !important;
}
.login-left h1,
.login-left h2,
.login-left p,
.login-left strong {
    color: #ffffff !important;
}
.login-brand {
    display: flex;
    align-items: center;
    align-self: start;
    gap: 14px;
}
.login-brand-marchio {
    width: 54px;
    height: 40px;
    flex: 0 0 54px;
}
html body .login-brand h1 {
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
/* 540 px (`style.css`) spezzavano la seconda riga del titolo lasciando «solo.» da solo */
.login-copy {
    max-width: 620px;
}
html body .login-copy h2 {
    text-wrap: balance;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}
.login-copy p {
    max-width: 52ch;
    opacity: 0.88;
    font-size: 15px !important;
    line-height: 1.6;
}
.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.login-card {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px !important;
    background: var(--m-superficie) !important;
    border: 1px solid var(--m-bordo) !important;
    border-radius: 16px !important;
    box-shadow: var(--m-ombra) !important;
}
html body .login-card h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--m-testo) !important;
}
.login-card form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}
.login-card label {
    margin-top: 10px;
}
.login-card button[type="submit"] {
    margin-top: 18px;
    min-height: 44px;
    width: 100%;
}
@media (max-width: 767px) {
    .login-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .login-left { padding: 28px 24px; gap: 16px; min-height: 0; grid-template-rows: auto; }
    /* il modulo parte subito sotto il nome, non a meta' dell'altezza avanzata */
    .login-right { align-items: flex-start; padding-top: 28px; }
    /* sul telefono il modulo sta sopra la piega: del campo blu resta il nome */
    .login-left .login-copy { display: none; }
}

/* ---- il passaggio del mouse ---------------------------------------------- */
/* Sotto il mouse niente si sposta e nessuna ombra cambia (DESIGN.md, The Still
   Surface Rule): un movimento dice «cliccami», e su un numero o su una tabella
   promette un clic che non c'e'. Bottoni e righe rispondono col colore. Si
   solleva solo la card che e' per intero un link (`.status-vehicle-item`,
   `.photo-card`), e lo fa gia' da `style.css`.
   `style.css` alza di 2 px card e riquadri e di 1 px bottoni, filtri e caselle
   del dettaglio; `marvion-light.css` allarga l'ombra delle card. L'ombra sotto
   il mouse e' quella che ogni elemento ha a riposo.
   Solo a schermo: sulla carta li ferma gia' `style.css`, e li' non si tocca. */
@media screen {
    button:hover,
    .add-branch-btn:hover,
    .gps-center-btn:hover,
    .doc-link:hover,
    .metric-card:hover,
    .form-box:hover,
    .table-box:hover,
    .details-item:hover,
    .live-filter-bar .filter-chip:hover,
    .gps-live-row:hover {
        transform: none !important;
    }
    .metric-card:hover,
    .form-box:hover,
    .table-box:hover {
        box-shadow: var(--m-ombra) !important;
    }
    .details-item:hover,
    .gps-live-row:hover {
        box-shadow: none !important;
    }
    /* «Aggiungi...» ha un'ombra sua a riposo, che `style.css` scurisce al passaggio */
    .add-branch-btn:hover {
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
    }
}

/* ---- i filtri e le scelte sopra una pagina (ticket 116, D706) ------------- */
/* Una forma sola, quella di Manutenzioni e Scadenze: un riquadro, l'etichetta
   sopra il campo, campi e bottone alti 44 px sulla stessa riga, il conteggio in
   fondo. `style.css` disegna ogni campo della barra come una pillola a se', con
   l'etichetta maiuscola dentro, in sei blocchi con `!important`: qui si battono.
   Solo a schermo: la carta resta com'e'. */
@media screen {
    .live-filter-bar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px 12px !important;
        margin: 0 0 16px !important;
        padding: 16px 22px;
        background: var(--m-superficie);
        border: 1px solid var(--m-bordo);
        border-radius: var(--m-raggio);
        box-shadow: var(--m-ombra);
    }

    .live-filter-bar .filter-chip {
        display: grid !important;
        gap: 6px !important;
        flex: 0 1 190px;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* il primo e' la ricerca: prende lo spazio che avanza */
    .live-filter-bar .filter-chip:first-child { flex: 1 1 260px; }

    .live-filter-bar .filter-chip span,
    .scelta-pagina label {
        display: block;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        white-space: normal !important;
        color: var(--m-testo-2) !important;
    }

    /* Senza padding in verticale: a 44 px una tendina col padding di `style.css`
       taglia le code di g e q, e il browser la centra da solo. */
    .live-filter-bar .filter-chip :is(input, select),
    .scelta-pagina :is(input, select) {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 14px !important;
    }

    .live-filter-bar .filter-chip :is(input, select) {
        background: var(--m-superficie) !important;
        border: 1px solid var(--m-bordo-forte) !important;
        box-shadow: none !important;
    }

    .live-filter-bar .filter-chip :is(input, select):focus {
        border-color: var(--m-accento) !important;
        box-shadow: 0 0 0 3px rgba(29, 95, 224, 0.16) !important;
    }

    .live-filter-bar .btn,
    .scelta-pagina button[type="submit"] {
        flex: none;
        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    /* In fondo alla fila, alto quanto i comandi: si legge sulla loro riga. */
    .live-filter-bar .live-result-count {
        order: 1;
        display: inline-flex !important;
        align-items: center;
        min-height: 44px !important;
        margin-left: auto;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 13px !important;
        color: var(--m-testo-3) !important;
        font-variant-numeric: tabular-nums;
    }

    .live-filter-bar .live-result-count strong { color: var(--m-testo) !important; }

    /* La scelta di cosa la pagina mostra (giornata o mese, filiale): una riga,
       non un riquadro alto con un bottone largo quanto la pagina. */
    .scelta-pagina form {
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px 12px !important;
    }

    .scelta-pagina .grid-2 {
        display: flex !important;
        flex: 1 1 420px;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px 12px !important;
        margin: 0 !important;
    }

    .scelta-pagina .grid-2 > div {
        display: grid;
        gap: 6px;
        flex: 1 1 200px;
        min-width: 0;
    }

    .scelta-pagina button[type="submit"] { min-width: 120px; }
}

@media screen and (max-width: 767px) {
    .live-filter-bar { padding: 14px 16px; }
    .live-filter-bar .filter-chip { flex: 1 1 calc(50% - 6px); }
    .live-filter-bar .filter-chip:first-child { flex-basis: 100%; }
    .live-filter-bar .live-result-count { margin-left: 0; }
    .scelta-pagina button[type="submit"] { width: 100% !important; }
}

/* ---- le note -------------------------------------------------------------- */
/* La Nota di DESIGN.md: 13 px, peso 400. `style.css` porta a 12,5 px e peso
   300, che il sistema non ha, queste classi e ogni paragrafo dentro un
   riquadro; `marvion-light.css` ne ribadisce il peso. Solo a schermo: la carta
   resta com'e'. */
@media screen {
    .metric-note,
    .chart-legend-note,
    .section-subtitle,
    .muted-text,
    .table-box p,
    .form-box p {
        font-size: 13px !important;
        font-weight: 400 !important;
    }
}

/* ---- l'assenza nella griglia delle presenze (ticket 130, D756) ------------- */
/* La griglia sta in due pagine, Presenze e la linguetta Presenze della scheda
   utente, e l'assenza si scrive uguale in tutte e due: uno stile solo per tutte
   le sigle (la riservatezza, in cima al cartiglio di `style.css`) e nessun blu,
   che dice «si puo' agire» (DESIGN.md, The One Blue Rule). Inchiostro pieno su
   un grigio-ardesia; il giorno in cui non si lavora, e quello fuori forza, sono un
   tratteggio, cosi' un'assenza non si legge come un sabato. Le due regole vanno
   insieme: senza la seconda, nella scheda il non lavorativo e' un grigio pieno
   quasi identico. Solo a schermo: la carta e' della stampa (D745). */
@media screen {
    .presenze-griglia td.presenze-assenza {
        background: var(--m-bordo) !important;
        color: var(--m-testo) !important;
        font-weight: 600 !important;
    }

    .presenze-griglia td.presenze-non-lavorativo,
    .presenze-griglia td.presenze-fuori-forza {
        background: repeating-linear-gradient(135deg, var(--m-superficie-2) 0 5px, var(--m-bordo) 5px 6px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra, .barra-etichetta, .barra-gruppo-freccia { transition: none; }
}

@media print {
    .barra, .barra-telefono, .barra-sfondo { display: none !important; }
    html body .app-shell { padding: 0 !important; }

    /* Le pagine col markup di prima (ticket 129). Una casella o un mezzo non si
       spezza fra due fogli: l'etichetta restava in fondo a un foglio e il valore in
       cima al successivo (scheda del mezzo, Stato dei mezzi, storico del mezzo). */
    html body .status-vehicle-item,
    html body .sheet-detail-grid > div,
    html body .sheet-mini-item,
    html body .history-detail-item { break-inside: avoid; }

    /* La freccia di un gruppo di Stato dei mezzi apre il pannello: sulla carta non
       dice niente. Il nome del gruppo e il conteggio restano. */
    html body .status-detail-chevron { display: none !important; }

    /* Lo storico del mezzo mette il dettaglio di una riga su una colonna sotto i
       900 px, e il foglio A4 e' piu' stretto: sette caselle alte impilate
       riempivano il foglio. Sulla carta tornano le quattro colonne dello schermo. */
    html body .history-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html body .history-detail-wide { grid-column: span 4; }

    /* Le testate e le colonne ferme dello schermo (`thead th` di style.css, la
       prima colonna di Scadenze e Sinistri, l'ultima di Segnalazioni danni) sono
       `sticky`: sulla carta Chromium disegnava la testata della tabella dopo una
       riga aperta, sopra la riga seguente (Manutenzioni in filiale). Sulla carta
       non scorre niente: tornano al loro posto nella tabella. */
    html body th,
    html body td { position: static !important; }
}