/*
 * Pedi Auth: sign-in surface for the admin console.
 * Roles read Pedi design tokens (pedi-tokens.css), which switch with Kemet's <html data-theme="light|dark">.
 * Scoped to body.pedi-auth so Kemet pages are unaffected.
 */

.pedi-auth {
    --pa-canvas: var(--color-bg-secondary);
    --pa-surface: var(--color-bg-primary);
    --pa-heading: var(--color-text-primary);
    --pa-paragraph: var(--color-text-secondary);
    --pa-muted: var(--color-text-tertiary);
    --pa-placeholder: var(--color-text-placeholder);
    --pa-border: var(--color-border-secondary);
    --pa-border-strong: var(--color-border-primary);
    --pa-brand: var(--color-button-primary-bg);
    --pa-brand-hover: var(--color-button-primary-bg-hover);
    --pa-brand-fg: var(--color-button-primary-fg);
    --pa-danger: var(--color-utility-error-700);
    --pa-danger-fill: var(--color-utility-error-50);
    --pa-danger-border: var(--color-border-error);
    --pa-danger-solid: var(--color-border-error-solid);
    --pa-success: var(--color-utility-success-700);
    --pa-success-fill: var(--color-utility-success-50);
    --pa-link: var(--color-text-brand-secondary);
    --pa-navy: #1B2E4B;
    --pa-focus: #1B2E4B;
    --pa-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 24px -8px rgba(16, 24, 40, .12);
    --pa-radius-control: var(--radius-md);
    --pa-radius-panel: var(--radius-2xl);
    --pa-font: var(--font-family-sans);

    margin: 0;
    min-height: 100vh;
    background: var(--pa-canvas) !important;
    color: var(--pa-paragraph);
    font-family: var(--pa-font) !important;
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height, 20px);
    color-scheme: light;
}

[data-theme="dark"] .pedi-auth {
    --pa-canvas: var(--color-bg-primary);
    --pa-surface: var(--color-bg-secondary);
    --pa-border: var(--color-border-primary);
    --pa-border-strong: var(--color-gray-dark-mode-600);
    --pa-focus: #9EC5FF;
    --pa-shadow: none;

    color-scheme: dark;
}

/* ── Layout: brand panel + form column on wide screens, form only on narrow ── */

.pedi-auth .pa-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

.pedi-auth .pa-hero {
    display: none;
    position: relative;
    overflow: hidden;
    background-color: var(--pa-navy);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

/* Navy wash keeps white text readable over the orange brand pattern. */
.pedi-auth .pa-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(27, 46, 75, 0) 35%, rgba(27, 46, 75, .7) 75%, rgba(27, 46, 75, .9) 100%);
}

.pedi-auth .pa-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    height: 100%;
    padding: 48px;
    color: #fff;
}

.pedi-auth .pa-hero-eyebrow {
    margin: 0;
    font-size: var(--text-small-size);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.pedi-auth .pa-hero-title {
    margin: 0;
    max-width: 14ch;
    font-family: var(--text-display-family, var(--pa-font));
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}

.pedi-auth .pa-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-width: 0;
    padding: 32px 16px 24px;
}

.pedi-auth .pa-panel {
    width: 100%;
    max-width: 400px;
    padding: 32px 24px;
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-panel);
    box-shadow: var(--pa-shadow);
}

/* Wide screens: an even split, with the form sitting straight on its half instead of in a card. */
@media (min-width: 992px) {
    .pedi-auth .pa-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pedi-auth .pa-hero {
        display: block;
    }

    .pedi-auth .pa-main {
        padding: 48px 64px 24px;
        background: var(--pa-surface);
        border-left: 1px solid var(--pa-border);
    }

    .pedi-auth .pa-panel {
        max-width: 400px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 420px) {
    .pedi-auth .pa-main {
        justify-content: flex-start;
        padding-top: 24px;
    }

    .pedi-auth .pa-panel {
        padding: 24px 16px;
        border-radius: var(--radius-xl);
    }
}

/* ── Brand + heading ── */

.pedi-auth .pa-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.pedi-auth .pa-brand-mark {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.pedi-auth .pa-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.pedi-auth .pa-brand-text strong {
    color: var(--pa-heading);
    font-size: var(--text-body-lg-size, 16px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pedi-auth .pa-brand-text span {
    color: var(--pa-muted);
    font-size: var(--text-small-size);
    font-weight: 500;
}

.pedi-auth .pa-title {
    margin: 0;
    font-family: var(--text-h2-family);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    color: var(--pa-heading);
}

.pedi-auth .pa-subtitle {
    margin: 4px 0 24px;
    color: var(--pa-muted);
    font-size: var(--text-body-size);
}

/* ── Callouts (session messages, captcha) ── */

.pedi-auth .pa-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--pa-radius-control);
    font-size: var(--text-body-size);
    font-weight: 500;
    line-height: 20px;
}

.pedi-auth .pa-callout--danger {
    background: var(--pa-danger-fill);
    border-color: var(--pa-danger-border);
    color: var(--pa-danger);
}

.pedi-auth .pa-callout--success {
    background: var(--pa-success-fill);
    border-color: currentColor;
    color: var(--pa-success);
}

.pedi-auth .pa-callout-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Fields ── */

.pedi-auth .pa-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* reCAPTCHA injects a wrapper for its fixed badge into the form; keep it out of the flex gap. */
.pedi-auth .pa-form > div:not(.pa-field) {
    display: contents;
}

.pedi-auth .pa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pedi-auth .pa-label {
    margin: 0;
    color: var(--pa-heading);
    font-size: var(--text-body-size);
    font-weight: 500;
}

.pedi-auth .form-control.pa-input {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    background: var(--pa-surface);
    border: 1px solid var(--pa-border-strong);
    border-radius: var(--pa-radius-control) !important;
    color: var(--pa-heading);
    font-family: var(--pa-font);
    font-size: 16px; /* 16px stops iOS zooming into the field */
    font-weight: 400;
    line-height: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    background-image: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pedi-auth .form-control.pa-input::placeholder {
    color: var(--pa-placeholder);
    opacity: 1;
}

.pedi-auth .form-control.pa-input:focus {
    outline: none;
    background: var(--pa-surface);
    border-color: var(--pa-focus);
    color: var(--pa-heading);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-focus) 28%, transparent);
}

.pedi-auth .form-control.pa-input.is-invalid {
    border-color: var(--pa-danger-solid);
}

.pedi-auth .form-control.pa-input.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-danger-solid) 24%, transparent);
}

