body.cf-tenant,
body.fluent-workspace {
    background: var(--cf-bg);
}

body.cf-tenant .workspace-shell,
body.fluent-workspace .workspace-shell {
    min-height: 100vh;
}

body.cf-tenant .workspace-main,
body.fluent-workspace .workspace-main {
    min-width: 0;
}

.customer-picker {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-white);
}

.customer-option {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e7ecf0;
    background: var(--cf-white);
    color: var(--cf-text);
    text-align: left;
    cursor: pointer;
}

.customer-option:last-child {
    border-bottom: 0;
}

.customer-option:hover {
    background: var(--cf-surface-soft);
}

.customer-option.selected {
    background: #f2f6f8;
    box-shadow: inset 3px 0 0 var(--cf-gold-500);
}

.customer-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-surface-muted);
    color: var(--cf-navy-900);
    font-size: .72rem;
    font-weight: 800;
}

.customer-option-copy {
    min-width: 0;
}

.customer-option-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-option-copy small {
    display: block;
    overflow: hidden;
    color: var(--cf-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CommerceFlow r8.2.0 — tenant workspace shell */

body.cf-r820.cf-workspace .app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    background: var(--cf-bg);
}

body.cf-r820.cf-workspace .sidebar {
    position: sticky;
    z-index: 80;
    top: 0;
    height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #1d3448;
    background: var(--cf-navy-950);
    color: #dce5ec;
}

body.cf-r820.cf-workspace .sidebar-brand {
    min-height: 70px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

body.cf-r820.cf-workspace .brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-navy-950);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .04em;
}

body.cf-r820.cf-workspace .brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

body.cf-r820.cf-workspace .brand-copy strong {
    color: #fff;
    font-size: .91rem;
    letter-spacing: -.01em;
}

body.cf-r820.cf-workspace .brand-copy small {
    overflow: hidden;
    color: #9fb0bf;
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cf-r820.cf-workspace .sidebar-close {
    display: none;
    color: #d8e3eb;
}

body.cf-r820.cf-workspace .primary-action {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px;
    padding: 9px 11px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-gold-500);
    color: var(--cf-navy-950);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

body.cf-r820.cf-workspace .primary-action:hover {
    filter: brightness(1.035);
}

body.cf-r820.cf-workspace .sidebar-nav {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 2px 10px 14px;
}

body.cf-r820.cf-workspace .nav-group + .nav-group {
    margin-top: 17px;
}

body.cf-r820.cf-workspace .nav-group-label {
    display: block;
    padding: 0 9px 6px;
    color: #72899c;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.cf-r820.cf-workspace .nav-link {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-radius: var(--cf-radius-sm);
    color: #b8c7d2;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
}

body.cf-r820.cf-workspace .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

body.cf-r820.cf-workspace .nav-link.active {
    background: rgba(255,255,255,.095);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--cf-gold-500);
}

body.cf-r820.cf-workspace .nav-icon {
    width: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 20px;
}

body.cf-r820.cf-workspace .nav-icon svg {
    width: 17px;
    height: 17px;
}

body.cf-r820.cf-workspace .sidebar-footer {
    display: grid;
    gap: 11px;
    padding: 13px 14px;
    border-top: 1px solid rgba(255,255,255,.09);
}

body.cf-r820.cf-workspace .workspace-security {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9fb0bf;
    font-size: .7rem;
}

body.cf-r820.cf-workspace .workspace-security > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: #cbd7df;
}

body.cf-r820.cf-workspace .sidebar-user {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

body.cf-r820.cf-workspace .sidebar-user > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7edf2;
    color: var(--cf-navy-950);
    font-weight: 850;
}

body.cf-r820.cf-workspace .sidebar-user > div {
    min-width: 0;
    display: grid;
}

body.cf-r820.cf-workspace .sidebar-user strong {
    overflow: hidden;
    color: #fff;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cf-r820.cf-workspace .sidebar-user small {
    color: #879cad;
    font-size: .65rem;
}

body.cf-r820.cf-workspace .sidebar-footer .quiet-button {
    padding: 0;
    color: #9fb0bf;
    font-size: .7rem;
    text-align: left;
}

body.cf-r820.cf-workspace .sidebar-footer .quiet-button:hover {
    color: #fff;
}

body.cf-r820.cf-workspace .app-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.cf-r820.cf-workspace .desktop-topbar {
    position: sticky;
    z-index: 60;
    top: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 22px;
    border-bottom: 1px solid var(--cf-line);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
}

body.cf-r820.cf-workspace .topbar-title {
    min-width: 0;
    display: grid;
    gap: 1px;
}

body.cf-r820.cf-workspace .topbar-title > span {
    color: var(--cf-text-muted);
    font-size: .67rem;
}

body.cf-r820.cf-workspace .topbar-title > strong {
    overflow: hidden;
    color: var(--cf-navy-950);
    font-size: .93rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cf-r820.cf-workspace .topbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.cf-r820.cf-workspace :is(.topbar-icon-button,.topbar-update-button) {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text-soft);
}

body.cf-r820.cf-workspace .topbar-update-button > span {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--cf-danger);
    color: #fff;
    font-size: .55rem;
    font-weight: 800;
}

body.cf-r820.cf-workspace .topbar-user {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    gap: 8px;
    padding-left: 5px;
    color: var(--cf-text);
    text-decoration: none;
}

body.cf-r820.cf-workspace .topbar-user > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-surface-muted);
    color: var(--cf-navy-900);
    font-size: .72rem;
    font-weight: 850;
}

body.cf-r820.cf-workspace .topbar-user > div {
    display: grid;
}

body.cf-r820.cf-workspace .topbar-user strong {
    font-size: .72rem;
}

body.cf-r820.cf-workspace .topbar-user small {
    font-size: .62rem;
}

body.cf-r820.cf-workspace .page {
    width: min(100%, var(--cf-content));
    flex: 1;
    margin-inline: auto;
    padding: 24px 26px 36px;
}

body.cf-r820.cf-workspace .app-footer {
    padding: 12px 26px 16px;
    color: var(--cf-text-muted);
    font-size: .65rem;
    text-align: center;
}

body.cf-r820.cf-workspace :is(.mobile-header,.mobile-bottom-nav,.tablet-quick-nav,.sidebar-overlay) {
    display: none;
}


/* CommerceFlow r8.2.0 — Customer Orders */

body.cf-r820 .r74-create-order {
    margin-top: 18px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-white);
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820 .r74-create-order > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    color: var(--cf-navy-950);
    cursor: pointer;
    list-style: none;
}

body.cf-r820 .r74-create-order > summary::-webkit-details-marker {
    display: none;
}

body.cf-r820 .r74-create-order[open] > summary {
    border-bottom: 1px solid var(--cf-line);
}

body.cf-r820 .r74-create-order > summary strong {
    font-size: .9rem;
}

body.cf-r820 .r73-order-form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

body.cf-r820 .cf-customer-builder {
    padding: 0;
    border: 0;
    background: transparent;
}

body.cf-r820 .cf-customer-builder > legend {
    margin-bottom: 8px;
}

body.cf-r820 .cf-customer-mode-switch {
    width: min(100%, 430px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-muted);
}

body.cf-r820 .cf-customer-mode-switch .choice-tab {
    min-height: 38px;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: transparent;
    color: var(--cf-text-soft);
    text-align: center;
    font-size: .77rem;
    font-weight: 750;
}

body.cf-r820 .cf-customer-mode-switch .choice-tab strong {
    font-size: inherit;
}

body.cf-r820 .cf-customer-mode-switch .choice-tab.active {
    background: var(--cf-white);
    color: var(--cf-navy-950);
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820 .cf-existing-customer-panel,
body.cf-r820 .cf-new-customer-panel {
    padding: 0;
    border: 0;
    background: transparent;
}

body.cf-r820 .cf-customer-search {
    max-width: 620px;
    margin-bottom: 10px;
}

body.cf-r820 .cf-customer-picker {
    max-width: 760px;
    max-height: 270px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820 .cf-customer-picker .customer-option {
    min-height: 56px;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    padding: 8px 11px;
    border-bottom: 1px solid #e7ecf0;
    background: #fff;
}

body.cf-r820 .cf-customer-picker .customer-option:hover {
    background: #f8fafb;
}

body.cf-r820 .cf-customer-picker .customer-option.selected {
    background: #f2f6f8;
    box-shadow: inset 3px 0 0 var(--cf-gold-500);
}

body.cf-r820 .cf-customer-picker .customer-avatar {
    width: 32px;
    height: 32px;
    background: #edf2f5;
    color: var(--cf-navy-900);
}

body.cf-r820 .cf-customer-picker .customer-option-copy {
    display: grid;
    gap: 1px;
}

body.cf-r820 .cf-customer-picker .customer-option-copy strong {
    color: var(--cf-navy-900);
    font-size: .82rem;
}

body.cf-r820 .cf-customer-picker .customer-option-copy small {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .7rem;
}

body.cf-r820 .cf-customer-address {
    color: var(--cf-text-muted);
    font-size: .67rem;
}

body.cf-r820 .cf-customer-picker .customer-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cf-success);
    color: #fff;
    font-size: .65rem;
}

body.cf-r820 .cf-selected-customer {
    max-width: 620px;
    min-height: 50px;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #cbd8e0;
    border-radius: var(--cf-radius);
    background: #f6f9fb;
}

body.cf-r820 .cf-new-customer-panel {
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.cf-r820 .cf-new-customer-panel .full {
    grid-column: 1 / -1;
}

body.cf-r820 .r73-order-form fieldset {
    padding: 16px;
}

body.cf-r820 .r73-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

body.cf-r820 .r73-form-actions .button {
    min-width: 130px;
}

@media (max-width: 700px) {

    body.cf-r820 .r73-order-form {
        padding: 12px;
    }

    body.cf-r820 .cf-customer-mode-switch {
        width: 100%;
    }

    body.cf-r820 .cf-new-customer-panel {
        grid-template-columns: 1fr;
    }

    body.cf-r820 .cf-new-customer-panel .full {
        grid-column: auto;
    }

    body.cf-r820 .r73-form-actions .button {
        width: 100%;
    }
}


/* CommerceFlow r8.2.0 — SHEIN Orders */

body.cf-r820 [id^="shein-order-"] {
    scroll-margin-top: 88px;
}

body.cf-r820 [id^="shein-order-"].cf-shein-detail-active {
    border-color: #b7c8d4;
    box-shadow:
        0 0 0 3px rgba(50,104,142,.08),
        var(--cf-shadow-md);
}

body.cf-r820 .cf-row-action {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-navy-900);
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

body.cf-r820 .cf-row-action:hover {
    background: var(--cf-surface-soft);
}

body.cf-r820 .cf-row-action.primary {
    border-color: var(--cf-navy-950);
    background: var(--cf-navy-950);
    color: #fff;
}

body.cf-r820 .cf-row-action.primary:hover {
    background: var(--cf-navy-800);
}

body.cf-r820 .cf-row-action b {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-size: .62rem;
}

body.cf-r820 .cf-row-menu {
    position: relative;
    display: inline-block;
}

body.cf-r820 .cf-row-menu > summary {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-text-soft);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

body.cf-r820 .cf-row-menu > summary::-webkit-details-marker {
    display: none;
}

body.cf-r820 .cf-row-menu-panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 5px);
    right: 0;
    min-width: 190px;
    padding: 5px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-md);
}

