Audit and refactor CSS for consistency, clarity, and anti-pattern removal

[cycomachead]

CSS Audit and Refactor: Consistency, Accessibility, and Anti-Pattern Removal

• Pivotal Tracker Story
• Breaking?

Changes

This PR completes a full audit and overhaul of the application's CSS to remove anti-patterns, eliminate dead code, fix dark mode bugs, and achieve consistent accessibility across both themes.

!important removal (68 declarations → 0): The stylesheet had an !important arms race where custom classes like .accessible-text and .dark-form-section forced colors, which forced dark-mode fixes to use !important to win back control. These classes duplicated what Bootstrap 5.3's native dark mode already provides. They've been deleted from both the CSS and the views. Dark-mode colors now flow through Bootstrap's CSS custom properties (--bs-link-color, --bs-pagination-active-bg, --bs-nav-link-color, --bs-btn-*, etc.), and code colors are set via Sass variables ($code-color, $code-color-dark) so Bootstrap generates the correct rules itself.

~330 lines of dead CSS removed: Deleted unused Bootstrap docs examples (.bd-placeholder-img, .b-example-divider, .nav-scroller, .btn-bd-primary, .bd-mode-toggle), app classes with no remaining users (.action-btn, .sidebar-container, .accessible-text, .dark-form-section, .accessible-link, .sr-only, .bg-light-subtle block), and an unimported vendor file (datatables/buttons.bootstrap5.css).

Sidebar state moved to CSS classes: The sidebar had style="position: fixed; ..." inline in the ERB, and sidebar_controller.js toggled style.display directly — which is why the desktop media query needed !important to override it. All visual state is now driven by the expanded class on #sidebar and sidebar-open on body. The JS controller only toggles classes, and a disconnect() hook properly cleans up event listeners.

Bugs fixed:

• Theme toggle gap at 992px: Old min-width: 992px / max-width: 992px queries both hid their toggler at exactly 992px. Replaced custom .color-mode-toggler classes with Bootstrap's d-lg-none / d-none d-lg-block.
• Login button black-on-navy in dark mode: #login-button-index { color: #000 !important } on a btn-primary (Berkeley blue) button gave ~1.6:1 contrast. Removed.
• Mobile sidebar light in dark mode: Hardcoded background: #f8f9fa on .expanded replaced by the theme-aware bg-body-tertiary class.
• Garbled DataTables selector: The .flextensions-table thead th, th.dt-type-numeric, ... selector compiled into rules that matched nothing; rewritten with correct nesting so headings stay centered after DataTables adds per-type alignment classes.
• Sprockets duplicate compilation: manifest.js used link_directory, which compiled _*.scss partials standalone (where Sass variables aren't defined). Now links only application.css.
• Inline styles in views: Replaced style="text-align: center" etc. in _footer.html.erb with Bootstrap utility classes.
• .sr-only → .visually-hidden: Updated all 11 views to use Bootstrap's built-in utility.

Testing

• rspec --tag a11y: 40/40 pass — axe contrast checks on every major page, both light and dark themes, teacher and student roles.
• Full RSpec suite: 574 examples, 6 failures — all 6 also fail on the base branch (pre-existing controller/model spec issues unrelated to CSS).
• Browser walkthrough: courses dashboard, DataTables colvis checkmarks, pagination, form switches, mobile drawer open/close/outside-click/resize-reset — all verified in both themes.

Visual Changes

• Form settings page, dark mode
• Column-visibility dropdown, dark mode
• Column-visibility dropdown, light mode
• Mobile sidebar drawer open
• Courses dashboard, dark mode
• Requests table, dark mode

Documentation

No documentation changes required. The CSS is now self-documenting via inline comments explaining each override and why !important is not needed.

Checklist

• Name of branch corresponds to story

---

Superconductor Ticket Implementation | App Preview | Guided Review