/* ============================================================
   RewardlyHR — Auth Shell Stylesheet
   public/css/auth.css
   Loaded only by app/views/layouts/auth.php.
   Defines the page/card structure only — all colors, fonts,
   spacing tokens, buttons, and form inputs come from style.css.
   ============================================================ */

/* ── Keep the page from shifting between states ───────────────
   The sign-in states differ in height (account picker 421px, email +
   password 539px, "Use a different account" 575px). On a shorter window the
   taller ones scroll, and a classic (Windows) scrollbar takes ~17px of width:
   everything re-centred sideways and the cover background rescaled. Always
   reserving the scrollbar's space keeps the width identical in every state.
   This file loads only on the auth layout, so the html rule is scoped to it. */
html { scrollbar-gutter: stable; }

/* ── Page shell — background image + overlay ──────────────── */
.auth-page {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-anchored, not vertically centred: a centred card jumped up and down
       as its height changed between states. Now only its bottom edge moves. */
    justify-content: flex-start;
    padding: clamp(var(--space-6), 9vh, 96px) var(--space-6) 60px;     /* bottom clears footer */

    /* Fallback colour if image not found */
    background-color: #07122e;

    /* Background photo: RewardlyHR's, or on an organization's own address
       the one it uploaded (Theme::signInBackgroundTag() sets the variable) */
    background-image: var(--auth-bg-image, url('../images/auth-bg.png'));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Semi-transparent dark overlay so the photo recedes and the card pops */
.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(5, 12, 45, 0.62) 0%,
        rgba(5, 12, 45, 0.45) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ── Shell — wraps brand + card ───────────────────────────── */
.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
}

/* ── Card ─────────────────────────────────────────────────── */
.auth-card {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);

    /* Prominent shadow so card lifts off the photo */
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.30),
        0  4px 16px rgba(0, 0, 0, 0.18);

    overflow: hidden;
}

/* ── Brand inside card ────────────────────────────────────── */
.auth-card__brand {
    display: flex;
    align-items: center;
    padding: var(--space-7) var(--space-8) 0;
}

.auth-card__brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    --brand-logo-h: 40px;
}

/* Centers the brand mark -- opt-in per page via $auth_header_centered
   (see .auth-card__heading--center/.auth-card__subheading--center below),
   never the shared default (most auth pages sit a left-aligned form directly
   under the heading, same reasoning as .auth-card--centered above). */
.auth-card__brand--center {
    justify-content: center;
}

/* An organization's own sign-in address: its logo, or its name when it has none */
.auth-card__tenant-logo { display: block; max-height: 56px; max-width: 240px; width: auto; height: auto; }
.auth-card__tenant-name { font-size: 1.25rem; font-weight: 800; color: var(--color-heading); }


/* ── Flash notice ─────────────────────────────────────────── */
/* The layout places it straight inside the card, between the brand and the
   body. The card itself has no padding (its sections pad themselves), so the
   notice takes the same side inset they do instead of running edge to edge. */
.auth-card > .flash-banner {
    margin: var(--space-5) var(--space-8) 0;
}

/* ── Card body ────────────────────────────────────────────── */
.auth-card__body {
    padding: var(--space-7) var(--space-8) var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Card headings ────────────────────────────────────────── */
.auth-card__heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
}

.auth-card__subheading {
    font-size: 0.9375rem;
    color: var(--color-muted);
    margin: calc(-1 * var(--space-3)) 0 0;
}

/* Centered header variant (login page only, set via $auth_header_centered) --
   turns the brand/heading/subheading into a distinct, self-contained "header
   band": centered like the brand mark above it, with a rule underneath at the
   same var(--space-5) gap the rest of the card already uses everywhere else,
   so the band reads as one deliberate unit instead of three stacked, merely
   left-aligned lines. */
.auth-card__heading--center,
.auth-card__subheading--center {
    text-align: center;
}

.auth-card__subheading--center {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

/* ── Form layout ──────────────────────────────────────────── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-1);
}

/* Label row — label on left, forgot-password link on right */
.auth-form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

/* Override margin that .form-label adds when inside label-row */
.auth-form__label-row .form-label {
    margin-bottom: 0;
}

.auth-form__forgot {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-blue);
    text-decoration: none;
    flex-shrink: 0;
}

.auth-form__forgot:hover {
    color: var(--color-blue-dark);
    text-decoration: underline;
}

/* Remove extra gap the .form-group adds so our .auth-form gap controls spacing */
.auth-form .form-group {
    margin-bottom: 0;
}

.auth-form__back {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--color-blue);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: fit-content;
}
.auth-form__back:hover { text-decoration: underline; }

