.header-actions .staff-portal-link{color:white;text-decoration:none;border:1px solid #ffffff60;border-radius:7px;padding:9px 12px;font-size:14px;line-height:1.4;text-align:center}
.header-actions .staff-portal-link:hover{background:#ffffff18}
.header-actions #connection,
body:has(#authView:not([hidden])) .header-actions #installBtn{display:none!important}
@media(max-width:760px){.header-actions .staff-portal-link{max-width:112px;padding:6px 8px;font-size:12px}}

/* Mobile workspace spacing; leave face dialogs and login controls intact. */
@media(max-width:760px){
  #appShell{width:100%;min-width:0;max-width:100%;margin-inline:auto}
  #appShell .main{min-width:0;padding:20px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));overflow-wrap:anywhere}
  #appShell .main>*{min-width:0;max-width:100%}
  #appShell .pagebar{flex-wrap:wrap;gap:12px}
  #appShell .controls{min-width:0;max-width:100%;flex-wrap:wrap}
  #appShell input,#appShell select,#appShell textarea{max-width:100%;font-size:16px}
  #appShell table{display:block;max-width:100%;overflow-x:auto}
  body:has(#appShell:not([hidden])) .topbar{height:auto;min-height:76px;flex-wrap:wrap;gap:12px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
  body:has(#appShell:not([hidden])) .header-actions{max-width:100%;flex-wrap:wrap}
}

/* Grouped desktop workspace navigation; business controls keep their own styles. */
@media(min-width:701px){
 #appShell .workspace-nav-group{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
 #appShell .workspace-nav-heading{margin:0 12px 5px;font-size:12px;line-height:1.5;font-weight:700;color:var(--ink);letter-spacing:.04em}
 #appShell #nav button{width:100%;min-height:34px;padding:6px 10px;line-height:1.45}
 #appShell #nav .glyph{flex:0 0 18px}
 #appShell #nav .nav-child{font-size:13px}
 #appShell .sidebar{padding-top:20px}
 #appShell .sidefoot{padding-top:20px}
 #appShell .pagebar>.controls{flex:0 0 auto;max-width:none;justify-content:flex-end;flex-wrap:nowrap}
 #appShell .pagebar>.controls input{width:190px}
}
@media(min-width:701px) and (max-width:960px){
 #appShell #nav{flex-wrap:wrap}
 #appShell .workspace-nav-group{flex:1 1 180px}
}

@media(min-width:701px){
 #appShell .workspace-nav-list,#appShell .workspace-nav-sublist{list-style:none;margin:0 0 0 14px;padding:0 0 0 8px;border-left:1px solid var(--line)}
 #appShell .workspace-nav-list>li,#appShell .workspace-nav-sublist>li{margin:0;padding:0;min-width:0}
 #appShell .workspace-nav-sublist{margin-left:16px;margin-top:2px;margin-bottom:3px}
 #appShell .workspace-nav-heading{font-size:13px;margin-bottom:7px}
 #appShell #nav button>span:last-child{min-width:0;overflow-wrap:normal}
}

@media(min-width:701px){
 #appShell details.workspace-nav-dropdown{display:block}
 #appShell .workspace-nav-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;min-height:40px;margin:0;padding:9px 12px;border-radius:7px;color:var(--ink)}
 #appShell .workspace-nav-dropdown>summary::-webkit-details-marker{display:none}
 #appShell .workspace-nav-dropdown>summary:hover{background:#f4f6f8}
 #appShell .workspace-nav-dropdown>summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
 #appShell .workspace-nav-dropdown[open]>summary{margin-bottom:6px}
 #appShell .workspace-nav-chevron{font-size:20px;line-height:1;transition:transform .15s}
 #appShell .workspace-nav-dropdown[open]>summary .workspace-nav-chevron{transform:rotate(90deg)}
 #appShell .workspace-nav-dropdown:not([open])>.workspace-nav-list{display:none}
}

/* Employee names share the same display format in active and inactive lists. */
#employeeRows > details.employee > summary > div:first-child > b{text-transform:uppercase}

/* Give desktop labels room without wrapping, and reveal tasks on demand. */
@media(min-width:761px){
 #appShell{grid-template-columns:244px minmax(0,1fr)}
}
@media(min-width:701px){
 #appShell #nav button>span:last-child{white-space:nowrap}
 #appShell .workspace-performance-dropdown>summary{display:flex;align-items:center;gap:9px;padding:6px 10px;min-height:34px;line-height:1.45;color:var(--muted);font-weight:550;list-style:none;cursor:pointer;border-radius:7px;white-space:nowrap}
 #appShell .workspace-performance-dropdown>summary::-webkit-details-marker{display:none}
 #appShell .workspace-performance-dropdown>summary:hover{background:#f4f6f8}
 #appShell .workspace-performance-dropdown>summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
 #appShell .workspace-performance-dropdown>summary .workspace-nav-chevron{margin-left:auto}
 #appShell .workspace-performance-dropdown[open]>summary .workspace-nav-chevron{transform:rotate(90deg)}
 #appShell .workspace-performance-dropdown:not([open])>.workspace-nav-sublist{display:none}
 #appShell .workspace-performance-dropdown:has(button.active)>summary{color:#8e1a29;background:#f9eced}
}

/* Offer letter management uses the existing HR card and dialog styles. */
@media(min-width:761px){#appShell{grid-template-columns:264px minmax(0,1fr)}}
.offer-letters .item-title{align-items:center;flex-wrap:wrap}
.offer-letters .item p{overflow-wrap:anywhere}
.offer-letter-form input[name="name"]{text-transform:uppercase}
.offer-letter-form textarea{min-height:84px}