:root {
  /* Simplified theme controls */
  --custom-bg: #252c3a;
  --custom-cards: #285c84;
  --custom-actions: #fd6100;

  /* Computed at runtime in app.js */
  --custom-text-on-bg: #ffffff;
  --custom-text-on-cards: #ffffff;
  --custom-text-on-actions: #ffffff;
  --custom-actions-hover: #e65a00;
  --custom-input-bg: #ffffff;
  --custom-input-text: #000000;
}

body {
  background-color: var(--custom-bg) !important;
  color: var(--custom-text-on-bg) !important;
}

body,
body * {
  color: var(--custom-text-on-bg) !important;
}

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

.app-brand-text,
.app-nav-user,
.app-nav-link {
  color: var(--custom-text-on-bg) !important;
}

.app-nav-link:hover,
.app-nav-link:focus {
  text-decoration: underline;
  text-decoration-color: var(--custom-actions);
  text-decoration-thickness: 3px;
}

.app-nav-link.active {
  color: var(--custom-actions) !important;
}

.card,
.dropdown-menu,
.modal-content {
  background-color: var(--custom-cards) !important;
  color: var(--custom-text-on-cards) !important;
  border-color: var(--custom-cards) !important;
}

.card-header {
  background-color: var(--custom-cards) !important;
  color: var(--custom-text-on-cards) !important;
  border-color: var(--custom-cards) !important;
}

.card,
.card *,
.dropdown-menu,
.dropdown-menu * {
  color: var(--custom-text-on-cards) !important;
}

.card .text-muted,
.card .small.text-muted,
.card .form-text {
  color: var(--custom-text-on-cards) !important;
  opacity: 0.8;
}

.table {
  --bs-table-bg: var(--custom-cards);
  --bs-table-color: var(--custom-text-on-cards);
  --bs-table-striped-bg: var(--custom-cards);
  --bs-table-striped-color: var(--custom-text-on-cards);
  --bs-table-hover-bg: var(--custom-cards);
  --bs-table-hover-color: var(--custom-text-on-cards);
  --bs-table-border-color: var(--custom-cards);
}

.table thead th,
table thead th {
  background-color: var(--custom-cards) !important;
  color: var(--custom-text-on-cards) !important;
}

.btn,
.btn-primary,
.btn-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-info {
  background-color: var(--custom-actions) !important;
  border-color: var(--custom-actions) !important;
  color: var(--custom-text-on-actions) !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.show {
  background-color: var(--custom-actions-hover) !important;
  border-color: var(--custom-actions-hover) !important;
  color: var(--custom-text-on-actions) !important;
}

.dropdown-menu {
  background-color: var(--custom-actions) !important;
  border-color: var(--custom-actions) !important;
}

.dropdown-item {
  color: var(--custom-text-on-actions) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--custom-actions-hover) !important;
  color: var(--custom-text-on-actions) !important;
}

input,
textarea,
select,
.form-control,
.form-select {
  background-color: var(--custom-input-bg) !important;
  color: var(--custom-input-text) !important;
  -webkit-text-fill-color: var(--custom-input-text) !important;
  caret-color: var(--custom-input-text) !important;
  border-color: var(--custom-input-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--custom-input-text) !important;
  opacity: 0.7;
}

select option,
.form-select option {
  background-color: var(--custom-input-bg) !important;
  color: var(--custom-input-text) !important;
}

.form-label,
.form-check-label,
.form-switch .form-check-label,
h1, h2, h3, h4, h5, h6 {
  color: var(--custom-text-on-cards) !important;
}