/* ══════════════════════════════════════════════════════════════════
   CRM ML — Component Library v1.0 (Fase B design system)
   ══════════════════════════════════════════════════════════════════
   Componenti UI riutilizzabili. Usano SOLO i token canonici di
   assets/tokens/_root.css (--crml-color-*, --crml-space-*, ecc.)
   e si adattano automaticamente a Vivid / Glass via _theme-glass.css.

   Naming: BEM-lite .crml-<comp>[__<el>][--<mod>]
   No !important: cascade naturale. Le regole catch-all di
   admin-themes-deep.css vengono decommissionate man mano che i
   componenti sostituiscono lo style inline PHP.

   Indice:
     1.  Button       .crml-btn [--primary|--ghost|--danger|--icon] [--sm|--lg]
     2.  Input        .crml-input / .crml-textarea
     3.  Select       .crml-select
     4.  Checkbox     .crml-check
     5.  Toggle       .crml-toggle
     6.  Card         .crml-card[__header|__body|__footer|__title|__sub]
     7.  Table        .crml-table (estende .widefat, .wp-list-table)
     8.  Badge        .crml-badge [--success|--warning|--danger|--info|--brand]
     9.  Alert        .crml-alert [--success|--warning|--danger|--info]
     10. Tabs         .crml-tabs / .crml-tab[--active]
     11. Modal        .crml-modal[-overlay|__header|__body|__footer]
     12. Tooltip      .crml-tooltip[data-tooltip]
     13. Avatar       .crml-avatar[--lg]
     14. Empty state  .crml-empty
     15. Skeleton     .crml-skeleton
     16. Page shell   .crml-page[__header|__title|__sub|__actions]
     17. Toolbar      .crml-toolbar / .crml-bulkbar
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. BUTTON — .crml-btn
   ══════════════════════════════════════════════════════════════════ */

.crml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crml-space-2);
    padding: var(--crml-space-2) var(--crml-space-4);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-base);
    font-weight: var(--crml-weight-semi);
    line-height: 1.2;
    color: var(--crml-color-fg-default);
    background: var(--crml-color-bg-surface);
    border: 1px solid var(--crml-color-border-base);
    border-radius: var(--crml-radius-sm);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition:
        background-color var(--crml-motion-fast),
        border-color var(--crml-motion-fast),
        color var(--crml-motion-fast),
        box-shadow var(--crml-motion-fast),
        transform var(--crml-motion-fast);
}
.crml-btn:hover {
    background: var(--crml-color-bg-hover);
    border-color: var(--crml-color-border-focus);
    color: var(--crml-color-brand-600);
}
.crml-btn:active { transform: translateY(1px); }
.crml-btn:focus-visible {
    outline: none;
    box-shadow: var(--crml-shadow-focus);
}
.crml-btn:disabled,
.crml-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Varianti colore */
.crml-btn--primary {
    background: var(--crml-color-brand-gradient);
    color: var(--crml-color-fg-on-brand);
    border-color: transparent;
    box-shadow: var(--crml-shadow-md);
}
.crml-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--crml-shadow-lg);
    color: var(--crml-color-fg-on-brand);
    background: var(--crml-color-brand-gradient);
    border-color: transparent;
}
.crml-btn--ghost {
    background: transparent;
    border-style: dashed;
    color: var(--crml-color-fg-muted);
}
.crml-btn--ghost:hover {
    background: var(--crml-color-bg-hover);
    color: var(--crml-color-brand-500);
    border-style: solid;
}
.crml-btn--danger {
    background: var(--crml-color-danger);
    color: #fff;
    border-color: transparent;
}
.crml-btn--danger:hover {
    background: var(--crml-color-danger-fg);
    color: #fff;
    border-color: transparent;
}
.crml-btn--icon {
    padding: var(--crml-space-2);
    width: 36px;
    height: 36px;
}

/* Size */
.crml-btn--sm {
    padding: var(--crml-space-1) var(--crml-space-3);
    font-size: var(--crml-text-sm);
}
.crml-btn--lg {
    padding: var(--crml-space-3) var(--crml-space-6);
    font-size: var(--crml-text-md);
}

/* Loading state — spinner via pseudo-element */
.crml-btn--loading {
    pointer-events: none;
    position: relative;
    color: transparent !important; /* nasconde label, solo qui necessario */
}
.crml-btn--loading::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: crml-spin 600ms linear infinite;
    color: var(--crml-color-fg-default);
}
@keyframes crml-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════════
   2. INPUT — .crml-input / .crml-textarea
   ══════════════════════════════════════════════════════════════════ */

.crml-input,
.crml-textarea {
    display: block;
    width: 100%;
    padding: var(--crml-space-2) var(--crml-space-3);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-base);
    font-weight: var(--crml-weight-regular);
    line-height: var(--crml-leading-normal);
    color: var(--crml-color-fg-default);
    background: var(--crml-color-bg-surface);
    border: 1px solid var(--crml-color-border-base);
    border-radius: var(--crml-radius-sm);
    box-shadow: none;
    transition:
        border-color var(--crml-motion-fast),
        box-shadow var(--crml-motion-fast),
        background-color var(--crml-motion-fast);
}
.crml-input::placeholder,
.crml-textarea::placeholder {
    color: var(--crml-color-fg-faint);
    opacity: 1;
}
.crml-input:hover,
.crml-textarea:hover {
    border-color: var(--crml-color-border-strong);
}
.crml-input:focus,
.crml-textarea:focus {
    border-color: var(--crml-color-border-focus);
    box-shadow: var(--crml-shadow-focus);
    outline: none;
}
.crml-input[aria-invalid="true"],
.crml-textarea[aria-invalid="true"] {
    border-color: var(--crml-color-danger);
}
.crml-input:disabled,
.crml-textarea:disabled {
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-muted);
    cursor: not-allowed;
}
.crml-textarea { min-height: 80px; resize: vertical; }

/* Size compatto / grande */
.crml-input--sm { padding: var(--crml-space-1) var(--crml-space-2); font-size: var(--crml-text-sm); }
.crml-input--lg { padding: var(--crml-space-3) var(--crml-space-4); font-size: var(--crml-text-md); }


/* ══════════════════════════════════════════════════════════════════
   3. SELECT — .crml-select
   ══════════════════════════════════════════════════════════════════ */

