/* Dark Mode CSS Variables and Styles */

/* Light Mode Variables (Default) */
:root {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-card: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-light: #ffffff;
  
  /* Brand Colors (Keep maroon for accents) */
  --brand-primary: #7F1734;
  --brand-secondary: #a91d42;
  --brand-gradient: linear-gradient(135deg, #7F1734 0%, #a91d42 100%);
  
  /* Status Colors */
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;
  
  /* Border Colors */
  --border-light: #e9ecef;
  --border-medium: #dee2e6;
  --border-dark: #adb5bd;
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.25);
  
  /* Input Colors */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus: #7F1734;
  
  /* Button Colors */
  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-text: #ffffff;
  
  /* Modal Colors */
  --modal-bg: #ffffff;
  --modal-border: #dee2e6;
  
  /* Cart Colors */
  --cart-bg: #ffffff;
  --cart-header-bg: var(--bg-secondary);
  --cart-footer-bg: var(--bg-secondary);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-card: #2d2d2d;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* Text Colors */
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  
  /* Brand Colors (Keep maroon for accents) */
  --brand-primary: #7F1734;
  --brand-secondary: #a91d42;
  --brand-gradient: linear-gradient(135deg, #7F1734 0%, #a91d42 100%);
  
  /* Status Colors (Adjusted for dark mode) */
  --success: #20c997;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;
  
  /* Border Colors */
  --border-light: #3a3a3a;
  --border-medium: #4a4a4a;
  --border-dark: #5a5a5a;
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
  --shadow-dark: rgba(0, 0, 0, 0.6);
  
  /* Input Colors */
  --input-bg: #3a3a3a;
  --input-border: #4a4a4a;
  --input-focus: #7F1734;
  
  /* Button Colors */
  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-text: #ffffff;
  
  /* Modal Colors */
  --modal-bg: #2d2d2d;
  --modal-border: #4a4a4a;
  
  /* Cart Colors */
  --cart-bg: #2d2d2d;
  --cart-header-bg: #3a3a3a;
  --cart-footer-bg: #3a3a3a;
}

/* Base Dark Mode Styles */
[data-theme="dark"] body {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar Dark Mode */
[data-theme="dark"] .navbar {
  background: rgba(45, 45, 45, 0.95) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

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

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

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

/* Navbar Icons Dark Mode */
[data-theme="dark"] .navbar-nav .nav-link i,
[data-theme="dark"] .navbar .fas,
[data-theme="dark"] .navbar .far,
[data-theme="dark"] .navbar .fa {
  color: var(--text-primary) !important;
}

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

/* Dropdown Dark Mode */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--modal-bg);
  border-color: var(--border-medium);
  box-shadow: 0 4px 20px var(--shadow-dark);
}

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

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--border-light);
}

/* Product Cards Dark Mode */
[data-theme="dark"] .product-card {
  background: var(--bg-card);
  border-color: var(--border-light);
  color: var(--text-primary);
}

