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 #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;
}

/* Pin the primary-action cell of a list-table to the right edge so it
   stays visible while the rest of the row scrolls horizontally on a
   phone. No-op on desktop where the table fits without scrolling. The
   background and left shadow are what make the trick read as "this
   column is floating over the scrolled content". Apply to both the th
   (header) and td (action button) in the same column. */
.table .sticky-action {
  position: sticky;
  right: 0;
  background-color: var(--bs-body-bg, #fff);
  box-shadow: -4px 0 4px -2px rgba(0, 0, 0, 0.08);
  z-index: 1;
}
/* Tinted rows (table-light, table-info, etc. — any Bootstrap table-*
   variant) need the sticky cell to pick up the row's background or the
   action would visually "pop out" of context. The variants write their
   colour into --bs-table-bg on the row, so reading the variable here
   stays aligned regardless of which tint is applied. The selector
   matches any tr whose class begins with or contains "table-". */
.table tr[class*="table-"] .sticky-action {
  background-color: var(--bs-table-bg, var(--bs-body-bg, #fff));
}
/* Bootstrap 5 ships width utilities for the no-prefix variants only.
   This single responsive add-on lets the schedule header reflow the
   action group: full-width-stacked on phone portrait, auto-width
   inline on sm+ so it can right-align next to the title. */
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
}