/* ui/components.css — Quiet-Precision primitives (namespaced .ui-* so they never clash
   with the legacy .btnp/.tab/.ghost classes) + a small set of light-surface fixes that
   re-point legacy components which hardcoded white-on-dark assumptions.
   Depends on ui/theme.css for tokens. No chart library — bars/reference-line are pure CSS. */

/* ───────────────────────── cards ───────────────────────── */
.ui-card{background:var(--panel);border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--shadow-card);padding:20px 22px}
.ui-card__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ui-card__hd h2,.ui-card__hd h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ui-card__sub{color:var(--ink-2);font-size:12.5px;margin:-8px 0 14px}

/* ───────────────────────── KPI cards ───────────────────────── */
.ui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ui-kpi{background:var(--panel);border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--shadow-card);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-kpi__label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:7px}
.ui-kpi__label .ic{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.ui-kpi__num{font-size:28px;font-weight:650;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ui-kpi__sub{font-size:11.5px;color:var(--ink-3)}
.ui-kpi--accent{border-color:rgba(79,70,229,.25);background:linear-gradient(180deg,var(--accent-soft),transparent 70%),var(--panel)}
.ui-kpi--alert .ui-kpi__num{color:var(--danger)}

/* ───────────────────────── pill tabs ───────────────────────── */
.ui-pills{display:inline-flex;gap:6px;flex-wrap:wrap}
.ui-pill{font:550 12.5px/1 'Geist',system-ui,sans-serif;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.12s;white-space:nowrap}
.ui-pill:hover{color:var(--ink);border-color:var(--ink-3)}
.ui-pill.is-active{color:var(--accent);background:var(--accent-soft);border-color:rgba(79,70,229,.35)}
.ui-pill .n{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.ui-pill.is-active .n{opacity:.85}

/* ───────────────────────── status badges ───────────────────────── */
.ui-badge{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent}
.ui-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ui-badge--live{color:var(--ok);background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.25)}
.ui-badge--deployed{color:var(--accent);background:var(--accent-soft);border-color:rgba(79,70,229,.25)}
.ui-badge--draft{color:var(--ink-2);background:var(--panel-2);border-color:var(--line)}
.ui-badge--error{color:var(--danger);background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.28)}
.ui-badge--warn{color:var(--warn);background:rgba(180,83,9,.08);border-color:rgba(180,83,9,.26)}

/* ───────────────────────── data table ───────────────────────── */
.ui-table{width:100%;border-collapse:collapse;font-size:13px}
.ui-table thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;padding:0 14px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.ui-table tbody td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background .12s}
.ui-table tbody tr:hover{background:var(--panel-2)}
.ui-table .nm{font-weight:600;letter-spacing:-.01em}
.ui-table .num{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ui-table .lead{font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}
.ui-table .lead.zero{color:var(--ink-3);font-weight:500}
.ui-table .acts{display:flex;gap:6px;justify-content:flex-end}

/* trend chip (only rendered when a REAL delta exists) */
.ui-trend{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}
.ui-trend--up{color:var(--ok)} .ui-trend--down{color:var(--danger)} .ui-trend--flat{color:var(--ink-3)}

/* ───────────────────────── live insights feed ───────────────────────── */
.ui-feed{display:flex;flex-direction:column}
.ui-feed__item{display:flex;gap:11px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line)}
.ui-feed__item:last-child{border-bottom:0}
.ui-feed__ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--panel-2);color:var(--ink-2)}
.ui-feed__ic--publish{background:var(--accent-soft);color:var(--accent)}
.ui-feed__ic--lead{background:rgba(22,163,74,.09);color:var(--ok)}
.ui-feed__ic--deploy{background:var(--accent-soft);color:var(--accent)}
.ui-feed__ic--error{background:rgba(220,38,38,.07);color:var(--danger)}
.ui-feed__bd{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.ui-feed__bd b{font-weight:600}
.ui-feed__t{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* ───────────────────────── bar chart (CSS only) ───────────────────────── */
.ui-chart{position:relative;display:flex;align-items:flex-end;gap:6px;height:140px}
.ui-chart__col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;position:relative}
.ui-bar{width:78%;max-width:34px;min-height:2px;height:calc(var(--h,0) * 1%);border-radius:5px 5px 0 0;background:var(--accent-2);transition:filter .12s, background .12s;cursor:default}
.ui-chart__col:hover .ui-bar{background:var(--accent)}
.ui-bar__x{font-size:9.5px;color:var(--ink-3);white-space:nowrap}
.ui-bar__tip{position:absolute;bottom:calc(var(--h,0) * 1% + 14px);left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.ui-chart__col:hover .ui-bar__tip{opacity:1}
.ui-refline{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ink-3);z-index:2}
.ui-refline__lbl{position:absolute;right:0;top:-9px;font-size:9.5px;color:var(--ink-2);background:var(--panel);padding:0 4px;font-variant-numeric:tabular-nums}

/* horizontal distribution bars (e.g. projects-by-status) */
.ui-dist{display:flex;flex-direction:column;gap:10px}
.ui-dist__row{display:grid;grid-template-columns:96px 1fr 28px;align-items:center;gap:10px;font-size:12px}
.ui-dist__lbl{color:var(--ink-2);text-transform:capitalize}
.ui-dist__track{height:8px;border-radius:var(--radius-pill);background:var(--panel-3);overflow:hidden}
.ui-dist__fill{height:100%;border-radius:var(--radius-pill);background:var(--grad);width:calc(var(--w,0) * 1%)}
.ui-dist__n{text-align:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ───────────────────────── buttons ───────────────────────── */
.ui-btn{font:550 13px/1 'Geist',system-ui,sans-serif;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--radius-ctl);padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:.12s}
.ui-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.ui-btn--primary{background:var(--cta,#18181B);color:var(--cta-ink,#fff);border-color:transparent}
.ui-btn--primary:hover{filter:brightness(1.18);border-color:transparent}
.ui-btn--ok{background:var(--ok);color:#fff;border-color:transparent}
.ui-btn--ok:hover{filter:brightness(1.08)}
.ui-btn--sm{padding:5px 10px;font-size:12px}
.ui-btn:focus-visible,.ui-pill:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ───────────────────────── progressive-disclosure accordion ─────────────────────────
   <details class="ui-acc"><summary>Label <span class="ui-acc__st">status</span></summary>…</details> */
.ui-acc{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-top:8px}
.ui-acc summary{list-style:none;display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;font:550 13px/1.3 'Geist',system-ui,sans-serif;color:var(--ink);user-select:none;border-radius:10px}
.ui-acc summary::-webkit-details-marker{display:none}
.ui-acc summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-top:-2px}
.ui-acc[open] summary::before{transform:rotate(45deg);margin-top:-4px}
.ui-acc summary:hover{background:var(--panel-2)}
.ui-acc[open] summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.ui-acc__st{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.ui-acc__st.ok{color:var(--ok)} .ui-acc__st.err{color:var(--danger)}
.ui-acc__bd{padding:14px;font-size:13px}
.ui-acc summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* predictive "next best action" hint chip */
.ui-hint{display:inline-flex;align-items:center;gap:7px;font:550 12px/1.3 'Geist',system-ui,sans-serif;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(79,70,229,.22);border-radius:var(--radius-pill);padding:6px 12px;cursor:pointer;text-decoration:none;transition:.12s}
.ui-hint:hover{border-color:var(--accent-2)}
.ui-hint--warn{color:var(--warn);background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.25)}
.ui-hint--ok{color:var(--ok);background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.22)}

/* kebab / overflow menu */
.ui-menuwrap{position:relative;display:inline-flex}
.ui-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pop);border-radius:10px;padding:5px;display:none;z-index:70}
.ui-menu.show{display:block}
.ui-menu button,.ui-menu a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;color:var(--ink-2);font:500 13px/1.3 'Geist',system-ui,sans-serif;padding:8px 10px;border-radius:7px;cursor:pointer;text-decoration:none}
.ui-menu button:hover,.ui-menu a:hover{background:var(--panel-2);color:var(--ink)}

