/* ==========================================================================
   Pulsora — PREMIUM PANEL CHROME (Görsel Kabuk Overrides)
   style.css + premium-tokens.css'ten sonra yüklenir.
   Tasarım felsefesi: Linear, Vercel, Stripe disiplini (abartısız, rafine).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ROOT DEĞİŞKENLER & AMBİYANS (Propagate Premium Colors globally)
   -------------------------------------------------------------------------- */
:root {
  /* Temel bileşen renklerinin premium token'larla rezonansı */
  --bg-surface: var(--bg-elev-1) !important;
  --bg-surface-hover: var(--bg-elev-hover) !important;
  --border-color: var(--hair) !important;
  --border-focus: var(--acc) !important;
  
  --grad-instagram: var(--grad-brand) !important;
  --grad-accent: var(--grad-acc) !important;
  --grad-success: var(--grad-acc) !important;
  --grad-warning: var(--grad-gold) !important;
  
  --text-primary: #f5f4fb !important;
  --text-secondary: rgba(245, 244, 251, 0.66) !important;
  --text-muted: rgba(245, 244, 251, 0.42) !important;
  
  --color-success: var(--ok) !important;
  --color-warning: var(--warn) !important;
  --color-danger: var(--bad) !important;

  --transition-smooth: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast) !important;
}

/* Arka plan yumuşak üst-sol accent parıltısı */
body {
  background-color: var(--bg-base) !important;
}

body::before {
  content: '' !important;
  position: absolute !important;
  top: -10% !important;
  left: -5% !important;
  right: auto !important;
  width: 800px !important;
  height: 800px !important;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, rgba(7, 6, 16, 0) 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body::after {
  content: '' !important;
  position: absolute !important;
  top: 10% !important;
  right: -10% !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, rgba(7, 6, 16, 0) 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.bg-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.03) 0%, rgba(0, 0, 0, 0) 70%) !important;
}

/* --------------------------------------------------------------------------
   1. SIDEBAR (Sol Gezinim Paneli)
   -------------------------------------------------------------------------- */
.sidebar {
  background: var(--bg-deep) !important;
  border-right: 1px solid var(--hair) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 2.25rem 1.25rem !important;
}

/* Logo Alanı */
.brand-section {
  margin-bottom: 2.5rem !important;
}

.brand-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--r-sm) !important;
  background: var(--grad-acc) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.brand-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.brand-name {
  background: linear-gradient(135deg, #fff 30%, var(--text-secondary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* Menü Linkleri */
.nav-menu {
  gap: 0.35rem !important;
}

.nav-item a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: all var(--t-med) !important;
}

.nav-item a svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
  color: var(--text-muted) !important;
  transition: all var(--t-med) !important;
}

/* Link Hover */
.nav-item a:hover {
  background: var(--bg-elev-1) !important;
  border-color: var(--hair-faint) !important;
  color: var(--text-primary) !important;
  padding-left: 1.15rem !important;
}

.nav-item a:hover svg {
  color: var(--text-primary) !important;
}

/* Link Aktif Durum */
.nav-item.active a {
  background: var(--acc-soft) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  color: var(--acc) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 12px rgba(139, 92, 246, 0.05) !important;
}

.nav-item.active a::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 25% !important;
  height: 50% !important;
  width: 3px !important;
  background: var(--acc) !important;
  border-radius: 0 4px 4px 0 !important;
}

.nav-item.active a svg {
  color: var(--acc) !important;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4)) !important;
}

/* Alt Bölüm (Footer) */
.sidebar-footer {
  border-top: 1px solid var(--hair) !important;
  padding-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.account-preview {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color var(--t-med), background-color var(--t-med) !important;
}

.account-preview:hover {
  border-color: var(--hair-strong) !important;
  background: var(--bg-elev-hover) !important;
}

.avatar {
  background: var(--grad-acc) !important;
  padding: 1.5px !important;
}

.avatar-inner {
  background: var(--bg-deep) !important;
}

.avatar-inner svg {
  color: var(--text-secondary) !important;
}

/* Yedekleme Satırı */
.sidebar-footer .backup-row {
  margin-top: 0 !important;
  gap: 0.35rem !important;
}

.sidebar-footer .btn-mini {
  flex: 1 !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  transition: all var(--t-fast) !important;
}

.sidebar-footer .btn-mini:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-1) !important;
}

.sidebar-footer .btn-mini svg {
  width: 12px !important;
  height: 12px !important;
}

.brand-credit {
  margin-top: 0.25rem !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  font-size: 0.68rem !important;
  opacity: 0.8 !important;
}

