/* Tablet viewport shell: content scrolls inside the available work area. */
@media (min-width:721px) and (max-width:1400px) {
 html:has(.screen),body:has(.screen){height:100%;overflow:hidden!important;padding:0!important}
 body .screen:not([hidden]){height:100dvh!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
 .screen>.brand,.screen>.brand-header{grid-column:1/-1!important;position:relative!important;min-height:0!important}
 .screen .brand-inner{padding:6px 10px!important;gap:6px!important;min-width:0}
 .screen .title,.screen h1{font-size:18px!important;line-height:1.25!important}
 .screen .subtitle{font-size:12px!important;margin:2px 0!important}
 .screen>.content,#staffOfficeScreen .staff-office-body{grid-column:1!important;grid-row:2!important;min-height:0!important;max-height:100%!important;height:100%!important;overflow:auto!important;overscroll-behavior:contain;margin:0!important;padding:10px!important;box-sizing:border-box!important;align-self:stretch!important;width:100%!important}
 .screen .card{padding:12px!important;margin-top:0!important;margin-bottom:10px!important;min-width:0}
 .screen h2{font-size:18px!important;margin:4px 0 10px!important}
 .screen h3{font-size:16px!important;margin:6px 0!important}
 .screen p{margin:6px 0;line-height:1.45}
 .screen button{min-height:40px;padding:7px 10px}
 .screen input,.screen select,.screen textarea{font-size:16px!important;box-sizing:border-box;max-width:100%}
 .screen .office-quick-group{min-width:0!important;overflow:hidden!important;margin-left:auto!important}
 .office-quick-actions{max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important}
 .office-quick-actions button{flex:none!important;min-height:40px!important;padding:6px 8px!important}
 #officeWorkTabs{height:100dvh!important;inset:0!important}
 .work-quick-header,.work-toolbar,.work-tabstrip{flex-shrink:0!important;padding-top:4px!important;padding-bottom:4px!important}
 .work-toolbar nav{min-width:0;overflow-x:auto}.work-toolbar button,.work-tab button{min-height:40px!important;padding:6px 9px!important;font-size:14px!important}
 .work-frames{min-height:0!important;overflow:hidden!important}
 dialog{box-sizing:border-box!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;padding:16px!important}

}

/* Tablet TOP: menu / current work / vertical schedule. */
@media (min-width:721px) and (max-width:1400px){
 body #homeScreen.screen>.content{display:grid!important;padding:8px!important;gap:8px!important;grid-template-columns:200px minmax(0,1fr) 260px!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important}
 #homeScreen .office-home-work{display:contents!important}
 #homeScreen .office-home-menu{grid-column:1!important;grid-row:1!important;min-height:0!important;height:100%!important;overflow:auto!important;display:flex!important;flex-direction:column!important;padding:8px!important;box-sizing:border-box!important}
 #homeScreen .office-home-menu .menu-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:4px!important;overflow:visible!important;flex:none!important}
 #homeScreen .office-home-menu .menu-button{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-height:48px!important;padding:5px!important;gap:2px!important;margin:0!important}
 #homeScreen .office-home-menu .menu-name{font-size:14px!important;line-height:1.25!important}
 #homeScreen .office-home-menu .menu-button>span:not(.menu-icon){min-width:0;max-width:100%}
 #homeScreen .office-home-menu .menu-description{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:11px!important;line-height:1.25!important;margin-top:2px!important;max-width:100%}
 #homeScreen .office-home-menu .menu-icon,#homeScreen .office-home-menu .menu-icon svg{width:18px!important;height:18px!important;flex:none!important}
 #homeScreen .office-home-current{grid-column:2!important;grid-row:1!important;min-height:0!important;height:100%!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;overflow:auto!important;margin:0!important;align-self:stretch!important}
 #homeScreen #officeSideRail{display:contents!important}
 body #homeScreen.screen>.content>#officeHomeNotices,body #homeScreen #officeHomeNotices,body #homeScreen #officeSideRail #officeHomeNotices,body #officeSideRail #officeHomeNotices{display:none!important}
 #homeScreen .customer-lookup{position:static!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
 body #homeScreen.screen>.content>.office-home-schedule{grid-column:3!important;grid-row:1!important;display:flex!important;flex-direction:column!important;gap:6px!important;min-height:0!important;height:100%!important;overflow:hidden!important;margin:0!important;padding:8px!important;box-sizing:border-box!important}
 #homeScreen .office-home-schedule>div:first-child{flex:none!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important}
 #homeScreen .office-home-schedule h2{font-size:16px!important}
 #homeScreen #todayReservationCount{font-size:18px!important;white-space:nowrap}
 #homeScreen .office-calendar-toolbar{flex:none!important;margin:0!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important}
 #homeScreen .office-calendar-toolbar button,#homeScreen #masterRefresh{min-height:32px!important;padding:5px 7px!important;font-size:13px!important;flex:none!important}
 #homeScreen #masterRefresh{align-self:flex-end!important;margin:0!important}
 body #homeScreen .office-home-schedule #weekBoard{min-height:0!important;flex:1!important;overflow:auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important;max-width:100%!important}
 body #homeScreen .office-home-schedule #weekBoard .week-day{width:100%!important;min-width:0!important;min-height:0!important;flex:none!important;border:0!important;border-bottom:1px solid #D7DDE4!important;padding:4px 0!important;box-sizing:border-box!important;overflow:visible!important}
 body #homeScreen .office-home-schedule #weekBoard .week-day-list{max-height:none!important;height:auto!important;flex:0 0 auto!important;overflow:visible!important}
 body #homeScreen .office-home-schedule #weekBoard h3{font-size:14px!important;margin:2px 0!important}
 #homeScreen .office-month{min-height:0!important;overflow:auto!important;flex:1!important}
 body:has(.screen:not(#homeScreen):not([hidden]))>#officeSideRail{display:none!important}
 #homeScreen.compact-counter-header .brand-inner,.screen .brand-inner{flex-wrap:wrap!important}
 #homeScreen.compact-counter-header .brand-inner>.office-quick-group,.screen .brand-inner>.office-quick-group{order:10!important;flex:0 0 100%!important;width:100%!important;max-width:none!important;margin:0!important;overflow:visible!important}
 #homeScreen.compact-counter-header .office-quick-actions,.office-quick-actions:not(.office-mobile-quick-dock){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;width:100%!important;max-width:none!important;overflow:visible!important;padding:0!important}
 #homeScreen.compact-counter-header .office-quick-actions button,.office-quick-actions:not(.office-mobile-quick-dock) button{display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:34px!important;height:34px!important;padding:4px 6px!important;font-size:12px!important;line-height:1.2!important;gap:4px!important;white-space:nowrap!important;min-width:0!important}
 .office-quick-actions .status-icon{width:20px!important;height:20px!important;min-width:20px!important;font-size:11px!important}
 .work-quick-header{flex-wrap:wrap!important}.work-quick-slot{width:100%!important;flex:1 1 100%!important;min-width:0!important}
}
@media (min-width:721px) and (max-width:1000px){
 body #homeScreen.screen>.content{grid-template-columns:150px minmax(0,1fr) 210px!important}
 #homeScreen .office-home-menu .menu-grid{grid-template-columns:1fr!important}
 #homeScreen .office-home-menu .menu-button{flex-direction:row!important;align-items:center!important;min-height:40px!important}
}



/* Tablet counters live below the menu; the work viewport keeps its existing size. */
@media (min-width:721px) and (max-width:1400px){
 body #homeScreen .brand-inner{align-items:center!important}
 body #homeScreen #accountSettingsOpen{position:static!important;inset:auto!important;transform:none!important;order:1!important;margin:0 0 0 auto!important;align-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important;width:36px!important;height:36px!important;min-height:36px!important;padding:6px!important;line-height:1!important}
 body #homeScreen #accountSettingsOpen svg{display:block;width:22px;height:22px;flex:none}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary{order:10!important;flex:0 0 auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;align-self:stretch!important;margin:12px 0 0!important;width:100%!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary>button{width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:7px!important;display:flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary>button strong,body #homeScreen .office-home-menu #staffOfficeHomeSummary>button>span{font-size:14px!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary small{display:none!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary>button>span{margin-left:auto!important}
 body #homeScreen .office-home-current{display:flex!important;flex-direction:column!important;overflow:hidden!important}
 body #homeScreen .office-home-current>[data-work]{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 body #homeScreen .office-home-current>header,body #homeScreen .office-home-current>[data-status],body #homeScreen .office-home-current>.home-work-actions,body #homeScreen .office-home-current>button{flex:none!important}
}
@media(min-width:1401px){
 body #homeScreen.compact-counter-header .brand-inner #staffOfficeHomeSummary{display:flex!important;flex-direction:column!important;flex:0 0 128px!important;gap:4px!important;margin:0 18px 0 8px!important;width:128px!important}
 body #homeScreen.compact-counter-header .brand-inner #staffOfficeHomeSummary>button{width:100%!important;min-width:0!important;height:28px!important;min-height:28px!important}
 body #homeScreen.compact-counter-header .brand-inner>.office-quick-group{margin-left:auto!important}
}
@media (min-width:721px) and (max-width:1400px){
 body #homeScreen.compact-counter-header .brand-inner #accountSettingsOpen{margin:0 0 0 auto!important;align-self:center!important}
 body #homeScreen .office-home-menu .menu-button{flex-direction:row!important;align-items:center!important;min-height:44px!important;gap:5px!important}
}
/* Equal tablet menu rows fit the existing panel, with text constrained to its own column. */
@media (min-width:721px) and (max-width:1400px){
 body #homeScreen .office-home-menu .menu-grid{flex:1 1 0!important;min-height:393px!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(12,minmax(30px,1fr))!important;gap:3px!important;width:100%!important;min-width:0!important}
 body #homeScreen .office-home-menu .menu-button{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:center!important;justify-content:stretch!important;width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important;padding:2px 6px!important;gap:6px!important;overflow:hidden!important}
 body #homeScreen .office-home-menu .menu-button>span:not(.menu-icon){display:block!important;min-width:0!important;width:100%!important;overflow:hidden!important}
 body #homeScreen .office-home-menu .menu-name{display:block!important;font-size:14px!important;line-height:16px!important;white-space:nowrap!important}
 body #homeScreen .office-home-menu .menu-description{display:block!important;max-width:100%!important;min-width:0!important;font-size:11px!important;line-height:12px!important;margin:1px 0 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 body #homeScreen .office-home-menu .menu-title{flex:none!important;margin:0 0 6px!important;font-size:16px!important;line-height:22px!important}
 body #homeScreen .office-home-menu #operatorGateStatus{flex:none!important;font-size:11px!important;line-height:14px!important;margin:0 0 4px!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary{margin-top:6px!important;gap:4px!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary>button{height:32px!important;min-height:32px!important;padding:4px!important;gap:4px!important;overflow:hidden!important}
 body #homeScreen .office-home-menu #staffOfficeHomeSummary>button>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}
/* Tablet reception: four bounded input panels, no permanent mail/receipt column. */
.tablet-booking-dialog:not([open]){display:none!important}
#tabletReceptionMethod[hidden],#tabletReceptionDetails[hidden],#tabletBookingRegisterDock[hidden]{display:none!important}
@media(min-width:721px) and (max-width:1400px){
 body #bookingScreen.tablet-booking-layout>.content{padding:6px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;gap:4px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace{display:grid!important;grid-template-columns:1.25fr 1fr 1fr 1.05fr!important;grid-template-rows:minmax(0,1fr)!important;gap:6px!important;flex:1!important;min-height:0!important;width:100%!important;overflow:hidden!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace>div:not(.right-column){min-width:0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace>.right-column{display:none!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace>div>.card{height:100%!important;box-sizing:border-box!important;min-height:0!important;overflow:auto!important;margin:0!important;padding:8px!important;overscroll-behavior:contain}
 body #bookingScreen.tablet-booking-layout .brand-inner{gap:5px!important;flex-wrap:wrap!important;padding:5px 8px!important}
 body #bookingScreen.tablet-booking-layout .brand-inner .subtitle{display:none!important}
 body #bookingScreen.tablet-booking-layout .brand-inner button{min-height:32px!important;padding:4px 7px!important;font-size:12px!important}
 body #bookingScreen.tablet-booking-layout .brand-inner .logo-plate{width:30px!important;height:30px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace h2{font-size:15px!important;line-height:1.3!important;margin:0 0 8px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace h3{font-size:13px!important;margin:6px 0!important}
 body #bookingScreen.tablet-booking-layout .fields{gap:6px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace label{font-size:12px!important;line-height:1.35!important;min-width:0!important;margin:0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace input:not([type=checkbox]):not([type=radio]),body #bookingScreen.tablet-booking-layout .booking-workspace select{height:32px!important;min-height:32px!important;padding:4px 6px!important;font-size:14px!important;width:100%!important;min-width:0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace button{min-height:30px!important;font-size:12px!important;padding:4px 6px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace p,body #bookingScreen.tablet-booking-layout .note{font-size:11px!important;line-height:1.35!important;margin:4px 0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace textarea{font-size:14px!important;min-height:64px!important;padding:6px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .option-grid{grid-template-columns:1fr!important;gap:4px!important}
 body #bookingScreen.tablet-booking-layout #receptionRegisterBar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin:0!important;width:100%!important}
 body #bookingScreen.tablet-booking-layout #receptionRegisterAmount{display:flex!important;flex-direction:column!important;gap:4px!important;font-size:16px!important}
 body #bookingScreen.tablet-booking-layout #tabletBookingRegisterDock:not([hidden]){position:fixed;right:12px;bottom:12px;z-index:60;width:300px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:12px;background:#FFFFFF;border:1px solid #5F7F9F;border-radius:10px;box-shadow:0 4px 18px #0B111A30}
 body #bookingScreen.tablet-booking-layout #manualRegisterButton{min-height:42px!important;font-size:15px!important}
 body #bookingScreen.tablet-booking-layout.tablet-register-visible .booking-workspace>div:last-of-type>.card{padding-bottom:150px!important}
 .tablet-booking-dialog[open]{display:block!important;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:#FFFFFF;color:#18202A;border:1px solid #D7DDE4;border-radius:12px;padding:16px;overflow:auto}
 .tablet-booking-dialog::backdrop{background:rgba(7,13,21,.62)}
 .tablet-booking-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
 .tablet-booking-dialog>header h2{margin:0;font-size:18px}
 .tablet-booking-dialog .card{padding:0!important;border:0!important;box-shadow:none!important}
 .tablet-booking-dialog .card>h2{display:none!important}
 .tablet-booking-dialog .tablet-method-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .tablet-method-choices button{min-height:54px!important;font-size:16px!important}
 .tablet-booking-dialog[aria-label="予約方法を選択"]>.card{display:none!important}
 .tablet-booking-dialog textarea#mailSource{height:260px!important;width:100%!important;box-sizing:border-box!important}
 body #bookingScreen.tablet-booking-layout .tablet-booking-dialog .communication-shell{display:block!important;height:auto!important;max-height:none!important}
}
@media(min-width:721px) and (max-width:1400px){
 body #bookingScreen.tablet-booking-layout .booking-workspace>div:not(.right-column){height:100%!important;max-height:100%!important;align-self:stretch!important;grid-row:1!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace>div>.card{flex:1 1 0!important;max-height:100%!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .master-checks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .master-check{padding:3px!important;min-height:28px!important;gap:4px!important;box-sizing:border-box!important;font-size:11px!important;line-height:1.2!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .master-check input{width:16px!important;height:16px!important;flex:none!important;margin:0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace h4{font-size:11px!important;line-height:1.3!important;margin:5px 0!important;padding:4px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .fields>label{gap:3px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .staff-one-block{padding:5px!important;margin:0!important}
}
@media(min-width:721px) and (max-width:1400px){
 body #bookingScreen.tablet-booking-layout .booking-workspace .categorized-requests{grid-template-columns:minmax(0,1fr)!important;gap:3px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .request-category-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .request-category{min-width:0!important;margin:0!important}
}
@media(min-width:721px) and (max-width:1100px){
 body #bookingScreen.tablet-booking-layout .fields{gap:4px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .master-check{min-height:24px!important;padding:2px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace .master-checks,body #bookingScreen.tablet-booking-layout .booking-workspace .request-category-items{gap:2px!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace h3{margin:4px 0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace h4{padding:3px!important;margin:3px 0!important}
 body #bookingScreen.tablet-booking-layout .booking-workspace textarea{min-height:50px!important;height:50px!important}
}