/* ============================================================
   Analytics page
   ------------------------------------------------------------
   Built entirely from the existing PluginChatBot tokens declared
   in colors_and_type.css / app-ui-refresh.css: light neutral page,
   white cards, red accent, black text, Plus Jakarta Sans, and
   JetBrains Mono for every figure. No new palette, no gradients,
   no separate analytics theme.

   Charts use one small semantic set:
     current period  -> accent red
     previous period -> neutral grey, dashed
     success / failure -> success green / danger red, always paired
                          with a glyph or label so colour is never
                          the only signal (WCAG 1.4.1).
   ============================================================ */

.analytics {
  padding: 28px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Header + filters ---------- */

.analytics-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.analytics-head h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pc-text);
}

.analytics-head .analytics-sub {
  font-size: 13.5px;
  color: var(--pc-text-muted);
  margin-top: 4px;
}

.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.analytics-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-field > label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-text-dim);
}

.analytics-select,
.analytics-date {
  appearance: none;
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-sm);
  color: var(--pc-text);
  font-family: var(--pc-font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  min-height: 38px;
  min-width: 132px;
}

.analytics-date {
  font-family: var(--pc-font-mono);
  font-size: 12.5px;
  min-width: 148px;
}

.analytics-select:focus-visible,
.analytics-date:focus-visible,
.analytics-chip:focus-visible,
.analytics-row-button:focus-visible,
.analytics-tab:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}

/* ---------- Notices ---------- */

.analytics-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--pc-radius-sm);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg-card-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pc-text-muted);
}

.analytics-notice.is-error {
  border-color: rgba(217, 47, 36, 0.34);
  background: rgba(217, 47, 36, 0.06);
  color: var(--pc-text);
}

.analytics-notice svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.analytics-notice-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ---------- KPI grid ---------- */

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.analytics-kpi {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.analytics-kpi-label {
  font-size: 12px;
  color: var(--pc-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.analytics-kpi-value {
  font-family: var(--pc-font-mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pc-text);
  font-variant-numeric: tabular-nums;
}

.analytics-kpi-value.is-empty {
  color: var(--pc-text-dim);
}

.analytics-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-text-muted);
}

/* The glyph carries the direction; colour is reinforcement only. */
.analytics-delta-glyph {
  font-family: var(--pc-font-mono);
  font-size: 11px;
  line-height: 1;
}

.analytics-delta.is-good {
  color: var(--pc-success);
}
.analytics-delta.is-bad {
  color: var(--pc-danger);
}
.analytics-delta.is-flat {
  color: var(--pc-text-dim);
}

.analytics-delta-note {
  font-weight: 500;
  color: var(--pc-text-dim);
}

/* Every numeral on the page — KPI values, table columns and the funnel's own
   figures already use the monospace, tabular-figure treatment via their own
   selectors below. This class is for a number that appears anywhere else (a
   delta percentage, a count inside a status pill, a figure inline in a
   sentence), so no numeral on the page ever falls back to the proportional
   sans-serif body font while its neighbours use monospace. */
.analytics-num {
  font-family: var(--pc-font-mono);
  font-variant-numeric: tabular-nums;
}

.analytics-partial {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pc-warning);
  border: 1px solid rgba(180, 83, 9, 0.32);
  background: rgba(180, 83, 9, 0.07);
  border-radius: var(--pc-radius-pill);
  padding: 2px 8px;
}

/* ---------- Cards / panels ---------- */

.analytics-card {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  padding: 20px;
  min-width: 0;
  /* Every card in a grid row stretches to the row's tallest card (see
     .analytics-grid-2 / .analytics-grid-3 below); the card itself is a flex
     column so its body (chart, funnel, table or empty state) can claim that
     extra height instead of leaving a dead gap under a shorter card. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.analytics-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  /* Reserves room for a two-line subtitle (the longest of the three "by ..."
     panels) so all three card bodies in a row start from the same baseline
     regardless of how long that card's own subtitle is. */
  min-height: 40px;
}

