/**
 * theme-dark.css — tema scuro globale (caricato su ogni pagina dal plugin
 * plg_system_pixcwh_theme). Tutto è scoped sotto html[data-theme="dark"], quindi
 * è completamente inerte quando il tema è chiaro.
 *
 * 1) Ridefinisce i token --cwh-* (e gli alias --cwh-color-*/glass usati da
 *    account.css): TUTTE le aree del componente diventano scure automaticamente.
 * 2) Layer "best-effort" per UIkit/YOOtheme su pagine non-componente. Stili
 *    YOOtheme molto custom possono richiedere ritocchi mirati ai selettori.
 */

/* ============================================================
   1) Token del design system com_pixcwh
   ============================================================ */
html[data-theme="dark"] {
    /* Inchiostro & interattivi */
    --cwh-ink:          #e8edf3;
    --cwh-primary:      #5aa9ff;
    --cwh-primary-deep: #84c0ff;
    --cwh-primary-soft: rgba(90, 169, 255, 0.14);
    --cwh-primary-ring: rgba(90, 169, 255, 0.40);

    /* Accenti */
    --cwh-accent:       #e7b15a;
    --cwh-accent-ink:   #ffd9a0;
    --cwh-accent-soft:  rgba(231, 162, 59, 0.16);
    --cwh-danger:       #f0726a;
    --cwh-danger-soft:  rgba(192, 61, 46, 0.18);
    --cwh-success:      #5cc98a;
    --cwh-success-soft: rgba(46, 125, 79, 0.18);

    /* Neutri scuri */
    --cwh-surface:      #161b26;
    --cwh-paper:        #1b212e;
    --cwh-paper-2:      #232b3a;
    --cwh-border:       rgba(255, 255, 255, 0.14);
    --cwh-border-soft:  rgba(255, 255, 255, 0.08);
    --cwh-text:         #d7dde6;
    --cwh-muted:        #9aa4b2;
    --cwh-faint:        #717a8a;

    /* Ombre più marcate su scuro */
    --cwh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --cwh-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --cwh-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);

    /* Alias usati da account.css / .cwh-on-dark */
    --cwh-color-text:      #e8edf3;
    --cwh-color-muted:     #aab4c2;
    --cwh-color-border:    rgba(255, 255, 255, 0.16);
    --cwh-glass-bg:        rgba(255, 255, 255, 0.07);
    --cwh-glass-bg-strong: rgba(28, 36, 50, 0.88);
    --cwh-glass-border:    rgba(255, 255, 255, 0.18);
    --cwh-shadow:          0 12px 36px rgba(0, 0, 0, 0.45);
    --cwh-shadow-hover:    0 18px 50px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* ============================================================
   2) Layer best-effort UIkit / YOOtheme (pagine non-componente)
   ============================================================ */
html[data-theme="dark"] body {
    background-color: #12161f !important;
    color: #d7dde6 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .uk-heading-small,
html[data-theme="dark"] .uk-heading-medium,
html[data-theme="dark"] .uk-heading-large,
html[data-theme="dark"] .uk-card-title {
    color: #e8edf3;
}

html[data-theme="dark"] a:not(.uk-button):not(.el-link) {
    color: #84c0ff;
}

html[data-theme="dark"] .uk-text-muted,
html[data-theme="dark"] .uk-text-meta {
    color: #9aa4b2 !important;
}

/* Sezioni e sfondi */
html[data-theme="dark"] .uk-section-default,
html[data-theme="dark"] .uk-background-default {
    background-color: #12161f !important;
}

html[data-theme="dark"] .uk-section-muted,
html[data-theme="dark"] .uk-background-muted,
html[data-theme="dark"] .uk-tile-muted {
    background-color: #1b212e !important;
}

html[data-theme="dark"] .uk-section-secondary,
html[data-theme="dark"] .uk-background-secondary {
    background-color: #161b26 !important;
}

/* Card / pannelli / box */
html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-secondary,
html[data-theme="dark"] .uk-panel-box,
html[data-theme="dark"] .uk-tile-default {
    background-color: #161b26 !important;
    color: #d7dde6 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Navbar / offcanvas / footer */
html[data-theme="dark"] .uk-navbar-container:not(.uk-navbar-transparent),
html[data-theme="dark"] .tm-header:not([class*="uk-light"]) {
    background-color: #161b26 !important;
}

html[data-theme="dark"] .uk-offcanvas-bar {
    background-color: #1b212e;
}

/* Modali (login, contatto, gestione annuncio…) e dropdown/dropbar */
html[data-theme="dark"] .uk-modal {
    background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .uk-modal-dialog,
html[data-theme="dark"] .uk-modal-body,
html[data-theme="dark"] .uk-modal-header,
html[data-theme="dark"] .uk-modal-footer {
    background-color: #1b212e !important;
    color: #d7dde6 !important;
}

html[data-theme="dark"] .uk-modal-header,
html[data-theme="dark"] .uk-modal-footer {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .uk-modal-title {
    color: #e8edf3 !important;
}

html[data-theme="dark"] .uk-dropdown,
html[data-theme="dark"] .uk-dropbar,
html[data-theme="dark"] .uk-navbar-dropdown {
    background-color: #1b212e;
    color: #d7dde6;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .uk-dropdown-nav > li > a,
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a {
    color: #d7dde6;
}

/* Etichette form (nei modali e ovunque) */
html[data-theme="dark"] .uk-form-label {
    color: #c4ccd8;
}

/* Pulsante di chiusura modale/offcanvas leggibile su scuro */
html[data-theme="dark"] .uk-modal-close-default,
html[data-theme="dark"] .uk-modal-close-full,
html[data-theme="dark"] .uk-close,
html[data-theme="dark"] [uk-close] {
    color: #aab4c2;
}

html[data-theme="dark"] .uk-modal-close-default:hover,
html[data-theme="dark"] .uk-close:hover,
html[data-theme="dark"] [uk-close]:hover {
    color: #fff;
}

/* Form */
html[data-theme="dark"] .uk-input,
html[data-theme="dark"] .uk-select,
html[data-theme="dark"] .uk-textarea {
    background-color: #1b212e !important;
    color: #d7dde6 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .uk-input::placeholder,
html[data-theme="dark"] .uk-textarea::placeholder {
    color: #7a8394;
}

/* Tabelle, separatori, codice */
html[data-theme="dark"] .uk-table th {
    color: #c4ccd8;
}

html[data-theme="dark"] .uk-table td,
html[data-theme="dark"] .uk-table th {
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .uk-hr {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Bottoni "default" (chiari su light) leggibili su scuro */
html[data-theme="dark"] .uk-button-default {
    color: #d7dde6;
    border-color: rgba(255, 255, 255, 0.22);
    background-color: transparent;
}

html[data-theme="dark"] .uk-button-default:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}