/* Compatibility for current fields and pagination in the October 30 UI. */
:root { --surface: #fff; color-scheme: light; }

@media (min-width: 769px) {
  .app-shell > .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: #7995b5 #102a43;
  }
  .sidebar > * { flex-shrink: 0; }
  .sidebar-footer { margin-top: auto; }
}

.document-line-items { display: grid; gap: 8px; min-width: 150px; }
.document-line-item + .document-line-item { border-top: 1px solid var(--line); padding-top: 8px; }
.document-line-heading { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.document-line-heading strong { font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.document-line-heading > span { white-space: nowrap; font-size: 12px; }
.document-line-meta { display: flex; gap: 14px; color: var(--muted); font-size: 12px; margin-top: 4px; }
.document-line-meta b { font-weight: 400; }
.document-line-meta > span { white-space: normal; overflow-wrap: anywhere; }
.document-line-legacy { white-space: normal; overflow-wrap: anywhere; }
.delivery-line-meta { display: flex; gap: 10px; font-size: 12px; }
.mobile-top-row > div:first-child { flex: 1; min-width: 0; }

.mobile-list-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.mobile-list-pagination-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mobile-list-pagination-actions > label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mobile-list-pagination-actions select { padding: 7px 10px; }
.mobile-list-pagination-actions button:disabled { opacity: .4; cursor: default; }
.workflow-list-panel > .table-wrap, .mobile-document-list-scroll { max-height: min(62vh, 680px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.workflow-list-panel > .table-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
.delivery-required { color: var(--red); }
.delivery-line-error { grid-column: 1 / -1; margin: 0; color: var(--red); font-size: 12px; white-space: normal; }
.delivery-field-invalid :is(input,select,.select-like), [data-delivery-field][aria-invalid="true"] { border-color: var(--red); }

@media (max-width: 768px) {
  .document-line-meta { gap: 10px; }
  .mobile-list-pagination { align-items: flex-start; }
}