/* FILE GENERATO: non modificarlo. Le sorgenti sono in css/src/*.css; dopo una modifica eseguire `php tools/minify_css.php`. */ /* ============================================================================== InvoicePlane CI4 — custom.css (file unico) ----------------------------------------------------------------------------- Unificazione di modern-theme.css + custom.css + saas.css in un solo file, nello stesso ordine di cascata di prima (i tre erano già pensati come layer successivi sullo stesso :root). Nessuna regola è stata cambiata nel merge. ========================================================================== */ /* ----------------------------------------------------------------------------- I caratteri del design system, serviti da qui ----------------------------------------------------------------------------- Prima arrivavano da fonts.googleapis.com, con i file su un secondo dominio (fonts.gstatic.com): due connessioni esterne nel percorso critico di ogni pagina, un foglio CSS bloccante che nessuna cache dell'app poteva coprire, e due origini da dichiarare nella CSP. Questi sono gli stessi file "latin" che il browser scaricava da li', ora sotto assets/core/fonts: il service worker li mette in cache insieme agli altri asset, e il ?v= lo aggiunge CssBundle con l'impronta del file (sostituire un font non lascia in giro la copia vecchia, che l'Expires di un anno terrebbe per mesi). Il sottoinsieme e' quello latino di Google — U+0000-00FF piu' punteggiatura tipografica ed euro, cioe' tutto l'italiano e l'inglese: esattamente cio' che il browser scaricava prima. Un carattere fuori da li' (greco, cirillico, latino esteso: una ragione sociale polacca, per esempio) cade sul fallback di sistema dichiarato nei token. -------------------------------------------------------------------------- */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/figtree-latin.woff2?v=392aed3e") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fraunces-latin.woff2?v=5d283517") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2?v=094fe534") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600-latin.woff2?v=a6b3444c") format("woff2"); } /* ----------------------------------------------------------------------------- Base del documento (ex layer "modern-theme") ----------------------------------------------------------------------------- Questo tratto teneva un secondo set di token --bg-main, --primary, --card-shadow, --transition... che rimappava sui --ip-*: 25 alias per 32 usi, quattro dei quali (--secondary, --success, --success-bg, --success-text) senza alcun consumatore. Gli usi sono stati portati sui token --ip-* e il layer rimosso: ora il foglio ha una sola famiglia di token, e chi legge non deve più capire quale delle due vince. .modern-card è stato rimosso con lo stesso criterio: nessuna view lo emette (0 occorrenze, contro 412 di .card). Le classi .card-label/.card-value/ .card-subtext restano perché sono usate dalle KPI card. -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Scale del sistema (uguali nei due temi) ----------------------------------------------------------------------------- Tipografia, spaziatura, elevazioni e altezze dei controlli. Prima esistevano solo i token di colore: le misure erano valori sciolti (35 dimensioni di testo, 140 padding, 17 z-index), quindi due componenti simili finivano per differire di mezzo pixel senza che nessuno lo decidesse. Questi gradini sono la scala su cui vanno mappate le eccezioni. -------------------------------------------------------------------------- */ :root { /* Tipografia — 11 gradini da 10 a 32px, il corpo è --ip-text-md (14px). I gradini bassi sono fitti (1px) perché l'interfaccia è densa; sopra i 16px si allargano. Ogni titolo e ogni cifra grande deve cadere su uno di questi, che sia un

o un KPI: era il motivo per cui due card simili finivano a 15.5 e 16px senza che nessuno lo avesse deciso. */ --ip-text-2xs: 10px; /* badge, timbri, note minute */ --ip-text-xs: 11px; /* etichette compatte */ --ip-text-sm: 12px; /* metadati, intestazioni di tabella */ --ip-text-base: 13px; /* testo secondario, celle, h6 */ --ip-text-md: 14px; /* corpo, h5 */ --ip-text-lg: 16px; /* sottotitoli, h4 */ --ip-text-xl: 18px; /* titoli di sezione minori */ --ip-text-2xl: 20px; /* h3, titolo di modale */ --ip-text-3xl: 22px; /* h2, titoli di card */ --ip-text-4xl: 28px; /* h1, titolo di pagina */ --ip-text-5xl: 32px; /* cifre KPI (.card-value, .count) */ /* Spaziatura — passo 2px, fino a 24. Usata da gap/padding/margin. */ --ip-space-1: 2px; --ip-space-2: 4px; --ip-space-3: 6px; --ip-space-4: 8px; --ip-space-5: 10px; --ip-space-6: 12px; --ip-space-7: 16px; --ip-space-8: 20px; --ip-space-9: 24px; /* Strati di sovrapposizione: l'ordine è quello di Bootstrap, scritto una volta. I valori locali (0/1/2/3 e 1015/1024/1025) restano sciolti perché sono contestuali, non strati globali. */ --ip-z-base: 1; --ip-z-raised: 5; --ip-z-sticky: 50; --ip-z-header: 1020; --ip-z-dropdown: 1030; --ip-z-popover: 1035; --ip-z-overlay: 1050; --ip-z-modal: 1060; --ip-z-toast: 1080; --ip-z-sheet: 1085; --ip-z-top: 2000; /* Altezze dei controlli: due taglie, non sette. */ --ip-control-h: 36px; --ip-control-h-sm: 30px; } html { font-size: var(--ip-text-lg); } body { font-family: var(--ip-font); background-color: var(--ip-bg); color: var(--ip-text); font-size: var(--ip-text-md); } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ip-text); font-family: var(--ip-font); } h1 { font-size: var(--ip-text-4xl); margin-bottom: 1.5rem; letter-spacing: -0.02em; /* Fraunces (--ip-display) per i titoli di pagina: il contrasto serif/sans con Figtree da' gerarchia immediata senza usare il colore, che resta riservato alla semantica di stato. */ font-family: var(--ip-display); } /* I livelli sono i gradini della scala (28/22/20/18/16/13), non rem sciolti: così un cambio di scala si propaga ai titoli invece di lasciarli indietro. */ h2 { font-size: var(--ip-text-3xl); } h3 { font-size: var(--ip-text-2xl); } h4 { font-size: var(--ip-text-xl); } h5 { font-size: var(--ip-text-lg); } h6 { font-size: var(--ip-text-base); } /* I titoli dei modali sono

: senza questa riga scenderebbero da 20 a 16px, perché la scala sopra uniforma i livelli e il modale non è un sottotitolo. */ .modal-title { font-size: var(--ip-text-2xl); } /* Etichetta e valore delle KPI card (dashboard, scheda cliente, ospite). */ .card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ip-text-muted); font-weight: 600; } .card-value { font-size: var(--ip-text-5xl); font-weight: 700; margin: 0.5rem 0; color: var(--ip-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .card-value.card-value-danger { color: var(--ip-danger-text); } .card-value.card-value-warning { color: var(--ip-warning-text); } /* Stat card del guest dashboard — coerente con .card-value del KPI. */ .count { font-size: var(--ip-text-5xl); font-weight: 700; margin: 0.5rem 0; color: var(--ip-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .card-subtext { color: var(--ip-text-muted); font-size: 0.8125rem; } /* KPI cards dashboard — 6 card, quindi le colonne devono essere un divisore di 6 (3, 2, 1): con auto-fit si ottenevano righe da 5 + 1 orfana. E ogni card e' una riga flex [icona | contenuto | trend], che sotto ~200px di contenuto tronca l'importo con l'ellissi (il tasso di incasso diventava "1..."): percio' niente 4/5/6 colonne, si va da 3 a 2 a 1. */ /* Uniform Form Styling */ .card-header, .card-title { font-size: var(--ip-text-md); font-family: var(--ip-font); } /* Le etichette e i campi hanno dimensioni differenziate più sotto (.form-group > label 13px, .ip-doc-label / .form-badge 12.5px, ricerca live 13.5px): prima questo blocco usava !important anche su label e .form-control, e ogni raffinamento successivo era silenziosamente annullato. La misura base resta 14px ma senza !important. .btn è escluso: ha dimensioni differenziate (.btn-sm 12px, .btn 14px). */ label, .control-label, .form-label { font-size: var(--ip-text-md); font-family: var(--ip-font); } /* Color Corrections */ .form-control, .control-label, .form-label, label, .card > .card-header { color: var(--ip-text); } a { color: var(--ip-primary); transition: var(--ip-transition); } a:hover { color: var(--ip-primary-hover); text-decoration: none; } /* ---- ex custom.css ---- */ /* ============================================================================= InvoicePlane CI4 — Custom UI/UX overrides ----------------------------------------------------------------------------- Layer finale di raffinamento interposto tra style.css (Bootstrap 3 + tema IP) e modern-theme.css (look moderno). Aggiunge coerenza visiva, micro-stati, e un punto di vista più calmo/professionale per un'app di fatturazione. ========================================================================== */ /* I font (Figtree / Fraunces / IBM Plex Mono) arrivano da nel , partial layout/fonts.php. Qui c'era un @import: dopo la fusione dei tre fogli non era più in testa al file, quindi il browser lo ignorava e la tipografia dell'app cadeva tutta sui fallback di sistema. */ /* ----------------------------------------------------------------------------- 1. Design tokens — "Casa verde postale" ----------------------------------------------------------------------------- La cartoleria finanziaria: carta calda ma non crema, inchiostro verde-nero, verde postale come colore del denaro (primary/paid), vermiglio come colore del timbro (scaduto/attenzione), ambra per le situazioni intermedie. Mappa i token BS5 ai nostri per allineare .text-bg-*, .link-*, .alert-* . -------------------------------------------------------------------------- */ :root { /* Palette IP — neutra, professionale (grigio/bianco + accento slate scuro; colore riservato solo alla semantica di stato: pagato/scaduto/attenzione) */ --ip-bg: #f6f6f7; /* canvas neutro */ --ip-bg-card: #ffffff; --ip-border: #e4e4e7; --ip-border-soft: #ececef; --ip-border-strong: #d4d4d8; /* bordo .btn-secondary (leggibile come pulsante) */ --ip-border-strong-hover: #a1a1aa;/* hover/active dello stesso bordo */ /* Hover dei campi: deve essere piu' scuro del bordo a riposo, non piu' chiaro. Quando --ip-border-field e' salito a 3:1 questo token (#cbd5e1, 1.5:1) e' finito sotto il valore di riposo e l'hover schiariva il bordo. */ --ip-border-hover: #6b7280; /* bordo campi su hover (input, IPSelect) */ --ip-text: #18181b; /* quasi nero neutro */ --ip-text-strong: #18181b; /* testo "inchiostro" per cifre evidenziate */ /* Scurito il 2026-10-24: #71717a stava a 4.47:1 sul canvas (sotto 4.5 per il testo da 12-14px, e il canvas è il fondo più frequente). Ora 4.89:1 sul canvas e 5.28:1 sulla card. */ --ip-text-muted: #6b6b73; --ip-primary: #18181b; /* slate/nero — accento primario neutro */ --ip-primary-hover: #27272a; --ip-primary-dark: #09090b; /* (active) */ /* Tinte derivate invece che scritte in rgba(): un rgba() con i numeri del tema chiaro resta identico quando il tema si ribalta, quindi la tinta "soft" di un accento chiaro diventa un velo scuro su fondo scuro. Con color-mix la tinta segue il token e i due temi non possono divergere. */ --ip-primary-soft: color-mix(in srgb, var(--ip-primary) 6%, transparent); --ip-on-primary: #ffffff; /* testo su sfondo --ip-primary (chiaro: primary scuro) */ /* Testo sui chip pieni neutri (--ip-neutral-solid). In chiaro il grigio pieno è scuro e vuole bianco; in tema scuro lo stesso token diventa chiaro e vuole il canvas. Tenere #fff nei due temi faceva 2.60:1 sui conteggi. Un solo token, ribaltato insieme al fondo. */ --ip-on-neutral: #ffffff; /* Tinte di servizio che erano riferite senza essere definite. */ --ip-bg-subtle: #f2f4f6; /* riga in trascinamento */ --ip-warning-border:#f0ad4e; /* barra del feed calendario senza token */ --ip-shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--ip-danger) 15%, transparent); --ip-level: 0; /* rientro dei sottoconti, sovrascritto inline */ --ip-bulk-bar-h: 0px; /* altezza della barra azioni, misurata da JS */ /* Skeleton di caricamento: base e riflesso dello shimmer. La base e' volutamente più scura di un bordo leggero (1.55:1 sulla card bianca, 1.44:1 sul canvas) così i placeholder restano percepibili anche a bassa acuità; le varianti prefers-contrast e forced-colors stanno in fondo al file. */ --ip-skeleton-bg: #cfcfd6; --ip-skeleton-shine:#e9e9ec; /* Colori di stato ripresi dal tema originale InvoicePlane (html/assets/invoiceplane/sass/_ip_variables.scss): sono la parte piu' riconoscibile dell'identita' dell'app, perché i badge di stato compaiono in ogni lista di fatture e preventivi. Il resto della cromia resta neutro. */ --ip-success: #468847; /* $color_green — paid / approved */ --ip-success-bg: #eef5ee; --ip-warning: #F89406; /* $color_yellow — viewed */ --ip-warning-bg: #fdf4e6; --ip-danger: #B94A48; /* $color_red — overdue / rejected / delete */ --ip-danger-bg: #f9eded; --ip-danger-soft: #fee2e2; /* bg hover delle righe con stato pericolo */ --ip-info: #3A87AD; /* $color_blue — sent */ --ip-info-bg: #edf3f7; --ip-violet: #6d5dd3; /* costi / money-out: inchiostro distinto da rosso e blu */ --ip-violet-bg: #f1eefe; --ip-neutral: #999999; /* $color_grey — draft / stato neutro */ --ip-neutral-solid: #6E6E6E; /* grigio pieno: serve più scuro per reggere testo bianco */ --ip-canceled: #333333; /* $color_status_canceled */ /* Varianti "testo su fondo chiaro" delle tinte di stato. I badge sono outline (bordo + testo colorati su bianco) e a 10px il testo deve stare sopra 4.5:1: l'arancione originale #F89406 su bianco da' solo 2.28, il blu 4.00. Il bordo mantiene la tinta originale, così il chip resta riconoscibile; il testo usa questa versione scurita. */ /* Scurite il 2026-10-24: sul proprio fondo tinto i valori precedenti stavano a 4.14 / 4.16 / 4.44 / 4.02, sotto 4.5 per il testo da 11px dei badge --soft. Ora 4.67 / 4.97 / 5.02 / 4.80 sul fondo e 5.18 / 5.42 / 5.74 / 5.38 sul bianco: stesso tono, un gradino più profondo. */ /* Regola d'uso: i colori di stato pieni (--ip-success, --ip-warning…) sono per fili, icone, fondi e barre; il testo usa sempre la variante -text. L'ambra piena su bianco o crema sta intorno a 2:1 e il verde/blu pieni poco sotto 4,5:1: avvisi, KPI e riepiloghi grafici che li usavano come colore del testo erano i punti meno leggibili del tema chiaro. */ --ip-success-text: #3d7a3e; --ip-warning-text: #9a5b03; --ip-danger-text: #ad4341; --ip-info-text: #2e7194; --ip-hover: #f4f4f5; /* bg hover bottoni neutri/righe */ --ip-success-hover: #2f6330; /* verde scuro per hover .btn-success */ --ip-danger-hover: #9d3d3b; /* rosso scuro per hover .btn-danger */ /* Bordo dedicato ai campi input: 3:1 su card per WCAG 1.4.11. --ip-border resta per separatori decorativi (tabelle, card). Il valore precedente (#cbd5e1) dichiarava 3.2:1 ma ne misurava 1.48 su card bianca: la soglia va verificata su ENTRAMBI i fondi su cui il campo puo' stare, card (#fff) e canvas (#f6f6f7), ed e' il secondo il caso peggiore. */ --ip-border-field: #82899a; /* 3.5:1 su card, 3.24:1 su canvas (era #888f9c: 3.01:1 sul canvas, a un soffio dalla soglia 3:1) */ /* Superfici piene dei pulsanti. Le tinte di stato (--ip-success, --ip-info) sono nate per badge e testo, dove il fondo e' chiaro: usate come fondo di un pulsante con testo bianco restano sotto 4.5:1 (4.31 e 4.00). I pulsanti hanno quindi una versione piu' profonda, mentre badge e stati continuano a usare la tinta originale — che e' la parte riconoscibile dell'identita'. */ --ip-success-solid: #3d7a3e; /* 5.18:1 con testo bianco */ --ip-info-solid: #31708f; /* 5.46:1 con testo bianco */ /* Inchiostro per i fondi chiari e saturi (ambra): il bianco su #F89406 da' 2.28:1. In tema scuro diventa il canvas scuro, vedi blocco dark. */ --ip-on-bright: #18181b; /* Altezza navbar: fallback statico usato solo prima che lo script inline in layout/base.php misuri l'altezza reale (font Figtree, avatar, eventuale wrap su viewport strette) e sovrascriva questa variabile via JS. Vedi sezione 2 qui sotto. */ --ip-navbar-height: 56px; /* Altezza headerbar: fallback statico, come per la navbar, per ancorare l'eventuale thead sticky (vedi .table--sticky-head) subito sotto la headerbar stessa invece che sotto la navbar. Sovrascritta via JS in layout/base.php con l'altezza misurata. */ --ip-headerbar-height: 56px; /* Barra superiore scura, ripresa da $navbar-inverse-bg del tema originale (#333c4a): e' la firma visiva più riconoscibile di InvoicePlane. */ --ip-navbar-bg: #333c4a; --ip-navbar-border: #29313c; --ip-navbar-text: rgba(255, 255, 255, 0.78); --ip-navbar-hover: rgba(255, 255, 255, 0.10); --ip-radius: 6px; --ip-radius-sm: 4px; /* Raggio più morbido per superfici "fluttuanti" grandi (modali, popover, toast): stacca dal raggio di default dei campi/card senza introdurre una nuova famiglia di forme. */ --ip-radius-lg: 10px; /* Geometria delle superfici a card — una misura sola per intestazione, corpo e piè di card. Prima erano tre ritmi: il footer stava a 16px di rientro mentre header e body stavano a 18 (il testo del piè di card non cadeva sotto quello del corpo), e le sezioni documento rispondevano a 13/16 e 18/16 mentre le card degli altri form a 14/18 e 16/18 — due famiglie per lo stesso ruolo, con l'intestazione alta 49 o 59px secondo la pagina. --ip-card-head-y e' l'unico valore che imposta l'altezza dell'intestazione: il contenuto (icona 30px o pallino 22px) ci sta dentro con lo stesso respiro. */ --ip-card-pad-x: 18px; --ip-card-head-y: 14px; --ip-card-body-y: 16px; --ip-card-foot-y: 10px; --ip-sidebar-width: 236px; --ip-shadow-sm: 0 1px 2px 0 rgba(24, 24, 27, 0.05); --ip-shadow-focus: 0 0 0 3px rgba(24, 24, 27, 0.14); /* Scala di elevazione: --ip-shadow-md per pannelli fluttuanti (modali, dropdown, IPSelect/IPDatepicker gia' usano la propria), --ip-shadow-lg per overlay/drag. Prima l'unica ombra era --ip-shadow-sm: aprendo più livelli (modale dentro card) tutto poggiava sulla stessa profondita' piatta. */ --ip-shadow-md: 0 4px 12px -2px rgba(24, 24, 27, 0.10), 0 2px 4px rgba(24, 24, 27, 0.04); --ip-shadow-lg: 0 18px 48px -12px rgba(24, 24, 27, 0.22), 0 6px 16px rgba(24, 24, 27, 0.08); --ip-preview-bg: #52525b; /* fondo "carta" dell'anteprima .ip-preview__sheet */ --ip-transition: 150ms ease; --ip-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ip-display: "Fraunces", Georgia, "Times New Roman", serif; /* Carattere del solo nome accanto al logo. Ha un token suo, e non riusa --ip-display, perché il nome è un marchio e non un titolo: così cambiare il serif dei titoli non ritocca il marchio, e viceversa. */ --ip-brand-font: "Sora", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ip-mono: "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; /* Bootstrap dà a , e 
 il proprio stack (SFMono-Regular):
     identificatori di serie e chiavi MCP uscivano in un monospazio diverso
     dalle cifre del resto dell'app, che sono tutte in IBM Plex Mono. */
  --bs-font-monospace: var(--ip-mono);

  /* Mapping BS5 → palette IP (per .text-bg-*, .link-primary, .alert-* etc.) */
  --bs-primary:        var(--ip-primary);
  --bs-primary-rgb:    24, 24, 27;
  --bs-success:        var(--ip-success);
  --bs-success-rgb:    70, 136, 71;
  --bs-warning:        var(--ip-warning);
  --bs-warning-rgb:    248, 148, 6;
  --bs-danger:         var(--ip-danger);
  --bs-danger-rgb:     185, 74, 72;
  --bs-info:           var(--ip-info);
  --bs-info-rgb:       58, 135, 173;
  --bs-link-color:     var(--ip-primary);
  --bs-link-color-rgb: 24, 24, 27;
  --bs-link-hover-color: var(--ip-primary-hover);

  /* Bordi: senza questa mappatura Bootstrap continua a disegnare con il proprio
     default #dee2e6 (tabelle, card, input-group, hr, dropdown). Sulla stessa
     pagina convivevano quattro grigi di bordo diversi, di cui il più diffuso
     non era un nostro token: le linee risultavano leggermente disallineate di
     tono fra tabella e card. */
  --bs-border-color: var(--ip-border);
  --bs-border-color-translucent: var(--ip-border);
  --bs-table-border-color: var(--ip-border);
}
/* -----------------------------------------------------------------------------
   1bis. Tema scuro — stesso sistema di token, valori per fondo scuro
   ----------------------------------------------------------------------------
   html[data-theme="dark"] viene impostato da layout/theme_head.php (script
   inline nel , prima dei CSS: niente lampeggio del tema sbagliato).
   La preferenza sta in localStorage (ip-theme), altrimenti segue
   prefers-color-scheme. data-bs-theme (stesso valore) attiva il tema scuro
   nativo di Bootstrap 5.3 per le superfici dei componenti; qui si ribaltano
   solo i token --ip-* — tutto il resto (card, tabelle, sidebar, form,
   dropdown, modali) li consuma e si ribalta da solo.

   Specificità html[data-theme="dark"] > :root: i token scuri vincono sul
   blocco chiaro anche quando ridefiniscono le stesse variabili.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --ip-bg:                #151518;    /* canvas */
  --ip-bg-card:           #1e1e23;    /* superfici (card, sidebar, pannelli) */
  --ip-border:            #33333b;
  --ip-border-soft:       #2a2a31;
  --ip-border-strong:     #4b4b55;
  --ip-border-strong-hover: #63636e;
  --ip-text:              #e7e7ea;
  --ip-text-strong:       #f4f4f5;
  --ip-text-muted:        #9b9ba5;
  --ip-primary:           #e7e7ea;    /* accento invertito: link/testo chiari */
  --ip-primary-hover:     #f4f4f5;
  --ip-primary-dark:      #c9c9d0;    /* (active) */
  --ip-primary-soft:      color-mix(in srgb, var(--ip-primary) 9%, transparent);
  --ip-on-primary:        var(--ip-bg);    /* testo su sfondo --ip-primary (scuro: primary chiaro) */
  --ip-on-neutral:        var(--ip-bg);    /* chip neutri: in scuro il grigio pieno è chiaro */
  --ip-bg-subtle:         #26262d;
  --ip-warning-border:    #7a5520;
  --ip-shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--ip-danger) 30%, transparent);

  /* Tinte di stato adattate: il vermiglio/verde/ambra originali su fondo
     scuro non reggevano il contrasto, qui le varianti più chiare. */
  --ip-success:           #57a859;
  --ip-success-bg:        #1c271d;
  --ip-success-text:      #7ec780;
  --ip-success-hover:     #4d9650;
  --ip-warning:           #e89c2f;
  --ip-warning-bg:        #2e2414;
  --ip-warning-text:      #e8a13d;
  --ip-danger:            #d0716e;
  --ip-danger-bg:         #2d1c1c;
  --ip-danger-soft:       #3a2323;
  --ip-danger-text:       #da8f8c;
  --ip-danger-hover:      #b95a57;
  --ip-info:              #5d9fbe;
  --ip-info-bg:           #192430;
  --ip-info-text:         #7ab4d4;
  --ip-violet:            #9b8ce8;    /* costi, adattato al fondo scuro */
  --ip-violet-bg:         #211d33;
  --ip-neutral:           #8a8a92;
  --ip-neutral-solid:     #a0a0a8;
--ip-canceled:          #4a4a52;

   --ip-border-field:      #6e6e7a;    /* 3.3:1 su card scura (#1e1e23) */
   --ip-border-hover:      #8a8a97;    /* hover campi: piu' chiaro del riposo */
   /* In scuro i fondi dei pulsanti sono gia' chiari e il testo e' scuro
      (vedi html[data-theme="dark"] .btn-success): la tinta di stato va bene
      cosi' com'e'. */
   --ip-success-solid:     var(--ip-success);
   --ip-info-solid:        var(--ip-info);
   --ip-on-bright:         var(--ip-bg);

   --ip-hover:             #26262d;    /* hover bottoni neutri/righe */
  /* Barra superiore. I due tentativi precedenti hanno fissato altrettanti
     vincoli: #262b36 era troppo vicino per luminosita' a card/sidebar
     (#1e1e23, ~12/255 di luminanza percepita) e la barra si perdeva nello
     sfondo; il navy del tema chiaro (#333c4a) risolveva la distinzione ma
     restava l'unica superficie satura dell'intero tema scuro — su canvas
     #151518 e card #1e1e23 leggeva come una fascia azzurra estranea alla
     palette, e per giunta la più chiara dello schermo.
     Nel tema chiaro la topbar e' una fascia molto più scura del contenuto:
     tradotta su fondo scuro, la stessa relazione vuole una fascia piu'
     chiara delle superfici. Quello che va tolto non e' la luminosita' ma la
     saturazione. #3b3b45 tiene la stessa luminanza percepita del navy
     (~59/255: resta identico lo stacco netto da card e canvas che serviva a
     far leggere la fascia) e la riporta sulla rampa neutra della palette,
     che ha gia' la stessa lieve dominante bluastra (#33333b = 51,51,59).
     Il testo (bianco a 0.78) resta a ~7.6:1, invariato. Il pannello brand
     del login usa lo stesso token, così le due superfici restano coerenti. */
  --ip-navbar-bg:         #3b3b45;
  --ip-navbar-border:     #2a2a31;
  --ip-navbar-text:       rgba(255, 255, 255, 0.78);
  --ip-navbar-hover:      rgba(255, 255, 255, 0.10);

  --ip-shadow-sm:         0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --ip-shadow-focus:      0 0 0 3px color-mix(in srgb, var(--ip-primary) 18%, transparent);
  --ip-shadow-md:         0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30);
  --ip-shadow-lg:         0 22px 56px -14px rgba(0, 0, 0, 0.70), 0 8px 20px rgba(0, 0, 0, 0.45);
  --ip-preview-bg:        #0f0f12;    /* fondo "carta" dell'anteprima */
  --ip-skeleton-bg:       #33333b;
  --ip-skeleton-shine:    #26262d;

  /* Mapping BS5 -> palette scura: gli rgb servono alle varianti rgba() */
  --bs-body-bg:           var(--ip-bg);
  --bs-body-color:        var(--ip-text);
  --bs-primary-rgb:       231, 231, 234;
  --bs-link-color-rgb:    231, 231, 234;
  --bs-success-rgb:       87, 168, 89;
  --bs-warning-rgb:       232, 156, 47;
  --bs-danger-rgb:        208, 113, 110;
  --bs-info-rgb:          93, 159, 190;
}
/* Superfici BS5 che non ereditano i token --ip-*: dropdown, modali, liste,
   accordion restano sui grigi di default di Bootstrap (--bs-*-bg) anche con
   i token scuri. Le riallineamo alle nostre superfici. */
