/* New look (html.pie-premium) — profiles page.
   Owned by one session at a time; see .claude/skills/pie-new-ui/SKILL.md.
   Every selector starts with: html.pie-premium .pp-shell <this page's root class> */

/* Category tabs: the capsule scrolls sideways (overflow-x: auto), which clips everything past its
   4px padding, so the open tab's 10px-deep shadow was cut off flat at the bottom. A shallower shadow
   that ends inside the padding. */
html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_pills.active {
    box-shadow: 0 2px 6px -4px rgba(20, 24, 20, .45);
}

/* ==========================================================================
   Individual profile popup (CreateIndividual_new.vue, #newIndividualModal) — the design's big popup
   (planner.css .bigpop): white 22px dialog, plain header, 210px section nav, grey section cards,
   48px fields, pill footer buttons. The id outranks the classic template1.css rules.
   ========================================================================== */
html.pie-premium .pp-shell #newIndividualModal .modal-content {
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
    overflow: hidden !important;
}

/* Header: the gradient banner becomes a title row */
html.pie-premium .pp-shell #newIndividualModal #addIndividual .add-individual-header {
    flex: none;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 14px 16px 14px 22px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    border-radius: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header > .row {
    margin: 0;
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header > .row > div {
    padding: 0;
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header > .row > div::before {
    content: "Profiles";
    display: block;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header > .row > div::after {
    content: "Individual profile";
    display: block;
    margin-top: 2px;
    color: var(--pp-ink);
    font: 19px/1.2 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header .row.g-2:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium .pp-shell #newIndividualModal .add-individual-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium .pp-shell #newIndividualModal #addIndividual .modal-body {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--pp-panel);
}

/* Section nav (left) */
html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar {
    width: 210px;
    padding: 10px 10px 14px;
    border-right: 1px solid var(--pp-line);
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content {
    display: grid;
    gap: 1px;
    padding: 4px 0 8px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content li {
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--pp-ink-2);
    font: 13.5px/1.3 var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content li a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content li:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content li.active {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

/* Group headings (Profile, Companions, …): eyebrow style; the single-item groups
   (Documents, Automated messages) stay ordinary nav rows */
html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content:has(> li + li) > li:first-child {
    padding: 10px 10px 6px;
    color: var(--pp-muted);
    font: 11px/1.3 var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content:has(> li + li) > li:first-child:hover {
    background: transparent;
    color: var(--pp-ink);
}

/* Main column */
html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-content #individual_content {
    padding: 18px 22px 24px;
}

/* Profile summary card: avatar, name, contact chips, created line, figures + Actions */
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item {
    flex-wrap: nowrap;
    gap: 18px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item img {
    width: 72px;
    height: 72px;
    border: 3px solid var(--pp-panel);
    box-shadow: 0 6px 16px -10px rgba(30, 40, 32, .35);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-pic-wrapper {
    flex: none;
    align-self: flex-start;
    height: 72px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-pic-wrapper .pie-icon-edit {
    top: auto;
    right: -2px;
    bottom: 2px;
    left: auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .08), 0 4px 10px -6px rgba(30, 40, 32, .35);
    color: var(--pp-ink-3);
    font-size: 12px;
    cursor: pointer;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item .profile-details {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding-top: 4px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item strong {
    flex: 0 0 100%;
    color: var(--pp-ink);
    font: 19px/1.25 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item strong:empty {
    display: none;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item span {
    flex: 0 0 100%;
    margin: 0 0 4px;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item a i {
    padding: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item p {
    flex: 0 0 100%;
    margin: 4px 0 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list {
    position: relative;
    display: grid;
    /* one column no wider than the card: an auto track grew to the label + input's default width,
       so the edit-mode inputs ran past the card's right edge */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px 44px 12px 14px;
    border-radius: 14px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item {
    min-width: 0;
    margin: 0 !important;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item label {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list li i,
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > .pie-icon-edit {
    color: var(--pp-ink-3);
}

/* Edit pencil / Save of the figures card: top-right corner (their float does nothing in a grid) */
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > :is(.pie-icon-edit, .save-btn) {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px !important;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list .pie-icon-sabre {
    color: #e1192c;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .dropdown .dropdown-toggle:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

/* Profile / Trips / Accounting / Forms / Activity: segmented bar */
html.pie-premium .pp-shell #newIndividualModal .profle_body {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .activity-info {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 14px;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .activity-info .checkbox-toggle {
    float: none !important;
    flex: none;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 4px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin: 0;
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity span:hover {
    border: 0;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity span i {
    padding: 0;
    font-size: 14px;
}

html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity .rose_pills,
html.pie-premium .pp-shell #newIndividualModal .profle_body .profile-activity .rose_pills:hover {
    border: 0;
    background: var(--pp-ink);
    box-shadow: 0 2px 6px -4px rgba(20, 24, 20, .45);
    color: #fff;
    font-family: var(--pp-bold);
}

/* Display Sabre fields: the accent switch used in the planner popups */
html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input + label {
    padding: 0 0 0 44px;
    color: var(--pp-ink-3);
    font: 13px/20px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input + label::before,
html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle:hover input:checked + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0 !important;
    border-radius: 10px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input + label::after,
html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input + label:hover::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input:checked + label {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input:checked + label::before,
html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle:hover input:checked + label::before {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell #newIndividualModal .activity-info .checkbox-toggle input:checked + label::after {
    left: 17px;
    border: 0;
    background: #fff;
}

/* Section cards */
html.pie-premium .pp-shell #newIndividualModal .individual-panels :is(.section-boxes, .accordion-item) {
    margin-bottom: 12px !important;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .section-head {
    margin: 0 0 12px;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .accordion-header {
    padding: 0;
    border-radius: 10px;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .accordion-header:hover {
    background: transparent;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .accordion-button {
    padding: 4px 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

/* Fields: 48px, radius 10, white on the grey card, accent focus ring */
html.pie-premium .pp-shell #newIndividualModal .form-floating .form-control:not(textarea),
html.pie-premium .pp-shell #newIndividualModal .vdp-datepicker .form-control {
    height: 48px;
}

/* v-select grows with its chips (multi-selects such as Profile Type) */
html.pie-premium .pp-shell #newIndividualModal .form-floating .v-select .vs__dropdown-toggle {
    height: auto;
    min-height: 48px;
}

html.pie-premium .pp-shell #newIndividualModal .form-floating .form-control,
html.pie-premium .pp-shell #newIndividualModal .form-floating .v-select .vs__dropdown-toggle,
html.pie-premium .pp-shell #newIndividualModal .vdp-datepicker .form-control,
html.pie-premium .pp-shell #newIndividualModal .form-floating .multiselect .multiselect__tags {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background-color: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .form-floating .form-control:focus,
html.pie-premium .pp-shell #newIndividualModal .form-floating .form-control:focus-within,
html.pie-premium .pp-shell #newIndividualModal .form-floating .vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell #newIndividualModal .form-floating .form-control.invalid {
    border-color: #d93025 !important;
}

html.pie-premium .pp-shell #newIndividualModal .form-floating > label {
    color: var(--pp-muted);
    font-family: var(--pp-bold);
    font-size: 11.5px !important;
}

html.pie-premium .pp-shell #newIndividualModal .form-floating .bootstrap-select > .dropdown-toggle,
html.pie-premium .pp-shell #newIndividualModal .form-floating .bootstrap-select .filter-option-inner-inner {
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .ck.ck-editor__top .ck-toolbar {
    border-color: var(--pp-line-2);
    border-radius: 10px 10px 0 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .ck.ck-editor__main > .ck-editor__editable {
    border-color: var(--pp-line-2);
    border-radius: 0 0 10px 10px;
}

/* Footer: Sabre sync on the left, pill Cancel / Save on the right */
html.pie-premium .pp-shell #newIndividualModal .profile-content .modal-footer {
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line);
    border-radius: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .custom-checkbox label {
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .custom-checkbox .checkmark,
html.pie-premium .pp-shell #newIndividualModal .individual-panels .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newIndividualModal .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #newIndividualModal .profile-content .modal-footer > div:last-child {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: 8px;
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .btn {
    display: inline-flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .individual-cancel-delete {
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .individual-cancel-delete:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell #newIndividualModal .modal-footer .individual-save,
html.pie-premium .pp-shell #newIndividualModal .modal-footer .individual-save:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
    color: #fff !important;
}

/* Desktop size: the design's big popup (1180 × 820), centred */
@media (min-width: 769px) {
    html.pie-premium .pp-shell #newIndividualModal .modal-dialog.modal-custom {
        width: min(1180px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        height: min(820px, calc(100vh - 48px));
        max-height: calc(100vh - 48px);
        margin: max(24px, calc((100vh - 820px) / 2)) auto;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar {
        width: 180px;
    }
}

/* Phones / narrow tablets: full-screen popup, the section nav becomes a sideways strip above the form */
@media (max-width: 768px) {
    html.pie-premium .pp-shell #newIndividualModal .modal-dialog.modal-custom {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal #addIndividual .modal-body {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information > div:first-child {
        flex: none;
        min-width: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
        height: auto;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--pp-line);
        overflow-x: auto;
        overflow-y: hidden;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content {
        display: flex;
        flex: none;
        align-items: center;
        gap: 2px;
        padding: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content li,
    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-leftsidebar .profile-leftside-content:has(> li + li) > li:first-child {
        padding: 7px 10px;
        white-space: nowrap;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-information .profile-content #individual_content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        padding: 14px 14px 20px;
        overflow-y: auto;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-item {
        flex-wrap: wrap;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list .profile-detail-item label {
        white-space: normal;
    }

    html.pie-premium .pp-shell #newIndividualModal .profle_body .activity-info {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-content .modal-footer {
        display: flex;
        flex: none;
        flex-wrap: wrap !important;
        padding: 12px 14px;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-content .modal-footer > div:first-child {
        flex: 1 1 100% !important;
    }

    html.pie-premium .pp-shell #newIndividualModal .modal-footer .custom-checkbox label {
        white-space: normal !important;
    }

    html.pie-premium .pp-shell #newIndividualModal .profile-content .modal-footer > div:last-child {
        margin-left: auto;
    }

    html.pie-premium .pp-shell #newIndividualModal .modal-footer .btn {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Profile popup — Trips / Accounting / Forms / Activity tabs (IndividualTripList, IndividualAccountingSection,
   IndividualFormsSection, IndividualActivitySection). One look for their jQuery DataTables and vue-good-tables:
   white table card, light lines, 12px bold headers, Bordeaux sort/counts instead of the classic magenta.
   -------------------------------------------------------------------------- */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page > .container-fluid {
    padding: 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-title {
    margin: 0;
    color: var(--pp-ink);
    font: 15px/1.3 var(--pp-bold);
    letter-spacing: -.01em;
}

/* Tab heading above the cards (Forms, Activities) */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page > .container-fluid > .section-head {
    margin: 2px 0 12px;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page > .container-fluid > .section-head .section-title {
    font-size: 18px;
    letter-spacing: -.015em;
}

/* Activities reload: round icon button */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-head-right {
    margin-left: auto;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-head-right > i {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink-3);
    font-size: 15px !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-head-right > i:hover {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(.received-forms-tab, .crm_table) {
    padding-right: 0;
    padding-left: 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .received-forms-tab .full-screen {
    color: var(--pp-ink-3);
}

/* Trips: Upcoming / Traveling / … / All as a capsule (the grey bar was its scrollbar) */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types {
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel);
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types::-webkit-scrollbar {
    display: none;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li::after {
    display: none;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li.active {
    border: 0;
    background: var(--pp-ink);
    box-shadow: 0 2px 6px -4px rgba(20, 24, 20, .45);
    color: #fff;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li .count {
    position: static;
    min-width: 20px;
    width: auto;
    height: 18px;
    margin: 0;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px/18px var(--pp-bold);
    text-align: center;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li .count.count_clr {
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li.active .count,
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page ul.trip-types li.active .count.count_clr {
    background: rgba(255, 255, 255, .2);
    color: #fff !important;
}

/* DataTables (Trips, Invoices, Received Forms, Activities): table, length, search and paging in one white card */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_wrapper {
    padding: 12px 14px 8px;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_wrapper > .row {
    align-items: center;
    margin: 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_wrapper > .row > [class*="col-"] {
    padding: 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(.dataTables_length, .dataTables_filter) label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(.dataTables_length select, .dataTables_filter input) {
    height: 36px !important;
    min-height: 0;
    margin: 0;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_length select {
    width: 76px;
    padding: 0 26px 0 12px;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_filter input {
    width: 220px;
    padding: 0 12px;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(.dataTables_length select, .dataTables_filter input):focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable {
    margin: 0 !important;
    background: transparent;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(table.dataTable, .table-responsive > table.table) > thead > tr > th,
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_scrollHead table > thead > tr > th {
    padding: 10px 10px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background-color: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold) !important;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Sort chevrons: quiet, the sorted column in the accent */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc)::after {
    color: var(--pp-muted);
    font-size: 11px;
    opacity: .7;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable > thead > tr > th:is(.sorting_asc, .sorting_desc),
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable > thead > tr > th:is(.sorting_asc, .sorting_desc)::after {
    color: var(--pp-acc) !important;
    opacity: 1;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(table.dataTable, .table-responsive > table.table) > tbody > tr > td {
    padding: 10px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(table.dataTable, .table-responsive > table.table) > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .crm_table {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable > tbody > tr {
    background: transparent !important;
}

/* Dates and names stay on one line; the table scrolls inside its card */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page #tripstable > tbody > tr > td {
    white-space: nowrap;
}

/* Opened trip summary (DataTables child row, no role="row"): it sat inside the full-width table, so
   "Go To Trip File" and its tables ran off the right edge and the only sideways scrollbar was at the
   bottom of the list. Keep the summary pinned to the card's visible width, wrapping normally.
   24px = wrapper padding (14px) + cell padding (10px). */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .trip-list-section {
    container-type: inline-size;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page #tripstable > tbody > tr:not([role="row"]) > td {
    white-space: normal;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page #tripstable > tbody > tr:not([role="row"]) > td > .accordion-inner {
    position: sticky;
    left: 24px;
    width: calc(100cqw - 48px);
    margin-right: 0;
    margin-left: 0;
}

/* DataTables scroll mode (Invoices) keeps a hidden sizing header in the body: no padding or line on it */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_scrollBody table > thead > tr > th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_scrollHead table {
    margin: 0 !important;
}

/* Trips: "Go to planner" arrow — accent soft circle instead of the inline magenta */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page a.round-btn-trip-list {
    display: inline-grid !important;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font-size: 12px !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page a.round-btn-trip-list:hover {
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page table.dataTable > tbody > tr:not(:has(.dataTables_empty)):hover > td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page td.dataTables_empty {
    padding: 24px 10px !important;
    color: var(--pp-muted) !important;
    font: 13.5px var(--pp-sans) !important;
    text-align: center;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_info {
    padding: 8px 0 0 !important;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_paginate .pagination {
    margin: 6px 0 0;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_paginate .pagination li > a {
    min-width: 30px;
    height: 30px;
    margin: 0 2px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 13px/30px var(--pp-sans);
    text-align: center;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .dataTables_paginate .pagination li.active > a {
    background: var(--pp-ink) !important;
    color: #fff !important;
}

/* Accounting summary (Total Sales …): the same white card */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-boxes > .table-responsive:not(.crm_table) {
    padding: 4px 14px;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-boxes > .table-responsive > table.table {
    margin: 0;
    background: transparent;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-boxes > .table-responsive > table.table > tbody > tr > td {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

/* vue-good-table (supplier credits, payments, refunds, traveler information forms) */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-inner-wrap {
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
    overflow: hidden;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-global-search {
    padding: 10px 14px;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-global-search__input .input__icon .magnifying-glass {
    border-color: var(--pp-muted);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap :is(.vgt-input, .vgt-select) {
    height: 34px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background-color: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap :is(.vgt-input, .vgt-select):focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table {
    border: 0 !important;
    background: transparent;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th {
    padding: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: bottom;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th.sorting::before {
    border-top-color: var(--pp-muted);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th.sorting::after {
    border-bottom-color: var(--pp-muted);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th:is(.sorting-asc, .sorting-desc) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th.sorting-asc::after {
    border-bottom-color: var(--pp-acc);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th.sorting-desc::before {
    border-top-color: var(--pp-acc);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table thead th.filter-th {
    padding: 8px 10px !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table tbody td {
    padding: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table tbody tr {
    background: transparent;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table tbody tr:hover td {
    background: var(--pp-hover);
}

/* Row-number column: a quiet gutter instead of the blue-grey block */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table :is(th.line-numbers, .line-numbers) {
    width: 36px;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-muted) !important;
    font: 12px var(--pp-bold) !important;
    text-align: center;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-text-disabled {
    padding: 24px 10px;
    color: var(--pp-muted) !important;
    font: 13.5px var(--pp-sans) !important;
    text-align: center;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap__footer {
    padding: 8px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--pp-line) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap__footer :is(.footer__row-count__label, .footer__navigation__page-info, .footer__navigation__page-btn, .footer__navigation__page-btn span) {
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap__footer .footer__navigation__page-btn.disabled :is(span, .chevron) {
    opacity: .45;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap__footer .footer__row-count__select {
    height: 30px;
    padding: 0 22px 0 10px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    color: var(--pp-ink);
    font: 13px var(--pp-sans) !important;
}

/* Links inside the tables (trip names, forms) */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page :is(table.dataTable, .vgt-table) tbody a {
    color: var(--pp-acc);
    text-decoration: none;
}

/* Received Forms: the full-screen icon sits in the card's top-right corner instead of its own row */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .section-boxes:has(> .received-forms-tab > .text-end > .full-screen) {
    position: relative;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .received-forms-tab > .text-end:has(> .full-screen) {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0 !important;
}

/* vue-good-table sort icons (both-way arrow): muted */
html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table th.sortable button::before {
    border-top-color: var(--pp-muted);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-table th.sortable button::after {
    border-bottom-color: var(--pp-muted);
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-global-search__input {
    padding-left: 34px;
}

html.pie-premium .pp-shell #newIndividualModal .individual-panels .trips-page .vgt-wrap .vgt-global-search .vgt-input {
    height: 36px;
    border-radius: 10px !important;
}

/* Saved profiles: the Balance due / Available credits card uses the same small figures */
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > li {
    color: var(--pp-ink-2);
    font: 13px/1.5 var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > li :is(strong, span) {
    color: inherit;
    font: inherit;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > li strong {
    color: var(--pp-ink-3);
}

/* Contact: the emails and phones sit one per row in a col-md-2, a sixth of the row, which cut the
   address off and let the phone widget spill past its column. They take a third of the row
   (Sabre's Phone / Contact Remark stay beside them). */
@media (min-width: 768px) {
    html.pie-premium .pp-shell #newIndividualModal #contactInfo .row > .col-md-2:has(> .profile-phone-dropdown, > .form-floating > :is(.primary-email-field, input[type="email"])) {
        width: 33.333%;
        min-width: 260px;
    }
}

/* Phone fields (vue-tel-input in .profile-phone-dropdown): same 48px white field as the floating-label inputs */
html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown.form-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 6px 12px 4px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown.form-control:focus-within {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown > .ffl-label {
    display: block;
    margin: 0;
    flex: none;
    height: 14px;
    color: var(--pp-muted);
    font: 11.5px/14px var(--pp-bold);
    font-family: var(--pp-bold) !important;
    font-size: 11.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown .vue-tel-input {
    height: 24px;
    border: 0;
    box-shadow: none;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown .vue-tel-input .dropdown {
    padding: 0 6px 0 0;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown .vue-tel-input .dropdown-arrow {
    color: var(--pp-muted);
    font-size: 9px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-phone-dropdown .vue-tel-input input {
    height: 24px;
    padding: 0 0 0 4px;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

/* Figures card in edit mode (pencil → inputs + Save): labels in one column, inputs aligned and full width,
   Save as a small accent pill above the rows instead of on top of the first input */
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list:has(> .save-btn) {
    padding-top: 46px;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .profile-detail-list > .save-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px !important;
    border: 0;
    border-radius: 999px;
    background: var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff;
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item > :is(.dk-info, .interface) {
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    max-width: none;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list:has(> .save-btn) .profile-detail-item > :is(.dk-info, .interface) > label:first-child {
    flex: none;
    width: 132px;
    padding-right: 0;
    white-space: normal;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 34px;
    min-height: 34px !important;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item .form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-detail-list .profile-detail-item .form-control::placeholder {
    color: var(--pp-muted);
}

/* Interface ID: its sync / copy / delete icons sit right after the input */
html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .interface-sec > div:last-child:not(.interface) {
    flex: none;
    display: flex;
    align-items: center;
}

html.pie-premium .pp-shell #newIndividualModal .profile-page .profile-info .profile-detail .interface-sec > div:last-child:not(.interface) i {
    padding: 0 0 0 8px;
}

/* ==========================================================================
   Profiles list — audit fixes (Oct 2026)
   ========================================================================== */

/* Column search row (Acct #, Name, Email, Phone…): the classic look always shows it, the shared
   list-card rule hid it until a field had text, so it could never be typed into. Keep it visible
   as a quiet row of small fields under the column titles. */
html.pie-premium .pp-shell .new-profile-page table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
    display: table-row;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.filter-th {
    padding: 8px 14px 10px;
    -webkit-text-stroke: 0;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.filter-th .vgt-input {
    width: 100%;
    min-width: 72px;
    padding: 0 10px;
    border: 1px solid var(--pp-line);
    color: var(--pp-ink);
    box-shadow: none;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.filter-th .vgt-input::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.filter-th .vgt-input:focus {
    border-color: var(--pp-acc);
    background-color: var(--pp-panel);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

/* Every list (Individuals, Institutions, Internal…) fills the page width: the Bootstrap
   container-fluid gutter inset all but the Individuals card by 12px */
html.pie-premium .pp-shell .new-profile-page .crm_table.container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Display Columns sits inside the card, level with the search field's 16px inset, instead of
   on (or past) the card's rounded edge */
html.pie-premium .pp-shell .new-profile-page .position-relative > .custom-dropdown.float-end {
    right: 16px;
}

/* Display Columns: the arrow last, centred on the label (template1.css floats it 10px low) */
/* Outlined with a real border: the box-shadow ring from pie-premium.css drops out whenever a
   focus/hover box-shadow rule wins, leaving a borderless white label on the white card */
html.pie-premium .pp-shell .new-profile-page .custom-dropdown > button.dropdown-toggle {
    gap: 8px;
    width: auto;
    min-width: 0;
    border: 1px solid var(--pp-line-2) !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown > button.dropdown-toggle:hover {
    border-color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown > button.dropdown-toggle::after {
    content: "";
    order: 1;
    float: none;
    flex: none;
    width: 12px;
    height: 12px;
    margin: 0 0 0 auto;
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
}

/* Display Columns menu: the design's popover list, as on Trips and Reservations (classic grey
   box, grey rows and a 300px list) */
html.pie-premium .pp-shell .new-profile-page .custom-dropdown > .dropdown-menu {
    width: 280px;
    margin-top: 6px !important;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .dropdown-menu .head {
    margin: 0;
    padding: 10px 10px 4px;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
}

/* The list scrolls past ~8 rows so the menu fits under the button instead of flipping up under
   the top bar */
html.pie-premium .pp-shell .new-profile-page .custom-dropdown .checklist {
    max-height: min(320px, 45vh);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .checklist > a.color-pink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 6px;
    color: var(--pp-acc) !important;
    font-size: 12.5px;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .display-dropdown {
    margin: 0;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists {
    align-items: center;
    margin: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists .custom-checkbox {
    margin: 0;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists label {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists .pie-icon-move {
    padding: 0 !important;
    color: var(--pp-line-2);
    font-size: 13px;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown .custom-lists:hover .pie-icon-move {
    color: var(--pp-ink-3);
}

/* Action row: the empty IC wrapper took a flex slot (double gap after New Individual) and the
   Sabre wrappers' padding pushed their pills 5px apart and out of line */
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span.d-inline-block:not(.btn):not(:has(> *)) {
    display: none !important;
}

html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > div:has(> span.cursor-pointer) {
    padding: 0 !important;
}

/* Thin, light horizontal scrollbar above the table (classic dark #666 bar), as on Trips */
html.pie-premium .pp-shell .new-profile-page .custom_top_scrollbar::-webkit-scrollbar {
    height: 6px;
}

html.pie-premium .pp-shell .new-profile-page .custom_top_scrollbar::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .new-profile-page .custom_top_scrollbar::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell .new-profile-page .custom_top_scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--pp-ink-3);
}

/* Phones: the category chips scroll sideways in two rows instead of filling the first screen,
   and Display Columns gets its own line above the card instead of covering the search field */
@media (max-width: 640px) {
    html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -16px !important;
        padding: 2px 16px 8px 0;
        scrollbar-width: none;
    }

    html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills::-webkit-scrollbar {
        display: none;
    }

    html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills li.gray_light_pills {
        flex: none;
    }

    html.pie-premium .pp-shell .new-profile-page .position-relative > .custom-dropdown.float-end {
        position: static;
        float: none !important;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }

    html.pie-premium .pp-shell .new-profile-page .position-relative > .custom-dropdown.float-end > button.dropdown-toggle {
        margin-top: 0;
    }
}

/* ==========================================================================
   Profiles list — PLAN-7445 fixes (Nov 2026)
   ========================================================================== */

/* My Suppliers tab: bootstrap-select turns the native select into a button whose black text and
   caret sat on the dark open-tab pill. The button takes the tab's own colour instead. */
html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select {
    width: auto !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-toggle :is(.filter-option, .filter-option-inner, .filter-option-inner-inner) {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.2;
    color: inherit !important;
    text-decoration: none !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-toggle::after {
    content: "";
    position: static;
    flex: none;
    width: 12px;
    height: 12px;
    margin: 0;
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown.active .bootstrap-select > .dropdown-toggle {
    color: #fff !important;
    font-family: var(--pp-bold) !important;
}

/* The capsule scrolls sideways (overflow-x: auto), which clipped the open list to a sliver under
   the tab: it overflows only while the list is open */
html.pie-premium .pp-shell .new-profile-page .crm_menu > .g-2:has(.bootstrap-select > .dropdown-menu.show) {
    overflow: visible;
}

/* Its list (All, Air, Accommodation…): the design's popover */
html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-menu {
    min-width: 240px;
    margin-top: 6px !important;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-menu .dropdown-item {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-menu .dropdown-item:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown .bootstrap-select > .dropdown-menu :is(.dropdown-item.active, .dropdown-item.selected, .selected > .dropdown-item) {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

/* Tag Search (My Suppliers lists): the label hung 23px above its field, on top of + New. It sits
   in the flow above a 40px field, like the other labelled fields of the new look. */
html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box {
    width: 100%;
    max-width: 360px;
    margin: 0 0 4px;
    padding: 0;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box > .form-floating {
    display: flex;
    flex-direction: column-reverse;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .ffl-label {
    position: static;
    margin: 0 0 6px;
    padding: 0;
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    transform: none;
    opacity: 1;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
    padding: 6px 36px 6px 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect--active .multiselect__tags {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box :is(.multiselect__placeholder, .multiselect__input) {
    margin: 0;
    padding: 0;
    line-height: 26px;
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect__select {
    height: 38px;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect__content-wrapper {
    margin-top: 6px;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect__option {
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .multi-select-box .multiselect__option--highlight {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Display Columns (Institutions / My Suppliers lists): classic CSS puts it 82px down from the
   counts, which left it 12px above the search field. A grid row shared with the card keeps it
   level with the search field whatever height the counts take. */
@media (min-width: 641px) {
    html.pie-premium .pp-shell .new-profile-page .individuals-list > .position-relative:has(> .institutions-custom-dropdown) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    html.pie-premium .pp-shell .new-profile-page .individuals-list > .position-relative:has(> .institutions-custom-dropdown) > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    html.pie-premium .pp-shell .new-profile-page .individuals-list > .position-relative > .custom-dropdown.institutions-custom-dropdown {
        position: relative;
        top: auto;
        right: auto;
        z-index: 5;
        grid-row: 2;
        grid-column: 2;
        align-self: start;
        margin: 10px 16px 0 0;
    }

    html.pie-premium .pp-shell .new-profile-page .individuals-list > .position-relative > .institutions-custom-dropdown ~ * {
        grid-row: 2;
    }
}

/* Full screen (fullScreenSection adds .toggle-full-screen): the new look made the block
   transparent with no padding, so the fixed sheet showed the side bar and top bar through it and
   the head sat on the window edge. The page background and padding, as on Commissions. */
html.pie-premium .pp-shell .new-profile-page #full-screen-profile.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 1040;
    height: 100%;
    margin: 0 !important;
    padding: 0 32px 32px !important;
    background: var(--pp-bg) !important;
    overflow: auto;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell .new-profile-page #full-screen-profile.toggle-full-screen {
        padding: 0 16px 24px !important;
    }
}

/* ==========================================================================
   View Supplier / View Institution popup (ViewSuppliers.vue, #viewSupplierInfo) — PLAN-7445.
   Classic: a full-screen white sheet with the gradient banner. New look: the design's big popup
   (as the Individual profile popup above): centred 22px dialog, title row with the DK / VAT / TIN
   numbers as quiet figures, a summary card instead of the banner, grey section cards, small
   labels over bold values, pill Cancel. The GTC variant (ViewSuppliersNew, .profile-modal-new)
   is left alone.
   ========================================================================== */
html.pie-premium .pp-shell .newInstitution-modal#viewSupplierInfo {
    background: rgba(20, 20, 26, .45);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-dialog.modal-fullscreen {
    width: min(1180px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: min(820px, calc(100vh - 48px));
    margin: max(24px, calc((100vh - 820px) / 2)) auto;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
    overflow: hidden;
}

/* Header: eyebrow + title on the left, the three numbers as small figures, close on the right */
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header {
    flex: none;
    align-items: center;
    gap: 12px;
    max-width: none;
    margin: 0;
    padding: 14px 16px 14px 22px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    border-radius: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header > .row {
    flex: 1;
    align-items: center;
    margin: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header > .row > div {
    padding: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .modal-title {
    margin: 0;
    color: var(--pp-ink);
    font: 19px/1.2 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .modal-title::before {
    content: "Profiles";
    display: block;
    margin-bottom: 2px;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 > .row {
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 > .row > div {
    flex: 0 1 auto;
    width: auto;
    min-width: 120px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 label {
    margin: 0 !important;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 br {
    display: none;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 p {
    min-height: 18px;
    margin: 0;
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 p:empty::after {
    content: "—";
    color: var(--pp-muted);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-body {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 18px 22px;
    background: var(--pp-panel);
    overflow-y: auto;
}

/* Summary card instead of the gradient banner: avatar, created by / date / source */
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 0;
    margin: 0 0 12px !important;
    padding: 16px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover > img {
    display: none;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover .edit-profile-header {
    position: static;
    flex: none;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover .profile-pic-wrapper {
    position: static;
    width: 64px;
    height: 64px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
    transform: none;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover .profile-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: var(--pp-ink-3);
    font-size: 30px;
    object-fit: cover;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover .created-date {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    text-align: left;
    text-shadow: none;
}

/* Section cards (Basic Info and every accordion section) */
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels {
    margin: 0 !important;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .section-boxes:has(> .section-head),
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-item {
    margin: 0 0 12px !important;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .section-boxes:not(:has(> .section-head)) {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .section-head {
    margin: 0 0 12px;
    padding: 0;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .section-body,
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-body {
    padding: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-body {
    padding-top: 12px;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-header {
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-button::after {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
    opacity: .6;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels hr {
    margin: 14px 0;
    border-color: var(--pp-line);
    opacity: 1;
}

/* Read-only fields: small muted label over the value; an empty value shows a dash */
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .form-group {
    margin-bottom: 12px;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels :is(.ffl-label, span.label) {
    position: static;
    display: block;
    margin: 0 0 4px;
    padding: 0;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
    transform: none;
    opacity: 1;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels span.label .small-text {
    color: var(--pp-muted);
    font: 11.5px var(--pp-sans);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .form-label {
    min-height: 20px;
    margin: 0;
    color: var(--pp-ink);
    font: 14px/1.45 var(--pp-bold) !important;
    word-break: break-word;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .form-label:empty::after {
    content: "—";
    color: var(--pp-muted);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .line-item-wrapper {
    position: relative;
    margin-bottom: 10px;
    padding: 12px 14px 0;
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .accordion-panels .accordion-body p.text-left {
    margin: 0;
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

/* Footer: one pill Cancel on the right */
/* !important: template1.css centres every .modal-footer, removes its border and (on phones) makes it a block, all with !important */
html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-footer {
    display: flex !important;
    flex: none;
    justify-content: flex-end !important;
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line) !important;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-footer .btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

/* Phones / narrow tablets: full screen, the header numbers wrap under the title */
@media (max-width: 768px) {
    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-dialog.modal-fullscreen {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        margin: 0;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-content {
        border-radius: 0;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header {
        align-items: flex-start;
        padding: 12px 12px 12px 16px;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header > .row {
        gap: 10px;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 > .row {
        justify-content: flex-start;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-header .col-md-9 > .row > div {
        flex: 1 1 0;
        min-width: 0;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .modal-body {
        padding: 14px 16px;
    }

    html.pie-premium .pp-shell #viewSupplierInfo.newInstitution-modal .planner_page_cover {
        align-items: flex-start;
    }
}

/* ==========================================================================
   Add / Edit Supplier and Institution popup (CreateInstitutions.vue, #newInstitution) — PLAN-7445.
   Same big-popup language as the Individual profile popup: centred 22px dialog, title row with
   the VAT / TIN / DK / Interface ID fields at 44px, a summary card instead of the gradient banner,
   grey section cards, 48px white fields, pill Cancel / Bordeaux Save.
   ========================================================================== */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-content {
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
    overflow: hidden !important;
}

/* Header: eyebrow + title, the four number fields, close */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header {
    flex: none;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px 14px 22px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    border-radius: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header > .row {
    align-items: center;
    margin: 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header > .row > * {
    margin-bottom: 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .modal-title {
    margin: 0;
    color: var(--pp-ink);
    font: 19px/1.2 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .modal-title::before {
    content: "Profiles";
    display: block;
    margin-bottom: 2px;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .form-floating > .form-control {
    height: 44px;
    min-height: 44px;
    padding-top: 1.1rem;
    padding-bottom: .2rem;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .form-floating > label {
    padding-top: .7rem;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .btn-secondary {
    height: 36px;
    border: 0;
    border-radius: 999px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-body {
    margin: 0;
    padding: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .profile-information {
    padding: 18px 22px;
}

/* Summary card instead of the gradient banner: avatar (+ name and Supplier / Activity tabs when
   editing), created by / date / ID / source */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-height: 0;
    margin: 0 0 12px !important;
    padding: 16px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover > img {
    display: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .edit_individual_wrapper {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .edit-profile-header {
    position: static;
    flex: none;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .profile-pic-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
    transform: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .profile-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: var(--pp-ink-3);
    font-size: 30px;
    object-fit: cover;
}

/* Edit Profile Avatar pencil: a small round button on the avatar's corner */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .profile-pic-wrapper > .pie-icon-thin-0002_write_pencil_new_edit {
    position: absolute;
    top: auto;
    right: -4px;
    bottom: -4px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    transform: none;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 1px 4px rgba(20, 20, 26, .18);
    color: var(--pp-ink-2);
    font-size: 12px;
    cursor: pointer;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .profile-name {
    position: static;
    margin: 0 !important;
    color: var(--pp-ink);
    font: 17px var(--pp-bold);
    text-align: left;
    transform: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover ul.nav.profile-name {
    justify-content: flex-start !important;
    gap: 6px;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover ul.nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px !important;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .created-date {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 0 auto;
    padding: 0;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    text-align: left;
    text-shadow: none;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .created-date img {
    filter: invert(1) brightness(.35);
}

/* Section cards: Search For Supplier, Add Manual Supplier and every accordion section */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .accordion-panels {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels :is(.institution-information, .accordion-item) {
    margin: 0 0 12px !important;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .section-head {
    margin: 0 0 12px;
    padding: 0;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .section-body {
    padding: 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .accordion-header {
    margin: 0;
    padding: 0;
    border-radius: 10px;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .accordion-header:hover {
    background: transparent;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .accordion-button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .accordion-button::after {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
    opacity: .6;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .accordion-body {
    padding: 12px 0 0;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels hr {
    margin: 14px 0;
    border-color: var(--pp-line);
    opacity: 1;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels span.label {
    color: var(--pp-ink-2);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels span.label .small-text {
    color: var(--pp-muted);
    font: 11.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .add-link {
    color: var(--pp-acc);
    font: 13.5px var(--pp-bold);
}

/* Preferences "+ View more" / "- View less": accent, not the classic magenta template1.css forces */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .profile_preference .view-more-pref {
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold);
}

/* Fields: 48px, radius 10, white on the grey card, accent focus ring */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .form-floating .form-control:not(textarea) {
    height: 48px;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .form-control,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .form-select,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select > .dropdown-toggle,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .v-select .vs__dropdown-toggle,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .multiselect .multiselect__tags {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    box-shadow: none;
    color: var(--pp-ink) !important;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .form-control:focus,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .form-select:focus,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select > .dropdown-toggle.show,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

/* bootstrap-select pickers (Advisor, Select Type): the wrapper carries .form-control, so the field
   border is drawn once on it, not again on the button inside */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select.form-control > .dropdown-toggle {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select.form-control:has(> .dropdown-toggle.show) {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .form-control.invalid {
    border-color: #d93025 !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating > label {
    color: var(--pp-muted);
    font-family: var(--pp-bold);
    font-size: 11.5px !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select > .dropdown-toggle,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .form-floating .bootstrap-select .filter-option-inner-inner {
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .ck.ck-editor__top .ck-toolbar {
    border-color: var(--pp-line-2);
    border-radius: 10px 10px 0 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .individual-panels .ck.ck-editor__main > .ck-editor__editable {
    border-color: var(--pp-line-2);
    border-radius: 0 0 10px 10px;
}

/* Footer: Sabre sync on the left, pill Cancel / Bordeaux Save on the right.
   !important: template1.css centres every .modal-footer and removes its border with !important */
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer {
    flex: none;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line) !important;
    border-radius: 0;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer > div:last-child {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: 8px;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .custom-checkbox {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .custom-checkbox label {
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal :is(.modal-footer, .individual-panels) .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .individual-cancel-delete {
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .individual-cancel-delete:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .individual-save,
html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer .individual-save:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
    color: #fff !important;
}

/* Desktop size: the design's big popup (1180 × 820), centred */
@media (min-width: 769px) {
    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-dialog.modal-custom {
        width: min(1180px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        height: min(820px, calc(100vh - 48px));
        max-height: calc(100vh - 48px);
        margin: max(24px, calc((100vh - 820px) / 2)) auto;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-content {
        height: 100%;
        max-height: 100%;
    }
}

/* Phones / narrow tablets: full-screen popup; the header fields wrap in two columns under the title */
@media (max-width: 768px) {
    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-dialog.modal-custom {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header {
        align-items: flex-start;
        padding: 12px 12px 12px 16px;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header .modal-title {
        width: 100%;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .add-institution-header > .row > .form-group {
        width: 50%;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .profile-information {
        padding: 14px 16px;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .planner_page_cover .created-date {
        margin-left: 0;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer {
        flex-wrap: wrap !important;
        padding: 12px 16px;
    }

    html.pie-premium .pp-shell #newInstitution.newInstitution-modal .modal-footer > div:last-child {
        margin-left: auto;
    }
}

/* Tasks column (IndividualsListNew.vue taskCellHtml): overdue is marked .color-red, which classic
   template1.css paints magenta (#A20090) app-wide. Show overdue in the new look's red instead —
   the count in the cell and the "Due · Overdue" dates in its hover popover. The popover is
   appended to <body>, outside .pp-shell, so it is scoped by its own task-popover markup. */
html.pie-premium .pp-shell .new-profile-page a.action-pop.color-red[data-type="profile_task"],
html.pie-premium body > .popover .profile_trip_popup ul li.color-red {
    color: #b4232c !important;
}

/* Credit cards: View Card / Direct Payment carried the classic inline magenta (#A20090) on a grey
   box. They are the design's small outlined pill in the accent; "Added to Stripe" keeps its green. */
html.pie-premium .pp-shell #newIndividualModal .card-listing .view-card > .show-credit-card-details {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell #newIndividualModal .card-listing .view-card > .show-credit-card-details[data-token] {
    color: var(--pp-acc) !important;
    transition: background-color .15s, border-color .15s;
}

html.pie-premium .pp-shell #newIndividualModal .card-listing .view-card > .show-credit-card-details[data-token]:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
}

/* Automated Messages (Birthday, Passport expiration, Flight updates, Opt out of marketing): the
   classic green checkbox-lg on/off switches become the accent switch used for "Display Sabre
   fields" and in the planner popups. Each row: the label on the left, its switch on the right. */
html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .form-group:has(> .on-off-switch) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .form-group:has(> .on-off-switch):last-child {
    border-bottom: 0;
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .form-group > .label {
    margin: 0;
    color: var(--pp-ink-2);
    font: 13.5px/20px var(--pp-sans);
}

/* margin-left: auto, not space-between: the form-group's clearfix ::after is a flex item too */
html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch {
    flex: none;
    float: none;
    margin: 0 0 0 auto;
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input + label {
    display: block;
    width: 34px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input + label::before,
html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch:hover input + label::before {
    top: 0;
    left: 0;
    width: 34px;
    height: 20px;
    border: 0 !important;
    border-radius: 10px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input + label::after,
html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input + label:hover::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input:checked + label::before,
html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch:hover input:checked + label::before {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch input:checked + label::after {
    left: 17px;
    background: #fff;
}

html.pie-premium .pp-shell #newIndividualModal #automatedMessagesDiv .checkbox-toggle.on-off-switch :is(.left-off, .right-on) {
    display: none;
}

/* Profile popup (CreateInstitutions.vue: Corporate, Groups, Agencies, Institutions, Suppliers) — the
   Timezone field lined up with the fields beside it. Its classic fix (PLAN-5881, scoped in the
   component) gives it Bootstrap's 58px floating height and a faded label; in the new look the
   other fields are 50px, so it stood taller than its row with its value lower. */
html.pie-premium .pp-shell .newInstitution-modal .form-floating.timezone-field .vs__dropdown-toggle {
    height: 50px;
    min-height: 50px;
}

html.pie-premium .pp-shell .newInstitution-modal .form-floating.timezone-field > label.ffl-label {
    opacity: 1;
}

html.pie-premium .pp-shell .newInstitution-modal .form-floating.timezone-field :is(.vs__selected, .vs__search) {
    margin-top: 6px;
}

/* Import Profile / Import Travelers drawer (CsvUpload.vue #csv-upload): the design's side drawer
   (app.css .drawer) — floating 10px off the window edges, rounded card, divided header, soft
   upload card, sample files as chips, pill buttons. Not under .pp-shell: the Trip travelers
   import opens the same drawer, and below 915px the classic mobile shell takes over. */
html.pie-premium #csv-upload.modal {
    background: rgba(10, 10, 14, .36);
    backdrop-filter: blur(2px);
}

html.pie-premium #csv-upload .modal-dialog.csv-upload-drawer {
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(1100px, calc(100vw - 20px));
    height: auto;
    transform: translateX(calc(100% + 20px));
    transition: transform .22s ease;
}

html.pie-premium #csv-upload.show .modal-dialog.csv-upload-drawer {
    transform: translateX(0);
}

html.pie-premium #csv-upload .csv-upload-drawer .modal-content {
    overflow: hidden;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
}

html.pie-premium #csv-upload .modal-header {
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium #csv-upload .modal-title {
    margin: 0;
    color: var(--pp-ink);
    font: 18px/1.3 var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium #csv-upload .modal-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium #csv-upload .modal-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium #csv-upload .modal-body {
    padding: 20px 22px 22px;
    color: var(--pp-ink-2);
    font: 13.5px/1.5 var(--pp-sans);
}

/* Profile Type / Institution: 48px field, 10px radius, 11.5px label (popup recipe) */
html.pie-premium #csv-upload .modal-body .trip-import {
    width: 280px;
    max-width: 100%;
    margin-bottom: 16px !important;
    padding: 0;
}

html.pie-premium #csv-upload .modal-body .form-floating .vs__dropdown-toggle {
    min-height: 52px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background: var(--pp-panel);
    box-shadow: none !important;
}

html.pie-premium #csv-upload .modal-body .form-floating .vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium #csv-upload .modal-body .form-floating :is(.vs__selected, .vs__search) {
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium #csv-upload .modal-body .ffl-label {
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
}

html.pie-premium #csv-upload .modal-body .ffl-label .color-red {
    color: var(--pp-acc) !important;
}

/* Upload card: file picker, sample files, notes */
html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px dashed var(--pp-line-2);
    border-radius: 14px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
}

/* The second .csv-import-file only holds the "invalid file" message */
html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file:not(:has(> *)) {
    display: none;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file:has(> .invalid-feedback) {
    padding: 0;
    border: 0;
    background: transparent;
}

/* File picker as one white field: soft accent "Choose file" pill inside, file name beside it */
html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file input[type=file] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 14px;
    padding: 6px;
    border: 1px solid var(--pp-line-2) !important; /* beats classic .import-btn border: 0 !important */
    border-radius: 12px;
    background: #fff !important; /* beats classic .import-btn #f7f7f7 !important */
    box-shadow: 0 1px 2px rgba(30, 38, 32, .04);
    color: var(--pp-muted);
    font: 13.5px/36px var(--pp-sans);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file input[type=file]:hover {
    border-color: var(--pp-acc-line) !important;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file input[type=file]:focus-visible {
    border-color: var(--pp-acc) !important;
    outline: 0;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file input[type=file]::file-selector-button {
    height: 36px;
    margin: 0 12px 0 0; /* Bootstrap .form-control::file-selector-button pulls it onto the edge with negative margins */
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--pp-acc-soft);
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
    cursor: pointer;
    transition: background .15s;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file input[type=file]::file-selector-button:hover {
    background: color-mix(in srgb, var(--pp-acc) 16%, #fff);
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file .small_text {
    color: var(--pp-ink-3);
    font: 13px/1.55 var(--pp-sans) !important;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > span.small_text {
    display: block;
    line-height: 2.2 !important;
}

/* Sample file links as chips */
html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > span.small_text > a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > span.small_text > a:hover {
    background: var(--pp-acc-soft);
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > p.small_text {
    margin-top: 12px !important;
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > p.small_text a {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium #csv-upload .vue-csv-uploader .csv-import-file > p.small_text.bold {
    color: var(--pp-ink);
    font-family: var(--pp-bold) !important;
}

/* Buttons: Next / Preview done = primary pill, Preview = secondary pill */
html.pie-premium #csv-upload .modal-body .btn.btn-primary {
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium #csv-upload .modal-body .btn.btn-primary:is(:hover, :focus, :active) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000);
    color: #fff;
}

html.pie-premium #csv-upload .modal-body .btn.btn-primary.me-3 {
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
}

html.pie-premium #csv-upload .modal-body .btn.btn-primary.me-3:is(:hover, :focus, :active) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

/* Column mapping step: list-card table */
html.pie-premium #csv-upload .vue-csv-mapping > table {
    overflow: hidden;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--pp-line);
}

/* The thead slot passes a bare <tr> (inline #ddd), which the browser puts in <tbody> */
html.pie-premium #csv-upload .vue-csv-mapping > table tr:has(> th) {
    border: 0 !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium #csv-upload .vue-csv-mapping > table th {
    padding: 12px 14px;
    background: var(--pp-panel-2) !important;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium #csv-upload .vue-csv-mapping > table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium #csv-upload .vue-csv-mapping > table tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium #csv-upload .vue-csv-mapping > table td.first-td {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

html.pie-premium #csv-upload .vue-csv-mapping .csv-upload-select {
    height: 38px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium #csv-upload .vue-csv-mapping .reset-text {
    color: var(--pp-acc);
    font: 11.5px var(--pp-bold);
    letter-spacing: .04em;
}

@media (max-width: 640px) {
    html.pie-premium #csv-upload .modal-dialog.csv-upload-drawer {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
    }

    html.pie-premium #csv-upload .csv-upload-drawer .modal-content {
        border-radius: 0;
    }

    html.pie-premium #csv-upload .modal-body {
        padding: 16px;
    }

    /* Mapping rows stack: field name, then its CSV column picker full width, then the help text */
    html.pie-premium #csv-upload .vue-csv-mapping > table :is(thead, tr:has(> th)) {
        display: none !important;
    }

    html.pie-premium #csv-upload .vue-csv-mapping > table,
    html.pie-premium #csv-upload .vue-csv-mapping > table tbody,
    html.pie-premium #csv-upload .vue-csv-mapping > table tr {
        display: block;
        width: 100%;
    }

    html.pie-premium #csv-upload .vue-csv-mapping > table tr {
        padding: 10px 14px;
        border-bottom: 1px solid var(--pp-line);
    }

    html.pie-premium #csv-upload .vue-csv-mapping > table tbody tr:last-child {
        border-bottom: 0;
    }

    html.pie-premium #csv-upload .vue-csv-mapping > table td {
        display: block;
        width: 100%;
        padding: 3px 0;
        border-bottom: 0;
    }

    html.pie-premium #csv-upload .vue-csv-mapping > table td:last-child {
        color: var(--pp-ink-3);
        font-size: 12.5px;
    }

    html.pie-premium #csv-upload .vue-csv-mapping .csv-upload-select {
        width: 100%;
    }

    html.pie-premium #csv-upload .vue-csv-mapping :is(.csv-upload-select, .reset-text) {
        display: block;
        float: none !important;
    }

    html.pie-premium #csv-upload .vue-csv-mapping .reset-text {
        margin-top: 4px;
    }
}