:root {
  --bg: #f8fafc;
  --bg-2: #eef3f9;
  --surface: #ffffff;
  --border: #d9e0e8;
  --text: #1c1f23;
  --muted: #6c757d;
  --nav-bg: #212529;
  --nav-text: #f8f9fa;
  --nav-hover: #e5edf7;
  --primary: #7aaef7;
  --primary-strong: #5f93e2;
  --primary-soft: rgba(122, 174, 247, 0.22);
  --secondary: #9ed5c0;
  --secondary-strong: #8ccab1;
  --secondary-soft: rgba(158, 213, 192, 0.24);
  --accent: #7aaef7;
  --accent-strong: #5f93e2;
  --accent-soft: var(--primary-soft);
  --accent-soft-2: var(--secondary-soft);
  --accent-contrast: #ffffff;
  --action-primary: var(--primary);
  --action-primary-strong: var(--primary-strong);
  --action-secondary: var(--secondary);
  --action-secondary-strong: var(--secondary-strong);
  --action-warning: #f4c95d;
  --action-warning-strong: #eab23a;
  --action-danger: #e35d6a;
  --action-danger-strong: #cc4d59;
  --status-success: #74c69d;
  --status-success-strong: #63b088;
  --status-success-contrast: #0f2413;
  --status-warning: #f4c95d;
  --status-warning-strong: #eab23a;
  --status-warning-contrast: #1f1400;
  --status-danger: #e35d6a;
  --status-danger-strong: #cc4d59;
  --status-danger-contrast: #ffffff;
  --status-info: #9ed5c0;
  --status-info-strong: #8ccab1;
  --status-info-contrast: #0f2413;
  --badge-bg: #eef3f9;
  --badge-text: #1c1f23;
  --table-hover: #e9f1fb;
  --table-head-bg: #9ed5c0;
  --pill-bg: #9ed5c0;
}

:root.theme-dark {
  color-scheme: dark;
  --bg: #0b0a12;
  --bg-2: #111323;
  --surface: #161828;
  --border: #23263a;
  --text: #eef0f6;
  --muted: #b8bed0;
  --nav-bg: #0b0a12;
  --nav-text: #eef0f6;
  --nav-hover: #c7b1ff;
  --primary: #a186ff; /* deep purple accent */
  --primary-strong: #8a6ee6;
  --primary-soft: rgba(161, 134, 255, 0.25);
  --secondary: #4b4f78;
  --secondary-strong: #3e4265;
  --secondary-soft: rgba(75, 79, 120, 0.2);
  --accent: #a186ff;
  --accent-strong: #8a6ee6;
  --accent-soft: rgba(161, 134, 255, 0.25);
  --accent-soft-2: rgba(161, 134, 255, 0.14);
  --accent-contrast: #0b0a12;
  --action-primary: var(--primary);
  --action-primary-strong: var(--primary-strong);
  --action-secondary: var(--secondary);
  --action-secondary-strong: var(--secondary-strong);
  --action-warning: #d7b15f;
  --action-warning-strong: #c19a45;
  --action-danger: #e07a76;
  --action-danger-strong: #c85f5a;
  --status-success: #82bfa0;
  --status-success-strong: #6ea88c;
  --status-success-contrast: #0b0a12;
  --status-warning: #d7b15f;
  --status-warning-strong: #c19a45;
  --status-warning-contrast: #0b0a12;
  --status-danger: #e07a76;
  --status-danger-strong: #c85f5a;
  --status-danger-contrast: #0b0a12;
  --status-info: #a186ff;
  --status-info-strong: #8a6ee6;
  --status-info-contrast: #0b0a12;
  --badge-bg: #1f2337;
  --badge-text: #eef0f6;
  --table-hover: #1d2033;
  --table-head-bg: #1d2033;
  --pill-bg: #1f2337;
}

