/* Shared finance table scroll layout — fill card when wide, horizontal scroll when narrow */

.finance-page,
.partner-finance-page,
.finance-platform-settings-card,
.finance-platform-settings-card__body,
.fin-dash-paged-table,
.fin-table-layout,
.client-finance-units,
.client-finance-portal__page {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.client-finance-portal[data-model-id="client-finance-orders"] .client-finance-portal__page,
.client-finance-portal:has(.finance-table-wrap--scroll) .client-finance-portal__page,
.finance-page:has(.finance-table-wrap--scroll),
.partner-finance-page:has(.finance-table-wrap--scroll) {
    overflow-x: visible;
}

/* Scroll wrapper — must be the overflow box */
.finance-table-wrap--scroll,
.fin-cg-orders-table-wrap.finance-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    /* iOS Safari: promote scrollport so nested pan-x works inside clipped shells */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    scrollbar-width: thin;
    scrollbar-color: #B9AACF #EDEAF2;
}

.finance-table-wrap--scroll::-webkit-scrollbar {
    height: 8px;
}

.finance-table-wrap--scroll::-webkit-scrollbar-track {
    background: #EDEAF2;
    border-radius: 999px;
}

.finance-table-wrap--scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9A8AB8 0%, #6A5D8B 100%);
    border-radius: 999px;
    border: 2px solid #EDEAF2;
}

/* RTL pages: LTR scrollport + RTL table = predictable horizontal scroll */
[dir="rtl"] .finance-table-wrap--scroll.fin-table-scroll-wrap,
.client-finance-portal[dir="ltr"] [dir="rtl"] .finance-table-wrap--scroll.fin-table-scroll-wrap {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .finance-table-wrap--scroll .finance-table.fin-ord-table,
.client-finance-portal[dir="ltr"] [dir="rtl"] .finance-table-wrap--scroll .finance-table.fin-ord-table {
    direction: rtl;
}

/* Fill card when wide; grow + scroll when columns need more space */
.finance-table-wrap--scroll .finance-table:not(.finance-table--payments):not(.finance-table--payments-detailed),
.finance-table-wrap--scroll table.finance-table.fin-ord-table:not(.finance-table--payments),
.finance-table-wrap--scroll .fin-cg-orders-table,
.finance-table-wrap--scroll table.fin-cg-orders-table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
}

.fin-table-scroll-wrap--wide .finance-table:not(.finance-table--payments):not(.finance-table--payments-detailed),
.fin-table-scroll-wrap--wide table.finance-table.fin-ord-table,
.fin-table-scroll-wrap--wide .fin-cg-orders-table {
    min-width: 52rem;
}

.fin-table-scroll-wrap--md .finance-table:not(.finance-table--payments):not(.finance-table--payments-detailed),
.fin-table-scroll-wrap--md table.finance-table.fin-ord-table {
    min-width: 48rem;
}

.fin-table-scroll-wrap--sm .finance-table:not(.finance-table--payments):not(.finance-table--payments-detailed),
.fin-table-scroll-wrap--sm table.finance-table.fin-ord-table {
    min-width: 44rem;
}

@media (max-width: 1180px) {
    .fin-table-scroll-wrap:not(.fin-table-scroll-wrap--wide):not(.fin-table-scroll-wrap--sm):not(.fin-table-scroll-wrap--fit) .finance-table:not(.finance-table--payments),
    .fin-table-scroll-wrap:not(.fin-table-scroll-wrap--wide):not(.fin-table-scroll-wrap--sm):not(.fin-table-scroll-wrap--fit) table.finance-table.fin-ord-table {
        min-width: 48rem;
    }
}

@media (max-width: 768px) {
    .fin-table-scroll-wrap:not(.fin-table-scroll-wrap--wide):not(.fin-table-scroll-wrap--fit) .finance-table:not(.finance-table--payments),
    .fin-table-scroll-wrap:not(.fin-table-scroll-wrap--wide):not(.fin-table-scroll-wrap--fit) table.finance-table.fin-ord-table {
        min-width: 44rem;
    }
}

