/* Manager-only tokens. Guest shop, restaurant artwork and printed receipts keep their own palette. */
body[data-surface=manager]{
 --dm-canvas:#f3f4f6;--dm-surface:#ffffff;--dm-subtle:#eef0f3;--dm-raised:#e2e5e9;
 --dm-text:#151714;--dm-muted:#515b69;--dm-line:#d7dce2;--dm-strong:#151714;--dm-on-strong:#ffffff;--dm-chart:#627900;
 --dm-success:#137345;--dm-success-bg:#e7f5ed;--dm-success-solid:#147d4b;
 --dm-warning:#865000;--dm-warning-bg:#fff3d7;--dm-warning-line:#d4ad55;--dm-warning-solid:#925600;
 --dm-danger:#b32a35;--dm-danger-bg:#fdebed;--dm-danger-solid:#b32a35;--dm-info:#245ca8;--dm-info-bg:#eaf1fc;
 --dm-focus:#526500;--dm-shadow:0 3px 12px #15171408;
 background:var(--dm-canvas);color:var(--dm-text);color-scheme:light;
}
#peak-app[data-surface=manager],body[data-surface=manager] .pc-dialog{
 --ink:var(--dm-text);--muted:var(--dm-muted);--line:var(--dm-line);--canvas:var(--dm-canvas);--soft:var(--dm-subtle);--accent:var(--dm-text);--brand-deep:var(--dm-strong);--danger:var(--dm-danger);
 font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--dm-text);
}
#peak-app[data-surface=manager] :is(input,select,textarea){background-color:var(--dm-surface);color:var(--dm-text);border-color:var(--dm-line)}
#peak-app[data-surface=manager] :is(input,textarea)::placeholder{color:var(--dm-muted);opacity:1}
#peak-app[data-surface=manager] :is(input[type=checkbox],input[type=radio]){accent-color:var(--dm-chart)}
#peak-app[data-surface=manager] :focus-visible,body[data-surface=manager] .pc-dialog :focus-visible{outline:3px solid var(--dm-focus);outline-offset:3px}
#peak-app[data-surface=manager] .manager-sidebar :focus-visible{outline-color:#d8ff36}
#peak-app[data-surface=manager] button{transition:background-color .12s,border-color .12s,box-shadow .12s}
#peak-app[data-surface=manager] .danger-button{background:var(--dm-danger-solid);border-color:var(--dm-danger-solid);color:white}
#peak-app[data-surface=manager] button.primary,
:is(#peak-app[data-surface=manager],body[data-surface=manager]) :is(.pc-studio .pc-primary,.pc-profile button,.ps-studio .ps-primary){background:#d8ff36;border-color:#d8ff36;color:#151714;font-weight:750}
#peak-app[data-surface=manager] button.primary:hover,
:is(#peak-app[data-surface=manager],body[data-surface=manager]) :is(.pc-studio .pc-primary,.pc-profile button,.ps-studio .ps-primary):hover{background:#c9ee2a;border-color:#c9ee2a;color:#151714}
#peak-app[data-surface=manager] .manager-sidebar nav button{font-size:13px}
#peak-app[data-surface=manager] .sidebar-label{font-size:10px;color:#b1bbc8}
#peak-app[data-surface=manager] .manager-topbar{gap:16px;color:var(--dm-text)}
#peak-app[data-surface=manager] .manager-topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peak-app[data-surface=manager] .topbar-actions{flex-shrink:0;gap:12px}

#peak-app[data-surface=manager] .manager-main{padding-top:28px}
#peak-app[data-surface=manager] .page-heading{margin-bottom:24px}
#peak-app[data-surface=manager] :is(.panel,.metric,.order-card,.pc-card,.ps-card){box-shadow:var(--dm-shadow)}
#peak-app[data-surface=manager] :is(.metric>small,.section-heading p,.manager-footer,.connection,.pagination,.settings-help,.field-help){font-size:12px;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.order-table-head,.admin-product-head,th){font-size:12px;font-weight:650;color:var(--dm-muted);background:var(--dm-subtle)}
#peak-app[data-surface=manager] :is(.order-table-row,.admin-product-row,td){font-size:13px;color:var(--dm-text)}
#peak-app[data-surface=manager] :is(.order-table-customer small,.admin-product-name small){font-size:12px;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.new-order-banner span,.control-panel>.muted,.prep-times span,.quick-stock small,.system-row small,.calm-note,.setting-check small,.hours-row label,.bar-value,.bar-column>small,.ranking-row>span,dl,td small,.detail-line small,.option-line label,.printer-summary p,.control-card small,.integration-row small,.system-detail small,.hours-editor-heading p,.hours-day small,.hours-times label,.hours-second label,.hours-second-label,.hours-legacy-note,.status-overview-card small){font-size:12px;line-height:1.5;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.stock-control,.stock-control span,.menu-stats,.system-row strong,.payment-panel strong,.status-overview-card strong,.hours-day strong){font-size:13px;line-height:1.5}
#peak-app[data-surface=manager] :is(.new-order-banner button,.section-heading .text-button,.panel-link,.control-panel>.full,.prep-times button,.close-today,.board-filters select,.pagination button,.menu-admin-toolbar select,.hours-toggle,.hours-actions button,.hours-second-toggle,.settings-nav .tab-pills button,.incoming-alert button){font-size:12px}
#peak-app[data-surface=manager] :is(.status,.order-table-row .status){font-size:12px}
#peak-app[data-surface=manager] :is(.board-toolbar,.menu-admin-toolbar){gap:12px}
#peak-app[data-surface=manager] :is(.tab-pills,.settings-tabs){background:var(--dm-subtle)}
#peak-app[data-surface=manager] :is(.tab-pills,.settings-tabs) button{font-size:13px;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.tab-pills,.settings-tabs) button[aria-pressed=true]{background:var(--dm-surface);color:var(--dm-text);box-shadow:var(--dm-shadow)}
#peak-app[data-surface=manager] .tab-pills button span{color:inherit;background:var(--dm-raised)}
#peak-app[data-surface=manager] .kanban{gap:16px}
#peak-app[data-surface=manager] .kanban-column{background:var(--dm-subtle);border-color:var(--dm-line);padding:12px;border-radius:14px;min-height:220px}
#peak-app[data-surface=manager] .kanban-heading{margin:2px 2px 12px}
#peak-app[data-surface=manager] .kanban-heading h2{font-size:13px;font-weight:700;color:var(--dm-text)}
#peak-app[data-surface=manager] .kanban-heading>span:last-child{background:var(--dm-surface);color:var(--dm-text);font-size:12px;font-weight:650;min-width:24px;text-align:center}
#peak-app[data-surface=manager] .column-new .column-dot{background:var(--dm-warning)}
#peak-app[data-surface=manager] .column-working .column-dot{background:var(--dm-info)}
#peak-app[data-surface=manager] .column-ready .column-dot{background:var(--dm-success)}
#peak-app[data-surface=manager] .order-card{padding:15px;border-radius:11px;border-color:var(--dm-line);background:var(--dm-surface)}
#peak-app[data-surface=manager] .order-card.new{border-color:var(--dm-warning-line);border-top:3px solid var(--dm-warning)}
#peak-app[data-surface=manager] .order-card>header{margin-bottom:10px}
#peak-app[data-surface=manager] :is(.order-created,.mode-badge){font-size:12px}
#peak-app[data-surface=manager] .order-identity{min-height:44px;color:var(--dm-text)}
#peak-app[data-surface=manager] .order-identity strong{font-size:22px;font-weight:750}
#peak-app[data-surface=manager] .order-identity span{font-size:13px;color:var(--dm-text);margin-top:1px}
#peak-app[data-surface=manager] .order-identity .icon{color:var(--dm-muted);width:17px;height:17px}
#peak-app[data-surface=manager] .order-due{margin:10px 0;padding:7px 8px;font-size:12px;line-height:1.4;background:var(--dm-subtle);color:var(--dm-text);gap:6px}
#peak-app[data-surface=manager] .order-due .icon{width:15px;height:15px;flex-shrink:0}
#peak-app[data-surface=manager] .order-lines{min-height:0;padding:0 0 8px;border-color:var(--dm-line)}
#peak-app[data-surface=manager] .order-lines>div{font-size:13px;color:var(--dm-text);margin-bottom:4px}
#peak-app[data-surface=manager] .order-lines b{font-size:13px;font-weight:650;color:var(--dm-text)}
#peak-app[data-surface=manager] :is(.order-lines small,.order-card-total small){font-size:12px;color:var(--dm-muted)}
#peak-app[data-surface=manager] .order-card-total{margin-top:8px}
#peak-app[data-surface=manager] .order-card-total strong{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums}
#peak-app[data-surface=manager] .order-payment{margin-top:5px;font-size:12px;letter-spacing:0;color:var(--dm-text);gap:6px}
#peak-app[data-surface=manager] .order-payment .status-dot{width:6px;height:6px}
#peak-app[data-surface=manager] .order-ops-compact{display:grid;gap:5px;margin-top:7px;font-size:12px;color:var(--dm-muted);line-height:1.4}
#peak-app[data-surface=manager] .order-ops-compact>span{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
#peak-app[data-surface=manager] .order-ops-compact .icon{width:14px;height:14px;flex-shrink:0}
#peak-app[data-surface=manager] .order-ops-compact .needs-attention{padding:7px 8px;border-radius:6px;background:var(--dm-warning-bg);color:var(--dm-warning);font-weight:650}
#peak-app[data-surface=manager] .order-card footer{margin-top:12px;gap:7px}
#peak-app[data-surface=manager] .order-card footer>.primary{min-height:44px;font-size:12px;padding:10px 8px}
#peak-app[data-surface=manager] .order-card footer>.primary .icon{display:block;width:16px;height:16px;flex-shrink:0}
#peak-app[data-surface=manager] .order-card footer>.icon-button{min-height:44px;height:44px;width:44px;flex-shrink:0;background:var(--dm-subtle);color:var(--dm-text);border-color:var(--dm-line)}
#peak-app[data-surface=manager] .kanban-empty{padding:36px 16px;font-size:12px;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.order-operational-states,.payment-panel,.detail-contact,.event-timeline,.refund-note){font-size:13px}
#peak-app[data-surface=manager] :is(.detail-contact small,.event-timeline small,.payment-panel small,.order-operational-states span){font-size:12px;color:var(--dm-muted)}
#peak-app[data-surface=manager] :is(.manager-pause-banner,.incoming-alert){font-size:13px;line-height:1.5}
#peak-app[data-surface=manager] .manager-connection-notice{display:flex;gap:12px;align-items:center;padding:16px 36px;background:var(--dm-warning-bg);color:var(--dm-warning);border-bottom:1px solid var(--dm-warning-line)}
#peak-app[data-surface=manager] .manager-connection-notice>.icon{flex-shrink:0;width:22px;height:22px}
#peak-app[data-surface=manager] .manager-connection-notice>div{flex:1;min-width:0}
#peak-app[data-surface=manager] .manager-connection-notice strong{font-size:14px}
#peak-app[data-surface=manager] .manager-connection-notice p{margin:3px 0 0;font-size:13px;color:inherit}
#peak-app[data-surface=manager] .manager-connection-notice button{background:var(--dm-surface);color:var(--dm-text);border-color:var(--dm-warning-line);flex-shrink:0}
#peak-app[data-surface=manager] .business-shortcuts button:first-child{color:#151714}
#peak-app[data-surface=manager] .business-shortcuts button:first-child :is(small,em){color:#414b20}
#peak-app[data-surface=manager] .business-shortcuts button:nth-child(2){background:var(--dm-surface);color:var(--dm-text);border-color:var(--dm-line)}
#peak-app[data-surface=manager] .business-shortcuts button:nth-child(2):hover{background:var(--dm-subtle)}
#peak-app[data-surface=manager] .business-shortcuts button:nth-child(2) strong{color:var(--dm-text)}
#peak-app[data-surface=manager] .business-shortcuts button:nth-child(2) :is(small,em){color:var(--dm-muted)}
#peak-app[data-surface=manager] .business-shortcuts em{font-size:12px}
#peak-app[data-surface=manager] :is(.pc-intro em,.ps-heading em){box-shadow:none;color:var(--dm-chart)}
#peak-app[data-surface=manager] :is(.pc-card p,.pc-card small,.pc-profile label,.pc-intro-note p,.pc-plan p,.ps-note,.ps-rights,.ps-logo-row small,.ps-save p){font-size:12px;line-height:1.6}
:is(#peak-app[data-surface=manager],body[data-surface=manager]) .pc-dialog{--pc-ink:var(--dm-text);--pc-muted:var(--dm-muted);--pc-line:var(--dm-line);--pc-paper:var(--dm-surface)}
/* The simulated guest shop and the thermal receipt are always independent of the manager theme. */
#peak-app[data-surface=manager] .ps-device{color:#151714;color-scheme:light;--ps-ink:#151714;--ps-line:#e2e5dc;background:white}
#peak-app[data-surface=manager] .receipt-paper{background:white;color:#000;color-scheme:light}
#peak-app[data-surface=manager] :is(.preview-bar,.preview-switch){background:var(--dm-subtle);color:var(--dm-muted);border-color:var(--dm-line)}
body[data-surface=manager] .business-preview-links a{background:var(--dm-surface);color:var(--dm-text);border-color:var(--dm-line)}
@media(max-width:1200px){#peak-app[data-surface=manager] .topbar-actions{gap:8px}}
@media(max-width:900px){#peak-app[data-surface=manager] .kanban-column{min-height:0}#peak-app[data-surface=manager] .manager-connection-notice{padding:14px 24px}}
@media(max-width:600px){
 #peak-app[data-surface=manager] .manager-topbar{gap:8px;padding-inline:12px}
 #peak-app[data-surface=manager] .manager-topbar>span>.muted,#peak-app[data-surface=manager] .manager-topbar .breadcrumb{display:none}
 #peak-app[data-surface=manager] .topbar-actions{gap:5px}

 #peak-app[data-surface=manager] .manager-main{padding:22px 16px}
 #peak-app[data-surface=manager] .manager-connection-notice{padding:14px 16px;flex-wrap:wrap;gap:9px}
 #peak-app[data-surface=manager] .manager-connection-notice>div{flex-basis:calc(100% - 36px)}
 #peak-app[data-surface=manager] .manager-connection-notice button{margin-left:31px}
 #peak-app[data-surface=manager] .kanban{gap:16px}
}
@media(prefers-reduced-motion:reduce){#peak-app[data-surface=manager] button{transition:none}}

/* Restore the original black/lime business design, keeping the corrected brand position. */
body[data-surface=manager]{--dm-brand-ink:#151714;--dm-brand-lime:#d8ff36}
#peak-app[data-surface=manager] .manager-sidebar{padding-top:12px}
#peak-app[data-surface=manager] .manager-brand.business-brand{margin-bottom:16px;min-height:48px}
#peak-app[data-surface=manager] .business-brand img{width:40px;height:40px;flex-basis:40px}
#peak-app[data-surface=manager] .business-brand>.business-brand-name{font-size:18px}

/* Header controls share one baseline and explicitly sized touch targets. */
#peak-app[data-surface=manager] .manager-topbar{height:72px;min-height:72px;gap:16px;align-items:center}
#peak-app[data-surface=manager] .manager-topbar>span{flex:1;font-size:13px}
#peak-app[data-surface=manager] .topbar-actions{display:flex;flex-direction:row;align-items:center;gap:12px;flex-shrink:0}


#peak-app[data-surface=manager] .topbar-actions :is(.avatar,.icon-button){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;max-height:44px;flex:0 0 44px;aspect-ratio:1;padding:0;margin:0}
#peak-app[data-surface=manager] .topbar-actions .avatar{font-size:12px;border-radius:50%;background:var(--dm-brand-ink);color:var(--dm-brand-lime)}
#peak-app[data-surface=manager] .topbar-actions .icon-button{border-radius:10px}
#peak-app[data-surface=manager] .topbar-actions .icon-button:hover{background:var(--dm-subtle)}
#peak-app[data-surface=manager] .topbar-actions .connection{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin:0}

/* Preview tools form a separate utility row; the switch stays centered even with a long notice. */
#peak-app[data-surface=manager] .preview-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;height:44px;padding:0 20px;letter-spacing:.3px}
#peak-app[data-surface=manager] .preview-bar>span{grid-column:1;grid-row:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
#peak-app[data-surface=manager] .preview-switch{position:static;transform:none;grid-column:2;grid-row:1;justify-self:center;margin:0;padding:2px;gap:2px;background:transparent}
#peak-app[data-surface=manager] .preview-switch button{min-height:32px;padding:5px 12px;font-size:11px;line-height:1.2;color:var(--dm-muted)}
#peak-app[data-surface=manager] .preview-switch button[aria-pressed=true]{background:var(--dm-surface);color:var(--dm-text);box-shadow:0 1px 4px #0000000d}
#peak-app[data-surface=manager] .preview-role-switch{grid-column:3;grid-row:1;justify-self:end;display:flex;flex-direction:row;align-items:center;gap:6px;margin:0 48px 0 0;padding:0}
#peak-app[data-surface=manager] .preview-role-switch>span{display:none}
#peak-app[data-surface=manager] .preview-role-switch select{box-sizing:border-box;width:110px;min-width:110px;height:32px;min-height:32px;margin:0;padding:4px 8px;font-size:11px;line-height:1.2;border-color:var(--dm-line);background:var(--dm-surface);color:var(--dm-text)}
#peak-app[data-surface=manager] .preview-info{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;padding:0;margin:0;color:var(--dm-muted)}

@media(max-width:1100px){
 #peak-app[data-surface=manager] .topbar-actions .connection{display:none}
 #peak-app[data-surface=manager] .preview-caption{display:none}
}
@media(max-width:900px){#peak-app[data-surface=manager] .manager-sidebar{padding-top:52px}}
@media(max-width:600px){
 body[data-surface=manager].peak-business-preview{--preview-height:48px}
 #peak-app[data-surface=manager] .preview-bar{height:48px;padding:0 8px;grid-template-columns:minmax(0,1fr) auto 28px;gap:6px}
 #peak-app[data-surface=manager] .preview-bar>span{display:none}
 #peak-app[data-surface=manager] .preview-switch{grid-column:1;justify-self:start;min-width:0}
 #peak-app[data-surface=manager] .preview-switch button{padding:5px 6px;font-size:10px}
 #peak-app[data-surface=manager] .preview-role-switch{grid-column:2;margin:0}
 #peak-app[data-surface=manager] .preview-role-switch select{width:88px;min-width:88px;font-size:10px;padding:4px}
 #peak-app[data-surface=manager] .preview-info{width:28px}
 #peak-app[data-surface=manager] .manager-topbar{height:64px;min-height:64px;padding:0 12px;gap:8px}
 #peak-app[data-surface=manager] .manager-topbar>span{font-size:12px}
 #peak-app[data-surface=manager] .topbar-actions{gap:4px}

 #peak-app[data-surface=manager] .topbar-actions .avatar{display:none}
}
@media(max-width:380px){#peak-app[data-surface=manager] .preview-switch button{font-size:9px;padding-inline:4px}}