/* Mobile rules for the canvas editors (System Configurator + Floor Plan).
   The canvas itself keeps full editing — canvas-kit handles touch drag,
   one-finger pan and pinch zoom. This file only reflows the chrome. */

@media (max-width: 720px) {
  /* Single column: the details panel stops being a right rail */
  .cfg { grid-template-columns: 1fr; }

  /* Toolbars: swipeable strip, slightly tighter */
  .cfg .canvas-toolbar {
    height: auto; min-height: 48px;
    padding: 6px 10px;
    gap: 6px;
  }
  .cfg .canvas-toolbar .toolbar-hint { display: none; }
  .cfg .canvas-toolbar .btn { padding: 6px 10px; font-size: 12.5px; }

  /* Floor toolbar — compact mobile layout. `order` reflows the DOM into:
       row 1: location heading (grows) + small Cancel/Save in the freed space
       row 2: "Add table" (primary, fills) + small secondary "Add staff meal"
       row 3: selected-node controls (Rectangle/Circle, floor, delete)
     Save/Cancel are natural-width — no more oversized full-width pair. */
  .floor-editor .canvas-toolbar.floor-toolbar {
    padding: 8px 12px;
    gap: 8px;
    row-gap: 8px;
    align-items: center;
  }

  /* Heading shares row 1 and grows; save-actions tuck into the space beside it */
  .floor-toolbar .ft-context {
    order: 0;
    flex: 1 1 auto;
    max-width: none;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }
  .floor-toolbar .ft-title { font-size: 14px; }

  .floor-toolbar .ft-right {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 6px;
  }
  .floor-toolbar .ft-right .ft-hint,
  .floor-toolbar .ft-dirty { display: none; }
  /* Small, natural-width Save/Cancel (was a big stretched pair) */
  .cfg .floor-toolbar .ft-right .btn { flex: 0 0 auto; padding: 7px 14px; font-size: 12.5px; }

  /* Selected-node controls — own full-width row. "Add table" rides here and
     fills the gap next to the shape toggle (delete stays at the right edge).
     The "Table N" label is dropped on mobile (the selected node is highlighted
     on the canvas) to make room for the button on one line. */
  .floor-toolbar .ft-selection {
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-left: 0;
  }
  .floor-toolbar .ft-sel-label { display: none; }
  .floor-toolbar .ft-station-floor { flex: 1 1 100%; }
  .floor-toolbar .ft-station-floor select { width: 100%; }
  .cfg .floor-toolbar .ft-selection .ft-add-table { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }
  .cfg .floor-toolbar .ft-selection .ft-add-staff { flex: 0 0 auto; padding: 9px 10px; font-size: 12.5px; color: var(--text-muted); }

  /* Nothing selected — the add buttons get their own full-width row */
  .floor-toolbar .ft-addrow {
    order: 4;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cfg .floor-toolbar .ft-addrow .ft-add-table { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }
  .cfg .floor-toolbar .ft-addrow .ft-add-staff { flex: 0 0 auto; padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); }

  /* Zoom pill: keep it above the tab bar */
  .cfg .zoom-readout { bottom: 12px; right: 12px; }

  /* Connection prompt banner wraps on narrow screens */
  .connect-prompt { flex-wrap: wrap; gap: 6px; padding: 8px 10px; font-size: 12.5px; }
}

/* Configurator details panel → bottom sheet over the canvas. Matches the
   legacy 980px rule in styles.css that hides the right rail, so everywhere
   the rail is gone the sheet takes over (nothing loses edit access).
   Hidden entirely while nothing is selected (its empty state is useless on
   a phone); appears above the tab bar when a box/line is selected. */
@media (max-width: 980px) {
  .cfg .details {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    max-height: 52dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border-top: 1px solid var(--border-strong);
    border-left: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .cfg .details:has(.det-empty) { display: none; }
}