/* Mobile layer for CNC Brain — loaded after app.css, overriding nothing above
   860px so the desk layout is exactly upstream's.

   The desktop design is a Qt window: a fixed 176px rail, a table sized to the
   pixel, and a 42vw inspector beside it. None of those survive a phone, so on
   a narrow screen three things change shape:

     rail    -> a drawer behind the header's ☰, over a scrim
     panel   -> a bottom sheet, because a row's detail is a second view on a
                phone rather than something you read beside the table
     table   -> scrolls sideways inside #content, with the first column pinned
                so a row stays identifiable while you scan across it

   Everything else is touch sizing: 44px targets, 16px inputs (any smaller and
   iOS zooms the page on focus), and safe-area padding for the home indicator. */

/* The toggle and the sheet's close button do not exist on the desk. */
#nav-toggle, #panel-close, #scrim { display: none; }

@media (max-width: 860px) {
  :root {
    --rail-w: 232px;
    --header-h: 52px;
    --kpi-h: auto;
    /* Rows a finger can hit. The desk values are 26-38px. */
    --row-h: 44px; --row-h-inventory: 44px; --row-h-deadlines: 48px;
    --row-h-endmills: 48px; --row-h-workers: 44px;
    --fs-body: 14px; --fs-meta: 13px; --fs-label: 12px;
  }

  /* 100vh is the *large* viewport on mobile: the browser chrome overlaps it and
     the footer sits under the URL bar. dvh tracks the visible box instead. */
  #app { height: 100dvh; }

  /* ── rail as a drawer ─────────────────────────────────────────────────── */
  /* app.css has its own narrow rule at 720px that shrinks the rail to a 52px
     icon strip and hides every label. That is a tablet answer: on a phone the
     strip still eats width and the icons alone are a guessing game. So the
     width is restored here (same specificity, later sheet) and the labels come
     back — the rail is off-canvas anyway until the ☰ opens it. */
  #rail {
    width: var(--rail-w);
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.nav-open #rail { transform: translateX(0); }
  .rail-item .label, .rail-brand span, .sync-line span { display: inline; }
  .rail-item { justify-content: flex-start; }
  .rail-item .count { display: inline; }
  #scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  body.nav-open #scrim { opacity: 1; pointer-events: auto; }
  .rail-item { height: 44px; font-size: 15px; }
  .rail-item .icon { width: 18px; height: 18px; }
  .rail-foot { gap: 10px; }
  .login-btn, .sync-btn { min-height: 44px; }

  #nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; margin-left: -8px; padding: 0 10px;
    background: none; border: 0; cursor: pointer; flex: none;
  }
  #nav-toggle span {
    display: block; height: 1.5px; background: var(--text-2); border-radius: 1px;
  }

  /* ── header ───────────────────────────────────────────────────────────── */
  #header { padding-right: 10px; gap: 8px; }
  #screen-title { font-size: 17px; }
  /* The search field and segmented control wrap under the title rather than
     squeezing it; the header grows to fit them. */
  #main { height: 100%; }
  #header { height: auto; min-height: var(--header-h); flex-wrap: wrap;
            padding-top: 6px; padding-bottom: 6px; }
  .header-tools { margin-left: auto; flex-wrap: wrap; gap: 6px; }
  .field { height: 40px; flex: 1 1 150px; }
  .field input { width: 100%; font-size: 16px; }
  .field kbd { display: none; }          /* no Ctrl-K on a phone */
  .seg button { min-height: 36px; padding: 0 12px; }

  /* ── KPI strip: a horizontal shelf rather than a squeezed row ─────────── */
  #kpis {
    height: auto; gap: 18px; padding: 10px 12px;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  #kpis::-webkit-scrollbar { display: none; }
  .kpi { min-width: 88px; flex: none; scroll-snap-align: start; }
  .kpi .k-value { font-size: 20px; }
  .mix { display: none; }                /* the priority bar needs width it has not got */

  /* ── content: the table scrolls sideways, first column pinned ─────────── */
  #body { position: relative; }
  #content { -webkit-overflow-scrolling: touch; }
  table.grid { table-layout: auto; min-width: 100%; }
  table.grid th, table.grid td { white-space: nowrap; }
  table.grid th:first-child, table.grid td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg); box-shadow: 1px 0 0 var(--row-rule);
  }
  table.grid thead th:first-child { z-index: 3; background: var(--header-sticky); }
  /* Dragging a column header is a desk gesture and fights the scroll. */
  table.grid th { -webkit-user-drag: none; }

  /* ── panel as a bottom sheet ──────────────────────────────────────────── */
  /* app.css drops the inspector altogether below 1100px so it cannot crush the
     table. On a phone that loses the only view of a project's files, so it
     comes back as a sheet instead. `data-available` is set by initMobile from
     the screen's own showPanel call, so a screen that has no inspector still
     has none — and `showPanel(false)` writes an inline display:none, which
     beats this either way. */
  #panel[data-available="yes"] { display: flex; }
  #panel {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    width: auto !important; max-height: 82dvh;
    border-left: 0; border-top: 1px solid var(--hairline-strong);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .55);
    transform: translateY(100%); transition: transform .2s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.panel-open #panel { transform: translateY(0); }
  /* The grip becomes the sheet's handle: a bar to look at, not a resizer. */
  #panel-grip {
    position: static; width: 36px; height: 4px; margin: 8px auto 2px;
    border-radius: 2px; background: var(--hairline-strong); cursor: default;
  }
  #panel-grip:hover, #panel-grip.dragging { background: var(--hairline-strong); }
  #panel-close {
    display: block; position: absolute; top: 6px; right: 8px;
    width: 40px; height: 40px; font-size: 24px; line-height: 1;
    background: none; border: 0; color: var(--muted); cursor: pointer;
  }
  #panel-body { overflow-y: auto; }
  .panel-foot { flex-wrap: wrap; gap: 8px; }
  .panel-foot .btn { min-height: 40px; }

  /* ── footer ───────────────────────────────────────────────────────────── */
  #footer {
    flex-wrap: wrap; gap: 2px 10px; height: auto; padding: 7px 12px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
    font-size: 11px; line-height: 1.35;
  }

  /* ── touch sizing for the controls that remain ────────────────────────── */
  .stepper-edit button { min-width: 40px; min-height: 40px; font-size: 17px; }
  .modal-card { width: calc(100vw - 24px); max-width: none; }
  .modal-card .input-text { font-size: 16px; min-height: 42px; }
  .modal-foot .btn { min-height: 44px; }
  .menu-item { min-height: 40px; }
}

/* A phone in landscape is short, not narrow: keep the drawer, drop the sheet
   to something that does not cover the whole screen. */
@media (max-width: 860px) and (max-height: 480px) {
  #panel { max-height: 92dvh; }
  #kpis { display: none; }
}