/* ===== 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;
    /* Colore "brand" usato come TESTO/bordo sottile fuori dalla sidebar (titoli pagina,
       separatori, tab, pulsanti ghost nell'header). Distinto da --sidebar-bg: quello e' lo
       sfondo della sidebar e nel tema scuro deve restare scuro, mentre il testo che lo
       riprendeva per continuita' visiva ha bisogno di restare leggibile sulle superfici. */
    --brand-ink: var(--sidebar-bg);
    /* Overlay hover dei bottoni "ghost" nell'header: scurisce leggermente un fondo chiaro. */
    --ghost-hover-bg: rgba(0, 0, 0, 0.07);
    --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;
    /* --- Superfici (gerarchia dei piani) --------------- */
    --surface-1: #ffffff;              /* card, pannelli                      */
    --surface-2: #f1f3f5;              /* intestazioni, campi, zone incassate */
    --surface-3: #e9ecef;              /* hover su superfici                  */

    /* --- Stati ticket (pill) --------------------------- */
    --st-open-fg:  #1d4ed8;  --st-open-bg:  #e6edfb;
    --st-prog-fg:  #0e7490;  --st-prog-bg:  #dcf1f5;
    --st-wait-fg:  #b45309;  --st-wait-bg:  #fbeeda;
    --st-reso-fg:  #15803d;  --st-reso-bg:  #e2f3e7;
    --st-clos-fg:  #556172;  --st-clos-bg:  #e9edf1;
    --st-canc-fg:  #b42318;  --st-canc-bg:  #fbe7e4;

    /* --- Priorita' (badge pieni) ----------------------- */
    --pr-low:  #64748b;  --pr-norm: #0284c7;  --pr-high: #ea580c;  --pr-urg:  #dc2626;
    --pr-fg:   #ffffff;                /* testo dentro il badge priorita'     */

    /* --- Segnali -------------------------------------- */
    --danger-fg: #b42318;              /* scadenza superata, allerta          */
    --accent-soft-bg: rgba(13, 110, 253, .10);

    /* ── Utility ──────────────────────────── */
    --bg-light-alt: #f9fafd;
    --link-light-color: #f8f9fa;
}

