@font-face{font-family:"72";font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/ui5/fonts/72-Regular.woff2) format("woff2");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
@font-face{font-family:"72";font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/ui5/fonts/72-Semibold.woff2) format("woff2");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
@font-face{font-family:"72";font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/ui5/fonts/72-Bold.woff2) format("woff2");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
@font-face{font-family:"72full";font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/ui5/fonts/72-Regular-full.woff2) format("woff2")}
@font-face{font-family:"72full";font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/ui5/fonts/72-Bold-full.woff2) format("woff2")}

/* =====================================================================
   1. TOKEN
   ===================================================================== */

:root{
  /* Fa rendere ai controlli nativi (checkbox, frecce delle select, date
     picker) la variante scura. Senza, in tema scuro le checkbox restano
     bianche e stonano. */
  color-scheme:dark;

  /* --- Neutri, tema scuro = SAP Evening Horizon ---------------------
     Valori presi dal tema `sap_horizon_dark` di SAP/theming-base-content
     (Apache-2.0), file content/Base/baseLib/<tema>/css_variables.css.
     La corrispondenza token per token sta in
     .claude/skills/fiori/references/tokens.md.                        */
  --bg:#12171c;         /* sapBackgroundColor          */
  --surface:#1d232a;    /* sapShellColor / sapTile_Background */
  --surface-2:#232a33;  /* un gradino sopra: Horizon non ce l'ha, serve
                           a distinguere una card dentro una card       */
  --surface-3:#242e38;  /* sapNeutralBackground        */
  --line:rgba(245,246,247,.10);
  --line-strong:rgba(245,246,247,.18);

  --ink:#f5f6f7;      /* sapTextColor          */
  --ink-2:#c5ced6;    /* testo secondario      */
  --ink-3:#8396a8;    /* sapContent_LabelColor */
  --ink-4:#6b7b8c;    /* decorativo            */

  /* --- Semantici (NON usare come accento) ---------------------------
     I fondi sono TINTE PIENE e non rgba, come in Horizon: un chip su
     fondo pieno resta leggibile anche sopra una card di colore diverso,
     mentre un rgba cambia resa a seconda di cosa ha sotto.            */
  --pos:#97dd40;      --pos-soft:#11331a;   /* sapPositiveColor  */
  --neg:#fa6161;      --neg-soft:#350000;   /* sapNegativeColor  */
  --warn:#ffdf72;     --warn-soft:#382700;  /* sapCriticalColor  */
  /* Indicatore critico: barre, icone, bordi — dove basta 3:1 e serve
     l'arancione riconoscibile di Fiori invece del giallo testuale.    */
  --warn-ind:#ffdf72;

  /* --- Spaziatura (scala 4px) --------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* --- Raggi --------------------------------------------------------- */
  /* La scala di Horizon: sapField .25rem, sapButton .5rem,
     sapElement .75rem, sapTile 1rem. I tre gradini che c'erano gia'
     combaciavano; mancava solo quello dei campi, che in Fiori sono
     molto meno arrotondati di tutto il resto — e' il dettaglio che fa
     leggere un form come un form.                                     */
  --r-field:4px;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-full:999px;

  /* --- Elevazione: tre livelli, tutti leggeri ------------------------ */
  --e1:0 0 2px 0 rgba(0,0,0,.36), 0 2px 4px 0 rgba(0,0,0,.36);
  --e2:0 0 0 1px rgba(0,0,0,.5), 0 2px 8px 0 rgba(0,0,0,.45);
  --e3:0 0 0 1px rgba(0,0,0,.5), 0 10px 30px 0 rgba(0,0,0,.5);

  /* --- Tipografia ---------------------------------------------------- */
  --sans:"72","72full",Arial,Helvetica,sans-serif;
  --display:"72","72full",Arial,Helvetica,sans-serif;
  /* Il monospaziato non e' un carattere nostro: e' quello di sistema, a
     costo zero di byte. Serve dove il testo fa il verso a un terminale
     (la tenda di caricamento) e dove le cifre devono incolonnarsi in
     uno spazio stretto. */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* --- Layout -------------------------------------------------------- */
  --content-max:640px;      /* sotto i 1024px */
  --content-max-lg:1140px;  /* sopra          */
  /* Quanto alza i toast e il FAB la barra in basso del telefono: zero dove
     la barra non c'e' (PC, schermata di sblocco), la sua altezza dove c'e'
     (sezione 4, "Tab bar"). */
  --tabbar-h:0px;

  --dur:.18s;
  --ease:cubic-bezier(.32,.72,0,1);
}

html[data-theme="light"]{
  color-scheme:light;
  /* SAP Morning Horizon */
  --bg:#f5f6f7;         /* sapBackgroundColor              */
  --surface:#ffffff;    /* sapGroup_ContentBackground      */
  --surface-2:#ffffff;
  --surface-3:#eff1f2;  /* sapNeutralBackground            */
  --line:rgba(19,30,41,.10);
  --line-strong:rgba(19,30,41,.18);

  --ink:#131e29;      /* sapTextColor          */
  --ink-2:#3f4f5c;
  --ink-3:#556b82;    /* sapContent_LabelColor */
  --ink-4:#758ca4;    /* sapContent_ForegroundBorderColor */

  --pos:#256f3a;      --pos-soft:#f5fae5;   /* sapPositiveColor */
  --neg:#aa0808;      --neg-soft:#ffeaf4;   /* sapNegativeColor */
  /* Il critico di Horizon (#e76500) vale 3,36:1 sul bianco e 3,14:1 sul
     proprio chip: sotto la soglia 4,5 del testo piccolo. In Fiori quel
     valore e' l'INDICATORE (icone, barre, bordi — contesti da 3:1), e il
     testo critico usa una tinta piu' scura. Qui la distinzione e'
     esplicita: --warn per il testo, --warn-ind per l'indicatore.      */
  --warn:#b04600;     --warn-soft:#fff8d6;
  --warn-ind:#e76500; /* sapCriticalColor, invariato */

  /* Ombre di Horizon (sapContent_Shadow0/1/2), convertite da rem a px. */
  --e1:0 0 2px 0 rgba(34,53,72,.2), 0 2px 4px 0 rgba(34,53,72,.2);
  --e2:0 0 0 1px rgba(34,53,72,.16), 0 2px 8px 0 rgba(34,53,72,.18);
  --e3:0 0 0 1px rgba(34,53,72,.16), 0 10px 30px 0 rgba(34,53,72,.22);
}

/* --- Accenti ---------------------------------------------------------
   Un solo colore non puo' fare tutto: come grafica gli basta 3:1, come
   testo piccolo gliene servono 4.5. Da qui tre varianti per accento:

     --accent       icone, bordi, barre, numeri grandi     (>= 3:1)
     --accent-fill  superfici piene: bottoni, FAB          (bianco >= 4.5:1)
     --accent-text  testo piccolo: chip, link              (>= 4.5:1, anche
                    steso sul proprio fondo tenue --accent-soft)

   Piu' --accent-hi (hover), --accent-soft (tinta), --on-accent.
   Nessuno di questi e' verde o rosso: quei due restano semantici.      */

/* Horizon: il blu di SAP, ed e' il predefinito.
   `sapBrandColor` vale #0070f2 e sul bianco fa 4,57:1 — passa la soglia
   del testo piccolo per un soffio, quindi puo' fare da riempimento. Per
   il testo su card si usa `sapHighlightColor` (#0064d9 chiaro, #4db1ff
   scuro), che e' anche il colore dei link in Horizon.                 */
:root,
html[data-accent="horizon"]{
  --accent:#4db1ff; --accent-hi:#7cc5ff; --accent-soft:#00144a;
  --accent-fill:#0070f2; --accent-fill-hi:#0064d9; --accent-text:#4db1ff;
  --on-accent:#ffffff;
}
html[data-theme="light"][data-accent="horizon"],
html[data-theme="light"]{
  --accent:#0064d9; --accent-hi:#0057bd; --accent-soft:#e1f4ff;
  --accent-fill:#0070f2; --accent-fill-hi:#0064d9; --accent-text:#0064d9;
  --on-accent:#ffffff;
}

html[data-accent="indigo"]{
  --accent:#6f5cf0; --accent-hi:#8272ff; --accent-soft:#1a1240;
  --accent-fill:#6f5cf0; --accent-fill-hi:#8272ff; --accent-text:#8b7cf3;
  --on-accent:#ffffff;
}
html[data-theme="light"][data-accent="indigo"]{
  --accent:#5343cf; --accent-hi:#4535b8; --accent-soft:rgba(83,67,207,.11);
  --accent-fill:#5343cf; --accent-fill-hi:#4535b8; --accent-text:#5343cf;
  --on-accent:#ffffff;
}

html[data-accent="blue"]{
  --accent:#3b8ef0; --accent-hi:#5aa2f5; --accent-soft:#0a1f3d;
  --accent-fill:#1273e6; --accent-fill-hi:#3b8ef0; --accent-text:#3b8ef0;
  --on-accent:#ffffff;
}
html[data-theme="light"][data-accent="blue"]{
  --accent:#1f6fd0; --accent-hi:#175bb0; --accent-soft:rgba(31,111,208,.11);
  --accent-fill:#1f6fd0; --accent-fill-hi:#175bb0; --accent-text:#1e6bc9;
}

