/* Load after page styles: shared public/client mobile layout. */
:where(main, .content, .oe, .olen-container, .login-container, .signup-container) {
    overflow-wrap: anywhere;
}
:where(main, .content, .login-container, .signup-container) :where(div, section, article, aside, form, fieldset) {
    min-width: 0;
}
:where(input, select, textarea, img, video, canvas, iframe) { max-width: 100%; }

/* Twelve tracks retain eleven gaps even when every child spans the whole row. */
@media screen and (max-width: 850px) {
    .oe :is(.ph-grid, .split, .cta-grid, .timeline-row, .feature-grid, .legal-grid),
    .oe.ph-grid, .oe.split, .oe.cta-grid, .oe.feature-grid, .oe.legal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .oe :is(.ph-grid, .split, .cta-grid, .timeline-row, .feature-grid, .legal-grid) > *,
    :is(.oe.ph-grid, .oe.split, .oe.cta-grid, .oe.feature-grid, .oe.legal-grid) > * {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .oe :is(.feature-intro, .toc) { position: static; }
}

@media screen and (max-width: 768px) {
    .oe { padding-inline: clamp(1rem, 4vw, 1.5rem); }
    .ph h1 { font-size: clamp(2rem, 9vw, 3rem); }
    .oe :is(.cta-side a, .plan a), .olen-button,
    .nova-btn-primary, .nova-btn-secondary {
        max-width: 100%;
        height: auto;
        min-height: 44px;
        white-space: normal;
        text-align: center;
        padding-block: .75rem;
    }
    .amount-line input { width: 100%; min-width: 0; }
    .login-header-bar, .signup-header-bar { flex-wrap: wrap; gap: .75rem; }
    .login-header-right, .signup-header-right { flex-wrap: wrap; gap: .5rem; }
    .login-container, .signup-container { width: 100%; min-width: 0; }
    .pin-display, .pin-modal-display { gap: clamp(.25rem, 1.5vw, .65rem); }
    .pin-digit, .pin-modal-digit { min-width: 0; flex: 0 1 46px; }
    /* A 16px field avoids automatic iOS zoom while keeping pinch zoom available. */
    :is(.form-input, .form-select, .oc-input, .oc-select, .oc-textarea) { font-size: 16px; }

    .app-container, .main-content, .content { min-width: 0; width: 100%; }
    .content { padding-inline: clamp(1rem, 3vw, 1.5rem) !important; }
    .header { flex-wrap: wrap !important; gap: .65rem; }
    .header-left { flex: 1 1 120px; min-width: 0; }
    .header-actions { flex-wrap: wrap; max-width: 100%; margin-left: auto; }
    .welcome-message { flex-wrap: wrap; gap: .25rem; }
    .welcome-message h1 { white-space: normal; overflow-wrap: anywhere; }
    .header .nova-notif-dd {
        position: fixed;
        top: 72px;
        left: auto !important;
        right: 1rem !important;
        transform: none !important;
        width: min(300px, calc(100vw - 2rem));
        min-width: 0;
    }
    .sidebar { max-width: calc(100vw - 3rem); height: 100dvh; overflow-y: auto; }
    :is(.tabs, .filter-buttons, .section-header, .account-header, .rib-header,
        .form-actions, .modal-footer, .pagination, .messages-header) {
        flex-wrap: wrap;
        gap: .75rem;
    }
    .tabs { overflow: visible; }
    .tab-btn { min-width: 0; white-space: normal; flex: 1 1 120px; }
    .category-item { flex-wrap: wrap; }
    .category-info { flex-wrap: wrap; }
    .category-label { min-width: 0 !important; overflow-wrap: anywhere; }
    .category-amount, .transaction-amount, .stat-item p,
    .balance, .balance-amount, .account-iban, .beneficiary-iban,
    .info-value, .detail-value { white-space: normal; overflow-wrap: anywhere; }
    .transaction-item { flex-wrap: wrap; }
    .transaction-info { flex: 1 1 100px; min-width: 0; max-width: 100%; white-space: normal; }
    .action-label { white-space: normal; overflow: visible; }
    .modal-content {
        box-sizing: border-box;
        width: min(600px, calc(100% - 2rem));
        max-width: calc(100% - 2rem);
        margin: 1rem auto;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
    .nlm-box { max-height: calc(100dvh - 2rem); overflow-y: auto; }
    .table-wrapper, .table-wrap, .table-container { min-width: 0; max-width: 100%; overflow-x: auto; }

    /* JS adds labels from the translated column headings before enabling cards.
       Without JS the original, locally scrollable table remains accessible. */
    table.olen-mobile-table { display: block; width: 100%; min-width: 0; }
    .olen-mobile-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .olen-mobile-table > tbody, .olen-mobile-table > tfoot { display: block; width: 100%; }
    .olen-mobile-table > :is(tbody, tfoot) > tr {
        display: block;
        padding-block: .75rem;
        border-bottom: 1px solid var(--nova-border);
    }
    .olen-mobile-table > :is(tbody, tfoot) > tr > :is(td, th) {
        display: block;
        width: 100%;
        min-width: 0;
        padding: .5rem;
        border: 0;
        text-align: start;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .olen-mobile-table [data-mobile-label]:not([data-mobile-label=""])::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: .25rem;
        color: var(--nova-muted);
        font: 600 .75rem/1.5 var(--nova-font-body);
    }
    .olen-mobile-table .section-row { background: var(--nova-secondary-bg); }
}

@media screen and (max-width: 480px) {
    .content :is(.balance-stats, .info-grid, .bank-details-grid, .details-grid,
        .form-grid, .active-inv-details, .stats-grid, .filters-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .dashboard-page .account-card { padding: 1rem !important; }
    .dashboard-page .olen-payment-card { aspect-ratio: auto !important; min-height: 180px; }
    .olen-payment-card .payment-card-content { height: auto !important; gap: 1rem; }
    .olen-payment-card .payment-card-details { flex-wrap: wrap; gap: .75rem; }
    .payment-card-details > :last-child { margin-left: auto; flex-shrink: 0; }
    .payment-card-details strong { white-space: nowrap; }
    .transaction-amount { max-width: 100%; }
    .login-card { padding-inline: 1rem !important; }
}