/**
 * Dark Mode Styles
 * Restaurant Online Food Ordering System
 */

/* Dark Mode Color Variables */
[data-theme="dark"] {
    /* Primary Colors - Keep brand color consistent */
    --primary-color: #E63946;
    --primary-hover: #f04957;
    --primary-light: rgba(230, 57, 70, 0.2);

    /* Text Colors */
    --text-primary: #F1FAEE;
    --text-secondary: #A8DADC;
    --text-muted: #8899A6;
    --text-light: #2B2D42;

    /* Background Colors */
    --bg-primary: #1A1A1A;
    --bg-secondary: #242424;
    --bg-tertiary: #2B2D42;
    --bg-card: #242424;

    /* Border Colors */
    --border-color: #3A3A3A;
    --border-light: #2B2D42;

    /* Shadows - More subtle in dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode body */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
}

/* Form controls in dark mode */
[data-theme="dark"] .form-control {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Search bar in dark mode */
[data-theme="dark"] .search-bar__input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-bar__input:focus {
    background-color: var(--bg-secondary);
}

/* Cards in dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .product-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

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

/* Bottom navigation in dark mode */
[data-theme="dark"] .bottom-nav {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Header in dark mode */
[data-theme="dark"] .header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-outline {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .btn-secondary {
    border-color: var(--primary-color);
}

/* Category pills in dark mode */
[data-theme="dark"] .category-pill {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

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

/* Product wishlist button in dark mode */
[data-theme="dark"] .product-card__wishlist {
    background: rgba(30, 30, 30, 0.9);
}

[data-theme="dark"] .product-card__wishlist:hover {
    background: var(--bg-secondary);
}

/* Quantity stepper in dark mode */
[data-theme="dark"] .qty-stepper {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Badges in dark mode */
[data-theme="dark"] .badge-primary {
    background: var(--primary-light);
}

[data-theme="dark"] .badge-success {
    background: rgba(42, 157, 143, 0.25);
}

[data-theme="dark"] .badge-warning {
    background: rgba(244, 162, 97, 0.25);
}

[data-theme="dark"] .badge-danger {
    background: var(--primary-light);
}

[data-theme="dark"] .badge-info {
    background: rgba(69, 123, 157, 0.25);
}

[data-theme="dark"] .badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Toast in dark mode */
[data-theme="dark"] .toast {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* Modal backdrop in dark mode */
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

/* Tables in dark mode */
[data-theme="dark"] table {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] th {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary);
}

/* Scrollbar in dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* Loader in dark mode */
[data-theme="dark"] .loader {
    border-color: var(--border-color);
    border-top-color: var(--primary-color);
}

[data-theme="dark"] .page-loader {
    background: rgba(26, 26, 26, 0.95);
}

/* Selection in dark mode */
[data-theme="dark"] ::selection {
    background: var(--primary-color);
    color: white;
}

/* Links in dark mode */
[data-theme="dark"] a {
    color: var(--primary-color);
}

[data-theme="dark"] a:hover {
    color: var(--primary-hover);
}

/* Transition for theme switching */
*,
*::before,
*::after {
    transition: background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}