ion-header {
  ion-toolbar {
    --padding-start: 12px;
    --padding-end: 12px;

    ion-title {
      font-weight: 500;
      letter-spacing: 0.5px;
    }
  }
}

ion-content {
  --padding-top: 16px;
  --padding-bottom: 24px;
}

.tags-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;

  ion-chip {
    --background: var(--ion-color-light);
    --color: var(--ion-color-medium);
    transition: all 0.2s ease;

    &:hover {
      --background: var(--ion-color-light-shade);
    }

    ion-icon {
      font-size: 16px;
      margin-left: 6px;
      cursor: pointer;
    }
  }
}

.subtask-section {
  border-radius: 12px;
  background: var(--ion-color-light);
  padding: 8px 0;

  ion-item {
    --background: transparent;
    --inner-padding-end: 8px;
  }

  .subtask-list {
    background: white;
    border-radius: 8px;
    margin: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    ion-item {
      --min-height: 48px;
      --padding-start: 16px;

      ion-button {
        --padding-start: 0;
        --padding-end: 0;
      }
    }
  }
}

ion-datetime {
  --background: white;
  border-radius: 16px;
  margin: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  &::part(calendar-day):hover {
    background: var(--ion-color-light);
  }
}

ion-textarea {
  --padding-top: 12px;
  --padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* 时间展示区域样式 */
.time-display {
  --min-height: 48px;
  --padding-start: 16px;
  --inner-padding-end: 12px;

  ion-label {
    font-size: 16px;
    color: var(--ion-color-medium);
  }

  .time-values {
    display: flex;
    align-items: center;
    gap: 8px;

    span {
      font-size: 14px;
      color: var(--ion-color-dark);
    }

    .time-separator {
      color: var(--ion-color-medium-shade);
      transform: scale(1.2);
    }
  }
}
