/* Component-laag (macros/ui.html) — tokens-only, licht-thema-fallbacks.
   Wordt per pagina geladen via head_extra; verhuist naar de base zodra
   app.css/base.html vrij zijn (fase 1 deel B). */

/* Badges */
.ui-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle;
  font-family: var(--brand-font-body, system-ui); }
.ui-badge-neutral { background: var(--surface-2, rgba(27,25,23,0.05)); color: var(--text-2, rgba(27,25,23,0.65)); border: 1px solid var(--border, rgba(27,25,23,0.1)); }
.ui-badge-success { background: rgba(26,127,55,0.10); color: #1a7f37; border: 1px solid rgba(26,127,55,0.35); }
.ui-badge-warn { background: rgba(154,103,0,0.10); color: #9a6700; border: 1px solid rgba(154,103,0,0.35); }
.ui-badge-danger { background: rgba(180,35,24,0.08); color: #b42318; border: 1px solid rgba(180,35,24,0.35); }
.ui-badge-info { background: rgba(23,92,211,0.08); color: #175cd3; border: 1px solid rgba(23,92,211,0.35); }
.ui-badge-primary { background: var(--primary-soft, rgba(90,125,107,0.12)); color: var(--brand-primary-dark, #45614f); border: 1px solid var(--primary-border, rgba(90,125,107,0.45)); }

/* Health-indicator */
.ui-health { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.ui-health .ui-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ui-health-ok { color: #1a7f37; }
.ui-health-ok .ui-dot { background: #1a7f37; box-shadow: 0 0 0 3px rgba(26,127,55,0.15); }
.ui-health-down { color: #b42318; }
.ui-health-down .ui-dot { background: #b42318; box-shadow: 0 0 0 3px rgba(180,35,24,0.15); }

/* Alerts */
.ui-alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; }
.ui-alert-error { background: rgba(180,35,24,0.07); border: 1px solid rgba(180,35,24,0.4); color: #b42318; }
.ui-alert-success { background: rgba(26,127,55,0.08); border: 1px solid rgba(26,127,55,0.4); color: #1a7f37; }
.ui-alert-info { background: rgba(23,92,211,0.06); border: 1px solid rgba(23,92,211,0.3); color: #175cd3; }
.ui-alert-warn { background: rgba(154,103,0,0.08); border: 1px solid rgba(154,103,0,0.35); color: #9a6700; }

/* Lege staat */
.ui-empty { padding: 2.5rem 1rem; text-align: center; }
.ui-empty-title { color: var(--text-2, rgba(27,25,23,0.6)); margin: 0 0 0.25rem; }
.ui-empty-hint { color: var(--muted, rgba(27,25,23,0.45)); font-size: 0.9rem; margin: 0; }

/* Versie-chip */
.ui-version { background: var(--surface-2, rgba(27,25,23,0.05)); border: 1px solid var(--border, rgba(27,25,23,0.1));
  border-radius: 5px; padding: 0.1rem 0.45rem; font-size: 0.82rem; }

/* Nette datatabel (canonieke opvolger van de niet-bestaande .table) */
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ui-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, rgba(27,25,23,0.5)); font-weight: 600; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border, rgba(27,25,23,0.12)); }
.ui-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border-soft, rgba(27,25,23,0.06)); vertical-align: top; }
.ui-table tr:hover td { background: var(--surface-2, rgba(27,25,23,0.02)); }

/* Detail-tekst met uitklap (lange job-results / audit-meta) */
.ui-truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.ui-expand summary { cursor: pointer; color: var(--text-2, rgba(27,25,23,0.6)); }
details.ui-expand[open] summary { color: var(--brand-primary, #5a7d6b); }
details.ui-expand pre { white-space: pre-wrap; word-break: break-word; background: var(--surface-2, rgba(27,25,23,0.03));
  border: 1px solid var(--border-soft, rgba(27,25,23,0.06)); border-radius: 6px; padding: 0.6rem; font-size: 0.82rem; margin: 0.4rem 0 0; }

/* Dashboard-widgets */
.dash-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row code { flex-shrink: 0; }