/* ============================================================================
   Sign-in screen for Rangeela Reports.

   Standalone on purpose: the nanite theme and the 440KB icon font are only
   linked for authenticated pages, so this file carries everything the login
   screen needs and every icon on it is inline SVG.
   ============================================================================ */

:root {
    --au-brand:      #5a4bf2;
    --au-brand-2:    #8b5cf6;
    --au-brand-3:    #e0489b;
    --au-brand-soft: #eef0ff;

    --au-ink:      #16172e;
    --au-muted:    #7b7d94;
    --au-border:   #e5e6f2;
    --au-surface:  #ffffff;
    --au-plane:    #f5f6fc;

    --au-danger-soft: #fdecef;

    --au-shadow-lg: 0 24px 60px -24px rgba(35, 28, 110, .35);
    --au-radius:    14px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    color: var(--au-ink);
    background: var(--au-plane);
    -webkit-font-smoothing: antialiased;
}

/* ── shell ──────────────────────────────────────────────────────────────── */
.au-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* ── left: brand panel ──────────────────────────────────────────────────── */
.au-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
    color: #fff;
    background: linear-gradient(145deg, #4a3df0 0%, #6d4bf0 38%, #9a44e0 68%, #d9479a 100%);
}

/* soft light blooms - behind everything, never intercept clicks */
.au-visual::before,
.au-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.au-visual::before {
    width: 520px; height: 520px;
    top: -170px; right: -140px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.30), rgba(255,255,255,0) 68%);
    animation: au-drift 18s ease-in-out infinite;
}
.au-visual::after {
    width: 420px; height: 420px;
    bottom: -150px; left: -110px;
    background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
    animation: au-drift 22s ease-in-out infinite reverse;
}

@keyframes au-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-26px, 24px, 0) scale(1.08); }
}

/* faint grid so the panel reads as a surface, not just a gradient */
.au-visual-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
    pointer-events: none;
}

.au-visual > * { position: relative; z-index: 1; }

.au-visual-body { max-width: 460px; }

.au-headline {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}
.au-headline em {
    font-style: normal;
    background: linear-gradient(90deg, #ffe9a8, #ffd2ec);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.au-subline {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 30px;
    color: rgba(255,255,255,.82);
    max-width: 42ch;
}

.au-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.au-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255,255,255,.94);
}
.au-points .au-tick {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
}
.au-points svg { width: 14px; height: 14px; display: block; }

.au-visual-foot {
    font-size: 12.5px;
    color: rgba(255,255,255,.72);
    display: flex;
    align-items: center;
    gap: 8px;
}
.au-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #7ef0c0;
    box-shadow: 0 0 0 4px rgba(126,240,192,.22);
}

/* ── brand mark (both panes) ────────────────────────────────────────────── */
.au-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.au-mark {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--au-brand) 0%, var(--au-brand-2) 55%, var(--au-brand-3) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    box-shadow: 0 6px 16px -6px rgba(90, 75, 242, .7);
}
.au-visual .au-mark {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: none;
}
.au-brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.au-brand-name strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.au-brand-name span { font-size: 11.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; opacity: .62; }
.au-visual .au-brand-name { color: #fff; }

/* ── right: form pane ───────────────────────────────────────────────────── */
.au-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--au-surface);
}
.au-form-wrap { width: 100%; max-width: 384px; }

.au-form-pane .au-brand { margin-bottom: 34px; color: var(--au-ink); }

.au-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.au-lede  { font-size: 14px; color: var(--au-muted); margin: 0 0 26px; }

.au-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--au-danger-soft);
    color: #9b1c33;
    border: 1px solid rgba(217, 45, 75, .18);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}
.au-alert svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

.au-field { margin-bottom: 16px; }
.au-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--au-ink);
    margin-bottom: 7px;
}

.au-input-wrap { position: relative; display: flex; align-items: center; }
.au-input-wrap .au-icon {
    position: absolute;
    left: 13px;
    width: 17px; height: 17px;
    color: #9a9cb4;
    pointer-events: none;
    transition: color .15s ease;
}
.au-input-wrap:focus-within .au-icon { color: var(--au-brand); }

.au-input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    font: inherit;
    font-size: 14.5px;
    color: var(--au-ink);
    background: var(--au-plane);
    border: 1.5px solid transparent;
    border-radius: 11px;
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.au-input::placeholder { color: #a9abc0; }
.au-input:hover { background: #eff0f8; }
.au-input:focus {
    background: var(--au-surface);
    border-color: var(--au-brand);
    box-shadow: 0 0 0 4px rgba(90, 75, 242, .14);
}
.au-has-peek .au-input { padding-right: 44px; }

.au-peek {
    position: absolute;
    right: 6px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0;
    background: none;
    color: #9a9cb4;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.au-peek:hover { color: var(--au-ink); background: rgba(22,23,46,.05); }
.au-peek svg { width: 17px; height: 17px; }
.au-peek .au-eye-off { display: none; }
.au-peek[aria-pressed="true"] .au-eye-off { display: block; }
.au-peek[aria-pressed="true"] .au-eye-on  { display: none; }

.au-submit {
    width: 100%;
    height: 47px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--au-brand) 0%, var(--au-brand-2) 100%);
    box-shadow: 0 10px 22px -12px rgba(90, 75, 242, .95);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.au-submit svg { width: 17px; height: 17px; transition: transform .2s ease; }
.au-submit:hover { filter: brightness(1.06); box-shadow: 0 14px 28px -12px rgba(90, 75, 242, .95); }
.au-submit:hover svg { transform: translateX(3px); }
.au-submit:active { transform: translateY(1px); }
.au-submit:focus-visible { outline: 3px solid rgba(90,75,242,.35); outline-offset: 2px; }

.au-foot {
    margin: 26px 0 0;
    font-size: 12px;
    color: var(--au-muted);
    text-align: center;
    line-height: 1.6;
}

/* ── compact header, shown once the brand panel drops away ──────────────── */
.au-mobile-head { display: none; }

@media (max-width: 991.98px) {
    .au-shell { grid-template-columns: 1fr; }
    .au-visual { display: none; }
    .au-form-pane { background: var(--au-plane); padding: 0 16px 40px; align-items: flex-start; }
    .au-form-pane .au-brand { display: none; }

    .au-mobile-head {
        display: block;
        margin: 0 -16px 22px;
        padding: 28px 22px 34px;
        background: linear-gradient(140deg, #4a3df0 0%, #7d47ea 55%, #d9479a 120%);
        border-radius: 0 0 22px 22px;
    }
    .au-mobile-head .au-brand { margin: 0; }
    .au-mobile-head .au-brand-name { color: #fff; }
    .au-mobile-head .au-mark {
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.26);
        box-shadow: none;
    }
    .au-form-wrap {
        max-width: 420px;
        background: var(--au-surface);
        border-radius: var(--au-radius);
        box-shadow: var(--au-shadow-lg);
        padding: 26px 22px 24px;
        margin-top: -26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .au-visual::before, .au-visual::after { animation: none; }
    .au-submit, .au-submit svg, .au-input { transition: none; }
}