/* Extracted from bisatumbuh_soh_performance_v15.html lines 596-662.
   login gate overlay
   Phase 1: verbatim copy - no rule added, removed, or reordered. */
/* ===================== LOGIN GATE ===================== */
body.locked{overflow:hidden}
/* every dashboard page stays hidden until sign-in succeeds — this rule beats the
   per-page display rules because of the extra specificity from body.locked */
body.locked #page-home,
body.locked #page-perf,
body.locked #page-doi,
body.locked #page-po,
/* Phase 5 added a fifth page and this list was never extended, so a session
   that expired while the admin page was open left the user list rendered
   underneath the gate. #login-screen covers it, but "covered" is not "hidden". */
body.locked #page-admin{display:none !important}

#login-screen{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(140deg,#0A2E58 0%,#0F4583 55%,#12539c 100%);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
}
#login-screen::before{
  content:'';position:absolute;inset:0;opacity:.13;pointer-events:none;
  background:radial-gradient(circle at 18% 22%,#7CBA43 0,transparent 42%),
             radial-gradient(circle at 82% 78%,#7CBA43 0,transparent 46%);
}
.lg-card{
  position:relative;width:100%;max-width:420px;background:#fff;border-radius:18px;
  padding:38px 34px 26px;box-shadow:0 24px 60px rgba(4,20,40,.34);text-align:center;
}
.lg-logo{height:42px;width:auto;display:block;margin:0 auto 20px}
.lg-title{
  font-family:'Quicksand','Nunito Sans',system-ui,sans-serif;
  font-size:23px;font-weight:700;color:#0A2E58;line-height:1.3;margin:0 0 6px;
}
.lg-sub{font-size:13px;color:#8a97a3;margin:0 0 24px}

#lg-form{text-align:left}
.lg-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#5c6b78;margin:0 0 6px}
.lg-input{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;font-weight:600;color:#0A2E58;
  background:#F6F7F9;border:1.5px solid #e3eae6;border-radius:10px;
  padding:12px 13px;margin-bottom:15px;transition:.15s;outline:none;
}
.lg-input:focus{border-color:#0F4583;background:#fff;box-shadow:0 0 0 3px rgba(15,69,131,.12)}
.lg-passwrap{position:relative}
.lg-passwrap .lg-input{padding-right:44px}
.lg-eye{
  position:absolute;top:11px;right:8px;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:none;background:transparent;color:#8a97a3;
  cursor:pointer;border-radius:7px;transition:.15s;
}
.lg-eye:hover{color:#0F4583;background:#eef2f7}

.lg-err{
  display:none;font-size:12.5px;font-weight:700;color:#d64545;
  background:#fdecec;border:1px solid #f6c9c9;border-radius:9px;
  padding:9px 12px;margin-bottom:14px;
}
.lg-err.show{display:block}
#login-screen.shake .lg-card{animation:lg-shake .4s}
@keyframes lg-shake{
  0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)}
}
.lg-btn{
  width:100%;font-family:inherit;font-size:14px;font-weight:800;color:#fff;
  background:#0F4583;border:none;border-radius:10px;padding:13px;margin-top:3px;
  cursor:pointer;transition:.15s;box-shadow:0 3px 12px rgba(15,69,131,.3);
}
.lg-btn:hover{background:#0A2E58}
.lg-btn:active{transform:translateY(1px)}
.lg-foot{font-size:11px;color:#b3bcc5;margin-top:22px}
@media(max-width:480px){.lg-card{padding:30px 22px 22px}.lg-title{font-size:19px}}

/* ============== administrator gate (/admin-bistum) ==============
   The same card, deliberately not a different design — but unmistakably not
   the public door. Someone who reaches this page by accident should see that
   before they type, and an administrator should see it before they wonder why
   their password was refused on the other one. */
.lg-badge{
  display:inline-block;margin:0 0 14px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#0A2E58;background:#eef2f7;border:1px solid #dde5ec;
  border-radius:999px;padding:5px 13px;
}
.lg-badge[hidden]{display:none}

/* Darker, cooler backdrop: the public gate's green wash reads as "the
   dashboard", and this is not that. */
#login-screen.lg-admin{
  background:linear-gradient(140deg,#06182f 0%,#0A2E58 58%,#0F4583 100%);
}
#login-screen.lg-admin::before{
  background:radial-gradient(circle at 18% 22%,#3f6fa5 0,transparent 44%),
             radial-gradient(circle at 82% 78%,#0F4583 0,transparent 48%);
  opacity:.5;
}
#login-screen.lg-admin .lg-card{border-top:4px solid #0F4583}
#login-screen.lg-admin .lg-foot{color:#8a97a3}