.crml-select {
    display: block;
    width: 100%;
    padding: var(--crml-space-2) var(--crml-space-8) var(--crml-space-2) var(--crml-space-3);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-base);
    color: var(--crml-color-fg-default);
    background-color: var(--crml-color-bg-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%234a4a68' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--crml-space-3) center;
    background-size: 12px;
    border: 1px solid var(--crml-color-border-base);
    border-radius: var(--crml-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition:
        border-color var(--crml-motion-fast),
        box-shadow var(--crml-motion-fast);
}
.crml-select:hover { border-color: var(--crml-color-border-strong); }
.crml-select:focus {
    border-color: var(--crml-color-border-focus);
    box-shadow: var(--crml-shadow-focus);
    outline: none;
}
.crml-select:disabled {
    background-color: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-muted);
    cursor: not-allowed;
}
/* Glass: freccia chiara */
body.crml-theme-glass .crml-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%23b4bdcf' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}
/* option dropdown: forza scuro in Glass per leggibilità menu browser */
body.crml-theme-glass .crml-select option {
    background: #0f172a;
    color: var(--crml-color-fg-default);
}


/* ══════════════════════════════════════════════════════════════════
   4. CHECKBOX / RADIO — .crml-check (supporta type=checkbox e radio)
   ══════════════════════════════════════════════════════════════════ */

.crml-check {
    width: 16px; height: 16px;
    accent-color: var(--crml-color-brand-500);
    cursor: pointer;
    vertical-align: middle;
}
.crml-check:focus-visible {
    outline: 2px solid var(--crml-color-border-focus);
    outline-offset: 2px;
}

.crml-check-label {
    display: inline-flex;
    align-items: center;
    gap: var(--crml-space-2);
    font-size: var(--crml-text-base);
    color: var(--crml-color-fg-default);
    cursor: pointer;
    user-select: none;
}


/* ══════════════════════════════════════════════════════════════════
   5. TOGGLE — .crml-toggle (switch ON/OFF)
   ══════════════════════════════════════════════════════════════════ */

.crml-toggle {
    --toggle-h: 20px;
    --toggle-w: 36px;
    position: relative;
    display: inline-block;
    width: var(--toggle-w);
    height: var(--toggle-h);
    flex-shrink: 0;
}
.crml-toggle input { opacity: 0; width: 0; height: 0; }
.crml-toggle__slider {
    position: absolute; inset: 0;
    background: var(--crml-color-border-base);
    border-radius: var(--crml-radius-pill);
    cursor: pointer;
    transition: background-color var(--crml-motion-fast);
}
.crml-toggle__slider::before {
    content: "";
    position: absolute;
    left: 2px; top: 2px;
    width: calc(var(--toggle-h) - 4px);
    height: calc(var(--toggle-h) - 4px);
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--crml-shadow-xs);
    transition: transform var(--crml-motion-fast);
}
.crml-toggle input:checked + .crml-toggle__slider {
    background: var(--crml-color-brand-500);
}
.crml-toggle input:checked + .crml-toggle__slider::before {
    transform: translateX(calc(var(--toggle-w) - var(--toggle-h)));
}
.crml-toggle input:focus-visible + .crml-toggle__slider {
    box-shadow: var(--crml-shadow-focus);
}


/* ══════════════════════════════════════════════════════════════════
   6. CARD — .crml-card
   ══════════════════════════════════════════════════════════════════ */

.crml-card {
    background: var(--crml-color-bg-surface);
    border: 1px solid var(--crml-color-border-subtle);
    border-radius: var(--crml-radius-md);
    box-shadow: var(--crml-shadow-sm);
    overflow: hidden;
}
.crml-card--elevated { box-shadow: var(--crml-shadow-md); }
.crml-card--flat     { box-shadow: none; border-color: var(--crml-color-border-subtle); }
.crml-card--ghost    { background: transparent; border-color: transparent; box-shadow: none; }
.crml-card--narrow   { max-width: 520px; }
.crml-card--md       { max-width: 700px; }
.crml-card--lg       { max-width: 800px; }
.crml-card--xl       { max-width: 960px; }
.crml-card--padded   { padding: var(--crml-space-4) var(--crml-space-6); }

.crml-card__header {
    padding: var(--crml-space-4) var(--crml-space-6);
    border-bottom: 1px solid var(--crml-color-border-subtle);
    background: var(--crml-color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crml-space-3);
}
.crml-card__body {
    padding: var(--crml-space-4) var(--crml-space-6);
    color: var(--crml-color-fg-default);
}
.crml-card__footer {
    padding: var(--crml-space-3) var(--crml-space-6);
    border-top: 1px solid var(--crml-color-border-subtle);
    background: var(--crml-color-bg-subtle);
    display: flex;
    gap: var(--crml-space-2);
    justify-content: flex-end;
}
.crml-card__title {
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-lg);
    font-weight: var(--crml-weight-semi);
    line-height: var(--crml-leading-tight);
    color: var(--crml-color-fg-strong);
    margin: 0;
}
.crml-card__sub {
    font-size: var(--crml-text-sm);
    color: var(--crml-color-fg-muted);
    margin: var(--crml-space-1) 0 0;
}


/* ══════════════════════════════════════════════════════════════════
   7. TABLE — .crml-table + alias .widefat/.wp-list-table
   ══════════════════════════════════════════════════════════════════
   Alias con selettore annidato dentro .crml-page (scope) per non
   contaminare tabelle WP core in aree non-CRML.
   ══════════════════════════════════════════════════════════════════ */

.crml-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-base);
    color: var(--crml-color-fg-default);
    background: var(--crml-color-bg-surface);
}

.crml-table thead th {
    padding: var(--crml-space-3);
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-strong);
    font-weight: var(--crml-weight-bold);
    font-size: var(--crml-text-sm);
    text-align: left;
    border-bottom: 2px solid var(--crml-color-border-base);
    white-space: nowrap;
}

.crml-table tbody td {
    padding: var(--crml-space-3);
    border-bottom: 1px solid var(--crml-color-border-subtle);
    vertical-align: middle;
    color: var(--crml-color-fg-default);
}

.crml-table tbody tr {
    background: var(--crml-color-bg-surface);
    transition: background-color var(--crml-motion-fast);
}
.crml-table tbody tr:nth-child(even) {
    background: var(--crml-color-bg-subtle);
}
.crml-table tbody tr:hover {
    background: var(--crml-color-bg-hover);
}

.crml-table tbody tr.is-selected {
    background: var(--crml-color-bg-active);
}

