/* ===========================================================
   SAIRI visual system - deep navy-teal + warm gold, editorial
   serif headings on a soft off-white ground. Loaded after
   bootstrap.min.css on every signed-in page (app/Views/layouts/main.php).
   Two kinds of rule live here: a platform-wide Bootstrap retint (so every
   admin/catalogue/payments/etc. page picks up the palette with no markup
   changes) plus bespoke component rules whose markup only exists on the
   dashboards - those are inert elsewhere.
   =========================================================== */

:root {
  --navy: #0b3049;
  --navy-2: #123c59;
  --navy-ink: #082433;
  --gold: #c99a3c;
  --gold-light: #e7c375;
  --gold-ink: #6b4f14;
  --coral: #e2735b;
  --coral-light: #f6cabf;
  /* Status colours - errors are red, warnings amber, never the brand coral/gold */
  --danger: #dc3545;
  --danger-dark: #b02a37;
  --warning: #f0ad00;
  --success: #198754;
  --paper: #f7f4ee;
  --surface: #ffffff;
  --ink: #24313d;
  --ink-soft: #647180;
  --line: #e7e2d6;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 4px 16px -8px rgba(8, 36, 51, 0.16);
  --shadow-md: 0 14px 34px -14px rgba(8, 36, 51, 0.28);
}

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

body {
  margin: 0; /* the sign-in pages load this sheet without Bootstrap's reset */
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, .font-serif {
  font-family: Georgia, 'Times New Roman', serif;
}

a { color: var(--navy); }
a:hover { color: var(--navy-2); }

/* ---------------------------------------------------------
   Bootstrap retint. Bootstrap 5.3 bakes its component colours into
   local custom properties per class (e.g. .btn-primary sets its own
   --bs-btn-bg) rather than always reading --bs-primary at the root, so
   a root-only override would miss buttons and form focus rings. These
   overrides use the same variables Bootstrap's own components read,
   so hover/active/focus states keep working the way Bootstrap expects.
   Success/danger/warning are left alone - that's meaning, not branding.
   --------------------------------------------------------- */

:root {
  --bs-primary: var(--navy);
  --bs-primary-rgb: 11, 48, 73;
  --bs-link-color: var(--navy);
  --bs-link-color-rgb: 11, 48, 73;
  --bs-link-hover-color: var(--navy-2);
  --bs-link-hover-color-rgb: 18, 60, 89;
  --bs-border-color: #e3ddd0;
  --bs-border-color-translucent: rgba(11, 48, 73, 0.12);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.85rem;
}

.card { box-shadow: var(--shadow-sm); }

.btn-primary {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-2);
  --bs-btn-hover-border-color: var(--navy-2);
  --bs-btn-active-bg: var(--navy-ink);
  --bs-btn-active-border-color: var(--navy-ink);
  --bs-btn-disabled-bg: var(--navy);
  --bs-btn-disabled-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 11, 48, 73;
}
.btn-outline-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
  --bs-btn-disabled-color: var(--navy);
  --bs-btn-disabled-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 11, 48, 73;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.25rem rgba(201, 154, 60, 0.2);
}
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 0.25rem rgba(201, 154, 60, 0.2);
}

/* ---------------------------------------------------------
   App shell: left sidebar + content area
   --------------------------------------------------------- */

:root { --side-w: 264px; }

.app-shell { min-height: 100vh; }

.side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: var(--shadow-md);
}

.app-content {
  margin-left: var(--side-w);
  min-width: 0;
  min-height: 100vh;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.side-nav .brand {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #fdfcf8;
  display: grid;
  place-items: center;
  padding: 5px;
  flex: none;
}

.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.brand-text { line-height: 1.2; }
.brand-text .name {
  font-family: Georgia, 'Times New Roman', serif;
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  display: block;
}
.brand-text .tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}

/* Menu: expandable course-builder navigation with grouped destinations. */
.side-menu {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.75rem 1rem;
}

.side-section {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 0.75rem 0.35rem;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 2px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-link:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.side-link.active {
  color: #fff;
  font-weight: 600;
}
.side-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.side-icon { flex: none; opacity: 0.9; }
.side-link.active .side-icon { color: #fff; opacity: 1; }

.side-link > span { min-width: 0; overflow-wrap: anywhere; }

.side-chevron {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.side-link-toggle[aria-expanded="true"] .side-chevron { transform: rotate(135deg); }
.side-submenu { padding: 0.2rem 0 0.45rem 2.4rem; }
.side-sub-link {
  display: block;
  padding: 0.45rem 0.65rem;
  margin-bottom: 1px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  line-height: 1.35;
  text-decoration: none;
}
.side-sub-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.side-sub-link.active { color: #fff; font-weight: 600; }
.side-sub-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.side-sub-link.disabled,
.side-sub-link.disabled:hover { color: rgba(255, 255, 255, 0.35); background: none; cursor: not-allowed; }

/* Signed-in user, pinned to the bottom of the sidebar */
.side-user {
  flex: none;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
}
.side-user form { margin: 0; flex: 1; }
.side-user-actions { display: flex; gap: 0.25rem; }
.side-user-actions > a.side-link { flex: 1; }
.side-user-actions .side-link { margin-bottom: 0; padding: 0.55rem 0.6rem; font-size: 0.82rem; gap: 0.5rem; white-space: nowrap; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex: none;
}

/* Slim bar above the page: menu button (mobile), page title, bell */
.content-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.content-title {
  flex: 1;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  flex: none;
  text-decoration: none;
}
.bell:hover,
.bell:focus-visible {
  color: var(--navy);
  background: var(--line);
}

.notifications-panel { max-width: 900px; }
.notifications-summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
/* Unread count on the bell (Facebook style) */
.bell .badge-count {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}

/* Bell dropdown: opens over the page, nothing navigates until a row is clicked */
.notif-wrap { position: relative; flex: none; }
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  width: 380px;
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1050;
  overflow: hidden;
}
.notif-dropdown[hidden] { display: none; }
.notif-dropdown .notif-list { overflow-y: auto; padding: 0 0.4rem 0.4rem; }
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem 0.4rem;
}
.notif-head h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.notif-head form { margin: 0; }
.notif-link {
  border: 0;
  background: none;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  color: var(--navy);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-link:hover { background: var(--paper); }
.notif-tabs { display: flex; gap: 0.35rem; padding: 0.2rem 1rem 0.6rem; }
.notif-tab {
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-tab:hover { background: var(--paper); }
.notif-tab.active { background: rgba(11, 48, 73, 0.1); color: var(--navy); }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: 0.88rem; }
.notif-loading { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: 0.85rem; }
.notif-see-all {
  display: block;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
}
.notif-see-all:hover { background: var(--paper); color: var(--navy); }

/* One notification row - the whole row is the click target */
.notif-row-form { margin: 0; }
.notif-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.notif-row:hover, .notif-row:focus-visible { background: var(--paper); outline: none; }
.notif-row.unread { background: rgba(11, 48, 73, 0.045); }
.notif-row.unread:hover { background: rgba(11, 48, 73, 0.08); }
.notif-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.notif-icon svg { width: 20px; height: 20px; }
.notif-icon.tone-navy { background: rgba(11, 48, 73, 0.1); color: var(--navy); }
.notif-icon.tone-success { background: rgba(25, 135, 84, 0.12); color: var(--success); }
.notif-icon.tone-warning { background: rgba(240, 173, 0, 0.16); color: #8a6100; }
.notif-icon.tone-danger { background: rgba(220, 53, 69, 0.12); color: var(--danger); }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.notif-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.notif-row.unread .notif-title { font-weight: 700; color: var(--navy); }
.notif-body {
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-time { font-size: 0.75rem; color: var(--ink-soft); }
.notif-row.unread .notif-time { color: var(--navy); font-weight: 600; }
.notif-unread-dot {
  flex: none;
  align-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--navy);
}
/* Full notifications page: same rows, no line clamp */
.notif-list-page .notif-body { -webkit-line-clamp: unset; display: block; }

@media (max-width: 560px) {
  /* Full-width sheet under the top bar on phones */
  .notif-dropdown { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; }
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: none;
}
.topbar-user-text { min-width: 0; line-height: 1.2; }
.topbar-user .who {
  display: block;
  max-width: 170px;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-user .role {
  display: block;
  color: var(--ink-soft);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: var(--paper);
  flex: none;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--navy);
  margin: 0 auto;
  position: relative;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 3px; }

.side-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 51, 0.5);
  z-index: 45;
}

/* ---------------------------------------------------------
   Shared page shell
   --------------------------------------------------------- */

.sairi-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 3.5rem; }

/* ---------------------------------------------------------
   Welcome banner
   --------------------------------------------------------- */

.welcome { padding: 0.25rem 0 1.75rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  max-width: 220px;
}

.welcome h1 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--navy);
  margin: 0 0 1.15rem;
  font-weight: 600;
}
.welcome h1 .accent { color: var(--gold); }

