/* ========================================================================
   LUDO Superadmin — control-room specifics (builds on ludo-admin.css)
   ======================================================================== */

/* operator chrome — a faint scanline band to mark "internal" surface */
.side--ops { background: var(--paper-2); }
.side--ops .role-pill { background: color-mix(in srgb, var(--ludo-coral) 18%, transparent); color: var(--ludo-coral); border-color: color-mix(in srgb, var(--ludo-coral) 34%, transparent); }
.ops-banner {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  padding: 9px 12px; border-radius: 11px; font-family: var(--font-mono); font-size: 11px;
  background: color-mix(in srgb, var(--ludo-coral) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ludo-coral) 26%, transparent); color: var(--ink-2);
}
.ops-banner .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ludo-coral); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ludo-coral) 20%, transparent); }

/* KPI tile with delta + sparkline */
.kpi { position: relative; overflow: hidden; }
.kpi__delta { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 7px; border-radius: 6px; }
.kpi__delta.up { color: var(--ludo-green); background: color-mix(in srgb, var(--ludo-green) 14%, transparent); }
.kpi__delta.flat { color: var(--ink-3); background: var(--on-paper-token); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 10px; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 35%, transparent); min-height: 3px; transition: height .8s cubic-bezier(.3,.8,.2,1); }
.spark i:last-child { background: var(--accent); }

/* capacity meter */
.cap { display: flex; flex-direction: column; gap: 12px; }
.caprow { display: flex; align-items: center; gap: 13px; }
.caprow__av { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff; }
.caprow__body { flex: 1; min-width: 0; }
.caprow__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.caprow__top b { font-size: 13.5px; white-space: nowrap; }
.caprow__top span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.capbar { height: 7px; border-radius: 4px; background: var(--paper-2); overflow: hidden; display: flex; gap: 2px; margin-top: 2px; }
.capbar i { height: 100%; border-radius: 2px; background: var(--accent); }
.capbar i.free { background: var(--line); }
.caprow.out { opacity: .5; }

/* funnel */
.funnel { display: flex; flex-direction: column; gap: 4px; }
.fstage { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 16px; }
.fstage__label { font-size: 14px; color: var(--ink-2); }
.fstage__track { height: 38px; border-radius: 10px; background: var(--paper-2); overflow: hidden; position: relative; }
.fstage__fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, transparent), var(--accent)); display: flex; align-items: center; padding-left: 14px; transition: width 1s cubic-bezier(.3,.8,.2,1); }
.fstage__fill b { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-ink); }
.fstage__pct { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.fstage__drop { font-family: var(--font-mono); font-size: 10.5px; color: var(--ludo-coral); }

/* audit log */
.audit { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.audit th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.audit td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.audit tr:last-child td { border-bottom: 0; }
.audit .time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.audit .actor { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.audit .key { font-family: var(--font-mono); letter-spacing: .08em; color: var(--ink-2); }
.actiontag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; }
.actiontag.READ { background: color-mix(in srgb, var(--ludo-blue) 16%, transparent); color: var(--ludo-blue); }
.actiontag.USE { background: color-mix(in srgb, var(--ludo-green) 16%, transparent); color: var(--ludo-green); }
.actiontag.ROTATE { background: color-mix(in srgb, var(--ludo-amber) 16%, transparent); color: var(--ludo-amber); }
.actiontag.REVOKE { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-2); }
.audit tr.denied td { background: color-mix(in srgb, var(--ludo-coral) 7%, transparent); }
.audit tr.denied .actiontag { background: color-mix(in srgb, var(--ludo-coral) 16%, transparent); color: var(--ludo-coral); }

/* pricing editor */
.priceedit { display: flex; flex-direction: column; }
.pricerow { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pricerow:last-child { border-bottom: 0; }
.pricerow__label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pricerow__label .sq { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.numfield { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.numfield .pre { padding: 0 4px 0 11px; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.numfield input { border: 0; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 14px; padding: 10px 8px; width: 100%; outline: none; text-align: right; }
.numfield .post { padding: 0 11px 0 2px; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.numfield:focus-within { border-color: var(--accent); }
.dirtybar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 18px -22px -22px; background: var(--surface-2); border-top: 1px solid var(--line-2); border-radius: 0 0 18px 18px; }
.dirtybar .mono { font-size: 12px; color: var(--ink-3); }

/* live preview chip */
.previewchip { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.previewchip span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.previewchip b { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* mautic donut-ish opt-in */
.optin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.optin__cell { padding: 14px 16px; border-radius: 13px; background: var(--paper-2); }
.optin__cell b { font-family: var(--font-display); font-size: 26px; font-weight: 700; display: block; }
.optin__cell span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* type pill for accounts */
.typepill { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.typepill.superdev { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.typepill.customer { background: var(--on-paper-token); color: var(--ink-2); }
.typepill.request { background: color-mix(in srgb, var(--ludo-amber) 18%, transparent); color: var(--ludo-amber); }

@media (max-width: 760px) {
  .fstage { grid-template-columns: 120px 1fr auto; gap: 10px; }
  .fstage__label { font-size: 12.5px; }
  .optin { grid-template-columns: 1fr 1fr; }
  .pricerow { grid-template-columns: 1fr 120px; }
}