/*
 * C4T Telematics — branding overlay stylesheet.
 *
 * This file REPLACES the upstream public/styles.css wholesale (the override
 * filter serves this instead of it, it does not merge them). Everything above
 * the C4T section is copied verbatim from upstream 6.14.5 and is load-bearing:
 * the app is a flex column that relies on html/body being full height, and the
 * print rules are what make reports printable. Do not delete them.
 *
 * Colours that the React app itself uses come from Server attributes
 * (colorPrimary / colorSecondary), not from here — see branding/README.md.
 * Use this file only for things MUI cannot theme: the pre-hydration loader,
 * scrollbars, print tweaks.
 */

/* ---- upstream baseline (verbatim, keep) ---------------------------------- */
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ---- C4T additions ------------------------------------------------------ */

:root {
  --c4t-navy: #01166A;   /* logo navy */
  --c4t-sky: #38BDF8;    /* brand accent */
  --c4t-slate: #0F172A;  /* brand dark surface */
}

/*
 * The loading spinner shown before React mounts. Upstream renders it black on
 * light grey, which flashes as an unbranded page on slow connections — this is
 * the first thing a customer sees, so brand it.
 */
.loader {
  border-color: rgba(1, 22, 106, 0.15) !important;
  border-right-color: var(--c4t-navy) !important;
}

@media (prefers-color-scheme: dark) {
  body {
    /* Upstream uses pure black, which is harsh beside MUI's dark surfaces.
       Use the brand's own dark surface from the banner artwork instead. */
    background: var(--c4t-slate);
  }

  .loader {
    border-color: rgba(56, 189, 248, 0.2) !important;
    border-right-color: var(--c4t-sky) !important;
  }
}

/* Scrollbars in the device list and report tables. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(1, 22, 106, 0.35) transparent;
}

@media (prefers-color-scheme: dark) {
  * {
    scrollbar-color: rgba(56, 189, 248, 0.35) transparent;
  }
}

/*
 * Printed reports are what fleet managers hand to their own clients, so keep
 * them clean: white background, no dark-mode inversion bleeding through.
 */
@media print {
  body {
    background: #fff !important;
  }

  .loader {
    display: none !important;
  }
}