/* Theme switcher (light / gray / dark) for Backpack CoreUI v2 */

body.ui-theme-light {
  --ui-bg: #ffffff;
  --ui-bg-soft: #f6f7fb;
  --ui-card: #ffffff;
  --ui-border: #e6e9ef;
  --ui-text: #212529;
  --ui-text-muted: #6b778c;
}

body.ui-theme-gray {
  --ui-bg: #f1f3f6;
  --ui-bg-soft: #e9edf2;
  --ui-card: #f7f8fa;
  --ui-border: #d7dde6;
  --ui-text: #1f2a37;
  --ui-text-muted: #5b677a;
}

body.ui-theme-dark {
  --ui-bg: #0f172a;
  --ui-bg-soft: #111c33;
  --ui-card: #111827;
  --ui-border: #24324a;
  --ui-text: #e5e7eb;
  --ui-text-muted: #9aa6b2;
}

body.ui-theme-light,
body.ui-theme-gray,
body.ui-theme-dark {
  background-color: var(--ui-bg);
  color: var(--ui-text);
}

body.ui-theme-gray .app-body,
body.ui-theme-dark .app-body {
  background-color: var(--ui-bg);
}

body.ui-theme-gray .card,
body.ui-theme-dark .card,
body.ui-theme-gray .box,
body.ui-theme-dark .box,
body.ui-theme-gray .container-fluid .card,
body.ui-theme-dark .container-fluid .card {
  background-color: var(--ui-card);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

body.ui-theme-dark .table,
body.ui-theme-dark .table td,
body.ui-theme-dark .table th {
  color: var(--ui-text);
}

body.ui-theme-dark .table thead th {
  border-bottom-color: var(--ui-border);
}

body.ui-theme-dark .table td,
body.ui-theme-dark .table th,
body.ui-theme-dark .table thead th,
body.ui-theme-dark .table tbody + tbody {
  border-color: var(--ui-border);
}

body.ui-theme-dark .dropdown-menu,
body.ui-theme-gray .dropdown-menu {
  background-color: var(--ui-card);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

body.ui-theme-dark .dropdown-item,
body.ui-theme-gray .dropdown-item {
  color: var(--ui-text);
}

body.ui-theme-dark .dropdown-item:hover,
body.ui-theme-gray .dropdown-item:hover {
  background-color: var(--ui-bg-soft);
}

body.ui-theme-dark .form-control,
body.ui-theme-gray .form-control,
body.ui-theme-dark .custom-select,
body.ui-theme-gray .custom-select {
  background-color: var(--ui-bg-soft);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

body.ui-theme-dark .form-control::placeholder,
body.ui-theme-gray .form-control::placeholder {
  color: var(--ui-text-muted);
}

body.ui-theme-dark .breadcrumb,
body.ui-theme-gray .breadcrumb {
  background-color: transparent;
}

body.ui-theme-dark .breadcrumb-item,
body.ui-theme-gray .breadcrumb-item {
  color: var(--ui-text-muted);
}

body.ui-theme-dark .breadcrumb-item.active,
body.ui-theme-gray .breadcrumb-item.active {
  color: var(--ui-text);
}