/* Revenue Tracker: charts, the revenue table, the cell editor. Part of the stylesheet split by page; public/css/README.md says why. */
/* ── Charts ───────────────────────────────────────────────── */
#charts {
  padding: 16px 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chart-card--wide { grid-column: 1 / -1; }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  min-width: 0;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-header h2 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.chart-subtitle {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

.chart-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.legend-item { display: flex; align-items: center; gap: 6px; }

.legend-line {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.legend-line.dashed {
  background: #009FE3;
}

.legend-line.trend {
  background: transparent;
  border-top: 2px dashed #f59e0b;
  height: 0;
}

.legend-line.margin-pct {
  background: transparent;
  border-top: 2px solid var(--growth-pos);
  height: 0;
}

.chart-canvas-wrap {
  position: relative;
  height: 220px;
}

.chart-canvas-wrap--tall {
  height: 320px;
}

.chart-canvas-wrap--dev-subs {
  height: 300px;
}

.chart-canvas-wrap canvas {
  position: absolute;
  inset: 0;
}

/* ── Table Container ──────────────────────────────────────── */
#table-container {
  overflow-x: auto;
  padding: 20px;
}

#table-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
#table-toolbar .btn-ghost {
  padding: 4px 10px;
  font-size: 11px;
}

/* Collapsed monthly view: hide every per-month cell in the current year
   (header + data + totals + YoY). Q1A/Q2A rollups, the Actuals summary
   cell, and Q2/Q3/Q4 forecast-quarter cells remain so the table still
   adds up across the year. */
body.months-hidden #revenue-table th.col-month,
body.months-hidden #revenue-table td.cell-month:not(.cell-forecast-quarter) { display: none; }

/* prior-hidden: hides the entire prior-year group (Q1–Q4 + FY header cols and all cell-prior cells) */
body.prior-hidden #revenue-table th.prior,
body.prior-hidden #revenue-table td.cell-prior { display: none; }

#loading { color: var(--text-muted); padding: 40px; text-align: center; }

/* ── Revenue Table ────────────────────────────────────────── */
#revenue-table {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 12px;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

#revenue-table th,
#revenue-table td {
  padding: 5px 8px;
  border: 1px solid var(--border);
  text-align: right;
}

/* Left label columns */
th.col-bu, td.col-bu {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  background: var(--subtle-bg);
  min-width: 110px;
  max-width: 130px;
  white-space: normal;
  vertical-align: middle;
}


th.col-customer, td.col-customer {
  text-align: left;
  min-width: 160px;
  max-width: 200px;
  font-weight: 500;
  cursor: pointer;
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface);
}
/* Region / Product — reference attributes, not figures. Kept deliberately
   small and muted so they don't compete with the revenue columns. */
th.col-attr-hdr {
  font-weight: 600;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-align: left;
  padding-left: 8px;
}
td.col-attr {
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--text-muted);
  vertical-align: middle;
  padding: 2px 6px;
  text-align: left;
  white-space: normal;
}
td.col-attr-region {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
td.col-attr-product {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
}
.product-chip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-chip + .product-chip { margin-top: 1px; }

/* Sticky on totals / yoy rows: pick up row-level background colors. */
tr.totals-row td.col-customer { background: var(--total-bg); }
tr.grand-totals-row td.col-customer { background: var(--band-bg); }
tr.yoy-row td.col-customer { background: var(--green-bg); }
tr.at-risk td.col-customer { background-color: var(--risk-bg); }
tr.declining td.col-customer { background-color: var(--amber-bg); }
td.col-customer:hover { text-decoration: underline; color: var(--accent-text); }
.read-only-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--subtle-bg); border: 1px solid var(--border);
  cursor: help;
}

/* Column groups */
th.group-header {
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--selected-bg);
  color: var(--accent-text);
  border-bottom: 2px solid #009FE3;
}

#revenue-table th.group-header-year {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  padding: 8px 12px;
}

