/* ============================================================
   Auth shell — shared by /Account/Register, /Account/Login,
   /Onboarding/AccountSetup, and any other "auth-style" page.

   Mirrors src/app/(auth)/layout.tsx + register/page.tsx in the
   ledgerwise-ui project: 480px white form panel on the left,
   dark carousel panel on the right, hidden on mobile.

   IMPORTANT: All values reference design tokens from
   wwwroot/css/branding.css. Do not redefine colors here.
   ============================================================ */

/* ── Shell: two-panel viewport ── */
.auth-shell {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: var(--lw-bg-muted);
}

/* ── Left: form panel ──
   Fixed 480px on desktop, full-width on mobile (matches
   ledgerwise-ui's `md:max-w-[480px]`). */
.auth-panel {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    /* ledgerwise-app's (auth) layout puts no bg on the panel — the muted
       page background shows through; field boxes stay white on top. */
    background-color: var(--lw-bg-muted);
}

@media (min-width: 768px) {
    .auth-panel {
        max-width: 480px;
    }
}

.auth-panel__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: var(--lw-spacing-xl) var(--lw-spacing-lg);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .auth-panel__inner {
        padding: 4rem;
    }
}

.auth-logo {
    flex-shrink: 0;
    /* ledgerwise-app renders the wordmark at forced 180x28 (mobile) /
       205x32 (desktop) via next/image props — slightly narrower than the
       SVG's intrinsic ratio (would be 209.5 at h32). Match exactly. */
    height: 28px;
    width: 180px;
    /* Parent flex-column defaults to stretch; the SVG then centers itself
       inside the stretched box. Pin left like ledgerwise-app. */
    align-self: flex-start;
}

@media (min-width: 768px) {
    .auth-logo {
        height: 32px;
        width: 205px;
    }
}

/* Vertically center the form within remaining space. */
.auth-form-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--lw-spacing-xl);
    width: 100%;
}

@media (min-width: 768px) {
    .auth-form {
        gap: 2.5rem;
    }
}

/* ── Header ── */
.auth-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .auth-header {
        gap: var(--lw-spacing-md);
    }
}

.auth-title {
    font-family: var(--lw-font-family-heading);
    font-size: 1.5rem;
    font-weight: var(--lw-font-bold);
    line-height: 2rem;
    letter-spacing: -0.01em;
    color: var(--lw-text-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .auth-title {
        font-size: 1.375rem;
    }
}

.auth-subtitle {
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--lw-text-primary);
    margin: 0;
}

/* Branded create-account (proposal acceptance) bits. */
.auth-eyebrow {
    font-size: 0.75rem; /* reference text-xs */
    font-weight: var(--lw-font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lw-status-success-fg);
    margin: 0 0 0.375rem 0;
}

.auth-readonly-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-card);
    background: var(--lw-white);
    padding: 0.875rem 1rem;
}

.auth-readonly-card__label {
    font-size: 0.6875rem;
    font-weight: var(--lw-font-semibold);
    letter-spacing: 0.025em; /* reference tracking-wide */
    text-transform: uppercase;
    color: var(--lw-gray-space); /* reference muted-foreground */
}

.auth-readonly-card__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lw-text-primary); /* reference foreground */
    margin-top: 0.125rem;
    word-break: break-word;
}

.auth-link {
    color: var(--lw-primary-dark);
    font-weight: var(--lw-font-semibold);
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

/* ── Fields wrapper ── */
.auth-fields {
    display: flex;
    flex-direction: column;
    gap: var(--lw-spacing-lg);
}

.auth-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-input-wrap {
    position: relative;
}

/* ── Floating-label input ── */
.auth-input {
    width: 100%;
    height: 54px;
    padding: 0 14px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-md);
    background-color: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 0.875rem;
    line-height: 22px;
    color: var(--lw-text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input::placeholder {
    color: transparent;
}

.auth-input--with-adornment {
    padding-right: 48px;
}

.auth-input:focus {
    border-color: var(--lw-primary-blue);
    box-shadow: 0 0 0 1px var(--lw-primary-blue);
}

.auth-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--lw-white) inset;
    -webkit-text-fill-color: var(--lw-text-primary);
}

