/* ===== Admin: Feedback Stats Page ===== */
/* Used by partials/pages/permissions.html (#admin-tab-feedback) and
   dashboard/js/admin-feedback.js. */

.admin-feedback-range{
  margin-left:auto;
  display:inline-flex;
  gap:6px;
}
.admin-feedback-range-btn{
  padding:5px 12px;
  border:1px solid var(--md-surface-3, #334155);
  border-radius:6px;
  background:var(--md-surface, #1E293B);
  color:var(--md-on-surface-variant, #94A3B8);
  font-size:12px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-feedback-range-btn:hover{
  border-color:var(--md-primary, #3B82F6);
  color:var(--md-primary, #3B82F6);
}
.admin-feedback-range-btn.active{
  background:var(--md-primary, #3B82F6);
  border-color:var(--md-primary, #3B82F6);
  color:#fff;
}

/* ── KPI Cards ───────────────────────────────────────────────────────── */
.admin-feedback-kpi-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:16px 0 20px;
}
.admin-feedback-kpi-card{
  padding:16px 18px;
  background:var(--md-surface, #1E293B);
  border:1px solid var(--md-surface-3, #334155);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.admin-feedback-kpi-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(59,130,246,.06) 0%, transparent 60%);
}
.admin-feedback-kpi-label{
  font-size:12px;
  color:var(--md-on-surface-variant, #94A3B8);
  margin-bottom:8px;
}
.admin-feedback-kpi-value{
  font-size:26px;
  font-weight:600;
  color:var(--md-on-surface, #F8FAFC);
  font-feature-settings:"tnum";
}
.admin-feedback-kpi-card--like .admin-feedback-kpi-value{ color:#22C55E; }
.admin-feedback-kpi-card--dislike .admin-feedback-kpi-value{ color:#F97316; }
.admin-feedback-kpi-card--ratio .admin-feedback-kpi-value{ color:#3B82F6; }

/* ── Section ─────────────────────────────────────────────────────────── */
.admin-feedback-section{
  margin-top:20px;
  padding:16px;
  background:var(--md-surface, #1E293B);
  border:1px solid var(--md-surface-3, #334155);
  border-radius:10px;
}
.admin-feedback-section-title{
  font-size:14px;
  font-weight:500;
  color:var(--md-on-surface, #F8FAFC);
  margin-bottom:12px;
}

/* ── Trend Chart (SVG container) ─────────────────────────────────────── */
.admin-feedback-trend{
  width:100%;
  min-height:220px;
  position:relative;
}
.admin-feedback-trend svg{
  width:100%;
  height:220px;
  display:block;
}
.admin-feedback-trend .axis-line{ stroke:rgba(148,163,184,.2); stroke-width:1; }
.admin-feedback-trend .axis-label{ fill:#64748B; font-size:10px; }
.admin-feedback-trend .grid-line{ stroke:rgba(148,163,184,.08); stroke-width:1; stroke-dasharray:3 3; }
.admin-feedback-trend .line-likes{ fill:none; stroke:#22C55E; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.admin-feedback-trend .line-dislikes{ fill:none; stroke:#F97316; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.admin-feedback-trend .dot-likes{ fill:#22C55E; }
.admin-feedback-trend .dot-dislikes{ fill:#F97316; }
.admin-feedback-trend-legend{
  display:flex;
  gap:16px;
  margin-bottom:8px;
  font-size:12px;
  color:var(--md-on-surface-variant, #94A3B8);
}
.admin-feedback-trend-legend .swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
  margin-right:6px;
  vertical-align:middle;
}
.admin-feedback-trend-empty{
  text-align:center;
  color:var(--md-on-surface-variant, #64748B);
  font-size:13px;
  padding:60px 0;
}

/* ── Reasons TopN bar list ───────────────────────────────────────────── */
.admin-feedback-topn-row{
  display:grid;
  grid-template-columns:120px 1fr 48px;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:12px;
}
.admin-feedback-topn-row .reason{
  color:var(--md-on-surface, #CBD5E1);
}
.admin-feedback-topn-row .bar-track{
  height:8px;
  background:var(--md-surface-3, #334155);
  border-radius:4px;
  overflow:hidden;
}
.admin-feedback-topn-row .bar-fill{
  height:100%;
  background:linear-gradient(90deg, #F97316, #EF4444);
  border-radius:4px;
  transition:width .4s ease;
}
.admin-feedback-topn-row .count{
  text-align:right;
  color:var(--md-on-surface-variant, #94A3B8);
  font-feature-settings:"tnum";
}

/* ── Recent negatives table ──────────────────────────────────────────── */
.admin-feedback-recent table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.admin-feedback-recent th,
.admin-feedback-recent td{
  padding:8px 10px;
  border-bottom:1px solid var(--md-surface-3, #334155);
  text-align:left;
  vertical-align:top;
}
.admin-feedback-recent th{
  color:var(--md-on-surface-variant, #94A3B8);
  font-weight:500;
  background:var(--md-surface-2, #1E293B);
  position:sticky;
  top:0;
}
.admin-feedback-recent td .reason-tag{
  display:inline-block;
  padding:2px 7px;
  border-radius:10px;
  background:rgba(249,115,22,.12);
  color:#F97316;
  font-size:11px;
  margin:1px 2px 1px 0;
}
.admin-feedback-recent td.text-snippet{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--md-on-surface, #CBD5E1);
}
.admin-feedback-recent td.text-snippet:hover{
  white-space:normal;
  word-break:break-word;
}
.admin-feedback-recent .empty{
  text-align:center;
  color:var(--md-on-surface-variant, #64748B);
  padding:40px 0;
}

/* Loading state */
.admin-feedback-loading{
  text-align:center;
  color:var(--md-on-surface-variant, #94A3B8);
  font-size:12px;
  padding:30px 0;
}

@media (max-width: 900px){
  .admin-feedback-kpi-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}