/* ============================================================================
 * dark-fixes.css -- dark mode finishing. Strictly additive, and dark only.
 * ----------------------------------------------------------------------------
 * Goal: eliminate the “light islands” caused by per-screen CSS that sets a background
 * hard-coded pastel / dark text (outside the token system) with no dark variant.
 *
 * RULES:
 *  - Loaded LAST in head.ejs → overrides per-page CSS.
 *  - 100% of the rules are under :root[data-theme="dark"] → LIGHT mode is
 *    mathematically UNCHANGED (no existing CSS file is edited).
 *  - ONLY color properties are changed (background / color /
 *    border-color), never geometry.
 *  - Values aligned with the dark tokens in app.css. For status
 *    alerts, reuse the convention already established in app.css:
 *    background = rgba(<color>, ~0.15) ; text = a light tint of the color ;
 *    border = system color. See app.css .app-alert-error / .wiki-warn.
 *
 * Intentionally LEFT light (printable “paper” documents) — NO
 * handled here, they MUST remain blank:
 *  - management-quote-detail.css  .devis-print  (A4 quote preview, max-width:21cm)
 *  - management-data-return-letter.css  #lettre-print  (printable letter)
 *
 * Intentionally LEFT colored (visualization/semantic badges, like
 * status dots):
 *  - management-mock-test-grid.css  .eb-c-*/.eb-na/.eb-th  (scale of
 *    a red-to-green scale: colours that carry meaning, kept as they are in dark.
 *  - legal-*.css .legal-todo: an amber highlight, softer than a marker.
 * ========================================================================== */


/* === admin-monitor.css ====================================================
 * .mon-alert.warn / .mon-alert.error: alert panels with pastel background +
 * hard-coded dark text → white islands in dark mode. Switch to the convention
 * transparent tint + light text (same rendering as app.css .app-alert-error).
 * The progress bars .mon-bar (solid blue/orange/red background) remain
 * unchanged (solid colors stay readable in dark mode). */
:root[data-theme="dark"] .mon-alert.warn {
  background: rgba(255, 159, 10, 0.16);
  border-color: rgba(255, 159, 10, 0.42);
  color: #fcd9b6;
}
:root[data-theme="dark"] .mon-alert.error {
  background: rgba(255, 69, 58, 0.16);
  border-color: rgba(255, 69, 58, 0.45);
  color: #fca5a5;
}


/* === instructor-dashboard.css =============================================
 * Cards / alert badges with light pastel background + hard-coded dark text.
 * Same tint + light text convention. The border bar (border-left-color)
 * carries the status color: keep it, only adjust the background + text. */
:root[data-theme="dark"] .mv-card-alert {
  background: rgba(217, 119, 6, 0.16);   /* #d97706 → amber tint */
}
:root[data-theme="dark"] .mv-alert-danger {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}
:root[data-theme="dark"] .mv-alert-warning {
  background: rgba(194, 65, 12, 0.18);
  color: #fdba74;
}


/* === admin-jobs.css =======================================================
 * Status badges: background already in rgba (translucent, OK on a dark surface),
 * but the TEXT is a dark shade (#b25e00 / #3a5882 / #1d7a37 / #c01a10)
 * → low contrast on a dark background. Lighten only the color of the
 * text (the rgba background stays, light/dark consistent). .jobs-err same. */
:root[data-theme="dark"] .badge-pending { color: #fdba74; }
:root[data-theme="dark"] .badge-running { color: #93b0d4; }
:root[data-theme="dark"] .badge-done    { color: #6ee7a0; }
:root[data-theme="dark"] .badge-failed  { color: #fca5a5; }
:root[data-theme="dark"] .jobs-err      { color: #fca5a5; }
/* Status labels (ok/warn/bad) as plain text on the PAGE (not in a panel):
 * dark shades work poorly on a dark surface → use lighter versions. */
:root[data-theme="dark"] .mon-ok  { color: #6ee7a0; }
:root[data-theme="dark"] .mon-warn { color: #fdba74; }
:root[data-theme="dark"] .mon-bad { color: #fca5a5; }


/* === admin-integrations.css ===============================================
 * Env status lists: dark green/amber text on the page → lighten in dark mode. */
:root[data-theme="dark"] .integration-env li.env-ok      { color: #6ee7a0; }
:root[data-theme="dark"] .integration-env li.env-missing { color: #fdba74; }


/* === screen-planning-management.css ========================================== */
:root[data-theme="dark"] .pg-tournee-stat--gain .pg-route-stat-val { color: #93c5fd; }


/* === growth.css =======================================================
 * Cohort heatmap (.coh-hi/.coh-mid/.coh-lo): hard-coded dark text on rgba background
 * → low contrast in dark mode. We lighten ONLY the text (the translucent rgba
 * background stays readable). Same convention as the other status badges. */
:root[data-theme="dark"] .coh-hi  { color: #6ee7a0; }
:root[data-theme="dark"] .coh-mid { color: #fdba74; }
:root[data-theme="dark"] .coh-lo  { color: #fca5a5; }


/* === app.css — .app-badge-* badges =====================================
 * Hard-coded pastel background + dark text, with no dark variant, even though these classes
 * are used throughout the views: each one creates a light island in dark mode. Use
 * the house convention again (background = translucent tint, text = tint
 * light), with the values already approved for the kit badges. */
:root[data-theme="dark"] .app-badge-success { background: rgba(48,209,88,0.20);   color: #5dde7f; }
:root[data-theme="dark"] .app-badge-info    { background: rgba(125,151,189,0.22); color: #9db3d3; }
:root[data-theme="dark"] .app-badge-warning { background: rgba(255,159,10,0.22);  color: #ffbe55; }
:root[data-theme="dark"] .app-badge-danger  { background: rgba(255,69,58,0.22);   color: #ff6961; }
:root[data-theme="dark"] .app-badge-neutral { background: var(--fill-primary);    color: var(--label-secondary); }

/* === views/partials/tip-of-day.ejs ("bandeau « message du jour »", shared
 * management / teacher / student) ============================================
 * The banner sets a pastel background + dark text INLINE (style="") for each category
 * → a light island in dark mode on all 3 dashboards. Same semantic shades,
 * re-expressed using the « tinte transparente + texte clair » convention (cf. .app-alert).
 * !important: required to override the inline style (dark mode only). */
:root[data-theme="dark"] .tip-of-day[data-tip-cat="securite"],
:root[data-theme="dark"] .tip-of-day[data-tip-cat="reglementation"],
:root[data-theme="dark"] .tip-of-day[data-tip-cat="encouragement"],
:root[data-theme="dark"] .tip-of-day[data-tip-cat="anecdote"] {
  background: rgba(94, 127, 168, 0.20) !important;
  border-color: rgba(94, 127, 168, 0.44) !important;
  color: #b9d0ec !important;
}