/* Autofill keeps the theme's surface instead of the browser's yellow/blue fill. */
.pedi-auth .form-control.pa-input:-webkit-autofill,
.pedi-auth .form-control.pa-input:-webkit-autofill:hover,
.pedi-auth .form-control.pa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pa-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--pa-surface) inset;
    caret-color: var(--pa-heading);
}

/* Password field: the reveal button sits inside the input's right edge. */
.pedi-auth .pa-password {
    position: relative;
    display: block;
    flex-wrap: nowrap;
}

.pedi-auth .pa-password .form-control.pa-input {
    padding-right: 48px;
}

.pedi-auth .pa-reveal {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--pa-radius-control) - 2px);
    background: transparent;
    color: var(--pa-muted);
    cursor: pointer;
}

.pedi-auth .pa-reveal:hover {
    color: var(--pa-heading);
}

.pedi-auth .pa-reveal svg {
    width: 20px;
    height: 20px;
}

.pedi-auth .pa-reveal svg[hidden] {
    display: none;
}

/* Inline errors: server-rendered (.pa-error) and jQuery Validation (.invalid-feedback) look the same. */
.pedi-auth .pa-error,
.pedi-auth .pa-field .invalid-feedback {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--pa-danger);
    font-size: var(--text-body-size);
    font-weight: 500;
    line-height: 20px;
}

.pedi-auth .pa-error svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Actions ── */

.pedi-auth .btn.pa-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin-top: 4px;
    padding: 0 16px;
    border: 1px solid var(--pa-brand) !important;
    border-radius: var(--pa-radius-control);
    background: var(--pa-brand);
    color: var(--pa-brand-fg);
    font-family: var(--pa-font);
    font-size: 16px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.pedi-auth .btn.pa-submit:hover,
.pedi-auth .btn.pa-submit:active {
    border-color: var(--pa-brand-hover) !important;
    background: var(--pa-brand-hover);
    color: var(--pa-brand-fg);
}

.pedi-auth .pa-link:focus-visible,
.pedi-auth .pa-link-button:focus-visible,
.pedi-auth .pa-reveal:focus-visible,
.pedi-auth .btn.pa-submit:focus-visible {
    outline: 2px solid var(--pa-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── One-time code step ── */

.pedi-auth .pa-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-control);
    background: var(--pa-canvas);
    color: var(--pa-heading);
}

.pedi-auth .pa-step-icon svg {
    width: 22px;
    height: 22px;
}

.pedi-auth .pa-strong {
    color: var(--pa-heading);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pedi-auth .form-control.pa-input.pa-otp {
    height: 56px;
    padding: 8px 14px;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5em;
    text-align: center;
    text-indent: .5em;
}

.pedi-auth .form-control.pa-input.pa-otp::placeholder {
    letter-spacing: .5em;
}

.pedi-auth .pa-hint {
    margin: 0;
    color: var(--pa-muted);
    font-size: var(--text-small-size);
    line-height: 18px;
}

.pedi-auth .pa-link,
.pedi-auth .pa-link-button {
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--pa-link);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pedi-auth .pa-link:hover,
.pedi-auth .pa-link-button:hover {
    color: var(--pa-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pedi-auth .pa-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    color: var(--pa-muted);
    font-size: var(--text-body-size);
}

.pedi-auth .pa-footer {
    color: var(--pa-muted);
    font-size: var(--text-small-size);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .pedi-auth * {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .pedi-auth .form-control.pa-input:focus,
    .pedi-auth .btn.pa-submit:focus-visible {
        outline: 2px solid CanvasText;
    }
}