.analytics-card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* The icon chip: a soft brand-red tint behind a brand-red glyph. Purely
   identifying (which card is which at a glance), never decorative — every
   card on the page gets exactly one, sized and tinted identically. */
.analytics-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--pc-radius-sm);
  background: rgba(217, 47, 36, 0.1);
  color: var(--pc-accent);
}

.analytics-card-icon.is-small {
  width: 18px;
  height: 18px;
  border-radius: var(--pc-radius-xs);
  background: rgba(217, 47, 36, 0.09);
}

.analytics-card-head-text {
  min-width: 0;
}

.analytics-card-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pc-text);
  line-height: 1.3;
}

.analytics-card-sub {
  font-size: 12px;
  color: var(--pc-text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

.analytics-card-head-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* A compact, data-derived "at a glance" figure in the header (e.g. "4
   channels") — never a number invented for decoration. */
.analytics-card-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-text-muted);
  background: var(--pc-bg-card-soft);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.analytics-grid-2 {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.analytics-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* ---------- Chart ---------- */

.analytics-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.analytics-chart-grid {
  stroke: var(--pc-border);
  stroke-width: 1;
}

.analytics-chart-axis {
  font-family: var(--pc-font-mono);
  font-size: 10px;
  fill: var(--pc-text-dim);
}

.analytics-chart-current {
  fill: none;
  stroke: var(--pc-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.analytics-chart-area {
  fill: rgba(217, 47, 36, 0.09);
  stroke: none;
}

/* Previous period is dashed as well as grey, so the two series remain
   distinguishable without relying on colour. */
.analytics-chart-previous {
  fill: none;
  stroke: rgba(17, 17, 17, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
}

.analytics-chart-marker {
  fill: var(--pc-accent);
}

.analytics-chart-hit {
  fill: transparent;
  cursor: crosshair;
}

.analytics-chart-cursor {
  stroke: var(--pc-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.analytics-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--pc-text-muted);
  margin-top: 10px;
}

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

.analytics-legend-swatch {
  width: 16px;
  height: 0;
  border-top: 2px solid var(--pc-accent);
}

.analytics-legend-swatch.is-previous {
  border-top: 2px dashed rgba(17, 17, 17, 0.42);
}

.analytics-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--pc-text);
  color: #ffffff;
  border-radius: var(--pc-radius-xs);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.18);
}

.analytics-tooltip strong {
  font-family: var(--pc-font-mono);
}

.analytics-chart-wrap {
  position: relative;
  /* Fills whatever extra height the card gained from stretching to match a
     taller sibling (e.g. the funnel card). Content stays top-aligned, right
     under the card header, exactly where it sits in a card that was not
     stretched — the extra height only ever shows up as breathing room below
     the legend, never as the chart drifting away from the header. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---------- Funnel ---------- */

.analytics-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Grows to fill the card when this row's other card (the trend chart) is
     taller. The steps stay top-aligned, directly under the header, exactly
     as they sit in an unstretched card — the extra height only ever appears
     as breathing room below the last bar, never as the steps drifting down
     or spreading out to fill the card. */
  flex: 1;
  justify-content: flex-start;
}

.analytics-funnel-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}

.analytics-funnel-label {
  font-size: 13px;
  color: var(--pc-text);
}

.analytics-funnel-value {
  font-family: var(--pc-font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.analytics-funnel-bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: var(--pc-radius-pill);
  background: rgba(17, 17, 17, 0.07);
  overflow: hidden;
}

.analytics-funnel-fill {
  height: 100%;
  background: var(--pc-accent);
  border-radius: var(--pc-radius-pill);
}

.analytics-funnel-step.is-unavailable .analytics-funnel-fill {
  background: repeating-linear-gradient(
    45deg,
    rgba(17, 17, 17, 0.16),
    rgba(17, 17, 17, 0.16) 4px,
    rgba(17, 17, 17, 0.06) 4px,
    rgba(17, 17, 17, 0.06) 8px
  );
}

.analytics-funnel-note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--pc-text-dim);
  line-height: 1.45;
}

/* ---------- Tables ---------- */

.analytics-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Lets a short table's card still stretch to match a taller sibling in the
     same row (By channel / By bot / By source page) without the table itself
     being stretched or its rows re-spaced — it stays top-aligned, which is
     the normal, expected shape for tabular data; only the surrounding card
     grows. */
  flex: 1;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* A flat min-width applied to EVERY table used to force the narrow
   three-across breakdown cards (By channel / By bot / By source page — each
   only around 320-360px wide next to its siblings) to overflow horizontally,
   which hid their numeric columns off the right edge with no visible
   scrollbar cue: the header read "CHANNEL ... CON" and every data row showed
   only its first column. Only the genuinely column-dense, full-width tables
   (Agent performance, the AI usage model breakdown, Channel health) opt into
   a minimum width, so THEY scroll horizontally on a narrow viewport instead
   of squishing illegibly, while the narrow breakdown tables simply shrink to
   fit their column, which their short content (a channel name, a small
   count) reads fine at. */
.analytics-table.is-wide {
  min-width: 480px;
}

.analytics-table caption {
  text-align: left;
  font-size: 12px;
  color: var(--pc-text-dim);
  padding-bottom: 8px;
}

/* A modern, neutral data-table header: readable proportional type (not the
   monospace reserved for figures), a subtle tinted band rather than the
   accidental washed-out pink this used to inherit from an unscoped `thead th`
   rule elsewhere on the page (analytics.css now sets every property that
   matters here explicitly, so nothing bleeds through). Every table on the
   page — the three breakdown panels, conversation intelligence, agent
   performance, the AI usage model breakdown and channel health — shares this
   one rule, so headers look and measure identically everywhere. */
.analytics-table th {
  text-align: left;
  font-family: var(--pc-font-sans);
  font-size: 11.5px;
  font-weight: var(--pc-weight-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pc-text-muted);
  background: var(--pc-bg-card-soft);
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--pc-border-strong);
  white-space: nowrap;
  height: 38px;
  box-sizing: border-box;
}

.analytics-table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--pc-border);
  color: var(--pc-text);
  vertical-align: middle;
}

.analytics-table tbody tr:last-child td {
  border-bottom: none;
}

/* Shared by both header and data cells: right-aligned, no wrap, flush to the
   table's right edge. The monospace/tabular-figure treatment below is data
   cells only — a column HEADING is a word ("CONVS"), not a figure, and reads
   oddly in a figure font. */
.analytics-table .is-num {
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
}

.analytics-table td.is-num {
  font-family: var(--pc-font-mono);
  font-variant-numeric: tabular-nums;
}

.analytics-truncate {
  display: block;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Interactive rows ---------- */

.analytics-row-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--pc-accent);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.analytics-row-button:hover {
  color: var(--pc-text);
}

.analytics-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg-card);
  color: var(--pc-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.analytics-chip.is-active {
  border-color: rgba(217, 47, 36, 0.4);
  background: rgba(217, 47, 36, 0.07);
  color: var(--pc-accent);
}

.analytics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-tab {
  padding: 6px 12px;
  border-radius: var(--pc-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--pc-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.analytics-tab[aria-selected='true'] {
  border-color: var(--pc-border);
  background: var(--pc-bg-card-soft);
  color: var(--pc-text);
}

/* ---------- Status pills ---------- */

.analytics-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg-card-soft);
  color: var(--pc-text-muted);
  white-space: nowrap;
}

.analytics-status.is-good {
  border-color: rgba(21, 128, 61, 0.32);
  background: rgba(21, 128, 61, 0.08);
  color: var(--pc-success);
}

.analytics-status.is-bad {
  border-color: rgba(217, 47, 36, 0.34);
  background: rgba(217, 47, 36, 0.07);
  color: var(--pc-danger);
}

/* ---------- Insights ---------- */

.analytics-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* All three insight tones — positive, negative and neutral — share the one
   brand-red accent bar and icon colour. This is a data reading, not a
   traffic light: the tones are told apart by their icon and label
   (checkCircle/alertTriangle/info, "Working well"/"Needs attention"/
   "Observation"), never by colour, so there is nothing left to override per
   tone here. */
.analytics-insight {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-left: 3px solid var(--pc-accent);
  border-radius: var(--pc-radius-md);
  padding: 14px 16px;
}

.analytics-insight-tone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-text-dim);
}

.analytics-insight h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin: 6px 0 4px;
  color: var(--pc-text);
  line-height: 1.35;
}

.analytics-insight p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pc-text-muted);
}

/* ---------- Empty + skeleton ---------- */

.analytics-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--pc-text-muted);
  font-size: 13px;
  line-height: 1.55;
  /* An empty state is always the sole body content of a stretched card (a
     chart, funnel or table panel with nothing to show), so it claims the
     full body height and centres its message in it instead of sitting
     pinned to the top with dead space below. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.analytics-empty strong {
  display: block;
  color: var(--pc-text);
  font-size: 14px;
  margin-bottom: 6px;
}

.analytics-onboarding {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  padding: 34px 28px;
  text-align: center;
}

.analytics-onboarding h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.analytics-onboarding p {
  font-size: 13.5px;
  color: var(--pc-text-muted);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 16px;
}

.analytics-skeleton {
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.055) 25%,
    rgba(17, 17, 17, 0.1) 37%,
    rgba(17, 17, 17, 0.055) 63%
  );
  background-size: 400% 100%;
  animation: analytics-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--pc-radius-xs);
}

@keyframes analytics-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-skeleton {
    animation: none;
  }
}

.analytics-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Drill-down drawer ---------- */

.analytics-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.38);
  z-index: 90;
  display: flex;
  justify-content: flex-end;
}

.analytics-drawer {
  width: min(560px, 100%);
  height: 100%;
  background: var(--pc-bg-card);
  border-left: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow-elev);
  display: flex;
  flex-direction: column;
}

.analytics-drawer-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--pc-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.analytics-drawer-head h2 {
  font-size: 15px;
  font-weight: 600;
}

.analytics-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 24px;
}

.analytics-drawer-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--pc-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.analytics-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--pc-text-dim);
  font-family: var(--pc-font-mono);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .analytics-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .analytics-grid-2,
  .analytics-grid-3 {
    grid-template-columns: 1fr;
  }
  .analytics-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .analytics {
    padding: 18px 14px 48px;
    gap: 12px;
  }
  .analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analytics-insights {
    grid-template-columns: 1fr;
  }
  .analytics-card {
    padding: 16px 14px;
  }
  .analytics-kpi-value {
    font-size: 21px;
  }
  .analytics-filters {
    width: 100%;
  }
  .analytics-field,
  .analytics-select,
  .analytics-date {
    flex: 1 1 140px;
    min-width: 0;
  }
  .analytics-truncate {
    max-width: 190px;
  }
  .analytics-drawer {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .analytics-kpis {
    grid-template-columns: 1fr;
  }
}

/* ---- Added mobile polish: cleaner card headers, full-width controls,
        readable tables, and no sideways page scroll on phones. ---- */
@media (max-width: 768px) {
  .analytics { max-width: 100%; }
  /* Filter controls: keep them as compact selects (2-per-row grid), not tall
     boxes. The earlier flex:1 1 140px set the select's basis as height inside
     the column field, blowing them up — pin the height and drop the flex. */
  .analytics-filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; align-items: end; }
  .analytics-filters .analytics-field { width: auto; min-width: 0; flex: 0 1 auto; }
  .analytics-filters .analytics-select,
  .analytics-filters .analytics-date {
    flex: 0 0 auto !important;
    width: 100%; min-width: 0;
    height: 42px; min-height: 42px;
  }
  .analytics-card-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .analytics-card-head .analytics-field { width: 100%; }
  .analytics-card-head .analytics-field label { display: block; margin-bottom: 4px; }
  .analytics-card-head .analytics-select,
  .analytics-card-head .analytics-date { width: 100%; min-width: 0; }
  .analytics-legend { row-gap: 6px; }
  .analytics-table-scroll { border-radius: 12px; }
  .analytics-table th, .analytics-table td { white-space: nowrap; }
  .analytics-kpi-value { word-break: break-word; }
}