/* ============================================================
   VEONA CONTROL PLANE — small additive layer on top of the
   cloned Veona UI kit (tokens.css + app.css). Only utilities the
   control-plane screens need that the clinical kit does not ship.
   Load AFTER app.css.
   ============================================================ */

/* The control plane wears the Ink rail + a subtle "internal" marker so staff
   never confuse it with the clinical app. */
.cp-edition { margin-left: auto; font-size: 10px; font-family: var(--font-mono); color: var(--coral); border: 1px solid rgba(255,107,92,0.4); border-radius: var(--r-pill); padding: 3px 8px; letter-spacing: .04em; }

/* Metric tile delta arrow row helpers reuse .stat; add a compact 3-up + 5-up. */
.stat-row.three { grid-template-columns: repeat(3, 1fr); }
.stat-row.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px){ .stat-row.five, .stat-row.three { grid-template-columns: 1fr 1fr; } }

/* Definition pairs inline (review screens) */
.kv.tight { gap: 7px 14px; }
.kv.wide { grid-template-columns: 180px 1fr; }

/* A simple two-column form summary card list used on the onboarding review. */
.summary-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4); }
@media (max-width: 880px){ .summary-grid { grid-template-columns: 1fr; } }

/* Heartbeat freshness dot sizes for the fleet table. */
.hb { display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate); }
.hb .d { width:7px; height:7px; border-radius:50%; }
.hb .d.fresh { background: var(--green); }
.hb .d.stale { background: var(--amber); }
.hb .d.dead { background: var(--red); }

/* Mono code/token block (license token preview). */
.code-block { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6; background: var(--ink); color: #b8d4d4; border-radius: var(--r-md); padding: var(--s-4); overflow-x:auto; white-space: pre-wrap; word-break: break-all; }

/* Inline severity dot for alert lists. */
.alert-row { display:flex; align-items:flex-start; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.alert-row:last-child { border-bottom: none; }
.alert-row .sev { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.alert-row .sev.high { background: var(--red); }
.alert-row .sev.med { background: var(--amber); }
.alert-row .sev.low { background: var(--teal); }
.alert-row .ar-body { flex:1; }
.alert-row .ar-body b { font-size: var(--t-sm); color: var(--ink); display:block; }
.alert-row .ar-body span { font-size: var(--t-xs); color: var(--slate); }
.alert-row .ar-time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--slate-400); white-space:nowrap; }

/* Module pick grid for onboarding. */
.mod-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-3); }
@media (max-width: 980px){ .mod-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .mod-grid { grid-template-columns: 1fr; } }
.mod-card { border:1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; cursor:pointer; display:flex; gap:11px; align-items:flex-start; transition: border-color .15s, background .15s; background:#fff; }
.mod-card:hover { border-color: var(--teal-300); }
.mod-card.on { border-color: var(--teal); background: var(--teal-050); }
.mod-card .mc-check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; margin-top:1px; }
.mod-card.on .mc-check { background: var(--teal); border-color: var(--teal); }
.mod-card .mc-body b { font-size: var(--t-sm); color: var(--ink); display:block; }
.mod-card .mc-body span { font-size: var(--t-xs); color: var(--slate); }
.mod-card.locked { opacity:.55; cursor:not-allowed; }

/* Edition pick cards. */
.ed-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); }
@media (max-width: 1000px){ .ed-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ed-grid { grid-template-columns: 1fr; } }
.ed-card { border:1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); cursor:pointer; transition: all .15s; background:#fff; }
.ed-card:hover { border-color: var(--teal-300); }
.ed-card.on { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-050); }
.ed-card h4 { font-family: var(--font-display); font-size: var(--t-h3); margin-bottom: 6px; }
.ed-card p { font-size: var(--t-xs); color: var(--slate); }
.ed-card .ed-price { font-family: var(--font-display); font-weight:800; font-size: 1.3rem; color: var(--teal); margin-top: var(--s-3); }

/* Toast (cloned pattern, standalone). */
.cp-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color:#fff; padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--sh-3); z-index: 200; display:flex; align-items:center; gap:10px; }
.cp-toast svg { color: var(--green); }

/* Settings list (per-domain settings screens). */
.settings-list { display:flex; flex-direction:column; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap: var(--s-5); padding: 14px 0; border-bottom:1px solid var(--line-soft); }
.setting-row:last-child { border-bottom:none; }
.setting-label .name { font-size: var(--t-sm); font-weight:600; color: var(--ink); }
.setting-control { min-width: 180px; display:flex; justify-content:flex-end; }
.setting-control select, .setting-control input { font-family: var(--font-body); font-size: var(--t-sm); padding: 8px 12px; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; min-width: 160px; }
.setting-control .switch-row { border:none; padding:0; }

/* Log / report grid helpers reused by the fan-out screens. */
.report-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
@media (max-width: 1000px){ .report-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .report-grid { grid-template-columns: 1fr; } }
.report-card { border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background:#fff; display:flex; flex-direction:column; gap: var(--s-3); }
.report-card h4 { font-family: var(--font-display); font-size: var(--t-h3); }
.report-card .rc-meta { font-size: var(--t-xs); color: var(--slate); }
.bar-track { height:8px; border-radius:999px; background: var(--line); overflow:hidden; }
.bar-fill { height:100%; background: var(--teal); border-radius:999px; }
.code-pre { font-family: var(--font-mono, monospace); font-size: var(--t-xs); background: var(--ink); color:#e6f1f0; padding: var(--s-4); border-radius: var(--r-md); overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.tag { display:inline-block; font-size: var(--t-xs); font-weight:600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--cloud); color: var(--ink-700); border:1px solid var(--line); }

/* Login: reuse vlogin chrome classes from the EHR via inline <style> in AuthChrome. */

/* Suspense route-loading fallback (code-split chunks) */
.route-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-8, 32px);
  color: var(--slate, #64748b);
  font-size: var(--t-sm, 0.875rem);
}
.route-loading .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line, #e2e8f0);
  border-top-color: var(--teal, #0ea5a5);
  border-radius: 50%;
  animation: cp-spin 0.7s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }