/* ═══════════════════════════════════════════════════════════════════════════
   CaptivEYE Portal — sign-in card
   ───────────────────────────────────────────────────────────────────────────
   The centred card every sign-in page is built from: the full-width header
   override, the card, eyebrow/title/subtitle, labels and inputs, the password
   show/hide field, buttons, and the error/status alerts.

   Lifted verbatim from auth/login.blade.php, which is the reference: login
   renders identically on this file. Linked per page from its styles stack,
   so a page's own <style> block still loads after it and has the last word.

   Not yet used by the MFA pages. Each carries its own inline copy of these
   rules, and those copies have drifted from login (card widths, subtitle
   margins, a monospace code input), so moving them here is a visual change
   to agree first, not a mechanical one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Login page layout ───────────────────────────────────────────── */
.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* floating-nav uses margin:0 auto which collapses width in a flex
   column — override so it spans the full viewport with side padding */
.login-shell > header.floating-nav {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 22px;
    box-sizing: border-box;
}

.login-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-height) + 32px) 20px 40px;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.login-card {
    width: min(440px, 100%);
    background: var(--frame-bg);
    border: 1px solid var(--frame-border);
    border-radius: 14px;
    padding: 32px 28px 28px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6px);
}

.login-eyebrow {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}

.login-title {
    margin: 0 0 4px;
    font-family: var(--font-condensed);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
}

.login-subtitle {
    margin: 0 0 22px;
    color: var(--text-soft);
    font-size: 0.88rem;
}

/* ── Form fields ──────────────────────────────────────────────────── */
.login-grid {
    display: grid;
    gap: 12px;
}

.login-label {
    display: grid;
    gap: 5px;
    color: var(--text-main);
    font-size: 0.875rem;
    font-weight: 500;
}

.login-input {
    border: 1px solid var(--frame-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--page-bg) 70%, transparent);
    color: var(--text-main);
    padding: 10px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease);
    width: 100%;
}

.login-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── Password field with show/hide toggle ────────────────────────── */
.login-password-wrap {
    position: relative;
    display: flex;
}

.login-password-wrap .login-input {
    padding-right: 40px;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
}

.login-password-toggle:hover {
    color: var(--text-main);
}

.login-password-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, #ffffff);
    outline-offset: -2px;
}

/* ── Actions ─────────────────────────────────────────────────────── */
.login-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.login-btn {
    display: block;
    border: 0;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--font-condensed);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background var(--ease), opacity var(--ease);
}

.login-btn-primary {
    background: var(--accent);
    color: #fff;
}

.login-btn-primary:hover {
    background: #d97706;
}

.login-btn-secondary {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--frame-border);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.login-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--text-main);
}

/* Client SSO (Microsoft/Google/Okta). Deliberately a solid blue instead
   of the outlined secondary treatment: on a site where SSO is the normal
   way in, this button has to be the one that catches the eye, and it
   can't take the amber --accent that the password Login button owns. */
.login-btn-sso {
    background: #0f6cbd;
    color: #fff;
    border: 1px solid #0f6cbd;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--ease), border-color var(--ease);
}

.login-btn-sso:hover {
    background: #0b5aa0;
    border-color: #0b5aa0;
    color: #fff;
}

.login-btn-sso:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Quiet hint under the SSO button, naming the account it expects — a
   client user who also has a portal password shouldn't have to guess
   which one this is. Negative margin snugs it against the button it
   belongs to, since .login-actions is a 10px grid. */
.login-btn-sso-note {
    margin: -5px 0 0;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-soft) 72%, var(--frame-bg));
}

/* ── Alerts ──────────────────────────────────────────────────────── */
.login-errors {
    margin: 0 0 16px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #c94141 40%, var(--frame-border));
    background: color-mix(in srgb, #c94141 10%, transparent);
    color: #c94141;
    padding: 10px 12px;
    font-size: 0.875rem;
    display: grid;
    gap: 3px;
}

html[data-theme="dark"] .login-errors {
    color: #ff7575;
    border-color: color-mix(in srgb, #ff7575 35%, var(--frame-border));
    background: color-mix(in srgb, #ff7575 10%, transparent);
}

.login-status {
    margin: 0 0 16px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--frame-border));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-main);
    padding: 10px 12px;
    font-size: 0.875rem;
}