/* =====================================================================
   Vinora CRM — foglio di stile del pannello (Filament 4, tema scuro)

   Le regole di design sono in DESIGN.md (radice del progetto): questo file
   ne è l'implementazione. Caricato dopo il CSS di Filament (AdminPanelProvider
   → renderHook HEAD_END, cache-busting con filemtime). Si modifica a mano,
   senza build.

   REGOLE PER CHI MODIFICA QUESTO FILE
   1. Mai colori, raggi, ombre o durate scritti a mano fuori da :root:
      si usa sempre un token (var(--crm-…)). Per una trasparenza:
      color-mix(in srgb, var(--crm-token) 30%, transparent).
   2. Il corallo (--crm-coral) è solo per: voce di menu attiva, azione
      principale, selezione corrente, focus. Mai per decorare.
   3. Gli stati (successo, avviso, pericolo, info) usano solo i loro token,
      sia per il testo sia per i fondi tenui.
   4. Nessun bordo colorato laterale più spesso di 1px (righe, card, avvisi):
      lo stato si mostra con fondo tenue e anello sottile.
   5. Un componente ha sempre lo stesso aspetto in tutte le pagine: se serve
      una variante, si aggiunge qui con un nome e si documenta in DESIGN.md.
   ===================================================================== */

:root {
    /* ---- Colori: superfici (indaco profondo, dal più scuro al più chiaro) ---- */
    --crm-rail: #13121e;            /* barra del menu */
    --crm-rail-item: #1a1928;       /* riquadri delle voci di menu */
    --crm-rail-item-hover: #232236;
    --crm-bg: #1b1a29;              /* sfondo della pagina */
    --crm-surface: #232236;         /* card, contenitori delle tabelle, modali */
    --crm-raised: #26253a;          /* menu a tendina, popup */
    --crm-surface-2: #2c2b42;       /* righe degli elenchi, campi, card interne */
    --crm-surface-3: #36354f;       /* passaggio del mouse, riga evidenziata */

    /* ---- Colori: testo ---- */
    --crm-text: #f5f4fb;            /* testo principale */
    --crm-text-2: #dcdaea;          /* testo nelle righe e nei menu */
    --crm-muted: #a4a2bf;           /* testo secondario, descrizioni (≥ 4.5:1 sulle superfici) */
    --crm-label: #a4a2bf;           /* etichette dei campi */
    --crm-faint: #7a7898;           /* solo decorazioni e stati disabilitati, mai testo da leggere */
    --crm-on-accent: #ffffff;       /* testo su corallo e sui colori pieni */

    /* ---- Colori: linee (bianco lavanda, così i bordi prendono il tono delle superfici) ---- */
    --crm-wash: color-mix(in srgb, #d9d6ff 3%, transparent);
    --crm-line: color-mix(in srgb, #d9d6ff 8%, transparent);
    --crm-line-strong: color-mix(in srgb, #d9d6ff 15%, transparent);
    --crm-line-bold: color-mix(in srgb, #d9d6ff 26%, transparent);
    --crm-line-hover: color-mix(in srgb, #d9d6ff 36%, transparent);
    --crm-scrollbar: #3d3c57;

    /* ---- Colori: accento e stati ---- */
    --crm-coral: #ff5a5f;           /* accento del marchio Vinora */
    --crm-sky: #34aaf0;             /* dati e informazioni (grafici, badge info, avanzamento) */
    --crm-violet: #8f73f7;          /* secondo accento per i dati */
    --crm-success: #45d29f;
    --crm-warning: #f4c46c;
    --crm-danger: #f4677d;
    --crm-notify: #ff3b30;          /* solo il numerino sulle voci di menu (badge iOS) */
    --crm-shadow-ink: #07060f;

    /* ---- Tipografia ---- */
    --crm-font: "Lato", system-ui, sans-serif;           /* testo, etichette, dati */
    --crm-display: "Outfit", "Lato", sans-serif;          /* titoli di pagina e numeri grandi */
    --crm-track-label: .14em;                             /* maiuscolo spaziato delle etichette */

    /* ---- Forme ---- */
    --radius-sm: .6rem;      /* chip, badge quadrati */
    --radius-md: .8rem;      /* campi della barra degli elenchi, paginazione */
    --radius-lg: 1rem;       /* righe degli elenchi, voci di menu */
    --radius-xl: 1.25rem;    /* card e contenitori */
    --radius-2xl: 1.5rem;    /* modali */
    --radius-pill: 999px;    /* pulsanti, badge, ricerca */

    /* ---- Spazi ---- */
    --crm-row-gap: .5rem;    /* spazio tra le righe-card */
    --crm-row-inset: .75rem; /* margine delle righe-card dal bordo del contenitore */

    /* ---- Profondità ---- */
    --crm-shadow: 0 1px 0 var(--crm-wash) inset, 0 18px 40px -24px color-mix(in srgb, var(--crm-shadow-ink) 70%, transparent);
    --crm-shadow-pop: 0 24px 48px -16px color-mix(in srgb, var(--crm-shadow-ink) 80%, transparent);

    /* ---- Movimento ---- */
    --crm-ease: cubic-bezier(.22, 1, .36, 1);
    --crm-fast: .15s;
}

/* ---------- Tipografia di base ---------- */
.fi-body {
    color: var(--crm-text);
    background:
        radial-gradient(800px 480px at -10% 110%, color-mix(in srgb, var(--crm-coral) 7%, transparent) 0%, color-mix(in srgb, var(--crm-coral) 0%, transparent) 55%),
        var(--crm-bg) !important;
    background-attachment: fixed !important;
}

/* Etichette in stile Vinora: maiuscolo spaziato.
   Corallo solo per i titoli delle sezioni; le etichette dei campi sono neutre,
   così l'accento resta sulle cose che contano (voce attiva, azione principale, avvisi). */
.crm-label,
.fi-wi-stats-overview-stat-label,
.fi-section-header-heading,
.fi-in-entry-label,
.fi-fo-field-label-content {
    text-transform: uppercase;
    letter-spacing: .14em !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: var(--crm-label) !important;
}
.crm-label,
.fi-section-header-heading { color: var(--crm-coral) !important; }
.fi-in-entry-label { font-size: .66rem !important; }

/* Blocchi affiancati (es. Dati fiscali e Contatti nella scheda cliente): stessa altezza, niente buchi */
.fi-grid-col > .fi-sc-component:has(> .fi-sc-section),
.fi-grid-col > .fi-sc-component > .fi-sc-section,
.fi-grid-col > .fi-sc-component > .fi-sc-section > .fi-section { height: 100%; }

/* Superfici del browser */
::selection { background: color-mix(in srgb, var(--crm-coral) 35%, transparent); color: var(--crm-on-accent); }
html { scrollbar-color: var(--crm-scrollbar) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--crm-scrollbar); border-radius: 999px; border: 2px solid var(--crm-bg); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--crm-coral); outline-offset: 2px; }
/* Campi e select: il focus lo mostra già il bordo arrotondato del contenitore (.fi-input-wrp).
   Safari considera "focus-visible" anche il clic sulle select e disegnava un secondo bordo quadrato */
.fi-input-wrp :focus-visible, .fi-input-wrp :focus { outline: none !important; }
/* Pulsanti: anello di focus solo da tastiera, con gli stessi angoli del pulsante */
.fi-btn:focus:not(:focus-visible), .fi-icon-btn:focus:not(:focus-visible) { outline: none; }
.fi-ta-text-item-label, .fi-wi-stats-overview-stat-value, .crm-stat__value, .fi-in-text-item { font-variant-numeric: tabular-nums; }

/* ---------- Barra in alto (ricerca, utente) ---------- */
.fi-topbar-ctn { background: transparent !important; }
.fi-topbar {
    background: color-mix(in srgb, var(--crm-bg) 72%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none !important;
    border-bottom: 1px solid transparent;
}
.fi-topbar .fi-global-search-field .fi-input-wrp {
    border-radius: 999px !important;
    background: var(--crm-surface) !important;
}
.fi-logo { height: 2.6rem !important; }

/* Senza barra in alto */
.fi-body:not(.fi-body-has-topbar) { --topbar-height: 0px; }

/* ---------- Utente in fondo alla barra del menu ---------- */
.fi-sidebar-footer {
    border: 0 !important;
    margin: 0 !important;
    padding: .75rem 0 1rem;
    display: flex !important;
    justify-content: center;
}
.fi-sidebar-footer .fi-user-menu-trigger {
    padding: 0 !important;
    border-radius: 1.1rem !important;
    background: transparent !important;
}
.fi-sidebar-footer .fi-user-menu-trigger-text { display: none !important; }
/* Solo l'avatar, centrato: niente freccia (Filament la mostra col menu aperto, cioè su mobile) */
.fi-sidebar-footer .fi-user-menu-trigger > .fi-icon { display: none !important; }
.fi-sidebar-footer .fi-user-menu,
.fi-sidebar-footer .fi-dropdown { display: flex; justify-content: center; width: 100%; }
.fi-sidebar-footer .fi-user-menu-trigger { width: auto !important; justify-content: center; gap: 0 !important; }
.fi-sidebar-footer .fi-avatar {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 1.1rem !important;
    border: 2px solid var(--crm-line-strong);
}

/* Popup dell'utente (si apre dalla barra del menu) */
.fi-sidebar-footer .fi-dropdown-panel,
.fi-user-menu .fi-dropdown-panel {
    min-width: 15rem !important;
    padding: .4rem !important;
    border-radius: 1.25rem !important;
    background: var(--crm-raised) !important;
    border: 1px solid var(--crm-line) !important;
    box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--crm-shadow-ink) 75%, transparent) !important;
}
.fi-dropdown-header {
    border-radius: .9rem !important;
    padding: .75rem .9rem !important;
    border-color: var(--crm-line) !important;
}
.fi-dropdown-header-label { font-weight: 600 !important; color: var(--crm-on-accent) !important; }
.fi-dropdown-list { padding: .25rem 0 !important; }
.fi-dropdown-list-item {
    border-radius: .8rem !important;
    padding: .65rem .9rem !important;
}
.fi-dropdown-list-item:hover { background: var(--crm-line) !important; }
.fi-dropdown-list-item-label { color: var(--crm-text-2) !important; font-size: .9rem !important; }
.fi-dropdown-list-item .fi-icon { color: var(--crm-muted) !important; }
.fi-dropdown-panel .fi-dropdown-list + .fi-dropdown-list,
.fi-dropdown-panel > * + * { border-color: var(--crm-line) !important; }

/* ---------- Menu laterale ----------
   Desktop: barra stretta solo icone, staccata dal bordo (sempre ridotta;
   il nome compare al passaggio del mouse). Mobile: cassetto con le etichette. */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: var(--crm-faint) !important;
}
.fi-sidebar-item-btn {
    border-radius: 1rem !important;
    /* Riquadro "icona app": stesso fondo e bordino del logo e dell'avatar utente */
    background: var(--crm-rail-item) !important;
    border: 1px solid var(--crm-line);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fi-sidebar-item-btn:hover { background: var(--crm-rail-item-hover) !important; border-color: var(--crm-line-strong); }
.fi-sidebar-item-label { font-size: .95rem !important; font-weight: 400 !important; color: var(--crm-text-2) !important; }
.fi-sidebar-item-icon { color: var(--crm-muted) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--crm-coral) !important; border-color: var(--crm-coral); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--crm-on-accent) !important; }
.crm-rail-logo { display: none; }

