/* ═══════════════════════════════════════════════════════════════════════════
   DAP ADMIN — LAYOUT LAYER

   The app shell: navbar, sidebar, drawer, content column, footer. Structure
   and position only — a rule here may set size, spacing and stacking, never
   the look of a control inside it.

   Shell anatomy

       ┌──────────────────────────────────────────────┐
       │  .dap-navbar          sticky, --dap-navbar-h │
       ├───────────────┬──────────────────────────────┤
       │ .dap-sidebar  │ .dap-main                    │
       │  --dap-       │   .dap-messages              │
       │  sidebar-w    │   .dap-content    (flex:1)   │
       │  sticky       │   .dap-footer                │
       └───────────────┴──────────────────────────────┘

   Below 768px the sidebar leaves the flow and becomes an overlay drawer;
   see the DRAWER section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════ */
.dap-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  flex-shrink: 0;
  height: var(--dap-navbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--dap-gutter);
  background: var(--dap-white);
  border-bottom: 3px solid var(--dap-primary-light);
  box-shadow: var(--shadow-xs);
}

.dap-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  text-decoration: none;
}
.dap-navbar-logo  { height: 38px; object-fit: contain; }
.dap-navbar-name  { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--dap-primary-text); }
.dap-navbar-divider  { color: var(--dap-border); font-weight: var(--fw-normal); }
.dap-navbar-subtitle { font-size: var(--fs-xs); color: var(--dap-muted); }
.dap-navbar-spacer   { flex: 1; }

.dap-clock {
  font-size: var(--fs-xs);
  color: var(--dap-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hamburger. Present only while the drawer layout is active — a control
   that toggles an off-screen drawer must not be reachable by Tab when the
   sidebar is already on screen. */
.dap-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
  background: var(--dap-white);
  color: var(--dap-primary-text);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dap-nav-toggle:hover { background: var(--dap-primary-bg); border-color: var(--dap-primary-light); }

.dap-user-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  color: var(--dap-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.dap-user-btn:hover { background: var(--dap-bg); color: var(--dap-text); }
.dap-user-btn .bi-person-circle { font-size: 1.3rem; color: var(--dap-primary); }

/* ══════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════ */
.dap-app {
  display: flex;
  min-height: calc(100vh - var(--dap-navbar-h));
}

.dap-main {
  flex: 1;
  min-width: 0;          /* lets wide tables scroll instead of stretching */
  display: flex;
  flex-direction: column;
}

.dap-messages { padding: var(--sp-4) var(--dap-gutter) 0; }
.dap-content  { flex: 1; padding: var(--sp-6) var(--dap-gutter); }

/* Centred variant, for pages with no sidebar (the picker). */
.dap-content--centered {
  width: 100%;
  max-width: var(--dap-content-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-10);
}
@media (max-width: 767.98px) {
  .dap-content--centered { padding: var(--sp-6) var(--dap-gutter); }
}

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
.dap-sidebar {
  width: var(--dap-sidebar-w);
  min-width: var(--dap-sidebar-w);
  flex-shrink: 0;
  height: calc(100vh - var(--dap-navbar-h));
  position: sticky;
  top: var(--dap-navbar-h);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--dap-white);
  border-right: 1px solid var(--dap-border);
}

.dap-sidebar-section {
  padding: var(--sp-4) var(--sp-5) var(--sp-1);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--dap-muted);
}

.dap-nav-list { list-style: none; margin: 0; padding: 0 var(--sp-2); }

.dap-nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  border-left: 3px solid transparent;
  color: var(--dap-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dap-nav-link i { flex-shrink: 0; width: 18px; text-align: center; font-size: var(--fs-lg); }
.dap-nav-link:hover {
  background: var(--dap-primary-bg);
  color: var(--dap-primary-text);
  text-decoration: none;
}
.dap-nav-link.active,
.dap-nav-link[aria-current="page"] {
  background: var(--dap-primary-bg);
  border-left-color: var(--dap-primary);
  color: var(--dap-primary-text);
  font-weight: var(--fw-semibold);
}

/* Accreditation context block, at the top of the workspace sidebar. */
.dap-acc-context {
  margin: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--dap-border);
  border-radius: var(--radius-lg);
  background: var(--dap-bg);
}
.dap-acc-context-header { display: flex; align-items: flex-start; gap: var(--sp-3); }
.dap-acc-context-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--fs-lg);
}
.dap-acc-context-icon.institutional { background: var(--dap-primary-bg); color: var(--dap-primary); }
.dap-acc-context-icon.program       { background: var(--dap-accent-bg);  color: var(--dap-accent-dark); }
.dap-acc-context-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--dap-text); }
.dap-acc-context-sub  { margin-top: 2px; font-size: var(--fs-xs); color: var(--dap-muted); }

.dap-switch-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--dap-border);
  color: var(--dap-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.dap-switch-link:hover { color: var(--dap-primary-text); }

/* ══════════════════════════════════════════
   DRAWER  (< 768px)
   ══════════════════════════════════════════
   The sidebar was previously `d-none d-md-flex`: below 768px it vanished and
   nothing replaced it, so on a phone the admin navigation did not exist.
   Here the same element leaves the flow and slides in over the content.

   State lives in one place — [data-drawer="open"] on <html> — so the panel,
   the backdrop, the hamburger's aria-expanded and the body scroll lock
   cannot disagree with each other. */
.dap-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(16, 24, 32, 0.45);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

@media (max-width: 767.98px) {
  .dap-nav-toggle { display: inline-flex; }

  .dap-sidebar {
    position: fixed;
    top: var(--dap-navbar-h);
    left: 0;
    z-index: var(--z-drawer);
    height: calc(100vh - var(--dap-navbar-h));
    width: min(86vw, var(--dap-sidebar-w));
    min-width: 0;
    border-right: 1px solid var(--dap-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);       /* 102% clears the shadow too */
    visibility: hidden;
    transition: transform var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  }

  .dap-drawer-backdrop { display: block; pointer-events: none; }

  [data-drawer="open"] .dap-sidebar { transform: translateX(0); visibility: visible; }
  [data-drawer="open"] .dap-drawer-backdrop { opacity: 1; pointer-events: auto; }

  /* Scroll lock while the drawer is open. */
  [data-drawer="open"], [data-drawer="open"] body { overflow: hidden; }
}

/* A drawer has no reason to exist once the sidebar is back in the flow. */
@media (min-width: 768px) {
  .dap-drawer-backdrop { display: none !important; }
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.dap-footer {
  flex-shrink: 0;
  padding: var(--sp-3) var(--dap-gutter);
  border-top: 1px solid var(--dap-border);
  background: var(--dap-white);
  font-size: var(--fs-xs);
  color: var(--dap-muted);
  text-align: center;
}

/* ══════════════════════════════════════════
   SHELL VARIANT — no sidebar
   ══════════════════════════════════════════
   The picker and other full-width screens. Previously a second 256-line base
   template that re-declared the navbar, the footer, the clock and 180 lines
   of CSS; now a body class on the one shell. */
.dap-shell--plain { display: flex; flex-direction: column; min-height: 100vh; }
.dap-shell--plain .dap-nav-toggle { display: none; }