/* ==========================================================================
   Demo theme — clean & professional
   --------------------------------------------------------------------------
   Layered ON TOP of the admin template (style_horizontal.css + colors/blue.css)
   and Bootstrap 4.2.1. Pure presentation: no element is renamed, no id or JS
   hook is touched, so the enrolment wizard, iCheck, select2, jquery-steps,
   sweetalert and the examination timer keep working untouched.

   Load LAST so it wins on equal specificity.
   ========================================================================== */

:root {
  /* brand */
  --t-accent:        #2563a8;
  --t-accent-dark:   #1b4a80;
  --t-accent-light:  #eaf1f9;
  --t-accent-ring:   rgba(37, 99, 168, .18);

  /* ink */
  --t-ink:           #17202b;
  --t-ink-2:         #43505f;
  --t-ink-3:         #6b7886;
  --t-ink-4:         #93a0ad;

  /* surfaces */
  --t-bg:            #f6f8fb;
  --t-surface:       #ffffff;
  --t-line:          #e2e8f0;
  --t-line-soft:     #eef2f7;

  /* status */
  --t-ok:            #17803d;
  --t-ok-bg:         #e8f6ed;
  --t-warn:          #9a6410;
  --t-warn-bg:       #fdf3e4;
  --t-danger:        #b42318;
  --t-danger-bg:     #fdecea;
  --t-info:          #2563a8;
  --t-info-bg:       #eaf1f9;

  /* form */
  --t-radius:        10px;
  --t-radius-sm:     7px;
  --t-radius-lg:     14px;

  --t-shadow-sm:     0 1px 2px rgba(16, 32, 52, .05);
  --t-shadow:        0 1px 3px rgba(16, 32, 52, .07), 0 6px 16px -6px rgba(16, 32, 52, .10);
  --t-shadow-lg:     0 2px 6px rgba(16, 32, 52, .07), 0 18px 40px -16px rgba(16, 32, 52, .22);

  --t-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body,
body.fix-header.fix-sidebar {
  font-family: var(--t-font);
  background: var(--t-bg);
  color: var(--t-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.card-title, .box-title {
  font-family: var(--t-font);
  color: var(--t-ink);
  letter-spacing: -.011em;
  font-weight: 600;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.32rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

a { color: var(--t-accent); text-decoration: none; }
a:hover, a:focus { color: var(--t-accent-dark); text-decoration: none; }

.text-themecolor { color: var(--t-accent) !important; }
.text-muted      { color: var(--t-ink-3) !important; }
.text-dark       { color: var(--t-ink) !important; }
.font-bold       { font-weight: 600 !important; }

hr { border-top-color: var(--t-line); }

/* --------------------------------------------------------------------------
   2 + 3. Header — single bar on desktop, brand + nav + account
   --------------------------------------------------------------------------
   The template renders two stacked fixed rows: <header.topbar> (brand centred
   on its own ~74px row) and <aside.left-sidebar> (the horizontal menu, ~48px
   below it). That is ~115px of white with the brand marooned in the middle and
   the nav on a different alignment axis.

   These rules place both rows on ONE 72px line at >=1200px: brand left, menu
   beside it, account right. Because the two elements are separate fixed
   ancestors they cannot share flex sizing, so the brand and account reserve
   fixed widths and the menu occupies the gap between them. Below 1200px they
   stack again, with the menu as a horizontally scrolling strip.

   Requires body.header-refresh, and body must NOT carry fix-header: that class
   is what custom_horizontal.js uses to attach Sticky Kit to .topbar, which
   writes inline position/top/width and fights these rules.
   -------------------------------------------------------------------------- */

body.header-refresh {
  --header-h:     72px;
  --menu-h:       48px;
  --header-off:   calc(var(--header-h) + var(--menu-h));
  --brand-w:      320px;
  --account-w:    200px;
  --header-pad:   30px;
}

/* ---- the bar itself ---- */

body.header-refresh .topbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: var(--header-h);
  z-index: 50;
  background: var(--t-surface) !important;
  border-bottom: 1px solid var(--t-line);
  box-shadow: 0 1px 3px rgba(16, 32, 52, .05);
}

body.header-refresh .topbar .top-navbar,
body.header-refresh .topbar .navbar-header,
body.header-refresh .topbar .navbar-header.bg-transparent {
  background: transparent !important;
  box-shadow: none;
}

body.header-refresh .topbar .top-navbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1320px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0 var(--header-pad);
}

/* ---- brand ---- */

/* custom_horizontal.js adds .mini-sidebar to <body> below 1170px, and the
   template then pins .navbar-header to a 60px icon slot — a collapsed-sidebar
   behaviour that truncates the brand to "Apex…" in a horizontal header. */
body.header-refresh .topbar .navbar-header,
body.header-refresh.mini-sidebar .top-navbar .navbar-header {
  position: static;
  flex: 0 0 auto;
  width: auto;
  max-width: var(--brand-w);
  margin: 0;
  text-align: left;
  line-height: 1;
}

body.header-refresh .topbar .navbar-brand { display: block; margin: 0; padding: 0; max-width: 100%; }

/* the markup wraps the brand in <b class="hidden-xs hidden-sm">, which hides it
   below 992px — the header would lose its identity on a phone */
body.header-refresh .topbar .navbar-brand b { display: block !important; line-height: 1; }

body.header-refresh .topbar .navbar-brand h2 {
  margin: 0;
  color: var(--t-ink) !important;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.header-refresh .topbar .navbar-brand img { display: block; max-height: 34px; width: auto; }

/* ---- account control (right) ---- */

body.header-refresh .topbar .navbar-collapse {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  margin-left: 1rem;
}

/* the first list is the template's hamburger, which toggles an off-canvas
   sidebar this layout does not use */
body.header-refresh .topbar .navbar-collapse > .navbar-nav:first-child { display: none !important; }
body.header-refresh .topbar .navbar-collapse > .navbar-nav:last-child { flex-direction: row; margin-left: auto; }

/* colors/blue.css sets this white with !important at (0,4,1); the old rule
   here was (0,3,0) and lost, so the signed-in name rendered white on white. */
body.header-refresh .topbar .navbar-light .navbar-nav .nav-item > a.nav-link,
body.header-refresh .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 42px;
  line-height: 1.2;
  padding: 0 .9rem;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  color: var(--t-ink-2) !important;
  background: transparent;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.header-refresh .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
body.header-refresh .topbar .navbar-light .navbar-nav .nav-item.show > a.nav-link {
  color: var(--t-accent-dark) !important;
  background: var(--t-accent-light);
  border-color: var(--t-accent);
}

body.header-refresh .topbar .nav-link > span {
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.header-refresh .topbar .nav-link .mdi-account-circle { flex: none; font-size: 1.15rem; }

/* the template hides the caret; a dropdown should say it is one */
body.header-refresh .topbar .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: .1rem;
  border-top-color: currentColor;
  opacity: .6;
}

/* ---- the menu row ---- */

body.header-refresh .left-sidebar,
body.header-refresh .left-sidebar .scroll-sidebar,
body.header-refresh .sidebar-nav { background: var(--t-surface) !important; }

body.header-refresh .left-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  width: auto;
  height: var(--menu-h);
  padding: 0;
  z-index: 49;
  border-bottom: 1px solid var(--t-line);
  box-shadow: none;                 /* template floats a 1px 0 20px panel shadow */
}

body.header-refresh .left-sidebar .scroll-sidebar {
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--header-pad);
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent !important;
}
body.header-refresh .left-sidebar .scroll-sidebar::-webkit-scrollbar { height: 0; }

body.header-refresh .sidebar-nav { height: 100%; padding: 0; }

body.header-refresh .sidebar-nav > #sidebarnav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .25rem;
  height: 100%;
  width: max-content;
  margin: 0;
  padding: 0;
}
body.header-refresh .sidebar-nav > #sidebarnav > li { float: none; flex: none; }

body.header-refresh .sidebar-nav > #sidebarnav > li > a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 .85rem;
  border-radius: var(--t-radius-sm);
  color: var(--t-ink-2) !important;
  background: transparent !important;
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* plain one-word labels do not need icons, and the template reserves 27px for them */
body.header-refresh .sidebar-nav > #sidebarnav > li > a i { display: none; }

body.header-refresh .sidebar-nav > #sidebarnav > li > a:hover {
  background: var(--t-accent-light) !important;
  color: var(--t-accent-dark) !important;
}

body.header-refresh .sidebar-nav > #sidebarnav > li > a.active,
body.header-refresh .sidebar-nav > #sidebarnav > li.active > a {
  background: transparent !important;
  color: var(--t-accent) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--t-accent);
  border-radius: 0;
}

/* the template strips outlines globally — keep keyboard focus visible */
body.header-refresh .topbar a:focus-visible,
body.header-refresh .left-sidebar a:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

/* ---- reserve the header's height exactly once ---- */

body.header-refresh .page-wrapper { padding-top: var(--header-off); margin-left: 0; }
body.header-refresh .page-wrapper > .hero:first-child,
body.header-refresh .page-wrapper > section.hero:first-of-type { margin-top: 0; }

/* ---- one row from 1200px: the menu sits between brand and account ---- */

@media (min-width: 1200px) {
  body.header-refresh { --menu-h: 0px; }

  body.header-refresh .topbar .navbar-header { flex: 0 0 var(--brand-w); }

  body.header-refresh .left-sidebar {
    top: 0;
    left: max(var(--header-pad), calc((100% - 1320px) / 2 + var(--header-pad)));
    right: auto;
    height: var(--header-h);
    border-bottom: 0;
    margin-left: var(--brand-w);
    z-index: 51;                    /* above .topbar so the links are clickable */
    background: transparent !important;
  }
  body.header-refresh .left-sidebar .scroll-sidebar {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  body.header-refresh .left-sidebar,
  body.header-refresh .left-sidebar .scroll-sidebar,
  body.header-refresh .sidebar-nav { background: transparent !important; }
}

@media (max-width: 767px) {
  body.header-refresh { --header-h: 64px; --header-pad: 20px; --brand-w: 100%; }
  body.header-refresh .topbar .navbar-brand h2 { font-size: 1.02rem; }

  /* the template hides the menu entirely on phones and expects its hamburger
     to open an off-canvas sidebar; this layout keeps the strip on screen and
     lets it scroll sideways instead, so the nav is never unreachable */
  body.header-refresh.mini-sidebar .left-sidebar,
  body.header-refresh .left-sidebar { display: block; }
}

@media print {
  body.header-refresh .page-wrapper { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   4. Page furniture
   -------------------------------------------------------------------------- */

.page-wrapper { background: transparent; }

/* .page-titles is a direct child of .page-wrapper, i.e. OUTSIDE the
   .container-fluid that carries the template's 30px gutter — so it needs
   its own, or headings sit flush against the window edge. */
.page-titles {
  background: transparent;
  box-shadow: none;
  border: 0;
  margin: 0 0 .25rem;
  padding: 1.75rem 30px .5rem;
}

/* keep long lines readable on wide monitors */
.page-wrapper > .container-fluid,
.page-wrapper > .page-titles {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
.page-titles h3,
.page-titles .text-themecolor {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--t-ink) !important;
  margin: 0;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: .35rem 0 0;
  font-size: .86rem;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--t-ink-3); }
.breadcrumb-item a:hover { color: var(--t-accent); }
.breadcrumb-item.active { color: var(--t-ink-4); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t-line); }

.footer {
  background: transparent;
  border-top: 1px solid var(--t-line);
  color: var(--t-ink-4);
  font-size: .85rem;
  padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-sm);
  margin-bottom: 1.5rem;
}

