/* Admin sign-in page, styled to match the marketing site (marketing.css).
   Everything is scoped to html.auth-split, which the login view sets, so no
   other admin page is affected. */

html.auth-split {
    --paper: #eff0e8;
    --paper-2: #e1e4d8;
    --ink: #0f1a14;
    --ink-2: #4a574f;
    --line: rgba(15, 26, 20, .16);
    --line-strong: rgba(15, 26, 20, .45);
    --deep: #1c3a2c;
    --accent-strong: #2a6244;
    --error: #a82f08; /* 5.3:1 on --paper-2, passes WCAG AA for text */
    --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: clamp(20px, 4.2vw, 64px);
    color-scheme: light;
}

/* The admin theme paints these with !important too. */
html.auth-split,
html.auth-split body,
html.auth-split .fi-body {
    background: var(--paper) !important;
    color: var(--ink);
}

html.auth-split body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Filament's own font rules are !important, so the font has to be too. */
html.auth-split body,
html.auth-split .fi-body,
html.auth-split .fi-simple-layout,
html.auth-split .fi-simple-layout *:not(svg):not(path) {
    font-family: var(--font) !important;
}

/* ── Left: the brand panel ─────────────────────────────────── */

html.auth-split {
    --forest-1: #1c3a2c;
    --forest-2: #12261d;
    --bone: #eff0e8;
    --bone-2: rgba(239, 240, 232, .76);
    --bone-line: rgba(239, 240, 232, .2);
}

.auth-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 50;
    padding: 10px 14px;
    border-radius: 4px;
    background: var(--ink);
    color: var(--paper);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
}
.auth-skip:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

.auth-aside {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 36px);
    padding: clamp(24px, 4vw, 56px) var(--gutter);
    background:
        radial-gradient(110% 70% at 0% 0%, rgba(77, 140, 104, .38), transparent 60%),
        linear-gradient(165deg, var(--forest-1), var(--forest-2));
    color: var(--bone);
}

.auth-brand {
    align-self: flex-start;
    text-decoration: none;
}
.auth-aside .bl-wordmark { color: var(--bone); }
/* The name of a site, where the wordmark stands on the platform (the sign-in of a site's own host). */
.auth-brand__name { display: block; max-width: 14em; color: var(--bone); font-size: 1.625rem; font-weight: 800; font-stretch: 106%; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }

.auth-copy { margin-block: auto; }

.auth-copy .auth-title {
    max-width: 12em;
    margin: 0;
    color: var(--bone);
    font-size: clamp(2.25rem, 1rem + 3.4vw, 4rem);
    font-weight: 800;
    font-stretch: 106%;
    line-height: 1.02;
    letter-spacing: -.026em;
    text-wrap: balance;
}

.auth-copy .auth-text {
    max-width: 26em;
    margin: 20px 0 0;
    color: var(--bone-2);
    font-size: 1.125rem;
    line-height: 1.55;
}

.auth-links {
    display: none;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: .9375rem;
    font-weight: 500;
}
.auth-links a { display: inline-flex; align-items: center; min-height: 24px; color: var(--bone-2); text-underline-offset: 4px; }
.auth-links a:hover { color: var(--bone); }

.auth-brand:focus-visible,
.auth-links a:focus-visible {
    outline: 2px solid #9fd2b4;
    outline-offset: 3px;
}

/* ── Right: the form ─────────────────────────────────────────── */

html.auth-split .fi-simple-layout {
    min-height: 0;
    padding: clamp(28px, 5vw, 72px) var(--gutter);
    background: #f7f8f2;
}
html.auth-split .fi-simple-main-ctn { justify-content: flex-start; }

html.auth-split .fi-simple-main {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

html.auth-split .fi-logo { display: none !important; }

html.auth-split .fi-simple-header { align-items: flex-start !important; margin-bottom: 8px !important; }
/* The way to the other page is the button under the form; the small link in the heading would repeat it. */
html.auth-split .fi-simple-header-subheading { display: none !important; }
html.auth-split .fi-simple-header-subheading { color: var(--ink-2) !important; text-align: left; line-height: 1.6; }
html.auth-split .fi-simple-header-subheading a { color: var(--accent-strong) !important; font-weight: 600; text-underline-offset: 3px; }
html.auth-split .fi-fo-field-wrp-helper-text { color: var(--ink-2) !important; font-size: .8125rem; }
html.auth-split .fi-simple-header-heading {
    display: block !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) !important;
    font-weight: 800 !important;
    font-stretch: 106%;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

/* labels */
html.auth-split .fi-fo-field-wrp-label,
html.auth-split .fi-fo-field-wrp-label span {
    color: var(--ink) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
}
html.auth-split .fi-fo-field-wrp-label sup { color: var(--error) !important; }

/* inputs */
html.auth-split .fi-input-wrp {
    min-height: 52px;
    border-radius: 4px !important;
    background: #fff !important;
    border: 1px solid var(--line-strong);
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
html.auth-split .fi-input-wrp:focus-within {
    border-color: var(--ink);
    outline: 2px solid var(--accent-strong);
    outline-offset: 1px;
    --tw-ring-shadow: 0 0 #0000 !important;
}
html.auth-split .fi-input {
    height: 50px;
    color: var(--ink) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}
/* Placeholder: lighter than the value, still above 4.5:1 on the field. */
html.auth-split .fi-input::placeholder { color: #59655d; opacity: 1; }

html.auth-split .fi-input-wrp-suffix { border-color: var(--line) !important; }
html.auth-split .fi-input-wrp-suffix button { color: var(--ink-2) !important; }

/* remember me */
html.auth-split .fi-checkbox-input {
    border-color: var(--line-strong) !important;
    background-color: rgba(255, 255, 255, .55);
    border-radius: 3px;
}
html.auth-split .fi-checkbox-input:checked {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
}
html.auth-split .fi-checkbox-input:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* sign in button */
html.auth-split .fi-form-actions .fi-btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    border: 1.5px solid var(--ink);
    border-radius: 4px !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .15s;
}
html.auth-split .fi-form-actions .fi-btn:hover { background: var(--deep) !important; border-color: var(--deep); }
html.auth-split .fi-form-actions .fi-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* errors */
html.auth-split .fi-fo-field-wrp-error-message { color: var(--error) !important; font-weight: 500; }

/* ── States ──────────────────────────────────────────────────── */

/* A field with a validation error: Filament marks the wrapper .fi-invalid. */
html.auth-split .fi-input-wrp.fi-invalid,
html.auth-split .fi-input-wrp[class*="ring-danger"] {
    border-color: var(--error);
}
html.auth-split .fi-input-wrp.fi-invalid:focus-within { outline-color: var(--error); }

html.auth-split .fi-fo-field-wrp-error-message {
    margin-top: 6px;
    font-size: .875rem !important;
    line-height: 1.4;
}

/* Browser autofill would otherwise paint its own blue/yellow field. */
html.auth-split .fi-input:-webkit-autofill,
html.auth-split .fi-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 9999s ease-out;
}

html.auth-split .fi-input-wrp-suffix button:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -3px;
}

