/* =========================================================
 GOOGLE FONT LOADING (Design Studio compatible)
 - Must be first
========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
/* =========================================================
 DESIGN TOKENS (single source of truth)
========================================================= */
:root {
  /* Typography */
  --apa-font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Field styling */
  --apa-field-border: #cbd5e1;
  --apa-field-border-focus: #cbd5e1;
  --apa-field-radius: 8px;
  --apa-field-bg: #ffffff;

  /* Layout helpers */
  --apa-gutter: 10px;

  /* Brand */
  --apa-brand-blue: #65818B;
  --apa-soft-bg: #DBE6EB;
  --apa-error-red: #b00020;

  /* ===== Buttons (added/cleaned) ===== */
  /* Previous & Save Draft (passive greys) */
  --ppg-secondary-bg: #ffffff;
  --ppg-secondary-text: #000000;
  --ppg-secondary-border: #CBD5E1;
  --ppg-secondary-hover-bg: #EFEFEF;
  --ppg-secondary-hover-border: #CBD5E1;

  /* Next */
  --ppg-next-bg: var(--apa-brand-blue);
  --ppg-next-text: #ffffff;

  /* slightly darker than brand for hover/click/processing */
  --ppg-next-hover-bg: #566f78;
  --ppg-next-hover-border: #566f78;
}

/* Hide Submit button (Need to add class in Mgmt Portal) */
.apa-hide-submit {
  display: none !important;
}

/* Attestation component — spacing under the checkbox */
#apa_signatoryattestation__btnContainer {
  margin-top: 0.6rem; /* adjust to taste */
  margin-bottom: 1.0rem;
}

/* =========================================================
 GLOBAL BUTTON DISABLED (Bootstrap-compatible)
 - Neutralized opacity dimming
 - Uses APA palette tokens
 ========================================================= */
/* Generic .btn disabled (covers <button disabled>, .btn.disabled, .btn:disabled) */
.btn[disabled],
.btn.disabled,
.btn:disabled {
  opacity: 1 !important; /* we prefer solid color over dimming */
  cursor: default !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Primary-style disabled palette (adjust as desired) */
.btn.btn-primary[disabled],
.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
  background-color: var(--ppg-next-hover-bg) !important;
  border-color: var(--ppg-next-hover-border) !important;
  color: var(--ppg-next-text) !important;
}

/* Secondary-style disabled palette (matches Previous/Save Draft) */
.btn.btn-secondary[disabled],
.btn.btn-secondary.disabled,
.btn.btn-secondary:disabled {
  background-color: var(--ppg-secondary-bg) !important;
  border-color: var(--ppg-secondary-border) !important;
  color: var(--ppg-secondary-text) !important;
}

/* Attestation — lock box model across states */
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn,
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:hover,
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:focus,
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:active,
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn[disabled],
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:disabled {
  box-sizing: border-box;
  padding: 8px 16px;
  line-height: 1.25;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  font-weight: 500;
  min-height: 38px;
  box-shadow: none;
}

/* Enabled state */
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn {
  background-color: var(--ppg-next-bg);
  border-color: var(--ppg-next-bg);
  color: var(--ppg-next-text);
}

/* Hover/Focus */
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:hover,
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:focus {
  background-color: var(--ppg-next-hover-bg);
  border-color: var(--ppg-next-hover-border);
  color: var(--ppg-next-text);
  outline: 0;
}

/* Disabled state — only change colors, not size */
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn[disabled],
#apa_signatoryattestation__customWrapper #apa_signatoryattestation__sendBtn:disabled {
  background-color: #000000;
  border-color: #cbd5e1;
  color: #ffffff;
  opacity: 1;
  cursor: not-allowed;
}

/* =========================================================
 TYPOGRAPHY — global + forms
========================================================= */
:root {
  --bs-font-sans-serif: var(--apa-font-sans);
  --bs-body-font-family: var(--apa-font-sans);
}

html,
body,
.powerapps-portal {
  font-family: var(--apa-font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--apa-font-sans);
  font-weight: 600;
}

/* Labels — Poppins reads best at 500 */
label,
.control-label,
.form-label,
legend {
  font-family: var(--apa-font-sans);
  font-weight: 500;
}

