/*
    ============================================================================
    Il tema del backend web di Carosello3000.
    ============================================================================

    Che cos'e' e che cosa non e'
    ----------------------------
    E' un solo foglio di stile che si sovrappone a LeptonX, Bootstrap 5 e
    DevExpress. Non sostituisce nessuno dei tre e non tocca il markup: le pagine
    generate da In4CodeGenerator continuano a emettere le stesse classi, e a ogni
    rigenerazione ereditano l'aspetto nuovo senza che nessuno le ritocchi.
    Qualunque ritocco scritto dentro una pagina di `Pages/In4Gen/**` muore al
    giro successivo del generatore.

    Nasce dal foglio della console di In4Whistle (stessa struttura, stesse
    trappole gia' pagate: C:\Sviluppo\In4Docs\FrontEndLayout) con i token del
    mockup del backoffice di Carosello3000 (Analisi/Mockup/carosello3000-
    riscatto.html e carosello3000-eventi-backoffice.html): fondo grigio-azzurro,
    barra laterale blu notte, accento arancio #F99A1C, Barlow e IBM Plex Mono.

    L'arancio non regge il testo bianco
    -----------------------------------
    Il blu di In4Whistle portava testo bianco sopra; l'arancio del marchio no:
    bianco su #F99A1C fa 2,2:1. Come nel mockup, sui fondi arancio il testo e'
    scuro (`--c3k-on-brand`, 8,3:1). Per lo stesso motivo l'arancio pieno non si
    usa mai come testo su bianco (2,2:1): i link e le etichette usano
    `--c3k-brand-fg` (arancio bruciato, 5,7:1). E per le parti di controllo che
    devono stare sopra 3:1 contro il bianco — caselle spuntate, anello di
    focus — c'e' `--c3k-control`, un arancio piu' scuro (3,9:1).

    Perche' la specificita' e' scritta cosi'
    ----------------------------------------
    Ogni regola contesa e' prefissata con `body.abp-application-layout`.
    LeptonX inietta quattro fogli a runtime, dopo questo: una regola che vince
    solo perche' arriva dopo perde. Con la specificita' vince sempre.

    Il tema chiaro e scuro
    ----------------------
    LeptonX ne ha tre (Luce, Semi-Scuro, Scuro) e li commuta con una classe sul
    `<body>`. I token sono definiti per il chiaro e ridefiniti per
    `lpx-theme-dim` e `lpx-theme-dark` (i colori scuri del mockup): tutto il
    resto del file legge solo i token. La barra laterale e' blu notte in tutti.

    Nessun font remoto
    ------------------
    Barlow, Barlow Condensed e IBM Plex Mono sono serviti da questo stesso host
    (wwwroot/fonts, licenza SIL OFL 1.1 accanto ai file): nessuna chiamata a
    Google a ogni apertura di pagina, e il backend funziona anche offline.

    Rimesso dal passo 1 di etc/tools/fix-postgen.ps1 se il generatore riscrive
    App.razor.
*/

/* ========================================================================== */
/* 0. I caratteri, ospitati qui                                               */
/* ========================================================================== */

/* Due sottoinsiemi per peso: latino (italiano, inglese) e latino esteso
   (tedesco, sloveno, polacco: i nomi dei clienti). Il browser scarica il
   secondo solo se incontra un carattere che sta li'. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ========================================================================== */
/* 1. I token                                                                 */
/* ========================================================================== */

body.abp-application-layout {
    /* --- marchio (dal mockup: --acc, --accink, --accbg, --onacc) ---------- */
    --c3k-brand: #f99a1c;
    --c3k-brand-hover: #f08a05;
    --c3k-brand-active: #de7f04;
    --c3k-brand-rgb: 249, 154, 28;
    --c3k-on-brand: #1f1405;          /* testo SU un fondo arancio: 8,3:1 */
    --c3k-brand-ink: #8f4e04;         /* testo su una tinta arancio: 5,7:1 */
    --c3k-brand-soft: #fff0db;
    --c3k-brand-softer: #fff7ec;
    --c3k-brand-soft-hover: #ffe4bf;
    --c3k-control: #c46a00;           /* caselle spuntate, anello di focus: 3,9:1 su bianco */
    --c3k-pill-hover-bg: rgba(255, 255, 255, 0.65);

    /* Il colore del testo su una SUPERFICIE (non su una tinta): l'arancio pieno
       su bianco fa 2,2:1, quindi link e etichette usano l'arancio bruciato. */
    --c3k-brand-fg: #a0520a;
    --c3k-brand-fg-rgb: 160, 82, 10;
    --c3k-brand-fg-hover: #7d3f05;
    --c3k-danger-fg: var(--c3k-danger);
    --c3k-success-fg: var(--c3k-success);
    --c3k-warning-fg: var(--c3k-warning-ink);
    --c3k-info-fg: var(--c3k-info);

    /* --- inchiostro e superfici (--ink, --mu, --bg, --panel, --panel2, --line) */
    --c3k-ink: #111b2b;
    --c3k-ink-2: #2e3a4d;
    --c3k-muted: #56637a;
    --c3k-faint: #8a96a8;

    --c3k-app-bg: #eef1f5;
    --c3k-surface: #ffffff;
    --c3k-surface-2: #f5f7fa;
    --c3k-surface-sunken: #e9edf3;

    --c3k-border: #d6dde6;
    --c3k-border-strong: #c3ccd8;

    /* --- barra laterale (--side, --sideink, --sidemu) ---------------------- */
    --c3k-nav-bg: #0f1a2a;
    --c3k-nav-text: #c9d3e1;
    --c3k-nav-text-strong: #ffffff;
    --c3k-nav-muted: #7f8da3;
    --c3k-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --c3k-nav-active-bg: rgba(249, 154, 28, 0.16);
    --c3k-nav-rule: rgba(255, 255, 255, 0.08);

    /* --- semantica (--ok, --ko, --wa, --in del mockup) -------------------- */
    --c3k-success: #17744a;
    --c3k-success-rgb: 23, 116, 74;
    --c3k-success-hover: #125d3b;
    --c3k-success-soft: #e2f3e9;
    --c3k-success-soft-hover: #d0ebdb;
    --c3k-success-ink: #125d3b;

    --c3k-warning: #8a5a00;
    --c3k-warning-rgb: 138, 90, 0;
    --c3k-warning-soft: #fff3d1;
    --c3k-warning-soft-hover: #ffe9b0;
    --c3k-warning-ink: #6f4800;

    --c3k-danger: #b0342a;
    --c3k-danger-rgb: 176, 52, 42;
    --c3k-danger-hover: #942b23;
    --c3k-danger-active: #7c241d;
    --c3k-danger-soft: #fbe7e4;
    --c3k-danger-soft-hover: #f6d6d1;
    --c3k-danger-ink: #8f2a22;

    --c3k-info: #1f5fa8;
    --c3k-info-rgb: 31, 95, 168;
    --c3k-info-hover: #184c86;
    --c3k-info-soft: #e3eefa;
    --c3k-info-soft-hover: #d2e3f6;
    --c3k-info-ink: #184c86;

    /* --- forma: angoli vivi (richiesta del 06/10/2026: niente stondature,
       al piu' 1px). Bootstrap, LeptonX e DevExpress prendono questi. ------ */
    --c3k-radius-sm: 1px;
    --c3k-radius: 1px;
    --c3k-radius-lg: 1px;
    --c3k-radius-pill: 1px;

    --c3k-shadow-xs: 0 1px 2px rgba(17, 27, 43, 0.05);
    --c3k-shadow-sm: 0 1px 2px rgba(17, 27, 43, 0.04), 0 2px 8px rgba(17, 27, 43, 0.05);
    --c3k-shadow-md: 0 2px 4px rgba(17, 27, 43, 0.05), 0 8px 20px rgba(17, 27, 43, 0.08);
    --c3k-shadow-lg: 0 8px 24px rgba(17, 27, 43, 0.12), 0 24px 48px rgba(17, 27, 43, 0.12);
    --c3k-ring: 0 0 0 3px rgba(var(--c3k-brand-rgb), 0.35);

    --c3k-sans: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --c3k-display: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;
    --c3k-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* --- ponte verso LeptonX ---------------------------------------------- */
    --lpx-content-bg: var(--c3k-app-bg);
    --lpx-content-bg-rgb: 238, 241, 245;
    --lpx-content-text: var(--c3k-ink);
    --lpx-content-text-rgb: 17, 27, 43;
    --lpx-primary: var(--c3k-brand);
    --lpx-primary-rgb: var(--c3k-brand-rgb);
    --lpx-brand: var(--c3k-brand);
    --lpx-brand-rgb: var(--c3k-brand-rgb);
    --lpx-secondary: #56637a;
    --lpx-secondary-rgb: 86, 99, 122;
    --lpx-success: var(--c3k-success);
    --lpx-success-rgb: var(--c3k-success-rgb);
    --lpx-info: var(--c3k-info);
    --lpx-info-rgb: var(--c3k-info-rgb);
    --lpx-warning: var(--c3k-warning);
    --lpx-warning-rgb: var(--c3k-warning-rgb);
    --lpx-danger: var(--c3k-danger);
    --lpx-danger-rgb: var(--c3k-danger-rgb);
    --lpx-radius: var(--c3k-radius);
    --lpx-shadow: var(--c3k-shadow-sm);
    --lpx-border-color: var(--c3k-border);
    --lpx-light: var(--c3k-surface-sunken);
    --lpx-dark: var(--c3k-ink);

    /* `--lpx-card-bg` non colora solo le schede: LeptonX ci dipinge anche
       `.table-responsive`. Lasciandolo bianco, nel tema scuro ogni tabella
       compariva come un rettangolo bianco dentro una scheda scura. */
    --lpx-card-bg: var(--c3k-surface);
    --lpx-card-title-text-color: var(--c3k-ink);
    --lpx-breadcrumb-text-color: var(--c3k-muted);
    --lpx-breadcrumb-active-text-color: var(--c3k-ink-2);
    --lpx-navbar-active-bg-color: var(--c3k-nav-active-bg);

    /* --- ponte verso Bootstrap 5 ------------------------------------------ */
    /* Il tema bs5 di DevExpress deriva 1408 valori da queste variabili. */
    --bs-primary: var(--c3k-brand);
    --bs-primary-rgb: var(--c3k-brand-rgb);
    --bs-link-color: var(--c3k-brand-fg);
    --bs-link-color-rgb: var(--c3k-brand-fg-rgb);
    --bs-link-hover-color: var(--c3k-brand-fg-hover);
    --bs-body-color: var(--c3k-ink);
    --bs-body-color-rgb: 17, 27, 43;
    --bs-body-bg: var(--c3k-surface);
    --bs-secondary-color: var(--c3k-muted);
    --bs-border-color: var(--c3k-border);
    --bs-border-color-translucent: var(--c3k-border);
    --bs-border-radius: var(--c3k-radius);
    --bs-border-radius-sm: var(--c3k-radius-sm);
    --bs-border-radius-lg: var(--c3k-radius-lg);
    --bs-danger: var(--c3k-danger);
    --bs-success: var(--c3k-success);
    --bs-warning: var(--c3k-warning);
    --bs-info: var(--c3k-info);
    --bs-font-sans-serif: var(--c3k-sans);
    --bs-font-monospace: var(--c3k-mono);
    --bs-emphasis-color: var(--c3k-ink);
    --bs-progress-bar-bg: var(--c3k-brand);
}

/* Il tema scuro e il dim di LeptonX: i colori scuri del mockup. Ridefiniscono
   i token e basta. */
body.abp-application-layout.lpx-theme-dim,
body.abp-application-layout.lpx-theme-dark {
    --c3k-ink: #e9eef5;
    --c3k-ink-2: #c8d2e0;
    --c3k-muted: #9aa8be;
    --c3k-faint: #7a879c;

    --c3k-app-bg: #0a111b;
    --c3k-surface: #121c2b;
    --c3k-surface-2: #172234;
    --c3k-surface-sunken: #0e1624;

    --c3k-border: #25344c;
    --c3k-border-strong: #33445f;

    --c3k-nav-bg: #070c14;

    --c3k-brand-ink: #fbaa45;
    --c3k-brand-soft: #35260f;
    --c3k-brand-softer: rgba(249, 154, 28, 0.08);
    --c3k-brand-soft-hover: #4a3514;
    --c3k-control: #f99a1c;
    --c3k-pill-hover-bg: rgba(255, 255, 255, 0.05);

    --c3k-brand-fg: #fbaa45;
    --c3k-brand-fg-rgb: 251, 170, 69;
    --c3k-brand-fg-hover: #fcc27a;
    --c3k-danger-fg: var(--c3k-danger-ink);
    --c3k-success-fg: var(--c3k-success-ink);
    --c3k-warning-fg: var(--c3k-warning-ink);
    --c3k-info-fg: var(--c3k-info-ink);

    --c3k-success-soft: #12311f;
    --c3k-success-soft-hover: #184028;
    --c3k-success-ink: #4dc98c;
    --c3k-warning-soft: #352a0e;
    --c3k-warning-soft-hover: #453712;
    --c3k-warning-ink: #f2c14e;
    --c3k-danger-soft: #3a1d1b;
    --c3k-danger-soft-hover: #4a2522;
    --c3k-danger-ink: #f27a6c;
    --c3k-info-soft: #14263d;
    --c3k-info-soft-hover: #1b3250;
    --c3k-info-ink: #7fb3f0;

    --c3k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --c3k-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40);
    --c3k-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.50);

    --lpx-content-bg-rgb: 10, 17, 27;
    --lpx-content-text-rgb: 233, 238, 245;
    --bs-body-color-rgb: 233, 238, 245;
}

/* Il logo. LeptonX lo disegna come sfondo da `--lpx-logo` (`--lpx-logo-icon`
   quando la barra e chiusa), ma il template lo ridefinisce in
   blazor-global-styles.css con `:root .lpx-theme-light` (0,2,0) e
   direttamente su `.lpx-brand-logo`: sul `body` (0,1,1) il nostro perdeva.
   Qui sta sugli elementi che lo disegnano, a (0,2,1). */