:root.theme-forest {
  color-scheme: dark;
  --bg: #f4e9d9;            /* light beige background */
  --bg-2: #ebdfcc;
  --surface: #f9f3e7;
  --border: #d7c9b0;
  --text: #2c2a27;
  --muted: #766f65;
  --nav-bg: #2f3b2f;
  --nav-text: #e8f1e6;
  --nav-hover: #f4e9d9;     /* beige hover */
  --primary: #7fbf8f;       /* forest green */
  --primary-strong: #6aa87b;
  --primary-soft: rgba(127, 191, 143, 0.2);
  --secondary: #c7b08a;     /* warm beige secondary */
  --secondary-strong: #b59d75;
  --secondary-soft: rgba(199, 176, 138, 0.2);
  --accent: #6d9f75;        /* spruce accent */
  --accent-strong: #5b8562;
  --accent-soft: rgba(109, 159, 117, 0.2);
  --accent-soft-2: rgba(199, 176, 138, 0.16);
  --accent-contrast: #1f241d;
  --action-primary: var(--primary);
  --action-primary-strong: var(--primary-strong);
  --action-secondary: var(--secondary);
  --action-secondary-strong: var(--secondary-strong);
  --action-warning: #d3b371;
  --action-warning-strong: #bc9c59;
  --action-danger: #d87a6b;
  --action-danger-strong: #c36254;
  --status-success: #7fbf8f;
  --status-success-strong: #6aa87b;
  --status-success-contrast: #1f241d;
  --status-warning: #d3b371;
  --status-warning-strong: #bc9c59;
  --status-warning-contrast: #1f241d;
  --status-danger: #d87a6b;
  --status-danger-strong: #c36254;
  --status-danger-contrast: #1f241d;
  --status-info: #6d9f75;
  --status-info-strong: #5b8562;
  --status-info-contrast: #1f241d;
  --badge-bg: #e8ddca;
  --badge-text: #2c2a27;
  --table-hover: #ebdfcc;
  --table-head-bg: #2f3b2f; /* hunter green */
  --table-head-text: #f2f6f0;
  --pill-bg: #e8ddca;
}

:root.theme-og {
  /* Original bootstrap-inspired palette */
  --bg: #f8f9fa;
  --bg-2: #eef2f6;
  --surface: #ffffff;
  --border: #dee2e6;
  --text: #1c1f23;
  --muted: #6c757d;
  --nav-bg: #212529;
  --nav-text: #f8f9fa;
  --nav-hover: #f1f3f5;
  --primary: #0d6efd;
  --primary-strong: #0b5ed7;
  --primary-soft: rgba(13, 110, 253, 0.18);
  --secondary: #6c757d;
  --secondary-strong: #5c636a;
  --secondary-soft: rgba(108, 117, 125, 0.2);
  --accent: #0d6efd;
  --accent-strong: #0b5ed7;
  --accent-soft: rgba(13, 110, 253, 0.18);
  --accent-soft-2: rgba(108, 117, 125, 0.12);
  --accent-contrast: #ffffff;
  --action-primary: var(--primary);
  --action-primary-strong: var(--primary-strong);
  --action-secondary: var(--secondary);
  --action-secondary-strong: var(--secondary-strong);
  --action-warning: #ffc107;
  --action-warning-strong: #e0a800;
  --action-danger: #dc3545;
  --action-danger-strong: #bb2d3b;
  --status-success: #198754;
  --status-success-strong: #157347;
  --status-success-contrast: #ffffff;
  --status-warning: #ffc107;
  --status-warning-strong: #e0a800;
  --status-warning-contrast: #212529;
  --status-danger: #dc3545;
  --status-danger-strong: #bb2d3b;
  --status-danger-contrast: #ffffff;
  --status-info: #0dcaf0;
  --status-info-strong: #0bb2d0;
  --status-info-contrast: #052c3a;
  --badge-bg: #f8f9fa;
  --badge-text: #1c1f23;
  --table-hover: #f1f3f5;
  --table-head-bg: #eef2f6;
  --pill-bg: #e9ecef;
}
:root.theme-nordic {
  color-scheme: dark;
  /* Nordic-inspired: deep navy base, icy cyan primary, muted spruce secondary, soft lavender accent */
  --bg: #0f1a26;
  --bg-2: #142334;
  --surface: #1b2c42;
  --border: #2a405e;
  --text: #eaf2fb;
  --muted: #c1cedd;
  --nav-bg: #102742;
  --nav-text: #eaf2fb;
  --nav-hover: #bde7f7;
  --primary: #86d5e8; /* icy cyan */
  --primary-strong: #6bbbd2;
  --primary-soft: rgba(134, 213, 232, 0.24);
  --secondary: #8ab8b0; /* muted spruce */
  --secondary-strong: #739f98;
  --secondary-soft: rgba(138, 184, 176, 0.24);
  --accent: #c2b4ff; /* soft lavender accent */
  --accent-strong: #aa9ce8;
  --accent-soft: rgba(194, 180, 255, 0.24);
  --accent-soft-2: rgba(138, 184, 176, 0.2);
  --accent-contrast: #0c1928;
  --action-primary: var(--primary);
  --action-primary-strong: var(--primary-strong);
  --action-secondary: var(--secondary);
  --action-secondary-strong: var(--secondary-strong);
  --action-warning: #ffd9a1;
  --action-warning-strong: #f4c37c;
  --action-danger: #ff9fb0;
  --action-danger-strong: #f28396;
  --status-success: #7fdac9;
  --status-success-strong: #66c7b3;
  --status-success-contrast: #0f1a26;
  --status-warning: #ffd9a1;
  --status-warning-strong: #f4c37c;
  --status-warning-contrast: #0f1a26;
  --status-danger: #ff9fb0;
  --status-danger-strong: #f28396;
  --status-danger-contrast: #0f1a26;
  --status-info: #86d5e8;
  --status-info-strong: #6bbbd2;
  --status-info-contrast: #0f1a26;
  --badge-bg: #243a55;
  --badge-text: #eaf2fb;
  --table-hover: #243a55;
  --table-head-bg: #243a55;
  --pill-bg: #243a55;
}

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

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-strong);
}

