html[data-bs-theme="dark"] {
  --tblr-body-bg: #0f1a20;
  --tblr-body-color: #e6edf1;
  --tblr-card-bg: #13242d;
  --tblr-border-color: #1f3541;
  --tblr-muted: #9fb3bd;
  --tblr-link-color: #8fd3ff;
  --netops-topbar-bg: #102832;
  --netops-topbar-border: #2b4a57;
  --netops-topbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --netops-toggle-bg: #163744;
  --netops-toggle-border: #376170;
  --netops-toggle-handle-bg: #e6edf1;
  /* Dark palette shared by components */
  --app-dark-surface: #1c2a33;
  --app-dark-surface-raised: #243845;
  --app-dark-surface-strong: #203540;
  --app-dark-surface-toolbar: #263f4c;
  --app-dark-border: #355362;
  --app-dark-border-soft: #466777;
  --app-dark-text-strong: #ecf5f9;
  --app-dark-text: #d6e7f1;
  --app-dark-text-muted: #9db8c6;
  --app-dark-accent-bg: #204352;
  --app-dark-accent-border: #2b5567;
  --app-dark-accent-fg: #d9eef5;
  --app-dark-info: #5aa8c7;
  --app-dark-warning: #d97706;
  --app-dark-ink: #111827;
  --app-dark-overlay: rgba(255, 255, 255, 0.08);
  --app-text-strong: var(--app-dark-text-strong);
  --app-text: var(--app-dark-text);
  --app-text-muted: var(--app-dark-text-muted);
  --app-warning: var(--app-dark-warning);
  --app-info: var(--app-dark-info);
  --app-toolbar-bg:
    radial-gradient(circle at top right, rgba(58, 92, 109, 0.55), transparent 36%),
    linear-gradient(135deg, var(--app-dark-surface-strong) 0%, var(--app-dark-surface-toolbar) 100%);
  color-scheme: dark;
  background-color: var(--tblr-body-bg);
  color: var(--tblr-body-color);
}

html[data-bs-theme="dark"] body {
  background-color: var(--tblr-body-bg);
  color: var(--tblr-body-color);
}

html[data-bs-theme="light"] {
  --tblr-primary: #007da4;
  --tblr-secondary: #2d434e;
  --tblr-danger: #e15347;
  --tblr-primary-rgb: 0, 125, 164;
  --tblr-secondary-rgb: 45, 67, 78;
  --tblr-danger-rgb: 225, 83, 71;
}

html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .page,
html[data-bs-theme="dark"] .page-wrapper,
html[data-bs-theme="dark"] .page-body,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .footer {
  background-color: var(--tblr-body-bg) !important;
  color: var(--tblr-body-color);
}

html[data-bs-theme="dark"] .user-name-badge {
  background-color: var(--app-dark-overlay) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .list-group-item {
  background-color: var(--tblr-card-bg) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}

html[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--tblr-card-bg) !important;
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color) !important;
}

html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table thead .btn-link {
  color: var(--tblr-body-color) !important;
}

html[data-bs-theme="dark"] .table thead .btn-link:hover {
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text {
  background-color: var(--app-form-field-bg) !important;
  color: var(--app-form-field-color) !important;
  border-color: var(--app-form-field-border) !important;
}

html[data-bs-theme="dark"] .navbar-brand-autodark .navbar-brand-image {
  filter: brightness(1.15);
}

.navbar-brand-autodark .navbar-brand-image {
  filter: none !important;
}

html[data-bs-theme="dark"] .text-muted {
  color: var(--tblr-muted) !important;
}

html[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: var(--tblr-border-color);
}

html[data-bs-theme="dark"] .nav-link,
html[data-bs-theme="dark"] .dropdown-item,
html[data-bs-theme="dark"] .navbar-brand,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .page-title,
html[data-bs-theme="dark"] .breadcrumb,
html[data-bs-theme="dark"] .badge.bg-secondary,
html[data-bs-theme="dark"] .badge.bg-secondary-lt,
html[data-bs-theme="dark"] .badge.bg-primary-lt {
  color: var(--tblr-body-color) !important;
}

html[data-bs-theme="dark"] a {
  color: var(--tblr-link-color);
}