/* ==========================================================================
   Maintenet · Dark Mode
   --------------------------------------------------------------------------
   Additivo: non modifica in alcun modo il tema chiaro esistente.
   Ogni regola scura è prefissata da :root[data-theme="dark"] (specificità 0,2,x)
   così da vincere sempre sui blocchi <style> inline delle pagine senza
   ricorrere a !important (usato solo dove la sorgente lo usa a sua volta).

   Palette scura: slate freddo neutro (non nero puro → niente smear OLED,
   meno affaticamento) + accento teal Maintenet schiarito per il contrasto.
   Tutti i rapporti testo/superficie sono ≥ 4.5:1 (WCAG AA).
   ========================================================================== */

/* ==========================================================================
   1 · TEMA CHIARO — solo token aggiuntivi, nessun cambiamento visivo
   I valori qui sotto replicano esattamente i colori già hard-coded oggi,
   così da poterli tematizzare senza alterare il rendering in light mode.
   ========================================================================== */
:root {
    color-scheme: light;

    /* Inchiostro sulle superfici piene di brand */
    --on-teal: #ffffff;

    /* Badge priorità (valori identici a quelli attuali di priority.js) */
    --pri-emergency-bg: #fcebeb;
    --pri-emergency-fg: #8b0000;
    --pri-same-day-bg: #faeeda;
    --pri-same-day-fg: #854f0b;
    --pri-1-3-bg: #e6f1fb;
    --pri-1-3-fg: #185fa5;
    --pri-3-5-bg: #f1efe8;
    --pri-3-5-fg: #5f5e5a;
    --pri-tba-bg: #eef1f5;
    --pri-tba-fg: #6c757d;

    /* Pallini del registro attività */
    --log-ok: #1d9e75;
    --log-info: #1558a0;
    --log-warn: #8a6200;
    --log-danger: #b52828;

    /* Grafici */
    --chart-grid: rgba(30, 50, 80, .06);
    --chart-tick: #6c757d;
    --chart-label: #1c2331;
    --chart-stroke: #ffffff;

    /* Scrim delle modali */
    --scrim: rgba(15, 25, 45, .45);
}

/* ==========================================================================
   2 · TEMA SCURO — token
   ========================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* ── Superfici ──
       canvas  → sfondo pagina        (più scuro di tutto)
       --bg    → card, topbar, tabelle
       --bg2   → hover / intestazioni / superfici sollevate
       --bg3   → superfici incassate: input, chip, allegati            */
    --canvas: #0c1014;
    --bg: #171d26;
    --bg2: #222c38;
    --bg3: #10161e;

    /* ── Testo ── (contrasto su --bg: 13.4 / 6.9 / 4.6) */
    --text: #e6edf3;
    --text2: #9caab8;
    --text3: #7b8a99;

    /* ── Bordi ── (chiari in alpha: restano visibili su ogni superficie) */
    --border: rgba(230, 237, 243, .11);
    --border2: rgba(230, 237, 243, .22);

    /* ── Brand teal — variante tonale più chiara, non il colore invertito ──
       come foreground su --bg: 6.3:1 · l'inchiostro sui pieni diventa scuro  */
    --teal: #2ebd8e;
    --teal-bg: rgba(46, 189, 142, .15);
    --teal-border: rgba(46, 189, 142, .38);
    --accent: #2ebd8e;
    --on-teal: #04231a;

    /* ── Semantici — superficie tinta + testo chiaro (mai colore invertito) ── */
    --info-bg: rgba(88, 166, 255, .15);
    --info-text: #79c0ff;
    --info-border: rgba(88, 166, 255, .34);

    --success-bg: rgba(63, 185, 80, .15);
    --success-text: #56d364;
    --success-border: rgba(63, 185, 80, .34);

    --warn-bg: rgba(219, 158, 44, .15);
    --warn-text: #e3b341;
    --warn-border: rgba(219, 158, 44, .34);

    --danger-bg: rgba(248, 81, 73, .15);
    --danger-text: #ff8b83;
    --danger-border: rgba(248, 81, 73, .34);

    /* ── Elevazione — al buio l'ombra da sola non basta:
       profondità = ombra più densa + bordo chiaro sul token --border ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .32);

    /* ── Badge priorità ── */
    --pri-emergency-bg: rgba(248, 81, 73, .16);
    --pri-emergency-fg: #ff9d95;
    --pri-same-day-bg: rgba(219, 158, 44, .16);
    --pri-same-day-fg: #e9c46a;
    --pri-1-3-bg: rgba(88, 166, 255, .16);
    --pri-1-3-fg: #8cc8ff;
    --pri-3-5-bg: rgba(190, 195, 185, .13);
    --pri-3-5-fg: #c2beb2;
    --pri-tba-bg: rgba(156, 170, 184, .13);
    --pri-tba-fg: #a8b6c3;

    /* ── Registro attività ── */
    --log-ok: #3fd39d;
    --log-info: #79c0ff;
    --log-warn: #e3b341;
    --log-danger: #ff8b83;

    /* ── Grafici ── */
    --chart-grid: rgba(230, 237, 243, .08);
    --chart-tick: #9caab8;
    --chart-label: #e6edf3;
    --chart-stroke: #171d26;

    /* ── Scrim: 65% per isolare davvero il contenuto in primo piano ── */
    --scrim: rgba(0, 0, 0, .66);
}

