/* ══════════════════════════════════════════════════════════════════════════
   Logs view (UI-Redesign, 2026-10-22). Toolbar of filters over one
   virtualized list (js/virtualList.js) that fills the remaining height —
   the list scrolls, not the page. Log rows are log-structured: mono time,
   then name in its Twitch color (or the name-derived default), badges as
   quiet labels, mod/system/notice lines with a leading icon. Tokens only.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page variant: header + toolbar fixed, results take the rest. */
.view.page.page-fill { overflow: hidden; }
.page-fill .page-body { flex: 1; min-height: 0; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.logs-toolbar { display: flex; flex-direction: column; gap: var(--s-2); }
.logs-toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.logs-q { flex: 1 1 calc(var(--popover-w) + var(--s-10)); }
.logs-user { flex: 0 1 calc(var(--s-16) * 3); }
.logs-channel-picker .account-picker-btn { min-width: calc(var(--s-16) * 3); max-width: calc(var(--s-16) * 4); }
.logs-channel-picker .account-picker-menu { top: calc(100% + var(--s-1)); bottom: auto; width: calc(var(--popover-w) - var(--s-4)); }
.logs-channel-picker .account-picker-current .icon { color: var(--color-text-tertiary); }
.logs-day-nav { display: inline-flex; align-items: center; gap: var(--s-0-5); }
.logs-day-nav .input { width: auto; font-variant-numeric: tabular-nums; }
.logs-day-nav.is-range { opacity: .55; }
.logs-reset { margin-left: auto; }

/* ── Results ───────────────────────────────────────────────────────────── */
.logs-results {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logs-results-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  min-height: var(--control-h-md);
  padding: var(--s-1) var(--s-4);
  border-bottom: var(--bw) solid var(--color-border-subtle);
}
.logs-results-count { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.logs-results-note { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
.logs-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-1) 0; overscroll-behavior: contain; }
.logs-list:focus-visible { outline-offset: calc(var(--bw-thick) * -1); }
.logs-state { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.logs-error { justify-content: center; padding: var(--s-10) var(--s-4); }
.logs-skeleton { align-self: stretch; display: flex; flex-direction: column; gap: var(--s-2-5); padding: var(--s-3) var(--s-4); margin-bottom: auto; }
.logs-skeleton-row { display: flex; }

/* ── Rows ──────────────────────────────────────────────────────────────── */
.log-row {
  display: block;
  padding: var(--s-0-5) var(--s-4);
  min-height: var(--log-row-min-h);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.log-row:hover { background: var(--color-bg-hover); }
.log-time {
  display: inline-block;
  min-width: calc(var(--s-16) - var(--s-1));
  margin-right: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.log-channel {
  margin-right: var(--s-2);
  padding: 0 var(--s-1);
  background: var(--color-bg-active);
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.log-channel::before { content: '#'; color: var(--color-text-tertiary); }
.log-channel:hover { color: var(--color-text-primary); }
.log-badges { display: inline-flex; gap: var(--s-0-5); margin-right: var(--s-1-5); vertical-align: baseline; }
.log-badge {
  padding: 0 var(--s-1);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  background: var(--color-bg-active);
  color: var(--color-text-secondary);
}
.log-badge-broadcaster { box-shadow: inset 0 0 0 var(--bw) var(--color-border-strong); color: var(--color-text-primary); }
.log-user {
  padding: 0;
  background: none;
  border: none;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.log-user:hover { text-decoration: underline; text-underline-offset: var(--s-0-5); }
.log-colon { color: var(--color-text-tertiary); }
.log-row-action .log-msg { font-style: italic; color: var(--color-text-secondary); }
.log-hit { background: var(--color-warning-subtle); color: var(--color-text-primary); border-radius: var(--s-0-5); box-shadow: 0 0 0 var(--s-px) var(--color-warning-subtle); }

/* Mod / system / notice: icon + event text, muted. */
.log-row-event { color: var(--color-text-secondary); }
.log-icon { display: inline-flex; vertical-align: -0.15em; margin-right: var(--s-1-5); color: var(--color-text-tertiary); }
.log-row-mod .log-icon { color: var(--color-danger-text); }
.log-row-system .log-icon { color: var(--color-accent-text); }
.log-user-link { padding: 0; background: none; border: none; font-weight: var(--fw-semibold); color: var(--color-text-primary); cursor: pointer; }
.log-user-link:hover { text-decoration: underline; }
.log-by { color: var(--color-text-tertiary); }
.log-quote { color: var(--color-text-tertiary); font-style: italic; }

@media (max-width: 767px) {
  .logs-q, .logs-user { flex: 1 1 100%; }
  .logs-channel-picker, .logs-channel-picker .account-picker-btn { flex: 1; max-width: none; }
  .logs-toolbar-row .seg { overflow-x: auto; max-width: 100%; }
  .logs-reset { margin-left: 0; }
  .log-row { padding: var(--s-1) var(--s-3); }
}