/* Dark theme fixes (design review batch B5, 2026-10-14), loaded after the other
   blocking project sheets. Dark-only unless a comment says otherwise. */

:root {
  /* Ink for numbers drawn on a picture: the picture does not change with the theme. */
  --on-image-ink: #1e1b1a;
  /* Label on a filled primary button, both themes. */
  --on-cta: #ffffff;
}

html body.theme-dark:not([data-admin]) {
  /* B5-06: app-ui-modals.css redefines these on study pages (lavender secondary,
     teal tertiary, pale-pink on-primary-container), so states changed colour
     between pages and themes. Pinned to the canonical styles.css dark block. */
  --secondary: #4ad6c2;
  --secondary-dim: #2cb9a7;
  --secondary-container: #134640;
  --on-secondary-container: #a8ecdf;
  --tertiary: #f2b25a;
  --tertiary-container: #523700;
  --on-tertiary-container: #ffe4ac;
  --on-primary: #380812;
  --on-primary-container: #ffdae0;
  --error: #ff8b85;

  /* One primary fill: deep enough for a white label at 4.5:1. */
  --cta-gradient-start: color-mix(in srgb, var(--primary) 76%, black);
  --cta-gradient-mid: color-mix(in srgb, var(--primary) 78%, black);
  --cta-gradient-end: color-mix(in srgb, var(--primary) 80%, black);
  --cta-text-strong: var(--on-cta);
  --cta-text-soft: var(--on-cta);
  --primary-fill: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  );
  --cta-gradient-hover: color-mix(in srgb, var(--primary) 70%, black);
  --primary-fill-hover: linear-gradient(
    135deg,
    var(--cta-gradient-hover) 0%,
    var(--cta-gradient-start) 55%,
    var(--cta-gradient-mid) 100%
  );
  --eduloo-ui-primary-btn-bg: var(--primary-fill);
  --eduloo-ui-primary-btn-border: transparent;
  --eduloo-dark-btn-primary-bg: var(--primary-fill);
  --eduloo-dark-btn-primary-bg-hover: var(--primary-fill-hover);
  --eduloo-study-cta-bg: var(--primary-fill);
  --eduloo-study-cta-bg-hover: var(--primary-fill-hover);
  --eduloo-study-cta-bg-active: var(--primary-fill-hover);
  --eduloo-study-cta-border: transparent;
  --eduloo-study-cta-border-hover: transparent;
  --eduloo-study-cta-text: var(--on-cta);
  --eduloo-study-btn-primary-bg: var(--primary-fill);
  --eduloo-study-btn-primary-bg-hover: var(--primary-fill-hover);
  --eduloo-study-btn-primary-flat-text: var(--on-cta);
  --eduloo-study-btn-primary-flat-shadow: none;
  --eduloo-app-primary-bg: var(--primary-fill);
  --eduloo-app-primary-bg-hover: var(--primary-fill-hover);

  /* Tints: low-alpha state colour on the card surface, light state-coloured text. */
  --tint-accent-bg: color-mix(
    in srgb,
    var(--primary) 18%,
    var(--surface-container-high)
  );
  --tint-accent-line: color-mix(in srgb, var(--primary) 40%, transparent);
  --tint-accent-fg: var(--primary-strong);
  --tint-success-bg: color-mix(
    in srgb,
    var(--success) 16%,
    var(--surface-container-high)
  );
  --tint-success-line: color-mix(in srgb, var(--success) 36%, transparent);
  --tint-success-fg: var(--success);
  --tint-warning-bg: color-mix(
    in srgb,
    var(--warning) 16%,
    var(--surface-container-high)
  );
  --tint-warning-line: color-mix(in srgb, var(--warning) 36%, transparent);
  --tint-warning-fg: var(--warning);
  --tint-danger-bg: color-mix(
    in srgb,
    var(--error) 16%,
    var(--surface-container-high)
  );
  --tint-danger-line: color-mix(in srgb, var(--error) 36%, transparent);
  --tint-danger-fg: var(--error);
  --tint-info-bg: color-mix(
    in srgb,
    var(--info) 16%,
    var(--surface-container-high)
  );
  --tint-info-line: color-mix(in srgb, var(--info) 36%, transparent);
  --tint-info-fg: var(--info);
  --tint-track: color-mix(in srgb, var(--on-surface) 12%, transparent);

  /* B5-02 one dialog surface. */
  --modal-surface: var(--surface-container-high);
  --modal-header-bg: transparent;

  /* Framework billing reads --danger-color (Cancel Subscription). */
  --danger-color: var(--error);
}