.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
  padding: 0.62rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   Stats row
   --------------------------------------------------------- */

.stats-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
/* Four equal-weight metrics (e.g. the staff workspace) instead of one
   dominant card + two light ones. */
.stats-row-even { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  display: block;
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
a.stat-card { cursor: pointer; }

.stat-card .stat-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  opacity: 0.75;
}
.stat-card .stat-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.1rem;
  margin: 0.3rem 0 0;
}
.stat-card .stat-sub { font-size: 0.8rem; opacity: 0.7; margin-top: 0.2rem; }

.stat-card.dominant {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
}
.stat-card.dominant .stat-label { color: var(--gold-light); }

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  margin-top: 1.1rem;
}
.mini-bars .bar {
  flex: 1;
  background: rgba(201, 154, 60, 0.45);
  border-radius: 4px 4px 1px 1px;
  min-height: 3px;
}
.mini-bars .bar.today { background: var(--gold); }

.mini-bar-labels { display: flex; gap: 6px; margin-top: 0.35rem; }
.mini-bar-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.55);
}

.stat-card.light .stat-value { color: var(--navy); }
.stat-card.light .stat-label { color: var(--ink-soft); }
.stat-card.light .stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 0.6rem;
}
.stat-card.tone-gold .stat-icon { background: rgba(201, 154, 60, 0.14); color: var(--gold-ink); }
.stat-card.tone-coral .stat-icon { background: rgba(226, 115, 91, 0.14); color: var(--coral); }
.stat-card.tone-navy .stat-icon { background: rgba(11, 48, 73, 0.1); color: var(--navy); }
.stat-card.tone-teal .stat-icon { background: rgba(18, 101, 95, 0.12); color: #12655f; }
.stat-card.tone-success .stat-icon { background: rgba(25, 135, 84, 0.12); color: var(--success); }
.stat-card.tone-warning .stat-icon { background: rgba(240, 173, 0, 0.16); color: #8a6100; }
.stat-card.tone-muted .stat-icon { background: rgba(100, 113, 128, 0.12); color: var(--ink-soft); }
/* A stat card used as a filter, showing the one currently applied */
.stat-card.selected { box-shadow: 0 0 0 2px var(--navy), var(--shadow-sm); }

/* ---------------------------------------------------------
   Two-column body
   --------------------------------------------------------- */

.dash-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.75rem;
  align-items: start;
}

.panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

/* ---------------------------------------------------------
   Staff workspace charts (dashboard-charts.js)
   --------------------------------------------------------- */
.chart-card { margin-bottom: 1.75rem; }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}
.chart-grid .chart-card { margin-bottom: 0; }
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chart-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--navy); }
.chart-sub { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.chart-hero { margin-top: 0.55rem; font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.chart-box { position: relative; height: 260px; }
.chart-box-lg { height: 300px; }

/* Segmented toggle (Weekly / Monthly / Quarterly, Gender / Age / Location) */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--paper);
  border-radius: 999px;
}
.seg-btn {
  border: 0;
  background: none;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.seg-btn:hover { color: var(--navy); }
.seg-btn.active { background: var(--surface); color: var(--navy); box-shadow: 0 1px 3px rgba(8, 36, 51, 0.12); }
.seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* "View as table" - every charted value, readable without hovering */
.chart-table { margin-top: 0.9rem; font-size: 0.82rem; }
.chart-table summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.8rem; width: fit-content; }
.chart-table table { margin-top: 0.6rem; font-variant-numeric: tabular-nums; }
.chart-note { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: 1fr; }
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.pane-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.pane-tabs button {
  background: none;
  border: 0;
  padding: 0 0 0.65rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.pane-tabs button.active { color: var(--navy); }
.pane-tabs button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
}

.search-field {
  position: relative;
  min-width: 200px;
}
.search-field input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 2.1rem;
  font-size: 0.84rem;
  font-family: inherit;
  color: var(--ink);
}
.search-field input:focus { outline: 2px solid var(--gold-light); outline-offset: 0; }
.search-field svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-soft);
}

.course-list { display: flex; flex-direction: column; gap: 0.9rem; }
.course-list .pane:not([hidden]) { display: flex; flex-direction: column; gap: 0.9rem; }

.course-card {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }

