/* 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;
}
.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: "Inter", system-ui, -apple-system, sans-serif;
  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;
}

.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);
  min-height: 940px;
  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: 14px 18px;
  margin-bottom: 16px;
  color: #422006;
  font-size: 14px;
}
.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: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(146, 64, 14, 0.25);
  font-size: 12px;
  color: #78350f;
  font-style: italic;
}
.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; }

.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;
}
/* 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);
  }
}
/* ── Student Portal Stylesheet ───────────────────────────────────────────────
   Inter font (consistent with admin UI), Learnophia purple/teal palette
   ─────────────────────────────────────────────────────────────────────────── */

.sp-body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  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: 186px;
  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: 186px;
  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; }

/* ── 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;
}
/* ── Super Admin Portal Stylesheet ───────────────────────────────────────────
   WEI LMS Administration — .sa-* namespace, Inter font
   ─────────────────────────────────────────────────────────────────────────── */

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

.sa-auth-body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  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: "Inter", system-ui, -apple-system, sans-serif;
  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;
}
/* 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;
}

/* 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.
 *


 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Normalize font across the entire admin — overrides Tailwind base reset */
*, *::before, *::after {
  font-family: "Inter", system-ui, -apple-system, sans-serif !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: 220px;
  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: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  margin: 2px 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: 13.5px;
  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: 220px;
  padding: 0;
  width: calc(100% - 220px);
  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-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 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="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-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 */
}