/* ==========================================================================
   MP-SHELL: UTILITY MANCANTI IN BOOTSTRAP 5.3 (usate nel markup del progetto)
   --------------------------------------------------------------------------
   ATTENZIONE: le classi qui sotto (es. .p-2.5, .shadow-xs, .tracking-wider)
   NON esistono in Bootstrap 5.3 di default. Sono "design token custom"
   introdotti volontariamente in questo progetto per avere step di spaziatura
   più fini di quelli standard (0/1/2/3/4/5) e un'ombra più leggera di
   .shadow-sm. Se le vedi usate in una view, non è un refuso: sono definite
   qui sotto. Se ti serve un nuovo step (es. .mb-1.5, .pt-3.5), aggiungilo
   in questo blocco seguendo lo stesso pattern, NON approssimare al valore
   intero più vicino di Bootstrap.
   ========================================================================== */


/* ==========================================================================
   MP-SHELL: CONFIGURAZIONE MULTI-TEMA (CENTRALE)
   ========================================================================== */

/* 1. TEMA DEFAULT (AdminKit Standard) - Se non specificato usa questo */
:root, [data-theme="default"] {
    --sidebar-bg: #222e3c;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --primary-color: #3b7ddd;
    --primary-hover: #2e66b7;
    --primary-rgb: 59, 125, 221;
    --primary-subtle-bg: #e7f0fc;
    --primary-subtle-color: #234b85;
    --primary-subtle-border: #c8dcfa;
    --bg-app: #f5f7fb;
    --border-color: #e2e8f0;
    --text-muted: #6c757d;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --surface-page: #f5f7fb;
    --surface-card: #ffffff;
    --surface-muted: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --control-radius: 0.45rem;
    --control-focus-ring: 0 0 0 0.2rem rgba(59, 125, 221, 0.22);
    /* 🎯 Aumentiamo il tempo (da 0.25s a 0.38s) per un effetto più morbido e "soft" */
    --transition-speed: 0.38s;
    /* 🎯 Definiamo una curva di decelerazione fluida (stile Apple/Stripe) */
    --transition-curve: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. TEMA NORDIC WARM (Toni caldi e rilassanti) */
[data-theme="nordic"] {
    --sidebar-bg: #272522;
    --primary-color: #d97706;
    --primary-hover: #b45309;
    --primary-rgb: 217, 119, 6;
    --primary-subtle-bg: #fff1d6;
    --primary-subtle-color: #854d0e;
    --primary-subtle-border: #f5d69b;
    --bg-app: #fdfbf7;
    --border-color: #e7e5e4;
    --text-muted: #78716c;
    --card-bg: #ffffff;
    --text-main: #1c1917;
    --surface-page: #fdfbf7;
    --surface-card: #ffffff;
    --surface-muted: #f7f3ec;
    --text-primary: #1c1917;
    --text-secondary: #78716c;
    --control-focus-ring: 0 0 0 0.2rem rgba(217, 119, 6, 0.2);
}

/* 3. TEMA DARK MODE (Per gli amanti dello scuro) */
[data-theme="dark"] {
    --sidebar-bg: #111827;
    --primary-color: #3b7ddd;
    --primary-hover: #2e66b7;
    --primary-rgb: 59, 125, 221;
    --primary-subtle-bg: #1d3556;
    --primary-subtle-color: #b9d4ff;
    --primary-subtle-border: #345785;
    --bg-app: #0f172a;
    --border-color: #1e293b;
    --text-muted: #94a3b8;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --surface-page: #0f172a;
    --surface-card: #1e293b;
    --surface-muted: #172235;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --control-focus-ring: 0 0 0 0.2rem rgba(96, 165, 250, 0.28);
}

/* 4. COLORI BOOTSTRAP AGGANCIATI AL TEMA (fase 76; riuniti qui nella fase 243).
   Con :root valgono anche per CoreSuite e Fluent, che più sotto ridefiniscono solo ciò che cambia. */
:root, [data-theme="default"], [data-theme="nordic"], [data-theme="dark"] {
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--primary-color);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
    --bs-link-hover-color-rgb: var(--primary-rgb);
    --bs-form-check-input-checked-bg-color: var(--primary-color);
    --bs-form-check-input-checked-border-color: var(--primary-color);
    --bs-form-switch-checked-bg: var(--primary-color);
    --bs-primary-bg-subtle: var(--primary-subtle-bg);
    --bs-primary-border-subtle: var(--primary-subtle-border);
    --bs-primary-text-emphasis: var(--primary-subtle-color);
}

/* ─── RESET & STRUTTURA FONDAMENTALE ─── */
body {
    background-color: var(--bg-app);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ─── SIDEBAR STRUTTURA ─── */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: #ffffff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: margin-left var(--transition-speed) ease-in-out;
}

.app-sidebar-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-top {
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 24px;
}

.sidebar-bottom {
    margin-top: auto; /* Spinge utenti e impostazioni in fondo */
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Etichette di sezione (Core, Moduli, Amministrazione): leggibili sulla barra scura (nota di fase 240) */
.sidebar-section-label {
    display: block;
    margin-bottom: 0.5rem;
    padding-left: 14px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ─── ICONE E NAV-LINK SIDEBAR ─── */
.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 8.5px 14px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
}

    .app-sidebar .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Selezione discreta: riconoscibile senza il blocco saturo del colore primario. */
    .app-sidebar a.nav-link.active,
    .app-sidebar a.nav-link[aria-current="page"] {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.09);
        box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.42);
        font-weight: 600;
    }

    .app-sidebar a.nav-link.active i,
    .app-sidebar a.nav-link[aria-current="page"] i {
        opacity: 1;
    }

    /* Il titolo del gruppo indica solo apertura/chiusura; non evidenzia la pagina attiva. */
    .app-sidebar .menu-group-toggle,
    .app-sidebar .menu-group-toggle:hover,
    .app-sidebar .menu-group-toggle.expanded {
        color: rgba(255, 255, 255, 0.78) !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 400;
    }
    .app-sidebar .menu-group-toggle:hover { color: #ffffff !important; }
    .app-sidebar .menu-group-toggle:focus-visible {
        outline: 2px solid rgba(147, 197, 253, 0.9);
        outline-offset: 1px;
    }

    .app-sidebar .menu-group-toggle {
        width: 100%;
        border: 0;
        text-align: left;
        background: transparent;
        font: inherit;
    }

    .app-sidebar .menu-group-toggle:focus-visible,
    .app-sidebar .nav-link:focus-visible,
    .sidebar-toggle:focus-visible,
    .sidebar-brand:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

    .app-sidebar .menu-group-toggle .toggle-icon {
        transition: transform 0.2s ease;
    }

    .app-sidebar .menu-group-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

    .app-sidebar .nav-link i {
        width: 24px;
        font-size: 1.1rem;
        margin-right: 10px;
        opacity: 0.7;
        transition: opacity 0.2s ease;
        text-align: center;
    }

    .app-sidebar .nav-link:hover i {
        opacity: 1;
    }

/* ─── AREA CONTENUTI (Destra) ─── */
.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.app-topbar {
    height: var(--topbar-height);
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spinge i contenuti ai due lati opposti */
    padding: 0 24px;
    flex-shrink: 0;
}

.app-content {
    flex-grow: 1;
    padding: 28px;
    overflow-y: auto;
}

/* ─── COMPONENTI: HAMBURGER BUTTON ─── */
.sidebar-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    transition: background var(--transition-speed);
}

    .sidebar-toggle:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .sidebar-toggle span,
    .sidebar-toggle span::before,
    .sidebar-toggle span::after {
        display: block;
        background: #495057;
        height: 2px;
        width: 20px;
        position: relative;
        transition: background var(--transition-speed);
        pointer-events: none;
    }

        .sidebar-toggle span::before,
        .sidebar-toggle span::after {
            content: '';
            position: absolute;
        }

        .sidebar-toggle span::before {
            top: -6px;
        }

        .sidebar-toggle span::after {
            bottom: -6px;
        }

/* ─── STATO COLLASSATO VIA JS ─── */
.app-layout.sidebar-collapsed .app-sidebar {
    margin-left: calc(-1 * var(--sidebar-width));
}