/* ══════════════════════════════════════════════════════════════════
   FILTER CHIP — .crml-filter-chip (chip cliccabile per filtri stato)
   Usato in liste con filtro rapido multi-stato (preventivi, trial,
   pagamenti, ecc). Variant semantiche + active state.
   ══════════════════════════════════════════════════════════════════ */

.crml-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--crml-space-1);
    padding: var(--crml-space-2) var(--crml-space-4);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-sm);
    font-weight: var(--crml-weight-bold);
    line-height: 1;
    border-radius: var(--crml-radius-sm);
    border: 2px solid var(--crml-color-border-subtle);
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-muted);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--crml-motion-fast),
        border-color var(--crml-motion-fast),
        color var(--crml-motion-fast);
}
.crml-filter-chip:hover {
    background: var(--crml-color-bg-hover);
    color: var(--crml-color-fg-default);
}
.crml-filter-chip--active {
    border-color: var(--crml-color-brand-500);
    color: var(--crml-color-brand-500);
    background: var(--crml-color-bg-surface);
}
.crml-filter-chip--success {
    background: var(--crml-color-success-bg);
    color: var(--crml-color-success-fg);
    border-color: transparent;
}
.crml-filter-chip--warning {
    background: var(--crml-color-warning-bg);
    color: var(--crml-color-warning-fg);
    border-color: transparent;
}
.crml-filter-chip--danger {
    background: var(--crml-color-danger-bg);
    color: var(--crml-color-danger-fg);
    border-color: transparent;
}
.crml-filter-chip--info {
    background: var(--crml-color-info-bg);
    color: var(--crml-color-info-fg);
    border-color: transparent;
}


/* Row modifier per scadenze/problemi (es. inventario overdue, pagamenti
   scaduti, certificati vicini a scadenza). Usa soft danger bg, non
   invasivo su Vivid/Glass grazie ai token rgba. */
.crml-table tbody tr.crml-row-overdue,
.crml-table tbody tr.crml-row-danger {
    background: var(--crml-color-danger-bg);
}
.crml-table tbody tr.crml-row-warning {
    background: var(--crml-color-warning-bg);
}
.crml-table tbody tr.crml-row-success {
    background: var(--crml-color-success-bg);
}

/* Cell modifier */
.crml-table td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.crml-table td.is-compact { padding: var(--crml-space-2); }

/* Tabella compatta per modali / card inline */
.crml-table--sm { font-size: var(--crml-text-sm); }
.crml-table--sm thead th,
.crml-table--sm tbody td { padding: var(--crml-space-2) var(--crml-space-3); }


/* ══════════════════════════════════════════════════════════════════
   8. BADGE — .crml-badge (status pill compatto)
   ══════════════════════════════════════════════════════════════════ */

.crml-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--crml-space-1);
    padding: var(--crml-space-1) var(--crml-space-2);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-xs);
    font-weight: var(--crml-weight-semi);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: var(--crml-radius-pill);
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-default);
    border: 1px solid var(--crml-color-border-subtle);
    white-space: nowrap;
}
.crml-badge--success {
    background: var(--crml-color-success-bg);
    color: var(--crml-color-success-fg);
    border-color: transparent;
}
.crml-badge--warning {
    background: var(--crml-color-warning-bg);
    color: var(--crml-color-warning-fg);
    border-color: transparent;
}
.crml-badge--danger {
    background: var(--crml-color-danger-bg);
    color: var(--crml-color-danger-fg);
    border-color: transparent;
}
.crml-badge--info {
    background: var(--crml-color-info-bg);
    color: var(--crml-color-info-fg);
    border-color: transparent;
}
.crml-badge--brand {
    background: var(--crml-color-brand-100);
    color: var(--crml-color-brand-700);
    border-color: transparent;
}
body.crml-theme-glass .crml-badge--brand {
    background: rgba(255, 111, 163, .18);
    color: var(--crml-color-brand-500);
}

/* Badge size */
.crml-badge--sm { padding: 2px var(--crml-space-2); font-size: 10px; }
.crml-badge--lg { padding: var(--crml-space-1) var(--crml-space-3); font-size: var(--crml-text-sm); }

/* Badge dot (solo cerchietto colorato senza testo) */
.crml-badge-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--crml-color-fg-faint);
}
.crml-badge-dot--success { background: var(--crml-color-success); }
.crml-badge-dot--warning { background: var(--crml-color-warning); }
.crml-badge-dot--danger  { background: var(--crml-color-danger); }
.crml-badge-dot--info    { background: var(--crml-color-info); }


/* ══════════════════════════════════════════════════════════════════
   9. ALERT — .crml-alert (banner inline notifica)
   ══════════════════════════════════════════════════════════════════ */

.crml-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--crml-space-3);
    padding: var(--crml-space-3) var(--crml-space-4);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-sm);
    line-height: var(--crml-leading-normal);
    border-left: 3px solid;
    border-radius: var(--crml-radius-sm);
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-default);
    border-left-color: var(--crml-color-fg-muted);
}
.crml-alert--success {
    background: var(--crml-color-success-bg);
    color: var(--crml-color-success-fg);
    border-left-color: var(--crml-color-success);
}
.crml-alert--warning {
    background: var(--crml-color-warning-bg);
    color: var(--crml-color-warning-fg);
    border-left-color: var(--crml-color-warning);
}
.crml-alert--danger {
    background: var(--crml-color-danger-bg);
    color: var(--crml-color-danger-fg);
    border-left-color: var(--crml-color-danger);
}
.crml-alert--info {
    background: var(--crml-color-info-bg);
    color: var(--crml-color-info-fg);
    border-left-color: var(--crml-color-info);
}
.crml-alert__icon { flex-shrink: 0; font-size: var(--crml-text-lg); }
.crml-alert__title {
    font-weight: var(--crml-weight-semi);
    margin: 0 0 var(--crml-space-1);
    color: inherit;
}
.crml-alert__body { margin: 0; color: inherit; }


/* ══════════════════════════════════════════════════════════════════
   10. TABS — .crml-tabs / .crml-tab
   ══════════════════════════════════════════════════════════════════ */

