/* Fleet Management System -- the portal's sign-in and password reset pages, in the public
   website's design (the handoff's "CRM Login" board): a form on one side, a tilting 3D picture of
   the company's CRM on the other, in the company's own colour when the website has just created it.

   Standalone on purpose. These pages set Layout = null and do not load Bootstrap or
   fleet-theme.css, so nothing here can leak into the portal and nothing in the portal can move
   these pages. The prefix is sgn-.

   Colours are the website's Signal Orange tokens in both modes. The company's colour arrives as
   --br (always #rrggbb, checked on the server) with its text colour --br-ink, chosen there by
   contrast. As TEXT the colour is darkened in light mode (--br-text), because a bright brand colour
   on a pale page measures well under 4.5:1 -- the product's own orange is 2.9:1 on #F4F2EE.

   The select-company and verification-code screens keep their own styles (fleet-theme.css). */

:root,
:root[data-theme="dark"] {
    --sgn-page: #0A0E14;
    --sgn-raised: #111823;
    --sgn-sunken: #070A0F;
    --sgn-text: #E9EDF3;
    --sgn-muted: #98A2B0;
    --sgn-line: rgba(255, 255, 255, .09);
    --sgn-line-2: rgba(255, 255, 255, .18);
    --sgn-ok-ink: #3DD39D;
    --sgn-ok-wash: rgba(33, 192, 139, .14);
    --sgn-bad-ink: #FF6F73;
    --sgn-bad-wash: rgba(229, 72, 77, .15);
    --sgn-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
    --br-text: #FFFFFF;
    color-scheme: dark;
}

:root[data-theme="light"] {
    --sgn-page: #F4F2EE;
    --sgn-raised: #FFFFFF;
    --sgn-sunken: #EAE7E1;
    --sgn-text: #0F141B;
    --sgn-muted: #4F5864;
    --sgn-line: rgba(10, 14, 20, .11);
    --sgn-line-2: rgba(10, 14, 20, .22);
    --sgn-ok-ink: #0A7A52;
    --sgn-ok-wash: #DDF5EC;
    --sgn-bad-ink: #B4232A;
    --sgn-bad-wash: #FBE3E4;
    --sgn-shadow: 0 24px 50px -28px rgba(20, 24, 32, .3);
    --br-text: color-mix(in srgb, var(--br) 58%, #000);
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    background: var(--sgn-page);
    color: var(--sgn-text);
    font: 16px/1.55 "IBM Plex Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--br-text); text-underline-offset: 3px; }
a:hover { color: var(--sgn-text); }
:focus-visible { outline: 2px solid var(--br); outline-offset: 2px; }

.sgn {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* ------------------------------------------------------------------ form side */

.sgn-side {
    display: flex;
    flex-direction: column;
    padding: 28px clamp(20px, 5vw, 64px);
}

.sgn-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sgn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--sgn-text);
    text-decoration: none;
    font-weight: 600;
}

.sgn-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sgn-tile {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: var(--br);
    color: var(--br-ink);
    display: grid;
    place-items: center;
    font: 700 13px "Space Grotesk", sans-serif;
    letter-spacing: .02em;
}

.sgn-mode {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sgn-line-2);
    border-radius: 5px;
    background: transparent;
    color: var(--sgn-text);
    cursor: pointer;
}

.sgn-mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .sgn-mode .is-sun,
:root:not([data-theme="light"]) .sgn-mode .is-moon { display: none; }

/* The form in a raised card, centred in its half, as the User Guide draws the sign-in (12 Oct 2026). */
.sgn-main {
    flex: 0 0 auto;
    display: grid;
    align-content: start;
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 32px clamp(20px, 4vw, 40px);
    border: 1px solid var(--sgn-line);
    border-radius: 16px;
    background: var(--sgn-raised);
    box-shadow: var(--sgn-shadow);
}

.sgn-top { margin-bottom: 32px; }

.sgn-main h1 {
    margin: 0;
    font: 600 30px/1.15 "Space Grotesk", sans-serif;
    letter-spacing: -.02em;
}

.sgn-lede { margin: 8px 0 26px; color: var(--sgn-muted); }

.sgn-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 22px;
    border-radius: 5px;
    background: var(--sgn-ok-wash);
    color: var(--sgn-ok-ink);
    font-size: 14px;
}

.sgn-banner svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.sgn-form { display: grid; gap: 14px; }

.sgn-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }

.sgn-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.sgn-input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border-radius: 5px;
    border: 1px solid var(--sgn-line-2);
    background: var(--sgn-sunken);
    color: var(--sgn-text);
    font: 15px "IBM Plex Sans", sans-serif;
}

.sgn-input:focus { outline: 2px solid var(--br); outline-offset: 0; border-color: transparent; }
.sgn-input.input-validation-error { border-color: var(--sgn-bad-ink); }