/* Badge del menu (es. "Da collegare"): il menu mostra solo icone,
   quindi il numero sta sull'angolo del pulsante come una notifica */
.fi-sidebar-item-btn { position: relative; }
.fi-sidebar-item-badge-ctn {
    /* A cavallo dell'angolo in alto a destra del riquadro, come i badge delle icone delle app.
       Il contenitore è alto quanto il badge: niente riga di testo che lo spinga giù. */
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    display: flex !important; /* Filament lo nasconde col menu ridotto, che qui è sempre ridotto */
    line-height: 0;
    pointer-events: none;
}
/* Stile badge iOS: rosso di sistema, cifra bianca centrata, pillola compatta */
.fi-sidebar-item-badge-ctn .fi-badge {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
    background: var(--crm-notify) !important;
    color: var(--crm-on-accent) !important;
    border: 0;
    border-radius: 999px !important;
    /* anello del colore del menu per staccarlo dall'icona, più una lieve ombra */
    box-shadow: 0 0 0 2px var(--crm-rail), 0 2px 6px color-mix(in srgb, var(--crm-shadow-ink) 45%, transparent) !important;
    --tw-ring-color: transparent !important;
}
.fi-sidebar-item-badge-ctn .fi-badge-label-ctn,
.fi-sidebar-item-badge-ctn .fi-badge-label {
    display: block;
    line-height: 18px;
    height: 18px;
    padding: 0;
}
.fi-sidebar-item-badge-ctn .fi-badge::before { display: none; }

