body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .h4, .h5, .h6 { letter-spacing: -.01em; }

.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--mkb-olive);
  box-shadow: 0 0 0 .2rem rgba(63, 71, 39, .18);
}

.card { border-radius: .6rem; border-color: rgba(38, 50, 56, .12); }
a.card { transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(38, 50, 56, .12); }
.card-header { background: var(--mkb-tan-light); border-bottom-color: rgba(38, 50, 56, .08); }

.table thead th {
  background: var(--mkb-tan-light);
  color: var(--mkb-ink);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--mkb-tan);
  user-select: none;
}
.table-hover > tbody > tr:hover > * { background-color: rgba(204, 196, 167, .18); }
.table thead th[data-sort-dir]::after { opacity: .75; margin-left: .3rem; font-size: .7rem; }
.table thead th[data-sort-dir="asc"]::after  { content: "\25B2"; }
.table thead th[data-sort-dir="desc"]::after { content: "\25BC"; }

input[type="search"].form-control-sm { max-width: 22rem; }

.badge { border-radius: .35rem; font-weight: 600; letter-spacing: .01em; }
.btn { border-radius: .45rem; }
.btn-sm { padding: .3rem .65rem; }

.navbar-mkb .nav-link { border-bottom: 2px solid transparent; }
.navbar-mkb .nav-link:hover { border-bottom-color: rgba(63, 71, 39, .35); }
.dropdown-menu { border-radius: .5rem; box-shadow: 0 .5rem 1.25rem rgba(38, 50, 56, .18); border-color: rgba(38, 50, 56, .1); }

.alert { border-radius: .5rem; }
td.text-center.text-muted { font-style: italic; }

@media print {
  .card, a.card:hover { box-shadow: none !important; transform: none !important; }
}

.note-entry { white-space: normal; }
.note-entry > div:last-child { white-space: pre-wrap; }
.note-entry .small { line-height: 1.5; }
.note-entry .badge { vertical-align: baseline; }

input[type="checkbox"], input[type="radio"] {
  width: 1.2em;
  height: 1.2em;
  margin: 0 .45em .1em 0;
  vertical-align: middle;
  accent-color: var(--mkb-olive, #3F4727);
  cursor: pointer;
}
input[type="checkbox"] + label, input[type="radio"] + label,
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  padding: .12rem 0;
  display: inline-block;
}

input[type="checkbox"] + label + br { line-height: 2; }