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

.badge-pending, .badge-not_started, .badge-not_required, .badge-draft { background: #eee; color: #555; }
.badge-paid, .badge-passed, .badge-published { background: rgba(58,110,66,0.15); color: #3A6E42; }
.badge-failed, .badge-rejected { background: rgba(122,46,46,0.12); color: var(--oxblood); }
.badge-in_progress { background: rgba(176,141,87,0.15); color: #7a5c26; }

.dashboard-course-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--ink-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(--ink-60); font-size: 0.85rem; }
.text-muted-sm  { color: var(--ink-60); font-size: 0.8rem; }
.text-error     { color: var(--oxblood); }
.hint-text      { font-size: 0.8rem; color: var(--ink-60); margin: 0.35rem 0 0; }
.field-note     { font-size: 0.8rem; color: var(--ink-60); margin: 0 0 0.5rem; }
.mono-label     { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-60); }
.mono-text-sm   { font-family: var(--font-mono); 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: 600; margin: 0 0 0.5rem; }
.card-title-tight { font-weight: 600; margin: 0 0 0.25rem; }
.applicant-email  { color: var(--ink-60); font-size: 0.85rem; margin: 0 0 0.75rem; }

/* 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(--oxblood); }
.link-button-restore { color: #3A6E42; }
.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(--ink-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(--ink-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(--ink-15); }
.verify-table th { width: 140px; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-60); }

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

.progress-bar {
  width: 200px;
  max-width: 100%;
  height: 0.6rem;
  background: var(--ink-15, #e5e0d5);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0 0.2rem;
}
.progress-bar-fill {
  height: 100%;
  background: #3A6E42;
  border-radius: 999px;
  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%; }