/* ===========================================================================
 * Dark theme refactor V1 — Component overrides
 *
 * Override globali sui selettori che oggi hanno colori hardcoded inline.
 * Usano i semantic tokens da tokens.css.
 *
 * Caricato DOPO tokens.css e DOPO smart-webcomponents main CSS per vincere
 * in specificita; alcuni override usano !important dove necessario per
 * battere inline style="..." nei template (sostituiti gradualmente nelle
 * fasi successive del refactor).
 * ========================================================================= */

/* ===== Body / page base ===== */
body {
    background: var(--color-bg-base);
    color: var(--color-text-primary);
}

/* ===== Bootstrap 3 .card override ===== */
.card {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.card-body {
    color: var(--color-text-primary);
}
.card-header,
.card-footer {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* ===== Metric cards (dashboard) ===== */
.metric-card {
    background: var(--color-bg-surface) !important;
    box-shadow: var(--color-shadow-sm);
}
.metric-card:hover {
    box-shadow: var(--color-shadow-md) !important;
}
/* P1 3.1: in dark mode i gradient brand-color (.metric-icon.blue/.amber/etc)
   sono sovra-saturati su slate-700. Filter saturate(0.85) attenua. */
[data-theme="dark"] .metric-icon {
    filter: saturate(0.88);
}
.metric-value {
    color: var(--color-text-primary);
}
.metric-label {
    color: var(--color-text-muted);
}
/* P0 fix 3.4: metric-label su card slate-700 con slate-400 ha contrasto 3.5:1
   (sotto WCAG AA 4.5:1 per testo small). Bump a slate-300 in dark. */
[data-theme="dark"] .metric-label {
    color: var(--color-text-secondary);
}

/* ===== Auth shell (login + mfa) ===== */
.auth-card {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--color-shadow-lg);
    border-color: var(--color-border);
}
.auth-greeting {
    color: var(--color-text-primary);
}
.auth-subgreeting,
.auth-form-tagline {
    color: var(--color-text-secondary);
}
.auth-label {
    color: var(--color-text-primary);
}
.auth-footer {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.auth-footer a {
    color: var(--color-text-secondary);
}
.auth-form-brand {
    border-color: var(--color-border);
}

/* ===== Form fields generic ===== */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
/* P1 fix 4.3: placeholder uniforme con muted color cross-theme */
input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1; /* override Firefox default 0.54 */
}

/* P1 fix 4.1: smart-text-box / smart-password-text-box / smart-input
   border esplicito in dark per evitare "invisible" border smart-webcomponents.
   Affects modal Edit, login, ecc. */
[data-theme="dark"] smart-text-box,
[data-theme="dark"] smart-password-text-box,
[data-theme="dark"] smart-input,
[data-theme="dark"] smart-numeric-text-box,
[data-theme="dark"] smart-multiline-text-box {
    --smart-border: var(--color-border);
    --smart-border-color: var(--color-border);
}
[data-theme="dark"] smart-text-box input,
[data-theme="dark"] smart-password-text-box input,
[data-theme="dark"] smart-input input,
[data-theme="dark"] smart-numeric-text-box input,
[data-theme="dark"] smart-multiline-text-box textarea {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] smart-text-box input::placeholder,
[data-theme="dark"] smart-password-text-box input::placeholder,
[data-theme="dark"] smart-input input::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1;
}

/* P1 fix 4.2: focus ring uniforme cross-component.
   Pattern: outline 2px solid brand-primary + offset 2px.
   Sovrascrive default browser dotted outline. */
*:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
smart-button:focus-visible,
smart-text-box:focus-within,
smart-password-text-box:focus-within,
smart-drop-down-list:focus-within,
smart-check-box:focus-within {
    outline: 2px solid var(--brand-primary, #3b82f6);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Smart-webcomponents elements gestiscono il focus via :focus-within sul host;
   il box-shadow visivo segue gia auth-shell.css. Qui aggiungiamo fallback. */

/* P1 fix 4.5: form section dividers utility.
   Da usare nei template Twig: <hr class="form-divider"> tra gruppi di campi. */
hr.form-divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}
hr.form-divider-strong {
    border: 0;
    border-top: 2px solid var(--color-border-strong);
    margin: 1.25rem 0;
}

/* ===========================================================================
 * P2 fix 6.1 — Skeleton loaders.
 *
 * Uso:
 *   <p class="metric-value" data-loading>-</p>     <- pre-load state
 *   <p class="metric-value">42</p>                  <- post-load state
 *
 * Il JS che popola il valore deve rimuovere l'attributo data-loading.
 * Pattern: shimmer animation tramite linear-gradient + background-position.
 * ========================================================================= */
[data-loading] {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        var(--color-bg-muted) 0%,
        var(--color-bg-subtle) 50%,
        var(--color-bg-muted) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    min-width: 40px;
    user-select: none;
    pointer-events: none;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    [data-loading] {
        animation: none;
        background: var(--color-bg-muted);
    }
}
/* Skeleton dimensions per tipo (metric-value larga, metric-label stretta) */
.metric-value[data-loading] { min-width: 60px; min-height: 1.6em; }
.metric-value-sm[data-loading] { min-width: 50px; min-height: 1.3em; }

/* ===========================================================================
 * P2 fix 6.2 / 11.2 — Empty state.
 *
 * Uso:
 *   <div class="empty-state">
 *     <span class="material-symbols-outlined empty-state-icon">inbox</span>
 *     <h3 class="empty-state-title">Nessun elemento</h3>
 *     <p class="empty-state-text">Crea il primo elemento per iniziare.</p>
 *     <button class="empty-state-action">Crea</button>
 *   </div>
 * ========================================================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-text-secondary);
    min-height: 240px;
    gap: 0.75rem;
}
.empty-state-icon {
    font-size: 56px !important;
    color: var(--color-text-muted);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}
.empty-state-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}
.empty-state-text {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    max-width: 320px;
    margin: 0;
    line-height: 1.5;
}
.empty-state-action {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--brand-primary, #3b82f6);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: filter var(--transition-fast, 150ms), transform 50ms;
    font-family: inherit;
}
.empty-state-action:hover { filter: brightness(0.92); }
.empty-state-action:active { transform: scale(0.97); }

/* P2 11.3: Period select picker uniformato (dashboard + tenant consumption).
   Native <select> ma con look coerente al resto della UI. */
select.dash-period-select,
select#tenant-consumption-period {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.1em;
    padding-right: 2rem;
    min-width: 170px;
}
select.dash-period-select:hover,
select#tenant-consumption-period:hover {
    border-color: var(--brand-primary, #3b82f6);
}
select.dash-period-select:focus,
select#tenant-consumption-period:focus {
    outline: 2px solid var(--brand-primary, #3b82f6);
    outline-offset: 2px;
    border-color: var(--brand-primary, #3b82f6);
}
[data-theme="dark"] select.dash-period-select,
[data-theme="dark"] select#tenant-consumption-period {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cbd5e1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* P3 10.2: Skip-to-content link — visibile solo on focus (a11y keyboard).
   Wins all stacking + nascosto offscreen di default. */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--brand-primary, #3b82f6);
    color: #fff;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    z-index: 100000;
    transition: top var(--transition-fast, 150ms);
}
.skip-to-content:focus {
    top: 0.5rem;
    outline: 2px solid var(--brand-primary, #3b82f6);
    outline-offset: 2px;
}

/* Smart-grid placeholder "Nessuna riga": iniettiamo icona via ::before
   (in dark + light). Smart-webcomponents non lascia personalizzare il text,
   ma possiamo aggiungere visual hint senza modificare il messaggio. */
.smart-grid-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem !important;
    color: var(--color-text-muted) !important;
    font-size: 0.95rem;
}
.smart-grid-placeholder::before {
    content: "inbox";
    font-family: "Material Symbols Outlined";
    font-size: 48px;
    opacity: 0.6;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1;
}

/* ===== Modal / popover (Bootstrap 3) ===== */
.modal-content {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.modal-header,
.modal-footer {
    border-color: var(--color-border);
}

/* ===== Heading helpers =====
   P1 fix 5.5: gerarchia tipografica esplicita. I template oggi usano
   h2/h5/h6 inconsistenti; questi default uniformano cross-page. */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.875rem; }

/* P1 fix 7.3: card hover lift consistency.
   Standard transform su tutte le .card / .metric-card per coerenza.
   Effetto: leggera elevazione su hover.
   P1 fix 3.3 disable hover-lift su pagine dense: opt-out via .no-hover. */