/* Web study shell gradient (tabs, Browse files, Generate). */
html body.theme-dark:not([data-mobile]):not([data-admin]) {
  --stw-grad: var(--primary-fill);
}

/* ---- B1-11 app account sheets (both themes: the hosted sheet sits outside
   .dashboard-page--mobile, so the framework fell back to #111 and #6b7280) ---- */

body[data-mobile] .modal-content.up-host-modal {
  --mobile-fg: var(--on-surface);
  --mobile-muted: var(--on-surface-variant);
}

body[data-mobile] .up-host-modal .up-modal__form .alert {
  box-shadow: none !important;
}

body[data-mobile] .up-host-modal .up-mfa-verify-help {
  font-size: 13px;
  color: var(--on-surface-variant);
}

/* ---- B1-12 scanner overlay ---- */

html body.theme-dark .doc-scanner-overlay {
  --page-bg: var(--surface);
}

/* ---- B1-13 inline card editor ---- */

html
  body.theme-dark:not([data-mobile])
  .st-container.st-fs-container
  .st-pane.st-pane--flashcards
  .st-fc-card.stw-fc-card.is-editing
  [contenteditable='true'],
html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--flashcards
  .st-fc-card.is-editing
  [contenteditable='true'] {
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
  box-shadow: inset 0 0 0 1px var(--outline-variant) !important;
}

html
  body.theme-dark:not([data-mobile])
  .st-container.st-fs-container
  .st-pane.st-pane--flashcards
  .st-fc-card.stw-fc-card.is-editing
  .st-fc-face
  p,
html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--flashcards
  .st-fc-card.is-editing
  .st-fc-face
  p {
  color: var(--on-surface) !important;
}

/* ---- B1-09 image labeling: the markers sit on the picture ---- */

html body.theme-dark .st-quizz-image-label-slot-number {
  color: var(--on-image-ink) !important;
}

html body.theme-dark .st-quizz-image-label-answer-number {
  color: var(--on-surface-variant) !important;
}

/* ---- B5-05 destructive colour ---- */

html
  body[class].theme-dark[data-mobile]
  button.ml-toolbar__btn--danger:not([aria-disabled='true']) {
  color: var(--error) !important;
}

html body.theme-dark[data-mobile] .mobile-swipe-delete-bg {
  background: var(--cta-gradient-start);
}

html body.theme-dark[data-mobile] .mobile-swipe-delete-bg i {
  color: var(--on-cta);
}

/* ---- B5-03 nothing stays light ---- */

