/* Dark Mode Styles */
:root {
    --dark-bg: #1a1a1a;
    --dark-bg-secondary: #242424;
    --dark-bg-tertiary: #2a2a2a;
    --dark-text: #e4e4e4;
    --dark-text-secondary: #b4b4b4;
    --dark-border: #3a3a3a;
    --dark-accent: #4a9d5f;
    --dark-accent-hover: #5ab870;
    --dark-shadow: rgba(0, 0, 0, 0.3);
}

/* Smooth transition for theme switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Base dark mode styles */
.dark-mode {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.dark-mode body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Header and Navigation */
.dark-mode header {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 2px 8px var(--dark-shadow) !important;
}

.dark-mode .main-navbar {
    background: var(--dark-bg-secondary) !important;
}

.dark-mode .nav-search input[type="text"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .nav-search input[type="text"]::placeholder {
    color: var(--dark-text-secondary) !important;
}

.dark-mode .nav-search input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(74, 157, 95, 0.2) !important;
}

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

.dark-mode .main-content {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
    border-left-color: var(--dark-border) !important;
}

.dark-mode main {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Sidebar */
.dark-mode .sidebar,
.dark-mode aside {
    background: var(--dark-bg-tertiary) !important;
    border-right: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .sidebar h3,
.dark-mode aside h3 {
    color: var(--dark-text) !important;
}

.dark-mode .sidebar a,
.dark-mode aside a {
    color: var(--dark-text-secondary) !important;
}

.dark-mode .sidebar a:hover,
.dark-mode aside a:hover {
    color: var(--dark-accent-hover) !important;
    background: rgba(74, 157, 95, 0.1) !important;
}

.dark-mode .sidebar a.active {
    background: rgba(74, 157, 95, 0.2) !important;
    color: var(--dark-accent-hover) !important;
}

/* Buttons */
.dark-mode button {
    background: var(--dark-accent) !important;
    color: white !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode button:hover {
    background: var(--dark-accent-hover) !important;
    box-shadow: 0 4px 8px rgba(74, 157, 95, 0.3) !important;
}

.dark-mode .tool-button {
    background: var(--dark-accent) !important;
}

.dark-mode .tool-button:hover {
    background: var(--dark-accent-hover) !important;
}

/* Input Fields */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="tel"],
.dark-mode input[type="number"],
.dark-mode input[type="datetime-local"],
.dark-mode textarea,
.dark-mode select {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 3px rgba(74, 157, 95, 0.2) !important;
}

/* Cards and Sections */
.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a2f1a 0%, #2a4a2a 100%) !important;
}

.dark-mode .popular-tool,
.dark-mode .tool-card {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .popular-tool:hover,
.dark-mode .tool-card:hover {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

.dark-mode .category-section {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .info-section {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

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

.dark-mode p {
    color: var(--dark-text-secondary) !important;
}

.dark-mode .tool-subtitle {
    color: var(--dark-text-secondary) !important;
}

/* QR Code Generator Specific */
.dark-mode .input-section,
.dark-mode .output-section {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .qr-display {
    background: var(--dark-bg-secondary) !important;
}

.dark-mode .best-practices {
    background: var(--dark-bg-tertiary) !important;
}

.dark-mode .faq-section details {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .faq-section details:hover {
    border-color: var(--dark-accent) !important;
}

.dark-mode .cta-section {
    background: linear-gradient(135deg, #1a2f1a 0%, #2a4a2a 100%) !important;
}

/* Footer */
.dark-mode footer {
    background: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

.dark-mode footer a {
    color: var(--dark-text-secondary) !important;
}

.dark-mode footer a:hover {
    color: var(--dark-accent-hover) !important;
}

/* JSON Formatter and Code Areas */
.dark-mode pre,
.dark-mode code {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode #jsonResult,
.dark-mode .result-area {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}

/* SEO Content */
.dark-mode .seo-content {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .benefit-card {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .seo-stats {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(42, 42, 42, 0.8) 100%) !important;
    border-left-color: var(--dark-accent) !important;
}

.dark-mode .popular-tools-detailed {
    background: var(--dark-bg-tertiary) !important;
}

.dark-mode .internal-links {
    background: var(--dark-bg-tertiary) !important;
}

.dark-mode .internal-links a {
    color: var(--dark-accent) !important;
}

.dark-mode .internal-links a:hover {
    background: var(--dark-accent) !important;
    color: white !important;
}

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

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

/* Scrollbar */
.dark-mode::-webkit-scrollbar {
    width: 12px;
    background: var(--dark-bg-secondary);
}

.dark-mode::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 6px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Special Elements */
.dark-mode .coming-soon {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.dark-mode .faq-item {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Override any !important styles from original CSS */
.dark-mode * {
    border-color: var(--dark-border) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7 !important;
}