/* ============================================================================
   callcenter-v2.css — the call-center screens, made vivid.

   One accent per meaning, the same on every screen: blue incoming, green
   answered, red missed and holes, amber voicemail, rose abandoned, violet
   direct and time, cyan transfers, slate the IVR. Figures lead; words are short
   and secondary. Built on the platform tokens, so every theme still works.
   ============================================================================ */

.blue { --ac: var(--a-over); }
.green, .ok { --ac: var(--pos); }
.red { --ac: var(--neg); }
.amber, .vm { --ac: var(--warn); }
.rose, .ab { --ac: color-mix(in srgb, var(--neg) 72%, var(--warn)); }
.violet { --ac: color-mix(in srgb, var(--a-over) 55%, var(--neg) 45%); }
.cyan { --ac: var(--cyan, var(--a-map)); }
.slate { --ac: var(--txt3); }

/* ── page header ────────────────────────────────────────────────────────── */
.ax-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 2px 0 12px; }
.ax-hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--txt); }
.ax-hero-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.ax-chip-date, .ax-chip-geo, .ax-chip-wh {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-weight: 700;
  background: color-mix(in srgb, var(--a-over) 12%, var(--pane)); color: var(--a-over);
  border: 1px solid color-mix(in srgb, var(--a-over) 30%, transparent);
}
.ax-chip-geo { color: var(--txt); background: var(--pane2); border-color: var(--rule2); }
.ax-chip-wh { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--pane)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ── headline figures ───────────────────────────────────────────────────── */
.ax-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ax-kpis.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ax-kpi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px 10px; min-height: 132px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--txt);
  border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--rule));
  background: linear-gradient(155deg, color-mix(in srgb, var(--ac) 16%, var(--pane)) 0%, var(--pane) 62%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--txt) 6%, transparent), 0 10px 28px -16px color-mix(in srgb, var(--ac) 55%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ax-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac); }
.ax-kpi:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--ac);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--txt) 8%, transparent), 0 16px 36px -14px color-mix(in srgb, var(--ac) 70%, transparent); }
.ax-kpi:disabled { cursor: default; }
.ax-kpi-top { display: flex; align-items: center; gap: 8px; }
.ax-kpi-ic {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 18%, transparent); flex: none;
}
.ax-kpi-l { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--txt2); flex: 1; }
.ax-kpi-v { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ac); margin-top: 4px; }
.ax-kpi.blue .ax-kpi-v, .ax-kpi.slate .ax-kpi-v { color: var(--txt); }
.ax-kpi-s { font-size: 12px; color: var(--txt2); }
.ax-kpi.alert { animation: ax-pulse 2.4s ease-in-out infinite; }
@keyframes ax-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--neg) 18%, transparent); } }
.ax-spark { display: block; width: 100%; height: 30px; margin-top: auto; }
.ax-spark .line { fill: none; stroke: var(--ac); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ax-spark .area { fill: color-mix(in srgb, var(--ac) 16%, transparent); stroke: none; }

/* ── outcome mix ────────────────────────────────────────────────────────── */
.ax-mixband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 18px; }
.ax-mix-l { font-size: 13px; color: var(--txt2); white-space: nowrap; }
.ax-mix-l b { font-size: 22px; color: var(--pos); margin-right: 4px; }
.ax-mix { display: flex; height: 14px; width: 100%; border-radius: 99px; overflow: hidden; background: var(--rule); }
.ax-mix span { display: block; height: 100%; transition: width .5s ease; }
.ax-mix .ok { background: var(--pos); }
.ax-mix .vm { background: var(--warn); }
.ax-mix .ab { background: color-mix(in srgb, var(--neg) 72%, var(--warn)); }
.ax-mix .hole { background: var(--neg); background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--pane) 40%, transparent) 4px 8px); }
.ax-mix-k { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-key {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--txt2); background: var(--pane2); border: 1px solid var(--rule);
}
.ax-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--ac); }
.ax-key b { color: var(--txt); }
.ax-key:hover { border-color: var(--ac); color: var(--txt); }
.ax-mixcell { min-width: 140px; width: 16%; }
.ax-mixcell .ax-mix { height: 10px; }