html[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-color: var(--ip-text);
  --bs-dropdown-bg: var(--ip-bg-card);
  --bs-dropdown-border-color: var(--ip-border);
  --bs-dropdown-link-color: var(--ip-text);
  --bs-dropdown-link-hover-color: var(--ip-text);
  --bs-dropdown-link-hover-bg: var(--ip-hover);
  --bs-dropdown-link-active-color: var(--ip-bg);
  --bs-dropdown-link-active-bg: var(--ip-primary);
}
html[data-theme="dark"] .modal-content {
  --bs-modal-color: var(--ip-text);
  --bs-modal-bg: var(--ip-bg-card);
  --bs-modal-border-color: var(--ip-border);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--ip-bg-card);
  color: var(--ip-text);
}
html[data-theme="dark"] .input-group-text {
  background-color: var(--ip-hover);
  color: var(--ip-text);
}
/* Spunta su fondo scuro: l'accento in dark e' quasi bianco (--ip-primary
   #e7e7ea), quindi il segno bianco spariva dentro la casella selezionata.
   Stessa regola dei pulsanti primari, che in dark scrivono in --ip-bg.
   Il colore sta dentro l'SVG e non puo' venire da una variabile: serve la
   coppia di regole, una per tema. */
html[data-theme="dark"] .form-check-input:checked[type="checkbox"],
html[data-theme="dark"] input[type="checkbox"]:checked,
html[data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate,
html[data-theme="dark"] input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23151518' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m4 8.2 2.6 2.6L12 5.4'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate,
html[data-theme="dark"] input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23151518' stroke-linecap='round' stroke-width='2.2' d='M4.5 8h7'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-check-input:checked[type="radio"],
html[data-theme="dark"] input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='3.2' fill='%23151518'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .list-group-item {
  background-color: var(--ip-bg-card);
  color: var(--ip-text);
}
html[data-theme="dark"] .list-group-item.active {
  background-color: var(--ip-primary);
  border-color: var(--ip-primary);
  color: var(--ip-bg);
}
html[data-theme="dark"] .accordion-button {
  background-color: var(--ip-bg-card);
  color: var(--ip-text);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--ip-hover);
  color: var(--ip-text);
}
/* Badge .text-bg-light (contatori dashboard): su fondo scuro un badge
    chiarissimo con testo scuro fisso di Bootstrap è illeggibile. */
