/*
 * PulseViews — Admin Dashboard Styles
 *
 * Design language: Vercel × Linear × Stripe
 * Zero Bootstrap. CSS variables throughout.
 * Adapts to WP dark mode when supported.
 */

/* ── Reset & tokens ──────────────────────────────────────────────────────── */
#pulseviews-root *,
#pulseviews-root *::before,
#pulseviews-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#pulseviews-root {
  --pv-bg:        #0a0a0f;
  --pv-bg2:       #111118;
  --pv-bg3:       #18181f;
  --pv-bg4:       #1e1e28;
  --pv-border:    rgba(255, 255, 255, 0.07);
  --pv-border2:   rgba(255, 255, 255, 0.12);
  --pv-text:      #f0f0f5;
  --pv-text2:     #9090a8;
  --pv-text3:     #5a5a72;
  --pv-accent:    #7c6fef;
  --pv-accent2:   #a98bff;
  --pv-green:     #22d3a5;
  --pv-coral:     #ff6b6b;
  --pv-amber:     #f59e0b;
  --pv-font:      -apple-system, "Segoe UI", system-ui, sans-serif;
  --pv-mono:      "SF Mono", "Fira Code", "Cascadia Code", monospace;
  --pv-r:         12px;
  --pv-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  font-family:           var(--pv-font);
  color:                 var(--pv-text);
  background:            var(--pv-bg);
  min-height:            100vh;
  -webkit-font-smoothing: antialiased;
}

/* WP wraps our root in a content area — neutralise its styles */
#pulseviews-root a { text-decoration: none; color: inherit; }
#pulseviews-root button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── Dashboard layout ────────────────────────────────────────────────────── */
.pv-dashboard {
  max-width:  1100px;
  margin:     0 auto;
  padding:    32px 24px 64px;
  display:    flex;
  flex-direction: column;
  gap:        28px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pv-dash-header {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pv-dash-title {
  font-size:      22px;
  font-weight:    600;
  letter-spacing: -0.5px;
  color:          var(--pv-text);
  line-height:    1.2;
}

.pv-dash-sub {
  font-size:  13px;
  color:      var(--pv-text3);
  margin-top: 4px;
}

.pv-live-dot {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  background:    rgba(34, 211, 165, 0.1);
  border:        1px solid rgba(34, 211, 165, 0.2);
  color:         var(--pv-green);
  font-size:     11px;
  font-weight:   500;
  padding:       6px 12px;
  border-radius: 100px;
}

.pv-live-dot::before {
  content:       '';
  width:         6px;
  height:        6px;
  background:    var(--pv-green);
  border-radius: 50%;
  animation:     pv-pulse 1.5s ease infinite;
}

@keyframes pv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Stat grid ───────────────────────────────────────────────────────────── */
.pv-stat-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

@media (max-width: 900px) {
  .pv-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pv-stat-grid { grid-template-columns: 1fr; }
}

.pv-stat-card {
  background:    var(--pv-bg3);
  border:        1px solid var(--pv-border);
  border-radius: var(--pv-r);
  padding:       18px 20px;
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  transition:    border-color var(--pv-transition),
                 transform var(--pv-transition);
  position:      relative;
  overflow:      hidden;
}

.pv-stat-card::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, transparent 60%, rgba(124, 111, 239, 0.04));
  pointer-events: none;
}

.pv-stat-card:hover {
  border-color: var(--pv-border2);
  transform:    translateY(-1px);
}

.pv-stat-icon {
  font-size:     20px;
  flex-shrink:   0;
  width:         36px;
  height:        36px;
  background:    var(--pv-bg4);
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.pv-stat-body { flex: 1; min-width: 0; }

.pv-stat-label {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--pv-text3);
  margin-bottom:  6px;
}

.pv-stat-value {
  font-size:            26px;
  font-weight:          600;
  letter-spacing:       -0.8px;
  font-variant-numeric: tabular-nums;
  line-height:          1;
}

.pv-stat-change {
  font-size:  11px;
  margin-top: 6px;
  color:      var(--pv-text3);
}

.pv-change-up   { color: var(--pv-green); }
.pv-change-down { color: var(--pv-coral); }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.pv-chart-section {
  background:    var(--pv-bg3);
  border:        1px solid var(--pv-border);
  border-radius: var(--pv-r);
  padding:       22px 24px;
}