body.abp-application-layout :is(.lpx-logo-container, .lpx-brand-logo, .lpx-mobile-navbar, .lpx-mobile-menu) {
    --lpx-logo: url("/images/logo/carosello3000.png");
    /* Barra chiusa: LeptonX ha un riquadro di 32x32, il logo con la scritta
       si vedrebbe tagliato. Va il solo simbolo (ricavato dal PNG del logo). */
    --lpx-logo-icon: url("/images/logo/carosello3000-icon.png");
}

/* ========================================================================== */
/* 2. Le fondamenta                                                           */
/* ========================================================================== */

body.abp-application-layout {
    font-family: var(--c3k-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--c3k-ink);
    background-color: var(--c3k-app-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
    La dimensione del testo scelta con i pulsanti A- / A+ (TextSizeToolbarItem,
    js/c3k-testo.js). Si cambia la misura di <html>, non quella di <body>:
    Bootstrap, DevExpress e questo foglio misurano caratteri, spaziature e
    campi in rem, quindi crescono insieme e restano in proporzione. Quello che
    LeptonX misura in pixel (altezza della barra superiore, larghezza della
    barra laterale) resta fermo, ed e' giusto cosi': e' cornice, non contenuto.

    I livelli devono restare allineati a Percents nel componente.
*/
html:root[data-c3k-testo="1"] { font-size: 115%; }
html:root[data-c3k-testo="2"] { font-size: 130%; }
html:root[data-c3k-testo="3"] { font-size: 145%; }
html:root[data-c3k-testo="4"] { font-size: 160%; }

body.abp-application-layout h1,
body.abp-application-layout h2,
body.abp-application-layout h3,
body.abp-application-layout h4,
body.abp-application-layout h5,
body.abp-application-layout h6 {
    color: var(--c3k-ink);
    font-weight: 600;
    letter-spacing: 0;
}

/* I titoli grandi nel condensato del mockup. */
body.abp-application-layout h1,
body.abp-application-layout h2,
body.abp-application-layout .h1,
body.abp-application-layout .h2 {
    font-family: var(--c3k-display);
    font-weight: 700;
    letter-spacing: 0.005em;
}

body.abp-application-layout .text-muted {
    color: var(--c3k-muted) !important;
}

/*
    Il colore dei link arriva da `--bs-link-color-rgb` (sezione 1), non da una
    regola su `a`: mezza applicazione usa `<a class="btn">` — il bottone Login
    della home, le azioni in coda alle righe — e una regola su `a` batte per
    specificita' `.btn { color: var(--bs-btn-color) }` di Bootstrap. Il primo
    tentativo l'aveva scritta, e ogni bottone primario e' diventato un
    rettangolo colorato con dentro del testo dello stesso colore.

    Qui resta solo la sottolineatura al passaggio, e solo per i link che sono
    link: non bottoni, non voci di menu, non schede.
*/
body.abp-application-layout a:not([class*="btn"]):not([class*="lpx-"]):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):hover {
    color: var(--c3k-brand-fg-hover);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Un anello di focus solo, per tutto. Il default di Bootstrap ne ha tre
   diversi e nessuno visibile sui componenti DevExpress. */
body.abp-application-layout :focus-visible {
    outline: 2px solid var(--c3k-control);
    outline-offset: 2px;
}

/* I numeri incolonnati non ballano fra un aggiornamento e l'altro. */
body.abp-application-layout .h1, .abp-application-layout .h2,
body.abp-application-layout .h3, .abp-application-layout .display-1,
body.abp-application-layout .display-2, .abp-application-layout .display-3,
body.abp-application-layout .display-4, .abp-application-layout .display-5,
body.abp-application-layout .display-6 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Codici di prenotazione, di biglietto e d'ordine: identificativi da leggere
   carattere per carattere, nel monospaziato del mockup. */
body.abp-application-layout code,
body.abp-application-layout kbd,
body.abp-application-layout samp {
    font-family: var(--c3k-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c3k-ink);
    background: var(--c3k-surface-sunken);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-sm);
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.02em;
}

body.abp-application-layout pre code {
    border: 0;
    background: transparent;
    padding: 0;
}

/* La barra di scorrimento dei contenitori del guscio.

   NON su `*`: i componenti DevExpress nascondono quella nativa
   (`scrollbar-width: none`) e ne disegnano una propria, e una regola
   universale finisce per litigare con ogni scorrevole di ogni griglia
   senza cambiare niente di visibile. */
body.abp-application-layout .lpx-content-wrapper,
body.abp-application-layout .lpx-sidebar,
body.abp-application-layout .table-responsive,
body.abp-application-layout .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--lpx-content-text-rgb), 0.22) transparent;
}

/* ========================================================================== */
/* 3. Il guscio: barra laterale                                               */
/* ========================================================================== */

/*
    La barra laterale non si ridipinge elemento per elemento: LeptonX la fa
    tutta con `--lpx-navbar-color`, e chi la colora a mano si mette a
    inseguire sei superfici che si dipingono da sole — barra, contenitore del
    logo (che e' `position: fixed` e ha il proprio fondo), lista delle voci,
    nome del marchio, barra mobile. Basta cambiare la variabile.

    Per lo stesso motivo il fondo e' PIATTO e non una sfumatura: quelle sei
    superfici sono dipinte separatamente, e una sfumatura si spezzerebbe
    esattamente sui bordi che dovrebbe nascondere.

    La stessa variabile pero' colora anche `html, body`, la barra superiore, il
    pie' e il menu dell'utente: quei quattro tornano chiari qui sotto, uno per
    uno. E' il prezzo di avere una sola variabile per tutta la cornice, e si
    paga una volta.
*/
html:root {
    background-color: var(--c3k-app-bg);
}

body.abp-application-layout {
    --lpx-navbar-color: var(--c3k-nav-bg);
    --lpx-navbar-color-rgb: 15, 26, 42;
    --lpx-navbar-text-color: var(--c3k-nav-text);
    --lpx-navbar-text-color-rgb: 201, 211, 225;
    --lpx-navbar-active-text-color: var(--c3k-nav-text-strong);
}

body.abp-application-layout .lpx-sidebar-container {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

body.abp-application-layout .lpx-sidebar {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Il marchio. Il contenitore del logo diventa un'intestazione vera, con una
   riga che lo separa dal menu: senza, il nome del prodotto galleggia.
   L'altezza resta quella di LeptonX (72 px): `.lpx-nav` ha un `padding-top`
   fisso della stessa misura, e cambiarne una sola scolla le due. */
body.abp-application-layout .lpx-sidebar .lpx-logo-container {
    border-bottom: 1px solid var(--c3k-nav-rule);
}

/* Il logo di Carosello3000 contiene gia' la scritta: il nome del marchio che
   LeptonX gli mette accanto sarebbe un doppione. Resta per i lettori di
   schermo (il logo e' un'immagine di sfondo, senza testo alternativo). */
body.abp-application-layout .lpx-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Il PNG e' 267x65: dentro il riquadro di LeptonX (240x32) va contenuto, non
   tagliato, e allineato a sinistra come il resto della barra. */
body.abp-application-layout .lpx-brand-logo {
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

body.abp-application-layout .lpx-sidebar .menu-collapse-icon {
    color: var(--c3k-nav-text);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

body.abp-application-layout .lpx-sidebar .menu-collapse-icon:hover {
    opacity: 1;
}

/* Il filtro del menu: un campo scuro dentro una barra scura, non un campo
   chiaro incollato sopra. */
body.abp-application-layout .lpx-menu-filter {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--c3k-radius);
    height: 36px;
    margin: 0 12px 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.abp-application-layout .lpx-menu-filter:focus-within {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(var(--c3k-brand-rgb), 0.65);
}

body.abp-application-layout .lpx-menu-filter .menu-filter-input {
    color: var(--c3k-nav-text-strong);
    background: transparent;
    font-size: 0.8125rem;
}

body.abp-application-layout .lpx-menu-filter .menu-filter-input::placeholder {
    color: var(--c3k-faint);
}

body.abp-application-layout .lpx-menu-filter .lpx-icon,
body.abp-application-layout .lpx-menu-filter .clear-icon {
    color: var(--c3k-faint);
}

/* Le voci. Pastiglie con un margine interno, non righe a tutta larghezza:
   e' quello che distingue una barra laterale disegnata da una generata. */
body.abp-application-layout .lpx-nav-menu {
    padding: 0 10px;
}

/*
    LA SCELTA CHE CONTA E' IL PERIMETRO, NON IL COLORE.

    `.lpx-menu-item` non e' solo la voce della barra laterale: LeptonX la usa
    anche nel menu a tendina delle impostazioni e in quello dell'utente, che si
    aprono su fondo BIANCO. Un colore chiaro scritto su `.lpx-menu-item` senza
    perimetro rende il menu «Aspetto esteriore / Luce / Semi-Scuro / Scuro»
    grigio chiaro su bianco: si legge solo sapendo gia' che c'e' scritto.

    Da qui in avanti le voci chiare valgono solo dentro la barra laterale e il
    menu mobile; i menu a tendina hanno il loro blocco, piu' sotto.
*/
body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) :is(.lpx-menu-item, .lpx-menu-item-link) {
    color: var(--c3k-nav-text);
    border-radius: var(--c3k-radius);
    padding: 0 12px;
    margin: 2px 0;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) :is(.lpx-menu-item, .lpx-menu-item-link):hover {
    background-color: var(--c3k-nav-hover-bg);
    color: var(--c3k-nav-text-strong);
}

body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) :is(.lpx-menu-item, .lpx-menu-item-link).selected,
body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) :is(.lpx-menu-item, .lpx-menu-item-link).selected:hover {
    background-color: var(--c3k-nav-active-bg);
    color: var(--c3k-nav-text-strong);
    font-weight: 600;
}

/* La barretta a sinistra dice "sei qui" anche a chi non distingue i due
   grigi del fondo: la selezione non e' affidata al solo colore. */
body.abp-application-layout .lpx-sidebar :is(.lpx-menu-item, .lpx-menu-item-link).selected::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 var(--c3k-radius-sm) var(--c3k-radius-sm) 0;
    background: var(--c3k-brand);
}

body.abp-application-layout .lpx-menu-item-icon {
    color: inherit;
    opacity: 0.72;
    min-width: 22px;
}

/*
    LeptonX colora con `--lpx-brand` l'icona e la freccia della voce puntata o
    selezionata (`.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon`,
    specificita' 0-4-0). Sul suo fondo chiaro era il rosa dell'accento; sul
    nostro fondo scuro diventa il colore primario, che sulla pastiglia attiva
    non e' detto che regga — l'icona sparirebbe proprio nella riga che
    dovrebbe spiccare.

    Al passaggio segue il testo, che li' e' bianco. Sulla voce selezionata e'
    l'arancio del marchio, come la barretta a sinistra (7,4:1 sul blu notte):
    e' il "sei qui" del mockup. La regola e' delimitata alla barra laterale e
    al menu mobile: nel menu a tendina, su fondo chiaro, l'arancio non si legge.
*/
body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) .lpx-nav-menu :is(.lpx-menu-item, .lpx-menu-item-link):hover :is(.lpx-menu-item-icon, .dd-icon) {
    color: inherit;
    opacity: 1;
}

body.abp-application-layout :is(.lpx-sidebar, .lpx-mobile-menu) .lpx-nav-menu :is(.lpx-menu-item, .lpx-menu-item-link).selected :is(.lpx-menu-item-icon, .dd-icon) {
    color: var(--c3k-brand);
    opacity: 1;
}

body.abp-application-layout :is(.lpx-menu-item, .lpx-menu-item-link):hover .lpx-menu-item-icon,
body.abp-application-layout :is(.lpx-menu-item, .lpx-menu-item-link).selected .lpx-menu-item-icon {
    opacity: 1;
}

body.abp-application-layout .lpx-inner-menu .lpx-menu-item,
body.abp-application-layout .lpx-inner-menu-item {
    font-size: 0.8125rem;
    font-weight: 400;
}

