/* CumuloReserve — superuser analytics page (specs/VALIDATION-GENERALIZATION-v1.md § Admin UI
   "Tab 4: Analytics"). Desktop-first layout mirroring registry.css's extraction pattern — see
   analytics.js header comment for why this is its own page rather than a tab inside a not-yet-
   built settings shell. Charts are hand-rolled (no vendored chart lib) — see analytics.js header
   comment for the reasoning; this file styles the SVG line chart + CSS bar chart directly against
   the existing DesignKit-v1 tokens (style.css :root), same approach registry.css takes for
   Tabulator's vendored theme. */

[hidden] { display: none !important; }

.analytics-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-5);
}

.analytics-auth-gate {
  max-width: 480px;
  margin: var(--space-6) auto;
  text-align: center;
}
.analytics-auth-gate p { margin-bottom: var(--space-4); }

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.analytics-header__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.analytics-header__actions #analyticsPropertySelect { min-width: 220px; margin-bottom: 0; }

.section-heading--left { text-align: left; margin: 0 0 var(--space-3); }

.analytics-daterange {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.analytics-daterange .field-label { margin-bottom: var(--space-1); }
.analytics-daterange .field-input { width: auto; margin-bottom: 0; }

/* Skeleton loading state (shown while a query is in flight) */
.analytics-skeleton { margin: var(--space-4) 0; }
.analytics-skeleton__row {
  height: 64px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-booked-bg) 37%, var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: analytics-skeleton-pulse 1.4s ease infinite;
}
@keyframes analytics-skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- stat tiles ---- */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat-tile {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.stat-tile__value {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  line-height: 1.1;
}
.stat-tile__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- shared chart chrome ---- */
.chart-section {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.chart-wrap { position: relative; }
.chart-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-5) 0;
  text-align: center;
  margin: 0;
}

/* ---- line chart (SVG) ---- */
.line-chart {
  display: block;
  width: 100%;
  height: 240px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.chart-gridline { stroke: var(--color-border); stroke-width: 1; }
.chart-axis-label { font-size: 9px; fill: var(--color-text-secondary); font-family: var(--font-family); }
.chart-axis-label--y { text-anchor: end; }
.chart-axis-label--x { text-anchor: middle; }
.chart-line { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.chart-dot { fill: var(--color-primary); }
.chart-dot-hit { fill: transparent; cursor: pointer; }
.chart-dot-hit:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  background: var(--color-text-primary);
  color: #FFFFFF;
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* ---- bar chart (CSS columns, no SVG needed for a plain bar chart) ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 220px;
  padding: var(--space-3) var(--space-2) 0;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.bar-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 64px;
  height: 100%;
}
.bar-chart__count {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.bar-chart__track {
  width: 32px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--color-booked-bg);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}
.bar-chart__fill {
  width: 100%;
  min-height: 2px;
  background: var(--color-primary);
}
.bar-chart__label {
  margin-top: var(--space-2);
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}