// ============================================================================
// Task Progress Bar — Tactical Dark Theme Styling
// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
// for track background, mapped to the Control Center's M3 dark tokens.
// ============================================================================

// ---------------------------------------------------------------------------
// Container
// ---------------------------------------------------------------------------
.task-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

// ---------------------------------------------------------------------------
// Info row: percentage label + elapsed time
// ---------------------------------------------------------------------------
.task-progress-bar__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.task-progress-bar__percent {
  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-on-surface, #E2E8F0);
  letter-spacing: 0.02em;
}

.task-progress-bar__elapsed {
  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
  font-size: 12px;
  font-weight: 400;
  color: var(--cc-on-surface-variant, #8A9BB0);
  letter-spacing: 0.01em;
}

// ---------------------------------------------------------------------------
// Material Progress Bar Overrides
// ---------------------------------------------------------------------------
// Map the spec's --color-primary and --color-surface-light to the Control
// Center's actual theme tokens. This ensures the bar uses the tactical dark
// palette while respecting the spec's variable naming.
// ---------------------------------------------------------------------------

.task-progress-bar__bar {
  // Override the track (background) to use the surface container
  --mat-progress-bar-track-height: 6px;
  --mat-progress-bar-active-indicator-height: 6px;

  // Bar fill color: primary (cyan/sky blue per tactical dark theme)
  --mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));

  // Track background: surface container (dark slate)
  --mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));

  // Border radius for a softer bar
  border-radius: 3px;

  // Smooth transition on value changes
  transition: none;
}

// Rounded ends on the progress bar fill
:host ::ng-deep .mdc-linear-progress__bar-inner {
  border-radius: 3px;
}

// Rounded track background
:host ::ng-deep .mdc-linear-progress__track {
  border-radius: 3px;
}