.crml-tabs {
    display: flex;
    gap: var(--crml-space-1);
    border-bottom: 1px solid var(--crml-color-border-base);
    margin-bottom: var(--crml-space-4);
    overflow-x: auto;
    scrollbar-width: thin;
}
.crml-tab {
    padding: var(--crml-space-3) var(--crml-space-4);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-base);
    font-weight: var(--crml-weight-medium);
    line-height: 1;
    color: var(--crml-color-fg-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        color var(--crml-motion-fast),
        border-color var(--crml-motion-fast);
}
.crml-tab:hover {
    color: var(--crml-color-fg-default);
}
.crml-tab--active,
.crml-tab[aria-selected="true"] {
    color: var(--crml-color-brand-500);
    border-bottom-color: var(--crml-color-brand-500);
    font-weight: var(--crml-weight-semi);
}
.crml-tab:focus-visible {
    outline: none;
    box-shadow: var(--crml-shadow-focus);
    border-radius: var(--crml-radius-xs) var(--crml-radius-xs) 0 0;
}


/* ══════════════════════════════════════════════════════════════════
   11. MODAL — .crml-modal-overlay / .crml-modal
   ══════════════════════════════════════════════════════════════════ */

.crml-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--crml-color-bg-overlay);
    z-index: var(--crml-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--crml-space-4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: crml-fade-in var(--crml-motion-base);
}
.crml-modal {
    background: var(--crml-color-bg-surface);
    border: 1px solid var(--crml-color-border-subtle);
    border-radius: var(--crml-radius-lg);
    box-shadow: var(--crml-shadow-lg);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: crml-scale-in var(--crml-motion-base);
}
.crml-modal--lg { max-width: 860px; }
.crml-modal--xl { max-width: 1100px; }
.crml-modal--sm { max-width: 420px; }

.crml-modal__header {
    padding: var(--crml-space-4) var(--crml-space-6);
    border-bottom: 1px solid var(--crml-color-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--crml-space-3);
}
.crml-modal__title {
    font-size: var(--crml-text-xl);
    font-weight: var(--crml-weight-semi);
    color: var(--crml-color-fg-strong);
    margin: 0;
}
.crml-modal__body {
    padding: var(--crml-space-6);
    overflow-y: auto;
    flex: 1;
    color: var(--crml-color-fg-default);
}
.crml-modal__footer {
    padding: var(--crml-space-3) var(--crml-space-6);
    border-top: 1px solid var(--crml-color-border-subtle);
    display: flex;
    gap: var(--crml-space-2);
    justify-content: flex-end;
    background: var(--crml-color-bg-subtle);
}
.crml-modal__close {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--crml-radius-sm);
    color: var(--crml-color-fg-muted);
    cursor: pointer;
    transition: background-color var(--crml-motion-fast), color var(--crml-motion-fast);
}
.crml-modal__close:hover {
    background: var(--crml-color-bg-hover);
    color: var(--crml-color-fg-default);
}

@keyframes crml-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes crml-scale-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ══════════════════════════════════════════════════════════════════
   12. TOOLTIP — .crml-tooltip[data-tooltip]
   ══════════════════════════════════════════════════════════════════ */

.crml-tooltip {
    position: relative;
    display: inline-block;
}
.crml-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--crml-space-1) var(--crml-space-2);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-xs);
    font-weight: var(--crml-weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    background: var(--crml-color-fg-strong);
    color: var(--crml-color-bg-surface);
    border-radius: var(--crml-radius-xs);
    box-shadow: var(--crml-shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--crml-motion-fast);
    z-index: var(--crml-z-tooltip);
}
.crml-tooltip:hover[data-tooltip]::after,
.crml-tooltip:focus-visible[data-tooltip]::after {
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════
   13. AVATAR — .crml-avatar
   ══════════════════════════════════════════════════════════════════ */

.crml-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--crml-color-bg-subtle);
    color: var(--crml-color-fg-muted);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-sm);
    font-weight: var(--crml-weight-semi);
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
}
.crml-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.crml-avatar--sm { width: 24px; height: 24px; font-size: var(--crml-text-xs); }
.crml-avatar--lg { width: 48px; height: 48px; font-size: var(--crml-text-md); }
.crml-avatar--xl { width: 64px; height: 64px; font-size: var(--crml-text-lg); }


/* ══════════════════════════════════════════════════════════════════
   14. EMPTY STATE — .crml-empty
   ══════════════════════════════════════════════════════════════════ */

.crml-empty {
    padding: var(--crml-space-10) var(--crml-space-6);
    text-align: center;
    color: var(--crml-color-fg-muted);
}
.crml-empty__icon {
    font-size: 48px;
    margin-bottom: var(--crml-space-3);
    opacity: .6;
    line-height: 1;
}
.crml-empty__title {
    font-size: var(--crml-text-lg);
    font-weight: var(--crml-weight-semi);
    line-height: var(--crml-leading-tight);
    color: var(--crml-color-fg-strong);
    margin: 0 0 var(--crml-space-2);
}
.crml-empty__body {
    font-size: var(--crml-text-sm);
    color: var(--crml-color-fg-muted);
    margin: 0 auto var(--crml-space-4);
    max-width: 400px;
}


/* ══════════════════════════════════════════════════════════════════
   15. SKELETON LOADER — .crml-skeleton
   ══════════════════════════════════════════════════════════════════ */

.crml-skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--crml-color-bg-subtle) 0%,
        var(--crml-color-bg-hover) 50%,
        var(--crml-color-bg-subtle) 100%
    );
    background-size: 200% 100%;
    animation: crml-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--crml-radius-sm);
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.crml-skeleton--text  { height: var(--crml-text-base); margin: var(--crml-space-1) 0; }
.crml-skeleton--title { height: var(--crml-text-xl); width: 60%; }
.crml-skeleton--avatar { width: 32px; height: 32px; border-radius: 50%; }
@keyframes crml-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ══════════════════════════════════════════════════════════════════
   16. PAGE SHELL — .crml-page
   ══════════════════════════════════════════════════════════════════ */

.crml-page {
    color: var(--crml-color-fg-default);
    font-family: var(--crml-font-sans);
}
.crml-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--crml-space-4);
    padding: var(--crml-space-4) 0 var(--crml-space-6);
    border-bottom: 1px solid var(--crml-color-border-subtle);
    margin-bottom: var(--crml-space-6);
}
.crml-page__titles { flex: 1 1 auto; min-width: 0; }
.crml-page__title {
    font-size: var(--crml-text-3xl);
    font-weight: var(--crml-weight-bold);
    line-height: var(--crml-leading-tight);
    color: var(--crml-color-fg-strong);
    margin: 0;
}
.crml-page__sub {
    font-size: var(--crml-text-sm);
    color: var(--crml-color-fg-muted);
    margin: var(--crml-space-1) 0 0;
}
.crml-page__actions {
    display: flex;
    gap: var(--crml-space-2);
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════
   17. TOOLBAR / BULKBAR — .crml-toolbar / .crml-bulkbar
   ══════════════════════════════════════════════════════════════════ */

.crml-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crml-space-3);
    padding: var(--crml-space-3) var(--crml-space-4);
    background: var(--crml-color-bg-subtle);
    border: 1px solid var(--crml-color-border-subtle);
    border-radius: var(--crml-radius-md);
    margin-bottom: var(--crml-space-4);
}
.crml-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crml-space-2);
    flex: 1 1 auto;
}
.crml-toolbar__actions {
    display: flex;
    gap: var(--crml-space-2);
    flex-shrink: 0;
}

