/* Unified logistics workspace shell. Account differences come from capability
   profiles; this layer is deliberately shared by every operator. */
body.ops-workspace {
  --ops-canvas: #0c1218;
  --ops-sidebar: #111820;
  --ops-surface: #141d26;
  --ops-surface-raised: #19242f;
  --ops-surface-soft: #202d39;
  --ops-border: #2b3a47;
  --ops-border-strong: #405565;
  --ops-ink: #edf3f7;
  --ops-muted: #a8b5bf;
  --ops-subtle: #7f909d;
  --ops-accent: #54a8b5;
  --ops-accent-strong: #83c0c8;
  --ops-success: #76b692;
  --ops-warning: #d6ad62;
  --ops-danger: #d47f7f;
  --ops-focus: #88cbd5;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", Arial, sans-serif;
  letter-spacing: 0;
  background: var(--ops-canvas) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace.ops-light {
  --ops-canvas: #edf2f5;
  --ops-sidebar: #f8fafb;
  --ops-surface: #ffffff;
  --ops-surface-raised: #f6f9fb;
  --ops-surface-soft: #edf3f6;
  --ops-border: #cbd7de;
  --ops-border-strong: #9fb2bd;
  --ops-ink: #172631;
  --ops-muted: #536875;
  --ops-subtle: #71838e;
  --ops-accent: #276d7a;
  --ops-accent-strong: #164f5a;
  --ops-success: #376f52;
  --ops-warning: #7a5a1f;
  --ops-danger: #924b4b;
  --ops-focus: #176f80;
  background: var(--ops-canvas) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace *,
body.ops-workspace *::before,
body.ops-workspace *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

body.ops-workspace .app-shell,
body.ops-workspace .workspace {
  min-width: 0;
  background: var(--ops-canvas) !important;
}

body.ops-workspace .sidebar {
  width: 296px;
  border-right: 1px solid var(--ops-border) !important;
  background: var(--ops-sidebar) !important;
  box-shadow: none !important;
}

body.ops-workspace .topbar {
  min-height: 82px;
  padding: 16px 28px 14px;
  border-bottom: 1px solid var(--ops-border) !important;
  background: color-mix(in srgb, var(--ops-canvas) 92%, transparent) !important;
  backdrop-filter: blur(12px);
}

body.ops-workspace #pageTitle,
body.ops-workspace .brand strong,
body.ops-workspace h1,
body.ops-workspace h2,
body.ops-workspace h3,
body.ops-workspace h4,
body.ops-workspace .panel strong,
body.ops-workspace .result-box strong {
  color: var(--ops-ink) !important;
}

body.ops-workspace p,
body.ops-workspace small,
body.ops-workspace .muted,
body.ops-workspace .form-message,
body.ops-workspace .panel > span,
body.ops-workspace label > span {
  color: var(--ops-muted) !important;
}

body.ops-workspace button,
body.ops-workspace input,
body.ops-workspace select,
body.ops-workspace textarea,
body.ops-workspace a {
  font: inherit;
}

body.ops-workspace button,
body.ops-workspace .primary-button,
body.ops-workspace .secondary-button,
body.ops-workspace input,
body.ops-workspace select,
body.ops-workspace textarea {
  border-radius: 6px !important;
}

body.ops-workspace button:focus-visible,
body.ops-workspace a:focus-visible,
body.ops-workspace input:focus-visible,
body.ops-workspace select:focus-visible,
body.ops-workspace textarea:focus-visible {
  outline: 2px solid var(--ops-focus) !important;
  outline-offset: 2px;
}

body.ops-workspace .ops-context-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(220px, .75fr) minmax(440px, 1.25fr);
  gap: 16px;
  align-items: center;
  margin: 14px 28px 0;
  padding: 14px 16px;
  border: 1px solid var(--ops-border);
  border-left: 3px solid var(--ops-accent);
  border-radius: 6px;
  background: var(--ops-surface);
  box-shadow: 0 6px 20px rgba(8, 20, 28, .08);
}

body.ops-workspace .ops-context-bar[hidden] {
  display: none !important;
}

.ops-context-identity {
  min-width: 0;
}

.ops-context-identity > span {
  display: block;
  margin-bottom: 2px;
  color: var(--ops-accent-strong);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ops-context-identity > strong {
  display: block;
  color: var(--ops-ink);
  font-size: 18px;
  line-height: 1.25;
}

.ops-context-identity > p {
  margin: 4px 0 0;
  color: var(--ops-muted) !important;
  font-size: 12px;
  line-height: 1.45;
}

.ops-context-scopes,
.ops-context-sources {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.ops-scope-chip,
.ops-managed-team {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--ops-border);
  border-radius: 999px;
  background: var(--ops-surface-raised);
  color: var(--ops-ink);
  font-size: 11px;
  font-weight: 700;
}

.ops-managed-team {
  border-style: dashed;
  color: var(--ops-muted);
}

.ops-source-chip {
  min-width: 118px;
  min-height: 38px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--ops-border);
  border-radius: 6px;
  background: var(--ops-surface-raised);
}

.ops-source-chip > span {
  width: 7px;
  height: 7px;
  grid-row: 1 / span 2;
  align-self: center;
  border-radius: 50%;
  background: var(--ops-subtle);
}

.ops-source-chip.ready > span,
.ops-source-chip.editable > span { background: var(--ops-success); }
.ops-source-chip.attention > span { background: var(--ops-warning); }
.ops-source-chip.planned > span { background: var(--ops-accent); }

.ops-source-chip strong {
  overflow: hidden;
  color: var(--ops-ink);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-source-chip em {
  color: var(--ops-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.ops-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-raised);
  color: var(--ops-muted);
  cursor: pointer;
}

.ops-icon-button:hover {
  border-color: var(--ops-border-strong);
  color: var(--ops-ink);
}

.ops-icon-button svg {
  width: 16px;
  height: 16px;
}

body.ops-workspace .panel,
body.ops-workspace .task-section,
body.ops-workspace .workbench-panel,
body.ops-workspace .backend-card,
body.ops-workspace .paid-orders-side-card,
body.ops-workspace .paid-orders-table-wrap,
body.ops-workspace .result-box,
body.ops-workspace .workflow-result {
  border-color: var(--ops-border) !important;
  background: var(--ops-surface) !important;
  color: var(--ops-ink) !important;
  box-shadow: none !important;
}

body.ops-workspace .workflow-result.ok,
body.ops-workspace .manual-ci-notice:not(.warn) {
  border-color: color-mix(in srgb, var(--ops-success) 58%, var(--ops-border)) !important;
  background: color-mix(in srgb, var(--ops-success) 10%, var(--ops-surface)) !important;
}

body.ops-workspace .workflow-result.warn,
body.ops-workspace .manual-ci-notice.warn {
  border-color: color-mix(in srgb, var(--ops-warning) 62%, var(--ops-border)) !important;
  background: color-mix(in srgb, var(--ops-warning) 10%, var(--ops-surface)) !important;
  color: var(--ops-warning) !important;
}

body.ops-workspace .workflow-result.error {
  border-color: color-mix(in srgb, var(--ops-danger) 62%, var(--ops-border)) !important;
  background: color-mix(in srgb, var(--ops-danger) 9%, var(--ops-surface)) !important;
  color: var(--ops-danger) !important;
}

body.ops-workspace input,
body.ops-workspace select,
body.ops-workspace textarea {
  border-color: var(--ops-border) !important;
  background: var(--ops-surface-raised) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace input::placeholder,
body.ops-workspace textarea::placeholder {
  color: var(--ops-subtle) !important;
  opacity: 1;
}

body.ops-workspace .primary-button:not(:disabled),
body.ops-workspace .paid-orders-action-primary:not(:disabled),
body.ops-workspace .paid-orders-confirm-button:not(:disabled) {
  border-color: var(--ops-accent) !important;
  background: var(--ops-accent) !important;
  color: #ffffff !important;
}

body.ops-workspace.ops-light .primary-button:not(:disabled),
body.ops-workspace.ops-light .paid-orders-action-primary:not(:disabled),
body.ops-workspace.ops-light .paid-orders-confirm-button:not(:disabled) {
  background: #276d7a !important;
  color: #ffffff !important;
}

body.ops-workspace .secondary-button:not(:disabled),
body.ops-workspace .paid-orders-action-secondary:not(:disabled) {
  border-color: var(--ops-border-strong) !important;
  background: var(--ops-surface-raised) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace button:disabled,
body.ops-workspace .primary-button:disabled,
body.ops-workspace .secondary-button:disabled {
  border-color: var(--ops-border) !important;
  background: var(--ops-surface-soft) !important;
  color: var(--ops-subtle) !important;
  opacity: .72;
}

body.ops-workspace table th {
  border-color: var(--ops-border) !important;
  background: var(--ops-surface-soft) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace table td {
  border-color: var(--ops-border) !important;
  background: var(--ops-surface) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace table tr:hover td,
body.ops-workspace table tr.selected td {
  background: color-mix(in srgb, var(--ops-accent) 9%, var(--ops-surface)) !important;
}

body.ops-workspace .nav-item,
body.ops-workspace .sidebar-subnav button,
body.ops-workspace .backend-scope-nav button {
  border-radius: 6px !important;
}

body.ops-workspace .nav-item.active,
body.ops-workspace .sidebar-subnav button.active,
body.ops-workspace .backend-scope-nav button.active {
  border-color: color-mix(in srgb, var(--ops-accent) 55%, var(--ops-border)) !important;
  background: color-mix(in srgb, var(--ops-accent) 14%, var(--ops-sidebar)) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace .workbench-tab,
body.ops-workspace .workbench-subtab {
  border-radius: 6px !important;
}

body.ops-workspace .workbench-tab.active,
body.ops-workspace .workbench-subtab.active {
  border-color: color-mix(in srgb, var(--ops-accent) 58%, var(--ops-border)) !important;
  background: color-mix(in srgb, var(--ops-accent) 12%, var(--ops-surface)) !important;
  color: var(--ops-ink) !important;
}

body.ops-workspace[data-ops-profile="daive-hongkong"] .ops-context-bar {
  border-left-color: var(--ops-warning);
}

body.ops-workspace[data-ops-profile="roza-dubai-lead"] .ops-context-bar {
  border-left-color: var(--ops-success);
}

.hk-command-bar {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--ops-border);
  border-radius: 6px;
  background: var(--ops-surface);
}

.hk-command-bar[hidden] { display: none !important; }

.hk-command-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.hk-command-head > div > span {
  display: block;
  color: var(--ops-warning);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.hk-command-head > div > strong {
  color: var(--ops-ink);
  font-size: 18px;
}

.hk-command-head p {
  max-width: 560px;
  margin: 0;
  color: var(--ops-muted) !important;
  font-size: 12px;
  text-align: right;
}

.hk-command-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
}

.hk-command-action {
  min-height: 58px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-raised);
  color: var(--ops-muted);
  text-align: left;
  cursor: pointer;
}

.hk-command-action:hover,
.hk-command-action.active {
  border-color: color-mix(in srgb, var(--ops-warning) 58%, var(--ops-border));
  background: color-mix(in srgb, var(--ops-warning) 9%, var(--ops-surface));
  color: var(--ops-ink);
}

.hk-command-action svg { width: 18px; height: 18px; }
.hk-command-action span { min-width: 0; }
.hk-command-action strong,
.hk-command-action small { display: block; }
.hk-command-action strong { overflow: hidden; color: var(--ops-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hk-command-action small { margin-top: 2px; color: var(--ops-muted); font-size: 10px; }

@media (max-width: 1320px) {
  body.ops-workspace .ops-context-bar {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  }

  body.ops-workspace .ops-context-sources {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body.ops-workspace .app-shell {
    display: block !important;
  }

  body.ops-workspace .sidebar {
    position: relative !important;
    inset: auto !important;
    z-index: 10;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ops-border) !important;
  }

  body.ops-workspace .sidebar .brand {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ops-workspace .sidebar nav {
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.ops-workspace .sidebar .nav-item {
    min-width: max-content;
    min-height: 42px;
  }

  body.ops-workspace .sidebar-subnav,
  body.ops-workspace .backend-scope-nav,
  body.ops-workspace .side-tool,
  body.ops-workspace .logout-button {
    display: none !important;
  }

  body.ops-workspace .workspace {
    width: 100% !important;
    margin: 0 !important;
  }

  body.ops-workspace .topbar {
    position: relative !important;
    top: auto !important;
    min-height: 0;
    padding: 14px 16px;
    align-items: flex-start;
    gap: 12px;
  }

  body.ops-workspace .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.ops-workspace .ops-context-bar {
    grid-template-columns: 1fr;
    margin: 12px 16px 0;
  }

  body.ops-workspace .ops-context-sources {
    grid-column: auto;
  }

  body.ops-workspace .backend-main-column,
  body.ops-workspace .today-workspace-main,
  body.ops-workspace .workspace-kpi-grid,
  body.ops-workspace .workspace-analytics-panel,
  body.ops-workspace .workbench-switch,
  body.ops-workspace .front-workbench-switch {
    grid-template-columns: 1fr !important;
  }

  body.ops-workspace .backend-workbench-switch {
    position: relative !important;
    top: auto !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.ops-workspace .backend-workbench,
  body.ops-workspace .nodes-workbench,
  body.ops-workspace .query-workbench,
  body.ops-workspace .kingdee-sn-workbench,
  body.ops-workspace .workspace-analytics-panel {
    grid-column: 1 !important;
  }

  .hk-command-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body.ops-workspace .sidebar {
    grid-template-columns: 1fr;
  }

  body.ops-workspace .sidebar .brand {
    display: none;
  }

  body.ops-workspace .topbar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  body.ops-workspace .top-actions {
    justify-content: flex-start;
  }

  body.ops-workspace #visualDashboardLink,
  body.ops-workspace .user-badge {
    display: none;
  }

  body.ops-workspace .ops-context-bar {
    margin-inline: 10px;
    padding: 12px;
  }

  body.ops-workspace .ops-source-chip {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }

  body.ops-workspace .view {
    padding-inline: 10px !important;
  }

  body.ops-workspace .paid-orders-controls,
  body.ops-workspace .paid-orders-metrics,
  body.ops-workspace .paid-orders-content-grid,
  body.ops-workspace .allocation-mode-grid,
  body.ops-workspace .order-search-grid,
  body.ops-workspace .lookup-line,
  body.ops-workspace .hk-upload-grid {
    grid-template-columns: 1fr !important;
  }

  .hk-command-head { display: grid; }
  .hk-command-head p { text-align: left; }
  .hk-command-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.ops-workspace *,
  body.ops-workspace *::before,
  body.ops-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}