@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) {
        margin: .9rem 0 .9rem .9rem;
        height: calc(100dvh - var(--topbar-height) - 1.8rem) !important;
        background: var(--crm-rail) !important;
        border: 1px solid var(--crm-line);
        border-radius: 2rem;
        box-shadow: var(--crm-shadow);
        overflow: visible;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header-ctn,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
    .fi-sidebar-close-collapse-sidebar-btn,
    .fi-sidebar-open-collapse-sidebar-btn,
    .fi-topbar-open-collapse-sidebar-btn,
    .fi-topbar-close-collapse-sidebar-btn,
    .fi-topbar-collapse-sidebar-btn-ctn,
    .fi-topbar .fi-logo { display: none !important; }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding: 1rem 0 !important;
        row-gap: .5rem !important;
        align-items: center;
        scrollbar-gutter: auto;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items { row-gap: .55rem !important; align-items: center; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        width: 3.3rem;
        height: 3.3rem;
        padding: 0 !important;
        justify-content: center;
        border-radius: 1.1rem !important;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon { width: 1.35rem; height: 1.35rem; }

    .fi-sidebar:not(.fi-sidebar-open) .crm-rail-logo {
        display: grid;
        place-items: center;
        width: 3.6rem;
        height: 3.6rem;
        margin: 0 auto 1.25rem;
        border-radius: 1.2rem;
        background: var(--crm-raised);
        border: 1px solid var(--crm-line);
    }
    .crm-rail-logo img { width: 2.3rem; height: 2.3rem; object-fit: contain; }

    .fi-main { padding-inline: 1.75rem !important; }
}

/* Mobile e tablet: la stessa barra verticale, nascosta di lato;
   il pulsante .crm-menu-btn (in alto a sinistra) la fa uscire */
.crm-menu-btn { display: none; }
@media (max-width: 1023px) {
    .fi-sidebar {
        position: fixed !important;
        inset: .75rem auto .75rem .75rem !important;
        width: 5.25rem !important;
        height: auto !important;
        z-index: 40 !important;
        background: var(--crm-rail) !important;
        border: 1px solid var(--crm-line);
        border-radius: 2rem;
        box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--crm-shadow-ink) 70%, transparent);
        translate: calc(-100% - 1.5rem) 0 !important;
        transition: translate .25s ease !important;
        overflow: visible;
    }
    .fi-sidebar.fi-sidebar-open { translate: 0 0 !important; }

    .fi-sidebar-header-ctn,
    .fi-sidebar-group-label,
    .fi-sidebar-group-btn { display: none !important; }

    .fi-sidebar-nav {
        padding: 1rem 0 !important;
        row-gap: .5rem !important;
        align-items: center;
        scrollbar-gutter: auto;
    }
    .fi-sidebar-nav-groups,
    .fi-sidebar-group-items { row-gap: .55rem !important; align-items: center; }
    .fi-sidebar-item-btn {
        width: 3.2rem;
        height: 3.2rem;
        padding: 0 !important;
        justify-content: center;
        border-radius: 1.1rem !important;
    }
    .fi-sidebar-item-icon { width: 1.35rem; height: 1.35rem; }
    /* nome nascosto alla vista ma letto dagli screen reader */
    .fi-sidebar-item-label {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .crm-rail-logo {
        display: grid !important;
        place-items: center;
        width: 3.4rem;
        height: 3.4rem;
        margin: 0 auto 1rem;
        border-radius: 1.1rem;
        background: var(--crm-raised);
        border: 1px solid var(--crm-line);
    }
    .crm-rail-logo img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
    .fi-sidebar-close-overlay { background: color-mix(in srgb, var(--crm-rail) 55%, transparent) !important; backdrop-filter: blur(2px); }

    .crm-menu-btn {
        display: grid;
        place-items: center;
        position: fixed;
        top: .9rem;
        left: .9rem;
        z-index: 35;
        width: 2.9rem;
        height: 2.9rem;
        border-radius: 1rem;
        background: var(--crm-rail);
        border: 1px solid var(--crm-line);
        color: var(--crm-on-accent);
        box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--crm-shadow-ink) 70%, transparent);
    }
    .crm-menu-btn svg { width: 1.3rem; height: 1.3rem; }
    .fi-main { padding-top: 3.75rem !important; }
}