/* ==========================================================================
   3 · TEMA SCURO — superfici di base
   ========================================================================== */
:root[data-theme="dark"] body {
    background: var(--canvas);
    color: var(--text);
}

/* Il logo è teal su fondo trasparente: al buio va schiarito per restare leggibile */
:root[data-theme="dark"] .logo-mark img,
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .card-logo img {
    filter: brightness(1.22) saturate(1.04);
}

/* Selezione testo */
:root[data-theme="dark"] ::selection {
    background: rgba(46, 189, 142, .3);
    color: #ffffff;
}

/* Scrollbar (WebKit; Firefox è coperto da color-scheme) */
:root[data-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--canvas);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2f3b49;
    border: 2px solid var(--canvas);
    border-radius: 8px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d4b5c;
}

/* Focus ring visibile su fondo scuro per gli elementi che non hanno già uno
   stato di focus disegnato (input/textarea/select usano border + box-shadow). */
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] [tabindex]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ==========================================================================
   4 · TEMA SCURO — index.html (dashboard)
   ========================================================================== */

/* Righe tabella: hover appena percettibile ma distinto dallo zebra */
:root[data-theme="dark"] tbody tr:hover {
    background: #1e2732;
}

/* Colonna con filtro attivo (la sorgente usa !important) */
:root[data-theme="dark"] thead th.col-filtered {
    background: rgba(46, 189, 142, .16) !important;
}

:root[data-theme="dark"] .th-filter-btn:hover {
    background: rgba(230, 237, 243, .1);
}

/* Dropdown filtri colonna */
:root[data-theme="dark"] .cfd {
    box-shadow: 0 6px 28px rgba(0, 0, 0, .6);
}

/* Modali */
:root[data-theme="dark"] .modal-overlay {
    background: var(--scrim);
}

:root[data-theme="dark"] .modal {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
}

/* Indicatore di connessione "in caricamento" */
:root[data-theme="dark"] .dot.loading {
    background: var(--warn-text);
}

/* Export */
:root[data-theme="dark"] .btn-export {
    background: var(--bg);
}

:root[data-theme="dark"] .btn-export:hover {
    background: var(--bg2);
}

/* FAB: il bagliore teal resta, ridotto per non "bruciare" sul fondo scuro */
:root[data-theme="dark"] .fab-create {
    box-shadow: 0 4px 18px rgba(46, 189, 142, .32);
}

:root[data-theme="dark"] .mcard:active {
    box-shadow: 0 2px 12px rgba(46, 189, 142, .28);
}

/* ==========================================================================
   5 · TEMA SCURO — ticket-detail.html
   ========================================================================== */
:root[data-theme="dark"] .ws-table tbody tr:hover {
    background: #1e2732;
}

/* Icone allegato: allineate ai token semantici invece dei pastelli chiari */
:root[data-theme="dark"] .att-icon.pdf {
    background: var(--danger-bg);
    color: var(--danger-text);
}

:root[data-theme="dark"] .att-icon.doc {
    background: var(--info-bg);
    color: var(--info-text);
}

/* Approva / Rifiuta: pieni vivi + inchiostro scuro → contrasto ~9:1 */
:root[data-theme="dark"] .btn-approve {
    background: #3fb950;
    color: #052e16;
}

:root[data-theme="dark"] .btn-reject {
    background: #f85149;
    color: #2d0a08;
}

:root[data-theme="dark"] .lightbox-overlay {
    background: rgba(0, 0, 0, .9);
}

/* ==========================================================================
   6 · TEMA SCURO — pieni di brand
   Sul teal schiarito il testo bianco scenderebbe a ~2.7:1.
   Si inverte l'inchiostro (--on-teal scuro) → ~8:1, pattern standard
   dei design system scuri.
   ========================================================================== */
