/* ============================================================================
   CourseForge - the administration screens.

   Only what the rest of the design system genuinely lacks. Everything here is
   built from the custom properties in tokens.css, so both themes follow without
   a second definition, and every block says which screen it is for.

   If a screen needs a card, a badge, a table or a form row, it uses the ones in
   components.css. Nothing is repeated here.
   ========================================================================== */

/* -- the administrator block in the sidebar --------------------------------
   App.js. A second navigation group, set off from the four screens everybody
   has by a rule and a heading, so it reads as "and, because you are an
   administrator, also these" rather than as four more destinations. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-soft);
}

/* Pairs with .eyebrow, which supplies the type; this only places it over the
   nav items below it and takes the colour down a step, because a heading in
   the sidebar must never compete with the destination under it. */
.nav-group__title {
  padding: 0 10px var(--s-1);
  color: var(--text-faint);
}

/* -- the count on the navigation row you are standing on -------------------
   App.js, and the one place in the sidebar where a colour has to be picked
   again rather than inherited.

   layout.css draws .nav-item__count in --text-faint, which is measured against
   the flat sidebar and clears 4.5:1 there comfortably (5.5:1 dark, 5.1:1
   light). The active row is not the flat sidebar: it is washed in --accent-soft
   and comes out lighter in the dark theme and darker in the light one, which
   takes the same 10.5px number to 4.29:1 and 4.45:1 - under the floor in both.
   A quiet colour has that little room left, which is what tokens.css means by
   "the smaller a token is set, the less licence it has to recede".

   One step up the same scale is the whole fix: --text-dim gives 5.04:1 dark and
   5.46:1 light on that wash, and the count still reads as secondary to the
   accent-coloured label beside it. Measured with alpha compositing over the
   real stack, not sampled by eye. */
.nav-item.is-active .nav-item__count {
  color: var(--text-dim);
}

/* -- one setting ------------------------------------------------------------
   Settings and Prompts. A definition list: what the setting is called, what it
   actually does in a full sentence, and the control that changes it. The
   description sits under the label rather than beside the control, so a long
   explanation never squeezes the input it belongs to. */
.setting-list {
  display: flex;
  flex-direction: column;
}

.setting-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 300px);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.setting-row:last-child { border-bottom: 0; }

/* The glyph that says what kind of setting this is, on the same tile the
   Details tab draws a content element on - so the two screens are read as one
   kind of list. It takes the accent when the installation has moved the
   setting off what the release ships. */
.setting-row__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-dim);
}
.setting-row.is-changed .setting-row__icon { background: var(--accent-soft); color: var(--accent); }

.setting-row__text { min-width: 0; }
.setting-row__label { font-size: var(--t-sm); font-weight: 550; }
.setting-row__desc {
  margin-top: 3px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--text-dim);
}

/* Holds the input and, under it, anything that has to be said about the value
   itself - a unit, a warning, "leave blank to keep the stored secret". */
.setting-row__control {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* A setting this installation has moved off what the release ships. The rule
   down the left is the marker; .changed-flag names it in words for anybody who
   cannot see the colour. */
.setting-row.is-changed {
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-4) - 2px);
}

.changed-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 860px) {
  .setting-row { grid-template-columns: 30px minmax(0, 1fr); }
  .setting-row__control { grid-column: 2; }
}

/* -- the index down the side of the Settings screen ---------------------------
   Nine groups and a hundred fields is a long page; the index says what is on
   it and takes you there. It follows the scroll, marks the group on screen,
   and carries the count of settings this installation has changed in each -
   so an inherited installation can be surveyed without reading a single row.
   Below 1280px it folds into a row of chips above the groups. */
.settings-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.settings-nav__item > .icon { color: var(--text-dim); }
.settings-nav__item:hover { background: var(--surface-hover); color: var(--text); }
.settings-nav__item.is-active { background: var(--accent-soft); color: var(--accent); }
.settings-nav__item.is-active > .icon { color: currentColor; }
.settings-nav__item > .badge { margin-left: auto; }
.settings-nav__foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-soft); }
.settings-nav__search { margin-bottom: var(--s-2); }

