/*
 * Auth theme — signup, sign-in and workspace-finder pages.
 *
 * Source of truth for the light red/black look introduced on the central signup
 * (register-step1/2). Every auth page had its own copy of this CSS, which is how
 * the tenant login ended up a dark screen with a yellow accent while signup was
 * light and red — the same user walking one flow saw two different products.
 * Add page-specific rules in the page's own <style>, not here.
 *
 * Class vocabulary shared by these pages:
 *   .login-container / .register-container, .logo-container, .business-name,
 *   .page-title, .gradient-text, .step-indicator, .subtitle, .signin-text,
 *   .signup-text, .form-group, label, inputs, .btn (.btn-login/.btn-submit/
 *   .btn-logout), .error-message, .success-message, .remember-me, .forgot-link,
 *   .user-info/.user-name, .back-link, .footer-text
 */

:root {
    --bg: #ffffff;
    --panel: rgba(255, 255, 255, .9);
    --border: rgba(189, 184, 184, 0.25);
    --text: #6E6D7A;
    --text-dark: #111827;
    --muted: #828282;
    --brand: #fb566e;
    --brand-2: #fa253e;
    --ok: #10b981;
    --shadow: 0 10px 30px rgba(0, 0, 0, .1);
    --radius: 14px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /* Flat. The three stacked gradients existed to give the card something to
       lift off; with no card they only added noise to a page that is now one
       surface. */
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

/* ── Page chrome ──────────────────────────────────────────────────────────
   With the card gone the form had nothing holding it in the viewport — it sat
   in the middle of an empty white field, which reads as unfinished rather than
   clean. A rule at the top and one at the bottom frame the PAGE instead of the
   form: the eye gets an edge to measure against, and the product gets a name on
   the screen, without putting a box back around the inputs.

   Opt-in. `body.auth-shell` replaces the centring above with a column, so any
   auth page that has not been given the header/footer markup keeps working
   exactly as it does today. */
body.auth-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.auth-header,
.auth-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 16px 28px;
}

.auth-header {
    border-bottom: 1px solid #eef0f3;
    gap: 10px;
}

.auth-header img {
    height: 26px;
    width: auto;
    display: block;
}

/* Wrapping the mark in an <a> must not make it look like body text:
   inline-flex keeps the anchor the size of the image rather than the line box,
   so the hit area matches what is drawn. */
.auth-header__home {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
}

.auth-header__home:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.auth-header__name {
    font-weight: 800;
    font-size: 16px;
    color: var(--text-dark);
    letter-spacing: -.01em;
}

/* The form sits in what is left, still centred — vertically against the space
   between the two rules rather than against the whole window. */
.auth-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    /* min-height:0 so a tall form scrolls the page instead of overflowing the
       flex item and being clipped behind the footer. */
    min-height: 0;
}

.auth-footer {
    border-top: 1px solid #eef0f3;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}

.auth-footer a { color: var(--muted); text-decoration: none; }
.auth-footer a:hover { color: var(--text-dark); }

/* The footer carries links now, so it needs to wrap on a narrow screen rather
   than push itself off the edge. */
.auth-footer {
    flex-wrap: wrap;
    gap: 4px 14px;
    text-align: center;
}

.auth-footer__sep {
    opacity: .4;
    user-select: none;
}

@media (max-width: 560px) {
    .auth-header,
    .auth-footer { padding: 14px 18px; }
    .auth-main { padding: 20px 18px; }
}

/* NO CARD. One column, one width.
   
   These screens used to be a white panel floating on a near-white page — a box
   whose edges carried no information, drawn in a colour barely distinct from
   what it sat on. With the panel gone the form sits directly on the page and
   the hierarchy comes from type and spacing instead, which is what was doing
   the work anyway.

   Width and centring are unchanged, so moving login → forgot password → verify
   still cannot make the form jump size. */
.login-container,
.register-container,
.forgot-container,
.reset-container {
    padding: 8px;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Kept as a hook so the pages that use it do not break, but there is no longer
   a card whose vertical air needs trimming — the difference it existed to make
   is gone with the panel. */
.login-container--compact {
    padding-top: 8px;
    padding-bottom: 8px;
}

.logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.logo-container img {
    height: 40px;
    width: auto;
}

.business-name,
.page-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.02em;
    margin-bottom: 4px;
}

.gradient-text {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-indicator {
    text-align: center;
    font-size: 13px;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 32px;
    font-size: 15px;
}

.signin-text,
.signup-text {
    text-align: center;
    color: var(--text);
    margin-bottom: 32px;
    font-size: 14px;
}

.signin-text a,
.signup-text a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.signin-text a:hover,
.signup-text a:hover {
    text-decoration: underline;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    width: 100%;
    padding: 12px 16px;
    /* A real edge, not the old 25%-alpha hairline. That border was faint
       because it sat on a white card that already framed the field; on the bare
       page it was the only thing telling you where the input was, and it was
       almost invisible. */
    border: 1px solid #d9dde3;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
    background: #ffffff;
    color: var(--text-dark);
    font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(251, 86, 110, 0.1);
    background: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

.btn {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-login,
.btn-submit {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(251, 86, 110, 0.3);
}

.btn-login:hover,
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 86, 110, 0.4);
}

.btn-login:active,
.btn-submit:active {
    transform: translateY(0);
}

.btn-login[disabled],
.btn-submit[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Secondary action — outlined so it never competes with the primary button. */
.btn-logout {
    background: #ffffff;
    color: var(--brand-2);
    border: 1px solid rgba(251, 86, 110, 0.4);
}

.btn-logout:hover {
    background: rgba(251, 86, 110, 0.06);
    transform: translateY(-1px);
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    font-size: 13px;
    font-weight: 500;
}

.success-message {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}

.success-message strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #065f46;
}

.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.remember-me input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brand);
}

.remember-me label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}

.forgot-link {
    margin-top: 16px;
    text-align: center;
}

.forgot-link a,
.back-link a {
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.forgot-link a:hover,
.back-link a:hover {
    text-decoration: underline;
}

.back-link {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.user-info {
    background: rgba(251, 86, 110, 0.05);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    text-align: center;
    border: 1px solid var(--border);
}

.user-info p {
    color: var(--text);
    margin-bottom: 4px;
    font-size: 14px;
}

.user-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 20px;
}

.helper-text {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

/* Intro line on the password-reset pages ("Enter your registered email and…"). */
.description {
    text-align: center;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Row of secondary links under the form ("← Back to Login | Home"). */
.back-links {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 14px;
}

.back-links a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.back-links a:hover {
    text-decoration: underline;
}

.back-links .separator {
    color: var(--border);
    margin: 0 10px;
}

.footer-text {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/*
 * Vendor mark on a TENANT-facing page. It sits at the foot of the card, small
 * and muted, because that page is served from the tenant's own domain — their
 * business name is the hero there, and a full vendor logo above it competes
 * with their brand. Central pages (signup, workspace finder, central admin) keep
 * the logo at the top: those are ours.
 */
.powered-by {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: .65;
}

.powered-by span {
    /* font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted); */
    /* margin-top: 24px; */
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

.powered-by img {
    height: 16px;
    width: auto;
}

@media (max-width: 480px) {
    body {
        padding: 16px;
    }

    .login-container,
    .register-container {
        padding: 32px 24px;
    }

    .business-name,
    .page-title {
        font-size: 28px;
    }
}