/* claudephpframework — public/assets/css/auth.css
   Shared layout + components for standalone auth pages (login,
   register, signup, claim, forgot/reset password, 2FA challenge).
   Auth pages don't load app/Views/layout/header.php (no sidebar/
   topbar chrome), so they wire app.css + admin.css + this file
   in their <link> stack to get the same design vocabulary.       */

/* Page body — vertically-centered card on a soft-gray background. */
body.auth {
    margin: 0;
    background: var(--bg-page, var(--color-gray-50));
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 2rem;
    font-family: var(--font);
    color: var(--text-default, var(--color-gray-900));
}

/* The floating card the form lives in. Uses the theme surface var so it
   flips with light/dark mode (and picks up a tenant's brand surface) — the
   hardcoded #fff fallback keeps it white when no theme vars are loaded.
   Pre-fix this was a hardcoded #fff, which stayed white in dark mode while
   the text (var(--text-default)) went light → near-unreadable. */
.auth-card {
    background: var(--bg-panel, #fff);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
}
.auth-card--wide   { max-width: 520px; }
.auth-card--wider  { max-width: 560px; }

/* Logo / title block at the top of the card. */
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo .auth-emoji {
    font-size: 2rem; line-height: 1;
}
.auth-logo h1 {
    font-size: 1.5rem; font-weight: 700;
    color: var(--text-default, var(--color-gray-900));
    margin: .5rem 0 .25rem;
}
.auth-logo p {
    color: var(--text-muted, var(--color-gray-500)); font-size: 14px; margin: 0;
}
/* Track B Phase 4 — brand logo image in the lockup slot (replaces the emoji
   when a logo is set). */
.auth-logo .auth-emoji img { max-height: 48px; width: auto; display: inline-block; }

/* Track B Phase 4 — auth layout variants (the `auth_layout` setting → a body
   class). The default `centered-card` uses the rules above. --auth-image is
   emitted per-page by SiteChromeService::authImageCss() when a brand image is
   set; it falls back to a brand gradient so the layouts work without an image.
   Inert on framework-standalone (the body class only ever becomes
   auth--centered-card there). */
@media (min-width: 880px) {
    body.auth--split-image { justify-content: flex-start; padding: 0; }
    body.auth--split-image .auth-card { margin: auto 0 auto max(4rem, 6vw); box-shadow: none; }
    body.auth--split-image::after {
        content: ''; position: fixed; right: 0; top: 0; bottom: 0; width: 45vw;
        background: var(--auth-image, linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, var(--color-primary)))) center / cover no-repeat;
    }
}
body.auth--hero-overlay {
    background: var(--auth-image, linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, var(--color-primary)))) center / cover no-repeat fixed;
}
body.auth--hero-overlay .auth-card { box-shadow: 0 12px 48px rgba(0,0,0,.28); }

/* Footer (e.g. "Already have an account? Sign in"). */
.auth-footer {
    text-align: center; margin-top: 1.5rem;
    font-size: 13.5px; color: var(--text-muted, var(--color-gray-500));
}
.auth-footer a {
    color: var(--color-primary);
    text-decoration: none; font-weight: 500;
}
.auth-footer a:hover { text-decoration: underline; }

/* Full-width inline-block submit button used by every auth form. */
.btn-block {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: .7rem;
    font-size: 14px; font-weight: 600;
}

/* OAuth button row + "or" divider. */
.btn-oauth {
    background: var(--bg-panel, #fff);
    color: var(--text-default, var(--color-gray-900));
    border: 1px solid var(--border-default, var(--color-gray-300));
    margin-bottom: .5rem;
    font-weight: 500;
}
.btn-oauth:hover { background: var(--bg-page, var(--color-gray-50)); }
.btn-oauth .oauth-icon { width: 20px; height: 20px; }

.divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.25rem 0;
    color: var(--text-muted, var(--color-gray-500)); font-size: 12px;
}
.divider::before, .divider::after {
    content: ''; flex: 1; border-top: 1px solid var(--border-default, var(--color-gray-200));
}

/* Inline static fields shown as read-only contextual chrome
   (e.g. "Claiming as <email>" on the password-set page).      */
.auth-static {
    background: var(--bg-page, var(--color-gray-100));
    border: 1px solid var(--border-default, var(--color-gray-200));
    border-radius: 6px;
    padding: .6rem .8rem;
    font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
    font-size: 13px;
    color: var(--text-default, var(--color-gray-900));
    margin-bottom: 1.25rem;
    text-align: center;
}

/* Subdomain composite field (input + suffix box). */
.subdomain-row { display: flex; align-items: stretch; }
.subdomain-row > input,
.subdomain-row .form-row > input,
.subdomain-row input[type="text"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}
.subdomain-row .suffix {
    padding: .55rem .75rem;
    background: var(--bg-page, var(--color-gray-100));
    border: 1px solid var(--border-default, var(--color-gray-300));
    border-left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    color: var(--text-muted, var(--color-gray-700));
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    display: flex; align-items: center; white-space: nowrap;
}

/* Plan picker grid (signup). */
.plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 480px) {
    .plan-grid { grid-template-columns: 1fr; }
}
.plan-card {
    border: 2px solid var(--border-default, var(--color-gray-200));
    border-radius: var(--radius);
    padding: 1rem; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.plan-card:hover {
    border-color: var(--border-strong, var(--color-gray-300));
    background: var(--bg-page, var(--color-gray-50));
}
.plan-card input { margin-right: .5rem; }
.plan-card.selected {
    border-color: var(--color-primary);
    background: var(--color-purple-bg);
}
.plan-card .name {
    font-weight: 600; font-size: 14px; color: var(--text-default, var(--color-gray-900));
}
.plan-card .price {
    font-size: 20px; font-weight: 700;
    color: var(--text-default, var(--color-gray-900)); margin: .25rem 0;
}
.plan-card .desc {
    font-size: 12px; color: var(--text-muted, var(--color-gray-500)); line-height: 1.4;
}

/* Success / warning hero icon (signup_success "✓" / claim_invalid "!"). */
.auth-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    font-size: 32px;
}
.auth-icon--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.auth-icon--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}
.auth-icon--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}