/* ============================================================================
   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) {

  /* ========================================================================
     MOBILE-FIRST APP SCALE — the floor app should read like a native app,
     not a shrunk desktop page. Bumps the base type, headings, buttons, and
     inputs inside the content area so inherited text scales up; the floor
     screens layer their own class sizes on top (below). Desktop is untouched.
     ======================================================================== */
  #main-content { font-size: 16px; line-height: 1.5; }
  #main-content h2 { font-size: 22px; }
  #main-content h3 { font-size: 17px; }
  #main-content p  { font-size: 15px; }

  /* Buttons: real thumb targets (desktop buttons are tiny) */
  #main-content .btn {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 11px;
  }
  #main-content .btn-sm { min-height: 42px; font-size: 15px; padding: 10px 14px; }
  #main-content input,
  #main-content select,
  #main-content textarea { font-size: 16px; min-height: 46px; }

  /* ---- Driver view: bigger, app-like ------------------------------------- */
  .dv-list { padding: 4px 4px 24px; }
  .dv-title { font-size: 22px; }
  .dv-count { font-size: 15px; }
  .dv-part-invoice { font-size: 16px; }
  .dv-part-detail { font-size: 14px; }
  .dv-part-card { padding: 14px; border-radius: 12px; }
  .dv-refresh-btn { min-height: 42px; font-size: 15px; }

  /* ---- Floor cards (launcher / production chooser) ----------------------- */
  .fl-card { padding: 22px !important; border-radius: 18px !important; }

  /* ---- 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; }
}