/* ── Footer note inside card ──────────────────────────────── */
.auth-card__footer-note {
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.auth-card__footer-note a {
    color: var(--color-blue);
    font-weight: 500;
}

/* ── Page footer bar — floats over the background photo ────── */
.auth-page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--space-8);
    background: rgba(0, 0, 0, 0.32);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
}

/* ── Account picker ───────────────────────────────────────── */
.auth-accounts {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-1);
    /* .auth-accounts__other (the last row) carries its own space-3 padding,
       same as every account row above it -- without this, that padding stacks
       on top of .auth-card__body's own space-5 gap to the footer note below,
       making that one gap 32px against the 20px every other boundary in this
       panel (row-to-divider, divider-to-"other") already uses. Pulls it back
       down to the same 20px. */
    margin-bottom: calc(-1 * var(--space-3));
}

.auth-account-row {
    display: flex;
    align-items: center;
}

.auth-account-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    min-width: 0;
}
.auth-account-btn:hover { background: var(--color-surface); }

.auth-account-btn__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-link);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.auth-account-btn__avatar--img {
    object-fit: cover;
}

.auth-account-btn__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-account-btn__name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-account-btn__email {
    font-size: 0.8125rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-account-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.auth-account-row:hover .auth-account-remove { opacity: 1; }
.auth-account-remove:hover { background: var(--color-surface-2); color: var(--color-navy); }

.auth-accounts__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) 0;
}

.auth-accounts__other {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: 0.9375rem;
    color: var(--color-blue);
    font-weight: 500;
    transition: background 0.15s;
}
.auth-accounts__other:hover { background: var(--color-surface); }

.auth-accounts__other-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-muted);
}

/* ── Centered card variant (announcement-style pages: Coming Soon,
   Maintenance, the forgot-password success state) ──────────────────────
   The default card is built for a login-style form, where left-aligned
   labels/inputs are the right convention -- that's why .auth-card__heading
   and .auth-card__subheading carry no text-align of their own, inheriting
   left. But a page with no form, just an icon and a short announcement,
   already centers that icon and its footer link (see .auth-success-icon /
   .auth-notice-icon / .auth-card__footer-note above) -- leaving the
   heading and body text left-aligned between two centered elements reads
   as inconsistent, not deliberate. Set via a layout flag ($auth_card_centered)
   the view assigns before the layout renders the card shell, so this only
   ever applies to genuine no-form announcement states, never the real forms
   sharing this same card markup. */
.auth-card--centered .auth-card__brand {
    justify-content: center;
}
.auth-card--centered .auth-card__body {
    align-items: center;
    text-align: center;
}

/* ── Success icon (forgot-password success state) ─────────── */
.auth-success-icon {
    display: flex;
    justify-content: center;
    color: var(--color-teal);
    margin-bottom: calc(-1 * var(--space-2));
}

/* ── Notice icon (maintenance page) ───────────────────────── */
.auth-notice-icon {
    display: flex;
    justify-content: center;
    color: var(--color-blue);
    margin-bottom: calc(-1 * var(--space-2));
}

/* ── Success spam note ────────────────────────────────────── */
.auth-success__spam-note {
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
}

/* ── Two-column form row (accept-invitation) ──────────────── */
.auth-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ── Password hint text ───────────────────────────────────── */
.form-hint {
    margin: var(--space-1) 0 0;
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 520px) {
    .auth-page {
        padding: var(--space-4) var(--space-4) 56px;
        background-attachment: scroll; /* fixed doesn't work well on iOS */
    }

    .auth-card__brand {
        padding: var(--space-5) var(--space-6) 0;
    }

    .auth-card__body {
        padding: var(--space-5) var(--space-6) var(--space-8);
    }

    .auth-card > .flash-banner {
        margin: var(--space-4) var(--space-6) 0;
    }

    .auth-page-footer {
        padding: 10px var(--space-4);
        font-size: 0.6875rem;
    }

    .auth-form__row { grid-template-columns: 1fr; }
}

/* ── Inline-style replacements ── */

/* login.php — remember-me row */
.auth-form__remember-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.auth-form__remember-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.auth-form__remember-label {
    font-size: 0.875rem;
    color: var(--color-muted);
    cursor: pointer;
    margin: 0;
}

/* accept-invitation.php — invalid token block */
.auth-invalid__wrapper {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-invalid__icon {
    display: block;
    margin: 0 auto var(--space-4);
}

/* accept-invitation.php — read-only email display */
.auth-email-display__label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-1);
}

.auth-email-display__value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

/* accept-invitation.php — centred footer note */
.auth-card__footer-note--centered {
    text-align: center;
    margin-top: var(--space-5);
}