/* Vendored from the active_analytics gem's charts.css + style.css, plus this app's
   own custom_style.css layered on top (previously concatenated at request time via
   application.css.erb; now just a plain static stylesheet). */

/*
 * Charts.css v0.9.0 (https://ChartsCSS.org/)
 * Copyright 2020 Rami Yushuvaev
 * Licensed under MIT
 */
.analytics .charts-css {
  --chart-bg-color: transparent;
  --heading-size: 0px;
  --primary-axis-color: rgba(var(--color-grey-100), 1);
  --primary-axis-style: solid;
  --primary-axis-width: 1px;
  --secondary-axes-color: rgba(var(--color-grey-50), 1);
  --secondary-axes-style: solid;
  --secondary-axes-width: 1px;
  --data-axes-color: rgba(var(--color-grey-200), 1);
  --data-axes-style: solid;
  --data-axes-width: 1px;
  --legend-border-color: rgba(var(--color-grey-200), 1);
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * Chart wrapper element
 */

.analytics .charts-css,
.analytics .charts-css::after,
.analytics .charts-css::before,
.analytics .charts-css *,
.analytics .charts-css *::after,
.analytics .charts-css *::before {
  box-sizing: border-box;
}

/*
 * Reset table element
 */
.analytics table.charts-css {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  overflow: initial;
  background-color: transparent;
}

.analytics table.charts-css caption,
.analytics table.charts-css colgroup,
.analytics table.charts-css thead,
.analytics table.charts-css tbody,
.analytics table.charts-css tr,
.analytics table.charts-css th,
.analytics table.charts-css td {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.analytics table.charts-css colgroup,
.analytics table.charts-css thead,
.analytics table.charts-css tfoot {
  display: none;
}


/*
 * Chart colors
 */ 

.analytics .charts-css.column tbody tr td {
  background: rgba(var(--color-grey-100), 1);
  padding: 0;
}

/*
 * Chart data
 */
.analytics .charts-css.hide-data .data {
  opacity: 0;
}

.analytics .charts-css.show-data-on-hover .data {
  transition-duration: .3s;
  opacity: 0;
}

.analytics .charts-css.show-data-on-hover tr:hover .data {
  transition-duration: .3s;
  opacity: 1;
}

/*
 * Chart labels
 */

.analytics .charts-css.column:not(.show-labels) {
  --labels-size: 0;
}

.analytics .charts-css.column:not(.show-labels) tbody tr th {
  display: none;
}

.analytics .charts-css.column.show-labels {
  --labels-size: 1.5rem;
}

.analytics .charts-css.column.show-labels tbody tr th {
  display: flex;
  justify-content: var(--labels-align, center);
  align-items: center;
  flex-direction: column;
}

@media (max-width: 600px) {
  .analytics .charts-css.column.show-labels {
    --labels-size: 0;
  }
  
  .analytics .charts-css.column.show-labels tbody tr th {
    display: none;
  }
}

/*
 * Chart axes
 */
.analytics .charts-css.column.show-primary-axis:not(.reverse) tbody tr {
  border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
}

.analytics .charts-css.column.show-primary-axis.reverse tbody tr {
  border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
}

.analytics .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr {
  background-size: 100% 20%;
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
}

.analytics .charts-css.column.show-5-secondary-axes.reverse tbody tr {
  background-size: 100% 20%;
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
}

/*
 * Chart tooltips
 */
.analytics .charts-css .tooltip {
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 5px 10px;
  border-radius: 6px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
  background-color: rgba(var(--color-grey-500), 1);
  color: rgba(var(--color-grey-00), 1);
  text-align: center;
  font-size: .9rem;
}

.analytics .charts-css .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(var(--color-grey-500), 1) transparent transparent;
}

.analytics .charts-css tr:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/*
 * Column Chart
 */
.analytics .charts-css.column tbody {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 1px;
  height: calc(100% - var(--heading-size));
}

.analytics .charts-css.column tbody tr {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow-wrap: anywhere;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.analytics .charts-css.column tbody tr th {
  position: absolute;
  right: 0;
  left: 0;
}

.analytics .charts-css.column tbody tr td {
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(100% * var(--size, 1));
  position: relative;
}

.analytics .charts-css.column:not(.reverse) tbody tr {
  align-items: flex-end;
  margin-block-end: var(--labels-size);
}

.analytics .charts-css.column:not(.reverse) tbody tr th {
  bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
  height: var(--labels-size);
  color: rgba(var(--color-grey-400), 1);
  font-weight: 400;
}

.analytics .charts-css.column:not(.reverse) tbody tr td {
  align-items: flex-start;
}

.analytics .charts-css.column:not(.stacked) tbody tr td {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.analytics .charts-css.column:not(.reverse-data) tbody {
  flex-direction: row;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
}

.analytics body > header nav {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 88px;
}

.analytics header nav .menubutton {
  margin-left: auto;
}

.analytics header .logo {
  margin-right: 8px;
}

.analytics header .logo svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(var(--color-blue-500), 1);
  stroke-width: 1;
  vertical-align: middle;
}

.analytics header .is-link {
  text-transform: none;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0 16px;
  margin: 0;
  min-height: 24px;
  color: rgba(var(--color-grey-700), 1);
}

.analytics header .is-link:hover {
  background: rgba(var(--color-grey-50), 1);
}

.analytics main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.analytics main h2 {
  word-break: break-word;
  display: flex;
  gap: var(--space);
}

.analytics section {
  margin-bottom: var(--space-4x);
}

.analytics .tooltip-date {
  color: rgba(var(--color-grey-100), 1);
}

.analytics .card h3 {
  display: flex;
}

.analytics .card h3 small {
  color: rgba(var(--color-red-500), 1);
}

.analytics .card h3 small.is-success {
  color: rgba(var(--color-green-500), 1);
}

.analytics .card h3 a {
  margin-left: auto;
  font-weight: 400;
  font-size: 1rem;
}

.analytics .card table {
  margin: 0 -24px -24px;
  width: calc(100% + 48px);
}

.analytics tr td:first-of-type {
  padding: 12px 0px 12px 24px;
}

.analytics tr td:last-of-type {
  padding: 12px 24px 12px 0;
}

.analytics td a {
  word-break: break-word;
}

.analytics td.number { 
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.analytics .referer-favicon {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 4px;
}

.analytics div.is-empty {
  display: flex;
	align-items: center;
  justify-content: center;
  height: calc(100% - 72px);
  width: 100%;
  color: rgba(var(--color-grey-300), 1);
}

.analytics body > footer {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 24px;
}

.analytics body > footer ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.analytics body > footer .card {
  margin: 0;
  background: rgba(var(--color-grey-50), 1);
}

.analytics body > footer .card p {
  padding: 0 0 2px;
  color: rgba(var(--color-grey-400), 1);
}

@media (max-width: 480px) {
  .analytics header nav .menubutton {
    margin-top: 24px;
  }

  .analytics [role="dialog"] {
    min-width: 280px;
  }
}
/* App-specific reskin layered on top of analytics' own ariato.css + _style.css (loaded first,
   see application.css.erb), to match the look of the Simple Analytics dashboard: a light blue page
   background, white cards, a sky-blue accent, and an area chart. Token overrides cascade through the
   gem's existing components (links, borders, badges); everything below with a `dashboard-`, `stat-list`,
   `bar-list`, or `chart` prefix is new markup introduced by our view overrides. BEM per CLAUDE.md. */

/* Self-hosted rather than linked from Google Fonts, in keeping with this analytics setup's
   "no third parties" stance (see README). Space Grotesk is a variable font (weight axis
   300–700, one file covers both the 400/700 weights ariato.css's tokens use) under the SIL
   Open Font License — see public/fonts/space-grotesk-OFL.txt. Source: fonts.google.com/specimen/Space+Grotesk */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}

:root {
  --color-bg: 234, 242, 250;
  --color-blue-500: 33, 139, 214;
  --color-blue-600: 20, 113, 181;
  --color-red-500: 224, 82, 82;
  --color-green-500: 34, 175, 122;
  --border-radius-s: 10px;
  --font-sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.analytics body > header nav,
.analytics main,
.analytics body > footer {
  max-width: 1400px;
}

/* Bigger, bolder branding to match Simple Analytics' top-left site name */
.analytics header .logo svg {
  width: 32px;
  height: 32px;
  stroke-width: 0.8;
}

.analytics header nav > a:first-of-type {
  font-size: var(--font-size-80);
  font-weight: var(--font-weight-700);
  color: rgba(var(--color-grey-700), 1);
  text-decoration: none;
}

/* ---- tabs: Visitors / Goals / Events section nav, Simple-Analytics-style underlined tabs ---- */

.analytics .tabs {
  display: flex;
  gap: var(--space-4x);
  margin-left: var(--space-4x);
}

.analytics .tabs__item {
  padding: 4px 0;
  color: rgba(var(--color-grey-400), 1);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.analytics .tabs__item:hover {
  color: rgba(var(--color-grey-700), 1);
}

.analytics .tabs__item.is-active {
  color: rgba(var(--color-grey-700), 1);
  font-weight: var(--font-weight-700);
  border-bottom-color: rgba(var(--color-blue-500), 1);
}

/* Cards: white against the tinted page background, softer shadow, more rounded */
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--color-black), 0.04), 0 1px 6px rgba(var(--color-black), 0.05);
}

/* ---- stat-list: plain "value, then label" rows (Sources, Pages) ---- */

.stat-list {
  margin: 0 calc(var(--space-3x) * -1) calc(var(--space-3x) * -1);
  width: calc(100% + var(--space-3x) * 2);
  list-style: none;
  padding: 0;
}

.stat-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space);
  padding: 10px var(--space-3x);
}