body.abp-application-layout .lpx-menu-item-title {
    color: var(--c3k-nav-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 12px 6px;
}

/* ========================================================================== */
/* 4. Il guscio: barra superiore, briciole, contenuto, pie'                   */
/* ========================================================================== */

body.abp-application-layout .lpx-topbar-container {
    background-color: var(--c3k-surface);
    border-bottom: 1px solid var(--c3k-border);
    box-shadow: none;
    height: 56px;
}

/* Il bordo lo disegna il contenitore: due righe a un pixel una sull'altra
   fanno una riga da due pixel di due grigi diversi. */
body.abp-application-layout .lpx-topbar {
    background-color: transparent;
    height: 56px;
    padding: 0 8px;
    border-bottom: 0;
}

body.abp-application-layout .lpx-breadcrumb-item,
body.abp-application-layout .lpx-breadcrumb-item a {
    color: var(--c3k-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

body.abp-application-layout .lpx-breadcrumb-item:last-child,
body.abp-application-layout .lpx-breadcrumb-item:last-child a {
    color: var(--c3k-ink-2);
    font-weight: 600;
}

body.abp-application-layout .lpx-breadcrumb-item a:hover {
    color: var(--c3k-brand-fg);
    text-decoration: none;
}

body.abp-application-layout .lpx-breadcrumb-separator {
    color: var(--c3k-muted);
    opacity: 1;
}

body.abp-application-layout .lpx-topbar-content .lpx-avatar .lpx-avatar-img,
body.abp-application-layout .lpx-topbar-content .lpx-avatar .lpx-avatar-icon {
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--c3k-border);
}

body.abp-application-layout .lpx-content-container {
    background-color: var(--c3k-app-bg);
}

/* Il respiro. Una console si legge da sinistra: oltre i 1680 px una riga di
   tabella diventa un tragitto per l'occhio, non un'informazione. */
body.abp-application-layout .lpx-content {
    padding: 24px 32px 56px;
}

body.abp-application-layout .lpx-content > * {
    max-width: 1680px;
}

@media (max-width: 767.98px) {
    body.abp-application-layout .lpx-content {
        padding: 16px 16px 40px;
    }
}

/* Il titolo di pagina. Le pagine generate emettono `h1.lpx-main-title`, quindi
   e' l'unico punto in cui si puo' intervenire per tutte insieme. */
body.abp-application-layout .lpx-main-title {
    color: var(--c3k-ink);
    font-family: var(--c3k-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 0;
}

body.abp-application-layout .lpx-heading {
    color: var(--c3k-ink);
    font-weight: 600;
}

/* Il pie' e' `position: fixed` in fondo alla finestra. Deve restare OPACO —
   con il fondo dell'applicazione, non trasparente — o il contenuto che gli
   scorre sotto si legge attraverso la scritta del copyright. */
body.abp-application-layout .lpx-footbar-container {
    background-color: var(--c3k-app-bg);
    border-top: 1px solid var(--c3k-border);
}

body.abp-application-layout footer .lpx-footbar {
    background-color: transparent;
    color: var(--c3k-faint);
    font-size: 0.75rem;
}

/* I selettori sono lunghi apposta: LeptonX colora i link del pie' con
   `.lpx-footbar-container .lpx-footbar .lpx-footbar-solo-links a`, tre classi,
   e una regola piu' corta perde. Nel tema scuro perdeva restando nera su fondo
   scuro — 1,05:1, cioe' invisibile. */
body.abp-application-layout .lpx-footbar a,
body.abp-application-layout .lpx-footbar-container .lpx-footbar .lpx-footbar-solo-links a,
body.abp-application-layout .lpx-footbar-container .lpx-footbar .lpx-footbar-copyright a,
body.abp-application-layout .lpx-footbar-container .lpx-footbar .lpx-footbar-copyright span {
    color: var(--c3k-muted);
}

/* L'icona della casetta nelle briciole di pane non eredita dal suo link. */
body.abp-application-layout .lpx-breadcrumb-item .lpx-breadcrumb-item-icon,
body.abp-application-layout .lpx-breadcrumb-item a .lpx-breadcrumb-item-icon {
    color: inherit;
}

/* La striscia degli strumenti sul bordo destro. Il contenitore prende il
   fondo della barra laterale da `--lpx-navbar-color`: qui torna trasparente,
   o sul bordo destro compare una seconda colonna scura. */
body.abp-application-layout .lpx-toolbar-container {
    background-color: transparent;
}

/*
    LA CORNICE HA DUE FONDI OPPOSTI, E LE STESSE CLASSI VIVONO IN TUTTI E DUE.

    Scuro: barra laterale, menu mobile, barra mobile in fondo.
    Chiaro: barra superiore, striscia degli strumenti a destra, e i menu a
    tendina che si aprono su di essa.

    `--lpx-navbar-text-color` serve entrambi, quindi qualunque colore scritto
    su `.lpx-settings` o `.setting-icon` senza dire in QUALE dei due si trova
    rompe l'altro. La prima versione di questa regola non lo diceva: ha
    aggiustato la striscia destra (2,1:1 su bianco) e ha spento le stesse
    quattro icone dentro il menu mobile (1,74:1 su scuro). Misurato a 375 px,
    non dedotto.

    Da qui in avanti ogni colore della cornice nomina il suo contenitore.
*/
body.abp-application-layout .lpx-toolbar-container :is(.lpx-toolbar, .lpx-settings, .setting-icon, .setting, .lpx-icon, .lpx-menu-item, .lpx-menu-item-link, .lpx-menu-item-text) {
    color: var(--c3k-ink-2);
}

body.abp-application-layout :is(.lpx-mobile-menu, .lpx-mobile-navbar) :is(.lpx-settings, .setting-icon, .setting, .lpx-icon, .lpx-context-menu-user-email) {
    color: var(--c3k-nav-text);
}

body.abp-application-layout :is(.lpx-mobile-menu, .lpx-mobile-navbar) .lpx-context-menu-user-name {
    color: var(--c3k-nav-text-strong);
}

body.abp-application-layout .lpx-toolbar-container .lpx-toolbar {
    background-color: var(--c3k-surface);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-lg) 0 0 var(--c3k-radius-lg);
    border-inline-end: 0;
    box-shadow: var(--c3k-shadow-sm);
}

/* Il nome dell'utente sotto l'avatar, nella striscia larga 72 px: e' cornice,
   quindi in pixel. In rem, con il testo al 160%, usciva dal bordo della
   finestra. */
body.abp-application-layout #lpx-toolbar .lpx-user-menu .lpx-menu-item-text {
    display: block;
    max-width: 64px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* I pulsanti A- / A+ della dimensione del testo. Misurati in pixel apposta:
   devono restare dove sono e della stessa taglia mentre il resto cresce,
   altrimenti al livello piu' alto non entrano piu' nella barra e il pulsante
   per tornare indietro scappa di mano. Bersagli da 32 px (WCAG 2.5.8: 24). */
body.abp-application-layout .c3k-textsize {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background-color: var(--c3k-surface-sunken);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius);
}

body.abp-application-layout .c3k-textsize-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--c3k-radius-sm);
    background: transparent;
    color: var(--c3k-ink-2);
    font-family: var(--c3k-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

body.abp-application-layout .c3k-textsize-btn:hover:not(:disabled) {
    background-color: var(--c3k-surface);
    color: var(--c3k-ink);
}

body.abp-application-layout .c3k-textsize-btn:disabled {
    color: var(--c3k-faint);
    cursor: default;
}

/* Il livello attuale: piu' piccolo, e cliccabile solo se c'e' qualcosa da
   annullare. A 100% e' spento ma deve restare leggibile: dice dove si e'. */
body.abp-application-layout .c3k-textsize-btn.c3k-textsize-now {
    min-width: 44px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.abp-application-layout .c3k-textsize-btn.c3k-textsize-now:disabled {
    color: var(--c3k-muted);
}

body.abp-application-layout .c3k-textsize-sign {
    font-size: 12px;
    margin-inline-start: 1px;
    vertical-align: 0.1em;
}

/* LeptonX lo mette in due posti. Sulla striscia di destra, larga 72 px: in
   colonna, + in alto e - in basso (l'ordine del DOM). */
body.abp-application-layout #lpx-toolbar .c3k-textsize {
    flex-direction: column;
    margin: 4px auto 0;
}

/* Nel menu mobile c'e' spazio in larghezza: in riga, - a sinistra e + a
   destra come si legge. Si usa col pollice, e i bersagli crescono a 40 px. */
body.abp-application-layout .lpx-mobile-menu .c3k-textsize {
    flex-direction: row-reverse;
    margin: 8px 12px;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

body.abp-application-layout .lpx-mobile-menu .c3k-textsize-btn {
    min-width: 44px;
    height: 40px;
    color: var(--c3k-nav-text-strong);
}

body.abp-application-layout .lpx-mobile-menu .c3k-textsize-btn:hover:not(:disabled) {
    background-color: var(--c3k-nav-hover-bg);
    color: var(--c3k-nav-text-strong);
}

body.abp-application-layout .lpx-mobile-menu .c3k-textsize-btn:disabled,
body.abp-application-layout .lpx-mobile-menu .c3k-textsize-btn.c3k-textsize-now:disabled {
    color: var(--c3k-nav-muted);
}

/* Il menu dell'utente si apre sotto la barra superiore, che e' chiara: legge
   la stessa variabile della barra laterale e senza questo esce nero. */
body.abp-application-layout .lpx-context-menu {
    background-color: var(--c3k-surface);
    color: var(--c3k-ink);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-lg);
    box-shadow: var(--c3k-shadow-md);
}

body.abp-application-layout .lpx-context-menu a,
body.abp-application-layout .lpx-context-menu .lpx-context-menu--action-group a {
    color: var(--c3k-ink-2);
}

/* Le voci dei menu a tendina: le stesse classi della barra laterale, su fondo
   chiaro. Senza questo blocco il menu dell'aspetto e quello dell'utente
   escono grigio chiaro su bianco (vedi la nota nella sezione 3). */
body.abp-application-layout .lpx-context-menu :is(.lpx-menu-item, .lpx-menu-item-link) {
    color: var(--c3k-ink-2);
    border-radius: var(--c3k-radius);
    margin: 1px 0;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.14s ease, color 0.14s ease;
}

body.abp-application-layout .lpx-context-menu :is(.lpx-menu-item, .lpx-menu-item-link):hover {
    background-color: var(--c3k-brand-softer);
    color: var(--c3k-ink);
}

body.abp-application-layout .lpx-context-menu :is(.lpx-menu-item, .lpx-menu-item-link).selected {
    background-color: var(--c3k-brand-soft);
    color: var(--c3k-brand-ink);
    font-weight: 600;
}

body.abp-application-layout .lpx-context-menu .lpx-menu-item-title {
    color: var(--c3k-muted);
}

/* Le icone del menu a tendina seguono il testo della loro voce.
   Il secondo selettore non e' un doppione: il menu a tendina esiste anche
   DENTRO il menu mobile, dove e' una scheda chiara su fondo scuro, e li' la
   regola della cornice scura gli arriverebbe addosso a parita' di
   specificita'. Nominando il contenitore si vince senza dipendere
   dall'ordine delle righe. */
body.abp-application-layout .lpx-context-menu :is(.lpx-icon, .lpx-menu-item-icon, .setting-icon, .setting),
body.abp-application-layout .lpx-mobile-menu .lpx-context-menu :is(.lpx-icon, .lpx-menu-item-icon, .setting-icon, .setting) {
    color: inherit;
}

body.abp-application-layout .lpx-context-menu-user-name {
    color: var(--c3k-ink);
    font-weight: 600;
}

body.abp-application-layout .lpx-context-menu-user-email {
    color: var(--c3k-muted);
}

/* ========================================================================== */
/* 5. Le superfici: schede                                                    */
/* ========================================================================== */

body.abp-application-layout .card {
    background-color: var(--c3k-surface);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-lg);
    box-shadow: var(--c3k-shadow-sm);
}

body.abp-application-layout .card-body {
    padding: 20px 22px;
}

body.abp-application-layout .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--c3k-border);
    padding: 14px 22px;
    font-weight: 600;
    color: var(--c3k-ink);
}

body.abp-application-layout .card-footer {
    background-color: var(--c3k-surface-2);
    border-top: 1px solid var(--c3k-border);
    padding: 12px 22px;
}

body.abp-application-layout .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c3k-ink);
    margin-bottom: 0.5rem;
}

/* Il riquadro numerico del cruscotto: `.h2` sopra, `.text-muted.small` sotto.
   Non serve toccare la pagina per farlo sembrare un indicatore. */
body.abp-application-layout .card-body > .h2,
body.abp-application-layout .card-body > .h1 {
    font-family: var(--c3k-display);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--c3k-ink);
    font-variant-numeric: tabular-nums;
}

body.abp-application-layout .card-body > .h2 + .text-muted,
body.abp-application-layout .card-body > .h1 + .text-muted {
    margin-top: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Le schede su cui si clicca lo dicono al passaggio del mouse. Le pagine
   scritte a mano le marcano con `style="cursor: pointer"`: e' l'unico
   appiglio che c'e', e regge senza cambiare il markup. */
body.abp-application-layout .card[style*="cursor"] {
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

body.abp-application-layout .card[style*="cursor"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--c3k-shadow-md);
    border-color: rgba(var(--c3k-brand-rgb), 0.35);
}

body.abp-application-layout .card[style*="cursor"]:active {
    transform: translateY(0);
}

/* ========================================================================== */
/* 6. Le tabelle scritte a mano                                               */
/* ========================================================================== */

body.abp-application-layout .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--c3k-ink);
    --bs-table-border-color: var(--c3k-border);
    --bs-table-hover-bg: var(--c3k-brand-softer);
    --bs-table-hover-color: var(--c3k-ink);
    margin-bottom: 0;
}

body.abp-application-layout .table > thead > tr > th {
    background-color: transparent;
    border-bottom: 1px solid var(--c3k-border-strong);
    color: var(--c3k-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 14px;
    white-space: nowrap;
}

body.abp-application-layout .table > tbody > tr > td {
    padding: 12px 14px;
    border-bottom-color: var(--c3k-border);
    vertical-align: middle;
}

body.abp-application-layout .table > tbody > tr:last-child > td {
    border-bottom-color: transparent;
}

body.abp-application-layout .table-sm > thead > tr > th,
body.abp-application-layout .table-sm > tbody > tr > td {
    padding: 7px 10px;
}

body.abp-application-layout .table-hover > tbody > tr:hover > * {
    background-color: var(--c3k-brand-softer);
}

/* Le righe cliccabili. Stesso appiglio delle schede. */
body.abp-application-layout .table > tbody > tr[style*="cursor"]:hover > td:last-child {
    color: var(--c3k-brand-fg);
}

/* La tabella dentro una scheda tocca i bordi: la spaziatura la da' gia' la
   scheda, e due imbottiture sommate fanno una cornice storta. */
body.abp-application-layout .card > .table-responsive,
body.abp-application-layout .card > .table {
    margin: 0;
}

body.abp-application-layout .table-responsive {
    border-radius: var(--c3k-radius-lg);
}

/* ========================================================================== */
/* 7. Le pastiglie di stato                                                   */
/* ========================================================================== */

/*
    Le pagine scrivono `<span class="badge bg-secondary">`, `bg-warning`,
    `bg-danger`. Il default di Bootstrap ne fa dei rettangoli a tinta piena e
    satura: dieci righe di elenco diventano dieci semafori accesi, e lo stato
    urlato ovunque non distingue piu' niente. Qui diventano pastiglie tenui —
    fondo velato, testo forte — che restano leggibili (contrasto sopra 4,5:1) e
    lasciano l'attenzione al testo della riga.

    Bootstrap dichiara le utility `bg-*` con `!important`: per sostituirle serve
    `!important`, non c'e' scorciatoia.
*/

body.abp-application-layout .badge {
    --bs-badge-padding-x: 0.6em;
    --bs-badge-padding-y: 0.34em;
    --bs-badge-font-size: 0.8125rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--c3k-radius-pill);
    letter-spacing: 0.005em;
    line-height: 1.2;
    border: 1px solid transparent;
    vertical-align: 0.08em;
}

