/* ─── CreateTaskModal 样式 ───────────────────────────── */

/* 覆盖 Semi Modal 内边距，由 __content 统一控制 */
.wk-create-task-modal .semi-modal-content {
  padding: 0 !important;
}

.wk-create-task-modal .semi-modal-header {
  margin: 0 !important;
}

.wk-create-task-modal .semi-modal-body-wrapper {
  margin: 0 !important;
}

.wk-create-task-modal__content {
  padding: 24px;
}

.wk-create-task-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--wk-text-primary, #1a1a1a);
  margin: 0 0 var(--wk-sp-4, 16px);
}

.wk-create-task-modal__field {
  margin-bottom: var(--wk-sp-3, 12px);
}

.wk-create-task-modal__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--wk-text-primary, #1a1a1a);
  margin-bottom: var(--wk-sp-1, 6px);
}

.wk-create-task-modal__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--wk-border-default, #e5e5e5);
  border-radius: 6px;
  font-size: 14px;
  background: var(--wk-bg-surface, #fff);
  color: var(--wk-text-primary, #1a1a1a);
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms;
}

.wk-create-task-modal__input:focus {
  border-color: var(--wk-brand-primary, #7C5CFC);
}

.wk-create-task-modal__input--readonly {
  background: var(--wk-bg-base, #f7f8fa);
  color: var(--wk-text-secondary, #555);
  cursor: default;
}

.wk-create-task-modal__input--readonly:focus {
  border-color: var(--wk-border-default, #e5e5e5);
}

.wk-create-task-modal__input::placeholder {
  color: var(--wk-text-disabled, #bbb);
}

.wk-create-task-modal__textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--wk-border-default, #e5e5e5);
  border-radius: 6px;
  font-size: 14px;
  background: var(--wk-bg-surface, #fff);
  color: var(--wk-text-primary, #1a1a1a);
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  transition: border-color 150ms;
}

.wk-create-task-modal__textarea:focus {
  border-color: var(--wk-brand-primary, #7C5CFC);
}

.wk-create-task-modal__textarea::placeholder {
  color: var(--wk-text-disabled, #bbb);
}

/* 快捷日期选择按钮组 */
.wk-create-task-modal__date-shortcuts {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.wk-create-task-modal__date-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--wk-border-default, #e5e5e5);
  border-radius: 6px;
  background: var(--wk-bg-surface, #fff);
  color: var(--wk-text-primary, #1a1a1a);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}

.wk-create-task-modal__date-btn:hover {
  background: var(--wk-bg-item-hover, rgba(0, 0, 0, 0.03));
  border-color: var(--wk-brand-primary, #7C5CFC);
}

.wk-create-task-modal__date-btn.active {
  background: var(--wk-brand-primary, #7C5CFC);
  color: #fff;
  border-color: var(--wk-brand-primary, #7C5CFC);
}

/* 添加备注按钮 */
.wk-create-task-modal__toggle-desc {
  border: none;
  background: none;
  color: var(--wk-brand-primary, #7C5CFC);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: opacity 150ms;
}

.wk-create-task-modal__toggle-desc:hover {
  opacity: 0.8;
}

/* 按钮组 */
.wk-create-task-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wk-sp-2, 8px);
  margin-top: var(--wk-sp-4, 16px);
}

.wk-create-task-modal__btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wk-create-task-modal__btn--cancel {
  background: transparent;
  color: var(--wk-text-secondary, #666);
}

.wk-create-task-modal__btn--cancel:hover {
  background: var(--wk-bg-item-hover, rgba(0, 0, 0, 0.05));
}

.wk-create-task-modal__btn--confirm {
  background: var(--wk-brand-primary, #7C5CFC);
  color: #fff;
}

.wk-create-task-modal__btn--confirm:hover:not(:disabled) {
  opacity: 0.9;
}

.wk-create-task-modal__btn--confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wk-create-task-modal__shortcut {
  font-size: 11px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  opacity: 0.6;
}

.wk-create-task-modal__btn--confirm .wk-create-task-modal__shortcut {
  background: rgba(255, 255, 255, 0.2);
}

/* DatePicker 对齐 input 样式 */
.wk-create-task-modal__datepicker.semi-datepicker {
  width: 100%;
}

.wk-create-task-modal__datepicker .semi-input-wrapper,
.wk-create-task-modal__datepicker .semi-input {
  border-radius: 6px !important;
  font-size: 14px !important;
  height: auto !important;
  background: var(--wk-bg-surface, #fff) !important;
}

.wk-create-task-modal__datepicker .semi-input-wrapper {
  border: 1px solid var(--wk-border-default, #e5e5e5) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
}

.wk-create-task-modal__datepicker .semi-input-wrapper:hover,
.wk-create-task-modal__datepicker .semi-input-wrapper-focus {
  border-color: var(--wk-brand-primary, #7C5CFC) !important;
  box-shadow: none !important;
}

.wk-create-task-modal__datepicker .semi-input {
  padding: 0 12px !important;
  color: var(--wk-text-primary, #1a1a1a) !important;
}

.wk-create-task-modal__datepicker .semi-input::placeholder {
  color: var(--wk-text-disabled, #bbb) !important;
}

.wk-create-task-modal__datepicker .semi-input-suffix {
  color: var(--wk-text-tertiary, rgba(0,0,0,0.45)) !important;
}
