/* tab-traffic.css — Site Traffic tab (Search & Analytics + Bot Crawls).
   Design language: single amber accent + neutrals from tokens.css; provider
   brand colors appear ONLY as small logo chips; semantic green/red reserved
   for status (deltas, shadow-serving health). No emoji, no inline rainbow. */

/* ── Sub-tab toggle ──────────────────────────────────────────────────────── */
.trf-subtabs { display: inline-flex; gap: 4px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3px; margin-bottom: var(--space-6); }
.trf-subtab { padding: 7px 16px; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--text-secondary); font-family: inherit; transition: background .15s, color .15s; }
.trf-subtab:hover { color: var(--text-primary); }
.trf-subtab.is-active { background: var(--accent); color: #06080c; }

/* ── Toolbar (domain / range / actions) ──────────────────────────────────── */
.trf-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.trf-toolbar .trf-toolbar-label { font-size: 13px; color: var(--text-secondary); }
.trf-toolbar-spacer { flex: 1; }

/* ── Headline insight banner ─────────────────────────────────────────────── */
.trf-headline { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-6);
  background: linear-gradient(135deg, rgba(232,168,48,0.07), rgba(232,168,48,0.02)); border: 1px solid rgba(232,168,48,0.18); border-radius: var(--radius-xl); }
.trf-headline-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgba(232,168,48,0.14); color: var(--accent); }
.trf-headline-mark svg { width: 20px; height: 20px; }
.trf-headline-body { flex: 1; min-width: 0; }
.trf-headline-title { font-size: 15px; font-weight: 650; color: var(--text-primary); line-height: 1.4; margin-bottom: 2px; }
.trf-headline-title b { color: var(--accent); font-weight: 700; }
.trf-headline-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ── KPI row ──────────────────────────────────────────────────────────────── */
.trf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.trf-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; transition: border-color .15s, transform .15s; }
.trf-kpi:hover { border-color: rgba(232,168,48,0.4); transform: translateY(-1px); }
.trf-kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; margin-bottom: var(--space-3); }
.trf-kpi-value { font-size: 30px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.trf-kpi-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.trf-kpi-delta { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; }
.trf-kpi-delta.up { color: var(--accent-green); }
.trf-kpi-delta.down { color: var(--accent-red); }
.trf-kpi--accent .trf-kpi-value { color: var(--accent); }

/* ── Layout grids ────────────────────────────────────────────────────────── */
.trf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.trf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-5); }

/* ── Card / panel ────────────────────────────────────────────────────────── */
.trf-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); }
.trf-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.trf-card-title { font-size: 14px; font-weight: 650; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.trf-card-title svg { width: 16px; height: 16px; color: var(--text-muted); }
.trf-card-sub { font-size: 12px; color: var(--text-muted); }
.trf-scroll { max-height: 320px; overflow-y: auto; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); }

/* ── Provider rows (logo chip + bar) ─────────────────────────────────────── */
.trf-prov { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; }
.trf-prov + .trf-prov { border-top: 1px solid var(--border-subtle); }
.trf-logo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: -.3px; background: var(--_pc, var(--bg-tertiary)); color: #fff; }
.trf-prov-body { flex: 1; min-width: 0; }
.trf-prov-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.trf-prov-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.trf-prov-val { font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Bar rows (top pages, geo) ───────────────────────────────────────────── */
.trf-bar { padding: 8px 0; }
.trf-bar + .trf-bar { border-top: 1px solid var(--border-subtle); }
.trf-bar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; }
.trf-bar-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.trf-bar-label .trf-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.trf-bar-val { font-size: 12px; font-weight: 700; color: var(--text-primary); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.trf-bar-track { height: 5px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.trf-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.trf-bar-fill.muted { background: var(--text-muted); opacity: .55; }

/* ── Geo: flag + code + bar ──────────────────────────────────────────────── */
.trf-geo-code { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-primary); }
.trf-flag { font-size: 14px; line-height: 1; }

/* ── Recent feed ─────────────────────────────────────────────────────────── */
.trf-feed-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; }
.trf-feed-row + .trf-feed-row { border-top: 1px solid var(--border-subtle); }
.trf-feed-body { flex: 1; min-width: 0; }
.trf-feed-main { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trf-feed-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.trf-feed-time { font-size: 11px; color: var(--text-secondary); flex: 0 0 auto; text-align: right; }
.trf-feed-time small { display: block; color: var(--text-muted); font-size: 10px; }

/* ── Inline mini-stats (within a card) ───────────────────────────────────── */
.trf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.trf-stat { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.trf-stat-val { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.trf-stat-val.accent { color: var(--accent); }
.trf-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.trf-stat-line { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 10px 14px; margin-top: var(--space-3); }
.trf-stat-line-k { font-size: 11px; color: var(--text-muted); }
.trf-stat-line-v { font-size: 13px; color: var(--text-primary); font-weight: 500; margin-top: 2px; }

/* ── Shadow-serving health callout ───────────────────────────────────────── */
.trf-health { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); }
.trf-health.is-bad { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.trf-health.is-good { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.trf-health-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.trf-health.is-bad .trf-health-dot { background: var(--accent-red); }
.trf-health.is-good .trf-health-dot { background: var(--accent-green); }
.trf-health-body { flex: 1; }
.trf-health-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.trf-health-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }

/* ── Trend chart ─────────────────────────────────────────────────────────── */
.trf-trend { height: 200px; }
.trf-trend svg { width: 100%; height: 100%; }
.trf-trend-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trf-trend-dot { fill: var(--accent); stroke: var(--bg-card); stroke-width: 1.5; }
.trf-trend-axis { fill: var(--text-muted); font-size: 10px; }

/* ── Empty / loading state ───────────────────────────────────────────────── */
.trf-empty { text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-muted); font-size: 13px; }
.trf-empty svg { width: 32px; height: 32px; opacity: .4; margin-bottom: var(--space-3); }

/* ── Provider brand colors (logo chip backgrounds) ───────────────────────── */
.pl-openai    { --_pc: #10a37f; }
.pl-anthropic { --_pc: #cc785c; }
.pl-google    { --_pc: #4285f4; }
.pl-perplexity{ --_pc: #20808d; }
.pl-meta      { --_pc: #0866ff; }
.pl-microsoft { --_pc: #0a84ff; }
.pl-apple     { --_pc: #6b7280; }
.pl-amazon    { --_pc: #ff9900; }
.pl-deepseek  { --_pc: #4d6bfe; }
.pl-grok      { --_pc: #1d1d1f; }
.pl-bytedance { --_pc: #ff0050; }
.pl-default   { --_pc: #6b7280; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .trf-kpis { grid-template-columns: repeat(2, 1fr); }
  .trf-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .trf-grid { grid-template-columns: 1fr; }
  .trf-kpis { grid-template-columns: repeat(2, 1fr); }
  .trf-headline { flex-direction: row; }
}

/* ── Light mode niceties ─────────────────────────────────────────────────── */
[data-theme="light"] .trf-kpi,
[data-theme="light"] .trf-card { box-shadow: var(--shadow-card); }
[data-theme="light"] .trf-logo { color: #fff; }