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

/* ==========================================================================
   Automated Messages (automatedMessages/index.vue → AutomatedMessages.vue, .automation-dpage) —
   the design's P['auto-messages'] screen (sections.js): page head with eyebrow and subtitle,
   Refresh + Add new on the right, the sub-tab chip, then one list card (DataTables) with the
   footer. The classic markup stays; the head is laid out as a grid with the <h4> flattened
   (display: contents) so its icons can sit beside the "+ Add new" button.
   ========================================================================== */
html.pie-premium .pp-shell .automation-dpage.crm-page-content {
    margin: 0;
}

html.pie-premium .pp-shell .automation-dpage > .container-fluid {
    padding: 0 32px 32px;
}

/* Page frame: no white sheet; head / sub-tab / card stacked on a grid */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-content: start;
    column-gap: 8px;
    margin: 0 !important;
    padding: 18px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Full screen (maximize icon): the page background, not a white sheet */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message.toggle-full-screen {
    padding: 18px 32px 32px;
    background: var(--pp-bg);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > hr {
    display: none;
}

/* Page head: eyebrow, 30px title, subtitle (h4 text + ::before / ::after) */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 {
    display: contents;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
    text-transform: none;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4::before {
    content: "Automation";
    grid-area: 1 / 1;
    margin-bottom: 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4::after {
    content: "Emails and texts that go out on a trigger";
    grid-area: 3 / 1;
    margin-top: 4px;
    color: var(--pp-ink-3);
    font: 14px/1.45 var(--pp-sans);
    letter-spacing: 0;
}

/* Head actions, right-aligned on the title block's last line: full screen · Refresh · Add new */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i,
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > #save_automated_messsage {
    grid-row: 1 / 4;
    align-self: end;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0 !important;
    border: 0;
    border-radius: 999px;
    letter-spacing: 0;
    white-space: nowrap;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i {
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink);
    font-size: 16px !important;
    font-style: normal;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i.full-screen {
    grid-column: 2;
    width: 40px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i.pie-icon-thin-0142_rotate_sync {
    grid-column: 3;
    padding: 0 18px;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 > i.pie-icon-thin-0142_rotate_sync::after {
    content: "Refresh";
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > #save_automated_messsage {
    grid-column: 4;
    padding: 0 18px;
    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);
    text-transform: none !important; /* common.css capitalizes every .btn with !important ("Add New") */
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > #save_automated_messsage:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
}

/* Sub-tab under the head (the design's .subtabs; this section has one page) */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message::before {
    content: "Automated Messages";
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
    margin: 16px 0 20px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink);
    font: 13px/1.5 var(--pp-bold);
}

/* List card */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > .crm_table {
    grid-row: 5;
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_wrapper > .row {
    margin: 0;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_wrapper > .row > [class*="col-"] {
    padding: 0;
}

/* Top row: "Show [25] entries" as a quiet toolbar across the card */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_wrapper > .row:first-child {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_length select {
    width: auto;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--pp-line);
    border-radius: 8px;
    background: var(--pp-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
    -webkit-appearance: none;
    appearance: none;
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_length select:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

/* Table */
html.pie-premium .pp-shell .automation-dpage #automated_messages_table {
    margin: 0 !important;
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th:last-child {
    text-align: right !important;
}

/* DataTables marks the first column sorted even though the list is not sortable */
html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th::after,
html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th::before {
    display: none;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th.sorting_asc,
html.pie-premium .pp-shell .automation-dpage #automated_messages_table > thead > tr > th.sorting_desc {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr > td {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr > td.text-end {
    width: 1%;
    text-align: right !important;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr:last-child > td {
    border-bottom: 0;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr:is(.odd, .even) {
    background: transparent;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr:not(:has(.dataTables_empty)):hover > td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table td.dataTables_empty {
    height: auto;
    padding: 28px 14px;
    color: var(--pp-muted);
    text-align: center !important;
}

/* Row actions (edit · delete · bind): the design's 30px quiet icon buttons, full colour on row hover */
html.pie-premium .pp-shell .automation-dpage #automated_messages_table .gray_light_pills {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 0 0 2px !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    vertical-align: middle;
    opacity: .55;
    transition: opacity .12s, background .12s;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table tr:hover .gray_light_pills {
    opacity: 1;
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table .gray_light_pills:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table .gray_light_pills.delete-automated-message:hover {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .automation-dpage #automated_messages_table .gray_light_pills i {
    margin: 0;
    color: inherit;
    font-size: 16px;
}

/* Footer: "Showing x to y" left, pager right */
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_wrapper > .row:last-child {
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_info {
    padding: 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate {
    padding: 0;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate .pagination {
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate .pagination li > a {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate .pagination li:not(.active, .disabled) > a:hover {
    background: var(--pp-hover) !important;
}

html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate .pagination li.active > a,
html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message .dataTables_paginate .pagination li.active > a:hover {
    background: var(--pp-ink) !important; /* template1.css forces the accent with !important */
    color: var(--pp-bg) !important;
}

/* Narrow screens: tighter gutter, smaller title */
@media (max-width: 1000px) {
    html.pie-premium .pp-shell .automation-dpage > .container-fluid,
    html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message.toggle-full-screen {
        padding-right: 16px;
        padding-left: 16px;
    }

    html.pie-premium .pp-shell .automation-dpage #full-screen-form-auto-message > h4 {
        font-size: 24px;
    }

    /* Let names and triggers wrap so the row actions stay in view without scrolling the card */
    html.pie-premium .pp-shell .automation-dpage #automated_messages_table > tbody > tr > td:not(.text-end) {
        white-space: normal;
    }
}

/* ==========================================================================
   Scheduled list (ScheduledList.vue, #binded_trip_list): the sorted "Trip Code" header and its
   chevron were the classic Magenta (#A20090); the design marks the sorted column with the accent
   ========================================================================== */
html.pie-premium .pp-shell .automation-dpage #binded_trip_list > thead > tr > th:is(.sorting_asc, .sorting_desc) {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > thead > tr > th:is(.sorting_asc, .sorting_desc)::before,
html.pie-premium .pp-shell .automation-dpage #binded_trip_list > thead > tr > th:is(.sorting_asc, .sorting_desc)::after {
    border-color: currentColor;
    color: inherit;
}

/* ==========================================================================
   Add / update Automated Message pop-ups (CreateAutomatedMessagePopup.vue,
   CreateMultipleAutomatedMessagePopup.vue). They are rendered by the Create pop-up host in the
   side bar, not inside .automation-dpage, so they are matched by id. common.css / dashboard.css
   paint the focused field, the picked time, the open multiselect and the picked list item
   Magenta (#A20090, !important): the Bordeaux accent with the soft focus ring instead.
   ========================================================================== */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) :is(.form-control, .form-select, textarea):focus,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vue__time-picker input.display-time:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
    outline: 0;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .multiselect.multiselect--active .multiselect__tags,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .v-select.vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* Time picker: picked hour / minute / AM-PM and hover */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vue__time-picker .dropdown ul li:not([disabled]).active,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vue__time-picker .dropdown ul li:not([disabled]).active:hover {
    background-color: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vue__time-picker .dropdown ul li:not([disabled]):not(.active):hover {
    background-color: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* Lists: highlighted and picked options */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vs__dropdown-option--highlight,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .multiselect__option--highlight,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .bootstrap-select .dropdown-menu li a:is(:hover, :focus) {
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vs__dropdown-option--selected,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .multiselect__option--selected,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .bootstrap-select .dropdown-menu li a.active,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .bootstrap-select .dropdown-menu li.selected > a {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* Custom Date calendar: today, picked day and hover in the accent */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vdp-datepicker__calendar .cell.selected,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vdp-datepicker__calendar .cell.selected:hover {
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vdp-datepicker__calendar header span:not(.prev, .next) {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .vdp-datepicker__calendar .cell:not(.blank):not(.disabled):is(.day, .month, .year):hover {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* ==========================================================================
   Scheduled list page (List.vue + ScheduledList.vue: a message's schedule, opened from a row).
   It still showed the classic white sheet, striped rows and wrapped dates; same frame, page head
   and list card as the Automated Messages page above. Scoped to the block that holds the list.
   ========================================================================== */
html.pie-premium .pp-shell .automation-dpage > .container-fluid > .bg-white-block:has(#binded_trip_list) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    margin: 0 !important;
    padding: 18px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > div:first-child {
    grid-column: 1 / -1;
    margin: 0 0 10px !important;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > div:first-child > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-bold);
    text-decoration: none;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > div:first-child > a:hover {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > div:first-child > a img {
    width: 12px;
    opacity: .6;
}

/* Head: eyebrow + message name as the 30px title, Refresh as the design's secondary pill */
html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4 {
    display: contents;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4::before {
    content: "Automation · Schedule";
    grid-column: 1;
    margin-bottom: 6px;
    color: var(--pp-acc);
    font: 11.5px/1.55 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4 > i {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink);
    font-size: 16px !important;
    font-style: normal;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4 > i::after {
    content: "Refresh";
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4 > i:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > hr {
    display: none;
}

/* The list card */
html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > .crm_table {
    grid-column: 1 / -1;
    margin-top: 22px !important;
    padding: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow-x: auto; /* a wide schedule scrolls inside the card instead of losing its last columns */
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_wrapper > .row {
    margin: 0;
    padding: 12px 16px;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_wrapper > .row > [class*="col-"] {
    padding: 0;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_length select {
    height: 34px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background-color: var(--pp-panel-2);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list {
    margin: 0 !important;
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > thead > tr > th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr > td {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr:last-child > td {
    border-bottom: 0;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr:is(.odd, .even) {
    background: transparent;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr:not(:has(.dataTables_empty)):hover > td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list td.dataTables_empty {
    height: auto;
    padding: 28px 14px;
    color: var(--pp-muted);
    text-align: center;
}

/* Long trip names wrap so the dates, status and actions keep their room */
html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr > td.show-row-details:nth-child(2) {
    min-width: 160px;
    white-space: normal;
}

/* Trip code in bold, as the row's key */
html.pie-premium .pp-shell .automation-dpage #binded_trip_list > tbody > tr > td:first-child {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

/* Delete: the design's quiet 30px icon button */
html.pie-premium .pp-shell .automation-dpage #binded_trip_list .gray_light_pills {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    opacity: .55;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list tr:hover .gray_light_pills {
    opacity: 1;
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list .gray_light_pills:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .automation-dpage #binded_trip_list .gray_light_pills i {
    margin: 0;
    color: inherit;
    font-size: 16px;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_info {
    padding: 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_paginate .pagination li > a {
    min-width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pp-ink-2);
    font: 12.5px/30px var(--pp-sans);
    text-align: center;
}

html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) .dataTables_paginate .pagination li.active > a {
    background: var(--pp-ink);
    color: #fff;
}

/* Laptop widths: tighter cells so every column (Action included) fits the card without scrolling */
@media (max-width: 1439px) {
    html.pie-premium .pp-shell .automation-dpage #binded_trip_list > :is(thead, tbody) > tr > :is(th, td) {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell .automation-dpage .bg-white-block:has(#binded_trip_list) > h4 {
        font-size: 24px;
    }
}

/* Automated Message pop-up: new-look bold title, and the "(View Recipients)" / "(View Sent
   Recipients)" / "(View Activity Log)" links (CommonRules.vue, .btn-primary spans) as secondary
   pills instead of letter-spaced Bordeaux buttons */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .modal-title {
    color: var(--pp-ink);
    font: 20px/1.2 var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) span.btn.btn-primary.cursor-pointer:not(:disabled) {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px;
    background: #fff !important;
    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) !important;
    font: 13px/1 var(--pp-bold) !important;
    letter-spacing: 0;
    text-transform: none !important;
    vertical-align: middle;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) span.btn.btn-primary.cursor-pointer:not(:disabled):hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-acc) !important;
}

/* ==========================================================================
   Automated Message pop-up (CreateAutomatedMessagePopup.vue + CommonRules.vue), new look:
   section titles, the notes as soft info panels, one field shape, and the filtered counts with
   their actions in one panel. Matched by id (the pop-up opens from the side bar and the planner).
   ========================================================================== */
/* Section titles (Mail Trigger Rules, Trip Creation Rule, Audience Rules, Rules, Email Content) were
   the classic heavy 14–16px; the design's 15px bold titles */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) :is(span, div).sub-heads:not(:has(~ .btn)):not(.d-block),
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .col-md-12.form-group > span.bold:first-child {
    display: block;
    margin: 0 0 8px;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--pp-ink);
    font: 15px/1.3 var(--pp-bold) !important;
    letter-spacing: -.005em;
}

/* "Notes:" and its two bullets: a soft info panel */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .row.g-2:has(> ul.ps-4) {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .row.g-2:has(> ul.ps-4) > p.bold {
    padding: 0;
    color: var(--pp-ink);
    font: 13px var(--pp-bold) !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .row.g-2:has(> ul.ps-4) > ul.ps-4 {
    margin: 6px 0 0;
    padding: 0 0 0 18px !important;
    color: var(--pp-ink-2);
    font: 13px/1.6 var(--pp-sans);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .row.g-2:has(> ul.ps-4) > ul.ps-4 > li::marker {
    color: var(--pp-acc);
}

/* "NOTE: …sent according to the advisor's timezone": the same panel, smaller */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) small.text-muted.d-block {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3) !important;
    font: 12px/1.5 var(--pp-sans);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) small.text-muted.d-block :is(strong, b) {
    color: var(--pp-ink-2);
    font-family: var(--pp-bold);
    font-weight: normal;
}

/* Fields: the pop-up's 10px radius, one value size (the time showed 16px beside 14px) */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating > :is(.form-control, textarea),
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vs__dropdown-toggle,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .multiselect__tags,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vue__time-picker input.display-time {
    border-radius: 10px !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vue__time-picker input.display-time,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vs__selected,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vs__search,
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .form-floating .vs__search::placeholder {
    font-size: 14px !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) hr {
    border-color: var(--pp-line);
    opacity: 1;
}

/* "+ Add Rule" */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) .common-rules-automated-message .add-link {
    font: 13px var(--pp-bold);
}

/* Filtered counts and their actions: one soft panel, counts left, actions as icon pills (the
   classic labels' brackets dropped), View Activity Log / View Sent Recipients on the right */
html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 14px !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.sub-heads {
    margin: 0 !important;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.sub-heads.d-block {
    flex-basis: 100%;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    height: 34px;
    margin: 0 !important;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25) !important;
    color: var(--pp-ink) !important;
    font-size: 0 !important;
    letter-spacing: 0;
    text-transform: none !important;
    transition: background-color .15s, color .15s;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    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 :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer::after {
    font: 13px/1 var(--pp-bold);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.ms-2 {
    --pp-i: var(--pp-i-eye);
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.ms-2::after {
    content: "View recipients";
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.pull-right.me-2 {
    --pp-i: var(--pp-i-clock);
    order: 3;
    margin-left: auto !important;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.pull-right.me-2::after {
    content: "Activity log";
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.pull-right:not(.me-2) {
    --pp-i: var(--pp-i-mail);
    order: 4;
}

html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.pull-right:not(.me-2)::after {
    content: "Sent recipients";
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell :is(#create-automated-message-popup, #create-multiple-automated-message-popup) div.mt-4:has(> span.sub-heads + span.sub-heads) > span.btn.cursor-pointer.pull-right.me-2 {
        margin-left: 0 !important;
    }
}