/* ==========================================================================
   D-Low Admin UI layer — load AFTER Bootstrap 5.3 on every admin page.
   Canonical copy: static/css/admin-ui.css
   Rules: see DESIGN.md. Use tokens; never add raw hex in templates.
   ========================================================================== */

:root {
  --ui-bg: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-border: #e3e6ea;
  --ui-text: #1a1f26;
  --ui-text-muted: #5b6470;
  --ui-accent: #461d7c;
  --ui-accent-hover: #271145;
  --ui-accent-soft: #f7f1ff;
  --ui-danger: #b42318;
  --ui-danger-soft: #fdecea;
  --ui-warning-bg: #fef3c7;
  --ui-warning-text: #92400e;
  --ui-success-bg: #def7e9;
  --ui-success-text: #137a4a;
  --ui-neutral-bg: #eceef1;
  --ui-neutral-text: #45505c;
  --ui-radius: 8px;
  --ui-radius-sm: 6px;
  --ui-focus-ring: 0 0 0 3px rgba(70, 29, 124, 0.25);
}

/* Base ------------------------------------------------------------------- */
body.admin {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.admin .ui-page a:not(.btn):not(.qa-uat-nav-bar__link):not(.ui-stat) {
  color: var(--ui-accent);
  text-decoration: none;
}
.admin .ui-page a:not(.btn):not(.qa-uat-nav-bar__link):not(.ui-stat):hover {
  text-decoration: underline;
}
.admin a.btn { text-decoration: none; }
.admin a.btn-ui-primary,
.admin a.btn-ui-primary:hover,
.admin a.btn-ui-primary:focus-visible {
  color: #fff;
}

.ui-page { padding-block: 24px 48px; }

/* Page header ------------------------------------------------------------ */
.ui-breadcrumb { font-size: 16px; color: var(--ui-text-muted); margin-bottom: 4px; }
.ui-breadcrumb a { color: var(--ui-text-muted); }
.ui-breadcrumb a:hover { color: var(--ui-accent); }
.ui-breadcrumb .sep { margin: 0 6px; color: #aab2bd; }

.ui-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.ui-page-title { font-size: 28px; font-weight: 600; margin: 0; line-height: 1.3; }
.ui-page-sub { font-size: 16px; color: var(--ui-text-muted); margin: 2px 0 0; }
.ui-page-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Cards ------------------------------------------------------------------ */
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.ui-card + .ui-card, .ui-card.mb { margin-bottom: 24px; }
.ui-card-body { padding: 20px 24px; }
/* Bootstrap .row.g-* uses a negative margin-top that eats this padding. */
.admin .ui-card-body.row { margin-top: 0; }
.admin .ui-card > .ui-card-title {
  padding: 20px 24px 0;
  margin-bottom: 0;
}
.ui-card-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 22px; font-weight: 600; margin: 0 0 16px;
}
.ui-card-title .meta { font-size: 12.5px; font-weight: 400; color: var(--ui-text-muted); }

/* Buttons ---------------------------------------------------------------- */
.btn-ui-primary, .btn-ui-secondary, .btn-ui-ghost, .btn-ui-danger-ghost {
  border-radius: var(--ui-radius-sm);
  font-size: 16px; font-weight: 500;
  padding: 7px 14px; line-height: 1.35;
  text-transform: none; letter-spacing: 0;
}
/* Public-site .btn (16px 32px, ALL-CAPS) must not win on dashboard pages. */
body.admin .btn:not(.btn-ui-icon):not(.btn-close) {
  padding: 7px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.btn-ui-primary { background: var(--ui-accent); border: 1px solid var(--ui-accent); color: #fff; }
.btn-ui-primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: #fff; }
.btn-ui-secondary { background: transparent; border: 1px solid var(--ui-border); color: var(--ui-text); }
.btn-ui-secondary:hover { background: var(--ui-surface); color: var(--ui-text); }
.btn-ui-ghost { background: transparent; border: 1px solid transparent; color: var(--ui-accent); }
.btn-ui-ghost:hover { background: var(--ui-accent-soft); color: var(--ui-accent-hover); }
.btn-ui-danger-ghost { background: transparent; border: 1px solid transparent; color: var(--ui-danger); }
.btn-ui-danger-ghost:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
.btn-ui-icon {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ui-radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--ui-text-muted); font-size: 16px; line-height: 1;
}
.btn-ui-icon:hover { background: var(--ui-neutral-bg); color: var(--ui-text); }
.admin .btn:focus-visible { box-shadow: var(--ui-focus-ring); outline: none; }

.elective-groups-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ui-border);
}
.elective-groups-toolbar > details { margin: 0; }
.elective-groups-toolbar > details > summary {
  position: absolute;
  top: 0;
  right: 0;
  list-style: none;
}
.elective-groups-toolbar > details > summary::-webkit-details-marker { display: none; }
.elective-groups-toolbar > details > summary::marker { content: none; }
.elective-groups-toolbar > details[open] {
  flex: 1 0 100%;
}