.card,
.metric-card {
    transition: transform var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}
.card:hover:not(.no-hover):not(:disabled),
.metric-card:hover:not(.no-hover) {
    transform: translateY(-1px);
    box-shadow: var(--color-shadow-md);
}
.card.no-hover:hover,
.metric-card.no-hover:hover {
    transform: none;
    box-shadow: var(--color-shadow-sm);
}

/* P1 fix 7.4: prefers-reduced-motion — kill animations / transitions
   per utenti con vestibular sensitivity. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card:hover, .metric-card:hover {
        transform: none !important;
    }
}

/* ===== Anchor links ===== */
a {
    color: var(--brand-primary, var(--color-info));
}

/* ===== Dashboard section title (dash-section-title) ===== */
.dash-section-title {
    color: var(--color-text-secondary);
}
.dash-progress {
    background: var(--color-bg-muted);
}
.tenant-consumption-card {
    background: var(--color-bg-muted);
}
.tenant-consumption-card h6 {
    color: var(--color-text-primary);
}

/* ===== Auth shell capslock warning (already light-bg intent) ===== */
.auth-capslock {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

/* ===== Auth shell error message ===== */
.auth-error {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-color: var(--color-danger);
}

/* ===== Hero image card frame (logo + tagline su sfondo) ===== */
.auth-hero-fullimg {
    /* Nessun override colore — e una immagine raster/SVG */
}

/* ===== Dark theme: card pannello bianco diventa scuro ===== */
[data-theme="dark"] {
    color-scheme: dark; /* informa il browser per scrollbar/select nativi */
}

/* ===== Dark theme: il filtro logo monocromatico chiaro su hero diventa
   counterproductive se il logo e gia chiaro. Tuning per V1: lasciare il
   filter solo in light mode. ===== */
[data-theme="dark"] .auth-form-logo {
    /* Nessun filtro: logo gia visibile su sfondo card scuro (slate-700) */
}

/* ===== Dark theme: bordino sottile sulla card per definire i contorni
   su sfondo scuro (slate-800 vs slate-700 ha contrasto leggero) ===== */
[data-theme="dark"] .auth-card {
    border: 1px solid var(--color-border);
}

/* ===== Smart-webcomponents bridge (dark theme alignment) ===========
   La maggior parte del lavoro la fa /dark/main.css MA usa una palette
   non-slate (near-black/dark-gray) che stride con le nostre card slate-700.
   Override mirati sui componenti piu visibili in dark mode. */

[data-theme="dark"] smart-grid,
[data-theme="dark"] smart-table {
    --smart-background: var(--color-bg-surface);
    --smart-surface: var(--color-bg-surface);
    --smart-ui-state-color: var(--color-text-primary);
    --smart-grid-row-color: var(--color-text-primary);
    --smart-grid-row-alt-color: var(--color-text-primary);
    --smart-grid-row-background: var(--color-bg-surface);
    /* P0 fix 2.1: alt-row con white-overlay sottile invece di slate-600 solido
       per separazione visiva discreta senza "doppio livello" troppo marcato. */
    --smart-grid-row-alt-background: rgba(255, 255, 255, 0.04);
    /* P0 fix 2.4: hover blu tint invece di slate-600 piatto.
       Brand-color tint conduce l'occhio + comunica interattivita. */
    --smart-grid-row-hover-background: rgba(59, 130, 246, 0.10);
    --smart-grid-row-hover-color: var(--color-text-primary);
    --smart-grid-row-selected-background: rgba(59, 130, 246, 0.22);
    --smart-grid-row-selected-color: var(--color-text-primary);
    --smart-grid-column-header-background: var(--color-bg-muted);
    --smart-grid-column-header-color: var(--color-text-primary);
    --smart-grid-cell-border: var(--color-border);
    --smart-border: var(--color-border);
    --smart-border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* Smart-grid internal selectors (no CSS var support nella libreria, override
   direttamente sulle classi DOM). Le classi sono stable v18.
   Verificate via DevTools: il default style era #fff bg + #212529 text,
   invisibile su card slate-700. La regola color: var(--color-text-primary)
   sul ROW non viene ereditata dal CELL (la libreria setta color su .smart-grid-cell
   esplicitamente), serve override mirato sul custom element <smart-grid-cell>. */
[data-theme="dark"] smart-grid-cell,
[data-theme="dark"] smart-grid-cell .smart-label,
[data-theme="dark"] .smart-grid-cell-container,
[data-theme="dark"] .smart-grid-cell-container .smart-label {
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .smart-grid-header,
[data-theme="dark"] .smart-grid-column-header,
[data-theme="dark"] .smart-grid-column-header-cell-container,
[data-theme="dark"] .smart-grid-group-header,
[data-theme="dark"] .smart-grid-column-header .smart-label {
    background: var(--color-bg-muted) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .smart-grid-content,
[data-theme="dark"] .smart-grid-view-content,
[data-theme="dark"] .smart-grid-row-container,
[data-theme="dark"] .smart-grid-row-card-container,
[data-theme="dark"] .smart-grid-row-detail,
[data-theme="dark"] .smart-grid-row-sub-container,
[data-theme="dark"] .smart-grid-cell-container {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
/* P0 fix 2.4: hover blu tint subtle. Vince l'!important del rule generale
   .smart-grid-row-container { background-color: transparent !important }. */
[data-theme="dark"] .smart-grid-row-container:hover {
    background-color: rgba(59, 130, 246, 0.10) !important;
}
/* Hover blu tint sull'intera riga (smart-grid-row).
   NB: in smart-grid v18 le CSS var per alt-row-background non vengono
   applicate automaticamente alle <smart-grid-cell> (testato via DevTools:
   tutti i cell hanno bg rgb(51,65,85) identico). Per ora rinunciamo
   all'alternation banding in dark e ci concentriamo solo sul hover. */
[data-theme="dark"] smart-grid-row:hover > smart-grid-cell {
    background-color: rgba(59, 130, 246, 0.10) !important;
}
/* P0 fix 2.2: header con border-bottom marcato per separazione da prima row. */
[data-theme="dark"] .smart-grid-header {
    border-bottom: 2px solid var(--color-border-strong) !important;
}
/* Pager/Footer/Command-bar: stessa bg della card (slate-700) per evitare
   bande lighter percepibili come "white-ish" su card scure. */
[data-theme="dark"] .smart-grid-footer,
[data-theme="dark"] .smart-grid-pager,
[data-theme="dark"] .smart-grid-filter-footer,
[data-theme="dark"] .smart-grid-command-bar,
[data-theme="dark"] .smart-grid-view-bar {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

/* Custom element tags smart-webcomponents (<smart-grid-column>, <smart-pager>,
   <smart-grid-cell>, ecc.) hanno bg bianco di default come tag selectors.
   Override aggressivo per tutti i custom elements smart-* visibili nella griglia. */
[data-theme="dark"] smart-grid-column,
[data-theme="dark"] smart-grid-column.smart-grid-column-border-collapse,
[data-theme="dark"] smart-pager,
[data-theme="dark"] smart-pager.smart-element,
[data-theme="dark"] smart-grid-row,
[data-theme="dark"] smart-grid-cell.smart-grid-column-border-collapse {
    background-color: transparent !important;
}
[data-theme="dark"] smart-pager.smart-element {
    color: var(--color-text-secondary) !important;
}

/* Body bg fallback: alcuni getComputedStyle riportano body white in dark
   nonostante CSS var; rinforziamo con !important per certezza. */
[data-theme="dark"] body {
    background: var(--color-bg-base) !important;
}
[data-theme="dark"] .smart-grid-placeholder {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .smart-grid-icon {
    color: var(--color-text-secondary) !important;
}

/* Standard HTML <table> in dark — usato in dashboard "Gestione Conversazioni"
   e altri micro-tabelle dove non si usa smart-grid. Default browser styling
   (color: rgb(33,37,41)) e illeggibile su slate-700. */
[data-theme="dark"] table {
    color: var(--color-text-primary);
}
[data-theme="dark"] table th,
[data-theme="dark"] table thead td,
[data-theme="dark"] table .label,
[data-theme="dark"] .span-table th,
[data-theme="dark"] .span-table .label,
[data-theme="dark"] .span-table thead {
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] table td,
[data-theme="dark"] .span-table td {
    color: var(--color-text-primary);
    border-color: var(--color-border) !important;
}
[data-theme="dark"] table tbody tr:hover {
    background-color: var(--color-bg-muted);
}

/* P1 fix 2.3: cell padding +2px verticale per density piu rilassata.
   Affects both light + dark. Smart-grid v18 ha padding default 4px verticale
   troppo stretto per display retina. */
smart-grid-cell .smart-label,
.smart-grid-cell-container .smart-label {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
smart-grid-row {
    line-height: 36px !important;
}

/* P1 fix 2.5: sort indicator (icon arrow) nel column header.
   Default smart-webcomponents render small/colored — uniformare a token. */
.smart-grid-column-header .smart-grid-icon,
.smart-grid-column-header [class*="sort"],
.smart-grid-column-header .smart-icon {
    color: var(--color-text-secondary) !important;
    font-size: 16px !important;
    opacity: 0.85;
}
[data-theme="dark"] .smart-grid-column-header .smart-grid-icon,
[data-theme="dark"] .smart-grid-column-header [class*="sort"] {
    color: var(--color-text-secondary) !important;
}

/* Pagination override defaults in dark — vince su valori di fallback
   #475569 / #1e293b che sarebbero invisibili su card scure. Brand
   pagination_* override resta possibile per chi vuole personalizzare. */
[data-theme="dark"] {
    --brand-pag-text: var(--color-text-secondary);
    --brand-pag-selected-bg: var(--brand-primary, #3b82f6);
    --brand-pag-hover-bg: var(--color-bg-muted);
    --brand-pag-hover-text: var(--color-text-primary);
    --brand-pag-nav: var(--color-text-muted);
}

/* Smart-chart in dark — axis labels + legend */
[data-theme="dark"] smart-chart {
    --smart-chart-background: var(--color-bg-surface);
    --smart-chart-color: var(--color-text-primary);
    --smart-chart-text-color: var(--color-text-secondary);
    --smart-chart-axis-color: var(--color-text-muted);
    --smart-chart-gridline-color: rgba(148, 163, 184, 0.18);
    --smart-chart-legend-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}
[data-theme="dark"] smart-chart text {
    fill: var(--color-text-secondary) !important;
}

/* Smart-dropdown-list / smart-text-box / popups in dark — bg slate */
[data-theme="dark"] smart-drop-down-list,
[data-theme="dark"] smart-list-box,
[data-theme="dark"] smart-text-box,
[data-theme="dark"] smart-input,
[data-theme="dark"] smart-combo-box,
[data-theme="dark"] smart-password-text-box {
    --smart-background: var(--color-bg-elevated);
    --smart-surface: var(--color-bg-elevated);
    --smart-ui-state-color: var(--color-text-primary);
    --smart-border: var(--color-border);
    --smart-border-color: var(--color-border);
    color: var(--color-text-primary);
}
[data-theme="dark"] smart-list-item:hover,
[data-theme="dark"] .smart-list-item:hover {
    background: var(--color-bg-muted) !important;
    color: var(--color-text-primary) !important;
}

/* Smart-window (modal) in dark — verificato via DOM inspection le vere classi
   sono: .smart-header-section (title bar), .smart-content-container (body),
   .smart-footer (button area), .smart-overlay (backdrop). */
[data-theme="dark"] smart-window {
    --smart-background: var(--color-bg-elevated);
    --smart-surface: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
[data-theme="dark"] smart-window .smart-content-container,
[data-theme="dark"] smart-window .smart-content,
[data-theme="dark"] smart-window .smart-footer {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
/* Modal header (.smart-header-section) usa brand-primary in light come accent.
   In dark, dimming via color-mix per ridurre intensita visiva senza perdere
   identita brand. */
[data-theme="dark"] smart-window .smart-header-section {
    background: color-mix(in srgb, var(--brand-primary, #3b82f6) 75%, #000000) !important;
    border-bottom: 1px solid var(--color-border) !important;
}
/* Modal close button (X) deve restare visibile su header brand */
[data-theme="dark"] smart-window .smart-close-button,
smart-window .smart-close-button {
    color: #ffffff !important;
}

/* P0 fix 4.4: modal backdrop (.smart-overlay) in dark.
   Verificato via DOM: la classe corretta e .smart-overlay (legacy era .smart-modal). */
[data-theme="dark"] .smart-overlay,
[data-theme="dark"] .smart-modal,
[data-theme="dark"] .smart-modal-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Smart-button (default outline / link non brand-primary) leggibile in dark */
[data-theme="dark"] smart-button {
    --smart-ui-state-color: var(--color-text-primary);
    --smart-background: var(--color-bg-elevated);
}

/* Smart-scheduler (calendar view) in dark: cells, header, time-column.
   Default smart-webcomponents render scheduler con bg bianco. */
[data-theme="dark"] smart-scheduler {
    --smart-background: var(--color-bg-surface);
    --smart-surface: var(--color-bg-surface);
    --smart-scheduler-background: var(--color-bg-surface);
    --smart-scheduler-cell-background: var(--color-bg-surface);
    --smart-scheduler-cell-color: var(--color-text-primary);
    --smart-scheduler-cell-border: var(--color-border);
    --smart-scheduler-header-background: var(--color-bg-muted);
    --smart-scheduler-header-color: var(--color-text-primary);
    --smart-scheduler-timeline-cell-background: var(--color-bg-surface);
    --smart-scheduler-timeline-cell-color: var(--color-text-primary);
    --smart-scheduler-timeline-cell-border: var(--color-border);
    --smart-scheduler-non-working-cell-background: var(--color-bg-muted);
    --smart-scheduler-current-time-color: var(--color-danger);
    --smart-scheduler-current-time-indicator-color: var(--color-danger);
    background: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] smart-scheduler .smart-cells-container,
[data-theme="dark"] smart-scheduler .smart-scheduler-view,
[data-theme="dark"] smart-scheduler .smart-scheduler-cell,
[data-theme="dark"] smart-scheduler .smart-scheduler-day-header,
[data-theme="dark"] smart-scheduler .smart-scheduler-time-column,
[data-theme="dark"] smart-scheduler .smart-scheduler-toolbar,
[data-theme="dark"] smart-scheduler .smart-time-cells,
[data-theme="dark"] smart-scheduler .smart-week-cell {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] smart-scheduler .smart-scheduler-non-working-cell {
    background: var(--color-bg-muted) !important;
}
[data-theme="dark"] smart-scheduler smart-button,
[data-theme="dark"] smart-scheduler .smart-element {
    color: var(--color-text-primary) !important;
}

/* Smart-calendar (date picker / calendar widget) in dark */
[data-theme="dark"] smart-calendar {
    --smart-calendar-background: var(--color-bg-surface);
    --smart-calendar-cell-background: var(--color-bg-surface);
    --smart-calendar-cell-color: var(--color-text-primary);
    background: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
}

/* Generic fallback: qualsiasi smart-element con background hardcoded bianco
   in dark riceve overlay slate-700. Override aggressivo per coprire i
   componenti smart-webcomponents non specificamente listati. */
[data-theme="dark"] .smart-element[style*="background: white"],
[data-theme="dark"] .smart-element[style*="background:#fff"],
[data-theme="dark"] .smart-element[style*="background: #fff"] {
    background: var(--color-bg-surface) !important;
}

/* ===== Topbar logo brand-aware in dark mode ========================
   Se il brand ha caricato logo_dark, usalo automaticamente in dark mode
   (vedi Twig: doppio <img> con classe per theme switching).
   Fallback per brand senza logo_dark: filtro CSS che inverte i monocromatici. */
/* topbar-logo-dark ha inline style="display:none" come default; e necessario
   !important sul dark override per riattivarlo in dark mode. */
[data-theme="dark"] .topbar-logo-light { display: none !important; }
[data-theme="dark"] .topbar-logo-dark { display: inline-block !important; }

/* Brand senza logo_dark uploadato: classe topbar-logo-fallback (singolo img)
   ottiene un filtro che converte loghi monocromatici scuri in chiari.
   Per loghi multi-colore il filtro NON e ideale — l'admin dovrebbe caricare
   un logo_dark dedicato dall'amministrazione brand. */
[data-theme="dark"] .topbar-logo-fallback {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Auth-card logo (login / mfa) — stesso pattern */
/* auth-form-logo-dark ha inline style="display:none" — vedi sopra per il pattern. */
[data-theme="dark"] .auth-form-logo-light { display: none !important; }
[data-theme="dark"] .auth-form-logo-dark { display: block !important; }
[data-theme="dark"] .auth-form-logo-fallback {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}