/* ═══════════════════════════════════════════════════════════════════════════
   DAP ADMIN — COMPONENT LAYER

   The shared vocabulary: anything that appears on more than one screen.
   A rule belongs here if two templates would otherwise both declare it.

   Several components below previously existed in four to seven copies, one
   per template, and had drifted apart. Where copies disagreed, the
   reconciliation is noted on the component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   SURFACES
   ══════════════════════════════════════════ */
.dap-card {
  background: var(--dap-white);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.dap-card .card-body { padding: var(--sp-6); }

/* Header strip inside a card.
   Was declared in 7 templates at 0.82rem/10px 18px, except area_detail.html
   at 0.85rem/10px 16px and accreditation_form.html under a second name,
   .dap-form-section-header. Reconciled to the majority value, and the
   second name retired from the one template that used it. */
.dap-card-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--dap-border);
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Standalone heading with a rule running to the right edge.
   Merged from .dap-section-heading (base) and .pr-section-head (programs),
   which were the same component under two names. */
.dap-section-heading,
.pr-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--dap-muted);
}
.dap-section-heading::after,
.pr-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dap-border);
}

/* ══════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════ */
.dap-page-title {
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 4px solid var(--dap-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dap-text);
}
.dap-page-sub,
.pr-page-sub {
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--dap-muted);
}

/* Header row: title on the left, actions on the right, stacking on narrow.
   The title block takes the free width, so a long subtitle wraps under the
   title instead of pushing the actions onto a line of their own. */
.dap-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.dap-page-head > :first-child { flex: 1 1 320px; min-width: 0; }
.dap-page-head .dap-page-title { margin-bottom: 0; }

/* Round tinted glyph beside a page title.
   Merged from .cert-page-icon and .lp-page-icon, which were identical. */
.dap-page-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--dap-primary-bg);
  color: var(--dap-primary);
  font-size: var(--fs-2xl);
}

/* ══════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════
   Was declared seven times — in base.html and in six templates — with
   identical bodies. One copy now. */
.dap-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--dap-muted);
}
.dap-breadcrumb li + li::before { content: '/'; opacity: 0.4; }
.dap-breadcrumb a {
  color: var(--dap-primary-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.dap-breadcrumb a:hover { text-decoration: underline; }
.dap-breadcrumb .active { color: var(--dap-muted); }

/* ══════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════ */
.dap-table-wrap {
  background: var(--dap-white);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* A scroll wrapper must also be the containing block for anything absolutely
   positioned inside it — a .visually-hidden header label, say — or that
   element escapes the clip and widens the whole page on a phone. */
.table-responsive { position: relative; }

.dap-table { width: 100%; border-collapse: collapse; }
.dap-table thead th {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 2px solid var(--dap-primary-light);
  background: var(--dap-surface-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
  text-align: left;
  white-space: nowrap;
}
.dap-table tbody td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--dap-border-soft);
  font-size: var(--fs-base);
  color: var(--dap-text-secondary);
  vertical-align: middle;
}
.dap-table tbody tr:last-child td { border-bottom: none; }
.dap-table tbody tr:hover td { background: var(--dap-primary-bg); }

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn-dap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-dap:hover  { background: var(--dap-primary-hover); color: #fff; box-shadow: var(--shadow-sm); }
.btn-dap:active { background: var(--dap-primary-text); }
.btn-dap:disabled, .btn-dap.disabled {
  background: var(--dap-disabled);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Full-width card action. */
.btn-dap-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.btn-dap-open:hover { background: var(--dap-primary-hover); color: #fff; }

/* Bootstrap buttons, brought onto the shared radius and type scale. */
.btn { border-radius: var(--radius-lg); font-size: var(--fs-base); }
.btn-sm { font-size: var(--fs-xs); border-radius: var(--radius-md); }

/* ══════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════
   .form-field-label was declared in 7 templates at 0.78 / 0.81 / 0.82rem
   with 4px or 5px of margin; .field-error in 6; .field-help in 2. One copy
   each now, on the type scale. */
.form-field-label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dap-text-secondary);
}
.field-error { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--dap-danger); }
.field-help  { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--dap-muted); }

.form-control, .form-select {
  border-radius: var(--radius-lg);
  border-color: var(--dap-border);
  font-size: var(--fs-base);
  color: var(--dap-text);
}
.form-control:focus, .form-select:focus { border-color: var(--dap-primary); }
.form-control::placeholder { color: var(--dap-muted); opacity: 0.75; }
.form-control:disabled, .form-select:disabled { background: var(--dap-bg); color: var(--dap-muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--dap-danger); }

/* Dashed drop zone for a file field.
   Merged from .lp-upload-area; the certificates page now uses it too. */
.dap-upload-area {
  border: 2px dashed var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-bg);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.dap-upload-area:hover { border-color: var(--dap-primary); background: var(--dap-primary-bg); }
.dap-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-6);
  cursor: pointer;
}
.dap-upload-icon  { font-size: var(--fs-4xl); color: var(--dap-muted); }
.dap-upload-text  { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--dap-text); }
.dap-upload-hint  { font-size: var(--fs-xs); color: var(--dap-muted); text-align: center; }
.dap-upload-input { display: none; }

