/* ============================================================
   motodez.ro — Dark mode (v2)
   ============================================================
   LECȚIE ÎNVĂȚATĂ:
     Nu redefinim --brand-dark, --brand-mid, --brand-light.
     Astea sunt culori BRAND FIXE — folosite atât ca text (titluri)
     cât și ca BACKGROUND (navbar gradient, hero, avatare).
     Dacă le inversăm, navbar-ul devine deschis și iconurile albe
     devin invizibile.
   
   STRATEGIA CORECTĂ:
     - Variabilele brand rămân neschimbate (navy → rămâne navy oriunde e folosit).
     - Redefinim doar SURFACE-urile (--surface, --card-bg, --border-soft, --text-main).
     - Override direct pe CLASE care în light mode afișau text navy închis
       și pe dark trebuie deschise (.listing-title, .section-title,
       .text-brand, headings, request-card h5, auth-card h1, category-tile).
     - Preț: forțat galben brand (--brand-accent) pe dark, indiferent
       ce clasă folosește (defensiv, acoperă mai multe pattern-uri).
   ============================================================ */

html[data-bs-theme="dark"] {
    color-scheme: dark;

    /* NU redefinim --brand-dark, --brand-mid, --brand-light, --brand-accent, --brand-red */
    /* Toate rămân navy închis / galben / roșu — culorile brand */

    /* Redefinim doar surface-urile și textul default */
    --surface: #0b1120;
    --surface-soft: #152131;
    --card-bg: #111c2c;
    --border-soft: #1e293b;

    --text-main: #e6edf5;
    --text-muted: #94a3b8;

    /* Shadow-uri mai adânci pe dark */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.65);

    /* Bootstrap 5.3 native dark tokens */
    --bs-body-bg: #0b1120;
    --bs-body-color: #e6edf5;
    --bs-secondary-color: #94a3b8;
    --bs-border-color: #1e293b;
    --bs-tertiary-bg: #152131;
    --bs-secondary-bg: #111c2c;
}

/* ─── Body background pe dark ─────────────────────────────── */
html[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(255, 183, 3, 0.045), transparent 30%),
        linear-gradient(180deg, #0a0f1c 0%, var(--surface) 100%);
    color: var(--text-main);
}

