/*
 * ARAA login page. Scoped to .araa-login (auth/login.blade.php) so the other
 * pages on layouts/auth3 keep their look. Colours come from araa-themes.css.
 */

@media screen {
    body:has(.araa-login) {
        min-height: 100vh;
        margin: 0;
        background: var(--araa-bg) !important;
        color: var(--araa-text);
        font-family: var(--araa-font) !important;
    }

    body:has(.araa-login) > .container-fluid {
        min-height: 100vh;
        padding: 0 !important;
        background: var(--araa-bg) !important;
    }

    .araa-login {
        min-height: 100vh;
        display: grid;
        grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
    }

    /* Brand panel */
    .araa-login__brand {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 32px;
        padding: 48px 52px;
        overflow: hidden;
        background-color: var(--araa-rail);
        background-image: var(--araa-rail-pattern);
        background-size: 56px 56px;
        color: var(--araa-rail-text);
    }

    .araa-login__brand::after {
        width: 420px;
        height: 420px;
        position: absolute;
        inset-block-end: -160px;
        inset-inline-end: -140px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--araa-rail-indicator) 26%, transparent), transparent 70%);
        content: "";
        pointer-events: none;
    }

    .araa-login__logo {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .araa-login__logo img {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    }

    .araa-login__logo span {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

    .araa-login__logo strong {
        color: var(--araa-rail-text-strong) !important;
        font-family: var(--araa-font-latin);
        font-size: calc(26px * var(--araa-fs, 1));
        font-weight: 800;
        letter-spacing: 3px;
    }

    .araa-login__logo small {
        margin-top: 6px;
        color: var(--araa-rail-muted);
        font-family: var(--araa-font-latin);
        font-size: calc(11px * var(--araa-fs, 1));
        font-weight: 700;
        letter-spacing: 4px;
    }

    .araa-login__pitch {
        position: relative;
        z-index: 1;
        max-width: 470px;
    }

    .araa-login__pitch h2 {
        margin: 0 0 14px;
        color: var(--araa-rail-text-strong) !important;
        font-size: clamp(26px, 2.4vw, 36px);
        font-weight: 700;
        line-height: 1.35;
    }

    .araa-login__pitch p {
        margin: 0 0 26px;
        color: var(--araa-rail-text);
        font-size: calc(16px * var(--araa-fs, 1));
        line-height: 1.8;
    }

    .araa-login__pitch ul {
        display: grid;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .araa-login__pitch li {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--araa-rail-text-strong);
        font-size: calc(15px * var(--araa-fs, 1));
        font-weight: 600;
    }

    .araa-login__pitch li::before {
        width: 26px;
        height: 26px;
        display: inline-flex;
        flex: 0 0 26px;
        align-items: center;
        justify-content: center;
        border: 1px solid color-mix(in srgb, var(--araa-rail-indicator) 55%, transparent);
        border-radius: 8px;
        background: color-mix(in srgb, var(--araa-rail-indicator) 18%, transparent);
        color: var(--araa-rail-indicator);
        font-size: calc(13px * var(--araa-fs, 1));
        content: "\2713";
    }

    .araa-login__copy {
        position: relative;
        z-index: 1;
        align-self: flex-end;
        color: var(--araa-rail-muted);
        font-family: var(--araa-font-latin);
        font-size: calc(12px * var(--araa-fs, 1));
    }

    /* Form panel */
    .araa-login__panel {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
        background-color: var(--araa-bg);
        background-image: var(--araa-pattern);
        background-size: 56px 56px;
    }

    .araa-login .login-content {
        width: min(440px, 100%);
        max-width: none;
        margin: 0;
        animation: araa-login-in 360ms ease-out both;
    }

    .araa-login .araa-login__card {
        margin: 0 !important;
        padding: 30px !important;
        border: 1px solid var(--araa-border) !important;
        border-radius: 20px !important;
        background: var(--araa-surface) !important;
        box-shadow: var(--araa-shadow) !important;
        --tw-ring-color: transparent;
    }

    .araa-login .araa-login__card > div {
        max-width: none;
        padding: 0;
    }

    .araa-login .araa-login__lang {
        align-items: flex-end;
    }

    .araa-login .araa-login__lang details {
        margin: 0 !important;
    }

    .araa-login .araa-login__lang summary {
        padding: 6px 12px;
        border: 1px solid var(--araa-border-strong);
        border-radius: 999px;
        background: var(--araa-surface-raised) !important;
        color: var(--araa-text-soft) !important;
        font-size: calc(13px * var(--araa-fs, 1)) !important;
        cursor: pointer;
    }

    .araa-login .araa-login__lang ul {
        border: 1px solid var(--araa-border-strong);
        background: var(--araa-surface-raised) !important;
    }

    .araa-login .araa-login__lang ul a {
        color: var(--araa-text-soft) !important;
    }

    .araa-login h1 {
        margin: 0;
        color: var(--araa-text) !important;
        font-size: calc(26px * var(--araa-fs, 1)) !important;
        font-weight: 700 !important;
    }

    .araa-login h2.tw-text-sm {
        margin: 6px 0 0;
        color: var(--araa-muted) !important;
        font-size: calc(14px * var(--araa-fs, 1)) !important;
    }

    .araa-login .tw-dw-label span,
    .araa-login .tw-dw-label .tw-text-black {
        color: var(--araa-text-soft) !important;
        font-size: calc(13px * var(--araa-fs, 1)) !important;
        font-weight: 600 !important;
    }

    .araa-login .tw-dw-label a {
        background: none !important;
        color: var(--araa-accent) !important;
        -webkit-text-fill-color: currentColor;
    }

    .araa-login input#username,
    .araa-login input#password {
        width: 100%;
        height: 50px !important;
        border: 1px solid var(--araa-border-strong) !important;
        border-radius: 12px !important;
        background: var(--araa-surface-raised) !important;
        color: var(--araa-text) !important;
        font-size: calc(15px * var(--araa-fs, 1));
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .araa-login input#username:focus,
    .araa-login input#password:focus {
        border-color: var(--araa-accent) !important;
        box-shadow: 0 0 0 4px var(--araa-accent-soft);
        outline: none;
    }

    .araa-login .show_hide_icon {
        border: 0;
        background: transparent;
    }

    .araa-login .show_hide_icon svg {
        stroke: var(--araa-muted);
    }

    .araa-login .tw-dw-checkbox {
        border-color: var(--araa-border-strong);
    }

    .araa-login .login-button {
        height: 52px !important;
        border: 0;
        border-radius: 12px !important;
        background: var(--araa-btn-bg) !important;
        color: var(--araa-btn-ink) !important;
        font-size: calc(16px * var(--araa-fs, 1)) !important;
        font-weight: 700 !important;
        box-shadow: 0 12px 28px color-mix(in srgb, var(--araa-btn-bg) 30%, transparent);
        transition: filter 150ms ease, transform 150ms ease;
    }

    .araa-login .login-button:hover,
    .araa-login .login-button:focus-visible {
        filter: brightness(1.07);
        transform: translateY(-1px);
    }

    .araa-login .help-block,
    .araa-login .help-block strong {
        color: var(--araa-danger) !important;
    }

    .araa-login a.tw-text-gray-500 {
        color: var(--araa-muted) !important;
    }

    .araa-login a.tw-text-gray-500 span {
        background: none !important;
        color: var(--araa-accent) !important;
        -webkit-text-fill-color: currentColor;
    }

    @keyframes araa-login-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
    }

    @media (max-width: 900px) {
        .araa-login {
            grid-template-columns: minmax(0, 1fr);
        }

        .araa-login__brand {
            padding: 22px 22px 26px;
            gap: 14px;
        }

        .araa-login__pitch h2 {
            margin-bottom: 6px;
            font-size: calc(20px * var(--araa-fs, 1));
        }

        .araa-login__pitch p,
        .araa-login__pitch ul,
        .araa-login__copy {
            display: none;
        }

        .araa-login__panel {
            align-items: flex-start;
            padding: 24px 16px 40px;
        }

        .araa-login .araa-login__card {
            padding: 22px !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .araa-login .login-content {
            animation: none;
        }
    }
}