/* ─────────────────────────────────────────────
   SkillShekhai — Admin panel styles
   A calm, professional management interface:
   dark slate chrome, quiet surfaces, one blue accent.
   ───────────────────────────────────────────── */

:root {
  --brand: #2F6FED;
  --brand-dark: #1F4FB8;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --card: #ffffff;
  --sidebar: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-text: #cbd5e1;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --grey-bg: #e2e8f0;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }

/* ── Shell layout ─────────────────────────────── */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* the brand header and footer stay fixed; only .sidebar-nav scrolls */
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px; color: #fff; font-weight: 700; font-size: 18px;
  border-bottom: 1px solid var(--sidebar-hover);
  flex-shrink: 0;
}
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 14px;
}
.brand-text { font-weight: 700; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
/* THE scrolling fix: this is the element that actually grows past the
   viewport as more menu items are added, so it — not the sidebar shell —
   needs its own scroll area. flex:1 + min-height:0 lets it shrink correctly
   inside the flex column instead of forcing the whole sidebar to overflow. */
.sidebar-nav {
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-hover); border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: #334155; }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--sidebar-hover) transparent; }

/* Still used by the Expert Dashboard sidebar's section labels (Profile /
   Bookings / Feedback) — that sidebar isn't part of this collapsible-groups
   change, only the Admin sidebar below is. */
.sidebar-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sidebar-text); opacity: .55;
  padding: 16px 12px 6px; flex-shrink: 0;
}
.sidebar-section-label:first-child { padding-top: 4px; }

/* Collapsible nav groups (Course Management / Corporate Management) —
   Admin sidebar only. Native <details name="admin-nav-accordion"> gives
   exclusive-open-one-at-a-time behaviour with zero JS — this CSS just
   makes it look right. */
