/* =========================================================
   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 sizing */
.site-logo img,
.navbar-brand img {
  height: 56px;
  max-height: 72px;
  width: auto;
  vertical-align: middle;
}

.navbar,
.navbar-header {
  min-height: 72px;
}

@media (max-width: 576px) {
  .site-logo img,
  .navbar-brand img {
    height: 44px;
  }
  .navbar,
  .navbar-header {
    min-height: 56px;
  }
}

/* =========================================================
   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;
}