/* ============================================
   HOMEPAGE FEATURE 7 — Account Authentication
   Modular CSS for the top account header bar + six auth modals
   (signup, verify email, login, forgot, reset, logout). Markup is
   injected at runtime by h7-f1-account-authentication.js — these
   styles apply post-injection.

   ARCHITECTURE:
   - Uses design tokens (CSS custom properties) from h0-homepage.css
   - Mobile-first with responsive breakpoints at 480px, 768px
   - Header bar at z-index 300 (above all page content)
   - Modals at z-index 200 (consistent with other feature modals)
   - Backdrop blur effect matches site's glass aesthetic
   - prefers-reduced-motion respected throughout
   - Touch-optimized for mobile (48px min touch targets)
   - AWS Console Dark Mode color system

   SECTIONS:
   1. Fixed Header Bar
   2. Modal Overlay & Panel
   3. Form Layout & Fields
   4. Verification Code Input
   5. Submit Button & Loading
   6. Status Messages
   7. Modal Footer Links
   8. Responsive Overrides
   9. Touch Device Overrides
   10. Reduced Motion
   ============================================ */

/* ----------------------------------------
   1. Fixed Header Bar — Always visible at top of page
   ---------------------------------------- */
.account-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--color-backdrop);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

/* Push page content below the fixed header */
body:has(.account-header) {
    padding-top: 48px;
}

/*
 * Hide the fixed header while any modal is open so it can't overlap the
 * modal panel. The `modal-open` class is toggled by SiteConfig.scrollLock
 * (see project-configuration.js), so this applies to every feature modal
 * automatically — no per-feature wiring required.
 */
body.modal-open .account-header {
    display: none;
}

body.modal-open:has(.account-header) {
    padding-top: 0;
}

.account-header-inner {
    padding: var(--spacing-sm) var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

/* ── Brand (left side) ── */
.account-header-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.account-header-brand:hover {
    color: var(--color-gold);
}

/* Logo plate — white-outline box rendered to the left of the brand text.
   Sized via the --account-header-logo-size token so a single edit rescales
   plate + image together. The plate stays neutral on hover (only the text
   color shifts to gold) so the logo retains its branded appearance. */
.account-header-logo {
    --account-header-logo-size: 32px;
    width: var(--account-header-logo-size);
    height: var(--account-header-logo-size);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border: 1.5px solid var(--color-text-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    transition: border-color var(--transition-fast);
}

.account-header-brand:hover .account-header-logo {
    border-color: var(--color-gold);
}

.account-header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.account-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.account-header-greeting {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.account-header-greeting-text {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--header-greeting-max-width, 220px);
}

/* ── Button Base ── */
.account-btn {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
    padding: var(--spacing-sm) var(--spacing-xl);
    border: 1.5px solid transparent;
    min-height: 44px;
}

.account-btn--primary {
    background: var(--color-gold);
    color: var(--color-bg-dark);
    border-color: var(--color-gold);
}

.account-btn--primary:hover {
    background: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
}

.account-btn--outline {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.account-btn--outline:hover {
    border-color: var(--color-border-hover);
    background: var(--color-aws-blue-light);
}

.account-btn--ghost {
    background: transparent;
    color: var(--color-text-primary);
    border-color: transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    opacity: 0.8;
}

.account-btn--ghost:hover {
    opacity: 1;
    background: var(--color-aws-blue-light);
}

/* ── Header Bar Button Variants ── */
.account-btn--header {
    background: transparent;
    color: var(--color-gold);
    border-color: var(--color-border-gold);
}

.account-btn--header:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-light);
}

.account-btn--header-ghost {
    background: transparent;
    color: var(--color-crimson);
    border-color: rgba(217, 21, 21, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
}

.account-btn--header-ghost:hover {
    color: var(--color-crimson);
    border-color: rgba(217, 21, 21, 0.6);
    background: var(--color-crimson-light);
}

.account-btn--sm {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    min-height: 36px;
}

/* ----------------------------------------
   2. Modal Overlay & Panel
   ---------------------------------------- */
.account-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.account-modal--open {
    opacity: 1;
    visibility: visible;
}

.account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-backdrop-light);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.account-modal-panel {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: transform var(--transition-base);
}

.account-modal--open .account-modal-panel {
    transform: translateY(0);
}

/* ── Close Button ── */
.account-modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-tertiary);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.account-modal-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-primary);
}

/* ── Title & Subtitle ── */
.account-modal-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.account-modal-subtitle {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* ----------------------------------------
   3. Form Layout & Fields
   ---------------------------------------- */
.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.account-label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
}

.account-input {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
}

.account-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px var(--color-gold-light);
}

.account-input::placeholder {
    color: var(--color-text-tertiary);
}

/* ── Field Error State ── */
.account-field--error .account-input {
    border-color: var(--color-crimson);
}