.course-visual {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  flex: none;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
}
.course-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 11px 11px;
}
.course-visual .cat-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  opacity: 0.85;
  z-index: 1;
}
.course-visual svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.course-visual .course-crest {
  width: auto;
  height: 52px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.course-visual.tone-navy { background: linear-gradient(150deg, var(--navy), var(--navy-2)); }
.course-visual.tone-gold { background: linear-gradient(150deg, var(--gold), #b9832a); }
.course-visual.tone-coral { background: linear-gradient(150deg, var(--coral), #c9543c); }
.course-visual.tone-teal { background: linear-gradient(150deg, #12655f, #0b4642); }

.course-info { flex: 1; min-width: 0; }
.course-info .code { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.course-info h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem;
  margin: 0.15rem 0 0.55rem;
  color: var(--navy);
  font-weight: 600;
}
.course-info .bar-track { height: 6px; border-radius: 99px; background: #eef1f3; overflow: hidden; }
.course-info .bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #d9a94a); border-radius: 99px; }
.course-info .programme-details {
  margin-top: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}
.programme-details summary {
  width: fit-content;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.programme-details summary:hover { color: var(--navy-2); }
.programme-details summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.programme-details-content {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
  padding: 0.9rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.programme-details-content h4 {
  margin: 0 0 0.3rem;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
}
.programme-details-content p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}
.programme-unit-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.programme-unit-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.78rem;
}
.programme-unit-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.programme-unit-list li span:last-child {
  flex: none;
  color: var(--ink-soft);
  text-align: right;
}

.course-info .progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.course-info .status-line { font-size: 0.82rem; color: var(--ink-soft); }

.course-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: none; }

.round-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  display: grid;
  place-items: center;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.round-btn:hover { transform: scale(1.08); }
.round-btn svg { width: 15px; height: 15px; }


.empty-panel { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 1.35rem; }

.ring-card { text-align: center; }
.ring-card .ring-wrap { position: relative; width: 130px; height: 130px; margin: 0.5rem auto 0.75rem; }
.ring-card .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--pct, 0) * 3.6deg), #eef1f3 0deg);
}
.ring-card .ring::after {
  content: '';
  position: absolute;
  inset: 15px;
  background: var(--surface);
  border-radius: 50%;
}
.ring-card .ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  color: var(--navy);
}
.ring-card .ring-caption { font-size: 0.78rem; color: var(--ink-soft); }

/* Slim scrollbar on the menu instead of the default grey bar */
.side-menu { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.side-menu::-webkit-scrollbar { width: 6px; }
.side-menu::-webkit-scrollbar-track { background: transparent; }
.side-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.side-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* "Insight of the day" popup - bottom-right, once a day (app.js) */
.insight-popup {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1060;
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 1rem 2.4rem 1.1rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(8, 36, 51, 0.45);
  border-left: 3px solid var(--gold);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.insight-popup.show { opacity: 1; transform: translateY(0); }
.insight-popup[hidden] { display: none; }
.insight-popup .kicker {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}
.insight-popup blockquote {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--gold-light);
}
.insight-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.insight-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .insight-popup { transition: none; }
}

.mentor-card { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.mentor-card h4 { font-family: Georgia, 'Times New Roman', serif; margin: 0 0 0.5rem; font-size: 1.05rem; }
.mentor-card p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 1rem; }

/* Staff workspace - recent activity feed */
.activity-feed { display: flex; flex-direction: column; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { padding-bottom: 0; border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 0.4rem; flex: none; }
.activity-dot.tone-navy { background: var(--navy); }
.activity-dot.tone-gold { background: var(--gold); }
.activity-dot.tone-coral { background: var(--coral); }
.activity-dot.tone-teal { background: #12655f; }
.activity-dot.tone-danger { background: var(--danger); }
.activity-dot.tone-warning { background: var(--warning); }
.activity-dot.tone-success { background: var(--success); }
.activity-label { font-size: 0.86rem; color: var(--ink); font-weight: 500; }
.activity-meta { font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.1rem; }
.activity-empty { color: var(--ink-soft); font-size: 0.85rem; padding: 1rem 0; text-align: center; }
.activity-text { flex: 1; min-width: 0; }
.activity-view {
  flex: none;
  align-self: center;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.activity-view:hover, .activity-view:focus-visible { border-color: var(--navy); background: var(--paper); color: var(--navy); }

/* Row "Actions" dropdown (app.js) */
.action-menu { display: inline-block; }
.action-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.action-menu-toggle:hover,
.action-menu-toggle[aria-expanded="true"] { border-color: var(--navy); background: var(--paper); }
.action-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.action-menu-caret {
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.action-menu-toggle[aria-expanded="true"] .action-menu-caret { transform: translateY(1px) rotate(-135deg); }
.action-menu-list {
  position: fixed;
  z-index: 1055;
  min-width: 210px;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.action-menu-list[hidden] { display: none; }
.action-menu-list form { margin: 0; }
.action-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.action-item:hover, .action-item:focus-visible { background: var(--paper); color: var(--navy); outline: none; }
.action-item.tone-success { color: var(--success); font-weight: 600; }
.action-item.tone-danger { color: var(--danger); }
.action-item.tone-danger:hover, .action-item.tone-danger:focus-visible { background: rgba(220, 53, 69, 0.08); color: var(--danger); }
.action-item:disabled { color: var(--ink-soft); opacity: 0.6; cursor: not-allowed; background: none; }
.action-hint { font-size: 0.72rem; color: var(--ink-soft); font-weight: 400; }
.action-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--line); }

/* Dialog opened by a[data-modal] links (app.js) */
.app-modal {
  margin: auto;   /* centred even when the dialog sits inside a Bootstrap .row */
  width: min(560px, calc(100vw - 2rem));
  max-height: min(85vh, 720px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface);
  color: var(--ink);
}
.app-modal::backdrop { background: rgba(8, 36, 51, 0.45); }
.app-modal-body { padding: 1.5rem; overflow-y: auto; max-height: min(85vh, 720px); }
.app-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.app-modal-close:hover { background: var(--paper); color: var(--ink); }
.app-modal-loading { color: var(--ink-soft); font-size: 0.88rem; padding: 1rem 0; text-align: center; margin: 0; }

/* One activity's details (activity/details.php) */
.activity-detail-head { display: flex; gap: 0.75rem; align-items: flex-start; padding-right: 2rem; }
.activity-detail-head .activity-dot { width: 10px; height: 10px; margin-top: 0.5rem; }
.activity-detail-title { margin: 0; font-size: 1.15rem; color: var(--navy); }
.activity-detail-meta { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.activity-detail-section {
  margin: 1.4rem 0 0.6rem;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.activity-detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0;
  font-size: 0.88rem;
}
.activity-detail-list dt { color: var(--ink-soft); font-weight: 400; }
.activity-detail-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.activity-detail-empty { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.activity-detail-changes { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.activity-detail-changes th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 0.35rem 0.5rem 0.35rem 0; border-bottom: 1px solid var(--line); }
.activity-detail-changes td { padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.activity-detail-foot { margin-top: 1.4rem; display: flex; justify-content: flex-end; }
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold);
  color: var(--navy-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  transition: transform 0.2s ease;
  border: 0;
}
.btn-gold:hover { transform: translateY(-1px); color: var(--navy-ink); }

/* ---------------------------------------------------------
   Auth shell (app/Views/layouts/app.php) - login, register,
   forgot/reset password, verify-pending, generic message.
   Split screen: navy brand panel + a paper-toned form card.
   --------------------------------------------------------- */

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

/* Half of the screen: a photo under a see-through navy overlay, so the
   brand text stays readable and the panel still reads as SAIRI navy.
   Photo: "Students Inside a Classroom in the University" by Yan Krukau,
   Pexels (pexels.com/photo/8197545) - free to use under the Pexels licence. */
.auth-brand {
  flex: 0 0 50%;
  background:
    linear-gradient(160deg, rgba(11, 48, 73, 0.9) 0%, rgba(18, 60, 89, 0.78) 55%, rgba(8, 36, 51, 0.92) 100%),
    url('../img/auth-bg.jpg') 45% center / cover no-repeat,
    var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.auth-brand > * { position: relative; z-index: 1; }

.brand-mark-lg {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: #fdfcf8;
  display: grid;
  place-items: center;
  padding: 9px;
}
.brand-mark-lg img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.auth-brand-text h2 {
  font-size: 1.55rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  font-weight: 600;
  max-width: 420px;
}
.auth-brand-text p { color: rgba(255, 255, 255, 0.75); font-size: 0.88rem; margin: 0; max-width: 380px; }

.auth-quote {
  margin: auto 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: var(--gold-light);
  font-size: 1.02rem;
  line-height: 1.5;
}
.auth-quote .kicker {
  display: block;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.6rem;
}

.auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--paper);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.5rem 2.25rem;
}

/* Full SAIRI logo at the head of the card - phones only (see Responsive). */
.auth-card-brand {
  display: none;
  justify-content: center;
  text-decoration: none;
  margin: -0.5rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent) 1;
}
.auth-card-brand img { width: 168px; height: auto; mix-blend-mode: multiply; }

.auth-card h1 {
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.auth-card .sub { margin: 0 0 1.75rem; font-size: 0.9rem; line-height: 1.5; }
.auth-card label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin: 0 0 0.35rem; }
.auth-card input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 1.15rem;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.18);
  background: var(--surface);
}
.auth-card .phone-field { display: flex; gap: 0.5rem; }
.auth-card .phone-field select {
  flex: 0 0 8.5rem;
  min-width: 0;
  padding: 0.65rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 1.15rem;
  background: var(--paper);
  color: var(--ink);
}
.auth-card .phone-field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.18);
  background: var(--surface);
}
.auth-card .phone-field input { flex: 1; min-width: 0; }
/* Plain selects on the auth forms (gender) match the inputs */
.auth-card > form > .row select,
.auth-card form > select {
  width: 100%;
  padding: 0.65rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 1.15rem;
  background: var(--paper);
  color: var(--ink);
}
.auth-card .row select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.18); background: var(--surface); }
.auth-card .row select.is-invalid { border-color: var(--danger); }
.auth-card .row { display: flex; gap: 0.85rem; }
.auth-card .row > div { flex: 1; }

