/* auth.css - Login, Sign up, Forgot / Reset password and Accept invite. */

:root {
    --shell: linear-gradient(135deg, #0f172a 0%, #1b4d89 55%, #2563eb 100%);
    --brand: linear-gradient(150deg, #1b4d89, #2563eb 70%, #4f46e5);
    --card-shadow: 0 20px 48px rgba(2, 6, 23, .45);
    --surface-1: #f1eff9;
    --ink-1: #241f38;
    --ink-2: #574f70;
    --field-bg: #ffffff;
    --field-border: #dee2e6;
    --field-muted-bg: #e9e6f2;
    --field-focus: #86b7fe;
    --field-focus-ring: rgba(13, 110, 253, .25);
    --link: #0d6efd;
    --link-hover: #0a58ca;
    --btn: #0d6efd;
    --btn-hover: #0b5ed7;
    --btn-hover-border: #0a58ca;
    --muted-btn: #6c757d;
    --danger: #dc3545;
    --ok-bg: #d1e7dd;
    --ok-ink: #0a3622;
    --ok-border: #a3cfbb;
    --bad-bg: #f8d7da;
    --bad-ink: #58151c;
    --bad-border: #f1aeb5;
}

html.dark {
    --shell: linear-gradient(135deg, #04060d 0%, #0d2440 55%, #12356e 100%);
    --brand: linear-gradient(150deg, #16406f, #1d4fb8 70%, #3f37b8);
    --card-shadow: 0 20px 48px rgba(0, 0, 0, .65);
    --surface-1: #1d1a2b;
    --ink-1: #ece9f7;
    --ink-2: #a79ec4;
    --field-bg: #14121f;
    --field-border: #3d3557;
    --field-muted-bg: #191627;
    --field-focus: #6f9dff;
    --field-focus-ring: rgba(99, 148, 255, .3);
    --link: #7dabff;
    --link-hover: #a7c6ff;
    --btn: #3b74e8;
    --btn-hover: #2f63d0;
    --btn-hover-border: #2a59bb;
    --muted-btn: #8a83a3;
    --danger: #ff7b88;
    --ok-bg: rgba(25, 135, 84, .18);
    --ok-ink: #a3e0c1;
    --ok-border: rgba(25, 135, 84, .45);
    --bad-bg: rgba(220, 53, 69, .16);
    --bad-ink: #ffb3ba;
    --bad-border: rgba(220, 53, 69, .4);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ink-1);
    background: var(--shell);
    -webkit-font-smoothing: antialiased;
}

.auth-container { width: 100%; max-width: 840px; margin: 0 auto; padding: 0 .75rem; }
.login-wrap { display: flex; justify-content: center; }

.login-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 800px;
    background: var(--surface-1);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

/* ---- Brand panel ---- */
.login-brand {
    background: var(--brand);
    color: #fff;
    padding: 2rem 1.75rem;
    display: flex;
    align-items: center;
}

.login-logo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
}

    .login-logo svg { width: 24px; height: 24px; }

.login-brand h3 { font-size: 1.45rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.01em; }
.login-brand .brand-sub { margin: 0 0 1rem; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .62); }

.login-points { list-style: none; padding: 0; margin: 0; }

    .login-points li {
        padding: .28rem 0;
        font-size: .8rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, .78);
        display: flex;
        align-items: flex-start;
        gap: .5rem;
    }

    .login-points strong { display: block; font-size: .855rem; font-weight: 700; color: #fff; }
    .login-points svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .15rem; opacity: .9; }

/* Who the tool is for - one line each, so the panel says something useful rather than decorative. */
.login-roles {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: grid;
    gap: .55rem;
}

.login-role { font-size: .765rem; line-height: 1.4; color: rgba(255, 255, 255, .72); }

    .login-role b {
        display: inline-block;
        margin-bottom: .1rem;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .95);
    }

/* ---- Form panel ---- */
.login-form { padding: 2rem 1.9rem; }
.login-form h4 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .2rem; }
.login-form .form-sub { color: var(--ink-2); font-size: .82rem; margin: 0 0 1.1rem; }

