html {
  font-size: 14px;
}

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

/* App shell: fixed header + fixed footer, with only the body scrolling. Suits a management
   app (not a one-page scrolling promo site) and keeps the footer pinned to the bottom. */
html, body {
  height: 100%;
}

body.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-shell > header {
  flex: 0 0 auto;
}

.app-shell > .app-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.app-shell > .footer {
  flex: 0 0 auto;
}

/* Focus ring — keyboard focus only (:focus-visible), brand-coloured and theme-aware
   (tracks --bs-primary: navy in light mode, sea in dark / on the navbar). Inputs keep
   :focus so the ring shows whenever a field is active. */
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible,
a:focus-visible, .navbar-toggler:focus-visible, .btn-close:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5);
}

/* Skip-to-content link: off-screen until focused, then pinned top-left over the navbar. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
}

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

/* Reusable grid (_Grid): sortable column headers read as interactive (hover underline + the
   sort glyph), and the filter row sits tight under the header. */
.grid-sort {
  cursor: pointer;
  white-space: nowrap;
}
.grid-sort:hover {
  text-decoration: underline !important;
}
.grid-filter-row th {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
/* A per-row actions dropdown lives inside .table-responsive (overflow-x:auto, which also clips
   vertically); let the menu escape the clip while it's open so bottom-row menus aren't cut off. */
.table-responsive:has(.dropdown-menu.show) {
  overflow: visible;
}

/* Dashboard recap tiles (_StatCard) — clickable accent cards with a subtle hover lift. */
.dashboard-stat {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dashboard-stat:hover,
.dashboard-stat:focus-visible {
  box-shadow: var(--kaims-shadow-md);
  transform: translateY(-2px);
}

/* Action-feedback toasts (toasts.js) — bottom-right, offset clear of the fixed footer. A light
   surface card with a coloured left accent + status glyph (success / error / info); success
   auto-dismisses, errors persist until closed. Accent colours track Bootstrap's theme-aware
   --bs-success / --bs-danger / --bs-primary, so they read correctly in light and dark. */
.app-toast-container {
  position: fixed;
  right: 0;
  bottom: 4.5rem; /* sit above the fixed footer (tune if the footer wraps) */
  z-index: 1090;
}
.app-toast {
  border-left: 4px solid var(--bs-border-color);
  box-shadow: var(--kaims-shadow-md);
}
.app-toast .toast-body {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.app-toast-glyph {
  font-weight: 700;
  line-height: 1.4;
  padding: 0.6rem 0.25rem 0.6rem 0.75rem;
}
.app-toast-success { border-left-color: var(--bs-success); }
.app-toast-success .app-toast-glyph { color: var(--bs-success); }
.app-toast-error { border-left-color: var(--bs-danger); }
.app-toast-error .app-toast-glyph { color: var(--bs-danger); }
.app-toast-info { border-left-color: var(--bs-primary); }
.app-toast-info .app-toast-glyph { color: var(--bs-primary); }

/* Honour the user's reduced-motion preference — neutralize transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dashboard "upcoming work" calendar (server-rendered month grid; see _CalendarPanel.cshtml). */
.cal-table { table-layout: fixed; }
.cal-cell { height: 6.5rem; width: 14.28%; vertical-align: top; overflow: hidden; padding: 0.25rem; }
.cal-cell.cal-out { background: var(--bs-tertiary-bg); }
.cal-day { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.15rem; }
.cal-day.cal-today {
  display: inline-block; min-width: 1.4rem; text-align: center;
  background: var(--bs-primary); color: #fff; border-radius: 999px; padding: 0 0.35rem;
}
.cal-event {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-size: 0.72rem; line-height: 1.25; border-radius: 0.25rem;
  padding: 0.05rem 0.3rem; margin-bottom: 0.12rem; text-decoration: none;
}
.cal-event:hover { filter: brightness(1.12); color: #fff; }
@media (max-width: 575.98px) { .cal-cell { height: 4.5rem; } .cal-event { font-size: 0.65rem; } }