/* LMS-specific additions on top of assets/css/style.css's design tokens.
   Kept separate so the base stylesheet stays a straight carry-over. */

/* GKA [V1], Phase 8 (Performance, Accessibility & Compliance Pass): the
   neutral badge grey was #555 on #eee -- 6.43:1, solid WCAG AA but
   short of the AAA target §10 of the system spec specifies. #484848 on
   the same #eee clears 7.88:1. Not a CSS variable (this pairing is
   standalone, unrelated to the shared token set in style.css), so
   fixed directly here rather than through a token change.

   The green/red badge tint backgrounds below were also fixed this
   phase, for a subtler reason worth naming: they'd been hand-typed as
   raw rgba() triplets matching the OLD --success/--error hex values
   even after this phase's earlier token-value updates (style.css)
   changed what var(--success)/var(--error) actually render as -- the
   `color:` half of each rule already picked up the new, darker values
   automatically, but the `background:` half stayed pinned to numbers
   copied from the old hex, silently drifting out of sync with the
   text color sitting on top of it. Recomputed against the ACTUAL
   current --success/--error values, both tints also needed a lower
   alpha (0.10, down from 0.15/0.12) than before -- a darker text color
   needs a lighter background to keep the same contrast ratio, not the
   same background as before. */
.badge-pending, .badge-not_started, .badge-not_required, .badge-draft { background: #eee; color: #484848; }
.badge-paid, .badge-passed, .badge-published, .badge-active, .badge-completed { background: rgba(45,86,51,0.10); color: var(--success); }
.badge-failed, .badge-rejected, .badge-entrance_test_failed { background: rgba(147,32,36,0.10); color: var(--error); }

/* Capstone application pipeline -- LMS-Upgraded V1, Phase 2. Reuses the
   same three-bucket semantics as above rather than inventing new colors:
   grey while nothing actionable has happened yet, green once the
   applicant has cleared a step, red only for a hard fail/rejection. */
.badge-applied, .badge-fee_pending, .badge-entrance_test_pending, .badge-under_review { background: #eee; color: #484848; }
.badge-fee_paid, .badge-entrance_test_passed, .badge-approved { background: rgba(45,86,51,0.10); color: var(--success); }

/* Capstone gradebook -- LMS-Upgraded V1, Phase 3a. Same three-bucket
   reuse as the application-status badges above. */
.badge-pass { background: rgba(45,86,51,0.10); color: var(--success); }
.badge-fail { background: rgba(147,32,36,0.10); color: var(--error); }
/* LMS-Upgraded V1, Phase 2 (Design System Foundation): this used to be
   a raw rgba(176,141,87,...) / #7a5c26 pair -- 176,141,87 is exactly
   the old --gilt token's hex (#B08D57) hand-copied as an RGB triplet,
   even though --gilt itself was never referenced anywhere via var().
   Now genuinely tied to the new --gold token instead of a magic number
   nothing else points to. */
.badge-in_progress { background: rgba(194,155,12,0.15); color: var(--gold-dark); }

.dashboard-course-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--charcoal-15); gap: 1rem; flex-wrap: wrap;
}
.dashboard-course-row h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.35rem; }

.module-list li { margin-bottom: 0.5rem; }
.module-content h1, .module-content h2, .module-content h3 { margin-top: 1.5rem; }
.module-content ul { padding-left: 1.3rem; }

/* --------------------------------------------------------------------
   Utility classes replacing every inline style="" attribute across the
   codebase. This is what lets CSP's style-src drop 'unsafe-inline'
   entirely (see .htaccess) -- a handful of small, reused classes here
   instead of one-off styling scattered through every template file.
   -------------------------------------------------------------------- */

/* Spacing */
.m-0     { margin: 0; }
.mt-05   { margin-top: 0.5rem; }
.mt-1    { margin-top: 1rem; }
.mt-1-5  { margin-top: 1.5rem; }
.mt-2    { margin-top: 2rem; }
.mb-075  { margin-bottom: 0.75rem; }
.mb-1    { margin-bottom: 1rem; }
.pt-1-5  { padding-top: 1.5rem; }

