/* ============================================================================
   HABITUAL TOURIST — DARK.CSS
   
   Tutte le regole del tema scuro in un unico file.
   Caricato per ULTIMO da Layout.php, dopo base/layout/carosello/testatina/admin.
   
   Attivato dalla classe `.dark` su <html>, che viene aggiunta:
   - dallo script inline nel <head> (anti-FOUC), leggendo localStorage
   - o da core.js::toggleTheme() quando l'utente clicca il bottone
   
   Regole contenute:
   1. VARIABILI TEMA SCURO
   2. COMPONENTI BASE
   3. THEME BUTTON + USER MENU
   4. TAG (tag-button)
   5. ADMIN (foto-card, form-section, status picker, tabelle, ...)
   6. HEADER — TESTO CHIARO
   7. ICONE DEI TIPI INVERTITE (solo tipi, NON sottotipi)
   ============================================================================ */


/* ============================================================================
   1. VARIABILI TEMA SCURO
   ============================================================================ */

:root.dark {
    --c-bg:     #121212;
    --c-card:   #1e1e1e;
    --c-text:   #e0e0e0;
    --c-muted:  #aaa;
    --c-accent: #39f;
    --c-border: #333;

    /* Header: blu notte, stesso per header sito e admin bar */
    --c-header: #004c99;
}


/* ============================================================================
   2. COMPONENTI BASE
   ============================================================================ */

:root.dark .badge {
    background: #2d2d2d;
    color: #e0e0e0;
}

:root.dark .admin-bar {
    border-bottom-color: rgba(0, 0, 0, .4);
}

:root.dark .ricerche-categoria-group {
    border-color: #333;
}

:root.dark .ricerche-tag-link {
    border-color: #444;
}

:root.dark .debug-console {
    background: var(--c-card);
}


/* ============================================================================
   3. THEME BUTTON + USER MENU
   ============================================================================ */

:root.dark .theme-btn__icon {
    transform: rotate(180deg);
}

:root.dark .user-menu__btn:hover,
:root.dark .user-menu__btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
}


/* ============================================================================
   4. TAG (tag-button)
   ============================================================================ */

:root.dark .tag-button {
    background: var(--c-card);
    border-color: var(--c-border);
}

:root.dark .tag-button:hover {
    background: #2a2a2a;
    border-color: var(--c-accent);
}


/* ============================================================================
   5. ADMIN (foto-card, form-section, status picker, tabelle, ...)
   ============================================================================ */

:root.dark .foto-card,
:root.dark .foto-grid-card,
:root.dark .stat-card,
:root.dark .menu-card,
:root.dark .form-section,
:root.dark .modal-content,
:root.dark .error-container,
:root.dark .duplicates-section,
:root.dark .loading-spinner {
    background: var(--c-card);
    border-color: var(--c-border);
}

:root.dark .status-select {
    background: #2a2a2a;
    color: #e0e0e0;
}

:root.dark .error-debug {
    background: #2a1a1a;
    border-color: #5a3a3a;
    color: #ff8888;
}

:root.dark .admin-subnav {
    background: var(--c-card);
}

:root.dark .scan-progress-container {
    background: var(--c-card);
    border-color: var(--c-border);
}

:root.dark .progress-bar-wrapper {
    background: #333;
}

:root.dark .progress-bar-text {
    color: #e0e0e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

:root.dark .scan-stat-item {
    background: #2a2a2a;
    border-color: #444;
}

:root.dark .scan-stat-value {
    color: #4ade80;
}

:root.dark .scan-stat-label {
    color: #aaa;
}

:root.dark .batch-info {
    color: #aaa;
}

:root.dark .scan-completed-message {
    background: rgba(40, 167, 69, .15);
    border-color: rgba(40, 167, 69, .4);
}

:root.dark .istruzioni-llm {
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1f2f 100%);
    color: #e0e0e0;
}

:root.dark .istruzioni-llm h2 {
    color: #64b5f6;
}

:root.dark .istruzioni-llm .sottotitolo {
    color: #90caf9;
}