/* Inline field errors (added by app.js) - red outline, message underneath */
.field-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.3rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.auth-card input.is-invalid,
.auth-card .phone-field select.is-invalid { border-color: var(--danger); background: #fff8f8; }
.auth-card input.is-invalid:focus,
.auth-card .phone-field select.is-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
/* auth inputs carry their own bottom margin; tuck the message up under them */
.auth-card .field-error { margin: -0.85rem 0 1.15rem; }
.auth-card .field-error + .field-error { margin-top: -0.85rem; }

.password-field { position: relative; }
.password-field input { padding-right: 2.6rem; }
/* Edge adds its own reveal eye to password inputs; ours replaces it. */
.password-field input::-ms-reveal,
.password-field input::-ms-clear { display: none; }
/* The wrapper must be exactly the input's height for top:50% to centre the
   eye, so the auth input's bottom margin moves out onto the wrapper. */
.auth-card .password-field { margin-bottom: 1.15rem; }
.auth-card .password-field input { margin-bottom: 0; }
/* Bootstrap's invalid-state icon sits where the eye is; the red border is enough. */
.password-field .form-control.is-invalid { background-image: none; padding-right: 2.6rem; }

/* Base rule: covers any password field outside .auth-card (e.g. the plain
   Bootstrap .form-control fields on the account/profile page). */
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-soft);
  font-weight: 400;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.password-toggle:hover { background: rgba(11, 48, 73, 0.07); color: var(--navy); }
.password-toggle svg { width: 18px; height: 18px; }

/* .auth-card button { width:100%; background:navy; ... } would otherwise win
   on specificity and clobber the toggle's look inside the auth shell. */
.auth-card button.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-soft);
  font-weight: 400;
  display: grid;
  place-items: center;
}
.auth-card button.password-toggle:hover { background: rgba(11, 48, 73, 0.07); color: var(--navy); transform: translateY(-50%); }

.auth-card button {
  width: 100%;
  padding: 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.auth-card button:hover { background: var(--navy-2); transform: translateY(-1px); }

.auth-card .alert { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: 0.85rem; }
.auth-card .alert-error { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; }
.auth-card .alert-ok { background: #eef6ea; color: #2f6b30; border: 1px solid #c8e2c4; }

.auth-card .foot { text-align: center; margin-top: 1.1rem; font-size: 0.87rem; color: var(--ink-soft); }
.auth-card .foot a { color: var(--navy); font-weight: 600; text-decoration: none; }
.auth-card .foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Confirm dialog - replaces window.confirm() everywhere (see app.js)
   so destructive/important actions get the SAIRI look instead of the
   browser's native "example.com says" popup.
   --------------------------------------------------------- */

.confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 51, 0.45);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 200;
}
.confirm-overlay.open { display: flex; }

