/* ================================================================
   LEAST LMS — Bridge Layer
   Maps legacy css-prefixed classes to the new design token system.

   RULES:
   - Override ONLY visual properties (background, border, color,
     shadow, transition, font-size, font-weight)
   - NEVER change display, float, position, width, height, overflow
   - NEVER remove a legacy class — only enhance it
   - All values reference tokens from tokens.css
   - Loads AFTER all legacy CSS — relies on cascade, not !important

   Dependency: tokens.css must be loaded before this file.
   ================================================================ */


/* ================================================================
   0. PAGE SHELL — body
      Source: style_master.css
      Overrides hardcoded #ffffff background and #37474f body text.
      Without this, the page background stays white regardless of
      which theme is active — dark mode has no visible effect.
   ================================================================ */

body {
  background-color: var(--color-bg);
  color:            var(--color-text);
}


/* ================================================================
   1. PAGE HEADER — cssGeneral_HTMLHeader_Container family
      Source: style_basictypes.css
      Used by: fn_Gen_HTML_Header() — every page
   ================================================================ */

.cssGeneral_HTMLHeader_Container {
  background-color: var(--color-bg-subtle);
  border-bottom:    1px solid var(--color-border);
  /* Replace the heavy inset box-shadow with a subtle lift */
  -webkit-box-shadow: var(--shadow-sm);
  -moz-box-shadow:    var(--shadow-sm);
  box-shadow:         var(--shadow-sm);
}

.cssGeneral_HTMLHeader_Main {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

.cssGeneral_HTMLHeader_Subheading {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color:       var(--color-text-muted);
  /* italic is intentional — keep it */
}


/* ================================================================
   2. BUTTONS — cssButton_* and btnWeb_Button family
      Source: style_buttons.css
      Used by: domain functions across the whole platform

   Strategy: replace gradient backgrounds with flat token colours.
   Keep padding as-is to avoid layout reflow.
   Add min-height for WCAG touch-target improvement (additive).
   Add transition for smooth hover.
   ================================================================ */

/* Shared improvements for all legacy button classes */
.btnWeb_Button,
.cssButton_Blue,
.cssButton_Red,
.cssButton_Green,
.cssButton_Yellow,
.cssButton_Orange,
.cssButton_Purple,
.cssButton_Grey,
.Master_AdminGreen_Button {
  /* Strip all gradient variants — flat fills replace them */
  background-image:            none;
  -webkit-background-image:    none;
  -moz-background-image:       none;
  -o-background-image:         none;
  filter:                      none; /* removes IE gradient filter */

  /* Normalise font */
  font-family: var(--font-family);
  font-size:   var(--font-size-sm);   /* 12px — up from 10px */
  font-weight: var(--font-weight-medium);

  /* Touch target improvement — additive only */
  min-height: 32px;

  /* Token border radius (same value as legacy .5em ~= 8px, no reflow) */
  border-radius: var(--radius-base);

  /* Replace hardcoded box-shadow */
  -webkit-box-shadow: var(--shadow-xs);
  -moz-box-shadow:    var(--shadow-xs);
  box-shadow:         var(--shadow-xs);

  /* Consistent transition */
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    box-shadow       var(--transition-fast);

  text-shadow: none;
  cursor: pointer;
}

/* Focus ring — WCAG 2.4.7 */
.btnWeb_Button:focus-visible,
.cssButton_Blue:focus-visible,
.cssButton_Red:focus-visible,
.cssButton_Green:focus-visible,
.cssButton_Yellow:focus-visible,
.cssButton_Orange:focus-visible,
.cssButton_Purple:focus-visible,
.cssButton_Grey:focus-visible,
.Master_AdminGreen_Button:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}


/* ── Blue (primary action) ───────────────────────────────────── */
.btnWeb_Button,
.cssButton_Blue {
  background:       var(--color-accent);
  border-color:     var(--color-accent);
  color:            var(--color-text-inverse);
}
.btnWeb_Button:hover,
.cssButton_Blue:hover {
  background:   var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color:        var(--color-text-inverse);
  text-decoration: none;
}
.btnWeb_Button:active,
.cssButton_Blue:active {
  background:   var(--color-accent-active);
  border-color: var(--color-accent-active);
  color:        var(--color-text-inverse);
  top:          0; /* remove legacy position:relative;top:1px shift */
}

