/* Light mode (default) variables */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #212529;
  --muted-fg: #6c757d;
  --border: rgba(0, 0, 0, 0.125);
  --card-bg: #ffffff;
  --card-header-bg: #f8f9fa;
  --input-bg: #ffffff;
  --input-fg: #212529;
  --input-border: #ced4da;
  --input-focus-shadow: rgba(13, 110, 253, 0.25);
  --navbar-bg: var(--bs-body-bg, #f8f9fa);
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --fg: #e6e9ee;
    --muted-fg: #a8b0bb;
    --border: rgba(255, 255, 255, 0.15);
    --card-bg: #121821;
    --card-header-bg: #0f141c;
    --input-bg: #0f141c;
    --input-fg: #e6e9ee;
    --input-border: #2b3747;
    --input-focus-shadow: rgba(13, 110, 253, 0.35);
    --navbar-bg: #0f141c;
    /* Bootstrap variable bridges for better compatibility */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --bs-border-color: var(--border);
  }
}

/* Manual override via data-theme attribute on html element */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #212529;
  --muted-fg: #6c757d;
  --border: rgba(0, 0, 0, 0.125);
  --card-bg: #ffffff;
  --card-header-bg: #f8f9fa;
  --input-bg: #ffffff;
  --input-fg: #212529;
  --input-border: #ced4da;
  --input-focus-shadow: rgba(13, 110, 253, 0.25);
  --navbar-bg: var(--bs-body-bg, #f8f9fa);
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: rgba(0, 0, 0, 0.125);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14;
  --fg: #e6e9ee;
  --muted-fg: #a8b0bb;
  --border: rgba(255, 255, 255, 0.15);
  --card-bg: #121821;
  --card-header-bg: #0f141c;
  --input-bg: #0f141c;
  --input-fg: #e6e9ee;
  --input-border: #2b3747;
  --input-focus-shadow: rgba(13, 110, 253, 0.35);
  --navbar-bg: #0f141c;
  --bs-body-bg: #0b0f14;
  --bs-body-color: #e6e9ee;
  --bs-border-color: rgba(255, 255, 255, 0.15);
}

/* Apply variables to base elements */
html, body {
  background-color: var(--bg);
  color: var(--fg);
}

/* Bootstrap compatibility tweaks using variables */
.navbar.bg-body-tertiary {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border);
}

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

.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: #0d6efd !important;
}

.card {
  background-color: var(--card-bg);
  border-color: var(--border);
}

.card-header {
  background-color: var(--card-header-bg);
  border-bottom-color: var(--border);
}

.form-label {
  color: var(--muted-fg);
}

.input-group-text {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--fg);
}

.form-control, .form-select, .form-check-input {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}

.form-check-label {
  color: var(--fg);
}

.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
  border-color: #0d6efd;
}

.dropdown-menu {
  background-color: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
}

.dropdown-item {
  color: var(--fg);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(13, 110, 253, 0.1);
  color: var(--fg);
}

.table {
  --bs-table-bg: var(--card-bg);
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--border);
}

/* Finalized (closed/expired) transaction rows */
.finalized-row {
  opacity: 0.65;
}

/* Light background surfaces used in templates */
.bg-light {
  background-color: var(--card-header-bg) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* Table section headers using Bootstrap's table-light */
.table-light {
  --bs-table-bg: var(--card-header-bg);
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--border);
}

/* Hover states for tables in dark */
@media (prefers-color-scheme: dark) {
  .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

/* Utility text colors that need contrast in dark mode */
.text-primary { color: #0d6efd !important; }
.text-muted { color: var(--muted-fg) !important; }

/* Alerts, badges, etc., rely mostly on Bootstrap; ensure readable text */
.alert, .badge { color: #fff; }

/* Links */
a { color: #0d6efd; }
a:hover { color: #0b5ed7; }

/* Placeholder color for inputs */
::placeholder {
  color: var(--muted-fg);
  opacity: 0.8;
}

/* Horizontal rules */
hr {
  color: var(--border);
  background-color: var(--border);
}