/* =========================================================================
   breakdown-czas-pracy.css — sekcja "Czas pracy per projekt".
   Pasek poziomy per projekt (qubic / kwantowy / ai-compute).
   Wzór: realny panel klienta KK (Skucha 2026-04-27).
   ========================================================================= */

.breakdown-czas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breakdown-czas__row {
  display: grid;
  grid-template-columns: 140px 1fr 180px;
  align-items: center;
  gap: 14px;
}

.breakdown-czas__row.is-inactive {
  opacity: 0.45;
}

.breakdown-czas__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-czas__bar {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.breakdown-czas__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 120ms ease;
}

.breakdown-czas__label {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.breakdown-czas__duration {
  color: var(--text-primary);
  font-weight: 600;
}

.breakdown-czas__pct {
  color: var(--text-tertiary);
}

.breakdown-czas__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  border: 1px dashed var(--bg-border);
  border-radius: var(--radius-inner);
  line-height: 1.5;
}

/* Mobile: layout 2-rzędowy — nazwa+procent w nagłówku, pasek pełnej szerokości */
@media (max-width: 720px) {
  .breakdown-czas__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .breakdown-czas__label {
    justify-content: flex-start;
  }
}