/* Inputs / buttons */
input,
select,
textarea,
button,
.form-control,
.btn {
  font-family: var(--apa-font-sans);
  font-weight: 400;
}

/* Select2 / lookups */
.select2-container .select2-selection,
.select2-container .select2-results__option,
.select2-container .select2-search__field {
  font-family: var(--apa-font-sans);
}

/* =========================================================
 GLOBAL LAYOUT & RESETS
========================================================= */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.wrapper-body {
  flex: 1 0 auto;
}

/* =========================================================
 HEADER — decoration removal + logo sizing
========================================================= */
/* Kill decorative rules / streaks */
.navbar-brand a,
.static-top.navbar-dark .navbar-brand a {
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

.navbar-brand a::before,
.navbar-brand a::after,
.navbar-header::before,
.navbar-header::after,
h1.siteTitle::before,
h1.siteTitle::after,
h1.custom-sitetitle::before,
h1.custom-sitetitle::after {
  content: none !important;
  display: none !important;
}

/* Containers */
.navbar,
.navbar-header,
.navbar-brand,
.static-top.navbar-dark {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* ============================
   LOGO + VERTICAL CENTER FIX
   (Bootstrap 3 safe; no flex on navbar)
   - Works for both: <img class="site-logo"> and navbar brand images
   - Prevents the "floating too high/low" issue
============================ */
.navbar,
.navbar-header {
  /* keep your intended header sizing without forcing layout model changes */
  min-height: 72px;
}

/* In Bootstrap 3, vertical centering is best done via line-height + inline-block */
.navbar-brand {
  height: 72px;                 /* match .navbar min-height */
  line-height: 72px;            /* vertical centering baseline */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block;               /* keep Bootstrap 3 expectations */
}

/* The anchor should inherit the line-height and not add its own offsets */
.navbar-brand > a,
.navbar-brand a {
  display: inline-block;
  line-height: inherit;
  height: 72px;
}

/* Target the ACTUAL markup: the logo is <img class="site-logo"> */
img.site-logo,
.navbar-brand img,
.container.custom-container img.site-logo {
  height: 56px;
  max-height: 72px;
  width: auto;
  vertical-align: middle;
  display: inline-block;        /* important for baseline/line-height centering */
}

/* Optional: if site title exists, keep it aligned with the logo */
.navbar-brand h1,
.navbar-brand .siteTitle,
.navbar-brand .custom-sitetitle,
.navbar-brand .sitetitle {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
  margin: 0;
}

/* Mobile sizing */
@media (max-width: 576px) {
  .navbar,
  .navbar-header {
    min-height: 56px;
  }

  .navbar-brand {
    height: 56px;
    line-height: 56px;
  }

  .navbar-brand > a,
  .navbar-brand a {
    height: 56px;
  }

  img.site-logo,
  .navbar-brand img,
  .container.custom-container img.site-logo {
    height: 44px;
  }
}

/* =========================================================
 NAV BAR VISIBILITY CONTROL
========================================================= */
.navbar.navbar-dark .navbar-toggler,
#navbar,
#navbar * {
  display: none !important;
  visibility: hidden !important;
}

/* =========================================================
 STICKY FOOTER
========================================================= */
footer,
.footer {
  margin-top: auto;
  background: var(--apa-brand-blue);
  color: #fff;
  padding: 16px;
}

.footer-wrapper {
  background: transparent !important;
  border: none;
}

/* =========================================================
 FORMS — base container cleanup
========================================================= */
#WebFormPanel.crmEntityFormView,
.crmEntityFormView,
.entity-form,
.panel,
.panel-default,
.panel-body,
.crmEntityFormView .section,
.crmEntityFormView fieldset {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.crmEntityFormView hr {
  display: none !important;
}

/* =========================================================
 FIELDS — borders, focus, validation
========================================================= */
input.form-control,
select.form-control,
textarea.form-control {
  border: 1px solid var(--apa-field-border) !important;
  border-radius: var(--apa-field-radius);
  background-color: var(--apa-field-bg);
  box-shadow: none !important;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--apa-field-border-focus) !important;
  box-shadow: none !important;
}

input.invalid,
textarea.invalid,
select.invalid,
.has-error .form-control {
  border-color: var(--apa-error-red) !important;
  box-shadow: none !important;
}

/* =========================================================
 READ-ONLY / LOCKED FIELDS
========================================================= */
.form-control-plaintext {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .375rem .75rem;
  background: #f7fafc;
}

.read-only-locked {
  pointer-events: none !important;
}

/* =========================================================
 SELECT2 / LOOKUP
========================================================= */
.select2-container .select2-selection {
  border: 1px solid var(--apa-field-border) !important;
  border-radius: var(--apa-field-radius);
  background: var(--apa-field-bg);
  box-shadow: none !important;
}

/* =========================================================
 PROGRESS INDICATOR (MULTISTEP)
========================================================= */
ol.progress.list-group.top {
  background: var(--apa-soft-bg);
  border-radius: 6px;
  padding: 6px 8px;
}

ol.progress.list-group.top > li {
  background: #f7f9fc;
  border-radius: 6px;
  margin-right: 4px;
}

ol.progress.list-group.top > li.active {
  background: var(--apa-brand-blue);
  color: #fff;
  font-weight: 600;
}

/* =========================================================
 BUTTONS — Previous / Save Draft / Next
 - Implements the screenshot behavior
 - Keep the rest of the site untouched
========================================================= */
/* ---------- Previous (passive, grey) ---------- */
#PreviousButton {
  background-color: var(--ppg-secondary-bg) !important;
  border-color: var(--ppg-secondary-border) !important;
  color: var(--ppg-secondary-text) !important;
}

