/* =====================================================================
 * theme.css — Online TESOL visual theme layer (Bootstrap 4.1 compatible)
 * ---------------------------------------------------------------------
 * STATUS: NOT WIRED IN. This file is currently linked nowhere. It will
 *         only take effect once a <link> to it is added in metatags.php,
 *         AFTER bootstrap.min.css (a later, deliberate step). Until then
 *         it changes no behaviour and no appearance.
 *
 * PURPOSE: A safe, additive override layer that restyles existing
 *          Bootstrap 4.1 components (no markup changes, no new classes
 *          required, no Bootstrap 5 classes). Everything is driven by
 *          CSS custom properties (design tokens) defined in :root so the
 *          whole look can be retuned from one place.
 *
 * COMPATIBILITY: Bootstrap 4.1.x only. Uses BS4 selectors/utilities
 *          (.btn, .card, .badge-*, .alert-*, .navbar, .form-control,
 *          .table, .jumbotron, etc.). Does NOT use BS5 tokens such as
 *          .btn-close, .ms-/.me-, data-bs-*, .form-select, .g-*.
 *
 * ROLLBACK: remove the single <link> in metatags.php. No other file
 *          depends on this one.
 *
 * NOTE: CSS custom properties don't work in IE11. The platform already
 *       relies on modern browsers (Ionicons web components), so this is
 *       acceptable. A fallback value is paired with each var() usage
 *       where practical.
 * ===================================================================== */


/* =====================================================================
 * 1. DESIGN TOKENS
 * ---------------------------------------------------------------------
 * Single source of truth for colour, spacing, radius, shadow and type.
 * Retune the entire theme by editing values here.
 * ===================================================================== */
:root {
  /* ---- Brand & semantic colours ---- */
  --beb-red:        #C8232C;  /* brand accent (logo, brand moments)      */
  --beb-red-dark:   #A71D25;  /* brand accent hover                      */

  --primary:        #1F6FEB;  /* primary actions, links, active nav      */
  --primary-dark:   #1A5FCC;  /* primary hover/active                    */
  --primary-soft:   #E8F0FE;  /* primary tints (subtle backgrounds)      */

  --success:        #1E9E6A;  /* confirmed / complete / progress fill    */
  --success-soft:   #E6F5EE;
  --warning:        #C97A12;  /* pending / unconfirmed                   */
  --warning-soft:   #FBF1E2;
  --danger:         #C8232C;  /* destructive / errors                    */
  --danger-soft:    #FBE9EA;
  --info:           #2A8DB0;  /* informational                          */
  --info-soft:      #E6F3F8;

  /* ---- Neutrals ---- */
  --ink:            #1B1F24;  /* primary text                           */
  --muted:          #5B6470;  /* secondary text                         */
  --line:           #E5E8EC;  /* borders / dividers                     */
  --bg:             #F6F8FA;  /* app background                         */
  --surface:        #FFFFFF;  /* cards / panels                         */
  --surface-2:      #FCFDFE;  /* subtle inner surface                   */

  /* ---- Typography ---- */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head:      'Ruda', var(--font-sans); /* brand heading face     */
  --fs-base:        16px;
  --lh-base:        1.5;
  --fw-normal:      400;
  --fw-medium:      500;
  --fw-bold:        700;

  /* Type scale (matches UI_UX_PROPOSAL.md §5) */
  --fs-h1:          1.75rem;  /* 28px */
  --fs-h2:          1.5rem;   /* 24px */
  --fs-h3:          1.25rem;  /* 20px */
  --fs-h4:          1.125rem; /* 18px */
  --fs-small:       0.875rem; /* 14px */

  /* ---- Spacing scale (use instead of scattered inline margins) ---- */
  --space-1:        0.25rem;  /* 4px  */
  --space-2:        0.5rem;   /* 8px  */
  --space-3:        1rem;     /* 16px */
  --space-4:        1.5rem;   /* 24px */
  --space-5:        2rem;     /* 32px */

  /* ---- Border radius ---- */
  --radius-sm:      6px;
  --radius:         12px;     /* default card/control radius            */
  --radius-pill:    999px;    /* pills / fully rounded                  */

  /* ---- Shadows ---- */
  --shadow-sm:      0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow:         0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg:      0 12px 32px rgba(16, 24, 40, 0.12);

  /* ---- Focus ring (accessibility) ---- */
  --focus-ring:     0 0 0 0.2rem rgba(31, 111, 235, 0.35);

  /* ---- Motion ---- */
  --transition:     0.15s ease-in-out;
}


/* =====================================================================
 * 2. BASE — body & typography
 * ---------------------------------------------------------------------
 * Calm background, readable text, consistent heading face. These are
 * gentle overrides of Bootstrap's defaults; they do not alter layout.
 * ===================================================================== */