.card-body { padding: 1.6rem; }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--t-line-soft);
  padding: 1.15rem 1.6rem;
  font-weight: 600;
}
.card-header h4, .card-header h5 { margin: 0; font-size: 1.02rem; }

.card-footer {
  background: #fbfcfe;
  border-top: 1px solid var(--t-line-soft);
  padding: 1.1rem 1.6rem;
  border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg);
}

/* course cards lift on hover */
.card.card-hover:hover,
.el-element-overlay .card:hover { box-shadow: var(--t-shadow); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--t-font);
  font-weight: 550;
  font-size: .93rem;
  letter-spacing: 0;
  border-radius: var(--t-radius-sm);
  padding: .58rem 1.15rem;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--t-accent-ring) !important; outline: none; }

.btn-info, .btn-primary,
.btn-info:not(:disabled):not(.disabled), .btn-primary:not(:disabled):not(.disabled) {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: #fff;
}
.btn-info:hover, .btn-primary:hover {
  background: var(--t-accent-dark);
  border-color: var(--t-accent-dark);
  color: #fff;
}

.btn-success { background: var(--t-ok); border-color: var(--t-ok); color: #fff; }
.btn-success:hover { background: #12602f; border-color: #12602f; }

.btn-danger { background: var(--t-danger); border-color: var(--t-danger); color: #fff; }
.btn-danger:hover { background: #8f1c12; border-color: #8f1c12; }

.btn-warning { background: #b7791f; border-color: #b7791f; color: #fff; }
.btn-warning:hover { background: #955f16; border-color: #955f16; color: #fff; }

.btn-default, .btn-secondary {
  background: var(--t-surface);
  border-color: var(--t-line);
  color: var(--t-ink-2);
}
.btn-default:hover, .btn-secondary:hover {
  background: #f4f7fa;
  border-color: #cfd8e3;
  color: var(--t-ink);
}

.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; border-radius: var(--t-radius); }
.btn-sm { padding: .38rem .8rem; font-size: .84rem; }

.btn.disabled, .btn:disabled { opacity: .55; box-shadow: none; }

/* the template uses .label on buttons as a size helper — neutralise its
   pill/badge styling so buttons stay buttons */
.btn.label {
  display: inline-block;
  font-size: .93rem;
  font-weight: 550;
  border-radius: var(--t-radius-sm);
  padding: .58rem 1.15rem;
  white-space: normal;
  line-height: 1.4;
}
.btn-lg.label { padding: .8rem 1.4rem; font-size: 1rem; }
.btn-sm.label { padding: .38rem .8rem; font-size: .84rem; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

label {
  font-weight: 550;
  font-size: .88rem;
  color: var(--t-ink-2);
  margin-bottom: .4rem;
}

.form-control {
  height: auto;
  min-height: 44px;
  padding: .6rem .85rem;
  font-size: .95rem;
  color: var(--t-ink);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-accent-ring);
  background: var(--t-surface);
}
.form-control::placeholder { color: var(--t-ink-4); }

select.form-control { padding-right: 2.2rem; }
textarea.form-control { min-height: 120px; line-height: 1.6; }

.form-group { margin-bottom: 1.15rem; }

.form-control-feedback, .text-danger { color: var(--t-danger) !important; font-size: .85rem; }
.has-danger .form-control { border-color: var(--t-danger); }

/* the material (underline) variant used on the auth pages -> boxed inputs */
.form-material .form-control {
  background-image: none;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  padding: .65rem .85rem;
}
.form-material .form-control:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-accent-ring);

  /* The material variant draws its underline as a background gradient, and the
     template re-declares that gradient on :focus — which outranks the
     background-image:none on the base rule above. Worse, our flat restyle
     leaves background-repeat/position at their initial values, so the 2px blue
     stripe tiles down the whole box and fills the input solid blue, burying the
     text the user is typing. Kill the image on focus too. */
  background-image: none;
  background-color: var(--t-surface);
}

/* intl-tel-input sits inside a .form-control-sized wrapper */
.intl-tel-input, .iti { width: 100%; }

/* select2 to match */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 44px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  padding: .3rem .4rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-accent-ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--t-ink);
}
.select2-dropdown {
  border-color: var(--t-line);
  border-radius: var(--t-radius-sm);
  box-shadow: var(--t-shadow);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--t-accent);
}

/* checkboxes / iCheck */
.checkbox label, .icheck-list label { font-weight: 450; color: var(--t-ink-2); }

/* --------------------------------------------------------------------------
   8. Auth pages (Login / Register / Forgot / Reset / 2FA)
   -------------------------------------------------------------------------- */

/* the auth pages render outside _Layout, so paint the page itself.
   note: Login/Forgot/Reset use .login-register, Register uses .register-login */
#wrapper { background: var(--t-bg); }

#wrapper .login-register,
#wrapper .register-login,
#wrapper .login-register.bg-theme,
#wrapper .register-login.bg-theme {
  background: var(--t-bg) !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  min-height: 100vh;
  width: 100%;

  /* the template pins this container with position:fixed; height:100% and only
     releases it below 768px. At 844x390 (phone landscape) that traps the card
     in a 390px box the document cannot scroll, leaving the submit button
     permanently out of reach. Release it at every width; the flex centring
     above plus min-height keeps the full-screen look. */
  position: relative;
  height: auto;
}

/* These cards were dark in the stock template, so the markup marks its
   links .text-white. On a white card that is invisible — recolour rather
   than edit five views. */
.login-box .text-white,
.login-box a.text-white {
  color: var(--t-ink-3) !important;
  font-weight: 500;
}
.login-box a.text-white:hover { color: var(--t-accent) !important; }

.login-box, .login-register .login-box.card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  box-shadow: var(--t-shadow-lg);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
#recoverform.login-box, .login-box#loginform { max-width: 440px; }

/* the registration form is longer, so give it a touch more room */
#wrapper .register-login .login-box.card,
.login-box.registration-box { max-width: 520px; }

.login-box .card-body { padding: 2.25rem 2.1rem; }

.login-box .logo h2,
.login-box .logo .text-themecolor {
  color: var(--t-ink) !important;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.login-box .logo img { max-height: 52px; width: auto; }
.login-box .logo { margin-bottom: 1.5rem; }

.login-box .box-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--t-ink);
  margin-bottom: 1.35rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--t-line-soft);
}

.login-box .btn-block { width: 100%; }
.login-box a { font-weight: 500; }
.login-box .form-group.text-center a { color: var(--t-ink-3); }
.login-box .form-group.text-center a:hover { color: var(--t-accent); }

/* --------------------------------------------------------------------------
   9. Enrolment wizard (jquery-steps)
   -------------------------------------------------------------------------- */

.wizard-content .wizard > .steps > ul > li a,
.wizard > .steps > ul > li a { color: var(--t-ink-3); }

.wizard > .steps .current a .step,
.wizard > .steps .current a:hover .step {
  background: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px var(--t-accent-ring);
}
.wizard > .steps .done a .step {
  background: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
  color: #fff !important;
}
.wizard > .steps a .step {
  border: 2px solid var(--t-line);
  color: var(--t-ink-4);
  background: var(--t-surface);
  font-weight: 600;
}
.wizard > .steps .current a, .wizard > .steps .current a:hover { color: var(--t-ink); font-weight: 600; }
.wizard > .steps .done a { color: var(--t-ink-2); }

/* connector line */
.wizard.vertical > .steps ul li:after,
.wizard > .steps ul li:after,
.wizard > .steps ul li:before { background: var(--t-line) !important; }

.wizard > .content { border: 0; background: transparent; }

