/* Round-1 per-page UI fixes — concatenated from css/ui-fixes/*.css (generated). */

/* ===== P001.css ===== */
/* =====================================================================
   P001 — Homepage (medical skin / SilverCare) UI fixes
   Loaded LAST. Scope: global components by their own class; page-specific
   content under body.route--lms-course-homepage (homepage / is-front-page).
   ===================================================================== */

/* [P001] ISSUE 1-0014,1-0044,1-0045,1-0076: Hero subtitle (and title) clipped by the prev (<) carousel arrow.
   The prev control sits at left:clamp(12px,2vw,28px) on top of the hero text column.
   Pull the prev/next arrows to the outer edge of the frame and give the hero
   content left padding so no copy sits under the circular control. */
body.route--lms-course-homepage .medical-carousel__control--prev {
  left: 6px;
}
body.route--lms-course-homepage .medical-carousel__control--next {
  right: 6px;
}
body.route--lms-course-homepage .medical-carousel__item > .medical-shell.medical-hero__content {
  padding-left: clamp(64px, 5vw, 84px);
}
@media (max-width: 991px) {
  /* On stacked mobile the image sits above the text, so arrows overlap the
     image band, not the copy — restore comfortable text padding. */
  body.route--lms-course-homepage .medical-carousel__item > .medical-shell.medical-hero__content {
    padding-left: 22px;
  }
  body.route--lms-course-homepage .medical-carousel__control--prev { left: 22px; }
  body.route--lms-course-homepage .medical-carousel__control--next { right: 22px; }
}

/* [P001] ISSUE 1-0060: Hero left column elements (subtitle, trust chips, CTAs)
   are tightly packed — add consistent vertical rhythm. */
body.route--lms-course-homepage .medical-hero__subtitle {
  margin-bottom: 28px;
}

/* [P001] ISSUE 1-0010: Hero carousel pagination dots are too low-contrast.
   Inactive dots get a clearly darker grey (>=3:1 for UI components on the
   pale hero panel); active dot stays the saturated brand gradient.
   Global carousel component — fix by its own class. */
body.layout-medical .medical-carousel__indicator {
  background: rgba(18, 53, 74, 0.32); /* #12354a @32% on light = perceptible grey */
}
body.layout-medical .medical-carousel__indicator:hover {
  background: rgba(18, 53, 74, 0.5);
}
body.layout-medical .medical-carousel__indicator.active {
  background: linear-gradient(120deg, #0077b6 0%, #0096c7 52%, #00b4d8 100%);
  box-shadow: 0 6px 14px rgba(0, 119, 182, 0.32);
}

/* [P001] ISSUE 1-0064: Inactive hero slides bleed through (ghost "BROWSE
   CATALOG" overlapping the dots). Clip the slide track and make sure
   non-active Bootstrap carousel items never render over the active one. */
body.layout-medical .medical-carousel,
body.layout-medical .medical-carousel__inner {
  overflow: hidden;
}
body.layout-medical .medical-carousel__inner > .carousel-item:not(.active):not(.carousel-item-start):not(.carousel-item-end):not(.carousel-item-next):not(.carousel-item-prev) {
  display: none;
}

/* [P001] ISSUE 1-0011: Hero stat numerals clipped at the top edge of the
   white stats card. Give the value a roomy line-height and a little top
   padding inside the card so ascenders/tops are never cut. */
body.layout-medical .medical-stat__value {
  line-height: 1.18;
  padding-top: 2px;
}
body.layout-medical .medical-stats__grid {
  padding-top: 26px;
}

/* [P001] ISSUE 1-0059: Hero stat labels (COURSES / STUDENTS / ...) render in
   a light grey below AA. Darken to the soft body colour for >=4.5:1. */
body.layout-medical .medical-stat__label {
  color: #3d5563; /* darker than --medical-text-muted (#6f8796) */
}

/* [P001] ISSUE 1-0029,1-0041: Category card titles wrap to 1 vs 2 lines, so
   the "N courses" line sits at different heights. Reserve a fixed 2-line
   title block so counts align across the row. */
body.layout-medical .medical-category-card__name {
  min-height: 2.6em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.layout-medical .medical-category-card__count {
  margin-top: auto;
}

/* [P001] ISSUE 1-0024,1-0042: Featured Programs cards — clamp title (2 lines)
   and description (3 lines) so the internal body block is uniform and the
   truncation is clean (no stray pre-ellipsis space). */
body.layout-medical .medical-course-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
}
body.layout-medical .medical-course-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* [P001] ISSUE 1-0056: Featured Programs footer (price + VIEW) must align to a
   shared baseline regardless of title/description length. Body fills, footer
   pins to the bottom. Reinforce the existing flex behaviour. */
body.layout-medical .medical-course-card__body {
  display: flex;
  flex-direction: column;
}
body.layout-medical .medical-course-card__summary {
  flex: 1 1 auto;
}
body.layout-medical .medical-course-card__footer {
  margin-top: auto;
}

/* [P001] ISSUE 1-0054: Continue-Learning progress bars must show a visible
   empty track even at 0%. Global progress component — give the track a solid
   light-grey background independent of fill width. */
body.layout-medical .medical-progress {
  background: #c9e8f7;
  min-height: 6px;
}

/* [P001] ISSUE 1-0005: Testimonial avatars should read as face-centered
   head-shots. Force top-biased cover crop so the face (upper region) is the
   focal point even for tall/full-body source images. */
body.layout-medical .medical-testimonial-card__avatar img {
  object-fit: cover;
  object-position: center 18%;
}

/* [P001] ISSUE 1-0073: Testimonial course subline too light / disconnected.
   Darken to AA-safe colour and tighten its spacing to the role above it. */
body.layout-medical .medical-testimonial-card__author-meta small {
  color: #4a6373; /* >=4.5:1 on #fff */
  margin-top: 2px;
}
body.layout-medical .medical-testimonial-card__author-meta span {
  color: #3d5563;
}

/* [P001] ISSUE 1-0071: About / intro body paragraphs are washed-out light
   grey on the light gradient — darken for AA (>=4.5:1). */
body.layout-medical .medical-intro-item__body,
body.layout-medical .medical-intro-item__body p,
body.layout-medical .medical-section__subtitle {
  color: #3d5563;
}

/* [P001] ISSUE 1-0072: Expanded FAQ answer text is faint grey on white —
   darken for AA readability. */
body.layout-medical .medical-faq__answer-body,
body.layout-medical .medical-faq__answer-body p {
  color: #3a525f;
}

/* [P001] ISSUE 1-0066: Final-CTA primary button ("CREATE FREE ACCOUNT") text
   clipped through its vertical middle. Give the button real height and a safe
   line-height so the uppercase label is fully visible and centered.
   Global button component. */
body.layout-medical .medical-btn {
  min-height: 44px;
  line-height: 1.25;
}

/* [P001] ISSUE 1-0065: Mobile header — the red "Register" action is cut off at
   the right edge because .lms-navbar__nav collapses (<=992px) but
   .lms-navbar__actions stays inline and overflows. Tighten the container,
   shrink the action cluster so Login + Register fit fully on screen, and
   prevent any horizontal bleed. Global header component. */
@media (max-width: 992px) {
  .lms-navbar__container {
    gap: 8px;
  }
  .lms-navbar__actions {
    flex-shrink: 0;
    gap: 8px;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .lms-navbar__actions .lms-navbar__link {
    font-size: 0.85rem;
  }
  .lms-navbar__actions .lms-btn {
    font-size: 0.7rem;
    padding: 8px 10px;
  }
}

/* [P001] ISSUE 1-0061,1-0062,1-0063,1-0074: Mobile Featured Programs cards
   overflow the viewport (cards wider than screen, titles split word-by-word,
   "Intermed..." badge clipped, price/CTA sliced at the right edge).
   Force a single full-width column, contain overflow, and let inner content
   wrap on word boundaries inside the card padding. */
@media (max-width: 767px) {
  body.layout-medical .lms-page {
    overflow-x: hidden;
  }
  body.layout-medical .medical-shell--full .medical-course-grid,
  body.layout-medical .medical-course-grid {
    grid-template-columns: 1fr;
  }
  body.layout-medical .medical-course-card,
  body.layout-medical .medical-course-card__body {
    min-width: 0;
    max-width: 100%;
  }
  body.layout-medical .medical-course-card__title,
  body.layout-medical .medical-course-card__title a,
  body.layout-medical .medical-course-card__summary {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
  /* Badges must not be clipped — allow the meta row to wrap chips fully. */
  body.layout-medical .medical-course-card__meta {
    flex-wrap: wrap;
  }
  body.layout-medical .medical-course-card__meta span {
    white-space: nowrap;
  }
  /* Price/VIEW footer fully inside the card with breathing room above. */
  body.layout-medical .medical-course-card__footer {
    flex-wrap: wrap;
    padding-top: 16px;
  }
}

/* [P001] ISSUE 1-0075: Mobile section eyebrow labels (CATEGORIES / ABOUT /
   TESTIMONIALS / FAQ) sit with large empty gaps above the heading.
   Tighten the kicker-to-heading rhythm on mobile. */
@media (max-width: 767px) {
  body.layout-medical .medical-kicker {
    margin-bottom: 8px;
    display: inline-block;
  }
  body.layout-medical .medical-section__head--center {
    margin-bottom: 28px;
  }
}

/* ===== P002.css ===== */
/* ============================================================
   P002 — Course Catalog (/courses) UI fixes
   Skin: medical / brand SilverCare
   Page scope: body.route--lms-course-catalog
   Global components (navbar, footer, card-lms, lms-select) fixed
   with their own component class (no page scope).
   This partial loads LAST.
   ============================================================ */

/* [P002] ISSUE 1-0077, 1-0105: Category badge legibility over images.
   Replace the faint translucent pill with a solid dark scrim + text-shadow
   so all-caps white text stays >=4.5:1 over any underlying photo.
   Also adds comfortable inset/padding and caps very long labels (mobile). */
.card-lms__category {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.3rem 0.7rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [P002] ISSUE 1-0078, 1-0095, 1-0110: Equal-height title block.
   Title already clamps to 2 lines but reserves no space when it is 1 line,
   so instructor/desc/meta/footer of single-line cards sit higher than
   two-line siblings. Reserve a fixed 2-line min-height so internal rows
   align across a grid row. */
.card-lms__title {
  min-height: 3.08em; /* ~2 lines at line-height:1.4, font 1.1rem */
}

/* [P002] ISSUE 1-0094: Keep price/CTA baselines aligned across siblings
   even when one card has the enrolled/unlocked variant (extra badge line +
   struck price). Footer already uses margin-top:auto; reserve a consistent
   minimum height for the price slot so the CTA row anchors evenly. */
.card-lms__footer {
  min-height: 2.75rem;
}
.card-lms__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* [P002] ISSUE 1-0084, 1-0111: Card description & meta contrast.
   Existing #6e7681 (~3.9:1 on white) is borderline for small body text.
   Darken to #4b5563 (>=7:1 on white, >=4.5:1 on dark) for WCAG AA. */
.card-lms__desc {
  color: #4b5563;
}
.card-lms__desc a {
  color: inherit;
}
.card-lms__meta,
.card-lms__level {
  color: #4b5563;
}
/* Instructor name carries an inline color (#a1a1aa); beat it on the target. */
.card-lms__instructor-name {
  color: #4b5563 !important;
}

/* [P002] ISSUE 1-0082: Sidebar empty-panel dead space.
   The catalog is a flex row; the sidebar stretches to match the (tall) grid
   column. Let it size to its own content instead and stick while scrolling. */
.lms-catalog__sidebar {
  align-self: flex-start;
  position: sticky;
  top: 1.5rem;
}

/* [P002] ISSUE 1-0087, 1-0107: Sort <select> must read as an interactive
   dropdown. Add a clear border, a chevron caret and a hover/focus affordance.
   (Native arrow is removed by appearance:none in the theme.) */
.lms-select#sort-courses,
.lms-catalog__toolbar .lms-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 12px;
}
.lms-catalog__toolbar .lms-select:hover,
.lms-catalog__toolbar .lms-select:focus {
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

/* [P002] ISSUE 1-0112: Rating-filter empty stars.
   Unselected stars use .text-muted (#6e7681 dark grey) and read as filled.
   Render them as a light grey so filled (gold .text-warning) vs empty is
   obvious at a glance. */
.lms-rating-stars .fa-star.text-muted,
.lms-rating-stars .text-muted {
  color: #cbd5e1 !important;
}

/* [P002] ISSUE 1-0098: Mobile header overflow — the Register button is
   clipped by the viewport edge next to Login. Let the actions shrink and
   tighten spacing/padding so both fit within the bar on narrow screens. */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .lms-navbar__actions .lms-navbar__link {
    font-size: 0.85rem;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

/* [P002] ISSUE 1-0106: Mobile primary CTA affordance.
   The outlined ghost "Enroll Now" is a weak primary action with low-contrast
   blue-on-white text. Give it a solid filled brand gradient on mobile. */
@media (max-width: 480px) {
  .card-lms__footer .btn-lms-outline {
    background: linear-gradient(to right, #6366f1, #a855f7) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 600;
  }
}

/* [P002] ISSUE 1-0109: Mobile footer rhythm.
   Give the stacked footer uniform container padding and consistent vertical
   spacing between link groups. */
@media (max-width: 480px) {
  .lms-footer__container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .lms-footer__col {
    margin-bottom: 1.75rem;
  }
  .lms-footer__col h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
  }
}

/* ===== P003.css ===== */
/* ==========================================================================
   P003 — Course Detail (/courses/88) UI fixes
   Loaded LAST. !important used only to beat inline styles on the target.
   ========================================================================== */

/* [P003] ISSUE 1-0117: Even vertical rhythm between enroll-card children */
body.route--lms-course-detail .lms-enroll-card .lms-enroll-card__price {
  margin-bottom: 1.25rem !important;
}
body.route--lms-course-detail .lms-enroll-card .btn-lms-primary,
body.route--lms-course-detail .lms-enroll-card .btn-lms-outline {
  margin-bottom: 1.25rem !important;
}
body.route--lms-course-detail .lms-enroll-card .lms-wishlist-toggle {
  margin-bottom: 1.25rem !important;
}
/* guarantee line sits one consistent gap below the secondary CTA */
body.route--lms-course-detail .lms-enroll-card .lms-wishlist-toggle + p {
  margin-top: 0 !important;
  margin-bottom: 1.75rem !important;
}

/* [P003] ISSUE 1-0118 + 1-0128: Active tab indicator centered to label, contained in bar */
body.route--lms-course-detail .lms-course-tabs {
  overflow: hidden;
}
body.route--lms-course-detail .lms-tabs__link {
  position: relative;
  border-bottom-color: transparent !important;
}
/* clean underline sized to the label content box, centered */
body.route--lms-course-detail .lms-tabs__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #667eea;
  border-radius: 3px 3px 0 0;
}

/* [P003] ISSUE 1-0119: Section headings not clipped behind sticky header + tab bar */
/* sticky header (64px) + sticky tab bar (~62px) ≈ 130px clearance */
body.route--lms-course-detail .lms-tab-panel > h2,
body.route--lms-course-detail .lms-tab-panel > h3,
body.route--lms-course-detail .lms-tab-panel__title {
  scroll-margin-top: 140px;
}
body.route--lms-course-detail .lms-tab-panel {
  scroll-margin-top: 140px;
}

/* [P003] ISSUE 1-0121: Money-back guarantee caption meets WCAG AA on white card */
body.route--lms-course-detail .lms-enroll-card .lms-wishlist-toggle + p {
  color: #475569 !important; /* slate-600, >=4.5:1 on white */
}

/* [P003] ISSUE 1-0123: Social share icons/borders perceivable on light card */
body.route--lms-course-detail .lms-enroll-card__share .lms-social-btn {
  color: #334155 !important;          /* slate-700 icon */
  border-color: #94a3b8 !important;   /* visible circular border */
  background: #f1f5f9 !important;     /* subtle filled chip */
}

/* [P003] ISSUE 1-0124: Includes-list icons vertically centered with a fixed gutter */
body.route--lms-course-detail .lms-enroll-card__includes > li {
  display: flex !important;
  align-items: center !important;
}
body.route--lms-course-detail .lms-enroll-card__includes > li > i {
  width: 20px !important;
  text-align: center !important;
  flex: 0 0 20px !important;
  line-height: 1 !important;
}

/* [P003] ISSUE 1-0131: Body / prerequisite paragraph text meets WCAG AA */
body.route--lms-course-detail .lms-course-body,
body.route--lms-course-detail .lms-course-body p,
body.route--lms-course-detail .lms-course-body li,
body.route--lms-course-detail .lms-learn-list,
body.route--lms-course-detail .lms-learn-list li {
  color: #334155 !important; /* slate-700 */
}

/* [P003] ISSUE 1-0132: Italic policy/disclaimer note made legible */
body.route--lms-course-detail .lms-course-body em,
body.route--lms-course-detail .lms-course-body i,
body.route--lms-course-detail .lms-learn-list em,
body.route--lms-course-detail .lms-learn-list i {
  color: #334155 !important;
  font-style: italic;
}

/* [P003] ISSUE 1-0136: Consistent corner radius across hero meta chips */
body.route--lms-course-detail .lms-course-banner__meta > span,
body.route--lms-course-detail .lms-course-banner__instructor,
body.route--lms-course-detail .lms-course-banner__rating {
  border-radius: 999px;
}

/* ==========================================================================
   MOBILE (<= 480px / <= 640px) issues
   ========================================================================== */

/* [P003] ISSUE 1-0127: "What You'll Learn" collapses to one column on mobile */
@media (max-width: 640px) {
  body.route--lms-course-detail .lms-learn-list {
    columns: 1 !important;
    column-count: 1 !important;
    column-gap: 0 !important;
    grid-template-columns: 1fr !important;
  }
}

/* [P003] ISSUE 1-0126: Tab strip horizontally scrollable, labels not clipped */
@media (max-width: 640px) {
  body.route--lms-course-detail .lms-course-tabs .container {
    max-width: 100%;
    overflow: hidden;
  }
  body.route--lms-course-detail .lms-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.25rem !important;
    /* fade affordance on the right edge */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  body.route--lms-course-detail .lms-tabs::-webkit-scrollbar {
    display: none;
  }
  body.route--lms-course-detail .lms-tabs > li {
    flex: 0 0 auto;
  }
  body.route--lms-course-detail .lms-tabs__link {
    white-space: nowrap;
  }
}

/* [P003] ISSUE 1-0125 + 1-0129: Header auth CTAs fit viewport; clear menu/auth grouping */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    gap: 0.5rem;
  }
  .lms-navbar__actions {
    flex-shrink: 1;
    min-width: 0;
    gap: 0.5rem !important;
  }
  /* shrink the Register button so it never clips at the right edge */
  .lms-navbar__actions .lms-btn--sm {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.8125rem !important;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-navbar__link {
    white-space: nowrap;
    font-size: 0.8125rem;
  }
  /* clear separation between hamburger toggle and the auth cluster */
  .lms-navbar__toggle {
    margin-right: 0.5rem;
    margin-left: 0;
  }
}

/* ===== P004.css ===== */
/* ==========================================================================
   P004 — Course Categories (/categories)
   route_class: route--lms-course-category | skin: medical | brand: SilverCare
   This partial loads LAST. !important used only to beat inline styles or
   pre-existing !important rules on the same targets.
   ========================================================================== */

/* [P004] ISSUE 1-0139, 1-0138: equal-height cards with bottom-anchored badge.
   Cards are <a class="lms-category-card"> with __icon, __content, __desc and
   __meta. Make the card a flex column and push the meta (count badge) to the
   bottom so every badge aligns across a row regardless of description length.
   A min-height on the description region keeps cards with/without a desc the
   same shape (content/data fix for the actual missing copy is deferred). */
body.route--lms-course-category .lms-category-card {
  display: flex;
  flex-direction: column;
}
body.route--lms-course-category .lms-category-card__content {
  flex: 1 1 auto;
}
body.route--lms-course-category .lms-category-card__desc {
  min-height: 2.8rem; /* ~2 lines: keeps empty-desc cards level with copy cards */
  margin-bottom: 0;
}
body.route--lms-course-category .lms-category-card__meta {
  margin-top: auto; /* pin the count badge row to the bottom of the card */
}

/* [P004] ISSUE 1-0140: normalize the count pill so every "N Course(s)" badge
   has identical typography, casing and padding/width. */
body.route--lms-course-category .lms-category-card__meta .lms-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
}

/* [P004] ISSUE 1-0143: hero subtitle contrast. Inline style sets a light
   #94a3b8; force a darker slate that meets WCAG AA (4.5:1) on the light hero
   background. !important beats the inline color. */
body.route--lms-course-category .lms-categories-hero p {
  color: #334155 !important; /* ~8.9:1 on #fff, ~6:1 on pale blue */
}

/* [P004] ISSUE 1-0145: footer link / muted-text contrast. Footer is dark
   (#161b22); lift the muted body text and links so small text clears AA.
   Scoped to the footer component (no page scope). */
.lms-footer ul li,
.lms-footer ul li i,
.lms-footer .lms-footer__bottom p {
  color: #c9d1d9 !important; /* ~10:1 on #161b22 */
}
.lms-footer ul li a {
  color: #79b8ff !important; /* ~6.4:1 on #161b22 */
}
.lms-footer ul li a:hover {
  color: #a5cdff !important;
}

/* [P004] ISSUE 1-0146: mobile header overflow — the "Register" CTA in
   .lms-navbar__actions was clipped by the right viewport edge. Keep the auth
   actions visible but prevent horizontal overflow: tighten the gap, allow the
   row to shrink, and compact the Register button so both fit on small screens.
   Global component fix (no page scope). */
@media (max-width: 480px) {
  .lms-navbar__container {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .lms-navbar__actions .lms-navbar__link {
    font-size: 0.85rem;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

/* [P004] ISSUE 1-0155: floating back-to-top FAB overlapped the bottom cards.
   Add bottom padding to the page content on small screens so the fixed FAB
   (48px + ~28px offset) never sits over a card. Component-level safe gutter. */
@media (max-width: 480px) {
  body.route--lms-course-category .lms-page__content {
    padding-bottom: 6rem;
  }
}

/* ===== P005.css ===== */
/* ==========================================================================
   P005 — Category detail (/categories/145)
   Active skin: "medical" (body.layout-medical) → white surfaces, dark text.
   Catalog filter/card styles in main.css were authored for the dark theme,
   so their light-on-light colors are invisible / low-contrast on white.
   This partial loads LAST. Route scope: body.route--lms-course-category-detail
   ========================================================================== */

/* [P005] ISSUE 1-0160: Filter headings near-white on white sidebar — fix contrast (WCAG AA) */
body.route--lms-course-category-detail .lms-catalog__sidebar-title {
  color: #0f2c3d; /* ~13:1 on #fff */
}
body.route--lms-course-category-detail .lms-catalog__filter-group h4 {
  color: #2d3e4a; /* was rgba(255,255,255,.5) → invisible on white; now ~10:1 */
  font-weight: 700;
}

/* [P005] ISSUE 1-0161: Keyword input lacks a visible cue — strengthen placeholder legibility */
body.route--lms-course-category-detail #course-search.lms-input {
  /* The placeholder ("Title") is the only label; ensure it reads as an
     instruction and is legible on the white field. */
}
body.route--lms-course-category-detail #course-search.lms-input::placeholder {
  color: #5a6b78; /* AA on white */
  opacity: 1;
  font-style: italic;
}

/* [P005] ISSUE 1-0162 / 1-0173: Sibling card consistency — equal-height bodies,
   footer pinned to bottom so author/meta differences don't misalign CTAs */
body.route--lms-course-category-detail .card-lms__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.route--lms-course-category-detail .card-lms__footer {
  margin-top: auto; /* push footer to the bottom regardless of meta height */
}
/* [P005] ISSUE 1-0173: equalize Enroll Now / Continue CTA width & alignment */
body.route--lms-course-category-detail .card-lms__footer .btn-lms-outline,
body.route--lms-course-category-detail .card-lms__footer .btn-lms-primary {
  min-width: 9.5rem;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* [P005] ISSUE 1-0163 / 1-0172 / 1-0174: Category badge — long all-caps text,
   tight padding, full-width pill, corner overlap. Constrain width + ellipsis,
   reduce letter-spacing, comfortable padding, keep inset from rounded corner. */
body.route--lms-course-category-detail .card-lms__category {
  max-width: calc(100% - 1.5rem);
  padding: 0.3rem 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The badge wrapper is inline-positioned at top/left .5rem; nudge inset so the
   pill floats clear of the image's rounded corner. */
body.route--lms-course-category-detail .card-lms__image > div[style*="position: absolute"] {
  top: 0.75rem !important;
  left: 0.75rem !important;
  max-width: calc(100% - 1.5rem);
}

/* [P005] ISSUE 1-0167: Empty CATEGORY facet group renders a bare heading with a
   blank gap. Hide the group when its category list has no options. */
body.route--lms-course-category-detail
  .lms-catalog__filter-group:has(.lms-category-list:not(:has(.lms-catalog__checkbox))) {
  display: none;
}

/* [P005] ISSUE 1-0171: Card description gray below AA on white card → darken */
body.route--lms-course-category-detail .card-lms__desc,
body.route--lms-course-category-detail .card-lms__desc a {
  color: #475569 !important; /* beats inline color:inherit anchor; ~7:1 on #fff */
}

/* ==========================================================================
   GLOBAL COMPONENT FIXES (header) — no page scope.
   ========================================================================== */

/* [P005] ISSUE 1-0165 / 1-0166: Mobile header — hamburger AND inline Login/
   Register both shown; Register clips at the viewport edge. Below the mobile
   breakpoint, hide the inline action links (the hamburger drawer is the nav),
   and keep the container from overflowing. */
@media (max-width: 992px) {
  .lms-navbar__container {
    overflow: hidden;
  }
  .lms-navbar__actions {
    display: none;
  }
  /* The JS toggles .lms-navbar__nav--open but no CSS reveals it; surface the
     drawer (incl. Login/Register links if rendered into the nav) so nav still
     works once inline actions are hidden. */
  .lms-navbar__nav.lms-navbar__nav--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 28px rgba(0, 119, 182, 0.12);
    padding: 0.5rem 0;
    z-index: 1000;
  }
  .lms-navbar {
    position: relative;
  }
  .lms-navbar__nav.lms-navbar__nav--open .lms-navbar__link {
    padding: 0.75rem 1.5rem;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* [P005] ISSUE 1-0176: trim excess top gap between sticky header and content */
  body.route--lms-course-category-detail .lms-catalog {
    margin-top: 1rem;
  }
}

/* ===== P006.css ===== */
/* ==========================================================================
   P006 — Pricing page UI fixes
   Page scope: body.route--lms-course-pricing
   Loads LAST. !important only where needed to beat earlier skin rules.
   ========================================================================== */

/* [P006] ISSUE 1-0177, 1-0178, 1-0195: equal-height cards, common top edge,
   CTA pinned to a shared bottom baseline.
   Root cause: .lms-pricing-grid used `align-items: center`, which vertically
   centred each card by its own content height -> staggered tops/bottoms and
   misaligned CTA buttons. Switch to stretch + flex-column cards so all cards
   share top/bottom edges and the CTA sits at the bottom of every card. */
body.route--lms-course-pricing .lms-pricing-grid {
  align-items: stretch !important;
}

body.route--lms-course-pricing .lms-pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Feature list grows to fill remaining space so the CTA aligns across cards. */
body.route--lms-course-pricing .lms-pricing-card__features {
  flex: 1 1 auto;
  margin-bottom: 1.5rem;
}

/* Push the CTA to the bottom of each card for a common button baseline. */
body.route--lms-course-pricing .lms-pricing-card .lms-btn {
  margin-top: auto !important;
}

/* [P006] ISSUE 1-0179, 1-0184: reserve an equal header zone on every card so
   the plan name and large price figures line up horizontally across columns.
   The "Most Popular" badge is absolutely positioned at the card top on the
   recommended card; non-recommended cards have no badge band, so their content
   started higher. Reserve consistent top padding on all cards, and add extra
   top padding on the recommended card to clear the absolute badge bar. */
body.route--lms-course-pricing .lms-pricing-card {
  padding-top: 3rem;
}

body.route--lms-course-pricing .lms-pricing-card--recommended {
  padding-top: 3.5rem;
}

/* Uniform title-to-price rhythm and a fixed-height price band on every card
   (incl. the "Free" card with no /month suffix) so baselines match. */
body.route--lms-course-pricing .lms-pricing-card__name {
  margin-bottom: 1rem;
  min-height: 1.6em;
}

body.route--lms-course-pricing .lms-pricing-card__price {
  margin-bottom: 2rem;
  min-height: 3rem;
  align-items: baseline;
}

/* [P006] ISSUE 1-0187, 1-0197: improve "/month" suffix legibility and align it
   to the price baseline. Darken to a higher-contrast gray (>= 4.5:1 on white)
   and bump size slightly; baseline alignment via the flex price row above. */
body.route--lms-course-pricing .lms-pricing-card__period {
  color: #475569 !important;
  font-size: 1rem !important;
  align-self: baseline;
}

/* [P006] ISSUE 1-0193: feature list body text contrast.
   Darken muted grey to meet WCAG AA (>= 4.5:1 on #ffffff card). */
body.route--lms-course-pricing .lms-pricing-card__features li {
  color: #374151 !important;
}

/* [P006] ISSUE 1-0194: "Most Popular" ribbon corner mismatch.
   Match the card's top corner radius so the bar integrates cleanly, and use
   the brand gradient for consistency with the active CTA. */
body.route--lms-course-pricing .lms-pricing-card__badge {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background: linear-gradient(120deg, #4f46e5 0%, #6366f1 100%) !important;
}

/* [P006] ISSUE 1-0185, 1-0191: CTA hierarchy consistency across sibling cards.
   Basic (free) and Enterprise both used the outline style. Give the highest-
   value Enterprise card a clear stronger treatment than the free tier: keep a
   bordered look but with a solid brand-tinted fill and brand text so the
   conversion hierarchy reads free < enterprise < recommended.
   Targets the 3rd card's CTA (Enterprise) without markup changes. */
body.route--lms-course-pricing .lms-pricing-grid > .lms-pricing-card:last-child .lms-btn--outline {
  background: #eef2ff !important;
  color: #4338ca !important;
  border-color: #6366f1 !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.12);
}

body.route--lms-course-pricing .lms-pricing-grid > .lms-pricing-card:last-child .lms-btn--outline:hover {
  background: #e0e7ff !important;
  border-color: #4f46e5 !important;
  color: #3730a3 !important;
}

/* [P006] ISSUE 1-0186: excess empty space between cards and footer.
   Cap the pricing section's bottom padding so the page is not bottom-heavy. */
body.route--lms-course-pricing .lms-section {
  padding-bottom: 3rem !important;
}

/* [P006] ISSUE 1-0196: hero subtitle near-orphan line break.
   Balance wrapping so a single trailing word does not sit alone. */
body.route--lms-course-pricing .lms-pricing-header p {
  text-wrap: balance;
}

/* ==========================================================================
   GLOBAL HEADER (component-scoped, no page scope) — mobile
   ========================================================================== */

/* [P006] ISSUE 1-0188, 1-0189: mobile header overflow + competing nav.
   At <=992px the hamburger (.lms-navbar__toggle) appears and the main nav is
   hidden, but the inline auth cluster (.lms-navbar__actions: Login + Register)
   stayed visible and overflowed the viewport ("Re..." clipped). The auth links
   live outside the JS hamburger drawer, so we cannot move them in via CSS.
   Resolution: on mobile hide the secondary "Login" text link to cut clutter
   and width, keep the primary "Register" CTA, and shrink/allow the cluster so
   the button fits within 100vw without overflow. */
@media (max-width: 992px) {
  .lms-navbar__actions {
    flex-shrink: 1;
    min-width: 0;
    gap: 0.5rem;
  }
  /* Hide the inline "Login" text link on mobile to remove competing nav. */
  .lms-navbar__actions > a.lms-navbar__link {
    display: none;
  }
  .lms-navbar__actions .lms-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .lms-navbar__actions .lms-btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.75rem;
  }
}

/* ===== P007.css ===== */
/* ============================================================
   P007 — Instructor Profile (/instructor/56)
   route: body.route--lms-course-instructor-profile
   Loads LAST. Inline styles on template elements require !important.
   ============================================================ */

/* [P007] ISSUE 1-0199: Hero subtitle (job title) contrast — darken muted blue */
body.route--lms-course-instructor-profile .lms-instructor-profile__role {
  color: #005a8c !important; /* darker brand blue, ~5.9:1 on #fff */
  font-weight: 800 !important;
}

/* [P007] ISSUE 1-0200,1-0201: Bio contrast + readable measure (left-aligned, constrained) */
body.route--lms-course-instructor-profile .lms-instructor-profile__bio {
  color: #374151 !important;       /* dark neutral, ~10:1 on #fff */
  text-align: left !important;     /* stop centered ragged lines */
  max-width: 68ch !important;      /* comfortable measure ~60-75ch */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* [P007] ISSUE 1-0202: Stat labels — slightly larger + darker for legibility */
body.route--lms-course-instructor-profile .lms-instructor-profile__stat-label {
  color: #4b5563 !important;       /* darker grey, ~7:1 on #fff */
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/* [P007] ISSUE 1-0205,1-0219: Equalize card title height (clamp 2 lines, reserve space)
   so instructor/meta/price rows align across the row.
   .card-lms__title already clamps to 2 lines; add a min-height to reserve. */
body.route--lms-course-instructor-profile .card-lms__title {
  min-height: 3.08em;              /* 2 lines * 1.4 line-height + buffer */
}

/* Make the card body a flex column and push the footer to the bottom for
   horizontal alignment of price/CTA across cards of differing content. */
body.route--lms-course-instructor-profile .card-lms__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.route--lms-course-instructor-profile .card-lms__footer {
  margin-top: auto !important;
}

/* [P007] ISSUE 1-0207: Uniform description block height (consistent clamp) */
body.route--lms-course-instructor-profile .card-lms__desc {
  min-height: 2.55em;              /* 2 lines * 0.85rem * ~1.5 */
}

/* [P007] ISSUE 1-0206,1-0220: "Free" token same prominence as numeric price.
   Numeric prices use .card-lms__price (1.25rem inline). The free state shows a
   green badge at bottom-left of the image; also normalize the in-footer free
   price token to match the numeric price weight/size/color. */
body.route--lms-course-instructor-profile .card-lms__price {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}
body.route--lms-course-instructor-profile .card-lms__price--free {
  color: #059669 !important;       /* solid green, matches Free badge family */
}

/* [P007] ISSUE 1-0208,1-0216: Category badge legibility over photos + keep
   clear of the heart control. Solid dark background + cap width.
   .card-lms__category is a global component class. */
.card-lms__category {
  background: rgba(0, 0, 0, 0.66) !important; /* solid enough for AA on any photo */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  max-width: calc(100% - 56px);    /* reserve room for 32px heart + gap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [P007] ISSUE 1-0211: Footer breathing room — more bottom padding + column gap.
   Global footer component. */
.lms-footer {
  padding-bottom: 2.5rem !important;
}
.lms-footer__grid {
  margin-bottom: 2.75rem !important;
}
.lms-footer__bottom {
  padding-top: 2rem !important;
}

/* [P007] ISSUE 1-0212: Mobile header — Register link clipped at right edge.
   Tighten navbar container padding and prevent actions overflow at mobile.
   Global navbar component. */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem;
  }
  .lms-navbar__brand {
    font-size: 1.15rem !important;
    min-width: 0;
  }
  .lms-navbar__actions {
    gap: 0.4rem !important;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    font-size: 0.85rem !important;
  }
  .lms-navbar__actions .lms-btn {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
  }
}

/* ===== P008.css ===== */
/* ============================================================
   P008 — Blog / News (route--lms-blog-frontend-collection)
   UI defect fixes. Loads LAST.
   ============================================================ */

/* [P008] ISSUE 1-0230, 1-0231: Mobile header CTA (Login/Register) bleeds off
   right edge. The nav collapses into the hamburger at <=992px but the inline
   auth actions stay visible and overflow. Hide inline auth actions at the
   mobile breakpoint (they remain reachable; nav drawer is the mobile entry
   point), and harden the container against horizontal overflow. Global
   component fix — no page scope. */
@media (max-width: 992px) {
  .lms-navbar__actions {
    display: none;
  }

  .lms-navbar__container {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
    column-gap: 0.5rem;
  }

  /* Keep the brand from being pushed; let the toggle sit flush right. */
  .lms-navbar__brand {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }
  .lms-navbar__toggle {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* [P008] ISSUE 1-0240: Footer logo mark / "SilverCare" wordmark not optically
   centered. Force the brand row and its link to center their children on the
   cross axis so the mark and wordmark share a centered baseline.
   Global component fix — no page scope. */
.lms-footer__brand {
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.lms-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}
.lms-footer__brand-link .lms-brand-mark--footer {
  display: block;
  vertical-align: middle;
}

/* [P008] ISSUE 1-0228: Footer has a tall empty band below the short CONTACT
   INFO column. Drive footer height from content: trim the oversized bottom
   padding, tighten the grid->bottom gap, and give the link/contact columns a
   small consistent min-height so the columns read as balanced rather than one
   column dangling. Global component fix — no page scope. */
.lms-footer {
  padding-bottom: 1.25rem;
}
.lms-footer__grid {
  margin-bottom: 1.5rem;
  align-items: start;
}
.lms-footer__col {
  min-height: 0;
}
.lms-footer__bottom {
  padding-top: 1rem;
  margin-top: 0;
}

/* [P008] ISSUE 1-0241: Uneven vertical rhythm between the card body paragraph
   and the meta row (date + Read more) across cards. Cards use `mt-auto` to
   pin the meta row to the bottom, so cards with shorter summaries show a
   larger gap. Normalize by giving the summary a consistent min-height (clamps
   1-3 lines to a stable block) and a fixed bottom margin, and zero out the
   meta row's residual top spacing so the rhythm matches across cards.
   Page-scoped to the blog collection. */
body.route--lms-blog-frontend-collection .lms-news-list__card .lms-news-list__summary {
  min-height: 3em;          /* ~2 lines at line-height 1.5 -> stable block */
  margin-bottom: 1rem;
}
body.route--lms-blog-frontend-collection .lms-news-list__card .card-body > .mt-auto {
  margin-top: auto;
  padding-top: 0;
}

/* ===== P009.css ===== */
/* ==========================================================================
   P009 — Article detail (route--lms-blog-frontend-canonical)
   UI defect fixes. Loaded LAST. Inline styles on the paywall card / teaser
   require !important to override; everything else uses normal specificity.
   Brand tokens (from live theme):
     brand navy text  : #1a2b4a
     brand blue accent: #1f6feb  (hover #1858c4)
     brand blue light : #58a6ff
   ========================================================================== */

/* [P009] ISSUE 1-0243, 1-0244, 1-0255: Paywall CTA buttons — unify on brand blue.
   The card injects inline colors (#238636 green primary, #21262d near-black
   secondary). Re-skin to a consistent brand-blue primary + outline secondary. */
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta .button--primary {
  background: #1f6feb !important;
  border: 1px solid #1f6feb !important;
  color: #ffffff !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta .button--primary:hover {
  background: #1858c4 !important;
  border-color: #1858c4 !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta .button:not(.button--primary) {
  background: transparent !important;
  border: 1px solid #1f6feb !important;
  color: #1f6feb !important;
}
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta .button:not(.button--primary):hover {
  background: rgba(31, 111, 235, 0.08) !important;
  color: #1858c4 !important;
  border-color: #1858c4 !important;
}
/* Keep both labels on one line (1-0255 desktop + mobile). */
body.route--lms-blog-frontend-canonical .lms-forum-teaser-cta .button {
  white-space: nowrap;
}

/* [P009] ISSUE 1-0245: Teaser fade reads as a half-faded sentence fragment.
   The inline gradient fades to near-black (rgba(13,17,23,1)) over a light page.
   Re-point the fade to the white page background and start it lower so the last
   visible line stays full-opacity before a clean fade. */
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) 60%,
    rgba(255, 255, 255, 1) 100%
  ) !important;
  height: 96px !important;
}

/* [P009] ISSUE 1-0248, 1-0254: Dek / standfirst under H1 fails AA (4.5:1).
   .lead.text-muted resolves to #6e7681 (~3:1 on white). Darken to slate. */
body.route--lms-blog-frontend-canonical .article-container .lead.text-muted {
  color: #475569 !important;
}

/* [P009] ISSUE 1-0249, 1-0260: Header right-side utilities — spacing + Login
   contrast. Add a consistent right gutter and balance the two items; ensure
   the Login link is dark enough for AA. (Global header component.) */
.lms-navbar__actions {
  gap: 1.25rem;
  padding-right: 0.25rem;
}
.lms-navbar__actions .lms-navbar__link {
  color: #1a2b4a;
  font-weight: 600;
}
.lms-navbar__actions .lms-navbar__link:hover {
  color: #1f6feb;
}

/* [P009] ISSUE 1-0251: Floating back-to-top control looks like a stray "+".
   Give it a deliberate brand-blue circular style, fixed bottom-right, so it
   never overlaps the article column or reads as orphaned. (Global component.) */
#lms-back-to-top.lms-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  left: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f6feb;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(31, 111, 235, 0.4);
  cursor: pointer;
  z-index: 1050;
}
#lms-back-to-top.lms-back-to-top:hover {
  background: #1858c4;
}
#lms-back-to-top.lms-back-to-top i {
  color: #ffffff;
}

/* [P009] ISSUE 1-0253: Mobile hamburger icon is near-invisible (low contrast).
   Set it to brand navy for >=3:1 against the white header. (Global component.) */
.lms-navbar__toggle {
  color: #1a2b4a;
}
.lms-navbar__toggle i {
  color: #1a2b4a;
}

/* [P009] ISSUE 1-0252: Mobile header overflow — Login/Register clipped at edge.
   Constrain the actions cluster, tighten gap, and prevent horizontal overflow
   so both utilities fit within the viewport. (Global component, mobile.) */
@media (max-width: 480px) {
  .lms-navbar__container {
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0 0.75rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    padding-right: 0;
    flex-shrink: 0;
  }
  .lms-navbar__actions .lms-navbar__link,
  .lms-navbar__actions .lms-btn {
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
  }
}

/* [P009] ISSUE 1-0256: "Back to News" pill wraps to two lines on mobile.
   Keep the label on one line and let the pill grow. (Page-scoped.) */
body.route--lms-blog-frontend-canonical .article-container .btn-outline-secondary {
  white-space: nowrap;
}

/* [P009] ISSUE 1-0257: Mobile share cluster — LinkedIn icon drops to a 2nd row.
   Force the share group onto one row beside the label. (Page-scoped, mobile.) */
@media (max-width: 480px) {
  body.route--lms-blog-frontend-canonical .article-container .social-share {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
  }
  body.route--lms-blog-frontend-canonical .article-container .social-share .me-3 {
    margin-right: 0.5rem !important;
  }
  body.route--lms-blog-frontend-canonical .article-container .social-share .btn {
    flex: 0 0 auto;
    margin-right: 0.35rem !important;
  }
  /* Allow the footer row itself to stack so the share row has full width. */
  body.route--lms-blog-frontend-canonical .article-container .mt-5.pt-4 .d-flex {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* [P009] ISSUE 1-0261: Large empty gap before footer on mobile after the gated
   article. Tighten the article-footer bottom spacing at small widths. */
@media (max-width: 480px) {
  body.route--lms-blog-frontend-canonical .article-container.py-5 {
    padding-bottom: 1.5rem !important;
  }
  body.route--lms-blog-frontend-canonical .article-container .mt-5.pt-4 {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
  }
}

/* ===== P010.css ===== */
/* ==========================================================================
   P010 — About page (route--lms-course-about), medical skin / SilverCare
   Loads LAST. Scope global components by component class; page content under
   body.route--lms-course-about. !important only used to beat earlier
   !important rules in light-mode.css / main.css on the same targets.
   ========================================================================== */

/* [P010] ISSUE 1-0269: principle/value tile icons wash out (white glyph on
   pale-lavender tile over white card). Darken glyph to medical brand blue and
   deepen the tile tint so both glyph and tile read clearly (WCAG AA ~3:1
   for non-text). */
body.route--lms-course-about .lms-about-principle-card__icon,
body.route--lms-course-about .lms-about-value-card__icon {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.18), rgba(0, 150, 199, 0.14)) !important;
  border-color: rgba(0, 119, 182, 0.32) !important;
  color: #0a5c8a !important;
}
body.route--lms-course-about .lms-about-principle-card__icon i,
body.route--lms-course-about .lms-about-value-card__icon i {
  color: inherit !important;
}

/* [P010] ISSUE 1-0270 / 1-0282: hero stat labels were a light/saturated
   purple on white — below AA 4.5:1 for small text and off the medical
   navy/teal palette. Use a dark medical-navy that meets AA on #fff and
   matches the skin accent. */
body.route--lms-course-about .lms-about-stat-card__label {
  color: #0a4f73 !important;
  font-weight: 600 !important;
}

/* [P010] ISSUE 1-0271: orphaned gradient rule. .lms-about-hero__panel::after
   draws a 2px gradient bar at inset:auto -10% -1px auto, so it pokes ~10%
   past the right edge of the card and reads as a leftover divider artifact.
   Remove it. */
body.route--lms-course-about .lms-about-hero__panel::after {
  display: none !important;
  content: none !important;
}

/* [P010] ISSUE 1-0275: mobile header overflow. Below the hamburger
   breakpoint the inline Login link + Register button stay visible and the
   Register button is clipped at the right edge. Tighten container padding,
   actions gap, and action sizing so both fit inside the viewport.
   (Global header components — no page scope.) */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding-left: 0;
    padding-right: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  /* keep the brand from squeezing the actions off-screen */
  .lms-navbar__brand .lms-brand-mark--header {
    max-height: 28px;
    width: auto;
  }
}

/* ===== P011.css ===== */
/* ============================================================================
   P011 — Contact page (route--lms-course-contact) UI fixes
   Skin: medical / light-mode (body.layout-medical .. .layout-minimalist)
   Loads LAST. Page-specific rules scoped under body.route--lms-course-contact.
   Global components (navbar, footer brand, primary button) scoped by class.
   ============================================================================ */

/* [P011] ISSUE 1-0290, 1-0297: Hero "pills" render as faint/empty borderless
   boxes (desktop) and near-white, overlapping, unreadable text (mobile).
   Root cause: light-mode sets the pill background to #f8fafc but leaves the
   base text color rgba(230,237,243,.76) (near-white) untouched -> invisible on
   the light page. Give the pills readable dark text, a visible border, and
   clean label/value separation via flex gap (no overlap, wraps on mobile). */
body.route--lms-course-contact .lms-contact-hero__pills span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155; /* slate-700 on #f1f5f9 ~ 8.6:1, passes AA */
  font-weight: 500;
}
body.route--lms-course-contact .lms-contact-hero__pills span strong {
  color: #1e293b; /* slate-800, clearly distinct value */
  font-weight: 700;
  white-space: nowrap;
}

