/* ================================================================
   TRACCAR BASE LAYOUT, DO NOT REMOVE
   ================================================================
   Everything from here to the end of this block is Traccar's own
   public/styles.css, copied verbatim from upstream.

   It has to be here because of a filename collision. Traccar's
   index.html links <link rel="stylesheet" href="/styles.css">, and that
   is Traccar's own stylesheet, the one that gives html, body and .root
   their height. Putting a file called styles.css in web/override does
   not add to it, it replaces it.

   So for as long as this branding has existed, the app behind the login
   has had no base layout: html and body had no height, .root was not a
   flex column, and the map view collapsed to about 180px with the rest
   of the screen black. The login page looked fine only because the
   branding below gives main its own layout.

   If you upgrade Traccar, re-copy this block from
   https://github.com/traccar/traccar-web/blob/master/public/styles.css
   The branding check verifies these rules are present and that the app
   still fills the viewport.
   ================================================================ */

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

/* ================================================================
   END OF TRACCAR BASE LAYOUT. AASS BRANDING FOLLOWS.
   ================================================================ */

/* ================================================================
   AASS GPS Tracker, Traccar web branding
   Deployed to /opt/traccar/override/styles.css on the VPS.

   READ THIS BEFORE EDITING. The rules below are written to survive a
   Traccar upgrade. Three habits break that, and all three have already
   cost us a broken login page:

   1. Never target a muiltr-<hash>-<label> class. MUI generates the hash
      from the style content, so it belongs to one build and silently
      points at a different element after an upgrade. When Traccar went
      to 6.15, muiltr-4148z2-container had been reassigned to the login
      form, so a rule meant to hide a heading hid the email and password
      fields instead. If a MUI class is unavoidable, match the label
      suffix only: [class*="-sidebar"]. The hash moves, the label does not.

   2. Never hide a container. display:none on an ancestor takes its
      children with it and cannot be undone by any later rule, so a
      selector that drifts onto the wrong element removes the page with
      no error anywhere. Hide leaf elements, and guard every hide with
      :not(:has(form)) so a drifted selector can never take the form.

   Scope: every rule is scoped to main:has(>.MuiPaper-root>form), which is
   the auth card. Verified on the live app that the interior renders no
   <main> element on any route, so this cannot reach the tracker itself.
   It covers login and both reset-password steps, which share a structure.

   3. Prefer Traccar's own branding settings over CSS. logo, logoInverted,
      colorPrimary, colorSecondary, title and description are supported
      server attributes, read by the app itself, and no class-name
      reshuffle can break them. They are also what themes the app behind
      the login, which this sheet deliberately does not touch. CSS here
      should only do what those settings cannot: the front door.

   After changing this file run: npm run check:traccar-branding
   ================================================================ */

/* ---- BRAND TYPEFACES ----
   Outfit for headings, Inter for body, self-hosted from the override
   directory. Served from our own host on purpose: a webfont fetched
   from a CDN at load time falls back to a system stack whenever that
   CDN is slow or blocked, and inconsistent type across AASS surfaces is
   the thing the brand rule exists to prevent. */
@font-face {
    font-family: 'AASS Outfit';
    src: url('/outfit-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AASS Inter';
    src: url('/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --aass-ink: #050b16;
    --aass-card: rgba(12, 22, 38, 0.72);
    --aass-line: rgba(148, 178, 205, 0.16);
    --aass-accent: #0891b2;
    --aass-accent-bright: #22d3ee;
    --aass-text: #f1f6fb;
    --aass-muted: #93a9bf;
    --aass-heading: 'AASS Outfit', 'Outfit', system-ui, sans-serif;
    --aass-body: 'AASS Inter', 'Inter', system-ui, sans-serif;
}

/* ---- PAGE ---- */
main:has(>.MuiPaper-root>form) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding: 32px 16px !important;
    box-sizing: border-box !important;
    background: var(--aass-ink) url('/background.webp') no-repeat center center / cover !important;
    font-family: var(--aass-body) !important;
    position: relative !important;
}

/* Scrim and vignette. The photograph carries the subject, the card
   carries the content, and this is what keeps them from competing. */
main:has(>.MuiPaper-root>form)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(120% 90% at 50% 45%, rgba(5, 11, 22, 0.25) 0%, rgba(5, 11, 22, 0.82) 70%, rgba(5, 11, 22, 0.94) 100%),
        linear-gradient(150deg, rgba(8, 145, 178, 0.18) 0%, rgba(5, 11, 22, 0.55) 55%, rgba(5, 11, 22, 0.8) 100%) !important;
    z-index: 0 !important;
}

