/* Overrides /opt/traccar/web/styles.css via web.override.
   Must include the stock rules — this file REPLACES the original. */

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;
  }
}

/* Averia Serif Libre, self-hosted from ./fonts so the login page makes no
   external requests. Latin subset, downloaded from Google's font CDN.
   Licensed under the SIL Open Font License. */

@font-face {
  font-family: 'Averia Serif Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/averia-serif-libre-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Averia Serif Libre';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/averia-serif-libre-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Averia Serif Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/averia-serif-libre-700.woff2') format('woff2');
}

/* --- Sempie branding ---
   The Traccar wordmark is an inline <svg viewBox="0 0 240 64"> compiled into
   the JS bundle, so it can't be swapped by replacing logo.svg. Hide it and
   render the brand name in its place.

   A single content string can't mix roman and italic, so the name is split
   across ::before and ::after. Both containers are flex, and on the narrow
   layout ::after would otherwise land below the login button — negative
   `order` pins both to the logo position instead.

   Two layouts: on wide viewports the logo lives in the login sidebar
   (flex-direction: row, so the parts sit side by side), on narrow ones it
   moves inside the form (column, so they stack). Selectors key off the
   viewBox rather than emotion-generated class names, which change between
   releases. */

svg[viewBox="0 0 240 64"] {
  display: none !important;
}

div:has(> svg[viewBox="0 0 240 64"])::before,
div:has(> svg[viewBox="0 0 240 64"])::after {
  font-family: 'Averia Serif Libre', Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  color: #1a237e;
}

div:has(> svg[viewBox="0 0 240 64"])::before {
  content: "Sempie Solutions";
  order: -2;
  padding: 4px 6px 0 12px;
}

div:has(> svg[viewBox="0 0 240 64"])::after {
  content: "Tracking";
  font-style: italic;
  order: -1;
  padding: 0 12px 16px 6px;
}

/* Let the two parts wrap in the sidebar rather than overflow it. */
div:not(form *):has(> svg[viewBox="0 0 240 64"]) {
  flex-wrap: wrap;
}

/* Narrow layout, dark theme: logo renders in primary.light on a near-black
   paper background. */
@media (prefers-color-scheme: dark) {
  div:has(> svg[viewBox="0 0 240 64"])::before,
  div:has(> svg[viewBox="0 0 240 64"])::after {
    color: #9fa8da;
  }
}

/* Wide layout: the logo sits in the sidebar, outside the form, where MUI
   inverts the palette — white on indigo in light, near-black on light indigo
   in dark. These selectors are more specific, so they win in both themes. */
div:not(form *):has(> svg[viewBox="0 0 240 64"])::before,
div:not(form *):has(> svg[viewBox="0 0 240 64"])::after {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  div:not(form *):has(> svg[viewBox="0 0 240 64"])::before,
  div:not(form *):has(> svg[viewBox="0 0 240 64"])::after {
    color: rgba(0, 0, 0, 0.87);
  }
}