/* ============================================
   UI/UX Load & Simplification Layer
   Structural, non-business-logic fixes across RealPayment pages
   ============================================ */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    color: var(--text-primary, #101828);
    background: var(--bg-primary, #F7F8FA);
}

img,
svg,
canvas,
iframe,
video {
    max-width: 100%;
}

:where(.container, .page-container, .dashboard-container, .profile-container, .settings-container, main) {
    width: min(100%, 1200px);
    max-width: 100%;
}

:where(.card, .page-section, .profile-section, .transactions-card, .settings-tabs-container, .modal-content, .wizard-modal-content) {
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

:where(.card, .page-section, .profile-section, .transactions-card) {
    padding: clamp(16px, 2.2vw, 28px);
}

:where(.header, .profile-header, .page-header) {
    border-radius: 12px;
}

:where(h1, h2, h3, p, label, button, a, td, th, code, pre) {
    overflow-wrap: anywhere;
}

:where(button, .button, .btn, .btn-ghost, .nav-btn, .wizard-btn, .pay-button) {
    min-height: 40px;
    min-width: 40px;
    line-height: 1.35;
}

:where(.modal-close,
.close-modal-btn,
.modal-close-btn,
.info-modal-close,
.share-modal-close,
.close-button,
.dashboard-transaction-modal__close) {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    touch-action: manipulation;
}

:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([aria-hidden="true"]):not([tabindex="-1"]),
select,
textarea) {
    min-height: 40px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

:where(.actions, .header-actions, .wizard-actions, .modal-actions, .form-actions, .support-buttons) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

:where(.table-container, .table-wrapper, .responsive-table, .code-block, .code-wrapper, pre) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Third-party hidden controls should not create page-level overflow. */
input[style*="-9999"],
textarea[style*="-9999"],
select[style*="-9999"] {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 1px !important;
    height: 1px !important;
    max-width: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

:where(table) {
    max-width: 100%;
}

/* Unified mobile navigation: keep the brand and all actions inside the viewport. */
@media (max-width: 768px) {
    .unified-navbar {
        width: 100%;
        max-width: 100vw;
        overflow: visible;
    }

    .navbar-container {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding-inline: 8px;
        gap: 8px;
        justify-content: flex-start;
        overflow: visible;
    }

    .navbar-brand {
        flex: 0 0 auto;
        min-width: 44px;
        max-width: 48px;
    }

    .navbar-menu {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 64px);
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-menu::-webkit-scrollbar {
        display: none;
    }

    .navbar-menu .nav-btn,
    .navbar-menu .navbar-link {
        flex: 0 0 auto;
        min-width: 40px;
        min-height: 40px;
        padding: 8px 10px;
        justify-content: center;
    }

    .navbar-menu .nav-btn span,
    .navbar-menu .navbar-link span,
    .brand-text,
    .navbar-brand-text {
        display: none;
    }

    .navbar-menu .nav-btn > span:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-dropdown {
        position: static;
    }

    .nav-dropdown-menu {
        position: fixed;
        top: 58px;
        right: 8px;
        left: 8px;
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 16px);
        max-height: min(70vh, 520px);
        overflow-y: auto;
        z-index: 2000;
    }

    .nav-dropdown-item {
        white-space: normal;
        min-height: 44px;
    }

    :where(.container, .page-container, .dashboard-container, .profile-container) {
        padding-inline: 12px;
    }

    :where(.header, .profile-header, .page-header) {
        padding: 18px 16px;
    }

    :where(.card, .page-section, .profile-section, .transactions-card) {
        margin-bottom: 14px;
    }
}

@media (max-width: 480px) {
    :where(.actions, .header-actions, .wizard-actions, .modal-actions, .form-actions) > :where(button, a, .button, .btn, .wizard-btn) {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Payment page: fallback/static layout must stay inside desktop and mobile viewports. */
.payment-card,
.payment-purpose-section,
.payment-details,
.amount-section,
.security-badge,
.link-expiry-info,
.support-section {
    width: 100%;
    max-width: 100%;
}

.payment-purpose-section,
.payment-details,
.amount-section {
    margin-inline: 0 !important;
}

.payment-purpose-section:hover,
.payment-details:hover,
.amount:hover,
.detail-row:hover {
    transform: none;
}

@media (min-width: 769px) {
    body:has(.payment-card) {
        padding-inline: 16px;
    }

    .payment-card {
        margin-inline: auto;
    }
}

/* Settings: keep the page powerful, but reduce operational noise. */
.settings-tabs-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

.settings-tab-content .card + .card {
    margin-top: 16px;
}

.var-btn {
    box-shadow: none;
}

.var-btn:hover {
    transform: none;
}

/* API docs: long content remains available, but scanning is easier. */
.nav-toc {
    max-height: 42vh;
    overflow-y: auto;
}

.nav-toc a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 8px;
}

.nav-toc li {
    margin-bottom: 4px;
}

@media (max-width: 640px) {
    .nav-toc {
        position: static !important;
        top: auto !important;
        max-height: none;
        overflow: visible;
    }
}

.endpoint {
    border-radius: 10px;
}

.endpoint-header {
    flex-wrap: wrap;
}

.endpoint-url {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/* Transactions and admin tables: preserve data density without clipping. */
.table-container table,
.transactions-card table {
    width: 100%;
}

@media (max-width: 768px) {
    .table-container table,
    .transactions-card table {
        min-width: 560px;
    }

    .table-container::after {
        max-width: calc(100vw - 32px);
    }
}

/* Profile/settings cross-links should not compete with primary forms. */
.profile-content > div[style*="linear-gradient"],
#contentArea > div[style*="linear-gradient"] {
    border-width: 1px !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    .profile-content > div[style*="linear-gradient"],
    #contentArea > div[style*="linear-gradient"] {
        align-items: flex-start !important;
        padding: 14px !important;
    }
}

/* Portal and widget pages that do not use the shared navbar still get safe bounds. */
.portal-container,
.portal-card,
.portal-section,
.widget-container {
    max-width: 100%;
}

/* Document branding editor: two-panel desktop layout, single safe column on mobile. */
.content-grid,
.settings-panel,
.preview-panel {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    .content-grid {
        width: 100%;
        overflow-x: clip;
    }

    .settings-panel,
    .preview-panel {
        width: 100%;
        margin-inline: 0;
        transform: none !important;
    }
}

@media (max-width: 1024px) {
    .preview-panel {
        position: static !important;
        top: auto !important;
    }
}

@media (min-width: 1025px) {
    .preview-panel {
        align-self: start;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }
}

/* ================================================================
   Responsive alignment layer
   Keeps existing visual language while making every common surface fluid.
   ================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-width: 0 !important;
}

body {
    width: 100%;
}

:where(.container,
.admin-container,
.customers-container,
.charge-container,
.products-container,
.profile-container,
.merchants-container,
.report-container,
.page-container,
.main-content,
.main-container,
.settings-container,
.bi-container,
.dashboard-container) {
    width: min(100%, 1480px);
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

:where(.page-header,
.main-header,
.header,
.card-header,
.table-header,
.section-header) {
    min-width: 0;
}

:where(.page-header,
.main-header,
.card-header,
.table-header,
.section-header,
.header-actions,
.action-buttons,
.filters-grid,
.filter-actions,
.button-group,
.form-actions) {
    flex-wrap: wrap;
}

:where(.stats-grid,
.quick-actions,
.cards-grid,
.users-grid,
.filters-grid,
.api-tools-grid,
.display-preferences-grid,
.summary-grid,
.values-grid,
.features-grid) {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

:where(.stat-card,
.quick-action-card,
.card,
.section-card,
.dashboard-card,
.product-card,
.customer-card,
.settings-section,
.modal-content) {
    min-width: 0;
    max-width: 100%;
}

:where(input,
select,
textarea,
button,
.btn,
.button,
.action-btn,
.back-btn,
.back-button,
.generate-button,
.pay-button) {
    max-width: 100%;
}

:where(.modal-overlay) {
    padding: clamp(12px, 3vw, 24px);
}

:where(.modal,
.modal-overlay,
.wizard-modal,
.info-modal,
.forecast-modal,
.dashboard-transaction-modal,
.cardcom-modal,
.loading-modal,
.share-modal-overlay) {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

:where(.modal,
.modal-overlay,
.mfa-modal,
.wizard-modal,
.info-modal,
.forecast-modal,
.dashboard-transaction-modal,
.cardcom-modal,
.share-modal-overlay,
#helpModal,
#signatureFallbackPopup,
#signatureModal,
#testMessageModal) :where(button, a, .btn, .button, .btn-ghost, .mfa-resend-link) {
    min-width: 44px !important;
    min-height: 44px !important;
}

:where(.modal,
.modal-overlay,
.mfa-modal,
.wizard-modal,
.info-modal,
.forecast-modal,
.dashboard-transaction-modal,
.cardcom-modal) :where(a, .mfa-resend-link) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.35 !important;
}

:where(#mfaModal, #forgotPasswordModal) .mfa-resend-link {
    padding: 14px 14px !important;
    border: 1px solid transparent !important;
}

:where(.modal,
.modal-overlay,
.wizard-modal,
.dashboard-transaction-modal) label:has(input[type="checkbox"], input[type="radio"]) {
    min-height: 44px !important;
    align-items: center !important;
}

#closeCardcomModal {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
}

:where(.modal-content,
.wizard-modal-content,
.info-modal-content,
.forecast-modal-content,
.cardcom-modal-content,
.share-modal,
.dashboard-transaction-modal__panel) {
    width: min(100%, 760px);
    max-width: calc(100vw - 24px) !important;
    max-height: min(calc(100vh - 32px), 920px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

#wizard-modal .modal-content,
#cfoModal > div,
#goalModal > div,
#helpModal > div,
#signatureModal > div,
#signatureFallbackPopup > div,
#testMessageModal > div {
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

:where(.table-container,
.table-wrapper,
.api-table-shell,
.clients-table,
#tableWrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

:where(.table-container,
.table-wrapper,
.api-table-shell,
.clients-table,
#tableWrap) > table,
:where(.table-container,
.table-wrapper,
.api-table-shell,
.clients-table,
#tableWrap) table {
    min-width: max-content;
}

@media (min-width: 769px) and (max-width: 1366px) {
    :where(.container,
    .admin-container,
    .customers-container,
    .charge-container,
    .products-container,
    .profile-container,
    .merchants-container,
    .report-container,
    .page-container,
    .main-content,
    .main-container,
    .settings-container,
    .bi-container,
    .dashboard-container) {
        padding-inline: clamp(16px, 2vw, 24px);
    }

    :where(.card,
    .page-section,
    .profile-section,
    .transactions-card,
    .settings-section,
    .dashboard-card) {
        padding: clamp(18px, 2vw, 24px);
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    :where(.container,
    .admin-container,
    .customers-container,
    .charge-container,
    .products-container,
    .profile-container,
    .merchants-container,
    .report-container,
    .page-container,
    .main-content,
    .main-container,
    .settings-container,
    .bi-container,
    .dashboard-container) {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: clamp(12px, 4vw, 18px) !important;
        margin-inline: 0 !important;
    }

    :where(.page-header,
    .main-header,
    .header:not(.modal-header):not(.product-select-header)) {
        padding: clamp(16px, 4.5vw, 22px) !important;
        margin-bottom: clamp(14px, 4vw, 20px) !important;
    }

    :where(.page-header h1,
    .main-header h1,
    .header h1,
    .content .title) {
        font-size: clamp(22px, 7vw, 28px) !important;
        line-height: 1.2 !important;
    }

    :where(.page-header p,
    .main-header p,
    .header p) {
        font-size: clamp(13px, 3.8vw, 15px) !important;
        line-height: 1.45 !important;
    }

    :where(.stats-grid,
    .quick-actions,
    .cards-grid,
    .users-grid,
    .filters-grid,
    .api-tools-grid,
    .display-preferences-grid,
    .summary-grid,
    .values-grid,
    .features-grid) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    :where([style*="grid-template-columns"]) {
        grid-template-columns: 1fr !important;
    }

    :where(.card,
    .page-section,
    .profile-section,
    .transactions-card,
    .settings-section,
    .dashboard-card,
    .table-container) {
        padding: clamp(14px, 4vw, 18px) !important;
        border-radius: 12px !important;
    }

    :where(.card-header,
    .table-header,
    .section-header,
    .header-actions,
    .action-buttons,
    .form-actions,
    .modal-actions) {
        align-items: stretch;
        gap: 10px;
    }

    :where(.header-actions,
    .action-buttons,
    .form-actions,
    .modal-actions) > :where(button, a, .btn, .button, .action-btn, .back-btn, .back-button) {
        min-height: 44px;
    }

    :where(.table-container,
    .table-wrapper,
    .api-table-shell,
    .clients-table,
    #tableWrap) {
        margin-inline: calc(clamp(12px, 4vw, 18px) * -1);
        padding-inline: clamp(12px, 4vw, 18px);
        border-radius: 0 !important;
    }

    :where(.table-container,
    .table-wrapper,
    .api-table-shell,
    .clients-table,
    #tableWrap) table {
        min-width: min(860px, 220vw) !important;
    }

    .table-container:has(#webhooksTable) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-container:has(#webhooksTable) #tableContent {
        min-width: max-content;
    }

    #webhooksTable {
        min-width: min(860px, 220vw) !important;
    }
}

@media (max-width: 480px) {
    :where(.modal-content,
    .wizard-modal-content,
    .info-modal-content) {
        width: 100%;
        max-width: calc(100vw - 20px) !important;
        border-radius: 14px !important;
    }

    :where(.header-actions,
    .action-buttons,
    .form-actions,
    .modal-actions) > :where(button, a, .btn, .button, .action-btn, .back-btn, .back-button) {
        width: 100%;
        flex: 1 1 100%;
    }
}