/* New look (html.pie-premium) - Planner page fixes: cards/tabs, trip sidebar, cover, itinerary panels,
   Collaborators popup. Every selector starts with html.pie-premium. */

/* #22 / Req 10 (an open section shown on its own, the itinerary hidden) was reversed by the client
   on 2026-11-03: a section opens in a box under the tiles with a max height that scrolls inside,
   and the day by day stays below it (pie-premium.css, "Planner" .pp-tl-tabhead rules). */

/* ==========================================================================
   Req 11 — the open section's card is highlighted like Trip health (Bordeaux gradient, white text)
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) {
    background: radial-gradient(120% 140% at 0% 0%, #8c2443, #45101f 70%);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) > small,
html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) > div,
html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) > div b {
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) > div span {
    color: rgba(255, 255, 255, .78);
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) .pp-dn {
    color: #ffc9d3;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more) .pp-tl-avs .pp-av {
    box-shadow: 0 0 0 2px #6a1830;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more),
html.pie-premium .pp-shell.pp-planner .pp-tl.on:not(.pp-tl-health):not(.pp-tl-more):focus {
    box-shadow: var(--pp-shadow), 0 0 0 2px var(--pp-acc-line) !important;
}

/* ==========================================================================
   #9 — reservation card details: invoice state as a status pill (template1.css paints it
   PIE Magenta), and the Traveler(s) details box as a soft new-look table
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label {
    --pp-st: #6b6b73;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 999px;
    background: oklch(from var(--pp-st) 0.965 clamp(.02, calc(c * .45), .05) h) !important;
    color: oklch(from var(--pp-st) 0.48 clamp(.09, calc(c * 1.4), .16) h) !important;
    font: 12px var(--pp-bold);
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Not invoiced (the card's own label carries the warning icon): amber, the icon stands in for the dot */
html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label:has(> .pie-icon-thin-0061_error_warning_alert_attention) {
    --pp-st: #b7791f;
    gap: 4px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label:has(> .pie-icon-thin-0061_error_warning_alert_attention)::before {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label > .pie-icon-thin-0061_error_warning_alert_attention {
    margin: 0 !important;
    color: inherit !important;
    font-size: 13px;
}

/* Invoiced (the card's label without the warning): green */
html.pie-premium .pp-shell.pp-planner #planner_booking .booking-sub-container .invoices-label:not(:has(> i)) {
    --pp-st: #16794c;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label .color-pink,
html.pie-premium .pp-shell.pp-planner #planner_booking .invoices-label .color-pink i {
    color: inherit !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list {
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px 6px !important;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel-2) !important;
}

/* Wide tables scroll inside the box instead of widening the day card under Trip content */
html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list .table-responsive-sm {
    max-width: 100%;
    overflow-x: auto;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list .accordion-item {
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list .accordion-header > a {
    padding: 10px 0;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-bold);
    text-decoration: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list table {
    margin: 4px 0 6px !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list thead {
    border-bottom: 1px solid var(--pp-line) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list th {
    padding: 8px 4px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 12px var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list td {
    height: 44px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list .cancelled-lbl.booking-status {
    --pp-st: #c0262d;
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: oklch(from var(--pp-st) 0.965 clamp(.02, calc(c * .45), .05) h) !important;
    color: oklch(from var(--pp-st) 0.48 clamp(.09, calc(c * 1.4), .16) h) !important;
    font: 12px var(--pp-bold);
    white-space: nowrap;
}

/* ==========================================================================
   #18 — Collaborators popup (AddToCollaboratorsPopup.vue): 48px fields, pill buttons, avatar fallback
   ========================================================================== */
html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-select {
    height: 48px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b6b73'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") right 12px center / 16px 16px no-repeat;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    -webkit-appearance: none;
    appearance: none;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-select:hover:not(:disabled) {
    border-color: var(--pp-ink-3);
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-select:disabled {
    border-color: var(--pp-line);
    background-color: var(--pp-panel-2);
    color: var(--pp-ink-3);
    opacity: 1;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .role-add-btn {
    height: 30px;
    padding: 0 12px;
    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), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .role-add-btn i {
    color: var(--pp-acc);
    font-size: 11px;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .role-add-btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-btn {
    height: 40px;
    padding: 0 18px;
    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), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-btn-primary {
    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;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), #5a1128;
}

/* Disabled until something changes: a flat, clearly inactive pill instead of washed-out pink */
html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-btn:disabled {
    background: var(--pp-panel-2);
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-muted);
    opacity: 1;
}

/* Avatars: a picture that fails to load (old S3 keys) showed its alt text ("Robbie Ro…") spilling
   out of the circle. Chrome draws an <img>'s pseudo-element only when the image is broken, so a
   user icon covers the alt text and the broken-image glyph; loaded pictures are unchanged. */
html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-avatar {
    position: relative;
    overflow: hidden;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-avatar img {
    position: relative;
    display: block;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-avatar img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #addToCollaboratorsPopupModal .collab-avatar img::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 46%;
    background-color: var(--pp-acc);
    -webkit-mask: var(--pp-i-user) center / contain no-repeat;
    mask: var(--pp-i-user) center / contain no-repeat;
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   #20 — trip side bar › Reservation price overview: Chronological / Types as the segmented tabs
   ========================================================================== */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 4px 0 12px;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel-2);
    box-shadow: inset 0 0 0 1px var(--pp-line);
}

/* Transparent: common.css paints every side bar menu li white, a square block over the rounded track */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px;
    overflow: hidden;
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 11.5px/1.3 var(--pp-sans);
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
}

/* The open tab keeps its whole label; the other one gives way first if the side bar is narrow */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item:has(> a.nav-link.active) {
    flex-shrink: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link::after,
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link::before {
    display: none;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link:hover:not(.active) {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link.active {
    background: var(--pp-ink) !important;
    color: #fff !important;
    font-family: var(--pp-bold);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

/* Price list as the design's .tp-price rows: uppercase group captions, name on the left, bold
   price with the green (+profit) on one line on the right, no type icon column */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .nav-tabs li.nav-item a.nav-link {
    padding: 7px 6px;
    font-size: 12px;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive {
    overflow-x: hidden;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table {
    display: block;
    width: 100%;
    margin: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table > tbody {
    display: block;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table th {
    flex: 1 1 auto;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table :is(th, td) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table th {
    padding: 12px 2px 4px;
    color: var(--pp-muted);
    font: 10.5px/1.3 var(--pp-bold);
    font-weight: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Chronological has an empty caption row in front of the list */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table th:not(:has(*)):empty {
    padding: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td {
    padding: 5px 2px;
    color: var(--pp-ink-2);
    font: 12.5px/1.4 var(--pp-sans);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td:first-child {
    display: none;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 4px;
    max-width: 62%;
    line-height: 1.4;
    text-align: right;
    overflow-wrap: normal;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td > div {
    display: block;
    color: var(--pp-ink);
    font: 12.5px/1.4 var(--pp-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td > div.color-green {
    color: var(--pp-ok) !important;
    font-size: 11.5px;
}

/* A fee or expense row has only the coloured amount, which reads as the price in the design */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td > div.color-green:only-child {
    font-size: 12.5px;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td > div.color-red {
    color: #c0262d !important;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content .table-responsive > table td.price-td i {
    font-style: normal;
}

/* Totals: the design's .tp-tot box. Classic .color-green / .color-red are !important (template1.css) */
html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table {
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 12px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table > tbody {
    display: contents;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table tr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table td {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-ink-3);
    font: 12.5px/1.4 var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table td.text-end {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table td.text-end.color-green {
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table td.color-gray {
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .planner-left-sidebar .reservations_sections .tab-content > table.net-profit-table td.text-end.color-red {
    color: var(--pp-ink) !important;
}

/* ==========================================================================
   #23 / Req 12 — "Change cover" keeps its text at every width. pie-premium.css drops the text
   once the banner is ≤800px wide (the countdown ran under it); here the countdown moves to the
   right of the title instead (its ≤735px place), so the top row has room for the full button.
   ========================================================================== */
@media (min-width: 641px) {
    @container pp-banner (max-width: 800px) {
        html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
            display: inline;
            white-space: nowrap;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
            padding: 0 12px;
            white-space: nowrap;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner :is(h1.trip_name, h1.mb-1),
        html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
            grid-column: 1 / 3;
            min-width: 0;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
            grid-row: 2 / span 2;
            grid-column: 3 / 5;
            align-self: center;
            justify-self: end;
            margin-right: 0;
        }
    }
}

/* Large phones have the room for the text too; small phones (≤480px) keep the camera icon */
@media (min-width: 481px) and (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
        display: inline;
        white-space: nowrap;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
        padding: 0 12px;
        white-space: nowrap;
    }
}

/* Req 10 — Trip information: the sticky Update bar sat under the date fields' calendar icons
   (z-index 8), so they showed through it while the form scrolled */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .traveler-tab-details > .me-5 {
    z-index: 12;
}

/* Checklist tile: the design's done/total ring (PremiumPlannerTiles.vue sets --pp-ring, 0–100) */
html.pie-premium .pp-shell.pp-planner .pp-tl > div .pp-tl-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(var(--pp-acc) calc(var(--pp-ring, 0) * 1%), var(--pp-line) 0);
    color: var(--pp-ink);
    font: 10.5px var(--pp-bold);
    letter-spacing: -.02em;
    isolation: isolate;
}

html.pie-premium .pp-shell.pp-planner .pp-tl > div .pp-tl-ring::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: 50%;
    background: var(--pp-panel);
}

/* New reservation is the toolbar's primary action: Bordeaux, as in the design */
html.pie-premium .pp-shell.pp-planner .pp-itb-new {
    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);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new:hover,
html.pie-premium .pp-shell.pp-planner .pp-itb-new.on {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
}

/* ==========================================================================
   Trip sidebar Checklist: "Title (2 / 5)" with a muted count, and a progress bar under the title
   (planner/v3/Checklist.vue renders .pp-cl-count / .pp-cl-progress only in the new look)
   ========================================================================== */
html.pie-premium .pp-shell .planner-left-sidebar .general-tasks .checklist-title-label .pp-cl-count {
    color: var(--pp-muted);
    font-family: var(--pp-sans);
    font-weight: 400;
}

html.pie-premium .pp-shell .planner-left-sidebar .sub-menu-wrapper > .pp-cl-progress {
    position: relative;
    height: 6px;
    margin: 2px 0 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--pp-line);
}

html.pie-premium .pp-shell .planner-left-sidebar .sub-menu-wrapper > .pp-cl-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pp-acc);
    transition: width .25s ease;
}

/* Trip panel › Reports: each report is a row with the bar icon in front and an arrow on the right
   (the design), in place of the plain indented text links */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu {
        margin: 2px 0 8px !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a {
        padding: 14px 8px !important;
        color: var(--pp-ink-2) !important;
        font: 14px var(--pp-sans) !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div::before,
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div::after {
        content: "";
        flex: none;
        width: 15px;
        height: 15px;
        background-color: var(--pp-ink-3);
        -webkit-mask: var(--pp-i-bar) center / contain no-repeat;
        mask: var(--pp-i-bar) center / contain no-repeat;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div::after {
        order: 2;
        width: 16px;
        height: 16px;
        margin-left: auto;
        -webkit-mask-image: var(--pp-i-right);
        mask-image: var(--pp-i-right);
    }

    /* The Starter lock stays just before the arrow */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div > .pull-right {
        order: 1;
        float: none;
        margin-left: auto;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a > div:has(> .pull-right)::after {
        margin-left: 0;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a:is(:hover, .router-link-active) > div::before,
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu li > a:is(:hover, .router-link-active) > div::after {
        background-color: currentColor;
    }
}

/* Day body › "Dining / To be Booked" pill: the day body is a flex row, so the pill shrinks to its text
   and the floated + / trash (trash is position:absolute) drew over the label. Lay it out as a row:
   icon, label, then + and trash */
html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div > .days-btn {
    float: none !important;
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div > .days-btn:first-child {
    order: 3;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div > .days-btn:nth-child(2) {
    order: 2;
    margin-left: 6px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div > .days-btn .booking_type_dropdown > a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > .pp-day-body .booked_detail_planner:not(.travel_detail) > div > .days-btn .drop-down-trash-icon {
    position: static !important;
}

/* Trip sidebar › Client itineraries: the -25px that cancelled the sub-menu indent (pie-premium.css)
   now overshoots, since #ti_list_block has no padding any more, and the panel clipped each photo
   card's left edge and the start of its name */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block > li.ul-ti-name {
        margin-left: 0;
    }
}

/* Collaborators list (Collaborators.vue): 32px initials avatars, plain role text,
   "+ Add collaborator" under the list instead of the + in the header */
html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .sub-menu-wrapper li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell-photo {
    float: none;
    flex: none;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell-photo :is(img, .collab-initials) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    margin: 0;
    border-radius: 50% !important;
    object-fit: cover;
    background: var(--pp-acc);
    color: #fff;
    font: 11px/1 var(--pp-bold);
    letter-spacing: .04em;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell {
    min-width: 0;
    padding-left: 0;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell .user-name {
    overflow: hidden;
    color: var(--pp-ink);
    font: 14px/20px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell .user-company span {
    margin-right: 0;
    padding: 0;
    background: none;
    color: var(--pp-muted);
    font: 12.5px/18px var(--pp-sans);
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .tbl-cell .user-company span + span::before {
    content: ", ";
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .collaborators_sections .collaborate-drop-down .add_collobrators {
    display: none !important;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .collab-add-row {
    display: inline-block;
    margin: 0 0 12px 10px;
    color: var(--pp-acc);
    font: 13.5px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell .planner-left-sidebar .collaborators_sections .collab-add-row:hover {
    text-decoration: underline;
}

/* Sticky itinerary toolbar: the page-coloured shadow copy that hid the day cards scrolling under it
   had the same rounded corners, so cards showed through at the corners. A square page-coloured
   backing (12px above down to the bar's bottom) hides them; the bar's white card is drawn above it */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached {
        background: transparent;
        box-shadow: none;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached::before,
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached::before {
        inset: -12px 0 0;
        z-index: -2;
        background: var(--pp-bg);
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached::after {
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: var(--pp-panel);
        box-shadow: var(--pp-shadow);
    }
}

/* Add Main Contact / Add Traveler popup (AddTripContactPopup.vue + AutoCompleteTripContact.vue):
   the suggestions sit in the popup's flow, so they push the footer down instead of covering Close */
html.pie-premium .pp-shell #add_trip_contact_popup .modal-dialog {
    max-width: min(520px, calc(100vw - 32px));
    margin-inline: auto;
}

html.pie-premium .pp-shell #add_trip_contact_popup .modal-body {
    padding: 4px 28px 20px;
}

/* traveller_label is never set, so the floating label is always empty */
html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-container .ffl-label {
    display: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-container input.form-control {
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: #fff;
    color: var(--pp-ink);
    font: 14.5px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-container input.form-control::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-container input.form-control:focus {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell #add_trip_contact_popup .suggestions_parent .typeahead-result {
    position: static;
    width: 100%;
    max-height: 280px;
    margin: 8px 0 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item > a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: none;
    text-decoration: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item:is(:hover, .active) > a {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-display {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-ink);
    font: 14px/1.4 var(--pp-sans);
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-display .fs-10 {
    min-width: 0;
    overflow: hidden;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
    font-size: 12.5px !important; /* beats common.css .fs-10 (10px !important) */
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-display > i {
    float: none;
    flex: none;
    margin-left: auto;
    color: var(--pp-ink-3);
    font-size: 16px;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item:first-child .typeahead-display,
html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item:first-child .typeahead-display > i {
    color: var(--pp-acc);
}

/* The success path hides the "Fetching Suggestions..." span by an id without the popup's prefix,
   so it stays visible; the old floating list covered it, the in-flow list doesn't */
html.pie-premium .pp-shell #add_trip_contact_popup .suggestions_parent:has(.typeahead-result) .no_suggestion {
    display: none;
}

html.pie-premium .pp-shell #add_trip_contact_popup .no_suggestion:not(.hide) {
    display: block;
    margin-top: 10px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #add_trip_contact_popup .no_suggestion .fa-spinner {
    margin-right: 8px;
    font-size: 14px !important;
}

/* ==========================================================================
   Contacts & travelers tab (TripTravelerInfo_new.vue; planner.css takes the + Add border off with !important): the design's traveler table — one
   rounded card, uppercase muted headers, 52px rows split by a hairline, a Bordeaux initials
   avatar before each name (data-initials, new look only). Every column and control stays; the
   card scrolls sideways when the columns don't fit.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .add-traveler {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin: 6px 0 12px;
    padding: 0 14px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .add-traveler:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #trip_travellers .table-responsive {
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
}

/* The last row's hairline would double the card's border */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #trip_travellers #travelersblock {
    margin: 0 0 -1px;
    border: 0;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock > thead > tr > th {
    padding: 13px 14px !important;
    border-top: 0 !important;
    background: transparent !important;
    color: var(--pp-muted) !important;
    font: 11px var(--pp-bold) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock > tbody > tr.trip_traveler_row > td {
    height: 52px;
    padding: 0 14px !important;
    border-top: 0 !important;
}

/* Name: avatar + ink name, as in the design; the copy-name popup still opens on hover */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row span[data-initials] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row span[data-initials]::before {
    content: attr(data-initials);
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pp-acc);
    color: #fff;
    font: 10.5px var(--pp-bold);
    letter-spacing: .02em;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row span[data-initials=""]::before {
    content: "";
}

/* Status / Role / Travelling With / Paid By dropdowns: room for their value and the clear ×
   (the inline min-widths of 74–90px cut them to "Role" / "A…") */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td:is(.trip-traveler-status, .ind_client_role_column) {
    min-width: 150px !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td:is(.trip_traveler_twid, .trip_traveler_pbid) {
    min-width: 180px !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td:is(.trip-traveler-status, .ind_client_role_column, .trip_traveler_twid, .trip_traveler_pbid) .v-select {
    width: 100%;
}

/* Action: the gear (opens its menu on hover) and the app icon as two 30px round icon buttons side
   by side; the app icon keeps its meaning: green = traveler has the app, red = not yet */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action {
    min-width: 92px;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > :is(.trip-checklist, .mobile-device, .no-mobile-device) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    padding: 0;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > :is(.trip-checklist, .mobile-device, .no-mobile-device):hover {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > :is(.trip-checklist, .mobile-device, .no-mobile-device) > i {
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > .trip-checklist > .action_hover::before {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > .mobile-device > i,
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > .mobile-device > i::before {
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > .no-mobile-device > i,
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action > .no-mobile-device > i::before {
    color: #c0262d !important;
}

/* Refresh + full screen above the traveler table: an outlined Refresh pill and a matching round
   expand button beside it. The expand icon sits inside the Refresh element in the markup, so it is
   placed just outside the pill (the pill keeps 40px free on its right for it). */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav > .section-title > .reload-trip-traveler {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0 40px 10px 0;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    line-height: 1;
    transition: border-color .15s, color .15s;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav > .section-title > .reload-trip-traveler > .pie-icon-thin-0142_rotate_sync {
    padding: 0 !important;
    color: inherit;
    font-size: 14px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav > .section-title > .reload-trip-traveler > .full-screen {
    position: absolute;
    top: -1px;
    right: -40px;
    display: grid;
    place-items: center;
    float: none;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 50%;
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font-size: 14px;
    transition: border-color .15s, color .15s;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav > .section-title > .reload-trip-traveler:hover:not(:has(> .full-screen:hover)),
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav > .section-title > .reload-trip-traveler > .full-screen:hover {
    border-color: var(--pp-acc-line);
    color: var(--pp-acc);
}

/* With Action as the first column the gear's menu opens to its right (classic opens it to the left,
   which would now fall outside the table card), arrow on its left edge */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action .trip-checklist .hover-popover {
    right: auto;
    left: 34px;
    top: -6px;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock tr.trip_traveler_row > td.pp-trav-action .trip-checklist .hover-popover::before {
    top: 14px;
    right: auto;
    left: -13px;
    border-left-color: transparent;
    border-right-color: #f7f3f3;
}

/* The table card scrolls sideways, so it also clips the gear menu at its bottom edge; while a menu is
   open the card makes room under the rows so every item (Cancel / Remove traveler) stays reachable */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #trip_travellers .table-responsive:has(td.pp-trav-action .trip-checklist:hover) {
    padding-bottom: 130px;
}

/* Phone / email / invoice lists (hover on the count): classic opens them upward, where the card clips
   them away (a single traveler has no room above its row). They drop below the count instead, the
   card makes room under the rows while one is open, and a long invoice list scrolls inside itself.
   The transparent top border bridges count → list so the hover isn't lost on the way. */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock .traveler_info_popover > .hover-popup {
    top: 100%;
    bottom: auto;
    left: -14px;
    z-index: 20;
    max-height: 230px;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    border-top: 8px solid transparent;
    border-radius: 12px;
    background-clip: padding-box;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    list-style: none;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock .traveler_info_popover > .hover-popup::before {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock .traveler_info_popover > .hover-popup li a {
    align-items: center;
    gap: 8px;
    padding: 2px 14px;
    color: var(--pp-ink-2);
    font: 13px/30px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #travelersblock .traveler_info_popover > .hover-popup li a > .gray_light_pills {
    flex: none;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details #trip_travellers .table-responsive:has(.traveler_info_popover:hover) {
    padding-bottom: 240px;
}

/* Status / Role / TW / PB menus: the card clipped the bottom of the list (Paid in full, Cancelled) */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #trip_travellers .table-responsive:has(td:is(.trip-traveler-status, .ind_client_role_column, .trip_traveler_twid, .trip_traveler_pbid) .v-select.vs--open) {
    padding-bottom: 260px;
}

/* Refresh / full screen sit on the "+ Add Traveler" line (right side) instead of a line of their own,
   which left a ~56px empty band above the table. Not in full-screen mode, where they head the view. */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details #full-screen-tabview-trav:not(.toggle-full-screen) > .section-title {
    margin-top: -45px !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(#trip_travellers) > div:has(> .add-traveler) {
    margin-right: 160px;
}

/* ==========================================================================
   QA fixes: Accounting full screen, Trip content panel scrolling
   ========================================================================== */
/* Accounting › Receivables full screen (TripAccounting.vue fullScreenSection adds .toggle-full-screen to
   #full-screen-tabview). The classic sheet is left:0 / z-index 999 and the wrapper keeps its mt-4, so it
   slid under the app rail and the top bar and cut the left of the table off. Same sheet as the traveler
   tab's: over the whole window, above the rail, no margin. The tab pane's clip-path is already dropped
   by the rule that follows ".toggle-full-screen" in pie-premium.css. */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-6 #full-screen-tabview.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 1052;
    height: 100%;
    margin: 0 !important;
    padding: 20px 24px !important;
    background: var(--pp-panel) !important;
    overflow: auto;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-6 #full-screen-tabview.toggle-full-screen {
        padding: 16px !important;
    }
}

/* Trip content panel on wide screens (≥1640px it is fixed to the window, 12px from the top and bottom).
   pie-premium.css gave its inner box "max-height: none", counting on the box being stretched to the
   bottom, but it is only as tall as its content. Images, Places and the Library list ran past the bottom
   of the window and could not be scrolled. Keep it inside the window: the box scrolls inside. */
@media (min-width: 1640px) {
    html.pie-premium body:not(.ai-chat-docked) .pp-shell.pp-planner:is(.pp-tp-open, :not(.pp-tp-open)) .pp-itb.attached:not(.panel-off) + .planner-itinerary-flex:not(.drag-component-hidden) > .reservation-rightside-section .drag-rightside {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--pp-line-2) transparent;
    }
}

/* Trip side panel › Checklist task rows. The edit / delete icons were display:none until hover, so on hover
   the row lost ~35px, the title re-wrapped and the row jumped; long titles also ran to 8+ lines. Now the
   actions are a small fixed 2×2 block (delete, edit / info, assignee) that always takes the same room, so
   nothing moves or overlaps, and the title is limited to two lines (the full text is in the tooltip). */
html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns {
    position: static;
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, 18px);
    gap: 2px;
    align-items: center;
    justify-items: center;
    align-self: flex-start;
    padding: 0;
    background: transparent;
    opacity: 1;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > i {
    display: block;
    width: 18px;
    height: 18px;
    padding: 2px;
    box-sizing: border-box;
    line-height: 14px;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns img {
    width: 16px !important;
    height: 16px !important;
    object-fit: cover;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .desc_cntnt span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Trip side panel › checklist title. A long title ran to many lines and pushed the count and the progress
   bar down. The name is limited to two lines (full text in the tooltip), the count "(0 / 2)" always shows
   beside it, and the delete / edit icons keep their own spot at the top right. */
html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .sub-menu-wrapper > .general-tasks {
    align-items: flex-start;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .general-tasks .checklist-title-label {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .general-tasks .checklist-title-label .pp-cl-name {
    flex: 0 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .general-tasks .checklist-title-label .pp-cl-count {
    flex: none;
    white-space: nowrap;
}

/* Accounting › "+ Create Client Invoice": the button sat 8px under the title line and its bottom edge ran
   8px into the filter row below it (the table block has a negative top margin), so it looked glued to both.
   Room above, and below enough to clear that overlap and leave a 14px gap. */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-6 #full-screen-tabview > .border > .btn.btn-primary.btn-small {
    margin: 12px 0 22px;
}

/* ==========================================================================
   Trip information box (#tabs-2-tab-11, TripInfo_new.vue) — one flat form instead of a card in the
   box, a top bar with the trip code and Update (clear of the floating Ask P.AI button), the fields
   across the full width, and a taller box so more than the first section shows
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) > #tabs-2-tab-11.tab-pane.active:not(#tabs-2-tab-3) {
    max-height: min(720px, calc(100vh - 170px));
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
    padding: 0 28px 28px !important;
}

/* Update: a 60px sticky row at the top, laid over the trip code row (same height) */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner > .me-5 {
    order: -1;
    position: sticky;
    top: 0;
    bottom: auto;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    margin: 0 0 -60px !important;
    padding: 0 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner > .me-5 #modalPrimaryButton {
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px !important; /* a shared .btn rule forces 10px */
    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;
    pointer-events: auto;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner > .me-5 #modalPrimaryButton:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-acc);
}

/* Trip code row: "Trip code F6267" (the box head already says Trip information), sticky with Update */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child {
    position: sticky;
    top: 0;
    z-index: 11;
    height: 60px;
    margin: 0 -28px 8px !important;
    padding: 0 28px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child .head-title.trip-tittle {
    margin: 0;
    font-size: 0;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child .head-title.trip-tittle::before {
    content: "Trip code";
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child > .ps-3 {
    padding-left: 10px !important;
}

/* Section headings: one size, with room above so each section reads as its own block */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page :is(.commission-section > .head-title, .planer-main-info, h2.head-title, .pop-head) {
    display: block;
    margin: 22px 0 12px !important;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.005em;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .commission-section {
    margin-top: 6px !important;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page hr {
    margin: 26px 0 4px !important;
}

/* Fields across the width: 4 to a row instead of 6 narrow ones and an empty right half */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row.g-2 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row > .col-md-2 {
    width: 25%;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row:not(.col-md-3 > .row) > .col-md-4 {
    width: 50%;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row > .col-md-6 {
    width: 100%;
}

/* Places rows (place, start + day, end + day, bin): the two date groups share the rest of the row */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .date-section .row > .col-md-3 {
    width: 33%;
}

/* Nested date / days pairs stay two up inside their wider column */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .date-section .row .row > .col-md-6 {
    width: 50%;
}

/* The Update bar is at the top now, so the Ask P.AI button goes back to its usual place */
html.pie-premium .pp-shell.pp-planner:has(#tabs-2-tab-11.active #trip_traveler_info_v3_planner > .me-5) .pp-cpfab {
    bottom: 22px;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row > .col-md-2 {
        width: 33.333%;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row:not(.col-md-3 > .row) > .col-md-4 {
        width: 66.666%;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row:not(.col-md-3 > .row) > :is(.col-md-2, .col-md-4) {
        width: 50%;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .date-section .row > .col-md-4 {
        width: 100%;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .date-section .row:has(> .col-md-3) > .col-md-2 {
        width: 100%;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .date-section .row > .col-md-3 {
        width: 45%;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
        padding: 0 16px 20px !important;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner > .me-5 {
        padding: 0 16px;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child {
        margin: 0 -16px 8px !important;
        padding: 0 16px;
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page .row:not(.col-md-3 > .row) > :is(.col-md-2, .col-md-4) {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Trip information — reordered and compact (client request 2026-11-03). CSS order only, so every
   field, v-model and Update keep working: the form is a 4-column grid, the main fields flow into it
   without their row breaks, and the sections go most used first:
   20 main details · 25 purpose + tags · 30 dates, places · 40 advisor & commission · 55 price,
   currency · 60 notes · 70 partner + airports · 90 client request information
   -------------------------------------------------------------------------- */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    align-items: start;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > * {
    grid-column: 1 / -1;
    order: 50;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .d-flex.mb-4:first-child {
    order: 0;
}

/* The old row dividers: the section headings separate the blocks now */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > :is(hr, .clearfix) {
    display: none;
}

/* 20 — Main details: Lead traveler, trip name… timeformat (and the group fields) as one grid */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > span.planer-main-info:has(+ .row #trip_profile_lead_client_auto_complete) {
    order: 20;
    margin-top: 14px !important;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:is(:has(#trip_profile_lead_client_auto_complete), :has(input[placeholder="Trip Name"]), :has(#po_number), :has(input[placeholder="Group name"])) {
    display: contents;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:is(:has(#trip_profile_lead_client_auto_complete), :has(input[placeholder="Trip Name"]), :has(#po_number), :has(input[placeholder="Group name"])) > [class*="col-"] {
    grid-column: auto;
    order: 20;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
}

/* 25 — Purpose beside the last field, tags under it (the tags field says "Add tags", so its heading goes) */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:is(:has(#traveling_with), :has(#trip_profile_tags_tokenfield)) {
    order: 25;
    margin: 0 0 12px;
}

/* The main fields leave one on the last line (9, or 13 on a group trip): purpose fills the rest */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#traveling_with) {
    grid-column: span 3;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:is(:has(#traveling_with), :has(#trip_profile_tags_tokenfield)) > [class*="col-"] {
    width: 100%;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#trip_profile_tags_tokenfield) .planer-main-info {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#traveling_with) textarea.form-control {
    height: 50px;
    min-height: 50px;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#trip_profile_tags_tokenfield) .small-text {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
}

/* 30 — Dates, then places */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .date-section {
    order: 30;
}

/* 40 — Advisor & commission: the advisor row gets the heading it never had */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#selectAdvisorDiv) {
    order: 40;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#selectAdvisorDiv)::before {
    content: "Advisor & commission";
    flex: 0 0 100%;
    margin: 22px 0 0;
    padding: 0 calc(var(--bs-gutter-x) * .5);
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    letter-spacing: -.005em;
}

/* Host agency, referral and collaborator rows sit between the advisor and the splits in the
   markup: they keep their place there (order 50 follows 40, and the splits come last) */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .commission-section {
    order: 51;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .commission-section > .head-title {
    margin-top: 10px !important;
    color: var(--pp-ink-3);
    font-size: 13px;
}

/* 55 — Price and currency together (one "Price" heading: the second one asked "Include price") */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > span.planer-main-info:has(+ .row #price_per_person),
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(#price_per_person),
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .radio-btm-section {
    order: 55;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page:has(#price_per_person) > .radio-btm-section > .form-group:has(> h5.pop-head:not(.mt-2)) {
    display: none;
}

/* 60 — Notes: internal notes, then the master itinerary description, includes and excludes */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:not(.g-2):has(> .col-md-6 > .planer-main-info),
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .internal-note-main {
    order: 60;
}

/* 70 — Partner and departure airports side by side */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(.partner_select_at_trip_profile),
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > div:has(> #preferred_departure_airport_box_trip_profile) {
    grid-column: span 2;
    order: 70;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(.partner_select_at_trip_profile) > [class*="col-"] {
    width: 100%;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(.partner_select_at_trip_profile) > .col-md-10 {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(.partner_select_at_trip_profile) .partner-question {
    display: block;
    color: var(--pp-muted);
    font: 12px/1.45 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .row:has(.partner_select_at_trip_profile) .pop-head > br {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > div:has(> #preferred_departure_airport_box_trip_profile) .head-title {
    margin: 22px 0 12px !important;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page #preferred_departure_airport_box_trip_profile {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page #preferred_departure_airport_box_trip_profile .row > .col-md-2:not(:has(i)) {
    width: calc(100% - 48px);
}

html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page #preferred_departure_airport_box_trip_profile .row > .col-md-2:has(> i) {
    width: 40px;
}

/* 90 — Client request information last. "Client information" sits outside the collapsing part in
   the markup, so it folds with it when the user folds the section */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .accordion-item:has(> #collapse_2:not(.show):not(.collapsing)) > .request-info-block-inner {
    display: none;
}
/* 90 — Client request information last */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > .accordion-item {
    order: 90;
    margin-top: 18px;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page > :is(.row:has(#traveling_with), .row:has(.partner_select_at_trip_profile), div:has(> #preferred_departure_airport_box_trip_profile)) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 #trip_traveler_info_v3_planner .trip_profile_page {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Day cards and reservation cards: exact match to the design (planner.css .pl-day / .pl-it).
   CSS only over the classic cards (BookingFlights/General/Accommodation/Transportation_new.vue,
   TripPlannerBookingList_new.vue); every click target stays the same element. One extra class
   (.planner-booking-list) over the pie-premium.css card rules, so these win.
   ========================================================================== */

/* Card (.pl-it): 14px 16px padding, 34px icon tile + 12px gap, a 1px ring that deepens on hover */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail:not(.overnight_trip) {
    padding: 14px 16px 14px 62px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 16px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail:not(.overnight_trip):hover {
    border-color: var(--pp-line-2) !important;
    box-shadow: 0 10px 24px -16px rgba(17, 17, 26, .3) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .planner-booking-info:first-child > i {
    top: 14px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font-size: 17px;
}

/* First line (.pl-top): title, the category as a small grey tag, the flight status; then
   Mark as Booked and the action icons on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-title {
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title {
    flex: 1 1 auto;
    gap: 4px 10px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > div:not(.planner-booking-info) {
    flex-basis: auto;
    min-width: 0;
    color: var(--pp-ink);
    font: 15px/1.35 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .planner-booking-info:first-child {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px !important;
    border-radius: 6px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
    font: 11px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .planner-booking-info:first-child > :not(i) {
    color: inherit !important;
    font: inherit !important;
}

/* Status tags (.pl-bd): 22px, 6px corners, 12px */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail :is(.flight-status-chip, .booking-status, .planner-booking-status-btn--booked) {
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail :is(.flight-status-chip, .booking-status).confirm-lbl,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status.planner-booked-lbl,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-status-btn--booked {
    background: #e7f5ee !important;
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail :is(.flight-status-chip, .booking-status):is(.request-lbl, .unconfirm-lbl) {
    background: #fdf3e1 !important;
    color: #9a5b00 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail :is(.flight-status-chip, .booking-status):is(.unavailable-lbl, .cancelled-lbl) {
    background: #fdecec !important;
    color: #c0262d !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status.price-rate-type {
    background: color-mix(in srgb, #1f4e8c 10%, #fff) !important;
    color: #1f4e8c !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status.booking-status-unset {
    border: 1px dashed var(--pp-line-2) !important;
    background: transparent !important;
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .flight-action-icon {
    flex-basis: auto !important;
    width: auto !important;
    margin: 0 0 0 -4px !important;
    padding: 0 !important;
    color: var(--pp-muted);
    font-size: 13px;
}

/* Mark as Booked (.pl-mark): 28px, 8px corners, thin border */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-status-btn--mark {
    display: inline-flex !important;
    align-items: center;
    height: 28px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 12px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-status-btn--mark:hover {
    border-color: var(--pp-acc) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-status-btn--mark i {
    margin-left: 6px;
    font-size: 11px;
}

/* Keep the status and menu in one flex row instead of pinning the menu to the card. */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-title > div:last-child:has(> .booking-actions) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-right: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-title:has(.booking-actions) .dropdown-toggle {
    position: static;
    inset: auto;
    align-self: center !important;
    flex-shrink: 0;
    height: 28px;
    margin: 0 !important;
}

/* Match the three-dot button size on reservation and Information cards. */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-booking-title .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list > div > .dropdown-toggle {
    box-sizing: border-box;
    width: 32px;
    min-width: 32px;
    height: 28px;
    min-height: 28px;
    padding: 0 !important;
    border-radius: 9px;
}

/* Second line (.pl-line): times, dates, airline in quiet 13px text with small dots between */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail > .row {
    gap: 10px 12px;
    margin: 4px 0 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail > .row > .col-lg-4 {
    flex: 1 1 100% !important;
    width: 100% !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail > .row > .col-lg-8 {
    flex: 1 1 100% !important;
    width: 100% !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row .collapsed:has(> .planner-booking-info) {
    display: flex;
    gap: 4px 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row :is(.flight-date, .booking-date-time) {
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row :is(.flight-date, .booking-date-time) > i:not(.text-danger) {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row :is(.flight-date, .booking-date-time) .fs-11 {
    color: var(--pp-muted) !important;
    font-size: 11.5px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row :is(.flight-date, .booking-date-time) p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pp-ink-3) !important;
    font-size: 13px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row .flight-date p::before,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row .collapsed > .planner-booking-info + .planner-booking-info::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--pp-muted);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row .collapsed > .planner-booking-info + .planner-booking-info {
    display: inline-flex;
    align-items: center;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .row .airline-logo span {
    color: var(--pp-ink-2) !important;
    font-size: 13px;
}

/* Third line (.pl-tags): rate and reservation tags, then Supplier / Payment as quiet text, the
   price on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .track-info:has(> .booking-drop-down) {
    align-items: center;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down {
    gap: 6px 12px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down > div:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down > div:has(> [data-bs-title="Rate Type"]) {
    order: 1;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down > div:has(> [data-bs-title="Reservation Status"], > .booking-status-unset) {
    order: 2;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down > div:has(> [data-bs-title="Supplier Status"]) {
    order: 3;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-drop-down > div:has(> [data-bs-title="Payment Status"]) {
    order: 4;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Supplier Status"] {
    height: auto;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12.5px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status:is([data-bs-title="Supplier Status"], [data-bs-title="Payment Status"])::before {
    margin-right: 4px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Supplier Status"]::before {
    content: "Supplier";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Payment Status"]::before {
    content: "Payment";
}

/* Payment is a pill like the reservation / commission statuses beside it (QA PLAN-7460 #54), labelled
   "Payment": green when paid, amber while open, red when cancelled / unavailable (rule above) */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Payment Status"]::before {
    color: inherit;
    opacity: .75;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Payment Status"]:is(.payment_status_paid, .confirm-lbl) {
    background: #e7f5ee !important;
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[data-bs-title="Payment Status"]:not(.payment_status_paid, .confirm-lbl, .cancelled-lbl, .unavailable-lbl) {
    background: #fdf3e1 !important;
    color: #9a5b00 !important;
}

/* The edit pencils float on the tag's corner on hover instead of widening every tag */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status {
    position: relative;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status > i.pie-icon-edit {
    position: absolute;
    top: -7px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink-3);
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status:hover > i.pie-icon-edit {
    opacity: 1;
    pointer-events: auto;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status > i.pie-icon-edit:hover {
    color: var(--pp-acc);
}

/* Price (.pl-price): 13.5px ink, the commission in green */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .price-action {
    align-items: center;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .price-action > span {
    padding: 0 !important;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .price-action > span:not(:first-child) {
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .price-action {
    gap: 0 4px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .price-action > i {
    margin-left: 6px !important;
    color: var(--pp-muted);
    font-size: 12px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .track-info > i.add_hotel {
    padding: 0 0 0 6px !important;
    font-size: 14px !important;
}

/* Overnight (.pl-night): 6px 12px, 10px corners, 12.5px */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail.overnight_trip {
    gap: 7px;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail.overnight_trip i {
    color: var(--pp-ink-3);
    font-size: 14px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail.overnight_trip > * {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail.overnight_trip > :not(i) {
    font: inherit !important;
    line-height: 18px !important;
}

/* Day header: meals as 24px chips (.pl-meals), a 32px "+" (.pl-add) and Book (.pl-book) */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .main_event_day_meals_options ul {
    gap: 3px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .main_event_day_meals_options ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px !important;
    min-width: 24px;
    height: 24px !important;
    padding: 2px 0 0 !important;
    text-align: center;
    letter-spacing: 0;
    border: 0;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-muted) !important;
    font: 11px/1 var(--pp-bold) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .main_event_day_meals_options ul li a:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .main_event_day_meals_options ul li a.color-pink {
    background: var(--pp-acc) !important;
    box-shadow: none;
    color: #fff !important;
}

/* "(AI/B/L/D/C)" repeats the filled chips */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .daily-calendar-block > .fs-14 {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .add-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-2) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .add-btn:hover {
    background: var(--pp-acc) !important;
    color: #fff !important;
}

/* A plain "+" (the icon font's plus has its own circle) */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .add-btn > i {
    display: block;
    flex: none;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pp-i-plus) center / contain no-repeat;
    mask: var(--pp-i-plus) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .add-btn > i::before {
    content: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .tp-shop-day-btn {
    height: 32px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink) !important;
    font-size: 12.5px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .day-header-actions .tp-shop-day-btn:hover {
    box-shadow: 0 0 0 1px var(--pp-acc);
    color: var(--pp-acc) !important;
}

/* Day links (.pl-dayx): 12.5px accent with 13px icons, 14px apart */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .accordion-collapse > .pp-day-body :is(.day-details-section-desc-add, .di-day-image-view-section) .add-link {
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .accordion-collapse > .pp-day-body :is(.day-details-section-desc-add, .di-day-image-view-section) .add-link .booking-photos {
    font: 12.5px var(--pp-sans) !important;
}

/* Drop area (.pl-drop): 13px padding, 12px corners, 13px text */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .accordion-collapse > .pp-day-body:not([class*="dd_day_General"])::after {
    padding: 13px;
    border-radius: 12px;
    font-size: 13px;
}

/* The flight status sits in an info wrapper with its own padding and fill */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .planner-title-status-info {
    height: auto;
    padding: 0 !important;
    background: transparent !important;
}

/* Information cards (.pl-info): the same tile, the title with an "Information" tag beside it,
   edit / delete in the card, the date as the quiet line under the title */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list {
    padding: 14px 80px 14px 62px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list:hover {
    box-shadow: 0 10px 24px -16px rgba(17, 17, 26, .3) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > i.category-icon {
    top: 14px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font-size: 17px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list:has(.booking-date-time) .my-1,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 {
    display: block;
    min-height: 34px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px 10px;
    min-height: 28px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline > div:not(.planner-booking-info) {
    order: 1;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline > div:not(.planner-booking-info) > div {
    color: var(--pp-ink);
    font: 15px/1.35 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > p {
    display: inline-flex !important;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3) !important;
    font: 11px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .booking-date-time,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .booking-date-time :is(.fs-12, span) {
    color: var(--pp-ink-3) !important;
    font-size: 13px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.justify-content-between {
    margin-top: 2px;
}

/* Information cards use the same labelled action menu as reservations. */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu {
    min-width: 180px;
    padding: 6px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    background: var(--pp-panel) !important;
    box-shadow: 0 16px 40px -14px rgba(17, 17, 26, .28) !important;
    text-align: left !important;
    z-index: 6 !important;
    --bs-position: end;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu:not(.show) {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu > i {
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 9px;
    color: var(--pp-ink-2);
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu > i::before {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu > i::after {
    content: attr(title);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu > i:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .event-actions.dropdown-menu > i.pie-icon-trash:hover {
    color: #c0262d;
}

/* The details toggle moves left of the action icons */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.justify-content-between > .ms-auto {
    right: 80px !important;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail:not(.overnight_trip) {
        padding: 12px 10px 12px 54px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list {
        padding: 12px 74px 12px 54px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > i.category-icon {
        top: 12px;
        left: 10px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .planner-title > .planner-booking-info:first-child > i {
        top: 12px;
        left: 10px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .track-info:has(> .booking-drop-down) {
        flex-wrap: wrap;
    }
}

/* Add Reservation: retain contrast while hovering, focusing or pressing a type. */
html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown .dropdown-menu .dropdown-item:is(:hover, :focus-visible) {
    background-color: var(--pp-panel-2) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown .dropdown-menu .dropdown-item:is(:active, .active) {
    background-color: var(--pp-acc) !important;
    color: #fff !important;
}

/* Reservation action labels fill the menu instead of inheriting square icon sizing. */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink-2);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i::after {
    display: block;
    font: 14px/20px var(--pp-sans);
    white-space: normal;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i:hover {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i.pie-icon-trash {
    color: #c0262d;
}

/* Package Builder full screen must cover the app rail and planner header. */
html.pie-premium .pp-shell.pp-planner #full-screen-tabview-package-builder.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 1052;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 24px !important;
    border-radius: 0;
    background: var(--pp-panel) !important;
    overflow: auto;
    overscroll-behavior: contain;
}

html.pie-premium .pp-shell.pp-planner #full-screen-tabview-package-builder.toggle-full-screen .traveler-package-builder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

html.pie-premium .pp-shell.pp-planner #full-screen-tabview-package-builder.toggle-full-screen #add_new_package_id {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #full-screen-tabview-package-builder.toggle-full-screen .full-screen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink);
    cursor: pointer;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #full-screen-tabview-package-builder.toggle-full-screen {
        padding: 16px !important;
    }
}

/* Separate the Receivables action from the Advisor/date filters beneath it. */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview > .border > button.btn-primary {
    margin-bottom: 16px !important;
}

/* Accounting full screen covers the navigation instead of sliding underneath it. */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview.toggle-full-screen {
    position: fixed;
    inset: 0;
    z-index: 1052;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 24px !important;
    border-radius: 0;
    background: var(--pp-panel) !important;
    overflow: auto;
    overscroll-behavior: contain;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview.toggle-full-screen > .border {
    min-width: 0;
    padding: 16px !important;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview.toggle-full-screen {
        padding: 12px !important;
    }
}

/* Day reservation menus stay above the cards but below the sticky toolbar and main header. */
html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu {
    z-index: 6 !important;
}

/* Release the Accounting sheet's clipping and stacking context for its full-screen table. */
html.pie-premium .pp-shell.pp-planner #planner_details_tabs .tab-content > .tab-pane:has(.trip-accounting-tab #full-screen-tabview.toggle-full-screen) {
    position: relative;
    z-index: 1051;
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview.toggle-full-screen .vgt-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #full-screen-tabview.toggle-full-screen .vgt-responsive {
    max-width: 100%;
    overflow-x: auto;
}

/* Deposit rows reserve enough width for the date and align the remove action with the inputs. */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: start;
    gap: 12px;
    margin: 12px 0;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row > :is(.col-md-10, .col-md-1) {
    width: auto;
    min-width: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row > .col-md-10 > .row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(170px, .8fr) minmax(180px, 1.5fr);
    gap: 12px;
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row > .col-md-10 > .row > .form-group {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit .vdp-datepicker input {
    width: 100%;
    padding-right: 36px;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row > .col-md-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

@media (max-width: 767px) {
    html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit > .row > .col-md-10 > .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Accounting uses the whole section width, including its settings and payment fields. */
html.pie-premium .pp-shell.pp-planner #planner_details_tabs .trip-accounting-tab.container-fluid {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > :is(div:first-child:has(> ul), .border, #full-screen-tabview) {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section > .row > :is(.col-md-3, .col-md-4) {
    flex: 1 1 0;
    min-width: 180px;
}

@media (max-width: 767px) {
    html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section > .row > :is(.col-md-3, .col-md-4) {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   Move Content popup (ReservationModal.vue): tighter day blocks, and the "Sort reservation by
   chronological order" button in Bordeaux. template1.css turned it #A20090 with a magenta border on hover.
   ========================================================================== */
html.pie-premium .pp-shell .reservation-modal .move-reservation-preview > div {
    margin-bottom: 10px !important; /* was Bootstrap .mb-3 (16px) plus the last row's 6px */
}

html.pie-premium .pp-shell .reservation-modal .move-reservation-preview > div > .d-flex:first-child {
    margin-bottom: 6px;
}

html.pie-premium .pp-shell .reservation-modal .move-reservation-preview > div > .d-flex:first-child > .d-flex {
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell .reservation-modal .sort-all-reservation-btn {
    border: 1px solid var(--pp-acc-line);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-acc);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .reservation-modal .sort-all-reservation-btn:is(:hover, :focus, :active) {
    border-color: var(--pp-acc-line);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    box-shadow: none;
}

/* ==========================================================================
   Add / Update Expense popup (AdditionalServiceItemPopup.vue): the open "Select Traveler" picker
   had common.css's #A20090 border (!important); use the new-look focus ring like the other fields.
   ========================================================================== */
html.pie-premium .pp-shell #additionalServiceItemPopup .multiselect.multiselect--active .multiselect__tags {
    border-color: var(--pp-acc-line) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell #additionalServiceItemPopup .multiselect.multiselect--active .multiselect__content-wrapper {
    border-color: var(--pp-line);
}

/* ==========================================================================
   Reservation cards, expanded: each section (details, Invoiced / Not invoiced, travelers) gets a
   soft highlight while the pointer is over it. Drawn with an outward ring so nothing moves; only
   the innermost hovered section lights up.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking [id^="booking-information-"] :is(.booking-sub-container, .booking-traveler-list, div:has(> .invoices-label)) {
    border-radius: 10px;
    transition: background-color .15s, box-shadow .15s;
}

/* (:has() can't be nested, so the details block and the Invoiced row are two rules) */
html.pie-premium .pp-shell.pp-planner #planner_booking [id^="booking-information-"] .booking-sub-container:hover:not(:has(:is(.booking-sub-container, .booking-traveler-list, .invoices-label):hover)),
html.pie-premium .pp-shell.pp-planner #planner_booking [id^="booking-information-"] div:has(> .invoices-label):hover {
    background-color: var(--pp-hover);
    box-shadow: 0 0 0 6px var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner #planner_booking [id^="booking-information-"] .booking-traveler-list:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
}

/* ==========================================================================
   Sales report popup (salesReport_popUp.vue, opened from the planner's Sales / Invoiced tiles):
   template1.css / common.css paint the date picker, "Filter(s) Applied", "Save as custom report"
   and "Clear All" PIE magenta (#A20090), the picker with !important. Bordeaux instead.
   ========================================================================== */
html.pie-premium .pp-shell #salesReportModal .daterangepicker td.in-range {
    background-color: var(--pp-acc-soft) !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #salesReportModal .daterangepicker :is(td.active, td.active:hover) {
    border-radius: 8px;
    background-color: var(--pp-acc) !important;
    color: #fff;
}

html.pie-premium .pp-shell #salesReportModal .daterangepicker .ranges li.active {
    background-color: var(--pp-ink) !important;
    color: #fff;
}

html.pie-premium .pp-shell #salesReportModal .daterangepicker .ranges li:not(.active):hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #salesReportModal :is(.applied-filter-notify, .reservation-customisation-button) {
    color: var(--pp-acc) !important;
}

/* "Clear All" / "Save as custom report": template1.css adds a #A20090 border on hover */
html.pie-premium .pp-shell #salesReportModal .reservation-customisation-button {
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background-color .15s, border-color .15s;
}

html.pie-premium .pp-shell #salesReportModal .reservation-customisation-button:is(:hover, :focus-visible) {
    border-color: var(--pp-acc-line);
    background-color: var(--pp-acc-soft);
}

/* ==========================================================================
   Sales report popup (#salesReportModal → bookings_report_with_details.vue): every remaining
   classic colour. Sources: common.css / template1.css (#A20090 and the --theme-color /
   --pie-primary-color variables) and vue-good-table's own blue (#409eff arrows, chevrons and
   focus, #f1f5fd row hover). Table, pills and footer match the Reports page (reports.css).
   ========================================================================== */
html.pie-premium .pp-shell #salesReportModal {
    --theme-color: var(--pp-acc);
    --pie-primary-color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal a:hover {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal input[type="radio"],
html.pie-premium .pp-shell #salesReportModal input[type="checkbox"] {
    accent-color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal :is(.form-control, .vgt-input, .vgt-select):focus {
    border-color: var(--pp-acc-line) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

/* Download icon */
html.pie-premium .pp-shell #salesReportModal .pie-icon-thin-0121_download_file {
    color: var(--pp-ink-3);
    cursor: pointer;
}

html.pie-premium .pp-shell #salesReportModal .pie-icon-thin-0121_download_file:hover {
    color: var(--pp-acc);
}

/* Reports (saved report) picker options */
html.pie-premium .pp-shell #salesReportModal .vs__dropdown-option--highlight {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #salesReportModal .vs__dropdown-option--selected {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

/* Select Advisor (bootstrap-select): chosen / hovered rows, the Clear button and its search */
html.pie-premium .pp-shell #salesReportModal .bootstrap-select .dropdown-menu li a:is(:hover, :focus) {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #salesReportModal .bootstrap-select .dropdown-menu li:is(.selected, .active) a,
html.pie-premium .pp-shell #salesReportModal .bootstrap-select .dropdown-menu li a.active {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #salesReportModal .bootstrap-select .bs-actionsbox .btn {
    border: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-2);
}

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

html.pie-premium .pp-shell #salesReportModal .bootstrap-select > .dropdown-toggle:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* Applied filters: pills like the Reports page; the close icon's hover was #A20090 */
html.pie-premium .pp-shell #salesReportModal .applied-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell #salesReportModal .applied-filter-notify {
    flex: 0 0 100%;
    margin: 0;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-close-btn-wrapper,
html.pie-premium .pp-shell #salesReportModal .custom-filter-close-btn-wrapper:hover {
    margin: 0 !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-pill {
    align-items: center !important;
    gap: 4px;
    height: 30px;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-ink) !important;
    color: #fff !important;
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-pill strong {
    font-family: var(--pp-bold);
    font-weight: normal;
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-pill :is(span, strong, i) {
    color: inherit !important;
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-close-btn {
    display: inline-flex;
    margin-left: 4px;
    opacity: .7;
    cursor: pointer;
}

html.pie-premium .pp-shell #salesReportModal .custom-filter-close-btn:hover {
    opacity: 1;
}

/* Table card */
html.pie-premium .pp-shell #salesReportModal .vgt-wrap {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow), 0 0 0 1px var(--pp-line);
    overflow: hidden;
}

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

html.pie-premium .pp-shell #salesReportModal table.vgt-table {
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell #salesReportModal 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: 12px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

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

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sortable button::after,
html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sorting-asc button::after {
    border-bottom-color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sortable button::before,
html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sorting-desc button::before {
    border-top-color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sorting-asc button::after {
    border-bottom-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.sorting-desc button::before {
    border-top-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead th.filter-th {
    padding: 8px 14px;
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table thead :is(.vgt-input, .vgt-select) {
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--pp-panel-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody td {
    height: 48px;
    padding: 0 14px !important;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    letter-spacing: 0;
    vertical-align: middle;
}

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

html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody tr:is(:hover, .clickable:hover) td,
html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody tr.clickable:hover {
    background: var(--pp-hover);
}

/* Grand total: the last row, bold on the panel tint (was the library's light blue) */
html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody tr:is(.bold, :last-child) td {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody tr.bold td {
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #salesReportModal table.vgt-table tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium .pp-shell #salesReportModal .custom-table table.vgt-table td .vuegood-number {
    border-bottom: 1px solid var(--pp-acc-line);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap .vgt-text-disabled {
    padding: 28px 0;
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

/* Footer: rows per page and the pager */
html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    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 #salesReportModal .vgt-wrap__footer::before,
html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer::after {
    display: none;
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer :is(.footer__row-count__label, .footer__navigation, .footer__navigation__page-info, .footer__navigation__page-btn span) {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .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 #salesReportModal .vgt-wrap__footer .footer__row-count__select:focus {
    border-color: var(--pp-acc-line);
}

html.pie-premium .pp-shell #salesReportModal .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);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn:not(.disabled):hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn .chevron.left::after {
    border-right-color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn .chevron.right::after {
    border-left-color: var(--pp-acc);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn.disabled .chevron::after {
    border-left-color: transparent;
    border-right-color: transparent;
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn.disabled .chevron.left::after {
    border-right-color: var(--pp-line-2);
}

html.pie-premium .pp-shell #salesReportModal .vgt-wrap__footer .footer__navigation__page-btn.disabled .chevron.right::after {
    border-left-color: var(--pp-line-2);
}

/* Save Custom Filter (nested popup) */
html.pie-premium .pp-shell #salesReportModal #customFilterModal .modal-footer .btn-primary {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    color: #fff !important;
    letter-spacing: 0;
}

/* ==========================================================================
   QA pass (2026-11-05, planner)
   ========================================================================== */
/* 1. Reservation card › Supplier / Payment status pickers: the hovered option was template1.css's
   magenta tint (rgba(162,0,144,.08) / --theme-color) */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .booking-drop-down .supplier-status .vs__dropdown-option--highlight {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .booking-drop-down .supplier-status .vs__dropdown-option--selected {
    color: var(--pp-ink);
}

/* 2. Activity / Tours details › Available: "Sold Out" was the classic magenta-red .color-red */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail td .color-red {
    color: #b42318 !important;
}

/* 7. Traveler(s) details › Status: the "Cancelled" pill is v-show'n; the new-look status-tag rules
   (display: inline-flex !important) made the hidden, empty one a pink blob on every row */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list .travel_detail .booking-status[style*="display: none"],
html.pie-premium .pp-shell.pp-planner #planner_booking .booking-traveler-list .booking-status[style*="display: none"] {
    display: none !important;
}

/* 8. Add Main Contact: the keyboard-active row (Add New) and the hovered row sat flush, reading as one
   block. Rows get a 2px gap, and only the hovered row is tinted while the pointer is in the list. */
html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-item + .typeahead-item {
    margin-top: 2px;
}

html.pie-premium .pp-shell #add_trip_contact_popup .typeahead-result .typeahead-list:hover .typeahead-item.active:not(:hover) > a {
    background: none;
}

/* 13. Travelers / Non-travelers tables › phone, email, invoice and name lists: they opened upwards and
   the table card (it scrolls sideways) cut off every line above the header, so only one showed. They
   open downwards as a card, and the table card makes room under the rows while one is open. */
html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup {
    top: calc(100% + 10px);
    bottom: auto;
    left: -14px;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -18px rgba(17, 17, 26, .28), 0 2px 6px rgba(17, 17, 26, .05);
    z-index: 20;
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup::before {
    top: -7px;
    bottom: auto;
    left: 18px;
    float: none;
    width: 12px;
    height: 12px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--pp-line);
    border-left: 1px solid var(--pp-line);
    background: var(--pp-panel);
    transform: rotate(45deg);
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li a {
    top: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13px/1.4 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li a:hover {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li label {
    margin: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li label.traveler-name {
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li .gray_light_pills {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-traveler-table .traveler_info_popover > .hover-popup li span {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner :is(#trip_travellers .table-responsive, .nontraveler-contacts .table-responsive-sm):has(.traveler_info_popover:hover) {
    padding-bottom: 210px;
}

/* …and the Traveler Status / Role / Travelling With / Paid By pickers' option lists, cut at the card's
   bottom edge the same way */
html.pie-premium .pp-shell.pp-planner :is(#trip_travellers .table-responsive, .nontraveler-contacts .table-responsive-sm):has(.trip-traveler-table .vs--open) {
    padding-bottom: 250px;
}

/* 12. Non-travelers main contacts: the same table card as Travelers above it (classic Bootstrap table
   with its header row inside tbody) */
html.pie-premium .pp-shell.pp-planner .nontraveler-contacts > div:has(> .add-traveler) {
    margin-bottom: 12px;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts > .fs-12.color-gray {
    color: var(--pp-muted) !important;
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts > .table-responsive-sm {
    overflow-x: auto;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table {
    margin: 0 0 -1px;
    border: 0;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table > tbody > tr:first-child > th {
    padding: 13px 14px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: transparent !important;
    color: var(--pp-muted) !important;
    font: 11px var(--pp-bold) !important;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table > tbody > tr:first-child > th :is(i, .pie-icon-thin-0551_information_about) {
    color: inherit;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table > tbody > tr.trip_traveler_row > td {
    height: 52px;
    padding: 0 14px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    vertical-align: middle;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table > tbody > tr.trip_traveler_row:hover > td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table > tbody > tr.trip_traveler_row > td.show-trip-traveler-details:nth-child(3) {
    color: var(--pp-ink);
    font-size: 13.5px;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table tr.trip_traveler_row > td:is(.trip-traveler-status, .ind_client_role_column) {
    min-width: 150px !important;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table tr.trip_traveler_row > td:is(.trip_traveler_twid, .trip_traveler_pbid) {
    min-width: 180px !important;
}

html.pie-premium .pp-shell.pp-planner .nontraveler-contacts .trip-traveler-table tr.trip_traveler_row > td:is(.trip-traveler-status, .ind_client_role_column, .trip_traveler_twid, .trip_traveler_pbid) .v-select {
    width: 100%;
}

/* 10. Import Travelers (CsvUpload.vue, full-screen): the chat launcher fixed at the window's bottom
   right sat on "Preview Done, Import it!"; the buttons keep clear of it */
html.pie-premium #csv-upload .modal-body .btn.pull-right:not(.me-3) {
    margin-right: 72px;
}

/* Import Travelers / Profiles preview grid (CsvUpload.vue): in the new look DataTables runs without
   scrollX (it froze the page measuring ~90 columns), so the wide table scrolls sideways here */
html.pie-premium #csv-upload .dataTables_wrapper {
    overflow-x: auto;
}

html.pie-premium #csv-upload #preview-csv-table td {
    white-space: nowrap;
}

/* Travelers / Non-travelers tables › Traveler Status, Role, Travelling With, Paid By pickers: a chosen
   value sat further left and lower than the "Status" / "Role" placeholder (vue-select draws it in its
   own margined box, and planner.css adds 5px under the field), and the clear × crowded it. Both now
   share one inset, centred in the 36px field, with the × and arrow as a tidy pair on the right. */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__dropdown-toggle {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 8px 0 12px !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__selected-options {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select :is(.vs__selected, .vs__search, .vs__search:focus) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    color: var(--pp-ink);
    font: 13.5px/1.3 var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__selected {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select.vs--single.vs--open .vs__selected {
    position: absolute;
    opacity: .5;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 6px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__clear {
    display: inline-flex;
    margin: 0;
    padding: 0;
    fill: var(--pp-muted);
}

/* The × is a fixed 10 x 10 drawing (no viewBox): keep that box, or its right and bottom edges are cut */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table td .v-select .vs__clear svg {
    display: block;
    width: 10px;
    height: 10px;
    overflow: visible;
}

/* ==========================================================================
   QA pass (2026-11-06, PLAN-7460 #32-#57, planner)
   ========================================================================== */
/* #32 Traveler row › Forms sent to client: "Resend" (.btn-outline-secondary / -danger) was common.css's
   #A20090 outline. A quiet secondary pill; still red when the form is over 24 hours old. */
html.pie-premium .pp-shell.pp-planner .btn.send-dynamic-custom-form:is(.btn-outline-secondary, .btn-outline-danger) {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    box-shadow: none;
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner .btn.send-dynamic-custom-form.btn-outline-danger {
    border-color: #f1c4c4 !important;
    color: #b42318 !important;
}

html.pie-premium .pp-shell.pp-planner .btn.send-dynamic-custom-form:is(.btn-outline-secondary, .btn-outline-danger):is(:hover, :focus-visible) {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* #55 Traveler row › Trip notes for this traveler: the editor's Cancel (.btn-primary-outline) was the
   #A20090 outline; Save / Cancel are the new-look 40px pills, the edit pencil a muted icon */
html.pie-premium .pp-shell.pp-planner [id^="trip_notes_for_traveler_ck_editor_"] > .text-end {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner [id^="trip_notes_for_traveler_ck_editor_"] > .text-end > .btn {
    height: 40px;
    margin: 0 !important;
    padding: 0 16px;
    border-radius: 999px;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner [id^="trip_notes_for_traveler_ck_editor_"] > .text-end > .btn.btn-primary-outline {
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner [id^="trip_notes_for_traveler_ck_editor_"] > .text-end > .btn.btn-primary-outline:hover {
    background: var(--pp-hover) !important;
}

html.pie-premium .pp-shell.pp-planner .card > .card-header > i.pie-icon-thin-0002_write_pencil_new_edit {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .card > .card-header > i.pie-icon-thin-0002_write_pencil_new_edit:hover {
    color: var(--pp-acc);
}

/* #37 Contacts & travelers: the ⋯ menu button carries a "More actions" label */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter .traveler-actions-btn {
    display: inline-flex;
    gap: 8px;
    width: auto;
    padding: 0 12px;
    color: var(--pp-ink-2);
    font: 13px/1 var(--pp-bold);
    white-space: nowrap;
}

/* #35 Checklist task › assignees: the 2x2 action block gave the avatars one 18px cell, so they ran out
   of the task's box. They sit as an overlapping stack in the task's bottom-right corner, on a line of
   their own under the actions (the row keeps room for it); each avatar's old 5px right margin is
   dropped so they really overlap. */
html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail:has(> .action-btns > span.task_assignee_popover) {
    padding-bottom: 30px !important;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > span.task_assignee_popover {
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: auto;
    max-width: calc(100% - 16px);
    height: 18px;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > span.task_assignee_popover > span {
    display: flex;
    align-items: center;
    gap: 0;
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > span.task_assignee_popover img {
    flex: none;
    margin: 0 !important;
    box-shadow: 0 0 0 1.5px var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar div.checklist_tasks > .trip_list_detail .action-btns > span.task_assignee_popover img + img {
    margin-left: -5px !important;
}

/* #38 Accounting › deposits: the Due date picker was 42px against the 50px amount and description
   fields; and the Duration / Terms picker's arrow sat under its text */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab #trip_invoice_deposit [id^="trip_deposit_due_datepicker"] .vdp-datepicker input.form-control {
    height: 50px;
    padding-top: 26px;
    padding-bottom: 10px;
}

/* (the picker's wrapper took the floating label's 22px top padding while its button kept the full
   52px height, so the button hung 22px below the field with the arrow at its centre. The padding
   moves onto the button: the whole field stays clickable and the arrow sits beside the value.) */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .form-floating > .bootstrap-select.form-control {
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .bootstrap-select > .dropdown-toggle {
    align-items: flex-start;
    padding: 22px 36px 6px 12px;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .bootstrap-select > .dropdown-toggle > .filter-option {
    flex: 1 1 auto;
    float: none;
    height: 24px;
    min-width: 0;
    padding: 0;
    line-height: 24px;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    top: 32px;
    right: 14px;
    bottom: auto;
    margin: 0;
}

/* #39 Accounting › invoice list: the row's gear turned #A20090 on hover (template1.css
   .trip-accounting-tab .vgt-left-align a:hover) */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-left-align a:hover {
    color: var(--pp-acc);
}

/* #44 Client itinerary › Travelers › Add Traveler list: rows sat flush, so the hovered and the
   keyboard-active row read as one block */
html.pie-premium .pp-shell #ti-travelers-vue .vs__dropdown-menu .vs__dropdown-option + .vs__dropdown-option {
    margin-top: 2px;
}

html.pie-premium .pp-shell #ti-travelers-vue .vs__dropdown-menu .vs__dropdown-option {
    border-radius: 8px;
}

/* #48 Trip information › Preferred Departure Airport(s): the width rule skipped fields that hold the
   autocomplete's spinner <i>, so the airport field stayed a 126px col-md-2 and cut the name */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .trip_profile_page #preferred_departure_airport_box_trip_profile .row > .col-md-2:not(:has(> i)) {
    width: calc(100% - 48px);
}

/* #57 Trip side bar › Reports: the open and hovered report rows touched */
html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .dropdown_pie_dashboard ul.sub-menu > li + li {
    margin-top: 4px;
}

/* Contacts & travelers › More actions menu: Import Travelers / Copy form links / Send forms / Send
   Message kept the classic icon font's glyphs; they are the new look's 1.6-stroke line icons */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu {
    --pp-i-download: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204v11M7%2010l5%205%205-5M5%2020h14'/%3E%3C/svg%3E");
    --pp-i-chat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012a8%208%200%200%201-11.6%207.1L4%2020l1.1-4.1A8%208%200%201%201%2020%2012z'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu :is(.pie-icon-download, .pie-icon-copy, .pie-icon-send-forms, .pie-icon-messaging) {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    background-color: currentColor;
    -webkit-mask: var(--pp-i) center / contain no-repeat;
    mask: var(--pp-i) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu :is(.pie-icon-download, .pie-icon-copy, .pie-icon-send-forms, .pie-icon-messaging)::before {
    content: none;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu .pie-icon-download {
    --pp-i: var(--pp-i-download);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu .pie-icon-copy {
    --pp-i: var(--pp-i-copy);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu .pie-icon-send-forms {
    --pp-i: var(--pp-i-doc);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info.traveler-actions-menu .pie-icon-messaging {
    --pp-i: var(--pp-i-chat);
}

/* Trip information › notes block (Internal Notes, Master Itinerary Description…): the info icons and
   other links there turned template1.css's #A20090 on hover
   (.traveler-tab-details .internal-note-main .form-group a:hover) */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .internal-note-main .form-group a:is(:hover, :focus-visible) {
    color: var(--pp-acc);
}

/* Trip information › Client Request Information opens expanded (as in the classic look; the new look
   used to fold it on open). The form marks its header button .collapsed even though the panel starts
   open, so the chevron pointed down: it follows the panel's real state instead. */
html.pie-premium .pp-shell.pp-planner #tabs-2-tab-11 .accordion-item:has(> #collapse_2.show) > .accordion-header > .accordion-button::after {
    transform: rotate(-180deg);
}

/* Trip content › Library (LibraryDragPanel.vue) › category icons: the picked category was PIE magenta
   (#c7009b, with a magenta underline) and a hovered one turned #9c0079. The new look's soft Bordeaux
   tab: Bordeaux icon and underline on the soft tint, hover in the warm hover tint. */
html.pie-premium .pp-shell .library-drag-panel .library-cat-icon:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .library-drag-panel .library-cat-icon.active {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    box-shadow: inset 0 -2px 0 var(--pp-acc);
}