// 組件樣式

// 狀態標籤樣式
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: $border-radius-base;
  font-size: $font-size-small;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  &.pending {
    background-color: map-get($status-colors, 'PENDING');
    color: white;
  }
  
  &.processing {
    background-color: map-get($status-colors, 'PROCESSING');
    color: white;
  }
  
  &.completed {
    background-color: map-get($status-colors, 'COMPLETED');
    color: white;
  }
  
  &.failed {
    background-color: map-get($status-colors, 'FAILED');
    color: white;
  }
  
  &.retry {
    background-color: map-get($status-colors, 'RETRY');
    color: white;
  }
}

// 檔案圖示樣式
.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: $border-radius-base;
  color: white;
  font-size: $font-size-small;
  font-weight: bold;
  
  &.docx, &.doc {
    background-color: map-get($file-type-colors, 'docx');
  }
  
  &.pptx, &.ppt {
    background-color: map-get($file-type-colors, 'pptx');
  }
  
  &.xlsx, &.xls {
    background-color: map-get($file-type-colors, 'xlsx');
  }
  
  &.pdf {
    background-color: map-get($file-type-colors, 'pdf');
  }
}

// 進度條樣式
.progress-bar {
  width: 100%;
  height: 6px;
  background-color: $border-color-lighter;
  border-radius: 3px;
  overflow: hidden;
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, $primary-color, lighten($primary-color, 10%));
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
      background-size: 20px 20px;
      animation: progress-stripes 1s linear infinite;
    }
  }
}

@keyframes progress-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

// 上傳區域樣式
.upload-area {
  border: 2px dashed $border-color;
  border-radius: $border-radius-base;
  background-color: $bg-color-light;
  transition: all $transition-duration-base;
  
  &:hover, &.dragover {
    border-color: $primary-color;
    background-color: rgba($primary-color, 0.05);
  }
  
  &.disabled {
    border-color: $border-color-lighter;
    background-color: $border-color-extra-light;
    cursor: not-allowed;
    
    * {
      pointer-events: none;
    }
  }
}

// 任務卡片樣式
.job-card {
  @include card-style;
  margin-bottom: $spacing-md;
  cursor: pointer;
  position: relative;
  
  &:hover {
    border-color: $primary-color;
    transform: translateY(-1px);
  }
  
  .job-header {
    @include flex-between;
    margin-bottom: $spacing-sm;
    
    .job-title {
      font-weight: 600;
      color: $text-color-primary;
      @include text-ellipsis;
      max-width: 60%;
    }
    
    .job-actions {
      display: flex;
      gap: $spacing-xs;
    }
  }
  
  .job-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-sm;
    font-size: $font-size-small;
    color: $text-color-secondary;
    
    @include respond-to(sm) {
      grid-template-columns: 1fr;
    }
  }
  
  .job-progress {
    margin-top: $spacing-sm;
    
    .progress-text {
      @include flex-between;
      font-size: $font-size-small;
      color: $text-color-secondary;
      margin-bottom: $spacing-xs;
    }
  }
  
  .job-footer {
    @include flex-between;
    margin-top: $spacing-sm;
    padding-top: $spacing-sm;
    border-top: 1px solid $border-color-lighter;
    
    .job-time {
      font-size: $font-size-small;
      color: $text-color-secondary;
    }
  }
}

// 統計卡片樣式
.stat-card {
  @include card-style($spacing-lg);
  text-align: center;
  
  .stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto $spacing-sm;
    border-radius: 50%;
    @include flex-center;
    
    &.primary { background-color: rgba($primary-color, 0.1); color: $primary-color; }
    &.success { background-color: rgba($success-color, 0.1); color: $success-color; }
    &.warning { background-color: rgba($warning-color, 0.1); color: $warning-color; }
    &.danger { background-color: rgba($danger-color, 0.1); color: $danger-color; }
    &.info { background-color: rgba($info-color, 0.1); color: $info-color; }
  }
  
  .stat-value {
    font-size: $font-size-extra-large;
    font-weight: bold;
    color: $text-color-primary;
    margin-bottom: $spacing-xs;
  }
  
  .stat-label {
    font-size: $font-size-small;
    color: $text-color-secondary;
    margin-bottom: $spacing-sm;
  }
  
  .stat-change {
    font-size: $font-size-small;
    
    &.positive { color: $success-color; }
    &.negative { color: $danger-color; }
  }
}

// 空狀態樣式
.empty-state {
  text-align: center;
  padding: $spacing-xxl * 2;
  color: $text-color-secondary;
  
  .empty-icon {
    font-size: 64px;
    color: $border-color;
    margin-bottom: $spacing-lg;
  }
  
  .empty-title {
    font-size: $font-size-large;
    color: $text-color-primary;
    margin-bottom: $spacing-sm;
  }
  
  .empty-description {
    font-size: $font-size-base;
    line-height: 1.6;
    margin-bottom: $spacing-lg;
  }
}

// 語言標籤樣式
.language-tag {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  background-color: $primary-color;
  color: white;
  border-radius: $border-radius-small;
  font-size: $font-size-small;
  
  &:last-child {
    margin-right: 0;
  }
}

// 載入覆蓋層
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  @include flex-center;
  z-index: $z-index-modal;
  
  .loading-content {
    text-align: center;
    
    .loading-spinner {
      @include loading-spinner(32px);
      margin: 0 auto $spacing-md;
    }
    
    .loading-text {
      color: $text-color-secondary;
      font-size: $font-size-base;
    }
  }
}

// 工具提示樣式覆蓋
.custom-tooltip {
  &.el-popper {
    max-width: 300px;
    
    .el-popper__arrow::before {
      border-color: rgba(0, 0, 0, 0.8);
    }
  }
  
  .el-tooltip__content {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: $border-radius-base;
    padding: $spacing-sm $spacing-md;
    font-size: $font-size-small;
    line-height: 1.4;
  }
}