/* Card-style bordered wrapper */
.fin-table-scroll-wrap--card,
.fin-cg-orders-table-wrap.finance-table-wrap {
    border: 1px solid #ebe8f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(55, 42, 88, 0.05), 0 6px 16px rgba(55, 42, 88, 0.06);
}

/* finance-admin sets overflow:hidden on .fin-ord-table — do not clip inside scroll area */
.finance-table-wrap--scroll .finance-table.fin-ord-table,
.finance-table-wrap--scroll .fin-cg-orders-table {
    overflow: visible;
}

/* Actions column scrolls with table by default */
.finance-table-wrap--scroll .finance-table.fin-ord-table th.fin-ord-col--actions,
.finance-table-wrap--scroll .finance-table.fin-ord-table td.fin-ord-col--actions {
    position: static;
    inset: auto;
    z-index: auto;
    box-shadow: none;
}

.finance-table-wrap--scroll .finance-table.fin-ord-table thead th.fin-ord-col--actions {
    background: #F8F7FB;
}

.finance-table-wrap--scroll .finance-table.fin-ord-table tbody td.fin-ord-col--actions {
    background: transparent;
}

/* Opt-in: pin actions column while scrolling */
.finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table th.fin-ord-col--actions,
.finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table td.fin-ord-col--actions,
.finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end th.fin-ord-col--actions,
.finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end td.fin-ord-col--actions {
    position: sticky;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 2;
    box-shadow: -4px 0 10px rgba(55, 42, 88, 0.06);
}

[dir="rtl"] .finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table th.fin-ord-col--actions,
[dir="rtl"] .finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table td.fin-ord-col--actions,
[dir="rtl"] .finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end th.fin-ord-col--actions,
[dir="rtl"] .finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end td.fin-ord-col--actions {
    box-shadow: 4px 0 10px rgba(55, 42, 88, 0.06);
}

.finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table thead th.fin-ord-col--actions,
.finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end thead th.fin-ord-col--actions {
    background: #F8F7FB;
}

.finance-page--admin .finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table thead th.fin-ord-col--actions {
    background-color: rgba(243, 242, 246, 0.98);
}

:is([data-model-id="partner-finance-orders"], [data-model-id="partner-finance-statistics"], [data-model-id="partner-finance-customers"], [data-model-id="admin-finance-order-mgmt"], [data-model-id="admin-finance-customers"], [data-model-id="client-finance-orders"]) .finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table th.fin-ord-col--actions,
:is([data-model-id="partner-finance-orders"], [data-model-id="partner-finance-statistics"], [data-model-id="partner-finance-customers"], [data-model-id="admin-finance-order-mgmt"], [data-model-id="admin-finance-customers"], [data-model-id="client-finance-orders"]) .finance-table-wrap--sticky-actions.finance-table-wrap--scroll .finance-table.fin-ord-table td.fin-ord-col--actions,
:is([data-model-id="partner-finance-orders"], [data-model-id="partner-finance-statistics"], [data-model-id="partner-finance-customers"], [data-model-id="admin-finance-order-mgmt"], [data-model-id="admin-finance-customers"], [data-model-id="client-finance-orders"]) .finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end th.fin-ord-col--actions,
:is([data-model-id="partner-finance-orders"], [data-model-id="partner-finance-statistics"], [data-model-id="partner-finance-customers"], [data-model-id="admin-finance-order-mgmt"], [data-model-id="admin-finance-customers"], [data-model-id="client-finance-orders"]) .finance-table-wrap--sticky-actions .fin-ord-table.fin-ord-table--actions-end td.fin-ord-col--actions {
    position: static;
    inset: auto;
    z-index: auto;
    box-shadow: none;
}

