/* Desktop layout refinements.
   EVERYTHING visual here is inside a min-width media query — the phone layout
   is untouched by design. Safe to delete this file to revert to mobile-only. */

/* The AI verdict chip is a desktop affordance only. Declared BEFORE the media
   query so the query (same specificity) wins on wide screens. */
.ai-chip { display: none; }

@media (min-width: 900px) {

  /* --- Use the screen ----------------------------------------------------- */
  .container { max-width: 1240px; padding: 28px 32px 104px; }
  .page-title { font-size: 1.9rem; }

  /* --- Stat tiles: one row, bigger, clearer ------------------------------- */
  .stat-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; }
  .stat { padding: 22px 16px 20px; gap: 6px; }
  .stat::before { height: 5px; }
  .stat-num { font-size: 2.5rem; }
  .stat-lbl { font-size: .78rem; }

  /* --- Dashboard: side-by-side work queues -------------------------------- */
  /* auto-fit so a single-role user (packer OR verifier) still fills the width */
  .dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 24px; align-items: start; }
  .dash-cols > .block { margin-bottom: 0; }
  .dash-cols > .block > h2 { position: sticky; top: 0; background: var(--bg); padding: 4px 0 8px; z-index: 1; }

  /* --- Denser list rows --------------------------------------------------- */
  .row-card { padding: 13px 16px; margin-bottom: 8px; }
  .rc-title { font-size: .98rem; }
  .rc-sub { margin-top: 2px; }
  /* marketplace.css stacks these vertically; wide rows have room for one line */
  .rc-tags { flex-direction: row; align-items: center; gap: 8px; }

  /* --- AI verdict chip (desktop only — keeps the phone list unchanged) ----- */
  .ai-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
  }
  .ai-chip-pass   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
  .ai-chip-fail   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
  .ai-chip-flags  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
  .ai-chip-error  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
  .ai-chip-none   { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }

  /* --- Filters + search on one line --------------------------------------- */
  .toolbar { gap: 14px; }
  .toolbar .filters { margin-bottom: 0; overflow-x: visible; }
  .toolbar form.form-row { margin-left: auto; }
  .sync-bar { margin-bottom: 18px; }

  /* --- Shipments list: two columns on wide screens ------------------------ */
  .ship-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .ship-list > .row-card { margin-bottom: 0; }

  /* --- Verify queue: findings on the left, photos on the right ------------
     Done purely with grid areas so the HTML (and therefore the phone view,
     where cards stay stacked in DOM order) is untouched. */
  .verify-card {
    display: grid; align-items: start; column-gap: 22px; row-gap: 0;
    grid-template-columns: minmax(340px, 420px) 1fr;
    grid-template-areas:
      "head  head"
      "info  photos"
      "ai    photos"
      "act   photos";
  }
  .verify-card > header      { grid-area: head; }
  .verify-card > .expected   { grid-area: info; }
  .verify-card > .ai-panel   { grid-area: ai; margin-top: 0; }
  .verify-card > .photo-grid,
  .verify-card > .help       { grid-area: photos; }
  .verify-card > .actions    { grid-area: act; }
  .verify-card > .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .verify-card .ai-evidence  { max-height: 260px; }

  /* Device shot and listing-label shot sit side by side on a real screen so the
     mismatch reads at a glance; the phone keeps them stacked. */
  .ai-evidence-set { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }

  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (min-width: 1300px) {
  .ship-list { grid-template-columns: 1fr 1fr; }

  /* --- Bottom nav: keep it, but don't stretch it across a 27" monitor ----- */
  .bottomnav { max-width: 1240px; left: 50%; transform: translateX(-50%); border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: var(--sh-2); }
}