.sgn-err { font-size: 13px; font-weight: 400; color: var(--sgn-bad-ink); }
.sgn-err:empty, .sgn-err.field-validation-valid { display: none; }

.sgn-help { font-size: 13px; font-weight: 400; color: var(--sgn-muted); }

/* "Forgot password?" is a submit button of the sign-in form (formaction), styled as a link. */
.sgn-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--br-text);
    font: 500 13px "IBM Plex Sans", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sgn-linkbtn:hover { color: var(--sgn-text); }

/* The forgot button comes after "Sign in" in the markup (Enter presses the first submit button) and
   is placed back on the "Keep me logged in" row here, at its right, as the User Guide draws it
   (12 Oct 2026, 02-sign-in.svg). The password, that row and the button name their rows, so messages
   flow in after them. */
.sgn-pw { grid-row: 2; grid-column: 1; }
.sgn-form > .sgn-check { grid-row: 3; grid-column: 1; justify-self: start; }
.sgn-forgot { grid-row: 3; grid-column: 1; justify-self: end; align-self: center; text-decoration: none; font-weight: 600; }
.sgn-forgot:hover { text-decoration: underline; }

.sgn-check {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    color: var(--sgn-muted);
    cursor: pointer;
}

.sgn-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--br); }

.sgn-msg { margin: 0; font-size: 14px; }
.sgn-msg.is-bad { color: var(--sgn-bad-ink); }
.sgn-msg.is-ok { color: var(--sgn-ok-ink); }

.sgn-btn {
    height: 52px;
    border: 0;
    border-radius: 5px;
    background: var(--br);
    color: var(--br-ink);
    font: 600 16px "IBM Plex Sans", sans-serif;
    cursor: pointer;
    transition: transform 240ms cubic-bezier(.2, .7, .2, 1), box-shadow 240ms cubic-bezier(.2, .7, .2, 1);
}

.sgn-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--br); }
.sgn-btn[disabled] { opacity: .7; cursor: progress; transform: none; }

.sgn-alt { margin: 24px 0 0; font-size: 14px; color: var(--sgn-muted); }

.sgn-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 32px 0 0;
    font-size: 12px;
    color: var(--sgn-muted);
}

.sgn-foot a { color: var(--sgn-muted); }
.sgn-foot a:hover { color: var(--sgn-text); }
.sgn-foot p { flex-basis: 100%; margin: 0 0 4px; }

/* ------------------------------------------------------------------ the 3D picture */

.sgn-stage {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 420px;
    border-left: 1px solid var(--sgn-line);
    background: radial-gradient(ellipse at 40% 30%, var(--br-wash), transparent 70%), var(--sgn-sunken);
    perspective: 1200px;
}

.sgn-scene {
    position: relative;
    width: min(80%, 440px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    will-change: transform;
}

.sgn-plane {
    position: absolute;
    inset: 8%;
    border-radius: 22px;
    border: 1px solid var(--sgn-line-2);
    transform: translateZ(-80px);
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, var(--sgn-line) 27px 28px),
        repeating-linear-gradient(90deg, transparent 0 27px, var(--sgn-line) 27px 28px);
}

.sgn-card {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 22%;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--sgn-line-2);
    background: var(--sgn-raised);
    box-shadow: var(--sgn-shadow);
    transform: translateZ(20px);
}

.sgn-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.sgn-card-head .sgn-tile { width: 30px; height: 30px; font-size: 12px; }
.sgn-card-head span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sgn-rows { display: grid; gap: 6px; }

.sgn-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--sgn-line);
    border-radius: 5px;
    font-size: 12.5px;
}

.sgn-num { font-family: "IBM Plex Mono", monospace; }
.sgn-num.is-ok { color: var(--sgn-ok-ink); }
.sgn-num.is-due { color: #F5A524; }
:root[data-theme="light"] .sgn-num.is-due { color: #8A5800; }

.sgn-chip {
    position: absolute;
    padding: 10px 14px;
    border-radius: 5px;
    border: 1px solid var(--sgn-line-2);
    background: var(--sgn-raised);
    box-shadow: var(--sgn-shadow);
    font-size: 13px;
    white-space: nowrap;
}

.sgn-chip.is-a { right: 2%; bottom: 14%; border-color: var(--br); box-shadow: 0 0 0 4px var(--br-wash), var(--sgn-shadow); transform: translateZ(110px); font-weight: 600; }
.sgn-chip.is-b { left: 0; top: 8%; transform: translateZ(150px); }
.sgn-chip.is-b .sgn-num { color: var(--sgn-muted); margin-right: 4px; }

@media (max-width: 859px) {
    .sgn-stage { min-height: 320px; border-left: 0; border-top: 1px solid var(--sgn-line); }
}

@media (prefers-reduced-motion: reduce) {
    .sgn-btn { transition: none; }
    .sgn-btn:hover { transform: none; }
}