/* ================================================================
   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 is handled by style_basictypes.css (frosted glass + fallback).
     Bridge upgrades only the border and shadow to token values. */
  border-bottom:    1px solid var(--color-border);
  -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, 0 0 0 3px rgba(37, 99, 235, 0.4));
}


/* ── 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:   var(--color-danger, #b91c1c);
  border-color: var(--color-danger, #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:   var(--color-success-hover, #166534);
  border-color: var(--color-success-hover, #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: var(--color-warning-text);
  color:        var(--color-text);   /* dark text — contrast fix */
}
.cssButton_Yellow:hover {
  background:   var(--color-warning-text);
  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; }

/* ── .btn-flip override — must live here, not style_buttons.css ────
   This file loads after style_buttons.css and reasserts `color` on
   every .cssButton_* class above, so a same-specificity `color` rule
   in style_buttons.css never wins. Hides the real button text so
   only the ::before/::after flip faces (attr(data-front/back)) show.
   ───────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn-flip {
    color: transparent;
  }
}

/* ================================================================
   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);
  /* P53 — var(--color-text-muted) is only AA-safe against a white ancestor;
     some admin rows sit on tinted backgrounds (e.g. --color-border reused as a
     background, ~#cbd5e1) where it drops below 4.5:1. #495057 clears AA against
     white, #f1f5f9, and #cbd5e1 — matches the fallback in style_admin.css,
     which this rule overrides (bridge.css loads after lib/style/). */
  color:     #495057;
}

.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, 0 0 0 3px rgba(37, 99, 235, 0.4));
}

/* 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, 0 0 0 3px rgba(37, 99, 235, 0.4));
}

/* 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, 0 0 0 3px rgba(37, 99, 235, 0.4));
}


/* ================================================================
   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 — background and blur handled by style_menus.css */
.cssDashboard_Preselect {
  background-color: transparent;
  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-accent-subtle);
  border-color: var(--color-border-input);
  color: var(--color-accent-text);
}

.cssSearchWord:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  text-decoration: underline;
}

.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, 0 0 0 3px rgba(37, 99, 235, 0.4));
}


/* ================================================================
   31. HARDCODED WHITE / NEAR-WHITE BACKGROUNDS
       Source: style_menus.css, style_master.css
       These all used literal white values that look wrong in neon/dark.
   ================================================================ */

/* Side-nav close buttons (bridge handles parent navs; these need explicit override) */
.cssLeftSideNav .closebtn,
.cssRightSideNav .closebtn {
  background:   var(--color-bg-subtle);
  border-color: var(--color-border);
  color:        var(--color-text);
}

/* Material list row hover */
.cssMaterialContainer:hover {
  background: var(--color-bg-subtle);
}

/* <figure> element — used in rich content blocks */
figure {
  background: var(--color-bg-subtle);
}

/* Discover lesson cards */
.cssDiscover_LessonCard {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-text);
}

/* Requests bar and drag-reorder list items */
.divRequests_Bar,
.cssReorder_LI {
  background-color: var(--color-surface);
}

/* ================================================================
   32. LESSON MODE TOGGLE — cssLesson_ModeBtn / cssLesson_ModeBtn_Active
       Source: style_lesson.css
       Also covers cssLesson_AI_Markup_Inline left-border accent.
   ================================================================ */

