@import '../ios-theme.scss';

:host {
  display: block;
  background-color: $ios-background-secondary;
  min-height: 100vh;
  padding: $ios-spacing-lg;
}

.dashboard-header {
  margin-bottom: $ios-spacing-xxl;
  h1 {
    font-size: $ios-font-size-xl;
    font-weight: $ios-font-weight-bold;
    color: $ios-text-primary;
    margin: 0;
  }
}

.dashboard-main {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $ios-spacing-lg;
  h2 {
    font-size: $ios-font-size-lg;
    font-weight: $ios-font-weight-semibold;
    color: $ios-text-primary;
    margin: 0;
  }
}

.section-filters {
  display: flex;
  gap: $ios-spacing-md;
  select {
    padding: $ios-spacing-sm $ios-spacing-md;
    border: 1px solid $ios-border;
    border-radius: $ios-radius-md;
    background-color: $ios-background;
    font-size: $ios-font-size-sm;
    color: $ios-text-primary;
    cursor: pointer;
    &:focus {
      outline: none;
      border-color: $ios-primary;
    }
  }
}

/* 项目监控大盘样式 */
.monitoring-section {
  background-color: $ios-card-background;
  border-radius: $ios-radius-lg;
  padding: $ios-spacing-xl;
  margin-bottom: $ios-spacing-xl;
  box-shadow: $ios-shadow-card;
}

.project-gantt-chart {
  .project-bar {
    display: flex;
    gap: $ios-spacing-lg;
    padding: $ios-spacing-lg 0;
    border-bottom: 1px solid $ios-border;
    &:last-child {
      border-bottom: none;
    }
    .project-info {
      flex: 0 0 300px;
      .project-name {
        font-size: $ios-font-size-base;
        font-weight: $ios-font-weight-medium;
        color: $ios-primary;
        cursor: pointer;
        margin: 0 0 $ios-spacing-xs 0;
        &:hover {
          text-decoration: underline;
        }
      }
      .project-details {
        font-size: $ios-font-size-sm;
        color: $ios-text-secondary;
        margin: 0 0 $ios-spacing-xs 0;
      }
      .project-deadline {
        font-size: $ios-font-size-sm;
        color: $ios-text-secondary;
        margin: 0;
        &.overdue-warning {
          color: $ios-danger;
          font-weight: $ios-font-weight-medium;
        }
      }
    }
    .gantt-bars {
      flex: 1;
      position: relative;
      height: 40px;
      background-color: $ios-background-secondary;
      border-radius: $ios-radius-md;
      overflow: hidden;
      .phase-bar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 24px;
        border-radius: $ios-radius-sm;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: $ios-feedback-hover;
        .phase-label {
          font-size: $ios-font-size-xs;
          color: $ios-background;
          font-weight: $ios-font-weight-medium;
          text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
      }
      .phase-建模 {
        background-color: $ios-primary-light;
      }
      .phase-渲染 {
        background-color: $ios-info;
      }
      .phase-后期 {
        background-color: $ios-warning;
      }
      .phase-交付 {
        background-color: $ios-success;
      }
      .phase-bar.current {
        box-shadow: 0 0 0 2px $ios-primary;
        transform: translateY(-50%) scale(1.05);
      }
      .phase-bar.completed {
        opacity: 0.6;
      }
    }
  }
}

/* 工作量评估样式 */
.workload-section {
  background-color: $ios-card-background;
  border-radius: $ios-radius-lg;
  padding: $ios-spacing-xl;
  margin-bottom: $ios-spacing-xl;
  box-shadow: $ios-shadow-card;
}

