/* Keep navigation and workday as one responsive group, with no auto-margin gap. */
@media screen {
  #appView .topbar{justify-content:flex-start;gap:10px;}
  #appView .topbar .header-work-controls{display:flex;align-items:stretch;gap:8px;flex:0 1 auto;min-width:0;padding:5px;border:1px solid #a6bfd3;border-radius:15px;background:#edf4fb;}
  #appView .topbar .header-work-controls .global-command-trigger{flex:0 1 175px;min-width:145px;max-width:190px;margin:0;border:1.5px solid #7ba5c5;background:#fff;justify-content:flex-start;}
  #appView .topbar .header-work-controls .workday-indicator{flex:0 1 auto;min-width:175px;max-width:245px;margin:0;border:1.5px solid #c99a40;background:#fff8e9;}
  #appView .topbar .header-work-controls .workday-indicator.active{border-color:#289b82;background:#e9faf4;}
  #appView .topbar .header-work-controls .workday-indicator.closed{border-color:#93a8b9;background:#f4f7fa;}
  #appView .topbar .header-work-controls b{display:block;white-space:normal;overflow:visible;text-overflow:clip;}
  #appView .topbar .header-work-controls .global-command-trigger>span:not(.global-command-trigger-icon){display:block;}
  #appView .topbar .quick-actions-button{border:1.5px solid #154e7c;box-shadow:0 3px 8px #164e781a;}
  #appView .topbar .user-menu{margin-left:0;}
  #appView .topbar button:focus-visible{outline:3px solid #2475b4;outline-offset:3px;}
  #appView .topbar .header-work-controls button:hover{box-shadow:0 2px 8px #235b8120;filter:brightness(.98);}
}

