:root {
    --dwp-link-color: #282F6F;
    --dwp-icon-active: #0d6efd;
    --dwp-icon-done: #495057;
    --dwp-icon-new: lightgray;
    --dwp-selected-card-bg: #e7f1ff;
    --dwp-focus-inner: white;
    --dwp-focus-outer: #258cfb;
    --dwp-step-completed-bg: #1a3a6b;
    --dwp-step-completed-label: #1a3a6b;
    --dwp-step-current-bg: #4a7cc7;
    --dwp-step-current-label: #0d6efd;
    --dwp-step-pending-bg: #adb5bd;
    --dwp-step-pending-label: #6c757d;
    --dwp-step-connector: #dee2e6;
    --dwp-step-connector-done: #1a3a6b;
    --dwp-step-halo: rgba(13, 110, 253, 0.15);
}

[data-bs-theme="dark"] {
    --dwp-link-color: #8fa3e0;
    --dwp-icon-done: #adb5bd;
    --dwp-icon-new: #6c757d;
    --dwp-selected-card-bg: #1a2a4a;
    --dwp-focus-inner: #343a40;
    --dwp-focus-outer: #258cfb;
    --dwp-step-completed-bg: #4a7cc7;
    --dwp-step-completed-label: #8fa3e0;
    --dwp-step-current-bg: #6ea0e0;
    --dwp-step-current-label: #6ea0e0;
    --dwp-step-pending-bg: #495057;
    --dwp-step-pending-label: #6c757d;
    --dwp-step-connector: #495057;
    --dwp-step-connector-done: #4a7cc7;
    --dwp-step-halo: rgba(110, 160, 224, 0.2);
}

[data-bs-theme="dark"] .dark__bg-1000 {
    background-color: var(--bs-dark-bg-subtle) !important;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--dwp-focus-inner), 0 0 0 0.25rem var(--dwp-focus-outer);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.pl-1 {
    padding-left: 2.0rem !important;
}

.center {
    display: flex;
    width: 100%;
    justify-content: center;
}


.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

.tooltip-arrow {
    display: none !important;
}

/* Wider tooltip for content that doesn't fit Bootstrap's default 200px max-width,
   e.g. the Wealth ID / Auth0 ID tooltip on Client Detail, where the Auth0 ID wraps
   badly. Apply via data-bs-custom-class="wide-tooltip". */
.tooltip.wide-tooltip .tooltip-inner {
    max-width: 350px;
}

.right-align {
    text-align: right;
}

/* Client Dashboard */

.client-support-link {
    text-align: right !important;
}

@media only screen and (max-width: 990px) {
    .client-support-link {
        text-align: left !important;
    }
}


/* Nav Bar */

.dwp-navbar {
    background-color: #282f3f;
}

.dwp-navbar .navbar-brand {
    text-decoration: none;
}

.dwp-navbar-logo {
    max-width: 100%;
    height: auto;
    width: 80px;
}

.dwp-navbar .dropdown-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Required field indicator */

.required-field::after {
    content: " *";
    color: #dc3545;
}

/* Pandadoc */

.pandadoc-iframe {
    width: 100%;
    height: 90vh;
    border: none;
}

/* Client Form */

.form-title {
    text-align: center;
}

.form-section-header {
    text-align: center;
    align-content: end;
}

.form-radio-header {
    align-content: center;
    transform: scale(0.85);
    opacity: 0.65;
}

.form-readonly .form-control {
    background-color: transparent;
    border: none;
}

.form-button-center {
    margin: 0 auto;
    display: block;
}

.form-button-right {
    float: right;
}

.search-action-btn {
    flex: 1 1 100%;
    min-width: 80px;
}

.search-action-btn-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1200px) {
    .search-action-btn {
        flex: 1 1 0;
    }
}

.form-card-header {
    font-weight: 200;
    display: inline;
    vertical-align: sub;
}

.form-card-header-button {
    float: right;
}

