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

[data-theme="dark"] {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --secondary: #60a5fa;
    --accent: #f87171;
    --accent-hover: #ef4444;
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text: #e5e7eb;
    --text-light: #94a3b8;
    --border: #334155;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --gradient-ocean: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --gradient-accent: linear-gradient(135deg, #f87171 0%, #fb7185 100%);
}

[data-theme="dark"] .header {
    background: rgba(30, 41, 59, 0.95);
}

[data-theme="dark"] .bottom-nav {
    background: rgba(30, 41, 59, 0.98);
    border-top-color: var(--border);
}

[data-theme="dark"] .hero-slide::before {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.7) 0%, rgba(56, 189, 248, 0.5) 100%);
}

[data-theme="dark"] .auth-container {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
}

[data-theme="dark"] .auth-card {
    background: rgba(30, 41, 59, 0.95);
}

[data-theme="dark"] .floating-label-group input:focus + label,
[data-theme="dark"] .floating-label-group input:not(:placeholder-shown) + label {
    background: var(--card-bg);
}

[data-theme="dark"] .floating-label-group input {
    background: var(--card-bg);
    color: var(--text);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .search-field input,
[data-theme="dark"] .search-field select {
    background: var(--card-bg);
    color: var(--text);
}

[data-theme="dark"] .quantity-input {
    background: var(--card-bg);
    color: var(--text);
}

[data-theme="dark"] .quantity-btn {
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .dark-toggle {
    background: var(--border);
}

[data-theme="dark"] .dark-toggle.active {
    background: var(--primary);
}

[data-theme="dark"] .dark-toggle-slider {
    background: var(--card-bg);
}

[data-theme="dark"] .filter-option input[type="checkbox"],
[data-theme="dark"] .filter-option input[type="radio"] {
    accent-color: var(--primary);
}

[data-theme="dark"] .tab {
    color: var(--text-light);
}

[data-theme="dark"] .tab.active {
    color: var(--primary);
}

[data-theme="dark"] .footer {
    background: var(--card-bg);
    border-top-color: var(--border);
}

[data-theme="dark"] .footer-social a {
    background: var(--border);
    color: var(--text);
}

[data-theme="dark"] .footer-social a:hover {
    background: var(--primary);
    color: white;
}

[data-theme="dark"] .nav-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nav-dropdown-header {
    background: rgba(51, 65, 85, 0.5);
    color: var(--text);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .nav-dropdown-item {
    color: var(--text);
}

[data-theme="dark"] .nav-dropdown-item:hover {
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary);
}

[data-theme="dark"] .nav-dropdown-submenu {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .nav-dropdown-submenu-item {
    color: var(--text);
}

[data-theme="dark"] .nav-dropdown-submenu-item:hover {
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary);
}

[data-theme="dark"] .nav-dropdown-item i,
[data-theme="dark"] .nav-dropdown-submenu-item i {
    color: var(--primary);
}