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