/* ==========================================================================
   GATE PASS — Analytics / charts styling (Phase 7)
   ========================================================================== */

.panel {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel {
  padding: var(--space-4);
}
.panel__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.field--inline { flex-direction: row; align-items: center; gap: var(--space-2); }

/* Range chip (Last 7 days) — a compact pill in the header, not a form field */
.range-pill {
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  height: auto;
  width: auto;
}

/* ---- SVG charts ---- */
.chart-wrap { width: 100%; }
.chart { width: 100%; height: auto; display: block; }
.chart__grid { stroke: var(--surface-border); stroke-width: 1; }
.chart__tick { fill: var(--text-muted); font-size: var(--text-2xs); }
.chart__label { fill: var(--text-secondary); font-size: var(--text-2xs); }

.chart__legend {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart__legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- Horizontal bar chart (denial reasons) ---- */
.hbar { display: flex; flex-direction: column; gap: var(--space-3); }
.hbar__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.hbar__label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar__track {
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  height: 14px;
  overflow: hidden;
}
.hbar__fill { display: block; height: 100%; border-radius: var(--radius-full); }
.hbar__value { font-weight: var(--weight-semibold); color: var(--text-primary); }