/* ═══════════════════════════════════════════════════════════════════════════
   DAP ADMIN — BASE LAYER

   Element defaults, the focus model, and the handful of utilities that earn
   their keep. No component lives here.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--dap-font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--dap-text);
  background: var(--dap-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Focus ────────────────────────────────────────────────────────────────
   One visible ring for every focusable thing. Bootstrap's default ring is
   its own blue, which reads as a foreign element on a green portal; this
   replaces it with the brand ring everywhere at once.

   :focus-visible, not :focus — a mouse click on a card should not leave a
   ring behind, but a Tab onto it must. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--dap-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--shadow-focus);
}

.form-check-input:checked {
  background-color: var(--dap-primary);
  border-color: var(--dap-primary);
}

/* ── Skip link ────────────────────────────────────────────────────────────
   First thing in the tab order, invisible until focused. Without it a
   keyboard user crosses the whole sidebar on every page load. */
.dap-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-12));
  z-index: calc(var(--z-dropdown) + 1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.dap-skip-link:focus { top: 0; color: #fff; }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--dap-muted) 45%, transparent);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--dap-muted); }

/* ── Typography defaults ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dap-text);
}

a { color: var(--dap-primary-text); }
a:hover { color: var(--dap-primary); }

hr { border-color: var(--dap-border); opacity: 1; }

code, kbd, samp { font-variant-numeric: tabular-nums; }

/* ── Utilities ────────────────────────────────────────────────────────────
   Deliberately few. Every one of these replaced a `style="…"` that appeared
   in several templates with a slightly different value each time — the type
   ones stood in for nine ad-hoc sizes between 0.7rem and 0.88rem. A genuine
   one-off is still written inline; it is the repetition that earns a class. */
.dap-u-fs-xs   { font-size: var(--fs-xs); }
.dap-u-fs-sm   { font-size: var(--fs-sm); }
.dap-u-fs-base { font-size: var(--fs-base); }

.dap-u-muted    { color: var(--dap-muted); }
.dap-u-semibold { font-weight: var(--fw-semibold); }

.dap-u-min0   { min-width: 0; }   /* flex child that must be allowed to shrink */
.dap-u-fill   { flex: 1; }
.dap-u-inline { display: inline; }

/* Holds a control's slot in a row while hiding it — an indent spacer where a
   sibling row has a chevron and this one does not. Not display:none, because
   the column must keep its width. */
.dap-u-invisible { opacity: 0; pointer-events: none; }

/* Bootstrap-icon glyphs used as typographic marks rather than icons: the dot
   between two pieces of metadata, the bullet before a list row. */
.dap-dot-icon    { font-size: 0.45rem; vertical-align: middle; }
.dap-bullet-icon { font-size: 0.7rem;  vertical-align: middle; }

/* A form is easier to read at a bounded measure than stretched across a
   1920px monitor. These were five different inline max-widths. */
.dap-form-col       { max-width: 680px; }
.dap-form-col--xs   { max-width: 480px; }
.dap-form-col--sm   { max-width: 560px; }
.dap-form-col--md   { max-width: 600px; }
.dap-form-col--lg   { max-width: 640px; }

/* Visually hidden, still read aloud. */
.dap-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Motion preference ────────────────────────────────────────────────────
   SEI forensic checklist §22. One block, applied globally, so no component
   has to remember. Durations are collapsed rather than removed so that
   transitionend handlers still fire. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────
   Accreditation work gets printed. Drop the furniture, keep the content. */
@media print {
  .dap-navbar,
  .dap-sidebar,
  .dap-drawer-backdrop,
  .dap-footer,
  .dap-skip-link { display: none !important; }

  body { background: #fff; }
  .dap-content { padding: 0; }
  .dap-card, .dap-table-wrap { box-shadow: none; border-color: #999; break-inside: avoid; }
}