/* ==========================================================================
   MotoTrack24 — GPS login page
   Layout: full-page 3D scene with a transparent glass login panel on the right (40%)
   ========================================================================== */

:root {
    --gl-navy-900: #06121f;
    --gl-navy-800: #0a1b2e;
    --gl-navy-700: #0f2740;
    --gl-navy-600: #16375a;
    --gl-green-500: #16b27a;
    --gl-green-400: #2fd494;
    --gl-cyan-400: #38bdf8;
    --gl-text: #e7eef7;
    --gl-muted: #93a4b8;
    --gl-line: rgba(148, 178, 214, .18);
    --gl-danger: #f87171;
    --gl-radius: 18px;
    --gl-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

html, body { height: 100%; }

body.gps-login {
    margin: 0;
    font-family: var(--gl-font);
    color: var(--gl-text);
    background: var(--gl-navy-900);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.gps-login__layout {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

/* --------------------------------------------------------------------------
   Left — 3D scene
   -------------------------------------------------------------------------- */
.gps-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, #9cc9ee 0%, #cfe6f6 55%, #6f9c8a 56%, #2c5f6d 100%);
}

.gps-scene canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* three.js canvas + marker layer live here */
.gps-scene__mount { position: absolute; inset: 0; z-index: 1; }

/* static picture used when WebGL is unavailable (or while the scene loads) */
.gps-scene__fallback {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity .6s ease;
}
.gps-no-webgl .gps-scene__fallback { opacity: 1; }

/* very light shading behind the glass panel so the form stays readable over bright sky */
.gps-scene::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    background: none;
    pointer-events: none;
    z-index: 3;
}

/* scene caption */
.gps-scene__caption {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(6, 18, 31, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 12.5px;
    color: #d6e3f1;
    letter-spacing: .2px;
    pointer-events: none;
}
.gps-scene__caption b { color: #fff; font-weight: 600; }
.gps-scene__live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gl-green-400);
    box-shadow: 0 0 0 0 rgba(47, 212, 148, .7);
    animation: glPulse 2s ease-out infinite;
}

/* loading shimmer while three.js initialises */
.gps-scene__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    letter-spacing: .4px;
    transition: opacity .5s ease;
}
.gps-scene.is-ready .gps-scene__loader,
.gps-no-webgl .gps-scene__loader { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   Floating GPS markers (DOM overlay, positioned from the 3D scene)
   -------------------------------------------------------------------------- */
.gps-markers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.gps-marker {
    position: absolute;
    left: 0; top: 0;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.gps-marker__card {
    min-width: 92px;
    padding: 5px 9px 6px;
    border-radius: 9px;
    background: rgba(8, 22, 38, .82);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.gps-marker__id {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .4px;
}
.gps-marker__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gl-marker, #2fd494);
    box-shadow: 0 0 8px var(--gl-marker, #2fd494);
}
.gps-marker__meta {
    margin-top: 2px;
    font-size: 10.5px;
    color: #b8c7d8;
    display: flex;
    gap: 6px;
}
.gps-marker__status { color: var(--gl-marker, #2fd494); font-weight: 600; }
.gps-marker__stem {
    width: 2px;
    height: 16px;
    background: linear-gradient(180deg, var(--gl-marker, #2fd494), rgba(255, 255, 255, 0));
}
.gps-marker__pin {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gl-marker, #2fd494);
    box-shadow: 0 0 0 0 var(--gl-marker, #2fd494);
    animation: glPing 1.8s ease-out infinite;
}

.gps-marker[data-status="moving"]  { --gl-marker: #2fd494; }
.gps-marker[data-status="online"]  { --gl-marker: #38bdf8; }
.gps-marker[data-status="idle"]    { --gl-marker: #fbbf24; }
.gps-marker[data-status="offline"] { --gl-marker: #94a3b8; }
.gps-marker[data-status="offline"] .gps-marker__pin { animation: none; }

@keyframes glPing {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gl-marker, #2fd494) 70%, transparent); }
    100% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}
@keyframes glPulse {
    0%   { box-shadow: 0 0 0 0 rgba(47, 212, 148, .7); }
    100% { box-shadow: 0 0 0 10px rgba(47, 212, 148, 0); }
}

/* --------------------------------------------------------------------------
   Right — login panel
   -------------------------------------------------------------------------- */
.gps-panel {
    position: relative;
    z-index: 5;
    flex: 0 0 40%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 48px) clamp(20px, 3.5vw, 64px);
    overflow-y: auto;
    /* no panel background: only the glass login card floats over the 3D scene */
    background: transparent;
}

/* (grid texture removed: the panel is fully transparent) */
.gps-panel::before {
    display: none;
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 178, 214, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 178, 214, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
    pointer-events: none;
}

.gps-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: clamp(24px, 4vh, 40px) clamp(22px, 2.6vw, 38px);
    border-radius: var(--gl-radius);
    --gl-muted: #d6e0ea;           /* brighter secondary text on clear glass */
    /* pure glass: no colour fill, only frosted blur, a light edge and a soft shadow */
    background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(.82);
    backdrop-filter: blur(22px) saturate(1.5) brightness(.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* company logo: full card width, responsive, no background */
.gps-logo {
    display: block;
    width: 100%;
    margin-bottom: clamp(16px, 3vh, 26px);
    text-align: center;
}
.gps-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(60px, 13vh, 130px);
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.gps-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(18px, 3.4vh, 30px);
}
.gps-brand__mark {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--gl-green-500), #0e8a8f);
    box-shadow: 0 10px 22px -8px rgba(22, 178, 122, .65);
}
.gps-brand__mark svg { width: 26px; height: 26px; }
.gps-brand__logo { max-height: 46px; max-width: 150px; display: block; }
.gps-brand__name {
    margin: 0;
    font-size: clamp(22px, 2.9vh, 27px);
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
    line-height: 1.1;
}
.gps-brand__name span { color: var(--gl-green-400); }
.gps-brand__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--gl-muted);
    letter-spacing: .2px;
}

.gps-card__title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}
.gps-card__lead {
    margin: 0 0 clamp(16px, 2.8vh, 24px);
    font-size: 13.5px;
    color: var(--gl-muted);
}

/* alerts */
.gps-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1.45;
}
.gps-alert--error   { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); color: #fecaca; }
.gps-alert--success { background: rgba(47, 212, 148, .12); border: 1px solid rgba(47, 212, 148, .35); color: #bbf7d0; }
.gps-alert ul { margin: 0; padding-left: 16px; }

/* form */
.gps-field { margin-bottom: clamp(12px, 2.2vh, 18px); }
.gps-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #c8d5e4;
    letter-spacing: .3px;
}
.gps-input {
    position: relative;
}
.gps-input__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #7d8fa5;
    pointer-events: none;
}
.gps-input .form-control {
    width: 100%;
    height: clamp(46px, 5.8vh, 52px);
    padding: 0 46px 0 44px;
    font-size: 14.5px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    box-shadow: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gps-input .form-control::placeholder { color: rgba(231, 238, 247, .6); }
.gps-input .form-control:focus {
    border-color: var(--gl-green-500);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 4px rgba(22, 178, 122, .18);
}
.gps-input .form-control.is-invalid { border-color: var(--gl-danger); }
.gps-input .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(40, 70, 95, .9) inset;
    caret-color: #fff;
}
.gps-field__error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gl-danger);
}
.gps-field.has-error .gps-field__error { display: block; }
.gps-field.has-error .form-control { border-color: var(--gl-danger); }

.gps-toggle-pass {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8fa1b6;
    cursor: pointer;
}
.gps-toggle-pass:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.gps-toggle-pass svg { width: 19px; height: 19px; }

.gps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 clamp(16px, 2.8vh, 22px);
    font-size: 13px;
}
.gps-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #c8d5e4;
    font-weight: 500;
    cursor: pointer;
}
.gps-check input {
    width: 17px; height: 17px;
    margin: 0;
    accent-color: var(--gl-green-500);
    cursor: pointer;
}
.gps-link { color: var(--gl-green-400); text-decoration: none; font-weight: 600; }
.gps-link:hover, .gps-link:focus { color: #7ff0c2; text-decoration: underline; }

.gps-btn {
    position: relative;
    width: 100%;
    height: clamp(48px, 6vh, 54px);
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gl-green-500) 0%, #0e9f8f 55%, #0b7f95 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 26px -14px rgba(22, 178, 122, .9);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.gps-btn:hover { filter: brightness(1.07); box-shadow: 0 18px 30px -14px rgba(22, 178, 122, 1); }
.gps-btn:active { transform: translateY(1px); }
.gps-btn:disabled { cursor: progress; filter: saturate(.8) brightness(.95); }
.gps-btn__spinner {
    display: none;
    width: 18px; height: 18px;
    margin-right: 10px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: glSpin .8s linear infinite;
}
.gps-btn.is-loading .gps-btn__spinner { display: inline-block; }

.gps-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    font-size: 11.5px;
    color: var(--gl-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gps-divider::before, .gps-divider::after { content: ""; flex: 1; height: 1px; background: var(--gl-line); }

.gps-card__foot {
    margin-top: clamp(16px, 2.8vh, 24px);
    padding-top: 16px;
    border-top: 1px solid var(--gl-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--gl-muted);
}
.gps-card__foot a { color: #cfe0f1; text-decoration: none; }
.gps-card__foot a:hover { color: #fff; }

.gps-card .form-group { margin-bottom: 14px; } /* captcha / external login blocks */

@keyframes glSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .gps-panel { flex-basis: 44%; }
}
@media (max-width: 1080px) {
    .gps-panel { flex-basis: 50%; }
    .gps-scene__caption { display: none; }
}

/* phones / portrait tablets: login first, 3D scene becomes a light background */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
    body.gps-login { overflow: auto; }
    .gps-login__layout { display: block; min-height: 100vh; min-height: 100dvh; height: auto; }
    .gps-scene {
        position: fixed;
        inset: 0;
        z-index: 0;
    }
    .gps-scene::after {
        width: auto; left: 0;
        background: linear-gradient(180deg, rgba(6, 18, 31, .1) 0%, rgba(6, 18, 31, .55) 55%, rgba(6, 18, 31, .85) 100%);
    }
    .gps-markers { display: none; }
    .gps-panel {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        min-height: 100dvh;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-left: 0;
        box-shadow: none;
        margin-left: 0;
        align-items: flex-end;
        padding: 28vh 14px 22px;
    }
    .gps-panel::before { display: none; }
    .gps-card {
        background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gps-marker__pin, .gps-scene__live-dot { animation: none; }
}