.crml-bulkbar {
    position: sticky;
    bottom: var(--crml-space-4);
    z-index: var(--crml-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--crml-space-3);
    padding: var(--crml-space-3) var(--crml-space-4);
    background: var(--crml-color-bg-surface);
    border: 1px solid var(--crml-color-border-base);
    border-radius: var(--crml-radius-md);
    box-shadow: var(--crml-shadow-lg);
    transform: translateY(0);
    transition: transform var(--crml-motion-base), opacity var(--crml-motion-base);
}
.crml-bulkbar--hidden {
    transform: translateY(calc(100% + var(--crml-space-4)));
    opacity: 0;
    pointer-events: none;
}
.crml-bulkbar__count {
    font-weight: var(--crml-weight-semi);
    color: var(--crml-color-fg-strong);
}


/* ══════════════════════════════════════════════════════════════════
   SPLIT LAYOUT — sidebar + main (usato in Kit Iscrizione, Preferenze,
   dettagli anagrafica, detail views)
   ══════════════════════════════════════════════════════════════════ */

.crml-split,
.crml-ass-kit-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--crml-space-5);
    margin-top: var(--crml-space-4);
}
.crml-split--wide,
.crml-ass-kit-grid--wide {
    grid-template-columns: 400px 1fr;
}
@media (max-width: 960px) {
    .crml-split,
    .crml-ass-kit-grid {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════
   18. KV-LIST — .crml-kv (lista chiave-valore)
   Pattern "etichetta : valore" con divider tratteggiato, usato per
   dettagli anagrafica, riepiloghi socio, config ente, ecc.
   ══════════════════════════════════════════════════════════════════ */

.crml-kv {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--crml-text-sm);
}
.crml-kv__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--crml-space-3);
    padding: var(--crml-space-1) 0;
    border-bottom: 1px dashed var(--crml-color-border-subtle);
}
.crml-kv__row:last-child { border-bottom: none; }
.crml-kv__key {
    color: var(--crml-color-fg-muted);
    font-weight: var(--crml-weight-semi);
    flex-shrink: 0;
}
.crml-kv__val {
    color: var(--crml-color-fg-default);
    text-align: right;
    word-break: break-word;
}
.crml-kv__val--missing {
    color: var(--crml-color-danger);
    font-style: italic;
}

/* Heading di sezione in una card (rosa/brand piccolo) */
.crml-section-label {
    margin: 0 0 var(--crml-space-2);
    font-family: var(--crml-font-sans);
    font-size: var(--crml-text-xs);
    font-weight: var(--crml-weight-semi);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--crml-color-brand-500);
}
.crml-section-label + .crml-kv { margin-top: var(--crml-space-1); }

/* Spacer between sections in a card */
.crml-section-label + .crml-section-label,
.crml-kv + .crml-section-label { margin-top: var(--crml-space-4); }


/* ══════════════════════════════════════════════════════════════════
   19. CHECKBOX-CARD — .crml-checkcard (checkbox con icona + label)
   Pattern per selezione multipla di documenti, funzioni, moduli, ecc.
   ══════════════════════════════════════════════════════════════════ */

.crml-checkcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--crml-space-3);
}
.crml-checkcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crml-space-2);
    padding: var(--crml-space-3);
    background: var(--crml-color-bg-subtle);
    border: 1px solid var(--crml-color-border-subtle);
    border-radius: var(--crml-radius-sm);
    cursor: pointer;
    text-align: center;
    transition:
        background-color var(--crml-motion-fast),
        border-color var(--crml-motion-fast);
}
.crml-checkcard:hover {
    background: var(--crml-color-bg-hover);
    border-color: var(--crml-color-border-strong);
}
.crml-checkcard input[type="checkbox"] {
    align-self: flex-end;
    margin: 0;
    accent-color: var(--crml-color-brand-500);
}
.crml-checkcard__icon {
    font-size: 28px;
    line-height: 1;
}
.crml-checkcard__label {
    font-size: var(--crml-text-sm);
    font-weight: var(--crml-weight-semi);
    color: var(--crml-color-fg-default);
    line-height: var(--crml-leading-tight);
}
.crml-checkcard:has(input:checked) {
    background: var(--crml-color-bg-active);
    border-color: var(--crml-color-brand-500);
}
.crml-checkcard:has(input:checked) .crml-checkcard__label {
    color: var(--crml-color-brand-500);
}


/* ══════════════════════════════════════════════════════════════════
   20. FIELD-GRID — form multi-colonna
   ══════════════════════════════════════════════════════════════════ */

.crml-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--crml-space-3);
    margin-bottom: var(--crml-space-3);
}
.crml-field-grid--two   { grid-template-columns: 1fr 1fr; }
.crml-field-grid--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
    .crml-field-grid,
    .crml-field-grid--two,
    .crml-field-grid--three { grid-template-columns: 1fr; }
}
.crml-field {
    display: flex;
    flex-direction: column;
    gap: var(--crml-space-1);
}
.crml-field > label {
    display: block;
    font-size: var(--crml-text-xs);
    font-weight: var(--crml-weight-semi);
    color: var(--crml-color-fg-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.crml-field--full    { grid-column: 1 / -1; }
.crml-field--aligned { display: flex; align-items: flex-end; }


/* ══════════════════════════════════════════════════════════════════
   21. TABLE HELPERS — cell utilities
   ══════════════════════════════════════════════════════════════════ */

.crml-td-center {
    text-align: center;
}
.crml-td-center input,
.crml-td-center select {
    display: inline-block;
    width: auto;
    margin: 0 auto;
}
.crml-td-actions {
    display: inline-flex;
    gap: var(--crml-space-1);
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Color swatch (picker preview) */
.crml-color-swatch {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: var(--crml-radius-sm);
    border: 1px solid var(--crml-color-border-base);
    flex-shrink: 0;
}

/* Checkbox variante danger (colore accent rosso) */
.crml-check--danger {
    accent-color: var(--crml-color-danger);
}


/* ══════════════════════════════════════════════════════════════════
   22. BAR CHART — .crml-bar-chart (istogramma verticale)
   Pattern per distribuzione scala 1-10 nei sondaggi, recuperi per mese,
   ecc. Ogni colonna ha count sopra, bar colorata, label sotto.
   ══════════════════════════════════════════════════════════════════ */

.crml-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--crml-space-1);
    height: 80px;
    margin: var(--crml-space-3) 0;
}
.crml-bar-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 2px;
}
.crml-bar-chart__count {
    font-size: 10px;
    color: var(--crml-color-fg-muted);
    line-height: 1;
}
.crml-bar-chart__bar {
    background: var(--crml-color-brand-500);
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height var(--crml-motion-base);
}
.crml-bar-chart__label {
    font-size: 10px;
    color: var(--crml-color-fg-muted);
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════════════
   23. PROGRESS BAR — .crml-progress (barra orizzontale percentuale)
   Usato per mostrare distribuzione risposte scelta multipla / si-no,
   caricamento, quote pagamento, ecc.
   ══════════════════════════════════════════════════════════════════ */

.crml-progress {
    background: var(--crml-color-bg-subtle);
    border-radius: var(--crml-radius-xs);
    height: 12px;
    overflow: hidden;
}
.crml-progress__bar {
    background: var(--crml-color-brand-500);
    height: 100%;
    border-radius: var(--crml-radius-xs);
    transition: width var(--crml-motion-base);
}
.crml-progress--success .crml-progress__bar { background: var(--crml-color-success); }
.crml-progress--warning .crml-progress__bar { background: var(--crml-color-warning); }
.crml-progress--danger  .crml-progress__bar { background: var(--crml-color-danger); }

.crml-progress-row {
    margin-bottom: var(--crml-space-2);
}
.crml-progress-row__head {
    display: flex;
    justify-content: space-between;
    font-size: var(--crml-text-sm);
    margin-bottom: 3px;
    color: var(--crml-color-fg-default);
}


/* ══════════════════════════════════════════════════════════════════
   24. QUOTE — .crml-quote (risposte testuali, testimonianze)
   ══════════════════════════════════════════════════════════════════ */

.crml-quote {
    background: var(--crml-color-bg-subtle);
    border-left: 3px solid var(--crml-color-brand-500);
    padding: var(--crml-space-2) var(--crml-space-3);
    margin: 0 0 var(--crml-space-2);
    border-radius: 0 var(--crml-radius-xs) var(--crml-radius-xs) 0;
    font-size: var(--crml-text-sm);
    color: var(--crml-color-fg-default);
}
.crml-quote-list {
    max-height: 200px;
    overflow-y: auto;
}


/* ══════════════════════════════════════════════════════════════════
   25. KPI VALUE BIG — numero grande (es. 8.2/10 media sondaggio)
   ══════════════════════════════════════════════════════════════════ */

.crml-kpi-value-big {
    font-size: var(--crml-text-2xl);
    font-weight: var(--crml-weight-bold);
    color: var(--crml-color-brand-500);
    line-height: 1.2;
    margin-bottom: var(--crml-space-3);
}


/* ══════════════════════════════════════════════════════════════════
   UTILITY (minimi — token-forward, max 20 classi totali)
   ══════════════════════════════════════════════════════════════════ */

.crml-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.crml-stack { display: flex; flex-direction: column; gap: var(--crml-space-3); }
.crml-inline { display: flex; align-items: center; gap: var(--crml-space-2); flex-wrap: wrap; }
.crml-spacer { flex: 1 1 auto; }
.crml-text-muted  { color: var(--crml-color-fg-muted); }
.crml-text-faint  { color: var(--crml-color-fg-faint); }
.crml-text-strong { color: var(--crml-color-fg-strong); font-weight: var(--crml-weight-semi); }
.crml-text-success { color: var(--crml-color-success); }
.crml-text-warning { color: var(--crml-color-warning); }
.crml-text-danger  { color: var(--crml-color-danger); }
.crml-text-info    { color: var(--crml-color-info); }
.crml-hint         { font-size: var(--crml-text-xs); color: var(--crml-color-fg-faint); }
.crml-mono         { font-family: var(--crml-font-mono); font-size: var(--crml-text-xs); }
.crml-nowrap       { white-space: nowrap; }
.crml-ellipsis     { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crml-td-right     { text-align: right; }
.crml-tab-body     { margin-top: var(--crml-space-4); }
.crml-input-full   { width: 100%; }
.crml-form-inline  { display: inline; }
.crml-check-inline { margin-right: var(--crml-space-3); }
.crml-pagination-center { margin-top: var(--crml-space-3); text-align: center; }


/* ══════════════════════════════════════════════════════════════════
   v3.8.0 — LOADING STATES (M3 design system extension)
   Aggiunge spinner CSS standalone + loading overlay full-area +
   skeleton compositi (card/row/list) + selettore data-stato per
   sostituire le 11 classi badge hardcoded per stati registro.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   17. SPINNER — .crml-spinner (CSS-only, no SVG)
   ───────────────────────────────────────────────────────────── */
.crml-spinner {
    display: inline-block;
    width: var(--crml-spinner-size-md);
    height: var(--crml-spinner-size-md);
    border: var(--crml-spinner-thickness) solid var(--crml-spinner-track);
    border-top-color: var(--crml-spinner-color);
    border-radius: 50%;
    animation: crml-spin var(--crml-spinner-duration) linear infinite;
    vertical-align: middle;
    box-sizing: border-box;
}
.crml-spinner--sm { width: var(--crml-spinner-size-sm); height: var(--crml-spinner-size-sm); border-width: 1.5px; }
.crml-spinner--lg { width: var(--crml-spinner-size-lg); height: var(--crml-spinner-size-lg); border-width: 3px; }

@keyframes crml-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   18. LOADING OVERLAY — .crml-loading-overlay
   Full-area cover con spinner centrato. Va su un parent con
   position:relative. Visibile via .is-loading o aria-busy="true".
   ───────────────────────────────────────────────────────────── */
.crml-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--crml-space-3);
    background: var(--crml-loading-overlay-bg);
    backdrop-filter: blur(var(--crml-loading-overlay-blur));
    -webkit-backdrop-filter: blur(var(--crml-loading-overlay-blur));
    z-index: var(--crml-z-overlay);
    border-radius: inherit;
    pointer-events: all;
}
.crml-loading-overlay__label {
    font-size: var(--crml-text-sm);
    color: var(--crml-color-fg-muted);
    font-weight: var(--crml-weight-medium);
}