/* ══════════════════════════════════════════
   DEFINITION LISTS
   ══════════════════════════════════════════ */
.dap-dl dt {
  padding-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.dap-dl dd { margin-bottom: var(--sp-3); font-size: var(--fs-base); color: var(--dap-text); }

/* Two-column detail rows.
   profile.html set dt to 140px and user_detail.html to 130px for the same
   component. Reconciled to 140px. */
.profile-dl { margin: 0; }
.profile-dl-row {
  display: flex;
  align-items: flex-start;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--dap-border-soft);
}
.profile-dl-row:last-child { border-bottom: none; }
.profile-dl-row dt {
  flex-shrink: 0;
  width: 140px;
  padding-top: 1px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.profile-dl-row dd { flex: 1; margin: 0; font-size: var(--fs-base); color: var(--dap-text); }

@media (max-width: 575.98px) {
  .profile-dl-row { flex-direction: column; gap: 2px; }
  .profile-dl-row dt { width: auto; }
}

/* ══════════════════════════════════════════
   BADGES & PILLS
   ══════════════════════════════════════════ */
.badge { padding: 3px var(--sp-2); border-radius: var(--radius-md); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.badge-level { background: var(--dap-info-bg); color: var(--dap-info-fg); }

/* Accreditation lifecycle. */
.dap-status-preparation { background: var(--dap-warning-bg); color: var(--dap-warning-fg); }
.dap-status-ongoing     { background: var(--dap-info-bg);    color: var(--dap-info-fg); }
.dap-status-submitted   { background: #d1ecf1;               color: #055160; }
.dap-status-completed   { background: var(--dap-success-bg); color: var(--dap-success-fg); }
.dap-status-scheduled,
.dap-status-surveyed,
.dap-status-awaiting_decision { background: var(--dap-primary-bg); color: var(--dap-primary-text); }
.dap-status-compliance  { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }
.dap-status-withdrawn   { background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); }

/* Record states on the QA screens — compliance actions, program authorities —
   and the expiry buckets derived from an outcome. Every one carries its text
   (and the expiry pills an icon), so none relies on colour alone. */
.qa-state,
.qa-expiry,
.qa-priority {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.qa-state--planned, .qa-state--pending            { background: var(--dap-warning-bg); color: var(--dap-warning-fg); }
.qa-state--in_progress                            { background: var(--dap-info-bg);    color: var(--dap-info-fg); }
.qa-state--completed, .qa-state--valid            { background: var(--dap-success-bg); color: var(--dap-success-fg); }
.qa-state--validated                              { background: var(--dap-primary-bg); color: var(--dap-primary-text); }
.qa-state--deficient                              { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }
.qa-state--dropped, .qa-state--superseded         { background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); }
.qa-state--expired, .qa-state--revoked            { background: var(--dap-danger-bg);  color: var(--dap-danger-fg); }

.qa-expiry--expired, .qa-expiry--critical         { background: var(--dap-danger-bg);  color: var(--dap-danger-fg); }
.qa-expiry--high                                  { background: var(--dap-warning-bg); color: var(--dap-warning-fg); }
.qa-expiry--upcoming                              { background: var(--dap-info-bg);    color: var(--dap-info-fg); }
.qa-expiry--future, .qa-expiry--long_term         { background: var(--dap-success-bg); color: var(--dap-success-fg); }

.qa-priority--high   { background: var(--dap-danger-bg);  color: var(--dap-danger-fg); }
.qa-priority--medium { background: var(--dap-warning-bg); color: var(--dap-warning-fg); }
.qa-priority--low    { background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); }

/* The one pill shape. .user-status-badge, .pr-pill (at two different sizes),
   .tf-badge and .acc-type-badge were four names for it, each with its own
   copy of the padding, radius and type. The names are kept — they say what
   is being labelled, which is real information — but the shape is declared
   once. */
.user-status-badge,
.pr-pill,
.tf-badge,
.acc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.user-status-badge.active, .pr-pill.active, .tf-badge.complete {
  background: var(--dap-success-bg); color: var(--dap-success-fg);
}
.tf-badge.incomplete {
  background: var(--dap-warning-bg); color: var(--dap-warning-fg);
}
.user-status-badge.inactive, .pr-pill.retired {
  background: var(--dap-neutral-bg); color: var(--dap-neutral-fg); border: 1px solid var(--dap-border);
}
.acc-type-badge.institutional { background: var(--dap-primary-bg); color: var(--dap-primary-text); }
.acc-type-badge.program       { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }

.dap-role-badge {
  display: inline-block;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--dap-primary-light);
  color: var(--dap-primary-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════
   .profile-avatar-* (2 templates), .avatar-preview (1) and .tf-avatar-* (1)
   were the same circle at three declarations. One rule, two sizes. */
.profile-avatar-img,
.profile-avatar-placeholder,
.avatar-preview {
  flex-shrink: 0;
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--dap-primary-light);
  border-radius: 50%;
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  object-fit: cover;
}
.tf-avatar-img, .tf-avatar-ph {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--dap-primary-light);
  border-radius: 50%;
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  object-fit: cover;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-wrap { display: flex; align-items: center; gap: var(--sp-4); }
.profile-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--dap-text); }

