/* =====================================================================
   PSAU Code Campus LMS · Global Light Mode Accessibility v2.8.5
   ---------------------------------------------------------------------
   Full-system readability pass.

   Goals:
   - no washed-out secondary text on light surfaces
   - minimum readable helper/meta text
   - stronger semantic chip colors
   - consistent contrast across old + new modules
   - mobile-friendly typography
   - preserve intentional dark code/game surfaces
   ===================================================================== */

:root[data-theme="light"]{
  --cc-light-text:#102137;
  --cc-light-body:#334b64;
  --cc-light-muted:#506981;
  --cc-light-subtle:#5f758d;
  --cc-light-faint:#6a7f96;
  --cc-light-border:#d3dfeb;
  --cc-light-soft:#f6f9fd;
  --cc-light-soft-2:#eef4fa;

  --cc-info:#087f9d;
  --cc-success:#187955;
  --cc-warning:#805d08;
  --cc-danger:#a7374d;
  --cc-purple:#5949b8;
}

/* =====================================================================
   GLOBAL READABILITY FLOOR
   ===================================================================== */

/* The original system contains many 6–10 px metadata labels.
   In Light Mode, do not allow semantic <small> text to become microscopic. */
:root[data-theme="light"] .content small,
:root[data-theme="light"] .premium-content small,
:root[data-theme="light"] .public-shell small,
:root[data-theme="light"] .modal-card small{
  font-size:11.5px!important;
  line-height:1.45!important;
}

/* Generic helper class should remain readable. */
:root[data-theme="light"] .content .tiny,
:root[data-theme="light"] .premium-content .tiny,
:root[data-theme="light"] .public-shell .tiny{
  font-size:12px!important;
  line-height:1.45!important;
}

/* Common metadata/helper naming patterns across modules. */
:root[data-theme="light"] .content :is(
  [class*="-meta"],
  [class*="-caption"],
  [class*="-subtitle"],
  [class*="-description"],
  [class*="-helper"],
  [class*="-hint"]
),
:root[data-theme="light"] .premium-content :is(
  [class*="-meta"],
  [class*="-caption"],
  [class*="-subtitle"],
  [class*="-description"],
  [class*="-helper"],
  [class*="-hint"]
){
  color:var(--cc-light-muted)!important;
}

/* Generic muted copy that was too pale in several legacy pages. */
:root[data-theme="light"] .content .muted,
:root[data-theme="light"] .premium-content .muted,
:root[data-theme="light"] .side-panel .muted,
:root[data-theme="light"] .panel .muted{
  color:var(--cc-light-muted)!important;
}

/* Form labels/helper copy. */
:root[data-theme="light"] .content label,
:root[data-theme="light"] .premium-content label,
:root[data-theme="light"] .modal-card label{
  color:#4d667f!important;
  font-size:max(12px,.76rem)!important;
}

:root[data-theme="light"] .content label small,
:root[data-theme="light"] .premium-content label small,
:root[data-theme="light"] .modal-card label small{
  color:var(--cc-light-muted)!important;
  font-weight:550!important;
}

/* Tables/gradebook/list data. */
:root[data-theme="light"] table th{
  color:#455f79!important;
}

:root[data-theme="light"] table td{
  color:#1e354e!important;
}