.pv-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   18px;
  flex-wrap:       wrap;
  gap:             12px;
}

.pv-section-title {
  font-size:      14px;
  font-weight:    500;
  color:          var(--pv-text);
  letter-spacing: -0.2px;
}

.pv-chart-wrap {
  height: 120px;
}

.pv-mini-chart {
  width:  100%;
  height: 100%;
  display: block;
}

.pv-day-select { display: flex; gap: 4px; }

.pv-day-btn {
  font-size:     11px;
  font-weight:   500;
  color:         var(--pv-text3);
  padding:       4px 10px;
  border-radius: 6px;
  border:        1px solid transparent;
  transition:    all var(--pv-transition);
}

.pv-day-btn:hover { color: var(--pv-text2); background: var(--pv-bg4); }

.pv-day-btn--active {
  color:        var(--pv-text);
  background:   var(--pv-bg4);
  border-color: var(--pv-border2);
}

/* ── Top posts ───────────────────────────────────────────────────────────── */
.pv-top-posts-section {
  background:    var(--pv-bg3);
  border:        1px solid var(--pv-border);
  border-radius: var(--pv-r);
  padding:       22px 24px;
}

/* Tab nav */
.pv-tab-nav { display: flex; gap: 2px; }

.pv-tab {
  font-size:     12px;
  font-weight:   500;
  color:         var(--pv-text3);
  padding:       5px 12px;
  border-radius: 6px;
  border:        1px solid transparent;
  transition:    all var(--pv-transition);
}

.pv-tab:hover { color: var(--pv-text2); }

.pv-tab--active {
  color:        var(--pv-text);
  background:   var(--pv-bg4);
  border-color: var(--pv-border2);
}

/* Post rows */
.pv-post-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       12px 0;
  border-bottom: 1px solid var(--pv-border);
  transition:    background var(--pv-transition);
}

.pv-post-row:last-child  { border-bottom: none; }
.pv-post-row:first-child { margin-top: 8px; }
.pv-post-row:hover       { background: rgba(255,255,255,0.02); border-radius: 6px; }

.pv-post-rank {
  width:                26px;
  font-size:            11px;
  color:                var(--pv-text3);
  font-variant-numeric: tabular-nums;
  flex-shrink:          0;
  text-align:           center;
}

.pv-post-info { flex: 1; min-width: 0; }

.pv-post-title {
  font-size:     13px;
  font-weight:   500;
  color:         var(--pv-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  display:       block;
  transition:    color var(--pv-transition);
}

.pv-post-title:hover { color: var(--pv-accent2); }

.pv-post-type {
  font-size:  10px;
  color:      var(--pv-text3);
  margin-top: 2px;
  display:    block;
}

.pv-post-bar-wrap { width: 90px; flex-shrink: 0; }

.pv-post-bar-bg {
  height:        4px;
  background:    var(--pv-bg4);
  border-radius: 2px;
  overflow:      hidden;
}

.pv-post-bar-fill {
  height:           100%;
  border-radius:    2px;
  background:       linear-gradient(90deg, var(--pv-accent), var(--pv-accent2));
  transition:       width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pv-post-views {
  width:                60px;
  text-align:           right;
  font-size:            13px;
  font-weight:          500;
  font-variant-numeric: tabular-nums;
  color:                var(--pv-text);
  flex-shrink:          0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.pv-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        60px 20px;
  text-align:     center;
  gap:            8px;
}

.pv-empty-icon  { font-size: 40px; margin-bottom: 8px; }
.pv-empty-title { font-size: 15px; font-weight: 500; color: var(--pv-text2); }
.pv-empty-sub   { font-size: 13px; color: var(--pv-text3); max-width: 340px; line-height: 1.5; }

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.pv-skeleton {
  background:          var(--pv-bg4);
  border-radius:       8px;
  animation:           pv-shimmer 1.5s ease infinite;
  background-image:    linear-gradient(
    90deg,
    var(--pv-bg4) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--pv-bg4) 100%
  );
  background-size:   200% 100%;
}

@keyframes pv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pv-posts-loading {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     8px;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
#pulseviews-root :focus-visible {
  outline:        2px solid var(--pv-accent2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #pulseviews-root *,
  #pulseviews-root *::before,
  #pulseviews-root *::after {
    animation:  none !important;
    transition: none !important;
  }
}