/* ============================================================
   HSE.Swiss LMS — brand theme
   simpleelearningbetaforkdesign @ beta

   Beta already declares the full palette in public/css/style.css
   (:root), including the functional colours from
   brandguidelines/LMS Function Colours.html — with the note
   "Not yet wired into components beyond --brand-primary/-dark
   and --brand-danger/-dark".

   This file finishes that wiring and clears the leftovers from
   before the palette landed (#2ecc71, #9b59b6, #e67e22, #f39c12,
   #2c3e50, #27ae60, #4caf50, and a stray rgba(52,152,219) focus
   ring in bundle.css).

   Load LAST, after style.css, viewslatte/*.css and any
   page-level $extra_css:

     <link rel="stylesheet" href="/css/lms-theme.css">

   in viewslatte/layout.latte, layout-bare.latte and the
   standalone learner pages (course-view, course-intro,
   course-complete, course-results, bundle-*).
   ============================================================ */

:root {
  /* ---- Neutral ramp -------------------------------------------------
     Derived from the brand's own white ramp (#FAFAF9 / #F2F1EF), which
     is warm — so the greys are warm too. Replaces #2c3e50 / #7f8c8d /
     #95a5a6 / #6c757d / #f4f4f4. */
  --lms-ink:          var(--brand-black-soft);   /* #2B2B2B headings */
  --lms-ink-2:        #56534E;                   /* body */
  --lms-ink-3:        #6E6A65;                   /* meta, labels — 4.6:1 on white (AA) */
  --lms-line:         #E4E2DE;                   /* hairlines */
  --lms-line-strong:  #CFCCC7;                   /* input & button borders */
  --lms-surface:      var(--brand-white);        /* #FFFFFF */
  --lms-bg:           var(--brand-white-off);    /* #FAFAF9 page ground */
  --lms-bg-sunk:      var(--brand-white-grey);   /* #F2F1EF table heads, wells */

  /* ---- Shape --------------------------------------------------------
     Beta currently ships 4px (.btn), 6px (.btn-start), 8px (.att-btn,
     .login-body input), 10px (.stat-pill), 12px (.progress-card),
     16px (.login-card) and 50px (.badge). Two values instead. */
  --lms-radius:       6px;
  --lms-radius-card:  10px;

  --lms-focus:        0 0 0 3px rgba(29,133,125,.28);
  --lms-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Control heights */
  --lms-h:            40px;   /* learner-facing */
  --lms-h-sm:         32px;   /* admin tables and toolbars */
  --lms-h-lg:         48px;   /* full-width mobile actions */
}

/* ============================================================
   1. FUNCTIONAL COLOUR — the rule
   ------------------------------------------------------------
   A functional colour identifies an OBJECT or a VERB. It is
   carried on the ICON, everywhere that object appears, and on
   the CONFIRM BUTTON inside that action's own modal. It never
   becomes the fill of a routine button — otherwise six hues
   compete on one screen and none of them means anything.

     --brand-edit    #386CA0  edit, modify, participants
     --brand-result  #D9B24F  results, reports, scores
     --brand-copy    #9D486C  copy/duplicate, certificate review
     --brand-email   #876F59  email and messaging
     --brand-bundle  #725195  bundles
     --brand-delete  #A8351B  destructive
     --brand-green   #37634C  passed / complete (outcome, never an action)
     --brand-primary #1D857D  the primary action itself
   ============================================================ */

.fc-edit   { color: var(--brand-edit); }
.fc-result { color: var(--brand-result-deep); }   /* #D9B24F fails contrast on white */
.fc-copy   { color: var(--brand-copy); }
.fc-email  { color: var(--brand-email); }
.fc-bundle { color: var(--brand-bundle); }
.fc-delete { color: var(--brand-delete); }
.fc-done   { color: var(--brand-green); }