/* ─── Navbar rămâne DARK navy identic cu light mode ────────── */
/* Doar amplificăm shadow-ul pentru contrast pe body dark */
html[data-bs-theme="dark"] .motodez-navbar {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ─── Toggle button (icon soare/lună) ─────────────────────── */
.theme-toggle {
    background: none;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 21px;
    height: 21px;
    display: none;
}

html:not([data-bs-theme="dark"]) .theme-toggle .icon-moon { display: block; }
html[data-bs-theme="dark"] .theme-toggle .icon-sun  { display: block; }

.theme-toggle:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* ─── OVERRIDE TEXT pentru clase care afișau navy pe light ── */
/* În light mode, aceste elemente au color: var(--brand-dark) sau color: #162235 */
/* Pe dark, trebuie să devină deschise ca să fie vizibile. */

html[data-bs-theme="dark"] .text-brand,
html[data-bs-theme="dark"] .listing-card .listing-title,
html[data-bs-theme="dark"] .request-card h5,
html[data-bs-theme="dark"] .section-title,
html[data-bs-theme="dark"] .auth-card h1,
html[data-bs-theme="dark"] .category-tile {
    color: var(--text-main);
}

/* Headings default: h1-h6 devin deschise pe dark, doar dacă nu au clasă explicit colorată */
html[data-bs-theme="dark"] h1:not([class*="text-"]),
html[data-bs-theme="dark"] h2:not([class*="text-"]),
html[data-bs-theme="dark"] h3:not([class*="text-"]),
html[data-bs-theme="dark"] h4:not([class*="text-"]),
html[data-bs-theme="dark"] h5:not([class*="text-"]),
html[data-bs-theme="dark"] h6:not([class*="text-"]),
html[data-bs-theme="dark"] .h1:not([class*="text-"]),
html[data-bs-theme="dark"] .h2:not([class*="text-"]),
html[data-bs-theme="dark"] .h3:not([class*="text-"]),
html[data-bs-theme="dark"] .h4:not([class*="text-"]),
html[data-bs-theme="dark"] .h5:not([class*="text-"]),
html[data-bs-theme="dark"] .h6:not([class*="text-"]) {
    color: var(--text-main);
}

/* Bootstrap display-* pentru pagini cu titluri mari */
html[data-bs-theme="dark"] .display-1,
html[data-bs-theme="dark"] .display-2,
html[data-bs-theme="dark"] .display-3,
html[data-bs-theme="dark"] .display-4,
html[data-bs-theme="dark"] .display-5,
html[data-bs-theme="dark"] .display-6 {
    color: var(--text-main);
}

/* Text în categorii tile pe hover — deja galben brand, OK */
html[data-bs-theme="dark"] .category-tile:hover {
    color: var(--brand-accent);
}

/* Section title "Vezi toate" link */
html[data-bs-theme="dark"] .section-title .link-all {
    color: var(--brand-accent);
}

/* Listing title hover — brand red rămâne bun, dar poate roșu prea închis. Îl păstrăm. */
/* Nu override .listing-title:hover — brand-red rămâne roșu vizibil */

/* ─── PREȚURI — FORȚAT galben brand pentru vizibilitate ──── */
/* Acoperă mai multe pattern-uri de nume: .listing-price (există în CSS), */
/* .price, .price-tag, .price-amount, orice clasă care conține 'price' */
html[data-bs-theme="dark"] .listing-card .listing-price,
html[data-bs-theme="dark"] .listing-price,
html[data-bs-theme="dark"] .price,
html[data-bs-theme="dark"] .price-large,
html[data-bs-theme="dark"] .price-amount,
html[data-bs-theme="dark"] .detail-price,
html[data-bs-theme="dark"] .listing-detail-price,
html[data-bs-theme="dark"] [class*="listing-price"] {
    color: var(--brand-accent) !important;
}

/* ─── CRITICAL v3: Override text-* Bootstrap classes ───────
   theme-modern.css forțează .text-warning cu color: var(--md-navy) !important;
   iar --md-navy e hardcoded #0d1b2a (nu se adaptează la dark mode).
   → prețurile ("180 RON", "100,00 RON") devin invizibile pe fundal dark.
   
   Fix: selector cu specificitate mai mare (html[data-bs-theme="dark"] .text-warning
   = 0,0,2,1) plus !important + fișier încărcat DUPĂ theme-modern.css → câștigă cascade.
   
   Toate clasele Bootstrap utilitare care setează color trebuie forțate pe dark. */

/* text-warning: rămâne galben brand (folosit pentru prețuri peste tot) */
html[data-bs-theme="dark"] .text-warning {
    color: var(--brand-accent) !important;
}

/* Excepție: badge cu bg-warning + text-dark trebuie să rămână text NEGRU
   ca să fie vizibil pe fundalul galben. */
html[data-bs-theme="dark"] .badge.bg-warning.text-dark,
html[data-bs-theme="dark"] .badge.bg-warning {
    color: var(--md-navy, #0d1b2a) !important;
}

/* text-dark: pe dark trebuie DESCHIS ca să fie vizibil.
   Excepție: badge-uri unde e folosit ca contrast pe fundal galben/deschis. */
html[data-bs-theme="dark"] .text-dark:not(.badge) {
    color: var(--text-main) !important;
}

/* Link-uri cu text-dark (folosite pentru titluri de listings + offers) */
html[data-bs-theme="dark"] a.text-dark,
html[data-bs-theme="dark"] a.text-decoration-none.text-dark {
    color: var(--text-main) !important;
}

html[data-bs-theme="dark"] a.text-dark:hover,
html[data-bs-theme="dark"] a.text-decoration-none.text-dark:hover {
    color: var(--brand-accent) !important;
}

/* text-brand (helper custom) — deja override sus, adăugat !important pentru sinergie */
html[data-bs-theme="dark"] .text-brand {
    color: var(--text-main) !important;
}

/* Excepție: text-brand pe fundal galben rămâne navy */
html[data-bs-theme="dark"] .badge.bg-warning .text-brand,
html[data-bs-theme="dark"] .bg-warning .text-brand {
    color: var(--md-navy, #0d1b2a) !important;
}

/* Bootstrap text utilitare adaptate manual */
html[data-bs-theme="dark"] .text-primary {
    color: #93b8e5 !important;
}
html[data-bs-theme="dark"] .text-success {
    color: #86efac !important;
}
html[data-bs-theme="dark"] .text-danger {
    color: #fca5a5 !important;
}
html[data-bs-theme="dark"] .text-info {
    color: #7dd3fc !important;
}
html[data-bs-theme="dark"] .text-secondary {
    color: var(--text-muted) !important;
}

/* Emphasis versions (Bootstrap 5.3) */
html[data-bs-theme="dark"] .text-primary-emphasis { color: #bfdbfe !important; }
html[data-bs-theme="dark"] .text-success-emphasis { color: #bbf7d0 !important; }
html[data-bs-theme="dark"] .text-warning-emphasis { color: #fef3c7 !important; }
html[data-bs-theme="dark"] .text-danger-emphasis  { color: #fecaca !important; }
html[data-bs-theme="dark"] .text-info-emphasis    { color: #cffafe !important; }
html[data-bs-theme="dark"] .text-secondary-emphasis { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] .text-body-emphasis    { color: var(--text-main) !important; }
html[data-bs-theme="dark"] .text-body-secondary   { color: var(--text-muted) !important; }
html[data-bs-theme="dark"] .text-body-tertiary    { color: #64748b !important; }

/* ─── theme-modern.css special overrides ──────────────────
   theme-modern.css folosește propriile variabile --md-navy, --md-yellow etc.
   Aceste variabile trebuie redefinite ca să nu conflicte pe dark. */

html[data-bs-theme="dark"] {
    /* NU redefinim --md-navy — e folosit ca background în multe locuri */
    /* Doar dacă apar bug-uri specifice, le fixăm punctual */
}

/* Regula theme-modern .fw-bold.text-brand / .fw-bold.text-warning forța navy */
/* O override cu specificitate mai mare (adăugăm data-bs-theme) */
html[data-bs-theme="dark"] .fw-bold.text-brand,
html[data-bs-theme="dark"] .fw-bold.text-warning,
html[data-bs-theme="dark"] .fw-bold.fs-4.text-brand,
html[data-bs-theme="dark"] .fw-bold.fs-5.text-brand,
html[data-bs-theme="dark"] .fw-bold.fs-5.text-warning {
    color: var(--brand-accent) !important;
}

/* Prețul mare pe pagina de detaliu (show.php linia 97):
   <span class="display-5 fw-bold text-warning">100,00 RON</span>
   theme-modern.css targets .fs-1.fw-bold și [class*="fs-1"][class*="fw-bold"] cu galben.
   Dar .display-5 NU e prins de acele reguli — deci ajunge la .text-warning care e navy → invizibil.
   Fix: forțăm galben pe display-* .fw-bold */
html[data-bs-theme="dark"] .display-1.fw-bold,
html[data-bs-theme="dark"] .display-2.fw-bold,
html[data-bs-theme="dark"] .display-3.fw-bold,
html[data-bs-theme="dark"] .display-4.fw-bold,
html[data-bs-theme="dark"] .display-5.fw-bold,
html[data-bs-theme="dark"] .display-6.fw-bold {
    /* Dacă are și .text-warning, e preț → galben. Altfel, doar text-main. */
    color: var(--text-main);
}

html[data-bs-theme="dark"] .display-1.fw-bold.text-warning,
html[data-bs-theme="dark"] .display-2.fw-bold.text-warning,
html[data-bs-theme="dark"] .display-3.fw-bold.text-warning,
html[data-bs-theme="dark"] .display-4.fw-bold.text-warning,
html[data-bs-theme="dark"] .display-5.fw-bold.text-warning,
html[data-bs-theme="dark"] .display-6.fw-bold.text-warning {
    color: var(--brand-accent) !important;
}

/* ─── Card-uri Bootstrap standard ─────────────────────────── */
html[data-bs-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-soft);
    color: var(--text-main);
}

/* Textul din card-uri (link-uri de dashboard, "Membru din", etc.) */
html[data-bs-theme="dark"] .card .text-decoration-none,
html[data-bs-theme="dark"] .card a:not(.btn):not([class*="text-"]) {
    color: var(--text-main);
}

/* Text în dashboard cards specifice */
html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] .card-body {
    color: var(--text-main);
}

/* ─── Dropdowns Bootstrap ─────────────────────────────────── */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-md);
}

html[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-main);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-soft);
    color: var(--text-main);
}

html[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-soft);
}

/* ─── Modal (registration modal) ──────────────────────────── */
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-main);
}