main:has(>.MuiPaper-root>form)>* {
    position: relative !important;
    z-index: 1 !important;
}

/* ---- HIDE THE MARKETING SIDEBAR ----
   Matched by label suffix, not by position and not by hash. The :not()
   guards are the safety net: if a future build renames the sidebar and
   this selector drifts, it still cannot swallow the login card. The
   guard is :has(form) and :has(password), not :has(input), because a
   language select contains an input of its own. */
main:has(>.MuiPaper-root>form)>[class*="-sidebar"]:not(:has(form)):not(:has(input[type="password"])):not(.MuiPaper-root),
main:has(>.MuiPaper-root>form)>div:first-child:not(:has(form)):not(:has(input[type="password"])):not(.MuiPaper-root) {
    display: none !important;
}

/* ---- LOGIN CARD ---- */
main:has(>.MuiPaper-root>form)>.MuiPaper-root {
    position: relative !important;
    box-sizing: border-box !important;
    background: var(--aass-card) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
    border: 1px solid var(--aass-line) !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
        0 40px 80px -24px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(8, 145, 178, 0.12) !important;
    padding: 128px 40px 34px 40px !important;
    /* Both are needed: width alone lost to Traccar's own layout rules and
       let the card render full bleed at 1368px. */
    width: 440px !important;
    max-width: min(440px, 100%) !important;
    flex: 0 0 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    color: var(--aass-text) !important;
    font-family: var(--aass-body) !important;
}

/* A single hairline of brand colour along the top edge, in place of the
   heavy 4px bar this card used to wear. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root::before {
    content: "" !important;
    position: absolute !important;
    top: -44px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88px !important;
    height: 88px !important;
    background: #0b1524 url('/logo.webp') center/cover no-repeat !important;
    border: 1px solid rgba(34, 211, 238, 0.45) !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 0 6px rgba(8, 145, 178, 0.12),
        0 18px 36px -12px rgba(0, 0, 0, 0.8) !important;
    z-index: 50 !important;
}

/* The wordmark, set as the two-line lockup used on AASS letterheads.
   Both lines live in one pseudo-element; they used to be split across
   the card and the form, which put the second line underneath the reset
   link the moment Traccar moved that link inside the form. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root::after {
    content: "ASANTE AUTOMATION\A & SECURITY SOLUTION" !important;
    white-space: pre !important;
    position: absolute !important;
    top: 62px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-family: var(--aass-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
    letter-spacing: 0.14em !important;
    color: var(--aass-text) !important;
    text-wrap: balance !important;
    z-index: 40 !important;
}

/* Says where you have landed, for a customer signing in to find a
   vehicle rather than an operator who already knows. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form::before {
    content: "Fleet tracking portal" !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--aass-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--aass-accent-bright) !important;
    opacity: 0.85 !important;
    margin: 0 0 22px !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    /* Traccar leaves trailing space at the end of the form, which reads as
       a lopsided card once the card is no longer full height. */
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--aass-body) !important;
}

