/* NEXUS on a big screen — 2026-10-02.
 *
 * From an iMac (~2240 CSS px wide): "so much empty space", then "do a full
 * run on everything". Every view was rendered at 2240px and measured.
 *
 * ONE BUG, MANY SCREENS. .view.active is a flex COLUMN (nexus.css), and each
 * screen's page box is a flex item centred with margin:0 auto. An
 * auto-margined flex item does not stretch — it shrinks to its content — so
 * PM Schedules drew 385px wide under an 880px cap, the Brief 450 under 720,
 * Work Orders 582, Vendors 623, Spend 548. Part 1 lets each page fill up to
 * its own cap at every width (on a phone the content already fills, so
 * nothing moves there).
 *
 * Part 2 gives each screen a real wide layout at 1400px and up. Everything
 * is scoped to its own #view so nothing leaks between screens, and this file
 * loads last so it wins over each screen's own stylesheet. Guard:
 * scripts/desktop-views-check.cjs.
 */

/* ── Part 1: a page fills its column ─────────────────────────────────── */
.view.active > :is(.nxrm-page, .nxrm-brief-page, .cal-wrap, .inv-wrap, .dlog-shell, .cleanlite, .flt-wrap) {
  width: 100%;
  box-sizing: border-box;
}

/* ── Part 2: wide layouts, 1400px and up ─────────────────────────────── */
@media (min-width: 1400px) {

  /* Work Orders, PM Schedules, Vendors, Spend: a wider page, and their
     lists become card columns instead of one 880px stack. */
  :is(#issuesView, #pmView, #vendorsView, #spendView) > .nxrm-page { max-width: 1480px; }
  :is(#issuesView, #pmView) .nxrm-list,
  #vendorsView :is(.nxrm-vendor-list, .nxrm-list) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
    align-items: start;
  }
  :is(#issuesView, #pmView, #vendorsView) :is(.nxrm-list, .nxrm-vendor-list) > :is(.nxrm-empty, .nxrm-section-title, h2, h3) { grid-column: 1 / -1; }
  :is(#issuesView, #pmView, #vendorsView, #spendView) .nxrm-search { max-width: 640px; }
  #spendView .nxrm-budget-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

  /* Daily Brief: a dashboard, not a 720px column. */
  #briefView > .nxrm-brief-page { max-width: 1240px; }
  #briefView .nxrm-budget-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  #briefView .nxrm-brief-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 10px; }

  /* Calendar: the month at a size you can read, Next 7 days beside it.
     The last row is 1fr so the tall agenda never pushes gaps into the
     month's rows. */
  #calView > .cal-wrap {
    max-width: 1480px !important;   /* views-system.css pins 600px !important */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  #calView > .cal-wrap > * { grid-column: 1; min-width: 0; }
  #calView > .cal-wrap > #calUpcoming { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }

  /* Inventory: a wider page and a two-column list. */
  #inventoryView > .inv-wrap { max-width: 1180px; }
  #inventoryView .inv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* Activity Log and Equipment ran edge to edge: lines nearly 1,900px long.
     A readable measure for the log; Equipment's location cards in columns. */
  #logView > * { width: 100%; max-width: 1180px; margin-inline: auto; box-sizing: border-box; }
  #equipmentView > * { width: 100%; max-width: 1640px; margin-inline: auto; box-sizing: border-box; }
  #equipmentView .ord-vendors { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 12px; align-items: start; }

  /* Ordering (a pane of the duties view) ran its vendor rows ~1,900px wide,
     like Equipment's locations: the same cap and the same columns. */
  #dutiesOrderingPane > * { width: 100%; max-width: 1640px; margin-inline: auto; box-sizing: border-box; }
  #dutiesOrderingPane .ord-vendors { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 12px; align-items: start; }
  /* The sort bar and any heading live inside the list: give them the row. */
  :is(#dutiesOrderingPane, #equipmentView) .ord-vendors > :not(.ord-vendor-row-wrap) { grid-column: 1 / -1; }
  /* All transactions opens full-screen; its list gets a readable width. */
  .ord-allorders-overlay .ord-allorders-body { max-width: 1180px; margin-inline: auto; width: 100%; box-sizing: border-box; }

  /* Biweekly Review: wider, and the chronic tickets in two columns. */
  #biweeklyView > .dlog-shell { max-width: 1240px; }
  #biweeklyView .bw-aged-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #biweeklyView .bw-cards-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* Fleet: the vehicle list in two columns at its existing 1180px. */
  #fleetView .flt-vehicle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}