/* wizard nav buttons — the view adds .btn.btn-info via JS */
.wizard > .actions a,
ul[role="menu"] a[role="menuitem"] {
  border-radius: var(--t-radius-sm) !important;
  font-weight: 550;
}
.wizard > .actions .disabled a { opacity: .5; }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.table { color: var(--t-ink); }
.table thead th {
  border-bottom: 1px solid var(--t-line);
  border-top: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-ink-3);
  padding: .8rem .9rem;
}
.table td { border-top: 1px solid var(--t-line-soft); padding: .85rem .9rem; vertical-align: middle; }
.table-hover tbody tr:hover { background: #fafcfe; }

/* --------------------------------------------------------------------------
   11. Status chips  (.label used as a badge, not on a button)
   -------------------------------------------------------------------------- */

.label:not(.btn) {
  display: inline-block;
  padding: .3em .7em;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  border-radius: 999px;
  vertical-align: middle;
}
.label-info,    .label.label-info    { background: var(--t-info-bg)   !important; color: var(--t-info)   !important; }
.label-success, .label.label-success { background: var(--t-ok-bg)     !important; color: var(--t-ok)     !important; }
.label-danger,  .label.label-danger  { background: var(--t-danger-bg) !important; color: var(--t-danger) !important; }
.label-warning, .label.label-warning { background: var(--t-warn-bg)   !important; color: #9a6410         !important; }
.label-default, .label.label-default { background: #eef2f7            !important; color: var(--t-ink-2)  !important; }

.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }

/* --------------------------------------------------------------------------
   12. Progress bars
   -------------------------------------------------------------------------- */

/* the classroom prints the percentage INSIDE the bar, so keep it tall
   enough to stay legible rather than hiding the label */
.progress {
  height: 18px;
  background: var(--t-line-soft);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
}
.progress-bar {
  background: var(--t-accent);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 18px;
  color: #fff;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.progress-bar.bg-success, .progress-bar.bg-info { background: var(--t-ok); }

/* a zero-width bar would clip its own label — let it sit on the track */
.progress-bar[style*="width: 0%"],
.progress-bar[style*="width:0%"] { color: var(--t-ink-3); overflow: visible; min-width: 2.6rem; background: transparent; }

/* --------------------------------------------------------------------------
   13. Classroom: module / lecture accordion
   -------------------------------------------------------------------------- */

.card .card-header.bg-theme,
.card-header.bg-theme,
a.card-header.bg-theme {
  background: var(--t-accent) !important;
  border-radius: var(--t-radius) var(--t-radius) 0 0;
}
.card-header.bg-theme h4,
.card-header.bg-theme h5,
.card-header.bg-theme .text-white { color: #fff !important; }

.card-header.collapsed { border-radius: var(--t-radius); }

/* lecture rows */
.card.border-darker { border-color: var(--t-line); border-radius: var(--t-radius); }

/* the lock / tick icons */
.mdi-lock, .fa-lock { color: var(--t-danger) !important; }
.mdi-lock-open, .mdi-lock-open-outline { color: #b7791f !important; }
.mdi-check-circle, .fa-check-circle { color: var(--t-ok) !important; }

/* --------------------------------------------------------------------------
   14. Assessment & examination
   -------------------------------------------------------------------------- */

/* The exam clock is pinned with `width:20%; top:115px` in custom.css — 20% of a
   390px phone is 75px, so "44 Minutes 48 Seconds" wrapped onto three lines, and
   115px was tuned to the old two-row header height. Size it to its content and
   anchor it to the current header instead. */
body.header-refresh .count-down-floating {
  top: calc(var(--header-off) + 10px);
  right: 10px;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 20px);
  padding: .4rem .85rem;
  border-radius: 999px !important;
  opacity: 1;
  background: #eaf6e2;
  border: 1px solid #b9dfa6;
  box-shadow: var(--t-shadow-sm);
  white-space: nowrap;
  z-index: 48;
}
body.header-refresh .count-down-floating .countDown {
  font-size: .86rem;
  color: #1f5c12;
  white-space: nowrap;
}
body.header-refresh .count-down-floating .countDown span { min-width: 0 !important; }
body.header-refresh .count-down-floating .countDown label {
  margin: 0 .2rem 0 .1rem;
  font-weight: 500;
  opacity: .75;
}

#countDown, .countdown-panel {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--t-ink);
}

/* Answer options.

   style_horizontal.css floats .icheck-list and pads it 50px on the right, so
   the list shrink-wraps: on a phone the option rows collapsed to ~135px of a
   240px column, leaving them cramped and hard to tap. Unfloat it, let it fill,
   and make each row a full-width target at least 44px tall. */
.icheck-list,
.card .icheck-list {
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.icheck-list li {
  width: 100%;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  margin-bottom: .6rem;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.icheck-list li:hover { border-color: #c3d2e4; background: #fafcfe; }

/* the .input-group wrapping an option list carries a 40px left indent that
   eats a sixth of a phone's width; the list needs the full column */
.input-group:has(> .icheck-list) { padding-left: 0; }

/* iCheck wraps the input and its label text in this div — it is the row */
.icheck-list li > div[class*="_line"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: .5rem .85rem;
  line-height: 1.45;
  cursor: pointer;
}
.icheck-list li label { padding-left: .6rem; margin: 0; cursor: pointer; }

/* examination section headers */
.card-exam-section .card-header { border-radius: var(--t-radius); }
.lblSectionInfo { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }

.question-title { color: var(--t-ink); }
.section-note { color: var(--t-ink-2); }

/* --------------------------------------------------------------------------
   15. Modals, alerts, toasts
   -------------------------------------------------------------------------- */

.modal-content {
  border: 0;
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--t-line-soft); padding: 1.25rem 1.5rem; }
.modal-body   { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--t-line-soft); padding: 1.1rem 1.5rem; }
.modal-backdrop.show { opacity: .45; }

.alert { border: 1px solid transparent; border-radius: var(--t-radius); font-size: .92rem; }
.alert-info    { background: var(--t-info-bg);   border-color: #cfe0f1; color: var(--t-accent-dark); }
.alert-success { background: var(--t-ok-bg);     border-color: #c6e7d3; color: var(--t-ok); }
.alert-danger  { background: var(--t-danger-bg); border-color: #f5c9c4; color: var(--t-danger); }
.alert-warning { background: var(--t-warn-bg);   border-color: #f0dcbb; color: #9a6410; }

/* sweetalert */
.sweet-alert {
  border-radius: var(--t-radius-lg) !important;
  box-shadow: var(--t-shadow-lg) !important;
  font-family: var(--t-font) !important;
}
.sweet-alert h2 { font-size: 1.28rem; font-weight: 600; color: var(--t-ink); line-height: 1.4; }
.sweet-alert p  { color: var(--t-ink-2); font-size: .95rem; }
.sweet-alert button {
  border-radius: var(--t-radius-sm) !important;
  font-weight: 550 !important;
  font-size: .93rem !important;
  padding: .58rem 1.3rem !important;
  box-shadow: none !important;
}
.sweet-alert button.confirm { background: var(--t-accent) !important; }
.sweet-alert button.cancel  { background: #eef2f7 !important; color: var(--t-ink-2) !important; }

/* toast */
.jq-toast-single {
  border-radius: var(--t-radius) !important;
  font-family: var(--t-font) !important;
  box-shadow: var(--t-shadow-lg) !important;
  padding: .9rem 1.1rem !important;
}

/* --------------------------------------------------------------------------
   16. Home carousel
   -------------------------------------------------------------------------- */

.carousel-item img { border-radius: var(--t-radius-lg); }
.carousel-caption {
  background: linear-gradient(to top, rgba(10, 22, 38, .82), rgba(10, 22, 38, 0));
  left: 0; right: 0; bottom: 0;
  padding: 3rem 2rem 2rem;
  border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg);
  text-align: left;
}
.carousel-caption h3, .carousel-caption h4 {
  color: #fff !important;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.carousel-caption p { color: rgba(255, 255, 255, .88); font-size: .95rem; max-width: 60ch; }

/* --------------------------------------------------------------------------
   17. Misc
   -------------------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--t-line); }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--t-ink-3);
  font-weight: 550;
  padding: .8rem 1.1rem;
}
.nav-tabs .nav-link:hover { color: var(--t-ink); border-bottom-color: var(--t-line); }
.nav-tabs .nav-link.active {
  color: var(--t-accent);
  background: transparent;
  border-bottom-color: var(--t-accent);
}

.bg-theme { background: var(--t-accent) !important; }
.border    { border-color: var(--t-line) !important; }
.cursor-pointer { cursor: pointer; }

/* keep the printable certificate exactly as designed */
.printableArea, .printableArea * { font-family: inherit; }

@media print {
  .topbar, .left-sidebar, .footer, .page-titles, .btn, .no-print { display: none !important; }
  .card { border: 0; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .card-body { padding: 1.2rem; }

  /* justified text at ~340px produces rivers of whitespace */
  .text-justify { text-align: left !important; }

  /* a floating pill would sit on top of the wrapped exam title at this width,
     so run the clock as a full-width bar under the header and make room for it */
  body.header-refresh .count-down-floating {
    left: 0;
    right: 0;
    top: var(--header-off);
    width: 100%;
    max-width: none;
    border-radius: 0 !important;
    border-width: 0 0 1px;
    text-align: center;
    box-shadow: none;
    margin: 0;            /* the element also carries .m-l-10 */
  }
  body.header-refresh:has(.count-down-floating) .page-wrapper {
    padding-top: calc(var(--header-off) + 42px);
  }

  /* the template's 30px gutters cost 60px of a 390px screen — halve them */
  .page-wrapper > .container-fluid { padding-left: 16px; padding-right: 16px; }
  .page-titles { padding: 1.25rem 16px .4rem; }
  .page-titles h3 { font-size: 1.28rem; }
  .t-sec-head { padding-left: 0; padding-right: 0; }
  .login-box .card-body { padding: 1.75rem 1.4rem; }
  .topbar .top-navbar { min-height: 60px; }
}

/* --------------------------------------------------------------------------
   19. Course cards
   -------------------------------------------------------------------------- */

/* the course tile image is the first child of the card — round its top */
.card > img:first-child,
.card > a:first-child > img,
.card .card-img-top {
  border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
  display: block;
  width: 100%;
  object-fit: cover;
}

.card > img:first-child { aspect-ratio: 16 / 9; }

/* course tiles lift a little on hover to read as clickable */
.card:has(> a img):hover,
.el-element-overlay .card:hover {
  box-shadow: var(--t-shadow);
  transform: translateY(-2px);
}
.card { transition: box-shadow .18s ease, transform .18s ease; }

/* --------------------------------------------------------------------------
   20. Registration form — two-column layout
   --------------------------------------------------------------------------
   The form is a flat list of identical .form-group siblings, so a grid can
   pair them up without touching a single line of markup. Fields are matched
   by the id Razor generates from asp-for, except the first password box,
   which has no asp-for (only "Confirm Password" binds) — so the password
   pair is matched on input[type=password] instead.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  #wrapper .register-login .login-box.card,
  .login-box.registration-box { max-width: 720px; }

  .registration-box form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }

  /* full width by default — logo, rule, heading, consent, button, links */
  .registration-box form > * { grid-column: 1 / -1; }

  /* ...and these pair up */
  .registration-box form > .form-group:has(#Salutation),
  .registration-box form > .form-group:has(#FirstName),
  .registration-box form > .form-group:has(#LastName),
  .registration-box form > .form-group:has(#Gender),
  .registration-box form > .form-group:has(#Nationality),
  .registration-box form > .form-group:has(#Specialty),
  .registration-box form > .form-group:has(#txtContactNo),
  .registration-box form > .form-group:has(#Email) {
    grid-column: span 1;
  }

  /* the password box carries a helper line, so bottom-align the pair to
     keep the two inputs on the same line */
  .registration-box form > .form-group:has(input[type="password"]) {
    grid-column: span 1;
    align-self: end;
  }

  .registration-box .box-title { margin-bottom: 1.5rem; }
  .login-box.registration-box .card-body { padding: 2.4rem 2.4rem 2rem; }
}

/* password helper text */
.registration-box .form-group small {
  display: block;
  color: var(--t-ink-3);
  font-size: .79rem;
  line-height: 1.45;
  margin: .1rem 0 .45rem;
}
.registration-box .form-group label + br { display: none; }

/* consent checkbox row */
.registration-box .checkbox label,
.login-box .checkbox label { font-size: .88rem; line-height: 1.55; color: var(--t-ink-2); }

/* ==========================================================================
   21. Layout revamp — full-bleed hero, section headings, course cards
   ========================================================================== */

/* Run edge to edge.

   NOT 100vw: that unit includes the vertical scrollbar, so the element ends up
   ~7-17px wider than the content area and pushes the page into horizontal
   scroll on every screen size. The heroes are direct children of .page-wrapper,
   which has no max-width (only its .container-fluid children are capped), so a
   plain 100% is already the full content width and never overflows. */
.full-bleed {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; margin-bottom: 2.5rem; background: #0e1a2b; }

.hero-slide {
  position: relative;
  height: clamp(360px, 56vh, 620px);
  overflow: hidden;
}
.hero-compact .hero-slide { height: clamp(240px, 34vh, 380px); }

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* darken toward the bottom-left so the copy always has contrast */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 18, 32, .88) 0%, rgba(8, 18, 32, .45) 45%, rgba(8, 18, 32, .15) 100%),
    linear-gradient(to right, rgba(8, 18, 32, .65) 0%, rgba(8, 18, 32, 0) 62%);
}

.hero-inner {
  position: relative;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px 3rem;
  display: flex;
  align-items: flex-end;
}
.hero-compact .hero-inner { padding-bottom: 2rem; }

.hero-copy { max-width: 62ch; color: #fff; }

.hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .9rem;
}

.hero-title {
  color: #fff !important;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 0 .85rem;
  text-wrap: balance;
}
.hero-compact .hero-title { font-size: clamp(1.6rem, 2.7vw, 2.3rem); }

.hero-lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 1.5rem;
}
.hero-compact .hero-lede { margin-bottom: 0; font-size: .96rem; }

.hero-cta {
  background: #fff;
  border-color: #fff;
  color: var(--t-accent-dark);
  font-weight: 600;
  padding: .82rem 1.7rem;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .55);
}
.hero-cta:hover { background: var(--t-accent-light); border-color: var(--t-accent-light); color: var(--t-accent-dark); }

/* carousel chrome over the hero */
.hero .carousel-indicators { bottom: 1.1rem; margin-bottom: 0; z-index: 3; }
.hero .carousel-indicators li {
  width: 28px; height: 3px; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, .42);
}
.hero .carousel-indicators li.active { background: #fff; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 6%; z-index: 3; opacity: .55; }
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { opacity: 1; }

/* the old boxed-banner rules must not fight the new hero */
.hero .carousel-item img { border-radius: 0; max-height: none; }
.hero .carousel-caption { display: none !important; }

/* --- section headings ---------------------------------------------------- */

.t-sec-head { padding: .5rem 0 1.75rem; max-width: 70ch; }
.t-sec-head-page { padding-top: 2.5rem; }

.t-sec-title {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 650;
  letter-spacing: -.022em;
  color: var(--t-ink);
  margin: 0 0 .5rem;
}
.t-sec-sub { color: var(--t-ink-3); font-size: 1rem; margin: 0; }

/* --- course cards -------------------------------------------------------- */

.course-grid { margin-top: 0; row-gap: 1.75rem; }

.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin-bottom: 0;
}
.course-card:hover { box-shadow: var(--t-shadow); transform: translateY(-3px); }

.course-card-media {
  display: block;
  overflow: hidden;
  background: var(--t-line-soft);
  aspect-ratio: 16 / 10;
}
.course-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .35s cubic-bezier(.2, .6, .3, 1);
}
.course-card:hover .course-card-media img { transform: scale(1.04); }

.course-card-body { flex: 1 1 auto; padding: 1.35rem 1.4rem .9rem; }

.course-card-title {
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--t-ink);
  margin: 0 0 .6rem;
}
.course-card-media + .card-body a:hover .course-card-title { color: var(--t-accent); }

.course-card-desc {
  color: var(--t-ink-3);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
}
.course-card-meta { font-size: .82rem; line-height: 1.35; min-width: 0; }
.course-card-meta-label {
  display: block;
  color: var(--t-ink-4);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.course-card-meta a { color: var(--t-ink-2); font-weight: 500; }
.course-card-meta a:hover { color: var(--t-accent); }
.course-card-footer .btn { flex: 0 0 auto; }

/* --- empty state --------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--t-surface);
  border: 1px dashed var(--t-line);
  border-radius: var(--t-radius-lg);
}
.empty-state h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.empty-state p { color: var(--t-ink-3); margin: 0; }

/* a hero sits directly under the fixed chrome, so drop the wrapper's padding */
.page-wrapper > .hero:first-child,
.page-wrapper > section.hero:first-of-type { margin-top: -0.5rem; }

@media (max-width: 767px) {
  .hero-inner { padding: 0 20px 2rem; }
  .hero-slide { height: clamp(300px, 48vh, 420px); }
  .course-card-footer { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* --------------------------------------------------------------------------
   23. Touch ergonomics
   --------------------------------------------------------------------------
   Two things only show up on a real device, so they survived the pixel audit:

   - iOS zooms the whole page in when a focused input's text is under 16px. The
     form controls were .95rem (15.2px), which is just under the line.
   - The template's nav links (36px), account link (42px), .btn-sm (34px) and
     the jquery-steps wizard buttons (40px) are all below the 44px target that
     a fingertip needs.

   Applied on narrow viewports OR any coarse pointer, so an iPad Pro at 1366px
   is covered too while a desktop mouse keeps the tighter desktop sizing.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px), (pointer: coarse) {

  /* 16px exactly: anything less and iOS zooms on focus */
  .form-control,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="date"], select, textarea {
    font-size: 16px;
  }

  /* nav strip: 44px inside the 48px menu row */
  body.header-refresh .sidebar-nav > #sidebarnav > li > a { height: 44px; }

  /* account control in the top bar */
  body.header-refresh .topbar .navbar-nav .nav-item > a.nav-link { min-height: 44px; }

  /* buttons — .btn-sm is the worst offender at 34px */
  .btn, .btn-sm, button.btn, a.btn,
  input[type="submit"], input[type="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* the wizard's own action list sits outside .btn in places */
  .wizard > .actions a, .wizard > .actions a:link, .wizard > .actions a:visited {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* keep icon-only buttons square rather than stretched */
  .btn.btn-circle, .btn-icon { min-width: 44px; }

  /* the exam bar's Instructions / A+ / A- controls are plain buttons */
  .exam-tool { min-height: 44px; min-width: 44px; }

  /* Custom checkboxes ("Remember me", the PDPA consent): the real <input> is
     opacity:0, so the tap target is the <label>, which was only 25px tall.
     Pad the label to 44px and shift the styled box by the same amount, so it
     stays aligned to the FIRST line — centring instead would strand it in the
     middle of the multi-line consent paragraph. */
  .checkbox label {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .checkbox label::before,
  .checkbox label::after { top: 11px; }
}

/* --------------------------------------------------------------------------
   24. Course detail page
   --------------------------------------------------------------------------
   The stock page put ten identical full-width blue slabs down the Modules tab,
   justified the introduction into rivers, and left the aside with a bare
   "Lecturers" heading, a stray rule and a small lonely button under a lot of
   dead space. Same markup, rebuilt as a quiet document with a sticky summary
   rail.
   -------------------------------------------------------------------------- */

/* ---- aside: sticky summary rail ---- */

@media (min-width: 992px) {
  .course-aside > .card {
    position: sticky;
    top: calc(var(--header-off) + 16px);
  }
}

.course-aside > .card { overflow: hidden; }
.course-aside .card-body.no-padding img {
  width: 100%;
  display: block;
  border-radius: 0;
}
.course-aside .card-body { padding: 1.1rem 1.25rem; }
.course-aside .card-body.no-padding { padding: 0; }
.course-aside h6.font-bold { margin: .15rem 0 0; font-size: .98rem; }
.course-aside h6.font-bold a { color: var(--t-accent-dark); }

/* key/value facts */
.course-facts {
  list-style: none;
  margin: 1.1rem 0 .35rem;
  padding: .9rem 0 .2rem;
  border-top: 1px solid var(--t-line);
}
.course-facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  font-size: .9rem;
}
.course-fact-k { color: var(--t-ink-3); }
.course-fact-v { color: var(--t-ink); font-weight: 600; text-align: right; }

/* the lecturer strip */
.course-aside .message-box { margin-top: .35rem; }
/* the loop filters on avatar != null, so this wrapper can come out empty and
   was leaving a gap above the CTA */
.course-aside .message-box:not(:has(a)) { display: none; }
.course-aside .message-widget a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  text-decoration: none;
}
.course-aside .message-widget .user-img img { width: 34px; height: 34px; border-radius: 50%; }
.course-aside .message-widget .mail-contnet small { color: var(--t-ink-2); }

/* CTA: full width, no <center>, no stray rule */
.course-cta {
  margin: 1.1rem 0 .1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--t-line);
}
/* several of the CTA branches render nothing at all (e.g. a class that is
   currently running). Without this the rule and padding drew an empty box. */
.course-cta:not(:has(.btn)) { display: none; }
.course-cta .btn {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 600;
}
/* the template uses .label on these buttons as a sizing helper */
.course-cta .btn.label { padding: .7rem 1rem; border-radius: var(--t-radius-sm); }

/* ---- tabs ---- */

.course-tabs .profile-tab.nav-tabs {
  border-bottom: 1px solid var(--t-line);
  padding: 0 .35rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.course-tabs .profile-tab.nav-tabs::-webkit-scrollbar { display: none; }
.course-tabs .profile-tab.nav-tabs .nav-link {
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .85rem 1rem;
  color: var(--t-ink-3);
  font-weight: 500;
}
.course-tabs .profile-tab.nav-tabs .nav-link:hover { color: var(--t-ink); border-bottom-color: var(--t-line); }
.course-tabs .profile-tab.nav-tabs .nav-link.active {
  color: var(--t-accent-dark);
  background: transparent;
  border-bottom-color: var(--t-accent);
  font-weight: 600;
}

/* ---- introduction: readable prose, never justified ---- */

/* Bootstrap's .text-justify carries !important, and the theme only unset it
   below 768px — so every desktop width kept the rivers. Kill it across the
   whole tab body, not just the introduction. */
.tab-content .text-justify,
.course-tabs #introduction .card-body,
.course-tabs #introduction .card-body.text-justify { text-align: left !important; }
.course-tabs #introduction .card-body { padding: 1.5rem 1.6rem; color: var(--t-ink-2); line-height: 1.7; }
.course-tabs #introduction h1, #introduction h2, #introduction h3,
.course-tabs #introduction h4, #introduction h5, #introduction h6,
.course-tabs #introduction strong {
  color: var(--t-ink);
}
.course-tabs #introduction h4, #introduction h5, #introduction h6 { margin: 1.6rem 0 .5rem; font-size: 1.02rem; }
.course-tabs #introduction p { margin: 0 0 .9rem; }
.course-tabs #introduction ul, #introduction ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.course-tabs #introduction li { margin-bottom: .4rem; }

/* ---- accordions (Modules / Examination) ---- */

.course-tabs #module .card-body.accordian,
.course-tabs #examinationGroup .card-body { padding: 1.1rem 1.2rem; }

.course-tabs #module .accordian > .card,
.course-tabs #examinationGroup .card.m-b-0 {
  margin-bottom: .5rem !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* the slab: was .bg-theme solid blue with white text */
.course-tabs #module .card-header,
.course-tabs #examinationGroup .card-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-radius-sm) !important;
  padding: .85rem 1rem;
  min-height: 52px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.course-tabs #module .card-header:hover,
.course-tabs #examinationGroup .card-header:hover {
  border-color: var(--t-accent) !important;
  background: var(--t-accent-light) !important;
}
.course-tabs #module .card-header h5,
.course-tabs #examinationGroup .card-header h5 {
  color: var(--t-ink) !important;
  font-size: .96rem;
  font-weight: 600;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* the template's book glyph, toned down from decorative to functional */
.course-tabs #module .card-header h5 i,
.course-tabs #examinationGroup .card-header h5 i {
  color: var(--t-accent);
  font-size: 1.05rem;
}
/* chevron: collapsed points down, open points up */
.course-tabs #module .card-header::after,
.course-tabs #examinationGroup .card-header::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--t-ink-3);
  border-bottom: 2px solid var(--t-ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.course-tabs #module .card-header:not(.collapsed)::after,
.course-tabs #examinationGroup .card-header:not(.collapsed)::after {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--t-accent);
}

.course-tabs #module .collapse,
.course-tabs #examinationGroup .collapse { border: 0 !important; }
.course-tabs #module .collapse .card-body,
.course-tabs #examinationGroup .collapse .card-body {
  /* indent to sit under the title text, not the icon, and hang a light rule
     off the header so an open panel reads as part of its row */
  margin: -2px 0 .2rem 1rem;
  padding: .75rem 1rem .85rem 1.55rem;
  border-left: 2px solid var(--t-line);
  color: var(--t-ink-2);
  line-height: 1.65;
}
.course-tabs #module .card-header:not(.collapsed),
.course-tabs #examinationGroup .card-header:not(.collapsed) {
  border-color: var(--t-accent) !important;
  background: var(--t-accent-light) !important;
}

/* ---- narrow screens ---- */

@media (max-width: 991px) {
  .course-aside { margin-bottom: 1.25rem; }
}
@media (max-width: 575px) {
  #introduction .card-body { padding: 1.15rem 1.1rem; }
  #module .card-body.accordian,
  #examinationGroup .card-body { padding: .9rem; }
  .profile-tab.nav-tabs .nav-link { padding: .8rem .75rem; font-size: .92rem; }
  .course-facts li { font-size: .88rem; }
}

/* --------------------------------------------------------------------------
   25. Classroom (the learner's course home)
   --------------------------------------------------------------------------
   Everything here is scoped to .classroom-page. This view shares id="module"
   with Views/Course/Detail.cshtml, so unscoped rules cross-contaminate — that
   already happened once.

   The stock page stacked four separate cards down the left half (course,
   status, two progress meters) leaving the right half empty, then ran the
   modules as heavy blue slabs, each followed by an empty white strip.
   -------------------------------------------------------------------------- */

.classroom-page .page-titles { margin-bottom: .35rem; padding-bottom: 0; }
.classroom-page .page-titles h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t-ink);
  letter-spacing: -0.01em;
}

/* ---- course header card ---- */

.classroom-page > .row:first-of-type .card { border-radius: var(--t-radius); }
.classroom-page h3.text-themecolor {
  color: var(--t-ink) !important;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
/* the markup separates title and blurb with a <br> */
.classroom-page h3.text-themecolor + br { display: none; }
.classroom-page .card-subtitle {
  color: var(--t-ink-2);
  margin: .55rem 0 0;
  line-height: 1.6;
  max-width: 68ch;
}
.classroom-page a.pull-right[href*="/Course/"] {
  float: none !important;
  display: inline-block;
  margin-top: .85rem;
  color: var(--t-accent-dark);
  font-weight: 600;
}

/* ---- status / expiry / hours strip ---- */

.classroom-page h6.font-bold.text-themecolor {
  color: var(--t-ink-3) !important;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
  /* "Total Clocked-in Hours" wraps to two lines while its neighbours do not,
     which dropped its value out of line with the rest of the row */
  min-height: 2.3em;
}
.classroom-page .label,
.classroom-page .badge {
  display: inline-block;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 600;
}

/* ---- progress meters: side by side, and reclaim the empty half ---- */

@media (min-width: 768px) {
  /* when the right-hand column (course materials) has no card, let the
     progress column run the full width instead of leaving half the page blank */
  .classroom-page .row > .col-12.col-md-6:has(.progress) { flex: 0 0 100%; max-width: 100%; }
  .classroom-page .row > .col-12.col-md-6:not(:has(.card)) { display: none; }

  .classroom-page .col-12.col-md-6:has(.progress) { display: flex; gap: 1rem; flex-wrap: wrap; }
  .classroom-page .col-12.col-md-6:has(.progress) > .card { flex: 1 1 260px; margin-bottom: 0; }
}

.classroom-page .progress {
  height: 8px;
  border-radius: 999px;
  background: var(--t-line);
  overflow: hidden;
}
.classroom-page .progress-bar {
  height: 8px !important;
  border-radius: 999px;
  background: var(--t-accent) !important;
  /* the template sets min-width so the "%" label printed INSIDE the bar always
     fits. The side effect is that a 0% bar still paints ~42px of fill, i.e. it
     shows progress the learner has not made. The label is moved outside the
     track below, so the floor can go. */
  min-width: 0 !important;
}

/* ---- module rows ---- */

.classroom-page #module .card-body.accordian { padding: 0; }

.classroom-page #module > .card-body > .card {
  margin-bottom: .6rem;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  overflow: hidden;
  background: var(--t-surface);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.classroom-page #module > .card-body > .card:hover { border-color: var(--t-accent); }

/* the slab: was solid .bg-theme with white text */
.classroom-page #module .card-header.bg-theme {
  background: transparent !important;
  border: 0 !important;
  padding: .95rem 1.1rem;
  min-height: 56px;
  display: flex;
  align-items: center;
}
.classroom-page #module .card-header.bg-theme .row { width: 100%; margin: 0; }

/* chevron so it reads as expandable; points up once the lessons are open */
.classroom-page #module .card-header.bg-theme::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-left: .9rem;
  border-right: 2px solid var(--t-ink-3);
  border-bottom: 2px solid var(--t-ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.classroom-page #module .card-header.bg-theme:not(.collapsed)::after {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--t-accent);
}
.classroom-page #module > .card-body > .card:has(> .card-header.bg-theme:not(.collapsed)) {
  border-color: var(--t-accent);
}
.classroom-page #module .card-header.bg-theme .col-12 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
}
/* title + "N lectures" stack; the wrapper now carries the flex */
.classroom-page #module .card-header .module-head-text {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.classroom-page #module .card-header label.text-white {
  color: var(--t-ink) !important;
  float: none !important;
  font-size: .97rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.classroom-page #module .card-header .module-meta {
  color: var(--t-ink-3);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
}
/* the progress + status cell the template lays out as a floated table */
.classroom-page #module .card-header table.pull-right {
  float: none !important;
  width: auto !important;
  max-width: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* HTML inserts an implicit <tbody>; leaving it as table-row-group breaks the
   flex chain, so the row can never fill its parent */
.classroom-page #module .card-header table.pull-right tbody { display: flex; width: 100%; }
.classroom-page #module .card-header table.pull-right tr { display: flex; align-items: center; gap: .75rem; width: 100%; }
.classroom-page #module .card-header table.pull-right td { border: 0; padding: 0; }
.classroom-page #module .card-header table.pull-right td:first-child { width: 165px; }
.classroom-page #module .card-header .progress {
  position: relative;
  overflow: visible;
  height: 8px;
  width: 120px;
}
.classroom-page #module .card-header .progress-bar { height: 8px !important; overflow: visible; }
/* the label is unreadable inside an 8px track, so sit it just past the end of
   the track (absolute against .progress, since the bar itself stays static) */
