:root {
  --navy: #1F3864;
  --navy2: #2E5395;
  --gray-l: #F4F6F9;
  --gray-m: #D9D9D9;
  --green: #70AD47;
  --amber: #FFC000;
  --red: #C00000;
}

body {
  background: var(--gray-l);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #2b2f36;
}

.mpms-navbar {
  background-color: var(--navy);
}

.card-kpi {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(31, 56, 100, 0.08);
}

.card-kpi .kpi-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7785;
  font-weight: 600;
}

.card-kpi .kpi-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
}

.badge-status-ok { background-color: var(--green) !important; }
.badge-status-warn { background-color: var(--amber) !important; color: #333 !important; }
.badge-status-danger { background-color: var(--red) !important; }

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(31, 56, 100, 0.06);
}

.card-header {
  background-color: #fff;
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
}

table.table thead {
  background-color: var(--navy);
  color: #fff;
}

table.table thead th {
  border-bottom: none;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
}

.btn-primary {
  background-color: var(--navy);
  border-color: var(--navy);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--navy2);
  border-color: var(--navy2);
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 1rem;
}

.login-card {
  max-width: 400px;
  width: 100%;
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.login-card .card-body {
  padding: 2.25rem;
}

.brand-title {
  color: var(--navy);
  font-weight: 700;
}