.workload-calculator {
  display: flex;
  gap: $ios-spacing-xl;
  .calculator-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $ios-spacing-lg;
    .form-group {
      display: flex;
      flex-direction: column;
      gap: $ios-spacing-sm;
      label {
        font-size: $ios-font-size-sm;
        font-weight: $ios-font-weight-medium;
        color: $ios-text-primary;
      }
      input,
      select {
        padding: $ios-spacing-sm $ios-spacing-md;
        border: 1px solid $ios-border;
        border-radius: $ios-radius-md;
        background-color: $ios-background;
        font-size: $ios-font-size-base;
        color: $ios-text-primary;
        &:focus {
          outline: none;
          border-color: $ios-primary;
        }
      }
    }
    .btn-calculate {
      background-color: $ios-primary;
      color: $ios-background;
      border: none;
      border-radius: $ios-radius-md;
      padding: $ios-spacing-md;
      font-size: $ios-font-size-base;
      font-weight: $ios-font-weight-medium;
      cursor: pointer;
      transition: $ios-feedback-tap;
      &:hover {
        background-color: $ios-primary-light;
        transform: translateY(-1px);
      }
      &:active {
        transform: translateY(0);
      }
    }
  }
  .workload-result {
    flex: 1;
    background-color: $ios-background-secondary;
    border-radius: $ios-radius-md;
    padding: $ios-spacing-lg;
    h3 {
      font-size: $ios-font-size-base;
      font-weight: $ios-font-weight-medium;
      color: $ios-text-primary;
      margin: 0 0 $ios-spacing-lg 0;
    }
    p {
      margin: 0 0 $ios-spacing-md 0;
      font-size: $ios-font-size-base;
      color: $ios-text-primary;
      strong {
        font-weight: $ios-font-weight-medium;
      }
    }
    .btn-sync {
      background-color: $ios-success;
      color: $ios-background;
      border: none;
      border-radius: $ios-radius-md;
      padding: $ios-spacing-sm $ios-spacing-lg;
      font-size: $ios-font-size-sm;
      font-weight: $ios-font-weight-medium;
      cursor: pointer;
      transition: $ios-feedback-tap;
      &:hover {
        background-color: #2AA049;
        transform: translateY(-1px);
      }
    }
  }
}

/* 待办任务样式 */
.todo-section {
  background-color: $ios-card-background;
  border-radius: $ios-radius-lg;
  padding: $ios-spacing-xl;
  margin-bottom: $ios-spacing-xl;
  box-shadow: $ios-shadow-card;
}

.todo-list {
  .todo-item {
    padding: $ios-spacing-lg;
    border-radius: $ios-radius-md;
    margin-bottom: $ios-spacing-md;
    background-color: $ios-background;
    border: 1px solid $ios-border;
    transition: $ios-feedback-hover;
    &:last-child {
      margin-bottom: 0;
    }
    &.priority-high {
      border-left: 4px solid $ios-danger;
    }
    &.priority-medium {
      border-left: 4px solid $ios-warning;
    }
    &.priority-low {
      border-left: 4px solid $ios-info;
    }
    &:hover {
      transform: translateY(-1px);
      box-shadow: $ios-shadow-sm;
    }
    .todo-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $ios-spacing-md;
      h3 {
        font-size: $ios-font-size-base;
        font-weight: $ios-font-weight-medium;
        color: $ios-text-primary;
        margin: 0;
      }
      .task-priority {
        font-size: $ios-font-size-xs;
        padding: $ios-spacing-xs $ios-spacing-sm;
        border-radius: $ios-radius-full;
        font-weight: $ios-font-weight-medium;
      }
    }
    .todo-info {
      margin-bottom: $ios-spacing-md;
      p {
        margin: 0 0 $ios-spacing-xs 0;
        font-size: $ios-font-size-sm;
        color: $ios-text-secondary;
      }
      .task-deadline {
        font-size: $ios-font-size-xs;
        color: $ios-text-tertiary;
      }
    }
    .todo-actions {
      .btn-handle {
        background-color: $ios-primary;
        color: $ios-background;
        border: none;
        border-radius: $ios-radius-md;
        padding: $ios-spacing-sm $ios-spacing-lg;
        font-size: $ios-font-size-sm;
        font-weight: $ios-font-weight-medium;
        cursor: pointer;
        transition: $ios-feedback-tap;
        &:hover {
          background-color: $ios-primary-light;
        }
      }
    }
  }
}

/* 超期提醒样式 */
.overdue-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: $ios-card-background;
  border-radius: $ios-radius-lg;
  padding: $ios-spacing-xl;
  box-shadow: $ios-shadow-lg;
  z-index: 1000;
  min-width: 400px;
  .alert-content {
    h3 {
      font-size: $ios-font-size-lg;
      font-weight: $ios-font-weight-semibold;
      color: $ios-danger;
      margin: 0 0 $ios-spacing-lg 0;
    }
    ul {
      margin: 0 0 $ios-spacing-lg 0;
      padding-left: $ios-spacing-xl;
      li {
        font-size: $ios-font-size-base;
        color: $ios-text-primary;
        margin-bottom: $ios-spacing-sm;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .btn-close {
      background-color: $ios-text-tertiary;
      color: $ios-text-primary;
      border: none;
      border-radius: $ios-radius-md;
      padding: $ios-spacing-sm $ios-spacing-lg;
      font-size: $ios-font-size-sm;
      font-weight: $ios-font-weight-medium;
      cursor: pointer;
      transition: $ios-feedback-tap;
      &:hover {
        background-color: $ios-text-secondary;
        color: $ios-background;
      }
    }
  }
}