html[data-accent="violet"]{
  --accent:#a06bf0; --accent-hi:#b485f7; --accent-soft:#241041;
  --accent-fill:#9052ed; --accent-fill-hi:#a06bf0; --accent-text:#a572f1;
  --on-accent:#ffffff;
}
html[data-theme="light"][data-accent="violet"]{
  --accent:#7c45c8; --accent-hi:#68389f; --accent-soft:rgba(124,69,200,.11);
  --accent-fill:#7c45c8; --accent-fill-hi:#68389f; --accent-text:#7c45c8;
}

html[data-accent="graphite"]{
  --accent:#d6d9e0; --accent-hi:#eceef2; --accent-soft:#2b323b;
  --accent-fill:#d6d9e0; --accent-fill-hi:#eceef2; --accent-text:#d6d9e0;
  --on-accent:#14161b;
}
html[data-theme="light"][data-accent="graphite"]{
  --accent:#2b2f38; --accent-hi:#151820; --accent-soft:rgba(43,47,56,.09);
  --accent-fill:#2b2f38; --accent-fill-hi:#151820; --accent-text:#2b2f38;
  --on-accent:#ffffff;
}


/* =====================================================================
   2. RESET E BASE
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  min-height:100dvh;
  transition:background-color var(--dur),color var(--dur);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{display:block}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* Focus visibile e coerente ovunque: requisito di accessibilita', non
   un dettaglio. Solo da tastiera, per non disturbare il tocco. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}


/* =====================================================================
   3. TIPOGRAFIA
   ===================================================================== */

.display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,7vw,42px);line-height:1.08;letter-spacing:-.015em;
}
.h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(23px,5vw,30px);line-height:1.14;letter-spacing:-.01em;
}
.h2{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.h3{font-size:15px;font-weight:600;line-height:1.35}

/* Il corsivo d'accento nei titoli: "Le mie <em>fatture</em>" */
.display em,.h1 em{font-style:italic;color:var(--accent)}

.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.muted{color:var(--ink-3)}
.small{font-size:13px}

/* Cifre: sempre tabulari, sempre allineate in colonna. */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.pos{color:var(--pos)}
.neg{color:var(--neg)}
.warn{color:var(--warn)}
/* Utility per testo: usa la variante leggibile, non quella grafica. */
.accent{color:var(--accent-text)}
/* Bottone che sta dentro una frase: e' un'azione, ma nel mezzo di un
   paragrafo si legge e si tocca come un link. */
.linklike{color:var(--accent-text);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}


/* =====================================================================
   4. SHELL — sotto 1024px: colonna + tab bar. Sopra: sidebar + griglia.
   ===================================================================== */

/* --- Colonna principale ---------------------------------------------- */
.main{flex:1;min-width:0;max-width:100%;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:calc(var(--sp-4) + env(safe-area-inset-top,0px))
          calc(var(--sp-4) + env(safe-area-inset-right,0px))
          var(--sp-3)
          calc(var(--sp-4) + env(safe-area-inset-left,0px));
  max-width:var(--content-max);margin:0 auto;width:100%;
}
.topbar-title{flex:1;min-width:0}
.topbar-title .eyebrow{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.topbar-title .h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:var(--sp-2);flex:none}

.content{
  flex:1;width:100%;max-width:var(--content-max);margin:0 auto;
  padding:0 calc(var(--sp-4) + env(safe-area-inset-right,0px))
          calc(var(--tabbar-h) + var(--sp-8) + env(safe-area-inset-bottom,0px))
          calc(var(--sp-4) + env(safe-area-inset-left,0px));
}

@media (min-width:1024px){
  .topbar,.content{max-width:var(--content-max-lg)}
  .topbar{padding-top:var(--sp-7);padding-left:var(--sp-7);padding-right:var(--sp-7)}
  .content{padding-left:var(--sp-7);padding-right:var(--sp-7);padding-bottom:var(--sp-9)}
  /* Pagine pensate per una colonna sola (il timesheet): stirarle su 1140px
     non aggiunge informazione, allunga solo le righe.
     Il margine sinistro non e' 0: e' lo STESSO di una pagina normale, cioe'
     quello che le lascerebbe il centraggio su 1140px. Con `margin-left:0`
     la colonna partiva incollata alla sidebar e passando da /ore a
     qualunque altra scheda tutto il contenuto saltava di lato di quei
     pixel. Sotto i 1140px di colonna utile il max() vale 0 e le due
     famiglie di pagine tornano a coincidere da sole. */
  .topbar.single,.content.single{
    max-width:760px;
    margin-left:max(0px, calc((100% - var(--content-max-lg)) / 2));
    margin-right:auto;
  }
}

/* --- Tab bar (solo mobile/tablet) ------------------------------------
   Le voci di primo livello della navigazione (shared/theme.py::_tabbar),
   sotto il pollice. Sta fuori dalla cornice UI5: la cornice finisce sopra
   di lei (ui5-navigation-layout, sezione 9), cosi' l'ultima riga della
   pagina non le resta sotto. */
@media (max-width:1023px){
  :root:has(body > .tabbar){--tabbar-h:62px}
}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom,0px));
  background:var(--surface);
  background:linear-gradient(0deg,
    color-mix(in srgb,var(--surface) 96%,var(--ink)) 0%,
    color-mix(in srgb,var(--surface) 90%,transparent) 100%);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:52px;padding:6px 4px;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:10.5px;font-weight:500;letter-spacing:.01em;
  transition:color var(--dur);
}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tab.is-active{color:var(--sapSelectedColor,var(--accent-text));font-weight:700}
.tab:focus-visible{outline:var(--sapContent_FocusWidth,.125rem) solid
  var(--sapContent_FocusColor,#0070f2);outline-offset:-4px}
.tab:active{transform:scale(.94)}

@media (min-width:1024px){
  .tabbar{display:none}
}

/* =====================================================================
   5. GRIGLIA
   ===================================================================== */

.stack{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.stack>*{min-width:0}
.stack.gap-lg{gap:var(--sp-5)}

.grid{display:grid;gap:var(--sp-3);min-width:0}
.grid>*{min-width:0}
/* Tessere KPI: si dispongono da sole, nessun breakpoint da mantenere. */
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
/* Con tre tessere su schermo stretto, due righe da 2+1 lasciano l'ultima
   spaiata. Con .lead la prima prende tutta la riga e le altre due si
   affiancano sotto: la gerarchia diventa anche visiva. */
@media (max-width:719px){
  .grid.kpi.lead>:first-child{grid-column:1/-1}
}
.grid.cols-2{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
  .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Colonna larga + colonna stretta, tipica delle dashboard desktop */
.grid.split{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .grid.split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-4)}
}


/* =====================================================================
   6. COMPONENTI
   ===================================================================== */

/* --- Card ------------------------------------------------------------- */
.card{
  min-width:0;
  /* Il velo dall'alto e' quasi invisibile (3% del testo sul fondo della
     card) e serve a staccare la card dallo sfondo senza alzare l'ombra:
     in Fiori la profondita' la fa la superficie, non l'ombra.        */
  background:var(--surface);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 97%,var(--ink)) 0%,
    var(--surface) 42%);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  box-shadow:var(--e1);
}
.card-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.card-head .eyebrow{margin:0}
.card-link{display:block;transition:border-color var(--dur),background-color var(--dur)}
@media (hover:hover){.card-link:hover{border-color:var(--line-strong)}}
.card.flush{padding:0;overflow:hidden}

/* --- Statistica -------------------------------------------------------- */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .val{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,5.5vw,34px);line-height:1.05;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{font-size:12px;color:var(--ink-3)}
/* `.hint` e' una utility, non un discendente. Era dichiarata solo dentro
   `.stat` e `.field`, ma viene usata da sola in cinque punti (Revolut,
   Risparmi, il timesheet, l'export): li' restava testo pieno, grande
   come il corpo — una nota che grida piu' forte della cosa che annota. */
.hint{font-size:12px;color:var(--ink-3);line-height:1.45}
.stat .hint{margin-top:2px}
.stat.sm .val{font-size:22px}

/* --- Elemento che apre un dettaglio al click (drill-down "come si calcola") */
.clickable{cursor:pointer;transition:opacity .15s}
.clickable:hover{opacity:.72}

/* --- Righe tabellari ----------------------------------------------------
   Flex e non grid: cosi' la riga funziona sia con due figli (etichetta +
   valore) sia con tre (data + testo + valore) senza varianti.          */