[data-theme="dark"] .product-card:hover {
  box-shadow: 0 20px 40px var(--shadow-dark);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .product-title {
  color: var(--brand-primary);
}

[data-theme="dark"] .product-desc {
  color: var(--text-secondary);
}

[data-theme="dark"] .product-price {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .product-stock .stock-available {
  color: var(--success);
}

[data-theme="dark"] .product-stock .stock-out {
  color: var(--danger);
}

/* Buttons Dark Mode */
[data-theme="dark"] .btn-add-cart {
  background: var(--brand-gradient);
  color: var(--btn-primary-text);
}

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

[data-theme="dark"] .btn-favorite:hover {
  background: var(--brand-primary);
  color: var(--text-light);
}

[data-theme="dark"] .btn-favorite.favorited {
  background: var(--danger) !important;
  color: var(--text-light) !important;
  border-color: var(--danger) !important;
}

/* Forms Dark Mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(127, 23, 52, 0.25);
}

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

[data-theme="dark"] .search-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 0.2rem rgba(127, 23, 52, 0.15);
}

/* Category Section Dark Mode */
[data-theme="dark"] .category-section {
  background: var(--bg-card);
  border-color: var(--border-light);
}

[data-theme="dark"] .category-title {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .category-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .category-select:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 0.2rem rgba(127, 23, 52, 0.25);
}

/* Cart Dark Mode */
[data-theme="dark"] .sliding-cart {
  background: var(--cart-bg);
}

[data-theme="dark"] .cart-header {
  background: var(--cart-header-bg);
  border-bottom-color: var(--border-light);
}

[data-theme="dark"] .cart-header h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .cart-close i {
  color: var(--text-primary);
}

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

[data-theme="dark"] .cart-item-sliding {
  background: var(--bg-card);
  border-color: var(--border-light);
}

[data-theme="dark"] .cart-item-sliding:hover {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .item-name {
  color: var(--brand-primary);
}

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

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

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

[data-theme="dark"] .quantity-btn {
  background: var(--bg-tertiary);
  color: var(--brand-primary);
}

[data-theme="dark"] .quantity-btn:hover:not(:disabled) {
  background: var(--brand-primary);
  color: var(--text-light);
}

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

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

[data-theme="dark"] .quantity-display.quantity-input:focus {
  background: var(--bg-tertiary);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .item-total {
  color: var(--brand-primary);
}

[data-theme="dark"] .remove-cart-item {
  color: var(--danger);
}

[data-theme="dark"] .remove-cart-item:hover {
  background: rgba(220, 53, 69, 0.2);
  color: var(--danger);
}

/* Footer Dark Mode */
[data-theme="dark"] .footer {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  color: var(--text-primary);
}

[data-theme="dark"] .footer-title {
  color: var(--brand-primary);
}

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

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

[data-theme="dark"] .social-link {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  color: var(--brand-primary);
  border-color: var(--border-light);
}

[data-theme="dark"] .social-link:hover {
  background: var(--brand-gradient);
  color: var(--text-light);
}

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

[data-theme="dark"] .newsletter-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 0.2rem rgba(127, 23, 52, 0.15);
}

[data-theme="dark"] .newsletter-btn {
  background: var(--brand-gradient);
}

[data-theme="dark"] .newsletter-btn:hover {
  background: linear-gradient(135deg, #6d1429 0%, #8f1937 100%);
}

[data-theme="dark"] .back-to-top {
  background: var(--brand-gradient);
}

/* Tables Dark Mode */
[data-theme="dark"] .table {
  color: var(--text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bg-tertiary);
}

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

/* Modals Dark Mode */
[data-theme="dark"] .modal-content {
  background-color: var(--modal-bg);
  border-color: var(--modal-border);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border-light);
}

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

[data-theme="dark"] .modal-title {
  color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* SweetAlert2 Dark Mode */
[data-theme="dark"] .swal2-popup {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .swal2-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .swal2-content {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .swal2-confirm {
  background: var(--brand-gradient) !important;
}

[data-theme="dark"] .swal2-cancel {
  background: var(--btn-secondary-bg) !important;
}

/* Offcanvas Dark Mode */
[data-theme="dark"] .offcanvas {
  background-color: var(--modal-bg);
}

[data-theme="dark"] .offcanvas-header {
  border-bottom-color: var(--border-light);
}

[data-theme="dark"] .offcanvas-title {
  color: var(--text-primary);
}

/* Promo Banner Dark Mode */
[data-theme="dark"] .promo-banner {
  background: var(--brand-gradient);
  color: var(--text-light);
}

/* Empty States Dark Mode */
[data-theme="dark"] .empty-state {
  color: var(--text-secondary);
}

[data-theme="dark"] .empty-state i {
  color: var(--brand-primary);
}

/* Loading States Dark Mode */
[data-theme="dark"] .spinner-border {
  color: var(--brand-primary);
}

/* Badge Dark Mode */
[data-theme="dark"] .badge {
  color: var(--text-light);
}

/* Alert Dark Mode */
[data-theme="dark"] .alert {
  background-color: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
  background-color: rgba(32, 201, 151, 0.2);
  border-color: var(--success);
  color: var(--success);
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: var(--warning);
  color: var(--warning);
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: var(--danger);
  color: var(--danger);
}

[data-theme="dark"] .alert-info {
  background-color: rgba(13, 202, 240, 0.2);
  border-color: var(--info);
  color: var(--info);
}

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

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}

.dark-mode-toggle:hover {
  background-color: var(--bg-tertiary);
  color: var(--brand-primary);
}

.dark-mode-toggle i {
  font-size: 1rem;
  width: 16px;
  text-align: center;
}

/* Theme Icon Animation */
.theme-icon {
  transition: transform 0.3s ease;
}

[data-theme="dark"] .theme-icon {
  transform: rotate(180deg);
}