/* Compact operations workspace. Loaded after the existing visual layers. */
:root {
  color-scheme: light;
  --company-header-height: 60px;
  --canvas: #f4f7fb;
  --surface: #ffffff;
  --ink: #213551;
  --muted: #53647b;
  --line: #dbe4ef;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
html { scrollbar-gutter: stable; }
* { scrollbar-width: auto !important; scrollbar-color: auto !important; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #b4c1d0; border: 3px solid transparent; background-clip: padding-box; border-radius: 20px; min-height: 36px; }
*::-webkit-scrollbar-thumb:hover { background-color: #8196ad; }
*::-webkit-scrollbar-thumb:active { background-color: #607b98; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
body { background: var(--canvas); font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
body.company-shell { height: 100vh; height: 100dvh; overflow: hidden; }
body.company-shell .layout, body.company-shell.hr-page-active .layout {
  height: calc(100vh - var(--company-header-height));
  height: calc(100dvh - var(--company-header-height));
  min-height: 0;
  grid-template-columns: 208px minmax(0, 1fr);
  overflow: hidden;
}
body.company-shell .sidebar, body.company-shell.hr-page-active .sidebar {
  position: relative; top: 0; width: 208px; height: 100%; padding: 18px 12px 12px;
  overflow-y: auto; overscroll-behavior: contain; background: #edf3fa; border-right: 1px solid var(--line);
}
body.company-shell .main, body.company-shell.hr-page-active .main {
  height: 100%; min-height: 0; max-width: 1600px; padding: 0 24px 24px;
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
}
body.company-shell.hr-page-active .main { overflow: hidden; padding-bottom: 16px; }
.company-header { box-shadow: none; gap: 20px; padding: 0 20px; }
.company-brand { min-width: 212px; }
.company-brand strong { font-size: 15px; }
.company-tab { min-width: 112px; padding: 0 18px; }
.company-side-title { font-size: 14px; padding-bottom: 12px; }
.workspace-store { padding: 9px; margin-bottom: 4px; box-shadow: none; border-radius: 10px; }
.workspace-store > span:last-child { min-width: 0; flex: 1; }
.workspace-store b, .workspace-store small, .workspace-mode b, .workspace-mode small, .workspace-label { font-size: 12px; }
.workspace-label { margin-top: 15px; letter-spacing: 0; }
.child, .child.active, .child:hover, .child.active:hover { font-size: 13px; min-height: 38px; padding: 9px 10px; border-radius: 7px; }
.child.active, .child.active:hover { box-shadow: none; }
.sidebar-account button { font-size: 12px; min-height: 36px; }
body.company-shell .workspace-bar, body.company-shell.hr-page-active .workspace-bar {
  height: 38px; flex: 0 0 38px; margin: 0 0 12px; font-size: 12px; border: 0;
}
body.company-shell .top, body.company-shell.home-page-active .top, body.company-shell.hr-page-active .top {
  min-height: 82px; flex: 0 0 auto; padding: 16px 20px; margin-bottom: 18px; gap: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
  background: var(--surface); box-shadow: none; overflow: visible;
}
body.company-shell .top h1 { margin: 0; font-size: 24px; line-height: 1.3; color: var(--ink); letter-spacing: 0; }
body.company-shell .top-description { margin-top: 6px; color: var(--muted); font-size: 13px; }
body.company-shell.employee-page-active .top,
body.company-shell.departure-page-active .top { display: none; }
#payroll .payroll-content-card { padding: 0; gap: 0; }
#payroll .payroll-content-tabs { display: flex; gap: 28px; padding: 0 18px; border-bottom: 1px solid var(--line); }
#payroll .payroll-content-tabs .payroll-tab {
  position: relative; min-height: 50px; padding: 12px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); font-size: 14px; box-shadow: none;
}
#payroll .payroll-content-tabs .payroll-tab:hover { color: var(--accent-deep); }
#payroll .payroll-content-tabs .payroll-tab.active { background: transparent; color: var(--accent-deep); }
#payroll .payroll-content-tabs .payroll-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
#payroll .payroll-content-card > .payroll-view > .payroll-card { border: 0; border-radius: 0 0 9px 9px; margin: 0; }
#payrollCollectionView #payrollSettingsForm { margin-top: 0; }
body.company-shell .top .status { display: none; }
body.company-shell .top .taobao-connection-bar { display: none; }
body.company-shell .hr-top-tabs .hr-mode { color: var(--muted); background: #f5f8fc; border-color: var(--line); min-height: 44px; }
body.company-shell .hr-top-tabs .hr-mode.active { background: var(--accent-soft); color: var(--accent-deep); border-color: #b6cef5; }
body.company-shell .hr-top-tabs .hr-mode:hover { color: var(--accent-deep); background: #eaf2ff; }
.panel.active { animation: none; }
.card, .qianniu-dashboard, .knowledge-card, .fallback-card { box-shadow: none; border-radius: 10px; }
.card { padding: 18px; }
button { touch-action: manipulation; }
button.primary { box-shadow: none; }
button.primary:hover { box-shadow: none; }
:where(button, input, select, textarea, a, summary):focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }
h2, h3 { text-wrap: balance; }
p { overflow-wrap: anywhere; }
.sw-home-connections { padding: 18px 20px; box-shadow: none; border-radius: 10px; }
.sw-home-heading h2 { font-size: 18px; }
.sw-home-note { margin-top: 12px; padding: 10px 12px; font-size: 12px; }
#qianniuDashboard .store-performance-head { padding: 18px 20px 14px; }
#qianniuDashboard .store-performance-head h2 { font-size: 18px; }
#qianniuDashboard .store-performance-main { padding: 0 20px 18px; }
.sw-toolbar h2 { font-size: 20px; margin: 0; }
#marketing > .card > h2, #transfer > .card > h2 { display: none; }
.sw-toolbar { margin-bottom: 12px; gap: 12px; }
.sw-connection-shortcut { padding: 8px 12px; margin-bottom: 8px; font-size: 12px; }
.sw-connection-shortcut button { padding: 7px 10px; font-size: 12px; }
.sw-page > .sw-status { padding: 8px 12px; margin: 6px 0; font-size: 12px; }
.sw-page > .sw-note { padding: 6px 12px; margin: 0; }
.sw-page > .sw-note[data-sw-live] { margin-bottom: 12px; }
.sw-page .sw-note { font-size: 12px; }
.sw-product-workspace, .sw-gold-layout { gap: 16px; }
.employee-filters { display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(140px, 1fr) auto auto auto; gap: 10px; align-items: center; }
.employee-filters > input, .employee-filters > select { width: 100%; min-width: 0; margin: 0; }
.employee-date-filter { white-space: nowrap; gap: 8px; }
.employee-filters > button { width: fit-content; }
.employee-count { grid-column: 1 / -1; }
/* Employee dates move together as one filter, including at desktop scaling sizes. */
#employees .employee-workspace { container: employee-tools / inline-size; }
#employees .employee-toolbar { margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#employees .employee-title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
#employees .employee-title-line h2 { font-size: 22px; line-height: 1.4; }
#employees .employee-title-line .employee-count { margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
#employees .employee-toolbar p { color: var(--muted); }
#employees .employee-actions { flex-wrap: wrap; gap: 10px; }
#employees .employee-actions button { min-height: 44px; padding: 10px 14px; font-size: 13px; }
#employees .employee-filters { grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px); padding-top: 16px; gap: 12px; }
#employees .employee-filters input, #employees .employee-filters select { height: 44px; font-size: 13px; border-color: var(--line); border-radius: 8px; }
#employees .employee-joined-range { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; min-width: 0; }
#employees .employee-range-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
#employees .employee-range-inputs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
#employees .employee-range-inputs input { width: 132px; min-width: 0; max-width: none; margin: 0; padding: 10px; }
#employees #employeeDateClear { min-height: 44px; margin: 0; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
@container employee-tools (min-width: 880px) {
  #employees .employee-filters { grid-template-columns: minmax(180px, 1fr) 160px auto; }
  #employees .employee-joined-range { grid-column: auto; flex-wrap: nowrap; }
}
@container employee-tools (max-width: 500px) {
  #employees .employee-filters { grid-template-columns: minmax(0, 1fr); }
  #employees .employee-range-label { flex-basis: 100%; }
  #employees .employee-range-inputs { flex: 1 1 260px; }
  #employees .employee-range-inputs input { width: 0; flex: 1; }
}
.employee-row { min-width: 750px; grid-template-columns: minmax(100px, 1fr) minmax(140px, 1.2fr) 70px 120px 100px 140px; gap: 10px; padding: 12px 14px; }
.employee-row.head, .departure-row.head { position: sticky; top: 0; z-index: 1; background: #f4f7fb; color: #53647b; }
.employee-row small, .departure-row small { color: #53647b; }
.employee-table { overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.departure-summary { gap: 12px; }
.departure-stat { border-radius: 10px; box-shadow: none; }
.payroll-tab.active, .subnav-item.active { background: var(--accent-soft); border-color: #b6cef5; color: var(--accent-deep); }
.chat-fab { background: var(--accent); box-shadow: 0 4px 14px #2563eb26; width: 48px; height: 48px; border-radius: 12px; right: 22px; bottom: 22px; }
.chat-fab:hover, .child:hover, .knowledge-card:hover, .fallback-card:hover, .hr-list-item:hover { transform: none; }
/* Overlay surfaces stay above the fixed company header. */
.drawer-mask, .followup-task-mask { z-index: 1100; }
.drawer, .followup-task-drawer { z-index: 1101; right: 0; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 240ms var(--ease-drawer), visibility 240ms; }
.drawer.open, .followup-task-drawer.open { right: 0; transform: translateX(0); visibility: visible; pointer-events: auto; }
.drawer-mask, .followup-task-mask { transition: opacity 200ms var(--ease-out); }
.drawer { width: min(480px, 100vw); padding: 18px 20px; }
.followup-task-drawer { width: min(650px, 100vw); padding: 22px; }
.drawer, .followup-task-drawer, .employee-form, .hr-agent-knowledge-dialog, dialog { overscroll-behavior: contain; }
.employee-editor-modal, .hr-agent-knowledge-modal { z-index: 1200; padding: 20px; }
.employee-editor-modal:not(.editor-hidden), .employee-editor-modal .employee-form { animation: none; transform: none; }
.employee-editor-modal .employee-form { width: min(720px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 24px; border-radius: 14px; box-shadow: 0 16px 50px #21355126; }
dialog { max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 50px #21355126; }
dialog::backdrop { background: #21355152; }
.employee-form-actions { position: sticky; bottom: -24px; background: #fff; padding: 14px 0 0; border-top: 1px solid var(--line); }
html.ui-keyboard .drawer, html.ui-keyboard .followup-task-drawer { transition: none; }
@media (hover: hover) and (pointer: fine) {
  button.primary { transition: background-color 120ms ease; }
  button.primary:hover { background: var(--accent-deep); }
}
@media (max-width: 1280px) {
  .employee-filters { grid-template-columns: minmax(150px, 1.5fr) minmax(130px, 1fr); }
  .employee-filters .employee-count { grid-column: auto; }
  body.company-shell .main { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 1050px) {
  body.company-shell .layout { grid-template-columns: 184px minmax(0, 1fr); }
  body.company-shell .sidebar { width: 184px; }
  .hr-workspace { grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
  .split-workspace { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 760px) {
  body.company-shell { height: auto; overflow: auto; }
  body.company-shell .layout, body.company-shell.hr-page-active .layout { display: block; height: auto; overflow: visible; }
  body.company-shell .sidebar, body.company-shell.hr-page-active .sidebar { width: 100%; height: auto; max-height: 32vh; }
  body.company-shell .main, body.company-shell.hr-page-active .main { height: auto; overflow: visible; padding: 0 14px 20px; }
  .split-workspace, .hr-workspace { grid-template-columns: minmax(0, 1fr); }
  body.company-shell .top { flex-wrap: wrap; }
  .employee-filters { grid-template-columns: minmax(0, 1fr); }
  .employee-filters .employee-count { grid-column: auto; }
  .company-brand { min-width: 0; }
}
@media (max-width: 620px) { :root { --company-header-height: 108px; } }
@media (prefers-reduced-motion: reduce) {
  .drawer, .followup-task-drawer, .drawer-mask, .followup-task-mask { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
/* Custom desktop chrome replaces the OS title strip, including before login. */
body.desktop-chrome { --desktop-titlebar-height: 36px; --company-header-height: 96px; }
body.desktop-chrome .company-header { top: var(--desktop-titlebar-height); height: calc(var(--company-header-height) - var(--desktop-titlebar-height)); }
body.desktop-chrome .workspace-login { top: var(--desktop-titlebar-height) !important; }
.desktop-titlebar { position: fixed; inset: 0 0 auto; height: 36px; z-index: 2147483647; display: flex; align-items: center; justify-content: space-between; padding-left: 18px; background: #f0f5fb; border-bottom: 1px solid #e1e9f2; color: #3c536d; user-select: none; -webkit-app-region: drag; }
.desktop-title { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; }
.desktop-title-mark { color: #2563eb; font-size: 20px; }
.desktop-title-scope { padding-left: 10px; margin-left: 3px; border-left: 1px solid #ccd9e7; color: #71859c; font-weight: 400; }
.desktop-window-controls { display: flex; align-items: center; gap: 3px; padding: 3px 5px; height: 100%; -webkit-app-region: no-drag; }
.desktop-window-controls button { display: grid; place-items: center; width: 42px; height: 28px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #4d647e; cursor: pointer; -webkit-app-region: no-drag; }
.desktop-window-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.desktop-window-controls button:hover { background: #dfe9f4; color: #213551; }
.desktop-window-controls [data-window-action="close"]:hover { background: #dc3545; color: #fff; }
.desktop-window-controls button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.desktop-titlebar.is-unfocused .desktop-title { opacity: .65; }
@media (max-width:620px) { body.desktop-chrome { --company-header-height:144px; } }