/* ---------- Pagina ---------- */
.fi-main { padding-inline: 1.5rem !important; }
.fi-page-header-main-ctn { padding-top: 1.75rem; gap: 1.75rem !important; }
.fi-header-heading {
    font-family: var(--crm-display) !important;
    font-size: clamp(2.25rem, 3vw, 2.9rem) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
    color: var(--crm-text) !important;
}
.fi-header-subheading { color: var(--crm-muted) !important; font-size: .95rem !important; }
.fi-breadcrumbs { display: none; }

/* ---------- Card ---------- */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: var(--crm-surface) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--crm-shadow) !important;
    --tw-ring-color: var(--crm-line) !important;
}
.fi-section-header { padding-bottom: .25rem; }
.fi-section-header-description { color: var(--crm-muted) !important; }
.fi-section-content-ctn, .fi-section-footer { border-color: var(--crm-line) !important; }
.fi-in-entry-content, .fi-in-text-item { color: var(--crm-text); }

/* ---------- Elenchi (tabelle) ----------
   Ogni riga è una card staccata (come la "Trade History" del riferimento): fondo --crm-surface-2
   dentro il contenitore --crm-surface, angoli --radius-lg, --crm-row-gap tra una riga e l'altra.
   Al passaggio del mouse la riga si schiarisce (--crm-surface-3). Niente divisori. */
.fi-ta-header, .fi-ta-header-toolbar { border-color: var(--crm-line) !important; }
.fi-ta-header-heading { font-family: var(--crm-display); font-weight: 500 !important; font-size: 1.3rem !important; letter-spacing: -.01em; }
.fi-ta-content { border-top: 0 !important; }
.fi-ta-table {
    border-collapse: separate !important;
    border-spacing: 0 var(--crm-row-gap);
    padding: 0 var(--crm-row-inset) calc(var(--crm-row-inset) - var(--crm-row-gap));
    background: transparent !important;
}
.fi-ta-table > thead, .fi-ta-table > tbody, .fi-ta-table > thead > tr { background: transparent !important; }
.fi-ta-table > thead, .fi-ta-table > tbody, .fi-ta-table > tbody > tr, .fi-ta-table > thead > tr { border: 0 !important; }
.fi-ta-table > :not(:last-child), .fi-ta-table > tbody > :not(:last-child) { border-bottom-width: 0 !important; }
.fi-ta-header-cell {
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: var(--crm-track-label);
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: var(--crm-muted) !important;
    padding-block: .9rem .2rem !important;
}
/* Il colore della riga è una variabile: hover e stati cambiano solo quella */
.fi-ta-row { --crm-row-bg: var(--crm-surface-2); }
.fi-ta-row:hover { --crm-row-bg: var(--crm-surface-3); }
.fi-ta-row > td {
    background: var(--crm-row-bg) !important;
    border: 0 !important;
    transition: background-color var(--crm-fast) var(--crm-ease), box-shadow var(--crm-fast) var(--crm-ease);
}
/* Celle con larghezze frazionarie: l'antialiasing lascia una righina tra una cella e l'altra.
   Ogni cella copre 1px della successiva con il suo stesso colore. */