.auth-input-label {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;
    background-color: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 0.875rem;
    line-height: 22px;
    color: var(--lw-gray-space);
    pointer-events: none;
    transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease,
        line-height 0.15s ease, color 0.15s ease;
}

.auth-input:focus + .auth-input-label,
.auth-input:not(:placeholder-shown) + .auth-input-label,
.auth-input:-webkit-autofill + .auth-input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 12px;
    color: var(--lw-gray-graphite);
}

.auth-input:focus + .auth-input-label {
    color: var(--lw-text-primary);
}

/* ── Trailing eye-toggle adornment ── */
.auth-adornment {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--lw-gray-space);
    cursor: pointer;
    border-radius: var(--lw-radius-sm);
    transition: color 0.15s ease;
}

.auth-adornment:hover {
    color: var(--lw-text-primary);
}

.auth-adornment:focus-visible {
    outline: 2px solid var(--lw-primary-blue);
    outline-offset: -2px;
}

.auth-adornment__eye-off {
    display: none;
}

.auth-adornment.is-visible .auth-adornment__eye {
    display: none;
}

.auth-adornment.is-visible .auth-adornment__eye-off {
    display: block;
}

/* ── Terms-of-Use checkbox row ── */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    cursor: pointer;
    user-select: none;
}

.auth-terms__checkbox {
    width: 18px;
    height: 18px;
    margin: 3px 0 0 0;
    border: 1px solid var(--lw-border);
    border-radius: 4px;
    accent-color: var(--lw-primary-dark);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-terms__text {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--lw-text-primary);
}

/* ── Validation / error text ── */
.auth-validation {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--lw-status-error-fg);
    margin: 0;
}

.auth-error {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--lw-status-error-fg);
    margin: 0;
}

/* Password requirements hint shown under new-password fields. */
.auth-hint {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--lw-gray-graphite);
    margin: 0;
}

/* Terms of Use acceptance row */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--bs-body-color);
    cursor: pointer;
}

.auth-terms-checkbox {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--lw-primary-blue);
}

.auth-terms a {
    color: var(--lw-primary-blue);
    text-decoration: underline;
}

/* ── Primary submit button (navy, square corners) ── */
/* Aligned to the LwButton atom spec (2026-07-08) so un-migrated auth pages
   stay consistent with migrated ones: 48px, radius 8, 13px/500, flat navy.
   Deleted per-page as pages migrate onto <LwButton>. */
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    margin-top: 4px;
    border: 0;
    border-radius: var(--lw-radius-control);
    background-color: var(--lw-primary-dark);
    color: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 13px;
    line-height: 18.5px;
    font-weight: var(--lw-font-medium);
    letter-spacing: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* Match the LwButton hover (token = primary at 90%). Must re-assert color +
   no-underline: branding.css has a global `a:hover` (navy text + underline)
   that otherwise makes link-styled buttons render navy-on-navy. */
a.auth-submit:hover:not(:disabled),
.auth-submit:hover:not(:disabled) {
    background-color: var(--lw-primary-dark-hover);
    color: var(--lw-white);
    text-decoration: none;
    opacity: 1;
}

.auth-submit:active:not(:disabled) {
    background-color: var(--lw-primary-dark-hover);
    color: var(--lw-white);
    opacity: 0.95;
}

.auth-submit:focus-visible {
    outline: 2px solid var(--lw-primary-blue);
    outline-offset: 2px;
}

.auth-submit:disabled,
.auth-submit.is-disabled {
    cursor: not-allowed;
    background-color: var(--lw-gray-smoke);
    color: var(--lw-gray-space);
}

@media (min-width: 768px) {
    .auth-submit {
        font-size: 0.8125rem;
    }
}

