/*
  UMP admin UI — Bootstrap 5.3 retuned to the CMU brand palette of spec §9.
  Ported from the approved UI mockups: square corners, Carnegie Red accent, Archivo headings,
  and status expressed by weight and text rather than colour alone (WCAG 2.1 AA).
*/

:root {
  --cmu: #C41230;
  --cmu-600: #a80f29;
  --cmu-700: #870c21;
  --cmu-100: #fdeef1;
  --cmu-200: #f9d3da;
  --iron: #6D6E71;
  --steel: #E0E0E0;
  --ground: #f3f2f2;
  --ink: #201e1d;

  --bs-btn-border-radius: 0;

  /*
    The font stack is the mockups' verbatim. The mockups name Archivo but never load it, so what was
    approved actually rendered in the system UI face — no webfont is fetched here either. When the
    University's approved brand face is confirmed, self-host it and name it first in this stack.
  */
  --bs-body-font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-color: #201e1d;
  --bs-body-bg: var(--ground);
  --bs-primary: #C41230;
  --bs-primary-rgb: 196, 18, 48;
  --bs-link-color: #870c21;
  --bs-link-hover-color: #C41230;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-border-color: var(--steel);
  --bs-secondary-color: var(--iron);
  --bs-emphasis-color: #201e1d;
  --bs-focus-ring-color: rgba(196, 18, 48, .35);
}

* {
  border-radius: 0 !important;
}

html, body {
  background: var(--ground);
}

h1, h2, h3, h4, h5, h6, .fw-h {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.015em;
}

/* Focus must stay visible everywhere — spec §9 accessibility. */
:focus-visible {
  outline: 3px solid var(--cmu);
  outline-offset: 1px;
}

/*
  WCAG 2.4.1 Bypass Blocks: every page repeats the same masthead and rail, so a keyboard user needs
  one keystroke past them. Off-screen until focused, then it appears in place.
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--cmu);
  color: #fff;
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Focus wrap-around sentinels for the modal dialog: reachable by Tab, invisible and silent. */
.focus-sentinel {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  background: transparent;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.btn {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: .8125rem;
  --bs-btn-border-radius: 0;
}

.btn-primary {
  --bs-btn-bg: var(--cmu);
  --bs-btn-border-color: var(--cmu);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cmu-600);
  --bs-btn-hover-border-color: var(--cmu-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cmu-700);
  --bs-btn-active-border-color: var(--cmu-700);
  --bs-btn-disabled-bg: var(--cmu);
  --bs-btn-disabled-border-color: var(--cmu);
}

/*
  Control boundaries sit at rgba(32,30,29,.55) rather than the mockup's .4. At .4 the blend against
  white is 2.46:1, below the 3:1 that WCAG 1.4.11 requires for the edges of a user-interface
  component; .55 gives 3.7:1 and is visually near-identical (spec §9).
*/
.btn-outline-dark {
  --bs-btn-border-color: rgba(32, 30, 29, .55);
  --bs-btn-color: #201e1d;
  --bs-btn-hover-bg: rgba(32, 30, 29, .08);
  --bs-btn-hover-border-color: rgba(32, 30, 29, .55);
  --bs-btn-hover-color: #201e1d;
  --bs-btn-active-bg: rgba(32, 30, 29, .16);
  --bs-btn-active-color: #201e1d;
  --bs-btn-active-border-color: rgba(32, 30, 29, .55);
}

.btn-outline-cmu {
  --bs-btn-color: var(--cmu-700);
  --bs-btn-border-color: var(--cmu);
  --bs-btn-hover-bg: var(--cmu);
  --bs-btn-hover-border-color: var(--cmu);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cmu-700);
  --bs-btn-active-border-color: var(--cmu-700);
  --bs-btn-active-color: #fff;
}

.btn-cmu {
  --bs-btn-bg: var(--cmu);
  --bs-btn-border-color: var(--cmu);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cmu-700);
  --bs-btn-hover-border-color: var(--cmu-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-disabled-bg: var(--cmu);
  --bs-btn-disabled-border-color: var(--cmu);
}

.form-control, .form-select {
  font-size: .8125rem;
  background-color: #fff;
  border-color: rgba(32, 30, 29, .55);
}

/*
  The privilege matrix is read by scanning ticked against unticked boxes, so the unticked state has
  to be plainly visible: a steel border on a grey fill measured 1.32:1 against the page.
*/
.form-check-input {
  border-color: var(--iron);
  background-color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: var(--cmu);
  box-shadow: 0 0 0 .2rem rgba(196, 18, 48, .2);
}

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

.form-label {
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--iron);
  margin-bottom: .25rem;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
}

.rule { border-top: 2px solid rgba(32, 30, 29, .4); }

.eyebrow {
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iron);
}

.eyebrow-cmu {
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cmu);
}

.i {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
  flex: none;
}

/* ── App chrome ─────────────────────────────────────────────────────────────── */