.form-floating label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Force a form-floating label into the floated (populated) state regardless of input value */
.form-floating > label.floated-label {
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-control {
    min-width: 100%;
}

.form-group .btn-toggle-sensitive {
    pointer-events: auto;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    opacity: .65;
    padding: .75rem .25rem;
    border: none;
}

.form-nav-current {
    font-weight: bold;
}

.no-outline:focus {
    outline: none;
}

.sidebar-toggle:hover {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
    border-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.sidebar-toggle:focus {
    box-shadow: none !important;
}

.sidebar {
    display: flex;
    height: calc(100vh - var(--navbar-height, 75px));
    position: sticky;
    top: 0;
}

#mobileSideBarToggle {
    position: fixed;
    top: calc(var(--navbar-height, 75px) + 10px); /* Initial position, adjusted by JS on scroll */
    left: 10px;
    z-index: 1050;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #282f3f;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobileSideBarToggle:hover {
    background-color: #3a4459;
}

#offcanvas-menu {
    display: block !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.gridTemplate {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 5px;
    /* Safari stretches the native radio input to fill its grid cell by default, drifting it out
       of line with the text span next to it (Chrome doesn't). Center both on the row instead. */
    align-items: center;
}

.beneficiaryRadio {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.beneficiaryRadio label {
    position: static !important;
    width: auto !important;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    text-overflow: unset;
    overflow: visible;
}

@media (max-width: 768px) {
    .beneficiaryRadio {
        display: block;
        direction: revert;
    }

    .beneficiaryRadio label {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        padding-top: 3px;
    }
}

.beneficiaryRadio label input[type="radio"] {
    margin-right: 0.5rem;
}

.investmentExperienceInputFields {
    max-width: 100%;
    padding: 1.75rem 0.75rem 0.375rem 0.75rem;
}

#unsavedChangesModal {
    z-index: 1070;
}

/* Pinned to the bottom of the visible modal area while any part of its form is on screen, so the save
   button is never scrolled out of reach; it rests at the end of the form once that is in view. The bar
   is a col-1 / col / col-1 row so the visible box (.unsaved-bar-inner) lines up with the form's controls. */
.unsaved-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 0.5rem;
}

.unsaved-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
}

.unsaved-backdrop {
    z-index: 1065 !important;
}

.stacked-modal {
    z-index: 1070;
}

.stacked-modal-backdrop {
    z-index: 1065 !important;
}

/* Onboarding Form */

.onboarding-icon-active {
    color: var(--dwp-icon-active);
}

.onboarding-icon-done {
    color: var(--dwp-icon-done);
}

.onboarding-icon-new {
    color: var(--dwp-icon-new);
}

.country-code {
    max-width: 3.5em;
    height: 58px;
}

.phone-prefix-disabled {
    border: none;
    background: transparent;
}

/* File list row highlights */

tr.row-pending-replace {
    --bs-table-bg: rgba(var(--bs-info-rgb), 0.15);
    color: var(--bs-body-color);
}

tr.row-pending-delete {
    --bs-table-bg: rgba(var(--bs-danger-rgb), 0.15);
    color: var(--bs-body-color);
}

/* Advisor Screen */

.input-group-append-fix {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-append-fix i {
    line-height: 1.5;
}

.household-link {
    cursor: pointer;
    color: var(--dwp-link-color);
}

.account-tag {
    cursor: pointer;
}

.tag-select {
    position: absolute;
    z-index: 1;
}

.pagination-container {
    display: flex;
}

ul.pagination {
    margin-left: auto;
    margin-right: auto;
}

.info-icon {
    position: absolute; /* Absolute positioning */
    top: 50%; /* Vertically position it 50% from the top */
    transform: translateY(-50%); /* Center it vertically */
    right: 0; /* Align it to the right (end) of the container */
    margin-right: 0.5rem; /* Add spacing from the right edge */
    font-size: 1.25rem; /* This is equivalent to `fa-lg` (adjust size as needed) */
    border-radius: 50%; /* Circular background */
    padding: 5px; /* Padding inside the circle */
}

.list-header-link {
    cursor: pointer;
    color: var(--dwp-link-color);
    text-decoration: none;
}

.selected-account-card {
    border: 2px solid #0d6efd !important; /* Bootstrap primary color */
    background-color: var(--dwp-selected-card-bg);
}

.selected-resource-card {
    border: 2px solid #0d6efd !important; /* Bootstrap primary color */
    background-color: var(--dwp-selected-card-bg);
}

.eye-inline {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-15%);
  cursor: pointer;
  z-index: 5;
  font-size: 1rem;
  line-height: 1;
}

