/* ==========================================================================
   DARK MODE OVERRIDES (prefers-color-scheme: dark)
   Keeps light mode untouched; only applies when the system is dark.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Ensure root background for safe area - extends into notch area */
  html {
    background: #0b1220 !important;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* iOS Safari */
  }

  /* Base */
  body {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* iOS Safari */
  }

  .container {
    background: transparent !important;
  }

  header,
  h1 {
    color: #e5e7eb !important;
  }

  footer {
    color: #9ca3af !important;
  }

  footer a {
    color: #60a5fa !important;
  }

  footer a:hover,
  footer a:focus {
    color: #93c5fd !important;
  }

  /* Search */
  .search-box {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 2px solid #1f2937 !important;
  }

  .search-box::placeholder {
    color: #6b7280 !important;
  }

  /* Tabs */
  .tablinks {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    color: #d1d5db !important;
  }

  .tablinks.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
  }

  /* Table */
  .table-container {
    background: transparent !important;
  }

  table.col-locked-table {
    background: #0f172a !important;
  }

  table.col-locked-table thead {
    background: #0b1220 !important;
  }

  table.col-locked-table thead tr {
    background: #0b1220 !important;
  }

  /* Higher specificity to override inline styles */
  html body table.col-locked-table th,
  table.col-locked-table th {
    background-color: #0b1220 !important; /* Match body background - no highlight */
    color: #f9fafb !important; /* Bright white text for legibility */
    border-bottom: 1px solid #374151 !important; /* Thinner border for dark mode */
  }

  /* Fix the mobile header border line (pseudo-element) */
  /* Hide the container pseudo-element border to prevent double lines */
  .table-container::after {
    display: none !important;
  }

  /* Force background for all specific columns to ensure no white bleed-through */
  table.col-locked-table th:nth-child(n),
  table.col-locked-table td:nth-child(n) {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
  }

  /* Ensure sorted column also has no background highlight */
  table.col-locked-table th.sorted-asc,
  table.col-locked-table th.sorted-desc {
    background-color: #0b1220 !important; /* Match body background */
    color: #60a5fa !important; /* Keep blue text for sorted state */
  }

  /* Fix Volume Text - Override strict black from table-columns.css */
  .size-pack__volume,
  table td .size-pack__volume,
  .table-container td .size-pack__volume,
  td:nth-child(3) .size-pack .size-pack__volume,
  table.col-locked-table td:nth-child(3) .size-pack .size-pack__volume {
    color: #f9fafb !important; /* White text for volume in dark mode */
  }

  /* Fix Sale/Discount Text - Override dark color */
  .discount-text,
  .price-per-100ml-column .price-per-ml__discount-text {
    color: #f9fafb !important; /* White text for discount description */
  }

  /* Fix Price Values */
  .price-current {
    color: #f9fafb !important;
  }
  
  .price-per-ml__value {
    color: #f9fafb !important;
  }

  /* Ensure inner header elements inherit the correct colors */
  .header-price,
  .price-header__action {
    color: inherit !important;
  }

  table.col-locked-table tbody {
    background: #0f172a !important;
  }

  table.col-locked-table td {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-bottom-color: #1f2937 !important;
  }

  table.col-locked-table .table-skeleton td {
    background: #0f172a !important;
    border-bottom-color: #1f2937 !important;
  }

  /* Links */
  .product-name a,
  .product-name a:visited {
    color: #60a5fa !important;
  }

  .product-name a:hover {
    color: #93c5fd !important;
  }

  .availability-store-link,
  .availability-store-link:visited,
  .availability-store-link:hover,
  .availability-store-link:active,
  .check-inventory-link,
  .check-inventory-link:visited,
  .check-inventory-link:hover,
  .check-inventory-link:active {
    color: #60a5fa !important;
  }
}