.stat-list__item + .stat-list__item {
  box-shadow: 0 1px 0 0 rgba(var(--color-grey-50), 1);
}

.stat-list__value {
  color: rgba(var(--color-blue-500), 1);
  font-weight: var(--font-weight-700);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 2.5em;
}

.stat-list__label {
  color: rgba(var(--color-grey-500), 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-list__label a {
  color: inherit;
  text-decoration: none;
}

.stat-list__label a:hover {
  color: rgba(var(--color-blue-500), 1);
}

/* ---- bar-list: percentage rows with an inline fill bar (Browsers, Countries, Devices) ---- */

.analytics .bar-list {
  margin: 0 calc(var(--space-3x) * -1) calc(var(--space-3x) * -1);
  width: calc(100% + var(--space-3x) * 2);
  list-style: none;
  padding: 0;
}

.analytics .bar-list__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: 10px var(--space-3x);
  overflow: hidden;
}

.analytics .bar-list__item + .bar-list__item {
  box-shadow: 0 1px 0 0 rgba(var(--color-grey-50), 1);
}

.analytics .bar-list__fill {
  position: absolute;
  inset: 0;
  width: var(--percentage, 0%);
  background: rgba(var(--color-blue-100), 1);
  z-index: 0;
}

.analytics .bar-list__label,
.analytics .bar-list__value {
  position: relative;
  z-index: 1;
}

.analytics .bar-list__label {
  color: rgba(var(--color-grey-600), 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics .bar-list__label a {
  color: inherit;
  text-decoration: none;
}

.analytics .bar-list__value {
  color: rgba(var(--color-grey-500), 1);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ---- dashboard-header: views + visitors + live, replacing the gem's plain "N views" heading ---- */

.analytics .dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5x);
  margin-bottom: var(--space-2x);
}

.analytics .dashboard-header__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space);
}