/* Confirm button inside an action's own modal */
.btn-fn-copy   { background: var(--brand-copy)   !important; color: #fff !important; border: 0; }
.btn-fn-copy:hover   { background: var(--brand-copy-deep)   !important; }
.btn-fn-email  { background: var(--brand-email)  !important; color: #fff !important; border: 0; }
.btn-fn-email:hover  { background: var(--brand-email-deep)  !important; }
.btn-fn-bundle { background: var(--brand-bundle) !important; color: #fff !important; border: 0; }
.btn-fn-bundle:hover { background: var(--brand-bundle-deep) !important; }

/* Page-header rule marking which object you are inside */
.fn-rule-edit   { border-left: 2px solid var(--brand-edit); }
.fn-rule-result { border-left: 2px solid var(--brand-result); }
.fn-rule-copy   { border-left: 2px solid var(--brand-copy); }
.fn-rule-email  { border-left: 2px solid var(--brand-email); }
.fn-rule-bundle { border-left: 2px solid var(--brand-bundle); }

/* ---------- 2. Base ------------------------------------------------ */

body {
  font-family: var(--lms-font);
  color: var(--lms-ink-2);
  background-color: var(--lms-bg);
}
/* bundle.css and the standalone learner pages set Arial + their own bg */
body, body[style] { background: var(--lms-bg); font-family: var(--lms-font); }

h1, h2, h3, h4 { color: var(--lms-ink); font-weight: 500; }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-teal-deep); }

/* ---------- 3. Header ---------------------------------------------- */
/* style.css sets header { background: var(--brand-primary-dark) } — a
   solid green slab under an 84px logo. White with one hairline is the
   light option, and beta already ships the dark and teal logo artwork
   (brandguidelines/LMS Logo - Black@3x.png, - Teal@3x.png) that a white
   header needs. Point $BRAND_ASSET_PATH/logo.png at one of those.
   To keep the green header instead, delete this block only. */

header {
  background: var(--lms-surface);
  color: var(--lms-ink);
  border-bottom: 1px solid var(--lms-line);
  margin-bottom: 2rem;
}

.brand-logo { height: 40px; }        /* was 84px on the old icon+wordmark asset;
                                         the cropped teal lockup is ~2.2:1, so a
                                         shorter height keeps the header from
                                         growing while the mark stays legible */

nav a,
.nav-dropdown-toggle,
.nav-dropdown-link,
.nav-dropdown-chevron { color: var(--lms-ink-2); }

nav a { border-radius: var(--lms-radius); }

nav a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  background: var(--brand-teal-tint);
  color: var(--brand-primary);
}

.nav-dropdown-menu {
  border: 1px solid var(--lms-line);
  border-radius: var(--lms-radius);
  box-shadow: 0 8px 24px rgba(43,43,43,.10);
}
.nav-dropdown-menu a,
.nav-dropdown-menu-row .nav-dropdown-menu-link { color: var(--lms-ink-2); }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu-row:hover { background: var(--brand-teal-tint); }

/* the nav already tints its icons functionally — keep that, it is the
   system working; just fix the two that are still off-palette */
.nav-dropdown-menu .fa-layer-group { color: var(--brand-bundle) !important; }
.nav-dropdown-menu .fa-tablet-alt  { color: var(--brand-black-soft) !important; }

.nav-dropdown-menu-row .nav-badge-link {
  background: var(--brand-copy);
  border-radius: var(--lms-radius);
  font-weight: 500;
}
.nav-dropdown-menu-row .nav-badge-link:hover { background: var(--brand-copy-deep); }

.dev-mode-header { background: #C2B280; }

/* ---------- 4. Surfaces -------------------------------------------- */

.card,
.dashboard-card,
.course-content,
.result-card,
.intro-card,
.login-card,
.progress-card,
.required-bar,
.course-card,
.attendance-bar,
.bundle-modal-box,
.page-tabs {
  background: var(--lms-surface);
  border: 1px solid var(--lms-line);
  border-radius: var(--lms-radius-card);
  box-shadow: none;
}

.bundle-card { background: var(--lms-surface); border-color: var(--lms-line); }

/* ---------- 5. Buttons --------------------------------------------- */

.btn, .btn-small, .btn-start, .btn-login, .att-btn,
.btn-submit, .submit-btn, button[type="submit"] {
  font-family: var(--lms-font);
  font-weight: 500;
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--lms-radius);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
       height: var(--lms-h); padding: 0 1.15rem; font-size: .95rem; line-height: 1; }
.btn-small { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
       height: var(--lms-h-sm); padding: 0 .9rem; font-size: .875rem; line-height: 1; }
.btn-start, .att-btn { height: 36px; padding: 0 1rem; border-radius: var(--lms-radius); }
.btn-login { height: var(--lms-h-lg); padding: 0 1.2rem; border-radius: var(--lms-radius); }

.btn:hover, .btn-small:hover, .btn-start:hover,
.btn-login:hover, .att-btn:hover, button[type="submit"]:hover {
  background: var(--brand-teal-deep);
  color: #fff;
  opacity: 1;
}

.btn:focus-visible, .btn-small:focus-visible, .att-btn:focus-visible,
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--lms-focus);
}

/* Secondary */
.btn-secondary, .btn-login-secondary {
  background: var(--lms-surface) !important;
  color: var(--lms-ink) !important;
  border: 1px solid var(--lms-line-strong) !important;
}
.btn-secondary:hover, .btn-login-secondary:hover {
  background: var(--lms-bg) !important;
  border-color: var(--lms-ink-3) !important;
}

/* Legacy inline grey #95a5a6 — Cancel/Close/Prev buttons across ~28 templates,
   pre-dating the secondary-button class. Reads as disabled; buttons.md level 2
   (white fill, ink text, hairline border) is what "still clickable, not
   primary" should look like. Rename to .btn-secondary and drop these
   selectors once the templates are swept. */
.btn[style*="95a5a6"], .btn-small[style*="95a5a6"] {
  background: var(--lms-surface) !important;
  color: var(--lms-ink) !important;
  border: 1px solid var(--lms-line-strong) !important;
}
.btn[style*="95a5a6"]:hover, .btn-small[style*="95a5a6"]:hover { background: var(--lms-bg) !important; }

/* Legacy inline rainbow — Edit/Save/Add/Export/Approve buttons across admin
   pages used ad-hoc blue/green/purple/orange fills pre-dating buttons.md.
   Collapse all non-delete accents to brand primary teal; red/danger accents
   to the destructive fill. Same "rename + drop selector" plan as the grey
   rule above once templates are swept. */
.btn[style*="3498db"], .btn-small[style*="3498db"],
.btn[style*="2ecc71"], .btn-small[style*="2ecc71"],
.btn[style*="27ae60"], .btn-small[style*="27ae60"],
.btn[style*="9b59b6"], .btn-small[style*="9b59b6"],
.btn[style*="f39c12"], .btn-small[style*="f39c12"],
.btn[style*="2c3e50"], .btn-small[style*="2c3e50"] {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn[style*="3498db"]:hover, .btn-small[style*="3498db"]:hover,
.btn[style*="2ecc71"]:hover, .btn-small[style*="2ecc71"]:hover,
.btn[style*="27ae60"]:hover, .btn-small[style*="27ae60"]:hover,
.btn[style*="9b59b6"]:hover, .btn-small[style*="9b59b6"]:hover,
.btn[style*="f39c12"]:hover, .btn-small[style*="f39c12"]:hover,
.btn[style*="2c3e50"]:hover, .btn-small[style*="2c3e50"]:hover {
  background: var(--brand-teal-deep) !important;
  color: #fff !important;
}

.btn[style*="e74c3c"], .btn-small[style*="e74c3c"] {
  background: var(--lms-surface) !important;
  color: var(--brand-delete) !important;
  border: 1px solid #E4C3BA !important;
}
.btn[style*="e74c3c"]:hover, .btn-small[style*="e74c3c"]:hover {
  background: var(--brand-rust-tint) !important;
  color: var(--brand-delete-deep) !important;
}

/* ===========================================================
   GLOBAL icon-action button system — single source of truth for
   every Edit/Results/Clone/Email/Bundle/Delete/QR icon button in
   any table row or card across the whole dashboard. Every page
   funnels into these selectors (inline var() fills, courses.latte
   / participants.latte / bundle-card.latte style, OR page-specific
   classes like .btn-client-edit / .terminals-delete-btn) — change
   a colour or the hover behaviour here once, it updates everywhere.
   Default state carries the identity tint; hover adds an outline
   only, background does not change.
   =========================================================== */
.btn[style*="var(--brand-edit)"],   .btn-small[style*="var(--brand-edit)"],
.btn-client-edit, .terminals-edit-btn {
  background: var(--brand-edit-tint) !important;
  color: var(--brand-edit) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-result)"], .btn-small[style*="var(--brand-result)"] {
  background: var(--brand-result-tint) !important;
  color: var(--brand-result-deep) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-copy)"],   .btn-small[style*="var(--brand-copy)"],
