/* ==========================================================================
   One shared look for every page. Colours, corners, shadows and spacing are
   CSS variables, so the whole site changes from here. --primary is the
   default colour; a college's own colour replaces it (views/partials/head.ejs).
   ========================================================================== */
:root {
  --primary: #2453b3;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #000);
  --primary-soft: color-mix(in srgb, var(--primary) 9%, #fff);
  --primary-ring: color-mix(in srgb, var(--primary) 35%, transparent);

  --text: #1b2232;
  --muted: #5d6679;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-alt: #f8f9fc;
  --border: #e2e6ef;
  --border-strong: #cdd3df;

  --success: #18794e;
  --success-soft: #e8f6ef;
  --warning: #9a5b00;
  --warning-soft: #fff5e1;
  --danger: #b42318;
  --danger-hover: #912018;
  --danger-soft: #fdeceb;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 6px 24px rgba(16, 24, 40, 0.10);

  --font: Inter, system-ui, -apple-system, "Segoe UI", "Nirmala UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 650; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* Links: no underline; a light underline and colour change only on hover and keyboard focus. */
a { color: var(--primary); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--primary-hover); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Menus, buttons, tiles, the language switch and tables: never underlined. */
.main-nav a, .button, .tile, .stat-link, .brand, .lang-toggle a, .google-button, .table a, .pagination a,
.main-nav a:hover, .button:hover, .tile:hover, .stat-link:hover, .brand:hover, .lang-toggle a:hover, .google-button:hover, .table a:hover, .pagination a:hover,
.main-nav a:focus-visible, .button:focus-visible, .tile:focus-visible, .stat-link:focus-visible, .brand:focus-visible, .lang-toggle a:focus-visible,
.google-button:focus-visible, .table a:focus-visible, .pagination a:focus-visible { text-decoration: none; }
.table a:hover, .table a:focus-visible { color: var(--primary-hover); }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Header, menu bar, page content and footer all use this one container, so their left edges line up.
   The menu's left padding is less by its items' own 12px padding, so the first item's text lines up too. */
.container.main-nav { padding-left: 12px; }
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .container.main-nav { padding-left: 4px; }
}

main.container { flex: 1; padding-top: 28px; padding-bottom: 40px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 20;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Logo on the left, the name next to it, centred, the name sized to the logo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--primary); }
.brand-logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; display: block; flex: none; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand:not(.has-logo) .brand-name { color: var(--primary); }

.college-brand {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding-left: 16px; border-left: 1px solid var(--border);
  color: var(--muted); font-size: 0.95rem; font-weight: 600;
}
.college-brand .brand-logo { height: 32px; }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }

.lang-toggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; }
.lang-toggle a,
.lang-toggle span {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.lang-toggle a:hover { color: var(--text); background: var(--surface); }
.lang-toggle .lang-current { background: var(--primary); color: #fff; font-weight: 600; }

.account { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.account-name { color: var(--text); font-weight: 600; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.account-name:hover { color: var(--primary); }

/* Menu bar under the header row (scrolls sideways on small screens) */
.nav-bar { border-top: 1px solid var(--border); background: var(--surface); }
.main-nav { display: flex; gap: 4px; padding-top: 6px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; }
.main-nav a {
  flex: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--text); background: var(--surface-alt); }
.main-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); font-weight: 600; }

@media (max-width: 760px) {
  .header-row { flex-wrap: wrap; min-height: 56px; gap: 8px 12px; }
  .brand { font-size: 1.05rem; }
  .brand-logo { height: 34px; }
  /* On phones the logo stays; the name is hidden when there is a logo, otherwise shown smaller. */
  .brand.has-logo .brand-name, .college-brand.has-logo .brand-name { display: none; }
  .college-brand { padding-left: 10px; font-size: 0.85rem; }
  .college-brand .brand-logo { height: 28px; }
  .account-name { max-width: 110px; }
  .header-tools { gap: 8px; }
}
@media (max-width: 480px) {
  .account-name { max-width: 80px; font-size: 0.85rem; }
}

/* ---------- Cards and page blocks ---------- */
.hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--primary-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 32px;
}
.hero h1 { margin-top: 0; font-size: 2rem; line-height: 1.25; }
.hero p { color: var(--muted); margin-bottom: 0; font-size: 1.05rem; }
.hero p + p { margin-top: 20px; }
@media (max-width: 640px) { .hero { padding: 28px 20px; } .hero h1 { font-size: 1.6rem; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.card h1 { margin-top: 0; font-size: 1.5rem; }
@media (max-width: 640px) { .card { padding: 20px 16px; } }
.narrow { max-width: 440px; margin: 0 auto; }

/* ---------- Buttons: primary (default), secondary, danger ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button.secondary { background: var(--surface); color: var(--primary); border: 1px solid var(--border-strong); }
.button.secondary:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
button.button { font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
button.button.secondary { border: 1px solid var(--border-strong); }
.button.small { min-height: 32px; padding: 4px 12px; font-size: 0.875rem; }

.inline-form { display: inline; margin: 0; }
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.link-button:hover, .link-button:focus-visible { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Forms: every input looks the same ---------- */
.form { display: flex; flex-direction: column; gap: 6px; }
.form label { font-weight: 600; font-size: 0.92rem; margin-top: 10px; }
/* :where() keeps these at zero specificity, so any page's own class (width, padding) still wins. */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"])),
:where(select),
:where(textarea) {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  padding: 9px 12px;
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:where(textarea) { min-height: 96px; line-height: 1.5; }
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
:where(input[readonly]) { background: var(--surface-alt); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.form .button { margin-top: 18px; }

/* ---------- Messages ---------- */
.alert {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, #fff);
  border-left: 4px solid var(--danger);
  color: #7a1a12;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.notice {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 25%, #fff);
  border-left: 4px solid var(--success);
  color: #135e3c;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); font-size: 0.875rem; }
.nowrap { white-space: nowrap; }
.back-link { margin: 0 0 14px; font-size: 0.92rem; }

.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 1.6rem; }

.empty {
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; color: var(--muted);
}

/* ---------- Filters above lists ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.filters input, .filters select { min-width: 0; flex: 1 1 180px; }
.filters .button { flex: 0 0 auto; }

/* ---------- Tables: zebra rows, sticky heading row ---------- */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}
/* On larger screens a long table scrolls inside its box, so the heading row stays on top. */
@media (min-width: 761px) { .table-wrap { max-height: 75vh; } }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.93rem; }
.table th, .table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table th {
  position: sticky; top: 0; z-index: 1;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; background: var(--surface-alt);
  white-space: nowrap;
}
.table tbody tr:nth-child(even) td { background: #fafbfd; }
.table tbody tr:hover td { background: var(--primary-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.changes { margin: 6px 0 0; padding-left: 18px; font-size: 0.875rem; }

/* ---------- Badges and status labels: rounded pills ---------- */
.badge {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: 0.75rem; font-weight: 600; line-height: 1.6;
  vertical-align: middle;
}
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.7; white-space: nowrap;
  color: var(--muted);
  background: color-mix(in srgb, currentColor 11%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-active, .status-open { color: var(--success); }
.status-suspended { color: var(--danger); }
.status-expired { color: var(--warning); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.pagination a, .pagination .disabled {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.9rem;
}
.pagination a:hover { border-color: var(--primary); background: var(--primary-soft); }
.pagination .disabled { color: var(--border-strong); }

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.grid-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grid-form .wide { grid-column: 1 / -1; }
.form .invalid { border-color: var(--danger) !important; }
.help { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }
.field-error { margin: 2px 0 0; font-size: 0.85rem; color: var(--danger); }
.optional { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.form-actions { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 16px !important; margin-top: 16px; }
.form-actions .button { margin-top: 0; }
@media (max-width: 640px) {
  .grid-form { grid-template-columns: 1fr; }
}

.register-card { max-width: 760px; margin: 0 auto; }
.form label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.form label.check input { margin-top: 4px; padding: 0; flex: 0 0 auto; width: 18px; height: 18px; }

.forgot-link { align-self: flex-end; font-size: 0.875rem; }
.invite-box { background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
.copy-row { display: flex; gap: 8px; margin-top: 6px; }
.copy-row input { flex: 1; min-width: 0; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 4px; }
.details dt { color: var(--muted); font-size: 0.9rem; }
.details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .details { grid-template-columns: 1fr; gap: 0; } .details dd { margin-bottom: 8px; } }

/* ---------- Dashboard tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.tile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px; color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); }
.tile strong { color: var(--primary); font-size: 1.02rem; }
.tile span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  padding: 20px 0;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--primary); }

/* Password field with show/hide eye button */
.password-wrap { position: relative; display: flex; }
.password-wrap input { flex: 1 1 auto; width: 100%; min-width: 0; padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.password-toggle[hidden] { display: none; }
.password-toggle:hover { color: var(--primary); }
.password-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.password-toggle .icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .icon-show { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* "Continue with Google" button on the login and register pages */
.google-login { margin-top: 18px; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.875rem; margin: 0 0 14px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.google-button:hover { background: var(--bg); }
.google-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.register-card .google-login { max-width: 340px; }

/* Name and email shown on the Google "finish registration" page */
.google-identity { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 4px; }
.google-identity dt { font-weight: 600; }
.google-identity dd { margin: 0; overflow-wrap: anywhere; }

/* A heading for a value that is shown, not typed (looks like a form label) */
.form .label { font-weight: 600; font-size: 0.95rem; margin-top: 10px; }

/* A second card below the first one (e.g. Institution Admins under the institution form) */
.section-gap { margin-top: 24px; }
.card h2 { margin: 0 0 12px; font-size: 1.2rem; }
.page-head h2 { margin: 0; }
.pre-line { white-space: pre-line; }

/* Big numbers (seats used / bought / free) */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.stat { flex: 1 1 120px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; }
.stat-number { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.stat-label { color: var(--muted); font-size: 0.875rem; }

/* People: switched-off status, and the red "Switch off" button */
.status-disabled { color: #9a2a2a; }
.button.danger { background: var(--danger); border: 1px solid var(--danger); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.button.danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }

/* Two buttons side by side (People: Add student / Add faculty) */
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bulk CSV upload (Phase 3 Step 5) */
.status-done { color: #1d6b3a; }
.status-failed { color: #9a2a2a; }
.status-queued,
.status-processing,
.status-preview { color: #9a5a00; }
.status-cancelled { color: var(--muted); }
.row-problems { margin: 0; padding-left: 16px; }
.stat-link { color: inherit; text-decoration: none; }
.stat-link:hover, .stat-link:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.stat-link span { color: var(--primary); }
.certificate-frame { width: 100%; height: 80vh; min-height: 420px; border: 1px solid var(--border, #ddd); background: #fff; }
.row-problems li { padding: 1px 0; }
.file-input { padding: 8px; border: 1px dashed var(--border); border-radius: 6px; background: #fff; }
.steps { padding-left: 20px; margin: 8px 0 0; }
.steps li { margin-bottom: 4px; }

/* Branding (Phase 4): platform logo, and the college's logo for its own people */
.image-box { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.image-preview { max-height: 80px; max-width: 200px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: #fff; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }

/* Courses (Phase 4) */
.status-course-draft { color: #9a5a00; }
.status-course-published { color: #1d6b3a; }
.status-course-archived { color: var(--muted); }
.course-summary { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.unit-card { margin-bottom: 12px; padding: 18px 20px; }
.unit-card h3 { margin: 0; font-size: 1.1rem; }
.unit-edit { margin-top: 12px; }
.unit-edit summary { cursor: pointer; color: var(--primary); font-size: 0.9rem; }
.lesson-list { margin: 8px 0 0; padding-left: 22px; }
.lesson-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.lesson-list li:last-child { border-bottom: 0; }
.lesson-type { display: inline-block; min-width: 80px; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.danger-link { color: #a12828; }
.course-hero { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.course-hero h1 { margin-top: 0; }
.course-thumb { width: 240px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.unit-heading { margin: 0 0 4px; font-size: 1.1rem; }
.lesson-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lesson-actions { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; font-size: 0.9rem; }
.add-lesson { display: flex; gap: 8px; margin-top: 12px; }
.add-lesson select { min-height: 40px; }
.lesson-page h1 { margin-top: 4px; }
.lesson-text { font-size: 1.05rem; overflow-wrap: anywhere; }
.lesson-text table { border-collapse: collapse; }
.lesson-text th, .lesson-text td { border: 1px solid var(--border); padding: 6px 10px; }
.pdf-frame-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pdf-frame { width: 100%; height: 75vh; min-height: 420px; border: 0; display: block; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: 0; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.course-card h2 { font-size: 1.1rem; margin: 0 0 4px; }
.inline-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }

/* Video lessons (Phase 5) */
.video-shell { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The watermark sits above the player and lets clicks pass through to it. */
.video-watermark { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; user-select: none;
  color: rgba(255, 255, 255, 0.55); text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 600; white-space: nowrap; transition: top 1.5s ease, left 1.5s ease; }
/* Our Fullscreen button sits in a strip BELOW the video, never on top of it: on top it hid YouTube's
   own CC / Settings (quality) buttons, so viewers could not pick a better quality. */
.video-fullscreen { display: block; margin: 6px 10px 6px auto; font: inherit; font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
/* In fullscreen there is no strip: the button floats at the top centre, clear of the title (left) and the player's buttons (right). */
.video-shell:fullscreen .video-fullscreen, .video-shell.fake-fullscreen .video-fullscreen {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; }
.video-shell:fullscreen { border-radius: 0; display: flex; align-items: center; }
.video-shell:fullscreen .video-frame { aspect-ratio: auto; height: 100%; }
.video-shell.fake-fullscreen { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; align-items: center; }
.video-shell.fake-fullscreen .video-frame { aspect-ratio: auto; height: 100%; }
.video-progress { margin: 10px 0 4px; font-weight: 600; }

/* Enrollments and progress (Phase 6) */
.progress-bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--primary); }
.progress-bar.wide { width: 100%; height: 10px; }
.status-enrollment-active { color: #1d6b3a; }
.status-enrollment-completed { color: var(--primary); }
.status-enrollment-expired { color: #9a5a00; }
.status-enrollment-cancelled { color: var(--muted); }
.course-hero-text { flex: 1; min-width: 240px; }
.course-card h3 { font-size: 1.05rem; margin: 8px 0; }
.course-card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.continue-card h2 { margin-top: 0; font-size: 1.1rem; }
.unit-card.is-locked { opacity: 0.7; }
.lesson-state { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.lesson-state.state-completed { background: #1d6b3a; border-color: #1d6b3a; }
.lesson-state.state-in_progress { border-color: var(--primary); background: linear-gradient(90deg, var(--primary) 50%, transparent 50%); }
.lesson-state.state-locked { border-style: dashed; }
.mark-done { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Question bank and quizzes (Phase 7) */
.question-list { padding-left: 24px; }
.question-card { margin-bottom: 12px; padding: 16px 20px; }
.question-text { font-weight: 600; margin: 4px 0 8px; }
.option-list { margin: 0 0 8px; padding-left: 24px; }
.option-list li { padding: 2px 0; }
.option-list li.correct { font-weight: 600; }
.options-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.options-fieldset legend { font-weight: 600; padding: 0 6px; }
.option-row { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.option-row .field-error { grid-column: 2 / -1; }
@media (max-width: 640px) { .option-row { grid-template-columns: 1fr; } }
.quiz-bank { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin: 6px 0; background: #fff; }
.quiz-bank-unit { font-weight: 600; margin: 8px 0 4px; }
.quiz-random { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.quiz-random input { width: 90px; }
.quiz-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.quiz-facts div { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.quiz-facts dt { color: var(--muted); font-size: 0.85rem; }
.quiz-facts dd { margin: 0; font-weight: 600; }
.quiz-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.quiz-timer { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-timer.is-low { color: #a12828; }
.quiz-save { font-size: 0.85rem; color: var(--muted); }
.paper { padding-left: 24px; }
.paper-question { margin-bottom: 12px; padding: 16px 20px; }
.paper-question fieldset { border: 0; margin: 0; padding: 0; }
.paper-question legend { padding: 0; margin-bottom: 8px; }
.paper-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; cursor: pointer; }
.paper-option:has(input:checked) { border-color: var(--primary); background: #eef3fb; }
.answer-list { list-style: none; padding: 0; }
.answer-list li { padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; }
.answer-list li.is-correct { background: #e7f5ec; }
.answer-list li.is-wrong { background: #fdecec; }
.short-number { width: 90px; }

/* Certificates (Phase 9) */
.verify-status { font-size: 1.2rem; font-weight: 700; padding: 10px 14px; border-radius: 8px; }
.verify-status.is-valid { background: #e7f5ec; color: #1d6b3a; }
.verify-status.is-revoked { background: #fdecec; color: #8a1f1f; }

/* Payments and legal pages (Phase 10) */
.footer-links { margin-top: 6px; }
.legal-page { max-width: 820px; }
.go-live { border-color: #e0b44c; background: #fff8e6; }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.plan h3 { margin-top: 0; }
.plan-price strong { font-size: 1.5rem; color: var(--primary); }
.amount-table td:last-child, .amount-table th:last-child { text-align: right; }
.amount-table .total td { font-weight: 700; border-top: 2px solid var(--border); }
.status-order-paid { color: #1d6b3a; }
.status-order-created { color: #9a5a00; }
.status-order-failed { color: #9a2a2a; }
.status-order-refunded_manually { color: #5b6475; }

/* Dashboards and reports (Phase 11) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat strong { font-size: 1.4rem; color: var(--primary); }
.stat span { color: var(--muted); font-size: 0.85rem; }
.report-table td.num, .report-table th.num { text-align: right; white-space: nowrap; }
.export-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.short-input { width: 130px; }

/* ---------- Modern look: finishing touches for the parts above (look only) ---------- */
.stat { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.stat strong, .stat-number { letter-spacing: -0.02em; }
.stat-link { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.plan { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.plan:hover { border-color: var(--primary); }
.course-card { display: flex; flex-direction: column; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.course-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.course-card-thumb, .course-thumb { border-radius: var(--radius); }
.unit-card { border-radius: var(--radius-lg); }
.progress-bar { border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--border)); }
.progress-bar span { border-radius: 999px; }
.quiz-facts div, .options-fieldset, .quiz-bank { border-radius: var(--radius); background: var(--surface); }
.quiz-bar { border-radius: var(--radius); box-shadow: var(--shadow); }
.paper-option { border-radius: var(--radius-sm); transition: border-color 0.15s ease, background-color 0.15s ease; }
.paper-option:hover { border-color: var(--primary); }
.paper-option:has(input:checked) { background: var(--primary-soft); }
.file-input { border-color: var(--border-strong); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-alt); }
.certificate-frame, .pdf-frame-wrap { border-radius: var(--radius); }
.verify-status { border-radius: var(--radius); }
.go-live { border-left: 4px solid #e0b44c; }
.image-preview, .avatar { box-shadow: var(--shadow-sm); }
.lesson-list li, .plain-list li { border-bottom-color: var(--border); }
.unit-edit summary { font-weight: 600; }
details > summary { cursor: pointer; }
.danger-link { color: var(--danger); }
.status-disabled, .status-failed, .status-order-failed { color: var(--danger); }
.status-done, .status-order-paid, .status-course-published, .status-enrollment-active { color: var(--success); }
@media (max-width: 640px) {
  .page-head h1 { font-size: 1.35rem; }
  .button-row .button { flex: 1 1 auto; }
}

/* ==========================================================================
   Light colour accents (look only). Taken from the logo: the primary blue plus a
   soft orange / amber like its sun, and light green, purple, teal and pink tints.
   Every tint is a pale background with dark text of the same colour, so text
   stays easy to read. Each colour = a pale tint, a mid "edge" and a dark "deep".
   ========================================================================== */
:root {
  --c-blue-tint: #eaf1fd;   --c-blue-edge: #6b9be8;   --c-blue-deep: #1d4ea8;
  --c-green-tint: #e7f6ee;  --c-green-edge: #4fb583;  --c-green-deep: #17683f;
  --c-orange-tint: #fff2e0; --c-orange-edge: #f0a649; --c-orange-deep: #8a4a00;
  --c-purple-tint: #f1ecfc; --c-purple-edge: #9a7ae0; --c-purple-deep: #5330a0;
  --c-teal-tint: #e3f5f4;   --c-teal-edge: #48aeac;   --c-teal-deep: #0f5e5e;
  --c-pink-tint: #fdecf4;   --c-pink-edge: #e383ad;   --c-pink-deep: #962456;
  --c-red-tint: #fdeceb;    --c-red-edge: #e8847c;    --c-red-deep: #a3221a;
}

/* Header stays white, with a thin coloured line under it (blue to the logo's orange). */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--c-teal-edge) 40%, var(--c-orange-edge) 75%, var(--c-pink-edge));
}
/* Current menu item: light tint with a small orange line under it. */
.main-nav a[aria-current="page"] { background: var(--primary-soft); box-shadow: inset 0 -2px 0 var(--c-orange-edge); }

/* Welcome box: light blue to light orange. */
.hero { background: linear-gradient(135deg, var(--primary-soft) 0%, #f7f9fe 50%, var(--c-orange-tint) 100%); }

/* Table heading row: light blue tint. */
.table th { background: var(--c-blue-tint); color: var(--c-blue-deep); border-bottom-color: color-mix(in srgb, var(--c-blue-edge) 35%, #fff); }

/* Colour cycle for "At a glance" numbers and dashboard tiles: blue, green, orange, purple, teal, pink. */
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+1) { --tint: var(--c-blue-tint);   --edge: var(--c-blue-edge);   --deep: var(--c-blue-deep); }
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+2) { --tint: var(--c-green-tint);  --edge: var(--c-green-edge);  --deep: var(--c-green-deep); }
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+3) { --tint: var(--c-orange-tint); --edge: var(--c-orange-edge); --deep: var(--c-orange-deep); }
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+4) { --tint: var(--c-purple-tint); --edge: var(--c-purple-edge); --deep: var(--c-purple-deep); }
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+5) { --tint: var(--c-teal-tint);   --edge: var(--c-teal-edge);   --deep: var(--c-teal-deep); }
:is(.stat-grid > .stat, .tiles > .tile):nth-child(6n+6) { --tint: var(--c-pink-tint);   --edge: var(--c-pink-edge);   --deep: var(--c-pink-deep); }

/* "At a glance": tinted box with a left border of the same colour. */
.stat-grid > .stat {
  background: var(--tint);
  border-color: color-mix(in srgb, var(--edge) 35%, #fff);
  border-left: 4px solid var(--edge);
}
.stat-grid > .stat strong { color: var(--deep); }
.stat-grid > .stat span { color: color-mix(in srgb, var(--deep) 55%, var(--muted)); }
.stat-grid > .stat-link:hover, .stat-grid > .stat-link:focus-visible { border-color: var(--edge); box-shadow: 0 0 0 1px var(--edge), var(--shadow); }

/* Dashboard tiles: own tint, title in the dark shade, small lift on hover. */
.tiles > .tile {
  background: var(--tint);
  border-color: color-mix(in srgb, var(--edge) 35%, #fff);
}
.tiles > .tile strong { color: var(--deep); }
.tiles > .tile span { color: color-mix(in srgb, var(--deep) 45%, var(--muted)); }
.tiles > .tile:hover, .tiles > .tile:focus-visible {
  border-color: var(--edge); transform: translateY(-3px); box-shadow: var(--shadow-lg);
}

/* Status badges in soft shades: green = open / active / done, amber = expired / waiting,
   red = failed / refunded / switched off, blue = information. */
.status { background: var(--s-tint, var(--surface-alt)); border-color: color-mix(in srgb, var(--s-edge, var(--border-strong)) 45%, #fff); }
.status-active, .status-open, .status-done, .status-order-paid, .status-course-published, .status-enrollment-active
  { color: var(--c-green-deep); --s-tint: var(--c-green-tint); --s-edge: var(--c-green-edge); }
.status-expired, .status-queued, .status-processing, .status-preview, .status-course-draft, .status-enrollment-expired, .status-order-created
  { color: var(--c-orange-deep); --s-tint: var(--c-orange-tint); --s-edge: var(--c-orange-edge); }
.status-suspended, .status-disabled, .status-failed, .status-order-failed, .status-order-refunded_manually
  { color: var(--c-red-deep); --s-tint: var(--c-red-tint); --s-edge: var(--c-red-edge); }
.status-enrollment-completed { color: var(--c-blue-deep); --s-tint: var(--c-blue-tint); --s-edge: var(--c-blue-edge); }
.badge { background: var(--c-blue-tint); color: var(--c-blue-deep); }