/* #GIGI 2026-07-21 — EO · CSS COMUNE dei moduli (riusabile da TUTTI).
 *
 * Standard condiviso per KPI, pannelli, tabelle elenco e GRIGLIA form (.prs-*).
 * I moduli caricano questo file + (solo se serve) un piccolo CSS di brand.
 * Le classi qui NON dipendono dalla versione di Bootstrap (prefissi .eo-/.prs-).
 * Complementare a base.html.twig (che già definisce .bts, .detail-bar, .stato-b,
 * .s-attivo/.s-attesa/.s-bloccato, .prs-in): qui si aggiunge ciò che manca.
 */

/* ── GRIGLIA FORM STANDARD (.prs-*) — campi raggruppati, MAI un campo per riga ── */
.prs-card{ background:#fff; border:1px solid #e3ebf2; border-radius:12px; margin:16px; overflow:hidden; }
.prs-card-head{ padding:12px 16px; border-bottom:1px solid #e3ebf2; display:flex; align-items:center; justify-content:space-between; }
.prs-card-tit{ margin:0; font-size:15px; font-weight:700; color:#1b2733; }
.prs-card-sub{ font-size:12px; color:#6b7a89; }
.prs-card-body{ padding:16px; }
.prs-sec{ margin:14px 6px 4px; font-size:13px; font-weight:800; color:#06427a; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid #e3ebf2; padding-bottom:6px; }
.prs-grid{ display:flex; flex-wrap:wrap; margin:-6px; }
.prs-f{ padding:6px; box-sizing:border-box; width:100%; }
.prs-f-1{ width:8.33%; } .prs-f-2{ width:16.66%; } .prs-f-3{ width:25%; } .prs-f-4{ width:33.33%; }
.prs-f-5{ width:41.66%; } .prs-f-6{ width:50%; } .prs-f-7{ width:58.33%; } .prs-f-8{ width:66.66%; }
.prs-f-9{ width:75%; } .prs-f-10{ width:83.33%; } .prs-f-11{ width:91.66%; } .prs-f-12{ width:100%; }
@media (max-width:992px){ .prs-f-1,.prs-f-2,.prs-f-3,.prs-f-4,.prs-f-5{ width:50%; } }
@media (max-width:768px){ .prs-f[class*="prs-f-"]{ width:100%; } }
/* ⚠️ COME `.fl` DI form_grid_css: 11px, blu istituzionale, maiuscoletto.
   Con 12px grigi questa regola vinceva su `.fl` per specificita' e le
   etichette non diventavano mai quelle dello standard. #GIGI 2026-08-23 */
/* `float:none`: `custom.css` flotta ogni label del sito e un editor dentro la
   cella si metteva di fianco all'etichetta. #GIGI 2026-09-28 */
.prs-f label{ display:block; float:none; font-size:11px; font-weight:700; color:#0059b3;
              text-transform:uppercase; margin-bottom:3px; }
.prs-req{ color:#c62828; }
.prs-hint{ font-size:11px; color:#64748b; margin-top:3px; }
/* Stile input/select/textarea dentro la griglia standard (senza dover mettere
   .prs-in su ognuno). .prs-in in base.html.twig resta valida e coerente.

   ⚠️⚠️ TAGLIA Xs — 26px / 12.5px. CORRETTO IL 23/08/2026, ED ERA IL MOTIVO PER
   CUI «LE CASELLE NON DIVENTANO MAI PICCOLE».
   Questo blocco dichiarava 38px e font 14px. `form_grid_css` — che e' IL punto
   unico della taglia — dichiara 26px e 12.5px, ma viene emesso come <style>
   della pagina mentre QUESTO foglio e' un <link> che il layout carica DOPO:
   stessa specificita' (`.prs-f input` = `input.fi`), quindi vinceva sempre
   questo. Risultato: ogni form del portale con la griglia `.prs-*` mostrava
   caselle da 38px per quanto la pagina chiedesse la taglia Xs, e chi provava a
   correggerla nella pagina non otteneva nulla.
   Stessa storia per l'etichetta: `.prs-f label` (0,1,1) batteva `.fl` (0,1,0)
   a prescindere dall'ordine, e le etichette restavano grigie 12px invece che
   blu 11px maiuscole.
   ⛔ NON RIALZARE QUESTI VALORI: la taglia si cambia in `form_grid_css`, e qui
   si resta allineati. */
.prs-f input:not([type=checkbox]):not([type=radio]),
.prs-f select,
.prs-f textarea{
  width:100%; height:26px; border:1px solid #d1d5db; border-radius:5px;
  padding:2px 7px; font-size:12.5px; line-height:1.35; color:#1b2733;
  background:#fff; box-sizing:border-box;
}
.prs-f select{ padding:2px 5px; }
.prs-f input[type=date], .prs-f input[type=time], .prs-f input[type=datetime-local]{
  padding:2px 5px; -webkit-appearance:none; appearance:none;
}
.prs-f textarea{ height:auto; min-height:26px; padding:5px 7px; }
.prs-f input:focus, .prs-f select:focus, .prs-f textarea:focus{ outline:none; border-color:#0059b3; box-shadow:0 0 0 3px rgba(0,89,179,.12); }

/* ── KPI CARDS ── */
.eo-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:16px; }
.eo-kpi{ background:#fff; border:1px solid #e3ebf2; border-radius:12px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,42,67,.04); position:relative; overflow:hidden; }
.eo-kpi::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#06427a; }
.eo-kpi.k-ok::before{ background:#2e7d32; } .eo-kpi.k-warn::before{ background:#e08600; }
.eo-kpi.k-danger::before{ background:#c62828; } .eo-kpi.k-accent::before{ background:#00838f; }
.eo-kpi-lab{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6b7a89; font-weight:700; }
.eo-kpi-val{ font-size:28px; font-weight:800; color:#1b2733; line-height:1.1; margin-top:4px; }
.eo-kpi-sub{ font-size:12px; color:#6b7a89; margin-top:2px; }
.eo-kpi-ic{ position:absolute; right:14px; top:14px; font-size:22px; color:#e3ebf2; }

/* ── PANNELLI ── */
.eo-panel{ background:#fff; border:1px solid #e3ebf2; border-radius:12px; margin:16px; overflow:hidden; }
.eo-panel-h{ padding:12px 16px; border-bottom:1px solid #e3ebf2; display:flex; align-items:center; justify-content:space-between; }
.eo-panel-h h3{ margin:0; font-size:15px; font-weight:700; color:#1b2733; }
.eo-panel-b{ padding:16px; }
.eo-row2{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media (max-width:900px){ .eo-row2{ grid-template-columns:1fr; } }

/* ── TABELLE ELENCO STANDARD ── */
.eo-table{ width:100%; border-collapse:collapse; font-size:13px; }
.eo-table th{ text-align:left; padding:8px 10px; border-bottom:2px solid #e3ebf2; color:#6b7a89; font-weight:700; font-size:12px; text-transform:uppercase; }
.eo-table td{ padding:8px 10px; border-bottom:1px solid #e3ebf2; color:#1b2733; }
.eo-table tr:hover td{ background:#f5f8fb; }
.eo-empty{ text-align:center; color:#6b7a89; padding:26px; font-style:italic; }

/* ── FILTRI STANDARD ── */
.eo-filtri{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:12px 16px; }
.eo-filtri .f{ display:flex; flex-direction:column; }
.eo-filtri label{ font-size:11px; font-weight:700; color:#6b7a89; margin-bottom:3px; text-transform:uppercase; }
.eo-filtri input, .eo-filtri select{ height:34px; border:1px solid #e3ebf2; border-radius:8px; padding:4px 8px; font-size:13px; }

/* ── ALERT STANDARD ── */
.eo-alert{ border-radius:10px; padding:12px 14px; margin:12px 16px; font-size:13px; }
.eo-alert.ok{ background:#e6f4ea; border:1px solid #b7e0c1; color:#1e7a34; }
.eo-alert.warn{ background:#fff8e6; border:1px solid #ffe0a3; color:#8a5a00; }
.eo-alert.danger{ background:#fdecea; border:1px solid #f5c2bd; color:#b3261e; }
.eo-alert ul{ margin:6px 0 0 18px; }

/* ══════════════════════════════════════════════════════════════════
   VARIANTE COMPATTA + FULL-WIDTH (Social Help e schede dense).
   Attivare mettendo la classe .eo-compact sul contenitore di pagina.
   Campi e pulsanti PICCOLI; schede a tutta larghezza dello schermo.
   #GIGI 2026-07-21
   ══════════════════════════════════════════════════════════════════ */
.eo-compact .prs-card,
.eo-compact .eo-panel{ margin:10px; border-radius:8px; }
.eo-compact .eo-panel-b,
.eo-compact .prs-card-body{ padding:10px 12px; }
.eo-compact .prs-grid{ margin:-4px; }
.eo-compact .prs-f{ padding:4px; }
.eo-compact .prs-f label{ font-size:11px; margin-bottom:2px; }
.eo-compact .prs-f input:not([type=checkbox]):not([type=radio]),
.eo-compact .prs-f select,
.eo-compact .prs-f textarea,
/* ⚠️ La variante «compatta» dichiarava 30px, cioe' PIU' GRANDE della base
   ora che la base e' Xs: allineata. #GIGI 2026-08-23 */
.eo-compact .prs-in{ height:26px; font-size:12.5px; padding:2px 7px; border-radius:5px; }
.eo-compact .prs-f textarea{ height:auto; min-height:26px; }
.eo-compact .prs-sec{ font-size:12px; margin:8px 4px 2px; padding-bottom:3px; }
.eo-compact .eo-table th{ padding:5px 8px; font-size:11px; }
.eo-compact .eo-table td{ padding:5px 8px; font-size:12.5px; }
.eo-compact .eo-kpi{ padding:10px 12px; }
.eo-compact .eo-kpi-val{ font-size:22px; }

/* Pulsanti PICCOLI (compatti) riusabili — prefisso .btn-xs coerente con AGID .btn-it */
.btn-xs{ padding:3px 9px; font-size:12px; border-radius:6px; font-weight:600; line-height:1.4;
  display:inline-flex; align-items:center; gap:4px; cursor:pointer; border:1.5px solid transparent;
  text-decoration:none; background:none; white-space:nowrap; }
.btn-xs.b-primary{ color:#06427a; border-color:#06427a; }
.btn-xs.b-primary:hover{ background:#06427a; color:#fff; }
.btn-xs.b-ok{ color:#1e7a34; border-color:#1e7a34; }
.btn-xs.b-ok:hover{ background:#1e7a34; color:#fff; }
.btn-xs.b-danger{ color:#b3261e; border-color:#b3261e; }
.btn-xs.b-danger:hover{ background:#b3261e; color:#fff; }
.btn-xs.b-muted{ color:#475569; border-color:#cbd5e1; }

/* Contenitore pagina a tutta larghezza (schede dense) */
.eo-full{ width:100%; max-width:none; padding:0; }

/* Griglia densa fino a 12 colonne per riga (schede welfare) */
.eo-compact .prs-f-1{ width:8.33%; } .eo-compact .prs-f-5{ width:41.66%; }
.eo-compact .prs-f-7{ width:58.33%; } .eo-compact .prs-f-9{ width:75%; }
.eo-compact .prs-f-10{ width:83.33%; } .eo-compact .prs-f-11{ width:91.66%; }
@media (max-width:768px){ .eo-compact .prs-f[class*="prs-f-"]{ width:100%; } }

/* Badge riservato / dato particolare (GDPR) */
.eo-riservato{ display:inline-flex; align-items:center; gap:4px; background:#fdecea; color:#b3261e;
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }

/* ── TOGGLE / interruttore standard (riusabile) ── #GIGI 2026-07-21 */
.eo-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; white-space:nowrap; }
.eo-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.eo-toggle-sl{ position:relative; width:38px; height:21px; background:#cbd5e1; border-radius:20px; transition:.2s; flex-shrink:0; }
.eo-toggle-sl::after{ content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.eo-toggle input:checked + .eo-toggle-sl{ background:#16a34a; }
.eo-toggle input:checked + .eo-toggle-sl::after{ transform:translateX(17px); }
.eo-toggle-tx{ font-size:13px; color:#334155; font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════════
   #GIGI 2026-08-19 — ASPETTO UNIFORME DI TABELLE E BARRE DI RICERCA
   ══════════════════════════════════════════════════════════════════════════

   Lo STANDARD vero e' `_partials/eo_griglia` (AG Grid) per gli elenchi e
   `_partials/eo_filtri` per la ricerca. La conversione dei 219 template che
   hanno ancora una <table> scritta a mano procede per lotti: nel frattempo
   queste regole danno a TUTTI lo stesso aspetto — densita', intestazioni,
   altezze — senza toccare il markup, quindi senza rischio di rompere pagine.

   Le classi qui elencate sono quelle censite il 19/08/2026:
     .ig-table 83 · .sh-table 76 · .tab 39 · .pub-tab 29 · .dem-tab 17
     .rp-table 14 · .par-tab 12 · .mer-table 12 · .eo-table 9 · .rs-table 8
   Nessuna di queste va piu' AGGIUNTA: si usa `eo_griglia`. Restano qui solo
   per uniformare l'esistente finche' non e' convertito.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ ANCHE `.table` DI BOOTSTRAP. Il censimento del 19/08/2026 aveva contato
   le sole classi dei moduli (`ig-table`, `sh-table`…), ma 8 template usano
   direttamente `class="table table-condensed"` — fra cui `tar/analytics`:
   restavano con l'aspetto di Bootstrap 3 mentre tutto il resto era
   uniformato, e la differenza si vedeva. */
table.ig-table, table.sh-table, table.pub-tab, table.dem-tab,
table.rp-table, table.par-tab, table.mer-table, table.eo-table,
table.rs-table, table.tar-tab, table.fid-tab, table.ris-tab,
.bs-main table.table{
    width:100%; border-collapse:collapse; background:#fff;
    font-size:12.5px; color:#1b2733;
}

/* ── INTESTAZIONE: la stessa ovunque ─────────────────────────────────────
   Prima ogni modulo aveva il proprio grigio, il proprio corpo e la propria
   altezza: passando da una pagina all'altra la tabella «cambiava faccia»
   pur mostrando le stesse cose. */
table.ig-table > thead th, table.sh-table > thead th, table.pub-tab > thead th,
table.dem-tab > thead th, table.rp-table > thead th, table.par-tab > thead th,
table.mer-table > thead th, table.eo-table > thead th, table.rs-table > thead th,
table.tar-tab > thead th, table.fid-tab > thead th, table.ris-tab > thead th,
.bs-main table.table > thead > tr > th{
    background:#f5f7fa; color:#17324d;
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.02em; text-align:left; white-space:nowrap;
    padding:7px 8px; height:30px; box-sizing:border-box;
    border-bottom:1px solid #e3e7ee;
    position:sticky; top:0; z-index:2;      /* la testata resta visibile */
}

/* ── RIGHE: densita' compatta, la stessa di eo_griglia (28px) ─────────── */
table.ig-table > tbody td, table.sh-table > tbody td, table.pub-tab > tbody td,
table.dem-tab > tbody td, table.rp-table > tbody td, table.par-tab > tbody td,
table.mer-table > tbody td, table.eo-table > tbody td, table.rs-table > tbody td,
table.tar-tab > tbody td, table.fid-tab > tbody td, table.ris-tab > tbody td,
.bs-main table.table > tbody > tr > td{
    padding:4px 8px; height:28px; box-sizing:border-box;
    border-bottom:1px solid #f1f4f8; vertical-align:middle;
}
table.ig-table > tbody tr:nth-child(even), table.sh-table > tbody tr:nth-child(even),
table.pub-tab > tbody tr:nth-child(even), table.dem-tab > tbody tr:nth-child(even),
table.rp-table > tbody tr:nth-child(even), table.par-tab > tbody tr:nth-child(even),
table.mer-table > tbody tr:nth-child(even), table.eo-table > tbody tr:nth-child(even),
table.rs-table > tbody tr:nth-child(even), table.tar-tab > tbody tr:nth-child(even),
.bs-main table.table > tbody > tr:nth-child(even){
    background:#fbfcfe;
}
table.ig-table > tbody tr:hover, table.sh-table > tbody tr:hover,
table.pub-tab > tbody tr:hover, table.dem-tab > tbody tr:hover,
table.rp-table > tbody tr:hover, table.par-tab > tbody tr:hover,
table.mer-table > tbody tr:hover, table.eo-table > tbody tr:hover,
table.rs-table > tbody tr:hover, table.tar-tab > tbody tr:hover,
.bs-main table.table > tbody > tr:hover{
    background:#f2f8ff;
}

/* ⚠️ I NUMERI SI ALLINEANO A DESTRA, con cifre di larghezza fissa: incolonnati
   si confrontano a occhio, allineati a sinistra no. `.num`, `.n` e `.euro`
   sono le classi gia' usate nei moduli. */
table[class*="-tab"] .num, table[class*="-table"] .num,
table[class*="-tab"] .n,   table[class*="-table"] .n,
table[class*="-tab"] .euro, table[class*="-table"] .euro{
    text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* la colonna delle azioni non si allarga e non va a capo */
table[class*="-tab"] td.az, table[class*="-table"] td.az,
table[class*="-tab"] th.az, table[class*="-table"] th.az{
    width:1%; white-space:nowrap; padding-left:6px; padding-right:6px;
}

/* ── BARRE DI RICERCA SCRITTE A MANO ─────────────────────────────────────
   Stessa taglia Xs (26px) e stesso pulsante a destra di `eo_filtri`. Le
   altezze censite erano 30, 32 e 34px a seconda del modulo. */
.dem-filtri, .filters, .f-bar, .ig-filtri, .sh-filtri, .eo-filtri{
    display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
    margin:0 0 12px;
}
.dem-filtri > div, .filters > div, .f-bar > div{
    display:flex; flex-direction:column; min-width:0;
}
.dem-filtri label, .filters label, .f-bar label,
.dem-filtri .fl, .filters .fl, .f-bar .fl{
    font-size:11px; font-weight:700; color:#0059b3;
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:3px;
    white-space:nowrap;
}
.dem-filtri input:not([type=checkbox]):not([type=radio]),
.dem-filtri select, .dem-filtri .fi,
.filters input:not([type=checkbox]):not([type=radio]),
.filters select, .filters .fi,
.f-bar input:not([type=checkbox]):not([type=radio]),
.f-bar select, .f-bar .fi{
    height:26px; padding:2px 7px; font-size:12.5px; line-height:1.3;
    border:1px solid #cfd6de; border-radius:5px; box-sizing:border-box;
    background:#fff; color:#1b2733;
}
.dem-filtri select, .filters select, .f-bar select{ padding:2px 5px; }
.dem-filtri input:focus, .dem-filtri select:focus,
.filters input:focus, .filters select:focus,
.f-bar input:focus, .f-bar select:focus{
    outline:none; border-color:#0059b3; box-shadow:0 0 0 2px rgba(0,89,179,.12);
}
/* i pulsanti della barra alla stessa altezza dei campi */
.dem-filtri .btn-it, .filters .btn-it, .f-bar .btn-it,
.dem-filtri .btn, .filters .btn, .f-bar .btn{
    height:26px; padding:0 12px; font-size:12.5px;
    display:inline-flex; align-items:center; gap:5px;
}

/* Le «funzioni del modulo» (i pulsanti in cima alla scrivania) erano qui
   come `.dem-funzioni`/`.dem-fx`, ereditate dal Demanio e riusate a mano
   dagli altri moduli. Ora sono il COMPONENTE UNICO piu' sotto
   (`.eo-cmenu`), con il markup in `_partials/center_menu.html.twig`.
   #GIGI 2026-08-20 */

/* la riga dei due indicatori a destra, sotto le funzioni */
.ids-badge-riga{ display:flex; align-items:center; gap:10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENU CENTRALE DELLA SCRIVANIA — COMPONENTE UNICO. #GIGI 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════
   Markup: templates/_partials/central_menu.html.twig
   Dati:   sic_pagine (centerMenu='on'), via la funzione Twig central_menu()

   Le misure sono COPIATE da `.ids-fx` (templates/ids/base.html.twig), cioe'
   dalla scrivania Imposta di Soggiorno: e' l'aspetto approvato. IDS resta
   com'e' — si copia da li', non si tocca.
   ══════════════════════════════════════════════════════════════════════════ */
.eo-cmenu { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.eo-cmenu-b { display:inline-flex; align-items:center; gap:7px;
              padding:7px 13px; border:1px solid #d1d5db; border-radius:6px;
              background:#fff; color:#334155; text-decoration:none;
              font-size:.84rem; font-weight:600; }
.eo-cmenu-b:hover { border-color:#06c; color:#06c; text-decoration:none; }
.eo-cmenu-b .ic { display:inline-flex; opacity:.75; }
.eo-cmenu-b.primary { background:#06c; border-color:#06c; color:#fff; }
.eo-cmenu-b.primary:hover { background:#004a99; border-color:#004a99; color:#fff; }
.eo-cmenu-b.primary .ic { opacity:1; }

/* ── SELECT2 A SCELTA MULTIPLA: la casella di ricerca interna NON e' un campo.
   #GIGI 2026-09-07 — Federico: «nelle select2 spesso trovo un campo vuoto».
   Era `.select2-search__field`, l'input dove si digita per filtrare le voci:
   ereditava bordo e altezza dai campi della form (`.prs-f input`) e usciva
   come un riquadro vuoto dopo le voci scelte. Vale per TUTTE le select2. */
.select2-container .select2-search--inline .select2-search__field,
.prs-f .select2-container .select2-search--inline .select2-search__field{
    border:0 !important; box-shadow:none !important; background:transparent !important;
    outline:0 !important; height:auto !important; min-height:20px; margin:2px 0 0 !important; padding:0 4px !important;
}
.select2-container--default .select2-selection--multiple{ min-height:26px; padding:0 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice{ margin:2px 2px 0 0; }