.ecr-view-cert-btn {
  background: var(--brand-copy-tint) !important;
  color: var(--brand-copy) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-email)"],  .btn-small[style*="var(--brand-email)"] {
  background: var(--brand-email-tint) !important;
  color: var(--brand-email) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-green)"],  .btn-small[style*="var(--brand-green)"] {
  background: var(--brand-green-tint) !important;
  color: var(--brand-green-deep) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-bundle)"], .btn-small[style*="var(--brand-bundle)"],
.btn[style*="var(--brand-bundle-deep)"], .btn-small[style*="var(--brand-bundle-deep)"],
.btn-client-bundles {
  background: var(--brand-bundle-tint) !important;
  color: var(--brand-bundle) !important;
  border: 1px solid transparent !important;
}
.btn[style*="var(--brand-delete)"], .btn-small[style*="var(--brand-delete)"],
.btn[style*="var(--brand-danger)"], .btn-small[style*="var(--brand-danger)"],
.btn-client-delete, .terminals-delete-btn {
  background: var(--brand-delete-tint) !important;
  color: var(--brand-delete-deep) !important;
  border: 1px solid transparent !important;
}
.terminals-qr-btn {
  background: var(--lms-bg) !important;
  color: var(--lms-ink) !important;
  border: 1px solid transparent !important;
}

.btn[style*="var(--brand-edit)"]:hover,   .btn-small[style*="var(--brand-edit)"]:hover,
.btn-client-edit:hover, .terminals-edit-btn:hover     { border-color: var(--brand-edit) !important; }
.btn[style*="var(--brand-result)"]:hover, .btn-small[style*="var(--brand-result)"]:hover
                                                       { border-color: var(--brand-result-deep) !important; }
.btn[style*="var(--brand-copy)"]:hover,   .btn-small[style*="var(--brand-copy)"]:hover,
.ecr-view-cert-btn:hover                              { border-color: var(--brand-copy) !important; }
.btn[style*="var(--brand-email)"]:hover,  .btn-small[style*="var(--brand-email)"]:hover
                                                       { border-color: var(--brand-email) !important; }
.btn[style*="var(--brand-green)"]:hover,  .btn-small[style*="var(--brand-green)"]:hover
                                                       { border-color: var(--brand-green-deep) !important; }
.btn[style*="var(--brand-bundle)"]:hover, .btn-small[style*="var(--brand-bundle)"]:hover,
.btn[style*="var(--brand-bundle-deep)"]:hover, .btn-small[style*="var(--brand-bundle-deep)"]:hover,
.btn-client-bundles:hover                             { border-color: var(--brand-bundle) !important; }
.btn[style*="var(--brand-delete)"]:hover, .btn-small[style*="var(--brand-delete)"]:hover,
.btn[style*="var(--brand-danger)"]:hover, .btn-small[style*="var(--brand-danger)"]:hover,
.btn-client-delete:hover, .terminals-delete-btn:hover { border-color: var(--brand-delete-deep) !important; }
.terminals-qr-btn:hover                               { border-color: var(--lms-line-strong) !important; }

/* Tertiary — add to in-table and toolbar actions */
.btn-tertiary {
  background: transparent !important;
  color: var(--brand-primary) !important;
  border-color: transparent !important;
  padding: 0 .7rem;
}
.btn-tertiary:hover { background: var(--brand-teal-tint) !important; }

