/* Beyond Investors on the phone — layered over the desktop console's own stylesheet.
 * The desktop rules assume a wide window: a nine-tab row, generous page padding, and wide
 * tables. None of that survives a 390px screen, so this narrows the frame, makes the tab
 * strip scroll horizontally with the active tab reachable, and lets wide tables scroll
 * inside their panel instead of pushing the page sideways.
 * Loaded last so it wins without touching the shared renderer markup. */

/* Desktop-only tabs, hidden in CSS rather than JS on purpose: the console reveals several
 * of these for admins after its own load finishes, which would undo a one-shot JS hide.
 * !important settles it regardless of ordering. These are hidden at EVERY width — this is a
 * property of the hosted build, not of the screen size. Each does work that only the Electron
 * main process can do: reading external sites and PDFs, Microsoft Graph mail, the ARIVE sync. */
.tab[data-view="router"],
.tab[data-view="qa"],
.tab[data-view="programs"],
.tab[data-view="feed"],
.tab[data-view="admin"],
#scanAllBtn { display: none !important; }

@media (max-width: 899px) {
  body { padding: 14px 12px 28px; }

  header { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  header h1, header h2 { font-size: 18px; line-height: 1.25; }

  /* Nine tabs never fit. Scroll them, keep them thumb-sized, and hide the scrollbar. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; }

  .panel { padding: 14px; border-radius: 14px; }

  /* Filter and form rows stack rather than squeeze. */
  .filters { display: flex; flex-direction: column; gap: 10px; }
  .filters > * { width: 100%; }

  /* Add a lender: the desktop form is a fixed two-column grid. Two things break it on a
     phone, and BOTH have to be fixed — this is what pushed the page sideways.
       1. two columns is simply too many at 390px, so collapse to one;
       2. a grid item's default min-width is auto, i.e. it refuses to shrink below its
          content. Long placeholders ("e.g. OCMBC — LendingPros is one of its affiliated
          companies") therefore forced the grid wider than the screen even at one column.
          min-width:0 is what actually lets it fit. */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > *, .fld, .chkgrid { min-width: 0; }
  .fld label { overflow-wrap: anywhere; }

  /* Checkbox grids (loan programs) wrap to whatever fits instead of a fixed track count. */
  .chkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

  /* Inputs at 16px so iOS doesn't zoom the viewport on focus, and never wider than their box. */
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .btn { padding: 10px 14px; }

  /* Wide tables scroll inside their own container — the page body must never scroll
     sideways, which is the difference between "dense" and "broken". Scoped to `table`
     wherever it appears, not just inside .panel: the lender list sits in a .card. */
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }

  /* Modal overlays: full-bleed on a phone, with room to breathe at the top. */
  #dailyOverlay { padding: 16px 10px; }
  #dailyOverlay > div { padding: 16px; }
}