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

/* Full-width results: scrollable table with sticky header, theme-aware via Bootstrap vars. */
.doclink-results {
  max-height: calc(100vh - 340px);
  min-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.doclink-results thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bs-body-bg);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
  white-space: nowrap;
}
.doclink-results td {
  vertical-align: middle;
}

/* Rows with an openable document signal double-click availability. */
.doclink-results tr[data-view-url] {
  cursor: pointer;
}

/* Theme toggle: show moon in light mode, sun in dark mode (pure CSS, no JS needed). */
#theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] #theme-toggle .icon-sun { display: inline; }
[data-bs-theme="dark"] #theme-toggle .icon-moon { display: none; }

/* Brand logo: swap light/dark lockups with the Bootstrap theme (pure CSS, no JS needed). */
.brand-logo { height: 32px; width: auto; }
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }

/* Footer credit: smaller logo + muted label so it doesn't compete with the navbar brand. */
.brand-logo-footer { height: 22px; }
.brand-credit-label { font-size: 0.8rem; }

/* DocLink product wordmark in the navbar: plain text so it stays crisp and
   follows the Bootstrap theme color automatically (no light/dark swap needed). */
.doclink-wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; }

/* Login stage: centers the fixed-width card; on viewports narrower than the
   card it falls back to start-aligned so the left edge stays reachable. */
.login-stage {
  display: flex;
  justify-content: center;
  justify-content: safe center;
}
/* Login card: centered brand panel, theme-aware via Bootstrap vars. */
.login-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
  padding: 2rem 1.75rem 1.5rem;
  width: 480px;
  flex: none;
}
.login-logo { height: 44px; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--bs-border-color);
}
/* Staff SSO button: solid brand-navy fill so it reads as an action, not a
   disabled outline — distinct from the blue Sign in button. */
.btn-sso {
  background-color: #0A1F44;
  border-color: #0A1F44;
  color: #fff;
}
.btn-sso:hover, .btn-sso:focus, .btn-sso:active {
  background-color: #1B3A6B;
  border-color: #1B3A6B;
  color: #fff;
}
[data-bs-theme="dark"] .btn-sso {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---- Shared professional polish ---- */

/* Page titles: tighter semibold hierarchy; subtitle tucks under. */
main h1 {
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}
main h1 + p.text-muted {
  margin-top: -0.25rem;
}

/* Tables: tabular numerals for IDs/dates/counts, semibold headers. */
.table {
  font-variant-numeric: tabular-nums;
}
.table thead th {
  font-weight: 600;
}

/* Navbar: the active page reads clearly. */
.navbar-nav .nav-link.active {
  font-weight: 600;
}
/* Main menu: dividers between items (horizontal layout only) and a red
   underline for the active page. Theme-aware via Bootstrap vars. */
@media (min-width: 576px) {
  .doclink-menu .nav-item + .nav-item {
    border-left: 1px solid var(--bs-border-color);
  }
}
.doclink-menu .nav-link {
  position: relative;
}
.doclink-menu .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.25rem;
  border-bottom: 3px solid var(--bs-danger);
}

/* Admin docs reader: comfortable wide column, readable tables and callouts. */
.docs-body {
  max-width: 1100px;
}
.docs-body h1 {
  font-size: 1.6rem;
}
.docs-body h2 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.docs-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.docs-body th,
.docs-body td {
  border: 1px solid var(--bs-border-color);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.docs-body thead th,
.docs-body th {
  background: var(--bs-tertiary-bg);
  font-weight: 600;
}
.docs-body blockquote {
  border-left: 4px solid var(--bs-primary);
  padding: 0.5rem 1rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
.docs-body blockquote p {
  margin-bottom: 0.4rem;
}
.docs-body blockquote p:last-child {
  margin-bottom: 0;
}
.docs-body pre {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

/* Stat cards (Status page): big number, small muted label. */
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.login-audit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  margin: 1.25rem 0 0;
}

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