body.cf-r820 .cf-row-menu-panel a,
body.cf-r820 .cf-row-menu-panel button {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: transparent;
    color: var(--cf-text);
    font-size: .73rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

body.cf-r820 .cf-row-menu-panel a:hover,
body.cf-r820 .cf-row-menu-panel button:hover {
    background: var(--cf-surface-soft);
}


/* CommerceFlow r8.2.0 — whole tenant application sweep */

/* Page headings */

body.cf-r820.cf-workspace :is(
    .page-header,
    .section-header,
    .workspace-header,
    .dashboard-header,
    .customers-header,
    .orders-header
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace :is(
    .page-header,
    .section-header,
    .workspace-header,
    .dashboard-header,
    .customers-header,
    .orders-header
) h1 {
    margin-bottom: 3px;
}

body.cf-r820.cf-workspace :is(
    .page-header,
    .section-header,
    .workspace-header,
    .dashboard-header,
    .customers-header,
    .orders-header
) p {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--cf-text-soft);
    font-size: .76rem;
}


/* Generic panels/cards */

body.cf-r820.cf-workspace :is(
    .panel,
    .surface,
    .workspace-panel,
    .summary-panel,
    .dashboard-panel,
    .settings-panel,
    .billing-panel,
    .inbox-panel,
    .delivery-panel,
    .package-panel
) {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace :is(
    .panel-header,
    .surface-header,
    .workspace-panel-header
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--cf-line);
}


/* KPI / statistics */

body.cf-r820.cf-workspace :is(
    .metric-grid,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .kpi-grid,
    .dashboard-stats,
    .dashboard-metrics
) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace :is(
    .metric-card,
    .stat-card,
    .summary-card,
    .kpi-card,
    .dashboard-stat,
    .dashboard-metric
) {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace :is(
    .metric-card,
    .stat-card,
    .summary-card,
    .kpi-card,
    .dashboard-stat,
    .dashboard-metric
) > span:first-child {
    display: block;
    color: var(--cf-text-muted);
    font-size: .67rem;
    font-weight: 700;
}

body.cf-r820.cf-workspace :is(
    .metric-card,
    .stat-card,
    .summary-card,
    .kpi-card,
    .dashboard-stat,
    .dashboard-metric
) > strong {
    display: block;
    margin-top: 5px;
    color: var(--cf-navy-950);
    font-size: 1.22rem;
    line-height: 1.2;
}


/* Toolbars / filters */

body.cf-r820.cf-workspace :is(
    .toolbar,
    .filter-bar,
    .filters,
    .table-toolbar,
    .list-toolbar,
    .page-toolbar
) {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace :is(
    .toolbar,
    .filter-bar,
    .filters,
    .table-toolbar,
    .list-toolbar,
    .page-toolbar
) label {
    min-width: 160px;
}


/* Disclosures */

body.cf-r820.cf-workspace details:not(.cf-row-menu):not(.r74-create-order) {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace details:not(.cf-row-menu):not(.r74-create-order) > summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    color: var(--cf-navy-900);
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

body.cf-r820.cf-workspace details:not(.cf-row-menu):not(.r74-create-order) > summary::-webkit-details-marker {
    display: none;
}

body.cf-r820.cf-workspace details:not(.cf-row-menu):not(.r74-create-order)[open] > summary {
    border-bottom: 1px solid var(--cf-line);
}


/* Tabs */

body.cf-r820.cf-workspace :is(
    .tabs,
    .tab-list,
    .view-tabs,
    .segmented-control
) {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-muted);
}

body.cf-r820.cf-workspace :is(
    .tabs,
    .tab-list,
    .view-tabs,
    .segmented-control
) :is(a,button) {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: transparent;
    color: var(--cf-text-soft);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}

body.cf-r820.cf-workspace :is(
    .tabs,
    .tab-list,
    .view-tabs,
    .segmented-control
) :is(.active,[aria-current="page"]) {
    background: #fff;
    color: var(--cf-navy-950);
    box-shadow: var(--cf-shadow-sm);
}


/* Lists */

body.cf-r820.cf-workspace :is(
    .record-list,
    .activity-list,
    .notification-list,
    .message-list,
    .customer-list
) {
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace :is(
    .record-item,
    .activity-item,
    .notification-item,
    .message-item
) {
    padding: 11px 13px;
    border-bottom: 1px solid #e7ecf0;
}

body.cf-r820.cf-workspace :is(
    .record-item,
    .activity-item,
    .notification-item,
    .message-item
):last-child {
    border-bottom: 0;
}


/* Search */

body.cf-r820.cf-workspace input[type="search"] {
    background-color: #fff;
}


/* Pagination */

body.cf-r820.cf-workspace :is(.pagination,.pager) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
}

body.cf-r820.cf-workspace :is(.pagination,.pager) :is(a,button,span) {
    min-width: 32px;
    min-height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 5px 8px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-text-soft);
    font-size: .68rem;
    text-decoration: none;
}


/* Common action zones */

body.cf-r820.cf-workspace :is(
    .form-actions,
    .actions,
    .panel-actions,
    .section-actions
) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}


/* Notices */

body.cf-r820.cf-workspace :is(
    .notice,
    .alert,
    .info-banner,
    .warning-banner
) {
    padding: 11px 13px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    font-size: .75rem;
}

body.cf-r820.cf-workspace :is(.notice.warning,.alert.warning,.warning-banner) {
    border-color: #ead6ad;
    background: var(--cf-warning-bg);
}

body.cf-r820.cf-workspace :is(.notice.error,.alert.error) {
    border-color: #e8c5c5;
    background: var(--cf-danger-bg);
}


/* Settings / billing forms */

body.cf-r820.cf-workspace :is(
    .settings-grid,
    .billing-grid,
    .account-grid
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}


/* Inbox */

body.cf-r820.cf-workspace :is(
    .inbox-row,
    .message-row,
    .email-row
) {
    min-height: 52px;
    padding: 9px 11px;
    border-bottom: 1px solid #e7ecf0;
    background: #fff;
}

body.cf-r820.cf-workspace :is(
    .inbox-row,
    .message-row,
    .email-row
):hover {
    background: #f8fafb;
}


/* Delivery/package operational rows */

body.cf-r820.cf-workspace :is(
    .package-row,
    .delivery-row,
    .order-row
) {
    background: #fff;
}

body.cf-r820.cf-workspace :is(
    .package-row,
    .delivery-row,
    .order-row
):hover {
    background: #fafcfd;
}


/* ========================================================================== */
/* CommerceFlow r8.2.1 — Unified Interface Correction                         */
/* Real active-template class map. This section is the tenant UI authority.    */
/* ========================================================================== */

/* --- Common tenant page structure ----------------------------------------- */
body.cf-r820.cf-workspace .page {
    width: min(100%, var(--cf-content));
    margin-inline: auto;
    padding: 24px 26px 40px;
}

body.cf-r820.cf-workspace :is(.r73-page,.cf-customers-page) {
    display: grid;
    gap: 16px;
}

body.cf-r820.cf-workspace :is(.r73-page-header,.page-header,.money-hero,.dashboard-hero) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 0;
}

body.cf-r820.cf-workspace :is(.r73-page-header,.page-header,.money-hero,.dashboard-hero) > div:first-child {
    min-width: 0;
}

body.cf-r820.cf-workspace :is(.r73-page-header,.page-header,.money-hero,.dashboard-hero) h1 {
    margin-bottom: 5px;
}

body.cf-r820.cf-workspace :is(.r73-page-header,.page-header,.money-hero,.dashboard-hero) p {
    max-width: 760px;
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .78rem;
    line-height: 1.55;
}

body.cf-r820.cf-workspace :is(.r73-kicker,.section-kicker,.eyebrow) {
    display: block;
    margin-bottom: 5px;
    color: var(--cf-text-muted);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.cf-r820.cf-workspace :is(.r73-data-panel,.r73-form-panel,.r73-edit-panel,.r73-record-inspector,.r73-rules-panel,.r73-payment-section,.cf-create-panel,.cf-form-card) {
    min-width: 0;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace :is(.r73-panel-header,.cf-form-card-header,.cf-panel-title) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace :is(.r73-panel-header,.cf-form-card-header,.cf-panel-title) h2,
body.cf-r820.cf-workspace :is(.r73-panel-header,.cf-form-card-header,.cf-panel-title) h3 {
    margin-bottom: 3px;
}

body.cf-r820.cf-workspace :is(.r73-panel-header,.cf-form-card-header,.cf-panel-title) p {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .75rem;
}

body.cf-r820.cf-workspace .r73-section-gap {
    margin-top: 4px;
}

body.cf-r820.cf-workspace .r73-section-heading {
    margin: 0 0 10px;
}

/* --- Filters --------------------------------------------------------------- */
body.cf-r820.cf-workspace :is(.r73-filter-bar,.inbox-filter) {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: end;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace .r73-filter-search {
    min-width: 0;
}

body.cf-r820.cf-workspace .r73-filter-search input {
    min-height: 38px;
}

body.cf-r820.cf-workspace .r73-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.cf-r820.cf-workspace .r73-result-count {
    align-self: center;
    justify-self: end;
    color: var(--cf-text-muted);
    font-size: .7rem;
    white-space: nowrap;
}

/* --- Data panels / disclosures / popovers --------------------------------- */
body.cf-r820.cf-workspace .r73-data-panel {
    overflow: visible;
}

body.cf-r820.cf-workspace .r73-data-panel > :is(.r73-table-scroll,.table-wrap) {
    border: 0;
    border-radius: 0 0 var(--cf-radius) var(--cf-radius);
}

body.cf-r820.cf-workspace :is(.r73-disclosure,.r73-setup-disclosure,.cf-create-panel,.new-payment-account) {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace :is(.r73-disclosure,.r73-setup-disclosure,.cf-create-panel,.new-payment-account) > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: var(--cf-navy-900);
    font-size: .77rem;
    font-weight: 800;
    list-style: none;
}

body.cf-r820.cf-workspace :is(.r73-disclosure,.r73-setup-disclosure,.cf-create-panel,.new-payment-account)[open] > summary {
    border-bottom: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace :is(.r73-disclosure,.r73-setup-disclosure,.cf-create-panel,.new-payment-account) > :not(summary) {
    margin: 0;
}

body.cf-r820.cf-workspace .r73-popover {
    position: relative;
}

body.cf-r820.cf-workspace .r73-popover > summary {
    list-style: none;
}

body.cf-r820.cf-workspace .r73-popover-panel {
    position: absolute;
    z-index: 180;
    top: calc(100% + 6px);
    right: 0;
    width: min(360px, 88vw);
    padding: 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-lg);
}

body.cf-r820.cf-workspace .r73-record-inspector {
    padding: 15px 17px;
}

body.cf-r820.cf-workspace .r73-inspector-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body.cf-r820.cf-workspace .r73-inspector-title span {
    color: var(--cf-text-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

body.cf-r820.cf-workspace .r73-record-inspector dl,
body.cf-r820.cf-workspace .compact-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px 16px;
    margin: 0 0 12px;
}

body.cf-r820.cf-workspace .r73-record-inspector dl > div,
body.cf-r820.cf-workspace .compact-detail-grid > div {
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f4;
}

body.cf-r820.cf-workspace :is(.r73-record-inspector,.compact-detail-grid) dt,
body.cf-r820.cf-workspace .compact-detail-grid span {
    display: block;
    color: var(--cf-text-muted);
    font-size: .65rem;
}

body.cf-r820.cf-workspace :is(.r73-record-inspector,.compact-detail-grid) dd {
    margin: 2px 0 0;
    color: var(--cf-navy-900);
    font-weight: 750;
}

/* --- Dashboard ------------------------------------------------------------- */
body.cf-r820.cf-workspace .dashboard-hero {
    align-items: flex-end;
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace .dashboard-hero-copy {
    min-width: 0;
}

body.cf-r820.cf-workspace .dashboard-hero-actions {
    flex: 0 0 auto;
}

body.cf-r820.cf-workspace :is(.attention-banner,.dashboard-update-banner) {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace .attention-banner {
    border-color: #efdcb7;
    background: var(--cf-warning-bg);
}

body.cf-r820.cf-workspace .attention-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f5e5c2;
    color: var(--cf-warning);
    font-weight: 900;
}

body.cf-r820.cf-workspace .attention-copy,
body.cf-r820.cf-workspace .dashboard-update-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .attention-copy strong,
body.cf-r820.cf-workspace .dashboard-update-copy h2 {
    margin: 0;
    color: var(--cf-navy-950);
    font-size: .78rem;
}

body.cf-r820.cf-workspace .attention-copy span,
body.cf-r820.cf-workspace .dashboard-update-copy p {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .7rem;
}

body.cf-r820.cf-workspace .dashboard-update-label {
    display: grid;
    gap: 2px;
    color: var(--cf-info);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .08em;
}

body.cf-r820.cf-workspace .dashboard-update-label strong {
    width: max-content;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--cf-info-bg);
}

body.cf-r820.cf-workspace .dashboard-notice-dismiss button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: transparent;
    color: var(--cf-text-muted);
    font-size: 1rem;
    cursor: pointer;
}

body.cf-r820.cf-workspace .executive-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}

body.cf-r820.cf-workspace .executive-kpi {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace .kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--cf-text-soft);
    font-size: .72rem;
    font-weight: 750;
}

body.cf-r820.cf-workspace .metric-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-muted);
    color: var(--cf-navy-800);
    font-size: .65rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .executive-kpi > strong {
    display: block;
    margin: 9px 0 2px;
    color: var(--cf-navy-950);
    font-size: 1.35rem;
    line-height: 1.15;
}

