/*
 * DBaaS Admin — Custom Pages Stylesheet
 * Applied to all Filament custom page Blade templates.
 * Notus React palette (Creative Tim) — lightBlue + blueGray (slate) + Archivo.
 * Migrated 2026-04-29 from TailAdmin (#465fff) → Notus (#0ea5e9).
 * Class names preserved (.adm-* unchanged) — only token values + shadow scale changed.
 *
 * ⚠️ .sr-only — de-emoji 2026-07-13.
 * Le icone SVG sono aria-hidden: il nome accessibile di un controllo icona-only lo porta una
 * <span class="sr-only">. MA il pannello admin NON carica il bundle Tailwind (nessun @vite in
 * AdminPanelProvider): carica solo filament/app.css (che definisce .fi-sr-only, non .sr-only),
 * filament-tailadmin.css e QUESTO file. Senza la regola qui sotto quelle span sarebbero TESTO
 * VISIBILE (bottoni "▪▫▫ Allinea bordo sinistro", badge "✓Attivo"). Non rimuovere.
 */

/* Screen-reader-only: visibile solo agli assistive tech (vedi nota in testa al file). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* .adm-isola-chiara: riquadro che resta chiaro anche nel tema scuro (anteprime di stampa, editor su fondo
   bianco). Ridichiara la scala chiara sull'elemento stesso, cosi' vince sui valori .dark ereditati. */
:root, .adm-isola-chiara {
    /* Notus lightBlue (sky) primary scale */
    --adm-brand:      #0ea5e9;  /* lightBlue-500 */
    --adm-brand-600:  #0284c7;  /* lightBlue-600 hover/active */
    /* Notus blueGray (Tailwind slate) neutral scale */
    --adm-gray-50:    #f8fafc;
    --adm-gray-100:   #f1f5f9;  /* card surface */
    --adm-gray-200:   #e2e8f0;  /* border */
    --adm-gray-300:   #cbd5e1;
    --adm-gray-500:   #64748b;
    --adm-gray-600:   #475569;
    --adm-gray-700:   #334155;
    --adm-gray-800:   #1e293b;
    --adm-gray-900:   #0f172a;
    --adm-gray-dark:  #0f172a;
    /* Status colors — Notus standard (emerald/red/amber/indigo/purple) */
    --adm-green:      #10b981;  /* emerald-500 */
    --adm-red:        #ef4444;  /* red-500 */
    --adm-yellow:     #f59e0b;  /* amber-500 */
    --adm-cyan:       #6366f1;  /* indigo-500 (Notus uses indigo for info) */
    --adm-purple:     #a855f7;  /* purple-500 */
    /* ── Colori semantici per il TESTO ────────────────────────────────────────
       I cinque token qui sopra sono pensati per RIEMPIRE (pastiglie, sfondi,
       icone piene): come colore di testo falliscono tutti WCAG AA sul fondo
       chiaro — misurati il 2026-09-12 su #f1f5f9: verde 2,32 · rosso 3,44 ·
       ambra 1,96 · indaco 4,08 · viola 3,61, contro i 4,5 richiesti. E nel tema
       scuro non sono nemmeno ridefiniti.
       Questi `-text` esistono per quello, e NON sostituiscono i precedenti: chi
       disegna una pastiglia continua a usare `--adm-red`, chi scrive un messaggio
       d'errore usa `--adm-red-text`. Testo e riempimento hanno bisogni di
       contrasto opposti, e un token solo non puo' servirli entrambi.
       Rapporti misurati (chiaro su #f1f5f9 · scuro su #1c1c1e):
         rosso  6,00 · 8,96    verde 6,51 · 11,16    ambra 6,47 · 11,80
         blu    5,42 · 10,21   viola 7,96 ·  9,63                            */
    --adm-red-text:    #b42318;
    --adm-green-text:  #166534;
    --adm-amber-text:  #92400e;
    --adm-blue-text:   #0369a1;
    --adm-purple-text: #6b21a8;
    /* Phase D T5b — generic UI-card surface for blade inline background:#fff.
       Light = white (unchanged); dark value set in the .dark block below.
       Paper/print/preview canvases (badge/PDF/QR/mediakit/poster/map) keep raw #fff. */
    --adm-surface:    #ffffff;
    /* Notus shadow tokens */
    --adm-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --adm-shadow:     0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --adm-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}

