/* ==========================================================================
   pages/bot-monitor.css — Bot Monitor page (v2.1)
   Adds info banner clarifying API tracking vs. organic crawl, and
   dual-status surfaces for API-tracked bots that are blocked in
   robots.txt.
   ========================================================================== */

.botmon-title {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 800;
}

.botmon-subtitle {
  font-size: 13px;
  color: var(--text-m);
}

.botmon-url {
  font-family: var(--fm);
}

/* === Info banner: API vs. crawl distinction === */

.botmon-info-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), transparent 70%);
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: var(--rl);
  margin-bottom: 18px;
}

.botmon-info-banner__icon {
  font-size: 20px;
  line-height: 1.1;
  flex-shrink: 0;
}

.botmon-info-banner__title {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.botmon-info-banner__text {
  font-size: 12.5px;
  color: var(--text-m);
  line-height: 1.55;
}

.botmon-info-banner__text strong {
  color: var(--text);
}

/* === Bot grid === */

.botmon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.botmon-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--rl);
  padding: 16px;
}

.botmon-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.botmon-card__name {
  font-size: 14px;
  font-weight: 700;
}

.botmon-card__company {
  font-size: 11px;
  color: var(--text-d);
}

.botmon-card__status {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

.botmon-card__status--active  { background: var(--green-dim); color: var(--green); }
.botmon-card__status--warn    { background: var(--amber-dim); color: var(--amber); }
.botmon-card__status--blocked { background: var(--red-dim);   color: var(--red); }
.botmon-card__status--unknown { background: var(--surface2);  color: var(--text-d); }

.botmon-card__ua {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text-d);
  margin-bottom: 10px;
  word-break: break-all;
}

/* === Dual-status (API tracked + organic crawl) === */

.botmon-card__dual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 10px;
}

.botmon-card__dual-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
}

.botmon-card__dual-row--ok   { color: var(--green); }
.botmon-card__dual-row--warn { color: var(--amber); }

.botmon-card__dual-icon {
  font-size: 12px;
}

/* === Per-bot metrics row === */

.botmon-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* v2.20 C2 — was 1fr 1fr */
  gap: 6px;                                /* v2.20 C2 — was 8px */
}

.botmon-card__metric {
  background: var(--surface2);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.botmon-card__metric-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.botmon-card__metric-val--ok   { color: var(--green); }
.botmon-card__metric-val--warn { color: var(--amber); }

.botmon-card__metric-lbl {
  font-size: 10px;
  color: var(--text-d);
  margin-top: 2px;
}

/* === robots.txt + tips sections === */

.botmon-section {
  margin-bottom: 16px;
}

.botmon-rec {
  font-size: 13px;
  color: var(--text-m);
  margin-bottom: 12px;
  line-height: 1.5;
}

.botmon-rec__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Copyable robots.txt fix — reuses the EEAT format-sample machinery
   (.eeat-format* + the delegated toggle/copy handlers). The EEAT panel
   carries a 52px left indent meant for its checklist-row layout; reset
   it here so the block sits full-width inside the analysis card. */
.botmon-robots-fix {
  margin-top: 14px;
}

.botmon-robots-fix .eeat-format {
  margin-left: 0;
}

.botmon-tip {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}

.botmon-tip:last-of-type { border-bottom: 0; }

.botmon-tip__num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.botmon-tip__text {
  font-size: 13px;
  color: var(--text-m);
}

/* === Tracking-state banner (v2.20 Phase C / C2) ===========================
   Surfaces the crawler-visit summary's trackingSince + totals.allTime as a
   three-state UX:
     --inactive (orange) — Worker not installed yet, or summary fetch
                           degraded to null. Prompts the user toward
                           Settings → AI Crawler Tracking.
     --waiting  (green)  — Worker installed; trackingSince set but no
                           visits recorded yet. Informs that crawlers run
                           on their own schedule.
     active              — Worker installed + ≥1 visit. NO banner; the
                           subtitle gains "· Tracking since X ago" instead.
   Colors come from tokens.css: var(--warning) / var(--success) (and their
   --bg pairs). NO hardcoded hex / rgba — see CLAUDE.md hard rule.
   ========================================================================== */

.botmon-tracking-state {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--rl);
  margin-bottom: 14px;
}

.botmon-tracking-state--inactive {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
}

.botmon-tracking-state--waiting {
  background: var(--success-bg);
  border: 1px solid var(--success);
}

.botmon-tracking-state__icon {
  font-size: 18px;
  line-height: 1.1;
  flex-shrink: 0;
}

.botmon-tracking-state__title {
  font-family: var(--fh);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.botmon-tracking-state__text {
  font-size: 12.5px;
  color: var(--text-m);
  line-height: 1.5;
}

.botmon-tracking-state__text strong {
  color: var(--text);
}

/* Inline subtitle for the "active" state — sits after the website URL in
   the page header, separated by " · ", no banner block. */
.botmon-tracking-since {
  font-size: 12px;
  color: var(--text-m);
  font-family: var(--fm);
}