[data-bs-theme="dark"]:root select option {
  /* background-color: #041324; */
  background-color: var(--vz-body-bg);
  color: white;
  font-size: calc(1.15rem * var(--content-font-scale, 1));
}

:root {
  --sidebar-font-scale: 1;
  --content-font-scale: 1;
}

/* Sidebar typography scales independently; icon size and menu geometry stay intact. */
.navbar-menu .menu-title {
  font-size: calc(11px * var(--sidebar-font-scale)) !important;
}

.font-size-preview {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px dashed var(--vz-border-color);
  border-radius: 0.5rem;
  background: var(--vz-light);
}

.font-size-preview .preview-title {
  font-size: calc(1rem * var(--content-font-scale));
  font-weight: var(--vz-font-weight-semibold);
}

.font-size-preview .preview-body {
  font-size: calc(0.875rem * var(--content-font-scale));
}

.font-size-preview .preview-secondary {
  color: var(--vz-secondary-color);
  font-size: calc(0.75rem * var(--content-font-scale));
}

[data-font-preview="sidebar"] .preview-title {
  font-size: calc(0.9375rem * var(--sidebar-font-scale));
}

[data-font-preview="sidebar"] .preview-body {
  font-size: calc(0.875rem * var(--sidebar-font-scale));
}

[data-font-preview="sidebar"] .preview-secondary {
  font-size: calc(0.75rem * var(--sidebar-font-scale));
}

.font-size-range-wrap .form-range {
  cursor: pointer;
}

.font-size-range-limits {
  font-size: calc(0.6875rem * var(--content-font-scale));
}

/* apexchart menu */
[data-bs-theme="dark"]:root .apexcharts-menu {
  background-color: #041324;
  color: white;
}

[data-bs-theme="dark"]:root .apexcharts-menu-item:hover {
  background: lightslategray;
}

[data-bs-theme="light"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-select,
[data-bs-theme="light"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-control,
[data-bs-theme="light"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-check-input {
  border-color: gray;
}

[data-bs-theme="dark"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-select,
[data-bs-theme="dark"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-control,
[data-bs-theme="dark"]:not([data-theme="galaxy"][data-bs-theme="dark"]):root
  .form-check-input {
  border-color: rgb(86, 84, 84);
}

[data-theme="default"][data-bs-theme="light"]:root .form-select,
[data-theme="default"][data-bs-theme="light"]:root .form-control,
[data-theme="default"][data-bs-theme="light"]:root .form-check-input {
  border-color: gray;
}

[data-theme="default"][data-bs-theme="dark"]:root .form-select,
[data-theme="default"][data-bs-theme="dark"]:root .form-control,
[data-theme="default"][data-bs-theme="dark"]:root .form-check-input {
  border-color: rgb(86, 84, 84);
}

.spinner-grow-xs {
  --vz-spinner-width: 0.3rem;
  --vz-spinner-height: 0.3rem;
}

.table-loader {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100%; */
  height: 100%;
  user-select: none;
  pointer-events: none;
  opacity: 0.5;
}

@media only screen and (max-width: 767px) {
  .app-menu {
    transition: all 0.5s ease;
  }
}

/* Page content fade-in on every navigation */
@keyframes pageContentFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-content {
  animation: pageContentFadeIn 0.18s ease-out;
}

/* Fade-out class applied by JS before navigation */
.page-leaving .main-content {
  transition: opacity 0.12s ease-out, transform 0.12s ease-out !important;
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}