body.cf-r820.cf-workspace .executive-kpi > small {
    display: block;
    font-size: .69rem;
}

body.cf-r820.cf-workspace .executive-kpi.profit-card > strong {
    color: var(--cf-success);
}

body.cf-r820.cf-workspace .executive-kpi.profit-card.negative > strong,
body.cf-r820.cf-workspace .executive-kpi.warning-card > strong {
    color: var(--cf-warning);
}

body.cf-r820.cf-workspace .dashboard-command-grid {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(300px,.7fr);
    gap: 14px;
    margin-bottom: 14px;
}

body.cf-r820.cf-workspace .cf-dashboard-panel {
    overflow: hidden;
}

body.cf-r820.cf-workspace .performance-snapshot,
body.cf-r820.cf-workspace .chart-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    padding: 14px 16px;
}

body.cf-r820.cf-workspace :is(.performance-snapshot,.chart-summary-strip) > div {
    min-width: 0;
    padding: 10px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace :is(.performance-snapshot,.chart-summary-strip) span {
    display: block;
    color: var(--cf-text-muted);
    font-size: .64rem;
}

body.cf-r820.cf-workspace :is(.performance-snapshot,.chart-summary-strip) strong {
    display: block;
    margin-top: 3px;
    color: var(--cf-navy-950);
    font-size: .83rem;
}

body.cf-r820.cf-workspace .fluent-line-chart {
    padding: 8px 16px 14px;
}

body.cf-r820.cf-workspace .fluent-line-chart svg {
    width: 100%;
    height: auto;
    min-height: 190px;
}

body.cf-r820.cf-workspace .chart-month-labels,
body.cf-r820.cf-workspace .chart-legend {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--cf-text-muted);
    font-size: .63rem;
}

body.cf-r820.cf-workspace .chart-legend {
    justify-content: flex-end;
    padding: 0 16px 14px;
}

body.cf-r820.cf-workspace .chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.cf-r820.cf-workspace .chart-legend i {
    width: 16px;
    height: 3px;
    display: inline-block;
    border-radius: 999px;
    background: var(--cf-info);
}

body.cf-r820.cf-workspace .chart-legend .legend-profit {
    background: var(--cf-success);
}

body.cf-r820.cf-workspace .priority-list {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
}

body.cf-r820.cf-workspace .priority-item {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    color: inherit;
    text-decoration: none;
}

body.cf-r820.cf-workspace .priority-item:hover {
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .priority-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-surface-muted);
    color: var(--cf-navy-800);
    font-size: .67rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .priority-item > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .priority-item strong {
    font-size: .74rem;
}

body.cf-r820.cf-workspace .priority-item small {
    font-size: .65rem;
}

body.cf-r820.cf-workspace .priority-item > b {
    min-width: 28px;
    text-align: right;
    color: var(--cf-navy-950);
}

body.cf-r820.cf-workspace .finance-pulse {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    padding: 0 16px 14px;
}

body.cf-r820.cf-workspace .finance-pulse > div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .finance-pulse span {
    color: var(--cf-text-muted);
    font-size: .63rem;
}

body.cf-r820.cf-workspace .finance-pulse strong {
    font-size: .85rem;
}

body.cf-r820.cf-workspace .action-center-links {
    display: flex;
    gap: 7px;
    padding: 0 16px 16px;
}

body.cf-r820.cf-workspace .recent-orders-panel {
    overflow: hidden;
}

/* --- Money & Expenses ------------------------------------------------------ */
body.cf-r820.cf-workspace .money-hero {
    align-items: flex-end;
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace .money-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}

body.cf-r820.cf-workspace .money-summary {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace .money-summary > span {
    display: block;
    color: var(--cf-text-soft);
    font-size: .72rem;
    font-weight: 750;
}

body.cf-r820.cf-workspace .money-summary > strong {
    display: block;
    margin: 7px 0 2px;
    color: var(--cf-navy-950);
    font-size: 1.25rem;
    line-height: 1.15;
}

body.cf-r820.cf-workspace .money-summary > small {
    display: block;
    font-size: .68rem;
    line-height: 1.4;
}

body.cf-r820.cf-workspace .money-summary.primary {
    border-top: 3px solid var(--cf-gold-500);
}

body.cf-r820.cf-workspace .money-summary.warning > strong {
    color: var(--cf-warning);
}

body.cf-r820.cf-workspace .capital-location-card {
    overflow: hidden;
}

body.cf-r820.cf-workspace .capital-location-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 14px 16px 16px;
}

body.cf-r820.cf-workspace .capital-location {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .capital-location.special {
    background: #fffaf1;
    border-color: #ead9b7;
}

body.cf-r820.cf-workspace .capital-location-heading {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 9px;
}

body.cf-r820.cf-workspace .capital-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-navy-950);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .capital-location-heading > div {
    min-width: 0;
    display: grid;
    gap: 1px;
}

