/* ==========================================================================
   OLL-SFA — Login screen
   Self-contained: loaded only by resources/views/auth/login.blade.php
   ========================================================================== */

:root {
    --oll-navy: #003467;
    --oll-navy-deep: #00203f;
    --oll-navy-soft: #0a4d8f;
    --oll-cyan: #00e2fa;
    --oll-ink: #16202c;
    --oll-muted: #6b7a8c;
    --oll-line: #dfe5ec;
    --oll-field: #f6f8fb;
    --oll-danger: #b3261e;
    --oll-radius: 10px;
    --oll-shadow: 0 18px 46px rgba(0, 32, 63, .10);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body.oll-login {
    margin: 0;
    background: #eef2f7;
    color: var(--oll-ink);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Shell ---------------------------------------------------- */

.oll-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.oll-main {
    flex: 1 0 auto;
    display: flex;
}

.oll-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ---------- Left: brand panel ---------------------------------------- */

.oll-brand {
    flex: 0 0 46%;
    max-width: 46%;
    position: relative;
    overflow: hidden;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, var(--oll-navy-deep) 0%, var(--oll-navy) 52%, var(--oll-navy-soft) 100%);
    color: #fff;
}

/* soft decorative field — kept subtle, no hard shapes */
.oll-brand::before,
.oll-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.oll-brand::before {
    width: 560px;
    height: 560px;
    right: -220px;
    top: -180px;
    background: radial-gradient(circle at 50% 50%, rgba(0, 226, 250, .22) 0%, rgba(0, 226, 250, .08) 42%, rgba(0, 226, 250, 0) 72%);
}

.oll-brand::after {
    width: 420px;
    height: 420px;
    left: -160px;
    bottom: -170px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%);
}

.oll-brand > * {
    position: relative;
    z-index: 1;
}

.oll-brand__logo {
    width: 210px;
    height: auto;
    margin-bottom: auto;
}

.oll-brand__body {
    padding: 48px 0;
    max-width: 460px;
}

.oll-brand__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oll-cyan);
    margin-bottom: 18px;
}

.oll-brand__title {
    font-size: 34px;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}

.oll-brand__lede {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.oll-brand__rule {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--oll-cyan);
    margin: 28px 0;
}

.oll-brand__points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oll-brand__points li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

.oll-brand__points li:last-child { margin-bottom: 0; }

.oll-brand__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oll-cyan);
}

.oll-brand__foot {
    margin-top: auto;
    font-size: 12px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}

.oll-brand__foot span {
    display: block;
}

/* ---------- Right: form panel ---------------------------------------- */

.oll-panel {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 40px;
    background: #fff;
}

.oll-card {
    width: 100%;
    max-width: 420px;
}

.oll-card__brand {
    display: none;
    margin: -36px -30px 30px;
    padding: 26px 24px 22px;
    text-align: center;
    background: linear-gradient(140deg, var(--oll-navy-deep) 0%, var(--oll-navy) 100%);
    border-radius: 16px 16px 0 0;
}

.oll-card__logo {
    display: block;
    width: 168px;
    height: auto;
    margin: 0 auto 10px;
}

.oll-card__brandline {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--oll-cyan);
}

.oll-card__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--oll-navy);
    margin: 0 0 8px;
}

.oll-card__sub {
    font-size: 14px;
    color: var(--oll-muted);
    margin: 0 0 32px;
}

/* ---------- Alerts ---------------------------------------------------- */

.oll-alert {
    border-radius: var(--oll-radius);
    padding: 12px 16px;
    font-size: 13.5px;
    margin-bottom: 22px;
    border: 1px solid transparent;
}

.oll-alert ul {
    margin: 0;
    padding-left: 18px;
}

.oll-alert--error {
    background: #fdeceb;
    border-color: #f3c7c4;
    color: var(--oll-danger);
}

.oll-alert--success {
    background: #e8f6ee;
    border-color: #bfe3cd;
    color: #17683c;
}

/* ---------- Fields ---------------------------------------------------- */

.oll-field {
    margin-bottom: 16px;
}