:root[data-theme="dark"] .btn-connect,
:root[data-theme="dark"] .cfd-ok-btn,
:root[data-theme="dark"] .btn-create,
:root[data-theme="dark"] .btn-create-submit,
:root[data-theme="dark"] .fab-create,
:root[data-theme="dark"] .pg-btn.active,
:root[data-theme="dark"] .btn-clear-all-filters:hover,
:root[data-theme="dark"] .btn-post-note,
:root[data-theme="dark"] .btn-add-att,
:root[data-theme="dark"] .btn-upload-confirm,
:root[data-theme="dark"] .btn-dl:hover,
:root[data-theme="dark"] .btn-submit,
:root[data-theme="dark"] .btn-go-list {
    color: var(--on-teal);
}

/* Spinner dentro i pulsanti pieni: deve seguire l'inchiostro, non il bianco */
:root[data-theme="dark"] .btn-create-submit .spinner-sm,
:root[data-theme="dark"] .btn-submit .spinner-sm,
:root[data-theme="dark"] .post-spinner,
:root[data-theme="dark"] .upload-spinner {
    border-color: rgba(4, 35, 26, .32);
    border-top-color: var(--on-teal);
}

/* ==========================================================================
   7 · TEMA SCURO — login.html
   La pagina di login usa un vocabolario di token diverso (--gray-*, --blue,
   --white). Tutte le regole qui sotto sono limitate a  html[data-app="login"]
   per non contaminare le altre pagine, che riusano gli stessi nomi
   (--text, --border, --success…) con significati diversi.
   --white NON viene rimappato: è anche il testo del pulsante Accedi.
   ========================================================================== */
:root[data-theme="dark"][data-app="login"] {
    --text: #e6edf3;
    --text-muted: #9caab8;
    --border: rgba(230, 237, 243, .22);

    --gray-50: #0c1014;
    --gray-100: #222c38;
    --gray-200: rgba(230, 237, 243, .11);
    --gray-300: rgba(230, 237, 243, .22);
    --gray-400: #8b99a8;
    /* schiarito rispetto a --text3: è usato anche per .conn-sub su .conn-status */
    --gray-500: #9caab8;
    --gray-700: #c2ced9;
    --gray-900: #e6edf3;

    /* Blu schiarito: 6.4:1 come foreground su superficie scura */
    --blue: #4d9de8;
    --blue-hover: #63aaec;
    --blue-dark: #8cc4f2;
    --blue-dim: rgba(77, 157, 232, .16);
    --blue-light: rgba(77, 157, 232, .12);

    --error: #ff8b83;
    --error-bg: rgba(248, 81, 73, .15);
    --success: #56d364;
    --success-bg: rgba(63, 185, 80, .15);

    /* usato da .flag-btn.active (fallback #1d9e75, troppo cupo al buio) */
    --teal: #2ebd8e;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .32);
    --shadow-nav: 0 1px 0 rgba(0, 0, 0, .5);

    /* Superfici dedicate */
    --dm-surface: #171d26;
    --dm-surface-2: #222c38;
    --dm-recessed: #10161e;
}

:root[data-theme="dark"][data-app="login"],
:root[data-theme="dark"][data-app="login"] body {
    background: var(--gray-50);
    color: var(--text);
}

:root[data-theme="dark"][data-app="login"] .navbar,
:root[data-theme="dark"][data-app="login"] footer,
:root[data-theme="dark"][data-app="login"] .card {
    background: var(--dm-surface);
}

:root[data-theme="dark"][data-app="login"] .conn-status {
    background: var(--dm-surface-2);
}

:root[data-theme="dark"][data-app="login"] input[type=email],
:root[data-theme="dark"][data-app="login"] input[type=password] {
    background: var(--dm-recessed);
    color: var(--gray-900);
}

:root[data-theme="dark"][data-app="login"] input[type=email]:focus,
:root[data-theme="dark"][data-app="login"] input[type=password]:focus {
    box-shadow: 0 0 0 3px rgba(77, 157, 232, .2);
}

:root[data-theme="dark"][data-app="login"] .conn-dot.ok {
    box-shadow: 0 0 0 3px rgba(63, 185, 80, .2);
}

:root[data-theme="dark"][data-app="login"] .conn-dot.fail {
    box-shadow: 0 0 0 3px rgba(248, 81, 73, .18);
}

:root[data-theme="dark"][data-app="login"] .alert {
    border-color: rgba(248, 81, 73, .34);
}

