/* RankingsTracker brand theme (light). Loaded after Bootstrap; overrides component
   colors. Sidebar/layout live in base.html inline <style> (loads after this file). */
:root {
  --brand-red: #D41B3D;
  --brand-red-700: #B3162F;
  --brand-red-900: #9E1429;
  --brand-red-50: #FBE7EB;
  --brand-navy: #0B1224;
  --brand-slate: #1B2838;
  --brand-surface: #F6FAFB;
  --brand-border: #E1E8EE;

  /* Remap Bootstrap's theme color so utilities (.text-primary/.bg-primary/.border-primary,
     badges, nav-pills, pagination, form-check) pick up the brand red. */
  --bs-primary: #D41B3D;
  --bs-primary-rgb: 212, 27, 61;
  --bs-link-color-rgb: 212, 27, 61;
  --bs-link-hover-color-rgb: 179, 22, 47;
}

/* Buttons (Bootstrap's CDN build hardcodes these via per-variant vars) */
.btn-primary {
  --bs-btn-bg: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red-700);
  --bs-btn-hover-border-color: var(--brand-red-700);
  --bs-btn-active-bg: var(--brand-red-900);
  --bs-btn-active-border-color: var(--brand-red-900);
  --bs-btn-disabled-bg: var(--brand-red);
  --bs-btn-disabled-border-color: var(--brand-red);
  --bs-btn-focus-shadow-rgb: 212, 27, 61;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red);
  --bs-btn-hover-border-color: var(--brand-red);
  --bs-btn-active-bg: var(--brand-red);
  --bs-btn-active-border-color: var(--brand-red);
  --bs-btn-focus-shadow-rgb: 212, 27, 61;
}
/* Keep "pull/scan" success actions green but on-brand */
.btn-success {
  --bs-btn-bg: #16A34A;
  --bs-btn-border-color: #16A34A;
  --bs-btn-hover-bg: #138A3E;
  --bs-btn-hover-border-color: #138A3E;
  --bs-btn-active-bg: #138A3E;
}
/* Soft neutral secondary ("Back" etc.) — retires the heavy stock gray */
.btn-secondary {
  --bs-btn-bg: #EEF1F5;
  --bs-btn-border-color: #E1E8EE;
  --bs-btn-color: #1B2838;
  --bs-btn-hover-bg: #E2E7EE;
  --bs-btn-hover-border-color: #D4DBE4;
  --bs-btn-hover-color: #1B2838;
  --bs-btn-active-bg: #DCE2EA;
  --bs-btn-active-border-color: #D4DBE4;
  --bs-btn-active-color: #1B2838;
}
/* Retire stock cyan → on-brand teal (supplemental accent) */
.btn-info {
  --bs-btn-bg: #00787E;
  --bs-btn-border-color: #00787E;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #066A6F;
  --bs-btn-hover-border-color: #066A6F;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #066A6F;
  --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: #00787E;
  --bs-btn-border-color: #00787E;
  --bs-btn-hover-bg: #00787E;
  --bs-btn-hover-border-color: #00787E;
  --bs-btn-active-bg: #00787E;
}

/* ── Soft badges (low-noise, on-brand) ── */
.badge-soft { font-weight: 500; border: 1px solid transparent; }
.badge-soft-success { background: #E7F6EC; color: #15803D; border-color: #CDEBD6; }
.badge-soft-danger  { background: #FDE8EC; color: #B3162F; border-color: #F7CDD5; }
.badge-soft-muted   { background: #EEF1F5; color: #5B6675; border-color: #E1E8EE; }
.badge-soft-brand   { background: var(--brand-red-50); color: var(--brand-red); border-color: #F7CDD5; }
.badge-soft-info    { background: #E3F3F4; color: #066A6F; border-color: #C7E6E8; }

/* ── Sticky page header (clean hairline instead of a hard shadow) ── */
.page-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 1rem 0 0.75rem;
  margin-bottom: 1rem;
}

/* ── Platform identity banner (top of keyword list pages) ── */
.platform-banner {
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.platform-banner__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--brand-red-50);
  color: var(--brand-red);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.platform-banner__title { font-weight: 600; color: var(--brand-slate); line-height: 1.2; }

/* ── Search-context icons (Google + device) ── */
.search-ctx { color: #98A2B3; font-size: .95em; white-space: nowrap; }
.search-ctx i { cursor: default; }

/* ── Compact, consistent per-row action buttons ── */
.row-actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.row-actions .btn { line-height: 1; }

/* ── Client favicon (local file + monogram fallback) ── */
.client-favicon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.client-favicon__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-red-50);
  color: var(--brand-red);
  font-weight: 600;
  line-height: 1;
}
.client-favicon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: #fff;
}

/* ── Section tiles (clickable stat/nav cards) ── */
.stat-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.35rem 1.35rem;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-tile:hover,
.stat-tile:focus { text-decoration: none; color: inherit; }
.stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(16,24,40,.10);
  border-color: #CDD6E0;
}

/* top row: icon chip (left) + chevron affordance (right) */
.stat-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.stat-tile__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-red-50);
  color: var(--brand-red);
  font-size: 1.35rem;
  flex-shrink: 0;
}
.stat-tile__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  color: #98A2B3;
  font-size: .9rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.stat-tile:hover .stat-tile__chevron {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  transform: translateX(2px);
}

.stat-tile__label {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: #6B7685;
  margin-bottom: .15rem;
}
.stat-tile__count {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--brand-slate);
  letter-spacing: -0.02em;
}
.stat-tile__desc { font-size: .85rem; color: #8A94A3; margin-top: .35rem; }

/* Focus rings → brand red */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #E891A3;
  box-shadow: 0 0 0 0.25rem rgba(212, 27, 61, 0.25);
}
.form-check-input:checked {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}
.btn-check:focus + .btn, .btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(212, 27, 61, 0.25);
}

