/* ──────────────────────────────────────────────────────────────────────────
   Command Center — "Business" (Operating Costs) page styles. DROP-IN.
   Append to the prod command-center/ styles.css. Uses the existing house tokens
   (--glass --ink-* --accent --ok --warn --danger --track --radius). No new palette.
   ────────────────────────────────────────────────────────────────────────── */
.kpi-oc{padding:13px 15px}
.kpi-oc .kl{font-size:11px;color:var(--ink-2)}
.kpi-oc .kv{font-size:19px;font-weight:700;margin:3px 0 1px;letter-spacing:-.3px}
.kpi-oc .ks{font-size:11px;color:var(--ink-3)}

.p-danger{background:var(--danger-soft);color:var(--danger)}

.oc-budget{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* ── Business sub-nav (Overview | Subscriptions) ── */
.oc-subnav{display:flex;gap:8px;margin:-4px 0 16px;flex-wrap:wrap}
.oc-subnav .ocsub{display:inline-flex;align-items:center;gap:7px;text-decoration:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-2);background:var(--track);
  border:1px solid transparent;border-radius:999px;padding:7px 14px}
.oc-subnav .ocsub:hover{color:var(--ink)}
.oc-subnav .ocsub.on{color:var(--accent);background:var(--accent-soft);border-color:var(--glass-brd)}
.oc-subnav .ocsub-ct{font-size:11px;font-weight:700;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:999px;padding:0 7px;line-height:17px;color:var(--ink-2)}
.oc-subnav .ocsub.on .ocsub-ct{color:var(--accent)}

/* ── overview → subscriptions link card ── */
.oc-sublink{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.oc-sublink .btn{text-decoration:none;display:inline-block}

.oc-fx{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--track);border-radius:11px;padding:9px 13px;font-size:13px;color:var(--ink)}
.oc-fx input{font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--glass);
  border:1px solid var(--glass-brd);border-radius:8px;padding:5px 8px;outline:none;width:84px}
.oc-fx input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.ocseg{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--track)}
.ocseg>div{height:100%}
.oclegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.oclegend span{display:inline-flex;align-items:center;gap:6px}
.oclegend i{width:10px;height:10px;border-radius:3px}

