/* Dedicated login presentation; authentication and profile selection stay shared. */
:root { --login-accent:#4f46e5; }
body { background:#f6f7fc; padding:0!important; }
body::before { display:none; }
#loginShell { position:relative; isolation:isolate; width:100%; max-width:none; min-height:100svh; padding:40px 64px; gap:clamp(32px,4.2vw,80px); grid-template-columns:minmax(360px,.85fr) minmax(0,1.15fr); }
#loginShell::before { content:''; position:absolute; z-index:-1; left:45%; right:24px; top:24px; bottom:24px; border-radius:32px; background-image:linear-gradient(110deg,rgba(19,20,59,.9),rgba(30,27,75,.55)),url('../assets/img/login-hospital-indigo.png'); background-image:linear-gradient(110deg,rgba(19,20,59,.9),rgba(30,27,75,.55)),image-set(url('../assets/img/login-hospital-indigo.webp') type('image/webp'),url('../assets/img/login-hospital-indigo.png') type('image/png')); background-position:center; background-size:cover; }
#loginShell>.flex { align-self:center; }
#loginShell .card { background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:28px 0; max-width:400px; border-radius:0; }
#loginShell .card>div:first-child { border:0; padding-bottom:0; margin-bottom:45px; }
#loginShell .card>div:first-child>div:first-child { background:#4f46e5!important; border-radius:14px; box-shadow:0 8px 22px #4f46e52b; }
#loginShell .text-blue-600 { color:#4f46e5; }
.login-eyebrow { font-size:10px; font-weight:800; letter-spacing:.18em; color:#4f46e5; }
.login-welcome h2 { font-size:34px; line-height:1.23; letter-spacing:-1.4px; font-weight:800; margin:12px 0; color:#171735; }
.login-welcome p { color:#72758b; font-size:14px; margin-bottom:30px; }
#loginForm>div+div { margin-top:22px; }
#loginForm label { color:#50536c; font-size:11px; letter-spacing:.08em; }
#loginForm .input-field { background:white; border:1px solid #dedfec; box-shadow:0 2px 4px #1e1b4b03; border-radius:12px; padding:17px 18px; transition:border-color .2s,box-shadow .2s; }
#loginForm .input-field:focus-within { border-color:#4f46e5; box-shadow:0 0 0 4px #4f46e515; }
#loginForm input { font-size:15px; font-weight:500; min-width:0; }
#loginForm input::placeholder { color:#a0a2b5; }
#loginForm .btn-primary { background:#4f46e5; border-radius:12px; padding:19px; box-shadow:0 8px 20px #4f46e526; transition:background .2s,transform .2s; letter-spacing:.1em; }
#loginForm .btn-primary:hover { background:#4338ca; transform:translateY(-1px); }
#loginShell .card>div:last-child { font-size:8px; letter-spacing:.12em; color:#9294a8; }
#loginShell .info-col-offset { transform:none; padding:60px 20px 60px 0; color:white; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.18em; font-weight:700; color:#ddd9ff; margin-bottom:25px; }
.hero-eyebrow span { width:6px; height:6px; border-radius:50%; background:#a5b4fc; box-shadow:0 0 0 5px #a5b4fc18; }
#loginShell .info-col-offset h2 { font-size:clamp(38px,4vw,60px); line-height:1.1; letter-spacing:-2.5px; margin-bottom:22px; color:#fff; }
#loginShell .info-col-offset h2 em { font-style:normal; color:#bcb7ff; }
#loginShell .info-col-offset p { color:#d5d7e9!important; font-size:14px; line-height:1.8; max-width:420px; }
#loginShell .info-col-offset .grid:first-of-type { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:22px 0; border-top:1px solid #ffffff26; border-bottom:1px solid #ffffff26; }
#loginShell .feature { background:transparent; backdrop-filter:none; border:0; box-shadow:none; border-radius:0; padding:10px 12px 10px 0; text-align:left; }
#loginShell .stat-num { color:#fff; font-size:27px; letter-spacing:-1px; }
#loginShell .feature.text-center .text-xs { color:#c2c2dd!important; font-size:8px; letter-spacing:.08em; }
#loginShell .feature .text-xs { color:#c2c2dd!important; font-size:11px; line-height:1.6; margin-top:5px; }
#loginShell .feature .font-bold { font-size:12px; }
#loginShell .feature i { color:#bcb7ff; font-size:15px; margin-top:3px; }
#themeToggle { position:absolute; z-index:2; top:36px; right:36px; width:40px; height:40px; border-radius:10px; cursor:pointer; background:#ffffffdd!important; color:#4f46e5; border:1px solid #e4e2f5!important; }
.dark body { background:#101020; }
.dark #loginShell .card { background:transparent; }
.dark .login-welcome h2 { color:#f3f1ff; }
.dark .login-welcome p { color:#a5a5be; }
.dark #loginForm .input-field { background:#1b1b31; border-color:#35354d; }
.dark #loginForm label { color:#c2c1d9; }
.dark #loginShell .text-blue-600,.dark .login-eyebrow { color:#a5a0ff; }
@media(min-width:1600px) { #loginShell { min-height:900px; min-height:100svh; } }
@media(max-width:1100px) { #loginShell { padding:35px; gap:55px; } #loginShell::before { left:46%; right:20px; top:20px; bottom:20px; } #loginShell .info-col-offset { padding-right:10px; } #themeToggle { top:32px; right:32px; } }
@media(max-width:1023px) { #loginShell { display:flex; justify-content:center; padding:48px 28px 35px; } #loginShell>.flex { width:100%; max-width:400px; } #loginShell::before { inset:0; height:auto; border-radius:0; background-image:linear-gradient(110deg,rgba(19,20,59,.94),rgba(30,27,75,.78)),url('../assets/img/login-hospital-indigo.png'); background-image:linear-gradient(110deg,rgba(19,20,59,.94),rgba(30,27,75,.78)),image-set(url('../assets/img/login-hospital-indigo.webp') type('image/webp'),url('../assets/img/login-hospital-indigo.png') type('image/png')); background-position:center; background-size:cover; } #loginShell .info-col-offset { display:none; } #loginShell .card { padding:20px 0; } #themeToggle { top:16px; right:16px; } }
@media(prefers-reduced-motion:reduce) { #loginForm .btn-primary,#loginForm .input-field { transition:none; } }

/* Size the composition by available height as well as width. */
html { height:100%; }
body { min-height:0!important; height:100vh; height:100dvh; }
#loginShell { box-sizing:border-box; height:100%; min-height:0; padding:clamp(16px,4vh,40px) clamp(28px,4vw,64px); gap:clamp(32px,5vw,80px); }
#loginShell>.flex,#loginShell .info-col-offset { min-width:0; min-height:0; }
#loginShell .card { padding:0; }
#loginShell .card>div:first-child { margin-bottom:clamp(18px,4vh,45px); }
.login-welcome h2 { font-size:clamp(25px,4vh,34px); }
.login-welcome p { margin-bottom:clamp(16px,3vh,30px); }
#loginShell .info-col-offset { padding-top:0; padding-bottom:0; }
#loginShell .info-col-offset>.space-y-6>div+div { margin-top:clamp(12px,2.5vh,24px); }
#loginShell .info-col-offset h2 { font-size:clamp(32px,min(4vw,6.5vh),60px); margin-bottom:clamp(12px,2vh,22px); }
.hero-eyebrow { margin-bottom:clamp(12px,2.5vh,25px); }
/* The introductory div precedes the stats, so :first-of-type cannot select it. */
#loginShell .info-col-offset>.space-y-6>.grid:nth-child(2) { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:clamp(10px,2vh,22px) 0; border-block:1px solid #ffffff26; }
@media(max-height:760px) {
    #loginShell .card>div:first-child { margin-bottom:20px; }
    .login-welcome h2 { margin:8px 0; }
    .login-welcome p { margin-bottom:18px; }
    #loginForm>div+div { margin-top:16px; }
    #loginForm .input-field { padding:13px 16px; }
    #loginForm .btn-primary { margin-top:18px; padding:16px; }
    #loginShell .card>div:last-child { margin-top:18px; }
    #loginShell .info-col-offset .feature { padding-top:6px; padding-bottom:6px; }
    #loginShell .info-col-offset p { font-size:12px; line-height:1.6; }
}
@media(max-width:1023px) {
    #loginShell { padding:48px 24px 20px; align-items:center; }
    #loginShell>.flex { align-self:center; }
    #loginShell .card { max-width:400px; padding:0; }
}
@media(max-height:620px) {
    #loginShell { padding-top:16px; padding-bottom:16px; }
    #loginShell .card>div:first-child { margin-bottom:14px; gap:12px; }
    #loginShell .card>div:first-child>div:first-child { width:38px; height:38px; }
    #loginShell .card>div:first-child img { width:26px; height:26px; }
    .login-eyebrow { display:none; }
    .login-welcome h2 { font-size:25px; margin:8px 0; }
    .login-welcome p { margin-bottom:12px; font-size:12px; }
    #loginForm>div+div { margin-top:12px; }
    #loginForm .input-field { padding:10px 14px; }
    #loginForm .btn-primary { padding:13px; margin-top:14px; }
    #loginShell .card>div:last-child { margin-top:12px; }
    #loginShell .info-col-offset>.space-y-6>.grid:last-child { display:none; }
    #themeToggle { top:12px; right:12px; width:34px; height:34px; }
}
@media(max-height:460px) {
    #loginShell .card>div:first-child { margin-bottom:10px; }
    .login-welcome { display:none; }
    #loginShell .card>div:last-child { margin-top:8px; font-size:7px; }
    #loginForm label { margin-bottom:4px; }
    #loginForm>div+div { margin-top:8px; }
    #loginForm .input-field { padding:8px 12px; }
    #loginForm .btn-primary { margin-top:10px; padding:12px; }
}
@media(max-width:1023px) {
    #loginShell .card .text-slate-800,
    #loginShell .card h1,
    .login-welcome h2,
    #loginForm label,
    #loginShell .card>div:last-child { color:#fff!important; }
    #loginShell .card .text-blue-600,
    .login-eyebrow { color:#d6d2ff!important; }
    .login-welcome p { color:#f1f0ff!important; }
}