/* Each group is a jump target, and the header must not be hidden under the
   top of the scroller when it is jumped to. */
.setting-group { scroll-margin-top: var(--s-4); }

@media (max-width: 1279px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-1); }
  .settings-nav__item { width: auto; padding: 5px 10px; border: 1px solid var(--border); background: var(--surface); font-size: var(--t-xs); }
  .settings-nav__item > .badge { margin-left: 4px; }
  .settings-nav__foot { display: none; }
  .settings-nav__search { flex: 1 1 100%; margin-bottom: var(--s-1); }
}

/* -- the danger zone --------------------------------------------------------
   Accounts, Settings and Updates. Actions that destroy something or that can
   lock an administrator out of their own installation: deleting an account,
   resetting every setting, rolling a release back. Being visibly a different
   kind of panel is the point - it is the only warning some people will read. */
.danger-zone {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-lg);
  background: var(--danger-soft);
}

.danger-zone__title {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--danger);
}

/* -- the Security screen ----------------------------------------------------
   The verdict card takes the colour of the verdict on its left edge, so the
   answer is visible before the sentence is read; the confirmation code is
   set large enough to be typed from across the room. */
.verdict { border-left: 4px solid var(--border-strong); }
.verdict--success { border-left-color: var(--success); }
.verdict--warning { border-left-color: var(--warning); }
.verdict--danger { border-left-color: var(--danger); }
.ack-code {
  padding: 2px 8px;
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-lg);
  letter-spacing: 0.12em;
  color: var(--danger);
  user-select: all;
}

/* -- the update history -----------------------------------------------------
   Updates. Extends .log from components.css with the three things an install
   record is made of: when it happened, what was added, what was taken away.
   Every line stays readable on its own, because this log is normally read
   after something has already gone wrong. */
.log__stamp {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-right: var(--s-2);
}
.log__line--added   { color: var(--success); }
.log__line--removed { color: var(--danger); }
.log__line--muted   { color: var(--text-faint); }

/* -- the installation check -------------------------------------------------
   Settings. One row per check: a status glyph, what was checked, what was
   found, and - only when something is not right - what to do about it. The
   glyph gets a column of its own so that every label starts on the same
   vertical line and a section of forty checks can be skimmed rather than read.
   Deliberately denser than .setting-row: this is a report, not a form. */
.diag-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-4);
}

.diag-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.diag-row:last-child { border-bottom: 0; }

/* The icon sits on the text baseline rather than on the box's top edge. */
.diag-row__icon { margin-top: 3px; }

/* -- which layer of prompts am I editing ------------------------------------
   Both prompt screens open with this strip, directly under the header, in the
   accent wash rather than in a card, because it is not one more thing on the
   page - it is the frame the rest of the page has to be read in. Editing one
   layer while the other quietly wins is the one mistake these screens can
   produce, and it is invisible from inside the editor.

   The profile's copy of the strip also carries a count and a Reset all button,
   so it wraps rather than squeezing the sentence, and its items are centred on
   each other: `flex-start` top-aligned a --t-sm button against the first line
   of a --t-xs paragraph at every width, not only when it wrapped. The icon
   opts back out with its own margin, because it belongs beside the first line
   of the sentence rather than in the middle of three. */
.prompt-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-3) var(--s-5);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
  color: var(--text-muted);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.prompt-note > svg { align-self: flex-start; }
.prompt-note > span:not(.badge) { flex: 1 1 320px; min-width: 0; }

/* The prompt itself, which is the reason the screen exists, so it takes
   whatever height is left over rather than a guessed number of rows. The floor
   keeps it usable when the pane is short; below that the pane scrolls. */
.prompt-editor {
  flex: 1 1 auto;
  min-height: 300px;
}