/* While the request is running the button is disabled. */
html.auth-split .fi-form-actions .fi-btn[disabled],
html.auth-split .fi-form-actions .fi-btn.fi-disabled {
    opacity: .72;
    cursor: progress;
}

/* Toasts such as "Too many login attempts". */
html.auth-split .fi-no-notification {
    border-radius: 6px;
    background: #f7f8f2;
    box-shadow: 0 0 0 1px var(--line-strong), 0 14px 32px -16px rgba(15, 26, 20, .45);
    --tw-ring-shadow: 0 0 #0000;
}
html.auth-split .fi-no-notification,
html.auth-split .fi-no-notification * { font-family: var(--font) !important; }
html.auth-split .fi-no-notification-title { color: var(--ink) !important; font-weight: 700 !important; }
html.auth-split .fi-no-notification-body { color: var(--ink-2) !important; }

/* ── Under the form: the other way in, and the password meter ── */

/* The rules an account is made under: one quiet sentence right under the button. */
/* The page's own row gap (24px) already separates it from the form; a negative margin keeps it close to the button it explains. */
.auth-legal { margin: -12px 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.55; text-wrap: pretty; }
.auth-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-legal a:hover { color: var(--accent-strong); }

.auth-switch {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.auth-switch__prompt { margin: 0 0 12px; color: var(--ink-2); font-size: .9375rem; }
.auth-switch__button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.auth-switch__button:hover { background: var(--ink); color: var(--paper); }
.auth-switch__button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.auth-meter { display: grid; gap: 6px; margin-top: 2px; }
.auth-meter__bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.auth-meter__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #b45309; transition: width .15s ease-out, background-color .15s; }
.auth-meter.is-ok .auth-meter__fill { background: var(--accent-strong); }
.auth-meter__text { color: var(--ink-2); font-size: .8125rem; line-height: 1.4; }
.auth-meter.is-ok .auth-meter__text { color: var(--accent-strong); font-weight: 600; }

.auth-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Wide screens: brand panel on the left, form on the right ── */

@media (min-width: 960px) {
    html.auth-split body { grid-template-columns: minmax(0, 1.08fr) minmax(440px, 1fr); }

    .auth-aside { grid-column: 1; grid-row: 1; min-height: 100vh; min-height: 100dvh; }
    .auth-links { display: flex; }

    html.auth-split .fi-simple-layout {
        grid-column: 2;
        grid-row: 1;
        min-height: 100vh;
        justify-content: center;
    }
    html.auth-split .fi-simple-main-ctn { flex-grow: 0; }
}


/* ── Narrow screens: a slim brand bar, then the form right away ── */

@media (max-width: 959px) {
    html.auth-split,
    html.auth-split body,
    html.auth-split .fi-body { background: #f7f8f2 !important; }
    html.auth-split body { min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); }
    .auth-aside {
        flex-direction: row;
        align-items: center;
        padding: 14px var(--gutter);
    }
    .auth-copy,
    .auth-links { display: none; }
    html.auth-split .fi-simple-layout { padding-block: 28px 40px; }
    html.auth-split .fi-simple-main-ctn { align-items: flex-start; }
}

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

/* ── The accounts one password opened (filament/auth/choose-account.blade.php) ── */

.account-choice__lede { margin: 0 0 20px; color: var(--ink-2); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.account-choice__lede strong { color: var(--ink); }

.account-choice { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.account-choice__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.account-choice__item:hover { background: var(--ink); color: var(--paper); }
.account-choice__item:hover .account-choice__text span { color: inherit; opacity: .85; }
.account-choice__item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.account-choice__item[disabled] { opacity: .72; cursor: progress; }

.account-choice__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--deep);
    color: var(--bone);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.account-choice__text { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.account-choice__text strong { font-size: 1.0625rem; font-weight: 700; }
.account-choice__text span { color: var(--ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.account-choice__name { font-size: .875rem; }

.account-choice__other {
    display: block;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-strong);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-underline-offset: 3px;
    text-decoration: underline;
    cursor: pointer;
}
.account-choice__other:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }