/* MoonlightWeb — Login view (PIN / certificate auth) */

.login-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-5) 0;
}

.login-box {
    width: 100%;
    max-width: 360px;
    background:
        linear-gradient(150deg, rgba(0, 229, 255, 0.06), rgba(0, 229, 255, 0) 60%), var(--surface-2);
    border: none;
    border-radius: 0;
    clip-path: var(--notch-lg);
    box-shadow: var(--edge-cyan);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
    clip-path: var(--notch-sm);
    /* Professional Dark blue — first step of the theme retune, deliberately
       hardcoded so the rest of the (still yellow) accent tokens are untouched */
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.45));
}

/* Moonlight logo recolored via CSS mask (source PNG is gray) */
.login-logo-img {
    display: block;
    width: 48px;
    height: 48px;
    background: currentColor;
    -webkit-mask: url('../../assets/logo.png') center / contain no-repeat;
    mask: url('../../assets/logo.png') center / contain no-repeat;
}

.login-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-5);
    color: var(--text-1);
    text-shadow: 0 0 14px var(--accent-ring);
}

.login-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.login-form {
    text-align: left;
}

.login-field {
    margin-bottom: var(--space-4);
}

.login-pin-input-wrap,
.login-cert-upload-wrap {
    width: 100%;
}

.login-cert-input {
    width: 100%;
    font-size: var(--fs-sm);
    color: var(--text-2);
}
.login-cert-input::file-selector-button {
    margin-right: var(--space-3);
    padding: 8px 14px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-1);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.login-cert-input::file-selector-button:hover {
    background: var(--surface-4);
}
.login-file-selected {
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
    color: var(--text-3);
}

/* "Server selection" — the same select as everywhere else in the product, so
   the one control on this screen that is not a credential does not look like
   one. Left-aligned and in the body font: the inputs below it are mono and
   centred because a PIN is read character by character; a machine name is
   read as a word. */
.login-select {
    font-family: inherit;
    text-align: left;
}

/* "Remember me" — a checkbox row plus the hint that explains what unchecking
   costs. Tighter than a normal field: it sits between the credential input and
   the submit button and must not push the button below the fold on a phone. */
.login-remember {
    margin-bottom: var(--space-2);
}
.login-remember-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
}
.login-remember-label input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-1);
    cursor: pointer;
}
.login-remember-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--text-3);
    line-height: 1.4;
}

.login-submit {
    width: 100%;
    margin-top: var(--space-2);
}

.login-error {
    color: var(--c-danger-text);
    font-size: var(--fs-sm);
    min-height: 1.2em;
    margin: var(--space-2) 0 0;
    line-height: 1.45;
}
/* A populated error becomes a legible alert chip (soft danger panel + light red
   text). The empty placeholder stays blank so the login form doesn't shift. */
.login-error:not(:empty) {
    background: var(--c-danger-soft);
    border: 1px solid rgba(255, 42, 109, 0.35);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    min-height: 0;
}
.login-remaining {
    color: var(--c-warning);
    font-size: var(--fs-xs);
    min-height: 1em;
    margin: var(--space-1) 0 0;
}
.login-lockout {
    color: var(--c-warning);
    font-size: var(--fs-sm);
    background: var(--c-warning-soft);
    border: 1px solid rgba(240, 180, 41, 0.3);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: var(--space-2) 0 0;
    text-align: center;
}

.login-hint {
    font-size: var(--fs-xs);
    color: var(--text-3);
    margin-top: var(--space-4);
    line-height: 1.5;
}

/* "On the host machine? Open it locally" — a way back in, not a second login
   method: it sits below the PIN hint and stays as quiet as it. */
.login-host-hint {
    margin-top: var(--space-2);
}
.login-host-hint a {
    color: var(--c-accent, var(--text-2));
    text-decoration: underline;
}

/* Loading state (auth status check) */
.login-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
}
.login-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--surface-4);
    border-top-color: var(--accent-1);
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
}

/* Phone: the whole form, Unlock included, fits above the fold — and the part
   that matters once the keyboard is up (PIN, then Unlock) fits above the
   keyboard. The app header right above already reads MoonlightWeb, so the box
   drops its own logo and title, and the spacing tightens. In the PIN form,
   "Keep me signed in" moves above the PIN, so the code is the last thing typed
   and Unlock sits directly under it. Desktop is untouched. */
@media (max-width: 600px) {
    #view-login {
        min-height: 0;
        padding: 0;
    }
    #view-login .login-box {
        padding: var(--space-4);
    }
    #view-login .login-logo,
    #view-login .login-title {
        display: none;
    }
    #view-login .login-subtitle {
        margin-bottom: var(--space-3);
    }
    #view-login .login-field {
        margin-bottom: var(--space-3);
    }
    /* The hint is for a borrowed computer; this is somebody's own phone. */
    #view-login .login-remember-hint {
        display: none;
    }
    /* Empty message slots hold no room here: on a phone a line of blank is a
       line the button is pushed down by. */
    #view-login .login-error:empty,
    #view-login .login-remaining:empty {
        display: none;
    }

    .login-form--pin {
        display: flex;
        flex-direction: column;
    }
    .login-form--pin > .login-remember {
        margin-bottom: var(--space-4);
    }
    .login-form--pin > .login-field--pin,
    .login-form--pin > .login-error,
    .login-form--pin > .login-remaining,
    .login-form--pin > .login-lockout,
    .login-form--pin > .login-submit {
        order: 1;
    }
    .login-form--pin > .login-field--pin {
        margin-bottom: var(--space-2);
    }
}

/* ── First-run setup wizard ──────────────────────────────────────────────── */
.setup-box {
    max-width: 460px;
    text-align: left;
}
.setup-box .login-title,
.setup-box .login-subtitle,
.setup-box .login-logo {
    text-align: center;
}
/* Neon-green logo on the setup screen: the default yellow sits too close to the
   panel's warm tint and reads poorly. Green matches the hosts "Ready" accent. */
.setup-box .login-logo {
    background: var(--c-success-soft);
    color: var(--c-success);
    filter: drop-shadow(0 0 10px rgba(42, 212, 160, 0.45));
}
.setup-section {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-4);
}
.setup-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 var(--space-2);
}
.setup-note {
    font-size: var(--fs-xs);
    color: var(--text-2);
    line-height: 1.5;
    margin: 0 0 var(--space-2);
}
.setup-warn {
    color: var(--c-warning-text, #ffce6b);
}
.setup-ok {
    color: var(--c-success, #35c98f);
}
.setup-ok-check {
    font-weight: 700;
}
/* The button that opens a macOS privacy pane, inside the warning note that
   named it. Small and inline: it is a shortcut to a switch the user still has
   to flip themselves, not a step of the wizard. */
.setup-perm-btn {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 4px 10px;
    font-size: var(--fs-xs);
}
.setup-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-1);
    cursor: pointer;
    margin-bottom: var(--space-2);
}
.setup-check input {
    margin-top: 2px;
    flex-shrink: 0;
}
/* The Internet question is answered by pressing one of two buttons rather than
   by leaving a box alone: Passer on the left, Accepter on the right. Neither
   carries the chosen style until it is pressed, so an unanswered page looks
   unanswered — and the Start button below stays disabled while it does. */
.setup-choice {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.setup-choice-btn {
    flex: 1;
}
.setup-choice-btn.is-chosen {
    background: var(--accent-1);
    color: var(--on-accent);
    box-shadow: var(--edge-accent);
}

.setup-creds {
    margin-top: var(--space-2);
}
.activation-steps .step-failed {
    color: var(--c-danger-text);
    font-weight: 600;
}