/* Purpose-led controls: shared rhythm, distinct visual identities. */
@media screen {
 #appView .topbar .header-work-controls .global-command-trigger{background:#fff;border-color:#6498ce;color:#174d86;border-radius:10px;min-width:170px}
 #appView .topbar .header-work-controls .workday-indicator{background:#16715b;border-color:#125c4b;color:#fff;border-radius:12px;max-width:285px}
 #appView .topbar .header-work-controls .workday-indicator.active{background:#e5f7ed;border-color:#278653;color:#155c36}
 #appView .topbar .header-work-controls .workday-indicator.closed{background:#f1f5f9;border-color:#9aaabb;color:#42566c}
 #appView .topbar .workday-indicator small{color:inherit;opacity:.85}
 #appView .topbar .workday-control-icon{border-radius:50%;background:#ffffff24;border-color:#ffffff66;color:inherit}
 #appView .topbar .quick-actions-button{background:#f2edfc;border-color:#9c80ce;color:#603a93;border-radius:16px;min-width:145px}
 #appView .topbar #refreshBtn{background:#fff;border-color:#afbbc8;color:#506176;box-shadow:none;border-radius:10px;min-width:72px}
 #appView .topbar #refreshBtn>span:first-child{color:inherit}
 #appView .topbar #chatBtn{background:#e9f8f7;border-color:#64aaa6;color:#166963;border-radius:14px}
 #appView .topbar #chatBtn svg{color:inherit}
 #appView .topbar #notificationBtn{background:#fff8e9;border-color:#d6ad59;color:#80520c;border-radius:14px}
 #appView .topbar #notificationBtn svg{color:inherit}
 #appView .topbar .user-chip{background:#fff;border-color:#9daec1;border-radius:28px;min-width:180px}
 #appView .topbar .user-chip .avatar{background:#e9eef6;border-radius:50%;color:#425675;border-color:#b1bfd2}
 #appView .topbar .user-menu-chevron{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eef2f7;color:#425675}
 #appView .topbar #globalCommandBtn svg,#appView .topbar #quickActionsBtn svg,#appView .topbar #refreshBtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 #appView .topbar .quick-actions-button b{display:block;white-space:nowrap}
 #appView .topbar :is(#globalCommandBtn,#workdayIndicator,#quickActionsBtn,#refreshBtn,#chatBtn,#notificationBtn,#userMenuButton){transition:box-shadow .15s,border-color .15s;min-height:58px}
 #appView .topbar :is(#globalCommandBtn,#workdayIndicator,#quickActionsBtn,#refreshBtn,#chatBtn,#notificationBtn,#userMenuButton):hover{box-shadow:0 3px 10px #25456726;filter:brightness(.98)}
 #appView .topbar :is(#globalCommandBtn,#workdayIndicator,#quickActionsBtn,#refreshBtn,#chatBtn,#notificationBtn,#userMenuButton):focus-visible{outline:3px solid #2873b4;outline-offset:3px}
}
@media screen and (max-width:980px){
 #appView .topbar .header-work-controls .global-command-trigger,#appView .topbar .header-work-controls .workday-indicator{min-width:0;max-width:none}
 #appView .topbar .header-work-controls .global-command-trigger-icon,#appView .topbar .header-work-controls .workday-control-icon{display:grid}
 #appView .topbar .quick-actions-button{width:auto;height:auto;min-width:140px}
}
@media screen and (max-width:480px){
 #appView .topbar{gap:8px}
 #appView .topbar .header-work-controls{gap:8px}
 #appView .topbar .header-work-controls button{gap:6px;padding:8px}
 #appView .topbar .header-work-controls .global-command-trigger-icon,#appView .topbar .header-work-controls .workday-control-icon{width:26px;height:26px;flex-basis:26px}
 #appView .topbar .user-menu{flex:1 1 100%}
 #appView .topbar .user-chip{width:100%;max-width:none;justify-content:flex-start}
 #appView .topbar .user-menu-chevron{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){#appView .topbar button{transition:none}}
.operations-shortcuts{margin-bottom:18px;border:1.5px solid #adc7dc;background:linear-gradient(120deg,#f4f9ff,#fff);}
.operations-shortcuts h3{color:#163e5c;margin:0;}
.operations-shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;}
.operations-shortcut-grid button{display:flex;align-items:center;gap:12px;padding:14px;text-align:left;border:1px solid #adc7dc;border-radius:11px;background:#fff;color:#193f5c;min-width:0;}
.operations-shortcut-grid button>span:nth-child(2){flex:1;min-width:0;}
.operations-shortcut-grid b,.operations-shortcut-grid small{display:block;white-space:normal;}
.operations-shortcut-grid small{margin-top:4px;color:#536d80;font-size:12px;}
.operations-shortcut-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid #b7d2e6;border-radius:9px;background:#eaf4fc;font-weight:800;font-size:12px;}
.operations-shortcut-grid button:hover{border-color:#377fb4;background:#f0f7ff;}
.operations-shortcut-grid button:focus-visible{outline:3px solid #2475b4;outline-offset:2px;}
@media screen and (max-width:980px){
  #appView .topbar .header-work-controls{flex:1 1 100%;}
  #appView .topbar .header-work-controls .global-command-trigger,#appView .topbar .header-work-controls .workday-indicator{flex:1 1 0;min-width:0;max-width:none;width:auto;height:auto;min-height:48px;}
  #appView .topbar .header-work-controls .workday-indicator>span:not(.workday-control-icon){display:block;min-width:0;}
  #appView .topbar .header-work-controls .global-command-trigger kbd{display:none;}
  #appView .topbar .header-work-controls b{font-size:12px;}
  #appView .topbar .header-work-controls .workday-control-icon,#appView .topbar .header-work-controls .global-command-trigger-icon{display:none;}
  #appView .topbar .header-work-controls button{padding:8px 10px;}
}
@media(max-width:480px){.operations-shortcut-grid{grid-template-columns:1fr}.operations-shortcut-grid button{padding:12px}}

/* Coordinated workspace header: labelled controls and prominent section outlines. */
@media screen {
  #appView .topbar{flex-wrap:wrap;justify-content:flex-end;gap:10px}
  #appView .topbar .thought-of-day{display:grid;flex:1 1 100%;width:100%;background:#fff;grid-template-columns:max-content max-content 1fr;grid-template-areas:"label author ." "quote quote quote";gap:6px 12px;border:2px solid #8baec8;border-left:4px solid #d42b40;padding:12px 16px}
  #appView .topbar .thought-of-day .thought-label{grid-area:label;color:#c51f36;font-weight:900}
  #appView .topbar .thought-of-day cite{grid-area:author;display:block;justify-self:start;margin:0;border:0;padding:0;color:#176a68}
  #appView .topbar .thought-of-day q{grid-area:quote;white-space:normal;overflow:visible}
  #appView .topbar .header-work-controls{padding:0;border:0;background:transparent;gap:10px}
  #appView .topbar .header-work-controls .global-command-trigger,
  #appView .topbar .header-work-controls .workday-indicator,
  #appView .topbar .quick-actions-button{display:flex;align-items:center;gap:10px;min-height:58px;height:auto;padding:10px 14px;border:2px solid #8baaca;border-radius:12px;background:#f0f5fc;color:#21486d;box-shadow:0 3px 9px #21486d12;font-size:13px}
  #appView .topbar .header-work-controls .workday-indicator{border-color:#89afa4;background:#eef7f3;color:#246356}
  #appView .topbar .quick-actions-button{border-color:#a396c8;background:#f4f1fb;color:#58457d}
  #appView .topbar .global-command-trigger-icon,
  #appView .topbar .workday-control-icon,
  #appView .topbar .quick-actions-button>span:first-child{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid currentColor;border-radius:9px;background:#ffffffb3;color:inherit;font-size:21px}
  #appView .topbar #refreshBtn,#appView .topbar #chatBtn,#appView .topbar #notificationBtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:auto;min-width:88px;height:58px;padding:6px 12px;border:2px solid #a0b8cd;border-radius:12px;background:#f3f7fc;color:#295676;box-shadow:0 3px 9px #21486d12}
  #appView .topbar .header-button-label{display:block;font-size:11px;line-height:1.2;white-space:nowrap}
  #appView .topbar #refreshBtn>span:first-child{font-size:22px;line-height:1}
  #appView .topbar #chatBtn svg,#appView .topbar #notificationBtn svg{width:22px;height:22px}
  #appView .hr-hero,#appView .page-hero,#appView .crm-hero,#appView .hero{border:2px solid #86acc5;border-left:5px solid #17877f;box-shadow:0 4px 14px #163e5c12}
}
@media(max-width:600px){
  #appView .topbar .thought-of-day{grid-template-columns:max-content 1fr;grid-template-areas:"label author" "quote quote";padding:10px;column-gap:8px}
  #appView .topbar .thought-of-day .thought-label{letter-spacing:.04em}
  #appView .topbar #refreshBtn,#appView .topbar #chatBtn,#appView .topbar #notificationBtn{min-width:76px;flex:1 1 76px;padding:6px}
}

/* Matching control surfaces; colour is reserved for the individual icons. */
@media screen{
  #appView .topbar .user-menu{flex:0 1 auto;min-width:0;margin:0}
  #appView .topbar .user-chip{display:flex;align-items:center;gap:10px;min-height:58px;height:auto;min-width:190px;max-width:250px;padding:8px 12px;border:2px solid #a0b8cd;border-radius:12px;background:#f3f7fc;box-shadow:0 3px 9px #21486d12;color:#21486d}
  #appView .topbar .user-chip .avatar{width:34px;height:34px;border:1px solid #a6c3dd;border-radius:9px;background:#e5f0fc;color:#2164a3;box-shadow:none}
  #appView .topbar .user-meta b{color:#21486d}
  #appView .topbar .global-command-trigger-icon{color:#2563b0;background:#eaf2ff;border-color:#9abbe3}
  #appView .topbar .workday-control-icon{color:#12816f;background:#e5f7f2;border-color:#8cccbc}
  #appView .topbar .quick-actions-button>span:first-child{color:#7550b0;background:#f0eafb;border-color:#bba6db}
  #appView .topbar #refreshBtn>span:first-child{color:#138195}
  #appView .topbar #chatBtn svg{color:#3267c2;stroke:currentColor}
  #appView .topbar #notificationBtn svg{color:#bd7218;stroke:currentColor}
  #appView .topbar .user-chip:hover{border-color:#638db2;background:#edf4fc}
}
@media screen and (min-width:981px){
  #appView .topbar .header-work-controls{flex:0 1 auto;margin-left:0}
}
@media screen and (max-width:600px){
  #appView .topbar .user-chip{min-width:76px;max-width:100%;justify-content:center}
}