/* ─── COMPONENTI: AREA UTENTE (TOPBAR) ─── */
.app-topbar .dropdown {
    position: relative; /* 🎯 FONDAMENTALE: la tendina si muoverà in base a questo intero blocco */
    flex-shrink: 0;
}

.app-user-dropdown {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 0.35rem;
    transition: background-color 0.2s;
    white-space: nowrap; /* Impedisce al nome di andare a capo spezzandosi */
}

    .app-user-dropdown:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .app-user-dropdown::after {
        display: none !important;
    }

.app-avatar {
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ─── COMPONENTI: DROPDOWN ANIMATO ─── */
.dropdown-menu.animate {
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu.fade-in {
    animation-name: dropdownFadeIn;
}

.dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

    .dropdown-menu .dropdown-item:hover {
        background-color: var(--bg-app);
        color: var(--primary-color) !important;
    }

        .dropdown-menu .dropdown-item:hover i {
            color: var(--primary-color) !important;
            opacity: 1 !important;
        }

.app-topbar .dropdown-menu-end {
    min-width: 220px !important; /* Più spazio per le voci del menu */
    margin-top: 8px !important; /* Distanza pulita sotto l'area utente */
    right: 0 !important; /* Si allinea perfettamente al bordo destro dell'area utente */
    left: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(34, 46, 60, 0.1) !important;
}

/* ─── COMPONENTI: CARD STANDARD ─── */
.mp-card {
    background: #ffffff;
    border-radius: 0.35rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 0.875rem 0 rgba(33, 37, 41, 0.05);
    margin-bottom: 24px;
}

.mp-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-card-body {
    padding: 24px;
}

/* ─── COMPONENTI: SISTEMA MODALE BLINDATO ─── */
.mp-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(34, 46, 60, 0.4);
    backdrop-filter: blur(3px);
    z-index: 99999 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.mp-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -46%) scale(0.96);
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 15px 35px rgba(34, 46, 60, 0.2);
    z-index: 100000 !important;
    width: 90%;
    max-width: 520px;
    display: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mp-modal-backdrop.show {
    display: block !important;
    opacity: 1 !important;
}

.mp-modal.show {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* ─── ALERT STRUTTURATI MP-SHELL ─── */
.mp-alert {
    border: none; /* Rimuoviamo il bordo netto */
    border-left: 4px solid currentColor; /* Aggiungiamo una barra verticale colorata a sinistra */
    border-radius: 0.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Un'ombra leggerissima */
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: 0.9rem;
}

    /* Forziamo i colori di sfondo a essere più tenui e moderni (Pastello/Desaturati) */
    .mp-alert.alert-success {
        background-color: #d1e7dd;
        color: #0f5132;
    }

    .mp-alert.alert-danger {
        background-color: #f8d7da;
        color: #842029;
    }

    .mp-alert.alert-warning {
        background-color: #fff3cd;
        color: #664d03;
    }

    .mp-alert.alert-info {
        background-color: #cff4fc;
        color: #055160;
    }

    /* Spazio fisso per l'icona interna */
    .mp-alert .alert-icon {
        font-size: 1.25rem;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .mp-alert .btn-close {
        position: static !important; /* 🎯 Rimuove l'ancoraggio rigido in alto a destra di Bootstrap */
        margin-left: auto !important; /* 🎯 Sfrutta Flexbox per spingere la X a destra, ma tenendola centrata in altezza */
        padding: 0 !important;
        margin-right: 8px !important; /* 🎯 La sposta leggermente più a sinistra, staccandola dal bordo destro */
        flex-shrink: 0; /* Impedisce al pulsante di stringersi se il testo dell'alert è lungo */
    }

/* ─── ACCORDION MODERNI MP-SHELL ─── */
.mp-accordion .accordion-item {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0.35rem !important; /* Forza il raggio su tutti gli elementi */
    margin-bottom: 12px; /* Stacca gli elementi tra loro per un look più pulito */
    box-shadow: 0 2px 6px rgba(33, 37, 41, 0.02);
    overflow: hidden;
}

/* Il bottone di intestazione (Header) */
.mp-accordion .accordion-button {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    background-color: #ffffff;
    padding: 16px 20px;
    box-shadow: none !important; /* Elimina il fastidioso alone blu di Bootstrap al click */
    transition: all 0.2s ease;
}

    /* Stato Aperto: Elimina lo sfondo azzurro nativo di Bootstrap e usa un tocco minimale */
    .mp-accordion .accordion-button:not(.collapsed) {
        color: var(--primary-color);
        background-color: rgba(59, 125, 221, 0.03); /* Un velo leggerissimo del nostro colore primario */
        border-bottom: 1px solid var(--border-color);
    }

    /* Customizzazione della freccia nativa di rotazione */
    .mp-accordion .accordion-button::after {
        background-size: 1rem;
        transition: transform 0.2s ease-in-out;
    }

/* Il corpo del contenuto interno */
.mp-accordion .accordion-body {
    padding: 20px;
    font-size: 0.9rem;
    color: #6c757d;
    background-color: #ffffff;
    line-height: 1.6;
}

/* ─── SPINNER & LOADING (MP-SHELL) ─── */
.mp-spinner {
    color: var(--primary-color) !important; /* Forza l'uso del blu corporate */
}

/* Ottimizzazione per gli spinner dentro i bottoni per evitare che tocchino il testo */
.btn .spinner-border-sm,
.btn .spinner-grow-sm {
    margin-right: 8px;
    vertical-align: -0.125em; /* Allineamento geometrico perfetto con il testo del bottone */
}

/* ─── TOOLTIPS MODERNI MP-SHELL ─── */
.custom-tooltip {
    --bs-tooltip-bg: var(--sidebar-bg); /* Sfrutta il blu scuro della nostra sidebar */
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-border-radius: 0.35rem;
    --bs-tooltip-font-size: 0.8rem;
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 6px;
    opacity: 0.95 !important; /* Leggerissima trasparenza premium */
}


/* ==========================================================================
   MP-SHELL: PAGINA DI LOGIN
   ========================================================================== */

.login-page {
    background-color: var(--bg-app);
    background-image: radial-gradient(at 0% 0%, rgba(59, 125, 221, 0.05) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(34, 46, 60, 0.03) 0px, transparent 50%);
    min-height: 100vh !important; /* 🎯 Usa min-height per coprire SEMPRE lo schermo */
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    position: relative; /* 🎯 Indispensabile per fare da ancora a .abstract-bg */
    overflow-x: hidden;
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 440px;
    padding: 20px;
}

.login-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(34, 46, 60, 0.06);
    padding: 40px;
}

/* Header del Form */
.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: rgba(59, 125, 221, 0.08);
    color: var(--primary-color);
    border-radius: 0.5rem;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.login-header h4 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

    .login-header h4 span {
        color: var(--primary-color);
    }

/* Input Fluttuanti personalizzati MP-Shell */
.login-card .form-floating > .form-control {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.95rem;
    color: #334155;
}

    .login-card .form-floating > .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(59, 125, 221, 0.12);
    }

.login-card .form-floating > label {
    color: #64748b;
    font-size: 0.9rem;
}

/* Pulsante di Accesso Premium */
.btn-login {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 12px;
    transition: all 0.2s ease;
}

    .btn-login:hover {
        background-color: var(--primary-hover);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 125, 221, 0.2);
    }

    .btn-login:active {
        transform: translateY(0);
    }

/* Link e Dettagli minori */
.forgot-link {
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.15s;
}

    .forgot-link:hover {
        color: var(--primary-hover);
    }

.input-remember:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.login-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: #64748b;
}

/* ─── 🎯 LE ANIMAZIONI DI INGRESSO (CUBIC BEZIER) ─── */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-slide-up {
    animation: slideUpFade 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Applica la nuova transizione alla Sidebar */
.sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    /* Sostituisci la vecchia transizione con questa combinazione: */
    transition: min-width var(--transition-speed) var(--transition-curve), max-width var(--transition-speed) var(--transition-curve);
}

/* Applica la stessa identica transizione al contenuto principale per farli muovere in sincrono */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg-app);
    /* Forza il sincronismo con la sidebar quando cambia il margine o la larghezza */
    transition: margin-left var(--transition-speed) var(--transition-curve), padding-left var(--transition-speed) var(--transition-curve);
}

