/* Login page. Deliberately its own stylesheet rather than more rules in pli1.css:
   that file is shared with rv/manager.php (the map view) and rv/welcome.php, and
   nothing here should be able to disturb the map.

   Tokens are the same ones manage_users.css uses, so login matches the modern
   Control Panel / admin look instead of reading as a different application. */

:root {
    /* Declares that both palettes exist, so the browser renders form controls and
       scrollbars to match and does not invent a dark theme of its own on top of
       ours. The dark values live in the prefers-color-scheme block at the foot. */
    color-scheme: light dark;

    --accent: #2f855a;
    --accent-strong: #276749;
    --accent-soft: #e6f4ec;
    --accent-muted: #7fb096;
    --bg: #eef2f1;
    --panel: #ffffff;
    --field: #ffffff;
    --border: #e2e8f0;
    --text: #1a2b23;
    --muted: #6b7c74;
    --danger: #c53030;
    --danger-bg: #fdecec;
    --danger-border: #f5c6c6;
    --card-shadow: 0 10px 30px rgba(20, 45, 35, 0.06);
    /* Lightens the artwork on dark, where a 15%-opacity green would disappear
       against a near-black page. No-op in light. */
    --art-filter: none;
    --radius: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* Centre the card and keep it centred when the keyboard opens on a phone:
       min-height with dvh avoids the mobile-browser toolbar collapsing the box. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* Line-art watermark: a helicopter running a power line, which is what the app is
   for. An SVG rather than a photo so it is ~2 KB, stays crisp at any size, and can
   be recoloured by editing one stroke value. Anchored bottom-centre and allowed to
   bleed off the sides, so narrow viewports keep the pylons rather than a crop of
   empty sky.

   It lives on a layer of its own rather than on body, purely so --art-filter can
   act on it: filter on body would drag the card and every label through it too. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/xr8/images/login-bg.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: max(1100px, 118%) auto;
    filter: var(--art-filter);
    pointer-events: none;
    z-index: 0;
}

.login-card {
    /* Above the artwork layer, and opaque, so the drawing never costs contrast. */
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 30px 28px 26px;
}

/* The page had no heading at all, so this is the h1 as well as the wordmark. */
.login-title {
    margin: 0 0 2px;
    font-size: 1.05rem;
    font-weight: 600;
}

.login-sub {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--muted);
}

.login-field { margin-bottom: 14px; }

.login-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 500;
}

.login-field input[type=text],
.login-field input[type=password] {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field);
    color: var(--text);
}

.login-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The reveal toggle sits inside the field box, so the input needs room for it.
   Both type selectors are named because the toggle swaps the input between
   password and text, and because a bare `.login-password input` loses on
   specificity to the shorthand padding in the rule above. */
.login-password { position: relative; }
.login-password input[type=text],
.login-password input[type=password] { padding-right: 56px; }

/* Anchored to the bottom, not centred: .login-password wraps the label as well as
   the input, so top:50% would centre it across both and float it above the box.
   The input is the last child, so a small bottom offset centres it on the input. */
.login-reveal {
    position: absolute;
    bottom: 3px;
    /* 7px offset + 4px of button padding puts the label 11px in from the field's
       edge — the same gap the 1px border plus 10px padding gives the password
       text on the left. */
    right: 7px;
    height: 30px;
    padding: 0 4px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.login-reveal:hover { color: var(--text); background: var(--bg); }

.login-reveal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-submit {
    width: 100%;
    margin-top: 6px;
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-submit:hover:not([disabled]) { background: var(--accent-strong); }

.login-submit[disabled] {
    background: var(--accent-muted);
    cursor: default;
}

/* Empty until login.js writes to it, so it must not reserve space or draw a box
   when there is nothing to say — hence :empty rather than a JS class toggle. */
.login-message {
    display: block;
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid var(--danger-border);
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13px;
}

.login-message:empty { display: none; }

.login-foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .login-submit { transition: none; }
}

/* Dark theme. The light palette above stays the default; these override
   only the tokens, so every rule below is written once. */
@media (prefers-color-scheme: dark) {
    :root {
        --accent: #48a97a;
        --accent-strong: #5cbf8c;
        --accent-soft: rgba(72, 169, 122, 0.16);
        --accent-muted: #3d6b56;
        --bg: #12181a;
        --panel: #1b2422;
        --field: #141d1b;
        --border: #2c3a36;
        --text: #e6edea;
        --muted: #9aa8a2;
        --danger: #f28b82;
        --danger-bg: rgba(242, 139, 130, 0.14);
        --danger-border: rgba(242, 139, 130, 0.38);
        --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        /* The artwork is one flat green at 15%; brightness lifts it clear of a
           near-black page without needing a second copy of the drawing. */
        --art-filter: brightness(1.9) saturate(0.85);
    }

    /* --bg is now darker than the card, so the reveal button's hover would read as
       a hole punched in it. Lift instead of recess. */
    .login-reveal:hover { background: var(--field); }
}