:root[data-theme="light"] table td small,
:root[data-theme="light"] table th small{
  color:var(--cc-light-muted)!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .metric-line{
  color:#203950!important;
}

:root[data-theme="light"] .metric-line span{
  color:var(--cc-light-muted)!important;
}

/* =====================================================================
   GLOBAL BADGES / STATUS COLORS
   Bright neon colors were attractive in Dark Mode but too faint on white.
   ===================================================================== */
:root[data-theme="light"] .badge{
  color:#415b74!important;
  border-color:#cedae6!important;
  background:#f6f9fc!important;
  font-size:11px!important;
}

:root[data-theme="light"] .badge.info{
  color:var(--cc-info)!important;
  border-color:rgba(8,127,157,.20)!important;
  background:rgba(8,127,157,.07)!important;
}

:root[data-theme="light"] .badge.success{
  color:var(--cc-success)!important;
  border-color:rgba(24,121,85,.20)!important;
  background:rgba(24,121,85,.07)!important;
}

:root[data-theme="light"] .badge.warning{
  color:var(--cc-warning)!important;
  border-color:rgba(128,93,8,.20)!important;
  background:rgba(183,137,25,.08)!important;
}

:root[data-theme="light"] .badge.danger{
  color:var(--cc-danger)!important;
  border-color:rgba(167,55,77,.20)!important;
  background:rgba(167,55,77,.065)!important;
}

/* =====================================================================
   COURSE / CLASS PAGE — screenshot-critical
   ===================================================================== */
:root[data-theme="light"] .course-banner p,
:root[data-theme="light"] .stream-course-banner p{
  color:#526b84!important;
}

:root[data-theme="light"] .student-course-progress-summary-v200{
  background:#f7fafd!important;
  border-color:var(--cc-light-border)!important;
}

:root[data-theme="light"] .student-course-progress-summary-v200>div:first-child{
  color:#4f6982!important;
  font-size:11px!important;
}

:root[data-theme="light"] .student-course-progress-summary-v200>div:first-child>b{
  color:#172d45!important;
  font-size:12px!important;
}

:root[data-theme="light"] .student-course-progress-summary-v200>small{
  color:#566f87!important;
  font-size:11px!important;
}

:root[data-theme="light"] .stream-course-tabs>button,
:root[data-theme="light"] .student-course-nav-v200>button,
:root[data-theme="light"] .student-course-nav-link-v200{
  color:#4c6680!important;
  font-size:12px!important;
}

:root[data-theme="light"] .stream-course-tabs>button.active,
:root[data-theme="light"] .student-course-nav-v200>button.active,
:root[data-theme="light"] .student-course-nav-link-v200.active{
  color:#173149!important;
}

:root[data-theme="light"] .stream-course-tabs>button>i,
:root[data-theme="light"] .student-course-nav-v200>button>i{
  color:var(--cc-purple)!important;
  background:rgba(89,73,184,.09)!important;
  font-size:10.5px!important;
}

/* Stream post author/timestamp/body/comments. */
:root[data-theme="light"] .stream-author-info b{
  color:#172c44!important;
}

:root[data-theme="light"] .stream-author-info>div>span{
  color:var(--cc-info)!important;
  background:rgba(8,127,157,.06)!important;
  border-color:rgba(8,127,157,.15)!important;
  font-size:10.5px!important;
}

:root[data-theme="light"] .stream-author-info small{
  color:#586f87!important;
}

:root[data-theme="light"] .stream-post-message{
  color:#415b74!important;
  font-size:max(12px,.72rem)!important;
}

:root[data-theme="light"] .stream-comment-toggle,
:root[data-theme="light"] .stream-post-footer,
:root[data-theme="light"] .stream-post-footer.comments-off{
  color:#536c85!important;
}

:root[data-theme="light"] .stream-comment-toggle{
  font-size:12px!important;
}

:root[data-theme="light"] .stream-comment-bubble b{
  color:#1c344d!important;
}

:root[data-theme="light"] .stream-comment-bubble small,
:root[data-theme="light"] .stream-comment-bubble p{
  color:#536c85!important;
}

:root[data-theme="light"] .stream-class-title span{
  color:#4f6982!important;
}

:root[data-theme="light"] .stream-compose-author span,
:root[data-theme="light"] .stream-dropzone,
:root[data-theme="light"] .stream-dropzone span,
:root[data-theme="light"] .stream-preview-meta span{
  color:#566f87!important;
}

/* Student side rail: progress, coming up, class info. */
:root[data-theme="light"] .student-class-progress-card-v200 p{
  color:#536c85!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-class-side-head-v200>a{
  color:var(--cc-info)!important;
  font-size:11px!important;
}

:root[data-theme="light"] .student-class-upcoming-v200 b{
  color:#203850!important;
  font-size:12px!important;
}

:root[data-theme="light"] .student-class-upcoming-v200 small{
  color:#566f87!important;
  font-size:11px!important;
}

:root[data-theme="light"] .student-class-caught-up-v200{
  color:#536c85!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-class-info-v200 h3{
  color:var(--cc-info)!important;
}

:root[data-theme="light"] .student-class-info-v200 p{
  color:#4f6982!important;
  font-size:12px!important;
}

:root[data-theme="light"] .student-class-info-v200>div{
  color:#203950!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-class-info-v200>div>span{
  color:#566f87!important;
}

/* =====================================================================
   STUDENT DASHBOARD / COURSE CARDS / RESOURCE CARDS
   ===================================================================== */
:root[data-theme="light"] .student-progress-ring-v200 span,
:root[data-theme="light"] .student-progress-caption-v200 span,
:root[data-theme="light"] .student-next-copy-v200 p,
:root[data-theme="light"] .student-section-head-v200>span,
:root[data-theme="light"] .student-course-card-copy-v200 p,
:root[data-theme="light"] .student-course-progress-v200>div:first-child,
:root[data-theme="light"] .student-course-progress-v200>small,
:root[data-theme="light"] .student-course-next-v200 small,
:root[data-theme="light"] .student-course-next-v200 em,
:root[data-theme="light"] .student-empty-courses-v200 p,
:root[data-theme="light"] .student-pending-v200 span,
:root[data-theme="light"] .student-resource-meta-v200,
:root[data-theme="light"] .student-resource-empty-v200 p{
  color:#536c85!important;
}

:root[data-theme="light"] .student-progress-ring-v200 span,
:root[data-theme="light"] .student-progress-caption-v200 span,
:root[data-theme="light"] .student-section-head-v200>span,
:root[data-theme="light"] .student-course-progress-v200>div:first-child,
:root[data-theme="light"] .student-course-progress-v200>small,
:root[data-theme="light"] .student-course-next-v200 small,
:root[data-theme="light"] .student-course-next-v200 em{
  font-size:11px!important;
}

:root[data-theme="light"] .student-next-copy-v200 p,
:root[data-theme="light"] .student-course-card-copy-v200 p,
:root[data-theme="light"] .student-empty-courses-v200 p,
:root[data-theme="light"] .student-resource-empty-v200 p{
  font-size:12px!important;
}

:root[data-theme="light"] .student-course-code-v200{
  color:#087f9d!important;
  font-size:11px!important;
}

:root[data-theme="light"] .student-course-next-v200 b{
  color:#1c344d!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-resource-meta-v200{
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-resource-action-v200{
  color:#3f5b75!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .student-resource-badges-v200>span{
  font-size:10.5px!important;
  color:var(--cc-info)!important;
}

:root[data-theme="light"] .student-resource-badges-v200>span.language{
  color:#4f6982!important;
}

:root[data-theme="light"] .student-resource-badges-v200>span.exam{
  color:var(--cc-danger)!important;
}

:root[data-theme="light"] .student-status-chip-v200.todo,
:root[data-theme="light"] .student-status-chip-v200.ready{
  color:var(--cc-info)!important;
}

:root[data-theme="light"] .student-status-chip-v200.submitted,
:root[data-theme="light"] .student-status-chip-v200.progress{
  color:var(--cc-purple)!important;
}

:root[data-theme="light"] .student-status-chip-v200.graded{
  color:var(--cc-success)!important;
}

:root[data-theme="light"] .student-status-chip-v200.overdue,
:root[data-theme="light"] .student-status-chip-v200.closed{
  color:var(--cc-danger)!important;
}

:root[data-theme="light"] .student-status-chip-v200.upcoming{
  color:var(--cc-warning)!important;
}

/* =====================================================================
   DASHBOARD / GENERAL CARDS
   ===================================================================== */
:root[data-theme="light"] .top-title small,
:root[data-theme="light"] .stat-card small,
:root[data-theme="light"] .mini-list small,
:root[data-theme="light"] .sidebar-foot small{
  color:#566f87!important;
}

:root[data-theme="light"] .top-title small{
  font-size:12px!important;
}

:root[data-theme="light"] .stat-card small,
:root[data-theme="light"] .mini-list small{
  font-size:11.5px!important;
}

:root[data-theme="light"] .class-card p,
:root[data-theme="light"] .class-meta{
  color:#536c85!important;
}

:root[data-theme="light"] .class-meta{
  font-size:12px!important;
}

/* =====================================================================
   MANAGE / ACCESS / ACADEMIC STRUCTURE / ENROLLMENT
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="manage-"],
  [class*=" manage-"],
  [class^="access-"],
  [class*=" access-"],
  [class^="academic-"],
  [class*=" academic-"],
  [class^="enrollment-"],
  [class*=" enrollment-"]
) small{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="manage-"],
  [class*=" manage-"],
  [class^="access-"],
  [class*=" access-"],
  [class^="academic-"],
  [class*=" academic-"],
  [class^="enrollment-"],
  [class*=" enrollment-"]
) p{
  color:#4f6881!important;
}

:root[data-theme="light"] .content :is(
  [class^="manage-"],
  [class*=" manage-"],
  [class^="access-"],
  [class*=" access-"],
  [class^="academic-"],
  [class*=" academic-"],
  [class^="enrollment-"],
  [class*=" enrollment-"]
) :is(input,select,textarea){
  color:#172c44!important;
  background:#fff!important;
  border-color:#cbd8e5!important;
}

:root[data-theme="light"] .content :is(
  [class^="manage-"],
  [class*=" manage-"],
  [class^="access-"],
  [class*=" access-"],
  [class^="academic-"],
  [class*=" academic-"],
  [class^="enrollment-"],
  [class*=" enrollment-"]
) :is(th,td){
  color:#203950!important;
}

/* =====================================================================
   SETTINGS / COURSE SETTINGS / CONTENT REUSE
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="settings-"],
  [class*=" settings-"],
  [class^="admin-"],
  [class*=" admin-"],
  [class^="course-settings"],
  [class*=" course-settings"],
  [class^="reuse-"],
  [class*=" reuse-"]
) small{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="settings-"],
  [class*=" settings-"],
  [class^="admin-"],
  [class*=" admin-"],
  [class^="course-settings"],
  [class*=" course-settings"],
  [class^="reuse-"],
  [class*=" reuse-"]
) p{
  color:#4f6881!important;
}

:root[data-theme="light"] .reuse-content-groups-v210>details summary,
:root[data-theme="light"] .reuse-report-v210{
  color:#203950!important;
}

/* =====================================================================
   CALENDAR / TO-DO
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="calendar-"],
  [class*=" calendar-"],
  [class^="todo-"],
  [class*=" todo-"]
) small{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="calendar-"],
  [class*=" calendar-"],
  [class^="todo-"],
  [class*=" todo-"]
) p{
  color:#4f6881!important;
}

:root[data-theme="light"] .content :is(
  [class^="calendar-"],
  [class*=" calendar-"],
  [class^="todo-"],
  [class*=" todo-"]
) time{
  color:#4f6881!important;
}

/* =====================================================================
   ASSESSMENT BUILDER / QUIZZES / EXAMS / REVIEW
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="assessment-"],
  [class*=" assessment-"],
  [class^="attempt-"],
  [class*=" attempt-"],
  [class^="question-"],
  [class*=" question-"],
  [class^="review-"],
  [class*=" review-"],
  [class^="quiz-"],
  [class*=" quiz-"],
  [class^="exam-"],
  [class*=" exam-"]
) small{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="assessment-"],
  [class*=" assessment-"],
  [class^="attempt-"],
  [class*=" attempt-"],
  [class^="question-"],
  [class*=" question-"],
  [class^="review-"],
  [class*=" review-"],
  [class^="quiz-"],
  [class*=" quiz-"],
  [class^="exam-"],
  [class*=" exam-"]
) p{
  color:#405b75!important;
}

:root[data-theme="light"] .attempt-qhead{
  color:#4f6881!important;
  font-size:11.5px!important;
}

:root[data-theme="light"] .choice{
  color:#1d354e!important;
  background:#fff!important;
}

:root[data-theme="light"] .choice:hover{
  background:#f5f8fc!important;
}

/* =====================================================================
   MODULES / ACTIVITY / GRADEBOOK
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="module-"],
  [class*=" module-"],
  [class^="activity-"],
  [class*=" activity-"],
  [class^="submission-"],
  [class*=" submission-"],
  [class^="grade-"],
  [class*=" grade-"],
  [class^="gradebook-"],
  [class*=" gradebook-"]
) small{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="module-"],
  [class*=" module-"],
  [class^="activity-"],
  [class*=" activity-"],
  [class^="submission-"],
  [class*=" submission-"],
  [class^="grade-"],
  [class*=" grade-"],
  [class^="gradebook-"],
  [class*=" gradebook-"]
) p{
  color:#405b75!important;
}

:root[data-theme="light"] .gradebook .sticky-col{
  background:#fff!important;
}

/* =====================================================================
   ENGAGEMENT / RECITATION / SPOTLIGHT / CODE CLASH
   v2.8.3 + v2.8.4 already fixed the critical surfaces; this pass raises
   remaining metadata/helper text to the same baseline.
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="engagement-"],
  [class*=" engagement-"],
  [class^="recitation-"],
  [class*=" recitation-"],
  [class^="spotlight-"],
  [class*=" spotlight-"],
  [class^="clash-"],
  [class*=" clash-"]
) small{
  font-size:11px!important;
  line-height:1.45!important;
}

/* Neutral metadata only; semantic badges below restore their own colors. */
:root[data-theme="light"] .engagement-feature-meta-v250>span,
:root[data-theme="light"] .engagement-course-meta-v274>span,
:root[data-theme="light"] .recitation-queue-legend-v250,
:root[data-theme="light"] .clash-breadcrumb-v270,
:root[data-theme="light"] .clash-board-empty-v270 span{
  color:#506981!important;
}

/* =====================================================================
   CODING ASSESSMENT
   ===================================================================== */
:root[data-theme="light"] .content :is(
  [class^="coding-"],
  [class*=" coding-"]
) small{
  color:#506981!important;
  font-size:11px!important;
}

:root[data-theme="light"] .coding-quick-head-v280 p,
:root[data-theme="light"] .coding-setup-head-v280 p,
:root[data-theme="light"] .coding-test-head-v280 p,
:root[data-theme="light"] .coding-student-brief-v280 p,
:root[data-theme="light"] .coding-result-v280>p{
  color:#4f6881!important;
}

:root[data-theme="light"] .coding-analytics-card-v280 small{
  color:#506981!important;
}

/* =====================================================================
   PROFILE
   ===================================================================== */
:root[data-theme="light"] .profile-hero p{
  color:#506981!important;
}

:root[data-theme="light"] .content :is(
  [class^="profile-"],
  [class*=" profile-"]
) small{
  color:#506981!important;
}

/* =====================================================================
   TOASTS / MODALS / EMPTY STATES
   ===================================================================== */
:root[data-theme="light"] .toast span{
  color:#4f6881!important;
  font-size:12px!important;
}

:root[data-theme="light"] .empty p,
:root[data-theme="light"] [class*="-empty"] p,
:root[data-theme="light"] [class*="-empty"] span{
  color:#536c85!important;
}

/* =====================================================================
   INTENTIONAL DARK ISLANDS
   Restore light-on-dark text so the broad readability pass never damages
   code editors, terminals, game stages, or buzzer controls.
   ===================================================================== */
:root[data-theme="light"] :is(
  .terminal-card,
  .java-ide,
  .java-editor,
  .java-editor-shell,
  .java-console-panel,
  .java-terminal-panel,
  .clash-code-v270,
  .clash-code-editor-field-v277,
  .clash-preview-v277>pre,
  .clash-reference-solution-v278 pre,
  .student-buzzer-v250,
  .spotlight-stage-v260,
  .spotlight-reel-window-v260
){
  color:#e8f2fb!important;
}

:root[data-theme="light"] :is(
  .terminal-card,
  .java-ide,
  .java-editor,
  .java-editor-shell,
  .java-console-panel,
  .java-terminal-panel,
  .clash-code-v270,
  .clash-code-editor-field-v277,
  .student-buzzer-v250,
  .spotlight-stage-v260,
  .spotlight-reel-window-v260
) small{
  color:#a9bed3!important;
}

/* =====================================================================
   MOBILE READABILITY
   ===================================================================== */
@media(max-width:900px){
  :root[data-theme="light"] .content{
    color:#102137!important;
  }

  :root[data-theme="light"] .stream-course-tabs>button,
  :root[data-theme="light"] .student-course-nav-v200>button,
  :root[data-theme="light"] .student-course-nav-link-v200{
    min-height:42px!important;
  }
}

@media(max-width:680px){
  :root[data-theme="light"] .content small,
  :root[data-theme="light"] .premium-content small,
  :root[data-theme="light"] .public-shell small,
  :root[data-theme="light"] .modal-card small{
    font-size:12px!important;
  }

  :root[data-theme="light"] .content label,
  :root[data-theme="light"] .premium-content label,
  :root[data-theme="light"] .modal-card label{
    font-size:12.5px!important;
  }

  :root[data-theme="light"] .student-course-progress-summary-v200>div:first-child,
  :root[data-theme="light"] .student-course-progress-summary-v200>small,
  :root[data-theme="light"] .student-class-progress-card-v200 p,
  :root[data-theme="light"] .student-class-upcoming-v200 small,
  :root[data-theme="light"] .student-class-caught-up-v200,
  :root[data-theme="light"] .student-class-info-v200>div{
    font-size:12px!important;
  }

  :root[data-theme="light"] .student-class-info-v200 p,
  :root[data-theme="light"] .stream-post-message,
  :root[data-theme="light"] .student-resource-meta-v200{
    font-size:12.5px!important;
  }

  :root[data-theme="light"] .stream-comment-toggle{
    min-height:38px!important;
    font-size:12.5px!important;
  }

  :root[data-theme="light"] .student-resource-action-v200{
    min-height:40px!important;
    font-size:12px!important;
  }
}

/* Keep reduced-motion preference respected. */
@media(prefers-reduced-motion:reduce){
  :root[data-theme="light"] *{
    scroll-behavior:auto!important;
  }
}