/* ===== DARK THEME ===== */
body.theme-dark {
    /* Grigi con una lieve dominante blu invece che neutri piatti: danno profondita'
       e restano coerenti con l'azzurro dell'interfaccia. I piani sono tre e ben
       separati (sfondo < card < campi), cosi' la gerarchia si legge senza bordi forti. */
    --page-bg: #12161c;
    --body-color: #e7ecf3;                 /* testo principale                  */
    --body-color-secondary: #aab6c5;       /* testo secondario, ~7:1 su card    */
    --border-color: #303a47;
    --surface-1: #1b212a;                  /* card, pannelli                    */
    --surface-2: #232b36;                  /* intestazioni, campi               */
    --surface-3: #2c3542;                  /* hover                             */

    --navbar-bg: #171d25;
    --navbar-text: #e7ecf3;
    --navbar-hover-bg: rgba(255, 255, 255, 0.07);
    --navbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    --navbar-dropdown-shadow: rgba(0, 0, 0, 0.55);
    --sidebar-bg: #141a22;
    /* Qui --sidebar-bg torna a essere scurissimo (giusto: la sidebar resta scura anche in
       dark), quindi il testo che lo riprendeva per coerenza visiva va ridefinito a parte,
       altrimenti diventa illeggibile sulle stesse superfici scure che lo circondano. */
    --brand-ink: var(--accent-color);
    /* Lo stesso overlay scuro renderebbe un fondo gia' scuro quasi invisibile: qui va
       schiarito, non scurito. */
    --ghost-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-header-bg: #0e131a;
    --dashboard-bg: #12161c;
    --dashboard-card-shadow: rgba(0, 0, 0, 0.45);
    --dashboard-card-hover-shadow: rgba(0, 0, 0, 0.60);
    --stat-value-color: #f2f5f9;
    --stat-label-color: #aab6c5;
    --file-input-btn-bg: #2c3542;
    --file-input-text-color: #aab6c5;
    --bg-light-alt: #232b36;
    --quick-action-hover-bg: #232b36;
    --quick-action-border: #303a47;
    --footer-bg: #171d25;

    /* L'azzurro pieno su fondo scuro abbaglia: schiarito e leggermente desaturato. */
    --accent-color: #4d9bff;
    --focus-ring-color: #5aa8ff;
    --accent-soft-bg: rgba(77, 155, 255, .16);
    --overlay-bg: rgba(0, 0, 0, 0.55);

    /* Stati: testo chiaro su fondo tenue della stessa tinta (niente isole chiare). */
    --st-open-fg:  #9dbcff;  --st-open-bg:  #1a2740;
    --st-prog-fg:  #6fd0e2;  --st-prog-bg:  #12333d;
    --st-wait-fg:  #efc07d;  --st-wait-bg:  #3a2a11;
    --st-reso-fg:  #86dda2;  --st-reso-bg:  #163422;
    --st-clos-fg:  #b3bfcd;  --st-clos-bg:  #262f3b;
    --st-canc-fg:  #f7ada2;  --st-canc-bg:  #3a1d19;

    /* Priorita': stesse tinte, luminosita' ridotta per non bruciare sul fondo scuro;
       il testo interno diventa scuro, che su queste tinte legge meglio del bianco. */
    --pr-low:  #7a8798;  --pr-norm: #2b8fd4;  --pr-high: #d4691f;  --pr-urg:  #e05c5c;
    --pr-fg:   #0f1319;

    --danger-fg: #ff9d94;                  /* scadenza superata                 */

    /* Variabili Bootstrap: senza queste i componenti nativi e le classi che le usano
       (.text-muted, .border, .card, i campi) resterebbero chiari sul fondo scuro. */
    --bs-body-bg: #12161c;
    --bs-body-color: #e7ecf3;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #aab6c5;
    --bs-secondary-bg: #232b36;
    --bs-tertiary-bg: #1b212a;
    --bs-border-color: #303a47;
    --bs-heading-color: #f2f5f9;
    --bs-link-color: #6aa9ff;
    --bs-link-hover-color: #8dbeff;
    --bs-code-color: #f0a3c8;

    /* ── 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 */
}

/* Pulsanti "ghost" nell'header pagina (.page-list-header): in light i colori funzionano
   per caso (fallback pensati per sfondo chiaro), in dark serve un valore esplicito che resti
   leggibile sulle stesse superfici scure circostanti. */
body.theme-dark .page-list-header .btn-danger,
body.theme-dark .page-list-header .btn-outline-danger {
    color: var(--st-canc-fg) !important;
}
body.theme-dark .page-list-header .btn-warning,
body.theme-dark .page-list-header .btn-outline-warning {
    color: var(--st-wait-fg) !important;
}
body.theme-dark .page-list-header .btn-success,
body.theme-dark .page-list-header .btn-outline-success {
    color: var(--st-reso-fg) !important;
}

body.theme-dark .card {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--body-color);
}

body.theme-dark .card-header,
body.theme-dark .card-footer {
    background-color: var(--surface-2) !important;
    border-color: var(--border-color);
    color: var(--body-color);
}

body.theme-dark .table {
    color: var(--body-color);
    --bs-table-color: var(--body-color);
    --bs-table-bg: var(--surface-1);
    --bs-table-striped-bg: #202834;
    --bs-table-striped-color: var(--body-color);
    --bs-table-hover-bg: var(--surface-3);
    --bs-table-hover-color: var(--body-color);
    --bs-table-border-color: var(--border-color);
}

body.theme-dark .dropdown-menu {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

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

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background-color: var(--surface-3);
    color: var(--body-color);
}

body.theme-dark .dropdown-divider {
    border-top-color: var(--border-color);
}

body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--body-color);
}

/* Il segnaposto deve restare distinguibile dal testo digitato senza sparire. */
body.theme-dark .form-control::placeholder {
    color: #8794a6;
    opacity: 1;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: var(--surface-2);
    border-color: var(--accent-color);
    color: var(--body-color);
    box-shadow: 0 0 0 .2rem rgba(77, 155, 255, .25);
}

