/* sky-light.css: LIGHT-MODE surface fixes for the Classic UI (UI quick fixes, 2026-10-12).

   Why this file exists. Hundreds of page templates paint content cards with Bootstrap's
   `.bg-dark` utility, which is `background-color: rgba(var(--bs-dark-rgb)) !important` and
   ignores every theme token. In light mode those cards stayed #212529 on a white page, and
   the theme's dark ink then landed on them: the Survey project title measured 1.26:1, its
   step list 2.68:1, the Captures cards 1.83:1 (UI audit 2026-10-12, P1).

   What it does. Every rule is scoped to html[data-theme-mode="light"]:not(:where([data-ui="new"])), so DARK MODE IS
   UNTOUCHED, byte for byte. In light mode a content `.bg-dark` surface becomes the theme's
   own light card surface (tokens, not hex), and the light-on-dark text utilities inside it
   (.text-light, .text-white) follow the theme ink. Colours come from the pack's tokens
   (--bs-card-bg, --bs-body-color, --bs-tertiary-bg), so a future theme layer ("New" UI)
   restyles these surfaces by setting tokens, never by fighting this file.

   Opt-out. Anything that must stay dark in light mode (a map HUD, a video frame) adds
   `data-sky-keep-dark` (or the class .sky-keep-dark) and is left alone, with its children.

   Measured after (WCAG 2.x, axe-core 4.14, light, 1440x900): see the plan report. */

html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.navbar):not(.btn):not(.badge):not(.sky-keep-dark):not([data-sky-keep-dark]) {
    background-color: var(--bs-card-bg, #fff) !important;
    color: var(--bs-body-color);
}
/* A bg-dark surface NESTED in another one (a recessed well inside a card) gets the
   recessed tint so it still reads as a separate box. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) .bg-dark:not(.navbar):not(.btn):not(.badge):not(.sky-keep-dark):not([data-sky-keep-dark]) {
    background-color: var(--bs-tertiary-bg, #f4f4f4) !important;
}
/* Light-on-dark text utilities that only made sense on the dark card. Buttons, badges and
   anything inside them keep their own (they sit on their own filled ground). */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) :is(.text-light, .text-white, .link-light):not(.btn):not(.badge):not(.btn *):not(.badge *):not(.sky-keep-dark *) {
    color: var(--bs-body-color) !important;
}
/* Bootstrap's card header/footer wash is a translucent tint of the body ink, which on the
   (now light) card is correct. Pages that hard-coded the dark header keep theirs only in
   dark mode. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) > :is(.card-header, .card-footer) {
    background-color: var(--bs-card-cap-bg, #fafafa);
    color: var(--bs-body-color);
}
/* .table-dark (the survey project's summary table, the GCP preview): same story as .bg-dark,
   a #212529 table on a light page. Light mode gives it the theme's table tokens. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .table-dark:not(.sky-keep-dark):not([data-sky-keep-dark] *) {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg, #f4f4f4);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-tertiary-bg, #f4f4f4);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-tertiary-bg, #f4f4f4);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .table-dark:not(.sky-keep-dark) :is(.text-secondary, .text-muted) {
    color: var(--ds-text-muted, #5f6670) !important;
}
/* .btn-close inside a formerly dark modal was given .btn-close-white for the dark ground. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) .btn-close-white {
    filter: none;
}
/* Muted/secondary text on the converted surfaces: Bootstrap's #6c757d is 4.69:1 on white
   but 4.3:1 on the recessed #f4f4f4 well. The pack's muted ink (--ds-text-muted, vercel
   #6f6f6f: 5.02:1 on white, 4.6:1 on #f4f4f4) replaces it there. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) :is(.text-secondary, .text-muted):not(.btn):not(.badge):not(.btn *):not(.badge *) {
    --bs-secondary-color: var(--ds-text-muted, #5f6670);
    color: var(--ds-text-muted, #5f6670) !important;
}
/* Pages that still read the old dark-only names get a light value here. */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) {
    --sky-text-dim: var(--ds-text-muted, #5f6670);
}

/* FullCalendar (Office › Work › Office › Calendar): other-month day numbers are drawn at
   opacity .3 of the link ink, 1.8:1 on white. Use the muted ink at full opacity instead
   (5.0:1); the grey still says "not this month". */
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .fc .fc-day-other .fc-daygrid-day-top {
    opacity: 1;
}
html[data-theme-mode="light"]:not(:where([data-ui="new"])) .fc .fc-day-other .fc-daygrid-day-number {
    color: var(--ds-text-muted, #5f6670);
}