/* R5-A — Gelirup-inspired SaaS polish: tokens + buttons + transitions.
   2026-06-06 — Trendmetrik markası korunur (mavi accent); gelirup'tan
   premium derinlik hissi (panel-soft, gradient surface, hover glow,
   smooth transition, dark toolbar button system) alınır.

   Yalnızca dark theme (html.dark-mode / [data-theme="dark"]) için
   aktiftir. Light theme davranışı 0 değişim. */

/* ════════════════════════════════════════════════════════════════════
   1) TOKEN SİSTEMİ — gelirup-style premium dark
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode,
[data-theme="dark"] {
  /* Surface katmanları — düz lacivert yerine derinlikli stack */
  --r5a-bg:           #0a0e16;   /* en derin zemin */
  --r5a-bg-soft:      #0f141d;   /* page background gradient stop */
  --r5a-panel:        #131a25;   /* kart yüzeyi */
  --r5a-panel-soft:   #1a2230;   /* hover/nested panel */
  --r5a-panel-raised: #1f2837;   /* modal/dropdown */

  /* Border — düz #1a1a → glow-ready */
  --r5a-border:       rgba(148, 163, 184, 0.08);   /* default kart border */
  --r5a-border-hover: rgba(16, 185, 129, 0.30);    /* accent green hover glow */
  --r5a-border-focus: rgba(1, 117, 228, 0.45);     /* mavi focus ring */

  /* Accent renkler — Trendmetrik mavi korunur, gelirup canlılığı eklenir */
  --r5a-accent-blue:    #0175e4;          /* Trendmetrik brand */
  --r5a-accent-blue-soft: rgba(1,117,228,.12);
  --r5a-accent-green:   #10b981;          /* canlı yeşil — success/positive */
  --r5a-accent-green-soft: rgba(16,185,129,.14);
  --r5a-accent-orange:  #fb923c;          /* uyarı/action */
  --r5a-accent-orange-soft: rgba(251,146,60,.14);
  --r5a-accent-red:     #ef4444;          /* risk/negatif */
  --r5a-accent-red-soft: rgba(239,68,68,.14);
  --r5a-accent-purple:  #a78bfa;          /* opsiyonel ikinci accent */

  /* Tipografi */
  --r5a-text-primary:  #e8edf4;
  --r5a-text-secondary:#9aa5b8;
  --r5a-text-muted:    #6b7689;

  /* Shadow — flat değil, soft+layered */
  --r5a-shadow-card:  0 1px 2px rgba(0,0,0,.20), 0 0 0 1px rgba(148,163,184,.04);
  --r5a-shadow-hover: 0 6px 18px rgba(0,0,0,.32), 0 0 0 1px var(--r5a-border-hover);
  --r5a-shadow-glow:  0 0 0 3px rgba(16,185,129,.18);

  /* Motion */
  --r5a-transition-fast:   180ms cubic-bezier(0.4, 0, 0.2, 1);
  --r5a-transition-medium: 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════
   2) PAGE / PANEL SURFACE — düz lacivert yerine derinlikli gradient
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode body,
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 70% -200px, rgba(1,117,228,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(16,185,129,.04), transparent 55%),
    linear-gradient(180deg, var(--r5a-bg-soft) 0%, var(--r5a-bg) 100%) !important;
  background-attachment: fixed !important;
}

/* Kart yüzeyleri — gelirup-style soft elevation */
html.dark-mode .tm-card,
html.dark-mode .tmv2-panel,
html.dark-mode .dashboard-widget-inner,
html.dark-mode .bg-white,
html.dark-mode .ai-stat-card,
html.dark-mode .tm-cost-breakdown,
html.dark-mode .overview-platform-dist,
[data-theme="dark"] .tm-card,
[data-theme="dark"] .tmv2-panel,
[data-theme="dark"] .dashboard-widget-inner,
[data-theme="dark"] .overview-platform-dist {
  background: var(--r5a-panel) !important;
  border: 1px solid var(--r5a-border) !important;
  box-shadow: var(--r5a-shadow-card) !important;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              box-shadow var(--r5a-transition-medium),
              transform var(--r5a-transition-fast) !important;
}

