/* New preview controls only; the existing clinical palette and tiles stay intact. */
.clinic-help-button{appearance:none;width:29px;height:29px;min-width:29px;padding:0;border:1px solid #cbd5e1;border-radius:50%;background:linear-gradient(#fff,#edf2f8);box-shadow:0 3px 8px #12315b14;color:#64748b;font:700 18px/1 system-ui;display:grid;place-items:center;cursor:pointer;z-index:2}
.clinic-help-button:hover,.clinic-help-button:focus-visible{color:#173f86;border-color:#789cf4;outline:2px solid #789cf44d;outline-offset:2px}
.operatory-heading-row{position:relative;width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.panel .operatory-heading-row .room-label{width:100%;text-align:center;font-size:clamp(23px,2.1vw,30px);font-weight:500;line-height:1.15;margin:0;top:0;letter-spacing:.075em}
#operatoryHelpBtn{position:absolute;left:44px;top:4px}
/* Reclaim the desktop heading space inside the original full-size card. */
@media(min-width:1100px){
 .swipe-container .panel,.swipe-container.expanded-panel .panel{padding-top:8px}
 .panel .operatory-heading-row{min-height:29px}
 .panel #operatoryHelpBtn{top:0}
 .panel .panel-header{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:12px}
 .panel .room-selector-row{flex-wrap:wrap}
 .panel .status-info{align-self:start}
}
/* Both view uses the same header arrangement as Panel view at a smaller scale. */
@media(min-width:1100px){
 .expanded-both .panel .operatory-heading-row .room-label{font-size:clamp(20px,1.6vw,24px)}
 .expanded-both #operatoryHelpBtn{width:25px;height:25px;min-width:25px;top:2px;font-size:16px}
 .expanded-both .panel .panel-header{grid-template-columns:minmax(0,1fr) 150px;gap:10px}
 .expanded-both .panel .room-selector-row{flex-wrap:nowrap;gap:6px}
 .expanded-both .room-indicator{width:10px;height:10px;flex-basis:10px}
 .expanded-both .room-select{height:26px;font-size:13px;padding-left:8px;padding-right:26px}
 .expanded-both .settings-control-group{gap:6px}
 .expanded-both :is(.provider-locator-button,.panel-sound-button,.settings-gear){width:28px;height:28px;flex-basis:28px}
 .expanded-both .provider-person-glyph{width:16px;height:16px}
 .expanded-both .panel-sound-button svg{width:15px;height:15px}
 .expanded-both .settings-gear{font-size:15px}
 .expanded-both .clinic-panel-volume{gap:5px}
 .expanded-both .clinic-panel-volume input{width:80px;height:28px}
 .expanded-both .clinic-panel-volume output{min-width:26px;font-size:10px}
 .expanded-both .staff-room-notice{max-width:320px}
 .expanded-both .staff-room-notice .staff-flag{padding:5px 7px;font-size:10px}
 .expanded-both .panel .status-info{width:100%;min-width:0;gap:4px}
 .expanded-both .status-pill{max-width:100%;padding:5px 9px;gap:6px;font-size:clamp(12px,1vw,14px)}
 .expanded-both .status-dot{width:10px;height:10px;flex:0 0 10px}
 .expanded-both .timestamp{font-size:10px;line-height:1.35}
 .expanded-both .ack-indicator{max-width:100%;font-size:9px}
}
@media(min-width:1100px) and (max-height:850px){
 .swipe-container.expanded-panel .panel{gap:6px}
 .swipe-container.expanded-panel .grid,.swipe-container.expanded-panel .status-button-group{gap:4px}
 .swipe-container.expanded-panel .status-button-group+.status-button-group{margin-top:2px;padding-top:7px}
}
#providerShell{position:relative}
/* Fit only the Operatory Panel's contents; its outer desktop card stays put. */
@media(min-width:1100px){
 .panel.operatory-density-fit #statusGrid .btn{height:var(--operatory-fit-height);padding-block:var(--operatory-fit-padding);gap:var(--operatory-fit-gap)}
 .panel.operatory-density-fit .btn-label-main{font-size:var(--operatory-fit-main);line-height:1.35}
 .panel.operatory-density-fit .btn-label-sub{font-size:var(--operatory-fit-sub);line-height:1.35}
 .panel.operatory-density-fit .provider-button-group .btn-label-sub{font-size:var(--operatory-fit-provider-sub);line-height:1.35}
 .panel.operatory-scroll-fit{overflow-y:auto}
 .panel.operatory-scroll-fit #statusGrid{flex:none;align-content:start}
}
#providerHelpBtn{position:absolute;left:64px;top:158px}
/* Two footer rows on narrow Operatory screens: connection above view controls. */
@media(max-width:430px){
 body:has(.panel-screen) .screen{height:calc(100vh - 100px)}
}
.staff-flag{box-sizing:border-box;display:flex;align-items:center;gap:7px;width:100%;max-width:100%;margin:4px 0 0;padding:7px 9px;border:1px solid #111827;border-left:5px solid #111827;border-radius:8px;background:linear-gradient(135deg,#2b3544,#111827);color:white;font:700 11px/1.25 system-ui;text-align:left;box-shadow:0 2px 5px #11182714;grid-column:1/-1}
button.staff-flag{appearance:none;cursor:pointer;justify-content:center;font:700 11px/1.25 system-ui}
button.staff-flag:hover,button.staff-flag:focus-visible{outline:2px solid #789cf4;outline-offset:1px}
.staff-flag::before{content:'';width:7px;align-self:stretch;min-height:17px;flex:0 0 7px;background:repeating-linear-gradient(-45deg,#fff 0 3px,#4b5563 3px 6px);border-radius:2px}
.staff-flag[data-acknowledged=true]{background:#eef1f5;color:#334155;border-color:#8492a6}
.staff-flag[data-acknowledged=true]::before{background:#65778e}
.staff-flag-copy{min-width:0;flex:1;overflow-wrap:anywhere}
.staff-flag-remove{appearance:none;align-self:stretch;border:0;border-radius:5px;padding:0 6px;background:#ffffff24;color:inherit;cursor:pointer;font:600 17px/1 system-ui}
.staff-flag-remove:hover,.staff-flag-remove:focus-visible{background:#ffffff44;outline:2px solid #94a3b8}
.staff-room-notice{max-width:390px;margin-top:5px}
.staff-room-notice[hidden]{display:none}
.map-tile-content .staff-flag{font-size:clamp(9px,var(--provider-card-status-size,11px),11px);padding:5px 7px;margin-top:2px;flex-shrink:0}
.map-tile-content:has(.staff-flag){gap:2px}

.staff-flag-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 28px));padding:25px;border:1px solid #d8e1ed;border-radius:22px;color:#263349;background:white;box-shadow:0 20px 80px #17274440;font:14px/1.5 system-ui}
.staff-flag-dialog::backdrop,.clinic-help-dialog::backdrop{background:#14213880;backdrop-filter:blur(3px)}
.staff-flag-dialog h2{margin:0 0 9px;font-size:21px;color:#172033;line-height:1.2}
.staff-flag-dialog p{margin:0 0 20px;color:#617186}
.staff-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.staff-dialog-actions button{font:700 12px system-ui;border:1px solid #d7dfeb;border-radius:30px;padding:11px 16px;background:#f3f6fa;color:#34465e;cursor:pointer}
.staff-dialog-actions button.primary{background:#243244;border-color:#243244;color:#fff}
.staff-dialog-actions button:focus-visible{outline:2px solid #4b8bd2;outline-offset:2px}
.clinic-help-dialog{box-sizing:border-box;width:min(1080px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;border:1px solid #d7e1eb;border-radius:22px;overflow:hidden;background:white;box-shadow:0 24px 100px #10233a66}
.clinic-help-dialog[open]{display:flex;flex-direction:column}
.clinic-help-dialog iframe{display:block;border:0;width:100%;flex:1;min-height:0;background:#f7f9fc}
.help-close{flex:0 0 auto;align-self:flex-start;margin:12px 18px;padding:9px 14px;border:1px solid #cfdce8;border-radius:30px;background:#fff;color:#284e78;font:700 12px system-ui;cursor:pointer}
@media(max-width:600px){.staff-flag{font-size:10px;padding:5px 7px}.clinic-help-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:16px}.help-close{margin:8px 12px}}
@media(max-width:600px){
 body:has(#providerShell){padding-bottom:58px}

}
/* Both halls stay visible; room height comes from the viewport, never its alert state. */
.dashboard .map{overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;box-sizing:border-box;padding:3px 4px 12px}
.dashboard .column{height:100%;min-height:0}
.dashboard .dashboard-room-list{flex:1;min-height:0;gap:7px}
.dashboard .dashboard-room-list>.room{box-sizing:border-box;display:block;flex:1 1 0%;height:auto;min-height:0;max-height:none;padding:0;overflow:hidden;container-type:size}
.dashboard .room>.room-content{position:absolute;top:6%;left:8px;right:36%;min-width:0;height:53%;transform:none;display:flex;justify-content:flex-start;gap:0;overflow:hidden}
.dashboard .room .room-name{font-size:clamp(10px,13cqh,15px);line-height:1.12;white-space:nowrap;display:block;text-overflow:ellipsis}
.dashboard .room .room-status{font-size:clamp(8px,10cqh,12px);line-height:1.13;white-space:normal;opacity:.9}
.dashboard .room .room-updated{font-size:clamp(7px,8cqh,10px);line-height:1.1;margin-top:2px}
.dashboard .room>.room-meta{position:absolute;top:30%;right:8px;display:flex;flex-direction:column;gap:2px;align-items:flex-end;max-width:35%;height:auto;min-height:0;transform:none}
.dashboard .room .room-time{font-size:clamp(10px,12cqh,14px);line-height:1.1;order:-1}
.dashboard .room .wait-badge{font-size:clamp(6px,6.5cqh,8px);padding:1px 3px}
.dashboard .room>.room-ack-list{position:absolute;left:7px;right:7px;width:calc(100% - 14px);max-width:none;justify-self:stretch;grid-column:auto;grid-row:auto;bottom:calc(clamp(22px,26cqh,28px) + 7px);height:clamp(12px,16cqh,23px);max-height:none;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;gap:3px;margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:clamp(7px,8cqh,10px);line-height:1.1;box-sizing:border-box;overflow:hidden;transform:none}
.dashboard-room-heading{display:flex;align-items:center;gap:5px;min-width:0;min-height:clamp(16px,20cqh,22px)}
.dashboard .dashboard-room-heading .room-name{flex:0 1 auto;min-width:0}
#dashboardMap .dashboard-room-heading>.provider-presence-stack{position:static;transform:none;display:flex;align-items:center;gap:3px;flex:0 0 auto}
#dashboardMap .dashboard-room-heading .provider-presence-badge{width:clamp(14px,17cqh,18px);height:clamp(14px,17cqh,18px)}
.acknowledgement-person{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex:0 1 auto;min-width:0;box-sizing:border-box;padding:1px 4px;border-radius:7px;border:1px solid #16a34a38;background:#ffffffcf;color:#166534;font-weight:700;white-space:nowrap}
.acknowledgement-full-name,.acknowledgement-short-name{min-width:0}
.acknowledgement-short-name{display:none}
.dashboard .room>.staff-flag{position:absolute;left:7px;right:7px;bottom:4px;width:auto;height:clamp(22px,26cqh,28px);margin:0;padding:2px 4px;font-size:clamp(8px,8cqh,11px);line-height:1.05;gap:4px;grid-column:auto;grid-row:auto;box-shadow:none}
.dashboard .room>.staff-flag::before{min-height:12px;width:4px;flex-basis:4px}
@container(max-width:260px){
 .acknowledgement-full-name{display:none}
 .acknowledgement-short-name{display:inline}
 .acknowledgement-person{padding:1px 2px;gap:1px}
}
/* Fixed rows separate the room/location, status, acknowledgements, and staff instruction. */
body:is(.provider-card-fit-layout,.provider-map-fit-layout) .column{min-height:calc(var(--provider-room-capacity,5) * 106px + 22px)}
#providerShell .clinic-room-card{height:96px!important;min-height:96px!important;max-height:96px!important;padding:5px 8px!important;gap:0;justify-content:flex-start;container-type:inline-size;box-sizing:border-box;overflow:hidden}
#providerShell .clinic-room-card .card-content{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:21px 18px 17px 24px;grid-template-areas:"room time" "status status" "acknowledgement acknowledgement" "flag flag";gap:2px 6px!important;align-content:start;align-items:start}
#providerShell .clinic-room-card .roomline{grid-area:room;min-width:0;padding-right:0!important;height:21px;gap:6px}
#providerShell .clinic-room-card .room{font-size:18px!important;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
#providerShell .clinic-room-card .roomline>.provider-presence-stack{position:static;display:flex;align-items:center;gap:2px;transform:none;flex:0 0 auto}
#providerShell .clinic-room-card .provider-presence-badge{width:18px;height:18px;box-shadow:0 1px 3px #0f172a25}
#providerShell .clinic-room-card .status{grid-area:status;justify-self:start!important;max-width:calc(100% - 46px)!important;font-size:12px!important;line-height:15px!important;padding:0 5px!important;max-height:18px;text-align:left;box-sizing:border-box;white-space:nowrap;display:block!important;overflow:hidden;text-overflow:ellipsis}
/* The map's room background already carries the status color. */
#providerShell .tile .map-status{background:none!important}
#providerShell .clinic-room-card .acknowledgement-list{grid-area:acknowledgement;justify-self:stretch!important;display:flex;align-items:center;justify-content:center;gap:4px;height:17px;max-height:17px;max-width:none;width:100%;overflow:hidden;font-size:10px!important;line-height:12px!important;padding:0!important;margin:0;border:0;background:none;border-radius:0;text-align:center;box-sizing:border-box}
#providerShell .clinic-room-card .time{grid-area:time;align-self:center;justify-self:end;white-space:nowrap;font-size:10px!important;line-height:14px!important;font-weight:400;opacity:1}
#providerShell .clinic-room-card .staff-flag{grid-area:flag;margin:0;box-sizing:border-box;height:24px;min-height:24px;padding:2px 4px;font-size:11px;line-height:11px;gap:4px;box-shadow:none}
#providerShell .clinic-room-card .staff-flag::before{min-height:12px;width:4px;flex-basis:4px}
#providerShell .clinic-room-card>.wait-badge{top:28px;right:6px;font-size:7px;padding:1px 3px}
@container(max-width:220px){
 .clinic-room-card .room{font-size:16px!important}
 .clinic-room-card .roomline{gap:4px!important}
 .clinic-room-card .time{font-size:8px!important}
 .clinic-room-card .acknowledgement-list{gap:3px!important;font-size:9px!important}
 .clinic-room-card .staff-flag{font-size:10px!important;line-height:10px!important}
 .clinic-room-card .provider-presence-badge{width:16px!important;height:16px!important}
}
@media(max-width:600px){
 .dashboard .map{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 10px}
 body:is(.provider-card-fit-layout,.provider-map-fit-layout) .grid{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;gap:10px}
}

@media(max-width:600px){body:is(.provider-card-fit-layout,.provider-map-fit-layout){padding-bottom:42px}}
.dashboard .room-content>*{flex-shrink:0}
@container(max-height:95px){
 .room-updated{display:none}
 .room>.room-content{height:calc(100% - 27px)!important;right:42%!important}
 .room>.room-meta{top:8%!important}
}
@container(max-height:80px){
 #dashboardMap .room>.room-content{top:4px;right:8px!important;height:24px!important}
 #dashboardMap .dashboard-room-heading{height:14px;min-height:14px;max-width:calc(100% - 32px)}
 #dashboardMap .dashboard-room-heading .room-name{font-size:10px;line-height:12px}
 #dashboardMap .dashboard-room-heading .provider-presence-badge{width:12px;height:12px}
 #dashboardMap .dashboard-room-heading .provider-person-code{min-width:8px;height:8px;font-size:4.5px;right:-2px;bottom:-2px}
 #dashboardMap .room .room-status{font-size:7px;line-height:8px;height:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #dashboardMap .room .room-status br{display:none}
 #dashboardMap .room>.room-ack-list{height:10px;font-size:7px;line-height:8px}
 #dashboardMap .acknowledgement-person{padding:0 2px}
}
body:is(.provider-card-fit-layout,.provider-map-fit-layout){padding-bottom:46px}
/* One banner outside the fitted room area keeps its size stable between views. */
body:has(#providerShell){--provider-banner-height:clamp(50px,12.6dvh,114px)}
#providerBrandHeader{box-sizing:border-box;height:var(--provider-banner-height);min-height:0;padding:0 20px;flex-shrink:0}
#providerBrandHeader .header-logo{height:calc(var(--provider-banner-height) * .63157895);max-height:none;width:auto;max-width:100%;object-fit:contain}
@media(max-width:520px){body:has(#providerShell){--provider-banner-height:clamp(48px,9dvh,76px)}}
@media(max-width:600px){
 .dashboard-title{font-size:clamp(18px,5vw,26px)!important;margin-bottom:10px!important;white-space:nowrap}
 .dashboard .column-title{font-size:clamp(12px,3.4vw,17px)!important;line-height:1.15;margin-bottom:6px!important}
}