/* The mobile search keyboard replaces the header while products remain usable. */
.service-search-keyboard-backdrop { inset:0 0 auto; display:block; padding:0; background:transparent; pointer-events:none; }
.service-search-keyboard { width:100%; max-height:48dvh; overflow-y:auto; gap:4px; padding:6px; border-radius:0 0 12px 12px; pointer-events:auto; box-shadow:0 5px 15px rgba(0,0,0,.18); }
.service-search-keyboard header { min-height:28px; }
.service-search-keyboard header>div { display:flex; align-items:center; gap:8px; min-width:0; }
.service-search-keyboard header strong { min-height:0; font-size:.82rem; }
.service-search-keyboard header small { flex:none; color:var(--muted); font-size:.64rem; }
.service-search-keyboard header>button { flex:none; width:28px; height:28px; color:var(--text); background:var(--surface-strong); }
.service-search-keyboard [data-service-search-key] { min-height:34px; background:var(--surface-strong); color:var(--text); border-color:var(--line); }
.service-search-keyboard .service-search-number-keys [data-service-search-key] { background:var(--theme-accent-soft); color:var(--text); }
.service-search-keyboard footer { grid-template-columns:minmax(0,1fr) 42px 65px 72px; gap:4px; }
.service-search-keyboard footer button { min-height:34px; padding:3px; font-size:.76rem; }
@media (max-width:760px) {
  html body.state-account.state-staff.service-search-open[data-active-view="service"] .topbar,
  html body.state-account.state-staff.service-search-open[data-active-view="service"] .service-mobile-section-tabs { display:none !important; }
  html body.state-account.state-staff.service-search-open[data-active-view="service"] .app-shell,
  html body.state-account.state-staff.service-search-open[data-active-view="service"].single-view .app-shell { inset:var(--service-keyboard-height,250px) 0 0 !important; height:calc(100dvh - var(--service-keyboard-height,250px)) !important; }
  html body.state-account.state-staff.service-search-open[data-active-view="service"] #serviceView .order-panel { padding-top:4px !important; min-height:calc(100dvh - var(--service-keyboard-height,250px)) !important; }
  html body.state-account.state-staff.service-search-open[data-active-view="service"] #serviceView #productGrid { max-height:none !important; }
  html body.state-account.state-staff.service-search-open[data-active-view="service"] #serviceView #productGrid .service-product-tools { top:0 !important; }
}

/* Desktop uses the same single active section as the phone. The section owns
   its scrolling; header, section tabs and product search stay in place. */
