/**
 * HealFast clinic theme — navy + clinical green (tab icon: logo.png).
 * Loaded from /bahmni_config/... (deploy injects <link> into Bahmni **web** index.html).
 *
 * **Bahmni sign-in** is the Angular page at `/bahmni/home` (Bahmni Home). Login markup matches
 * `openmrs-module-bahmniapps` **login.html** (`.form-field` / `.field-attribute` / `.field-value`).
 * Legacy table-based `.control-group` rules are kept for older builds.
 *
 * **OpenMRS legacy** `/openmrs/login.htm` is styled separately in `healfast-openmrs-login.css`
 * (Tomcat/JSP path — not this file).
 */
:root {
  --hf-navy: #1a3682;
  --hf-navy-dark: #152c6e;
  --hf-green: #2ead2e;
  --hf-green-dark: #258f25;
  --healfast-primary: var(--hf-navy);
  --healfast-primary-dark: var(--hf-navy-dark);
  --healfast-primary-light: #2a4da3;
  --healfast-primary-lighter: #e8eef9;
  --hf-card-border: #c5d4e8;
  --hf-card-border-hover: #8fb0dc;
  --hf-card-shadow: 0 2px 8px rgba(26, 54, 130, 0.1);
  --hf-card-shadow-hover: 0 6px 18px rgba(26, 54, 130, 0.14);
  --hf-card-radius: 8px;
  --hf-login-card-max: min(420px, calc(100vw - 1.25rem));
}

/* Login / form shell */
.reg-header,
.login .reg-header,
header.reg-header {
  background: linear-gradient(105deg, var(--hf-navy-dark) 0%, var(--hf-navy) 55%, var(--hf-green-dark) 100%) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--hf-green) !important;
}

.login .confirm,
button.confirm,
.form-footer .confirm {
  background: var(--hf-navy) !important;
  border-color: var(--hf-navy-dark) !important;
  color: #fff !important;
}

.login .confirm:hover,
button.confirm:hover {
  background: var(--hf-navy-dark) !important;
}

/* ----- Responsive login card (Bahmni /home) ----- */
/* Bahmni home.min.css: .login { position:absolute; top:0 } and .emr-login-text { top:-25px } overlap the logo */
.reg-wrapper,
.reg-wrapper > div,
#view-content {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#view-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: clamp(0.75rem, 3vw, 1.25rem) clamp(0.5rem, 3vw, 1rem) 5rem !important;
  gap: 1rem !important;
}

#view-content .clint-logo-wrapper,
#view-content .logo-container,
.clint-logo-wrapper {
  order: 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin: 0 auto !important;
  padding: 0.25rem 1rem !important;
}

.reg-wrapper .login,
#view-content > .login,
#view-content .login:not(.ng-hide),
div.login.ng-scope {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  order: 2 !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
}

/* Header line ("HEALFAST NIG LTD — clinical sign in") — keep in normal flow below logo */
.login .emr-login-text,
.emr-login-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.5rem !important;
  padding: 0 0.75rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: clamp(0.9rem, 3.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--hf-navy) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.login .emr-login-text b,
.emr-login-text b {
  font-weight: inherit !important;
}

.login,
.login-page,
.ng-scope.login {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 0 clamp(0.5rem, 2.5vw, 1rem) 4rem !important;
  overflow-x: hidden !important;
}

.login .login-container,
.login-container,
.login .body-content,
.login .reg-wrapper .container,
.reg-wrapper.login .container {
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: clamp(1rem, 4vw, 1.5rem) !important;
  padding-right: clamp(1rem, 4vw, 1.5rem) !important;
  padding-top: 1rem !important;
  padding-bottom: 1.35rem !important;
  background: #fff !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 12px 40px rgba(26, 54, 130, 0.12) !important;
}

/* Gradient strip sits flush on top of white card */
.login .reg-header,
.login header.reg-header {
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 0.85rem clamp(1rem, 4vw, 1.5rem) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

.login .reg-header .left {
  flex: 1 1 auto !important;
  text-align: left !important;
}

.login .reg-header .right {
  flex: 0 0 auto !important;
}

/* Bootstrap rows inside login — single column, no float overlap */
.login .login-container .row-fluid,
.login .body-content .row-fluid,
.login .reg-header .row-fluid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0.35rem !important;
}

