:root {
  /* Core background/surface */
  --app-bg: #f6f8fb;
  --app-text: #212529;
  --app-surface-bg: #ffffff;
  --app-surface-border: #d9dee6;
  --app-card-header-bg: #eef2f7;

  /* Navigation */
  --app-nav-bg: #212529;
  --app-nav-text: #f8f9fa;
  --app-nav-brand: #ffffff;
  --app-nav-btn-border: #f8f9fa;
  --app-nav-btn-text: #f8f9fa;
  --app-nav-btn-hover-bg: #f8f9fa;
  --app-nav-btn-hover-text: #212529;

  /* Branding / logo */
  --app-logo-size: 22px;
  --app-logo-radius: 6px;
  --app-logo-bg: linear-gradient(135deg, #52b788, #2d6a4f);
  --app-logo-border: 1px solid rgba(255, 255, 255, 0.35);
  --app-logo-url: none;
  --app-release-color: #c8d2dc;
  --app-release-size: 0.7rem;

  /* Tables */
  --app-table-head-bg: #e9edf3;
  --app-table-head-text: #1f2937;
  --app-table-border: #d7dde6;
  --app-table-row-bg: #ffffff;
  --app-table-row-alt-bg: #f9fbfe;
}

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

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

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--app-nav-brand);
}

.app-brand-text {
  color: var(--app-nav-brand);
}

.app-logo {
  width: var(--app-logo-size);
  height: var(--app-logo-size);
  min-width: var(--app-logo-size);
  min-height: var(--app-logo-size);
  border-radius: var(--app-logo-radius);
  border: var(--app-logo-border);
  background: var(--app-logo-bg);
  background-image: var(--app-logo-url), var(--app-logo-bg);
  background-size: cover, cover;
  background-position: center, center;
  display: inline-block;
}

.app-release-version {
  color: var(--app-release-color);
  font-size: var(--app-release-size);
}

.app-navbar .btn.btn-outline-light {
  color: var(--app-nav-btn-text);
  border-color: var(--app-nav-btn-border);
}

.app-navbar .btn.btn-outline-light:hover,
.app-navbar .btn.btn-outline-light:focus {
  color: var(--app-nav-btn-hover-text);
  background-color: var(--app-nav-btn-hover-bg);
  border-color: var(--app-nav-btn-hover-bg);
}

.card,
.dropdown-menu,
.modal-content {
  background-color: var(--app-surface-bg);
  border-color: var(--app-surface-border);
}

.card-header {
  background-color: var(--app-card-header-bg);
  border-bottom-color: var(--app-surface-border);
}

.table {
  --bs-table-bg: var(--app-table-row-bg);
  --bs-table-striped-bg: var(--app-table-row-alt-bg);
  --bs-table-border-color: var(--app-table-border);
}

.table thead th {
  background-color: var(--app-table-head-bg);
  color: var(--app-table-head-text);
  border-bottom-color: var(--app-table-border);
}

/* Keep label colors fixed and not theme-driven. */
.form-label,
.form-check-label {
  color: #212529 !important;
}

textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92rem;
}