/* Badges ----------------------------------------------------------------- */
.ui-badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
.ui-badge--success { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-badge--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
.ui-badge--warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-badge--danger  { background: var(--ui-danger-soft); color: var(--ui-danger); }

/* Banners ---------------------------------------------------------------- */
.ui-banner {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--ui-radius-sm);
  padding: 10px 14px; font-size: 16px; margin-bottom: 16px;
}
.ui-banner-warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-banner-danger  { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-banner-success { background: var(--ui-success-bg); color: var(--ui-success-text); }

/* Tables ----------------------------------------------------------------- */
.ui-table { font-size: 16px; margin-bottom: 0; }
.ui-table thead th {
  background: var(--ui-bg);
  color: var(--ui-text-muted);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ui-border);
  padding: 10px 24px; white-space: nowrap;
}
.ui-table tbody td {
  padding: 11px 24px; vertical-align: middle;
  border-bottom: 1px solid var(--ui-border);
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: #fafbfc; }
.ui-table .cell-name a { font-weight: 700; color: var(--ui-text); }
.ui-table .cell-name a:hover { color: var(--ui-accent); }
.ui-table .cell-num { text-align: left; font-variant-numeric: tabular-nums; }
.ui-table .cell-actions { text-align: right; white-space: nowrap; }
.admin .table-responsive:has(.dropdown-menu.show) {
  overflow: visible;
}

/* Toolbar (filters) ------------------------------------------------------ */
.ui-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ui-toolbar .form-label { margin-bottom: 4px; }

/* Forms ------------------------------------------------------------------ */
.admin .form-label { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.admin .form-label .req { color: var(--ui-danger); margin-left: 2px; }
.admin .form-control, .admin .form-select {
  font-size: 16px; border-color: var(--ui-border);
  border-radius: var(--ui-radius-sm);
}
.admin .form-control:focus, .admin .form-select:focus {
  border-color: var(--ui-accent); box-shadow: var(--ui-focus-ring);
}
.admin .form-text { font-size: 12.5px; color: var(--ui-text-muted); }
.ui-form-footer {
  display: flex; gap: 8px; align-items: center;
  padding-top: 20px; margin-top: 8px;
}

/* Reorderable list rows (e.g. required courses) -------------------------- */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-bottom: 1px solid var(--ui-border);
}
.ui-list-row:last-child { border-bottom: 0; }
.ui-drag {
  cursor: grab; color: #aab2bd; font-size: 15px; line-height: 1;
  padding: 4px; user-select: none;
}
.ui-list-row .index { color: var(--ui-text-muted); font-size: 16px; width: 24px; text-align: right; }
.ui-list-row .grow { flex: 1; min-width: 0; }
.ui-list-row .title { font-weight: 500; }
.ui-list-row .sub { font-size: 12.5px; color: var(--ui-text-muted); }

/* Tabs ------------------------------------------------------------------- */
.admin .nav-tabs { border-bottom: 1px solid var(--ui-border); }
.admin .nav-tabs .nav-link {
  color: var(--ui-text-muted); font-size: 16px; font-weight: 500;
  border: 0; border-bottom: 2px solid transparent; padding: 8px 14px;
}
.admin .nav-tabs .nav-link:hover { color: var(--ui-text); }
.admin .nav-tabs .nav-link.active {
  color: var(--ui-accent); background: transparent;
  border-bottom-color: var(--ui-accent);
}

/* Definition rows (read-only summary sidebars) --------------------------- */
.ui-def { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 16px; }
.ui-def dt { color: var(--ui-text-muted); font-weight: 400; }
.ui-def dd { margin: 0; text-align: right; font-weight: 500; }
.ui-divider { border: 0; border-top: 1px solid var(--ui-border); margin: 12px 0; }

/* Stat tiles (count filters above list pages) ---------------------------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ui-stat {
  display: block; width: 100%; text-align: left;
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); padding: 12px 16px;
  cursor: pointer; transition: border-color .12s ease;
  color: var(--ui-text); font: inherit;
}
.ui-stat:hover { border-color: #c4cbd3; }
.ui-stat.active { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.ui-stat .label { font-size: 12.5px; font-weight: 500; color: var(--ui-text-muted); margin-bottom: 2px; }
.ui-stat .value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.ui-stat.active .value { color: var(--ui-accent); }
.ui-stat--static { cursor: default; pointer-events: none; }
.ui-stat--static:hover { border-color: var(--ui-border); }

.task-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.task-row .title { font-size: 16px; font-weight: 600; }
.task-row .state { font-size: 16px; color: var(--ui-text-muted); margin-left: 10px; }

/* Exception flags in table cells ----------------------------------------- */
/* Normal/complete states stay quiet text; only exceptions get a badge. */
.cell-ok { color: var(--ui-text-muted); font-size: 16px; }

/* Preview harness (shared course / section / certificate preview) -------- */
.admin .site-header__eyebrow {
  color: inherit;
  font: inherit;
  margin: 0;
}
.catalog-preview-harness-banner,
.catalog-published-preview-banner {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.admin .catalog-preview-fields {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr);
  margin: 0;
}
.admin .catalog-preview-fields dt,
.admin .catalog-preview-fields dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border);
  min-width: 0;
  background: transparent;
  color: var(--ui-text);
  font-weight: 400;
}
.admin .catalog-preview-fields dt {
  color: var(--ui-text-muted);
  font-weight: 600;
}
.admin .catalog-preview-fields dt:nth-last-child(2),
.admin .catalog-preview-fields dd:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.admin .catalog-preview-fields dt:first-child,
.admin .catalog-preview-fields dd:first-of-type {
  padding-top: 0;
}
.admin .catalog-preview-group-intro {
  padding-bottom: 12px;
}
@media (max-width: 575.98px) {
  .admin .catalog-preview-fields {
    grid-template-columns: 1fr;
  }
  .admin .catalog-preview-fields dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}
.admin .catalog-section-nav {
  border-bottom-color: var(--ui-border);
}
.admin .catalog-section-nav__link {
  color: var(--ui-text-muted);
  font-size: 16px;
  font-weight: 500;
  border-bottom-width: 2px;
  padding: 8px 14px 10px;
}
.admin .catalog-section-nav__link:hover,
.admin .catalog-section-nav__link:focus-visible {
  color: var(--ui-text);
}
.admin .catalog-section-nav__link.is-active,
.admin .catalog-section-nav__link[aria-current="page"] {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
  font-weight: 500;
}