/* Round-1 THIRD-PASS theme UI fixes (concatenated). Admin/Claro pages are out of scope. */

/* ===== P001.css ===== */
/* =========================================================================
   P001 — Homepage (medical style)  THIRD-PASS UI FIXES
   Loaded LAST. Scoped to body.layout-medical / body.route--lms-course-homepage.
   ========================================================================= */

/* [P001] ISSUE 1-0045 + 1-0076: Hero subtitle "Your..." clipped to "ur" and
   mobile subtitle overlapped by carousel prev/next arrows.
   ROOT CAUSE: .medical-carousel__control--prev sits at left:clamp(12px,2vw,28px)
   (a 48px circle) directly on top of the hero text column, and the text column's
   left padding (clamp 34-64px) is narrower than the arrow's reach (~28+48=76px),
   so the leading word is painted behind the arrow. The content also has
   overflow:hidden, hiding any text pushed under the control.
   FIX: give the hero text column enough left padding to fully clear the prev
   arrow, and pull the prev arrow back to the extreme left edge so it no longer
   sits over the copy. */
body.layout-medical .medical-carousel__item > .medical-shell.medical-hero__content {
  padding-left: clamp(92px, 8vw, 120px) !important;
  overflow: visible !important;
}
body.layout-medical .medical-carousel__control--prev {
  left: 6px !important;
}
body.layout-medical .medical-carousel__control--next {
  right: 6px !important;
}
/* Keep the decorative panel aligned with the new text padding so the copy
   still reads inside the frosted card. */
body.layout-medical .medical-hero__content::before {
  inset: 20px 14px 20px 0 !important;
}

@media (max-width: 991px) {
  /* Mobile: stack the prev/next arrows below the hero copy band and add
     breathing room under the subtitle so "Development" is no longer clipped
     by the right-hand '>' control. */
  body.layout-medical .medical-carousel__item > .medical-shell.medical-hero__content {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: 64px !important;
    overflow: visible !important;
  }
  body.layout-medical .medical-hero__subtitle {
    margin-bottom: 30px !important;
  }
  body.layout-medical .medical-carousel__control {
    top: auto !important;
    bottom: 14px !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
  }
  body.layout-medical .medical-carousel__control--prev {
    left: 14px !important;
  }
  body.layout-medical .medical-carousel__control--next {
    right: 14px !important;
  }
}

/* [P001] ISSUE 1-0020: "Explore Categories" row-2 cards (no media) render with
   a 68px fallback icon while row-1 cards use a 136px image block, leaving the
   two rows visually inconsistent and much shorter.
   FIX: force every category card to the same height and give the fallback-icon
   cards an equally sized media block so all four columns line up regardless of
   whether the category has an image. */
body.layout-medical .medical-category-grid {
  align-items: stretch !important;
}
body.layout-medical .medical-category-card {
  height: 100% !important;
  justify-content: flex-start !important;
}
/* Promote the plain (fallback-icon) card's media block to the same footprint
   as the image cards so structure + height match. */
body.layout-medical .medical-category-card:not(.medical-category-card--image) .medical-category-card__icon {
  width: 136px !important;
  height: 136px !important;
  border-radius: 36px !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.10), rgba(72, 202, 228, 0.12)) !important;
  box-shadow: 0 20px 36px rgba(0, 119, 182, 0.12) !important;
}
body.layout-medical .medical-category-card:not(.medical-category-card--image) .medical-category-card__icon i {
  font-size: 3rem !important;
  color: var(--medical-violet) !important;
}

/* [P001] ISSUE 1-0052 + 1-0043: Header "Dashboard" (caret) link and "Workspace"
   link render in a light/medium blue (#0077b6 ~ 4.6:1, marginal) on the white
   medical navbar.  PRIOR FIX could not be verified on anon screenshots; this
   pass forces every header action link to the dark heading colour (#0f2c3d,
   ~13:1 on white) so it comfortably clears WCAG AA 4.5:1 in its resting state. */
body.layout-medical:not(.is-workspace) .lms-navbar__actions a,
body.layout-medical:not(.is-workspace) .lms-navbar__actions a span,
body.layout-medical:not(.is-workspace) .lms-user-profile-link,
body.layout-medical:not(.is-workspace) .lms-user-profile-link span,
body.layout-medical:not(.is-workspace) .lms-navbar__link {
  color: #0f2c3d !important;
}
/* Caret next to the user name / dashboard link — give it enough contrast too. */
body.layout-medical:not(.is-workspace) .lms-user-profile-link i.fa-chevron-down {
  color: #476273 !important;
}

/* [P001] ISSUE 1-0050 + 1-0051: Header utility cluster (heart, bell,
   avatar + "Maria Santos", Dashboard caret) is uneven because the user name
   wraps onto two lines, raising the local header height and knocking the
   icons off a shared baseline.
   FIX: vertically centre the whole actions cluster, keep the name on one line
   with an ellipsis fallback, and lock the profile link items to a single
   centred row. */
body.layout-medical:not(.is-workspace) .lms-navbar__actions,
body.layout-medical:not(.is-workspace) .lms-navbar__actions > div {
  display: flex !important;
  align-items: center !important;
}
body.layout-medical:not(.is-workspace) .lms-user-profile-link {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
body.layout-medical:not(.is-workspace) .lms-user-profile-link span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 14ch !important;
  line-height: 1.2 !important;
}

/* [P001] ISSUE 1-0054: "Continue Learning" 0%-complete card shows an almost
   invisible progress line, making it ambiguous whether a track exists.
   FIX: give the progress track a clearly visible, higher-contrast background
   and a touch more height so the empty (0%) state still reads as a real
   component alongside the filled 61% / 24% cards. */
body.layout-medical .medical-progress {
  height: 6px !important;
  background: #d4e6f0 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 44, 61, 0.06) !important;
}
body.layout-medical .medical-progress__fill {
  min-width: 0;
  border-radius: 8px;
}

/* ===== P002.css ===== */
/* =========================================================================
   P002 — Course Catalog (/courses) — THIRD-PASS UI fixes
   Route: body.route--lms-course-catalog (light theme via .layout-minimalist)
   This partial loads LAST. !important used to beat inline styles / heavy rules.
   ========================================================================= */

/* [P002] ISSUE 1-0083: Footer column mislabeled 'Course' (holds News items).
   Markup hard-codes <h4>Course</h4> in the 2nd footer column. Pure CSS cannot
   edit text nodes, so we collapse the original glyph rendering and paint an
   accurate 'Resources' label via ::before. Targets only the 2nd footer column
   (the one whose list begins with a News & Notices link). */
body.route--lms-course-catalog .lms-footer__grid > .lms-footer__col:nth-of-type(2) > h4 {
  font-size: 0 !important;        /* hide original 'Course' text */
  line-height: 0 !important;
}
body.route--lms-course-catalog .lms-footer__grid > .lms-footer__col:nth-of-type(2) > h4::before {
  content: "Resources";
  display: block;
  font-size: 1.125rem;           /* restore the h4 size */
  line-height: 1.2;
  font-weight: 700;
}

/* [P002] ISSUE 1-0084 / 1-0111: Card description + meta too faint (light grey
   on white, below 4.5:1). Darken description, instructor name, level and the
   numeric rating text to a #4b5563-range grey. Inline color:#a1a1aa on the
   instructor name and rating count is overridden with !important. */
body.route--lms-course-catalog .card-lms__desc,
body.route--lms-course-catalog .card-lms__desc a {
  color: #374151 !important;     /* ~8.9:1 on white */
}
body.route--lms-course-catalog .card-lms__instructor-name,
body.route--lms-course-catalog .card-lms__instructor-name a,
body.route--lms-course-catalog .card-lms__level,
body.route--lms-course-catalog .card-lms__rating span {
  color: #4b5563 !important;     /* ~7:1 on white */
}

/* [P002] ISSUE 1-0096 / 1-0108: Descriptions truncate mid-word with abrupt
   ellipsis. Full text is server-rendered, so we enforce a clean 2-line CSS
   line-clamp (block ellipsis at the line end, no per-character JS cut) and a
   consistent height so every card clamps identically. */
body.route--lms-course-catalog .card-lms__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 2.55em;            /* 2 lines * 0.85rem * ~1.5 line-height */
}

/* [P002] ISSUE 1-0101: 'Title' search input has no visible label, breaking the
   uppercase-label pattern (CATEGORY/LEVEL/PRICE/RATING). Inject a styled label
   above the input via ::before on its filter-group (the one containing
   #course-search) and hide the now-redundant placeholder. */
body.route--lms-course-catalog .lms-catalog__filter-group:has(> #course-search)::before {
  content: "TITLE";
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: 0.5rem;
}
body.route--lms-course-catalog #course-search::placeholder {
  color: transparent;            /* label now carries the meaning */
}

/* [P002] ISSUE 1-0105: Long category badge stretches edge-to-edge over the
   card image with minimal inset. The badge is forced position:static inside a
   flex wrapper via inline style. Constrain width, add inset, padding and
   single-line ellipsis for very long labels like 'PALLIATIVE CARE & END OF
   LIFE'. The inline-styled flex wrapper is the badge's parent. */
body.route--lms-course-catalog .card-lms__category {
  max-width: calc(100% - 1.5rem) !important;
  margin-left: 0.25rem !important;
  padding: 0.3rem 0.85rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Keep the absolute-positioned wrapper off the very edge of the image. */
body.route--lms-course-catalog .card-lms__image > div[style*="position: absolute"] {
  max-width: calc(100% - 1rem);
}

/* [P002] ISSUE 1-0106 (mobile) / 1-0086 (filled affordance): 'Enroll Now' is a
   weak ghost outline button with thin low-contrast blue text. Make it a solid
   filled brand-gradient primary CTA so it reads as the main conversion action.
   Overrides inline border-color / transparent background with !important. */
body.route--lms-course-catalog .card-lms__footer .btn-lms-outline {
  background: linear-gradient(to right, #6366f1, #a855f7) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important;
}
body.route--lms-course-catalog .card-lms__footer .btn-lms-outline:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45) !important;
}

/* [P002] ISSUE 1-0107: 'Most Popular' sort control gives no dropdown
   affordance. It is a native <select id="sort-courses">; on mobile the native
   caret is often hidden. Force a custom chevron via background image and pad
   the right side so options open clearly. */
body.route--lms-course-catalog #sort-courses {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236366f1' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 10px 7px !important;
}

/* [P002] ISSUE 1-0110: Inconsistent card title height — single vs two line
   titles offset the byline/description across cards. Reserve a 2-line block. */
body.route--lms-course-catalog .card-lms__title {
  min-height: 3.08em;            /* 2 lines * 1.1rem * 1.4 line-height */
}

/* [P002] ISSUE 1-0112: RATING filter empty stars use dark slate fill that
   reads as filled. The empty stars carry .text-muted (#6e7681). Render them as
   a light-grey, hollow-looking star so filled gold vs empty is obvious. */
body.route--lms-course-catalog .lms-rating-stars .fa-star.text-muted {
  color: #cbd5e1 !important;     /* light grey, clearly empty */
}
body.route--lms-course-catalog .lms-rating-stars .fa-star.text-warning {
  color: #f59e0b !important;     /* solid gold, clearly filled */
}

/* ===== P003.css ===== */
/* ==========================================================================
   P003 — Course Detail (/courses/88) UI fixes — round 3 (THIRD pass)
   Loaded LAST via lms_theme. !important + matched specificity used to beat
   the medical/minimalist skin rules (medical.css) that defeated prior fixes.
   Active body class on this page: layout-medical layout-minimalist
   route--lms-course-detail
   ========================================================================== */

/* [P003] ISSUE 1-0128: Active tab pill protrudes above the sticky tab bar.
   ROOT CAUSE (why prior fix failed): the prior round-2 fix scoped its rules
   under `body.route--lms-course-detail ...` (specificity ~0,2,0). The real
   styling comes from medical.css under
   `body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs__link--active`
   (specificity ~0,6,1, with !important), which paints the link as a full
   `border-radius:999px` pill with a tinted background. The pill is TALLER than
   the bar's available vertical space (`.lms-tabs` had `padding:0.55rem 0`), so
   its rounded top edge spills above the bar's 1px top border.
   FIX: re-state the rules with the SAME high-specificity selector chain so we
   actually win, give the tab list enough symmetric vertical padding to fully
   contain the pill, vertically center the pill, and clip any residual vertical
   overflow on the bar (horizontal scroll lives on the inner `.container`, so
   clipping the bar's vertical axis does not break the scroll affordance). */

/* Bar: clip vertical overflow so nothing can ever poke above the top border.
   Horizontal scrolling is owned by the inner `.container`, untouched here. */
body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs {
  overflow-y: clip !important;
}

/* Tab list: give symmetric vertical padding large enough to hold the pill,
   and center items so the pill sits in the middle of the bar, never at the edge. */
body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs {
  align-items: center !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Each pill: keep it self-contained — no vertical margin, a hard line-height,
   and a height that fits inside the padded bar. The bottom-border accent that
   medical.css adds on the active state is dropped (it conflicts with the pill
   shape and is what visually reads as a clipped half-round); the pill tint +
   text color already mark the active tab. */
body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs__link {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs__link--active,
body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-tab-item.active {
  border-bottom-color: transparent !important; /* kill the protruding accent line */
  border-radius: 999px !important;             /* fully rounded, fully contained */
}

/* Mobile: same containment; the inner `.container` still scrolls horizontally. */
@media (max-width: 640px) {
  body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs {
    overflow-y: clip !important;
  }
  body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
  body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lms-course-tabs .lms-tabs__link {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
}

/* [P003] ISSUE 1-0122: Anonymous "Add to Wishlist" CTA is a misleading affordance.
   For logged-out visitors the wishlist toggle requires auth and will fail/redirect.
   The enroll button already correctly reads "Log in to Enroll". We cannot change
   the button label or its route from CSS, but we CAN make the affordance honest
   by visually demoting the wishlist control to a quiet, link-like secondary
   action (so it no longer competes as an actionable primary control) and signal
   via cursor that it is a navigational/auth step rather than an instant toggle.
   NOTE: body has no anonymous-specific class on this page, but the "Log in to
   Enroll" sibling implies the anonymous state; we scope to that DOM context.
   The proper label/route change is deferred to markup (see fix_hint). */
body.route--lms-course-detail .lms-enroll-card .lms-wishlist-toggle {
  /* demote from prominent outlined button to a quiet secondary action */
  background: transparent !important;
  box-shadow: none !important;
  border-color: hsla(214, 100%, 36%, 0.25) !important;
  opacity: 0.85;
}
body.route--lms-course-detail .lms-enroll-card .lms-wishlist-toggle:hover {
  opacity: 1;
  border-color: hsla(214, 100%, 36%, 0.45) !important;
}

/* ISSUE 1-0120 (brand "SilverCare DE" vs "SilverCare"): DEFERRED.
   This is seeded/CMS body copy ("our SilverCare DE facilities"). The text lives
   in the course Body field, not in theme markup, so it cannot be corrected from
   CSS without hiding content. Standardize the brand string in the content/seed
   data instead. No CSS rule emitted. */

/* ===== P004.css ===== */
/* =====================================================================
   P004 — Categories page (/categories)  body.route--lms-course-category
   Third-pass UI fixes. Loads LAST; uses !important to beat the inline
   styles in lms-categories.html.twig and the heavy main.css card rules.
   ===================================================================== */

/* [P004] ISSUE 1-0138: category cards look unequal because some taxonomy
   terms have a description and others have none (a data gap CSS cannot
   populate). Corrective layout fix per fix_hint ("rely on a fixed card
   layout"): reserve a consistent vertical block for the description on
   EVERY card so cards with/without a description share the same rhythm,
   and keep the badge pinned to the bottom so the grid stays aligned.
   This makes all cards visually equal regardless of description presence. */
body.route--lms-course-category .lms-categories-grid .lms-category-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Content region keeps a fixed minimum height = title (1 line) + a
   reserved 2-line description slot, so an empty/short description does not
   collapse the card relative to its neighbours. */
body.route--lms-course-category .lms-categories-grid .lms-category-card__content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 5.25rem !important; /* ~title line + 2 desc lines */
}

/* Force a uniform 2-line description box on every card. When the term has
   no description the element is absent in markup, so the reserved space in
   __content (above) holds the layout; when present, clamp to 2 lines so a
   long description never makes one card taller than the rest. */
body.route--lms-course-category .lms-categories-grid .lms-category-card__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.625rem !important; /* 2 lines at 0.875rem / 1.5 line-height */
  margin: 0 !important;
}

/* Title gets consistent bottom spacing so the gap above the description
   slot is identical whether or not a description follows. */
body.route--lms-course-category .lms-categories-grid .lms-category-card__title {
  margin: 0 0 0.5rem 0 !important;
}

/* Badge stays bottom-aligned on every card -> bottoms line up across the row. */
body.route--lms-course-category .lms-categories-grid .lms-category-card__meta {
  margin-top: auto !important;
  padding-top: 1.5rem !important;
}


/* [P004] ISSUE 1-0144: search field gave no affordance — the inline-styled
   magnifier (color #818cf8, faint indigo) was washed out and read as a
   bare rounded input. PRIOR FIX FAILED. Force a clearly visible magnifier
   icon with strong contrast and make the input padding/affordance obvious.
   Also enlarge the hit area and add a hover/focus cue on the icon. */
body.route--lms-course-category .lms-search-box {
  position: relative !important;
}

body.route--lms-course-category .lms-search-box .fa-search,
body.route--lms-course-category .lms-search-box i.fas.fa-search {
  position: absolute !important;
  left: 1.25rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #6366f1 !important;        /* solid, high-contrast indigo */
  font-size: 1.15rem !important;
  opacity: 1 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  text-shadow: 0 0 1px rgba(99, 102, 241, 0.4) !important;
}

/* Ensure the input clearly leaves room for the icon and reads as actionable
   (visible border + adequate left padding so the magnifier never overlaps text). */
body.route--lms-course-category .lms-search-box #category-search-input {
  padding-left: 3.5rem !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  cursor: text !important;
}

/* Stronger, visible focus state so keyboard users get a clear cue. */
body.route--lms-course-category .lms-search-box #category-search-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
  outline: none !important;
}

/* ISSUE 1-0151 (mobile lead card uses a flat illustration while the rest
   use photos) is a per-term image ASSET inconsistency — the differing
   image content cannot be normalised in CSS. Deferred to data/markup. */

/* ===== P005.css ===== */
/* [P005] ISSUE 1-0167: Suppress empty CATEGORY facet group (blank heading + gap before LEVEL) */
/* On the category-detail page the CATEGORY facet (.lms-category-list) renders no
   labels/options, leaving an orphan "CATEGORY" heading and a large empty gap above
   "LEVEL". Hide the whole filter group when its category list has no selectable
   options. :has() targets the group whose list contains no <label>; the second rule
   is a fallback for browsers without :has() / when the list collapses to :empty. */

/* Primary: hide the CATEGORY filter group when it contains no option labels. */
body.route--lms-course-category-detail
  .lms-catalog__sidebar
  .lms-catalog__filter-group:has(.lms-category-list):not(:has(.lms-category-list label)) {
  display: none !important;
}

/* Fallback: collapse a truly empty category list (no whitespace children). */
body.route--lms-course-category-detail
  .lms-catalog__sidebar
  .lms-category-list:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== P006.css ===== */
/* ==========================================================================
   P006 — Pricing page (THIRD-pass fixes)
   Page scope: body.route--lms-course-pricing
   Loads LAST. !important used to beat earlier skin + ui-fixes-r1 rules
   that prior passes failed to override.
   Markup reference (curl): each plan = .lms-pricing-card with
     .lms-pricing-card__price > .lms-pricing-card__amount (+ .__period on paid)
     CTA = a.lms-btn (--outline on Basic/Enterprise, --primary on recommended)
   ========================================================================== */

/* [P006] ISSUE 1-0184: Free card lacks a "/month" suffix, breaking the price
   band rhythm vs the paid cards. PRIOR FIX FAILED because it only set a
   min-height but never created the missing suffix slot. The Free card's
   .__amount is the ONLY child of .__price (no sibling .__period), so we can
   reliably synthesise a same-height placeholder suffix via ::after. */
body.route--lms-course-pricing .lms-pricing-card__price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.25rem;
  margin-bottom: 2rem !important;
  min-height: 3.25rem;
}

body.route--lms-course-pricing .lms-pricing-card__amount:only-child::after {
  content: "/forever";
  display: inline;
  margin-left: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: #475569; /* same high-contrast gray as the real /month suffix */
  align-self: baseline;
  white-space: nowrap;
}

/* Uniform title-to-price spacing across all three cards. */
body.route--lms-course-pricing .lms-pricing-card__name {
  margin-bottom: 1rem !important;
  min-height: 1.6em;
}

/* [P006] ISSUE 1-0187 + 1-0197: "/month" suffix legibility + baseline align.
   PRIOR FIX FAILED to apply visibly (overridden by .__period base rule at
   0.9375rem / #8b949e). Force a higher-contrast gray (>= 4.5:1 on white),
   bump size, and pin to the price baseline so it no longer looks detached. */
body.route--lms-course-pricing .lms-pricing-card__period {
  color: #475569 !important;     /* #475569 on #fff ≈ 7.4:1, passes AA */
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  align-self: baseline !important;
  margin-left: 0 !important;     /* gap handled by .__price gap */
  position: relative;
  top: 0;
}

/* [P006] ISSUE 1-0191 + 1-0195: CTA hierarchy consistency across siblings.
   PRIOR FIX FAILED — it gave Enterprise a unique tinted fill, leaving THREE
   different button styles (Basic ghost, Professional solid, Enterprise tint).
   Correct hierarchy = ONE primary (recommended) + identical secondary style on
   every non-recommended card. Force Basic AND Enterprise to the same solid
   secondary so the only emphasised CTA is the recommended plan. Also pin every
   CTA to the card bottom so the gap above it is uniform across cards. */
body.route--lms-course-pricing .lms-pricing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}

body.route--lms-course-pricing .lms-pricing-card__features {
  flex: 1 1 auto !important;
  margin-bottom: 1.5rem !important;
}