body.cf-r820.cf-workspace .capital-location-heading strong {
    overflow: hidden;
    color: var(--cf-navy-900);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cf-r820.cf-workspace .capital-location-heading small {
    font-size: .64rem;
}

body.cf-r820.cf-workspace .capital-value {
    display: block;
    margin: 12px 0 8px;
    color: var(--cf-navy-950);
    font-size: 1rem;
}

body.cf-r820.cf-workspace .capital-location progress,
body.cf-r820.cf-workspace .cf-loyalty-progress {
    width: 100%;
    height: 7px;
}

body.cf-r820.cf-workspace .capital-location > a {
    display: inline-block;
    margin-top: 9px;
    color: var(--cf-navy-800);
    font-size: .69rem;
    font-weight: 750;
    text-decoration: none;
}

body.cf-r820.cf-workspace .money-detail-grid,
body.cf-r820.cf-workspace .money-actions,
body.cf-r820.cf-workspace .grid.two {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

body.cf-r820.cf-workspace :is(.movement-card,.expense-card,.action-card,.money-action-section) {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace .money-actions {
    margin-top: 14px;
}

body.cf-r820.cf-workspace .money-action-section {
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace .action-card-heading,
body.cf-r820.cf-workspace .section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

body.cf-r820.cf-workspace .history-disclosure {
    margin-top: 14px;
    border-top: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace .history-disclosure > summary {
    padding: 12px 0;
    color: var(--cf-navy-800);
    font-size: .74rem;
    font-weight: 800;
}

/* --- Settings -------------------------------------------------------------- */
body.cf-r820.cf-workspace .settings-heading {
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace .settings-heading-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.cf-r820.cf-workspace .settings-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    align-items: start;
}

body.cf-r820.cf-workspace .settings-grid > .full,
body.cf-r820.cf-workspace .payment-accounts-settings.full {
    grid-column: 1 / -1;
}

body.cf-r820.cf-workspace .settings-profile-card,
body.cf-r820.cf-workspace .payment-accounts-settings,
body.cf-r820.cf-workspace .account-security-card {
    overflow: hidden;
}

body.cf-r820.cf-workspace .settings-profile-card form,
body.cf-r820.cf-workspace .payment-account-edit,
body.cf-r820.cf-workspace .new-payment-account form,
body.cf-r820.cf-workspace .account-security-card > :not(.card-header) {
    padding: 16px;
}

body.cf-r820.cf-workspace .theme-picker,
body.cf-r820.cf-workspace .managed-theme-note {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .managed-theme-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-navy-950);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .managed-theme-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .managed-theme-copy strong {
    font-size: .75rem;
}

body.cf-r820.cf-workspace .managed-theme-copy span {
    color: var(--cf-text-soft);
    font-size: .68rem;
}

body.cf-r820.cf-workspace .account-rule-banner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: 9px;
    margin: 14px 16px 0;
    padding: 10px 11px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-info-bg);
    color: var(--cf-text);
}

body.cf-r820.cf-workspace .account-rule-banner strong {
    color: var(--cf-info);
    font-size: .72rem;
}

body.cf-r820.cf-workspace .account-rule-banner span {
    color: var(--cf-text-soft);
    font-size: .7rem;
    line-height: 1.5;
}

body.cf-r820.cf-workspace .payment-account-list {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
}

body.cf-r820.cf-workspace .payment-account-summary {
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace .payment-account-summary > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    list-style: none;
}

body.cf-r820.cf-workspace .payment-account-summary[open] > summary {
    border-bottom: 1px solid var(--cf-line);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .payment-account-overview {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: 10px;
}

body.cf-r820.cf-workspace .payment-account-symbol {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-navy-950);
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .payment-account-overview > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .payment-account-overview strong {
    color: var(--cf-navy-900);
    font-size: .76rem;
}

body.cf-r820.cf-workspace .payment-account-overview small {
    font-size: .65rem;
}

body.cf-r820.cf-workspace .account-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

body.cf-r820.cf-workspace .account-capabilities > span {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--cf-surface-muted);
    color: var(--cf-text-soft);
    font-size: .59rem;
    font-weight: 700;
}

body.cf-r820.cf-workspace .payment-account-balance {
    min-width: 140px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    gap: 2px 7px;
    text-align: right;
}

body.cf-r820.cf-workspace .payment-account-balance > span:first-child {
    grid-column: 1 / -1;
    color: var(--cf-text-muted);
    font-size: .62rem;
}

body.cf-r820.cf-workspace .payment-account-balance > strong {
    color: var(--cf-navy-950);
    font-size: .78rem;
}

body.cf-r820.cf-workspace .new-payment-account {
    margin: 0 16px 16px;
}

body.cf-r820.cf-workspace .new-payment-account > summary.button {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: var(--cf-navy-950);
    color: #fff;
}

body.cf-r820.cf-workspace :is(.mfa-management-grid,.mfa-setup-grid,.mfa-enabled-summary,.trusted-device-section) {
    display: grid;
    gap: 12px;
}

body.cf-r820.cf-workspace .mfa-management-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

body.cf-r820.cf-workspace :is(.mfa-setup-panel,.recovery-code-panel,.trusted-device-section,.security-action-banner) {
    padding: 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
}

body.cf-r820.cf-workspace .recovery-code-grid code {
    padding: 7px 8px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    font-size: .72rem;
}

body.cf-r820.cf-workspace .danger-zone,
body.cf-r820.cf-workspace .protected-danger {
    border-color: #ebc8c8;
    background: var(--cf-danger-bg);
}

/* --- Tenant Billing -------------------------------------------------------- */
body.cf-r820.cf-workspace .cf-tenant-billing-header {
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace .cf-tenant-plan-hero {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
    gap: 12px;
    margin-bottom: 14px;
}

body.cf-r820.cf-workspace .cf-tenant-plan-main,
body.cf-r820.cf-workspace .cf-tenant-plan-status,
body.cf-r820.cf-workspace .cf-billing-insight,
body.cf-r820.cf-workspace .cf-tenant-payment-history {
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace .cf-tenant-plan-main,
body.cf-r820.cf-workspace .cf-tenant-plan-status {
    padding: 16px;
}

body.cf-r820.cf-workspace .cf-tenant-plan-label {
    display: block;
    margin-bottom: 4px;
    color: var(--cf-text-muted);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.cf-r820.cf-workspace .cf-tenant-plan-main h1,
body.cf-r820.cf-workspace .cf-tenant-plan-main h2 {
    margin-bottom: 5px;
}

body.cf-r820.cf-workspace .cf-tenant-plan-main p,
body.cf-r820.cf-workspace .cf-tenant-plan-status p {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .74rem;
}

body.cf-r820.cf-workspace .cf-tenant-plan-due {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 14px;
}

body.cf-r820.cf-workspace .cf-tenant-plan-due > div,
body.cf-r820.cf-workspace .cf-tenant-plan-status > div {
    padding: 10px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .cf-tenant-plan-due span,
body.cf-r820.cf-workspace .cf-tenant-plan-status span {
    display: block;
    color: var(--cf-text-muted);
    font-size: .64rem;
}

body.cf-r820.cf-workspace .cf-tenant-plan-due strong,
body.cf-r820.cf-workspace .cf-tenant-plan-status strong {
    display: block;
    margin-top: 3px;
    color: var(--cf-navy-950);
    font-size: .82rem;
}

body.cf-r820.cf-workspace .cf-tenant-billing-insights {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

body.cf-r820.cf-workspace .cf-billing-insight > :not(.card-header) {
    margin-left: 16px;
    margin-right: 16px;
}

body.cf-r820.cf-workspace .cf-loyalty-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

body.cf-r820.cf-workspace .cf-loyalty-progress-row strong {
    color: var(--cf-navy-950);
}

body.cf-r820.cf-workspace .cf-loyalty-progress-row span {
    color: var(--cf-text-soft);
    font-size: .7rem;
}

body.cf-r820.cf-workspace .cf-subscription-state {
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .cf-subscription-state strong {
    color: var(--cf-navy-950);
    font-size: .76rem;
    text-transform: capitalize;
}

body.cf-r820.cf-workspace .cf-subscription-state span {
    color: var(--cf-text-soft);
    font-size: .69rem;
    line-height: 1.5;
}

body.cf-r820.cf-workspace .billing-state-overdue,
body.cf-r820.cf-workspace .billing-state-suspended {
    background: var(--cf-warning-bg);
    color: var(--cf-warning);
}

body.cf-r820.cf-workspace .cf-billing-ledger-section {
    margin-top: 14px;
}

/* --- Customers / Orders / SHEIN / Packages / Deliveries / Gift Cards ------ */
body.cf-r820.cf-workspace .r73-split-layout,
body.cf-r820.cf-workspace .cf-customer-layout,
body.cf-r820.cf-workspace .r73-import-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
    gap: 14px;
    align-items: start;
}

body.cf-r820.cf-workspace .cf-customer-form-panel,
body.cf-r820.cf-workspace .r73-form-panel {
    overflow: hidden;
}

body.cf-r820.cf-workspace :is(.cf-customer-form,.r73-form-panel form,.cf-create-form,.r75-package-editor,.r74-delivery-editor) {
    padding: 15px 17px;
}

body.cf-r820.cf-workspace .cf-form-footer,
body.cf-r820.cf-workspace .r73-form-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace .cf-count-badge {
    min-width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cf-surface-muted);
    color: var(--cf-navy-800);
    font-size: .68rem;
    font-weight: 800;
}

body.cf-r820.cf-workspace .cf-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

body.cf-r820.cf-workspace :is(.r74-collection-grid,.r74-inline-metrics,.r74-order-detail-grid,.r75-allocation-summary) {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

body.cf-r820.cf-workspace :is(.r74-collection-grid,.r74-inline-metrics,.r75-allocation-summary) > div {
    padding: 9px 10px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace :is(.cf-package-order-stack,.cf-package-allocation-stack,.r75-package-order-list) {
    display: grid;
    gap: 7px;
}

body.cf-r820.cf-workspace :is(.cf-package-details-card,.cf-package-orders-card,.r75-package-gate,.r74-workflow-section,.r74-collection-section) {
    padding: 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace .r77-refund-workspace {
    overflow: hidden;
}

body.cf-r820.cf-workspace .r77-refund-workspace > :not(.r73-panel-header) {
    margin-left: 16px;
    margin-right: 16px;
}

body.cf-r820.cf-workspace .r77-refund-form {
    margin-top: 14px;
}

body.cf-r820.cf-workspace .r73-check-list {
    display: grid;
    gap: 7px;
    padding: 0;
    list-style: none;
}

body.cf-r820.cf-workspace .r73-check-list li {
    padding: 8px 10px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
    font-size: .72rem;
}

/* --- Inbox / announcements ------------------------------------------------- */
body.cf-r820.cf-workspace .page-header,
body.cf-r820.cf-workspace .announcement-page-header {
    margin-bottom: 14px;
}

body.cf-r820.cf-workspace :is(.client-announcement-list,.announcement-rail) {
    display: grid;
    gap: 10px;
}

body.cf-r820.cf-workspace .client-announcement,
body.cf-r820.cf-workspace .announcement-content {
    padding: 15px 17px;
}

body.cf-r820.cf-workspace .announcement-summary {
    margin: 6px 0;
    color: var(--cf-text-soft);
}

body.cf-r820.cf-workspace .announcement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--cf-text-muted);
    font-size: .67rem;
}

body.cf-r820.cf-workspace .inbox-table {
    overflow: hidden;
}

/* --- Tenant authentication / MFA ------------------------------------------ */
body.cf-r820 .auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(135deg, #eef3f6 0%, #f8fafb 48%, #f3eee4 100%);
}

body.cf-r820 .auth-page .auth-flashes {
    position: fixed;
    z-index: 20;
    top: 16px;
    left: 50%;
    width: min(92vw, 620px);
    transform: translateX(-50%);
}

body.cf-r820 .workspace-login,
body.cf-r820 .mfa-verify-shell {
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(360px,.75fr);
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--cf-shadow-lg);
}

body.cf-r820 .workspace-login-brand,
body.cf-r820 .workspace-login-benefits {
    color: #e4ebf1;
}

body.cf-r820 .workspace-login-brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    padding: 30px;
    background: var(--cf-navy-950);
}

body.cf-r820 .workspace-login-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.cf-r820 .login-back-link {
    color: #b9c8d3;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}

body.cf-r820 .workspace-wordmark {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.cf-r820 .workspace-wordmark-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-navy-950);
    font-size: .7rem;
    font-weight: 900;
}

body.cf-r820 .workspace-wordmark > span:last-child {
    display: grid;
}

body.cf-r820 .workspace-wordmark strong {
    color: #fff;
}

body.cf-r820 .workspace-wordmark small {
    color: #91a5b5;
    font-size: .63rem;
}

body.cf-r820 .workspace-login-message .saas-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--cf-gold-500);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.cf-r820 .workspace-login-message h1 {
    max-width: 520px;
    color: #fff;
    font-size: clamp(1.7rem,3vw,2.4rem);
}

body.cf-r820 .workspace-login-message p {
    max-width: 500px;
    margin: 0;
    color: #afbec9;
}

body.cf-r820 .workspace-login-benefits {
    display: grid;
    gap: 11px;
}

body.cf-r820 .workspace-login-benefits > div {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 9px;
}

body.cf-r820 .workspace-login-benefits > div > span {
    color: var(--cf-gold-500);
    font-size: .65rem;
    font-weight: 900;
}

body.cf-r820 .workspace-login-benefits p {
    display: grid;
    gap: 1px;
    margin: 0;
}

body.cf-r820 .workspace-login-benefits strong {
    color: #fff;
    font-size: .72rem;
}

body.cf-r820 .workspace-login-benefits small {
    color: #95a8b8;
    font-size: .65rem;
}

body.cf-r820 .workspace-login-card-wrap {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 34px;
}

body.cf-r820 .workspace-login-card {
    display: grid;
    gap: 18px;
}

body.cf-r820 .login-panel-header h2 {
    margin-bottom: 5px;
    font-size: 1.35rem;
}

body.cf-r820 .login-panel-header p {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .76rem;
}

body.cf-r820 .workspace-login-form {
    gap: 13px;
}

body.cf-r820 .workspace-login-submit {
    width: 100%;
    min-height: 44px;
}

body.cf-r820 .workspace-login-help,
body.cf-r820 .workspace-login-security {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--cf-line);
}

body.cf-r820 .workspace-login-help p,
body.cf-r820 .workspace-login-security p {
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .68rem;
}

body.cf-r820 .workspace-login-help a {
    color: var(--cf-navy-800);
    font-size: .7rem;
    font-weight: 800;
}

body.cf-r820 .workspace-login-security {
    justify-content: flex-start;
}

body.cf-r820 .workspace-login-provider {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: .64rem;
    text-align: center;
}

body.cf-r820 .mfa-verify-shell {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    padding: 28px;
}

body.cf-r820 .mfa-verify-card {
    display: grid;
    gap: 15px;
}

body.cf-r820 .mfa-benefit-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Subscription lock ---------------------------------------------------- */
body.cf-r820 .subscription-lock-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--cf-bg);
}

body.cf-r820 .subscription-lock-page {
    display: grid;
    place-items: center;
    padding: 28px;
}

body.cf-r820 .subscription-lock-card {
    width: min(100%, 620px);
    padding: 26px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-lg);
    background: #fff;
    box-shadow: var(--cf-shadow-md);
}

body.cf-r820 .subscription-lock-brand,
body.cf-r820 .subscription-lock-actions,
body.cf-r820 .subscription-lock-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.cf-r820 .subscription-lock-actions {
    flex-wrap: wrap;
    margin-top: 18px;
}

body.cf-r820 .subscription-lock-footer {
    padding: 14px;
    color: var(--cf-text-muted);
    font-size: .67rem;
    text-align: center;
}

/* CommerceFlow r8.2.1 — remaining active tenant components */
body.cf-r820.cf-workspace :is(.cf-professional-register,.cf-customer-register,.cf-shein-register,.cf-delivery-register) {
    width: 100%;
}

body.cf-r820.cf-workspace :is(.cf-customer-directory,.cf-customer-panel,.cf-customer-table) {
    min-width: 0;
}

body.cf-r820.cf-workspace .cf-customer-directory {
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: var(--cf-shadow-sm);
}

body.cf-r820.cf-workspace :is(.cf-customer-empty,.picker-empty,.empty-inline,.cf-package-order-empty) {
    padding: 14px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
    color: var(--cf-text-muted);
    font-size: .72rem;
    text-align: center;
}

body.cf-r820.cf-workspace .cf-customer-error {
    padding: 9px 10px;
    border: 1px solid #ebc8c8;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-danger-bg);
    color: var(--cf-danger);
    font-size: .72rem;
}

body.cf-r820.cf-workspace :is(.professional-actions,.r73-header-actions,.cf-tenant-admin-actions,.attention-actions) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

body.cf-r820.cf-workspace .cf-panel-heading {
    min-width: 0;
}

body.cf-r820.cf-workspace .cf-panel-icon,
body.cf-r820.cf-workspace .action-card-icon,
body.cf-r820.cf-workspace .access-icon,
body.cf-r820.cf-workspace .security-status-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-muted);
    color: var(--cf-navy-800);
    font-size: .7rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace :is(.access-summary-card,.account-security-header,.detail-section,.detail-body,.settings-side) {
    min-width: 0;
}

