// 全景图合成控制区域样式
.synthesis-controls {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;

  .control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h4 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    .synthesis-status {
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;

      &.status-idle {
        background: rgba(255, 255, 255, 0.2);
      }

      &.status-processing {
        background: #ffc107;
        color: #000;
        animation: pulse 2s infinite;
      }
    }
  }

  .quality-selector {
    margin-bottom: 20px;

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .quality-options {
      display: flex;
      gap: 10px;

      .quality-btn {
        padding: 8px 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        background: transparent;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: rgba(255, 255, 255, 0.6);
        }

        &.active {
          border-color: white;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }

  .batch-controls {
    margin-bottom: 20px;

    .batch-toggle {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      cursor: pointer;

      input[type="checkbox"] {
        margin-right: 8px;
      }
    }

    .space-selection {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 15px;
      max-height: 200px;
      overflow-y: auto;

      .space-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        &:last-child {
          border-bottom: none;
        }

        &.selected {
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          padding: 8px;
        }

        .space-checkbox {
          display: flex;
          align-items: center;
          cursor: pointer;

          input[type="checkbox"] {
            margin-right: 8px;
          }
        }

        .space-type {
          font-size: 12px;
          opacity: 0.8;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;

      &.btn-primary {
        background: #007bff;
        color: white;

        &:hover:not(:disabled) {
          background: #0056b3;
        }

        &:disabled {
          background: rgba(255, 255, 255, 0.3);
          cursor: not-allowed;
        }
      }

      &.btn-secondary {
        background: rgba(255, 255, 255, 0.2);
        color: white;

        &:hover:not(:disabled) {
          background: rgba(255, 255, 255, 0.3);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      &.btn-success {
        background: #28a745;
        color: white;

        &:hover:not(:disabled) {
          background: #1e7e34;
        }

        &:disabled {
          background: rgba(255, 255, 255, 0.3);
          cursor: not-allowed;
        }
      }

      i {
        margin-right: 6px;
      }
    }
  }
}

// 合成统计样式
.synthesis-stats {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;

  .stats-header {
    margin-bottom: 15px;

    h4 {
      margin: 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;

    .stat-item {
      text-align: center;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 5px;

        .time-suffix,
        .size-suffix {
          font-size: 14px;
          font-weight: 400;
          color: #666;
        }
      }

      .stat-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }
  }
}

// 任务列表样式
.task-list {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;

  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h4 {
      margin: 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }

    .task-count {
      background: #007bff;
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }
  }

  .task-items {
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s ease;

      &:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
      }

      &.status-pending {
        border-left: 4px solid #6c757d;
      }

      &.status-processing {
        border-left: 4px solid #ffc107;
        background: #fff9c4;
      }

      &.status-completed {
        border-left: 4px solid #28a745;
      }

      &.status-failed {
        border-left: 4px solid #dc3545;
        background: #f8d7da;
      }

      .task-info {
        flex: 1;

        .task-name {
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          font-size: 14px;
        }

        .task-meta {
          display: flex;
          gap: 15px;
          font-size: 12px;
          color: #666;

          .quality {
            background: #e9ecef;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 500;
          }

          .progress {
            color: #ffc107;
            font-weight: 500;
          }

          .render-time {
            color: #28a745;
          }
        }
      }

      .task-status {
        margin: 0 15px;

        .status-badge {
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;

          &.badge-pending {
            background: #6c757d;
            color: white;
          }

          &.badge-processing {
            background: #ffc107;
            color: #000;
          }

          &.badge-completed {
            background: #28a745;
            color: white;
          }

          &.badge-failed {
            background: #dc3545;
            color: white;
          }
        }
      }

      .task-actions {
        display: flex;
        gap: 8px;

        .btn {
          padding: 6px 12px;
          border: none;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.3s ease;

          &.btn-sm {
            padding: 4px 8px;
          }

          &.btn-primary {
            background: #007bff;
            color: white;

            &:hover {
              background: #0056b3;
            }
          }

          &.btn-success {
            background: #28a745;
            color: white;

            &:hover {
              background: #1e7e34;
            }
          }

          &.btn-warning {
            background: #ffc107;
            color: #000;

            &:hover {
              background: #e0a800;
            }
          }

          &.btn-danger {
            background: #dc3545;
            color: white;

            &:hover {
              background: #c82333;
            }
          }

          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
}

.panoramic-synthesis-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;

    .project-name {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #262626;
    }

    .status-badge {
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;

      &.status-draft {
        background: #f0f0f0;
        color: #595959;
      }

      &.status-processing {
        background: #e6f7ff;
        color: #1890ff;
      }

      &.status-completed {
        background: #f6ffed;
        color: #52c41a;
      }

      &.status-published {
        background: #fff7e6;
        color: #fa8c16;
      }
    }
  }

  .card-content {
    margin-bottom: 20px;

    .info-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin-bottom: 20px;

      .info-item {
        display: flex;
        align-items: center;

        .label {
          font-weight: 500;
          color: #595959;
          margin-right: 8px;
          font-size: 14px;
        }

        .value {
          color: #262626;
          font-size: 14px;
        }
      }
    }

    .spaces-section {
      h4 {
        margin: 0 0 12px 0;
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }

      .space-list {
        .space-item {
          background: #fafafa;
          border: 1px solid #e8e8e8;
          border-radius: 6px;
          padding: 12px;
          margin-bottom: 8px;

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

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

            .space-name {
              font-weight: 500;
              color: #262626;
              margin-right: 12px;
            }

            .space-type {
              background: #f0f0f0;
              color: #595959;
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
              margin-right: 12px;
            }

            .space-status {
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
              font-weight: 500;

              &.status-pending {
                background: #f0f0f0;
                color: #595959;
              }

              &.status-processing {
                background: #e6f7ff;
                color: #1890ff;
              }

              &.status-completed {
                background: #f6ffed;
                color: #52c41a;
              }

              &.status-failed {
                background: #fff1f0;
                color: #f5222d;
              }
            }
          }

          .space-progress {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;

            .progress-bar {
              flex: 1;
              height: 8px;
              background: #f0f0f0;
              border-radius: 4px;
              overflow: hidden;

              .progress-fill {
                height: 100%;
                border-radius: 4px;
                transition: width 0.3s ease;
              }
            }

            .progress-text {
              font-size: 12px;
              color: #595959;
              min-width: 40px;
              text-align: right;
            }
          }

          .space-images {
            .image-count {
              font-size: 12px;
              color: #8c8c8c;
            }
          }
        }
      }
    }
  }

  .card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;

    .btn {
      padding: 8px 16px;
      border: 1px solid;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &.btn-primary {
        background: #1890ff;
        border-color: #1890ff;
        color: #fff;

        &:hover:not(:disabled) {
          background: #40a9ff;
          border-color: #40a9ff;
        }
      }

      &.btn-secondary {
        background: #52c41a;
        border-color: #52c41a;
        color: #fff;

        &:hover:not(:disabled) {
          background: #73d13d;
          border-color: #73d13d;
        }
      }

      &.btn-outline {
        background: transparent;
        border-color: #d9d9d9;
        color: #595959;

        &:hover:not(:disabled) {
          border-color: #1890ff;
          color: #1890ff;
        }
      }

      &.btn-danger {
        background: #ff4d4f;
        border-color: #ff4d4f;
        color: #fff;

        &:hover:not(:disabled) {
          background: #ff7875;
          border-color: #ff7875;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .panoramic-synthesis-card {
    padding: 16px;

    .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;

      .status-badge {
        align-self: flex-start;
      }
    }

    .card-content {
      .info-section {
        grid-template-columns: 1fr;
      }
    }

    .card-actions {
      flex-wrap: wrap;
      justify-content: center;

      .btn {
        flex: 1;
        min-width: 80px;
      }
    }
  }
}