/* Layout */
.full-width   { grid-column: 1 / -1; }
.inline-block { display: inline; }
.inline-flex  { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Text */
.text-muted     { color: var(--charcoal-muted); font-size: 0.85rem; }
.text-muted-sm  { color: var(--charcoal-muted); font-size: 0.8rem; }
.text-error     { color: var(--error); }
.hint-text      { font-size: 0.8rem; color: var(--charcoal-muted); margin: 0.35rem 0 0; }
.field-note     { font-size: 0.8rem; color: var(--charcoal-muted); margin: 0 0 0.5rem; }
.mono-label     { font-family: var(--font-label); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--charcoal-muted); }
.mono-text-sm   { font-family: var(--font-label); font-size: 0.8rem; }
.error-list     { margin: 0; padding-left: 1.1rem; }
.tight-list     { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.card-title       { font-weight: 700; margin: 0 0 0.5rem; }
.card-title-tight { font-weight: 700; margin: 0 0 0.25rem; }
.applicant-email  { color: var(--charcoal-muted); font-size: 0.85rem; margin: 0 0 0.75rem; }

/* Editorial serif -- LMS-Upgraded V1, Phase 2 (Design System
   Foundation). Not applied anywhere in the LMS's own utilitarian UI
   yet -- reserved for the marketing site's long-form editorial content
   (About/Philosophy prose, blog articles, pull-quotes) in a later
   phase. Declared here now, alongside the rest of the type system,
   rather than invented ad hoc once that phase starts. */
.font-serif     { font-family: var(--font-serif); }

/* Buttons that look like plain text links (delete/archive/logout) */
.link-button         { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.link-button-sm      { font-size: 0.85rem; }
.link-button-danger  { color: var(--error); }
.link-button-restore { color: var(--success); }
.btn-reset-border    { border: none; cursor: pointer; }
.btn-sm              { font-size: 0.85rem; padding: 0.4rem 0.9rem; }

/* Form elements */
.option-label   { display: block; font-weight: 400; margin-bottom: 0.6rem; font-size: 1rem; }
.checkbox-label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; font-weight: 400; }
.color-swatch-input { width: 5rem; height: 2.5rem; padding: 0.2rem; }

/* Images */
.md-image     { max-width: 100%; height: auto; } /* Markdown-rendered images, core/markdown.php */
.logo-preview { max-height: 60px; } /* admin/branding.php logo preview */

/* Components */
.review-card { border: 1px solid var(--charcoal-15); padding: 1rem; margin-bottom: 1rem; background: #fff; }

.bulk-actions-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--charcoal-15);
}

.verify-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.verify-table th, .verify-table td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--charcoal-15); }
.verify-table th { width: 140px; font-family: var(--font-label); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-muted); }

.pagination { margin-top: 1rem; display: flex; gap: 0.5rem; }
.pagination .active { font-weight: 700; text-decoration: underline; }

/* Dashboard progress bars -- discrete 5% steps rather than an
   inline style, since CSP's style-src has no unsafe-inline exception.

   LMS-Upgraded V1, Phase 2 (Design System Foundation): square corners
   (border-radius removed) -- the new brand's "border-only depth, no
   soft/rounded shapes" principle applies here too, not just to cards
   and buttons. A crisp-edged bar reads as more institutional/ledger-
   like, which fits this brand better than the pill shape did. */
.progress-bar {
  width: 200px;
  max-width: 100%;
  height: 0.6rem;
  background: var(--charcoal-15);
  overflow: hidden;
  margin: 0.4rem 0 0.2rem;
}
.progress-bar-fill {
  height: 100%;
  background: var(--success);
  transition: width 0.3s ease;
}
.progress-0 { width: 0%; }
.progress-5 { width: 5%; }
.progress-10 { width: 10%; }
.progress-15 { width: 15%; }
.progress-20 { width: 20%; }
.progress-25 { width: 25%; }
.progress-30 { width: 30%; }
.progress-35 { width: 35%; }
.progress-40 { width: 40%; }
.progress-45 { width: 45%; }
.progress-50 { width: 50%; }
.progress-55 { width: 55%; }
.progress-60 { width: 60%; }
.progress-65 { width: 65%; }
.progress-70 { width: 70%; }
.progress-75 { width: 75%; }
.progress-80 { width: 80%; }
.progress-85 { width: 85%; }
.progress-90 { width: 90%; }
.progress-95 { width: 95%; }
.progress-100 { width: 100%; }