/* ========================================
   CSS 變數系統 (Design Tokens) - 串接全站規範
   ======================================== */
:root {
  /* 使用全站變數作為真理來源 */
  --p-primary: var(--md-sys-color-primary);
  --p-on-primary: var(--md-sys-color-on-primary);
  --p-surface: var(--md-sys-color-surface);
  --p-on-surface: var(--md-sys-color-on-surface);
  --p-outline: var(--md-sys-color-outline);
  --p-outline-variant: var(--md-sys-color-outline-variant);

  /* 工具特有的間距與圓角（可保留或微調） */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-md: 12px;
}

/* ========================================
   功能元件重構
   ======================================== */

/* 檔案列表項目 */
.file-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--p-outline-variant);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  margin-bottom: var(--space-md);
}

.file-item:hover {
  background-color: var(--md-sys-color-surface-container);
  border-color: var(--p-primary);
  box-shadow: var(--md-sys-elevation-1);
}

.file-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.file-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--p-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* 狀態標籤 */
.file-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.status-converting {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  animation: pulse 1.5s infinite;
}

.status-completed {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* 下載按鈕（針對列表項目） */
.btn-download {
  padding: 10px 20px;
  background-color: var(--p-primary);
  color: var(--p-on-primary);
  border: none;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-download:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: var(--md-sys-elevation-2);
}

.btn-download:disabled {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 拖放區域互動 */
#dropZone.drag-over {
  background-color: var(--md-sys-color-primary-container) !important;
  border-color: var(--p-primary) !important;
  border-style: solid !important;
}

/* 動畫 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ========================================
   響應式調整
   ======================================== */
@media (max-width: 768px) {
  .file-item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .file-info {
    align-items: center;
  }

  .file-actions {
    justify-content: center;
    width: 100%;
  }

  .btn-download {
    width: 100%;
  }
}