.fi-ta-row > td:not(:last-child) { box-shadow: 1px 0 0 var(--crm-row-bg); }
.fi-ta-row > td:first-child { border-start-start-radius: var(--radius-lg); border-end-start-radius: var(--radius-lg); }
.fi-ta-row > td:last-child { border-start-end-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.fi-ta-text-item-label { font-size: .92rem; color: var(--crm-text-2); }
.fi-ta-cell .fi-ta-text-item .fi-ta-text-description,
.fi-ta-text-description { color: var(--crm-muted) !important; font-size: .8rem !important; }

/* Righe da guardare (stato del record): solo il fondo tinto del colore dello stato, mai una barra
   laterale né un anello (disegnato cella per cella lascia righine). crm-row-alert = pericolo, crm-row-warning = avviso. */
.fi-ta-row.crm-row-alert { --crm-row-state: var(--crm-danger); }
.fi-ta-row.crm-row-warning { --crm-row-state: var(--crm-warning); }
.fi-ta-row:is(.crm-row-alert, .crm-row-warning) { --crm-row-bg: color-mix(in srgb, var(--crm-row-state) 13%, var(--crm-surface-2)); }
.fi-ta-row:is(.crm-row-alert, .crm-row-warning):hover { --crm-row-bg: color-mix(in srgb, var(--crm-row-state) 19%, var(--crm-surface-2)); }

/* ---------- Azioni nelle righe ----------
   Pillole con bordo sottile alte 2rem (come "TRADE" nel riferimento): icona + etichetta breve.
   Il colore dell'azione (->color()) tinge solo bordo e icona, il testo resta chiaro:
   primary = corallo, warning/danger/success = colore dello stato, gray = neutro.
   Il menu "Altre azioni" (ActionGroup) è un pulsante tondo da 2rem con lo stesso bordo.
   Stesso stile per i link azione nelle intestazioni dei blocchi (es. Stripe e Fattura24 nella scheda). */
.fi-ta-actions { gap: .4rem !important; flex-wrap: nowrap; }
.fi-section-header .fi-ac:has(.fi-ac-link-action), .fi-section-header-after-ctn { gap: .4rem !important; }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) .fi-ac-link-action.fi-link,
.fi-ta-row .fi-ta-actions .fi-ac-btn-action.fi-btn {
    --crm-act: var(--crm-line-bold);
    --crm-act-icon: var(--crm-muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2rem;
    padding: 0 .8rem !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--crm-act);
    background: transparent !important;
    box-shadow: none !important;
    color: var(--crm-text-2) !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    flex-wrap: nowrap !important;
    align-content: center;
    margin: 0 !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color var(--crm-fast) var(--crm-ease), border-color var(--crm-fast) var(--crm-ease), color var(--crm-fast) var(--crm-ease);
}
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn) .fi-icon {
    width: 1rem; height: 1rem;
    color: var(--crm-act-icon) !important;
}
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn) :is(.fi-link-label, .fi-btn-label) {
    color: inherit !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    align-self: center !important; /* Filament allinea l'etichetta alla linea di base: con l'altezza fissa finiva in alto */
}
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-color-primary { --crm-act: color-mix(in srgb, var(--crm-coral) 70%, transparent); --crm-act-icon: var(--crm-coral); color: var(--crm-text) !important; }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-color-warning { --crm-act: color-mix(in srgb, var(--crm-warning) 55%, transparent); --crm-act-icon: var(--crm-warning); }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-color-danger { --crm-act: color-mix(in srgb, var(--crm-danger) 55%, transparent); --crm-act-icon: var(--crm-danger); }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-color-success { --crm-act: color-mix(in srgb, var(--crm-success) 55%, transparent); --crm-act-icon: var(--crm-success); }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-color-info { --crm-act: color-mix(in srgb, var(--crm-sky) 55%, transparent); --crm-act-icon: var(--crm-sky); }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn):hover {
    background: color-mix(in srgb, var(--crm-act-icon) 14%, transparent) !important;
    border-color: var(--crm-act-icon);
    color: var(--crm-text) !important;
}
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn):focus-visible { outline-offset: 2px; }
:is(.fi-ta-row .fi-ta-actions, .fi-section-header) :is(.fi-ac-link-action.fi-link, .fi-ac-btn-action.fi-btn).fi-disabled { opacity: .45; pointer-events: none; }
/* Pulsanti a sola icona (ActionGroup "Altre azioni" e azioni ->iconButton()) */
.fi-ta-row .fi-ta-actions .fi-icon-btn {
    margin: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--crm-line-bold);
    background: transparent !important;
    color: var(--crm-muted) !important;
    transition: background-color var(--crm-fast) var(--crm-ease), border-color var(--crm-fast) var(--crm-ease), color var(--crm-fast) var(--crm-ease);
}
.fi-ta-row .fi-ta-actions .fi-icon-btn .fi-icon { width: 1.05rem; height: 1.05rem; color: inherit !important; }
.fi-ta-row .fi-ta-actions .fi-icon-btn:hover,
.fi-ta-row .fi-ta-actions .fi-icon-btn[aria-expanded="true"] {
    background: var(--crm-surface-3) !important;
    border-color: var(--crm-line-bold);
    color: var(--crm-text) !important;
}
.fi-ta-row:hover .fi-ta-actions .fi-icon-btn { border-color: var(--crm-line-hover); }

.fi-ta-header-toolbar .fi-input-wrp,
.fi-ta-search-field .fi-input-wrp {
    border-radius: 999px !important;
    background: var(--crm-surface-2) !important;
}
/* Paginazione: un unico blocco a segmenti; selezionato e hover riempiono tutta la casella */
.fi-pagination-items {
    border-radius: .8rem !important;
    overflow: hidden;
    background: var(--crm-surface-2) !important;
    --tw-ring-color: var(--crm-line) !important;
    align-items: stretch;
}
.fi-pagination-item { display: flex; border-color: var(--crm-line) !important; }
.fi-pagination-item-btn {
    flex: 1;
    min-width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 0 !important;
    padding: 0 .55rem !important;
}
.fi-pagination-item-btn:enabled:hover { background: var(--crm-surface-3) !important; }
.fi-pagination-item-label { padding: 0 !important; color: var(--crm-muted) !important; }
.fi-pagination-item-btn:enabled:hover .fi-pagination-item-label { color: var(--crm-text) !important; }
.fi-pagination-item.fi-active .fi-pagination-item-btn { background: var(--crm-coral) !important; }
.fi-pagination-item.fi-active .fi-pagination-item-label { color: var(--crm-on-accent) !important; }
.fi-pagination-item.fi-disabled .fi-pagination-item-label { color: var(--crm-faint) !important; }

