/* ============================================================================
   revenue.css — tweaks specific to the Revenue module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Everything visual leans on the documented .card/.kpi/.grid/etc classes;
   this file only adds the few namespaced widgets the contract allows:
   the chart legends, the cohort heat-grid, and the MRR-movement waterfall rows.
   ========================================================================== */

/* hero MRR card: legend pinned top-right over the area chart */
.revenue-hero{position:relative}
.revenue-legend{position:absolute;top:14px;right:16px;display:flex;gap:14px;z-index:2;
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-faint)}
.revenue-legend .rl{display:flex;align-items:center;gap:5px}
.revenue-legend .rl i{width:14px;height:2px;border-radius:2px;display:inline-block}
.revenue-legend .rl.actual i{background:var(--accent1)}
.revenue-legend .rl.target i{background:var(--accent3)}
.revenue-legend .rl.forecast i{background:var(--accent3);
  background:repeating-linear-gradient(90deg,var(--accent3) 0 4px,transparent 4px 7px)}

/* KPI tiles keep the spark hugging the bottom edge */
.revenue-kpi .spark{margin-top:10px}
.revenue-kpi .kpi-value{font-size:32px}

/* MRR movement card legend (new vs churned) */
.revenue-movelegend{display:flex;gap:16px;align-items:center}
.revenue-movelegend .ml{display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-muted)}
.revenue-movelegend .ml i{width:9px;height:9px;border-radius:3px;display:inline-block}
.revenue-movelegend .ml.new i{background:var(--accent1)}
.revenue-movelegend .ml.churn i{background:var(--accent3)}