/* Finish / complete is the primary action of its page, not an outcome */
.btn-success { background: var(--brand-primary); color: #fff; }
.btn-success:hover { background: var(--brand-teal-deep); }

/* Destructive */
.btn-danger {
  background: var(--lms-surface);
  color: var(--brand-delete);
  border-color: #E4C3BA;
}
.btn-danger:hover { background: var(--brand-rust-tint); color: var(--brand-delete-deep); }
.btn-danger.btn-confirm { background: var(--brand-delete); color: #fff; border-color: transparent; }
.btn-danger.btn-confirm:hover { background: var(--brand-delete-deep); }

button[disabled], .btn[disabled], .btn:disabled, .btn-small[disabled],
.btn-login[disabled], .btn-submit[disabled], .submit-btn[disabled],
button[type="submit"]:disabled {
  opacity: .4;
  filter: none;                 /* drop the grayscale(20%) */
  cursor: not-allowed;
}

/* ---------- 6. Forms ----------------------------------------------- */

.form-group label,
.login-body .form-group label,
.att-field-label,
.bundle-modal-field label { color: var(--lms-ink-2); font-weight: 500; font-size: .9rem; }

.form-group input,
.login-body .form-group input,
.att-text-input, .att-location-select,
.bundle-modal-field input, .bundle-modal-field select, .bundle-modal-field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  font-family: var(--lms-font);
  border: 1px solid var(--lms-line-strong);
  border-radius: var(--lms-radius);
  color: var(--lms-ink);
  background: var(--lms-surface);
}
.login-body .form-group input { border-width: 1px; }   /* was 2px */

.att-text-input:focus,
.login-body .form-group input:focus {
  border-color: var(--brand-primary);
  background: #fff;
  box-shadow: var(--lms-focus);   /* was a leftover rgba(52,152,219,.12) blue */
}

::placeholder { color: var(--lms-ink-3); }

.att-required-star, .bundle-modal-required { color: var(--brand-delete); }

/* Pill toggles — layout.css uses #4caf50, bundle.css/editor.css use teal */
.pill-toggle input[type="checkbox"]:checked + .pill { background: var(--brand-primary); }
.att-pill-toggle input:checked ~ .att-pill-yes { background: var(--brand-primary); }

/* ---------- 7. Alerts ---------------------------------------------- */

.alert, .bundles-alert, .error-msg, .attendance-flash {
  border-radius: var(--lms-radius);
  border: 1px solid transparent;
}
.alert-error, .bundles-alert--error, .error-msg {
  background: var(--brand-rust-tint) !important;
  color: var(--brand-delete) !important;
  border-color: #EFD6CF !important;
}
.alert-success, .bundles-alert--success, .attendance-flash {
  background: #EAF1EC !important;
  color: var(--brand-green) !important;
  border-color: #D8E5DC !important;
}
.global-notice {
  background: var(--brand-teal-tint);
  border: 1px solid #C6E8E3;
  color: var(--lms-ink-2);
}

/* ---------- 8. Dashboard ------------------------------------------- */
/* viewslatte/dashboard.css is half-wired: clients/courses/certs use brand
   vars, bundles is still #9b59b6, the fallbacks are #2ecc71 / #e67e22 and
   the welcome icon is #f39c12. Finish it and calm the numbers down. */

.dashboard-welcome-icon { color: var(--lms-ink-3); }

.dashboard-card h3 i                 { color: var(--lms-ink-3); }
.dashboard-card--clients h3 i        { color: var(--brand-primary); }
.dashboard-card--courses h3 i        { color: var(--brand-green); }
.dashboard-card--certs h3 i          { color: var(--brand-copy); }
.dashboard-card--bundles h3 i        { color: var(--brand-bundle); }

/* The figure is data, not an action — one ink weight for all of them, so
   the coloured icon alone carries the category. */
.dashboard-card-count,
.dashboard-card--clients .dashboard-card-count,
.dashboard-card--courses .dashboard-card-count,
.dashboard-card--certs .dashboard-card-count,
.dashboard-card--bundles .dashboard-card-count {
  color: var(--lms-ink);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1.1;
}

.dashboard-stats-card > h3 i { color: var(--lms-ink-3); }
.dashboard-stat {
  background: var(--lms-bg);
  border: 1px solid var(--lms-line);
  border-radius: var(--lms-radius);
}
.dashboard-stat-value,
.dashboard-stat--completions .dashboard-stat-value,
.dashboard-stat--participants .dashboard-stat-value,
.dashboard-stat--bundle-participants .dashboard-stat-value {
  color: var(--lms-ink);
  font-weight: 300;
}
.dashboard-stat--completions .dashboard-stat-label i        { color: var(--brand-primary); }
.dashboard-stat--participants .dashboard-stat-label i       { color: var(--brand-edit); }
.dashboard-stat--bundle-participants .dashboard-stat-label i{ color: var(--brand-bundle); }

/* pass rate is the one figure that carries a verdict, so it keeps colour */
.dashboard-stat--pass-rate-good .dashboard-stat-value { color: var(--brand-green); font-weight: 300; }
.dashboard-stat--pass-rate-bad  .dashboard-stat-value { color: var(--brand-delete); font-weight: 300; }
.dashboard-stat--pass-rate-none .dashboard-stat-value { color: var(--lms-ink-3);   font-weight: 300; }

.dashboard-stat-label { color: var(--lms-ink-3); }

/* ---------- 9. Bundle listing (admin) ------------------------------ */

.bundle-card-title { color: var(--lms-ink); }
.bundle-card-title a { color: var(--lms-ink); }
.bundle-card-title i.fa-layer-group { color: var(--brand-bundle); }      /* was #9b59b6 */
.bundle-card-title a i.fa-external-link-alt { color: var(--brand-primary); }
.bundle-card-desc, .bundle-card-created,
.bundles-header-sub, .bundles-group-count { color: var(--lms-ink-3); }
.bundles-group-header { border-bottom: 1px solid var(--lms-line); }
.bundles-group-header h3 { color: var(--lms-ink); }
.bundles-empty i { color: var(--lms-line-strong); }

/* the three icon-only row actions carry their functional colour on the
   glyph, not as three coloured fills */
.bundle-card-actions .btn-small {
  background: var(--lms-surface);
  border: 1px solid var(--lms-line-strong);
  color: var(--lms-ink);
}
.bundle-card-actions .btn-small:hover { background: var(--lms-bg); }
.bundle-card-actions .btn-small .fa-chart-bar { color: var(--brand-result-deep); }
.bundle-card-actions .btn-small .fa-pen       { color: var(--brand-edit); }
.bundle-card-actions .btn-small .fa-trash     { color: var(--brand-delete); }
.bundle-card-actions .btn-small:hover .fa-trash { color: var(--brand-delete-deep); }

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

thead tr, .admin-table thead tr {
  background: var(--lms-bg-sunk) !important;
  border-bottom: 1px solid var(--lms-line) !important;
}
thead th {
  color: var(--lms-ink-3);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
tbody tr { border-bottom: 1px solid #F0EFEC; }
tbody tr:hover { background: var(--lms-bg); }
tbody td { color: var(--lms-ink-2); }

/* ---------- 11. Tabs ----------------------------------------------- */

.ce-tab { color: var(--lms-ink-3); font-family: var(--lms-font); }
.ce-tab:hover { color: var(--brand-primary); }
.ce-tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 500; }
.page-tabs { box-shadow: none; border: 1px solid var(--lms-line); }
.page-tabs .ce-tab.active { background: var(--brand-teal-tint); font-weight: 500; }

/* ============================================================
   12. PARTICIPANT SITE — bundle.css
   ============================================================ */

/* Gradient headers → white, so the client logo carries the page */
.login-header, .bundle-header {
  background: var(--lms-surface);
  color: var(--lms-ink);
  border-bottom: 1px solid var(--lms-line);
}
.login-header h1, .bundle-header h1 { color: var(--lms-ink); font-weight: 500; }
.login-header p, .bundle-header p, .bundle-header-sub { color: var(--lms-ink-3); opacity: 1; }
.login-header .icon { color: var(--brand-primary); opacity: 1; }
.bundle-header-signout { color: var(--brand-primary); }
.bundle-header-signout:hover { color: var(--brand-teal-deep); }
.client-badge {
  background: var(--brand-teal-tint);
  color: var(--brand-primary);
  border-radius: var(--lms-radius);
}

.login-mode-bar { background: var(--lms-bg-sunk); border-radius: var(--lms-radius); }
.login-mode-btn { color: var(--lms-ink-3); border-radius: 4px; font-weight: 500; }
.login-mode-btn:hover { color: var(--lms-ink); }
.login-mode-btn.active { background: #fff; color: var(--brand-primary); box-shadow: none; border: 1px solid var(--lms-line); }

.guest-divider { border-top-color: var(--lms-line); }
.guest-divider span { color: var(--lms-ink-3); }
.step-indicator { color: var(--lms-ink-3); border-bottom: 1px solid var(--lms-line); }
.step-indicator .step.active { color: var(--brand-primary); font-weight: 500; }
.step-indicator .divider { background: var(--lms-line); }
.info-note, .section-title, .stat-pill .lbl,
.course-info .meta, .att-locked-text, .att-last-checkin { color: var(--lms-ink-3); }

/* Progress: teal while working, green once the required set is done.
   bundle-dashboard sets this inline as #27ae60 / #1D857D — keep the
   semantic, take the colours from the palette. */
.progress-track { background: #EDEBE7; }
.progress-fill { background: var(--brand-primary) !important; }
.progress-fill[style*="27ae60"] { background: var(--brand-green) !important; }
.required-bar .bar-label { color: var(--lms-ink); font-weight: 500; }

/* stat pills lose their four tinted grounds */
.stat-pill { background: var(--lms-bg) !important; border: 1px solid var(--lms-line); border-radius: var(--lms-radius); }
.stat-pill .num { color: var(--lms-ink); font-weight: 300; }

.course-info h3 { color: var(--lms-ink); font-weight: 500; }

/* ---- Course status: green, rust, and shape --------------------------
   Four states on three brand colours. Passed and failed are settled, so
   their discs are FILLED. Expired and not-started are unresolved, so they
   are HOLLOW rings — expired in rust (act on it), not-started in line
   grey. bundle-dashboard.php writes $bg/$color inline, so match on those. */

.course-status-icon[style*="eafaf1"] {        /* passed */
  background: #EAF1EC !important; color: var(--brand-green) !important;
}
.course-status-icon[style*="fdedec"] {        /* failed */
  background: var(--brand-rust-tint) !important; color: var(--brand-delete) !important;
}
.course-status-icon[style*="fff3e0"] {        /* expired */
  background: #fff !important; color: var(--brand-delete) !important;
  border: 1.5px solid #E4C3BA;
}
.course-status-icon[style*="f8f9fa"] {        /* not started */
  background: #fff !important; color: var(--lms-line-strong) !important;
  border: 1.5px solid var(--lms-line);
}

/* Badges: square-ish, 4px, no 50px pills, no amber */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 4px;
  font-weight: 500;
  padding: .22rem .55rem;
}
.badge-required { background: var(--brand-teal-tint); color: var(--brand-primary); }
.badge-optional,
.badge-pending  { background: #F0EFEC; color: var(--lms-ink-2); }   /* ink-3 drops below AA on the tint */
.badge-passed   { background: #EAF1EC; color: var(--brand-green); }
.badge-failed   { background: var(--brand-rust-tint); color: var(--brand-delete); }
.badge-expired  { background: #fff; color: var(--brand-delete); border: 1px solid #E4C3BA; }

/* Start / Retake / Renew — one button, one colour, whatever the state.
   bundle-dashboard.php sets background inline to #1D857D or #95a5a6
   ($btnColor); the grey reads disabled but the link works, so a passed
   course gets a secondary outline instead. */
.btn-start { background: var(--brand-primary); color: #fff; font-weight: 500; }
.btn-start[style*="95a5a6"] {
  background: var(--lms-surface) !important;
  color: var(--lms-ink) !important;
  border: 1px solid var(--lms-line-strong);
}
.btn-start[style*="95a5a6"]:hover { background: var(--lms-bg) !important; }

/* ---- Attendance ------------------------------------------------------
   Only one of these is ever on screen, so check-in takes the primary fill
   and check-out the outline. Replaces green #27ae60 / orange #e67e22 and
   their two coloured drop shadows. */
.attendance-bar-title { color: var(--lms-ink-3); font-weight: 500; }
.attendance-bar-title i { color: var(--brand-primary); }
.attendance-status-text { color: var(--brand-green); font-weight: 500; }

.att-btn-in { background: var(--brand-primary); color: #fff; }
.att-btn-in:hover { background: var(--brand-teal-deep); color: #fff; }

.att-btn-out {
  background: var(--lms-surface);
  color: var(--lms-ink);
  border: 1px solid var(--lms-line-strong);
}
.att-btn-out:hover { background: var(--lms-bg); color: var(--lms-ink); }

.att-btn-disabled {
  background: var(--brand-primary) !important;
  opacity: .4;
  border-color: transparent !important;
}

.att-btn-in-prominent,
.att-btn-out-prominent {
  height: var(--lms-h, 40px);
  padding: 0 1.4rem;
  font-size: 1rem;
  border-radius: var(--lms-radius);
  box-shadow: none;
  justify-content: center;
}

@media (min-width: 481px) {
  .att-btn-in-prominent,
  .att-btn-out-prominent {
    width: 250px;
  }
}

.att-location-desc {
  background: var(--brand-teal-tint);
  border-left: 2px solid var(--brand-primary);
  border-radius: 0 var(--lms-radius) var(--lms-radius) 0;
  color: var(--lms-ink-2);
}

/* ---- Bundle course-card action buttons --------------------------------
   Start/Retake/Certificate/Upload/Sign buttons each carried their own
   inline colour (blue/grey/red/copy-teal) and size. Unify to the same
   primary fill used by attendance check-in, and same footprint on desktop
   so cards line up regardless of label length. */
.course-card-actions .btn-start {
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  box-sizing: border-box;
}
.course-card-actions .btn-start:hover { background: var(--brand-teal-deep) !important; }

@media (min-width: 481px) {
  .course-card-actions .btn-start {
    width: 250px;
    height: var(--lms-h, 40px);
    padding: 0 1rem !important;
    justify-content: center;
  }
}

/* ---------- 13. Learner course player ------------------------------ */

.course-header { background: var(--lms-surface); border-bottom: 1px solid var(--lms-line); }
.course-header-title { color: var(--lms-ink); font-weight: 500; }
.course-header-title i { color: var(--brand-primary) !important; }
.course-header-pager { color: var(--lms-ink-3); }
.course-nav { border-top-color: var(--lms-line); }

.quiz-option {
  background: var(--lms-surface);
  border: 1px solid var(--lms-line-strong);
  border-radius: var(--lms-radius);
  color: var(--lms-ink-2);
}
.quiz-option:hover { border-color: var(--brand-primary); background: var(--brand-teal-tint); }
.quiz-option.selected {
  background: var(--brand-teal-tint);
  border-color: var(--brand-primary);
  color: var(--lms-ink);
  font-weight: 500;
}
.quiz-option .option-marker { border-color: var(--lms-line-strong); }
.quiz-option.selected .option-marker {
  background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}

.ordering-item { border: 1px solid var(--lms-line-strong); border-radius: var(--lms-radius); }
.ordering-item:hover { border-color: var(--brand-primary); background: var(--brand-teal-tint); box-shadow: none; }
.ordering-item.drag-over { border-color: var(--brand-primary); background: var(--brand-teal-tint); }
.ordering-item .drag-handle { color: var(--lms-ink-3); }
.ordering-rank-badge { background: var(--brand-primary); }

/* ---------- 14. Results & certificate ------------------------------ */

.score-circle.passed { background: #EAF1EC; color: var(--brand-green); border: 1px solid #D8E5DC; }
.score-circle.failed { background: var(--brand-rust-tint); color: var(--brand-delete); border: 1px solid #EFD6CF; }

/* course-complete.css .score-circle was a green/red gradient off-palette
   (#2ecc71/#27ae60, #A8351B/#862A16) before the two rules above took over.
   course-results.css .result-banner.failed was actually teal (#1D857D),
   same colour as pass — flat brand fill, correctly split. */
.result-banner.passed { background: var(--brand-primary) !important; }
.result-banner.failed { background: var(--brand-delete) !important; }

.result-card div[style*="#d4edda"] {
  background: #EAF1EC !important; border: 1px solid #D8E5DC; border-radius: var(--lms-radius) !important;
}
.result-card div[style*="#d4edda"] strong,
.result-card div[style*="#d4edda"] p { color: var(--brand-green) !important; }
.result-card div[style*="#f8d7da"] {
  background: var(--brand-rust-tint) !important; border: 1px solid #EFD6CF; border-radius: var(--lms-radius) !important;
}
.result-card div[style*="#f8d7da"] strong,
.result-card div[style*="#f8d7da"] p { color: var(--brand-delete) !important; }

/* ---------- 15. Footer --------------------------------------------- */

.site-footer { color: var(--lms-ink-3); border-top: 1px solid var(--lms-line); }
.site-footer a { color: var(--lms-ink-3); }
.site-footer a:hover { color: var(--brand-primary); }