/* =====================================================================
   TEMA SCURO — token e componenti Bootstrap/AdminLTE al buio
   ---------------------------------------------------------------------
   Separato da pwa-tema.css (2026-10-06) perche' serve a due portali:
   - staff (backend AppAsset e chat mobile): caricato con
     media="(max-width: 768px)", quindi solo sul telefono come prima;
   - dipendenti (collegamento dipendenti/web/css/tema-scuro.css): senza
     media, il tema scuro vale anche da computer.
   Si attiva con data-tema="scuro" su <html> (script in testa ai layout).
   ===================================================================== */

/* =================================================================
   TEMA SCURO — stessi nomi, altri valori. I colori di stato si
   invertono: fondo cupo e testo acceso, al buio un fondo chiaro
   abbaglia.
   ================================================================= */
html[data-tema="scuro"] {
    color-scheme: dark;

    --cc-bg:            #0b1120;
    --cc-surface:       #151d2e;
    --cc-surface-2:     #1a2335;
    --cc-ink:           #e7ecf5;
    --cc-ink-soft:      #c3cbdb;
    --cc-muted:         #95a1b8;
    --cc-border:        #243049;
    --cc-border-strong: #334061;

    --cc-brand:         #4a94ff;
    --cc-brand-ink:     #7ab4ff;
    --cc-brand-tint:    rgba(74, 148, 255, .17);

    --cc-info:          #38bdf8;
    --cc-success:       #34d399;
    --cc-warning:       #fbbf24;
    --cc-danger:        #f87171;
    --cc-violet:        #a78bfa;

    --cc-shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
    --cc-shadow:        0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);

    --app-testata:      #141c2f;
    --app-testata-2:    #0b1120;
    --app-azione:       #1f6fe5;
    --app-azione-viva:  #185bc0;
    --app-nav-fondo:    rgba(21, 29, 46, .94);
    --app-campo:        #1c2539;

    --app-ok: #5fd8a2;        --app-ok-tenue: #11302a;
    --app-avviso: #f5c15c;    --app-avviso-tenue: #33280f;
    --app-errore: #f79098;    --app-errore-tenue: #3a1b22;
    --app-info: #6cc6f0;      --app-info-tenue: #112b3c;
    --app-neutro: #b3bdd0;    --app-neutro-tenue: #222c40;
    --app-ombra-alta: 0 8px 26px rgba(0, 0, 0, .5);
}

/* =================================================================
   TEMA SCURO — Bootstrap e AdminLTE hanno il bianco scritto a mano:
   qui lo si riporta sui token. Solo col tema scuro, perché col chiaro
   quei bianchi sono giusti.
   ================================================================= */
html[data-tema="scuro"] body { color: var(--cc-ink); background: var(--cc-bg); }
html[data-tema="scuro"] h1, html[data-tema="scuro"] h2, html[data-tema="scuro"] h3,
html[data-tema="scuro"] h4, html[data-tema="scuro"] h5, html[data-tema="scuro"] h6,
html[data-tema="scuro"] .h1, html[data-tema="scuro"] .h2, html[data-tema="scuro"] .h3,
html[data-tema="scuro"] .h4, html[data-tema="scuro"] .h5, html[data-tema="scuro"] .h6 { color: var(--cc-ink); }
/* Solo i link «di testo» (senza classe): quelli con una classe sono
   tessere, righe, bottoni e hanno già il loro colore. */
html[data-tema="scuro"] a:not([class]) { color: var(--cc-brand-ink); }
html[data-tema="scuro"] hr { border-color: var(--cc-border); }
html[data-tema="scuro"] .text-dark,
html[data-tema="scuro"] .text-body,
html[data-tema="scuro"] .text-black { color: var(--cc-ink) !important; }
html[data-tema="scuro"] .text-secondary { color: var(--cc-muted) !important; }
html[data-tema="scuro"] .text-primary { color: var(--cc-brand) !important; }
html[data-tema="scuro"] .text-success { color: var(--app-ok) !important; }
html[data-tema="scuro"] .text-danger  { color: var(--app-errore) !important; }
html[data-tema="scuro"] .text-warning { color: var(--app-avviso) !important; }
html[data-tema="scuro"] .text-info    { color: var(--app-info) !important; }

html[data-tema="scuro"] .bg-white,
html[data-tema="scuro"] .bg-body { background-color: var(--cc-surface) !important; }
html[data-tema="scuro"] .bg-light { background-color: var(--cc-surface-2) !important; color: var(--cc-ink); }
/* Pastiglie «-lt» (bg-azure-lt, bg-blue-lt...): fondo pastello e testo pieno. Al buio
   il fondo diventa una velatura del loro stesso colore. */
