:root{--app-sheet-radius:22px;--app-sheet-backdrop:rgba(15,23,42,.48);--app-sheet-mobile-top:max(8px,env(safe-area-inset-top))}
html,body,#app,main{touch-action:pan-y}

/* Shared bottom-sheet primitive. Staff details and reservation editor use the same positioning/layout. */
.sheet,.reservation-editor-backdrop{position:fixed;inset:0;background:var(--app-sheet-backdrop);display:flex;align-items:flex-end}
.sheet{z-index:160}.reservation-editor-backdrop{z-index:360}
.sheet-card,.reservation-editor{background:#fff;width:100%;max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:var(--app-sheet-radius) var(--app-sheet-radius) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}

.sheet .sheet-head{position:sticky;top:0;z-index:240;display:flex;align-items:center;gap:8px;margin-bottom:8px;background:#fff;padding:8px 0 10px}
.sheet .sheet-head h3{margin:0;font-size:18px}
.sheet .sheet-head .spacer{display:block;flex:1 1 auto;min-width:0}
.sheet .sheet-head #closeSheet{position:static;transform:none;margin-left:auto;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;background:#f3f4f6;visibility:visible;opacity:1;z-index:241}
.sheet-title-actions{display:flex;align-items:center;gap:10px;min-width:0}
.history-btn{padding:8px 12px;cursor:pointer}
#historyModalBackdrop.history-modal-backdrop{z-index:320}

@media(max-width:640px){
  .sheet,.reservation-editor-backdrop{height:100dvh;max-height:100dvh;align-items:flex-start;justify-content:flex-start;overflow:hidden;padding-top:var(--app-sheet-mobile-top)}
  .sheet-card,.reservation-editor{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:100%;max-width:100vw;height:calc(100dvh - var(--app-sheet-mobile-top));max-height:calc(100dvh - var(--app-sheet-mobile-top));margin:0;padding-left:10px;padding-right:10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:var(--app-sheet-radius) var(--app-sheet-radius) 0 0;transform:none}
  .sheet .sheet-head{min-height:66px;margin:0 -10px 10px;padding:10px 14px}
  .sheet .sheet-head h3{font-size:17px;white-space:nowrap}
  .sheet-title-actions{gap:8px}
  .history-btn{padding:7px 10px;white-space:nowrap}
}

.staff-id-field{grid-column:1/-1}