.field { margin-bottom: .7rem; }
.form-label { display: inline-block; margin-bottom: .25rem; font-size: .78rem; font-weight: 600; }
.form-label .label-note { font-weight: 400; opacity: .7; }

.input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }

.input-group-text {
    display: flex;
    align-items: center;
    padding: .35rem .65rem;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--field-border);
    border-right: 0;
    border-radius: .375rem 0 0 .375rem;
}

    .input-group-text svg { width: 15px; height: 15px; }

.form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding: .35rem .7rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-1);
    background-color: var(--field-bg);
    background-clip: padding-box;
    border: 1px solid var(--field-border);
    border-left: 0;
    border-radius: 0 .375rem .375rem 0;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .form-control::placeholder { color: var(--ink-2); opacity: .6; }

    .form-control:focus {
        outline: 0;
        border-color: var(--field-focus);
        box-shadow: 0 0 0 .2rem var(--field-focus-ring);
        z-index: 3;
    }

    .form-control[readonly] { background-color: var(--field-muted-bg); color: var(--ink-2); cursor: not-allowed; }

/* The reference lifts the leading icon's border along with the field on focus. */
.input-group:focus-within .input-group-text { border-color: var(--field-focus); }

/* A field with a trailing button is the middle element, so it carries no radius of its own. */
.form-control.has-trailing { border-radius: 0; }

select.form-control {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23574f70' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 14px 11px;
}

html.dark select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a79ec4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.pw-toggle {
    display: flex;
    align-items: center;
    padding: .35rem .65rem;
    color: var(--muted-btn);
    background: transparent;
    border: 1px solid var(--muted-btn);
    border-radius: 0 .375rem .375rem 0;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

    .pw-toggle:hover { color: #fff; background: var(--muted-btn); }
    .pw-toggle svg { width: 15px; height: 15px; }

.field-error { display: block; margin-top: .18rem; font-size: .74rem; color: var(--danger); }
.field-hint { margin: .2rem 0 0; font-size: .7rem; font-style: italic; color: var(--ink-2); opacity: .8; }

.form-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin: .95rem 0;
    font-size: .78rem;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .45rem .75rem;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    background-color: var(--btn);
    border: 1px solid var(--btn);
    border-radius: 50rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .btn-primary:hover { background-color: var(--btn-hover); border-color: var(--btn-hover-border); }
    .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem var(--field-focus-ring); }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
    .btn-primary svg { width: 15px; height: 15px; }

.alert {
    padding: .45rem .7rem;
    margin-bottom: .8rem;
    font-size: .78rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: .5rem;
}

.alert-success { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-border); }
.alert-danger { color: var(--bad-ink); background: var(--bad-bg); border-color: var(--bad-border); }

.form-note { margin: .6rem 0 0; font-size: .75rem; text-align: center; color: var(--ink-2); }
.back-link { margin: .7rem 0 0; font-size: .78rem; text-align: center; }
.form-foot { margin: 1rem 0 0; font-size: .66rem; text-align: center; color: var(--ink-2); opacity: .8; }

/* ---- Theme toggle ---- */
.auth-theme-toggle {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background-color .15s ease;
}

    .auth-theme-toggle:hover { transform: scale(1.08); background: rgba(255, 255, 255, .22); }
    .auth-theme-toggle svg { width: 18px; height: 18px; }
    .auth-theme-toggle .icon-dark { display: none; }

html.dark .auth-theme-toggle .icon-dark { display: block; }
html.dark .auth-theme-toggle .icon-light { display: none; }

/* Short screens: tighten further rather than let Sign up spill into a scroll. */
@media (max-height: 720px) {
    body { padding: .75rem 0; }
    .login-brand, .login-form { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .login-points li { padding: .2rem 0; }
    .field { margin-bottom: .55rem; }
    .form-meta { margin: .75rem 0; }
    .login-form .form-sub { margin-bottom: .85rem; }
}

/* Below the reference's breakpoint the brand panel is dropped and the card narrows. */
@media (max-width: 767.98px) {
    .login-card { grid-template-columns: 1fr; max-width: 440px; }
    .login-brand { display: none; }
    .login-form { padding: 1.75rem 1.4rem; }
}