/* New look (html.pie-premium) — commissions 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> */

/* ==========================================================================
   Commissions (sections.js "Commissions"): Tracked, Received, Unclaimed, Claim Requests,
   Commission Statement, Payroll, Commission Paid to Advisors. Every page is a
   .commission-master-page > .container-fluid > .bg-white-block (TrackedCommissions.vue,
   received_commission_payments.vue, UnclaimedBookings.vue, ClaimRequests.vue,
   commission_statement_list.vue, payroll/index.vue, received_advisor_payments.vue)
   ========================================================================== */
html.pie-premium .pp-shell .commission-master-page {
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
    -webkit-font-smoothing: antialiased;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid {
    padding: 0 32px 32px;
}

/* No outer card: head and filters sit on the page, only the table is a card */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > *,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .btn-primary) > *,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .row > .col-md-12 > a.btn-primary) > * {
    order: 2;
    flex: 0 0 100%;
    min-width: 0;
}

/* Full screen (fullScreenSection adds .toggle-full-screen): the page background, same layout */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 999;
    height: 100%;
    align-content: flex-start;
    padding: 0 32px 32px;
    background: var(--pp-bg);
    overflow: auto;
}

html.pie-premium .pp-shell .commission-master-page .color-bg-white.box-typical-full-height {
    min-height: 0;
    background: transparent;
}

/* ---------- Page head: eyebrow, title, subtitle, actions on the right ---------- */
/* margin: h4 carries .mb-3 / .mb-0 (!important) */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 {
    order: 0;
    flex: 1 1 380px;
    margin: 0 !important;
    padding: 18px 160px 22px 0;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4::before {
    content: "Commissions";
    display: block;
    margin: 0 0 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4::after {
    display: block;
    margin: 4px 0 0;
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
    letter-spacing: 0;
}

/* Subtitles from the design (Payroll has its own line under the title) */
html.pie-premium .pp-shell .commission-master-page #received_commission_payment_list:not(:has(> div > .btn-primary)) > h4::after {
    content: "Commission each supplier still owes";
}

html.pie-premium .pp-shell .commission-master-page #received_commission_payment_list:has(> div > .btn-primary) > h4::after {
    content: "Supplier payments and their reconciliation";
}

html.pie-premium .pp-shell .commission-master-page #unclaimed_booking_list > h4::after {
    content: "Commissions received with no advisor yet";
}

html.pie-premium .pp-shell .commission-master-page #claimed_booking_list > h4::after {
    content: "Advisors asking to claim a commission";
}

html.pie-premium .pp-shell .commission-master-page #commission_statement_list > h4::after {
    content: "Weekly statements by advisor";
}

html.pie-premium .pp-shell .commission-master-page #received_advisor_payments > h4::after {
    content: "Payouts sent to advisors";
}

html.pie-premium .pp-shell .commission-master-page #payrollList > h4 {
    padding-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page #payrollList > .small-text {
    order: 1;
    margin: 4px 0 22px !important; /* .mb-3 */
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
}