/* Mobile — stacked row cards (Orders / Manage tabs pattern). Requires data-label on each td. */
@media (max-width: 768px) {
    .fin-ord-list-card .partner-retail-table-panel:has(.fin-ord-table--mobile-cards) {
        overflow: visible !important;
    }

    .fin-ord-list-card .partner-retail-table-scroll:has(.fin-ord-table--mobile-cards),
    .fin-ord-list-card .finance-table-wrap--scroll:has(.fin-ord-table--mobile-cards) {
        overflow: visible !important;
        touch-action: auto !important;
        cursor: default !important;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards,
    .finance-table-wrap--scroll .fin-ord-table.fin-ord-table--mobile-cards,
    .fin-table-scroll-wrap--wide .fin-ord-table.fin-ord-table--mobile-cards {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: none !important;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards thead {
        display: none !important;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody {
        display: block !important;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody tr {
        display: block !important;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid #e4dfea;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(55, 42, 88, 0.04);
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.65rem 1rem;
        width: 100% !important;
        padding: 0.45rem 0 !important;
        border: none !important;
        text-align: start !important;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        flex: 0 0 38%;
        max-width: 9.5rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #8b7fa8;
        line-height: 1.35;
        padding-top: 0.1rem;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        text-align: end;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td.fin-ord-col--actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        margin-top: 0.35rem;
        padding-top: 0.65rem !important;
        border-top: 1px solid #ece7f2 !important;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td.fin-ord-col--actions::before {
        max-width: none;
        flex: 0 0 auto;
    }

    .fin-ord-list-card .fin-ord-table.fin-ord-table--mobile-cards tbody td.fin-ord-col--actions > * {
        width: auto;
        flex: 0 0 auto;
        text-align: end;
    }
}

/*
 * Order / checkout-group detail — horizontal table scroll on iPhone / narrow viewports.
 * Nested overflow-x: clip|hidden on ancestors swallows touch pans on iOS Safari;
 * partner order detail already used this pattern — apply to all order types.
 */
@media (max-width: 1024px) {
    :is(
        [data-model-id="partner-finance-order-detail"],
        [data-model-id="client-finance-order-detail"],
        [data-model-id="admin-finance-checkout-group-detail"],
        [data-model-id="admin-finance-order-detail"],
        [data-model-id="client-finance-wallet"],
        [data-model-id="client-finance-wallet-transactions"],
        [data-model-id="partner-finance-wallet"],
        [data-model-id="partner-finance-wallet-transactions"]
    ),
    [data-model-id="client-finance-order-detail"].client-finance-order-detail-wrap,
    [data-model-id="client-finance-order-detail"] .client-finance-order-detail-card.traffic-requests.finance-page,
    [data-model-id="client-finance-order-detail"] .fin-client-order-detail,
    [data-model-id="client-finance-order-detail"] .fin-client-order-detail__aside,
    :is(
        [data-model-id="partner-finance-order-detail"],
        [data-model-id="client-finance-order-detail"],
        [data-model-id="admin-finance-checkout-group-detail"],
        [data-model-id="admin-finance-order-detail"],
        [data-model-id="client-finance-wallet"],
        [data-model-id="client-finance-wallet-transactions"],
        [data-model-id="partner-finance-wallet"],
        [data-model-id="partner-finance-wallet-transactions"]
    ) :is(
        .client-finance-order-detail-wrap,
        .client-finance-order-detail-card,
        .partner-finance-order-detail-card,
        .client-finance-units,
        .client-my-listings__main,
        .services-content-section,
        .content-wrapper,
        .content,
        .traffic-requests.finance-page,
        .portal-finance-orders-list,
        .finance-platform-settings-card,
        .finance-platform-settings-card__body,
        .portal-finance-orders-list__fieldset,
        .fin-ord-list-card,
        .fin-order-detail-overview-body,
        .fin-client-order-detail,
        .fin-client-order-detail__main,
        .fin-client-order-detail__grid,
        .fin-client-order-detail__aside,
        .fin-partner-order-detail-main-card,
        .fin-partner-order-detail-main-card__body,
        .fin-cg-admin-page-card,
        .fin-cg-admin-page-card__body,
        .fin-cg-admin-overview,
        .fin-cg-admin-overview-grid,
        .fin-cg-overview__orders-full,
        .fin-cg-overview__orders-full-list,
        .fin-cg-order-full,
        .fin-cg-order-full--admin,
        .fin-cg-order-full__body,
        .fin-cg-order-full__body--eshop-buyer,
        .fin-cg-order-full__lines--unified-table,
        fieldset.fin-cg-order-full__lines-section--fieldset,
        fieldset.fin-cg-order-full__lines-section--fieldset > .finance-platform-settings-card__body,
        fieldset.fin-client-od-card,
        .fin-client-od-card,
        .fin-client-od-card--lines,
        .fin-client-od-card--lines-eshop,
        .fin-client-od-card--earnings-table,
        .fin-client-od-card--earnings-combined,
        .fin-client-od-card--payment,
        .fin-client-order-page-border,
        .fin-client-order-page-border__body,
        .fin-client-order-detail-payment-tab,
        .fin-order-detail-invoice-tab,
        .fin-partner-order-invoice-tab,
        .fin-partner-payment-tab,
        .fin-partner-earnings-tab,
        .fin-order-detail-tab-fieldset,
        .fin-admin-tab-panel,
        .fin-order-lines--embed,
        .fin-dash-paged-table,
        .fin-order-lines-paged,
        .fin-pay-tab,
        .fin-pay-tab__section,
        .fin-pay-checkout__group-table-wrap
    ) {
        min-width: 0;
        max-width: 100%;
        overflow-x: visible;
        overflow-y: visible;
        box-sizing: border-box;
    }

    :is(
        [data-model-id="partner-finance-order-detail"],
        [data-model-id="client-finance-order-detail"],
        [data-model-id="admin-finance-checkout-group-detail"],
        [data-model-id="admin-finance-order-detail"],
        [data-model-id="client-finance-wallet"],
        [data-model-id="client-finance-wallet-transactions"],
        [data-model-id="partner-finance-wallet"],
        [data-model-id="partner-finance-wallet-transactions"]
    ) :is(
        .finance-table-wrap--scroll,
        .fin-table-scroll-wrap,
        .fin-order-detail-table-scroll,
        .fin-statement-table-scroll,
        .fin-pay-tab__table-wrap,
        .fin-cg-orders-table-wrap
    ) {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        cursor: grab;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    :is(
        [data-model-id="partner-finance-order-detail"],
        [data-model-id="client-finance-order-detail"],
        [data-model-id="admin-finance-checkout-group-detail"],
        [data-model-id="admin-finance-order-detail"],
        [data-model-id="client-finance-wallet"],
        [data-model-id="client-finance-wallet-transactions"],
        [data-model-id="partner-finance-wallet"],
        [data-model-id="partner-finance-wallet-transactions"]
    ) :is(
        .finance-table-wrap--scroll,
        .fin-table-scroll-wrap,
        .fin-order-detail-table-scroll,
        .fin-statement-table-scroll
    ).is-drag-scrolling {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
    }

    :is(
        [data-model-id="partner-finance-order-detail"],
        [data-model-id="client-finance-order-detail"],
        [data-model-id="admin-finance-checkout-group-detail"],
        [data-model-id="admin-finance-order-detail"]
    ) :is(
        .fin-client-od-card--lines .fin-order-lines__table,
        .fin-order-lines__table--eshop-unified,
        .fin-earnings-table,
        .fin-client-od-pay-table,
        .fin-pay-checkout__group-table,
        .fin-pay-checkout__booking-table,
        .fin-pay-checkout__methods-table,
        .fin-ord-table--invoices
    ) {
        min-width: 36rem;
    }

    :is(
        [data-model-id="client-finance-wallet"],
        [data-model-id="client-finance-wallet-transactions"],
        [data-model-id="partner-finance-wallet"],
        [data-model-id="partner-finance-wallet-transactions"]
    ) :is(
        .fin-statement-table-scroll .finance-table.fin-ord-table,
        .finance-table-wrap--scroll .finance-table.fin-ord-table
    ) {
        min-width: 44rem;
    }
}