/* Office phone overrides only. Desktop positions and controls retain their styles. */
.office-page-help-icon{display:none}
.office-page-help-popup{width:min(420px,calc(100vw - 32px));max-height:80dvh;overflow:auto;box-sizing:border-box;background:#fff;color:#172a3b;border:1px solid #b9cad6;border-radius:14px;padding:18px}
.office-page-help-popup::backdrop{background:#0b162366}.office-page-help-popup header{display:flex;justify-content:space-between;align-items:center;gap:8px}.office-page-help-popup h2{color:#172a3b!important;font-size:17px;margin:0}.office-page-help-popup p{font-size:15px;line-height:1.8;white-space:pre-line}.office-page-help-popup button{font-size:12px;padding:6px 10px;min-height:34px;border-radius:7px}
@media(max-width:720px){
 html body #staffOfficeScreen .staff-office-body{position:relative}
 html body #staffOfficeScreen .office-page-help{display:none!important}
 html body #staffOfficeScreen .office-page-help-icon{display:flex!important;position:absolute!important;right:6px;top:6px;z-index:31;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;align-items:center;justify-content:center;margin:0!important;padding:0!important;border:1px solid #6c879d!important;border-radius:50%!important;background:#fff!important;color:#254964!important;font-size:17px!important;font-weight:700!important;box-shadow:0 1px 5px #19364e25}
 html body .screen:not(#homeScreen) .compact-page-header{position:sticky!important;top:0!important;z-index:40!important;padding:0!important;min-height:0!important;border-top:0!important}
 html body .screen:not(#homeScreen) .compact-page-header :is(.brand-inner,.route-header-inner){display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:5px!important;padding:6px 8px!important;margin:0!important;min-height:48px!important;width:100%!important;max-width:none!important;box-sizing:border-box!important}
 html body .screen:not(#homeScreen) .compact-page-header :is(.logo-plate,.route-logo,.eyebrow,.subtitle,.route-subtitle,.office-quick-group,.office-operator-profile,#receptionOperator){display:none!important}
 html body .screen:not(#homeScreen) .compact-page-header .top-return:not(.ux-page-actions>.top-return){display:none!important}
 html body .screen:not(#homeScreen) .compact-page-header .office-header-actions{display:none!important}
 html body .screen:not(#homeScreen) .compact-page-header .ux-page-title{flex:1 1 auto!important;min-width:0!important;grid-column:auto!important;margin:0!important}
 html body .screen:not(#homeScreen) .compact-page-header :is(h1,.title,.route-title){font-size:15px!important;line-height:1.35!important;word-break:normal!important;overflow-wrap:normal!important;margin:0!important}
 html body .screen:not(#homeScreen) .compact-page-header .ux-page-actions{display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:4px!important;margin:0!important;grid-column:auto!important;overflow:visible!important}
 html body .screen:not(#homeScreen) .compact-page-header .ux-page-actions button{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;min-width:0!important;width:auto!important;min-height:34px!important;height:34px!important;margin:0!important;padding:5px 7px!important;border-radius:7px!important;font-size:11px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;grid-column:auto!important}
 html body .screen:not(#homeScreen)>:is(.content,.staff-office-body){padding:8px!important;margin:0!important;width:100%!important;max-width:none!important;box-sizing:border-box!important}
 html body #bookingScreen .booking-workspace{margin:0!important;gap:8px!important}
 html body #bookingScreen .booking-workspace .card{margin-bottom:8px!important;padding:12px!important}
 html body.phone-booking-active>#receptionRegisterBar.reception-register-bar{bottom:max(4px,env(safe-area-inset-bottom))!important;left:6px!important;right:6px!important;padding:6px!important;box-shadow:0 2px 9px #17263a20!important}
 html body.phone-booking-active #bookingScreen{padding-bottom:100px!important}
 html body #staffOfficeScreen:has(.dg-chat) .staff-office-body{padding:0!important}
 html body #staffOfficeScreen:has(.dg-chat) :is(#staffOfficeNav,.office-page-help){display:none!important}
 html body #staffOfficeScreen:has(.dg-chat) #staffOfficeStatus:empty{display:none!important}
 html body #staffOfficeScreen:has(.dg-chat) #staffOfficeContent{padding:0!important;margin:0!important;max-width:none!important;width:100%!important}
 html body #staffOfficeContent .dg-chat{border:0!important;border-radius:0!important;margin:0!important;max-width:none!important;width:100%!important}
 html body #staffOfficeContent .dg-chat .dg-chat-booking{padding:6px 8px!important;gap:6px!important;font-size:12px!important}
 html body #staffOfficeContent .dg-chat .dg-chat-booking button{font-size:11px!important;padding:5px 7px!important;min-height:32px!important;flex-shrink:0}
 html body #staffOfficeContent .dg-chat .dg-chat-heading{position:static!important;padding:6px 40px 6px 8px!important;min-height:40px!important}
 html body #staffOfficeContent .dg-chat .dg-chat-heading h2{font-size:14px!important}
 html body #staffOfficeContent .dg-chat .dg-chat-heading button{min-height:32px!important;padding:5px 7px!important;font-size:11px!important}
 html body #staffOfficeContent .dg-chat .dg-chat-compose{padding:6px 8px max(6px,env(safe-area-inset-bottom))!important}
 html body #staffOfficeContent .dg-chat .dg-chat-booking span{font-size:12px!important;line-height:1.45!important;min-width:0}
}
@media(max-width:720px){
 /* All office pages share the available phone frame, including work-tab children. */
 html body .screen{max-width:none!important;width:100%!important;box-sizing:border-box!important;margin-left:0!important;margin-right:0!important}
 html body .screen:not(#homeScreen)>:is(.content,.staff-office-body),html body .route-shell>:is(main,.route-content){width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:4px!important;box-sizing:border-box!important;min-height:var(--ux-main-height,calc(100dvh - 52px))}
 html body #staffOfficeScreen #staffOfficeContent{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
 html body #staffOfficeStatus:empty{display:none!important}
 html body .screen:not(#homeScreen) :is(.content,#staffOfficeContent)>.card{max-width:none!important;width:100%!important;box-sizing:border-box!important;margin:0 0 6px!important;padding:10px!important}
 html body .screen:not(#homeScreen) :is(.content,#staffOfficeContent)>.card:only-child{min-height:calc(var(--ux-main-height,100dvh - 52px) - 8px)}
 html body .screen:not(#homeScreen) :is(.content,#staffOfficeContent) :is(.table-wrap,.attendance-roster-scroll,.account-detail-grid,.booking-workspace){min-width:0!important;max-width:100%!important}
 html body #bookingScreen .booking-workspace{width:100%!important;padding:0!important}
 html body .screen:not(#homeScreen) #staffOfficeContent>.attendance-roster-page{height:auto!important;min-height:calc(var(--ux-main-height,100dvh - 52px) - 8px);padding:8px!important}
}