/* Filament admin — TailAdmin skin con sezioni pastello + Archivo font.
   Loaded via AdminPanelProvider renderHook HEAD_END. */
/* I caratteri arrivano dal NOSTRO dominio: il foglio lo scrive `php artisan fonts:warm` (passo di DEPLOY).
   Se manca, questo @import prende un 404 e la pagina rende in font di sistema. */
@import url('/storage/webfonts/dm-sans.css');

:root {
    /* Notus React palette — migrated 2026-04-29 from TailAdmin (#465fff). */
    --ta-brand:        var(--v1-accent);        /* Phase D: remapped to V1 sky */
    --ta-brand-600:    var(--v1-accent-hover);
    --ta-brand-pastel: var(--v1-accent-bg);
    --ta-gray-50:      #f8fafc;  /* slate-50 */
    --ta-gray-100:     #f1f5f9;  /* slate-100 */
    --ta-gray-200:     #e2e8f0;  /* slate-200 */
    --ta-gray-300:     #cbd5e1;  /* slate-300 */
    --ta-gray-500:     #64748b;  /* slate-500 */
    --ta-gray-600:     #475569;  /* slate-600 */
    --ta-gray-700:     #334155;  /* slate-700 */
    --ta-gray-800:     #1e293b;  /* slate-800 */
    --ta-gray-900:     #0f172a;  /* slate-900 */
    --ta-gray-dark:    #0f172a;

    /* Sidebar section palette — Notus accent colors (Tailwind 500 scale) */
    --sec-1:  #0ea5e9;  /* lightBlue */
    --sec-2:  #10b981;  /* emerald */
    --sec-3:  #f59e0b;  /* amber */
    --sec-4:  #ef4444;  /* red */
    --sec-5:  #6366f1;  /* indigo */
    --sec-6:  #14b8a6;  /* teal */
    --sec-7:  #a855f7;  /* purple */
    --sec-8:  #ec4899;  /* pink */
    --sec-9:  #f97316;  /* orange */
    --sec-10: #0369a1;  /* lightBlue-700 darker */
    --sec-11: #334155;  /* slate-700 */
    --sec-12: #f43f5e;  /* rose */
    --sec-13: #64748b;  /* slate-500 */
    --sec-14: #8b5cf6;  /* violet */

    /* ── V1 "Cupertino Light" design tokens (Phase D 2026-06-23) ── */
    --v1-bg-primary:    #f5f5f7;
    --v1-bg-secondary:  #fbfbfd;
    --v1-bg-card:       #ffffff;
    --v1-bg-sidebar:    #ffffff;
    --v1-border:        rgba(0,0,0,0.08);
    --v1-border-strong: rgba(0,0,0,0.13);
    --v1-text-primary:  #1d1d1f;
    --v1-text-secondary:#6e6e73;
    --v1-text-tertiary: #aeaeb2;
    --v1-accent:        #0071e3;
    --v1-accent-hover:  #0077ed;
    --v1-accent-bg:     rgba(0,113,227,0.08);
    --v1-accent-bg-strong: rgba(0,113,227,0.14);
    --v1-green:         #28a745;
    --v1-green-bg:      rgba(40,167,69,0.09);
    --v1-amber:         #f59e0b;
    --v1-amber-bg:      rgba(245,158,11,0.09);
    --v1-red:           #dc3545;
    --v1-red-bg:        rgba(220,53,69,0.09);
    --v1-gray-50:       #f9f9fb;
    --v1-gray-100:      #f2f2f5;
    --v1-shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --v1-shadow-md:     0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --v1-radius-sm:     8px;
    --v1-radius-md:     12px;
    --v1-radius-lg:     16px;
}