.account-field-error {
    font-size: var(--font-size-xs);
    color: var(--color-crimson);
    min-height: 1.2em;
}

/* ── Field Hint ── small descriptive text below an input that isn't an
   error. Used on the signup form to explain what the Organization Name
   and Organization Code fields are for. Renders as muted body text so
   it doesn't compete visually with the field's value. */
.account-field-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, var(--color-text-secondary, rgba(0, 0, 0, 0.55)));
    line-height: 1.45;
    margin-top: 4px;
    display: block;
}

/* When an error is present, hide the hint so the error message owns
   the space — keeps the form compact and the user's eye on what to fix. */
.account-field--error .account-field-hint {
    display: none;
}

/* ----------------------------------------
   4. Verification Code Input
   ---------------------------------------- */
.account-input--code {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: 8px;
    font-family: 'Courier New', monospace;
    padding: var(--spacing-md) var(--spacing-xl);
}

.account-input--code::placeholder {
    letter-spacing: 8px;
    opacity: 0.3;
}

/* ----------------------------------------
   5. Submit Button & Loading State
   ---------------------------------------- */
.account-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-bg-dark);
    background: var(--color-gold);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), opacity var(--transition-fast);
    align-self: stretch;
    min-height: 44px;
}

.account-submit:hover {
    background: var(--color-gold-hover);
}

.account-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.account-submit .fa-spinner {
    display: none;
}

.account-submit--loading .fa-spinner {
    display: inline-block;
}

.account-submit--loading .account-submit-label {
    display: none;
}

/* ── Logout Variant (red, matches Danger Zone) ── */
.account-submit--logout {
    background: var(--color-crimson);
    color: var(--color-text-primary);
}

.account-submit--logout:hover {
    background: var(--color-crimson);
    opacity: 0.9;
}

/* ── Confirmation Modal Action Row (Cancel + Confirm) ── */
.account-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.account-modal-actions .account-submit {
    flex: 1;
    align-self: auto;
}

.account-modal-cancel {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.account-modal-cancel:hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-alt);
}

/* ----------------------------------------
   6. Status Messages
   ---------------------------------------- */
.account-modal-status {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding: 0;
    border-radius: var(--radius-sm);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition:
        opacity var(--transition-base),
        max-height var(--transition-base),
        padding var(--transition-base);
}

.account-modal-status--visible {
    opacity: 1;
    max-height: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.account-modal-status--success {
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.account-modal-status--error {
    color: var(--color-crimson);
    background: var(--color-crimson-light);
    border: 1px solid var(--color-error-border);
}

/* ----------------------------------------
   7. Modal Footer Links
   ---------------------------------------- */
.account-modal-footer {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.account-modal-footer a {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
}

.account-modal-footer a:hover {
    color: var(--color-gold-hover);
    text-decoration: underline;
}

.account-modal-footer-sep {
    margin: 0 var(--spacing-sm);
    color: var(--color-text-tertiary);
}

/* ----------------------------------------
   8. Responsive Overrides
   ---------------------------------------- */
@media (max-width: 480px) {
    .account-header-inner {
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 40px;
    }

    .account-header-brand {
        font-size: var(--font-size-xs);
        gap: var(--spacing-xs);
    }

    .account-header-logo {
        --account-header-logo-size: 24px;
        padding: 0;
        border-width: 1px;
    }

    .account-header-actions {
        gap: var(--spacing-xs);
    }

    .account-header-greeting {
        gap: var(--spacing-xs);
    }

    /* Mobile: hide greeting text + button labels — show icon-only
       buttons to keep the fixed header uncongested. Labels remain
       in the DOM for screen readers via .account-btn-label being
       visually hidden (not display:none). */
    .account-header-greeting-text {
        display: none;
    }

    .account-header-greeting .account-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .account-header-greeting .account-btn--sm {
        padding: 0;
        min-height: 32px;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
    }

    .account-btn--sm {
        font-size: 0.6875rem;
        padding: 0.2rem var(--spacing-sm);
        min-height: 30px;
    }

    body:has(.account-header) {
        padding-top: 40px;
    }

    .account-modal-panel {
        width: 95%;
        padding: var(--spacing-xl);
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 360px) {
    .account-btn--sm {
        font-size: 0.625rem;
        padding: 0.15rem var(--spacing-xs);
        min-height: 28px;
    }
}

@media (min-width: 768px) {
    .account-modal-panel {
        padding: var(--spacing-3xl);
    }
}

/* ----------------------------------------
   9. Touch Device Overrides
   ---------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .account-modal .account-btn {
        min-height: 48px;
    }

    .account-input {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .account-submit {
        min-height: 48px;
    }
}

/* ----------------------------------------
   10. Reduced Motion
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .account-header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .account-modal {
        transition: none;
    }

    .account-modal-panel {
        transform: none;
        transition: none;
    }

    .account-modal-status {
        transition: none;
    }
}