body {
  background-color: var(--bg, #F6F8FA);
  color: var(--ink, #1B1F24);
  font-family: var(--font-sans);
  font-size: var(--fs-base, 16px);
  line-height: var(--lh-base, 1.5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  color: var(--ink, #1B1F24);
  font-weight: var(--fw-bold, 700);
  line-height: 1.25;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

small, .small { font-size: var(--fs-small); }

hr { border-top-color: var(--line, #E5E8EC); }

/* Reading-friendly measure for content-heavy unit pages (opt-in class) */
.theme-readable { max-width: 72ch; }


/* =====================================================================
 * 3. LINKS
 * ---------------------------------------------------------------------
 * One accent colour for links; clear hover + accessible focus outline.
 * ===================================================================== */
a {
  color: var(--primary, #1F6FEB);
  transition: color var(--transition);
}
a:hover,
a:focus {
  color: var(--primary-dark, #1A5FCC);
}
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}


/* =====================================================================
 * 4. BUTTONS (.btn and variants)
 * ---------------------------------------------------------------------
 * Softer radius, medium weight, consistent focus ring. Re-skins the
 * existing BS4 contextual variants via the token palette.
 * ===================================================================== */
.btn {
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium, 500);
  transition: background-color var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
}
.btn:focus,
.btn.focus {
  box-shadow: var(--focus-ring);
}

/* Primary */
.btn-primary {
  background-color: var(--primary, #1F6FEB);
  border-color: var(--primary, #1F6FEB);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--primary-dark, #1A5FCC);
  border-color: var(--primary-dark, #1A5FCC);
}
.btn-outline-primary {
  color: var(--primary, #1F6FEB);
  border-color: var(--primary, #1F6FEB);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary, #1F6FEB);
  border-color: var(--primary, #1F6FEB);
  color: #fff;
}

/* Semantic */
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus { background-color: #18855A; border-color: #18855A; }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: #A9650E; border-color: #A9650E; color: #fff; }
.btn-danger  { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus { background-color: var(--beb-red-dark); border-color: var(--beb-red-dark); }
.btn-info    { background-color: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: #237A98; border-color: #237A98; }

/* Brand-accent button (opt-in, e.g. BEB-branded CTA) */
.btn-brand {
  background-color: var(--beb-red, #C8232C);
  border-color: var(--beb-red, #C8232C);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--beb-red-dark, #A71D25);
  border-color: var(--beb-red-dark, #A71D25);
  color: #fff;
}


/* =====================================================================
 * 5. CARDS (.card)
 * ---------------------------------------------------------------------
 * The core surface of the redesign: rounded, soft-shadowed, subtle
 * border, comfortable header. Used across dashboards and panels.
 * ===================================================================== */
.card {
  background-color: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.card + .card { margin-top: var(--space-3); } /* consistent vertical rhythm */

.card-header {
  background-color: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #E5E8EC);
  font-family: var(--font-head);
  font-weight: var(--fw-bold, 700);
  border-top-left-radius: var(--radius, 12px) !important;
  border-top-right-radius: var(--radius, 12px) !important;
}
.card-body { background-color: var(--surface, #fff); }
.card-footer {
  background-color: var(--surface-2, #FCFDFE);
  border-top: 1px solid var(--line, #E5E8EC);
}

/* Optional lift on interactive cards (opt-in) */
.card.card-hover:hover { box-shadow: var(--shadow); }


/* =====================================================================
 * 6. BADGES (.badge) — used for counts and status pills
 * ---------------------------------------------------------------------
 * Pill shape + readable padding. Soft status variants for task states
 * (CONFIRMED / UNCONFIRMED / EDIT) — opt-in classes, no markup forced.
 * ===================================================================== */
.badge {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium, 500);
  padding: 0.35em 0.7em;
  letter-spacing: 0.01em;
}
.badge-primary { background-color: var(--primary, #1F6FEB); }
.badge-success { background-color: var(--success); }
.badge-warning { background-color: var(--warning); color: #fff; }
.badge-danger  { background-color: var(--danger); }
.badge-info    { background-color: var(--info); color: #fff; }

/* Soft status pills (text + colour, not colour alone — a11y friendly) */
.status-pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.25em 0.75em;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium, 500);
}
.status-confirmed   { background: var(--success-soft); color: #16704C; }
.status-unconfirmed { background: var(--warning-soft); color: #8A540B; }
.status-edit        { background: var(--info-soft);    color: #1E6680; }


/* =====================================================================
 * 7. ALERTS (.alert)
 * ---------------------------------------------------------------------
 * Softer backgrounds with readable dark text (fixes the current habit
 * of forcing style="color: black" inline). Rounded to match cards.
 * ===================================================================== */
.alert {
  border-radius: var(--radius, 12px);
  border-width: 1px;
}
.alert-primary   { background: var(--primary-soft); border-color: #CFE0FC; color: #143E86; }
.alert-success   { background: var(--success-soft); border-color: #C7E9D8; color: #14613F; }
.alert-warning   { background: var(--warning-soft); border-color: #F0DBB8; color: #7A4A0A; }
.alert-danger    { background: var(--danger-soft);  border-color: #F2C9CB; color: #8A171D; }
.alert-info      { background: var(--info-soft);    border-color: #C6E5EF; color: #1B5A70; }


/* =====================================================================
 * 8. FORMS (.form-control, labels)
 * ---------------------------------------------------------------------
 * Comfortable controls, clear focus ring, full-width by default (helps
 * remove the hardcoded width:295px login inputs later). BS4 selectors
 * only — no .form-select (that is Bootstrap 5).
 * ===================================================================== */
.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--line, #E5E8EC);
  color: var(--ink, #1B1F24);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--primary, #1F6FEB);
  box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: var(--muted, #5B6470); opacity: 1; }

label,
.col-form-label {
  font-weight: var(--fw-medium, 500);
  color: var(--ink, #1B1F24);
  margin-bottom: var(--space-1);
}

/* Visually-hidden label helper (a11y: pair with inputs that only had a
   placeholder). Mirrors BS4 .sr-only without requiring markup changes
   beyond adding the class. */
.theme-label-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Opt-in responsive login field (replacement for inline width:295px) */
.login-input { width: 100%; max-width: 320px; }


/* =====================================================================
 * 9. TABLES (.table)
 * ---------------------------------------------------------------------
 * Lighter grid, comfortable rows, soft header. Keeps BS4 .table and
 * .table-bordered working; just calms the heavy borders.
 * ===================================================================== */
.table {
  color: var(--ink, #1B1F24);
}
.table thead th {
  background-color: var(--surface-2, #FCFDFE);
  border-bottom: 2px solid var(--line, #E5E8EC);
  font-weight: var(--fw-bold, 700);
  color: var(--muted, #5B6470);
  font-size: var(--fs-small);
  text-transform: none;
}
.table td,
.table th {
  border-top: 1px solid var(--line, #E5E8EC);
  vertical-align: middle;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--line, #E5E8EC);
}
.table-hover tbody tr:hover { background-color: var(--primary-soft, #E8F0FE); }

/* Existing dashboard rows use onclick navigation; give a clickable
   affordance until they are converted to real links. (Visual only.) */
tr.unit,
tr.module {
  cursor: pointer;
  transition: background-color var(--transition);
}
tr.unit:hover,
tr.module:hover { background-color: var(--primary-soft, #E8F0FE); }


/* =====================================================================
 * 10. NAVBAR (.navbar / .navigation-clean)
 * ---------------------------------------------------------------------
 * Cleaner top bar with a subtle bottom border and a soft surface.
 * Targets the existing .navigation-clean navbar used site-wide.
 * (The left-sidebar shell from the proposal is a later structural
 * phase; this just polishes the current top navbar.)
 * ===================================================================== */
.navbar.navigation-clean {
  background-color: var(--surface, #fff) !important;
  border-bottom: 1px solid var(--line, #E5E8EC);
  box-shadow: var(--shadow-sm);
}
.navbar .nav-link {
  color: var(--muted, #5B6470);
  font-weight: var(--fw-medium, 500);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.active > .nav-link {
  color: var(--primary, #1F6FEB);
  background-color: var(--primary-soft, #E8F0FE);
}


/* =====================================================================
 * 11. JUMBOTRON (login/landing panels)
 * ---------------------------------------------------------------------
 * BS4 .jumbotron is used by the login pages. Re-skin as a soft card.
 * (Removed entirely in Bootstrap 5, so this stays BS4-scoped.)
 * ===================================================================== */
.jumbotron {
  background-color: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow);
}


/* =====================================================================
 * 12. FOOTER (.footer-basic / footer)
 * ---------------------------------------------------------------------
 * Quiet footer that sits on the app background. Targets the existing
 * .footer-basic wrapper + <footer> markup in footer.php.
 * ===================================================================== */
.footer-basic,
.footer-basic footer {
  background-color: var(--bg, #F6F8FA);
  color: var(--muted, #5B6470);
}
.footer-basic a {
  color: var(--muted, #5B6470);
}
.footer-basic a:hover,
.footer-basic a:focus {
  color: var(--primary, #1F6FEB);
}
.footer-basic .copyright { color: var(--muted, #5B6470); }


/* =====================================================================
 * 13. UTILITIES (opt-in helpers — no Bootstrap 5 names)
 * ---------------------------------------------------------------------
 * Small additive helpers to start replacing inline styles later.
 * Named with a theme- prefix so they never clash with Bootstrap.
 * ===================================================================== */
.theme-shadow    { box-shadow: var(--shadow) !important; }
.theme-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.theme-rounded   { border-radius: var(--radius) !important; }
.theme-bg        { background-color: var(--bg) !important; }
.theme-surface   { background-color: var(--surface) !important; }
.theme-text-muted{ color: var(--muted) !important; }
.theme-brand     { color: var(--beb-red) !important; }

/* Simple progress bar fill colour (BS4 .progress/.progress-bar markup) */
.progress-bar { background-color: var(--primary, #1F6FEB); }
.progress-bar.bg-success { background-color: var(--success) !important; }


/* =====================================================================
 * 14. GLOBAL FOCUS-VISIBLE (accessibility safety net)
 * ---------------------------------------------------------------------
 * Ensures keyboard users always get a visible focus indicator on
 * interactive elements, without affecting mouse users.
 * ===================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* =====================================================================
 * 15. PHASE 0 — SOFTENED COLOURED CARD HEADERS
 * ---------------------------------------------------------------------
 * The trainer dashboard (tmanage.php) uses loud Bootstrap contextual
 * backgrounds on its card headers (bg-warning / bg-success / bg-info /
 * bg-secondary), and the admin consoles (admin.php / admin2.php) use an
 * inline "lightgoldenrodyellow" header. These clash with the calm new
 * theme. We soften them to the theme's tinted surfaces with readable
 * text — WITHOUT changing any page markup.
 *
 * Specificity notes:
 *  - Bootstrap's .bg-* utilities are !important, so we win with higher
 *    specificity (.card-header.bg-*) + !important. This also beats the
 *    adjacent .text-white / .text-black utilities in the markup.
 *  - The admin header's colour is an inline style; an external rule with
 *    !important beats a non-!important inline declaration, so the
 *    [style*="goldenrod"] match recolours it safely.
 * Scope is limited to .card-header, so .bg-* used elsewhere is untouched.
 * ===================================================================== */
.card-header.bg-warning {
  background-color: var(--warning-soft) !important;
  color: #7A4A0A !important;
}
.card-header.bg-success {
  background-color: var(--success-soft) !important;
  color: #14613F !important;
}
.card-header.bg-info {
  background-color: var(--info-soft) !important;
  color: #1B5A70 !important;
}
.card-header.bg-secondary {
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
}
/* Admin inline "lightgoldenrodyellow" header -> soft warning tint */
.card-header[style*="goldenrod"] {
  background-color: var(--warning-soft) !important;
  color: #7A4A0A !important;
}


/* =====================================================================
 * 16. PHASE 0 — LOGIN PAGE POLISH (theme.css only, no markup change)
 * ---------------------------------------------------------------------
 * Login forms live inside ".jumbotron > form" on index.php, login.php,
 * login2.php and trainer.php. Those inputs/buttons carry hardcoded inline
 * widths (width:295px) that don't adapt to small screens. We override
 * them to responsive sizing and tidy the spacing.
 *
 * Scope is ".jumbotron form ..." so ONLY login forms are affected — the
 * about.php jumbotron has no form and is left exactly as-is. The card
 * look of the jumbotron itself is already provided by section 11.
 * ===================================================================== */
.jumbotron form {
  width: 100%;
  max-width: 340px;        /* keeps the login card tidy and centred      */
  margin-left: auto;
  margin-right: auto;
}
.jumbotron form .form-group {
  margin-bottom: 0;
}
.jumbotron form .form-control {
  width: 100% !important;  /* overrides the inline width:295px           */
  max-width: 100% !important;
  margin-bottom: var(--space-3, 1rem);
}
.jumbotron form .btn {
  width: 100%;             /* full-width primary action on all viewports */
  margin-top: var(--space-2, 0.5rem) !important;
}


/* =====================================================================
 * 17. STUDENT DASHBOARD v1 (manage.php)
 * ---------------------------------------------------------------------
 * Styles for the modernised student dashboard: header + meta chips,
 * progress / "continue learning" card, and the course-outline list.
 * All Bootstrap 4 compatible; no JS required. Uses margins (not flex
 * `gap`) for chip spacing to maximise browser support.
 * ===================================================================== */

/* ---- Dashboard header ---- */
.dash-header { padding-top: var(--space-2, 0.5rem); }
.dash-title {
  font-size: var(--fs-h2, 1.5rem);
  margin-bottom: var(--space-1, 0.25rem);
}
.dash-subtitle {
  color: var(--muted, #5B6470);
  margin-bottom: var(--space-3, 1rem);
}
.dash-meta { display: flex; flex-wrap: wrap; }
.dash-chip {
  display: inline-flex;
  align-items: center;
  background: var(--primary-soft, #E8F0FE);
  color: var(--primary-dark, #1A5FCC);
  border-radius: var(--radius-pill, 999px);
  padding: 4px 12px;
  margin: 0 var(--space-2, 0.5rem) var(--space-2, 0.5rem) 0;
  font-size: var(--fs-small, 0.875rem);
  font-weight: var(--fw-medium, 500);
}
.dash-chip ion-icon {
  font-size: 1rem;
  margin-right: 6px;
}
/* Priority Service badge — gold accent to stand out from the blue chips. */
.dash-chip--priority {
  background: #FFF3CD;
  color: #7A5C00;
  font-weight: var(--fw-bold, 700);
}

/* ---- Progress / continue-learning card ---- */
.progress-card {
  background: var(--surface, #fff);
  border-left: 4px solid var(--primary, #1F6FEB);
  margin-bottom: var(--space-4, 1.5rem);
}
.progress-card-title {
  font-family: var(--font-head);
  margin-bottom: 2px;
}
.progress-card-sub {
  color: var(--muted, #5B6470);
  margin-bottom: var(--space-2, 0.5rem);
}
.dash-progress {
  height: 16px;
  border-radius: var(--radius-pill, 999px);
  background: var(--line, #E5E8EC);
}
.dash-progress .progress-bar {
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  background-color: var(--success, #1E9E6A); /* green = achievement */
  transition: width 0.4s ease;
}
.btn-continue ion-icon { vertical-align: -2px; margin-right: 4px; }

/* ---- Course outline (replaces the old onclick table) ---- */
.course-outline.list-group { border-radius: var(--radius, 12px); overflow: hidden; }
.course-outline .list-group-item {
  display: flex;
  align-items: center;
  border-color: var(--line, #E5E8EC);
  transition: background-color var(--transition);
}
/* Unit rows: emphasised header style */
.course-outline .outline-unit {
  background: var(--primary-soft, #E8F0FE);
  font-family: var(--font-head);
}
.course-outline .outline-unit:hover,
.course-outline .outline-unit:focus {
  background: #D8E6FD;
}
.course-outline .outline-unit .outline-tag { color: var(--primary-dark, #1A5FCC); }
/* Module rows: indented under their unit */
.course-outline .outline-module { padding-left: var(--space-4, 1.5rem); }
/* Shared parts */
.outline-tag {
  flex: 0 0 auto;
  min-width: 82px;
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-small, 0.875rem);
  color: var(--muted, #5B6470);
}
.outline-title {
  flex: 1 1 auto;
  color: var(--ink, #1B1F24);
  padding-right: var(--space-2, 0.5rem);
}
.outline-arrow {
  flex: 0 0 auto;
  color: var(--muted, #5B6470);
  font-size: 1.1rem;
}
.course-outline .list-group-item-action:hover .outline-arrow,
.course-outline .list-group-item-action:focus .outline-arrow {
  color: var(--primary, #1F6FEB);
}

/* Small screens: let the tag/title wrap comfortably */
@media (max-width: 575.98px) {
  .outline-tag { min-width: 64px; font-size: 0.8rem; }
  .course-outline .outline-module { padding-left: var(--space-3, 1rem); }
}


/* =====================================================================
 * 18. COURSE / UNIT & MODULE PAGES v1
 * ---------------------------------------------------------------------
 * Shared styling for unitN.php (overviews) and unitXmY.php (modules).
 * These pages all use the same skeleton: #info-row (student/level meta),
 * #title-row (unitTxt/unitTxtInfo/moduleTxt/moduleTxtInfo headings) and
 * #content-row (a Bootstrap-tabs "lesson reader" on module pages, or a
 * description + module list on overview pages).
 *
 * Everything here is presentational and Bootstrap-4 compatible. Selectors
 * are scoped to the course page ids/classes so other screens (and the
 * trainer/admin pages) are unaffected. No markup or JS is required for
 * these rules to take effect — they restyle the existing structure.
 * ===================================================================== */

/* ---- Student / level meta line (#info-row) ----
 * Rendered as a subordinate meta line: smaller, muted, and clearly
 * separated from the top navigation above and the page title below.
 * The vertical spacing is scoped to the course/module student row only
 * (it carries an inline `height:45px`), so the dashboard #info-row is
 * left untouched. CSS-only; no markup or logic changes. */
#info-row .col {
  color: var(--muted, #5B6470);
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.4;
}
#info-row b {
  color: var(--ink, #1B1F24);
  font-weight: var(--fw-medium, 500);
}
/* Push the student/access-level row down from the navbar and give it
   breathing room before the page title (course & module pages only). */
#info-row .col[style*="height:45px"] {
  margin-top: var(--space-4, 1.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  padding-top: var(--space-1, 0.25rem);
  border-bottom: 1px solid var(--line, #E5E8EC);
}

/* ---- Breadcrumb (BS4 .breadcrumb, opt-in .course-breadcrumb) ---- */
.course-breadcrumb.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-3, 1rem);
  font-size: var(--fs-small, 0.875rem);
}
.course-breadcrumb .breadcrumb-item a { color: var(--primary, #1F6FEB); }
.course-breadcrumb .breadcrumb-item.active { color: var(--muted, #5B6470); }

/* ---- Title hierarchy (#title-row) ---- */
#title-row .unitTxt {
  font-size: var(--fs-h1, 1.75rem);
  margin-bottom: 2px;
}
#title-row .unitTxtInfo {
  color: var(--muted, #5B6470);
  font-weight: var(--fw-normal, 400);
  margin-bottom: var(--space-2, 0.5rem);
}
#title-row .moduleTxt {
  display: inline-block;
  color: var(--primary-dark, #1A5FCC);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-h4, 1.125rem);
  margin-top: var(--space-2, 0.5rem);
}
#title-row .moduleTxtInfo {
  color: var(--muted, #5B6470);
  font-weight: var(--fw-normal, 400);
  font-size: var(--fs-h4, 1.125rem);
}

/* ---- Modern tab bar = lesson reader (scoped to #content-row) ---- */
#content-row .nav-tabs {
  border-bottom: 2px solid var(--line, #E5E8EC);
  flex-wrap: wrap;
}
#content-row .nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted, #5B6470);
  font-weight: var(--fw-medium, 500);
  border-radius: 0;
  padding: 0.6rem 1rem;
}
#content-row .nav-tabs .nav-link:hover {
  color: var(--primary, #1F6FEB);
  border-bottom-color: var(--primary-soft, #E8F0FE);
}
#content-row .nav-tabs .nav-link.active {
  color: var(--primary-dark, #1A5FCC);
  background: transparent;
  border-bottom-color: var(--primary, #1F6FEB);
}

/* ---- Readable lesson content (scoped to #content-row .tab-content) ---- */
#content-row .tab-content {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-top: none;
  border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
  padding: var(--space-4, 1.5rem);
}
#content-row .tab-content p,
#content-row .tab-content li {
  font-size: 1rem;
  line-height: 1.7;
}
#content-row .tab-content p { margin-bottom: var(--space-3, 1rem); max-width: 72ch; }

/* Inline sub-headers used throughout module content */
.greenHeader,
.redHeader {
  font-family: var(--font-head);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-h3, 1.25rem);
  margin: var(--space-3, 1rem) 0 var(--space-2, 0.5rem);
}
.greenHeader { color: var(--success, #1E9E6A); }
.redHeader { color: var(--danger, #C8232C); }
.graySubHeader {
  font-weight: var(--fw-bold, 700);
  color: var(--muted, #5B6470);
  font-size: var(--fs-h4, 1.125rem);
  margin: var(--space-3, 1rem) 0 var(--space-2, 0.5rem);
}

/* "Next" + end-of-module task CTA read as learning-step actions */
#content-row .tab-content .btnNext {
  margin-top: var(--space-3, 1rem);
  color: #fff !important;
}

/* ---- Unit overview pages: intro block + learning-step list ---- */
.unit-intro {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-left: 4px solid var(--primary, #1F6FEB);
  border-radius: var(--radius, 12px);
  padding: var(--space-4, 1.5rem);
  margin-bottom: var(--space-4, 1.5rem);
}
.unit-intro p:last-child { margin-bottom: 0; }

.learning-steps { list-style: none; padding-left: 0; margin-bottom: var(--space-4, 1.5rem); }
.learning-steps .step {
  display: flex;
  align-items: flex-start;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-radius: var(--radius, 12px);
  padding: var(--space-3, 1rem);
  margin-bottom: var(--space-2, 0.5rem);
}
.learning-steps .step-num {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft, #E8F0FE);
  color: var(--primary-dark, #1A5FCC);
  border-radius: 50%;
  font-weight: var(--fw-bold, 700);
  margin-right: var(--space-3, 1rem);
}
.learning-steps .step-body { flex: 1 1 auto; }
.learning-steps .step-title { font-weight: var(--fw-bold, 700); color: var(--ink, #1B1F24); }
.learning-steps .step-meta { color: var(--muted, #5B6470); font-size: var(--fs-small, 0.875rem); }

/* ---- Modernise the existing warning-tinted lists on overview pages ----
 * unit2.php–unit5.php list their modules/objectives as
 * .list-group-item-warning (a loud yellow). We recolour them in place to
 * calm "learning step" cards with a primary accent bar — NO markup change
 * needed, so every overview page is upgraded consistently. Scoped to
 * #content-row so contextual list-group colours elsewhere are untouched. */
#content-row .list-group-item-warning {
  background-color: var(--surface, #fff);
  border-color: var(--line, #E5E8EC);
  border-left: 3px solid var(--primary, #1F6FEB);
  color: var(--ink, #1B1F24);
}
#content-row .list-group-item-warning small { color: var(--muted, #5B6470); }

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  #content-row .tab-content { padding: var(--space-3, 1rem); }
  #content-row .nav-tabs .nav-link { padding: 0.5rem 0.65rem; font-size: var(--fs-small, 0.875rem); }
  #title-row .unitTxt { font-size: var(--fs-h2, 1.5rem); }
}


/* =====================================================================
 * 19. TASK PAGES v1 (unit*m*t*.php)
 * ---------------------------------------------------------------------
 * Presentational layer for the student task pages. The answer forms are
 * generated in PHP and use a stable set of classes/ids:
 *   #Questions      wrapper around the task body/forms
 *   .taskTxt        the "Task N" heading
 *   .alert-primary  the task instructions callout
 *   .question       each question prompt (acts like a field label)
 *   .answers        a submitted answer shown back for feedback
 *   .form-control   inputs / textareas / file inputs
 *   .btn-info / .btn-success   submit buttons
 *   #uploadModal / #preview    the file-upload task (unit3m4t1.php)
 * Everything here is CSS-only and scoped to those task-page hooks, so no
 * markup, submission logic, routing, or _chk.php behaviour is affected.
 * Bootstrap 4 compatible.
 * ===================================================================== */

/* ---- Task number badge ---- */
#title-row .taskTxt {
  display: inline-block;
  background: var(--primary, #1F6FEB);
  color: #fff;
  font-family: var(--font-head);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-small, 0.875rem);
  letter-spacing: 0.02em;
  padding: 4px 14px;
  border-radius: var(--radius-pill, 999px);
  margin-top: var(--space-2, 0.5rem);
}

/* ---- Readable task column on wide screens ---- */
#content-row #Questions { max-width: 820px; }

/* ---- Instructions callout ---- */
#Questions .alert-primary {
  border-left: 4px solid var(--primary, #1F6FEB);
  font-size: 1rem;
}

/* ---- Question prompts read as field labels ---- */
#Questions .question {
  font-weight: var(--fw-medium, 500);
  color: var(--ink, #1B1F24);
  margin-top: var(--space-3, 1rem);
  margin-bottom: var(--space-1, 0.25rem);
}

/* ---- Submitted answers (feedback view) read as quoted blocks ---- */
#Questions .answers {
  background: var(--surface-2, #FCFDFE);
  border: 1px solid var(--line, #E5E8EC);
  border-left: 3px solid var(--success, #1E9E6A);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 0.5rem) var(--space-3, 1rem);
  color: var(--ink, #1B1F24);
}

/* ---- Inputs & textareas: consistent spacing + comfortable textareas ---- */
#Questions .form-control { margin-bottom: var(--space-2, 0.5rem); }
#Questions textarea.form-control { min-height: 120px; line-height: 1.6; }

/* ---- Submit buttons: keep contextual colour, ensure consistency ---- */
#Questions .btn-info,
#Questions .btn-success {
  color: #fff !important;
  margin-top: var(--space-2, 0.5rem);
}

/* ---- File-upload task (unit3m4t1.php): modal + preview polish ---- */
#uploadModal .modal-content { border-radius: var(--radius, 12px); }
#Questions input[type="file"].form-control { height: auto; padding: var(--space-2, 0.5rem); }
#preview img {
  border: 1px solid var(--line, #E5E8EC);
  border-radius: var(--radius-sm, 6px);
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  #content-row #Questions { max-width: 100%; }
  #title-row .taskTxt { font-size: 0.8rem; }
}


/* =====================================================================
 * 20. TRAINER & ADMIN v1
 * ---------------------------------------------------------------------
 * Visual polish for the staff screens: tmanage.php, taskAssessment.php,
 * notifications.php, tmessages.php, admin.php, admin2.php. These pages
 * already reuse cards/tables/badges/alerts/modals (styled in earlier
 * sections) and their bg-* / inline "goldenrod" card headers are softened
 * by section 15. This section refines the staff-specific structures.
 * CSS-only; no markup/logic/SQL/route changes.
 * ===================================================================== */

/* ---- Page heading (some staff pages put the H3 straight in #main) ----
 * Give it real breathing room from the navbar so it reads as the start of
 * the content area (mirrors the student dashboard's top spacing). */
/* Base `.unitTxt` (styles.css) is display:inline, so vertical margins were
 * ignored. Make the trainer dashboard welcome heading a block so it gets
 * real breathing room from the navbar. Scoped to a direct #main child, which
 * is unique to the trainer dashboard (student/course pages put their heading
 * inside #title-row, not directly in #main). */
#main > h3.unitTxt {
  /* base .unitTxt is display:inline; make it block so it lays out as a heading.
   * Vertical spacing is now driven by Bootstrap utilities in tmanage.php's
   * markup (`.container.pt-5` on #main + `.mb-4` on the heading), which work
   * even if this stylesheet is cached/not yet redeployed and cannot
   * margin-collapse. So this rule intentionally adds NO top spacing itself. */
  display: block;
}

/* ---- taskAssessment.php: unit/module section-header rows ---- */
.units-title td {
  background: var(--primary-soft, #E8F0FE);
  color: var(--primary-dark, #1A5FCC);
  font-family: var(--font-head);
  border-top: none !important;
}
.modules-title td {
  background: var(--surface-2, #FCFDFE);
  color: var(--muted, #5B6470);
}
/* status icons (Unconfirmed/Confirmed/Edit/Not done) align nicely */
#content-row ion-icon { vertical-align: -2px; }

/* ---- notifications.php: soften the inline "priority" row highlight ---- */
tr[style*="PaleGoldenrod"] {
  background-color: var(--warning-soft, #FBF1E2) !important;
}

/* ---- tmessages.php: message accordion ---- */
.accordion .card-header { padding: 0; }
.accordion .card-header .btn-link {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  text-decoration: none;
  color: var(--ink, #1B1F24);
  font-weight: var(--fw-medium, 500);
  padding: 0.75rem 1.25rem;
}
.accordion .card-header .btn-link:hover { color: var(--primary, #1F6FEB); }

/* ---- Staff modals (compose / reply / student detail) ---- */
#ComposeModal .modal-content,
#ReplyModal .modal-content,
#resultModal .modal-content { border-radius: var(--radius, 12px); }
#ComposeModal .modal-header,
#ReplyModal .modal-header,
#resultModal .modal-header {
  background: var(--surface-2, #FCFDFE);
  border-top-left-radius: var(--radius, 12px);
  border-top-right-radius: var(--radius, 12px);
}

/* ---- Trainer/admin tables: keep action buttons tidy on small screens ---- */
#main .table .btn-sm { white-space: nowrap; }

/* ---- Round 3: neutralise the legacy global black row border ----
 * styles.css declares `tr { border: 1px solid #000; }`, which shows through
 * as harsh black lines (especially once cell borders are removed). Recolour
 * every table row to the soft theme divider. */
.table tr { border-color: var(--line, #E5E8EC); }

/* ---- Round 3: trainer dashboard panels -> clean light dividers ----
 * Cards are identified by their coloured bg-* header, so the student
 * dashboard panels (plain headers) are left untouched. Replaces the old
 * bordered-grid look with soft horizontal dividers only. */
.card-header.bg-success ~ .card-body .table,
.card-header.bg-info ~ .card-body .table,
.card-header.bg-secondary ~ .card-body .table,
.card-header.bg-warning ~ .card-body .table { margin-bottom: 0; }
.card-header.bg-success ~ .card-body .table tr,
.card-header.bg-info ~ .card-body .table tr,
.card-header.bg-secondary ~ .card-body .table tr,
.card-header.bg-warning ~ .card-body .table tr { border: 0; }
.card-header.bg-success ~ .card-body .table td,
.card-header.bg-info ~ .card-body .table td,
.card-header.bg-secondary ~ .card-body .table td,
.card-header.bg-warning ~ .card-body .table td,
.card-header.bg-success ~ .card-body .table th,
.card-header.bg-info ~ .card-body .table th,
.card-header.bg-secondary ~ .card-body .table th,
.card-header.bg-warning ~ .card-body .table th {
  border: 0;
  border-bottom: 1px solid var(--line, #E5E8EC);
  padding: 0.55rem 0.5rem;
  vertical-align: middle;
}
.card-header.bg-success ~ .card-body .table tr:last-child td,
.card-header.bg-info ~ .card-body .table tr:last-child td,
.card-header.bg-secondary ~ .card-body .table tr:last-child td,
.card-header.bg-warning ~ .card-body .table tr:last-child td { border-bottom: 0; }

/* ---- Round 2: notifications table — readability + clickable deep-links --- */
.notif-table td { font-size: 0.95rem; vertical-align: middle; }
.notif-table td small { font-size: 0.95rem; }
.notif-table thead th {
  font-size: var(--fs-small, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.notif-table a.notif-link {
  color: var(--ink, #1B1F24);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
}
.notif-table a.notif-link:hover { color: var(--primary, #1F6FEB); text-decoration: underline; }

/* ---- Round 3: notifications table inside its card = soft dividers ---- */
.notif-table { margin-bottom: 0; }
.notif-table td,
.notif-table th { border: 0; border-bottom: 1px solid var(--line, #E5E8EC); }
.notif-table thead th { border-bottom: 2px solid var(--line, #E5E8EC); }
.notif-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Round 3: Message Center (Inbox / Sent) ---- */
.msg-nav { margin-bottom: var(--space-3, 1rem); }
.msg-nav .nav-link { font-weight: var(--fw-medium, 500); }
.msg-accordion .card { margin-bottom: var(--space-2, 0.5rem); }
.msg-accordion .card-header .btn-link .msg-cols { width: 100%; }
.msg-accordion .card-header .btn-link .msg-cols .msg-from { font-weight: var(--fw-bold, 700); }
.msg-accordion .card-header .btn-link .msg-cols .msg-meta { color: var(--muted, #5B6470); font-size: var(--fs-small, 0.875rem); }


/* =====================================================================
 * 21. LOGIN PAGES v1 (index.php, trainer.php, login.php, login2.php)
 * ---------------------------------------------------------------------
 * The login form lives in `.jumbotron.login-card`. Scoped via the
 * `.login-card` class so the about.php jumbotron (no form) is untouched.
 * Goal: a modern, centred authentication panel with breathing room from
 * the navbar, a brand accent, comfortable inputs and a full-width button.
 * Builds on the generic `.jumbotron` (section 11) and login form sizing
 * (section 16); section order means these rules win where they overlap.
 * CSS-only behaviour; markup change was limited to adding the class.
 * ===================================================================== */

.login-card.jumbotron {
  max-width: 460px;
  margin: var(--space-5, 2rem) auto var(--space-4, 1.5rem); /* space from navbar + centred */
  padding: var(--space-5, 2rem) var(--space-5, 2rem) var(--space-4, 1.5rem);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-top: 4px solid var(--beb-red, #C8232C);            /* brand accent links header -> card */
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 4px 14px rgba(16, 24, 40, 0.08));
}

/* Title + supportive subtitle */
.login-card .beb-header-text,
.login-card .lead {
  text-align: center;
  margin-bottom: var(--space-2, 0.5rem);
}
.login-card .lead { font-weight: var(--fw-bold, 700); color: var(--ink, #1B1F24); }
.login-card > p,
.login-card .login-subtitle {
  text-align: center;
  color: var(--muted, #5B6470);
  font-size: var(--fs-small, 0.875rem);
  margin-bottom: var(--space-4, 1.5rem);
}

/* Inputs + button fill the card for a modern auth-panel look */
.login-card form {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.login-card .form-control {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: var(--space-3, 1rem);
}
.login-card .btn {
  width: 100%;
  margin-top: var(--space-1, 0.25rem);
}

/* The "Learn more at ..." line under the card */
#main > .text-center {
  margin-top: var(--space-3, 1rem);
  color: var(--muted, #5B6470);
  font-size: var(--fs-small, 0.875rem);
}

/* Logout / success alert (echoed as a direct child of <body> on login
   pages): keep it tidy and clear of the navbar. */
body > .alert {
  max-width: 560px;
  margin: var(--space-3, 1rem) auto 0;
  border-radius: var(--radius, 12px);
}

/* ---- About page content card (about.php) ----
 * Same family as the login card, but a readable content width instead of a
 * narrow auth panel. Scoped via `.about-card`. */
.about-card.jumbotron {
  max-width: 820px;
  margin: var(--space-5, 2rem) auto var(--space-4, 1.5rem);
  padding: var(--space-5, 2rem);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E8EC);
  border-top: 4px solid var(--beb-red, #C8232C);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 4px 14px rgba(16, 24, 40, 0.08));
}
.about-card .beb-header-text {
  display: block;
  text-align: center;
  margin-bottom: var(--space-4, 1.5rem);
}
.about-card .lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink, #1B1F24);
}
.about-card p { margin-bottom: var(--space-3, 1rem); }
.about-card a { font-weight: var(--fw-medium, 500); }

/* Mobile */
@media (max-width: 575.98px) {
  .login-card.jumbotron {
    margin: var(--space-4, 1.5rem) var(--space-2, 0.5rem) var(--space-3, 1rem);
    padding: var(--space-4, 1.5rem);
  }
  .about-card.jumbotron {
    margin: var(--space-4, 1.5rem) var(--space-2, 0.5rem) var(--space-3, 1rem);
    padding: var(--space-4, 1.5rem);
  }
}


/* ===================================================================== *
 * END theme.css — ACTIVE (linked in metatags.php after styles.css).     *
 * ===================================================================== */