/* P&P Business Portal shared design system.
   Header geometry is centralized here so every application stays aligned. */
:root {
    --pp-blue: #244d8d;
    --pp-blue-dark: #193b70;
    --pp-surface: #ffffff;
    --pp-text: #172033;
    --pp-muted: #68758a;
    --pp-border: #dce3eb;
    --pp-soft: #f7f9fb;
    --pp-radius: 7px;
    --pp-focus: 0 0 0 3px rgba(36, 77, 141, 0.22);

    --pp-header-height: 92px;
    --pp-header-padding-y: 15px;
    --pp-header-padding-x: 24px;
    --pp-header-gap: 10px;
    --pp-header-logo: 62px;
    --pp-header-action-height: 44px;
    --pp-header-action-width: 92px;
}

html {
    color-scheme: light;
}

body {
    color: var(--pp-text);
    -webkit-font-smoothing: antialiased;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) {
    height: var(--pp-header-height);
    min-height: var(--pp-header-height);
    max-height: var(--pp-header-height);
    padding: var(--pp-header-padding-y) var(--pp-header-padding-x);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    background: var(--pp-surface);
    border: 0;
    border-bottom: 1px solid var(--pp-border);
    box-shadow: 0 2px 8px rgba(26, 44, 75, 0.06);
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(.portal-brand, .brand) {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--pp-header-gap);
    color: var(--pp-blue);
    text-decoration: none;
    flex: 0 1 auto;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(.portal-brand-logo, .brand-logo, .portal-brand > img, .brand > img) {
    width: var(--pp-header-logo);
    min-width: var(--pp-header-logo);
    max-width: var(--pp-header-logo);
    height: var(--pp-header-logo);
    min-height: var(--pp-header-logo);
    max-height: var(--pp-header-logo);
    object-fit: contain;
    flex: 0 0 var(--pp-header-logo);
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(.portal-brand-text, .brand-text, .portal-brand > span, .brand > span) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .portal-brand-text strong,
    .brand-text strong,
    .portal-brand > span > strong,
    .brand > span > strong
) {
    color: var(--pp-blue);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .portal-brand-text span,
    .brand-text span,
    .portal-brand > span > span,
    .brand > span > span
) {
    color: var(--pp-muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .header-actions,
    .head-actions,
    .portal-actions,
    .portal-header-actions,
    .user-area,
    .actions
) {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .header-actions,
    .head-actions,
    .portal-actions,
    .portal-header-actions,
    .user-area,
    .actions
) > :is(
    .portal-user-chip,
    .user-chip,
    .portal-user,
    .user,
    .stat-box
) {
    width: auto;
    min-width: 146px;
    height: var(--pp-header-action-height);
    min-height: var(--pp-header-action-height);
    max-height: var(--pp-header-action-height);
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-text);
    background: var(--pp-soft);
    border: 1px solid #d7dee7;
    border-radius: var(--pp-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .header-actions,
    .head-actions,
    .portal-actions,
    .portal-header-actions,
    .user-area,
    .actions
) > :is(
    a.btn,
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab
) {
    width: var(--pp-header-action-width);
    min-width: var(--pp-header-action-width);
    max-width: var(--pp-header-action-width);
    height: var(--pp-header-action-height);
    min-height: var(--pp-header-action-height);
    max-height: var(--pp-header-action-height);
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pp-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .header-actions,
    .head-actions,
    .portal-actions,
    .portal-header-actions,
    .user-area,
    .actions
) > :is(
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout
) {
    color: #fff;
    background: var(--pp-blue);
    border: 1px solid var(--pp-blue);
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) :is(
    .header-actions,
    .head-actions,
    .portal-actions,
    .portal-header-actions,
    .user-area,
    .actions
) > :is(
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout
):hover {
    color: #fff;
    background: var(--pp-blue-dark);
    border-color: var(--pp-blue-dark);
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header
) .pill {
    min-height: var(--pp-header-action-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--pp-focus);
}

@media (max-width: 760px) {
    :root {
        --pp-header-height: 64px;
        --pp-header-padding-y: 10px;
        --pp-header-padding-x: 12px;
        --pp-header-logo: 42px;
        --pp-header-action-height: 38px;
        --pp-header-action-width: 72px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) {
        gap: 10px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(.portal-brand, .brand) {
        gap: 9px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(
        .portal-brand-text strong,
        .brand-text strong,
        .portal-brand > span > strong,
        .brand > span > strong
    ) {
        font-size: 16px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(
        .portal-brand-text span,
        .brand-text span,
        .portal-brand > span > span,
        .brand > span > span
    ) {
        font-size: 10px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(
        .header-actions,
        .head-actions,
        .portal-actions,
        .portal-header-actions,
        .user-area,
        .actions
    ) {
        gap: 8px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(
        .header-actions,
        .head-actions,
        .portal-actions,
        .portal-header-actions,
        .user-area,
        .actions
    ) > :is(
        .portal-user-chip,
        .user-chip,
        .portal-user,
        .user,
        .stat-box
    ) {
        display: none;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) :is(
        .header-actions,
        .head-actions,
        .portal-actions,
        .portal-header-actions,
        .user-area,
        .actions
    ) > :is(
        a.btn,
        a.back-btn,
        a.back,
        a.portal-logout,
        a.portal-button,
        a.logout,
        a.tab
    ) {
        padding: 0 9px;
        font-size: 13px;
    }

    :is(
        header.portal-header,
        header.page-header,
        div.page-header,
        header.portal-page-header,
        header.header
    ) .pill {
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* v5 careful rounded tables + capsule actions */
:root {
    --pp-table-radius: 18px;
    --pp-table-gap: 12px;
    --pp-capsule-radius: 999px;
}

@media (min-width: 761px) {
    .orders-section + .orders-section,
    section.mobile-order-group + section.mobile-order-group,
    .email-orders-table-wrap + .email-orders-table-wrap,
    .table-wrap + .table-wrap {
        margin-top: var(--pp-table-gap);
    }

    .table-wrap,
    .email-orders-table-wrap {
        border: 1px solid #d7dee7;
        border-radius: var(--pp-table-radius);
        overflow: hidden;
        background: #fff;
    }

    .orders-section > .orders-section-title {
        border-radius: var(--pp-table-radius) var(--pp-table-radius) 0 0;
        margin-bottom: 0;
    }

    .orders-section > .table-wrap {
        border-top: 0;
        border-radius: 0 0 var(--pp-table-radius) var(--pp-table-radius);
    }

    .table-wrap table,
    .email-orders-table {
        width: 100%;
        border-collapse: separate !important;
        border-spacing: 0;
        background: #fff;
    }

    .table-wrap thead th:first-child,
    .email-orders-table thead th:first-child {
        border-top-left-radius: calc(var(--pp-table-radius) - 4px);
    }

    .table-wrap thead th:last-child,
    .email-orders-table thead th:last-child {
        border-top-right-radius: calc(var(--pp-table-radius) - 4px);
    }

    .orders-section > .table-wrap thead th:first-child,
    .orders-section > .table-wrap thead th:last-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .table-wrap tbody tr:last-child td:first-child,
    .email-orders-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: calc(var(--pp-table-radius) - 4px);
    }

    .table-wrap tbody tr:last-child td:last-child,
    .email-orders-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: calc(var(--pp-table-radius) - 4px);
    }

    .orders-section > .table-wrap thead th,
    .email-orders-table thead th {
        background: #244d8d !important;
        color: #fff !important;
        border-color: #1c4077 !important;
    }

    .orders-section > .table-wrap tbody td,
    .email-orders-table tbody td {
        border-color: #d7dee7 !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        border-radius: var(--pp-capsule-radius) !important;
        min-height: 38px;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* v6 careful refinement: softer action buttons + taller table headers + wider section spacing */
:root {
    --pp-table-radius: 18px;
    --pp-table-gap: 18px;
    --pp-header-btn-height: 42px;
    --pp-header-btn-min-width: 78px;
    --pp-table-btn-height: 38px;
    --pp-table-btn-min-width: 86px;
    --pp-table-btn-radius: 10px;
}

:is(
    header.portal-header,
    .portal-header,
    .page-header,
    .header-bar,
    .topbar,
    .top-bar,
    .head-bar,
    .brand-header,
    .admin-header
) :is(
    a.btn,
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout,
    .header-actions .btn,
    .portal-header-actions .btn
) {
    min-width: var(--pp-header-btn-min-width) !important;
    width: auto !important;
    height: var(--pp-header-btn-height) !important;
    min-height: var(--pp-header-btn-height) !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

@media (min-width: 761px) {
    .orders-section + .orders-section,
    section.mobile-order-group + section.mobile-order-group,
    .email-orders-table-wrap + .email-orders-table-wrap,
    .table-wrap + .table-wrap {
        margin-top: var(--pp-table-gap) !important;
    }

    .table-wrap,
    .email-orders-table-wrap {
        border-radius: var(--pp-table-radius);
        overflow: hidden;
        background: #fff;
    }

    .orders-section > .orders-section-title {
        border-radius: var(--pp-table-radius) var(--pp-table-radius) 0 0;
        margin-bottom: 0 !important;
    }

    .orders-section > .table-wrap {
        border-top: 0 !important;
        border-radius: 0 0 var(--pp-table-radius) var(--pp-table-radius);
    }

    .table-wrap thead th,
    .email-orders-table thead th {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        background: #244d8d !important;
        color: #fff !important;
        border-color: #1c4077 !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        border-radius: var(--pp-table-btn-radius) !important;
        min-width: var(--pp-table-btn-min-width) !important;
        width: auto !important;
        min-height: var(--pp-table-btn-height) !important;
        height: var(--pp-table-btn-height) !important;
        padding: 0 14px !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .table-wrap .status-col :is(.status-btn, .btn),
    .table-wrap .edit-col :is(.edit-btn, .btn),
    .table-wrap .delete-col :is(.delete-btn, .btn),
    .email-orders-table .actions-cell :is(.btn, button, a) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* v7 careful refinement: responsive orthogonal table buttons */
:root {
    --pp-table-gap: 22px;
    --pp-header-btn-height: 40px;
    --pp-header-btn-radius: 9px;
    --pp-table-btn-height: clamp(32px, 2vw, 38px);
    --pp-table-btn-radius: 8px;
}

:is(
    header.portal-header,
    .portal-header,
    .page-header,
    .header-bar,
    .topbar,
    .top-bar,
    .head-bar,
    .brand-header,
    .admin-header
) :is(
    a.btn,
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout,
    .header-actions .btn,
    .portal-header-actions .btn
) {
    min-width: 64px !important;
    width: auto !important;
    height: var(--pp-header-btn-height) !important;
    min-height: var(--pp-header-btn-height) !important;
    padding: 0 13px !important;
    border-radius: var(--pp-header-btn-radius) !important;
    font-size: clamp(12px, 0.74vw, 14px) !important;
    line-height: 1 !important;
}

@media (min-width: 761px) {
    .orders-section + .orders-section,
    section.mobile-order-group + section.mobile-order-group,
    .email-orders-table-wrap + .email-orders-table-wrap,
    .table-wrap + .table-wrap {
        margin-top: var(--pp-table-gap) !important;
    }

    .table-wrap,
    .email-orders-table-wrap {
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .table-wrap > table,
    .email-orders-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .table-wrap thead th,
    .email-orders-table thead th {
        padding: 15px 10px !important;
        font-size: clamp(12px, 0.82vw, 15px) !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    .table-wrap tbody td,
    .email-orders-table tbody td {
        padding: clamp(7px, 0.56vw, 10px) clamp(7px, 0.56vw, 10px) !important;
        font-size: clamp(12px, 0.8vw, 15px) !important;
        line-height: 1.2 !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--pp-table-btn-height) !important;
        min-height: var(--pp-table-btn-height) !important;
        padding: 0 clamp(6px, 0.55vw, 10px) !important;
        border-radius: var(--pp-table-btn-radius) !important;
        font-size: clamp(11px, 0.72vw, 14px) !important;
        line-height: 1 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .table-wrap .status-col :is(.status-btn, .btn),
    .table-wrap .edit-col :is(.edit-btn, .btn),
    .table-wrap .delete-col :is(.delete-btn, .btn),
    .email-orders-table .actions-cell :is(.btn, button, a) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tracking-sms-form {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .tracking-sms-form .tracking-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: var(--pp-table-btn-height) !important;
        font-size: clamp(10px, 0.68vw, 13px) !important;
        padding: 0 8px !important;
        border-radius: 6px !important;
    }

    .tracking-sms-form .sms-btn {
        flex: 0 1 96px !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 1600px) and (min-width: 761px) {
    .table-wrap thead th,
    .email-orders-table thead th {
        padding: 14px 8px !important;
        font-size: 13px !important;
    }

    .table-wrap tbody td,
    .email-orders-table tbody td {
        padding: 8px 8px !important;
        font-size: 13px !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        font-size: 12px !important;
        padding: 0 7px !important;
    }
}

@media (max-width: 1366px) and (min-width: 761px) {
    .table-wrap thead th,
    .email-orders-table thead th {
        padding: 13px 7px !important;
        font-size: 12px !important;
    }

    .table-wrap tbody td,
    .email-orders-table tbody td {
        padding: 7px 7px !important;
        font-size: 12px !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
    }

    .tracking-sms-form {
        gap: 6px !important;
    }

    .tracking-sms-form .sms-btn {
        flex-basis: 88px !important;
    }

    .tracking-sms-form .tracking-input {
        font-size: 10px !important;
    }
}

/* v8 palette + smaller radius + mobile arrow containment */
:root {
    --pp-primary: #2f5da8;
    --pp-primary-hover: #244d8d;
    --pp-success: #2fa84f;
    --pp-success-hover: #238740;
    --pp-danger: #cf4b3c;
    --pp-danger-hover: #b94033;
    --pp-orange: #f2a51f;
    --pp-orange-hover: #df920d;
    --pp-purple: #7567e8;
    --pp-purple-hover: #6659d4;
    --pp-dark: #363636;
    --pp-dark-hover: #1f1f1f;

    --pp-header-btn-radius: 8px;
    --pp-table-btn-radius: 7px;
    --pp-card-btn-radius: 8px;
}

:is(
    .btn-blue,
    .edit-btn,
    .card-edit-btn,
    .page-btn,
    .nav-btn,
    .admin-report-download,
    .calculate-btn
) {
    background: var(--pp-primary) !important;
    color: #fff !important;
}

:is(
    .btn-blue,
    .edit-btn,
    .card-edit-btn,
    .page-btn,
    .nav-btn,
    .admin-report-download,
    .calculate-btn
):hover {
    background: var(--pp-primary-hover) !important;
}

:is(.btn-green, .green, .toggle-green) {
    background: var(--pp-success) !important;
    color: #fff !important;
}

:is(.btn-green, .green, .toggle-green):hover {
    background: var(--pp-success-hover) !important;
}

:is(.btn-red, .red, .toggle-red) {
    background: var(--pp-danger) !important;
    color: #fff !important;
}

:is(.btn-red, .red, .toggle-red):hover {
    background: var(--pp-danger-hover) !important;
}

:is(.sms-enabled, .btn-orange) {
    background: var(--pp-orange) !important;
    border-color: #cf8500 !important;
    color: #fff !important;
    box-shadow: none !important;
}

:is(.sms-enabled, .btn-orange):hover {
    background: var(--pp-orange-hover) !important;
}

:is(.sms-sent, .btn-purple) {
    background: var(--pp-purple) !important;
    border-color: #5c4cc8 !important;
    color: #fff !important;
    box-shadow: none !important;
}

:is(.sms-sent, .btn-purple):hover {
    background: var(--pp-purple-hover) !important;
}

:is(.delete-btn, .card-delete-btn) {
    background: var(--pp-dark) !important;
    color: #fff !important;
}

:is(.delete-btn, .card-delete-btn):hover {
    background: var(--pp-dark-hover) !important;
}

:is(
    header.portal-header,
    .portal-header,
    .page-header,
    .header-bar,
    .topbar,
    .top-bar,
    .head-bar,
    .brand-header,
    .admin-header
) :is(
    a.btn,
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout,
    .header-actions .btn,
    .portal-header-actions .btn
) {
    border-radius: var(--pp-header-btn-radius) !important;
}

@media (min-width: 761px) {
    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        border-radius: var(--pp-table-btn-radius) !important;
    }

    .tracking-sms-form .tracking-input {
        border-radius: 7px !important;
    }
}

@media (max-width: 760px) {
    .mobile-group-collapsible > .mobile-group-title,
    .order-card {
        overflow: hidden !important;
    }

    .mobile-group-collapsible > .mobile-group-title {
        padding-right: 38px !important;
    }

    .mobile-group-collapsible > .mobile-group-title::after {
        right: 10px !important;
        width: 18px !important;
        text-align: center !important;
        font-size: 20px !important;
    }

    .order-card {
        padding-right: 40px !important;
    }

    .order-card::after {
        right: 10px !important;
        width: 18px !important;
        text-align: center !important;
        font-size: 20px !important;
    }

    :is(.toggle-btn, .card-link-btn) {
        border-radius: var(--pp-card-btn-radius) !important;
    }
}

/* v9 adaptive professional button system */
:root {
    --pp-action-primary: #315a88;
    --pp-action-primary-hover: #284c75;
    --pp-action-text: #334155;
    --pp-action-muted: #64748b;
    --pp-action-border: #d9e0e8;
    --pp-action-secondary-bg: #ffffff;
    --pp-action-secondary-hover: #f7f9fc;

    --pp-success-bg: #edf8f0;
    --pp-success-border: #cce8d3;
    --pp-success-text: #24713c;

    --pp-danger-bg: #fff8f7;
    --pp-danger-border: #efc9c4;
    --pp-danger-text: #b54337;
    --pp-danger-hover: #fff0ee;

    --pp-disabled-bg: #f1f4f7;
    --pp-disabled-border: #dce2e8;
    --pp-disabled-text: #8a96a3;

    --pp-control-radius: 8px;
    --pp-table-radius: 14px;
    --pp-table-gap: 22px;
}

/* Primary actions: one calm brand color instead of many vivid fills. */
:is(.btn-primary, .btn-blue, .btn-green, .calculate-btn, .admin-report-download) {
    background: var(--pp-action-primary) !important;
    color: #fff !important;
    border-color: var(--pp-action-primary) !important;
    box-shadow: none !important;
}

:is(.btn-primary, .btn-blue, .btn-green, .calculate-btn, .admin-report-download):hover {
    background: var(--pp-action-primary-hover) !important;
    border-color: var(--pp-action-primary-hover) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10) !important;
}

/* Secondary actions: Edit and neutral actions stay quiet. */
:is(.edit-btn, .card-edit-btn, .btn-secondary) {
    background: var(--pp-action-secondary-bg) !important;
    color: var(--pp-action-text) !important;
    border: 1px solid var(--pp-action-border) !important;
    box-shadow: none !important;
}

:is(.edit-btn, .card-edit-btn, .btn-secondary):hover {
    background: var(--pp-action-secondary-hover) !important;
    border-color: #c8d1dc !important;
    color: #243244 !important;
}

/* Ghost actions for low-priority navigation. */
.btn-ghost {
    background: transparent !important;
    color: var(--pp-action-muted) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.btn-ghost:hover {
    background: #f1f5f9 !important;
    color: var(--pp-action-text) !important;
}

/* Danger remains visible without a heavy black/red block. */
:is(.delete-btn, .card-delete-btn, .btn-danger, .btn-red) {
    background: var(--pp-danger-bg) !important;
    color: var(--pp-danger-text) !important;
    border: 1px solid var(--pp-danger-border) !important;
    box-shadow: none !important;
}

:is(.delete-btn, .card-delete-btn, .btn-danger, .btn-red):hover {
    background: var(--pp-danger-hover) !important;
    border-color: #e7ada6 !important;
    color: #a4372d !important;
}

/* Semantic table states use soft tones, not saturated fills. */
:is(.status-btn.green, .toggle-btn.toggle-green) {
    background: var(--pp-success-bg) !important;
    color: var(--pp-success-text) !important;
    border: 1px solid var(--pp-success-border) !important;
    box-shadow: none !important;
}

:is(.status-btn.green, .toggle-btn.toggle-green):hover {
    background: #e4f4e8 !important;
    border-color: #b9ddc3 !important;
}

:is(.status-btn.red, .toggle-btn.toggle-red) {
    background: var(--pp-danger-bg) !important;
    color: var(--pp-danger-text) !important;
    border: 1px solid var(--pp-danger-border) !important;
    box-shadow: none !important;
}

:is(.status-btn.red, .toggle-btn.toggle-red):hover {
    background: var(--pp-danger-hover) !important;
    border-color: #e7ada6 !important;
}

/* SMS: unsent is primary; sent is neutral secondary. */
.sms-enabled {
    background: var(--pp-action-primary) !important;
    color: #fff !important;
    border: 1px solid var(--pp-action-primary) !important;
    box-shadow: none !important;
}

.sms-enabled:hover {
    background: var(--pp-action-primary-hover) !important;
    border-color: var(--pp-action-primary-hover) !important;
}

.sms-sent,
.sms-sent:hover {
    background: #eef2f6 !important;
    color: #536171 !important;
    border: 1px solid #d5dde6 !important;
    box-shadow: none !important;
}

.sms-disabled,
.sms-disabled:hover,
:disabled {
    background-color: var(--pp-disabled-bg);
    color: var(--pp-disabled-text);
    border-color: var(--pp-disabled-border);
    box-shadow: none !important;
}

/* Normal non-table controls remain compact and comfortable. */
:is(.btn, .back-btn, .portal-button, .logout-btn, a.back) {
    border-radius: var(--pp-control-radius) !important;
}

:is(
    header.portal-header,
    header.page-header,
    div.page-header,
    header.portal-page-header,
    header.header,
    .portal-header,
    .page-header
) :is(
    a.btn,
    a.back-btn,
    a.back,
    a.portal-logout,
    a.portal-button,
    a.logout,
    a.tab.logout,
    .header-actions .btn
) {
    width: auto !important;
    min-width: 62px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/*
 * Table controls scale from the real table container width.
 * This keeps buttons, text and cell padding proportional on each app.
 */
@media (min-width: 761px) {
    .table-wrap,
    .email-orders-table-wrap {
        container-type: inline-size;
        container-name: pp-table;
        overflow-x: clip !important;
        border-radius: var(--pp-table-radius) !important;

        --pp-table-font: clamp(12px, .90cqi, 15px);
        --pp-table-head-font: clamp(12px, .88cqi, 15px);
        --pp-table-pad-y: clamp(6px, .55cqi, 10px);
        --pp-table-pad-x: clamp(6px, .55cqi, 10px);
        --pp-table-action-height: clamp(32px, 2.35cqi, 38px);
        --pp-table-action-font: clamp(11px, .90cqi, 14px);
        --pp-table-action-pad: clamp(4px, .55cqi, 10px);
    }

    .orders-section + .orders-section,
    .table-wrap + .table-wrap,
    .email-orders-table-wrap + .email-orders-table-wrap {
        margin-top: var(--pp-table-gap) !important;
    }

    .table-wrap > table,
    .email-orders-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .table-wrap thead th,
    .email-orders-table thead th {
        padding: clamp(12px, .92cqi, 16px) var(--pp-table-pad-x) !important;
        font-size: var(--pp-table-head-font) !important;
        line-height: 1.18 !important;
    }

    .table-wrap tbody td,
    .email-orders-table tbody td {
        padding: var(--pp-table-pad-y) var(--pp-table-pad-x) !important;
        font-size: var(--pp-table-font) !important;
        line-height: 1.2 !important;
    }

    .table-wrap :is(.status-btn, .edit-btn, .delete-btn),
    .email-orders-table .action-cell :is(.btn, button, a.btn) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--pp-table-action-height) !important;
        min-height: var(--pp-table-action-height) !important;
        max-height: var(--pp-table-action-height) !important;
        padding: 0 var(--pp-table-action-pad) !important;
        border-radius: clamp(6px, .50cqi, 8px) !important;
        font-size: var(--pp-table-action-font) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tracking-sms-form {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: clamp(4px, .42cqi, 8px) !important;
    }

    .tracking-sms-form .tracking-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--pp-table-action-height) !important;
        padding: 0 clamp(5px, .45cqi, 8px) !important;
        border-radius: 7px !important;
        font-size: clamp(10px, .78cqi, 13px) !important;
    }

    .tracking-sms-form .sms-btn {
        flex: 0 1 clamp(68px, 6.5cqi, 96px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 96px !important;
        height: var(--pp-table-action-height) !important;
        min-height: var(--pp-table-action-height) !important;
        padding: 0 clamp(4px, .45cqi, 8px) !important;
        border-radius: clamp(6px, .50cqi, 8px) !important;
        font-size: var(--pp-table-action-font) !important;
    }
}

@container pp-table (max-width: 1220px) {
    .table-wrap thead th,
    .email-orders-table thead th {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@container pp-table (max-width: 1050px) {
    .table-wrap,
    .email-orders-table-wrap {
        --pp-table-font: 11.5px;
        --pp-table-head-font: 11.5px;
        --pp-table-pad-y: 6px;
        --pp-table-pad-x: 5px;
        --pp-table-action-height: 31px;
        --pp-table-action-font: 10.5px;
        --pp-table-action-pad: 4px;
    }

    .tracking-sms-form .sms-btn {
        flex-basis: 64px !important;
    }
}

/* Mobile stays touch-friendly; arrows are locked inside the clickable card/title. */
@media (max-width: 760px) {
    :is(.toggle-btn, .card-link-btn, .btn) {
        min-height: 44px;
        border-radius: 9px !important;
    }

    .order-card,
    .orders-section tr[data-delivery-key],
    .mobile-group-collapsible > .mobile-group-title,
    .orders-section.mobile-group-collapsible > .orders-section-title {
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .order-card {
        padding-right: 42px !important;
    }

    .order-card::after,
    .orders-section tr[data-delivery-key]::after {
        right: 9px !important;
        width: 20px !important;
        max-width: 20px !important;
        text-align: center !important;
        font-size: 20px !important;
        pointer-events: none !important;
    }

    .mobile-group-collapsible > .mobile-group-title,
    .orders-section.mobile-group-collapsible > .orders-section-title {
        padding-right: 40px !important;
    }

    .mobile-group-collapsible > .mobile-group-title::after,
    .orders-section.mobile-group-collapsible > .orders-section-title::after {
        right: 9px !important;
        width: 20px !important;
        max-width: 20px !important;
        text-align: center !important;
        font-size: 20px !important;
        pointer-events: none !important;
    }
}

/* v10 photo-matched button palette */
:root {
    --pp-photo-header: #244d8d;
    --pp-photo-blue: #315a88;
    --pp-photo-blue-hover: #284c75;

    --pp-photo-green-bg: #d4edda;
    --pp-photo-green-border: #b8dfc2;
    --pp-photo-green-text: #1e7e34;
    --pp-photo-green-hover: #c8e7d0;

    --pp-photo-red-bg: #fff8f7;
    --pp-photo-red-border: #efc9c4;
    --pp-photo-red-text: #b54337;
    --pp-photo-red-hover: #fff0ee;

    --pp-photo-neutral-bg: #eef2f6;
    --pp-photo-neutral-border: #d5dde6;
    --pp-photo-neutral-text: #536171;
}

/* Keep the table identity consistent with the reference screenshot. */
.table-wrap thead th,
.email-orders-table thead th,
.orders-section > .orders-section-title {
    background: var(--pp-photo-header) !important;
    color: #fff !important;
}

/* Primary actions use the solid blue visible in the screenshot. */
:is(
    .btn-primary,
    .btn-blue,
    .btn-green,
    .calculate-btn,
    .admin-report-download,
    .open-day-btn,
    .open-search-day-btn
) {
    background: var(--pp-photo-blue) !important;
    color: #fff !important;
    border-color: var(--pp-photo-blue) !important;
    box-shadow: none !important;
}

:is(
    .btn-primary,
    .btn-blue,
    .btn-green,
    .calculate-btn,
    .admin-report-download,
    .open-day-btn,
    .open-search-day-btn
):hover {
    background: var(--pp-photo-blue-hover) !important;
    border-color: var(--pp-photo-blue-hover) !important;
}

/* Positive states match the exact green family from the reference image. */
:is(
    .status-btn.green,
    .toggle-btn.toggle-green,
    .status-label.received
) {
    background: var(--pp-photo-green-bg) !important;
    color: var(--pp-photo-green-text) !important;
    border: 1px solid var(--pp-photo-green-border) !important;
    box-shadow: none !important;
}

:is(
    .status-btn.green,
    .toggle-btn.toggle-green,
    .status-label.received
):hover {
    background: var(--pp-photo-green-hover) !important;
    border-color: #a9d6b5 !important;
}

/* Negative states and destructive actions use the reference red treatment. */
:is(
    .status-btn.red,
    .toggle-btn.toggle-red,
    .delete-btn,
    .card-delete-btn,
    .btn-danger,
    .btn-red
) {
    background: var(--pp-photo-red-bg) !important;
    color: var(--pp-photo-red-text) !important;
    border: 1px solid var(--pp-photo-red-border) !important;
    box-shadow: none !important;
}

:is(
    .status-btn.red,
    .toggle-btn.toggle-red,
    .delete-btn,
    .card-delete-btn,
    .btn-danger,
    .btn-red
):hover {
    background: var(--pp-photo-red-hover) !important;
    border-color: #e8afa8 !important;
    color: #a53a30 !important;
}

/* Edit remains secondary so tables do not become a row of solid colors. */
:is(.edit-btn, .card-edit-btn, .btn-secondary) {
    background: #fff !important;
    color: #405268 !important;
    border: 1px solid #d6dee7 !important;
    box-shadow: none !important;
}

:is(.edit-btn, .card-edit-btn, .btn-secondary):hover {
    background: #f6f8fb !important;
    color: #2d4057 !important;
    border-color: #c2ccd8 !important;
}

/* SMS uses blue when actionable and neutral when already sent. */
.sms-enabled {
    background: var(--pp-photo-blue) !important;
    color: #fff !important;
    border: 1px solid var(--pp-photo-blue) !important;
    box-shadow: none !important;
}

.sms-enabled:hover {
    background: var(--pp-photo-blue-hover) !important;
    border-color: var(--pp-photo-blue-hover) !important;
}

.sms-sent,
.sms-sent:hover {
    background: var(--pp-photo-neutral-bg) !important;
    color: var(--pp-photo-neutral-text) !important;
    border: 1px solid var(--pp-photo-neutral-border) !important;
    box-shadow: none !important;
}

.sms-disabled,
.sms-disabled:hover,
button:disabled {
    background: #f1f4f7 !important;
    color: #8a96a3 !important;
    border-color: #dce2e8 !important;
    box-shadow: none !important;
}

/* Preserve the compact, slightly rounded geometry already approved. */
@media (min-width: 761px) {
    .table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn),
    .email-orders-table-wrap :is(.status-btn, .edit-btn, .delete-btn, .btn, a.btn, button) {
        border-radius: 7px !important;
    }
}

@media (max-width: 760px) {
    :is(.toggle-btn, .card-link-btn, .btn) {
        border-radius: 8px !important;
    }
}

/* v11 global binary-state rule: pending red, completed green */
:root {
    --pp-state-pending-bg: #f9e1de;
    --pp-state-pending-border: #e7ada6;
    --pp-state-pending-text: #a93b31;
    --pp-state-pending-hover: #f5d3cf;

    --pp-state-done-bg: #cfead7;
    --pp-state-done-border: #a8d8b5;
    --pp-state-done-text: #177331;
    --pp-state-done-hover: #c0e2ca;

    --pp-state-disabled-bg: #eef2f6;
    --pp-state-disabled-border: #d5dde6;
    --pp-state-disabled-text: #7f8b98;
}

/* Every binary status follows one rule:
   pending = red, completed = green, unavailable = gray. */
:is(
    .status-btn.red,
    .toggle-btn.toggle-red,
    button.sms-enabled
) {
    background: var(--pp-state-pending-bg) !important;
    color: var(--pp-state-pending-text) !important;
    border: 1px solid var(--pp-state-pending-border) !important;
    box-shadow: none !important;
}

:is(
    .status-btn.red,
    .toggle-btn.toggle-red,
    button.sms-enabled
):hover {
    background: var(--pp-state-pending-hover) !important;
    border-color: #df958c !important;
    color: #972f27 !important;
}

:is(
    .status-btn.green,
    .toggle-btn.toggle-green,
    button.sms-sent,
    button.sms-sent:disabled
) {
    background: var(--pp-state-done-bg) !important;
    color: var(--pp-state-done-text) !important;
    border: 1px solid var(--pp-state-done-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

:is(
    .status-btn.green,
    .toggle-btn.toggle-green,
    button.sms-sent
):hover {
    background: var(--pp-state-done-hover) !important;
    border-color: #93cda3 !important;
    color: #126128 !important;
}

:is(
    button.sms-disabled,
    button.sms-disabled:hover
) {
    background: var(--pp-state-disabled-bg) !important;
    color: var(--pp-state-disabled-text) !important;
    border: 1px solid var(--pp-state-disabled-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Keep destructive actions separate from status semantics. */
:is(.delete-btn, .card-delete-btn, .btn-danger) {
    background: #fff8f7 !important;
    color: #b54337 !important;
    border: 1px solid #efc9c4 !important;
}

:is(.delete-btn, .card-delete-btn, .btn-danger):hover {
    background: #fff0ee !important;
    color: #a53a30 !important;
    border-color: #e8afa8 !important;
}

/* v12 strict status colors: available pending red, completed green */
:root {
    --pp-status-pending-bg: #f9e1de;
    --pp-status-pending-border: #e7ada6;
    --pp-status-pending-text: #a93b31;
    --pp-status-pending-hover: #f5d3cf;

    --pp-status-done-bg: #cfead7;
    --pp-status-done-border: #a8d8b5;
    --pp-status-done-text: #177331;
    --pp-status-done-hover: #c0e2ca;

    --pp-status-disabled-bg: #eef2f6;
    --pp-status-disabled-border: #d5dde6;
    --pp-status-disabled-text: #7f8b98;
}

/* Pending and clickable: red. */
.table-wrap .status-btn.red,
.table-wrap .toggle-btn.toggle-red,
.table-wrap .status-btn.sms-enabled,
.mobile-cards .toggle-btn.toggle-red,
.mobile-cards .toggle-btn.sms-enabled {
    background: var(--pp-status-pending-bg) !important;
    color: var(--pp-status-pending-text) !important;
    border: 1px solid var(--pp-status-pending-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.table-wrap .status-btn.red:hover,
.table-wrap .toggle-btn.toggle-red:hover,
.table-wrap .status-btn.sms-enabled:hover,
.mobile-cards .toggle-btn.toggle-red:hover,
.mobile-cards .toggle-btn.sms-enabled:hover {
    background: var(--pp-status-pending-hover) !important;
    border-color: #df958c !important;
    color: #972f27 !important;
}

/* Completed: green, including SMS Again / SMS Sent. */
.table-wrap .status-btn.green,
.table-wrap .toggle-btn.toggle-green,
.table-wrap .status-btn.sms-sent,
.mobile-cards .toggle-btn.toggle-green,
.mobile-cards .toggle-btn.sms-sent,
.table-wrap button.sms-sent:disabled,
.mobile-cards button.sms-sent:disabled {
    background: var(--pp-status-done-bg) !important;
    color: var(--pp-status-done-text) !important;
    border: 1px solid var(--pp-status-done-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.table-wrap .status-btn.green:hover,
.table-wrap .toggle-btn.toggle-green:hover,
.table-wrap .status-btn.sms-sent:hover,
.mobile-cards .toggle-btn.toggle-green:hover,
.mobile-cards .toggle-btn.sms-sent:hover {
    background: var(--pp-status-done-hover) !important;
    border-color: #93cda3 !important;
    color: #126128 !important;
}

/* Not available yet: gray. */
.table-wrap .status-btn.sms-disabled,
.mobile-cards .toggle-btn.sms-disabled,
.table-wrap button.sms-disabled:disabled,
.mobile-cards button.sms-disabled:disabled {
    background: var(--pp-status-disabled-bg) !important;
    color: var(--pp-status-disabled-text) !important;
    border: 1px solid var(--pp-status-disabled-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* v13 exact approved palette: deep red + sage + blue + mustard */
:root {
    --pp-approved-blue: #244D8D;
    --pp-approved-blue-hover: #193B70;

    --pp-approved-red: #B4232F;
    --pp-approved-red-hover: #941C26;

    --pp-approved-green: #4F7668;
    --pp-approved-green-hover: #3F6256;

    --pp-approved-yellow: #D9A514;
    --pp-approved-yellow-hover: #B8890F;
    --pp-approved-yellow-text: #252218;

    --pp-approved-delete: #991B2E;
    --pp-approved-delete-hover: #7F1727;
    --pp-approved-delete-soft: #FAF0F2;

    --pp-approved-disabled-bg: #EEF2F6;
    --pp-approved-disabled-border: #D5DDE6;
    --pp-approved-disabled-text: #7F8B98;
}

/* Normal application actions stay blue. */
:is(
    .btn-primary,
    .btn-blue,
    .btn-green,
    .edit-btn,
    .card-edit-btn,
    .page-btn,
    .nav-btn,
    .open-day-btn,
    .open-search-day-btn,
    .calculate-btn,
    .admin-report-download
) {
    background: var(--pp-approved-blue) !important;
    color: #fff !important;
    border-color: var(--pp-approved-blue) !important;
    box-shadow: none !important;
}

:is(
    .btn-primary,
    .btn-blue,
    .btn-green,
    .edit-btn,
    .card-edit-btn,
    .page-btn,
    .nav-btn,
    .open-day-btn,
    .open-search-day-btn,
    .calculate-btn,
    .admin-report-download
):hover {
    background: var(--pp-approved-blue-hover) !important;
    border-color: var(--pp-approved-blue-hover) !important;
    color: #fff !important;
}

/* Pending / not completed yet = solid Deep Red. */
:is(
    .table-wrap .status-btn.red,
    .table-wrap .toggle-btn.toggle-red,
    .table-wrap .status-btn.sms-enabled,
    .mobile-cards .toggle-btn.toggle-red,
    .mobile-cards .toggle-btn.sms-enabled,
    .orders-section .status-btn.red
) {
    background: var(--pp-approved-red) !important;
    color: #fff !important;
    border: 1px solid var(--pp-approved-red) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

:is(
    .table-wrap .status-btn.red,
    .table-wrap .toggle-btn.toggle-red,
    .table-wrap .status-btn.sms-enabled,
    .mobile-cards .toggle-btn.toggle-red,
    .mobile-cards .toggle-btn.sms-enabled,
    .orders-section .status-btn.red
):hover {
    background: var(--pp-approved-red-hover) !important;
    border-color: var(--pp-approved-red-hover) !important;
    color: #fff !important;
}

/* Completed = solid Sage Green. */
:is(
    .table-wrap .status-btn.green,
    .table-wrap .toggle-btn.toggle-green,
    .table-wrap .status-btn.sms-sent,
    .mobile-cards .toggle-btn.toggle-green,
    .mobile-cards .toggle-btn.sms-sent,
    .orders-section .status-btn.green,
    .table-wrap button.sms-sent:disabled,
    .mobile-cards button.sms-sent:disabled
) {
    background: var(--pp-approved-green) !important;
    color: #fff !important;
    border: 1px solid var(--pp-approved-green) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

:is(
    .table-wrap .status-btn.green,
    .table-wrap .toggle-btn.toggle-green,
    .table-wrap .status-btn.sms-sent,
    .mobile-cards .toggle-btn.toggle-green,
    .mobile-cards .toggle-btn.sms-sent,
    .orders-section .status-btn.green
):hover {
    background: var(--pp-approved-green-hover) !important;
    border-color: var(--pp-approved-green-hover) !important;
    color: #fff !important;
}

/* Warning/attention utility class for apps that need it. */
:is(.btn-warning, .warning, .status-warning, .amber) {
    background: var(--pp-approved-yellow) !important;
    color: var(--pp-approved-yellow-text) !important;
    border: 1px solid var(--pp-approved-yellow) !important;
    box-shadow: none !important;
}

:is(.btn-warning, .warning, .status-warning, .amber):hover {
    background: var(--pp-approved-yellow-hover) !important;
    border-color: var(--pp-approved-yellow-hover) !important;
}

/* Delete stays visually distinct from a normal pending status. */
:is(
    .delete-btn,
    .card-delete-btn,
    .btn-danger
) {
    background: #fff !important;
    color: var(--pp-approved-delete) !important;
    border: 1px solid #BE4354 !important;
    box-shadow: none !important;
}

:is(
    .delete-btn,
    .card-delete-btn,
    .btn-danger
):hover {
    background: var(--pp-approved-delete-soft) !important;
    color: var(--pp-approved-delete-hover) !important;
    border-color: var(--pp-approved-delete-hover) !important;
}

/* Disabled is gray only when the action is genuinely unavailable. */
:is(
    .table-wrap .status-btn.sms-disabled,
    .mobile-cards .toggle-btn.sms-disabled,
    .table-wrap button.sms-disabled:disabled,
    .mobile-cards button.sms-disabled:disabled
) {
    background: var(--pp-approved-disabled-bg) !important;
    color: var(--pp-approved-disabled-text) !important;
    border: 1px solid var(--pp-approved-disabled-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* v14 lower button radius only */
:root {
    --pp-button-radius-general: 7px;
    --pp-button-radius-table: 6px;
    --pp-button-radius-mobile: 7px;
}

/* General/header controls */
:is(
    .btn,
    .back-btn,
    .portal-button,
    .logout-btn,
    a.back,
    .calculate-btn,
    .admin-report-download,
    .page-btn,
    .nav-btn
) {
    border-radius: var(--pp-button-radius-general) !important;
}

/* Table action controls */
@media (min-width: 761px) {
    .table-wrap :is(
        .status-btn,
        .edit-btn,
        .delete-btn,
        .btn
    ),
    .email-orders-table-wrap :is(
        .status-btn,
        .edit-btn,
        .delete-btn,
        .btn,
        a.btn,
        button
    ),
    .tracking-sms-form .tracking-input,
    .tracking-sms-form .sms-btn {
        border-radius: var(--pp-button-radius-table) !important;
    }
}

/* Mobile remains touch-friendly, but less rounded. */
@media (max-width: 760px) {
    :is(
        .btn,
        .toggle-btn,
        .card-link-btn,
        .status-btn,
        .edit-btn,
        .delete-btn
    ) {
        border-radius: var(--pp-button-radius-mobile) !important;
    }
}

/* v15 yes-no + bright reference green + white status cells */
:root {
    /* Sampled from the supplied green reference image. */
    --pp-approved-green: #4CBA6F;
    --pp-approved-green-hover: #3FA35F;
    --pp-approved-red: #B4232F;
    --pp-approved-red-hover: #941C26;
}

/* Completed status: only the button turns green. */
:is(
    .table-wrap .status-btn.green,
    .table-wrap .toggle-btn.toggle-green,
    .table-wrap .status-btn.sms-sent,
    .mobile-cards .toggle-btn.toggle-green,
    .mobile-cards .toggle-btn.sms-sent,
    .orders-section .status-btn.green,
    .table-wrap button.sms-sent:disabled,
    .mobile-cards button.sms-sent:disabled
) {
    background: var(--pp-approved-green) !important;
    color: #fff !important;
    border-color: var(--pp-approved-green) !important;
    opacity: 1 !important;
}

:is(
    .table-wrap .status-btn.green,
    .table-wrap .toggle-btn.toggle-green,
    .table-wrap .status-btn.sms-sent,
    .mobile-cards .toggle-btn.toggle-green,
    .mobile-cards .toggle-btn.sms-sent,
    .orders-section .status-btn.green
):hover {
    background: var(--pp-approved-green-hover) !important;
    border-color: var(--pp-approved-green-hover) !important;
    color: #fff !important;
}

/* Pending binary status stays Deep Red. */
:is(
    .table-wrap .status-btn.red,
    .table-wrap .toggle-btn.toggle-red,
    .orders-section .status-btn.red,
    .mobile-cards .toggle-btn.toggle-red
) {
    background: var(--pp-approved-red) !important;
    color: #fff !important;
    border-color: var(--pp-approved-red) !important;
}

:is(
    .table-wrap .status-btn.red,
    .table-wrap .toggle-btn.toggle-red,
    .orders-section .status-btn.red,
    .mobile-cards .toggle-btn.toggle-red
):hover {
    background: var(--pp-approved-red-hover) !important;
    border-color: var(--pp-approved-red-hover) !important;
}

/* Never color the table cell/row just because its status is complete. */
td.status-done,
td.sms-ready-cell,
tr.row-taken,
tr.row-taken > td {
    background: #fff !important;
}

/* SMS text is black in every SMS state, as requested. */
:is(
    .sms-btn.sms-enabled,
    .sms-btn.sms-disabled,
    .sms-btn.sms-sent,
    .toggle-btn.sms-enabled,
    .toggle-btn.sms-disabled,
    .toggle-btn.sms-sent
) {
    color: #111827 !important;
}

/* If SMS is available but not sent, keep the binary pending state red. */
:is(
    .sms-btn.sms-enabled,
    .toggle-btn.sms-enabled
) {
    background: var(--pp-approved-red) !important;
    border-color: var(--pp-approved-red) !important;
}

/* Sent/Again uses the same approved green but with black SMS lettering. */
:is(
    .sms-btn.sms-sent,
    .toggle-btn.sms-sent,
    button.sms-sent:disabled
) {
    background: var(--pp-approved-green) !important;
    border-color: var(--pp-approved-green) !important;
    color: #111827 !important;
    opacity: 1 !important;
}

/* Unavailable SMS remains neutral gray with readable black text. */
:is(
    .sms-btn.sms-disabled,
    .toggle-btn.sms-disabled,
    button.sms-disabled:disabled
) {
    background: #EEF2F6 !important;
    border-color: #D5DDE6 !important;
    color: #111827 !important;
    opacity: 1 !important;
}

/* v16 yellow send-sms + smaller arrows + desktop/mobile cleanup */
:root {
    --pp-approved-yellow: #D9A514;
    --pp-approved-yellow-hover: #B8890F;
    --pp-approved-yellow-text: #252218;
}

/* Available SMS action: mustard yellow with black text. */
:is(
    .sms-btn.sms-enabled,
    .toggle-btn.sms-enabled,
    .table-wrap .status-btn.sms-enabled,
    .mobile-cards .toggle-btn.sms-enabled
) {
    background: var(--pp-approved-yellow) !important;
    color: var(--pp-approved-yellow-text) !important;
    border: 1px solid var(--pp-approved-yellow) !important;
}

:is(
    .sms-btn.sms-enabled,
    .toggle-btn.sms-enabled,
    .table-wrap .status-btn.sms-enabled,
    .mobile-cards .toggle-btn.sms-enabled
):hover {
    background: var(--pp-approved-yellow-hover) !important;
    color: var(--pp-approved-yellow-text) !important;
    border-color: var(--pp-approved-yellow-hover) !important;
}

/* Date navigation arrows: smaller on desktop and mobile. */
.nav-btn {
    min-width: 28px !important;
    width: 28px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
}

@media (max-width: 760px) {
    .nav-btn {
        min-width: 26px !important;
        width: 26px !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 13px !important;
        border-radius: 5px !important;
    }

    .mobile-group-collapsible > .mobile-group-title,
    .orders-section.mobile-group-collapsible > .orders-section-title,
    .order-card {
        padding-right: 30px !important;
    }

    .mobile-group-collapsible > .mobile-group-title::after,
    .orders-section.mobile-group-collapsible > .orders-section-title::after,
    .order-card::after,
    .orders-section tr[data-delivery-key]::after {
        right: 6px !important;
        width: 14px !important;
        max-width: 14px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }
}

/* v17 square tables + white header dividers + arrived gap + row hover */
:root {
    --pp-table-radius: 0px;
    --pp-table-gap: 18px;
}

/* Remove table rounding only. */
@media (min-width: 761px) {
    .table-wrap,
    .email-orders-table-wrap,
    .table-wrap table,
    .email-orders-table,
    .table-wrap thead th,
    .email-orders-table thead th,
    .table-wrap tbody tr:last-child td,
    .email-orders-table tbody tr:last-child td {
        border-radius: 0 !important;
    }

    .table-wrap,
    .email-orders-table-wrap {
        overflow: hidden !important;
    }

    /* Blue headers need white separators for clearer contrast. */
    .table-wrap thead th,
    .email-orders-table thead th {
        border-right: 1px solid rgba(255, 255, 255, .42) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .42) !important;
    }

    .table-wrap thead th:last-child,
    .email-orders-table thead th:last-child {
        border-right-color: transparent !important;
    }

    /* Hover every normal row without affecting section/group bars. */
    .table-wrap tbody tr:not(.section-row):not(.order-group-row):hover > td,
    .email-orders-table tbody tr:hover > td {
        background: #f4f8fd !important;
    }

    /* Keep group bars flat and distinct. */
    .table-wrap tbody tr.order-group-row:hover > td,
    .table-wrap tbody tr.section-row:hover > td {
        filter: none !important;
    }

    /* Larger visual break before Arrived/Completed groups. */
    .table-wrap tbody tr.group-arrived > td,
    .table-wrap tbody tr.group-completed > td {
        border-top: 16px solid #ffffff !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    /* Desktop group arrows smaller and cleaner. */
    .group-completed td::after {
        font-size: 16px !important;
        line-height: 1 !important;
    }
}

/* Mobile keeps no table rounding where visible and tighter arrows. */
@media (max-width: 760px) {
    .nav-btn {
        min-width: 24px !important;
        width: 24px !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 12px !important;
    }

    .mobile-group-collapsible > .mobile-group-title::after,
    .orders-section.mobile-group-collapsible > .orders-section-title::after,
    .order-card::after,
    .orders-section tr[data-delivery-key]::after {
        right: 6px !important;
        width: 12px !important;
        max-width: 12px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
}

/* v19 neutral delivery section headers: blue only on table columns */
.orders-section > .orders-section-title {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;

    background: #f7f9fc !important;
    color: #1e293b !important;

    border: 1px solid #dbe3ec !important;
    border-left: 4px solid #64748b !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;

    box-shadow: none !important;
}

.orders-section > .orders-section-title.completed-title {
    background: #f7f9fc !important;
    color: #1e293b !important;
    border-left-color: #4cba6f !important;
}

.orders-section > .orders-section-title .order-icon {
    width: 22px !important;
    height: 17px !important;
    object-fit: contain !important;
    filter: none !important;
}

.orders-section > .orders-section-title .completed-icon {
    width: 21px !important;
    height: 21px !important;
    color: #4cba6f !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

/* The actual table column header remains the only blue bar. */
.orders-section > .table-wrap thead th {
    background: #244d8d !important;
    color: #fff !important;
}

/* Clear visual separation between delivery sections. */
.orders-section + .orders-section {
    margin-top: 30px !important;
}

@media (max-width: 760px) {
    .orders-section > .orders-section-title {
        min-height: 42px !important;
        padding: 0 30px 0 11px !important;
        font-size: 16px !important;
        border-left-width: 4px !important;
    }

    .orders-section > .orders-section-title .order-icon {
        width: 19px !important;
        height: 15px !important;
    }

    .orders-section > .orders-section-title .completed-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 17px !important;
    }

    .orders-section + .orders-section {
        margin-top: 20px !important;
    }
}

/* v20 final cleanup: no vertical accents, smaller arrows, green selected toggles */

/* Delivery section titles: no left accent bars. */
.orders-section > .orders-section-title {
    border-left: 0 !important;
    padding-left: 14px !important;
    background: #f7f9fc !important;
    color: #1e293b !important;
}

.orders-section > .orders-section-title.completed-title {
    border-left: 0 !important;
    background: #f7f9fc !important;
    color: #1e293b !important;
}

/* Keep only icon/color hint, not a vertical stripe. */
.orders-section > .orders-section-title .completed-icon {
    color: #4cba6f !important;
}

.orders-section > .orders-section-title .order-icon {
    filter: none !important;
}

/* Smaller date arrows on desktop. */
.nav-btn {
    min-width: 24px !important;
    width: 24px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
    flex: 0 0 24px !important;
}

/* Selected top-bar filters become green. */
.top-bar-right > .btn.btn-green,
.top-bar-right > a.btn.btn-green {
    background: #4cba6f !important;
    border-color: #4cba6f !important;
    color: #fff !important;
    box-shadow: none !important;
}

.top-bar-right > .btn.btn-green:hover,
.top-bar-right > a.btn.btn-green:hover {
    background: #3fa35f !important;
    border-color: #3fa35f !important;
    color: #fff !important;
}

/* Unselected top-bar filters stay blue. */
.top-bar-right > .btn.btn-blue,
.top-bar-right > a.btn.btn-blue {
    background: #244d8d !important;
    border-color: #244d8d !important;
    color: #fff !important;
}

/* Mobile: tighter date-nav so arrows never stick out. */
@media (max-width: 760px) {
    .date-nav {
        grid-template-columns: 24px minmax(0, 1fr) 24px !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .date-nav input[type="date"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    .nav-btn {
        min-width: 20px !important;
        width: 20px !important;
        height: 22px !important;
        min-height: 22px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
        flex: 0 0 20px !important;
    }

    .mobile-group-collapsible > .mobile-group-title,
    .orders-section.mobile-group-collapsible > .orders-section-title,
    .order-card {
        padding-right: 26px !important;
    }

    .mobile-group-collapsible > .mobile-group-title::after,
    .orders-section.mobile-group-collapsible > .orders-section-title::after,
    .order-card::after,
    .orders-section tr[data-delivery-key]::after {
        right: 5px !important;
        width: 10px !important;
        max-width: 10px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .top-bar-right {
        gap: 6px !important;
    }

    .top-bar-right > .btn,
    .top-bar-right > a.btn {
        min-height: 34px !important;
        font-size: 12px !important;
    }
}

/* mobile section title toggle switches */
@media (max-width: 760px) {
    .mobile-section-switch {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        width: 42px;
        height: 24px;
        min-width: 42px;
        min-height: 24px;
        padding: 0;
        margin: 0 0 0 auto;
        border: 0;
        border-radius: 999px;
        background: #d7dee7;
        position: relative;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
        transition: background-color .16s ease;
    }

    .mobile-section-switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
        transition: transform .16s ease;
    }

    .mobile-section-switch[aria-expanded="true"] {
        background: #4cba6f;
    }

    .mobile-section-switch[aria-expanded="true"]::after {
        transform: translateX(18px);
    }

    .mobile-section-switch:focus-visible {
        outline: 3px solid rgba(36, 77, 141, .20);
        outline-offset: 2px;
    }

    .mobile-section-title-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .mobile-section-title-label {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* mobile binary status: visible title + toggle switch */
.binary-mobile-title,
.binary-mobile-state,
.binary-mobile-switch {
    display: none;
}

@media (max-width: 760px) {
    .mobile-binary-toggle,
    .email-orders-table .email-state-btn.mobile-binary-toggle,
    .orders-section .status-btn.mobile-binary-toggle,
    .delivery-card .mobile-binary-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 11px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;

        border: 1px solid #d9e1ea !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #1e293b !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .mobile-binary-toggle .desktop-binary-text {
        display: none !important;
    }

    .mobile-binary-toggle .binary-mobile-title {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        color: #25364b;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
    }

    .mobile-binary-toggle .binary-mobile-state {
        display: block !important;
        flex: 0 0 auto;
        min-width: 24px;
        text-align: right;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .mobile-binary-toggle.state-off .binary-mobile-state {
        color: #b4232f;
    }

    .mobile-binary-toggle.state-on .binary-mobile-state {
        color: #319a53;
    }

    .mobile-binary-toggle .binary-mobile-switch {
        display: block !important;
        position: relative;
        flex: 0 0 42px;
        width: 42px;
        height: 24px;
        border-radius: 999px;
        background: #b4232f;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
        transition: background-color .15s ease;
    }

    .mobile-binary-toggle .binary-mobile-switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
        transition: transform .15s ease;
    }

    .mobile-binary-toggle.state-on .binary-mobile-switch {
        background: #4cba6f;
    }

    .mobile-binary-toggle.state-on .binary-mobile-switch::after {
        transform: translateX(18px);
    }

    .mobile-binary-toggle:hover,
    .mobile-binary-toggle:active {
        background: #f8fafc !important;
    }

    .mobile-binary-toggle:focus-visible {
        outline: 3px solid rgba(36, 77, 141, .18) !important;
        outline-offset: 2px !important;
    }

    .email-orders-table .action-cell::before {
        display: none !important;
    }
}