/* ── Native <select> styled like .auth-input ──
   Native chevron is hidden via appearance:none; we draw our own
   with a background SVG. The floating label is forced to the
   floated position whenever the field has focus or a value
   (controlled by toggling .auth-field--floated from Razor). */
.auth-select {
    width: 100%;
    height: 54px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-md);
    background-color: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 0.875rem;
    line-height: 22px;
    color: var(--lw-text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-select:focus {
    border-color: var(--lw-text-primary);
    box-shadow: 0 0 0 1px var(--lw-text-primary);
}

.auth-select option[value=""] {
    color: var(--lw-gray-space);
}

/* When the field is in the "floated" state (focused or filled), pin
   the label to the top edge regardless of input type. Use this on
   selects, which cannot rely on :placeholder-shown. */
.auth-field--floated .auth-input-label,
.auth-select:focus ~ .auth-input-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 12px;
    color: var(--lw-gray-graphite);
}

.auth-select:focus ~ .auth-input-label {
    color: var(--lw-text-primary);
}

/* ── Follow-up question (account-setup volume reveal) ──
   A labeled select that appears below the role cards once the
   user picks General Contractor. */
.auth-followup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.auth-followup__label {
    font-family: var(--lw-font-family);
    font-size: 0.875rem;
    font-weight: var(--lw-font-semibold);
    line-height: 1.25;
    color: var(--lw-text-primary);
}

/* ── Role-picker card (account-setup step) ── */
.auth-role-list {
    display: flex;
    flex-direction: column;
    gap: var(--lw-spacing-md);
}

.auth-role-card {
    display: flex;
    align-items: center;
    gap: var(--lw-spacing-md);
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--lw-border);
    border-radius: var(--lw-radius-md);
    background-color: var(--lw-white);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
}

.auth-role-card:hover {
    border-color: var(--lw-gray-steel);
}

.auth-role-card:focus-visible {
    outline: 2px solid var(--lw-primary-blue);
    outline-offset: 2px;
}

.auth-role-card.is-selected {
    border-color: var(--lw-primary-dark);
    background-color: rgba(2, 11, 43, 0.05);
}

.auth-role-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lw-radius-md);
    background-color: var(--lw-bg-table-header);
    color: var(--lw-gray-graphite);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-role-card__icon .mud-icon-root {
    color: inherit !important;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.auth-role-card.is-selected .auth-role-card__icon {
    background-color: var(--lw-primary-dark);
    color: var(--lw-white);
}

.auth-role-card__title {
    font-size: 0.875rem;
    font-weight: var(--lw-font-semibold);
    color: var(--lw-text-primary);
    margin: 0;
}

/* ── Right: carousel panel ── */
.auth-aside {
    display: none;
    flex: 1;
    padding: var(--lw-spacing-md);
    min-width: 0;
}

@media (min-width: 768px) {
    .auth-aside {
        display: flex;
    }
}

.auth-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--lw-primary-dark);
    border-radius: var(--lw-radius-md);
}

.auth-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
    will-change: opacity, transform;
}

.auth-carousel__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.auth-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth-carousel__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 15%,
        rgba(0, 0, 0, 0.75) 85%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
}

.auth-carousel__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
    padding: var(--lw-spacing-lg);
}

.auth-carousel__caption {
    position: absolute;
    left: var(--lw-spacing-lg);
    right: var(--lw-spacing-lg);
    bottom: 5rem;
    max-width: 41.5rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.6s ease;
    pointer-events: none;
}

.auth-carousel__caption.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.auth-carousel__heading {
    font-family: var(--lw-font-family);
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 800;
    color: var(--lw-white);
    margin: 0 0 var(--lw-spacing-md);
    white-space: pre-line;
}

@media (min-width: 1280px) {
    .auth-carousel__heading {
        font-size: 3rem;
        line-height: 4rem;
    }
}

.auth-carousel__body {
    font-family: var(--lw-font-family);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--lw-white);
    margin: 0;
}