/* Always reserve the vertical scrollbar gutter so navigating between short and
   tall pages doesn't shift the layout horizontally. */
html { overflow-y: scroll; }

/* Surfaces & hairlines */
body { background-color: var(--brand-surface); color: var(--brand-slate); }
.card { border: 1px solid var(--brand-border); }
.table > :not(caption) > * > * { border-bottom-color: var(--brand-border); }
.table-light { --bs-table-bg: #F1F4F8; }
.text-muted { color: #6B7685 !important; }

/* Pagination / nav-pills already follow --bs-primary; nudge pill text for contrast */
.nav-pills .nav-link { color: var(--brand-slate); }
.nav-pills .nav-link.active { color: #fff; }

/* ── Rank badges: brand-red darkness ramp (darker = better position) ── */
.rank-badge { min-width: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-tier-1 { background: #7E0F24; color: #fff; }                  /* 1-3: top of page 1 */
.rank-tier-2 { background: var(--brand-red); color: #fff; }         /* 4-10: page 1 */
.rank-tier-3 { background: #F2B4C1; color: #7E0F24; }               /* 11-20: page 2 */
.rank-tier-4 { background: var(--brand-red-50); color: #B3162F; }   /* 21-30: page 3 */
.rank-tier-5 { background: #EEF1F5; color: #5B6675; }               /* 31+: barely visible */

/* Rank movement since previous pull (list view) */
.rank-delta { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.rank-delta-up { color: #15803D; }
.rank-delta-down { color: #B3162F; }

/* Keep rank badges column-aligned: the movement delta floats to the right of
   the badge instead of participating in the cell's centering. */
.rank-wrap { position: relative; display: inline-block; }
.rank-wrap .rank-delta { position: absolute; left: calc(100% + .3rem); top: 50%; transform: translateY(-50%); }

/* ── Compact summary tiles (keyword overview pages) ── */
.stat-tile--compact { padding: .8rem 1rem .85rem; }
.stat-tile--compact .stat-tile__count { font-size: 1.4rem; }
.stat-tile--compact .stat-tile__chip { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
.stat-tile--compact:hover { transform: translateY(-2px); }
.stat-tile--active { border-color: var(--brand-red); box-shadow: inset 0 0 0 1px var(--brand-red), 0 1px 2px rgba(16,24,40,.04); }
/* informational (non-link) tiles don't lift */
div.stat-tile:hover { transform: none; box-shadow: 0 1px 2px rgba(16,24,40,.04); border-color: var(--brand-border); cursor: default; }

/* ── Quiet rows: action buttons fade in on hover / keyboard focus ── */
.table .row-actions .btn { opacity: .35; transition: opacity .12s ease; }
.table tr:hover .row-actions .btn,
.table tr:focus-within .row-actions .btn { opacity: 1; }

/* ── Inline trend sparklines ── */
canvas.spark, canvas.spark-rank { display: inline-block; vertical-align: middle; }

/* ── Metric chips (SoLV / ATGR) share the rank-badge ramp ── */
.metric-chip { min-width: 48px; }

/* Soft warning badge (never-scanned etc.) */
.badge-soft-warning { background: #FEF3E2; color: #B45309; border-color: #F8E3C2; }

/* ── Pagination: soft pill buttons matching the card language ── */
.pagination { gap: .35rem; }
.pagination .page-link {
  border: 1px solid var(--brand-border);
  border-radius: 8px !important;
  color: var(--brand-slate);
  background: #fff;
  padding: .32rem .7rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pagination .page-link:hover { background: #F1F4F8; border-color: #CDD6E0; color: var(--brand-slate); }
.pagination .page-item.active .page-link {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  box-shadow: 0 1px 3px rgba(212,27,61,.35);
}
.pagination .page-item.disabled .page-link {
  background: transparent;
  border-color: transparent;
  color: #A8B0BC;
  box-shadow: none;
}
.pagination .page-link:focus { box-shadow: 0 0 0 .25rem rgba(212,27,61,.25); }

/* ── Keyword cells: single line with ellipsis; hover reveals the full text
      in an overlay when it is actually clipped ── */
td.kw-cell { position: relative; max-width: 280px; }
.kw-wrap { display: inline-flex; align-items: center; max-width: 100%; white-space: nowrap; }
.kw-wrap .kw-text { overflow: hidden; text-overflow: ellipsis; }
.kw-wrap.is-clipped:hover {
  position: absolute;
  left: .35rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: none;
  z-index: 6;
  background: #fff;
  padding: .3rem .6rem;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,.14);
}
.kw-wrap.is-clipped:hover .kw-text { overflow: visible; }

/* ── Category section header rows (Sort by Category) ── */
.kw-section td {
  background: #F1F4F8 !important;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5B6675;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* ── Google Reviews ── */
.review-stars { color: #E9A23B; letter-spacing: 1px; }
.review-reply {
  background: #F6F8FA;
  border-left: 3px solid var(--brand-border);
  border-radius: 8px;
  padding: .5rem .75rem;
}

/* ── AI Visibility ── */
.dom-bar { height: 6px; background: #EEF1F5; border-radius: 999px; overflow: hidden; }
.dom-bar__fill { height: 100%; background: #B8C1CC; border-radius: 999px; }
.dom-bar__fill--own { background: var(--brand-red); }
.llm-answer {
  white-space: pre-wrap;
  background: #F6F8FA;
  border-radius: 8px;
  padding: .6rem .8rem;
  max-height: 320px;
  overflow-y: auto;
}