{{--
    Auth theme — a glass card floating over the Vanta waves, matching the
    welcome page's wordmark so signing in feels like the same product as the
    page you arrived from. Same approach Obvizio uses on its auth screens, in
    Worklance's indigo rather than Obvizio's teal.

    Pair with @include('layouts.partials.vanta-background') before </body>.
--}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    /* The canvas paints over this, but it has to be here: if the Vanta scripts
       are blocked, a white body would leave white-on-glass text unreadable. */
    html, body { height: 100%; margin: 0; background: #10194d; }

    /* Above the canvas, clear of the fixed footer, and still scrollable on the
       taller forms (password reset) and short laptop viewports. */
    .page.page-center {
        position: relative;
        z-index: 10;
        max-height: 100vh;
        overflow-y: auto;
        padding-bottom: 3rem;
    }

    /* ── Brand wordmark (matches welcome.blade.php) ─────────────────────── */
    .brand-wordmark {
        font-family: 'Space Grotesk', var(--tblr-font-sans-serif), sans-serif;
        font-weight: 600;
        font-size: clamp(1.75rem, 5.5vw, 2.75rem);
        line-height: 1;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #ffffff;
        padding-left: 0.2em;
        text-shadow: 0 1px 24px rgba(0,0,0,0.35), 0 0 60px rgba(38,122,97,0.45);
    }
    .brand-sub {
        font-family: 'Space Grotesk', sans-serif;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        /* Matches .brand-wordmark: letter-spacing trails the last character, so
           centred text sits visibly left without cancelling it. */
        padding-left: 0.28em;
        color: rgba(255,255,255,0.88);
        font-size: .7rem;
        margin-top: .6rem;
    }

    /* ── Glass card ─────────────────────────────────────────────────────────
       Tinted dark rather than light. Obvizio's auth card uses a white tint and
       it works there because its waves are teal (#377269, luminance .139); the
       same tint over Worklance indigo (#4263eb, .161) puts white labels at
       4.02:1 — under the 4.5:1 AA floor. Dark tint, same white border and blur,
       reads ~10.8:1. */
    .card.card-md {
        background: rgba(11,17,50,0.55);
        border: 2px solid rgba(255,255,255,0.9);
        border-radius: 16px;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 40px rgba(0,0,0,0.45);
    }
    .card.card-md h2,
    .card.card-md .form-label,
    .card.card-md .form-check-label { color: #ffffff; }

    /* Inputs stay solid white: translucent fields over a moving background are
       genuinely hard to read while typing. */
    .card.card-md .form-control,
    .card.card-md .input-group-flat {
        background: #ffffff;
        border: 1px solid rgba(255,255,255,0.9);
        color: #000000;
    }
    .card.card-md .form-control::placeholder { color: rgba(0,0,0,0.45); }
    .card.card-md .form-control:focus {
        background: #ffffff;
        border-color: #ffffff;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
        color: #000000;
    }

    .card.card-md .btn-primary {
        color: #10194d !important;
        background: #ffffff !important;
        border: 2px solid #ffffff !important;
        font-weight: 600;
        letter-spacing: .02em;
        transition: background 150ms ease, box-shadow 150ms ease;
    }
    .card.card-md .btn-primary:hover,
    .card.card-md .btn-primary:focus {
        background: rgba(255,255,255,0.85) !important;
        box-shadow: 0 2px 18px rgba(0,0,0,0.25);
    }

    .card.card-md .text-secondary { color: rgba(255,255,255,0.90) !important; }

    /* Tabler's .alert is display:grid (icon / content / close columns), so
       plain text gets scattered across cells — force a normal block. */
    .card.card-md .alert {
        display: block !important;
        padding: 12px 16px;
        border: 1px solid rgba(255,255,255,0.35);
        border-left-width: 4px;
        border-radius: 10px;
        background: rgba(255,255,255,0.94);
        color: #1f2933;
        box-shadow: 0 2px 14px rgba(0,0,0,0.18);
        font-size: .875rem;
        line-height: 1.45;
    }
    .card.card-md .alert-success { border-left-color: #2fb344; }
    .card.card-md .alert-danger  { border-left-color: #d63939; }
    .card.card-md .alert-danger ul { margin: 0; padding-left: 1.1rem; }

    .public-footer .link-light { color: rgba(255,255,255,0.7); text-decoration: none; }
    .public-footer .link-light:hover { color: #ffffff; }
</style>