/*
 * Two-column split screen for the login page: navy brand panel (logo +
 * project photos) on the left, white form panel on the right. Filament's
 * default "simple page" layout renders a single centered card
 * (.fi-simple-main, max-width ~lg) — .rsi-login replaces its contents, so
 * the selectors below break that card out to a full-bleed two-column
 * layout instead of fighting the centered-card sizing.
 */

.fi-simple-main:has(.rsi-login) {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100%;
}

.fi-simple-main-ctn:has(.rsi-login),
.fi-simple-layout:has(.rsi-login) {
    align-items: stretch;
}

.rsi-login {
    display: flex;
    min-height: 100dvh;
    width: 100%;
}

.rsi-login-panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    box-sizing: border-box;
}

/* Left: brand panel — always navy, regardless of light/dark mode. */
.rsi-login-panel-brand {
    background-color: var(--primary-600) !important;
    justify-content: space-between;
    gap: 2.5rem;
}

.rsi-login-brand-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.rsi-login-logo {
    width: 200px;
    height: auto;
    display: block;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.rsi-login-tagline {
    color: #fff !important;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 26rem;
}

.rsi-login-photos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rsi-login-photos-row {
    display: flex;
    gap: 0.75rem;
}

.rsi-login-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}

.rsi-login-photo-wide {
    height: 11rem;
}

.rsi-login-photos-row .rsi-login-photo {
    flex: 1 1 50%;
    height: 8rem;
}

/* Right: form panel — always white/light, regardless of the panel's
 * light/dark mode toggle (this page intentionally opts out of dark mode). */
.rsi-login-panel-form {
    background-color: #fff !important;
    align-items: center;
    justify-content: center;
}

.rsi-login-card {
    width: 100%;
    max-width: 26rem;
    background-color: var(--color-white) !important;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    padding: 2.5rem;
    box-sizing: border-box;
}

.rsi-login-panel-form .fi-simple-page-content {
    width: 100%;
}

.rsi-login-panel-form .fi-simple-header-heading {
    color: var(--gray-950) !important;
}

.rsi-login-panel-form .fi-simple-header-subheading,
.rsi-login-panel-form .fi-fo-field-wrp-label,
.rsi-login-panel-form label {
    color: var(--gray-700) !important;
}

/* Filament's dark-mode rules target these inner spans/icons directly
 * (higher specificity than a plain `label` selector can beat), so they
 * need their own explicit override to actually stay readable on white. */
.rsi-login-panel-form .fi-fo-field-label-content,
.rsi-login-panel-form .fi-fo-checkbox-label {
    color: var(--gray-950) !important;
}

.rsi-login-panel-form .fi-input {
    background-color: var(--color-white) !important;
    color: var(--gray-950) !important;
}

.rsi-login-panel-form .fi-input-wrapper {
    background-color: var(--color-white) !important;
    border-color: var(--gray-300) !important;
}

.rsi-login-panel-form .fi-icon-btn {
    color: var(--gray-400) !important;
}

.rsi-login-panel-form .fi-checkbox-input {
    background-color: var(--color-white) !important;
    border-color: var(--gray-300) !important;
}

@media (max-width: 900px) {
    .rsi-login {
        flex-direction: column;
    }

    .rsi-login-panel-brand {
        display: none;
    }

    .rsi-login-panel-form {
        padding: 2rem 1.5rem;
    }
}