.rows{display:flex;flex-direction:column;min-width:0}
.row{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:11px 0;border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:0}
.row .k{flex:none;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.row .t{display:block;flex:1;min-width:0;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t .sub{display:block;font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis}
.row .v{flex:none;text-align:right;font-size:14px;font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Riga che chiude una cascata di addendi: il filo sopra e il peso del
   testo dicono "qui si tira la somma", senza doverlo scrivere in ogni
   etichetta. `.row.voce` e' invece un addendo rientrato, per distinguere
   a colpo d'occhio le parti dal totale che le raccoglie — e' la
   confusione che rendeva illeggibile il dettaglio dei Risparmi. */
.rows .row.tot{border-top:1px solid var(--line-strong);border-bottom:0}
.rows .row.tot .t,.rows .row.tot .v{font-weight:600}
.rows .row.voce .t{padding-left:var(--sp-3)}

/* Righe esplicative: il testo puo' andare a capo, niente ellissi. */
.rows.detail .row{align-items:flex-start}
.rows.detail .row .t{white-space:normal;overflow:visible}
.rows.detail .row .t .sub{white-space:normal;line-height:1.4;margin-top:2px}

/* --- Lista di elementi cliccabili ---------------------------------------- */
.list{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:13px var(--sp-4);min-height:62px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--e1);
  transition:border-color var(--dur),background-color var(--dur),transform var(--dur);
}
.item:active{transform:scale(.99)}
@media (hover:hover){.item:hover{border-color:var(--line-strong);background:var(--surface-2)}}
.item .body{display:block;flex:1;min-width:0}
.item .body .n{display:block;font-size:14.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .body .m{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sul telefono (e col testo di sistema ingrandito) il titolo di una voce
   va a capo una volta prima di essere tagliato: il nome del cliente o la
   descrizione della banca si leggono, non si indovinano. */
@media (max-width:600px){
  .item .body .n, .item .body .m, .row .t{white-space:normal;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
}
.item .end{flex:none;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px}
.item .end .amt{font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}

/* Un gruppo dentro una .list: la banca che contiene i suoi conti. Il
   filo a sinistra dei figli dice "questi stanno sotto quello sopra". */
.gruppo-conti{display:flex;flex-direction:column;gap:var(--sp-2)}
.gruppo-testa{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) 0;font-size:12.5px;font-weight:600;
  color:var(--ink-3);letter-spacing:.02em}
.gruppo-testa svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gruppo-conti .item.figlio{margin-left:var(--sp-5);position:relative}
.gruppo-conti .item.figlio::before{content:"";position:absolute;
  left:calc(var(--sp-5) * -1 + 10px);top:-6px;bottom:50%;
  width:1px;background:var(--line)}
.gruppo-conti .item.figlio::after{content:"";position:absolute;
  left:calc(var(--sp-5) * -1 + 10px);top:50%;width:11px;height:1px;
  background:var(--line)}

/* Icona quadrata a sinistra (menu, categorie) */
.ico{
  width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
}
.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:46px;height:46px;border-radius:13px}
.ico.lg svg{width:23px;height:23px}
.ico.neutral{background:var(--surface-3);color:var(--ink-2)}
.ico.pos{background:var(--pos-soft);color:var(--pos)}
.ico.neg{background:var(--neg-soft);color:var(--neg)}
.ico.warn{background:var(--warn-soft);color:var(--warn)}

.chev{flex:none;color:var(--ink-4)}
.chev svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Bottoni -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:11px var(--sp-5);border-radius:var(--r-xs);
  /* Gradiente appena percettibile: Horizon e' un tema piatto, ma un
     filo di profondita' sul riempimento aiuta a leggere il bottone come
     premibile. Se lo si spinge smette di essere Fiori.               */
  background:var(--accent-fill);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent-fill) 92%,#fff) 0%,
    var(--accent-fill) 100%);
  color:var(--on-accent);
  font-size:14.5px;font-weight:600;letter-spacing:.005em;
  transition:background-color var(--dur),transform var(--dur),opacity var(--dur);
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:scale(.98)}
@media (hover:hover){.btn:hover{
  background:var(--accent-fill-hi);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent-fill-hi) 92%,#fff) 0%,
    var(--accent-fill-hi) 100%);
}}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
@media (hover:hover){.btn.ghost:hover{background:var(--surface-3)}}
.btn.danger{background:transparent;color:var(--neg);border:1px solid var(--neg-soft)}
@media (hover:hover){.btn.danger:hover{background:var(--neg-soft)}}
.btn.block{width:100%}
/* Azione secondaria dentro un avviso o accanto a un titolo: piu' bassa
   del bottone pieno, ma **non** sotto i 36px — e' l'altezza cozy di
   Fiori, il minimo per un pollice. La classe era gia' usata in
   spese/movimenti.py senza esistere: il bottone usciva a taglia piena
   e nessuno se n'era accorto. */
.btn.sm{min-height:36px;padding:7px var(--sp-4);font-size:13.5px}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
.actions .btn{flex:1;min-width:130px}
.actions.col{flex-direction:column}
.actions.col .btn{width:100%}

/* Bottone icona (barra in alto) */
.icon-btn{
  width:40px;height:40px;flex:none;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line);
  transition:border-color var(--dur),color var(--dur),background-color var(--dur);
}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.icon-btn:hover{color:var(--ink);background:var(--surface-3)}}
.icon-btn:active{transform:scale(.94)}

/* FAB: sopra la tab bar su mobile, in basso a destra su desktop */
.fab{
  position:fixed;z-index:70;
  right:calc(var(--sp-4) + env(safe-area-inset-right,0px));
  bottom:calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:52px;padding:0 var(--sp-5);border-radius:var(--r-full);
  background:var(--accent-fill);color:var(--on-accent);
  font-size:14.5px;font-weight:600;box-shadow:var(--e3),var(--e1);
}
.fab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fab:active{transform:scale(.97)}
@media (min-width:1024px){
  .fab{bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px));right:var(--sp-6)}
}

/* --- Chip ------------------------------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-field);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  background:var(--surface-3);color:var(--ink-2);white-space:nowrap;
}
.chip.accent{background:var(--accent-soft);color:var(--accent-text)}
.chip.pos{background:var(--pos-soft);color:var(--pos)}
.chip.neg{background:var(--neg-soft);color:var(--neg)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}

/* --- Avvisi ---------------------------------------------------------------- */
.notice{
  padding:13px var(--sp-4);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:13.5px;line-height:1.5;
}
.notice.warn{border-color:var(--warn-soft);background:var(--warn-soft);color:var(--ink)}
.notice.err{border-color:var(--neg-soft);background:var(--neg-soft);color:var(--ink)}
.notice.info{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--ink)}
.notice code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;
  padding:1px 5px;border-radius:5px;background:var(--surface-3);
}
.notice-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap}
.notice-row button{color:var(--accent-text);font-weight:600;white-space:nowrap}

/* --- Form -------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3)}
/* Le etichette dei campi restano in minuscolo: il maiuscoletto e' gia'
   usato dalle intestazioni di sezione (.eyebrow), e due livelli di
   maiuscolo nello stesso modulo appiattiscono la gerarchia. */
.field label{font-size:12.5px;font-weight:500;color:var(--ink-3)}
/* Stessa altezza con o senza la "i": il cerchio da 16px allineato alla
   linea di base allungava l'etichetta, e i campi senza spiegazione
   finivano piu' attaccati al campo sopra, come in Parametri fiscali. */
.field:not(.inline)>label{display:flex;align-items:center;min-height:18px}
.field input,.field select,.field textarea,.input{
  width:100%;min-height:44px;padding:11px var(--sp-3);
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-field);
  font-size:15px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .input{background:var(--surface-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent);
}
.field input[disabled],.field select[disabled],.field textarea[disabled]{opacity:.55;cursor:not-allowed}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
.field.inline{flex-direction:row;align-items:center;gap:var(--sp-3)}
.field.inline label{font-size:14px;font-weight:400;color:var(--ink);margin:0}
.field.inline input[type=checkbox]{width:20px;height:20px;min-height:0;flex:none;
  accent-color:var(--accent)}

.field-group{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
@media (min-width:520px){
  .field-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-group.c3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
}
.field-group>.field{margin-bottom:0}
/* Due gruppi di fila, o un gruppo seguito da un campo: senza questo il
   secondo si attaccava al primo (Parametri fiscali: "INPS gestione
   separata" a 10px dal campo sopra, gli altri a 22). */
.field-group+.field-group,.field-group+.field{margin-top:var(--sp-3)}

/* Select compatta usata nelle toolbar di filtro */
.select-pill{
  min-height:40px;padding:8px var(--sp-4) 8px var(--sp-3);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  font-size:13.5px;
}
.select-pill:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.toolbar{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}

/* --- Menu a tendina in stile Fiori ---------------------------------------
   La tendina nativa la disegna il sistema operativo, non noi: su Android
   diventa un elenco a tutta pagina, testo che va a capo a meta' frase,
   pallini radio e nessun modo di mostrare un importo o uno stato accanto
   alla voce. In un'app dove le voci sono "Agosto 2026 · 13 ago → 2 set —
   da allineare" quell'elenco e' illeggibile, e due periodi dello stesso
   mese sembrano un doppione.

   Qui il `<select>` resta nel DOM — e' lui a tenere il valore, a far
   partire `onchange` e a funzionare se il JS non gira — ma viene
   nascosto e affiancato da un bottone piu' un popover che disegniamo
   noi: icona, titolo, sottotitolo, stato colorato e valore a destra.
   E' il "Select" di Fiori: su schermo largo una lista ancorata al
   campo, sul telefono un foglio dal basso.  Il JS sta in
   shared/theme.py::_SELECT_JS. */
.fsel{position:relative;display:inline-flex;min-width:0;max-width:100%;
  vertical-align:middle}
.fsel.block{display:flex;width:100%}
.fsel-btn{
  display:flex;align-items:center;gap:var(--sp-2);
  width:100%;min-width:0;min-height:40px;padding:8px var(--sp-3);
  background:var(--surface);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 96%,#fff) 0%, var(--surface) 100%);
  color:var(--ink);text-align:left;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  font-size:13.5px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
/* Dentro un form si veste come gli altri campi, non come una pillola di
   filtro: stessa altezza, stesso raggio, stesso fondo. */
.fsel.is-field{display:flex;width:100%}
.fsel.is-field .fsel-btn{min-height:44px;padding:11px var(--sp-3);
  border-radius:var(--r-field);font-size:15px;background:var(--bg)}
html[data-theme="light"] .fsel.is-field .fsel-btn{background:var(--surface-3)}
.fsel-emo{flex:none;font-size:15px;line-height:1.2}
.fsel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:500}
.fsel-chev{flex:none;width:8px;height:8px;margin-left:2px;
  border-right:1.7px solid var(--ink-3);border-bottom:1.7px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur)}
.fsel.is-open .fsel-btn{border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft)}
.fsel.is-open .fsel-chev{transform:rotate(-135deg) translateY(-2px)}
.fsel-btn:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent)}
.fsel.is-disabled{opacity:.55}
.fsel.is-disabled .fsel-btn{cursor:not-allowed}
/* Il select vero resta: tiene il valore e fa scattare `onchange`. Non
   `display:none`, che lo toglierebbe anche ai lettori di schermo e alla
   validazione del form. */
.fsel-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fsel-veil{position:fixed;inset:0;z-index:600;
  background:rgba(6,7,10,.6);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity var(--dur)}
.fsel-veil.show{opacity:1}
html[data-theme="light"] .fsel-veil{background:rgba(30,34,44,.32)}
/* Su schermo largo il velo resta, ma invisibile: serve solo a
   raccogliere il click fuori dal pannello. Oscurare l'intera pagina per
   cambiare un filtro e' un peso che Fiori mette solo sui dialoghi veri;
   sul telefono il foglio dal basso *e'* un dialogo, e li' il velo si
   vede. */
@media (min-width:720px){
  .fsel-veil,html[data-theme="light"] .fsel-veil{
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
}

.fsel-pop{
  position:fixed;z-index:610;display:flex;flex-direction:column;
  min-width:240px;max-width:calc(100vw - 24px);
  max-height:min(64vh,540px);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:var(--e3);overflow:hidden;
}
.fsel-pop[hidden]{display:none}
.fsel-head{display:flex;align-items:center;gap:var(--sp-3);
  padding:12px var(--sp-4) 11px;border-bottom:1px solid var(--line);
  background:var(--surface-2);
  background:linear-gradient(180deg,var(--surface-2) 0%,
    color-mix(in srgb,var(--surface-2) 70%,var(--surface)) 100%)}
.fsel-tit{flex:1;min-width:0;font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fsel-x{flex:none;width:30px;height:30px;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink-3);font-size:17px;
  line-height:1;cursor:pointer}
@media (hover:hover){.fsel-x:hover{background:var(--surface-3);color:var(--ink)}}
.fsel-aiuto{padding:9px var(--sp-4);border-bottom:1px solid var(--line);
  background:var(--surface-2);font-size:12px;line-height:1.45;color:var(--ink-3)}
.fsel-cerca{padding:10px var(--sp-3);border-bottom:1px solid var(--line)}
.fsel-cerca input{width:100%;min-height:38px;padding:9px var(--sp-3);
  background:var(--bg);color:var(--ink);font-size:14px;
  border:1px solid var(--line-strong);border-radius:var(--r-field)}
html[data-theme="light"] .fsel-cerca input{background:var(--surface-3)}
.fsel-cerca input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft)}
.fsel-lista{overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.fsel-opt{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  width:100%;padding:11px var(--sp-4);text-align:left;cursor:pointer;
  border-left:3px solid transparent;
  transition:background-color var(--dur);
}
.fsel-opt+.fsel-opt{border-top:1px solid var(--line)}
@media (hover:hover){.fsel-opt:hover{background:var(--surface-2)}}
.fsel-opt.is-att{background:var(--surface-2)}
.fsel-opt.is-sel{background:var(--accent-soft);border-left-color:var(--accent)}
.fsel-oemo{flex:none;width:22px;text-align:center;font-size:17px;line-height:1.3}
.fsel-ot{flex:1;min-width:0}
.fsel-otit{display:block;font-size:14px;font-weight:500;color:var(--ink);
  line-height:1.3}
.fsel-opt.is-sel .fsel-otit{color:var(--accent-text);font-weight:600}
.fsel-osub{display:block;font-size:12px;color:var(--ink-3);line-height:1.4;
  margin-top:2px}
.fsel-onota{display:inline-block;margin-top:4px;padding:2px 8px;
  border-radius:var(--r-field);font-size:11px;font-weight:500;
  background:var(--surface-3);color:var(--ink-2)}
.fsel-onota.pos{background:var(--pos-soft);color:var(--pos)}
.fsel-onota.neg{background:var(--neg-soft);color:var(--neg)}
.fsel-onota.warn{background:var(--warn-soft);color:var(--warn)}
.fsel-onota.accent{background:var(--accent-soft);color:var(--accent-text)}
.fsel-oinfo{flex:none;font-size:13.5px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.fsel-vuoto{padding:var(--sp-6) var(--sp-4);text-align:center;
  font-size:13px;color:var(--ink-3)}

/* Sul telefono e' un foglio dal basso: il pollice arriva, e la lista ha
   la larghezza intera invece di una colonnina ancorata al campo. */
@media (max-width:719px){
  .fsel-pop.sheet{left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:100%;max-height:82dvh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:fsel-su .22s var(--ease)}
}
@keyframes fsel-su{from{transform:translateY(10%);opacity:.5}
  to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .fsel-pop.sheet{animation:none}
}

/* --- Emoji di stato --------------------------------------------------------
   Non decorazione: sono il primo appiglio di una lista lunga. Dimensione
   fissa e `font-style:normal` perche' dentro un <em> o una <label> in
   corsivo un'emoji si deforma. */
.emo{font-style:normal;font-weight:400;font-size:15px;line-height:1;
  margin-right:3px;vertical-align:-1px}

/* Riga di un periodo di paga: emoji di stato, mese, estremi, stato. */
.row.per{padding-left:var(--sp-2);padding-right:var(--sp-2);
  border-radius:var(--r-field)}
.row.per.is-qui{background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent)}
.per-emo{flex:none;width:22px;text-align:center;font-size:17px;line-height:1.3;
  font-style:normal}
.rows.detail .row.per .t .sub{display:flex;flex-wrap:wrap;align-items:center;
  gap:6px;margin-top:3px}
.per-st{padding:1px 7px;border-radius:var(--r-field);font-size:11px;
  font-weight:500;background:var(--surface-3);color:var(--ink-2)}
.per-st.pos{background:var(--pos-soft);color:var(--pos)}
.per-st.warn{background:var(--warn-soft);color:var(--warn)}
.per-st.accent{background:var(--accent-soft);color:var(--accent-text)}
.per-est{font-variant-numeric:tabular-nums}
.per-num{flex-basis:100%}

/* Controllo segmentato */
.segmented{
  display:inline-flex;padding:3px;gap:2px;
  background:var(--surface-3);border-radius:var(--r-full);
}
.segmented button{
  padding:7px var(--sp-4);border-radius:var(--r-full);
  font-size:13px;font-weight:500;color:var(--ink-3);
  transition:background-color var(--dur),color var(--dur);
}
.segmented button.is-active{background:var(--surface);color:var(--ink);
  box-shadow:var(--e1)}

/* --- Barra di avanzamento ------------------------------------------------------ */
.meter{height:7px;border-radius:var(--r-full);background:var(--surface-3);
  overflow:hidden}
.meter>i{display:block;height:100%;border-radius:var(--r-full);
  background:var(--accent);transition:width .5s var(--ease)}
.meter>i.pos{background:var(--pos)}
.meter>i.warn{background:var(--warn)}
.meter>i.neg{background:var(--neg)}

/* Barra a segmenti: scompone un importo in quote (es. tuo / INPS / imposta) */
.bar-split{display:flex;height:10px;border-radius:var(--r-full);overflow:hidden;
  background:var(--surface-3)}
.bar-split>span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-3)}
.legend>div{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.legend .dot{width:9px;height:9px;border-radius:3px;flex:none}

/* --- La "i": una spiegazione che non occupa spazio finché non la chiedi -----
   Le descrizioni sotto le righe erano oneste ma rumorose: su una card con
   dieci voci, dieci sottotitoli grigi raddoppiano l'altezza e si smette di
   leggerli. Qui la spiegazione resta, ma dietro un bersaglio da 16px che
   apre un fumetto e lo tiene aperto finché non si clicca altrove.

   Il fumetto e' `position:fixed` e viene piazzato dal JS: dentro una card
   con `overflow:hidden`, o vicino al bordo dello schermo, un popover in
   posizione assoluta verrebbe tagliato. Fisso non puo' essere tagliato da
   nessun antenato, e il JS lo tiene dentro il viewport. */
.info-w{display:inline-flex;vertical-align:baseline;margin-left:5px}
.info-i{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;
  color:var(--ink-3);font-size:10px;font-weight:700;line-height:1;
  font-family:var(--display);font-style:italic;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color var(--dur),border-color var(--dur),
    background-color var(--dur);
}
.info-i:hover{color:var(--accent-text);border-color:var(--accent)}
.info-i[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);
  color:#fff}
/* Il bersaglio vero e' piu' grande di quello che si vede: 16px di cerchio
   sono pochi per un pollice, e questa e' un'app che si usa dal telefono. */
.info-i::after{content:"";position:absolute;width:34px;height:34px;
  border-radius:50%}
.info-w{position:relative}

.info-pop{
  position:fixed;z-index:200;max-width:280px;
  padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-2,var(--surface));border:1px solid var(--line-strong);
  box-shadow:var(--e2);
  font-size:12.5px;line-height:1.45;color:var(--ink-2);
  font-weight:400;font-style:normal;text-align:left;text-transform:none;
  letter-spacing:normal;
}
.info-pop strong{color:var(--ink)}
.info-pop[hidden]{display:none}