/* Card hover — subtle lift + border glow (kullanıcı premium hissi) */
html.dark-mode .tm-card:hover,
html.dark-mode .tmv2-panel:hover,
html.dark-mode .dashboard-widget-inner:hover,
html.dark-mode .ai-stat-card:hover,
html.dark-mode .overview-platform-dist:hover,
[data-theme="dark"] .tm-card:hover,
[data-theme="dark"] .tmv2-panel:hover,
[data-theme="dark"] .dashboard-widget-inner:hover,
[data-theme="dark"] .overview-platform-dist:hover {
  background: var(--r5a-panel-soft) !important;
  border-color: var(--r5a-border-hover) !important;
  box-shadow: var(--r5a-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* KPI kartları — daha kontrollü (overview/live) */
html.dark-mode .tm-kpi-card,
html.dark-mode .tm-kpi,
[data-theme="dark"] .tm-kpi-card,
[data-theme="dark"] .tm-kpi {
  background: linear-gradient(180deg, var(--r5a-panel) 0%, var(--r5a-panel-soft) 100%) !important;
  border: 1px solid var(--r5a-border) !important;
  transition: transform var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              box-shadow var(--r5a-transition-medium) !important;
}
html.dark-mode .tm-kpi-card:hover,
html.dark-mode .tm-kpi:hover,
[data-theme="dark"] .tm-kpi-card:hover,
[data-theme="dark"] .tm-kpi:hover {
  border-color: var(--r5a-border-hover) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.30), 0 0 0 1px var(--r5a-border-hover) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   3) BUTTON SYSTEM — kaba beyaz Tools/Filtreler son
   ════════════════════════════════════════════════════════════════════ */

/* Reusable utility classes (yeni component'lar için) */
.tm-btn-r5a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font: 600 13px/1.2 'Inter', system-ui, sans-serif;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              color var(--r5a-transition-fast),
              transform var(--r5a-transition-fast);
  text-decoration: none; white-space: nowrap;
}
.tm-btn--toolbar-r5a {
  background: var(--r5a-panel-soft);
  border-color: var(--r5a-border);
  color: var(--r5a-text-primary);
}
.tm-btn--toolbar-r5a:hover {
  background: var(--r5a-panel-raised);
  border-color: var(--r5a-border-hover);
  color: var(--r5a-accent-green);
}
.tm-btn--ghost-r5a {
  background: transparent;
  border-color: transparent;
  color: var(--r5a-text-secondary);
}
.tm-btn--ghost-r5a:hover {
  background: var(--r5a-panel-soft);
  color: var(--r5a-text-primary);
}
.tm-btn--icon-r5a {
  width: 36px; height: 36px; padding: 0;
  justify-content: center;
  background: var(--r5a-panel-soft);
  border-color: var(--r5a-border);
  color: var(--r5a-text-secondary);
  border-radius: 8px;
}
.tm-btn--icon-r5a:hover {
  border-color: var(--r5a-border-hover);
  color: var(--r5a-accent-green);
  transform: translateY(-1px);
}
.tm-chip-r5a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  border-radius: 999px;
  background: var(--r5a-panel-soft);
  border: 1px solid var(--r5a-border);
  color: var(--r5a-text-secondary);
  cursor: pointer;
  transition: all var(--r5a-transition-fast);
}
.tm-chip-r5a:hover,
.tm-chip-r5a.is-active {
  background: var(--r5a-accent-green-soft);
  border-color: var(--r5a-accent-green);
  color: var(--r5a-accent-green);
}

/* ════════════════════════════════════════════════════════════════════
   4) MEVCUT BEYAZ BUTTONLARI OVERRIDE — btn-baklava-outline +
      dashboard içindeki Bootstrap btn-outline-* kalıntıları
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .btn-baklava-outline,
html.dark-mode .orders-filter-bar .btn-baklava-outline,
[data-theme="dark"] .btn-baklava-outline {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              color var(--r5a-transition-fast),
              transform var(--r5a-transition-fast) !important;
}
html.dark-mode .btn-baklava-outline:hover,
[data-theme="dark"] .btn-baklava-outline:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.18) !important;
}

/* tm-actions-overflow ("Daha fazla" summary) */
html.dark-mode .tm-actions-overflow > summary,
html.dark-mode .tm-filters-collapse > summary,
[data-theme="dark"] .tm-actions-overflow > summary,
[data-theme="dark"] .tm-filters-collapse > summary {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--r5a-transition-fast);
}
html.dark-mode .tm-actions-overflow > summary:hover,
html.dark-mode .tm-filters-collapse > summary:hover,
[data-theme="dark"] .tm-actions-overflow > summary:hover,
[data-theme="dark"] .tm-filters-collapse > summary:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
}

