/* ============================================================
   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);
}

.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;
}

.analytics-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.analytics-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-text);
}

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

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

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

/* ---------- 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;
}

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

.analytics-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.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;
}

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

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

.analytics-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pc-text-dim);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--pc-border);
  white-space: nowrap;
}

.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;
}

.analytics-table .is-num {
  text-align: right;
  font-family: var(--pc-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 0;
}

.analytics-table th.is-num {
  text-align: right;
  padding-right: 0;
}

.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;
}

.analytics-insight {
  background: var(--pc-bg-card);
  border: 1px solid var(--pc-border);
  border-left: 3px solid var(--pc-border-strong);
  border-radius: var(--pc-radius-md);
  padding: 14px 16px;
}

.analytics-insight.is-positive {
  border-left-color: var(--pc-success);
}
.analytics-insight.is-negative {
  border-left-color: var(--pc-danger);
}

.analytics-insight-tone {
  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;
}

.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: 760px) {
  .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: 760px) {
  .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; }
}