/* --------------------------------------------------------------------------
   DS-VGZ - pages/backoffice.css
   Back Office-only responsive rules.
   -------------------------------------------------------------------------- */

/* Back Office mobile containment
   --------------------------------
   Most admin pages still own local inline styles. This layer keeps the
   mobile behavior consistent without changing desktop layout or backend
   markup: page-level overflow is forbidden, wide data tables scroll inside
   their card, and long operational values wrap instead of pushing the viewport.
*/

[data-e2e^="backoffice-"],
.bo-tabs,
.bo-tab,
.bo-report-wrap,
.bo-cfg-wrap,
.bo-og-wrap,
.bo-mail-wrap,
.rev-wrap,
.bo-card,
.bo-report-card,
.rev-card,
.bo-og-item,
.bo-provider-row,
.bo-flow-box,
.bo-mail-row {
    box-sizing: border-box;
    min-width: 0;
}

[data-e2e^="backoffice-"] {
    overflow-wrap: anywhere;
}

.bo-report-wrap,
.bo-cfg-wrap,
.bo-og-wrap,
.bo-mail-wrap,
.rev-wrap,
[data-e2e="backoffice-users-page"],
[data-e2e="backoffice-user-detail-page"] {
    width: 100%;
    max-width: min(var(--ai-max, 1280px), 100%);
}

.bo-tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.bo-tab {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
}

.bo-report-card,
.bo-card,
.rev-card,
.ai-card {
    max-width: 100%;
}

.bo-report-card > *,
.bo-card > *,
.rev-card > *,
.ai-card > * {
    min-width: 0;
}

.bo-report-card table,
.bo-card table,
.rev-card table,
[data-e2e="backoffice-users-table"],
.bo-usage-table,
.rev-table,
.bo-tx-table {
    max-width: 100%;
}

.bo-report-card code,
.bo-card code,
.rev-card code,
.bo-report-card pre,
.bo-card pre,
.rev-card pre,
.sg-snip,
.sg-snip pre {
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: normal;
}

.bo-mini-kv,
.bo-kv,
.bo-stat,
.bo-mail-row,
.bo-provider-head,
.bo-og-item-foot,
.rev-presets,
[data-bo-spend-controls],
[data-e2e="backoffice-users-filters"],
[data-e2e="backoffice-users-bulk-bar"],
[data-e2e="backoffice-user-detail-head"],
[data-e2e="backoffice-ai-credits-report-head"],
[data-e2e="backoffice-ai-credits-settings-head"],
[data-e2e="backoffice-og-images-head"],
[data-e2e="backoffice-revenue-report-head"] {
    max-width: 100%;
}