/* ── Red (destructive / alert) ───────────────────────────────── */
.cssButton_Red {
  background:   var(--color-danger);
  border-color: var(--color-danger);
  color:        var(--color-text-inverse);
}
.cssButton_Red:hover {
  background:   #b91c1c;
  border-color: #b91c1c;
  color:        var(--color-text-inverse);
  text-decoration: none;
}
.cssButton_Red:active {
  color: var(--color-text-inverse);
  top:   0;
}

/* ── Green (success / confirm) ───────────────────────────────── */
.cssButton_Green,
.Master_AdminGreen_Button {
  background:   var(--color-success);
  border-color: var(--color-success);
  color:        var(--color-text-inverse);
}
.cssButton_Green:hover,
.Master_AdminGreen_Button:hover {
  background:   #166534;
  border-color: #166534;
  color:        var(--color-text-inverse);
  text-decoration: none;
}
.cssButton_Green:active { top: 0; }

/* ── Yellow / Gold — contrast fix ───────────────────────────────
   Legacy: white text on #a27900 → contrast 2.5:1 — FAILS AA.
   Bridge: dark text on amber — passes AA.
   ──────────────────────────────────────────────────────────────── */
.cssButton_Yellow {
  background:   var(--color-warning);
  border-color: #b45309;
  color:        var(--color-text);   /* dark text — contrast fix */
}
.cssButton_Yellow:hover {
  background:   #b45309;
  border-color: #92400e;
  color:        var(--color-text);
  text-decoration: none;
}
.cssButton_Yellow:active { top: 0; }

/* ── Orange ──────────────────────────────────────────────────── */
.cssButton_Orange {
  background:   #ea6c00;
  border-color: #c05600;
  color:        var(--color-text-inverse);
}
.cssButton_Orange:hover {
  background:   #c05600;
  border-color: #9a4500;
  color:        var(--color-text-inverse);
  text-decoration: none;
}
.cssButton_Orange:active { top: 0; }

/* ── Purple ──────────────────────────────────────────────────── */
.cssButton_Purple {
  background:   #7c3aed;
  border-color: #6d28d9;
  color:        var(--color-text-inverse);
}
.cssButton_Purple:hover {
  background:   #6d28d9;
  border-color: #5b21b6;
  color:        var(--color-text-inverse);
  text-decoration: none;
}
.cssButton_Purple:active { top: 0; }

/* ── Grey (secondary / neutral) ─────────────────────────────── */
.cssButton_Grey {
  background:   var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color:        var(--color-text);
}
.cssButton_Grey:hover {
  background:   var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color:        var(--color-text);
  text-decoration: none;
}
.cssButton_Grey:active { top: 0; }


/* ================================================================
   3. ADMIN FORM ROWS — divAdminRow family
      Source: style_admin.css
      Used by: all admin settings pages
   ================================================================ */

.divAdminRow {
  border-color: var(--color-border);
  /* Replace heavy 4px shadow with token value */
  box-shadow:   var(--shadow-xs);
}

/* label column */
.divAdminChild1 {
  color:     var(--color-text);
  font-size: var(--font-size-base);
}

/* input column */
.divAdminChild2 {
  font-size: var(--font-size-sm);
}

/* help text column */
.divAdminChild3 {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

.cssAdmin_Title {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}

/* The legacy divAdminBar has background: orange — scope to override.
   This only fires when NewUI is loaded so existing pages are safe. */
.divAdminBar {
  background:   var(--color-bg-subtle);
  border-color: var(--color-border);
}


/* ================================================================
   4. LIST ROWS — cssLI / cssLIItem family
      Source: style_master.css
      Used by: list views throughout platform
   ================================================================ */

/* Header row — upgrade from 10px bold to uppercase label style */
.cssHeaderRow {
  background-color: var(--color-bg-subtle);
  color:            var(--color-text-muted);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  letter-spacing:   var(--letter-spacing-wider);
  text-transform:   uppercase;
}

/* Individual list rows — add separator + hover */
.cssLIItem_Row {
  border-bottom: 1px solid var(--color-border);
  transition:    background-color var(--transition-fast);
}
.cssLIItem_Row:hover {
  background-color: var(--color-bg-subtle);
}

/* Text column tiers */
.cssLIItem_Text1 {
  color: var(--color-text);
}
.cssLIItem_Text2 {
  color: var(--color-text-muted);
}
.cssLIItem_Text3 {
  color:     var(--color-text-subtle);
  font-size: var(--font-size-xs);
}


/* ================================================================
   5. NAVIGATION SIDEBARS — cssLeftSideNav / cssRightSideNav
      Source: style_menus.css
      Used by: fn_Menu_Bars_QuickLinksLeft/Right() — every page
   ================================================================ */

/* Left sidebar panel */
.cssLeftSideNav {
  background-color: var(--color-bg-subtle);
  transition:       width var(--transition-slow);
}

/* Left sidebar links — WCAG fix: #818181 fails AA */
.cssLeftSideNav a {
  color:      var(--color-text-muted);   /* 4.64:1 — passes AA */
  transition: color var(--transition-fast), background-color var(--transition-fast);
  border-radius: var(--radius-base);
}
.cssLeftSideNav a:hover {
  color:            var(--color-text);
  background-color: var(--color-bg-muted);
  text-decoration:  none;
}
.cssLeftSideNav a:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}

