/* =============================================================
   Pulsora — Premium Panel Content Overrides
   Designed with Linear/Vercel/Stripe aesthetic discipline.
   ============================================================= */

/* -------------------------------------------------------------
   1. METRIC CARDS (Metrik Kartları)
   ------------------------------------------------------------- */

/* All metric cards get a consistent, unified, premium neutral surface */
.metric-card,
.metric-card.instagram,
.metric-card.success,
.metric-card.warning,
.metric-card.danger {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med), background-color var(--t-med) !important;
}

/* Remove cheap top rainbow colored border lines completely */
.metric-card::before,
.metric-card.instagram::before,
.metric-card.success::before,
.metric-card.warning::before,
.metric-card.danger::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: transparent !important;
}

/* Premium Hover Behavior: Gentle lift + enhanced shadow + subtle focus ring glow */
.metric-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--hair-strong) !important;
  background: var(--bg-elev-hover) !important;
  box-shadow: 0 0 0 1px var(--acc-ring), var(--shadow-3) !important;
}

/* Clear hierarchy: label, value & change indicators */
.metric-header {
  margin-bottom: 0.25rem !important;
}

.metric-title {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.metric-value {
  font-family: var(--font-display) !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Metric card icon container: acc-soft background + acc icon color */
.metric-icon-box {
  background: var(--acc-soft) !important;
  color: var(--acc) !important;
  border: 1px solid var(--hair-strong) !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t-med) !important;
}

/* Interactive hover response for the icon box */
.metric-card:hover .metric-icon-box {
  color: #fff !important;
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Status change indicator values override */
.metric-change {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.change-up {
  color: var(--ok) !important;
}

.change-down {
  color: var(--bad) !important;
}

/* -------------------------------------------------------------
   2. DATA TABLE & CHARTS (Tablolar ve Grafik Kartları)
   ------------------------------------------------------------- */

/* Chart card & chart container alignment to the premium tokens design system */
.chart-card,
.chart-container {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2) !important;
  padding: var(--sp-8) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Add clear elegant spacing between title and canvas */
.chart-header {
  margin-bottom: 1.5rem !important;
}

.chart-title h2 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}

.chart-title p {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
}

/* Data Table Card styling */
.data-table-card {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2) !important;
  padding: var(--sp-8) !important;
}

/* Table elements styling */
table th {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--hair-strong) !important;
  letter-spacing: 0.08em !important;
  padding: var(--sp-4) !important;
}

table td {
  padding: var(--sp-4) !important;
  font-size: 0.88rem !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--hair-faint) !important;
}

/* Table Row Hover State */
table tr:hover td {
  background: var(--bg-elev-hover) !important;
  transition: background-color var(--t-fast) !important;
}

/* Reels/Post elements custom styles */
.reels-thumbnail {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--hair) !important;
}

/* -------------------------------------------------------------
   3. ALERT CARDS (Kritik Erişim/Shadowban Kartları)
   ------------------------------------------------------------- */

/* Subtle alert card colors using warn-soft and bad-soft states */
.alert-card {
  background: var(--bad-soft) !important;
  border: 1px solid rgba(248, 113, 113, 0.25) !important;
  box-shadow: 0 4px 20px rgba(248, 113, 113, 0.06) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-6) var(--sp-8) !important;
  animation: alert-glow-pulse 4s infinite ease-in-out !important;
}

/* Alert Icon overrides */
.alert-icon-container {
  background: rgba(248, 113, 113, 0.15) !important;
  color: var(--bad) !important;
  border-radius: var(--r-sm) !important;
  width: 44px !important;
  height: 44px !important;
}

/* Healthy alert override */
.alert-card.healthy {
  background: var(--ok-soft) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  box-shadow: 0 4px 20px rgba(52, 211, 153, 0.04) !important;
  animation: none !important;
}

.healthy .alert-icon-container {
  background: rgba(52, 211, 153, 0.15) !important;
  color: var(--ok) !important;
}

.alert-text h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.alert-text p {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
}