/* MRR waterfall: bridge of net-new movement components */
.revenue-bridge{display:flex;flex-direction:column;gap:1px}
.revenue-bridge .rb-row{display:grid;grid-template-columns:96px 1fr 78px;align-items:center;
  gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.revenue-bridge .rb-row:last-child{border-bottom:none}
.revenue-bridge .rb-name{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.revenue-bridge .rb-name .rb-dot{width:7px;height:7px;border-radius:2px;flex:none}
.revenue-bridge .rb-track{height:8px;border-radius:5px;background:var(--bg);overflow:hidden;border:1px solid var(--border);position:relative}
.revenue-bridge .rb-fill{height:100%;border-radius:5px;transition:width 1s var(--ease);box-shadow:0 0 8px var(--glow)}
.revenue-bridge .rb-val{font-family:var(--font-mono);font-size:12px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:.3px}
.revenue-bridge .rb-val.pos{color:var(--success)}
.revenue-bridge .rb-val.neg{color:var(--danger)}
.revenue-bridge .rb-net{border-top:1px solid var(--border-hi);margin-top:4px;padding-top:11px}
.revenue-bridge .rb-net .rb-name{color:var(--text);font-weight:600;font-family:var(--font-display)}
.revenue-bridge .rb-net .rb-val{color:var(--accent1);font-size:14px}

/* plan donut: legend rows alongside the ring */
.revenue-plan{display:grid;grid-template-columns:minmax(150px,1fr) 1.15fr;gap:18px;align-items:center}
@media (max-width:680px){.revenue-plan{grid-template-columns:1fr}}
.revenue-plan .rp-ring{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:180px;margin:0 auto;width:100%}
.revenue-plan-legend{display:flex;flex-direction:column;gap:11px}
.revenue-plan-legend .pl{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:10px}
.revenue-plan-legend .pl .pl-dot{width:11px;height:11px;border-radius:4px}
.revenue-plan-legend .pl .pl-name{font-size:12px;color:var(--text)}
.revenue-plan-legend .pl .pl-name small{display:block;color:var(--text-faint);font-size:10px;font-family:var(--font-mono);letter-spacing:.5px}
.revenue-plan-legend .pl .pl-val{font-family:var(--font-mono);font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* cohort retention heat-grid */
.revenue-cohort{overflow-x:auto}
.revenue-cohort table{width:100%;border-collapse:separate;border-spacing:3px;font-size:11px}
.revenue-cohort th{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;padding:4px 6px;text-align:center;white-space:nowrap}
.revenue-cohort th.rc-rowhead{text-align:left}
.revenue-cohort td{text-align:center;padding:7px 4px;border-radius:6px;font-family:var(--font-mono);
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);min-width:42px;
  transition:transform .14s var(--ease)}
.revenue-cohort td:hover{transform:scale(1.08);position:relative;z-index:2;box-shadow:0 0 0 1px var(--border-hi)}
.revenue-cohort td.rc-label{background:transparent;text-align:left;color:var(--text-muted);
  font-family:var(--font-display);font-size:11px;min-width:74px;white-space:nowrap}
.revenue-cohort td.rc-size{color:var(--text-faint);font-size:10px;background:transparent;min-width:40px}
.revenue-cohort td.rc-empty{background:transparent;color:var(--text-faint);opacity:.4}

/* churn stat strip: little signed deltas */
.revenue-churn-net{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px}
.revenue-churn-net.pos{color:var(--success)}
.revenue-churn-net.neg{color:var(--danger)}

/* top-accounts table: horizontal scroll on narrow screens (no overflow) */
.revenue-tablewrap{overflow-x:auto}
.revenue-tablewrap .table{min-width:380px}

/* top-accounts table: plan tag + growth pill alignment */
.revenue-acct-name{display:flex;align-items:center;gap:10px}
.revenue-acct-name .ra-sub{font-size:10px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.5px}
.revenue-grow{font-family:var(--font-mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.revenue-grow.up{color:var(--success)}
.revenue-grow.down{color:var(--danger)}
.revenue-grow.flat{color:var(--text-muted)}

/* ── record-revenue card: form + recent-revenue list ─────────────────── */
.revenue-rec-form{display:grid;
  grid-template-columns:minmax(120px,1.1fr) minmax(140px,1.4fr) minmax(130px,1.2fr) minmax(120px,1fr) auto;
  gap:12px;align-items:end}
@media (max-width:780px){.revenue-rec-form{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.revenue-rec-form{grid-template-columns:1fr}}

.revenue-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.revenue-field>span{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-faint)}
.revenue-field input,
.revenue-field select{width:100%;box-sizing:border-box;height:38px;padding:0 11px;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.revenue-field select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.revenue-field input:focus,
.revenue-field select:focus{border-color:var(--accent1);box-shadow:0 0 0 3px var(--glow)}
.revenue-field input.revenue-invalid{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}

/* amount field: leading kr unit sits inside the input frame */
.revenue-amount{position:relative;display:flex;align-items:center}
.revenue-amount .revenue-cur{position:absolute;left:11px;font-family:var(--font-mono);
  font-size:12px;color:var(--text-faint);pointer-events:none}
.revenue-amount input{padding-left:30px;font-variant-numeric:tabular-nums}

.revenue-rec-save{height:38px;white-space:nowrap}
.revenue-rec-save:disabled{opacity:.5;cursor:not-allowed}
.revenue-rec-note{font-size:11px;margin-top:11px}
.revenue-rec-note code{font-family:var(--font-mono);font-size:10px;padding:1px 5px;
  border-radius:5px;background:var(--bg);border:1px solid var(--border);color:var(--accent1)}

/* recent-revenue list rows */
.revenue-rec-list .revenue-rec-item .li-ico{display:flex;align-items:center}
.revenue-rec-list .revenue-rec-item .li-sub{display:flex;align-items:center;gap:6px}
.revenue-rec-dot{width:7px;height:7px;border-radius:2px;display:inline-block;flex:none}
.revenue-rec-amt{font-family:var(--font-mono);font-weight:600;color:var(--success);
  font-variant-numeric:tabular-nums}
/* fresh-insert highlight: collapses back on the next frame */
.revenue-rec-item{transition:background .5s var(--ease)}
.revenue-rec-item.revenue-rec-new{background:var(--glow)}