.brand-credit span {
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   2. ÜST ARAÇ ÇUBUĞU & BUTON SİSTEMİ (Header Actions)
   -------------------------------------------------------------------------- */
.dashboard-header {
  border-bottom: 1px solid var(--hair) !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.header-title-area h1 {
  font-size: 1.8rem !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #fff 30%, var(--text-secondary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.header-title-area p {
  color: var(--text-muted) !important;
  font-size: 0.88rem !important;
}

/* Buton Eylemleri Kapsayıcı */
.header-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

/* Tek Tip Buton Sistemi */
.header-actions .btn-glass,
.header-actions button.btn-glass {
  height: 38px !important;
  padding: 0 1rem !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Birincil Aksiyon: Instagram API Bağla */
#open-settings-btn {
  background: var(--grad-brand) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.2) !important;
}

#open-settings-btn:hover {
  box-shadow: 0 6px 16px rgba(225, 48, 108, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Pro'ya Geç / Başvur: Gold Aksiyon */
#open-plan-request-btn {
  background: var(--gold-soft) !important;
  border: 1px solid rgba(232, 177, 76, 0.25) !important;
  color: var(--gold) !important;
  box-shadow: var(--shadow-1) !important;
}

#open-plan-request-btn:hover {
  background: var(--grad-gold) !important;
  color: var(--bg-deep) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(232, 177, 76, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* İkincil Aksiyonlar: Yenile, PDF, Güncelle */
#sync-btn,
#pdf-export-btn {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-1) !important;
}

#sync-btn:hover,
#pdf-export-btn:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
}

/* Kotanın Sade Durum Chip'ine (Pill) Çevrilmesi */
#quota-indicator {
  height: 38px !important;
  padding: 0 0.85rem !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-pill) !important;
  background: var(--bg-elev-1) !important;
  font-size: 0.76rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  box-sizing: border-box !important;
}

#quota-indicator svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--ok) !important;
}

#quota-indicator > span {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

#quota-plan {
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.03em !important;
}

#quota-indicator span span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--text-muted) !important;
}

#quota-usage, 
#quota-limit {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   3. GENEL BUTON & FORM ELEMANLARI Overrides
   -------------------------------------------------------------------------- */
.btn-glass {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--text-secondary) !important;
  transition: all var(--t-fast) !important;
}

.btn-glass:hover {
  background: var(--bg-elev-hover) !important;
  border-color: var(--hair-strong) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-2) !important;
}

.btn-glass:active {
  transform: translateY(0px) !important;
  box-shadow: var(--shadow-1) !important;
}

.btn-primary {
  background: var(--grad-acc) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4), var(--shadow-glow) !important;
  transform: translateY(-1px) !important;
}

/* Form Kontrolleri */
.form-control {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-primary) !important;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast) !important;
}

.form-control:focus {
  border-color: var(--acc) !important;
  background: var(--bg-elev-2) !important;
  box-shadow: 0 0 0 1px var(--acc-ring) !important;
}

.explore-search-bar,
.benchmark-add-bar {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.explore-search-bar .form-control,
.benchmark-add-bar .form-control {
  height: 38px !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   4. METRİK KARTLARI & LAYOUT CİLASI
   -------------------------------------------------------------------------- */
.main-viewport {
  padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 3rem !important;
}

.metric-card {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: var(--r-md) !important;
  transition: transform var(--t-med), border-color var(--t-med), background-color var(--t-med), box-shadow var(--t-med) !important;
}

.metric-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--hair-strong) !important;
  background: var(--bg-elev-hover) !important;
  box-shadow: var(--shadow-2) !important;
}

.metric-card::before {
  height: 2px !important;
}

.metric-card.instagram::before { background: var(--grad-brand) !important; }
.metric-card.success::before { background: var(--grad-acc) !important; }
.metric-card.warning::before { background: var(--grad-gold) !important; }

.metric-icon-box {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
}

.metric-card:hover .metric-icon-box {
  border-color: var(--hair-strong) !important;
}

/* Alert Kartlarının Rafine Edilmesi */
.alert-card {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  transition: border-color var(--t-med), box-shadow var(--t-med) !important;
}

.alert-card.healthy {
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: var(--shadow-1) !important;
  border-left: 4px solid var(--ok) !important;
}

.alert-card:not(.healthy) {
  border-left: 4px solid var(--bad) !important;
}

#plan-request-status-card {
  border-left: 4px solid var(--acc) !important;
  background: var(--bg-elev-1) !important;
}

.alert-icon-container {
  border-radius: var(--r-sm) !important;
}

.alert-card.healthy .alert-icon-container {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
}

.alert-card:not(.healthy) .alert-icon-container {
  background: var(--bad-soft) !important;
  color: var(--bad) !important;
}

#plan-request-status-card .alert-icon-container {
  background: var(--acc-soft) !important;
  color: var(--acc) !important;
}