.classroom-page #module .card-header .progress-bar small {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 0 !important;
  color: var(--t-ink-2) !important;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* status glyphs -> legible chips */
.classroom-page #module .card-header .mdi-lock,
.classroom-page #module .card-header .mdi-lock-open,
.classroom-page #module .card-header .mdi-check-circle {
  float: none !important;
  font-size: 1.15rem !important;
  line-height: 1;
}
.classroom-page #module .card-header .mdi-check-circle { color: var(--t-ok, #1a7f4b) !important; }
.classroom-page #module .card-header .mdi-lock-open { color: var(--t-accent) !important; }
.classroom-page #module .card-header .mdi-lock { color: var(--t-ink-3) !important; }

/* the module's expiry/actions header renders empty unless the course uses
   module durations or extensions — it was leaving a white strip per module */
/* The module-level actions header carries the expiry text, extend/payment
   buttons, and — once the course is complete — the exam declaration modal plus
   two <script> blocks. Most of that never renders inline, so the row collapsed
   to nothing but its own 18px padding under every module. Testing for a .btn
   was not enough: the modal contains buttons of its own. Zero the padding and
   put it back only for content that actually paints. */
.classroom-page #module > .card-body > .card > .card-header:not(.bg-theme) {
  padding: 0;
  border: 0 !important;
}
.classroom-page #module > .card-body > .card > .card-header:not(.bg-theme):has(.btn:not(.modal .btn)),
.classroom-page #module > .card-body > .card > .card-header:not(.bg-theme):has(small:not(.modal small)) {
  padding: .7rem .9rem;
  border-top: 1px solid var(--t-line) !important;
}

