/* Employee navigation: shared frames and controls for profile and department
   views. Admin navigation retains its own styling. */
.employee-home-mark{display:none}
@media screen {
 :is(#employeeScreen,#appScreen.employee-app-mode){--employee-control-height:44px;--employee-frame:rgba(255,255,255,.35);--employee-control-bg:rgba(255,255,255,.05)}
 :is(#employeeScreen,#appScreen.employee-app-mode) .employee-home-button{display:flex;align-items:center;justify-content:center;flex:none;height:var(--employee-control-height);min-height:var(--employee-control-height);margin:0;padding:6px 10px;border:1px solid var(--employee-frame);border-radius:10px;background:var(--employee-control-bg);color:#fff;cursor:pointer;box-shadow:none}
 :is(#employeeScreen,#appScreen.employee-app-mode) .employee-home-button picture{display:flex;align-items:center;justify-content:center}
 :is(#employeeScreen,#appScreen.employee-app-mode) .employee-home-button:focus-visible{outline:2px solid #00D9FF;outline-offset:3px}
 :is(#employeeScreen,#appScreen.employee-app-mode) .employee-home-button:hover{background:rgba(255,255,255,.16)}
 /* Selection header: one source for layout, frames and responsive sizing. */
 #employeeScreen .employee-stats-bar{position:relative;z-index:55;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;width:100%;min-width:0;margin:0 0 18px;padding:14px 16px;border:1px solid #315578;border-radius:18px;background:linear-gradient(110deg,#0A2E5B,#173F65);color:#EAF3FB;box-shadow:var(--ds-shadow-card)}
 #employeeScreen .employee-app-brand{grid-column:1;grid-row:1;display:flex;align-items:center}
 #employeeScreen .employee-home-button .employee-app-logo{width:132px;height:30px;object-fit:contain}
 #employeeScreen #showDepartmentPeople{grid-column:2;grid-row:1;justify-self:end;max-width:100%;min-width:0;text-align:right}
 #employeeScreen #statDepartment{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #employeeScreen .employee-stats-summary{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(74px,1fr));gap:8px;min-width:0}
 #employeeScreen .employee-selection-inline{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0}
 #employeeScreen :is(.employee-department-btn,.employee-kitchen-btn,.employee-person-trigger,.employee-stats-summary>span){box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:44px;height:44px;min-height:44px;margin:0;padding:8px 10px;border:1px solid var(--employee-frame);border-radius:10px;background:var(--employee-control-bg);color:#EAF3FB;font:inherit;font-size:13px;font-weight:650;line-height:1.2;white-space:nowrap;box-shadow:none;transform:none}
 #employeeScreen :is(.employee-department-btn,.employee-kitchen-btn,.employee-person-trigger){cursor:pointer}
 #employeeScreen :is(.employee-department-btn,.employee-kitchen-btn,.employee-person-trigger):hover,#employeeScreen .employee-person-picker.is-open .employee-person-trigger{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
 #employeeScreen :is(.employee-department-btn,.employee-kitchen-btn,.employee-person-trigger):focus-visible{outline:2px solid #00D9FF;outline-offset:3px}
 #employeeScreen .employee-person-picker{position:relative;z-index:45;flex:none;min-width:0}
 #employeeScreen .employee-person-trigger{width:100%}
 #employeeScreen .employee-selection-icon{display:block;flex:none;width:20px;font-size:18px;line-height:20px;text-align:center}
 #employeeScreen .employee-person-caret{font-size:14px;line-height:1}
 #employeeScreen .employee-person-picker.is-open .employee-person-caret{transform:rotate(180deg)}
 #employeeScreen .employee-selection-inline .theme-toggle{flex:0 0 44px;width:44px;padding:0}
 #employeeScreen .employee-selection-inline .theme-toggle-label{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .sidebar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;max-width:none;min-width:0;margin:0;padding:14px 16px;position:static;order:0;
  border:1px solid #315578;border-radius:18px;background:linear-gradient(110deg,#0A2E5B,#173F65);
  color:#fff;box-shadow:var(--ds-shadow-card)
 }
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #sidebarTitle{grid-column:1;grid-row:1;margin:0;padding:0;line-height:1}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #sidebarDepartmentName{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #userInfo{grid-column:2;grid-row:1;min-width:0;margin:0;padding:0}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-profile{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-identity{display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:5px 9px;border:1px solid var(--employee-frame);border-radius:10px;background:var(--employee-control-bg)}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-identity strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.3;color:#fff}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-profile-avatar{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #7A97B5;border-radius:10px;background:#315679;color:#fff;font-size:14px;font-weight:700}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-balance{display:flex;align-items:center;justify-content:center;height:44px;flex:none;padding:9px 10px;border:1px solid #4C8A81;border-radius:10px;background:#174C50;color:#BDF7DB;font-size:13px;font-weight:750;line-height:1.2;white-space:nowrap}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-balance.is-negative{border-color:#AA7E8D;background:#553747;color:#FFE1E5}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #backToEmployeesBtn{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-height:44px;width:auto;margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font-size:13px;line-height:1.2;white-space:nowrap;box-shadow:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:10px 0 0;border-top:1px solid #456582}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav :is(.navbtn,.employee-receipt-button,.employee-undo-button,.theme-toggle){display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;width:auto;min-width:44px;height:44px;min-height:44px;margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.05);color:#EAF3FB;font:inherit;font-size:13px;font-weight:650;line-height:1.2;white-space:nowrap;box-shadow:none;cursor:pointer;transform:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .employee-nav-icon{display:block;flex:none;width:20px;height:20px;font-size:18px;line-height:20px;text-align:center}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .navbtn.btn-primary{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6)}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .theme-toggle{flex:0 0 44px;width:44px;padding:0}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .theme-toggle-label{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .employee-undo-button{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .employee-undo-button.is-active{display:flex;flex:0 0 auto;background:#785014;border-color:#CBA65D;color:#fff}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .employee-undo-button.is-processing{opacity:.7;cursor:wait}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) :is(#employeeNav button,#backToEmployeesBtn):hover:not(:disabled){background:rgba(255,255,255,.2);color:#fff}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) :is(#employeeNav button,#backToEmployeesBtn):focus-visible{outline:2px solid #00D9FF;outline-offset:3px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-meals{grid-column:auto}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-category-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
 /* Department views use the same control dimensions as the personal menu. */
 #appScreen.employee-app-mode .employee-focus-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;width:100%;min-width:0;margin:0 0 18px;padding:14px 16px;border:1px solid #315578;border-radius:18px;background:linear-gradient(110deg,#0A2E5B,#173F65);color:#fff;box-shadow:var(--ds-shadow-card)}
 #appScreen.employee-app-mode .employee-focus-toolbar .employee-home-button img{display:block;width:132px;height:30px;object-fit:contain}
 #appScreen.employee-app-mode .employee-focus-department{display:flex;align-items:center;min-width:0;height:44px;padding:5px 10px;border:1px solid var(--employee-frame);border-radius:10px;background:var(--employee-control-bg);font-size:14px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
 #appScreen.employee-app-mode .employee-focus-title{display:flex;align-items:center;gap:8px;min-width:0}
 #appScreen.employee-app-mode .employee-focus-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.1);font-size:20px}
 #appScreen.employee-app-mode .employee-focus-title>div{min-width:0}
 #appScreen.employee-app-mode .employee-focus-title strong{display:block;color:#fff;font-size:14px;font-weight:750;line-height:1.3;overflow-wrap:anywhere}
 #appScreen.employee-app-mode .employee-focus-title small{display:block;color:#C8D9E9;font-size:11px;font-weight:500;line-height:1.4;margin:2px 0 0}
 #appScreen.employee-app-mode .employee-focus-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:10px 0 0;border-top:1px solid #456582}
 #appScreen.employee-app-mode .employee-focus-actions :is(.employee-focus-button,.theme-toggle){display:flex;align-items:center;justify-content:center;gap:8px;flex:0 1 auto;width:auto;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--employee-frame);border-radius:10px;background:var(--employee-control-bg);color:#EAF3FB;font:inherit;font-size:13px;font-weight:650;line-height:1.2;white-space:nowrap;box-shadow:none;cursor:pointer;transform:none}
 #appScreen.employee-app-mode .employee-focus-actions .theme-toggle{flex:0 0 44px;width:44px;padding:0}
 #appScreen.employee-app-mode .employee-focus-actions .theme-toggle-label{display:none}
 #appScreen.employee-app-mode .employee-focus-action-icon{display:block;width:20px;flex:none;font-size:18px;line-height:20px;text-align:center}
 #appScreen.employee-app-mode .employee-focus-actions button:hover{background:rgba(255,255,255,.2)}
 #appScreen.employee-app-mode .employee-focus-actions button:focus-visible{outline:2px solid #00D9FF;outline-offset:3px}
}
@media screen and (max-width:1099px){
 #employeeScreen .employee-selection-inline :is(.employee-selection-text,#personSelectionLabel,.employee-person-caret){display:none}
 #employeeScreen .employee-selection-inline :is(.employee-kitchen-btn,.employee-person-trigger){width:44px;padding:0}
 #employeeScreen .employee-stats-summary{grid-template-columns:repeat(3,minmax(64px,1fr));gap:6px}
 #employeeScreen .employee-stats-summary>span{font-size:0;padding:6px}
 #employeeScreen .employee-stats-summary>span::before{content:attr(data-mobile-summary);font-size:13px;line-height:1.2}
}
@media screen and (max-width:767px){
 /* Keep the existing viewport-contained person menu anchored to the header. */
 #employeeScreen .employee-person-picker{position:static}
}
@media screen and (min-width:700px) and (max-width:999px){
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-meals{grid-column:1/-1}
}
@media screen and (min-width:600px) and (max-width:1099px){
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:699px){
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-quick-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:599px){
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .shop-category-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (min-width:1440px){
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .sidebar{grid-template-columns:auto auto minmax(180px,1fr) auto;gap:16px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #backToEmployeesBtn{grid-column:2}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #userInfo{grid-column:3}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav{grid-column:4;grid-row:1;padding:0;border:0}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav :is(.navbtn,.employee-receipt-button){flex:0 0 110px;width:110px}
}
@media screen and (max-width:599px){
 #employeeScreen .employee-stats-bar{grid-template-columns:44px minmax(0,1fr);gap:10px 6px;padding:10px;border-radius:16px}
 #employeeScreen #showDepartmentPeople{width:100%}
 #employeeScreen .employee-stats-summary{display:none}
 #employeeScreen .employee-selection-inline{grid-column:1/-1;grid-row:2;gap:6px;padding-top:8px;border-top:1px solid #456582}
 #employeeScreen .employee-selection-inline> :is(.employee-person-picker,.employee-kitchen-btn){flex:1 1 0;min-width:44px}
 #employeeScreen .employee-selection-inline :is(.employee-kitchen-btn,.employee-person-trigger){width:100%}
 #employeeScreen #returnToDepartmentBtn{order:2;flex-basis:100%}
 #employeeScreen #returnToDepartmentBtn .employee-selection-text{display:inline}
 #appScreen.employee-app-mode .employee-focus-toolbar{grid-template-columns:44px minmax(0,1fr);gap:10px 6px;padding:10px;border-radius:16px}
 #appScreen.employee-app-mode .employee-focus-toolbar .employee-home-button img{width:30px;height:30px}
 #appScreen.employee-app-mode .employee-focus-title{grid-column:1/-1}
 #appScreen.employee-app-mode .employee-focus-actions{justify-content:flex-start;gap:6px;padding-top:8px}
 #appScreen.employee-app-mode .employee-focus-actions .employee-focus-button{flex:1 1 0;min-width:44px;padding:0}
 #appScreen.employee-app-mode .employee-focus-action-label{display:none}
 #appScreen.employee-app-mode .employee-focus-actions .theme-toggle{flex:1 1 0;width:auto}
 :is(#employeeScreen,#appScreen.employee-app-mode) .employee-home-button{width:44px;padding:6px}
 #employeeScreen .employee-home-button .employee-app-logo,#appScreen.employee-app-mode #sidebarTitle .employee-home-button .sidebar-app-logo{width:30px;height:30px;max-height:30px;object-fit:contain}
 #appScreen.employee-app-mode #sidebarTitle .employee-home-button .sidebar-app-logo{display:none}
 #appScreen.employee-app-mode #sidebarTitle .employee-home-mark{display:block;width:30px;height:30px;object-fit:contain}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .sidebar{grid-template-columns:44px minmax(0,1fr) auto 44px;gap:10px 6px;padding:10px;border-radius:16px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #sidebarTitle{display:block;grid-column:1;grid-row:1}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #userInfo,
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-profile{display:contents}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-identity{grid-column:2;grid-row:1;gap:6px;padding:5px 7px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-identity strong{font-size:13px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-profile-avatar{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) .employee-sidebar-balance{grid-column:3;grid-row:1;font-size:12px;padding:8px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #backToEmployeesBtn{grid-column:4;width:44px;padding:0;font-size:20px;align-self:center}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #backToEmployeesBtn .employee-selection-label{display:none}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding-top:8px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav :is(.navbtn,.employee-receipt-button){flex-direction:column;gap:5px;min-width:0;height:54px;min-height:54px;padding:5px 2px;font-size:11px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .theme-toggle{grid-column:5;grid-row:1;width:100%;min-width:0;height:54px}
 #appScreen.employee-app-mode:not(.breakfast-focus-mode) #employeeNav .employee-undo-button.is-active{grid-column:1/-1;grid-row:2;min-height:44px;padding:8px}
}