/* Login-only presentation. Keep the shared Farmasi palette and dashboard intact. */
.sim-farmasi-login {
    --login-teal: var(--farmasi-primary, #17675b);
    --login-deep: var(--farmasi-primary-deep, #0d3734);
    --login-mint: #89ddcc;
    --login-muted: #64778f;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(24px, 5vh, 56px) 32px 26px;
    overflow: hidden;
    color: #163f3b;
    background: radial-gradient(ellipse at 1% 65%, #d3efea 0, transparent 48%),
        radial-gradient(ellipse at 95% 14%, #e1f5f0 0, transparent 42%), #f2faf8;
    font-family: Inter, "Segoe UI", sans-serif;
    text-align: left;
    color-scheme: light;
}

.sim-farmasi-login::before,
.sim-farmasi-login::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    border-radius: 24px;
    background: #c7eae4;
    opacity: .36;
    clip-path: polygon(34% 0, 66% 0, 66% 34%, 100% 34%, 100% 66%, 66% 66%, 66% 100%, 34% 100%, 34% 66%, 0 66%, 0 34%, 34% 34%);
    pointer-events: none;
}

.sim-farmasi-login::before { top: -38px; left: 4%; }
.sim-farmasi-login::after { right: 3%; top: 23%; width: 130px; height: 130px; }

.sim-farmasi-login__stage {
    position: relative;
    display: grid;
    flex: 1 0 auto;
    place-items: center;
    width: 100%;
}

.sim-farmasi-login__stage::before,
.sim-farmasi-login__stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 780px;
    height: 650px;
    border: 1px solid #8ac9bf;
    border-radius: 50%;
    box-shadow: 0 38px 0 12px rgba(167, 221, 210, .2), 0 82px 0 25px rgba(255, 255, 255, .5);
    transform: rotate(28deg);
    pointer-events: none;
}

.sim-farmasi-login__stage::before { left: -620px; top: 20%; }
.sim-farmasi-login__stage::after { right: -610px; bottom: -300px; }

.sim-farmasi-login__card {
    display: grid;
    grid-template-columns: 56.5% 43.5%;
    width: 100%;
    max-width: 1200px;
    min-height: 650px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(22, 91, 79, .12);
}

.sim-farmasi-login__brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding: 50px 56px 285px;
    color: #fff;
    background: linear-gradient(125deg, #104a46 0%, #17675b 100%);
}

.sim-farmasi-login__brand::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient(110deg, rgba(10, 59, 55, .94) 12%, rgba(13, 70, 64, .68) 100%),
        url("../../images/auth-one-bg.jpg") center 30% / cover;
}

.sim-farmasi-login__brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 57% -35% -40% -15%;
    border-radius: 50% 0 0 0;
    background: linear-gradient(150deg, rgba(86, 200, 179, .25), rgba(14, 87, 77, .7));
    transform: rotate(-19deg);
}

