/*
  Bang mau dark mode cho VanBan.
  File nay duoc nap sau app.css va la nguon mau cho [data-bs-theme="dark"].
*/

[data-bs-theme="dark"] {
  /* Nen: trang / be mat / be mat phu. */
  --bs-body-bg: #10131a;
  --bs-tertiary-bg: #171b22;
  --bs-secondary-bg: #1d222b;

  --bs-body-color: #e7e9ee;
  --bs-secondary-color: #9aa1ad;
  --bs-tertiary-color: #6b7280;

  --bs-border-color: #2a2f3a;
  --bs-border-color-translucent: #2a2f3a;

  --bs-primary: #5b8def;
  --bs-primary-rgb: 91, 141, 239;
  --bs-link-color: #5b8def;
  --bs-link-hover-color: #7aa3f2;

  --bs-success: #34d399;
  --bs-success-rgb: 52, 211, 153;
  --bs-warning: #fbbf24;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: #f87171;
  --bs-danger-rgb: 248, 113, 113;

  --vb-bg: var(--bs-body-bg);
  --vb-surface: var(--bs-tertiary-bg);
  --vb-surface-muted: var(--bs-secondary-bg);
  --vb-text: var(--bs-body-color);
  --vb-text-muted: var(--bs-secondary-color);
  --vb-border: var(--bs-border-color);
  --vb-input-border: var(--bs-border-color);
  --vb-primary: var(--bs-primary);
  --vb-primary-hover: var(--bs-link-hover-color);
  --vb-on-primary: #0c1220;
  --vb-disabled-bg: #303642;
  --vb-disabled-text: #8f97a5;
  --vb-disabled-border: #454c59;
  --vb-success: var(--bs-success);
  --vb-warning: var(--bs-warning);
  --vb-error: var(--bs-danger);
  --vb-header-bg: #161d33;
  --vb-header-border: #2a3352;
  --vb-header-text: #eef1f8;
  --vb-header-muted: #9aa4c4;
  --vb-backdrop: rgba(0, 0, 0, .64);
  --vb-shadow: rgba(0, 0, 0, .48);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .site-header {
  background-color: var(--vb-header-bg) !important;
  border-bottom-color: var(--vb-header-border);
}

[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .site-header a {
  color: var(--vb-header-text) !important;
}

[data-bs-theme="dark"] .navbar .text-secondary,
[data-bs-theme="dark"] .navbar small,
[data-bs-theme="dark"] .brand-block span {
  color: var(--vb-header-muted) !important;
}

[data-bs-theme="dark"] .navbar .form-select,
[data-bs-theme="dark"] .theme-select select {
  background-color: rgba(255, 255, 255, .08);
  border-color: var(--vb-header-border);
  color: var(--vb-header-text);
}

[data-bs-theme="dark"] .navbar .btn-login {
  background-color: #6ea8fe;
  border-color: #6ea8fe;
  color: #0c1220;
  font-weight: 500;
}

[data-bs-theme="dark"] .card {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #0c1220;
}

[data-bs-theme="dark"] .btn-primary:hover {
  background-color: #7aa3f2;
  border-color: #7aa3f2;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .badge.text-bg-success-subtle,
[data-bs-theme="dark"] .status-success {
  background-color: #122a20 !important;
  color: var(--bs-success) !important;
}

[data-bs-theme="dark"] .badge.text-bg-warning-subtle,
[data-bs-theme="dark"] .status-warning {
  background-color: #332b12 !important;
  color: var(--bs-warning) !important;
}

[data-bs-theme="dark"] .badge.text-bg-danger-subtle,
[data-bs-theme="dark"] .status-danger {
  background-color: #331414 !important;
  color: var(--bs-danger) !important;
}