#PreviousButton:hover,
#PreviousButton:focus {
  background-color: var(--ppg-secondary-hover-bg) !important;
  border-color: var(--ppg-secondary-hover-border) !important;
  color: var(--ppg-secondary-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Disable visuals == passive (no dimming) */
#PreviousButton[disabled],
#PreviousButton.disabled,
#PreviousButton[disabled]:hover,
#PreviousButton.disabled:hover {
  background-color: var(--ppg-secondary-bg) !important;
  border-color: var(--ppg-secondary-border) !important;
  color: var(--ppg-secondary-text) !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* ---------- Save Draft (same family as Previous) ---------- */
#apa_save_draft {
  background-color: var(--ppg-secondary-bg) !important;
  border-color: var(--ppg-secondary-border) !important;
  color: var(--ppg-secondary-text) !important;
}

#apa_save_draft:hover,
#apa_save_draft:focus {
  background-color: var(--ppg-secondary-hover-bg) !important;
  border-color: var(--ppg-secondary-hover-border) !important;
  color: var(--ppg-secondary-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Disable visuals == passive (no dimming) */
#apa_save_draft[disabled],
#apa_save_draft.disabled,
#apa_save_draft.pp-btn-disabled,
#apa_save_draft[disabled]:hover,
#apa_save_draft.disabled:hover,
#apa_save_draft.pp-btn-disabled:hover {
  background-color: var(--ppg-secondary-bg) !important;
  border-color: var(--ppg-secondary-border) !important;
  color: var(--ppg-secondary-text) !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* ---------- Next (brand) ---------- */
/* Base (passive) */
#NextButton {
  background-color: var(--ppg-next-bg) !important;
  border-color: var(--ppg-next-bg) !important;
  color: var(--ppg-next-text) !important;
}

/* Hover (target look we also keep for click/processing) */
#NextButton:hover,
#NextButton:focus {
  background-color: var(--ppg-next-hover-bg) !important;
  border-color: var(--ppg-next-hover-border) !important;
  color: var(--ppg-next-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Clicked/Active/Processing — lock to hover visuals; keep "Next" */
#NextButton:active,
#NextButton.active,
#NextButton[aria-pressed="true"],
#NextButton[aria-busy="true"],
#NextButton.is-busy,
#NextButton.processing,
#NextButton[disabled],
#NextButton:disabled,
#NextButton.disabled,
#NextButton[aria-disabled="true"],
#NextButton.pp-btn-disabled {
  background-color: var(--ppg-next-hover-bg) !important;
  border-color: var(--ppg-next-hover-border) !important;
  color: var(--ppg-next-text) !important;
  opacity: 1 !important; /* no dimming */
  cursor: default !important; /* looks locked but not 'denied' */
  pointer-events: auto !important; /* allow consistent hover style */
  box-shadow: none !important;
  filter: none !important;
}