th.group-header.prior {
  background: var(--subtle-bg);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
}

th.col-month { min-width: 52px; font-weight: 500; font-size: 11px; }
th.col-quarter { min-width: 60px; font-weight: 700; background: var(--quarter-bg); }
th.col-fy { min-width: 68px; font-weight: 700; background: var(--fy-bg); }
th.col-yoy { min-width: 64px; font-weight: 700; background: var(--green-bg); color: var(--growth-pos); }
th.col-cloud-hdr { min-width: 44px; font-weight: 600; color: var(--text-muted); font-size: 10px; letter-spacing: .04em; }
td.col-cloud { padding: 2px 6px; vertical-align: middle; text-align: center; }
th.col-sparkline-hdr { min-width: 88px; font-weight: 600; color: var(--text-muted); font-size: 10px; letter-spacing: .04em; }
td.col-sparkline { padding: 2px 6px; vertical-align: middle; }

/* Data cells */
td.cell-month,
td.cell-prior.cell-quarter,
td.cell-prior.cell-fy,
td.cell-actuals-summary,
td.cell-actuals-quarter { position: relative; }

.cell-val { display: block; text-align: right; }

.cell-margin-hint {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.75;
  font-weight: 600;
  letter-spacing: .01em;
}
.cell-margin-hint.positive { color: var(--growth-pos); }
.cell-margin-hint.warning  { color: var(--growth-warn); }
.cell-margin-hint.negative { color: var(--growth-neg); }

td.cell-month { cursor: pointer; }
td.cell-month:hover { background: var(--selected-bg); }
/* Read-only (non-admin): nothing on the table should look clickable. */
body.read-only td.cell-month { cursor: default; }
body.read-only td.cell-month:hover { background: inherit; }
body.read-only td.cell-month.is-actual:hover { background: var(--actual-bg); }
body.read-only td.cell-month.is-forecast:hover { background: var(--forecast-bg); }
body.read-only td.col-customer { cursor: default; }
body.read-only td.col-customer:hover { text-decoration: none; color: inherit; }
td.cell-month.is-actual { background: var(--actual-bg); font-weight: 500; }
td.cell-month.is-forecast { background: var(--forecast-bg); font-style: italic; color: var(--text-muted); }
td.cell-month.editing {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--selected-bg) !important;
}

td.cell-quarter { background: var(--actual-bg); font-weight: 600; }
td.cell-fy { background: var(--forecast-bg); font-weight: 700; }
td.cell-prior { background: var(--actual-bg); color: var(--text-muted); }
td.cell-prior.cell-quarter { background: var(--actual-bg); }
td.cell-prior.cell-fy { background: var(--actual-bg); font-weight: 700; }
td.cell-yoy { font-weight: 600; }
td.cell-yoy.positive { color: var(--growth-pos); }
td.cell-yoy.negative { color: var(--growth-neg); }

td.cell-predict { background: var(--forecast-bg); font-weight: 700; cursor: help; }
td.cell-predict.positive { color: var(--growth-pos); }
td.cell-predict.negative { color: var(--growth-neg); }
td.cell-predict .conf-dot { font-size: 9px; margin-right: 3px; vertical-align: middle; }

/* At-risk customers (YoY ≤ -15% with prior baseline > 0) */
tr.at-risk td.col-customer { box-shadow: inset 3px 0 0 var(--danger); }
tr.at-risk td { background-color: var(--risk-bg); }
tr.at-risk td.cell-prior { background-color: var(--risk-prior); }
tr.at-risk td.cell-prior.cell-quarter { background-color: var(--risk-prior-q); }
tr.at-risk td.cell-prior.cell-fy { background-color: var(--risk-prior-fy); }
tr.at-risk td.cell-quarter { background-color: var(--risk-q); }
tr.at-risk td.cell-fy { background-color: var(--risk-fy); }