html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-rating__col[data-flash-study-rating-col='again'] {
  --fs-m-rate-bg: var(--tint-danger-bg);
  --fs-m-rate-border: var(--tint-danger-line);
  --fs-m-rate-text: var(--tint-danger-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-rating__col[data-flash-study-rating-col='hard'] {
  --fs-m-rate-bg: var(--tint-warning-bg);
  --fs-m-rate-border: var(--tint-warning-line);
  --fs-m-rate-text: var(--tint-warning-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-rating__col[data-flash-study-rating-col='good'] {
  --fs-m-rate-bg: var(--tint-success-bg);
  --fs-m-rate-border: var(--tint-success-line);
  --fs-m-rate-text: var(--tint-success-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-rating__col[data-flash-study-rating-col='easy'] {
  --fs-m-rate-bg: var(--tint-info-bg);
  --fs-m-rate-border: var(--tint-info-line);
  --fs-m-rate-text: var(--tint-info-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-finished
  [data-flash-study-finished-stat-card='learned'] {
  --fs-m-stat-bg: var(--tint-success-bg);
  --fs-m-stat-border: var(--tint-success-line);
  --fs-m-stat-text: var(--tint-success-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-finished
  [data-flash-study-finished-stat-card='reviewed'] {
  --fs-m-stat-bg: var(--tint-info-bg);
  --fs-m-stat-border: var(--tint-info-line);
  --fs-m-stat-text: var(--tint-info-fg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-finished
  [data-flash-study-finished-stat-card='time'] {
  --fs-m-stat-bg: var(--tint-warning-bg);
  --fs-m-stat-border: var(--tint-warning-line);
  --fs-m-stat-text: var(--tint-warning-fg);
}

html body.theme-dark[data-mobile] .fs-m-finished .fs-m-finished__mastered-bar {
  background: var(--tint-track);
}

html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--flashcards
  .st-fc-summary-bar {
  background: var(--tint-track);
}

html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--flashcards
  .st-fc-summary-bar-seg--learning {
  background: color-mix(
    in srgb,
    var(--primary) 55%,
    var(--surface-container-highest)
  );
}

html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--flashcards
  .st-fc-summary-bar-seg--new {
  background: color-mix(
    in srgb,
    var(--primary) 24%,
    var(--surface-container-highest)
  );
}

html body.theme-dark[data-mobile] .ml-tile--0,
html body.theme-dark[data-mobile] .ml-badge--new {
  background: var(--tint-accent-bg);
  color: var(--tint-accent-fg);
}

html body.theme-dark[data-mobile] .ml-tile--1,
html body.theme-dark[data-mobile] .ml-tile--4 {
  background: var(--tint-info-bg);
  color: var(--tint-info-fg);
}

html body.theme-dark[data-mobile] .ml-tile--2,
html body.theme-dark[data-mobile] .ml-badge--prog {
  background: var(--tint-warning-bg);
  color: var(--tint-warning-fg);
}

html body.theme-dark[data-mobile] .ml-tile--3,
html body.theme-dark[data-mobile] .ml-badge--done {
  background: var(--tint-success-bg);
  color: var(--tint-success-fg);
}

html body.theme-dark[data-mobile] .ml-badge--bad {
  background: var(--tint-danger-bg);
  color: var(--tint-danger-fg);
}

html body[class].theme-dark button.qe-opt__mark {
  border-color: var(--outline-variant) !important;
  background: var(--surface-container-high) !important;
  color: var(--on-surface-variant) !important;
}

html body[class].theme-dark .qe-opt.is-right button.qe-opt__mark {
  border-color: var(--tint-success-line) !important;
  background: var(--tint-success-bg) !important;
  color: var(--tint-success-fg) !important;
}

html body.theme-dark .st-demo-banner {
  background: var(--info-container);
  border-color: var(--tint-info-line);
  color: var(--on-info-container);
}

html body.theme-dark .st-guest-alert {
  background: var(--tertiary-container) !important;
  border-color: var(--tint-warning-line) !important;
  box-shadow: none !important;
}

html body.theme-dark .st-guest-alert__title {
  color: var(--on-tertiary-container);
}

html body.theme-dark .st-guest-alert__text {
  color: var(--on-surface);
}

html body.theme-dark .st-guest-alert__link {
  color: var(--on-surface) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- B5-07 low contrast text ---- */

html body.theme-dark a.um-unlock {
  color: var(--primary-strong);
}

/* ---- Summaries list keeps the grouped-list structure in dark. The summaries
   rule that lists body.theme-dark outranks the mobile_list row reset only in
   dark, which turned rows into separate padded cards. ---- */

html body[class].theme-dark[data-mobile] .ml-list > .ml-row.st-sum-row {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

html
  body.theme-dark:not([data-mobile])
  .st-container.st-fs-container
  .st-pane.st-pane--flashcards
  .st-fc-card.stw-fc-card.is-editing {
  border-color: var(--outline-variant) !important;
}

html
  body.theme-dark:not([data-mobile])
  .st-container.st-fs-container
  .st-pane.st-pane--flashcards
  .st-fc-card.stw-fc-card.is-editing
  .st-fc-card-action {
  color: var(--on-surface-variant) !important;
}

/* ---- User panel (app and web): faint captions at full muted ink, billing primary ---- */

html body.theme-dark .dashboard-page.up-panel {
  --up-text-dim: var(--on-surface-variant) !important;
}

html
  body.theme-dark[data-mobile]
  .up-billing
  .up-billing-price-panel__actions
  [data-billing-action='change-plan'],
html
  body.theme-dark[data-mobile]
  .up-billing
  .up-billing-price-panel__actions
  [data-billing-action='reactivate'] {
  background: var(--primary-fill) !important;
  color: var(--on-cta) !important;
}

/* Per-row secondary action (document "Make"): a tint, not a primary fill. */
html body[class].theme-dark[data-mobile] button.ml-act--soft {
  background: var(--tint-accent-bg) !important;
}

html body[class].theme-dark[data-mobile] .ml-act--soft .ti {
  color: var(--tint-accent-fg) !important;
}

/* Label on the B5 fill: --on-primary (dark ink) was set for the old bright fill. */
html body.theme-dark .st-dashboard-shell .st-dashboard-day--active,
html
  body.theme-dark
  .st-dashboard-shell
  .st-dashboard-day--active
  :is(.st-dashboard-day-name, .st-dashboard-day-number),
html body.theme-dark:not([data-admin]) .comp-tab--eduloo {
  color: var(--on-cta) !important;
}

html
  body[class].theme-dark[data-mobile].ml-selecting
  .ml-row.is-picked
  .ml-check {
  background: var(--cta-gradient-start);
  color: var(--on-cta);
}

html body.theme-dark[data-mobile] .ml-hero__eyebrow,
html body.theme-dark[data-mobile] .ml-gen__label,
html
  body.theme-dark[data-mobile]
  .st-pane.st-pane--quizzes
  .st-qz-top__eyebrow {
  color: var(--primary-strong);
}

html body[class].theme-dark[data-mobile] button.ml-textbtn:not(.ml-select-btn) {
  color: var(--primary-strong) !important;
}

html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  .st-modal-body,
html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  .qz-chat.stw-chat--panel {
  background: var(--dlg-task-bg, var(--surface-container-high)) !important;
}

html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  .st-panel-box,
html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  .st-merge-section,
html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  aside.stw-chat-panel,
html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  button.qz-chat__option,
html
  body.theme-dark:not([data-mobile]):not([data-admin])
  .modal.st-study-modal
  button.qz-chat__all {
  background: var(
    --dlg-task-panel,
    var(--surface-container-highest)
  ) !important;
}

/* ---- B5-06 status colours keep their meaning ---- */

html body.theme-dark .st-dashboard-shell .st-panel-activity-chip--success {
  background: var(--tint-success-bg) !important;
  color: var(--tint-success-fg) !important;
}

html body.theme-dark .st-dashboard-shell .st-panel-activity-chip--new {
  background: var(--surface-container-highest) !important;
  color: var(--on-surface-variant) !important;
}

html body.theme-dark .st-dashboard-shell .st-panel-mini-progress-fill {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--success) 100%
  ) !important;
}

html
  body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='ready']
  .st-doc-status-line {
  background: var(--tint-success-bg) !important;
  color: var(--tint-success-fg) !important;
}

html body[class].theme-dark .st-doc-meta-no-topics {
  color: var(--warning) !important;
}

/* ---- B5-07 low contrast: hero primary label, app settings values and upsell line ---- */

html body.theme-dark .btn-hero-primary,
html body.theme-dark .btn-hero-primary:hover {
  color: var(--on-cta) !important;
}

html body.theme-dark [data-mobile-page='settings'] {
  --s-faint: var(--on-surface-variant);
  --mobile-settings-upgrade-bg: var(--primary-fill);
  --mobile-settings-upgrade-color: var(--on-cta);
}

html body.theme-dark:not([data-mobile]) .fcp-pane {
  --fcp-faint: var(--on-surface-variant);
}

/* Store badges: the official black badge, not an inverted light one. */
html body.theme-dark .sp-share .sp-store {
  background: var(--surface-dim);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  opacity: 1;
}

/* Nothing-due clock badge: dark tint; the glyph is an SVG data URI, so its stroke
   repeats the dark --primary-strong value. */
html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-card--waiting
  .fs-m-card__question::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
      center / 26px no-repeat,
    var(--tint-accent-bg);
}

html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-card--waiting
  .fs-m-card__question,
html
  body.theme-dark[data-mobile]
  .fs-m-page
  .fs-m-card--waiting
  .fs-m-card__question
  p {
  color: var(--on-surface);
}

/* Info notes (Topic Generation, comparison freshness): neutral surface, not navy. */
html body.theme-dark:not([data-admin]) .alert.alert-info {
  background: var(--surface-container-highest) !important;
  color: var(--on-surface) !important;
  box-shadow: inset 0 0 0 1px var(--outline-variant) !important;
}

html body.theme-dark:not([data-admin]) .alert.alert-info > i {
  color: var(--info);
}

html body.theme-dark[data-mobile] .up-host-modal .up-modal__form .alert {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--on-surface-variant) !important;
}

/* Delete Account row (both themes): the framework settings label colour outranks
   the danger row's inherited colour. */
body[data-mobile] .up-mpanel .up-m-danger .mobile-list-row-label {
  color: var(--error);
}

/* Quiz editor (app) muted text: hand-set light-theme greys. */
html body.theme-dark .qe-head__t span,
html body.theme-dark .qe-lbl,
html body.theme-dark .qe-lbl small,
html body.theme-dark .qe-num {
  color: var(--on-surface-variant);
}