/*
 * Login / auth-page shell — modeled on https://ojembaa.com/login/ (a
 * split navy-panel + light-form layout), extracted via real computed
 * styles (Playwright) rather than guessed: panel #0C1E42, form area
 * #F3F5F9, primary/link/focus color #16336B, border #D3D8E1, muted
 * text #5B6475, 8px input/button radius, Inter body font + Poppins for
 * the brand wordmark, split at 1024px (a single-column stack with a
 * navy top bar below it, matching the reference's own breakpoint).
 *
 * Everything here is scoped under .auth-shell — this app's `.form-
 * control`/`.btn-primary`/`.form-label` classes are shared by every
 * form in every module (via the generic x-text-input/x-primary-button/
 * x-input-label components), so these rules must never leak past the
 * four guest-layout pages (login, forgot/reset password, two-factor
 * challenge) that render inside this shell. Same discipline as dark-
 * mode.css/theme-colors.blade.php elsewhere in this app.
 */

.auth-shell {
    display: flex;
    /* Mobile-first: bar on top, form below, stacked — flex-direction
       only switches to row (panel beside form) at the 1024px
       breakpoint below. Without this, .auth-shell__bar and
       .auth-shell__main sit side by side even on a phone, since row
       is flex's own default direction. */
    flex-direction: column;
    min-height: 100vh;
    background: #f3f5f9;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

/* ---------- Desktop left panel (>=1024px) ---------- */

.auth-shell__panel {
    display: none;
    flex-direction: column;
    width: 440px;
    flex: 0 0 440px;
    padding: 40px 44px;
    background-color: #0c1e42;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}

.auth-shell__panel::before {
    /* Tints an admin-uploaded login background photo back toward the
       reference's flat navy — present even with no photo (harmless,
       same color as the base) so the two cases render identically. */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 30, 66, .82);
}

.auth-shell__panel > * {
    position: relative;
    z-index: 1;
}

/* Qualified with .auth-shell (not just .auth-shell__brand) so this
   beats the general ".auth-shell a" link-color rule further down —
   both are otherwise single-class selectors of equal specificity, and
   the later one in the file would otherwise win regardless, turning
   the brand wordmark navy-on-navy instead of white. */
.auth-shell .auth-shell__brand,
.auth-shell .auth-shell__brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.auth-shell__brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.auth-shell__brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.auth-shell__pitch {
    margin: auto 0;
    padding: 40px 0;
}

.auth-shell__pitch h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.48px;
    margin: 0 0 12px;
    color: #fff;
}

.auth-shell__pitch p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 20px;
}

.auth-shell__points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-shell__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 10px;
}

.auth-shell__points svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #8db4f2;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-shell__panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
}

.auth-shell__panel-foot a {
    color: rgba(255, 255, 255, .7);
}

/* ---------- Mobile top bar (<1024px) ---------- */

.auth-shell__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background-color: #0c1e42;
    background-size: cover;
    background-position: center;
    position: relative;
}

.auth-shell__bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 30, 66, .82);
}

.auth-shell__bar > * {
    position: relative;
    z-index: 1;
}

.auth-shell__bar .auth-shell__brand {
    font-size: 17px;
}

.auth-shell__bar .auth-shell__brand img,
.auth-shell__bar .auth-shell__brand-mark {
    width: 28px;
    height: 28px;
}

/* ---------- Main form area ---------- */

.auth-shell__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-shell__mobile-foot {
    text-align: center;
    font-size: 11.5px;
    color: #94a0b8;
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .auth-shell__mobile-foot {
        display: none;
    }
}

.auth-shell__form {
    width: 100%;
    max-width: 400px;
}

.auth-shell__form h1 {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.46px;
    color: #0f172a;
    margin: 0;
}

.auth-shell__lead {
    font-size: 13.5px;
    color: #5b6475;
    margin: 6px 0 22px;
}

/* ---------- Form controls (scoped override of the shared components) ---------- */

.auth-shell .form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 6px;
}

.auth-shell .field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.auth-shell .field-row .form-label {
    margin-bottom: 0;
}

.auth-shell .field-link {
    font-size: 12.5px;
    font-weight: 500;
    color: #16336b;
}

.auth-shell .ifield {
    position: relative;
}

.auth-shell .ifield__icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #94a0b8;
    pointer-events: none;
}

.auth-shell .ifield__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-shell .form-control {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #d3d8e1;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
}

.auth-shell .ifield .form-control {
    padding-left: 40px;
}

.auth-shell .ifield--pw .form-control {
    padding-right: 42px;
}

.auth-shell .form-control::placeholder {
    color: #94a0b8;
}

.auth-shell .form-control:focus {
    border-color: #16336b;
    box-shadow: 0 0 0 3px rgba(22, 51, 107, .12);
}

.auth-shell .peek {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #949cab;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.auth-shell .peek:hover {
    color: #16336b;
}

.auth-shell .peek svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-shell .custom-control-label {
    font-size: 13px;
    color: #5b6475;
}

.auth-shell .btn-primary {
    height: 44px;
    background-color: #16336b;
    border-color: #16336b;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.auth-shell .btn-primary:hover,
.auth-shell .btn-primary:focus {
    background-color: #102749;
    border-color: #102749;
}

.auth-shell__foot-link {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #5b6475;
}

.auth-shell__foot-link a {
    color: #16336b;
    font-weight: 600;
}

.auth-shell a {
    color: #16336b;
}

/* ---------- Breakpoint: matches the reference's own split point ---------- */

@media (min-width: 1024px) {
    .auth-shell {
        flex-direction: row;
    }

    .auth-shell__panel {
        display: flex;
    }

    .auth-shell__bar {
        display: none;
    }
}