/*
 * Dark mode per il backend gestionale Eplan.
 *
 * Layer di override caricato DOPO styles_backend.css ed eplan-menu.css (InitPlugin),
 * tutto confinato sotto `body.dark-mode` per non toccare il tema chiaro.
 * Lo switch (markup in layouts_admin/main.phtml, logica in eplan-dark.js) vive
 * nella barra header in alto a destra (.header-cnt-r); su mobile, dove quella barra
 * e' nascosta, lo switch diventa un bottone fisso accanto al burger/fullscreen.
 *
 * La palette riusa i colori brand eplan gia' introdotti da eplan-menu.css
 * (verde #008c77, giallo #ebf200, slate #3a464e) per coerenza.
 *
 * NB: ad ogni modifica di questo file va alzato $ver in InitPlugin (cache client 7gg).
 */

body.dark-mode {
    --d-bg: #16191d;          /* sfondo pagina */
    --d-surface: #21262d;     /* superfici: card, popup, pannelli (ex #fff) */
    --d-surface-2: #2a313a;   /* superfici sollevate / hover / input */
    --d-surface-3: #313a44;   /* selezione, righe attive */
    --d-border: #3a424b;
    --d-border-2: #4a535d;
    --d-text: #d7dce2;
    --d-text-muted: #9aa3ad;
    --d-accent: #ebf200;      /* giallo brand */
    --d-accent-2: #1fb89c;    /* verde brand schiarito per leggibilita' su scuro */

    background-color: var(--d-bg) !important;
    color: var(--d-text) !important;
}

/* =========================================================================
 * Layout: header, contenuto, sidebar
 * ========================================================================= */
body.dark-mode .page-header {
    background-color: #1b2026 !important;
    border-bottom-color: #3a464e !important;
}
/* il box_utente e' gia' #3a464e da eplan-menu.css: lo lascio com'e' */

body.dark-mode .page-content,
body.dark-mode .content,
body.dark-mode .content-row,
body.dark-mode .content-row-full {
    background-color: transparent !important;
    color: var(--d-text);
}

/* La sidebar e' gia' scura (#3a464e da eplan-menu.css): la uniformo al tema */
body.dark-mode .col-sx.menu {
    background-color: #1b2026 !important;
}

/* Powered by / barra lingue in header */
body.dark-mode .powered-by,
body.dark-mode .powered-by b { color: var(--d-text-muted) !important; }
body.dark-mode .barraLingue { color: var(--d-text); }
body.dark-mode .barraLingue .menuLingue {
    background-color: var(--d-surface-2) !important;
    border: 1px solid var(--d-border);
}
body.dark-mode .barraLingue .menuLingue a { color: var(--d-text) !important; }
body.dark-mode .barraLingue .menuLingue a:hover { color: var(--d-accent) !important; }

/* =========================================================================
 * Testo, titoli, link generici
 * ========================================================================= */
body.dark-mode,
body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode dt,
body.dark-mode dd,
body.dark-mode td,
body.dark-mode th,
body.dark-mode li,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 { color: var(--d-text); }

body.dark-mode a { color: var(--d-accent-2); }
body.dark-mode a:hover { color: var(--d-accent); }

/* Titolo del form (.forms #titolo / .forms .titolo): grigio scuro illeggibile su nero */
body.dark-mode .forms #titolo,
body.dark-mode .forms .titolo { color: #fff !important; }

/* Le label dei form nel tema chiaro sono $brand_color_2 (#5f7285): le schiarisco */
body.dark-mode form label,
body.dark-mode .form-label,
body.dark-mode dt label { color: var(--d-text-muted) !important; }

/* =========================================================================
 * Form: input, textarea, select
 * ========================================================================= */
body.dark-mode input:not([type]),
body.dark-mode input[type=text],
body.dark-mode input[type=password],
body.dark-mode input[type=date],
body.dark-mode input[type=datetime],
body.dark-mode input[type=datetime-local],
body.dark-mode input[type=month],
body.dark-mode input[type=week],
body.dark-mode input[type=email],
body.dark-mode input[type=number],
body.dark-mode input[type=search],
body.dark-mode input[type=tel],
body.dark-mode input[type=time],
body.dark-mode input[type=url],
body.dark-mode input[type=color],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--d-surface-2) !important;
    border-color: var(--d-border-2) !important;
    color: var(--d-text) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--d-surface-3) !important;
    border-color: var(--d-accent-2) !important;
}
body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled,
body.dark-mode input[readonly] {
    background-color: #1c2025 !important;
    color: var(--d-text-muted) !important;
}
body.dark-mode ::placeholder { color: #6b747e; }
/* freccia select: il PNG/SVG scuro non si vede su sfondo scuro -> la schiarisco */
body.dark-mode select {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iI2Q3ZGNlMiIgcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+") !important;
}

/* Autocompletatore (CosMooAC): tendina suggerimenti con background:#fff forzato */
body.dark-mode ul.autocompleter-choices {
    background-color: var(--d-surface) !important;
    border-color: var(--d-border-2) !important;
    color: var(--d-text);
}
body.dark-mode ul.autocompleter-choices li { color: var(--d-text); }
body.dark-mode ul.autocompleter-choices li.autocompleter-selected {
    background-color: var(--d-surface-3) !important;
    color: #fff;
}
body.dark-mode ul.autocompleter-choices span.autocompleter-queried,
body.dark-mode ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried {
    color: var(--d-accent);
}
body.dark-mode ul.autocompleter-choices li .example-info { color: var(--d-text-muted); }

/* Tendina ore campi time (CosMooFC createTime): base con background:white */
body.dark-mode .timeOptCnt {
    background-color: var(--d-surface) !important;
    border-color: var(--d-border-2) !important;
}
body.dark-mode .timeOptCnt .divHour { color: var(--d-text); }
body.dark-mode .timeOptCnt .divHour:hover { background-color: var(--d-surface-2); }
body.dark-mode .timeOptCnt .divHour.selected {
    background-color: var(--d-surface-3);
    color: var(--d-accent);
}

/* =========================================================================
 * Tabelle e griglie CRUD (moogrid)
 * ========================================================================= */
/* Titoli pagina/griglia: in chiaro sono #5f7285, illeggibili su scuro */
body.dark-mode .iconaTitolo,
body.dark-mode .moogrid-title { color: #fff !important; }

/* .gridContainer ha background:#fff forzato in styles_backend.css */
body.dark-mode .gridContainer {
    background-color: var(--d-surface) !important;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode table th,
body.dark-mode table .header { border-bottom-color: var(--d-border-2) !important; }

body.dark-mode .moogrid-header-tr { border-bottom-color: var(--d-border-2) !important; }
body.dark-mode .gridContainer .moogrid-header-th-top div,
body.dark-mode .moogrid-header-name { color: var(--d-text) !important; }
body.dark-mode .moogrid-header-th-top div { color: var(--d-accent) !important; }

/* righe alternate: table tr:nth-child(even) ha background:#f5f5f6 forzato */
body.dark-mode table tr:nth-child(even) { background-color: var(--d-surface-2) !important; }

body.dark-mode .moogrid-row-td-odd {
    color: var(--d-text) !important;
    border-bottom-color: var(--d-border) !important;
}
body.dark-mode .moogrid-row-tr-over td,
body.dark-mode .moogrid-row-tr-over { background-color: var(--d-surface-2) !important; }
body.dark-mode .moogrid-row-tr-selected td { background-color: var(--d-surface-3) !important; }
body.dark-mode .gridContainer input[type=text] { background-color: var(--d-surface-2) !important; }

/* .bottomOperator: pillola con background:white forzato (anche su hover/focus) */
body.dark-mode .bottomOperator,
body.dark-mode .bottomOperator:hover,
body.dark-mode .bottomOperator:focus {
    background-color: var(--d-surface-2) !important;
    border-color: var(--d-border-2) !important;
    color: var(--d-text) !important;
}
body.dark-mode .bottomOperator:hover,
body.dark-mode .bottomOperator:focus {
    border-color: var(--d-accent-2) !important;
    color: var(--d-accent) !important;
}

/* footer paginazione griglia */
body.dark-mode .moogrid-footer div:before,
body.dark-mode .moogrid-footer .moogrid-footer-icon-div { color: var(--d-text) !important; }

/* operatori riga (matita, cestino...) */
body.dark-mode .gridOperators span { color: var(--d-text-muted) !important; }
body.dark-mode .gridOperators span:hover { color: var(--d-accent) !important; }

/* =========================================================================
 * Popup / modali / box bianchi
 * ========================================================================= */
body.dark-mode div.CosmoStickyWin,
body.dark-mode div.contPopup,
body.dark-mode .contPopup,
body.dark-mode .contPopupForm,
body.dark-mode .sceltaContainer .ruolo,
body.dark-mode .loginCont .formCont {
    background-color: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: 0 1px 19px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .contPopup .titolo { color: var(--d-text) !important; border-bottom-color: var(--d-border-2) !important; }
body.dark-mode .contPopup .sottotitolo { color: var(--d-text-muted) !important; }
/* pulsante chiusura popup */
body.dark-mode div.closeButton:after,
body.dark-mode .closePopup:after {
    background-color: var(--d-surface) !important;
    color: var(--d-accent-2) !important;
    border-color: var(--d-accent-2) !important;
}
body.dark-mode .mask { background-color: rgba(0, 0, 0, 0.6) !important; }

/* =========================================================================
 * Card della Home Gestione (planning, todo, changelog, menu)
 * ========================================================================= */
body.dark-mode .planning-card,
body.dark-mode .todo-card,
body.dark-mode .changelog-entry,
body.dark-mode .todo-modal,
body.dark-mode .impegni-right,
body.dark-mode #gestioneHome .elemento {
    background-color: var(--d-surface) !important;
    border-color: var(--d-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
body.dark-mode .planning-card-title,
body.dark-mode .todo-modal-header h4,
body.dark-mode #gestioneHome .nome { color: var(--d-text) !important; }
body.dark-mode .planning-card-subtitle,
body.dark-mode .planning-title,
body.dark-mode .todo-card-meta,
body.dark-mode .sezione .titolo { color: var(--d-text-muted) !important; }
body.dark-mode .planning-card:hover,
body.dark-mode .todo-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); }
body.dark-mode #gestioneHome .elemento:hover {
    background: #2a2f1a !important;
    box-shadow: 0 4px 14px rgba(235, 242, 0, 0.18) !important;
}
body.dark-mode #gestioneHome .titolo { color: var(--d-text-muted) !important; }
body.dark-mode #gestioneHome .immagine,
body.dark-mode #gestioneHome .icon-chevron-small-right { color: var(--d-accent-2) !important; }

/* changelog */
body.dark-mode .changelog-summary,
body.dark-mode .changelog-content h1,
body.dark-mode .changelog-content h2,
body.dark-mode .changelog-content h3 { color: var(--d-text) !important; }
body.dark-mode .changelog-content,
body.dark-mode #todoModalBody { color: var(--d-text-muted) !important; }
body.dark-mode .changelog-summary:hover,
body.dark-mode .changelog-entry[open] > .changelog-summary { background: var(--d-surface-2) !important; }
body.dark-mode .changelog-content code,
body.dark-mode .changelog-content blockquote { background: var(--d-surface-2) !important; }
body.dark-mode .changelog-content h2,
body.dark-mode .changelog-content hr { border-color: var(--d-border) !important; }

body.dark-mode .todo-stato-select { background: var(--d-surface-2) !important; }
body.dark-mode .todo-modal-overlay,
body.dark-mode .todo-meta-deadline:hover { background: rgba(0, 0, 0, 0.55); }

/* =========================================================================
 * Statistiche (#statsContainer): celle neutre -> scure, status semantici tenui
 * ========================================================================= */
body.dark-mode #statsContainer .grid-item { border-color: rgba(255, 255, 255, 0.12) !important; }
body.dark-mode #statsContainer .comm { background-color: var(--d-surface-2) !important; color: var(--d-text) !important; }
body.dark-mode #statsContainer.statsContainer-flat .comm,
body.dark-mode #statsContainer .elem { background-color: var(--d-surface) !important; color: var(--d-text) !important; }
body.dark-mode #statsContainer .grid-container > .wrapper:first-child,
body.dark-mode #statsContainer.statsContainer-with-totali .grid-container > .wrapper:last-child {
    background-color: #3a464e !important;
}
/* status colorati: li rendo piu' tenui ma leggibili, testo scuro per contrasto.
   NB: serve ridare lo sfondo colorato con !important perche' la regola generica
   ".comm { background-color: var(--d-surface-2) !important }" (sopra) altrimenti
   lo sovrascrive lasciando sfondo scuro + testo scuro = illeggibile. */
body.dark-mode #statsContainer .comm.low,
body.dark-mode #statsContainer .comm.high,
body.dark-mode #statsContainer .comm.tragic,
body.dark-mode #statsContainer .comm.great,
body.dark-mode #statsContainer.statsContainer-anno .comm.high,
body.dark-mode #statsContainer.statsContainer-anno .comm.tragic { color: #1b1f24 !important; }
body.dark-mode #statsContainer .comm.low    { background-color: #d8cd86 !important; }
body.dark-mode #statsContainer .comm.high   { background-color: #d8a9a9 !important; }
body.dark-mode #statsContainer .comm.tragic { background-color: #cf8585 !important; }
body.dark-mode #statsContainer .comm.great  { background-color: #9ec99e !important; }
body.dark-mode #statsContainer.statsContainer-anno .comm.high   { background-color: #d59999 !important; }
body.dark-mode #statsContainer.statsContainer-anno .comm.tragic { background-color: #c87676 !important; }
body.dark-mode #statsContainer .assist-chart-dialog { background: var(--d-surface) !important; color: var(--d-text); }

/* =========================================================================
 * Calendario (FullCalendar v6) - viste appuntamenti/interventi/slot/progetti
 * FullCalendar usa CSS custom properties: rimappo quelle invece dei singoli nodi.
 * ========================================================================= */
body.dark-mode .fc {
    --fc-page-bg-color: var(--d-surface);
    --fc-neutral-bg-color: var(--d-surface-2);
    --fc-border-color: var(--d-border);
    --fc-today-bg-color: rgba(235, 242, 0, 0.07);
    --fc-list-event-hover-bg-color: var(--d-surface-2);
    --fc-neutral-text-color: var(--d-text);
    color: var(--d-text);
}
/* righe slot timegrid: in eplan-calendar.css forzano background:white */
body.dark-mode .fc-timegrid-slots > table > tbody > tr { background-color: transparent !important; }
/* "oggi": il verde acceso e' troppo su scuro */
body.dark-mode .fc-day-today,
body.dark-mode .view-progetti-cal th.fc-day-today { background: rgba(235, 242, 0, 0.15) !important; }
body.dark-mode .view-slotliberi .fc-day-today { background: rgba(235, 242, 0, 0.04) !important; }
/* eventi placeholder draggable nel calendario progetti */
body.dark-mode .view-progetti-cal .fc-event { border-color: var(--d-border) !important; }
body.dark-mode .view-progetti-cal .fc-event:nth-child(2n) { background: var(--d-surface-2) !important; }
body.dark-mode .view-progetti-cal .fc-event:hover { background: var(--d-surface-3) !important; }
body.dark-mode .ical-link:hover { background-color: var(--d-surface-2) !important; }

/* Box bianchi dei filtri sopra il calendario (slot liberi / progetti) */
body.dark-mode .formSlotLiberi .utentiCheckList,
body.dark-mode .formProgettiUtenti .utentiCheckList,
body.dark-mode .formSlotLiberi .btnModifica,
body.dark-mode .formProgettiUtenti .btnModifica,
body.dark-mode .utentiDialog {
    background-color: var(--d-surface-2) !important;
    color: var(--d-text) !important;
}
body.dark-mode .formSlotLiberi .utentiCheckList .riga:hover,
body.dark-mode .formProgettiUtenti .utentiCheckList .riga:hover,
body.dark-mode .utentiAccordion > summary:hover { background: var(--d-surface-3) !important; }
body.dark-mode .utentiAccordion { background: var(--d-surface-2) !important; }
/* riepilogo nomi accanto al titolo dell'accordion (in chiaro #555) */
body.dark-mode .utentiAccordion .accordionSummary { color: var(--d-text) !important; }
body.dark-mode .formSlotLiberi .utentiSelezionati,
body.dark-mode .formProgettiUtenti .utentiSelezionati,
body.dark-mode .formSlotLiberi .utentiSelezionati .elenco,
body.dark-mode .formProgettiUtenti .utentiSelezionati .elenco,
body.dark-mode .utentiCheckList .riga,
body.dark-mode .utentiCheckListDialog .riga { color: #fff !important; }

/* =========================================================================
 * Vari box chiari sparsi
 * ========================================================================= */
body.dark-mode .stats-ore { background-color: rgba(255, 255, 255, 0.05) !important; }
body.dark-mode .piede { background-color: #1b2026 !important; }
body.dark-mode #form_gal_multi { border-color: var(--d-border) !important; }
body.dark-mode hr { border-color: var(--d-border) !important; }

/* immagini/loghi su sfondo bianco fisso: aggiungo un leggero contenitore chiaro
   solo dove necessario non serve; lascio loghi come sono. */

/* =========================================================================
 * Lo switch tema (markup in layouts_admin/main.phtml)
 * Visibile in chiaro e in scuro: NON va scoped sotto body.dark-mode.
 * ========================================================================= */
.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 56px;
    height: 28px;
    margin: 0 14px 0 5px;
    padding: 0 7px;
    border: 1px solid #c7ccd1;
    border-radius: 999px;
    background: #eef0f2;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    transition: background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-switch i {
    font-size: 13px;
    line-height: 1;
    z-index: 1;
    transition: color .2s ease;
}
.theme-switch .icon-sun-o { color: #e8a200; }
.theme-switch .icon-moon-o { color: #8a96a3; }
/* pallino mobile */
.theme-switch:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform .2s ease, background .2s ease;
    z-index: 0;
}
body.dark-mode .theme-switch {
    background: #3a464e;
    border-color: #525d66;
}
body.dark-mode .theme-switch:before { transform: translateX(28px); background: #1b2026; }
body.dark-mode .theme-switch .icon-moon-o { color: var(--d-accent); }
body.dark-mode .theme-switch .icon-sun-o { color: #6b747e; }

/* Dashboard "Ore lavorate": le celle .future hanno background bianco forzato
   (rgba(255,255,255,1) in eplan-menu.css), restavano bianche in dark mode.
   Le altre celle usano rgba semitrasparente che si fonde bene sul fondo scuro.
   Nota: una cella puo' essere insieme .future + .weekend/.warning; in light mode
   weekend/warning vincono su future (ordine sorgente in eplan-menu.css), quindi
   qui le ri-affermo DOPO il !important di .future per non perdere il giallo
   del weekend / il rosso del warning nei giorni futuri. */
body.dark-mode .view-orelavorate td.day.future {
    background: var(--d-surface) !important;
}
body.dark-mode .view-orelavorate td.day.warning {
    background: rgba(255, 0, 0, 0.3) !important;
}
body.dark-mode .view-orelavorate td.day.weekend {
    background: rgba(255, 255, 0, 0.25) !important;
}
/* Straordinari: #2b81af (azzurro scuro) poco leggibile sul fondo scuro */
body.dark-mode .view-orelavorate .extra {
    color: #5cb3e6 !important;
}

/* Mobile (<= 640px): Foundation collassa header-cnt-r con .hidden-for-small-down
   (clip rect 1px + position:absolute). Neutralizzo il clipping sul contenitore
   senza ingombro (height:0) e mostro SOLO lo switch, agganciandolo come bottone
   fisso accanto a #fullscreenToggle (right:6px) e al burger (left:6px). */
@media screen and (max-width: 40em) {
    .header-cnt-r.hidden-for-small-down {
        position: static !important;
        clip: auto !important;
        overflow: visible !important;
        width: auto !important;
        height: 0 !important;
    }
    .header-cnt-r.hidden-for-small-down > *:not(.theme-switch) { display: none !important; }
    /* Su mobile il fullscreen non serve: lo nascondo e porto lo switch nell'angolo */
    #fullscreenToggle { display: none !important; }
    .header-cnt-r.hidden-for-small-down .theme-switch {
        display: inline-flex !important;
        position: fixed;
        top: 7px;
        right: 6px;
        z-index: 1100;
        margin: 0;
        clip: auto;
        width: 52px;
        height: 26px;
    }
    /* Declutter: su mobile il logo testuale "eplan" si sovrapponeva ai controlli
       e veniva tagliato. Tengo solo il pittogramma, nascondo la scritta. */
    .page-header .eplan-logo p { display: none !important; }
    .page-header .eplan-logo { padding: 0 12px !important; gap: 0 !important; }
}