/* ---- FIELDS ---- */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiInputBase-root {
    background: rgba(6, 14, 26, 0.6) !important;
    border-radius: 12px !important;
    color: var(--aass-text) !important;
    font-family: var(--aass-body) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiOutlinedInput-notchedOutline {
    border-color: var(--aass-line) !important;
    border-radius: 12px !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: rgba(34, 211, 238, 0.4) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--aass-accent-bright) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form input {
    font-family: var(--aass-body) !important;
    font-size: 0.9375rem !important;
    color: var(--aass-text) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form input:-webkit-autofill {
    -webkit-text-fill-color: var(--aass-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #0b1524 inset !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiInputLabel-root {
    font-family: var(--aass-body) !important;
    color: var(--aass-muted) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiInputLabel-root.Mui-focused {
    color: var(--aass-accent-bright) !important;
}

/* ---- SUBMIT ---- */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form button[type="submit"] {
    background: linear-gradient(135deg, var(--aass-accent-bright) 0%, var(--aass-accent) 55%, #0369a1 100%) !important;
    color: #04121b !important;
    font-family: var(--aass-heading) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
    box-shadow: 0 12px 28px -12px rgba(34, 211, 238, 0.7) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form button[type="submit"]:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 36px -12px rgba(34, 211, 238, 0.85) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ---- LINKS ---- */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form a,
main:has(>.MuiPaper-root>form)>.MuiPaper-root form [class*="-link"] {
    font-family: var(--aass-body) !important;
    font-size: 0.8125rem !important;
    color: var(--aass-muted) !important;
    text-decoration: none !important;
    transition: color 160ms ease !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form a:hover,
main:has(>.MuiPaper-root>form)>.MuiPaper-root form [class*="-link"]:hover {
    color: var(--aass-accent-bright) !important;
}

/* ---- LANGUAGE AND QR ROW ----
   Traccar positions this row fixed to the top right of the window, which
   is right for a full-window layout and wrong for ours: once the card is
   a centred panel, a viewport-anchored row lands on top of the brand
   text and hangs over the card edge. Re-anchor it to the card. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form>[class*="-options"] {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    z-index: 60 !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root .MuiSelect-select {
    max-width: 100% !important;
    box-sizing: border-box !important;
    color: var(--aass-muted) !important;
    font-family: var(--aass-body) !important;
    font-size: 0.8125rem !important;
    padding: 6px 28px 6px 8px !important;
    display: flex !important;
    align-items: center !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form>[class*="-options"] .MuiOutlinedInput-notchedOutline {
    border-color: transparent !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form>[class*="-options"] .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: var(--aass-line) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form>[class*="-options"] .MuiSvgIcon-root {
    color: var(--aass-muted) !important;
}

/* Dropdown, which renders outside the card in a portal. */
body:has(main>.MuiPaper-root>form) .MuiMenu-paper {
    background: #0b1524 !important;
    color: var(--aass-text) !important;
    border: 1px solid var(--aass-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.85) !important;
}

body:has(main>.MuiPaper-root>form) .MuiMenuItem-root {
    color: var(--aass-text) !important;
    font-family: var(--aass-body) !important;
    font-size: 0.875rem !important;
}

body:has(main>.MuiPaper-root>form) .MuiMenuItem-root:hover,
body:has(main>.MuiPaper-root>form) .MuiMenuItem-root.Mui-selected {
    background-color: rgba(8, 145, 178, 0.18) !important;
}

/* Country flags. Matched by the CDN the flag set is served from and by
   the MUI components that hold them, never by a generated class. */
body:has(main>.MuiPaper-root>form) .MuiSelect-select img,
body:has(main>.MuiPaper-root>form) .MuiMenuItem-root img,
body:has(main>.MuiPaper-root>form) img[src*="flag-icons"],
body:has(main>.MuiPaper-root>form) img[class*="flag"] {
    display: inline-block !important;
    visibility: visible !important;
    width: 20px !important;
    height: auto !important;
    border-radius: 2px !important;
    margin-right: 8px !important;
}

/* QR button, which Traccar renders squeezed into a non-square box. */
body:has(main>.MuiPaper-root>form) button[aria-label="QR Code"],
body:has(main>.MuiPaper-root>form) button.MuiIconButton-root:has(svg[data-testid="QrCodeIcon"]) {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 10px !important;
    background: rgba(8, 145, 178, 0.14) !important;
    border: 1px solid var(--aass-line) !important;
    color: var(--aass-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 160ms ease, color 160ms ease !important;
}

body:has(main>.MuiPaper-root>form) button[aria-label="QR Code"]:hover,
body:has(main>.MuiPaper-root>form) button.MuiIconButton-root:has(svg[data-testid="QrCodeIcon"]):hover {
    background: rgba(8, 145, 178, 0.28) !important;
    color: var(--aass-accent-bright) !important;
}

/* ---- TEXT COLOUR ---- */
main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiTypography-root {
    color: var(--aass-text) !important;
    font-family: var(--aass-body) !important;
}

main:has(>.MuiPaper-root>form)>.MuiPaper-root form .MuiFormHelperText-root {
    color: var(--aass-muted) !important;
}

/* ---- HIDE ONLY WHAT THIS SHEET REDRAWS ----
   Leaf elements only, never a container, each one guarded so a drifted
   selector cannot remove the login fields the way the 6.15 upgrade did. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root>.MuiTypography-root:not(:has(form)):not(:has(input)),
body:has(main>.MuiPaper-root>form) .MuiAvatar-root img {
    display: none !important;
}

/* Traccar's own logo, which the logo attribute renders. On a narrow
   screen there is no sidebar, so it moves inside the card and lands as a
   second logo under our badge. Matched on src, which is ours to set and
   does not change on upgrade, and which cannot catch a country flag. */
main:has(>.MuiPaper-root>form)>.MuiPaper-root img[src*="logo"] {
    display: none !important;
}

/* ---- SAFETY NET ----
   Whatever else this sheet does, the credentials and the submit button
   stay on screen. Visibility only, deliberately: forcing display here
   overrode MUI's inline-flex on the input wrapper and dropped the
   show-password button onto its own line. The real protection against a
   drifted selector is the :not(:has(form)) guards above and the check
   script, not this rule. This also cannot rescue a hidden ancestor,
   which is why nothing above is allowed to hide a container.

   The exclusions are not optional. MUI renders a hidden native input
   inside every Select, kept at opacity 0 on purpose; forcing it opaque
   here painted a white box over the language picker. Anything the app
   deliberately hides must stay excluded. */
body:has(main>.MuiPaper-root>form) form input:not([aria-hidden="true"]):not(.MuiSelect-nativeInput),
body:has(main>.MuiPaper-root>form) form button[type="submit"],
body:has(main>.MuiPaper-root>form) form .MuiInputBase-root,
body:has(main>.MuiPaper-root>form) form .MuiFormControl-root {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    main:has(>.MuiPaper-root>form) {
        padding: 24px 14px !important;
        align-items: flex-start !important;
        padding-top: 76px !important;
    }

    main:has(>.MuiPaper-root>form)>.MuiPaper-root {
        width: 100% !important;
        max-width: 100% !important;
        padding: 124px 22px 30px 22px !important;
        border-radius: 18px !important;
        /* Lighter blur: a large blurred surface is the most expensive
           thing on this page on a mid-range Android. */
        backdrop-filter: blur(12px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
        box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.85) !important;
    }

    main:has(>.MuiPaper-root>form)>.MuiPaper-root::before {
        width: 76px !important;
        height: 76px !important;
        top: -38px !important;
    }

    main:has(>.MuiPaper-root>form)>.MuiPaper-root::after {
        top: 52px !important;
        font-size: 1.0625rem !important;
        letter-spacing: 0.1em !important;
    }

    main:has(>.MuiPaper-root>form)>.MuiPaper-root form::before {
        font-size: 0.625rem !important;
        letter-spacing: 0.22em !important;
        margin-bottom: 22px !important;
    }

    /* A centred badge, a centred wordmark and a top-right controls row
       cannot share the top band of a 360px card. Below the fold it goes,
       as a footer, which also puts it within thumb reach. */
    main:has(>.MuiPaper-root>form)>.MuiPaper-root form>[class*="-options"] {
        position: static !important;
        order: 99 !important;
        justify-content: center !important;
        align-self: center !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    main:has(>.MuiPaper-root>form)>.MuiPaper-root form button[type="submit"],
    main:has(>.MuiPaper-root>form)>.MuiPaper-root form a,
    button.MuiIconButton-root {
        transition: none !important;
    }

    main:has(>.MuiPaper-root>form)>.MuiPaper-root form button[type="submit"]:hover {
        transform: none !important;
    }
}