:root {
  --sjd-brand: #0d6efd;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.app-brand {
  text-decoration: none;
}

.app-brand .brand-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .5rem;
  background: var(--sjd-brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.04em;
}

.app-sidebar .nav-link .nav-icon {
  width: 1.25rem;
  display: inline-block;
  text-align: center;
  opacity: .8;
}

.page-title {
  letter-spacing: -.02em;
}

.metric-card .metric-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
}

.metric-card .metric-label {
  color: var(--bs-secondary-color);
  font-size: .9rem;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bs-tertiary-bg);
}

.auth-card {
  width: min(100%, 430px);
}

.auth-card .brand-mark {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: .75rem;
  background: var(--sjd-brand);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.required::after {
  content: ' *';
  color: var(--bs-danger);
}


/* Select2 is loaded only on pages that need searchable master lookups. */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { height: 38px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; color: var(--bs-body-color); padding-left: .75rem; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-dropdown { border-color: var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); }
.select2-search__field { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color) !important; }
.select2-results__option--selected { background: var(--bs-secondary-bg); }
.select2-container--default.select2-container--disabled .select2-selection--single { background: var(--bs-secondary-bg); }
#orderItemsTable .select2-container, #sptbItemsTable .select2-container { min-width: 180px; }