body.abp-application-layout .badge.bg-primary {
    background-color: var(--c3k-brand-soft) !important;
    border-color: rgba(var(--c3k-brand-rgb), 0.16);
    color: var(--c3k-brand-ink) !important;
}

body.abp-application-layout .badge.bg-secondary {
    background-color: var(--c3k-surface-sunken) !important;
    border-color: var(--c3k-border-strong);
    color: var(--c3k-ink-2) !important;
}

body.abp-application-layout .badge.bg-success {
    background-color: var(--c3k-success-soft) !important;
    border-color: rgba(var(--c3k-success-rgb), 0.18);
    color: var(--c3k-success-ink) !important;
}

body.abp-application-layout .badge.bg-danger {
    background-color: var(--c3k-danger-soft) !important;
    border-color: rgba(var(--c3k-danger-rgb), 0.18);
    color: var(--c3k-danger-ink) !important;
}

body.abp-application-layout .badge.bg-warning {
    background-color: var(--c3k-warning-soft) !important;
    border-color: rgba(var(--c3k-warning-rgb), 0.20);
    color: var(--c3k-warning-ink) !important;
}

body.abp-application-layout .badge.bg-info {
    background-color: var(--c3k-info-soft) !important;
    border-color: rgba(var(--c3k-info-rgb), 0.18);
    color: var(--c3k-info-ink) !important;
}

body.abp-application-layout .badge.bg-light {
    background-color: var(--c3k-surface-sunken) !important;
    border-color: var(--c3k-border);
    color: var(--c3k-ink-2) !important;
}

body.abp-application-layout .badge.bg-dark {
    background-color: rgba(var(--lpx-content-text-rgb), 0.10) !important;
    border-color: rgba(var(--lpx-content-text-rgb), 0.16);
    color: var(--c3k-ink) !important;
}

/* `bg-light text-dark` e' la coppia usata per i contatori accanto alle viste
   rapide: il `text-dark` non deve riportare il nero pieno. */
body.abp-application-layout .badge.bg-light.text-dark,
body.abp-application-layout .badge.bg-warning.text-dark {
    color: var(--c3k-ink-2) !important;
}

/* ========================================================================== */
/* 8. I bottoni                                                               */
/* ========================================================================== */

body.abp-application-layout .btn {
    --bs-btn-border-radius: var(--c3k-radius);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 0.95rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-size: 0.875rem;
    letter-spacing: 0.005em;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body.abp-application-layout .btn-sm {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.8125rem;
}

body.abp-application-layout .btn-lg {
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: 0.62rem;
    --bs-btn-font-size: 1rem;
}

body.abp-application-layout .btn:focus-visible {
    box-shadow: var(--c3k-ring);
}

body.abp-application-layout .btn-primary {
    --bs-btn-color: var(--c3k-on-brand);
    --bs-btn-hover-color: var(--c3k-on-brand);
    --bs-btn-active-color: var(--c3k-on-brand);
    --bs-btn-disabled-color: var(--c3k-on-brand);
    --bs-btn-bg: var(--c3k-brand);
    --bs-btn-border-color: var(--c3k-brand);
    --bs-btn-hover-bg: var(--c3k-brand-hover);
    --bs-btn-hover-border-color: var(--c3k-brand-hover);
    --bs-btn-active-bg: var(--c3k-brand-active);
    --bs-btn-active-border-color: var(--c3k-brand-active);
    --bs-btn-disabled-bg: var(--c3k-brand);
    --bs-btn-disabled-border-color: var(--c3k-brand);
    box-shadow: var(--c3k-shadow-xs);
}

body.abp-application-layout .btn-outline-primary {
    --bs-btn-color: var(--c3k-brand-fg);
    --bs-btn-border-color: rgba(var(--c3k-brand-rgb), 0.40);
    --bs-btn-hover-bg: var(--c3k-brand-soft);
    --bs-btn-hover-color: var(--c3k-brand-ink);
    --bs-btn-hover-border-color: rgba(var(--c3k-brand-rgb), 0.55);
    --bs-btn-active-bg: var(--c3k-brand-soft);
    --bs-btn-active-color: var(--c3k-brand-ink);
    --bs-btn-active-border-color: var(--c3k-brand);
}

body.abp-application-layout .btn-outline-secondary {
    --bs-btn-color: var(--c3k-ink-2);
    --bs-btn-border-color: var(--c3k-border-strong);
    --bs-btn-hover-bg: var(--c3k-surface-sunken);
    --bs-btn-hover-color: var(--c3k-ink);
    --bs-btn-hover-border-color: var(--c3k-border-strong);
    --bs-btn-active-bg: var(--c3k-surface-sunken);
    --bs-btn-active-color: var(--c3k-ink);
    --bs-btn-active-border-color: var(--c3k-border-strong);
}

body.abp-application-layout .btn-outline-danger {
    --bs-btn-color: var(--c3k-danger-fg);
    --bs-btn-border-color: rgba(var(--c3k-danger-rgb), 0.38);
    --bs-btn-hover-bg: var(--c3k-danger-soft);
    --bs-btn-hover-color: var(--c3k-danger-ink);
    --bs-btn-hover-border-color: rgba(var(--c3k-danger-rgb), 0.55);
}

body.abp-application-layout .btn-danger {
    --bs-btn-bg: var(--c3k-danger);
    --bs-btn-border-color: var(--c3k-danger);
    --bs-btn-hover-bg: var(--c3k-danger-hover);
    --bs-btn-hover-border-color: var(--c3k-danger-hover);
    --bs-btn-active-bg: var(--c3k-danger-active);
    --bs-btn-active-border-color: var(--c3k-danger-active);
}

body.abp-application-layout .btn-secondary {
    --bs-btn-bg: var(--c3k-surface-sunken);
    --bs-btn-border-color: var(--c3k-border-strong);
    --bs-btn-color: var(--c3k-ink);
    --bs-btn-hover-bg: var(--c3k-border);
    --bs-btn-hover-border-color: var(--c3k-border-strong);
    --bs-btn-hover-color: var(--c3k-ink);
    --bs-btn-active-bg: var(--c3k-border);
    --bs-btn-active-color: var(--c3k-ink);
}

body.abp-application-layout .btn-success {
    --bs-btn-bg: var(--c3k-success);
    --bs-btn-border-color: var(--c3k-success);
    --bs-btn-hover-bg: var(--c3k-success-hover);
    --bs-btn-hover-border-color: var(--c3k-success-hover);
}

/*
    Le varianti `soft` e `grey` di LeptonX (`<a class="btn btn-primary soft">`).
    Vanno ridipinte, non ignorate: le loro regole hanno specificita' (0,2,0) e
    perdono contro le nostre (0,2,1), quindi ereditano il fondo pieno nuovo e
    si tengono il testo del colore vecchio — un bottone arancio con dentro
    del testo arancio. Le pagine dei moduli ABP le usano; le nostre no, ancora.
*/
body.abp-application-layout .btn-primary.soft,
body.abp-application-layout .btn-brand.soft {
    --bs-btn-color: var(--c3k-brand-ink);
    --bs-btn-bg: var(--c3k-brand-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-brand-ink);
    --bs-btn-hover-bg: var(--c3k-brand-soft-hover);
    --bs-btn-hover-border-color: transparent;
    box-shadow: none;
}

body.abp-application-layout .btn-secondary.soft {
    --bs-btn-color: var(--c3k-ink-2);
    --bs-btn-bg: var(--c3k-surface-sunken);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-ink);
    --bs-btn-hover-bg: var(--c3k-border);
    --bs-btn-hover-border-color: transparent;
}

body.abp-application-layout .btn-danger.soft {
    --bs-btn-color: var(--c3k-danger-ink);
    --bs-btn-bg: var(--c3k-danger-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-danger-ink);
    --bs-btn-hover-bg: var(--c3k-danger-soft-hover);
    --bs-btn-hover-border-color: transparent;
}

body.abp-application-layout .btn-success.soft {
    --bs-btn-color: var(--c3k-success-ink);
    --bs-btn-bg: var(--c3k-success-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-success-ink);
    --bs-btn-hover-bg: var(--c3k-success-soft-hover);
    --bs-btn-hover-border-color: transparent;
}

body.abp-application-layout .btn-warning.soft {
    --bs-btn-color: var(--c3k-warning-ink);
    --bs-btn-bg: var(--c3k-warning-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-warning-ink);
    --bs-btn-hover-bg: var(--c3k-warning-soft-hover);
    --bs-btn-hover-border-color: transparent;
}

body.abp-application-layout .btn-info.soft {
    --bs-btn-color: var(--c3k-info-ink);
    --bs-btn-bg: var(--c3k-info-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c3k-info-ink);
    --bs-btn-hover-bg: var(--c3k-info-soft-hover);
    --bs-btn-hover-border-color: transparent;
}

/* `btn-brand` e' l'accento di LeptonX, un rosa fisso nel foglio del tema.
   Il prodotto ha un accento solo, ed e' l'arancio del marchio, con il testo
   scuro sopra: bianco su arancio fa 2,2:1. */
body.abp-application-layout .btn-brand {
    --bs-btn-bg: var(--c3k-brand);
    --bs-btn-border-color: var(--c3k-brand);
    --bs-btn-color: var(--c3k-on-brand);
    --bs-btn-hover-bg: var(--c3k-brand-hover);
    --bs-btn-hover-border-color: var(--c3k-brand-hover);
    --bs-btn-hover-color: var(--c3k-on-brand);
    --bs-btn-active-color: var(--c3k-on-brand);
}

/* `btn-link` e' usato per le azioni in coda alle righe: senza sottolineatura
   a riposo non fa rumore, con la sottolineatura al passaggio resta un link. */
body.abp-application-layout .btn-link {
    --bs-btn-color: var(--c3k-brand-fg);
    --bs-btn-hover-color: var(--c3k-brand-fg-hover);
    --bs-btn-padding-x: 0.15rem;
    text-decoration: none;
    font-weight: 600;
}

body.abp-application-layout .btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* ========================================================================== */
/* 9. Gli avvisi                                                              */
/* ========================================================================== */

/* Fondo tenue e una barra di colore a sinistra, come gli avvisi del mockup:
   non un rettangolo colorato. */
body.abp-application-layout .alert {
    --bs-alert-border-radius: var(--c3k-radius-lg);
    border: 1px solid transparent;
    border-inline-start-width: 3px;
    padding: 16px 20px;
    color: var(--c3k-ink);
}

body.abp-application-layout .alert-heading,
body.abp-application-layout .alert h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: inherit;
}

body.abp-application-layout .alert-primary {
    background-color: var(--c3k-brand-soft);
    border-color: rgba(var(--c3k-brand-rgb), 0.18);
    border-inline-start-color: var(--c3k-brand);
}

body.abp-application-layout .alert-secondary {
    background-color: var(--c3k-surface-2);
    border-color: var(--c3k-border);
    border-inline-start-color: var(--c3k-border-strong);
}

body.abp-application-layout .alert-success {
    background-color: var(--c3k-success-soft);
    border-color: rgba(var(--c3k-success-rgb), 0.18);
    border-inline-start-color: var(--c3k-success);
}

body.abp-application-layout .alert-warning {
    background-color: var(--c3k-warning-soft);
    border-color: rgba(var(--c3k-warning-rgb), 0.20);
    border-inline-start-color: var(--c3k-warning);
}

body.abp-application-layout .alert-danger {
    background-color: var(--c3k-danger-soft);
    border-color: rgba(var(--c3k-danger-rgb), 0.18);
    border-inline-start-color: var(--c3k-danger);
}

body.abp-application-layout .alert-info {
    background-color: var(--c3k-info-soft);
    border-color: rgba(var(--c3k-info-rgb), 0.18);
    border-inline-start-color: var(--c3k-info);
}

/* Il riquadro "da guardare adesso" del cruscotto e' un alert-danger con dentro
   due `display-6`. Il numero deve pesare, il fondo no. */
body.abp-application-layout .alert .display-6 {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--c3k-danger-ink);
}

body.abp-application-layout .alert-warning .display-6 { color: var(--c3k-warning-ink); }
body.abp-application-layout .alert-success .display-6 { color: var(--c3k-success-ink); }
body.abp-application-layout .alert-info .display-6    { color: var(--c3k-info-ink); }

body.abp-application-layout .alert small {
    color: var(--c3k-muted);
}

/* ========================================================================== */
/* 10. Navigazione dentro la pagina                                           */
/* ========================================================================== */

/* Le viste rapide (filtri a scelta unica) sono `ul.nav.nav-pills` di bottoni. Un controllo
   segmentato dice "sono alternative fra loro"; pastiglie sparse no. */
body.abp-application-layout .nav-pills {
    background-color: var(--c3k-surface-sunken);
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-lg);
    padding: 4px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}

body.abp-application-layout .nav-pills .nav-item {
    margin: 0;
}

body.abp-application-layout .nav-pills .nav-link {
    --bs-nav-pills-border-radius: var(--c3k-radius);
    color: var(--c3k-ink-2);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body.abp-application-layout .nav-pills .nav-link:hover {
    color: var(--c3k-ink);
    background-color: var(--c3k-pill-hover-bg);
}

body.abp-application-layout .nav-pills .nav-link.active {
    background-color: var(--c3k-brand);
    color: var(--c3k-on-brand);
    font-weight: 600;
    box-shadow: var(--c3k-shadow-xs);
}

body.abp-application-layout .nav-pills .nav-link .badge {
    margin-inline-start: 0.4rem;
}

body.abp-application-layout .nav-tabs {
    --bs-nav-tabs-border-color: var(--c3k-border);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--c3k-brand);
    --bs-nav-tabs-link-active-color: var(--c3k-brand-fg);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-radius: 0;
    gap: 2px;
}