/* Right sidebar panel */
.cssRightSideNav {
  background-color: var(--color-surface);
  border-left:      1px solid var(--color-border);
  transition:       width var(--transition-slow);
}
.cssRightSideNav a {
  color:      var(--color-text-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  border-radius: var(--radius-base);
}
.cssRightSideNav a:hover {
  color:            var(--color-text);
  background-color: var(--color-bg-muted);
  text-decoration:  none;
}
.cssRightSideNav a:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}

/* Side-nav icon buttons */
.cssRightSideNavButton {
  transition: background-color var(--transition-fast);
}
.cssRightSideNavButton:hover {
  background-color: var(--color-bg-subtle);
}


/* ================================================================
   6. QUICK LINKS — cssQuickLinks family
      Source: style_admin.css
      Used by: fn_Menu_Bars_QuickLinksLeft() admin panel
   ================================================================ */

.cssQuickLinks_Row {
  transition: background-color var(--transition-fast);
}
.cssQuickLinks_Row:hover {
  background-color: var(--color-bg-subtle);
}

/* Align zebra rows to token */
.cssQuickLinks_OddRow {
  background-color: var(--color-bg-subtle);
}

/* Header row — match cssHeaderRow treatment */
.cssQuickLinks_Header {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted);
}


/* ================================================================
   7. ASSOCIATION MEMBER LISTING
      Source: style_association.css
      Used by: member management pages
   ================================================================ */

.cssAssocListing_Person {
  border-bottom-color: var(--color-border);
  transition: background-color var(--transition-fast);
}
.cssAssocListing_Person:hover {
  background-color: var(--color-bg-subtle);
}

.cssAssocListing_Name,
.cssAssocListing_FunName,
.cssAssocListing_Email {
  color:     var(--color-text);
  font-size: var(--font-size-sm);
}

.cssAssocListing_Role,
.cssAssocListing_DateTime {
  color:     var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.cssAssocListing_Button,
.cssAssocListing_Security,
.cssAssocListing_Remove {
  font-size: var(--font-size-xs);
}


/* ================================================================
   8. FORM CONTROLS — element-level
      Source: style_master.css (browser defaults for input/select/textarea)
      Base state: token background + text colour so controls adapt to
      light/dark themes. Without this, inputs stay white on dark pages.
      Focus ring: WCAG 2.4.7 — additive only, does not change layout.
   ================================================================ */

input,
select,
textarea {
  background-color: var(--color-surface);
  color:            var(--color-text);
  border-color:     var(--color-border-input);   /* #767676 — 4.5:1 on white, meets SC 1.4.11 3:1 */
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:      none;
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-focus);
}


/* ================================================================
   9. MATERIAL / CONTENT ROW
      Source: style_menus.css (cssMaterialContainer)
      Used by: material lists in lessons
   ================================================================ */

.cssMaterialContainer {
  transition: background-color var(--transition-fast);
}
.cssMaterialContainer:hover {
  background-color: var(--color-bg-subtle);
}


/* ================================================================
   10. MISC SHARED PATTERNS
   ================================================================ */

/* Dashboard preselect bar */
.cssDashboard_Preselect {
  background-color: var(--color-bg-subtle);
  border-radius:    var(--radius-md);
}