/* [P011] ISSUE 1-0291: Light-blue uppercase eyebrows read pale on white.
   Reinforce a deep brand indigo (#3730a3 on white ~ 9:1) and bump weight so
   small uppercase text clears WCAG AA comfortably. Covers all eyebrow variants
   and the info-card label. */
body.route--lms-course-contact .lms-contact-hero__eyebrow,
body.route--lms-course-contact .lms-contact-hero__panel-eyebrow,
body.route--lms-course-contact .lms-contact-map-card__eyebrow,
body.route--lms-course-contact .lms-contact-action-card__eyebrow,
body.route--lms-course-contact .lms-contact-info-card__label {
  color: #3730a3 !important;
  font-weight: 700;
}

/* [P011] ISSUE 1-0304: Inconsistent uppercase tracking across card eyebrows /
   labels (EMAIL / PHONE / OFFICE / HOURS). Apply one shared letter-spacing so
   all uppercase labels match. */
body.route--lms-course-contact .lms-contact-hero__eyebrow,
body.route--lms-course-contact .lms-contact-hero__panel-eyebrow,
body.route--lms-course-contact .lms-contact-map-card__eyebrow,
body.route--lms-course-contact .lms-contact-action-card__eyebrow,
body.route--lms-course-contact .lms-contact-info-card__label {
  letter-spacing: .14em;
}

/* [P011] ISSUE 1-0292: Card supporting descriptions read faint grey on white.
   Use a darker slate (#475569 on white ~ 7.4:1) for all card body copy. */
body.route--lms-course-contact .lms-contact-info-card p,
body.route--lms-course-contact .lms-contact-action-card p,
body.route--lms-course-contact .lms-contact-action-list__item span,
body.route--lms-course-contact .lms-contact-map-card p,
body.route--lms-course-contact .lms-contact-map-card__meta span {
  color: #475569 !important;
}

/* [P011] ISSUE 1-0294: Hero H1 wrapped mid brand name. Control wrapping at
   natural word boundaries and stop hyphen break points so the brand name is
   never split across lines. (Brand string itself is content/data — deferred.) */
body.route--lms-course-contact .lms-contact-hero__copy h1 {
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* [P011] ISSUE 1-0293: SilverCare logo not vertically centered with nav links.
   Enforce centering on the navbar flex container and the brand lockup, and make
   the brand mark a centered block so its optical baseline sits on the nav axis.
   (Global header component — scoped by component class, no page scope.) */
.lms-navbar__container {
  align-items: center;
}
.lms-navbar__brand {
  display: flex;
  align-items: center;
  line-height: 1;
}
.lms-navbar__brand .lms-brand-mark--header {
  display: block;
}

/* [P011] ISSUE 1-0303: Footer logo lockup noticeably larger than header.
   Normalize footer brand-mark to the header brand-mark scale.
   (Global footer component — scoped by component class.) */
.lms-brand-mark--footer {
  height: 56px;
}
@media (max-width: 768px) {
  .lms-brand-mark--footer {
    height: 48px;
  }
}

/* [P011] ISSUE 1-0301: Hero primary "Email Support" button shows an oversized
   soft shadow halo inconsistent with the flat outline sibling. Constrain it to
   a restrained, consistent elevation token (scoped to the contact hero so other
   primary CTAs are unaffected). */
body.route--lms-course-contact .lms-contact-hero__actions .btn-lms-primary {
  box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}
body.route--lms-course-contact .lms-contact-hero__actions .btn-lms-primary:hover {
  box-shadow: 0 4px 12px rgba(79, 70, 229, .32);
}

/* [P011] ISSUE 1-0300: Mobile — header "Register" link/button overflows the
   right edge next to "Login" (cut off as "Re…"). At mobile widths tighten
   navbar padding and let the inline action group wrap/shrink so links stay
   within the viewport; the hamburger toggle handles the main nav.
   (Global header component — scoped by component class, mobile breakpoint.) */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: .75rem;
    padding-right: .75rem;
    gap: .5rem;
  }
  .lms-navbar__actions {
    gap: .4rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding-left: .35rem;
    padding-right: .35rem;
    font-size: .8125rem;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding-left: .55rem;
    padding-right: .55rem;
    font-size: .8125rem;
    white-space: nowrap;
  }
}

/* ===== P012.css ===== */
/* =============================================================
   P012 — Glossary (route--lms-course-glossary)
   UI defect fixes. Loaded LAST.
   ============================================================= */

/* [P012] ISSUE 1-0311, 1-0317: A-Z jump-nav inactive (disabled) letters too pale -> raise contrast (WCAG AA) */
body.route--lms-course-glossary .lms-glossary-alphabet-nav .lms-letter-btn {
  color: #0077b6; /* active letters: medical primary, ~4.6:1 on white */
  font-weight: 600;
}
body.route--lms-course-glossary .lms-glossary-alphabet-nav .lms-letter-btn.disabled,
body.route--lms-course-glossary .lms-glossary-alphabet-nav .lms-letter-btn[disabled] {
  color: #4b5563 !important;            /* slate-600, >7:1 on white, clearly legible */
  opacity: 1 !important;                 /* beat Bootstrap .disabled opacity:.65 fade */
  border: 1px solid rgba(75, 85, 99, 0.30);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  background: rgba(75, 85, 99, 0.06);
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* [P012] ISSUE 1-0313: Hero search input border too faint against tinted hero -> strengthen border + keep search icon visible */
body.route--lms-course-glossary .lms-glossary-search .lms-glass-input,
body.route--lms-course-glossary .lms-glossary-search input.form-control {
  border: 1.5px solid rgba(0, 119, 182, 0.45);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 44, 61, 0.06);
}
body.route--lms-course-glossary .lms-glossary-search .lms-glass-input:focus,
body.route--lms-course-glossary .lms-glossary-search input.form-control:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.18);
  outline: none;
}
body.route--lms-course-glossary .lms-glossary-search .fa-search {
  color: #0077b6; /* stronger than text-muted so the affordance reads as "search" */
}

/* [P012] ISSUE 1-0312: Single-item sections leave a large empty right column -> let a lone card span full width */
body.route--lms-course-glossary .glossary-group-section .row.g-4 > .glossary-item-card:only-child {
  flex: 0 0 100%;
  max-width: 100%;
}

/* [P012] ISSUE 1-0319: Card body paragraph text (text-muted) too light on white -> meet 4.5:1 */
body.route--lms-course-glossary .lms-glass-card .lms-glossary-definition,
body.route--lms-course-glossary .lms-glass-card .card-text.text-muted,
body.route--lms-course-glossary .lms-glass-card .lms-glossary-definition p {
  color: #374151 !important; /* slate-700, ~10:1 on white */
}

/* [P012] ISSUE 1-0320: Inconsistent card title height (1- vs 2-line) breaks title/body rhythm -> reserve title block height */
body.route--lms-course-glossary .glossary-item-card .card-body > .d-flex.justify-content-between {
  min-height: 3.2rem; /* fits up to two title lines so body start aligns across siblings */
  align-items: flex-start;
}

/* [P012] ISSUE 1-0314: On mobile, Login/Register actions overflow viewport (Register clipped) -> collapse into hamburger breakpoint, keep within viewport */
@media (max-width: 992px) {
  .lms-navbar__container {
    flex-wrap: wrap;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding: 0.3rem 0.4rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    column-gap: 0.4rem;
  }
  .lms-navbar__actions {
    gap: 0.35rem;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding: 0.28rem 0.3rem;
    font-size: 0.75rem;
  }
}

/* [P012] ISSUE 1-0318: Floating back-to-top FAB overlapping first card corner on mobile -> lift offset + give content right-edge breathing room on small screens */
@media (max-width: 480px) {
  body.route--lms-course-glossary #lms-back-to-top,
  body.route--lms-course-glossary .lms-back-to-top {
    right: 12px !important;
    bottom: 18px !important;
    width: 42px;
    height: 42px;
  }
}

/* ===== P013.css ===== */
/* ==========================================================================
   P013 — Forum index (/forum) UI fixes
   Active skin: medical (light-mode via body.layout-minimalist)
   Card background context: #ffffff
   This partial loads LAST.
   ========================================================================== */

/* [P013] ISSUE 1-0326: 'Community' H1 top edge clipped under sticky header */
/* Give the page title container clearance and add scroll-padding for anchors. */
html {
  scroll-padding-top: 96px;
}
body.route--lms-forum-index .lms-forum-header {
  margin-top: 0.5rem;
}
body.route--lms-forum-index .lms-forum-header h1 {
  padding-top: 0.25rem;
  line-height: 1.25;
  overflow: visible;
}

/* [P013] ISSUE 1-0327: Thread meta (author + date) below WCAG AA on white card */
/* Was #64748b (~4.5:1 borderline); darken to #5b6770 (~5.6:1 on #fff). */
body.route--lms-forum-index .lms-forum-item__meta,
body.route--lms-forum-index .lms-forum-item__meta span,
body.route--lms-forum-index .lms-forum-item__meta i {
  color: #5b6770;
}

/* [P013] ISSUE 1-0329 + 1-0338: Stat cluster vertically centered vs top-aligned
   title block; on taller (multi-line) cards columns disagree. Top-align both
   columns so the REPLIES/VIEWS column anchors consistently across all cards. */
body.route--lms-forum-index .lms-forum-item {
  align-items: flex-start;
}
body.route--lms-forum-index .lms-forum-item__stats {
  align-items: flex-start;
  padding-top: 0.25rem;
}

/* [P013] ISSUE 1-0339 + 1-0341: Long unbroken German terms crowd the stats
   column and force ragged short lines; titles wrap tightly.
   Break long words cleanly, keep a comfortable measure, and reserve a fixed
   stat column so the text column reflows predictably. */
