/* ===== THEME VARIABLES ===== */
:root {
    /* ── Articoli / BOM / Listini ─────────────────────────── */
    --entity-primary:        #185fa5;   /* blu sezioni articolo */
    --entity-primary-light:  #e6f1fb;   /* sfondo tab attiva, highlight */
    --entity-accent-red:     #c0392b;   /* codici figlio BOM, link listini */
    --entity-accent-green:   #1a7a4a;   /* famiglie variante verde */
    --entity-accent-teal:    #0e7c7b;   /* famiglie variante teal */
    --entity-row-selected:   #d0e4f7;   /* riga selezionata griglia */
    --entity-row-hover:      #f0f6fc;   /* riga hover griglia */

    /* ── BOM – palette livelli (ciclica su 7) ──────────────
       Derivata dalla palette Okabe-Ito (pensata per la massima
       distinguibilità, anche per il daltonismo), diluita in tinte
       chiare. Solo 7 tinte invece di 10: oltre le ~5-6 categorie la
       vista umana non distingue più in modo affidabile colori pastello
       così chiari, quindi meno tinte ma davvero distinte è meglio di
       più tinte solo teoricamente diverse. Ordine alternato caldo/freddo
       così due livelli adiacenti nel ciclo non sono mai della stessa
       famiglia di colore. */
    --bom-level-1: #f5d999;   /* arancio */
    --bom-level-2: #bbe1f6;   /* azzurro */
    --bom-level-3: #99d8c7;   /* verde acqua */
    --bom-level-4: #f9f4b3;   /* giallo */
    --bom-level-5: #99c7e0;   /* blu */
    --bom-level-6: #eebf99;   /* vermiglio */
    --bom-level-7: #ebc9dc;   /* porpora */

    --mechanica-blue: #0d6efd; /* blu principale Mechanica */
    --mechanica-blue-dark: #0a58ca; /* hover/active */
    --mechanica-blue-light: #5ba4f5; /* testi secondari, accenti chiari */
    --mechanica-blue-subtle: #cfe2ff; /* sfondi chiari, badge */

    --mechanica-text-primary: #ffffff;
    --mechanica-text-secondary: #9ab0c8;
    --mechanica-text-muted: #6c8fa8;
    --mechanica-panel-bg: rgba(10, 18, 30, 0.90);
    --mechanica-panel-border: rgba(255, 255, 255, 0.08);
    /* Homepage */
    --mechanica-overlay-bg: rgba(0, 0, 0, 0.50);
    --mechanica-info-box-bg: rgba(13, 110, 253, 0.12);
    --mechanica-info-box-border: rgba(13, 110, 253, 0.30);
    --mechanica-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    --mechanica-letter-spacing-wide: 0.25em;
    --mechanica-panel-width: 400px;
    --mechanica-subtitle-max-width: 400px;
    --mechanica-hr-height: 3px;
    --mechanica-hr-width: 20%;
    /* ── Layout autenticato ───────────────── */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Inset orizzontale standard del contenuto pagina (page-list-header, page-form-body,
       banner di alert): unica fonte di verità così i blocchi restano allineati tra loro. */
    --page-inset-x: 2rem;
    --page-bg: #f8f9fa;
    --body-color: #212529;
    --body-color-secondary: #6c757d;
    --border-color: #dee2e6;
    --accent-color: #0d6efd;
    --focus-ring-color: #258cfb;
    --overlay-bg: rgba(0, 0, 0, 0.3);
    /* ── Navbar ───────────────────────────── */
    --navbar-bg: #ffffff;
    --navbar-text: #212529;
    --navbar-hover-bg: rgba(0, 0, 0, 0.05);
    --navbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    --navbar-dropdown-shadow: rgba(0, 0, 0, 0.15);
    /* ── Sidebar ──────────────────────────── */
    --sidebar-bg: #23608C;
    --sidebar-text: #ecf0f1;
    --sidebar-header-bg: #1a4d72;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --sidebar-active-bg: rgba(255, 255, 255, 0.20);
    --sidebar-active-text: #ffffff;
    --sidebar-divider: rgba(236, 240, 241, 0.15);
    --sidebar-shadow: rgba(0, 0, 0, 0.2);
    /* ── Dashboard ────────────────────────── */
    --dashboard-bg: #f0f2f5;
    --dashboard-card-shadow: rgba(0, 0, 0, 0.08);
    --dashboard-card-hover-shadow: rgba(0, 0, 0, 0.15);
    --stat-value-color: #2c3e50;
    --stat-label-color: #7f8c8d;
    --welcome-gradient-start: var(--sidebar-bg);
    /* Stessa tonalità della voce "attiva" nel menu laterale: --sidebar-bg con la stessa
       sovrapposizione bianca al 20% usata da --sidebar-active-bg, per continuità visiva
       reale con la sidebar invece di un blu scelto a caso. */
    --welcome-gradient-end: #4f80a3;
    --quick-action-border: #e9ecef;
    --quick-action-hover-border: #0d6efd;
    --quick-action-hover-bg: #f8f9fa;
    /* ── Footer ───────────────────────────── */
    --footer-bg: #ffffff;
    /* ── Dimensioni layout ────────────────── */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --navbar-height: 56px;
    /* ── Transizioni ──────────────────────── */
    --transition-speed: 0.3s;
    /* ── File input custom ────────────────── */
    --file-input-btn-bg: #e9ecef;
    --file-input-text-color: #6c757d;
    /* ── Utility ──────────────────────────── */
    --bg-light-alt: #f9fafd;
    --link-light-color: #f8f9fa;
}