/* Box metric tiles (style_admin.css cssBox_Container) */
.cssBox_Container {
  border-color:  var(--color-border);
  border-radius: var(--radius-md);
  transition:    box-shadow var(--transition-fast);
}
.cssBox_Container:hover {
  box-shadow: var(--shadow-sm);
}
.cssBox_Title {
  color:     var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.cssBox_Data {
  color:       var(--color-text);
  font-weight: var(--font-weight-bold);
}


/* ================================================================
   11. ICON BUTTONS — cssGeneral_*DivButton_* family
       Source: style_iconbuttons.css
       Used by: fn_Gen_IconButton_Render() — nav tiles platform-wide
       Three structural variants: standard, Wide (full-width tiles),
       HalfWide (48%-column tiles).

       Strategy:
       - Token background + border on each tile InnerDiv
       - Transparent background on span wrappers (clears the legacy
         near-white rgb(254,254,254,0.9) fill that blocks the body bg)
       - Token colour on all Inner size classes so Font Awesome icons
         and text labels inherit the correct foreground colour
       - PNG image inversion for dark mode is in themes/dark.css
   ================================================================ */

/* ── Tile backgrounds — standard, Wide, HalfWide ────────────── */
.cssGeneral_DivButton_InnerDiv,
.cssGeneral_WideDivButton_InnerDiv,
.cssGeneral_HalfWideDivButton_InnerDiv {
  background:   var(--color-bg-muted);
  border-color: var(--color-border);
}

/* ── Hover — replace hardcoded #ddddff with token
   Light: #eff6ff (pale blue, close to original lavender)
   Dark:  #1c2d46 (deep navy blue) ─────────────────────────── */
.cssGeneral_DivButton_InnerDiv:hover,
.cssGeneral_WideDivButton_InnerDiv:hover,
.cssGeneral_HalfWideDivButton_InnerDiv:hover {
  background: var(--color-accent-subtle);
}

/* ── Span wrappers — clear the near-white backdrop ───────────── */
.cssGeneral_DivButton_Span,
.cssGeneral_WideDivButton_Span,
.cssGeneral_HalfWideDivButton_Span {
  color:      var(--color-text);
  background: transparent;
}

/* ── Icon + label colour — all inner size classes ────────────── */
.cssIconButton_SizeAll_Inner,
.cssIconButton_WideSizeAll_Inner,
.cssIconButton_HalfWideSizeAll_Inner,
.cssIconButton_Size1_Inner,
.cssIconButton_Size2_Inner,
.cssIconButton_Size3_Inner,
.cssIconButton_Size4_Inner,
.cssIconButton_Size5_Inner,
.cssIconButton_Size6_Inner,
.cssIconButton_Listing_Inner {
  color: var(--color-text);
}

/* ── Picture tile (image-background variant) ─────────────────── */
.cssGeneral_DivButton_Picture_InnerDiv {
  background-color: var(--color-bg-muted);
  border-color:     var(--color-border);
}


/* ================================================================
   12. COLLECTION INTERACTION ROWS — cssInteractions_* family
       Source: style_collection_default.css
       Used by: interaction logs in collection use/admin views
       Zebra rows use hardcoded #efefef/#ffffff — invisible in dark mode.
   ================================================================ */

.cssInteractions_Row:nth-child(even) {
  background: var(--color-bg-subtle);
}
.cssInteractions_Row:nth-child(odd) {
  background: var(--color-surface);
}

.cssInteractions_Header {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  background:     var(--color-bg-subtle);
}

.cssInteractions_Button {
  transition: background-color var(--transition-fast);
}


/* ================================================================
   13. PROFILE DISPLAY — cssTopBox family
       Source: style_admin.css
       Used by: user settings Appearance tab header
   ================================================================ */

.cssTopBox_Right {
  color:       var(--color-text);
  font-size:   var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}


/* ================================================================
   14. PERMISSIONS MATRIX — table-header-rotated
       Source: style_association.css
       Used by: association permission management grid
       Hardcoded #dddddd borders are invisible in dark mode.
   ================================================================ */

.table-header-rotated td {
  border-top-color:   var(--color-border);
  border-left-color:  var(--color-border);
  border-right-color: var(--color-border);
}

.table-header-rotated th.rotate-45 > div {
  border-left-color:  var(--color-border);
  border-right-color: var(--color-border);
  border-top-color:   var(--color-border);
}


/* ================================================================
   15. CHECKBOX LABELS — divCheckbox family
       Source: style_admin.css
       Used by: all checkbox input groups in admin forms
   ================================================================ */

.divCheckbox_Label {
  color:     var(--color-text);
  font-size: var(--font-size-base);
}


/* ================================================================
   16. FONT AWESOME ICONS — style_fa_overrides.css
       fa_overrides.css forces color: #000000 on all base FA classes,
       which overrides inheritance from parent elements. This makes
       icons invisible on dark tile backgrounds (e.g. icon tiles in
       dark mode show black icons on near-black surfaces).

       Restoring inheritance lets icons adopt the colour of their
       parent context — tile inner divs, buttons, nav links — which
       are already tokenised in sections above. No explicit colour
       value is set here so context always wins.

       fa-youtube, fa-archway: brand/semantic colours kept in
       fa_overrides.css — not overridden here.
   ================================================================ */

.far,
.fas,
.fab,
.fal,
.fad,
.fa-newspaper,
.fa-star,
.fa-align-justify {
  color: inherit;
}


/* ================================================================
   17. LOGIN PAGE PANELS — cssLogin_* family
       Source: style_login.css
       Used by: /login/login.php — the unauthenticated entry point
       Cards use rgba(255,255,255,0.8) — renders as opaque white in dark
       mode. Input overrides have specificity 0,0,1,1 so they need
       explicit rules here to beat the style_login.css declarations.
   ================================================================ */

.cssLogin_TopBanner,
.cssLogin_Or,
.cssLogin_Username_Text,
.cssLogin_Username_Box,
.cssLogin_Password_Text {
  background: var(--color-surface);
}

.cssLogin_Username_Box input,
.cssLogin_Password_Box input {
  background-color: var(--color-surface);
  color:            var(--color-text);
}

.cssToolbox_Select {
  background-color: var(--color-bg-subtle);
  border-color:     var(--color-border);
}

.profile {
  background-color: var(--color-surface);
  border-color:     var(--color-border);
}


/* ================================================================
   18. LIST ROWS — .cssLI / .cssLIItem_Row family
       Source: style_master.css
       Used by: list rendering throughout the platform — nearly every page
       background: white hardcoded — jarring against dark page backgrounds.
   ================================================================ */

.cssLI,
.cssLIItem_Row {
  background-color: var(--color-surface);
}


/* ================================================================
   19. LINK COLOURS — a, a:visited
       Source: style_master.css
       The explicit color: #000 rule overrides body-colour inheritance,
       making links black on dark backgrounds. Bridge to text token so
       links remain readable in all themes.
   ================================================================ */

a {
  color: var(--color-text);
}
a:visited {
  color: var(--color-text-muted);
}


/* ================================================================
   20. SECTION DIVIDER — .cssDivider
       Source: style_iconbuttons.css
       Silver linear-gradient hardcoded — wrong on dark backgrounds.
       Flattened to token surface colour; gradient and IE filter removed.
   ================================================================ */

.cssDivider {
  background:       var(--color-bg-subtle);
  background-image: none;
  filter:           none;
}


/* ================================================================
   21. HEADER ROW — .cssHeaderRow
       Section 4 already has the full declaration including typography.
       Duplicate removed.
   ================================================================ */


/* ================================================================
   22. ATTENTION TEXT — .drawAttention2
       Source: style_basictypes.css
       color: #000000 hardcoded — invisible on dark backgrounds.
       .drawAttention (red) is semantic — not changed here.
   ================================================================ */

.drawAttention2 {
  color: var(--color-text);
}


/* ================================================================
   23. LESSON VIEWER — cssLesson_* / divLesson* family
       Source: style_lesson.css
       Used by: lesson listing and viewer pages
   ================================================================ */

.cssLesson_Main_Titles,
.cssLesson_Listing_Lessons {
  background: var(--color-surface);
}

.cssLesson_Listing_Lessons {
  border-bottom-color: var(--color-border);
}

.cssLesson_Listing_Lessons_Title {
  background: var(--color-bg-subtle);
}

.divLessonContainer {
  background-color: var(--color-surface);
}

.divLesson_Banner,
.divLesson_Notes,
.divBoxShadow {
  background: var(--color-bg-subtle);
}


/* ================================================================
   24. COLLECTION — cssCollection_* / cssReorder_* / cssQuickC_* family
       Source: style_collection.css
       Used by: collection browsing, admin, and workflow pages
   ================================================================ */

.cssCollection_ActionBlock {
  background: var(--color-bg-subtle);
}

.cssCollection_ListingBox_LI:nth-child(even) {
  background: var(--color-bg-subtle);
}

.cssReorder_UL {
  background-color: var(--color-bg-subtle);
}

.cssReorder_LI {
  background-color: var(--color-surface);
}

.cssColDataDash_Row:nth-child(even) {
  background: var(--color-bg-subtle);
}

.cssCollection_Wizard_Column2,
.cssCollection_Wizard_Column3,
.cssCollection_Wizard_Column4 {
  border-left-color: var(--color-border);
}

.cssQuickC_Row:nth-child(odd) {
  background: var(--color-bg-muted);
}

.cssQuickC_Row:nth-child(even) {
  background: var(--color-bg-subtle);
}


/* ================================================================
   25. DASHBOARD — cssDashboard_* / cssDragable_* family
       Source: style_dashboard.css
       Used by: user dashboard page
   ================================================================ */

.cssDashboards_Main_GradientFill {
  background:       var(--color-bg-subtle);
  background-image: none;
  filter:           none;
}

.cssDragable_DIV {
  background-color: var(--color-surface);
}

.cssDragable_LI {
  border-color: var(--color-border);
}

.cssSearchWord {
  background: var(--color-bg-subtle);
}

.cssSearchWord:hover {
  background: var(--color-bg-muted);
}

.quote-box {
  background-color: var(--color-surface);
}


/* ================================================================
   26. QUIZ RENDER — cssQuiz_* / cssCitationBox family
       Source: style_quiz_render.css
       Used by: quiz player and welcome screen
       NOTE: .cssQuiz_Redacted sets bg and colour both to #37474f
       deliberately (redaction-reveal effect) — not overridden here.
   ================================================================ */

/* Info card panels — white bg + explicit #37474f text colour */
.cssQuiz_Welcome_Supplies,
.cssQuiz_Welcome_QuizCredit,
.cssQuiz_Button,
.cssCitationBox {
  background: var(--color-surface);
  color:      var(--color-text);
}

/* Start panel — #f1f1ff light lavender → subtle surface */
.cssQuiz_Welcome_Start_Container {
  background: var(--color-bg-subtle);
}

/* Text elements with explicit #37474f colour */
.cssQuiz_Welcome_Image_Container,
.cssQuiz_Restart,
.cssQuiz_Notes_Text,
.cssQuiz_Link_Text {
  color: var(--color-text);
}

/* Quiz link family — all states hardcoded to #37474f */
.cssQuiz_Link,
.cssQuiz_Link:link,
.cssQuiz_Link:visited,
.cssQuiz_Link:hover,
.cssQuiz_Link:active,
.cssQuiz_Restart a {
  color: var(--color-text);
}


/* ================================================================
   27. MATERIAL VIEWER — cssMaterial_Unavailable_* family
       Source: style_material.css
       C-76 — WCAG 1.4.3 / 1.4.11 contrast fixes
       .cssMaterial_Unavailable_Icon  #bbbbbb on #f8f8f8 = 1.73:1 (icon, needs 3:1)
       .cssMaterial_Unavailable_Note  #999999 on #f8f8f8 = 2.48:1 (text, needs 4.5:1)
   ================================================================ */

.cssMaterial_Unavailable {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}
.cssMaterial_Unavailable_Icon {
  color: var(--color-text-muted); /* was #bbbbbb — 1.73:1 FAIL */
}
.cssMaterial_Unavailable_Note {
  color: var(--color-text-muted); /* was #999999 — 2.48:1 FAIL */
}

/* ================================================================
   28. FA ICON OVERRIDES — .fa-archway dashboard icon
       Source: style_fa_overrides.css
       C-76 — WCAG 1.4.11 non-text contrast fix
       .fa-archway  #dedede on white = 1.41:1 (icon, needs 3:1)
   ================================================================ */

.fa-archway {
  color: var(--color-text-muted); /* was #dedede — 1.41:1 FAIL */
}

/* ================================================================
   29. KEYRING BOOKSHELF — .bk-page nav pagination dots
       Source: style_keyring_bookshelf.css
       C-76 — WCAG 1.4.11 non-text contrast fix
       .bk-page nav span  #aaa on #f0f0f0 = 2.04:1 (UI component, needs 3:1)
   ================================================================ */

.bk-page nav span {
  color: var(--color-text-muted);        /* was #aaa — 2.04:1 FAIL */
  background: var(--color-border-input); /* was #f0f0f0; darker token improves icon contrast */
}

/* ================================================================
   30. JSPLUMB WORKFLOW CANVAS — group title label
       Source: style_jsplumb.css
       C-76 — WCAG 1.4.3 contrast fix
       .wwl-wfm-group-title  #888 on white = 3.54:1 (small bold text, needs 4.5:1)
   ================================================================ */

.wwl-wfm-group-title {
  color: var(--color-text-muted); /* was #888 — 3.54:1 FAIL */
}

/* ================================================================
   C-60 — WCAG 2.1 SC 2.4.7 Focus Visible
   Bare <a> and bare <button> elements not covered by the
   cssButton_*/btnWeb_Button rules above.
   Sidebar nav links already covered in sections 6–7.
   ================================================================ */

a:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius:  2px;
}

button:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}