/* web.css — the phone layout for the web version.
 *
 * Loaded after style.css and only ever adds to it. Nothing here changes how
 * the app looks on a wide screen: at desktop widths this file does nothing at
 * all, so the website and the installed program look identical side by side.
 *
 * The one structural change on a phone: the sidebar becomes a drawer, opened
 * from a bar across the top, and the main column takes the whole width.
 */

/* The top bar and the drawer backdrop exist at every width but only show on
   a phone. The bridge injects them; render() never touches them. */
.web-topbar { display: none; }
.web-drawer-backdrop { display: none; }

/* Mouse-free browsers: tap targets need room. */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-item, .row-item, .tab, .profile-menu-action { min-height: 40px; }
  .form-input, .form-select, .form-textarea, .gate-input { font-size: 16px; } /* iOS zooms into anything smaller */
}

@media (max-width: 800px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr;
    height: 100dvh;
    width: 100%;
  }

  .web-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .web-topbar .web-menu-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    color: var(--text); cursor: pointer;
  }
  .web-topbar .web-menu-btn svg { width: 20px; height: 20px; }
  .web-topbar .web-topbar-title {
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .web-topbar .web-topbar-logo { height: 26px; width: auto; }

  /* The sidebar slides in from the left over the page. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 86vw);
    z-index: 80;
    transform: translateX(-104%);
    transition: transform 180ms ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body.web-nav-open .sidebar { transform: translateX(0); }
  .web-drawer-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(4, 6, 9, 0.55);
  }
  body.web-nav-open .web-drawer-backdrop { display: block; }

  .main {
    padding: 16px 14px 80px 14px;
    overflow-x: hidden;
  }

  .page-header { flex-direction: column; gap: 12px; }
  .page-header > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
  .page-title { font-size: 22px; }

  /* Two-column forms become one column; a two-column span is just a column. */
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: auto; }

  .stat-grid { grid-template-columns: 1fr 1fr; }

  .toolbar { flex-wrap: wrap; gap: 8px; }
  .tab-group { flex-wrap: wrap; }

  .modal-root { align-items: flex-end; }
  .modal-shell {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }

  /* Anything wide scrolls inside itself; the page never scrolls sideways. */
  .card { overflow-x: auto; }
  table { max-width: 100%; }
  .parts-table, .invoice-table, .quote-table { display: block; overflow-x: auto; white-space: nowrap; }

  .invoice-sheet { padding: 16px; }
  .invoice-pay { flex-direction: column; align-items: flex-start; }

  .row-item { flex-wrap: wrap; }

  /* The full-screen QR should fill a phone edge to edge. */
  .qr-fullscreen { padding: 16px; gap: 12px; }
  .qr-fullscreen svg { width: min(80vw, 60vh); }
  .qr-fullscreen-amount { font-size: 28px; }
}

/* Very small phones. */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Printing from the web version: the sheet, nothing else — same rule as the
   desktop, plus the bar and drawer. */
@media print {
  .web-topbar, .web-drawer-backdrop, .sidebar { display: none !important; }
  #app { display: block; height: auto; }
}