/* ---- lesson rows inside an open module ---- */

.classroom-page #module .collapse > .card-body { padding: .35rem .9rem .9rem; }
.classroom-page #module .collapse .card.border-darker {
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  margin-bottom: .45rem;
  background: var(--t-bg);
  overflow: hidden;
}
/* lectures open with their module, so separate the header from its body */
.classroom-page #module .collapse .card.border-darker > .collapse.show {
  border-top: 1px solid var(--t-line) !important;
}
.classroom-page #module .collapse .card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: transparent !important;
  border: 0 !important;
  padding: .7rem .9rem;
  min-height: 46px;
}
.classroom-page #module .collapse .card-header label {
  color: var(--t-ink) !important;
  font-size: .91rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
}
.classroom-page #module .collapse .card-header i { font-size: 1.05rem; }
.classroom-page #module .collapse .card-header .mdi-lock-open { color: var(--t-accent); }
.classroom-page #module .collapse .card-header .mdi-check-circle { color: var(--t-ok, #1a7f4b); }
.classroom-page #module .collapse .card-header .mdi-lock { color: var(--t-ink-3); }
.classroom-page #module .collapse .collapse .card-body { padding: .2rem .9rem .8rem; }
.classroom-page #module .collapse h4.text-themecolor {
  color: var(--t-ink-2) !important;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
.classroom-page #module .card-footer {
  background: transparent;
  border-top: 1px solid var(--t-line);
  padding: .7rem .9rem;
}

/* ---- narrow screens ---- */

@media (max-width: 767px) {
  .classroom-page #module .card-header.bg-theme .col-12 {
    flex-wrap: wrap;
    gap: .6rem;
  }
  .classroom-page #module .card-header label.text-white { flex: 1 1 100%; }
  /* the template nests table > tr > td; each level is a flex item here, so each
     needs to be told to fill or the track collapses to 0 */
  .classroom-page #module .card-header table.pull-right { width: 100% !important; flex: 1 1 100%; }
  .classroom-page #module .card-header table.pull-right tbody { flex: 1 1 100%; }
  .classroom-page #module .card-header table.pull-right tr { width: 100%; flex: 1 1 100%; }
  .classroom-page #module .card-header table.pull-right td:first-child { width: auto; flex: 1 1 auto; min-width: 0; }
  .classroom-page #module .card-header .progress { width: 100%; }
  /* the track goes full width here, so the label can no longer sit after it
     without landing on the status icon — park it above the right-hand end */
  .classroom-page #module .card-header .progress-bar small {
    left: auto;
    right: 0;
    top: -17px;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   26. Lecture page — module sidebar + capped reading column
   --------------------------------------------------------------------------
   Everything is scoped under .lecture-content, and the two-column grid is
   applied with :has(> .lesson-side) so the non-chapter lecture layout, which
   renders into the same .row, is untouched.

   The old page tiled the entity watermark straight across the body text, ran
   lines at ~110 characters, and labelled the rail "Chapter 1 / 2 / 3" while
   the titles sat in a tooltip.
   -------------------------------------------------------------------------- */

/* reading progress, pinned above the header */
.lesson-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.lesson-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--t-accent);
  transition: width .08s linear;
}

/* ---- the two-column grid ---- */

/* At 1200px and up the header collapses to one 72px row and --header-off
   equals it exactly, so the page wrapper's padding left no gap at all and the
   module line sat against the bar. Give the lesson its own top spacing.

   The width cap matters too: on a wide monitor a 268px rail plus a reading
   column left several hundred pixels of dead space on the right. Capping the
   page and centring it turns that into balanced margin on both sides. */
.lecture-content {
  padding-top: 1.75rem;
  max-width: 1240px;
  margin-inline: auto;
}

.lecture-content .row:has(> .lesson-side) {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
  margin-left: 0;
  margin-right: 0;
  /* no align-items:start — the sidebar column has to stretch to the row's full
     height, otherwise position:sticky inside it has no travel and the rail
     scrolls away with the content */
}
@media (max-width: 991px) {
  .lecture-content { padding-top: 1.1rem; }
  .lecture-content .row:has(> .lesson-side) { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
}

/* ---- sidebar ---- */

.lesson-side { min-width: 0; padding: 0; }
.lesson-side .stickyside {
  position: sticky;
  top: calc(var(--header-off) + 14px);
  display: grid;
  gap: .9rem;
}
@media (max-width: 991px) { .lesson-side .stickyside { position: static; } }

.side-card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  overflow: hidden;
}
.side-head { padding: .95rem 1rem .85rem; border-bottom: 1px solid var(--t-line); }
.side-course {
  font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-ink-3); margin: 0 0 .35rem; line-height: 1.4;
}
.side-module { margin: 0; font-size: .88rem; font-weight: 650; line-height: 1.35; color: var(--t-ink); }
.side-bar { height: 5px; border-radius: 99px; background: var(--t-line); overflow: hidden; margin-top: .7rem; }
.side-bar > i { display: block; height: 100%; background: var(--t-accent); border-radius: 99px; }
.side-bar-l {
  display: flex; justify-content: space-between;
  font-size: .73rem; color: var(--t-ink-3); margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}

