/*
 * Sign-in screens (staff panel and vendor portal; sign in, forgot / reset password, two-step code): one
 * centred 24rem column on a soft brand glow ("Console", UX-01). The glow and the glyph follow the brand colour
 * (--primary-*); light / dark follow the app's mode. Everything is scoped to .crm-auth.
 */
.crm-auth {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(40rem 24rem at 50% -8%, color-mix(in oklab, var(--primary-500) 18%, transparent), transparent),
        var(--gray-50);
}
.dark .crm-auth {
    background:
        radial-gradient(40rem 24rem at 50% -8%, color-mix(in oklab, var(--primary-500) 22%, transparent), transparent),
        var(--gray-950);
}

.crm-auth-card {
    width: 100%;
    max-width: 24rem;
    /* Optical centre: a little above the middle of the viewport. */
    margin-bottom: 8vh;
    outline: none;
}

/* Wordmark: ring glyph + "OTF CRM", drawn in CSS / SVG (no image). */
.crm-auth-wordmark { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; color: var(--gray-950); }
.dark .crm-auth-wordmark { color: #fff; }
.crm-auth-wordmark img { display: block; max-height: 2rem; width: auto; }
.crm-auth-glyph { width: 1.75rem; height: 1.75rem; flex: none; }
.crm-auth-glyph rect { fill: var(--primary-600); }
.crm-auth-glyph circle { fill: none; stroke: #fff; stroke-width: 3; }
.dark .crm-auth-glyph rect { fill: var(--primary-500); }
.crm-auth-wordmark-text { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.crm-auth-wordmark-text b { font-weight: 700; }

/* The Filament simple page inside the column: no card of its own, left aligned. */
.crm-auth .fi-simple-page { display: block; padding: 0; }
.crm-auth .fi-simple-page-content { display: block; width: 100%; padding: 0; margin: 0; row-gap: 0; }
.crm-auth .fi-simple-header { align-items: flex-start; text-align: start; margin-bottom: 2rem; }
.crm-auth .fi-simple-header-heading { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -.02em; text-align: start; color: var(--gray-950); }
.dark .crm-auth .fi-simple-header-heading { color: #fff; }
.crm-auth .fi-simple-header-subheading { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; text-align: start; color: var(--gray-500); }
.dark .crm-auth .fi-simple-header-subheading { color: var(--gray-400); }
.crm-auth .crm-auth-back { display: block; margin-top: .5rem; }

/* Fields and button: 44px (48px on a phone, 16px text: no iOS zoom). */
.crm-auth .fi-input-wrp { min-height: 2.75rem; }
.crm-auth .fi-input { min-height: 2.75rem; font-size: 1rem; }
.crm-auth .fi-btn { min-height: 2.75rem; width: 100%; justify-content: center; }
.crm-auth .fi-fo-field-label-content { font-size: .875rem; }
.crm-auth .fi-fo-checkbox { align-items: center; }
.crm-auth .fi-checkbox-input { width: 1.125rem; height: 1.125rem; }
.crm-auth .fi-input-wrp-suffix .fi-icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
.crm-auth .fi-input:-webkit-autofill {
    -webkit-text-fill-color: var(--gray-950);
    box-shadow: 0 0 0 100rem #fff inset;
}
.dark .crm-auth .fi-input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100rem var(--gray-900) inset;
}

/* Two-step code: Filament's own 6-box one-time-code input (one `code` field, paste and backspace handled by it),
   boxes 48 x 56px with an 8px gap; on a narrow phone they shrink to fit instead of scrolling. */
.crm-auth .fi-one-time-code-input-ctn { display: flex; gap: .5rem; }
.crm-auth .fi-one-time-code-input-digit { flex: 1 1 0; min-width: 0; max-width: 3rem; height: 3.5rem; text-align: center; font-size: 1.25rem; }

/* Remember me (left) and Forgot password (right) on one row; each a 44px touch area. */
.crm-auth-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; }
.crm-auth-forgot {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary-700);
    text-decoration: none;
}
.dark .crm-auth-forgot { color: var(--primary-400); }
.crm-auth-forgot:hover { text-decoration: underline; }
.crm-auth a:focus-visible,
.crm-auth .fi-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.dark .crm-auth a:focus-visible,
.dark .crm-auth .fi-btn:focus-visible { outline-color: var(--primary-400); }

/* Reserved single sign-on / passkey slot and its "or" divider (the view renders nothing until configured). */
.crm-auth-sso { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.crm-auth-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--gray-300);
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--gray-950);
    text-decoration: none;
}
.dark .crm-auth-sso-btn { border-color: var(--gray-700); color: #fff; }
.crm-auth-or { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--gray-500); }
.crm-auth-or::before, .crm-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.dark .crm-auth-or::before, .dark .crm-auth-or::after { background: var(--gray-800); }

/* Footer inside the column, one quiet line. */
.crm-auth-footer { margin-top: 2rem; }
.crm-auth-footer footer { padding: 0 !important; font-size: .75rem !important; }

@media (max-width: 639px) {
    .crm-auth-card { margin-bottom: 0; }
    .crm-auth .fi-input-wrp, .crm-auth .fi-input, .crm-auth .fi-btn { min-height: 3rem; }
}