:root {
  --brand: #0362B2;
  --brand-dark: #024a87;
  --brand-tint: #e8f1fa;
  --ink: #16232f;
  --muted: #5b6b7b;
  --bg: #f5f8fb;
  --card: #ffffff;
  --border: #e2eaf2;
  --shadow-soft: 0 1px 2px rgba(16, 42, 67, .06), 0 8px 24px rgba(16, 42, 67, .08);
  --shadow-lift: 0 2px 4px rgba(3, 98, 178, .08), 0 14px 34px rgba(3, 98, 178, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 90% -10%, var(--brand-tint), transparent),
    radial-gradient(900px 500px at -10% 110%, var(--brand-tint), transparent),
    var(--bg);
  min-height: 100vh;
}

/* ── Top bar ─────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 14px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand img { height: 40px; display: block; }

.user {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 14.5px;
}

/* Top-bar action icon (e.g. Contact support) — a circle beside the avatar. */
.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-tint);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.topbar-icon svg { width: 19px; height: 19px; display: block; }
.topbar-icon:hover { background: var(--brand); color: #fff; }
.topbar-icon:focus-visible { outline: 3px solid rgba(3, 98, 178, .35); outline-offset: 2px; }

/* ── Impersonation banner ────────────────────────────── */

/* Sits above the (sticky) top bar and stays visible, because it is the only
   thing telling an admin that the perfectly ordinary-looking portal in front
   of them is a student's — and the only way back out. Amber, not brand blue:
   nothing else in the portal chrome is this colour, so it never reads as part
   of the page the admin is inspecting. */
.impersonation-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 10px 20px;
  background: #4a3410;
  color: #fdf3e0;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}
.impersonation-bar strong { color: #ffd487; font-weight: 600; }
.impersonation-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5b53d;
  flex: none;
}
.impersonation-bar form { margin: 0; }
.impersonation-bar button,
.impersonation-bar a {
  font: inherit;
  font-weight: 600;
  color: #4a3410;
  background: #f5b53d;
  border: 0;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.impersonation-bar button:hover,
.impersonation-bar a:hover { background: #ffd487; }
.impersonation-bar button:focus-visible,
.impersonation-bar a:focus-visible { outline: 3px solid #ffd487; outline-offset: 2px; }

/* The top bar is sticky too. Rather than offset it by a banner height that
   changes as the text wraps, hand the pinned slot to the banner and let the
   bar scroll normally — the banner is the one that has to stay reachable. */
.impersonation-bar ~ .topbar { position: static; }

/* ── Layout ──────────────────────────────────────────── */

.container {
  max-width: 1000px;
  margin: 56px auto;
  padding: 0 24px;
}

.container.narrow {
  max-width: 440px;
  margin-top: 9vh;
  text-align: center;
}

h1 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 40px;
}

/* ── App tiles ───────────────────────────────────────── */

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.tile {
  /* Fixed card width — cards never stretch to fill the row; extra space just
     stays empty (2 cards look the same as 3, not blown up). Shrinks on mobile. */
  flex: 0 1 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand);
}

.tile:focus-visible {
  outline: 3px solid rgba(3, 98, 178, .35);
  outline-offset: 2px;
}

.tile-disabled { opacity: .5; pointer-events: none; }

.tile-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: 14px;
  margin-bottom: 16px;
}
.tile-icon svg { width: 26px; height: 26px; display: block; }

.tile-name { font-weight: 650; font-size: 17px; margin-bottom: 4px; }

.tile-desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.tile-cta {
  display: inline-block;
  margin-top: 14px;
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 600;
}

/* ── Cards (auth pages) ──────────────────────────────── */

.auth-logo { height: 48px; margin-bottom: 26px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.container.narrow .card h1 { font-size: 22px; }

.card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ── Forms ───────────────────────────────────────────── */

label {
  display: block;
  margin: 18px 0 6px;
  font-weight: 600;
  font-size: 13.5px;
}

input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: #fbfdfe;
  transition: border-color .15s, box-shadow .15s;
}

input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(3, 98, 178, .18);
  background: #fff;
}

/* ── Buttons ─────────────────────────────────────────── */

.btn {
  display: inline-block;
  margin-top: 24px;
  padding: 11px 24px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .05s;
}

.btn:hover { background: var(--brand-dark); }
.btn:active { transform: scale(.99); }

/* A row of buttons (e.g. Sign out + Cancel) sharing one baseline + height. */
.btn-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.btn-row .btn { margin-top: 0; }
.btn-row .btn-outline { padding: 11px 24px; }

