/*
 * status.css — Job status page styles
 *
 * Consumed by: /jobs/:id (the in-progress status page)
 *
 * Part of the contractor ENTRY flow, so it adopts the CONTRACTOR-SURFACE
 * palette (--color-cc-*, CompanyCam's real shipping brand) shared with
 * cc.css — navy ink #142334, warm neutrals, blue #0967D2 primary action.
 * The page chrome (card, wordmark, address heading) lives in cc.css; this
 * file styles the pipeline-stage list. The "View report" CTA is the blue
 * .cc-btn (defined in cc.css), not the report-viewer orange.
 */

/* ==========================================================================
   Job status page layout
   ========================================================================== */

.job-status-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ==========================================================================
   Stage progress list
   ========================================================================== */

.job-status__stages {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.job-status__stage {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-cc-line, #E7E8EA);
  font-size: var(--text-body, 0.875rem);
  color: var(--color-cc-ink-55, rgba(20, 35, 52, 0.55));
}

.job-status__stage:last-child {
  border-bottom: none;
}

/* Completed stage: full-ink text, checkmark icon */
.job-status__stage--completed {
  color: var(--color-cc-ink, #142334);
}

.job-status__stage--completed .job-status__stage-icon {
  color: var(--color-cc-orange, #FF4B00);  /* brand-orange check accent */
  font-weight: 700;
}

/* Active stage: near-ink, with spinner */
.job-status__stage--active {
  color: var(--color-cc-ink-75, rgba(20, 35, 52, 0.75));
  font-weight: 600;
}

/* Pending stage: muted */
.job-status__stage--pending {
  color: var(--color-cc-ink-55, rgba(20, 35, 52, 0.55));
}

.job-status__stage-icon {
  font-size: var(--text-body-sm, 0.75rem);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.job-status__stage-label {
  flex: 1;
}

/* Spinner — CSS-only pulse for the active stage */
.job-status__spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--color-cc-line, #E7E8EA);
  border-top-color: var(--color-cc-blue, #0967D2);
  border-radius: 50%;
  animation: job-status-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes job-status-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Working / processing message
   ========================================================================== */

.job-status__working-message {
  font-size: var(--text-body-sm, 0.75rem);
  color: var(--color-cc-ink-55, rgba(20, 35, 52, 0.55));
  margin-top: 0.75rem;
}

/* ==========================================================================
   Ready state
   ========================================================================== */

.job-status__ready-message {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--color-cc-ink, #142334);
}

.job-status__report-link {
  display: inline-block;
  margin-top: 1rem;
}

/* ==========================================================================
   Failure state
   ========================================================================== */

.job-status__failure {
  padding: 1rem;
  border: 1px solid rgba(255, 75, 0, 0.35);
  border-radius: var(--radius-cc-btn, 8px);
  background-color: rgba(255, 75, 0, 0.07);
}

.job-status__failure-message {
  color: var(--color-cc-ink, #142334);
  font-size: var(--text-body, 0.875rem);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.job-status__back-link {
  font-size: var(--text-body-sm, 0.75rem);
  color: var(--color-cc-blue, #0967D2);
  text-decoration: underline;
}

.job-status__back-link:hover {
  color: var(--color-cc-blue-hover, #2276D6);
}