/* Mobile rules for the people cluster — scoped to @media (max-width: 720px).
   Covers: Employees (Team + Schedule tabs), Orders History, Cook (KDS).
   Loads after styles.css + mobile.css; desktop stays pixel-identical.
   The schedule week grid keeps its exact DOM + row geometry (app.js paints
   cells from data-cal-* pixel math) — only column widths + scrolling change. */

@media (max-width: 720px) {

  /* ============================================================
     EMPLOYEES — Team tab (roster + profile)
     ============================================================ */

  .emp-subnav { padding: 6px 12px 0; }
  .emp-subtab { padding: 10px 12px; min-height: 44px; }

  /* Side-by-side roster/profile → single column stack */
  .employees {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 12px 12px 24px;
  }
  .emp-list { gap: 6px; }
  .emp-item { min-height: 56px; padding: 10px 12px; border-radius: 12px; }

  /* Profile header: name field full width, delete drops to its own row */
  .emp-editor { gap: 18px; }
  .emp-editor-head { flex-wrap: wrap; gap: 12px; }
  .emp-editor-head .emp-headfields { flex: 1 1 200px; }
  .emp-editor-head > .btn.danger { margin-left: auto; min-height: 42px; }
  .emp-name-input { width: 100%; min-width: 0; height: 44px; font-size: 17px; }
  .emp-headrow { flex-wrap: wrap; gap: 10px; }
  .emp-headrow select { height: 42px; flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .emp-active-toggle { min-height: 42px; }

  /* Contact grid: one comfy column */
  .emp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .emp-f input { height: 44px; }
  .emp-f input[type="color"] { height: 44px; }
  .emp-f.narrow { max-width: none; }

  /* Device assignments: full-width touch rows */
  .emp-devices { grid-template-columns: minmax(0, 1fr); }
  .emp-device { min-height: 48px; padding: 10px 12px; border-radius: 12px; }
  .emp-device input[type="checkbox"] { width: 18px; height: 18px; }

  /* Table picker: 48px touch cells */
  .emp-table-actions { flex-wrap: wrap; gap: 10px 14px; }
  .emp-table-grid { grid-template-columns: repeat(auto-fill, 48px); }
  .emp-table-cell { width: 48px; height: 48px; }
  .link-btn { min-height: 40px; display: inline-flex; align-items: center; }

  /* Time clock: big clock button, delete always visible (no hover on touch) */
  .clock-status { flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 12px; }
  .clock-status .cs-text { flex: 1 1 calc(100% - 24px); }
  .clock-status .btn { flex: 1 1 100%; min-height: 48px; justify-content: center; border-radius: 10px; }
  .shift-row {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-areas:
      "day  dur del"
      "span dur del";
    gap: 2px 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 6px;
  }
  .shift-row.live { border-color: var(--accent); }
  .shift-row .sr-day { grid-area: day; }
  .shift-row .sr-span { grid-area: span; }
  .shift-row .sr-dur { grid-area: dur; align-self: center; }
  .shift-row .sr-del,
  .note-item .sr-del {
    opacity: 1;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    align-self: center; justify-self: end;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: 8px;
  }
  .shift-row .sr-del { grid-area: del; }

  /* Wage & staff-meal fields */
  .wage-row { gap: 10px; }
  .wage-row .emp-f { flex: 1 1 45%; max-width: none; }
  .wage-row .emp-f select, .wage-row .emp-f input { height: 44px; }
  .wage-hint { flex: 1 1 100%; align-self: auto; }
  .staff-meal-row .disc-field { width: 100%; }
  .staff-meal-row .disc-field input { flex: 1 1 auto; width: auto; min-width: 0; }

  /* Notes & marks: stacked composer, wrapping note cards */
  .note-add { gap: 8px; }
  .note-add select { flex: 1 1 100%; height: 44px; }
  .note-add .note-text { flex: 1 1 100%; min-width: 0; height: 44px; }
  .note-add .note-amount { flex: 1 1 40%; width: auto; height: 44px; }
  .note-add .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .note-item {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-areas:
      "type amount del"
      "text text   text"
      "date date   date";
    gap: 4px 10px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .note-item .ni-type { grid-area: type; align-self: center; }
  .note-item .ni-amount { grid-area: amount; align-self: center; }
  .note-item .ni-text { grid-area: text; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .note-item .ni-date { grid-area: date; }
  .note-item .sr-del { grid-area: del; }

  /* Personal week preview: 7 columns → day rows */
  .sched-preview { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sched-day { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
  .sched-day .sd-slot { text-align: right; }

  /* ============================================================
     EMPLOYEES — Schedule tab (week calendar)
     ============================================================ */

  .schedule-cal { padding: 12px 12px 24px; gap: 12px; }
  .sched-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .sched-toolbar-actions .btn { width: 100%; min-height: 46px; justify-content: center; border-radius: 10px; }
  .sched-chip { min-height: 42px; padding: 8px 14px; }

  /* Selected-block editor: full-width time inputs + big actions */
  .cal-editor { padding: 12px; gap: 10px; border-radius: 12px; }
  .cal-editor .ce-emp { flex: 1 1 100%; }
  .cal-editor .ce-f { flex: 1 1 40%; }
  .cal-editor input[type="time"] { height: 44px; flex: 1 1 auto; min-width: 0; }
  .cal-editor .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }

  /* Week grid: same DOM, same 40px hour rows — the grid just gets wider than
     the phone and pans horizontally. Hour gutter stays pinned via sticky. */
  .cal {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    grid-template-columns: 48px repeat(7, minmax(92px, 1fr));
  }
  .cal-corner, .cal-gutter {
    position: sticky;
    left: 0;
    background: var(--surface);
  }
  .cal-corner { z-index: 9; }
  .cal-gutter { z-index: 8; }
  .cal-col { touch-action: manipulation; }

  /* Email-schedules panel */
  .sched-email { padding: 12px; }
  .see-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row dense;
    gap: 4px 10px;
    padding: 9px 10px;
  }
  .see-row > .muted {
    grid-column: 1 / -1;
    padding-left: 38px;
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  .see-row .btn.small { min-height: 40px; }

  /* ============================================================
     ORDERS HISTORY
     ============================================================ */

  .orders-history-panel .panel-heading {
    height: auto; min-height: 42px;
    padding: 8px 12px;
    flex-wrap: wrap; row-gap: 2px;
  }

  /* Filters: collapsed to [search | Filters ⌄] by default; the chip strips
     expand only while the panel carries .m-filters-open. */
  .history-filter-bar { padding: 8px 12px; gap: 8px; }
  .history-filter-bar input {
    min-width: 0;
    flex: 1 1 120px;
    height: 42px;
    border-radius: 10px;
  }
  .oh-filters-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 42px; padding: 0 14px; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font-size: 13px; font-weight: 600;
  }
  .oh-filters-toggle .cnt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-bg); color: var(--accent-700);
    font-size: 11.5px;
  }
  .oh-filters-toggle .chev { transition: transform 150ms ease; }
  .m-filters-open .oh-filters-toggle { border-color: var(--accent); }
  .m-filters-open .oh-filters-toggle .chev { transform: rotate(180deg); }
  .history-filter-bar > div,
  .history-filter-bar .history-clear-button { display: none; }
  .m-filters-open .history-filter-bar .history-clear-button {
    display: inline-flex; height: 38px; padding: 0 14px; border-radius: 10px; flex: 0 0 auto;
  }
  .m-filters-open .history-filter-bar > div {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .history-filter-bar > div::-webkit-scrollbar { display: none; }
  .history-filter-bar > div > button {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* The list IS the screen: one full-height scroll. The detail pane is not
     in the flow — it opens as a full-screen sheet (below). */
  .orders-history-layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .history-list {
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 0;
    padding: 10px 12px 16px;
  }

  /* Order rows become cards */
  .history-row {
    min-height: 60px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 8px;
  }
  .history-row > span:nth-child(2) { text-align: right; }
  .history-row em { justify-self: start; }
  .history-row.active { border-color: var(--accent); }
  .history-row:hover { background: var(--surface); }

  /* Grouped checks: one rounded card containing its rounds */
  .history-bill {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .history-bill.active { border-color: var(--accent); }
  .history-bill .history-bill-head { padding: 10px 12px; min-height: 48px; }
  .history-bill .history-bill-members { padding: 8px 8px 2px 10px; }
  .history-bill .history-bill-members .history-row { margin-bottom: 6px; }

  /* Detail: hidden until an order is tapped, then a full-screen sheet
     (its own "second screen") above the tab bar, closed via the ✕. */
  .order-history-detail { display: none; }
  .m-detail-open .order-history-detail {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 230;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
    animation: ohdIn 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  @keyframes ohdIn { from { transform: translateY(6%); opacity: 0.5; } to { transform: none; opacity: 1; } }
  .ohd-close {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); color: var(--text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .m-detail-open .history-detail-head { padding-right: 52px; }
  .history-detail-head { flex-wrap: wrap; gap: 10px 12px; padding: 12px; border-radius: 12px; }
  .history-detail-head .hd-client { order: 4; flex: 1 1 100%; max-width: none; min-width: 0; }
  .history-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .history-meta-grid div { padding: 10px 12px; }
  .history-client-row { flex-wrap: wrap; }
  .history-client-row select { flex: 1 1 100%; height: 44px; }
  .history-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-action-row button { height: 48px; border-radius: 10px; }
  .history-line { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px; border-radius: 12px; }
  .history-line img { width: 56px; height: 56px; }
  .history-total-row { border-radius: 12px; }
  .history-check-banner { flex-wrap: wrap; gap: 6px 10px; border-radius: 12px; }
  .check-round { border-radius: 12px; }
  .check-round .check-round-head { flex-wrap: wrap; gap: 4px 10px; min-height: 44px; }
  .check-round .check-round-head .cr-open { min-height: 36px; display: inline-flex; align-items: center; }

  /* ============================================================
     COOK — kitchen display
     ============================================================ */

  /* Filters: one swipeable strip of big chips. The column toggle is hidden —
     phones always render a single column (cook.js forces cols=1 ≤720px). */
  .cook .filters {
    height: auto;
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .cook .filters::-webkit-scrollbar { display: none; }
  .cook .filters .group { flex: 0 0 auto; padding-right: 10px; }
  .cook .chip { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; flex: 0 0 auto; white-space: nowrap; }
  .cook .filters { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .cook .filters .count-readout { font-size: 12px; }
  .cook .filters .spacer { display: none; }
  .cook .filters .count-readout { flex: 0 0 auto; padding-right: 4px; }
  .cook .view-toggle { display: none; }

  /* Board: single full-width column of tickets */
  .cook .board { flex-direction: column; padding: 10px 10px 16px; gap: 12px; }
  .cook .board .col { width: 100%; gap: 12px; }
  .order-card { border-radius: 12px; }
  .order-card .head { padding: 10px 12px 8px; }
  .order-card .head .timer { font-size: 22px; }

  /* Ticket lines: photo + text on top, full-width advance button below */
  .item-row { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; padding: 12px; }
  .item-row .ico { width: 56px; height: 56px; }
  .item-row .status,
  .cook .board[data-cols="1"] .item-row .status {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    font-size: 11px;
    border-radius: 10px;
  }

  /* Whole-ticket status row: ≥52px targets for messy hands */
  .order-card .foot button { height: 52px; font-size: 12px; }

  .pending-banner { padding: 10px 14px; }
  .pending-banner .undo { height: 40px; padding: 0 16px; }

  /* Expanded ticket → full-screen sheet; the item list keeps its own scroll
     (data-cook-detail-items untouched — app.js restores its scrollTop) */
  .cook-detail-scrim { padding: 0; align-items: stretch; justify-content: stretch; }
  .cook-detail {
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .cook-detail .det-head {
    padding: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .cook-detail .det-head .id-row { flex-wrap: wrap; gap: 4px 10px; }
  .cook-detail .det-head .id { font-size: 18px; }
  .cook-detail .det-head .brand { font-size: 15px; }
  .cook-detail .det-head .meta { flex-wrap: wrap; gap: 6px 12px; }
  .cook-detail .det-head .timer { font-size: 26px; }
  .cook-detail .det-head .close { width: 44px; height: 44px; border-radius: 10px; }
  .cook-detail .det-items { padding: 12px; gap: 10px; }
  .cook-detail .scroll-hint { right: 0; }

  .detail-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
    padding: 10px;
    border-radius: 12px;
  }
  .detail-item .photo { width: 64px; height: 64px; }
  .detail-item .photo::after { display: none; }
  .detail-item .name { font-size: 16px; }
  .detail-item .actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .detail-item .actions .big-status { height: 48px; border-radius: 10px; }

  .cook-detail .det-foot {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .cook-detail .det-foot .lbl { padding-right: 0; flex: 1 1 100%; align-self: auto; }
  .cook-detail .det-foot .order-status { flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cook-detail .det-foot .order-status button { height: 50px; border-radius: 10px; }
}