/* Dark Mode Theme Styles */

/* Focus ring stays visible on dark surfaces too. html[...] outranks the :root
   definition in variables.css (which loads later and would otherwise win at
   equal specificity). Lighter shade of the brand green so the ring reads on
   near-black surfaces. */
html[data-bs-theme='dark'] {
  --bels-focus-color: #66dd66;
}

/* Dark Mode Variables Override */

/* Dark Mode Variables Override */
[data-bs-theme='dark'] {
  /* Update CSS custom properties for dark theme */
  --bs-body-bg: var(--dark-bg);
  --bs-body-color: var(--dark-text);
  --bs-border-color: var(--dark-border);
  --bs-heading-color: var(--dark-text);
  --bs-link-color: var(--bels-accent);
  --bs-link-hover-color: var(--bels-secondary);
}

/* Dark Mode Component Overrides */
[data-bs-theme='dark'] {
  /* Navbar dark mode */
  .navbar {
    background-color: var(--dark-surface);
    border-bottom-color: var(--dark-border);
  }

  .navbar-brand {
    color: var(--dark-text);
  }

  .navbar-nav .nav-link {
    color: rgba(var(--dark-text-rgb), 0.9);
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: var(--bels-accent);
    background-color: rgba(var(--bels-accent-rgb), 0.15);
  }

  .navbar-nav .nav-link.text-danger:hover {
    background-color: rgba(var(--bels-accent-rgb), 0.2);
    color: var(--bels-danger);
  }

  .theme-toggle:hover,
  .theme-toggle:focus {
    background-color: rgba(var(--bels-accent-rgb), 0.15);
  }

  /* Cards dark mode */
  .card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
  }

  .card-header {
    background-color: var(--dark-surface-hover);
    border-bottom-color: var(--dark-border);
    color: var(--dark-text);
  }

  .user-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
  }

  .user-card .card-body {
    color: var(--dark-text);
  }

  .user-card:hover {
    background-color: var(--dark-surface-hover);
    box-shadow: 0 8px 25px rgba(var(--bels-shadow-rgb), 0.3);
  }

  /* Tables dark mode */
  .table {
    color: var(--dark-text);
    border-color: var(--dark-border);
  }

  .table th,
  .table td {
    border-color: var(--dark-border);
  }

  /* Table header variants in dark mode */
  .table-light,
  .table-light th,
  .table-light td,
  .table thead.table-light th {
    background-color: var(--dark-surface-hover) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
  }

  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--dark-text);
  }

  .table-hover > tbody > tr:hover > * {
    background-color: var(--dark-surface-hover);
    color: var(--dark-text);
  }

  /* Route and store cards for user details */
  .route-header-card {
    background-color: var(--dark-surface-hover);
    border-color: var(--dark-border);
  }

  .store-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
  }

  .store-card:hover {
    background-color: var(--dark-surface-hover);
  }

  /* Text adjustments for dark mode */
  html[data-bs-theme='dark'] .text-muted {
    color: var(--dark-text-muted) !important;
  }

  html[data-bs-theme='dark'] h1,
  html[data-bs-theme='dark'] h2,
  html[data-bs-theme='dark'] h3,
  html[data-bs-theme='dark'] h4,
  html[data-bs-theme='dark'] h5,
  html[data-bs-theme='dark'] h6 {
    color: var(--dark-text) !important;
  }

  html[data-bs-theme='dark'] p,
  html[data-bs-theme='dark'] span {
    /* No blanket `div` rule: it overrode intentionally colored text inside
       badges, buttons and status chips. */
    color: var(--dark-text);
  }

  /* Badge adjustments for dark mode */
  [data-bs-theme='dark'] .badge.bg-secondary {
    background-color: var(--dark-surface-hover);
    color: var(--dark-text);
  }

  /* bg-light elements in dark mode */
  .bg-light {
    background-color: var(--dark-surface-hover) !important;
    color: var(--dark-text) !important;
  }

  .card-footer.bg-light {
    background-color: var(--dark-surface-hover) !important;
    border-top-color: var(--dark-border) !important;
  }

  /* Forms dark mode - DRY and consistent */
  html[data-bs-theme='dark'] .form-control,
  html[data-bs-theme='dark'] .form-select {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }

  html[data-bs-theme='dark'] .form-control:focus,
  html[data-bs-theme='dark'] .form-select:focus {
    background-color: var(--dark-surface);
    border-color: var(--bels-accent);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--bels-accent-rgb), 0.25);
  }

  html[data-bs-theme='dark'] .form-label {
    color: var(--dark-text);
    font-weight: 600;
  }

  html[data-bs-theme='dark'] .form-text {
    color: var(--dark-text-muted);
  }

  html[data-bs-theme='dark'] .form-check-label {
    color: var(--dark-text);
  }

  html[data-bs-theme='dark'] .form-floating > label {
    color: var(--dark-text-muted);
  }

  html[data-bs-theme='dark'] .form-floating > .form-control:focus ~ label,
  html[data-bs-theme='dark']
    .form-floating
    > .form-control:not(:placeholder-shown)
    ~ label {
    color: var(--bels-accent);
  }

  /* Input group dark mode */
  html[data-bs-theme='dark'] .input-group-text {
    background-color: var(--dark-surface-hover);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }

  /* Ensure Bootstrap icons in input groups inherit the correct color */
  html[data-bs-theme='dark'] .input-group-text .bi,
  html[data-bs-theme='dark'] .input-group-text i {
    color: inherit;
    filter: none;
  }

  /* Date inputs dark mode - ensure calendar icon is visible */
  html[data-bs-theme='dark'] input[type="date"],
  html[data-bs-theme='dark'] input[type="datetime-local"],
  html[data-bs-theme='dark'] input[type="time"] {
    color-scheme: dark;
  }

  /* Make the native calendar picker icon visible in dark mode */
  html[data-bs-theme='dark'] input[type="date"]::-webkit-calendar-picker-indicator,
  html[data-bs-theme='dark'] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  html[data-bs-theme='dark'] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
  }

  html[data-bs-theme='dark'] input[type="date"]::-webkit-calendar-picker-indicator:hover,
  html[data-bs-theme='dark'] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

  /* Dropdowns dark mode */
  [data-bs-theme='dark'] .dropdown-menu {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
  }

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

  [data-bs-theme='dark'] .dropdown-item:hover,
  [data-bs-theme='dark'] .dropdown-item:focus {
    background-color: var(--bels-accent);
    color: white;
  }

  /* Alerts dark mode. The `color` overrides matter because
     components/alerts.css sets dark-on-tint text directly (light mode),
     which would otherwise stay dark-on-dark here. */
  .alert-success {
    --bs-alert-bg: var(--dark-alert-success-bg);
    --bs-alert-border-color: var(--dark-alert-success-border);
    --bs-alert-color: var(--dark-alert-success-color);
    color: var(--dark-alert-success-color);
  }

  .alert-info {
    --bs-alert-bg: var(--dark-alert-info-bg);
    --bs-alert-border-color: var(--dark-alert-info-border);
    --bs-alert-color: var(--dark-alert-info-color);
    color: var(--dark-alert-info-color);
  }

  .alert-warning {
    --bs-alert-bg: var(--dark-alert-warning-bg);
    --bs-alert-border-color: var(--dark-alert-warning-border);
    --bs-alert-color: var(--dark-alert-warning-color);
    color: var(--dark-alert-warning-color);
  }

  .alert-danger {
    --bs-alert-bg: rgba(var(--bels-accent-rgb), 0.12);
    --bs-alert-border-color: var(--bels-accent);
    --bs-alert-color: var(--bels-danger);
    color: var(--bels-danger);
  }

  /* Scrollbar dark mode */
  ::-webkit-scrollbar-track {
    background: var(--dark-bg);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--bels-accent);
  }
}