.app {
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Sticky and shrinking, the way cmu.edu's masthead collapses as the page scrolls. CMU staggers the
   two axes so the mark never distorts mid-transition; the same idea here, on a scale that suits an
   admin tool rather than a marketing hero. */
.topbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 0 1rem;
  border-bottom: 2px solid var(--cmu);
  min-height: 72px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
  transition: min-height .28s ease .06s, box-shadow .28s ease;
}

.is-scrolled .topbar {
  min-height: 48px;
  box-shadow: 0 2px 8px rgb(32 30 29 / 14%);
}

/* The horizontal Wordmark in the masthead, which is what cmu.edu switches to once its own header
   collapses. Carnegie Red on white is one of the approved combinations, and the width never drops
   below the 150px minimum the brand standards set — that floor is the whole reason the square logo
   is not used up here. */
.cmu-brand {
  display: flex;
  align-items: center;
  /* At least one M-width of clear space, so nothing crowds the mark. */
  padding-right: 1.5rem;
  margin-right: .25rem;
  border-right: 1px solid var(--steel);
}

.cmu-brand img {
  display: block;
  width: 240px;
  height: auto;
  transition: width .28s ease;
}

.is-scrolled .cmu-brand img { width: 184px; }

/* The application's own name, kept clear of the mark rather than locked up with it: the brand
   standards forbid pairing the Wordmark with adjoining text. */
.appname {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 800;
  font-size: .9375rem;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  transition: font-size .28s ease;
}

a.appname:hover { color: var(--cmu-700); }

.is-scrolled .appname { font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
  .topbar, .cmu-brand img, .appname { transition: none; }
}

@media (max-width: 720px) {
  /* Below the mark's minimum width plus the app name, the name gives way rather than the mark. */
  .appname { display: none; }
  .cmu-brand { border-right: 0; }
}

.wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1rem;
  border-right: 1px solid var(--steel);
  font-weight: 800;
  font-size: .9375rem;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
}

.wordmark:hover { color: var(--cmu-700); }

.appbody {
  display: grid;
  grid-template-columns: 214px 1fr;
  flex: 1;
}

.sidenav {
  border-right: 1px solid var(--steel);
  padding: .75rem 0;
  background: #fff;
}

.sidenav a {
  display: block;
  padding: .4rem 1rem;
  font-size: .8125rem;
  color: #201e1d;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.sidenav a:hover { background: rgba(32, 30, 29, .05); }

.sidenav a.active {
  border-left-color: var(--cmu);
  background: var(--cmu-100);
  color: var(--cmu-700);
  font-weight: 600;
}

.sidenav .grp {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--iron);
  padding: 1rem 1rem .25rem;
}

.pane {
  padding: 1rem 1.5rem 3rem;
  min-width: 0;
  position: relative;
}

.crumbs {
  font-size: .6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--iron);
}

.crumbs span + span::before {
  content: "/";
  margin: 0 .35rem;
  color: var(--steel);
}

.sec {
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(32, 30, 29, .4);
  padding-bottom: .35rem;
  margin: 1.5rem 0 .75rem;
}

.ini {
  width: 30px;
  height: 30px;
  background: var(--cmu);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .75rem;
  flex: none;
}

.ini-q {
  background: var(--ground);
  color: var(--iron);
  border: 1px solid var(--steel);
}

/* ── Metrics ────────────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--steel);
  border-left: 0;
}

.kpi { padding: .65rem 1rem; border-left: 1px solid var(--steel); }

.kpi .l {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--iron);
}

.kpi .v { font-weight: 800; font-size: 1.85rem; line-height: 1.1; }
.kpi .v.sm { font-size: 1.0625rem; }
.kpi .d { font-size: .6875rem; color: var(--iron); }

/* ── Grids ──────────────────────────────────────────────────────────────────── */

.table {
  --bs-table-hover-bg: rgba(32, 30, 29, .04);
  font-size: .8125rem;
  margin: 0;
}

.table > thead th {
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--iron);
  font-weight: 600;
  border-bottom: 2px solid rgba(32, 30, 29, .4);
  white-space: nowrap;
}

.table > tbody td { border-color: var(--steel); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }

.gridwrap { border: 1px solid var(--steel); background: #fff; }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--iron);
  padding: .4rem .75rem;
  border-top: 1px solid var(--steel);
  background: var(--ground);
}

.pager .btn { font-size: .6875rem; padding: .1rem .5rem; }

/* Status escalates by weight and wording, never by hue alone (spec §9). */
.st {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .6875rem;
  letter-spacing: .04em;
  padding: .1rem .5rem;
  border: 1px solid rgba(32, 30, 29, .4);
  white-space: nowrap;
}