/* Quando la sidebar è collassata (classe .collapsed applicata via JS) */
.sidebar.collapsed {
    min-width: 70px; /* o 0px a seconda del tuo layout */
    max-width: 70px;
}



/* ==========================================================================
   MP-SHELL: OTTIMIZZAZIONE RESPONSIVE PER SMARTPHONE (Sotto 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
    /* 1. Modifichiamo l'assetto del layout principale su mobile per evitare il flex fisso */
    .app-layout {
        position: relative;
        display: block; /* Sgancia il layout flex standard desktop */
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    /* 2. Trasformiamo la sidebar in un pannello "Fixed" (stile Drawer) */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050; /* Superiore alla topbar */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        /* Usiamo le variabili di transizione premium che hai già definito per coerenza grafica */
        transition: transform var(--transition-speed) var(--transition-curve) !important;
        margin-left: 0 !important; /* Resettiamo i margini desktop */
    }

    /* 3. DI DEFAULT SU MOBILE: La sidebar è collassata (la spingiamo fuori a sinistra con transform) */
    .app-layout.sidebar-collapsed .app-sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        margin-left: 0 !important; /* Sovrascrive il comportamento desktop */
    }

    /* 4. Il corpo principale riempie il 100% dello schermo senza restrizioni */
    .app-main {
        width: 100vw !important;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* 5. OVERLAY DI SFONDO (Trasparenza scura quando la sidebar è aperta) */
    /* Se la sidebar NON è collassata, creiamo un velo scuro sopra .app-content per focalizzare il menu */
    .app-layout:not(.sidebar-collapsed) .app-main::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(34, 46, 60, 0.4);
        backdrop-filter: blur(2px);
        z-index: 1040; /* Sta sotto la sidebar ma sopra i contenuti */
        animation: fadeInOverlay 0.25s ease-out both;
    }

    /* 6. Ottimizzazione della Topbar per i telefoni più stretti */
    .app-topbar {
        padding: 0 16px; /* Riduciamo i pad laterali per guadagnare spazio */
    }
}

/* Animazione fluida per l'overlay mobile */
@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sostituisci o aggiungi queste classi nel tuo foglio di stile globale */
.table-warning-subtle {
    background-color: #fef9e7 !important; /* Giallino caldo pastello ben visibile */
}

.bg-warning-subtle {
    background-color: #fef4d1 !important; /* Versione leggermente più satura per i badge */
}

.text-warning-dark {
    color: #856404 !important; /* Testo ocra/marrone scuro ad alto contrasto */
}



/* ==========================================================================
   MP-SHELL: UTILITY MANCANTI IN BOOTSTRAP 5.3 (usate nel markup del progetto)
   ========================================================================== */

/* Step intermedi di spaziatura (Bootstrap va solo a step interi 0-5) */
.p-2\.5 {
    padding: 0.625rem !important;
}

.px-2\.5 {
    padding-right: 0.625rem !important;
    padding-left: 0.625rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.me-2\.5 {
    margin-right: 0.625rem !important;
}

/* Letter-spacing per badge/etichette in maiuscolo */
.tracking-wider {
    letter-spacing: 0.05em;
}

/* Ombra "extra-small", un gradino sotto shadow-sm di Bootstrap */
.shadow-xs {
    box-shadow: 0 1px 3px rgba(33, 37, 41, 0.06) !important;
}

/* Fase 243 — classi al posto degli stili inline, con i colori del tema */
.surface-card { background-color: var(--card-bg); border: 1px solid var(--border-color) !important; color: var(--text-main); }
.border-theme { border-color: var(--border-color) !important; }
.fs-xs { font-size: 0.75rem; }
.min-w-0 { min-width: 0; }
.table-head-caps { font-size: 0.75rem; letter-spacing: 0.5px; }
/* Avatar e iniziali dell'utente: 32 px di base, varianti per menu su telefono, tabelle e schede */
.avatar { width: 32px; height: 32px; font-size: 0.85rem; object-fit: cover; flex-shrink: 0; }
.avatar-sm { width: 30px; height: 30px; font-size: 0.8rem; }
.avatar-md { width: 35px; height: 35px; }
.avatar-lg { width: 55px; height: 55px; font-size: 1.2rem; letter-spacing: 0.5px; }
/* Tabella utenti (prima in un blocco <style> della vista): pulsanti a icona e righe con i colori del tema */
.custom-user-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; }
.custom-user-table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), .03); }
.btn-action {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.btn-action:hover { background-color: rgba(var(--bs-primary-rgb), .08); border-color: var(--border-color); }
.fs-7 { font-size: 0.72rem; }
.fs-7\.5 { font-size: 0.75rem; }
/* Pulsante mostra/nascondi password tra due campi */
.btn-input-addon { border-color: var(--border-color); color: var(--text-muted); }
.badge-default { font-size: 0.75rem; border: 1px solid rgba(var(--bs-warning-rgb), .3); }

/* Blocco A — rifiniture accessibili del menu laterale */
.sidebar-brand-container { padding: 0.8rem 0.9rem; }
.sidebar-brand-container .coresuite-brand-logo { max-height: 49px; }

.app-sidebar .sidebar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-decoration: none;
}

.app-sidebar a.nav-link.active:hover,
.app-sidebar a.nav-link[aria-current="page"]:hover {
    background-color: rgba(255, 255, 255, 0.13);
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .app-sidebar .nav-link,
    .app-sidebar .menu-group-toggle .toggle-icon,
    .sidebar-toggle span,
    .sidebar-toggle span::before,
    .sidebar-toggle span::after {
        transition: none !important;
    }
}


/* ==========================================================================
   BLOCCO B — BASE GRAFICA CONDIVISA
   Regole intenzionalmente conservative: standardizzano i controlli comuni
   senza sovrascrivere i componenti specifici dei singoli moduli.
   Le variabili (--surface-*, --text-primary/secondary, --control-*) sono nei
   blocchi dei temi a inizio file.
   ========================================================================== */

body {
    background-color: var(--surface-page, var(--bg-app));
    color: var(--text-primary, var(--text-main));
}

/* Campi condivisi nelle pagine dell'applicazione. */
.app-content .form-control,
.app-content .form-select,
.app-content .input-group-text {
    border-color: var(--border-color);
    border-radius: var(--control-radius);
}

.app-content .form-control,
.app-content .form-select {
    min-height: 2.5rem;
    color: var(--text-primary, var(--text-main));
    background-color: var(--surface-card, var(--card-bg));
}

.app-content .form-control:focus,
.app-content .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: var(--control-focus-ring);
}

.app-content .form-control::placeholder {
    color: var(--text-secondary, var(--text-muted));
    opacity: 0.85;
}

/* Contrasto uniforme per i pulsanti, mantenendo dimensioni Bootstrap. */
.app-content .btn {
    border-radius: var(--control-radius);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-content .btn:focus-visible,
.app-topbar a:focus-visible,
.app-topbar button:focus-visible,
.app-content a:focus-visible,
.app-content button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Link e controlli selezionabili seguono il tema attivo.
   Si escludono pulsanti, navigazione e dropdown per non alterare i loro stati specifici. */
.app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.alert-link) {
    color: var(--primary-color);
    text-decoration-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.alert-link):hover {
    color: var(--primary-hover);
    text-decoration-color: currentColor;
}

/* Checkbox, radio e switch: colore selezionato coerente con Default, Nordic e Dark. */
.app-content {
    --bs-form-check-input-checked-bg-color: var(--primary-color);
    --bs-form-check-input-checked-border-color: var(--primary-color);
    --bs-form-switch-checked-bg: var(--primary-color);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-hover);
    accent-color: var(--primary-color);
}

.app-content .form-check-input {
    border-color: var(--text-secondary, var(--text-muted));
    background-color: var(--surface-card, var(--card-bg));
    cursor: pointer;
}

.app-content .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.app-content .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: var(--control-focus-ring);
}

.app-content .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.app-content input[type="checkbox"],
.app-content input[type="radio"] {
    accent-color: var(--primary-color);
}

