/*
 * Scherm Systeem (docs/design/schermen/System.dc.html): kaarten, wachtrijtabel, mislukte berichten, workers.
 * Alleen tokens uit tokens.css (licht en donker); prefix ccd-sys.
 */
.ccd-sys { display: flex; flex-direction: column; gap: 28px; }
.ccd-sys__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ccd-sys__intro { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ccd-sys__h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.ccd-sys__h2 { flex: 1 1 auto; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.ccd-sys__sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.ccd-sys__small { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.ccd-sys__muted { color: var(--text-secondary); }
.ccd-sys__mono { font-family: var(--font-mono); font-size: 12px; }
.ccd-sys__mono--md { font-size: 13px; }
.ccd-sys__num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ccd-sys__num[data-tone="danger"] { color: var(--status-danger); font-weight: 600; }
.ccd-sys__grow { flex: 1 1 auto; min-width: 0; }
.ccd-sys__right { text-align: right; }
.ccd-sys__stack { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ccd-sys__empty { margin: 0; padding: 10px 0; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.ccd-sys__foot { padding-top: 6px; }

.ccd-sys__section { display: flex; flex-direction: column; gap: 12px; }
.ccd-sys__pair { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ccd-sys__card { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); box-sizing: border-box; }
.ccd-sys__cardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 6px; }
.ccd-sys__section > .ccd-sys__cardhead { padding-bottom: 0; }

.ccd-sys__kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; }
.ccd-sys__kv > span:first-child { color: var(--text-secondary); }
.ccd-sys__kv a { color: var(--text-accent); }
.ccd-sys__kv a:hover { color: var(--text-primary); }

.ccd-sys__li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; }
.ccd-sys__li:last-of-type { border-bottom: 0; }

.ccd-sys__job { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; }
.ccd-sys__job:last-of-type { border-bottom: 0; }
.ccd-sys__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--status-success); }
.ccd-sys__dot[data-s="warn"] { background: var(--status-warning); }
.ccd-sys__dot[data-s="idle"] { background: var(--text-tertiary); }

.ccd-sys__box { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.ccd-sys__q { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.6fr)) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; }
.ccd-sys__q:last-child { border-bottom: 0; }
.ccd-sys__qh { padding-top: 9px; padding-bottom: 9px; background: var(--surface-sidebar); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }

.ccd-sys__fail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; }
.ccd-sys__fail:last-child { border-bottom: 0; }
.ccd-sys__fail .ccd-sys__grow { flex: 1 1 360px; }
.ccd-sys__fail form { margin: 0; }
.ccd-sys__failicon { display: inline-flex; color: var(--status-danger); }

@media (max-width: 1100px) {
    .ccd-sys__q { grid-template-columns: 1fr 1fr 1fr; }
    .ccd-sys__qh { display: none; }
}