/**
 * BetDNA Constitutional Design System — Loop 013.
 * Unified cards, tables, status, charts, buttons, widgets.
 */

/* ─── Constitutional status chips ─────────────────────────────── */

.bdna-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bdna-font-xs, 0.72rem);
  font-weight: var(--bdna-font-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--bdna-radius-pill, 999px);
  border: 1px solid transparent;
  white-space: nowrap;
}
.bdna-status-compact { font-size: 0.62rem; padding: 1px 6px; }
.bdna-status-green { background: var(--bdna-success-bg, rgba(34, 197, 94, 0.15)); color: var(--bdna-success-text, #22c55e); border-color: var(--bdna-success-border, #22c55e); }
.bdna-status-amber { background: var(--bdna-warning-bg, rgba(245, 158, 11, 0.15)); color: var(--bdna-warning-text, #f59e0b); border-color: var(--bdna-warning-border, #f59e0b); }
.bdna-status-red { background: var(--bdna-danger-bg, rgba(239, 68, 68, 0.15)); color: var(--bdna-danger-text, #ef4444); border-color: var(--bdna-danger-border, #ef4444); }
.bdna-status-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border-color: #3b82f6; }
.bdna-status-grey { background: rgba(148, 163, 184, 0.12); color: var(--bdna-color-muted, #94a3b8); border-color: var(--bdna-border-color, #334155); }

/* Map legacy severity classes to constitutional colours */
.pex-sev-ok, .bdna-sev-green { color: var(--bdna-success-text, #22c55e); }
.pex-sev-warn, .bdna-sev-amber { color: var(--bdna-warning-text, #f59e0b); }
.pex-sev-bad, .bdna-sev-red { color: var(--bdna-danger-text, #ef4444); }

/* ─── Unified card shell ──────────────────────────────────────── */

.bdna-card {
  background: var(--bdna-color-surface, var(--surface));
  border: var(--bdna-border-width, 1px) solid var(--bdna-border-color, var(--border));
  border-radius: var(--bdna-radius-md, var(--radius));
  padding: 0;
  margin-bottom: var(--bdna-section-gap, 12px);
  overflow: hidden;
  transition: border-color var(--bdna-duration-fast, 120ms) ease, box-shadow var(--bdna-duration-fast, 120ms) ease;
}
.bdna-card:hover { border-color: var(--bdna-border-accent, var(--accent2)); }
.bdna-card-header { padding: var(--bdna-space-md, 12px) var(--bdna-card-padding, 16px) var(--bdna-space-sm, 8px); border-bottom: 1px solid var(--bdna-border-color, var(--border)); }
.bdna-card-title { font-size: var(--bdna-font-lg, 0.95rem); font-weight: var(--bdna-font-weight-semibold, 600); margin: 0 0 var(--bdna-space-xs, 4px); }
.bdna-card-subtitle { margin: 0 0 var(--bdna-space-sm, 8px); }
.bdna-card-meta { display: flex; flex-wrap: wrap; gap: var(--bdna-space-sm, 8px); margin-top: var(--bdna-space-sm, 8px); }
.bdna-card-meta-item { display: inline-flex; flex-direction: column; font-size: var(--bdna-font-xs, 0.72rem); }
.bdna-card-meta-item .lbl { color: var(--bdna-color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bdna-card-body { padding: var(--bdna-card-padding, 16px); }
.bdna-card-footer { display: flex; flex-wrap: wrap; gap: var(--bdna-space-sm, 8px); align-items: center; padding: var(--bdna-space-sm, 8px) var(--bdna-card-padding, 16px); border-top: 1px solid var(--bdna-border-color, var(--border)); background: var(--bdna-color-bg, var(--bg)); }

/* ─── Unified table ───────────────────────────────────────────── */

.bdna-table-wrap { overflow-x: auto; margin-bottom: var(--bdna-section-gap, 12px); }
.bdna-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bdna-font-md, 0.8rem);
}
.bdna-table-sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--bdna-color-surface, var(--surface)); }
.bdna-table th, .bdna-table td { padding: var(--bdna-space-sm, 8px) var(--bdna-space-md, 12px); text-align: left; border-bottom: 1px solid var(--bdna-border-color, var(--border)); }
.bdna-table th { font-size: var(--bdna-font-sm, 0.75rem); color: var(--bdna-color-muted); text-transform: uppercase; letter-spacing: var(--bdna-letter-spacing-label, 0.04em); }
.bdna-th-sortable { cursor: pointer; user-select: none; }
.bdna-th-sortable:hover { color: var(--bdna-color-text); }
.bdna-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.bdna-table-empty { padding: var(--bdna-space-lg, 16px); text-align: center; }

/* ─── Charts ──────────────────────────────────────────────────── */

.bdna-chart { margin: var(--bdna-space-md, 12px) 0; }
.bdna-chart-label { margin-bottom: var(--bdna-space-xs, 4px); }
.bdna-chart .betdna-timeline svg { max-width: 100%; height: auto; }
.bdna-chart-placeholder { padding: var(--bdna-space-xl, 20px); text-align: center; border: 1px dashed var(--bdna-border-color); border-radius: var(--bdna-radius-sm, 8px); }

/* ─── Widget chrome ───────────────────────────────────────────── */

.bdna-widget-chrome { padding: var(--bdna-space-sm, 8px) 0; border-bottom: 1px solid var(--bdna-border-color); margin-bottom: var(--bdna-space-sm, 8px); }
.bdna-widget-head { display: flex; align-items: center; gap: var(--bdna-space-sm, 8px); margin-bottom: var(--bdna-space-xs, 4px); }
.bdna-widget-title { font-size: var(--bdna-font-base, 0.85rem); }
.bdna-widget-purpose { margin: 0 0 var(--bdna-space-xs, 4px); }
.bdna-widget-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--bdna-space-sm, 8px); margin: 0; }
.bdna-widget-meta dt { color: var(--bdna-color-muted); font-size: var(--bdna-font-xs, 0.72rem); text-transform: uppercase; }
.bdna-widget-meta dd { margin: 0; }
.bdna-widget-actions { display: flex; gap: var(--bdna-space-sm, 8px); margin-top: var(--bdna-space-sm, 8px); }

/* ─── Page rhythm ─────────────────────────────────────────────── */

.bdna-page .card:not(.bdna-card) { border-radius: var(--bdna-radius-md); }
.bdna-page .betdna-section { margin-bottom: var(--bdna-section-gap, 12px); }

/* ─── Dialog / modal / drawer alignment ─────────────────────── */

.cmd-palette.card, .pex-notif-panel.card, .wsp-context-menu.card {
  border-radius: var(--bdna-radius-md);
  border: 1px solid var(--bdna-border-color);
}

/* ─── Confidence / progress bars ──────────────────────────────── */

.bdna-confidence-bar { height: 4px; border-radius: var(--bdna-radius-pill); background: var(--bdna-border-color); overflow: hidden; }
.bdna-confidence-fill { height: 100%; border-radius: inherit; transition: width var(--bdna-duration-normal, 200ms) ease; }
.bdna-confidence-fill.green { background: var(--bdna-color-positive, #22c55e); }
.bdna-confidence-fill.amber { background: var(--bdna-color-warn, #f59e0b); }
.bdna-confidence-fill.red { background: var(--bdna-color-negative, #ef4444); }

@media (max-width: 480px) {
  .bdna-table { font-size: var(--bdna-font-sm, 0.75rem); }
  .bdna-card-header, .bdna-card-body, .bdna-card-footer { padding-left: var(--bdna-space-md, 12px); padding-right: var(--bdna-space-md, 12px); }
}

/* Loop 014 — live intelligence */
.live-intel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.72rem; }
.live-intel-indicator { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.live-ind-live { color: var(--bdna-success-text, #22c55e); border-color: var(--bdna-success-border, #22c55e); }
/* TR-01: READY is not commercial success — waiting grey */
.live-ind-ready, .live-ind-waiting { color: var(--muted, #94a3b8); border-color: var(--border); }
.live-ind-updating, .live-ind-syncing, .live-ind-learning { color: var(--bdna-warning-text, #f59e0b); border-color: var(--bdna-warning-border, #f59e0b); }
.live-ind-simulating, .live-ind-publishing { color: #3b82f6; border-color: #3b82f6; }
.live-ind-warning { color: var(--bdna-warning-text, #f59e0b); border-color: var(--bdna-warning-border, #f59e0b); }
.live-intel-network.is-online { color: var(--muted, #94a3b8); }
.live-intel-network.is-offline { color: var(--bdna-danger-text, #ef4444); }
.live-intel-stale-warn { color: var(--bdna-warning-text, #f59e0b); }
.live-intel-alert { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.live-stale-banner { margin: 4px 0 0; padding: 4px 8px; }
.live-stale-chip { color: var(--bdna-warning-text); font-size: 0.6rem; font-weight: 700; margin-left: 4px; }
.live-fresh-chip { color: var(--bdna-success-text); font-size: 0.6rem; font-weight: 700; margin-left: 4px; }
.live-timeline-panel { margin-top: 8px; padding: 10px; max-height: 320px; overflow-y: auto; }
.live-timeline-list { list-style: none; margin: 0; padding: 0; }
.live-timeline-item { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
.live-timeline-mod { text-transform: uppercase; color: var(--muted); min-width: 48px; }
.live-timeline-filters { display: flex; gap: 6px; margin-bottom: 8px; }

/* Loop 015 — production hardening failure panel */
.ph-failure-panel { margin: 12px 16px; border-left: 3px solid var(--bdna-color-warn, #f59e0b); }
.ph-failure-title { margin: 0 0 8px; font-size: 1rem; }
.ph-failure-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ph-dev-detail pre { max-height: 160px; overflow: auto; font-size: 0.68rem; white-space: pre-wrap; word-break: break-word; }
#ph-failure-host:empty { display: none; }
.betdna-doctor-production-readiness summary { font-weight: 600; }
.betdna-doctor-qa-health summary { font-weight: 600; }
.betdna-doctor-ux-health summary { font-weight: 600; }
.betdna-doctor-founder-acceptance summary { font-weight: 600; }
.betdna-doctor-release-candidate summary { font-weight: 600; }

/* Loop 017 — UX chrome optimisation */
.ux-chrome-hidden { display: none !important; }
body.ux-compact-chrome .live-intel-bar { padding: 4px 10px; font-size: 0.68rem; }
body.ux-compact-chrome .pex-journey-bar { padding: 4px 10px; margin-bottom: 4px; }
body.ux-compact-chrome .quick-access-bar { gap: 6px; }
body.ux-founder-compact .betdna-doctor-registers > summary { font-weight: 600; cursor: pointer; }
body.ux-founder-compact .quick-access-bar .qa-btn { min-width: 0; padding-inline: 10px; }
body.ux-compact-chrome #header-sub { font-size: 0.78rem; opacity: 0.92; }