/* Minimal Dark Theme - Colors Only, No Layout Changes */

/* Color Variables */
:root {
    --dark-bg: #1a1a1a;
    --card-bg: #1a1a1a;
    --text-color: #ffffff;
    --secondary-text: #a0a0a0;
    --accent-color: #6e41e2;
    --accent-hover: #8b5cf6;
    --border-color: #333333;
    --input-bg: #242424;
    --login-bg: #1e3a5f;
    --register-bg: #2563eb;
}

/* Force override any CSS variables that might be setting white backgrounds */
:root {
    --bg-primary: var(--dark-bg) !important;
    --bg-secondary: var(--dark-bg) !important;
    --bg-default: var(--dark-bg) !important;
    --bg-white: var(--dark-bg) !important;
}

/* Background Colors - Fix white gaps */
html {
    background-color: var(--dark-bg) !important;
}

body {
    background-color: var(--dark-bg) !important;
    color: var(--text-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#root {
    background-color: var(--dark-bg) !important;
    min-height: 100vh !important;
}

/* Override ANY white/light backgrounds by targeting color values */
*[style*="background-color: white"],
*[style*="background-color: #fff"],
*[style*="background-color: #ffffff"],
*[style*="background-color: rgb(255, 255, 255)"],
*[style*="background-color: rgb(248, 248, 248)"],
*[style*="background-color: #f8f8f8"],
*[style*="background-color: #f5f5f5"],
*[style*="background-color: #fafafa"],
*[style*="background: white"],
*[style*="background: #fff"],
*[style*="background: #ffffff"],
*[style*="background: #f8f8f8"],
*[style*="background: rgb(248, 248, 248)"],
.bg-white,
[class*="bg-white"],
.bg-gray-50,
[class*="bg-gray-50"],
.bg-gray-100,
[class*="bg-gray-100"] {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* Aggressively fix ALL white backgrounds */
body::before,
body::after,
#root::before,
#root::after,
header::before,
header::after,
main::before,
main::after,
footer::before,
footer::after {
    display: none !important;
    background-color: var(--dark-bg) !important;
}

/* Target all divs that might have white backgrounds */
body > *,
#root > *,
header > *,
main > *,
footer > *,
div[class*="container"],
div[class*="wrapper"],
section {
    background-color: var(--dark-bg) !important;
}

/* Header - NUCLEAR OPTION for white background */
header {
    background-color: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
}

/* Target the top bar specifically - might be a separate container */
header > div:first-child,
header > section:first-child,
header > .container:first-child,
header > .wrapper:first-child,
[class*="top-bar"],
[class*="header-bar"],
[class*="banner"] {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* ULTRA-AGGRESSIVE: Target the stubborn white top bar */
/* Target every possible element that could be the white top bar */
body > div > div:first-child,
body > div > div:first-child > div,
body > div > div:first-child > div > div,
#root > div:first-child,
#root > div:first-child > div,
#root > div:first-child > div > div,
header,
header > div,
header > div > div,
header > div > div > div,
header .container,
header .container > div,
header .wrapper,
header .wrapper > div,
[class*="header"] > div:first-child,
[class*="navbar"] > div:first-child,
[class*="top-bar"] > div:first-child {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* Target any element with white background anywhere on the page */
*[style*="background-color: white"],
*[style*="background-color: #fff"],
*[style*="background-color: #ffffff"],
*[style*="background-color: rgb(255, 255, 255)"],
*[style*="background-color: rgb(248, 248, 248)"],
*[style*="background-color: #f8f8f8"],
*[style*="background: white"],
*[style*="background: #fff"],
*[style*="background: #ffffff"],
*[style*="background: #f8f8f8"] {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* Target header elements more specifically - avoid interfering with buttons */
header {
    background-color: var(--dark-bg) !important;
}

/* Only target divs and containers, not buttons or links */
header div,
header span,
header nav,
header [class*="container"],
header [class*="wrapper"] {
    background-color: var(--dark-bg) !important;
}

/* Override any inline styles on non-interactive elements */
header div[style*="background"],
header span[style*="background"],
header nav[style*="background"] {
    background-color: var(--dark-bg) !important;
}

header a {
    color: var(--text-color) !important;
}

header a:hover {
    color: var(--accent-hover) !important;
}

/* Navigation */
nav a {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

nav a:hover {
    color: var(--accent-hover) !important;
}

/* COMPLETELY REMOVE ALL FAQ STYLING - NUCLEAR OPTION */
a[href*="faq"],
a[href*="faq"] *,
a[href*="FAQ"],
a[href*="FAQ"] *,
nav a[href*="faq"],
nav a[href*="faq"] *,
nav a[href*="FAQ"],
nav a[href*="FAQ"] *,
[class*="faq"],
[class*="faq"] *,
[class*="FAQ"],
[class*="FAQ"] *,
button[class*="faq"],
button[class*="FAQ"],
header a[href*="faq"],
header a[href*="FAQ"],
nav > a:nth-child(3),
header nav > a:nth-child(3) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Override any blue/dark backgrounds on FAQ */
a[href*="faq"][style],
nav a[href*="faq"][style],
[class*="faq"][style] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Force FAQ text to be plain white like other nav items */
a[href*="faq"],
nav a[href*="faq"] {
    color: var(--text-color) !important;
}

/* Buttons */
button {
    color: var(--text-color) !important;
}

button[class*="primary"],
button:not([class*="outline"]):not([class*="ghost"]):not([class*="link"]) {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

button[class*="primary"]:hover,
button:not([class*="outline"]):not([class*="ghost"]):not([class*="link"]):hover {
    background-color: var(--accent-hover) !important;
}

button[class*="outline"] {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

button[class*="outline"]:hover {
    background-color: var(--input-bg) !important;
}

/* Login and Register buttons - AGGRESSIVE targeting */
/* Login button */
a[href*="login"],
a[href*="login"] *,
a[href*="login"] button,
button[class*="login"],
button[class*="Login"],
header button:nth-last-of-type(2),
header a:nth-last-of-type(2) button,
header a:nth-last-of-type(2) {
    background-color: var(--login-bg) !important;
    border-color: var(--login-bg) !important;
    color: white !important;
}

/* Register button */
a[href*="register"],
a[href*="register"] *,
a[href*="register"] button,
button[class*="register"],
button[class*="Register"],
header button:last-of-type,
header a:last-of-type button,
header a:last-of-type {
    background-color: var(--register-bg) !important;
    border-color: var(--register-bg) !important;
    color: white !important;
}

/* Hover states */
a[href*="login"]:hover,
a[href*="login"] button:hover,
button[class*="login"]:hover,
header button:nth-last-of-type(2):hover {
    background-color: #2d5a8f !important;
}

a[href*="register"]:hover,
a[href*="register"] button:hover,
button[class*="register"]:hover,
header button:last-of-type:hover {
    background-color: #1d4ed8 !important;
}

/* Links */
a {
    color: var(--accent-color) !important;
}

a:hover {
    color: var(--accent-hover) !important;
}

/* Plans & Pricing - PURPLE theme color */
a[href*="plans"],
a[href*="plans"] *,
nav a[href*="plans"],
[class*="plans"] {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

a[href*="plans"]:hover,
nav a[href*="plans"]:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Text Elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}

p, span, div {
    color: var(--text-color) !important;
}

/* Inputs */
input, textarea, select {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--secondary-text) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-color) !important;
}

/* Cards and Containers */
[class*="card"],
[class*="rounded"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Main Content */
main {
    background-color: var(--dark-bg) !important;
}

/* Borders */
[class*="border"] {
    border-color: var(--border-color) !important;
}

hr {
    border-color: var(--border-color) !important;
}

/* Icons */
svg {
    color: var(--text-color) !important;
}

/* Upload Areas */
[class*="upload"],
[class*="drop"] {
    background-color: var(--card-bg) !important;
    border-color: var(--accent-color) !important;
}

/* Tabs */
[role="tab"] {
    color: var(--secondary-text) !important;
}

[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"] {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Footer */
footer {
    background-color: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--secondary-text) !important;
}

/* Specific overrides for white backgrounds */
.bg-white,
[style*="background-color: white"],
[style*="background: white"] {
    background-color: var(--card-bg) !important;
}

/* Muted text */
.text-muted,
[class*="text-gray"] {
    color: var(--secondary-text) !important;
}

/* Ensure proper contrast */
[class*="text-black"],
.text-gray-900 {
    color: var(--text-color) !important;
}

/* TARGETED FIX: Override the specific white background issue */
/* Override the CSS variable that's causing the white background */
:root {
    --background: 26 26 26 !important; /* Dark background in HSL format */
}

/* Override the specific .bg-background class from index-DNKI9QbV.css */
.bg-background {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* Target the nav element with bg-background class specifically */
nav.bg-background,
nav[class*="bg-background"] {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* Override any hsl(var(--background)) usage */
[style*="hsl(var(--background))"],
[style*="background-color: hsl(var(--background))"] {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
}

/* ULTRA-AGGRESSIVE: Swap Download/Share button highlighting */
/* Target ALL buttons containing "Download" text */
button:contains("Download"),
a:contains("Download"),
[class*="download"],
button[title*="Download"],
a[title*="Download"] {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

/* Target ALL buttons containing "Share" text - remove purple */
button:contains("Share"),
a:contains("Share"),
[class*="share"],
button[title*="Share"],
a[title*="Share"] {
    background-color: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Nuclear option: Target by button order in success/result containers */
div:has(button:contains("Download")) button:contains("Download"),
div:has(button:contains("Share")) button:contains("Download"),
[class*="success"] button:first-child,
[class*="result"] button:first-child,
[class*="completed"] button:first-child,
[class*="ready"] button:first-child {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

div:has(button:contains("Share")) button:contains("Share"),
div:has(button:contains("Download")) button:contains("Share"),
[class*="success"] button:last-child,
[class*="result"] button:last-child,
[class*="completed"] button:last-child,
[class*="ready"] button:last-child {
    background-color: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Even more aggressive: Target any purple button and swap it */
button[style*="background-color: rgb(110, 65, 226)"],
button[style*="background-color: #6e41e2"],
a[style*="background-color: rgb(110, 65, 226)"],
a[style*="background-color: #6e41e2"] {
    background-color: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}