/* KeiHoReCa — shared MOBILE layer. Loaded by every surface; desktop is untouched.
   Contract (kh-roles.js mirrors these numbers):
     phone   ≤ 640px  — single column, bottom tab bar, ≥44px touch targets
     tablet  641–1024 — tab bar kept, denser content
     desktop ≥ 1025   — the existing multi-column / windowed layouts, unchanged
   Rules enforced here: nothing scrolls horizontally, no tap target under 44px,
   safe-area insets respected (iPhone notch/home-bar), inputs ≥16px (iOS refuses to
   not-zoom below that). */

/* ---- universal guards (all widths) ---- */
html, body { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* ---- bottom tab bar (phone + tablet) ---- */
.kh-tabbar { display: none; }

@media (max-width: 1024px) {
  .kh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-80, rgba(246, 241, 227, .96));
    border-top: 1px solid var(--hair, rgba(0, 0, 0, .15));
    backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
    font-family: var(--font-sans, sans-serif);
  }
  .kh-tab {
    min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 4px 2px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
    color: var(--ink-muted, #666); font: 600 10px var(--font-sans, sans-serif);
    -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s;
  }
  /* THE VENUE'S OWN CLAY SET, not emoji. Owner: «сделай клей дизайн, убери
     эмодзи!!! я же сказал в том же стиле». The bar carried 🪑🍳🎙🍽👁 while every
     other surface used the clay PNGs; each icon below was picked by LOOKING at
     the artwork rather than by its filename — clay-mgr is a top-down table plan
     (so it is «Зал»), clay-instagram is a camera, clay-ai is the sparkle the
     crew dock already uses for «Заказ». The font-size stays for the one
     remaining glyph, the «Ещё» ellipsis, which is typography and not a picture. */
  .kh-tab .kh-tab-ic { font-size: 19px; line-height: 1; display: flex; align-items: center; }
  .kh-tab .kh-tab-ic img { width: 26px; height: 26px; border-radius: 7px; display: block; }
  .kh-tab .kh-tab-lb { letter-spacing: .01em; white-space: nowrap; }
  .kh-tab.on { color: var(--ink, #1a1a1a); background: var(--paper-60, rgba(255, 255, 255, .55)); }
  .kh-tab.on .kh-tab-ic { transform: translateY(-1px); }
  /* keep page content clear of the bar */
  html.kh-has-tabbar body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* the floating ⚙ must not sit under the bar */
  html.kh-has-tabbar #khset-fab { bottom: auto; top: 10px; }
}

/* ---- phone: one column, bigger touch, no horizontal scroll ---- */
@media (max-width: 640px) {
  /* every common multi-column grid collapses */
  .mgr, .hall, .calgrid, .stats, .metrics, .grid2, .cols, .shell, .split {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  /* tables scroll INSIDE their own box, never the page */
  table, .tblwrap, .db-tbl, .scroll-x { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* touch targets — WCAG 2.2 AA target-size (minimum) */
  button, .btn, .chip, [role="button"], select, summary, .seg button, nav.views button {
    min-height: 44px;
  }
  input, select, textarea { font-size: 16px; }   /* iOS: <16px force-zooms the page */

  /* the desktop top nav is replaced by the bottom tab bar */
  html.kh-has-tabbar nav.views { display: none; }

  /* typography breathes down, not up */
  h1 { font-size: clamp(20px, 6vw, 26px); }
  h2 { font-size: clamp(17px, 5vw, 21px); }

  /* generic padding trim so cards don't eat the 375px viewport */
  .card, .panel, .box, .view { padding-left: 12px; padding-right: 12px; }
}

/* ---- landscape phone: the tab bar must not eat the short viewport ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .kh-tabbar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
  .kh-tab { min-height: 40px; }
  .kh-tab .kh-tab-lb { display: none; }
  html.kh-has-tabbar body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- role-gating, declarative: hide what this role must not see ----
   Used as: <button data-role-only="manager waiter"> ... </button> */
[data-role-only] { display: none; }
html[data-role="manager"]   [data-role-only~="manager"],
html[data-role="waiter"]    [data-role-only~="waiter"],
html[data-role="cook"]      [data-role-only~="cook"],
html[data-role="bartender"] [data-role-only~="bartender"],
html[data-role="host"]      [data-role-only~="host"],
html[data-role="guest"]     [data-role-only~="guest"],
html[data-role="public"]    [data-role-only~="public"] { display: revert; }

/* ---- reduced motion honoured globally ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}