/* ==========================================================================
   DOCUMENT UPLOAD ZONE STYLES
   ========================================================================== */

.doc-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--muted-foreground) / 0.03);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-in-out);
  min-height: 56px;
}

.doc-upload-zone:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.04);
}

.doc-upload-zone.drag-over {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  transform: scale(1.01);
}

.doc-upload-zone.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.doc-upload-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.doc-upload-icon {
  font-size: var(--font-size-lg);
  color: hsl(var(--muted-foreground));
  transition: color var(--transition-base) var(--ease-in-out);
}

.doc-upload-zone:hover .doc-upload-icon {
  color: hsl(var(--primary));
}

.doc-upload-text {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: hsl(var(--foreground));
}

.doc-upload-text .text-muted {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
}

.doc-upload-limits {
  font-size: var(--font-size-xs);
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* File List */
.doc-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.doc-file-list:empty {
  display: none;
}

.doc-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  animation: fadeInUp 0.3s ease-out;
}

.doc-file-icon {
  font-size: var(--font-size-base);
  color: hsl(var(--primary));
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.doc-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  color: hsl(var(--foreground));
}

.doc-file-size {
  color: hsl(var(--muted-foreground));
  font-size: 0.7rem;
  flex-shrink: 0;
}

.doc-file-status {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.doc-file-status.uploading {
  color: hsl(var(--primary));
}

.doc-file-status.success {
  color: rgb(var(--success));
}

.doc-file-status.error {
  color: rgb(var(--danger));
}

.doc-file-remove {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 2px;
  font-size: var(--font-size-xs);
  transition: color var(--transition-base) var(--ease-in-out);
  flex-shrink: 0;
}

.doc-file-remove:hover {
  color: rgb(var(--danger));
}

/* Mobile responsive */
@media (max-width: 639px) {
  .doc-upload-zone {
    padding: var(--space-sm) var(--space-md);
    min-height: 48px;
  }

  .doc-upload-content {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .doc-file-item {
    padding: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .doc-upload-limits span,
  .doc-upload-limits small {
    font-size: 0.65rem;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  .doc-upload-zone {
    min-height: 56px;
    touch-action: manipulation;
  }

  .doc-file-remove {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}