html[data-tema="scuro"] .bg-azure-lt     { color: var(--app-info) !important; }
html[data-tema="scuro"] .bg-blue-lt      { color: var(--cc-brand-ink) !important; }
html[data-tema="scuro"] .bg-green-lt     { color: var(--app-ok) !important; }
html[data-tema="scuro"] .bg-red-lt       { color: var(--app-errore) !important; }
html[data-tema="scuro"] .bg-warning-lt,
html[data-tema="scuro"] .bg-orange-lt    { color: var(--app-avviso) !important; }
html[data-tema="scuro"] .bg-secondary-lt { color: var(--app-neutro) !important; }
html[data-tema="scuro"] [class*="bg-"][class*="-lt"] {
    background-color: color-mix(in srgb, currentColor 18%, transparent) !important;
}
html[data-tema="scuro"] .border,
html[data-tema="scuro"] .border-top,
html[data-tema="scuro"] .border-bottom,
html[data-tema="scuro"] .border-left,
html[data-tema="scuro"] .border-right { border-color: var(--cc-border) !important; }

/* Card, riquadri AdminLTE */
html[data-tema="scuro"] .card,
html[data-tema="scuro"] .card-header,
html[data-tema="scuro"] .card-body,
html[data-tema="scuro"] .info-box,
html[data-tema="scuro"] .small-box,
html[data-tema="scuro"] .box,
html[data-tema="scuro"] .callout { background-color: var(--cc-surface) !important; color: var(--cc-ink); }
html[data-tema="scuro"] .callout { border-left-color: var(--cc-border-strong); }
html[data-tema="scuro"] .card-footer { background-color: var(--cc-surface-2) !important; }

/* Tabelle */
html[data-tema="scuro"] .table { color: var(--cc-ink); background-color: transparent; }
/* site.css: .table th con fondo #f8f9fa e testo #495057. */
html[data-tema="scuro"] .table th { background-color: var(--cc-surface-2); color: var(--cc-muted); }
html[data-tema="scuro"] .table th,
html[data-tema="scuro"] .table td { border-color: var(--cc-border); }
html[data-tema="scuro"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025); }
html[data-tema="scuro"] .table-hover tbody tr:hover { color: var(--cc-ink); }
html[data-tema="scuro"] .table-light,
html[data-tema="scuro"] .table-light > th,
html[data-tema="scuro"] .table-light > td,
html[data-tema="scuro"] .thead-light th { background-color: var(--cc-surface-2) !important; color: var(--cc-muted); }
html[data-tema="scuro"] .table-bordered,
html[data-tema="scuro"] .table-bordered th,
html[data-tema="scuro"] .table-bordered td { border-color: var(--cc-border); }
html[data-tema="scuro"] .table-success, html[data-tema="scuro"] .table-success > td { background-color: var(--app-ok-tenue) !important; }
html[data-tema="scuro"] .table-warning, html[data-tema="scuro"] .table-warning > td { background-color: var(--app-avviso-tenue) !important; }
html[data-tema="scuro"] .table-danger,  html[data-tema="scuro"] .table-danger > td  { background-color: var(--app-errore-tenue) !important; }
html[data-tema="scuro"] .table-info,    html[data-tema="scuro"] .table-info > td    { background-color: var(--app-info-tenue) !important; }
html[data-tema="scuro"] .table-active,  html[data-tema="scuro"] .table-active > td  { background-color: var(--cc-surface-2) !important; }

/* Moduli */
html[data-tema="scuro"] .form-control:focus,
html[data-tema="scuro"] .custom-select:focus { background-color: var(--app-campo); color: var(--cc-ink); }
html[data-tema="scuro"] .form-control:disabled,
html[data-tema="scuro"] .form-control[readonly] { background-color: var(--cc-surface-2); color: var(--cc-muted); }
html[data-tema="scuro"] .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2395a1b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
html[data-tema="scuro"] select.form-control option { background: var(--app-campo); color: var(--cc-ink); }
html[data-tema="scuro"] .input-group-text {
    background-color: var(--cc-surface-2);
    border-color: var(--cc-border-strong);
    color: var(--cc-muted);
}
html[data-tema="scuro"] .custom-control-label::before {
    background-color: var(--app-campo);
    border-color: var(--cc-border-strong);
}
html[data-tema="scuro"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--app-azione);
    border-color: var(--app-azione);
}
html[data-tema="scuro"] label,
html[data-tema="scuro"] .form-check-label,
html[data-tema="scuro"] .custom-control-label { color: var(--cc-ink-soft); }
html[data-tema="scuro"] .form-text,
html[data-tema="scuro"] .help-block { color: var(--cc-muted) !important; }

