@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   theme.css - TEMA CORPORATE ENTERPRISE
   v1.2.0-beta
   Fonts: Plus Jakarta Sans (contenuto) � DM Sans (sidebar light)
   ============================================================ */


/* ==================== TEMA SCURO ==================== */
/* :root = default quando data-theme non è ancora impostato (es. primo render
   dopo l'attivazione v1.1.0). Evita la dashboard "piatta" con variabili non
   risolte: il tema scuro è il default dell'app. */
:root,
[data-theme="dark"] {
    --bg-app: #0b1120;
    --bg-sidebar: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #263348;
    --bg-input: #0f172a;
    --bg-header: #0f172a;
    --bg-table-header: #1e3a8a;
    --bg-table-row-hover: rgba(255, 255, 255, 0.05);
    --bg-chip: rgba(59, 130, 246, 0.15);
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --bg-popup: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-heading: #ffffff;
    --text-accent: #60a5fa;
    --text-on-primary: #ffffff;
    --border-default: #1e293b;
    --border-light: #334155;
    --border-input: #334155;
    --border-input-focus: #3b82f6;
    --accent-primary: #2563eb;
    --accent-primary-hover: #3b82f6;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-info: #0ea5e9;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --badge-success-bg: rgba(34, 197, 94, 0.2);
    --badge-success-text: #86efac;
    --badge-success-border: rgba(34, 197, 94, 0.4);
    --badge-warning-bg: rgba(250, 204, 21, 0.2);
    --badge-warning-text: #fde047;
    --badge-warning-border: rgba(250, 204, 21, 0.4);
    --badge-danger-bg: rgba(248, 113, 113, 0.2);
    --badge-danger-text: #fca5a5;
    --badge-danger-border: rgba(248, 113, 113, 0.4);
    --badge-info-bg: rgba(59, 130, 246, 0.15);
    --badge-info-text: #60a5fa;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-popup: 0 10px 40px rgba(0, 0, 0, 0.5);
    --scrollbar-track: #0f172a;
    --scrollbar-thumb: #334155;
    --font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --font-sidebar: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --nav-font-size: 0.9375rem;
    --nav-font-weight: 500;
    --nav-link-color: rgba(255, 255, 255, 0.72);
    --nav-link-hover-color: #ffffff;
    --nav-link-active-color: #ffffff;
    --nav-label-color: rgba(255, 255, 255, 0.30);
    --nav-label-font-size: 0.6875rem;
    --mud-palette-background: #0b1120;
    --mud-palette-surface: #1e293b;
    --mud-palette-appbar-background: #0f172a;
    --mud-palette-drawer-background: #0f172a;
}


/* ==================== TEMA CHIARO CORPORATE ==================== */
[data-theme="light"] {
    --bg-app: #eef2f9;
    --bg-sidebar: rgba(255, 255, 255, 0.85);
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --bg-input: #ffffff;
    --bg-header: #ffffff;
    --bg-table-header: #f0f0f0;
    --bg-table-row-hover: #fafafa;
    --bg-chip: rgba(37, 99, 235, 0.06);
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --bg-popup: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-heading: #111827;
    --text-accent: #1d4ed8;
    --text-on-primary: #ffffff;
    --border-default: #e5e7eb;
    --border-light: #f3f4f6;
    --border-input: #d1d5db;
    --border-input-focus: #1d4ed8;
    --accent-primary: #1d4ed8;
    --accent-primary-hover: #1e40af;
    --accent-success: #15803d;
    --accent-warning: #b45309;
    --accent-danger: #b91c1c;
    --accent-info: #0369a1;
    --accent-purple: #6d28d9;
    --accent-pink: #be185d;
    --badge-success-bg: #f0fdf4;
    --badge-success-text: #15803d;
    --badge-success-border: #bbf7d0;
    --badge-warning-bg: #fffbeb;
    --badge-warning-text: #b45309;
    --badge-warning-border: #fde68a;
    --badge-danger-bg: #fef2f2;
    --badge-danger-text: #b91c1c;
    --badge-danger-border: #fecaca;
    --badge-info-bg: #eff6ff;
    --badge-info-text: #1d4ed8;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.10);
    --scrollbar-track: #f0f0f0;
    --scrollbar-thumb: #d1d5db;
    --font-family: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-sidebar: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --nav-font-size: 0.9375rem;
    --nav-font-weight: 500;
    --nav-link-color: #374151;
    --nav-link-hover-color: #1d4ed8;
    --nav-link-active-color: #1d4ed8;
    --nav-label-color: #9ca3af;
    --nav-label-font-size: 0.6875rem;
    --mud-palette-background: #eef2f9;
    --mud-palette-surface: #ffffff;
    --mud-palette-appbar-background: #ffffff;
    --mud-palette-drawer-background: #ffffff;
}