/* Tabelle leggibili anche su viewport ridotti e temi diversi. */
.app-content .table {
    --bs-table-color: var(--text-primary, var(--text-main));
    --bs-table-border-color: var(--border-color);
}

.app-content .table-responsive {
    border-radius: var(--control-radius);
}

/* Card condivise: supporta sia il componente MP-Shell sia le card Bootstrap. */
.mp-card,
.app-content .card {
    color: var(--text-primary, var(--text-main));
    background-color: var(--surface-card, var(--card-bg));
    border-color: var(--border-color);
}

.mp-card {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.mp-card-header {
    border-bottom-color: var(--border-color);
}

/* Riduzione animazioni per tutti i controlli condivisi. */
@media (prefers-reduced-motion: reduce) {
    .app-content .btn,
    .app-content .form-control,
    .app-content .form-select {
        transition: none !important;
    }
}


/* Scrollbar sobrie e sottili: lo scorrimento resta disponibile senza una barra invadente. */
.app-content,
.app-sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.38) transparent;
    scrollbar-gutter: stable;
}
.app-content::-webkit-scrollbar,
.app-sidebar-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.app-content::-webkit-scrollbar-track,
.app-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}
.app-content::-webkit-scrollbar-thumb,
.app-sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.32);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.app-content::-webkit-scrollbar-thumb:hover,
.app-sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.55);
}
[data-theme="dark"] .app-content,
[data-theme="dark"] .app-sidebar-content {
    scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
}
[data-theme="dark"] .app-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .app-sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.35);
}


/* ==========================================================================
   FASE 76 — COLORI BOOTSTRAP AGGANCIATI AL TEMA ATTIVO
   Copre anche utility Bootstrap e controlli presenti nelle pagine dei moduli.
   Le variabili --bs-* sono a inizio file (punto 4).
   ========================================================================== */

/* Bootstrap primary buttons and outlines: base, hover, active, disabled. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
}
/* Success actions are common save/execute actions in the modules: use the
   theme primary, while danger/warning keep their semantic status colors. */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

/* Bootstrap utilities text-primary/bg-primary/border-primary now follow theme. */
.text-primary { color: var(--primary-color) !important; }
/* Con l'opacità di Bootstrap, così bg-opacity-10 (iniziali degli avatar) resta un fondo leggero (fase 243) */
.bg-primary { background-color: rgba(var(--primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.bg-primary-subtle { background-color: var(--primary-subtle-bg) !important; }
.text-primary-emphasis { color: var(--primary-subtle-color) !important; }
.border-primary-subtle { border-color: var(--primary-subtle-border) !important; }

/* Remaining interactive controls and selected states. */
.app-content .form-check-input:checked,
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-range::-webkit-slider-thumb { background-color: var(--primary-color); }
.form-range::-moz-range-thumb { background-color: var(--primary-color); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary-color); }
.pagination { --bs-pagination-active-bg: var(--primary-color); --bs-pagination-active-border-color: var(--primary-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25); }
.list-group { --bs-list-group-active-bg: var(--primary-color); --bs-list-group-active-border-color: var(--primary-color); }
.progress { --bs-progress-bar-bg: var(--primary-color); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--primary-color); }
.page-link { color: var(--primary-color); }
.page-link:hover { color: var(--primary-hover); }
.page-item.active .page-link { color: #fff; background-color: var(--primary-color); border-color: var(--primary-color); }

/* Fase 77 — azioni secondarie (Annulla/Indietro/Chiudi) coordinate con il tema. */
.btn-secondary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-bg: var(--primary-subtle-bg);
    --bs-btn-border-color: var(--primary-subtle-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--primary-subtle-bg);
    --bs-btn-disabled-border-color: var(--primary-subtle-border);
}
.btn-outline-secondary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-subtle-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
}
.btn-link {
    --bs-btn-color: var(--primary-color);
    --bs-btn-hover-color: var(--primary-hover);
    --bs-btn-active-color: var(--primary-hover);
}

/* ========================================================================== 
   FASE 78 — FORM, VALIDAZIONI E TABELLE COERENTI TRA I MODULI
   Solo presentazione: conserva i colori semantici di errore/avviso/successo.
   ========================================================================== */
.app-content {
    --bs-border-color: var(--border-color);
    --bs-secondary-color: var(--text-secondary, var(--text-muted));
    --bs-tertiary-bg: var(--surface-muted, var(--bg-app));
    --bs-body-color: var(--text-primary, var(--text-main));
}

/* Campi disabilitati e in sola lettura restano distinguibili in tutti i temi. */
.app-content .form-control:disabled,
.app-content .form-control[readonly],
.app-content .form-select:disabled,
.app-content .form-check-input:disabled {
    background-color: var(--surface-muted, var(--bg-app));
    color: var(--text-secondary, var(--text-muted));
    border-color: var(--border-color);
}
.app-content .form-control:disabled,
.app-content .form-select:disabled {
    opacity: .8;
    cursor: not-allowed;
}
.app-content .form-text,
.app-content .text-muted,
.app-content .form-check-label {
    color: var(--text-secondary, var(--text-muted));
}

/* Validazione: errori ben visibili senza dipendere dai colori del tema primario. */
.app-content .form-control.is-invalid,
.app-content .form-select.is-invalid,
.app-content .was-validated .form-control:invalid,
.app-content .was-validated .form-select:invalid {
    border-color: var(--bs-danger, #dc3545);
}
.app-content .form-control.is-invalid:focus,
.app-content .form-select.is-invalid:focus,
.app-content .was-validated .form-control:invalid:focus,
.app-content .was-validated .form-select:invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb, 220, 53, 69), .18);
}
.app-content .invalid-feedback,
.app-content .valid-feedback {
    font-size: .875rem;
    line-height: 1.4;
    margin-top: .35rem;
}
.app-content .validation-summary-errors,
.app-content .field-validation-error {
    color: var(--bs-danger, #dc3545);
}
.app-content .validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* Tabelle: hover leggero, intestazioni leggibili e azioni che possono andare a capo. */
.app-content .table > :not(caption) > * > * {
    border-bottom-color: var(--border-color);
}
.app-content .table thead th {
    color: var(--text-secondary, var(--text-muted));
    vertical-align: middle;
}
.app-content .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--surface-muted, rgba(var(--primary-rgb), .045));
    color: var(--text-primary, var(--text-main));
}
.app-content .table td,
.app-content .table th {
    vertical-align: middle;
}
.app-content .table td .btn-group,
.app-content .table td .d-flex,
.app-content .table td .btn-toolbar {
    flex-wrap: wrap;
    gap: .35rem;
}
.app-content .table td .btn-group > .btn,
.app-content .table td .btn-toolbar .btn {
    flex-shrink: 0;
}

/* Schede e paginazione condividono il tema, senza alterare badge di stato. */
.app-content .nav-tabs {
    --bs-nav-tabs-link-active-color: var(--primary-color);
    --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--surface-card, var(--card-bg));
    border-bottom-color: var(--border-color);
}
.app-content .nav-tabs .nav-link {
    color: var(--text-secondary, var(--text-muted));
}
.app-content .nav-tabs .nav-link:hover,
.app-content .nav-tabs .nav-link:focus-visible {
    color: var(--primary-color);
}
.app-content .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: var(--surface-card, var(--card-bg));
}
.app-content .dropdown-divider {
    border-top-color: var(--border-color);
}

@media (max-width: 767.98px) {
    .app-content .table td .btn-group,
    .app-content .table td .btn-toolbar {
        display: flex;
        flex-wrap: wrap;
    }
    .app-content .form-actions,
    .app-content .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Fase 80 — rifiniture trasversali di accessibilità e layout responsive. */
.app-content :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--primary-color, var(--bs-primary, #0d6efd));
    outline-offset: 2px;
}

/* Mantiene chiaro lo stato disabilitato anche quando il tema usa un primario scuro. */
.app-content :is(button, .btn, input, select, textarea, .form-check-input):disabled,
.app-content :is(.btn, .page-link, .nav-link).disabled,
.app-content fieldset:disabled {
    cursor: not-allowed;
}
.app-content .btn:disabled,
.app-content .btn.disabled {
    opacity: .58;
    filter: saturate(.72);
}

/* Le barre di azione e i footer non devono uscire dal contenitore su viewport ridotti. */
.app-content :is(.card-header, .card-footer, .modal-header, .modal-footer) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.app-content :is(.card-header, .card-footer, .modal-footer) > .d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}
.app-content :is(.input-group, .form-floating) {
    min-width: 0;
}
.app-content .input-group > :is(.form-control, .form-select) {
    min-width: 0;
}
.app-content :is(.alert, .validation-summary-errors, .field-validation-error) {
    overflow-wrap: anywhere;
}
.app-content .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #adb5bd) transparent;
}
.app-content .table-responsive:focus-visible {
    outline-offset: -2px;
}

