/* PayTrack Dark Theme v7.0.2
   Fixes Bootstrap table variables + text utilities so text stays visible in striped rows.
*/
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e2e8f0;
  --table-stripe: #f8fafc;
}
html[data-theme="dark"] {
  --bg: #0b1220;
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --card: #111827;
  --border: #253045;
  --table-stripe: #0f172a;
  color-scheme: dark;
}

html, body { background: var(--bg) !important; color: var(--text) !important; }

.navbar, .border-bottom { border-color: var(--border) !important; background: var(--card) !important; }
.card { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.modal-content { background: var(--card) !important; color: var(--text) !important; }
.alert { background: var(--table-stripe) !important; color: var(--text) !important; border-color: var(--border) !important; }

.form-control, .form-select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.form-control::placeholder { color: var(--muted) !important; }
.form-control:focus, .form-select:focus { border-color: #6aa0ff !important; box-shadow: none !important; }

/* TABLES — override Bootstrap CSS vars */
html[data-theme="dark"] .table {
  --bs-table-color: var(--text);
  --bs-table-striped-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-border-color: var(--border);
  color: var(--text) !important;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .table a,
html[data-theme="dark"] .table a:visited {
  color: #93c5fd !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--table-stripe) !important;
  color: var(--text) !important;
}

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

.btn, .btn-outline-secondary, .btn-outline-danger, .btn-outline-primary, .btn-outline-success {
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover {
  background: var(--table-stripe) !important;
}

.navbar .nav-link, .navbar-brand span { color: var(--text) !important; }