/* Hide common busy indicators / injected labels so "Next" persists */
#NextButton .spinner-border,
#NextButton .ms-Spinner,
#NextButton .loading-indicator,
#NextButton .ppg-busy,
#NextButton.processing::after,
#NextButton[aria-busy="true"]::after {
  display: none !important;
  content: "" !important;
}

/* =======================================================
 Currency codes custom component — alignment fix
======================================================= */
/* 0) One knob to fine-tune if your theme differs */
:root {
  --apa-gutter: 11px; /* Pulls the Currency Required label towards the left if reduced and vice versa*/
}

/* 1) Keep the wrapper flush with the cell; no inherited padding */
.form-control-cell #currencyMulti_wrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 2) The header row should not add any extra padding/margins */
#currencyHeader {
  padding: 0 !important;
  margin: 0 !important;
  /* 3) Simulate the native 'control' gutter so our label lines up */
  transform: translateX(calc(-1 * var(--apa-gutter)));
}

/* 4) Keep the visible label and preview flush to the header baseline */
#currency_label_proxy,
#currencyPreview {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 5) Search bar spacing remains tidy */
#currencyDropdownPanel #currencySearch {
  margin-bottom: 8px;
}

/* 7) Mobile: templates often collapse gutters; don’t shift on small screens */
@media (max-width: 576px) {
  #currencyHeader {
    transform: none; /* keep things simple when stacked */
  }
}

/* =========================================================
 Progress indicator (new)
========================================================= */
/* Container strip color */
ol.progress.list-group.top {
  background-color: #DBE6EB; /* subtle slate/gray */
  border-radius: 6px;
  padding: 6px 8px;
}

/* Each step (default) */
ol.progress.list-group.top > li.list-group-item {
  background-color: #f7f9fc; /* default tile color */
  color: #1f2937;
  border: none; /* cleaner look */
  margin-right: 4px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover state */
ol.progress.list-group.top > li.list-group-item:hover {
  background-color: #eef5ff; /* gentle highlight */
}

/* Active/current step */
ol.progress.list-group.top > li.list-group-item.active,
ol.progress.list-group.top > li.list-group-item[aria-current="step"] {
  background-color: #65818B; /* brand blue */
  color: #ffffff;
  font-weight: 600;
}

/* Optional: completed steps (if you add a 'completed' class) */
ol.progress.list-group.top > li.list-group-item.completed {
  background-color: #cfe1ff;
  color: #0b3ea8;
}

/* Optional: tighten internal spacing for long labels */
ol.progress.list-group.top > li.list-group-item {
  padding: 10px 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* =========================================================
 DEBUG HELPERS (safe to remove later)
========================================================= */
.debug-lock-outline .locked-field {
  outline: 2px dashed #2B6CB0;
}

.debug-show-hidden .read-only-locked {
  pointer-events: auto !important;
}

/* =========================================================
 NEXT BUTTON — keep "Next" label persistent on click/busy
 (works with Bootstrap/Power Pages injected loaders)
========================================================= */
/* Ensure base text is present and never hidden by platform classes */
#NextButton {
  position: relative; /* anchor for label fallback */
  white-space: nowrap;
  min-width: 112px; /* prevent width jump; adjust if needed */
}

/* Keep your hover look for focus as well */
#NextButton:hover,
#NextButton:focus {
  background-color: var(--ppg-next-hover-bg) !important;
  border-color: var(--ppg-next-hover-border) !important;
  color: var(--ppg-next-text) !important;
}

/* Busy/disabled/active — keep same visuals AND keep label visible */
#NextButton:active,
#NextButton.active,
#NextButton[aria-pressed="true"],
#NextButton[aria-busy="true"],
#NextButton.is-busy,
#NextButton.processing,
#NextButton[disabled],
#NextButton:disabled,
#NextButton.disabled,
#NextButton[aria-disabled="true"],
#NextButton.pp-btn-disabled {
  background-color: var(--ppg-next-hover-bg) !important;
  border-color: var(--ppg-next-hover-border) !important;
  color: var(--ppg-next-text) !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hide common loaders and content overrides INSIDE the button */