.text-muted {
  color: var(--muted) !important;
}

.navbar {
  background-color: var(--nav-bg) !important;
}

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

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

.navbar .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.navbar .dropdown-menu .dropdown-item {
  color: var(--text);
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active {
  background-color: var(--secondary-soft);
  color: var(--text);
}

.footer {
  background-color: var(--nav-bg) !important;
  color: var(--nav-text) !important;
}

.footer a {
  color: var(--nav-hover);
}

.card,
.modal-content,
.accordion-item,
.dropdown-menu,
.list-group-item {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.accordion-button {
  background-color: var(--surface);
  color: var(--text);
}

.accordion-button:not(.collapsed) {
  background-color: var(--bg-2);
  color: var(--text);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.badge.bg-light {
  background-color: var(--badge-bg) !important;
  color: var(--badge-text) !important;
}

.badge.bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--text) !important;
}

.table {
  color: var(--text);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: inherit;
  border-color: var(--border);
}

.table thead {
  background-color: var(--table-head-bg, var(--bg-2));
  color: var(--table-head-text, var(--text));
}

/* Keep table headers visible while scrolling on pages with data tables */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--table-head-bg, var(--bg-2));
  color: var(--table-head-text, var(--text));
}

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

/* Contextual rows: force backgrounds regardless of striping */
tr.table-success > th,
tr.table-success > td {
  background-color: var(--status-success) !important;
  color: var(--status-success-contrast) !important;
  border-color: var(--status-success) !important;
}
tr.table-warning > th,
tr.table-warning > td {
  background-color: var(--status-warning) !important;
  color: var(--status-warning-contrast) !important;
  border-color: var(--status-warning) !important;
}
tr.table-danger > th,
tr.table-danger > td {
  background-color: var(--status-danger) !important;
  color: var(--status-danger-contrast) !important;
  border-color: var(--status-danger) !important;
}
tr.table-info > th,
tr.table-info > td {
  background-color: var(--status-info) !important;
  color: var(--status-info-contrast) !important;
  border-color: var(--status-info) !important;
}