.cssLesson_ModeBtn {
  background:   var(--color-bg-subtle, #f4f4f4);
  border-color: var(--color-border, #ccc);
  color:        var(--color-text, #37474f);
}
/* Active pill — neon/dark override to outline style (see those theme files) */
.cssLesson_ModeBtn_Active {
  background:   var(--color-accent, #2563eb);
  border-color: var(--color-accent, #2563eb);
  color:        #fff;
}
/* AI markup inline block */
.cssLesson_AI_Markup_Inline {
  background:        var(--color-bg-subtle, #fafaf8);
  border-left-color: var(--color-accent, #6c63ff);
}


/* Trust panel badge pills — base (light theme) */
.cssTrustPanel_Badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.cssTrustPanel_Badge--human    { background: #1a7a44; }
/* A11Y-07: darkened for 4.5:1 white-text contrast (was #2980b9, ~4.30:1) */
.cssTrustPanel_Badge--reviewed { background: #1f6690; }
/* A11Y-07: darkened for 4.5:1 white-text contrast (was #e67e22, ~2.85:1) */
.cssTrustPanel_Badge--ai       { background: #a85a13; }

/* Material page banner — translucent overlay on top of banner image */
.cssMaterial_Banner_Container {
  background: var(--material-overlay-bg);
}

/* Inline reaction bar (M-02) */
.cssMaterial_ReactionBar {
  background:    var(--color-bg-subtle);
  border-top:    1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Reaction pill buttons */
.cssMaterial_ReactionBtn {
  background:   var(--color-surface);
  border-color: var(--color-border);
  color:        var(--color-text-muted);
}
.cssMaterial_ReactionBtn:hover {
  background:   var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color:        var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* SP-01: accessible label text for inputs that already have a visible
   placeholder/context (e.g. the Q&A "Ask a Question" textarea) — present to
   assistive tech, not shown on screen. Standard clip-based sr-only pattern. */
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   D5 2026-08-02 — error/danger text directly on the page background
   unsubscribe.php's "no token provided" message used a hardcoded #c0392b,
   which is 4.5:1+ on light/modern themes but only ~3.4-3.65:1 on the two
   dark-background themes (dark #0d1117, neon #08090f) — both AA fails.
   #ff6b6b is already the established dark-background danger-text color
   used elsewhere in this codebase (style_ekos.css's neon IFQ-badge
   override) — reused here rather than inventing a new value.

   P71-A15 — these were plain hardcoded hex with no single source of
   truth (Frontend Architect flagged this as reintroducing the exact
   anti-pattern closed elsewhere in the 08-02 fix pass). Not switched to
   tokens.css's --color-danger/--color-success directly: those values are
   tuned for light-theme button/badge contrast and are NOT re-themed for
   dark/neon in Bridge mode (Bridge only loads tokens.css + bridge.css —
   the per-theme overrides for those tokens live in ui-redesign/themes/
   dark.css, which Bridge never loads) — reusing them as-is here would
   silently reintroduce the same AA failure this block exists to fix.
   Local custom properties instead give these Bridge-only text colors one
   definition each, swapped per-theme the same way the rest of this file
   already does it.
   ================================================================ */
:root {
  --bridge-text-danger:       #c0392b;
  --bridge-text-danger-dark:  #ff6b6b;
  --bridge-text-success:      #006600;
  --bridge-text-success-dark: #4ade80;
  --bridge-text-hint:         #666;
  --bridge-text-hint-dark:    #9ca3af;
}
.cssText_Danger {
  color: var(--bridge-text-danger);
}
[data-theme="dark"] .cssText_Danger,
[data-theme="neon"] .cssText_Danger {
  color: var(--bridge-text-danger-dark);
}

/* P71-A1 — unsubscribe.php's other two inline text colors had the same
   theme-blind bug as cssText_Danger above, just never caught in the same
   pass: #006600 (success) measures ~2.61:1 on dark/neon backgrounds and
   #666 (hint) measures ~3.30:1 — both AA fails for normal-size text
   (needs 4.5:1). The dark-theme values were computed against both
   dark-theme backgrounds (~10.9:1 and ~7.5:1); light-theme values are
   unchanged since those already pass. */
.cssText_Success {
  color: var(--bridge-text-success);
}
[data-theme="dark"] .cssText_Success,
[data-theme="neon"] .cssText_Success {
  color: var(--bridge-text-success-dark);
}

.cssText_Hint {
  color: var(--bridge-text-hint);
}
[data-theme="dark"] .cssText_Hint,
[data-theme="neon"] .cssText_Hint {
  color: var(--bridge-text-hint-dark);
}

/* ================================================================
   33. UI-CARD / UI-SCOPE — REV0804-10
       base.css and components.css are skipped entirely in Bridge
       mode (fn_general_engine_includes.php only loads tokens.css +
       bridge.css when $strNewUI_Theme === "bridge"), but several
       admin pages (skill-gaps.php, training-effectiveness.php,
       skills-taxonomy.php, role-skill-profiles.php) markup with
       .ui-scope / .ui-card / .ui-card-header / .ui-card-body and
       resolve to Bridge by default. Without these rules the cards
       render as unstyled stacked divs.

       This is a deliberately minimal subset of components.css —
       just enough for the card to read as a card — not a full port.
       Values reuse the same tokens components.css uses for these
       exact rules, so Bridge stays visually consistent with the
       full NewUI stack. No selector below exists elsewhere in this
       file, so nothing here overrides an existing Bridge rule.
   ================================================================ */

.ui-scope {
  box-sizing: border-box;
}

.ui-card {
  box-sizing:       border-box;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       var(--shadow-xs);
  overflow:         hidden;
}

.ui-card-header {
  box-sizing:    border-box;
  padding:       var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-strong);
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text);
}

.ui-card-body {
  box-sizing: border-box;
  padding:    var(--space-5);
}

/* ================================================================
   34. UI-BTN — D5 #2099 (REV0906-03)
       Same failure mode as the UI-CARD gap-fill above, for a different
       class: .ui-btn is used as the primary call-to-action across 12
       files (e.g. learner/learning-paths.php's Enroll button) but has
       no matching rule anywhere -- not gated behind a missing option
       token like .cssTableReport, simply never defined at all. Reuses
       .btn's own values from components.css so a page using .ui-btn
       reads identically whether it resolves to Bridge or full NewUI.
   ================================================================ */

.ui-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-4);
  font-family:     var(--font-family);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-tight);
  min-height:      36px;
  border-radius:   var(--radius-base);
  border:          1px solid var(--color-accent);
  background-color: var(--color-accent);
  color:           var(--color-text-inverse);
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  user-select:     none;
  vertical-align:  middle;
}

.ui-btn:hover {
  background-color: var(--color-accent);
  border-color:      var(--color-accent);
  opacity: 0.9;
}

.ui-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ui-btn:disabled,
.ui-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}