.sidebar-group { flex-shrink: 0; margin-top: 6px; }
.sidebar-group:first-of-type { margin-top: 10px; }
.sidebar-group__header {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sidebar-text); opacity: .6;
  padding: 10px 12px; border-radius: 8px;
  transition: background-color .15s ease, opacity .15s ease;
}
.sidebar-group__header::-webkit-details-marker { display: none; }
.sidebar-group__header:hover { background: rgba(255,255,255,.05); opacity: .9; }
.sidebar-group__caret { font-size: 9px; transition: transform .18s ease; }
.sidebar-group[open] .sidebar-group__caret { transform: rotate(90deg); }
.sidebar-group[open] .sidebar-group__header { opacity: .85; }
.sidebar-group__body { display: flex; flex-direction: column; padding-top: 2px; }

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--sidebar-text); font-weight: 500; font-size: 15px;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.nav-link.is-active { background: var(--brand); color: #fff; border-left-color: #fff; font-weight: 600; }
.nav-link.is-disabled { opacity: .45; cursor: default; }
.nav-link.is-disabled:hover { background: none; color: var(--sidebar-text); }
/* Native emoji icons each carry their own fixed multi-colour glyph (skin
   tones, red targets, yellow stars...) which is what made the sidebar look
   like an inconsistent rainbow regardless of the surrounding link color.
   The grayscale filter unifies that tone; full opacity (not dimmed) keeps
   every icon clearly visible against the dark sidebar. */
.nav-ico {
  width: 20px; text-align: center;
  filter: grayscale(1) brightness(1.7);
  transition: filter .15s ease;
}
.nav-link:hover .nav-ico,
.nav-link.is-active .nav-ico { filter: grayscale(1) brightness(2.4); }
.soon {
  margin-left: auto; font-size: 10px; font-style: normal;
  background: var(--sidebar-hover); padding: 2px 6px; border-radius: 999px;
}
.sidebar-foot { padding: 16px 20px; border-top: 1px solid var(--sidebar-hover); flex-shrink: 0; }
.sidebar-foot a { color: var(--sidebar-text); font-size: 14px; }
.sidebar-foot a:hover { color: #fff; }

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

/* ── Topbar ───────────────────────────────────── */
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 16px 28px; position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-size: 22px; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { color: var(--muted); font-size: 14px; }

.admin-main { padding: 28px; max-width: 1240px; width: 100%; }

/* ── Dashboard widgets (Step 8B) ─────────────── */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.customize { position: relative; }
.customize > summary { list-style: none; cursor: pointer; display: inline-flex; }
.customize > summary::-webkit-details-marker { display: none; }
.customize__panel {
  position: absolute; right: 0; top: 40px; z-index: 20; width: 300px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: 0 12px 30px rgba(15,23,42,.15);
}
.customize__title { font-weight: 600; font-size: 14px; margin: 0 0 12px; }
.customize__item { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.customize__item input { width: 15px; height: 15px; accent-color: var(--brand); }
.customize__panel .btn { margin-top: 8px; }

.dash-subrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; color: var(--muted); font-size: 14px; margin: 16px 0 24px; }
.dash-subrow__link { margin-left: auto; font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.muted-note { color: var(--muted); font-size: 14px; }

/* Horizontal bars */
.bar-row { margin-bottom: 14px; }
.bar-row__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.bar-row__head span:last-child { color: var(--muted); }
.bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar__fill--alt { background: var(--green); }

/* Compact table */
.data-table--compact th, .data-table--compact td { padding: 10px 12px; font-size: 14px; }

/* 14-day trend chart */
.trend { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.trend__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.trend__bar { width: 60%; min-height: 2px; background: var(--brand); border-radius: 6px 6px 0 0; transition: height .2s; }
.trend__count { font-size: 12px; font-weight: 600; color: var(--muted); }
.trend__label { font-size: 10px; color: var(--muted); white-space: nowrap; transform: rotate(-40deg); transform-origin: center; margin-top: 6px; }

@media (max-width: 768px) {
  .dash-grid { grid-template-columns: 1fr; }
  .customize__panel { right: auto; left: 0; }
  .trend__label { display: none; }
}

/* ── Cards & sections ─────────────────────────── */
.page-intro { color: var(--muted); margin: 0 0 20px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; margin-bottom: 24px;
}
.card-title { margin: 0 0 12px; font-size: 18px; }
.table-card { padding: 0; overflow-x: auto; }

.page-actions {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.page-count { color: var(--muted); margin: 0; }

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: #fff; color: var(--red); border-color: #fecaca; }
.btn-danger:hover { background: var(--red-bg); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.inline-form { display: inline; }

/* ── Table ────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.data-table th, .data-table td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  background: #f8fafc; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.data-table tbody tr:hover { background: #f8fafc; }
.cell-sub { font-size: 12px; color: var(--muted); }
.col-actions { text-align: right; white-space: nowrap; }
.col-actions .btn { margin-left: 6px; }
.cell-message { max-width: 220px; white-space: normal; color: var(--muted); font-size: 13px; }

/* ── Badges ───────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-transform: capitalize;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-grey { background: var(--grey-bg); color: var(--muted); }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }

/* ---- Shared booking status/notes history (Admin + Expert Dashboard) ---- */
.status-history { display: flex; flex-direction: column; gap: 14px; }
.status-history__item { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.status-history__item:last-child { border-bottom: none; padding-bottom: 0; }
.status-history__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.status-history__date { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.status-history__note { margin: 6px 0 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; background: var(--bg); padding: 8px 12px; border-radius: 6px; }

/* Leads page helpers */
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid--6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.lead-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lead-filters input[type="search"], .lead-filters select, .lead-filters input[type="date"] {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff;
}
.lead-filters input[type="search"] { flex: 1; min-width: 180px; }
.lead-filters input:focus, .lead-filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.lead-filters__to { color: var(--muted); font-size: 13px; }
.lead-filters__hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.leads-caption { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.leads-caption strong { color: var(--ink); }
.leads-caption__range { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin-left: 8px; font-size: 13px; }

/* Row action buttons wrap neatly instead of clipping */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions .btn-sm { padding: 6px 10px; }

.admin-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; color: var(--muted); font-size: 14px; }

/* ── Forms ────────────────────────────────────── */
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 18px; }
.form label, .auth-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form input, .form select, .form textarea, .auth-form input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .auth-form input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.req { color: var(--red); }
.hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.form-divider { border: none; border-top: 1px solid var(--line); margin: 8px 0 20px; }
.form-section-note { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.form-buttons { display: flex; gap: 12px; margin-top: 8px; }

/* ── Alerts ───────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.alert-success { background: var(--green-bg); color: #166534; }
.alert-error { background: var(--red-bg); color: #991b1b; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }

/* ── Empty state ──────────────────────────────── */
.empty-state {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 48px; text-align: center; color: var(--muted);
}
.empty-state p { margin: 0 0 16px; }

/* ── Stat cards (dashboard) ───────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-value.muted { color: var(--line); }
.stat-note { font-size: 12px; color: var(--muted); }

/* ── Login page ───────────────────────────────── */
.auth-body { background: var(--sidebar); }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  background: var(--card); border-radius: 14px; padding: 36px;
  width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head .brand-mark { margin: 0 auto 12px; width: 44px; height: 44px; font-size: 18px; }
.auth-logo { display: block; margin: 0 auto 12px; width: 56px; height: 56px; object-fit: contain; }
.auth-head h1 { margin: 0 0 4px; font-size: 22px; }
.auth-head p { margin: 0; color: var(--muted); font-size: 14px; }
.auth-form label { margin-top: 14px; }
.auth-form .btn { margin-top: 22px; }

/* ── Responsive: sidebar becomes a top bar on mobile ── */
@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; overflow-x: auto;
  }
  .sidebar-brand { border-bottom: none; white-space: nowrap; }
  .sidebar-nav { flex-direction: row; flex: 1; }
  .nav-link { white-space: nowrap; }
  .soon { display: none; }
  .sidebar-foot { display: none; }
  .form-row { flex-direction: column; gap: 0; }
  .admin-main, .admin-topbar { padding: 18px; }
  .stat-grid { grid-template-columns: 1fr; }
  .data-table th:nth-child(3), .data-table td:nth-child(3) { display: none; }
}

/* Reviews queue helpers (Step 10a) */
.stars { color: #f59e0b; letter-spacing: 1px; }
.pager { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pager__info { color: var(--muted); font-size: 14px; }

/* Image upload previews (Step 10 fixes) */
.upload-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.img-preview {
  display: block; margin-top: 10px; max-width: 240px; max-height: 160px;
  object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
}
.banner-preview {
  display: block; margin-top: 10px; width: 100%; max-width: 480px; aspect-ratio: 4/1;
  object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #f1f5f9;
}
.remove-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.remove-check input { accent-color: var(--brand); }

/* Logo preview (admin/academy panel) */
.logo-preview {
  display: block; margin-top: 10px; width: 64px; height: 64px;
  object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
}

/* Verified badge in academy portal topbar + verification checkbox */
.verified-badge-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: #1d9bf0; color: #fff;
  border-radius: 50%; font-size: 11px; margin-left: 4px;
}
.check-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-toggle input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }

/* Verification document section (Step 10d) */
.verdoc-current { background: var(--grey-bg, #f8fafc); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.verdoc-current__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verdoc-file { font-weight: 600; }
.verdoc-note { color: var(--red); font-size: 13px; margin: 8px 0 0; }
.verdoc-actions { display: flex; gap: 8px; margin-top: 12px; }
.verdoc-apply { margin-bottom: 8px; }

/* FAQ editor on the category landing form (Step 11b) */
.faq-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.faq-row input, .faq-row textarea { width: 100%; }
@media (max-width: 640px){ .faq-row { grid-template-columns: 1fr; } }

.repeat-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  padding: 12px; margin-bottom: 10px; background: var(--bg); border-radius: var(--radius);
}
.repeat-row input, .repeat-row select, .repeat-row textarea { flex: 1 1 160px; min-width: 120px; }
.repeat-row textarea { flex-basis: 100%; }
.repeat-row .row-remove { flex: 0 0 auto; align-self: center; }
.org-row { align-items: center; }
.org-row__edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; }
.org-row .inline-form { flex: 0 0 auto; }

/* Promotions admin (Step 12a) */
.drag-handle { cursor: grab; color: var(--muted); font-size: 18px; text-align: center; user-select: none; }
.data-table tr.dragging { opacity: .5; background: var(--brand-soft); }
.promo-cell { display: flex; align-items: center; gap: 10px; }
.promo-thumb { width: 56px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* Course feature checkbox grid (Step 13) */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

/* Academy price-match notice (Step 15c) — always-visible red warning */
.price-match-notice {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Admin list pagination (Step 19e) */
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 8px; }
.pagination__info { color: var(--muted, #667085); font-size: 14px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---- Admin list filter bar (courses list: Academy / Category / Subcategory) ---- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px;
}
.filter-bar__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 160px; }
.filter-bar__field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.filter-bar__field select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--ink); width: 100%;
}
.filter-bar__actions { display: flex; gap: 8px; }
@media (max-width: 720px) {
  .filter-bar__field { flex: 1 1 100%; }
  .filter-bar__actions { width: 100%; }
  .filter-bar__actions .btn { flex: 1; text-align: center; }
}

/* ---- Step 26: admin accounts & permissions ---- */
.perm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin: 14px 0 20px;
}
.perm-grid .check-toggle {
  align-items: flex-start; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; background: #fff;
}
.perm-grid .check-toggle:hover { border-color: var(--green); }
.perm-grid.is-disabled { opacity: .45; pointer-events: none; }
.check-toggle--wide {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  background: var(--bg); align-items: flex-start;
}
.perm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.temp-password-card { padding: 20px 22px; margin-bottom: 20px; border-left: 4px solid var(--green); }
.temp-password-card h3 { margin: 0 0 8px; font-size: 16px; }
.temp-password { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.temp-password code {
  font-size: 16px; font-weight: 700; letter-spacing: .04em; padding: 10px 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}

/* ---- Error pages rendered inside the admin layout (e.g. 403 permission
   denied). These classes previously only existed in public.css, so an
   admin-area error rendered unstyled. ---- */
.error-page { text-align: center; padding: 60px 20px; }
.error-page h1 { font-size: 4rem; color: var(--brand, #4f46e5); margin: 0; }
.error-page .lead { font-size: 1.15rem; color: var(--muted); margin: 8px 0 12px; }
.error-hint { color: var(--muted); font-size: 14px; margin: 0 auto 24px; max-width: 460px; }
.error-stack {
  text-align: left; background: var(--ink); color: #e2e8f0; padding: 16px;
  border-radius: 10px; overflow-x: auto; font-size: 13px; max-width: 800px; margin: 20px auto 0;
}

/* ---- Pending badges in the sidebar ---- */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.nav-link { display: flex; align-items: center; gap: 10px; }

/* ---- Pending Requests summary on the dashboard ---- */
.pending-summary { margin-bottom: 24px; }
.pending-summary__title {
  font-size: 15px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.pending-summary__clear {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green); background: #dcfce7; padding: 3px 10px; border-radius: 999px;
}
.pending-summary__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.pending-tile {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; color: var(--ink); transition: border-color .15s, transform .15s;
}
.pending-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.pending-tile__count { font-size: 26px; font-weight: 700; line-height: 1; color: var(--muted); }
.pending-tile__label { font-size: 12px; color: var(--muted); }
/* Anything actually waiting gets the red treatment so it stands out from
   the zero tiles at a glance. */
.pending-tile.is-active { border-color: #fecaca; background: var(--red-bg, #fef2f2); }
.pending-tile.is-active .pending-tile__count { color: var(--red); }
.pending-tile.is-active .pending-tile__label { color: var(--ink); font-weight: 600; }

/* ---- Sidebar group heading (Legal section in the Academy Portal) ---- */
.nav-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 18px 14px 6px; margin-top: 6px;
  border-top: 1px solid var(--line);
}

/* ---- Legal documents rendered inside the portal ---- */
.legal-doc { padding: 28px 30px; max-width: 820px; }
.legal-doc h2 { font-size: 1.1rem; font-weight: 700; margin: 26px 0 8px; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
.legal-doc p { margin: 0 0 12px; line-height: 1.7; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin-bottom: 7px; line-height: 1.65; }
.legal-doc__related { max-width: 820px; margin-top: 16px; font-size: 14px; }