/* Marker semantico aria-busy */
[aria-busy="true"].crml-loading-host {
    position: relative;
    pointer-events: none;
    user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   19. SKELETON — varianti composite (estensione v3.8.0)
   ───────────────────────────────────────────────────────────── */
.crml-skeleton-card {
    padding: var(--crml-space-4) var(--crml-space-6);
    border: 1px solid var(--crml-color-border-subtle);
    border-radius: var(--crml-radius-md);
    background: var(--crml-color-bg-surface);
    box-shadow: var(--crml-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--crml-space-3);
}
.crml-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--crml-space-3);
    padding: var(--crml-space-2) 0;
    border-bottom: 1px solid var(--crml-color-border-subtle);
}
.crml-skeleton-row:last-child { border-bottom: 0; }
.crml-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─────────────────────────────────────────────────────────────
   20. BADGE STATI REGISTRO via data-attribute (v3.8.0)
   Sostituisce le 11 classi hardcoded .crml-badge-{stato}.
   Markup: <span class="crml-badge" data-stato="PIANIFICATA">…</span>
   I colori vengono dai token --crml-stato-*-bg/-fg in _root.css.
   ───────────────────────────────────────────────────────────── */
.crml-badge[data-stato="PIANIFICATA"]      { background: var(--crml-stato-pianificata-bg); color: var(--crml-stato-pianificata-fg); }
.crml-badge[data-stato="DA_RECUPERARE"]    { background: var(--crml-stato-da-recuperare-bg); color: var(--crml-stato-da-recuperare-fg); }
.crml-badge[data-stato="PRESENTE"]         { background: var(--crml-stato-presente-bg); color: var(--crml-stato-presente-fg); }
.crml-badge[data-stato="RECUPERO"]         { background: var(--crml-stato-recupero-bg); color: var(--crml-stato-recupero-fg); }
.crml-badge[data-stato="ASSENTE"]          { background: var(--crml-stato-assente-bg); color: var(--crml-stato-assente-fg); }
.crml-badge[data-stato="ASSENZA_NR"]       { background: var(--crml-stato-assenza-nr-bg); color: var(--crml-stato-assenza-nr-fg); }
.crml-badge[data-stato="ASSENZA_MAESTRO"]  { background: var(--crml-stato-assenza-maestro-bg); color: var(--crml-stato-assenza-maestro-fg); }
.crml-badge[data-stato="SUPPLENZA"]        { background: var(--crml-stato-supplenza-bg); color: var(--crml-stato-supplenza-fg); }
.crml-badge[data-stato="ANNULLATA"]        { background: var(--crml-stato-annullata-bg); color: var(--crml-stato-annullata-fg); }

/* prefers-reduced-motion: disabilita rotazione/shimmer */
@media (prefers-reduced-motion: reduce) {
    .crml-spinner { animation: none; border-top-color: var(--crml-spinner-track); }
    .crml-skeleton { animation: none; background: var(--crml-skeleton-base); }
}


/* ══════════════════════════════════════════════════════════════════
   v3.8.1 — COMPONENT COMPOSITI (M4 design system extension)
   Pattern compositi (loading + empty + error) per i 3 componenti
   piu' complessi del CRM: tabelle, form, liste async.
   API: data-state="loading|empty|error|ready" su un container con
   classe .crml-table-state / .crml-form-state / .crml-async-list.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   21. TABLE STATE — .crml-table-state
   Wrapper che gestisce i 4 stati di una tabella: loading (rows
   skeleton), empty (wrapper crml-empty + CTA), error (alert
   + retry button), ready (mostra la <table> reale).
   Markup:
     <div class="crml-table-state" data-state="loading">
       <div class="crml-table-state__loading">  <-- skeleton -->
       <div class="crml-table-state__empty">    <-- empty inline -->
       <div class="crml-table-state__error">    <-- error alert -->
       <table class="crml-table">...</table>    <-- real table -->
     </div>
   ───────────────────────────────────────────────────────────── */
.crml-table-state {
    position: relative;
    display: block;
}
.crml-table-state__loading,
.crml-table-state__empty,
.crml-table-state__error {
    display: none;
}
.crml-table-state[data-state="loading"] > .crml-table-state__loading { display: block; }
.crml-table-state[data-state="loading"] > .crml-table { opacity: 0.4; pointer-events: none; }
.crml-table-state[data-state="empty"]   > .crml-table-state__empty   { display: block; }
.crml-table-state[data-state="empty"]   > .crml-table { display: none; }
.crml-table-state[data-state="error"]   > .crml-table-state__error   { display: block; }
.crml-table-state[data-state="error"]   > .crml-table { display: none; }
.crml-table-state[data-state="ready"]   > .crml-table { display: table; }

.crml-table-state__loading {
    padding: var(--crml-space-2) 0;
}
.crml-table-state__empty {
    padding: var(--crml-space-8) var(--crml-space-6);
    text-align: center;
}
.crml-table-state__error {
    padding: var(--crml-space-4) 0;
}


/* ─────────────────────────────────────────────────────────────
   22. FORM STATE — .crml-form-state
   Wrappa <form> con stati: idle (default), validating (overlay
   spinner durante validation client), submitting (overlay full
   + bottone loading), invalid (banner errori aggregato sopra),
   success (banner verde sopra + form blurrato).
   Markup:
     <form class="crml-form-state" data-state="idle">
       <div class="crml-form-state__banner">    <-- banner alert -->
       ... campi normali ...
       <div class="crml-form-state__overlay">   <-- overlay spinner -->
     </form>
   ───────────────────────────────────────────────────────────── */