.btn-outline {
  margin: 0;
  padding: 8px 18px;
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.btn-outline:hover { background: var(--brand); color: #fff; }

/* ── Password show/hide toggle (assets/portal.js) ────── */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: var(--muted);
}

.pw-toggle svg { display: block; }
.pw-toggle:hover, .pw-toggle:active { background: none; transform: translateY(-50%); color: var(--brand); }

/* ── Alerts ──────────────────────────────────────────── */

.error {
  background: #fdf0f0;
  border: 1px solid #f2c4c4;
  color: #8d2f2f;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
}

/* ── Admin area ──────────────────────────────────────── */

.admin-body { background: var(--bg); }

.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-head { padding: 24px 22px 16px; }
.sidebar-logo { height: 42px; display: block; }
.sidebar-sub { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

.sidebar-nav {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.sidebar-nav a:hover { background: var(--brand-tint); }
.sidebar-nav a.active { background: var(--brand); color: #fff; }
.sidebar-nav .ico { font-size: 15px; width: 20px; text-align: center; }

.sidebar-foot {
  margin: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.sidebar-foot img { height: 26px; }
.sidebar-foot b { display: block; color: var(--ink); font-size: 13px; }

.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.admin-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 32px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.admin-top-title { font-weight: 650; color: var(--brand-dark); font-size: 15px; }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: .02em;
}

.avatar:hover { background: var(--brand-dark); }

/* Avatar dropdown (top bar) — must out-rank the base details.menu summary rules */
details.avatar-menu > summary.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-size: 13.5px;
}

details.avatar-menu > summary.avatar:hover,
details.avatar-menu[open] > summary.avatar { background: var(--brand-dark); color: #fff; }

details.avatar-menu .menu-body { top: 46px; right: 0; left: auto; min-width: 160px; }

.admin-content { padding: 28px 32px 36px; flex: 1; }

.admin-footer {
  padding: 16px 32px;
  color: var(--muted);
  font-size: 12.5px;
  border-top: 1px solid var(--border);
  text-align: center;
  background: var(--card);
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.page-head h1 { font-size: 26px; margin: 0; }
.page-head .sub { color: var(--brand); font-size: 13.5px; margin-top: 5px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page-actions .btn { margin-top: 0; }

.filters {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 14px 0 20px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.filters label { display: inline; margin: 0; font-weight: 600; }

.filters select {
  width: auto;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--card);
}

.badge-outline { background: var(--card); border: 1px solid var(--brand); color: var(--brand); }

.badge-dot::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1e9e57;
  margin-right: 6px;
}

.info-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--brand-tint);
  border: 1px solid #cfe3f5;
  color: var(--brand-dark);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 22px;
}

.pager-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13.5px;
  flex-wrap: wrap;
  gap: 10px;
}

.pager-btns { display: flex; gap: 6px; }

.pager-btns a, .pager-btns span {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}

.pager-btns span.current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.pager-btns .disabled { opacity: .45; pointer-events: none; }

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-foot { display: none; }
  .admin-content { padding: 20px 16px; }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}

/* Icon chip */
.stat-ico {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--brand-tint);
  color: var(--brand);
}
.stat-ico svg { width: 22px; height: 22px; display: block; }

