/* Dark mode styles for Echame Gas */

/* Dark mode color variables */
[data-theme="dark"] {
    --primary-white: #1a1a1a;
    --light-gray: #2d2d2d;
    --medium-gray: #404040;
    --dark-gray: #b0b0b0;
    --text-primary: #e0e0e0;
    --text-secondary: #c0c0c0;
    --text-muted: #909090;
    
    /* Accent colors remain the same */
    --accent-blue: #4A90E2;
    --accent-green: #27AE60;
    --accent-blue-light: #2a3d4d;
    --accent-green-light: #1e3a2e;
    
    /* Glassmorphism for dark mode */
    --glass-bg: rgba(30, 30, 30, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Shadows for dark mode */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    color: var(--text-primary);
}

/* Dark mode form elements */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--light-gray);
    border-color: var(--medium-gray);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--light-gray);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

/* Dark mode buttons */
[data-theme="dark"] .btn-primary-modern {
    background: linear-gradient(135deg, var(--accent-blue), #2a5d9c);
    color: var(--primary-white);
}

[data-theme="dark"] .btn-success-modern {
    background: linear-gradient(135deg, var(--accent-green), #1a6b3f);
    color: var(--primary-white);
}

[data-theme="dark"] .btn-outline-modern {
    background: var(--light-gray);
    border-color: var(--medium-gray);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline-modern:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--accent-blue-light);
}

/* Dark mode cards */
[data-theme="dark"] .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Dark mode station cards */
[data-theme="dark"] .station-card {
    background: var(--light-gray);
    border-color: var(--medium-gray);
}

[data-theme="dark"] .station-card:hover {
    background: var(--glass-bg);
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-lg);
}

/* Dark mode navbar */
[data-theme="dark"] .navbar {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid var(--medium-gray);
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--accent-blue) !important;
}

/* Dark mode footer */
[data-theme="dark"] footer {
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
}

/* Dark mode article cards */
[data-theme="dark"] .article-card {
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
}

[data-theme="dark"] .article-card:hover {
    background: var(--glass-bg);
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-lg);
}

/* Dark mode modals */
[data-theme="dark"] .modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--accent-blue-light), rgba(26, 26, 26, 0.8));
    border-bottom: 1px solid var(--medium-gray);
}

[data-theme="dark"] .modal-footer {
    background: rgba(45, 45, 45, 0.5);
    border-top: 1px solid var(--medium-gray);
}

/* Dark mode alerts */
[data-theme="dark"] .alert-info {
    background-color: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background-color: var(--accent-green-light);
    border-color: var(--accent-green);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.2);
    border-color: #dc3545;
    color: var(--text-primary);
}

/* Dark mode badges */
[data-theme="dark"] .badge {
    color: var(--text-primary);
}

/* Dark mode price badges - keep colors */
[data-theme="dark"] .price-badge.regular {
    background: linear-gradient(135deg, #64d493, #54a072) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .price-badge.premium {
    background: linear-gradient(135deg, #f37a7a, #9e4848) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .price-badge.diesel {
    background: linear-gradient(135deg, #8b8b8b, #575757) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .price-badge.default {
    background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
    color: #FFFFFF !important;
}

/* Dark mode scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--light-gray);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--medium-gray);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-gray);
}

/* Dark mode category buttons */
[data-theme="dark"] .category-btn {
    background: var(--light-gray);
    border-color: var(--medium-gray);
    color: var(--text-secondary);
}

[data-theme="dark"] .category-btn:hover,
[data-theme="dark"] .category-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--primary-white);
}

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

/* Dark mode search input */
[data-theme="dark"] .search-input {
    background: var(--light-gray);
    border-color: var(--medium-gray);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input::placeholder {
    color: var(--text-muted);
}

/* Dark mode location status */
[data-theme="dark"] .location-status {
    background: var(--accent-blue-light);
    border-left-color: var(--accent-blue);
    color: var(--text-primary);
}