.auth-carousel__dots {
    position: relative;
    margin-top: auto;
    align-self: center;
    display: flex;
    gap: 8px;
}

.auth-carousel__dot {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 8px;
    background: var(--lw-white);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.auth-carousel__dot:hover {
    opacity: 0.75;
}

.auth-carousel__dot.is-active {
    opacity: 1;
}

/* ── Centered message card ──
   Used by confirmation / info / error pages (Lockout, RegisterConfirmation,
   ConfirmEmail, AccessDenied, etc.) inside <AuthShell>. Mirrors the form
   slot's vertical centering with a circular icon avatar + title + body +
   CTA stack. */
.auth-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--lw-spacing-lg);
    width: 100%;
}

.auth-message__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background-color: var(--lw-bg-table-header);
    color: var(--lw-gray-graphite);
    flex-shrink: 0;
}

.auth-message__avatar .mud-icon-root {
    color: inherit !important;
    width: 40px;
    height: 40px;
    font-size: 40px;
}

.auth-message--success .auth-message__avatar {
    background-color: var(--lw-status-success-bg);
    color: var(--lw-success-dark);
}

.auth-message--error .auth-message__avatar {
    background-color: var(--lw-status-error-bg);
    color: var(--lw-status-error-fg);
}

.auth-message--info .auth-message__avatar {
    background-color: var(--lw-status-info-bg);
    color: var(--lw-primary-blue);
}

.auth-message--warning .auth-message__avatar {
    background-color: var(--lw-status-warning-bg, #FEF3C7);
    color: var(--lw-status-warning-fg, #B45309);
}

/* Aligned to the migrated auth-family heading spec (22px/32px/700,
   tracking-tight) so AuthMessage pages match Login/Register/ForgotPassword. */
.auth-message__title {
    font-family: var(--lw-font-family);
    font-size: 22px;
    font-weight: var(--lw-font-bold);
    line-height: 32px;
    letter-spacing: -0.025em;
    color: var(--lw-text-primary);
    margin: 0;
}

.auth-message__body {
    /* family body spec: 14px/22px muted */
    font-size: 14px;
    line-height: 22px;
    color: var(--lw-gray-space);
    margin: 0;
}

.auth-message__body p {
    margin: 0 0 0.5rem 0;
}

.auth-message__body p:last-child {
    margin-bottom: 0;
}

.auth-message__body strong {
    color: var(--lw-text-primary);
    font-weight: var(--lw-font-semibold);
}

.auth-message__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

/* ── Inline "Return to sign in" back-link (forgot/reset flow) ── */
/* Aligned to the migrated family back-link (ForgotPassword "Return to
   Sign In"): 14px/600 foreground, hover -> brand accent. */
.auth-backlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 14px;
    line-height: 22px;
    color: var(--lw-gray-phantom);
    text-decoration: none;
    font-weight: var(--lw-font-semibold);
    transition: color 0.15s ease;
}

.auth-backlink:hover {
    color: var(--lw-primary-blue);
}

.auth-backlink svg {
    flex-shrink: 0;
}

/* ── Subtle secondary button (used for "Resend" / "Go to sign in" CTAs
   below the primary submit on info pages). Same shape as .auth-submit
   but outlined navy on white. */
.auth-submit--secondary {
    background-color: var(--lw-white);
    color: var(--lw-primary-dark);
    border: 1px solid var(--lw-primary-dark);
}

.auth-submit--secondary:hover:not(:disabled) {
    background-color: rgba(2, 11, 43, 0.05);
    opacity: 1;
}

/* ── Inline checkbox row (e.g. "Remember this machine") ── */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--lw-text-primary);
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--lw-border);
    border-radius: 4px;
    accent-color: var(--lw-primary-dark);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 767.98px) {
    .auth-shell {
        height: auto;
        min-height: 100vh;
    }

    .auth-form-wrapper {
        max-width: 28rem;
        margin: 0 auto;
        width: 100%;
    }
}