/* ===== VectorD Dark Mode ===== */

/* Smooth transition on toggle */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ---- Base ---- */
html.dark {
    color-scheme: dark;
}
html.dark body {
    background-color: #111113 !important;
    color: #d4d4d8;
}

/* ---- Navigation ---- */
html.dark .nav-blur {
    background: #111113 !important;
}
html.dark nav {
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark nav svg {
    color: #a1a1aa;
}
html.dark nav a, html.dark nav button {
    color: #a1a1aa;
}
html.dark nav a:hover, html.dark nav button:hover {
    color: #f4f4f5;
}
/* Admin nav border buttons */
html.dark nav .border-gray-200,
html.dark nav .border {
    border-color: rgba(255,255,255,0.1) !important;
}

/* ---- Menu Panel ---- */
html.dark .menu-panel {
    background: rgba(24,24,27,0.97) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .menu-panel * {
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .menu-panel span,
html.dark .menu-panel a:not(.nav-active) {
    color: #a1a1aa !important;
}
html.dark .menu-panel a:not(.nav-active):hover {
    color: #f4f4f5 !important;
    background: rgba(255,255,255,0.06) !important;
}
/* Active nav item — per-page accent colours in dark mode */
html.dark .menu-panel a.nav-active.text-navy-600   { color: #e8323f !important; }
html.dark .menu-panel a.nav-active.text-emerald-600 { color: #34d399 !important; }
html.dark .menu-panel a.nav-active.text-blue-600   { color: #60a5fa !important; }
html.dark .menu-panel a.nav-active.text-amber-600  { color: #fbbf24 !important; }
html.dark .menu-panel a.nav-active.text-orange-500 { color: #fb923c !important; }
html.dark .menu-panel a.nav-active.text-red-500    { color: #f87171 !important; }

/* ---- Section backgrounds ---- */
html.dark .hero-gradient:not(.hero-dark) {
    background: #111113 !important;
}
html.dark .section-gradient-dark {
    background: #18181b !important;
}
html.dark .section-gradient-mid {
    background: #141416 !important;
}
html.dark .section-light { background: #18181b !important; }
html.dark .section-mid { background: #141416 !important; }

/* ---- Cards ---- */
html.dark .card-glass {
    background: #1c1c1f !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .card-glass:hover {
    background: #222225 !important;
    border-color: rgba(255,255,255,0.14) !important;
}
html.dark .pricing-highlight {
    background: #1c1c1f !important;
    border-color: rgba(196,30,42,0.4) !important;
}

/* ---- Typography ---- */
/* Only override headings that don't already have a muted Tailwind class */
html.dark h1:not([class*="text-gray-4"]):not([class*="text-gray-5"]),
html.dark h2:not([class*="text-gray-4"]):not([class*="text-gray-5"]),
html.dark h3:not([class*="text-gray-4"]):not([class*="text-gray-5"]) {
    color: #f4f4f5;
}
/* Muted headings and labels in dark mode — keep them muted but readable */
html.dark h3[class*="text-gray-4"],
html.dark h3[class*="text-gray-5"] {
    color: #71717a;
}

/* Accent text — flat colour, slightly brighter on dark bg */
html.dark .text-gradient {
    color: #e8323f !important;
}
html.dark .ai-text-gradient {
    color: #34d399 !important;
}
/* Keep white text white */
html.dark .text-white {
    color: #ffffff !important;
}

/* ---- Icon Ring ---- */
html.dark .icon-ring {
    background: rgba(196,30,42,0.12) !important;
    border-color: rgba(196,30,42,0.25) !important;
}

/* ---- Borders ---- */
html.dark .divider-glow {
    background: rgba(255,255,255,0.08) !important;
}
html.dark hr {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ---- Inline bg-color overrides (Tailwind arbitrary values) ---- */
html.dark [class*="bg-\[#faf9f6\]"],
html.dark [class*="bg-\[#f5f3ee\]"],
html.dark [class*="bg-\[#f0eee8\]"],
html.dark [class*="bg-\[#f8f6f2\]"] {
    background-color: #1c1c1f !important;
}
html.dark [class*="border-\[#e0ddd5\]"] {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ---- Tailwind bg/border overrides for common light classes ---- */
html.dark .bg-white,
html.dark [class*="bg-white"] {
    background-color: #18181b !important;
}
html.dark .bg-gray-50 {
    background-color: #1c1c1f !important;
}
html.dark .bg-gray-100 {
    background-color: #222225 !important;
}
html.dark .border-gray-200,
html.dark .border-gray-100 {
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark .hover\:border-gray-300:hover {
    border-color: rgba(255,255,255,0.3) !important;
}
/* Tailwind text color overrides — dark-friendly equivalents */
html.dark .text-gray-900 { color: #f4f4f5 !important; }
html.dark .text-gray-800 { color: #e4e4e7 !important; }
html.dark .text-gray-700 { color: #a1a1aa !important; }
html.dark .text-gray-600 { color: #a1a1aa !important; }
html.dark .text-gray-500 { color: #71717a !important; }
html.dark .text-gray-400 { color: #52525b !important; }

/* ---- Form Inputs ---- */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #222225 !important;
    color: #e4e4e7 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #71717a !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: rgba(196,30,42,0.5) !important;
}

/* ---- Tables ---- */
html.dark table { border-color: rgba(255,255,255,0.08); }
html.dark th { background-color: #18181b; color: #a1a1aa; border-color: rgba(255,255,255,0.08); }
html.dark td { border-color: rgba(255,255,255,0.06); color: #d4d4d8; }
html.dark tr:hover td { background-color: rgba(255,255,255,0.03); }

/* Auth: password toggle */
html.dark .pw-toggle { color: #52525b; }
html.dark .pw-toggle:hover { color: #a1a1aa; }

/* Auth screen error */
html.dark .bg-red-500\/10 {
    background-color: rgba(239,68,68,0.12) !important;
}
html.dark .border-red-500\/20 {
    border-color: rgba(239,68,68,0.2) !important;
}
html.dark .text-red-300 { color: #fca5a5 !important; }

/* ---- Portal Badges ---- */
html.dark .badge-paid { background-color: rgba(22,163,74,0.15); color: #4ade80; }
html.dark .badge-pending { background-color: rgba(234,179,8,0.15); color: #facc15; }
html.dark .badge-overdue { background-color: rgba(239,68,68,0.15); color: #f87171; }

/* ---- Timeline cards ---- */
html.dark .timeline-card { background: #1c1c1f; border-color: rgba(255,255,255,0.08); }
html.dark .timeline-card.selected { border-color: rgba(196,30,42,0.8); background: rgba(196,30,42,0.1); }

/* ---- Footer ---- */
html.dark footer { background-color: #111113; }
html.dark footer a.text-gray-400 { color: #52525b !important; }
html.dark footer a.text-gray-400:hover { color: #a1a1aa !important; }

/* ---- About Us stats ---- */
html.dark .text-navy-500 { color: #e8323f !important; }

/* ---- Chat Widget ---- */
html.dark .vd-chat-window {
    background: #18181b !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .vd-chat-head {
    background: #18181b !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark .vd-chat-head h4 { color: #e4e4e7 !important; }
html.dark .vd-chat-head-status { color: #71717a !important; }
html.dark .vd-chat-x {
    background: #222225 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #a1a1aa !important;
}
html.dark .vd-chat-x:hover { background: #333338 !important; color: #e4e4e7 !important; }
html.dark .vd-chat-msgs { scrollbar-color: rgba(255,255,255,0.08) transparent; }
html.dark .vd-msg.bot {
    background: #222225 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #d4d4d8 !important;
}
html.dark .vd-msg.bot strong { color: #f4f4f5 !important; }
html.dark .vd-msg.bot code { background: rgba(255,255,255,0.08) !important; }
html.dark .vd-msg.user {
    background: #2a1215 !important;
    border-color: rgba(196,30,42,0.3) !important;
    color: #fecaca !important;
}
html.dark .vd-typing {
    background: #222225 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .vd-chat-bar {
    border-top-color: rgba(255,255,255,0.08) !important;
    background: #18181b !important;
}
html.dark .vd-chat-bar input {
    background: #222225 !important;
    color: #e4e4e7 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ---- Dark Mode Toggle Button ---- */
.dark-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}
.dark-toggle:hover { color: #111827; }
html.dark .dark-toggle { color: #a1a1aa; }
html.dark .dark-toggle:hover { color: #e4e4e7; }
.dark-toggle svg { width: 20px; height: 20px; }

/* ---- AI Section (already dark themed — keep as-is) ---- */

/* ---- Scrollbar ---- */
html.dark ::-webkit-scrollbar-track { background: #18181b; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* ===== browser.html dark mode ===== */
html.dark .menu-overlay { background: rgba(0,0,0,0.55) !important; }

/* ===== Inline background overrides ===== */
html.dark section[style*="background:#f5f3ee"],
html.dark [style*="background:#f5f3ee"] { background: #111113 !important; }
html.dark div[style*="background: white"] { background: #1c1c1f !important; }

/* ===== Colored badge backgrounds (Tailwind -50 hues) ===== */
html.dark .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; }
html.dark .bg-green-50 { background-color: rgba(34,197,94,0.1) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234,179,8,0.1) !important; }
html.dark .bg-orange-50 { background-color: rgba(249,115,22,0.1) !important; }
html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; }
html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.1) !important; }
html.dark .bg-cyan-50 { background-color: rgba(6,182,212,0.1) !important; }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-navy-50 { background-color: rgba(196,30,42,0.1) !important; }

/* ===== Colored badge borders ===== */
html.dark .border-amber-200 { border-color: rgba(245,158,11,0.3) !important; }
html.dark .border-orange-200 { border-color: rgba(249,115,22,0.3) !important; }
html.dark .border-blue-200 { border-color: rgba(59,130,246,0.3) !important; }
html.dark .border-purple-200 { border-color: rgba(168,85,247,0.3) !important; }
html.dark .border-green-200 { border-color: rgba(34,197,94,0.3) !important; }
html.dark .border-cyan-200 { border-color: rgba(6,182,212,0.3) !important; }

/* ===== Colored badge text ===== */
html.dark .text-amber-900 { color: #fbbf24 !important; }
html.dark .text-navy-700 { color: #e8323f !important; }
html.dark .text-navy-600 { color: #e8323f !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .text-orange-700 { color: #fdba74 !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-purple-600 { color: #a78bfa !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-cyan-400 { color: #22d3ee !important; }
html.dark .text-cyan-500 { color: #06b6d4 !important; }
html.dark .text-navy-300 { color: #e06b6b !important; }

/* ===== Pricing highlight cards ===== */
html.dark .pricing-blue { background: #1c1c1f !important; border-color: rgba(59,130,246,0.3) !important; }
html.dark .pricing-purple { background: #1c1c1f !important; border-color: rgba(139,92,246,0.3) !important; }
html.dark .pricing-orange { background: #1c1c1f !important; border-color: rgba(249,115,22,0.3) !important; }
html.dark .pricing-amber { background: #1c1c1f !important; border-color: rgba(245,158,11,0.3) !important; }

/* ===== Background utility overrides ===== */
html.dark .bg-gray-200 { background-color: #27272a !important; }
html.dark .bg-gray-400 { background-color: #52525b !important; }
html.dark .bg-gray-800 { background-color: #1c1c1f !important; }

/* ===== Hover states ===== */
html.dark .hover\:text-gray-700:hover { color: #a1a1aa !important; }

/* ===== Admin: active range button state ===== */
html.dark .bg-navy-500\/10 { background-color: rgba(196,30,42,0.12) !important; }
html.dark .border-navy-500\/30 { border-color: rgba(196,30,42,0.3) !important; }

/* ===== Tailwind opacity backgrounds used in web-dev questionnaire ===== */
html.dark [class*="bg-orange-500\/10"] { background-color: rgba(249,115,22,0.1) !important; }
html.dark [class*="bg-orange-500\/"] { background-color: rgba(249,115,22,0.1) !important; }

/* ===== Admin AI Panel background ===== */
html.dark #aiPanel {
    background: rgba(24,24,27,0.97) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark #aiPanel .border-gray-200,
html.dark #aiPanel .border-b,
html.dark #aiPanel .border-t {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ===== Report Maker: Professional card gradient override ===== */
html.dark .bg-gradient-to-b.from-violet-50 {
    background-image: none !important;
    background-color: #1c1c1f !important;
}
html.dark .border-violet-300 { border-color: rgba(139,92,246,0.4) !important; }

/* ===== Report Maker: billing toggle active pill ===== */
html.dark #btnMonthly[class*="bg-white"],
html.dark #btnYearly[class*="bg-white"] {
    background-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

/* ===== Report Maker: step icon rings and text ===== */
html.dark .bg-emerald-50 { background-color: rgba(52,211,153,0.1) !important; }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,0.1) !important; }
html.dark .border-emerald-100 { border-color: rgba(52,211,153,0.2) !important; }
html.dark .border-violet-100 { border-color: rgba(139,92,246,0.2) !important; }
html.dark .border-violet-200 { border-color: rgba(139,92,246,0.3) !important; }
html.dark .border-blue-100 { border-color: rgba(59,130,246,0.2) !important; }
html.dark .border-emerald-200 { border-color: rgba(52,211,153,0.3) !important; }
html.dark .border-emerald-300 { border-color: rgba(52,211,153,0.4) !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-emerald-500 { color: #10b981 !important; }
html.dark .text-violet-600 { color: #a78bfa !important; }
html.dark .text-violet-500 { color: #8b5cf6 !important; }
html.dark .text-violet-700 { color: #c4b5fd !important; }

/* ===== Report Maker App: app bar, sidebar, badges ===== */
html.dark .app-bar {
    background: #111113 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .app-sidebar {
    background: #17171a !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .sidebar-item:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark .sidebar-item.active {
    background: #222225 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html.dark .badge-plan-free {
    background: rgba(113,113,122,0.2) !important;
    color: #a1a1aa !important;
}
html.dark .badge-plan-paid {
    background: rgba(52,211,153,0.15) !important;
    color: #34d399 !important;
}

/* ===== Flat 2D: kill any residual gradients ===== */
html.dark [class*="bg-gradient"] {
    background-image: none !important;
}

/* ===== Digitalisation page ===== */
html.dark .card-light {
    background: #1c1c1f !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .section-dark { background: #141416 !important; }
html.dark .pricing-dig {
    background: #1c1c1f !important;
    border-color: rgba(139,92,246,0.3) !important;
}
/* Step number circles */
html.dark .bg-violet-100  { background-color: rgba(139,92,246,0.12) !important; }
html.dark .bg-cyan-100    { background-color: rgba(6,182,212,0.12)   !important; }
html.dark .bg-indigo-100  { background-color: rgba(99,102,241,0.12)  !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.12)  !important; }
html.dark .border-indigo-200 { border-color: rgba(99,102,241,0.3) !important; }
/* Icon ring gradients — restore subtle tinted backgrounds after blanket gradient kill */
html.dark .dig-gradient         { background: rgba(79,70,229,0.2)  !important; }
html.dark .dig-gradient-cyan    { background: rgba(6,182,212,0.2)  !important; }
html.dark .dig-gradient-indigo  { background: rgba(99,102,241,0.2) !important; }
html.dark .dig-gradient-emerald { background: rgba(16,185,129,0.2) !important; }