.login .login-container .row-fluid > [class*="span"],
.login .body-content .row-fluid > [class*="span"],
.login .reg-header .row-fluid > [class*="span"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.login form,
.login .form-login,
.login-container form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ----- Bahmni Home login.html (upstream: form-field / field-value, not control-group tables) -----
   Source: openmrs-module-bahmniapps ui/app/home/views/login.html — username/password live in .form-field. */
.login > form[bm-form],
.login > form[name="loginForm"],
.login > form[name="otpForm"],
.login > form {
  display: block !important;
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 12px 40px rgba(26, 54, 130, 0.12) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.login .login-body {
  width: 100% !important;
  max-width: 100% !important;
  padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.25rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.login .form-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1rem 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
  position: relative !important;
  overflow: visible !important;
}

.login .form-field:last-of-type {
  margin-bottom: 0.35rem !important;
}

.login .field-attribute,
.login .field-value {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

.login .field-attribute label {
  display: block !important;
  width: 100% !important;
  font-weight: 600 !important;
  color: var(--hf-navy) !important;
  margin: 0 0 0.35rem 0 !important;
  padding: 0 !important;
  text-align: left !important;
  float: none !important;
}

.login .field-value input[type="text"],
.login .field-value input[type="password"],
.login .field-value input[type="tel"],
.login .field-value input[type="email"],
.login .field-value select {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  box-sizing: border-box !important;
  border: 1px solid #c5d4e8 !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  min-height: 44px !important;
  line-height: 1.35 !important;
  color: #1b2430 !important;
  background-color: #fff !important;
}

.login .form-field:has(#location),
.login .field-value:has(#location),
.login select#location {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.login .form-field:has(#location) {
  z-index: 3 !important;
  margin-bottom: 1rem !important;
  min-height: 72px !important;
}

.login select#location {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 0.65rem 2.25rem 0.65rem 0.75rem !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}

.login .field-value .hf-password-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

.login .note-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0.75rem !important;
  box-sizing: border-box !important;
}

.login .warning-message {
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin: 0.75rem auto 0 !important;
  padding: 0 clamp(0.5rem, 2vw, 1rem) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* OTP step: password field + resend on one row when space allows */
.login.login-otp .field-value {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.login.login-otp .field-value input[type="password"] {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.login.login-otp .otp-button {
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Password show/hide toggle */
.login .controls,
.login td.controls,
.hf-password-wrap {
  overflow: visible !important;
  position: relative;
}

.hf-password-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

.hf-password-wrap input[type="password"],
.hf-password-wrap input[type="text"] {
  padding-right: 2.75rem !important;
  box-sizing: border-box !important;
}

.hf-password-toggle {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  border: none;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--hf-navy, #1a3682);
  cursor: pointer;
  padding: 0.35rem;
  line-height: 0;
  border-radius: 6px;
  width: auto !important;
  min-width: 2.25rem !important;
  max-width: 2.75rem !important;
  min-height: 2.25rem !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(26, 54, 130, 0.12);
}

.hf-password-toggle:hover,
.hf-password-toggle:focus {
  background: rgba(232, 238, 249, 0.98) !important;
  outline: none;
}

.hf-password-toggle--visible {
  color: var(--hf-green, #2ead2e);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login select,
.login .form-control {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.login .hf-password-wrap input[type="password"],
.login .hf-password-wrap input[type="text"] {
  padding: 0.65rem 2.75rem 0.65rem 0.75rem !important;
}

.login .confirm,
.login button.confirm,
.login .form-footer .confirm,
/* Bahmni Home: some builds use generic submit instead of .confirm */
.login .login-container button[type="submit"],
.login .form-footer button[type="submit"],
.login .form-login button[type="submit"],
.login input[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  display: block !important;
  float: none !important;
  margin: 0.75rem 0 0 !important;
  clear: both !important;
  background: var(--hf-navy) !important;
  border: 1px solid var(--hf-navy-dark) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.login .confirm:hover,
.login button.confirm:hover,
.login .form-footer .confirm:hover,
.login .login-container button[type="submit"]:hover,
.login .form-footer button[type="submit"]:hover,
.login .form-login button[type="submit"]:hover,
.login input[type="submit"]:hover {
  background: var(--hf-navy-dark) !important;
}

/* Primary CTA colour when Bahmni uses Bootstrap .btn-primary on login */
.login .btn-primary,
.login button.btn-primary {
  background: var(--hf-navy) !important;
  border-color: var(--hf-navy-dark) !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
}

.login .btn-primary:hover,
.login button.btn-primary:hover {
  background: var(--hf-navy-dark) !important;
}

/* Footer row under fields — full width, no float bleed */
.login .form-footer,
.login .login-footer {
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.login .clint-logo-wrapper,
.login .logo-container {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* English only on login card — hide locale dropdown, keep location select */
.login select[ng-model="loginInformation.locale"],
.login select[ng-model*="loginInformation.locale"],
.login .locale-container,
.login .locale-selector,
.login .locale-wrapper,
.login .change-locale-wrapper {
  display: none !important;
}

.login label[for="locale"],
.login .locale-label,
.login .select-locale-label {
  display: none !important;
}

/* Form tables: stack label + control (all viewports) — avoids scattered columns */
.login table,
.login .login-body,
.login .login-form {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.login table tbody {
  display: block !important;
  width: 100% !important;
}

.login table tr,
.login .control-group {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.9rem !important;
  box-sizing: border-box !important;
}

.login table tr:last-child,
.login .control-group:last-child {
  margin-bottom: 0 !important;
}

.login table td,
.login .control-label,
.login .controls,
.login .login-container label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  float: none !important;
  padding: 0.15rem 0 !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

.login .control-label,
.login table td.control-label,
.login label.control-label {
  font-weight: 600 !important;
  color: var(--hf-navy) !important;
  padding-bottom: 0.15rem !important;
}

.login .controls {
  padding-top: 0 !important;
}

/* Login brand block: keep clinic identity outside the form card. */
#view-content > .clint-logo-wrapper,
#view-content > .logo-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: var(--hf-login-card-max) !important;
  margin: clamp(0.5rem, 2vh, 1.25rem) auto 0 !important;
  padding: 0 1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#view-content > .clint-logo-wrapper img.implementor-logo,
#view-content > .logo-container img {
  flex: 0 0 auto !important;
  max-height: clamp(58px, 12vh, 86px) !important;
  max-width: min(240px, 82vw) !important;
  margin: 0 auto !important;
}

#view-content > .clint-logo-wrapper .title_text,
#view-content > .logo-container .title_text {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--hf-navy) !important;
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Login card heading: one compact title plus one caption inside the gradient strip. */
.login .emr-login-text,
.emr-login-text {
  display: none !important;
}

.login .reg-header,
.login header.reg-header {
  min-height: 58px !important;
  height: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.15rem !important;
}

.login .reg-header .left,
.login header.reg-header .left {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  float: none !important;
  color: #fff !important;
  font-size: clamp(1.1rem, 3vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.login .reg-header::after,
.login header.reg-header::after {
  content: "Secure clinical sign in" !important;
  display: block !important;
  width: 100% !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.login .reg-header .right,
.login header.reg-header .right,
.login .reg-header .locale-wrapper,
.login header.reg-header .locale-wrapper {
  display: none !important;
}

@media (max-width: 640px) {
  .login .reg-header .row-fluid > [class*="span"],
  .login header.reg-header > div {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  #view-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .clint-logo-wrapper img.implementor-logo,
  #view-content .clint-logo-wrapper img {
    max-height: 64px !important;
    max-width: min(200px, 88vw) !important;
  }

  .login .emr-login-text,
  .emr-login-text {
    font-size: 0.88rem !important;
    padding: 0 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }

  .login,
  .login-page {
    padding: 0.75rem 0.5rem 4.5rem !important;
  }

  .login .login-container,
  .login-container,
  .login .reg-header,
  .login header.reg-header {
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  .login .confirm,
  .login button.confirm {
    font-size: 1rem !important;
    min-height: 44px !important;
  }

  .login .reg-header,
  .login header.reg-header {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }

  .login.login-otp .field-value {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .login.login-otp .field-value input[type="password"] {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .login.login-otp .otp-button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ----- Bahmni SPA forms: alignment + responsive (registration, clinical, orders, reports) -----
   Selectors use [ng-app*="…"] so they work with ng-app on html or body.
   Does not match Bahmni Home (bahmni.home). */
[ng-app*="registration"] .container-fluid,
[ng-app*="clinical"] .container-fluid,
[ng-app*="orders"] .container-fluid,
[ng-app*="reports"] .container-fluid,
[ng-app*="registration"] .container,
[ng-app*="clinical"] .container {
  box-sizing: border-box !important;
}

[ng-app*="registration"] .control-group,
[ng-app*="clinical"] .control-group,
[ng-app*="orders"] .control-group,
[ng-app*="reports"] .control-group {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

[ng-app*="registration"] .control-group .control-label,
[ng-app*="clinical"] .control-group .control-label,
[ng-app*="orders"] .control-group .control-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  text-align: left !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.2rem !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .control-group .controls,
[ng-app*="clinical"] .control-group .controls,
[ng-app*="orders"] .control-group .controls {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .control-group .controls input[type="text"],
[ng-app*="registration"] .control-group .controls input[type="password"],
[ng-app*="registration"] .control-group .controls input[type="number"],
[ng-app*="registration"] .control-group .controls input[type="email"],
[ng-app*="registration"] .control-group .controls input[type="tel"],
[ng-app*="registration"] .control-group .controls input[type="date"],
[ng-app*="registration"] .control-group .controls select,
[ng-app*="registration"] .control-group .controls textarea,
[ng-app*="clinical"] .control-group .controls input[type="text"],
[ng-app*="clinical"] .control-group .controls input[type="password"],
[ng-app*="clinical"] .control-group .controls input[type="number"],
[ng-app*="clinical"] .control-group .controls input[type="email"],
[ng-app*="clinical"] .control-group .controls input[type="tel"],
[ng-app*="clinical"] .control-group .controls input[type="date"],
[ng-app*="clinical"] .control-group .controls select,
[ng-app*="clinical"] .control-group .controls textarea,
[ng-app*="orders"] .control-group .controls input[type="text"],
[ng-app*="orders"] .control-group .controls select,
[ng-app*="reports"] .control-group .controls input[type="text"],
[ng-app*="reports"] .control-group .controls select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .form-control,
[ng-app*="clinical"] .form-control,
[ng-app*="orders"] .form-control {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Registration form: desktop-safe grid.
   Bahmni's stock Bootstrap floats can let the patient photo/card column overlap
   identifier/name/address fields on wider screens, so make the layout explicit. */
[ng-app*="registration"] #view-content,
[ng-app*="registration"] .body-content,
[ng-app*="registration"] .reg-wrapper,
[ng-app*="registration"] .container,
[ng-app*="registration"] .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

[ng-app*="registration"] .container,
[ng-app*="registration"] .container-fluid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 2.4vw, 2rem) !important;
  padding-right: clamp(1rem, 2.4vw, 2rem) !important;
}

[ng-app*="registration"] form,
[ng-app*="registration"] .registration-form,
[ng-app*="registration"] .patient-registration,
[ng-app*="registration"] .patient-details,
[ng-app*="registration"] .patient-info,
[ng-app*="registration"] .patient-profile {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .row-fluid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0.85rem 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .row-fluid::before,
[ng-app*="registration"] .row-fluid::after {
  display: none !important;
}

[ng-app*="registration"] .row-fluid > [class*="span"] {
  float: none !important;
  margin-left: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .row-fluid > .span1,
[ng-app*="registration"] .row-fluid > .span2,
[ng-app*="registration"] .row-fluid > .span3,
[ng-app*="registration"] .patient-image,
[ng-app*="registration"] .patient-photo,
[ng-app*="registration"] .patientImage,
[ng-app*="registration"] .image-card,
[ng-app*="registration"] .image-container,
[ng-app*="registration"] .photo-container {
  flex: 0 0 clamp(210px, 22vw, 280px) !important;
  width: clamp(210px, 22vw, 280px) !important;
  max-width: 100% !important;
}

[ng-app*="registration"] .row-fluid > .span4,
[ng-app*="registration"] .row-fluid > .span5,
[ng-app*="registration"] .row-fluid > .span6 {
  flex: 1 1 320px !important;
  width: auto !important;
}

[ng-app*="registration"] .row-fluid > .span7,
[ng-app*="registration"] .row-fluid > .span8,
[ng-app*="registration"] .row-fluid > .span9,
[ng-app*="registration"] .row-fluid > .span10,
[ng-app*="registration"] .row-fluid > .span11,
[ng-app*="registration"] .row-fluid > .span12 {
  flex: 1 1 560px !important;
  width: auto !important;
}

[ng-app*="registration"] .control-group,
[ng-app*="registration"] .form-field {
  min-width: 0 !important;
  overflow: visible !important;
}

[ng-app*="registration"] .control-group .controls,
[ng-app*="registration"] .field-value {
  min-width: 0 !important;
  overflow: visible !important;
}

[ng-app*="registration"] input,
[ng-app*="registration"] select,
[ng-app*="registration"] textarea,
[ng-app*="registration"] .uneditable-input {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] input[id*="identifier"],
[ng-app*="registration"] input[name*="identifier"],
[ng-app*="registration"] input[id*="Identifier"],
[ng-app*="registration"] input[name*="Identifier"] {
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
}

[ng-app*="registration"] img,
[ng-app*="registration"] canvas,
[ng-app*="registration"] video {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

[ng-app*="registration"] .submit-btn-container,
[ng-app*="registration"] .form-footer,
[ng-app*="registration"] .button-row,
[ng-app*="registration"] .action-buttons {
  clear: both !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.6rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  [ng-app*="registration"] .row-fluid {
    flex-direction: column !important;
  }

  [ng-app*="registration"] .row-fluid > [class*="span"],
  [ng-app*="registration"] .patient-image,
  [ng-app*="registration"] .patient-photo,
  [ng-app*="registration"] .patientImage,
  [ng-app*="registration"] .image-card,
  [ng-app*="registration"] .image-container,
  [ng-app*="registration"] .photo-container {
    flex: 0 1 auto !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  [ng-app*="registration"] .row-fluid,
  [ng-app*="clinical"] .row-fluid,
  [ng-app*="orders"] .row-fluid,
  [ng-app*="reports"] .row-fluid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
  }

  [ng-app*="registration"] .row-fluid::before,
  [ng-app*="registration"] .row-fluid::after,
  [ng-app*="clinical"] .row-fluid::before,
  [ng-app*="clinical"] .row-fluid::after,
  [ng-app*="orders"] .row-fluid::before,
  [ng-app*="orders"] .row-fluid::after {
    display: none !important;
  }

  [ng-app*="registration"] .row-fluid > [class*="span"],
  [ng-app*="clinical"] .row-fluid > [class*="span"],
  [ng-app*="orders"] .row-fluid > [class*="span"],
  [ng-app*="reports"] .row-fluid > [class*="span"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  [ng-app*="registration"] #view-content,
  [ng-app*="clinical"] #view-content,
  [ng-app*="orders"] #view-content,
  [ng-app*="reports"] #view-content {
    padding-left: clamp(0.35rem, 2vw, 0.75rem) !important;
    padding-right: clamp(0.35rem, 2vw, 0.75rem) !important;
    box-sizing: border-box !important;
  }

  [ng-app*="registration"] .submit-btn-container,
  [ng-app*="registration"] .form-footer,
  [ng-app*="clinical"] .submit-btn-container,
  [ng-app*="clinical"] .form-footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Patient search/results: responsive cards and tables */
[ng-app*="clinical"] .patient-search-wrapper,
[ng-app*="orders"] .patient-search-wrapper,
[ng-app*="registration"] .patient-search-wrapper {
  width: 100% !important;
  max-width: min(100%, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

[ng-app*="clinical"] .patient-search-wrapper .tab-content,
[ng-app*="orders"] .patient-search-wrapper .tab-content,
[ng-app*="registration"] .patient-search-wrapper .tab-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .patient-search-wrapper form,
[ng-app*="orders"] .patient-search-wrapper form,
[ng-app*="registration"] .patient-search-wrapper form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.6rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .patient-search-wrapper .search-patient-id,
[ng-app*="orders"] .patient-search-wrapper .search-patient-id,
[ng-app*="registration"] .patient-search-wrapper .search-patient-id {
  flex: 1 1 260px !important;
  min-width: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .patient-search-wrapper .reg-srch-btn,
[ng-app*="orders"] .patient-search-wrapper .reg-srch-btn,
[ng-app*="registration"] .patient-search-wrapper .reg-srch-btn {
  flex: 0 0 auto !important;
  float: none !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .patient-search-wrapper input#patientIdentifier,
[ng-app*="orders"] .patient-search-wrapper input#patientIdentifier,
[ng-app*="registration"] .patient-search-wrapper input#patientIdentifier {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .active-visits > ul,
[ng-app*="orders"] .active-visits > ul,
[ng-app*="registration"] .active-visits > ul,
.patient-search-wrapper .active-visits > ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: 0.9rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

[ng-app*="clinical"] .active-patient,
[ng-app*="orders"] .active-patient,
[ng-app*="registration"] .active-patient,
.patient-search-wrapper .active-patient {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "photo name status"
    "photo id status" !important;
  align-items: center !important;
  gap: 0.25rem 0.7rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0.85rem !important;
  border: 1px solid var(--hf-card-border) !important;
  border-radius: var(--hf-card-radius) !important;
  background: #fff !important;
  box-shadow: var(--hf-card-shadow) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

[ng-app*="clinical"] .active-patient:hover,
[ng-app*="orders"] .active-patient:hover,
[ng-app*="registration"] .active-patient:hover,
.patient-search-wrapper .active-patient:hover {
  border-color: var(--hf-card-border-hover) !important;
  background: #f8fbff !important;
  box-shadow: var(--hf-card-shadow-hover) !important;
}

.patient-search-wrapper .active-patient .smallImages,
.patient-search-wrapper .active-patient img.smallImages {
  grid-area: photo !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.patient-search-wrapper .active-patient .patient-name {
  grid-area: name !important;
  min-width: 0 !important;
  color: var(--hf-navy) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.patient-search-wrapper .active-patient .patient-id {
  grid-area: id !important;
  min-width: 0 !important;
  color: #526177 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.patient-search-wrapper .active-patient .ipd-indication {
  grid-area: status !important;
  align-self: start !important;
  justify-self: end !important;
}

[ng-app*="clinical"] .ward-details-container,
[ng-app*="orders"] .ward-details-container,
[ng-app*="registration"] .ward-details-container,
.patient-search-wrapper .ward-details-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.patient-search-wrapper .patient-list-table {
  width: 100% !important;
  min-width: 680px !important;
  table-layout: auto !important;
}

.patient-search-wrapper .patient-list-table th,
.patient-search-wrapper .patient-list-table td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  vertical-align: top !important;
}

@media (max-width: 640px) {
  [ng-app*="clinical"] .patient-search-wrapper form,
  [ng-app*="orders"] .patient-search-wrapper form,
  [ng-app*="registration"] .patient-search-wrapper form {
    flex-direction: column !important;
  }

  [ng-app*="clinical"] .patient-search-wrapper .reg-srch-btn,
  [ng-app*="orders"] .patient-search-wrapper .reg-srch-btn,
  [ng-app*="registration"] .patient-search-wrapper .reg-srch-btn,
  [ng-app*="clinical"] .patient-search-wrapper .reg-srch-btn button,
  [ng-app*="orders"] .patient-search-wrapper .reg-srch-btn button,
  [ng-app*="registration"] .patient-search-wrapper .reg-srch-btn button {
    width: 100% !important;
  }

  [ng-app*="clinical"] .active-visits > ul,
  [ng-app*="orders"] .active-visits > ul,
  [ng-app*="registration"] .active-visits > ul,
  .patient-search-wrapper .active-visits > ul {
    grid-template-columns: 1fr !important;
  }

  .patient-search-wrapper .active-patient {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    min-height: 74px !important;
    padding: 0.7rem !important;
  }

  .patient-search-wrapper .active-patient .smallImages,
  .patient-search-wrapper .active-patient img.smallImages {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
}

/* Dashboard tiles */
.section,
.dashboard-section,
.tile,
[class*="dashboard"] .section,
.bahmni-home .section {
  background: #fff !important;
  border: 1px solid var(--hf-card-border) !important;
  border-radius: var(--hf-card-radius) !important;
  box-shadow: var(--hf-card-shadow) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.section:hover,
.dashboard-section:hover,
.tile:hover,
.bahmni-home .section:hover {
  border-color: var(--hf-card-border-hover) !important;
  box-shadow: var(--hf-card-shadow-hover) !important;
  background: #f8fbff !important;
}

.launch span,
.section .launch span,
.dashboard-section span,
.tile-title {
  color: var(--hf-navy) !important;
  font-weight: 600 !important;
}

.section a:hover span,
.dashboard-section a:hover span {
  color: var(--hf-green-dark) !important;
}

.container > h4,
.header_text {
  color: var(--hf-navy) !important;
  font-weight: 600 !important;
}

/* Patient profile and queue cards: keep borders/radius aligned across doctor and nurse workflows. */
[ng-app*="clinical"] .patient-dashboard .dashboard-section,
[ng-app*="clinical"] .dashboard-more-info,
[ng-app*="clinical"] .dashboard-section,
[ng-app*="clinical"] .patient-details,
[ng-app*="clinical"] .patient-summary,
[ng-app*="clinical"] .visit-details,
[ng-app*="clinical"] .observations,
[ng-app*="clinical"] .consultation,
[ng-app*="clinical"] .diagnosis,
[ng-app*="clinical"] .orders,
[ng-app*="clinical"] .medications,
[ng-app*="clinical"] .treatments,
[ng-app*="clinical"] .queue-list,
[ng-app*="clinical"] .queue-item,
[ng-app*="clinical"] .active-patient,
[ng-app*="clinical"] .patient-list-table,
[ng-app*="orders"] .queue-list,
[ng-app*="orders"] .queue-item,
[ng-app*="orders"] .active-patient {
  border-color: var(--hf-card-border) !important;
  border-radius: var(--hf-card-radius) !important;
}

[ng-app*="clinical"] .patient-list-table th,
[ng-app*="orders"] .patient-list-table th,
.patient-search-wrapper .patient-list-table th {
  background: #f4f7fb !important;
  color: var(--hf-navy) !important;
  border-color: var(--hf-card-border) !important;
}

[ng-app*="clinical"] .patient-list-table td,
[ng-app*="orders"] .patient-list-table td,
.patient-search-wrapper .patient-list-table td {
  color: #24364f !important;
  border-color: var(--hf-card-border) !important;
}

/* Button contrast: primary actions stay white-on-navy; pale/default buttons keep readable navy text. */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
a.btn {
  border-radius: var(--hf-card-radius) !important;
}

button:not(.confirm):not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger),
.btn:not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger),
.button:not(.primary):not(.danger):not(.delete),
a.btn:not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger) {
  color: var(--hf-navy) !important;
}

button:not(.confirm):not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger):hover,
.btn:not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger):hover,
.button:not(.primary):not(.danger):not(.delete):hover,
a.btn:not(.btn-primary):not(.primary):not(.danger):not(.delete):not(.btn-danger):hover {
  color: var(--hf-navy-dark) !important;
  border-color: var(--hf-card-border-hover) !important;
}

.btn-primary,
.primary,
button.primary,
button.confirm,
input[type="submit"].confirm {
  background: var(--hf-navy) !important;
  border-color: var(--hf-navy-dark) !important;
  color: #fff !important;
}

.btn-primary:hover,
.primary:hover,
button.primary:hover,
button.confirm:hover,
input[type="submit"].confirm:hover {
  background: var(--hf-navy-dark) !important;
  color: #fff !important;
}

/* Header strip (login): keep org title + controls readable on gradient */
.reg-header .header_text,
header.reg-header .header_text,
.login .reg-header .header_text,
.reg-header h1,
.reg-header h2,
.reg-header label,
.reg-header .location {
  color: #fff !important;
}

.reg-header select,
.reg-header option {
  color: #1a1a1a !important;
  background: #fff !important;
}

/* Links */
a {
  color: var(--hf-navy) !important;
}

a:hover {
  color: var(--hf-green-dark) !important;
}

/* Dark application/nav bars need light links; keep normal body links navy. */
.reg-header a,
header.reg-header a,
.navbar a,
.navbar .nav > li > a,
.navbar-inner a,
.topnav a,
.top-nav a,
.app-header a,
.bahmni-header a,
.header a,
.navigation a,
.navigation-bar a,
.main-nav a,
.left-nav a,
.clinical-header a,
.registration-header a,
.reg-header .nav a,
.reg-header .navbar a,
.reg-header .fa,
header.reg-header .fa {
  color: #fff !important;
  text-shadow: none !important;
}

.reg-header a:hover,
header.reg-header a:hover,
.navbar a:hover,
.navbar .nav > li > a:hover,
.navbar-inner a:hover,
.topnav a:hover,
.top-nav a:hover,
.app-header a:hover,
.bahmni-header a:hover,
.header a:hover,
.navigation a:hover,
.navigation-bar a:hover,
.main-nav a:hover,
.left-nav a:hover,
.clinical-header a:hover,
.registration-header a:hover {
  color: #e8f5e9 !important;
}

/* Footer */
.power-by,
.page-footer,
.bahmni-home .power-by {
  background: var(--hf-navy) !important;
  border-top: 3px solid var(--hf-green) !important;
  color: #fff !important;
}

.power-by a,
.page-footer a {
  color: #fff !important;
}

/* Footer: drop default Bahmni mark; relabel help link */
.power-by img,
.page-footer .power-by img {
  display: none !important;
}

/* Hide stray OpenMRS marks only inside powered-by footer (not the main /openmrs navbar). */
.power-by .openmrs-logo,
.page-footer .power-by .openmrs-logo {
  display: none !important;
}

.power-by a,
.power-by .helper_url,
.page-footer .power-by a {
  font-size: 0 !important;
  line-height: 1.4 !important;
}

.power-by a::after,
.power-by .helper_url::after,
.page-footer .power-by a::after {
  content: "HealFast Help" !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  color: #fff !important;
  padding-left: 26px !important;
  background: url(/bahmni_config/openmrs/apps/home/logo.png) left center / 20px 20px no-repeat !important;
  display: inline-block !important;
}

/* Hide any visible "Bahmni" footer label text nodes */
.power-by span,
.power-by label {
  font-size: 0 !important;
}

/* Login page title (HFMRS subtitle) */
.clint-logo-wrapper .title_text,
span.title_text,
.login .title_text {
  display: block !important;
  visibility: visible !important;
  color: var(--hf-navy) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0.35rem auto 0.75rem !important;
  text-align: center !important;
}

/* Legacy Get Started control (no longer injected — hide if present from cache) */
#healfast-get-started-wrap,
.healfast-get-started-wrap {
  display: none !important;
}

/* Login landing service tiles (whiteLabel landingPage) */
.login .section,
.reg-wrapper .container > .section {
  display: block !important;
  visibility: visible !important;
  min-height: auto !important;
  margin: 0.5rem auto !important;
  max-width: 280px !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  cursor: pointer !important;
}

.login .section a,
.reg-wrapper .section a {
  display: block !important;
  text-decoration: none !important;
}

.login .section span,
.reg-wrapper .section span {
  color: var(--hf-navy) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.login .section:hover,
.reg-wrapper .section:hover {
  border-color: var(--hf-green) !important;
  background: rgba(232, 238, 249, 0.5) !important;
}

/* Hide legacy PWA-only launcher block if present */
.login .launch:empty,
.reg-wrapper .launch:empty {
  display: none !important;
}

.body-content,
.reg-wrapper .container {
  padding-bottom: 64px !important;
}

/* Hide stock Bahmni logo assets (edge also redirects bahmniLogoFull.png → HealFast logo) */
img[src*="bahmniLogoFull"],
img[src*="bahmniLogo"],
img[src*="/bahmni/images/bahmni"] {
  content: url(/bahmni_config/openmrs/apps/home/logo.png) !important;
  object-fit: contain !important;
  max-height: 88px !important;
  max-width: min(260px, 92vw) !important;
}

/* Circular / compact logo mark */
.clint-logo-wrapper img.implementor-logo,
img.implementor-logo,
img.client_logo,
.login-container img[src*="logo"],
.logo-container img,
#view-content .clint-logo-wrapper img {
  display: block !important;
  margin: 0 auto !important;
  max-height: 88px !important;
  max-width: min(260px, 92vw) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Common Bahmni accent overrides (orange family) */
[style*="F26522"],
[style*="f26522"] {
  border-color: var(--hf-navy) !important;
}

/* ----- English only: hide OpenMRS / Bahmni locale switchers ----- */
#footer,
#footerInner,
#localeOptions,
.locale-options,
.language-links,
.bahmni-locale,
.change-locale,
ul.locales,
div.locales {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

a[href*="locale="],
a[href*="/openmrs/login.htm?locale"],
a[href*="changeLocale"],
a[href*="change_locale"] {
  display: none !important;
}

/* Legacy login footer language pipe list (outside #footer on some builds) */
body.loginPage #content ~ * a[href*="locale"],
#pageBody a[href$="locale=es"],
#pageBody a[href$="locale=fr"],
#pageBody a[href*="locale=it"],
#pageBody a[href*="locale=pt"],
#pageBody a[href*="locale=zh"],
#pageBody a[href*="locale=hi"] {
  display: none !important;
}

/* Hide Administration home tile for non–HR-admin staff (see healfast-home-hide-admin.js) */
html.healfast-hide-admin-tile a[href*="admin/#/dashboard"],
html.healfast-hide-admin-tile .icon-bahmni-admin {
  display: none !important;
}

/* ----- OpenMRS Legacy UI: hide stock banner logos (login.htm, admin) ----- */
#banner,
#bannerbar,
#banner a,
table#bannerbar,
#logocell,
#logosmall,
#logosmall img,
#barsmall,
#barcell,
div#banner img,
img.logo-reduced61,
img.logo-reduced,
img#bar-round-reduced50,
img.bar-round-reduced50,
img[src*="openmrs_logo"],
td#logocell img,
td#barcell img {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
}

#banner {
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Legacy login: HealFast logo above form */
body.loginPage #pageBody::before,
#pageBody::before {
  content: "";
  display: block;
  width: min(240px, 78vw);
  height: clamp(52px, 14vw, 72px);
  margin: 0 auto 0.75rem;
  background: url(/bahmni_config/openmrs/apps/home/logo.png) center / contain no-repeat;
}

/* ----- OpenMRS Legacy UI: hide navbar / header brand row (identity = favicon + meta only) ----- */
.openmrs-header,
#openmrs .openmrs-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  visibility: hidden !important;
}

.openmrs-header table,
.openmrs-header img,
.openmrs-header a img,
#openmrs .openmrs-header table,
#openmrs .openmrs-header img {
  display: none !important;
}

/* ----- OpenMRS Legacy UI: home/index large center logo ----- */
#content center,
#content > center {
  display: block !important;
  text-align: center !important;
  margin: 0 auto 1rem !important;
  padding: 0 !important;
  overflow: visible !important;
}

#content center img,
#content > center > img,
img[src*="openmrs_logo_white_large"] {
  display: block !important;
  position: static !important;
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  max-height: 72px !important;
  margin: 0.75rem auto !important;
  object-fit: contain !important;
}

/* ----- Bahmni clinical / visit chrome: navy–green bar, white nav labels ----- */
.opd-header-wrapper,
.dashboard-header.opd-header-wrapper,
div[id="consultation-header"].dashboard-header {
  background: linear-gradient(105deg, var(--hf-navy-dark) 0%, var(--hf-navy) 55%, var(--hf-green-dark) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.opd-header-wrapper a,
.opd-header-wrapper .back-btn,
.opd-header-wrapper .dashboard-link,
.opd-header-wrapper button,
.opd-header-wrapper .btn,
.dashboard-header.opd-header-wrapper a,
div[id="consultation-header"] a {
  color: #fff !important;
}

.opd-header-wrapper a:hover,
.opd-header-wrapper .back-btn:hover,
.dashboard-header.opd-header-wrapper a:hover {
  color: #e8f5e9 !important;
}

.opd-header-bottom,
.opd-header-bottom.tabs,
.visits-navbar-section,
.visits-nav-bar {
  background: transparent !important;
  color: #fff !important;
}

.opd-header-bottom .tab-item a,
.tabs .tab-item a,
.visits-nav-bar .prev-visit,
.visits-nav-bar .next-visit {
  color: #fff !important;
}

.opd-header-bottom .tab-item.tab-selected a,
.tabs .tab-item.tab-selected a {
  color: #fff !important;
  border-bottom-color: #fff !important;
}

.opd-header-wrapper .fa,
.opd-header-wrapper [class*="fa-"],
.dashboard-header .fa {
  color: inherit !important;
}