#workspace-context-bar{margin:8px 0 12px;background:var(--panel,#fff);border:1px solid var(--line,#d6e0ee);border-radius:12px;padding:8px 11px;color:var(--txt,#20344d);font-size:13px;line-height:1.4}
.wh-context-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.wh-company-select,.wh-domain-select{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;flex-shrink:0}
.wh-company-select>span{color:var(--dim,#65758d)}
.wh-domain-select>span{color:var(--dim,#65758d)}
.wh-company-select select,.wh-domain-select select{max-width:220px;min-width:125px;padding:5px 26px 5px 9px;font:inherit;font-size:12px;border:1px solid var(--line,#d6e0ee);border-radius:8px;color:var(--txt,#20344d);background:var(--surface1,#fff)}
.wh-company-select select:disabled{opacity:1;cursor:default;color:var(--txt,#20344d)}
.wh-company-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;min-width:0}
.wh-company-chips>span{color:var(--dim,#65758d);font-weight:600;margin-right:4px}
.wh-company-chips button{padding:4px 12px;border:1px solid var(--line,#d6e0ee);border-radius:999px;background:var(--surface1,#f5f7fa);color:var(--txt,#20344d);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.wh-company-chips button:hover{border-color:var(--acc,#245fa9)}
.wh-company-chips button.on{background:var(--acc,#245fa9);border-color:var(--acc,#245fa9);color:#fff;font-weight:600}
/* Business pages: the company that opens this system is lit, others that also have it are tinted
   ("also here, click to switch"), companies without it go quiet. Under 全部 the company that 全部
   opens (data-serves) is lit too. Mapping: 货代 = Shipthis, 租赁 / 维修 = rental, 采购与销售 = procurement or trade. */
main:is(:has(#freightview:not(.hidden)),:has(#rentalview:not(.hidden)),:has(#repairview:not(.hidden)),:has(#procurementview:not(.hidden))) .wh-company-chips button[data-wh-company]:not(.on){opacity:.5}
main:has(#freightview:not(.hidden)) .wh-company-chips button[data-systems~="operations.shipthis"]:not(.on),
main:is(:has(#rentalview:not(.hidden)),:has(#repairview:not(.hidden))) .wh-company-chips button[data-systems~="operations.rental"]:not(.on),
main:has(#procurementview:not(.hidden)) .wh-company-chips button:is([data-systems~="operations.procurement"],[data-systems~="operations.trade"]):not(.on){
  opacity:1;border-color:color-mix(in srgb,var(--acc,#245fa9) 45%,var(--line,#d6e0ee));background:color-mix(in srgb,var(--acc,#245fa9) 9%,var(--surface1,#fff));color:var(--acc,#245fa9)}
main:has(#freightview:not(.hidden)) .wh-company-chips:has(button[data-wh-company="all"].on) button[data-serves~="operations.shipthis"],
main:is(:has(#rentalview:not(.hidden)),:has(#repairview:not(.hidden))) .wh-company-chips:has(button[data-wh-company="all"].on) button[data-serves~="operations.rental"],
main:has(#procurementview:not(.hidden)) .wh-company-chips:has(button[data-wh-company="all"].on) button:is([data-serves~="operations.procurement"],[data-serves~="operations.trade"]){
  opacity:1;background:var(--acc,#245fa9);border-color:var(--acc,#245fa9);color:#fff;font-weight:600}
main:is(:has(#freightview:not(.hidden)),:has(#rentalview:not(.hidden)),:has(#repairview:not(.hidden)),:has(#procurementview:not(.hidden))) .wh-company-chips button[data-wh-company="all"].on{
  background:var(--surface1,#fff);color:var(--acc,#245fa9);box-shadow:inset 0 0 0 1px var(--acc,#245fa9)}
/* The phone dropdown; the chips stay the control on wider screens. */
.wh-company-picker{display:none;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--dim,#65758d)}
.wh-company-picker select{flex:1;min-width:0;min-height:40px;padding:0 32px 0 12px;border:1px solid var(--line,#d6e0ee);border-radius:10px;background-color:var(--surface1,#fff);color:var(--txt,#20344d);font:inherit;font-size:15px;font-weight:600}
@media(max-width:600px){
  #workspace-context-bar .wh-company-chips{display:none}
  #workspace-context-bar .wh-context-main{display:flex}
  #workspace-context-bar .wh-company-picker{display:flex;flex:1 1 100%;width:100%;grid-column:1/-1}
  #workspace-context-bar .wh-scope-note{display:none}
}
.wh-company-chips button:focus-visible{outline:2px solid var(--acc,#245fa9);outline-offset:2px}
.wh-system-access{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;font-size:13px}
.wh-system-link,.wh-system-pending{border-radius:7px;padding:4px 9px;text-decoration:none;white-space:nowrap}
.wh-system-link{color:var(--acc,#245fa9);background:var(--active,#eaf1fc);border:1px solid var(--line,#c9d9ef)}
.wh-system-pending{color:var(--dim,#65758d);background:var(--surface1,#f5f7fa);border:1px solid var(--line,#dde5ef)}
.wh-scope-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;color:var(--dim,#65758d);font-size:12px}
.wh-scope-badge{display:inline-flex;align-items:center;white-space:nowrap;color:#856020;background:#fff5dd;border:1px solid #ebd9b4;border-radius:5px;padding:1px 6px;font-size:12px;font-weight:600}
.wh-scope-badge.connected{color:#267158;background:#ebf8f2;border-color:#cce9dc}
.wh-context-loading,.wh-context-error{font-size:14px;color:var(--dim,#65758d)}
.wh-context-error{color:#a13a3a}
#workspace-mail-sidebar{font-size:14px;line-height:1.5;color:var(--txt,#20344d)}
.wh-sidebar-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.wh-sidebar-heading strong{font-size:16px}
.wh-sidebar-heading>span{font-size:13px;color:var(--dim,#65758d)}
.wh-mailbox-block{margin-bottom:13px;padding:9px 10px 10px;border:1px solid var(--line,#dce5f0);border-radius:11px;background:linear-gradient(135deg,var(--surface1,#fff),color-mix(in srgb,var(--active,#eaf1fc) 36%,var(--surface1,#fff)))}
.wh-mailbox-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px}
/* The sidebar is narrow: the select gets the whole width and 管理 sits on the label line (English was cut to "My"). */
.wh-mailbox-picker{grid-template-columns:minmax(0,1fr);position:relative}
.wh-mailbox-picker>button{position:absolute;top:-3px;right:0;height:auto!important;padding:2px 6px!important;border:0!important;background:transparent!important}
.wh-mailbox-picker label>span{padding-right:64px}
.wh-mailbox-stats span{overflow:hidden;text-overflow:ellipsis}
.wh-mailbox-picker label{display:grid;gap:4px;min-width:0}.wh-mailbox-picker label>span{color:var(--dim,#65758d);font-size:11px;font-weight:650}.wh-mailbox-picker select{width:100%;min-width:0;padding:7px 28px 7px 9px;border:1px solid var(--line,#cddbea);border-radius:8px;background:var(--surface1,#fff);color:var(--txt,#20344d);font:inherit;font-size:12px;font-weight:650}.wh-mailbox-picker select:disabled{opacity:1;cursor:default}.wh-mailbox-picker>button{height:34px;padding:0 8px;border:1px solid var(--line,#cddbea);border-radius:8px;background:var(--surface1,#fff);color:var(--acc,#245fa9);font-size:11px}.wh-manage-mailboxes{padding:4px 7px;border:0;background:transparent;color:var(--acc,#245fa9);font-size:11px;width:100%;margin-top:6px;text-align:left}
.wh-mailbox-summary{margin-top:9px;padding-top:9px;border-top:1px solid var(--line,#dce5f0)}
.wh-mailbox-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}.wh-mailbox-summary-head>div{display:grid;gap:2px;min-width:0}.wh-mailbox-summary-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.wh-mailbox-summary-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim,#65758d);font-size:10px}.wh-mailbox-summary-head em{flex-shrink:0;padding:2px 6px;border:1px solid var(--line,#dce5f0);border-radius:999px;background:var(--surface1,#fff);color:var(--dim,#65758d);font-size:10px;font-style:normal;font-weight:650}.wh-mailbox-summary-head em.connected{color:#267158;background:#ebf8f2;border-color:#cce9dc}.wh-mailbox-summary-head em.error{color:#a13a3a;background:#fff0f1;border-color:#efd0d3}.wh-mailbox-summary-head em.disabled{color:#6f7580;background:#f2f3f5;border-color:#dfe2e7}.wh-mailbox-summary-head em.pending,.wh-mailbox-summary-head em.unknown{color:#856020;background:#fff5dd;border-color:#ebd9b4}
.wh-mailbox-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(45px,1fr));gap:4px;margin-top:8px}.wh-mailbox-stats span{display:grid;place-items:center;gap:1px;min-width:0;padding:5px 2px;border-radius:7px;background:color-mix(in srgb,var(--surface1,#fff) 72%,transparent);color:var(--dim,#65758d);font-size:9px;white-space:nowrap}.wh-mailbox-stats b{color:var(--txt,#20344d);font-size:13px;font-variant-numeric:tabular-nums}.wh-mailbox-stats span:nth-child(3) b,.wh-mailbox-stats span:nth-child(4) b{color:var(--acc,#245fa9)}
/* English labels ("Awaiting reply", "Unclaimed") are wider than the Chinese ones: one row each, label then count. */
html:not([lang="zh"]) .wh-mailbox-stats{grid-template-columns:minmax(0,1fr);gap:3px}html:not([lang="zh"]) .wh-mailbox-stats span{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:6px;padding:3px 7px;white-space:nowrap;text-align:left}
/* The mailbox address under the name wraps instead of ending in "My m…"; the status sits on its own line. */
html:not([lang="zh"]) .wh-mailbox-summary-head{flex-wrap:wrap}html:not([lang="zh"]) .wh-mailbox-summary-head span{white-space:normal;overflow-wrap:anywhere}
.wh-filter-list{display:flex;flex-direction:column;gap:5px}
.wh-filter-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line,#dce5f0);border-radius:9px;background:var(--surface1,#fff);color:var(--txt,#30455f);font-size:14px;text-align:left;line-height:1.4}
.wh-filter-list button>b{font-size:12px;color:var(--dim,#65758d);font-variant-numeric:tabular-nums;font-weight:600}
.wh-filter-list button.on{background:var(--active,#eaf1fc);color:var(--acc,#245fa9);border-color:var(--acc,#8bace0);font-weight:650}
.wh-filter-list button.on>b{color:inherit}
.wh-sidebar-section{border-top:1px solid var(--line,#dce5f0);margin-top:14px;padding-top:12px}
.wh-sidebar-section>summary,.wh-task-templates>summary{cursor:pointer;font-size:14px;font-weight:650;list-style-position:inside;color:var(--txt,#30455f)}
.wh-sidebar-section[open]>summary{margin-bottom:10px}
.wh-small-note{font-size:12px;line-height:1.6;color:var(--dim,#65758d);margin:12px 0 0}
.wh-template-list{display:flex;flex-direction:column;gap:6px}
.wh-template-list button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:8px 10px;border:1px solid var(--line,#dce5f0);border-radius:8px;text-align:left;color:var(--txt,#30455f);background:var(--surface1,#fff);font-size:14px;line-height:1.5}
.wh-template-list button small{font-size:12px;color:var(--dim,#65758d);font-weight:400}
.wh-task-context{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:8px 0 12px;font-size:13px;color:var(--dim,#65758d)}
.wh-task-templates{max-width:420px;flex-shrink:0}
.wh-task-templates[open]{padding:10px;border:1px solid var(--line,#dce5f0);border-radius:10px;background:var(--panel,#fff)}
.wh-task-templates[open]>summary{margin-bottom:10px}
.wh-assignment-button{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 9px;border:1px solid var(--line,#ccd9e9);border-radius:7px;font-size:12px;line-height:1.5;background:var(--surface1,#f8faff);color:var(--acc,#245fa9);text-align:left}
.wh-assignment-button span{opacity:.8}
.wh-assignment-dialog{z-index:16000;width:min(440px,calc(100vw - 32px));box-sizing:border-box;max-height:calc(100dvh - 40px);overflow:auto;margin:auto;border:1px solid var(--line,#d6e0ee);border-radius:16px;padding:22px;background:var(--panel,#fff);color:var(--txt,#20344d);box-shadow:0 16px 70px #1834502b;font-size:14px;line-height:1.6}
.wh-assignment-dialog::backdrop{background:#182e4d55}
.wh-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wh-dialog-head h3{margin:0;font-size:19px}
.wh-dialog-head button{padding:0;width:30px;height:30px;border-radius:8px;border:1px solid var(--line,#d6e0ee);font-size:22px;color:var(--dim,#65758d);background:transparent}
.wh-assignment-dialog p{margin:10px 0 16px;color:var(--dim,#65758d)}
.wh-assignment-dialog label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;margin:14px 0}
.wh-assignment-dialog select{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line,#ccd9e9);border-radius:8px;color:var(--txt,#20344d);background:var(--surface1,#fff);font:inherit;font-weight:400}
.wh-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.wh-dialog-actions button{border:1px solid var(--line,#ccd9e9);border-radius:8px;background:var(--surface1,#fff);color:var(--txt,#20344d);padding:8px 16px;font-size:14px}
.wh-dialog-actions button.primary{background:#285ead;color:#fff;border-color:#285ead}
#wh-assignment-error{color:#b43c45;margin:8px 0;font-size:13px}
html[data-theme="light"] .wh-filter-list button.on{background:#e9f1fc;color:#235ba2;border-color:#9bb9e3}
html[data-theme="light"] .wh-assignment-button{color:#235ba2;background:#f8faff}
main:has(#taskview:not(.hidden)) #workspace-context-bar{display:flex;align-items:center;gap:10px;margin:6px 0 9px;padding:6px 10px}
main:has(#taskview:not(.hidden)) .wh-context-main{flex:1;flex-wrap:nowrap}
main:has(#taskview:not(.hidden)) .wh-company-select select,main:has(#taskview:not(.hidden)) .wh-domain-select select{padding-top:4px;padding-bottom:4px}
main:has(#taskview:not(.hidden)) .wh-scope-note{flex-wrap:nowrap;margin:0 0 0 auto}
main:has(#taskview:not(.hidden)) .wh-scope-note>span:last-child{display:none}
@media(max-width:980px){#workspace-mail-sidebar .wh-filter-list{flex-direction:row;flex-wrap:wrap}#workspace-mail-sidebar .wh-filter-list button{width:auto;min-width:98px;gap:14px}#workspace-mail-sidebar .wh-sidebar-heading{flex-direction:row;align-items:center;gap:10px}#workspace-mail-sidebar .wh-sidebar-section{margin-top:10px;padding-top:10px}.wh-template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.wh-context-main{gap:8px}.wh-system-access{margin-left:0}}
@media(max-width:650px){#workspace-context-bar{padding:8px 10px;margin:8px 0 10px}.wh-company-select,.wh-domain-select{width:100%;justify-content:space-between}.wh-company-select select,.wh-domain-select select{max-width:calc(100% - 48px);min-width:160px}.wh-scope-note{align-items:flex-start}.wh-scope-note>span:last-child{flex:1;min-width:150px}.wh-task-context{flex-direction:column}.wh-task-templates{max-width:100%;width:100%}.wh-template-list{grid-template-columns:1fr}.wh-system-access{width:100%}.wh-assignment-dialog{padding:18px}main:has(#taskview:not(.hidden)) #workspace-context-bar{display:block}main:has(#taskview:not(.hidden)) .wh-context-main{flex-wrap:wrap}main:has(#taskview:not(.hidden)) .wh-scope-note{display:none}}

/* Mail sections, types and priorities (mail_labels.js) */
.tag.ml-section{background:color-mix(in srgb,var(--acc,#245fa9) 18%,transparent);color:var(--txt,#20344d);border:1px solid color-mix(in srgb,var(--acc,#245fa9) 40%,transparent)}
.tag.ml-type{background:var(--surface1,#f5f7fa);color:var(--txt,#20344d);border:1px solid var(--line,#d6e0ee)}
.tag.ml-priority{font-weight:700;border:1px solid transparent}
.tag.ml-p-urgent{background:#b3261e;color:#fff}.tag.ml-p-high{background:#e8891a;color:#1d1300}
.tag.ml-p-normal{background:var(--surface1,#eef2f7);color:var(--dim,#65758d);border-color:var(--line,#d6e0ee)}.tag.ml-p-low{background:transparent;color:var(--dim,#65758d);border-color:var(--line,#d6e0ee)}
.tag.ml-suggest{background:transparent;color:var(--dim,#65758d);border:1px dashed var(--acc,#245fa9);display:inline-flex;align-items:center;gap:4px}
.tag.ml-suggest button{font:inherit;font-size:12px;padding:0 6px;border-radius:999px;border:1px solid var(--line,#d6e0ee);background:var(--panel,#fff);color:var(--acc,#245fa9);cursor:pointer}
.ml-filters .filter-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ml-filters select{font:inherit;font-size:12px;padding:3px 8px;border-radius:8px;border:1px solid var(--line,#d6e0ee);background:var(--panel,#fff);color:var(--txt,#20344d)}
.ml-dialog .ml-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0}
.ml-dialog .ml-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim,#65758d)}
.ml-dialog select,.ml-dialog input:not([type="checkbox"]):not([type="radio"]){font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--line,#d6e0ee);background:var(--panel,#fff);color:var(--txt,#20344d)}
.ml-dialog .ml-error{color:#c0392b;min-height:1em}
.ml-companies{display:grid;gap:12px;max-height:60vh;overflow:auto}
.ml-company h4{margin:0 0 6px}.ml-company ul{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.ml-company li{display:flex;gap:8px;align-items:center}.ml-company li input:first-child{flex:1}
.wh-rules-form #wh-rule-section,.wh-rules-form #wh-rule-type,.wh-rules-form #wh-rule-priority,.wh-rules-form #wh-rule-reason{min-width:110px}
.wh-rule-hint{font-size:12px;color:var(--dim,#65758d);margin:4px 0 0}
/* 工作空间暂不可用 · 重试: the bar could not connect and keeps trying by itself. */
.wh-context-offline{display:inline-flex;align-items:center;gap:8px}
html[data-theme] #workspace-context-bar>.wh-context-offline::before{background:#e8a33d;box-shadow:0 0 0 3px rgba(232,163,61,.22);animation:none}
.wh-context-retry{min-height:24px;padding:0 10px;border:1px solid var(--line,#d6deea);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}
.wh-context-retry:hover{border-color:var(--acc,#3b82f6)}