.confirm-dialog {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}
.confirm-dialog .confirm-kicker {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.confirm-message {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
/* Optional written reason in the confirm dialog (archive, unpublish) */
.confirm-reason { margin-top: 1rem; }
.confirm-reason[hidden] { display: none; }
.confirm-reason-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; }
.confirm-reason textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
  background: var(--paper);
  color: var(--ink);
}
.confirm-reason textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.18); background: var(--surface); }
.confirm-reason textarea.is-invalid { border-color: var(--danger); }
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.confirm-actions button {
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.confirm-cancel { background: var(--paper); color: var(--ink); }
.confirm-cancel:hover { background: var(--line); }
.confirm-ok { background: var(--navy); color: #fff; }
.confirm-ok:hover { background: var(--navy-2); }
.confirm-overlay.tone-danger .confirm-ok { background: var(--danger); }
.confirm-overlay.tone-danger .confirm-ok:hover { background: var(--danger-dark); }

/* ---------------------------------------------------------
   Back link - was plain small grey text on every admin/learner
   sub-page, easy to miss. Now a visible pill with a drawn arrow
   (not the ← glyph, so it stays crisp at this size).
   --------------------------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.8rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.back-link:hover { background: var(--paper); border-color: var(--navy); color: var(--navy); transform: translateX(-2px); }
.back-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* ---------------------------------------------------------
   Generic polish for pages that don't opt into the dashboard
   shell (staff workspace still uses plain .card/.grid/.tag).
   --------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tag {
  display: inline-block;
  background: rgba(201, 154, 60, 0.14);
  color: var(--gold-ink);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-right: 0.35rem;
}
.sub { color: var(--ink-soft); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row .stat-card.dominant { grid-column: 1 / -1; }
  .stats-row-even { grid-template-columns: 1fr 1fr; }
  .dash-body { grid-template-columns: 1fr; }
  .sidebar { order: 2; }

  .auth-brand { display: none; }
  .auth-card-brand { display: flex; }
  .auth-panel { padding: 3rem 1.5rem; }

  /* Sidebar becomes a slide-in drawer */
  .side-nav { transform: translateX(-100%); transition: transform 0.25s ease; }
  .app-content { margin-left: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  body.side-open .side-nav { transform: none; }
  body.side-open .side-backdrop { display: block; }
  body.side-open { overflow: hidden; }
  .content-topbar { padding: 0.65rem 1rem; }
}

@media (max-width: 720px) {
  .welcome h1 { font-size: 1.7rem; }
  .panel-head { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; }
}

@media (max-width: 430px) {
  .sairi-main { padding: 1.5rem 1rem 2.5rem; }
  .stats-row { grid-template-columns: 1fr; }
  .stats-row-even { grid-template-columns: 1fr; }
  .course-card { flex-direction: column; }
  .course-visual { width: 100%; height: 110px; }
  .course-visual .course-crest { height: 78px; }
  .course-actions { flex-direction: row; justify-content: center; }
  .welcome h1 { font-size: 1.5rem; }
  .content-topbar { gap: 0.55rem; }
  .topbar-user { gap: 0.35rem; }
  .topbar-user .who { max-width: 88px; }

  .auth-panel { padding: 2rem 1rem; }
  .auth-card { padding: 2rem 1.5rem; }
}
/* Help guide: comfortable reading width and spacing */
.help-guide .card-body { padding: 1.5rem 1.75rem; }
.help-guide p, .help-guide li, .help-guide dd { line-height: 1.6; color: var(--ink, #1f2a37); }
.help-guide ul, .help-guide ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.help-guide li { margin-bottom: 0.45rem; }
.help-guide h2 { margin-bottom: 0.75rem; }
.help-guide h3 { margin-top: 1.4rem !important; margin-bottom: 0.5rem; color: var(--navy, #0b3049); }


/* ---------------------------------------------------------
   Brand frame. Both layouts put class="branded" on <body>.
   The page is framed in navy and gold like the SAIRI letterhead:
   one gold line runs across the top (sidebar logo block + topbar, which
   share a height so it meets), and the footer is a navy bar under a
   gold-lined wave, level with the sidebar's user strip.
   --------------------------------------------------------- */

:root {
  --bar-h: 66px;   /* topbar and sidebar logo block */
  --foot-h: 58px;  /* footer and sidebar user strip */
  --gold-rule: linear-gradient(90deg, var(--gold), var(--gold-light) 50%, var(--gold));
}

/* Letterhead curves in the top-right of the page, just under the topbar.
   Thin lines only, behind the content. */
.branded .app-content { position: relative; }
.branded .app-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: var(--bar-h);
  right: 0;
  width: min(460px, 55vw);
  aspect-ratio: 420 / 300;
  background: url('../img/brand/arcs.svg') right top / contain no-repeat;
  pointer-events: none;
}
/* The same curves, turned round, in the bottom-left above the footer. */
.branded .app-content::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: calc(var(--foot-h) + var(--wave-h));
  width: min(380px, 45vw);
  aspect-ratio: 420 / 300;
  background: url('../img/brand/arcs.svg') right top / contain no-repeat;
  transform: rotate(180deg);
  opacity: 0.8;
  pointer-events: none;
}

/* Page ground in the brand colours: a warm gold glow top-right and a
   cool navy one bottom-left over the paper, so no page is plain. */
body.branded {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 154, 60, 0.11), transparent 70%),
    radial-gradient(ellipse 55% 50% at 0% 100%, rgba(11, 48, 73, 0.07), transparent 70%),
    var(--paper);
  background-attachment: fixed;
}

/* The SAIRI logo (logo.png with its white ground removed) behind the page,
   lower right, faint, staying put while the page scrolls. Shown at its
   own size so it stays sharp. Signed-in pages only. */
.branded .app-shell::before {
  content: '';
  position: fixed;
  z-index: -1;
  right: 3vw;
  bottom: calc(var(--foot-h) + var(--wave-h) + 1.5rem);
  width: 205px;
  height: 177px;
  background: url('../img/brand/logo-clear.png') center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

/* Page content: serif navy headings with a short gold rule, cards with a
   gold-accented header, and tables with a branded header row. These are
   plain Bootstrap classes, so every page picks them up unchanged. */
.branded .sairi-main h1 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--navy);
  font-weight: 600;
}
.branded .sairi-main h1::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.branded .sairi-main h2,
.branded .sairi-main .card-title { color: var(--navy); }

.branded .card { border-color: var(--line); border-radius: var(--radius-md); }
.branded .card-header {
  background: #fbf8f1;
  border-bottom-color: var(--line);
  box-shadow: inset 3px 0 0 var(--gold);
  color: var(--navy);
  font-weight: 600;
}
.branded .card-header:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.branded .card-footer { background: #fbf8f1; border-top-color: var(--line); }

.branded .table { --bs-table-hover-bg: rgba(201, 154, 60, 0.07); }
.branded .table > thead th {
  background: #f4efe4;
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold-light);
  white-space: nowrap;
}
.branded .table > tbody > tr:last-child > * { border-bottom-color: transparent; }

/* Bootstrap bakes its own blue into these; bring them into the palette. */
.branded .progress { --bs-progress-bg: #ece6d8; --bs-progress-bar-bg: var(--navy); }
.branded .pagination {
  --bs-pagination-color: var(--navy);
  --bs-pagination-hover-color: var(--navy);
  --bs-pagination-hover-bg: #fbf4e4;
  --bs-pagination-focus-color: var(--navy);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(201, 154, 60, 0.25);
  --bs-pagination-active-bg: var(--navy);
  --bs-pagination-active-border-color: var(--navy);
}
.branded .nav-pills {
  --bs-nav-link-color: var(--navy);
  --bs-nav-link-hover-color: var(--navy-2);
  --bs-nav-pills-link-active-bg: var(--navy);
}
.branded .nav-pills .nav-link.active { box-shadow: inset 0 -3px 0 var(--gold); }

.branded .list-group-item.active {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Sidebar: kept navy. Gold only on the two rules that continue the
   topbar and footer lines, and on the current page's marker. */
.branded .side-nav .brand {
  height: var(--bar-h);
  padding: 0 1.25rem;
  border-bottom: 0;
  background: var(--gold-rule) left bottom / 100% 3px no-repeat;
}
.branded .side-nav .brand-mark { width: 42px; height: 42px; }
.branded .side-menu { padding-top: 0.75rem; }
.branded .side-link.active {
  background: linear-gradient(90deg, rgba(201, 154, 60, 0.22), rgba(201, 154, 60, 0.04));
  border-left-color: var(--gold);
  border-radius: 4px 10px 10px 4px;
}
.branded .side-user {
  display: flex;
  align-items: center;
  height: var(--foot-h);
  padding: 0 0.75rem;
  border-top: 0;
  background: rgba(8, 36, 51, 0.55);
}
.branded .side-user-actions { width: 100%; }

/* Topbar */
.branded .content-topbar {
  height: var(--bar-h);
  padding-top: 0;
  padding-bottom: 3px;
  border-bottom: 0;
  background: var(--gold-rule) left bottom / 100% 3px no-repeat, var(--surface);
  box-shadow: 0 6px 16px -12px rgba(8, 36, 51, 0.35);
}
.branded .content-title { padding-left: 0.75rem; border-left: 3px solid var(--gold); line-height: 1.25; }
.branded .bell { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.branded .bell:hover,
.branded .bell:focus-visible { background: #fbf4e4; box-shadow: inset 0 0 0 1px var(--gold-light); color: var(--navy); }
.branded .topbar-user .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold-light); }

.topbar-crest { display: none; flex: none; }
.topbar-crest img { display: block; height: 38px; width: auto; mix-blend-mode: multiply; }

/* Footer: a soft navy wave with two gold lines riding it, over a navy
   bar with the Institute's name (left) and tagline (right corner). The
   bar is the same height as the sidebar's user strip, so their tops
   line up. It stays at the bottom of short pages too. */
:root { --wave-h: 36px; }
.branded .app-content { display: flex; flex-direction: column; }
.branded .sairi-main { width: 100%; flex: 1 0 auto; }

.brand-band {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  height: calc(var(--foot-h) + var(--wave-h));
  margin-top: 2rem;
  padding: var(--wave-h) 1.75rem 0;
  background:
    url('../img/brand/wave.svg') left top / 100% var(--wave-h) no-repeat,
    linear-gradient(var(--navy), var(--navy)) left bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}
.brand-band-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
}
.brand-band-tagline {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

/* Sign-in pages: corner sweep, and the footer pinned to the foot of the form panel. */
.branded .auth-panel { position: relative; padding-bottom: calc(var(--foot-h) + var(--wave-h) + 2.5rem); }
.branded .auth-panel::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 40vw);
  aspect-ratio: 400 / 240;
  background: url('../img/brand/corner.svg') right top / contain no-repeat;
  pointer-events: none;
}
/* Navy-to-gold strip across the top edge of the sign-in card. */
.branded .auth-card {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--navy), var(--navy-2) 55%, var(--gold) 85%, var(--gold-light)) left top / 100% 4px no-repeat,
    var(--surface);
}
/* Half a screen is too narrow for name and tagline side by side. */
.auth-panel .brand-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: calc(var(--wave-h) + 0.6rem) 1rem 0.8rem;
  text-align: center;
}
.branded .auth-panel { padding-bottom: 9rem; }

