/* Dark Mode CSS - Normal CSS Variables Approach */

/* Dark theme variables */
[data-theme="dark"] {
  /* Basic colors */
  --bs-body-bg: #1a1a1a !important;
  --bs-body-color: #e9ecef !important;
  --bs-text-color: #e9ecef !important;
  
  /* Card/Block colors */
  --bs-card-bg: #2d3748 !important;
  --bs-border-color: #4a5568 !important;
  
  /* Header/Footer */
  --header-bg: #1a1a1a !important;
  --footer-bg: #1a1a1a !important;
}

/* Apply dark theme to body */
[data-theme="dark"] body {
  background-color: #1a1a1a !important;
  color: #e9ecef !important;
}

/* Header styling */
[data-theme="dark"] .header-top,
[data-theme="dark"] .header-bottom,
[data-theme="dark"] nav {
  background-color: #1a1a1a !important;
  color: #e9ecef !important;
}

/* Footer styling */
[data-theme="dark"] .footer,
[data-theme="dark"] #footer {
  background-color: #1a1a1a !important;
  color: #e9ecef !important;
}

/* Cards and blocks */
[data-theme="dark"] .card,
[data-theme="dark"] .product-miniature,
[data-theme="dark"] .block,
[data-theme="dark"] .box-block,
[data-theme="dark"] .custom-block {
  background-color: #2d3748 !important;
  color: #e9ecef !important;
  border-color: #4a5568 !important;
}

/* Text colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] a {
  color: #e9ecef !important;
}

/* Links */
[data-theme="dark"] a:hover {
  color: #f8f9fa !important;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #2d3748 !important;
  color: #e9ecef !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  background-color: #2d3748 !important;
  color: #e9ecef !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Modals and popups */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas {
  background-color: #2d3748 !important;
  color: #e9ecef !important;
}

[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .offcanvas-backdrop {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #2d3748 !important;
  color: #e9ecef !important;
  border-color: #4a5568 !important;
}

/* Buttons keep their original colors (no changes needed) */

/* Tables */
[data-theme="dark"] .table {
  color: #e9ecef !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: #4a5568 !important;
}

/* Navbar */
[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: #e9ecef !important;
}

/* Dark mode toggle button */
.js-dark-mode-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.2s ease !important;
}

.js-dark-mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .js-dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Borders */
[data-theme="dark"] hr {
  border-color: #4a5568 !important;
}

/* Slider and images keep their normal appearance (no dark mode changes) */