html[data-theme="dark"] .text-bg-light {
  color: var(--ip-text-muted) !important;
  background-color: var(--ip-hover) !important;
}
/* In scuro il fondo del conteggio è --ip-hover (#3d3d43), più chiaro del
   canvas: il testo "muted" su quella superficie dava 3.0:1. Il tono spento
   resta, ma sul gradino di testo pieno (8.6:1). In chiaro la stessa scelta
   non serve: --ip-text-muted su --ip-bg sta già a 4.89:1. */
html[data-theme="dark"] .ip-count-badge {
  color: var(--ip-text) !important;
  background-color: var(--ip-hover) !important;
  border: 1px solid var(--ip-border-strong);
}
/* Testo bianco sui fondi --ip-primary: in tema scuro il primary è chiaro,
    il testo va ribaltato sul canvas scuro. */
html[data-theme="dark"] .btn-primary {
  --bs-btn-color: var(--ip-bg);
  --bs-btn-hover-color: var(--ip-bg);
  --bs-btn-active-color: var(--ip-bg);
  --bs-btn-focus-shadow-rgb: 231, 231, 234;
}
/* btn-success e btn-danger: in tema scuro i fondi sono chiari (#57a859, #d0716e)
   ma il testo era bianco fisso -> contrasto insufficiente. Usano testo scuro
   come .btn-primary, così superano 4.5:1 in entrambi i temi. */
