:root {
  /* Lets light-dark() resolve on its own when the server could not decide the scheme
     (preference "system"). Overridden below once the scheme is known. */
  color-scheme: light dark;

  /* Brand pair of the InterOG Logistics Center wordmark, shared with InterOG.Logistics.UI. */
  --app-brand-primary: light-dark(#15803d, #66bb6a);
  --app-brand-secondary: light-dark(#422006, #d7ccc8);
}

html[data-color-scheme='light'] {
  color-scheme: light;
}

html[data-color-scheme='dark'] {
  color-scheme: dark;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Brand lockup */

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.app-brand__mark {
  flex: 0 0 auto;
  width: 36px;
  height: 41px;
}

.app-brand__name {
  display: flex;
  flex-direction: column;
  /* Owns the lockup's scale so the two lines keep their ratio wherever it is rendered,
     including inside an <h1>. */
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}

.app-brand__name-primary {
  color: var(--app-brand-primary);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.app-brand__name-secondary {
  color: var(--app-brand-secondary);
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Large variant for the auth screens; the modifier sits on the wrapper element. */

.app-brand-lg .app-brand {
  gap: 0.75rem;
}

.app-brand-lg .app-brand__mark {
  width: 56px;
  height: 64px;
}

.app-brand-lg .app-brand__name {
  font-size: 1.5rem;
}

/* Appearance selector */

.appearance-selector__icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.appearance-selector--floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1030;
}