html[data-bs-theme="dark"] .motodez-registration-modal {
    background:
        radial-gradient(circle at top right, rgba(255, 183, 3, 0.08), transparent 38%),
        var(--card-bg);
}

html[data-bs-theme="dark"] .motodez-register-option {
    background: var(--card-bg);
    border-color: var(--border-soft);
    color: var(--text-main);
}

html[data-bs-theme="dark"] .motodez-register-option:hover {
    background: var(--surface-soft);
    color: var(--text-main);
}

html[data-bs-theme="dark"] .motodez-modal-close {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ─── v4 FIX: Auth pages (login + register + forgot + reset) ──
   Bug: .auth-card avea rgba(255,255,255,0.92) HARDCODAT în app.css →
   pe login rămâne alb-ish + label-urile foloseau color: var(--brand-dark)
   (navy închis) care rămâne navy închis pe fundal alb-ish → invizibil.
   Pe register cardul devine dark, dar label-urile rămân navy → invizibil.
   Fix defensiv: forțăm background + text cu !important pe dark. */

html[data-bs-theme="dark"] .auth-card {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-main) !important;
}

/* Toate textele din auth-card devin deschise */
html[data-bs-theme="dark"] .auth-card h1,
html[data-bs-theme="dark"] .auth-card h2,
html[data-bs-theme="dark"] .auth-card h3,
html[data-bs-theme="dark"] .auth-card h4,
html[data-bs-theme="dark"] .auth-card h5,
html[data-bs-theme="dark"] .auth-card h6,
html[data-bs-theme="dark"] .auth-card .h1,
html[data-bs-theme="dark"] .auth-card .h2,
html[data-bs-theme="dark"] .auth-card .h3,
html[data-bs-theme="dark"] .auth-card p,
html[data-bs-theme="dark"] .auth-card label,
html[data-bs-theme="dark"] .auth-card .form-label,
html[data-bs-theme="dark"] .auth-card .form-check-label,
html[data-bs-theme="dark"] .auth-card legend,
html[data-bs-theme="dark"] .auth-card strong,
html[data-bs-theme="dark"] .auth-card span:not(.badge):not([class*="text-"]) {
    color: var(--text-main) !important;
}

