/* 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 — a summary card's section shows on its own, as the classic look's tabs:
   PremiumPlannerTiles.vue draws .pp-tl-tabhead while a section other than the itinerary is
   open. The itinerary pane (and its day timeline) stays hidden until the section is closed,
   and the open section grows with the page instead of scrolling inside a 440px box.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) > #tabs-2-tab-3:not(.active) {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) .pp-dtl-col {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) > .tab-pane.active:not(#tabs-2-tab-3) {
    max-height: none;
    margin-bottom: 0;
    padding: 20px;
    overflow: visible;
    overscroll-behavior: auto;
}

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

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;
}

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);
}

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