/* Upload Page Styles */

.upload-container {
  min-height: 100vh;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
}

/* Header */
.upload-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.back-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s;
}

.back-link:hover {
  color: var(--color-accent);
}

.upload-header h1 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* Main Content */
.upload-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

/* Upload States */
.upload-state {
  display: none;
  width: 100%;
  max-width: 600px;
}

.upload-state.active {
  display: block;
}

/* Dropzone */
.upload-dropzone {
  background: var(--color-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
  transition: all 0.2s;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.dropzone-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.upload-dropzone h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.upload-dropzone p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.select-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.select-folder-btn:hover {
  background: #0056b3;
}

/* Folder Structure Hint */
.folder-structure-hint {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.folder-structure-hint h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.folder-structure-hint pre {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* Confirm State */
.confirm-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.confirm-header h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
}

.confirm-header p {
  color: var(--color-text-secondary);
}

.cabinet-preview {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.cabinet-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.cabinet-icon {
  color: var(--color-accent);
}

.cabinet-details h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.cabinet-stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.cabinet-stats .dot {
  opacity: 0.5;
}

.drawer-list-preview {
  max-height: 200px;
  overflow-y: auto;
}

.drawer-preview-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.drawer-preview-item:last-child {
  border-bottom: none;
}

.drawer-preview-item svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.drawer-preview-item .name {
  flex: 1;
}

.drawer-preview-item .count {
  color: var(--color-text-muted);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-white);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.btn-text {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.btn-text:hover {
  color: var(--color-accent);
}

/* Uploading State */
.uploading-content {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
}

.uploading-icon {
  margin-bottom: var(--spacing-lg);
  color: var(--color-accent);
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.uploading-content h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.uploading-content > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.progress-section {
  margin-bottom: var(--spacing-lg);
}

.progress-bar-large {
  height: 12px;
  background: var(--color-input-bg);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.progress-bar-large .progress-fill {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width 0.3s ease;
}

.progress-stats {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.current-file {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.current-file .label {
  margin-right: var(--spacing-xs);
}

.current-file .filename {
  font-family: monospace;
  color: var(--color-text-secondary);
}

.upload-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: #fff3cd;
  border-radius: var(--radius-md);
  color: #856404;
  font-size: var(--font-size-sm);
}

/* Complete State */
.complete-content {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
}

.complete-icon {
  color: var(--color-success);
  margin-bottom: var(--spacing-lg);
}

.complete-content h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.complete-content > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.complete-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-accent);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.complete-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Error State */
.error-content {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
}

.error-icon {
  color: var(--color-error);
  margin-bottom: var(--spacing-lg);
}

.error-content h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.error-content > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}