/* ============================================================
   Orbita Publishing Portal – Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }

  /* orbita:ui - the close button sat on top of the logo once the drawer was
     open (Noah, 27/09/2026). It now moves out of the drawer and waits on the
     dimmed backdrop right beside it, where a thumb expects it; the drawer
     leaves room for it on narrow phones. */
  :root { --drawer-w: min(288px, calc(100vw - 66px)); }
  .sidebar {
    width: var(--drawer-w);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  .sidebar-toggle { display: flex; transition: left var(--dur) var(--ease-out); }
  .sidebar-toggle.open { left: calc(var(--drawer-w) + 12px); }

  .main-content, .admin-main { margin-left: 0; }

  .topbar, .admin-topbar { padding-left: 68px; }
  .topbar-title .crumbs { display: none; }

  .container, .page-wrapper, .container.page-wrapper, .admin-content { padding: 22px 20px 32px; }
  .app-footer, .main-content > footer { padding: 16px 20px; }
  #ann-banner { padding: 12px 20px 0; }
}

@media (max-width: 900px) {
  /* orbita:redesign - the analytics tables carry a colgroup with fixed pixel
     widths, so table-layout:fixed lets them grow past their card: measured 502
     at a 390pt viewport. The card scrolls, the table keeps its column layout.
     The two column grid on that page also stayed two columns at 390. */
  /* the page defines .an-2col in its own style block, which comes after the
     stylesheets, so an equally specific rule here would lose. */
  .an-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-content .an-2col, .admin-content .cd-2col { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; row-gap: 16px; }
  .stat-value { font-size: 1.7rem; }
  .filterbar .form-group { min-width: 100%; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  h1, .page-title { font-size: 1.4rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 18px; border-radius: var(--radius-md); }
  .stat-card { min-height: 96px; padding: 16px 18px; }
  /* The code stays: a globe alone does not say which language is on,
     and the pill was left 23 px wide with a gap meant for text. */
  .topbar-pill { padding: 0 9px; gap: 5px; font-size: 0.83rem; }
  .modal { padding: 20px; border-radius: var(--radius-lg); }
  .toast-container { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  thead th, tbody td { padding: 12px 12px; }
  .btn { padding: 0 14px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .app-footer, .main-content > footer { flex-direction: column; align-items: flex-start; }
  .app-footer--schmal { align-items: center; }
}

/* Empty-state row of a wide table. Centred across a colspan, the message sits
   in the middle of the table's min-width and ends up outside the visible part
   of the horizontal scroller on a phone. Left-aligned it starts where the
   reader looks. */
.table-empty { text-align: center; }
@media (max-width: 1180px) {
  .table-empty { text-align: left; }
}