@media (max-width: 900px) {
  :root { --bar-h: 60px; }
  .topbar-crest { display: block; }
}

/* Phones: the crest needs room, so the page title keeps its space and the
   avatar's initials stand in for the name/role text. */
@media (max-width: 430px) {
  .topbar-crest img { height: 32px; }
  .topbar-user-text { display: none; }
  .brand-band {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: calc(var(--wave-h) + 0.7rem) 1rem 0.8rem;
    text-align: center;
  }
  .brand-band-name,
  .brand-band-tagline { font-size: 0.84rem; }
  .branded .auth-panel { padding-bottom: 9rem; }
}

/* Phones and tablets: the cards fill the width, so decoration behind them
   would be hidden. The brand goes where there is open space instead: a
   navy wave with gold lines hanging under the topbar (the letterhead's top
   swoosh; there is no sidebar line to meet here), and the SAIRI logo shown
   plainly at the end of the page, above the footer. */
@media (max-width: 900px) {
  .branded .content-topbar { background: var(--surface); }
  .branded .content-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background: url('../img/brand/wave.svg') center / 100% 100% no-repeat;
    transform: scaleY(-1);
    pointer-events: none;
  }
  .branded .sairi-main { position: relative; padding-top: calc(1.5rem + 24px); padding-bottom: 210px; }
  .branded .sairi-main::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    width: 180px;
    height: 155px;
    transform: translateX(-50%);
    background: url('../img/brand/logo-clear.png') center / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
  }
  .branded .app-shell::before { display: none; }
}

@media print {
  body.branded { background: #fff; }
  .branded .app-shell::before,
  .branded .app-content::before,
  .branded .app-content::after,
  .branded .auth-panel::before,
  .brand-band { display: none; }
}

/* ---------------------------------------------------------
   Payment page: "How to pay" card (app/Views/payments/show.php).
   Navy header, the payment reference in a gold-edged box, and each
   bank account as its own block of label/value rows.
   --------------------------------------------------------- */

.pay-guide { overflow: hidden; border-color: var(--line); }
.pay-guide-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-bottom: 3px solid var(--gold);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 600;
}
.pay-guide-head svg { color: var(--gold-light); }
.pay-guide .card-body { padding: 1.25rem; font-size: 0.88rem; }
.pay-intro { margin: 0 0 1rem; color: var(--ink); line-height: 1.55; }