/* Barra degli elenchi: ricerca a sinistra, pulsanti con bordo a destra (Filtri, Colonne),
   tutti alti uguali e con lo stesso bordo netto: niente icone sospese */
.fi-ta-header-toolbar > :nth-child(2) { flex: 1 1 auto; justify-content: flex-end; gap: .6rem !important; }
.fi-ta-header-toolbar .fi-ta-search-field { margin-inline-end: auto; width: min(100%, 22rem); }
.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) { display: none; }
@media (max-width: 640px) {
    .fi-ta-header-toolbar > :nth-child(2) { flex-wrap: wrap; justify-content: flex-end; row-gap: .6rem; }
    .fi-ta-header-toolbar .fi-ta-search-field { flex: 1 0 100%; width: 100%; }
}
.fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp {
    border-radius: .8rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid var(--crm-line-strong);
    min-height: 2.5rem;
}
.fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp:focus-within { border-color: color-mix(in srgb, var(--crm-coral) 60%, transparent); }
.fi-ta-header-toolbar .fi-btn.fi-outlined {
    border-radius: .8rem !important;
    min-height: 2.5rem;
    padding-inline: .95rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid var(--crm-line-strong);
    --tw-ring-shadow: 0 0 #0000 !important;
    color: var(--crm-text-2) !important;
    font-weight: 500 !important;
}
.fi-ta-header-toolbar .fi-btn.fi-outlined:hover { background: var(--crm-surface-2) !important; border-color: var(--crm-line-bold); }
.fi-ta-header-toolbar .fi-btn.fi-outlined .fi-icon { color: var(--crm-muted); }
/* Numero di filtri attivi dentro il pulsante, non sospeso sull'angolo; con 0 filtri sparisce */
.fi-ta-header-toolbar .fi-btn-badge-ctn { position: static !important; transform: none !important; translate: none !important; inset: auto !important; }
.fi-ta-header-toolbar .fi-btn-badge-ctn .fi-badge { padding: .05rem .45rem !important; min-width: 1.25rem; }
.fi-ta-header-toolbar .fi-btn-badge-ctn .fi-badge::before { display: none; }
.fi-ta-header-toolbar .fi-btn-badge-ctn:has(.fi-color-crm-zero) { display: none; }
.fi-ta-header-toolbar .fi-btn.fi-outlined:has(.fi-badge:not(.fi-color-crm-zero)) { border-color: color-mix(in srgb, var(--crm-coral) 55%, transparent); }

/* Tabelle vuote: compatte, non devono occupare mezza dashboard */
.fi-ta-empty-state { padding-block: 1.75rem !important; }
.fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-table > thead { display: none; }
.fi-ta-empty-state-icon-bg,
.fi-empty-state-icon-bg {
    width: 2.5rem !important; height: 2.5rem !important; margin-bottom: .6rem;
    /* Cerchio più piccolo di quello di Filament: senza padding e con l'icona centrata */
    padding: 0 !important; display: flex; align-items: center; justify-content: center;
}
.fi-ta-empty-state-icon-bg .fi-icon,
.fi-empty-state-icon-bg .fi-icon { width: 1.25rem; height: 1.25rem; }
.fi-ta-empty-state-heading { font-size: .92rem !important; font-weight: 500 !important; color: var(--crm-muted) !important; }

/* ---------- Badge a pillola con puntino ---------- */
.fi-badge {
    border-radius: 999px !important;
    padding: .3rem .8rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}
/* Pagamento: testo normale con il pallino colorato */
.crm-dot-label { display: inline-flex; align-items: center; gap: .45rem; }
.crm-dot { width: .45rem; height: .45rem; border-radius: 999px; flex-shrink: 0; }
/* Blu e arancione: testo chiaro dello stesso colore, come verde e rosso */
.fi-badge.fi-color-blue, .fi-badge.fi-color-blue .fi-badge-label { color: var(--blue-300) !important; }
.fi-badge.fi-color-orange, .fi-badge.fi-color-orange .fi-badge-label { color: var(--orange-300) !important; }

/* Booking (clienti) e Accesso (utenti): spunta bianca come il testo (non verde) */
.crm-booking .fi-icon, .crm-check .fi-icon { color: var(--crm-text) !important; }

/* ---------- Pulsanti, campi, menu ---------- */
.fi-btn { border-radius: 999px !important; padding-inline: 1.15rem !important; }
.fi-btn.fi-color-primary { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--crm-coral) 80%, transparent) !important; }
.fi-input-wrp { border-radius: .9rem !important; background: var(--crm-surface-2) !important; }
.fi-icon-btn { border-radius: 999px !important; }
.fi-dropdown-panel, .fi-modal-window {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-line);
    box-shadow: var(--crm-shadow) !important;
}
.fi-dropdown-panel { border-radius: 1.1rem !important; }
.fi-modal-window { border-radius: 1.5rem !important; }
.fi-modal-heading { font-family: var(--crm-display); font-weight: 500 !important; font-size: 1.4rem !important; letter-spacing: -.01em; }

