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 white, 0 0 0 0.25rem rgba(29, 127, 71, 0.5);
}

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;
}
/* ---- KorffSpend brand theme (2026-08-05) --------------------------------
   Green = the logo wordmark's action color (dark enough for white text);
   navy = the wordmark's dark ink, used for headings. Chart colors live in
   the Reports panel CSS (validated 7-slot categorical palette). */
:root {
  --ks-green: #1d7f47;
  --ks-green-hover: #176a3b;
  --ks-green-active: #135c33;
  --ks-green-soft: #e6f4ea;
  --ks-navy: #2f3d57;
  /* Validated 7-slot categorical palette (2026-08-05) — shared by the
     Reports panel and the Dashboard. Re-validate before changing. */
  --ks-cat-1: #22a05c; --ks-cat-2: #2f6fe0; --ks-cat-3: #f05a28;
  --ks-cat-4: #8a4fd8; --ks-cat-5: #0f9fb3; --ks-cat-6: #de8f00;
  --ks-cat-7: #d63a8e; --ks-cat-muted: #898781;
  --bs-primary: var(--ks-green);
  --bs-primary-rgb: 29, 127, 71;
  --bs-link-color: var(--ks-green);
  --bs-link-color-rgb: 29, 127, 71;
  --bs-link-hover-color: var(--ks-green-hover);
  --bs-link-hover-color-rgb: 23, 106, 59;
}

.btn-primary {
  --bs-btn-bg: var(--ks-green);
  --bs-btn-border-color: var(--ks-green);
  --bs-btn-hover-bg: var(--ks-green-hover);
  --bs-btn-hover-border-color: var(--ks-green-hover);
  --bs-btn-active-bg: var(--ks-green-active);
  --bs-btn-active-border-color: var(--ks-green-active);
  --bs-btn-disabled-bg: var(--ks-green);
  --bs-btn-disabled-border-color: var(--ks-green);
}

.btn-outline-primary {
  --bs-btn-color: var(--ks-green);
  --bs-btn-border-color: var(--ks-green);
  --bs-btn-hover-bg: var(--ks-green);
  --bs-btn-hover-border-color: var(--ks-green);
  --bs-btn-active-bg: var(--ks-green-active);
  --bs-btn-active-border-color: var(--ks-green-active);
}

h1, h2, h3, h4, h5, h6 { color: var(--ks-navy); }

header .navbar { border-bottom: 3px solid var(--ks-green) !important; }

.form-check-input:checked {
  background-color: var(--ks-green);
  border-color: var(--ks-green);
}