/* New look (html.pie-premium) — Submit Sale flow (PLAN-7463).
   Owned by one session at a time; see .claude/skills/pie-new-ui/SKILL.md.

   Covers: the side bar "+ Submit sale" link (PremiumSidebar.vue), the Submit Sale popup
   (SubmitSaleMultiStepsMultipleReservations.vue, #multiStepModalMultiRes), its Add Travellers
   popup (AddTripTravelerPopupSubmitSale.vue, #addTripTravelerSubmitSaleModal), its Add / Edit
   reservation popup (SubmitSaleAddReservation.vue + SubmitSaleCommonReservation.vue,
   #submitSaleAddReservation) and the Select Business Unit drawer (BusinessUnitPopupDrawer.vue).
   Classic CSS paints these in the old magenta (#A20090, often !important); here they take the
   new look's accent / ink. */

/* ---------- Side bar "+ Submit sale" link ----------
   pie-premium.css already gives it the design's .subsale look, but the link also carries
   .delete-profiles-hide, which template1.css paints #A20090 !important. */
html.pie-premium .pp-shell .pp-side .submit-sale-btn a.delete-profiles-hide {
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .pp-side .submit-sale-btn a.delete-profiles-hide:hover {
    color: var(--pp-acc) !important;
}

/* ---------- Required-field stars ----------
   Classic .color-red (#A20090 !important) and .form-group em (red): the design marks required
   fields with the accent. Covers Booking Advisor / Customer / Reservation Req. From and every
   field of the reservation popup (Comm. (%), Comm. Type, accounting invoice fields…). */
html.pie-premium .pp-shell :is(#multiStepModalMultiRes, #submitSaleAddReservation, #addTripTravelerSubmitSaleModal) label em {
    color: var(--pp-acc) !important;
    font-style: normal;
}

/* ---------- Reservations step: "+ Add Segment" sat on the table card's top edge ---------- */
html.pie-premium .pp-shell #multiStepModalMultiRes .row:has(> .new-planner + div:not(.pp-step-off) .add-link) {
    align-items: baseline;
    margin-bottom: 8px;
}

html.pie-premium .pp-shell #multiStepModalMultiRes .row > .new-planner + div:has(> .add-link) {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Add / Edit reservation popup: calendar cut off on the left ----------
   template1.css pins the 320px calendar to the field's right edge (right: 0 !important), so on a
   first-column date field (Auxiliary "Service Date", Limo, Insurance…) it hangs ~80px past the
   field's left edge, outside the scroll area, and is clipped. Open it from the left edge there. */
html.pie-premium .pp-shell #submitSaleAddReservation .row > .form-group:first-child .vdp-datepicker__calendar {
    left: 0 !important;
    right: auto !important;
}

/* ---------- Add Travellers popup ---------- */
/* "Add New" (always the first suggestion, AutoCompleteTravellers.vue) is the action row */
html.pie-premium .pp-shell #addTripTravelerSubmitSaleModal .typeahead-result .typeahead-list .typeahead-item:first-child > a,
html.pie-premium .pp-shell #addTripTravelerSubmitSaleModal .typeahead-result .typeahead-list .typeahead-item:first-child > a:hover {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #addTripTravelerSubmitSaleModal .typeahead-result .typeahead-list .typeahead-item:first-child > a i {
    color: var(--pp-acc) !important;
}

/* "+ Add" per traveller: classic is a 10px magenta tag; same pill as the planner's Add Travellers */
html.pie-premium .pp-shell #addTripTravelerSubmitSaleModal .team_select_up .btnAddTraveler {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold) !important;
    line-height: 1;
    cursor: pointer;
}

html.pie-premium .pp-shell #addTripTravelerSubmitSaleModal .team_select_up .btnAddTraveler:hover {
    background: var(--pp-acc-soft) !important;
    box-shadow: 0 0 0 1px var(--pp-acc-line);
}

/* ---------- Select Business Unit drawer ---------- */
/* "Business Unit" tab: same as the notification drawer's open tab */
html.pie-premium .pp-shell .main_notify:has(#business_unit) .noti-tabs .noti_tab.active {
    border-bottom-color: var(--pp-acc);
    background: transparent;
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    box-shadow: none;
}

/* Division radios: common.css gives the checked ring green (!important); the new-look radio */
html.pie-premium .pp-shell .main_notify:has(#business_unit) .custome-radiobtn .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .main_notify:has(#business_unit) .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc) !important;
}

html.pie-premium .pp-shell .main_notify:has(#business_unit) .custome-radiobtn .checkmark::after {
    display: none !important;
}