.bo-tx-scroll,
.rev-scroll,
[data-e2e="backoffice-users-table-card"],
[data-e2e="backoffice-modules-card"],
[data-e2e="backoffice-signup-allowlist-card"],
[data-e2e="backoffice-ai-credits-usage-table-card"],
[data-e2e="backoffice-revenue-transactions-grid"],
[data-e2e="backoffice-revenue-by-month"],
[data-e2e="backoffice-revenue-by-plan"],
[data-e2e="backoffice-revenue-recent-transactions"] {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.bo-mail-row select,
.bo-mail-row input,
.bo-mail-row .ai-btn,
.bo-og-wrap input,
.bo-og-wrap select,
.bo-og-wrap .ai-btn,
.bo-cfg-wrap input,
.bo-cfg-wrap select,
.bo-cfg-wrap textarea,
.bo-cfg-wrap .ai-btn,
.bo-report-wrap input,
.bo-report-wrap select,
.bo-report-wrap textarea,
.bo-report-wrap .ai-btn,
.rev-wrap input,
.rev-wrap select,
.rev-wrap textarea,
.rev-wrap .ai-btn,
[data-e2e="backoffice-user-detail-page"] input,
[data-e2e="backoffice-user-detail-page"] select,
[data-e2e="backoffice-user-detail-page"] textarea,
[data-e2e="backoffice-user-detail-page"] .ai-btn,
[data-e2e="backoffice-users-page"] input,
[data-e2e="backoffice-users-page"] select,
[data-e2e="backoffice-users-page"] textarea,
[data-e2e="backoffice-users-page"] .ai-btn {
    max-width: 100%;
}

.bo-detail-actions > *,
.bo-mail-actions > *,
.rev-presets > *,
[data-bo-spend-controls] > * {
    min-width: 0;
}

.bo-og-label,
.bo-mini-kv strong,
.bo-mini-kv span,
.bo-kv span,
.bo-tx-table td,
.rev-table td,
.bo-usage-table td,
[data-e2e="backoffice-user-detail-email"],
[data-e2e="backoffice-user-public-url"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 980px) {
    .bo-report-grid,
    .rev-grid,
    .bo-grid {
        grid-template-columns: 1fr !important;
    }

    .bo-report-grid > *,
    .rev-grid > *,
    .bo-grid > * {
        grid-column: 1 / -1 !important;
    }

    .bo-provider-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bo-flow {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bo-flow-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .bo-wallet-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1280px) and (min-width: 641px) {
    #sg-sections [style*="grid-template-columns:repeat("],
    #sg-sections [style*="grid-template-columns: repeat("],
    #sg-sections [style*="grid-template-columns:repeat(4"],
    #sg-sections [style*="grid-template-columns:repeat(3"],
    #sg-sections [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
    }

    #sg-sections [data-e2e="styleguide-ribbon-stress-grid"],
    #sg-sections .ai-sg-credit-pack-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
    }

    #sg-sections [style*="max-width:280px"],
    #sg-sections [style*="max-width:560px"],
    #sg-sections [style*="max-width:760px"],
    #sg-sections [style*="max-width:1120px"] {
        max-width: 100% !important;
    }

    #sg-sections .ai-plan-card {
        width: 100%;
        min-width: 240px;
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .bo-report-wrap,
    .bo-cfg-wrap,
    .bo-og-wrap,
    .bo-mail-wrap,
    .rev-wrap,
    [data-e2e="backoffice-users-page"],
    [data-e2e="backoffice-user-detail-page"] {
        padding: 0.75rem !important;
    }

    .bo-tabs {
        flex-wrap: nowrap !important;
        margin-inline: -0.75rem;
        padding-inline: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .bo-tab {
        gap: 0.34rem;
        padding: 0.48rem 0.68rem;
        font-size: 0.82rem;
    }

    .bo-report-card,
    .bo-card,
    .rev-card {
        padding: 0.85rem !important;
    }

    [data-e2e^="backoffice-"] h1 {
        font-size: clamp(1.35rem, 8vw, 1.7rem) !important;
        line-height: 1.12;
    }

    [data-e2e^="backoffice-"] h2,
    .bo-report-card h2,
    .bo-card h2,
    .rev-card h2 {
        line-height: 1.25;
    }

    .bo-wallet-fields,
    .bo-mini-kv,
    .bo-kv,
    .bo-mail-row,
    .bo-mail-actions,
    .bo-og-item-foot,
    .bo-provider-head,
    .bo-stat,
    .bo-detail-actions,
    .cv-conv-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bo-stat {
        gap: 0.25rem;
        justify-items: start;
    }

    .bo-stat strong {
        font-size: 1.25rem;
    }

    .bo-mail-row {
        gap: 0.55rem;
    }

    .bo-mail-type,
    .bo-mail-email,
    .bo-mail-label,
    .bo-mail-actions,
    .bo-mail-row select,
    .bo-mail-row input,
    .bo-mail-row .ai-btn {
        width: 100%;
        min-width: 0 !important;
    }

    .bo-mail-active {
        display: inline-flex !important;
        width: 100%;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .bo-mail-row input[type="checkbox"],
    .bo-cfg-wrap input[type="checkbox"],
    .bo-report-wrap input[type="checkbox"],
    .rev-wrap input[type="checkbox"],
    [data-e2e="backoffice-users-page"] input[type="checkbox"],
    [data-e2e="backoffice-user-detail-page"] input[type="checkbox"] {
        width: auto;
        min-width: auto !important;
        flex: 0 0 auto;
    }

    .bo-detail-actions .ai-btn,
    .bo-og-wrap .ai-btn,
    .bo-cfg-wrap .ai-btn,
    .bo-report-wrap .ai-btn,
    .bo-cfg-wrap button,
    .bo-cfg-wrap a,
    .bo-report-wrap button,
    .bo-report-wrap a,
    .rev-wrap .ai-btn,
    [data-e2e="backoffice-users-page"] .ai-btn,
    [data-e2e="backoffice-user-detail-page"] .ai-btn {
        min-width: 28px;
        min-height: 28px;
    }

    .bo-cfg-wrap a:not(.bo-tab) {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
    }

    .bo-detail-actions .ai-btn,
    .bo-og-wrap .ai-btn,
    .bo-cfg-wrap .ai-btn,
    .bo-report-wrap .ai-btn,
    .rev-wrap .ai-btn,
    [data-e2e="backoffice-users-page"] .ai-btn,
    [data-e2e="backoffice-user-detail-page"] .ai-btn {
        width: 100%;
        justify-content: center;
        white-space: normal !important;
    }

    [data-e2e="backoffice-user-detail-head"] > div:last-child,
    [data-e2e="backoffice-ai-credits-report-head"] > div:last-child,
    [data-e2e="backoffice-ai-credits-settings-head"] > div:last-child,
    [data-e2e="backoffice-og-images-head"] > div:last-child,
    [data-e2e="backoffice-revenue-report-head"] > div:last-child {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [data-e2e="backoffice-user-card"] > div[style*="display:flex"],
    [data-e2e="backoffice-user-plan-card"] > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: start;
    }

    .bo-ring {
        width: 92px;
        height: 92px;
    }

    [data-e2e="backoffice-user-credit-adjust-card"]
        div[style*="grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto"],
    [data-e2e="backoffice-user-subscription-override-card"]
        div[style*="grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto"],
    [data-e2e="backoffice-ai-credits-threshold-card"]
        div[style*="grid-template-columns:minmax(180px,1fr) auto"],
    [data-e2e="backoffice-signup-credits-card"]
        div[style*="grid-template-columns:minmax(180px,1fr) auto"],
    [data-e2e="backoffice-cv-history-card"]
        div[style*="grid-template-columns:minmax(180px,1fr) auto"],
    [data-e2e="backoffice-recommended-products-card"]
        div[style*="grid-template-columns:minmax(180px,1fr) auto"],
    [data-e2e="backoffice-og-images-upload-card"]
        div[style*="grid-template-columns:1fr 2fr"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [data-e2e="backoffice-user-public-profile-fields"] span {
        display: block;
    }

    [data-e2e="backoffice-user-slug-reset"] {
        margin: 0.45rem 0 0 !important;
    }

    [data-e2e="backoffice-users-filters"],
    [data-e2e="backoffice-users-bulk-bar"],
    [data-bo-spend-controls],
    .rev-presets {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    [data-e2e="backoffice-users-filters"] > *,
    [data-e2e="backoffice-users-bulk-bar"] > *,
    [data-bo-spend-controls] > *,
    .rev-presets > * {
        width: 100%;
    }

    [data-e2e="backoffice-users-page"] form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [data-e2e="backoffice-users-page"] form > *,
    [data-e2e="backoffice-users-page"] form label,
    [data-e2e="backoffice-users-page"] form input,
    [data-e2e="backoffice-users-page"] form select,
    [data-e2e="backoffice-users-page"] form button {
        width: 100%;
        min-width: 0 !important;
    }

    [data-e2e="backoffice-users-table"] {
        min-width: 860px;
    }

    [data-e2e="backoffice-users-table"] th,
    [data-e2e="backoffice-users-table"] td {
        white-space: nowrap;
    }

    .bo-report-kpi strong,
    .rev-kpi strong,
    .bo-flow-box strong {
        font-size: clamp(0.95rem, 6vw, 1.2rem) !important;
    }

    .bo-token-bar {
        min-width: 72px;
    }

    .bo-provider-row,
    .bo-flow-box,
    .bo-og-item {
        width: 100%;
    }

    .bo-og-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bo-og-drop {
        max-width: 100% !important;
        padding: 1rem 0.75rem !important;
    }

    .cv-conv-label,
    .cv-conv-select,
    [data-e2e="backoffice-ai-credits-converter-card"] .cv-conv-label,
    [data-e2e="backoffice-ai-credits-converter-card"] .cv-conv-select {
        width: 100%;
        min-width: 0 !important;
    }

    .cv-conv-eq {
        justify-self: start;
        padding-bottom: 0 !important;
    }

    .sg-snip-head {
        gap: 0.5rem;
    }

    .sg-snip-lbl {
        white-space: normal;
    }

    .ai-modal-backdrop .ai-card,
    .ai-modal-backdrop > div {
        width: min(100% - 1.5rem, 420px) !important;
        max-width: calc(100vw - 1.5rem) !important;
    }
}

@media (max-width: 430px) {
    .bo-report-wrap,
    .bo-cfg-wrap,
    .bo-og-wrap,
    .bo-mail-wrap,
    .rev-wrap,
    [data-e2e="backoffice-users-page"],
    [data-e2e="backoffice-user-detail-page"] {
        padding: 0.6rem !important;
    }

    .bo-report-card,
    .bo-card,
    .rev-card {
        border-radius: 8px;
        padding: 0.75rem !important;
    }

    .bo-tab {
        font-size: 0.8rem;
    }

    .bo-report-card table,
    .bo-card table,
    .rev-card table,
    [data-e2e="backoffice-users-table"] {
        font-size: 0.8rem !important;
    }

    .bo-report-card th,
    .bo-report-card td,
    .bo-card th,
    .bo-card td,
    .rev-card th,
    .rev-card td {
        padding-inline: 0.45rem !important;
    }
}

@media (max-width: 640px) {
    .bo-tabs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.45rem !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        overflow-x: visible !important;
    }

    .bo-tab {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }

    #sg-sections [style*="grid-template-columns:repeat(4"],
    #sg-sections [style*="grid-template-columns:repeat(3"],
    #sg-sections [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
    }

    #sg-sections [style*="max-width:280px"],
    #sg-sections [style*="max-width:560px"],
    #sg-sections [style*="max-width:760px"],
    #sg-sections [style*="max-width:1120px"] {
        max-width: 100% !important;
    }

    #sg-sections .ai-plan-card {
        width: 100%;
        justify-self: stretch;
    }
}