/* Google Fonts — Poppins, the app-wide default (see --font-primary in
   application.css).

   This lives in its own file, named to sort FIRST under `require_tree .`
   ('_' precedes every letter), because the CSS spec only honours @import
   rules that appear before all other rules in a stylesheet. application.css
   uses `require_tree` + `require_self`, so anything written in
   application.css itself lands at the BOTTOM of the compiled bundle — an
   @import there is silently ignored by every browser, and the entire app
   falls back to system fonts. That is exactly the bug this file fixes; do
   not move the import back into application.css. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
/* ── Admin Details Portal (/admin-details) ───────────────────────────────────
   Super-Admin-only platform metrics.

   Deliberately mirrors the Client Admin portal's shell (see `.top-navbar`,
   `.sidebar`, `.nav-item`, `.table-container` in application.css) so the two
   read as one product: white 60px top bar, purple gradient sidebar with a cyan
   active accent, tables as white rounded cards.

   The values below are COPIED rather than shared because the Client Admin
   classes are bound to that portal's markup (fixed 220px offsets, company
   branding, tier gates). Keeping a parallel `.ad-*` namespace means restyling
   one portal can't accidentally break the other. If the brand palette moves,
   both need updating — the tokens are all in :root here.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --ad-purple:        #4b3f9c;   /* sidebar top / primary actions           */
  --ad-purple-deep:   #3d3380;   /* sidebar bottom of gradient             */
  --ad-purple-dark:   #272030;   /* headings                                */
  --ad-cyan:          #5dd5e8;   /* active nav accent                       */
  --ad-purple-soft:   #f1effb;
  --ad-border:        #e5e7eb;
  --ad-text:          #1f2937;
  --ad-muted:         #6b7280;
  --ad-topbar-h:      60px;
  --ad-sidebar-w:     220px;
}

/* ══ Auth (login / set password) ═══════════════════════════════════════════ */

.ad-auth-body {
  font-family: var(--font-primary);
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, var(--ad-purple-dark) 0%, var(--ad-purple) 55%, var(--ad-purple-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ad-auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 420px;
  padding: 40px;
}

.ad-auth-logo {
  display: block;
  margin: 0 auto 18px;
  height: 44px;
  width: auto;
}

.ad-auth-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ad-purple-dark);
  margin: 0 0 4px;
}

.ad-auth-subtitle {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ad-muted);
  margin: 0 0 28px;
}

/* ══ Shell ═════════════════════════════════════════════════════════════════ */

.ad-body {
  font-family: var(--font-primary);
  margin: 0;
  min-height: 100vh;
  background: #f7f8fa;
  color: var(--ad-text);
}

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

.ad-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ad-topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--ad-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1001;   /* above the sidebar, which starts below it */
}

.ad-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Larger than the Client Admin portal's 30px: this bar carries the logo alone
   (no wordmark beside it), so it can afford the height. Capped at 44px to keep
   breathing room inside the 60px bar. */
.ad-topbar-logo {
  height: 44px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}

.ad-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ad-topbar-role {
  color: var(--ad-muted);
  font-size: 13px;
}

.ad-topbar-user {
  font-weight: 600;
  font-size: 13px;
  color: var(--ad-text);
}

.ad-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ad-purple), var(--ad-purple-dark));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

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

.ad-sidebar {
  position: fixed;
  top: var(--ad-topbar-h);
  left: 0;
  width: var(--ad-sidebar-w);
  height: calc(100vh - var(--ad-topbar-h));
  background: linear-gradient(180deg, var(--ad-purple) 0%, var(--ad-purple-deep) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.ad-nav {
  flex: 1;
  padding: 12px 0;
}

.ad-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  /* Transparent border reserves the 2px the active state adds, so the label
     doesn't shift sideways when you land on a page. */
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.ad-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ad-nav-link.ad-nav-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  border-left: 2px solid var(--ad-cyan);
}

.ad-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ad-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ad-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.15s ease;
}

.ad-logout:hover {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

/* ── Main ────────────────────────────────────────────────────────────────── */

.ad-main {
  margin-left: var(--ad-sidebar-w);
  margin-top: var(--ad-topbar-h);
  min-width: 0;   /* lets wide tables scroll instead of stretching the shell */
  padding: 28px 32px 48px;
}

.ad-page-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ad-purple-dark);
  margin: 0;
  letter-spacing: -0.01em;
}

.ad-page-subtitle {
  font-size: 0.85rem;
  color: var(--ad-muted);
  margin: 4px 0 24px;
}

.ad-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Stat tiles ──────────────────────────────────────────────────────────── */

.ad-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.ad-stat {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 18px 20px;
  border-top: 3px solid transparent;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ad-stat:hover {
  box-shadow: 0 6px 18px rgba(39, 32, 48, 0.1);
  transform: translateY(-1px);
}

/* A quiet brand accent along the top edge, echoing the sidebar gradient. */
.ad-stat-accent-bar { border-top-color: var(--ad-purple); }
.ad-stat-warn-bar   { border-top-color: #f59e0b; }
.ad-stat-cyan-bar   { border-top-color: var(--ad-cyan); }

.ad-stat-label {
  font-size: 0.78rem;
  color: var(--ad-muted);
  margin-bottom: 8px;
}

.ad-stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ad-purple-dark);
  margin-bottom: 8px;
}

.ad-stat-value.ad-stat-accent { color: var(--ad-purple); }
.ad-stat-value.ad-stat-warn   { color: #b45309; }

.ad-stat-meta {
  font-size: 0.74rem;
  color: #9ca3af;
}

.ad-stat-meta a { color: var(--ad-purple); text-decoration: none; font-weight: 500; }
.ad-stat-meta a:hover { text-decoration: underline; }

/* ── Panel ───────────────────────────────────────────────────────────────── */

.ad-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 22px;
}

.ad-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ad-panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ad-purple-dark);
  margin: 0;
}

.ad-panel-meta {
  font-size: 0.78rem;
  color: var(--ad-muted);
  margin: 4px 0 0;
}

.ad-empty {
  font-size: 0.85rem;
  color: var(--ad-muted);
  padding: 8px 0;
}

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

.ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.ad-btn-primary {
  background: linear-gradient(135deg, var(--ad-purple), var(--ad-purple-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(75, 63, 156, 0.25);
}

.ad-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(75, 63, 156, 0.32);
}

.ad-btn-secondary {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
}

.ad-btn-secondary:hover { background: #f9fafb; }

.ad-btn-danger {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}

.ad-btn-danger:hover { background: #fef2f2; }

.ad-btn-danger-solid {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.ad-btn-danger-solid:hover { background: #991b1b; }

.ad-btn-block { width: 100%; justify-content: center; }

.ad-btn:disabled,
.ad-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ad-btn-sm {
  padding: 5px 10px;
  font-size: 0.72rem;
  border-radius: 6px;
}

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

.ad-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}

.ad-input {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  color: var(--ad-text);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.ad-input:focus {
  outline: none;
  border-color: var(--ad-purple);
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.14);
}

.ad-hint {
  font-size: 0.74rem;
  color: var(--ad-muted);
  margin: -10px 0 16px;
}

.ad-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ad-filters .ad-input { margin-bottom: 0; width: auto; min-width: 240px; }

/* ── Flash ───────────────────────────────────────────────────────────────── */

.ad-flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 18px;
  border: 1px solid;
}

.ad-flash-notice {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.ad-flash-alert {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.ad-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ad-chip-green  { background: #dcfce7; color: #166534; }
.ad-chip-grey   { background: #f3f4f6; color: #4b5563; }
.ad-chip-amber  { background: #fef3c7; color: #92400e; }
.ad-chip-purple { background: var(--ad-purple-soft); color: var(--ad-purple); }
.ad-chip-red    { background: #fee2e2; color: #991b1b; }

/* Plan-name chips run long — the longest today is 28 chars ("Core 101–200
   users (Monthly)"), ~188px. `nowrap` above is right for short status chips
   ("Active"), but in a `table-layout: fixed` cell a nowrap chip that exceeds
   its column doesn't wrap or clip — it OVERFLOWS into the neighbouring column,
   which is what collided Current Plan with Subscription Ends.
   The Current Plan column is sized to fit 28 chars on one line, so this wrap
   should never trigger today; it's the safety net for when someone adds a
   longer plan name, so the failure mode is an ugly two-line pill rather than
   unreadable overlapping text. */
.ad-chip-multiline {
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* Card-wrapped, matching `.table-container` / `.students-table` in the Client
   Admin portal — replaces the older grey-uppercase `.sa-table` look inherited
   from the legacy Admn_V2 port. */

.ad-table-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Horizontal scroll only. No `overflow-y`/`max-height`: the page scrolls
   instead, matching the app's tables. The row menus are `position: fixed`
   (see row_menu_controller.js) so they still escape this container. */
.ad-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ad-table {
  width: 100%;
  border-collapse: collapse;
}

.ad-table thead { background: #f9fafb; }

.ad-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--ad-purple-dark);
  font-size: 13px;
  border-bottom: 1px solid var(--ad-border);
  white-space: nowrap;
}

.ad-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  word-break: break-word;
}

.ad-table tbody tr:last-child td { border-bottom: none; }
.ad-table tbody tr { transition: background 0.12s ease; }
.ad-table tbody tr:hover td { background: #fafbff; }

.ad-table .ad-muted-cell { color: #9ca3af; }
.ad-table .ad-sub-cell {
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

/* The Companies grid carries 10 columns; below this the cells lose words, so
   scroll horizontally rather than squeeze. */
.ad-table-wide { min-width: 1500px; table-layout: fixed; }

/* ── Row actions: 3-dot menu ─────────────────────────────────────────────── */

.ad-actions { position: relative; }

.ad-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ad-dots:hover {
  background: var(--ad-purple-soft);
  border-color: var(--ad-purple);
  color: var(--ad-purple);
}

/* `fixed`, not `absolute` — the table wrapper scrolls (overflow-x) and would
   clip an absolutely-positioned menu. Coordinates are set by
   row_menu_controller at open time; it also flips the menu above the button
   near the viewport bottom. Nothing in this portal's shell sets a `transform`,
   which would otherwise make this menu's containing block the wrapper again
   and reintroduce the clipping. */
.ad-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  min-width: 244px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--ad-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(39, 32, 48, 0.18);
}

.ad-menu.hidden { display: none; }

.ad-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ad-menu-item:hover {
  background: var(--ad-purple-soft);
  color: var(--ad-purple);
}

.ad-menu-item-danger { color: #b91c1c; }
.ad-menu-item-danger:hover { background: #fef2f2; color: #991b1b; }

.ad-menu-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.ad-menu-divider {
  height: 1px;
  margin: 5px 8px;
  background: var(--ad-border);
}

/* button_to wraps each item in its own <form>; without this the forms stack as
   block elements and the menu items lose their full-width hit area. */
.ad-menu form { display: block; width: 100%; }

/* Icon-only row actions, matching the Client Admin students table. Text
   buttons wrapped onto a second line here and made every row two lines tall;
   `nowrap` keeps them on one. Each carries a `title` + `aria-label`, since an
   icon alone isn't a label. */
.ad-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.ad-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ad-border);
  border-radius: 7px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ad-icon-btn svg { width: 15px; height: 15px; }

.ad-icon-btn:hover {
  background: var(--ad-purple-soft);
  color: var(--ad-purple);
  border-color: var(--ad-purple);
}

.ad-icon-btn-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.ad-icon-btn-success:hover {
  background: #ecfdf5;
  color: #166534;
  border-color: #a7f3d0;
}

.ad-menu form,
.ad-row-actions form { display: inline-flex; }

/* ── Modals (pairs with .modal-overlay / .modal-content in application.css) ── */

.ad-modal {
  width: min(520px, 100%);
  padding: 24px;
  border-radius: 14px;
}

.ad-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ad-purple-dark);
  margin: 0;
}

.ad-modal-sub {
  font-size: 0.8rem;
  color: var(--ad-muted);
  margin: 4px 0 18px;
}

.ad-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

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

@media (max-width: 860px) {
  .ad-sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .ad-nav { display: flex; flex-wrap: wrap; padding: 8px; }
  .ad-nav-link { border-left: none; border-radius: 6px; }
  .ad-nav-link.ad-nav-active { border-left: none; }

  .ad-main {
    margin-left: 0;
    padding: 20px 16px 36px;
  }

  .ad-topbar-role, .ad-topbar-user { display: none; }
}

/* ── Learnophia Library catalog ─────────────────────────────────────────── */

.lib-brandbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--ad-purple) 0%, var(--ad-purple-deep) 60%, #2c2560 100%);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(61, 51, 128, 0.6);
}
.lib-brandbar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lib-brandbar-sub { font-size: 13px; opacity: 0.82; margin-top: 2px; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.lib-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ad-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(61, 51, 128, 0.5);
  border-color: var(--ad-purple);
}

/* overflow + min-height are load-bearing, not decoration: this is a flex item
   in a column card, and a flex item's automatic minimum size can override
   aspect-ratio when the image's intrinsic height is larger — which is how
   mixed-dimension uploads produced covers of differing heights. */
.lib-card-cover { position: relative; aspect-ratio: 16 / 9; background: var(--ad-purple-soft); overflow: hidden; min-height: 0; }
.lib-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-card-cover-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ad-purple), var(--ad-cyan));
}
.lib-card-access { position: absolute; top: 10px; left: 10px; }

.lib-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.lib-card-title {
  font-size: 15px; font-weight: 700; color: var(--ad-purple-dark);
  line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card-meta { font-size: 12.5px; color: var(--ad-muted); margin: 0; }
/* margin-left:0 cancels the `margin-left:auto` inherited from `.course-actions`,
   which the card also carries for its icon-button styling. That rule was written
   for a horizontal list row and would otherwise shrink-wrap this row to the right. */
.lib-card-actions { display: flex; gap: 8px; margin-top: auto; margin-left: 0; padding-top: 10px; flex-wrap: wrap; }
.lib-card-actions form { margin: 0; }

.lib-pagination { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 26px; }

/* ── Super Admin access-level checkboxes (super_admins/_form) ─────────────── */
.ad-access-fieldset { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px 16px; margin: 18px 0 6px; }
.ad-access-fieldset legend { padding: 0 6px; }
.ad-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.ad-access-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; background: #fff; }
.ad-access-option:hover { border-color: #a5b4fc; background: #f8faff; }
.ad-access-option input[type="checkbox"] { margin-top: 3px; accent-color: #4f46e5; width: 15px; height: 15px; flex: none; }
.ad-access-option > span { display: flex; flex-direction: column; gap: 2px; }
.ad-access-label { font-weight: 600; font-size: 13.5px; color: #111827; }
.ad-access-desc { font-size: 12px; color: #6b7280; line-height: 1.35; }
.ad-access-locked { background: #fafafa; cursor: not-allowed; }
.ad-access-locked:hover { border-color: #e5e7eb; background: #fafafa; }

/* "Access" column chips on the Super Admins listing */
.ad-access-cell { display: flex; flex-wrap: wrap; gap: 4px; }
/* ── Client Admin → Announcements ──────────────────────────────────────────
   Fresh `ann-` prefix throughout; everything else on these screens reuses the
   existing students-table / learnophia-card / cb-form / team-btn kits. */

.ann-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ann-tag--important { background: #fee2e2; color: #b91c1c; }
.ann-tag--pinned    { background: #fef3c7; color: #92400e; }
.ann-tag--published { background: #dcfce7; color: #15803d; }
.ann-tag--scheduled { background: #dbeafe; color: #1d4ed8; }
.ann-tag--draft     { background: #f3f4f6; color: #4b5563; }

.ann-read-bar-wrap { display: flex; align-items: center; gap: 8px; }
.ann-read-bar {
  flex: 1;
  max-width: 110px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ann-read-fill { height: 100%; background: #6d28d9; border-radius: 999px; }
.ann-read-pct { font-size: 12px; color: #475569; font-variant-numeric: tabular-nums; }

.ann-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 14px;
}
.ann-back-link:hover { color: #374151; }

/* Radio-card options (audience + publishing) */
.ann-audience-options { display: flex; flex-direction: column; gap: 10px; }
.ann-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.ann-choice:hover { border-color: #c4b5fd; background: #faf9ff; }
.ann-choice input[type="radio"] { margin-top: 3px; accent-color: #6d28d9; flex: none; }
.ann-choice-name { display: block; font-weight: 600; font-size: 13.5px; color: #111827; }
.ann-choice-desc { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }

.ann-preview-body { font-size: 14px; color: #374151; line-height: 1.65; }
.ann-preview-body p { margin: 0 0 12px; }
/* Branches — Client Admin Portal. Reuses the team_management.css base
   (chips, table, buttons) and adds branch-specific bits: tab strip, color
   swatch, slug pill, picker toolbar. */

.branch-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.branch-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.branch-tab:hover {
  color: #0f172a;
}
.branch-tab.active {
  color: #0f172a;
  border-bottom-color: #0f172a;
  font-weight: 600;
}

.branch-color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.branch-slug-code {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 12px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  color: #475569;
}

.branch-color-input {
  width: 48px;
  height: 38px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

/* ─── Branch show page header ─────────────────────────────────────────── */

.branch-back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.branch-back-arrow:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* ─── Branch Details tab — aligned 2-column grid with info tooltips ──── */

.branch-detail-grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  row-gap: 0;
  column-gap: 24px;
  margin: 0;
}
.branch-detail-grid dt,
.branch-detail-grid dd {
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
  margin: 0;
}
.branch-detail-grid dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.branch-detail-grid dd {
  font-size: 14px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  word-break: break-word;
}
.branch-detail-grid dt:last-of-type,
.branch-detail-grid dd:last-of-type {
  border-bottom: none;
}

/* Branded-login-URL info pill — re-uses the Course Builder `.cb-icon-btn`
   tooltip widget (data-tooltip attribute) so the dark-pill tooltip looks
   identical to every other action button in the app. Override only the
   size/shape since `.cb-icon-btn` defaults to a full button. */
.branch-detail-info-pill.cb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, serif;
  font-style: italic;
  border: none;
  cursor: help;
  position: relative;
}
.branch-detail-info-pill.cb-icon-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}

/* Reposition the inherited tooltip to the RIGHT of the pill instead of
   above. Above-centered would get clipped or hidden behind the fixed
   sidebar (z-index 1000) on narrow viewports. Right-side keeps the
   tooltip inside the main content area and bumps z-index so nothing
   covers it.

   `text-transform: none`, `font-style: normal`, `letter-spacing: normal`,
   and `font-family: inherit-from-body` reset the inherited styles from
   the parent <dt> (UPPERCASE + 0.04em tracking) and from the pill itself
   (Georgia italic) — without these, the tooltip text would render in
   italic ALL-CAPS Georgia, which is not what we want. */
.branch-detail-info-pill.cb-icon-btn[data-tooltip]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  background: #0f172a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  line-height: 1.4;
  text-align: left;
  z-index: 1100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.branch-detail-info-pill.cb-icon-btn[data-tooltip]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 1px);
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #0f172a;
  border-top-color: transparent;
  z-index: 1101;
}

.branch-detail-link {
  color: #0891b2;
  text-decoration: none;
}
.branch-detail-link:hover { text-decoration: underline; }

.branch-detail-logo {
  max-height: 40px;
  max-width: 180px;
  vertical-align: middle;
}

.branch-detail-muted {
  color: #64748b;
  font-size: 12px;
}

.branch-detail-hex {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #475569;
}

/* ─── Branch New / Edit form — matches Details tab visual language ──── */

.branch-form-field {
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}
.branch-form-field:last-of-type { border-bottom: none; }

.branch-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* Side-by-side row layout for compact fields (Theme color + Status).
   Each column's control fills its full width at exactly 40px height so
   the row reads as one balanced unit. */
.branch-form-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.branch-form-col { display: flex; flex-direction: column; }
@media (max-width: 720px) {
  .branch-form-field-row { grid-template-columns: 1fr; }
}

/* Theme color: swatch button + hex text, sharing one inset row that
   visually reads like a single input (border around both). */
.branch-form-color-row {
  display: flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.branch-form-color-row:focus-within {
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.branch-form-color-swatch {
  width: 52px;
  height: 100%;
  border: none;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  border-right: 1px solid #e2e8f0;
}
.branch-form-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.branch-form-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.branch-form-color-hex {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  color: #0f172a;
  background: transparent;
}

/* Status: two equal-width radio pills filling the column at 40px. */
.branch-form-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.branch-form-radio-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.branch-form-radio-pill:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.branch-form-radio-pill:has(input:checked) {
  border-color: #0f172a;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}
.branch-form-radio-pill input { margin: 0; accent-color: #0f172a; }

/* Logo dropzone — click-anywhere card that hides the native file input
   and surfaces the current/pending filename + a visual upload prompt. */
.branch-logo-dropzone {
  display: block;
  cursor: pointer;
  padding: 22px 24px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.branch-logo-dropzone:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.branch-logo-dropzone.has-pending {
  border-color: #16a34a;
  background: #f0fdf4;
}

.branch-logo-input {
  /* Hide the native input but keep it focusable + clickable via the
     wrapping <label>. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.branch-logo-dropzone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #475569;
  text-align: center;
}
.branch-logo-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.branch-logo-dropzone-sub {
  font-size: 12px;
  color: #64748b;
}

/* Layout when a logo is already attached — image + filename side by side. */
.branch-logo-current {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
}
.branch-logo-current-img {
  max-height: 56px;
  max-width: 160px;
  border-radius: 6px;
  background: #fff;
  padding: 4px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.branch-logo-current-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.branch-logo-current-filename {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
}
.branch-logo-current-hint {
  font-size: 12px;
  color: #64748b;
}

.branch-logo-preview {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.branch-logo-preview img {
  max-height: 40px;
  max-width: 160px;
}
.branch-logo-filename {
  font-size: 12px;
  color: #475569;
  word-break: break-all;
}

.branch-tab-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.branch-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Unified section header used by every branch sub-tab ───────────── */

.branch-tab-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.branch-tab-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.branch-tab-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.branch-tab-section-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Add-control row on the right — same height + spacing everywhere
   so the visual rhythm between admins/students/courses/files matches. */
.branch-tab-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.branch-tab-input {
  /* Fixed width so the dropdown is exactly the same size across Admins,
     Students, and Courses tabs — min/max-width with flex was letting
     each tab render slightly differently depending on its content. */
  width: 360px;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.branch-tab-input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Legacy modifier kept as a no-op for any partials still referencing it
   so we don't have to scrub every <select class="…branch-tab-input-wide">
   in the project; width is now uniform. */
.branch-tab-input-wide { width: 360px; }

/* ─── Custom dropdown picker — Admins / Students / Courses ──────────── */

.branch-picker {
  position: relative;
  width: 360px;
}

.branch-picker-trigger {
  /* Same look as a native input. The little caret on the right makes it
     obviously a dropdown. */
  width: 100%;
  height: 38px;
  padding: 0 36px 0 12px;
  font-size: 14px;
  text-align: left;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #0f172a;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-picker-trigger:hover { border-color: #94a3b8; }
.branch-picker-trigger:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Placeholder state — show greyed text until a real option is chosen. */
.branch-picker-trigger[data-placeholder="true"] { color: #94a3b8; }

.branch-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  z-index: 50;
  padding: 4px;
}

/* Sticky search input pinned to the top of the scrollable panel so it
   stays visible while the operator scrolls through long lists. */
.branch-picker-search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  margin: 0 0 4px;
  font-size: 13px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  outline: none;
}
.branch-picker-search::placeholder { color: #94a3b8; }
.branch-picker-search:focus {
  border-color: #4b3f9c;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(75, 63, 156, 0.15);
}

.branch-picker-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: #0f172a;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-picker-option:hover,
.branch-picker-option:focus {
  background: #f1f5f9;
  outline: none;
}

.branch-picker-empty {
  padding: 12px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}

/* Files tab — file-picker trigger styled to match the dropdown height. */
.branch-tab-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.branch-tab-file-trigger:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.branch-tab-shared-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.branch-tab-shared-toggle input { margin: 0; accent-color: #0f172a; }

/* Left-align the Actions column header + cells across all 4 tabs so the
   action icons sit directly under the "Actions" header text. */
.branch-tab-actions-th,
.branch-tab-actions-td {
  text-align: left;
  white-space: nowrap;
}

/* Per-row Shared toggle on the Files tab.
   Visual switch backed by a real form submit (PATCH) — keyboard/AT users
   can tab to it and hit Enter just like any button. */
.branch-shared-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  transition: background 0.15s, color 0.15s;
}
.branch-shared-toggle:hover {
  background: #f1f5f9;
}
.branch-shared-toggle.is-on { color: #15803d; }
.branch-shared-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.18s;
}
.branch-shared-toggle.is-on .branch-shared-track { background: #16a34a; }
.branch-shared-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.18s;
}
.branch-shared-toggle.is-on .branch-shared-thumb { left: 16px; }
.branch-shared-label {
  min-width: 50px;
  text-align: left;
}

/* ─── Inactive-branch banner (show page) ─────────────────────────────────
   Refined slate look — informational, not alarming. Two-line text
   hierarchy on the left (bold title + secondary explainer), outlined CTA
   on the right rail. Pause-icon glyph uses a circular slate badge so it
   reads as a status marker, not an error symbol. */
.branch-inactive-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #f8fafc;                       /* slate-50  */
  border: 1px solid #e2e8f0;                 /* slate-200 */
  border-radius: 12px;
  color: #0f172a;                            /* slate-900 */
}
.branch-inactive-banner-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #e2e8f0;                       /* slate-200 */
  color: #475569;                            /* slate-600 */
}
.branch-inactive-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.branch-inactive-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.branch-inactive-banner-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: #64748b;                            /* slate-500 */
}
.branch-inactive-banner-cta {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;                 /* slate-300 */
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.branch-inactive-banner-cta:hover {
  background: #f1f5f9;                       /* slate-100 */
  border-color: #94a3b8;                     /* slate-400 */
}

/* ─── Muted row on the branches index when inactive ──────────────────── */
.team-table tr.branch-row-inactive td {
  color: #94a3b8;
  background: #fafafa;
}
.team-table tr.branch-row-inactive td a.team-name-cell { color: #94a3b8 !important; }

/* ─── Aligned label rows for form columns ────────────────────────────
   Used by the Student form's Email/Password row where one column has a
   plain label and the other has a label + a small action button (e.g.
   "↺ Generate new"). Both columns wrap their label in this row so the
   shared `min-height` reserves the same vertical space — inputs below
   then start at the exact same y-coordinate. */
.branch-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  min-height: 30px;        /* ≈ height of the inline action button */
}

/* ─── Multi-select picker option rows ────────────────────────────────
   Used by the `multi-picker` Stimulus controller. Same visual chrome
   as `.branch-picker-option` (the single-select sibling) but each row
   wraps a checkbox + label so the operator can toggle multiple. */
.multi-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #0f172a;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-picker-option:hover {
  background: #f1f5f9;
}
.multi-picker-option input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  accent-color: #0f172a;
}
.multi-picker-option:has(input:checked) {
  background: #eef2ff;        /* indigo-50 — checked state */
  color: #1e1b4b;             /* indigo-900 */
  font-weight: 500;
}
.multi-picker-option span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ── Community board ──────────────────────────────────────────────────────
   Shared between the student portal (dashboard tab + standalone discussion
   pages) and the client-admin moderation screens. Fresh `cm-` prefix
   throughout; nothing existing is restyled. */

/* Layout for the standalone student pages (below the slim topbar). */
.cm-page { margin: 84px 0 40px; padding: 0 28px; font-family: var(--font-primary, "Poppins", sans-serif); }
.cm-page--narrow { }

.cm-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #6b7280; text-decoration: none; margin-bottom: 14px;
}
.cm-back-link:hover { color: #374151; }

.cm-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 16px;
}
.cm-card-title { font-size: 14.5px; font-weight: 600; color: #111827; margin: 0 0 12px; }
.cm-muted { font-size: 13px; color: #9ca3af; }

/* Toolbar (search + new post) */
.cm-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cm-search {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 12px; color: #9ca3af;
}
.cm-search input { border: none; outline: none; flex: 1; font-size: 13.5px; background: transparent; color: #111827; }
.cm-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sp-accent, #4b3f9c); color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cm-new-btn:hover { filter: brightness(0.92); color: #fff; }
.cm-secondary-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cm-secondary-btn:hover { background: #f9fafb; }
.cm-danger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cm-danger-btn:hover { background: #fef2f2; }
.cm-plain-btn {
  background: none; border: none; padding: 0; font-size: 12px; color: #6b7280;
  cursor: pointer; text-decoration: none;
}
.cm-plain-btn:hover { color: #374151; text-decoration: underline; }
.cm-plain-btn--danger { color: #b91c1c; }

/* Topic chips */
.cm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
  padding: 5px 13px; font-size: 12.5px; font-weight: 500; color: #374151;
  text-decoration: none; cursor: pointer;
}
.cm-chip:hover { border-color: #a5b4fc; }
.cm-chip.active { background: var(--sp-accent, #4b3f9c); border-color: var(--sp-accent, #4b3f9c); color: #fff; }
.cm-chip-count { font-size: 11px; opacity: 0.75; }
.cm-chip--radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cm-chip--radio { position: relative; }

/* Feed cards */
.cm-post-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
.cm-post-card:hover { border-color: #c4b5fd; background: #fdfcff; }
.cm-post-card--pinned { border-left: 3px solid #f59e0b; }
.cm-post-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cm-post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.cm-post-author { font-weight: 600; color: #111827; font-size: 12.5px; }
.cm-post-when { color: #9ca3af; }
.cm-post-title { font-weight: 600; font-size: 14.5px; color: #111827; }
.cm-post-snippet { font-size: 13px; color: #6b7280; line-height: 1.45; }
.cm-post-stats { display: flex; gap: 14px; font-size: 12px; color: #9ca3af; margin-top: 2px; }
.cm-post-stats span { display: inline-flex; align-items: center; gap: 5px; }
.cm-feed-count { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 14px; }

.cm-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ede9fe; color: var(--sp-accent, #4b3f9c); font-weight: 700; font-size: 13px;
}
.cm-avatar--sm { width: 30px; height: 30px; font-size: 11px; }

.cm-badge-admin {
  display: inline-flex; padding: 1px 8px; border-radius: 999px;
  background: var(--sp-accent, #4b3f9c); color: #fff; font-size: 10.5px; font-weight: 600;
}
.cm-tag-pinned {
  display: inline-flex; padding: 1px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600;
}
.cm-tag-topic {
  display: inline-flex; padding: 1px 8px; border-radius: 999px;
  background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 600;
}
.cm-helpful-badge {
  display: inline-flex; padding: 1px 8px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 600;
}

/* Discussion page */
.cm-thread-head { display: flex; gap: 12px; }
.cm-thread-main { flex: 1; min-width: 0; }
.cm-thread-title { font-size: 17px; font-weight: 700; color: #272030; margin: 4px 0 10px; }
.cm-thread-body { font-size: 14px; color: #334155; line-height: 1.6; }
.cm-thread-body p { margin: 0 0 12px; }
.cm-thread-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

.cm-like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer;
}
.cm-like-btn:hover { border-color: #a5b4fc; }
.cm-like-btn.liked { background: #ede9fe; border-color: var(--sp-accent, #4b3f9c); color: var(--sp-accent, #4b3f9c); }
.cm-like-btn--sm { padding: 3px 10px; font-size: 12px; }

.cm-comment { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #f3f4f6; }
.cm-comment:first-of-type { border-top: none; }
.cm-comment-main { flex: 1; min-width: 0; }
.cm-comment-body { font-size: 13.5px; color: #334155; line-height: 1.55; margin: 4px 0 8px; white-space: pre-line; }
.cm-comment-actions { display: flex; gap: 12px; align-items: center; }

/* Forms */
.cm-field { margin-bottom: 16px; }
.cm-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.cm-required { color: #dc2626; }
.cm-input {
  width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 9px 12px; font-size: 13.5px; color: #111827;
}
.cm-hint { font-size: 12px; color: #9ca3af; margin: 6px 0 0; }
.cm-composer {
  width: 100%; min-height: 90px; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; color: #111827; resize: vertical;
}
.cm-guidelines {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 16px; font-size: 12.5px; color: #64748b; margin-bottom: 18px;
}
.cm-form-footer { display: flex; justify-content: flex-end; gap: 10px; }
.cm-errors {
  border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; color: #b91c1c; font-size: 13px;
}
.cm-errors ul { margin: 6px 0 0 18px; list-style: disc; }

.cm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 20px; color: #9ca3af;
  background: #fff; border: 1px dashed #e5e7eb; border-radius: 12px;
}
.cm-empty p { margin: 0; font-size: 14px; }

/* Font safety net — buttons/inputs don't inherit by default. */
.cm-page button, .cm-page input, .cm-page textarea,
.cm-card button, .cm-card input, .cm-card textarea,
.cm-new-btn, .cm-secondary-btn, .cm-like-btn, .cm-chip {
  font-family: var(--font-primary, "Poppins", sans-serif);
}
.course-player-body {
  --learnophia-dark: #272030;
  --learnophia-primary: #4b3f9c;
  --learnophia-secondary: #958ddb;
  --learnophia-light: #d8c2f8;
  --learnophia-accent: #86e8f8;
  --bg-primary: #f9fafb;
  --bg-secondary: #fff;
  --bg-tertiary: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-active: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --border-light: #d1d5db;
  --shadow-color: rgba(0, 0, 0, 0.06);
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--bg-primary);
}

.course-player-body * {
  box-sizing: border-box;
}

.top-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 30px var(--shadow-color);
}

.top-nav-left,
.top-nav-center,
.top-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-link,
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--learnophia-dark);
  background: linear-gradient(135deg, var(--learnophia-accent), #5dd8e8);
  box-shadow: 0 4px 15px rgba(134, 232, 248, 0.4);
  transition: all 0.25s ease;
}

.back-link {
  padding: 8px 14px;
  border: 1px solid var(--learnophia-accent);
  border-radius: 10px;
}

.back-link:hover,
.nav-btn:hover {
  color: var(--learnophia-dark);
  transform: translateY(-2px);
  background: linear-gradient(135deg, #5dd8e8, #3cc8d8);
  box-shadow: 0 8px 25px rgba(134, 232, 248, 0.45);
}

.nav-btn.disabled,
.logout-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--text-muted);
  text-decoration: none;
}

.nav-btn.disabled {
  pointer-events: none;
  opacity: 0.45;
  background: var(--bg-tertiary);
  box-shadow: none;
}

.nav-btn.nav-btn-finish {
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
  cursor: pointer;
}

.nav-btn.nav-btn-finish:hover {
  color: #fff;
  background: linear-gradient(135deg, #059669, #047857);
}

/* Disabled state for Finish — kicks in until every activity in the course
   is marked completed. Visually muted + non-interactive to make the
   "you're not done yet" affordance unambiguous. */
.nav-btn.nav-btn-finish.nav-btn-disabled,
.nav-btn.nav-btn-finish[disabled] {
  background: #d1d5db;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.75;
}
.nav-btn.nav-btn-finish.nav-btn-disabled:hover,
.nav-btn.nav-btn-finish[disabled]:hover {
  background: #d1d5db;
  color: #6b7280;
}

.nav-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  border-radius: 25px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.nav-current {
  color: var(--learnophia-primary);
  font-weight: 700;
}

.player-container {
  display: flex;
  min-height: calc(100vh - 64px);
  margin-top: 64px;
}

.sidebar {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 320px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  box-shadow: 4px 0 30px var(--shadow-color);
  transition: transform 0.3s ease;
}

.sidebar.collapsed {
  transform: translateX(-320px);
}

.sidebar-toggle {
  position: fixed;
  top: 80px;
  left: 320px;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 3px;
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: var(--bg-secondary);
  color: var(--text-muted);
  box-shadow: 2px 0 8px var(--shadow-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar-toggle::after {
  content: "◀";
  font-size: 8px;
}

.sidebar.collapsed + .sidebar-toggle {
  left: 0;
}

.sidebar.collapsed + .sidebar-toggle::after {
  content: "▶";
}

.sidebar-header-wrapper {
  perspective: 1000px;
  margin: 8px;
  min-height: 220px;
}

.sidebar-header-flipper {
  position: relative;
  min-height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.sidebar-header-wrapper:hover .sidebar-header-flipper {
  transform: rotateY(180deg);
}

.sidebar-header,
.sidebar-header-back {
  position: relative;
  min-height: 200px;
  padding: 24px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: white;
  backface-visibility: hidden;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-header-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotateY(180deg);
}

.course-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--learnophia-primary);
  border-radius: 20px;
  background: #f5f0ff;
  color: var(--learnophia-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.course-title {
  margin: 0 0 20px;
  color: var(--text-primary);
  font-family: Cambria, Georgia, serif;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.3;
}

/* Admin-entered course duration, shown under the title when set. */
.course-duration-line {
  margin: -14px 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  border: 3px solid var(--learnophia-light);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--learnophia-accent), var(--learnophia-primary));
  color: var(--learnophia-dark);
  font-size: 32px;
  font-weight: 700;
}

.user-name {
  margin-bottom: 6px;
  font-family: Cambria, Georgia, serif;
  font-size: 1.4em;
  font-weight: 700;
}

.user-email {
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 0.85em;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--learnophia-primary);
  border-radius: 25px;
  background: #f5f0ff;
  color: var(--learnophia-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.progress-wrapper {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #f9fafb;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.progress-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.progress-percent {
  color: var(--learnophia-primary);
  font-size: 22px;
  font-weight: 700;
}

.progress-container {
  height: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #e5e7eb;
}

.progress-bar {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--learnophia-accent), var(--learnophia-primary));
  transition: width 0.6s ease;
}

.progress-text {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.sections-container {
  padding: 0;
}

.section {
  border-bottom: 1px solid var(--border-color);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.section-header:hover {
  background: var(--bg-hover);
}

.section-header.active {
  border-left: 3px solid var(--learnophia-accent);
  background: linear-gradient(to right, rgba(134, 232, 248, 0.15), transparent);
}

.section-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.section.expanded .section-toggle {
  transform: rotate(90deg);
  color: var(--learnophia-primary);
}

.section-title {
  flex: 1;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.section-status {
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.section-status.section-complete {
  padding: 4px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.section-status.section-soon {
  background: #fef3c7;
  color: #d97706;
}

.section-locked .section-header {
  cursor: default;
  opacity: 0.7;
}

.section-locked .section-toggle {
  color: #9ca3af;
}

.activities-list {
  display: none;
  padding: 6px 0;
  background: var(--bg-primary);
}

.section.expanded .activities-list {
  display: block;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 10px 48px;
  border-left: 3px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.activity-item:hover {
  border-left-color: var(--border-light);
  color: var(--text-primary);
  background: var(--bg-active);
}

.activity-item.active {
  border-left-color: var(--learnophia-accent);
  color: var(--learnophia-primary);
  background: var(--bg-active);
  box-shadow: inset 0 0 20px rgba(134, 232, 248, 0.1);
}

.activity-icon {
  width: 28px;
  font-size: 18px;
  text-align: center;
}

.activity-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.activity-item.active .activity-title {
  color: var(--learnophia-primary);
  font-weight: 600;
}

.status-completed,
.status-progress,
.status-not-started {
  font-size: 16px;
}

.status-completed {
  color: #10b981;
  font-weight: bold;
}

.status-progress {
  color: var(--learnophia-primary);
}

.status-not-started {
  color: var(--text-muted);
}

.content-area {
  flex: 1;
  min-height: calc(100vh - 64px);
  margin-left: 320px;
  /* Trimmed from 24px → 12px top/bottom so the iframe gets the visual
     budget back. Side padding kept at 16px for breathing room. */
  padding: 12px 16px;
  background: var(--bg-primary);
  transition: all 0.3s ease;
}

.sidebar.collapsed ~ .content-area {
  margin-left: 0;
}

.content-wrapper {
  /* Bumped from 1100px → 1400px so Storyline/Mindsmith 16:9 content has
     room to breathe — the old width was clipping bottom navigation bars
     and making text overlap on PPT/PDF activities. */
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--learnophia-accent);
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 30px var(--shadow-color);
}

.content-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: white;
}

.content-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: Cambria, Georgia, serif;
  font-size: 1.4em;
  font-weight: 700;
}

.content-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--learnophia-accent), #5dd8e8);
  color: var(--learnophia-dark);
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(134, 232, 248, 0.3);
}

.content-body {
  min-height: 620px;
  background: white;
}

.graded-badge {
  margin-left: 0;
}

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
  background: #000;
  padding-bottom: 56.25%;
}

.video-container iframe,
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pdf-viewer-container,
.ppt-viewer-container {
  width: 100%;
  background: #f3f4f6;
}


.pdf-viewer,
.ppt-viewer {
  display: block;
  width: 100%;
  /* PDF / PPT — no aspect-ratio constraint; let it fill the available
     vertical space (these don't have internal scaling like Storyline). */
  height: calc(100vh - 110px);
  min-height: 940px;
  border: none;
  background: white;
}

.embed-frame,
.scorm-frame {
  display: block;
  /* Maximize iframe room. We tried forcing 16:9 / 4:3 aspect ratios to
     fix what looked like overlap from our scaling, but the SARVAC slide
     overlap is INTERNAL to the Storyline source (the lesson author
     placed instruction text on top of question text). Aspect-locking
     just shrinks the iframe without helping. Fill the available viewport
     instead — Storyline scales its slide proportionally inside whatever
     we give it. */
  width: 100%;
  height: calc(100vh - 110px);
  /* Keep the whole player INSIDE the viewport. The old 940px floor forced
     the frame taller than most laptop screens, pushing the package's own
     seekbar/controls below the fold. Storyline scales its slide to
     whatever height it gets, so the only real floor is "not comically
     small". */
  min-height: 480px;
  border: none;
  background: white;
}

/* Authoritative post-test banner — rendered above the Storyline iframe when
   the current activity is flagged `is_post_test`. The Storyline content
   itself has the old pass mark / attempt rules baked in; this banner shows
   the live DB values so the student knows which set actually governs. */
.post-test-banner {
  background: #fef9c3;
  border: 1px solid #facc15;
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 12px;
  color: #422006;
  font-size: 14px;
}

/* Compact single-line stat layout: labels stacked over values, the live
   countdown pushed right as the most prominent element. Wraps gracefully on
   narrow screens. */
.post-test-banner-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
}
.pt-stat { display: flex; flex-direction: column; gap: 1px; }
.pt-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
}
.pt-stat-value { font-size: 15px; font-weight: 600; color: #422006; }
.pt-stat-value strong { color: #422006; }
.pt-stat-timer {
  margin-left: auto;
  padding: 6px 18px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  align-items: center;
  text-align: center;
}
.pt-stat-timer .exam-timer {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.post-test-banner-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}
.post-test-banner-row + .post-test-banner-row {
  border-top: 1px dashed rgba(146, 64, 14, 0.25);
  margin-top: 4px;
}
.post-test-banner-label {
  flex: 0 0 130px;
  font-weight: 600;
  color: #78350f;
}
.post-test-banner-value strong { color: #422006; }
.post-test-banner-hint { color: #92400e; font-style: italic; font-size: 13px; }
.post-test-banner-hint--warn { color: #b91c1c; font-style: normal; font-weight: 600; }
.post-test-banner-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #a16207;
  font-style: italic;
}
/* Live countdown from the admin's estimated exam time — informational, so it
   stays in the banner's amber family until it runs low. */
.exam-timer {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.exam-timer--low { color: #b91c1c !important; }
.exam-timer--elapsed {
  color: #b91c1c !important;
  text-transform: none;
}

/* Floating clock chip — pinned to the viewport so the countdown stays in
   sight while the banner is scrolled away (Brightspace-style). Shown/hidden
   by an IntersectionObserver on the banner timer. */
.exam-timer-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  padding: 10px 16px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: #78350f;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.exam-timer-float .exam-timer { font-size: inherit; }
.exam-timer-float--low,
.exam-timer-float--elapsed {
  background: #fef2f2;
  border-color: #dc2626;
  color: #b91c1c;
}
@media print { .exam-timer-float { display: none; } }
.course-player-body.dark-theme .post-test-banner {
  background: #3f2d05;
  border-color: #ca8a04;
  color: #fde68a;
}
.course-player-body.dark-theme .post-test-banner-label,
.course-player-body.dark-theme .post-test-banner-hint,
.course-player-body.dark-theme .post-test-banner-note { color: #fcd34d; }
.course-player-body.dark-theme .post-test-banner-value strong { color: #fffbea; }

/* Modules living inside a self-contained package. We cannot navigate them —
   the package owns that — so these are status only: which module the learner
   has covered, and how far through each one they are. */
.pkg-modules {
  margin: 0 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
}
.pkg-modules-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pkg-modules-count { text-transform: none; letter-spacing: 0; font-weight: 600; }
.pkg-module {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pkg-module + .pkg-module { border-top: 1px solid var(--border-color); }
.pkg-module-tick {
  flex: 0 0 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.pkg-module.done .pkg-module-tick { background: #10b981; color: #fff; }
.pkg-module.done .pkg-module-title { color: var(--text-primary); font-weight: 600; }
.pkg-module-title { flex: 1 1 auto; line-height: 1.3; }
.pkg-module-count { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; font-weight: 600; }

/* Module-menu hint — shown above the lesson when the WHOLE course is a single
   package, so every module lives behind the content's own (collapsed) MENU and
   our sidebar has only one line to show. Deliberately informational blue rather
   than the post-test banner's warning yellow: this is a signpost, not a
   caution. */
.lesson-nav-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  color: #1e3a5f;
  font-size: 14px;
  line-height: 1.5;
}
.lesson-nav-hint strong { color: #1e40af; font-weight: 700; }
.lesson-nav-hint-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.4;
  color: #2563eb;
}
.course-player-body.dark-theme .lesson-nav-hint {
  background: #17263f;
  border-color: #2f4a76;
  color: #cfe0f7;
}
.course-player-body.dark-theme .lesson-nav-hint strong { color: #93c5fd; }
.course-player-body.dark-theme .lesson-nav-hint-icon { color: #93c5fd; }

.audio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 60px 24px;
  text-align: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.audio-container h3 {
  margin: 0 0 24px;
}

.audio-container audio {
  width: 100%;
  max-width: 500px;
}

/* ── Quiz intro card ────────────────────────────────────────── */
.quiz-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 40px;
  max-width: 480px;
  margin: 0 auto;
}

.quiz-intro-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 20px;
  background: #f5f0ff;
  color: var(--learnophia-primary);
  border: 1.5px solid #e0d9f7;
}

.quiz-intro-title {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: Cambria, Georgia, serif;
}

.quiz-intro-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  margin-bottom: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--learnophia-accent), #5dd8e8);
  color: var(--learnophia-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(134, 232, 248, 0.3);
}

.quiz-intro-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-primary);
}

.quiz-intro-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: left;
}

.quiz-intro-stat strong {
  color: var(--text-primary);
}

.quiz-intro-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f5f0ff;
  color: var(--learnophia-primary);
  flex-shrink: 0;
}

.quiz-intro-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--learnophia-accent), #5dd8e8);
  color: var(--learnophia-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(134, 232, 248, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quiz-intro-start-btn:hover {
  color: var(--learnophia-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(134, 232, 248, 0.5);
}

.unsupported-preview,
.empty-player-state {
  padding: 60px;
  color: var(--text-muted);
  text-align: center;
}

.transcode-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 24px;
  padding: 28px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  color: #92400e;
}
.transcode-notice svg { flex-shrink: 0; color: #d97706; margin-top: 2px; }
.transcode-notice strong { display: block; font-size: 15px; margin-bottom: 6px; }
.transcode-notice p { margin: 0; font-size: 13px; line-height: 1.5; }
.transcode-notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.transcode-notice-error svg { color: #dc2626; }

.unsupported-preview a {
  color: var(--learnophia-primary);
  font-weight: 600;
}

.mark-complete-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: #f9fafb;
}

.completion-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.completion-status.pending {
  background: #94a3b8;
  color: white;
}

.completion-status.completed {
  background: linear-gradient(135deg, var(--learnophia-accent), #5dd8e8);
  color: var(--learnophia-dark);
  box-shadow: 0 4px 14px rgba(134, 232, 248, 0.4);
}

/* Replaces the manual Mark-as-Complete button for SCORM/embed activities.
   These post their own completion via the SCORM API shim — the hint just
   tells the student where the completion comes from. */
.auto-complete-hint {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  font-style: italic;
}
.course-player-body.dark-theme .auto-complete-hint {
  color: #9ca3af;
}

/* ── Activity icon (sidebar + content header) ───────────────── */
.cp-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #f5f0ff;
  color: var(--learnophia-primary);
}

/* ── Dark mode toggle button ─────────────────────────────────── */
.cp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cp-theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cp-theme-sun { display: none; }

/* ── Dark theme ──────────────────────────────────────────────── */
.course-player-body.dark-theme {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --bg-hover: #374151;
  --bg-active: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --border-light: #4b5563;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

.course-player-body.dark-theme .content-wrapper,
.course-player-body.dark-theme .content-header,
.course-player-body.dark-theme .content-body,
.course-player-body.dark-theme .sidebar-header,
.course-player-body.dark-theme .sidebar-header-back {
  background: var(--bg-secondary);
}

.course-player-body.dark-theme .mark-complete-container {
  background: var(--bg-primary);
}

.course-player-body.dark-theme .audio-container {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.course-player-body.dark-theme .cp-activity-icon {
  background: rgba(75, 63, 156, 0.2);
}

.course-player-body.dark-theme .quiz-intro-stats {
  background: var(--bg-secondary);
}

.course-player-body.dark-theme .quiz-intro-stat-icon,
.course-player-body.dark-theme .quiz-intro-icon-wrap {
  background: rgba(75, 63, 156, 0.2);
}

.course-player-body.dark-theme .pdf-viewer-container,
.course-player-body.dark-theme .ppt-viewer-container {
  background: var(--bg-primary);
}

/* ── Dark theme: top nav ─────────────────────────────────────── */
.course-player-body.dark-theme .top-nav {
  background: #1f2937;
  border-bottom-color: #374151;
}

/* ── Dark theme: sidebar ─────────────────────────────────────── */
.course-player-body.dark-theme .sidebar {
  background: #161d2b;
  border-right-color: #374151;
}

.course-player-body.dark-theme .sidebar-header,
.course-player-body.dark-theme .sidebar-header-back {
  background: #1f2937;
  border-color: #374151;
}

.course-player-body.dark-theme .sidebar-toggle {
  background: #1f2937;
  border-color: #374151;
  color: #9ca3af;
}

.course-player-body.dark-theme .progress-wrapper {
  background: #1f2937;
  border-color: #374151;
}

.course-player-body.dark-theme .progress-container {
  background: #374151;
}

.course-player-body.dark-theme .course-badge,
.course-player-body.dark-theme .user-badge {
  background: rgba(75, 63, 156, 0.2);
  border-color: #6d5fd4;
  color: #c4b5fd;
}

/* ── Dark theme: sidebar back card (user info) ───────────────── */
.course-player-body.dark-theme .sidebar-header-back {
  background: #1f2937;
  border-color: #374151;
}

.course-player-body.dark-theme .user-name {
  color: #f9fafb;
}

.course-player-body.dark-theme .user-email {
  color: #9ca3af;
}

.course-player-body.dark-theme .user-avatar {
  color: #f9fafb;
  border-color: rgba(134, 232, 248, 0.4);
}

.course-player-body.dark-theme .section {
  border-bottom-color: #2d3748;
}

.course-player-body.dark-theme .section-header {
  color: #d1d5db;
}

.course-player-body.dark-theme .section-header:hover {
  background: #1f2937;
}

.course-player-body.dark-theme .section-header.active {
  background: linear-gradient(to right, rgba(93, 213, 232, 0.1), transparent);
  border-left-color: #5dd5e8;
}

.course-player-body.dark-theme .section-toggle {
  color: #9ca3af;
}

.course-player-body.dark-theme .section.expanded .section-toggle {
  color: #5dd5e8;
}

.course-player-body.dark-theme .section-title {
  color: #e5e7eb;
}

.course-player-body.dark-theme .section-status {
  background: #374151;
  color: #9ca3af;
}

.course-player-body.dark-theme .activities-list {
  background: #111827;
}

/* Activity items — the key fix: active item was purple-on-dark */
.course-player-body.dark-theme .activity-item {
  color: #9ca3af;
}

.course-player-body.dark-theme .activity-item:hover {
  background: #1f2937;
  color: #d1d5db;
  border-left-color: #4b5563;
}

.course-player-body.dark-theme .activity-item.active {
  background: rgba(93, 213, 232, 0.08);
  border-left-color: #5dd5e8;
  color: #5dd5e8;
  box-shadow: inset 0 0 20px rgba(93, 213, 232, 0.05);
}

.course-player-body.dark-theme .activity-item.active .activity-title {
  color: #5dd5e8;
  font-weight: 600;
}

.course-player-body.dark-theme .activity-title {
  color: inherit;
}

.course-player-body.dark-theme .status-progress {
  color: #5dd5e8;
}

/* ── Dark theme: top nav indicator ──────────────────────────── */
.course-player-body.dark-theme .nav-indicator {
  background: #2d3748;
  border-color: #4b5563;
  color: #9ca3af;
}

.course-player-body.dark-theme .nav-current {
  color: #5dd5e8;
}

/* ── Dark theme: content area ────────────────────────────────── */
.course-player-body.dark-theme .content-area {
  background: var(--bg-primary);
}

.course-player-body.dark-theme .content-header {
  border-bottom-color: #374151;
}

.course-player-body.dark-theme .content-title,
.course-player-body.dark-theme .cp-activity-title {
  color: #f9fafb;
}

.course-player-body.dark-theme .content-subtitle,
.course-player-body.dark-theme .cp-activity-meta {
  color: #9ca3af;
}

.course-player-body.dark-theme .content-body {
  background: #1f2937;
}

/* ── Dark theme: mark complete bar ──────────────────────────── */
.course-player-body.dark-theme .mark-complete-container {
  background: #1a2233;
  border-top-color: #374151;
}

.course-player-body.dark-theme .mark-complete-container span[data-course-player-target="completionDate"] {
  color: #9ca3af;
}

.course-player-body.dark-theme .completion-status.pending {
  background: #374151;
  color: #d1d5db;
}

/* ── Dark theme: progress card ───────────────────────────────── */
.course-player-body.dark-theme .progress-percent {
  color: #5dd5e8;
}

.course-player-body.dark-theme .progress-label,
.course-player-body.dark-theme .progress-text {
  color: #9ca3af;
}

/* ── Dark theme: activity icons ──────────────────────────────── */
.course-player-body.dark-theme .cp-activity-icon {
  background: rgba(93, 213, 232, 0.12);
  color: #5dd5e8;
}

/* ── Dark theme: content header title ───────────────────────── */
.course-player-body.dark-theme .content-header h2 {
  color: #f9fafb;
}

/* ── Dark theme: buttons ─────────────────────────────────────── */
.course-player-body.dark-theme .back-link {
  background: #2d3748;
  border-color: #4b5563;
  color: #d1d5db;
}

.course-player-body.dark-theme .back-link:hover {
  background: #374151;
  color: #f9fafb;
}

/* Mark complete button */
.mark-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #86e8f8, #5dd5e8);
  color: #1a1523;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.mark-complete-btn:hover {
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.4);
  transform: translateY(-1px);
}

/* Dark theme mark complete button */
.course-player-body.dark-theme .mark-complete-btn {
  background: linear-gradient(135deg, #5dd5e8, #3cc8d8);
  color: #111827;
}

/* ── Dark theme: progress bar ────────────────────────────────── */
.course-player-body.dark-theme .progress-bar-track {
  background: #374151;
}

/* ── Dark theme: quiz elements ───────────────────────────────── */
.course-player-body.dark-theme .quiz-intro-card,
.course-player-body.dark-theme .quiz-question-card {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.course-player-body.dark-theme .quiz-option {
  background: #2d3748;
  border-color: #4b5563;
  color: #d1d5db;
}

.course-player-body.dark-theme .quiz-option:hover {
  background: #374151;
  border-color: #5dd5e8;
  color: #f9fafb;
}

.course-player-body.dark-theme .quiz-option.selected {
  background: rgba(93, 213, 232, 0.12);
  border-color: #5dd5e8;
  color: #f9fafb;
}

.course-player-body.dark-theme .quiz-option.correct {
  background: rgba(52, 211, 153, 0.12);
  border-color: #34d399;
  color: #6ee7b7;
}

.course-player-body.dark-theme .quiz-option.incorrect {
  background: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
  color: #fca5a5;
}

.course-player-body.dark-theme .quiz-intro-title,
.course-player-body.dark-theme .quiz-question-text {
  color: #f9fafb;
}

.course-player-body.dark-theme .quiz-intro-desc,
.course-player-body.dark-theme .quiz-intro-stat-label {
  color: #9ca3af;
}

.course-player-body.dark-theme .quiz-intro-stat-value {
  color: #f9fafb;
}

/* ── Dark theme: completion / result cards ───────────────────── */
.course-player-body.dark-theme .completion-card,
.course-player-body.dark-theme .result-card {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

/* ── Dark theme: toggle icon swap ───────────────────────────── */
.course-player-body.dark-theme .cp-theme-moon { display: none; }
.course-player-body.dark-theme .cp-theme-sun  { display: block; }

/* ── Dark theme: mode label + toggle button ──────────────────── */
.course-player-body.dark-theme .logout-link {
  color: #d1d5db;
  opacity: 1;
}

.course-player-body.dark-theme .cp-theme-toggle {
  border-color: #4b5563;
  background: #2d3748;
  color: #e5e7eb;
}

.course-player-body.dark-theme .cp-theme-toggle:hover {
  background: #374151;
  color: #f9fafb;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    transform: translateX(-100%);
  }

  .sidebar.expanded {
    transform: translateX(0);
  }

  .sidebar-toggle {
    left: 0;
  }

  .content-area {
    margin-left: 0;
    padding: 16px;
  }

  .top-nav-center {
    display: none;
  }
}

/* ─── Segmented EN | FR language switch (player top-nav, right side) ──
   Both halves are clearly legible at all times: the inactive one
   stays fully white (just on a darker pill background) so it never
   "disappears", the active one is filled white with dark text +
   subtle shadow. Larger min-width / padding makes click target
   comfortable and the labels stand out on the dark top-nav. */
.cp-lang-switch {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  gap: 2px;
}
.cp-lang-switch-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* Inactive: full-opacity white text on the dark pill background so
     it never washes out. Hover bumps to a subtle white fill so the
     learner sees it's clickable. */
  color: #ffffff;
  background: transparent;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.cp-lang-switch-option:hover {
  background: rgba(255, 255, 255, 0.18);
}
.cp-lang-switch-option.active {
  background: #ffffff;
  color: #272030;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.cp-lang-switch-option.active:hover {
  background: #ffffff;
  color: #272030;
}

/* The organisation's verdict on an exam sitting.
   The package announces its own result using ITS pass mark, which can tell a
   learner they failed moments before we issue their certificate. This states
   what actually counts, on our side of the iframe. */
/* Compact verdict line under the Time-remaining chip — small coloured text
   aligned right, no box, so the banner stays one line tall. */
.post-test-outcome {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}
.post-test-outcome.passed { color: #059669; }
.post-test-outcome.failed { color: #dc2626; }
.course-player-body.dark-theme .post-test-outcome.passed { color: #a7f3d0; }
.course-player-body.dark-theme .post-test-outcome.failed { color: #fca5a5; }

/* ── Lessons under each package module ─────────────────────────────────────
   Status-only rows, one per slide, ticked as the learner covers them; the
   deepest-reached lesson carries `.current`. The package owns navigation —
   these never link anywhere. */
.pkg-lessons { padding: 0 0 6px 0; }
.pkg-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 34px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}
.pkg-lesson-tick {
  width: 14px;
  flex: none;
  text-align: center;
  color: #c4c9d4;
  font-size: 11px;
}
.pkg-lesson.done { color: #374151; }
.pkg-lesson.done .pkg-lesson-tick { color: #16a34a; }
.pkg-lesson.current {
  background: #eef2ff;
  border-radius: 6px;
  color: #312e81;
  font-weight: 600;
}
.pkg-lesson-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Navigable rows: visited lessons (review) + the frontier lesson. The
   frontier carries a visible "→" so the next step never hides behind the
   package's own low-visibility arrow. */
.pkg-lesson--clickable { cursor: pointer; }
.pkg-lesson--clickable:hover { background: #f3f4f6; border-radius: 6px; }
.pkg-lesson--next {
  color: #1d4ed8;
  font-weight: 600;
}
.pkg-lesson--next .pkg-lesson-tick { color: #1d4ed8; }
.pkg-lesson-next-arrow {
  margin-left: auto;
  flex: none;
  color: #1d4ed8;
  font-weight: 700;
}
.pkg-module.current .pkg-module-title { color: #312e81; font-weight: 700; }
/* Lessons now sit between module rows, so restore the divider the old
   adjacent-sibling selector (.pkg-module + .pkg-module) no longer draws. */
.pkg-lessons + .pkg-module { border-top: 1px solid var(--border-color); }

/* ── "Continue to Module N" banner ─────────────────────────────────────────
   Appears between the exam/hint banners and the package iframe when a module
   is complete and the next untouched. */
.continue-module-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 12px 16px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
}
.continue-module-text { font-size: 13.5px; color: #312e81; font-weight: 600; }
.continue-module-btn {
  border: none;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.continue-module-btn:hover { background: #4338ca; }
.continue-module-btn:disabled { opacity: 0.6; cursor: wait; }
/* Client Admin Dashboard — 4-card grid (Overview / Status donut / Activity / Quick actions).
   Auto-required via `*= require_tree .` in application.css. */

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.dash-card {
  margin: 0;                       /* override the .learnophia-card 32px default — the grid handles spacing */
  padding: 22px 24px;
}

.dash-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 14px;
}

.dash-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dash-card-header .dash-card-title { margin: 0; }

.dash-card-total {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
}
/* Big number + a stacked caption that names the unit ("course enrolments")
   so the operator can read the metric meaning without hovering anything. */
.dash-card-total-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dash-card-total-caption {
  font-size: 12px;
  line-height: 1.25;
  color: #64748b;
  font-weight: 500;
  text-align: right;
}
.dash-card-total-caption small {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 400;
}
.dash-card-subtitle {
  font-size: 13px;
  color: #64748b;
}

/* Described legend variant — each row gets a plain-English label PLUS a
   one-line description, so the four buckets explain themselves without
   needing hover or doc lookups. */
.dash-legend-described li {
  align-items: flex-start;
  padding: 8px 0;
}
.dash-legend-described .dash-legend-dot {
  margin-top: 6px;
}
.dash-legend-text {
  flex: 1;
  min-width: 0;
}
.dash-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.dash-legend-row .dash-legend-label {
  font-weight: 600;
  color: #0f172a;
  font-size: 13px;
}
.dash-legend-row .dash-legend-count {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dash-legend-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: #64748b;
  margin-top: 2px;
}

/* ─── Overview KPI list ─────────────────────────────────────────────── */
.dash-kpi-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-kpi-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f1f5f9;
}
.dash-kpi-list li:last-child { border-bottom: none; }

/* Described variant — KPI label stacks above a one-line description so
   each number explains itself without needing a tooltip pill. Vertical
   alignment switches to top so the description doesn't pull the icon
   off-center on multi-line subs. */
.dash-kpi-list-described li {
  align-items: flex-start;
  padding: 13px 0;
}
.dash-kpi-list-described .dash-kpi-icon {
  margin-top: 2px;
}
.dash-kpi-list-described .dash-kpi-value {
  margin-top: 2px;
}
.dash-kpi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-kpi-text .dash-kpi-label {
  font-weight: 600;
  color: #0f172a;
  font-size: 13.5px;
  line-height: 1.25;
}
.dash-kpi-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: #64748b;
  margin-top: 2px;
}

.dash-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
}
.dash-kpi-label {
  font-size: 14px;
  color: #475569;
}
.dash-kpi-value {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

/* ─── Status donut chart ────────────────────────────────────────────── */
.dash-status {
  display: flex;
  flex-direction: column;
}

.dash-donut-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 12px;
}
.dash-donut {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.dash-donut-total {
  font-size: 32px;
  font-weight: 700;
  fill: #0f172a;
}

.dash-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.dash-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.dash-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dash-legend-count {
  font-weight: 600;
  color: #0f172a;
}

.dash-legend-inline {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 6px 18px;
  margin-top: 10px;
}
.dash-legend-inline li {
  grid-template-columns: 12px auto;
}

/* ─── Portal activity bar chart ─────────────────────────────────────── */
.dash-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  height: 180px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}
.dash-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.dash-bar-stack {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.dash-bar {
  width: 14px;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.dash-bar-logins      { background: #60a5fa; }
.dash-bar-completions { background: #22c55e; }
.dash-bar-label {
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* ─── Quick actions ─────────────────────────────────────────────────── */
.dash-quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-quick-item {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.dash-quick-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.dash-quick-item-highlight {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.dash-quick-item-highlight:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.dash-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
}
.dash-quick-item-highlight .dash-quick-icon {
  background: #c7d2fe;
  color: #4338ca;
}

.dash-quick-chev {
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
}
.dash-quick-item:hover .dash-quick-chev { color: #475569; }

/* ─── Responsive — collapse to 1 column on narrow viewports ─────────── */
@media (max-width: 1100px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ── Gamification (My Progress / Achievements / Leaderboard / admin page) ──
   Fresh `gm-` prefix; accents follow the branch theme via --sp-accent.
   Poppins comes from the global font rules. */

.gm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .gm-two-col { grid-template-columns: 1fr; } }
.gm-stack { display: flex; flex-direction: column; gap: 16px; }

.gm-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 18px 20px;
}
.gm-card--reward { background: linear-gradient(135deg, #f6f4ff, #fdfcff); }
.gm-card-title {
  font-size: 14.5px; font-weight: 600; color: #111827; margin: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.gm-card-link { font-size: 12px; font-weight: 500; color: var(--sp-accent, #6d28d9); text-decoration: none; }
.gm-card-link:hover { text-decoration: underline; }
.gm-muted { font-size: 13px; color: #9ca3af; }
.gm-stat-sub { font-size: 15px; color: #9ca3af; }
.gm-footnote { font-size: 12px; color: #9ca3af; margin-top: 12px; }

/* Level ring + XP */
.gm-level-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.gm-level-ring { position: relative; width: 72px; height: 72px; flex: none; }
.gm-ring-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.1;
}
.gm-ring-inner .num { font-size: 20px; font-weight: 700; color: #272030; }
.gm-ring-inner .lbl { font-size: 9.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.gm-level-title { font-size: 16px; font-weight: 700; color: #272030; margin: 0; }
.gm-level-sub { font-size: 12.5px; color: #6b7280; margin: 3px 0 0; }
.gm-xp-bar { height: 8px; background: #ede9fe; border-radius: 999px; overflow: hidden; }
.gm-xp-fill { height: 100%; background: var(--sp-accent, #6d28d9); border-radius: 999px; }
.gm-xp-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: #6b7280; margin-top: 6px; }

/* Week streak cells */
.gm-week-row { display: flex; gap: 10px; justify-content: space-between; }
.gm-week-day { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.gm-day-cell {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1.5px dashed #e5e7eb; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.gm-day-cell.done { background: var(--sp-accent, #6d28d9); border: none; }
.gm-day-cell.today { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sp-accent, #6d28d9); }
.gm-day-lbl { font-size: 11px; color: #6b7280; }
.gm-week-note { font-size: 12.5px; color: #6b7280; margin: 12px 0 0; }

/* Points list (recent + leaderboard preview) */
.gm-points-list { list-style: none; margin: 0; padding: 0; }
.gm-points-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid #f3f4f6;
}
.gm-points-list li:first-child { border-top: none; }
.gm-points-what { flex: 1; min-width: 0; }
.gm-points-label { font-size: 13px; font-weight: 500; color: #272030; }
.gm-points-when { font-size: 11.5px; color: #9ca3af; }
.gm-points-value { font-size: 13px; font-weight: 700; color: #15803d; }

/* Badges */
.gm-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gm-badge-grid--two { grid-template-columns: 1fr 1fr; }
.gm-badge-card {
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
}
.gm-badge-emblem { font-size: 26px; }
.gm-badge-name { font-size: 13px; font-weight: 600; color: #272030; }
.gm-badge-desc { font-size: 11.5px; color: #6b7280; line-height: 1.4; }
.gm-badge-earned { font-size: 11px; font-weight: 600; color: #15803d; }
.gm-badge-card.gm-locked { background: #fafafa; }
.gm-badge-card.gm-locked .gm-badge-emblem { filter: grayscale(1); opacity: 0.55; }
.gm-badge-progress-wrap { width: 100%; margin-top: 6px; }
.gm-badge-progress-lbl { font-size: 11px; color: #6b7280; margin-top: 5px; }

.gm-next-badge { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.gm-next-badge-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gm-next-badge-emblem { font-size: 18px; filter: grayscale(1); opacity: 0.55; }
.gm-next-badge-name { font-size: 12.5px; font-weight: 600; color: #272030; }
.gm-next-badge-progress { font-size: 11.5px; color: #6b7280; }

/* Leaderboard */
.gm-lb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.gm-lb-tabs { display: flex; gap: 8px; }
.gm-lb-tab {
  padding: 6px 16px; border-radius: 999px; border: 1px solid #d1d5db;
  background: #fff; font-size: 12.5px; font-weight: 500; color: #374151; text-decoration: none;
}
.gm-lb-tab.active { background: var(--sp-accent, #6d28d9); border-color: var(--sp-accent, #6d28d9); color: #fff; }
.gm-lb-select {
  border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 12px;
  font-size: 13px; color: #374151; background: #fff;
}
.gm-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gm-lb-table th {
  text-align: left; padding: 12px 16px; font-size: 11.5px; font-weight: 600;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid #f3f4f6; background: #fafafa;
}
.gm-lb-table td { padding: 11px 16px; border-bottom: 1px solid #f6f6f8; }
.gm-lb-table tr:last-child td { border-bottom: none; }
.gm-lb-student { display: inline-flex; align-items: center; gap: 10px; }
.gm-lb-name { font-weight: 600; color: #272030; }
.gm-lb-points { font-weight: 700; color: #272030; font-variant-numeric: tabular-nums; }
.gm-lb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #6b7280; background: #f3f4f6;
}
.gm-lb-rank.r1 { background: #fef3c7; color: #92400e; }
.gm-lb-rank.r2 { background: #e5e7eb; color: #374151; }
.gm-lb-rank.r3 { background: #fde8d7; color: #9a3412; }
.gm-row-me { background: #f6f4ff; }
.gm-lb-me { color: var(--sp-accent, #4b3f9c); font-weight: 700; }

/* Reward card */
.gm-reward-row { display: flex; align-items: center; gap: 12px; }
.gm-reward-emoji { font-size: 26px; }
.gm-reward-name { font-size: 13px; font-weight: 600; color: #272030; }
.gm-reward-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }
.gm-reward-desc strong { color: var(--sp-accent, #4b3f9c); }
.gm-reward-progress { margin-top: 12px; }

/* Admin: point rules table */
.gm-rules-table { width: 100%; border-collapse: collapse; }
.gm-rules-table td { padding: 11px 0; border-top: 1px solid #f3f4f6; font-size: 13.5px; color: #272030; }
.gm-rules-table tr:first-child td { border-top: none; }
.gm-rules-input { width: 90px; text-align: right; }
.gm-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.gm-snapshot-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.gm-snapshot-num { font-size: 22px; font-weight: 700; color: #272030; }
.gm-snapshot-lbl { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* Font safety net for controls (same rationale as community.css). */
.gm-card button, .gm-card input, .gm-card select,
.gm-lb-select, .gm-lb-tab, .gm-rules-input {
  font-family: var(--font-primary, "Poppins", sans-serif);
}
/* ── Student Portal Stylesheet ───────────────────────────────────────────────
   Primary font from `--font-primary` (see application.css :root —
   Poppins by default), Learnophia purple/teal palette
   ─────────────────────────────────────────────────────────────────────────── */

.sp-body {
  font-family: var(--font-primary);
  min-height: 100vh;
  color: #111827;
}


/* ══════════════════════════════════════════════════════════════════════════
   PORTAL LAYOUT (catalog)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Top navbar ─────────────────────────────────────────────────────────── */
.sp-top-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1001;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.sp-navbar-left { display: flex; align-items: center; gap: 14px; }
.sp-navbar-logo { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.sp-navbar-title { color: #0d7c8c; font-weight: 600; font-size: 14px; }

.sp-navbar-right { display: flex; align-items: center; gap: 14px; }
.sp-navbar-greeting { color: #6b7280; font-size: 13px; }
.sp-navbar-greeting strong { color: #272030; }

.sp-logout-btn {
  background: #ef4444;
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.sp-logout-btn:hover { background: #dc2626; transform: translateY(-1px); }

/* ── Page layout ────────────────────────────────────────────────────────── */
.sp-layout {
  display: flex;
  min-height: 100vh;
  margin-top: 60px;
}

/* Phase-2 branch theme accent. The student-dashboard view sets
   --sp-accent on .sp-layout / body when the current student's branch
   has a theme_color; everything below uses it via var() with the
   Learnophia purple as a fallback. Saves us from re-rendering every
   single accented element per-request. */
:root, .sp-layout, body { --sp-accent: #4b3f9c; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sp-sidebar {
  width: 248px;
  background: linear-gradient(180deg, var(--sp-accent) 0%, #3d3380 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.sp-sidebar-nav { flex: 1; padding: 12px 0; }

.sp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
  margin: 2px 0;
}

.sp-nav-item:hover { background: rgba(255, 255, 255, 0.12); }
.sp-nav-item.active { background: rgba(255, 255, 255, 0.18); border-left-color: #86e8f8; }
.sp-nav-item svg { flex-shrink: 0; width: 17px; height: 17px; opacity: 0.9; }

.sp-sidebar-footer { padding: 12px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sp-logout-nav { color: rgba(255, 255, 255, 0.92) !important; background: rgba(0, 0, 0, 0.12); border-radius: 6px; }
.sp-logout-nav:hover { background: rgba(0, 0, 0, 0.22) !important; }

/* ── Main content ───────────────────────────────────────────────────────── */
.sp-main-content {
  flex: 1;
  margin-left: 248px;
  min-height: calc(100vh - 60px);
}

/* ── Content header ─────────────────────────────────────────────────────── */
.sp-content-header {
  background: #fff;
  padding: 16px 32px;
  border-bottom: 1px solid #e5e7eb;
}
.sp-content-title { font-size: 20px; font-weight: 700; color: #272030; margin: 0 0 4px; }
.sp-content-subtitle { color: #6b7280; margin: 0; font-size: 13px; }

.sp-content-body { padding: 24px 32px; }

/* ── Tab panels ─────────────────────────────────────────────────────────── */
.sp-tab-panel { display: none; }
.sp-tab-panel.active { display: block; }

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.sp-stats-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sp-stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px 22px;
  flex: 1;
  min-width: 130px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #86e8f8;
}
.sp-stat-card.completed  { border-left-color: #10b981; }
.sp-stat-card.inprogress { border-left-color: var(--sp-accent); }
.sp-stat-num   { font-size: 28px; font-weight: 700; color: #272030; }
.sp-stat-label { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ── Files tab (Phase-2 Branches addition) ────────────────────────────── */
.sp-files-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-file-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sp-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
}
.sp-file-meta { display: flex; flex-direction: column; min-width: 0; }
.sp-file-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  word-break: break-word;
}
.sp-file-title:hover { color: #4338ca; }
.sp-file-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.sp-file-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--sp-accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.sp-file-download:hover { filter: brightness(0.9); }

/* ── Course grid ────────────────────────────────────────────────────────── */
.sp-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.sp-course-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sp-course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
  border-color: #958ddb;
}

/* Series-group container: wraps a row of unit cards (I-200 Unit 1..9 etc.)
   under a single header so a multi-unit family reads as one course, not a
   handful of look-alike enrollments. Singleton courses also wrap in this
   panel (`.sp-course-group--solo`) so every course renders as its own
   self-contained unit — only the header bar is skipped for them. */
.sp-course-group {
  margin-bottom: 28px;
  padding: 18px 20px 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
.sp-course-group--solo .sp-course-grid {
  margin-bottom: 0;
}
.sp-course-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.sp-course-group-title {
  font-size: 15px;
  font-weight: 700;
  color: #272030;
  margin: 0;
  line-height: 1.3;
}
.sp-course-group-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
}

.sp-course-thumb {
  width: 100%; height: 155px; object-fit: cover; display: block;
}
/* Icon-only placeholder — used when the OUTER panel header already shows the
   course title (solo course panels). Keeps the card hero at full height but
   doesn't duplicate the title. */
.sp-course-thumb-placeholder {
  width: 100%; height: 155px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sp-course-thumb-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(149, 141, 219, 0.06) 0 1px,
    transparent 1px 14px
  );
  pointer-events: none;
}
.sp-course-thumb-placeholder svg {
  width: 40px; height: 40px;
  color: #6b7280;
  opacity: 0.5;
  position: relative;
}

/* Title-hero placeholder — used when nothing else carries the course title
   (multi-unit series cards, where the title is "Unit 3: Airtanker Operations"
   etc., or any card without an enclosing series header). Matches a real cover
   image's footprint so card heights stay consistent across the grid. */
.sp-course-thumb-title {
  width: 100%; height: 155px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.sp-course-thumb-title::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(149, 141, 219, 0.06) 0 1px,
    transparent 1px 14px
  );
  pointer-events: none;
}
.sp-course-thumb-title span {
  position: relative;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #272030;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-course-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-course-name { font-size: 15px; font-weight: 600; color: #272030; line-height: 1.4; }
.sp-course-desc {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.sp-badge-row { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-badge { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.sp-badge-complete   { background: #ecfdf5; color: #059669; }
.sp-badge-inprogress { background: #ede5ff; color: #4b3f9c; }
.sp-badge-notstarted { background: #f3f4f6; color: #6b7280; }
.sp-badge-overdue    { background: #fef2f2; color: #dc2626; }
.sp-badge-cert       { background: #fef3c7; color: #d97706; }
.sp-badge-duration   { background: #eff6ff; color: #1d4ed8; }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.sp-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.sp-progress-meta { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; }
.sp-progress-bar  { height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.sp-progress-fill { height: 100%; background: linear-gradient(90deg, #86e8f8, #4b3f9c); border-radius: 3px; transition: width 0.4s ease; }

/* ── Date row ───────────────────────────────────────────────────────────── */
.sp-date-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #6b7280;
}
.sp-date-row svg { vertical-align: middle; margin-right: 3px; }
.sp-overdue { color: #dc2626; font-weight: 600; }

/* ── Action buttons ─────────────────────────────────────────────────────── */
.sp-card-actions { margin-top: auto; display: flex; gap: 8px; }
.sp-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.sp-btn-primary {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  color: #ffffff;
}
.sp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(55, 65, 81, 0.28);
  color: #ffffff;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.sp-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  color: #6b7280;
}
.sp-empty svg { display: block; margin: 0 auto 16px; }
.sp-empty h2 { font-size: 22px; color: #272030; margin-bottom: 8px; }
.sp-empty p  { font-size: 14px; }

/* ── Preferences ────────────────────────────────────────────────────────── */
.sp-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.sp-pref-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.sp-pref-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #272030;
  margin-bottom: 20px;
}
.sp-pref-card-title svg { color: #4b3f9c; }

.sp-pref-group { margin-bottom: 14px; }

.sp-pref-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sp-pref-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: #272030;
  background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sp-pref-input:focus {
  outline: none;
  border-color: #4b3f9c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}
.sp-pref-select { appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }

.sp-pref-submit {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  background: linear-gradient(135deg, #86e8f8, #5dd5e8);
  color: #272030;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sp-pref-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.4);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-sidebar { display: none; }
  .sp-main-content { margin-left: 0; }
  .sp-content-body { padding: 16px; }
  .sp-course-grid { grid-template-columns: 1fr; }
  .sp-stats-bar { flex-direction: column; }
  .sp-pref-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEMO PORTAL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────── */
.dp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 62px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.dp-header-left { display: flex; align-items: center; gap: 14px; }
.dp-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.dp-header-title { font-size: 15px; font-weight: 600; color: #272030; }

.dp-demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #86e8f8, #5dd5e8);
  color: #272030;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dp-header-right { display: flex; align-items: center; gap: 14px; }
.dp-greeting { font-size: 13px; color: #6b7280; }
.dp-greeting strong { color: #272030; }

/* ── Main area ──────────────────────────────────────────────────────────── */
.dp-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 36px 28px 48px;
}

.dp-page-header { margin-bottom: 32px; }

.dp-page-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #4b3f9c 0%, #958ddb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dp-page-subtitle { font-size: 14px; color: #6b7280; }

/* ── Course grid ────────────────────────────────────────────────────────── */
.dp-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.dp-course-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.dp-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  border-color: #958ddb;
}

.dp-course-thumb {
  width: 100%; height: 180px; object-fit: cover; display: block;
}
.dp-course-thumb-placeholder {
  width: 100%; height: 180px;
  background: linear-gradient(135deg, #86e8f8 0%, #4b3f9c 100%);
}

.dp-course-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-course-title {
  font-size: 16px;
  font-weight: 700;
  color: #272030;
  line-height: 1.4;
}

.dp-course-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.dp-card-actions { margin-top: auto; }

.dp-card-actions .sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dp-header { padding: 0 16px; }
  .dp-header-title { display: none; }
  .dp-main { padding: 20px 16px 40px; }
  .dp-course-grid { grid-template-columns: 1fr; }
}

/* ── Student portal custom language dropdown ─────────────────── */
.sp-pref-card .filter-dropdown-btn {
  height: auto;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #272030;
  background: #f9fafb;
}

.sp-pref-card .filter-dropdown-btn:hover {
  border-color: #4b3f9c;
  background: #f9fafb;
}

.sp-pref-card .filter-dropdown-menu {
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
}

/* ─── Student Learning Paths tab (two-level: list → expand → cards) ── */
.sp-lp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

/* Row: <details>/<summary> — click summary to expand */
.sp-lp-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.sp-lp-row[open] {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}
.sp-lp-row summary { list-style: none; cursor: pointer; }
.sp-lp-row summary::-webkit-details-marker { display: none; }

.sp-lp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}
.sp-lp-summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.sp-lp-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  color: #64748b;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sp-lp-row[open] .sp-lp-chevron { transform: rotate(90deg); }
.sp-lp-summary-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.sp-lp-summary-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.sp-lp-summary-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sp-lp-summary-bar-outer {
  width: 140px;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sp-lp-summary-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.sp-lp-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
}

/* Expanded body — course cards in sequence */
.sp-lp-expanded {
  padding: 4px 18px 20px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}
.sp-lp-empty {
  padding: 16px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}
.sp-lp-course-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.sp-lp-course-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: border-color 0.15s;
}
.sp-lp-course-card:hover { border-color: #cbd5e1; }
.sp-lp-course-card.complete {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.sp-lp-course-card.locked {
  background: #f8fafc;
  opacity: 0.75;
}
.sp-lp-course-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.sp-lp-course-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.sp-lp-course-card.complete .sp-lp-course-idx {
  background: #d1fae5;
  color: #059669;
  border-color: #a7f3d0;
}
.sp-lp-course-card.locked .sp-lp-course-idx {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}
.sp-lp-course-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}
.sp-lp-course-link {
  color: #0f172a;
  text-decoration: none;
}
.sp-lp-course-link:hover {
  color: #4338ca;
  text-decoration: underline;
}
.sp-lp-course-card-status { flex-shrink: 0; }
.sp-lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}
.sp-lp-badge.complete {
  background: #d1fae5;
  color: #047857;
}
.sp-lp-badge.locked {
  background: #f1f5f9;
  color: #94a3b8;
}
.sp-lp-badge.in-progress {
  background: #eef2ff;
  color: #4338ca;
}
.sp-lp-course-card-cta { flex-shrink: 0; }
.sp-lp-course-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ffffff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.sp-lp-course-btn:hover {
  background: #eef2ff;
  border-color: #6366f1;
}
.sp-lp-course-btn.primary {
  background: #4338ca;
  color: #ffffff;
  border-color: #4338ca;
}
.sp-lp-course-btn.primary:hover {
  background: #3730a3;
  border-color: #3730a3;
}

@media (max-width: 700px) {
  .sp-lp-summary { flex-direction: column; align-items: stretch; gap: 10px; }
  .sp-lp-summary-right { justify-content: space-between; }
}

/* Rich card grid nested inside the LP expansion — reuses the main
   `.sp-course-card` from the My Courses tab so students see identical
   visuals. `.sp-lp-card-wrap` positions a small "#N" order badge on
   the top-left corner of each card. */
.sp-lp-grid {
  margin-top: 12px;
  gap: 14px;
}
.sp-lp-card-wrap {
  position: relative;
}
.sp-lp-card-order {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sp-course-card--locked {
  opacity: 0.7;
  filter: saturate(0.6);
}
.sp-course-card--locked .sp-course-thumb-title {
  color: #94a3b8 !important;
}
.sp-lp-locked-note {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  border-radius: 8px;
  text-align: center;
}

/* Empty state — shown when the student has no LPs assigned */
.sp-lp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 30px;
  margin: 20px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}
.sp-lp-empty-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #eef2ff;
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.sp-lp-empty-icon svg { width: 28px; height: 28px; }
.sp-lp-empty-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}
.sp-lp-empty-copy {
  margin: 0;
  max-width: 420px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

/* ── Announcements (modern-portal companies only) ─────────────────────────
   Unread indicators follow the branch accent via --sp-accent. */
.sp-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
}
.sp-bell-btn:hover { background: #f3f4f6; }
.sp-bell-dot,
.sp-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-accent, #6d28d9);
  flex: none;
}
.sp-bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 2px solid #fff;
  width: 10px;
  height: 10px;
}
.sp-nav-item .sp-unread-dot { margin-left: auto; }

.sp-ann-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.sp-ann-mark-all:hover { background: #f9fafb; }

.sp-ann-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sp-ann-row--unread { border-color: var(--sp-accent, #6d28d9); }
.sp-ann-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.sp-ann-summary:hover { background: #fafafa; }
.sp-ann-dot { margin-top: 7px; }
.sp-ann-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-ann-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-ann-title { font-weight: 600; font-size: 14.5px; color: #111827; }
.sp-ann-snippet { font-size: 13px; color: #6b7280; line-height: 1.45; }
.sp-ann-meta { font-size: 12px; color: #9ca3af; }
.sp-ann-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.sp-ann-tag--important { background: #fee2e2; color: #b91c1c; }
.sp-ann-tag--pinned    { background: #fef3c7; color: #92400e; }

.sp-ann-detail { padding: 0 16px 14px 34px; }
.sp-ann-body { font-size: 13.5px; color: #374151; line-height: 1.65; }
.sp-ann-body p { margin: 0 0 10px; }
.sp-ann-read-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}
.sp-ann-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  color: #9ca3af;
  background: #fff;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
}
.sp-ann-empty p { margin: 0; font-size: 14px; }
/* ── Super Admin Portal Stylesheet ───────────────────────────────────────────
   WEI LMS Administration — .sa-* namespace, primary font from
   `--font-primary` (see application.css :root — Poppins by default)
   ─────────────────────────────────────────────────────────────────────────── */

/* ══ Auth (login) ══════════════════════════════════════════════════════════ */

.sa-auth-body {
  font-family: var(--font-primary);
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1333 0%, #2d2060 50%, #1a1333 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  width: 100%;
  max-width: 420px;
  padding: 40px 40px 36px;
}

.sa-login-logo {
  display: block;
  margin: 0 auto 18px;
  height: 80px;
  width: auto;
}

.sa-login-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 4px;
}

.sa-login-subtitle {
  text-align: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 28px;
}

.sa-form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}

.sa-form-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-form-input:focus {
  border-color: #4B3F9C;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75,63,156,0.12);
}

.sa-form-group { margin-bottom: 18px; }

.sa-login-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #4B3F9C, #272030);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.15s, transform 0.15s;
}
.sa-login-btn:hover { opacity: 0.92; transform: translateY(-1px); }

.sa-login-alert {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #b91c1c;
  margin-bottom: 18px;
}

/* ══ Portal layout ══════════════════════════════════════════════════════════ */

.sa-body {
  font-family: var(--font-primary);
  min-height: 100vh;
  background: #f3f4f6;
  color: #111827;
  overflow-x: hidden;
}

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

.sa-topbar {
  background: linear-gradient(135deg, #272030, #4B3F9C);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sa-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sa-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.sa-topbar-brand:visited,
.sa-topbar-brand:focus,
.sa-topbar-brand:active { text-decoration: none; color: inherit; }

.sa-topbar-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 8px rgba(255,255,255,0.25));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.sa-topbar-brand:hover .sa-topbar-logo {
  transform: scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.55));
}

.sa-topbar-title {
  position: relative;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, #ffffff 50%, rgba(255,255,255,0.85) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.18);
  animation: sa-topbar-shimmer 7s linear infinite;
  transition: transform 0.25s ease, letter-spacing 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.sa-topbar-title:visited,
.sa-topbar-title:focus,
.sa-topbar-title:active {
  text-decoration: none;
  color: inherit;
}

.sa-topbar-title:hover {
  transform: translateY(-1px) scale(1.02);
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}

@keyframes sa-topbar-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-topbar-title {
    animation: none;
    transition: none;
  }
}

.sa-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sa-topbar-user {
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-badge-superadmin {
  background: rgba(255,200,50,0.25);
  color: #fde68a;
  border: 1px solid rgba(255,200,50,0.4);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: 0.03em;
}

.sa-badge-admin {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
}

.sa-logout-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
.sa-logout-btn:hover { background: rgba(255,255,255,0.25); }

/* ── Navigation bar ──────────────────────────────────────────────────────── */

.sa-navbar {
  background: #1e1b2e;
  display: flex;
  align-items: stretch;
  padding: 0 12px;
  gap: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  position: sticky;
  top: 56px;
  z-index: 99;
}

.sa-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
.sa-nav-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.sa-nav-active { color: #fff !important; border-bottom-color: #a78bfa !important; }
.sa-nav-superadmin { color: #fde68a !important; }
.sa-nav-superadmin:hover { color: #fef3c7 !important; }
.sa-caret { font-size: 0.65rem; opacity: 0.7; }

/* ── Dropdown menus ──────────────────────────────────────────────────────── */

.sa-nav-dropdown {
  position: relative;
}

.sa-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 6px 0;
  z-index: 200;
}

.sa-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #374151;
  text-decoration: none;
  transition: background 0.1s;
  cursor: pointer;
}
.sa-dropdown-item:hover { background: #f3f4f6; color: #111827; }

.sa-dropdown-item-active {
  font-weight: 700;
  color: #4B3F9C;
  background: #f3f4ff;
}
.sa-dropdown-item-active:hover { background: #e9eafe; color: #4B3F9C; }

.sa-dropdown-item.sa-soon {
  color: #9ca3af;
  cursor: default;
  font-style: italic;
}
.sa-dropdown-item.sa-soon:hover { background: none; }

.sa-dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

.sa-dropdown-group-label {
  display: block;
  padding: 5px 14px 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
  pointer-events: none;
  font-style: italic;
}

.sa-action-link {
  display: block;
  padding: 5px 0;
  font-size: 0.875rem;
  color: #4B3F9C;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.sa-action-link:hover { color: #3730a3; text-decoration: underline; }

.sa-btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
}

/* ── Main content ────────────────────────────────────────────────────────── */

.sa-main {
  padding: 28px 28px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ══ Dashboard ══════════════════════════════════════════════════════════════ */

.sa-page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 4px;
}

.sa-page-subtitle {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.sa-info-bar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  font-size: 0.82rem;
  color: #374151;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sa-info-readonly {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
  font-weight: 500;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.sa-tabs-wrapper {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sa-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  overflow-x: auto;
}

.sa-tab {
  padding: 11px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
}
.sa-tab:hover { color: #4B3F9C; }
.sa-tab.current { color: #4B3F9C; border-bottom-color: #4B3F9C; font-weight: 600; }

.sa-tab-panel {
  display: none;
  padding: 24px;
}
.sa-tab-panel.current { display: block; }

/* ── Stats grid ──────────────────────────────────────────────────────────── */

.sa-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.sa-stat-group {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 18px;
}

.sa-stat-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.sa-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.82rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.sa-stat-row:last-child { border-bottom: none; }

.sa-stat-count {
  font-weight: 700;
  color: #1e1b4b;
  font-size: 0.9rem;
}

/* ── History tables ──────────────────────────────────────────────────────── */

.sa-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .sa-history-grid { grid-template-columns: 1fr; }
}

.sa-history-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.sa-history-box-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.sa-history-scroll {
  max-height: 280px;
  overflow-y: auto;
}

.sa-table {
  width: 100%;
  font-size: 0.76rem;
  border-collapse: collapse;
}

.sa-table th {
  background: #f3f4f6;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
}

.sa-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: top;
}

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

/* ── Errors tab ──────────────────────────────────────────────────────────── */

.sa-errors-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sa-error-day-badge {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  color: #b91c1c;
}
.sa-error-day-badge span { font-weight: 700; }

.sa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity 0.15s;
}
.sa-btn:hover { opacity: 0.85; }

.sa-btn-danger {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* ── Users tab ───────────────────────────────────────────────────────────── */

.sa-company-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sa-select {
  padding: 8px 12px;
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  outline: none;
}
.sa-select:focus { border-color: #4B3F9C; box-shadow: 0 0 0 2px rgba(75,63,156,0.1); }

.sa-btn-primary {
  background: linear-gradient(135deg, #4B3F9C, #272030);
  color: #fff;
  border: none;
}

/* ── eCommerce tab ───────────────────────────────────────────────────────── */

.sa-paypal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .sa-paypal-grid { grid-template-columns: 1fr; } }

.sa-paypal-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.sa-paypal-box-title {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.sa-paypal-completed .sa-paypal-box-title { color: #15803d; }
.sa-paypal-uncompleted .sa-paypal-box-title { color: #b45309; }

.sa-paypal-count {
  font-weight: 700;
  font-size: 1rem;
}

.sa-paypal-scroll {
  max-height: 240px;
  overflow-y: auto;
}

/* ══ Phase B — Students / Companies / Bulk ══════════════════════════════════ */

/* ── Page header row ─────────────────────────────────────────────────────── */

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

/* ── Search panel ────────────────────────────────────────────────────────── */

.sa-search-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.sa-search-form { width: 100%; }

.sa-search-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sa-search-input { flex: 1; min-width: 200px; }

.sa-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sa-results-count {
  font-size: 0.82rem;
  color: #6b7280;
  font-weight: 500;
}

/* ── Table wrapper ───────────────────────────────────────────────────────── */

.sa-table-wrapper {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sa-table-actions {
  white-space: nowrap;
  text-align: right;
}
.sa-table-actions form { display: inline; }

.sa-btn-link {
  display: inline-flex;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #4B3F9C;
  text-decoration: none;
  border: 1px solid #c4b5fd;
  border-radius: 5px;
  background: #f5f3ff;
  margin-left: 4px;
  transition: background 0.1s;
}
.sa-btn-link:hover { background: #ede9fe; }

.sa-empty-cell {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 28px 0 !important;
}

.sa-empty-msg {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.85rem;
  padding: 20px 0;
}

.sa-table-note {
  font-size: 0.78rem;
  color: #6b7280;
  padding: 10px 16px;
  border-top: 1px solid #f3f4f6;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.sa-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

.sa-badge-green  { background: #dcfce7; color: #15803d; }
.sa-badge-red    { background: #fee2e2; color: #b91c1c; }
.sa-badge-yellow { background: #fef9c3; color: #854d0e; }
.sa-badge-gray   { background: #f3f4f6; color: #4b5563; }

/* ── Back row ────────────────────────────────────────────────────────────── */

.sa-back-row { margin-bottom: 16px; }

.sa-back-link {
  font-size: 0.82rem;
  color: #6b7280;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sa-back-link:hover { color: #4B3F9C; }

/* ── Profile header ──────────────────────────────────────────────────────── */

.sa-profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sa-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4B3F9C, #272030);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sa-profile-avatar-company {
  background: linear-gradient(135deg, #0369a1, #075985);
  border-radius: 10px;
}

.sa-profile-info { flex: 1; }

.sa-profile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.sa-sep { color: #d1d5db; }

.sa-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Detail grid ─────────────────────────────────────────────────────────── */

.sa-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) { .sa-detail-grid { grid-template-columns: 1fr; } }

.sa-detail-section {}

.sa-detail-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 6px;
}

.sa-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 0.82rem;
}
.sa-dl dt { color: #6b7280; font-weight: 500; white-space: nowrap; }
.sa-dl dd { color: #111827; }

.sa-notes-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #374151;
  min-height: 60px;
  white-space: pre-wrap;
}

/* ── Link ────────────────────────────────────────────────────────────────── */

.sa-link {
  color: #4B3F9C;
  text-decoration: none;
}
.sa-link:hover { text-decoration: underline; }

/* ── Tab panel header ────────────────────────────────────────────────────── */

.sa-tab-panel-header {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ── Form card ───────────────────────────────────────────────────────────── */

.sa-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 860px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sa-form-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 22px 0 14px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 6px;
}
.sa-form-section-title:first-child { margin-top: 0; }

.sa-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .sa-form-row-2 { grid-template-columns: 1fr; } }

.sa-form-row-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .sa-form-row-3 { grid-template-columns: 1fr; } }

.sa-select-full { width: 100%; }

/* ── Custom select dropdown (Stimulus: custom-select) ─────────────────── */

.cs-wrapper {
  position: relative;
  display: block;
}

.cs-native-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cs-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  min-height: 38px;
}

.cs-button:hover { border-color: #9ca3af; }
.cs-button:focus { outline: none; border-color: #4B3F9C; box-shadow: 0 0 0 2px rgba(75,63,156,0.1); }

.cs-button[aria-expanded="true"] {
  border-color: #4B3F9C;
  box-shadow: 0 0 0 2px rgba(75,63,156,0.1);
}

.cs-button-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-chevron {
  font-size: 0.7rem;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.cs-button[aria-expanded="true"] .cs-chevron {
  transform: rotate(180deg);
}

.cs-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 4px;
  margin: 0;
  list-style: none;
}

.cs-panel.hidden { display: none; }

.cs-option {
  padding: 7px 10px;
  font-size: 0.85rem;
  color: #111827;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-option:hover { background: #f3f4f6; }

.cs-option-selected {
  background: #ede9fe;
  color: #4B3F9C;
  font-weight: 600;
}

.cs-option-selected:hover { background: #ddd6fe; }

.sa-form-checkboxes {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sa-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
}

.sa-form-textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.sa-form-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 10px;
}

.sa-form-errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.sa-form-error-item {
  font-size: 0.82rem;
  color: #b91c1c;
  margin-bottom: 4px;
}
.sa-form-error-item:last-child { margin-bottom: 0; }

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

.sa-btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.sa-btn-secondary:hover { background: #e5e7eb; }

.sa-btn-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ── Text helpers ────────────────────────────────────────────────────────── */

.sa-text-mono {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.8em;
}

/* ── Bulk forms ──────────────────────────────────────────────────────────── */

.sa-bulk-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.82rem;
  color: #0369a1;
  margin-bottom: 18px;
  line-height: 1.6;
}
.sa-bulk-info code {
  background: rgba(3,105,161,0.1);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, monospace;
}

.sa-bulk-textarea {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
}

/* ── Bulk form card ──────────────────────────────────────────────────────── */

.sa-bulk-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  max-width: 980px;
}

.sa-bulk-section {
  padding: 24px 28px;
  border-bottom: 1px solid #f3f4f6;
}
.sa-bulk-section:last-child { border-bottom: none; }

.sa-bulk-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e1b4b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.sa-bulk-section-title em {
  font-style: normal;
  color: #4B3F9C;
  text-transform: none;
}

.sa-bulk-info-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.sa-bulk-info-danger code {
  background: rgba(185,28,28,0.1);
  color: inherit;
}

.sa-bulk-placeholder {
  padding: 40px 28px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

/* ── Checkbox grid for courses/programs ──────────────────────────────────── */

.sa-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sa-checkbox-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 700px) { .sa-checkbox-grid-2col { grid-template-columns: 1fr; } }

.sa-checkbox-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #374151;
  transition: background 0.1s, border-color 0.1s;
}
.sa-checkbox-card:hover { background: #f0f0ff; border-color: #c4b5fd; }
.sa-checkbox-card input[type="checkbox"] { flex-shrink: 0; }

/* ── Radio grid for course selection ─────────────────────────────────────── */

.sa-radio-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 700px) { .sa-radio-grid-2col { grid-template-columns: 1fr; } }

.sa-radio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  color: #374151;
  transition: background 0.1s, border-color 0.1s;
}
.sa-radio-card:hover { background: #fff0f0; border-color: #fca5a5; }
.sa-radio-card input[type="radio"] { flex-shrink: 0; }

/* ── Form group inline ───────────────────────────────────────────────────── */

.sa-form-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sa-form-group-inline .sa-form-label { white-space: nowrap; margin-bottom: 0; }
.sa-form-group-inline .sa-select { min-width: 240px; }

/* ── Small button ────────────────────────────────────────────────────────── */

.sa-btn-sm {
  padding: 6px 12px;
  font-size: 0.78rem;
}

/* ── File input ──────────────────────────────────────────────────────────── */

.sa-file-input {
  display: block;
  font-size: 0.83rem;
  color: #374151;
  padding: 8px 0;
}

/* ── Upload steps ────────────────────────────────────────────────────────── */

.sa-bulk-upload-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sa-bulk-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sa-bulk-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4B3F9C;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.sa-bulk-step-body { flex: 1; }

.sa-bulk-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e1b4b;
  margin-bottom: 8px;
}

.sa-bulk-step-hint {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 10px;
}

/* ── Bulk index grid ─────────────────────────────────────────────────────── */

.sa-bulk-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sa-bulk-index-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #1e1b4b;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sa-bulk-index-card:hover { box-shadow: 0 4px 12px rgba(75,63,156,0.15); border-color: #c4b5fd; }

.sa-bulk-index-card-danger:hover { box-shadow: 0 4px 12px rgba(185,28,28,0.12); border-color: #fca5a5; }

.sa-bulk-index-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #4B3F9C;
}
.sa-bulk-index-card-danger .sa-bulk-index-icon { color: #b91c1c; }

.sa-bulk-index-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.sa-bulk-index-label span {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: #6b7280;
  margin-top: 3px;
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.sa-tooltip-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.sa-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.sa-tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #1f2937;
  color: #f9fafb;
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 7px;
  position: absolute;
  z-index: 200;
  width: 320px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* Top (default) */
.sa-tooltip-top .sa-tooltip-text {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.sa-tooltip-top .sa-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
/* Bottom */
.sa-tooltip-bottom .sa-tooltip-text {
  top: calc(100% + 8px);
  left: -5px;
  transform: none;
}
.sa-tooltip-bottom .sa-tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10px;
  transform: none;
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}
/* Right */
.sa-tooltip-right .sa-tooltip-text {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}
.sa-tooltip-right .sa-tooltip-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #1f2937;
}
.sa-tooltip-wrapper:hover .sa-tooltip-text,
.sa-tooltip-wrapper:focus-within .sa-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ── Radio group (level selector) ────────────────────────────────────────── */
.sa-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 4px;
}
.sa-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.4;
}
.sa-radio-label:hover { border-color: #7c3aed; background: #faf5ff; }
.sa-radio-label input[type="radio"] { margin-top: 2px; accent-color: #7c3aed; }
.sa-radio-label-title { font-weight: 600; font-size: 0.88rem; }
.sa-radio-label-desc  { font-size: 0.8rem; color: #6b7280; }

/* ── Release licences table ──────────────────────────────────────────────── */
.sa-section { margin-bottom: 2rem; }
.sa-section-title { font-size: 1rem; font-weight: 700; color: #374151; margin-bottom: 0.75rem; }

/* ── Modal dialog ────────────────────────────────────────────────────────── */
.sa-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 0;
  width: 560px;
  max-width: min(95vw, 560px);
  max-height: 92vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.sa-modal:not([open]) { display: none; }
.sa-modal::backdrop {
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(3px);
}
.sa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 14px 14px 0 0;
  flex-shrink: 0;
  overflow: visible;
}
.sa-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.sa-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.sa-modal-close:hover { color: #374151; background: #f3f4f6; }
.sa-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  border-radius: 0 0 14px 14px;
}
.sa-modal-loading {
  padding: 3rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

/* ── Modal input / label primitives ─────────────────────────────────────── */
.sa-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
.sa-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sa-input:focus {
  border-color: #4B3F9C;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75,63,156,0.12);
}
.sa-input::placeholder { color: #9ca3af; }
.sa-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ── Modal form layout ───────────────────────────────────────────────────── */
.sa-modal-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.sa-modal-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

/* ── Label with inline action button (e.g. password + Generate) ──────────── */
.sa-label-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.sa-label-with-action .sa-label { margin: 0; }
.sa-generate-pw-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sa-generate-pw-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

/* ── Visible password input ──────────────────────────────────────────────── */
.sa-input-pw-reveal {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ── Help text variants ──────────────────────────────────────────────────── */
.sa-help-warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 6px;
  font-size: 0.8rem;
}

/* ── Table action buttons ────────────────────────────────────────────────── */
.sa-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.5;
}
.sa-action-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; }

.sa-action-btn-danger {
  border-color: #fca5a5;
  color: #b91c1c;
  background: #fff;
}
.sa-action-btn-danger:hover { background: #fef2f2; border-color: #ef4444; }

.sa-action-btn-success {
  border-color: #86efac;
  color: #166534;
  background: #fff;
}
.sa-action-btn-success:hover { background: #f0fdf4; border-color: #22c55e; }

/* ── Licences per Year page ──────────────────────────────────────────────── */
.sa-lpy-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
@media (max-width: 640px) { .sa-lpy-form-grid { grid-template-columns: 1fr; } }

.sa-lpy-output-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
  flex-wrap: wrap;
}
.sa-lpy-radio-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}
.sa-lpy-radio { accent-color: #4B3F9C; }

.sa-lpy-results { padding: 0; overflow: hidden; }
.sa-lpy-results-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #374151;
}
.sa-lpy-results-header strong { font-size: 0.95rem; color: #111827; }

.sa-lpy-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
}
.sa-lpy-year-block {
  padding: 1rem 1.25rem;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.sa-lpy-year-block:nth-child(n):last-child { border-right: none; }

.sa-lpy-year-found {
  font-size: 0.72rem;
  color: #6b7280;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.sa-lpy-year-label {
  font-size: 1rem;
  font-weight: 700;
  color: #4B3F9C;
  margin-bottom: 0.5rem;
}
.sa-lpy-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sa-lpy-table tr { border-bottom: 1px solid #f3f4f6; }
.sa-lpy-table tr:last-child { border-bottom: none; }
.sa-lpy-dept { color: #111827; padding: 4px 0; }
.sa-lpy-cnt  { color: #374151; font-weight: 600; text-align: right; padding-left: 0.5rem; white-space: nowrap; vertical-align: top; }

/* ── Release Old Licences page ───────────────────────────────────────────── */
.sa-rol-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: #fff7f7;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sa-rol-banner-title {
  color: #b91c1c;
  font-weight: 600;
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
}
.sa-rol-banner-sub {
  color: #6b7280;
  font-size: 0.8rem;
  margin: 0;
}
.sa-rol-banner-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sa-rol-banner-actions form { margin: 0; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.sa-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.sa-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  transition: background 0.12s, border-color 0.12s;
}
.sa-page-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; }
.sa-page-btn-active {
  background: #4B3F9C;
  border-color: #4B3F9C;
  color: #fff;
  pointer-events: none;
}
.sa-page-btn-disabled {
  color: #d1d5db;
  pointer-events: none;
  border-color: #f3f4f6;
  background: #fafafa;
}

/* ── Demo Accounts ────────────────────────────────────────────────────────── */
.sa-demos-toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  background: #fff;
  color: #374151;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.sa-demos-toggle-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.sa-demos-toggle-active {
  background: #f0fdf4;
  border-color: #4ade80;
  color: #166534;
}
.sa-demos-toggle-active-inactive {
  background: #f8fafc;
  border-color: #4B3F9C;
  color: #4B3F9C;
}

.sa-demos-summary {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}
.sa-demos-summary::-webkit-details-marker { display: none; }
.sa-demos-summary::before {
  content: "▶";
  font-size: 0.7rem;
  margin-right: 0.6rem;
  transition: transform 0.2s;
  color: #6b7280;
}
details[open] > .sa-demos-summary::before { transform: rotate(90deg); }
.sa-demos-summary-active {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.sa-demos-summary-active:hover { background: #dcfce7; }
.sa-demos-summary-inactive {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #374151;
}
.sa-demos-summary-inactive:hover { background: #f1f5f9; }

/* ── Completion result panel ──────────────────────────────────────────────── */
.sa-completion-result {
  border: 2px solid #4ade80;
  border-radius: 10px;
  overflow: hidden;
  background: #f0fdf4;
}
.sa-completion-result-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.sa-completion-result-body {
  padding: 0.75rem 1rem;
}
.sa-completion-result-row {
  padding: 0.2rem 0;
  font-size: 0.9rem;
  color: #1e293b;
}
.sa-completion-result-success {
  font-weight: 700;
  color: #16a34a;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

/* Utility helpers used across multiple pages */
.sa-text-danger  { color: #dc2626; }
.sa-text-muted   { color: #9ca3af; }
.sa-text-small   { font-size: 0.82rem; color: #6b7280; }

/* ── Client Admins (Show) page ──────────────────────────────────────────────── */
.sa-page-intro {
  color: #4b5563;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  max-width: 780px;
}

.sa-card-centered { text-align: center; }
.sa-form-row-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sa-info-banner {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  word-break: break-all;
}
.sa-info-banner a { color: #047857; text-decoration: underline; }

.sa-table tr.sa-row-inactive td {
  background: #fef2f2;
  color: #991b1b;
}
.sa-table tr.sa-row-inactive:hover td { background: #fee2e2; }

.sa-btn-link-danger {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
  cursor: pointer;
}
.sa-btn-link-danger:hover { background: #fee2e2; }

.sa-btn-link-success {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
  cursor: pointer;
}
.sa-btn-link-success:hover { background: #dcfce7; }

.sa-form-note {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.sa-help-text {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 4px 0 0 0;
}

/* ─── Learning Paths tab on SA student profile ──────────────────── */
.sa-lp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-lp-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.sa-lp-row[open] {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.sa-lp-row summary { list-style: none; cursor: pointer; }
.sa-lp-row summary::-webkit-details-marker { display: none; }
.sa-lp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}
.sa-lp-summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.sa-lp-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  color: #64748b;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.sa-lp-row[open] .sa-lp-chevron { transform: rotate(90deg); }
.sa-lp-summary-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.sa-lp-summary-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sa-lp-summary-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sa-lp-progress-bar {
  width: 120px;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sa-lp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.sa-lp-progress-pct {
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
  min-width: 36px;
  text-align: right;
}
.sa-lp-expanded {
  padding: 4px 16px 16px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}
.sa-lp-inner-table { margin-top: 12px; }
.sa-lp-course-link {
  color: #0f172a;
  font-weight: 500;
  text-decoration: none;
}
.sa-lp-course-link:hover {
  color: #4338ca;
  text-decoration: underline;
}
.sa-lp-course-code {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
  font-size: 11px;
}

/* Slide-level progress for self-contained course packages.
   These courses hold every module inside ONE activity, so the enrolment row can
   only say started or completed. This shows how far through the learner really
   is, and which internal module they stalled in. */
.sa-slide-progress { display: flex; flex-direction: column; gap: 4px; min-width: 132px; }
.sa-slide-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}
.sa-slide-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #86e8f8, #4b3f9c);
}
.sa-slide-text { font-size: 11px; color: #6b7280; font-weight: 600; white-space: nowrap; }

.sa-pkg-modules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sa-pkg-module {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 600;
}
.sa-pkg-module.done { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.sa-pkg-module em { font-style: normal; opacity: 0.75; }
/* Team Management — Client Admin Portal
   Mirrors the .students-table conventions but with its own class names so
   styling changes here don't accidentally affect the Students page. Sticky
   header, % colgroup widths, alternating-row background, min-width with
   horizontal scroll for narrow viewports. */

.team-flash {
  margin: 16px 32px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid;
}
.team-flash-notice {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.team-flash-alert {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Header buttons */
.team-primary-btn,
.team-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.team-primary-btn {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.team-primary-btn:hover {
  background: #1e293b;
  border-color: #1e293b;
}
.team-secondary-btn {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
.team-secondary-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* Table */
.team-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
}

.team-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.team-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.team-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: middle;
}

.team-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.team-table tbody tr:hover td {
  background: #f1f5f9;
}

.team-empty {
  text-align: center;
  color: #94a3b8;
  padding: 32px 16px !important;
  font-style: italic;
}

.team-name-cell {
  font-weight: 600;
}

.team-you-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: 999px;
}

/* Role chips */
.team-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.team-role-admin,
.team-role-super {
  background: #fef3c7;
  color: #92400e;
}
.team-role-manager,
.team-role-dept {
  background: #e0e7ff;
  color: #3730a3;
}

/* Status chips */
.team-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.team-status-active {
  background: #dcfce7;
  color: #15803d;
}
.team-status-pending {
  background: #fef3c7;
  color: #b45309;
}
.team-status-inactive {
  background: #fee2e2;
  color: #b91c1c;
}

/* Action icon-buttons */
.team-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.team-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.team-icon-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.team-icon-btn-danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
/* Success variant — green tint on hover for activate/restore actions
   (used by the Students Activate toggle, future Restore buttons). */
.team-icon-btn-success:hover {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}
.team-action-disabled {
  color: #cbd5e1;
}

/* Modal form fields (reuse modal-overlay/.modal-content from settings) */
.team-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  flex: 1;
}
.team-field-row {
  display: flex;
  gap: 12px;
}
.team-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.team-field-input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  /* Force light theme for the NATIVE <select> popup. Without this,
     Chrome/Safari on macOS dark mode renders the options list dark
     even when the select itself is white — confusing operators who
     report "dropdown background is wrong." Has no effect on light-
     mode systems. Also gates the native form widgets (date pickers,
     number-input spinners) to light styling. */
  color-scheme: light;
}
/* Same fix for native <select> popups on every native dropdown across
   the client-admin UI — not just team_management.css scope. Most form
   pages already share .team-field-input, but a few use raw selects. */
select.team-field-input option,
select option {
  background: #ffffff;
  color: #0f172a;
}
.team-field-input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.team-field-input:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}
.team-field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* Active / Inactive radio group (Edit Admin modal) */
.team-radio-group {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.team-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  cursor: pointer;
  flex: 1;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.team-radio-option:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.team-radio-option:has(input[type="radio"]:checked) {
  border-color: #0f172a;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}
.team-radio-option input[type="radio"] {
  margin: 0;
  accent-color: #0f172a;
}

/* Pagination wrapper */
.team-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Style the pagy_nav output itself — without this the numbers collapse
   into an unreadable "<12>" line. Works for anchor + span variants that
   pagy emits across current/disabled/prev/next states. */
.team-pagination .pagy,
.team-pagination nav.pagy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.team-pagination .pagy a,
.team-pagination .pagy span,
.team-pagination nav.pagy a,
.team-pagination nav.pagy span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.team-pagination .pagy a:hover,
.team-pagination nav.pagy a:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.team-pagination .pagy .current,
.team-pagination .pagy a.current,
.team-pagination .pagy [aria-current="page"],
.team-pagination nav.pagy .current,
.team-pagination nav.pagy a.current,
.team-pagination nav.pagy [aria-current="page"] {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  pointer-events: none;
}
.team-pagination .pagy .disabled,
.team-pagination .pagy a.disabled,
.team-pagination nav.pagy .disabled,
.team-pagination nav.pagy a.disabled {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
  pointer-events: none;
}
.team-pagination .pagy .gap,
.team-pagination nav.pagy .gap {
  border: none;
  background: transparent;
  color: #94a3b8;
  min-width: 20px;
  padding: 0 4px;
}

/* Header action group — Import CSV + Invite Admin sit side-by-side */
.team-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* CSV Import modal */
.team-csv-intro {
  font-size: 14px;
  color: #475569;
  margin: 0 0 16px;
  line-height: 1.55;
}

.team-csv-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: #0891b2;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
}
.team-csv-sample-btn:hover {
  color: #0e7490;
  text-decoration: underline;
}

.team-csv-form {
  display: block;
}

.team-csv-dropzone {
  display: block;
  position: relative;
  margin: 8px 0 4px;
  padding: 28px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.team-csv-dropzone:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.team-csv-dropzone.has-file {
  border-color: #0f172a;
  border-style: solid;
  background: #ffffff;
}

.team-csv-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #64748b;
}

.team-csv-dropzone-prompt {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.team-csv-dropzone-filename {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
  word-break: break-all;
}
.team-csv-dropzone.has-file .team-csv-dropzone-filename {
  color: #15803d;
  font-weight: 600;
}

.team-primary-btn:disabled,
.team-secondary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Bulk-select toolbar (Students index, Step 6) ────────────────────
   Pinned just above the table; only visible when ≥1 row is checked
   (Stimulus `bulk-select` flips the `hidden` attribute). Slate-tinted
   so it reads as a status bar, not an alert. */
.bulk-select-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #f1f5f9;          /* slate-100 */
  border: 1px solid #cbd5e1;    /* slate-300 */
  border-radius: 8px;
  font-size: 13px;
}
.bulk-select-count {
  color: #0f172a;
}
.bulk-select-count strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bulk-select-delete {
  margin-left: auto;
  width: auto;
  padding: 6px 12px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ─── iOS-style status toggle (Students index, Active/Inactive flag) ──
   Pill-shaped button with a sliding thumb. State is visible at a glance
   — no need to interpret an icon glyph. Click submits a form to
   `toggle_active`; the thumb slides on the next page render. The pill
   itself is the button, the thumb is a positioned `<span>` inside it. */
.status-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.status-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15);
}
.status-toggle-thumb {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: left 0.18s ease;
}
/* On = active = green pill, thumb on the right. */
.status-toggle-on {
  background: #16a34a;          /* green-600 */
  border-color: #15803d;        /* green-700 */
}
.status-toggle-on:hover { background: #15803d; }
.status-toggle-on .status-toggle-thumb { left: 18px; }

/* Off = inactive = slate pill, thumb on the left. */
.status-toggle-off {
  background: #cbd5e1;          /* slate-300 */
  border-color: #94a3b8;        /* slate-400 */
}
.status-toggle-off:hover { background: #94a3b8; }
.status-toggle-off .status-toggle-thumb { left: 2px; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Google Fonts import lives in _fonts.css — NOT here. `require_self` puts
   this file's body at the BOTTOM of the compiled bundle, and the CSS spec
   ignores an @import that isn't before all other rules, so an import written
   here silently never loads (the app then falls back to system fonts).
   _fonts.css sorts first under require_tree, which is the only position the
   import actually works from. */

/* ─────────────────────────────────────────────────────────────
   Theme tokens — the ONE place fonts (and future colour /
   spacing tokens) are defined. Any stylesheet that references
   `var(--font-primary)` inherits changes automatically, so
   swapping fonts app-wide is a one-line edit here.
   ───────────────────────────────────────────────────────────── */
:root {
  --font-primary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif:   Cambria, Georgia, serif;
}

/* Normalize font across the entire admin — overrides Tailwind base
   reset. `!important` because Tailwind's preflight sets `font-family`
   on `body` at higher specificity than the wildcard would otherwise
   have. */
*, *::before, *::after {
  font-family: var(--font-primary) !important;
}

/* Monospace surfaces (inline code, IDs, `{{placeholder}}` hints in
   the certificate builder) opt back into a monospace stack with
   their own `!important` so they win over the wildcard above. */
code, pre, kbd, samp, .monospace {
  font-family: var(--font-mono) !important;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1001;
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-logo {
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

.navbar-title {
  color: #0d7c8c;
  font-weight: 600;
  font-size: 14px;
}

.navbar-role {
  color: #6b7280;
  font-size: 13px;
}

.navbar-company {
  color: #272030;
  font-weight: 600;
  font-size: 14px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b3f9c, #958ddb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(75, 63, 156, 0.2);
}

.profile-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(75, 63, 156, 0.3);
}

.dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1002;
}

.modern-layout {
  display: flex;
  min-height: 100vh;
  margin-top: 60px;
  overflow-x: hidden;
  max-width: 100vw;
}

.sidebar {
  width: 248px;
  background: linear-gradient(180deg, #4b3f9c 0%, #3d3380 100%);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
}

/* Small uppercase group headings splitting the nav into scannable sections
   (Engagement / Learning / Organization / Tools / Billing / Compliance
   Bundle). Same treatment the Compliance heading pioneered. */
.nav-section-label {
  margin: 12px 0 3px;
  padding: 0 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Compact rows: the nav has grown to ~19 items plus the Compliance section,
   so the old 11px padding + 2px margins pushed half the menu below the
   fold. Tightened to fit a full menu on a typical laptop viewport. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  margin: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  border-left: 2px solid transparent;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  font-weight: 600;
  border-left: 2px solid #5dd5e8;
}

.nav-item.active svg {
  stroke: #fff;
}

/* ── Flash toasts ─────────────────────────────────────────────────── */
.flash-container {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.flash-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: 420px;
  padding: 13px 14px 13px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  font-size: 13.5px;
  font-weight: 500;
  pointer-events: all;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.flash-toast.flash-visible {
  opacity: 1;
  transform: translateX(0);
}

.flash-toast.flash-hiding {
  opacity: 0;
  transform: translateX(20px);
}

.flash-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.flash-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.flash-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.flash-success .flash-icon { background: #dcfce7; color: #16a34a; }
.flash-error   .flash-icon { background: #fee2e2; color: #dc2626; }

.flash-message {
  flex: 1;
  line-height: 1.4;
}

.flash-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.flash-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }

.flash-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 12px 12px;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform linear;
}

.flash-success .flash-progress { background: #16a34a; }
.flash-error   .flash-progress { background: #dc2626; }

.flash-progress-run { transform: scaleX(0); }
/* ────────────────────────────────────────────────────────────────── */

.sidebar-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.logout-btn {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

.logout-btn:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

.main-content {
  flex: 1;
  margin-left: 248px;
  padding: 0;
  width: calc(100% - 248px);
  background: #f9fafb;
  overflow-x: hidden;
}

.content-header {
  background: white;
  padding: 16px 32px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-title {
  font-size: 20px;
  font-weight: 700;
  color: #272030;
  margin: 0;
}

.content-subtitle {
  color: #6b7280;
  margin: 4px 0 0 0;
  font-size: 13px;
}

.students-container,
.dashboard-container {
  padding: 32px;
}

.learnophia-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.learnophia-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.learnophia-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.learnophia-icon-box {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #86e8f8 0%, #5dd5e8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.3);
}

.learnophia-cta,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #86e8f8 0%, #5dd5e8 100%);
  color: #272030;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.3);
}

.learnophia-cta:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(134, 232, 248, 0.4);
}

.btn-primary:disabled,
.btn-primary[disabled] {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
  opacity: 0.7;
}

.home-section {
  margin-bottom: 32px;
}

.dashboard-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.dashboard-eyebrow {
  margin: 0 0 10px;
  color: #0d7c8c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dashboard-hero-title {
  margin: 0 0 12px;
  color: #272030;
  font-size: 28px;
  font-weight: 700;
}

.dashboard-hero-text {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
  max-width: 720px;
}

.dashboard-stats-grid,
.dashboard-actions-grid {
  display: grid;
  gap: 18px;
}

.dashboard-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-stat {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
}

.dashboard-stat-label {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.dashboard-stat-value {
  color: #272030;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 28px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: white;
  color: #272030;
  text-decoration: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.action-card:hover {
  border-color: #4b3f9c;
  background: #f8f6ff;
  box-shadow: 0 4px 16px rgba(75, 63, 156, 0.1);
}

.action-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f0eeff;
  color: #4b3f9c;
  margin-bottom: 16px;
  transition: background 0.2s;
}

.action-card:hover .action-card-icon {
  background: #e6e0ff;
}

.action-card h3 {
  margin: 0 0 6px;
  color: #1a1523;
  font-size: 15px;
  font-weight: 700;
}

.action-card p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.reports-placeholder {
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 18px;
  color: #6b7280;
  background: #fff;
}

/* ── Report form row ─────────────────────────────────────────────────────── */
.report-tab-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #1e293b;
}

.report-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

.report-form-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-right: 4px;
}

.report-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.report-dept-select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  min-width: 260px;
}

.report-dept-name {
  font-size: 14px;
  color: #1e293b;
  padding: 6px 0;
}

/* ── Report output ────────────────────────────────────────────────────────── */
.report-output {
  margin-top: 24px;
}

.report-section-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.report-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #e2e8f0;
}

.report-company-name {
  font-size: 17px;
  font-weight: 700;
  color: #1a5276;
  line-height: 1.4;
}

.report-date {
  font-size: 15px;
  font-weight: 600;
  color: #1a5276;
  margin-top: 2px;
}

.report-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #374151;
  line-height: 2;
}

.report-summary p { margin: 0; }

/* ── Course block ─────────────────────────────────────────────────────────── */
.report-course-block {
  border: 1px solid #dbeafe;
  border-left: 4px solid #1a5276;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.8;
  color: #1e293b;
}

.report-course-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a5276;
  margin-bottom: 6px;
}

.report-course-dept {
  font-size: 13px;
  font-weight: 600;
  color: #1a5276;
  margin-bottom: 8px;
}

.report-subsection-title {
  font-weight: 600;
  color: #1e293b;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13.5px;
}

.report-student-row {
  font-size: 13px;
  color: #374151;
  padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.6;
  margin: 0;
}

.report-empty {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  margin: 4px 0 8px;
}

.report-course-separator {
  text-align: center;
  color: #dc2626;
  font-size: 13px;
  margin: 14px 0 2px;
  letter-spacing: 1px;
}

.tab_container {
  margin-top: 20px;
}

ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

ul.tabs li {
  background: #fff;
  color: #6b7280;
  display: inline-block;
  padding: 16px 20px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  margin-right: 8px;
  font-weight: 600;
  line-height: 1.2;
}

ul.tabs li.current {
  color: #4b3f9c;
  box-shadow: inset 0 2px 0 #4b3f9c;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 0 12px 12px 12px;
}

.tab-content.current {
  display: block;
}

/* Student-profile flavour of the shared tabs: Poppins, single-line labels,
   a size down from the Reports tabs. Scoped so the Reports page keeps its
   two-line layout. */
.student-profile-tabs ul.tabs li {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  padding: 12px 18px;
  white-space: nowrap;
}

/* Per-course action cluster on the student profile (Send Reminder +
   Escalate). One compact column; the two controls share a height and the
   button/select chrome so the cell reads as a single tidy unit. */
.student-action-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 230px;
}
.student-action-form { display: block; }
.student-action-btn {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.student-action-btn:hover:not(:disabled) {
  border-color: #4b3f9c;
  color: #4b3f9c;
  background: #f5f3ff;
}
.student-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.student-escalate-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.student-escalate-select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: #334155;
}
.student-escalate-select:focus {
  outline: none;
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}
.student-escalate-btn {
  width: auto;
  flex: none;
}

.student-list-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 56px;
}

.search-bar {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 12px;
}

/* ── Login ─────────────────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-card {
  animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-secure-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #94a3b8;
}

.login-secure-footer svg {
  flex-shrink: 0;
  stroke: #5dd5e8;
}

.login-welcome-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #272030 0%, #4b3f9c 60%, #7c6fd4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Settings ──────────────────────────────────────────────────── */
.settings-detail-list {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

.settings-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
  gap: 24px;
}

.settings-detail-row dt,
.settings-detail-row dd {
  margin: 0;
}

.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-card-actions {
  display: flex;
  gap: 8px;
}

.settings-outline-btn {
  height: 36px;
  padding: 0 16px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.settings-outline-btn:hover {
  border-color: #5dd5e8;
  background: #f0fdff;
  color: #0e7490;
}


.settings-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.settings-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

.settings-info-value {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}

.settings-field-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.settings-field-row .learnophia-input {
  flex: 1;
  margin: 0;
}

.settings-password-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.settings-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.settings-save-btn {
  height: 44px;
  padding: 0 20px;
  background: linear-gradient(135deg, #86e8f8 0%, #5dd5e8 100%);
  color: #1a1523;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.2s;
}

.settings-save-btn:hover {
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.4);
}

.settings-error {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #dc2626;
}

/* Student toolbar: search + status filter */
.student-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.student-search-form {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.student-status-tabs {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
  align-self: stretch;
}

.student-status-tab {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.student-status-tab:hover { color: #374151; background: rgba(255,255,255,0.6); }

.student-status-tab.active {
  background: #fff;
  color: #272030;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.student-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.student-search-box:focus-within {
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

.student-search-icon {
  color: #9ca3af;
  flex-shrink: 0;
}

.student-search-input {
  flex: 1;
  height: 46px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #1a1523;
}

.student-search-input:focus { outline: none; }

.student-search-input::placeholder { color: #9ca3af; }

.student-search-clear {
  display: flex;
  align-items: center;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.15s;
}

.student-search-clear:hover { color: #374151; }

.student-search-btn {
  height: 46px;
  padding: 0 22px;
  background: linear-gradient(135deg, #86e8f8 0%, #5dd5e8 100%);
  color: #1a1523;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.2s;
}

.student-search-btn:hover {
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.4);
}

.search-input,
.learnophia-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
}

.search-input:focus,
.learnophia-input:focus {
  outline: none;
  border-color: #4b3f9c;
  box-shadow: 0 0 0 4px rgba(75, 63, 156, 0.1);
}

.btn-secondary {
  background: white;
  color: #272030;
  border: 2px solid #e5e7eb;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .students-table {
  min-width: 1100px;
}

/* Prevent date/language columns from wrapping */
.students-table td:nth-child(n+6),
.students-table th:nth-child(n+6) {
  white-space: nowrap;
}

.students-table td:nth-child(3),
.students-table th:nth-child(3) {
  min-width: 140px;
}

.students-table {
  width: 100%;
  border-collapse: collapse;
}

.students-table thead {
  background: #f9fafb;
}

.students-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: #272030;
  font-size: 13px;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.students-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13.5px;
  color: #6b7280;
}

.students-table tbody tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-active {
  background: #ecfdf5;
  color: #065f46;
}

.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.muted-text {
  color: #6b7280;
  font-size: 14px;
}

.learnophia-title {
  color: #272030;
  font-size: 20px;
  font-weight: 700;
}

.section-mini-title {
  color: #272030;
  font-size: 16px;
  font-weight: 600;
}

.cb-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  z-index: 999;
}

.cb-header-top-row,
.cb-header-right,
.cb-outline-title,
.cb-section-heading-row,
.cb-section-actions,
.cb-pill-row,
.cb-activity-top,
.cb-activity-title-row,
.cb-activity-actions,
.cb-activity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cb-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 8px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.cb-back-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.cb-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #272030;
}

.cb-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

.cb-outline-header {
  margin-bottom: 6px;
}

.cb-outline-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #272030;
}

.cb-counter,
.cb-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.cb-pill-active {
  background: #ecfdf5;
  color: #047857;
}

.cb-outline-subtitle,
.cb-section-description,
.cb-section-meta,
.cb-activity-meta,
.cb-empty-state,
.cb-activity-empty {
  color: #6b7280;
  font-size: 14px;
}

.cb-outline-subtitle {
  margin: 0 0 16px 0;
}

.cb-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  /* overflow: hidden removed so tooltips on action buttons aren't clipped */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cb-section-header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.cb-section.cb-collapsed .cb-section-header {
  border-radius: 12px;
}

.cb-section-header:hover {
  background: #f3f4f6;
}

.cb-section-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cb-section-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #4b3f9c;
  transition: transform 0.25s ease, color 0.15s;
}

.cb-section.cb-collapsed .cb-section-chevron {
  transform: rotate(-90deg);
  color: #9ca3af;
}

.cb-section.cb-collapsed .cb-activities,
.cb-section.cb-collapsed .cb-add-activity-row {
  display: none;
}

.cb-section.cb-collapsed .cb-section-header {
  border-bottom: 0;
}

.cb-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: #d1d5db;
  cursor: grab;
  flex-shrink: 0;
  transition: color 0.15s;
}

.cb-drag-handle:active { cursor: grabbing; }

.cb-section:hover .cb-drag-handle,
.cb-activity:hover .cb-drag-handle { color: #9ca3af; }

.cb-drag-handle-sm { width: 18px; }

.cb-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.cb-drop-before { box-shadow: 0 -3px 0 0 #4b3f9c; }
.cb-drop-after  { box-shadow: 0  3px 0 0 #4b3f9c; }

.cb-section-number,
.cb-activity-order {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4b3f9c, #958ddb);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.cb-section-main {
  min-width: 0;
}

.cb-section-title,
.cb-activity-title {
  margin: 0;
  color: #272030;
  font-weight: 700;
}

.cb-section-description {
  margin: 8px 0;
  line-height: 1.6;
}

.cb-section-meta,
.cb-activity-meta {
  flex-wrap: wrap;
}

.cb-action-link {
  color: #4b3f9c;
  font-weight: 600;
  text-decoration: none;
}

.cb-action-link-primary {
  color: #0d7c8c;
}

.cb-activities {
  padding: 18px 24px 24px;
}

.cb-activity {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
}

.cb-activity:last-child {
  border-bottom: 0;
}

.cb-activity-body {
  min-width: 0;
}

.cb-activity-top {
  justify-content: space-between;
}

.cb-activity-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ede9fe;
  color: #4b3f9c;
}

.cb-empty-state,
.cb-activity-empty {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
}

.cb-empty-state {
  text-align: center;
}

.cb-empty-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.cb-empty-title {
  margin: 0 0 8px;
  color: #272030;
  font-size: 20px;
  font-weight: 700;
}

.cb-empty-text {
  margin: 0;
  color: #6b7280;
}

.cb-add-section-row {
  padding: 16px 0 0;
}

.cb-add-activity-row {
  padding: 0 20px 18px;
}

.cb-add-section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed #c4b5fd;
  border-radius: 12px;
  background: #faf8ff;
  color: #4b3f9c;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.cb-add-section-link:hover {
  border-color: #4b3f9c;
  background: #f3eeff;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.08);
}

.cb-add-activity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px dashed #c4b5fd;
  border-radius: 9px;
  background: #faf8ff;
  color: #4b3f9c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.cb-add-activity-btn:hover {
  border-color: #4b3f9c;
  background: #f3eeff;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.08);
}

.cb-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.cb-icon-btn:hover {
  border-color: #4b3f9c;
  color: #4b3f9c;
  background: #f5f3ff;
}

.cb-icon-btn.disabled,
.cb-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-icon-btn-danger {
  color: #dc2626;
  border-color: #fee2e2;
}

.cb-icon-btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.cb-reorder-btn {
  border-color: #f3f4f6;
  background: #fafafa;
}

.cb-actions-divider {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* Tooltip for cb-icon-btn */
.cb-icon-btn::before,
.cb-icon-btn::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.cb-icon-btn::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: #4b5563;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 10;
}

.cb-icon-btn::after {
  content: "";
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #4b5563;
  z-index: 11;
}

.cb-icon-btn:hover::before,
.cb-icon-btn:hover::after {
  opacity: 1;
}

.cb-section-actions form,
.cb-activity-actions form {
  display: inline-flex;
}

.cb-section-actions,
.cb-activity-actions {
  gap: 6px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 32, 48, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1200;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: white;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.modal-content-wide {
  width: min(920px, 100%);
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-footer {
  border-top: 1px solid #e5e7eb;
  border-bottom: 0;
  justify-content: flex-end;
}

.modal-header h2,
.modal-title {
  margin: 0;
  color: #272030;
  font-size: 18px;
  font-weight: 700;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.modal-close-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.modal-body {
  padding: 24px;
}

.modal-close {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 28px;
  cursor: pointer;
}

/* ── Builder modal form fields ─────────────────────────────────── */
.cb-form-field {
  margin-bottom: 20px;
}

.cb-form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.cb-form-required {
  color: #dc2626;
  margin-left: 2px;
}

.cb-form-input {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.cb-form-input:focus {
  outline: none;
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

.cb-form-input-error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

.cb-form-textarea {
  min-height: 100px;
  resize: vertical;
}

.cb-form-error {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #dc2626;
}

.cb-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cb-access-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 12px 38px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #fff;
}

.cb-access-card:hover {
  border-color: #c4b5fd;
  background: #faf5ff;
}

.cb-access-radio {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  accent-color: #4b3f9c;
}

.cb-access-radio:checked ~ .cb-access-label {
  color: #4b3f9c;
}

.cb-access-card:has(.cb-access-radio:checked) {
  border-color: #4b3f9c;
  background: #f5f3ff;
}

.cb-access-label {
  font-size: 13px;
  font-weight: 600;
  color: #272030;
}

.cb-access-hint {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.4;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #272030;
  font-size: 14px;
  font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="file"],
.form-group textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
}

.form-group textarea {
  min-height: 112px;
}

.radio-group-inline,
.radio-group-stack {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-group-stack {
  flex-direction: column;
}

.radio-option-line,
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 14px;
}

/* ── Activity modal layout ─────────────────────────────────────── */
.modal-content-xl {
  width: min(1020px, 100%);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.modal-content-xl .modal-header {
  flex-shrink: 0;
}

.cb-modal-subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: #9ca3af;
}

.modal-content-xl > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-activity-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 !important;
}

.cb-activity-modal-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #e5e7eb;
  background: white;
}

.cb-upload-progress-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cb-upload-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cb-upload-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.cb-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #86e8f8, #4b3f9c);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.cb-upload-progress-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

/* ── Modal sections ────────────────────────────────────────────── */
.cb-modal-section {
  padding: 24px 28px;
  border-bottom: 1px solid #f3f4f6;
}

.cb-modal-section:last-child {
  border-bottom: 0;
}

.cb-modal-section-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* ── Type card grid ────────────────────────────────────────────── */
.cb-type-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 700px) {
  .cb-type-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.cb-type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
}

.cb-type-card:hover {
  border-color: #c4b5fd;
  background: #fdf8ff;
}

.cb-type-card.selected {
  border-color: #4b3f9c;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

.cb-type-card.locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-type-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.cb-type-card.selected .cb-type-card-icon {
  background: #4b3f9c;
  color: #fff;
}

.cb-type-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cb-type-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #272030;
  white-space: nowrap;
}

.cb-type-card-desc {
  font-size: 11.5px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Settings rows ─────────────────────────────────────────────── */
.cb-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
}

.cb-settings-row:last-child { margin-bottom: 0; }

.cb-settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cb-settings-row-label {
  font-size: 14px;
  font-weight: 600;
  color: #272030;
}

.cb-settings-row-desc {
  font-size: 12.5px;
  color: #6b7280;
}

.cb-settings-row-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cb-switch-off-label,
.cb-switch-on-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #9ca3af;
}

/* ── Toggle switch ─────────────────────────────────────────────── */
.cb-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cb-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cb-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.2s;
}

.cb-switch-track::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.cb-switch input:checked + .cb-switch-track { background: #4b3f9c; }
.cb-switch input:checked + .cb-switch-track::after { transform: translateX(20px); }

/* ── Large upload zone ─────────────────────────────────────────── */
.cb-upload-zone-lg {
  position: relative;
  border: 2px dashed #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}

.cb-upload-zone-lg:not(.has-file) {
  cursor: pointer;
}

.cb-upload-zone-lg:not(.has-file):hover,
.cb-upload-zone-lg.cb-drag-over {
  border-color: #4b3f9c;
  background: #faf8ff;
}

.cb-upload-zone-lg.cb-drag-over {
  border-style: solid;
}

.cb-upload-zone-lg.has-file {
  border-style: solid;
  border-color: #e5e7eb;
}

.cb-upload-zone-placeholder {
  padding: 36px 24px;
  text-align: center;
  pointer-events: none;
}

.cb-upload-zone-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #9ca3af;
}

.cb-upload-zone-title {
  margin: 0 0 4px;
  font-size: 14px;
  color: #374151;
}

.cb-upload-zone-title strong { color: #4b3f9c; }

.cb-upload-zone-sub {
  margin: 0;
  font-size: 12.5px;
  color: #9ca3af;
}

.cb-upload-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-drag: none;
}

.cb-upload-zone-lg.has-file .cb-upload-file-input {
  pointer-events: none;
}

/* ── Upload file preview ───────────────────────────────────────── */
.cb-upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.cb-upload-preview-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #ede9fe;
  color: #4b3f9c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cb-upload-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cb-upload-preview-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #272030;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-upload-preview-size {
  font-size: 12px;
  color: #9ca3af;
}

.cb-upload-preview-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cb-file-btn {
  padding: 6px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cb-file-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.cb-file-btn-danger {
  color: #dc2626;
  border-color: #fecaca;
}

.cb-file-btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ── Quiz info banner ──────────────────────────────────────────── */
.cb-quiz-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 12px;
}

.cb-quiz-info-icon {
  width: 36px;
  height: 36px;
  background: #e0f2fe;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284c7;
  flex-shrink: 0;
}

.cb-quiz-info-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #0c4a6e;
}

.cb-quiz-info-text {
  margin: 0;
  font-size: 13px;
  color: #0369a1;
  line-height: 1.5;
}

/* ── Large title input ─────────────────────────────────────────── */
.cb-form-input-lg {
  font-size: 15px !important;
  padding: 13px 16px !important;
}

/* ── Disabled submit state ─────────────────────────────────────── */
.cb-submit-activity:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.cb-segmented {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}

.cb-seg-option {
  position: relative;
}

.cb-seg-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cb-seg-label {
  display: block;
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
}

.cb-seg-option input:checked + .cb-seg-label {
  background: #fff;
  color: #272030;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.cb-upload-zone {
  position: relative;
  border: 1.5px dashed #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cb-upload-zone:hover {
  border-color: #4b3f9c;
  background: #faf8ff;
}

.cb-upload-inner {
  padding: 28px 20px;
  text-align: center;
  pointer-events: none;
}

.cb-upload-icon {
  color: #9ca3af;
  margin-bottom: 10px;
}

.cb-upload-text {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.cb-upload-text strong {
  color: #4b3f9c;
}

.cb-upload-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

.cb-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.cb-current-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f3f4f6;
  border-radius: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

.cb-form-hint {
  margin: 5px 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

.cb-form-file {
  padding: 9px 12px !important;
  cursor: pointer;
}

.cb-checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.cb-checkbox-option input[type="checkbox"] {
  accent-color: #4b3f9c;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.type-fields {
  display: none;
}

.type-fields.active {
  display: block;
  padding-top: 4px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
}

.hidden {
  display: none !important;
}

.builder-info-banner {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0f172a;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
}

.builder-file-note {
  color: #6b7280;
  font-size: 13px;
}

.preview-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
}

.preview-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.preview-section-title,
.preview-activity-title {
  margin: 0;
  color: #272030;
  font-weight: 700;
}

.preview-section-description {
  margin: 8px 0 0;
  color: #6b7280;
}

.preview-activities {
  padding: 20px 24px;
}

.preview-activity {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}

.preview-activity:last-child {
  margin-bottom: 0;
}

.preview-activity-highlight {
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.08);
}

.preview-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.preview-frame-wrap iframe,
.preview-media {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 12px;
  background: #0f172a;
}

.preview-audio {
  width: 100%;
}

.preview-embed {
  overflow: hidden;
  border-radius: 12px;
}

.course-question-options {
  margin: 14px 0 0;
  padding-left: 20px;
  color: #374151;
}

.course-question-options li {
  margin-bottom: 8px;
}

.course-question-options li.is-correct {
  color: #047857;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .content-header {
    padding: 16px 20px;
  }

  .students-container,
  .dashboard-container {
    padding: 20px;
  }

  .dashboard-hero-card {
    grid-template-columns: 1fr;
  }

  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }

  .cb-header {
    top: 60px;
    padding: 16px 20px;
    flex-direction: column;
    align-items: stretch;
  }

  .cb-container {
    padding: 20px;
  }

  .cb-section-header {
    grid-template-columns: 1fr;
  }

  .cb-activity {
    grid-template-columns: 1fr;
  }

  .cb-activity-top,
  .cb-header-right,
  .cb-section-actions,
  .cb-section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.course-create-shell {
  padding: 24px 32px 40px;
  max-width: 100%;
  overflow-x: hidden;
}

.course-create-shell .info-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #4b3f9c;
  border-radius: 10px;
  padding: 14px 20px;
  margin: 0 0 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-banner-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3ff;
  border-radius: 999px;
  color: #4b3f9c;
  flex-shrink: 0;
}

.info-banner-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #272030;
}

.info-banner-text {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.course-create-shell .wizard-container {
  display: flex;
  gap: 24px;
  margin: 0;
  align-items: flex-start;
}

.course-create-shell .wizard-sidebar {
  width: 360px;
  flex-shrink: 0;
}

.course-create-shell .preview-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.course-create-shell .preview-cover {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #f5f3ff, #e9d5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b3f9c;
}

.course-create-shell .preview-cover.has-image {
  background-size: cover;
  background-position: center;
}

.preview-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-create-shell .preview-body {
  padding: 20px;
}

.course-create-shell .preview-title {
  margin: 0 0 8px;
  min-height: 44px;
  color: #272030;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.course-create-shell .preview-description {
  margin: 0 0 16px;
  min-height: 40px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.course-create-shell .preview-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
  color: #6b7280;
  font-size: 12px;
}

.course-create-shell .wizard-content {
  flex: 1;
  min-width: 0;
}

.course-create-shell .steps-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}

.course-create-shell .step-progress-line {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
}

.course-create-shell .step-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 2px solid #d1d5db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  appearance: none;
}

.course-create-shell .step-dot.active {
  background: #4b3f9c;
  border-color: #4b3f9c;
  color: #fff;
}

.course-create-shell .step-dot.completed {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.course-create-shell .wizard-step {
  display: none;
}

.course-create-shell .wizard-step.active {
  display: block;
}

.course-create-shell .form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 3px solid #4b3f9c;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.course-create-shell .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.course-create-shell .full-width {
  grid-column: 1 / -1;
}

.course-create-shell .form-group {
  margin-bottom: 0;
}

.course-create-shell .form-group label {
  display: block;
  margin-bottom: 6px;
  color: #272030;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-create-shell .form-group input[type="text"],
.course-create-shell .form-group input[type="number"],
.course-create-shell .form-group select,
.course-create-shell .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #272030;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  color-scheme: light;
}

.course-create-shell .form-group select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.course-create-shell .form-group select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b3f9c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  background-color: #fff;
}

.course-create-shell .form-group input[type="text"]:focus,
.course-create-shell .form-group input[type="number"]:focus,
.course-create-shell .form-group input[type="file"]:focus,
.course-create-shell .form-group select:focus,
.course-create-shell .form-group textarea:focus {
  outline: none;
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

/* Course Duration — a compact number field with a fixed "minutes" suffix so
   the unit is unmistakable. The wrapper carries the field chrome; the input
   inside is borderless and flexes. */
.course-create-shell .duration-input-wrap {
  display: inline-flex;
  align-items: center;
  width: 220px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.course-create-shell .duration-input-wrap:focus-within {
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}
.course-create-shell .duration-input-wrap input[type="number"] {
  flex: 1;
  min-width: 0;
  border: none;
  box-shadow: none;
  border-radius: 8px 0 0 8px;
}
.course-create-shell .duration-input-wrap input[type="number"]:focus {
  border: none;
  box-shadow: none;
}
.course-create-shell .duration-input-suffix {
  padding: 12px 16px 12px 10px;
  border-left: 1px solid #f3f4f6;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.course-create-shell .form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Custom file upload button */
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  color: #374151;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  overflow: hidden;
}

.file-upload-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-upload-btn:hover {
  border-color: #4b3f9c;
  background: #f5f3ff;
  color: #4b3f9c;
}

.file-upload-btn svg {
  flex-shrink: 0;
  color: #9ca3af;
  transition: color 0.2s;
}

.file-upload-btn:hover svg {
  color: #4b3f9c;
}

.file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.help-text {
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
}

.field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 8px;
}

.field-footer .help-text {
  margin-top: 0;
}

.char-counter {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.char-counter-warn {
  color: #d97706;
  font-weight: 600;
}

.char-counter-danger {
  color: #dc2626;
  font-weight: 600;
}

.required-star {
  color: #dc2626;
}

.course-create-shell .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
}

.course-create-shell .course-create-cancel,
.course-create-shell .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
}

.course-create-shell .btn-primary {
  min-height: 44px;
}

.course-create-shell .access-type-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-create-shell .access-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.course-create-shell .access-type-option:hover,
.course-create-shell .access-type-option:has(input:checked) {
  border-color: #4b3f9c;
  background: #f5f3ff;
}

.course-create-shell .access-type-option input[type="radio"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #4b3f9c;
  cursor: pointer;
}

.course-create-shell .access-type-content {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.course-create-shell .access-type-title {
  color: #272030;
  font-size: 13px;
  font-weight: 600;
}

.course-create-shell .access-type-desc {
  color: #9ca3af;
  font-size: 11.5px;
}

.course-create-message {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.course-create-message.error,
.course-create-message.info {
  display: block;
}

.course-create-message.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.course-create-message.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.course-create-disabled {
  opacity: 0.65;
}

/* ── Course create/edit responsive ───────────────────────────── */
@media (max-width: 1024px) {
  .course-create-shell .wizard-sidebar {
    width: 260px;
  }

  .course-create-shell .form-card {
    padding: 20px 20px;
  }
}

@media (max-width: 768px) {
  .course-create-shell {
    padding: 16px 16px 32px;
  }

  .course-create-shell .wizard-container {
    flex-direction: column;
  }

  .course-create-shell .wizard-sidebar {
    width: 100%;
  }

  .course-create-shell .form-card {
    padding: 16px 14px;
  }

  .course-create-shell .form-grid {
    grid-template-columns: 1fr;
  }

  .course-create-shell .full-width {
    grid-column: 1;
  }
}

.course-listing-shell {
  padding: 0 32px 32px;
}

.course-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.course-filter-form {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1;
  flex-wrap: wrap;
}

.course-filter-selects {
  display: flex;
  gap: 10px;
  flex-shrink: 1;
  flex-wrap: wrap;
}

/* ── Custom filter dropdowns ─────────────────────────────────── */
.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.2s;
}

.filter-dropdown-btn:hover {
  border-color: #4b3f9c;
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

.filter-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.filter-dropdown-item:hover {
  background: #f5f3ff;
  color: #4b3f9c;
}

.filter-dropdown-item.active {
  background: #f5f3ff;
  color: #4b3f9c;
  font-weight: 600;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-box svg {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  flex-shrink: 0;
}

.search-box input {
  width: 100%;
  height: 48px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #272030;
}

.search-box input:focus {
  outline: none;
}

.search-box:focus-within {
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group select,
.learnophia-select {
  min-width: 140px;
  max-width: 100%;
  width: auto;
  height: 46px;
  padding: 0 40px 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #374151;
  font: inherit;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.filter-group select:focus,
.learnophia-select:focus {
  outline: none;
  border-color: #4b3f9c;
  box-shadow: 0 0 0 3px rgba(75, 63, 156, 0.1);
}

.courses-container {
  padding: 8px 0 0;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: auto;
  gap: 24px;
}

.course-card {
  max-width: 420px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.course-card:hover {
  transform: translateY(-2px);
  border-color: #4b3f9c;
  box-shadow: 0 14px 30px rgba(75, 63, 156, 0.12);
}

.course-thumbnail {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, #4b3f9c, #86e8f8);
}

.course-thumbnail img,
.course-thumbnail-bg {
  width: 100%;
  height: 100%;
}

.course-thumbnail img {
  object-fit: cover;
  display: block;
}

.course-thumbnail-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.course-thumbnail-bg svg {
  width: 56px;
  height: 56px;
}

.course-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(39, 32, 48, 0.75);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.course-badge svg {
  width: 14px;
  height: 14px;
}

.course-content {
  padding: 22px;
}

.course-title {
  margin: 0 0 8px;
  color: #1a1523;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.course-description {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
  min-height: 68px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.course-meta-item,
.course-language {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

.course-meta-item svg,
.course-language svg {
  width: 16px;
  height: 16px;
}

.course-access {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.course-access-draft {
  background: #f3f4f6;
  color: #4b5563;
}

.course-access-free {
  background: #ecfeff;
  color: #0d7c8c;
}

.course-access-paid {
  background: #fef3c7;
  color: #92400e;
}

.course-access-private {
  background: #ede9fe;
  color: #5b21b6;
}

.course-access-soon {
  background: #dbeafe;
  color: #1d4ed8;
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.course-language {
  flex-shrink: 0;
}

.course-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.course-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.course-icon-btn::before,
.course-icon-btn::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

/* tooltip box */
.course-icon-btn::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: #4b5563;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 10;
}

/* notch — renders on top via ::after */
.course-icon-btn::after {
  content: "";
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #4b5563;
  z-index: 11;
}

.course-icon-btn:hover::before,
.course-icon-btn:hover::after {
  opacity: 1;
}

.course-action-primary {
  background: #272030;
  color: #fff;
  border: 1px solid #272030;
}

.course-action-primary:hover {
  background: #4b3f9c;
  border-color: #4b3f9c;
  color: #fff;
}

.course-action-outline {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
}

.course-action-outline:hover {
  border-color: #4b3f9c;
  color: #4b3f9c;
  background: #f5f3ff;
}

.course-action-danger {
  border: 1px solid #fee2e2;
  background: #fff;
  color: #dc2626;
}

.course-action-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.course-create-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 20px;
  background: linear-gradient(135deg, #86e8f8 0%, #5dd5e8 100%);
  color: #1a1523;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.course-create-cta:hover {
  box-shadow: 0 4px 12px rgba(134, 232, 248, 0.45);
  color: #1a1523;
}

.course-create-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 28px;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #ede9fe, #cffafe);
  color: #4b3f9c;
}

.empty-state-icon svg {
  width: 34px;
  height: 34px;
}

.empty-state h3 {
  margin: 0;
  color: #272030;
  font-size: 24px;
  font-weight: 700;
}

.empty-state p {
  margin: 0;
  color: #6b7280;
  max-width: 520px;
  line-height: 1.7;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.pagination-info {
  color: #6b7280;
  font-size: 14px;
}

.pagination-info strong {
  color: #272030;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.pagination a {
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.pagination a:hover {
  background: #f5f3ff;
  border-color: #4b3f9c;
  color: #4b3f9c;
}

.pagination .active {
  background: #4b3f9c;
  color: #fff;
  border: 1px solid #4b3f9c;
}

.pagination .disabled {
  color: #d1d5db;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  cursor: not-allowed;
}

.pagination .ellipsis {
  color: #9ca3af;
  border: 0;
  background: transparent;
}

.pagination-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pagination-nav svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) {
  .course-create-shell .wizard-container {
    flex-direction: column;
  }

  .course-create-shell .wizard-sidebar {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .course-create-shell {
    padding: 20px 16px 32px;
  }

  .course-create-shell .form-card {
    padding: 22px 18px;
  }

  .course-create-shell .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .course-create-shell .form-actions {
    flex-direction: column;
  }

  .course-listing-shell {
    padding: 0 16px 28px;
  }

  .header-action-row,
  .header-action-left,
  .header-action-right,
  .course-filter-form,
  .filter-group,
  .course-footer,
  .pagination-container {
    flex-direction: column;
    align-items: stretch;
  }

  .course-filter-selects {
    flex-direction: column;
  }

  .search-box,
  .filter-group select,
  .learnophia-select {
    min-width: 0;
    width: 100%;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: 28px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Quiz Builder
───────────────────────────────────────────────────────────── */

/* Settings grid */
.qb-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .qb-settings-grid { grid-template-columns: 1fr; }
}

.qb-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid #f3f4f6;
}

.qb-field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

/* Extra padding-right on the type select so the browser arrow has room */
.qb-type-select {
  padding-right: 36px !important;
}

.qb-type-display {
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #272030;
}

/* Add question row */
.qb-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
}

.qb-add-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}

/* Question card */
.qb-question-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.qb-question-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.qb-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.qb-question-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qb-question-type-badge {
  font-size: 11px;
  font-weight: 600;
  color: #4b3f9c;
  background: #ede9fe;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qb-question-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Question form body */
.qb-question-form {
  padding: 20px 20px 16px;
}

.qb-meta-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Options section */
.qb-options-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
}

.qb-hint-badge {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 9999px;
}

.qb-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Option row */
.qb-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qb-option-correct-radio,
.qb-option-correct-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #4b3f9c;
  cursor: pointer;
  align-self: center;
}

.qb-option-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px !important;
  font-size: 14px !important;
}

.qb-option-input:disabled,
.qb-option-input[readonly] {
  background: #f9fafb;
  color: #6b7280;
  cursor: default;
}

/* Add option button */
.qb-add-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #4b3f9c;
  background: none;
  border: 1px dashed #c4b5fd;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.qb-add-option-btn:hover {
  background: #f5f3ff;
  border-color: #7c3aed;
}

/* Short answer notice */
.qb-short-answer-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.qb-short-answer-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Card footer */
.qb-question-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: 12px;
}

/* Danger icon button variant */
.cb-icon-btn-danger:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

/* Small primary button */
.btn-sm {
  padding: 8px 18px !important;
  font-size: 13px !important;
}

/* ── Question list rows (builder index) ─────────────────────── */
.qb-question-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  transition: box-shadow 0.15s;
}

.qb-question-row:last-child { margin-bottom: 0; }

.qb-question-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.qb-question-row:hover .cb-drag-handle { color: #9ca3af; }

.qb-question-row-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.qb-question-row-body {
  flex: 1;
  min-width: 0;
}

.qb-question-row-text {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-question-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qb-meta-dot { color: #d1d5db; font-size: 12px; }
.qb-meta-text { font-size: 12px; color: #6b7280; }

.qb-question-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ── Standalone question page ───────────────────────────────── */
.qb-page-shell {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 32px 24px;
  max-width: 760px;
}

.qb-form-top-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 0;
}

.qb-options-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.qb-page-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
}

/* ── Question modal dialog ──────────────────────────────────── */
.qb-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.08);
  margin: auto;
}

.qb-modal::backdrop {
  background: rgba(15, 10, 30, 0.45);
  backdrop-filter: blur(2px);
}

.qb-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}

.qb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.qb-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #272030;
}

.qb-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.qb-modal-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.qb-modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Form fills the body as a flex column so scrollable area and footer are separate */
.qb-modal-body turbo-frame,
.qb-modal-body turbo-frame form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Scrollable form content */
.qb-form-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-height: 0;
}

/* Footer is outside the scroll — pinned at bottom of modal */
.qb-modal-body .qb-page-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  border-top: 1px solid #f3f4f6;
  margin: 0;
  background: #fff;
}

/* ─── Paused-branch empty state (branded /b/<slug> login when active=false) ─
   Replaces the form area entirely with a calm empty state — circular
   pause badge above a short explainer + a single outlined CTA. No alert
   colors (the page already announces the state in the heading) so the
   page reads as intentional, not as an error. */
.paused-branch-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
}
.paused-branch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #f1f5f9;                       /* slate-100 */
  color: #475569;                            /* slate-600 */
  margin-bottom: 18px;
}
.paused-branch-body {
  margin: 0 0 22px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;                            /* slate-600 */
}
.paused-branch-cta {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;                 /* slate-300 */
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.paused-branch-cta:hover {
  background: #f1f5f9;                       /* slate-100 */
  border-color: #94a3b8;                     /* slate-400 */
}

/* ─── Industry multi-select picker (course create/edit form) ─────── */
.industry-picker {
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 6px;
}
.industry-picker-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.industry-picker-search {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px 8px;
  font-size: 14px;
  color: #0f172a;
  background: transparent;
}
.industry-picker-toggle {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}
.industry-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  z-index: 20;
}
.industry-picker-dropdown.hidden {
  display: none;
}
.industry-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #0f172a;
}
.industry-picker-option:hover {
  background: #f1f5f9;
}
.industry-picker-option input[type="checkbox"] {
  margin: 0;
}
.industry-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px 2px;
}
.industry-picker-tags:empty {
  padding: 0;
}
.industry-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.industry-picker-tag button {
  border: none;
  background: transparent;
  color: #4338ca;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.industry-picker-tag button:hover {
  color: #1e1b4b;
}

/* ─── Learning Path builder form (Screenshot 1) ─────────────────── */
.learning-path-form-card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  max-width: 720px;
  margin: 0 auto;
}
.lp-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}
.lp-form-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4338ca;
  display: flex; align-items: center; justify-content: center;
}
.lp-form-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.lp-form-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #64748b;
}
.lp-form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.lp-field-input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
}
.lp-field-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.lp-course-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-course-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.lp-course-row-ghost {
  opacity: 0.5;
  background: #eef2ff;
}
.lp-drag-handle {
  color: #94a3b8;
  cursor: grab;
  padding: 2px;
}
.lp-drag-handle:active { cursor: grabbing; }
.lp-course-index {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
}
.lp-course-name {
  flex: 1;
  font-size: 14px;
  color: #0f172a;
}
.lp-course-remove {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.lp-course-remove:hover {
  color: #ef4444;
  background: #fef2f2;
}
.lp-add-course {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.lp-add-course-picker {
  flex: 1;
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  color: #64748b;
}
.lp-add-course-btn {
  padding: 8px 14px;
  border: 1px dashed #cbd5e1;
  background: #ffffff;
  color: #4338ca;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
}
.lp-add-course-btn:hover {
  background: #eef2ff;
  border-color: #6366f1;
}
.lp-toggle-row {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}
.lp-toggle-caption {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* ── Storefront settings: two-column layout + live preview ────────────────
   Left column keeps the original 900px form; the right rail holds a sticky
   mock of the public hero that redraws on every keystroke. */
.sf-edit-layout {
  max-width: 1420px;
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(0, 440px);
  gap: 24px;
  align-items: start;
}
.sf-edit-main { min-width: 0; }
/* Below this the mock gets too narrow to represent anything useful, so it
   drops under the form rather than squeezing both. */
@media (max-width: 1280px) {
  .sf-edit-layout { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
  .sf-preview-sticky { position: static !important; }
}

.sf-preview-sticky { position: sticky; top: 20px; }

.sf-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sf-preview-title { font-size: 13px; font-weight: 700; color: #0f172a; }
.sf-preview-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sf-preview-badge.is-live  { background: #dcfce7; color: #166534; }
.sf-preview-badge.is-draft { background: #fef3c7; color: #92400e; }

.sf-preview-frame {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}
.sf-preview-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.sf-preview-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.sf-preview-addr {
  margin-left: 8px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 10.5px;
  color: #64748b;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 74%;
}

.sf-preview-page { background: #f1f5f9; }
.sf-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.sf-preview-nav-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.sf-preview-nav-logo { height: 22px; width: auto; opacity: 0.75; }

/* Mirrors the real hero: brand band, curved bottom, centred stack.
   Sized generously — the first pass was cramped enough that the headline was
   hard to judge, which defeats the point of previewing it. */
.sf-preview-hero {
  padding: 44px 22px 52px;
  text-align: center;
  border-bottom-left-radius: 50% 26px;
  border-bottom-right-radius: 50% 26px;
  transition: background 220ms ease;
}
.sf-preview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 14px;
}
.sf-preview-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; }
.sf-preview-h1 {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  /* Same long-word guard as the live page — the headline is user-entered. */
  overflow-wrap: anywhere;
}
.sf-preview-sub {
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 320px;
  margin: 0 auto 18px;
  overflow-wrap: anywhere;
  /* Long sub-headlines would push the mock absurdly tall; the real page has
     room for them, this rail doesn't. 5 lines covers the 300-char cap at this
     size without the panel outgrowing the viewport it's sticky within. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-preview-btns { display: flex; gap: 8px; justify-content: center; }
.sf-preview-btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.sf-preview-btn-ghost { background: transparent !important; border-style: solid; }

.sf-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px 16px;
}
.sf-preview-card {
  height: 68px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 4px solid #cbd5e1;
  transition: border-top-color 220ms ease;
}

.sf-preview-foot {
  padding: 14px 16px 18px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}
.sf-preview-foot strong { display: block; color: #475569; margin-bottom: 2px; }
.sf-preview-foot-mail { overflow-wrap: anywhere; }
.sf-preview-foot-mail[hidden] { display: none; }

.sf-preview-note {
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
}

/* Live character counter under a capped field (see char_counter_controller.js).
   Right-aligned so it reads as a meter against the field's edge rather than as
   help text, and tabular figures so the number doesn't jitter while typing. */
.lp-char-count {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #94a3b8;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lp-char-count .is-near { color: #b45309; font-weight: 600; }
.lp-char-count .is-full { color: #b91c1c; font-weight: 600; }
.lp-switch { position: relative; width: 44px; height: 24px; }
.lp-switch-input { position: absolute; opacity: 0; inset: 0; }
.lp-switch-track {
  position: absolute; inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.15s;
}
.lp-switch-track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}
.lp-switch-input:checked + .lp-switch-track { background: #6366f1; }
.lp-switch-input:checked + .lp-switch-track::before { transform: translateX(20px); }
.lp-status-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-status-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}
.lp-status-option input[type="radio"] {
  accent-color: #6366f1;
  margin: 0;
}
.lp-status-option.checked {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}
.lp-form-hint {
  padding: 12px 14px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}
.lp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  margin-top: 12px;
}

.lp-learner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.lp-learner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.lp-learner-body {
  flex: 1;
  min-width: 0;
}
.lp-learner-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.lp-learner-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

/* ─── MTG chips (Applies-when row on the group form) ────────────── */
.mtg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mtg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  color: #0f172a;
}
.mtg-chip svg { color: #6b7280; }
.mtg-chip--muted { background: #f8fafc; color: #64748b; }
.mtg-chip--muted em { font-style: normal; }

/* Read-only variant of the LP course row (used on MTG groups where
   courses are auto-derived from branch membership — the operator
   can't add/remove them here). */
.lp-course-row--readonly {
  background: #f9fafb;
  color: #475569;
}
.lp-course-row--readonly:hover {
  background: #f9fafb;
}

/* ── Learnophia Library (client-admin catalog + assign) ─────────────────── */
.lib-ca-empty {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 40px 24px; text-align: center; color: #6b7280;
}
.lib-ca-empty strong { color: #374151; }

.lib-ca-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px;
}
.lib-ca-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.lib-ca-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(79,70,229,.45); }
/* See .lib-card-cover in admin_details.css — same flex-item minimum-size
   hazard, same fix. Kept in sync deliberately. */
.lib-ca-cover { position: relative; aspect-ratio: 16/9; background: #eef2ff; overflow: hidden; min-height: 0; }
.lib-ca-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-ca-cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
}
.lib-ca-badge {
  position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #0e7490;
  background: rgba(236,254,255,.95); padding: 3px 8px; border-radius: 5px;
}
.lib-ca-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.lib-ca-title {
  font-size: 15px; font-weight: 700; color: #1e1b4b; margin: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-ca-desc { font-size: 12.5px; color: #6b7280; margin: 0; line-height: 1.45; }
.lib-ca-meta { font-size: 12px; color: #4f46e5; font-weight: 600; margin: 0; }
.lib-ca-actions { margin-top: auto; padding-top: 8px; }
.lib-ca-actions .team-primary-btn { width: 100%; justify-content: center; text-align: center; }

.lib-assign-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.lib-assign-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #374151; cursor: pointer; }
.lib-assign-list { display: flex; flex-direction: column; }
.lib-assign-row {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid #f1f2f4; cursor: pointer; font-size: 13.5px;
}
.lib-assign-row:hover { background: #fafafe; }
.lib-assign-name { color: #1f2937; font-weight: 500; }
.lib-assign-tag {
  margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #047857; background: #ecfdf5; padding: 2px 6px; border-radius: 4px;
}
.lib-assign-email { color: #9ca3af; font-size: 12.5px; }
.lib-assign-footer { padding: 16px; display: flex; justify-content: flex-end; }

/* ── Billing: Learnophia Library add-on switch ──────────────────────────── */
.lib-switch-bar { display:inline-flex; align-items:center; gap:10px; background:#f1f5f9; padding:8px 14px; border-radius:999px; }
.lib-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-weight:600; font-size:14px; color:#0f172a; user-select:none; }
.lib-switch input { position:absolute; opacity:0; width:0; height:0; }
.lib-switch-track {
  position:relative; width:38px; height:22px; border-radius:999px; background:#cbd5e1;
  transition:background .18s ease; flex-shrink:0;
}
.lib-switch-thumb {
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease;
}
.lib-switch input:checked + .lib-switch-track { background:#0891b2; }
.lib-switch input:checked + .lib-switch-track .lib-switch-thumb { transform:translateX(16px); }
.lib-switch input:focus-visible + .lib-switch-track { box-shadow:0 0 0 3px rgba(8,145,178,.35); }
.lib-switch-label { line-height:1; }
.lib-switch-tag {
  font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#0e7490; background:#ecfeff; padding:2px 6px; border-radius:4px;
}

/* Info icon + hover/focus tooltip */
.lib-tip { position:relative; display:inline-flex; align-items:center; color:#64748b; cursor:help; }
.lib-tip-bubble {
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:250px; background:#0f172a; color:#e2e8f0; font-size:12px; line-height:1.5; font-weight:400;
  padding:10px 12px; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease; z-index:20; text-align:left;
}
.lib-tip-bubble::after {
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#0f172a;
}
.lib-tip:hover .lib-tip-bubble, .lib-tip:focus-within .lib-tip-bubble { opacity:1; visibility:visible; }

.lib-more-link {
  font-size:13px; font-weight:600; color:#0891b2; text-decoration:none;
  padding:4px 10px; border-radius:999px; border:1px solid #a5f3fc; background:#fff;
}
.lib-more-link:hover { background:#ecfeff; }

/* ── Learnophia Library — About / explainer page ────────────────────────── */
.labout-page { max-width: 1200px; margin: 0 auto; padding: 28px 32px 44px; }
.labout-hero {
  border-radius:18px; padding:40px 36px; margin-bottom:28px; color:#fff;
  background:linear-gradient(125deg, #4b3f9c 0%, #3d3380 55%, #0e7490 130%);
  position:relative; overflow:hidden;
}
.labout-hero::after {
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(93,213,232,.35), transparent 70%); pointer-events:none;
}
.labout-hero-inner { position:relative; max-width:720px; }
.labout-eyebrow {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.labout-hero-title { font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; line-height:1.2; }
.labout-hero-text { font-size:15px; line-height:1.6; opacity:.92; margin:0 0 22px; }
.labout-hero-stats { display:flex; gap:32px; flex-wrap:wrap; }
.labout-hero-stats > div { display:flex; flex-direction:column; }
.labout-hero-stats strong { font-size:22px; font-weight:800; }
.labout-hero-stats span { font-size:12.5px; opacity:.8; }

.labout-section { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:26px 28px; margin-bottom:22px; }
.labout-h3 { font-size:18px; font-weight:700; color:#1e1b4b; margin:0 0 18px; }

.labout-steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.labout-step { background:#f8fafc; border:1px solid #eef2f7; border-radius:12px; padding:18px; }
.labout-step-num {
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; background:linear-gradient(135deg,#6366f1,#22d3ee); margin-bottom:12px;
}
.labout-step h4 { margin:0 0 6px; font-size:15px; color:#0f172a; }
.labout-step p { margin:0; font-size:13px; color:#64748b; line-height:1.5; }

.labout-features { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.labout-features li { position:relative; padding-left:28px; font-size:14px; color:#334155; line-height:1.45; }
.labout-features li::before {
  content:"✓"; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%;
  background:#ecfeff; color:#0e7490; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

.labout-note { font-size:14px; color:#475569; line-height:1.55; margin:0 0 18px; }
.labout-link { color:#0891b2; font-weight:600; text-decoration:none; }
.labout-table-wrap { overflow-x:auto; }
.labout-table { width:100%; border-collapse:collapse; font-size:14px; }
.labout-table th {
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#64748b; padding:10px 14px; border-bottom:2px solid #e5e7eb;
}
.labout-table td { padding:11px 14px; border-bottom:1px solid #f1f2f4; color:#1f2937; }
.labout-table tbody tr:hover { background:#fafafe; }
.labout-per { color:#94a3b8; font-size:12px; font-weight:500; }
.labout-save { font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#166534; background:#dcfce7; padding:2px 6px; border-radius:4px; margin-left:6px; }

.labout-cta {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(120deg,#eef2ff,#ecfeff); border:1px solid #c7d2fe; border-radius:16px; padding:26px 28px;
}
.labout-cta h3 { margin:0 0 4px; font-size:18px; color:#1e1b4b; }
.labout-cta p { margin:0; font-size:14px; color:#475569; }
.labout-cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.labout-cta-btn {
  display:inline-flex; align-items:center; font-weight:600; font-size:14px; text-decoration:none;
  color:#fff; background:linear-gradient(135deg,#6366f1,#0891b2); padding:11px 20px; border-radius:10px;
  box-shadow:0 6px 16px -6px rgba(99,102,241,.6);
}
.labout-cta-btn--ghost { background:#fff; color:#0891b2; border:1px solid #a5f3fc; box-shadow:none; }

@media (max-width:820px) {
  .labout-steps { grid-template-columns:1fr; }
  .labout-features { grid-template-columns:1fr; }
}

/* ── Show/hide password eye toggle (reusable across all portals) ───────────── */
.pw-field { position: relative; }
/* Leave room on the right so typed text never sits under the eye button.
   Higher specificity than Tailwind's px-4, so it overrides without !important. */
.pw-field > input { padding-right: 2.75rem; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 0.375rem;
}
.pw-toggle:hover { color: #0f172a; }
.pw-toggle:focus-visible { outline: 2px solid #5dd5e8; outline-offset: 2px; }
.pw-toggle svg { width: 1.1rem; height: 1.1rem; display: block; }
.pw-toggle .pw-eye-off { display: none; }
.pw-field.pw-shown .pw-toggle .pw-eye { display: none; }
.pw-field.pw-shown .pw-toggle .pw-eye-off { display: block; }

/* ── Compliance Bundle: explainer page (/compliance/about) ─────────────────
   Mirrors the .labout-* family used by the Learnophia Library explainer:
   a centred 1200px column under the standard .content-header band, rather
   than a left-anchored fixed width (which stranded the content in the left
   half of a wide screen).
   The four feature cards use auto-fit/minmax so they land 4-across on a wide
   viewport and 2x2 on a narrow one — never 3+1 with an orphan on its own row. */
.cabout-page { max-width: 1200px; margin: 0 auto; padding: 28px 32px 48px; }

.cabout-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 24px;
  max-width: 760px;          /* measure — long lines are hard to read even on wide screens */
}

.cabout-active {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 28px;
  font-size: 14px;
  color: #065f46;
}
.cabout-active a {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}

.cabout-h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.cabout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 0 36px;
}

.cabout-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px 20px;
}
.cabout-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  color: #fff;
  margin-bottom: 12px;
}
.cabout-card h3 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}
.cabout-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748b;
}

/* Numbered explicitly: the portal's global reset strips list markers, so an
   ordinary <ol> rendered as an unnumbered, indented block. */
.cabout-steps {
  list-style: none;
  counter-reset: cabout-step;
  margin: 0 0 36px;
  padding: 0;
  max-width: 820px;
}
.cabout-steps li {
  counter-increment: cabout-step;
  position: relative;
  padding: 0 0 0 38px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}
.cabout-steps li::before {
  content: counter(cabout-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cabout-cta {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cabout-cta h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0f172a; }
.cabout-cta p  { margin: 0; font-size: 14px; line-height: 1.55; color: #475569; max-width: 620px; }

.cabout-footnote {
  margin: 20px 2px 0;
  font-size: 12px;
  color: #94a3b8;
}

@media (max-width: 768px) {
  .cabout-page { padding: 20px 16px 36px; }
  .cabout-cta  { flex-direction: column; align-items: flex-start; }
}

/* ── Compliance Bundle: the four read-only screens ─────────────────────────
   Same centred column as .cabout-page so the explainer and the screens it
   links to don't jump horizontally when you move between them. */
.cpage { max-width: 1200px; margin: 0 auto; padding: 24px 32px 44px; }

.cpage-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cpage-tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;          /* sit the underline on the container border */
  white-space: nowrap;
}
.cpage-tab:hover { color: #4f46e5; }
.cpage-tab.is-active { color: #4f46e5; font-weight: 600; border-bottom-color: #4f46e5; }

.cpage-table-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow-x: auto;             /* wide tables scroll themselves, never the page */
}
.cpage-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.cpage-table thead tr { background: #f8fafc; }
.cpage-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
}
.cpage-table td {
  padding: 12px 16px;
  color: #334155;
  vertical-align: top;
  border-top: 1px solid #f1f5f9;
}
.cpage-table tbody tr:hover { background: #fafbfc; }

.cpage-empty {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 56px 24px;
  text-align: center;
}
.cpage-empty-icon  { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.cpage-empty-title { margin: 0 0 6px; font-weight: 600; color: #0f172a; }
.cpage-empty-text  { margin: 0; font-size: 14px; color: #64748b; }

.cpage-footnote { margin: 12px 2px 0; font-size: 12px; color: #94a3b8; }

@media (max-width: 768px) {
  .cpage { padding: 18px 16px 32px; }
}

/* Cancelled-but-still-valid notice on the compliance screens. Amber rather than
   red: the customer has NOT lost anything yet, and colouring it as an error
   would suggest they had. */
.cpage-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #92400e;
}