.pay-ref {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.15rem 0.75rem;
  margin-bottom: 1.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--gold-light);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background: #fbf6ea;
}
.pay-ref-label {
  grid-column: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.pay-ref-value {
  grid-column: 1;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.pay-ref .pay-copy { grid-column: 2; grid-row: 1 / span 2; }

.pay-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pay-copy:hover { background: var(--navy); color: #fff; }
.pay-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pay-copy.is-copied { background: var(--success); border-color: var(--success); color: #fff; }
.pay-copy-sm { padding: 0.2rem; margin-left: 0.35rem; border-color: var(--line); vertical-align: middle; }

.pay-method {
  margin: 0 0 0.75rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}
.pay-account {
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.pay-account-title {
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: #f4efe4;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}
.pay-row {
  display: grid;
  grid-template-columns: minmax(96px, 38%) 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid #f1ece1;
}
.pay-row:last-child { border-bottom: 0; }
.pay-row-label { color: var(--ink-soft); }
.pay-row-value { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pay-row-value.is-pending { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.pay-account .pay-note { margin: 0; padding: 0.5rem 0.9rem; color: var(--ink-soft); }
.pay-notes .pay-note { margin: 0 0 0.5rem; color: var(--ink-soft); }

.pay-turnaround {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  line-height: 1.5;
}
.pay-turnaround svg { flex: none; margin-top: 0.15rem; color: var(--gold); }

@media (max-width: 430px) {
  .pay-row { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------------- Facilitator profiles ----------------
   Photo (or initials when there is none), expertise tags, and the
   "Your facilitators" cards on a learner's course page. */
.fac-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 30%; flex: none;
  background: var(--paper); border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.fac-photo-lg { width: 120px; height: 120px; }
.fac-initials {
  display: grid; place-items: center; background: var(--navy); color: var(--gold-light);
  font-weight: 700; font-size: 1.2rem; letter-spacing: .02em;
}
.fac-photo-lg.fac-initials { font-size: 2.2rem; }
.fac-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fac-tags li {
  font-size: .78rem; padding: .2rem .6rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.fac-card { display: flex; gap: 1rem; align-items: flex-start; }
.fac-card + .fac-card { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.fac-card h3 { font-size: 1rem; margin: 0; }
.fac-headline { color: var(--ink-soft); font-size: .88rem; margin: .1rem 0 .5rem; }
.fac-bio { white-space: pre-line; }

/* Facilitators on the learner dashboard: under each course, and the sidebar list. */
.fac-mini { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .1rem 0 .55rem; }
.fac-mini a { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.fac-mini a:hover span { color: var(--navy); text-decoration: underline; }
.fac-mini .fac-photo { width: 26px; height: 26px; border-width: 1px; box-shadow: none; }
.fac-mini .fac-initials { font-size: .62rem; }
.fac-row { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink); padding: .45rem 0; }
.fac-row + .fac-row { border-top: 1px solid var(--line); }
.fac-row .fac-photo { width: 48px; height: 48px; }
.fac-row .fac-initials { font-size: .95rem; }
.fac-row strong { display: block; font-size: .9rem; color: var(--navy-ink); }
.fac-row-sub { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.3; }
.fac-row-link { display: block; font-size: .78rem; color: var(--navy); margin-top: .15rem; }
.fac-row:hover .fac-row-link { text-decoration: underline; }

/* ===========================================================
   Course payment page (payments/show.php): welcome banner,
   progress tracker, invoice ticket and the pay -> upload steps.
   Mirrors the event booking page (landing.css lp-*), in the app's
   tokens. Status colours: green ok, amber waiting, red refused.
   =========================================================== */
.pf-hero {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  margin-bottom: 1.5rem; padding: 1.75rem 2rem; border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(circle at 88% 15%, rgba(201,154,60,.32), transparent 45%),
              linear-gradient(120deg, var(--navy-ink), var(--navy));
  box-shadow: var(--shadow-md);
}
.pf-hero h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); animation: pf-rise .5s ease-out both; }
/* The branded page headings are navy; on these navy panels they must be white. */
.branded .sairi-main .pf-hero h1,
.branded .sairi-main .pf-ticket-title h2 { color: #fff; }
.pf-kicker {
  display: inline-block; margin: 0 0 .6rem; padding: .2rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--gold-light);
}
.pf-hero-course { margin: 0; font-weight: 600; color: var(--gold-light); }
.pf-hero-sub { margin: .4rem 0 0; color: rgba(255,255,255,.85); font-size: .93rem; max-width: 40rem; }
.pf-hero-amount {
  flex: none; display: grid; justify-items: center; align-content: center; gap: .2rem; min-width: 170px; padding: 1rem 1.25rem;
  border-radius: var(--radius-md); background: rgba(255,255,255,.08); border: 2px solid var(--gold); text-align: center;
  animation: pf-rise .5s .12s ease-out both;
}
.pf-hero-amount span { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-light); }
.pf-hero-amount strong { font-size: 1.65rem; line-height: 1.1; color: #fff; }
.pf-hero-amount .pf-hero-badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e5f2e9; color: #1d6b3a; }
@keyframes pf-rise { from { opacity: 0; transform: translateY(10px); } }

.pf-progress {
  display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 1.5rem; padding: 1.1rem .75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.pf-progress-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.pf-progress-step + .pf-progress-step::before {
  content: ''; position: absolute; top: 16px; right: 50%; width: 100%; height: 3px; background: var(--line);
}
.pf-progress-step.is-done + .pf-progress-step::before,
.pf-progress-step.is-current + .pf-progress-step.is-current::before { background: var(--navy); }
.pf-progress-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; font-size: .9rem; background: var(--surface); border: 2px solid var(--line); color: var(--ink-soft);
}
.pf-progress-step.is-done .pf-progress-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.pf-progress-step.is-current .pf-progress-dot {
  background: var(--gold); border-color: var(--gold); color: var(--navy-ink);
  box-shadow: 0 0 0 5px rgba(201,154,60,.22); animation: pf-pulse 2s ease-in-out infinite;
}
.pf-progress-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.pf-progress-step.is-done .pf-progress-label, .pf-progress-step.is-current .pf-progress-label { color: var(--navy-ink); }
@keyframes pf-pulse { 50% { box-shadow: 0 0 0 9px rgba(201,154,60,.08); } }

.pf-status { display: inline-block; font-size: .78rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; }
.pf-status-ok   { background: #e5f2e9; color: #1d6b3a; }
.pf-status-wait { background: #fff4d6; color: #8a5a00; }
.pf-status-bad  { background: #fdecec; color: #a61b1b; }

/* Invoice ticket */
.pf-ticket {
  position: sticky; top: 1.25rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.pf-ticket-head {
  display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--navy-ink), var(--navy)); border-bottom: 3px solid var(--gold); color: #fff;
}
.pf-ticket-ico-lg { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #fff; color: var(--navy); }
.pf-ticket-title p { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }
.pf-ticket-title h2 { margin: .1rem 0 .35rem; color: #fff; font-size: 1.15rem; font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.pf-ticket-rows { list-style: none; margin: 0; padding: 1.1rem 1.25rem .9rem; display: grid; gap: .85rem; }
.pf-ticket-rows li { display: flex; gap: .75rem; align-items: flex-start; }
.pf-ticket-rows li > div { display: grid; min-width: 0; }
.pf-ticket-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f1f4f7; color: var(--navy); }
.pf-ticket-rows small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.pf-ticket-rows strong { color: var(--navy-ink); font-size: .93rem; overflow-wrap: anywhere; }
.pf-ticket-meta { font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.pf-ticket-tear { position: relative; margin: 0 1.25rem; border-top: 2px dashed var(--line); }
.pf-ticket-tear::before, .pf-ticket-tear::after {
  content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.pf-ticket-tear::before { left: calc(-1.25rem - 12px); }
.pf-ticket-tear::after  { right: calc(-1.25rem - 12px); }
.pf-ticket-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem 1.2rem; }
.pf-ticket-lines { display: grid; gap: .2rem; font-size: .85rem; color: var(--ink-soft); }
.pf-ticket-lines div { display: flex; gap: .75rem; }
.pf-ticket-total { display: grid; justify-items: end; }
.pf-ticket-total small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.pf-ticket-total strong { font-size: 1.5rem; line-height: 1.1; color: var(--navy-ink); }

/* Steps */
.pf-flow { display: grid; gap: 1.5rem; }
.pf-flow > * { animation: pf-rise .45s ease-out both; }
.pf-flow > :nth-child(2) { animation-delay: .1s; }
.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.pf-step-head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.pf-step-num {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700; box-shadow: 0 0 0 4px rgba(11,48,73,.1);
}
.pf-step-head h2 { margin: 0 0 .1rem; font-size: 1.2rem; color: var(--navy-ink); }
.pf-step-head p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.pf-drop {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem;
  border: 2px dashed #c9c2b2; border-radius: var(--radius-sm); background: var(--paper); color: var(--navy);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.pf-drop:hover, .pf-drop.is-over { border-color: var(--navy); background: var(--surface); }
.pf-drop.is-over { transform: scale(1.01); }
.pf-drop:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,48,73,.15); }
.pf-drop-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }
.pf-drop:hover .pf-drop-icon { animation: pf-bob .8s ease-in-out infinite alternate; }
.pf-drop-text { display: grid; gap: .1rem; min-width: 0; }
.pf-drop-text strong { color: var(--navy-ink); overflow-wrap: anywhere; }
.pf-drop-text span { font-size: .84rem; color: var(--ink-soft); }
.pf-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pf-drop.has-file { border-style: solid; border-color: #1d6b3a; background: #f1f8f3; }
.pf-drop.has-file .pf-drop-icon { background: #1d6b3a; border-color: #1d6b3a; color: #fff; animation: none; }
@keyframes pf-bob { to { transform: translateY(-4px); } }

.pf-btn-block {
  display: flex; width: 100%; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.1rem;
  padding: .85rem 1.25rem; font-size: 1rem; font-weight: 600; box-shadow: 0 8px 20px rgba(11,48,73,.22);
  transition: transform .15s, box-shadow .15s;
}
.pf-btn-block:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11,48,73,.28); }
.pf-btn-block.is-sending { opacity: .8; cursor: progress; transform: none; }
.pf-btn-block.is-sending::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-btn-lg { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.4rem; font-weight: 600; }

/* Waiting / unlocked stage cards */
.pf-stage {
  position: relative; overflow: hidden; text-align: center; padding: 2.25rem 1.5rem 1.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.pf-stage h2 { font-size: 1.35rem; color: var(--navy-ink); margin: 0 0 .5rem; }
.pf-stage p { margin: 0 auto 1rem; max-width: 32rem; }
.pf-stage-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 1rem; }
.pf-stage-icon-ok { background: #e5f2e9; color: #1d6b3a; box-shadow: 0 0 0 10px rgba(29,107,58,.08); }
.pf-stage-icon-wait { background: #fff4d6; color: #8a5a00; box-shadow: 0 0 0 10px rgba(138,90,0,.07); }
.pf-stage-icon-wait svg { animation: pf-flip 2.4s ease-in-out infinite; }
@keyframes pf-flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.pf-tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pf-draw .6s .3s ease-out forwards; }
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
.pf-next { list-style: none; margin: 1.1rem auto 0; padding: 0; max-width: 22rem; text-align: left; display: grid; gap: .5rem; }
.pf-next li { position: relative; padding-left: 2rem; color: var(--ink-soft); font-size: .92rem; }
.pf-next li::before {
  content: ''; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
}
.pf-next li.is-done { color: var(--navy-ink); }
.pf-next li.is-done::before { background: #1d6b3a; border-color: #1d6b3a; box-shadow: inset 0 0 0 3px #fff; }
.pf-next li.is-current { color: var(--navy-ink); font-weight: 600; }
.pf-next li.is-current::before { border-color: #8a5a00; animation: pf-ping 1.6s ease-out infinite; }
@keyframes pf-ping { 0% { box-shadow: 0 0 0 0 rgba(138,90,0,.35); } 100% { box-shadow: 0 0 0 8px rgba(138,90,0,0); } }
.pf-confetti { position: absolute; inset: 0; pointer-events: none; }
.pf-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: pf-fall 2.6s ease-in forwards; }
.pf-confetti i:nth-child(3n)   { background: var(--gold); }
.pf-confetti i:nth-child(3n+1) { background: var(--navy); }
.pf-confetti i:nth-child(3n+2) { background: #1d6b3a; }
.pf-confetti i:nth-child(1)  { left: 4%;  animation-delay: .05s; }
.pf-confetti i:nth-child(2)  { left: 10%; animation-delay: .35s; }
.pf-confetti i:nth-child(3)  { left: 16%; animation-delay: .15s; }
.pf-confetti i:nth-child(4)  { left: 22%; animation-delay: .5s; }
.pf-confetti i:nth-child(5)  { left: 28%; animation-delay: .1s; }
.pf-confetti i:nth-child(6)  { left: 34%; animation-delay: .4s; }
.pf-confetti i:nth-child(7)  { left: 40%; animation-delay: .2s; }
.pf-confetti i:nth-child(8)  { left: 46%; animation-delay: .6s; }
.pf-confetti i:nth-child(9)  { left: 52%; animation-delay: 0s; }
.pf-confetti i:nth-child(10) { left: 58%; animation-delay: .45s; }
.pf-confetti i:nth-child(11) { left: 64%; animation-delay: .25s; }
.pf-confetti i:nth-child(12) { left: 70%; animation-delay: .55s; }
.pf-confetti i:nth-child(13) { left: 76%; animation-delay: .12s; }
.pf-confetti i:nth-child(14) { left: 82%; animation-delay: .38s; }
.pf-confetti i:nth-child(15) { left: 88%; animation-delay: .22s; }
.pf-confetti i:nth-child(16) { left: 94%; animation-delay: .48s; }
.pf-confetti i:nth-child(17) { left: 7%;  animation-delay: .7s; }
.pf-confetti i:nth-child(18) { left: 91%; animation-delay: .65s; }
@keyframes pf-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(320px) rotate(540deg); } }

/* Submission history */
.pf-history { margin-top: 1.5rem; }
.pf-history h2 { font-size: 1.05rem; color: var(--navy-ink); margin: 0 0 .75rem; }
.pf-history ul { list-style: none; margin: 0; padding: 0; }
.pf-history li { display: flex; gap: .75rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.pf-history li:first-child { border-top: 0; padding-top: 0; }
.pf-history li > div { display: grid; flex: 1; min-width: 0; }
.pf-history strong { color: var(--navy-ink); }
.pf-history-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.pf-history-reason { font-size: .82rem; color: #a61b1b; margin-top: .15rem; }

@media (max-width: 991.98px) { .pf-ticket { position: static; } }
@media (max-width: 640px) {
  .pf-hero { flex-direction: column; align-items: flex-start; padding: 1.4rem 1.25rem; }
  .pf-hero-amount { justify-items: start; min-width: 0; width: 100%; text-align: left; }
  .pf-card { padding: 1.2rem; }
}
@media (max-width: 560px) {
  .pf-progress { padding: 1rem .35rem; }
  .pf-progress-label { font-size: .72rem; }
  .pf-progress-dot { width: 30px; height: 30px; font-size: .82rem; }
  .pf-progress-step + .pf-progress-step::before { top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-hero h1, .pf-hero-amount, .pf-flow > *, .pf-progress-step.is-current .pf-progress-dot,
  .pf-stage-icon-wait svg, .pf-next li.is-current::before, .pf-drop-icon, .pf-btn-block { animation: none !important; transition: none; }
  .pf-tick { animation: none; stroke-dashoffset: 0; }
  .pf-confetti { display: none; }
}