/* Full screen and Export: the design's head buttons (right, level with the subtitle) */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share) {
    position: absolute;
    top: 62px;
    right: 0;
    height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share):hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .full-screen {
    width: 40px;
    padding: 0;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen > h4 > :is(.full-screen, .pie-icon-share) {
    right: 32px;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block.toggle-full-screen > h4 > .pie-icon-share {
    right: 80px;
}

/* .pe-1 keeps 4px on the right (!important), so the label's margin makes up the 18px */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share {
    right: 48px;
    padding-left: 18px;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > :is(.full-screen, .pie-icon-share)::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pp-i-expand) center / contain no-repeat;
    mask: var(--pp-i-expand) center / contain no-repeat;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share::before {
    -webkit-mask-image: var(--pp-i-down);
    mask-image: var(--pp-i-down);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > h4 > .pie-icon-share::after {
    content: "Export";
    margin-right: 14px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

/* Page actions (Send reminder / Add payment): lifted out of their wrappers into the head row */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div:has(> .row > .col-md-12 > a.btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row:has(> .col-md-12 > a.btn-primary),
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12:has(> a.btn-primary) {
    display: contents;
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary,
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary {
    order: 1;
    flex: none;
    height: 40px;
    margin: 0 48px 22px auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px !important;
    border: 0;
    border-radius: 999px;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0;
    text-transform: none !important; /* common.css .btn: capitalize !important */
    white-space: nowrap;
}

/* Secondary: Send commissions reminder to suppliers (mail icon). pie-premium.css paints every
   .btn-primary Bordeaux with !important, so the white needs it too */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary {
    background: #fff !important;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .row > .col-md-12 > a.btn-primary::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pp-i-mail) center / contain no-repeat;
    mask: var(--pp-i-mail) center / contain no-repeat;
}

/* Primary: + Add Commission Payment Received */
html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell .commission-master-page > .container-fluid > .bg-white-block > div > .btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
}

/* ---------- Filters: the design's field grid (label above the value) ---------- */
html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:not(.modal *):has(> [class*="col-"] > .form-floating) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
}

html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:not(.modal *):has(> [class*="col-"] > .form-floating) > * {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

/* Empty Bootstrap rows pull the next block up with their negative margins */
html.pie-premium .pp-shell .commission-master-page .bg-white-block .row.g-2:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 51px;
    margin: 0;
    padding: 7px 12px 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating:focus-within {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* Received: Commission payouts sits in a second .form-floating inside the first */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating > .form-floating {
    display: contents;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .ffl-label {
    position: static;
    order: -1;
    width: auto;
    height: auto;
    margin: 0 0 1px;
    padding: 0;
    border: 0;
    transform: none;
    opacity: 1;
    color: var(--pp-muted) !important;
    font: 11.5px/12px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Inner controls drop their own boxes: the field is the box */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating :is(.vdp-datepicker, .multiselect, .v-select, .bootstrap-select, .vue-daterange-picker) {
    position: relative;
    width: 100% !important;
    height: auto !important; /* bootstrap-select is fixed at 42px */
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating :is(input.form-control, .multiselect__tags, .vs__dropdown-toggle, .dropdown-toggle, .reportrange-text) {
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating input.form-control::placeholder,
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .vs__search::placeholder {
    color: var(--pp-muted);
}

/* Plain text inputs keep Bootstrap's hidden placeholder (it reads "Payment id" under "Confirmation id") */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating > input.form-control::placeholder {
    color: transparent;
}

/* Calendar icon: the design's thin calendar on the right */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating > i.icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
    padding: 0;
    background: var(--pp-ink-2);
    -webkit-mask: var(--pp-i-cal) center / contain no-repeat;
    mask: var(--pp-i-cal) center / contain no-repeat;
    pointer-events: none;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating > i.icon::before {
    content: none;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating:has(> i.icon) .vdp-datepicker input.form-control {
    padding-right: 24px !important;
}

/* vue-multiselect (Search Supplier) */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 22px !important;
    padding-right: 24px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating :is(.multiselect__placeholder, .multiselect__single, .multiselect__input) {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tag {
    margin: 0 4px 2px 0;
    padding: 2px 22px 2px 8px;
    border-radius: 6px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 12px/16px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tag-icon::after {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tag-icon:hover {
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__select {
    top: 50%;
    right: -6px;
    width: 24px;
    height: 22px;
    margin-top: -11px;
    padding: 0;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__content-wrapper {
    border-color: var(--pp-line);
    border-radius: 0 0 10px 10px;
    font-family: var(--pp-sans);
}

/* vue-select (Claimed By, Commission payouts, Select Payroll) */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .vs__dropdown-toggle {
    height: auto !important;
    min-height: 22px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating :is(.vs__selected-options, .vs__selected, .vs__search, .vs__search:focus) {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .vs__actions {
    padding: 0 0 0 4px;
}

/* bootstrap-select (Select Advisor) */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .filter-option,
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .filter-option-inner {
    padding: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .filter-option-inner-inner {
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    letter-spacing: 0;
}

/* Date range: the dates, then the calendar on the right */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .reportrange-text {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100% !important;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .reportrange-text > span {
    flex: 1;
    min-width: 0;
    order: 0;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .reportrange-text > .fa-calendar {
    order: 1;
    float: none;
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--pp-ink-2);
    -webkit-mask: var(--pp-i-cal) center / contain no-repeat;
    mask: var(--pp-i-cal) center / contain no-repeat;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .reportrange-text > .fa-calendar::before,
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .reportrange-text > .caret {
    display: none;
}

/* Payroll: Mark as Paid (n), shown while rows are ticked */
html.pie-premium .pp-shell .commission-master-page #payrollList .delete-profiles-hide .reservation-customisation-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page #payrollList .delete-profiles-hide .reservation-customisation-button:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

/* Received: the reports note under the filters */
html.pie-premium .pp-shell .commission-master-page .bg-white-block p.fs-14 {
    margin: 0 0 14px;
    color: var(--pp-ink-3);
    font: 12.5px/1.5 var(--pp-sans) !important;
}

/* ---------- Table card (vue-good-table) ---------- */
html.pie-premium .pp-shell .commission-master-page .table-condensed {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell .commission-master-page .vgt-inner-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table {
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable {
    padding-right: 28px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th:is(.sorting-asc, .sorting-desc) {
    color: var(--pp-acc);
}

/* Sort arrows only on hover */
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable button {
    opacity: 0;
    transition: opacity .12s;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable:hover button,
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead th.sortable button:focus-visible {
    opacity: 1;
}

/* Column search row: hidden unless one of its fields holds text */
html.pie-premium .pp-shell .commission-master-page table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td,
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody th.line-numbers {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    white-space: nowrap;
    vertical-align: middle;
}

/* The slot's wrapper divs carry 4px top padding each (classic), which pushed the text 8px low */
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td > div,
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td > div > div {
    padding-top: 0;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table :is(thead, tbody) th.line-numbers {
    width: 1%;
    padding-right: 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
    -webkit-text-stroke: 0;
    text-align: left;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody tr:last-child > :is(td, th) {
    border-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table.striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody tr:hover > :is(td, th) {
    background: var(--pp-hover);
}

/* Empty and loading states */
html.pie-premium .pp-shell .commission-master-page table.vgt-table tbody td.vgt-text-disabled {
    height: 96px;
    color: var(--pp-muted);
    font-size: 13.5px;
    text-align: center;
}

html.pie-premium .pp-shell .commission-master-page .vgt-loading__content {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
}

/* Footer: rows per page + page info, quiet */
html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__row-count {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell .commission-master-page .footer__row-count__label {
    margin: 0 8px 0 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .footer__row-count__select {
    height: 30px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--pp-line);
    border-radius: 8px;
    background-color: var(--pp-panel);
    color: var(--pp-ink);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .footer__navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

html.pie-premium .pp-shell .commission-master-page .footer__navigation__page-info {
    margin-right: 8px;
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .footer__navigation__page-btn.disabled {
    color: var(--pp-line-2);
}

html.pie-premium .pp-shell .commission-master-page .vgt-wrap__footer .chevron {
    transform: scale(.7);
}

/* ---------- Cells: status pills and row actions (app.css .pill / .lnk) ---------- */
/* Clickable action (Reconcile, Claim, Pay, View, PDF…): accent link */
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--pp-acc) !important;
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn.cursor-pointer:hover,
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn[class*="claim-"]:hover,
html.pie-premium .pp-shell .commission-master-page table.vgt-table .reconcile-commission-payment:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn + .action-btn {
    margin-left: 10px;
}

/* Status: soft pill with a dot */
html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid, .bg-orange, .btn-warning, .btn-danger, .action-btn-blocked) {
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    font: 12px var(--pp-bold);
    text-decoration: none;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid, .bg-orange, .btn-warning, .btn-danger, .action-btn-blocked)::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-green, .btn-success, .action-btn-paid) {
    background: #e7f5ee !important;
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.bg-orange, .btn-warning) {
    background: #fdf3e1 !important;
    color: #9a5b00 !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table .action-btn:is(.btn-danger, .action-btn-blocked) {
    background: #fdecec !important;
    color: #c0262d !important;
}

/* Row icons (edit, delete): plain grey, accent on hover */
html.pie-premium .pp-shell .commission-master-page table.vgt-table td :is(.pie-icon-thin-0002_write_pencil_new_edit, .pie-icon-thin-0056_bin_trash_recycle_delete_garbage_empty) {
    color: var(--pp-ink-3);
    font-size: 16px;
    cursor: pointer;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table td :is(.pie-icon-thin-0002_write_pencil_new_edit, .pie-icon-thin-0056_bin_trash_recycle_delete_garbage_empty):hover {
    color: var(--pp-acc);
}

/* ==========================================================================
   Unclaimed Commissions (commission/UnclaimedCommissions.vue, .ucl-page): its own head,
   filters and plain table, given the same head, fields and card as the pages above
   ========================================================================== */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head {
    margin: 0;
    padding: 18px 0 22px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head h4 {
    margin: 0 !important;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__head h4::before {
    content: "Commissions";
    display: block;
    margin: 0 0 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__subtitle {
    margin: 4px 0 0;
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
}

/* Filters: search, from, to as the design's fields, Refresh as a secondary button */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filters {
    gap: 10px;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filter {
    min-width: 190px;
    max-width: none;
    flex: 0 1 220px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__filter:first-child {
    max-width: none;
    flex: 1 1 320px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control {
    height: 51px;
    padding: 0 12px !important; /* a classic datepicker rule pads the date inputs 12px 12px 0 */
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__search input.form-control {
    background: var(--pp-panel);
    border-color: var(--pp-line);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filter, .ucl__search) input.form-control:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filters, .ucl__pager) .btn-outline-secondary {
    flex: none;
    height: 40px;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page :is(.ucl__filters, .ucl__pager) .btn-outline-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager .btn-outline-secondary {
    height: 32px;
    padding: 0 14px;
    font-size: 12.5px;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager .btn-outline-secondary:disabled {
    opacity: 1;
    color: var(--pp-line-2);
    box-shadow: none;
}

/* Empty / loading: a quiet card */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__empty {
    margin: 0;
    padding: 36px 16px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

/* Table card */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table th {
    padding: 13px 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row td {
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-2);
    vertical-align: middle;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__table tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row:hover td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__amt {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Confirmation # (the class is on the td): the design's code text */
html.pie-premium .pp-shell .commission-master-page .ucl-page td.ucl__mono {
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    letter-spacing: .03em;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__muted {
    color: var(--pp-muted);
    font-size: 12px;
}

/* Link to reservation / Close: accent link (the scoped hover fills it with !important) */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary,
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary:is(:hover, :focus, :active) {
    min-width: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--pp-acc) !important;
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__row .btn-outline-primary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Reservation search under a row */
html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__searchrow td {
    padding: 14px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__search-head {
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__cand {
    padding: 10px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__cand .btn-primary {
    flex: none;
    height: 32px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .pp-shell .commission-master-page .ucl-page .ucl__pager {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* ==========================================================================
   QA fixes PLAN-7432 (Commissions → Tracked / Received / Commission Statements)
   ========================================================================== */

/* Search Supplier: the field grows with its chips (the shared 22px rule above out-ranked the
   multiselect one, so the chips spilled under the field), and each chip stays inside the box */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect .multiselect__tags:not(#_) {
    height: auto !important;
    min-height: 22px !important;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__tag {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page .bg-white-block .row:has(> [class*="col-"] > .form-floating .multiselect__tag) {
    align-items: start;
}

/* Its open list: as wide as the field, inside it */
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__content-wrapper {
    left: -12px;
    width: calc(100% + 24px);
    margin-top: 8px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__option {
    min-height: 0;
    padding: 9px 12px;
    color: var(--pp-ink-2);
    font: 13px/1.35 var(--pp-sans);
    white-space: normal;
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__option--highlight {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__option--selected,
html.pie-premium .pp-shell .commission-master-page .row > [class*="col-"] > .form-floating .multiselect__option--selected.multiselect__option--highlight {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

/* ---------- Pop-ups opened from these pages (Add Commission Payment, Reconcile, Add Unclaimed
   Reservation, Bonus, Amount Received) render inside .commission-master-page, so the filter
   fields above (translucent box, no border) reached them too and the fields lost their
   outline on the white pop-up. In a pop-up the field is the design's .qf: white, 1px line,
   10px radius, accent ring on focus. ---------- */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating {
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating:focus-within {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* A field the user can't change (Payee / Recipient filled in by the system) reads as such */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating:has(> input.form-control:disabled) {
    background: var(--pp-panel-2);
}

/* Received through: its empty-state text was the muted placeholder, lighter than every other
   field's value */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating .vs__search::placeholder,
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating .vs__placeholder {
    color: var(--pp-ink-2);
    opacity: 1;
}

/* Calendars open over the pop-up's footer and edge (the Cancel / Save row sat on top) */
html.pie-premium .pp-shell .commission-master-page .modal .form-floating:has(.vdp-datepicker__calendar[style*="display: block"]),
html.pie-premium .pp-shell .commission-master-page .modal .form-floating:has(.vdp-datepicker__calendar:not([style*="display: none"])) {
    z-index: 30;
}

html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar {
    z-index: 1070 !important;
}

/* Remark: the textarea is the field (it had its own box inside the field's box) */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating > textarea.form-control {
    min-height: 56px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px/1.45 var(--pp-sans);
    resize: vertical;
}

/* Date clear (×): beside the calendar icon, not under the field */
html.pie-premium .pp-shell .commission-master-page .modal .form-floating .vdp-datepicker__clear-button {
    position: absolute;
    top: 50%;
    right: 26px;
    margin: 0;
    padding: 0 4px;
    transform: translateY(-50%);
    color: var(--pp-muted);
    font-size: 15px;
    line-height: 1;
}

/* Calendars in these pop-ups: dark month heading (it was the old Magenta, upper case) */
html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar header .day__month_btn,
html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar header .month__year_btn {
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell .commission-master-page .modal .vdp-datepicker__calendar .cell.day.today:not(.selected) {
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
}

/* ---------- Add Commission Payment: Upload / Hide Commission Statement and its progress bar
   (AddPaymentPopUp.vue, AIDocumentUpload.vue): the old Magenta (#A20090) outline, fill and bar
   in the new look's secondary button and Bordeaux. The id beats their scoped styles. ---------- */
html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-acc);
    box-shadow: none;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary:is(:hover, :focus-visible) {
    border-color: var(--pp-acc);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .commission-ai-upload .btn.btn-outline-primary:active {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload {
    border-color: var(--pp-line-2);
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload--dragging {
    border-color: var(--pp-acc);
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__loader {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-stage {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-pct {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-track {
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-fill {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell #add-payment-pop-up-modal .ai-doc-upload__progress-hint {
    color: var(--pp-muted);
}

/* Reconcile (CommissionPaymentReconcilationPopUp.vue): Supplier is a grey box with an <h6>
   inside the field, so it stood taller than Amount / Received Date beside it: a plain value */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating > .form-control.bg-gray {
    height: auto !important;
    min-height: 22px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating > .form-control.bg-gray > h6 {
    overflow: hidden;
    margin: 0;
    color: var(--pp-ink);
    font: 13.5px/22px var(--pp-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amount Received (BookingReconcilationWithPaymentPopUp*.vue): with Hold payout ticked the
   Payout Date box holds no date, so it says so instead of standing empty */
html.pie-premium .pp-shell .commission-master-page .modal .row > [class*="col-"] > .form-floating > input.pp-payout-on-hold::placeholder {
    color: var(--pp-ink-3) !important;
    opacity: 1;
}

/* Inline amount fields in the Reconcile tables (Received commission amount after "Add"): the
   old Magenta focus border (common.css .form-control:focus, !important) */
html.pie-premium .pp-shell .commission-master-page .modal .form-control:not(.form-floating > .form-control, .invalid, .border-red):focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
    outline: 0;
}

/* ---------- Add Unclaimed Reservation (SubmitSalePopup*.vue, #submitSalePopupModal) opened from
   Reconcile: type pills, category icons and the supplier search's "Add New" were the old
   Magenta. Scoped to this page; the Submitted Sales page styles its own copy. ---------- */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li {
    display: flex;
    float: none !important;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line);
    cursor: pointer;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li .booking-sub-category {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px/1 var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li:hover {
    box-shadow: 0 0 0 1px var(--pp-ink-3);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li:hover .booking-sub-category {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li.active {
    background: var(--pp-ink) !important;
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-sub-category-block > li.active .booking-sub-category {
    color: #fff !important;
    font-family: var(--pp-bold) !important;
}

/* Category icons: quiet grey, the accent for the open one and on hover */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-type-block > li:is(:hover, .active),
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .booking-type-block > li:is(:hover, .active)::before {
    border-color: var(--pp-acc) !important;
    color: var(--pp-acc) !important;
}

/* Service Provider Supplier search list: "Add New" and the highlighted result in the accent */
html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list > .typeahead-item > a {
    border-radius: 8px;
    color: var(--pp-ink-2) !important;
    font: 13.5px/1.35 var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list > .typeahead-item:is(.active, :hover) > a {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .commission-master-page #submitSalePopupModal .typeahead-list .suggestion-title {
    color: inherit !important;
}

/* ---------- Commission Statements: Select Advisor list (bootstrap-select) and the Date range
   calendar (vue2-daterange-picker) were the old grey "Clear" bar and Magenta picks ---------- */
html.pie-premium .pp-shell .commission-master-page .bootstrap-select > .dropdown-menu {
    margin-top: 8px !important;
    padding: 6px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
    max-width: min(420px, calc(100vw - 32px));
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-searchbox {
    padding: 2px 2px 6px;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-searchbox .form-control:not(#_) {
    height: 36px !important;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox {
    padding: 0 2px 6px;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .btn-group {
    display: flex;
    gap: 6px;
    width: 100%;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .actions-btn {
    flex: 1 1 0;
    height: 30px;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    box-shadow: none;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .bs-actionsbox .actions-btn:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-menu.inner {
    padding: 0;
    border: 0 !important;
    box-shadow: none;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-header {
    padding: 8px 10px 4px;
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item {
    position: relative;
    padding: 8px 30px 8px 10px !important;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px/1.3 var(--pp-sans);
    white-space: nowrap;
}

/* The name is cut with "…"; the tick sits outside that box */
html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item > .text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item:is(:hover, :focus, .active) {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item.selected {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item .check-mark {
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%);
}

html.pie-premium .pp-shell .commission-master-page .bootstrap-select .dropdown-item .check-mark::after {
    width: 5px !important;
    height: 9px !important;
    border-color: var(--pp-acc) !important;
    border-width: 0 2px 2px 0 !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker {
    margin-top: 8px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -16px rgba(30, 40, 32, .3);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker::before,
html.pie-premium .pp-shell .commission-master-page .daterangepicker::after {
    display: none;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li {
    margin: 2px 6px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .ranges li.active {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker :is(th.month, .monthselect, .yearselect) {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker :is(.monthselect, .yearselect) {
    border: 1px solid var(--pp-line) !important;
    border-radius: 8px;
    background-color: var(--pp-panel);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td:not(.in-range) {
    border-radius: 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.in-range {
    border-radius: 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.start-date {
    border-radius: 8px 0 0 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.end-date {
    border-radius: 0 8px 8px 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.start-date.end-date {
    border-radius: 8px;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.in-range {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-ink-2) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.off,
html.pie-premium .pp-shell .commission-master-page .daterangepicker td.off.in-range {
    background: transparent !important;
    color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td.available:not(.active):hover {
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker td:is(.active, .start-date, .end-date),
html.pie-premium .pp-shell .commission-master-page .daterangepicker td.active:hover {
    background: var(--pp-acc) !important;
    color: #fff !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .btn.btn-primary,
html.pie-premium .pp-shell .commission-master-page .daterangepicker .drp-buttons .applyBtn {
    border: 0;
    background: var(--pp-acc);
    color: #fff;
}

/* Payroll (payroll/index.vue) Action column: the status (Pay / Paid / Blocked ⓘ) and PDF were
   centred together, so PDF moved with the width of the status. Two fixed tracks instead, so
   every row's PDF lines up, and the heading starts where the actions do. */
html.pie-premium .pp-shell .commission-master-page table.vgt-table td > div > div.text-center:has(> .action-btn.record-advisor-payout) {
    display: grid;
    grid-template-columns: 112px auto;
    justify-content: start;
    justify-items: start;
    align-items: center;
    column-gap: 12px;
    text-align: left !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table td > div > div.text-center:has(> .action-btn.record-advisor-payout) > .action-btn {
    margin: 0 !important;
}

html.pie-premium .pp-shell .commission-master-page table.vgt-table:has(td div.text-center > .action-btn.record-advisor-payout) thead th:last-child {
    text-align: left !important;
}