/* EthioERP Login - Powered by KINETIX (Light) */

:root {
  --kinetix-teal: #00C1D4;
  --kinetix-teal-dark: #008A9A;
  --bg: #F6FBFC;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
}

body[data-path="login"], body.login, .for-login {
  background: linear-gradient(90deg, rgba(27,42,124,.86) 0%, rgba(39,55,167,.66) 46%, rgba(15,23,42,.28) 68%, rgba(15,23,42,.16) 100%),
              url("/assets/kinetix_branding/images/mozvold_mall.png") center center / cover no-repeat fixed !important;
  color: var(--text) !important;
}

/* Card */
.for-login .page-card, .login-content .page-card, .page-card {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(2, 132, 199, 0.08) !important;
  background: var(--card) !important;
}

/* Logo area (we will inject an image via JS) */
.login-content .page-card-head, .page-card-head {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}
.page-card-head img {
  height: 54px !important;
  width: auto !important;
  margin: 0 auto 10px !important;
}

/* Title */
.page-card-head h4, .page-card-head .app-title {
  font-weight: 800 !important;
  letter-spacing: .2px;
  margin-top: 6px !important;
  color: var(--text) !important;
}
.page-card-head .sub-title {
  color: var(--muted) !important;
  font-size: 13px !important;
  margin-top: 2px !important;
}

/* Inputs */
.form-control {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.form-control:focus {
  border-color: rgba(0,193,212,.7) !important;
  box-shadow: 0 0 0 4px rgba(0,193,212,.15) !important;
}

/* Buttons */
.btn-primary, .btn-login, .btn.btn-primary {
  background: var(--kinetix-teal) !important;
  border-color: var(--kinetix-teal) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .btn-login:hover {
  background: var(--kinetix-teal-dark) !important;
  border-color: var(--kinetix-teal-dark) !important;
}

/* Links */
a, .text-muted a {
  color: var(--kinetix-teal-dark) !important;
}