html[data-theme="dark"] .btn-success {
  --bs-btn-color: var(--ip-bg);
  --bs-btn-hover-color: var(--ip-bg);
  --bs-btn-active-color: var(--ip-bg);
  --bs-btn-focus-shadow-rgb: 87, 168, 89;
}
html[data-theme="dark"] .btn-danger {
  --bs-btn-color: var(--ip-bg);
  --bs-btn-hover-color: var(--ip-bg);
  --bs-btn-active-color: var(--ip-bg);
  --bs-btn-focus-shadow-rgb: 208, 113, 110;
}
/* btn-info e btn-warning in tema scuro: fondi chiari, testo scuro per contrasto */
html[data-theme="dark"] .btn-info {
  --bs-btn-color: var(--ip-bg);
  --bs-btn-hover-color: var(--ip-bg);
  --bs-btn-active-color: var(--ip-bg);
  --bs-btn-focus-shadow-rgb: 93, 159, 190;
}
html[data-theme="dark"] .btn-warning {
  --bs-btn-color: var(--ip-bg);
  --bs-btn-hover-color: var(--ip-bg);
  --bs-btn-active-color: var(--ip-bg);
  --bs-btn-focus-shadow-rgb: 232, 156, 47;
}
html[data-theme="dark"] .ip-dp__day.is-selected,
html[data-theme="dark"] .ip-dp__month.is-selected { color: var(--ip-bg); }
/* IPSelect (pannello dropdown azienda/anno/anagrafiche con ricerca): la voce
   corrente usa background: var(--ip-primary) + color: #fff fisso. In tema
   chiaro --ip-primary e' un blu scuro e il bianco regge; in tema scuro
   --ip-primary si ribalta in quasi-bianco (#e7e7ea) ma il colore testo
   restava #fff fisso, quindi la voce selezionata diventava bianco su bianco,
   illeggibile. Stesso ribaltamento gia' applicato sopra a .btn-primary e
   .ip-dp__day.is-selected. */