body.cf-r820.cf-workspace .access-summary-card {
    padding: 13px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .account-security-header,
body.cf-r820.cf-workspace .subsection-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

body.cf-r820.cf-workspace .account-capability {
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .detail-gap {
    margin-top: 12px;
}

body.cf-r820.cf-workspace .danger-detail {
    color: var(--cf-danger);
}

body.cf-r820.cf-workspace .trusted-device-list,
body.cf-r820.cf-workspace .recovery-code-actions,
body.cf-r820.cf-workspace .mfa-action-details,
body.cf-r820.cf-workspace .mfa-confirm-row {
    display: grid;
    gap: 8px;
}

body.cf-r820.cf-workspace .trusted-device-list > * {
    padding: 9px 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: #fff;
}

body.cf-r820.cf-workspace .mfa-simple-state,
body.cf-r820.cf-workspace .mfa-state-copy,
body.cf-r820.cf-workspace .mfa-setup-intro {
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .mfa-manual-key {
    padding: 8px 9px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem;
    word-break: break-all;
}

body.cf-r820.cf-workspace .mfa-cancel-form {
    margin-top: 8px;
}

body.cf-r820.cf-workspace :is(.cf-create-form-grid,.cf-form-grid-one,.r75-package-editor-grid,.r74-gift-form-grid) {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

body.cf-r820.cf-workspace .cf-form-grid-one {
    grid-template-columns: 1fr;
}

body.cf-r820.cf-workspace .cf-order-identifier,
body.cf-r820.cf-workspace .cf-package-order-ref,
body.cf-r820.cf-workspace .cf-package-tracking {
    color: var(--cf-navy-950);
    font-weight: 800;
}

body.cf-r820.cf-workspace :is(.cf-package-carrier,.cf-package-cost,.cf-package-date,.cf-package-paid-from,.cf-register-address,.cf-register-customer) {
    display: block;
    margin-top: 2px;
    color: var(--cf-text-muted);
    font-size: .66rem;
}

body.cf-r820.cf-workspace :is(.cf-payment-popover,.cf-register-primary-popover,.action-menu) {
    position: relative;
}

body.cf-r820.cf-workspace .cf-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.cf-r820.cf-workspace .cf-selected-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cf-success-bg);
    color: var(--cf-success);
    font-size: .62rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .selected-customer {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid #cbe5d7;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-success-bg);
}

body.cf-r820.cf-workspace :is(.r74-selection-table-wrap,.r77-refund-register,.r75-completed-packages) {
    overflow-x: auto;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace :is(.r74-selection-table,.r75-package-history-table,.r75-package-table,.r74-gift-table,.r74-delivery-table,.r74-shein-order-table,.r74-customer-order-table) {
    min-width: 760px;
}

body.cf-r820.cf-workspace .r74-select-col {
    width: 44px;
    text-align: center;
}

body.cf-r820.cf-workspace .r74-select-col input {
    width: 16px;
    height: 16px;
    min-height: 16px;
}

body.cf-r820.cf-workspace :is(.r74-workflow-submit,.r74-paid-message,.r75-package-complete-message) {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: var(--cf-radius-sm);
    background: var(--cf-success-bg);
    color: var(--cf-success);
    font-size: .72rem;
}

body.cf-r820.cf-workspace .r74-fill-balance {
    color: var(--cf-info);
    font-size: .68rem;
    font-weight: 750;
}

body.cf-r820.cf-workspace .r74-form-section {
    padding: 12px 0;
    border-top: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace :is(.r75-allocation-line,.r75-package-order-picker) {
    padding: 9px 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace :is(.r75-package-arrival-form,.r75-package-status-form,.r75-package-create-form,.r74-delivery-form,.r74-setup-form,.r74-shein-create-form,.r74-gift-form) {
    display: grid;
    gap: 12px;
}

body.cf-r820.cf-workspace .expense-category,
body.cf-r820.cf-workspace .mailbox-copy {
    color: var(--cf-text-muted);
    font-size: .66rem;
}

body.cf-r820.cf-workspace .mailbox {
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .whatsapp {
    color: var(--cf-success);
}

body.cf-r820.cf-workspace .sr-only,
body.cf-r820 .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.cf-r820.cf-workspace .subscription-data-note {
    margin-top: 10px;
    color: var(--cf-text-muted);
    font-size: .68rem;
}

body.cf-r820 .subscription-lock-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--cf-warning-bg);
    color: var(--cf-warning);
    font-weight: 900;
}

/* Dashboard chart and snapshot detail */
body.cf-r820.cf-workspace .performance-panel,
body.cf-r820.cf-workspace .action-center-panel {
    min-width: 0;
}

body.cf-r820.cf-workspace .performance-data-note {
    padding: 0 16px 10px;
    color: var(--cf-text-muted);
    font-size: .64rem;
}

body.cf-r820.cf-workspace :is(.snapshot-stat,.snapshot-month,.snapshot-margin) {
    min-width: 0;
}

body.cf-r820.cf-workspace .snapshot-ring {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 5px solid var(--cf-surface-muted);
    border-top-color: var(--cf-success);
    border-radius: 50%;
    font-size: .62rem;
    font-weight: 800;
}

body.cf-r820.cf-workspace :is(.chart-grid-line,.chart-revenue-line,.chart-profit-line,.chart-revenue-area,.chart-point-revenue,.chart-point-profit) {
    vector-effect: non-scaling-stroke;
}

body.cf-r820.cf-workspace .chart-grid-line {
    stroke: #dfe6eb;
    stroke-width: 1;
}

body.cf-r820.cf-workspace .chart-revenue-line {
    stroke: var(--cf-info);
    stroke-width: 3;
    fill: none;
}

body.cf-r820.cf-workspace .chart-profit-line {
    stroke: var(--cf-success);
    stroke-width: 2.5;
    fill: none;
}

body.cf-r820.cf-workspace .chart-revenue-area {
    fill: rgba(50,104,142,.08);
    stroke: none;
}

body.cf-r820.cf-workspace .chart-point-revenue {
    fill: #fff;
    stroke: var(--cf-info);
    stroke-width: 2;
}

body.cf-r820.cf-workspace .chart-point-profit {
    fill: #fff;
    stroke: var(--cf-success);
    stroke-width: 2;
}

body.cf-r820.cf-workspace .dashboard-empty-visual {
    display: grid;
    place-items: center;
    min-height: 190px;
    color: var(--cf-text-muted);
}

body.cf-r820.cf-workspace .dashboard-empty-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--cf-surface-muted);
}

/* CommerceFlow r8.2.1 — wrapper/state completeness */
body.cf-r820.cf-workspace :is(.r74-customer-orders,.r74-deliveries,.r74-gift-cards,.r74-purchase-orders,.r75-packages,.r73-wrap) {
    min-width: 0;
}

body.cf-r820.cf-workspace :is(.r74-customer-orders,.r74-deliveries,.r74-gift-cards,.r74-purchase-orders,.r75-packages) {
    display: grid;
    gap: 16px;
}

body.cf-r820.cf-workspace :is(.r74-delivery-filters,.r74-gift-filter,.r74-shein-filters,.r75-customer-filter,.r75-package-filter) {
    min-width: 0;
}

body.cf-r820.cf-workspace :is(.r74-gift-create,.r74-shein-disclosure) {
    min-width: 0;
}

body.cf-r820.cf-workspace .r73-action {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid var(--cf-line-strong);
    border-radius: var(--cf-radius-sm);
    background: #fff;
    color: var(--cf-navy-900);
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}

body.cf-r820.cf-workspace .announcement-body {
    color: var(--cf-text);
    line-height: 1.6;
}

body.cf-r820.cf-workspace :is(.review-notice,.setup-notice) {
    min-width: 0;
}

body.cf-r820.cf-workspace .cf-loyalty-progress-card,
body.cf-r820.cf-workspace .cf-subscription-explainer,
body.cf-r820.cf-workspace .profit-bridge-card {
    min-width: 0;
}

body.cf-r820.cf-workspace .monthly-revenue-progress {
    width: 100%;
    height: 7px;
}

body.cf-r820.cf-workspace .order-profit-table {
    min-width: 760px;
}

body.cf-r820.cf-workspace .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CommerceFlow r8.2.2 — Final Tenant Interface Refinement */

/* Dashboard: prevent matched-height whitespace and finish the one-month notice. */
body.cf-r820.cf-workspace .dashboard-command-grid {
    align-items: start;
}

body.cf-r820.cf-workspace .performance-panel,
body.cf-r820.cf-workspace .action-center-panel {
    align-self: start;
}

body.cf-r820.cf-workspace .performance-data-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 16px 13px;
    border-top: 1px solid var(--cf-line);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .performance-data-note > span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--cf-info-bg);
    color: var(--cf-info);
    font-size: .68rem;
    font-weight: 900;
}

body.cf-r820.cf-workspace .performance-data-note p {
    margin: 0;
    line-height: 1.45;
}

/* Customer picker: only the selected customer shows the green confirmation mark. */
body.cf-r820.cf-workspace .cf-customer-picker .customer-check {
    opacity: 0;
    transform: scale(.82);
    transition: opacity .12s ease, transform .12s ease;
}

body.cf-r820.cf-workspace .cf-customer-picker .customer-option.selected .customer-check {
    opacity: 1;
    transform: scale(1);
}

body.cf-r820.cf-workspace .cf-customer-picker .customer-option.selected {
    border-left-color: var(--cf-gold-500);
    background: #f7fafb;
}

/* Shared workflow headings: separate step number, heading and helper copy. */
body.cf-r820.cf-workspace .r74-workflow-section {
    overflow: hidden;
    padding: 0;
}

body.cf-r820.cf-workspace .r74-workflow-section > header,
body.cf-r820.cf-workspace .cf-form-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--cf-line);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .r74-workflow-section > header > span:first-child,
body.cf-r820.cf-workspace .cf-form-card-header > span:first-child {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    border-radius: 50%;
    background: var(--cf-navy-950);
    color: #fff;
    font-size: .68rem;
    font-weight: 850;
}

body.cf-r820.cf-workspace .r74-workflow-section > header > div,
body.cf-r820.cf-workspace .cf-form-card-header > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .r74-workflow-section > header strong,
body.cf-r820.cf-workspace .cf-form-card-header strong {
    display: block;
    color: var(--cf-navy-950);
    font-size: .8rem;
    line-height: 1.25;
}

body.cf-r820.cf-workspace .r74-workflow-section > header small,
body.cf-r820.cf-workspace .cf-form-card-header small {
    display: block;
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .69rem;
    line-height: 1.45;
}

body.cf-r820.cf-workspace .r74-workflow-section > :is(.r74-order-detail-grid,.r74-selection-table-wrap,.empty-inline) {
    margin: 14px 15px;
}

body.cf-r820.cf-workspace .r74-workflow-section > .r74-order-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* SHEIN payment builder: turn the raw stacked fields into a compact controlled allocator. */
body.cf-r820.cf-workspace .r74-payment-builder {
    margin: 14px 15px;
    overflow: hidden;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}

body.cf-r820.cf-workspace .r74-payment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--cf-line);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .r74-payment-header > div:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .r74-payment-header > div:first-child > strong,
body.cf-r820.cf-workspace .r74-payment-header > div:first-child > span {
    display: block;
}

body.cf-r820.cf-workspace .r74-payment-header > div:first-child > strong {
    color: var(--cf-navy-950);
    font-size: .78rem;
}

body.cf-r820.cf-workspace .r74-payment-header > div:first-child > span {
    color: var(--cf-text-soft);
    font-size: .68rem;
    line-height: 1.4;
}

body.cf-r820.cf-workspace .payment-allocation-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

body.cf-r820.cf-workspace .payment-allocation-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid var(--cf-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cf-text-muted);
    font-size: .64rem;
}

body.cf-r820.cf-workspace .payment-allocation-summary strong {
    color: var(--cf-navy-900);
    font-size: .69rem;
}

body.cf-r820.cf-workspace .payment-lines {
    display: grid;
    gap: 9px;
    padding: 12px 13px 8px;
}

body.cf-r820.cf-workspace .payment-line {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(130px, .55fr) minmax(200px, 1fr) auto;
    align-items: end;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .payment-line label {
    min-width: 0;
}

body.cf-r820.cf-workspace .payment-builder-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px 12px;
}

body.cf-r820.cf-workspace .r74-payment-rule {
    color: var(--cf-text-muted);
    font-size: .67rem;
    line-height: 1.4;
}

body.cf-r820.cf-workspace .r74-workflow-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #cbe5d7;
    background: var(--cf-success-bg);
}

body.cf-r820.cf-workspace .r74-workflow-submit > span {
    color: var(--cf-success);
    line-height: 1.45;
}

/* SHEIN register: refund is a real operation; the old pseudo "View details" action is intentionally retired. */
body.cf-r820.cf-workspace .cf-row-action.refund {
    border-color: #d8c8aa;
    background: #fffaf0;
    color: #735c2e;
}

body.cf-r820.cf-workspace .cf-row-action.refund:hover {
    background: #fbf1dc;
}

/* Refund workspace: preserve the ledger, but make it shorter, clearer and operational. */
body.cf-r820.cf-workspace .r77-refund-workspace {
    border-color: #d9e1e6;
}

body.cf-r820.cf-workspace .r77-refund-workspace .r73-panel-header {
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .r77-refund-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    padding-bottom: 14px;
}

body.cf-r820.cf-workspace .r77-refund-form > .full,
body.cf-r820.cf-workspace .r77-refund-form > .r73-form-actions {
    grid-column: 1 / -1;
}