#NextButton .spinner-border,
#NextButton .ms-Spinner,
#NextButton .loading-indicator,
#NextButton .ppg-busy,
#NextButton .fa,
#NextButton .glyphicon,
#NextButton i {
  display: none !important;
}

/* Neutralize platform/text overrides that use ::before/::after content */
#NextButton::before,
#NextButton::after,
#NextButton[aria-busy="true"]::after,
#NextButton.processing::after {
  content: "" !important;
  display: none !important;
}

/* Some themes hide the label span when busy; force the label to show */
#NextButton span,
#NextButton .btn-text,
#NextButton .label,
#NextButton .text {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Final safety net: if platform empties inner text, draw "Next" via ::before.
 This will NOT duplicate if text is already there because we conditionally
 show it only when there is no child text. */
#NextButton[data-lock-label="true"]::before {
  content: "Next";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center text */
  color: var(--ppg-next-text);
  pointer-events: none;
  /* Prevent overlap if inner text exists; we’ll hide this when text is present via the rule below */
}

/* If the button still has visible text nodes/spans, don’t overlay the fallback */
#NextButton[data-lock-label="true"] > *:not(script):not(style) {
  position: relative;
  z-index: 1;
}

#NextButton[data-lock-label="true"]:not(:empty)::before {
  content: "" !important; /* no fallback overlay if real text exists */
}

/* Guard against platforms that move real text off-screen */
#NextButton,
#NextButton * {
  text-indent: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* Prevent any width jiggle from padding/loader injection */
#NextButton {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* =========================================================
 Subgrid adjustments
 ========================================================= */
/* Inline actions container styling */
.apa-inline-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

/* Keep native classes so PP handlers keep working */
.apa-inline-actions a.edit-link { color:#1b6ec2; text-decoration:none; }
.apa-inline-actions a.delete-link { color:#b42318; text-decoration:none; }

/* Icon-only mode: hide the text but keep icon spans visible */
.apa-inline-actions.icon-only a {
  font-size: 0; /* hide text nodes */
  line-height: 1;
}

/* Show the icons at the desired size */
.apa-inline-actions.icon-only a > span.fa,
.apa-inline-actions.icon-only a > i.fa,
.apa-inline-actions.icon-only a > span.fa-solid {
  font-size: 18px; /* tweak size to taste */
}

/* Optional: hover/focus polish */
.apa-inline-actions a:focus { outline: 2px solid #bcd4ff; outline-offset: 2px; border-radius: 3px; }
.apa-inline-actions a.edit-link:hover { color:#0f5db0; }
.apa-inline-actions a.delete-link:hover { color:#9f1e12; }

/* "There are no records to display" message (Global, presentation-only) */
.view-empty.message {
  margin-top: 12px;
}

.view-empty.message .alert.alert-warning {
  background-color: var(--apa-soft-bg) !important;
  border-color: var(--apa-brand-blue) !important;
  color: #1f2937 !important; /* readable neutral */
  border-radius: 8px;
  padding: 16px 20px;
  font-weight: 500;
  box-shadow: none !important;
}

/* =========================================================
 Phone Number Custom Component
========================================================= */
/* Override flag sprite paths to use our portal URLs */
.iti__flag {
  background-image: url("/flags.png") !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/flags@2x.png") !important;
  }
}

/* =========================================================
 Info icon — image-only (no tooltip, no text glyph)
 - One knob: --apa-info-size (diameter in px)
 - Preserves aspect ratio via background-size: contain
 ========================================================= */
/* === Info icon + tooltip (global) === */
.apa-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* space between label and icon */
}

.apa-info-icon {
  --apa-info-color: #ffffff; /* icon color */
  --apa-info-bg: #65818B; /* icon inner bg */
  --apa-info-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--apa-info-size);
  height: var(--apa-info-size);
  border-radius: 50%;
  border: 2px solid var(--apa-info-color);
  color: var(--apa-info-color);
  background: var(--apa-info-bg);
  font-size: 8px;
  line-height: 1;
  cursor: help;
  user-select: none;
  position: relative;
}

.apa-info-icon:hover,
.apa-info-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(68,114,196,0.2);
}

.apa-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 8px);
  min-width: 220px;
  max-width: min(360px, 70vw);
  background: #2d3e50; /* tooltip bg */
  color: #ffffff; /* tooltip text */
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 9999;
  display: none;
}