.analytics .dashboard-header__value {
  font-size: var(--font-size-90);
  font-weight: var(--font-weight-700);
  color: rgba(var(--color-grey-700), 1);
  font-variant-numeric: tabular-nums;
}

.analytics .dashboard-header__label {
  color: rgba(var(--color-grey-400), 1);
}

.analytics .dashboard-header__delta {
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  padding: 2px 8px;
  border-radius: 999px;
}

.analytics .dashboard-header__delta--up {
  color: rgba(var(--color-green-500), 1);
  background: rgba(var(--color-green-500), 0.12);
}

.analytics .dashboard-header__delta--down {
  color: rgba(var(--color-red-500), 1);
  background: rgba(var(--color-red-500), 0.12);
}

.analytics .dashboard-header__live {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--color-grey-400), 1);
  font-variant-numeric: tabular-nums;
}

.analytics .dashboard-header__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--color-red-500), 1);
  animation: dashboard-header-live-pulse 2s ease-in-out infinite;
}

@keyframes dashboard-header-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- chart: inline SVG area chart replacing the gem's charts.css column chart ---- */

.analytics .chart {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2x);
}

.analytics .chart__axis {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-30);
  color: rgba(var(--color-grey-300), 1);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 0;
}

.analytics .chart__plot {
  grid-column: 2;
  grid-row: 1;
}

.analytics .chart__svg {
  width: 100%;
  height: calc(var(--space-2x) * 8);
  display: block;
  overflow: visible;
}

.analytics .chart__gridline {
  stroke: rgba(var(--color-grey-50), 1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.analytics .chart__area {
  fill: rgba(var(--color-blue-500), 0.12);
  stroke: none;
}

.analytics .chart__line {
  fill: none;
  stroke: rgba(var(--color-blue-500), 1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.analytics .chart__point {
  fill: transparent;
}

.analytics .chart__point:hover {
  fill: rgba(var(--color-blue-500), 0.15);
}

.analytics .chart__labels {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: var(--space-3x);
  margin-top: 4px;
}

.analytics .chart__label {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--font-size-30);
  color: rgba(var(--color-grey-300), 1);
}

/* Narrows the min column width just for the site dashboard's card row (Sources, Pages,
   Devices/Browsers, Countries) so they sit side by side on typical desktop widths instead
   of wrapping. */
.analytics .grid-auto.dashboard-grid {
  --col-min-width: calc(var(--space) * 24);
}

/* Devices and Browsers share one grid column, stacked, instead of each taking their own —
   Devices is a much shorter list than the rest and looked lopsided as a full column on its own. */
.analytics .dashboard-grid__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3x);
  list-style-type: none;
  margin: 0;
}