/* Animation overrides for premium feel */
@keyframes alert-glow-pulse {
  0%, 100% {
    border-color: rgba(248, 113, 113, 0.2);
    box-shadow: 0 4px 16px rgba(248, 113, 113, 0.04);
  }
  50% {
    border-color: rgba(248, 113, 113, 0.4);
    box-shadow: 0 4px 24px rgba(248, 113, 113, 0.12);
  }
}

/* -------------------------------------------------------------
   4. SAVED REPORTS, BADGES, AND QUOTA (Kayıtlı Raporlar, Rozetler ve Kota)
   ------------------------------------------------------------- */

/* Saved report rows styling & Hover interactions */
.saved-report-row,
#explore-saved-list > div,
#competitor-saved-list > div {
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-elev-1) !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med) !important;
}

.saved-report-row:hover,
#explore-saved-list > div:hover,
#competitor-saved-list > div:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Hierarchy adjustments inside saved report rows */
.saved-report-row div[style*="font-weight:700"],
.saved-report-row div[style*="font-weight: 700"],
#explore-saved-list > div div[style*="font-weight:700"],
#explore-saved-list > div div[style*="font-weight: 700"] {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
}

.saved-report-row div[style*="opacity:.7"],
.saved-report-row div[style*="opacity: .7"],
#explore-saved-list > div div[style*="opacity:.7"],
#explore-saved-list > div div[style*="opacity: .7"] {
  color: var(--text-secondary) !important;
  font-size: 0.82rem !important;
  opacity: 1 !important;
}

/* Open Button interaction styling inside saved reports */
.saved-open-btn,
.exp-open-btn {
  background: var(--acc-soft) !important;
  color: var(--acc) !important;
  border: 1px solid var(--hair-strong) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.9rem !important;
  transition: all var(--t-fast) !important;
}

.saved-open-btn:hover,
.exp-open-btn:hover {
  background: var(--acc) !important;
  color: #fff !important;
  border-color: var(--acc) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Delete Button interaction styling inside saved reports */
.saved-del-btn,
.exp-del-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.65rem !important;
  transition: all var(--t-fast) !important;
}

.saved-del-btn:hover,
.exp-del-btn:hover {
  color: var(--bad) !important;
  background: var(--bad-soft) !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
}

/* Source Badges and overall Chips */
.source-badge,
.badge-er,
.status-badge,
.badge-optional {
  border-radius: var(--r-md) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 0.2rem 0.6rem !important;
  border: 1px solid var(--hair) !important;
  background: var(--bg-elev-2) !important;
  color: var(--text-secondary) !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Badge Modifiers */
.source-badge.apify {
  color: var(--ok) !important;
  background: var(--ok-soft) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

.source-badge.graph {
  color: var(--acc) !important;
  background: var(--acc-soft) !important;
  border: 1px solid var(--acc-ring) !important;
}

.badge-er.high {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

.badge-er.medium {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(240, 198, 116, 0.2) !important;
}

.badge-er.low {
  background: var(--bad-soft) !important;
  color: var(--bad) !important;
  border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

.status-badge.shadowbanned {
  background: var(--bad-soft) !important;
  color: var(--bad) !important;
  border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

.status-badge.optimal {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid rgba(52, 211, 153, 0.15) !important;
}

/* Quota Indicator (Quota display) */
#quota-indicator {
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-elev-1) !important;
  padding: 0.5rem 0.85rem !important;
  transition: all var(--t-med) !important;
}

#quota-indicator:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
}

/* Quota Toast / Upsell */
#quota-toast {
  border: 1px solid var(--hair-strong) !important;
  border-radius: var(--r-lg) !important;
  background: rgba(7, 6, 16, 0.95) !important;
  box-shadow: var(--shadow-3) !important;
  padding: 1.25rem 1.4rem !important;
}

/* Admin Feature Chips */
.admin-feature-chip {
  padding: 0.25rem 0.6rem !important;
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t-fast) !important;
}

.admin-feature-chip:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
}