/* --- Stato vuoto ---------------------------------------------------------------- */
.empty{text-align:center;padding:var(--sp-9) var(--sp-5);color:var(--ink-3)}
.empty svg{width:40px;height:40px;margin:0 auto var(--sp-3);
  stroke:currentColor;fill:none;stroke-width:1.3;opacity:.5}
.empty .t{font-family:var(--display);font-size:19px;color:var(--ink-2);
  margin-bottom:5px}
.empty .s{font-size:13.5px;max-width:34ch;margin:0 auto}

/* --- Modal (foglio dal basso su mobile, centrato su desktop) ---------------------- */
.sheet-ov{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(6,7,10,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
html[data-theme="light"] .sheet-ov{background:rgba(30,34,44,.34)}
.sheet-ov.show{display:flex}
.sheet{
  width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  box-shadow:var(--e3);
}
@media (min-width:640px){
  .sheet-ov{align-items:center;padding:var(--sp-5)}
  .sheet{border-radius:var(--r-lg);padding-bottom:var(--sp-5)}
}
.sheet h3{font-family:var(--display);font-size:22px;font-weight:400;
  letter-spacing:-.01em;margin-bottom:4px}
.sheet .sheet-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:var(--sp-4)}

/* --- Toast --------------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;z-index:500;
  bottom:calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(8px);
  padding:11px var(--sp-5);border-radius:var(--r-full);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:var(--e3);
  font-size:13.5px;max-width:calc(100vw - 32px);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur),transform var(--dur);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--pos)}
.toast.err{border-color:var(--neg)}
@media (min-width:1024px){
  .toast{bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
}

/* --- Selettore accento (nelle impostazioni / sidebar) ---------------------------- */
.accent-pick{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* 44px pieni: sotto quella soglia il bersaglio non e' afferrabile col
   pollice. Il pallino colorato resta piccolo, l'area attiva no. */
.accent-pick button{
  width:44px;height:44px;border-radius:var(--r-full);
  border:2px solid transparent;
  display:grid;place-items:center;
  transition:border-color var(--dur),transform var(--dur);
}
.accent-pick button>i{display:block;width:24px;height:24px;
  border-radius:var(--r-full);pointer-events:none}
.accent-pick button.is-active{border-color:var(--ink-3)}
.accent-pick button:active{transform:scale(.9)}

/* --- Tabella larga: scorre da sola invece di sfondare la pagina ------------------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  padding:0 var(--sp-3) var(--sp-2);white-space:nowrap;
}
.table td{padding:10px var(--sp-3);border-top:1px solid var(--line);white-space:nowrap}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr:hover{background:var(--surface-2)}
.table tfoot td{border-top:1px solid var(--line-strong);font-weight:600}
/* La prima colonna (il mese, il nome) resta ferma mentre il resto scorre:
   su telefono una tabella di numeri senza l'etichetta della riga non si
   legge. Lo sfondo serve a coprire le cifre che le passano sotto. */
.scroll-x .table th:first-child,.scroll-x .table td:first-child{
  position:sticky;left:0;z-index:1;background:var(--surface)}
.scroll-x .table tbody tr:hover td:first-child{background:var(--surface-2)}

/* --- Blocco esplicativo apribile -------------------------------------------------- */
.explain{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.explain>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--ink-3);
  padding:2px 0;min-height:28px;
}
.explain>summary::-webkit-details-marker{display:none}
.explain>summary::after{
  content:"";width:7px;height:7px;flex:none;margin-left:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur);
}
.explain[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (hover:hover){.explain>summary:hover{color:var(--ink-2)}}

/* --- Card accantonamento ----------------------------------------------------------- */
.acc-card .card-head{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
.acc-seg{display:flex;width:100%}
.acc-seg button{flex:1;padding:7px var(--sp-2)}
/* Sotto i 360px i quattro nomi non ci stanno in fila — "Copertura",
   "Consigliato", "Prudente", "Blindato" sono piu' lunghi dei precedenti e
   sforavano il viewport di 27px. Vanno a capo in due righe da due invece
   di stringersi fino a diventare illeggibili. */
@media (max-width:359px){
  .acc-seg{flex-wrap:wrap}
  .acc-seg button{flex:1 1 45%;font-size:12px;padding:6px 4px}
}
@media (min-width:560px){
  .acc-card .card-head{flex-direction:row;align-items:center}
  .acc-seg{width:auto}
  .acc-seg button{flex:none;padding:7px var(--sp-4)}
}
.acc-main{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}
.acc-netto{text-align:right}

/* La quota acconti, nella barra e nella legenda: righe invece che tinta
   piena, ma della stessa famiglia di colore del saldo — sono soldi che
   escono entrambi, solo che questi escono per l'anno dopo. Le righe
   dicono "non e' un debito di quest'anno" senza cambiare famiglia, ed e'
   esattamente il codice che usa l'albero della fattura: stessa cosa,
   stesso segno. */
.seg-acconti,.legend .dot.acconti{
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--neg) 85%,transparent) 0 3px,
    color-mix(in srgb,var(--neg) 28%,transparent) 3px 6px)}

/* La riga che risponde a «e per l'anno prossimo?». Il bordo colorato e'
   il semaforo: rosso se lo scenario non tiene niente per gli acconti,
   giallo se ne tiene una parte, verde se li copre tutti. */
.acc-acconti{display:flex;align-items:flex-start;gap:8px;
  margin-top:var(--sp-3);padding:10px 12px;border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.45;color:var(--ink-2);
  background:var(--surface-3);border-left:3px solid var(--ink-4)}
.acc-acconti .dot{width:9px;height:9px;border-radius:3px;flex:none;margin-top:4px}
.acc-acconti strong{color:var(--ink);font-weight:600}
.acc-acconti.neg{border-left-color:var(--neg)}
.acc-acconti.warn{border-left-color:var(--warn)}
.acc-acconti.pos{border-left-color:var(--pos)}

/* Le due scadenze, sotto la barra dell'accantonamento. Il fabbisogno non
   serve tutto insieme: meta' della risposta e' QUANDO, ed e' quello che
   dice se a giugno i soldi ci sono. Due riquadri affiancati, uno per
   data, perche' sono due domande separate e si guardano una alla volta. */
.scad-due{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);
  margin-top:var(--sp-3)}
/* Data, importo e descrizione su righe comuni ai due riquadri (subgrid):
   se "entro il 30 novembre" va a capo e "entro il 30 giugno" no, i due
   importi restano comunque alla stessa altezza. */
.scad{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-3);
  border-left:3px solid var(--neg);
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.scad-quando{font-size:11px;color:var(--ink-3);text-transform:lowercase;
  letter-spacing:.01em}
.scad-quanto{font-size:17px;font-weight:600;color:var(--ink);margin-top:2px;
  line-height:1.15}
.scad-cosa{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.3}
@media (max-width:359px){.scad-due{grid-template-columns:1fr}}
.acc-netto .lbl{margin-bottom:1px}
.stat-hint{margin-top:var(--sp-3)}

/* --- Utility minime --------------------------------------------------------------- */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
/* I moduli non vanno letti su 1100px di larghezza: le righe troppo lunghe
   stancano e i campi diventano bersagli sproporzionati. */
.narrow{max-width:680px}
.narrow.center{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}


/* =====================================================================
   9. FIORI — la cornice UI5 e lo stile di default di SAP
   ---------------------------------------------------------------------
   La cornice (ShellBar, navigazione laterale) e i controlli nuovi sono
   UI5 Web Components (shared/ui5.py). I componenti CSS sopra restano per
   le parti non ancora convertite, ma con il carattere e i colori di
   Horizon: un solo font ("72", quello di SAP), titoli dritti, nessun
   corsivo colorato.
   ===================================================================== */

:root{
  --sans:"72","72full",Arial,Helvetica,sans-serif;
  --display:"72","72full",Arial,Helvetica,sans-serif;
}
.display,.h1{font-weight:700;letter-spacing:0}
.display em,.h1 em{font-style:normal;color:inherit}

/* La cornice occupa la finestra; scorre il contenuto, non la pagina. I
   margini di notch e barre li prende qui (nel browser e nella PWA; l'app
   Android li ha gia' tolti lei e qui arrivano a zero). */
