:root {
  color-scheme: dark;
  --app-bg: #0b1120;
  --app-surface: #111827;
  --app-surface-raised: #172033;
  --app-surface-input: #0f172a;
  --app-border: #334155;
  --app-border-strong: #475569;
  --app-text: #e5e7eb;
  --app-text-strong: #f8fafc;
  --app-text-muted: #94a3b8;
  --app-link: #60a5fa;
  --app-link-hover: #93c5fd;
}

html,
body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
}

body.app-theme-dark {
  background:
    radial-gradient(circle at 15% 0%, rgb(30 64 175 / 12%), transparent 28rem),
    var(--app-bg);
}

.app-navbar {
  background: #101827;
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 20%);
}

.navbar-dark .navbar-brand {
  color: var(--app-text-strong);
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
  color: #cbd5e1;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

a {
  color: var(--app-link);
}

a:hover {
  color: var(--app-link-hover);
}

.text-muted {
  color: var(--app-text-muted) !important;
}

.text-danger {
  color: #fca5a5 !important;
}

code {
  color: #7dd3fc;
  word-break: break-word;
}

.card,
.modal-content {
  color: var(--app-text);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 16%);
}

.modal-header,
.modal-footer {
  border-color: var(--app-border);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--app-text);
  --bs-table-striped-bg: rgb(148 163 184 / 5%);
  --bs-table-hover-color: var(--app-text-strong);
  --bs-table-hover-bg: rgb(96 165 250 / 10%);
  color: var(--app-text);
  border-color: var(--app-border);
}

.table td,
.table th {
  vertical-align: middle;
  border-color: var(--app-border);
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--app-border-strong);
}

.table-hover > tbody > tr:hover > * {
  color: var(--app-text-strong);
}

.list-group-item {
  color: var(--app-text);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  color: var(--app-text-strong);
  background-color: var(--app-surface-raised);
}

.form-control,
.form-select {
  color: var(--app-text);
  background-color: var(--app-surface-input);
  border-color: var(--app-border-strong);
}

.form-control::placeholder {
  color: #7c8ba1;
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  color: var(--app-text-strong);
  background-color: #111c30;
  border-color: #60a5fa;
  box-shadow: 0 0 0 .2rem rgb(59 130 246 / 22%);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  color: #a8b4c5;
  background-color: #192235;
  border-color: var(--app-border);
  opacity: 1;
}

.form-select option {
  color: var(--app-text);
  background-color: var(--app-surface-input);
}

.form-check {
  padding-left: 2.25rem;
}

.form-check-input {
  background-color: var(--app-surface-input);
  border-color: #64748b;
}

.form-check-input:checked {
  background-color: #2563eb;
  border-color: #3b82f6;
}

.btn-primary {
  background-color: #2563eb;
  border-color: #3b82f6;
}

.btn-primary:focus,
.btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #60a5fa;
}

.btn-outline-primary {
  color: #93c5fd;
  border-color: #3b82f6;
}

.btn-outline-primary:focus,
.btn-outline-primary:hover {
  color: #fff;
  background-color: #2563eb;
  border-color: #60a5fa;
}

.btn-outline-secondary {
  color: #d1d5db;
  border-color: #64748b;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #475569;
  border-color: #94a3b8;
}

.btn-outline-success {
  color: #86efac;
  border-color: #22c55e;
}

.btn-outline-warning {
  color: #fde68a;
  border-color: #d97706;
}

.btn-outline-danger {
  color: #fca5a5;
  border-color: #ef4444;
}

.badge {
  padding: .38em .62em;
  border: 1px solid rgb(255 255 255 / 14%);
  font-weight: 600;
  letter-spacing: .01em;
}

/* Bootstrap 5.1 has no text-bg utilities; provide accessible badge colors. */
.text-bg-primary {
  color: #fff !important;
  background-color: #1d4ed8 !important;
}

.text-bg-info {
  color: #fff !important;
  background-color: #155e75 !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: #166534 !important;
}

.text-bg-warning {
  color: #fff7d6 !important;
  background-color: #854d0e !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: #991b1b !important;
}

.text-bg-secondary,
.text-bg-light {
  color: #fff !important;
  background-color: #475569 !important;
}

.alert {
  border-color: transparent;
}

.alert-info {
  color: #bae6fd;
  background-color: #0c4a6e;
  border-color: #0369a1;
}

.alert-success {
  color: #bbf7d0;
  background-color: #14532d;
  border-color: #15803d;
}

.alert-warning {
  color: #fef3c7;
  background-color: #78350f;
  border-color: #b45309;
}

.alert-danger {
  color: #fecaca;
  background-color: #7f1d1d;
  border-color: #b91c1c;
}

.dropdown-menu {
  color: var(--app-text);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

.dropdown-item {
  color: var(--app-text);
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--app-text-strong);
  background-color: var(--app-surface-raised);
}

.border {
  border-color: var(--app-border-strong) !important;
}

.grouped-code-parts { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.grouped-code-part {
  flex: 0 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--bs-font-monospace);
}
.group-length-2 { width: 3.65rem; }
.group-length-4 { width: 5.65rem; }
.group-separator { color: var(--app-text-muted); font-weight: 600; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--app-link-hover); text-decoration: underline; }
.customer-group + .customer-group { margin-top: 2rem; }