.octablewrap{overflow-x:auto;border:1px solid var(--glass-brd);border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.oc-table{border-collapse:collapse;width:100%;min-width:760px}
.oc-table th,.oc-table td{padding:9px 10px;border-bottom:1px solid var(--glass-brd);text-align:left;vertical-align:middle;font-size:12.5px}
.oc-table th{font-size:10.5px;color:var(--ink-3);font-weight:650;text-transform:uppercase;letter-spacing:.5px;background:rgba(127,127,127,.05)}
.oc-table th.c,.oc-table td.c{text-align:center}
.oc-table tr:last-child td{border-bottom:none}
.oc-table tr.paused td{opacity:.5}

.oc-table input, .oc-table select, .oc-budget input{
  font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:8px;padding:5px 7px;outline:none}
.oc-table input:focus, .oc-table select:focus, .oc-budget input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.ocsw{width:38px;height:21px;border-radius:999px;background:var(--track);border:1px solid var(--glass-brd);
  position:relative;cursor:pointer;padding:0}
.ocsw::after{content:"";position:absolute;top:1px;left:1.5px;width:17px;height:17px;border-radius:50%;background:var(--ink-3);transition:left .14s,background .14s}
.ocsw.on{background:var(--ok-soft);border-color:var(--ok)}
.ocsw.on::after{left:18px;background:var(--ok)}

/* ── sortable headers + drag-reorder ── */
.oc-sorthint{font-size:12px;color:var(--ink-2);margin:0 2px 8px}
.oc-sorthint b{color:var(--ink)}
.oc-linkbtn{background:none;border:none;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.oc-table th.oc-sort{cursor:pointer;user-select:none;white-space:nowrap}
.oc-table th.oc-sort:hover{color:var(--ink)}
.oc-table th.oc-sort.on{color:var(--accent)}
.oc-table th.oc-dragh,.oc-table td.oc-dragh{width:24px;padding-left:8px;padding-right:0;text-align:center}
.ocdrag{cursor:grab;color:var(--ink-3);font-size:14px;line-height:1;display:inline-block;user-select:none;touch-action:none}
.ocdrag:hover{color:var(--ink)}
.ocdrag:active{cursor:grabbing}
.ocdrag.off{opacity:.25;cursor:not-allowed}
.oc-table tbody tr.dragging{opacity:.45}
.oc-table tbody tr.drop-above td{box-shadow:inset 0 2px 0 0 var(--accent)}
.oc-table tbody tr.drop-below td{box-shadow:inset 0 -2px 0 0 var(--accent)}

.ocx{cursor:pointer;border:1px solid var(--glass-brd);border-radius:8px;padding:3px 9px;background:var(--glass);color:var(--danger);font-size:12px}
.ocx:hover{background:var(--track)}
.btn{cursor:pointer;border:1px solid var(--glass-brd);border-radius:11px;padding:8px 14px;font-size:13px;font-weight:600;font-family:inherit;background:var(--glass);color:var(--ink)}
.btn:hover{background:var(--track)}
.btn[disabled]{opacity:.6;cursor:default}

.ocren{padding:7px 0;border-top:1px solid var(--glass-brd);font-size:12.5px;color:var(--ink)}
.ocren:first-child{border-top:none}

/* ── 2-col grid (g3/g4 already in styles.css) ── */
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── animated stacked bar (category / currency / cadence) ── */
.ocseg.anim>div{width:0;transition:width 1s cubic-bezier(.22,.61,.36,1)}

/* ── status pills (base + states; styles.css only scopes .sc .pill) ── */
.pill{display:inline-block;font-size:11px;font-weight:650;padding:3px 9px;border-radius:999px}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-danger{background:var(--danger-soft);color:var(--danger)}

/* ── lens cards (budget gauge · break-even · projection) ── */
.lens{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.lens .ring{align-self:center;margin:2px 0}
.lens-h{font-size:11px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.5px}
.lens-big{font-size:32px;font-weight:750;letter-spacing:-.5px;line-height:1;color:var(--ink)}
.lens-cfg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lens-cfg input{font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--glass);
  border:1px solid var(--glass-brd);border-radius:8px;padding:5px 7px;outline:none;width:90px}
.lens-cfg input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ── meter bars (top-5) ── */
.mrow{margin:9px 0}
.mlab{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink);margin-bottom:5px}
.mtrack{height:9px;border-radius:6px;background:var(--track);overflow:hidden}
.mfill{height:100%;width:0;border-radius:6px;transition:width 1s cubic-bezier(.22,.61,.36,1)}

/* ── split donut layout ── */
.oc-split{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.oclegend.oc-col{flex-direction:column;gap:8px;margin-top:0}

/* ── sparkline + renewals timeline ── */
.spark{width:100%;height:70px;display:block}
.octl{width:100%;height:56px;display:block}

/* ── revenue vs cost · break-even chart ── */
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.rev-zoom{display:flex;gap:4px;flex-wrap:wrap}
.rev-zoom .rz{cursor:pointer;border:1px solid var(--glass-brd);background:var(--track);color:var(--ink-2);
  font:inherit;font-size:11.5px;font-weight:600;border-radius:8px;padding:4px 10px}
.rev-zoom .rz:hover{color:var(--ink)}
.rev-zoom .rz.on{background:var(--accent-soft);color:var(--accent);border-color:var(--glass-brd)}
.rev-modes{display:inline-flex;gap:4px;padding-right:8px;margin-right:4px;border-right:1px solid var(--glass-brd)}
.revchart{width:100%;height:auto;display:block;margin-top:4px}
/* per-level break-even breakdown (students mode) */
.bep-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.bep-cell{background:var(--track);border-radius:10px;padding:9px 10px;text-align:center}
.bep-lv{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.4px}
.bep-need{font-size:13px;color:var(--ink);margin-top:3px}
.bep-need b{font-size:17px;font-weight:750;letter-spacing:-.3px}
.bep-sold{margin-top:2px}
@media (max-width:600px){ .bep-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.rev-legend{margin-top:0}
.rev-legend .dash{width:14px;height:0;border-top:2px dashed var(--warn);background:none !important;border-radius:0}

@media (max-width:760px){ .grid.g2{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  .ocsw::after{transition:none}
  .ocseg.anim>div,.mfill{transition:none}
}