/* "Daha fazla KPI" summary — gerçek class: tm-overview-extra-kpi (details parent),
   tm-polish-collapsible (style class). Summary'nin DOM içeriği "+ Daha fazla KPI"
   beyaz pill ile geliyor; override hem details hem inner content'i tema'ya alır. */
html.dark-mode .tm-overview-extra-kpi > summary,
html.dark-mode .tm-polish-collapsible > summary,
html.dark-mode .overview-kpi-extra-collapse > summary,
[data-theme="dark"] .tm-overview-extra-kpi > summary,
[data-theme="dark"] .tm-polish-collapsible > summary,
[data-theme="dark"] .overview-kpi-extra-collapse > summary {
  background: transparent !important;
  border: 1px dashed var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  cursor: pointer;
  list-style: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all var(--r5a-transition-fast);
}
html.dark-mode .tm-overview-extra-kpi > summary::before,
html.dark-mode .tm-polish-collapsible > summary::before,
[data-theme="dark"] .tm-overview-extra-kpi > summary::before,
[data-theme="dark"] .tm-polish-collapsible > summary::before {
  background: transparent !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tm-overview-extra-kpi > summary > *,
html.dark-mode .tm-polish-collapsible > summary > *,
[data-theme="dark"] .tm-overview-extra-kpi > summary > *,
[data-theme="dark"] .tm-polish-collapsible > summary > * {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
html.dark-mode .tm-overview-extra-kpi > summary:hover,
html.dark-mode .tm-polish-collapsible > summary:hover,
[data-theme="dark"] .tm-overview-extra-kpi > summary:hover,
[data-theme="dark"] .tm-polish-collapsible > summary:hover {
  background: var(--r5a-panel-soft) !important;
  border-color: var(--r5a-border-hover) !important;
  border-style: solid !important;
  color: var(--r5a-accent-blue) !important;
}

/* Generic Bootstrap btn-outline-secondary on dark (modal close vs.) */
html.dark-mode .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-text-primary) !important;
}

/* Sidebar nav group header (accordion) — "Ürün ve Katalog", "Raporlar", etc.
   Mevcut sınıf .tmv2-nav-item--group .nav-group-header .mobile-accordion-btn
   bazı durumlarda white bg ile geliyordu (Bootstrap fallback). */
html.dark-mode .tmv2-nav-item--group,
html.dark-mode .nav-group-header,
html.dark-mode .mobile-accordion-btn,
[data-theme="dark"] .tmv2-nav-item--group,
[data-theme="dark"] .nav-group-header,
[data-theme="dark"] .mobile-accordion-btn {
  background: transparent !important;
  border: none !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tmv2-nav-item--group:hover,
html.dark-mode .nav-group-header:hover,
html.dark-mode .mobile-accordion-btn:hover,
[data-theme="dark"] .tmv2-nav-item--group:hover,
[data-theme="dark"] .nav-group-header:hover,
[data-theme="dark"] .mobile-accordion-btn:hover {
  background: var(--r5a-panel-soft) !important;
  color: var(--r5a-text-primary) !important;
}

/* AI Ayarları + Auto-QA hero secondary buttons */
html.dark-mode .ai-hero-secondary-btn,
[data-theme="dark"] .ai-hero-secondary-btn {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  transition: all var(--r5a-transition-fast) !important;
}
html.dark-mode .ai-hero-secondary-btn:hover,
[data-theme="dark"] .ai-hero-secondary-btn:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
}

