/* =============================================================================
   BOOTSTRAP BRIDGE
   =============================================================================
   Bootstrap 5.3.8 is loaded from a CDN before this file. This maps its runtime
   variables and the few components we do not restyle in components.css onto the
   design tokens, so Bootstrap-native markup does not fight the design system.

   Component styling lives in components.css. Keep this file thin.
   ========================================================================== */

:root {
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-md);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-subtle);
  --bs-secondary-bg: var(--surface-sunken);
  --bs-tertiary-bg: var(--surface-sunken);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--accent-text-hover);
  --bs-primary: var(--accent);
  --bs-focus-ring-color: transparent;
  --bs-focus-ring-width: 0;
}

/* Bootstrap's text utilities are used across the existing markup. */
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-muted) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-success { color: var(--success-text) !important; }

/* Bootstrap's .container is used by a few standalone pages (payment redirect,
   print). Give it sane bounds without fighting the app shell, which does not
   use it at all. */
.container { max-width: 1100px; }

/* ---------- Offcanvas (mobile nav on the standalone pages) ---------- */

.offcanvas {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.offcanvas-header { border-bottom: 1px solid var(--border); }

/* ---------- Modal geometry ----------
   Skin lives in components.css; this is only the dialog box model. */

.modal-dialog { padding: var(--space-4); }

@media (min-width: 576px) {
  .modal-dialog { max-width: 480px; }
  .modal-lg { max-width: 720px; }

  /* Bootstrap ships .modal-xl at 1140px, but this file loads after it and pins every
     .modal-dialog to 480px - so a dialog that asks for the extra room silently got the
     narrow one. The audit trail is seven columns of evidence and needs it. Tracked to the
     viewport rather than fixed, so a 1024px laptop widens as far as it can too. */
  .modal-xl { max-width: min(1140px, calc(100vw - var(--space-8))); }
}

/* ---------- Button group / btn-check (encryption mode + key method) ---------- */

.btn-group > .btn { border-radius: var(--radius-md); }

.btn-check:checked + .btn.btn-outline-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.btn-check:focus-visible + .btn {
  box-shadow: var(--focus-ring-shadow);
  border-color: var(--focus-ring);
}

/* ---------- Progress (upload) ---------- */

.progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
}

.progress-bar { background-color: var(--accent); }

/* ---------- Tables inside Bootstrap markup ---------- */

.table { color: var(--text); border-color: var(--border); }