/* Text muted rămâne muted */
html[data-bs-theme="dark"] .auth-card .text-muted,
html[data-bs-theme="dark"] .auth-card .form-text,
html[data-bs-theme="dark"] .auth-card small.text-muted {
    color: var(--text-muted) !important;
}

/* Link-uri din auth-card (ex: "Am uitat parola", "Creează unul gratuit") */
html[data-bs-theme="dark"] .auth-card a:not(.btn) {
    color: #93b8e5 !important;
}
html[data-bs-theme="dark"] .auth-card a:not(.btn):hover {
    color: var(--brand-accent) !important;
    text-decoration: underline;
}

/* ─── v4 FIX: Register card options (Persoană fizică / Atelier) ──
   Când e SELECTAT: fundal galben-crem → text NAVY (nu deschis, ar dispărea).
   Când NU e selectat: card dark → text deschis. */

/* SELECTAT — text navy indiferent de dark mode */
html[data-bs-theme="dark"] .motodez-register-option.selected,
html[data-bs-theme="dark"] .motodez-register-option.active,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"],
html[data-bs-theme="dark"] .motodez-register-option[aria-selected="true"],
html[data-bs-theme="dark"] .motodez-register-option.is-active {
    color: #0d1b2a !important;
}

html[data-bs-theme="dark"] .motodez-register-option.selected h1,
html[data-bs-theme="dark"] .motodez-register-option.selected h2,
html[data-bs-theme="dark"] .motodez-register-option.selected h3,
html[data-bs-theme="dark"] .motodez-register-option.selected h4,
html[data-bs-theme="dark"] .motodez-register-option.selected p,
html[data-bs-theme="dark"] .motodez-register-option.selected span,
html[data-bs-theme="dark"] .motodez-register-option.selected small,
html[data-bs-theme="dark"] .motodez-register-option.active h1,
html[data-bs-theme="dark"] .motodez-register-option.active h2,
html[data-bs-theme="dark"] .motodez-register-option.active h3,
html[data-bs-theme="dark"] .motodez-register-option.active h4,
html[data-bs-theme="dark"] .motodez-register-option.active p,
html[data-bs-theme="dark"] .motodez-register-option.active span,
html[data-bs-theme="dark"] .motodez-register-option.active small,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] h1,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] h2,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] h3,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] h4,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] p,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] span,
html[data-bs-theme="dark"] .motodez-register-option[aria-checked="true"] small {
    color: #0d1b2a !important;
}

