/* Inline progress/status circles for dashboard tabs */

.tab-trigger.tab-trigger--with-prog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tab-trigger.is-active .prog-circle--todo {
  border-color: rgba(255, 255, 255, 0.75);
}

.tab-trigger.is-active .prog-circle--progress {
  border-color: #fde68a;
}

.tab-trigger.is-active .prog-circle--done {
  border-color: #bbf7d0;
  background: #bbf7d0;
}

.prog-circle {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  vertical-align: middle;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.prog-circle--tab {
  width: 8px;
  height: 8px;
}

/* Not started / remaining */
.prog-circle--todo {
  border: 2px solid #94a3b8;
  background: transparent;
}

/* Completed */
.prog-circle--done {
  border: 2px solid #2e7d32;
  background: #2e7d32;
}

/* In progress (partial section or score below pass threshold) */
.prog-circle--progress {
  border: 2px solid #fb8c00;
  background: conic-gradient(from 270deg, #fb8c00 0deg 180deg, transparent 180deg 360deg);
}

@media (prefers-color-scheme: dark) {
  .prog-circle--todo {
    border-color: #64748b;
  }
  .prog-circle--done {
    border-color: #66bb6a;
    background: #66bb6a;
  }
  .prog-circle--progress {
    border-color: #ffa726;
    background: conic-gradient(from 270deg, #ffa726 0deg 180deg, transparent 180deg 360deg);
  }
}