/* =============================================================
   DARK MODE — NAMESPACE FIXES (2026-04-27)
   ----------------------------------------------------------------
   Son aylarda eklenen shell CSS'leri (buybox-control.css,
   komisyon-shell.css, envanter-shell.css, amazon_research_panel.html
   inline, pia / kom-shell / intel-page) reference design'dan port
   edilmiş --blue-* / --ink-* / --orange-* / --purple-* / --green-*
   / --red-* / --yellow-* / --pink-* token'larını kendi scope'larında
   tanımlıyor.

   theme-variables.css'in dark mode bloğu sadece --tm-*, --tmv2-*,
   --color-* namespace'lerini kapsadığı için bu shell'ler dark mode'da
   light renklerini koruyor → kart/tablo arka planı beyaz, metin
   görünmüyor. Bu dosya o token'ları html.dark-mode altında remap eder.

   IMPORTANT: Override scope'a bağlı. Light mode kuralları DEĞİŞMEZ.
   Yalnızca html.dark-mode + ilgili module wrapper kombinasyonu
   tetikler. Token isimleri aynı kalır, sadece değerler invert/lift
   olur — böylece tüm component CSS otomatik olarak dark renge geçer.
   ============================================================= */

html.dark-mode .buybox-control-module,
html.dark-mode .kom-shell,
html.dark-mode .intel-page,
html.dark-mode .product-settings-page,
html.dark-mode body:has(.kom-shell .tool-tabs),
html.dark-mode body:has(.product-settings-page) {
  /* ---------- Ink scale (gri-siyah) — invert ----------
     Light: ink-50 = #f4f6fb (en açık) ... ink-900 = #0a0f1e (en koyu)
     Dark:  ink-50 = #0f1726 (en koyu) ... ink-900 = #f4f8ff (en açık)
     Mid scale (300-500) Tailwind slate dark palette tabanlı —
     dark backdrop'ta "muted text" okunaklı kalır.
  */
  --ink-50:  #0f1726;
  --ink-100: #18253b;
  --ink-200: #243049;
  --ink-300: #3a4866;
  --ink-400: #94a3b8;   /* ↑ muted text — slate-400 */
  --ink-500: #cbd5e1;   /* ↑ secondary text — slate-300 */
  --ink-600: #dde4ee;
  --ink-700: #e8eef6;
  --ink-800: #f0f4fa;
  --ink-900: #f4f8ff;   /* ↑ heading — pure light slate */
  --ink-950: #ffffff;

  /* ---------- Marka renkleri — dark mode için lift ----------
     Light backdrop'ta canlı mavi/mor rahatça okunur. Dark backdrop'ta
     biraz daha aydınlık tonlar daha okunaklı.
  */
  --blue-50:  rgba(58, 136, 229, 0.14);
  --blue-100: rgba(58, 136, 229, 0.22);
  --blue-300: #6fa6ff;
  --blue-500: #5aa0ff;
  --blue-600: #4290ff;
  --blue-700: #2884ff;

  --purple-300: #d0b1ff;
  --purple-500: #b78fff;
  --purple-600: #a878ff;
  --purple-700: #9261f0;

  --orange-400: #ffb088;
  --orange-500: #ff9966;
  --orange-600: #ff7a44;
  --orange-700: #ff5e1d;

  --green-500: #4ade80;
  --green-600: #22c55e;

  --red-500: #f87171;
  --yellow-400: #fde047;
  --pink-500:  #ff77a8;

  /* ---------- Gradient'ler — dark için yeniden örnekle ----------
     Component'ler gradient'i token referansıyla değil, doğrudan
     hex'lerle tanımladığı için bu gradient değişkenleri ayrıca
     override etmek gerekiyor.
  */
  --grad-primary:  linear-gradient(135deg, #4290ff 0%, #b78fff 100%);
  --grad-warm:     linear-gradient(135deg, #ff7a44 0%, #b78fff 100%);
  --grad-cool:     linear-gradient(135deg, #4290ff 0%, #4ade80 100%);

  /* ---------- Surface defaults ----------
     Component'ler `background: #fff !important` yerine token kullanan
     bölümler için surface variable'lar.
  */
  --bg:   #0f1726;
  --bg-2: #18253b;
  --white: #18253b;        /* "white" token kullanan kartlar dark surface'a düşer */
}

/* =============================================================
   ENVANTER SHELL — özel namespace
   ============================================================= */
html.dark-mode body:has(.product-settings-page) .product-settings-page,
html.dark-mode body:has(.product-settings-page) {
  --env-blue-50:  rgba(58,136,229,.18);
  --env-blue-300: #93c5fd;
  --env-blue-500: #60a5fa;
  --env-blue-600: #3b82f6;
  --env-blue-700: #2563eb;
  --env-purple-500: #c4b5fd;
  --env-purple-600: #a78bfa;
  --env-orange-500: #fdba74;
  --env-orange-600: #fb923c;
  --env-green-500: #4ade80;
  --env-green-600: #22c55e;
  --env-yellow-400: #fde047;
  --env-red-500: #f87171;
  --env-ink-900: #f4f8ff;
  --env-ink-800: #f0f4fa;
  --env-ink-700: #e8eef6;
  --env-ink-600: #dde4ee;
  --env-ink-500: #cbd5e1;     /* secondary text */
  --env-ink-400: #94a3b8;     /* muted text */
  --env-ink-300: #3a4866;     /* border */
  --env-ink-200: #243049;
  --env-ink-100: #18253b;
  --env-ink-50:  #0f1726;
  --env-grad-primary: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
  --env-grad-warm:    linear-gradient(135deg, #fb923c 0%, #a78bfa 100%);
  --env-grad-cool:    linear-gradient(135deg, #3b82f6 0%, #4ade80 100%);
  --env-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --env-shadow-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -1px rgba(0,0,0,.35);
}

/* =============================================================
   AMAZON RESEARCH (intel-page) — özel namespace
   ============================================================= */
html.dark-mode .intel-page {
  --bg: #0f1726;
}

/* =============================================================
   KOMISYON SHELL POLISH (--pol-*)
   ============================================================= */
html.dark-mode body:has(.kom-shell .tool-tabs) {
  --pol-blue-50:  rgba(58,136,229,.14);
  --pol-blue-500: #5aa0ff;
  --pol-blue-600: #4290ff;
  --pol-blue-700: #2884ff;
  --pol-purple-500: #b78fff;
  --pol-purple-600: #a878ff;
  --pol-orange-500: #ff9966;
  --pol-orange-600: #ff7a44;
  --pol-green-500: #4ade80;
  --pol-green-600: #22c55e;
  --pol-red-500: #f87171;
  --pol-ink-900: #ebeff5;
  --pol-ink-700: #c5cdd9;
  --pol-ink-500: #8e9bb3;
  --pol-ink-400: #6b7990;
  --pol-ink-300: #3a4866;
  --pol-ink-200: #243049;
  --pol-ink-100: #18253b;
  --pol-ink-50:  #0f1726;
  --pol-grad: linear-gradient(135deg,#4290ff 0%,#b78fff 100%);
  --pol-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --pol-shadow-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -1px rgba(0,0,0,.35);
}

/* =============================================================
   ZORUNLU SURFACE OVERRIDES — `background: #fff !important` veya
   inline `style="background:..."` yapan az sayıda yer için sıkı
   düzeltmeler. Sadece module wrapper'ları içinde geçerli.
   ============================================================= */
html.dark-mode .buybox-control-module .bb-content-col,
html.dark-mode .buybox-control-module .mp-switch,
html.dark-mode .buybox-control-module .page-head,
html.dark-mode .buybox-control-module .sb-card,
html.dark-mode .buybox-control-module .sb-progress,
html.dark-mode .buybox-control-module .bb-toolbar,
html.dark-mode .buybox-control-module .rail-card,
html.dark-mode .buybox-control-module .bb-product-dash-card,
html.dark-mode .buybox-control-module .bb-tabs .tab,
html.dark-mode .buybox-control-module .bb-btn,
html.dark-mode .buybox-control-module .mp-pill,
html.dark-mode .buybox-control-module .filter-chip {
  background: var(--ink-100) !important;
  color: var(--ink-900);
  border-color: var(--ink-200);
}

html.dark-mode .product-settings-page .ps-meta-strip,
html.dark-mode .product-settings-page .env-hero,
html.dark-mode .product-settings-page .es-card,
html.dark-mode .product-settings-page .ps-ops-content,
html.dark-mode .product-settings-page .ps-filter-card,
html.dark-mode .product-settings-page .ps-products-table-wrap,
html.dark-mode .product-settings-page .table-wrapper,
html.dark-mode .product-settings-page .table-container,
html.dark-mode .product-settings-page .card,
html.dark-mode .product-settings-page .card-body,
html.dark-mode .product-settings-page .card-header,
html.dark-mode .product-settings-page .platform-dropdown-wrapper select {
  background: var(--env-ink-100) !important;
  color: var(--env-ink-900);
  border-color: var(--env-ink-200) !important;
}

/* Beyaz "min-vh-100 bg-light" Bootstrap class'ı dark mode'da arka
   planı kapatıyor — şeffaflaştır. */
html.dark-mode .product-settings-page.bg-light,
html.dark-mode .product-settings-page .bg-light {
  background: transparent !important;
  background-color: transparent !important;
}

/* Komisyon-shell polish layer — page-card'lar */
html.dark-mode body:has(.kom-shell .tool-tabs) .commission-page-card,
html.dark-mode body:has(.kom-shell .tool-tabs) .plus-commission-page-card,
html.dark-mode body:has(.kom-shell .tool-tabs) .advantage-page-card,
html.dark-mode body:has(.kom-shell .tool-tabs) .commission-card,
html.dark-mode body:has(.kom-shell .tool-tabs) .commission-box,
html.dark-mode body:has(.kom-shell .tool-tabs) .table-wrapper,
html.dark-mode body:has(.kom-shell .tool-tabs) .table-container,
html.dark-mode body:has(.kom-shell .tool-tabs) .data-table {
  background: var(--pol-ink-100) !important;
  color: var(--pol-ink-900) !important;
  border-color: var(--pol-ink-200) !important;
}

html.dark-mode body:has(.kom-shell .tool-tabs) .data-table thead th {
  background: var(--pol-ink-50) !important;
  color: var(--pol-ink-500) !important;
}

/* Amazon research / intel-page — kart ve panel surface'ları */
html.dark-mode .intel-page .top-panel,
html.dark-mode .intel-page .discovery-hero,
html.dark-mode .intel-page .kpi-pill,
html.dark-mode .intel-page .filter-side,
html.dark-mode .intel-page .pcard,
html.dark-mode .intel-page .amz-detail-section,
html.dark-mode .intel-page .amz-cross-section,
html.dark-mode .intel-page .amz-watchlist-section,
html.dark-mode .intel-page .quota-bar,
html.dark-mode .intel-page .tabs-bar,
html.dark-mode .intel-page .tab,
html.dark-mode .intel-page .res-panel .res-header,
html.dark-mode .intel-page .pcard-thumb,
html.dark-mode .intel-page .amz-skeleton-card {
  background: var(--ink-100, #18253b);
  color: var(--ink-900, #ebeff5);
  border-color: var(--ink-200, #243049);
}
html.dark-mode .intel-page .pstat,
html.dark-mode .intel-page .empty-state {
  background: var(--ink-50, #0f1726);
  color: var(--ink-700, #c5cdd9);
  border-color: var(--ink-200, #243049);
}

/* Profit empty-state (komisyon analizi macro) */
html.dark-mode .kom-shell ~ * .profit-empty-state,
html.dark-mode body:has(.kom-shell) .profit-empty-state {
  background:
    radial-gradient(600px 160px at 0% 0%, rgba(58,136,229,.10) 0%, transparent 60%),
    radial-gradient(500px 140px at 100% 100%, rgba(167,120,255,.08) 0%, transparent 60%),
    var(--ink-100, #18253b) !important;
  border-color: var(--ink-200, #243049) !important;
  color: var(--ink-900, #ebeff5);
}
html.dark-mode body:has(.kom-shell) .profit-empty-state__headline {
  color: var(--ink-900, #ebeff5) !important;
}
html.dark-mode body:has(.kom-shell) .profit-empty-state__lede,
html.dark-mode body:has(.kom-shell) .profit-empty-state__benefit,
html.dark-mode body:has(.kom-shell) .pem-item__label,
html.dark-mode body:has(.kom-shell) .profit-empty-state__card-label,
html.dark-mode body:has(.kom-shell) .profit-empty-state__card-sub {
  color: var(--ink-500, #8e9bb3) !important;
}
html.dark-mode body:has(.kom-shell) .pem-item__value {
  color: var(--ink-900, #ebeff5) !important;
}
html.dark-mode body:has(.kom-shell) .profit-empty-state__metrics,
html.dark-mode body:has(.kom-shell) .profit-empty-state__steps {
  background: var(--ink-50, #0f1726) !important;
  border-color: var(--ink-200, #243049) !important;
}

/* =============================================================
   FORM ELEMENTS — input/select/textarea
   Component CSS'leri "background: #fff" yapıyor — dark'ta zıt.
   ============================================================= */
html.dark-mode .buybox-control-module input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .buybox-control-module select,
html.dark-mode .buybox-control-module textarea,
html.dark-mode .product-settings-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .product-settings-page select,
html.dark-mode .product-settings-page textarea,
html.dark-mode body:has(.kom-shell .tool-tabs) input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode body:has(.kom-shell .tool-tabs) select,
html.dark-mode body:has(.kom-shell .tool-tabs) textarea,
html.dark-mode .intel-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .intel-page select,
html.dark-mode .intel-page textarea {
  background: var(--ink-50, #0f1726) !important;
  color: var(--ink-900, #ebeff5) !important;
  border-color: var(--ink-200, #243049) !important;
}

/* =============================================================
   TABLE ROWS — hover ve modified state
   ============================================================= */
html.dark-mode .product-settings-page .ps-products-table tbody tr:hover,
html.dark-mode body:has(.kom-shell .tool-tabs) .data-table tbody tr:hover {
  background: var(--ink-50, #0f1726) !important;
}
html.dark-mode .product-settings-page .ps-table-input.modified,
html.dark-mode .product-settings-page input.modified {
  background: rgba(255,210,61,.12) !important;
  border-color: var(--yellow-400, #fde047) !important;
  color: var(--ink-900, #ebeff5) !important;
}

/* =============================================================
   GENİŞ KAPSAM — özel sayfa wrapper'ları
   audit'te tespit edilen ama kendi shell CSS'i olmayan sayfalar
   için ortak surface + text uyumu sağlar.

   Strateji: page wrapper'ı sayfa background'ı olarak şeffaf tut
   (page-shell glass zaten dark surface gösteriyor), iç card / panel
   / table elementlerini --tm-surface / --tm-bg-card token'larına
   bağla. Bu override'lar sadece html.dark-mode altında devreye girer.
   ============================================================= */

/* ---- Sayfa wrapper'ları: hardcoded background'ı şeffaflaştır ---- */
html.dark-mode .xml-upload-page,
html.dark-mode .xml-sources-page,
html.dark-mode .xml-field-mapping-page,
html.dark-mode .xml-page,
html.dark-mode .pricing-page,
html.dark-mode .sync-page,
html.dark-mode .payout-dash,
html.dark-mode .profit-margin-page,
html.dark-mode .brand-studio-page,
html.dark-mode .order-profit-page,
html.dark-mode .order-analysis-page,
html.dark-mode .module-page {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}

/* ---- Sayfa içi card / panel / surface ---- */
html.dark-mode .xml-upload-page > .card,
html.dark-mode .xml-upload-page .panel,
html.dark-mode .xml-sources-page .card,
html.dark-mode .xml-sources-page [class*="-card"]:not([class*="-tab"]),
html.dark-mode .xml-field-mapping-page .card,
html.dark-mode .xml-field-mapping-page .panel,
html.dark-mode .pricing-page .card,
html.dark-mode .pricing-page .panel,
html.dark-mode .sync-page .card,
html.dark-mode .payout-dash .card,
html.dark-mode .payout-dash .panel,
html.dark-mode .profit-margin-page .card,
html.dark-mode .profit-margin-page .panel,
html.dark-mode .brand-studio-page .card,
html.dark-mode .order-profit-page .card,
html.dark-mode .order-analysis-page .card {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* ---- bg-white / bg-light Bootstrap utility'leri için ek koruma ---- */
html.dark-mode .xml-upload-page .bg-white,
html.dark-mode .xml-sources-page .bg-white,
html.dark-mode .xml-field-mapping-page .bg-white,
html.dark-mode .pricing-page .bg-white,
html.dark-mode .sync-page .bg-white,
html.dark-mode .payout-dash .bg-white,
html.dark-mode .profit-margin-page .bg-white,
html.dark-mode .brand-studio-page .bg-white {
  background: var(--tm-bg-card, #111b2e) !important;
  background-color: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5);
}

/* ---- Tablo standartlaştırması (sayfa wrapper'ı ne olursa olsun) ---- */
html.dark-mode .xml-upload-page table,
html.dark-mode .xml-sources-page table,
html.dark-mode .xml-field-mapping-page table,
html.dark-mode .pricing-page table,
html.dark-mode .sync-page table,
html.dark-mode .payout-dash table,
html.dark-mode .profit-margin-page table,
html.dark-mode .brand-studio-page table {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
}
html.dark-mode .xml-upload-page table thead,
html.dark-mode .xml-sources-page table thead,
html.dark-mode .xml-field-mapping-page table thead,
html.dark-mode .pricing-page table thead,
html.dark-mode .sync-page table thead,
html.dark-mode .payout-dash table thead,
html.dark-mode .profit-margin-page table thead,
html.dark-mode .brand-studio-page table thead {
  background: var(--tm-bg-tertiary, #0c1626) !important;
  color: var(--tm-text-muted, #94a3b8) !important;
}
html.dark-mode .xml-upload-page table tbody tr:hover,
html.dark-mode .xml-sources-page table tbody tr:hover,
html.dark-mode .xml-field-mapping-page table tbody tr:hover,
html.dark-mode .pricing-page table tbody tr:hover,
html.dark-mode .sync-page table tbody tr:hover,
html.dark-mode .payout-dash table tbody tr:hover,
html.dark-mode .profit-margin-page table tbody tr:hover,
html.dark-mode .brand-studio-page table tbody tr:hover {
  background: var(--tm-bg-hover, #18253b) !important;
}

/* ---- Inline <style> bloğunda yaygın hardcoded background ----
   templates/pages/*.html'de inline style="" veya <style> içinde
   `background: white`, `background: #fff` çok yaygın. Sayfa wrapper
   altındaki tüm beyaz inline'ları sıkıca ezeriz.
*/
html.dark-mode .xml-upload-page [style*="background: white"],
html.dark-mode .xml-upload-page [style*="background:#fff"],
html.dark-mode .xml-upload-page [style*="background: #fff"],
html.dark-mode .pricing-page [style*="background: white"],
html.dark-mode .pricing-page [style*="background: #fff"],
html.dark-mode .payout-dash [style*="background: white"],
html.dark-mode .payout-dash [style*="background: #fff"],
html.dark-mode .profit-margin-page [style*="background: white"],
html.dark-mode .profit-margin-page [style*="background: #fff"],
html.dark-mode .sync-page [style*="background: white"],
html.dark-mode .sync-page [style*="background: #fff"] {
  background: var(--tm-bg-card, #111b2e) !important;
  background-color: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
}

/* ---- Form input ortak fallback ---- */
html.dark-mode .xml-upload-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .xml-upload-page select,
html.dark-mode .xml-upload-page textarea,
html.dark-mode .xml-sources-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .xml-sources-page select,
html.dark-mode .xml-sources-page textarea,
html.dark-mode .xml-field-mapping-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .xml-field-mapping-page select,
html.dark-mode .xml-field-mapping-page textarea,
html.dark-mode .pricing-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .pricing-page select,
html.dark-mode .pricing-page textarea,
html.dark-mode .sync-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .sync-page select,
html.dark-mode .sync-page textarea,
html.dark-mode .payout-dash input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .payout-dash select,
html.dark-mode .payout-dash textarea,
html.dark-mode .profit-margin-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .profit-margin-page select,
html.dark-mode .profit-margin-page textarea,
html.dark-mode .brand-studio-page input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode .brand-studio-page select,
html.dark-mode .brand-studio-page textarea {
  background-color: var(--tm-bg-input, #0c1626) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   ADMIN ECS / Job Management — 2264 hardcoded renk içeren en
   ağır sayfa. Yüklenme: zaten admin layout dark-mode token'ları
   kullanır, ancak inline #c62828 / #666666 / white sabitleri var.
   Sayfa wrapper'ı: body[data-page-tutorial-key="ecs_jobs"] veya
   .container içeren div — burada generic Bootstrap class fallback'i
   yeterli olur. Sadece bilinen pattern'leri override edeceğiz.
   ============================================================= */
html.dark-mode body:has(form[action*="ecs"]) .card,
html.dark-mode body:has(.task-card) .card,
html.dark-mode body:has(.job-card) .card {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   TRENDYOL HEADER (xml_pricing_baklava sayfası)
   ============================================================= */
html.dark-mode .trendyol-header {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5);
}

/* =============================================================
   MODAL CONTENT — Bootstrap modal-content'in dark-mode.css'te
   zaten kapsanması gerekiyor; bu override güvence için.
   ============================================================= */
html.dark-mode .modal-content,
html.dark-mode .modal-header,
html.dark-mode .modal-body,
html.dark-mode .modal-footer {
  background-color: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* Modal close button + label kontrastı */
html.dark-mode .modal-content .btn-close {
  filter: invert(1) brightness(1.6);
}

/* =============================================================
   TOAST / ALERT — koyu tema için
   ============================================================= */
html.dark-mode .alert {
  border-color: var(--tm-border-color, #1a2538);
}
html.dark-mode .alert-info {
  background-color: rgba(58, 136, 229, 0.12);
  color: #93c5fd;
}
html.dark-mode .alert-success {
  background-color: rgba(74, 222, 128, 0.12);
  color: #86efac;
}
html.dark-mode .alert-warning {
  background-color: rgba(255, 210, 61, 0.12);
  color: #fde047;
}
html.dark-mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* =============================================================
   DROPDOWN MENÜ — Bootstrap dropdown-menu Bootstrap-CSS'in dark
   mode'da otomatik var ama bazen page CSS'i override ediyor.
   ============================================================= */
html.dark-mode .dropdown-menu {
  background-color: var(--tm-bg-card, #111b2e);
  border-color: var(--tm-border-color, #1a2538);
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .dropdown-item {
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: var(--tm-bg-hover, #18253b);
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .dropdown-divider {
  border-top-color: var(--tm-border-color, #1a2538);
}

/* =============================================================
   COMMISSION / PLUS / ADVANTAGE INLINE STYLES
   commission_analysis.html, plus_commission_analysis.html ve
   advantage_analysis.html sayfalarının inline <style> blokları
   white/#fff/#1e293b kullanıyor. body:has(.kom-shell) zaten
   --pol-* token'larını fix etti; bunun üstüne sayfa-spesifik
   wrapper override'larını ekliyoruz.
   ============================================================= */
html.dark-mode body:has(.kom-shell) .commission-page-card .card-body,
html.dark-mode body:has(.kom-shell) .commission-page-card .card-header,
html.dark-mode body:has(.kom-shell) .plus-commission-page-card .card-body,
html.dark-mode body:has(.kom-shell) .plus-commission-page-card .card-header,
html.dark-mode body:has(.kom-shell) .advantage-page-card .card-body,
html.dark-mode body:has(.kom-shell) .advantage-page-card .card-header {
  background: transparent !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
}

/* Commission upload area + date badge ve diğer ortak inline'lar */
html.dark-mode .commission-upload-area-bg,
html.dark-mode .plus-upload-area-bg,
html.dark-mode .advantage-upload-area-bg {
  background: var(--tm-bg-tertiary, #0c1626) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   KARTLARDA YAYGIN INLINE BACKGROUND COLOR PATTERNS
   ============================================================= */
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background-color: white"],
html.dark-mode [style*="background-color:white"] {
  background-color: var(--tm-bg-card, #111b2e);
  color: var(--tm-text-primary, #e6ecf5);
}

/* =============================================================
   ENVANTER PAGE — açık metin & pill kontrastları (2026-04-27 v2)
   Screenshot'ta tespit: hero başlık/desc, KPI label'ları, section
   label'ları, sync pill, hint metinleri çok soluk kalıyor. Burada
   ilgili element'lere doğrudan açık-renk override çakıyoruz.
   ============================================================= */

/* Sayfa kök bg — hero ve es-card transparan kalsın diye dark surface */
html.dark-mode .product-settings-page {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--env-ink-900, #f4f8ff);
}

/* Hero başlık + açıklama */
html.dark-mode .product-settings-page .env-hero {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-200, #243049) !important;
  color: var(--env-ink-900, #f4f8ff);
}
html.dark-mode .product-settings-page .env-hero .hi h1,
html.dark-mode .product-settings-page .env-hero .hi h1 .ico {
  color: var(--env-ink-900, #f4f8ff) !important;
}
html.dark-mode .product-settings-page .env-hero p {
  color: var(--env-ink-500, #cbd5e1) !important;
}

/* Sync pill — yeşil tinted bg + parlak yeşil text (rgba force override) */
html.dark-mode .product-settings-page .env-hero .sync-status {
  background: rgba(74, 222, 128, 0.18) !important;
  color: #86efac !important;
}
html.dark-mode .product-settings-page .env-hero .sync-status .pulse {
  background: #4ade80 !important;
  box-shadow: 0 0 0 4px rgba(74,222,128,.2);
}
html.dark-mode .product-settings-page .env-hero .sync-time {
  color: var(--env-ink-400, #94a3b8) !important;
}

/* Hero "Yenile" butonu */
html.dark-mode .product-settings-page .env-hero .act-btn:not(.primary) {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-300, #3a4866) !important;
  color: var(--env-ink-700, #e8eef6) !important;
}
html.dark-mode .product-settings-page .env-hero .act-btn:not(.primary):hover {
  border-color: var(--env-blue-500, #60a5fa) !important;
  color: var(--env-blue-300, #93c5fd) !important;
}

/* KPI cards — kart bg dark, ico tinted, metin parlak */
html.dark-mode .product-settings-page .env-stats .es-card {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .env-stats .es-card .icn {
  /* Dark mode'da rgba opacity'sini biraz arttır ki ico görünsün */
  opacity: 1;
}
html.dark-mode .product-settings-page .env-stats .es-card.k1 .icn { background: rgba(96,165,250,.18) !important; color: #93c5fd !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k2 .icn { background: rgba(74,222,128,.18) !important; color: #86efac !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k3 .icn { background: rgba(251,146,60,.18) !important; color: #fdba74 !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k4 .icn { background: rgba(167,139,250,.18) !important; color: #c4b5fd !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k5 .icn { background: rgba(248,113,113,.18) !important; color: #fca5a5 !important; }

html.dark-mode .product-settings-page .env-stats .es-card .meta b {
  color: var(--env-ink-900, #f4f8ff) !important;
}
html.dark-mode .product-settings-page .env-stats .es-card .meta span {
  color: var(--env-ink-400, #94a3b8) !important;
}
html.dark-mode .product-settings-page .env-stats .es-card .meta small {
  color: var(--env-ink-500, #cbd5e1) !important;
}
html.dark-mode .product-settings-page .env-stats .es-card.k1 .meta small { color: #93c5fd !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k2 .meta small { color: #86efac !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k3 .meta small { color: #fdba74 !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k4 .meta small { color: #c4b5fd !important; }
html.dark-mode .product-settings-page .env-stats .es-card.k5 .meta small { color: #fca5a5 !important; }

/* Operations card section labels (PAZARYERİ & KAYIT / DOSYA) */
html.dark-mode .product-settings-page .ps-ops-content {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .ps-ops-content .ps-section-label {
  background: var(--env-ink-50, #0f1726) !important;
  color: var(--env-ink-500, #cbd5e1) !important;
  border-right-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .ps-ops-content .ps-section-label:first-of-type::before {
  background: rgba(96,165,250,.18) !important;
  color: #93c5fd !important;
}
html.dark-mode .product-settings-page .ps-ops-content .ps-section-label:last-of-type::before {
  background: rgba(253,224,71,.20) !important;
  color: #fde047 !important;
}
html.dark-mode .product-settings-page .ps-ops-content hr {
  border-top-color: var(--env-ink-200, #243049) !important;
}

/* Aksiyon tile içindeki butonlar — dark ortama uygun gradient */
html.dark-mode .product-settings-page #updateProductsBtn {
  background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%) !important;
  box-shadow: 0 6px 14px -8px rgba(59,130,246,.7) !important;
}
html.dark-mode .product-settings-page #saveProductSettingsBtn {
  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
  box-shadow: 0 6px 14px -8px rgba(74,222,128,.6) !important;
}
html.dark-mode .product-settings-page #updateCostsFromXmlBtn {
  background: linear-gradient(135deg, #fb923c 0%, #a78bfa 100%) !important;
  box-shadow: 0 6px 14px -8px rgba(251,146,60,.6) !important;
}
html.dark-mode .product-settings-page #xmlUploadBtn {
  background: linear-gradient(135deg, #fb923c 0%, #a78bfa 100%) !important;
  box-shadow: 0 6px 14px -8px rgba(251,146,60,.55) !important;
}
html.dark-mode .product-settings-page .ps-file-tile--export .btn,
html.dark-mode .product-settings-page #excelUploadBtn {
  background: var(--env-ink-50, #0f1726) !important;
  border-color: var(--env-ink-300, #3a4866) !important;
  color: var(--env-ink-700, #e8eef6) !important;
}

/* Filter card — başlık + label + input contrast */
html.dark-mode .product-settings-page .ps-filter-card {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-200, #243049) !important;
  color: var(--env-ink-900, #f4f8ff);
}
html.dark-mode .product-settings-page .ps-filter-card label,
html.dark-mode .product-settings-page .ps-filter-card .form-label,
html.dark-mode .product-settings-page .ps-filter-card .small,
html.dark-mode .product-settings-page .ps-filter-card .text-muted {
  color: var(--env-ink-500, #cbd5e1) !important;
}
html.dark-mode .product-settings-page .ps-filter-field input,
html.dark-mode .product-settings-page .ps-filter-field select {
  background: var(--env-ink-50, #0f1726) !important;
  color: var(--env-ink-900, #f4f8ff) !important;
  border-color: var(--env-ink-300, #3a4866) !important;
}
html.dark-mode .product-settings-page .ps-filter-field input::placeholder {
  color: var(--env-ink-400, #94a3b8) !important;
}
html.dark-mode .product-settings-page .ps-filter-toolbar-btn {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-300, #3a4866) !important;
  color: var(--env-ink-700, #e8eef6) !important;
}
html.dark-mode .product-settings-page .ps-filter-toolbar-btn:hover {
  border-color: var(--env-blue-500, #60a5fa) !important;
  color: var(--env-blue-300, #93c5fd) !important;
}
html.dark-mode .product-settings-page .ps-filter-toolbar-btn[data-primary="true"],
html.dark-mode .product-settings-page .ps-filter-toolbar-btn.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Tablo wrap + header + boş durum */
html.dark-mode .product-settings-page .ps-products-table-wrap {
  background: var(--env-ink-100, #18253b) !important;
  border-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .ps-products-table thead th {
  background: var(--env-ink-50, #0f1726) !important;
  color: var(--env-ink-400, #94a3b8) !important;
  border-bottom-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .ps-products-table tbody td {
  color: var(--env-ink-700, #e8eef6) !important;
  border-bottom-color: var(--env-ink-200, #243049) !important;
}
html.dark-mode .product-settings-page .ps-products-table tbody td .small,
html.dark-mode .product-settings-page .ps-products-table tbody td small,
html.dark-mode .product-settings-page .ps-products-table tbody td .text-muted {
  color: var(--env-ink-500, #cbd5e1) !important;
}

/* Empty state mesajı */
html.dark-mode .product-settings-page .table-empty,
html.dark-mode .product-settings-page .ps-table-empty,
html.dark-mode .product-settings-page #productsTbody tr td[colspan] {
  color: var(--env-ink-500, #cbd5e1) !important;
}

/* Pagination */
html.dark-mode .product-settings-page .pagination .page-link,
html.dark-mode .product-settings-page .pagination button {
  background: var(--env-ink-100, #18253b) !important;
  color: var(--env-ink-700, #e8eef6) !important;
  border-color: var(--env-ink-300, #3a4866) !important;
}
html.dark-mode .product-settings-page .pagination .page-item.active .page-link,
html.dark-mode .product-settings-page .pagination button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* =============================================================
   DASHBOARD (.tm-page) — light bg/card hardcoded olan ana sayfa
   ============================================================= */
html.dark-mode .tm-page,
html.dark-mode #dashboardV2,
html.dark-mode .tm-page-header,
html.dark-mode .tm-page-header__title-group {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .tm-page-header__title {
  color: var(--tm-text-primary, #f4f8ff) !important;
}
html.dark-mode .tm-page-header__subtitle {
  color: var(--tm-text-muted, #94a3b8) !important;
}

/* Dashboard tabbed bileşenleri — kart ve panel arka planları */
html.dark-mode .tm-page .action-hint,
html.dark-mode .tm-page .action-hints-panel,
html.dark-mode .tm-page .add-shortcut-card,
html.dark-mode .tm-page .alert-item,
html.dark-mode .tm-page .alert-item-dashboard,
html.dark-mode .tm-page .alerts-widget,
html.dark-mode .tm-page .dashboard-card,
html.dark-mode .tm-page .metric-card,
html.dark-mode .tm-page .stat-card,
html.dark-mode .tm-page .panel,
html.dark-mode .tm-page .widget,
html.dark-mode .tm-page > section,
html.dark-mode .tm-page > article {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}
html.dark-mode .tm-page .action-hint__headline,
html.dark-mode .tm-page .alert-item-dashboard__title,
html.dark-mode .tm-page .metric-card__title,
html.dark-mode .tm-page .stat-card__title,
html.dark-mode .tm-page .dashboard-card__title {
  color: var(--tm-text-primary, #f4f8ff) !important;
}
html.dark-mode .tm-page .action-hint__sub,
html.dark-mode .tm-page .alert-item-dashboard__sub,
html.dark-mode .tm-page .metric-card__sub,
html.dark-mode .tm-page .text-muted {
  color: var(--tm-text-muted, #94a3b8) !important;
}

/* Dashboard nav tabs — beyaz arka plan dark'a düşsün */
html.dark-mode .dashboard-primary-nav,
html.dark-mode #dashboardPrimaryNav,
html.dark-mode .dashboard-nav-tabs,
html.dark-mode .dashboard-tab-content,
html.dark-mode .dashboard-tab-pane {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5);
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   ADMIN LAYOUT — admin-page-container hardcoded gradient
   ============================================================= */
html.dark-mode .admin-page-container {
  background: linear-gradient(135deg, var(--tm-bg-primary, #0b1220) 0%, var(--tm-bg-secondary, #0f1726) 100%) !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .admin-content {
  background: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .admin-content .card,
html.dark-mode .admin-content .panel,
html.dark-mode .admin-content [class*="-card"]:not([class*="-tab"]):not([class*="-pill"]) {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}
html.dark-mode .admin-content table {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
}
html.dark-mode .admin-content table thead {
  background: var(--tm-bg-tertiary, #0c1626) !important;
  color: var(--tm-text-muted, #94a3b8) !important;
}
html.dark-mode .admin-content table tbody tr:hover {
  background: var(--tm-bg-hover, #18253b) !important;
}

/* =============================================================
   PRODUCT Q&A — inline page bg
   ============================================================= */
html.dark-mode #qa-page-container,
html.dark-mode #qa-page-container[style] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode #qa-page-container .card,
html.dark-mode #qa-page-container [class*="-card"] {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   PROFIT MARGIN PAGE — analiz wrapper
   ============================================================= */
html.dark-mode .profit-margin-page,
html.dark-mode .tmv2-analysis-root {
  background: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .profit-margin-page .card,
html.dark-mode .tmv2-analysis-root .card,
html.dark-mode .profit-margin-page [class*="-card"],
html.dark-mode .tmv2-analysis-root [class*="-card"] {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   BRAND STUDIO — brand-studio-page wrapper
   ============================================================= */
html.dark-mode .brand-studio-page {
  background: transparent !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .brand-studio-page .card,
html.dark-mode .brand-studio-page .panel,
html.dark-mode .brand-studio-page [class*="-card"]:not([class*="-tab"]) {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   GLOBAL — yaygın inline pattern'ler
   ============================================================= */

/* Sayfaya inline-style ile basılan açık gradient bg'ler */
html.dark-mode [style*="linear-gradient(135deg, #f8fafc"],
html.dark-mode [style*="linear-gradient(135deg,#f8fafc"],
html.dark-mode [style*="linear-gradient(135deg, #f1f5f9"],
html.dark-mode [style*="linear-gradient(135deg,#f1f5f9"] {
  background: linear-gradient(135deg, var(--tm-bg-primary, #0b1220) 0%, var(--tm-bg-secondary, #0f1726) 100%) !important;
}

/* Inline #f2f6fa (ürün ayarları + Q&A primary-50) */
html.dark-mode [style*="#f2f6fa"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Inline color: #1e293b / #0f172a / #1f2937 (dark text on light) */
html.dark-mode [style*="color: #1e293b"],
html.dark-mode [style*="color:#1e293b"],
html.dark-mode [style*="color: #0f172a"],
html.dark-mode [style*="color:#0f172a"],
html.dark-mode [style*="color: #1f2937"],
html.dark-mode [style*="color:#1f2937"],
html.dark-mode [style*="color: #111827"],
html.dark-mode [style*="color:#111827"] {
  color: var(--tm-text-primary, #e6ecf5) !important;
}

/* Inline color: #64748b / #94a3b8 / #6b7280 (muted) — bunlar dark'ta da
   muted tone olarak yeterli, dokunmayalım. */

/* =============================================================
   CHART / GRAPH — Chart.js canvas wrapper'ları beyaz kalmasın
   ============================================================= */
html.dark-mode .chart-container,
html.dark-mode .chart-wrapper,
html.dark-mode [class*="-chart"]:not([class*="-charts-tab"]) {
  background: var(--tm-bg-card, #111b2e) !important;
  color: var(--tm-text-primary, #e6ecf5);
}

/* =============================================================
   FORM ELEMENTS — global son çare
   ============================================================= */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input.form-control,
html.dark-mode select.form-select,
html.dark-mode textarea.form-control {
  background-color: var(--tm-bg-input, #0c1626) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538) !important;
}
html.dark-mode .form-control::placeholder,
html.dark-mode textarea.form-control::placeholder {
  color: var(--tm-text-muted, #94a3b8) !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: var(--tm-bg-input, #0c1626) !important;
  border-color: var(--tm-accent-500, #60a5fa) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  box-shadow: 0 0 0 0.2rem rgba(96,165,250,.18) !important;
}
html.dark-mode .form-label {
  color: var(--tm-text-primary, #e6ecf5);
}

/* =============================================================
   BOOTSTRAP TABLE STRIPED — dark mode satır renkleri
   ============================================================= */
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.02) !important;
  color: var(--tm-text-primary, #e6ecf5);
}
html.dark-mode .table-bordered,
html.dark-mode .table-bordered > :not(caption) > * > * {
  border-color: var(--tm-border-color, #1a2538) !important;
}

/* =============================================================
   LIST GROUPS, TABS, NAV
   ============================================================= */
html.dark-mode .list-group {
  background: transparent;
}
html.dark-mode .list-group-item {
  background: var(--tm-bg-card, #111b2e);
  color: var(--tm-text-primary, #e6ecf5);
  border-color: var(--tm-border-color, #1a2538);
}
html.dark-mode .nav-tabs {
  border-bottom-color: var(--tm-border-color, #1a2538);
}
html.dark-mode .nav-tabs .nav-link {
  color: var(--tm-text-muted, #94a3b8);
}
html.dark-mode .nav-tabs .nav-link.active {
  background: var(--tm-bg-card, #111b2e);
  color: var(--tm-text-primary, #e6ecf5);
  border-color: var(--tm-border-color, #1a2538) var(--tm-border-color, #1a2538) var(--tm-bg-card, #111b2e);
}

/* =============================================================
   BADGE / PILL — Bootstrap badge'leri renkli ama dark'a uygun
   ============================================================= */
html.dark-mode .badge.bg-light,
html.dark-mode .badge.bg-secondary {
  background-color: var(--tm-bg-tertiary, #0c1626) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
}

/* =============================================================
   PROGRESS BAR
   ============================================================= */
html.dark-mode .progress {
  background-color: var(--tm-bg-tertiary, #0c1626);
}

/* =============================================================
   CODE / PRE
   ============================================================= */
html.dark-mode pre,
html.dark-mode code,
html.dark-mode .code-block {
  background-color: var(--tm-bg-tertiary, #0c1626) !important;
  color: var(--tm-text-primary, #e6ecf5) !important;
  border-color: var(--tm-border-color, #1a2538);
}