/* Phase D — dark values for the --adm-* scale (flips custom-page cards/tables/text). */
.dark {
    --adm-gray-50:    #1e1e20;
    --adm-gray-100:   #2c2c2e;  /* card surface */
    --adm-gray-200:   rgba(255,255,255,0.10);  /* border */
    --adm-gray-300:   rgba(255,255,255,0.16);
    --adm-gray-500:   #aeaeb2;
    --adm-gray-600:   #c7c7cc;
    --adm-gray-700:   #e5e5ea;
    --adm-gray-800:   #f0f0f2;
    --adm-gray-900:   #f5f5f7;
    --adm-gray-dark:  #1c1c1e;
    /* Phase D T5 — dark values for the shared _hero partial + inline code bg
       (those use var(--token, lightFallback): light unchanged, dark flips). */
    --adm-hero-bg:    #2c2c2e;
    --adm-hero-bd:    rgba(255,255,255,0.10);
    --adm-hero-ttl:   #38bdf8;
    --adm-hero-sub:   #aeaeb2;
    --adm-color-bg-alt: #2c2c2e;
    --adm-surface:    #2c2c2e;
    /* Phase D T5c — light info-banner/hero tints (#f1f5f9/#f0f9ff/#bae6fd) +
       deep-sky banner ink (#0369a1/#0c4a6e) flip in dark. Defined ONLY here, so
       blade `var(--adm-tint-*, lightLiteral)` keeps light byte-identical. */
    --adm-tint-bg-dark: #2c2c2e;
    --adm-tint-bd-dark: rgba(255,255,255,0.12);
    --adm-ink-dark:     #7cc2fd;
    /* Le controparti chiare dei `-text`: stessa famiglia, luminosita' opposta.
       Senza queste il tema scuro erediterebbe i valori chiari, che su #1c1c1e
       stanno fra 1,5 e 3 — cioe' il difetto di partenza, spostato. */
    --adm-red-text:    #fca5a5;
    --adm-green-text:  #6ee7b7;
    --adm-amber-text:  #fcd34d;
    --adm-blue-text:   #7dd3fc;
    --adm-purple-text: #d8b4fe;
}
.dark .adm-isola-chiara {
    color-scheme: light; color: #0f172a;
    /* i -dark senza valore chiaro: initial = non validi → var(--x, ripiego) usa il ripiego chiaro */
    --adm-tint-bg-dark: initial; --adm-tint-bd-dark: initial; --adm-ink-dark: initial;
    --adm-hero-bg: initial; --adm-hero-bd: initial; --adm-hero-ttl: initial; --adm-hero-sub: initial; --adm-color-bg-alt: initial;
}
.adm-isola-chiara ::placeholder { color: #64748b; opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CARDS & SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-card {
    background: var(--adm-gray-100);
    border-radius: 0.5rem;
    box-shadow: var(--adm-shadow-lg);
    border: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    font-family: 'Archivo', system-ui, sans-serif;
}

.adm-card-pad { padding: 1.5rem; }
.adm-card-compact { padding: 1rem 1.5rem; }

.adm-card-header {
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.adm-card-header h3,
.adm-card-header .adm-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--adm-gray-900);
    margin: 0;
    font-family: 'Archivo', sans-serif;
}

.adm-card-body { padding: 1.5rem; }
.adm-card-flush { padding: 0; }

/* Empty state */
.adm-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--adm-gray-500);
    font-size: 0.875rem;
}

.adm-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-h2 { font-size: 1.125rem; font-weight: 700; color: var(--adm-gray-900); margin: 0 0 0.25rem; font-family: 'Archivo', sans-serif; }
.adm-h3 { font-size: 0.875rem; font-weight: 700; color: var(--adm-gray-900); margin: 0; font-family: 'Archivo', sans-serif; }
.adm-h4 { font-size: 0.75rem; font-weight: 600; color: var(--adm-gray-600); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; font-family: 'Archivo', sans-serif; }
.adm-text { font-size: 0.875rem; color: var(--adm-gray-900); }
.adm-text-sm { font-size: 0.8125rem; color: var(--adm-gray-600); }
.adm-text-xs { font-size: 0.75rem; color: var(--adm-gray-500); }
.adm-text-muted { color: var(--adm-gray-600); }
.adm-text-bold { font-weight: 600; }
.adm-mono { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR (edition selector, language toggle, action buttons)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.adm-toolbar-spacer { flex: 1; }

.adm-toolbar label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adm-gray-700);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS (select, input, toggle)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 8px;
    border: 1px solid var(--adm-gray-200);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 12px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--adm-gray-900);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: 'Archivo', sans-serif;
}