/* ============================================================
   STILI BASE GLOBALI
   ============================================================ */

/* NB: niente transition globale su "*": al cambio tema animava ogni singolo
   elemento della pagina causando lag/scatti. Le transizioni utili sono definite
   sui singoli componenti (card, pulsanti, toggle, ecc.). */

/* Disabilita TUTTE le transizioni durante il cambio tema (classe aggiunta/rimossa
   da themeManager.apply() in Theme.js tramite double-rAF) */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* Disabilita transizioni su elementi animati */
.mud-progress-circular *,
.mud-progress-linear *,
[class*="animate"] * {
    transition: none !important;
}

/* Font globale applicato a ogni elemento */
*,
*::before,
*::after {
    font-family: var(--font-family) !important;
}


/* ============================================================
   SIDEBAR NAVIGATION � DARK THEME
   Testo bianco con opacit� calibrata, dimensione aumentata
   ============================================================ */

[data-theme="dark"] .nav-link {
    color: var(--nav-link-color) !important;
    font-size: var(--nav-font-size) !important;
    font-weight: var(--nav-font-weight) !important;
    font-family: var(--font-sidebar) !important;
    letter-spacing: -0.01em !important;
}

    [data-theme="dark"] .nav-link .nav-text {
        color: inherit !important;
        font-size: inherit !important;
    }

    [data-theme="dark"] .nav-link:hover,
    [data-theme="dark"] .nav-link:hover .nav-text {
        color: var(--nav-link-hover-color) !important;
    }

    [data-theme="dark"] .nav-link.active,
    [data-theme="dark"] .nav-link.active .nav-text {
        color: var(--nav-link-active-color) !important;
    }

[data-theme="dark"] .menu-label {
    color: var(--nav-label-color) !important;
    font-size: var(--nav-label-font-size) !important;
    font-family: var(--font-sidebar) !important;
    letter-spacing: 0.10em !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}


/* ============================================================
   SIDEBAR NAVIGATION � LIGHT THEME
   DM Sans: ottico perfetto su bianco, lettering premium
   ============================================================ */

[data-theme="light"] .nav-icon {
    display: none !important;
}

[data-theme="light"] .nav-link {
    color: var(--nav-link-color) !important;
    font-size: var(--nav-font-size) !important;
    font-weight: var(--nav-font-weight) !important;
    font-family: var(--font-sidebar) !important;
    letter-spacing: -0.01em !important;
}

    [data-theme="light"] .nav-link .nav-text {
        color: inherit !important;
        font-size: inherit !important;
        font-family: var(--font-sidebar) !important;
    }

    [data-theme="light"] .nav-link:hover,
    [data-theme="light"] .nav-link:hover .nav-text {
        color: var(--nav-link-hover-color) !important;
    }

    [data-theme="light"] .nav-link.active,
    [data-theme="light"] .nav-link.active .nav-text {
        color: var(--nav-link-active-color) !important;
        font-weight: 600 !important;
    }

[data-theme="light"] .menu-label {
    color: var(--nav-label-color) !important;
    font-size: var(--nav-label-font-size) !important;
    font-family: var(--font-sidebar) !important;
    letter-spacing: 0.10em !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-tertiary);
    }
