/* Responsive / mobile overrides — loaded last so it wins over the layout sheets.
   Preserves the design language (Poppins, terracotta accent, sharp corners); only adapts layout for narrow viewports.
   Breakpoints: 820px (tablet & phone — the app shell collapses) and 480px (small phone — denser spacing). */

/* ============================ Tablet & phone ============================ */
@media (max-width: 820px) {

  /* ---- Top navigation: collapse the link row behind a hamburger ---- */
  .topnav { flex-wrap: wrap; padding: 10px 16px; }
  .topnav-brand { margin-right: 0; }

  /* The hamburger is hidden on desktop (default in shell.css); show it here and push it to the right. */
  .topnav-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 38px; height: 38px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  }
  .topnav-toggle:hover { background: var(--surface-2); color: var(--text); }

  /* The nav wraps to its own full-width row and is hidden until toggled. In-flow (not absolute) so it pushes the
     page down instead of overlaying — avoids clipping inside the sticky header. */
  .topnav-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding-top: 8px;
  }
  .topnav-nav.open { display: flex; }

  .topnav-links { flex-direction: column; gap: 2px; }
  .topnav-link { padding: 11px 12px; font-size: 15px; }

  .topnav-actions {
    flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .ws-switch { width: 100%; min-width: 0; max-width: none; }
  /* The profile control would otherwise be a small chip floating at the bottom of the stacked menu — give it the full
     width so the email reads clearly and it's an easy tap target. */
  .topnav-actions .dropdown { width: 100%; }
  .user-trigger { width: 100%; max-width: none; justify-content: space-between; }
  /* Anchor the avatar menu to the left edge in the stacked panel so it doesn't run off-screen. */
  .topnav-actions .menu { right: auto; left: 0; }

  /* ---- Page container: less chrome on small screens ---- */
  .app-page { padding: 20px 16px; gap: 18px; }
  .page-title { font-size: 22px; }

  /* ---- Wide data tables: scroll horizontally inside their card instead of stretching the page.
          display:block + overflow-x lets a <table> scroll without a wrapper element; width:100% still makes
          narrow tables fill their card. ---- */
  .kr-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ---- Pager wraps rather than overflowing ---- */
  .pager { flex-wrap: wrap; }
  .pager-controls { margin-left: 0; }

  /* ---- Two-column label/value lists stack ---- */
  .detail-list { grid-template-columns: 1fr; }
  .detail-list dt { padding: 12px 0 2px; border-bottom: none; }
  .detail-list dd { padding: 0 0 12px; }
  .detail-list dd:last-of-type { padding-bottom: 0; }
  .info-row { grid-template-columns: 1fr; gap: 2px; }

  /* ---- Modals take the full width ---- */
  .modal, .modal.modal-lg { width: 100%; max-width: 100%; }
  .modal-overlay { padding: 12px; }

  /* ---- Create-a-job wizard: the left step rail becomes a compact horizontal stepper.
          (agents.css turns it into a scrolling row at 880px; here we make it wrap and drop the sub-captions so the
          steps don't feel cramped — the current step's title/description already shows in the content header.) ---- */
  .wizard-steps { position: static; top: auto; flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible; }
  .wizard-step { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 8px 10px; }
  .wizard-step-sub { display: none; }
  .wizard-step-label { flex-direction: row; }

  /* ---- Prevent iOS Safari from auto-zooming when focusing an input (triggers under 16px). ---- */
  .input, .pager-size select, input, select, textarea { font-size: 16px; }
}

/* ============================ Small phones ============================ */
@media (max-width: 480px) {
  .app-page { padding: 16px 12px; }
  .page-head { gap: 12px; }

  /* Primary page action goes full-width and easy to tap. */
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }

  /* Toolbars / filter rows stack. */
  .tab-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-bar { gap: 10px; }
  .filter-field { min-width: 0; width: 100%; }

  /* Tabs scroll instead of wrapping into a tall block. */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
}