/* ══════════════════════════════════════════
   NOTICES
   ══════════════════════════════════════════ */
.pwd-logout-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--dap-warning-bg);
  border-left: 4px solid var(--dap-accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--dap-accent) 10%, #ffffff);
  color: var(--dap-warning-fg);
  font-size: var(--fs-sm);
}
.pwd-logout-notice > i { flex-shrink: 0; margin-top: 2px; color: var(--dap-accent-dark); }

.alert { border-radius: var(--radius-lg); font-size: var(--fs-base); }

/* ══════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════
   .dap-empty-state, .db-empty-state and .ig-empty were three copies. */
.dap-empty-state,
.db-empty-state {
  padding: var(--sp-16) var(--sp-5);
  color: var(--dap-muted);
  font-size: var(--fs-base);
  text-align: center;
}
.dap-empty-state i,
.db-empty-state i {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-4xl);
  opacity: 0.4;
}
.dap-empty-state--compact { padding: var(--sp-8) var(--sp-5); }

/* ══════════════════════════════════════════
   DROPDOWNS
   ══════════════════════════════════════════ */
.dropdown-menu {
  min-width: 200px;
  padding: var(--sp-1);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}
.dropdown-item { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); font-size: var(--fs-base); }
.dropdown-item:hover  { background: var(--dap-bg); }
.dropdown-item:active { background: var(--dap-primary-bg); color: var(--dap-primary-text); }
.dropdown-divider { margin: var(--sp-1) 0; }

/* ══════════════════════════════════════════
   PROGRESS
   ══════════════════════════════════════════ */
.progress { border-radius: var(--radius-lg); background: var(--dap-border); }
.progress-bar { background: var(--dap-primary); }

/* ══════════════════════════════════════════
   ACCREDITATION CARDS  (picker + summary)
   ══════════════════════════════════════════ */
.dap-welcome-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
  box-shadow: var(--shadow-xs);
}
.dap-welcome-logo  { height: 52px; object-fit: contain; }
.dap-welcome-title { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--dap-text); }
.dap-welcome-sub   { margin: 0; font-size: var(--fs-base); color: var(--dap-muted); }

@media (max-width: 575.98px) {
  .dap-welcome-banner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); }
}

.dap-acc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.dap-acc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dap-acc-card.is-active { box-shadow: 0 4px 18px color-mix(in srgb, var(--dap-primary) 25%, transparent); }

.dap-acc-card.institutional { border-left: 4px solid var(--dap-primary); }
.dap-acc-card.institutional .dap-acc-card-head { background: var(--dap-primary-bg); }
.dap-acc-card.institutional .dap-acc-type-icon { background: var(--dap-primary-bg); color: var(--dap-primary); }
.dap-acc-card.program { border-left: 4px solid var(--dap-accent-dark); }
.dap-acc-card.program .dap-acc-card-head { background: var(--dap-accent-bg); }
.dap-acc-card.program .dap-acc-type-icon { background: var(--dap-accent-bg); color: var(--dap-accent-dark); }

.dap-acc-active-badge {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--dap-primary);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.dap-acc-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.dap-acc-type-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--fs-2xl);
}
.dap-acc-card-title { margin-top: 2px; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--dap-text); }
.dap-acc-card-type-label {
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.dap-acc-card-body   { flex: 1; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--dap-border); }
.dap-acc-card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--dap-border-soft); }