/* V1 dark token values (class .dark on <html>, already used by this theme) */
.dark {
    --v1-bg-primary:    #1c1c1e;
    --v1-bg-secondary:  #111111;
    --v1-bg-card:       #2c2c2e;
    --v1-bg-sidebar:    #242426;
    --v1-border:        rgba(255,255,255,0.09);
    --v1-border-strong: rgba(255,255,255,0.14);
    --v1-text-primary:  #f5f5f7;
    --v1-text-secondary:#aeaeb2;
    --v1-text-tertiary: #636366;
    --v1-accent:        #0a84ff;
    --v1-accent-hover:  #1a8fff;
    --v1-accent-bg:     rgba(10,132,255,0.15);
    --v1-accent-bg-strong: rgba(10,132,255,0.22);
    --v1-green:         #30d158;
    --v1-green-bg:      rgba(48,209,88,0.12);
    --v1-amber:         #ffd60a;
    --v1-amber-bg:      rgba(255,214,10,0.10);
    --v1-red:           #ff453a;
    --v1-red-bg:        rgba(255,69,58,0.12);
    --v1-gray-50:       #1e1e20;
    --v1-gray-100:      #2a2a2c;
    --v1-shadow-sm:     0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --v1-shadow-md:     0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   FONT ARCHIVO ovunque
   ═══════════════════════════════════════════════════════════════════════ */
body.fi-body,
body.fi-body *:not(i):not(svg):not(path),
.fi-main, .fi-topbar, .fi-sidebar,
.fi-btn, .fi-input, .fi-header-heading,
.fi-sidebar-nav, .fi-sidebar-item,
.fi-section, .fi-ta-ctn {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

.fi-btn-color-primary { background: var(--ta-brand) !important; }
.fi-btn-color-primary:hover { background: var(--ta-brand-600) !important; }
.fi-link-color-primary { color: var(--ta-brand) !important; }

.fi-sidebar { background: var(--v1-bg-sidebar) !important; border-right: 1px solid var(--v1-border) !important; }
.dark .fi-sidebar { background: var(--v1-bg-sidebar) !important; border-right-color: var(--v1-border) !important; }

/* ── V1 shell (Phase D): canvas + liquid-glass topbar ── */
body.fi-body, .fi-main { background: var(--v1-bg-primary) !important; }
.fi-topbar {
    background: rgba(255,255,255,0.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--v1-border) !important;
    box-shadow: none !important;
}
.dark .fi-topbar { background: rgba(28,28,30,0.72) !important; border-bottom-color: var(--v1-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   GRUPPI SIDEBAR — Notus native (Creative Tim) — clean flat, no gradient.
   Migrated 2026-04-29 PM da gradient orizzontale a stile Notus minimal.
   ═══════════════════════════════════════════════════════════════════════ */
/* Override Filament default gap (28px) to exact 12px */
.fi-sidebar-nav-groups,
.fi-sidebar-nav ul {
    gap: 12px !important;
    row-gap: 12px !important;
}

.fi-sidebar-nav .fi-sidebar-group {
    --accent: var(--v1-accent);
    position: relative;
    margin: 0 0.5rem;
    padding: 0.2rem;
    background: transparent;
    border-left: 0;
    border-radius: var(--v1-radius-md);
}
.dark .fi-sidebar-nav .fi-sidebar-group {
    background: transparent;
}

/* Section separators — hairline between sidebar groups (V1 preview look, Matteo).
   Groups are li.fi-sidebar-group inside ul.fi-sidebar-nav-groups. */
.fi-sidebar-nav-groups > li.fi-sidebar-group {
    border-bottom: 1px solid var(--v1-border);
    border-radius: 0;
    margin-bottom: 0.4rem;
    padding-bottom: 0.5rem;
}
.fi-sidebar-nav-groups > li.fi-sidebar-group:last-child {
    border-bottom: none;
}

/* ── Per-group icons keyed by data-group-label (Filament renders that attr on
   each group). ROBUST: immune to group reorder / area-switch / new groups —
   the previous nth-child approach drifted when VALET + Impostazioni were
   inserted, shifting every icon onto the wrong group. Phase D T6. */
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Gestione Globale"] { --accent: var(--sec-1); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Utenti & Accessi"] { --accent: var(--sec-2); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Congressi"] { --accent: var(--sec-3); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="VALET Training Center"] { --accent: var(--sec-9); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.1 2.7 2.5 6 2.5s6-1.4 6-2.5v-5'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Config Congresso"] { --accent: var(--sec-4); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Mappa"] { --accent: var(--sec-13); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z'/%3E%3Cpath d='M9 3v16M15 5v16'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Badge"] { --accent: var(--sec-5); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M5 17c.5-1.5 2-2.5 4-2.5s3.5 1 4 2.5M14 9h4M14 13h4'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Iscrizioni"] { --accent: var(--sec-6); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='18' rx='2'/%3E%3Cpath d='M9 4V2h6v2M9 12l2 2 4-4M9 18h6'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Sponsorizzazioni"] { --accent: var(--sec-14); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M5 11.5V21h14v-9.5'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Aziende"] { --accent: var(--sec-7); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M8 7h2M8 11h2M8 15h2M14 7h2M14 11h2M14 15h2M10 21v-3h4v3'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="App & Webapp"] { --accent: var(--sec-8); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Comunicazione"] { --accent: var(--sec-9); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Media"] { --accent: var(--sec-10); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Associazione"] { --accent: var(--sec-12); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Statistiche & Report"] { --accent: var(--sec-11); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3Cline x1='3' y1='20' x2='21' y2='20'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Impostazioni"] { --accent: var(--sec-5); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E"); }
.fi-sidebar-nav .fi-sidebar-group[data-group-label="Sistema"] { --accent: var(--sec-11); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER (titolo gruppo) — Notus native: piccolo uppercase grigio + icona inline.
   Stile Creative Tim Notus React: muted blueGray-500, font-size 11px,
   icona SVG via mask color-mixed con --accent (così resta colorato).
   ═══════════════════════════════════════════════════════════════════════ */
.fi-sidebar-group-label,
.fi-sidebar-group > button,
.fi-sidebar-group header {
    background: transparent !important;
    color: var(--v1-text-secondary) !important;   /* was tertiary — too faint at the larger size */
    font-weight: 700 !important;
    font-size: 14px !important;                    /* was 12px — group titles now larger than the 13px items (Matteo) */
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    border-radius: var(--v1-radius-sm) !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.dark .fi-sidebar-group-label,
.dark .fi-sidebar-group > button,
.dark .fi-sidebar-group header {
    color: var(--v1-text-secondary) !important;   /* was tertiary — group titles readable at the larger size */
    background: transparent !important;
}

/* Icona inline accanto al titolo via mask-image (SVG colorata = --accent) */
.fi-sidebar-group-label::before,
.fi-sidebar-group > button::before,
.fi-sidebar-group header::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask-image: var(--icon, none);
            mask-image: var(--icon, none);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
/* No icon for top-level (nth-child(1)) ungrouped wrapper */
.fi-sidebar-nav > li:nth-child(1) .fi-sidebar-group-label::before { content: none; }

/* ═══════════════════════════════════════════════════════════════════════
   MENU ITEMS — Notus native: hover/active solo lightBlue, no group color.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-sidebar-item { margin: 0 !important; padding: 0 !important; }
.fi-sidebar-item a,
.fi-sidebar-item button,
.fi-sidebar-item .fi-sidebar-item-button {
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 0.375rem 0.75rem !important;
    margin: 0 !important;
    color: var(--ta-gray-700) !important;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1.35 !important;
    background: transparent !important;
}
.dark .fi-sidebar-item a,
.dark .fi-sidebar-item button { color: var(--ta-gray-200) !important; }

/* HOVER — bg bianco (sul pastel del gruppo, contrasta) */
.fi-sidebar-item:hover a,
.fi-sidebar-item:hover button,
.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover,
.fi-sidebar-item .fi-sidebar-item-button:hover {
    background: #ffffff !important;
    color: var(--ta-brand-600) !important;
}
.dark .fi-sidebar-item:hover a,
.dark .fi-sidebar-item:hover button {
    background: var(--ta-gray-800) !important;
    color: #38bdf8 !important;
}

/* Icone items — slate-600 default, brand su hover */
.fi-sidebar-item svg,
.fi-sidebar-item i {
    width: 18px; height: 18px;
    color: var(--ta-gray-600) !important;
}
.fi-sidebar-item:hover svg,
.fi-sidebar-item:hover i {
    color: var(--ta-brand-600) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR — logo piccolo nascosto di default, appare solo dopo scroll
   (Il hook nel AdminPanelProvider inietta un grande logo all'inizio del
    sidebar-nav + listener scroll che applica .visible al piccolo .fi-logo)
   ═══════════════════════════════════════════════════════════════════════ */
.fi-topbar { background: #ffffff !important; border-bottom: 1px solid var(--ta-gray-200) !important; }
.dark .fi-topbar { background: var(--ta-gray-dark) !important; border-bottom-color: var(--ta-gray-800) !important; }

/* Logo topbar piccolo — default invisibile, fade-in al scroll */
.fi-topbar img.fi-logo,
.fi-topbar .fi-logo,
.fi-topbar-logo {
    opacity: 0 !important;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.fi-topbar img.fi-logo.visible,
.fi-topbar .fi-logo.visible,
.fi-topbar-logo.visible {
    opacity: 1 !important;
    transform: translateX(0);
    pointer-events: auto;
}

/* Big logo nel sidebar (renderizzato dal hook SIDEBAR_NAV_START) */
.fi-sidebar-big-logo {
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--ta-gray-200);
    margin-bottom: 0.5rem;
}
.dark .fi-sidebar-big-logo { border-bottom-color: var(--ta-gray-800); }
.fi-sidebar-big-logo img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE — logo grande centrato
   ═══════════════════════════════════════════════════════════════════════ */
.fi-simple-main .fi-logo,
.fi-simple-layout .fi-logo,
.fi-simple-header .fi-logo {
    height: auto !important;
    max-height: none !important;
    width: 200px !important;
    max-width: 80vw !important;
    display: block;
    margin: 0 auto 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR custom — Notus native: track slate-100, thumb slate-400.
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--ta-gray-100);
    border-radius: 6px;
}
.dark ::-webkit-scrollbar-track {
    background: var(--ta-gray-800);
}
::-webkit-scrollbar-thumb {
    background: var(--ta-gray-300);
    border-radius: 6px;
    border: 2px solid var(--ta-gray-100);
    min-height: 40px;
}
.dark ::-webkit-scrollbar-thumb {
    background: var(--ta-gray-600);
    border-color: var(--ta-gray-800);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ta-gray-500);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ta-gray-300) var(--ta-gray-100);
}

/* ═══════════════════════════════════════════════════════════════════════
   Rest — cards, table, inputs, headings (mantengono look TailAdmin)
   ═══════════════════════════════════════════════════════════════════════ */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn {
    border-radius: var(--v1-radius-lg) !important;
    border-color: var(--v1-border) !important;
    background: var(--v1-bg-card) !important;
    box-shadow: var(--v1-shadow-sm) !important;
}
.dark .fi-section, .dark .fi-wi-stats-overview-stat, .dark .fi-ta-ctn {
    border-color: var(--v1-border) !important;
    background: var(--v1-bg-card) !important;
}

.fi-header-heading {
    font-weight: 700 !important;
    color: var(--v1-text-primary) !important;
    font-size: 24px !important;
    letter-spacing: -0.01em;
}
.dark .fi-header-heading { color: var(--v1-text-primary) !important; }

.fi-btn {
    border-radius: var(--v1-radius-md) !important;
    font-weight: 500 !important;
}

/* Apple-polish (allinea al feel di .adm-btn di admin-pages.css): ombra tattile a
   riposo + lift in hover + press-down in :active + transizione morbida.
   SOLO tattile — NON tocca bg/colori/radius/tipografia (che hanno storia di
   rotture su white-label/contrasto). Escluso .fi-link (bottoni-testo).
   a11y (WCAG 2.4.7/2.4.13): il ring focus di Filament è un box-shadow su
   :focus-visible (focus-visible:ring-2) — quindi il nostro box-shadow !important
   NON deve applicarsi su :focus-visible o cancellerebbe il ring da tastiera.
   Guard :not(:focus-visible) su tutte le regole box-shadow (l'hover incluso, così
   un bottone hovered+focused mantiene il ring). :active = solo transform, ok. */
.fi-btn:not(.fi-link):not(:focus-visible) {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease !important;
}
.fi-btn:not(.fi-link):hover:not(:focus-visible) {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
}
.fi-btn:not(.fi-link):active {
    transform: translateY(1px) !important;
}
.dark .fi-btn:not(.fi-link):not(:focus-visible) {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.25) !important;
}
.dark .fi-btn:not(.fi-link):hover:not(:focus-visible) {
    box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.35) !important;
}

/* Twin apple-polish per gli ICON button (azioni riga tabelle, X modali, ...).
   Ghost/trasparenti → NIENTE ombra a riposo (outlinerebbe il nulla): solo
   hover-lift leggero + press-down. Tattile-only; :not(:focus-visible) come
   sopra per non coprire il focus ring. */
.fi-icon-btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
.fi-icon-btn:hover:not(:focus-visible) {
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.10) !important;
}
.fi-icon-btn:active {
    transform: translateY(1px) !important;
}
.dark .fi-icon-btn:hover:not(:focus-visible) {
    box-shadow: 0 2px 6px -1px rgb(0 0 0 / 0.30) !important;
}

.fi-ta-header-cell {
    background: var(--ta-gray-50) !important;
    color: var(--ta-gray-600) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
}
.dark .fi-ta-header-cell {
    background: var(--ta-gray-900) !important;
    color: var(--ta-gray-300) !important;
}

.fi-input {
    border-radius: var(--v1-radius-md) !important;
    border-color: var(--v1-border-strong) !important;
}
.fi-input:focus {
    border-color: var(--v1-accent) !important;
    box-shadow: 0 0 0 3px var(--v1-accent-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTIVE SIDEBAR ITEM — Notus native: lightBlue text + lightBlue-100 bg.
   Single brand color regardless of group accent.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-sidebar-group .fi-sidebar-item.fi-active,
.fi-sidebar-item-active {
    background: transparent !important;
    border-left: 0 !important;
}
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active > button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active a,
.fi-sidebar-item-active button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--v1-accent-bg) !important;
    color: var(--v1-accent) !important;
    font-weight: 600 !important;
    border-radius: var(--v1-radius-sm) !important;
    box-shadow: none !important;
}
.fi-sidebar-item.fi-active a *,
.fi-sidebar-item.fi-active button *,
.fi-sidebar-item-active a *,
.fi-sidebar-item-active button *,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active span,
.fi-sidebar-item-active span {
    color: var(--v1-accent) !important;
}
.fi-sidebar-item.fi-active svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active svg,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--v1-accent) !important;
}
.dark .fi-sidebar-group .fi-sidebar-item.fi-active > a,
.dark .fi-sidebar-group .fi-sidebar-item.fi-active > button,
.dark .fi-sidebar-group .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--v1-accent-bg) !important;
    color: var(--v1-accent) !important;
}
.dark .fi-sidebar-group .fi-sidebar-item.fi-active svg {
    color: var(--v1-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL RESOURCE PAGE HERO — applies to all Filament list/edit/create pages
   Wraps the breadcrumb + heading area in a sky gradient card automatically.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-page .fi-page-header-main-ctn header.fi-header,
.fi-resource-list-records-page .fi-page-header-main-ctn header.fi-header,
.fi-resource-edit-record-page .fi-page-header-main-ctn header.fi-header,
.fi-resource-create-record-page .fi-page-header-main-ctn header.fi-header,
.fi-resource-view-record-page .fi-page-header-main-ctn header.fi-header {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 1.4rem !important;
    box-shadow: none !important;
    color: var(--v1-text-primary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-header-heading,
.fi-resource-list-records-page header.fi-header .fi-header-heading,
.fi-resource-edit-record-page header.fi-header .fi-header-heading,
.fi-resource-create-record-page header.fi-header .fi-header-heading,
.fi-resource-view-record-page header.fi-header .fi-header-heading {
    color: var(--v1-text-primary) !important;
    font-size: 1.4rem !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs,
.fi-resource-list-records-page header.fi-header .fi-breadcrumbs,
.fi-resource-edit-record-page header.fi-header .fi-breadcrumbs,
.fi-resource-create-record-page header.fi-header .fi-breadcrumbs,
.fi-resource-view-record-page header.fi-header .fi-breadcrumbs {
    color: var(--v1-text-secondary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs a,
.fi-resource-list-records-page header.fi-header .fi-breadcrumbs a,
.fi-resource-edit-record-page header.fi-header .fi-breadcrumbs a {
    color: var(--v1-text-secondary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs svg,
.fi-resource-list-records-page header.fi-header .fi-breadcrumbs svg {
    color: var(--v1-text-tertiary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-header-subheading,
.fi-resource-list-records-page header.fi-header .fi-header-subheading {
    color: var(--v1-text-secondary) !important;
    font-size: 0.9rem !important;
}
/* Header action buttons: use Filament 5's NATIVE styling (fi-bg-color-600 +
   fi-text-color-0 = accent bg + white text for primary; gray for secondary —
   both readable + on-brand via the primary scale set in AdminPanelProvider).
   The old override forced .fi-btn→gray bg while Filament kept white labels =
   invisible white-on-gray (Matteo: "Salva configurazione"). Removed. Phase D. */

/* Breadcrumb: force white on the LAST item (current page) which Filament greys */
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item:last-child,
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item:last-child *,
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-list li:last-child {
    color: var(--v1-text-primary) !important;
    font-weight: 600 !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item a {
    color: var(--v1-text-secondary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL FILAMENT TABS — sky pills with rounded icons
   Applied to all .fi-tabs containers in admin pages.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-tabs > .fi-tabs-list,
.fi-page [role="tablist"] {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 0.3rem !important;
    column-gap: 0.3rem !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.7rem !important;
    margin-bottom: 1rem !important;
}
.fi-tabs-item,
.fi-page [role="tablist"] > button,
.fi-page [role="tablist"] > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 8px !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    border: 0 !important;
    background: transparent !important;
    transition: background 0.12s, color 0.12s, transform 0.12s !important;
}
.fi-tabs-item *,
.fi-page [role="tablist"] > button *,
.fi-page [role="tablist"] > a * {
    color: #0284c7 !important;
}
/* Inactive tab icon: flat sky color, no circle */
.fi-tabs-item svg,
.fi-page [role="tablist"] > button svg,
.fi-page [role="tablist"] > a svg {
    width: 16px !important;
    height: 16px !important;
    color: #0284c7 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}
.fi-tabs-item:hover,
.fi-page [role="tablist"] > button:hover {
    background: rgba(14,165,233,0.08) !important;
    transform: translateY(-1px) !important;
}
/* Active tab: full sky gradient with WHITE text + icon */
.fi-tabs-item[aria-selected="true"],
.fi-page [role="tablist"] > *[aria-selected="true"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2,132,199,0.35) !important;
}
.fi-tabs-item[aria-selected="true"] *,
.fi-page [role="tablist"] > *[aria-selected="true"] * {
    color: #ffffff !important;
}
.fi-tabs-item[aria-selected="true"] svg,
.fi-page [role="tablist"] > *[aria-selected="true"] svg {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM LIVEWIRE TAB STRIPS — applies to <button wire:click="switchTab(...)">
   inside admin pages. Overrides inline-style colors with sky-themed pills.
   To opt-in, the parent <div> should have class .lw-tabs (added via blade).
   ═══════════════════════════════════════════════════════════════════════ */
.lw-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    background: var(--v1-gray-100) !important;   /* was #f0f9ff — leaked light in dark (Phase D T5) */
    border: 1px solid var(--v1-border) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.7rem !important;
    margin-bottom: 1rem !important;
}
.lw-tabs button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.85rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--v1-accent) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.12s, color 0.12s, transform 0.12s !important;
}
.lw-tabs button:hover {
    background: var(--v1-accent-bg) !important;
    transform: translateY(-1px) !important;
}
.lw-tabs button.lw-tab-active,
.lw-tabs button[data-active="true"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2,132,199,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTO-DETECT CUSTOM TAB CONTAINERS via :has() — modern browsers only.
   Any div directly containing <button wire:click="switchTab(*)"> gets pill style.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-page div:has(> button[wire\:click^="switchTab"]),
.fi-page div:has(> a[wire\:click^="switchTab"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    background: var(--v1-gray-100) !important;   /* was #f0f9ff — leaked light in dark (Phase D T5) */
    border: 1px solid var(--v1-border) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.7rem !important;
    margin-bottom: 1rem !important;
}
.fi-page button[wire\:click^="switchTab"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.85rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--v1-accent) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.12s, color 0.12s, transform 0.12s !important;
}
.fi-page button[wire\:click^="switchTab"]:hover {
    background: var(--v1-accent-bg) !important;
    transform: translateY(-1px) !important;
}
/* Active state via data-active="true" (set by blade) */
.fi-page button[wire\:click^="switchTab"][data-active="true"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2,132,199,0.35) !important;
}
.fi-page button[wire\:click^="switchTab"][data-active="true"] * {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TAB ICON FLAT — sky color when inactive, no circular badge.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-tabs-item svg,
.fi-page [role="tablist"] > * svg,
.fi-page button[wire\:click^="switchTab"] svg {
    width: 16px !important;
    height: 16px !important;
    color: #0284c7 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Force ACTIVE tab gradient — higher specificity to beat any inline + ev-grid-tabs leftover */
html body .fi-page .fi-tabs-item[aria-selected="true"],
html body .fi-page [role="tablist"] > *[aria-selected="true"],
html body .fi-page button[wire\:click^="switchTab"][data-active="true"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2,132,199,0.4) !important;
}
html body .fi-page .fi-tabs-item[aria-selected="true"] *,
html body .fi-page [role="tablist"] > *[aria-selected="true"] *,
html body .fi-page button[wire\:click^="switchTab"][data-active="true"] * {
    color: #ffffff !important;
}
/* Active tab icon: white glyph (no circle bg) */
html body .fi-page .fi-tabs-item[aria-selected="true"] svg,
html body .fi-page [role="tablist"] > *[aria-selected="true"] svg,
html body .fi-page button[wire\:click^="switchTab"][data-active="true"] svg {
    background: transparent !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EXTEND: cover wire:click="$set('activeTab', ...)" pattern (Zoom etc.)
   ═══════════════════════════════════════════════════════════════════════ */
.fi-page div:has(> button[wire\:click*="activeTab"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.7rem !important;
    margin-bottom: 1rem !important;
}
.fi-page button[wire\:click*="activeTab"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.85rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    text-transform: none !important;
}
.fi-page button[wire\:click*="activeTab"]:hover {
    background: rgba(14,165,233,0.08) !important;
}
/* Active state: detected via .adm-btn-primary class OR data-active="true" */
html body .fi-page button[wire\:click*="activeTab"].adm-btn-primary,
html body .fi-page button[wire\:click*="activeTab"][data-active="true"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2,132,199,0.4) !important;
}
html body .fi-page button[wire\:click*="activeTab"].adm-btn-primary *,
html body .fi-page button[wire\:click*="activeTab"][data-active="true"] * {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FILAMENT TAB ACTIVE — Alpine-controlled state uses .fi-active class
   on .fi-tabs-item. Apply gradient + white text.
   ═══════════════════════════════════════════════════════════════════════ */
html body .fi-page .fi-tabs-item.fi-active,
html body .fi-page button.fi-tabs-item.fi-active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2,132,199,0.4) !important;
    border-radius: 8px !important;
}
html body .fi-page .fi-tabs-item.fi-active *,
html body .fi-page .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #ffffff !important;
}
html body .fi-page .fi-tabs-item.fi-active svg {
    color: #ffffff !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FILAMENT TAB ICON — force sky color via .fi-icon class
   (Filament resets svg color via own utilities; specificity matters)
   ═══════════════════════════════════════════════════════════════════════ */
html body .fi-page .fi-tabs-item .fi-icon,
html body .fi-page .fi-tabs-item svg.fi-icon,
html body .fi-page .fi-tabs-item > svg {
    color: #0284c7 !important;
    width: 18px !important;
    height: 18px !important;
}
html body .fi-page .fi-tabs-item.fi-active .fi-icon,
html body .fi-page .fi-tabs-item.fi-active svg.fi-icon,
html body .fi-page .fi-tabs-item.fi-active > svg {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FILAMENT TAB FINAL OVERRIDE — beat tailwind utilities with max specificity
   ═══════════════════════════════════════════════════════════════════════ */
html body.fi-body .fi-page .fi-tabs .fi-tabs-item .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs-item .fi-tabs-item-label {
    color: #0284c7 !important;
}
html body.fi-body .fi-page .fi-tabs .fi-tabs-item > .fi-icon,
html body.fi-body .fi-page .fi-tabs-item > .fi-icon,
html body.fi-body .fi-page .fi-tabs-item .fi-icon {
    color: #0284c7 !important;
}
html body.fi-body .fi-page .fi-tabs-item.fi-active .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs-item.fi-active > .fi-icon,
html body.fi-body .fi-page .fi-tabs-item.fi-active .fi-icon {
    color: #ffffff !important;
}

/* 2026-06-04 — Testo BIANCO semibold su tutti i bottoni FILLED blu (primary/info/sky).
   Filament rende i filled con bg-color-400 ma text-color-900 (blu scuro su azzurro,
   poco leggibile). Escludiamo outlined/link (devono restare con testo colorato). */
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link),
.fi-btn.fi-color-info:not(.fi-btn-outlined):not(.fi-link),
.fi-btn.fi-color-sky:not(.fi-btn-outlined):not(.fi-link) {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) *,
.fi-btn.fi-color-info:not(.fi-btn-outlined):not(.fi-link) *,
.fi-btn.fi-color-sky:not(.fi-btn-outlined):not(.fi-link) * {
    color: #ffffff !important;
}

/* 2026-06-04 — Sfondo content area grigio chiaro così le card bianche risaltano
   (era quasi-bianco → card "piatte"/invisibili sulle pagine custom). Allinea al
   look standard Filament: bg grigio + card bianche. */
.fi-main { background: var(--v1-bg-primary) !important; }
.dark .fi-main { background: var(--v1-bg-primary) !important; }

/* ── V1 tabs: clean accent pill, replaces loud sky-gradient pills (Phase D T2) ── */
/* Tablist container: neutral V1 surface (was loud light-blue #f0f9ff/#bae6fd that
   leaked in dark — T2 only re-skinned the items, not the container). Phase D T5. */
.fi-tabs > .fi-tabs-list,
.fi-page [role="tablist"] {
    background: var(--v1-gray-100) !important;
    border: 1px solid var(--v1-border) !important;
}
.fi-tabs-item,
html body .fi-page .fi-tabs-item {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--v1-text-secondary) !important;
    border-radius: var(--v1-radius-md) !important;
}
.fi-tabs-item:hover { background: var(--v1-gray-100) !important; }
.fi-tabs-item[aria-selected="true"],
.fi-tabs-item.fi-active,
html body .fi-page .fi-tabs-item[aria-selected="true"],
html body .fi-page .fi-tabs-item.fi-active,
html body .fi-page button.fi-tabs-item.fi-active {
    background: var(--v1-accent-bg) !important;
    box-shadow: none !important;
    color: var(--v1-accent) !important;
}
.fi-tabs-item[aria-selected="true"] *,
.fi-tabs-item.fi-active *,
html body .fi-page .fi-tabs-item[aria-selected="true"] *,
html body .fi-page .fi-tabs-item.fi-active * {
    color: var(--v1-accent) !important;
}

/* ── V1 header: dark title on transparent (overrides old white-on-gradient hero) Phase D T2 ── */
.fi-page .fi-page-header-main-ctn header.fi-header .fi-header-heading,
.fi-resource-list-records-page header.fi-header .fi-header-heading,
.fi-resource-edit-record-page header.fi-header .fi-header-heading,
.fi-resource-create-record-page header.fi-header .fi-header-heading,
.fi-resource-view-record-page header.fi-header .fi-header-heading {
    color: var(--v1-text-primary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs,
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs *,
.fi-page .fi-page-header-main-ctn header.fi-header .fi-header-subheading,
.fi-resource-list-records-page header.fi-header .fi-breadcrumbs,
.fi-resource-list-records-page header.fi-header .fi-breadcrumbs *,
.fi-resource-list-records-page header.fi-header .fi-header-subheading {
    color: var(--v1-text-secondary) !important;
}
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item:last-child,
.fi-page .fi-page-header-main-ctn header.fi-header .fi-breadcrumbs-item:last-child * {
    color: var(--v1-text-primary) !important;
}
/* (header action buttons use Filament 5 native styling — see note above; the
   .fi-btn gray override was removed because it broke white-labelled primaries) */

/* ═══════════════════════════════════════════════════════════════════════
   READABILITY FIX — legacy hero/tab rules set WHITE text for the old
   blue/gradient backgrounds that V1 replaced with LIGHT surfaces, so that
   text is now invisible (Matteo: breadcrumb + active tab). Force readable V1
   colors. (switchTab/.lw-tabs active keep their gradient + white text — those
   selectors are not matched here.) Phase D.
   ═══════════════════════════════════════════════════════════════════════ */
/* Hero breadcrumb/heading white text is fixed in the hero block above (in place).
   Backstop for any non-hero breadcrumb context: */
html body .fi-breadcrumbs a,
html body .fi-breadcrumbs .fi-breadcrumbs-item-label { color: var(--v1-text-secondary) !important; }
html body .fi-breadcrumbs .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label { color: var(--v1-text-primary) !important; }
/* Filament tabs (incl. cluster tabs) are a LIGHT V1 pill now, so the active label
   must be accent, never white. Match the legacy high-specificity chains exactly
   so this later rule wins. (switchTab/.lw-tabs keep their gradient + white.) */
html body.fi-body .fi-page .fi-tabs-item.fi-active .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs-item.fi-active *,
html body .fi-page .fi-tabs-item.fi-active *,
html body .fi-page .fi-tabs-item.fi-active .fi-tabs-item-label,
html body .fi-page .fi-tabs-item[aria-selected="true"] *,
html body .fi-tabs-item.fi-active,
html body .fi-tabs-item.fi-active * { color: var(--v1-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   INTERACTIVE AFFORDANCE — collapsible sections read as clickable card-rows
   that LIFT on hover, so accordions don't blend into the white card behind
   them (Matteo: clickable elements must stand out from the white). Generic →
   fixes Media Kit format rows + every accordion across the admin. Phase D.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-section.fi-collapsible.fi-collapsed {
    box-shadow: var(--v1-shadow-sm) !important;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.fi-section.fi-collapsible.fi-collapsed:hover {
    box-shadow: var(--v1-shadow-md) !important;
    transform: translateY(-1px);
    border-color: var(--v1-border-strong) !important;
}
.fi-section.fi-collapsible > .fi-section-header { cursor: pointer; }
.fi-section.fi-collapsible.fi-collapsed > .fi-section-header:hover { color: var(--v1-accent); }
/* chevron toggle: clearer, tints to accent on row hover */
.fi-section.fi-collapsible .fi-section-header .fi-icon-btn { color: var(--v1-text-secondary) !important; transition: color .16s, transform .16s; }
.fi-section.fi-collapsible.fi-collapsed:hover .fi-section-header .fi-icon-btn { color: var(--v1-accent) !important; }

/* Media Kit format rows: brand-colored icon badge per data-platform (V3 look).
   ::before on the section header = a colored rounded square + white glyph. */
.mk-format > .fi-section-header::before,
.mk-format .fi-section-header:first-of-type::before {
    content:""; flex:0 0 auto; width:34px; height:34px; border-radius:9px; margin-right:13px;
    background-repeat:no-repeat; background-position:center; background-size:60%, cover;
    box-shadow: var(--v1-shadow-sm);
}
.mk-format[data-platform="Instagram"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17' cy='7' r='1' fill='%23fff' stroke='none'/%3E%3C/svg%3E"),linear-gradient(135deg,#feda75,#d62976 45%,#962fbf 78%,#4f5bd5)}
.mk-format[data-platform="Facebook"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M14 9V7a2 2 0 0 1 2-2h2V2h-3a4 4 0 0 0-4 4v3H8v3h3v9h3v-9h2.5l.5-3z'/%3E%3C/svg%3E"),linear-gradient(#1877f2,#1877f2)}
.mk-format[data-platform="LinkedIn"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H20v-5.4c0-1.3 0-2.95-1.8-2.95s-2.07 1.4-2.07 2.85V21H12z'/%3E%3C/svg%3E"),linear-gradient(#0a66c2,#0a66c2)}
.mk-format[data-platform="TikTok"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16 4c.5 2.3 2 3.7 4 4v3c-1.6 0-3-.5-4-1.2V16a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1v3.1a2.5 2.5 0 1 0 1.7 2.3V4z'/%3E%3C/svg%3E"),linear-gradient(#111,#111)}
.mk-format[data-platform="YouTube"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 8.5v7l6-3.5z'/%3E%3C/svg%3E"),linear-gradient(#ff0000,#ff0000)}
.mk-format[data-platform="X"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17 3h3l-7 8 8 10h-6l-5-6-5 6H2l7-9L1 3h6l4 5zm-1 16h2L8 5H6z'/%3E%3C/svg%3E"),linear-gradient(#111,#111)}
.mk-format[data-platform="Email"] .fi-section-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"),linear-gradient(#0071e3,#0071e3)}
/* Green "attivo" pill when the format is enabled. data-on is set on the section
   wrapper from the form state (collapsed sections drop their content from the DOM,
   so :has(input) can't be used) and updates live via the ->live() toggle. */
.mk-format[data-on="1"] .fi-section-header-text-ctn::after{
    content:"attivo"; margin-left:10px; vertical-align:middle;
    font-size:.66rem; font-weight:700; letter-spacing:.02em;
    color:#1a7f37; background:rgba(40,167,69,.12); padding:2px 9px; border-radius:99px;
}
.dark .mk-format[data-on="1"] .fi-section-header-text-ctn::after{
    color:#30d158; background:rgba(48,209,88,.16);
}

/* ═══════════════════════════════════════════════════════════════════════
   Custom borderless edition-picker selects (fi-select-input + Tailwind
   border-0, used across many pages) blend into the page — give them a
   visible V1 box. Filament-native selects don't carry .border-0, so this is
   safe. (Matteo: "Edizione" select invisible.) Phase D.
   ═══════════════════════════════════════════════════════════════════════ */
.fi-main select.fi-select-input.border-0,
.fi-main select.fi-select-input[class*="border-0"] {
    border: 1px solid var(--v1-border) !important;
    background-color: var(--v1-bg-card) !important;
    border-radius: var(--v1-radius-md) !important;
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    box-shadow: var(--v1-shadow-sm) !important;
    color: var(--v1-text-primary) !important;
}
.fi-main select.fi-select-input.border-0:focus,
.fi-main select.fi-select-input[class*="border-0"]:focus {
    border-color: var(--v1-accent) !important;
    box-shadow: 0 0 0 3px var(--v1-accent-bg) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Unify switchTab / .lw-tabs ACTIVE tabs to the V1 flat accent pill (were a
   loud sky gradient + white text) — same look as the Filament .fi-tabs pill.
   High specificity + later source beats the legacy gradient rules. Phase D.
   ═══════════════════════════════════════════════════════════════════════ */
html body .fi-page button[wire\:click^="switchTab"][data-active="true"],
html body .fi-page button[wire\:click^="switchTab"].lw-tab-active,
html body .lw-tabs button[data-active="true"],
html body .lw-tabs button.lw-tab-active {
    background: var(--v1-accent-bg) !important;
    background-image: none !important;
    color: var(--v1-accent) !important;
    box-shadow: none !important;
}
html body .fi-page button[wire\:click^="switchTab"][data-active="true"] *,
html body .fi-page button[wire\:click^="switchTab"].lw-tab-active *,
html body .lw-tabs button[data-active="true"] *,
html body .lw-tabs button.lw-tab-active * {
    color: var(--v1-accent) !important;
}

/* ── Premium form controls + dropdowns (GLOBAL admin) — depth & delight ──────
   Soft layered elevation, rounded corners, glass dropdown panels, accent focus
   glow. The flat default read as "basic"; this gives tasteful depth. Light-
   first; dark variants below. Covers Filament dropdowns + Choices.js selects. */
html body .fi-input-wrp {
    border: 1px solid rgba(17, 24, 39, 0.16) !important;
    border-radius: 12px !important;
    /* light: campo grigio-chiaro così SPICCA sulle card bianche (era #fff = invisibile) */
    background: #f1f3f6 !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05) !important;
    transition: border-color .15s ease, box-shadow .2s ease !important;
}
html body .fi-input-wrp:hover { border-color: rgba(17, 24, 39, 0.24) !important; }
html body .fi-input-wrp:focus-within {
    border-color: var(--v1-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--v1-accent) 16%, transparent),
                0 1px 2px rgba(17, 24, 39, 0.06) !important;
}
html body .fi-select-input-btn { border: 0 !important; }

/* light — card/pannelli con bordo visibile (spiccano sul fondo grigio) */
html body .fi-section { border: 1px solid rgba(17, 24, 39, 0.12) !important; }
/* light — sezioni ANNIDATE (es. "Stile" collassabile dentro un Fieldset): bianche su
   parent bianco = invisibili → grigio-chiare + bordo marcato così spiccano. */
html body .fi-section .fi-section {
    background-color: #eef1f5 !important;
    border-color: rgba(17, 24, 39, 0.16) !important;
}

/* WYSIWYG / rich editor: superficie tonale come gli input (light = grigio-chiaro
   per spiccare sulle card bianche; dark = schiarita). Toggle-aware globale CMS. */
html body .fi-fo-rich-editor-content,
html body .fi-fo-rich-editor .tiptap,
html body .fi-fo-rich-editor [contenteditable="true"],
html body .fi-fo-markdown-editor textarea,
html body .fi-prose { background: #f1f3f6 !important; }
html.dark body .fi-fo-rich-editor-content,
html.dark body .fi-fo-rich-editor .tiptap,
html.dark body .fi-fo-rich-editor [contenteditable="true"],
html.dark body .fi-fo-markdown-editor textarea,
html.dark body .fi-prose { background: rgba(255, 255, 255, 0.06) !important; }

/* pulsanti SECONDARI/ghost (.fi-btn SENZA colore di sfondo, es. "Aggiungi a pulsanti",
   "Salva & nuovo", "Annulla") — stessa logica tonale: light grigi su bianco, dark
   schiariti su scuro, + bordo. NON tocca i primari (fi-bg-color-*) né i colorati. */
html body .fi-btn:not([class*="fi-bg-color"]) {
    background: #eef1f5 !important;
    border: 1px solid rgba(17, 24, 39, 0.16) !important;
}
html body .fi-btn:not([class*="fi-bg-color"]):hover {
    background: #e2e7ee !important;
}
html.dark body .fi-btn:not([class*="fi-bg-color"]) {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
html.dark body .fi-btn:not([class*="fi-bg-color"]):hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown / select option panels — rounded, glass, layered elevation */
html body .fi-dropdown-panel,
html body .choices__list--dropdown,
html body .fi-fo-select-options {
    border-radius: 16px !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    box-shadow: 0 1px 1px rgba(17, 24, 39, 0.04),
                0 8px 16px -6px rgba(17, 24, 39, 0.12),
                0 24px 48px -12px rgba(17, 24, 39, 0.18) !important;
    overflow: hidden !important;
    padding: 6px !important;
}
html body .fi-dropdown-list-item,
html body .choices__item--choice {
    border-radius: 10px !important;
    transition: background .12s ease, color .12s ease !important;
}
html body .fi-dropdown-list-item:hover,
html body .choices__item--choice.is-highlighted {
    background: color-mix(in srgb, var(--v1-accent) 10%, transparent) !important;
}

/* Cards / sections — soft lift (delight, not flat) */
html body .fi-section,
html body .fi-wi {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04),
                0 6px 16px -8px rgba(17, 24, 39, 0.10) !important;
}

/* dark mode */
html.dark body .fi-input-wrp, html.dark body .fi-input-wrp {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark body .fi-dropdown-panel, html.dark body .fi-dropdown-panel,
html.dark body .choices__list--dropdown, html.dark body .choices__list--dropdown {
    background: rgba(28, 28, 30, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.40),
                0 24px 48px -12px rgba(0, 0, 0, 0.55) !important;
}

/* dark mode — affordance CLICCABILI più visibili (Matteo): i chevron dei dropdown e
   le icone interattive erano grigio-medio (~0.55) e sparivano sul fondo scuro. */
html.dark body .fi-input-wrp .fi-icon,
html.dark body .fi-input-wrp .fi-icon-btn,
html.dark body .fi-select-input-btn .fi-icon,
html.dark body .fi-dropdown-trigger .fi-icon,
html.dark body .fi-section-collapse-btn,
html.dark body .fi-fo-rich-editor button,
html.dark body .fi-fo-rich-editor [role="button"] {
    color: rgba(255, 255, 255, 0.82) !important;
}
/* hover → bianco pieno (affordance evidente) */
html.dark body .fi-input-wrp:hover .fi-icon,
html.dark body .fi-section-header:hover .fi-section-collapse-btn,
html.dark body .fi-fo-rich-editor button:hover {
    color: #fff !important;
}
/* header di sezione collassabile: hover evidenzia che è cliccabile */
html.dark body .fi-section-header:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
}
/* toolbar del RichEditor: striscia + bordo più visibili */
html.dark body .fi-fo-rich-editor-toolbar,
html.dark body .fi-fo-rich-editor [class*="toolbar"],
html.dark body [class*="rich-editor"][class*="toolbar"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark body .fi-fo-rich-editor button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* dark — sezioni/pannelli (incl. collassabili tipo "Stile") con BORDO visibile:
   avevano border-width:0 → distinguibili solo dal bg subtle e sparivano sul fondo. */
html.dark body .fi-section {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
/* sezioni annidate (es. lo "Stile" dentro un Fieldset) un filo più chiare + bordo */
html.dark body .fi-section .fi-section {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}
/* header collassabile: leggermente sollevato così "sembra" un bottone */
html.dark body .fi-section.fi-collapsible > .fi-section-header,
html.dark body .fi-section:has(> .fi-section-header [aria-expanded]) > .fi-section-header {
    background: rgba(255, 255, 255, 0.03) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTRASTO SCHEDE — UNICA AUTORITA' DEI COLORI (2026-10-06, WCAG 1.4.3/1.4.11)
   Gli strati sopra (sky :578-860, V1 :887+) lasciavano schede a 2,77-3,84:1 su
   ogni [role=tablist], .fi-tabs-item e bottoni switchTab/activeTab. Qui solo i
   COLORI, in fondo e con la specificita' piu' alta: forma e fondi restano agli
   strati sopra. I valori stanno nelle variabili: TabsContrastoTemaTest le legge
   da qui e le misura contro i fondi --v1-gray-100 (chiaro/scuro).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --tab-ink: #0369a1;          /* inattiva, su --v1-gray-100 chiaro */
    --tab-att-da: #0369a1;       /* attiva: gradiente, testo bianco */
    --tab-att-a: #075985;
    --tab-nat-ink: #0058b0;      /* attiva nativa Filament (pillola V1) */
    --tab-fuoco: #0c4a6e;
}
.dark {
    --tab-ink: #7dd3fc;
    --tab-nat-ink: #66b2ff;
    --tab-fuoco: #7dd3fc;
}
/* fondo delle strisce delle viste: uno solo, quello V1 (lo strato sky lasciava #f0f9ff anche nel tema scuro) */
html body.fi-body .fi-page [role="tablist"]:not(.fi-tabs-list),
html body.fi-body .fi-page div:has(> button[wire\:click^="switchTab"]),
html body.fi-body .fi-page div:has(> button[wire\:click*="activeTab"]) {
    background: var(--v1-gray-100) !important;
}
/* inattive */
html body.fi-body .fi-page .fi-tabs-item,
html body.fi-body .fi-page .fi-tabs-item *,
html body.fi-body .fi-page .fi-tabs-item .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs-item .fi-icon,
html body.fi-body .fi-page .fi-tabs .fi-tabs-item .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs .fi-tabs-item .fi-icon,
html body.fi-body .fi-page [role="tablist"] > button,
html body.fi-body .fi-page [role="tablist"] > button *,
html body.fi-body .fi-page [role="tablist"] > a,
html body.fi-body .fi-page [role="tablist"] > a *,
html body.fi-body .fi-page button[wire\:click^="switchTab"],
html body.fi-body .fi-page button[wire\:click^="switchTab"] *,
html body.fi-body .fi-page button[wire\:click*="activeTab"],
html body.fi-body .fi-page button[wire\:click*="activeTab"] * {
    color: var(--tab-ink) !important;
}
/* attive delle viste (componente x-admin.tabs e bottoni a mano): gradiente scuro, testo bianco */
html body.fi-body .fi-page [role="tablist"] > [aria-selected="true"]:not(.fi-tabs-item),
html body.fi-body .fi-page button[wire\:click^="switchTab"][data-active="true"],
html body.fi-body .fi-page button[wire\:click*="activeTab"][data-active="true"],
html body.fi-body .fi-page button[wire\:click*="activeTab"].adm-btn-primary {
    background: linear-gradient(135deg, var(--tab-att-da) 0%, var(--tab-att-a) 100%) !important;
}
html body.fi-body .fi-page [role="tablist"] > [aria-selected="true"]:not(.fi-tabs-item),
html body.fi-body .fi-page [role="tablist"] > [aria-selected="true"]:not(.fi-tabs-item) *,
html body.fi-body .fi-page button[wire\:click^="switchTab"][data-active="true"],
html body.fi-body .fi-page button[wire\:click^="switchTab"][data-active="true"] *,
html body.fi-body .fi-page button[wire\:click*="activeTab"][data-active="true"],
html body.fi-body .fi-page button[wire\:click*="activeTab"][data-active="true"] *,
html body.fi-body .fi-page button[wire\:click*="activeTab"].adm-btn-primary,
html body.fi-body .fi-page button[wire\:click*="activeTab"].adm-btn-primary * {
    color: #ffffff !important;
}
/* attive native Filament: resta la pillola V1, si scurisce solo il testo */
html body.fi-body .fi-page .fi-tabs-item.fi-active,
html body.fi-body .fi-page .fi-tabs-item.fi-active *,
html body.fi-body .fi-page .fi-tabs-item.fi-active .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs-item.fi-active .fi-icon,
html body.fi-body .fi-page .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html body.fi-body .fi-page .fi-tabs .fi-tabs-item.fi-active .fi-icon,
html body.fi-body .fi-page .fi-tabs-item[aria-selected="true"],
html body.fi-body .fi-page .fi-tabs-item[aria-selected="true"] * {
    color: var(--tab-nat-ink) !important;
}
/* fuoco da tastiera visibile su ogni scheda */
html body.fi-body .fi-page .fi-tabs-item:focus-visible,
html body.fi-body .fi-page [role="tab"]:focus-visible,
html body.fi-body .fi-page button[wire\:click^="switchTab"]:focus-visible,
html body.fi-body .fi-page button[wire\:click*="activeTab"]:focus-visible {
    outline: 2px solid var(--tab-fuoco) !important;
    outline-offset: 2px !important;
}