/* ==========================================================================
   Hengxin Cloud · Quiet precision progress
   Hairline neutral track, continuous coral→red charge, and a calm tabular
   percentage set outside the bar. No ticks, no floating thumb.
   ========================================================================== */

:root {
  --progress-charge: linear-gradient(
    90deg,
    #fecdd3 0%,
    #fb7185 28%,
    #f87171 48%,
    #ef4444 70%,
    #b91c1c 100%
  );
  --progress-track: linear-gradient(180deg, #edf1f6 0%, #e3e9f0 100%);
}

.workload-bar,
.service-progress,
.expiry-bar-track,
.read-progress-line,
.tax-progress-track,
.material-progress-track,
.finance-inline-progress,
.finance-collect-track,
.person-reminder-track {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 99px;
  background: var(--progress-track) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .08),
    0 0 0 1px rgba(15, 23, 42, .035);
}

.workload-bar span,
.service-progress span,
.service-progress.warn span,
.service-progress.danger span,
.expiry-bar-track > span:first-child,
.expiry-bar-track.expired > span:first-child,
.expiry-bar-track.critical > span:first-child,
.expiry-bar-track.warning > span:first-child,
.expiry-bar-track.normal > span:first-child,
.read-progress-line span,
.tax-progress-track span,
.material-progress-track span,
.finance-inline-progress span,
.finance-collect-track span,
.person-reminder-fill,
.person-reminder.overdue .person-reminder-fill,
.person-reminder.long-term .person-reminder-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--progress-charge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 5px rgba(239, 68, 68, .1);
}

/* Clean, light proportions */
.workload-bar { height: 6px; }
.service-progress { height: 6px; }
.expiry-bar-track { height: 8px; }
.read-progress-line { height: 6px; }
.tax-progress-track { height: 8px; }
.material-progress-track { height: 6px; }
.material-progress-large { height: 8px; }
.finance-inline-progress { height: 4px; }
.finance-collect-track { height: 7px; }

/* Certificate percentage sits beside the bar, not on top of it */
.expiry-bar {
  width: 122px;
}
.expiry-progress-row,
.person-reminder-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.expiry-progress-row .expiry-bar-track,
.person-reminder-row .person-reminder-track {
  flex: 1 1 auto;
  min-width: 0;
}
.progress-value {
  flex: 0 0 auto;
  min-width: 25px;
  color: #9f1239;
  font-family: var(--font-num);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Personnel certificate line */
.person-reminder { padding-top: 3px; }
.person-reminder-track { height: 8px; }
.person-reminder-head {
  margin-bottom: 4px;
  color: #8b97a6;
  font-size: 7px;
  letter-spacing: .01em;
}
.person-reminder-head span:last-child {
  color: #5a6c80;
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}
.person-reminder-marker { display: none; }
.person-reminder.overdue .person-reminder-head span:last-child { color: #9f1239; }
.person-reminder.overdue .progress-value { color: #9f1239; }