body.cf-r820.cf-workspace .r77-refund-form .r73-form-actions {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--cf-line);
}

body.cf-r820.cf-workspace .r77-refund-register {
    margin-bottom: 16px;
}

body.cf-r820.cf-workspace .r77-refund-register > h3 {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cf-line);
    font-size: .82rem;
}

/* Packages: make linked orders and shipping allocation legible instead of concatenated. */
body.cf-r820.cf-workspace .cf-package-order-stack {
    gap: 5px;
}

body.cf-r820.cf-workspace .cf-package-order-ref {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--cf-surface-soft);
    font-size: .69rem;
    overflow-wrap: anywhere;
}

body.cf-r820.cf-workspace .r75-allocation-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
}

body.cf-r820.cf-workspace .r75-allocation-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .7rem;
}

body.cf-r820.cf-workspace .r75-allocation-line em {
    flex: 0 0 auto;
    color: var(--cf-navy-900);
    font-size: .7rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

body.cf-r820.cf-workspace .r73-disclosure > summary > span:first-child,
body.cf-r820.cf-workspace .new-payment-account > summary > span:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.cf-r820.cf-workspace .r73-disclosure > summary strong,
body.cf-r820.cf-workspace .r73-disclosure > summary small {
    display: block;
}

body.cf-r820.cf-workspace .r73-disclosure > summary small {
    margin: 0;
    color: var(--cf-text-muted);
    font-weight: 500;
    line-height: 1.4;
}

/* Money & Expenses: the professional-actions utility must not override the two-column transaction grid. */
body.cf-r820.cf-workspace .money-actions.professional-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
    justify-content: stretch;
    gap: 14px;
}

body.cf-r820.cf-workspace .money-action-section {
    padding: 16px;
}

body.cf-r820.cf-workspace .money-action-section > .section-heading-row {
    margin-bottom: 13px;
}

body.cf-r820.cf-workspace .money-actions .action-card {
    width: 100%;
    align-self: start;
}

body.cf-r820.cf-workspace .money-actions .action-card-heading {
    justify-content: flex-start;
}