body.abp-application-layout .nav-tabs .nav-link {
    color: var(--c3k-muted);
    font-weight: 500;
    border-color: transparent;
}

body.abp-application-layout .nav-tabs .nav-link:hover {
    color: var(--c3k-ink);
    border-color: transparent transparent var(--c3k-border-strong);
}

body.abp-application-layout .list-group {
    --bs-list-group-border-color: var(--c3k-border);
    --bs-list-group-border-radius: var(--c3k-radius-lg);
    --bs-list-group-bg: var(--c3k-surface);
    --bs-list-group-color: var(--c3k-ink);
    --bs-list-group-action-hover-bg: var(--c3k-brand-softer);
    --bs-list-group-active-bg: var(--c3k-brand);
    --bs-list-group-active-border-color: var(--c3k-brand);
    --bs-list-group-active-color: var(--c3k-on-brand);
}

body.abp-application-layout .list-group-item {
    color: var(--c3k-ink);
    padding: 12px 16px;
}

/* ========================================================================== */
/* 11. I moduli scritti a mano                                                */
/* ========================================================================== */

body.abp-application-layout .form-label {
    color: var(--c3k-ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

body.abp-application-layout .form-control,
body.abp-application-layout .form-select {
    background-color: var(--c3k-surface);
    border: 1px solid var(--c3k-border-strong);
    border-radius: var(--c3k-radius);
    color: var(--c3k-ink);
    font-size: 0.875rem;
    padding: 0.45rem 0.7rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

body.abp-application-layout .form-control::placeholder {
    color: var(--c3k-faint);
}

body.abp-application-layout .form-control:focus,
body.abp-application-layout .form-select:focus {
    border-color: var(--c3k-control);
    box-shadow: var(--c3k-ring);
    outline: 0;
}

body.abp-application-layout .form-control:disabled,
body.abp-application-layout .form-control[readonly] {
    background-color: var(--c3k-surface-sunken);
    color: var(--c3k-muted);
}

body.abp-application-layout .form-text {
    color: var(--c3k-muted);
    font-size: 0.75rem;
}

body.abp-application-layout .form-check-input {
    border-color: var(--c3k-border-strong);
}

body.abp-application-layout .form-check-input:checked {
    background-color: var(--c3k-control);
    border-color: var(--c3k-control);
}

body.abp-application-layout .form-check-input:focus {
    border-color: var(--c3k-control);
    box-shadow: var(--c3k-ring);
}

body.abp-application-layout .form-check-label {
    color: var(--c3k-ink-2);
}

body.abp-application-layout .form-control-color {
    padding: 0.2rem;
    width: 3rem;
}

/* Un campo corto accanto alle sue opzioni (es. il valore dello sconto di un coupon) */
body.abp-application-layout .c3k-field-short {
    max-width: 10rem;
}

body.abp-application-layout .input-group-text {
    background-color: var(--c3k-surface-sunken);
    border-color: var(--c3k-border-strong);
    color: var(--c3k-muted);
    font-size: 0.8125rem;
}

body.abp-application-layout .dropdown-menu {
    --bs-dropdown-border-color: var(--c3k-border);
    --bs-dropdown-border-radius: var(--c3k-radius-lg);
    --bs-dropdown-bg: var(--c3k-surface);
    --bs-dropdown-link-color: var(--c3k-ink-2);
    --bs-dropdown-link-hover-bg: var(--c3k-brand-softer);
    --bs-dropdown-link-hover-color: var(--c3k-ink);
    --bs-dropdown-link-active-bg: var(--c3k-brand-soft);
    --bs-dropdown-link-active-color: var(--c3k-brand-ink);
    --bs-dropdown-padding-y: 0.35rem;
    --bs-dropdown-item-padding-x: 0.9rem;
    --bs-dropdown-item-padding-y: 0.4rem;
    box-shadow: var(--c3k-shadow-md);
}

body.abp-application-layout .modal-content {
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius-lg);
    box-shadow: var(--c3k-shadow-lg);
}

body.abp-application-layout .modal-header,
body.abp-application-layout .modal-footer {
    border-color: var(--c3k-border);
    padding: 16px 22px;
}

body.abp-application-layout .modal-title {
    font-family: var(--c3k-display);
    font-size: 1.25rem;
    font-weight: 700;
}

body.abp-application-layout .modal-body {
    padding: 22px;
}

/* ========================================================================== */
/* 12. DevExpress                                                             */
/* ========================================================================== */

/*
    Il tema `purple.bs5` di DevExpress deriva quasi tutto da Bootstrap — 1408
    riferimenti a `var(--bs-*)` — quindi la sezione 1 ha gia' spostato la
    maggior parte dei colori. Restano i blocchi in cui il tema scrive
    esadecimali fissi dentro le variabili del componente (`.dxbl-btn-primary` e
    simili): quelli si sostituiscono uno per uno, per nome di variabile
    documentata, non ridisegnando gli interni dei componenti. Le variabili
    `--dxbl-*` sono contratto pubblico; le classi interne no, e cambiano fra
    una minor e l'altra.
*/

body.abp-application-layout .dxbl-grid {
    --dxbl-grid-font-size: 0.875rem;
    --dxbl-grid-bg: var(--c3k-surface);
    --dxbl-grid-color: var(--c3k-ink);
    --dxbl-grid-border-color: var(--c3k-border);
    --dxbl-grid-outer-border-color: var(--c3k-border);
    --dxbl-grid-h-line-color: var(--c3k-border);
    --dxbl-grid-v-line-color: transparent;
    --dxbl-grid-border-radius: var(--c3k-radius-lg);
    --dxbl-grid-header-bg: var(--c3k-surface);
    --dxbl-grid-header-color: var(--c3k-muted);
    --dxbl-grid-header-font-weight: 600;
    --dxbl-grid-footer-bg: var(--c3k-surface-2);
    --dxbl-grid-footer-color: var(--c3k-ink-2);
    --dxbl-grid-group-footer-bg: var(--c3k-surface-2);
    --dxbl-grid-hover-bg: var(--c3k-brand-softer);
    --dxbl-grid-hover-bg-static: var(--c3k-brand-softer);
    --dxbl-grid-hover-color: var(--c3k-ink);
    --dxbl-grid-selection-bg: var(--c3k-brand-soft);
    --dxbl-grid-selection-color: var(--c3k-ink);
    --dxbl-grid-selection-focus-bg: var(--c3k-brand-soft);
    --dxbl-grid-selection-focus-color: var(--c3k-ink);
    --dxbl-grid-focus-bg: var(--c3k-brand-soft);
    --dxbl-grid-focus-color: var(--c3k-ink);
    --dxbl-grid-focus-frame-color: rgba(var(--c3k-brand-rgb), 0.55);
    --dxbl-grid-text-cell-padding-x: 0.75rem;
    --dxbl-grid-text-cell-padding-y: 0.5rem;
    --dxbl-grid-editor-cell-padding-x: 0.75rem;
    --dxbl-grid-editor-cell-padding-y: 0.375rem;
    --dxbl-grid-toolbar-container-padding-x: 0.75rem;
    --dxbl-grid-toolbar-container-padding-y: 0.625rem;
    --dxbl-grid-highlighted-text-bg: #fff3bf;
    --dxbl-grid-highlighted-text-color: var(--c3k-ink);
    box-shadow: var(--c3k-shadow-sm);
}

/*
    L'intestazione di colonna prende il peso e il colore di quella delle tabelle
    scritte a mano, ma NON il maiuscolo.

    Nelle tabelle a mano le intestazioni sono parole italiane corte e sei o
    sette per riga: «NUMERO», «STATO». Qui sono identificatori PascalCase, e ce
    ne sono quindici a 100 px l'una. Il maiuscolo fa due danni misurati:
    «OrganizationStatus» diventa «ORGANIZATIONSTATUS» — perde l'unica
    separazione fra parole che ha — e allarga il testo quanto basta a troncare
    una colonna in piu' ogni dieci. Vale per la griglia, non per la tabella:
    e' la stessa scelta tipografica applicata a due contenuti diversi.
*/
body.abp-application-layout .dxbl-grid thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    text-transform: none;
}

body.abp-application-layout .dxbl-toolbar {
    --dxbl-toolbar-bg: transparent;
    --dxbl-toolbar-color: var(--c3k-ink-2);
    --dxbl-toolbar-separator-color: var(--c3k-border);
    --dxbl-toolbar-btn-bg: transparent;
    --dxbl-toolbar-btn-color: var(--c3k-ink-2);
    --dxbl-toolbar-btn-image-color: var(--c3k-muted);
    --dxbl-toolbar-btn-border-color: transparent;
    --dxbl-toolbar-btn-border-radius: var(--c3k-radius);
    --dxbl-toolbar-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-toolbar-btn-hover-color: var(--c3k-ink);
    --dxbl-toolbar-btn-hover-image-color: var(--c3k-brand);
    --dxbl-toolbar-btn-active-bg: var(--c3k-brand-soft);
    --dxbl-toolbar-btn-active-color: var(--c3k-brand-ink);
    --dxbl-toolbar-btn-active-image-color: var(--c3k-brand-ink);
    --dxbl-toolbar-btn-padding-x: 0.7rem;
    --dxbl-toolbar-btn-padding-y: 0.35rem;
    --dxbl-btn-toolbar-focus-outline-color: var(--c3k-control);
    --dxbl-toolbar-title-color: var(--c3k-ink);
    --dxbl-toolbar-title-font-weight: 600;
}

body.abp-application-layout .dxbl-btn {
    --dxbl-btn-border-radius: var(--c3k-radius);
    --dxbl-btn-font-size: 0.875rem;
    --dxbl-btn-padding-x: 0.9rem;
    --dxbl-btn-padding-y: 0.45rem;
    --dxbl-btn-focus-outline-color: var(--c3k-control);
    --dxbl-btn-link-text-decoration: none;
    --dxbl-btn-link-hover-color: var(--c3k-brand-fg-hover);
    --dxbl-btn-font-weight: 600;
}

body.abp-application-layout .dxbl-btn-primary {
    --dxbl-btn-bg: var(--c3k-brand);
    --dxbl-btn-border-color: var(--c3k-brand);
    --dxbl-btn-color: var(--c3k-on-brand);
    --dxbl-btn-hover-bg: var(--c3k-brand-hover);
    --dxbl-btn-hover-border-color: var(--c3k-brand-hover);
    --dxbl-btn-hover-color: var(--c3k-on-brand);
    --dxbl-btn-active-bg: var(--c3k-brand-active);
    --dxbl-btn-active-border-color: var(--c3k-brand-active);
    --dxbl-btn-active-color: var(--c3k-on-brand);
    --dxbl-btn-focus-bg: var(--c3k-brand);
    --dxbl-btn-focus-border-bg: var(--c3k-brand);
    --dxbl-btn-focus-border-color: var(--c3k-brand);
    --dxbl-btn-focus-color: var(--c3k-on-brand);
    --dxbl-btn-disabled-color: var(--c3k-on-brand);
    --dxbl-btn-focus-outline-color: var(--c3k-control);
    --dxbl-btn-disabled-bg: rgba(var(--c3k-brand-rgb), 0.45);
    --dxbl-btn-disabled-border-color: rgba(var(--c3k-brand-rgb), 0.45);
    --dxbl-btn-box-shadow: var(--c3k-shadow-xs);
}

body.abp-application-layout .dxbl-btn-secondary {
    --dxbl-btn-bg: var(--c3k-surface-sunken);
    --dxbl-btn-border-color: var(--c3k-border-strong);
    --dxbl-btn-color: var(--c3k-ink);
    --dxbl-btn-hover-bg: var(--c3k-border);
    --dxbl-btn-hover-border-color: var(--c3k-border-strong);
    --dxbl-btn-hover-color: var(--c3k-ink);
    --dxbl-btn-active-bg: var(--c3k-border);
    --dxbl-btn-active-color: var(--c3k-ink);
    --dxbl-btn-focus-outline-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-btn-danger {
    --dxbl-btn-bg: var(--c3k-danger);
    --dxbl-btn-border-color: var(--c3k-danger);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-bg: var(--c3k-danger-hover);
    --dxbl-btn-hover-border-color: var(--c3k-danger-hover);
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-active-bg: var(--c3k-danger-active);
    --dxbl-btn-active-border-color: var(--c3k-danger-active);
    --dxbl-btn-focus-outline-color: var(--c3k-danger);
}

/* I pulsanti bordati (`RenderStyleMode="Outline"`). Il tema scrive i propri
   esadecimali: il primario restava viola (#5969e3, 3,7:1 sul fondo scuro), il
   secondario grigio Bootstrap (#495057, 2,1:1 sul fondo scuro). */
body.abp-application-layout .dxbl-btn-outline-primary {
    --dxbl-btn-color: var(--c3k-brand-fg);
    --dxbl-btn-border-color: rgba(var(--c3k-brand-rgb), 0.55);
    --dxbl-btn-hover-bg: var(--c3k-brand-soft);
    --dxbl-btn-hover-color: var(--c3k-brand-ink);
    --dxbl-btn-hover-border-color: var(--c3k-brand);
    --dxbl-btn-active-bg: var(--c3k-brand-soft-hover);
    --dxbl-btn-active-color: var(--c3k-brand-ink);
    --dxbl-btn-active-border-color: var(--c3k-brand);
    --dxbl-btn-focus-shadow-color: rgba(var(--c3k-brand-rgb), 0.35);
}

body.abp-application-layout .dxbl-btn-outline-secondary {
    --dxbl-btn-color: var(--c3k-ink-2);
    --dxbl-btn-border-color: var(--c3k-border-strong);
    --dxbl-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-btn-hover-color: var(--c3k-ink);
    --dxbl-btn-hover-border-color: var(--c3k-border-strong);
    --dxbl-btn-active-bg: var(--c3k-border);
    --dxbl-btn-active-color: var(--c3k-ink);
    --dxbl-btn-active-border-color: var(--c3k-border-strong);
}

body.abp-application-layout .dxbl-btn-outline-danger {
    --dxbl-btn-color: var(--c3k-danger-fg);
    --dxbl-btn-border-color: rgba(var(--c3k-danger-rgb), 0.45);
    --dxbl-btn-hover-bg: var(--c3k-danger-soft);
    --dxbl-btn-hover-color: var(--c3k-danger-ink);
    --dxbl-btn-hover-border-color: var(--c3k-danger);
    --dxbl-btn-active-bg: var(--c3k-danger-soft-hover);
    --dxbl-btn-active-color: var(--c3k-danger-ink);
}

body.abp-application-layout .dxbl-btn-outline-success {
    --dxbl-btn-color: var(--c3k-success-fg);
    --dxbl-btn-border-color: rgba(var(--c3k-success-rgb), 0.45);
    --dxbl-btn-hover-bg: var(--c3k-success-soft);
    --dxbl-btn-hover-color: var(--c3k-success-ink);
    --dxbl-btn-hover-border-color: var(--c3k-success);
    --dxbl-btn-active-bg: var(--c3k-success-soft-hover);
    --dxbl-btn-active-color: var(--c3k-success-ink);
}

/* Il giallo #ffc107 di DevExpress su bianco fa 1,6:1 (il contatore "1/8" dei
   check-in parziali, in /prenotazioni). */
body.abp-application-layout .dxbl-btn-outline-warning {
    --dxbl-btn-color: var(--c3k-warning-fg);
    --dxbl-btn-border-color: rgba(var(--c3k-warning-rgb), 0.50);
    --dxbl-btn-hover-bg: var(--c3k-warning-soft);
    --dxbl-btn-hover-color: var(--c3k-warning-ink);
    --dxbl-btn-hover-border-color: var(--c3k-warning);
    --dxbl-btn-active-bg: var(--c3k-warning-soft-hover);
    --dxbl-btn-active-color: var(--c3k-warning-ink);
}

body.abp-application-layout .dxbl-btn-outline-info {
    --dxbl-btn-color: var(--c3k-info-fg);
    --dxbl-btn-border-color: rgba(var(--c3k-info-rgb), 0.45);
    --dxbl-btn-hover-bg: var(--c3k-info-soft);
    --dxbl-btn-hover-color: var(--c3k-info-ink);
    --dxbl-btn-hover-border-color: var(--c3k-info);
    --dxbl-btn-active-bg: var(--c3k-info-soft-hover);
    --dxbl-btn-active-color: var(--c3k-info-ink);
}

/* Il bottone attaccato a un campo (`.input-group > .btn`, il "Verifica" del
   riscatto). Il tema DevExpress gli scrive un fondo grigio e il testo
   #495057 fissi, a (0,2,0), e ogni variante — primario compreso — diventava
   un bottone grigio: 2,1:1 sul fondo scuro. Qui torna a leggere le variabili
   della sua variante, come ogni altro `.btn`. */
body.abp-application-layout .input-group > .btn {
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

body.abp-application-layout .input-group > .btn:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

body.abp-application-layout .input-group > .btn:active {
    background-color: var(--bs-btn-active-bg);
    color: var(--bs-btn-active-color);
}

/*
    I pulsanti piatti della barra strumenti (`In4ToolbarItem` rende
    `.dxbl-btn-text-*`). Erano rimasti sulla tavolozza del tema `purple`:
    "Elimina" era il rosso #f31b48 di DevExpress, che su bianco sta a 4,15:1 —
    sotto la soglia, e di un rosso diverso da quello del resto del prodotto.

    Cambia anche il comportamento al passaggio del mouse: DevExpress riempie il
    pulsante di colore pieno con il testo bianco. In una barra strumenti di sei
    voci il lampo di colore pieno sposta l'attenzione ogni volta che il mouse
    attraversa la riga. Qui e' una velatura.
*/
body.abp-application-layout .dxbl-btn-text-primary {
    --dxbl-btn-color: var(--c3k-brand-fg);
    --dxbl-btn-hover-bg: var(--c3k-brand-soft);
    --dxbl-btn-hover-color: var(--c3k-brand-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-brand-soft-hover);
    --dxbl-btn-active-color: var(--c3k-brand-ink);
    --dxbl-btn-active-border-color: transparent;
    --dxbl-btn-focus-shadow-color: rgba(var(--c3k-brand-rgb), 0.35);
}

body.abp-application-layout .dxbl-btn-text-danger {
    --dxbl-btn-color: var(--c3k-danger-fg);
    --dxbl-btn-hover-bg: var(--c3k-danger-soft);
    --dxbl-btn-hover-color: var(--c3k-danger-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-danger-soft-hover);
    --dxbl-btn-active-color: var(--c3k-danger-ink);
    --dxbl-btn-active-border-color: transparent;
    --dxbl-btn-focus-shadow-color: rgba(var(--c3k-danger-rgb), 0.35);
}

body.abp-application-layout .dxbl-btn-text-secondary,
body.abp-application-layout .dxbl-btn-text-dark {
    --dxbl-btn-color: var(--c3k-ink-2);
    --dxbl-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-btn-hover-color: var(--c3k-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-border);
    --dxbl-btn-active-color: var(--c3k-ink);
    --dxbl-btn-active-border-color: transparent;
}

body.abp-application-layout .dxbl-btn-text-success {
    --dxbl-btn-color: var(--c3k-success-fg);
    --dxbl-btn-hover-bg: var(--c3k-success-soft);
    --dxbl-btn-hover-color: var(--c3k-success-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-success-soft-hover);
    --dxbl-btn-active-color: var(--c3k-success-ink);
}

body.abp-application-layout .dxbl-btn-text-warning {
    --dxbl-btn-color: var(--c3k-warning-fg);
    --dxbl-btn-hover-bg: var(--c3k-warning-soft);
    --dxbl-btn-hover-color: var(--c3k-warning-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-warning-soft-hover);
    --dxbl-btn-active-color: var(--c3k-warning-ink);
}

body.abp-application-layout .dxbl-btn-text-info {
    --dxbl-btn-color: var(--c3k-info-fg);
    --dxbl-btn-hover-bg: var(--c3k-info-soft);
    --dxbl-btn-hover-color: var(--c3k-info-ink);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--c3k-info-soft-hover);
    --dxbl-btn-active-color: var(--c3k-info-ink);
}

body.abp-application-layout .dxbl-text-edit,
body.abp-application-layout .dxbl-edit {
    --dxbl-text-edit-bg: var(--c3k-surface);
    --dxbl-text-edit-color: var(--c3k-ink);
    --dxbl-text-edit-border-color: var(--c3k-border-strong);
    --dxbl-text-edit-border-radius: var(--c3k-radius);
    --dxbl-text-edit-padding-x: 0.7rem;
    --dxbl-text-edit-padding-y: 0.4rem;
    --dxbl-text-edit-readonly-bg: var(--c3k-surface-sunken);
    --dxbl-text-edit-readonly-color: var(--c3k-muted);
    --dxbl-text-edit-disabled-bg: var(--c3k-surface-sunken);
    --dxbl-text-edit-disabled-color: var(--c3k-muted);
    --dxbl-text-edit-focus-border-color: var(--c3k-control);
    --dxbl-text-edit-focus-shadow-color: rgba(var(--c3k-brand-rgb), 0.20);
    --dxbl-text-edit-focus-shadow-spread: 3px;
    --dxbl-text-edit-focus-shadow-blur: 0;
    --dxbl-text-edit-btn-color: var(--c3k-muted);
    --dxbl-text-edit-btn-image-color: var(--c3k-muted);
    --dxbl-text-edit-btn-hover-color: var(--c3k-ink);
    --dxbl-text-edit-btn-hover-image-color: var(--c3k-brand);
    --dxbl-text-edit-validation-invalid-color: var(--c3k-danger);
    --dxbl-text-edit-validation-valid-color: var(--c3k-success);
}

body.abp-application-layout .dxbl-modal {
    --dxbl-popup-bg: var(--c3k-surface);
    --dxbl-popup-color: var(--c3k-ink);
    --dxbl-popup-border-color: var(--c3k-border);
    --dxbl-popup-border-radius: var(--c3k-radius-lg);
    --dxbl-popup-shadow: var(--c3k-shadow-lg);
    --dxbl-popup-back-bg: #0b1220;
    --dxbl-popup-back-opacity: 0.45;
    --dxbl-popup-header-bg: var(--c3k-surface);
    --dxbl-popup-header-color: var(--c3k-ink);
    --dxbl-popup-header-font-size: 1rem;
    --dxbl-popup-header-font-weight: 600;
    --dxbl-popup-header-padding-x: 1.375rem;
    --dxbl-popup-header-padding-y: 1rem;
    --dxbl-popup-header-btn-color: var(--c3k-muted);
    --dxbl-popup-header-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-popup-header-btn-hover-color: var(--c3k-ink);
    --dxbl-popup-body-padding-x: 1.375rem;
    --dxbl-popup-body-padding-y: 1.25rem;
    --dxbl-popup-footer-bg: var(--c3k-surface-2);
    --dxbl-popup-footer-padding-x: 1.375rem;
    --dxbl-popup-footer-padding-y: 0.875rem;
}

/* Testa e piede della finestra hanno lo stesso fondo del corpo: senza una
   riga che li separi non si distinguono, e l'intestazione delle maschere
   generate e' vuota (il titolo non arriva dalla localizzazione — difetto
   preesistente, verificato spegnendo questo foglio). Con la riga, la testa
   resta una testa anche senza titolo. */
body.abp-application-layout .dxbl-modal-header,
body.abp-application-layout .dxbl-window-header {
    border-bottom: 1px solid var(--c3k-border);
}

body.abp-application-layout .dxbl-modal-footer,
body.abp-application-layout .dxbl-window-footer {
    border-top: 1px solid var(--c3k-border);
}

body.abp-application-layout .dxbl-window {
    --dxbl-window-color: var(--c3k-ink);
    --dxbl-window-border-color: var(--c3k-border);
    --dxbl-window-border-radius: var(--c3k-radius-lg);
    --dxbl-window-box-shadow: var(--c3k-shadow-lg);
    --dxbl-window-header-bg: var(--c3k-surface);
    --dxbl-window-header-color: var(--c3k-ink);
    --dxbl-window-header-font-weight: 600;
    --dxbl-window-footer-bg: var(--c3k-surface-2);
    --dxbl-window-focus-outline-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-tabs {
    --dxbl-tabs-bg: transparent;
    --dxbl-tabs-separator-border-color: var(--c3k-border);
    --dxbl-tabs-tab-border-color: transparent;
    --dxbl-tabs-tab-selected-bg: transparent;
    --dxbl-tabs-tab-selected-color: var(--c3k-brand-fg);
    --dxbl-tabs-tab-hover-bg: var(--c3k-surface-sunken);
    --dxbl-tabs-tab-hover-color: var(--c3k-ink);
    --dxbl-tabs-tab-padding-x: 0.9rem;
    --dxbl-tabs-tab-padding-y: 0.5rem;
    --dxbl-tabs-tab-focus-outline-color: var(--c3k-control);
    --dxbl-tabs-content-color: var(--c3k-ink);
    --dxbl-tabs-close-btn-color: var(--c3k-muted);
}

body.abp-application-layout .dxbl-pager {
    --dxbl-pager-bg: transparent;
    --dxbl-pager-color: var(--c3k-ink-2);
    --dxbl-pager-border-color: var(--c3k-border);
    --dxbl-pager-border-radius: var(--c3k-radius);
    --dxbl-pager-btn-bg: transparent;
    --dxbl-pager-btn-border-color: transparent;
    --dxbl-pager-btn-color: var(--c3k-muted);
    --dxbl-pager-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-pager-btn-hover-color: var(--c3k-ink);
    --dxbl-pager-page-btn-bg: transparent;
    --dxbl-pager-page-btn-color: var(--c3k-ink-2);
    --dxbl-pager-page-btn-hover-bg: var(--c3k-surface-sunken);
    --dxbl-pager-page-btn-hover-color: var(--c3k-ink);
    --dxbl-pager-active-page-btn-bg: var(--c3k-brand);
    --dxbl-pager-active-page-btn-color: var(--c3k-on-brand);
    --dxbl-pager-page-edit-border-color: var(--c3k-border-strong);
}

body.abp-application-layout .dxbl-loading-panel {
    --dxbl-loading-panel-overlay-bg: var(--c3k-surface);
    --dxbl-loading-panel-overlay-opacity: 0.62;
    --dxbl-loading-panel-message-color: var(--c3k-muted);
    --dxbl-loading-panel-indicator-area-background-color: transparent;
}

/*
    L'accento residuo del tema DevExpress.

    Il tema `purple.bs5` porta 169 occorrenze di `#7989ff` — il viola-blu del
    tema — scritte a mano invece che derivate da Bootstrap. Quasi tutte stanno
    dentro una variabile del componente, e si spostano una per una qui sotto.

    Una sola non e' una variabile ed e' la piu' visibile: il colore delle
    pastiglie `.nav-pills` non attive, dichiarato con specificita' (0,6,0). Le
    viste rapide restavano viola su tutto il resto arancio. Il selettore
    e' ricopiato tale e quale con il prefisso davanti: brutto, ma e' l'unico
    modo di batterlo senza `!important`, e un `!important` qui vincerebbe anche
    contro chi in futuro volesse cambiare colore a una pastiglia sola.
*/
body.abp-application-layout .nav-pills .nav-item:not(.show) .nav-link:not(.disabled):not(.active) {
    color: var(--c3k-ink-2);
}

body.abp-application-layout .dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--c3k-control);
    --dxbl-checkbox-switch-checked-bg: var(--c3k-control);
    --dxbl-checkbox-radio-checked-border-color: var(--c3k-control);
    --dxbl-checkbox-radio-check-bg: var(--c3k-control);
}

body.abp-application-layout .dxbl-calendar {
    --dxbl-calendar-today-border-color: var(--c3k-brand);
    --dxbl-calendar-item-focus-outline-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-list-box,
body.abp-application-layout .dxbl-list-box-render-container {
    --dxbl-list-box-focus-frame-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-fl {
    --dxbl-fl-tab-group-tab-selected-color: var(--c3k-brand-fg);
}

body.abp-application-layout .dxbl-menu,
body.abp-application-layout .dxbl-context-menu,
body.abp-application-layout .dxbl-context-menu-submenu {
    --dxbl-menu-item-focus-outline-color: var(--c3k-control);
    --dxbl-context-menu-item-focus-outline-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-edit-dropdown {
    --dxbl-edit-dropdown-btn-focus-outline-color: var(--c3k-control);
}

body.abp-application-layout .dxbl-accordion,
body.abp-application-layout .accordion {
    --dxbl-accordion-focus-outline-color: var(--c3k-control);
    --bs-accordion-btn-focus-border-color: var(--c3k-brand);
    --bs-accordion-active-color: var(--c3k-brand-fg);
    --bs-accordion-border-color: var(--c3k-border);
}

body.abp-application-layout .dxbl-html-editor {
    --dxbl-html-editor-primary-color: var(--c3k-brand);
}

/*
    IL TEMA DEVEXPRESS E' SOLO CHIARO.

    `purple.bs5` scrive `#212529` e `#fff` fissi in un'ottantina di variabili
    dei componenti, dichiarate sulla classe del componente stesso (0,1,0). Nel
    tema chiaro non si vede — sono quasi i nostri colori — ma nel tema scuro
    ogni linguetta, ogni etichetta di modulo e ogni tendina restava testo
    nero su fondo blu notte: 1,1:1, misurato su /eventi/{id}.

    Qui sotto i componenti che l'applicazione usa davvero, uno per uno, con i
    token: valgono per entrambi i temi, perche' i token cambiano da soli.
*/
body.abp-application-layout .dxbl-tabs {
    --dxbl-tabs-color: var(--c3k-ink-2);
    --dxbl-tabs-content-color: var(--c3k-ink);
    --dxbl-tabs-tab-hover-color: var(--c3k-ink);
}

body.abp-application-layout .dxbl-fl {
    --dxbl-fl-caption-color: var(--c3k-ink-2);
    --dxbl-fl-caption-font-weight: 600;
    --dxbl-fl-group-bg: var(--c3k-surface);
    --dxbl-fl-group-color: var(--c3k-ink);
    --dxbl-fl-tab-group-bg: var(--c3k-surface);
    --dxbl-fl-tab-group-color: var(--c3k-ink);
    --dxbl-fl-tab-group-content-color: var(--c3k-ink);
    --dxbl-fl-tab-group-bottom-border-color: var(--c3k-border);
}

/* Le etichette dei campi vanno a capo. DevExpress le tiene su una riga sopra
   i 992 px: con il testo ingrandito (A+) "Biglietti per l'estrazione del
   concorso" usciva dalla colonna e faceva scorrere la pagina di lato. */
body.abp-application-layout .dxbl-fl .dxbl-fl-item > .dxbl-fl-cpt {
    white-space: normal;
    max-width: 100%;
}

body.abp-application-layout .dxbl-group {
    --dxbl-group-bg: var(--c3k-surface);
    --dxbl-group-color: var(--c3k-ink);
    --dxbl-group-border-color: var(--c3k-border);
    --dxbl-group-border-radius: var(--c3k-radius-lg);
}

/* Le tendine: aprono in un portale in fondo al <body>, ma con la loro classe. */
body.abp-application-layout :is(.dxbl-dropdown, .dxbl-itemlist-dropdown, .dxbl-menu-dropdown) {
    --dxbl-dropdown-bg: var(--c3k-surface);
    --dxbl-dropdown-color: var(--c3k-ink);
    --dxbl-dropdown-border-color: var(--c3k-border);
    --dxbl-dropdown-border-radius: var(--c3k-radius-lg);
}

body.abp-application-layout .dxbl-edit-dropdown {
    --dxbl-edit-dropdown-bg: var(--c3k-surface);
    --dxbl-edit-dropdown-color: var(--c3k-ink);
    --dxbl-edit-dropdown-border-color: var(--c3k-border);
    --dxbl-edit-dropdown-footer-btn-color: var(--c3k-ink-2);
}

body.abp-application-layout :is(.dxbl-list-box, .dxbl-list-box-render-container, .dxbl-listbox) {
    --dxbl-list-box-bg: var(--c3k-surface);
    --dxbl-list-box-color: var(--c3k-ink);
    --dxbl-list-box-border-color: var(--c3k-border);
    --dxbl-list-box-readonly-color: var(--c3k-muted);
    --dxbl-list-box-disabled-color: var(--c3k-muted);
    --dxbl-list-box-highlighted-text-color: var(--c3k-ink);
    --dxbl-list-box-item-hover-bg: var(--c3k-brand-softer);
    --dxbl-list-box-item-selected-bg: var(--c3k-brand-soft);
    --dxbl-list-box-item-selected-color: var(--c3k-ink);
    --dxbl-listbox-bg: var(--c3k-surface);
    --dxbl-listbox-color: var(--c3k-ink);
    --dxbl-listbox-border-color: var(--c3k-border);
    --dxbl-listbox-readonly-color: var(--c3k-muted);
    --dxbl-listbox-disabled-color: var(--c3k-muted);
}

body.abp-application-layout .dxbl-calendar {
    --dxbl-calendar-color: var(--c3k-ink);
    --dxbl-calendar-readonly-color: var(--c3k-muted);
    --dxbl-calendar-disabled-color: var(--c3k-muted);
    --dxbl-calendar-border-color: var(--c3k-border);
}

body.abp-application-layout :is(.dxbl-context-menu, .dxbl-context-menu-submenu) {
    --dxbl-context-menu-bg: var(--c3k-surface);
    --dxbl-context-menu-color: var(--c3k-ink);
    --dxbl-context-menu-border-color: var(--c3k-border);
    --dxbl-context-menu-disabled-color: var(--c3k-muted);
}

body.abp-application-layout .dxbl-menu {
    --dxbl-menu-bg: var(--c3k-surface);
    --dxbl-menu-color: var(--c3k-ink);
    --dxbl-menu-item-disabled-color: var(--c3k-muted);
}

body.abp-application-layout .dxbl-flyout {
    --dxbl-flyout-bg: var(--c3k-surface);
    --dxbl-flyout-color: var(--c3k-ink);
    --dxbl-flyout-border-color: var(--c3k-border);
}

body.abp-application-layout .dxbl-window {
    --dxbl-window-bg: var(--c3k-surface);
}

body.abp-application-layout .dxbl-drawer {
    --dxbl-drawer-panel-bg: var(--c3k-surface);
    --dxbl-drawer-panel-color: var(--c3k-ink);
    --dxbl-drawer-separator-border-color: var(--c3k-border);
}

body.abp-application-layout .dxbl-filter-builder {
    --dxbl-filter-builder-bg: var(--c3k-surface);
    --dxbl-filter-builder-color: var(--c3k-ink);
}

body.abp-application-layout .dxbl-accordion {
    --dxbl-accordion-filter-content-color: var(--c3k-ink);
    --dxbl-accordion-group-border-color: var(--c3k-border);
}

body.abp-application-layout .dxbl-grid {
    --dxbl-grid-draggable-header-bg: var(--c3k-surface);
    --dxbl-grid-draggable-header-color: var(--c3k-ink);
    --dxbl-grid-row-drag-hint-bg: var(--c3k-surface);
}

body.abp-application-layout .dxbl-pager {
    --dxbl-pager-page-edit-color: var(--c3k-ink);
}

/* I grafici. Il colore delle serie non e' una variabile (lo da' la pagina con
   `Color`); le etichette degli assi si', ed erano #212529 anche sul fondo
   scuro, dove sparivano. */
body.abp-application-layout .dxbl-chart-root {
    --dxbl-chart-axis-label-font-color: var(--c3k-muted);
    --dxbl-chart-axis-title-font-color: var(--c3k-muted);
    --dxbl-chart-axis-line-color: var(--c3k-border-strong);
    --dxbl-chart-container-background-color: transparent;
    --dxbl-chart-focus-outline-color: var(--c3k-control);
}

/* Le caselle vuote: bianche anche sul fondo scuro, come fori nella pagina. */
body.abp-application-layout .dxbl-checkbox {
    --dxbl-checkbox-check-element-unchecked-bg: var(--c3k-surface);
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--c3k-surface-2);
    --dxbl-checkbox-check-element-readonly-bg: var(--c3k-surface-sunken);
    --dxbl-checkbox-switch-element-bg: var(--c3k-surface);
    --dxbl-checkbox-switch-element-unchecked-bg: var(--c3k-surface);
    --dxbl-checkbox-radio-bg: var(--c3k-surface);
    --dxbl-checkbox-radio-unchecked-check-bg: var(--c3k-surface);
}

/* Il pie' della griglia di In4UI (`.in4-grid-pager`) legge due variabili
   DevExpress con un fallback fisso: dandogliele, si allinea da solo. */
body.abp-application-layout {
    --dxbl-grid-border-color: var(--c3k-border);
    --dx-grid-header-bg: var(--c3k-surface);
}

/* ========================================================================== */
/* 13. Dettagli residui                                                       */
/* ========================================================================== */

/* Il pannello d'errore di Blazor era giallo canarino a tutta larghezza. */
body.abp-application-layout #blazor-error-ui {
    background: var(--c3k-danger-soft);
    color: var(--c3k-danger-ink);
    border-top: 3px solid var(--c3k-danger);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12);
    padding: 0.85rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

body.abp-application-layout #blazor-error-ui a {
    color: var(--c3k-danger-ink);
    text-decoration: underline;
}

body.abp-application-layout .loader {
    background-color: var(--c3k-app-bg);
}

/* Le barre di avanzamento (i posti venduti degli eventi). Il tema DevExpress
   scrive il suo viola direttamente su `.progress`, dove il ponte della
   sezione 1 non arriva. */
body.abp-application-layout .progress {
    --bs-progress-bar-bg: var(--c3k-brand);
    --bs-progress-bg: var(--c3k-surface-sunken);
    --bs-progress-border-radius: var(--c3k-radius-pill);
}

/* Blazorise: la barra di avanzamento in cima al contenuto e le notifiche. */
body.abp-application-layout .b-page-progress-indicator {
    background: var(--c3k-brand);
}

body.abp-application-layout .snackbar-body {
    border-radius: var(--c3k-radius-lg);
    box-shadow: var(--c3k-shadow-lg);
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   L'editor della pagina di prenotazione (/eventi/{id}/pagina, EventPageEditor).

   A tutto schermo: la cornice di LeptonX (barra laterale, barre sopra e sotto,
   striscia degli strumenti) sparisce finche' l'editor e' aperto. La classe
   c3k-editor la mette e la toglie wwwroot/js/page-editor.js.

   I pannelli sono di GrapesJS, che ha un suo tema scuro: qui prende i token,
   cosi' segue chiaro e scuro come il resto. GrapesJS colora tutto con quattro
   classi (gjs-one-bg, gjs-two-color, gjs-three-bg, gjs-four-color): bastano
   quelle piu' i campi.
   --------------------------------------------------------------------------- */
body.abp-application-layout.c3k-editor :is(.lpx-sidebar-container, .lpx-toolbar-container, .lpx-topbar-container,
    .lpx-footbar-container, .lpx-mobile-navbar, .lpx-breadcrumb-container) {
    display: none;
}

body.abp-application-layout.c3k-editor :is(.lpx-content-container, .lpx-content-wrapper, .lpx-content) {
    margin: 0;
    padding: 0;
    max-width: none;
}

body.abp-application-layout.c3k-editor .lpx-content > * {
    max-width: none;
}

body.abp-application-layout .c3k-pe {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--c3k-app-bg);
}

body.abp-application-layout .c3k-pe-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    background-color: var(--c3k-surface);
    border-bottom: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-back {
    color: var(--c3k-brand-fg);
    font-weight: 600;
    text-decoration: none;
}

body.abp-application-layout .c3k-pe-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

body.abp-application-layout .c3k-pe-title strong {
    font-family: var(--c3k-display);
    font-size: 1.25rem;
}

body.abp-application-layout .c3k-pe-title span,
body.abp-application-layout .c3k-pe-saved,
body.abp-application-layout .c3k-pe-help {
    color: var(--c3k-muted);
    font-size: 0.8125rem;
}

body.abp-application-layout .c3k-pe-group {
    display: inline-flex;
    gap: 2px;
}

body.abp-application-layout .c3k-pe-spacer {
    flex: 1 1 auto;
}

body.abp-application-layout .c3k-pe-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    min-height: 0;
}

body.abp-application-layout :is(.c3k-pe-left, .c3k-pe-right) {
    overflow-y: auto;
    background-color: var(--c3k-surface);
    padding: 10px;
}

body.abp-application-layout .c3k-pe-left {
    border-right: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-right {
    border-left: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-canvas,
body.abp-application-layout #pe-canvas {
    min-width: 0;
    height: 100%;
}

body.abp-application-layout .c3k-pe-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 8px 4px;
    color: var(--c3k-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

body.abp-application-layout .c3k-pe-tab.active {
    color: var(--c3k-ink);
    border-bottom-color: var(--c3k-brand);
}

body.abp-application-layout .c3k-pe-choice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

body.abp-application-layout .c3k-pe-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

body.abp-application-layout .c3k-pe-media-item {
    margin: 0;
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius);
    overflow: hidden;
    background-color: var(--c3k-surface);
}

body.abp-application-layout .c3k-pe-media-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--c3k-surface-sunken);
}

body.abp-application-layout .c3k-pe-media-item figcaption {
    padding: 8px 10px 10px;
}

body.abp-application-layout .c3k-pe-issue {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c3k-border);
}

body.abp-application-layout .c3k-pe-issue.error i { color: var(--c3k-danger-fg); }
body.abp-application-layout .c3k-pe-issue.warning i { color: var(--c3k-warning-fg); }