:root.dark .istruzioni-llm .regole-ferree {
    background: #1a1a1a;
}

:root.dark .istruzioni-llm .regole-ferree li {
    color: #90caf9;
}

:root.dark .istruzioni-llm .come-usare {
    background: #2a2a1a;
    color: #ffe082;
    border-left-color: #ffc107;
}

:root.dark .regola-uno {
    background: linear-gradient(135deg, #2a1a1a 0%, #3a2a1a 100%);
    color: #e0e0e0;
}

:root.dark .regola-uno h2 {
    color: #ef9a9a;
}

:root.dark .regola-uno .sottotitolo {
    color: #ffcc80;
}

:root.dark .regola-uno .esempio,
:root.dark .regola-igiene .esempio {
    background: #1a1a1a;
}

:root.dark .regola-uno .codice-giusto,
:root.dark .regola-igiene .codice-giusto {
    background: #1a3a1a;
    color: #a5d6a7;
}

:root.dark .regola-uno .codice-sbagliato,
:root.dark .regola-igiene .codice-sbagliato {
    background: #3a1a1a;
    color: #ef9a9a;
}

:root.dark .regola-uno .flusso,
:root.dark .regola-uno .checklist,
:root.dark .regola-uno .casi-reali,
:root.dark .regola-uno .file-critici,
:root.dark .regola-igiene .checklist {
    background: #1a1a1a;
}

:root.dark .regola-uno .casi-reali {
    color: #ffcc80;
}

:root.dark .regola-uno .file-critici code {
    background: #2a2a2a;
    color: #ef9a9a;
}

:root.dark .notification {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

/* Admin section tabs (header coso) */
:root.dark .admin-section-tabs__btn {
    background: rgba(255, 255, 255, .1);
    border-color: var(--c-border);
}

:root.dark .admin-section-tabs__btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

:root.dark .admin-section-tabs__btn.active {
    background: var(--c-accent);
    border-color: var(--c-accent);
}


/* ============================================================================
   6. HEADER — TESTO CHIARO
   
   Con header blu notte serve testo bianco. Di default l'header usa
   --c-text (chiaro in dark mode), ma logo, link e placeholder di ricerca
   restano scuri. Forziamo bianco.
   ============================================================================ */

:root.dark .site-header .logo-text,
:root.dark .site-header .logo a,
:root.dark .site-header .logo svg {
    color: #fff;
    fill: #fff;
}

:root.dark .site-header .search-form input {
    background: rgba(255, 255, 255, .95);
    color: #222;
    border-color: rgba(0, 0, 0, .15);
}

:root.dark .site-header .search-form input::placeholder {
    color: #666;
}


/* ============================================================================
   7. ICONE DEI TIPI INVERTITE (solo tipi, NON sottotipi)
   
   🔥 Invertiamo le icone dei TIPI grandi (chiese, castelli, palazzi,
   natura, eventi, musei, teatri, strade, mulini, personaggi, fonti,
   arti_e_mestieri, musica, archeo).
   
   NON tocchiamo:
   - .tag-button__icon img             (sottotipi)
   - .card__grid-item--icon img        (mosaici sottotipi)
   - .testatina__sottotipo-icon        (chip sottotipo in testatina)
   - .filter-chip__icon-img            (chip filtri sottocategorie)
   
   Target:
   - .tipo-icon                        (tabella admin lista cosi)
   - .card__icon img                   (icona piccola in alto nella card)
   - .testatina__icon                  (icona grande della testatina)
   - .tipo-group-header__icon img      (header gruppi per tipo)
   - .card__img[src*="/icone/"]        (foto singola della card quando è
                                        un'icona di fallback invece di una
                                        foto reale — la foto vera NON viene
                                        toccata perché il suo src è /FOTO/)
   ============================================================================ */

:root.dark .tipo-icon,
:root.dark .card__icon img,
:root.dark .testatina__icon,
:root.dark .tipo-group-header__icon img,
:root.dark .card__img[src*="/icone/"] {
    filter: invert(1) hue-rotate(180deg);
}