/* ERCA Statistical System - login page, faithful to maquette M-01
   Field #007F4B | bar shadow | notice #1FA22E | footer #00693F | Roboto */

body { background-color: #007F4B !important; }

/* ---------- top application bar ---------- */
.app > .heading {
  background: rgba(0,0,0,.07);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  padding: 10px 28px !important;
  height: auto !important;
  align-items: center;
}
.title-container { padding: 0 !important; align-items: center; }
.flag-wrapper { display: flex; align-items: center; }
.flag-wrapper img {
  width: 58px !important; height: 58px !important;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.titles { justify-content: center; gap: 2px; }
.application-title-wrapper span {
  color: #fff !important; font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: .2px;
}
.application-introduction-wrapper span,
.application-description-wrapper span {
  color: rgba(255,255,255,.88) !important; font-size: 14.5px !important; font-weight: 400;
}

/* ---------- central medallion (mockup: white ring emblem above card) ---------- */
.logo-wrapper { display: none !important; }   /* remove default top-right logo */
.login-container::before {
  content: "";
  display: block;
  width: 185px; height: 185px;
  margin: 26px auto 24px;
  background: #fff url("/api/staticContent/logo_front.png") center / 74% no-repeat;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* ---------- login card ---------- */
.login-container > div[class*="formContainer"] {
  border-radius: 8px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.30) !important;
  padding: 22px 26px !important;
}
.login-container h3 { color: #212529 !important; font-weight: 700 !important; }
.login-container input[type="text"],
.login-container input[type="password"] {
  background-color: #F4F6F9 !important;
}
.login-container form button[type="submit"],
.login-container button.primary {
  background-color: #007F4B !important;
  border-color: #007F4B !important;
  color: #fff !important;
  font-weight: 600;
}
.login-container form button[type="submit"]:hover,
.login-container button.primary:hover {
  background-color: #00693F !important;
  border-color: #00693F !important;
}
.login-container a { color: #007F4B !important; font-weight: 600; }

/* ---------- access notice: bright green banner (mockup #1FA22E) ---------- */
.login-container > div[class*="appNotification"] {
  background-color: #1FA22E !important;
  border: none !important;
  border-radius: 6px !important;
  margin-top: 22px !important;
  padding: 14px 18px !important;
  text-align: center;
}
.login-container > div[class*="appNotification"] * {
  color: #fff !important;
  line-height: 1.5;
}

/* ---------- institutional footer strip ---------- */
.app > .footer {
  background-color: #00693F !important;
  border-top: none !important;
  padding: 8px 16px !important;
}
.app > .footer, .app > .footer span, .app > .footer a { color: #fff !important; }
.app > .footer .footer-left span { font-size: 13px; }
.app > .footer .footer-right span { font-size: 13px; }

/* hide the Powered by DHIS2 attribution */
.app > .footer .powered-by-wrapper { display: none !important; }

/* compress the top bar to mockup height (stock CSS pins wrappers to 120px) */
.app > .heading .flag-wrapper,
.app > .heading .titles,
.app > .heading .title-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.app > .heading { min-height: 0 !important; }
.app > .heading { flex: 0 0 auto !important; }

/* the notice renders an inner NoticeBox with its own white background and icon;
   flatten it so the banner is plain green with centered white text (M-01) */
.login-container > div[class*="appNotification"] div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
}
.login-container > div[class*="appNotification"] svg { display: none !important; }