html[data-theme="dark"] .ip-select-option.is-selected { color: var(--ip-bg); }
html[data-theme="dark"] .btn-group.index-options .btn.btn-primary,
html[data-theme="dark"] .btn-group.index-options .btn.active { color: var(--ip-bg); }
html[data-theme="dark"] .ip-topbar .ip-topbar-link:hover .ip-nav-avatar { color: var(--ip-bg); }
html[data-theme="dark"] .ip-tabs .nav-link.active,
html[data-theme="dark"] .ip-tabs .nav-link.active:focus-visible { color: var(--ip-on-primary); }
html[data-theme="dark"] .ip-tabs .nav-link.active .ip-tab-badge {
  background: rgba(0, 0, 0, 0.14);
  color: var(--ip-on-primary);
}
html[data-theme="dark"] .ip-period-month.is-active {
  color: var(--ip-on-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);
}

/* -----------------------------------------------------------------------------
   1ter. Font globale — applica il token --ip-font (Figtree) a tutta l'app.
   Prima era definito ma mai collegato a body/html: l'app rendeva ancora con
   il fallback di sistema nonostante il token fosse pronto.
   -------------------------------------------------------------------------- */
html, body {
  font-family: var(--ip-font);
}
/* -----------------------------------------------------------------------------
   1quater. Scrollbar sottile on-brand
   -----------------------------------------------------------------------------
   Il default di sistema e' rumoroso e sfasa rispetto alla palette. scrollbar-
   color vale per Firefox; la pseudo-scrollbar copre WebKit (Chrome/Safari/
   Edge). Su fondo chiaro e scuro eredita i token --ip-border / --ip-bg, quindi
   si ribalta da sola col tema. */
html {
  scrollbar-color: var(--ip-border) transparent;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--ip-border);
  border: 3px solid var(--ip-bg);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--ip-border-strong); }
/* Selezione del testo on-brand: invece del blu di sistema, usa il soft del
   primary, così anche evidenziare resta dentro la palette neutra. */
::selection {
  background: var(--ip-primary-soft);
  color: var(--ip-text);
}
/* Rispetto di prefers-reduced-motion: chi lo chiede non vuole movimento.
   Spengniamo shimmer, transizioni e animazioni di entrata mantenendo il
   layout identico. Coerente con l'attenzione all'accessibilita' gia' presente
   nel foglio (skip-link, focus-ring, contrasto degli scheletri). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Entrata dolce del contenuto a ogni caricamento pagina: evita il "pop" rigido
   del DOM pronto, senza ritardare la lettura (200ms). La guardia reduced-motion
   la neutralizza.
   Solo opacita', niente translateY: un'animazione su transform con fill "both"
   resta applicata anche dopo la fine, e in Chromium un antenato con
   animazione transform attiva diventa containing block dei discendenti
   position:fixed — la barra delle azioni di gruppo (ip-bulk-bar, fixed) si
   sarebbe ancorata a #content invece che al viewport, comparendo in mezzo
   alla tabella. */
@keyframes ip-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#main-content #content {
  animation: ip-fade-in 200ms ease both;
}
/* Transizione di tema morbida: abilitata solo durante il toggle (la classe
   .ip-theme-animating e' messa/levata da layout/base.php), così il cambio
   chiaro<->scuro non e' brusco ma il caricamento iniziale resta istantaneo.
   La guardia prefers-reduced-motion la neutralizza comunque. */
html.ip-theme-animating,
html.ip-theme-animating *,
html.ip-theme-animating *::before,
html.ip-theme-animating *::after {
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease !important;
}
/* -----------------------------------------------------------------------------
   1sexies. Primitive di dettaglio — sticky head, zebra, icon-button
   --------------------------------------------------------------------------
   Tutte opt-in via classe, per non alterare le tabelle/azioni gia' definite. */
/* Header di tabella ancorato allo scroll: resta leggibile sulle liste lunghe
   senza introdurre colore (sfondo neutro ereditato dal thead). Si ancora
   sotto navbar + headerbar grazie ai token misurati via JS, così non finisce
   mai dietro la headerbar fissa. Le tabelle dentro card con overflow:hidden
   (dashboard) restano fuori da questo comportamento. */
.table--sticky-head > thead > tr > th {
  position: sticky;
  top: calc(var(--ip-navbar-height) + var(--ip-headerbar-height));
  z-index: var(--ip-z-raised);
}
/* Zebratura leggera per tabelle dati fitte (liste a molte righe): aiuta la
   scansione orizzontale restando sul grigio neutro, senza colore. L'hover
   resta prevalente. */
.table--zebra > tbody > tr:nth-child(even) > td {
  background: var(--ip-bg);
}
.table--zebra.table-hover > tbody > tr:hover > td {
  background: var(--ip-primary-soft);
}
/* Pulsante solo-icona: cerchio con hover soft, riutilizzabile su azioni
   compatte (es. toggle). La variante in topbar usa l'hover della barra. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  transition: background-color var(--ip-transition), color var(--ip-transition);
}
.btn-icon:hover { background: var(--ip-hover); color: var(--ip-text); }
/* -----------------------------------------------------------------------------
   2. Layout / Spacing globale — allineamento coerente headerbar ↔ content
   --------------------------------------------------------------------------

   Problema risolto: modern-theme.css setta #main-content { padding: 15px },
   che si sommava al padding interno dell'headerbar (12px 20px) producendo
   un doppio padding (27px sui lati) e disallineamento orizzontale fra il
   titolo (a 35px dal bordo) e il content (a 15px).

   Soluzione: #main-content padding 0; l'headerbar gestisce il proprio
   padding a tutta larghezza (full-bleed); #content usa lo stesso padding
   orizzontale (20px) dell'headerbar così titolo e corpo si allineano. Le
   pagine tabella (.table-content) mantengono padding orizzontale 20px ma
   azzerano il verticale così la tabella aderisce alla headerbar.

   Inoltre: il contenitore #main-area e' reso flexbox (row) così .sidebar
   sta a sinistra e #main-content a destra, affiancati. Senza questo, la
   sidebar si accatasta SOPRA il content. */

/* body.padding-top (il CSS legacy la fissava a 51px statici) va sostituito
   dalla misura reale della navbar: con l'avatar utente, il font Figtree e le
   voci di menu, l'altezza effettiva è quasi sempre > 51px, e la differenza
   faceva scivolare #main-area (quindi #headerbar e il suo titolo) sotto la
   navbar fixed, "coprendo" il titolo pagina invece di lasciarlo mancante.
   --ip-navbar-height viene ri-scritta via JS in layout/base.php non appena
   la navbar è nel DOM (vedi commento token in sezione 1). */
/* Scoped a :has(.ip-topbar): le pagine senza topbar fissa (login, password
   reset, guest senza header, ecc.) non devono ereditare lo spazio riservato
   alla navbar, altrimenti resta una fascia bianca vuota in alto. */
body:has(.ip-topbar) {
  padding-top: var(--ip-navbar-height);
}
/* Contenitore principale: flexbox row, la sidebar è ora fixed (sezione 20,
   selettore #ip-sidebar ~ #main-area per il margine) */
#main-area {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: calc(100vh - var(--ip-navbar-height));
}
/* Content area: flex-grow, si espande al resto della larghezza */
#main-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
/* Content area: padding orizzontale coerente con headerbar (20px).
   Su mobile ridotto a 16px per più area utile.
   Scoped a #main-content per non applicarsi a pagine standalone (.container > #content)
   come welcome.php che hanno il proprio container Bootstrap. */
#main-content #content {
  padding: 16px 20px;
}
@media (max-width: 575.98px) {
  #main-content #content { padding: 14px 16px; }
  #headerbar { padding: 12px 16px; }
}
/* Pagine tabella: padding orizzontale allineato, verticale azzerato.
   La tabella aderisce al bordo inferiore dell'headerbar senza gap. */
#main-content #content.table-content {
  padding: 0 20px;
}
@media (max-width: 575.98px) {
  #main-content #content.table-content { padding: 0 16px; }
}
/* Rispetto di .no-padding quando usato esplicitamente (tabs pages, partial-item):
   ha la precedenza sul padding di default per #content */