.st-flag { border-color: var(--cmu); color: var(--cmu-700); }
.st-off { background: var(--cmu); border-color: var(--cmu); color: #fff; font-weight: 600; }
.st-new { border-style: dashed; color: var(--iron); }

.rolechip {
  display: inline-block;
  background: var(--cmu-100);
  color: var(--cmu-700);
  font-size: .6875rem;
  padding: .1rem .5rem;
  margin: 1px 2px 1px 0;
}

.adminchip {
  display: inline-block;
  background: var(--ink);
  color: var(--ground);
  font-size: .6875rem;
  padding: .1rem .5rem;
  margin: 1px 2px 1px 0;
  font-weight: 600;
}

.qchip {
  display: inline-block;
  background: var(--ground);
  border: 1px solid var(--steel);
  font-size: .6875rem;
  padding: .1rem .5rem;
  margin: 1px 2px 1px 0;
}

/* ── Blocks ─────────────────────────────────────────────────────────────────── */

.notice {
  border: 1px solid rgba(32, 30, 29, .4);
  border-left: 4px solid var(--cmu);
  background: var(--ground);
  padding: .5rem .75rem;
  font-size: .8125rem;
}

.notice-q { border-left-color: var(--iron); }

.panel { border: 1px solid var(--steel); padding: .75rem 1rem; height: 100%; background: #fff; }
/* 100% is for panels that share a grid row. A panel placed straight in the pane is a stretched grid
   cell's child, where 100% means the whole viewport and anything after it lands below the fold. */
.pane > .panel { height: auto; }

.panel h4 {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.panel p { font-size: .8125rem; color: var(--iron); margin: 0; }

.stepn {
  width: 26px;
  height: 26px;
  background: var(--cmu);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .75rem;
  flex: none;
}

.matrix td:not(:first-child), .matrix th:not(:first-child) { text-align: center; width: 84px; }
.matrix .form-check-input { margin: 0; width: 1rem; height: 1rem; }

pre {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .75rem;
  background: var(--ground);
  border: 1px solid var(--steel);
  padding: .6rem;
  margin: .5rem 0 0;
  line-height: 1.5;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--steel);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--cmu);
  --bs-nav-tabs-link-active-color: var(--cmu);
  --bs-nav-link-color: var(--iron);
  border-bottom-width: 1px;
}

.nav-tabs .nav-link {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: .8125rem;
  border-width: 0 0 3px;
  background: none;
}

.nav-tabs .nav-link:hover { border-bottom-color: var(--steel); color: #201e1d; }

.stage { min-height: 60vh; display: grid; place-items: center; padding: 2rem; background: var(--ground); }

.pick { border: 2px solid #201e1d; background: #fff; }

.pick button, .pick .pick-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--steel);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
}

.pick button:last-child, .pick .pick-item:last-child { border-bottom: 0; }
.pick button:hover, .pick .pick-item:hover { background: var(--cmu-100); }

.deny { width: 44px; height: 44px; background: var(--cmu); color: #fff; display: grid; place-items: center; }

.scope { border: 1px solid var(--steel); }

.scope div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--steel);
  font-size: .8125rem;
}

.scope div:last-child { border-bottom: 0; }
.lose { color: var(--cmu-700); font-weight: 600; }
.keep { color: var(--iron); }

.toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Just under the masthead, where the eye already is after pressing a button in the page header;
     at the foot of a tall window a confirmation went unnoticed. */
  top: calc(72px + .75rem);
  z-index: 1080;
  width: min(720px, calc(100vw - 2rem));
}

.toast-line {
  background: #201e1d;
  color: var(--ground);
  border: 0;
  font-size: .8125rem;
  padding: .6rem .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.toast-line.is-error { background: var(--cmu-700); color: #fff; }

.modal-backdrop-ump {
  position: fixed;
  inset: 0;
  background: rgba(32, 30, 29, .55);
  z-index: 1050;
  display: grid;
  place-items: start center;
  padding: 3rem 1rem;
  overflow: auto;
}

.modal-card {
  background: #fff;
  border: 2px solid #201e1d;
  width: min(560px, 100%);
}

.modal-card header {
  border-bottom: 2px solid var(--cmu);
  padding: .6rem 1rem;
}

.modal-card header h2 { font-size: 1.0625rem; margin: 0; }
.modal-card .modal-card-body { padding: 1rem; font-size: .8125rem; display: grid; gap: .75rem; }
.modal-card footer { border-top: 1px solid var(--steel); padding: .6rem 1rem; display: flex; justify-content: flex-end; gap: .5rem; }

.validation-message, .field-error { color: var(--cmu-700); font-size: .75rem; }

/* An action that reads as a link inside a metric tile, but is a real button for assistive tech. */
.btn-link-plain {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cmu-700);
  text-decoration: underline;
  cursor: pointer;
}

.btn-link-plain:hover { color: var(--cmu); }

@media (max-width: 900px) {
  .appbody { grid-template-columns: 1fr; }
  .sidenav { border-right: 0; border-bottom: 1px solid var(--steel); }
}