html,body{height:100%}
ui5-navigation-layout{
  top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  left:env(safe-area-inset-left,0px);
}
/* Finche' la libreria non e' caricata i tag sono vuoti: niente lampo di
   testo nudo della navigazione. Il contenuto invece si vede subito. */
ui5-shellbar:not(:defined),ui5-side-navigation:not(:defined){display:none}
ui5-button:not(:defined),ui5-tag:not(:defined),ui5-breadcrumbs:not(:defined){visibility:hidden}

/* Fiori usa la larghezza che c'e': la colonna stretta da 640px lasciava
   due bande vuote col telefono in orizzontale e sui tablet. */
:root{--content-max:var(--content-max-lg)}
.pagina{min-height:100%;display:flex;flex-direction:column}
.testata{
  width:100%;max-width:var(--content-max);margin:0 auto;
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
.testata-percorso{margin-bottom:var(--sp-2)}
/* Sul telefono il titolo non si tronca per far posto alle azioni: se non
   ci stanno, le azioni vanno a capo sotto il titolo, a tutta riga. */
.testata-riga{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.testata .topbar-title{flex:1 1 12rem;min-width:0}
.testata .topbar-actions{flex-wrap:wrap;flex:0 1 auto;min-width:0;max-width:100%}
/* Niente puo' allargare la pagina oltre lo schermo: una riga troppo lunga
   faceva scorrere tutta la home di lato. */
.pagina{max-width:100%;overflow-x:clip}
.testata .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testata .h1{font-size:clamp(20px,4.6vw,24px);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding-bottom:var(--sp-8)}
/* Fra un blocco e l'altro del contenuto c'e' sempre aria: diverse pagine
   (l'editor fattura, i dettagli) mettono le card una sotto l'altra senza
   un .stack, e uscivano attaccate. :where() pesa zero: le classi di
   margine delle pagine (mt-0, mb-3, ...) continuano a decidere loro. */
:where(.content) > :where(* + *){margin-top:var(--sp-4)}
:where(.content) > :where(script, style){margin-top:0}
/* Lo stesso per due blocchi consecutivi dentro un contenitore qualsiasi
   (.narrow, un form, un div senza classe) che non abbia gia' il suo gap. */
:where(:not(.stack, .grid, .list, .actions, .content, .rows, .gruppo-conti, .ovp)) >
  :where(.card, ui5-card, .notice, ui5-message-strip, .list, ui5-table, .field-group, .grid)
  + :where(.card, ui5-card, .notice, ui5-message-strip, .list, ui5-table, .field-group, .grid){
  margin-top:var(--sp-4)}
@media (min-width:600px){.solo-telefono{display:none}}
@media (min-width:1024px){
  .testata{max-width:var(--content-max-lg);padding:var(--sp-6) var(--sp-7) var(--sp-4)}
  .testata.single{max-width:760px;margin-left:max(0px, calc((100% - var(--content-max-lg)) / 2));
    margin-right:auto}
}

/* I colori dell'app SONO quelli del tema SAP scelto. Quando UI5 ha
   applicato il tema (data-sap-pronto su <html>) ogni token punta alla sua
   variabile --sap*: Horizon, Quartz e i contrasti elevati colorano anche
   le parti non ancora convertite. Prima di quel momento valgono i valori
   scritti sopra, che sono quelli di Horizon: con Horizon non cambia nulla,
   con gli altri temi il passaggio dura il caricamento della libreria.
   I selettori ripetono [data-theme][data-accent] per pesare almeno quanto
   quelli dei temi chiaro/scuro e degli accenti piu' sopra. */
html[data-sap-pronto][data-theme][data-accent]{
  --bg:var(--sapBackgroundColor);
  --surface:var(--sapTile_Background);
  --surface-2:var(--sapGroup_ContentBackground);
  --surface-3:var(--sapNeutralBackground);
  --line:var(--sapList_BorderColor);
  --line-strong:var(--sapField_BorderColor);
  --ink:var(--sapTextColor);
  --ink-2:var(--sapContent_LabelColor);
  --ink-3:var(--sapContent_LabelColor);
  --ink-4:var(--sapContent_NonInteractiveIconColor);
  --pos:var(--sapPositiveTextColor);   --pos-soft:var(--sapSuccessBackground);
  --neg:var(--sapNegativeTextColor);   --neg-soft:var(--sapErrorBackground);
  --warn:var(--sapCriticalTextColor);  --warn-soft:var(--sapWarningBackground);
  --warn-ind:var(--sapCriticalColor);
  --accent:var(--sapHighlightColor);
  --accent-hi:var(--sapButton_Emphasized_Hover_Background);
  --accent-soft:var(--sapInformationBackground);
  --accent-fill:var(--sapButton_Emphasized_Background);
  --accent-fill-hi:var(--sapButton_Emphasized_Hover_Background);
  --accent-text:var(--sapLinkColor);
  --on-accent:var(--sapButton_Emphasized_TextColor);
  --e1:var(--sapContent_Shadow0);
  --e2:var(--sapContent_Shadow1);
  --e3:var(--sapContent_Shadow2);
}
html[data-theme="light"]{color-scheme:light}

.aspetto-nota{padding:var(--sp-3) var(--sp-4) 0;font-size:12.5px;color:var(--ink-3)}

/* ---------------------------------------------------------------------
   I CONTROLLI DI SEMPRE, MISURATI COME QUELLI DI SAP
   Pulsanti, campi, card, tag, avvisi, liste, segmentati e fogli sono
   ancora HTML dell'app (migliaia di righe di JavaScript ne leggono
   .value e .checked), ma prendono misure e colori dagli stessi parametri
   del tema SAP che usano le UI5 Web Components (--sapButton_*,
   --sapField_*, --sapTile_*, ...): accanto a un ui5-button o dentro un
   tema a contrasto elevato non si distinguono. Il secondo valore di ogni
   var() e' quello di Horizon, per il primo istante prima che il tema
   arrivi.
   --------------------------------------------------------------------- */

/* Pulsante: Emphasized (.btn), Default (.ghost), Reject (.danger). Altezza cozy di Fiori: 2.25rem. */
.btn{
  min-height:2.25rem;padding:0 .9375rem;gap:.375rem;
  border-radius:var(--sapButton_BorderCornerRadius,.5rem);
  border:1px solid var(--sapButton_Emphasized_BorderColor,#0070f2);
  background:var(--sapButton_Emphasized_Background,#0070f2);
  color:var(--sapButton_Emphasized_TextColor,#fff);
  font-family:var(--sapButton_FontFamily,"72"),"72full",Arial,sans-serif;
  font-size:.875rem;font-weight:600;letter-spacing:0;line-height:1.2;
  box-shadow:none;
}
@media (hover:hover){.btn:hover{
  background:var(--sapButton_Emphasized_Hover_Background,#0064d9);
  border-color:var(--sapButton_Emphasized_Hover_BorderColor,#0064d9)}}
.btn:active{transform:none;background:var(--sapButton_Emphasized_Active_Background,#fff)}
.btn svg{width:1rem;height:1rem}
.btn.ghost{
  background:var(--sapButton_Background,#fff);
  border-color:var(--sapButton_BorderColor,#bcc3ca);
  color:var(--sapButton_TextColor,#0064d9)}
@media (hover:hover){.btn.ghost:hover{
  background:var(--sapButton_Hover_Background,#eaecee);
  border-color:var(--sapButton_Hover_BorderColor,#bcc3ca)}}
.btn.danger{
  background:var(--sapButton_Reject_Background,#ffd6e9);
  border-color:var(--sapButton_Reject_BorderColor,#ffc2de);
  color:var(--sapButton_Reject_TextColor,#aa0808)}
@media (hover:hover){.btn.danger:hover{
  background:var(--sapButton_Reject_Hover_Background,#ffbddb)}}
.btn.sm{min-height:1.625rem;padding:0 .5rem;font-size:.8125rem}
.btn[disabled],.btn.is-disabled{opacity:var(--sapContent_DisabledOpacity,.4)}

/* Campo (Input, Select, TextArea) */
.field label{font-size:.875rem;font-weight:400;color:var(--sapContent_LabelColor,#556b82)}
.field input,.field select,.field textarea,.input{
  min-height:2.25rem;padding:0 .625rem;
  background:var(--sapField_Background,#fff);
  border:1px solid var(--sapField_BorderColor,#556b81);
  border-radius:var(--sapField_BorderCornerRadius,.25rem);
  color:var(--sapField_TextColor,#131e29);
  font-size:.875rem;box-shadow:var(--sapField_Shadow,none)}
.field textarea{padding:.5rem .625rem}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,html[data-theme="light"] .input{
  background:var(--sapField_Background,#fff)}
@media (hover:hover){.field input:hover,.field select:hover,.field textarea:hover,.input:hover{
  background:var(--sapField_Hover_Background,#fff);
  border-color:var(--sapField_Hover_BorderColor,#0064d9)}}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{
  border-color:var(--sapField_Focus_BorderColor,var(--sapField_BorderColor,#556b81));
  outline:var(--sapContent_FocusWidth,.125rem) solid var(--sapContent_FocusColor,#0032a5);
  outline-offset:-.1875rem;box-shadow:none}
.field input::placeholder,.field textarea::placeholder{
  color:var(--sapField_PlaceholderTextColor,#556b82);font-style:italic}
.fsel-btn,.fsel.is-field .fsel-btn{
  min-height:2.25rem;padding:0 .625rem;font-size:.875rem;
  background:var(--sapField_Background,#fff);
  border:1px solid var(--sapField_BorderColor,#556b81);
  border-radius:var(--sapField_BorderCornerRadius,.25rem);
  color:var(--sapField_TextColor,#131e29)}
html[data-theme="light"] .fsel.is-field .fsel-btn{background:var(--sapField_Background,#fff)}
.fsel.is-open .fsel-btn{
  outline:var(--sapContent_FocusWidth,.125rem) solid var(--sapContent_FocusColor,#0032a5);
  outline-offset:-.1875rem;box-shadow:none}
.fsel-val{font-weight:400}
.fsel-pop{border-radius:var(--sapPopover_BorderCornerRadius,.5rem);
  background:var(--sapList_Background,#fff);
  border-color:var(--sapGroup_ContentBorderColor,#d9d9d9);
  box-shadow:var(--sapContent_Shadow2)}
.fsel-head{background:var(--sapPageHeader_Background,#fff)}
.fsel-tit{text-transform:none;letter-spacing:0;font-size:1rem;font-weight:700;
  color:var(--sapTitleColor,#1d2d3e)}
.fsel-opt.is-sel{background:var(--sapList_SelectionBackgroundColor,#ebf8ff);
  border-left-color:var(--sapList_SelectionBorderColor,#0064d9)}
@media (hover:hover){.fsel-opt:hover{background:var(--sapList_Hover_Background,#eaecee)}}

/* Card (Tile / ui5-card): la testata e' un titolo, non un'etichetta */
.card{
  background:var(--sapTile_Background,#fff);
  border:1px solid var(--sapTile_BorderColor,transparent);
  border-radius:var(--sapTile_BorderCornerRadius,1rem);
  box-shadow:var(--sapContent_Shadow0,0 0 .125rem 0 rgba(34,53,72,.2),0 .125rem .25rem 0 rgba(34,53,72,.2))}
@media (hover:hover){.card-link:hover{background:var(--sapTile_Hover_Background,#eaecee)}}
.card-head .eyebrow,.card>.eyebrow{
  text-transform:none;letter-spacing:0;font-size:1rem;font-weight:700;
  color:var(--sapTile_TitleTextColor,#1d2d3e)}
.eyebrow{text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:400;
  color:var(--sapContent_LabelColor,#556b82)}

/* Numeri delle tessere: il NumericContent delle card Fiori */
.stat .val{font-family:var(--sans);font-weight:300;letter-spacing:0;
  font-size:clamp(1.75rem,5vw,2.25rem)}
.stat .lbl{font-size:.875rem;color:var(--sapContent_LabelColor,#556b82)}
/* Dentro una riga di tessere la cifra non va mai a capo: con i centesimi
   «€ 19.281,25» non stava in una tessera stretta, e il «€» restava da solo
   sulla prima riga. La tessera e' un contenitore, e la cifra si rimpicciolisce
   con la larghezza della SUA tessera, non della finestra (cqi). */
.grid.kpi>.card{container-type:inline-size}
.grid.kpi .stat .val{white-space:nowrap;font-size:clamp(1rem,12cqi,2.25rem)}
.grid.kpi .stat.sm .val{font-size:clamp(1rem,11cqi,1.5rem)}

/* Tag (ui5-tag) */
.chip{
  padding:.125rem .375rem;border:1px solid var(--sapNeutralBorderColor,#788fa6);
  border-radius:var(--sapButton_BorderCornerRadius,.5rem);
  background:var(--sapNeutralBackground,#eff1f2);color:var(--sapNeutralTextColor,#131e29);
  font-size:.75rem;font-weight:700;letter-spacing:0}
.chip.accent{background:var(--sapInformationBackground,#e1f4ff);
  border-color:var(--sapInformationBorderColor,#0070f2);color:var(--sapInformativeTextColor,#0064d9)}
.chip.pos{background:var(--sapSuccessBackground,#f5fae5);
  border-color:var(--sapSuccessBorderColor,#30914c);color:var(--sapPositiveTextColor,#256f3a)}
.chip.neg{background:var(--sapErrorBackground,#ffeaf4);
  border-color:var(--sapErrorBorderColor,#e90b0b);color:var(--sapNegativeTextColor,#aa0808)}
.chip.warn{background:var(--sapWarningBackground,#fff8d6);
  border-color:var(--sapWarningBorderColor,#dd6100);color:var(--sapCriticalTextColor,#b44f00)}

/* Avviso (ui5-message-strip) */
.notice{
  padding:.4375rem 1rem;border-radius:var(--sapPopover_BorderCornerRadius,.5rem);
  border:1px solid var(--sapNeutralBorderColor,#788fa6);
  background:var(--sapNeutralBackground,#eff1f2);
  color:var(--sapTextColor,#131e29);font-size:.875rem}
.notice.info{background:var(--sapInformationBackground,#e1f4ff);
  border-color:var(--sapInformationBorderColor,#0070f2);color:var(--sapTextColor,#131e29)}
.notice.warn{background:var(--sapWarningBackground,#fff8d6);
  border-color:var(--sapWarningBorderColor,#dd6100);color:var(--sapTextColor,#131e29)}
.notice.err{background:var(--sapErrorBackground,#ffeaf4);
  border-color:var(--sapErrorBorderColor,#e90b0b);color:var(--sapTextColor,#131e29)}
.notice.pos,.notice.ok{background:var(--sapSuccessBackground,#f5fae5);
  border-color:var(--sapSuccessBorderColor,#30914c);color:var(--sapTextColor,#131e29)}

/* Lista (ui5-list): righe dentro un contenitore, non card staccate */
.list{gap:0;border-radius:var(--sapTile_BorderCornerRadius,1rem);overflow:hidden;
  background:var(--sapList_Background,#fff);
  border:1px solid var(--sapList_BorderColor,#e5e5e5)}
.card .list{border-radius:var(--sapElement_BorderCornerRadius,.75rem)}
.item{border:none;border-bottom:1px solid var(--sapList_BorderColor,#e5e5e5);
  border-radius:0;box-shadow:none;background:var(--sapList_Background,#fff);min-height:3rem}
.list>.item:last-child,.list>:last-child .item:last-child{border-bottom:none}
.item:active{transform:none;background:var(--sapList_Active_Background,#dee2e5)}
@media (hover:hover){.item:hover{background:var(--sapList_Hover_Background,#eaecee);
  border-color:var(--sapList_BorderColor,#e5e5e5)}}
.gruppo-conti{gap:0}
.gruppo-testa{padding:.5rem 1rem;background:var(--sapList_GroupHeaderBackground,#fff);
  color:var(--sapList_GroupHeaderTextColor,#1d2d3e);
  border-bottom:1px solid var(--sapList_GroupHeaderBorderColor,#a8b2bd)}
.ico{border-radius:var(--sapElement_BorderCornerRadius,.75rem)}

/* SegmentedButton */
.segmented{padding:0;gap:0;background:transparent;
  border:1px solid var(--sapButton_BorderColor,#bcc3ca);
  border-radius:var(--sapButton_BorderCornerRadius,.5rem);overflow:hidden;max-width:100%}
/* Se le voci non ci stanno (schermo stretto, testo ingrandito) vanno su
   due righe intere invece di essere tagliate: le linee fra i bottoni sono
   lo sfondo che si vede nel millimetro di spazio. */
@media (max-width:600px){
  .segmented{display:flex;flex-wrap:wrap;gap:1px;background:var(--sapButton_BorderColor,#bcc3ca)}
  .segmented button{flex:1 1 auto}
  .segmented button+button{border-left:0}
}
.segmented button{border-radius:0;padding:0 .75rem;min-height:2.25rem;
  font-size:.875rem;font-weight:600;color:var(--sapButton_TextColor,#0064d9);
  background:var(--sapButton_Background,#fff)}
.segmented button+button{border-left:1px solid var(--sapButton_BorderColor,#bcc3ca)}
.segmented button.is-active{box-shadow:none;
  background:var(--sapButton_Selected_Background,#edf6ff);
  color:var(--sapButton_Selected_TextColor,#0064d9)}

/* Barra di avanzamento (ui5-progress-indicator) */
.meter{height:.5rem;border-radius:.25rem;background:var(--sapProgress_Background,#d5dadd)}
.meter>i{border-radius:.25rem;background:var(--sapProgress_Value_Background,#617b94)}
.meter>i.pos{background:var(--sapProgress_Value_PositiveBackground,#36a41d)}
.meter>i.warn{background:var(--sapProgress_Value_CriticalBackground,#e76500)}
.meter>i.neg{background:var(--sapProgress_Value_NegativeBackground,#d00a0a)}

/* Foglio (ui5-dialog) */
.sheet{background:var(--sapGroup_ContentBackground,#fff);
  border-color:var(--sapGroup_ContentBorderColor,#d9d9d9);
  border-radius:var(--sapElement_BorderCornerRadius,.75rem) var(--sapElement_BorderCornerRadius,.75rem) 0 0;
  box-shadow:var(--sapContent_Shadow3,0 0 1rem rgba(0,0,0,.3))}
@media (min-width:640px){.sheet{border-radius:var(--sapElement_BorderCornerRadius,.75rem)}}
.sheet h3{font-family:var(--sans);font-size:1rem;font-weight:700;
  color:var(--sapTitleColor,#1d2d3e);letter-spacing:0}

/* Toast (ui5-toast) */
.toast{border-radius:var(--sapElement_BorderCornerRadius,.75rem);
  background:var(--sapContent_ForegroundColor,#efefef);color:var(--sapTextColor,#131e29);
  border:none;box-shadow:var(--sapContent_Shadow2)}

/* ui5-card: le card delle pagine (shared/ui5.py::card_ui5). Fondo, bordo,
   raggio e ombra li disegna il componente col tema: qui si tolgono quelli
   della .card HTML, che si sarebbero sommati. Il contenuto ha il margine
   di Fiori, la testata e' quella di una card Fiori. */
ui5-card.card{display:block;width:100%;padding:0;background:none;border:0;
  box-shadow:none;border-radius:var(--sapTile_BorderCornerRadius,1rem);min-width:0}
ui5-card.card::part(content){padding:1rem}
ui5-card.card > [slot="header"]{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding:1rem 1rem 0;margin:0 !important}
ui5-card.card > [slot="header"] > .eyebrow{text-transform:none;letter-spacing:0;
  font-size:1rem;font-weight:700;color:var(--sapTile_TitleTextColor,#1d2d3e);margin:0}
ui5-card.card > [slot="header"] + *{margin-top:0}
ui5-card.card.flush::part(content){padding:0}
ui5-card.card-link{cursor:pointer}
@media (hover:hover){ui5-card.card-link:hover{background:none}}
ui5-card.card:not(:defined){display:block;padding:1rem;
  background:var(--sapTile_Background,#fff);border-radius:var(--sapTile_BorderCornerRadius,1rem)}
.grid > ui5-card.card{height:100%}

/* --- Home: Overview Page Fiori --------------------------------------- */
.ovp{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));
  align-items:start}
@media (min-width:1100px){.ovp>.ovp-largo{grid-column:span 2}}
.ovp-testa{align-items:flex-start !important}
.ovp-sotto{font-size:.8125rem;color:var(--sapContent_LabelColor,#556b82);margin-top:.125rem}
.ovp-destra{display:flex;align-items:center;gap:.5rem;flex:none}
.ovp-numero{font-size:clamp(2rem,6vw,2.75rem);font-weight:300;line-height:1.1;
  color:var(--sapTextColor,#131e29);letter-spacing:-.01em}
.ovp-numero.piccolo{font-size:1.75rem;margin-bottom:.5rem}
.ovp-sotto-numero{font-size:.8125rem;color:var(--sapContent_LabelColor,#556b82);margin:.25rem 0 1rem}
.ovp-barra{display:flex;gap:2px;height:.75rem;border-radius:.375rem;overflow:hidden;
  background:var(--sapTile_Background,#fff)}
.ovp-seg{min-width:4px}
.ovp-conti{display:grid;gap:0;margin-top:.75rem}
@media (min-width:700px){.ovp-largo .ovp-conti{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.ovp-conto{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  column-gap:.5rem;align-items:center;padding:.625rem 0;border-bottom:1px solid var(--sapList_BorderColor,#e5e5e5);
  color:inherit;text-decoration:none}
@media (min-width:700px){.ovp-largo .ovp-conto{border-bottom:0;padding:.5rem;border-radius:.5rem}
  .ovp-largo .ovp-conto:hover{background:var(--sapList_Hover_Background,#eaecee)}}
.ovp-pallino{width:.625rem;height:.625rem;border-radius:50%;grid-row:1}
.ovp-nome{font-weight:700;font-size:.875rem;display:flex;flex-direction:column;min-width:0}
.ovp-nota{display:block;font-weight:400;font-size:.75rem;color:var(--sapContent_LabelColor,#556b82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovp-quota{font-size:.75rem;color:var(--sapContent_LabelColor,#556b82)}
.ovp-conto .ovp-importo{grid-column:2 / span 2;font-size:1.125rem}
.ovp-importo{font-weight:400;white-space:nowrap}
.ovp-dettagli{margin-top:.75rem;border:0;padding:0;background:none;box-shadow:none}
.ovp-due{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
.ovp-kpi{display:flex;flex-direction:column;padding:.75rem;border-radius:.75rem;
  background:var(--sapGroup_ContentBackground,#fff);border:1px solid var(--sapList_BorderColor,#e5e5e5);
  color:inherit;text-decoration:none}
.ovp-kpi:hover{background:var(--sapList_Hover_Background,#eaecee)}
.ovp-kpi-v{font-size:1.5rem;font-weight:300}
.ovp-kpi-v.accent{color:var(--sapInformativeTextColor,#0064d9)}
.ovp-kpi-l{font-size:.8125rem;color:var(--sapContent_LabelColor,#556b82)}
.ovp-sez{display:flex;justify-content:space-between;gap:.5rem;font-size:.8125rem;
  color:var(--sapContent_LabelColor,#556b82);margin:.75rem 0 .375rem}
.ovp-sez strong{color:var(--sapTextColor,#131e29);font-weight:700}
.ovp-sez strong.pos{color:var(--sapPositiveTextColor,#256f3a)}
.ovp-sez strong.neg{color:var(--sapNegativeTextColor,#aa0808)}
.ovp-cfr{display:grid;grid-template-columns:4.5rem 1fr auto;gap:.5rem;align-items:center;
  font-size:.8125rem;margin:.25rem 0}
.ovp-cfr-traccia{height:.5rem;border-radius:.25rem;background:var(--sapContent_ForegroundColor,#efefef);overflow:hidden}
.ovp-cfr-traccia>span{display:block;height:100%;border-radius:.25rem}
.ovp-cfr-v{min-width:4.5rem;text-align:right}
.ovp-colonne{width:100%;height:auto;display:block;margin:.25rem 0 .5rem}
.ovp-asse{font-size:9px;fill:var(--sapContent_LabelColor,#556b82)}
.ovp-asse-ora{font-weight:700;fill:var(--sapTextColor,#131e29)}
ui5-progress-indicator{width:100%}
.ovp-scadenze,.ovp-righe{display:flex;flex-direction:column}
.ovp-scad{display:grid;grid-template-columns:3.25rem 1fr auto;gap:.75rem;align-items:center;
  padding:.625rem 0;border-bottom:1px solid var(--sapList_BorderColor,#e5e5e5)}
.ovp-scad:last-child,.ovp-riga:last-child{border-bottom:0}
.ovp-cal{display:flex;flex-direction:column;align-items:center;border-radius:.5rem;overflow:hidden;
  border:1px solid var(--sapList_BorderColor,#e5e5e5);line-height:1.1}
.ovp-cal-m{width:100%;text-align:center;font-size:.625rem;font-weight:700;text-transform:uppercase;
  color:#fff;background:var(--sapNegativeElementColor,#d00a0a);padding:.125rem 0}
.ovp-cal-g{font-size:1.125rem;font-weight:700;padding-top:.125rem}
.ovp-cal-a{font-size:.625rem;color:var(--sapContent_LabelColor,#556b82);padding-bottom:.125rem}
.ovp-scad-t{font-size:.875rem;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.ovp-riga{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.625rem 0;
  border-bottom:1px solid var(--sapList_BorderColor,#e5e5e5);color:inherit;text-decoration:none;font-size:.875rem}
a.ovp-riga:hover{background:var(--sapList_Hover_Background,#eaecee)}
.ovp-riga-t{min-width:0;display:flex;flex-direction:column}
.ovp-riga-d{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;white-space:nowrap}
/* «Da fare» in home (shared/da_fare.py): un filo del colore semantico a
   sinistra di ogni riga, come l'indicatore di stato di una lista Fiori. */
.dafare-riga{justify-content:flex-start}
.dafare-riga>.ovp-riga-t{flex:1}
/* La nota dice cosa fare: va letta intera, non troncata. */
.dafare-riga .ovp-nota{white-space:normal;overflow:visible}
.dafare-segno{align-self:stretch;flex:none;width:.25rem;border-radius:.125rem}
.dafare-segno.negative{background:var(--sapNegativeElementColor,#f53232)}
.dafare-segno.critical{background:var(--sapCriticalElementColor,#e76500)}
.ovp-riga-d.pos{color:var(--sapPositiveTextColor,#256f3a)}
.ovp-riga-d.neg{color:var(--sapNegativeTextColor,#aa0808)}
.content > ui5-message-strip{display:block}
.content > ui5-message-strip ui5-link{margin-left:.5rem}

/* Card e tabelle UI5 dentro le pagine */
ui5-card.fcard{width:100%}
.fcard-body{padding:0 var(--sp-4) var(--sp-4)}
ui5-table.ftable{width:100%}
ui5-table-row[interactive]{cursor:pointer}
ui5-table-row.riga-totale{font-weight:700}
ui5-table-cell.num,ui5-table-cell.tnum{font-variant-numeric:tabular-nums}