/* Refresh icon button (live + orders) */
html.dark-mode #refreshOrdersBtn,
html.dark-mode #refreshDataBtn,
html.dark-mode #dashboardSettingsBtn,
html.dark-mode #tmLiveRefresh,
[data-theme="dark"] #refreshOrdersBtn,
[data-theme="dark"] #refreshDataBtn,
[data-theme="dark"] #dashboardSettingsBtn,
[data-theme="dark"] #tmLiveRefresh {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode #refreshOrdersBtn:hover,
html.dark-mode #refreshDataBtn:hover,
html.dark-mode #dashboardSettingsBtn:hover,
html.dark-mode #tmLiveRefresh:hover,
[data-theme="dark"] #refreshOrdersBtn:hover,
[data-theme="dark"] #refreshDataBtn:hover,
[data-theme="dark"] #dashboardSettingsBtn:hover,
[data-theme="dark"] #tmLiveRefresh:hover {
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   4.5) COST BREAKDOWN CARDS — dashboard_tabbed_tab_overview.html'deki
   inline style light theme için tasarlanmış (bg #fafbfc, color #0f172a).
   Dark override edilmemişti. R5-A bu 6 kart için panel-soft + dark text.
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .tm-cost-breakdown__card,
[data-theme="dark"] .tm-cost-breakdown__card {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  transition: all var(--r5a-transition-fast) !important;
}
html.dark-mode .tm-cost-breakdown__card:hover,
[data-theme="dark"] .tm-cost-breakdown__card:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  transform: translateY(-1px) !important;
}
html.dark-mode .tm-cost-breakdown__card-label,
[data-theme="dark"] .tm-cost-breakdown__card-label {
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tm-cost-breakdown__card-value,
[data-theme="dark"] .tm-cost-breakdown__card-value {
  color: var(--r5a-text-primary) !important;
}
html.dark-mode .tm-cost-breakdown__card-source--cari,
[data-theme="dark"] .tm-cost-breakdown__card-source--cari {
  background: rgba(14, 116, 144, 0.18) !important;
  color: #67e8f9 !important;
}
html.dark-mode .tm-cost-breakdown__card-source--orders,
[data-theme="dark"] .tm-cost-breakdown__card-source--orders {
  background: rgba(146, 64, 14, 0.20) !important;
  color: #fbbf24 !important;
}

/* ════════════════════════════════════════════════════════════════════
   5) SIDEBAR + TOPBAR PREMIUM — active state belirgin yeşil accent
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .tmv2-sidebar,
[data-theme="dark"] .tmv2-sidebar {
  background: linear-gradient(180deg, var(--r5a-panel) 0%, var(--r5a-bg-soft) 100%) !important;
  border-right: 1px solid var(--r5a-border) !important;
}
html.dark-mode .tmv2-nav-item,
[data-theme="dark"] .tmv2-nav-item {
  color: var(--r5a-text-secondary) !important;
  transition: background var(--r5a-transition-fast),
              color var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast) !important;
  border-left: 2px solid transparent;
}
html.dark-mode .tmv2-nav-item:hover,
[data-theme="dark"] .tmv2-nav-item:hover {
  background: var(--r5a-panel-soft) !important;
  color: var(--r5a-text-primary) !important;
}
html.dark-mode .tmv2-nav-item.active,
[data-theme="dark"] .tmv2-nav-item.active {
  background: linear-gradient(90deg, var(--r5a-accent-green-soft) 0%, transparent 100%) !important;
  color: var(--r5a-accent-green) !important;
  border-left-color: var(--r5a-accent-green) !important;
  font-weight: 600;
}

/* Topbar — derinlik */
html.dark-mode .tmv2-header,
html.dark-mode #tmv2Header,
[data-theme="dark"] .tmv2-header {
  background: var(--r5a-panel) !important;
  border-bottom: 1px solid var(--r5a-border) !important;
  backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════════
   6) BADGE / PILL — durum rozetleri canlı ve tutarlı
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .badge.badge-success,
html.dark-mode .tm-badge-success,
[data-theme="dark"] .badge.badge-success {
  background: var(--r5a-accent-green-soft) !important;
  color: var(--r5a-accent-green) !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}
html.dark-mode .badge.badge-warning,
[data-theme="dark"] .badge.badge-warning {
  background: var(--r5a-accent-orange-soft) !important;
  color: var(--r5a-accent-orange) !important;
}
html.dark-mode .badge.badge-danger,
[data-theme="dark"] .badge.badge-danger {
  background: var(--r5a-accent-red-soft) !important;
  color: var(--r5a-accent-red) !important;
}

/* ════════════════════════════════════════════════════════════════════
   7) FOCUS RING — kullanılabilirlik
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode button:focus-visible,
html.dark-mode .btn:focus-visible,
html.dark-mode a:focus-visible,
html.dark-mode .tmv2-nav-item:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--r5a-border-focus) !important;
}

/* ════════════════════════════════════════════════════════════════════
   8) SMOOTH PAGE ENTRY — kart fade-up (sadece tabbed pages)
   ════════════════════════════════════════════════════════════════════ */
@keyframes r5aFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.dark-mode .tm-card,
html.dark-mode .tmv2-panel,
html.dark-mode .ai-stat-card,
[data-theme="dark"] .tm-card,
[data-theme="dark"] .tmv2-panel,
[data-theme="dark"] .ai-stat-card {
  animation: r5aFadeUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--r5a-stagger, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  html.dark-mode *,
  [data-theme="dark"] * {
    animation: none !important;
    transition: none !important;
  }
}