/* ============================================================================
   Status Page
   ============================================================================ */

.ffmpeg-media-status-page {
  max-width: 1100px;
  font-family: var(--gin-font, inherit);
  color: var(--ffmpeg-text);
}

.ffmpeg-status-header {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ffmpeg-status-header h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ffmpeg-title);
}

.ffmpeg-status-main {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.ffmpeg-status-content {
  flex: 1;
  min-width: 0;
}

.ffmpeg-status-sidebar {
  flex: 0 0 300px;
  min-width: 0;
  position: sticky;
  top: calc(var(--drupal-displace-offset-top, 0px) + 1rem);
  max-height: calc(100vh - var(--drupal-displace-offset-top, 0px) - 2rem);
  overflow-y: auto;
}

/* Status page section accent variants */

.ffmpeg-status-section--progress {
  --ffmpeg-section-accent: var(--ffmpeg-accent);
  --ffmpeg-section-soft: var(--ffmpeg-accent-soft);
}

.ffmpeg-status-section--progress.ffmpeg-status-section--status-completed {
  --ffmpeg-section-accent: var(--ffmpeg-success);
  --ffmpeg-section-soft: var(--ffmpeg-success-bg);
}

.ffmpeg-status-section--progress.ffmpeg-status-section--status-failed {
  --ffmpeg-section-accent: var(--ffmpeg-danger);
  --ffmpeg-section-soft: var(--ffmpeg-danger-bg);
}

.ffmpeg-status-section--info {
  --ffmpeg-section-accent: var(--ffmpeg-info);
  --ffmpeg-section-soft: var(--ffmpeg-info-bg);
}

.ffmpeg-status-section--info .ffmpeg-video-info {
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
}

.ffmpeg-status-section--outputs {
  --ffmpeg-section-accent: var(--ffmpeg-success);
  --ffmpeg-section-soft: var(--ffmpeg-success-bg);
}

.ffmpeg-status-section--actions {
  --ffmpeg-section-accent: var(--ffmpeg-accent);
  --ffmpeg-section-soft: var(--ffmpeg-accent-soft);
}

.ffmpeg-status-section--actions .ffmpeg-actions {
  margin-top: 0;
}
