@font-face {
    font-family: JosefinSansLocal;
    src: local('Josefin Sans'), local('JosefinSans');
}

*{ box-sizing:border-box; margin:0; padding:0; font-family: JosefinSansLocal, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial }

:root{ --brand-color1: rgb(165,94,222); --brand-color2: rgb(173,45,205); --brand-color3: rgb(129,31,153) }

.error{ color:red; font-size:.75rem; margin-top:.25rem }

/* Outer wrapper: rounded background area centered within the page (keeps navbar untouched) */
.auth-page-wrapper{ display:flex; justify-content:center; align-items:center; background:#f0f4fa; padding:25px; border-radius:14px; box-sizing:border-box; min-height:calc(100vh - 120px); margin:24px auto; width:calc(100% - 50px); max-width:none }

.auth-page{ position:relative; display:flex; width:100%; max-width:1100px; border-radius:10px; overflow:hidden; box-shadow:0 6px 20px rgba(15,23,42,0.06); gap:24px; margin:0 auto; justify-content:center; align-items:center; padding:16px; background-color:#f0f4fa; background-image: url('/images/auth/login-hero.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat }

/* When loaded inside the app layout's .main-content we need to ensure it can use full width */
.main-content { margin-left: 0 !important; padding: 1.25rem 1rem !important; }

/* Force the outer layout containers to allow full-width auth area on the login page */
#content { width: 100% !important; max-width: none !important; padding: 0 !important; }
.container-fluid.main-content { width: 100% !important; max-width: none !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

.auth-page .left { flex: 0 0 420px; max-width:420px; width:100%; box-sizing:border-box; position:relative; z-index:1 }

.auth-page::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:0; border-radius:inherit }
.auth-page .right { flex: 1 1 58%; min-height:480px; background-size:cover; background-position:center }

/* Ensure the container is centered within the main-content area */
.auth-page { margin: 0 auto }
.auth-page .left{ background:rgba(255,255,255,0.95); padding:2rem; border-right:1px solid rgba(0,0,0,0.03); display:flex; flex-direction:column; justify-content:center }
.auth-page .left header{ text-align:center; margin-bottom:1.5rem }
.auth-page .left header h1{ font-size:1.8rem; margin-bottom:0.25rem }
.auth-page .left header p{ color:#6b7280 }

.auth-logo{ display:block; margin:0 auto 1rem; max-width:160px; height:auto }

.form-field{ width:100%; margin:0 0 0.75rem; display:flex; flex-direction:column }
.form-field label{ font-size:.95rem }
.form-field input{ height:2.5rem; padding:0 1rem; margin-top:.5rem; border:1px solid #d1d5db; border-radius:.5rem }

.forgot-pass{ margin-top:.5rem; text-decoration:none; color:var(--brand-color2); font-size:.9rem }
.forgot-pass:hover{ color:var(--brand-color3) }

footer{ width:100%; margin:1rem 0; display:flex; flex-direction:column; gap:0.9rem }
.footer-log-in-btn{ width:100%; border:none; font-size:1.05rem; background:var(--brand-color1); color:#fff; border-radius:12px; padding:.75rem; cursor:pointer }
.footer-log-in-btn:hover{ background:var(--brand-color2); transform:scale(1.02) }

.no-account{ display:flex; justify-content:center; gap:.5rem; font-size:.95rem }
.no-account a{ color:var(--brand-color2); text-decoration:none }

/* remove social styles when not used; keep minimal spacing */
.continue-with{ display:none }

/* top spacing to avoid navbar overlap */
.auth-page{ margin-top:1.5rem }

.right{ background-image: url('/images/auth/login-hero.jpg'); background-size:cover; background-position:center }

@media (max-width:768px){
    .auth-page{ flex-direction:column; max-width:100%; padding:0 12px }
    .right{ display:none }
    .auth-page .left{ border-radius:12px; max-width:100%; width:100%; padding:1.5rem }
}