.adm-select:focus {
    border-color: var(--adm-brand);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.adm-input {
    border-radius: 0.25rem;
    border: 1px solid var(--adm-gray-300);
    background: #fff;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--adm-gray-700);
    outline: none;
    font-family: 'Archivo', sans-serif;
    box-shadow: var(--adm-shadow-sm);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.adm-input::placeholder { color: var(--adm-gray-300); }

.adm-input:focus {
    border-color: var(--adm-brand);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Toggle button group */
.adm-toggle-group {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--adm-gray-200);
}

.adm-toggle-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Archivo', sans-serif;
    background: #fff;
    color: var(--adm-gray-700);
}

.adm-toggle-btn:hover { background: var(--adm-gray-100); }

.adm-toggle-btn.active,
.adm-toggle-btn[data-active="true"] {
    background: var(--adm-brand);
    color: #fff;
    box-shadow: var(--adm-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Notus button: bold UPPERCASE, rounded, shadow, hover-shadow-md, ease-linear transition */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow 0.15s ease-linear, background-color 0.15s ease-linear, transform 0.15s ease-linear;
    font-family: 'Archivo', sans-serif;
    text-decoration: none;
    line-height: 1.25;
    box-shadow: var(--adm-shadow-sm);
}

.adm-btn:hover { box-shadow: var(--adm-shadow); }
.adm-btn:active { transform: translateY(1px); }
.adm-btn:focus-visible { outline: 2px solid var(--adm-brand); outline-offset: 2px; }
.adm-btn:disabled, .adm-btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.adm-btn-default { background: #fff; color: var(--adm-gray-700); border-color: var(--adm-gray-200); }
.adm-btn-default:hover { background: var(--adm-gray-100); border-color: var(--adm-gray-300); }

.adm-btn-primary { background: var(--adm-brand); color: #fff !important; }
.adm-btn-primary:hover { background: var(--adm-brand-600); color: #fff !important; }
a.adm-btn-primary { color: #fff !important; text-decoration: none; }

.adm-btn-success { background: var(--adm-green); color: #fff !important; }
.adm-btn-success:hover { background: #059669; }

.adm-btn-danger { background: var(--adm-red); color: #fff !important; }
.adm-btn-danger:hover { background: #dc2626; }

.adm-btn-ghost { background: transparent; color: var(--adm-brand); border-color: transparent; box-shadow: none; }
.adm-btn-ghost:hover { background: var(--adm-gray-100); box-shadow: none; }

.adm-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.6875rem; }
.adm-btn-icon { padding: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    font-family: 'Archivo', sans-serif;
}

.adm-table thead { background: var(--adm-gray-50); }

.adm-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-gray-600);
    border-bottom: 1px solid var(--adm-gray-200);
}

.adm-table td {
    padding: 0.75rem 1rem;
    color: var(--adm-gray-900);
    border-bottom: 1px solid var(--adm-gray-100);
    vertical-align: top;
}

.adm-table tbody tr:hover td { background: var(--adm-gray-50); }
.adm-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: 'Archivo', sans-serif;
}

.adm-badge-blue   { background: color-mix(in srgb, var(--adm-brand) 12%, #fff);  color: var(--adm-brand); }
.adm-badge-green  { background: color-mix(in srgb, var(--adm-green) 15%, #fff);  color: var(--adm-green); }
.adm-badge-red    { background: color-mix(in srgb, var(--adm-red) 12%, #fff);    color: var(--adm-red); }
.adm-badge-yellow { background: color-mix(in srgb, var(--adm-yellow) 15%, #fff); color: var(--adm-yellow); }
.adm-badge-purple { background: color-mix(in srgb, var(--adm-purple) 12%, #fff); color: var(--adm-purple); }
.adm-badge-cyan   { background: color-mix(in srgb, var(--adm-cyan) 12%, #fff);   color: var(--adm-cyan); }
.adm-badge-gray   { background: var(--adm-gray-100); color: var(--adm-gray-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   STAT CARDS (dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.adm-stat {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,0.05);
    border: 1px solid var(--adm-gray-200);
    padding: 1.25rem;
    font-family: 'Archivo', sans-serif;
}

.adm-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--adm-gray-900);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.adm-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--adm-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.adm-stat-sub {
    font-size: 0.75rem;
    color: var(--adm-gray-600);
    margin-top: 0.25rem;
}

/* Color variants (border-top + label accent) */
.adm-stat-blue   { border-top-color: var(--adm-brand); }
.adm-stat-green  { border-top-color: var(--adm-green); }
.adm-stat-red    { border-top-color: var(--adm-red); }
.adm-stat-yellow { border-top-color: var(--adm-yellow); }
.adm-stat-cyan   { border-top-color: var(--adm-cyan); }
.adm-stat-purple { border-top-color: var(--adm-purple); }

/* ═══════════════════════════════════════════════════════════════════════════
   CODE BLOCKS (logs, app builder)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-code {
    background: var(--adm-gray-900);
    color: var(--adm-green);
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.adm-code-editor {
    background: var(--adm-gray-900);
    color: var(--adm-gray-100);
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 1rem;
    border-radius: 0 0 8px 8px;
    border: none;
    width: 100%;
    resize: vertical;
    min-height: 200px;
    outline: none;
}

.adm-code-header {
    background: var(--adm-gray-800);
    color: var(--adm-cyan);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMME GRID (synoptic timetable)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-programme-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.adm-programme-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 600px;
    font-family: 'Archivo', sans-serif;
}

.adm-programme-table th {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--adm-brand);
    border: 1px solid var(--adm-brand-600);
    position: sticky;
    top: 0;
    z-index: 2;
}

.adm-programme-table th:first-child {
    background: var(--adm-gray-800);
    text-align: right;
    width: 70px;
    position: sticky;
    left: 0;
    z-index: 3;
}

.adm-programme-table td {
    border: 1px solid var(--adm-gray-200);
    padding: 0;
    vertical-align: top;
    position: relative;
    min-height: 30px;
    height: 30px;
}

.adm-programme-table td:first-child {
    background: var(--adm-gray-100);
    color: var(--adm-gray-700);
    font-weight: 600;
    font-size: 0.75rem;
    text-align: right;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}

.adm-programme-session {
    display: block;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    margin: 2px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    height: calc(100% - 4px);
}

.adm-programme-session:hover {
    opacity: 0.85;
    text-decoration: none;
    color: #fff;
}

.adm-programme-session-title {
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-programme-session-time {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.adm-programme-day-header {
    background: var(--adm-brand);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 8px 8px 0 0;
    margin-top: 1.5rem;
    font-family: 'Archivo', sans-serif;
}

.adm-programme-day-header:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION BUILDER (drag & drop)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-session-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--adm-gray-100);
    transition: background 0.15s;
}

.adm-session-item:hover { background: var(--adm-gray-50); }
.adm-session-item:last-child { border-bottom: none; }

.adm-session-time {
    flex-shrink: 0;
    width: 4.5rem;
    text-align: center;
}

.adm-session-time-main {
    font-size: 0.875rem;
    font-weight: 700;
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--adm-gray-900);
}

.adm-session-time-end {
    font-size: 0.75rem;
    color: var(--adm-gray-500);
}

.adm-session-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--adm-brand);
}

.adm-session-content { flex: 1; min-width: 0; }

.adm-session-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--adm-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Archivo', sans-serif;
}

/* Drag handle */
.adm-drag-handle {
    cursor: grab;
    color: var(--adm-gray-300);
    padding: 0.25rem;
}

.adm-drag-handle:active { cursor: grabbing; }

/* Drop zone */
.adm-drop-zone {
    min-height: 48px;
    border: 2px dashed var(--adm-gray-200);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-gray-500);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.adm-drop-zone.active {
    border-color: var(--adm-brand);
    background: color-mix(in srgb, var(--adm-brand) 5%, transparent);
}

/* Abstract chip (draggable) */
.adm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: grab;
    user-select: none;
    transition: all 0.15s;
    font-family: 'Archivo', sans-serif;
}

.adm-chip:active { cursor: grabbing; }
.adm-chip-blue { background: color-mix(in srgb, var(--adm-brand) 10%, #fff); color: var(--adm-brand); }
.adm-chip-blue:hover { background: color-mix(in srgb, var(--adm-brand) 20%, #fff); }

/* ═══════════════════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.adm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.adm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 768px) {
    .adm-grid-2, .adm-grid-3, .adm-grid-4 { grid-template-columns: 1fr; }
    .adm-toolbar { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLEX UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-flex { display: flex; }
.adm-flex-wrap { flex-wrap: wrap; }
.adm-flex-col { flex-direction: column; }
.adm-items-center { align-items: center; }
.adm-justify-between { justify-content: space-between; }
.adm-gap-1 { gap: 0.25rem; }
.adm-gap-2 { gap: 0.5rem; }
.adm-gap-3 { gap: 0.75rem; }
.adm-gap-4 { gap: 1rem; }
.adm-gap-6 { gap: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPACING
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-mb-2 { margin-bottom: 0.5rem; }
.adm-mb-3 { margin-bottom: 0.75rem; }
.adm-mb-4 { margin-bottom: 1rem; }
.adm-mb-6 { margin-bottom: 1.5rem; }
.adm-mt-2 { margin-top: 0.5rem; }
.adm-mt-4 { margin-top: 1rem; }
.adm-p-0 { padding: 0; }
.adm-p-4 { padding: 1rem; }
.adm-p-6 { padding: 1.5rem; }
.adm-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.adm-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK LINKS (dashboard ops)
   ═══════════════════════════════════════════════════════════════════════════ */

.adm-quick-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--adm-gray-200);
    text-decoration: none;
    color: var(--adm-gray-900);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s;
    font-family: 'Archivo', sans-serif;
}

.adm-quick-link:hover {
    border-color: var(--adm-brand);
    background: color-mix(in srgb, var(--adm-brand) 6%, #fff);
    color: var(--adm-brand);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE (Filament dark toggle)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phase D T5 — these overrides predate the inverted --adm-* scale (gray-700/800
   are now LIGHT, gray-300 is now an rgba border). Surfaces use dark tokens
   (gray-dark/gray-100), borders gray-200, muted text gray-500, hover a subtle
   white overlay. */
.dark .adm-card { background: var(--adm-gray-dark); border-color: var(--adm-gray-200); }
.dark .adm-card-header { background: var(--adm-gray-100); border-color: var(--adm-gray-200); }
.dark .adm-card-header h3, .dark .adm-card-header .adm-title { color: #fff; }
.dark .adm-h2, .dark .adm-h3, .dark .adm-text, .dark .adm-session-title { color: #fff; }
.dark .adm-text-sm, .dark .adm-text-muted { color: var(--adm-gray-500); }
.dark .adm-select { background-color: var(--adm-gray-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); color: #fff; border-color: var(--adm-gray-200); }
.dark .adm-input { background-color: var(--adm-gray-100); color: #fff; border-color: var(--adm-gray-200); }
.dark .adm-input::placeholder { color: var(--adm-gray-500); }
.dark .adm-toggle-group { border-color: var(--adm-gray-200); }
.dark .adm-toggle-btn { background: var(--adm-gray-100); color: var(--adm-gray-500); }
.dark .adm-toggle-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dark .adm-toggle-btn.active { background: var(--adm-brand); color: #fff; }
.dark .adm-btn-default { background: var(--adm-gray-100); color: #fff; border-color: var(--adm-gray-200); }
.dark .adm-btn-default:hover { background: rgba(255,255,255,0.06); }
.dark .adm-table thead { background: var(--adm-gray-100); }
.dark .adm-table th { color: var(--adm-gray-500); border-color: var(--adm-gray-200); }
.dark .adm-table td { color: #fff; border-color: var(--adm-gray-200); }
.dark .adm-table tbody tr:hover td { background: rgba(255,255,255,0.04); }
.dark .adm-stat { background: var(--adm-gray-dark); border-color: var(--adm-gray-200); }
.dark .adm-stat-value { color: #fff; }
.dark .adm-session-item:hover { background: rgba(255,255,255,0.04); }
.dark .adm-quick-link { background: var(--adm-gray-dark); border-color: var(--adm-gray-200); color: var(--adm-gray-700); }
.dark .adm-quick-link:hover { border-color: var(--adm-brand); color: #fff; background: rgba(255,255,255,0.04); }
.dark .adm-programme-table td:first-child { background: var(--adm-gray-100); color: var(--adm-gray-500); }
.dark .adm-drop-zone { border-color: var(--adm-gray-200); color: var(--adm-gray-500); }
.dark .adm-session-time-main { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   Tailwind utility fallback per icone heroicon inline (w-4 h-4, ecc).
   Filament admin non include tutte le Tailwind utilities nel bundle CSS
   → senza queste regole, <x-heroicon-o-calendar class="w-4 h-4"> render
   l'SVG al 100% del parent container (visibile bug su Dashboard: icone
   da 740px). Fix: dimensioni esplicite per le classi più usate.
   ═══════════════════════════════════════════════════════════════════ */
svg.w-3, .w-3 svg { width: 0.75rem; }
svg.w-4, .w-4 svg { width: 1rem; }
svg.w-5, .w-5 svg { width: 1.25rem; }
svg.w-6, .w-6 svg { width: 1.5rem; }
svg.w-7, .w-7 svg { width: 1.75rem; }
svg.w-8, .w-8 svg { width: 2rem; }
svg.w-10, .w-10 svg { width: 2.5rem; }
svg.w-12, .w-12 svg { width: 3rem; }
svg.h-3, .h-3 svg { height: 0.75rem; }
svg.h-4, .h-4 svg { height: 1rem; }
svg.h-5, .h-5 svg { height: 1.25rem; }
svg.h-6, .h-6 svg { height: 1.5rem; }
svg.h-7, .h-7 svg { height: 1.75rem; }
svg.h-8, .h-8 svg { height: 2rem; }
svg.h-10, .h-10 svg { height: 2.5rem; }
svg.h-12, .h-12 svg { height: 3rem; }
svg.inline, .inline svg { display: inline; }

/* Notification badge nav (es. Messaggi Aziende): ROSSO pieno + numero bianco, non subtle. */
.fi-sidebar .fi-badge,
.fi-sidebar-item .fi-badge {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}
.fi-sidebar .fi-badge .fi-badge-label { color: #ffffff !important; }

/* Card-radio (pagina Zoom): colori dal tema, e l'evidenza segue il radio SCELTO (:has), non il
   valore salvato — prima bianco su bianco in modo scuro (accessibility-lead, 2026-09-18). */
.adm-choice { cursor:pointer; display:block; padding:1rem 1.2rem; border:2px solid var(--adm-gray-200); border-radius:10px; background:var(--v1-bg-card); }
.adm-choice:has(input:checked) { border-color:#da094d; background:rgba(218,9,77,0.05); }
.adm-choice:has(input:focus-visible) { outline:2px solid #da094d; outline-offset:2px; }

/* Scelta a pillola a radio nativi (Badge Designer, anteprima Partecipante/Staff — scheda 5-B,
   accessibility-lead 2026-09-23). Lo stato scelto si vede da riempimento, peso e spunta, non dal
   solo colore; il radio è .sr-only ma il fuoco si vede sulla pillola. Non riusare .adm-choice col
   radio nascosto: il suo bordo scelto (#da094d) è 2,74:1 sul riempimento in modo scuro. */
.adm-seg { display:inline-flex; gap:.25rem; padding:.2rem; border:1px solid var(--adm-gray-500); border-radius:999px; background:var(--adm-surface); }
.adm-seg label { display:inline-flex; align-items:center; gap:.35rem; min-height:32px; padding:.3rem .9rem; border:2px solid transparent; border-radius:999px; cursor:pointer; color:var(--adm-gray-700); font-weight:500; }
.adm-seg label:has(input:checked) { background:var(--adm-blue-text); color:var(--adm-surface); font-weight:700; }
.adm-seg label:has(input:focus-visible) { outline:2px solid var(--adm-blue-text); outline-offset:2px; }
.adm-seg .adm-seg-check { display:none; }
.adm-seg label:has(input:checked) .adm-seg-check { display:inline-block; }
@media (forced-colors: active) { .adm-seg label:has(input:checked) { border-color:Highlight; } }

/* FilePond: il primo tab stop è un input a opacità 0 (ed è il fuoco automatico della modale
   «Cambia sfondo»): senza questa regola il fuoco non si vede. */
.fi-fo-file-upload .filepond--root:has(.filepond--browser:focus-visible) .filepond--drop-label { outline:2px solid var(--adm-blue-text); outline-offset:-4px; border-radius:8px; }