/**
 * Dark Theme Stylesheet
 * 
 * This file is loaded as a separate <link> stylesheet in layout.tsx,
 * NOT processed by Tailwind v4's CSS compiler. This ensures all
 * [data-theme="dark"] and body.dark-mode rules survive compilation.
 */

/* ── Dark theme CSS variable overrides ── */
[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --bg-input: #1e293b;
    --bg-tag: #334155;
    --border-color: #334155;
    --border-active: #475569;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-tag: #e2e8f0;
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-light: #fcd34d;
    --accent-subtle: rgba(245, 158, 11, 0.12);
    --success: #22c55e;
    --danger: #ef4444;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --bg-sage: #1a2520;
    --bg-cream: #1c1a17;
    --bg-espresso: #1a1816;
    --text-espresso: #e7e5e4;
    --bg-dark: #0f172a;
    /* SituationPill (Job Pathfinder) */
    --jf-q-bg: linear-gradient(180deg, #1e293b 0%, #1a2332 100%);
    --jf-q-answered-bg: linear-gradient(180deg, #2a2520 0%, #2a2318 100%);
    --jf-q-answered-border: #d4a853;
    --jf-pill-row-bg: #475569;
}

/* ── Body dark mode ── */
body.dark-mode {
    background-color: #0f172a !important;
    background-image: url('/textures/nano-slate-blue.png') !important;
    background-size: 400px 400px !important;
    color: #f1f5f9 !important;
}

/* ── Dark mode nav ── */
[data-theme="dark"] nav.sticky {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: #334155 !important;
    backdrop-filter: blur(12px);
}

/* ── Background overrides ── */
[data-theme="dark"] .bg-white {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.92) !important;
}

[data-theme="dark"] .bg-white\/80 {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

[data-theme="dark"] .bg-slate-50 {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-slate-100 {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-slate-200 {
    background-color: #334155 !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: #1e293b !important;
}

/* ── Text overrides ── */
[data-theme="dark"] .text-slate-900 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-slate-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-slate-700 {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .text-slate-600 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-slate-500 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-slate-400 {
    color: #64748b !important;
}

[data-theme="dark"] .text-gray-900 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-gray-700 {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .text-gray-600 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-gray-500 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-black {
    color: #f1f5f9 !important;
}

/* ── Border overrides ── */
[data-theme="dark"] .border-slate-200 {
    border-color: #334155 !important;
}

[data-theme="dark"] .border-slate-300 {
    border-color: #475569 !important;
}

[data-theme="dark"] .border-slate-100 {
    border-color: #1e293b !important;
}

[data-theme="dark"] .border-gray-200 {
    border-color: #334155 !important;
}

[data-theme="dark"] .border-gray-300 {
    border-color: #475569 !important;
}

[data-theme="dark"] .border-eurokeys-border {
    border-color: #334155 !important;
}

/* ── Badge background adjustments ── */
[data-theme="dark"] .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.15) !important;
}

[data-theme="dark"] .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.15) !important;
}

[data-theme="dark"] .bg-violet-50 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="dark"] .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

/* ── Badge border adjustments ── */
[data-theme="dark"] .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .border-teal-200 {
    border-color: rgba(20, 184, 166, 0.3) !important;
}

[data-theme="dark"] .border-cyan-200 {
    border-color: rgba(6, 182, 212, 0.3) !important;
}

[data-theme="dark"] .border-green-200 {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .border-amber-300 {
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-theme="dark"] .border-emerald-300 {
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* ── Card overrides ── */
[data-theme="dark"] .glass,
[data-theme="dark"] .card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .glass:hover,
[data-theme="dark"] .card:hover {
    border-color: #475569 !important;
    background: #334155 !important;
}

/* ── Input overrides ── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* ── Footer ── */
[data-theme="dark"] footer {
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* ── Theme toggle button in dark mode ── */
[data-theme="dark"] button[aria-label*="Switch to"] {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: #475569 !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] button[aria-label*="Switch to"]:hover {
    background-color: rgba(30, 41, 59, 1) !important;
    border-color: #f59e0b !important;
}

/* ── Texture auto-switching ── */
[data-theme="dark"] .linen-slate {
    background-color: #0f172a;
    background-image: url('/textures/nano-charcoal.png');
}

[data-theme="dark"] .linen-sage {
    background-color: #1a2520;
    background-image: url('/textures/nano-espresso.png');
}

[data-theme="dark"] .linen-warm {
    background-color: #1a1816;
    background-image: url('/textures/dark-walnut.png');
}

[data-theme="dark"] .texture-parchment {
    background-color: #1a1816;
    background-image: url('/textures/dark-leather.png');
}

[data-theme="dark"] .texture-steel {
    background-color: #1e2228;
    background-image: url('/textures/iron-brushed.png');
}

[data-theme="dark"] .texture-concrete {
    background-color: #2d2c2a;
    background-image: url('/textures/dark-concrete.png');
}

[data-theme="dark"] .texture-rice {
    background-color: #1a1917;
    background-image: url('/textures/nano-parchment.png');
}

[data-theme="dark"] .texture-marble {
    background-color: #191c20;
    background-image: url('/textures/black-marble.png');
}

[data-theme="dark"] .texture-woodgrain {
    background-color: #2a2018;
    background-image: url('/textures/dark-walnut.png');
}

/* ── Main content area ── */
[data-theme="dark"] main {
    background-color: transparent !important;
    color: #f1f5f9 !important;
}

/* ── Search bar overrides ── */
[data-theme="dark"] .bg-slate-50\/95,
[data-theme="dark"] button.bg-slate-50\/95 {
    background-color: rgba(30, 41, 59, 0.95) !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

[data-theme="dark"] kbd {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

/* ── Additional text color overrides ── */
[data-theme="dark"] .text-zinc-900 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-zinc-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-zinc-700 {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .text-zinc-600 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-zinc-500 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-neutral-900 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-neutral-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-neutral-700 {
    color: #cbd5e1 !important;
}

/* ── Rounded-xl cards (vehicle detail, etc.) ── */
[data-theme="dark"] .rounded-xl[style*="background"] {
    background: #1e293b !important;
}

/* ── Vehicle detail page-specific overrides ── */
[data-theme="dark"] .rounded-xl.shadow-sm,
[data-theme="dark"] .rounded-xl.shadow,
[data-theme="dark"] .rounded-2xl.shadow-sm,
[data-theme="dark"] .rounded-2xl.shadow {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ── Backdrop blur elements  ── */
[data-theme="dark"] .backdrop-blur,
[data-theme="dark"] .backdrop-blur-md,
[data-theme="dark"] .backdrop-blur-sm {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* ── Ring overrides ── */
[data-theme="dark"] .ring-slate-200 {
    --tw-ring-color: #334155 !important;
}

/* ── Divide overrides ── */
[data-theme="dark"] .divide-slate-100>*+* {
    border-color: #1e293b !important;
}

[data-theme="dark"] .divide-slate-200>*+* {
    border-color: #334155 !important;
}

/* ── Gradient backgrounds (amber glow etc) ── */
[data-theme="dark"] .from-amber-200\/65 {
    --tw-gradient-from: rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .to-sky-200\/45 {
    --tw-gradient-to: rgba(56, 189, 248, 0.15) !important;
}

/* ── Additional bg colors ── */
[data-theme="dark"] .bg-slate-300 {
    background-color: #475569 !important;
}

[data-theme="dark"] .bg-gray-200 {
    background-color: #334155 !important;
}

[data-theme="dark"] .bg-gray-300 {
    background-color: #475569 !important;
}

[data-theme="dark"] .bg-zinc-50 {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-zinc-100 {
    background-color: #1e293b !important;
}

/* ── CommentSection (already dark-themed, just ensure card-bg var) ── */
[data-theme="dark"] {
    --card-bg: rgba(30, 41, 59, 0.8);
}

/* ── Scrollbar dark mode ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b !important;
}

/* ── Smooth transition for theme switching ── */
body,
nav,
main,
.glass,
.card,
footer {
    transition: background-color 0.3s ease, color 0.15s ease, border-color 0.3s ease;
}

/* ── Job Dashboard text overrides (dark mode readability) ── */
[data-theme="dark"] .text-green-700 {
    color: #4ade80 !important;
}

[data-theme="dark"] .text-amber-700 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-amber-600 {
    color: #f59e0b !important;
}

[data-theme="dark"] .text-yellow-600 {
    color: #facc15 !important;
}

[data-theme="dark"] .text-blue-700 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-orange-400 {
    color: #fb923c !important;
}

/* ── Job card hover and pause reason picker ── */
[data-theme="dark"] .hover\:bg-amber-50:hover {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

[data-theme="dark"] .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

[data-theme="dark"] .border-yellow-300 {
    border-color: rgba(234, 179, 8, 0.35) !important;
}

[data-theme="dark"] .hover\:bg-yellow-100:hover {
    background-color: rgba(234, 179, 8, 0.2) !important;
}

/* ── Tier header hover ── */
[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.6) !important;
}