/* ── Super Admin portal ───────────────────────────────────────────────────
   Built on the platform's own custom properties rather than a bolted-on admin theme.
   An AdminLTE or Bootstrap template would need its own RTL work, its own dark mode and
   its own maintenance — three burdens for a visual result nobody asked for.

   Everything below uses logical properties, so RTL works without a mirrored stylesheet. */

.sa-body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.sa-sidebar {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  background: var(--color-panel-primary);
  border-inline-end: 1px solid var(--color-border-subtle);
  padding: var(--sp-5) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sa-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.sa-brand__label {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-primary);
}

.sa-nav { flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); }

.sa-nav__group { display: flex; flex-direction: column; gap: 2px; }
.sa-nav__group--divided {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border-subtle);
}

.sa-nav__label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0 var(--sp-3) var(--sp-2);
}

.sa-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  /* The active marker sits on the reader's starting edge in either direction. */
  border-inline-start: 2px solid transparent;
}

.sa-nav__item:hover { background: var(--color-panel-raised); color: var(--color-text-primary); }

.sa-nav__item.is-active {
  background: var(--color-gold-wash);
  color: var(--color-gold-primary);
  border-inline-start-color: var(--color-gold-primary);
}

.sa-nav__icon { width: 16px; height: 16px; flex-shrink: 0; }

.sa-sidebar__foot {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sa-whoami { display: flex; flex-direction: column; }

/* ── Topbar and main ─────────────────────────────────────────────────── */

.sa-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-background-deep);
}

.sa-topbar__title { font-size: var(--fs-h2); font-weight: 700; margin: 0; }
.sa-topbar__actions { display: flex; gap: var(--sp-3); }

.sa-main { padding: var(--sp-8); min-width: 0; }

/* ── Impersonation banner ────────────────────────────────────────────────
   Fixed and loud on purpose. An operator who forgets which account they are in takes an
   action believing it is their own, and the member sees the consequence. */

.sa-impersonation {
  position: sticky;
  top: 0;
  z-index: 60;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6);
  background: #B33A22;
  color: #fff;
  font-size: var(--fs-sm);
}

.sa-impersonation__mark { font-size: 18px; }
.sa-impersonation__text { flex: 1; min-width: 200px; }
.sa-impersonation__note { display: block; opacity: .85; font-size: var(--fs-xs); }
.sa-impersonation__timer {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-sm);
}

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

.sa-grid { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.sa-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sa-grid--split { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.sa-kpi {
  background: var(--color-panel-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.sa-kpi__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--color-gold-primary); }
.sa-kpi__label { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.sa-kpi__sub { margin-top: 2px; }

/* ── Alerts ──────────────────────────────────────────────────────────────
   Kept short on purpose. A dashboard showing twelve warnings trains its reader to dismiss
   all twelve, and the one that mattered goes with them. */

.sa-alerts { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.sa-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border-inline-start: 3px solid;
}

.sa-alert--critical { border-color: #B33A22; background: rgba(179,58,34,.08); }
.sa-alert--warning  { border-color: var(--color-gold-primary); background: var(--color-gold-wash); }
.sa-alert--info     { border-color: var(--color-border-strong); background: var(--color-panel-raised); }

.sa-alert__action {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  background: var(--color-background-deep);
  border-radius: var(--r-sm);
  direction: ltr;
}

/* ── Health list ─────────────────────────────────────────────────────── */

.sa-health { list-style: none; padding: 0; margin: 0; }

.sa-health__row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.sa-health__dot { width: 8px; height: 8px; border-radius: 50%; }
.sa-health__dot.is-ok  { background: var(--color-positive, #2D8F5F); }
.sa-health__dot.is-bad { background: #B33A22; }
.sa-health__name { font-size: var(--fs-sm); }

/* ── Facts, feed, filters ────────────────────────────────────────────── */

.sa-facts { margin: 0; }
.sa-facts__row {
  display: grid;
  grid-template-columns: minmax(110px, 40%) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.sa-facts dt { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
.sa-facts dd { margin: 0; font-size: var(--fs-sm); }

.sa-feed { list-style: none; padding: 0; margin: 0; }
.sa-feed__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.sa-filters {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--sp-5);
}
.sa-filters .field { margin: 0; flex: 1; min-width: 200px; }

/* ── Action cards ────────────────────────────────────────────────────────
   Every administrative action shows its consequence and demands a reason. The help text is
   not decoration: an administrator who knows that "suspend" also ends every live session
   behaves differently from one who assumes it only blocks the next sign-in. */

.sa-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

.sa-action {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

/* A row form of the same block: a description on one side and the control that acts on it on
   the other. Wraps at narrow widths so the button drops below the text rather than squeezing
   it to two words. */
.sa-action--row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.sa-action--row > :first-child { flex: 1 1 260px; min-width: 0; }

.sa-action--danger { border-color: rgba(179,58,34,.4); }
.sa-action--warn   { border-color: var(--color-gold-edge); }

.sa-action__label { font-weight: 600; font-size: var(--fs-sm); }
.sa-action__help  { margin: var(--sp-1) 0 var(--sp-3); line-height: 1.5; }
.sa-action__foot  { display: flex; gap: var(--sp-2); align-items: center; }
.sa-action__foot .input { flex: 1; }

/* ── Permission matrix ───────────────────────────────────────────────── */

.sa-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-2); }

.sa-perm {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.sa-perm:hover { background: var(--color-panel-raised); }

/* A protected permission renders visibly locked with its reason, rather than being hidden.
   An administrator who cannot see that identity.reveal exists will eventually ask why they
   cannot grant it; one who sees it locked has been answered already. */
.sa-perm.is-locked {
  cursor: not-allowed;
  opacity: .75;
  background: rgba(179,58,34,.05);
  border: 1px solid rgba(179,58,34,.25);
}

.sa-perm__body { display: flex; flex-direction: column; gap: 2px; }
.sa-perm__slug { font-size: var(--fs-xs); }
.sa-perm__locked { color: #B33A22; margin-top: var(--sp-1); line-height: 1.45; }

.sa-sticky-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  background: var(--color-background-deep);
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sa-body { grid-template-columns: minmax(0, 1fr); }
  .sa-sidebar {
    position: static;
    height: auto;
    grid-row: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .sa-nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
  .sa-main, .sa-topbar { padding: var(--sp-5); }
}

/* Report bars — a simple horizontal magnitude bar in the reports screen. */
.report-bar {
    height: 12px;
    min-width: 2px;
    background: var(--color-accent, #2f6f5f);
    border-radius: 3px;
}

/* The supply review queue.

   Two column widths, and both are about the content rather than the grid: a reason field the
   width of the word "Reason" invites a one-word reason, which is the thing the supplier will
   come back and argue with; and a certifications line broken over seven lines is a wall the
   reviewer skims past. min-width on the cell is advisory under auto table layout, so the
   width lives on the control itself where it is binding. */
.decision-row > td { border-bottom: 1px solid var(--color-border); padding-top: 0; }
.table tr:has(+ .decision-row) > td { border-bottom: 0; }
.decision-row .input { min-width: 200px; }
.cell--claims { min-width: 200px; }