.dap-acc-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.dap-acc-meta-row:last-child { margin-bottom: 0; }
.dap-meta-label { font-size: var(--fs-sm); color: var(--dap-muted); }
.dap-meta-value { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--dap-text-secondary); }

/* Summary strip at the top of a workspace page. */
.dap-acc-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
  box-shadow: var(--shadow-xs);
}
.dap-acc-summary.institutional { border-left: 4px solid var(--dap-primary); }
.dap-acc-summary.program       { border-left: 4px solid var(--dap-accent-dark); }
.dap-acc-summary-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--fs-2xl);
}
.dap-acc-summary-icon.institutional { background: var(--dap-primary-bg); color: var(--dap-primary); }
.dap-acc-summary-icon.program       { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }
.dap-acc-summary-name   { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--dap-text); }
.dap-acc-summary-badges { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.dap-acc-summary-meta   { text-align: right; font-size: var(--fs-sm); }
.dap-acc-summary-meta-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.dap-acc-summary-meta-value { font-weight: var(--fw-semibold); color: var(--dap-text-secondary); }

@media (max-width: 575.98px) {
  .dap-acc-summary { padding: var(--sp-4); }
  .dap-acc-summary-meta { text-align: left; }
}

/* ══════════════════════════════════════════
   SECTIONED FORM
   ══════════════════════════════════════════
   Every add/edit screen. A section is a row: what it is and why on the left,
   its fields on the right in a two- or three-column grid. It replaced a
   single 640px column that left half of a desktop screen empty, and it keeps
   related fields together instead of in one long stack. Below 992px the
   explanation sits above the fields. */
.dap-form { max-width: 1180px; }
.dap-form-card {
  background: var(--dap-white);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.dap-form-section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-6);
}
.dap-form-section + .dap-form-section { border-top: 1px solid var(--dap-border-soft); }
.dap-form-section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--dap-text);
}
.dap-form-section-title i { color: var(--dap-primary); }
.dap-form-section-desc {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--dap-muted);
}
.dap-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--dap-border);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--dap-surface-2);
}
.dap-form-actions-end { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
@media (max-width: 991.98px) {
  .dap-form-section { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
  .dap-form-actions { padding: var(--sp-4) var(--sp-5); }
}

/* ══════════════════════════════════════════
   ICON BUTTONS
   ══════════════════════════════════════════
   Quiet row actions. A table with an outlined pencil and an outlined red bin
   on every row reads as a wall of buttons; these stay grey until pointed at,
   and the destructive one only turns red on hover. */
.dap-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--dap-muted);
  font-size: var(--fs-base);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dap-icon-btn:hover { background: var(--dap-bg); color: var(--dap-primary-text); }
.dap-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dap-icon-btn--danger:hover { background: var(--dap-danger-bg); color: var(--dap-danger-fg); }
.dap-row-actions { display: inline-flex; gap: 2px; white-space: nowrap; }

/* ══════════════════════════════════════════
   TABS
   ══════════════════════════════════════════
   Bootstrap's tab behaviour with the portal's look: an underline in brand
   green, and a count beside each label. */
.dap-tabs {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0 var(--sp-4);
  list-style: none;
  border-bottom: 1px solid var(--dap-border);
  overflow-x: auto;
}
.dap-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--dap-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.dap-tab:hover { color: var(--dap-text); }
.dap-tab.active { border-bottom-color: var(--dap-primary); color: var(--dap-primary-text); }
.dap-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dap-tab-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--dap-neutral-bg);
  color: var(--dap-neutral-fg);
  font-size: var(--fs-2xs);
  line-height: 18px;
  text-align: center;
}
.dap-tab.active .dap-tab-count { background: var(--dap-primary-bg); color: var(--dap-primary-text); }

/* The bar at the top of a tab pane: what this list is, and its Add button. */
.dap-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--dap-border-soft);
  font-size: var(--fs-xs);
  color: var(--dap-muted);
}

/* ══════════════════════════════════════════
   FACT STRIP
   ══════════════════════════════════════════
   A record's key properties as a row of labelled values, under its title. */
.dap-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-xl);
  background: var(--dap-white);
  overflow: hidden;
}
.dap-fact { padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--dap-border-soft); }
.dap-fact:last-child { border-right: none; }
.dap-fact dt {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--dap-muted);
}
.dap-fact dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--dap-text); }
@media (max-width: 575.98px) {
  .dap-facts { grid-template-columns: 1fr 1fr; }
  .dap-fact { border-bottom: 1px solid var(--dap-border-soft); }
}