.oll-field__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #43536a;
    margin-bottom: 5px;
}

.oll-input-wrap {
    position: relative;
    display: block;
}

.oll-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--oll-ink);
    background: var(--oll-field);
    border: 1px solid var(--oll-line);
    border-radius: var(--oll-radius);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.oll-input::-webkit-input-placeholder { color: #9aa7b6; }
.oll-input::-moz-placeholder { color: #9aa7b6; opacity: 1; }
.oll-input:-ms-input-placeholder { color: #9aa7b6; }
.oll-input::placeholder { color: #9aa7b6; }

.oll-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--oll-navy);
    box-shadow: 0 0 0 3px rgba(0, 52, 103, .12);
}

.oll-input--has-toggle {
    padding-right: 54px;
}

.oll-field--invalid .oll-input {
    border-color: var(--oll-danger);
    background: #fffafa;
}

/* ---------- Verification question ------------------------------------------
   The question and its answer box sit on one line. The answer is one or two
   digits, so the field is sized to that rather than stretching the full width
   of the form, which would suggest a long value is expected.
   -------------------------------------------------------------------------- */

.oll-math {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oll-math__q {
    flex: 0 0 auto;
    padding: 0 12px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--oll-ink);
    background: var(--oll-field);
    border: 1px solid var(--oll-line);
    border-radius: var(--oll-radius);
    /* The question is a value to read, not text to select and paste around. */
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.oll-math__a {
    /* Wide enough for two digits plus a minus sign, no wider. */
    width: 80px;
    flex: 0 0 80px;
    text-align: center;
    font-weight: 600;
    letter-spacing: .04em;
}

.oll-field__error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--oll-danger);
}

.oll-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    padding: 0 12px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oll-muted);
    cursor: pointer;
}

.oll-toggle:hover,
.oll-toggle:focus {
    color: var(--oll-navy);
}

.oll-toggle:focus {
    outline: 2px solid rgba(0, 52, 103, .35);
    outline-offset: -2px;
    border-radius: var(--oll-radius);
}

/* ---------- Button ----------------------------------------------------- */

.oll-btn {
    /* The removed remember-row used to supply the gap above the button; the
       last field only contributes its own 20px, so make up the difference
       here rather than leaving the button crowded against the form. */
    margin-top: 6px;
    display: block;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--oll-radius);
    background: var(--oll-navy);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.oll-btn:hover {
    background: #012b56;
    box-shadow: 0 10px 22px rgba(0, 52, 103, .22);
}

.oll-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 52, 103, .28);
}

.oll-btn:active {
    transform: translateY(1px);
}

.oll-btn[disabled] {
    opacity: .68;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.oll-note {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--oll-line);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--oll-muted);
    text-align: center;
}

/* ---------- Footer ------------------------------------------------------ */

.oll-footer {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 18px 24px;
    font-size: 12px;
    color: var(--oll-muted);
    background: #fff;
    border-top: 1px solid var(--oll-line);
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1200px) {
    .oll-brand { padding: 44px 46px; }
    .oll-brand__title { font-size: 29px; }
}

@media (max-width: 991px) {
    .oll-split {
        display: block;
        min-height: 0;
    }

    .oll-brand {
        display: none;
    }

    .oll-panel {
        min-height: 100vh;
        padding: 40px 24px;
        background: #eef2f7;
    }

    .oll-card {
        max-width: 440px;
        padding: 36px 30px 32px;
        background: #fff;
        border: 1px solid var(--oll-line);
        border-radius: 16px;
        box-shadow: var(--oll-shadow);
    }

    .oll-card__brand {
        display: block;
    }

    .oll-card__title,
    .oll-card__sub {
        text-align: center;
    }

    .oll-footer {
        display: flex;
    }
}

@media (max-width: 480px) {
    .oll-panel { padding: 24px 16px; }
    .oll-card {
        padding: 28px 20px 24px;
        border-radius: 14px;
    }
    .oll-card__brand {
        margin: -28px -20px 26px;
        border-radius: 14px 14px 0 0;
    }
    .oll-card__title { font-size: 22px; }
}