/* ── Analytics view (admin only) ── */
.ana { min-width: 0; max-width: 100%; }

/* Section nav — segmented links, square corners (no pills) */
.ana-nav {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-card); flex-shrink: 0;
}
.ana-nav__item {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  border-right: 1px solid var(--border); transition: background .12s, color .12s;
}
.ana-nav__item:last-child { border-right: 0; }
.ana-nav__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.ana-nav__item.is-active { background: var(--text-primary); color: var(--bg-card); }

.ana-custom { display: flex; align-items: center; gap: 6px; }
.ana-custom[hidden] { display: none; }

/* Header slots wrap instead of colliding when the window is narrow */
.ana-head .pg-head__filters { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
.ana-head .pg-head__controls { flex-wrap: wrap; row-gap: 6px; }

/* Mobile-only control strip (the shared header is hidden below 920px) */
.ana-mobile-bar { display: none; flex-direction: column; gap: 8px; }
.ana-mobile-bar__row { display: flex; align-items: center; gap: 8px; }
.ana-mobile-bar__row .veh-sort { flex: 1; min-width: 0; padding: 8px 10px; font-size: var(--text-body); }
.ana-nav--mobile { overflow-x: auto; scrollbar-width: none; }
.ana-nav--mobile::-webkit-scrollbar { display: none; }
.ana-nav--mobile .ana-nav__item { flex: 1; text-align: center; padding: 8px 10px; }
@media (max-width: 920px) { .ana-mobile-bar { display: flex; } }
.ana-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.ana-check input { accent-color: var(--accent); margin: 0; }
.ana-export { display: flex; gap: 6px; }

/* Buttons */
.ana-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: var(--font-body);
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; line-height: 1.2; transition: background .12s, border-color .12s;
}
.ana-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.ana-btn--primary:hover { filter: brightness(0.95); }
.ana-btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.ana-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.ana-btn--danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.ana-btn--danger:hover { background: var(--tint-danger); }
.ana-btn--sm { padding: 3px 8px; font-size: 11px; }

/* Cards */
.ana-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0;
}
.ana-card__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ana-card__title { margin: 0; font-size: var(--text-section-title); font-weight: 700; font-family: var(--font-heading); color: var(--text-primary); }
.ana-card__sub { font-size: var(--text-small); color: var(--text-muted); }
.ana-card__spacer { flex: 1; }
.ana-card__head .ana-btn { align-self: center; }

.ana-grid { display: grid; gap: 20px; min-width: 0; }
.ana-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ana-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ana-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ana-grid--2, .ana-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.ana-notice {
  padding: 10px 14px; border: 1px solid var(--color-warning); background: var(--tint-warning);
  border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary);
}
.ana-empty { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* Text helpers */
.ana-muted { font-size: 11px; color: var(--text-muted); }
.ana-mono { font-family: var(--font-mono); font-size: 12px; }
.ana-wrap { word-break: break-all; overflow-wrap: anywhere; }
.ana-link { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.ana-link:hover { color: var(--accent); text-decoration: underline; }
.ana-path { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tags — small square-cornered labels */
.ana-tag {
  display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 600; white-space: nowrap;
  letter-spacing: .03em; text-transform: uppercase; border-radius: var(--radius-sm);
  background: var(--bg-hover); color: var(--text-secondary); line-height: 1.4;
}
.ana-tag--mobile, .ana-tag--tablet { background: var(--tint-info); color: var(--color-info); }
.ana-tag--desktop { background: var(--tint-success); color: var(--accent); }
.ana-tag--bot { background: var(--tint-warning); color: var(--color-warning); }
.ana-tag--exit { background: var(--tint-danger); color: var(--color-danger); }
.ana-tag--event { background: var(--tint-info); color: var(--color-info); text-transform: none; letter-spacing: 0; }
.ana-live {
  display: inline-block; padding: 1px 6px; margin-left: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: var(--radius-sm);
  background: var(--tint-success); color: var(--accent);
}
.ana-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* Horizontal bar lists */
.ana-bars { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 14px; }
.ana-bar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.ana-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ana-bar__track { height: 8px; background: var(--bg-hover); border-radius: 2px; overflow: hidden; }
.ana-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.ana-bar__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.ana-bar__share { margin-left: 6px; color: var(--text-muted); font-size: 11px; }

/* Column charts (inline SVG) */
.ana-chart-wrap { padding: 12px 12px 6px; }
.ana-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ana-chart__grid { stroke: var(--border); stroke-width: 1; }
.ana-chart__tick { fill: var(--text-muted); font-size: 10px; font-family: var(--font-body); }
.ana-chart__bar { fill: var(--accent); }
.ana-chart__hit { fill: transparent; }
.ana-chart__bar-g:hover .ana-chart__bar { fill: var(--text-primary); }
.ana-chart__bar-g:hover .ana-chart__hit { fill: var(--bg-hover); }

/* Stat tiles */
.ana-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 16px 18px; }
.ana-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-base); min-width: 0; }
.ana-stat__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ana-stat__value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.ana-stat__value--text { font-family: var(--font-heading); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-stat__sub { font-size: 11px; color: var(--text-muted); }

/* Tables (self-contained — tables.css is not loaded globally) */
.ana-table-wrap { overflow-x: auto; }
.ana-table { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--font-body); font-size: 12px; }
.ana-table thead th {
  font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-secondary); padding: 8px 14px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap; background: var(--bg-card);
}
.ana-table tbody td { padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; font-size: 12px; }
.ana-table tbody tr:last-child td { border-bottom: 0; }
.ana-table tbody tr:hover { background: var(--bg-hover); }
.ana-table .col-right { text-align: right; font-variant-numeric: tabular-nums; }
.ana-table .col-date { white-space: nowrap; }
.ana-pager { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.ana-pager .ana-muted { flex: 1; }

/* Detail definition lists */
.ana-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; }
.ana-detail { padding: 14px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.ana-detail__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ana-dl { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 6px 12px; margin: 0; font-size: 12px; }
.ana-dl dt { color: var(--text-muted); }
.ana-dl dd { margin: 0; color: var(--text-primary); min-width: 0; }
.ana-dl--wide { padding: 0 18px 16px; grid-template-columns: minmax(120px, 20%) 1fr; }

/* Journey timeline */
.ana-timeline { list-style: none; margin: 0; padding: 12px 18px 16px; display: flex; flex-direction: column; }
.ana-timeline__item { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ana-timeline__item:last-child { border-bottom: 0; }
.ana-timeline__time { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-family: var(--font-mono); color: var(--text-primary); }
.ana-timeline__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.ana-timeline__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ana-timeline__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); }
.ana-timeline__meta strong { color: var(--text-primary); font-weight: 600; }
.ana-timeline__event { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-top: 2px; background: var(--bg-base); border-radius: var(--radius-sm); font-size: 12px; }
@media (max-width: 640px) { .ana-timeline__item { grid-template-columns: 1fr; gap: 4px; } }

/* Settings form */
.ana-settings { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ana-check--row { align-items: flex-start; white-space: normal; flex-wrap: wrap; column-gap: 8px; }
.ana-check--row .ana-muted { flex-basis: 100%; padding-left: 20px; }
.ana-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.ana-settings__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ana-settings__status { font-size: 12px; color: var(--text-muted); }
.ana-settings__status.is-ok { color: var(--accent); }
.ana-settings__status.is-err { color: var(--color-danger); }

@media (max-width: 720px) {
  .ana-nav { overflow-x: auto; }
  .ana-detail { border-right: 0; }
}

/* Keep identifiers on one line inside tables */
.ana-table .ana-mono, .ana-table td .ana-muted { white-space: nowrap; }