/* Per-metric icon colors (chip tint + accent) */
.stat-ico.c-blue   { color: #0362b2; background: #e8f1fa; }
.stat-ico.c-green  { color: #178a4e; background: #e4f6ec; }
.stat-ico.c-red    { color: #d24747; background: #fdeaea; }
.stat-ico.c-gold   { color: #b9820a; background: #fbf1d6; }
.stat-ico.c-purple { color: #7a54d1; background: #efe9fb; }
.stat-ico.c-indigo { color: #4c57cc; background: #e9ebfb; }
.stat-ico.c-teal   { color: #0e9384; background: #dff5f2; }
.stat-ico.c-pink   { color: #cf3d76; background: #fce9f1; }
.stat-ico.c-gray   { color: #667085; background: #eef1f4; }

.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-body b {
  font-size: 27px;
  line-height: 1.05;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -.01em;
}
.stat-body span { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* Dashboard section headings */
.stats-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  margin: 26px 0 13px;
}

/* Clickable cards */
a.stat.stat-link {
  text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
a.stat.stat-link:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  border-color: #cfe0f2;
}

/* Whole-card highlight states (matches the mockup: red = action, blue = info) */
.stat.stat-alert { border-color: #f2caca; background: #fdf3f3; }
.stat.stat-alert .stat-body b { color: #c0392b; }
.stat.stat-info { border-color: #cfe0f2; background: #eef4fc; }

/* Dashboard hero banner (assets/dashboard-banner.jpg) */
.dash-banner {
  margin-top: 30px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(3, 42, 78, .92) 0%, rgba(4, 58, 104, .62) 52%, rgba(4, 64, 116, .18) 100%),
    url('dashboard-banner.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
}
.dash-banner-body { position: relative; padding: 32px 40px; color: #fff; max-width: 640px; }
.dash-banner-body h2 { color: #fff; font-size: 22px; margin: 0 0 8px; letter-spacing: -.01em; }
.dash-banner-body p { color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 560px) {
  .dash-banner-body { padding: 24px 22px; }
}

.search-row { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; }
.search-row input { max-width: 320px; }
.search-row .btn { margin-top: 0; }
.search-row .spacer { flex: 1; }

/* A wide table scrolls INSIDE its own box — the page itself never scrolls
   sideways. The kebab dropdowns would be clipped by this, so portal.js lifts an
   open row menu to position:fixed (see "Row menus inside a scrolling table"). */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

/* Shortened cell text (admin_short_name) — the full value is in the title */
.trunc { cursor: help; }

table.data input[type=checkbox], #select-all { width: 16px; height: 16px; }

.th-select { white-space: nowrap; width: 78px; }
.th-select .menu { vertical-align: middle; margin-left: 4px; }
.th-select .menu.is-hidden { visibility: hidden; } /* keeps its space — table never reflows */

.th-select .menu > summary {
  width: 28px;
  height: 28px;
  font-size: 19px;
  color: var(--brand);
  background: var(--brand-tint);
}

.th-select .menu > summary:hover { background: var(--brand); color: #fff; }
.th-select .menu-body { left: 0; right: auto; }

details.menu { position: relative; display: inline-block; }
details.menu[hidden] { display: none; }

details.menu > summary {
  list-style: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--muted);
  user-select: none;
}

details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { background: var(--brand-tint); color: var(--brand-dark); }

.menu-body {
  position: absolute;
  right: 0;
  top: 34px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  min-width: 150px;
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.menu-body form { margin: 0; display: block; }

.menu-body a, .menu-body button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.menu-body a:hover, .menu-body button:hover { background: var(--brand-tint); }
.menu-body .danger { color: #a33; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }

table.data th, table.data td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.data th {
  background: var(--brand-tint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--brand-dark);
}

table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: #f7fafd; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.badge-admin { background: var(--brand); color: #fff; }
.badge-super { background: #4c1d95; color: #fff; }
.badge-muted { background: #eef1f4; color: var(--muted); }
.badge-danger { background: #fdecec; color: #a33; }

.pager { display: flex; gap: 12px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 14px; }

td.actions { white-space: nowrap; }
td.actions a { margin-right: 10px; }
td.actions form { display: inline; margin: 0 0 0 10px; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}

.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: #a33; }

select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: #fbfdfe;
}

select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(3, 98, 178, .18); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }

/* Centered single-form pages (new/edit user, profile) */
.form-page { max-width: 760px; margin: 0 auto; }
.form-page h1 { font-size: 26px; margin: 0 0 6px; }
.form-page .form-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.form-page .card { padding: 34px 36px; }

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

.form-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.form-foot .btn { margin-top: 0; }

.divider { border: none; border-top: 1px solid var(--border); margin: 26px 0; }

.meta-line { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

.btn-danger { color: #a33; border-color: #a33; }
.btn-danger:hover { background: #a33; border-color: #a33; color: #fff; }

.result-ok {
  background: #eefaf0;
  border: 1px solid #bfe5c8;
  color: #22633a;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}

.result-errors { margin: 10px 0 0 18px; padding: 0; color: #8d2f2f; font-size: 13px; }

code { background: var(--brand-tint); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }

.hint { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.55; }

@media (max-width: 560px) {
  .topbar { padding: 12px 18px; }
  .user span { display: none; }
  .container { margin-top: 32px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Product-register refinements (impeccable review) ── */

h1, h2, h3 { text-wrap: balance; }

/* Placeholders must meet the same 4.5:1 as body text — the browser default
   gray is borderline on our tinted input background. */
input::placeholder { color: var(--muted); opacity: 1; }

/* Disabled = the state portal.js puts buttons in while a form submits */
.btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled:hover { background: var(--brand); }
.btn-outline:disabled:hover { background: transparent; color: var(--brand); }

.link-btn:disabled,
.menu-body button:disabled {
  opacity: .6;
  cursor: not-allowed;
  text-decoration: none;
}

/* ── Accessibility (ui-ux-pro-max review) ────────────── */

/* Visible keyboard focus on every interactive element. Text inputs/selects
   already show a border + ring via :focus, so they're covered separately. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(3, 98, 178, .35);
  outline-offset: 2px;
}

/* Comfortable touch targets on small screens (44px guideline) */
@media (max-width: 860px) {
  details.menu > summary { width: 44px; height: 44px; }
  .th-select .menu > summary { width: 40px; height: 40px; }
  .menu-body a, .menu-body button { padding: 12px 14px; }
  .pager-btns a, .pager-btns span { padding: 10px 16px; }
  table.data input[type=checkbox], #select-all { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .tile:hover { transform: none; }
}

/* ── Enrollments admin: tabs, cohort app toggles ─────── */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 6px 0 22px;
}
.tab {
  padding: 11px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab .badge { margin-left: 4px; }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.app-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  white-space: nowrap;
  margin: 3px 0;
  cursor: pointer;
}
.app-check input { width: 16px; height: 16px; margin: 0; }

.btn-sm { margin-top: 0; padding: 7px 14px; font-size: 13px; }

.result-warn {
  background: #fff6e8;
  border: 1px solid #f2d9a8;
  color: #8a5a12;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}

.hidden-form { display: none; }
.missing { color: #a33; font-style: italic; }
.small { font-size: 12.5px; }

/* Needs-review: the per-row "assign to cohort" form */
.resolve-form { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.resolve-form .inline-select { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.resolve-new { display: flex; gap: 6px; }
.resolve-new input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fbfdfe;
}
.resolve-form .btn-sm { align-self: flex-start; }

/* ── Student home: cohort switcher + notice ──────────── */

.cohort-switch { display: flex; align-items: center; gap: 10px; margin: 4px 0 24px; }
.cohort-switch label { font-size: 15px; color: var(--muted); font-weight: 400; }
.cohort-switch select { width: auto; min-width: 230px; }
.cohort-single { color: var(--muted); font-size: 18px; margin: 4px 0 24px; }
.notice-card { max-width: 640px; }
.notice-card h2 { margin: 0 0 8px; font-size: 20px; }
.tiles-empty { flex-basis: 100%; }

/* Student profile: read-only account details as label/value rows */
.profile-info { margin: 0 0 14px; }
.profile-info > div {
  display: flex;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.profile-info > div:first-child { border-top: 1px solid var(--border); }
.profile-info dt {
  flex: 0 0 120px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.profile-info dd { margin: 0; font-size: 14.5px; color: var(--ink); word-break: break-word; }

/* Student home: wide content, aligned with the top bar (same width + gutter) */
.home-main { max-width: 1300px; margin: 0 auto; padding: 36px 36px 20px; }

/* Student home: decorative banner (same image as the dashboard, black & white) */
.home-banner {
  margin-top: 40px;
  min-height: 230px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background-image:
    linear-gradient(rgba(17, 23, 28, 0.3), rgba(245, 248, 251, .42)),
    url('dashboard-banner.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  margin-left: 20px;
  margin-right: 20px;

}

/* Student home: sticky-footer layout — the footer sits at the bottom of the
   viewport when the page is short, but is pushed BELOW the cards when the page
   is tall (so it never overlaps them). Scoped to the home page's body. */
.home-body { display: flex; flex-direction: column; min-height: 100vh; }
/* width:100% so the main column fills to its max-width (1300, centered) like the
   top bar — without it, as a flex item it shrinks to the cards' width and the
   content stops lining up with the logo/avatar. */
.home-body .home-main { flex: 1 0 auto; width: 100%; }

/* Student home: footer bar (full width, aligned) */
.home-footer {
  flex-shrink: 0;
  margin-top: 0;
  border-top: 1px solid var(--border);
  background: var(--card);
  width: 100%;
}
.home-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 18px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.home-footer-brand { display: flex; align-items: center; gap: 12px; }
.home-footer-brand img { height: 26px; display: block; }
.home-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.home-footer-links a { color: var(--muted); text-decoration: none; }
.home-footer-links a:hover { color: var(--brand); }

/* Cohorts tab: Save + View users + Check capabilities side by side */
.cohort-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap; }
/* Users list: cohort filter banner */
.info-banner.cohort-filter { align-items: flex-start; }
/* Student-cohorts page: assign form */
.assign-form { display: flex; gap: 10px; align-items: center; max-width: 520px; margin-top: 6px; }
.assign-form select { width: auto; flex: 1; }
.assign-form .btn { margin-top: 0; }
/* Multi-select variant: picker beside the button, aligned to its top */
.assign-form-multi { align-items: flex-start; }
.assign-form-multi .cohort-picker { flex: 1; }

/* Users list: bulk menu with the assign-to-cohorts panel */
.bulk-menu-body { min-width: 280px; }
.bulk-sep { border-top: 1px solid var(--border); margin: 6px 4px; }
.bulk-assign { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; }
.bulk-assign-label {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
}
.bulk-assign button { text-align: left; }

/* Searchable checkbox picker for cohorts (admin_cohort_picker + portal.js) */
.cohort-picker { display: flex; flex-direction: column; gap: 8px; }
.cohort-picker-search {
  width: 100%;
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 8px;
}
.cohort-picker-list {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfdfe;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cohort-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.cohort-pick:hover { background: var(--brand-tint); }
.cohort-pick input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}
.cohort-pick:has(input:checked) { background: var(--brand-tint); font-weight: 600; color: var(--brand-dark); }
.cohort-picker-empty { font-size: 12.5px; color: var(--muted); font-style: italic; padding: 0 4px; }
.cohort-picker-count { font-size: 12.5px; color: var(--brand-dark); font-weight: 600; }
.cohort-picker-count:empty { display: none; }
.card + .card { margin-top: 20px; }

/* Admin user page: one row per registered device (device binding) */
.device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.device-row:last-of-type { border-bottom: none; }
.device-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-tint);
  color: var(--brand);
}
.device-ico svg { width: 18px; height: 18px; display: block; }
/* Inline variant for table cells (User devices page) */
.device-ico-cell { display: inline-grid; vertical-align: middle; margin-right: 9px; width: 28px; height: 28px; }
.device-ico-cell svg { width: 15px; height: 15px; }
.device-body { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.device-meta { color: var(--muted); font-size: 12.5px; }
.device-row form { margin: 0; }

/* ── Capabilities page: one card per app, ✓/✗ + reasons ──────────────── */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cap-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  border-left: 4px solid var(--border);
}
/* Left accent by outcome */
.cap-card.cap-ok { border-left-color: #178a4e; }
.cap-card.cap-blocked { border-left-color: #d24747; }
.cap-card.cap-unknown, .cap-card.cap-error { border-left-color: #b9820a; }

.cap-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.cap-title { font-weight: 650; font-size: 15.5px; }
.cap-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.cap-badge {
  margin-left: auto;
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.cap-badge-ok { background: #e4f6ec; color: #178a4e; }
.cap-badge-no { background: #fdeaea; color: #c0392b; }
.cap-badge-un { background: #fbf1d6; color: #96690a; }

.cap-reasons {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cap-reason {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* One-click remedy footer under a blocked card (e.g. "Create Moodle account") */
.cap-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
}
.cap-action form { margin: 0; }
.cap-action .btn { margin-top: 0; white-space: nowrap; }
.cap-action-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Per-check icon chip */
.cap-ci {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.cap-ci svg { width: 13px; height: 13px; display: block; }
.cap-ci.ci-ok { color: #178a4e; background: #e4f6ec; }
.cap-ci.ci-no { color: #d24747; background: #fdeaea; }
.cap-ci.ci-un { color: #96690a; background: #fbf1d6; }

/* ── Cohort capabilities: students × platforms grid ──────────────────── */

/* Per-platform totals for the current page, above the grid */
.cap-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 14px;
}
.cap-tally-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
}
.cap-tally-name { font-weight: 650; font-size: 13px; margin-bottom: 6px; }
.cap-tally-counts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Status chip — the grid cell, and the tally counts */
.cap-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}
.cap-chip-ok { background: #e4f6ec; color: #178a4e; }
/* Amber = an admin can fix it right here; red = something else is wrong */
.cap-chip-missing { background: #fbf1d6; color: #96690a; }
.cap-chip-no { background: #fdeaea; color: #c0392b; }
.cap-chip-un { background: #eef1f4; color: #5b6b7a; }
.cap-chip-none {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  font-weight: 600;
}

.cap-matrix td { vertical-align: middle; }
.cap-matrix .badge { margin-left: 6px; }

/* Bulk provisioning bar: platform picker + the two actions */
.cap-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.cap-bulk-label { font-size: 13.5px; font-weight: 600; }
.cap-bulk select {
  padding: 8px 10px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdfe;
}
.cap-bulk .btn { margin-top: 0; }
.cap-bulk-hint { color: var(--muted); font-size: 12px; flex: 1 1 220px; line-height: 1.4; }

/* ── Import page: two-column layout, option cards, dropzone, guidelines ── */

.btn-ico { display: inline-flex; align-items: center; gap: 8px; }
.btn-ico svg { display: block; }

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .import-layout { grid-template-columns: 1fr; } }

.import-card { padding: 26px 28px; }

.import-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
}

/* Selectable "what are you importing?" cards */
.import-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .import-options { grid-template-columns: 1fr; } }

.import-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.import-option:hover { border-color: #cfe0f2; }
.import-option input {
  width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  accent-color: var(--brand); cursor: pointer;
}
.import-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.import-option-body { display: flex; flex-direction: column; gap: 3px; }
.import-option-title { font-weight: 650; font-size: 15px; }
.import-option-desc { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Drag-and-drop upload zone */
.import-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 40px 20px;
  cursor: pointer;
  background: #fbfdfe;
  transition: border-color .15s, background .15s;
}
.import-drop:hover { border-color: #cfe0f2; }
.import-drop.dragover { border-color: var(--brand); background: var(--brand-tint); }
/* The file input stays in the DOM (so `required` validates) but is invisible;
   clicking the label opens the picker via the implicit label→input association. */
.import-file-input {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.import-drop-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 6px;
}
.import-drop-icon svg { width: 22px; height: 22px; }
.import-drop-main { font-weight: 600; font-size: 14.5px; color: var(--ink); word-break: break-all; }
.import-drop-main.has-file { color: var(--brand); }
.import-drop-sub { color: var(--muted); font-size: 12.5px; }

.import-check {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 0;
  font-size: 13.5px; cursor: pointer;
}
.import-check input { width: 17px; height: 17px; flex: none; accent-color: var(--brand); cursor: pointer; }

.import-foot { display: flex; justify-content: flex-end; }
.import-foot .btn { margin-top: 0; }

/* Technical-guidelines sidebar */
.import-guide {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 20px 22px;
  font-size: 13.5px;
}
.import-guide-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 12px; color: var(--muted); margin-bottom: 16px;
}
.import-guide-sec { font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 18px 0 9px; }
.import-guide-p { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.import-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.import-chips code, .import-field-row code {
  background: var(--brand-tint); color: var(--brand-dark);
  padding: 3px 8px; border-radius: 6px; font-size: 12px; font-family: monospace;
}
.import-field-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.import-field-note { color: var(--muted); font-size: 12px; font-style: italic; }
.import-opt {
  color: #9aa4b2; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.import-policy {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: #fdf3f3; border: 1px solid #f2caca; color: #9a3b3b;
  font-size: 12.5px; line-height: 1.55;
}
.import-policy strong { color: #c0392b; }
.import-policy-warn { margin-top: 12px; background: #fff6e8; border-color: #f2d9a8; color: #8a5a12; }
.import-policy-warn strong { color: #8a5a12; }
.import-guide-link {
  display: inline-block; margin-top: 16px;
  color: var(--brand); font-weight: 600; font-size: 13px; text-decoration: none;
}
.import-guide-link:hover { text-decoration: underline; }

/* ── SEB settings: sectioned cards ───────────────────── */

.seb-sub { display: inline-flex; align-items: center; gap: 6px; }
.seb-sub svg { width: 15px; height: 15px; }

.seb-form { display: flex; flex-direction: column; gap: 18px; }

/* position/z-index:0 makes each card its own stacking context so the Android
   watermark (z-index:-1) stays inside it and behind the content. */
.seb-section { padding: 24px 26px; position: relative; z-index: 0; overflow: hidden; }

.seb-section-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.seb-section-head h2 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.seb-section-ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--brand-tint);
  color: var(--brand);
}
.seb-section-ico svg { width: 19px; height: 19px; display: block; }

.seb-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: monospace;
  font-size: 13px;
  background: #fbfdfe;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.seb-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(3, 98, 178, .18);
  background: #fff;
}

/* Tip box (lightbulb) */
.seb-tip {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--brand-tint);
  border: 1px solid #cfe3f5;
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 14px;
  font-size: 13px; line-height: 1.55;
  color: var(--brand-dark);
}
.seb-tip-ico { flex: none; color: var(--brand); margin-top: 1px; }
.seb-tip-ico svg { width: 17px; height: 17px; display: block; }

/* Inline chip next to a label (e.g. "X-Requested-With") */
.seb-chip {
  display: inline-block; margin-left: 6px;
  background: var(--brand-tint); color: var(--brand-dark);
  padding: 2px 9px; border-radius: 999px;
  font-family: monospace; font-size: 11px; font-weight: 600;
  vertical-align: middle;
}

/* Android section watermark (faint robot in the corner, behind the content) */
.seb-android-mark {
  position: absolute; right: -14px; bottom: -26px; z-index: -1;
  color: var(--border); opacity: .55; pointer-events: none;
}
.seb-android-mark svg { width: 150px; height: 150px; display: block; }

/* Footer: audit note + Cancel/Save */
.seb-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.seb-foot-note { color: var(--muted); font-size: 13px; font-style: italic; }
.seb-foot-actions { display: flex; gap: 10px; }
.seb-foot-actions .btn { margin-top: 0; }

/* Config files for students: one upload slot per platform */
.seb-files-intro { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: -4px 0 16px; }
.seb-files-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .seb-files-grid { grid-template-columns: 1fr; } }
.seb-file-slot {
  border: 1px solid var(--border); border-radius: 12px; background: #fafcff;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.seb-file-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.seb-file-app { font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.seb-file-meta { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.seb-file-meta a { color: var(--brand); font-weight: 600; text-decoration: none; word-break: break-all; }
.seb-file-meta a:hover { text-decoration: underline; }
.seb-file-none { font-style: italic; }
.seb-file-orig { word-break: break-all; }
.seb-file-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.seb-file-pick { cursor: pointer; }
.seb-file-pick input[type="file"] { display: none; }
.seb-file-picked { font-size: 12.5px; color: var(--brand); font-weight: 600; word-break: break-all; }
.seb-file-picked:empty { display: none; }

/* ── Student help & FAQ page ─────────────────────────── */

.faq-page { max-width: 860px; margin: 0 auto; }
.faq-page h1 { font-size: 28px; margin: 0 0 6px; }
.faq-intro { color: var(--muted); font-size: 15px; margin: 0 0 6px; }

.faq-section { margin-top: 34px; }
.faq-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.faq-section-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-tint);
  color: var(--brand);
}
.faq-section-ico svg { width: 18px; height: 18px; display: block; }

/* One question = one <details> card; native disclosure, no JS needed. */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 16px 48px 16px 20px;
  font-weight: 600;
  font-size: 15px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--brand-dark); }
/* Chevron that flips when the item is open */
.faq-item > summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s;
}
.faq-item[open] > summary { color: var(--brand-dark); }
.faq-item[open] > summary::after { transform: translateY(-30%) rotate(225deg); }

.faq-body { padding: 0 20px 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { color: var(--brand); font-weight: 600; }
.faq-body .file {
  font-family: monospace;
  font-size: 13px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Numbered how-to steps inside an answer */
.faq-steps {
  list-style: none;
  counter-reset: step;
  margin: 8px 0 12px;
  padding: 0;
}
.faq-steps li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 9px;
  counter-increment: step;
}
.faq-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
}

/* "Which app for my device?" grid — one small card per platform */
.faq-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 8px 0 12px;
}
.faq-platform {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fbfdfe;
}
.faq-platform b { display: block; font-size: 14px; color: var(--ink); }
.faq-platform .faq-app {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* "Still stuck?" contact card at the bottom */
.faq-contact {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.faq-contact-body h2 { margin: 0 0 4px; font-size: 18px; }
.faq-contact-body p { margin: 0; }
.faq-contact .btn { margin-top: 0; flex: none; }

/* ── Styled confirm dialog (forms with data-confirm-modal, portal.js) ── */

dialog.confirm-modal {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 24px 26px;
  max-width: 430px;
  width: calc(100% - 40px);
}
dialog.confirm-modal::backdrop { background: rgba(16, 35, 47, .45); }
.confirm-modal-msg { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-modal-actions .btn { margin-top: 0; }

/* ── Setup-video modal (how-to.php "Watch setup video", portal.js) ── */

.howto-video-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--brand-tint);
}
.howto-video-cta b { display: block; font-size: 14.5px; color: var(--ink); }
.howto-video-cta span { font-size: 13.5px; color: var(--muted); }
.howto-video-cta .btn { margin-top: 0; flex: none; }

dialog.video-modal {
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(880px, calc(100% - 32px));
  max-width: 880px;
  background: #0d1620;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
dialog.video-modal::backdrop { background: rgba(9, 20, 30, .72); }
.video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px 12px 18px;
}
.video-modal-title { color: #fff; font-size: 14.5px; font-weight: 600; }
.video-modal-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfd9e4;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.video-modal-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.video-modal-player {
  display: block;
  width: 100%;
  max-height: 78vh;
  background: #000;
}

/* ── "How to use the Portal" public onboarding guide ── */

/* Full-width layout, aligned with the top bar (same max width + gutters) */
.howto-main { max-width: 1300px; margin: 0 auto; padding: 40px 36px 64px; }
.howto-main h1 { font-size: 30px; margin: 0 0 6px; }
.howto-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 24px; }

/* OS switcher pills */
.howto-os { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.howto-os a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.howto-os a:hover { border-color: var(--brand); color: var(--brand); }
.howto-os a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Section nav on the LEFT, content on the right (sidebar collapses on mobile) */
.howto-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 24px;
}
.howto-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 20px;
}
.howto-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}
.howto-nav a:hover { background: var(--brand-tint); }
.howto-nav a.active { background: var(--brand); color: #fff; }
.howto-nav-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 12.5px;
  font-weight: 700;
}
.howto-nav a.active .howto-nav-num { background: rgba(255, 255, 255, .22); color: #fff; }
.howto-content .howto-steps { margin-top: 4px; }

@media (max-width: 860px) {
  .howto-layout { grid-template-columns: 1fr; gap: 18px; }
  .howto-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .howto-nav a { flex: 1 1 auto; border: 1px solid var(--border); }
  .howto-nav a.active { border-color: var(--brand); }
}

/* Numbered steps with a connecting spine */
.howto-steps { margin-top: 22px; }
.howto-step { position: relative; padding: 0 0 36px 62px; }
.howto-step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}
.howto-step:last-child { padding-bottom: 8px; }
.howto-step:last-child::before { display: none; }
.howto-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px var(--brand-tint);
}
.howto-step h2 { font-size: 20px; margin: 8px 0; letter-spacing: -.01em; }
.howto-step p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 10px; max-width: 780px; }
.howto-step p a { color: var(--brand); font-weight: 600; }
.howto-step .btn { margin: 4px 0 6px; }
.howto-main .file {
  font-family: monospace;
  font-size: 13px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Framed screenshot */
.howto-shot {
  margin: 14px 0 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.howto-shot img { display: block; width: 100%; height: auto; }

/* Tall phone captures (Android/iOS) stay phone-sized instead of full width */
.howto-shot-phone { max-width: 340px; }
.howto-shot-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }

/* Password to copy (quit password, old settings password) — one click selects it */
.howto-pass {
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1.5px dashed var(--brand);
  border-radius: 9px;
  padding: 8px 18px;
  user-select: all;
}

.howto-soon { max-width: 640px; margin-top: 22px; }
.howto-soon h2 { margin: 0 0 8px; font-size: 20px; }
.howto-foot { margin-top: 30px; color: var(--muted); font-size: 13.5px; }
.howto-foot a { color: var(--brand); font-weight: 600; }

@media (max-width: 560px) {
  .howto-main { padding: 28px 18px 48px; }
  .howto-step { padding-left: 50px; }
  .howto-step-num { width: 34px; height: 34px; font-size: 14px; }
  .howto-step::before { left: 16px; top: 40px; }
}

/* ── Import review (admin/import.php step 2) ─────────── */

/* The dry-run table before anything is written: one editable, tickable row per
   entry. Wider and denser than the read-only .data tables — cells hold inputs,
   the header sticks while scrolling the batch, and the action bar sticks to the
   bottom so the running count is always in view. */

.review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 26px;
  border-radius: 16px;
}
.review-title { margin: 0 0 6px; font-size: 19px; }
.review-sub { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 720px; }

.review-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.review-stat {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.review-stat b { color: var(--ink); font-size: 14px; margin-right: 3px; }
.review-stat.is-bad { border-color: #f0c4c4; background: #fdf3f3; color: #a33; }
.review-stat.is-bad b { color: #a33; }

.review-banner { margin-top: 14px; background: #fff6e8; border-color: #f2d9a8; color: #8a5a12; }
.review-ignored { color: var(--muted); margin: 12px 0 0; }

.review-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.review-filter {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.review-filter:hover { border-color: #cfe0f2; color: var(--ink); }
.review-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.review-filter-n { opacity: .75; margin-left: 3px; font-weight: 500; }

.review-wrap {
  max-height: 60vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.review-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.review-table th, .review-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.review-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--brand-tint);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--brand-dark);
  white-space: nowrap;
}
.review-table tr:last-child td { border-bottom: none; }
.review-table input[type=checkbox] { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--brand); cursor: pointer; }

.review-pick { width: 40px; }
/* Scoped through the table so it beats the shared cell padding without !important */
.review-table td.review-line { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 12px; }
.review-status { white-space: nowrap; }
.review-status .badge { display: block; width: fit-content; margin-bottom: 4px; }
/* …but a display rule outranks the browser's [hidden], so say it again here:
   the "Edited" badge and the undo button only appear once a cell is changed. */
.review-status .badge[hidden], .review-reset[hidden] { display: none; }
.review-existing { font-size: 12px; color: var(--brand); font-weight: 600; text-decoration: none; }
.review-existing:hover { text-decoration: underline; }

.review-input {
  width: 100%;
  min-width: 132px;
  padding: 7px 9px;
  font-size: 13px;
  border-radius: 8px;
}

/* Discarded rows stay in place (and re-selectable) rather than disappearing —
   the count at the bottom is the record of what was dropped. */
.review-row.is-off { opacity: .5; }
.review-row.is-off .review-input { text-decoration: line-through; }
.review-row.is-edited > td { background: #fffdf4; }

.review-course { max-width: 260px; }
.review-course-label { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.review-note { max-width: 320px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.review-msg { display: block; }
.review-diff { display: block; }
.review-diff b { color: var(--ink); font-weight: 600; }
.review-from { text-decoration: line-through; }
.review-reset { margin-top: 5px; font-size: 12px; }

.badge-new { background: #eefaf0; color: #22633a; }
.badge-warn { background: #fff6e8; color: #8a5a12; }
.badge-edited { background: #fdf6d8; color: #7a5c00; }

.review-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.review-bar-count { font-size: 13.5px; color: var(--muted); }
.review-bar-count strong { color: var(--ink); font-size: 15px; }
.review-bar-check { margin: 0; flex: 1 1 320px; font-size: 12.5px; }
.review-bar-actions { display: flex; gap: 10px; align-items: center; }

@media (max-width: 860px) {
  .review-wrap { max-height: none; }
  .review-table th { position: static; }
  .review-bar { position: static; }
}

/* Invite-delivery note where the "send invites now" checkbox used to be */
.review-bar-note { flex: 1 1 320px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Rows-per-page control, sitting in the pager row next to the page buttons */
.pager-per { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pager-per select { width: auto; padding: 6px 10px; font-size: 13.5px; border-radius: 8px; }

/* ── Live "Active now" page (admin/active-users.php) ───────────────────── */

/* "Live — updated 14:03:22" line under the page title, with a pulsing dot */
.live-pill { display: inline-flex; align-items: center; gap: 8px; }

.live-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1e9e57;
  animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 158, 87, .40); }
  70% { box-shadow: 0 0 0 8px rgba(30, 158, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 158, 87, 0); }
}

/* Second line inside a table cell (the email under the user's name) */
.cell-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }