/* ===== Snooping UI Theme ===== */

:root{
  --brand-primary: #E63B3B;         /* vermelho Snooping */
  --brand-primary-600:#dc2626;
  --brand-primary-700:#b91c1c;
  --brand-dark:#121316;             /* usado em seções mais escuras */
  --brand-surface:#ffffff;
  --brand-surface-2:#f6f7fb;        /* cinza do fundo */
  --brand-muted:#6B7280;
  --radius:16px;
  --shadow-1:0 6px 24px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.04);
  --shadow-2:0 12px 32px rgba(16,24,40,.10);
}

/* ---------- base ---------- */
body{ background-color:#fff; }
a{ color:var(--brand-primary); }
a:hover{ color:var(--brand-primary-600); }

/* ---------- cards ---------- */
.card{
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }

/* ---------- botões ---------- */
.btn-primary{
  background:var(--brand-primary);
  border-color:var(--brand-primary);
}
.btn-primary:hover{
  background:var(--brand-primary-600);
  border-color:var(--brand-primary-600);
}
.btn-outline-primary{
  color:var(--brand-primary);
  border-color:var(--brand-primary);
}
.btn-outline-primary:hover{
  background:var(--brand-primary);
  color:#fff;
}

/* ---------- inputs ---------- */
.form-control{
  border-radius:10px;
}
.form-control:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 .2rem rgba(230,59,59,.15);
}

/* ---------- badges ---------- */
.badge.bg-success{ background-color:#16a34a !important; }
.badge.bg-secondary{ background-color:#9CA3AF !important; }

/* ---------- nav tabs ---------- */
.nav-tabs{ border-color:transparent; }
.nav-tabs .nav-link{
  border:none;
  color:#6b7280;
}
.nav-tabs .nav-link.active{
  color:var(--brand-primary);
  background:transparent;
  border-bottom:3px solid var(--brand-primary);
  font-weight:600;
}

/* ---------- paginação ---------- */
.pagination .page-item .page-link{ border-radius:8px !important; }
.pagination .page-item.active .page-link{
  background:var(--brand-primary);
  border-color:var(--brand-primary);
}

/* ---------- KPIs topo ---------- */
.kpis .card{
  background:linear-gradient(180deg,#fff 0,#f9fafb 100%);
  border:1px solid #eef2f7;
}
.kpis h6{ letter-spacing:.02em; }
.kpis .display-6{ font-weight:700; }

/* ---------- avatars ---------- */
.avatar-ring img{
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(230,59,59,.25);
  border-radius:9999px;
}

/* ---------- story/post thumbs ---------- */
.story-card .ratio{ border-radius:12px; overflow:hidden; }

/* ---------- pequenos detalhes ---------- */
.table thead th{ color:#374151; }
.table tfoot th{ font-weight:600; }


/* Avatar com fallback controlado por classe */
.avatar {
  position: relative;
  width: 48px;
  height: 48px;
}
.avatar img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}
.avatar .fallback {
  position: absolute;
  inset: 0;
  display: none;                 /* fica oculto por padrão */
  border-radius: 9999px;
}
.avatar.noimg .fallback {        /* aparece só se a imagem falhar */
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar.noimg img {              /* some a imagem quebrada */
  display: none;
}

.card .btn.btn-sm.btn-outline-danger,
.card .btn.btn-sm.btn-outline-success{
  border-radius: 9999px;
  padding: 2px 10px;
}

/* ==== Stories Range ==== */
.story-card .ratio { --bs-aspect-ratio: 177.78%; } /* 9:16 */

.stories-filter .form-control,
.stories-filter .form-select { border-radius: 10px; }

.stories-pagination { display:flex; gap:.5rem; align-items:center; justify-content:center; }
.stories-pagination .page-btn {
  border:1px solid #e5e7eb; border-radius:10px; padding:.5rem .75rem; background:#fff; color:#333;
}
.stories-pagination .page-btn.disabled { opacity:.5; pointer-events:none; }
.stories-pagination .page-info { color:#6b7280; }

.badge-video { position:absolute; top:10px; left:10px; background:#111; color:#fff; font-size:.75rem;
  padding:4px 8px; border-radius:999px; opacity:.85; }
.brand-mark { position:absolute; top:10px; right:10px; background:#000; color:#fff; font-size:.70rem;
  padding:4px 8px; border-radius:6px; opacity:.5; }