/* Keep each table and its navigation within the same card at every width. */
@media screen {
    .modern-app :is(.mizrahi-scroll,.report-scroll,.table-scroll-wrapper,
        .sl-table-wrap,.sbs-table-wrap,.br-table-scroll,.br-movement-table-wrap,
        .fc-summary-scroll,.fc-timeline-scroll,.fc-month-scroll,.fc-payment-scroll,
        [data-forecast-sites-scroll],.ss-table-scroll,.wh-table-scroll,
        .pr-table-wrap,.modern-ops-table-scroll,.app-table-scroll-fallback) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .modern-app .app-table-scroll-guide {
        min-height: 30px;
        padding: 2px 6px;
        gap: 12px;
        border-color: #dde5e2;
        border-bottom-color: #e5ebe8;
        border-radius: 12px 12px 0 0;
        background: #f7faf8;
        font-weight: 500;
        font-size: 11px;
    }

    .modern-app .app-table-scroll-guide .app-table-scroll-buttons button {
        width: 32px;
        height: 24px;
        min-width: 32px;
        border-radius: 7px;
    }

    .modern-app .app-table-scroll-position { background: #e2eae6; }
    .modern-app .app-table-scroll-position i { background: #91afa5; }
    .modern-app .app-table-scroll-guide + .app-table-scroll-region {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .modern-app .app-table-scroll-region {
        overscroll-behavior-inline: contain;
        scrollbar-color: #b5c9c1 #f5f8f6;
    }
    .modern-app .app-table-scroll-region:focus-visible {
        outline: 2px solid #78a1bb;
        outline-offset: 2px;
    }

    /* Full native dates need room for digits, separators, padding and calendar. */
    .modern-app .mizrahi-table .app-table-date-column {
        width: 150px;
        min-width: 150px;
    }
    .modern-app .mizrahi-table .app-table-date-column input[type="date"] {
        min-width: 0;
        box-sizing: border-box;
        font-variant-numeric: tabular-nums;
    }

    /* Measured offsets also cover Pagi and the unpaid ledger without checkboxes. */
    .modern-app .mizrahi-table .app-table-pin {
        position: sticky;
        right: var(--app-table-pin-offset,0px);
        z-index: 4;
        background: #fff;
    }
    .modern-app .mizrahi-table thead .app-table-pin {
        top: 0;
        z-index: 14;
        background: #f1f5f3;
        border-radius: 0;
    }
    .modern-app .mizrahi-table .app-table-pin-edge {
        box-shadow: -1px 0 #dce5e0,-9px 0 12px -12px rgba(40,48,68,.45);
    }
    .modern-app .mizrahi-table tbody tr:nth-child(even) > .app-table-pin { background: #fafcfa; }
    .modern-app .mizrahi-table tbody tr:hover > .app-table-pin { background: #f0f5f6 !important; }
    .modern-app .mizrahi-table tbody tr[data-comment-active] > .app-table-pin { background: #dbeafe !important; }
    .modern-app .mizrahi-table tbody tr.saved > .app-table-pin { background: #d1fae5 !important; }
    .modern-app .mizrahi-table tbody tr.error > .app-table-pin { background: #fee2e2 !important; }

    @media (max-width: 600px) {
        .modern-app .app-table-scroll-guide { gap: 8px; padding-inline: 8px; }
        .modern-app .app-table-scroll-position { display: none; }
        .modern-app .app-table-scroll-message { font-size: 10px; gap: 5px; }
        .modern-app .app-table-scroll-buttons { margin-inline-start: auto; }
    }
}

@media print {
    .modern-app .mizrahi-table .app-table-pin { position: static !important; box-shadow: none !important; }
}