/* chapter rail — .list-group / .list-group-item come from the template */
.chapter-rail { padding: .45rem; display: grid; gap: 1px; border: 0; }
.chapter-rail .list-group-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  padding: .5rem .55rem;
  border: 0 !important;
  border-radius: var(--t-radius-sm);
  background: transparent;
  color: var(--t-ink-2);
  transition: background .14s ease, color .14s ease;
}
.chapter-rail .list-group-item:hover { background: var(--t-bg); color: var(--t-ink); }
.chapter-rail .list-group-item.active {
  background: var(--t-accent-light) !important;
  border: 0 !important;
  color: var(--t-ink) !important;
}
.rail-n {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--t-line); background: var(--t-surface);
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: var(--t-ink-3);
  margin-top: 1px;
}
.chapter-rail .list-group-item.active .rail-n { border-color: var(--t-accent); color: var(--t-accent); }
.rail-text { min-width: 0; }
.rail-t { display: block; font-size: .82rem; font-weight: 550; line-height: 1.4; }
.rail-s { display: block; font-size: .7rem; color: var(--t-ink-3); margin-top: 1px; }
.rail-sep { display: block; height: 1px; background: var(--t-line); margin: .4rem .55rem; }

/* other modules */
.module-rail { padding: .45rem; display: grid; gap: 1px; }
.module-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem; border-radius: var(--t-radius-sm);
  font-size: .78rem; color: var(--t-ink-3);
}
.module-row.here { background: var(--t-accent-light); color: var(--t-ink); font-weight: 600; }
.module-n {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--t-bg); border: 1px solid var(--t-line);
  display: grid; place-items: center;
  font-size: .64rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.module-row.done .module-n { background: var(--t-ok, #1a7f4b); border-color: var(--t-ok, #1a7f4b); color: #fff; }
.module-t { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.module-s { flex: 0 0 auto; font-size: .7rem; opacity: .75; }
.side-foot { padding: .6rem 1rem; border-top: 1px solid var(--t-line); font-size: .73rem; color: var(--t-ink-3); }

/* ---- reading column ---- */

.lesson-main { min-width: 0; display: grid; gap: 1rem; padding: 0; }

/* Option B's placement: the back control lives in a bar with the title rather
   than floating on its own beside it. */
.lesson-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  padding: .9rem 1.15rem;
}
.lesson-head-text { min-width: 0; display: grid; gap: .3rem; }
.lesson-eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-accent); margin: 0;
}
.lesson-title {
  margin: 0;
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--t-ink);
}
.lesson-back {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem .85rem;
  border: 1px solid var(--t-line); border-radius: var(--t-radius-sm);
  background: var(--t-surface); color: var(--t-ink-2);
  font-size: .85rem; font-weight: 550; white-space: nowrap; text-decoration: none;
}
.lesson-back:hover { border-color: var(--t-accent); color: var(--t-accent-dark); text-decoration: none; }

/* The cards now span the content column, so the page reads as full. The line
   length is capped inside each card instead (.chapter-main), which is what the
   64ch cap was actually protecting. */
.lesson-read { display: grid; gap: 1rem; }

.chapter-card {
  position: relative;
  overflow: hidden;
  /* custom.css sets `h1..h6 { margin-bottom: unset !important }`, so a margin
     on the heading is silently dropped — space the block with gap instead */
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-content: start;
  gap: .5rem 1.6rem;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  padding: 1.6rem 1.85rem;
  scroll-margin-top: calc(var(--header-off) + 18px);
}
@media (max-width: 575px) { .chapter-card { padding: 1.15rem 1.1rem; } }

/* the entity watermark: kept, but as one faint mark in the corner rather than
   tiled across the words */
.chapter-wm {
  position: absolute;
  right: -10px; bottom: -10px;
  width: 190px; height: 76px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: .06;
  pointer-events: none;
}

.chapter-gutter {
  grid-row: 1 / span 2;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: .15rem;
  padding-top: .15rem;
}
.chapter-num {
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--t-accent); font-variant-numeric: tabular-nums;
}
.chapter-k {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-ink-3); margin: 0;
}
.chapter-of { font-size: .68rem; color: var(--t-ink-3); }

/* the line-length cap now lives here rather than on the whole column */
.chapter-main { min-width: 0; max-width: 68ch; display: grid; gap: .5rem; align-content: start; }
.chapter-h {
  margin: 0;
  font-size: 1.22rem; font-weight: 650; line-height: 1.25; letter-spacing: -.018em;
  color: var(--t-ink);
}
.chapter-body { margin-top: .25rem; }
.chapter-body { color: var(--t-ink-2); line-height: 1.7; }
.chapter-body p { margin: 0 0 .8rem; }
.chapter-body p:last-child { margin-bottom: 0; }
.chapter-body ul, .chapter-body ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.chapter-body li { margin-bottom: .5rem; }
.chapter-body b, .chapter-body strong { color: var(--t-ink); font-weight: 600; }
.chapter-body h1, .chapter-body h2, .chapter-body h3,
.chapter-body h4, .chapter-body h5, .chapter-body h6 {
  color: var(--t-ink); font-size: 1rem; margin: 1.2rem 0 .45rem;
}

/* ---- assessment as a destination ---- */

