/* login.css – halaman login */

.login-body{
  background:var(--bg-gradient);
  color:var(--text);
  margin:0;
  font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:380px;
  background:var(--surface-login);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 28px;
  box-shadow:var(--shadow-strong);
  text-align:center;
}

.login-card .brand{
  margin-bottom:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.login-card .brand img{
  display:block;
  max-width:124px;
  height:auto;
}

.login-card h1{
  margin:8px 0 18px;
  font-size:20px;
  color:var(--text);
}

.login-card label{
  display:block;
  text-align:left;
  margin:6px 0 6px;
  font-size:13px;
  color:var(--muted);
}

.input-wrap{
  position:relative;
}

/* Input hanya di dalam login-card */
.login-card .input{
  width:100%;
  padding:12px 14px;
  margin:6px 0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  outline:none;
  background:var(--bg);
  color:var(--text);
}
.login-card .input::placeholder{
  color:var(--placeholder);
}
.login-card .input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,132,255,.35);
}

/* ===== BUTTON LOGIN – scoped supaya tidak ditimpa module_base.css ===== */

.login-card .btn,
.login-card .btn-primary{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  margin-top:2px;
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.login-card .btn:hover,
.login-card .btn-primary:hover{
  background:#0c7df0;
  box-shadow:0 10px 24px rgba(10,132,255,.4);
}
.login-card .btn:active,
.login-card .btn-primary:active{
  transform:translateY(1px);
}

/* Alert di login */
.login-card .alert{
  margin:0 0 12px;
  padding:10px 12px;
  text-align:left;
  background:rgba(255,69,58,.08);
  border:1px solid var(--danger);
  border-radius:8px;
  color:var(--danger);
  font-size:14px;
}

.login-card .muted{
  color:var(--muted);
  font-size:12px;
  margin-top:12px;
}
.center{text-align:center}

/* Toggle password eye icon */
.toggle-pwd{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:6px;
}
.toggle-pwd:focus{
  outline:2px solid rgba(10,132,255,.5);
  outline-offset:2px;
}
.toggle-pwd svg{
  width:20px;
  height:20px;
  fill:var(--muted);
}
.toggle-pwd:hover svg{
  filter:brightness(.9);
}

.toggle-pwd .icon-eye-off{ display:none; }
.toggle-pwd.is-on .icon-eye{ display:none; }
.toggle-pwd.is-on .icon-eye-off{ display:block; }