/* DPS ERP Console.
   Every colour, face and measure comes from tokens.css — nothing is invented
   here, so the console and the landing page stay recognisably one product. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h { font-family: var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

.noscript { max-width: 34rem; margin: var(--space-16) auto; padding: 0 var(--space-6); }

/* ── Field label / eyebrow ─────────────────────────────────────────────── */
.label {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Sign in ──────────────────────────────────────────────────────────── */
.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.signin-card {
  width: 100%;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
}
.crest {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--dps-orange);
  color: var(--dps-white);
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h4);
  letter-spacing: 0;
  margin-bottom: var(--space-6);
}
.signin h1 { font-size: var(--text-h2); line-height: var(--leading-snug); margin-bottom: var(--space-2); }
.signin .sub { color: var(--ink-3); font-size: var(--text-sm); margin: 0 0 var(--space-8); }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
/* Checkboxes and radios are excluded: `width: 100%` on a checkbox stretches
   the box itself across the panel and pushes its label to the far edge, which
   is what the permission pickers were doing. */
.field input:not([type="checkbox"]):not([type="radio"]), .field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}
.field input:focus-visible, .field select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--dps-orange);
  box-shadow: 0 0 0 var(--ring-width) var(--color-primary-tint);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  background: var(--dps-orange);
  color: var(--dps-white);
}
.btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-quiet {
  background: transparent; color: var(--ink-2); border-color: var(--border-strong);
}
.btn-quiet:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  border: 1px solid;
}
.alert-error { background: var(--status-red-soft); border-color: var(--status-red); color: #7a0210; }
.alert-info  { background: var(--color-primary-tint); border-color: var(--dps-orange); color: var(--dps-orange-dark); }
.alert-ok    { background: var(--status-green-soft); border-color: var(--dps-green); color: var(--dps-green-dark); }

/* ── App shell ────────────────────────────────────────────────────────── */
/* The top bar holds three things: where you are, the tabs, and who you are.
   A native page scrolls the document under a sticky bar; a module's frame
   fills everything below the bar and scrolls itself, so there is only ever
   one scrollbar. */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.shell > main { flex: 1; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
  padding: 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
  height: 64px;
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: none; max-width: 18rem; }
.brand .crest { width: 32px; height: 32px; margin: 0; font-size: var(--text-xs); border-radius: var(--radius-sm); flex: none; }
.brand-text { min-width: 0; }
.brand-name {
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-base);
  line-height: var(--leading-snug);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { font-size: var(--text-2xs); color: var(--ink-3); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* Tabs */
.tabs-nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab, .subnav button, .tabs-toggle, .menu-item {
  background: none; border: 0; cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--ink-2);
  white-space: nowrap;
  text-align: left;
}
.tab:hover, .subnav button:hover, .tabs-toggle:hover, .menu-item:hover { background: var(--bg); color: var(--ink); }
.tab[aria-current="page"], .subnav button[aria-current="page"] { background: var(--color-primary-tint); color: var(--dps-orange-dark); }

.tabs-menu { display: none; position: relative; }
.tabs-toggle { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border-strong); }
.caret { font-size: var(--text-xs); color: var(--ink-3); }

/* Sub-navigation inside a section (People: Employees, Org chart, Roles) */
.subnav { background: var(--panel); border-bottom: 1px solid var(--border-soft); padding: var(--space-2) var(--space-6); }
.subnav-inner { max-width: var(--container-max); margin: 0 auto; display: flex; gap: var(--space-1); overflow-x: auto; }

/* Menus */
.menu-panel {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 30;
  min-width: 14rem;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: grid; gap: 2px;
}
.menu-right { left: auto; right: 0; }
.menu-panel .tab, .menu-item { width: 100%; }
.menu-head { padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-1); }
.menu-section { padding: var(--space-2) var(--space-4) var(--space-3); display: grid; gap: var(--space-2); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-1); }
.menu-section .who-switch { max-width: none; width: 100%; }

