:root {
    --rr-ink: #25322d;
    --rr-muted: #718078;
    --rr-cream: #f6f3eb;
    --rr-sage: #dce7dc;
    --rr-green: #3d6653;
    --rr-coral: #cf7257;
    --rr-line: #dfe5df;
}

.admin-login-page {
    min-height: 100vh;
    color: var(--rr-ink);
    background: var(--rr-cream) !important;
}

.admin-login-page .custom-page,
.admin-login-page .custom-page > .row {
    min-height: 100vh;
}

.login-brand-column {
    position: relative;
    overflow: hidden;
    background-color: var(--rr-green) !important;
    background-image: url('../../frontend-assets/images/jollof_rice.webp') !important;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.login-brand-column::before {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(145deg, rgba(25, 55, 43, .9), rgba(40, 70, 57, .76));
}

.login-brand-column::after {
    position: absolute;
    width: 360px;
    height: 360px;
    right: -150px;
    bottom: -170px;
    content: '';
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.login-brand-panel {
    position: relative;
    z-index: 1;
    max-width: 530px;
    margin: auto;
    padding: 2rem;
}

.login-brand-logo { max-width: 105px; max-height: 105px; margin-bottom: 1.75rem; object-fit: contain; }
.login-kicker, .login-eyebrow { color: var(--rr-coral); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.login-brand-column h1 { font-size: clamp(2.5rem, 4vw, 4.2rem); letter-spacing: 0; }
.login-brand-divider { width: 45px; height: 3px; margin: 1.35rem auto; background: var(--rr-coral); }
.login-brand-panel > p:not(.login-kicker) { color: rgba(255, 255, 255, .78); line-height: 1.7; }
.login-brand-features { display: grid; gap: .85rem; max-width: 330px; margin: 2rem auto 0; padding: 0; color: rgba(255, 255, 255, .9); font-size: .9rem; text-align: left; list-style: none; }
.login-brand-features i { width: 1.5rem; margin-right: .5rem; color: #f0b094; font-size: 1.1rem; vertical-align: middle; }

.login-form-column { display: flex; align-items: center; }
.login-form-column .login { width: 100%; }
.auth-form-header { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.auth-home-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--rr-muted); font-size: .82rem; font-weight: 700; }
.auth-home-link:hover, .auth-cancel-link:hover { color: var(--rr-green); }
.auth-home-link i { font-size: 1rem; transition: transform .2s ease; }
.auth-home-link:hover i { transform: translateX(-3px); }
.auth-cancel-link { color: var(--rr-muted); font-size: .84rem; font-weight: 600; }
.login-card { padding: 1rem 0; }
.login-card h2 { margin: .7rem 0 .5rem; color: var(--rr-ink); font-size: 2.15rem; font-weight: 700; letter-spacing: 0; }
.login-intro { max-width: 330px; margin-bottom: 2rem; color: var(--rr-muted); line-height: 1.65; }
.login-eyebrow span { display: inline-block; width: 24px; height: 2px; margin-right: .45rem; vertical-align: middle; background: var(--rr-coral); }
.login-card .form-label { margin-bottom: .55rem; color: var(--rr-ink); font-size: .82rem; font-weight: 700; }
.login-card .form-control, .login-card .form-select { min-height: 52px; border: 1px solid var(--rr-line); border-radius: 8px; background-color: #fbfcfa; color: var(--rr-ink); }
.login-card .form-control:focus, .login-card .form-select:focus { border-color: var(--rr-green); box-shadow: 0 0 0 3px rgba(61, 102, 83, .12); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 3.1rem; }
.password-toggle { position: absolute; top: 50%; right: .85rem; border: 0; color: var(--rr-muted); background: transparent; transform: translateY(-50%); }
.password-toggle:hover { color: var(--rr-green); }
.login-card .form-check-label { color: var(--rr-muted); font-size: .85rem; }
.login-card .form-check-input:checked { border-color: var(--rr-green); background-color: var(--rr-green); }
.login-submit { min-height: 52px; border: 0; border-radius: 8px; background: var(--rr-green); font-weight: 700; }
.login-submit i { margin-left: .45rem; transition: margin-left .2s ease; }
.login-submit:hover { background: #2f5141; }
.login-submit:hover i { margin-left: .7rem; }
.login-submit:disabled { background: var(--rr-green); cursor: wait; opacity: .82; }

@media (max-width: 767.98px) {
    .admin-login-page .custom-page, .admin-login-page .custom-page > .row { min-height: 100vh; }
    .login-form-column { min-height: 100vh; padding: 2rem 1.5rem !important; }
    .login-card { padding: 0; }
    .login-card h2 { font-size: 1.9rem; }
}