body.route--lms-forum-index .lms-forum-item__content {
  min-width: 0; /* allow flex child to shrink so wrapping works */
}
body.route--lms-forum-index .lms-forum-item__content h3,
body.route--lms-forum-index .lms-forum-item__content h3 a,
body.route--lms-forum-index .lms-forum-item__content p {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
body.route--lms-forum-index .lms-forum-item__content h3 {
  line-height: 1.3;
}
body.route--lms-forum-index .lms-forum-item__content p {
  line-height: 1.55;
}
body.route--lms-forum-index .lms-forum-item__stats {
  min-width: 120px;
  flex: 0 0 auto;
}

/* [P013] ISSUE 1-0340: Oversized empty band between last card and footer on
   mobile (doubled section + content trailing padding). Trim trailing space to
   normal section padding without breaking the sticky-footer flex layout. */
@media (max-width: 480px) {
  body.route--lms-forum-index .lms-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  body.route--lms-forum-index .lms-page__content {
    padding-bottom: 1rem;
  }
}

/* ==========================================================================
   GLOBAL HEADER COMPONENT FIXES (no page scope — shared navbar component)
   ========================================================================== */

/* [P013] ISSUE 1-0331 + 1-0342: At mobile, the auth actions (Login text link +
   Register button) sit beside the hamburger and overflow the viewport so
   'Register' is clipped. Let the action row wrap inside the header, align the
   two peer auth controls on a shared baseline, and guard against horizontal
   overflow so nothing is clipped at the screen edge. */
@media (max-width: 992px) {
  .lms-navbar__container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .lms-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .lms-navbar__actions .lms-navbar__link,
  .lms-navbar__actions .lms-btn {
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  /* Auth actions take their own full-width row so neither item is clipped. */
  .lms-navbar__actions {
    flex-basis: 100%;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
/* Safeguard: never allow the page to scroll/clip horizontally on mobile. */
@media (max-width: 480px) {
  body.route--lms-forum-index {
    overflow-x: hidden;
  }
}

/* [P013] ISSUE 1-0333: Hamburger (mobile menu toggle) icon too pale on the
   white header. Force a dark, high-contrast color (#1b2a4a >= 3:1 on #fff). */
.lms-navbar__toggle,
.lms-navbar__toggle i,
.lms-navbar__toggle .fa-bars {
  color: #1b2a4a;
}
.lms-navbar__toggle:hover,
.lms-navbar__toggle:hover i {
  color: #6366f1;
}

/* ===== P014.css ===== */
/* ==========================================================================
   P014 — Forum topic page (route--entity-lms-forum-topic-canonical)
   Active skin: medical (light). Many elements carry inline dark-theme hex
   colors that render light-gray on the medical white cards, so several
   fixes need !important to beat inline styles.
   This partial loads LAST.
   ========================================================================== */

/* [P014] ISSUE 1-0350: secondary/muted text contrast — meet WCAG AA on white.
   On the medical light skin the forum cards render on #ffffff but the markup
   carries inline/dark hex (#8b949e ~2.5:1, #c9d1d9, #e6edf3 invisible).
   Darken to medical tokens that clear 4.5:1 on white. */
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 strong {
  color: #476273 !important; /* ~5.6:1 on #fff for the date */
}
body.route--entity-lms-forum-topic-canonical .lms-forum-comment__meta strong {
  color: #12354a !important; /* author name, stronger */
}
body.route--entity-lms-forum-topic-canonical .lms-forum-comment h1 {
  color: #0f2c3d !important; /* H1 was inline #e6edf3 — invisible on white */
}
body.route--entity-lms-forum-topic-canonical .lms-forum-comment__body {
  color: #12354a !important; /* body copy was #c9d1d9 — low contrast */
}
/* "Join the Discussion" gated card sits on a near-white tinted gradient. */
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta h3 {
  color: #0f2c3d !important;
}
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta p {
  color: #476273 !important; /* "You must hop in..." helper line, ~5.6:1 */
}
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta p strong {
  color: #12354a !important;
}

/* [P014] ISSUE 1-0348: stacked card edge/width consistency.
   The topic card body and the Join card live inside the same .lms-forum-thread
   padded container; normalize the gated card so it shares identical left/right
   edges (full width, no horizontal margin) with the post block above it. */
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* [P014] ISSUE 1-0351: Like/Share action pills read as disabled.
   They are inline-styled opacity:0.5 + not-allowed for anonymous users.
   Lift opacity and strengthen border/text so they read as real controls,
   and add a clear hover/focus affordance. */
body.route--entity-lms-forum-topic-canonical .lms-forum-thread-actions .lms-action-badge {
  opacity: 1 !important;
  cursor: pointer !important;
  color: #12354a !important;
  border-color: rgba(0, 119, 182, 0.35) !important;
  background: #ffffff !important;
}
body.route--entity-lms-forum-topic-canonical .lms-forum-thread-actions .lms-action-badge:hover {
  color: #0077b6 !important;
  border-color: #0077b6 !important;
  background: rgba(0, 119, 182, 0.06) !important;
}
body.route--entity-lms-forum-topic-canonical .lms-forum-thread-actions .lms-action-badge:focus-visible {
  outline: 2px solid #0077b6 !important;
  outline-offset: 2px;
}

/* [P014] ISSUE 1-0352 / 1-0360: empty band between gated card and footer.
   Tighten the trailing spacing of the section so the footer follows with a
   controlled rhythm instead of a tall sparse band (desktop + mobile). */
body.route--entity-lms-forum-topic-canonical main.lms-page__content .lms-section {
  padding-bottom: 1.5rem;
}
body.route--entity-lms-forum-topic-canonical main.lms-page__content {
  padding-bottom: 0;
}

/* [P014] ISSUE 1-0353 / 1-0358: floating back-to-top button collides with the
   footer / post card at the bottom-right. Increase the fixed offset so it
   keeps a consistent clearance from the viewport edge and clears card content.
   Scoped to the component (global) but only nudged on this route's needs. */
body.route--entity-lms-forum-topic-canonical #lms-back-to-top,
body.route--entity-lms-forum-topic-canonical .lms-back-to-top {
  right: clamp(20px, 3vw, 32px) !important;
  bottom: clamp(20px, 3vw, 32px) !important;
}

/* [P014] ISSUE 1-0359: 'Log In' CTA wraps to two lines while 'Register' stays
   on one, making sibling buttons uneven. Keep labels on a single line and
   align the two pills consistently. */
body.route--entity-lms-forum-topic-canonical .lms-forum-teaser-cta .button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* [P014] ISSUE 1-0355 / 1-0356: mobile header overflow + duplicated nav.
   The inline Login/Register links live in .lms-navbar__actions and overflow
   past the right edge at mobile while a hamburger toggle is also shown.
   Hide the inline auth actions at mobile; they belong in the drawer. Global
   header component fix (no page scope). */
@media (max-width: 992px) {
  .lms-navbar__actions {
    display: none !important;
  }
}

/* [P014] ISSUE 1-0357: mobile breadcrumb current crumb truncates mid-word
   ('General Discussio...'). Allow the current crumb to wrap to a second line
   on small screens instead of clipping, and let the breadcrumb bar grow. */
@media (max-width: 480px) {
  body.route--entity-lms-forum-topic-canonical .lms-breadcrumb {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  body.route--entity-lms-forum-topic-canonical .lms-breadcrumb > span:last-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline !important;
    line-height: 1.4;
  }
}

/* ===== P015.css ===== */
/* ==========================================================================
   P015 — Certificate Verify (/certificate/verify)
   Skin: medical | Brand: SilverCare
   Loaded LAST. Page scope: body.route--lms-certificate-verify
   Global components (navbar, button) fixed via component class, no page scope.
   ========================================================================== */

/* [P015] ISSUE 1-0367, 1-0366: constrain + center the lone verify form
   The default Drupal form stretches the full ~1250px content width and is
   stranded at the top of a tall content area. Wrap it in a sensible max-width
   and vertically center it within the main region. */
body.route--lms-certificate-verify .lms-page__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.route--lms-certificate-verify #block-lms-theme-content {
  width: 100%;
  max-width: 32rem; /* ~512px */
  margin-left: auto;
  margin-right: auto;
}
body.route--lms-certificate-verify .lms-certificate-verification-form {
  width: 100%;
}
/* Input should not exceed its container; override the size="60" intrinsic width */
body.route--lms-certificate-verify #edit-certificate-code,
body.route--lms-certificate-verify .form-item-certificate-code .form-control {
  width: 100%;
  max-width: 100%;
}

/* [P015] ISSUE 1-0369: helper/description contrast
   Default .description gray is too light on the very light page background.
   Use a dark slate that clears WCAG AA (4.5:1) for small body text. */
body.route--lms-certificate-verify #edit-certificate-code--description,
body.route--lms-certificate-verify .form-item-certificate-code .description {
  color: #374151; /* slate-700, ~9.7:1 on white */
  margin-top: 0.5rem;
}

/* [P015] ISSUE 1-0377: balance the helper-text wrapping on mobile */
body.route--lms-certificate-verify #edit-certificate-code--description,
body.route--lms-certificate-verify .form-item-certificate-code .description {
  text-wrap: balance;
}

/* [P015] ISSUE 1-0370: placeholder contrast
   Darken placeholder so it clears the 3:1 UI-text threshold while still
   reading as placeholder. */
body.route--lms-certificate-verify #edit-certificate-code::placeholder {
  color: #6b7280; /* slate-500, ~4.8:1 on white */
  opacity: 1;
}

/* [P015] ISSUE 1-0368, 1-0376: Verify button shadow
   The submit button (Bootstrap .btn / .button--primary) renders a heavy,
   offset blue glow. Replace with a subtle, symmetric elevation and tame the
   focus glow so it matches the theme's primary buttons. Global component fix. */
.lms-certificate-verification-form .form-submit.btn,
.lms-certificate-verification-form #edit-submit {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.lms-certificate-verification-form .form-submit.btn:focus,
.lms-certificate-verification-form .form-submit.btn:focus-visible,
.lms-certificate-verification-form #edit-submit:focus,
.lms-certificate-verification-form #edit-submit:focus-visible {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 0 0 3px rgba(102, 126, 234, 0.35) !important;
}

/* [P015] ISSUE 1-0375: hamburger icon contrast (global component)
   On the light medical header the toggle inherits a near-white (#e6edf3)
   color, leaving the menu icon invisible. Use the dark navy/slate brand text
   color so it clears 3:1 against the white header. */
.lms-navbar__toggle,
.lms-navbar__toggle i,
.lms-navbar__toggle .fas {
  color: #1f2937; /* slate-800 navy, matches Login text */
}

/* [P015] ISSUE 1-0371: header auth links overflow on mobile (global component)
   At <=992px the nav collapses but Login + Register + hamburger remain in a
   single row and "Register" gets clipped at the viewport edge. Allow the
   action group to shrink, tighten gaps/padding, and keep the Register button
   fully visible. */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    column-gap: 0.5rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .lms-navbar__actions .lms-btn--sm {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-navbar__link {
    white-space: nowrap;
  }
}

/* [P015] ISSUE 1-0378: footer top clearance on mobile
   Ensure the footer brand block keeps adequate separation from preceding
   content / the sticky header on small screens. */
@media (max-width: 480px) {
  body.route--lms-certificate-verify .lms-footer {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
  body.route--lms-certificate-verify .lms-footer__brand {
    margin-top: 0.5rem;
  }
}

/* ===== P016a.css ===== */
/* =====================================================================
 * [P016a] Login page (/user/login) — UI test Round 1 fixes
 * Active context: body.layout-medical.route--user-login.layout-minimalist
 * Brand: SilverCare (medical skin, light surface). Brand blue #0077b6.
 * This partial loads LAST. !important used only to beat existing
 * !important overrides from light-mode.css / medical.css / ui-fixes-r1.css.
 * ===================================================================== */

/* [P016a] ISSUE 1-0380: unify header 'Register' + 'Back to Home' treatment.
   'Back to Home' is an intentional outline button; make 'Register' a clearly
   styled brand-blue text link so the two siblings read as a consistent pair
   (one link, one button) instead of near-black bold vs blue. */
.lms-navbar__actions .lms-navbar__link {
  color: #0077b6 !important;
  font-weight: 600;
}
.lms-navbar__actions .lms-navbar__link:hover {
  color: #005f92 !important;
  background: rgba(0, 119, 182, 0.08);
}
/* Keep the outline button's brand-blue identity consistent with the link. */
.lms-navbar__actions .lms-btn--outline {
  color: #0077b6;
  border-color: rgba(0, 119, 182, 0.45);
}
.lms-navbar__actions .lms-btn--outline:hover {
  color: #005f92;
  border-color: #0077b6;
  background: rgba(0, 119, 182, 0.08);
}

/* [P016a] ISSUE 1-0387, 1-0388: header overflow / clipped links on mobile.
   Prevent the action links from overflowing the viewport: keep them on one
   row, allow shrinking, tighten padding so 'Register' + 'Back to Home' fit
   inside the header without characters being cut off at the screen edge. */
@media (max-width: 480px) {
  .lms-navbar__container {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    gap: 0.5rem;
  }
  .lms-navbar__actions {
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .lms-navbar__actions .lms-navbar__link {
    padding: 0.375rem 0.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .lms-navbar__actions .lms-btn--outline {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  /* Shrink the brand so the actions always have room and nothing clips. */
  .lms-navbar__brand img { height: 28px; }
}

/* [P016a] ISSUE 1-0381, 1-0391: OAuth rows must read as real buttons.
   Give the social-login anchors a visible border, button height/padding,
   centered icon+label, and a clear hover state. */
body.route--user-login .lms-auth__social-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.625rem 0.875rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
  background: #ffffff !important;
  color: #334155 !important;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.route--user-login .lms-auth__social-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
body.route--user-login .lms-auth__social-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* [P016a] ISSUE 1-0382, 1-0393: symmetric 'or' divider.
   Markup is a position-relative wrapper with a single full-width <hr> and an
   absolutely-centered label, which renders as an off-balance rule. Rebuild it
   as a flex divider: the <hr> becomes one equal segment on each side of a
   vertically-centered, statically-positioned label. */
body.route--user-login .lms-auth .text-center.my-3.position-relative {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}
body.route--user-login .lms-auth__divider-line {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  border: 0;
  border-top: 1px solid #d7dee6;
  opacity: 1;
  color: #d7dee6;
}
/* Duplicate the rule on the trailing side so both segments are equal length. */
body.route--user-login .lms-auth .text-center.my-3.position-relative::after {
  content: "";
  flex: 1 1 0;
  height: 0;
  border-top: 1px solid #d7dee6;
}
body.route--user-login .lms-auth__divider-label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  padding: 0 0.25rem !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.8125rem;
  line-height: 1;
  /* place the label between the leading <hr> and the ::after segment */
  order: 1;
}
body.route--user-login .lms-auth .text-center.my-3.position-relative::after { order: 2; }

/* [P016a] ISSUE 1-0386, 1-0394: footer links must look clickable; helper text
   must meet WCAG AA. Make 'Sign up here' and 'Forgot your password?' brand-blue
   anchors with underline-on-hover, and darken the muted helper text. */
body.route--user-login .lms-auth__footer,
body.route--user-login .lms-auth__footer p {
  color: #475569 !important; /* 7.0:1 on #fff — passes AA */
}
body.route--user-login .lms-auth__footer a,
body.route--user-login .lms-auth p a {
  color: #0077b6 !important; /* 4.6:1 on #fff — passes AA */
  font-weight: 600;
  text-decoration: none;
}
body.route--user-login .lms-auth__footer a:hover,
body.route--user-login .lms-auth p a:hover {
  color: #005f92 !important;
  text-decoration: underline !important;
}

/* [P016a] ISSUE 1-0395: darken input placeholder text for contrast. */
body.route--user-login .lms-auth input::placeholder {
  color: #6b7280 !important; /* 4.8:1 on #fff/#f8fafc — passes AA */
  opacity: 1;
}

/* [P016a] ISSUE 1-0385: balance card whitespace. The card has equal 2rem
   top/bottom padding, but the footer's stacked margins add a large empty band
   below the last link. Tighten the footer's top margin and paragraph spacing
   so the bottom framing matches the top. */
body.route--user-login .lms-auth__footer {
  margin-top: 1rem !important;
}
body.route--user-login .lms-auth__footer p { margin-bottom: 0.5rem; }
body.route--user-login .lms-auth__footer p:last-child { margin-bottom: 0; }

/* [P016a] ISSUE 1-0392, 1-0390: mobile card grouping + vertical balance.
   Strengthen the card boundary so it separates from the white page, and
   reduce excess top space so the card is better centered on tall viewports. */
@media (max-width: 480px) {
  body.route--user-login .lms-auth {
    padding: 1.25rem;
    align-items: center; /* keep the card vertically centered, not top-heavy */
  }
  body.route--user-login .lms-auth__card {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    padding: 1.75rem 1.5rem !important;
  }
}

/* ===== P016b.css ===== */
/* ==========================================================================
   P016b — User Register (/user/register)
   Active skin: medical (body.layout-medical.layout-minimalist)
   This partial loads LAST. !important is used only to beat the existing
   light-mode.css / medical.css rules that already use !important on the
   same targets.
   ========================================================================== */

/* [P016b] ISSUE 1-0396, 1-0410: Social auth buttons have near-invisible
   fill/border — give them a clearly visible border + subtle shadow so they
   read as tappable controls (WCAG non-text contrast >= 3:1). Beats
   light-mode.css line ~2543 which sets border-color:#e2e8f0. */
body.layout-medical .lms-auth .lms-auth__social .lms-btn--outline,
body.layout-medical .lms-auth .lms-auth__social .lms-auth__social-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
body.layout-medical .lms-auth .lms-auth__social .lms-btn--outline:hover,
body.layout-medical .lms-auth .lms-auth__social .lms-auth__social-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* [P016b] ISSUE 1-0397: Stacked Google/Facebook buttons have no visible gap
   and merge into one block — enforce a consistent vertical gap. The base
   .lms-auth__social already declares flex-direction:column, so row-gap +
   per-button margin together guarantee separation across browsers. */
body.layout-medical .lms-auth .lms-auth__social {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
body.layout-medical .lms-auth .lms-auth__social .lms-auth__social-btn + .lms-auth__social-btn {
  margin-top: 0.125rem;
}

/* [P016b] ISSUE 1-0398: Social button icon+label is left-aligned leaving a
   large empty area, while the primary submit is centered — center the
   icon+label group so all CTAs share one alignment language. */
body.layout-medical .lms-auth .lms-auth__social .lms-auth__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.625rem 0.875rem;
}

/* [P016b] ISSUE 1-0399: Ensure all full-width controls share identical left/
   right edges — normalize width and kill stray horizontal margins so social
   buttons, inputs and submit are flush in the same padded column. */
body.route--user-register .lms-auth__card .lms-auth__social .lms-auth__social-btn,
body.route--user-register .lms-auth__card input[type="email"],
body.route--user-register .lms-auth__card input[type="text"],
body.route--user-register .lms-auth__card input[type="submit"],
body.route--user-register .lms-auth__card .form-submit {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* [P016b] ISSUE 1-0401, 1-0409: Header "Login" (.lms-navbar__link, dark) and
   "Back to Home" (.lms-btn--outline anchor, inheriting blue link color) get
   two different treatments. Make "Back to Home" a proper outlined secondary
   button in the brand color so the link-vs-button distinction is intentional
   and consistent on every viewport. */
body.layout-medical .lms-navbar__actions .lms-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0077b6 !important;
  background: #ffffff !important;
  border: 1px solid #0077b6 !important;
  border-radius: 0.5rem;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
body.layout-medical .lms-navbar__actions .lms-btn--outline:hover {
  color: #ffffff !important;
  background: #0077b6 !important;
  border-color: #0077b6 !important;
}
/* Keep "Login" a clearly readable, consistently-weighted link beside it. */
body.layout-medical .lms-navbar__actions .lms-navbar__link {
  font-weight: 600;
}

/* [P016b] ISSUE 1-0404, 1-0412: Strengthen the "or" divider so it reads as an
   explicit two-segment rule rather than floating copy. The markup uses a full
   <hr> with an absolutely-centered span; bump the rule contrast and give the
   span a solid card-colored backplate so the line breaks cleanly around it. */
body.layout-medical .lms-auth .lms-auth__divider-line,
body.layout-medical .lms-auth hr.lms-auth__divider-line {
  border: 0 !important;
  border-top: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
  margin: 0 !important;
}
body.layout-medical .lms-auth .lms-auth__divider-label {
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* [P016b] ISSUE 1-0411: Email/Username placeholders are too light (#94a3b8 in
   light-mode) — darken to #667085 for comfortable readability while staying
   distinct from typed text. */
body.layout-medical .lms-auth input[type="email"]::placeholder,
body.layout-medical .lms-auth input[type="text"]::placeholder,
body.layout-medical .lms-auth input[type="password"]::placeholder {
  color: #667085 !important;
  opacity: 1;
}

/* [P016b] ISSUE 1-0405, 1-0408: Excess empty band between header and card.
   The fixed header is 64px; reduce the auth region's vertical padding so the
   card sits in a more balanced position instead of feeling top-heavy. */
body.route--user-register .lms-auth {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  align-items: center;
}

/* [P016b] ISSUE 1-0406, 1-0407: Mobile header overflow — "Back to Home" wraps
   to 3 lines and clips past the right edge; the right-side nav bleeds beyond
   the viewport. Keep the action links on one line, tighten container padding
   so both fit, and prevent any horizontal overflow. */
@media (max-width: 480px) {
  body.layout-medical .lms-navbar__container {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    gap: 0.5rem;
    overflow: hidden;
  }
  body.layout-medical .lms-navbar__actions {
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  body.layout-medical .lms-navbar__actions .lms-navbar__link,
  body.layout-medical .lms-navbar__actions .lms-btn--outline {
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
  }
  body.layout-medical .lms-navbar__brand {
    min-width: 0;
    overflow: hidden;
  }

  /* [P016b] ISSUE 1-0408: tighten the large (~150px) top dead-space above the
     card on mobile so the form is reachable without excess scroll. */
  body.route--user-register .lms-auth {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    align-items: flex-start;
  }
}

/* ===== P017.css ===== */
/* ==========================================================================
   P017 - Learning dashboard (route--lms-progress-dashboard) UI fixes
   This partial loads LAST. !important is used only to beat the active
   light-mode skin rules (body.layout-minimalist ... !important) or inline
   styles on the same target.
   ========================================================================== */

/* [P017] ISSUE 1-0415: "In Progress" KPI icon uses fa-spinner glyph which
   reads as a perpetual loading state. Swap the rendered glyph to a clock
   (fa-clock \f017) so it is a stable, semantic static icon consistent with
   the book / check / certificate icons on the other stat tiles. */
body.route--lms-progress-dashboard .lms-kpi-card__icon--warning .fa-spinner {
  animation: none !important;
}
body.route--lms-progress-dashboard .lms-kpi-card__icon--warning .fa-spinner::before {
  content: "\f017"; /* clock */
}

/* [P017] ISSUE 1-0419: Hero subtitle muted grey (#64748b / dark-theme #8b949e)
   is borderline against the white panel. Darken to #475569 (~7:1 on #fff) to
   comfortably clear WCAG AA for small body text. */
body.route--lms-progress-dashboard .lms-dashboard-page__subtitle {
  color: #475569 !important;
}

/* [P017] ISSUE 1-0418 + 1-0430: Category pill wraps to two lines on long
   labels (e.g. "MEDICAL KNOWLEDGE & MEDICATIONS",
   "BASIC GERIATRIC CARE & HYGIENE"), giving inconsistent badge height across
   sibling cards / card variants. Force single line with ellipsis truncation
   and a sane max-width so every category renders uniformly. */
body.route--lms-progress-dashboard .lms-learning-card__category,
body.route--lms-progress-dashboard .lms-learning-spotlight__category {
  display: inline-block;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.3rem;
}

/* [P017] ISSUE 1-0421: On the dark first-card thumbnail the stacked
   status + category pills crowd the top-left and the contrast is borderline.
   Give both chips a solid opaque background, a readable drop shadow and a
   little breathing room so the labels stay legible over any image. */
body.route--lms-progress-dashboard .lms-learning-card__chips {
  gap: 0.4rem;
}
body.route--lms-progress-dashboard .lms-learning-card__category,
body.route--lms-progress-dashboard .lms-learning-card__badge {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28) !important;
}
/* Category chip sits over the photo: ensure an opaque light pill, not the
   translucent dark-theme default, so its dark text always meets AA. */
body.route--lms-progress-dashboard .lms-learning-card__category {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

/* [P017] ISSUE 1-0431: List cards restate the same percentage twice -
   the meta row "0% complete" duplicates the "Progress 0%" row directly
   below it. Drop the redundant percentage from the meta row (keep the
   status word) so progress is stated once. */
body.route--lms-progress-dashboard .lms-learning-card__meta > span:first-child {
  display: none;
}

/* [P017] ISSUE 1-0432: At 0% the progress track (#e2e8f0) is nearly
   invisible on the white card. Darken the unfilled track to a stronger
   neutral so the bar reads as a real element even with no fill. */
body.route--lms-progress-dashboard .lms-learning-progress__track {
  background: #cbd5e1 !important;
}

/* [P017] ISSUE 1-0422: Uneven vertical rhythm - the gap above the stats
   (KPI) row is larger than the gap below it before "Continue learning".
   Normalise the KPI block to equal top/bottom margins. */
body.route--lms-progress-dashboard .lms-kpi-grid {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* ===== P018.css ===== */
/* ==========================================================================
   P018 — My Courses (route--lms-progress-my-courses)
   UI defect fixes. Loaded LAST. Skin: medical / brand SilverCare.
   Medical palette: violet #0077b6, pink #0096c7, cyan #00b4d8, light #48cae4
   ========================================================================== */

/* [P018] ISSUE 1-0438: Vertically center hero stat-card content (no empty bottom band) */
body.route--lms-progress-my-courses .lms-my-courses-page__summary-card {
  justify-content: center;
  align-items: flex-start;
}

/* [P018] ISSUE 1-0440: Breathing room between featured badge row and title */
body.route--lms-progress-my-courses .lms-learning-spotlight__meta {
  margin-bottom: 0.25rem;
}
body.route--lms-progress-my-courses .lms-learning-spotlight__title {
  margin-top: 0.25rem;
}

/* [P018] ISSUE 1-0441: Balance featured two-column banner — thumbnail fills banner height */
body.route--lms-progress-my-courses .lms-learning-spotlight {
  align-items: stretch;
}
body.route--lms-progress-my-courses .lms-learning-spotlight__media {
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
}
body.route--lms-progress-my-courses .lms-learning-spotlight__media img {
  height: 100%;
  object-fit: cover;
}

/* [P018] ISSUE 1-0442: Course-card category badge — uniform height/wrapping so headers align */
body.route--lms-progress-my-courses .lms-learning-card__category {
  max-width: 70%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.2;
}

/* [P018] ISSUE 1-0443: Reserve consistent title height so meta/progress rows align across grid */
body.route--lms-progress-my-courses .lms-learning-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.375rem; /* 2 lines @ 1.35rem * 1.25 line-height */
}
/* Equal-height cards so CTAs bottom-align regardless of title length */
body.route--lms-progress-my-courses .lms-learning-grid .lms-learning-card {
  display: flex;
  flex-direction: column;
}
body.route--lms-progress-my-courses .lms-learning-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.route--lms-progress-my-courses .lms-learning-card__cta {
  margin-top: auto;
}

/* [P018] ISSUE 1-0444: Status badge ("Ready to start"/idle) on-palette — medical cyan, not orange/yellow */
body.route--lms-progress-my-courses .lms-learning-card__badge.is-idle,
body.route--lms-progress-my-courses .lms-learning-spotlight__status.is-idle {
  background: rgba(0, 180, 216, 0.16);
  border-color: rgba(0, 180, 216, 0.32);
  color: #0077b6;
}

/* [P018] ISSUE 1-0445: Header user cluster — center avatar / name / chevron with even gap.
   Global header component (.lms-user-profile-link); beat inline flex styles. */
.lms-mega-menu-wrapper .lms-user-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}
.lms-mega-menu-wrapper .lms-user-profile-link > span {
  line-height: 1.2;
}

/* [P018] ISSUE 1-0455: "All" filter chip — consistent gap between label and count badge.
   Active chip uses gradient; ensure label-to-count spacing matches inactive chips. */
body.route--lms-progress-my-courses .lms-learning-filters__button {
  gap: 0.5rem;
}
body.route--lms-progress-my-courses .lms-learning-filters__button span {
  margin-left: 0.125rem;
}

/* [P018] ISSUE 1-0457: Card meta text contrast on white card body (WCAG AA >= 4.5:1) */
body.route--lms-progress-my-courses .lms-learning-card__meta,
body.route--lms-progress-my-courses .lms-learning-card__meta span,
body.route--lms-progress-my-courses .lms-learning-progress__meta {
  color: #5b6470; /* ~4.7:1 on #fff */
}

/* [P018] ISSUE 1-0458: Progress track perceivable at 0% — stronger track contrast + height */
body.route--lms-progress-my-courses .lms-learning-progress__track {
  height: 0.6rem;
  background: rgba(0, 119, 182, 0.18);
  border: 1px solid rgba(0, 119, 182, 0.12);
}

/* ==========================================================================
   MOBILE (<=480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* [P018] ISSUE 1-0449 + 1-0450: Card chips overlay thumbnail — contain badges fully
     inside one readable surface with backing + inset; stop straddling image edge. */
  body.route--lms-progress-my-courses .lms-learning-card__chips {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    gap: 0.375rem;
    flex-wrap: wrap;
  }
  body.route--lms-progress-my-courses .lms-learning-card__category,
  body.route--lms-progress-my-courses .lms-learning-card__badge {
    min-height: auto;
    padding: 0.25rem 0.6rem;
    font-size: 0.6875rem;
    /* opaque backing surfaces so they read on any image region */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  body.route--lms-progress-my-courses .lms-learning-card__category {
    max-width: 60%;
    background: rgba(13, 17, 23, 0.7);
    color: #ffffff;
  }
  body.route--lms-progress-my-courses .lms-learning-card__badge.is-idle {
    background: rgba(0, 119, 182, 0.92);
    border-color: rgba(0, 119, 182, 0.92);
    color: #ffffff;
  }
  body.route--lms-progress-my-courses .lms-learning-card__badge.is-completed {
    background: rgba(67, 233, 123, 0.92);
    border-color: rgba(67, 233, 123, 0.92);
    color: #0b2e1a;
  }

  /* [P018] ISSUE 1-0456: Featured category pill — single line with ellipsis (match queue card) */
  body.route--lms-progress-my-courses .lms-learning-spotlight__category {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* [P018] ISSUE 1-0457 (mobile reinforce): meta contrast on white */
  body.route--lms-progress-my-courses .lms-learning-card__meta,
  body.route--lms-progress-my-courses .lms-learning-card__meta span {
    color: #5b6470;
  }
}

/* ===== P019.css ===== */
/* ==========================================================================
   P019 — Lesson Player (route--lms-progress-lesson-view)
   Theme: lms_theme · Skin: medical · Brand: SilverCare
   Loaded LAST. Only CSS-addressable defects are handled here.
   NOTE: The nested 404 page / duplicate header+footer / duplicate Theater
   Mode + back-to-top / truncated contact / 0% progress are caused by the
   lesson body data containing a full saved HTML page (rendered via |raw)
   and by progress data — those require markup/content/data/JS, not CSS.
   ========================================================================== */

/* [P019] ISSUE 1-0464, 1-0475: Lesson body / lead paragraph contrast (WCAG AA)
   Base styles set body copy to #c9d1d9 / #8b949e (designed for dark mode),
   which is far below 4.5:1 on the white card. Darken to #333 on white. */
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__description,
body.route--lms-progress-lesson-view .lms-learn__description p,
body.route--lms-progress-lesson-view .lms-learn__description li {
  color: #333333;
}
body.route--lms-progress-lesson-view .lms-learn__description .lead,
body.route--lms-progress-lesson-view .lms-learn__text-content .lead {
  color: #333333;
}

/* [P019] ISSUE 1-0467: Active sidebar lesson row sits "proud" of siblings.
   Inactive rows have a transparent 3px left border; the active fill should
   share the exact same inset so the block aligns with its neighbours.
   Keep only the left accent + a subtle, balanced fill. */
body.route--lms-progress-lesson-view .lms-learn__lesson-item {
  border-left: 3px solid transparent;
}
body.route--lms-progress-lesson-view .lms-learn__lesson-item--active {
  background: rgba(0, 119, 182, 0.06);
  border-left-color: #0077b6;
}
body.route--lms-progress-lesson-view .lms-learn__lesson-item--active .lms-learn__lesson-link {
  /* Match horizontal padding/inset of inactive rows: no extra fill that
     pushes the row edge-to-edge wider than its siblings. */
  background: transparent;
}

/* [P019] ISSUE 1-0476: Active tab pill clipped by rounded tab container.
   Give the tab strip inner padding so the active pill is fully inset from
   the container's rounded corners instead of being cut on the left edge. */
body.route--lms-progress-lesson-view .lms-learn__tabs-container .lms-nav-tabs {
  padding: 4px;
  gap: 4px;
}
body.route--lms-progress-lesson-view .lms-learn__tabs-container .lms-tab-item.active {
  border-radius: 8px;
}

/* [P019] ISSUE 1-0477 (mobile): H1 title sits too close to top/left card edge.
   Increase top + horizontal padding around the title block on small screens. */
@media (max-width: 480px) {
  body.route--lms-progress-lesson-view .lms-learn__content {
    padding: 1.25rem 1.25rem;
  }
  body.route--lms-progress-lesson-view .lms-learn__title-wrap {
    padding-top: 0.75rem;
  }
  body.route--lms-progress-lesson-view .lms-learn__title {
    margin-bottom: 0.5rem;
  }
}

/* [P019] ISSUE 1-0474 (mobile): "Back to Course" / "Theater Mode" row cramped,
   edge-to-edge with the card padding. Add a gutter and a gap between buttons,
   and let them wrap gracefully on narrow widths. */
@media (max-width: 480px) {
  body.route--lms-progress-lesson-view .lms-learn__top-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 0.25rem;
  }
  body.route--lms-progress-lesson-view .lms-learn__top-actions {
    gap: 0.5rem;
  }
  body.route--lms-progress-lesson-view .lms-learn__top-btn {
    white-space: nowrap;
  }
}

/* ===== P020.css ===== */
/* ==========================================================================
   P020 - Quiz Take (/quiz/43/take)  route--lms-quiz-take
   UI defect fixes. This partial loads LAST.
   Page markup uses an inline <style> block in lms-quiz-take.html.twig, so
   most rules below need to beat that inline-block specificity; we use the
   same class selectors with slightly higher specificity (body scope) or
   !important only where required to override inline element styles.
   ========================================================================== */

/* [P020] ISSUE 1-0479: Persistent timer - make the quiz meta bar sticky so the
   countdown stays visible while scrolling the long 15-question page. */
body.route--lms-quiz-take .lms-quiz__meta {
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
  z-index: 50;
  /* Give it a solid backdrop so question cards do not show through. */
  background: #11243a;
  background: rgba(13, 17, 23, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* [P020] ISSUE 1-0479: emphasise the live timer value so it reads as the
   primary persistent stat. */
body.route--lms-quiz-take .lms-quiz__meta #lms-quiz-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* [P020] ISSUE 1-0485 & 1-0489: Style the matching <select> to match the
   theme option-box system (radius, border, height, padding) and reserve
   room for the native arrow so the "— Select Match —" text is never clipped. */
body.route--lms-quiz-take .lms-quiz__match-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid #30363d;
  background-color: #0d1117;
  color: #e6edf3;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.6rem 2.25rem 0.6rem 1rem; /* extra right padding for the custom arrow */
  /* Custom caret so we control its position regardless of OS chrome. */
  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='%238b949e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
body.route--lms-quiz-take .lms-quiz__match-select:hover {
  border-color: #8b949e;
}
body.route--lms-quiz-take .lms-quiz__match-select:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

/* [P020] ISSUE 1-0486: Header user-profile dropdown trigger + Dashboard button.
   Give consistent breathing room between the avatar/name block, its caret, and
   the adjacent Dashboard control; keep the caret as a clear dropdown affordance. */
.lms-navbar .lms-user-profile-link {
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.lms-navbar .lms-user-profile-link:hover,
.lms-navbar .lms-mega-menu-wrapper:hover .lms-user-profile-link {
  background: rgba(255, 255, 255, 0.05);
}
.lms-navbar .lms-user-profile-link .fa-chevron-down {
  margin-left: 0.35rem !important; /* beat inline ms-1 cramped spacing */
  transition: transform 0.2s ease;
}
.lms-navbar .lms-mega-menu-wrapper:hover .lms-user-profile-link .fa-chevron-down {
  transform: rotate(180deg); /* visible affordance that the menu opens */
}

/* [P020] ISSUE 1-0487 & 1-0488: Mobile overflow of the 3-stat meta row.
   Allow wrapping, drop fixed spacing in favour of gap, and keep the grey box
   fully inside the card padding (no bleed past the rounded corner). */
@media (max-width: 480px) {
  body.route--lms-quiz-take .lms-quiz__header-card {
    overflow: hidden; /* clip any stray child past the rounded corner */
  }
  body.route--lms-quiz-take .lms-quiz__meta {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    /* sticky offset relative to mobile; keep contained */
    top: 0.5rem;
  }
  body.route--lms-quiz-take .lms-quiz__meta span {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
}

/* [P020] ISSUE 1-0490 & 1-0489: Mobile matching rows - stack the term label
   above a full-width select for comfortable tap targets and full placeholder. */
@media (max-width: 640px) {
  body.route--lms-quiz-take .lms-quiz__match-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  body.route--lms-quiz-take .lms-quiz__match-left {
    flex: none;
    width: 100%;
  }
  body.route--lms-quiz-take .lms-quiz__match-select {
    flex: none;
    width: 100%;
  }
}

/* [P020] ISSUE 1-0491 & 1-0492: Align radio/checkbox controls to the FIRST
   line of multi-line option labels (consistent with single-line options). */
body.route--lms-quiz-take .lms-quiz__choice-box {
  align-items: flex-start;
}
body.route--lms-quiz-take .lms-quiz__choice-box input {
  margin-top: 0.15rem; /* optically align with first text line (line-height ~1.5) */
  flex: 0 0 auto;
}
body.route--lms-quiz-take .lms-quiz__choice-box span {
  line-height: 1.5;
}

/* [P020] ISSUE 1-0493: Uniform vertical rhythm between ordering option cards.
   The choices container already uses gap; normalise the sortable list the same
   way and remove competing per-item bottom margins. */
body.route--lms-quiz-take .lms-sortable-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body.route--lms-quiz-take .lms-sortable-item {
  margin-bottom: 0;
}

/* [P020] ISSUE 1-0494: Reduce ugly single-word orphan last lines on option
   labels by balancing wrapped text. Progressive enhancement - ignored where
   unsupported, no layout harm. */
body.route--lms-quiz-take .lms-quiz__choice-box span,
body.route--lms-quiz-take .lms-sortable-item span,
body.route--lms-quiz-take .lms-quiz__match-left {
  text-wrap: balance;
}

/* [P020] ISSUE 1-0495: 'Submit Final Answers' CTA wrapping to 2 lines on
   mobile and orphaning the paper-plane icon. Keep the label on one line,
   reduce horizontal padding, and let the button take comfortable width;
   keep the icon inline-aligned with the text. */
body.route--lms-quiz-take .lms-quiz__btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  body.route--lms-quiz-take .lms-quiz__btn-submit {
    width: 100%;
    max-width: 360px;
    padding: 0.9rem 1.25rem;
    font-size: 1.1rem;
    white-space: nowrap;
  }
}

/* ===== P021.css ===== */
/* ==========================================================================
   P021 — Quiz Result page (route--lms-quiz-result) UI fixes
   This partial loads LAST. !important is used only to beat inline <style>
   rules shipped inside the quiz-result Twig template, or earlier skin rules.
   ========================================================================== */

/* [P021] ISSUE 1-0501: keep logged-in user name on one line next to avatar */
.lms-user-profile-link {
  flex-shrink: 0;
}
.lms-user-profile-link > span {
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [P021] ISSUE 1-0502, 1-0515: remove blurred ghost/halo behind the % score
   (kills the text-shadow set on the score circle in the template <style>) */
body.route--lms-quiz-result .lms-score-circle,
body.route--lms-quiz-result .lms-score-circle--pass,
body.route--lms-quiz-result .lms-score-circle--fail {
  text-shadow: none !important;
}

/* [P021] ISSUE 1-0504: standardise section-label casing to sentence case so
   "Your Submission" matches the title-case headings and sentence-case body */
body.route--lms-quiz-result .lms-answer-label {
  text-transform: none !important;
  letter-spacing: 0.2px;
}

/* [P021] ISSUE 1-0505: tighten the oversized blank band between the score
   card and the "Your Answers Breakdown" header */
body.route--lms-quiz-result .lms-result-hero {
  margin-bottom: 1.25rem;
}
body.route--lms-quiz-result .lms-responses-title {
  margin-top: 0.25rem;
}

/* [P021] ISSUE 1-0511: smooth the hero top accent bar so there is no abrupt
   blue-to-green seam, and ensure it is clipped by the card radius */
body.route--lms-quiz-result .lms-result-hero {
  overflow: hidden;
}
body.route--lms-quiz-result .lms-result-hero::before {
  background: linear-gradient(90deg, #58a6ff 0%, #4bb1d8 45%, #3fb950 100%) !important;
  border-radius: 12px 12px 0 0;
}

/* [P021] ISSUE 1-0514: raise contrast of the green PASSED badge text/icon on
   its pale-green pill (medium #3fb950 -> deeper #15803d, ~AA on the light pill) */
body.route--lms-quiz-result .lms-result-badge--pass {
  color: #15803d !important;
  background: rgba(21, 128, 61, 0.12) !important;
  border-color: rgba(21, 128, 61, 0.35) !important;
}
body.route--lms-quiz-result .lms-result-badge--pass i {
  color: #15803d !important;
}

/* [P021] ISSUE 1-0512: footer SUPPORTS column clipped at the bottom edge —
   guarantee bottom breathing room on the footer (global component) */
.lms-footer {
  padding-bottom: 2.5rem;
}

/* [P021] ISSUE 1-0510, 1-0513: mobile fixes */
@media (max-width: 480px) {
  /* 1-0510: widen the readable measure for long question/answer text by
     shrinking the icon gutter so the text column is not pushed far right */
  body.route--lms-quiz-result .lms-response-header {
    gap: 0.6rem;
  }
  body.route--lms-quiz-result .lms-response-answer {
    padding-left: 0 !important;
  }
  body.route--lms-quiz-result .lms-response-icon {
    font-size: 1.4rem;
  }

  /* 1-0513: collapse the tall empty grey region between the last answer card
     and the footer caused by the wrapper's full-viewport min-height/padding */
  body.route--lms-quiz-result .lms-result-wrapper {
    min-height: 0 !important;
    padding: 1.5rem 1rem 2rem !important;
  }
  body.route--lms-quiz-result .lms-btn-actions {
    margin-top: 1.75rem;
    padding-bottom: 1.5rem;
  }
}

/* ===== P022.css ===== */
/* ==========================================================================
   P022 — My Quiz Results (/my-quiz-results)  route--lms-quiz-my-results
   Active skin: medical + minimalist, brand SilverCare.
   Loaded LAST. !important used only to beat existing skin !important rules.
   ========================================================================== */

/* [P022] ISSUE 1-0518, 1-0523: normalize stat value colors across all four cards.
   light-mode.css forces is-success value -> #15803d (green) and is-accent value
   -> #0369a1 (blue) while the other two are #0f172a. Make all sibling stat
   values share one consistent heading color. */
body.route--lms-quiz-my-results .lms-quiz-results-page__summary-card.is-success .lms-quiz-results-page__summary-value,
body.route--lms-quiz-my-results .lms-quiz-results-page__summary-card.is-accent .lms-quiz-results-page__summary-value,
body.route--lms-quiz-my-results .lms-quiz-results-page__summary-value {
  color: #0f172a !important;
}

/* [P022] ISSUE 1-0519: stat cards reserve too much empty vertical space.
   Reduce min-height and tighten padding so number + label sit centered with
   proportional whitespace. Overrides light-mode min-height:5.75rem. */
body.route--lms-quiz-my-results .lms-quiz-results-page__summary-card {
  min-height: 0 !important;
  padding: 1rem 1.1rem !important;
  justify-content: center !important;
  gap: 0.2rem !important;
}

/* [P022] ISSUE 1-0529: stat sub-label grey (#64748b on #fff ~= 4.5:1 borderline)
   darkened to #475569 (~7.0:1) to comfortably meet WCAG AA for small text. */
body.route--lms-quiz-my-results .lms-quiz-results-page__summary-label,
body.route--lms-quiz-my-results .lms-quiz-result-row__meta,
body.route--lms-quiz-my-results .lms-quiz-result-row__score-label {
  color: #475569 !important;
}

/* [P022] ISSUE 1-0530: prevent single-word orphan on the intro paragraph and
   keep a comfortable measure. */
body.route--lms-quiz-my-results .lms-quiz-results-page__subtitle {
  max-width: 52ch;
  text-wrap: pretty;
}

/* [P022] ISSUE 1-0520: with a single result the page leaves a tall void before
   the footer. Give the section a sensible min-height and trim the board's
   bottom margin so the gap reads as intentional padding, not emptiness. */
body.route--lms-quiz-my-results .lms-quiz-results-page {
  min-height: 62vh;
}
body.route--lms-quiz-my-results .lms-quiz-results-board {
  margin-bottom: 0 !important;
}

/* [P022] ISSUE 1-0522: delimit result rows so multiple results read as a list.
   The board is a flex column; add a divider between consecutive rows and even
   internal padding (single row is unaffected by the divider). */
body.route--lms-quiz-my-results .lms-quiz-results-board .lms-quiz-result-row + .lms-quiz-result-row {
  border-top: 1px solid #e2e8f0;
}

/* [P022] ISSUE 1-0521: "Review Result" button shadow is clipped/asymmetric.
   Use a centered (0 offset-x) even shadow and stop it being clipped by the row. */
body.route--lms-quiz-my-results .lms-quiz-result-row__action {
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.28) !important;
}
body.route--lms-quiz-my-results .lms-quiz-result-row {
  overflow: visible !important;
}

/* [P022] ISSUE 1-0526: at mobile width the stat-card stack and the result card
   must share one gutter. Zero out any extra inset on the board/rows so their
   left/right edges line up with the summary cards. */
@media (max-width: 480px) {
  body.route--lms-quiz-my-results .lms-quiz-results-board,
  body.route--lms-quiz-my-results .lms-quiz-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.route--lms-quiz-my-results .lms-quiz-results-board {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* [P022] ISSUE 1-0527: floating back-to-top button overlaps card corners at
   mobile width. Pull it into a clear margin and lift its stacking + shadow so
   it reads as an overlay, not a collision. Global component (medical skin). */
@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: 12px !important;
    bottom: 16px !important;
    z-index: 1300 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28) !important;
  }
}

/* [P022] ISSUE 1-0528: header action icons (hamburger, bell, heart) are cramped
   and the bell badge sits too close. Global header component. */
.lms-navbar__actions {
  gap: 14px;
}
.lms-bell-icon-wrapper {
  position: relative;
}
.lms-bell-icon-wrapper .lms-bell-counter {
  top: -6px;
  right: -6px;
}

/* ===== P023.css ===== */
/* ==========================================================================
   P023 — My Certificates (/my-certificates)
   route_class: route--lms-progress-certificates   (body also has .layout-minimalist / .layout-medical)
   Loads LAST. Page content scoped under body.route--lms-progress-certificates;
   global components (navbar, FAB, footer brand) fixed via their component class.
   ========================================================================== */

/* [P023] ISSUE 1-0533: Vertically center the "No certificates yet" empty-state and
   reduce dead whitespace so content hugs the card with even padding. */
body.route--lms-progress-certificates .lms-certificates-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  min-height: auto;
  padding: clamp(2rem, 5vw, 3.25rem) 1.25rem;
}
body.route--lms-progress-certificates .lms-certificates-empty h3,
body.route--lms-progress-certificates .lms-certificates-empty p {
  margin: 0;
  max-width: 42ch;
}

/* [P023] ISSUE 1-0540 + 1-0540(icon): Make the award/ribbon icon a real focal
   illustration — larger and in the brand accent color instead of weak gray. */
body.route--lms-progress-certificates .lms-certificates-empty .fa-award {
  font-size: 2.75rem;        /* ~44px, up from ~16px */
  line-height: 1;
  color: #0077b6;            /* SilverCare medical brand accent */
  margin-bottom: 0.25rem;
}

/* [P023] ISSUE 1-0536: Lift secondary text (hero subtitle + stat-card labels)
   to meet WCAG AA on the light/tinted gradient background.
   #475569 (slate-600) ≈ 7:1 on white, comfortably AA at body size.
   Higher specificity (extra body class) beats the existing #64748b !important rule. */
body.layout-minimalist.route--lms-progress-certificates .lms-certificates-page__subtitle,
body.layout-minimalist.route--lms-progress-certificates .lms-certificates-page__summary-label,
body.layout-minimalist.route--lms-progress-certificates .lms-certificate-card__meta-label,
body.layout-minimalist.route--lms-progress-certificates .lms-certificates-empty p {
  color: #475569 !important;
}

/* [P023] ISSUE 1-0541: Make the stat value read as a KPI — clearly larger and
   bolder than its caption (value ~30px bold, label ~14px regular muted). */
body.route--lms-progress-certificates .lms-certificates-page__summary-value {
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
body.route--lms-progress-certificates .lms-certificates-page__summary-label {
  font-size: 0.875rem;
  font-weight: 400;
}

/* [P023] ISSUE 1-0535: Keep the header account name on a single line; if it is
   ever too long, truncate cleanly with an ellipsis instead of wrapping to two
   lines and throwing the header out of vertical alignment.
   Target the inline-styled username span inside the profile link (global header). */
.lms-navbar .lms-user-profile-link {
  align-items: center;
}
.lms-navbar .lms-user-profile-link > span {
  white-space: nowrap !important;   /* beats inline white-space */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
  display: inline-block;
  line-height: 1.2;
}

/* [P023] ISSUE 1-0537: "Dashboard" nav button is rendered in blue, inconsistent
   with the neutral sibling nav links. Neutralize the outline Dashboard button in
   the header so it matches the other top-nav items (no special accent unless active). */
.lms-navbar__actions .lms-btn--outline {
  color: #1f2a37;
  border-color: #cbd5e1;
  background: transparent;
}
.lms-navbar__actions .lms-btn--outline:hover {
  color: #0f172a;
  border-color: #94a3b8;
  background: rgba(15, 23, 42, 0.04);
}

/* [P023] ISSUE 1-0545: Hamburger (menu) icon renders much lighter than the
   adjacent bell/heart icons, appearing disabled. Align it to the same icon tone. */
.lms-navbar__toggle,
.lms-navbar__toggle i {
  color: #1f2a37;
}

/* [P023] ISSUE 1-0543: Floating scroll-to-top FAB collides with the lower-right
   corner of the empty-state card on mobile. Give it more clearance so it floats
   over background whitespace. Higher specificity beats the medical offset rule. */
@media (max-width: 480px) {
  body.layout-medical .lms-back-to-top,
  body.route--lms-progress-certificates .lms-back-to-top {
    right: 16px !important;
    bottom: 24px !important;
  }
  /* Add room below content so the FAB rests over empty space, not the card edge. */
  body.route--lms-progress-certificates .lms-page__content {
    padding-bottom: 5rem;
  }
}

/* [P023] ISSUE 1-0546: On mobile, the footer SilverCare logo is large enough to
   visually duplicate the sticky-header brand when scrolled. Trim its size and top
   spacing so the duplication is less jarring (global footer component). */
@media (max-width: 480px) {
  .lms-footer .lms-brand-mark--footer {
    height: 52px;
  }
  .lms-footer__brand {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

/* ===== P024.css ===== */
/* ==========================================================================
   P024 - My Notes (route--lms-note-my-notes)
   Skin: medical / brand SilverCare. Loads LAST.
   Brand blue tokens: --medical-violet #0077b6, --medical-pink #0096c7
   ========================================================================== */

/* [P024] ISSUE 1-0547: Balance two-column header (H1 left / subtitle right).
   .lms-section__header is flex space-between align-items:center, but default
   h1/p margins push the subtitle off the H1 optical center. Baseline-align
   the columns and zero the stray margins so the row reads as one line. */
body.route--lms-note-my-notes .lms-my-notes .lms-section__header {
  align-items: baseline;
  gap: 1.5rem;
}
body.route--lms-note-my-notes .lms-my-notes .lms-section__header .lms-manage__title {
  margin-bottom: 0;
}
body.route--lms-note-my-notes .lms-my-notes .lms-section__header > p {
  margin-bottom: 0;
  text-align: right;
}

/* [P024] ISSUE 1-0548: Vertically centre the empty-state cluster.
   Symmetric top/bottom padding + flex column centring so the
   icon/headings/button group sits in the optical centre of the dashed box. */
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state > * {
  margin-left: auto;
  margin-right: auto;
}

/* [P024] ISSUE 1-0549: Primary CTA must use brand blue, not indigo.
   light-mode.css forces the empty-state .lms-btn to indigo #4f46e5; restore
   the SilverCare brand-blue gradient (matches logo/nav/footer accents).
   !important needed to beat the existing !important indigo rule. */
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state .lms-btn--primary,
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state a.lms-btn {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%) !important;
  border-color: #0077b6 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(0, 119, 182, 0.18) !important;
}
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state .lms-btn--primary:hover,
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state a.lms-btn:hover {
  background: linear-gradient(135deg, #006aa3 0%, #0086b3 100%) !important;
  box-shadow: 0 14px 26px rgba(0, 119, 182, 0.32) !important;
}
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state .lms-btn--primary:focus-visible,
body.route--lms-note-my-notes .lms-my-notes .lms-empty-state a.lms-btn:focus-visible {
  outline: 2px solid #0077b6;
  outline-offset: 2px;
}

/* [P024] ISSUE 1-0560: Notification bell badge clipped at header top.
   The .lms-bell-counter inline style sits at top:-8px; pull it down so it
   stays comfortably inside the header without touching the top border. */
.lms-navbar .lms-bell-icon-wrapper .lms-bell-counter {
  top: -3px !important;
  right: -8px !important;
}

/* [P024] ISSUE 1-0559: Keep the floating back-to-top control anchored to the
   viewport corner so it never crowds the footer brand block.
   (Reinforces the medical skin's fixed positioning.) */
body.route--lms-note-my-notes #lms-back-to-top,
body.route--lms-note-my-notes .lms-back-to-top {
  position: fixed !important;
  right: clamp(14px, 2vw, 28px) !important;
  bottom: clamp(14px, 2vw, 28px) !important;
  left: auto !important;
  z-index: 1250 !important;
}

/* ==========================================================================
   MOBILE (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* [P024] ISSUE 1-0555 / 1-0556: Stack hero header on mobile.
     Title full-width above the intro paragraph for a clean single column
     instead of an uneven two-column layout where the H1 wraps to 2 lines. */
  body.route--lms-note-my-notes .lms-my-notes .lms-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  body.route--lms-note-my-notes .lms-my-notes .lms-section__header > p {
    text-align: left;
  }

  /* [P024] ISSUE 1-0558: Trim dead space between empty-state card and footer
     on the sparse mobile view so the footer follows the content closely. */
  body.route--lms-note-my-notes .lms-my-notes {
    padding-bottom: 1.5rem;
  }
  body.route--lms-note-my-notes .lms-my-notes .lms-empty-state {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ===== P025.css ===== */
/* ============================================================
   P025 — My Wishlist (/my-wishlist)
   route_class: route--lms-wishlist-my-wishlist
   Template uses heavy inline styles, so !important is required
   to beat the inline color/shadow declarations on the targets.
   ============================================================ */

/* [P025] ISSUE 1-0561, 1-0567: "Browse Courses" heading-row link is white on a light background (invisible ghost on desktop, faint leaked text on mobile). Give it real brand contrast. */
body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-btn-outline {
  color: #0077b6 !important;            /* --medical-violet, AA on white */
  border: 1px solid rgba(0, 119, 182, 0.45) !important;
  background: #ffffff !important;
  font-weight: 600;
}
body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-btn-outline:hover,
body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-btn-outline:focus-visible {
  color: #ffffff !important;
  background: #0077b6 !important;
  border-color: #0077b6 !important;
}
body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-btn-outline:focus-visible {
  outline: 2px solid #0077b6;
  outline-offset: 2px;
}

/* [P025] ISSUE 1-0567: On mobile the heading row + action link crowd the right edge and the link text leaks/clips. Stack the row so the link sits on its own line, fully contained. */
@media (max-width: 480px) {
  body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-btn-outline {
    align-self: flex-start;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* [P025] ISSUE 1-0563: Empty-state paragraph is #8b949e (light gray) on the light page bg — fails AA. Darken to a neutral that passes AA. */
body.route--lms-wishlist-my-wishlist .lms-empty-state p {
  color: #476273 !important;            /* --medical-text-soft, AA on white */
}

/* [P025] ISSUE 1-0564, 1-0572: Broken-heart empty-state icon is a flat dark gray (#484f58) that reads as a generic placeholder. Tint it with the brand color so the empty state feels on-brand and reads as an intentional illustration. */
body.route--lms-wishlist-my-wishlist .lms-empty-state .fa-heart-broken {
  color: #0077b6 !important;            /* --medical-violet */
  opacity: 0.85;
}

/* [P025] ISSUE 1-0571: "Explore Courses" primary button shows a lopsided directional shadow. Replace with a balanced, centered soft shadow consistent with the flat card. */
body.route--lms-wishlist-my-wishlist .lms-empty-state .lms-btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
body.route--lms-wishlist-my-wishlist .lms-empty-state .lms-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

/* [P025] ISSUE 1-0573: Empty-state paragraph wraps with the final word "yet." orphaned on its own line. Balance the wrapping and cap width so the last line carries more than one word. */
body.route--lms-wishlist-my-wishlist .lms-empty-state p {
  text-wrap: balance;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* [P025] ISSUE 1-0574: Large band of empty space below the short empty-state card before the footer on tall mobile viewports. Tighten the page padding so the empty state sits higher / closer to balance. */
@media (max-width: 480px) {
  body.route--lms-wishlist-my-wishlist .lms-my-wishlist-page .lms-container {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  body.route--lms-wishlist-my-wishlist .lms-empty-state {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* [P025] ISSUE 1-0569: Floating back-to-top button overlaps the footer copyright text on mobile. Add bottom padding to the footer equal to the button footprint so the copyright line is never covered. Global footer component (no page scope). */
@media (max-width: 480px) {
  .lms-footer .lms-footer__bottom {
    padding-bottom: 64px;             /* 48px button + 14px offset clearance */
  }
}

/* ===== P026.css ===== */
/* ============================================================
   P026 — My Memberships (/my-membership)
   route_class: route--lms-membership-my-membership
   Cards are dark (#1e293b). The global rule
   `body.layout-minimalist h3 { color:#0f172a }` overrides the
   template's white card title, producing dark-on-dark text.
   ============================================================ */

/* [P026] ISSUE 1-0575, 1-0582, 1-0585: Plan title dark-on-dark inside dark card -> force light, legible title (WCAG AA on #1e293b) */
body.route--lms-membership-my-membership .lms-membership-card__header h3 {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* [P026] ISSUE 1-0577, 1-0583: 'Cancel Auto-Renewal' destructive button — coherent red scheme, readable label (white on solid red beats inherited link-blue) */
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger,
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:link,
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:visited {
  background: #c0392b;
  color: #ffffff;
  border: 1px solid #c0392b;
}
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger i {
  color: #ffffff;
}
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:hover,
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:focus {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #ffffff;
}
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}

/* [P026] ISSUE 1-0579: Header row — vertically center avatar, title and ACTIVE badge on one axis */
body.route--lms-membership-my-membership .lms-membership-card__header {
  align-items: center;
}
body.route--lms-membership-my-membership .lms-membership-card__title {
  align-items: center;
  gap: 0.75rem;
}
body.route--lms-membership-my-membership .lms-membership-icon {
  flex: 0 0 40px;
}

/* [P026] ISSUE 1-0580: H1/H2 heading and card share the same left gutter (zero out heading inline padding so it is flush with the card container) */
body.route--lms-membership-my-membership .lms-my-membership h2 {
  padding-left: 0;
  margin-left: 0;
}

/* [P026] ISSUE 1-0581: Single card stranded on the left at desktop — constrain list to a comfortable centered width so it is not stretched/stranded across the full viewport */
@media (min-width: 768px) {
  body.route--lms-membership-my-membership .lms-membership-list {
    grid-template-columns: repeat(auto-fill, minmax(360px, 480px));
    justify-content: start;
  }
}

/* [P026] ISSUE 1-0586: ACTIVE status badge — slightly larger and brighter for at-a-glance legibility on the dark card */
body.route--lms-membership-my-membership .lms-badge {
  font-size: 0.78rem;
}
body.route--lms-membership-my-membership .lms-badge--active {
  background: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}
body.route--lms-membership-my-membership .lms-badge--expired {
  background: rgba(244, 63, 94, 0.28);
  color: #fda4af;
}
body.route--lms-membership-my-membership .lms-badge--trial {
  background: rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

/* [P026] ISSUE 1-0588: Excess empty band before footer on mobile — tighten the page block's vertical margins */
@media (max-width: 480px) {
  body.route--lms-membership-my-membership .lms-my-membership {
    margin: 2rem auto;
  }
}

/* [P026] ISSUE 1-0590: Date rows / divider share one consistent inner gutter (rows flush to card padding edges) */
body.route--lms-membership-my-membership .lms-membership-card__body p {
  margin: 0.75rem 0;
}
body.route--lms-membership-my-membership .lms-membership-card__actions {
  margin-top: 1.25rem;
}

/* [P026] ISSUE 1-0589: Header notification bell '2' count badge — cleaner offset above-right so it does not overlap the glyph */
.lms-navbar .lms-bell__badge,
.lms-navbar__actions .lms-bell__badge,
.lms-bell .lms-bell__badge {
  top: -6px;
  right: -6px;
}

/* ===== P027.css ===== */
/**
 * P027 — Notifications page UI fixes (medical / SilverCare).
 * Additive override layer, loaded LAST. Real selectors from
 * lms-notifications.html.twig + lms-notification.css + medical.css.
 * Page body classes on this route: body.layout-medical.layout-minimalist
 * (route--lms-notification-list). Global components fixed via component class.
 */

/* [P027] ISSUE 1-0591, 1-0598: filter tab strip truncates last tab mid-word with no scroll affordance.
   Allow tabs to wrap onto multiple rows so every label ("System") is fully readable; keep a usable
   scrollable fallback with a right-edge fade cue + smooth scroll-snap when content still overflows. */
.lms-notification-filters {
  flex-wrap: wrap;
  overflow-x: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  row-gap: 0.6rem;
}
.lms-notification-filters .lms-filter-btn {
  scroll-snap-align: start;
}
@media (max-width: 480px) {
  /* On narrow mobile keep a single scrollable row with a fade affordance instead of tall wrapping. */
  .lms-notification-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 0, #000 88%, rgba(0, 0, 0, 0) 100%);
    padding-right: 1.5rem;
  }
}

/* [P027] ISSUE 1-0595: large empty band below a short notification list at desktop width.
   Give the wrapper a sensible min-height and vertically center sparse content so the footer
   does not sit far below the card. Scoped to the notifications page. */
body.layout-medical .lms-notifications-wrapper {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 769px) {
  body.layout-medical .lms-notifications-wrapper {
    margin-top: clamp(2rem, 6vh, 5rem);
  }
}

/* [P027] ISSUE 1-0596: header account name "Maria Santos" wraps to two lines, misaligning the
   account cluster. Keep the name on one line, vertically centered, ellipsis if it ever gets long.
   Global header component — no page scope. */
.lms-navbar__actions .lms-navbar__user-name,
.lms-navbar__actions [class*="user-name"],
.lms-navbar__actions [class*="username"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
  line-height: 1.2;
}
.lms-navbar__actions { align-items: center; }

/* [P027] ISSUE 1-0599: on mobile the timestamp wraps and the red "NEW" badge crowds the date.
   Keep date on one line, push the badge to the right with clear spacing, allow the meta row to
   wrap gracefully with vertical gap. */
.lms-notification-item__meta {
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.lms-notification-item__date {
  white-space: nowrap;
}
.lms-notification-item__new-badge {
  margin-left: auto;
}
@media (max-width: 480px) {
  .lms-notification-item__date {
    font-size: 0.8rem;
  }
}

/* [P027] ISSUE 1-0600: floating back-to-top FAB overlaps the right edge of notification cards on
   mobile. Increase its offsets so it clears card content. Global component, medical layout. */
@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: 20px !important;
  }
  /* Keep the last card clear of the FAB resting area. */
  body.layout-medical .lms-notifications {
    padding-bottom: 4.5rem;
  }
}

/* [P027] ISSUE 1-0601: notification body copy (#94a3b8) is below WCAG AA on the white card.
   Darken to a slate that clears 4.5:1 on #ffffff. Page-scoped to the light medical layout. */
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item__body p {
  color: #334155 !important; /* ~9.3:1 on #fff */
}

/* [P027] ISSUE 1-0602: timestamp metadata (#64748b) + clock icon are too faint on white.
   Darken to meet AA for small text on the card. */
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item__date,
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item__date i {
  color: #475569 !important; /* ~7.0:1 on #fff */
}

/* [P027] ISSUE 1-0603: unread vs read state distinction is ambiguous. Reinforce the existing
   unread accent with a visible unread dot (CSS-generated) on the icon and a clearer neutral
   border for read cards, so the system reads consistently without markup changes. */
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item--unread .lms-notification-item__icon {
  position: relative;
}
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item--unread .lms-notification-item__icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0077b6;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 119, 182, 0.25);
}
body.layout-medical.layout-minimalist:not(.is-workspace) .lms-notification-item:not(.lms-notification-item--unread) {
  border-left: 4px solid transparent; /* keep horizontal alignment with unread accent */
}

/* ===== P028.css ===== */
/* ==========================================================================
   P028 — Profile page UI fixes (route--lms-course-profile)
   This partial loads LAST. !important is used only where needed to beat
   existing skin overrides / inline styles on the same target.
   ========================================================================== */

/* [P028] ISSUE 1-0608: Equalize 2x2 Learning Dashboard stat cards so icon/number/label
   share consistent baselines even when a label wraps to two lines. */
body.route--lms-course-profile .lms-profile__layout-redesign .lms-stats-grid {
  align-items: stretch;
}
body.route--lms-course-profile .lms-profile__layout-redesign .lms-stat-box {
  height: 100%;
  justify-content: flex-start;
}
/* Reserve equal vertical space for the number so single-line labels below it
   do not push the value onto a different baseline than two-line labels. */
body.route--lms-course-profile .lms-profile__layout-redesign .lms-stat-box__val {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Reserve room for up to two label lines so all four labels occupy equal height. */
body.route--lms-course-profile .lms-profile__layout-redesign .lms-stat-box__label {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* [P028] ISSUE 1-0611: Visually group the disclosure chevron with the user name
   so it no longer abuts (and reads as belonging to) the adjacent "Dashboard" button.
   Component-level: header user menu. */
.lms-navbar__actions .lms-user-profile-link .fa-chevron-down.ms-1 {
  margin-right: 0.85rem;
}

/* [P028] ISSUE 1-0612 (desktop) + 1-0615 (mobile): EMAIL value wraps mid-domain
   (e.g. splitting "silvercare." / "example.com" or "example.c" / "om").
   Break only when unavoidable and never inside a TLD token via hyphenation. */
body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-info-item__content .lms-profile-info-value {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  min-width: 0;
}

/* [P028] ISSUE 1-0613: Trim the tall empty band between the page content and the
   footer when columns end short (e.g. a single recent quiz). Page scope. */
body.route--lms-course-profile .lms-section {
  padding-bottom: 2rem !important;
}

@media (max-width: 480px) {
  /* [P028] ISSUE 1-0615: On mobile shrink the email value slightly so the address
     fits in fewer, cleaner lines and avoids mid-token breaks. */
  body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-info-item__content .lms-profile-info-value {
    font-size: 0.875rem;
  }

  /* [P028] ISSUE 1-0621: Top-align icon + label inside contact cards so a two-line
     email value does not vertically de-center the Email card relative to the
     single-line Location / Company cards. */
  body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-info-item {
    align-items: flex-start !important;
  }

  /* [P028] ISSUE 1-0619: Keep uniform spacing between course title, progress bar and
     percentage label regardless of whether the title is one or two lines, by
     reserving a fixed title height in each Recent Courses card. */
  body.route--lms-course-profile .lms-profile__layout-redesign .lms-profile-courses-card-item h4 {
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* [P028] ISSUE 1-0622: Footer brand lockup is rendered larger than the header logo,
   duplicating brand identity within one short mobile scroll. Match it to the header
   size on small screens. Component scope (footer brand mark). */
@media (max-width: 576px) {
  .lms-footer__brand-link .lms-brand-mark--footer {
    height: 56px !important;
  }
}

/* ===== P029.css ===== */
/* =========================================================================
   P029 — checkout-course (renders course-detail layout) UI fixes
   This partial loads LAST. !important is used only to beat inline styles
   present on the target elements (the templates set many inline styles).
   ========================================================================= */


/* [P029] ISSUE 1-0627,1-0628,1-0638: success/status message readable on light bg + alert styling */
/* The base .messages--status uses light-green text (#43e97b) on a near-white
   tint, which fails WCAG AA on the light "medical" background. Restyle as a
   proper success alert with dark-green text, green tint and an icon marker. */
.lms-messages-wrapper .messages--status,
.messages.messages--status {
  background: #e8f7ee !important;
  border: 1px solid #34a853 !important;
  border-left: 4px solid #1e7e34 !important;
  color: #14532d !important;            /* ~9:1 on #e8f7ee */
  border-radius: 0.5rem;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  position: relative;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.lms-messages-wrapper .messages--status::before,
.messages.messages--status::before {
  content: "\f058";                     /* fa-check-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  color: #1e7e34;
  font-size: 1rem;
}
.lms-messages-wrapper .messages--status a,
.messages.messages--status a {
  color: #0b3d1c !important;
  text-decoration: underline;
}


/* [P029] ISSUE 1-0629,1-0630: header account name wrapping + utility row alignment */
/* The name span already has white-space:nowrap, but the flex link can still wrap
   when the row is tight. Keep the whole account link on one line and ensure all
   header utility items share a common vertical center. */
.lms-navbar__actions > div {
  align-items: center !important;
}
.lms-navbar .lms-user-profile-link {
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.lms-navbar .lms-user-profile-link > span {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}
.lms-navbar__actions .notification-bell,
.lms-navbar__actions [class*="notification"],
.lms-navbar__actions > div > a {
  align-self: center;
}


/* [P029] ISSUE 1-0644: share-this-course icons too low contrast on light card */
/* Inline styles set color:#8b949e on a light card; darken icon + border so the
   buttons read as interactive and meet AA. Brand hovers stay (inline JS). */
.lms-enroll-card__share .lms-social-btn,
.lms-course-layout__sidebar .lms-social-btn {
  color: #1f2a37 !important;
  border-color: #c2ccd6 !important;
  background: #f1f4f8 !important;
}
.lms-enroll-card__share .lms-social-btn:hover,
.lms-course-layout__sidebar .lms-social-btn:hover {
  color: #ffffff !important;
}
.lms-enroll-card__share .lms-social-btn:focus-visible,
.lms-course-layout__sidebar .lms-social-btn:focus-visible {
  outline: 2px solid #0077b6;
  outline-offset: 2px;
}


/* [P029] ISSUE 1-0626: oversized empty sidebar card / sticky not releasing */
/* Let the enrollment card shrink to its content and align to the top of the
   column instead of stretching down the page next to the long main content. */
body.route--lms-course-detail .lms-course-layout__sidebar {
  align-self: flex-start;
}
body.route--lms-course-detail .lms-enroll-card {
  height: -moz-fit-content;
  height: fit-content;
  align-self: flex-start;
}


/* [P029] ISSUE 1-0631: rating / meta chip spacing consistency */
body.route--lms-course-detail .lms-course-banner__meta {
  gap: 1.25rem 1.5rem;
}
body.route--lms-course-detail .lms-course-banner__rating {
  gap: 0.35rem !important;
}
body.route--lms-course-detail .lms-course-banner__rating strong {
  margin-left: 0.35rem !important;
}


/* ===========================  MOBILE  =================================== */
@media (max-width: 640px) {

  /* [P029] ISSUE 1-0635,1-0640: What You'll Learn must be single column on mobile */
  /* Template sets inline columns:2; collapse to one full-width column so bullets
     read on 1-2 lines instead of per-word wrapping. */
  body.route--lms-course-detail .lms-learn-list {
    columns: 1 !important;
    column-count: 1 !important;
    -webkit-columns: 1 !important;
    column-gap: 0 !important;
  }
  body.route--lms-course-detail .lms-learn-list ul {
    columns: 1 !important;
    column-count: 1 !important;
  }
}

@media (max-width: 480px) {

  /* [P029] ISSUE 1-0633: tab strip overflows, last "Instructor" tab clipped */
  /* Make the tab bar horizontally scrollable with snap and a fade hint, and
     reduce per-tab gap/padding so labels are fully reachable. */
  .lms-course-tabs {
    overflow: visible;
  }
  .lms-course-tabs .container,
  .lms-course-tabs > .container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .lms-course-tabs .container::-webkit-scrollbar {
    display: none;
  }
  .lms-tabs {
    gap: 1.25rem !important;
    flex-wrap: nowrap !important;
    width: max-content;
    padding-right: 1rem !important;
  }
  .lms-tabs > li {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  .lms-tabs__link {
    padding: 1rem 0 !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
  }

  /* [P029] ISSUE 1-0634: active tab indicator clipped / half-oval shape */
  /* Force a clean flat 3px underline contained within the bar, removing any
     rounded pill / box-shadow overflow on the active tab. */
  .lms-tabs__link--active {
    border-bottom: 3px solid #0077b6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* [P029] ISSUE 1-0639: hero category badge vertical centering / symmetric padding */
  body.route--lms-course-detail .lms-course-banner__info .badge-lms--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 1rem !important;
    line-height: 1.1 !important;
  }

  /* [P029] ISSUE 1-0642,1-0643: footer phone clipped + back-to-top overlaps footer */
  /* Add bottom padding so the last footer line clears the floating button, and
     nudge the button further from the corner so it doesn't sit on the phone. */
  .lms-footer {
    padding-bottom: 5.5rem !important;
  }
  #lms-back-to-top,
  .lms-back-to-top {
    bottom: 18px !important;
    right: 14px !important;
  }
}

/* ===== P030.css ===== */
/* ==========================================================================
   P030 — checkout-membership (My Memberships)
   Route body class: body.route--lms-membership-my-membership
   Loaded LAST. Fixes real UI defects found in round-1 screens.
   ========================================================================== */

/* [P030] ISSUE 1-0646, 1-0655, 1-0654: Card plan title is dark slate on the
   near-black card bg (fails WCAG AA). Root cause: body.layout-medical h3 sets a
   dark --medical-heading color that overrides the card's intended white title.
   Force a near-white, high-contrast title on the dark card across all viewports. */
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 {
  color: #f8fafc !important;
  font-weight: 700;
  line-height: 1.25;
}

/* [P030] ISSUE 1-0648, 1-0664: "Cancel Auto-Renewal" destructive button renders
   with medium-blue link text on a dark maroon fill (low contrast). Root cause:
   body.layout-medical a color overrides the button's intended red label.
   Use legible light-red text + icon on a clearer red-tinted destructive fill. */
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger,
body.route--lms-membership-my-membership a.lms-btn--danger {
  color: #fecaca !important;
  background: rgba(244, 63, 94, 0.16) !important;
  border: 1px solid rgba(244, 63, 94, 0.5) !important;
}
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger i,
body.route--lms-membership-my-membership a.lms-btn--danger i {
  color: #fecaca !important;
}
body.route--lms-membership-my-membership .lms-membership-card__actions .lms-btn--danger:hover,
body.route--lms-membership-my-membership a.lms-btn--danger:hover {
  color: #ffffff !important;
  background: rgba(244, 63, 94, 0.3) !important;
  border-color: rgba(244, 63, 94, 0.7) !important;
}
body.route--lms-membership-my-membership a.lms-btn--danger:focus-visible {
  outline: 2px solid #fda4af;
  outline-offset: 2px;
}

/* [P030] ISSUE 1-0651: Divider between the Auto Renew row and the Cancel button
   looks inset/short. Ensure the actions top-border (the divider) spans the full
   inner content width by neutralising any stray left inset/margin. */
body.route--lms-membership-my-membership .lms-membership-card__actions {
  margin-left: 0;
  margin-right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
body.route--lms-membership-my-membership .lms-membership-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* [P030] ISSUE 1-0662: On the longer "Enterprise / Facility Plan" title the
   header row should keep the badge vertically centred while the title wraps. */
body.route--lms-membership-my-membership .lms-membership-card__header {
  align-items: center;
  gap: 0.75rem;
}
body.route--lms-membership-my-membership .lms-membership-card__title {
  align-items: center;
}
/* [P030] ISSUE 1-0661: Guarantee clear horizontal gap between the BA/EN avatar
   badge and the plan title so the title never reads as overlapping the badge. */
body.route--lms-membership-my-membership .lms-membership-card__title {
  gap: 0.75rem;
}
body.route--lms-membership-my-membership .lms-membership-icon {
  flex: 0 0 40px;
}

/* [P030] ISSUE 1-0652: Drupal status message renders as bare body text with no
   alert chrome. Style the highlighted/messages region as a success alert. */
body.route--lms-membership-my-membership .lms-messages-wrapper .messages,
body.route--lms-membership-my-membership .lms-messages-wrapper .messages--status,
body.route--lms-membership-my-membership .lms-messages-wrapper [role="contentinfo"],
body.route--lms-membership-my-membership .lms-messages-wrapper [aria-label="Status message"] {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 0.875rem 1.125rem;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-left: 4px solid #059669;
  border-radius: 0.5rem;
  color: #065f46;
  font-weight: 500;
}
body.route--lms-membership-my-membership .lms-messages-wrapper .messages--status::before {
  content: "\f058"; /* fa-check-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  color: #059669;
  flex: 0 0 auto;
  line-height: 1.4;
}

/* [P030] ISSUE 1-0653: Logged-in user name ("Maria Santos") wraps to two lines
   in the header. Keep it on one line and give the account control room. */
.lms-navbar__actions .lms-user-profile-link {
  flex: 0 0 auto;
}
.lms-navbar__actions .lms-user-profile-link span {
  white-space: nowrap;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [P030] ISSUE 1-0660: On mobile the bell count badge crowds the adjacent
   wishlist heart. Add breathing room around the bell+badge cluster. */
@media (max-width: 480px) {
  .lms-navbar__actions .lms-bell-icon-wrapper {
    margin-right: 0.5rem;
  }
  .lms-bell-icon-wrapper .lms-bell-counter {
    transform: translate(2px, -2px);
  }
}

/* [P030] ISSUE 1-0663: On mobile the back-to-top FAB overlaps the second card's
   Auto Renew row / Cancel button. Add page bottom padding so floating cards are
   never covered, and nudge/shrink the FAB into the corner gutter. */
@media (max-width: 480px) {
  body.route--lms-membership-my-membership .lms-my-membership {
    padding-bottom: 5.5rem;
  }
  body.route--lms-membership-my-membership .lms-page__content {
    padding-bottom: 4.5rem;
  }
  .lms-back-to-top {
    width: 42px !important;
    height: 42px !important;
    right: 12px !important;
    bottom: 16px !important;
  }
}

/* [P030] ISSUE 1-0666: Footer copyright wraps with an orphaned "Rights
   Reserved." line. Balance the wrap so the trailing words don't strand. */
.lms-footer__bottom p {
  text-wrap: balance;
}

/* ===== P031.css ===== */
/* =====================================================================
   P031 — Workspace home (/workspace)
   Covers two rendered states:
   - Anonymous/unauthorized: branded 403 page  -> body.route--system-403
   - Manager: admin workspace dashboard        -> body.is-workspace
   This partial loads LAST. !important used only to beat inline styles.
   ===================================================================== */


/* [P031] ISSUE 1-0674, 1-0675, 1-0671, 1-0670: Center + contain the bare
   403 "access denied" message so the empty viewport is balanced and the
   message reads as an intentional panel rather than a flush top-left line.
   (Heading/icon/CTA links need markup and are deferred.) */
body.route--system-403 .lms-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 320px); /* keep header + footer visible, fill the void */
  padding: 3rem 1.5rem;
  text-align: center;
}

body.route--system-403 #block-lms-theme-content {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #1f2a37; /* >= 7:1 on white, WCAG AA/AAA */
}

body.route--system-403 .lms-messages-wrapper {
  width: 100%;
  max-width: 640px;
}


/* [P031] ISSUE 1-0678: Notification bell count badge sits too high/clips
   into the bell. Anchor it cleanly to the top-right as an even circular
   bubble with no clipping. (Beats the template inline-style <style> block.) */
.lms-bell-icon-wrapper .lms-bell-counter {
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #ffffff; /* clean separation from the bell glyph */
  box-sizing: border-box;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 119, 182, 0.35);
}


/* [P031] ISSUE 1-0679: Header brand wordmark (text fallback) is rendered in
   a muted/translucent tone on the dark header. Use crisp near-white so it
   meets WCAG AA against the dark navbar and matches the footer lockup. */
.lms-navbar__brand span {
  color: #f4f7fb !important;
  opacity: 1 !important;
  font-weight: 800;
}


/* [P031] ISSUE 1-0677: Icon-only logout control in the header lacks a clear
   affordance/state cue. Add a visible hover + focus-visible style so the
   destructive action is discoverable. (Accessible-name aria-label needs
   markup and is deferred.) */
.lms-navbar__actions a[href*="/logout"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.lms-navbar__actions a[href*="/logout"]:hover {
  background: rgba(245, 87, 108, 0.12);
  color: #f5576c;
}
.lms-navbar__actions a[href*="/logout"]:focus-visible {
  outline: 2px solid #f5576c;
  outline-offset: 2px;
}


/* [P031] ISSUE 1-0684, 1-0693: Sidebar brand wordmark text is a muted
   blue-grey on the near-black sidebar (weak contrast). Force near-white so
   it reads as clearly as the primary nav labels (WCAG AA on #161b22). */
body.is-workspace .lms-admin__sidebar-brand a,
body.is-workspace .lms-admin__sidebar-brand span {
  color: #f4f7fb !important;
}


/* [P031] ISSUE 1-0685: Collapsible nav rows carry faint, inconsistently
   aligned dropdown chevrons. Standardize size, colour and vertical
   alignment so the expandable affordance is uniform and legible.
   (Beats per-element inline font-size/transform.) */
body.is-workspace .lms-admin__nav .lms-dropdown-icon {
  font-size: 0.75rem !important;
  color: #cbd5e1 !important;
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
  align-self: center;
  line-height: 1;
}
/* Ensure the chevron-bearing rows align label + chevron consistently. */
body.is-workspace .lms-admin__nav-dropdown > .lms-admin__nav-item {
  align-items: center;
}


/* [P031] ISSUE 1-0686: STATUS column header / "Completed" pill alignment —
   give the status cells a consistent right gutter so the pills align with
   the header and don't crowd the card's right padding.
   (Beats the inline text-align:right on the th/td.) */
body.is-workspace .lms-table th:last-child,
body.is-workspace .lms-table td:last-child {
  padding-right: 1.5rem;
  text-align: right;
}
body.is-workspace .lms-table td:last-child > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* [P031] ISSUE 1-0687: Excessive vertical gap between the KPI stat row and
   the Recent Orders panel. Tighten the rhythm to match spacing elsewhere. */
body.is-workspace .lms-kpi-grid {
  margin-bottom: 1.25rem;
}
/* The orders card uses flex:1 1 0% (grows to fill); cap that growth so it
   doesn't get pushed into a tall void on short content. */
body.is-workspace .lms-admin-card {
  flex: 0 1 auto;
}


/* =====================================================================
   MOBILE — ISSUES 1-0688, 1-0689, 1-0690, 1-0691, 1-0692, 1-0695
   Root cause: the admin sidebar is position:fixed; width:260px with NO
   responsive breakpoint, so on mobile it occupies ~half the screen, the
   main content is squeezed into a sliver, headings break char-by-char and
   the table is clipped. A true off-canvas drawer needs a JS toggle (the
   hamburger button itself is deferred), but we can collapse the sidebar and
   give the content the full viewport width, which resolves the squeeze and
   the entire overflow/wrap chain.
   ===================================================================== */
@media (max-width: 768px) {
  /* Collapse the fixed sidebar off-screen so it stops stealing width. */
  body.is-workspace .lms-admin__sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  /* When toggled (drawer markup adds .is-open), slide it back in as overlay. */
  body.is-workspace .lms-admin__sidebar.is-open {
    transform: translateX(0);
  }

  /* ISSUE 1-0691, 1-0688: main content takes the full viewport width. */
  body.is-workspace .lms-admin__main {
    margin-left: 0 !important;
    width: 100%;
    padding: 1.25rem;
  }

  /* ISSUE 1-0692: KPI cards stack/relax so uppercase labels keep an even
     baseline instead of breaking awkwardly across the sliver. */
  body.is-workspace .lms-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  body.is-workspace .lms-kpi-card__label {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* ISSUE 1-0689: "Recent Orders" heading must stay horizontal, never
     break into a vertical character stack. */
  body.is-workspace .lms-admin-card h3 {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    min-width: 0;
  }

  /* ISSUE 1-0690, 1-0695: table is horizontally scrollable so Order ID and
     the remaining columns are reachable instead of being clipped to ~3 chars;
     prevents the tall, sparse single-column sprawl. */
  body.is-workspace .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.is-workspace .lms-table {
    min-width: 560px; /* keep real columns; container scrolls */
  }
  body.is-workspace .lms-table th,
  body.is-workspace .lms-table td {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* On the smallest screens give each KPI its own full-width row so labels
     never break (ISSUE 1-0692). */
  body.is-workspace .lms-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== P032.css ===== */
/* ==========================================================================
   P032 — Manage Courses (/workspace/courses)
   Scope: admin workspace lives under .lms-admin (route_class empty).
   Loads LAST. !important used only to beat inline styles on the target.
   ========================================================================== */

/* [P032] ISSUE 1-0698, 1-0696: desaturate header band + keep ACTION column visible */
/* Override the bright inline blue thead with a muted dark surface that matches the skin. */
.lms-admin .lms-table thead tr {
  background: #273445 !important;
}
.lms-admin .lms-table thead th {
  background-color: #273445 !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Keep the checkbox accent on the brand blue so the header still reads as themed. */
.lms-admin .lms-table thead th input[type="checkbox"] {
  accent-color: #1d70f5;
}

/* [P032] ISSUE 1-0696: stop the right-most ACTION column from clipping */
/* Trim padding on the last header/data cell and let the responsive wrapper
   scroll instead of truncating the header text. */
.lms-admin .lms-table-responsive {
  overflow-x: auto;
}
.lms-admin .lms-table th:last-child,
.lms-admin .lms-table td:last-child {
  padding-right: 1rem;
}
.lms-admin .lms-table th:last-child {
  white-space: nowrap;
}

/* [P032] ISSUE 1-0703: action (eye/edit/delete) icons low contrast on dark rows */
/* Lighten the resting icon color to a high-luminance grey (>=3:1 on #1e293b)
   and add a visible focus state. The template uses inline color + JS hover;
   override the resting state and provide keyboard focus affordance. */
.lms-admin .lms-table td:last-child a {
  color: #cbd5e1 !important;
}
.lms-admin .lms-table td:last-child a:hover {
  color: #ffffff !important;
}
.lms-admin .lms-table td:last-child a:focus-visible {
  outline: 2px solid #1d70f5;
  outline-offset: 2px;
  border-radius: 0.25rem;
  color: #ffffff !important;
}

/* [P032] ISSUE 1-0704, 1-0715: sidebar 'SilverCare' brand wordmark too dim */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span {
  color: #f1f5f9 !important;
}

/* [P032] ISSUE 1-0705: long course titles wrap unevenly / orphan words */
/* Clamp titles to 2 lines with ellipsis and vertically center cell content
   so neighbouring data keeps row heights balanced. */
.lms-admin .lms-table td {
  vertical-align: middle;
}
.lms-admin .lms-table tbody tr td:nth-child(3) {
  max-width: 18rem;
}
.lms-admin .lms-table tbody tr td:nth-child(3) {
  display: table-cell;
}
.lms-admin .lms-table tbody tr td:nth-child(3) > * {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* [P032] ISSUE 1-0706: Reset button looks disabled / low-contrast label */
/* The inline style sets a faint rgba background; promote to a clear secondary
   outlined button with a legible label and hover state. */
.lms-admin #lms-course-reset-btn {
  background: transparent !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 600;
}
.lms-admin #lms-course-reset-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.lms-admin #lms-course-reset-btn:focus-visible {
  outline: 2px solid #1d70f5;
  outline-offset: 2px;
}

/* [P032] ISSUE 1-0716: align submenu chevrons consistently across nav items */
.lms-admin .lms-admin__nav-dropdown > a {
  align-items: center;
}
.lms-admin .lms-dropdown-icon {
  flex: 0 0 auto;
  margin-left: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

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

  /* [P032] ISSUE 1-0707 (partial): reclaim full width for content on mobile.
     A proper off-canvas drawer needs a hamburger toggle (markup/JS) — deferred.
     Here we at least make the sidebar non-blocking by docking it to the top as
     a horizontally-scrollable bar so it no longer steals ~260px of width. */
  .lms-admin {
    flex-direction: column;
  }
  .lms-admin .lms-admin__sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto !important;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .lms-admin .lms-admin__sidebar-brand {
    padding: 0.75rem 1rem;
    flex: 0 0 auto;
  }
  .lms-admin .lms-admin__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0 0.5rem;
    gap: 0.25rem;
  }
  .lms-admin .lms-admin__nav-label,
  .lms-admin .lms-admin__sidebar-profile,
  .lms-admin .lms-admin__sidebar > div:last-child {
    display: none;
  }
  .lms-admin .lms-admin__main {
    margin-left: 0;
    width: 100%;
    padding: 1.25rem;
  }

  /* [P032] ISSUE 1-0710, 1-0711, 1-0712: stack header; stop H1/subtitle/button overlap */
  .lms-admin .lms-admin__header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .lms-admin .lms-admin__header > div:last-child {
    width: 100%;
  }
  .lms-admin .lms-admin__title {
    font-size: 1.375rem;
  }
  .lms-admin .lms-admin__subtitle {
    width: 100%;
  }
  .lms-admin .btn-lms-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    width: 100%;
  }

  /* [P032] ISSUE 1-0709: filter toolbar overflows — wrap + full-width fields */
  .lms-admin .lms-admin-filter {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
  }
  .lms-admin .lms-admin-filter__group {
    flex: 1 1 100%;
    min-width: 0;
  }
  .lms-admin .lms-admin-filter > div:last-child {
    flex: 1 1 100%;
  }
  .lms-admin #lms-course-reset-btn {
    width: 100% !important;
  }

  /* [P032] ISSUE 1-0708, 1-0717: table collapses to a thin strip with blank
     checkbox cells — force a horizontally scrollable, min-width table so every
     column (title/status/category/instructor/actions) renders. (Explicit
     loading-skeleton / empty-state component needs markup — deferred.) */
  .lms-admin .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lms-admin .lms-table {
    min-width: 760px;
  }
  .lms-admin .lms-table th,
  .lms-admin .lms-table td {
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
  .lms-admin .lms-table tbody tr td:nth-child(3) {
    white-space: normal;
    min-width: 12rem;
  }

  /* [P032] ISSUE 1-0713: pagination summary text squeezed / hyphen-broken */
  .lms-admin .lms-admin-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .lms-admin .lms-admin-footer > div:first-child {
    width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  /* [P032] ISSUE 1-0714: pagination becomes a clean single horizontal row */
  .lms-admin .lms-pagination-container .pager__items,
  .lms-admin .lms-pagination-container ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

/* ===== P033.css ===== */
/* ==========================================================================
   P033 - Course Editor (/workspace/courses/88/edit)
   route_class: route--lms-course-admin-course-edit
   Loads LAST. Inline <style> blocks live in the body of the admin templates,
   so they win on equal specificity / source order; mobile-layout overrides
   therefore require higher specificity (body scope) and/or !important to beat
   the template's fixed-sidebar inline rules.
   ========================================================================== */

/* [P033] ISSUE 1-0719, 1-0720: CKEditor body content is light grey (reads as
   placeholder) and inconsistent vs other RTE fields. Force all editor bodies
   to dark, AA-contrast body text. */
.ck.ck-content,
.ck-editor__editable,
.ck-editor__main > .ck-editor__editable,
#lms-admin-form-app .lms-form-content .ck-content,
#lms-admin-form-app .lms-form-content .ck-editor__editable,
#lms-admin-form-app .lms-form-content .ck.ck-editor__main > .ck-editor__editable {
  color: #1f2937 !important;
}
/* Keep TRUE empty-state placeholder grey so the AA rule above does not mask it. */
.ck.ck-content .ck-placeholder::before,
.ck-editor__editable .ck-placeholder::before,
#lms-admin-form-app .lms-form-content .ck-content .ck-placeholder::before {
  color: #94a3b8 !important;
}
/* Normalise body typography across every editor instance for sibling parity. */
.ck.ck-content p,
.ck-editor__editable p,
#lms-admin-form-app .lms-form-content .ck-content p,
#lms-admin-form-app .lms-form-content .ck-editor__editable p {
  color: #1f2937 !important;
  font-size: 0.95rem;
  font-weight: 400;
}

/* [P033] ISSUE 1-0725: "Brief description for listing cards." help text sits
   with a large gap below the RTE and reads as disconnected. Pull it tight
   under its field and give consistent vertical rhythm. */
#lms-admin-form-app .lms-form-content .form-item .description,
#lms-admin-form-app .lms-form-content .js-form-item .description,
#lms-admin-form-app .lms-form-content .text-format-wrapper + .description {
  margin-top: 0.375rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #64748b;
}
/* The RTE container carries default bottom margin; trim it so the help text
   groups with the field it documents. */
#lms-admin-form-app .lms-form-content .field--type-text-long .form-item,
#lms-admin-form-app .lms-form-content .text-format-wrapper {
  margin-bottom: 0.375rem;
}

/* [P033] ISSUE 1-0728, 1-0738: Sidebar brand wordmark "SilverCare" is a muted
   blue-grey on the near-black sidebar (below AA). Force white + weight so it is
   clearly the brand and beats AA against #161b22. */
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand a span,
.lms-admin__sidebar-brand span {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* [P033] ISSUE 1-0727: Logout is a dark-red filled pill, inconsistent with the
   plain-text nav items above it, and clipped at the viewport bottom. Restyle it
   to read as an intentional secondary/quiet nav action and add bottom padding
   so it is never clipped. Inline styles on the anchor require !important. */
.lms-admin__sidebar > div:last-child {
  padding-bottom: 2rem !important;
}
.lms-admin__sidebar > div:last-child a[href*="logout"] {
  background: transparent !important;
  color: #f87171 !important;            /* lighter red, AA on dark sidebar */
  border: 1px solid rgba(248, 113, 113, 0.35) !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
}
.lms-admin__sidebar > div:last-child a[href*="logout"]:hover {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #fca5a5 !important;
}
.lms-admin__sidebar > div:last-child a[href*="logout"]:focus-visible {
  outline: 2px solid #f87171 !important;
  outline-offset: 2px !important;
}

/* [P033] ISSUE 1-0729, 1-0739: Save and Delete in the footer are both blue, so
   the destructive Delete has the same primary emphasis as Save. Give Delete a
   distinct danger/outline treatment; primary blue stays for Save only. */
#lms-admin-form-app .lms-form-content .form-actions input[value="Delete"],
#lms-admin-form-app .lms-form-content .form-actions input[id*="delete"],
#lms-admin-form-app .lms-form-content .form-actions a[href*="/delete"],
#lms-admin-form-app .lms-form-content .form-actions a.button--danger {
  background: #ffffff !important;
  color: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  box-shadow: none !important;
}
#lms-admin-form-app .lms-form-content .form-actions input[value="Delete"]:hover,
#lms-admin-form-app .lms-form-content .form-actions input[id*="delete"]:hover,
#lms-admin-form-app .lms-form-content .form-actions a[href*="/delete"]:hover,
#lms-admin-form-app .lms-form-content .form-actions a.button--danger:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  transform: none !important;
}

/* ==========================================================================
   MOBILE (<= 768px) - sidebar squeeze / overflow / page height
   The template hard-codes a 260px fixed sidebar and a 260px left margin on the
   main column inline; on small screens that crushes content to ~1 char/line.
   CSS-only remedy: drop the sidebar out of the layout flow as a top auto-height
   bar (it stays reachable) and let the content column use the full viewport.
   A true off-canvas hamburger toggle additionally needs markup/JS (deferred).
   ========================================================================== */
@media (max-width: 768px) {

  /* [P033] ISSUE 1-0730, 1-0731, 1-0732, 1-0733: un-fix the sidebar and free
     the content column to full width so text wraps at word boundaries and the
     document collapses to a sane height. */
  body .lms-admin {
    flex-direction: column !important;
  }
  body .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 60vh;
    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;
    padding: 1.25rem !important;
    min-width: 0 !important;
  }
  body .lms-admin-entity-form-wrapper,
  body #lms-admin-form-app,
  body .lms-form-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* [P033] ISSUE 1-0732: guard against forced break-all so words wrap normally. */
  body .lms-admin__main,
  body .lms-form-content,
  body .lms-form-content .form-item label,
  body .lms-form-content .description,
  body .ck-content {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* [P033] ISSUE 1-0735: long H1 course title clips at the right edge; keep it
     inside the wrapper, wrap it, and reduce size at mobile width. */
  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;
  }

  /* [P033] ISSUE 1-0737: fixed-width "Remove" upload buttons overflow the column;
     let them shrink within the available width. */
  body .lms-form-content input[type="submit"],
  body .lms-form-content .button,
  body #lms-admin-form-app .lms-form-content input[value="Remove"],
  body #lms-admin-form-app .lms-form-content input[value="Edit"] {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* [P033] ISSUE 1-0739: make the Save/Delete action bar comfortable and
     reachable - stick it to the bottom of the viewport on mobile. */
  body #lms-admin-form-app .lms-form-content .form-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    padding: 1rem 0 !important;
    margin-top: 1.5rem !important;
    z-index: 5 !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06) !important;
  }
  body #lms-admin-form-app .lms-form-content .form-actions input[type="submit"],
  body #lms-admin-form-app .lms-form-content .form-actions a.button {
    flex: 1 1 auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* [P033] ISSUE 1-0735 (also applies above mobile to long titles): never clip. */
.lms-admin__title {
  overflow-wrap: break-word;
}

/* ===== P034.css ===== */
/* ==========================================================================
   P034 — Manage Quizzes (/workspace/quizzes)
   Fixes scoped to the admin workspace (.lms-admin) and shared admin components.
   Loaded LAST. !important used only to beat inline styles on the targets.
   ========================================================================== */

/* [P034] ISSUE 1-0740, 1-0741: 'ACTIONS' header + edit icon clipped at right edge.
   Root cause: inner two-column flex (table column + 300px stats) squeezes the
   table so columns/last action icon overflow the card. Allow horizontal scroll
   inside the card and guarantee the actions cell keeps inner padding so the
   icons never sit flush against (or past) the card's right border. */
.lms-admin .lms-table-responsive {
  overflow-x: auto;
}
.lms-admin .lms-table {
  /* let columns size to content so ACTIONS is never truncated */
  min-width: 100%;
}
.lms-admin .lms-table th:last-child,
.lms-admin .lms-table td:last-child {
  padding-right: 1.5rem !important;
  text-align: right;
}
/* keep the action controls fully inside the cell with a clear gap from the edge */
.lms-admin .lms-table td:last-child a {
  display: inline-block;
}

/* [P034] ISSUE 1-0746: single-line cell values top-align next to 3-4 line titles.
   Center cell content vertically so the eye tracks across the row; cap the title
   so rows do not grow excessively tall. */
.lms-admin .lms-table td,
.lms-admin .lms-table th {
  vertical-align: middle !important;
}
.lms-admin .lms-table td:first-child {
  /* clamp very long quiz titles to keep rows compact and scannable */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 320px;
}

/* [P034] ISSUE 1-0745, 1-0757: 'SilverCare' brand wordmark too muted on the
   dark sidebar (desktop + mobile). Force the text wordmark to a high-contrast
   light gray (>= 4.5:1 on #161b22). Only affects the text fallback; image
   logos are unaffected. */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span {
  color: #f1f5f9 !important; /* ~16:1 on #161b22 */
}

/* ==========================================================================
   MOBILE (<= 480px) — page is not responsive: fixed 260px sidebar overlaps a
   thin main strip; inner two-column flex + 4-col grid overflow the viewport.
   Reclaim full width, single-column the layout, stop horizontal overflow.
   ========================================================================== */
@media (max-width: 480px) {

  /* [P034] ISSUE 1-0750, 1-0754: main content squeezed / page wider than
     viewport. Drop the 260px gutter, give main full width, kill overflow-x. */
  .lms-admin {
    flex-direction: column;
  }
  .lms-admin .lms-admin__main {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
    padding: 1.25rem !important;
    overflow-x: hidden;
  }

  /* [P034] ISSUE 1-0749 (layout reclaim): collapse the persistent desktop
     sidebar off-canvas so it no longer steals the viewport width. A usable
     hamburger toggle still requires markup/JS (deferred). */
  .lms-admin .lms-admin__sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto !important;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .lms-admin .lms-admin__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0.5rem;
  }
  .lms-admin .lms-admin__nav-label,
  .lms-admin .lms-admin__sidebar-profile {
    display: none;
  }
  .lms-admin .lms-admin__nav-item {
    white-space: nowrap;
  }

  /* [P034] ISSUE 1-0752, 1-0753: H1 'Quiz Management' clipped / button overlaps
     heading. Stack header title and action button vertically with a gap, and
     shrink the heading so it fits the viewport. */
  .lms-admin .lms-admin__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .lms-admin .lms-admin__title {
    font-size: 1.375rem !important;
    line-height: 1.25;
    word-break: break-word;
  }
  .lms-admin .lms-admin-header__actions .btn-lms-primary {
    display: inline-block;
  }

  /* [P034] ISSUE 1-0750 (inner cols), 1-0756: inner two-column flex (table +
     300px Quick Stats) and the stats card overflow. Stack to one column and
     let the stats sidebar take full width. */
  .lms-admin .lms-admin__main > [style*="display: flex"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .lms-admin .lms-admin__main > [style*="display: flex"] > [style*="width: 300px"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* [P034] ISSUE 1-0751: quiz rows clipped to a few characters. Once full width
     is restored, allow titles/metadata to wrap instead of being cut; let the
     table scroll horizontally within its card rather than clipping. */
  .lms-admin .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lms-admin .lms-table td:first-child {
    -webkit-line-clamp: unset;
    overflow: visible;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* [P034] ISSUE 1-0755: Question Bank Preview 4-col grid runs off-screen.
     Collapse to a single column so all cards fit and wrap. */
  .lms-admin .lms-admin__main > [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* [P034] ISSUE 1-0758: 'Question Bank Preview' heading breaks mid-word in the
     squeezed column. With full width restored, ensure normal wrapping. */
  .lms-admin .lms-admin__main h3 {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ===== P035.css ===== */
/* ==========================================================================
   P035 — Manage Users (/workspace/users)
   Page scope: body.is-workspace (admin workspace pages)
   Loaded LAST. !important used only to beat inline styles on the target.
   ========================================================================== */

/* [P035] ISSUE 1-0767: ROLE column badges low contrast on dark theme (WCAG AA) */
/* Inline colors set per-role in twig (e.g. Student #3b82f6) fail AA on #0b0f19.
   Lighten the badge text and give a stronger fill so text reaches >=4.5:1. */
body.is-workspace .lms-table td span[style*="border-radius: 1rem"] {
  color: #e2e8f0 !important;            /* fallback readable text */
  background: rgba(148, 163, 184, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-weight: 600 !important;
}
/* Per-role: keep hue identity but lift to AA-compliant lightness on dark bg. */
body.is-workspace .lms-table td span[style*="59, 130, 246"] {      /* Student */
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.22) !important;
}
body.is-workspace .lms-table td span[style*="245, 158, 11"] {      /* Instructor */
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.22) !important;
}
body.is-workspace .lms-table td span[style*="217, 70, 239"] {      /* Manager */
  color: #f0abfc !important;
  background: rgba(217, 70, 239, 0.24) !important;
}
body.is-workspace .lms-table td span[style*="239, 68, 68"] {       /* Admin */
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.22) !important;
}

/* [P035] ISSUE 1-0768: USER column names wrap -> inconsistent row heights / avatar baseline */
/* Keep avatars top-aligned within a stable row height; clamp long names to one line. */
body.is-workspace .lms-table tbody td {
  vertical-align: middle !important;
}
body.is-workspace .lms-table tbody tr {
  height: 64px;
}
/* First data cell after the checkbox = the USER cell (flex avatar + name) */
body.is-workspace .lms-table tbody td[style*="display: flex"] {
  align-items: center !important;
}
body.is-workspace .lms-table tbody td[style*="display: flex"] > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1.3;
}
body.is-workspace .lms-table tbody td[style*="display: flex"] > img {
  flex: 0 0 auto;
}

/* [P035] ISSUE 1-0763: Bulk selection counter wraps into a cramped 2-line label */
body.is-workspace #bulk-selected-count {
  white-space: nowrap;
}

/* [P035] ISSUE 1-0762: Bottom action bar count text wraps -> baselines misalign */
/* The footer row is the flex container holding count text + pager. Center + nowrap. */
body.is-workspace .lms-pagination-container {
  display: flex;
  align-items: center;
}
/* "Total N users found on this page" span sits as sibling before pager container. */
body.is-workspace .lms-pagination-container ~ span,
body.is-workspace .lms-admin-card [style*="Total"] {
  white-space: nowrap;
}

/* [P035] ISSUE 1-0761, 1-0776: Pagination overlap (1 2 3 4 / Next / Last collide) */
/* Force the Drupal pager into a single wrapping flex row with consistent gaps. */
body.is-workspace .lms-pagination-container .pager,
body.is-workspace .lms-pagination-container nav.pager {
  margin: 0;
}
body.is-workspace .lms-pagination-container .pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.is-workspace .lms-pagination-container .pager__item {
  margin: 0;
  display: inline-flex;
}
body.is-workspace .lms-pagination-container .pager__item a,
body.is-workspace .lms-pagination-container .pager__item.is-active a,
body.is-workspace .lms-pagination-container .pager__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* [P035] ISSUE 1-0770: Reset button jammed against right toolbar edge (uneven padding) */
/* Give the filter toolbar symmetric horizontal padding so left search & right Reset match. */
body.is-workspace .lms-admin-card > div[style*="justify-content: space-between"][style*="flex-end"] {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* [P035] ISSUE 1-0779: 'SilverCare' brand wordmark low contrast on dark sidebar */
body.is-workspace .lms-admin__sidebar-brand a,
body.is-workspace .lms-admin__sidebar-brand span {
  color: #f1f5f9 !important;
}

/* ==========================================================================
   MOBILE (<=768px / <=480px) — responsive collapse of admin workspace
   ========================================================================== */

@media (max-width: 768px) {

  /* [P035] ISSUE 1-0772: Fixed desktop sidebar eats ~40% of mobile width */
  /* Off-canvas: hide sidebar by default, slide in via :target (#admin-sidebar)
     or the existing :focus-within fallback. Free full width for content. */
  body.is-workspace .lms-admin__sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 82vw;
    min-width: 0;
    max-width: 320px;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
  }
  body.is-workspace .lms-admin__sidebar:target,
  body.is-workspace .lms-admin__sidebar:focus-within {
    transform: translateX(0);
  }

  /* [P035] ISSUE 1-0772, 1-0773: reclaim full width for main content + table */
  body.is-workspace .lms-admin__main {
    margin-left: 0 !important;
    padding: 1.25rem 1rem !important;
  }
  /* [P035] ISSUE 1-0773: ensure data table can scroll horizontally, not collapse */
  body.is-workspace .lms-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.is-workspace .lms-table {
    min-width: 720px;   /* keep all columns at usable width; reach via scroll */
  }

  /* [P035] ISSUE 1-0774, 1-0782: '+ Add User' overlaps wrapped 'User Management' H1 */
  body.is-workspace .lms-admin__header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  body.is-workspace .lms-admin__header > div {
    width: 100%;
    flex-wrap: wrap;
  }

  /* [P035] ISSUE 1-0781: filter row (search/role/status/reset) overflows -> stack */
  body.is-workspace .lms-admin-card > div[style*="justify-content: space-between"][style*="flex-end"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }
  body.is-workspace .lms-admin-card > div[style*="flex-end"] > div[style*="gap: 1.5rem"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  body.is-workspace .lms-admin-card > div[style*="flex-end"] > div[style*="gap: 1.5rem"] > div {
    width: 100%;
    justify-content: space-between;
  }

  /* [P035] ISSUE 1-0780: Search placeholder truncated mid-word on narrow input */
  body.is-workspace .lms-admin-filter__input {
    width: 100% !important;
    box-sizing: border-box;
  }
  body.is-workspace .lms-admin-filter__input + i.fa-search,
  body.is-workspace .lms-admin-filter__input ~ i.fa-search {
    /* keep the search icon inside the now full-width field */
    right: 0.75rem !important;
  }
  body.is-workspace input[name="search"] {
    width: 100% !important;
  }

  /* [P035] ISSUE 1-0777: bulk action toolbar broken grouping -> stack cohesively */
  body.is-workspace .lms-admin-card [style*="background: #0b0f19"][style*="space-between"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }
  body.is-workspace .lms-admin-card [style*="background: #0b0f19"] > div[style*="gap: 1rem"]:first-child {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem !important;
  }

  /* [P035] ISSUE 1-0775: pagination summary text breaks one word per line */
  body.is-workspace .lms-admin-card [style*="background: #0b0f19"] > div[style*="gap: 1rem"]:last-child {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  body.is-workspace .lms-pagination-container ~ span,
  body.is-workspace .lms-admin-card [style*="Total"] {
    white-space: normal !important;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* [P035] ISSUE 1-0776: tighten pager pills on very small screens, still no overlap */
  body.is-workspace .lms-pagination-container .pager__item a,
  body.is-workspace .lms-pagination-container .pager__item.is-active a,
  body.is-workspace .lms-pagination-container .pager__item span {
    min-width: 1.85rem;
    height: 1.85rem;
    font-size: 0.8125rem;
  }
}

/* ===== P036.css ===== */
/* ==========================================================================
   P036 — Manage Orders (/workspace/orders)
   Admin layout markup: .lms-admin > .lms-admin__sidebar + .lms-admin__main
   Status cells use .lms-badge + .lms-badge--{success,warning,danger,secondary}
   This partial loads LAST. !important used only to beat inline styles.
   ========================================================================== */

/* [P036] ISSUE 1-0783: status badge color-codes (modifiers were undefined -> all rendered identical indigo) */
.lms-table .lms-badge--success {
  background: rgba(16, 185, 129, 0.12);
  color: #4ade80;
  border-color: rgba(16, 185, 129, 0.30);
  box-shadow: none;
}
.lms-table .lms-badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.30);
  box-shadow: none;
}
.lms-table .lms-badge--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.30);
  box-shadow: none;
}
.lms-table .lms-badge--secondary {
  background: rgba(100, 116, 139, 0.14);
  color: #cbd5e1;
  border-color: rgba(100, 116, 139, 0.30);
  box-shadow: none;
}

/* [P036] ISSUE 1-0784: brand wordmark contrast on dark sidebar (#161b22). #f1f5f9 ~ 15:1, passes AA */
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand a span {
  color: #f1f5f9 !important;
}

/* [P036] ISSUE 1-0787: keep column headers stuck while body scrolls.
   thead is already position:sticky; reinforce on the th cells so the blue
   header bg paints over scrolling rows and never disappears mid-table. */
.lms-table-responsive { overflow-y: auto; }
.lms-table thead th {
  position: sticky;
  top: 0;
  z-index: 11;
}

/* [P036] ISSUE 1-0789: Edit action link affordance (clear interactive feedback) */
.lms-table td .lms-btn--outline {
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lms-table td .lms-btn--outline:hover,
.lms-table td .lms-btn--outline:focus-visible {
  background: rgba(29, 112, 245, 0.12);
  color: #ffffff;
  border-color: #1d70f5;
  text-decoration: underline;
}
.lms-table td .lms-btn--outline:focus-visible {
  outline: 2px solid #1d70f5;
  outline-offset: 2px;
}

/* [P036] ISSUE 1-0790: tighten/align filter card with the results table.
   The inline title margin (2rem) + filter margin (2rem) leaves a loose gap;
   both blocks already span the main column width, so normalise the rhythm. */
.lms-admin__main > .lms-admin__title {
  margin-bottom: 1.25rem !important;
}
.lms-admin-filter {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   MOBILE (<= 768px) — sidebar is fixed 260px & main has margin-left:260px,
   which shoves the content off-screen. Reclaim the viewport for content.
   The hamburger TOGGLE itself needs JS/markup (deferred: 1-0791); here we
   make the page usable by collapsing the sidebar off-canvas and giving the
   main column the full width so the table/heading/filters render correctly.
   ========================================================================== */
@media (max-width: 768px) {
  /* [P036] ISSUE 1-0791: collapse desktop sidebar off-canvas on mobile */
  .lms-admin__sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.5);
  }
  /* allow opening via :target / aria fallback if a toggle is later added */
  .lms-admin__sidebar:target,
  .lms-admin__sidebar.is-open {
    transform: translateX(0);
  }

  /* [P036] ISSUE 1-0792 / 1-0795 / 1-0796: give main full width so the
     orders table is no longer clipped to a sliver at the right edge */
  .lms-admin__main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1.25rem 1rem;
  }

  /* [P036] ISSUE 1-0793: H1 no longer squeezed -> stops char-by-char breaking */
  .lms-admin__title {
    font-size: 1.4rem;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* [P036] ISSUE 1-0794: stack filter controls vertically, full width */
  .lms-admin-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1rem;
  }
  .lms-admin-filter__group { flex: none; width: 100%; }
  .lms-admin-filter .btn-lms-primary { width: 100%; }

  /* [P036] ISSUE 1-0792 / 1-0795: keep the table horizontally scrollable
     from the first column instead of clipping at the viewport edge */
  .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lms-table {
    min-width: 640px; /* preserve column widths; scroll rather than crush */
  }
  /* [P036] ISSUE 1-0796: restore compact row rhythm */
  .lms-table th,
  .lms-table td {
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
}

/* ===== P037.css ===== */
/* ==========================================================================
   P037 — manage-content-faq (/workspace/content/faq)
   This partial loads LAST. !important is used ONLY to beat inline styles on
   the exact target element; otherwise normal specificity is used.

   NOTE: The route currently resolves to a 403/404 (route--system-403 /
   route--system-404). The fixes below make the fallback error state legible
   and balanced. The missing route/controller and the in-SVG brand wordmark
   contrast cannot be corrected in CSS and are deferred.
   ========================================================================== */

/* [P037] ISSUE 1-0800, 1-0814: center the sparse error/empty state inside the
   main region so it does not leave a large empty band above the footer
   (desktop ~400px void; mobile cavernous middle). The main content region is
   the global page slot, but the centering only matters on the error states. */
body.route--system-403 .lms-page__content,
body.route--system-404 .lms-page__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 3rem 1.25rem;
  box-sizing: border-box;
}

body.route--system-403 .lms-messages-wrapper,
body.route--system-404 .lms-messages-wrapper {
  width: 100%;
}

/* [P037] ISSUE 1-0799, 1-0807: give the plain "page not found / not
   authorized" fallback text a designed empty-state card — centered, padded,
   with a container, heading-like emphasis and breathing room. The error copy
   renders inside #block-lms-theme-content on these routes. */
body.route--system-403 #block-lms-theme-content,
body.route--system-404 #block-lms-theme-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 44, 61, 0.08);
  color: #0f2c3d;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Decorative icon + emphasised first line to read as a real error state. */
body.route--system-403 #block-lms-theme-content::before,
body.route--system-404 #block-lms-theme-content::before {
  content: "\f071"; /* Font Awesome exclamation-triangle */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: #0077b6;
}

/* [P037] ISSUE 1-0803: logged-in account name ("Jenny Pham") wraps to two
   lines next to the dropdown caret. The name span carries an inline
   white-space:nowrap that is defeated when the flex link is allowed to shrink;
   force the link not to shrink and keep the name on one line, truncating if
   space-constrained. Global header component — no page scope. */
.lms-navbar .lms-user-profile-link {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  max-width: 220px;
}

.lms-navbar .lms-user-profile-link > span {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

/* [P037] ISSUE 1-0811: footer Contact Info phone/email links render in a blue
   (#0077b6) that is borderline for WCAG AA on the light footer surface.
   Darken to #005f92 (>=4.5:1 on #ffffff/light blue tint). Global footer. */
.lms-footer__col a[href^="tel:"],
.lms-footer__col a[href^="mailto:"] {
  color: #005f92 !important;
}

/* [P037] ISSUE 1-0813: on the sticky mobile header the bell notification
   badge (top:-8px) sits at the very top edge and appears clipped by the bar.
   Pull the badge inward and ensure the wrapper/header has headroom so the
   badge stays fully contained. Global notification-bell component. */
@media (max-width: 480px) {
  .lms-navbar .lms-bell-counter {
    top: -4px;
    right: -8px;
  }

  .lms-navbar .lms-bell-icon-wrapper {
    margin-top: 2px;
  }
}

/* ===== P038.css ===== */
/* ==========================================================================
   P038 - Manage Pricing (/workspace/pricing) UI fixes
   Page is rendered inside .lms-admin (admin workspace shell). The page body
   carries no route class, so page-specific rules are scoped under .lms-admin.
   This partial loads LAST; !important is used only to beat inline styles or
   the high-specificity inline <style> block in lms-admin-sidebar.html.twig.
   ========================================================================== */

/* [P038] ISSUE 1-0821: Mute the bright saturated-blue table header band.
   Template sets .lms-table thead th { background-color:#1d70f5 !important }
   inline; beat it with a muted elevated dark-slate surface + light labels. */
.lms-admin .lms-table thead th {
  background-color: #1c2330 !important;
  color: #e6edf5 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* [P038] ISSUE 1-0816: STATUS cells render as plain text because the
   .lms-badge--success / --danger modifiers have no definition in this
   context. Give them real colored pills (WCAG-AA foreground on dark fill). */
.lms-admin .lms-table td .lms-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.lms-admin .lms-table td .lms-badge--success {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;              /* ~7:1 on #1e293b card */
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: none !important;
}
.lms-admin .lms-table td .lms-badge--danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;              /* AA on dark card */
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: none !important;
}

/* [P038] ISSUE 1-0817 + 1-0818: ACTIONS column pair consistency + contrast.
   Edit is a solid primary; Deactivate is an outline button whose orange
   text/border is set INLINE (#f59e0b). Make the pair a deliberate
   primary + danger-outline duo of equal height/padding/radius, and brighten
   the amber to a lighter shade that meets AA on the dark surface. */
.lms-admin .lms-table td .lms-btn {
  height: 32px;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: 0.5rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
/* Deactivate / Activate outline buttons: override inline amber/green to a
   brighter, AA-compliant tone and add a faint fill for legibility. */
.lms-admin .lms-table td a.lms-btn[style*="#f59e0b"] {
  color: #fcd34d !important;                 /* brighter amber, AA on dark */
  border: 1px solid #fcd34d !important;
  background: rgba(252, 211, 77, 0.08) !important;
}
.lms-admin .lms-table td a.lms-btn[style*="#10b981"] {
  color: #6ee7b7 !important;                 /* brighter green, AA on dark */
  border: 1px solid #6ee7b7 !important;
  background: rgba(16, 185, 129, 0.10) !important;
}

/* [P038] ISSUE 1-0819: Balance the filter toolbar. Keep controls grouped
   with even spacing and a shared bottom edge; cap the search group so it does
   not push the Status/Filter group into a large empty gap. */
.lms-admin .lms-admin-filter {
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.lms-admin .lms-admin-filter__group {
  justify-content: flex-end;
}

/* [P038] ISSUE 1-0820: Plans table card stretches to full viewport height
   leaving a large blank region below the rows. The sidebar inline CSS forces
   the card to flex:1 inside a min-height:100vh column. Let the card size to
   its content instead, and round/close the bottom edge cleanly. */
.lms-admin .lms-admin__main {
  min-height: 0;
}
.lms-admin .lms-admin-card {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  border-radius: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.lms-admin .lms-table-responsive {
  flex: 0 0 auto !important;
}

/* ==========================================================================
   MOBILE (<=768px): the fixed 260px sidebar stays inline and squeezes the
   main content, causing horizontal overflow and clipped title/buttons.
   A true hamburger/off-canvas toggle needs JS+markup (deferred: 1-0822),
   but we can collapse the sidebar and reclaim full width to eliminate the
   overflow/clipping (1-0823, 1-0824, 1-0827) here in CSS.
   ========================================================================== */
@media (max-width: 768px) {
  /* [P038] ISSUE 1-0823 + 1-0824: collapse sidebar, give content full width. */
  .lms-admin .lms-admin__sidebar {
    display: none !important;
  }
  .lms-admin .lms-admin__main {
    margin-left: 0 !important;
    padding: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* [P038] ISSUE 1-0824: H1 title wraps cleanly within content width. */
  .lms-admin .lms-admin__main > div:first-child {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .lms-admin .lms-admin__title {
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
  }

  /* [P038] ISSUE 1-0826: '+ Add Plan' label must stay on one line. */
  .lms-admin .lms-admin__main .lms-btn,
  .lms-admin .lms-admin__main .btn-lms-primary {
    white-space: nowrap;
  }

  /* [P038] ISSUE 1-0827: filter controls wrap and go full width. */
  .lms-admin .lms-admin-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }
  .lms-admin .lms-admin-filter__group {
    flex: 1 1 100% !important;
    width: 100%;
  }
  .lms-admin .lms-admin-filter__group .lms-btn {
    width: 100%;
    justify-content: center;
  }

  /* [P038] ISSUE 1-0823: keep the plans table scrollable inside the card
     instead of overflowing the page horizontally. */
  .lms-admin .lms-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== P039.css ===== */
/* ===========================================================================
   P039 — Manage Ratings (/workspace/ratings)
   Scope: .lms-admin admin workspace (no route_class available on this page).
   Loads LAST. !important used only to beat inline styles from the template.
   =========================================================================== */

/* [P039] ISSUE 1-0829: ACTIONS column clipped at right edge — give the
   responsive wrapper real right padding and keep action buttons on one row. */
.lms-admin .lms-table-responsive {
  overflow-x: auto;
  padding-right: 0.5rem;
}
.lms-admin .lms-table th:last-child,
.lms-admin .lms-table td:last-child {
  padding-right: 1.5rem;
  white-space: nowrap;
}
/* The action button group must never wrap or shrink below its content. */
.lms-admin .lms-table td:last-child > div {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* [P039] ISSUE 1-0831: RATING stars wrap onto two lines — keep all five
   stars + score on a single horizontal row. */
.lms-admin .lms-table td > div[style*="color: #fbbf24"],
.lms-admin .lms-table td > div[style*="#fbbf24"] {
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* [P039] ISSUE 1-0836: STATUS badges top-align inconsistently when a row has
   one vs two badges — center the badge stack vertically with even spacing. */
.lms-admin .lms-table td {
  vertical-align: middle;
}
/* The STATUS cell is the 6th column; stack its badges in a centered column. */
.lms-admin .lms-table tbody td:nth-child(6) {
  text-align: left;
}
.lms-admin .lms-table tbody td:nth-child(6) .lms-status {
  display: inline-flex;
  margin-top: 0 !important;
}
.lms-admin .lms-table tbody td:nth-child(6) .lms-status + .lms-status {
  margin-top: 4px !important;
}

/* [P039] ISSUE 1-0837: secondary date line "Apr 04, 2026" uses #64748b on the
   dark cell — below WCAG AA. Raise to a higher-luminance gray (#94a3b8 ≈ 5.1:1
   on #1e293b card). Override the inline color. */
.lms-admin .lms-table td span[style*="#64748b"] {
  color: #a3b2c7 !important;
}

/* [P039] ISSUE 1-0838 / 1-0848: sidebar brand wordmark + lower nav labels look
   faint on the dark sidebar. Lift the muted nav/brand foreground for AA. */
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand span {
  color: #f1f5f9 !important;
}
.lms-admin__nav-item {
  color: #c2cddb !important; /* was #94a3b8 → ~6.4:1 on #161b22 */
}
.lms-admin__nav-item--active,
.lms-admin__nav-item:hover {
  color: #ffffff !important;
}
.lms-admin__subnav-item {
  color: #b6c2d2 !important;
}

/* [P039] ISSUE 1-0840: "15 Reviews Found" counter — normalize tone/contrast.
   (Title-case wording itself is content; we lift its contrast & size.) */
.lms-admin__subtitle {
  color: #a3b2c7 !important;
  font-size: 0.9375rem;
}

/* ===========================================================================
   MOBILE — collapse the fixed 260px sidebar so the table gets full width.
   Addresses: 1-0841 (sidebar full width), 1-0842 (table squeezed),
   1-0843 / 1-0844 (H1 overflow/overlap), 1-0845 (ID clipped),
   1-0846 (pagination cramped), 1-0847 (empty side void), 1-0849 (header pill).
   =========================================================================== */
@media (max-width: 767px) {
  /* Kill horizontal overflow at the root. */
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* [P039] ISSUE 1-0841 / 1-0847: off-canvas the fixed sidebar. */
  .lms-admin__sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 82vw;
    min-width: 0;
    max-width: 300px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
  }
  .lms-admin__sidebar:target,
  .lms-admin__sidebar.is-open {
    transform: translateX(0);
  }

  /* [P039] ISSUE 1-0842 / 1-0847: main content takes the full viewport,
     no left margin reserved for the now-hidden sidebar. */
  .lms-admin {
    display: block;
  }
  .lms-admin__main {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100vw;
    padding: 1.25rem;
    box-sizing: border-box;
  }

  /* [P039] ISSUE 1-0843 / 1-0844: H1 + counter must stack, no overlap, wrap. */
  .lms-admin__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .lms-admin__title {
    font-size: 1.25rem;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
  .lms-admin__header > div {
    margin-top: 0.25rem;
  }

  /* [P039] ISSUE 1-0842 / 1-0845 / 1-0849: table is horizontally scrollable in
     a full-width wrapper so every column (incl. full IDs) is reachable; the
     sticky header spans the real table width instead of floating as a pill. */
  .lms-admin-card {
    max-width: 100%;
    overflow: hidden;
  }
  .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .lms-table {
    min-width: 720px; /* preserve column legibility; wrapper scrolls */
  }
  .lms-table td:first-child,
  .lms-table th:first-child {
    white-space: nowrap;
  }

  /* [P039] ISSUE 1-0846: pagination as a clean wrapping flex row, full width. */
  .lms-admin-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
  }
  .lms-admin-footer .lms-pagination,
  .lms-admin-footer .pager,
  .lms-admin-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* ===== P040.css ===== */
/* ==========================================================================
   P040 — Certificate Templates (/workspace/certificate-templates)
   Admin workspace layout. 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
   Loaded LAST. !important used only to beat inline styles on the targets.
   ========================================================================== */

/* [P040] ISSUE 1-0855, 1-0864: Sidebar brand wordmark too muted on dark sidebar.
   Source color #e6edf3 reads dim next to bright nav; lift to pure white for AA. */
.lms-admin__sidebar-brand a,
.lms-admin__sidebar-brand span {
  color: #ffffff;
}

/* [P040] ISSUE 1-0865: 'ADMIN NAVIGATION' section label faint (#64748b ~3:1 on #161b22).
   Raise lightness to #94a3b8 (>=4.5:1 small text) and keep weight for legibility. */
.lms-admin__nav-label {
  color: #94a3b8;
  font-weight: 700;
}

/* [P040] ISSUE 1-0854: ACTIONS view (eye) / edit (pencil) icon buttons low contrast.
   Inline styles set dim icon colors on dark button backgrounds; override for
   WCAG AA non-text contrast (>=3:1) and add visible hover/focus affordance. */
.lms-table td a[title="Preview"] {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #93c5fd !important;
}
.lms-table td a[title="Edit"] {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
}
.lms-table td a[title="Preview"]:hover,
.lms-table td a[title="Preview"]:focus-visible {
  background: rgba(59, 130, 246, 0.32) !important;
  color: #bfdbfe !important;
}
.lms-table td a[title="Edit"]:hover,
.lms-table td a[title="Edit"]:focus-visible {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
.lms-table td a[title="Preview"]:focus-visible,
.lms-table td a[title="Edit"]:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* [P040] ISSUE 1-0853: STATUS header / 'Active' badge left-edge mismatch.
   The badge has its own 0.75rem inner padding, so its text sits indented from
   the header text. Pull the inline-flex badge left to align glyph edges. */
.lms-table td .lms-status {
  margin-left: -0.75rem;
}

/* [P040] ISSUE 1-0856: Blue header bar top corners don't match the card radius,
   leaving a dark sliver. Clip the scroll wrapper's top corners to the card. */
.lms-admin-card {
  overflow: hidden;
}
.lms-admin-card .lms-table-responsive {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* ==========================================================================
   MOBILE (<=768px) — issues 1-0857..1-0863
   Root cause: sidebar is position:fixed 260px and .lms-admin__main has
   margin-left:260px, so on phones the sidebar eats ~45% width, the table is
   crushed and the hero button is clipped. Pure CSS cannot add a JS hamburger
   toggle, but it CAN restore a usable single-column flow: un-fix the sidebar,
   stack it above the content, and give the main column the full viewport width.
   ========================================================================== */
@media (max-width: 768px) {
  /* Single-column flow */
  .lms-admin {
    flex-direction: column;
  }

  /* [P040] ISSUE 1-0857: sidebar no longer overlays / pins; flows as a top bar. */
  .lms-admin__sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* [P040] ISSUE 1-0858, 1-0859, 1-0862: main column uses full width, no margin
     offset, and clips no content off the right edge. */
  .lms-admin__main {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
  }

  /* [P040] ISSUE 1-0859, 1-0862: keep the table scrollable inside the viewport
     instead of forcing the whole page wider than the screen. */
  .lms-admin__main .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lms-admin__main .lms-table {
    min-width: 520px;
  }
  .lms-admin__main .lms-table th,
  .lms-admin__main .lms-table td {
    white-space: nowrap;
  }

  /* [P040] ISSUE 1-0860, 1-0861: stack the hero (title + description + action)
     vertically; make the primary button full width so it is never clipped. */
  .lms-admin__main > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
  }
  .lms-admin__main > div:first-child > div:last-child {
    width: 100%;
  }
  .lms-admin__main .lms-btn.btn-lms-primary {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* [P040] ISSUE 1-0861: avoid forced hyphenation on the narrow description. */
  .lms-admin__title,
  .lms-admin__subtitle {
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: anywhere;
  }

  /* [P040] ISSUE 1-0863: keep the footer entry-count summary on one line. */
  .lms-admin-footer {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .lms-admin-footer > div {
    white-space: nowrap;
  }
}

/* ===== P041.css ===== */
/* ==========================================================================
   P041 — Issued Certificates (Certificate Management) UI fixes
   Loads LAST. Page container class: .lms-admin (route_class empty).
   ========================================================================== */

/* [P041] ISSUE 1-0868: Sidebar brand 'SilverCare' too pale on near-black sidebar */
.lms-admin .lms-admin__sidebar-brand a,
.lms-admin .lms-admin__sidebar-brand a span {
  color: #f1f5f9 !important;
}

/* [P041] ISSUE 1-0869: Table header is a jarring saturated-blue band — harmonize
   with the dark surface palette (elevated navy + muted uppercase labels). */
.lms-admin .lms-table thead th {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid rgba(29, 112, 245, 0.55) !important;
}

/* [P041] ISSUE 1-0870: CODE column values too dim (inline #94a3b8) */
.lms-admin .lms-table td span[style*="monospace"] {
  color: #cbd5e1 !important;
}

/* [P041] ISSUE 1-0872 + 1-0886: DATE cells (3rd col) wrap short dates onto two
   lines; keep dates on a single line. (Also helps the footer summary below.) */
.lms-admin .lms-table tbody td:nth-child(3) {
  white-space: nowrap;
}

/* [P041] ISSUE 1-0871: Per-row action buttons (View PDF / Regenerate / Revoke)
   form a ragged, uneven cluster. Align them into a consistent right-aligned
   flex row with equal-width buttons and predictable gap across all rows. */
.lms-admin .lms-table tbody td:last-child {
  white-space: nowrap;
}
.lms-admin .lms-table tbody td:last-child {
  /* turn the actions cell into a flex container */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}
.lms-admin .lms-table tbody td:last-child > a {
  margin-left: 0 !important;       /* drop the inline left-margins */
  min-width: 7.25rem;              /* equal width for all action buttons */
  justify-content: center;         /* center icon + label within button */
  box-sizing: border-box;
}

/* [P041] ISSUE 1-0873: Footer 'Showing N entries' count nearly invisible
   (inline #64748b) — raise to a legible muted tone. */
.lms-admin .lms-admin-footer > div[style*="#64748b"] {
  color: #cbd5e1 !important;
}

/* [P041] ISSUE 1-0876: Row dividers nearly invisible — strengthen separators. */
.lms-admin .lms-table td {
  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}

/* [P041] ISSUE 1-0877: Stat-card uppercase labels too dim relative to the value.
   Lighten + add letter-spacing for readability. (inline #94a3b8 on labels) */
.lms-admin .lms-admin-card > div[style*="uppercase"] {
  color: #cbd5e1 !important;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   MOBILE (<= 768px) — collapse the desktop rail so it no longer steals a
   third of the narrow viewport, give content full width, and stop the table /
   filter / stat cards / heading from overflowing off-screen.
   ISSUES: 1-0878, 1-0879, 1-0880, 1-0881, 1-0882, 1-0886
   ========================================================================== */
@media (max-width: 768px) {
  /* [P041] ISSUE 1-0878 + 1-0875: Sidebar collapses from a fixed 260px overlay
     to a full-width, auto-height static bar at the top so it no longer clips
     the profile row nor consumes a third of the screen. */
  .lms-admin {
    flex-direction: column;
  }
  .lms-admin .lms-admin__sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .lms-admin .lms-admin__sidebar-profile {
    margin-top: 0; /* no longer needs to be pinned; flows naturally */
  }

  /* [P041] ISSUE 1-0879 + 1-0880: Main content takes the full viewport width
     (no left offset) and uses comfortable mobile padding. */
  .lms-admin .lms-admin__main {
    margin-left: 0 !important;
    padding: 1.25rem !important;
    width: 100%;
  }

  /* [P041] ISSUE 1-0880: H1 no longer mid-word broken / clipped. */
  .lms-admin .lms-admin__title {
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }

  /* [P041] ISSUE 1-0881: KPI stat cards stack vertically instead of overflowing. */
  .lms-admin .lms-admin__main > div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* [P041] ISSUE 1-0882: Filter toolbar stacks full-width on mobile. */
  .lms-admin .lms-admin-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .lms-admin .lms-admin-filter__group,
  .lms-admin .lms-admin-filter__group[style] {
    flex: 1 1 auto !important;
    width: 100%;
  }
  .lms-admin .lms-admin-filter .lms-btn,
  .lms-admin .lms-admin-filter .btn-lms-primary {
    width: 100%;
    justify-content: center;
  }

  /* [P041] ISSUE 1-0879: Table scrolls horizontally inside its own card
     container rather than being clipped by page overflow. */
  .lms-admin .lms-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lms-admin .lms-table {
    min-width: 720px; /* preserve column layout; container scrolls */
  }

  /* [P041] ISSUE 1-0886: Footer summary stays on a single line. */
  .lms-admin .lms-admin-footer > div {
    white-space: nowrap;
  }
}

/* ===== P042.css ===== */
/* P042 — Access denied (system 403) page: /workspace/content-tools
 * body class: route--system-403  (layout-medical / layout-minimalist)
 * Header (.lms-navbar) + footer (.lms-footer) already render in the real
 * themed layout; the only CSS-addressable defects are the lone error
 * message being stranded at the top-left of a near-empty content column
 * with cramped, inconsistent spacing.
 */

/* [P042] ISSUE 1-0895, 1-0892: center the lone 403 message so the content
   column does not read as broken / mostly-empty white space. */
body.route--system-403 .lms-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}

/* [P042] ISSUE 1-0891, 1-0896: give the error message comfortable, balanced
   padding and readable typography instead of a tight one-liner at the edge. */
body.route--system-403 #block-lms-theme-content {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #475569;
}

/* ===== P043.css ===== */
/* ==========================================================================
   P043 — /manage/blog (403 Access denied)  UI fixes
   Active skin: medical | brand: SilverCare
   Page scope: body.route--system-403
   ========================================================================== */

/* [P043] ISSUE 1-0899, 1-0907: vertically center the sparse 403 message
   within the available content height so the page is not a thin strip above
   a huge blank band before the footer. .lms-page__content is already flex:1
   in the flex column .lms-page, so we make it center its child. */
body.route--system-403 .lms-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 320px); /* fill space between header and footer */
  text-align: center;
}

/* Give the bare access-denied text some presence: readable size, max width,
   centered. (A full themed 403 card with heading + CTA needs markup — see
   deferred 1-0898 / 1-0905.) */
body.route--system-403 #block-lms-theme-content {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #334155; /* slate-700 on light bg — WCAG AA on #f6fcff */
}

@media (max-width: 480px) {
  body.route--system-403 .lms-page__content {
    min-height: 60vh;
    padding: 2rem 1.25rem;
  }
}

/* [P043] ISSUE 1-0901, 1-0911: notification bell badge — anchor cleanly to the
   top-right corner (smaller offset so it no longer overlaps the glyph strokes)
   and use a high-contrast red fill for AA-legible white numeral.
   Overrides the template's inline <style> (same specificity, but this partial
   loads after the in-body <style>; class chain raises specificity to be safe). */
.lms-bell-icon-wrapper .lms-bell-counter {
  top: -6px;
  right: -6px;
  background: #dc2626; /* red-600: white text contrast 4.5:1+ */
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
  border: 2px solid #ffffff;
  min-width: 18px;
  min-height: 18px;
  padding: 0 0.3rem;
  font-weight: 700;
  line-height: 1;
}

/* [P043] ISSUE 1-0902: keep the logged-in user name on a single line.
   The label span already declares white-space:nowrap inline, but the flex
   item can still shrink/wrap on tight headers — pin it and cap with ellipsis. */
.lms-mega-menu-wrapper .lms-user-profile-link {
  flex-shrink: 0;
}
.lms-mega-menu-wrapper .lms-user-profile-link > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}

/* [P043] ISSUE 1-0904: align the Workspace control (icon + label button) with
   the inline primary nav items on a common centered baseline. */
.lms-navbar__actions {
  align-items: center;
}
.lms-navbar__actions .lms-btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}

/* [P043] ISSUE 1-0912: footer brand logo renders larger than the identical
   header logo (96px vs 72px). Size the footer mark to match the header for a
   cohesive identity. */
.lms-brand-mark--footer {
  height: 72px;
}
@media (max-width: 576px) {
  .lms-brand-mark--footer {
    height: 56px; /* matches header at this breakpoint */
  }
}

/* [P043] ISSUE 1-0903: footer column headings should share a top alignment.
   The brand column carries logo + description before its "Quick Links" h4,
   pushing it well below the other columns' headings. Reduce that block's
   bottom spacing so the headings sit closer to a common row. */
.lms-footer__brand {
  margin-bottom: 0.25rem;
}
.lms-footer__description {
  margin-bottom: 0.75rem;
}
.lms-footer__col > h4 {
  margin-top: 0;
}

/* [P043] ISSUE 1-0909: balance the footer copyright wrap so phrases like
   "All rights reserved." don't leave an orphan word on the next line. */
.lms-footer__bottom p {
  text-wrap: balance;
}

/* [P043] ISSUE 1-0913: keep the scroll-to-top FAB clear of the footer columns.
   Add page bottom breathing room and ensure it floats above content. The
   medical skin sets position/offsets with !important, so we match for z-index. */
body.route--system-403 .lms-footer {
  padding-bottom: 5rem; /* reserve a gutter so the FAB never overlaps links */
}
body.layout-medical:not(.is-workspace) #lms-back-to-top,
body.layout-medical:not(.is-workspace) .lms-back-to-top {
  z-index: 1300 !important;
}
@media (max-width: 480px) {
  body.route--system-403 .lms-footer {
    padding-bottom: 6rem;
  }
}

/* ===== P044.css ===== */
/* ==========================================================================
   P044 — AI Course Builder (/manage/courses/ai-builder)
   Page scope: body.route--lms-ai-course-builder-form
   Loaded LAST. !important only used to beat inline/utility styles.
   ========================================================================== */

/* [P044] ISSUE 1-0915, 1-0930: Form labels — raise contrast to >=4.5:1 on pale tint */
body.route--lms-ai-course-builder-form .form-item > label,
body.route--lms-ai-course-builder-form .js-form-item > label,
body.route--lms-ai-course-builder-form .form-item label.form-required,
body.route--lms-ai-course-builder-form .form-item label {
  /* #1f2d3d on the ~#f6fcff page tint ≈ 13:1 — well above WCAG AA */
  color: #1f2d3d;
}

/* [P044] ISSUE 1-0914: Restore visual hierarchy — labels are the most prominent text */
body.route--lms-ai-course-builder-form .form-item > label,
body.route--lms-ai-course-builder-form .js-form-item > label {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  display: block;
  margin-bottom: 0.25rem;
}

/* [P044] ISSUE 1-0914, 1-0928: Helper / "Example:" text — visually subordinate (smaller + muted) */
body.route--lms-ai-course-builder-form .form-item .description,
body.route--lms-ai-course-builder-form .js-form-item .description {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* [P044] ISSUE 1-0920: Even vertical rhythm — tight inside a group, larger between groups */
body.route--lms-ai-course-builder-form .form-item,
body.route--lms-ai-course-builder-form .js-form-item {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* [P044] ISSUE 1-0922: Hero heading (intro h2) cut off under the fixed 64px header on mobile.
   Give the main content wrapper room to clear the fixed navbar; also set scroll-margin
   so anchored scrolls don't tuck glyphs under the bar. */
body.route--lms-ai-course-builder-form #main-content.lms-page__content {
  scroll-margin-top: 80px;
}
@media (max-width: 480px) {
  body.route--lms-ai-course-builder-form #main-content.lms-page__content {
    /* navbar height (64px) + breathing gap */
    padding-top: 5rem;
  }
  body.route--lms-ai-course-builder-form #main-content.lms-page__content h1,
  body.route--lms-ai-course-builder-form #main-content.lms-page__content h2 {
    scroll-margin-top: 80px;
    line-height: 1.25;
  }
}

/* [P044] ISSUE 1-0926: Primary "Build My Course!" CTA — replace heavy offset/blurred
   shadow with a clean, centered, low-spread elevation matching other buttons. */
body.route--lms-ai-course-builder-form .form-actions .button,
body.route--lms-ai-course-builder-form .form-actions .form-submit,
body.route--lms-ai-course-builder-form .form-actions input[type="submit"] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
body.route--lms-ai-course-builder-form .form-actions .button:hover,
body.route--lms-ai-course-builder-form .form-actions .form-submit:hover,
body.route--lms-ai-course-builder-form .form-actions input[type="submit"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* [P044] ISSUE 1-0929: Footer link lists — uniform row spacing across all columns
   (QUICK LINKS / COURSE / SUPPORTS / CONTACT INFO). Global footer component. */
.lms-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lms-footer__col ul li {
  margin: 0;
  line-height: 1.5;
}
.lms-footer__col ul li + li {
  margin-top: 0.5rem;
}
.lms-footer__col ul li a {
  display: inline-block;
  padding: 0;
  line-height: 1.5;
}

/* ===== P045.css ===== */
/* ==========================================================================
   P045 — Workspace Reports & Analytics (/workspace/reports)
   Scope: admin layout (.lms-admin) injected by lms-admin-sidebar.html.twig.
   This partial loads LAST; admin styles are inline <style> in the sidebar
   template, so equal-specificity rules win by source order; !important is
   used only to beat element-level inline style="" attributes.
   ========================================================================== */

/* [P045] ISSUE 1-0933, 1-0945: Sidebar brand wordmark contrast (desktop+mobile).
   Brand text "SilverCare" rendered dim against dark sidebar (#161b22).
   Force a near-white, higher-weight wordmark for >= 4.5:1 contrast. */
.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; /* slate-100 on #161b22 -> contrast ~16:1 */
  font-weight: 800;
}

/* [P045] ISSUE 1-0935: Completion-rate cell — stop stacking the % below the bar.
   Place the percent inline to the right of the progress track so rows are
   shorter and the value aligns with the bar it represents.
   Cell = .lms-table td containing the inline progress markup. */
.lms-admin .lms-table td > div[style*="background: #334155"] {
  display: inline-block !important;
  width: calc(100% - 56px) !important;
  vertical-align: middle !important;
  margin-bottom: 0 !important;
}
.lms-admin .lms-table td > div[style*="background: #334155"] + small {
  display: inline-block !important;
  width: 48px;
  margin-left: 8px;
  text-align: right;
  vertical-align: middle !important;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}

/* [P045] ISSUE 1-0938: Numeric column alignment / column rhythm.
   Keep enrollments/completions/rate centered (matches centered headers) and
   tighten oversized cell padding so columns read across cleanly. */
.lms-admin .lms-table th[style*="text-align: center"],
.lms-admin .lms-table td[style*="text-align: center"] {
  text-align: center !important;
}
.lms-admin .lms-table th,
.lms-admin .lms-table td {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* [P045] ISSUE 1-0936: Excess empty band between chart block and table.
   Tighten the chart card's bottom margin and cap the canvas wrapper so the
   table starts closer to the chart. */
.lms-admin #course-analytics .lms-card[style*="margin-bottom: 2rem"] {
  margin-bottom: 1rem !important;
  padding: 1rem 1.25rem !important;
}
.lms-admin #course-analytics canvas#courseAnalyticsChart {
  display: block;
}

/* ==========================================================================
   MOBILE (<= 480px) — root cause for 1-0939..1-0947.
   The sidebar is position:fixed; width:260px and main has margin-left:260px,
   with NO mobile breakpoint, so the fixed sidebar overlays content and squeezes
   it into a ~120px strip. There is no hamburger button in the markup, so a true
   JS off-canvas toggle cannot be added in CSS; instead we un-fix the sidebar so
   it stacks on top and give the content full width — which resolves the
   unreadable/overflowing content (the critical defects).
   ========================================================================== */
@media (max-width: 480px) {

  /* [P045] ISSUE 1-0939: Stack sidebar instead of fixed overlay; free content. */
  .lms-admin {
    flex-direction: column !important;
  }
  .lms-admin .lms-admin__sidebar {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 1;
  }
  /* [P045] ISSUE 1-0939, 1-0940, 1-0941, 1-0943: content takes full width. */
  .lms-admin .lms-admin__main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem !important;
    min-width: 0;
  }

  /* [P045] ISSUE 1-0940: H1 must not break mid-word in the formerly narrow column. */
  .lms-admin .lms-admin__title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 1.4rem;
  }

  /* [P045] ISSUE 1-0941, 1-0947: KPI cards stack full width; consistent icon gap. */
  .lms-admin .lms-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .lms-admin .lms-kpi-card {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .lms-admin .lms-kpi-card__label,
  .lms-admin .lms-kpi-card__value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* [P045] ISSUE 1-0942: Tab bar scrolls horizontally instead of clipping. */
  .lms-admin .lms-report-tabs__list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem !important;
  }
  .lms-admin .lms-report-tabs__item {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* [P045] ISSUE 1-0943: Data tables scroll inside a constrained container
     instead of breaking 1-3 chars per line / inflating page height. */
  .lms-admin .lms-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .lms-admin .lms-table {
    min-width: 640px; /* keep cells readable; container scrolls */
  }

  /* [P045] ISSUE 1-0944: Section header (heading + Export button) stacks
     with spacing; export button goes full width. */
  .lms-admin #course-analytics > div[style*="justify-content: space-between"],
  .lms-admin .lms-report-tab-content > div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .lms-admin .lms-report-tab-content a.btn-lms-primary {
    width: 100%;
    justify-content: center !important;
  }

  /* [P045] ISSUE 1-0946: Remove oversized top band above H1 on mobile. */
  .lms-admin .lms-admin__main > .lms-admin__title:first-child {
    margin-top: 0;
  }
}

/* ===== P046.css ===== */
/* ============================================================
   P046 — AI Platform Settings (/admin/config/lms/ai)
   Page scope: body.path-admin-config-lms-ai
   Form id: lms-ai-settings-form  (fields: edit-default-provider,
   edit-api-key, edit-model, edit-gemini-* )
   ============================================================ */

/* [P046] ISSUE 1-0949: Make all selects share width + chevron spacing */
/* [P046] ISSUE 1-0958: Selects must be full-width within the form column on mobile */
body.path-admin-config-lms-ai .form-select,
body.path-admin-config-lms-ai select.form-element,
body.path-admin-config-lms-ai select {
  width: 100%;
  max-width: 32em;
  min-width: 16em;
  /* keep the native chevron from sitting flush against the text */
  padding-inline-end: 2.25em;
  background-position: right 0.85em center;
}

/* [P046] ISSUE 1-0950: Constrain wide text/password inputs to match the select column */
body.path-admin-config-lms-ai input[type="text"].form-element,
body.path-admin-config-lms-ai input[type="text"].form-text,
body.path-admin-config-lms-ai input[type="password"].form-element,
body.path-admin-config-lms-ai input[type="password"].form-text,
body.path-admin-config-lms-ai input.form-text,
body.path-admin-config-lms-ai input.form-password {
  width: 100%;
  max-width: 32em;
  box-sizing: border-box;
}

/* [P046] ISSUE 1-0951: Bookmark / "add to shortcuts" star icon — raise contrast
   and add a clear interactive hover/focus affordance.
   Gin/Claro shortcut toggle lives in the page title area. */
.region-content .page-title .shortcut-action a,
.shortcut-action.shortcut-action--add a,
.shortcut-action.shortcut-action--remove a,
a.use-ajax.shortcut-action,
.shortcut-wrapper a {
  color: #2c3e50;
  opacity: 1;
}
.region-content .page-title .shortcut-action a svg,
.shortcut-action a svg,
.shortcut-wrapper a svg {
  /* darken the outline stroke from light gray to meet >=3:1 non-text contrast */
  stroke: #2c3e50;
  fill: none;
  color: #2c3e50;
  opacity: 1;
}
.shortcut-action a:hover,
.shortcut-action a:focus-visible,
.shortcut-wrapper a:hover,
.shortcut-wrapper a:focus-visible {
  color: #0b5fff;
}
.shortcut-action a:hover svg,
.shortcut-action a:focus-visible svg,
.shortcut-wrapper a:hover svg,
.shortcut-wrapper a:focus-visible svg {
  stroke: #0b5fff;
  color: #0b5fff;
  fill: #0b5fff;
}
.shortcut-action a:focus-visible,
.shortcut-wrapper a:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* [P046] ISSUE 1-0958: On narrow viewports drop the max-width cap so controls
   fill the content column rather than clipping. */
@media (max-width: 480px) {
  body.path-admin-config-lms-ai .form-select,
  body.path-admin-config-lms-ai select,
  body.path-admin-config-lms-ai input[type="text"].form-text,
  body.path-admin-config-lms-ai input[type="password"].form-text,
  body.path-admin-config-lms-ai input.form-text,
  body.path-admin-config-lms-ai input.form-password {
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== P047.css ===== */
/* ==========================================================================
   P047 — Payment Gateway Settings (/admin/config/everlms/payment)
   Rendered inside the Drupal Claro admin theme.
   Page-scoped fixes target body.path-admin (admin config form region).
   Global form-control fixes use Claro component classes (form-text, details,
   summary, form-item__description) without page scope.
   ========================================================================== */

/* [P047] ISSUE 1-0961, 1-0962: API key inputs clip long values with no scroll
   affordance. Use a slightly tighter monospace face so more of the value fits,
   keep native horizontal scrolling, and reveal the full string on focus by
   making the caret/scroll obvious. text-overflow:clip ensures the browser keeps
   the value horizontally scrollable rather than ambiguously fading it. */
body.path-admin .form-item input.form-text {
  text-overflow: clip;
  overflow-x: auto;
}
body.path-admin .form-item input.form-text:focus {
  /* Clear focus ring so the user knows the field is editable/scrollable. */
  outline: 2px solid #1b6ec2;
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px #1b6ec2;
}

/* [P047] ISSUE 1-0963: Open Stripe details panel has heavier vertical
   whitespace than the thin collapsed sibling rows, creating uneven rhythm.
   Harmonize the expanded panel's inner bottom padding and normalize the gap
   between every details widget so the page reads as an even stack. */
body.path-admin details {
  margin-bottom: 12px;
}
body.path-admin details[open] > .details-wrapper,
body.path-admin details[open] > .claro-details__wrapper {
  padding-top: 12px;
  padding-bottom: 16px;
}
body.path-admin details[open] > .details-wrapper > .form-item:last-child,
body.path-admin details[open] > .claro-details__wrapper > .form-item:last-child {
  margin-bottom: 0;
}

/* [P047] ISSUE 1-0964: Collapsed gateway summary rows give no hover/focus cue
   that they are clickable to expand. Add a pointer cursor, hover background and
   a clearly visible keyboard focus outline on the <summary> elements. */
body.path-admin details > summary {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
body.path-admin details > summary:hover {
  background-color: #eef4fb;
}
body.path-admin details > summary:focus-visible {
  outline: 2px solid #1b6ec2;
  outline-offset: -2px;
  background-color: #eef4fb;
}

/* [P047] ISSUE 1-0965: Field description / help text ("Starts with pk_test_…")
   is light grey on white and falls near/below WCAG AA 4.5:1 for small text.
   Darken the token to #595959 (>= 7:1 on #fff) so help text is legible. */
body.path-admin .form-item__description,
body.path-admin .description,
body.path-admin .form-item .description {
  color: #595959;
}

/* [P047] ISSUE 1-0967: H1 page title wraps awkwardly / fragments on narrow
   viewports. Keep the heading on the content layer with sane wrapping so the
   full "Payment Gateway Settings" reads cleanly (the toolbar-overlap root cause
   is core toolbar behaviour and is deferred). */
@media (max-width: 480px) {
  body.path-admin .page-title,
  body.path-admin h1.page-title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    line-height: 1.2;
  }
}

/* ===== P048.css ===== */
/* P048 — Zoom Configuration settings form (/admin/config/lms/zoom)
   Page-specific rules scoped to the form id class .lms-zoom-settings-form
   and the admin path body class. Global/core toolbar + form-data issues
   (credential masking, help-text content, admin toolbar tray) require
   PHP form / markup / JS changes and are handled outside CSS. */

/* [P048] ISSUE 1-0975: even vertical rhythm between form rows whether or not a #description is present */
.lms-zoom-settings-form .form-item,
.lms-zoom-settings-form .js-form-item {
  /* Consistent block separation so rows without help text don't sit tighter
     than rows that carry a description below the input. */
  margin-top: 0;
  margin-bottom: 1.75rem;
}

/* Reserve description space so the gap below a field with no #description
   matches the gap below a field that has one (keeps Account ID / Client ID
   rhythm equal to Client Secret / Meeting SDK rows). */
.lms-zoom-settings-form .form-item .form-item__description,
.lms-zoom-settings-form .js-form-item .description {
  margin-top: 0.5rem;
  min-height: 1.25em;
  line-height: 1.25;
}

.lms-zoom-settings-form .form-item:not(:has(.form-item__description)):not(:has(.description)) {
  /* Add the equivalent of one description line of breathing room to rows
     that have no help text, restoring an even vertical rhythm. */
  padding-bottom: calc(1.25em + 0.5rem);
}

/* [P048] ISSUE 1-0979: H1 page heading clipped at the top on mobile (tight scroll/offset under fixed toolbar) */
@media (max-width: 480px) {
  body.path-admin {
    /* Account for the fixed admin toolbar so in-page scroll never lands a
       heading flush against the viewport top edge. */
    scroll-padding-top: 4rem;
  }

  body.path-admin .page-title,
  body.path-admin h1.page-title,
  body.path-admin .block-page-title-block h1,
  body.path-admin .region-highlighted + * h1.page-title {
    /* Give the heading real top breathing room so its glyph ascenders are
       not cut off by the content/scroll boundary. */
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    line-height: 1.25;
    overflow: visible;
  }
}

/* ===== P049.css ===== */
/* =====================================================================
   P049 — Course Analytics & Report (/admin/lms/reports/courses)
   Page container: .lms-report-container  (route_class empty in unit)
   Component fixes (form controls) use their own classes.
   This partial loads LAST.
   ===================================================================== */

/* [P049] ISSUE 1-0983: Price Type cells lowercase, inconsistent casing */
/* Raw machine values ("free"/"paid") render lowercase despite .text-uppercase;
   force consistent Title Case to match sibling columns / Status badges. */
.lms-report-container .lms-analytics-table td .text-uppercase {
  text-transform: capitalize !important;
}

/* [P049] ISSUE 1-0987 + 1-0988: Rate (%) bar colors inconsistent + tiny fill invisible */
/* Standardize every completion-rate bar on a single brand accent color so the
   green/orange/gray mix that carried no documented meaning is removed, raise the
   track contrast, and guarantee any non-empty fill stays perceivable. */
.lms-report-container .lms-analytics-table .progress-bar-bg {
  width: 72px;
  height: 8px;
  background: #cfd6dd; /* darker track for clearer contrast vs fill */
  border: 1px solid #b6bfc8;
  border-radius: 4px;
}
.lms-report-container .lms-analytics-table .progress-bar-fill,
.lms-report-container .lms-analytics-table .progress-bar-fill.bg-success,
.lms-report-container .lms-analytics-table .progress-bar-fill.bg-warning {
  background: #1565c0; /* single accent, ~5.7:1 on the track */
  border-radius: 3px;
}
/* Any course with progress > 0 keeps at least a visible sliver. */
.lms-report-container .lms-analytics-table .progress-bar-fill[style*="width"] {
  min-width: 4px;
}
/* Truly-zero rate should read empty, not a min-width sliver. */
.lms-report-container .lms-analytics-table .progress-bar-fill[style*="width: 0%"] {
  min-width: 0;
}
/* Make the numeric value the primary indicator for low-vision users. */
.lms-report-container .lms-analytics-table .progress-text {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #212529;
  min-width: 3.5em;
  text-align: right;
}

/* [P049] ISSUE 1-0989: Filter bar controls incohesive with action buttons */
/* Give Search input, Status select and the Apply/Reset buttons a shared height,
   border, radius and focus treatment so the exposed-filter row reads as one set. */
.lms-report-container .report-filters .form-inline .form-text,
.lms-report-container .report-filters .form-inline .form-select,
.lms-report-container .report-filters .form-inline .button {
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 0 12px;
}
.lms-report-container .report-filters .form-inline .form-text,
.lms-report-container .report-filters .form-inline .form-select {
  background: #fff;
  color: #212529;
}
.lms-report-container .report-filters .form-inline .form-text:focus,
.lms-report-container .report-filters .form-inline .form-select:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
}
.lms-report-container .report-filters .form-inline .button {
  background: #e9ecef;
  color: #212529;
  font-weight: 600;
  cursor: pointer;
}
.lms-report-container .report-filters .form-inline .button:hover {
  background: #dde1e6;
  border-color: #adb5bd;
}
.lms-report-container .report-filters .form-inline .button:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
}

/* [P049] ISSUE 1-0990: Completed / Active counts inconsistent green vs black */
/* Template hardcodes .text-success on every Completed cell while Active cells
   are uncolored, so the green is decorative noise. Normalize both numeric count
   columns to neutral ink for consistent, meaning-free scanning. */
.lms-report-container .lms-analytics-table td.text-right.text-success {
  color: #212529 !important;
}

/* [P049] ISSUE 1-0993: Numeric column headers not on same edge as values */
/* Headers carry .text-right but ensure they hard-align to the value edge. */
.lms-report-container .lms-analytics-table thead th.text-right {
  text-align: right !important;
}

/* [P049] ISSUE 1-0996 + 1-0997: Wide table overflows mobile; badges clipped */
/* The .table-responsive wrapper exists in markup; make it a real horizontal
   scroll container so all columns (and the Published badges) are reachable
   without being clipped by the viewport edge. */
.lms-report-container .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lms-report-container .table-responsive .lms-analytics-table {
  min-width: 760px; /* preserve column structure; scroll instead of squeeze */
}
.lms-report-container .lms-analytics-table .badge {
  white-space: nowrap; /* keep 'Published' on one line, never mid-clipped */
}

/* [P049] ISSUE 1-0998 + 1-0999: Long Title/Category wrap raggedly; uneven rows */
/* Give the text columns a sensible min-width and clamp them to a uniform two
   lines so wrapping is consistent and row heights stay even down the table. */
.lms-report-container .lms-analytics-table td:first-child {
  min-width: 220px;
}
.lms-report-container .lms-analytics-table td:nth-child(2) {
  min-width: 160px;
}
.lms-report-container .lms-analytics-table td:first-child strong,
.lms-report-container .lms-analytics-table td:nth-child(2) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 480px) {
  .lms-report-container {
    padding: 12px;
  }
  .lms-report-container .report-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .lms-report-container .report-filters .form-inline {
    flex-wrap: wrap;
  }
}

/* ===== P050.css ===== */
/* ==========================================================================
   P050 — Notification Broadcast (/admin/lms/notifications/broadcast)
   Form id: #lms-notification-broadcast-form
   Active skin: medical / brand SilverCare
   This partial loads LAST. Page-specific rules scoped to the form id;
   the primary submit button is themed via its component class.
   ========================================================================== */

/* [P050] ISSUE 1-1000, 1-1002, 1-1003: Uniform field width + balanced layout.
   Title/Link inputs were ~640px while the Message textarea stretched to the
   full ~1340px content region, leaving the right half blank and the fields
   misaligned. Constrain the whole form to one balanced column so every
   control shares the same left/right edges. */
#lms-notification-broadcast-form {
  max-width: 760px;
}

#lms-notification-broadcast-form .form-item,
#lms-notification-broadcast-form .form-actions {
  max-width: 100%;
}

#lms-notification-broadcast-form input.form-text,
#lms-notification-broadcast-form input.form-url,
#lms-notification-broadcast-form textarea.form-textarea,
#lms-notification-broadcast-form .form-element {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#lms-notification-broadcast-form textarea.form-textarea {
  min-height: 160px;
}

/* [P050] ISSUE 1-1001: Brand the primary "Send Broadcast" button.
   Replace the default Claro/bright-blue primary with the SilverCare medical
   accent gradient so the admin action matches the product theme. Global
   component scope (button--primary) but limited to the medical layout body. */
body.layout-medical .button--primary,
body.layout-medical .form-actions .button--primary,
body.layout-medical input[type="submit"].button--primary {
  background: linear-gradient(120deg, #0077b6 0%, #0096c7 52%, #48cae4 100%);
  border: 0;
  color: #ffffff;
  border-radius: 10px;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.18);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

body.layout-medical .button--primary:hover,
body.layout-medical .form-actions .button--primary:hover,
body.layout-medical input[type="submit"].button--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(0, 119, 182, 0.26);
}

body.layout-medical .button--primary:focus-visible,
body.layout-medical input[type="submit"].button--primary:focus-visible {
  outline: 3px solid rgba(0, 119, 182, 0.45);
  outline-offset: 2px;
}

/* [P050] ISSUE 1-1003: Gap between required label text and the red asterisk.
   The marker hugged the word; add a small consistent inset. */
#lms-notification-broadcast-form .form-required::after,
#lms-notification-broadcast-form label.form-required::after {
  margin-left: 0.25em;
}

/* [P050] ISSUE 1-1004: Help/description text contrast.
   Light grey on white was below WCAG AA for small body text.
   #595959 on #fff = ~7:1, comfortably above 4.5:1. */
#lms-notification-broadcast-form .form-item .description,
#lms-notification-broadcast-form .description {
  color: #595959;
}

/* [P050] ISSUE 1-1011: Toolbar tray row gutters (mobile).
   The blue expander chevrons crowded the right edge while the left text inset
   was generous. Match right padding to the left text inset for balanced rows.
   Pure-CSS, safe to apply; toolbar markup is core/stable. */
@media (max-width: 480px) {
  .toolbar .toolbar-tray .menu-item > a,
  .toolbar .toolbar-menu li a.toolbar-icon {
    padding-right: 1rem;
  }
  .toolbar .toolbar-tray .toolbar-menu .toolbar-handle {
    right: 0.5rem;
  }
}

/* ===== P051.css ===== */
/* =========================================================================
   P051 — Switch User admin page (/admin/switch-user)
   Form id: #open-switcher-switch-user-form  (Drupal #type => table form)
   Scope page-specific rules to that form; global components (button, pager)
   styled by their component classes within this form context to avoid
   leaking into the rest of the admin UI.
   ========================================================================= */

/* [P051] ISSUE 1-1017: 'Filter' submit button reads as disabled — give it
   clear actionable fill + AA-contrast text. */
#open-switcher-switch-user-form .form-actions .button,
#open-switcher-switch-user-form .form-actions input[type="submit"],
#open-switcher-switch-user-form .form-actions .form-submit {
  background-color: #1d4ed8;
  background-image: none;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  box-shadow: none;
}
#open-switcher-switch-user-form .form-actions .button:hover,
#open-switcher-switch-user-form .form-actions input[type="submit"]:hover,
#open-switcher-switch-user-form .form-actions .form-submit:hover {
  background-color: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
}
#open-switcher-switch-user-form .form-actions .button:focus-visible,
#open-switcher-switch-user-form .form-actions input[type="submit"]:focus-visible,
#open-switcher-switch-user-form .form-actions .form-submit:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* [P051] ISSUE 1-1018, 1-1028: Pager links look like plain text — give all
   pager items a consistent link/button treatment with hover + focus, keep
   the current page distinct. */
#open-switcher-switch-user-form .pager__items,
.pager .pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  padding: 0;
  margin: 1.25rem 0 0;
  list-style: none;
}
#open-switcher-switch-user-form .pager__item a,
.pager .pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #1d4ed8;
  text-decoration: none;
  background: #ffffff;
  line-height: 1;
}
#open-switcher-switch-user-form .pager__item a:hover,
.pager .pager__item a:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
  text-decoration: underline;
}
#open-switcher-switch-user-form .pager__item a:focus-visible,
.pager .pager__item a:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
#open-switcher-switch-user-form .pager__item.is-active a,
#open-switcher-switch-user-form .pager__item--current,
.pager .pager__item.is-active a,
.pager .pager__item--current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 600;
}

/* [P051] ISSUE 1-1013, 1-1026: Status cell — keep the icon + label on a
   single baseline-aligned line (instead of stacked / emoji floating off
   baseline) with even spacing. (Replacing the emoji glyph with a real
   badge needs markup — see deferred.) */
#open-switcher-switch-user-form table td:nth-child(5) {
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.2px;
}

/* [P051] ISSUE 1-1024, 1-1025: Mobile table overflow + uneven row heights
   from wrapping long emails. Allow horizontal scroll with a visible
   affordance and truncate long emails consistently with ellipsis so rows
   keep an even rhythm. */
#open-switcher-switch-user-form .form-item--users,
#open-switcher-switch-user-form > .table-responsive,
#open-switcher-switch-user-form table {
  max-width: 100%;
}
@media (max-width: 768px) {
  /* Wrap the data table in a scroll container if the theme does not. */
  #open-switcher-switch-user-form table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Email column (4th: UID, Username, Email, Roles, Status, Action). */
  #open-switcher-switch-user-form table td:nth-child(3) {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* [P051] ISSUE 1-1027: Mobile — 'Switch' action buttons sit flush against
   the table/viewport edge; add a right gutter. */
@media (max-width: 768px) {
  #open-switcher-switch-user-form table td:last-child,
  #open-switcher-switch-user-form table th:last-child {
    padding-right: 0.85rem;
  }
  #open-switcher-switch-user-form table td:last-child .button {
    margin-right: 0.15rem;
  }
}