/* The person */
.who { position: relative; flex: none; padding-left: var(--space-4); border-left: 1px solid var(--border-soft); }
.who-button {
  display: flex; align-items: center; gap: var(--space-3);
  background: none; border: 0; cursor: pointer; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md); text-align: left;
}
.who-button:hover { background: var(--bg); }
.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint); color: var(--dps-orange-dark);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xs);
}
.who-text { display: grid; max-width: 14rem; }
.who-email { font-size: var(--text-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: var(--text-2xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { padding: var(--space-8) var(--space-6) var(--space-16); }

/* A module on screen: the page stops scrolling and the frame takes the rest. */
body.frame-mode { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.frame-mode #root { flex: none; }
body.frame-mode .shell { min-height: 0; display: block; }
body.frame-mode .topbar { position: relative; }
#frames { flex: 1; min-height: 0; position: relative; }
#frames[hidden] { display: none; }
.module-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--panel); }
.module-frame[hidden] { display: none; }
.frame-alerts { padding: var(--space-3) var(--space-6) 0; background: var(--bg); }
.frame-alerts .alert { margin-bottom: var(--space-3); }

/* Phone width: the tabs become a menu, the person shrinks to a badge. */
@media (max-width: 760px) {
  .topbar { padding: 0 var(--space-4); gap: var(--space-3); height: 56px; }
  .brand { max-width: none; flex: 1; }
  .brand-sub { display: none; }
  .tabs-nav { flex: none; }
  .tabs { display: none; }
  .tabs-menu { display: block; }
  .tabs-menu .menu-panel { left: auto; right: 0; position: fixed; top: 56px; right: var(--space-4); left: var(--space-4); }
  .who { padding-left: var(--space-2); border-left: 0; }
  .who-text { display: none; }
  .who .menu-panel { position: fixed; top: 56px; right: var(--space-4); left: var(--space-4); }
  .subnav { padding: var(--space-2) var(--space-4); }
  main { padding: var(--space-6) var(--space-4) var(--space-12); }
}

.container { max-width: var(--container-max); margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head h2 { font-size: var(--text-h2); }
.page-head p { margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--text-sm); max-width: 60ch; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel + .panel { margin-top: var(--space-6); }
.panel-head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.panel-head h3 { font-size: var(--text-h3); }
.panel-body { padding: var(--space-6); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th {
  font-family: var(--font-heading);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--bg);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfbf9; }
.mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: var(--text-xs); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  font-family: var(--font-heading);
  letter-spacing: .04em;
  white-space: nowrap;
}
.pill-ok    { background: var(--status-green-soft); color: var(--dps-green-dark); }
.pill-deny  { background: var(--status-red-soft);   color: #7a0210; }
.pill-warn  { background: var(--status-yellow-soft); color: #8a5a00; }
.pill-quiet { background: var(--bg); color: var(--ink-3); border: 1px solid var(--border-soft); }
.pill-brand { background: var(--color-primary-tint); color: var(--dps-orange-dark); }

.perm-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.grid-2 { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.checks { display: grid; gap: var(--space-2); max-height: 18rem; overflow-y: auto; padding-right: var(--space-2); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.check:hover { background: var(--bg); }
.check input { width: auto; flex: none; margin-top: 3px; accent-color: var(--dps-orange); }
.check-label { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.check-desc { font-size: var(--text-xs); color: var(--ink-3); }

.empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--ink-3); }
.empty p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filters .field { margin: 0; min-width: 9rem; }

.muted { color: var(--ink-3); font-size: var(--text-sm); }
.stack { display: grid; gap: var(--space-6); }

.retention-note {
  font-size: var(--text-xs);
  color: var(--ink-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
}

/* ── Platform dashboard ───────────────────────────────────────────────── */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(6, 1fr); } }

.stat {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.stat-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
/* Semantic, and separate from the brand accent — a number is not "on brand"
   or "off brand", it is fine or it is not. Green stays reserved for positive
   status exactly as the guideline requires. */
.stat-value.good { color: var(--dps-green-dark); }
.stat-value.warn { color: #8a5a00; }
.stat-value.bad  { color: var(--status-red); }
.stat-hint { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }

td.num, .num { font-variant-numeric: tabular-nums; }

/* ── Facts list ───────────────────────────────────────────────────────── */
.facts { display: grid; gap: var(--space-3) var(--space-6); margin: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: max-content 1fr; } }
.facts dt { align-self: center; }
.facts dd { margin: 0; font-size: var(--text-sm); }

/* ── Buttons that are really links ────────────────────────────────────── */
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--dps-orange-dark);
  font: inherit; text-align: left;
}
.link:hover { text-decoration: underline; }
.pill.link { color: var(--ink-3); }
.pill.link:hover { background: var(--color-primary-tint); color: var(--dps-orange-dark); text-decoration: none; }

/* Destructive actions. Red, not the brand orange: deactivating somebody is
   not a primary action and must not look like one. */
.btn-danger { background: var(--status-red); color: var(--dps-white); }
.btn-danger:hover:not(:disabled) { background: #a80216; }

.head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ── Pagination ───────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pager-buttons { display: flex; gap: var(--space-2); }

/* ── Reporting chain ──────────────────────────────────────────────────── */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.chain-node {
  padding: var(--space-1) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}
.chain-sep { color: var(--ink-4); }

/* ── Org chart ────────────────────────────────────────────────────────── */
/* Indented lists rather than a drawn graph: a school reporting line is a
   containment relationship, a <ul> already means that to a screen reader, and
   nothing here needs to be dragged. */
ul.org, ul.org ul { list-style: none; margin: 0; padding: 0; }
ul.org ul {
  margin-left: var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--border-soft);
}
ul.org li { margin: var(--space-1) 0; }
.org-node {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.org-node:hover { background: var(--bg); }
.org-name { font-weight: var(--fw-medium); font-size: var(--text-sm); }

/* ── A secret shown once ──────────────────────────────────────────────── */
/* A temporary password is hashed the moment it is made and can never be shown
   again, so it gets something that must be dismissed on purpose rather than a
   toast that the next render eats. */
.reveal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(35, 31, 32, .45);
  display: grid; place-items: center;
  padding: var(--space-6);
}
.reveal {
  background: var(--panel);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  max-width: 32rem; width: 100%;
}
.reveal h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.secret {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: .02em;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  user-select: all;
}
.reveal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ── School switcher ──────────────────────────────────────────────────── */
.who-switch {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  max-width: 14rem;
}