/* Device-adaptive restaurant workspaces: content owns its scrolling. */
@media screen {
  html {scroll-padding-top:80px;-webkit-text-size-adjust:100%}
  body {min-width:280px}
  .shell {grid-template-columns:218px minmax(0,1fr);min-height:100vh;min-height:100dvh}
  .shell main,.content,.panel,.stat,.split>*,.board>*,.pos>*,.quick-layout>* {min-width:0}
  aside {height:100dvh;padding-bottom:max(20px,env(safe-area-inset-bottom));z-index:40}
  aside nav {overscroll-behavior:contain}
  .content {padding:clamp(16px,2.1vw,36px)}
  .heading,.panelhead,.footerline,.reportline,.service-timing-settings {gap:12px;flex-wrap:wrap}
  .heading>div,.panelhead>div,.footerline>* {min-width:0}
  h1 {font-size:clamp(22px,2vw,30px);overflow-wrap:anywhere}
  .heading p,.panel p,.ordercard p,.note,.reportline span {overflow-wrap:anywhere}
  .stats {grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
  .stat .number,.stat>strong {overflow-wrap:anywhere}
  .split {grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .board {grid-template-columns:repeat(3,minmax(0,1fr))}
  .formgrid {grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .formgrid>*,.field,.order-fields>* {min-width:0}
  input,select,textarea {max-width:100%;min-width:0}
  input[type=checkbox],input[type=radio] {width:auto;flex-shrink:0}
  textarea {resize:vertical}
  button,a,summary {touch-action:manipulation}
  button {white-space:normal}
  .toolbar,.rowactions,.formactions {flex-wrap:wrap}
  .toolbar>label {min-width:150px;flex:1}
  .toolbar input {max-width:100%}
  .tabs {max-width:100%;flex-shrink:0;overscroll-behavior-inline:contain}
  .tabs>button {flex-shrink:0}
  .tablewrap {max-width:100%;width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .tablewrap table {min-width:560px}
  .tablewrap td {overflow-wrap:anywhere;max-width:400px}
  .rowactions button {flex:0 1 auto}
  .login {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  dialog {max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
  dialog .tablewrap {max-width:100%}
  .lineeditor {grid-template-columns:minmax(120px,2fr) minmax(75px,1fr) minmax(75px,1fr) auto}
  .lineeditor.two {grid-template-columns:minmax(120px,2fr) minmax(80px,1fr) auto}
  .device-nav {display:none}
  .topbar {gap:12px;min-height:64px;height:auto;padding-block:10px}
  .topright {flex-shrink:0;gap:10px}
  .account-menu .avatar {display:grid}
  .waitress-workspace {grid-template-columns:minmax(0,1fr)}
  .waitress-workspace main {grid-column:1}
  .tables-workspace .content {height:auto;min-height:calc(100dvh - 72px)}
  .tables-workspace .tablegrid {grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(145px,auto);flex:none}
  .tables-workspace .tablecard {min-height:145px;gap:8px;padding:14px}
  .tables-workspace .tablecard strong {font-size:22px}
  .tables-workspace .tablecard .pill {font-size:11px;white-space:normal}
  .tables-workspace .tabledetail {display:block;white-space:normal;font-size:12px}
  .tables-workspace .tablecta {font-size:11px}
  .tables-workspace .tablecard .ready-clock {font-size:12px}
  .order-workspace .pos {grid-template-columns:minmax(0,1fr) minmax(320px,38%)}
  .order-workspace .tiles {overflow:auto;grid-template-rows:repeat(4,minmax(70px,1fr))}
  .order-workspace .tile strong {font-size:13px}
  .order-workspace .cart-lines {overflow:auto}
  .order-workspace .topbar {height:64px}
  .order-workspace .content,.waitress-workspace.order-workspace .content {height:calc(100dvh - 64px)}
  #monitoring-root .toolbar input[type=range] {min-width:120px;flex:1}
  #monitoring-root .stats .stat>strong {display:block;font-size:24px;margin-top:8px}
  #mon-map {width:100%;max-height:65dvh}
}
@media screen and (min-width:1600px) {
  .content {padding:30px 40px}
  .tables-workspace .tablegrid {grid-template-columns:repeat(6,minmax(0,1fr))}
  .quick-buttons {grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media screen and (min-width:701px) and (max-width:1100px) {
  .shell {grid-template-columns:76px minmax(0,1fr)}
  aside {width:76px;padding:18px 8px}
  .brand {margin:0 10px 24px}
  aside .brandtext,aside .navlabel,aside .sidebarfoot,aside .navtext {display:none}
  aside nav button {justify-content:center;padding:12px}
  .split,.quick-layout {grid-template-columns:minmax(0,1fr)}
  .tables-workspace .tablegrid {grid-template-columns:repeat(4,minmax(0,1fr))}
  .waitress-workspace {grid-template-columns:minmax(0,1fr)}
  .waitress-workspace .topbar {flex-wrap:wrap}
  .waitress-nav {order:3;width:100%;justify-content:center}
  .waitress-workspace.order-workspace .content {height:auto;overflow:visible}
}
@media screen and (max-width:900px), screen and (max-height:650px) {
  .order-workspace .content,.waitress-workspace.order-workspace .content {height:auto;min-height:0;overflow:visible;display:block}
  .order-workspace .pos {grid-template-columns:minmax(0,1fr)}
  .order-workspace .menu-pane {min-height:0}
  .order-workspace .tiles {grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(86px,auto);overflow:visible;flex:none}
  .order-workspace .tile {min-height:86px;padding:12px;flex-direction:column;align-items:stretch}
  .order-workspace .tile strong {font-size:13px;-webkit-line-clamp:3}
  .order-workspace .tile .price {font-size:13px}
  .order-workspace .cart {overflow:visible;min-height:0;padding:16px;margin-top:16px}
  .order-workspace .cart-lines {overflow:visible;flex:none;min-height:120px}
  .order-workspace .cartitem {min-height:88px;padding:12px 0}
  .order-workspace .cartitem-heading {font-size:13px}
  .order-workspace .cartitem-heading strong {white-space:normal}
  .order-workspace .order-fields {gap:12px}
  .order-workspace .menu-tools {grid-template-columns:1fr 1fr}
  .order-workspace .cartitem-controls {grid-template-columns:minmax(0,1fr) auto}
  .order-workspace .quantity button {width:44px;height:44px}
  .order-workspace input,.order-workspace select {font-size:16px;min-height:44px;padding:10px}
  .order-workspace label {font-size:12px}
  .order-workspace .order-footer button {min-height:44px;font-size:14px}
  .order-workspace .variant {display:block}
}
@media screen and (max-width:700px) {
  .shell,.order-workspace {display:block;min-width:0}
  .shell>aside {display:none}
  .shell main {width:100%;min-width:0}
  .shell .topbar {display:flex;flex-wrap:nowrap;position:relative;height:auto;min-height:64px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));gap:8px}
  .shell .branch,.waitress-workspace .branch {display:block;min-width:0;flex:1;font-size:12px;overflow-wrap:anywhere}
  .branch small,.shell .topright .date,.shell .topright .connection,.waitress-nav {display:none}
  .shell .topright {gap:4px}
  .shell .account-menu .avatar {display:grid;width:30px;height:30px}
  .shell .topright>button {min-width:40px;min-height:44px;padding:8px}
  .device-nav {display:block;position:relative;flex:none}
  .device-nav>summary {cursor:pointer;list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;color:var(--green);font-size:22px;background:#fff}
  .device-nav>summary::-webkit-details-marker {display:none}
  .device-nav>nav {position:absolute;left:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 24px));max-height:75dvh;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:#103e32;box-shadow:0 10px 30px #0003;z-index:100}
  .device-nav nav button {justify-content:flex-start;min-height:44px;font-size:14px}
  .content,.tables-workspace .content,.order-workspace .content {padding:14px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .heading {align-items:flex-start;gap:12px;margin-bottom:18px}
  .heading>.rowactions,.heading>button {max-width:100%}
  .heading>.rowactions {width:100%}
  .heading>.rowactions button {flex:1}
  h1,.tables-workspace h1 {font-size:23px}
  .panel,.stat {padding:16px;border-radius:12px}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .stat .number {font-size:24px;margin-block:10px 5px}
  .split,.board,.quick-layout {grid-template-columns:minmax(0,1fr);gap:14px}
  .formgrid {grid-template-columns:minmax(0,1fr)}
  .formactions>button {flex:1;min-width:100px}
  input,select,textarea {font-size:16px;min-height:44px}
  button,.small,.tabs button {min-height:44px}
  .rowactions {gap:8px}
  .tablewrap {border-radius:8px}
  .tablewrap th,.tablewrap td {padding:12px 10px}
  .tabs {gap:6px;padding-bottom:4px}
  .tabs button {padding:10px 12px}
  .toolbar>*,.toolbar>label {max-width:100%}
  .toolbar input {width:100%}
  .tables-workspace .tablegrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:minmax(150px,auto)}
  .tables-workspace .tablecard {padding:12px;min-height:150px}
  .tables-workspace .tableicon {display:block}
  .tables-workspace .tablecard .pill {font-size:10px}
  .tables-workspace .tablecard strong {font-size:21px}
  .table-legend {display:block}
  .table-legend>label {margin-top:12px}
  .order-workspace .tiles {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(94px,auto);gap:8px}
  .order-workspace .tile {min-height:94px;padding:12px}
  .order-workspace .tile-bottom>.muted {display:block}
  .order-workspace .menu-tools {grid-template-columns:minmax(0,1fr)}
  .order-workspace .order-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-workspace .pos-pager button {min-width:44px}
  .order-workspace .selected-customer {font-size:13px}
  .order-workspace .customer-picker-row button {font-size:12px}
  .order-title {flex-wrap:wrap}
  .order-title h1 {font-size:22px}
  .compact-order-summary {grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .compact-order-items {grid-column:1/-1;grid-row:2}
  .compact-order-actions {grid-column:1/-1;max-width:none;justify-content:flex-start}
  .compact-order-actions button {font-size:12px;flex:1 1 auto}
  .compact-order-amount {grid-column:2;grid-row:1}
  .ordercard header,.tickethead {flex-wrap:wrap;gap:8px}
  .service-item {align-items:flex-start;flex-wrap:wrap;gap:10px}
  .service-item>div {flex:1 1 160px}
  .service-item>button {min-height:44px}
  .ticketitem {display:flow-root;overflow-wrap:anywhere}
  .quick-buttons {grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-buttons button {min-height:90px}
  .lineeditor {grid-template-columns:minmax(0,1fr) minmax(60px,1fr);padding:12px 0;border-bottom:1px solid var(--line)}
  .lineeditor>*:first-child {grid-column:1/-1}
  .lineeditor.two {grid-template-columns:minmax(0,1fr) auto}
  dialog {width:calc(100vw - 20px);max-width:calc(100vw - 20px);padding:18px;max-height:calc(100dvh - 20px)}
  dialog .panel {padding:12px}
  .login {display:block}
  .loginart {padding:26px 22px}
  .loginart h1 {font-size:28px}
  .loginart p {display:none}
  .loginart .brand {margin-bottom:24px}
  .loginform {padding:28px 22px}
  #mon-map {height:55dvh!important;min-height:260px!important;max-height:480px}
  #monitoring-root .toolbar {gap:10px}
  #monitoring-root .toolbar input[type=range] {flex-basis:100%;max-width:none}
  #monitoring-root .heading button {min-width:100px}
}
@media screen and (max-width:359px) {
  .stats {grid-template-columns:minmax(0,1fr)}
  .tables-workspace .tablegrid {grid-template-columns:minmax(0,1fr)}
  .order-workspace .order-fields {grid-template-columns:minmax(0,1fr)}
  .order-workspace .cartitem-controls {grid-template-columns:minmax(0,1fr)}
  .order-workspace .quantity {justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important}}
@media screen and (min-width:701px) {
  .order-workspace:not(.waitress-workspace) {grid-template-columns:76px minmax(0,1fr)}
  .order-workspace.waitress-workspace {grid-template-columns:minmax(0,1fr)}
}

/* Keep every monitored staff member on one compact table row. */
.monitoring-users-table th,.monitoring-users-table td{padding:10px 12px;white-space:nowrap;vertical-align:middle}
.monitoring-users-table td{font-size:13px;line-height:1.4}
.monitoring-users-table th{font-size:11px}
.monitoring-users-table .monitoring-inline{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.monitoring-users-table button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;font-size:12px;border-radius:8px;width:auto;margin:0}
.monitoring-users-table .pill{padding:4px 8px;font-size:12px}
.monitoring-users-table small{font-size:11px}

/* Access switches must never shrink or wrap their labels inside flex cells. */
.monitoring-users-table .monitoring-inline{min-width:max-content}
.monitoring-users-table .monitoring-inline>*{flex-shrink:0}
.monitoring-users-table td,.monitoring-users-table button{overflow-wrap:normal;word-break:normal;white-space:nowrap}
.monitoring-users-table button.monitoring-switch{flex:0 0 82px;width:82px;min-width:82px;height:40px;min-height:40px;gap:7px;padding:4px;background:transparent;color:#46615a;border:0;box-shadow:none;justify-content:flex-start}
.monitoring-switch-track{display:inline-block;position:relative;flex:0 0 36px;width:36px;height:22px;border-radius:20px;background:#b6c0bc;transition:background .15s}
.monitoring-switch-track::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:transform .15s}
.monitoring-switch[aria-checked=true] .monitoring-switch-track{background:#1b715d}
.monitoring-switch[aria-checked=true] .monitoring-switch-track::after{transform:translateX(14px)}
.monitoring-users-table .monitoring-switch:focus-visible{outline:2px solid #1b715d;outline-offset:2px}
.monitoring-users-table .monitoring-switch:disabled{opacity:.45;cursor:wait}

/* Date shortcuts, dates and report filters share a single scrolling row. */
#monitoring-root .monitoring-filter-panel{padding:16px;overflow-x:auto;overscroll-behavior-inline:contain}
#monitoring-root .monitoring-filter-row{display:flex;align-items:flex-end;gap:12px;min-width:max-content}
#monitoring-root .monitoring-filter-row .tabs{display:flex;flex-wrap:nowrap;gap:6px;margin:0;align-self:flex-end}
#monitoring-root .monitoring-filter-row #mon-filter,#monitoring-root .monitoring-filter-row .formgrid{display:flex;align-items:flex-end;gap:10px;margin:0}
#monitoring-root .monitoring-filter-row label{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;margin:0;font-size:12px}
#monitoring-root .monitoring-filter-row input,#monitoring-root .monitoring-filter-row select{height:40px;min-height:40px;padding:8px 10px;margin:0;font-size:13px;width:150px}
#monitoring-root .monitoring-filter-row select{width:210px}
#monitoring-root .monitoring-filter-row button{height:40px;min-height:40px;flex:0 0 auto;width:auto;min-width:0;padding:8px 12px;margin:0;font-size:13px;white-space:nowrap;overflow-wrap:normal}

/* Monitoring layout adapted from the mobile-service call centre and live routes. */
.monitor-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0}
.monitor-group{border:1px solid #dce4df;border-radius:14px;padding:14px;background:#fff;margin-bottom:12px}
.monitor-group h3{font-size:14px;margin:0 0 10px;color:#436454}
.monitor-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.monitor-group[data-tone=performance] .monitor-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.monitor-kpi{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;border:1px solid #dfe6e2;border-radius:10px;background:#fff;color:#23483e;padding:12px;min-width:0;text-align:left}
.monitor-kpi span{font-size:12px;font-weight:500;line-height:1.35}.monitor-kpi strong{font-size:23px;line-height:1.2}.monitor-kpi small{font-size:10px;color:#6d827a}
button.monitor-kpi:hover{background:#f1f7f3;border-color:#6d9a85}
.monitor-group[data-tone=followup]{border-top:3px solid #d7a545}.monitor-group[data-tone=performance]{border-top:3px solid #5689bd}
.monitor-timeline{margin:0;min-width:0}.monitor-timeline h3{font-size:15px;margin:0 0 12px}.monitor-timeline svg{display:block;width:100%;height:auto}.monitor-timeline svg text{font-size:12px;fill:#52665d}.monitor-timeline svg g[role=button]{cursor:pointer}.monitor-timeline svg g:focus{outline:2px solid #1b715d}
.monitor-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#52665d;margin:12px 0}.monitor-legend span:before{content:'';display:inline-block;width:9px;height:9px;background:var(--key);border-radius:3px;margin-right:5px}
.monitor-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.monitor-riders{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.monitor-rider{display:flex;align-items:flex-start;flex-direction:column;gap:7px;background:#f8faf8;color:#315046;border:1px solid #dbe3de;border-left:4px solid #a6b5ac;text-align:left;padding:15px}.monitor-rider.is-active{border-left-color:#16a174}.monitor-rider.needs-attention{border-left-color:#dc713b}.monitor-rider span,.monitor-rider small{font-size:12px;font-weight:400}.monitor-rider b{font-size:26px}.monitor-rider:hover{background:#eef5f0}
@media(max-width:1000px){.monitor-overview{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.monitor-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-kpi{padding:10px}.monitor-kpi strong{font-size:21px}.monitor-riders{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-rider{padding:10px}}

.monitor-viewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;font-size:13px}.monitor-viewbar button{padding:8px 12px;font-size:12px}.monitoring-filter-row [data-period][aria-pressed=true]{background:#1b715d;color:white;border-color:#1b715d}

/* Put workspace titles beside the branch in the shared top row. */
.topbar .workspace-page-title{font-size:20px;line-height:1.25;margin:0 12px;min-width:0;flex:1;font-weight:700;overflow-wrap:normal}
.topbar .branch{flex:0 1 auto}
.content .heading h1{display:none}
.content .heading{margin-bottom:14px}
.content .heading p{margin:0;font-size:12px}
#monitoring-root>.heading,#attendance-root>.heading{display:none}
@media(max-width:1000px){.topbar .workspace-page-title{font-size:17px;margin:0 6px}.topbar .branch small{display:none}.topbar .branch{font-size:12px}}
@media(max-width:700px){.topbar .workspace-page-title{font-size:16px;flex:1;min-width:70px}.topbar .branch{display:none!important}.topbar .topright{flex:0 0 auto}}
@media print{.workspace-page-title{display:block!important}.content .heading h1{display:block}}

/* Keep the desktop rail collapsed in every workspace, independent of selection. */
@media screen and (min-width:701px){
 .shell:not(.waitress-workspace){grid-template-columns:76px minmax(0,1fr)}
 .shell:not(.waitress-workspace) aside{width:76px;padding:15px 8px;overflow:hidden}
 .shell:not(.waitress-workspace) aside .brand{margin:0 10px 18px;flex-shrink:0}
 .shell:not(.waitress-workspace) aside .brandtext,.shell:not(.waitress-workspace) aside .navlabel,.shell:not(.waitress-workspace) aside .navtext,.shell:not(.waitress-workspace) aside .sidebarfoot{display:none}
 .shell:not(.waitress-workspace) aside>nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto}
 .shell:not(.waitress-workspace) aside>nav button{justify-content:center;padding:10px;min-height:42px;flex-shrink:0}
}

.shell aside .brand:has(.royal-sidebar-logo){margin:0 0 16px;padding:0;width:60px;justify-content:center}
.royal-sidebar-logo{display:block;width:60px;height:48px;object-fit:contain;flex-shrink:0}

.service-tabsbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;flex-shrink:0;min-width:0}
.service-tabs{display:flex;align-items:center;gap:5px;overflow-x:auto;min-width:0;overscroll-behavior-inline:contain}
.service-tabs button{flex:0 0 auto;background:transparent;color:#526c60;border:1px solid #dfe6df;border-radius:8px;padding:9px 14px;font-size:13px;white-space:nowrap}
.service-tabs button.active{background:#174d3d;color:#fff;border-color:#174d3d}
.service-new-order{flex-shrink:0;padding:9px 14px;font-size:13px;white-space:nowrap}
.order-workspace .service-tabsbar{margin-bottom:8px}
@media(max-width:600px){.service-tabsbar{gap:6px}.service-tabs button{font-size:12px;padding:9px 10px}.service-new-order{font-size:12px;padding:9px 10px}}

/* Keep Service chrome identical while switching its internal workspaces. */
.shell.service-workspace .topbar{height:64px;min-height:64px;padding:0 24px;flex-wrap:nowrap}
.shell.service-workspace .content{padding:16px 24px}
.shell.service-workspace .service-tabsbar{height:40px;min-height:40px;margin:0 0 14px;justify-content:flex-start}
.shell.service-workspace .service-tabs button{height:40px;min-height:40px;padding:9px 14px;font-size:13px}
.shell.service-workspace.order-workspace .content{height:calc(100dvh - 64px)}
.shell.service-workspace .topbar .avatar{display:grid}
.shell.service-workspace .topbar .branch small{display:block}
@media(max-width:1000px){.shell.service-workspace .topbar .branch small{display:none}}
@media(max-width:900px), (max-height:650px){.shell.service-workspace.order-workspace .content{height:auto;min-height:0}}
@media(max-width:700px){.shell.service-workspace .topbar{padding:0 12px}.shell.service-workspace .content{padding:14px 12px}.shell.service-workspace .service-tabs button{padding:9px 10px;font-size:12px}}