/* Operational account shell: visual layout only; routes, data and existing controls stay intact. */
@media(min-width:1024px){
 :root[data-theme=light] body.panel-frame #app>.container{width:100%!important;max-width:none!important;padding:20px clamp(16px,3vw,48px) 24px!important}
 :root[data-theme=light] body.panel-frame #app .workspace{display:grid!important;grid-template-columns:232px minmax(0,1fr)!important;gap:20px!important}
 :root[data-theme=light] body.panel-frame #app .workspace>.sidebar{border-radius:24px!important;padding:18px 12px!important}
 :root[data-theme=light] body.panel-frame #app .workspace>section{padding-inline:0 4px!important;scrollbar-gutter:stable}
}
:root[data-theme=light] body.panel-view #app .workspace>section{min-width:0}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start;margin-block:22px 0}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside){display:grid;align-content:start;gap:16px;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside)>*{margin:0;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside) :is(.card,.order,.console-recent-order){border:1px solid #e8e9f1;border-radius:20px;background:#fff;box-shadow:0 8px 24px #1f20240d;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside) .panel-heading{gap:12px;align-items:center;flex-wrap:wrap}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside) .panel-heading h2{min-width:0;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside) :is(.record-grid,.console-recent){min-width:0}
:root[data-theme=light] body.panel-view #app .workspace>section :is(.form-grid,.table-wrap,.console-facts,.record-grid,.finance-stats){min-width:0;max-width:100%;box-sizing:border-box}
:root[data-theme=light] body.panel-view #app .workspace>section :is(.table-wrap){overflow-x:auto;overscroll-behavior-inline:contain}
:root[data-theme=light] body.panel-view #app .workspace>section :is(.field,label.field){display:block;min-width:0;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace>section :is(input:not([type=checkbox]):not([type=radio]),select,textarea):not(:disabled):not([readonly]){background:#fff!important;color:#1f2024!important}
:root[data-theme=light] body.panel-view #app .workspace>section :is(.console-metric,.order,.card,.console-activity,.console-coverage-card){overflow-wrap:anywhere}
@media(max-width:1023px){
 :root[data-theme=light] body.panel-view #app .workspace .dashboard-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-block-start:20px}
 :root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside){gap:12px}
}
@media(max-width:767px){
 :root[data-theme=light] body.panel-view #app .workspace :is(.dashboard-main,.dashboard-aside) :is(.card,.order,.console-recent-order){border-radius:16px}
 :root[data-theme=light] body.panel-view #app .workspace>section :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 :root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .panel-heading{align-items:flex-start}
}
@media print{body.panel-frame #app>.container{max-width:none!important;padding:0!important}body.panel-frame #app .workspace .dashboard-grid{display:block!important}body.panel-frame #app .workspace :is(.dashboard-main,.dashboard-aside){display:block!important}}
/* The current-order cards carry more detail than recent services; give each section its own row. */
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid{grid-template-columns:minmax(0,1fr)}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid :is(.dashboard-main,.dashboard-aside)>*{width:100%;box-sizing:border-box}
/* Dashboard headings and recent-service rows retain a compact, aligned hierarchy. */
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .role-card{padding:clamp(18px,2vw,24px)!important}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;margin:0 0 20px}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .panel-heading h2{margin:0;flex:1 1 180px}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .panel-heading>a{flex:0 0 auto;margin:0;min-height:44px}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'title badge' 'bike badge' 'date badge';gap:4px 16px;align-items:center;padding:16px 20px;text-align:start}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order>strong{grid-area:title;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order>span:not(.badge){grid-area:bike;min-width:0;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order>.badge{grid-area:badge;justify-self:end}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order>small{grid-area:date}
@media(max-width:480px){:root[data-theme=light] body.panel-view #app .workspace .dashboard-grid .panel-heading h2{flex-basis:140px}:root[data-theme=light] body.panel-view #app .workspace .dashboard-aside .console-recent-order{padding:14px;gap:4px 10px}}
/* Dashboard order cards retain original order content, actions and detail handlers. */
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order{display:flex;flex-direction:column;gap:8px;border:1px solid #e8e9f1!important;border-radius:17px;padding:18px!important;background:#fff!important;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-top>b{font-size:14px;line-height:1.8;min-width:0;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-top>.badge{flex:none;max-width:55%;white-space:normal}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>p{margin:0;line-height:1.9;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:#f8f9fe;border-radius:12px;padding:11px 12px;margin-block:4px}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta>div{display:grid;gap:3px;min-width:0}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta span{font-size:12px;color:#494a50;line-height:1.7}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta strong,:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta small{font-size:13px;font-weight:650;line-height:1.8;color:#1f2024;overflow-wrap:anywhere}
:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-actions{margin-block-start:4px;padding-block-start:12px;border-top:1px solid #e8e9f1;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:360px){:root[data-theme=light] body.panel-view #app .workspace .dashboard-order-meta{grid-template-columns:minmax(0,1fr)}:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-top{flex-wrap:wrap}:root[data-theme=light] body.panel-view #app .workspace .dashboard-main .actual-order>.order-top>.badge{max-width:100%}}