#main-content #content.no-padding,
#main-content #content.tabbable,
#main-content #content .tabbable {
  padding: 0;
}
/* Il padding tolto a #content va restituito al singolo pannello del tab,
   altrimenti il contenuto finisce a filo viewport: le .row hanno gutter
   negativi (-.75rem) e senza padding del contenitore sporgono oltre il bordo.
   .tab-rich-content = pannello con card (stesso padding di #content);
   .tab-pane.table-content = pannello con tabella (solo padding orizzontale,
   come #content.table-content, così la card tabella si allinea alle liste).
   Il top lo lascia alla barra schede: .ip-tabs ha il margine inferiore (18px),
   sommato qui darebbe quasi il doppio del respiro standard. */
.tab-pane.tab-rich-content {
  padding: 0 20px 16px;
}
.tab-pane.table-content {
  padding: 0 20px 20px;
}
@media (max-width: 575.98px) {
  .tab-pane.tab-rich-content { padding: 0 16px 14px; }
  .tab-pane.table-content { padding: 0 16px 16px; }
}
/* La pagina impostazioni tiene #content col padding di default: come per i
   pannelli delle schede, il top lo gestisce la barra .ip-tabs (margine
   inferiore 18px), altrimenti col suo padding si arriva quasi al doppio. */
#form-settings #content { padding-top: 0; }
/* -----------------------------------------------------------------------------
   2bis. Headerbar
   -------------------------------------------------------------------------- */

/* L'headerbar è la 'toccata' visiva di ogni schermata: tipografia più decisa,
   separazione netta, spazio coerente. Non va gridato: 1.2rem + peso 600.
   Layout a 3 zone: titolo | filtri (desktop) | azioni. Su mobile le azioni
   vanno a capo sotto il titolo per evitare affollamento, resta solo il
   bottone primario + il toggle filtri in linea. */
/* position: sticky — l'headerbar resta incollata sotto la navbar fixed
   durante lo scroll. top: var(--ip-navbar-height) la fa combaciare col
   bordo inferiore della navbar (la variabile è misurata a runtime dallo
   script in layout/base.php, quindi si adatta a navbar più alte su mobile
   o quando l'hamburger menu è aperto). z-index 1020 la mantiene sopra il
   contenuto (navbar è 1030) senza coprire dropdown/filtri. */
#headerbar {
  position: sticky;
  top: var(--ip-navbar-height);
  z-index: 1020;
  min-height: 56px;
  padding: 12px 20px;
  background: var(--ip-bg-card);
  border-bottom: 1px solid var(--ip-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
#headerbar .headerbar-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ip-text);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
  /* Stessa famiglia display dei titoli di pagina: la "toccata" di ogni
     schermata parla la stessa lingua tipografica. */
  font-family: var(--ip-display);
}
/* Slot destinato a breadcrumb/metadata sotto il titolo (opt-in via .headerbar-meta) */
#headerbar .headerbar-meta {
  width: 100%;
  margin: -4px 0 0;
  font-size: var(--ip-text-sm);
  color: var(--ip-text-muted);
}
/* Quando c'e' meta, il titolo tiene un minimo di respiro sopra */
#headerbar:has(.headerbar-meta) { padding-top: 10px; padding-bottom: 14px; }
#headerbar:has(.headerbar-meta) .headerbar-title { margin-bottom: 2px; }
/* Zone right: gruppo singolo (BS3 .pull-right o BS5 .float-end). Unifica i
   selettori morti in uno coerente per tutte le view legacy e nuove. */
#headerbar .headerbar-item,
#headerbar .headerbar-item.pull-right,
#headerbar .headerbar-item.float-end {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ip-space-4);
  align-items: center;
  margin-left: auto;
}
/* Filtri e azioni formano un solo gruppo a destra. Con due margin-left:auto
   lo spazio si distribuiva fra i due e la ricerca di Impostazioni restava
   sospesa a metà pagina, con un vuoto prima dei pulsanti. */
#headerbar .headerbar-item + .headerbar-item { margin-left: 0; }
/* Keep inline filter e primary action visually adjacent */
#headerbar .headerbar-item > .btn-group.index-options + .btn,
#headerbar .headerbar-item > .btn + .btn-group.index-options { margin-left: 4px; }
/* Su schermi piccoli l'headerbar item va full-width per evitare che le
   azioni escano fuori dal viewport (xs <= 575px). */
@media (max-width: 575.98px) {
  #headerbar .headerbar-item,
  #headerbar .headerbar-item.pull-right,
  #headerbar .headerbar-item.float-end {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  #headerbar .headerbar-item .btn-group.index-options { flex: 1 1 auto; }
}

/* Totale del documento nell'headerbar (fatture, preventivi, importazioni,
   RiBa, esportazioni): stessa resa di quella che prima stava nella barra di
   salvataggio fissa in fondo alla pagina, ora accanto ai pulsanti azione
   dentro .headerbar-item, così il flex row li allinea sulla stessa riga. */
.headerbar-total {
  display: flex;
  align-items: baseline;
  gap: var(--ip-space-4);
  margin-right: 4px;
}
.headerbar-total__label {
  font-size: var(--ip-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ip-text-muted);
  white-space: nowrap;
}
.headerbar-total__amount {
  font-size: var(--ip-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ip-text);
}
@media (max-width: 575.98px) {
  .headerbar-total { width: 100%; margin-right: 0; }
}

/* Gruppo filtri stato nei listati: separato, non invadente */
.btn-group.index-options {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  overflow: hidden;
}
.btn-group.index-options .btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--ip-border);
  background: var(--ip-bg-card);
  color: var(--ip-text-muted);
  padding: 5px 12px;
  font-size: var(--ip-text-base);
  font-weight: 500;
}
.btn-group.index-options .btn:last-child { border-right: 0; }
.btn-group.index-options .btn:hover {
  background: var(--ip-primary-soft);
  color: var(--ip-primary);
}
.btn-group.index-options .btn.btn-primary,
.btn-group.index-options .btn.active {
  background: var(--ip-primary);
  color: var(--ip-on-primary);
  box-shadow: none;
}
/* -----------------------------------------------------------------------------
   3. Pannelli (Card BS5) — bordi soft, lieve ombra, padding coerente
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-sm);
  background: var(--ip-bg-card);
  /* Distanza fra card = gradino 16 della scala spaziature. Era 18px, valore
     fuori scala che conviveva con i 16 di .ip-doc-section e con il mb-3 di
     Bootstrap: la stessa pila di pannelli aveva due passi diversi secondo la
     pagina. */
  margin-bottom: var(--ip-space-7);
}
.card > .card-header {
  background: var(--ip-bg-card);
  border-bottom: 1px solid var(--ip-border-soft);
  color: var(--ip-text);
  font-weight: 600;
  font-size: var(--ip-text-md);
  /* Ritmo di respiro condiviso con .ip-table-card / .ip-doc-section__head
     (14px 18px): lo stesso header su card diverse non cambia mai altezza. */
  padding: var(--ip-card-head-y) var(--ip-card-pad-x);
}
.card-body { padding: var(--ip-card-body-y) var(--ip-card-pad-x); }
/* L'ultimo elemento di un corpo non porta con sé il proprio margine: il
   respiro di chiusura lo dà il padding della card. Senza questo, un campo
   (margin-bottom 16) dentro un corpo con padding 16 lasciava 32px sotto e 16
   sopra, e il contenuto sembrava salito. Vale anche per le colonne: un form
   largo mette i campi in .row e il margine dell'ultima colonna si sommava
   allo stesso modo. */
.card-body > :last-child,
.ip-doc-section__body > :last-child,
.ip-window-body > :last-child,
.card-body > .row:last-child > [class*="col-"] > :last-child,
.ip-doc-section__body > .row:last-child > [class*="col-"] > :last-child {
  margin-bottom: 0;
}
/* Il footer di default BS5 usa un grigio esterno al tema (rgba(0,0,0,.03)):
   lo portiamo sul sistema — sfondo canvas, filetto soft, testo muto. */
.card > .card-footer {
  background: var(--ip-bg);
  border-top: 1px solid var(--ip-border-soft);
  /* Stesso rientro orizzontale di header e body: il piè di card chiude il
     contenuto sulla stessa colonna (era 16px contro 18px, e il pager
     rientrava di 2px rispetto alle celle della tabella sopra). */
  padding: var(--ip-card-foot-y) var(--ip-card-pad-x);
  font-size: var(--ip-text-sm);
  color: var(--ip-text-muted);
}
/* Variante compatta: card annidate (es. note del cliente) — senza ombra,
   margine ridotto, padding del corpo allineato al resto. */
.card.small {
  margin-bottom: 10px;
  box-shadow: none;
}
.card.small .card-body { padding: 12px 14px; }
/* La variante compatta rientra a 14px anche nel piè di card: le note del
   cliente hanno corpo e data che devono chiudersi sulla stessa colonna. */