tr.declining td.col-customer { box-shadow: inset 3px 0 0 #d97706; }
tr.declining td:nth-child(-n+4) { background-color: var(--amber-bg); }
.at-risk-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--danger);
  font-size: 12px;
  cursor: help;
}

/* History modal */
.history-list { max-height: 60vh; overflow-y: auto; font-size: 12px; }
.history-row {
  display: grid;
  grid-template-columns: 130px 110px 1fr 110px;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-faint);
  align-items: baseline;
}
.history-row:last-child { border-bottom: none; }
.history-when { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-who { font-weight: 600; }
.history-what { color: var(--text-secondary); }
.history-cust { font-weight: 600; }
.history-delta { text-align: right; font-variant-numeric: tabular-nums; }
.history-delta .from { color: var(--text-muted); text-decoration: line-through; }
.history-delta .arrow { color: var(--text-muted); margin: 0 4px; }
.history-delta .to.up { color: var(--growth-pos); font-weight: 600; }
.history-delta .to.down { color: var(--growth-neg); font-weight: 600; }
.history-delta .toggle { color: #009FE3; font-style: italic; }
.history-empty { padding: 24px; text-align: center; color: var(--text-muted); }

/* Actuals / Forecast summary columns */
th.cell-actuals-hdr { background: var(--actual-bg); font-weight: 700; }
th.cell-forecast-hdr { background: var(--forecast-bg); font-weight: 700; }
td.cell-actuals-summary { background: var(--actual-bg); font-weight: 600; }
td.cell-forecast-summary { background: var(--forecast-bg); font-weight: 600; }

/* Actual-quarter rollup cells — revenue + inline YoY % */
td.cell-actuals-quarter { border-left: 2px solid #818cf8; }
.q1a-rev  { display: block; text-align: center; }

/* Margin column */
th.col-margin-hdr { min-width: 64px; font-weight: 700; background: var(--amber-bg); color: var(--amber-fg); }
td.cell-margin { font-weight: 600; font-variant-numeric: tabular-nums; }
td.cell-margin.positive { color: var(--growth-pos); }
td.cell-margin.warning  { color: var(--growth-warn); }
td.cell-margin.negative { color: var(--growth-neg); }
td.cell-margin.muted { color: var(--text-muted); font-weight: 400; }
tr.at-risk td.cell-margin { background-color: var(--risk-fy); }

/* Company logo in customer name cell */
img.cust-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* On a dark row the logo gets the same white backing as the upload preview
   (see --logo-bg), so it reads the way the preview showed it. */
:root[data-theme="dark"] img.cust-logo { background: var(--logo-bg); padding: 1px; }

/* Expand chevron in customer name cell */
.expand-chevron {
  display: inline-block;
  width: 13px;
  font-size: 8px;
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 5px;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
}
.expand-chevron:hover { color: var(--accent-text); }
td.col-customer:hover .expand-chevron { color: var(--accent-text); }

/* Per-customer margin detail row */
.margin-detail-row > td {
  padding: 6px 12px 8px 28px;
  background: var(--subtle-bg);
  border-bottom: 1px solid var(--border);
}
.detail-table {
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.detail-table td { padding: 2px 8px; text-align: right; }
.detail-table td.detail-row-label {
  text-align: left;
  padding-right: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.detail-month-hdr {
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: .03em;
}
.detail-month-hdr.forecast { font-style: italic; color: var(--text-faint); }
.detail-val.forecast { color: var(--text-muted); font-style: italic; }
.detail-val.actual { color: var(--text); }
.detail-month-hdr.detail-fy-hdr { border-left: 2px solid var(--border); font-weight: 700; color: var(--text); }
.detail-val.detail-fy { border-left: 2px solid var(--border); font-weight: 600; }
tr.detail-year-sep { border-top: 1px solid var(--border); }
td.detail-year-label {
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 4px 0 1px;
  text-transform: uppercase;
}
.detail-val.detail-cost { color: var(--amber-fg); }
.detail-val.detail-margin.positive { color: var(--growth-pos); font-weight: 600; }
.detail-val.detail-margin.warning  { color: var(--growth-warn); font-weight: 600; }
.detail-val.detail-margin.negative { color: var(--growth-neg); font-weight: 600; }
.detail-val.detail-margin.muted { color: var(--text-muted); }
tr.at-risk + .margin-detail-row > td { background: var(--risk-bg); }

/* Subscriptions modal */
.subs-filter {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.subs-list { max-height: 60vh; overflow-y: auto; font-size: 12px; }
.subs-row {
  display: grid;
  grid-template-columns: 1fr 80px 170px 220px;
  gap: 8px;
  align-items: start;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-faint);
}
/* The second tag level (under COGS): its select, then the customer pills. */
.subs-level2 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.subs-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}
.subs-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  background: var(--selected-bg);
  color: var(--accent-text);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}
.subs-pill--static { padding-right: 8px; }
.subs-cat-label { padding: 4px 0; font-size: 12px; }
.subs-read-only { margin: -4px 0 8px; font-size: 12px; color: var(--text-muted); }
.subs-pill-x {
  background: none;
  border: none;
  color: var(--accent-text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
}
.subs-pill-x:hover { background: rgba(0, 79, 137, 0.15); }
.subs-add-btn {
  padding: 2px 8px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  line-height: 1.4;
}
.subs-add-btn:hover { border-color: #009FE3; color: #009FE3; }

.subs-add-popover {
  z-index: 1000;
  width: 240px;
  max-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.subs-add-search {
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  outline: none;
}
.subs-add-list { overflow-y: auto; max-height: 280px; }
.subs-add-item {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.subs-add-item:hover { background: var(--hover-bg); }
.subs-add-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}
.subs-row:last-child { border-bottom: none; }
.subs-row.unmapped       { background: var(--amber-bg); }
.subs-row.mktv           { background: var(--purple-bg); }
.subs-row.harmonic       { background: var(--indigo-bg); }
.subs-row.opex-dev       { background: var(--cyan-bg); }
.subs-row.opex-presales  { background: var(--pink-bg); }
.subs-row.opex-it        { background: var(--orange-bg); }
.subs-name { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.subs-cost { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.subs-select, .subs-cat-select {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  width: 100%;
}

/* BU separator rows */
#revenue-table tr.bu-header-row td {
  background: var(--band-bg);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 8px;
  text-align: left;
}

/* Totals rows */
tr.totals-row td {
  background: var(--total-bg);
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
}

tr.grand-totals-row td {
  background: var(--band-bg);
  color: #fff;
  font-weight: 700;
  border-top: 2px solid #009FE3;
}

tr.yoy-row td {
  background: var(--green-bg);
  color: var(--growth-pos);
  font-weight: 600;
  font-size: 11px;
}
tr.yoy-row td.negative { color: var(--growth-neg); }

/* Floating cell editor popover */
.cell-editor {
  position: absolute;
  z-index: 150;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 10px 12px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.cell-editor .ce-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.cell-editor .ce-context .ce-customer { color: var(--text); }

.cell-editor .ce-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 0 10px;
}

.cell-editor .ce-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,79,137,.15);
}

.cell-editor input.ce-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 22px;
  font-weight: 600;
  text-align: right;
  padding: 8px 0;
  width: 100%;
  background: transparent;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Hide number input spinners — cleaner look */
.cell-editor input.ce-input::-webkit-outer-spin-button,
.cell-editor input.ce-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cell-editor input.ce-input { -moz-appearance: textfield; }

.cell-editor .ce-suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
}

.cell-editor .ce-toggle {
  display: flex;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.cell-editor .ce-toggle button {
  flex: 1;
  padding: 5px 10px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cell-editor .ce-toggle button.active {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.cell-editor .ce-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: .03em;
}

.cell-editor .ce-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--subtle-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: -apple-system, monospace;
  font-size: 10px;
  margin: 0 2px;
}