/* NE-SELECTAT — text deschis pe fundal dark card */
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) h1,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) h2,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) h3,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) h4,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) p,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) span,
html[data-bs-theme="dark"] .motodez-register-option:not(.selected):not(.active):not([aria-checked="true"]):not([aria-selected="true"]):not(.is-active) small {
    color: var(--text-main) !important;
}

/* ─── Form inputs ─────────────────────────────────────────── */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--surface-soft);
    border-color: var(--border-soft);
    color: var(--text-main);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--surface-soft);
    border-color: var(--brand-accent);
    color: var(--text-main);
    box-shadow: 0 0 0 0.22rem rgba(255, 183, 3, 0.18);
}

html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .form-text {
    color: var(--text-main);
}

/* ─── Alerts ──────────────────────────────────────────────── */
html[data-bs-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
    color: #bfdbfe;
}
html[data-bs-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.3);
    color: #bbf7d0;
}
html[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 183, 3, 0.14);
    border-color: rgba(255, 183, 3, 0.35);
    color: #fef3c7;
}
html[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(214, 40, 40, 0.16);
    border-color: rgba(214, 40, 40, 0.35);
    color: #fecaca;
}

/* ─── Tabele ──────────────────────────────────────────────── */
html[data-bs-theme="dark"] .table {
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--surface-soft);
    --bs-table-border-color: var(--border-soft);
}

/* ─── Badge-uri subtle ────────────────────────────────────── */
html[data-bs-theme="dark"] .bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.16) !important;
    color: #bbf7d0 !important;
}
html[data-bs-theme="dark"] .bg-warning-subtle {
    background-color: rgba(255, 183, 3, 0.16) !important;
    color: #fef3c7 !important;
}
html[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: rgba(65, 90, 119, 0.28) !important;
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}

/* ─── Text utilitare ──────────────────────────────────────── */
html[data-bs-theme="dark"] .text-light-emphasis {
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Bootstrap text-body pe dark */
html[data-bs-theme="dark"] .text-body {
    color: var(--text-main) !important;
}

/* Breadcrumb links */
html[data-bs-theme="dark"] .breadcrumb,
html[data-bs-theme="dark"] .breadcrumb-item {
    color: var(--text-muted);
}

html[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--text-main);
}

html[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* ─── Footer rămâne dark oricum ───────────────────────────── */
html[data-bs-theme="dark"] footer {
    border-top-color: var(--border-soft) !important;
}

/* ─── Tranziție blândă la switch ──────────────────────────── */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-switching,
    html.theme-switching *,
    html.theme-switching *::before,
    html.theme-switching *::after {
        transition: none !important;
    }
}