.card.small > .card-footer { padding: var(--ip-card-foot-y) 14px; }
/* Filetto orizzontale (es. sezione SMTP): opacita' default BS5 spenta,
   allineato ai bordi hairline del tema. */
hr {
  border: 0;
  border-top: 1px solid var(--ip-border-soft);
  opacity: 1;
}
/* -----------------------------------------------------------------------------
   4. Tabelle — hover più morbido, righe compatte, allineamento importi
   -------------------------------------------------------------------------- */

.table {
  font-size: var(--ip-text-base);
  margin-bottom: 0;
}
.table > thead > tr > th {
  font-weight: 600;
  color: var(--ip-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ip-text-sm);
  border-bottom: 1px solid var(--ip-border);
  background: var(--ip-bg);
}
.table > tbody > tr > td {
  border-top: 1px solid var(--ip-border-soft);
  vertical-align: middle;
}
.table-hover > tbody > tr {
  transition: background-color var(--ip-transition);
}
/* Il colore va sulla td, non sulla tr: una tr non rispetta in modo affidabile
   il proprio border-radius (ne' quello ereditato), quindi uno sfondo dipinto
   a livello di riga sfora sempre gli angoli arrotondati della card sotto
   l'ultima riga. Dipingendo la td invece della tr, l'arrotondamento messo
   sulle celle d'angolo (vedi sezione "ultima riga senza footer" qui sotto)
   ritaglia correttamente lo sfondo hover. Stessa convenzione gia' in uso per
   le righe scadute (.ip-row-overdue) qualche riga sotto. */
.table-hover > tbody > tr:hover > td {
  background: var(--ip-primary-soft);
}
/* Ultima riga di una tabella che chiude la card (nessun card-footer/pager
   sotto): senza questo, l'hover della riga (sopra) resta un rettangolo
   squadrato che sfora visibilmente gli angoli arrotondati della card. Le due
   celle d'angolo prendono lo stesso raggio della card (1px in meno per
   restare dentro al bordo di 1px), così lo sfondo hover — ora dipinto sulla
   td — viene ritagliato alla stessa curva. Guardia :has() perché se c'e' un
   footer/pager sotto, l'ultima riga non e' più il bordo visivo della card e
   arrotondarla creerebbe un incavo innaturale sopra il footer. */
/* Selettore su "table" (elemento), non ".table" (classe Bootstrap): alcune
   tabelle del tema (es. .ip-items-table del prospetto finanziario e delle
   righe documento) non portano la classe .table e restavano fuori da questa
   regola, quadrando l'angolo in hover. Stesso motivo per cui includiamo
   .ip-doc-section fra i contenitori: e' lo stesso guscio "a card" (bg,
   bordo, border-radius) usato nelle pagine documento e nel prospetto
   finanziario, ma senza la classe .card. Il ramo ":has(tfoot)" copre le
   tabelle con riga Totale in tfoot (es. finance/index.php): li' l'ultima
   riga "reale" e' quella del tfoot, non dell'ultima  del tbody, e la sua
   prima cella e' spesso un  anziche' un  — per questo
   si usa ":first-child"/":last-child" invece di "td:first-child". */
.card:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :first-child,
.ip-table-card:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :first-child,
.ip-doc-section:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :first-child,
.card:not(:has(.card-footer)) table > tfoot > tr:last-child > :first-child,
.ip-table-card:not(:has(.card-footer)) table > tfoot > tr:last-child > :first-child,
.ip-doc-section:not(:has(.card-footer)) table > tfoot > tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--ip-radius) - 1px);
}
.card:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :last-child,
.ip-table-card:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :last-child,
.ip-doc-section:not(:has(.card-footer)) table:not(:has(tfoot)) > tbody > tr:last-child > :last-child,
.card:not(:has(.card-footer)) table > tfoot > tr:last-child > :last-child,
.ip-table-card:not(:has(.card-footer)) table > tfoot > tr:last-child > :last-child,
.ip-doc-section:not(:has(.card-footer)) table > tfoot > tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--ip-radius) - 1px);
}
/* Importi allineati a destra con numeri tabulari per scansionare cifre */
.table .amount,
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tabella dentro card senza padding doppio */
.card .table-responsive,
.table-responsive { margin-bottom: 0; }
/* Ricerca live sulle liste (clienti/fatture/preventivi) — usa il backend
   filter/filter_* gia' esistente (FilterAjax), prima non collegato a nessuna UI. */
.ip-live-search {
  position: relative;
  max-width: 360px;
  margin-bottom: 14px;
}
.ip-live-search .fa-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ip-text-muted);
  font-size: var(--ip-text-base);
  pointer-events: none;
}
.ip-live-search input.form-control {
  padding-left: 34px;
}
@media (max-width: 575.98px) {
  .ip-live-search { max-width: 100%; }
}
/* -----------------------------------------------------------------------------
   5. Status badge (BS5 .badge / .text-bg-*) — coerenti e leggibili
   -------------------------------------------------------------------------- */

/* Ossatura unica di ogni etichetta compatta (timbri di stato, conteggi,
   badge di import/export, tab, aging, XML). Prima ogni famiglia aveva le
   proprie misure: tre raggi (3px, 4px, 999px), due corpi (10 e 11px), due pesi
   e padding in em — che su corpi diversi davano 3,08px invece di 3. Stesso
   significato, aspetto diverso a seconda della pagina: era il difetto che si
   vedeva di più. Ora le misure stanno qui e nei token, e i componenti portano
   solo il colore e la forma (bordo, pieno, pillola).
   Il padding in px, non in em: in em dipende dal corpo e produce le differenze
   di un pixel che rendevano due timbri affiancati diversi in altezza. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--ip-badge-padding-y) var(--ip-badge-padding-x);
  font-size: var(--ip-badge-font-size);
  font-weight: var(--ip-badge-font-weight);
  line-height: var(--ip-badge-line-height);
  letter-spacing: var(--ip-badge-letter-spacing);
  /* Il bordo trasparente non è decorazione: occupa spazio, quindi una pillola
     piena e una con bordo hanno la stessa altezza. Senza, "Bozza" e "Pagata"
     nella stessa colonna differivano di 2px. */
  border: 1px solid transparent;
  border-radius: var(--ip-badge-radius);
  white-space: nowrap;
  vertical-align: baseline;
}
/* Didascalia secondaria accanto a un badge in cella tabella (es. il codice
   Natura IVA + descrizione estesa in tax_rates/index.php): stessa idea del
   sottotitolo sotto un valore, ma in linea invece che a capo, perché un
   badge di poche lettere (N6.3) accanto a una riga intera vuota sembrerebbe
   sproporzionato. */
.ip-table-cell-note {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--ip-text-sm);
  color: var(--ip-text-muted);
}
/* Prima colonna di liste dove il testo e' scelto dall'utente e puo' quindi
   essere arbitrariamente lungo (es. tax_rates/index.php: "Nome imposta").
   Senza un limite la cella spinge in larghezza le colonne accanto (importo,
   Natura) finche' non restano schiacciate contro il bordo della card. Il
   troncamento con ellissi rende visibile che il testo continua; il title
   sull'elemento (stesso valore, non escapizzato due volte) recupera il nome
   intero al passaggio del mouse senza dover aprire il form. */
.ip-table-cell-truncate {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .ip-table-cell-truncate { max-width: 160px; }
}
/* -----------------------------------------------------------------------------
   6. Bottoni — micro-feedback controllato, niente decorazione esuberante
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--ip-radius-sm);
  font-weight: 500;
  transition: all var(--ip-transition);
  border: 1px solid transparent;
}
.btn:focus { outline: none; }
/* Feedback tattile al click: la leggera compressione segnala l'azione senza
   ombra ne' colore aggiunti — resta coerente col linguaggio sobrio dell'app. */
.btn:active { transform: scale(0.985); }
/* Varianti outline sui token dell'app. Non erano mai state tematizzate:
   restavano i colori di Bootstrap (#6c757d, che sul fondo scuro fa 3,5:1, e
   il blu #0d6efd, che non compare in nessun altro punto dell'interfaccia), e
   il bordo spariva perché .btn qui sopra lo dichiara trasparente con lo
   shorthand. Le variabili --bs-btn-* tengono coerenti hover, active e
   disabled senza riscrivere ogni stato. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
  --bs-btn-bg: transparent;
  --bs-btn-disabled-bg: transparent;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}
.btn-outline-primary {
  --bs-btn-color: var(--ip-primary);
  --bs-btn-border-color: var(--ip-primary);
  --bs-btn-hover-color: var(--ip-on-primary);
  --bs-btn-hover-bg: var(--ip-primary);
  --bs-btn-hover-border-color: var(--ip-primary);
  --bs-btn-active-color: var(--ip-on-primary);
  --bs-btn-active-bg: var(--ip-primary-hover);
  --bs-btn-active-border-color: var(--ip-primary-hover);
}
/* La secondaria è la più usata (calendario, "Valida"): testo pieno e bordo
   forte, come btn-secondary ma senza fondo, non grigio su grigio. */
