/* DC list / view styles. */

.dc-stage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--stage) 12%, white);
  color: color-mix(in srgb, var(--stage) 80%, black);
  border: 1px solid color-mix(in srgb, var(--stage) 35%, white);
  font-size: 11.5px; font-weight: 600; line-height: 1;
}
.dc-stage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stage); }

tr.overdue { background: #FEF2F2; }
tr.overdue td { border-bottom-color: #FECACA; }
.danger { color: #DC2626; }

.dc-steps { list-style: none; padding: 0; margin: 0; }
.dc-steps > li {
  padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: 8px;
  margin-bottom: 10px; background: white;
}
.dc-steps > li.done { background: #F0FDF4; border-color: #BBF7D0; }
.dc-steps > li.done strong::before { content: "✓ "; color: #16A34A; }

.alerts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.alert  { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.alert-info     { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-warn     { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; }
.alert-escalate { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

.timeline { list-style: none; padding: 0; }
.timeline li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #F1F5F9; }
.timeline .kind { width: 24px; text-align: center; }
.kind-system_reminder { color: #B45309; }
.kind-call { color: #1E40AF; }
.kind-wa   { color: #15803D; }
.kind-email{ color: #9333EA; }

.widget-dc .widget-head { display: flex; justify-content: space-between; align-items: baseline; }
.widget-list { list-style: none; padding: 0; }
.widget-list li { padding: 6px 0; border-bottom: 1px solid #F1F5F9; }
.widget-list li:last-child { border-bottom: 0; }

.tabs { display: flex; gap: 4px; margin: 10px 0 14px; border-bottom: 1px solid #E2E8F0; }
.tabs .tab { padding: 8px 14px; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; color: #475569; text-decoration: none; }
.tabs .tab.active { background: white; border-color: #E2E8F0; color: #0F172A; font-weight: 600; }