/* Mobile rules for the menu cluster — scoped to @media (max-width: 720px) */

@media (max-width: 720px) {

  /* ================================================================
     MENU ADMIN SCREEN
     ================================================================ */

  /* --- Top panel header: tabs + count row wraps nicely --- */
  .menu-admin-panel { overflow: hidden; }

  .menu-admin-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  /* The "N items · M groups" count is low value on a phone — reclaim the row. */
  .menu-admin-head > .muted { display: none; }

  .menu-tabs { gap: 4px; flex-wrap: wrap; }

  .menu-tab {
    padding: 5px 12px;
    font-size: 13px;
    min-height: 36px;
  }

  /* --- Brand switcher: one compact row (drop the "Restaurant menu" label,
     the chips are self-explanatory) --- */
  .menu-brandbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
  }
  .menu-brandbar .mbb-label { display: none; }

  .menu-brandbar .mbb-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 4px;
    gap: 4px;
    border-radius: 10px;
    width: 100%;
  }
  .menu-brandbar .mbb-tabs::-webkit-scrollbar { display: none; }

  .menu-brandbar .mbb-tab {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
    min-height: 36px;
    white-space: nowrap;
  }

  /* --- Items tab body: stack vertically (cat rail above, grid below) --- */
  .menu-admin-body {
    flex-direction: column;
    padding: 8px 12px;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Suppress the side-by-side layout from desktop */
  .menu-admin-body .menu-cats {
    flex: 0 0 auto;
    /* Convert vertical category list to horizontal chip bar (mirror POS) */
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    /* Remove left-rail shape from desktop */
    border-right: 1px solid var(--border);
    /* Remove the desktop side-border shape */
    border-radius: 10px;
    width: 100%;
    padding: 4px;
    gap: 0;
    background: var(--surface-2);
  }
  .menu-admin-body .menu-cats::-webkit-scrollbar { display: none; }

  /* Each category button becomes a horizontal chip */
  .menu-admin-body .menu-cats .cat {
    flex: 0 0 auto;
    width: auto;
    height: 38px;
    padding: 0 12px;
    white-space: nowrap;
    border-bottom: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }

  /* Active chip: filled background, accent-coloured underline at bottom */
  .menu-admin-body .menu-cats .cat[aria-current="true"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  /* Remove the desktop left-bar active indicator */
  .menu-admin-body .menu-cats .cat[aria-current="true"]::before {
    display: none;
  }

  .menu-admin-body .menu-cats .cat .count { margin-left: 0; }

  /* Grid pane: full width column below the category chips */
  .menu-grid-pane {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 10px;
    /* restore full rounded corners on mobile */
    border: 1px solid var(--border);
  }

  /* Slim head: the section title duplicates the brand bar + active category
     chip, so drop it and keep just the New-item action, right-aligned. */
  .menu-grid-head {
    padding: 8px 10px;
    gap: 8px;
    justify-content: flex-end;
  }
  .menu-grid-head .section-h { display: none; }

  /* Item grid: single column on small phones, 2-col on wider phones */
  .menu-admin-grid {
    padding: 8px 10px 12px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  /* Item tiles: ensure duplicate button is always visible (finger tappable) */
  .menu-item-tile .mt-dup {
    opacity: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  /* Thumb slightly smaller on narrow phones */
  .mt-thumb { width: 48px; height: 48px; }
  .mt-thumb .ph-emoji { font-size: 26px; }

  /* --- Option groups tab --- */
  .menu-groups { padding: 12px; }
  .mg-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

  .group-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .group-card { padding: 12px; }

  /* --- Item editor modal (.ie-panel is already full-screen via core mobile.css)
     Refine the inner layout so rows aren't cramped --- */

  /* Head: keep thumbnail + title and close button in one line */
  .menu-admin-panel .ie-panel .ie-head {
    padding: 10px 14px;
    gap: 8px;
  }

  .menu-admin-panel .ie-panel .ie-title {
    gap: 8px;
    min-width: 0;
  }

  /* Body: single-column grid, comfortable padding */
  .menu-admin-panel .ie-panel .ie-body {
    padding: 14px;
  }

  /* Collapse the two-column grid to single column */
  .menu-admin-panel .grid-2,
  .ie-panel .grid-2 {
    grid-template-columns: 1fr;
  }

  .menu-admin-panel .grid-2 label.full,
  .ie-panel .grid-2 label.full {
    grid-column: 1;
  }

  /* Full-width inputs inside the editor */
  .ie-panel .grid-2 input,
  .ie-panel .grid-2 select,
  .ie-panel .grid-2 textarea {
    width: 100%;
  }

  /* Picture section: stack image URL + upload vertically */
  .picture-section .image-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .picture-section .image-url,
  .picture-section .image-upload {
    width: 100%;
  }

  .picture-section .image-upload label.btn {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Brand picker chips wrap and touch-target friendly */
  .menu-admin-panel .brand-pick { gap: 8px; }
  .menu-admin-panel .brand-pick .brand-chip {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Option group rows: full width, remove button to the right */
  .menu-admin-panel .og-row {
    grid-template-columns: 1fr 40px;
    gap: 6px;
  }

  /* Footer: delete+dup on top row, save on bottom on very narrow phones */
  .menu-admin-panel .ie-foot {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .menu-admin-panel .ie-foot .ie-foot-left {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .menu-admin-panel .ie-foot > .btn.primary {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }

  /* --- Group editor modal inner layout --- */
  /* The group-editor .grid-2 lives inside .ie-panel .ie-body — already handled
     by .ie-panel .grid-2 rule above. Extra stack for option row fields. */

  .opt-edit .oe-main {
    /* Already flex-wrap on desktop; on mobile give a bit more breathing room */
    gap: 6px;
  }

  /* Name field: always full row */
  .opt-edit .oe-name {
    flex: 1 1 100%;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Price / qty / checkboxes: sit on the next row */
  .opt-edit .oe-price,
  .opt-edit .oe-num,
  .opt-edit .oe-chk {
    flex: 0 0 auto;
  }

  /* Stock row: wrap on very narrow screens */
  .opt-edit .oe-stock {
    flex-wrap: wrap;
    gap: 8px;
  }

  .opt-edit .oe-stock label {
    flex: 1 1 auto;
  }

  .opt-edit .oe-stock select {
    flex: 1 1 auto;
    width: 100%;
    font-size: 16px; /* prevent iOS zoom */
    min-height: 40px;
  }


  /* ================================================================
     BULK EDITOR (spreadsheet overlay)
     ================================================================ */

  /* Overlay: no padding on phones — sheet fills the viewport */
  .bulk-overlay {
    padding: 0;
    align-items: stretch;
  }

  /* Sheet: full screen, no border-radius at bottom (safe area) */
  .bulk-sheet {
    border-radius: 0;
    border: 0;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
  }

  /* --- Header: title + actions wrap on two lines --- */
  .bulk-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .bulk-title {
    flex: 1 1 100%;
    gap: 8px;
  }

  .bulk-title h2 { font-size: 16px; margin: 0; }

  .bulk-head-actions {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Close and Save sit on the same row, stretching to fill */
  .bulk-head-actions > .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
    text-align: center;
  }

  /* Columns picker button stays compact */
  .bulk-cols { flex: 0 0 auto; }

  /* Columns popup: position to left edge on phone so it doesn't overflow */
  .bulk-cols-pop {
    right: auto;
    left: 0;
    max-width: calc(100vw - 24px);
  }

  /* --- Tools bar: wraps and scrolls horizontally --- */
  .bulk-tools {
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    align-items: stretch;
  }

  /* Remove the desktop left-border separator between btool groups */
  .bulk-tools .btool + .btool {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 8px;
  }

  /* Each tool row WRAPS on phones rather than running off-screen. The controls
     flow onto as many lines as needed and the action button drops to its own
     full-width line, so "Apply / Replace" is always visible and tappable — a
     nowrap row here pushed those buttons past the viewport, unreachable. */
  .btool {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: 6px 8px;
    align-items: center;
  }

  .btool-label {
    flex: 0 0 auto;
    font-size: 10px;
  }

  .btool select {
    flex: 0 0 auto;
    height: 36px;
    font-size: 16px; /* prevent iOS zoom */
    min-width: 80px;
  }

  .btool .btool-input {
    flex: 1 1 120px;
    min-width: 100px;
    height: 36px;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Action button on its own full-width row — an unmissable tap target. */
  .btool button.btn {
    flex: 1 1 100%;
    justify-content: center;
    white-space: nowrap;
    min-height: 40px;
  }

  /* --- Grid area: both axes scrollable, header sticky --- */
  .bulk-grid-wrap {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* ensure both axes scroll inside this container */
    position: relative;
  }

  /* Grid table: natural width (wider than viewport) — parent scrolls it */
  .bulk-grid {
    /* Don't force 100% width on mobile; let columns be their natural widths */
    width: auto;
    min-width: 100%;
  }

  /* Sticky header row stays while scrolling vertically */
  .bulk-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Cell inputs: comfortable touch height */
  .bcell {
    height: 36px;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Checkbox column: slightly wider for touch */
  .bulk-grid .bg-check { width: 44px; }
  .bulk-grid .bg-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  /* --- Footer: sticky at bottom, safe-area aware --- */
  .bulk-foot {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .bulk-foot > .btn.primary {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  /* Tip text: shorten or hide on very narrow phones */
  .bulk-foot > .muted {
    font-size: 11px;
    flex: 1 1 100%;
    order: 1;
  }

  .bulk-foot > .btn.primary { order: 0; }

}