.btn-outline-secondary {
  --bs-btn-color: var(--ip-text);
  --bs-btn-border-color: var(--ip-border-strong);
  --bs-btn-hover-color: var(--ip-text);
  --bs-btn-hover-bg: var(--ip-hover);
  --bs-btn-hover-border-color: var(--ip-border-strong-hover);
  --bs-btn-active-color: var(--ip-text);
  --bs-btn-active-bg: var(--ip-hover);
  --bs-btn-active-border-color: var(--ip-border-strong-hover);
}
.btn-outline-success {
  --bs-btn-color: var(--ip-success-text);
  --bs-btn-border-color: var(--ip-success);
  --bs-btn-hover-color: var(--ip-success-text);
  --bs-btn-hover-bg: var(--ip-success-bg);
  --bs-btn-hover-border-color: var(--ip-success);
  --bs-btn-active-color: var(--ip-success-text);
  --bs-btn-active-bg: var(--ip-success-bg);
  --bs-btn-active-border-color: var(--ip-success);
}
.btn-outline-danger {
  --bs-btn-color: var(--ip-danger-text);
  --bs-btn-border-color: var(--ip-danger);
  --bs-btn-hover-color: var(--ip-danger-text);
  --bs-btn-hover-bg: var(--ip-danger-bg);
  --bs-btn-hover-border-color: var(--ip-danger);
  --bs-btn-active-color: var(--ip-danger-text);
  --bs-btn-active-bg: var(--ip-danger-bg);
  --bs-btn-active-border-color: var(--ip-danger);
}
.btn-outline-warning {
  --bs-btn-color: var(--ip-warning-text);
  --bs-btn-border-color: var(--ip-warning-border);
  --bs-btn-hover-color: var(--ip-warning-text);
  --bs-btn-hover-bg: var(--ip-warning-bg);
  --bs-btn-hover-border-color: var(--ip-warning);
  --bs-btn-active-color: var(--ip-warning-text);
  --bs-btn-active-bg: var(--ip-warning-bg);
  --bs-btn-active-border-color: var(--ip-warning);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
/* Anello focus da tastiera coerente su tutta l'app: link, bottoni e i nostri
   controlli custom condividono lo stesso --ip-shadow-focus delle input, cosi'
   la navigazione da tastiera resta sempre leggibile. */
a:focus-visible,
.btn:focus-visible,
.ip-select__control:focus-visible,
.ip-nav-link:focus-visible,
.ip-nav-sub-link:focus-visible {
  outline: none;
  box-shadow: var(--ip-shadow-focus);
}
/* Alias BS5: .btn-secondary e' il sostituto di .btn-default.
   Bordo un gradino più marcato di --ip-border: su fondo card (bianco su bianco)
   il bordo dei campi risulterebbe troppo debole per leggere come pulsante. */
.btn-secondary {
  background: var(--ip-bg-card);
  border-color: var(--ip-border-strong);
  color: var(--ip-text);
  box-shadow: var(--ip-shadow-sm);
}
.btn-secondary:hover {
  background: var(--ip-hover);
  border-color: var(--ip-border-strong-hover);
  color: var(--ip-text);
}
.btn-secondary:active,
.btn-secondary:focus-visible {
  background: var(--ip-hover);
  border-color: var(--ip-border-strong-hover);
  color: var(--ip-text);
}
/* Bootstrap imposta hover/active/focus/disabled di ogni variante come proprie
   CSS custom properties (--bs-btn-hover-bg, --bs-btn-active-bg, ecc.),
   inizializzate al blu/verde/rosso di default del framework. Sovrascrivere
   solo background/border-color (stato di riposo + :hover) lascia intatto
   --bs-btn-active-bg: al mousedown (:active) il bottone lampeggiava del
   colore Bootstrap originale prima di tornare al nostro colore al rilascio —
   capitava su ogni .btn-primary/.btn-success/.btn-danger dell'app (es. il
   pulsante "Login"), non un caso isolato. Qui si sovrascrivono le variabili
   stesse, così tutti gli stati derivano dai nostri token. */
.btn-primary {
  --bs-btn-color: var(--ip-on-primary);
  --bs-btn-bg: var(--ip-primary);
  --bs-btn-border-color: var(--ip-primary);
  --bs-btn-hover-color: var(--ip-on-primary);
  --bs-btn-hover-bg: var(--ip-primary-hover);
  --bs-btn-hover-border-color: var(--ip-primary-hover);
  --bs-btn-active-color: var(--ip-on-primary);
  --bs-btn-active-bg: var(--ip-primary-dark);
  --bs-btn-active-border-color: var(--ip-primary-dark);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 24, 24, 27;
  --bs-btn-disabled-bg: var(--ip-primary);
  --bs-btn-disabled-border-color: var(--ip-primary);
  background: var(--ip-primary);
  border-color: var(--ip-primary);
}
.btn-primary:hover {
  background: var(--ip-primary-hover);
  border-color: var(--ip-primary-hover);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ip-success-solid);
  --bs-btn-border-color: var(--ip-success-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ip-success-hover);
  --bs-btn-hover-border-color: var(--ip-success-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ip-success-hover);
  --bs-btn-active-border-color: var(--ip-success-hover);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 70, 136, 71;
  --bs-btn-disabled-bg: var(--ip-success-solid);
  --bs-btn-disabled-border-color: var(--ip-success-solid);
  background: var(--ip-success-solid); border-color: var(--ip-success-solid);
}
.btn-success:hover { background: var(--ip-success-hover); border-color: var(--ip-success-hover); }
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ip-danger);
  --bs-btn-border-color: var(--ip-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ip-danger-hover);
  --bs-btn-hover-border-color: var(--ip-danger-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ip-danger-hover);
  --bs-btn-active-border-color: var(--ip-danger-hover);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 185, 74, 72;
  --bs-btn-disabled-bg: var(--ip-danger);
  --bs-btn-disabled-border-color: var(--ip-danger);
  background: var(--ip-danger); border-color: var(--ip-danger);
}
.btn-danger:hover { background: var(--ip-danger-hover); border-color: var(--ip-danger-hover); }
/* btn-info e btn-warning ricondotti ai token del tema: prima usavano i ciano
   e giallo puri di Bootstrap (#0dcaf0, #ffc107) che stonavano con la palette. */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ip-info-solid);
  --bs-btn-border-color: var(--ip-info-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--ip-info-solid) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ip-info-solid) 88%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--ip-info-solid) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ip-info-solid) 80%, black);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 49, 112, 143;
  --bs-btn-disabled-bg: var(--ip-info-solid);
  --bs-btn-disabled-border-color: var(--ip-info-solid);
  background: var(--ip-info-solid); border-color: var(--ip-info-solid);
}
.btn-info:hover {
  background: color-mix(in srgb, var(--ip-info-solid) 88%, black);
  border-color: color-mix(in srgb, var(--ip-info-solid) 88%, black);
}
.btn-warning {
  --bs-btn-color: var(--ip-on-bright);
  --bs-btn-bg: var(--ip-warning);
  --bs-btn-border-color: var(--ip-warning);
  --bs-btn-hover-color: var(--ip-on-bright);
  --bs-btn-hover-bg: var(--ip-warning);
  --bs-btn-hover-border-color: var(--ip-warning);
  --bs-btn-active-color: var(--ip-on-bright);
  --bs-btn-active-bg: color-mix(in srgb, var(--ip-warning) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ip-warning) 85%, black);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 248, 148, 6;
  --bs-btn-disabled-bg: var(--ip-warning);
  --bs-btn-disabled-border-color: var(--ip-warning);
  background: var(--ip-warning); border-color: var(--ip-warning);
}
.btn-warning:hover { background: var(--ip-warning); border-color: var(--ip-warning); }
.btn-sm, .btn-group-sm > .btn { font-size: var(--ip-text-sm); padding: 5px 10px; min-height: var(--ip-control-h-sm); }
/* Il