/* ==========================================================================
   v2-calls.css - the Call Analytics page.

   EVERY SELECTOR IS PREFIXED `ca`, so nothing here reaches another page. The
   card chassis, the table base, .btngroup and the column menu come from v2.css
   and v2-loi.css and are not restated.

   TYPE FOLLOWS THE PROJECTOR FLOOR. Meta text uses --text-caption and
   --text-micro (GL-003 § 8.4).

   STRICT CSP: bar widths, bar fills and heatmap cells arrive as the custom
   properties --w, --bar, --bar-ink, --cell and --cell-ink, written through
   CSSOM by cc2-dom.js.
   ========================================================================== */

/* ---------------- page frame ---------------- */
.capage { display: flex; flex-direction: column; gap: var(--space-lg); }
.capage .card + .card { margin-top: 0; }
.capage .pagehead { margin-bottom: 0; }
.capage .loibody > * + * { margin-top: var(--space-md); }
.casections { display: flex; flex-direction: column; gap: var(--space-lg); }
.cacallout, .canote, .caempty { max-width: 120ch; }

/* ---------------- controls ---------------- */
.cacontrols {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
}
.cafield { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.cafield__label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--color-text-muted);
}
.cafield select {
  min-width: 200px; padding: 6px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text); font-size: var(--text-caption);
}
.cacompare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* ---------------- text ---------------- */
.cacallout {
  margin: 0; padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface-2);
  font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-text);
}
.canote {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cateam { color: var(--color-reference-ink); font-weight: 500; }
.casub {
  margin: 0; font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: 700;
  color: var(--color-text-strong);
}
.caempty {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-md) var(--space-lg); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.caempty__icon { color: var(--color-text-muted); line-height: 0; }
.caempty__desc {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text);
}
.castate {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin: 0;
  font-size: var(--text-caption); font-weight: 700; color: var(--color-text-strong);
}
.castate__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.castate__dot--danger { background: var(--color-danger); }
.castate__dot--watch { background: var(--mark-watch); }

/* ---------------- stats ---------------- */
.castats { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.castat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.castat__val {
  font-variant-numeric: tabular-nums; font-size: var(--text-metric-sm); font-weight: 700;
  color: var(--color-text-strong);
}
.castat__label { font-size: var(--text-caption); color: var(--color-text-muted); }

/* ---------------- scroll regions ---------------- */
/* The padding holds a focus ring inside the box, where overflow would clip it. */
.cascroll { overflow-x: auto; padding: var(--space-xs); }
.cascroll--tall { max-height: 620px; overflow-y: auto; }

/* ---------------- call funnel ---------------- */
/* A reading width, so a value stays near its bar on a wide screen. */
.cafunnel, .cabars { max-width: 1320px; }
.cafunnel { display: flex; flex-direction: column; gap: 2px; min-width: 470px; }
.cafunnel__row { display: flex; align-items: center; gap: var(--space-md); }
.cafunnel__label {
  width: 140px; flex: 0 0 auto; text-align: right;
  font-size: var(--text-caption); font-weight: 600; color: var(--color-text-muted);
}
.cafunnel__track { position: relative; flex: 1 1 auto; height: 34px; }
.cafunnel__bar {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px;
  display: flex; align-items: center; padding: 0 var(--space-sm);
  border-radius: var(--radius-xs); background: var(--bar); color: var(--bar-ink);
}
/* GL-003 § 2.3b: a ramp fill on the dark canvas takes the ink-derived inset hairline. */
:root[data-theme="dark"] .cafunnel__bar {
  outline: 1px solid color-mix(in srgb, var(--bar-ink) 35%, transparent);
  outline-offset: -1px;
}
.cafunnel__count, .cafunnel__val {
  font-variant-numeric: tabular-nums; font-size: var(--text-caption); font-weight: 600;
  white-space: nowrap;
}
.cafunnel__val { color: var(--color-text); }
.cafunnel__conv {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) 0 var(--space-xs) calc(140px + var(--space-md));
  font-size: var(--text-micro); color: var(--color-text-muted);
}

/* ---------------- bars ----------------
   ONE GRID FOR THE WHOLE GROUP, so every bar in it is drawn on one scale. A
   per-row grid sizes the value column per row and hands each row a different
   track length, which ranked two reps backwards in v1 before its axis fix. */
.cabars {
  display: grid; grid-template-columns: minmax(140px, 280px) minmax(120px, 1fr) auto;
  gap: var(--space-sm) var(--space-md); align-items: center;
}
.cabar { display: contents; }
.cabar__label {
  font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text);
  overflow-wrap: anywhere;
}
.cabar__track {
  position: relative; height: 20px; border-radius: var(--radius-xs);
  background: var(--color-surface-2);
}
.cabar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px;
  border-radius: var(--radius-xs); background: var(--bar);
}
.cabar__val {
  font-variant-numeric: tabular-nums; font-size: var(--text-caption); color: var(--color-text);
  white-space: nowrap; text-align: right;
}
.cabar--noanswer .cabar__label { font-weight: 700; color: var(--color-warning-ink); }

/* ---------------- when to call ---------------- */
.caheat { border-collapse: separate; border-spacing: 2px; min-width: 720px; }
.caheat th {
  padding: 2px 4px; text-align: center; font-size: var(--text-micro); font-weight: 600;
  color: var(--color-text-muted);
}
.caheat th.caheat__day {
  text-align: right; padding-right: var(--space-sm); white-space: nowrap;
  font-size: var(--text-caption);
}
.caheat__cell {
  width: 42px; height: 30px; text-align: center; vertical-align: middle;
  font-variant-numeric: tabular-nums; font-size: var(--text-micro);
  background: var(--cell, var(--viz-seq-0)); color: var(--cell-ink, var(--viz-seq-0-ink));
  border: 1px solid var(--viz-grid); border-radius: var(--radius-xs);
}
/* Full muted ink, no opacity: at half opacity the dot measured 2.11:1 light. */
.caheat__cell--empty {
  background: transparent; border-color: transparent; color: var(--color-text-muted);
}
.caheat__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  font-size: var(--text-micro); color: var(--color-text-muted);
}
.caheat__ramp { display: flex; }
/* Square on purpose: contiguous steps read as one ramp only without a radius. */
.caheat__step { width: 22px; height: 12px; background: var(--cell, var(--viz-seq-0)); }

/* ---------------- list picker and search ---------------- */
.capicker { display: flex; flex-direction: column; gap: var(--space-xs); }
.capicker__row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md);
}
.capicker .cafield { flex: 1 1 260px; max-width: 440px; }
.catoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.casearch { max-width: 320px; }

/* ---------------- tables ---------------- */
.catable { font-size: var(--text-caption); }
.catable td.num { white-space: nowrap; }
/* Header labels wrap, so the eight-month Aircall grid and the eight-column list
   table fit their boxes at 1280. The column menu funnel stays beside its label. */
.catable thead th { white-space: normal; }
.catable .cacol-list { min-width: 160px; max-width: 440px; overflow-wrap: anywhere; }
.catable .cacol-name { min-width: 140px; }
.catable tbody th[scope="row"] { font-weight: inherit; text-align: left; color: var(--color-text); }
.catable tfoot td {
  font-weight: 700; color: var(--color-text-strong);
  border-top: 1px solid var(--color-border-strong); background: var(--color-surface-2);
}
.catable td.canote { white-space: normal; }