/* Static-shell theming, shared by all four page templates.
 *
 * This markup lives OUTSIDE the Vue app, so Vuetify's theme--dark class is not
 * available. The app resolves its own theme from prefers-color-scheme (see
 * src/plugins/vuetify.js), so keying off the same media query keeps shell and
 * app in agreement -- including during the load spinner, before Vue mounts.
 *
 * Link this AFTER the CMS stylesheets: several rules deliberately mirror
 * selectors from partials.css / <brand>.css and rely on source order to win
 * (both set .footer { background: #fff }, and <brand>.css paints the stage
 * wrappers .stage .stage-body / .stage .stage-content white).
 *
 * Values are kept in one place here rather than repeated per shell. They must
 * stay consistent with the dark theme in src/plugins/vuetify.js
 * (pageBackground / surface) and with --spinner-track in
 * src/styles/app-shared.styl.
 */

/* Themes the always-visible native scrollbar and any native controls. */
:root {
  color-scheme: light dark;
}

/* <brand>.css sets .main-content { background: #fff } and partials.css
   overrides it to transparent for this body id. These divs used to carry
   style="background: transparent" inline, which no media query can reach. */
#clients-account-page .main-content {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-ground: #000000;
    --spinner-track: #0a2532;
    /* The ring is .spinner's own background; in light it is a blue gradient
       from the shells' own CSS, in dark a flat white arc on black. */
    --spinner-ring: #ffffff;
  }

  body,
  .page-wrap .page-content {
    background: var(--page-ground);
  }

  #clients-account-page .main-content {
    background: var(--page-ground);
  }

  .footer {
    background: var(--page-ground);
  }

  .footer:after {
    background-color: var(--page-ground);
  }

  .stage .stage-body,
  .stage .stage-content,
  .product-rotation .stage-body .stage-content {
    background: var(--page-ground);
  }

  .load .load-shim {
    background-color: var(--page-ground);
  }

  /* Overrides the blue gradient the shells set (both the -webkit-gradient and
     the linear-gradient declaration), leaving a white arc. The rotating
     ::before/::after halves stay --page-ground so they erase invisibly. */
  .spinner {
    background: var(--spinner-ring);
    border-right-color: var(--spinner-track);
    border-bottom-color: var(--spinner-track);
  }

  .spinner::before,
  .spinner::after {
    background: var(--page-ground);
  }

  /* The diebayerische/pangaea/plusrente shells each set
     .mandatory-link { color: #333 !important } in an inline <style>, which sits
     after this file and would otherwise win. Two classes plus !important beats
     it regardless of source order. #333 on #000 measures 1.66:1; this is 5.9:1. */
  .footer .mandatory-link {
    color: #a0a0a0 !important;
  }
}