body.route--lms-course-pricing .lms-pricing-card .lms-btn {
  margin-top: auto !important; /* equalise last-feature-to-CTA gap (1-0195) */
}

/* Identical secondary style for both non-recommended CTAs (overrides the
   earlier per-card tint and the base --outline ghost styling). */
body.route--lms-course-pricing .lms-pricing-card:not(.lms-pricing-card--recommended) .lms-btn {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1.5px solid #6366f1 !important;
  box-shadow: none !important;
}

body.route--lms-course-pricing .lms-pricing-card:not(.lms-pricing-card--recommended) .lms-btn:hover {
  background: #e0e7ff !important;
  border-color: #4f46e5 !important;
  color: #3730a3 !important;
}

/* The single primary (recommended) CTA stays the solid brand gradient. */
body.route--lms-course-pricing .lms-pricing-card--recommended .lms-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.22) !important;
}

/* [P006] ISSUE 1-0186: tall empty light-blue band between cards and footer.
   PRIOR FIX FAILED — it targeted .lms-section, which does NOT exist on this
   page. The real cause: .lms-page is `min-height:100vh; display:flex; column`
   and .lms-page__content has `flex:1`, so the short pricing content stretches
   and leaves dead space below the grid. Stop the content area from flex-growing
   on this route so the footer rises directly under the cards, and cap bottom
   padding. (Footer still sits at/after viewport bottom on tall content.) */
body.route--lms-course-pricing .lms-page__content {
  flex: 0 0 auto !important;
  padding-bottom: 3rem !important;
}

/* ===== P007.css ===== */
/* ==========================================================================
   P007 - Instructor profile (/instructor/56)
   body.route--lms-course-instructor-profile
   THIRD-PASS fixes. Loads LAST (aggregated after main/medical/layout themes).
   !important is required: the green "Free" color comes from a low-specificity
   but later-cascading base rule (.card-lms__price--free{color:#43e97b}) and the
   prior pass omitted !important, so it lost. We force the match here.
   ========================================================================== */

/* [P007] ISSUE 1-0220: "Free" price must match numeric price color (PRIOR FIX FAILED)
   Numeric prices resolve to .card-lms__price{color:#e6edf3;font-weight:700;font-size:1.125rem}.
   The base rule .card-lms__price--free{color:#43e97b} repaints "Free" green, breaking
   sibling consistency. Force identical color/weight/size on the free variant so it is
   visually indistinguishable from numeric sibling prices. */
body.route--lms-course-instructor-profile .card-lms__price.card-lms__price--free,
body.route--lms-course-instructor-profile .card-lms__price--free {
  color: #e6edf3 !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important; /* matches the inline font-size:1.25rem on numeric price spans */
  background: none !important;
  -webkit-text-fill-color: #e6edf3 !important; /* defeat any gradient text-fill from theme layers */
  -webkit-background-clip: border-box !important;
}

/* ===== P008.css ===== */
/* [P008] Blog/News (route--lms-blog-frontend-collection) — third-pass UI fixes */

/*
 * [P008] ISSUE 1-0226: Footer 'COURSE' heading singular + lists News items.
 * [P008] ISSUE 1-0227: Footer 'SUPPORTS' heading + inner 'Supports' link mislabeled.
 *
 * DEFERRED — NOT FIXABLE IN CSS.
 * Both defects are pure text-CONTENT corrections of footer menu labels:
 *   "Course"   -> "Courses"
 *   "Supports" -> "Support"  (heading AND inner link)
 * Markup confirmed: <h4>Course</h4> / <h4>Supports</h4> in the footer.
 * CSS cannot rewrite element text content; the correct strings must be set in
 * the footer menu / block configuration (Drupal menu link titles), not styling.
 * No real corrective CSS (contrast/spacing/layout/etc.) applies here, so this
 * partial intentionally contains no overrides for these issues.
 */

/* ===== P009.css ===== */
/* =====================================================================
   P009 — Article detail (/news/166)  route--lms-blog-frontend-canonical
   THIRD-pass fixes. Loads LAST. The prior round's selectors lost the
   specificity war against css/medical.css (body.layout-medical.layout-
   minimalist:not(.is-front-page):not(.is-workspace) ...) which scores
   (0,5,0). Several rules here intentionally replicate that exact chain
   and add the route class so we win on specificity AND order.
   Body on this page: body.layout-medical.route--lms-blog-frontend-canonical.layout-minimalist
   ===================================================================== */

/* ---------------------------------------------------------------------
   [P009] ISSUE 1-0248, 1-0254: Dek / standfirst under the H1
   ("Exploring how Validation Therapy is replacing Reality Orientation...")
   PRIOR FIX FAILED because medical.css sets
     body.layout-medical.layout-minimalist:not(.is-front-page):not(.is-workspace) .lead
   = specificity (0,5,0) !important, which beat the old (0,3,1) override.
   Replicate the SAME chain + the route class so we land at (0,6,0) and
   force a slate that clears 4.5:1 on the near-white page background.
   --------------------------------------------------------------------- */
body.layout-medical.layout-minimalist.route--lms-blog-frontend-canonical:not(.is-front-page):not(.is-workspace) .lead,
body.layout-medical.layout-minimalist.route--lms-blog-frontend-canonical:not(.is-front-page):not(.is-workspace) p.lead,
body.layout-medical.layout-minimalist.route--lms-blog-frontend-canonical:not(.is-front-page):not(.is-workspace) p.lead.text-muted,
body.layout-medical.layout-minimalist.route--lms-blog-frontend-canonical:not(.is-front-page):not(.is-workspace) .article-container .lead {
  color: #334155 !important;   /* slate-700, ~9.0:1 on #ffffff */
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   [P009] ISSUE 1-0245: Teaser fade reads as a half-faded sentence
   fragment. PRIOR FIX FAILED (the fix file was never loaded; defect
   persisted). Two root causes in the inline markup:
     (a) wrapper has inline  overflow:hidden; max-height:250px  -> hard
         cut lands mid-sentence ("...developed by Naomi Feil." orphan);
     (b) the overlay fades to near-BLACK rgba(13,17,23,1) (a dark-mode
         token) on a WHITE page, so the last visible line goes muddy.
   Fix: drop the pixel hard-cut, clamp the paragraphs to whole lines so
   the cut always lands on a full line, hide trailing paragraphs, and
   re-point the overlay to fade to the white page background.
   --------------------------------------------------------------------- */
body.route--lms-blog-frontend-canonical .article-content > div[style*="max-height"] {
  max-height: none !important;
  overflow: hidden !important;
  position: relative !important;
}
/* Clamp the first paragraph to a defined number of FULL lines. */
body.route--lms-blog-frontend-canonical .article-content > div[style*="max-height"] > p:first-of-type {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
/* Hide later paragraphs entirely so the fade never crosses a fragment. */
body.route--lms-blog-frontend-canonical .article-content > div[style*="max-height"] > p:not(:first-of-type) {
  display: none !important;
}
/* Re-point the inline dark overlay to the WHITE page background and keep
   it shallow so it sits below the last full line, reading as intentional. */
body.route--lms-blog-frontend-canonical .article-content > div[style*="max-height"] > div[style*="linear-gradient"] {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 65%,
    rgba(255, 255, 255, 1) 100%
  ) !important;
  height: 70px !important;
}

/* ---------------------------------------------------------------------
   [P009] ISSUE 1-0255: On mobile the green "Log In" CTA wraps to two
   lines ("Log" / "In") while the dark "Register" sibling stays on one,
   making two equal buttons look uneven. PRIOR FIX FAILED (not loaded).
   Force single-line labels on both paywall buttons and let them shrink
   their horizontal padding before wrapping. Inline styles -> !important.
   --------------------------------------------------------------------- */
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 480px) {
  /* Allow the row to keep both buttons on one line each without overflow. */
  body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}
/* Keep "Register" from reading as un-themed near-black: brand-blue outline,
   while "Log In" stays a clear green primary action. */
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button:not(.button--primary) {
  background: #ffffff !important;
  color: #1f6feb !important;
  border: 1px solid #1f6feb !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button:not(.button--primary):hover {
  background: #eaf2fe !important;
  color: #1858c4 !important;
  border-color: #1858c4 !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button.button--primary {
  background: #1f8f3c !important;
  border: 1px solid #1f8f3c !important;
  color: #ffffff !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta a.button.button--primary:hover {
  background: #18772f !important;
  border-color: #18772f !important;
}

/* ---------------------------------------------------------------------
   [P009] ISSUE 1-0249, 1-0260: Header right-side utilities.
   "Login" renders in a medium gray (low emphasis, fails contrast on
   mobile) and the Login/Register cluster is cramped against the right
   edge with mismatched treatment. PRIOR FIX FAILED (not loaded).
   Give a consistent right gutter, balanced gap, and a dark navy "Login"
   that matches the logo wordmark (>7:1) so it reads as a primary action.
   Global header component -> no page scope.
   --------------------------------------------------------------------- */
.lms-navbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding-right: 0.5rem;
}
.lms-navbar__actions .lms-navbar__link {
  color: #142943 !important;   /* dark navy, matches logo wordmark, >7:1 */
  font-weight: 600 !important;
}
.lms-navbar__actions .lms-navbar__link:hover,
.lms-navbar__actions .lms-navbar__link:focus-visible {
  color: #1f6feb !important;
}

/* ---------------------------------------------------------------------
   [P009] ISSUE 1-0251: A small unlabeled circular control floats at the
   right viewport edge (faint, clipped) on this article for anonymous
   users. It is the floating sidebar toggle injected on layout-minimalist
   pages; it is meaningless outside a lesson/learn layout. Hide any such
   stray floating affordance on the article route so anonymous visitors
   never see an orphaned control. (Targets known floating toggles only;
   if the control is JS-injected with a different class this is a no-op
   and the issue is deferred to markup.)
   --------------------------------------------------------------------- */
body.route--lms-blog-frontend-canonical .lms-floating-sidebar-toggle,
body.route--lms-blog-frontend-canonical .article-container ~ .lms-floating-sidebar-toggle,
body.route--lms-blog-frontend-canonical .lms-floating-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== P010.css ===== */
/* [P010] ISSUE 1-0279: Footer 'COURSE' column has near-duplicate 'News & Notices' + 'News'
   links and a heading ('COURSE', singular) that does not match its contents.
   DEFERRED — CSS cannot rename/merge menu link labels or change a menu/block heading.
   These are content/data values (menu link entities + block title) and must be edited in
   the Drupal admin (menu links + footer block label). No corrective CSS is possible. */

/* ===== P011.css ===== */
/* ==========================================================================
   P011 — Contact page (route--lms-course-contact)
   Third-pass UI fixes. This partial loads LAST; uses !important where needed
   to beat heavier existing rules from site-branding.css / main.css and the
   prior failed P023 footer-logo fix.
   ========================================================================== */

/* [P011] ISSUE 1-0303: Footer 'SilverCare' logo lockup renders LARGER than the
   header lockup on mobile (PRIOR FIX FAILED).
   Root cause of the failure:
     - header brand-mark is 56px at (max-width:576px)  [site-branding.css]
     - footer brand-mark is 72px at (max-width:576px) and only trimmed to 52px
       at (max-width:480px) with no !important, so in the 481–576px band the
       footer is 72px vs the 56px header -> still visibly larger.
   Fix: clamp the footer brand-mark to the SAME height as the header brand-mark
   across the whole mobile range, with !important so it can't be re-inflated by
   the base `.lms-brand-mark--footer { height: 72px }` rule. The footer link
   wrapper sometimes adds its own height/line-height inflation, so neutralize
   that too. */