/* I pannelli di GrapesJS con i token del tema. */
body.abp-application-layout .c3k-pe .gjs-one-bg { background-color: var(--c3k-surface); }
body.abp-application-layout .c3k-pe .gjs-two-color { color: var(--c3k-ink-2); }
body.abp-application-layout .c3k-pe .gjs-three-bg { background-color: var(--c3k-brand); color: var(--c3k-on-brand); }
body.abp-application-layout .c3k-pe .gjs-four-color,
body.abp-application-layout .c3k-pe .gjs-four-color-h:hover { color: var(--c3k-brand-fg); }

body.abp-application-layout .c3k-pe :is(.gjs-block-categories, .gjs-blocks-c, .gjs-sm-sectors, .gjs-trt-traits, .gjs-layers, .gjs-clm-tags) {
    background-color: transparent;
    color: var(--c3k-ink-2);
}

body.abp-application-layout .c3k-pe .gjs-block {
    width: calc(50% - 8px);
    min-height: 76px;
    margin: 4px;
    padding: 8px 4px;
    border: 1px solid var(--c3k-border);
    border-radius: var(--c3k-radius);
    background-color: var(--c3k-surface-2);
    color: var(--c3k-ink-2);
    box-shadow: none;
    font-family: var(--c3k-sans);
    font-size: 0.75rem;
    font-weight: 600;
}

