/* Shared page spacing. Load after page/component styles. */
:root { --page-content-top: 16px; }
.main-content > .content,
body > .content,
body > .container,
body.in-iframe > .content,
body.in-iframe > .container {
  margin-top: 0;
  padding-top: var(--page-content-top);
}
@media screen and (max-width: 768px) {
  :root {
    --page-content-top: 12px;
    --mobile-page-gutter: 12px;
    --mobile-page-left: max(var(--mobile-page-gutter), env(safe-area-inset-left, 0px));
    --mobile-page-right: max(var(--mobile-page-gutter), env(safe-area-inset-right, 0px));
  }

  .main-content > .content,
  body > .content,
  body > .container {
    padding-left: var(--mobile-page-left);
    padding-right: var(--mobile-page-right);
  }

  body > .header,
  #sticky-top > .header,
  #sticky-top > .global-scan-card,
  .main-content > .topbar,
  body > .breadcrumb {
    padding-left: var(--mobile-page-left);
    padding-right: var(--mobile-page-right);
  }

  .modal > .modal-header,
  .modal > .modal-body,
  .modal > .modal-footer {
    padding-left: var(--mobile-page-left);
    padding-right: var(--mobile-page-right);
  }

  .login-card {
    max-width: calc(100% - var(--mobile-page-left) - var(--mobile-page-right));
    padding: 28px 24px;
  }
}

/* Compact pagination: keep navigation and page size together on narrow screens. */
.ord-page-position{display:none}
@media(max-width:768px){
  .ord-pager{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
  .ord-pager-info{display:block;font-size:12px;line-height:1.5;color:#596273;overflow-wrap:anywhere}
  .ord-pager-info strong{white-space:nowrap}
  .ord-pager-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;width:100%;min-width:0}
  .ord-pager-nav .ord-page-edge,.ord-pager-nav .ord-page-number{display:none}
  .ord-pager-nav .ord-page-btn{flex:0 0 44px;min-width:44px;height:44px;padding:0;font-size:24px}
  .ord-pager-nav .ord-page-position{display:block;flex:1;min-width:0;text-align:center;font-size:12px;font-weight:600;color:#374151;font-variant-numeric:tabular-nums}
  .ord-pager-nav select.ord-control{flex:0 0 92px;width:92px;min-width:0;height:44px;margin-left:2px;padding:0 6px;font-size:12px}
}

/* Use an anchored listbox instead of the mobile OS select dialog. */
.ord-pager-nav .page-size-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100px;min-width:0;height:32px;margin-left:8px;padding:0 10px;font-size:13px;white-space:nowrap;cursor:pointer}
.page-size-trigger:focus-visible,.page-size-menu button:focus-visible{outline:2px solid #667eea;outline-offset:-2px}
.page-size-menu{position:fixed;z-index:180;width:144px;padding:4px;background:#fff;border:1px solid #dfe3ed;border-radius:10px;box-shadow:0 8px 28px #18234026;overflow-y:auto;overscroll-behavior:contain}
.page-size-menu button{display:block;width:100%;height:44px;padding:0 12px;border:0;border-radius:6px;background:#fff;color:#374151;text-align:left;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}
.page-size-menu button:hover{background:#f3f4ff}
.page-size-menu button[aria-selected=true]{background:#eef0ff;color:#414eb5;font-weight:700}
.page-size-menu button[aria-selected=true]::after{content:'✓';float:right}
@media(max-width:768px){.ord-pager-nav .page-size-trigger{flex:0 0 92px;width:92px;height:44px;margin-left:2px;padding:0 6px;font-size:12px}}