.crml-form-state {
    position: relative;
    display: block;
}
.crml-form-state__overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--crml-space-3);
    background: var(--crml-loading-overlay-bg);
    backdrop-filter: blur(var(--crml-loading-overlay-blur));
    -webkit-backdrop-filter: blur(var(--crml-loading-overlay-blur));
    z-index: var(--crml-z-overlay);
    border-radius: inherit;
    pointer-events: all;
}
.crml-form-state[data-state="submitting"] > .crml-form-state__overlay,
.crml-form-state[data-state="validating"] > .crml-form-state__overlay {
    display: flex;
}
.crml-form-state[data-state="submitting"],
.crml-form-state[data-state="validating"] {
    pointer-events: none;
    user-select: none;
}
.crml-form-state[data-state="submitting"] *:not(.crml-form-state__overlay):not(.crml-form-state__overlay *) {
    pointer-events: none;
}
.crml-form-state__banner {
    display: none;
    margin-bottom: var(--crml-space-4);
}
.crml-form-state[data-state="invalid"] > .crml-form-state__banner,
.crml-form-state[data-state="success"] > .crml-form-state__banner,
.crml-form-state[data-state="error"]   > .crml-form-state__banner {
    display: block;
}

/* Banner stilizzati per ognuno degli stati feedback */
.crml-form-state[data-state="invalid"] > .crml-form-state__banner > .crml-alert {
    --_alert-bg: var(--crml-color-warning-bg);
    --_alert-fg: var(--crml-color-warning-fg);
}
.crml-form-state[data-state="success"] > .crml-form-state__banner > .crml-alert {
    --_alert-bg: var(--crml-color-success-bg);
    --_alert-fg: var(--crml-color-success-fg);
}
.crml-form-state[data-state="error"] > .crml-form-state__banner > .crml-alert {
    --_alert-bg: var(--crml-color-danger-bg);
    --_alert-fg: var(--crml-color-danger-fg);
}

/* Highlight campi invalidi: aggiungere data-invalid-fields="N" sul form */
.crml-form-state .crml-input[aria-invalid="true"],
.crml-form-state .crml-textarea[aria-invalid="true"],
.crml-form-state .crml-select[aria-invalid="true"] {
    border-color: var(--crml-color-danger);
    box-shadow: 0 0 0 3px var(--crml-color-danger-bg);
}


/* ─────────────────────────────────────────────────────────────
   23. ASYNC LIST — .crml-async-list
   Lista AJAX con 4 stati: loading (skeleton-list N rows),
   empty (crml-empty con CTA), error (alert con retry button),
   ready (mostra .crml-async-list__items).
   Markup:
     <div class="crml-async-list" data-state="loading"
          data-endpoint="..." data-skeleton-count="5">
       <div class="crml-async-list__loading">  <-- skeleton -->
       <div class="crml-async-list__empty">    <-- empty inline -->
       <div class="crml-async-list__error">    <-- error alert -->
       <ul class="crml-async-list__items">     <-- real items -->
     </div>
   ───────────────────────────────────────────────────────────── */
.crml-async-list {
    position: relative;
    display: block;
}
.crml-async-list__loading,
.crml-async-list__empty,
.crml-async-list__error,
.crml-async-list__items {
    display: none;
}
.crml-async-list[data-state="loading"] > .crml-async-list__loading { display: block; }
.crml-async-list[data-state="empty"]   > .crml-async-list__empty   { display: block; }
.crml-async-list[data-state="error"]   > .crml-async-list__error   { display: block; }
.crml-async-list[data-state="ready"]   > .crml-async-list__items   { display: block; }

.crml-async-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.crml-async-list__items > li {
    padding: var(--crml-space-3) 0;
    border-bottom: 1px solid var(--crml-color-border-subtle);
}
.crml-async-list__items > li:last-child { border-bottom: 0; }

/* Refresh-pending: mostrato quando i dati sono stale ma in cache */
.crml-async-list[data-refresh="pending"] > .crml-async-list__items {
    opacity: 0.7;
    transition: opacity var(--crml-motion-base);
}
.crml-async-list[data-refresh="pending"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--crml-color-brand-500) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: crml-async-refresh-bar 1.4s ease-in-out infinite;
    z-index: var(--crml-z-overlay);
}
@keyframes crml-async-refresh-bar {
    0%   { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .crml-async-list[data-refresh="pending"]::before { animation: none; opacity: 0.6; }
}

/* ============================================================
   v3.14.89 — WAVE 3 MOBILE CSS ext (components shared) scoped 360/390
   ------------------------------------------------------------
   Componenti shared: split, kv-list, checkcard, field-grid, bar-chart,
   color-swatch. Estende coverage 960/640 esistenti con scoped 360/390.
   ============================================================ */

/* MID-PHONE 381-410 — iPhone 12/13/14/15 */
@media (max-width: 410px) and (min-width: 381px) {
    .crml-checkcard-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--crml-space-2);
    }
    .crml-checkcard {
        padding: var(--crml-space-2);
    }
    .crml-checkcard__icon {
        font-size: 24px;
    }
    .crml-field-grid {
        grid-template-columns: 1fr;
    }
    .crml-bar-chart {
        height: 64px;
    }
}

/* ULTRA-NARROW 360 — Galaxy S20/S21 */
@media (max-width: 360px) {
    /* Split: single column forzato */
    .crml-split,
    .crml-split--wide,
    .crml-ass-kit-grid,
    .crml-ass-kit-grid--wide {
        grid-template-columns: 1fr;
        gap: var(--crml-space-2);
    }
    /* KV-list: compact font + flex-direction column su righe lunghe */
    .crml-kv {
        font-size: 12.5px;
    }
    .crml-kv__row {
        flex-wrap: wrap;
        gap: 2px;
    }
    .crml-kv__val {
        text-align: left;
        flex: 1 1 100%;
    }
    /* Checkcard: 2 col forzato */
    .crml-checkcard-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--crml-space-1);
    }
    .crml-checkcard {
        padding: 8px 6px;
        gap: 4px;
    }
    .crml-checkcard__icon {
        font-size: 22px;
    }
    .crml-checkcard__label {
        font-size: 11.5px;
    }
    /* Field-grid: 1 col + compact gap */
    .crml-field-grid,
    .crml-field-grid--two,
    .crml-field-grid--three {
        grid-template-columns: 1fr;
        gap: var(--crml-space-2);
    }
    /* Section label: font compact */
    .crml-section-label {
        font-size: 10.5px;
        letter-spacing: .3px;
    }
    /* Bar chart: altezza ridotta */
    .crml-bar-chart {
        height: 54px;
        gap: 1px;
    }
    .crml-bar-chart__count,
    .crml-bar-chart__label {
        font-size: 9px;
    }
    /* Color swatch: dim ridotto */
    .crml-color-swatch {
        width: 28px;
        height: 28px;
    }
    /* TD actions: wrap consentito su ultra-narrow */
    .crml-td-actions {
        flex-wrap: wrap;
        white-space: normal;
    }
}