/* Shared with the WorkLucky desktop modal: neutral surfaces and a light mask. */
html[data-workbench-app] {
  --wk-dialog-surface: #fff;
  --wk-dialog-footer: #fafbfc;
  --wk-dialog-text: #202020;
  --wk-dialog-muted: #666;
  --wk-dialog-border: #0000000e;
  --wk-dialog-divider: #00000008;
  --wk-dialog-mask: #1c233333;
  --wk-dialog-shadow: 0 24px 80px #18233826, 0 3px 12px #0000000d;
}
html[data-workbench-app] body .el-overlay,
html[data-workbench-app] body .modal-mask,
html[data-workbench-app] dialog::backdrop {
  background: var(--wk-dialog-mask);
  backdrop-filter: none;
}
html[data-workbench-app] body :is(.el-dialog, .el-message-box, .el-drawer, dialog.modal) {
  --el-color-primary: #212121;
  --el-color-primary-light-3: #555;
  --el-color-primary-light-5: #888;
  --el-color-primary-light-7: #bbb;
  --el-color-primary-light-8: #ddd;
  --el-color-primary-light-9: #f3f3f3;
  --el-color-primary-dark-2: #080808;
  --el-border-radius-base: 8px;
  --el-dialog-padding-primary: 0px;
  --el-text-color-primary: var(--wk-dialog-text);
  --el-text-color-regular: #555;
  border: 1px solid var(--wk-dialog-border);
  border-radius: 16px;
  padding: 0;
  background: var(--wk-dialog-surface);
  color: var(--wk-dialog-text);
  box-shadow: var(--wk-dialog-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  text-align: left;
}
html[data-workbench-app] body .el-dialog:not(.is-fullscreen),
html[data-workbench-app] body .el-message-box,
html[data-workbench-app] dialog.modal {
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
}
html[data-workbench-app] body .el-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-workbench-app] body .el-overlay-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
html[data-workbench-app] body .el-overlay-dialog:has(.is-fullscreen) { padding: 0; }
html[data-workbench-app] body .el-dialog:not(.is-fullscreen) {
  /* Recruitment has a local !important top margin; all app dialogs center here. */
  margin: 0 auto !important;
}
html[data-workbench-app] body .el-dialog.is-fullscreen { border-radius: 0; }
html[data-workbench-app] body .el-drawer { border-radius: 16px 0 0 16px; }
html[data-workbench-app] body :is(.el-dialog__header, .el-message-box__header, .el-drawer__header),
html[data-workbench-app] dialog.modal .modal-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 54px 20px 24px;
  border-bottom: 1px solid var(--wk-dialog-divider);
  background: var(--wk-dialog-surface);
  color: var(--wk-dialog-text);
}
html[data-workbench-app] body :is(.el-dialog__title, .el-message-box__title, .el-drawer__title),
html[data-workbench-app] dialog.modal h2 {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--wk-dialog-text);
}
html[data-workbench-app] body :is(.el-dialog__headerbtn, .el-message-box__headerbtn) {
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
html[data-workbench-app] body :is(.el-dialog__headerbtn, .el-message-box__headerbtn):hover {
  background: #f3f3f3;
}
html[data-workbench-app] body :is(.el-dialog__close, .el-message-box__close, .el-drawer__close) {
  color: var(--wk-dialog-muted);
}
html[data-workbench-app] body :is(.el-dialog__body, .el-drawer__body) {
  min-height: 0;
  padding: 24px;
  overflow: auto;
  color: var(--wk-dialog-text);
  background: var(--wk-dialog-surface);
  font-size: 14px;
  line-height: 1.8;
}
html[data-workbench-app] body .el-message-box__content {
  padding: 24px;
  color: var(--wk-dialog-text);
  font-size: 14px;
  line-height: 1.8;
}
html[data-workbench-app] body :is(.el-dialog__footer, .el-message-box__btns, .el-drawer__footer),
html[data-workbench-app] dialog.modal .form-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--wk-dialog-divider);
  background: var(--wk-dialog-footer);
}
html[data-workbench-app] body :is(.el-dialog, .el-message-box, .el-drawer) .el-button,
html[data-workbench-app] dialog.modal .btn {
  min-height: 36px;
  height: auto;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
}
html[data-workbench-app] body :is(.el-dialog__footer, .el-message-box__btns) .el-button + .el-button {
  margin-left: 0;
}
html[data-workbench-app] dialog.modal { overflow: auto; }
html[data-workbench-app] dialog.modal .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-radius: 16px 16px 0 0;
}
html[data-workbench-app] dialog.modal .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
html[data-workbench-app] dialog.modal fieldset { padding: 24px; }
html[data-workbench-app] dialog.modal .form-field { color: #666; }
html[data-workbench-app] dialog.modal :is(input, textarea, select) { accent-color: #212121; }
html[data-workbench-app] dialog.modal :is(input, textarea, select):focus {
  border-color: #999;
  outline: none;
  box-shadow: 0 0 0 2px #2121210d;
}
html[data-workbench-app] dialog.modal .alert { margin: 16px 24px 0; }
html[data-workbench-app] dialog.modal .btn { color: #555; border-color: #c7c7c7; }
html[data-workbench-app] dialog.modal .btn:hover { background: #fafbfc; color: #202020; }
html[data-workbench-app] dialog.modal .btn.primary { background: #212121; color: #fff; border-color: #212121; }
html[data-workbench-app] dialog.modal .btn.primary:hover { background: #080808; }
html[data-workbench-app] dialog.workbench-confirm { width: 440px; }
html[data-workbench-app] dialog.workbench-confirm .confirmation-content {
  margin: 0;
  padding: 24px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}
@media (max-width: 600px) {
  html[data-workbench-app] body .el-dialog:not(.is-fullscreen),
  html[data-workbench-app] body .el-message-box,
  html[data-workbench-app] dialog.modal { max-width: calc(100vw - 24px); }
  html[data-workbench-app] body :is(.el-dialog__body, .el-drawer__body),
  html[data-workbench-app] dialog.modal fieldset { padding: 16px; }
}