body.abp-application-layout .c3k-pe .gjs-block:hover {
    border-color: var(--c3k-brand);
    color: var(--c3k-ink);
}

body.abp-application-layout .c3k-pe .gjs-block.gjs-block--disable {
    opacity: 0.45;
}

body.abp-application-layout .c3k-pe :is(.gjs-block-category .gjs-title, .gjs-sm-sector-title, .gjs-layer-title) {
    background-color: var(--c3k-surface-sunken);
    color: var(--c3k-ink);
    border-bottom: 1px solid var(--c3k-border);
    font-family: var(--c3k-sans);
    font-weight: 600;
    letter-spacing: 0;
}

body.abp-application-layout .c3k-pe :is(.gjs-field, .gjs-clm-select, .gjs-input-holder input, .gjs-field select) {
    background-color: var(--c3k-surface);
    color: var(--c3k-ink);
    border: 1px solid var(--c3k-border-strong);
    border-radius: var(--c3k-radius-sm);
}

body.abp-application-layout .c3k-pe :is(.gjs-sm-label, .gjs-label, .gjs-trt-trait__label, .gjs-clm-header) {
    color: var(--c3k-ink-2);
    font-size: 0.75rem;
}

body.abp-application-layout .c3k-pe .gjs-cv-canvas {
    width: 100%;
    height: 100%;
    top: 0;
    background-color: var(--c3k-surface-sunken);
}

@media (max-width: 991.98px) {
    body.abp-application-layout .c3k-pe-body {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    body.abp-application-layout .c3k-pe-right {
        grid-column: 1 / -1;
        max-height: 40vh;
        border-left: 0;
        border-top: 1px solid var(--c3k-border);
    }
}

/* Chi ha chiesto meno animazione ne riceve meno. */
@media (prefers-reduced-motion: reduce) {
    body.abp-application-layout *,
    body.abp-application-layout *::before,
    body.abp-application-layout *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    body.abp-application-layout .card[style*="cursor"]:hover {
        transform: none;
    }
}

/* La home (Pages/Index.razor): solo il pulsante della gestione eventi, al centro
   dello spazio libero sotto la barra superiore. */
body.abp-application-layout .c3k-home {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

/* ========================================================================== */
/* 14. Le dichiarazioni !important di LeptonX                                 */
/* ========================================================================== */

/*
    I fogli `bootstrap-light.css`, `bootstrap-dim.css` e `bootstrap-dark.css`
    di LeptonX contengono 242 dichiarazioni marcate `!important`. Un
    `!important` non si batte con la specificita': la specificita' decide solo
    fra dichiarazioni dello stesso peso, e quelle marcate stanno in un livello
    piu' alto. L'unico modo e' un altro `!important`, ed e' per questo — e solo
    per questo — che ce ne sono in questa sezione.

    Qui stanno soltanto quelle che toccano classi che l'applicazione usa
    davvero. Le altre 200 restano dove sono: sovrascrivere per completezza
    significherebbe scrivere un tema nuovo, non ritoccarne uno.
*/

/* Le utility di colore del testo. `text-primary` marca il "Apri >" in coda a
   le azioni in coda alle righe; `text-danger` gli errori. Erano rimaste
   dell'indaco e del cremisi di LeptonX in mezzo all'arancio del prodotto. */
body.abp-application-layout .text-primary   { color: var(--c3k-brand-fg) !important; }
body.abp-application-layout .text-secondary { color: var(--c3k-muted) !important; }
body.abp-application-layout .text-success   { color: var(--c3k-success-fg) !important; }
body.abp-application-layout .text-info      { color: var(--c3k-info-fg) !important; }
body.abp-application-layout .text-warning   { color: var(--c3k-warning-fg) !important; }
body.abp-application-layout .text-danger    { color: var(--c3k-danger-fg) !important; }
body.abp-application-layout .text-brand     { color: var(--c3k-brand-fg) !important; }
body.abp-application-layout .text-dark      { color: var(--c3k-ink) !important; }
body.abp-application-layout .text-light     { color: var(--c3k-muted) !important; }

/* Nel tema dim `.card` ha `color: #686b6e !important`: il testo di OGNI
   scheda — e quindi di ogni tabella dentro una scheda — usciva grigio medio
   su fondo scuro, sotto ogni soglia di leggibilita'. */
body.abp-application-layout .card,
body.abp-application-layout .card > .table-responsive,
body.abp-application-layout .card .table {
    color: var(--c3k-ink) !important;
}

/*
    ...ma non quando la scheda dichiara il proprio colore di testo.

    La barra dei cookie e' un `.card.bg-primary.text-white`. La regola qui
    sopra, con il suo `!important`, batteva `text-white`. Sull'arancio del
    marchio pero' il bianco non regge (2,2:1): li' il testo e' quello scuro
    dei bottoni primari. Le altre schede `text-white`, su fondi scuri,
    restano bianche.
*/
body.abp-application-layout .card.text-white,
body.abp-application-layout .card.text-white .table,
body.abp-application-layout .card.text-white a {
    color: #fff !important;
}

body.abp-application-layout .card.bg-primary.text-white,
body.abp-application-layout .card.bg-primary.text-white .table,
body.abp-application-layout .card.bg-primary.text-white a {
    color: var(--c3k-on-brand) !important;
}

/* Il bottone della stessa barra: `btn-info` e' l'azzurro #4191eb di LeptonX,
   bianco su azzurro fa 3,24:1. */
body.abp-application-layout .btn-info {
    --bs-btn-bg: var(--c3k-info);
    --bs-btn-border-color: var(--c3k-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--c3k-info-hover);
    --bs-btn-hover-border-color: var(--c3k-info-hover);
    --bs-btn-hover-color: #fff;
}

/* Le utility `soft` di LeptonX: fondo velato + testo dell'accento, marcate
   `!important`. Le usa la pagina iniziale del template per le spunte, in rosa
   su rosa (3,27:1). Qui solo marchio e primario — le altre non le usa
   nessuno, e riscriverle tutte sarebbe rifare il tema invece che ritoccarlo. */
body.abp-application-layout .bg-brand.soft,
body.abp-application-layout .bg-primary.soft {
    background-color: var(--c3k-brand-soft) !important;
    color: var(--c3k-brand-ink) !important;
}

body.abp-application-layout .text-brand.soft,
body.abp-application-layout .text-primary.soft {
    color: var(--c3k-brand-ink) !important;
}

/* Le caselle di spunta e gli interruttori erano rosa: LeptonX ci scrive il
   proprio `--lpx-brand` originale, marcato. */
body.abp-application-layout .form-check-input:checked,
body.abp-application-layout .form-switch .form-check-input:checked {
    background-color: var(--c3k-control) !important;
    border-color: var(--c3k-control) !important;
}

body.abp-application-layout select.form-select option:checked,
body.abp-application-layout select.form-select option:focus {
    background-color: var(--c3k-brand) !important;
    background: var(--c3k-brand) !important;
    color: var(--c3k-on-brand) !important;
}

/* Le utility `text-bg-*` di Bootstrap 5.3 (le pastiglie dello stato del
   concorso). LeptonX le ridipinge con le sue tinte sature e il testo bianco:
   bianco sul verde #34bc3f fa 2,5:1. Diventano le stesse pastiglie tenui delle
   `badge bg-*` (sezione 7). */
body.abp-application-layout .text-bg-primary {
    background-color: var(--c3k-brand-soft) !important;
    color: var(--c3k-brand-ink) !important;
}

body.abp-application-layout .text-bg-secondary,
body.abp-application-layout .text-bg-light {
    background-color: var(--c3k-surface-sunken) !important;
    color: var(--c3k-ink-2) !important;
}

body.abp-application-layout .text-bg-success {
    background-color: var(--c3k-success-soft) !important;
    color: var(--c3k-success-ink) !important;
}

body.abp-application-layout .text-bg-danger {
    background-color: var(--c3k-danger-soft) !important;
    color: var(--c3k-danger-ink) !important;
}

body.abp-application-layout .text-bg-warning {
    background-color: var(--c3k-warning-soft) !important;
    color: var(--c3k-warning-ink) !important;
}

body.abp-application-layout .text-bg-info {
    background-color: var(--c3k-info-soft) !important;
    color: var(--c3k-info-ink) !important;
}

body.abp-application-layout .text-bg-dark {
    background-color: rgba(var(--lpx-content-text-rgb), 0.10) !important;
    color: var(--c3k-ink) !important;
}

/*
    I pulsanti grigi dentro le barre strumenti delle griglie ("Nuovo",
    "Modifica", "Azioni", "Layout" delle pagine generate).

    Il tema DevExpress fissa `--dxbl-btn-color: #212529` con selettori fino a
    dieci classi (`.dxbl-btn-toolbar > .dxbl-adaptive-container-content >
    .dxbl-btn-group > ... > .dxbl-btn.dxbl-btn-text-secondary`): nel tema scuro
    era testo nero su blu notte, 1,1:1. Inseguirli per specificita' vorrebbe
    dire ricopiarne una ventina e ricominciare alla prossima minor. Un
    `!important` sulla variabile li batte tutti insieme; restano i token, quindi
    vale per entrambi i temi.
*/
body.abp-application-layout .dxbl-btn:is(.dxbl-btn-text-secondary, .dxbl-btn-text-dark, .dxbl-btn-outline-secondary) {
    --dxbl-btn-color: var(--c3k-ink-2) !important;
    --dxbl-btn-hover-color: var(--c3k-ink) !important;
    --dxbl-btn-active-color: var(--c3k-ink) !important;
    --dxbl-btn-disabled-color: var(--c3k-faint) !important;
}

body.abp-application-layout .dxbl-btn:is(.dxbl-btn-text-secondary, .dxbl-btn-text-dark) {
    --dxbl-btn-hover-bg: var(--c3k-surface-sunken) !important;
    --dxbl-btn-hover-border-color: transparent !important;
    --dxbl-btn-active-bg: var(--c3k-border) !important;
    --dxbl-btn-active-border-color: transparent !important;
}

body.abp-application-layout .dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-color: var(--c3k-ink) !important;
    --dxbl-btn-bg: var(--c3k-surface-sunken) !important;
    --dxbl-btn-border-color: var(--c3k-border-strong) !important;
    --dxbl-btn-hover-color: var(--c3k-ink) !important;
    --dxbl-btn-hover-bg: var(--c3k-border) !important;
    --dxbl-btn-active-color: var(--c3k-ink) !important;
    --dxbl-btn-active-bg: var(--c3k-border) !important;
}

/* `bg-light` e' il riquadro di secondo piano (l'anteprima del prezzo nelle
   impostazioni dell'evento). LeptonX lo lascia #f7f8f9 anche nel tema scuro,
   dove il testo chiaro ci finiva sopra a 1,1:1. */
body.abp-application-layout .bg-light {
    background-color: var(--c3k-surface-2) !important;
}

/* La barretta sotto la linguetta attiva delle `DxTabs` (le schede dell evento).
   Il tema la dipinge #7989ff con un selettore di otto classi sul
   pseudo-elemento, senza passare da una variabile. */
body.abp-application-layout .dxbl-tabs .dxbl-tabs-item.dxbl-active::after {
    background-color: var(--c3k-brand) !important;
}

/* Le etichette degli assi dei grafici. DevExpress legge la variabile della
   sezione 12 UNA volta, quando disegna, e la scrive inline nell'SVG
   (`style="fill: ..."`). LeptonX aggiunge la classe del tema scuro dopo il
   primo disegno: le etichette restavano col grigio del tema chiaro, 2,3:1 sul
   fondo scuro. Solo un `!important` batte lo stile inline. */
body.abp-application-layout .dxbl-chart-root .dxc-elements-axes-group text {
    fill: var(--c3k-muted) !important;
    font-family: var(--c3k-sans) !important;
}

/* Il titolo di pagina: LeptonX lo fissa a `1.25rem !important` (layout-bundle),
   e a 20 px il condensato del mockup sembra una didascalia. */
body.abp-application-layout .lpx-main-title {
    font-size: 1.75rem !important;
}