@media (max-width: 575.98px) {
    .app-content :is(.card-body, .modal-body) {
        overflow-wrap: anywhere;
    }
    .app-content :is(.card-header, .modal-header) {
        align-items: flex-start;
    }
    .app-content :is(.card-header, .card-footer, .modal-footer) .btn-group {
        flex-wrap: wrap;
    }
    .app-content :is(.card-header, .card-footer, .modal-footer) .btn {
        max-width: 100%;
        white-space: normal;
    }
    .app-content .form-actions > .btn,
    .app-content .page-actions > .btn {
        flex: 0 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-content *,
    .app-content *::before,
    .app-content *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* Fase 81 — rifinitura visiva di dashboard e registro attività. */
.app-content .system-dashboard > .mb-4:first-child,
.app-content .corp-dashboard {
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, .22));
}
.app-content .system-dashboard .card,
.app-content .corp-dashboard ~ .row .card,
.app-content .audit-timeline .card {
    color: var(--text-color, inherit);
    background-color: var(--surface-card, var(--card-bg, var(--bs-body-bg)));
    border-color: var(--border-color, rgba(128, 128, 128, .22));
}
.app-content .system-dashboard .card,
.app-content .corp-dashboard ~ .row .card {
    transition: box-shadow .18s ease, transform .18s ease;
}
.app-content .system-dashboard .card:hover,
.app-content .corp-dashboard ~ .row .card:hover {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .075) !important;
}
.app-content .corp-dashboard #companySwitcher {
    min-width: min(16rem, 55vw);
    max-width: 100%;
}
/* Testi delle pagine un po' più piccoli (nota di fase 247): il corpo e i controlli a dimensione normale passano a 15px;
   le classi .small, .btn-sm, .form-control-sm restano relative o invariate */
.app-content { font-size: .9375rem; }
.app-content .btn:not(.btn-sm):not(.btn-lg),
.app-content .form-control:not(.form-control-sm):not(.form-control-lg),
.app-content .form-select:not(.form-select-sm):not(.form-select-lg),
.app-content .input-group-text { --bs-btn-font-size: .9375rem; font-size: .9375rem; }
.app-content .h6, .app-content h6 { font-size: .875rem; }
.app-content .fs-5 { font-size: 1.125rem !important; }
/* Titolo principale uguale in tutte le pagine, qualunque classe abbia l'h1 (h3, h4…) (nota di fase 242) */
.app-content h1:not(.modal-title) {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
}
/* Scelta dell'azienda (partial _CompanySelect), sotto il titolo */
.app-content .company-select {
    min-width: min(16rem, 100%);
    max-width: 22rem;
}
.app-content .company-select .form-label { color: var(--text-secondary, var(--text-muted)); }
/* Intestazione: titolo (e selettore) a sinistra, azioni e «?» sempre in alto a destra */
.app-content .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}
.app-content .page-header > .page-header-main { flex: 1 1 auto; min-width: 0; }
.app-content .page-header > .page-header-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
/* Titolo di pagina con l'eventuale icona di modifica subito dopo il nome (regola per tutta l'app) */
.app-content .page-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.app-content .page-title h1 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    margin: 0;
    overflow-wrap: anywhere;
}
.app-content .page-title-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    color: var(--bs-primary) !important;
    font-size: .9rem;
    text-decoration: none;
}
.app-content .page-title-edit:hover,
.app-content .page-title-edit:focus-visible {
    background: var(--bs-primary-bg-subtle);
}
.app-content .page-context-link a:hover {
    color: var(--bs-primary) !important;
}
.app-content .corp-dashboard ~ h2 {
    letter-spacing: -.015em;
}
.app-content .audit-timeline > h2 {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    letter-spacing: -.02em;
}
.app-content .audit-timeline .timeline-content-card {
    min-width: 0;
    color: var(--text-color, inherit);
    background: var(--surface-card, var(--card-bg, var(--bs-body-bg)));
    border: 1px solid var(--border-color, rgba(128, 128, 128, .22));
    border-radius: .75rem;
    overflow-wrap: anywhere;
}
.app-content .audit-timeline .timeline-footer,
.app-content .audit-timeline .narrative-footer {
    flex-wrap: wrap;
    gap: .35rem 1rem;
    overflow-wrap: anywhere;
}
.app-content .audit-timeline .narrative-header {
    overflow-wrap: anywhere;
}
.app-content .audit-timeline .btn-load-details {
    white-space: normal;
    text-align: left;
}
.app-content .audit-timeline .modal-content {
    color: var(--text-color, inherit);
    background: var(--surface-card, var(--card-bg, var(--bs-body-bg)));
    border-color: var(--border-color, rgba(128, 128, 128, .22));
}
.app-content .audit-timeline .modal-header {
    background: var(--surface-muted, var(--bs-tertiary-bg)) !important;
    border-bottom-color: var(--border-color, rgba(128, 128, 128, .22));
}
@media (max-width: 767.98px) {
    .app-content .corp-dashboard {
        align-items: stretch !important;
    }
    .app-content .corp-dashboard form {
        width: 100%;
        align-items: stretch !important;
    }
    .app-content .corp-dashboard #companySwitcher {
        flex: 1 1 10rem;
        min-width: 0;
    }
    .app-content .audit-timeline .narrative-footer {
        display: flex;
        flex-direction: column;
    }
}