.sensitive-field {
  position: relative;
}

.sensitive-display {
  background-color: var(--bs-secondary-bg);
}

.sensitive-field .info-icon {
  right: 1.5rem;
  bottom: 0.6rem;
}

.sensitive-field .form-control {
  padding-right: 2.5rem;
}

.sensitive-field.has-tooltip .form-control {
  padding-right: 4.25rem;
}

.sensitive-field.has-tooltip .eye-inline {
  right: 2.2rem;
}

.sensitive-field.has-tooltip .info-icon {
  right: -0.25rem;
}

.form-floating > .eye-inline {
  top: 50%;
}

.sensitive-field input[type="date"]::-webkit-calendar-picker-indicator {
  margin-top: -0.25rem;
  cursor: pointer;
}

.summary-sensitive-display-input {
    width: 140px;
    min-width: 140px;
}

.display-labels {
    font-size: 0.85rem;
    color: #6c757d;
}
/* Pipeline step progress indicator */
.pipeline-progress {
    /* Horizontal padding matters here, not just cosmetic: step-label is absolutely centered
       under its 44px icon (see .step-label below) and is almost always wider than the icon, so
       the first/last step's label overflows past the icon's edge by roughly (label width - 44px)
       / 2. With no padding, that overflow runs past the container itself. */
    padding: 0.75rem 2.5rem 0;
}
.pipeline-progress .pipeline-step {
    flex: 0 0 auto;
    min-width: 44px;
    position: relative;
}
.pipeline-progress .step-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    padding: 3px;
    background: transparent;
}
.pipeline-progress .pipeline-step.current .step-icon-wrap {
    background: var(--dwp-step-halo);
    border-radius: 12px;
}
.pipeline-progress .step-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: var(--dwp-step-pending-bg);
    color: #fff;
    flex-shrink: 0;
}
.pipeline-progress .pipeline-step.completed .step-icon { background: var(--dwp-step-completed-bg); }
.pipeline-progress .pipeline-step.current .step-icon   { background: var(--dwp-step-current-bg); }
.pipeline-progress .step-label {
    margin-top: 0.5rem;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dwp-step-pending-label);
    text-align: center;
}
.pipeline-progress .pipeline-step.completed .step-label { color: var(--dwp-step-completed-label); }
.pipeline-progress .pipeline-step.current .step-label   { color: var(--dwp-step-current-label); }
.pipeline-progress .step-subtitle {
    margin-top: 0.125rem;
    white-space: nowrap;
    font-size: 0.65rem;
    color: var(--dwp-step-current-label);
    text-align: center;
}
.pipeline-progress .step-connector {
    flex: 1 1 auto;
    height: 2px;
    background: var(--dwp-step-connector);
    margin-top: 22px;
    min-width: 20px;
}
.pipeline-progress .step-connector.done { background: var(--dwp-step-connector-done); }

/* Fund subscription — review */
#fundSubscriptionReviewFields th[scope="row"],
.fund-subscription-review-table th[scope="row"] {
    width: 34%;
    padding-right: 2rem;
}

#fundSubscriptionReviewFields td,
.fund-subscription-review-table td {
    padding-left: 1rem;
}

.review-section-title {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    margin-left: -3px;
}

.review-section-row td {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* At intermediate viewport widths Bootstrap's modal-xl max-width kicks in only at
   ≥1200px, so from 768px–1199px the dialog falls back to the 500px default and
   appears narrow with large side gutters. Expand it to fill available width at
   those breakpoints, and tighten the spacer columns inside so form fields have
   room to breathe without collapsing to single-column too early. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .modal-dialog.modal-xl {
        max-width: calc(100% - 3.5rem);
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #detailsModal .col-1 {
        flex: 0 0 auto;
        width: 0.5rem;
        padding-left: 0;
        padding-right: 0;
    }
    #detailsModal .dag-timeline__label {
        font-size: 0.58rem;
        letter-spacing: 0;
        padding: 0 3px;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}