/* Phone layouts only. Desktop sizes, table options and column definitions stay unchanged. */
@media (max-width: 767.98px) {
    #incident-root, #incident-details-root { padding: 16px; overflow-x: hidden; }
    #incident-root > .actions { flex-direction: column; align-items: stretch !important; gap: 12px; }
    #incident-root .ticket-filters { width: 100%; min-width: 0; margin-left: 0 !important; flex-direction: column; align-items: stretch !important; }
    #incident-root .actions input, #incident-root .actions select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
    #incident-root .ticket-heading { flex-wrap: wrap; margin-bottom: 12px; }
    #incident-root .ticket-refresh { min-width: 0; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
    #TicketsRefreshStatus { overflow-wrap: anywhere; }
    #RefreshTicketsBtn { flex-shrink: 0; }
    #incident-root .tickets-scroll-hint { display: block !important; font-size: 12px; margin: 0 0 10px; }
    #incident-root #tableWrapped { height: 65vh !important; min-height: 360px; }
    #incident-root #TableArea { height: 100% !important; max-width: 100%; overflow: hidden !important; }
    /* The table's own holder scrolls, keeping pagination within the viewport.
       Matching header/cell minima preserve readable columns without rebuilding Tabulator. */
    #TableArea .tabulator-col, #TableArea .tabulator-cell { min-width: 150px !important; }
    #TableArea [tabulator-field="subject"] { min-width: 280px !important; }
    #TableArea .tabulator-tableholder { overflow-x: auto !important; overscroll-behavior-x: contain; }
    #TableArea .tabulator-footer { white-space: normal; }
    #TableArea .tabulator-footer .tabulator-footer-contents { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 8px; }
    #TableArea .tabulator-paginator { flex: 1 1 100%; white-space: normal; text-align: left; }
    #TableArea .tabulator-pages { display: inline-flex; flex-wrap: wrap; margin: 4px 0; }
    #TableArea .tabulator-page { margin: 3px 2px; }

    #incident-details-root .page-heading { flex-direction: column; align-items: stretch; gap: 16px; }
    #incident-details-root .head-actions { flex-wrap: wrap; }
    #incident-details-root .layout, #incident-details-root .grid-2,
    #incident-details-root .grid-3, #incident-details-root .kv,
    #incident-details-root .list li { grid-template-columns: minmax(0, 1fr); }
    #incident-details-root .layout { gap: 0; }
    #incident-details-root .layout > *, #incident-details-root .field { min-width: 0; overflow-wrap: anywhere; }
    #incident-details-root .field.full { grid-column: 1 / -1; }
    #incident-details-root .card-hd { flex-wrap: wrap; gap: 10px; }
    #incident-details-root .card-bd, #incident-details-root .card-hd { padding: 14px; }
    #incident-details-root .card-actions { flex-wrap: wrap; }
    #incident-details-root .detail-table-preview { max-height: none; overflow: visible; }
    #incident-details-root .comment-body { display: block; -webkit-line-clamp: unset; }
    #incident-details-root .table-lite, #incident-details-root .table-lite tbody,
    #incident-details-root .table-lite tr, #incident-details-root .table-lite td,
    .detail-modal-body .table-lite, .detail-modal-body .table-lite tbody,
    .detail-modal-body .table-lite tr, .detail-modal-body .table-lite td { display: block; width: 100%; min-width: 0; }
    #incident-details-root .table-lite thead, .detail-modal-body .table-lite thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #incident-details-root .table-lite tr, .detail-modal-body .table-lite tr { padding: 10px 0; border-bottom: 1px solid var(--theme-border); }
    #incident-details-root .table-lite td, .detail-modal-body .table-lite td { padding: 6px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    #incident-details-root .table-lite td::before, .detail-modal-body .table-lite td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; }
    #incident-details-root .attchmentsActions, .detail-modal-body .attchmentsActions { flex-wrap: wrap; }
    .detail-modal-body { padding: 14px; }
}