/* ============================================================
   Identità visiva app Precariato storico regionale — Regione Calabria
   Conforme al Design System Italia (Bootstrap Italia 2.x):
   palette ufficiale, Titillium Web, Roboto Mono per i dati.
   ============================================================ */
:root {
    --precari-blu: #0066CC;          /* primario DS Italia */
    --precari-blu-vivo: #0073E6;
    --precari-blu-scuro: #00264D;    /* fascia slim */
    --precari-blu-notte: #012A57;    /* sidebar */
    --precari-blu-abisso: #001428;   /* footer: nettamente più scuro della sidebar */
    --precari-blu-bordo: #003d7a;
    --precari-ink-1: #17324D;        /* testo principale (neutral-1) */
    --precari-ink-2: #455B71;        /* testo secondario */
    --precari-ink-3: #5C6F82;        /* testo attenuato */
    --precari-sfondo: #F0F4F8;       /* sfondo pagina DS Italia */
    --precari-superficie: #FFFFFF;
    --precari-linea: #D9E4F0;
    --precari-ombra: 0 2px 8px rgba(23, 50, 77, .08);
    --precari-ombra-alta: 0 8px 24px rgba(23, 50, 77, .12);
    --precari-raggio: 8px;
    --precari-header-h: 106px;  /* altezza della fascia .precari-header (stato non compatto) */
}

body.precari {
    font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--precari-sfondo);
    margin: 0;
    color: var(--precari-ink-1);
    /* Sticky footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.precari > header,
body.precari > .precari-footer { flex: 0 0 auto; }
body.precari > .precari-shell,
body.precari > .precari-main { flex: 1 0 auto; }

/* Dati tecnici (protocolli, capitoli, codici fiscali, importi in tabella) */
body.precari code,
body.precari .dato-tecnico {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: .85em;
    color: var(--precari-ink-1);
    background: #EDF3FA;
    border-radius: 4px;
    padding: 1px 5px;
}

/* Skip-link (WCAG 2.4.1) — visibile solo al focus da tastiera */
.precari-skip-link:focus {
    position: fixed; top: 12px; left: 12px; z-index: 1080;
    background: #fff; color: var(--precari-blu); padding: 10px 16px;
    border-radius: 6px; box-shadow: var(--precari-ombra-alta); font-weight: 600;
}

/* Focus visibile e coerente su tutti gli elementi interattivi (WCAG 2.4.7) */
body.precari a:focus-visible,
body.precari button:focus-visible,
body.precari .btn:focus-visible,
body.precari .form-control:focus-visible,
body.precari .form-select:focus-visible {
    outline: 3px solid #FF9900;
    outline-offset: 2px;
    box-shadow: none;
}