/* Tab della scheda cliente */
.fi-tabs {
    border-radius: 999px !important;
    background: var(--crm-surface) !important;
    padding: .3rem !important;
    --tw-ring-color: var(--crm-line) !important;
}
.fi-tabs-item { border-radius: 999px !important; }
.fi-tabs-item.fi-active { background: var(--crm-coral) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon { color: var(--crm-on-accent) !important; }

/* ---------- Statistiche ---------- */
.fi-wi-stats-overview-stat { padding: 1.25rem 1.4rem !important; }
.fi-wi-stats-overview-stat-value {
    font-family: var(--crm-display) !important;
    font-size: 2.25rem !important;
    font-weight: 500 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
    color: var(--crm-text) !important;
    margin-top: .3rem;
}
.fi-wi-stats-overview-stat-description { font-size: .82rem !important; }

/* Grafico */
.fi-wi-chart canvas { filter: none; }

/* ---------- Dashboard: intestazione ---------- */
.crm-welcome { grid-column: 1 / -1; }
.crm-welcome__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: 2rem;
}
.crm-welcome__title {
    font-family: var(--crm-display);
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--crm-text);
    margin: 0;
}
.crm-welcome__sub { color: var(--crm-muted); margin-top: .6rem; font-size: .95rem; }
.crm-welcome__stats { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; }
.crm-stat { display: grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: end; }
.crm-stat__icon {
    width: 2rem; height: 2rem; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--crm-surface);
    border: 1px solid var(--crm-line);
    color: var(--crm-coral);
    margin-bottom: .6rem;
}
.crm-stat__icon svg { width: 1rem; height: 1rem; }
.crm-stat__value {
    font-family: var(--crm-display);
    font-size: clamp(2.6rem, 4.2vw, 4rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.025em;
    color: var(--crm-text);
}
.crm-stat__value small { font-size: .5em; margin-inline-start: .15em; color: var(--crm-muted); }
.crm-stat__label {
    grid-column: 2;
    margin-top: .45rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--crm-coral);
}

.crm-segments { display: flex; gap: .45rem; width: 100%; min-width: 0; }
.crm-seg { display: flex; flex-direction: column; gap: .6rem; min-width: max-content; }
.crm-seg__label {
    padding-inline-start: .7rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--crm-muted);
}
.crm-seg__bar {
    height: 3.1rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding-inline: 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.crm-seg__bar--dark { background: var(--crm-text); color: var(--crm-bg); }
.crm-seg__bar--coral { background: var(--crm-coral); color: var(--crm-on-accent); }
.crm-seg__bar--stripe {
    background: repeating-linear-gradient(-45deg, var(--crm-line-strong) 0 2px, transparent 2px 9px), var(--crm-surface);
    color: var(--crm-text);
}
.crm-seg__bar--outline { border: 1.5px solid var(--crm-line-bold); color: var(--crm-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .fi-main { padding-inline: .75rem !important; }
    .fi-page-header-main-ctn { padding-top: 1rem; gap: 1rem !important; }
    .fi-header-heading { font-size: 1.9rem !important; }
    .fi-header { gap: .75rem !important; }

    .crm-welcome__top { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.25rem; }
    .crm-welcome__title { font-size: 2.3rem; }
    .crm-welcome__stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
    .crm-stat { grid-template-columns: 1fr; background: var(--crm-surface); border-radius: 1rem; padding: .85rem; }
    .crm-stat__icon { display: none; }
    .crm-stat__value { font-size: 1.6rem; }
    .crm-stat__label { grid-column: 1; font-size: .6rem; letter-spacing: .1em; }
    .crm-segments { flex-wrap: wrap; }
    .crm-seg { flex: 1 1 45% !important; min-width: 0; }
    .crm-seg__bar { height: 2.6rem; font-size: .8rem; }

    .fi-wi-stats-overview .fi-section-content.fi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
    .fi-wi-stats-overview-stat { padding: .9rem 1rem !important; }
    .fi-wi-stats-overview-stat-value { font-size: 1.6rem !important; }
    .fi-wi-stats-overview-stat-label { font-size: .62rem !important; letter-spacing: .1em !important; }
    .fi-wi-stats-overview-stat-description { font-size: .75rem !important; }

    .fi-ta-header-toolbar { padding-inline: .9rem !important; }
    .fi-ta-cell { padding-inline: .6rem !important; }
    .fi-ta-text-item-label { font-size: .88rem; }
    .fi-badge { padding: .25rem .6rem !important; font-size: .72rem !important; }

    .fi-tabs { border-radius: 1rem !important; overflow-x: auto; }
    .fi-modal-window { border-radius: 1.25rem 1.25rem 0 0 !important; }
}

/* Dettaglio fattura elettronica (pagina Fatture) */
.crm-einvoice { display: grid; gap: .9rem; font-size: .88rem; }
.crm-einvoice table { width: 100%; border-collapse: collapse; }
.crm-einvoice th, .crm-einvoice td { padding: .45rem .5rem; border-bottom: 1px solid var(--crm-line); text-align: left; }
.crm-einvoice th { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crm-label); }
.crm-einvoice .crm-num { text-align: right; white-space: nowrap; }
.crm-einvoice ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.crm-einvoice-issues { color: var(--crm-danger); }
.crm-einvoice-warnings { color: var(--crm-warning); }
.crm-einvoice-totals { text-align: right; }

.crm-einvoice .crm-einvoice-extra { padding-top: 0; color: var(--crm-label); font-size: .8rem; }
.crm-einvoice .crm-login-agent { color: var(--crm-label); font-size: .8rem; }

/* ---------- Registro attività ---------- */
.fi-ta-table .crm-audit-customer { min-width: 15rem; }
.crm-audit .crm-audit-meta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.crm-audit .crm-audit-meta dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crm-label); padding-top: .15rem; }
.crm-audit .crm-audit-meta dd { margin: 0; word-break: break-word; }
.crm-audit td { word-break: break-word; vertical-align: top; }
.crm-audit .crm-audit-before { color: var(--crm-label); text-decoration: line-through; text-decoration-color: var(--crm-line-bold); }