.sim-farmasi-login__brand-content { position: relative; z-index: 1; }
.sim-farmasi-login__identity { display: flex; align-items: center; gap: 18px; }
.sim-farmasi-login__logo { flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; }
.sim-farmasi-login__hospital { display: flex; flex-direction: column; min-width: 0; }
.sim-farmasi-login__hospital span:first-child { font-size: 29px; font-weight: 400; letter-spacing: .8px; line-height: 1.3; text-transform: uppercase; }
.sim-farmasi-login__hospital span:last-child { margin-top: 2px; font-size: 16px; letter-spacing: 3px; line-height: 1.5; }
.sim-farmasi-login__brand-rule { width: 128px; height: 2px; margin: 24px 0 18px; background: linear-gradient(90deg, #8ae5d0, transparent); }
.sim-farmasi-login h1 { margin: 0 0 12px; color: #fff; font-size: clamp(38px, 3.3vw, 50px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.15; }
.sim-farmasi-login__tagline { margin: 0; color: #e0f2ee; font-size: 21px; line-height: 1.5; }
.sim-farmasi-login__services { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 26px; }
.sim-farmasi-login__services span { display: inline-flex; align-items: center; gap: 9px; color: #e5f5f1; font-size: 13px; line-height: 1.5; }
.sim-farmasi-login__services span + span { padding-left: 20px; border-left: 1px solid rgba(182, 238, 225, .65); }
.sim-farmasi-login__services i { color: var(--login-mint); font-size: 29px; line-height: 1; }
.sim-farmasi-login__illustration { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; pointer-events: none; }

.sim-farmasi-login__form-panel { display: flex; align-items: center; min-width: 0; padding: 55px 46px; background: #fff; }
.sim-farmasi-login__form-content { width: 100%; }
.sim-farmasi-login h2 { margin: 0 0 10px; color: #124b45; font-size: clamp(26px, 2.1vw, 34px); font-weight: 700; letter-spacing: -1px; line-height: 1.25; }
.sim-farmasi-login__intro { margin: 0; color: var(--login-muted); font-size: 16px; line-height: 1.6; }
.sim-farmasi-login__feedback { margin-top: 16px; font-size: 14px; overflow-wrap: anywhere; }
.sim-farmasi-login__feedback:empty { display: none; }
.sim-farmasi-login__feedback ul { margin-bottom: 0; }
.sim-farmasi-login form { margin-top: 32px; }
.sim-farmasi-login__field { margin-bottom: 24px; }
.sim-farmasi-login__field label { display: block; margin: 0 0 9px; color: #163f3b; font-size: 14px; font-weight: 600; line-height: 1.5; }
.sim-farmasi-login__input-wrap { position: relative; }
.sim-farmasi-login__input-icon { position: absolute; top: 15px; left: 16px; color: #718399; font-size: 21px; line-height: 24px; pointer-events: none; }
.sim-farmasi-login .form-control { width: 100%; height: 54px; padding: 12px 16px 12px 48px; border: 1px solid #cbd6df; border-radius: 6px; background-color: #fff; color: #213e3b; font-family: inherit; font-size: 15px; line-height: 1.5; box-shadow: 0 1px 2px rgba(20, 64, 57, .025); }
.sim-farmasi-login .form-control::placeholder { color: #8491a5; opacity: 1; }
.sim-farmasi-login .form-control:focus { border-color: var(--login-teal); outline: 0; box-shadow: 0 0 0 3px rgba(23, 103, 91, .15); }
.sim-farmasi-login .form-control.is-invalid { border-color: #c44136; }
.sim-farmasi-login .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(196, 65, 54, .13); }
.sim-farmasi-login .invalid-feedback { color: #ae3027; font-size: 13px; overflow-wrap: anywhere; }
.sim-farmasi-login__password-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sim-farmasi-login__password-label a { color: var(--login-teal); font-size: 12px; text-align: right; }
.sim-farmasi-login__password-wrap .form-control { padding-right: 52px; }
.sim-farmasi-login__password-wrap .form-control.is-invalid { padding-right: 76px; background-position: right 52px center; }
.sim-farmasi-login__password-toggle { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #718399; font-size: 21px; cursor: pointer; }
.sim-farmasi-login__password-toggle:hover { background: #edf5f3; color: var(--login-teal); }
.sim-farmasi-login__password-toggle:focus-visible,
.sim-farmasi-login__submit:focus-visible,
.sim-farmasi-login a:focus-visible,
.sim-farmasi-login .form-check-input:focus-visible { outline: 3px solid #21a58d; outline-offset: 3px; }
.sim-farmasi-login__remember { margin-bottom: 20px; color: #163f3b; }
.sim-farmasi-login__submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 28px; padding: 12px 18px; border: 1px solid var(--login-teal); border-radius: 6px; background: var(--login-teal); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; transition: background-color .15s, box-shadow .15s; }
.sim-farmasi-login__submit i { font-size: 20px; font-weight: 400; }
.sim-farmasi-login__submit [hidden] { display: none; }
.sim-farmasi-login__submit:disabled { cursor: wait; opacity: .8; }
.sim-farmasi-login__submit:hover,
.sim-farmasi-login__submit:active,
.sim-farmasi-login__submit:focus { border-color: var(--login-deep); background: var(--login-deep); color: #fff; box-shadow: 0 3px 10px rgba(13, 55, 52, .12); }
.sim-farmasi-login__footer { flex-shrink: 0; padding-top: 42px; color: #64778f; font-size: 12px; line-height: 1.7; text-align: center; }
.sim-farmasi-login__footer p { margin: 0; }

/* SweetAlert renders outside the login wrapper; this class is login-specific. */
.swal2-popup.sim-farmasi-login-alert {
    border-radius: 16px;
    background: #fff;
    color: #163f3b;
    font-family: Inter, "Segoe UI", sans-serif;
}
.sim-farmasi-login-alert .swal2-title { color: #124b45; font-size: 25px; }
.sim-farmasi-login-alert .swal2-html-container { color: #64778f; font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.sim-farmasi-login-alert .swal2-confirm { min-height: 44px; padding: 10px 26px; border-radius: 6px; }
.sim-farmasi-login-alert .swal2-confirm:focus-visible { outline: 3px solid #21a58d; outline-offset: 3px; }

@media (min-width: 992px) and (max-height: 820px) {
    .sim-farmasi-login { padding-top: 30px; padding-bottom: 20px; }
    .sim-farmasi-login__card { min-height: 570px; }
    .sim-farmasi-login__brand { padding: 36px 46px 240px; }
    .sim-farmasi-login__logo { width: 64px; height: 64px; }
    .sim-farmasi-login__brand-rule { margin: 20px 0 16px; }
    .sim-farmasi-login h1 { font-size: 44px; }
    .sim-farmasi-login__tagline { font-size: 20px; }
    .sim-farmasi-login__services { margin-top: 22px; }
    .sim-farmasi-login__illustration { width: 93%; left: 3%; }
    .sim-farmasi-login__footer { padding-top: 26px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .sim-farmasi-login__brand { padding-left: 32px; padding-right: 32px; }
    .sim-farmasi-login__identity { gap: 14px; }
    .sim-farmasi-login__hospital span:first-child { font-size: 24px; }
    .sim-farmasi-login__hospital span:last-child { font-size: 13px; letter-spacing: 2px; }
    .sim-farmasi-login__services { gap: 10px 12px; }
    .sim-farmasi-login__services span { font-size: 12px; }
    .sim-farmasi-login__services span + span { padding-left: 12px; }
    .sim-farmasi-login__form-panel { padding: 40px 30px; }
    .sim-farmasi-login__desktop-break { display: none; }
}

@media (max-width: 991.98px) {
    .sim-farmasi-login { padding: 32px 24px 22px; }
    .sim-farmasi-login__card { grid-template-columns: 1fr; max-width: 560px; min-height: 0; border-radius: 16px; }
    .sim-farmasi-login__brand { padding: 28px 36px; }
    .sim-farmasi-login__identity { gap: 14px; }
    .sim-farmasi-login__logo { width: 56px; height: 56px; }
    .sim-farmasi-login__hospital span:first-child { font-size: 22px; }
    .sim-farmasi-login__hospital span:last-child { font-size: 12px; letter-spacing: 2px; }
    .sim-farmasi-login__brand-rule { margin: 18px 0 14px; width: 96px; }
    .sim-farmasi-login h1 { margin-bottom: 8px; font-size: 32px; letter-spacing: -.7px; }
    .sim-farmasi-login__tagline { font-size: 15px; }
    .sim-farmasi-login__illustration,
    .sim-farmasi-login__services,
    .sim-farmasi-login__desktop-break { display: none; }
    .sim-farmasi-login__form-panel { padding: 32px 36px 36px; }
    .sim-farmasi-login h2 { font-size: 28px; }
    .sim-farmasi-login__intro { font-size: 14px; }
    .sim-farmasi-login form { margin-top: 24px; }
    .sim-farmasi-login__field { margin-bottom: 20px; }
    .sim-farmasi-login__footer { padding-top: 26px; }
}

@media (max-width: 479.98px) {
    .sim-farmasi-login { padding: 20px 16px; }
    .sim-farmasi-login__brand { padding: 22px 24px; }
    .sim-farmasi-login__identity { gap: 12px; }
    .sim-farmasi-login__logo { width: 48px; height: 48px; }
    .sim-farmasi-login__hospital span:first-child { font-size: 19px; }
    .sim-farmasi-login__hospital span:last-child { font-size: 11px; letter-spacing: 1px; }
    .sim-farmasi-login__tagline { font-size: 14px; }
    .sim-farmasi-login__form-panel { padding: 28px 24px 32px; }
    .sim-farmasi-login h2 { font-size: 25px; }
    .sim-farmasi-login__footer { max-width: 310px; align-self: center; font-size: 11px; }
}

@media (max-width: 359.98px) {
    .sim-farmasi-login { padding-left: 12px; padding-right: 12px; }
    .sim-farmasi-login__brand,
    .sim-farmasi-login__form-panel { padding-left: 20px; padding-right: 20px; }
    .sim-farmasi-login__hospital span:first-child { font-size: 17px; }
    .sim-farmasi-login__hospital span:last-child { font-size: 10px; letter-spacing: .6px; }
}

@media (prefers-reduced-motion: reduce) {
    .sim-farmasi-login__submit,
    .sim-farmasi-login .form-control { transition: none; }
}