/* toasts (replace alert()) */
.ui-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.ui-toast{background:var(--navy);color:#fff;font:500 13px/1.45 'Geist',system-ui,sans-serif;padding:11px 16px;border-radius:10px;box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:10px;animation:ui-tin .3s cubic-bezier(.2,0,0,1);pointer-events:auto;max-width:min(560px,92vw)}
.ui-toast.err{background:#7F1D1D}
@keyframes ui-tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT-SURFACE FIXES for legacy components. Guarded by
   :root:not([data-theme="dark"]) so they apply ONLY on light dashboards and
   never touch the dark editor. Legacy gradient-border CTAs become the solid
   near-black primary button of the new language.
   ───────────────────────────────────────────────────────────────────────── */
:root:not([data-theme="dark"]) .btnp,
:root:not([data-theme="dark"]) .addbtn,
:root:not([data-theme="dark"]) .loginbtn{
  background:var(--cta);color:var(--cta-ink);border:1px solid transparent;box-shadow:none}
:root:not([data-theme="dark"]) .btnp:hover,
:root:not([data-theme="dark"]) .addbtn:hover,
:root:not([data-theme="dark"]) .loginbtn:hover{filter:brightness(1.22);transform:translateY(-1px)}
:root:not([data-theme="dark"]) .btnp:disabled{background:var(--panel-3);color:var(--ink-3);filter:none;transform:none}
/* active segmented / legacy tab: iris wash instead of a heavy fill */
:root:not([data-theme="dark"]) .seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.08),inset 0 0 0 1px var(--line)}
:root:not([data-theme="dark"]) .tab.on{background:var(--accent-soft)!important;color:var(--accent);box-shadow:inset 0 0 0 1px rgba(79,70,229,.35)}
:root:not([data-theme="dark"]) .step.cur .mk{color:#fff}