/* Desktop navigation: the director menu scrolls independently when it is taller than the viewport. */
@media(min-width:821px){
  .director-v05-mode aside{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;max-height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#485258 transparent}
  .director-v05-mode aside::-webkit-scrollbar{width:7px}
  .director-v05-mode aside::-webkit-scrollbar-thumb{border-radius:8px;background:#485258}
  .director-v05-mode aside>div{flex:0 0 auto;min-height:max-content}
  .director-v05-mode aside nav{overflow:visible;padding-bottom:8px}
  .director-v05-mode aside .logout{flex:0 0 auto;margin-top:20px}

  /* Production actions use the full width of a workstation screen. */
  .employee-dashboard{max-width:1560px}
  .employee-production .employee-form{grid-template-columns:minmax(150px,.7fr) minmax(220px,1.1fr) minmax(190px,.85fr) minmax(220px,1fr) auto;align-items:end}
  .employee-production .employee-form>#employeeLayoutWrap{grid-column:1/-1}
  .employee-layout-wrap{display:block;overflow-x:auto;padding:1px 1px 5px}
  .employee-layout-controls{display:grid;grid-template-columns:minmax(280px,1.5fr) 110px minmax(155px,auto) minmax(155px,auto) minmax(155px,auto);align-items:end;gap:8px;min-width:900px;padding:10px}
  .employee-operation-field{display:grid;gap:5px;min-width:0;color:#738088;font-size:9px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
  .employee-layout-controls button,.employee-layout-controls button:first-of-type{grid-column:auto;min-height:40px;white-space:nowrap}
  .employee-layout-controls button:first-of-type{background:#2f7d8f;color:#fff}
  .employee-layout-stats{grid-template-columns:repeat(4,minmax(155px,1fr));margin-top:8px;max-height:220px}

  .bending-workspace{display:flex;flex-direction:column;gap:9px}
  .bending-queue-list{grid-template-columns:repeat(4,minmax(0,1fr));max-height:180px}
  .bending-actions{display:flex;align-items:flex-end;gap:8px;overflow-x:auto;padding:10px;scrollbar-width:thin}
  .bending-actions label{flex:1 1 230px;min-width:200px}
  .bending-actions label:nth-of-type(2){flex:0 0 105px;min-width:105px}
  .bending-actions label:nth-of-type(3),.bending-actions label:nth-of-type(4){grid-column:auto;flex:1 1 220px;min-width:185px}
  .bending-actions button,.bending-actions .bending-complete,.bending-actions .bending-defect{grid-column:auto;flex:0 0 auto;min-width:155px;min-height:40px;white-space:nowrap}
  .bending-actions .bending-complete{order:4}
  .bending-actions .bending-defect{order:6}
  .bending-actions label:nth-last-of-type(1){order:5}

  .packing-actions{display:grid;grid-template-columns:minmax(260px,1fr) 105px minmax(320px,1.35fr) auto;align-items:end;overflow:visible}
  .packing-actions>*{order:initial!important}
  .packing-actions label,.packing-actions label:first-child,.packing-actions label:nth-of-type(2){grid-column:auto;min-width:0}
  .packing-actions label:first-child{grid-column:1}
  .packing-actions label:nth-of-type(2){grid-column:2}
  .packing-actions .packing-kit-details{grid-column:3;margin:0}
  .packing-actions .bending-complete{grid-column:4;min-width:190px}

  .multirole-card .employee-form{grid-template-columns:minmax(180px,1fr) 86px auto;align-items:stretch}
  .multirole-card[data-operation="painting"] .employee-form{grid-template-columns:minmax(170px,1fr) 82px minmax(180px,1fr) auto}
  .multirole-card .employee-form button{white-space:nowrap}
}

@media(min-width:821px) and (max-width:1180px){
  .multirole-workspace{grid-template-columns:1fr}
  .employee-layout-stats{grid-template-columns:repeat(3,minmax(150px,1fr))}
  .bending-queue-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:820px){
  .employee-operation-field{display:grid;gap:5px;color:#738088;font-size:9px;font-weight:750;text-transform:uppercase}
}