/* Contextual table rows */
.table-success > :not(caption) > * {
  color: var(--status-success-contrast);
}
.table-success > :not(caption) > * > * {
  background-color: var(--status-success) !important;
  border-color: var(--status-success) !important;
}
.table-success .form-control,
.table-success .form-select,
.table-success .form-check-input {
  background-color: var(--status-success) !important;
  color: var(--status-success-contrast) !important;
  border-color: var(--status-success-strong);
}

.table-warning > :not(caption) > * {
  color: var(--status-warning-contrast);
}
.table-warning > :not(caption) > * > * {
  background-color: var(--status-warning) !important;
  border-color: var(--status-warning) !important;
}
.table-warning .form-control,
.table-warning .form-select,
.table-warning .form-check-input {
  background-color: var(--status-warning) !important;
  color: var(--status-warning-contrast) !important;
  border-color: var(--status-warning-strong);
}

.table-danger > :not(caption) > * {
  color: var(--status-danger-contrast);
}
.table-danger > :not(caption) > * > * {
  background-color: var(--status-danger) !important;
  border-color: var(--status-danger) !important;
}
.table-danger .form-control,
.table-danger .form-select,
.table-danger .form-check-input {
  background-color: var(--status-danger) !important;
  color: var(--status-danger-contrast) !important;
  border-color: var(--status-danger-strong);
}

.table-info > :not(caption) > * {
  color: var(--status-info-contrast);
}
.table-info > :not(caption) > * > * {
  background-color: var(--status-info) !important;
  border-color: var(--status-info) !important;
}

/* Ensure contextual rows override striped/hover states */
.table-striped > tbody > tr.table-success:nth-of-type(odd) > *,
.table-hover > tbody > tr.table-success:hover > * {
  background-color: var(--status-success) !important;
  color: var(--status-success-contrast) !important;
}
.table-striped > tbody > tr.table-warning:nth-of-type(odd) > *,
.table-hover > tbody > tr.table-warning:hover > * {
  background-color: var(--status-warning) !important;
  color: var(--status-warning-contrast) !important;
}
.table-striped > tbody > tr.table-danger:nth-of-type(odd) > *,
.table-hover > tbody > tr.table-danger:hover > * {
  background-color: var(--status-danger) !important;
  color: var(--status-danger-contrast) !important;
}
.table-striped > tbody > tr.table-info:nth-of-type(odd) > *,
.table-hover > tbody > tr.table-info:hover > * {
  background-color: var(--status-info) !important;
  color: var(--status-info-contrast) !important;
}
.table-info .form-control,
.table-info .form-select,
.table-info .form-check-input {
  background-color: var(--status-info) !important;
  color: var(--status-info-contrast) !important;
  border-color: var(--status-info-strong);
}

.table-responsive {
  background-color: transparent;
  overflow-y: visible;
}

@media (min-width: 768px) {
  .table-responsive {
    overflow: visible;
  }
}

.form-control,
.form-select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--muted);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--accent-contrast);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--text);
  border-color: var(--secondary-strong);
}

/* Semantic action helpers */
.btn-action-primary {
  background-color: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--accent-contrast);
}

.btn-action-primary:hover,
.btn-action-primary:focus {
  background-color: var(--action-primary-strong);
  border-color: var(--action-primary-strong);
  color: var(--accent-contrast);
}

.btn-action-secondary {
  background-color: var(--action-secondary);
  border-color: var(--action-secondary);
  color: var(--accent-contrast);
}

.btn-action-secondary:hover,
.btn-action-secondary:focus {
  background-color: var(--action-secondary-strong);
  border-color: var(--action-secondary-strong);
  color: var(--accent-contrast);
}

.btn-action-ghost {
  background-color: transparent;
  color: var(--action-primary);
  border-color: var(--action-primary);
}

.btn-action-ghost:hover,
.btn-action-ghost:focus {
  background-color: var(--primary-soft);
  color: var(--text);
  border-color: var(--action-primary);
}

