/**
 * AniWorld - Table Styles
 *
 * Table, list, and queue item styles.
 */

/* Search results */
.search-results {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  margin-top: var(--spacing-lg);
}

.search-results h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-subtitle);
  color: var(--color-text-primary);
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-duration) var(--transition-easing);
}

.search-result-item:hover {
  background-color: var(--color-surface-hover);
}

.search-result-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Download Queue Section */
.download-queue-section {
  margin-bottom: var(--spacing-xxl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.queue-header h2 {
  margin: 0;
  font-size: var(--font-size-subtitle);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.queue-header i {
  color: var(--color-accent);
}

.queue-progress {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Current download */
.current-download {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.current-download-header {
  margin-bottom: var(--spacing-md);
}

.current-download-header h3 {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  font-weight: 600;
}

.current-download-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--color-accent);
}

.download-info {
  flex: 1;
}

.serie-name {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.episode-info {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

/* Queue list */
.queue-list-container {
  padding: var(--spacing-lg);
}

.queue-list-container h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  font-weight: 600;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.queue-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-md);
  border-left: 3px solid var(--color-divider);
}

.queue-item-index {
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
  font-weight: 600;
  min-width: 20px;
}

.queue-item-name {
  flex: 1;
  color: var(--color-text-secondary);
}

.queue-item-status {
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}

.queue-empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Stats grid */
.queue-stats-section {
  margin-bottom: var(--spacing-xl);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* Drag and Drop Styles */
.draggable-item {
  cursor: move;
  user-select: none;
}

.draggable-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}

.draggable-item.drag-over {
  border-top: 3px solid var(--color-primary);
  margin-top: 8px;
}

.drag-handle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  cursor: grab;
  font-size: 1.2rem;
  padding: var(--spacing-xs);
  transition: color var(--transition-duration);
}

.drag-handle:hover {
  color: var(--color-primary);
}

.drag-handle:active {
  cursor: grabbing;
}

.sortable-list {
  position: relative;
  min-height: 100px;
}

.pending-queue-list {
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .queue-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }

  .queue-item-index {
    min-width: auto;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}
