/* ============================================================================
   mobile-floor.css — mobile / PWA responsive layer for the Allegra Floor app.

   Everything here is gated behind a narrow-viewport media query, so the desktop
   layout is completely untouched. Covers the two floor surfaces:
     - WIP Matrix (bindery / boxing): the wide table becomes a stack of job cards
       and the job panel goes full-screen with touch-friendly box-label inputs.
     - (The driver surface renders its own mobile UI in js/driver-view.js.)
   ============================================================================ */

/* Mobile hamburger — hidden on desktop, shown (and wired) only on phones. */
#floor-nav-toggle { display: none; }

@media (max-width: 820px) {

  /* ---- App-shell nav -> off-canvas drawer -------------------------------- */
  #floor-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;            /* push the rest of the header to the right */
  }
  #sidebar-container {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .28);
    max-width: 86vw;
  }
  #app-shell.floor-nav-open #sidebar-container { transform: translateX(0); }
  #sidebar-rail { display: none !important; }   /* desktop expand rail: not on phones */
  /* dim backdrop while the drawer is open (tap to close via JS) */
  #app-shell.floor-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .42);
  }

  /* ---- Safe areas: header below the notch, roomy tap targets ------------- */
  #header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    align-items: center;
    gap: 8px;
  }
  #floor-nav-toggle { width: 42px; height: 42px; flex: 0 0 auto; }
  #sidebar-container { padding-top: env(safe-area-inset-top, 0px); }
  #main-content { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ---- WIP Matrix: table -> stack of job cards ---------------------------- */
  .wip-table,
  .wip-table thead,
  .wip-table tbody,
  .wip-table tr,
  .wip-table td { display: block; width: auto; }

  .wip-table { border: none; }
  .wip-table thead { display: none; }         /* column headers make no sense stacked */

  .wip-row {
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--bg-card, var(--bg-surface, #fff));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }

  .wip-td {
    border: none !important;
    padding: 4px 0 !important;
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-size: 14px;
    line-height: 1.35;
    text-align: left !important;
  }
  .wip-td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted, #999);
    padding-top: 2px;
  }
  .wip-td > * { min-width: 0; }

  /* invoice + account read as the card's title line */
  .wip-td-inv  { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 15px; }
  .wip-td-acct { font-weight: 600; }
  .wip-td-desc { color: var(--text-secondary, #666); }

  /* ---- Job panel -> full-screen sheet ------------------------------------- */
  .wip-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .wip-panel-header { flex: 0 0 auto; }
  .wip-tabs { flex: 0 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .wip-tab  { flex: 0 0 auto; }
  .wip-panel-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Touch-friendly controls (bindery boxing) --------------------------- */
  .wip-btn { min-height: 42px; }
  .wip-gate-input,
  .wip-panel input,
  .wip-panel select {
    font-size: 16px;          /* >=16px stops iOS auto-zoom on focus */
    min-height: 44px;
  }
  .wip-gate-input { width: 100% !important; }

  /* box-label overlay (print preview) scrolls on small screens */
  #wip-label-overlay > div:last-child { padding: 12px !important; }
}