@media (min-width:761px) {
  body.state-account.state-staff[data-active-view="service"] .topbar { position:fixed; inset:0 0 auto; z-index:300; width:100%; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { position:fixed; inset:96px 0 0 !important; width:100%; max-width:none; height:calc(100dvh - 96px) !important; min-height:0 !important; margin:0; padding:0 !important; overflow:hidden !important; }
  body.state-account.state-staff[data-active-view="service"] .workspace,
  body.state-account.state-staff[data-active-view="service"] #serviceView.active { display:block !important; width:100%; max-width:none; height:100% !important; min-height:0 !important; margin:0; padding:0 !important; overflow:hidden !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel[data-service-section] { display:flex !important; flex-direction:column; gap:8px; width:100% !important; max-width:none; height:100% !important; min-height:0 !important; margin:0; padding:8px !important; overflow:hidden !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-mobile-section-tabs { position:static !important; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:0 0 44px; gap:6px; width:100%; height:44px; margin:0; padding:0; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button { min-width:0; border:1px solid #cbd7d1; border-radius:9px; background:#eef3f0; color:#304e43; font-weight:900; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button b { display:grid; place-items:center; border-radius:50%; background:#dbe5e0; font-size:.65rem; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button.active { background:color-mix(in srgb,var(--guest,#a9b3ae) 35%,white); border-color:var(--guest,#a9b3ae); box-shadow:inset 0 -3px 0 var(--guest,#a9b3ae); color:#10211d; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button.active b { background:var(--guest,#a9b3ae); }
  body.state-account.state-staff[data-active-view="service"] #serviceView #productGrid,
  body.state-account.state-staff[data-active-view="service"] #serviceView .cart,
  body.state-account.state-staff[data-active-view="service"] #serviceView #tableGuestStatus { display:none !important; flex:1 1 0; width:100%; min-height:0; max-height:none; margin:0; padding:0; border-radius:10px; background:color-mix(in srgb,var(--guest,#a9b3ae) 10%,#f4f6f3); overflow:hidden; }
  body.state-account.state-staff[data-active-view="service"] #serviceView [data-service-section="products"] #productGrid,
  body.state-account.state-staff[data-active-view="service"] #serviceView [data-service-section="draft"] .cart,
  body.state-account.state-staff[data-active-view="service"] #serviceView [data-service-section="history"] #tableGuestStatus { display:flex !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView :is(.service-products-accordion-heading,.mobile-cart-summary,.service-order-history-heading,.order-step-label) { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-products-accordion-content { display:flex !important; flex-direction:column; flex:1 1 0; gap:6px; width:100%; height:100%; min-height:0; max-height:none; padding:0; overflow:hidden !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-tools { position:static !important; flex:0 0 auto; width:100%; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-list { display:grid !important; flex:1 1 0; align-content:start; gap:6px; width:100%; height:auto; min-height:0; max-height:none !important; padding:0 3px 6px 0; overflow-x:hidden !important; overflow-y:auto !important; scrollbar-width:thin; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-row { display:grid !important; grid-template-columns:34px minmax(0,1fr) 96px 42px 42px !important; align-items:center; gap:6px; width:100%; min-height:52px; padding:5px 8px; border:1px solid #dce5e0; border-radius:10px; background:#fff; color:#10211d; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-row>* { min-width:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-category-name { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-number { grid-column:1; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-customize { grid-column:2; padding:0; text-align:left; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .product-card-meta { grid-column:3; margin:0; text-align:center; white-space:nowrap; font-size:.85rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView :is(.service-product-expand,.service-product-expand-spacer) { grid-column:4; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-product-add { grid-column:5; }
  body.state-account.state-staff[data-active-view="service"] #serviceView :is(.service-product-expand,.service-product-add) { width:40px; height:40px; min-height:40px; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-modifiers { display:grid !important; gap:6px; width:100%; height:auto !important; min-height:0; max-height:none !important; margin:-3px 0 2px; padding:8px !important; overflow:visible !important; border:1px solid #cbd8d2; border-radius:10px; background:#f1f7f4; color:#10211d; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-modifier-group { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:6px; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-modifier-group>span { color:#445c54; font-size:.65rem; font-weight:900; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-chip { min-height:30px; padding:4px 9px; font-size:.75rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-course-note { display:grid; grid-template-columns:160px minmax(0,1fr); gap:8px; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-course-note>label:only-child { grid-column:1 / -1; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-course-note label>span { color:#445c54; font-size:.65rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-quick-course-note :is(input,select) { min-height:34px; height:34px; padding:4px 8px; font-size:.8rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-drawer { position:static !important; inset:auto !important; display:flex; flex-direction:column; flex:1 1 0; width:100%; max-width:none; height:100%; min-height:0; max-height:none; transform:none !important; border:0; box-shadow:none; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-preview { display:grid !important; flex:1 1 0; align-content:start; gap:6px; width:100%; min-height:0; max-height:none; padding:0 3px 6px 0; overflow-y:auto !important; scrollbar-width:thin; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-line { grid-template-columns:34px minmax(0,1fr) 96px 40px 34px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-line>b { text-align:center; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-line>strong { display:grid; gap:2px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-line-details { grid-template-columns:160px minmax(0,1fr); }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-adjustment-group { grid-column:1 / -1; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-note:only-child { grid-column:1 / -1; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-adjustment-group { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:6px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-adjustment-group>div { display:flex; flex-wrap:wrap; gap:4px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-adjustment-group>span { color:#445c54; font-size:.65rem; font-weight:900; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-note { display:grid; gap:3px; color:#445c54; font-size:.75rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .mobile-cart-note input { height:34px; padding:4px 8px; border:1px solid #cbd8d2; border-radius:8px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView #tableGuestStatus { overflow-y:auto !important; scrollbar-width:thin; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .guest-status-panel { display:block; width:100%; min-height:0; height:auto; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-order-history { width:100%; padding:0; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-order-history-content { display:grid !important; gap:6px; width:100%; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .service-section-empty { display:grid; place-content:center; gap:5px; width:100%; min-height:100%; color:#53645d; text-align:center; }
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions { grid-template-columns:minmax(0,1fr) !important; justify-content:stretch; align-content:start; width:min(360px,calc(100vw - 20px)); min-width:0; overflow-y:auto; }
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions>* { grid-column:1 !important; width:100%; min-width:0; margin:0; }
}