/* ================================
   COMPREHENSIVE DARK MODE STYLES
   ================================ */

/* Base Dark Mode */
html {
    background: #f9fafb;
}

html.dark {
    background: #0f172a;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
    background: #0f172a;
    color: #e2e8f0;
}

main {
    flex: 1;
}

/* ================================
   HEADER & NAVIGATION
   ================================ */
.dark header {
    background: #1e293b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .logo {
    color: #60a5fa;
}

.dark .nav-link {
    color: #cbd5e1;
}

.dark .nav-link:hover {
    color: #60a5fa;
}

.dark .dropdown-menu {
    background: #1e293b;
    border: 1px solid #334155;
}

.dark .dropdown-item {
    color: #cbd5e1;
}

.dark .dropdown-item:hover {
    background: #334155;
    color: #60a5fa;
}

/* ================================
   HERO SECTION
   ================================ */
.dark .hero-modern,
.hero-modern.dark-mode {
    background: linear-gradient(to bottom right, #1e293b, #0f172a) !important;
}

.dark .hero-content h1,
.hero-modern.dark-mode .hero-content h1 {
    color: #f1f5f9 !important;
}

.dark .hero-description,
.hero-modern.dark-mode .hero-description {
    color: #cbd5e1 !important;
}

.dark .hero-link,
.hero-modern.dark-mode .hero-link {
    color: #60a5fa !important;
}

.dark .hero-link:hover,
.hero-modern.dark-mode .hero-link:hover {
    color: #93c5fd !important;
}

/* Hero Badges - Dark Mode */
.dark .badge-green {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}

.dark .badge-blue {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #1e40af;
}

.dark .badge-purple {
    background: #581c87;
    color: #c084fc;
    border-color: #6b21a8;
}

/* ================================
   TOOL CARDS (MODERN)
   ================================ */
.dark .tool-card-modern,
.tool-card-modern.dark-mode {
    background: #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.dark .tool-card-modern:hover,
.tool-card-modern.dark-mode:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .tool-text h3,
.tool-card-modern.dark-mode .tool-text h3 {
    color: #f1f5f9 !important;
}

.dark .tool-text p,
.tool-card-modern.dark-mode .tool-text p {
    color: #94a3b8 !important;
}

/* Tool Icons - Dark Mode */
.dark .icon-indigo,
.dark-mode .icon-indigo {
    background: #312e81 !important;
    color: #a5b4fc !important;
}

.dark .icon-blue,
.dark-mode .icon-blue {
    background: #1e3a8a !important;
    color: #60a5fa !important;
}

.dark .icon-purple,
.dark-mode .icon-purple {
    background: #581c87 !important;
    color: #c084fc !important;
}

.dark .icon-green,
.dark-mode .icon-green {
    background: #064e3b !important;
    color: #34d399 !important;
}

.dark .icon-orange,
.dark-mode .icon-orange {
    background: #7c2d12 !important;
    color: #fb923c !important;
}

/* ================================
   BUTTONS
   ================================ */
.dark .btn-tool {
    background: #334155;
    color: #f1f5f9;
}

.dark .btn-tool:hover {
    background: #475569;
}

.dark .btn-primary {
    background: #2563eb;
    color: white;
}

.dark .btn-primary:hover {
    background: #1d4ed8;
}

.dark .btn-secondary {
    background: #475569;
    color: #f1f5f9;
}

.dark .btn-secondary:hover {
    background: #334155;
}

/* ================================
   TOOL PAGES
   ================================ */
.dark .tool-header h1 {
    color: #f1f5f9;
}

.dark .tool-header p {
    color: #94a3b8;
}

.dark .upload-area {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.dark .upload-area h3,
.dark .upload-area p {
    color: #cbd5e1;
}

.dark .upload-area:hover {
    border-color: #475569;
    background: #334155;
}

.dark .results {
    color: #cbd5e1;
}

.dark .tool-card {
    background: #1e293b;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .tool-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ================================
   FOOTER
   ================================ */
.dark .footer-modern {
    background: #1e293b;
    border-top: 1px solid #334155;
}

.dark .footer-links a {
    color: #94a3b8;
}

.dark .footer-links a:hover {
    color: #60a5fa;
}

.dark .footer-links .separator {
    color: #475569;
}

.dark .footer-info p {
    color: #64748b;
}

/* ================================
   FORMS & INPUTS
   ================================ */
.dark input,
.dark select,
.dark textarea {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #60a5fa;
    outline: none;
}

.dark input::placeholder {
    color: #64748b;
}

.dark label {
    color: #cbd5e1;
}

/* ================================
   PREVIEW & IMAGES
   ================================ */
.dark .preview-container {
    background: #1e293b;
    border-color: #334155;
}

.dark .image-preview {
    background: #0f172a;
}

/* ================================
   SLIDERS & CONTROLS
   ================================ */
.dark .slider-container {
    background: #1e293b;
}

.dark .slider {
    background: #334155;
}

.dark .slider::-webkit-slider-thumb {
    background: #60a5fa;
}

.dark .slider::-moz-range-thumb {
    background: #60a5fa;
}

/* ================================
   BREADCRUMB
   ================================ */
.dark .breadcrumb {
    color: #94a3b8;
}

.dark .breadcrumb a {
    color: #60a5fa;
}

.dark .breadcrumb a:hover {
    color: #93c5fd;
}

/* ================================
   MOBILE MENU
   ================================ */
.dark .mobile-menu {
    background: #1e293b;
    border-top: 1px solid #334155;
}

.dark .mobile-nav-link {
    color: #cbd5e1;
}

.dark .mobile-nav-link:hover {
    background: #334155;
    color: #60a5fa;
}

.dark .mobile-section-title {
    color: #64748b;
}

/* ================================
   404 PAGE
   ================================ */
.dark .error-page {
    background: #0f172a;
    color: #e2e8f0;
}

.dark .error-page h1 {
    color: #f1f5f9;
}

.dark .error-page p {
    color: #94a3b8;
}

/* ================================
   UTILITIES
   ================================ */
.dark .text-muted {
    color: #64748b;
}

.dark .border {
    border-color: #334155;
}

.dark hr {
    border-color: #334155;
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

/* Preserve specific transitions */
.tool-card-modern,
.tool-icon-modern,
.btn-tool {
    transition: all 0.3s ease;
}