/* Caselle e interruttori: senza questo restano bianchi e "bucano" il fondo scuro. */
body.theme-dark .form-check-input {
    background-color: var(--surface-3);
    border-color: var(--border-color);
}
body.theme-dark .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

body.theme-dark .btn-outline-secondary {
    color: var(--body-color-secondary);
    border-color: #4a5666;
}
body.theme-dark .btn-outline-secondary:hover {
    background-color: var(--surface-3);
    color: var(--body-color);
    border-color: #5a6878;
}

/* .btn-light resterebbe bianco brillante: e' usato per "Indietro" accanto ai titoli. */
body.theme-dark .btn-light {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--body-color);
}
body.theme-dark .btn-light:hover {
    background-color: var(--surface-3);
    color: var(--body-color);
}

body.theme-dark .text-dark {
    color: var(--body-color) !important;
}

body.theme-dark .bg-light,
body.theme-dark .text-bg-light {
    background-color: var(--surface-2) !important;
    color: var(--body-color) !important;
}

/* I "subtle" di Bootstrap sono pensati per fondo chiaro: qui vanno scuriti,
   altrimenti diventano macchie chiare con testo poco leggibile. */
body.theme-dark .bg-secondary-subtle { background-color: var(--st-clos-bg) !important; }
body.theme-dark .text-secondary { color: var(--st-clos-fg) !important; }
body.theme-dark .bg-primary-subtle { background-color: var(--st-open-bg) !important; }
body.theme-dark .text-primary { color: var(--st-open-fg) !important; }
body.theme-dark .bg-success-subtle { background-color: var(--st-reso-bg) !important; }
body.theme-dark .text-success { color: var(--st-reso-fg) !important; }
body.theme-dark .bg-warning-subtle { background-color: var(--st-wait-bg) !important; }
body.theme-dark .text-warning { color: var(--st-wait-fg) !important; }
body.theme-dark .bg-danger-subtle { background-color: var(--st-canc-bg) !important; }
body.theme-dark .text-danger { color: var(--st-canc-fg) !important; }
body.theme-dark .bg-info-subtle { background-color: var(--st-prog-bg) !important; }
body.theme-dark .text-info { color: var(--st-prog-fg) !important; }

/* .text-muted su fondo scuro scendeva sotto la soglia di leggibilita'. */
body.theme-dark .text-muted {
    color: var(--body-color-secondary) !important;
}

body.theme-dark .alert-info {
    background-color: var(--st-prog-bg);
    border-color: var(--st-prog-fg);
    color: var(--body-color);
}
body.theme-dark .alert-danger {
    background-color: var(--st-canc-bg);
    border-color: var(--st-canc-fg);
    color: var(--body-color);
}
body.theme-dark .alert-success {
    background-color: var(--st-reso-bg);
    border-color: var(--st-reso-fg);
    color: var(--body-color);
}

body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-bottom,
body.theme-dark .border-start,
body.theme-dark .border-end {
    border-color: var(--border-color) !important;
}

body.theme-dark hr {
    border-color: var(--border-color);
    opacity: 1;
}

body.theme-dark code {
    color: var(--bs-code-color);
    background-color: var(--surface-2);
    padding: .1rem .3rem;
    border-radius: 3px;
}

body.theme-dark .navbar .nav-link,
body.theme-dark .navbar .btn-link {
    color: var(--body-color) !important;
}

body.theme-dark .modal-content,
body.theme-dark .offcanvas {
    background-color: var(--surface-1);
    color: var(--body-color);
    border-color: var(--border-color);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: var(--border-color);
}
/* La X di chiusura e' un'icona nera: va invertita per vedersi sul fondo scuro. */
body.theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Le griglie Syncfusion in tema scuro usano il foglio di stile nativo fluent-dark.css
   (scambiato al posto di fluent.css: vedi sfThemeCss nel layout e syncSyncfusionTheme in
   sidebar.js), non override qui: inseguire un CSS di terze parti con !important e' fragile
   e va rifatto ad ogni aggiornamento della libreria. */


/* 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;
    }
}