/* .footer-link ha il colore hard-coded (#3c4043): al buio sparirebbe */
:root[data-theme="dark"][data-app="login"] .footer-link {
    color: var(--gray-700);
}

:root[data-theme="dark"][data-app="login"] .footer-link:hover {
    color: var(--blue);
}

:root[data-theme="dark"][data-app="login"] input.err {
    box-shadow: 0 0 0 3px rgba(248, 81, 73, .18);
}

/* Il pulsante Accedi resta pieno: inchiostro scuro sul blu schiarito (8.4:1) */
:root[data-theme="dark"][data-app="login"] .btn-accedi {
    color: #06182b;
}

:root[data-theme="dark"][data-app="login"] .btn-accedi:hover {
    box-shadow: 0 1px 3px rgba(77, 157, 232, .4);
}

:root[data-theme="dark"][data-app="login"] .btn-accedi .spinner {
    border-color: rgba(6, 24, 43, .32);
    border-top-color: #06182b;
}

/* ==========================================================================
   8 · TOGGLE TEMA — componente
   Icon button 30×30 visivi con area di tocco estesa a 44×44 via ::after,
   così non altera l'altezza della topbar ma resta conforme al touch target.
   ========================================================================== */
#theme-mount {
    display: flex;
    align-items: center;
}

.mn-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border2, rgba(30, 50, 80, .16));
    background: var(--bg, #fff);
    color: var(--text2, #6c757d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Area di tocco estesa (40×44) senza impatto sul layout: la larghezza resta
   entro il gap di 8px della topbar, così non ruba il tap ai pulsanti vicini. */
.mn-theme-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.mn-theme-toggle:hover {
    background: var(--bg2, #eef1f5);
    color: var(--teal, #1d9e75);
    border-color: var(--teal-border, rgba(29, 158, 117, .28));
}

.mn-theme-toggle:active {
    transform: scale(.94);
}

.mn-theme-toggle:focus-visible {
    outline: 2px solid var(--teal, #1d9e75);
    outline-offset: 2px;
}

/* Le due icone sono sovrapposte: cross-fade + rotazione al cambio tema */
.mn-theme-toggle .mn-ico {
    position: absolute;
    width: 16px;
    height: 16px;
    display: block;
    transition: opacity .22s ease, transform .32s cubic-bezier(.16, 1, .3, 1);
}

.mn-theme-toggle .mn-ico-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.mn-theme-toggle .mn-ico-moon {
    opacity: 0;
    transform: rotate(-70deg) scale(.55);
}

:root[data-theme="dark"] .mn-theme-toggle .mn-ico-sun {
    opacity: 0;
    transform: rotate(70deg) scale(.55);
}

:root[data-theme="dark"] .mn-theme-toggle .mn-ico-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Variante login: la navbar non espone i token --bg/--border2 */
.navbar .mn-theme-toggle {
    margin-right: 10px;
    border-color: var(--gray-200, #e8eaed);
    background: transparent;
    color: var(--gray-700, #5f6368);
}

.navbar .mn-theme-toggle:hover {
    background: var(--gray-100, #f1f3f4);
    color: var(--blue, #1a73c8);
    border-color: var(--gray-300, #dadce0);
}

@media (max-width: 640px) {
    .mn-theme-toggle {
        width: 28px;
        height: 28px;
    }

    .navbar .mn-theme-toggle {
        margin-right: 6px;
    }

    .mn-theme-toggle .mn-ico {
        width: 15px;
        height: 15px;
    }
}

/* ==========================================================================
   9 · TRANSIZIONE DI CAMBIO TEMA
   Classe applicata solo per ~200ms durante lo switch: evita il "flash" secco
   senza lasciare transizioni permanenti su tutta la pagina.
   ========================================================================== */
:root.mn-theme-anim,
:root.mn-theme-anim *,
:root.mn-theme-anim *::before,
:root.mn-theme-anim *::after {
    transition: background-color 180ms ease, border-color 180ms ease,
        color 180ms ease, fill 180ms ease, stroke 180ms ease,
        box-shadow 180ms ease !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {

    :root.mn-theme-anim,
    :root.mn-theme-anim *,
    :root.mn-theme-anim *::before,
    :root.mn-theme-anim *::after {
        transition: none !important;
    }

    .mn-theme-toggle,
    .mn-theme-toggle .mn-ico {
        transition: none !important;
    }
}

/* Stampa: sempre su fondo chiaro, indipendentemente dal tema attivo */
@media print {
    :root[data-theme="dark"] {
        color-scheme: light;
    }

    .mn-theme-toggle {
        display: none !important;
    }
}