// 交付执行阶段样式

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 20px;

  ion-spinner {
    --color: var(--ion-color-primary);
    transform: scale(1.5);
    margin-bottom: 16px;
  }

  p {
    color: var(--ion-color-medium);
  }
}

.stage-delivery-container {
  ion-card {
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .progress-card {
    background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
    color: white;

    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }

      .progress-value {
        font-size: 24px;
        font-weight: 700;
      }
    }

    ion-progress-bar {
      --background: rgba(255, 255, 255, 0.3);
      --progress-background: white;
      height: 8px;
      border-radius: 4px;
    }

    .progress-detail {
      margin: 8px 0 0;
      font-size: 13px;
      opacity: 0.9;
    }
  }

  .space-deliverables-card {
    .deliverable-item {
      padding: 16px;
      background-color: var(--ion-color-light);
      border-radius: 8px;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .deliverable-header {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;

        ion-badge {
          font-size: 11px;
          padding: 4px 10px;
        }
      }

      .files-section {
        margin-bottom: 16px;

        .empty-text {
          color: var(--ion-color-medium);
          font-size: 13px;
          font-style: italic;
          margin: 8px 0;
        }

        .files-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 12px;

          .file-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            ion-icon {
              font-size: 48px;
              color: var(--ion-color-medium);
            }

            ion-button {
              position: absolute;
              top: 4px;
              right: 4px;
            }
          }
        }
      }

      .quality-check-section,
      .review-section {
        padding-top: 16px;
        border-top: 1px solid var(--ion-color-light-shade);

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }

        h4 {
          margin: 0 0 12px;
          font-size: 14px;
          font-weight: 600;
          color: var(--ion-color-dark);
        }

        ion-list {
          background: white;
          border-radius: 8px;
          padding: 8px;
          margin-bottom: 12px;

          ion-item {
            --padding-start: 8px;
          }
        }

        .review-buttons {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
        }
      }

      .review-result {
        padding: 12px;
        background-color: white;
        border-radius: 8px;
        margin-top: 16px;

        .result-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;

          ion-icon {
            font-size: 24px;
          }

          .time {
            margin-left: auto;
            font-size: 11px;
            color: var(--ion-color-medium);
          }
        }

        p {
          margin: 0;
          font-size: 13px;
          color: var(--ion-color-medium);
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .stage-delivery-container {
    .space-deliverables-card {
      .deliverable-item {
        .files-section {
          .files-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }
      }
    }
  }
}
