@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg-1: #0f172a; /* deep navy */
  --bg-2: #0ea5e9; /* sky blue */
  --card-bg: rgba(255,255,255,0.98);
  --muted: #6b7280;
  --primary: #0ea5e9;
}

html,body{height:100%;font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
body.login-page{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background: linear-gradient(135deg, rgba(14,165,233,0.12) 0%, rgba(207,233,255,0.9) 100%);
  -webkit-font-smoothing:antialiased;
}

/* top logo area */
.login-top-logo{ position:absolute; top:40px; left:50%; transform:translateX(-50%); z-index:3; }
.login-top-logo img{ max-width:220px; height:auto; display:block; }

/* Language selector at top-right */
.language-top-right{ position:absolute; top:18px; right:18px; z-index:4; }
.language-top-right .language_id{ min-width:140px; border-radius:6px; }

/* Login card */
.login-card{
  width:420px; max-width:92%; border-radius:12px; background:var(--card-bg); box-shadow:0 8px 30px rgba(2,6,23,0.15); overflow:hidden; z-index:2;
  margin: 30px 0px;
}
.login-card .login-card-body{ padding:28px 30px; }
.login-card .login-card-body .login-box-msg{ color:var(--muted); margin:0 0 12px; text-align:center; }

.form-control{ border-radius:6px; box-shadow:none; }
.btn-primary{ background:var(--primary); border:none; border-radius:6px; padding:10px 16px; font-weight:600; }

/* small footer */
.login-card .version{ text-align:center; color:var(--muted); font-size:13px; margin-top:12px; }

@media (max-width:560px){
  .login-top-logo{ top:18px; }
  .login-card{ margin-top:70px; }
  .language-top-right{ right:12px; top:10px; }
}

/* Compatibility with original theme classes */
.login-logo, .register-logo {
  font-size: 35px;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 300;
}

/* Logo image spacing (top / bottom) used by the login view */
.login-logo img, .login-top-logo img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 18px auto 16px; /* margin-top:18px; margin-right/left:auto; margin-bottom:16px */
}

@media (max-width:560px){
  .login-logo img, .login-top-logo img {
    max-width: 100px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
}