/*
 * Shared viewport-safety layer for the customer storefront.
 * Keep page-specific presentation in shop-app.css and feature stylesheets.
 */

html,
body.sc-body {
    max-width: 100%;
}

.sc-main,
.sc-main > *,
.sc-container,
.sc-panel,
.sc-card,
.sc-page-header,
.sc-page-section,
.sc-form-grid,
.sc-grid {
    min-width: 0;
    max-width: 100%;
}

.sc-main img,
.sc-main video,
.sc-main canvas,
.sc-main iframe {
    max-width: 100%;
}

.sc-main pre {
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sc-main code,
.sc-main .sc-breakable,
.sc-main [data-copy-value] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sc-table-wrap,
.sc-table-scroll,
.sc-orders-table-wrap,
.sc-api-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .sc-container {
        padding-inline: 12px;
    }

    .sc-main {
        padding-top: 14px;
        padding-bottom: calc(var(--sc-bottom-h, 64px) + var(--sc-safe-b, 0px) + 18px);
    }

    .sc-page-header,
    .sc-section-header,
    .sc-card__header,
    .sc-panel__header {
        min-width: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .sc-page-header > *,
    .sc-section-header > *,
    .sc-card__header > *,
    .sc-panel__header > * {
        min-width: 0;
    }

    .sc-page-header h1,
    .sc-page-header h2,
    .sc-section-header h2,
    .sc-section-header h3 {
        overflow-wrap: anywhere;
    }

    .sc-topbar .sc-dropdown__panel,
    .sc-topbar .sc-notify-dropdown {
        position: fixed;
        top: calc(var(--sc-header-h, 64px) + 6px);
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: min(72vh, 620px);
        max-height: min(72dvh, 620px);
    }

    .sc-modal,
    .sc-product-modal,
    .sc-order-action-modal,
    .sc-group-goal-modal,
    .sc-md-date {
        padding: 8px;
    }

    .sc-modal__dialog,
    .sc-product-dialog,
    .sc-product-modal__loading,
    .sc-product-modal__load-error,
    .sc-order-action-modal__dialog,
    .sc-group-goal-modal__dialog,
    .sc-md-date__dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        min-width: 0;
    }

    .sc-modal__body,
    .sc-product-dialog__body,
    .sc-order-action-modal__body,
    .sc-group-goal-modal__body,
    .sc-md-date__body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sc-modal__footer,
    .sc-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .sc-modal__footer > *,
    .sc-dialog-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .sc-input,
    .sc-select,
    .sc-textarea,
    .sc-field input,
    .sc-field select,
    .sc-field textarea,
    .sc-main input,
    .sc-main select,
    .sc-main textarea {
        max-width: 100%;
        min-width: 0;
    }

    .sc-tabs,
    .sc-segmented,
    .sc-filter-tabs,
    .sc-pagination {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sc-tabs > *,
    .sc-segmented > *,
    .sc-filter-tabs > * {
        flex: 0 0 auto;
    }

    .sc-auth-shell {
        width: 100%;
        min-height: auto;
        padding: 16px 0;
    }

    .sc-auth-card {
        width: 100%;
        max-width: 100%;
        padding-inline: 18px;
    }

    .sc-static-page-content,
    .sc-api-docs,
    .sc-developer-page {
        overflow-wrap: anywhere;
    }

    .sc-static-page-content table,
    .sc-api-docs table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sc-toast-area {
        right: 10px;
        left: 10px;
        width: auto;
    }

    /* Customer orders: preserve every existing value while replacing nine
       full-width label rows with a compact three-column summary grid. */
    .sc-orders-page .sc-orders-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 4px;
        margin-bottom: 6px;
        padding: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        justify-items: center;
        gap: 1px;
        min-width: 0;
        min-height: 36px;
        padding: 3px 4px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td::before {
        font-size: 7.5px;
        line-height: 1.15;
        text-align: center;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        display: grid;
        grid-column: 1 / -1;
        min-height: 0;
        padding-block: 5px;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-number, .sc-orders-status-text, .sc-orders-product, .sc-orders-category, .sc-orders-balance-label) {
        max-width: 100%;
        margin-inline: auto;
        font-size: inherit;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-requirements, .sc-order-wait-actions) {
        gap: 1px;
        margin: 0;
        font-size: inherit;
        line-height: 1.2;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-money, time, strong, span, dd) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sc-orders-page .sc-orders-row .sc-orders-repurchase {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 30px;
        padding: 4px 5px;
        font-size: 9.5px;
    }

    .sc-orders-page .sc-orders-summary {
        gap: 5px;
        margin-bottom: 5px;
    }

    .sc-orders-page .sc-orders-statuses {
        gap: 4px;
    }

    .sc-orders-page .sc-orders-status {
        min-height: 36px;
        padding: 4px 6px;
        font-size: 9.5px;
        line-height: 1.2;
    }

    .sc-orders-page .sc-orders-status strong {
        min-width: 19px;
        font-size: 10.5px;
    }

    .sc-orders-page .sc-orders-consumed {
        min-height: 36px;
        padding: 5px 7px;
    }

    /* Wallet summary cards stay readable in pairs instead of becoming four
       separate full-width blocks on narrow phones. */
    .sc-wallet-page .sc-wallet-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 6px;
    }

    .sc-wallet-page .sc-wallet-stat {
        min-height: 50px;
        gap: 2px;
        padding: 5px 7px;
        border-radius: 9px;
    }

    .sc-wallet-page .sc-wallet-stat > span {
        font-size: 8.8px;
        line-height: 1.2;
    }

    .sc-wallet-page .sc-wallet-stat strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .sc-wallet-page .sc-wallet-stat__totals {
        gap: 3px;
    }

    /* Every ledger field remains present; two concise label/value cells share
       each line and a long final reference receives the full last line. */
    .sc-wallet-page .sc-wallet-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 7px;
        margin-bottom: 6px;
        padding: 5px;
    }

    .sc-wallet-page .sc-wallet-table td {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        width: auto;
        min-width: 0;
        min-height: 27px;
        padding: 2px 3px !important;
        font-size: 10px;
        line-height: 1.25;
    }

    .sc-wallet-page .sc-wallet-table td::before {
        font-size: 7.8px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .sc-wallet-page .sc-wallet-table td:last-child {
        grid-column: 1 / -1;
    }

    .sc-wallet-page :is(.sc-wallet-kind, .sc-wallet-money, .sc-wallet-balance, .sc-wallet-order-link) {
        min-width: 0;
        max-width: 100%;
        font-size: 10px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* Agent customer cards retain all values/actions, with denser spacing and
       a swipeable single action row instead of a tall two-row button grid. */
    .sc-agent-clients-page .sc-agent-customer-row {
        gap: 4px 7px;
        margin-bottom: 6px;
        padding: 7px;
    }

    .sc-agent-clients-page .sc-agent-customer-number {
        margin-top: 1px;
    }

    .sc-agent-clients-page .sc-agent-vip-badge {
        min-width: 50px;
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.68rem;
    }

    .sc-agent-clients-page .sc-agent-money-grid {
        gap: 5px;
    }

    .sc-agent-clients-page .sc-agent-money-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        min-height: 30px;
        padding: 4px 5px;
        text-align: start;
    }

    .sc-agent-clients-page .sc-agent-money-item span {
        margin: 0;
        font-size: 0.61rem;
    }

    .sc-agent-clients-page .sc-agent-money-item strong {
        font-size: 0.7rem;
        text-align: end;
    }

    .sc-agent-clients-page .sc-agent-customer-cell--actions > .sc-agent-mobile-label {
        display: none;
    }

    .sc-agent-clients-page .sc-agent-action-grid {
        grid-template-columns: repeat(4, minmax(76px, 1fr));
        gap: 4px;
        max-width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sc-agent-clients-page .sc-agent-action-grid .sc-btn {
        min-height: 32px;
        padding: 4px 5px;
        font-size: 0.64rem;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* The base header hides this control at 480px; mobile correction keeps
       the existing theme menu available without changing its behavior. */
    .sc-topbar .sc-theme-control {
        display: block;
        flex: 0 0 auto;
    }
}

@media (max-width: 430px) {
    .sc-container {
        padding-inline: 10px;
    }

    .sc-main {
        padding-top: 10px;
    }

    .sc-modal__header,
    .sc-modal__body,
    .sc-modal__footer {
        padding-inline: 14px;
    }

    .sc-modal__footer,
    .sc-dialog-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-modal__footer .sc-btn,
    .sc-dialog-actions .sc-btn {
        width: 100%;
        justify-content: center;
    }

    .sc-wallet-head {
        align-items: flex-start;
        gap: 5px;
    }

    .sc-wallet-head h1 {
        font-size: 20px;
    }

    .sc-wallet-head .sc-btn {
        width: auto;
        min-height: 34px;
    }
}

@media (max-width: 340px) {
    .sc-orders-page .sc-orders-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td:last-child,
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        grid-column: 1 / -1;
    }
}

/* Mobile product purchase modal refinement */
@media (max-width: 699px) {
    .sc-product-modal {
        align-items: center;
        padding: 10px;
    }

    .sc-product-modal__shell,
    .sc-product-dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(88dvh);
        min-height: 0;
    }

    .sc-product-dialog {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sc-product-dialog__head {
        flex: 0 0 auto;
        padding: 11px 12px;
        gap: 10px;
    }

    .sc-product-dialog__head h1 {
        font-size: 16px;
        line-height: 1.35;
    }

    .sc-product-price-badge {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .sc-product-dialog__scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 11px 12px 12px;
    }

    .sc-product-dialog .form-row {
        margin-bottom: 9px;
    }

    .sc-product-dialog .sc-label {
        margin-bottom: 4px;
        font-size: 11.5px;
    }

    .sc-product-dialog .sc-input,
    .sc-product-dialog .sc-select {
        min-height: 40px;
        font-size: 13px;
    }

    .sc-product-requirements,
    .sc-product-note {
        margin-top: 10px;
    }

    .sc-product-dialog__actions {
        gap: 8px;
        margin-top: 12px;
    }

    .sc-product-dialog__buy,
    .sc-product-dialog__cancel {
        min-height: 40px;
        font-size: 13px;
        padding: 7px 12px;
    }
}

@media (max-width: 699px) {
    .sc-product-modal {
        z-index: 2000;
    }
}