/* ===== DARK THEME ===== */
body.theme-dark {
    --page-bg: #1a1d21;
    --body-color: #e9ecef;
    --body-color-secondary: #adb5bd;
    --border-color: #373b3e;
    --navbar-bg: #212529;
    --navbar-text: #e9ecef;
    --navbar-hover-bg: rgba(255, 255, 255, 0.08);
    --navbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
    --navbar-dropdown-shadow: rgba(0, 0, 0, 0.40);
    --sidebar-bg: #161a1f;
    --sidebar-header-bg: #0d1014;
    --dashboard-bg: #212529;
    --dashboard-card-shadow: rgba(0, 0, 0, 0.30);
    --stat-value-color: #e9ecef;
    --stat-label-color: #adb5bd;
    --file-input-btn-bg: #373b3e;
    --file-input-text-color: #adb5bd;
    --bg-light-alt: #2b2f33;
    --quick-action-hover-bg: #2b2f33;
    --quick-action-border: #373b3e;
    --footer-bg: #212529;

    /* ── BOM – palette livelli (ciclica su 7), varianti scure ────
       Stessa tonalità (hue) delle varianti chiare, luminosità ridotta:
       coerenza visiva tra i due temi e stessa distinguibilità. */
    --bom-level-1: #684800;   /* arancio */
    --bom-level-2: #275169;   /* azzurro */
    --bom-level-3: #004734;   /* verde acqua */
    --bom-level-4: #6c671e;   /* giallo */
    --bom-level-5: #003350;   /* blu */
    --bom-level-6: #602a00;   /* vermiglio */
    --bom-level-7: #5c364b;   /* porpora */
}

body.theme-dark .card {
    background-color: #2b2f33;
    color: var(--body-color);
}

body.theme-dark .card-header {
    background-color: #373b3e !important;
    border-bottom-color: #454a4f;
    color: var(--body-color);
}

body.theme-dark .table {
    color: var(--body-color);
    --bs-table-bg: #2b2f33;
    --bs-table-striped-bg: #313539;
    --bs-table-hover-bg: #3a3f45;
}

body.theme-dark .dropdown-menu {
    background-color: #2b2f33;
    border-color: #454a4f;
}

body.theme-dark .dropdown-item {
    color: var(--body-color);
}

body.theme-dark .dropdown-item:hover {
    background-color: #373b3e;
}

body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: #373b3e;
    border-color: #454a4f;
    color: var(--body-color);
}

body.theme-dark .btn-outline-secondary {
    color: #adb5bd;
    border-color: #6c757d;
}

body.theme-dark .text-dark {
    color: #e9ecef !important;
}

body.theme-dark .bg-light {
    background-color: #373b3e !important;
}

body.theme-dark .navbar .nav-link,
body.theme-dark .navbar .btn-link {
    color: #e9ecef !important;
}

body.theme-dark .e-grid,
body.theme-dark .e-gridcontent,
body.theme-dark .e-rowcell {
    background-color: #2b2f33 !important;
    color: var(--body-color) !important;
    border-color: #454a4f !important;
}

/* Pannello login: fullscreen su mobile (unico elemento visibile), fisso su desktop */
.mechanica-login-panel {
    width: 100%;
    flex: 1;                /* occupa tutto il flex-grow su mobile */
    max-width: 100%;
}

/* Contenuto interno del pannello: su mobile centrato e con larghezza massima leggibile */
.mechanica-login-panel > * {
    width: 100%;
    max-width: var(--mechanica-panel-width);
}

@media (min-width: 768px) {
    .mechanica-login-panel {
        width: var(--mechanica-panel-width);
        flex: none;
        max-width: var(--mechanica-panel-width);
        border-left: 1px solid var(--mechanica-panel-border);
    }

    .mechanica-login-panel > * {
        max-width: none;
    }
}