/* ---------- Statistiche ---------- */
.crm-st-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.crm-st-table th, .crm-st-table td { padding: .6rem .6rem; border-bottom: 1px solid var(--crm-line); text-align: left; vertical-align: middle; }
.crm-st-table th {
    font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--crm-label); white-space: nowrap;
}
.crm-st-table tbody tr:hover td { background: var(--crm-wash); }
.crm-st-table tfoot td { border-bottom: 0; color: var(--crm-muted); font-weight: 600; }
.crm-st-table .crm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-st-strong { color: var(--crm-text); font-weight: 600; }
.crm-st-muted { color: var(--crm-faint); }
.crm-st-up { color: var(--crm-success); }
.crm-st-down { color: var(--crm-danger); }
.crm-st-empty { text-align: center !important; color: var(--crm-muted); padding: 1.5rem !important; }
.crm-st-link { color: var(--crm-text); font-weight: 500; }
.crm-st-link:hover { color: var(--crm-coral); text-decoration: underline; text-underline-offset: 3px; }
.crm-st-sub { display: block; font-size: .75rem; color: var(--crm-muted); margin-top: .1rem; }
.crm-st-tag {
    display: inline-block; margin-inline-start: .35rem; padding: .05rem .5rem; border-radius: 999px;
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid var(--crm-line-bold); color: var(--crm-muted); vertical-align: middle; white-space: nowrap;
}
.crm-st-tag--new { border-color: color-mix(in srgb, var(--crm-success) 45%, transparent); color: var(--crm-success); }
.crm-st-tag--lost { border-color: color-mix(in srgb, var(--crm-danger) 45%, transparent); color: var(--crm-danger); }
.crm-st-scroll { overflow-x: auto; margin-inline: -.25rem; }

/* Barre di quota (piani, assegnati, fedeltà) */
.crm-st-share { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.crm-st-share__label { color: var(--crm-text); font-weight: 500; }
.crm-st-share__pct { color: var(--crm-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.crm-st-bar { height: 6px; border-radius: 999px; background: var(--crm-surface-3); overflow: hidden; }
.crm-st-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--crm-coral); }
.crm-st-retention { min-width: 9rem; }
.crm-st-retention { display: flex; align-items: center; gap: .6rem; }
.crm-st-retention .crm-st-bar { flex: 1; }
.crm-st-retention > span { width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--crm-muted); font-size: .82rem; }

/* Matrice dei canoni */
.crm-st-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.crm-st-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.crm-st-pill {
    padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: var(--crm-surface-2); color: var(--crm-muted); border: 1px solid var(--crm-line);
}
.crm-st-pill span { margin-inline-start: .3rem; opacity: .7; font-variant-numeric: tabular-nums; }
.crm-st-pill:hover { color: var(--crm-text); }
.crm-st-pill.is-active { background: var(--crm-coral); color: var(--crm-on-accent); border-color: transparent; }
.crm-st-search { width: 16rem; max-width: 100%; }
.crm-st-matrix-wrap { max-height: 70vh; overflow: auto; }
.crm-st-matrix { font-size: .84rem; }
.crm-st-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--crm-surface); }
.crm-st-matrix .crm-st-sticky { position: sticky; left: 0; z-index: 1; background: var(--crm-surface); min-width: 12rem; max-width: 16rem; }
.crm-st-matrix thead .crm-st-sticky { z-index: 3; }
.crm-st-matrix tbody tr:hover .crm-st-sticky { background: var(--crm-surface-2); }
.crm-st-cell { color: var(--crm-text); min-width: 3.6rem; }
.crm-st-cell span { font-size: .6rem; margin-inline-end: .15rem; vertical-align: 1px; }
.crm-st-cell--up { background: color-mix(in srgb, var(--crm-success) 9%, transparent); }
.crm-st-cell--down { background: color-mix(in srgb, var(--crm-danger) 9%, transparent); }
.crm-st-cell--empty { background: repeating-linear-gradient(-45deg, var(--crm-wash) 0 2px, transparent 2px 7px); }
.crm-st-matrix .crm-st-current { color: var(--crm-muted); }

@media (max-width: 768px) {
    .crm-st-hide-sm { display: none; }
    .crm-st-table { font-size: .84rem; }
    .crm-st-table th, .crm-st-table td { padding: .5rem .4rem; }
    .crm-st-search { width: 100%; }
    .crm-st-matrix .crm-st-sticky { min-width: 8.5rem; max-width: 10rem; }
}