/* ── chart + insights ───────────────────────────────────────────────────── */
.ax-grid2 { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 14px; }
.ax-grid2 > .pnl { margin-bottom: 14px; }
.ax-svg { height: 250px; }
.ax-svg rect.in { fill: color-mix(in srgb, var(--a-over) 22%, transparent); }
.ax-svg rect.ansb { fill: color-mix(in srgb, var(--pos) 75%, transparent); }
.ax-day:hover rect.in { fill: color-mix(in srgb, var(--a-over) 40%, transparent); }
.ax-day:hover rect.ansb { fill: var(--pos); }
.ax-legend i.in { background: color-mix(in srgb, var(--a-over) 30%, transparent); }
.ax-legend i.ans { background: var(--pos); height: 11px; }
.ax-legend i.hole { background: var(--neg); }
.ax-insights { display: flex; flex-direction: column; gap: 8px; }
.ax-ins {
  display: grid; grid-template-columns: 30px auto 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px 12px;
  border-radius: 11px; cursor: pointer; font: inherit; color: var(--txt2); font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, var(--ac) 9%, var(--pane)); border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
  transition: transform .15s ease, border-color .15s ease;
}
.ax-ins:hover:not(:disabled) { transform: translateX(3px); border-color: var(--ac); }
.ax-ins-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: var(--ac); background: color-mix(in srgb, var(--ac) 18%, transparent); }
.ax-ins-b { font-size: 20px; font-weight: 800; color: var(--ac); letter-spacing: -.02em; }
.ax-ins b { color: var(--txt); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.ax-ratepill { display: inline-block; min-width: 54px; text-align: center; padding: 2px 8px; border-radius: 99px; font-weight: 800; font-size: 12px; }
.ax-ratepill.good { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.ax-ratepill.mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.ax-ratepill.poor { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.ax-terr td {
  padding-top: 14px !important; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a-over);
  border-bottom: 2px solid color-mix(in srgb, var(--a-over) 35%, transparent) !important; background: transparent !important;
}
.ax-orgs tbody tr.ax-area:hover td, .ax-lines tbody tr:hover td, .ax-seg tbody tr:hover td { background: var(--hover); }
.ax-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ax-sortable:hover { color: var(--a-over); }
.ax-sortable.on { color: var(--a-over); }
.ax-arrow { margin-left: 4px; font-size: 9px; opacity: .55; }
.ax-sortable.on .ax-arrow { opacity: 1; }
.ax-grp { border-bottom: 2px solid var(--ac) !important; color: var(--ac) !important; }
.ax-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--ac, var(--txt2));
  background: color-mix(in srgb, var(--ac, var(--txt3)) 14%, transparent); white-space: nowrap; }
.ax-pill.ok { --ac: var(--pos); }
.ax-pill.warn { --ac: var(--warn); }
.ax-pill.bad { --ac: var(--neg); }
.ax-pill.ghost, .ax-pill.muted { --ac: var(--txt3); color: var(--txt2); }

/* ── Contact Center line tiles ──────────────────────────────────────────── */
.ax-kinds { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ax-kind {
  gap: 6px; border-color: color-mix(in srgb, var(--ac) 30%, var(--rule));
  background: linear-gradient(155deg, color-mix(in srgb, var(--ac) 13%, var(--pane)) 0%, var(--pane) 70%);
}
.ax-kind-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--txt); }

/* ── flow diagram ───────────────────────────────────────────────────────── */
.ax-link { stroke: color-mix(in srgb, var(--ac, var(--a-over)) 32%, transparent); }
.ax-link:hover { stroke: color-mix(in srgb, var(--ac, var(--a-over)) 62%, transparent); }
.ax-node rect { fill: var(--ac, var(--a-over)); }
.ax-node.click:hover rect, .ax-node.click:focus rect { stroke: var(--txt); stroke-width: 2; outline: none; }
.ax-node-v { fill: var(--txt); font-size: 17px; font-weight: 800; }
.ax-node-l { fill: var(--txt2); font-size: 12px; font-weight: 600; }

/* ── people leaderboard ─────────────────────────────────────────────────── */
.ax-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.ax-card {
  display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--txt);
  background: var(--pane2); border: 1px solid var(--rule); transition: transform .15s ease, border-color .15s ease;
}
.ax-card:hover { transform: translateY(-2px); border-color: var(--a-over); }
.ax-rank { font-size: 11px; font-weight: 800; color: var(--txt3); text-align: right; }
.ax-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--pane); }
.ax-av.good { background: var(--pos); }
.ax-av.mid { background: var(--warn); }
.ax-av.poor { background: var(--neg); }
.ax-card-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-card-n { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-card-s { font-size: 11.5px; color: var(--txt3); }
.ax-card-v { font-size: 18px; font-weight: 800; }
.ax-card-v.good { color: var(--pos); }
.ax-card-v.mid { color: var(--warn); }
.ax-card-v.poor { color: var(--neg); }

/* ── drill-down grid ────────────────────────────────────────────────────── */
.ax-grid-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; position: sticky; top: -14px; z-index: 2;
  background: var(--pane); padding: 6px 0; }
.ax-search { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--rule2); background: var(--bg2); }
.ax-search:focus-within { border-color: var(--a-over); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-over) 18%, transparent); }
.ax-search span { color: var(--txt3); font-size: 15px; }
.ax-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--txt); font: inherit; font-size: 13px; min-width: 0; }
.ax-count { font-size: 12.5px; color: var(--txt2); }
.ax-count b { color: var(--txt); font-size: 15px; }
.ax-xl {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 800; color: var(--pane); background: var(--pos); border: 0;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pos) 80%, transparent);
}
.ax-xl:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ax-xl:disabled { opacity: .6; cursor: progress; transform: none; }
.ax-gridtbl th { position: sticky; top: 40px; background: var(--pane2); z-index: 1; }
.ax-drawer { width: min(1180px, 100vw); }
.ax-drawer header { gap: 12px; }
.ax-drawer header h3 { flex: 1; }

@media (max-width: 1500px) { .ax-kpis.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .ax-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax-grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .ax-mixband { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ax-kpis, .ax-kpis.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-kpi { min-height: 112px; }
  .ax-kpi-v { font-size: 24px; }
  .ax-board { grid-template-columns: minmax(0, 1fr); }
  .ax-hero h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ax-kpi.alert { animation: none; } .ax-mix span { transition: none; } }

/* Phone numbers and times read as one unit. */
.ax-gridtbl .nowrap, .ax-gridtbl .tnum { white-space: nowrap; }