/* Movimento ridotto (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    body.precari *, body.precari *::before, body.precari *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Header a due fasce ─────────────────────────────────────── */
.precari-topbar {
    background: var(--precari-blu-scuro);
    color: #fff;
    font-size: .82rem;
}
.precari-topbar .inner {
    max-width: 1280px; margin: 0 auto; padding: 6px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.precari-topbar a { color: #fff; text-decoration: none; }
.precari-topbar a:hover { text-decoration: underline; }
.precari-topbar .topbar-right a { font-weight: 600; }
.precari-topbar .topbar-right { display: flex; align-items: center; gap: 16px; }
.precari-topbar .topbar-identita { opacity: .9; }

body.precari > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.precari-header {
    /* header.jpg è ritagliato apposta per questa fascia (1983×106, stessa
       proporzione di --precari-header-h). Niente attachment:fixed: dentro un
       header con position:sticky i background fixed sono inaffidabili tra
       browser (possono non renderizzare, lasciando la fascia trasparente).
       Il gradiente resta come fallback (contrasto WCAG 1.4.3 per testo e
       stemma bianchi) se l'immagine non carica. */
    position: relative;
    min-height: var(--precari-header-h);
    background: linear-gradient(120deg, var(--precari-blu) 0%, #0059B3 60%, #004A99 100%);
    box-shadow: 0 2px 10px rgba(0, 38, 77, .35);
    overflow: hidden;
    transition: min-height .25s ease;
}
.precari-header::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../img/precari/header.jpg') center / cover no-repeat;
    pointer-events: none;
}
.precari-header .inner { position: relative; z-index: 1; }
.precari-header .inner {
    max-width: 1280px; margin: 0 auto; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    transition: padding .25s ease;
}
.precari-header .brand { display: flex; align-items: center; gap: 16px; color: #fff; }
.precari-header .brand img {
    width: 58px; height: 58px; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
    transition: width .25s ease, height .25s ease;
}
.precari-header .brand .brand-title {
    font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: .2px;
    transition: font-size .25s ease;
}
.precari-header .brand .brand-tagline {
    margin: 2px 0 0; font-size: .88rem; opacity: .92; font-weight: 300; letter-spacing: .3px;
    transition: font-size .25s ease, opacity .25s ease, margin .25s ease;
}
.precari-header .loghi img {
    width: 490px; height: 58px; object-fit: contain; display: block;
    transition: width .25s ease, height .25s ease;
}
@media (max-width: 640px) { .precari-header .loghi { display: none; } }

/* Header compattato durante lo scroll */
.precari-header.precari-header--compact {
    min-height: 64px;
}
.precari-header.precari-header--compact .inner {
    padding: 8px 20px;
}
.precari-header.precari-header--compact .brand img {
    width: 40px; height: 40px;
}
.precari-header.precari-header--compact .brand .brand-title {
    font-size: 1.25rem;
}
.precari-header.precari-header--compact .brand .brand-tagline {
    font-size: .75rem; opacity: .85; margin-top: 0;
}
.precari-header.precari-header--compact .loghi img {
    width: auto; height: 40px;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.precari-shell { display: flex; align-items: stretch; width: 100%; }
/* Sfondo: la stessa fotografia istituzionale della pagina di accesso
   (headerb.jpg), ancorata a sinistra. Attachment:fixed ancora l'immagine al
   viewport, così la scala è identica a quella dell'hero di accesso invece di
   dipendere dall'altezza (variabile) della colonna. Il colore pieno resta
   come fallback sotto l'immagine. */
.precari-sidebar {
    width: 256px; flex: 0 0 256px; color: #fff;
    background:
        url('../img/precari/headerb.jpg') left top / cover no-repeat fixed,
        var(--precari-blu-notte);
}
.precari-sidebar .user-box {
    padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; gap: 12px;
}
.precari-sidebar .user-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; letter-spacing: .5px;
}
.precari-sidebar .user-name { font-weight: 600; line-height: 1.2; }
.precari-sidebar .user-role { font-size: .78rem; opacity: .82; }
.precari-sidebar nav { display: flex; flex-direction: column; padding: 12px 0; }
.precari-sidebar nav a {
    color: #CFE0F5; text-decoration: none; padding: 11px 18px 11px 14px;
    display: flex; gap: 12px; align-items: center;
    border-left: 4px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.precari-sidebar nav a .bi { font-size: 1.05rem; opacity: .85; width: 20px; text-align: center; }
.precari-sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.precari-sidebar nav a.attivo {
    background: rgba(0, 102, 204, .45);
    border-left-color: #fff;
    color: #fff; font-weight: 600;
}
.precari-sidebar nav a.attivo .bi { opacity: 1; }
/* Badge conteggio sulle voci di navigazione (es. richieste da validare) */
.precari-nav-badge {
    margin-left: auto; flex: 0 0 auto;
    min-width: 22px; padding: 2px 7px; border-radius: 999px;
    background: #FFC107; color: #17324D;
    font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3;
}
.precari-sidebar nav a.attivo .precari-nav-badge { background: #fff; }
.precari-content { flex: 1 1 auto; padding: 28px 32px 40px; min-width: 0; }

/* Barra mobile con bottone hamburger: nascosta su desktop */
.precari-mobilebar { display: none; }
.precari-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 1044;
    background: rgba(9, 30, 55, .5);
}
@media (max-width: 768px) {
    .precari-shell { flex-direction: column; }
    .precari-mobilebar {
        display: block; position: sticky; top: 0; z-index: 1040;
        background: var(--precari-blu-notte);
        padding: 4px 12px;
    }
    .precari-mobilebar .btn-link {
        color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
    }
    .precari-mobilebar .btn-link:hover { color: #CFE0F5; }
    /* Sidebar offcanvas: fuori schermo finché non si apre dal bottone */
    .precari-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
        width: 280px; flex-basis: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
        overflow-y: auto;
    }
    .precari-sidebar.aperta {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(9, 30, 55, .5);
    }
    .precari-content { padding: 20px 16px 32px; }
}
.precari-main { width: 100%; padding: 28px; }

/* ── Titoli, breadcrumb e testo ─────────────────────────────── */
.precari-content h1, .precari-main h1 { color: var(--precari-ink-1); font-weight: 700; }
.precari-content .h3, .precari-main .h3 { letter-spacing: .2px; }
.precari-content h2.h5, .precari-content h2.h6, .precari-content h3.h6 {
    color: var(--precari-ink-1); font-weight: 700; letter-spacing: .2px;
}
.precari-content h2.h5 {
    display: flex; align-items: center; gap: 10px;
}
.precari-content h2.h5::before {
    content: ''; width: 5px; height: 1.05em; border-radius: 3px;
    background: var(--precari-blu); flex: 0 0 5px;
}
body.precari .breadcrumb { font-size: .85rem; margin-bottom: .75rem; }
body.precari .breadcrumb a { color: var(--precari-blu); text-decoration: none; }
body.precari .breadcrumb a:hover { text-decoration: underline; }
body.precari .breadcrumb-item.active { color: var(--precari-ink-3); }
body.precari .text-muted { color: var(--precari-ink-3) !important; }

/* ── Card ───────────────────────────────────────────────────── */
body.precari .card {
    border: 1px solid var(--precari-linea);
    border-radius: var(--precari-raggio);
    box-shadow: var(--precari-ombra);
}
body.precari .card .card-body { padding: 1.1rem 1.25rem; }
body.precari .row.g-3 .card h3.h6 { color: var(--precari-blu); }
body.precari .row.g-3 .card:hover {
    box-shadow: var(--precari-ombra-alta);
    transition: box-shadow .15s ease;
}

/* ── Card KPI ───────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card {
    position: relative;
    background: var(--precari-superficie);
    border-radius: var(--precari-raggio);
    border: 1px solid var(--precari-linea);
    box-shadow: var(--precari-ombra);
    padding: 16px 18px;
    border-top: 4px solid var(--precari-blu);
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--precari-ombra-alta); }
.kpi-card .kpi-icona {
    width: 38px; height: 38px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; background: #EDF3FA;
}
.kpi-card .kpi-valore {
    font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin: 8px 0 2px;
    font-variant-numeric: tabular-nums; color: var(--precari-ink-1);
}
.kpi-card .kpi-label { color: var(--precari-ink-2); font-size: .88rem; line-height: 1.25; }
.kpi-card .kpi-label a:hover { text-decoration: underline !important; }
.kpi--blu { border-top-color: #0066CC; } .kpi--blu .kpi-icona { color: #0066CC; background: #E6F0FA; }
.kpi--verde { border-top-color: #1a8754; } .kpi--verde .kpi-icona { color: #1a8754; background: #E7F4EE; }
.kpi--viola { border-top-color: #6f42c1; } .kpi--viola .kpi-icona { color: #6f42c1; background: #F1ECF9; }
.kpi--teal { border-top-color: #0d9488; } .kpi--teal .kpi-icona { color: #0d9488; background: #E7F4F3; }
.kpi--arancio { border-top-color: #d97706; } .kpi--arancio .kpi-icona { color: #b45309; background: #FBF1E4; }
.kpi--rosso { border-top-color: #c0392b; } .kpi--rosso .kpi-icona { color: #c0392b; background: #F9EBEA; }

/* ── Tabelle ────────────────────────────────────────────────── */
body.precari .table { --bs-table-striped-bg: #F7FAFD; border-color: var(--precari-linea); }
body.precari .table thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--precari-ink-2); font-weight: 700;
    border-bottom: 2px solid var(--precari-linea);
    background: #FBFCFE;
}
body.precari .table tbody tr { transition: background-color .1s ease; }
body.precari .table.table-striped tbody tr:hover { background: #EDF3FA; }
body.precari .table td { vertical-align: middle; }
body.precari .table .btn-sm { white-space: nowrap; }
/* Contenitore DataTables: info e paginazione più leggere */
body.precari .dt-info { color: var(--precari-ink-3); font-size: .85rem; }

/* ── Badge e bottoni ────────────────────────────────────────── */
body.precari .badge { border-radius: 5px; font-weight: 600; letter-spacing: .2px; }
/* Pallino di stato sui badge "stato pratica": aiuta la scansione rapida
   delle liste dense (domande, rendicontazioni, decreti, corrispondenza)
   senza dover leggere ogni etichetta testuale. */
body.precari .badge.badge-stato { display: inline-flex; align-items: center; gap: .4em; }
body.precari .badge.badge-stato::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 6px;
}
body.precari .btn { border-radius: 6px; }
body.precari .btn-primary { background: var(--precari-blu); border-color: var(--precari-blu); }
body.precari .btn-primary:hover { background: #0059B3; border-color: #0059B3; }
body.precari .alert { border-radius: var(--precari-raggio); }

/* ── Form ───────────────────────────────────────────────────── */
/* Etichette leggermente più marcate */
body.precari .form-label { font-weight: 600; color: var(--precari-ink-2); font-size: .88rem; margin-bottom: .3rem; }
body.precari .form-text { color: var(--precari-ink-3); }

/* Campi: bordo più presente, altezza comoda, stato hover/readonly leggibile.
   Vale per tutti i form dell'app (anche quelli inline nelle liste). */
body.precari .form-control,
body.precari .form-select {
    border: 1px solid #B9C8D9;
    border-radius: 6px;
    padding: .55rem .8rem;
    min-height: 44px;                     /* area di tocco WCAG 2.5.8 */
    color: var(--precari-ink-1);
    background-color: var(--precari-superficie);
    transition: border-color .12s ease, box-shadow .12s ease;
}
body.precari textarea.form-control { min-height: 96px; }
body.precari .form-control:hover:not([readonly]):not(:disabled),
body.precari .form-select:hover:not(:disabled) { border-color: #8FA6BF; }
body.precari .form-control:focus,
body.precari .form-select:focus {
    border-color: var(--precari-blu);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, .15);
}
body.precari .form-control[readonly] {
    background-color: #F4F7FA;
    color: var(--precari-ink-2);
    border-style: dashed;
    cursor: default;
}
body.precari .form-control.is-invalid,
body.precari .form-select.is-invalid,
body.precari .form-control[aria-invalid="true"],
body.precari .form-select[aria-invalid="true"] { border-color: #D9364F; }
body.precari .form-check-input { width: 1.15em; height: 1.15em; margin-top: .2em; border-color: #8FA6BF; }
body.precari .form-check-input:checked { background-color: var(--precari-blu); border-color: var(--precari-blu); }
body.precari .form-check-label { color: var(--precari-ink-1); }
body.precari select[multiple].form-select { padding: .35rem; }
body.precari select[multiple].form-select option { padding: .4rem .6rem; border-radius: 4px; }
body.precari select[multiple].form-select option:checked {
    background: #E1EDFA linear-gradient(0deg, #E1EDFA, #E1EDFA);
    color: var(--precari-ink-1); font-weight: 600;
}

/* Form strutturato a sezioni: <form class="precari-form"> con un
   <fieldset class="form-sezione"> per gruppo logico (legend = titolo,
   .form-sezione-desc = spiegazione). Le sezioni sono schede bianche con
   bordo di accento, così anagrafica, rapporto di lavoro, ecc. si leggono
   come blocchi distinti invece di un'unica colonna di campi. */
.precari-form { max-width: 920px; }
.precari-form .form-sezione {
    background: var(--precari-superficie);
    border: 1px solid var(--precari-linea);
    border-left: 4px solid var(--precari-blu);
    border-radius: var(--precari-raggio);
    box-shadow: var(--precari-ombra);
    padding: 18px 24px 22px;
    margin: 0 0 18px;
    min-width: 0;
}
.precari-form .form-sezione > legend {
    float: left; width: 100%;             /* come il reset Bootstrap: il legend resta DENTRO la scheda, non sul bordo */
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; color: var(--precari-ink-1);
    margin: 0 0 .6rem; padding: 0;
}
.precari-form .form-sezione > legend + * { clear: both; }
.precari-form .form-sezione > legend .bi {
    width: 30px; height: 30px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EDF3FA; color: var(--precari-blu); font-size: .95rem;
}
.precari-form .form-sezione-desc {
    color: var(--precari-ink-3); font-size: .86rem; margin: 0 0 1rem; max-width: 70ch;
}
.precari-form .form-sezione .row { --bs-gutter-y: 1rem; }
.precari-form .form-sezione dl.row dt { color: var(--precari-ink-3); font-weight: 600; font-size: .88rem; }
.precari-form .form-sezione dl.row dd { color: var(--precari-ink-1); }
.precari-form .form-obbligatori { color: var(--precari-ink-3); font-size: .85rem; margin-bottom: 1rem; }

/* Barra azioni: resta visibile in fondo alla finestra nei form lunghi. */
.precari-form .form-azioni {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 0;
    margin-top: 4px;
    background: var(--precari-sfondo);
    border-top: 1px solid var(--precari-linea);
    box-shadow: 0 -6px 12px -8px rgba(23, 50, 77, .18);
}
.precari-form .form-azioni .btn { min-width: 120px; padding: .6rem 1.2rem; font-weight: 600; }
.precari-form .form-azioni .form-azioni-nota { color: var(--precari-ink-3); font-size: .85rem; margin-left: auto; }

/* Storico modifiche sotto i form */
.precari-storico { max-width: 920px; }
.precari-storico .table { margin-bottom: 0; font-size: .9rem; }
.precari-storico .table td, .precari-storico .table th { vertical-align: top; }
.precari-storico .storico-diff { margin: 0; padding-left: 1.1rem; }
.precari-storico .storico-diff .da { color: var(--precari-ink-3); text-decoration: line-through; }
.precari-storico .storico-diff .a { color: var(--precari-ink-1); font-weight: 600; }
@media (max-width: 767.98px) {
    .precari-form .form-sezione { padding: 14px 16px 18px; }
    .precari-form .form-azioni .btn { flex: 1 1 auto; }
}

/* ── Login (opzione B: fotografia istituzionale headerb.jpg) ───── */
.precari-hero {
    position: relative;
    /* Annulla il padding di .precari-main per coprire l'intera area. */
    margin: -28px;
    padding: 24px 0 48px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
/* Opzione B: headerb.jpg è il prosieguo di header.jpg (stessa larghezza
   1983px, tagliato apposta per l'area body). Attachment:fixed qui è sicuro
   (a differenza dell'header sopra) perché .precari-hero NON è dentro un
   antenato position:sticky. Sotto l'altezza naturale dell'immagine resta
   il colore di sfondo, identico al bianco della sua sfumatura finale. */
.precari-hero--option-b {
    background: url('../img/precari/headerb.jpg') top center / cover no-repeat fixed, #FFFFFF;
}
.precari-hero .precari-login { position: relative; z-index: 1; }
.precari-hero .card-box { box-shadow: 0 14px 34px rgba(23, 50, 77, .14); }
/* La pagina di accesso non deve mostrare lo sfondo grigio sotto l'hero.
   Con header sticky il padding-top viene rimosso: l'hero inizia subito
   sotto l'header e scorre correttamente senza sovrapporsi. */
body.precari:has(.precari-hero) .precari-main { padding: 0 28px 28px; }
body.precari:has(.precari-hero) .precari-hero { margin-top: 0; }

/* I riquadri si allineano al contenitore dell'header (.precari-header .inner):
   stessa larghezza massima e stesso padding, così i bordi delle schede cadono
   esattamente sotto il marchio a sinistra e i loghi istituzionali a destra. */
.precari-login { max-width: 1280px; width: 100%; margin: 44px auto; padding: 0 20px; }
/* Pagine di testo pubbliche (informativa privacy): stesso allineamento. */
.precari-pagina-testo { max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 20px; }
/* Due colonne: a sinistra l'accesso, a destra accreditamento + guida impilati.
   Il riquadro di sinistra occupa entrambe le righe e le celle si distendono,
   così la colonna di destra pareggia esattamente l'altezza di quella di
   sinistra invece di sbordare sotto. */
.precari-login .grid { display: grid; grid-template-columns: 5fr 6fr; gap: 24px; align-items: stretch; }
.precari-login .card-box {
    background: var(--precari-superficie);
    border-radius: 12px;
    border: 1px solid var(--precari-linea);
    box-shadow: var(--precari-ombra-alta);
    padding: 22px 26px;
}
.precari-login .card-box h2 { margin-bottom: .5rem; }
.precari-login .card-box hr { margin: .9rem 0; }
/* Accesso di test compatto: bottoni su due colonne */
.precari-login .test-login-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.precari-login .test-login-grid form { margin: 0; }
.precari-login .test-login-grid form:first-child { grid-column: 1 / -1; }
/* Il secondo riquadro è il pannello di registrazione ente */
.precari-login .card-box + .card-box {
    background: var(--precari-superficie);
}
.precari-login h2 { color: var(--precari-blu); font-weight: 700; }

/* Bottone SPID conforme AgID (#0066CC, logo, focus visibile) */
.btn-spid {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .75rem 1rem; border: none; border-radius: 6px;
    background: #0066CC; color: #fff;
    font-size: 1.05rem; font-weight: 700;
    text-decoration: none;
}
.btn-spid:hover { background: #0059B3; color: #fff; }
.btn-spid:focus-visible {
    outline: 3px solid #FF9900;
    outline-offset: 2px;
}
.btn-spid .spid-logo {
    background: #fff; color: #0066CC; border-radius: 4px;
    font-size: .72rem; font-weight: 800; padding: .15rem .5rem;
    letter-spacing: .04em; text-transform: uppercase;
}

/* Combobox ricercabile (sostituisce la <select> lunga) */
.combobox { position: relative; }
.combobox .form-label { font-weight: 600; margin-bottom: .35rem; }
.combobox-lista {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid #C6D3E0; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(6, 43, 82, .18);
    max-height: 240px; overflow: auto; list-style: none; padding: 0; margin: 0;
    display: none;
}
.combobox-lista.aperta { display: block; }
.combobox-lista li {
    padding: .55rem .9rem; cursor: pointer;
    border-bottom: 1px solid #F0F4F8;
}
.combobox-lista li:last-child { border-bottom: 0; }
.combobox-lista li[aria-selected="true"],
.combobox-lista li:hover {
    background: #F0F7FF; color: var(--precari-blu); font-weight: 600;
}
.combobox-contatore { font-size: .82rem; margin-top: .25rem; }

/* Riquadro «Contatti per gli enti»: referenti regionali per tipo di incentivo */
.precari-referenti {
    margin-top: 2.5rem; background: var(--precari-superficie, #fff);
    border: 1px solid var(--precari-linea, rgba(6, 43, 82, .08));
    border-left: 4px solid var(--precari-blu); border-radius: 12px;
    padding: 20px 24px; box-shadow: var(--precari-ombra);
}
.precari-referenti h2 { color: var(--precari-blu); font-weight: 700; margin-bottom: .4rem; }
.precari-referenti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.precari-referente { border: 1px solid rgba(6, 43, 82, .1); border-radius: 10px; padding: .9rem 1.1rem; background: #fff; }
.precari-referente a { overflow-wrap: anywhere; }
@media (max-width: 820px) { .precari-referenti-griglia { grid-template-columns: 1fr; } }

/* Sezione avvisi e scadenze pre-login */
.precari-avvisi { margin-top: 2.5rem; }
.precari-avvisi h2 {
    font-size: 1.25rem; color: var(--precari-ink-1); margin-bottom: 1rem;
}
.precari-avvisi .lista-avvisi { display: grid; gap: .8rem; }
.precari-avvisi .avviso {
    background: #fff; border: 1px solid rgba(6, 43, 82, .08);
    border-left: 4px solid var(--precari-blu);
    border-radius: 10px; padding: .9rem 1.1rem;
    display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
    box-shadow: var(--precari-ombra);
}
.precari-avvisi .avviso.scadenza { border-left-color: #C9A227; }
.precari-avvisi .avviso .data {
    font-size: .82rem; color: var(--precari-ink-3); min-width: 90px;
    font-variant-numeric: tabular-nums;
}
.precari-avvisi .avviso .tag {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; border-radius: 999px; padding: .15rem .65rem;
    background: #F0F7FF; color: var(--precari-blu);
}
.precari-avvisi .avviso.scadenza .tag { background: #FBF3DC; color: #8A5A00; }
.precari-avvisi .avviso p { flex: 1; min-width: 220px; margin: 0; }

@media (max-width: 820px) { .precari-login .grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .precari-avvisi .avviso { flex-direction: column; gap: .4rem; }
    .precari-avvisi .avviso p { min-width: auto; }
}

/* ── Footer ─────────────────────────────────────────────────── */
/* Niente margin-top: nelle pagine con sidebar, un margine qui apriva uno
   scarto chiaro tra il fondo scuro della sidebar e quello del footer,
   dando l'impressione che la sidebar si interrompesse prima del fondo.
   Lo spazio di respiro resta comunque garantito dal padding di .precari-content.
   La separazione dalla sidebar è affidata a una barra piena nell'accento
   blu (non a un semplice hairline): resta netta anche se i due fondi scuri
   sono simili, senza dover scurire troppo il footer. */
.precari-footer {
    background: var(--precari-blu-scuro);
    border-top: 3px solid var(--precari-blu);
    color: #CFE0F5;
}
.precari-footer .inner { max-width: 1280px; margin: 0 auto; padding: 28px 20px 0; font-size: .9rem; }
.precari-footer .footer-main {
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.18);
}
.precari-footer .footer-brand { display: flex; gap: 14px; align-items: flex-start; line-height: 1.45; }
.precari-footer .footer-brand img { width: 46px; height: 46px; object-fit: contain; }
.precari-footer .footer-brand strong { color: #fff; font-size: 1rem; }
.precari-footer .footer-muted { opacity: .75; font-size: .85rem; }
/* Collegamenti su due colonne: quattro voci su una sola colonna allungavano
   inutilmente il footer in altezza. */
.precari-footer .footer-links {
    display: grid; grid-template-columns: repeat(2, auto);
    gap: 6px 28px; justify-content: end; text-align: right;
}
.precari-footer .footer-links a { color: #fff; text-decoration: none; }
.precari-footer .footer-links a:hover { text-decoration: underline; }
.precari-footer .footer-small { padding: 12px 0 16px; font-size: .8rem; opacity: .75; }
@media (max-width: 640px) {
    .precari-footer .footer-links { grid-template-columns: 1fr; justify-content: start; text-align: left; }
}

/* ── Avviso cookie tecnici ─────────────────────────────────────
   Solo informativo (nessun consenso da raccogliere: cookie tecnici di
   sessione, esenti dall'obbligo ai sensi delle linee guida cookie del
   Garante Privacy). Resta finché l'utente non lo chiude, poi non ricompare
   più su quel browser (localStorage). */
.precari-cookie-notice {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
    background: var(--precari-blu-scuro);
    color: #fff;
    box-shadow: 0 -4px 16px rgba(0, 38, 77, .35);
}
.precari-cookie-notice .inner {
    max-width: 1280px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.precari-cookie-notice p { margin: 0; font-size: .88rem; flex: 1 1 320px; }
.precari-cookie-notice a { color: #fff; }
.precari-cookie-notice[hidden] { display: none; }

/* ── Sezione che richiede attenzione ───────────────────────────
   Riusa il linguaggio visivo di .precari-avvisi (barra sinistra colorata)
   per dare più peso reale, non solo tipografico, ai blocchi che segnalano
   lavoro da fare (es. richieste in attesa di validazione), distinguendoli
   dalle sezioni di sola consultazione o navigazione. */
.precari-attenzione {
    background: #fff;
    border: 1px solid rgba(6, 43, 82, .08);
    border-left: 4px solid #C9A227;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: var(--precari-ombra);
    margin-bottom: 1.5rem;
}
.precari-attenzione.precari-attenzione--info { border-left-color: var(--precari-blu); }
.precari-attenzione .precari-attenzione-testata {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem;
}

/* ── Empty state ────────────────────────────────────────────── */
/* Blocco "nessun dato" con icona guida (partial templates/partials/empty-state.php) */
.precari-empty-state {
    text-align: center;
    padding: 32px 20px;
    background: var(--precari-superficie);
    border: 1px dashed var(--precari-linea);
    border-radius: var(--precari-raggio);
    margin-bottom: 24px;
}
.precari-empty-state .empty-icona {
    font-size: 2rem; color: var(--precari-blu); opacity: .55;
    display: block; margin-bottom: 8px;
}
.precari-empty-state .empty-titolo { font-weight: 700; color: var(--precari-ink-1); margin-bottom: 4px; }
.precari-empty-state .empty-testo { color: var(--precari-ink-3); font-size: .9rem; margin: 0 auto; max-width: 460px; }
.precari-empty-state .empty-azione { margin-top: 12px; }

/* ── Scadenzario ────────────────────────────────────────────── */
.scadenza-imminente { color: #c0392b; font-weight: 700; }
.scadenza-vicina { color: #b45309; font-weight: 600; }

/* ── Stampa ─────────────────────────────────────────────────── */
/* Nasconde chrome applicativo e filtri; tabelle e dettagli a piena larghezza */
@media print {
    body.precari { background: #fff; }
    .precari-header::before,
    .precari-topbar,
    .precari-header .loghi,
    .precari-sidebar,
    .precari-mobilebar,
    .precari-footer,
    .precari-skip-link,
    .precari-cookie-notice,
    .toast-container,
    [data-dt-filters-for],
    .dt-length, .dt-search, .dt-info, .dt-paging,
    form .btn, a.btn, button.btn,
    .modal { display: none !important; }
    .precari-shell { display: block; }
    .precari-content, .precari-main { padding: 0; }
    .precari-header .inner { padding: 8px 0; }
    body.precari .card, .kpi-card { box-shadow: none; border: 1px solid #999; }
    body.precari .table { font-size: .85rem; }
    a[href]::after { content: none !important; }
}