.btn-action-warning {
  background-color: var(--action-warning);
  border-color: var(--action-warning);
  color: var(--text);
}

.btn-action-warning:hover,
.btn-action-warning:focus {
  background-color: var(--action-warning-strong);
  border-color: var(--action-warning-strong);
  color: var(--text);
}

.btn-action-danger {
  background-color: var(--action-danger);
  border-color: var(--action-danger);
  color: var(--accent-contrast);
}

.btn-action-danger:hover,
.btn-action-danger:focus {
  background-color: var(--action-danger-strong);
  border-color: var(--action-danger-strong);
  color: var(--accent-contrast);
}

/* Map standard Bootstrap variants to theme tokens */
.btn-success {
  background-color: var(--status-success);
  border-color: var(--status-success);
  color: var(--status-success-contrast);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--status-success-strong);
  border-color: var(--status-success-strong);
  color: var(--status-success-contrast);
}

.btn-outline-success {
  color: var(--status-success);
  border-color: var(--status-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--status-success);
  border-color: var(--status-success);
  color: var(--status-success-contrast);
}

.btn-warning {
  background-color: var(--status-warning);
  border-color: var(--status-warning);
  color: var(--status-warning-contrast);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--status-warning-strong);
  border-color: var(--status-warning-strong);
  color: var(--status-warning-contrast);
}

.btn-outline-warning {
  color: var(--status-warning);
  border-color: var(--status-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--status-warning);
  border-color: var(--status-warning);
  color: var(--status-warning-contrast);
}

.btn-danger {
  background-color: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--status-danger-contrast);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--status-danger-strong);
  border-color: var(--status-danger-strong);
  color: var(--status-danger-contrast);
}

.btn-outline-danger {
  color: var(--status-danger);
  border-color: var(--status-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--status-danger-contrast);
}

.btn-info {
  background-color: var(--status-info);
  border-color: var(--status-info);
  color: var(--status-info-contrast);
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--status-info-strong);
  border-color: var(--status-info-strong);
  color: var(--status-info-contrast);
}

.btn-outline-info {
  color: var(--status-info);
  border-color: var(--status-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--status-info);
  border-color: var(--status-info);
  color: var(--status-info-contrast);
}

.progress {
  background-color: var(--bg-2);
}

.progress-bar {
  background-color: var(--primary);
}

/* Pagination */
.pagination {
  --bs-pagination-bg: var(--surface);
  --bs-pagination-color: var(--text);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--table-hover);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-focus-bg: var(--table-hover);
  --bs-pagination-focus-color: var(--text);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: var(--accent-contrast);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--border);
  --bs-pagination-disabled-color: var(--muted);
  margin-bottom: 0;
}

.page-link {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.page-link:hover {
  background-color: var(--table-hover);
  color: var(--text);
}

.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--accent-contrast);
}

.page-item.disabled .page-link {
  background-color: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}

/* Pagination container shell */
nav[aria-label="Page navigation"],
.pagination-container {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

/* Pagination card (custom wrapper) */
.pagination-card {
  background-color: var(--surface) !important;
  border: 1px solid var(--secondary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.pagination-meta {
  color: var(--muted);
}

pre,
code {
  background-color: var(--bg-2);
  color: var(--text);
}

.upload-illustration {
  background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft)) !important;
  border-color: var(--border);
  color: var(--text);
}

.toast,
.toast-header,
.toast-body {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.toast.bg-success,
.toast.bg-success .toast-body,
.toast.bg-success .toast-header {
  background-color: var(--status-success) !important;
  color: var(--status-success-contrast) !important;
  border-color: transparent;
}

.toast.bg-warning,
.toast.bg-warning .toast-body,
.toast.bg-warning .toast-header {
  background-color: var(--status-warning) !important;
  color: var(--status-warning-contrast) !important;
  border-color: transparent;
}

.toast.bg-danger,
.toast.bg-danger .toast-body,
.toast.bg-danger .toast-header {
  background-color: var(--status-danger) !important;
  color: var(--status-danger-contrast) !important;
  border-color: transparent;
}

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