/* Nkhoma Portal — Global Login Styles */

:root {
  --nk-primary: #2f80ed;
  --nk-primary-2: #56ccf2;
  --nk-accent: #50C878;
  --nk-shadow: rgba(30, 60, 120, 0.17);
}

* { box-sizing: border-box; }

body.nk-login-body {
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
  background:
    linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%),
    url('../img/login_bg.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  color: #2f3542;
}

.nk-login-overlay {
  background: rgba(255, 255, 255, 0.84);
}

.nk-login-logo {
  max-width: 120px;
  height: auto;
  background: #fff;
  border-radius: 50%;
  padding: 16px;
  box-shadow: 0 6px 24px var(--nk-shadow);
}

.nk-login-card {
  max-width: 420px;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: none;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 40, 120, 0.14) !important;
}

.nk-login-header {
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--nk-primary) 0%, var(--nk-primary-2) 100%) !important;
}

/* Buttons */
.nk-btn-gradient {
  background: linear-gradient(90deg, var(--nk-primary) 0%, var(--nk-accent) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}

.nk-btn-gradient:hover,
.nk-btn-gradient:focus {
  background: linear-gradient(90deg, var(--nk-accent) 0%, var(--nk-primary) 100%);
  color: #fff;
}

/* Inputs */
.form-control:focus {
  border-color: #4A90E2;
  box-shadow: 0 0 0 0.18rem rgba(80, 200, 120, 0.11);
}

.input-group .btn {
  border: 1px solid #e2e2e2;
  background: #f5f6fa;
}

.input-group .btn:hover {
  background: #e7fbe8;
  border-color: var(--nk-accent);
}

.rounded-pill { border-radius: 50rem !important; }

/* Footer copy */
.nk-login-footer-copy {
  text-shadow: 0 1px 4px #fff;
}

/* Small screens */
@media (max-width: 480px) {
  .nk-login-card {
    margin: 0 12px;
  }
}