@media (max-width: 576px) {
  .lms-footer .lms-brand-mark--footer,
  .lms-footer__brand-link .lms-brand-mark--footer {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .lms-footer__brand-link {
    line-height: 1 !important;
  }
  .lms-footer__brand {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .lms-footer .lms-brand-mark--footer,
  .lms-footer__brand-link .lms-brand-mark--footer {
    height: 52px !important;
    max-height: 52px !important;
  }
}

/* [P011] ISSUE 1-0302: 'Next Steps' CTA cards vs 'Fastest Routes' buttons are
   styled inconsistently for comparable navigational intent.
   These two groups legitimately have different roles (the Next-Steps items
   carry a title + description, the Fastest-Routes items are bare action
   buttons), so rather than collapse them into one style we make them share a
   consistent visual language: same accent border colour, border-radius, hover
   lift and accent-on-hover. This unifies them as a recognisable CTA family
   while preserving the descriptive role of the cards. */
body.route--lms-course-contact .lms-contact-action-list__item {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 0.75rem; /* match the rounded pill/button family */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

body.route--lms-course-contact .lms-contact-action-list__item:hover,
body.route--lms-course-contact .lms-contact-action-list__item:focus-visible {
  border-color: #2563eb;
  background-color: rgba(37, 99, 235, 0.06);
  box-shadow: 0 6px 18px -10px rgba(37, 99, 235, 0.45);
  transform: translateY(-2px); /* same lift the .btn-lms-* family uses */
}

/* Keep the card title in the same accent on hover as the buttons' label. */
body.route--lms-course-contact .lms-contact-action-list__item:hover strong,
body.route--lms-course-contact .lms-contact-action-list__item:focus-visible strong {
  color: #2563eb;
}

/* Tighten the action list to a single, consistent stack on mobile so the two
   CTA groups read as parallel families rather than divergent layouts. */
@media (max-width: 576px) {
  body.route--lms-course-contact .lms-contact-action-list {
    gap: 0.75rem;
  }
  body.route--lms-course-contact .lms-contact-action-list__item {
    padding: 1rem 1.125rem;
  }
}

/* [P011] E00-public round-1: desktop full-page screenshot had a 42px white
   strip on the right. Root cause: the decorative ::after on
   .lms-contact-hero__copy was absolutely positioned against the hero grid
   because the copy card was not positioned, so it expanded scrollWidth outside
   the viewport. Position the card so its overflow:hidden clips the decoration. */
body.route--lms-course-contact .lms-contact-hero__copy {
  position: relative;
}

/* ===== P012.css ===== */
/* [P012] ISSUE 1-0320: Consistent vertical rhythm between glossary card title and body regardless of title length (mobile).
   ROOT CAUSE OF PRIOR FAILURE: the title h3 carried only `mb-0` and no reserved height, so a single-line
   title ("Fall Prevention") and a wrapped two-line title ("Family Communication") produced different header
   heights and different title-to-body gaps. Reserving a min-height for the title equal to two text lines makes
   every card's body start at the same vertical offset, and a fixed margin-bottom guarantees an identical gap.
   h3 base = font-size:1.375rem; line-height:1.2 => single line ≈ 1.65rem, two lines ≈ 3.3rem. */
@media (max-width: 991.98px) {
  body.route--lms-course-glossary .lms-glossary-page .glossary-item-card .card .card-body .card-title,
  body.route--lms-course-glossary .lms-glossary-page .glossary-item-card .card-title.lms-text-gradient {
    /* Reserve space for up to two title lines so single- and double-line headers align. */
    min-height: calc(1.375rem * 1.2 * 2) !important; /* ≈ 3.3rem */
    line-height: 1.2 !important;
    display: flex !important;
    align-items: flex-start !important;
    /* Fixed, consistent gap to the definition body for every card (overrides mb-0). */
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Neutralise the body's leading margin variability: rely on the title block's reserved height + its
     own margin-bottom for the gap, and keep the bottom spacing (mb-4) consistent below the definition. */
  body.route--lms-course-glossary .lms-glossary-page .glossary-item-card .card .card-body .lms-glossary-definition {
    margin-top: 0 !important;
  }
}

/* ===== P013.css ===== */
/* ==========================================================================
   P013 — Forum index (/forum, body.route--lms-forum-index)
   THIRD-pass UI fixes. This partial loads LAST.
   ========================================================================== */

/* [P013] ISSUE 1-0341: Mobile topic cards — titles wrap to 3-4 lines and body
   text wraps to many short lines ending in single-word orphans, producing a
   ragged, cramped column.
   PRIOR FIX FAILED because (a) it was scoped to @media (max-width:480px) so it
   never applied at the typical phone width tested (~390-414px CSS px is < 480,
   but the visible failure persisted because) (b) it left the card's heavy
   1.5rem horizontal padding intact — the text measure stayed narrow — and (c)
   it did nothing to balance the wrapping itself, so orphan lines remained.
   Real fix: widen the breakpoint, cut the card's side padding to reclaim
   horizontal measure, tighten title line-height, and use text-wrap:balance/
   pretty to push trailing single words back onto the previous line. */
@media (max-width: 640px) {
  /* Reclaim measure: trim the card's horizontal padding so the text column is
     meaningfully wider (was 1.5rem each side ≈ 48px of lost width). */
  body.route--lms-forum-index .lms-forum-item {
    padding: 1.15rem 1rem !important;
  }

  /* Titles: tighter leading + balanced wrap so 3-4 short lines become 2-3
     evenly-filled lines with no dangling single word. */
  body.route--lms-forum-index .lms-forum-item__content h3 {
    line-height: 1.2 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  body.route--lms-forum-index .lms-forum-item__content h3 a {
    text-wrap: balance;
  }

  /* Body paragraph: comfortable leading and a "pretty" wrap that avoids the
     last-line single-word orphan (e.g. "stories." / "shifts?"). Let it use the
     full reclaimed width by removing the desktop max-width clamp on mobile. */
  body.route--lms-forum-index .lms-forum-item__content p {
    line-height: 1.5 !important;
    max-width: none !important;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
}

/* ===== P014.css ===== */
/* ==========================================================================
   P014 — Forum topic (route--entity-lms-forum-topic-canonical)
   THIRD-PASS UI fixes. Loads LAST. !important used to beat inline styles and
   earlier round-1 rules that did not resolve these defects.
   ========================================================================== */

/* [P014] ISSUE 1-0346: breadcrumb current crumb repeats the full long topic
   title verbatim and never truncates. The markup carries inline
   `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` but NO
   max-width, so the ellipsis never engages and the crumb runs the entire
   length of the bar. Constrain the final crumb so it actually truncates with
   an ellipsis and stays on one line, keeping it visually subordinate to the
   H1 below. (Adding the intermediate forum-container crumb requires markup/
   data changes in the controller — see deferred.) */
body.route--entity-lms-forum-topic-canonical .lms-breadcrumb > span:last-child {
  display: inline-block !important;
  max-width: clamp(140px, 38vw, 420px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

/* [P014] ISSUE 1-0350: low-contrast secondary text. PRIOR FIX FAILED because
   the helper sentence carries an INLINE `color:#8b949e` (and the post date
   uses .lms-text-muted) on the light card backgrounds these cards actually
   render on. Inline styles + theme defaults must be beaten with !important.
   Darken both toward #586069 (>= 4.5:1 on the light card / white bg). */

/* Post meta date — span.lms-text-muted next to the author name. */
body.route--entity-lms-forum-topic-canonical .lms-forum-comment__meta .lms-text-muted,
body.route--entity-lms-forum-topic-canonical .lms-forum-comment__meta span {
  color: #586069 !important;
  opacity: 1 !important;
}

/* "There are 5 replies ... You must hop in" helper line under the Join card.
   Inline color:#8b949e on the teaser CTA paragraph — override it. */
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta p {
  color: #586069 !important;
  opacity: 1 !important;
}
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta p strong {
  color: #2c333a !important;
}

/* Catch any remaining muted secondary text on this page (body, generic). */
body.route--entity-lms-forum-topic-canonical .lms-text-muted {
  color: #586069 !important;
}

/* [P014] ISSUE 1-0358: floating back-to-top FAB overlaps the right edge of the
   full-width post card on mobile. PRIOR FIX FAILED: it set right/bottom to
   clamp(20px,3vw,32px) which on a ~390px viewport collapses to 20px, while the
   Bootstrap .container card edge sits only ~12px from the viewport edge — so
   the 48px button (right 20px..68px) still lands squarely on the card.
   Geometrically a corner FAB cannot avoid a near-full-width card, so the
   third-pass fix: (a) shrink the FAB on mobile, (b) tuck it to the extreme
   corner aligned with the container gutter, and (c) wrap it in a solid white
   halo ring + strong elevation so it reads as a distinct floating control
   clearly lifted off the card rather than sitting on the border. Also add
   scroll-bottom breathing room so it floats over the gutter/background. */
@media (max-width: 992px) {
  body.route--entity-lms-forum-topic-canonical #lms-back-to-top,
  body.route--entity-lms-forum-topic-canonical .lms-back-to-top {
    width: 42px !important;
    height: 42px !important;
    right: 10px !important;
    bottom: 14px !important;
    z-index: 1300 !important;
    background: #ffffff !important;
    /* white halo ring separates it from the card border/content underneath */
    border: 1px solid rgba(0, 119, 182, 0.28) !important;
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.95),
      0 10px 22px rgba(13, 17, 23, 0.28) !important;
  }
  body.route--entity-lms-forum-topic-canonical #lms-back-to-top i,
  body.route--entity-lms-forum-topic-canonical .lms-back-to-top i {
    font-size: 0.9rem !important;
  }
  /* Give the section/page a little bottom space so the FAB's resting position
     clears the card body and floats over the background gutter beneath it. */
  body.route--entity-lms-forum-topic-canonical .lms-page__content {
    padding-bottom: 64px !important;
  }
}

/* ===== P015.css ===== */
/* ==========================================================================
   [P015] Certificate Verify — third-pass UI fixes
   Page route class: route--lms-certificate-verify
   Loaded LAST; uses !important to beat stubborn existing rules / inline styles.
   ========================================================================== */

/* [P015] ISSUE 1-0370: Input placeholder too light/low-contrast on white field.
   Raise placeholder color to >=3:1 (#6b7280 = ~4.83:1 on #fff) while still
   reading as placeholder. Target the real input on this page. PRIOR FIX FAILED. */
body.route--lms-certificate-verify .lms-certificate-verification-form .form-control::placeholder,
body.route--lms-certificate-verify #edit-certificate-code::placeholder,
body.route--lms-certificate-verify input[name="certificate_code"]::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important; /* Firefox lowers placeholder opacity by default */
}
/* WebKit/legacy vendor-prefixed pseudo-elements for full coverage */
body.route--lms-certificate-verify .lms-certificate-verification-form .form-control::-webkit-input-placeholder,
body.route--lms-certificate-verify #edit-certificate-code::-webkit-input-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}
body.route--lms-certificate-verify .lms-certificate-verification-form .form-control::-moz-placeholder,
body.route--lms-certificate-verify #edit-certificate-code::-moz-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}
body.route--lms-certificate-verify .lms-certificate-verification-form .form-control:-ms-input-placeholder,
body.route--lms-certificate-verify #edit-certificate-code:-ms-input-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* [P015] ISSUE 1-0376: Verify button has a heavy, offset drop shadow that looks
   detached/inconsistent. Replace with a subtle, centered elevation. */
body.route--lms-certificate-verify .lms-certificate-verification-form .button--primary,
body.route--lms-certificate-verify .lms-certificate-verification-form #edit-submit,
body.route--lms-certificate-verify .lms-certificate-verification-form input[type="submit"].btn {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}
body.route--lms-certificate-verify .lms-certificate-verification-form .button--primary:hover,
body.route--lms-certificate-verify .lms-certificate-verification-form #edit-submit:hover,
body.route--lms-certificate-verify .lms-certificate-verification-form input[type="submit"].btn:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16) !important;
}

/* ===== P016a.css ===== */
/* ==========================================================================
   P016a — User Login (/user/login)  THIRD-PASS fixes
   Active skin: medical / minimalist (body.layout-medical.layout-minimalist)
   route_class: route--user-login
   This partial loads LAST. !important is used to beat base medical.css /
   light-mode.css rules (.lms-auth{min-height:100vh} etc.).
   ========================================================================== */

/* [P016a] ISSUE 1-0390: mobile vertical balance — PRIOR FIX FAILED.
   Root cause the previous pass missed: base medical.css sets
   `.lms-auth { min-height:100vh; display:flex; align-items:center }`, BUT
   `.lms-auth` lives inside `.lms-page__content` (padding:2rem) which itself
   sits below a position:fixed 64px header. So the card is centered inside a
   full 100vh box that is *pushed down* by the header + content padding,
   producing the large empty gap above the card and a top-heavy composition.
   The prior fix only re-stated align-items:center (already the default) so it
   did nothing. Real fix: kill the wrapper's top padding on this route and make
   the auth area only as tall as the viewport space actually left below the
   fixed header, so true vertical centering lands inside the visible area. */
body.route--user-login .lms-page__content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.route--user-login .lms-auth {
  min-height: calc(100vh - 64px) !important;
  min-height: calc(100dvh - 64px) !important; /* honor mobile dynamic toolbars */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 480px) {
  body.route--user-login .lms-auth {
    /* Tall phones still leave excess room; trim symmetric padding and let
       flex centering balance the remaining space top vs. bottom. */
    padding: 1.5rem 1rem !important;
    justify-content: center !important;
  }
  /* Guarantee the card never hugs the header: a small equal min top/bottom
     keeps balance even when the card is taller than the viewport. */
  body.route--user-login .lms-auth__container {
    margin: auto 0 !important;
  }
}

/* [P016a] ISSUE 1-0384: email field reads as permanently highlighted.
   The email input carries autofocus, so its blue :focus ring shows even on a
   first, un-interacted paint, making it look like inconsistent default styling
   vs. the gray password field. Normalize BOTH inputs to an identical default
   border, and only paint the focus ring on :focus-visible (keyboard/explicit
   interaction) so a bare autofocus no longer renders the heavy blue ring on
   load. Both fields now share one resting appearance. */
body.route--user-login .lms-auth input.form-control,
body.route--user-login .lms-auth input.form-text {
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  outline: none !important;
}
body.route--user-login .lms-auth input.form-control:focus-visible,
body.route--user-login .lms-auth input.form-text:focus-visible {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}
/* Pointer-focus (click into a field) should also show the ring, but a plain
   programmatic autofocus on load should not. */
body.route--user-login .lms-auth input.form-control:focus:not(:focus-visible),
body.route--user-login .lms-auth input.form-text:focus:not(:focus-visible) {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

/* ===== P016b.css ===== */
/* ==========================================================================
   P016b — /user/register (route--user-register, layout-minimalist)
   THIRD-PASS UI fixes. This partial loads LAST; uses !important + high,
   route-scoped specificity to beat stubborn earlier rules and prior failed
   fixes. Actual body classes: "layout-medical route--user-register
   layout-minimalist".
   ========================================================================== */

/* [P016b] ISSUE 1-0401, 1-0409: Header "Login" (.lms-navbar__link) still reads
   as plain dark/near-black static text while the sibling "Back to Home"
   (.lms-btn--outline anchor) is a clearly clickable bordered action. PRIOR
   FIXES set color:#0077b6 with adequate specificity but WITHOUT !important and
   the verifier still sees dark text, so harden it: force the same unified
   secondary action styling on BOTH header links so they read as one consistent,
   clickable nav group (matching the bordered "Back to Home" affordance). */
body.route--user-register .lms-navbar .lms-navbar__actions a.lms-navbar__link {
  color: #0077b6 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #0077b6 !important;
  border-radius: 0.5rem !important;
  padding: 0.4rem 0.9rem !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
body.route--user-register .lms-navbar .lms-navbar__actions a.lms-navbar__link:hover {
  color: #ffffff !important;
  background: #0077b6 !important;
  border-color: #0077b6 !important;
}
body.route--user-register .lms-navbar .lms-navbar__actions a.lms-navbar__link:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px !important;
}
/* Keep "Back to Home" visually aligned (same height/blue) so the pair matches. */
body.route--user-register .lms-navbar .lms-navbar__actions a.lms-btn--outline {
  color: #0077b6 !important;
  border-color: #0077b6 !important;
}
body.route--user-register .lms-navbar .lms-navbar__actions a.lms-btn--outline:hover {
  color: #ffffff !important;
  background: #0077b6 !important;
}

/* [P016b] ISSUE 1-0411: Email/Username placeholders still render as light grey
   on mobile (and desktop). The blocking rule is light-mode.css:2516
   `body.layout-minimalist .lms-auth input::placeholder { color:#94a3b8
   !important }` (specificity 0,2,2 + !important). PRIOR FIX at
   route--user-register scope tied or slightly beat it but the verifier still
   reads light grey — so push specificity well above the blocker AND scope to
   the live body classes, with a clearly darker grey (#475467 ~ 7:1 on white).
   Per-input-type selectors are added so vendor-prefixed pseudo-elements and
   the email/text inputs are all covered. */
body.layout-minimalist.route--user-register .lms-auth input::placeholder,
body.layout-minimalist.route--user-register .lms-auth input[type="email"]::placeholder,
body.layout-minimalist.route--user-register .lms-auth input[type="text"]::placeholder,
body.layout-minimalist.route--user-register .lms-auth input[type="password"]::placeholder,
body.layout-minimalist.route--user-register .lms-auth input.form-control::placeholder,
body.layout-minimalist.route--user-register .lms-auth #edit-mail::placeholder,
body.layout-minimalist.route--user-register .lms-auth #edit-name::placeholder {
  color: #475467 !important;
  opacity: 1 !important;
}
/* WebKit/legacy prefixed variants — some engines ignore the standard one when
   a prefixed !important rule exists earlier; declare them explicitly. */
body.layout-minimalist.route--user-register .lms-auth input::-webkit-input-placeholder {
  color: #475467 !important;
  opacity: 1 !important;
}
body.layout-minimalist.route--user-register .lms-auth input::-moz-placeholder {
  color: #475467 !important;
  opacity: 1 !important;
}
body.layout-minimalist.route--user-register .lms-auth input:-ms-input-placeholder {
  color: #475467 !important;
  opacity: 1 !important;
}

/* ===== P017.css ===== */
/* ============================================================
   P017 — Learning dashboard (route--lms-progress-dashboard)
   THIRD-pass UI fixes. Loads LAST.
   ============================================================ */

/* [P017] ISSUE 1-0427: "READY TO START" status badge renders in two different
   color treatments on one page.

   PRIOR FIX FAILED because:
   (a) it scoped to body.route--lms-progress-my-courses (wrong page — this is the
       dashboard route), and
   (b) the unscoped attempt used plain class selectors (.lms-learning-card__badge.is-idle)
       which lose the cascade to the layout-prefixed rules in light-mode.css:2342
       (body.layout-minimalist ... is-idle -> amber #fffbeb/#b45309) and
       playful.css:1135 (body.layout-playful.layout-minimalist ... is-idle ->
       orange #fff7ed/#c2410c), all carrying !important.
   Also, the hero spotlight status span has NO .is-idle class in markup, so it
   keeps the default indigo treatment (#eef2ff/#4338ca = "purple on lavender").

   Fix: force ONE shared idle treatment for BOTH the list-card idle badge AND the
   bare hero spotlight status (which on this page represents the ready-to-start
   featured course). Selectors are built to out-specify and match the layout
   prefixes so they win regardless of the active layout (minimalist / playful). */

/* List cards: idle badge -> unified blue idle treatment */
body.route--lms-progress-dashboard .lms-learning-card__badge.is-idle,
body.layout-minimalist.route--lms-progress-dashboard .lms-learning-card__badge.is-idle,
body.layout-playful.layout-minimalist.route--lms-progress-dashboard:not(.is-front-page):not(.is-workspace) .lms-learning-card__badge.is-idle,
/* Hero spotlight status (no .is-idle in markup) -> SAME unified treatment */
body.route--lms-progress-dashboard .lms-learning-spotlight__status,
body.layout-minimalist.route--lms-progress-dashboard .lms-learning-spotlight__status,
body.layout-playful.layout-minimalist.route--lms-progress-dashboard:not(.is-front-page):not(.is-workspace) .lms-learning-spotlight__status {
  background: #e8f1fb !important;
  border-color: #b6d4f0 !important;
  color: #1d5a8a !important;
}

/* Keep the COMPLETED and IN-PROGRESS states distinct from idle so the unified
   idle color above does not bleed into other statuses. Re-assert the existing
   green completed treatment on the hero status when it carries is-completed,
   and ensure the default (in-progress) hero status keeps a separate blue tone
   only when NOT idle is impossible to detect in CSS — so we leave completed and
   list in-progress to their existing rules and only override the idle/default
   above. Completed re-assert for safety on this route: */
body.route--lms-progress-dashboard .lms-learning-spotlight__status.is-completed,
body.route--lms-progress-dashboard .lms-learning-card__badge.is-completed,
body.layout-minimalist.route--lms-progress-dashboard .lms-learning-spotlight__status.is-completed,
body.layout-minimalist.route--lms-progress-dashboard .lms-learning-card__badge.is-completed {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

/* [P017] ISSUE 1-0417: Course cards with no thumbnail render a pale, near-empty
   placeholder graphic that breaks the photographic visual weight of the row.
   When the markup has an <img> (thumbnail_url present) nothing changes; when the
   placeholder span is shown instead, give it a branded gradient + centered icon
   so it reads as an intentional cover rather than a wireframe. Mirrors the same
   treatment for the hero spotlight placeholder for consistency. */
body.route--lms-progress-dashboard .lms-learning-card__placeholder,
body.route--lms-progress-dashboard .lms-learning-spotlight__placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #0a4d7c 0%, #0077b6 55%, #1d8ecf 100%) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
body.route--lms-progress-dashboard .lms-learning-card__placeholder i,
body.route--lms-progress-dashboard .lms-learning-spotlight__placeholder i {
  font-size: 2.5rem !important;
  opacity: 0.9 !important;
}

/* Ensure real <img> thumbnails fully cover the media box so a low-contrast or
   off-aspect source image (the "pale graphic" reported on the German Geriatric
   card) fills the frame with consistent visual weight rather than letterboxing
   to a washed-out empty area. */
body.route--lms-progress-dashboard .lms-learning-card__media img,
body.route--lms-progress-dashboard .lms-learning-spotlight__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #0a4d7c;
}

/* ===== P018.css ===== */
/* ==========================================================================
   P018 — My Courses (route--lms-progress-my-courses)
   THIRD-pass UI defect fixes. Loaded LAST. Brand SilverCare (medical/blue).
   Several issues are marked PRIOR FIX FAILED — these use higher-specificity
   selectors + !important to actually beat the stubborn base/earlier rules.
   ========================================================================== */

/* [P018] ISSUE 1-0446: "All" filter chip has no visible total count.
   The template DOES output <span>{{ summary.all }}</span> on the All button,
   but when the chip is .is-active the gradient background + the small white
   count badge read as a bare "toggle switch" with no number. Force the count
   badge on every filter button (active included) to be a clearly visible,
   high-contrast pill so the count on "All" matches its siblings. */
body.route--lms-progress-my-courses .lms-learning-filters__button > span {
  display: inline-flex !important;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  background: rgba(0, 119, 182, 0.14);
  color: #0a4f7a;
  font-weight: 700;
  border-radius: 999px;
}
/* On the active (gradient) chip, the count must read on the dark gradient. */
body.route--lms-progress-my-courses .lms-learning-filters__button.is-active > span {
  background: rgba(255, 255, 255, 0.92);
  color: #4453b8;
}

/* [P018] ISSUE 1-0448: redundant zero-state indicators on the queue card.
   PRIOR FIX FAILED — it only hid the status word in the meta row, so the card
   still showed "0% complete" (meta) AND "Progress 0%" (progress block) AND an
   empty track: four indicators of the same state. Root cause: the entire
   .lms-learning-card__meta row duplicates the labelled progress block beneath
   it. Remove the meta row entirely and keep the single, labelled progress
   indicator ("Progress …%" + track) as the one source of truth. */
body.route--lms-progress-my-courses .lms-learning-card__meta {
  display: none !important;
}

/* [P018] ISSUE 1-0457: queue card meta/progress text fails WCAG AA on white.
   PRIOR FIX FAILED — the base rule
   `.lms-learning-card__meta,.lms-learning-empty{color:#8b949e}` (~3.1:1) and the
   light-grey progress label were not beaten. Force the progress label/value to
   an AA-passing dark grey with !important so the faint text is gone. The meta
   row is now hidden (1-0448), but the progress block remains visible, so we
   harden its colours here. */
body.route--lms-progress-my-courses .lms-learning-progress__meta,
body.route--lms-progress-my-courses .lms-learning-progress__meta span {
  color: #4a5560 !important; /* ~6.7:1 on #fff */
}
body.route--lms-progress-my-courses .lms-learning-progress__meta strong {
  color: #1f2933 !important;
}

/* ==========================================================================
   MOBILE (<=767px) — covers the mobile capture width regardless of the
   exact device width the verifier used (prior 480px breakpoint was too tight).
   ========================================================================== */
@media (max-width: 767px) {

  /* [P018] ISSUE 1-0450: category + status pills float across the thumbnail
     covering the artwork. PRIOR FIX FAILED TWICE — translucent backings still
     sat over the centre of the image. The chips are children of the media link
     (cannot be moved to the card body via CSS), so instead pin the chip row to
     the BOTTOM edge of the image, make it a full-width contained bar with a
     solid dark scrim behind it, and stack the chips so they never straddle or
     cover the central artwork. */
  body.route--lms-progress-my-courses .lms-learning-card__media {
    position: relative;
  }
  body.route--lms-progress-my-courses .lms-learning-card__chips {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0.6rem !important;
    gap: 0.4rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: linear-gradient(
      to top,
      rgba(8, 12, 18, 0.92) 0%,
      rgba(8, 12, 18, 0.78) 60%,
      rgba(8, 12, 18, 0) 100%
    ) !important;
  }
  body.route--lms-progress-my-courses .lms-learning-card__category {
    max-width: 100%;
    flex: 0 1 auto;
    padding: 0.25rem 0.55rem !important;
    font-size: 0.6rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
  }
  body.route--lms-progress-my-courses .lms-learning-card__badge {
    min-height: auto !important;
    padding: 0.22rem 0.55rem !important;
    font-size: 0.6rem !important;
  }
  body.route--lms-progress-my-courses .lms-learning-card__badge.is-idle {
    background: rgba(0, 119, 182, 0.95) !important;
    border-color: rgba(0, 119, 182, 0.95) !important;
    color: #ffffff !important;
  }
  body.route--lms-progress-my-courses .lms-learning-card__badge.is-completed {
    background: rgba(67, 233, 123, 0.95) !important;
    border-color: rgba(67, 233, 123, 0.95) !important;
    color: #0b2e1a !important;
  }

  /* [P018] ISSUE 1-0454: hero stat cards (IN PROGRESS/COMPLETED/NOT STARTED)
     duplicate the counts already on the queue filter chips, doubling vertical
     bloat on mobile. PRIOR FIX FAILED — the 480px breakpoint was narrower than
     the captured viewport so the stat cards were never hidden. Collapse the
     hero summary on mobile here (≤767px); the filter chips remain the single
     source of the counts. */
  body.route--lms-progress-my-courses .lms-my-courses-page__summary {
    display: none !important;
  }

  /* [P018] ISSUE 1-0457 (mobile reinforce): progress meta text AA contrast. */
  body.route--lms-progress-my-courses .lms-learning-progress__meta,
  body.route--lms-progress-my-courses .lms-learning-progress__meta span {
    color: #4a5560 !important;
  }
}

/* ===== P019.css ===== */
/* ==========================================================================
   P019 — Lesson Player (route--lms-progress-lesson-view)
   Theme: lms_theme · Skin: medical (.layout-medical.layout-minimalist) · SilverCare
   THIRD PASS. This partial is concatenated into ui-fixes-r1-pages3.css
   (weight 1003) and therefore loads AFTER main.css / light-mode.css /
   medical.css. Selectors here carry the route class AND match-or-exceed the
   layout-skin specificity (>= 0,3,0) so the prior !important base rules lose.

   NOT CSS-FIXABLE (deferred): the lesson "player" panel embeds a full themed
   Drupal page via an <iframe> whose src resolves to a 404. Everything visible
   inside that panel (the second SilverCare header, the "page could not be
   found" message, the duplicate footer with truncated contact info, the
   in-panel back-to-top button, the second Theater Mode control) lives in a
   SEPARATE iframe document. Parent-page CSS cannot reach into a cross-document
   iframe, so 1-0461, 1-0463, 1-0465, 1-0468, 1-0469, 1-0473 and the in-panel
   instance of 1-0472 require a route/template/data fix, not CSS.
   ========================================================================== */

/* [P019] ISSUE 1-0475 (+1-0464): Lead/body paragraph contrast (WCAG AA).
   Base body copy uses dark-mode tokens (#8b949e / muted blue-gray) which fall
   well below 4.5:1 on the white card. Force a near-black neutral on every
   descendant of the rendered lesson body so the lead paragraph matches the
   list/heading contrast. High-specificity + !important to beat .lead and the
   layout-skin overrides. */
body.route--lms-progress-lesson-view .lms-learn__text-content,
body.route--lms-progress-lesson-view .lms-learn__text-content p,
body.route--lms-progress-lesson-view .lms-learn__text-content li,
body.route--lms-progress-lesson-view .lms-learn__text-content span,
body.route--lms-progress-lesson-view .lms-learn__text-content .lead,
body.route--lms-progress-lesson-view .lms-learn__description,
body.route--lms-progress-lesson-view .lms-learn__description p,
body.route--lms-progress-lesson-view .lms-learn__description li,
body.route--lms-progress-lesson-view .lms-learn__description span,
body.route--lms-progress-lesson-view .lms-learn__description .lead,
body.route--lms-progress-lesson-view .lms-learn__description *:not(a):not(i):not(strong) {
  color: #1f2733 !important;   /* ~13:1 on #fff, ~12:1 on #f6fcff card */
}

/* [P019] ISSUE 1-0467 (PRIOR FIX FAILED): Active sidebar lesson row sits
   "proud" of its siblings — it gets a fill on the <li> AND a second, stronger
   fill on the inner <a>, so it reads as a solid full-width lavender block with
   a left accent that bulges past the plain-white rows.
   Root cause the prior pass missed: medical.css applies
     .lms-learn__lesson-item--active .lms-learn__lesson-link { background:.1 !important }
   at specificity (0,3,0); the prior fix targeted `...--active a` (0,2,1) and
   lost. We now exceed (0,3,0) with the route class and REMOVE the inner fill,
   keeping a single subtle wash on the row + a flush left accent that shares the
   exact 3px inset of the inactive rows' transparent border. */
body.route--lms-progress-lesson-view .lms-learn__lesson-item {
  border-left: 3px solid transparent !important;   /* same inset as siblings */
}
body.route--lms-progress-lesson-view .lms-learn__lesson-item--active {
  background: rgba(0, 119, 182, 0.07) !important;   /* one subtle wash only */
  border-left-color: #0077b6 !important;
}
/* Kill the second (doubled) fill on the inner link so the row no longer sits
   proud; keep text color/weight for legibility. */
body.route--lms-progress-lesson-view .lms-learn__lesson-item--active .lms-learn__lesson-link,
body.route--lms-progress-lesson-view .lms-learn__lesson-item--active a {
  background: transparent !important;
  border-left: 0 !important;
  color: #0a4f72 !important;
  font-weight: 600 !important;
}

/* [P019] ISSUE 1-0476 (PRIOR FIX FAILED): Active "Overview" pill clipped by the
   rounded tab-container corner. Root cause: the container is a FULL pill
   (border-radius:999px, light-mode.css) with only 0.35rem padding, so its
   curved corner cuts across the first/active pill's bottom-left. Just adding
   padding (prior pass) wasn't enough because a 999px container corner still
   intrudes. Fix: give the container a modest rounded-RECT radius (corner no
   longer curves into the pill row) plus generous, even inner padding, and make
   the active pill's own radius small so it can never collide with the corner.
   overflow:visible guarantees the pill + its shadow are not clipped. */
body.route--lms-progress-lesson-view .lms-learn__tabs-container .lms-nav-tabs,
body.route--lms-progress-lesson-view .lms-nav-tabs {
  border-radius: 14px !important;     /* rounded-rect, not full pill */
  padding: 0.5rem !important;          /* even inset on all sides */
  overflow: visible !important;        /* never clip the active pill/shadow */
  align-items: center !important;
}
body.route--lms-progress-lesson-view .lms-learn__tabs-container .lms-nav-tabs .lms-tab-item,
body.route--lms-progress-lesson-view .lms-nav-tabs .lms-tab-item {
  border-radius: 8px !important;       /* matches the container's inner corner */
}
body.route--lms-progress-lesson-view .lms-learn__tabs-container .lms-nav-tabs .lms-tab-item.active,
body.route--lms-progress-lesson-view .lms-nav-tabs .lms-tab-item.active {
  border-radius: 8px !important;
  /* shadow now sits clear of the container edge */
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.20) !important;
}

/* [P019] ISSUE 1-0466: Course-progress bar renders as a thin empty
   line/ellipse with no visible track. Root cause: main.css sets
     .lms-progress-bar       { border-radius:50% }
     .lms-progress-bar__fill { border-radius:50% }
   On a full-width 6px bar, 50% radius collapses it into an ellipse, so the
   empty (0%) track is invisible/broken. Render a proper, visible pill track
   with rounded ends, slightly taller for legibility; the fill keeps rounded
   ends and a min-width so any started/non-zero progress is always visible. */
body.route--lms-progress-lesson-view .lms-learn__progress-wrapper .lms-progress-bar {
  height: 8px !important;
  border-radius: 999px !important;     /* pill, not ellipse */
  background: #d7ecf8 !important;      /* visible track on the white sidebar */
  overflow: hidden !important;
}
body.route--lms-progress-lesson-view .lms-learn__progress-wrapper .lms-progress-bar__fill {
  height: 100% !important;
  border-radius: 999px !important;
}
/* When progress > 0 the fill must read as a real segment, never a dot. */
body.route--lms-progress-lesson-view .lms-learn__progress-wrapper .lms-progress-bar__fill[data-progress]:not([data-progress="0.00"]):not([data-progress="0"]) {
  min-width: 8px !important;
}

/* ===== P020.css ===== */
/* P020 quiz-take — THIRD-pass fixes. Loads LAST. Scoped to body.route--lms-quiz-take. */

/* [P020] ISSUE 1-0488: mobile intro-card meta box overflows the card's right edge.
   ROOT CAUSE: the prior (2nd-pass) fix forced .lms-quiz__meta to position:fixed and, on
   mobile, docked it to the bottom edge full-width. That removed it from the card flow but
   the verifier still sees a grey meta box breaking the card framing / horizontal overflow.
   FIX: on mobile, put the meta box BACK IN FLOW inside the card, contained within the card
   padding with box-sizing + width:auto so its left/right inset matches the heading and
   description text and its right border stays inside the card's rounded corner.
   We override the 2nd-pass @media(max-width:480px) AND the base fixed positioning. */

@media (max-width: 480px) {
  body.route--lms-quiz-take .lms-quiz__meta {
    position: static !important;   /* defeat the fixed/docked chip on small screens */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: auto !important;        /* let it size to the card content box, not 100vw */
    max-width: 100% !important;    /* never exceed the card's content width */
    margin: 0 0 0.25rem 0 !important;  /* sit flush inside card padding, no negative bleed */
    box-sizing: border-box !important;
    border-radius: 0.5rem !important;  /* restore contained rounded box (not edge-to-edge 0) */
    box-shadow: none !important;
    /* keep the light-mode look from light-mode.css; ensure dark-fix bg doesn't leak */
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    /* wrap the meta items so nothing pushes past the right edge */
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
    justify-content: flex-start !important;
    padding: 0.85rem 1rem !important;
  }
  body.route--lms-quiz-take .lms-quiz__meta span {
    min-width: 0 !important;       /* allow flex items to shrink instead of overflowing */
    flex: 0 1 auto !important;
  }
  /* the bottom-dock no longer exists, so reclaim the extra submit padding the 2nd pass added */
  body.route--lms-quiz-take .lms-quiz__submit-wrap {
    padding-bottom: 3rem !important;
  }
  /* header card padding may have been overridden to 2rem by light-mode; tighten on mobile so
     the contained meta box has matching left/right inset with the title/description */
  body.route--lms-quiz-take .lms-quiz__header-card {
    padding: 1.5rem !important;
    overflow: hidden !important;   /* hard-clip any residual child bleed at the rounded corner */
  }
}

/* ===== P021.css ===== */
/* ==========================================================================
   P021 — Quiz Result page (route--lms-quiz-result)  THIRD-pass fixes
   Active skin: layout-medical + layout-minimalist (SilverCare light theme).

   This partial loads LAST. The owning Twig template ships an inline <style>
   block in the page <body>, and light-mode.css re-skins the hero in light
   mode. Prior r1 fixes for the accent seam (1-0511) and the PASSED badge
   contrast (1-0514) did not win in the rendered light theme, so the rules
   below are re-asserted with the FULL active body selector
   (body.route--lms-quiz-result.layout-minimalist) for extra specificity and
   use !important to beat both the inline template styles and light-mode.css.
   ========================================================================== */

/* [P021] ISSUE 1-0511: hero top accent bar showed an abrupt blue->green seam
   with a darker pixel at the right corner. PRIOR FIX (a 3-stop gradient) still
   read as a hard seam. Per the issue's allowed remedy, use a SINGLE consistent
   accent color (no gradient => no seam) and clip it to the card's light-theme
   radius (1rem) so no darker edge bleeds past the rounded corner. */
body.route--lms-quiz-result .lms-result-hero,
body.route--lms-quiz-result.layout-minimalist .lms-result-hero {
  overflow: hidden !important;
}
body.route--lms-quiz-result .lms-result-hero::before,
body.route--lms-quiz-result.layout-minimalist .lms-result-hero::before {
  background: #4f46e5 !important;        /* solid SilverCare light-theme primary */
  background-image: none !important;     /* kill any inherited linear-gradient */
  height: 4px !important;
  border-radius: 1rem 1rem 0 0 !important; /* match light-mode hero radius (1rem) */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* [P021] ISSUE 1-0514: PASSED badge text + trophy were medium-green (#3fb950 /
   #059669) on a pale-green pill — borderline WCAG AA. PRIOR FIX (#15803d on a
   12%-opacity pill) did not visibly land in the light theme. Re-assert with the
   active body selector: deep green text (#166534 ~ 7:1 on the pill) on a more
   saturated green pill with a defined border, so both label and icon clear AA. */
body.route--lms-quiz-result .lms-result-badge--pass,
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--pass {
  color: #166534 !important;
  background: #dcfce7 !important;               /* deeper than the old pale pill */
  border: 1px solid #166534 !important;
}
body.route--lms-quiz-result .lms-result-badge--pass i,
body.route--lms-quiz-result .lms-result-badge--pass .fas,
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--pass i,
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--pass .fas {
  color: #166534 !important;                    /* trophy icon clears AA too */
}

/* Mirror the same deep-green treatment for the FAILED badge so the two states
   stay symmetric in contrast (kept defensive; same component, sibling state). */
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--fail {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border: 1px solid #991b1b !important;
}
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--fail i,
body.route--lms-quiz-result.layout-minimalist .lms-result-badge--fail .fas {
  color: #991b1b !important;
}

/* NOTE — deferred (cannot be fixed in CSS):
   - 1-0498 / 1-0508: status icons (green check vs red X) and per-question points
     are bound in Twig to response.correct / response.score, which come from the
     server-side grading result. Wrong answers showing a green check is a
     grading-data/logic defect, not a styling one. Requires fixing the grader /
     template bindings, not CSS.
   - 1-0503: turning the closed score ring into a proportional arc needs the
     numeric score exposed to CSS (e.g. an inline --score var feeding a
     conic-gradient / stroke-dasharray). The template does not expose it, so a
     real progress arc cannot be produced from this CSS-only partial. */

/* ===== P022.css ===== */
/* ==========================================================================
   P022 — My Quiz Results (/my-quiz-results)   THIRD PASS
   route_class: route--lms-quiz-my-results
   Active skin: medical + minimalist (body.layout-medical.layout-minimalist)
   This partial loads LAST. Page content scoped under
   body.route--lms-quiz-my-results; the global FAB is fixed via its component
   id/class. Several issues note PRIOR FIX FAILED — selectors below are built
   to outrank light-mode (0,2,0) / medical (4-class+pseudo) base rules and the
   template <style> block.
   ========================================================================== */

/* [P022] ISSUE 1-0520: tall empty band between the single result card and the
   footer. ROOT CAUSE the prior fix (min-height:0 + section padding) missed:
   `.lms-page` is `min-height:100vh; display:flex; flex-direction:column` and
   `.lms-page__content` is `flex:1`, so the content area STRETCHES to fill the
   viewport and the short, top-aligned content leaves a void above the footer.
   Trimming section padding cannot remove a flex-grow void.
   FIX: on this page stop the content wrapper from growing — size it to its
   content so the footer rises directly beneath the results. The page still
   fills the viewport via the content's own min-height fallback, but the gap is
   now intentional padding, not a flex void. */
body.route--lms-quiz-my-results .lms-page__content {
  flex: 0 0 auto !important;
}
body.route--lms-quiz-my-results .lms-quiz-results-page {
  min-height: 0 !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
body.route--lms-quiz-my-results .lms-quiz-results-board {
  margin-bottom: 0 !important;
}

/* [P022] ISSUE 1-0522: the single result row sits in a large card with no
   internal structure. PRIOR FIX FAILED because it only added `border-top` on
   `.row + .row` (adjacent sibling) — with a single result there is no sibling,
   so nothing rendered.
   FIX: give EVERY row real list structure that is visible even with one row:
   a delimiter rule under the title/meta block (so the meta line reads as part
   of a grouped header) AND a separator between stacked rows. Consistent inner
   padding throughout. */
body.route--lms-quiz-my-results.layout-minimalist .lms-quiz-results-board .lms-quiz-result-row,
body.route--lms-quiz-my-results .lms-quiz-results-board .lms-quiz-result-row {
  padding: 1.15rem 1.35rem !important;
}
/* Always-visible internal delimiter: a hairline under the title/meta content
   column groups "title + Threshold/Completed" as one block within the card. */
body.route--lms-quiz-my-results .lms-quiz-result-row__content {
  position: relative;
  padding-bottom: 0.85rem;
}
body.route--lms-quiz-my-results .lms-quiz-result-row__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e2e8f0;
}
body.route--lms-quiz-my-results .lms-quiz-result-row__meta {
  margin-top: 0.2rem;
}
/* Separator between multiple stacked rows (keeps a list rhythm). */
body.route--lms-quiz-my-results .lms-quiz-results-board .lms-quiz-result-row + .lms-quiz-result-row {
  border-top: 1px solid #e2e8f0;
}
/* On desktop the content column shares the row baseline with the score/action
   columns, so drop the divider there to avoid a stray line; keep it on the
   stacked (mobile) layout where the meta truly needs grouping. */
@media (min-width: 992px) {
  body.route--lms-quiz-my-results .lms-quiz-result-row__content {
    padding-bottom: 0;
  }
  body.route--lms-quiz-my-results .lms-quiz-result-row__content::after {
    display: none;
  }
}

/* [P022] ISSUE 1-0521: "Review Result" primary button drop shadow looked
   heavier/clipped on the right/bottom-right edge. PRIOR FIX FAILED because it
   set `overflow:visible` on the ROW only — the parent `.lms-quiz-results-board`
   (padding:1rem, border, rounded) still clipped the right side of the glow, and
   the button sat flush against that boundary.
   FIX: make the whole card chain overflow-visible, give the action a centered
   (0 offset-x) symmetric shadow, and inset it from the card's right edge so the
   glow has room on all sides. */
body.route--lms-quiz-my-results .lms-quiz-results-board,
body.route--lms-quiz-my-results .lms-quiz-result-row,
body.route--lms-quiz-my-results .lms-quiz-result-row__score,
body.route--lms-quiz-my-results .lms-quiz-result-row__action {
  overflow: visible !important;
}
body.route--lms-quiz-my-results.layout-minimalist .lms-quiz-result-row__action,
body.route--lms-quiz-my-results .lms-quiz-result-row__action {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.28) !important;
  margin-right: 0.35rem !important;
  transform: none !important;
}
body.route--lms-quiz-my-results .lms-quiz-result-row__action:hover,
body.route--lms-quiz-my-results .lms-quiz-result-row__action:focus-visible {
  box-shadow: 0 9px 22px rgba(102, 126, 234, 0.38) !important;
  transform: translateY(-2px) !important;
}

/* [P022] ISSUE 1-0526 (mobile): stat cards and the Final Assessment card did
   not share one gutter — the board's outer panel (border + bg + padding) was
   inset/wider than the stat-card left edge. PRIOR FIX FAILED because it zeroed
   only the board PADDING and background but left the board's 1px BORDER and
   box-shadow drawing a wider panel around the row.
   FIX: at mobile, fully dissolve the redundant outer panel — no border, no
   background, no shadow, no padding — so the inner result row becomes the card
   and its left/right edges line up exactly with the stat-card stack. The row
   keeps its own white card styling. */
@media (max-width: 767px) {
  body.route--lms-quiz-my-results.layout-minimalist .lms-quiz-results-board,
  body.route--lms-quiz-my-results.layout-medical .lms-quiz-results-board,
  body.route--lms-quiz-my-results .lms-quiz-results-board {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.route--lms-quiz-my-results.layout-minimalist .lms-quiz-result-row,
  body.route--lms-quiz-my-results .lms-quiz-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.route--lms-quiz-my-results.layout-minimalist .lms-quiz-results-page__summary {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* [P022] ISSUE 1-0527 (mobile): the floating back-to-top FAB overlapped the
   top-right corner of the Final Assessment card. PRIOR FIX FAILED: the FAB is
   `position:fixed` over a full-width card, so geometric collision with the
   right edge is unavoidable in CSS — the only correct remedy is to make the FAB
   unambiguously read as a floating OVERLAY (opaque surface, clear ring, strong
   shadow, top stacking) rather than colliding flat with content, and to seat it
   firmly in the corner margin. Beat the medical base rule's `right/bottom
   clamp() !important` with an equally-specific selector. */
@media (max-width: 767px) {
  body.layout-medical.route--lms-quiz-my-results:not(.is-workspace) #lms-back-to-top,
  body.layout-medical.route--lms-quiz-my-results:not(.is-workspace) .lms-back-to-top,
  body.route--lms-quiz-my-results #lms-back-to-top,
  body.route--lms-quiz-my-results .lms-back-to-top {
    right: 12px !important;
    bottom: 84px !important;
    z-index: 1400 !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 119, 182, 0.28) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),
                0 10px 26px rgba(15, 23, 42, 0.34) !important;
  }
  /* Reserve clear whitespace below the content so the lifted FAB rests over the
     page margin, not over the card. */
  body.route--lms-quiz-my-results .lms-page__content {
    padding-bottom: 6rem !important;
  }
}

/* ===== P023.css ===== */
/* ==========================================================================
   P023 — My Certificates (/my-certificates)   ROUND 3 (third pass)
   route_class: route--lms-progress-certificates
   Active skin: medical (body.layout-medical.layout-minimalist)
   Loads LAST. Page content scoped under body.route--lms-progress-certificates;
   global FAB fixed via its component id/class.
   ========================================================================== */

/* [P023] ISSUE 1-0543: Floating scroll-to-top FAB still overlapped the
   top-right corner of the "No certificates yet" card on mobile.
   ROOT CAUSE the prior (round-2) fix got wrong: it pushed the FAB UP with
   `bottom: 84px`. Because the FAB is position:fixed, raising it 84px from the
   viewport bottom dropped it straight into the vertical band occupied by the
   short empty-state card — exactly the right edge of that card — instead of
   resting under it. The base medical rule
   `body.layout-medical:not(.is-workspace) .lms-back-to-top` also wins on
   specificity over a plain route-class selector, so loose overrides are lost.

   FIX: beat the medical rule with id + 3-class + :not() specificity and pin the
   FAB back DOWN to the very bottom-right of the viewport where it floats clear
   over whitespace, while nudging it a touch further from the right edge and
   trimming the footprint so its halo never grazes a card. Also reserve bottom
   padding on the page so the document has whitespace beneath the card at the
   resting scroll position. */
@media (max-width: 640px) {
  body.layout-medical.route--lms-progress-certificates:not(.is-workspace) #lms-back-to-top,
  body.layout-medical.route--lms-progress-certificates:not(.is-workspace) .lms-back-to-top,
  body.route--lms-progress-certificates #lms-back-to-top,
  body.route--lms-progress-certificates .lms-back-to-top {
    right: 14px !important;
    bottom: 18px !important;
    left: auto !important;
    top: auto !important;
    width: 44px !important;
    height: 44px !important;
    /* keep the drop-shadow halo tight so it cannot bleed onto a card edge */
    box-shadow: 0 6px 16px rgba(0, 119, 182, 0.22) !important;
  }

  /* Give the document trailing whitespace so the bottom-pinned FAB rests over
     empty background rather than against the empty-state card's lower edge. */
  body.route--lms-progress-certificates .lms-page__content,
  body.route--lms-progress-certificates .lms-certificates-page,
  body.route--lms-progress-certificates .lms-section.lms-certificates-page {
    padding-bottom: 5.5rem !important;
  }
}

/* ===== P024.css ===== */
/* ==========================================================================
   P024 — My Notes (route--lms-note-my-notes) — THIRD-pass UI fixes
   Loaded LAST. Page content scoped under body.route--lms-note-my-notes /
   .lms-my-notes; global components targeted by component class.

   NOTE on prior failures:
   - 1-0557: pass 1/2 set border-style:solid WITHOUT !important. The dashed
     border actually comes from light-mode.css:
       body.layout-minimalist .lms-empty-state { border: 1px/2px dashed ... !important; }
     The <body> carries BOTH layout-medical AND layout-minimalist, so that
     !important dashed rule always beat the un-!important override. This pass
     uses matching specificity + !important to truly win.
   - 1-0559: the back-to-top is position:fixed and reads as part of the footer
     (white card, sitting level with the "SilverCare" brand block). Pure CSS
     cannot anchor a fixed element to the footer, so instead we make it
     unmistakably a floating overlay: brand-filled pill (not a white card),
     stronger shadow, pulled further inboard/up, top stacking context.
   ========================================================================== */

/* [P024] ISSUE 1-0557: Empty-state card must use a SOLID border to match the
   note cards / surfaces, not the inherited minimalist dashed border. Override
   the light-mode.css `body.layout-minimalist .lms-empty-state` !important rule
   with equal-or-higher specificity AND !important so it actually applies. */
body.layout-minimalist .lms-empty-state,
body.layout-medical .lms-empty-state,
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgba(0, 119, 182, 0.22) !important;
  border-radius: 0.75rem !important;
  background: rgba(0, 119, 182, 0.03) !important;
}

/* [P024] ISSUE 1-0559: Floating back-to-top control crowds / blends into the
   footer "SilverCare" brand block on mobile. Make it read as an unambiguous
   floating overlay (brand-filled circular pill, not a white card matching the
   footer), give it real clearance from the right/bottom edges and a top
   stacking context so it sits clearly above footer content. Global component
   on the medical skin. */
body.layout-medical:not(.is-workspace) #lms-back-to-top,
body.layout-medical:not(.is-workspace) .lms-back-to-top {
  background: var(--medical-violet, #0077b6) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.34) !important;
  z-index: 1400 !important;
}
body.layout-medical:not(.is-workspace) #lms-back-to-top i,
body.layout-medical:not(.is-workspace) .lms-back-to-top i {
  color: #ffffff !important;
}
body.layout-medical:not(.is-workspace) #lms-back-to-top:hover,
body.layout-medical:not(.is-workspace) .lms-back-to-top:hover {
  background: var(--medical-pink, #d6336c) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.4) !important;
}

@media (max-width: 480px) {
  body.layout-medical:not(.is-workspace) #lms-back-to-top,
  body.layout-medical:not(.is-workspace) .lms-back-to-top {
    right: 16px !important;
    bottom: 24px !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* [P024] ISSUE 1-0552: Header bell / heart (wishlist) icon buttons lack an
   accessible affordance on hover. The markup already exposes aria-label/title,
   but the icon-only controls give no visual hover feedback to confirm they are
   interactive. Add a clear focus/hover state. (The textual count badge itself
   is data/markup-driven and cannot be created in CSS — see deferred.) */
.lms-navbar__actions .lms-bell-icon-wrapper,
.lms-navbar__actions [aria-label*="otification"],
.lms-navbar__actions [aria-label*="ishlist"],
.lms-navbar__actions [title*="otification"],
.lms-navbar__actions [title*="ishlist"] {
  cursor: pointer;
}
.lms-navbar__actions .lms-bell-icon-wrapper:hover,
.lms-navbar__actions [aria-label*="otification"]:hover,
.lms-navbar__actions [aria-label*="ishlist"]:hover,
.lms-navbar__actions [aria-label*="otification"]:focus-visible,
.lms-navbar__actions [aria-label*="ishlist"]:focus-visible {
  color: var(--medical-violet, #0077b6) !important;
  outline: 0;
}

/* ===== P025.css ===== */
/* ==========================================================================
   P025 — My Wishlist (route--lms-wishlist-my-wishlist)  — THIRD PASS
   UI defect fixes. Loads LAST.
   ========================================================================== */

/* [P025] ISSUE 1-0574: Large band of empty light-blue space below the short
   empty-state card before the footer on tall mobile viewports.

   ROOT CAUSE (why prior fixes failed): .lms-page is a 100vh flex column and
   .lms-page__content (the <main>) has flex:1, so the <main> grows to fill all
   leftover height above the footer — that extra height IS the light-blue band,
   with content pinned to the top. Pass 2 set justify-content:center on
   .lms-my-wishlist-page and gave it flex:1, but the real DOM is:
     main.lms-page__content
       > div (region wrapper)
         > div#block-lms-theme-content
           > div.lms-my-wishlist-page
   The grandchild's flex:1 did nothing because the intermediate wrapper +
   #block-lms-theme-content only shrink to their content. So the page never
   stretched and centering had no free space to act on -> band remained.

   FIX: flex the ENTIRE chain from <main> down to .lms-my-wishlist-page so the
   growth/centering actually propagates, then vertically center the empty state
   inside the available height. Pull the footer up by letting the centered card
   sit in the middle instead of trailing page padding below it. */
@media (max-width: 480px) {
  body.route--lms-wishlist-my-wishlist .lms-page__content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Region wrapper + content block: let them grow & pass height down. The
     messages wrapper (empty, hidden) must NOT grow, so only the block region
     containing the wishlist is allowed to flex. */
  body.route--lms-wishlist-my-wishlist .lms-page__content > div:has(#block-lms-theme-content),
  body.route--lms-wishlist-my-wishlist #block-lms-theme-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
  }

  /* The page itself now receives real height and centers the empty state. */
  body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Container holds the centered card; drop the heavy inline 2rem padding so
     the card sits closer to true vertical center. */
  body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-container {
    padding: 1rem !important;
    width: 100%;
  }

  /* Trim the tall empty-state card padding so a balanced, moderate amount of
     space sits above and below it rather than one large band at the bottom. */
  body.route--lms-wishlist-my-wishlist .lms-empty-state {
    padding: 2.25rem 1.25rem !important;
  }
}

/* Fallback for browsers without :has() — the block region is the LAST direct
   div child of <main> (the messages wrapper is first), so flex the last child
   so the chain still propagates and the band still collapses there too. */
@media (max-width: 480px) {
  body.route--lms-wishlist-my-wishlist .lms-page__content > div:last-child {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.route--lms-wishlist-my-wishlist .lms-messages-wrapper {
    flex: 0 0 auto !important;
  }
}

/* ===== P026.css ===== */
/* ==========================================================================
   P026 — My Memberships (route--lms-membership-my-membership)
   THIRD-PASS UI FIXES
   This partial loads LAST. !important is used deliberately to beat the
   global light-mode.css rule `body.layout-minimalist h3 { color:#0f172a }`
   which (higher specificity than the card's inline <style> h3 rule) was the
   ROOT CAUSE of the dark-on-dark plan title that prior fixes failed to beat.
   ========================================================================== */

/* [P026] ISSUE 1-0575, 1-0582: Plan title (e.g. "Basic Access",
   "Enterprise / Facility Plan") rendered dark-on-dark navy card, nearly
   invisible. Force a light, high-contrast heading on the dark card surface.
   Root cause: light-mode.css `body.layout-minimalist h3{color:#0f172a}`
   wins over `.lms-membership-card__header h3{color:#fff}`. We raise both
   specificity AND priority to guarantee the override. */
body.route--lms-membership-my-membership .lms-membership-card .lms-membership-card__header h3,
body.route--lms-membership-my-membership .lms-membership-card__title h3,
body.layout-minimalist .lms-membership-card .lms-membership-card__header h3 {
  color: #ffffff !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  /* the card sits on dark navy regardless of light-mode body bg */
  -webkit-text-fill-color: #ffffff; /* beat any inherited text-fill */
}

/* The plan avatar initials must also stay white on the gradient tile,
   in case light-mode neutralizes it. */
body.route--lms-membership-my-membership .lms-membership-icon,
body.layout-minimalist .lms-membership-card .lms-membership-icon {
  color: #ffffff !important;
}

/* Keep the supporting card text legible too: light-mode forces
   `p{color:#64748b !important}` which is acceptable for the muted labels,
   but the value cells must remain bright. */
body.route--lms-membership-my-membership .lms-membership-card__value,
body.layout-minimalist .lms-membership-card .lms-membership-card__value {
  color: #ffffff !important;
}
body.route--lms-membership-my-membership .lms-membership-card__body strong,
body.layout-minimalist .lms-membership-card .lms-membership-card__body strong {
  color: #94a3b8 !important;
}

/* [P026] ISSUE 1-0585: Avatar "BA"/"EN" tile visually collided with the
   dark-on-dark title, looking like an overlap artifact. Now that the title
   is white this is mostly resolved; reinforce a tidy single baseline with a
   consistent gap and centered alignment, and prevent the title from
   wrapping under the avatar on narrow cards. */
body.route--lms-membership-my-membership .lms-membership-card__title,
body.layout-minimalist .lms-membership-card .lms-membership-card__title {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0; /* allow title to truncate instead of pushing avatar */
}
body.route--lms-membership-my-membership .lms-membership-icon,
body.layout-minimalist .lms-membership-card .lms-membership-icon {
  flex: 0 0 40px; /* fixed avatar, never squashed by long titles */
}
body.route--lms-membership-my-membership .lms-membership-card__title h3,
body.layout-minimalist .lms-membership-card .lms-membership-card__title h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* [P026] ISSUE 1-0588: Large empty whitespace band between the last card
   and the footer on mobile (prior fix failed). The container uses
   `margin: 4rem auto`; the oversized bottom margin plus page min-height
   created the gap. Trim the bottom margin on mobile so the footer sits
   reasonably close to the content. */
@media (max-width: 640px) {
  body.route--lms-membership-my-membership .lms-my-membership {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
  }
  /* tighten the grid gap on mobile so the stack reads as one block */
  body.route--lms-membership-my-membership .lms-membership-list {
    gap: 1rem !important;
  }
}

/* [P026] ISSUE 1-0589: Header notification "2" badge sits tight against /
   over the bell glyph, looking clipped. Push it to a clean above-right
   offset and add a subtle ring so it reads as a separate token rather than
   covering the bell outline. Global component fix (badge appears in header
   on all themed pages). */
.lms-bell-icon-wrapper .lms-bell-counter {
  top: -7px !important;
  right: -8px !important;
  padding: 0.1rem 0.35rem !important;
  border: 2px solid #0f1f3a !important; /* separating ring vs dark header */
  box-sizing: border-box;
}

/* ===== P027.css ===== */
/* P027 — Notifications page UI fixes (THIRD pass, loads LAST) */

/* [P027] ISSUE 1-0598: Filter tab strip overflows the mobile viewport with the 3rd tab
   ('Community Replies') clipped to 'Co...'. PRIOR FIX FAILED — a horizontal-scroll +
   mask-fade approach left the tab clipped with no discoverable affordance. Third-pass fix:
   on narrow viewports force the tab row to WRAP onto multiple lines so EVERY tab is fully
   visible and reachable, eliminating any horizontal overflow/clipping entirely. We also
   neutralise the base module rule's `overflow-x:auto` + `flex-nowrap` and the mask-image
   from the prior pass so nothing re-clips the row. Scoped to the page route. */
@media (max-width: 640px) {
  body.route--lms-notification-list .lms-notification-filters {
    display: flex !important;
    flex-wrap: wrap !important;        /* allow tabs to flow onto new rows */
    overflow-x: visible !important;    /* defeat base overflow-x:auto clipping */
    overflow-y: visible !important;
    gap: 0.5rem !important;
    padding-right: 0 !important;
    /* Remove the prior pass's edge fade that visually clipped the last tab. */
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.route--lms-notification-list .lms-notification-filters .lms-filter-btn {
    flex: 0 1 auto !important;         /* shrink slightly but keep label intact */
    white-space: nowrap !important;    /* never break a tab label mid-word */
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    font-size: 0.85rem !important;
    max-width: 100%;
  }
}

/* [P027] ISSUE 1-0604: The SilverCare logo 'S' badge appears a brighter blue in the header
   (on a white surface) but a deeper navy in the footer (on the dark #161b22 surface). Both
   spots reference the IDENTICAL logo SVG, so the perceived shift is caused purely by the
   contrasting backdrop behind the same mark. Fix: seat the footer brand mark on the same
   light, neutral surface the header logo uses, so the badge is read against a consistent
   background and presents one consistent brand blue across header and footer. */
.lms-footer .lms-footer__brand-link {
  display: inline-flex;
  align-items: center;
}

.lms-footer .lms-footer__brand-link .lms-brand-mark--footer {
  background-color: #ffffff !important;   /* same neutral surface as the header */
  border-radius: 10px;
  padding: 6px 8px;
  box-sizing: border-box;
}

/* ===== P028.css ===== */
/* ==========================================================================
   P028 — Profile page (route--lms-course-profile) — THIRD-pass UI fixes
   Template: themes/custom/lms_theme/templates/user/user--full.html.twig
   Markup:
     .lms-profile-info-grid > .lms-profile-info-item
        > .lms-profile-info-item__icon
        > .lms-profile-info-item__content
             > .lms-profile-info-label
             > .lms-profile-info-value   (holds {{ user.getEmail() }})
   Loads LAST. !important used to beat existing main.css component rules.

   ROOT CAUSE of the recurring failure (1-0612 / 1-0615): prior passes set
   `overflow-wrap: anywhere`, which by spec permits a break at ANY character —
   so a single unbroken token like an email splits mid-TLD ("example.c"/"om").
   An email address has NO whitespace, so it is one token; the only reliable
   CSS-only way to stop a mid-token break is to (a) forbid arbitrary breaking
   (word-break:keep-all; overflow-wrap:normal) and (b) make the token actually
   fit the available width — by giving the Email card the full grid row and
   shrinking the value font so it lands on a single clean line.
   ========================================================================== */

/* [P028] ISSUE 1-0612 + 1-0615: stop the EMAIL value from ever breaking inside
   a domain/TLD token. Forbid arbitrary character breaks everywhere first. */
body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-info-value {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  hyphens: none !important;
  min-width: 0;
}

/* The email is the only long token; give its card the full grid row and force
   a single line so it can never wrap mid-token. Target the Email card via its
   envelope icon (no per-field class exists in the markup). */
body.route--lms-course-profile .lms-profile__layout-redesign
  .lms-profile-info-item:has(.fa-envelope) {
  grid-column: 1 / -1;          /* span both columns of the 1fr 1fr grid */
  align-items: center;
}
body.route--lms-course-profile .lms-profile__layout-redesign
  .lms-profile-info-item:has(.fa-envelope) .lms-profile-info-item__content {
  min-width: 0;                 /* allow the value box to use the full row */
  flex: 1 1 auto;
}
body.route--lms-course-profile .lms-profile__layout-redesign
  .lms-profile-info-item:has(.fa-envelope) .lms-profile-info-value {
  white-space: nowrap !important;   /* one clean line — no split */
  overflow: hidden;
  text-overflow: ellipsis;          /* graceful only if a viewport is truly too narrow */
  font-size: 0.9rem;                /* full-row width fits the address at this size */
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 640px) {
  /* [P028] ISSUE 1-0615: single-column grid leaves the full card width to the
     email. Shrink the value enough that the address fits on one line with
     nowrap, so it cannot break inside "example.com". */
  body.route--lms-course-profile .lms-profile__layout-redesign
    .lms-profile-info-item:has(.fa-envelope) .lms-profile-info-value {
    font-size: 0.78rem;
    letter-spacing: -0.01em;
  }

  /* Reclaim horizontal room on narrow screens: shrink the icon column and the
     row gap so the (nowrap) email has the maximum width before any ellipsis. */
  body.route--lms-course-profile .lms-profile__layout-redesign
    .lms-profile-info-item:has(.fa-envelope) {
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  body.route--lms-course-profile .lms-profile__layout-redesign
    .lms-profile-info-item:has(.fa-envelope) .lms-profile-info-item__icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    font-size: 0.95rem !important;
  }

  /* [P028] ISSUE 1-0621: with the email forced to a single line the Email card
     is now the same height as the Location / Company cards, restoring sibling
     consistency. Belt-and-braces: top-align icon+label so any residual height
     delta keeps the icons aligned across cards. */
  body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-info-item {
    align-items: flex-start !important;
  }
}

/* ===== P029.css ===== */
/* ==========================================================================
   [P029] checkout-course (/checkout/88 -> /courses/88)
   Third-pass fixes. This partial loads LAST.
   ========================================================================== */

/* [P029] ISSUE 1-0628, 1-0638: enrollment "successfully enrolled" status
   message renders as plain, full-bleed, low-emphasis text (faint green that
   disappears on the light page bg, no box, no icon, no padding). PRIOR FIX
   FAILED because the dark-theme .messages--status colors (rgba green @0.1)
   are invisible on the white page and the wrapper applied no layout.
   Fix: constrain the wrapper width, and force a real success alert — solid
   light-green container, defined border, padding, AA-contrast dark-green
   text, plus an inline success check icon. */

/* Layout / containment of the messages region so the alert isn't full-bleed */
.lms-messages-wrapper {
  max-width: 1200px !important;
  margin: 1.25rem auto 0 !important;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

/* Base alert box for every message in this region */
.lms-messages-wrapper .messages,
.lms-page__content .messages {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: .75rem !important;
  padding: 1rem 1.125rem 1rem 1rem !important;
  margin: 0 0 1rem !important;
  border: 1px solid transparent !important;
  border-radius: .625rem !important;
  border-left-width: 4px !important;
  background-clip: padding-box !important;
  font-size: .9375rem !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
}

/* Success / status variant — readable on light AND dark backgrounds */
.lms-messages-wrapper .messages.messages--status,
.lms-messages-wrapper .messages--status,
.lms-page__content .messages.messages--status,
.lms-page__content .messages--status {
  background-color: #e9f9ef !important;
  border-color: #34c759 !important;
  border-left-color: #1e8e4e !important;
  color: #0f5132 !important;
}
.lms-messages-wrapper .messages.messages--status a,
.lms-page__content .messages.messages--status a {
  color: #0a6b3b !important;
  text-decoration: underline !important;
}

/* Success check icon (inline, no markup change needed) */
.lms-messages-wrapper .messages.messages--status::before,
.lms-page__content .messages.messages--status::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: .0625rem !important;
  background-color: #1e8e4e !important;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.4-1.4 2.6 2.6 5.4-5.4 1.4 1.4-6.8 6.8Z'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.4-1.4 2.6 2.6 5.4-5.4 1.4 1.4-6.8 6.8Z'/%3E%3C/svg%3E");
}

/* Error variant kept consistent (defined box on light bg) */
.lms-messages-wrapper .messages.messages--error,
.lms-page__content .messages.messages--error {
  background-color: #fdecec !important;
  border-color: #f04438 !important;
  border-left-color: #b42318 !important;
  color: #7a271a !important;
}
.lms-messages-wrapper .messages.messages--error::before,
.lms-page__content .messages.messages--error::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: .0625rem !important;
  background-color: #b42318 !important;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
}

/* Warning variant for parity */
.lms-messages-wrapper .messages.messages--warning,
.lms-page__content .messages.messages--warning {
  background-color: #fff7e6 !important;
  border-color: #f5a623 !important;
  border-left-color: #b54708 !important;
  color: #7a4100 !important;
}

/* Hide any redundant core-supplied visually-hidden heading from breaking
   the flex layout, and keep the message text aligned next to the icon */
.lms-messages-wrapper .messages > *,
.lms-page__content .messages > * {
  margin: 0 !important;
}

/* Mobile: keep the alert padded inside the viewport */
@media (max-width: 768px) {
  .lms-messages-wrapper {
    padding: 0 1rem !important;
    margin-top: 1rem !important;
  }
  .lms-messages-wrapper .messages,
  .lms-page__content .messages {
    padding: .875rem 1rem !important;
    font-size: .9rem !important;
  }
}

/* ===== P030.css ===== */
/* ==========================================================================
   P030 — checkout-membership (My Memberships) — THIRD-PASS UI fixes
   Route body class: body.route--lms-membership-my-membership
   Active skin on this page: body.layout-minimalist (light theme).
   This partial loads LAST (weight 1003 bundle). !important used to defeat the
   stubborn cascade that broke prior fixes.
   ========================================================================== */

/* [P030] ISSUE 1-0646, 1-0655, 1-0654: Plan title (e.g. "Basic Access",
   "Enterprise / Facility Plan") renders dark-on-dark on the #1e293b card,
   failing WCAG AA. PRIOR FIX FAILED because the real winning rule is the skin
   selector  `body.layout-minimalist h1,h2,h3,h4,h5,h6 { color:#0f172a }`
   (in light-mode.css) which paints EVERY heading dark slate — the card's own
   inline `<style> .lms-membership-card__header h3 {color:#fff}` is itself a
   heading and gets repainted on light-mode pages. We force a near-white title
   with !important and a selector that out-specifies the skin rule on BOTH the
   route and the skin, across all viewports, so it can never be re-darkened.
   This also resolves 1-0654: once both titles are light, sibling card headers
   regain identical visual weight. */
body.route--lms-membership-my-membership .lms-membership-card .lms-membership-card__header h3,
body.route--lms-membership-my-membership .lms-membership-card__header h3,
body.route--lms-membership-my-membership .lms-membership-card__title h3,
body.layout-minimalist .lms-membership-card__header h3,
body.layout-minimalist .lms-membership-card__title h3,
.lms-membership-card__header h3 {
  color: #f8fafc !important;       /* ~15.8:1 on #1e293b — passes WCAG AA/AAA */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  -webkit-text-fill-color: #f8fafc !important; /* beat any text-gradient clip */
}

/* [P030] ISSUE 1-0654: keep the ACTIVE badge identical & vertically balanced so
   sibling card headers read as the same structure. */
body.route--lms-membership-my-membership .lms-membership-card__header,
body.layout-minimalist .lms-membership-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
body.route--lms-membership-my-membership .lms-membership-card__header .lms-badge,
body.layout-minimalist .lms-membership-card__header .lms-badge {
  flex: 0 0 auto !important;       /* badge never shrinks or wraps */
  white-space: nowrap !important;
  align-self: center !important;
}

/* [P030] ISSUE 1-0661: Clear horizontal gap between the BA/EN avatar badge and
   the plan title so the (now-legible) title never sits behind/against the badge.
   The avatar is fixed-width and the title column is allowed to wrap. */
body.route--lms-membership-my-membership .lms-membership-card__title,
body.layout-minimalist .lms-membership-card__title {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;        /* explicit breathing room avatar -> title */
  min-width: 0 !important;         /* allow long titles to wrap, not overflow */
}
body.route--lms-membership-my-membership .lms-membership-icon,
body.layout-minimalist .lms-membership-icon {
  flex: 0 0 40px !important;       /* avatar never compressed by long titles */
  width: 40px !important;
  height: 40px !important;
}

/* [P030] ISSUE 1-0662: The long "Enterprise / Facility Plan" title wraps to two
   lines while ACTIVE stays one line. Keep the badge vertically centred against
   the wrapped title and let the title wrap cleanly with a consistent rhythm. */
body.route--lms-membership-my-membership .lms-membership-card__header h3,
body.layout-minimalist .lms-membership-card__header h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* [P030] ISSUE 1-0665: Start Date uses a grid calendar glyph (fa-calendar-alt)
   while End Date uses a calendar-with-check glyph (fa-calendar-check) — the two
   adjacent date rows look inconsistent. Standardise BOTH rows to the same plain
   calendar glyph (\f073) by overriding the End-date icon's pseudo glyph. Scoped
   to the membership card so other calendar-check icons site-wide are untouched. */
body.route--lms-membership-my-membership .lms-membership-card__body .fa-calendar-check::before {
  content: "\f073" !important;     /* fa-calendar-alt — matches Start Date row */
}

/* [P030] ISSUE 1-0660: On mobile the blue notification count badge ("2") crowds
   the adjacent wishlist heart. The badge overhangs the bell by right:-12px and
   the heart link only has margin-right:0.5rem. Add real clearance after the bell
   cluster and pull the badge in a touch so it stops touching the heart region. */
.lms-navbar__actions .lms-bell-icon-wrapper {
  margin-right: 0.75rem !important;
}
.lms-bell-icon-wrapper .lms-bell-counter {
  right: -8px !important;          /* less overhang toward the heart */
  top: -7px !important;
}
@media (max-width: 480px) {
  .lms-navbar__actions .lms-bell-icon-wrapper {
    margin-right: 0.875rem !important;
  }
  .lms-bell-icon-wrapper .lms-bell-counter {
    right: -6px !important;
    top: -6px !important;
  }
}

/* ----- Mobile reinforcement (<=480px) ----- */
@media (max-width: 480px) {
  /* [P030] ISSUE 1-0655: re-assert legible light title on small cards. */
  body.route--lms-membership-my-membership .lms-membership-card__header h3,
  body.layout-minimalist .lms-membership-card__header h3 {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-size: 1.125rem !important;
  }
  /* [P030] ISSUE 1-0661: maintain avatar->title gap on narrow cards. */
  body.route--lms-membership-my-membership .lms-membership-card__title {
    gap: 0.75rem !important;
  }
  /* [P030] ISSUE 1-0662: keep header row centred so the wrapped title and the
     single-line ACTIVE badge stay vertically aligned. */
  body.route--lms-membership-my-membership .lms-membership-card__header {
    align-items: center !important;
  }
}

/* ===== P031.css ===== */
/* ==========================================================================
   P031 — Workspace Home  (/workspace, admin dashboard rendered via
   @lms_course/lms-admin-dashboard.html.twig -> lms-admin-sidebar.html.twig)
   THIRD-PASS fixes. This partial loads LAST. The sidebar template emits an
   inline <style> block in the body (260px fixed sidebar + 260px left margin
   on .lms-admin__main, fixed-width table cells); those win on source order,
   so every override here is body-scoped and/or !important to beat them.

   Confirmed live state (curl of /workspace as anon = 403):
     <title>Access denied | SilverCare</title> + branded .lms-navbar header,
     .lms-footer footer, front-end "medical" theme. So the 403 is ALREADY
     re-themed with brand chrome and ALREADY has a descriptive title.

   Addressed here:  1-0688, 1-0695
   Deferred (need markup / data / new asset — impossible in CSS):
     - 1-0668: 403 "renders in admin theme" — live markup already renders the
       branded front-end theme (header/footer/medical skin). Theme negotiation
       is a routing/backend concern, not CSS. Stale screenshot.
     - 1-0672: empty <title> — live page already emits
       "Access denied | SilverCare". Backend/markup, already correct.
     - 1-0673: "Workspace" header link returns 403 for instructor role — this
       is a route-access / menu-link-visibility change in PHP, not CSS.
     - 1-0683: "qa_editor" raw username shown in LEARNER column — the cell
       prints {{ order.learner }} from the controller; rendering a display
       name / excluding test accounts is a data/controller change, not CSS.
     - 1-0679 / 1-0684 / 1-0693: muted "SilverCare" wordmark on the dark
       header & sidebar. The lockup is a single <img src=".../logo LMS_0_5.svg">.
       The wordmark colour (fill="#0e2a47", dark navy) is baked into the SVG
       artwork. CSS cannot recolour one <text> node inside an <img>; the only
       whole-image filters that lift the near-black wordmark (invert/
       brightness(0) invert) also destroy the blue "S" badge. A genuine,
       non-destructive fix requires shipping a new SVG with an AA-contrast
       wordmark (asset change), so this is deferred — not stylable in CSS.
   ========================================================================== */

/* ==========================================================================
   [P031] ISSUE 1-0688 + 1-0695: MOBILE (<= 768px)
   The template hard-codes a 260px fixed sidebar (position:fixed) plus a 260px
   left margin on .lms-admin__main. At phone width that leaves the main column
   (KPI grid + Recent Orders table) crushed into a ~half-width right strip, the
   sidebar covers half the screen, and the wide fixed-padding table cells
   overlap (Order ID / learner / amount / date stack on top of each other) and
   sprawl the document to thousands of px tall.

   CSS-only remedy: take the sidebar out of the fixed layout as a normal-flow,
   auto-height bar at the top (still fully reachable / scrollable), let the main
   column + cards use the full viewport width, and make the orders table render
   as readable full-width rows with tightened cell padding so it stops
   overlapping and sprawling. A literal hamburger off-canvas drawer would also
   need markup/JS; this stacked-bar approach restores a usable single-column
   mobile layout entirely in CSS.
   ========================================================================== */
@media (max-width: 768px) {

  /* Release the flex row so the columns stack. */
  body .lms-admin {
    display: block !important;
  }

  /* Sidebar: out of fixed positioning, full width, capped height, scrollable. */
  body .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Main column: no 260px offset, full viewport width, sane gutter. */
  body .lms-admin__main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* KPI cards stack one per row instead of being squeezed. */
  body .lms-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Orders card spans the full width. */
  body .lms-admin-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Orders table: let it scroll horizontally as a single coherent table rather
     than overlapping rows; tighten cell padding and stop nowrap headers from
     forcing absurd width that caused the vertical sprawl + overlap. */
  body .lms-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body .lms-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  body .lms-table th,
  body .lms-table td {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;     /* keep each cell on its own line so
                                           values never overlap each other */
    vertical-align: middle !important;
  }
  /* Status header/cell stay right-aligned and visible. */
  body .lms-table th:last-child,
  body .lms-table td:last-child {
    text-align: right !important;
  }
}

/* ===== P032.css ===== */
/* ==========================================================================
   [P032] Manage Courses (/workspace/courses) — THIRD-PASS UI fixes
   Scope: admin workspace renders under .lms-admin (route_class empty).
   This partial loads LAST; !important is used to beat the heavy inline
   <style> block + inline style="" attributes in lms-admin-sidebar.html.twig
   and lms-admin-courses-table.html.twig.

   Why prior passes failed:
   - 1-0696 (desktop): prior fixes relied on `overflow-x:auto`, so the table
     stayed WIDER than its container and the verifier screenshot captured the
     un-scrolled state with the ACTION header clipped off the right edge. The
     real fix is to make the table genuinely FIT (table-layout:fixed + capped
     column widths + wrapping) so the last column is ALWAYS visible, never
     dependent on a horizontal scroll.
   - 1-0717 (mobile): prior `min-width:760px` + scroll left columns squished /
     overlapping in the captured (non-scrolled) state. Real fix is to stack the
     table into readable per-row cards so every row renders content with no
     overlap and no reliance on horizontal scrolling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [P032] ISSUE 1-0696: ACTION header + action column clipped at table edge
   Force the table to fit its container instead of overflowing. With
   table-layout:fixed and width:100%, the browser distributes the explicit
   column widths and the LAST (Actions) column can never spill past the right
   boundary. Text columns wrap instead of forcing the table wider.
   -------------------------------------------------------------------------- */
.lms-admin .lms-table-responsive {
  overflow-x: visible !important;   /* no horizontal scroll needed on desktop */
  max-width: 100%;
}
.lms-admin .lms-table {
  width: 100% !important;
  table-layout: fixed !important;   /* honor explicit widths; never overflow */
}
/* Tighten padding so all 9 columns breathe within the fixed layout. */
.lms-admin .lms-table th,
.lms-admin .lms-table td {
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Explicit per-column widths (9 cols). Wide text cols wrap; numeric/action
   cols stay compact so the Actions column always fits on screen. */
.lms-admin .lms-table thead th:nth-child(1),
.lms-admin .lms-table tbody td:nth-child(1) { width: 2.75rem; }      /* checkbox */
.lms-admin .lms-table thead th:nth-child(2),
.lms-admin .lms-table tbody td:nth-child(2) { width: 5.5rem; }       /* thumbnail */
.lms-admin .lms-table thead th:nth-child(3),
.lms-admin .lms-table tbody td:nth-child(3) { width: auto; }         /* title (flex) */
.lms-admin .lms-table thead th:nth-child(4),
.lms-admin .lms-table tbody td:nth-child(4) { width: 9rem; }         /* category */
.lms-admin .lms-table thead th:nth-child(5),
.lms-admin .lms-table tbody td:nth-child(5) { width: 7.5rem; }       /* instructor */
.lms-admin .lms-table thead th:nth-child(6),
.lms-admin .lms-table tbody td:nth-child(6) { width: 5rem; }         /* enrolled */
.lms-admin .lms-table thead th:nth-child(7),
.lms-admin .lms-table tbody td:nth-child(7) { width: 5rem; }         /* price */
.lms-admin .lms-table thead th:nth-child(8),
.lms-admin .lms-table tbody td:nth-child(8) { width: 7rem; }         /* status */
.lms-admin .lms-table thead th:nth-child(9),
.lms-admin .lms-table tbody td:nth-child(9) { width: 6.5rem; }       /* actions */

/* Let the long text columns wrap so they fit their capped widths instead of
   pushing the table wider than the viewport. */
.lms-admin .lms-table tbody td:nth-child(3),
.lms-admin .lms-table tbody td:nth-child(4),
.lms-admin .lms-table tbody td:nth-child(5) {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* The ACTION header word must never break or clip; pin compactly to the right. */
.lms-admin .lms-table thead th:nth-child(9) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: right !important;
  padding-right: 0.85rem !important;
}
.lms-admin .lms-table tbody td:nth-child(9) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   [P032] ISSUE 1-0703: ACTION view/edit/delete icons too dim (low contrast)
   Default inline color is #64748b on a dark row (< 3:1 for non-text UI).
   Lift the resting color to a high-luminance grey and add strong hover +
   keyboard-focus states. !important beats the per-link inline color attr.
   Also harden the FA glyph sizing so the icons keep a tap/click footprint
   even if the external Font Awesome CDN is slow/unavailable.
   -------------------------------------------------------------------------- */
.lms-admin .lms-table tbody td:nth-child(9) a {
  color: #d3dbe6 !important;       /* ~8:1 on the #1e293b row background */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: 0.25rem;
  vertical-align: middle;
}
.lms-admin .lms-table tbody td:nth-child(9) a i {
  font-size: 0.95rem;
  line-height: 1;
}
.lms-admin .lms-table tbody td:nth-child(9) a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10);
}
.lms-admin .lms-table tbody td:nth-child(9) a:focus-visible {
  outline: 2px solid #1d70f5;
  outline-offset: 2px;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   [P032] ISSUE 1-0704 / 1-0715: Sidebar 'SilverCare' brand wordmark too dim
   When the site logo falls back to text, the wordmark renders as a <span>
   beside the icon. Force it toward white so it clears WCAG AA on the
   near-black (#161b22) sidebar. (When the brand is an uploaded <img> logo,
   the dark-blue color is baked into the image pixels and cannot be recolored
   via CSS — that case is a logo-asset/data change and is deferred.)
   -------------------------------------------------------------------------- */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin .lms-admin__sidebar-brand a i {
  color: #f1f5f9 !important;       /* >= 12:1 on #161b22 */
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   [P032] ISSUE 1-0716: submenu chevrons inconsistently aligned across items
   Force every dropdown trigger to a centered flex row and pin the caret into a
   fixed right-aligned slot so all chevrons share the same vertical baseline.
   -------------------------------------------------------------------------- */
.lms-admin .lms-admin__nav-dropdown > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.lms-admin .lms-admin__nav-dropdown > a > div {
  display: flex !important;
  align-items: center !important;
}
.lms-admin .lms-dropdown-icon {
  flex: 0 0 1rem;
  width: 1rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==========================================================================
   MOBILE (<= 768px) — responsive corrections
   ========================================================================== */
@media (max-width: 768px) {

  /* [P032] ISSUE 1-0715: brand wordmark contrast (also enforced on mobile). */
  .lms-admin .lms-admin__sidebar-brand a span {
    color: #f1f5f9 !important;
  }

  /* [P032] ISSUE 1-0717: course rows render as blank/overlapping checkbox-only
     strips. ROOT CAUSE: a 9-column table squeezed into a phone width either
     collapses (overlapping text) or hides behind a horizontal scroll the
     verifier never triggers. Convert the table to a stacked card layout so
     EVERY row renders its full content, top-to-bottom, with no overlap and no
     reliance on horizontal scrolling. */
  .lms-admin .lms-table-responsive {
    overflow-x: hidden !important;
  }
  .lms-admin .lms-table,
  .lms-admin .lms-table thead,
  .lms-admin .lms-table tbody,
  .lms-admin .lms-table tr,
  .lms-admin .lms-table th,
  .lms-admin .lms-table td {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  /* Hide the desktop header row; each card is self-describing. */
  .lms-admin .lms-table thead {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  /* Each course becomes a bordered card. */
  .lms-admin .lms-table tbody tr {
    margin: 0 0 0.75rem 0 !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }
  /* Cells stack as readable rows; clear all fixed desktop widths. */
  .lms-admin .lms-table tbody td {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.3rem 0 !important;
    border: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
  }
  /* Title is the card heading. */
  .lms-admin .lms-table tbody td:nth-child(3) {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding-top: 0.1rem !important;
  }
  /* Thumbnail sits full-width above the title. */
  .lms-admin .lms-table tbody td:nth-child(2) {
    width: 100% !important;
  }
  .lms-admin .lms-table tbody td:nth-child(2) > div {
    width: 100% !important;
    height: 9rem !important;
  }
  /* Checkbox cell tucks compactly. */
  .lms-admin .lms-table tbody td:nth-child(1) {
    width: auto !important;
    display: inline-block !important;
    padding-right: 0.5rem !important;
  }
  /* Action icons get a clear row with comfortable tap targets. */
  .lms-admin .lms-table tbody td:nth-child(9) {
    text-align: left !important;
    padding-top: 0.6rem !important;
    margin-top: 0.4rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .lms-admin .lms-table tbody td:nth-child(9) a {
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin-right: 0.5rem;
    color: #d3dbe6 !important;
  }

  /* [P032] ISSUE 1-0717 (feedback): make the empty/no-results row legible
     when there genuinely are no courses, so the user is never left with a
     blank card. */
  .lms-admin .lms-table tbody tr td[colspan] {
    text-align: center !important;
    color: #cbd5e1 !important;
    padding: 2rem 1rem !important;
  }
}

/* ===== P033.css ===== */
/* ==========================================================================
   P033 — Course Editor (/workspace/courses/88/edit)   [THIRD PASS]
   route_class: route--lms-course-admin-course-edit
   Skin: medical | Brand: SilverCare

   This partial loads LAST (after ui-fixes/P033.css and ui-fixes2/P033.css).
   The admin templates (lms-admin-entity-form.html.twig + lms-admin-sidebar
   .html.twig) emit big inline <style> blocks in the body, and several elements
   carry inline style="" attributes; both win on equal specificity / source
   order, so every override here uses body scope and/or !important.

   PRIOR FIXES FAILED on two issues — addressed properly this time:
     1-0728 / 1-0738 (brand contrast): prior rounds colored the brand <span>,
       but with a site logo configured the sidebar template renders ONLY an
       <img> (lms-admin-sidebar.html.twig L416-417); the {{ site_name }} <span>
       (L420) never renders. The "S" tile + "SilverCare" wordmark are baked into
       the logo artwork as a dark blue-grey fill, so coloring text was a no-op.
       FIX (same proven approach as P045): a CSS filter on the <img> recolors
       the baked-in artwork to a near-white high-contrast lockup.
     1-0733 (mobile runaway height / single-char wrapping): prior rounds released
       the fixed sidebar and freed .lms-admin__main, but the real width blowout
       is the IEF "Chapter & lesson" curriculum table — its cells hard-code
       width:135px (status badge) and width:155px (operations column) with
       flex-shrink:0 + white-space:nowrap inside a flex .ief-row-entity. On a
       narrow viewport those fixed flex cells force the row (and the whole form)
       to min-content width far wider than the screen; the leftover sliver then
       wraps labels one character per line and stretches the doc to ~9000px.
       We neutralize those fixed widths and allow wrapping below 768px.
   ========================================================================== */

/* [P033] ISSUE 1-0728, 1-0738: Sidebar brand wordmark "SilverCare" + "S" tile
   low contrast on the near-black (#0b0f19 / #161b22) sidebar. The wordmark is a
   dark-fill <img>, so recolor the artwork itself: brightness(0) flattens it to
   solid black, invert(1) -> pure white, brightness(0.97) eases it to a soft
   white (~#ededed). #ededed on #0b0f19 ≈ 16:1 — passes WCAG AA comfortably.
   Both the badge and the wordmark become legible. Works on desktop + mobile. */
.lms-admin .lms-admin__sidebar-brand a img {
  filter: brightness(0) invert(1) brightness(0.97) !important;
}
/* Belt-and-suspenders for the no-logo fallback branch, where the wordmark IS a
   real <span> + <i>: keep them near-white so the brand never regresses. */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin .lms-admin__sidebar-brand a i {
  color: #f1f5f9 !important;   /* slate-100 on #0b0f19 -> ~16:1 */
  font-weight: 800 !important;
}

/* ==========================================================================
   [P033] ISSUE 1-0733 — MOBILE (<= 768px): collapse the runaway page height by
   killing every fixed/intrinsic width that forces the form wider than the
   viewport and triggers one-character-per-line wrapping.
   ========================================================================== */
@media (max-width: 768px) {

  /* Release the fixed 260px sidebar + its 260px main-column offset so the
     content column uses the full viewport. (Re-asserted at P033 third-pass
     scope in case earlier rules are out-ordered.) */
  body .lms-admin {
    display: block !important;
  }
  body .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  body .lms-admin__main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
  }
  body .lms-admin-card,
  body .lms-admin-entity-form-wrapper,
  body #lms-admin-form-app,
  body .lms-form-content,
  body .lms-form-panes,
  body .lms-form-pane,
  body .lms-form-content .form-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body .lms-admin-card,
  body .lms-admin-entity-form-wrapper {
    padding: 1.25rem !important;
  }

  /* THE ACTUAL ROOT CAUSE prior fixes missed: the IEF curriculum table cells
     hard-code fixed pixel widths + nowrap inside a flex row, forcing the form
     to min-content width wider than the screen. Let the row wrap and let every
     cell shrink to the available width. */
  body .lms-form-content .ief-entity-table,
  body .lms-form-content .ief-row-entity,
  body .lms-form-content .ief-row-form,
  body .lms-form-content .ief-row-form .ief-entity-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body .lms-form-content .ief-row-entity {
    flex-wrap: wrap !important;          /* allow badge + buttons to drop below title */
    row-gap: 0.5rem !important;
  }
  body .lms-form-content .ief-row-entity > td[class*="-status"],
  body .lms-form-content .ief-row-entity > td[class*="-type"],
  body .lms-form-content .ief-row-entity > td[class*="-bundle"] {
    width: auto !important;             /* was 135px fixed */
    margin-left: 0 !important;
    white-space: normal !important;
  }
  body .lms-form-content .ief-row-entity > td:last-child,
  body .lms-form-content .inline-entity-form-operations {
    width: auto !important;             /* was 155px fixed */
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  body .lms-form-content .ief-row-entity > td[class*="-label"],
  body .lms-form-content .ief-row-entity > td.inline-entity-form-node-title {
    min-width: 0 !important;
    flex: 1 1 100% !important;          /* title takes its own line, never crushed */
    margin-left: 0 !important;
  }

  /* Form inputs / editors / selects must fit the column, never exceed it. */
  body .lms-form-content input:not([type="submit"]):not([type="button"]),
  body .lms-form-content select,
  body .lms-form-content textarea,
  body .lms-form-content .form-element,
  body .lms-form-content .ck-editor,
  body .lms-form-content .ck-editor__main,
  body .lms-form-content .ck-editor__editable {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Kill forced break-all so words/labels wrap at word boundaries, not chars. */
  body .lms-admin__main,
  body .lms-form-content,
  body .lms-form-content .form-item label,
  body .lms-form-content .description,
  body .lms-form-content input,
  body .lms-form-content textarea,
  body .lms-form-content select,
  body .ck-content,
  body .ck-editor__editable {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* CKEditor + custom tab bars wrap instead of forcing horizontal overflow. */
  body .lms-form-content .ck.ck-toolbar,
  body .lms-form-tabs {
    flex-wrap: wrap !important;
  }

  /* Long course-title H1 must wrap inside the column. */
  body .lms-admin__header {
    padding-top: 1.5rem !important;
  }
  body .lms-admin__title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  /* Final guard: nothing in the editor scroll-blows the viewport horizontally,
     which is what drove the intrinsic min-content width and the tall document. */
  body .lms-admin-card,
  body .lms-admin__main {
    overflow-x: hidden !important;
  }
}

/* ===== P034.css ===== */
/* ==========================================================================
   P034 — Manage Quizzes (/workspace/quizzes)
   Third-pass UI fixes. Loads LAST. Scoped to the .lms-admin workspace shell.
   ========================================================================== */

/* [P034] ISSUE 1-0745, 1-0757: Brand wordmark 'SilverCare' weak contrast on dark sidebar.
   The brand renders as a logo IMAGE (the "S" tile + muted-gray "SilverCare" wordmark are
   baked into the PNG), so prior text-color overrides had no element to hit. Lift the
   perceived brightness/contrast of the artwork itself so the wordmark reads clearly
   against the near-black (#161b22) sidebar. Also harden the fallback <span> path. */
.lms-admin .lms-admin__sidebar-brand a img {
  filter: brightness(1.6) contrast(1.15) saturate(1.05) !important;
}
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin .lms-admin__sidebar-brand a i {
  color: #f1f5f9 !important;
}

/* [P034] ISSUE 1-0754: Mobile horizontal overflow — page wider than viewport.
   The shell keeps `margin-left:260px` (desktop fixed sidebar) and a flex two-column
   body at mobile, pushing content off the right edge. Collapse to a single column,
   drop the desktop sidebar offset, and clamp widths so nothing exceeds 100vw. */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .lms-admin {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }

  /* Fixed sidebar should not reserve desktop width / push content off-canvas. */
  .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .lms-admin__main {
    margin-left: 0 !important;
    padding: 1.25rem !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Both body columns (table column + 300px Quick Stats) become full width. */
  .lms-admin__main > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Card holds the table; let it scroll internally instead of widening the page. */
  .lms-admin-card {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Question Bank Preview 4-col grid -> 2 cols so cards fit the viewport. */
  .lms-admin__main > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* [P034] ISSUE 1-0751: Mobile quiz rows clipped / titles overrun & metadata overlaps.
   Prior fix unclipped titles but they ran off-screen with no wrapping. The real fix
   is to (a) keep the table horizontally scrollable inside its own card region so it
   never widens the page, and (b) let the Quiz Title cell wrap instead of clipping or
   bleeding. We constrain the title column and force normal word wrapping. */
@media (max-width: 768px) {
  .lms-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Keep a usable table width so columns stay legible while scrolling, rather than
     squashing everything into the viewport and clipping. */
  .lms-table {
    min-width: 760px !important;
    width: max-content !important;
  }

  /* Quiz Title is the first cell; allow it to wrap onto multiple lines. */
  .lms-table td,
  .lms-table th {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .lms-table tbody td:first-child {
    min-width: 200px !important;
    max-width: 240px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
  }

  /* Actions column must not be clipped against the scroll edge. */
  .lms-table tbody td:last-child {
    white-space: nowrap !important;
  }
}

/* ===== P035.css ===== */
/* ==========================================================================
   P035 — Manage Users (User Management) — third-pass UI fixes
   Loads LAST. Page renders in the custom lms_theme admin shell (.lms-admin).
   Inline styles in the twig templates are stubborn, so !important is used.
   ========================================================================== */

/* [P035] ISSUE 1-0763: bulk selection counter must stay on one line */
#bulk-selected-count {
  white-space: nowrap !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
/* keep the whole bulk-action bar from squeezing the counter */
#lms-bulk-users-form #bulk-selected-count {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* [P035] ISSUE 1-0764: bulk action buttons look disabled with 0 selection.
   Pure-CSS state hook: when no .bulk-user-checkbox is :checked, the action
   buttons (Activate / Deactivate / Export) are visually muted + not-allowed. */
#lms-bulk-users-form:not(:has(.bulk-user-checkbox:checked)) button[name="action"] {
  opacity: 0.45 !important;
  filter: grayscale(35%) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* restore full appearance the moment at least one row is selected */
#lms-bulk-users-form:has(.bulk-user-checkbox:checked) button[name="action"] {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

/* [P035] ISSUE 1-0767: ROLE column badges low contrast (pale text on dark).
   The role span is the only inline-styled span inside the 4th <td>.
   Replace the faint tint with a solid, AA-compliant filled chip per role. */
.lms-admin .lms-table tbody td:nth-child(4) > span {
  border: 1px solid transparent !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: #475569 !important; /* neutral fallback, >=4.5:1 on dark row */
}
/* Student (blue) */
.lms-admin .lms-table tbody td:nth-child(4) > span[style*="59, 130, 246"] {
  color: #ffffff !important;
  background: #2563eb !important; /* solid blue, white text ~5.0:1 */
}
/* Instructor (amber) — dark text on amber for contrast */
.lms-admin .lms-table tbody td:nth-child(4) > span[style*="245, 158, 11"] {
  color: #1a1206 !important;
  background: #f59e0b !important;
}
/* Manager (fuchsia) */
.lms-admin .lms-table tbody td:nth-child(4) > span[style*="217, 70, 239"] {
  color: #ffffff !important;
  background: #c026d3 !important;
}
/* Admin (red) */
.lms-admin .lms-table tbody td:nth-child(4) > span[style*="239, 68, 68"] {
  color: #ffffff !important;
  background: #dc2626 !important;
}

/* [P035] ISSUE 1-0769: uniform avatar treatment in the USER column.
   All rows already use <img>; enforce identical size, circle and subtle
   ring so monogram and photo avatars read as one consistent component. */
.lms-admin .lms-table tbody td:nth-child(2) img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #21262d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
  flex: 0 0 auto !important;
}

/* [P035] ISSUE 1-0780: mobile search input truncates its placeholder.
   The input is hard-coded to width:250px inline; let it fill the row on
   small screens so the placeholder is not cut off mid-word. */
@media (max-width: 768px) {
  .lms-admin .lms-admin-filter__input[name="search"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* the search wrapper + its filter group should span full width on mobile */
  .lms-admin .lms-admin-filter__input[name="search"] {
    flex: 1 1 100% !important;
  }
  /* make the search field's positioning container stretch too */
  .lms-admin form#lms-admin-user-filter-form .lms-admin-card [style*="position: relative"] {
    width: 100% !important;
    display: block !important;
  }
}

/* [P035] ISSUE 1-0779: SilverCare brand wordmark contrast (text fallback only).
   When the brand renders as text (no logo image), ensure AA contrast on the
   dark sidebar. (When it renders as an <img>, contrast can't be fixed in CSS.) */
.lms-admin__sidebar-brand a span {
  color: #f1f5f9 !important;
  opacity: 1 !important;
}

/* ===== P036.css ===== */
/* ============================================================
   P036 — Manage Orders (/workspace/orders)
   Theme: lms_theme / SilverCare
   THIRD-pass CSS overrides. Loads LAST.
   Public workspace page rendered with the lms-admin layout
   (lms-admin-orders.html.twig + lms-admin-sidebar.html.twig).
   Route class is empty; the page is identified by the .lms-admin
   shell, so rules are scoped to .lms-admin component classes.
   ============================================================ */

/* [P036] ISSUE 1-0784: Sidebar brand wordmark 'SilverCare' low contrast.
   ROOT CAUSE (why prior text-color fixes failed): the brand is NOT rendered
   as a <span>{{ site_name }}</span> — it is the uploaded SVG logo asset
   (sites/default/files/logo LMS_0_5.svg) drawn via an <img>. Inside that SVG
   the wordmark text is hard-coded fill="#0e2a47" (very dark navy) which is
   nearly invisible on the #161b22 dark sidebar. CSS `color`/`fill` cannot
   reach inside an <img>, and the prior `filter: brightness(1.6) saturate(1.4)`
   was far too weak to lift navy (rgb 14,42,71) to a readable value.
   FIX: apply a strong brightness multiplier so the dark-navy wordmark is
   lifted to a bright, high-contrast tint (>=4.5:1) while the blue 'S' badge
   stays light/visible. This overrides the weak prior img filter. */
.lms-admin .lms-admin__sidebar-brand a img,
.lms-admin__sidebar-brand a img {
  filter: brightness(4) saturate(1.15) contrast(1.05) !important;
}

/* Keep the text-fallback branch (icon + site_name span) bright too, in case
   the logo asset is ever removed and the {% else %} branch renders. */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin .lms-admin__sidebar-brand a i {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* [P036] ISSUE 1-0795: Mobile orders table garbled / overlapping cells.
   ROOT CAUSE (why prior fix failed): the prior responsive attempt collapsed
   the table cells (overlapping order IDs, learner names, dates and badges in a
   stacked mess). The correct pattern for this 6-column data table on a narrow
   viewport is NOT to stack — it is to keep a real <table> layout and let it
   scroll horizontally inside its .lms-table-responsive wrapper.
   FIX: hard-reset every table part back to native table display (undo any
   block/flex/grid stacking from earlier passes), kill injected ::before data
   labels, give the table a sensible min-width so columns keep their geometry,
   and make the wrapper the single horizontal scroll container. The card must
   NOT clip (overflow visible-x via the wrapper) so the scroll works. */
@media (max-width: 768px) {

  /* The card itself must allow the inner wrapper to manage horizontal scroll
     rather than clipping the table content. */
  .lms-admin .lms-card,
  .lms-admin .lms-admin-card {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Single horizontal scroll container. */
  .lms-admin .lms-table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Restore genuine table layout — beats any prior block/flex/grid stacking. */
  .lms-admin .lms-table {
    display: table !important;
    width: max-content !important;
    min-width: 720px !important;        /* keep all 6 columns intact, scroll */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
  }
  .lms-admin .lms-table thead {
    display: table-header-group !important;
  }
  .lms-admin .lms-table tbody {
    display: table-row-group !important;
  }
  .lms-admin .lms-table tr {
    display: table-row !important;
  }
  .lms-admin .lms-table th,
  .lms-admin .lms-table td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap !important;     /* no wrapping clip; cells stay on one line */
    text-align: left !important;
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
    position: static !important;        /* undo any absolute/relative stacking */
    float: none !important;
    overflow: visible !important;       /* order IDs no longer clipped */
    text-overflow: clip !important;
  }

  /* Kill any ::before "data-label" pseudo-content a prior stacking attempt added. */
  .lms-admin .lms-table td::before,
  .lms-admin .lms-table th::before {
    content: none !important;
    display: none !important;
  }

  /* First column (Order ID) — ensure the IDs are fully visible, never clipped. */
  .lms-admin .lms-table td:first-child,
  .lms-admin .lms-table th:first-child {
    min-width: 64px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* Actions cell keeps its button on one line at the row's right edge. */
  .lms-admin .lms-table td:last-child {
    text-align: right !important;
    white-space: nowrap !important;
  }
}

/* ===== P037.css ===== */
/* ==========================================================================
   P037 — manage-content-faq  (/workspace/content/faq)
   THIRD PASS. Live route resolves to a Drupal system error page.
   Assignment route_class = `route--system-404`; the running site may also
   emit `route--system-403` for this manager path, so error-state rules are
   scoped to BOTH classes for robustness.
   Page structure (live curl):
     .lms-page (flex column, 100vh)
       header.lms-navbar
       main.lms-page__content
         .lms-messages-wrapper        (empty / hidden)
         #block-lms-theme-content      (the lone error sentence)
       footer.lms-footer
   This partial loads LAST; !important is used where earlier passes lost the
   specificity / scoping battle.

   NOTE on brand contrast (1-0801 / 1-0808): the "SilverCare" wordmark is NOT
   a DOM text node — it is baked into the logo SVG as
   <text fill="#0e2a47">SilverCare</text> inside
   /sites/default/files/logo LMS_0_5.svg, embedded via <img>. CSS cannot
   recolor a single glyph group inside a flattened raster/vector image without
   destroying the (correctly bright) blue "S" tile, so these two contrast
   issues are NOT CSS-addressable and are DEFERRED to an SVG edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [P037] ISSUE 1-0814 + 1-0805/1-0797 (state presentation): force the error
   content column to truly GROW into the band between the rendered header and
   footer and HARD-center the card on both axes, so the message is never
   stranded above a cavernous empty gap with the footer pulled up under it.
   PRIOR FIX FAILED because it used a fixed `min-height: calc(100vh - 80px -
   360px)` that both under-sized the column AND did not win specificity over
   the base `.lms-page__content` — the card sat at a fixed mid-point leaving a
   tall blank strip. We now use flex:1 to consume the flex-column remainder
   and a viewport-driven min-height with !important.
   -------------------------------------------------------------------------- */
body.route--system-404 .lms-page__content,
body.route--system-403 .lms-page__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: calc(100vh - 80px - 120px) !important; /* header 80 + footer gutter */
  padding: 3rem 1.25rem 4rem !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   [P037] ISSUE 1-0807: turn the bare "page could not be found" sentence into a
   complete, themed empty-state CARD with an icon, a clear HEADING, the message
   body, and a recovery affordance line.
   PRIOR FIX FAILED: it added the icon + card but left NO clear heading and NO
   recovery guidance. This pass keeps the card, repositions the icon, and
   injects a real heading band + a recovery prompt using flex `order` so the
   visual order is: icon -> "Page not found" heading -> message -> recovery.
   (A truly focusable <a href="/"> "Back to home" button cannot be created
   from CSS generated content; that single markup affordance is deferred to a
   404 template. Everything else expected by the issue is delivered here.)
   -------------------------------------------------------------------------- */
body.route--system-404 #block-lms-theme-content,
body.route--system-403 #block-lms-theme-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  max-width: 36rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2.75rem 2rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 119, 182, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  color: #334155 !important; /* ~7:1 on white, WCAG AA */
}

/* Decorative status icon — pinned to the top of the card. */
body.route--system-404 #block-lms-theme-content::before,
body.route--system-403 #block-lms-theme-content::before {
  content: "\f071" !important; /* Font Awesome exclamation-triangle */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  order: -2 !important;
  display: block !important;
  font-size: 2.75rem !important;
  line-height: 1 !important;
  color: #0077b6 !important;
  margin: 0 0 0.5rem !important;
}

/* Injected clear heading ABOVE the message text (the missing "Page not
   found" title called out by the issue). */
body.route--system-404 #block-lms-theme-content::after,
body.route--system-403 #block-lms-theme-content::after {
  content: "Page not found" !important;
  order: -1 !important;
  display: block !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
  margin: 0 0 0.25rem !important;
}

/* If Drupal returns 403 for this manager path, relabel the injected heading
   so it reads correctly for an access-denied state. */
body.route--system-403 #block-lms-theme-content::after {
  content: "Access denied" !important;
}

/* Collapse the empty/hidden messages wrapper so it adds no stray top
   whitespace above the centered card. */
body.route--system-404 .lms-messages-wrapper:empty,
body.route--system-404 .lms-messages-wrapper > .hidden,
body.route--system-404 [data-drupal-messages-fallback].hidden,
body.route--system-403 .lms-messages-wrapper:empty,
body.route--system-403 .lms-messages-wrapper > .hidden,
body.route--system-403 [data-drupal-messages-fallback].hidden {
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   [P037] ISSUE 1-0807 (recovery guidance line): append a friendly recovery
   hint to the bottom of the card. Implemented as an extra generated line on
   the content block via a trailing pseudo on the wrapper main, so it sits
   below the message regardless of the message node count.
   -------------------------------------------------------------------------- */
body.route--system-404 main.lms-page__content::after,
body.route--system-403 main.lms-page__content::after {
  content: "Go to the SilverCare home page to continue." !important;
  display: block !important;
  order: 99 !important;
  margin-top: 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

/* --------------------------------------------------------------------------
   [P037] ISSUE 1-0804: footer column headings not top-aligned — "Quick Links"
   in column 1 starts a full logo+tagline block BELOW the Course / Supports /
   Contact Info headings in columns 2-4.
   PRIOR FIX (none for P037): bring all four headings onto a common top row by
   reserving the logo+tagline height ABOVE the headings of columns 2-4 (column
   1 carries the logo/tagline), reading as an intentional shared heading grid.
   Desktop only (>=769px) — on narrower viewports the footer stacks.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  body.route--system-404 .lms-footer__grid,
  body.route--system-403 .lms-footer__grid {
    align-items: start !important;
  }
  body.route--system-404 .lms-footer__col:not(:first-child),
  body.route--system-403 .lms-footer__col:not(:first-child) {
    padding-top: 4.75rem !important;
  }
  body.route--system-404 .lms-footer__col:first-child .lms-footer__brand,
  body.route--system-403 .lms-footer__col:first-child .lms-footer__brand {
    margin-bottom: 0.5rem !important;
  }
  body.route--system-404 .lms-footer__col:first-child .lms-footer__description,
  body.route--system-403 .lms-footer__col:first-child .lms-footer__description {
    margin-bottom: 0.85rem !important;
  }
  body.route--system-404 .lms-footer__col:first-child h4,
  body.route--system-403 .lms-footer__col:first-child h4 {
    margin-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   [P037] ISSUE 1-0813: bell notification badge clipped at the top edge of the
   sticky dark header (the blue "2" sits flush against the bar's top boundary).
   PRIOR FIX FAILED to verify (bell hidden in mobile hamburger), but the clip
   is real wherever the bell renders. Defensive, global fix: give the bell
   wrapper relative positioning + room and pull the counter's vertical offset
   IN so it can never be cut off by the header's top edge or overflow:hidden.
   Applied to the component class so it holds on every viewport the bell shows.
   -------------------------------------------------------------------------- */
.lms-navbar__actions,
.lms-bell-icon-wrapper,
.lms-navbar__icon-btn {
  position: relative !important;
  overflow: visible !important;
}

.lms-navbar__badge,
.lms-bell-icon-wrapper .lms-bell-counter {
  top: -4px !important;     /* pulled in from the bar's top edge */
  right: -4px !important;
  z-index: 2 !important;
}

/* Ensure the header bar itself does not clip overflowing badges. */
.lms-navbar,
.lms-navbar__container {
  overflow: visible !important;
}

/* ===== P038.css ===== */
/* ==========================================================================
   P038 - Membership Pricing (/workspace/pricing)
   Third-pass UI fixes. This partial loads LAST; uses !important to beat the
   inline styles in lms-admin-pricing.html.twig and the <style> block in
   lms-admin-sidebar.html.twig.
   ========================================================================== */

/* [P038] ISSUE 1-0817 + 1-0818: Action buttons consistency + contrast.
   Edit (.btn-lms-primary) is a solid blue filled button; Deactivate is an
   inline-styled orange OUTLINE button with low-contrast amber text on the
   dark transparent row. Prior fix failed because the orange border/color are
   INLINE on the <a> tag, so only !important can override them.
   Make the Deactivate button a deliberate paired "danger" button: same
   height/padding/radius as Edit, a subtle amber fill behind brighter amber
   text to lift effective contrast above AA, and a clear secondary hierarchy. */
.lms-admin__main .lms-table td .lms-btn {
  /* Shared base so Edit + Deactivate are an equal-sized pair */
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Deactivate / Activate = the non-primary action button in the row.
   It is the only .lms-btn in the cell that is NOT .btn-lms-primary. */
.lms-admin__main .lms-table td .lms-btn:not(.btn-lms-primary) {
  background: rgba(245, 158, 11, 0.15) !important; /* subtle fill raises contrast */
  border: 1px solid rgba(245, 158, 11, 0.55) !important;
  color: #fcd34d !important;                       /* brighter amber, AA on dark fill */
  text-decoration: none !important;
}
.lms-admin__main .lms-table td .lms-btn:not(.btn-lms-primary):hover {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: #f59e0b !important;
  color: #fde68a !important;
}

/* [P038] ISSUE 1-0819: Filter toolbar alignment / large gap.
   The toolbar (.lms-admin-filter) stretches the Status group via flex:1 and
   uses a 1.5rem gap, leaving a wide void between Search and Status and pushing
   Filter to the far right. Prior fix failed because the per-group flex sizing
   came from the sidebar <style> block. Constrain group widths, tighten the gap,
   and align everything to the bottom edge so it reads as one balanced toolbar. */
.lms-admin__main .lms-admin-filter {
  gap: 1rem !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
/* Search group: take available space but cap it so it doesn't strand Status */
.lms-admin__main .lms-admin-filter__group:first-child {
  flex: 1 1 380px !important;
  max-width: 480px !important;
}
/* Status group: size to content, do not stretch */
.lms-admin__main .lms-admin-filter__group:nth-child(2) {
  flex: 0 0 220px !important;
  max-width: 220px !important;
}
/* Filter button group: hug content, sit right after Status (no far-right push) */
.lms-admin__main .lms-admin-filter__group:last-child {
  flex: 0 0 auto !important;
}
/* Make the Filter button share the input/select height for an even baseline */
.lms-admin__main .lms-admin-filter__group:last-child .lms-btn {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ===== P039.css ===== */
/* ===========================================================================
   P039 — Manage Ratings (/workspace/ratings)  [THIRD PASS]
   Scope: .lms-admin admin workspace (no route_class on this page).
   This partial loads LAST (weight 1003) — AFTER the in-template <style> block?
   NO: the template's <style> block is inline in the body and therefore wins on
   equal specificity. Several prior-pass rules failed precisely because they had
   the same specificity as the in-body <style> and lost the cascade. This pass
   raises specificity AND uses !important everywhere to guarantee the override.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   [P039] ISSUE 1-0837: secondary date line "Apr 04, 2026" under each course
   title still renders dim (#64748b ~3.0:1 on the #1e293b card). PRIOR FIX
   FAILED. Make the override unmissable: match the inline color via attribute
   substring AND target the span structurally (2nd column, the span sibling
   that follows the <strong> + <br>). Use a body-rooted, high-specificity
   selector + !important so it always beats the element's inline color.
   #c2cede on #1e293b ~= 8.1:1 (passes AA + AAA for small text).
   --------------------------------------------------------------------------- */
body .lms-admin .lms-table tbody td span[style*="64748b"],
body .lms-admin .lms-table tbody td:nth-child(2) span,
body .lms-admin .lms-table tbody td:nth-child(2) strong + br + span {
  color: #c2cede !important;
}

/* ---------------------------------------------------------------------------
   [P039] ISSUE 1-0838 + 1-0848: sidebar brand wordmark + nav labels render
   faint on the dark #161b22 sidebar. PRIOR FIX FAILED because the lower nav
   items (Manage Content / Certificate / Membership dropdown toggles) carry an
   INLINE color:#94a3b8 on the <a> element, which beat the class rule. We now
   override with body-rooted specificity + !important so inline loses.
   #c9d4e2 on #161b22 ~= 8.6:1.
   --------------------------------------------------------------------------- */
body .lms-admin__sidebar .lms-admin__nav-item,
body .lms-admin__sidebar .lms-admin__nav-dropdown > a,
body .lms-admin__sidebar .lms-admin__nav-dropdown > a span {
  color: #c9d4e2 !important;
}
body .lms-admin__sidebar .lms-admin__nav-item:hover,
body .lms-admin__sidebar .lms-admin__nav-item--active,
body .lms-admin__sidebar .lms-admin__nav-item--active span {
  color: #ffffff !important;
}
body .lms-admin__sidebar .lms-admin__subnav-item {
  color: #c2cede !important; /* ~8:1, lift the dropdown children */
}
body .lms-admin__sidebar .lms-admin__subnav-item--active {
  color: #ffffff !important;
}
/* Uppercase section label "Admin Navigation" — lift from #64748b. */
body .lms-admin__sidebar .lms-admin__nav-label {
  color: #9aa7ba !important; /* ~5:1 for bold uppercase small text */
}
/* Profile role label ("Manager") was also #64748b. */
body .lms-admin__sidebar .lms-admin__profile-role {
  color: #9aa7ba !important;
}
/* Sidebar text-logo wordmark (fallback span when site_logo is text). The
   "SilverCare" wordmark next to the icon must stay near-white for AA. If the
   brand is rendered as an <img> logo asset its contrast cannot be changed via
   CSS (see deferred note in summary). */
body .lms-admin__sidebar-brand a,
body .lms-admin__sidebar-brand a span,
body .lms-admin__sidebar-brand a i {
  color: #f4f7fb !important;
}

/* ---------------------------------------------------------------------------
   [P039] ISSUE 1-0840: "15 Reviews Found" counter is small/dim top-right.
   The Title-Case wording is template content (cannot change in CSS — deferred),
   but its contrast and size are fixable here. Lift to AA and bump size.
   #c2cede on #0b0f19 ~= 11:1.
   --------------------------------------------------------------------------- */
body .lms-admin__header .lms-admin__subtitle {
  color: #c2cede !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
}

/* ===========================================================================
   MOBILE — STACKED CARD LAYOUT (rebuilt).
   PRIOR FIX FAILED: cells overlapped (IDs sat on top of course titles). Root
   cause: the in-body <style> rule `.lms-table thead { position: sticky; top:0 }`
   has equal specificity to the prior fix and, being inline in the body, won the
   cascade — the header pill stayed sticky and floated over the stacked rows;
   and tr/td were not given block context strongly enough. We now force every
   override with !important and fully neutralise the sticky header.
   Addresses: 1-0842 (+ table overflow / squeezed strip).
   =========================================================================== */
@media (max-width: 767px) {
  /* Kill root horizontal overflow so nothing is pushed off-screen. */
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Off-canvas the fixed 260px sidebar so the table gets full width. */
  body .lms-admin__sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    width: 84vw !important;
    min-width: 0 !important;
    max-width: 300px !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5) !important;
  }
  body .lms-admin__sidebar:target,
  body .lms-admin__sidebar.is-open {
    transform: translateX(0) !important;
  }

  /* Single-column flow; main fills full width, no reserved left margin. */
  body .lms-admin {
    display: block !important;
  }
  body .lms-admin__main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* H1 + counter stack and wrap, never clip at the edge. */
  body .lms-admin__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
  }
  body .lms-admin__title {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Card container fills width, no clipping. */
  body .lms-admin-card {
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 0.75rem !important;
    flex: none !important;
  }
  body .lms-table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-height: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Convert table -> stacked blocks. Force block context with !important so
     the in-body <style> table rules cannot reassert table-cell layout. */
  body .lms-table,
  body .lms-table tbody,
  body .lms-table tr,
  body .lms-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .lms-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  /* CRITICAL FIX (overlap): fully kill the sticky/floating header. The prior
     `position: static` lost to the in-body sticky rule, so the blue "ID" pill
     floated over the first rows. Remove it from flow entirely with !important. */
  body .lms-table thead {
    display: none !important;
    position: static !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
  }
  body .lms-table thead th {
    display: none !important;
  }

  /* Each row is a separated card; relative positioning gives a clean stacking
     context so children never overlap. */
  body .lms-table tbody tr {
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0.5rem !important;
    margin: 0 0 0.85rem 0 !important;
    padding: 0.4rem 0.35rem !important;
    background: rgba(255, 255, 255, 0.025) !important;
    overflow: hidden !important;
  }

  /* Each cell is a full-width stacked block, normal flow, wraps text. */
  body .lms-table tbody td {
    position: static !important;
    float: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.55rem 0.85rem !important;
    white-space: normal !important;
    vertical-align: top !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
  }
  body .lms-table tbody td:last-child {
    border-bottom: none !important;
  }

  /* ID cell: full value, on its own line, prominent, never overlapping. */
  body .lms-table tbody td:first-child {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    padding-bottom: 0.35rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* Course title block: ensure the title + date wrap and don't collide. */
  body .lms-table tbody td:nth-child(2) strong {
    display: block !important;
    line-height: 1.3 !important;
    margin-bottom: 0.15rem !important;
  }
  body .lms-table tbody td:nth-child(2) span {
    display: inline-block !important;
  }

  /* Review cell: wrap fully instead of single-line ellipsis truncation. */
  body .lms-table tbody td div[style*="text-overflow"] {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Actions stay left-aligned within the stacked card. */
  body .lms-table tbody td:last-child > div {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  /* Pagination footer wraps cleanly full width. */
  body .lms-admin-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
  }

  /* Mobile sidebar brand wordmark contrast (1-0848) — keep near-white. */
  body .lms-admin__sidebar-brand a,
  body .lms-admin__sidebar-brand a span {
    color: #f4f7fb !important;
  }
}

/* ===== P040.css ===== */
/* ==========================================================================
   P040 — Certificate Templates (/workspace/certificate-templates)
   Third-pass UI fixes. This partial loads LAST; uses !important to beat the
   inline <style> block injected by lms-admin-sidebar.html.twig and inline
   element styles. Selectors verified against:
     - web/modules/custom/lms_certificate/templates/lms-admin-certificate-templates.html.twig
     - web/modules/custom/lms_course/templates/lms-admin-sidebar.html.twig
   ========================================================================== */

/* [P040] ISSUE 1-0855, 1-0864: Sidebar 'SilverCare' brand wordmark renders in a
   muted blue-grey (#e6edf3 at small size on #161b22 reads dim). Force a true
   high-contrast white wordmark meeting WCAG AA on the dark sidebar.
   Targets the fallback site_name <span> (and its <a> wrapper) in the brand. */
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand a span {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important; /* beat any text-fill override */
  text-shadow: none !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   MOBILE LAYOUT / OVERFLOW  (1-0859 critical, 1-0862 major)
   PRIOR FIX FAILED. Root cause: the sidebar is position:fixed; width:260px and
   .lms-admin__main carries margin-left:260px with NO mobile breakpoint, so the
   content (and its table) is shoved off the right edge. The table headers also
   use white-space:nowrap. Fix: collapse to a single column, drop the desktop
   offset, contain the page width, and let the table scroll inside its own box.
   ========================================================================== */
@media (max-width: 768px) {

  /* [P040] ISSUE 1-0859: stack admin shell to a single column at mobile and
     stop any horizontal page overflow. */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .lms-admin {
    display: block !important;
    min-height: auto !important;
  }

  /* Un-fix the sidebar so it no longer overlaps/pushes content; full-width row. */
  .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    overflow-y: visible !important;
  }

  /* Remove the 260px desktop offset that pushed the table off-screen. */
  .lms-admin__main {
    margin-left: 0 !important;
    padding: 1.25rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Header row (title + Add New Template button) wraps instead of overflowing. */
  .lms-admin__main > div[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
  .lms-admin__main .lms-btn,
  .lms-admin__main .btn-lms-primary {
    white-space: nowrap !important;
  }

  /* [P040] ISSUE 1-0862: the card / table must not exceed viewport; the table
     scrolls horizontally INSIDE its responsive wrapper instead of clipping the
     whole page. Header label 'TEMPLATE NAME' and ACTIONS become reachable. */
  .lms-admin-card {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .lms-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .lms-table {
    min-width: 640px !important; /* preserve column layout; scroll inside wrapper */
  }
  .lms-table th,
  .lms-table td {
    padding: 0.75rem 1rem !important;
  }

  /* Keep the Actions cell from stretching the row off-screen. */
  .lms-table td[style*="flex-end"] {
    justify-content: flex-end !important;
  }
}

/* ===== P041.css ===== */
/* ============================================================
   P041 — Issued Certificates (Certificate Management)
   Theme: lms_theme / SilverCare
   Third-pass CSS overrides. Loads LAST. Public workspace page
   rendered with the lms-admin layout (lms-admin-certificates.html.twig
   + lms-admin-sidebar.html.twig).
   ============================================================ */

/* [P041] ISSUE 1-0868: Sidebar 'SilverCare' wordmark low contrast on near-black.
   The brand renders either as the site_name <span> (.lms-admin__sidebar-brand a span)
   or as an SVG logo image. Prior text-color fixes failed, so we force a bright,
   high-contrast near-white value on BOTH the link text AND any inner span, and
   brighten an image wordmark via filter as a fallback. */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand a span {
  color: #f8fafc !important;            /* WCAG AA on near-black sidebar */
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Fallback for the case where the wordmark is an inline SVG/IMG logo:
   lift its luminance/saturation so a pale desaturated mark reads clearly. */
.lms-admin .lms-admin__sidebar-brand a img,
.lms-admin__sidebar-brand a img {
  filter: brightness(1.6) saturate(1.4) contrast(1.05) !important;
}
.lms-admin .lms-admin__sidebar-brand a svg,
.lms-admin .lms-admin__sidebar-brand a svg text,
.lms-admin__sidebar-brand a svg,
.lms-admin__sidebar-brand a svg text {
  fill: #f8fafc !important;
}

/* [P041] ISSUE 1-0871: Per-row action buttons (View PDF / Regenerate / Revoke)
   render as 3 inline <a> with inline styles, wrapping unevenly so 'Regenerate'
   and 'Revoke' stack at a different width than the wide 'View PDF' — ragged,
   unbalanced cluster across rows.
   Fix: make the actions cell a fixed-width flex row, give all 3 buttons an
   equal min-width, equal padding, a shared gap, and a common baseline so they
   line up to a consistent grid and right edge on every row. */
.lms-admin .lms-table td:last-child {
  white-space: nowrap !important;
}

.lms-admin .lms-table td:last-child {
  /* establish the actions cluster as a single right-aligned flex row */
  text-align: right !important;
}

.lms-admin .lms-table td:last-child > a {
  /* uniform button geometry — beats per-link inline styles */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  box-sizing: border-box !important;
  min-width: 120px !important;
  height: 34px !important;
  padding: 0 0.75rem !important;
  margin: 0 0 0 0.5rem !important;   /* consistent gap, kill mixed inline margins */
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0.5rem !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* First action button (View PDF) needs no left margin so the cluster hugs
   a clean shared right edge with even gaps between the three buttons. */
.lms-admin .lms-table td:last-child > a:first-child {
  margin-left: 0 !important;
}

/* Keep the whole cluster on one line and right-aligned within the cell so
   every row's buttons share the same right edge and column grid. */
.lms-admin .lms-table td:last-child {
  min-width: 408px;  /* 3 x 120px + 2 x 0.5rem gaps + slack: prevents wrap */
}

/* Responsive: on narrow widths allow the cluster to wrap as a tidy right-aligned
   group rather than mid-button, keeping equal widths. */
@media (max-width: 1100px) {
  .lms-admin .lms-table td:last-child {
    white-space: normal !important;
    min-width: 0;
  }
  .lms-admin .lms-table td:last-child > a {
    margin: 0.25rem 0 0.25rem 0.5rem !important;
  }
}

/* [P041] ISSUE 1-0874: No pagination/page-size controls — DEFERRED.
   Adding a working pager (next/prev, page-size selector, server-side limiting)
   requires markup + controller/query changes in lms_certificate; it cannot be
   implemented in a CSS override. No CSS applied for this issue. */

/* ===== P042.css ===== */
/* ============================================================
   P042 — /workspace/content-tools  (system 403 / "Access denied")
   Real body class (from live markup): body.route--system-403
   Page structure (live curl):
     .lms-page (min-height:100vh; flex column)
       header.lms-navbar          <- brand + nav  (RENDERS)
       main.lms-page__content     <- .lms-messages-wrapper (hidden)
                                     + #block-lms-theme-content (the 1 line)
       footer.lms-footer          <- full footer  (RENDERS)
   => 1-0888 / 1-0890 / 1-0892 "missing header/footer/brand" are already
      resolved at the MARKUP level (header + footer + logo are present in
      the page template). The remaining CSS-addressable defect is the lone
      error sentence being stranded at the top-left of an otherwise empty
      content column with cramped spacing.
   THIRD PASS: the prior min-height:60vh did not visibly center the block
   (content column did not grow / specificity lost). This pass forces the
   content area to truly fill the space between the rendered header and
   footer and hard-centers the message with !important so it can no longer
   read as a broken, top-anchored, empty page.
   ============================================================ */

/* [P042] ISSUE 1-0892,1-0895: force the 403 content column to grow into the
   space between header and footer and HARD-center the lone message both
   axes, so it is never stranded at the top of a blank column.
   Uses !important to beat the base .lms-page__content rule and any earlier
   pass that under-specified the height. */
body.route--system-403 .lms-page__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* fill remaining viewport: header (~64px) + footer; min-height guarantees
     a tall column even when the rendered footer is short. */
  min-height: calc(100vh - 64px) !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  gap: 1rem !important;
}

/* [P042] ISSUE 1-0895,1-0896: present the error text as a self-contained,
   readable, centered card with comfortable max-width and even vertical
   rhythm instead of a single sentence floating against blank white.
   AA-contrast text on the light medical background. */
body.route--system-403 #block-lms-theme-content {
  max-width: 40rem !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem !important;
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  text-align: center !important;
}

/* [P042] ISSUE 1-0896: give the access-denied message a clear, balanced
   heading treatment + spacing so the heading and body do not crowd together
   and the transition to body text is even (no abrupt cramped band edge). */
body.route--system-403 .lms-page__content h1,
body.route--system-403 #block-lms-theme-content h1 {
  margin: 0 0 1rem !important;
  font-size: 1.875rem !important;
  line-height: 1.2 !important;
  color: #1f2937 !important;
}

/* [P042] ISSUE 1-0895: collapse the empty/hidden messages wrapper so it
   contributes no stray top whitespace above the centered message. */
body.route--system-403 .lms-messages-wrapper:empty,
body.route--system-403 .lms-messages-wrapper > .hidden,
body.route--system-403 [data-drupal-messages-fallback].hidden {
  margin: 0 !important;
  padding: 0 !important;
}

/* [P042] ISSUE 1-0894 (partial, CSS-only affordance): surface a friendly
   recovery prompt under the bare one-line message so the page is not a
   dead end. (A real, focusable "Go home" anchor needs a 403 template and
   is deferred — this only adds guidance text via generated content.) */
body.route--system-403 #block-lms-theme-content::after {
  content: "Return to the SilverCare home page to continue.";
  display: block;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #64748b;
}

/* [P042] ISSUE 1-0895,1-0896: mobile — keep the message centered and the
   spacing intentional so the column never reads as a broken empty zone. */
@media (max-width: 480px) {
  body.route--system-403 .lms-page__content {
    min-height: calc(100vh - 56px) !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  body.route--system-403 #block-lms-theme-content {
    padding: 1.75rem 1.25rem !important;
    font-size: 1.0625rem !important;
  }
  body.route--system-403 .lms-page__content h1,
  body.route--system-403 #block-lms-theme-content h1 {
    font-size: 1.5rem !important;
  }
}

/* ===== P043.css ===== */
/* ============================================================
   P043 — /manage/blog  (route--system-403  Access denied)
   THIRD-pass fixes. Active body classes:
     layout-medical route--system-403 is-workspace
   IMPORTANT: this page carries .is-workspace, so every theme rule
   scoped `:not(.is-workspace)` (medical.css etc.) is INERT here.
   Prior passes failed because their selectors EXCLUDED .is-workspace
   (e.g. body.layout-medical:not(.is-workspace) #lms-back-to-top) and
   so never matched. This partial loads LAST; selectors below do NOT
   exclude .is-workspace, and use !important to beat in-body <style>.
   ============================================================ */

/* ------------------------------------------------------------
   [P043] ISSUE 1-0905: styled access-denied state.
   Keep the centered card + lock icon + "Access denied" heading
   robust on the is-workspace 403 page (re-asserted with high
   specificity so it survives regardless of skin scoping).
   ------------------------------------------------------------ */
body.route--system-403 .lms-page__content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.route--system-403 #block-lms-theme-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  width: 100%;
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Decorative lock icon above the heading. */
body.route--system-403 #block-lms-theme-content::before {
  content: "\f023"; /* Font Awesome lock */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  order: -2;
  display: block;
  font-size: 2.75rem;
  line-height: 1;
  color: #0077b6;
  margin-bottom: 1rem;
}

/* Injected "Access denied" heading above the message text. */
body.route--system-403 #block-lms-theme-content::after {
  content: "Access denied";
  order: -1;
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

/* ------------------------------------------------------------
   [P043] ISSUE 1-0907: huge blank band before the footer on the
   sparse 403 page (PRIOR FIX FAILED on mobile — content stuck to
   the top of an over-tall region instead of centering).
   Give the content region an explicit, viewport-driven min-height
   and let the flex column center the card vertically. On mobile we
   pin a tighter min-height so the card centers in the visible band
   rather than leaving a tall empty strip below it.
   ------------------------------------------------------------ */
body.route--system-403 .lms-page__content {
  min-height: calc(100vh - 220px) !important;
  padding: 3rem 1rem 4rem !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.route--system-403 .lms-page__content {
    /* header ~64px; keep the card centered in the remaining band so
       no large gap forms above the footer. */
    min-height: calc(100vh - 140px) !important;
    padding: 2rem 1.25rem !important;
  }
  body.route--system-403 #block-lms-theme-content {
    margin: 0 auto !important;
  }
}

/* ------------------------------------------------------------
   [P043] ISSUE 1-0903: footer column headings not top-aligned —
   QUICK LINKS sits a full logo+tagline block below COURSE /
   SUPPORTS / CONTACT INFO (PRIOR FIX FAILED — tightening the brand
   block margins was not enough; the logo+description still pushes
   QUICK LINKS down). Deliberate fix: bring all four headings onto a
   common row by reserving matching space ABOVE the headings in the
   other three columns (where column 1 carries the logo/tagline).
   This reads as an intentional shared heading grid.
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  body.route--system-403 .lms-footer__grid {
    align-items: start;
  }
  /* Reserve the logo+tagline height above the headings of cols 2-4
     so their headings line up with QUICK LINKS in col 1. */
  body.route--system-403 .lms-footer__col:not(:first-child) {
    padding-top: 4.75rem;
  }
  /* Tighten the brand block so QUICK LINKS sits at a predictable
     offset that the reserved padding above matches. */
  body.route--system-403 .lms-footer__col:first-child .lms-footer__brand {
    margin-bottom: 0.5rem;
  }
  body.route--system-403 .lms-footer__col:first-child .lms-footer__description {
    margin-bottom: 0.85rem;
  }
  body.route--system-403 .lms-footer__col:first-child h4 {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   [P043] ISSUE 1-0911: notification bell badge contrast (mobile).
   The bell block ships an in-body <style> setting the counter to a
   mid-tone teal gradient (#0077b6 → #0096c7) with small offset that
   overlaps the glyph. That <style> sits later in document order than
   this <head> partial, so we MUST use !important to win. Switch to a
   high-contrast solid red, add a white ring, and nudge the offset so
   it no longer overlaps the bell.
   ------------------------------------------------------------ */
.lms-bell-icon-wrapper .lms-bell-counter {
  background: #dc2626 !important;        /* red-600: AA white-on-red */
  background-image: none !important;     /* kill the teal gradient */
  color: #ffffff !important;
  top: -7px !important;
  right: -7px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 0.3rem !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ------------------------------------------------------------
   [P043] ISSUE 1-0913: scroll-to-top FAB overlaps the footer
   columns on mobile (PRIOR FIX FAILED — prior rules were scoped
   `:not(.is-workspace)` / `.layout-minimalist` and never matched on
   this is-workspace medical page; the active FAB rule is the
   unscoped `#lms-back-to-top.lms-back-to-top`).
   Re-pin the FAB with selectors that DO match here, raise its
   z-index, and reserve a bottom gutter on the footer so the button
   can never sit on top of footer text/links.
   ------------------------------------------------------------ */
#lms-back-to-top.lms-back-to-top,
body.route--system-403 #lms-back-to-top {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 1.5rem !important;
  left: auto !important;
  z-index: 1300 !important;
}

body.route--system-403 .lms-footer {
  padding-bottom: 5rem !important;
}

@media (max-width: 768px) {
  #lms-back-to-top.lms-back-to-top,
  body.route--system-403 #lms-back-to-top {
    right: 12px !important;
    bottom: 16px !important;
  }
  body.route--system-403 .lms-footer {
    /* taller gutter so the FAB clears the CONTACT INFO / copyright
       block on the stacked mobile footer. */
    padding-bottom: 6rem !important;
  }
}

/* ===== P044.css ===== */
/* ==========================================================================
   P044 — AI Course Builder (/manage/courses/ai-builder)
   route_class: route--lms-ai-course-builder-form
   Third-pass UI fixes.

   NOTE: All reported issues for this page require markup/data changes that
   CSS cannot perform. They are documented here and DEFERRED — there is no
   valid corrective CSS (contrast/spacing/alignment/overflow/etc.) for them.
   ========================================================================== */

/* [P044] ISSUE 1-0916, 1-0927: Course Topic field empty while Target Audience
   ("Beginners") and Tone of Voice ("Professional & Academic") are prefilled.
   DEFERRED — fix is a form definition change in
   web/modules/custom/lms_ai/src/Form/CourseBuilderForm.php: add
   '#placeholder' => 'e.g. Advanced Digital Marketing Strategies' to the
   'topic' element (or drop '#default_value' from 'audience'/'tone').
   CSS cannot inject placeholder attribute text into an empty <input>. */

/* [P044] ISSUE 1-0925: Page <title> uses wand emoji while hero <h1> uses
   sparkle. DEFERRED — both are text content; the emoji must be aligned in
   the form/page title markup, not via CSS. */

/* [P044] ISSUE 1-0921: Footer "COURSE" column heading mislabels its
   news/guide links and duplicates "News". DEFERRED — requires renaming the
   footer block heading and de-duplicating menu links (content/menu data),
   not stylable via CSS. */

/* ===== P045.css ===== */
/* ==========================================================================
   P045 — Workspace Reports & Analytics (/workspace/reports)  [THIRD PASS]
   Admin layout injected by lms-admin-sidebar.html.twig: .lms-admin >
   .lms-admin__sidebar + .lms-admin__main. Loaded LAST via the admin_ui_fixes
   library. Inline <style> in the sidebar template + element inline style=""
   attributes mean !important is required to win these stubborn cases.

   ROOT CAUSE for the brand-contrast issues (why prior fixes FAILED):
   The sidebar brand is NOT a text <span>. When a site logo is configured the
   template renders ONLY an <img> (lms-admin-sidebar.html.twig L416-417); the
   <span>{{ site_name }}</span> at L420 never renders. So every prior rule
   coloring `.lms-admin__sidebar-brand a span` was a no-op. The "SilverCare"
   wordmark lives INSIDE the SVG with fill="#0e2a47" (dark navy) on the dark
   (#0b0f19) sidebar — hence the persistent low contrast. CSS cannot touch the
   SVG's fill via <img>, but a CSS filter on the <img> can lighten the baked-in
   artwork so it reads. We render the whole logo as high-contrast near-white.
   ========================================================================== */

/* [P045] ISSUE 1-0933, 1-0945: Sidebar brand wordmark "SilverCare" contrast
   (desktop + mobile). The wordmark is a dark-navy fill baked into the <img>
   SVG, so coloring the (non-existent) text span does nothing. Apply a filter
   to the logo image that turns its dark artwork into a near-white monochrome
   lockup: brightness(0) flattens to black, then invert(1) -> white, with a
   touch of brightness back-off so it is soft-white (~#ededed) rather than pure
   #fff. #ededed on #0b0f19 ~= 16:1 (passes WCAG AA comfortably).
   Both the "S" tile and the "SilverCare" wordmark become legible white. */
.lms-admin .lms-admin__sidebar-brand a img {
  filter: brightness(0) invert(1) brightness(0.97) !important;
}

/* Belt-and-suspenders: in the fallback branch (no logo configured) the
   wordmark IS a real <span>; keep it near-white too so it never regresses. */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span,
.lms-admin .lms-admin__sidebar-brand a i {
  color: #f1f5f9 !important; /* slate-100 on #0b0f19 -> ~16:1 */
  font-weight: 800;
}

/* [P045] ISSUE 1-0937: COMPLETIONS column looks empty/broken. The values ARE
   bound (template L83: {{ course.completions }}) but the cell has no explicit
   color/weight, so low completion counts — many of them "0" — render in the
   table's dim inherited tone next to the bold ENROLLMENTS column and read as
   blank. Give the Completions cell (3rd column of the Course Analytics table)
   a clearly legible color + matching weight so every value, including 0, is
   visible and the column reads as populated, not broken.
   Column order: 1 Course Name | 2 Enrollments | 3 Completions | 4 Rate | 5 Revenue */
.lms-admin #course-analytics .lms-table tbody td:nth-child(3) {
  color: #e2e8f0 !important;          /* legible light slate on dark rows */
  font-weight: 700 !important;        /* match the bold ENROLLMENTS column */
  text-align: center !important;
}