@media screen {
  .approval-assignment-dialog { max-width: 760px; }
  .approval-assignment-dialog .el-dialog__body { color: #334155; line-height: 1.6; }
  .approval-assignment-dialog select { max-width: 100%; min-height: 34px; margin: 8px 0; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; }
  .approval-assignment-modes { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
  .approval-assignment-modes label, .approval-assignment-people label { display: inline-flex; align-items: center; gap: 5px; }
  .approval-assignment-target fieldset { min-width: 0; margin: 12px 0; border: 1px solid #e2e8f0; border-radius: 6px; }
  .approval-assignment-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 12px; max-height: 250px; overflow-y: auto; padding: 8px; }
  .approval-assignment-transfer { border-top: 1px solid #e2e8f0; margin-top: 14px; padding-top: 12px; }
  .approval-assignment-transfer textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 12px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 8px; font: inherit; }
  .approval-assignment-dialog footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .approval-assignment-dialog footer .el-button + .el-button { margin-left: 0; }
  .approval-assignment-error { color: #b42318; }
  .approval-assignment-inline { margin-top: 8px; }
  .approval-assignment-inline small { display: block; margin-bottom: 4px; }
  .approval-assigned-snapshot { margin: 12px 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; }
  .approval-assigned-snapshot dl { margin: 0; }
  .approval-assigned-snapshot dl > div { display: grid; grid-template-columns: minmax(80px, 130px) minmax(0, 1fr); gap: 8px; padding: 4px 0; }
  .approval-assigned-snapshot dt { color: #64748b; }
  .approval-assigned-snapshot dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .approval-assigned-reason textarea { display: block; width: 100%; box-sizing: border-box; padding: 8px; margin: 6px 0 12px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; }
  .approval-assigned-ack { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; }
  @media (max-width: 600px) {
    .approval-assignment-dialog { width: 96% !important; }
    .approval-assignment-dialog .el-dialog__body { padding: 12px; }
    .approval-assignment-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* Compact approval presentation; scoped to the existing approval pages. */
@media screen {
  .approval-workspace { font-size: 14px; line-height: 1.5; }
  .approval-workspace-heading h2 { margin-bottom: 4px; font-size: 20px; }
  .approval-workspace-heading p { margin: 0; color: #64748b; font-size: 12px; }
  .approval-workspace .approval-role-shortcuts { margin: 10px 0; gap: 6px; }
  .approval-workspace .approval-workspace-tabs { margin: 12px 0; gap: 6px; }
  .approval-workspace .approval-workspace-tabs button { padding: 6px 12px; border-radius: 4px; font: inherit; font-size: 13px; }
  .approval-workspace .approval-workspace-filter { gap: 10px; }
  .approval-workspace .approval-workspace-filter select { min-height: 32px; padding: 5px 9px; }
  .approval-workspace .approval-scope-explanation { margin: 10px 0; padding: 8px 12px; }
  .approval-workspace .approval-scope-explanation p { margin: 2px 0; font-size: 12px; }
  .approval-workspace .approval-list-compact { margin: 12px 0; border-radius: 6px; }
  .approval-workspace .approval-list-table { width: 100%; min-width: 1040px; table-layout: fixed; }
  .approval-workspace .approval-list-table th,
  .approval-workspace .approval-list-table td { padding: 10px 12px; line-height: 1.5; vertical-align: top; }
  .approval-workspace .approval-list-table thead th { background: #f5f7fa; color: #475569; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .approval-workspace .approval-list-table th:nth-child(1) { width: 27%; }
  .approval-workspace .approval-list-table th:nth-child(2) { width: 22%; }
  .approval-workspace .approval-list-table th:nth-child(3) { width: 30%; }
  .approval-workspace .approval-list-table th:nth-child(4) { width: 21%; }
  .approval-workspace .approval-list-table tbody tr:hover { background: #fafcff; }
  .approval-workspace .approval-list-table td { color: #334155; overflow-wrap: anywhere; }
  .approval-workspace .approval-list-table .approval-cell-actions { white-space: normal; }
  .approval-workspace .approval-list-table p { margin: 4px 0; }
  .approval-workspace .approval-request-key { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
  .approval-workspace .approval-request-type { color: #64748b; font-size: 12px; }
  .approval-workspace .approval-nowrap,
  .approval-workspace .approval-row-time { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  .approval-workspace .approval-row-time { display: block; max-width: 100%; margin-top: 3px; font-size: 12px; color: #64748b; overflow-x: auto; }
  .approval-workspace .approval-row-title,
  .approval-workspace .approval-long-name,
  .approval-workspace .approval-candidate-names { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  .approval-workspace .approval-row-person { margin: 4px 0; font-weight: 500; }
  .approval-workspace .approval-field-label { margin-right: 6px; color: #64748b; font-size: 12px; }
  .approval-workspace .approval-row-amount { max-width: 100%; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto; }
  .approval-workspace .approval-row-state { margin-bottom: 5px; }
  .approval-workspace .approval-state { padding: 2px 7px; font-size: 12px; border-radius: 4px; white-space: nowrap; }
  .approval-workspace .approval-row-progress { margin-left: 6px; color: #64748b; font-size: 12px; }
  .approval-workspace .approval-current-candidates { margin: 5px 0; }
  .approval-workspace .approval-candidate-names { list-style: none; padding: 0; margin: 4px 0; }
  .approval-workspace .approval-candidate-names li { margin: 3px 0; }
  .approval-workspace .approval-row-muted { color: #64748b; font-size: 12px; }
  .approval-workspace .approval-candidate-unavailable { color: #8a5a1b; font-size: 12px; }
  .approval-workspace .approval-handled-identity { margin-top: 5px; }
  .approval-workspace .approval-row-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
  .approval-workspace .approval-row-actions .el-button { margin: 0; padding: 6px 9px; white-space: nowrap; }
  .approval-workspace .approval-assigned-action-entry,
  .approval-workspace .approval-assignment-inline { margin: 0 0 6px; }
  .approval-workspace .approval-list-table .approval-assignment-inline > small { display: none; }
  .approval-workspace .approval-row-reason,
  .approval-workspace .approval-row-guidance,
  .approval-workspace .approval-task-candidates { margin-top: 5px; color: #64748b; font-size: 12px; }
  .approval-workspace details > summary { cursor: pointer; color: #526b88; line-height: 1.6; }
  .approval-assignment-dialog { max-width: 820px; border-radius: 6px; }
  .approval-assignment-dialog .el-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid #e5eaf0; }
  .approval-assignment-dialog .el-dialog__title { font-size: 16px; font-weight: 600; color: #263445; }
  .approval-assignment-dialog .el-dialog__body { max-height: calc(100vh - 220px); overflow-y: auto; padding: 16px 20px; font-size: 14px; line-height: 1.5; }
  .approval-assignment-dialog .approval-dialog-heading { margin-bottom: 12px; }
  .approval-assignment-dialog .approval-dialog-heading h3 { margin: 0 0 6px; font-size: 16px; color: #263445; overflow-wrap: anywhere; }
  .approval-assignment-dialog .approval-dialog-meta { display: grid; grid-template-columns: minmax(80px, 110px) minmax(0, 1fr); gap: 5px 16px; margin: 6px 0; min-width: 0; }
  .approval-assignment-dialog .approval-dialog-facts { display: block; min-width: 0; }
  .approval-assignment-dialog .approval-dialog-meta > *,
  .approval-assignment-dialog .approval-dialog-facts > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .approval-assignment-dialog .approval-dialog-meta { color: #64748b; font-size: 12px; }
  .approval-assignment-dialog .approval-dialog-meta dd { color: #334155; }
  .approval-assignment-dialog .approval-dialog-facts dl { margin: 0; }
  .approval-assignment-dialog .approval-dialog-facts dl > div { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 8px; padding: 5px 0; }
  .approval-assignment-dialog .approval-dialog-facts dt { color: #64748b; font-size: 12px; }
  .approval-assignment-dialog .approval-dialog-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 13px; }
  .approval-assignment-dialog .approval-dialog-section,
  .approval-assignment-dialog .approval-assigned-snapshot { padding: 12px 0; margin: 0; border: 0; border-top: 1px solid #e5eaf0; border-radius: 0; background: transparent; }
  .approval-assignment-dialog h4,
  .approval-assignment-dialog .approval-dialog-section h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
  .approval-assignment-dialog .approval-assigned-snapshot dl > div { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 8px; padding: 5px 0; }
  .approval-assignment-dialog .approval-assigned-snapshot dt { font-size: 12px; }
  .approval-assignment-dialog .approval-assigned-snapshot dd { font-size: 13px; }
  .approval-assignment-dialog .approval-assignment-notice { margin: 8px 0; padding: 7px 10px; border-left: 2px solid #9ab3cf; background: #f7f9fc; color: #5b6b7e; font-size: 12px; }
  .approval-assignment-dialog .approval-rule-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
  .approval-assignment-dialog .approval-rule-bar select { min-width: 200px; margin: 0; }
  .approval-assignment-dialog .approval-rule-status { margin: 6px 0; color: #526b88; font-size: 12px; }
  .approval-assignment-dialog .approval-assignment-modes { gap: 8px; margin: 10px 0; }
  .approval-assignment-dialog .approval-assignment-modes label { min-height: 32px; padding: 0 10px; border: 1px solid #dbe2ea; border-radius: 4px; background: #fff; font-size: 13px; }
  .approval-assignment-dialog .approval-assignment-mode.is-selected { border-color: #409eff; background: #ecf5ff; }
  .approval-assignment-dialog .approval-dialog-field { display: block; margin: 8px 0; min-width: 0; }
  .approval-assignment-dialog fieldset.approval-dialog-field { border: 1px solid #dbe2ea; border-radius: 4px; padding: 6px 10px; }
  .approval-assignment-dialog .approval-dialog-field .el-date-editor { max-width: 100%; }
  .approval-assignment-dialog input[type="radio"],
  .approval-assignment-dialog input[type="checkbox"] { accent-color: #409eff; flex-shrink: 0; }
  .approval-assignment-dialog .approval-assignment-people { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); padding: 8px 4px; }
  .approval-assignment-dialog .approval-assignment-people label { min-width: 0; min-height: 28px; overflow-wrap: anywhere; font-size: 13px; }
  .approval-assignment-dialog .approval-candidate-list { display: flex; flex-wrap: wrap; gap: 5px 12px; list-style: none; padding: 0; margin: 8px 0; }
  .approval-assignment-dialog .approval-candidate-list li { max-width: 100%; padding: 3px 0; overflow-wrap: anywhere; font-size: 13px; }
  .approval-assignment-dialog .approval-dialog-decision { border-top: 1px solid #e5eaf0; margin-top: 10px; padding-top: 12px; }
  .approval-assignment-dialog .approval-assigned-records { margin: 10px 0; font-size: 13px; }
  .approval-assignment-dialog .approval-assigned-records ol { padding-left: 20px; margin: 6px 0; }
  .approval-assignment-dialog .approval-assigned-records li { padding: 6px 0; border-bottom: 1px solid #eef1f5; overflow-wrap: anywhere; }
  .approval-assignment-dialog details > summary { cursor: pointer; color: #526b88; font-size: 13px; }
  .approval-assignment-dialog footer,
  .approval-assignment-dialog .approval-dialog-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e5eaf0; padding-top: 12px; margin-top: 12px; }
  .approval-assignment-dialog .approval-dialog-actions-secondary,
  .approval-assignment-dialog .approval-dialog-actions-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .approval-assignment-dialog .el-button { margin-left: 0; white-space: nowrap; }
  .approval-assignment-dialog :is(select, textarea, input):focus-visible,
  .approval-workspace :is(button, select, summary):focus-visible { outline: 2px solid #409eff; outline-offset: 2px; }
  @media (max-width: 760px) {
    .approval-workspace .approval-list-table { min-width: 0; }
    .approval-workspace .approval-list-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .approval-workspace .approval-list-table tbody { display: block; }
    .approval-workspace .approval-list-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; border-bottom: 1px solid #e2e8f0; }
    .approval-workspace .approval-list-table td { display: block; width: auto; padding: 0; border-bottom: 0; min-width: 0; }
    .approval-workspace .approval-list-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #64748b; font-size: 12px; font-weight: 500; }
    .approval-workspace .approval-list-table .approval-cell-request,
    .approval-workspace .approval-list-table .approval-cell-actions { grid-column: 1 / -1; }
    .approval-workspace .approval-row-time { font-size: 11px; }
    .approval-workspace .approval-list-table .approval-row-actions { align-items: center; }
    .approval-assignment-dialog { width: 96% !important; margin-top: 5vh !important; }
    .approval-assignment-dialog .el-dialog__header { padding: 14px 14px 10px; }
    .approval-assignment-dialog .el-dialog__body { max-height: calc(100vh - 150px); padding: 12px 14px; }
    .approval-assignment-dialog .approval-dialog-meta { grid-template-columns: 80px minmax(0, 1fr); gap: 5px 8px; }
    .approval-assignment-dialog .approval-dialog-facts dl > div { grid-template-columns: 90px minmax(0, 1fr); }
    .approval-assignment-dialog .approval-assignment-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .approval-assignment-dialog .approval-rule-bar { align-items: flex-start; }
    .approval-assignment-dialog .approval-rule-bar select { min-width: 0; width: 100%; }
    .approval-assignment-dialog .approval-dialog-actions { align-items: flex-start; }
    .approval-assignment-dialog .approval-dialog-actions-primary { margin-left: auto; }
  }
  @media (max-width: 420px) {
    .approval-workspace .approval-list-table tbody tr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .approval-workspace .approval-list-table td { grid-column: 1; }
    .approval-assignment-dialog .approval-assignment-people { grid-template-columns: minmax(0, 1fr); }
  }
}