/* Fasi 82-84 — coerenza tema nelle schermate amministrative, diagnostica e identità. */
.app-content .system-modules .module-card,
.app-content .system-modules .alert,
.app-content .audit-timeline > .card {
    color: var(--text-main, var(--text-color, inherit));
    background-color: var(--surface-card, var(--card-bg, var(--bs-body-bg)));
    border-color: var(--border-color, rgba(128, 128, 128, .22));
}
.app-content .system-modules .module-title {
    color: var(--text-main, var(--text-color, inherit));
}
.app-content .system-modules .module-meta,
.app-content .system-modules .module-dependencies {
    border-top: 1px solid var(--border-color, rgba(128, 128, 128, .22));
    padding-top: .65rem;
    margin-top: .65rem;
}
.app-content .system-modules .module-card {
    transition: box-shadow .18s ease, border-color .18s ease;
}
.app-content .system-modules .module-card:hover {
    border-color: var(--primary-color, var(--bs-primary)) !important;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .08) !important;
}
.app-content .audit-timeline .timeline-narrative-container::before {
    background: var(--border-color, #e9ecef);
}
.app-content .audit-timeline .timeline-narrative-item:hover .timeline-content-card {
    background: var(--surface-muted, var(--bs-tertiary-bg));
}
.app-content .audit-timeline .timeline-narrative-item:hover .timeline-content-card::before {
    border-right-color: var(--surface-muted, var(--bs-tertiary-bg));
}
.app-content .audit-timeline .time-main,
.app-content .audit-timeline .action-highlight {
    color: var(--text-main, var(--text-color, inherit));
}
.app-content .audit-timeline .timeline-node {
    background: var(--surface-card, var(--card-bg, var(--bs-body-bg)));
}
.app-content :is(.system-modules, [class*="user-admin"], [class*="role-permission"]) :is(.table, .table > :not(caption) > * > *) {
    --bs-table-color: var(--text-main, var(--text-color, inherit));
}
.app-content .system-modules .card-title,
.app-content .system-modules .module-meta strong,
.app-content .system-modules .module-dependencies strong {
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .app-content .system-modules .d-flex.justify-content-between {
        align-items: flex-start !important;
        gap: .5rem;
    }
    .app-content .system-modules .d-flex.justify-content-between > :last-child {
        text-align: right;
        overflow-wrap: anywhere;
    }
    .app-content .audit-timeline .timeline-narrative-container {
        margin-top: 1rem;
    }
    .app-content .audit-timeline .timeline-narrative-container::before {
        left: 10px;
    }
    .app-content .audit-timeline .timeline-narrative-item {
        display: grid;
        grid-template-columns: 1fr;
        margin-left: 1.5rem;
        margin-bottom: 1.25rem;
    }
    .app-content .audit-timeline .timeline-time-block {
        width: auto;
        text-align: left;
        padding: 0 0 .45rem .25rem;
    }
    .app-content .audit-timeline .timeline-node {
        left: -1.95rem;
        top: 1.8rem;
        width: 24px;
        height: 24px;
    }
    .app-content .audit-timeline .timeline-content-card {
        margin-left: 0;
        padding: .85rem;
    }
    .app-content .audit-timeline .timeline-content-card::before {
        display: none;
    }
}

/* Fasi 85-87: rifiniture coerenti per amministrazione e permessi aziendali. */
.admin-role-permissions,
.company-permissions-page {
    color: var(--text-primary, var(--text-main));
}

.admin-role-permissions .card,
.company-permissions-page .card {
    color: var(--text-primary, var(--text-main));
    background: var(--surface-card, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    box-shadow: 0 0.15rem 0.55rem rgba(0, 0, 0, 0.045);
}

.admin-role-permissions .card-header,
.admin-role-permissions .card-footer,
.company-permissions-page .card-header,
.company-permissions-page .card-footer {
    color: var(--text-primary, var(--text-main));
    background: var(--surface-card, var(--card-bg));
    border-color: var(--border-color);
}

.admin-role-permissions .form-label,
.admin-role-permissions .form-check-label,
.company-permissions-page label,
.company-permissions-page th,
.company-permissions-page td {
    color: var(--text-primary, var(--text-main));
}

.admin-role-permissions .form-select,
.admin-role-permissions .form-control,
.company-permissions-page .form-select,
.company-permissions-page .form-control {
    color: var(--text-primary, var(--text-main));
    background-color: var(--surface-card, var(--card-bg));
    border-color: var(--border-color);
}

.company-permissions-page .table {
    --bs-table-color: var(--text-primary, var(--text-main));
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: color-mix(in srgb, var(--text-primary, var(--text-main)) 4%, var(--surface-card, var(--card-bg)));
    margin-bottom: 0;
}

.company-permissions-page .table th {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 650;
}

.company-permissions-page .table td:first-child {
    min-width: 180px;
    font-weight: 600;
}

.company-permissions-page input[type="checkbox"] {
    accent-color: var(--accent-color, var(--bs-primary));
}

.admin-role-permissions .form-check,
.company-permissions-page .form-check {
    padding: 0.5rem 0.65rem 0.5rem 1.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
}

@media (max-width: 575.98px) {
    .admin-role-permissions .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .admin-role-permissions .d-flex.gap-2 .form-select,
    .admin-role-permissions .d-flex.gap-2 .btn {
        width: 100%;
    }

    .company-permissions-page .company-permissions-card .card-body {
        padding: 0.75rem;
    }

    .company-permissions-page .table th,
    .company-permissions-page .table td {
        padding: 0.55rem;
        font-size: 0.82rem;
    }
}


/* Fasi 88-90: accesso, pagine di stato e profilo utente coerenti con i temi. */
.login-card {
    color: var(--text-primary, var(--text-main, #1e293b));
    background: var(--surface-card, var(--card-bg, #ffffff));
}

.login-header h4 { color: var(--text-primary, var(--text-main, #1e293b)); }
.login-header .text-muted,
.login-footer { color: var(--text-secondary, var(--text-muted, #64748b)) !important; }
.login-card .form-floating > .form-control {
    color: var(--text-primary, var(--text-main, #334155));
    background-color: var(--surface-card, var(--card-bg, #ffffff));
    border-color: var(--border-color);
}
.login-card .form-floating > label { color: var(--text-secondary, var(--text-muted, #64748b)); }
.login-card .form-floating > .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.login-card .form-check-label { color: var(--text-secondary, var(--text-muted, #64748b)); }
.login-card .form-control:disabled { opacity: .7; }
.login-card .text-danger { overflow-wrap: anywhere; }

.account-status-page {
    max-width: 900px;
    margin: clamp(1rem, 4vw, 3rem) auto;
    padding: clamp(1rem, 3vw, 2rem);
    color: var(--text-primary, var(--text-main, #1e293b));
    background: var(--surface-card, var(--card-bg, #ffffff));
    border: 1px solid var(--border-color);
    border-radius: .9rem;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .05);
    overflow-wrap: anywhere;
}
.account-status-page h1,
.account-status-page h2,
.account-status-page h3,
.account-status-page p { color: inherit; }
.account-status-page h1 { font-size: clamp(1.45rem, 3vw, 2rem); }
.account-status-page h2 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); }
.account-error-dev-title { margin-top: 1.5rem; }
.account-status-page code { overflow-wrap: anywhere; }

/* Profile / identity management pages inherit the selected theme. */
body .manage-profile-page,
body .account-management-page { color: var(--text-primary, var(--text-main)); }
body .manage-profile-page .card,
body .account-management-page .card {
    color: var(--text-primary, var(--text-main));
    background: var(--surface-card, var(--card-bg));
    border-color: var(--border-color) !important;
}
body .manage-profile-page .text-dark,
body .account-management-page .text-dark { color: var(--text-primary, var(--text-main)) !important; }
body .manage-profile-page .form-control,
body .account-management-page .form-control,
body .manage-profile-page .form-select,
body .account-management-page .form-select {
    color: var(--text-primary, var(--text-main));
    background-color: var(--surface-card, var(--card-bg));
    border-color: var(--border-color);
}

@media (max-width: 575.98px) {
    .login-container { padding: 1rem; }
    .login-card { padding: 1.5rem; }
    .login-header { margin-bottom: 1.5rem; }
    .login-footer { margin-top: 1.5rem; padding-top: 1rem; }
    .account-status-page { margin: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card.animate-slide-up { animation: none !important; }
    .btn-login { transition: none !important; }
    .btn-login:hover { transform: none; }
}


/* Fasi 91-100: chiusura revisione trasversale, avvisi e pagine di gestione account. */
.working-range-default-notice {
    color: var(--text-primary, var(--text-main, #1e293b));
    background: color-mix(in srgb, var(--warning-color, #ffc107) 16%, var(--surface-card, var(--card-bg, #ffffff)));
    border: 1px solid color-mix(in srgb, var(--warning-color, #ffc107) 45%, var(--border-color, #e2e8f0));
    border-left: 4px solid var(--warning-color, #ffc107) !important;
}
.working-range-default-notice .form-check-label,
.working-range-default-notice .working-range-default-notice-text {
    color: var(--text-primary, var(--text-main, #1e293b));
}
.working-range-default-notice .form-check-input { border-color: var(--warning-color, #d39e00); }

.account-management-page { min-width: 0; }
.account-management-page > .p-4 { min-width: 0; }
.account-management-page .row > [class*="col-"] { min-width: 0; }
.account-management-page .card { overflow-wrap: anywhere; }
.account-management-page .form-floating > label { color: var(--text-secondary, var(--text-muted, #64748b)); }
.account-management-page .form-control:focus,
.account-management-page .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.account-management-page .list-group-item {
    color: var(--text-primary, var(--text-main));
    background-color: var(--surface-card, var(--card-bg));
    border-color: var(--border-color);
}
.account-management-page .bg-light {
    color: var(--text-primary, var(--text-main)) !important;
    background-color: color-mix(in srgb, var(--surface-card, var(--card-bg)) 88%, var(--primary-color) 12%) !important;
}
.account-management-page .text-dark { color: var(--text-primary, var(--text-main)) !important; }
.account-management-page .text-secondary,
.account-management-page .text-muted { color: var(--text-secondary, var(--text-muted)) !important; }
.account-management-page .alert { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .account-management-page > .p-4 { padding: 1rem !important; }
    .account-management-page .row { --bs-gutter-y: 1rem; }
}


/* ==========================================================================
   TEMA CORESUITE — professionale, luminoso e con accenti petrolio
   Palette dedicata: blu inchiostro + teal. Attivazione con data-theme="coresuite".
   ========================================================================== */
[data-theme="coresuite"] {
    color-scheme: light;
    --sidebar-bg: #142b3a;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --primary-color: #087e8b;
    --primary-hover: #06636d;
    --primary-rgb: 8, 126, 139;
    --primary-subtle-bg: #e0f4f4;
    --primary-subtle-color: #075b63;
    --primary-subtle-border: #b5e2e4;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: #087e8b;
    --bs-link-hover-color: #06636d;
    --bg-app: #f2f6f8;
    --border-color: #dce6eb;
    --text-muted: #657985;
    --card-bg: #ffffff;
    --text-main: #203642;
    --text-primary: #203642;
    --text-secondary: #657985;
    --surface-card: #ffffff;
    --transition-speed: .28s;
    --transition-curve: cubic-bezier(.2,.7,.2,1);
}

html[data-theme="coresuite"] body { color: var(--text-main); background: var(--bg-app); }
html[data-theme="coresuite"] .app-sidebar { box-shadow: 4px 0 22px rgba(20, 43, 58, .08); }
html[data-theme="coresuite"] .sidebar-brand-container { border-color: rgba(255,255,255,.1) !important; }
html[data-theme="coresuite"] .app-sidebar .nav-link { border-radius: .55rem; padding-top: 8px; padding-bottom: 8px; }
html[data-theme="coresuite"] .app-sidebar a.nav-link.active,
html[data-theme="coresuite"] .app-sidebar a.nav-link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(8,126,139,.32), rgba(8,126,139,.12));
    box-shadow: inset 3px 0 0 #39c2c7;
}
html[data-theme="coresuite"] .app-sidebar .nav-link:hover { background-color: rgba(255,255,255,.075); }
html[data-theme="coresuite"] .app-topbar {
    background: rgba(255,255,255,.96);
    border-bottom-color: #dce6eb;
    box-shadow: 0 2px 10px rgba(20,43,58,.025);
}
html[data-theme="coresuite"] .app-content { background: var(--bg-app); }
html[data-theme="coresuite"] .card,
html[data-theme="coresuite"] .login-card,
html[data-theme="coresuite"] .account-status-page {
    border-color: var(--border-color);
    border-radius: .85rem;
    box-shadow: 0 5px 18px rgba(28, 58, 72, .045);
}
html[data-theme="coresuite"] .card-header { border-bottom-color: var(--border-color); }
html[data-theme="coresuite"] .btn-primary {
    --bs-btn-bg: #087e8b;
    --bs-btn-border-color: #087e8b;
    --bs-btn-hover-bg: #06636d;
    --bs-btn-hover-border-color: #06636d;
    --bs-btn-active-bg: #05545c;
    --bs-btn-active-border-color: #05545c;
    --bs-btn-focus-shadow-rgb: 8,126,139;
}
html[data-theme="coresuite"] .form-control:focus,
html[data-theme="coresuite"] .form-select:focus {
    border-color: #36aab2;
    box-shadow: 0 0 0 .2rem rgba(8,126,139,.16);
}
html[data-theme="coresuite"] .table { --bs-table-color: var(--text-main); }
html[data-theme="coresuite"] .dropdown-menu { border-color: var(--border-color); box-shadow: 0 10px 30px rgba(20,43,58,.12); }
html[data-theme="coresuite"] .badge.bg-primary { background-color: var(--primary-color) !important; }
html[data-theme="coresuite"] .text-primary { color: var(--primary-color) !important; }


/* ==========================================================================
   TEMI FLUENT — stile Microsoft 365 / Copilot, chiaro e scuro (note di fase 240 e 241)
   Superfici neutre, blu-viola come colore principale, angoli arrotondati e
   ombre morbide, carattere di sistema Segoe UI. Le regole sono comuni ai due
   temi: cambiano solo le variabili. Il tema scuro attiva anche la modalità scura
   di Bootstrap (data-bs-theme="dark", impostato da _Layout e setTheme).
   Riprende lo stile, non il marchio: nessun logo o nome di prodotto.
   ========================================================================== */
[data-theme="fluent"] {
    color-scheme: light;
    --sidebar-bg: #f7f7f7;
    --sidebar-width: 260px;
    --topbar-height: 56px;
    --primary-color: #5b5fc7;
    --primary-hover: #4f52b2;
    --primary-rgb: 91, 95, 199;
    --primary-subtle-bg: #e8ebfa;
    --primary-subtle-color: #383966;
    --primary-subtle-border: #c5cbfa;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: #5b5fc7;
    --bs-link-hover-color: #4f52b2;
    --bg-app: #f5f5f5;
    --border-color: #e0e0e0;
    --text-muted: #616161;
    --card-bg: #ffffff;
    --text-main: #242424;
    --surface-page: #f5f5f5;
    --surface-card: #ffffff;
    --surface-muted: #fafafa;
    --text-primary: #242424;
    --text-secondary: #616161;
    --control-radius: 0.5rem;
    --control-focus-ring: 0 0 0 0.2rem rgba(91, 95, 199, 0.25);
    --transition-speed: .25s;
    --transition-curve: cubic-bezier(.33, 0, .1, 1);
    /* Colori propri dei temi Fluent */
    --fl-accent: linear-gradient(90deg, #7b61ff 0%, #4f8cf7 50%, #2bc3c3 100%);
    --fl-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14);
    --fl-shadow-raised: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
    --fl-link: #5b5fc7;
    --fl-link-hover: #4f52b2;
    --fl-primary-active: #444791;
    --fl-nav-text: #424242;
    --fl-nav-hover: #ebebeb;
    --fl-nav-active: #ffffff;
    --fl-topbar: #ffffff;
    --fl-item-hover: #f0f0f0;
    --fl-btn2-bg: #ffffff;
    --fl-btn2-border: #d1d1d1;
    --fl-btn2-hover-bg: #f5f5f5;
    --fl-btn2-hover-border: #c7c7c7;
    --fl-btn2-active-bg: #e0e0e0;
    --fl-btn2-active-border: #b3b3b3;
    --fl-input-border: #d1d1d1;
    --fl-input-underline: #616161;
    --fl-tooltip-bg: #242424;
    --fl-tooltip-color: #ffffff;
    --fl-overlay: rgba(0, 0, 0, .3);
    --fl-scrollbar: rgba(0, 0, 0, .25);
}

[data-theme="fluent-dark"] {
    color-scheme: dark;
    --sidebar-bg: #181818;
    --sidebar-width: 260px;
    --topbar-height: 56px;
    /* Pulsanti pieni nel blu-viola con testo bianco leggibile; link e testi in una tinta più chiara */
    --primary-color: #5b5fc7;
    --primary-hover: #6b70d6;
    --primary-rgb: 91, 95, 199;
    --primary-subtle-bg: #2f2f4a;
    --primary-subtle-color: #c5cbfa;
    --primary-subtle-border: #444791;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: #9da3f8;
    --bs-link-hover-color: #c5cbfa;
    --bs-body-bg: #292929;
    --bs-body-color: #f5f5f5;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #333333;
    --bs-tertiary-bg: #2e2e2e;
    --bs-border-color: #3d3d3d;
    --bg-app: #1f1f1f;
    --border-color: #3d3d3d;
    --text-muted: #adadad;
    --card-bg: #292929;
    --text-main: #f5f5f5;
    --surface-page: #1f1f1f;
    --surface-card: #292929;
    --surface-muted: #2e2e2e;
    --text-primary: #f5f5f5;
    --text-secondary: #adadad;
    --control-radius: 0.5rem;
    --control-focus-ring: 0 0 0 0.2rem rgba(157, 163, 248, 0.3);
    --transition-speed: .25s;
    --transition-curve: cubic-bezier(.33, 0, .1, 1);
    --fl-accent: linear-gradient(90deg, #9b87ff 0%, #6aa2ff 50%, #4fd6d6 100%);
    --fl-shadow: 0 0 2px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .45);
    --fl-shadow-raised: 0 0 2px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .5);
    --fl-link: #9da3f8;
    --fl-link-hover: #c5cbfa;
    --fl-primary-active: #4f52b2;
    --fl-nav-text: #d6d6d6;
    --fl-nav-hover: #2b2b2b;
    --fl-nav-active: #333333;
    --fl-topbar: #242424;
    --fl-item-hover: #383838;
    --fl-btn2-bg: #333333;
    --fl-btn2-border: #4d4d4d;
    --fl-btn2-hover-bg: #3d3d3d;
    --fl-btn2-hover-border: #5c5c5c;
    --fl-btn2-active-bg: #2b2b2b;
    --fl-btn2-active-border: #5c5c5c;
    --fl-input-border: #4d4d4d;
    --fl-input-underline: #adadad;
    --fl-tooltip-bg: #f5f5f5;
    --fl-tooltip-color: #242424;
    --fl-overlay: rgba(0, 0, 0, .55);
    --fl-scrollbar: rgba(255, 255, 255, .25);
}

:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) body {
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: var(--text-main);
    background: var(--bg-app);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    /* Il colore resta ereditato: i titoli su intestazioni colorate (text-white) restano leggibili */
    font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}

/* Barra laterale */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar {
    color: var(--text-main);
    border-right: 1px solid var(--border-color);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-brand-container {
    border-color: var(--border-color) !important;
    padding: 0.85rem 1.25rem;
    text-align: left !important;
}
/* Logo più piccolo e allineato a sinistra, come le intestazioni delle app Microsoft 365 (nota di fase 241) */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .coresuite-brand-picture { justify-content: flex-start; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-brand-container .coresuite-brand-logo {
    /* Dimensioni esplicite: l'SVG non ha una larghezza propria e con width:auto sparirebbe */
    width: 150px;
    height: 30px;
    max-height: 30px;
    object-fit: contain;
    object-position: left center;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-section-label { color: var(--text-secondary); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-bottom { border-top-color: var(--border-color); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .nav-link,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .menu-group-toggle,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .menu-group-toggle.expanded {
    color: var(--fl-nav-text) !important;
    border-radius: 0.5rem;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .nav-link i { opacity: .85; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .nav-link:hover,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .menu-group-toggle:hover {
    color: var(--text-main) !important;
    background-color: var(--fl-nav-hover) !important;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"] {
    color: var(--text-main) !important;
    background-color: var(--fl-nav-active);
    box-shadow: var(--fl-shadow);
    position: relative;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active::before,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 3px;
    background: var(--fl-link);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active i,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"] i { color: var(--fl-link); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active:hover,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"]:hover { background-color: var(--fl-nav-active) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar :is(.nav-link, .menu-group-toggle, .sidebar-brand):focus-visible { outline-color: var(--fl-link); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar-content { scrollbar-color: var(--fl-scrollbar) transparent; }

/* Barra in alto, con una sottile linea sfumata di accento */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar {
    position: relative;
    background: var(--fl-topbar);
    border-bottom-color: var(--border-color);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--fl-accent);
    opacity: .7;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar .text-secondary { color: var(--text-secondary) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) #topbar-page-icon { color: var(--fl-link) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-toggle span,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-toggle span::before,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-toggle span::after { background: var(--fl-nav-text); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-toggle:hover,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-user-dropdown:hover { background-color: var(--fl-item-hover); }

/* Schede, menu a tendina e modali: angoli da 12 px e ombre morbide */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .card,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .mp-card,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-card,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .account-status-page {
    background-color: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--fl-shadow) !important;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .card-header:first-child { border-radius: 0.75rem 0.75rem 0 0; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .card-footer:last-child { border-radius: 0 0 0.75rem 0.75rem; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .system-dashboard .card:hover,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .corp-dashboard ~ .row .card:hover { box-shadow: var(--fl-shadow-raised) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .dropdown-menu,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar .dropdown-menu-end {
    --bs-dropdown-bg: var(--surface-card);
    --bs-dropdown-link-color: var(--text-main);
    --bs-dropdown-link-hover-color: var(--text-main);
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem;
    box-shadow: var(--fl-shadow-raised) !important;
    padding: .25rem;
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .dropdown-menu .dropdown-item { border-radius: .375rem; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .dropdown-menu .dropdown-item:hover { background-color: var(--fl-item-hover); color: var(--text-main) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .dropdown-menu .dropdown-item:hover i { color: var(--fl-link) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .modal-content,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .mp-modal {
    background-color: var(--surface-card);
    color: var(--text-main);
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, .12), 0 32px 64px rgba(0, 0, 0, .14);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .alert { border-radius: 0.5rem; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .badge { border-radius: 999px; font-weight: 600; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.custom-tooltip, .tooltip) { --bs-tooltip-bg: var(--fl-tooltip-bg); --bs-tooltip-color: var(--fl-tooltip-color); }

/* Pulsanti: pieni nel colore principale, secondari neutri con bordo */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .btn,
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar .btn { font-weight: 600; border-radius: 0.5rem; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.btn-primary, .btn-success) {
    --bs-btn-active-bg: var(--fl-primary-active);
    --bs-btn-active-border-color: var(--fl-primary-active);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .btn-outline-primary {
    --bs-btn-color: var(--fl-link);
    --bs-btn-border-color: var(--fl-link);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.btn-secondary, .btn-outline-secondary, .btn-light) {
    --bs-btn-color: var(--text-main);
    --bs-btn-bg: var(--fl-btn2-bg);
    --bs-btn-border-color: var(--fl-btn2-border);
    --bs-btn-hover-color: var(--text-main);
    --bs-btn-hover-bg: var(--fl-btn2-hover-bg);
    --bs-btn-hover-border-color: var(--fl-btn2-hover-border);
    --bs-btn-active-color: var(--text-main);
    --bs-btn-active-bg: var(--fl-btn2-active-bg);
    --bs-btn-active-border-color: var(--fl-btn2-active-border);
}

/* Link e testi nel colore principale: tinta più chiara nel tema scuro per restare leggibili */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.alert-link) { color: var(--fl-link); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.alert-link):hover { color: var(--fl-link-hover); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .text-primary { color: var(--fl-link) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .nav-tabs { --bs-nav-tabs-link-active-color: var(--fl-link); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .nav-tabs .nav-link:is(.active, :hover) { color: var(--fl-link); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .page-title-edit { color: var(--fl-link) !important; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .page-title-edit:is(:hover, :focus-visible) { background: var(--fl-item-hover); }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .page-title h1 { letter-spacing: -.01em; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.badge.bg-primary, .text-bg-primary) { background-color: var(--primary-color) !important; color: #ffffff !important; }

/* Campi: bordo inferiore più marcato, come nei controlli Fluent */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select) {
    border-color: var(--fl-input-border);
    border-bottom-color: var(--fl-input-underline);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select):focus {
    border-color: var(--fl-input-border);
    border-bottom: 2px solid var(--fl-link);
    box-shadow: none;
}

/* Tabelle: righe sottili, intestazioni sobrie */
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .table { --bs-table-color: var(--text-main); --bs-table-bg: transparent; }
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .table thead th {
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--surface-muted);
}
:is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .table-light { --bs-table-bg: var(--surface-muted); --bs-table-color: var(--text-main); }

/* Utility di Bootstrap pensate per il fondo chiaro: nel tema scuro seguono le superfici */
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) :is(.text-dark, .text-body) { color: var(--text-main) !important; }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .bg-white { background-color: var(--surface-card) !important; }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .bg-light { background-color: var(--surface-muted) !important; color: var(--text-main); }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .border-light { border-color: var(--border-color) !important; }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select) { background-color: #1f1f1f; }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select):disabled { background-color: var(--surface-muted); }
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .modal-content,
:is([data-theme="fluent-dark"], [data-theme="sfcj-dark"]) .mp-modal { box-shadow: 0 0 8px rgba(0, 0, 0, .5), 0 32px 64px rgba(0, 0, 0, .6); }

/* Telefono: velo neutro dietro al menu aperto */
@media (max-width: 767.98px) {
    :is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-layout:not(.sidebar-collapsed) .app-main::before { background-color: var(--fl-overlay); }
    :is([data-theme="fluent"], [data-theme="fluent-dark"], [data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar { box-shadow: var(--fl-shadow-raised); }
}