/* Bottoni chiari */
html[data-tema="scuro"] .btn-default,
html[data-tema="scuro"] .btn-light,
html[data-tema="scuro"] .btn-outline-secondary,
html[data-tema="scuro"] .btn-outline-dark,
html[data-tema="scuro"] .btn-outline-light {
    background-color: var(--app-campo) !important;
    border-color: var(--cc-border-strong) !important;
    color: var(--cc-ink-soft) !important;
}
html[data-tema="scuro"] .btn-secondary {
    background-color: var(--app-neutro-tenue) !important;
    border-color: var(--cc-border-strong) !important;
    color: var(--cc-ink) !important;
}
html[data-tema="scuro"] .btn-outline-primary {
    background-color: var(--app-campo) !important;
    border-color: var(--cc-border-strong) !important;
    color: var(--cc-brand-ink) !important;
}
html[data-tema="scuro"] .btn-outline-danger { background-color: var(--app-campo); border-color: var(--cc-border-strong); color: var(--app-errore); }
html[data-tema="scuro"] .btn-outline-success { background-color: var(--app-campo); border-color: var(--cc-border-strong); color: var(--app-ok); }
html[data-tema="scuro"] .btn-outline-warning { background-color: var(--app-campo); border-color: var(--cc-border-strong); color: var(--app-avviso); }
html[data-tema="scuro"] .btn-outline-info { background-color: var(--app-campo); border-color: var(--cc-border-strong); color: var(--app-info); }
html[data-tema="scuro"] .btn-link { color: var(--cc-brand-ink); }
html[data-tema="scuro"] .btn-warning { color: #1b1300; }

/* Elenchi, finestre, menu a tendina, tab */
html[data-tema="scuro"] .list-group-item {
    background-color: var(--cc-surface);
    border-color: var(--cc-border);
    color: var(--cc-ink);
}
html[data-tema="scuro"] .list-group-item-action:hover,
html[data-tema="scuro"] .list-group-item-action:focus,
html[data-tema="scuro"] .list-group-item:active { background-color: var(--cc-surface-2); color: var(--cc-ink); }
html[data-tema="scuro"] .list-group-item.active { background-color: var(--app-azione); border-color: var(--app-azione); color: #fff; }

html[data-tema="scuro"] .modal-content { background-color: var(--cc-surface); color: var(--cc-ink); }
html[data-tema="scuro"] .modal-header,
html[data-tema="scuro"] .modal-body { background-color: var(--cc-surface); }
html[data-tema="scuro"] .modal-backdrop.show { opacity: .65; }
html[data-tema="scuro"] .close { color: var(--cc-ink); text-shadow: none; opacity: .7; }

html[data-tema="scuro"] .dropdown-menu { background-color: var(--cc-surface); color: var(--cc-ink); }
html[data-tema="scuro"] .dropdown-item { color: var(--cc-ink-soft); }
html[data-tema="scuro"] .dropdown-header { color: var(--cc-muted); }

html[data-tema="scuro"] .nav-tabs .nav-link.active,
html[data-tema="scuro"] .nav-tabs .nav-item.show .nav-link { background-color: transparent; color: var(--cc-brand-ink); }
html[data-tema="scuro"] .nav-pills .nav-link:not(.active) { color: var(--cc-ink-soft); }

html[data-tema="scuro"] .progress { background-color: var(--cc-surface-2); }
html[data-tema="scuro"] .popover,
html[data-tema="scuro"] .toast { background-color: var(--cc-surface); color: var(--cc-ink); border-color: var(--cc-border); }
html[data-tema="scuro"] .toast-header { background-color: var(--cc-surface-2); color: var(--cc-ink); }
html[data-tema="scuro"] .breadcrumb { background-color: transparent; }
html[data-tema="scuro"] ::-webkit-scrollbar-thumb { background-color: var(--cc-border-strong); }

/* Campi e avvisi: sul telefono li sistema pwa-tema.css (body.pwa-mobile-nav); qui valgono anche
   dove lo scuro c'e' da computer (portali utente). Stessi colori. */
html[data-tema="scuro"] .form-control,
html[data-tema="scuro"] .custom-select {
    background-color: var(--app-campo);
    color: var(--cc-ink);
    border-color: var(--cc-border-strong);
}
html[data-tema="scuro"] .form-control::placeholder { color: var(--cc-muted); opacity: .8; }
html[data-tema="scuro"] .alert { border-color: transparent; }
html[data-tema="scuro"] .alert-success { background: var(--app-ok-tenue); color: var(--app-ok); }
html[data-tema="scuro"] .alert-danger  { background: var(--app-errore-tenue); color: var(--app-errore); }
html[data-tema="scuro"] .alert-warning { background: var(--app-avviso-tenue); color: var(--app-avviso); }
html[data-tema="scuro"] .alert-info    { background: var(--app-info-tenue); color: var(--app-info); }
html[data-tema="scuro"] .alert-secondary,
html[data-tema="scuro"] .alert-light   { background: var(--app-neutro-tenue); color: var(--cc-ink); }
html[data-tema="scuro"] .alert a:not(.btn) { color: inherit; text-decoration: underline; }