.apa-tooltip[data-show="true"] {
  display: block;
}

.apa-tooltip::after {
  /* little speech-bubble arrow */
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #2d3e50 transparent transparent;
}

/* Prefer showing above on very narrow screens if needed */
@media (max-width: 480px) {
  .apa-tooltip {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    transform: none;
  }
  .apa-tooltip::after {
    left: 10px;
    top: 100%;
    transform: none;
    border-color: #2d3e50 transparent transparent transparent;
  }
}

/* Optional: tighter spacing for labels with required asterisk */
.field-label + .apa-info-icon,
.apa-info-wrap .apa-info-icon {
  vertical-align: middle;
}

/* Force-hide the manual-only individual section */
[data-name="manual_only_ind_section"] {
  display: none !important;
}

/* Force-hide the manual-only corporate section */
[data-name="manual_only_corp_section"] {
  display: none !important;
}

/* =========================================================
 HEADER — universal vertical centering (Power Pages safe)
 Uses table/table-cell to avoid flex issues in Bootstrap 3.
 Works even when markup differs across pages.
========================================================= */

/* One knob: header height */
:root {
  --apa-header-h: 72px;
}

/* Ensure the outer header shell has a consistent min-height */
.navbar,
.static-top.navbar-dark {
  min-height: var(--apa-header-h) !important;
}

/* Power Pages sometimes makes the container the "real" banner */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container.custom-container,
.container.custom-container {
  min-height: var(--apa-header-h) !important;
  height: var(--apa-header-h) !important;

  /* table layout anchor */
  display: table !important;
  width: 100% !important;
}

/* Common wrapper chain used by Power Pages header snippets */
.navbar-brand,
.navbar-header,
.navbar-brand .xrm-editable-html,
.navbar-brand .xrm-attribute-value,
.container.custom-container .xrm-editable-html,
.container.custom-container .xrm-attribute-value {
  height: var(--apa-header-h) !important;
}

/* The clickable area containing the logo: vertically center it */
.navbar-brand > a,
.navbar-brand a,
.container.custom-container > a {
  display: table-cell !important;
  vertical-align: middle !important;
  height: var(--apa-header-h) !important;
  float: none !important;       /* neutralize float-based misalignment */
  line-height: normal !important; /* stop line-height from fighting centering */
}

/* Logo image itself */
img.site-logo,
.navbar-brand img {
  max-height: calc(var(--apa-header-h) - 30px) !important; /* keep breathing room */
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Mobile */
@media (max-width: 576px) {
  :root { --apa-header-h: 56px; }

  .navbar,
  .static-top.navbar-dark,
  .navbar > .container,
  .navbar > .container-fluid,
  .navbar > .container.custom-container,
  .container.custom-container {
    min-height: var(--apa-header-h) !important;
    height: var(--apa-header-h) !important;
  }

  img.site-logo,
  .navbar-brand img {
    max-height: 44px !important;
  }
}

/* =========================================================
 Header logo centering — fix inconsistency on long/scroll pages
 Targets ONLY the header chain shown in your outerHTML.
========================================================= */

:root {
  --apa-header-h: 72px;
  --apa-logo-h: 56px;
}

/* The banner container Power Pages renders */
.navbar > .container.custom-container,
.container.custom-container {
  min-height: var(--apa-header-h) !important;
  height: var(--apa-header-h) !important;

  display: flex !important;
  align-items: center !important;
}

/* Brand wrapper (your DOM uses navbar-brand + navbar-header together) */
.container.custom-container .navbar-brand.navbar-header {
  height: var(--apa-header-h) !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* XRM wrappers that often cause the “top bias” on some steps */
.container.custom-container .navbar-brand.navbar-header .xrm-editable-html,
.container.custom-container .navbar-brand.navbar-header .xrm-attribute-value {
  height: var(--apa-header-h) !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* Clickable anchor */
.container.custom-container .navbar-brand.navbar-header .xrm-attribute-value > a {
  height: var(--apa-header-h) !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* Logo image */
.container.custom-container img.site-logo {
  height: var(--apa-logo-h) !important;
  width: auto !important;
  display: block !important; /* removes baseline/descender quirks */
}