/*
  Dark mode contrast fixes
  -----------------------
  The theme uses custom CSS variables like --default-text-color, but many Bootstrap
  components still use Bootstrap variables like --bs-body-color. In dark mode this
  can cause dark text on dark backgrounds (unreadable) on some pages.

  This stylesheet maps Bootstrap variables to the theme variables and also fixes
  a few common "light" utility classes (bg-light, badges) so they stay readable.
*/

html[data-theme-mode="dark"] {
  /* Bootstrap core colors */
  --bs-body-bg: var(--default-body-bg-color);
  --bs-body-color: var(--default-text-color);
  --bs-emphasis-color: rgba(255, 255, 255, 0.9);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-heading-color: rgba(255, 255, 255, 0.9);
  --bs-border-color: var(--default-border);
  --bs-border-color-translucent: var(--default-border);
  --bs-card-bg: var(--custom-white);
  --bs-card-color: var(--default-text-color);

  /* Tables */
  --bs-table-color: var(--default-text-color);
  --bs-table-striped-color: var(--default-text-color);
  --bs-table-hover-color: var(--default-text-color);
  --bs-table-border-color: var(--default-border);
}

html[data-theme-mode="dark"] body {
  color: var(--default-text-color);
}

/* Make common "light" utility backgrounds look like dark surfaces in dark mode */
html[data-theme-mode="dark"] .bg-light,
html[data-theme-mode="dark"] .bg-white,
html[data-theme-mode="dark"] .bg-body,
html[data-theme-mode="dark"] .bg-body-tertiary,
html[data-theme-mode="dark"] .bg-body-secondary {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--default-text-color) !important;
}

/* Badges that were using bg-light + text-dark become unreadable in dark mode */
html[data-theme-mode="dark"] .badge.bg-light,
html[data-theme-mode="dark"] .badge.bg-light.text-dark {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--default-text-color) !important;
}

/* Bootstrap "text-muted" helpers */
html[data-theme-mode="dark"] .text-muted,
html[data-theme-mode="dark"] .text-body-secondary {
  color: var(--text-muted) !important;
}

/* Dropdowns / list groups that may inherit wrong colors */
html[data-theme-mode="dark"] .dropdown-menu,
html[data-theme-mode="dark"] .list-group-item {
  color: var(--default-text-color);
}

/* Inputs that rely on Bootstrap vars in some pages */
html[data-theme-mode="dark"] .form-control,
html[data-theme-mode="dark"] .form-select,
html[data-theme-mode="dark"] .input-group-text {
  color: var(--default-text-color) !important;
}

/* Table variants: prevent hard-coded black text from theme on dark mode */
html[data-theme-mode="dark"] .table thead.table-primary,
html[data-theme-mode="dark"] .table thead.table-secondary,
html[data-theme-mode="dark"] .table thead.table-success,
html[data-theme-mode="dark"] .table thead.table-warning,
html[data-theme-mode="dark"] .table thead.table-danger,
html[data-theme-mode="dark"] .table thead.table-info,
html[data-theme-mode="dark"] .table thead.table-light,
html[data-theme-mode="dark"] .table thead.table-dark {
  --bs-table-color: var(--default-text-color) !important;
  --bs-table-striped-color: var(--default-text-color) !important;
}

/* -----------------------------
   Page-specific fixes
   ----------------------------- */

/* customers/followups_active.html ("پیگیری‌های فعال")
   That page defines a light (white) gradient header for each board column.
   In dark mode, the text becomes light but the header stays white → unreadable.
   We override it here with !important so it wins over the page-level <style>. */
html[data-theme-mode="dark"] .bnc-col .card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--default-text-color) !important;
}

html[data-theme-mode="dark"] .bnc-col,
html[data-theme-mode="dark"] .bnc-customer-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Make the horizontal scrollbar visible in dark mode */
html[data-theme-mode="dark"] .bnc-board {
  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.10) !important;
}
html[data-theme-mode="dark"] .bnc-board::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme-mode="dark"] .bnc-board::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 3px solid rgba(255, 255, 255, 0.08) !important;
}