.assess-card {
  display: grid;
  justify-items: start;
  gap: .35rem;
  border: 1px solid var(--t-accent);
  border-radius: var(--t-radius);
  padding: 1.5rem 1.75rem;
  background: linear-gradient(180deg, var(--t-accent-light), var(--t-surface) 72%);
  scroll-margin-top: calc(var(--header-off) + 18px);
}
@media (max-width: 575px) { .assess-card { padding: 1.2rem 1.1rem; } }
.assess-card.passed { border-color: var(--t-ok, #1a7f4b); background: var(--t-surface); }
.assess-card.course-end { max-width: none; }
.assess-h { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: -.018em; color: var(--t-ink); }
.assess-p { margin: 0; color: var(--t-ink-2); font-size: .9rem; }
.assess-facts { display: flex; gap: .45rem; flex-wrap: wrap; margin: .55rem 0 .35rem; }
.assess-facts .fact {
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 99px;
  padding: .32rem .75rem; font-size: .78rem; color: var(--t-ink-2);
}
.assess-facts .fact b { color: var(--t-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.assess-facts .fact-ok { border-color: var(--t-ok, #1a7f4b); color: var(--t-ok, #1a7f4b); font-weight: 600; }

/* the template's Start Assessment was .btn-danger — red reads as a warning,
   not as the next step */
.lecture-content .btn.lesson-cta {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: #fff;
  min-height: 44px;
  padding: .7rem 1.25rem;
  font-weight: 650;
}
.lecture-content .btn.lesson-cta:hover { background: var(--t-accent-dark); border-color: var(--t-accent-dark); color: #fff; }
.lesson-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- previous / next ---- */

.lesson-pager { display: flex; gap: .75rem; flex-wrap: wrap; }
.lesson-pager .btn {
  flex: 1 1 220px;
  display: grid;
  gap: 2px;
  text-align: left;
  min-height: 56px;
  padding: .6rem .95rem;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  color: var(--t-ink-2);
  white-space: normal;
}
.lesson-pager .btn:hover { border-color: var(--t-accent); color: var(--t-ink); }
.lesson-pager .pager-next { text-align: right; }
.pager-k { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--t-ink-3); }
.pager-t { font-size: .85rem; font-weight: 600; line-height: 1.35; color: var(--t-ink); }

/* ---- narrow screens ---- */

@media (max-width: 767px) {
  .chapter-card { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .chapter-gutter {
    grid-row: auto;
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: .45rem;
  }
  .chapter-num { font-size: 1.05rem; }
}

@media (max-width: 991px) {
  .lesson-side .side-card:last-child { display: none; }   /* module list is noise on a phone */
  /* the pager and the end-of-course card can use the full width, but the
     reading column keeps its cap — dropping it let lines run to ~780px again
     on a landscape phone, which is the problem this layout exists to fix */
  .lesson-pager, .assess-card.course-end { max-width: none; }
  .chapter-main { max-width: none; }
}

/* --------------------------------------------------------------------------
   27. Assessment — one question at a time, with a floating navigator
   --------------------------------------------------------------------------
   The wizard already showed one question per screen, but nothing said which
   question you were on, the timer was plain text in a corner that never
   changed as it ran down, and there was no way to skip and come back.
   -------------------------------------------------------------------------- */

/* ---- the bar: position, progress, clock ---- */

.quiz-bar {
  position: sticky;
  top: var(--header-off);
  z-index: 20;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
  margin-bottom: 1.5rem;
}
.quiz-bar-in {
  max-width: 900px;
  margin-inline: auto;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.quiz-heading { min-width: 0; flex: 0 1 auto; }
.quiz-eyebrow {
  margin: 0; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent);
}
.quiz-lecture {
  margin: 0; font-size: .85rem; font-weight: 600; color: var(--t-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch;
}
.quiz-progress { flex: 1 1 auto; min-width: 0; display: grid; gap: .35rem; }
.quiz-pos { font-size: .78rem; color: var(--t-ink-3); font-variant-numeric: tabular-nums; }
.quiz-track { height: 6px; border-radius: 99px; background: var(--t-line); overflow: hidden; display: block; }
.quiz-track > i { display: block; height: 100%; width: 0; background: var(--t-accent); border-radius: 99px; transition: width .25s ease; }

/* the clock. #countDown's markup comes from LoadCounter(), which emits
   <span class="minutes">n <label>Minutes</label></span> — style that shape. */
.quiz-clock {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: .3rem;
  font-variant-numeric: tabular-nums;
  color: var(--t-ink);
  font-weight: 700; font-size: 1.05rem;
  padding: .35rem .7rem;
  border: 1px solid var(--t-line); border-radius: 99px;
  background: var(--t-bg);
  text-decoration: none;
}
.quiz-clock:hover { text-decoration: none; color: var(--t-ink); }
.quiz-clock label { margin: 0; font-size: .68rem; font-weight: 500; color: var(--t-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.quiz-clock .seconds { opacity: .85; }

/* ---- the question card ---- */

/* the element is .card.wizard-content, not a .card inside it */
.card.wizard-content { border: 0; box-shadow: none; background: transparent; }
/* .card is display:flex, so auto margins on this flex item are what actually
   centre the column — auto margins on .content inside it resolved to 0/360 */
.card.wizard-content > .card-body {
  padding: 0;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* steps.css sets `margin: 0` on these, which beats the margin-inline shorthand
   — set the longhands so the column actually centres */
.validation-wizard > .content {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent;
  min-height: 0;
}
.validation-wizard > .content > .body {
  width: 100%; position: static; padding: 0; float: none;
}
.validation-wizard section .form-group {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  padding: 1.6rem 1.75rem;
  margin: 0;
}
@media (max-width: 575px) { .validation-wizard section .form-group { padding: 1.15rem 1.1rem; } }

.validation-wizard section h4.text-themecolor {
  color: var(--t-ink-3) !important;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  margin: 0;
}
.validation-wizard section hr { display: none; }
.validation-wizard section h3.font-weight-bold {
  font-size: 1.15rem; line-height: 1.4; letter-spacing: -.012em;
  color: var(--t-ink); margin: .5rem 0 1.1rem;
}

/* option rows get A/B/C/D from a counter — iCheck builds the label markup
   itself, so there is nowhere to put a letter in the Razor */
.validation-wizard .icheck-list { counter-reset: quizopt; }
.validation-wizard .icheck-list > li { counter-increment: quizopt; }
.validation-wizard .icheck-list > li > div[class*="_line"]::before {
  content: counter(quizopt, upper-alpha);
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-right: .7rem;
  border: 1px solid var(--t-line); border-radius: 6px;
  background: var(--t-surface);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--t-ink-3);
}
.validation-wizard .icheck-list > li > div[class*="_line"] {
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  margin-bottom: .5rem;
  background: var(--t-surface);
  transition: border-color .14s ease, background .14s ease;
}
.validation-wizard .icheck-list > li > div[class*="_line"]:hover { border-color: var(--t-accent); }
.validation-wizard .icheck-list > li > div[class*="_line"].checked {
  border-color: var(--t-accent);
  background: var(--t-accent-light);
  font-weight: 550;
}
.validation-wizard .icheck-list > li > div[class*="_line"].checked::before {
  border-color: var(--t-accent); color: #fff; background: var(--t-accent);
}

/* wizard actions */
.validation-wizard > .actions {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 1.1rem;
  padding: 0;
  float: none;
}
.validation-wizard > .actions > ul { display: flex; justify-content: space-between; gap: .75rem; float: none; }
.validation-wizard > .actions > ul > li { margin: 0; float: none; }
.validation-wizard > .actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--t-accent) !important;
  border-radius: var(--t-radius-sm);
  padding: .7rem 1.3rem;
  font-weight: 650;
  color: #fff !important;
}
.validation-wizard > .actions > ul > li:first-child a { background: var(--t-surface) !important; color: var(--t-ink-2) !important; border: 1px solid var(--t-line); }
.validation-wizard > .actions > ul > li.disabled a { opacity: .45; }

/* ---- floating navigator ---- */

.quiz-nav {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: .5rem;
  width: min(420px, calc(100vw - 32px));
}
.quiz-nav-toggle {
  display: flex; align-items: center; gap: .6rem;
  min-height: 46px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--t-line);
  border-radius: 99px;
  background: var(--t-surface);
  box-shadow: var(--t-shadow-lg);
  color: var(--t-ink);
  font: 600 .85rem var(--t-font, inherit);
  cursor: pointer;
}
.quiz-nav-toggle:hover { border-color: var(--t-accent); }
.quiz-nav-toggle:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.quiz-nav-count b { color: var(--t-accent-dark); font-variant-numeric: tabular-nums; }
.quiz-nav-dots {
  width: 14px; height: 14px; flex: 0 0 auto;
  background:
    radial-gradient(circle, var(--t-accent) 40%, transparent 42%) 0 0/7px 7px repeat;
  opacity: .85;
}
.quiz-nav-caret {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid var(--t-ink-3);
  border-bottom: 2px solid var(--t-ink-3);
  transform: translateY(-2px) rotate(-135deg);
  transition: transform .18s ease;
}
.quiz-nav-toggle[aria-expanded="true"] .quiz-nav-caret { transform: translateY(2px) rotate(45deg); }

.quiz-nav-panel {
  width: 100%;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-lg);
  padding: .85rem;
}
.quiz-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: .35rem;
}
.quiz-cell {
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-sm);
  background: var(--t-surface);
  color: var(--t-ink-3);
  font: 600 .8rem var(--t-font, inherit);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.quiz-cell:hover { border-color: var(--t-accent); color: var(--t-ink); }
.quiz-cell:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.quiz-cell.done { background: var(--t-ok-light, #e7f4ed); border-color: var(--t-ok, #1a7f4b); color: var(--t-ok, #1a7f4b); }
.quiz-cell.here { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }

.quiz-nav-legend { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: .7rem; font-size: .72rem; color: var(--t-ink-3); }
.quiz-nav-legend i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-right: .3rem; vertical-align: -1px;
  border: 1px solid var(--t-line); background: var(--t-surface);
}
.quiz-nav-legend .sw-done { background: var(--t-ok-light, #e7f4ed); border-color: var(--t-ok, #1a7f4b); }
.quiz-nav-legend .sw-here { background: var(--t-accent); border-color: var(--t-accent); }

/* keep the last action clear of the floating bar */
.validation-wizard > .actions { margin-bottom: 5.5rem; }

@media (max-width: 767px) {
  .quiz-bar-in { flex-wrap: wrap; gap: .6rem .9rem; padding: .7rem 1rem; }
  .quiz-heading { order: 1; flex: 1 1 auto; }
  .quiz-clock { order: 2; }
  .quiz-progress { order: 3; flex: 1 1 100%; }
  .quiz-lecture { max-width: 22ch; }
}

/* --------------------------------------------------------------------------
   28. Examination — one question at a time, with a floating navigator
   --------------------------------------------------------------------------
   The paper shipped with every section and all 20 questions collapsed, each a
   blue slab with its own green Save button, behind an examinee card and a full
   screen of instructions — and with three separate Review buttons. The markup
   is unchanged (ComposeAnswer still walks it); JS forces the accordions open
   and pages through them, and this retires the old chrome.
   -------------------------------------------------------------------------- */

/* ---- retire the duplicated controls ---- */
.exam-legacy-tools,
.exam-legacy-review,
.btn-review,
.count-down-floating,
.exam-paged .card-footer,
.exam-paged .card-exam-section > .card-header,
.exam-paged .question-section .card-header {
  display: none !important;
}

/* the bar carries the sitting title, so the old page header is a duplicate */
.exam-legacy-title { display: none !important; }

/* Examinee and Instructions filled the whole first screen before you reached a
   single question. Keep them one click away on the bar instead. */
body:not(.exam-show-instructions) .exam-intro { display: none; }
.exam-intro .card { border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow-sm); }
.exam-intro .card-header { background: transparent; border-bottom: 1px solid var(--t-line); }
.exam-intro .card-body { text-align: left !important; }
.exam-legacy-title ~ * .breadcrumb { display: none; }

/* the section wrapper drew a border around the note and the question */
.exam-paged .examinationSection { border: 0 !important; }
.exam-paged .card-exam-section > .collapse > .card-body { padding-top: 0 !important; }
.exam-paged .section-note { padding: 0 0 .25rem; }

/* ---- the bar ---- */

.exam-bar {
  position: sticky;
  top: var(--header-off);
  z-index: 20;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
  margin-bottom: 1.25rem;
}
.exam-bar-in {
  max-width: 940px;
  margin-inline: auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.exam-heading { min-width: 0; flex: 0 1 auto; }
.exam-eyebrow {
  margin: 0; font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent);
}
.exam-title-s {
  margin: 0; font-size: .84rem; font-weight: 600; color: var(--t-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch;
}
.exam-progress { flex: 1 1 auto; min-width: 0; display: grid; gap: .3rem; }
.exam-pos { font-size: .76rem; color: var(--t-ink-3); font-variant-numeric: tabular-nums; }
.exam-track { height: 6px; border-radius: 99px; background: var(--t-line); overflow: hidden; display: block; }
.exam-track > i { display: block; height: 100%; width: 0; background: var(--t-accent); border-radius: 99px; transition: width .25s ease; }

.exam-tools { display: flex; gap: .35rem; flex: 0 0 auto; }
.exam-tool {
  min-height: 34px; padding: .3rem .6rem;
  border: 1px solid var(--t-line); border-radius: var(--t-radius-sm);
  background: var(--t-surface); color: var(--t-ink-2);
  font: 600 .76rem inherit; cursor: pointer;
}
.exam-tool:hover { border-color: var(--t-accent); color: var(--t-accent-dark); }
.exam-tool[aria-expanded="true"] { background: var(--t-accent-light); border-color: var(--t-accent); color: var(--t-accent-dark); }

.exam-clock {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: .3rem;
  font-variant-numeric: tabular-nums;
  color: var(--t-ink); font-weight: 700; font-size: 1.02rem;
  padding: .3rem .7rem;
  border: 1px solid var(--t-line); border-radius: 99px; background: var(--t-bg);
  position: static !important; width: auto !important; box-shadow: none !important;
}
.exam-clock label { margin: 0; font-size: .66rem; font-weight: 500; color: var(--t-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.exam-clock span { min-width: 0 !important; }

/* ---- the question ---- */

.exam-paged { max-width: 940px; margin-inline: auto; }
.exam-paged .card-exam-section,
.exam-paged .card-exam-section > .collapse > .card-body { border: 0 !important; background: transparent; box-shadow: none; padding: 0; }
.exam-paged .section-note { color: var(--t-ink-3); font-size: .85rem; text-align: left !important; }

.exam-paged .question-section { display: none; margin: 0; padding: 0 !important; }
.exam-paged .question-section.is-current { display: block; }
.exam-paged .question-section > .col-12 { padding: 0; }
.exam-paged .question-section .card {
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  background: var(--t-surface);
}
.exam-paged .question-section .collapse { border: 0 !important; }
.exam-paged .question-section .card-body { padding: 1.6rem 1.75rem; }
@media (max-width: 575px) { .exam-paged .question-section .card-body { padding: 1.15rem 1.1rem; } }

.exam-paged .question-title.font-bold {
  font-size: 1.12rem; line-height: 1.45; letter-spacing: -.012em;
  color: var(--t-ink); margin-bottom: .35rem;
}
.exam-paged p.question-title.text-right {
  text-align: left !important;
  font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-ink-3); margin: 0 0 1rem;
}

/* option rows, lettered like the assessment */
.exam-paged .icheck-list { counter-reset: examopt; }
.exam-paged .icheck-list > li { counter-increment: examopt; }
.exam-paged .icheck-list > li > div[class*="_line"]::before {
  content: counter(examopt, upper-alpha);
  flex: 0 0 auto;
  width: 22px; height: 22px; margin-right: .7rem;
  border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-surface);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--t-ink-3);
}
.exam-paged .icheck-list > li > div[class*="_line"] {
  border: 1px solid var(--t-line); border-radius: var(--t-radius-sm);
  margin-bottom: .5rem; background: var(--t-surface);
  transition: border-color .14s ease, background .14s ease;
}
.exam-paged .icheck-list > li > div[class*="_line"]:hover { border-color: var(--t-accent); }
.exam-paged .icheck-list > li > div[class*="_line"].checked {
  border-color: var(--t-accent); background: var(--t-accent-light); font-weight: 550;
}
.exam-paged .icheck-list > li > div[class*="_line"].checked::before {
  border-color: var(--t-accent); color: #fff; background: var(--t-accent);
}

/* ---- pager ---- */

.exam-pager {
  max-width: 940px;
  margin: 1.1rem auto 6rem;
  padding-inline: 1.25rem;
  display: flex; justify-content: space-between; gap: .75rem;
}
.exam-pager .btn {
  min-height: 44px; padding: .7rem 1.3rem;
  border-radius: var(--t-radius-sm); font-weight: 650;
  background: var(--t-accent); color: #fff; border: 1px solid var(--t-accent);
}
.exam-pager .btn.ghost { background: var(--t-surface); color: var(--t-ink-2); border-color: var(--t-line); }
.exam-pager .btn:disabled { opacity: .4; cursor: default; }

/* ---- navigator (shares the assessment's cell styling) ---- */

.exam-nav {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  display: grid; justify-items: center; gap: .5rem;
  width: min(460px, calc(100vw - 32px));
}
.exam-nav-toggle {
  display: flex; align-items: center; gap: .6rem;
  min-height: 46px; padding: .6rem 1.1rem;
  border: 1px solid var(--t-line); border-radius: 99px;
  background: var(--t-surface); box-shadow: var(--t-shadow-lg);
  color: var(--t-ink); font: 600 .85rem inherit; cursor: pointer;
}
.exam-nav-toggle:hover { border-color: var(--t-accent); }
.exam-nav-toggle:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.exam-nav-panel {
  width: 100%;
  background: var(--t-surface);
  border: 1px solid var(--t-line); border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-lg); padding: .85rem;
}
.exam-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .35rem; }
.exam-nav-legend { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: .7rem; font-size: .72rem; color: var(--t-ink-3); }
.exam-nav-legend i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-right: .3rem; vertical-align: -1px; border: 1px solid var(--t-line); background: var(--t-surface);
}
.exam-nav-legend .sw-done { background: var(--t-ok-light, #e7f4ed); border-color: var(--t-ok, #1a7f4b); }
.exam-nav-legend .sw-here { background: var(--t-accent); border-color: var(--t-accent); }
.btn.exam-review {
  width: 100%; margin-top: .7rem; min-height: 44px;
  background: var(--t-accent); color: #fff; border: 0;
  border-radius: var(--t-radius-sm); font-weight: 650;
}
.btn.exam-review:hover { background: var(--t-accent-dark); color: #fff; }

@media (max-width: 767px) {
  .exam-bar-in { flex-wrap: wrap; gap: .55rem .8rem; padding: .65rem 1rem; }
  .exam-heading { order: 1; flex: 1 1 auto; }
  .exam-clock { order: 2; }
  .exam-tools { order: 3; }
  .exam-progress { order: 4; flex: 1 1 100%; }
  .exam-title-s { max-width: 18ch; }
}

/* --------------------------------------------------------------------------
   29. Answer rows: the iCheck tick
   --------------------------------------------------------------------------
   The iCheck "line" skin draws its tick as a sprite — a white glyph meant to
   sit on a solid coloured bar, floated to the right by the inline styles in
   both views. On these light rows it was white on near-white and sat off to
   one side. Drop the sprite and draw the tick, in the accent, at the end of
   the selected row.
   -------------------------------------------------------------------------- */

.validation-wizard .icheck-list .icheck_line-icon,
.exam-paged .icheck-list .icheck_line-icon { display: none !important; }

.validation-wizard .icheck-list > li > div[class*="_line"],
.exam-paged .icheck-list > li > div[class*="_line"] { position: relative; }

/* the tick: two borders rotated into a check */
.validation-wizard .icheck-list > li > div[class*="_line"].checked::after,
.exam-paged .icheck-list > li > div[class*="_line"].checked::after {
  content: "";
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--t-accent);
  border-bottom: 2px solid var(--t-accent);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

/* leave room so a long option never runs under the tick */
.validation-wizard .icheck-list > li > div[class*="_line"].checked,
.exam-paged .icheck-list > li > div[class*="_line"].checked { padding-right: 2.6rem; }

/* the inline styles in both views paint checked and hovered rows #94f34f */
.validation-wizard .icheck-list > li > div[class*="_line"].hover,
.exam-paged .icheck-list > li > div[class*="_line"].hover {
  background-color: var(--t-bg) !important;
}
.validation-wizard .icheck-list > li > div[class*="_line"].checked.hover,
.exam-paged .icheck-list > li > div[class*="_line"].checked.hover {
  background-color: var(--t-accent-light) !important;
}

/* --------------------------------------------------------------------------
   30. Classroom — the assessment as its own step
   --------------------------------------------------------------------------
   It used to be a red .label-danger reading only "Assessment", floated to the
   far left of the lecture footer: the colour of an error, none of the facts
   the data already holds, and identical before and after you passed it.

   It is a step, not a property of the lesson — passing it is what unlocks the
   next module — so it gets its own row, its own state and its own action.
   -------------------------------------------------------------------------- */

.classroom-page .lecture-assess {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .9rem;
  border-top: 1px dashed var(--t-line);
  background: var(--t-bg);
}

.la-icon {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  border: 1px solid transparent;
}
.is-open   .la-icon { background: var(--t-accent-light); color: var(--t-accent-dark); border-color: var(--t-accent-light); }
.is-passed .la-icon { background: var(--t-ok-light, #e7f4ed); color: var(--t-ok, #1a7f4b); }
.is-locked .la-icon { background: var(--t-line); color: var(--t-ink-3); font-size: .7rem; }

.la-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.la-title { font-size: .84rem; font-weight: 600; color: var(--t-ink); line-height: 1.35; }
.is-passed .la-title { color: var(--t-ok, #1a7f4b); }
.is-locked .la-title { color: var(--t-ink-3); }
.la-sub { font-size: .74rem; color: var(--t-ink-3); line-height: 1.4; }

.classroom-page .btn.la-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: .45rem 1rem;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  color: var(--t-ink-2);
  border-radius: var(--t-radius-sm);
  font-size: .82rem;
  font-weight: 600;
}
.classroom-page .btn.la-btn:hover {
  border-color: var(--t-accent);
  color: var(--t-accent-dark);
  background: var(--t-surface);
}

@media (max-width: 575px) {
  .classroom-page .lecture-assess { flex-wrap: wrap; }
  .classroom-page .btn.la-btn { width: 100%; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   31. Certificate — formal landscape sheet
   --------------------------------------------------------------------------
   The old sheet was a white page of centred bold sans, about two and a half
   screens tall, with the ten-module list as its largest block — louder than
   the recipient's name — and the serial numbers orphaned in a corner under a
   dangling "E-Learning" label.

   This is a framed landscape sheet that resolves to one page: the name leads,
   the modules move to a transcript behind it, and the serials sit in the
   footer where they belong.
   -------------------------------------------------------------------------- */

.cert-page { max-width: 1120px; margin-inline: auto; padding-inline: 20px; padding-top: 1.5rem; }

/* ---- page chrome ---- */

.cert-chrome {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.cert-chrome-text { min-width: 0; display: grid; gap: 1px; }
.cert-chrome-k {
  margin: 0; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent);
}
.cert-chrome-t { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; color: var(--t-ink); }
.cert-chrome-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.btn.cert-btn {
  min-height: 44px; padding: .6rem 1.15rem;
  border-radius: var(--t-radius-sm); font-weight: 650; font-size: .88rem;
  background: var(--t-accent); color: #fff; border: 1px solid var(--t-accent);
}
.btn.cert-btn:hover { background: var(--t-accent-dark); color: #fff; }
.btn.cert-btn.ghost { background: var(--t-surface); color: var(--t-ink-2); border-color: var(--t-line); }
.btn.cert-btn.ghost:hover { border-color: var(--t-accent); color: var(--t-accent-dark); background: var(--t-surface); }

/* ---- the sheet ---- */

.cert-sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;          /* A4 landscape */
  background: #fff;
  color: #17202b;
  box-shadow: var(--t-shadow-lg);
  container-type: inline-size;
}
.cert-frame { position: absolute; inset: 16px; border: 2px solid #14243c; pointer-events: none; }
.cert-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid #14243c; opacity: .35; }

.cert-inner {
  position: absolute; inset: 38px;
  display: grid; grid-template-rows: auto 1fr auto;
  text-align: center;
}

/* header */
.cert-head { display: grid; justify-items: center; }
.cert-logo { max-height: 9cqw; max-width: 42%; width: auto; object-fit: contain; }
.cert-wordmark {
  margin: 0; font-size: 2.6cqw; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #14243c;
}

/* body — everything sized in container units so the sheet scales as one piece */
.cert-mid { display: grid; align-content: center; justify-items: center; gap: 0; }
.cert-kicker {
  margin: 0 0 1.6cqw; font-size: 1.5cqw; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: #6b7686;
}
.cert-lead { margin: 0; font-size: 1.7cqw; color: #55606f; }
.cert-name {
  margin: .7cqw 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6.2cqw; font-weight: 500; line-height: 1.08;
  letter-spacing: -.01em; color: #17202b;
  text-wrap: balance;
}
.cert-identity { margin: .5cqw 0 0; font-size: 1.5cqw; color: #6b7686; letter-spacing: .06em; }
.cert-rule { display: block; width: 12cqw; height: 1px; background: #14243c; opacity: .45; margin: 1.8cqw 0; }
.cert-course {
  margin: .5cqw 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3cqw; font-weight: 600; line-height: 1.2; color: #14243c;
  text-wrap: balance; max-width: 78%;
}
.cert-terms { margin: 1.5cqw 0 0; font-size: 1.45cqw; color: #6b7686; letter-spacing: .1em; }

/* footer */
.cert-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2cqw;
}
.cert-serial {
  display: grid; gap: .3cqw; text-align: left;
  font-size: 1.15cqw; color: #55606f; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.cert-serial b { color: #14243c; font-weight: 600; margin-right: .4cqw; }
.cert-sign { display: grid; justify-items: center; }
.cert-sign-img { max-width: 26cqw; max-height: 9cqw; width: auto; object-fit: contain; }
.cert-issuer { display: grid; gap: .2cqw; text-align: right; }
.cert-issuer-n { font-size: 1.3cqw; font-weight: 650; color: #14243c; }
.cert-issuer-s { font-size: 1.1cqw; color: #6b7686; }

/* ---- transcript: the record the sheet no longer carries ---- */

.cert-transcript {
  max-width: 760px; margin: 1.5rem auto 0;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-sm);
  overflow: hidden;
}
.cert-transcript-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--t-line); }
.cert-transcript-head h2 {
  margin: 0; font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-3);
}
.cert-transcript-head p { margin: .3rem 0 0; font-size: .85rem; color: var(--t-ink-2); }
.cert-transcript-list { margin: 0; padding: .5rem 0; list-style: none; }
.cert-transcript-list li {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 1.25rem; font-size: .88rem; color: var(--t-ink-2);
}
.cert-transcript-list li b {
  flex: 0 0 auto; width: 1.4rem;
  color: var(--t-accent); font-size: .78rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.cert-transcript-list li span { flex: 1 1 auto; min-width: 0; color: var(--t-ink); }
.cert-transcript-list li i {
  flex: 0 0 auto; font-style: normal; font-size: .78rem; font-weight: 600;
  color: var(--t-ok, #1a7f4b);
}
.cert-transcript-foot {
  margin: 0; padding: .8rem 1.25rem;
  border-top: 1px solid var(--t-line);
  font-size: .75rem; color: var(--t-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- narrow screens: the sheet scales, it does not reflow ---- */

@media (max-width: 767px) {
  .cert-page { padding-inline: 16px; }
  .cert-inner { inset: 22px; }
  .cert-frame { inset: 10px; }
  .cert-frame::after { inset: 4px; }
}

/* ---- print ----------------------------------------------------------------
   printArea() clones .printableArea into an iframe and carries the page's
   stylesheets with it, so these rules apply there too. */

@media print {
  @page { size: A4 landscape; margin: 0; }

  .cert-page { max-width: none; padding: 0; }
  .cert-chrome, .no-print { display: none !important; }

  .cert-sheet {
    width: 100%;
    aspect-ratio: 297 / 210;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }

  /* the transcript is the second sheet */
  .cert-transcript {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    page-break-before: always;
    break-before: page;
    padding: 18mm;
  }
  .cert-transcript-head { border-color: #d7dee7; }
  .cert-transcript-list li { color: #17202b; }
}