body.cf-r820.cf-workspace .money-actions .action-card-heading > div {
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .money-actions .action-card-heading h2,
body.cf-r820.cf-workspace .money-actions .action-card-heading p {
    margin: 0;
}

/* Customer directory and gift-card forms: stronger section separation. */
body.cf-r820.cf-workspace .cf-customer-directory > .r73-panel-header,
body.cf-r820.cf-workspace .r74-gift-create > summary,
body.cf-r820.cf-workspace .r75-package-create > summary,
body.cf-r820.cf-workspace .r74-shein-disclosure > summary {
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .cf-count-badge {
    min-width: 64px;
    justify-content: center;
}

body.cf-r820.cf-workspace .r74-gift-form .cf-form-card {
    align-self: stretch;
}

body.cf-r820.cf-workspace .r74-gift-form .cf-form-grid,
body.cf-r820.cf-workspace .cf-package-details-card .cf-form-grid,
body.cf-r820.cf-workspace .cf-package-orders-card > :not(.cf-form-card-header) {
    padding: 14px;
}

body.cf-r820.cf-workspace .cf-form-footer {
    margin-top: 0;
    padding: 13px 14px;
    border-top: 1px solid var(--cf-line);
}

/* Billing: keep status and explanation as distinct visual levels. */
body.cf-r820.cf-workspace .cf-subscription-state {
    display: grid;
    gap: 7px;
}

body.cf-r820.cf-workspace .cf-subscription-state > strong,
body.cf-r820.cf-workspace .cf-subscription-state > span,
body.cf-r820.cf-workspace .cf-subscription-state > small {
    display: block;
}

body.cf-r820.cf-workspace .cf-subscription-state > strong {
    font-size: .77rem;
}

body.cf-r820.cf-workspace .cf-subscription-state > small {
    line-height: 1.45;
}

/* Settings / security: make summary metrics, devices and mailbox data readable. */
body.cf-r820.cf-workspace .mfa-enabled-summary {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

body.cf-r820.cf-workspace .mfa-enabled-summary > div {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
}

body.cf-r820.cf-workspace .mfa-enabled-summary > div > span {
    color: var(--cf-navy-950);
    font-size: 1rem;
    font-weight: 850;
}

body.cf-r820.cf-workspace .mfa-enabled-summary > div > small {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: .67rem;
    line-height: 1.35;
}

body.cf-r820.cf-workspace .trusted-device-list > article {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    gap: 10px;
}

body.cf-r820.cf-workspace .trusted-device-list > article > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .trusted-device-list strong,
body.cf-r820.cf-workspace .trusted-device-list small {
    display: block;
}

body.cf-r820.cf-workspace .trusted-device-list small {
    margin: 0;
    line-height: 1.35;
}

body.cf-r820.cf-workspace .mailbox-copy {
    gap: 7px;
    padding: 14px 16px 16px;
    font-size: .7rem;
}

body.cf-r820.cf-workspace .mailbox-copy > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.cf-r820.cf-workspace .mailbox-copy code {
    display: block;
    padding: 8px 9px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
    color: var(--cf-navy-900);
    font-size: .69rem;
    overflow-wrap: anywhere;
}

body.cf-r820.cf-workspace .account-security-card form,
body.cf-r820.cf-workspace #change-password form {
    padding: 15px 16px 16px;
}

/* Profit exact-month form stays visually aligned after the routing fix. */
body.cf-r820 .report-month-form input[name="route"] {
    display: none;
}


/* CommerceFlow r8.2.3 — Final Visual Polish
   Alignment, empty-state hierarchy, package-history stability, and desktop dashboard density. */

/* Register status columns: center workflow/status information cleanly. */
body.cf-r820.cf-workspace .r74-shein-order-table td:nth-child(1) .cf-register-stack,
body.cf-r820.cf-workspace .r74-shein-order-table td:nth-child(2) .cf-register-stack {
    justify-items: center;
    align-content: center;
    text-align: center;
}

body.cf-r820.cf-workspace .r74-customer-order-table td:nth-child(3) {
    text-align: center;
}

body.cf-r820.cf-workspace .r74-customer-order-table td:nth-child(3) .cf-register-badges {
    justify-content: center;
}

body.cf-r820.cf-workspace .r74-customer-order-table td:nth-child(3) .cf-register-secondary {
    display: block;
    margin-top: 6px;
    text-align: center;
}

/* Inline empty states: message first, action second; never run together. */
body.cf-r820.cf-workspace .empty-inline {
    min-height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding: 14px 18px;
    text-align: center;
}

body.cf-r820.cf-workspace .empty-inline > strong {
    display: block;
    color: var(--cf-navy-900);
    line-height: 1.35;
}

body.cf-r820.cf-workspace .empty-inline > a {
    display: inline-flex;
    width: fit-content;
    line-height: 1.35;
}

/* Money history: helper copy belongs below the heading, not beside it. */
body.cf-r820.cf-workspace .history-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: 5px;
    padding: 13px 16px;
}

body.cf-r820.cf-workspace .history-disclosure > summary > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .history-disclosure > summary > .muted {
    display: block;
    margin: 0;
    color: var(--cf-text-soft);
    font-size: .69rem;
    font-weight: 500;
    line-height: 1.45;
}

body.cf-r820.cf-workspace .history-disclosure .detail-section > h3 + p.muted:last-child {
    min-height: 78px;
    display: grid;
    place-items: center;
    margin: 10px 0 0;
    padding: 16px;
    border: 1px solid var(--cf-line-soft);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
    text-align: center;
}

/* Completed package history: stable columns and non-overlapping allocations. */
body.cf-r820.cf-workspace .r75-completed-packages > summary > span:first-child {
    display: grid;
    gap: 3px;
}

body.cf-r820.cf-workspace .r75-completed-packages > summary small {
    display: block;
    margin: 0;
    color: var(--cf-text-soft);
    font-weight: 500;
    line-height: 1.4;
}

body.cf-r820.cf-workspace .r75-package-history-table {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}

body.cf-r820.cf-workspace .r75-package-history-table th,
body.cf-r820.cf-workspace .r75-package-history-table td {
    vertical-align: middle;
}

body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(1),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(1) { width: 14%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(2),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(2) { width: 8%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(3),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(3) { width: 18%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(4),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(4) { width: 14%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(5),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(5) { width: 12%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(6),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(6) { width: 14%; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(7),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(7) { width: 20%; }

body.cf-r820.cf-workspace .r75-package-history-table :is(.cf-package-date,.cf-package-cost) {
    text-align: right;
    white-space: normal;
    line-height: 1.4;
}

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-paid-from {
    margin: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-allocation-stack {
    min-width: 0;
    gap: 6px;
}

body.cf-r820.cf-workspace .r75-package-history-table .r75-allocation-line {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
}

body.cf-r820.cf-workspace .r75-package-history-table .r75-allocation-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.cf-r820.cf-workspace .r75-package-history-table .r75-allocation-line em {
    justify-self: end;
    white-space: nowrap;
}

/* Desktop dashboard: remove the awkward empty column below Performance. */
body.cf-r820.cf-workspace .dashboard-command-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
}

body.cf-r820.cf-workspace .action-center-panel {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
}

body.cf-r820.cf-workspace .action-center-panel > .card-header,
body.cf-r820.cf-workspace .action-center-panel > .priority-list {
    grid-column: 1 / -1;
}

body.cf-r820.cf-workspace .action-center-panel .priority-list {
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding: 12px 16px 10px;
}

body.cf-r820.cf-workspace .action-center-panel .priority-item {
    min-height: 72px;
}

body.cf-r820.cf-workspace .action-center-panel .finance-pulse {
    grid-column: 1;
    min-width: 0;
    padding: 0 8px 14px 16px;
}

body.cf-r820.cf-workspace .action-center-panel .action-center-links {
    grid-column: 2;
    align-self: center;
    justify-content: flex-end;
    padding: 0 16px 14px 8px;
}

body.cf-r820.cf-workspace .action-center-panel .action-center-links .button {
    min-width: 126px;
}

/* CommerceFlow r8.2.4 — Final Alignment Hotfix
   Prevent narrow package-history columns from breaking identifiers/dates and
   give workflow empty guidance the same centered visual treatment as other empty states. */

/* Completed package history: prioritize legibility over squeezing every column. */
body.cf-r820.cf-workspace .r75-package-history-table {
    min-width: 1080px;
    table-layout: auto;
}

body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(1),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(1) { width: auto; min-width: 145px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(2),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(2) { width: auto; min-width: 85px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(3),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(3) { width: auto; min-width: 185px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(4),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(4) { width: auto; min-width: 155px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(5),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(5) { width: auto; min-width: 115px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(6),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(6) { width: auto; min-width: 145px; }
body.cf-r820.cf-workspace .r75-package-history-table th:nth-child(7),
body.cf-r820.cf-workspace .r75-package-history-table td:nth-child(7) { width: auto; min-width: 235px; }

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-date,
body.cf-r820.cf-workspace .r75-package-history-table .cf-package-cost {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-date {
    text-align: center;
}

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-order-ref,
body.cf-r820.cf-workspace .r75-package-history-table .r75-allocation-line strong {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

body.cf-r820.cf-workspace .r75-package-history-table .r75-allocation-line {
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    gap: 12px;
}

body.cf-r820.cf-workspace .r75-package-history-table .cf-package-paid-from {
    overflow-wrap: normal;
    word-break: normal;
}

/* SHEIN setup workflow: keep the empty instruction inside the section, centered and calm. */
body.cf-r820.cf-workspace .r74-workflow-section > .r73-check-list {
    margin: 14px 15px;
}

body.cf-r820.cf-workspace .r74-workflow-section > .r73-check-list > p.muted:only-child {
    min-height: 64px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--cf-line-soft);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-surface-soft);
    color: var(--cf-text-soft);
    text-align: center;
    line-height: 1.45;
}

/* CommerceFlow r8.2.5 — final package history alignment
   Desktop tables fit the available workspace instead of forcing
   artificial 1065px+ minimum widths. Narrow screens may scroll. */

@media (min-width: 901px) {

    body.cf-r820.cf-workspace
    .r75-completed-packages
    > .r73-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th,
    body.cf-r820.cf-workspace
    .r75-package-history-table td {
        width: auto;
        min-width: 0 !important;
        box-sizing: border-box;
        vertical-align: middle;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(1),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(1) {
        width: 15%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(2),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(2) {
        width: 8%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(3),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(3) {
        width: 18%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(4),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(4) {
        width: 15%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(5),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(5) {
        width: 11%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(6),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(6) {
        width: 14%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table th:nth-child(7),
    body.cf-r820.cf-workspace
    .r75-package-history-table td:nth-child(7) {
        width: 19%;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-tracking strong,

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-order-ref,

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-date,

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-cost {
        white-space: nowrap;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-paid-from {
        display: block;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .cf-package-allocation-stack {
        display: grid;
        min-width: 0;
        gap: 6px;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .r75-allocation-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        min-width: 0;
        padding: 7px 8px;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .r75-allocation-line strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table
    .r75-allocation-line em {
        white-space: nowrap;
    }
}


/* Narrow screens may scroll rather than crushing business identifiers. */

@media (max-width: 900px) {

    body.cf-r820.cf-workspace
    .r75-completed-packages
    > .r73-table-scroll {
        overflow-x: auto;
    }

    body.cf-r820.cf-workspace
    .r75-package-history-table {
        width: 900px;
        min-width: 900px !important;
    }
}


/* Final empty-state alignment for SHEIN setup. */

body.cf-r820.cf-workspace
.r74-workflow-section
.r73-check-list
> p.muted:only-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    margin: 0;
    padding: 16px 20px;
    text-align: center;
    border-radius: 8px;
    background: var(--cf-surface-soft, #f7f9fb);
}


/* ============================================================
   CommerceFlow r8.2.6 — package history cards
   Final replacement for the overcrowded seven-column table.
   ============================================================ */

body.cf-r820.cf-workspace .cf-package-history-list {
    display: grid;
    gap: 14px;
    padding: 16px;
}


body.cf-r820.cf-workspace .cf-package-history-card {
    overflow: hidden;
    border: 1px solid var(--cf-border, #d7e0e8);
    border-radius: 10px;
    background: var(--cf-surface, #fff);
}


body.cf-r820.cf-workspace .cf-package-history-grid {
    display: grid;
    grid-template-columns:
        minmax(170px, 1.2fr)
        minmax(100px, .7fr)
        minmax(190px, 1.3fr);
}


body.cf-r820.cf-workspace .cf-package-history-field {
    min-width: 0;
    padding: 15px 17px;
    border-right: 1px solid var(--cf-border, #d7e0e8);
    border-bottom: 1px solid var(--cf-border, #d7e0e8);
}


body.cf-r820.cf-workspace
.cf-package-history-field:nth-child(3n) {
    border-right: 0;
}


body.cf-r820.cf-workspace
.cf-package-history-field:nth-child(n+4) {
    border-bottom: 0;
}


body.cf-r820.cf-workspace .cf-package-history-field > span,
body.cf-r820.cf-workspace .cf-package-history-label {
    display: block;
    margin-bottom: 6px;
    color: var(--cf-text-muted, #66778a);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}


body.cf-r820.cf-workspace .cf-package-history-field > strong {
    display: block;
    color: var(--cf-text, #0d1b2a);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}


body.cf-r820.cf-workspace
.cf-package-history-field > small {
    display: block;
    margin-top: 4px;
    color: var(--cf-text-muted, #66778a);
}


body.cf-r820.cf-workspace .cf-history-order-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


body.cf-r820.cf-workspace .cf-history-order-list strong {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--cf-surface-soft, #f4f7f9);
    color: var(--cf-text, #0d1b2a);
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
}


body.cf-r820.cf-workspace .cf-package-history-allocation {
    padding: 14px 17px 16px;
    background: var(--cf-surface-soft, #f8fafb);
}


body.cf-r820.cf-workspace .cf-package-allocation-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}


body.cf-r820.cf-workspace .cf-package-allocation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--cf-border, #d7e0e8);
    border-radius: 7px;
    background: #fff;
}


body.cf-r820.cf-workspace
.cf-package-allocation-row strong {
    min-width: 0;
    color: var(--cf-text, #0d1b2a);
    font-size: 12px;
    overflow-wrap: anywhere;
}


body.cf-r820.cf-workspace
.cf-package-allocation-row span {
    flex: 0 0 auto;
    color: var(--cf-text, #0d1b2a);
    font-weight: 700;
    white-space: nowrap;
}


body.cf-r820.cf-workspace .cf-package-history-empty {
    padding: 12px;
    border-radius: 7px;
    background: #fff;
    color: var(--cf-text-muted, #66778a);
    text-align: center;
}


/* Tablet */

@media (max-width: 1000px) {

    body.cf-r820.cf-workspace .cf-package-history-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    body.cf-r820.cf-workspace
    .cf-package-history-field {
        border-right: 1px solid var(--cf-border, #d7e0e8);
        border-bottom: 1px solid var(--cf-border, #d7e0e8);
    }

    body.cf-r820.cf-workspace
    .cf-package-history-field:nth-child(2n) {
        border-right: 0;
    }

    body.cf-r820.cf-workspace
    .cf-package-history-field:nth-last-child(-n+2) {
        border-bottom: 0;
    }

}


/* Mobile */

@media (max-width: 640px) {

    body.cf-r820.cf-workspace .cf-package-history-list {
        padding: 10px;
    }

    body.cf-r820.cf-workspace .cf-package-history-grid {
        grid-template-columns: 1fr;
    }

    body.cf-r820.cf-workspace
    .cf-package-history-field {
        border-right: 0 !important;
        border-bottom:
            1px solid var(--cf-border, #d7e0e8) !important;
    }

    body.cf-r820.cf-workspace
    .cf-package-history-field:last-child {
        border-bottom: 0 !important;
    }

    body.cf-r820.cf-workspace
    .cf-package-allocation-list {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   CommerceFlow r8.2.7 — viewport-safe action menu compatibility

   app.js still uses the validated r8.0.2 body-level menu portal.
   r8.2 removed the legacy CSS that made the portal fixed-position.
   This restores that compatibility inside the unified r8.2 design.
   ============================================================ */

body.cf-r820 .cf-row-menu-panel[hidden],
body.cf-r820 .r73-popover-panel[hidden] {
    display: none !important;
}


body.cf-r820
:is(.cf-row-menu-panel, .r73-popover-panel).cf-menu-portal {
    position: fixed !important;
    inset: auto;
    z-index: 1400 !important;

    margin: 0 !important;

    min-width: 220px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(70vh, 520px);

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;

    border: 1px solid var(--cf-line, #d7e0e8);
    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 14px 36px rgba(13, 27, 42, .18);

    isolation: isolate;
}


/* Keep the triggering button visibly active. */

body.cf-r820
.cf-row-menu > summary[aria-expanded="true"] {
    border-color: var(--cf-navy-700, #1b354b);
    background: var(--cf-surface-soft, #f4f7f9);
}


/* Proper menu anatomy:
   label on the left, status/count on the right. */

body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-height: 38px;

    padding: 8px 10px;

    color: var(--cf-text, #0d1b2a);
    text-decoration: none;
}


body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a > span {
    min-width: 0;
    line-height: 1.25;
}


body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a > :is(small, b) {
    justify-self: end;

    margin: 0;

    color: var(--cf-text-muted, #66778a);

    font-size: 11px;
    font-style: normal;
    font-weight: 700;

    white-space: nowrap;
}


body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a > b {
    display: inline-grid;
    place-items: center;

    min-width: 22px;
    min-height: 22px;

    padding: 2px 6px;

    border-radius: 999px;

    background: var(--cf-surface-soft, #eef3f6);
}


body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a:hover,
body.cf-r820
.cf-row-menu-panel.cf-menu-portal > a:focus-visible {
    background: var(--cf-surface-soft, #f4f7f9);
}


/* Delivery explanatory notice */

body.cf-r820.cf-workspace
.cf-delivery-notice-title {
    display: block;

    margin-bottom: 4px;

    line-height: 1.35;
}


/* On phones the portal becomes a bounded bottom sheet. */

@media (max-width: 640px) {

    body.cf-r820
    :is(.cf-row-menu-panel, .r73-popover-panel).cf-menu-portal {
        top: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;

        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;
        max-height: min(70vh, 520px) !important;

        border-radius: 10px;
    }

    body.cf-r820
    .cf-row-menu-panel.cf-menu-portal > a {
        min-height: 44px;
        font-size: 14px;
    }
}


/* ============================================================
   CommerceFlow r8.2.8 — responsive refund ledger
   Refund history is now a responsive financial-record component
   rather than a horizontally scrolling table.
   ============================================================ */

body.cf-r820.cf-workspace .cf-refund-ledger {
    margin-top: 20px;
}


body.cf-r820.cf-workspace
.cf-refund-ledger > h3 {
    margin: 0;
    padding: 16px 18px;

    border-bottom:
        1px solid var(--cf-line, #d7e0e8);

    font-size: 17px;
}


body.cf-r820.cf-workspace
.cf-refund-card-list {
    display: grid;
    gap: 14px;

    padding: 16px;
}


body.cf-r820.cf-workspace
.cf-refund-card {
    overflow: hidden;

    border:
        1px solid var(--cf-line, #d7e0e8);

    border-radius: 10px;

    background: #fff;
}


body.cf-r820.cf-workspace
.cf-refund-card.is-voided {
    opacity: .78;
}


body.cf-r820.cf-workspace
.cf-refund-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding: 15px 17px;

    border-bottom:
        1px solid var(--cf-line, #d7e0e8);
}


body.cf-r820.cf-workspace
.cf-refund-card-header > div {
    min-width: 0;
}


body.cf-r820.cf-workspace
.cf-refund-card-kicker {
    display: block;

    margin-bottom: 3px;

    color: var(--cf-text-muted, #66778a);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;
}


body.cf-r820.cf-workspace
.cf-refund-card-header strong {
    display: block;

    color: var(--cf-text, #0d1b2a);

    font-size: 15px;
}


body.cf-r820.cf-workspace
.cf-refund-card-header small {
    display: block;

    margin-top: 4px;

    color: var(--cf-text-muted, #66778a);

    line-height: 1.4;
}


body.cf-r820.cf-workspace
.cf-refund-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


body.cf-r820.cf-workspace
.cf-refund-field {
    min-width: 0;

    padding: 15px 17px;

    border-right:
        1px solid var(--cf-line, #d7e0e8);
}


body.cf-r820.cf-workspace
.cf-refund-field:last-child {
    border-right: 0;
}


body.cf-r820.cf-workspace
.cf-refund-field > span {
    display: block;

    margin-bottom: 6px;

    color: var(--cf-text-muted, #66778a);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .05em;
    text-transform: uppercase;
}


body.cf-r820.cf-workspace
.cf-refund-field > strong {
    display: block;

    color: var(--cf-text, #0d1b2a);

    font-size: 14px;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


body.cf-r820.cf-workspace
.cf-refund-field > small {
    display: block;

    margin-top: 4px;

    color: var(--cf-text-muted, #66778a);

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   Actions
   ------------------------------------------------------------ */

body.cf-r820.cf-workspace
.cf-refund-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    gap: 8px;

    padding: 12px 17px;

    border-top:
        1px solid var(--cf-line, #d7e0e8);

    background:
        var(--cf-surface-soft, #f8fafb);
}


body.cf-r820.cf-workspace
.cf-refund-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    margin: 0;

    padding: 7px 12px;

    border:
        1px solid var(--cf-line-strong, #c5d0da);

    border-radius: 6px;

    background: #fff;

    color: var(--cf-text, #0d1b2a);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;
}


body.cf-r820.cf-workspace
.cf-refund-action-button:hover,
body.cf-r820.cf-workspace
.cf-refund-action-button:focus-visible {
    border-color: var(--cf-navy-700, #1b354b);

    background:
        var(--cf-surface-soft, #f4f7f9);
}


body.cf-r820.cf-workspace
.cf-refund-action-button.danger {
    color: #8c2f2f;
}


/* These details deliberately do NOT use .r73-popover.
   The form remains inside its refund card. */

body.cf-r820.cf-workspace
.cf-refund-inline-action {
    display: contents;
}


body.cf-r820.cf-workspace
.cf-refund-inline-action > summary {
    list-style: none;
}


body.cf-r820.cf-workspace
.cf-refund-inline-action > summary::-webkit-details-marker {
    display: none;
}


body.cf-r820.cf-workspace
.cf-refund-inline-action[open] {
    display: block;

    flex: 1 0 100%;

    width: 100%;

    margin-top: 4px;
}


body.cf-r820.cf-workspace
.cf-refund-inline-action[open] > summary {
    display: inline-flex;

    margin-bottom: 8px;
}


body.cf-r820.cf-workspace
.cf-refund-inline-panel {
    width: 100%;

    padding: 14px;

    border:
        1px solid var(--cf-line, #d7e0e8);

    border-radius: 8px;

    background: #fff;
}


body.cf-r820.cf-workspace
.cf-refund-inline-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: end;

    gap: 12px;
}


body.cf-r820.cf-workspace
.cf-refund-inline-form label {
    min-width: 0;

    margin: 0;
}


body.cf-r820.cf-workspace
.cf-refund-inline-form select,
body.cf-r820.cf-workspace
.cf-refund-inline-form input {
    width: 100%;
}


body.cf-r820.cf-workspace
.cf-refund-historical {
    color: var(--cf-text-muted, #66778a);

    font-size: 12px;
    font-weight: 600;
}


/* Tablet */

@media (max-width: 1000px) {

    body.cf-r820.cf-workspace
    .cf-refund-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    body.cf-r820.cf-workspace
    .cf-refund-field {
        border-right:
            1px solid var(--cf-line, #d7e0e8);

        border-bottom:
            1px solid var(--cf-line, #d7e0e8);
    }


    body.cf-r820.cf-workspace
    .cf-refund-field:nth-child(2n) {
        border-right: 0;
    }


    body.cf-r820.cf-workspace
    .cf-refund-field:nth-last-child(-n+2) {
        border-bottom: 0;
    }

}


/* Mobile */

@media (max-width: 640px) {

    body.cf-r820.cf-workspace
    .cf-refund-card-list {
        padding: 10px;
    }


    body.cf-r820.cf-workspace
    .cf-refund-card-grid {
        grid-template-columns: 1fr;
    }


    body.cf-r820.cf-workspace
    .cf-refund-field {
        border-right: 0 !important;

        border-bottom:
            1px solid var(--cf-line, #d7e0e8) !important;
    }


    body.cf-r820.cf-workspace
    .cf-refund-field:last-child {
        border-bottom: 0 !important;
    }


    body.cf-r820.cf-workspace
    .cf-refund-card-actions {
        align-items: stretch;
    }


    body.cf-r820.cf-workspace
    .cf-refund-action-button {
        flex: 1 1 auto;

        min-height: 42px;
    }


    body.cf-r820.cf-workspace
    .cf-refund-inline-form {
        grid-template-columns: 1fr;
    }


    body.cf-r820.cf-workspace
    .cf-refund-inline-form .button {
        width: 100%;
    }

}


/* ============================================================
   CommerceFlow r8.2.9 — final responsive UI

   Final mobile/tablet corrections for:
   - Detailed Money History
   - Profit by SHEIN Order
   - Customer-credit return
   - Refund record actions
   ============================================================ */


/* ------------------------------------------------------------
   REFUND LEDGER — compact action footer
   ------------------------------------------------------------ */

body.cf-r820.cf-workspace
.cf-refund-card-actions {
    justify-content: flex-end;

    min-height: 0;

    padding: 10px 16px;
}


body.cf-r820.cf-workspace
.cf-refund-card-actions
.cf-refund-action-button {
    min-width: 78px;
}


body.cf-r820.cf-workspace
.cf-refund-card-actions
.cf-refund-action-button.danger {
    border-color: #e3b9b9;

    color: #8b2e2e;

    background: #fffafa;
}


body.cf-r820.cf-workspace
.cf-refund-card-actions
.cf-refund-action-button.danger:hover,
body.cf-r820.cf-workspace
.cf-refund-card-actions
.cf-refund-action-button.danger:focus-visible {
    border-color: #ba6767;

    background: #fff3f3;
}


/* An opened inline refund operation remains full width. */

body.cf-r820.cf-workspace
.cf-refund-card-actions
.cf-refund-inline-action[open] {
    order: 20;

    flex: 1 0 100%;

    width: 100%;
}


/* ------------------------------------------------------------
   CUSTOMER CREDIT — Return credit

   The existing form lives inside the table cell. Instead of
   allowing that cell to become extremely tall, display the
   existing form as a controlled responsive dialog.
   ------------------------------------------------------------ */

body.cf-r820.cf-workspace
details.cf-credit-return > summary {
    list-style: none;

    cursor: pointer;
}


body.cf-r820.cf-workspace
details.cf-credit-return > summary::-webkit-details-marker {
    display: none;
}


body.cf-r820.cf-workspace
details.cf-credit-return[open]::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 1498;

    background: rgba(13, 27, 42, .46);

    backdrop-filter: blur(1px);
}


body.cf-r820.cf-workspace
details.cf-credit-return[open] form {
    position: fixed !important;

    z-index: 1499 !important;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(560px, calc(100vw - 32px));

    max-height: calc(100vh - 48px);

    overflow-y: auto;

    margin: 0 !important;

    padding: 20px !important;

    border:
        1px solid var(--cf-line, #d7e0e8);

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 24px 70px rgba(13, 27, 42, .26);
}


body.cf-r820.cf-workspace
details.cf-credit-return[open] form label {
    display: block;

    width: 100%;

    margin: 0 0 13px;
}


body.cf-r820.cf-workspace
details.cf-credit-return[open]
form :is(input, select, textarea) {
    width: 100%;
}


body.cf-r820.cf-workspace
details.cf-credit-return[open]
form :is(button, .button) {
    width: 100%;

    min-height: 42px;
}


/* ------------------------------------------------------------
   DETAILED MONEY HISTORY
   ------------------------------------------------------------ */

body.cf-r820.cf-workspace
.history-disclosure > summary {
    gap: 8px;
}


body.cf-r820.cf-workspace
.history-disclosure
.detail-section > section {
    min-width: 0;
}


body.cf-r820.cf-workspace
.history-disclosure
.detail-section > section > h3 {
    margin:
        0 0 10px;

    font-size: 16px;
}


/* ------------------------------------------------------------
   MONEY + PROFIT MOBILE RECORD CARDS
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    /* Money audit history becomes stacked sections. */

    body.cf-r820.cf-workspace
    .history-disclosure
    .detail-section {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }


    body.cf-r820.cf-workspace
    .history-disclosure > summary {
        display: flex !important;

        flex-direction: column;

        align-items: flex-start !important;

        gap: 5px;

        padding: 14px 16px;
    }


    body.cf-r820.cf-workspace
    .history-disclosure > summary > .muted {
        display: block;

        margin: 0;

        font-size: 12px;

        line-height: 1.4;
    }


    /* Remove horizontal scrolling from the two audit tables. */

    body.cf-r820.cf-workspace
    .history-disclosure
    .mobile-card-wrap,

    body.cf-r820.cf-workspace
    .order-profit-table
    .mobile-card-wrap {
        overflow: visible !important;

        width: 100%;

        max-width: 100%;
    }


    /*
     * Both the Money tables and Profit table already receive
     * .mobile-card-table plus td[data-label] from app.js.
     */

    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table {
        display: block;

        width: 100% !important;

        min-width: 0 !important;

        border: 0;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table thead,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table thead {
        display: none;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table tbody,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table tbody {
        display: grid;

        gap: 10px;

        width: 100%;

        padding: 0;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table tr,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table tr {
        display: block;

        overflow: hidden;

        width: 100%;

        border:
            1px solid var(--cf-line, #d7e0e8);

        border-radius: 9px;

        background: #fff;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td {
        display: grid !important;

        grid-template-columns:
            minmax(100px, .42fr)
            minmax(0, 1fr);

        align-items: start;

        gap: 12px;

        width: 100% !important;

        min-width: 0 !important;

        padding: 10px 12px !important;

        border:
            0 !important;

        border-bottom:
            1px solid var(--cf-line, #e1e7ec) !important;

        text-align: right !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: anywhere;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td:last-child,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td::before,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td::before {
        content: attr(data-label);

        min-width: 0;

        color: var(--cf-text-muted, #66778a);

        font-size: 10px;

        font-weight: 700;

        letter-spacing: .045em;

        line-height: 1.3;

        text-align: left;

        text-transform: uppercase;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td > small,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td > small {
        display: block;

        margin-top: 3px;

        line-height: 1.4;
    }


    /* Profit order ID gets a stronger first row. */

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td:first-child {
        padding-top: 13px !important;
        padding-bottom: 13px !important;

        background:
            var(--cf-surface-soft, #f7f9fb);
    }


    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td:first-child strong {
        font-size: 13px;
    }


    /* Do not allow dates to break one character at a time. */

    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td:first-child {
        word-break: keep-all !important;

        overflow-wrap: normal !important;
    }

}


/* ------------------------------------------------------------
   PHONE
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    body.cf-r820.cf-workspace
    .history-disclosure
    .detail-section {
        padding: 12px !important;
    }


    body.cf-r820.cf-workspace
    .history-disclosure
    table.mobile-card-table td,

    body.cf-r820.cf-workspace
    .order-profit-table
    table.mobile-card-table td {
        grid-template-columns:
            96px minmax(0, 1fr);

        gap: 9px;

        padding: 10px !important;

        font-size: 13px;
    }


    body.cf-r820.cf-workspace
    .order-profit-table
    .card-header {
        align-items: flex-start;

        gap: 10px;
    }


    /* Refund actions remain practical touch targets. */

    body.cf-r820.cf-workspace
    .cf-refund-card-actions {
        justify-content: stretch;

        padding: 10px;
    }


    body.cf-r820.cf-workspace
    .cf-refund-card-actions
    .cf-refund-action-button {
        flex: 1 1 calc(50% - 4px);

        min-height: 42px;
    }


    /* Return-credit becomes a bottom sheet on phones. */

    body.cf-r820.cf-workspace
    details.cf-credit-return[open] form {
        top: auto;

        right: 8px;
        bottom: 8px;
        left: 8px;

        transform: none;

        width: auto;

        max-height: calc(100vh - 16px);

        padding: 17px !important;

        border-radius: 11px;
    }

}


/* ============================================================
   CommerceFlow r8.3.0 — Tenant Service & Access
   Commercial prices and internal billing mechanics stay admin-only.
   ============================================================ */
body.cf-r820.cf-workspace .cf-service-access-header { margin-bottom: 16px; }
body.cf-r820.cf-workspace .cf-service-access-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--cf-line, #d7e0e8);
    border-radius: 10px;
    background: var(--cf-line, #d7e0e8);
}
body.cf-r820.cf-workspace .cf-service-access-hero > div {
    min-width: 0;
    padding: 17px 18px;
    background: #fff;
}
body.cf-r820.cf-workspace .cf-service-access-hero span,
body.cf-r820.cf-workspace .cf-service-access-details span {
    display: block;
    margin-bottom: 5px;
    color: var(--cf-text-muted, #66778a);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.cf-r820.cf-workspace .cf-service-access-hero strong,
body.cf-r820.cf-workspace .cf-service-access-details strong {
    display: block;
    color: var(--cf-text, #0d1b2a);
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.cf-r820.cf-workspace .cf-service-access-hero small {
    display: block;
    margin-top: 5px;
    color: var(--cf-text-muted, #66778a);
    font-size: 11px;
    line-height: 1.45;
}
body.cf-r820.cf-workspace .cf-service-access-support { overflow: hidden; }
body.cf-r820.cf-workspace .cf-service-access-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 16px;
}
body.cf-r820.cf-workspace .cf-service-access-details > div {
    padding: 13px 14px;
    border: 1px solid var(--cf-line, #d7e0e8);
    border-radius: 8px;
    background: var(--cf-surface-soft, #f8fafb);
}
body.cf-r820.cf-workspace .cf-service-access-support > .form-help {
    margin: 0;
    padding: 0 18px 18px;
}