/* Shared workspace refinement; login artwork and printed documents keep their own visual rules. */
:root {
  --workspace-canvas: #f3f5f8;
  --workspace-ink: #26364c;
  --workspace-muted: #596b80;
  --workspace-line: #e4e9f0;
  --workspace-blue: #245fb4;
  --workspace-teal: #157f76;
  --workspace-radius: 12px;
}

/* The login is a viewport surface, never a flex-sized business-content column. */
html:has(.sign-in), body:has(.sign-in), body:has(.sign-in) #app {
  width: 100%; max-width: none; min-height: 100svh;
}
#app > main.sign-in {
  width: 100%; max-width: none; min-width: 0; flex: none;
  min-height: 100svh; background-position: left center;
}

.shell {
  --canvas: var(--workspace-canvas);
  --ink: var(--workspace-ink);
  --ink-secondary: var(--workspace-muted);
  --line: var(--workspace-line);
  --radius: var(--workspace-radius);
  color: var(--workspace-ink);
  background: var(--workspace-canvas);
  font-variant-numeric: tabular-nums;
}
.shell .topbar { height: 64px; padding: 0 24px; gap: 16px; }
.shell .product-brand { gap: 10px; }
.shell .product-brand strong { font-size: 21px; letter-spacing: 1px; }
.shell .brand-description { font-size: 12px; color: var(--workspace-muted); }
.shell .global-search .el-input__wrapper { min-height: 36px; border-radius: 8px; background: #f3f5f8; }
.shell .icon-button { width: 36px; height: 36px; border-radius: 8px; }
.shell .top-actions { gap: 12px; }
.shell .sidebar { width: 208px; background: #fff; padding: 0 12px 68px; }
.shell .sidebar-title { padding: 24px 14px 14px; color: var(--workspace-muted); font-size: 11px; }
.shell .sidebar .el-sub-menu__title { height: 45px; border-radius: 8px; font-weight: 600; color: #43566f; }
.shell .sidebar .el-sub-menu__title .el-icon { font-size: 18px; color: #667c97; }
.shell .sidebar .el-menu-item { height: 40px; margin: 2px 0; border-radius: 7px; color: #53677f; }
.shell .sidebar .el-menu-item.is-active { background: #edf3fc; color: var(--workspace-blue); }
.shell .sidebar .el-sub-menu.is-active > .el-sub-menu__title { color: var(--workspace-blue); }
.shell .sidebar-foot { background: #fff; padding: 17px 8px; }
.shell .page { padding: 24px 32px 32px; }
.shell .breadcrumb { font-size: 12px; color: var(--workspace-muted); margin-bottom: 12px; }
.shell .page-heading { gap: 20px; margin-bottom: 22px; }
.shell .page-heading h1 { font-size: 25px; line-height: 1.4; margin-bottom: 6px; color: var(--workspace-ink); }
.shell .page-heading p { color: var(--workspace-muted); font-size: 13px; }
.shell .panel { border-color: var(--workspace-line); border-radius: var(--workspace-radius); box-shadow: none; }
.shell .actions { gap: 8px; }
.shell .el-button:not(.is-link):not(.is-text) { border-radius: 7px; height: 36px; }
.shell .el-button:not(.is-link):not(.is-text):active { filter: brightness(.97); }
.shell .el-input__wrapper, .shell .el-select__wrapper { min-height: 36px; border-radius: 7px; }
.shell .el-input__inner::placeholder, .shell .el-textarea__inner::placeholder { color: #65758a; }
.shell .query-bar { padding: 18px 24px; gap: 12px 16px; background: #fcfdff; border-bottom: 1px solid #edf0f4; }
.shell .query-bar label { font-size: 12px; font-weight: 500; color: #53677f; }
.shell .panel > .contract-categories { padding: 0 24px; gap: 28px; }
.shell .contract-categories button { padding-top: 14px; padding-bottom: 14px; }
.shell .el-table { --el-table-header-bg-color: #f6f8fb; --el-table-row-hover-bg-color: #f4f8fd; --el-table-border-color: #edf0f4; }
.shell .el-table th.el-table__cell { height: 46px; color: #51647c; font-weight: 600; }
.shell .el-table td.el-table__cell { padding: 15px 0; }
.shell .el-table .cell { padding: 0 20px; line-height: 1.65; }
.shell .cell-sub { color: #60718a; font-size: 12px; margin-top: 4px; }
.shell .table-footer { padding: 16px 24px; color: var(--workspace-muted); }
.shell .el-tag, .shell .status { border-radius: 5px; }
.shell .contract-summary { border-radius: var(--workspace-radius); padding: 22px 24px; }
.shell .contract-flow { border-radius: var(--workspace-radius); }
.shell .detail-panel .el-tabs__header { padding: 0 24px; }
.shell .information-sheet { background: #f7f9fc; border-radius: 8px; }
.shell .contract-paper { border-radius: 8px; }
.shell .ledger-context { color: #53677f; }

/* A scanable hierarchy: money, trend, then the actionable detail. */
.shell .business-dashboard { --dash-ink: var(--workspace-ink); --dash-muted: var(--workspace-muted); margin: 8px 0 0; }
.shell .business-dashboard .dashboard-heading { margin-bottom: 18px; gap: 16px; }
.shell .business-dashboard .dashboard-heading h2 { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.shell .business-dashboard .dashboard-heading p { color: var(--workspace-muted); font-size: 13px; margin-top: 5px; }
.shell .business-dashboard .dashboard-tools { gap: 12px; font-size: 12px; }
.shell .business-dashboard .dashboard-kpis { gap: 16px; margin-bottom: 16px; }
.shell .business-dashboard .dashboard-kpis > button {
  min-height: 130px; padding: 20px 22px; border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius); background: #fff; transition: border-color 160ms ease, background-color 160ms ease;
}
.shell .business-dashboard .dashboard-kpis > button:hover { border-color: #a4bcdf; background: #fafcff; }
.shell .business-dashboard .dashboard-kpis > button > span { color: #52657d; font-size: 13px; }
.shell .business-dashboard .dashboard-kpis strong { font-size: clamp(25px, 2.15vw, 32px); font-weight: 600; margin: 12px 0 8px; letter-spacing: -.02em; }
.shell .business-dashboard .dashboard-kpis em { color: #5c6d83; font-size: 12px; }
.shell .business-dashboard .dashboard-kpis small { color: #5c6d83; font-size: 12px; }
.shell .business-dashboard .dashboard-kpis .metric-action { font-size: 11px; color: var(--workspace-blue); }
.shell .business-dashboard .dashboard-kpis > button:nth-child(3) strong { color: var(--workspace-teal); }
.shell .business-dashboard .dashboard-kpis > .outstanding-kpi { background: #edf3fc; border-color: #d7e3f5; }
.shell .business-dashboard .outstanding-kpi strong { color: var(--workspace-blue); }
.shell .business-dashboard .analytics-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.shell .business-dashboard .analysis-card { border-color: var(--workspace-line); border-radius: var(--workspace-radius); padding: 22px 24px 18px; box-shadow: none; }
.shell .business-dashboard .analysis-heading { margin-bottom: 16px; }
.shell .business-dashboard .analysis-heading h3 { color: var(--workspace-ink); font-size: 16px; font-weight: 600; }
.shell .business-dashboard .analysis-heading p { color: var(--workspace-muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.shell .business-dashboard .context-note { color: var(--workspace-muted); }
.shell .business-dashboard .trend-overview { background: #f6f8fc; border-radius: 8px; padding: 16px; }
.shell .business-dashboard .trend-value strong { font-weight: 600; }
.shell .business-dashboard .trend-value.receive strong, .shell .business-dashboard .trend-value.net strong { color: var(--workspace-blue); }
.shell .business-dashboard .trend-value.pay strong { color: var(--workspace-teal); }
.shell .business-dashboard .trend-detail-bar { padding-top: 14px; color: var(--workspace-muted); }
.shell .business-dashboard .risk-approval-stack { gap: 16px; justify-content: flex-start; }
.shell .business-dashboard .enterprise-risk-panel { border-color: var(--workspace-line) !important; border-radius: var(--workspace-radius) !important; padding: 20px 24px !important; }
.shell .business-dashboard .enterprise-risk-panel h2 { font-size: 16px !important; font-weight: 600; color: var(--workspace-ink); }
.shell .business-dashboard .enterprise-risk-panel > p { font-size: 12px !important; line-height: 1.65; color: var(--workspace-muted) !important; }
.shell .business-dashboard .enterprise-risk-panel article { font-size: 13px; }
.shell .business-dashboard .enterprise-risk-panel article strong { font-weight: 600; }
.shell .business-dashboard .enterprise-risk-panel article small { font-size: 11px; line-height: 1.6; }
.shell .business-dashboard .enterprise-risk-panel button { font-size: 12px; border-radius: 7px !important; margin-right: 0 !important; }
.shell .business-dashboard .review-panel { padding-bottom: 0; }
.shell .business-dashboard .review-count { font-size: 25px; font-weight: 600; }
.shell .business-dashboard .review-main strong, .shell .business-dashboard .review-aside strong { font-weight: 600; font-size: 13px; }
.shell .business-dashboard .review-main small { color: var(--workspace-muted); font-size: 12px; }
.shell .business-dashboard .review-row { padding: 15px 0; }
.shell .business-dashboard .review-all { width: calc(100% + 48px); margin: 0 -24px; padding: 14px 24px; border-radius: 0 0 12px 12px; background: #f8fafd; }
.shell .business-dashboard .chart-legend { padding-top: 12px; }

/* Teleported editors use the same system, while printed documents retain their own rules. */
@media screen {
  body:has(.shell) .el-drawer__header { padding: 22px 24px; font-size: 19px; font-weight: 600; color: var(--workspace-ink); border-bottom: 1px solid var(--workspace-line); }
  body:has(.shell) .el-drawer__body { padding: 24px; }
  body:has(.shell) .el-drawer__footer { padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--workspace-line); }
  body:has(.shell) .el-dialog { border-radius: 12px; }
  body:has(.shell) .el-dialog__title { font-size: 19px; font-weight: 600; }
  body:has(.shell) .el-form-item__label { color: #485d76; font-weight: 500; font-size: 13px; }
  body:has(.shell) .el-form-item { margin-bottom: 22px; }
  body:has(.shell) .el-input__wrapper, body:has(.shell) .el-select__wrapper { border-radius: 7px; }
  body:has(.shell) .el-textarea__inner { border-radius: 7px; }
  body:has(.shell) .el-button:not(.is-link):not(.is-text) { border-radius: 7px; }
  body:has(.shell) .el-drawer__footer .el-button, body:has(.shell) .el-dialog__footer .el-button { min-height: 36px; }
}

@media (min-width: 1600px) {
  .shell .page { padding: 28px 36px 36px; }
}
@media (max-width: 1200px) {
  .shell .sidebar { width: 192px; }
  .shell .page { padding: 24px; }
  .shell .business-dashboard .dashboard-kpis { gap: 12px; }
  .shell .business-dashboard .dashboard-kpis > button { padding: 18px; }
}
@media (max-width: 1100px) {
  .shell .business-dashboard .analytics-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #app > main.sign-in { background-position: 67% center; }
  .shell .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .shell .product-brand strong { font-size: 19px; }
  .shell .top-actions { gap: 4px; }
  .shell .sidebar { width: min(260px, 85vw); }
  .shell .page { padding: 16px 14px 24px; }
  .shell .page-heading { gap: 14px; margin-bottom: 18px; }
  .shell .page-heading h1 { font-size: 22px; }
  .shell .query-bar { padding: 16px; gap: 12px; }
  .shell .el-table .cell { padding: 0 14px; }
  .shell .table-footer { padding: 14px 16px; gap: 8px; }
  .shell .panel > .contract-categories { padding: 0 16px; gap: 22px; }
  .shell .business-dashboard .dashboard-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .shell .business-dashboard .dashboard-heading h2 { font-size: 22px; }
  .shell .business-dashboard .dashboard-tools { width: 100%; justify-content: space-between; }
  .shell .business-dashboard .dashboard-kpis { gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .business-dashboard .dashboard-kpis > button { min-height: 134px; padding: 16px; }
  .shell .business-dashboard .dashboard-kpis strong { font-size: 24px; }
  .shell .business-dashboard .dashboard-kpis > button > span { font-size: 12px; }
  .shell .business-dashboard .dashboard-kpis .metric-action { float: none; margin-top: 4px; }
  .shell .business-dashboard .analytics-grid { gap: 16px; }
  .shell .business-dashboard .analysis-card { padding: 18px 16px; }
  .shell .business-dashboard .review-panel { padding-bottom: 0; }
  .shell .business-dashboard .review-all { width: calc(100% + 32px); margin: 0 -16px; }
  .shell .business-dashboard .enterprise-risk-panel { padding: 18px 16px !important; }
  .shell .business-dashboard .enterprise-risk-panel article { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .shell .business-dashboard .trend-overview { padding: 14px; }
  body:has(.shell) .el-drawer__header { padding: 18px 16px; }
  body:has(.shell) .el-drawer__body { padding: 18px 16px; }
  body:has(.shell) .el-drawer__footer { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell *, body:has(.shell) .el-drawer, body:has(.shell) .el-dialog { transition: none !important; scroll-behavior: auto !important; }
}