/* ============================================================================
   DARK MODE COMPONENT OVERRIDES (audit follow-up 2026-06-11, PR #2101)
   ----------------------------------------------------------------------------
   PR #2101 base layer (body/main/sidebar/header/input token unification) PASS
   ettikten sonra screenshot review tespit etti ki COMPONENT layer hâlâ
   patlayan/parlak renkler basıyor:
     - KPI card body navy (#111b2e) → token (--color-surface)
     - KPI ic / delta up/down / livebadge light pastel bg → soft token
     - tm-vanilla-* namespace dark mode'da hep light değerleri çözüyor
     - tm-live-header/stat/pulseline light surface gösteriyor
     - tm-action-card hardcoded eski v2 hex
     - tm-action-card__icon light warning yellow patlaması
     - Progress track / fill bright pastel
   Tüm bunlar TEK dosyada, base.html sonunda yüklenecek şekilde — cascade
   sıralamasında en geç gelen, !important + selector specificity ile galip.
   Hiçbir page-specific dark CSS yazılmadı, sayfa-tarafı CSS dosyalarına
   dokunulmadı; bu dosya canonical token sistemi üzerinden component
   surface'larını normalize eder. ============================================ */

/* ============================================================
   1) KPI CARD BODY — Genel Bakış / dashboards
   --kpi-* namespace tokens light değerlere bağlı kalıyordu; dark mode'da
   canonical surface skala'sına re-bind. */
html.dark-mode {
  --kpi-ink: var(--color-text);                     /* was #0f172a */
  --kpi-ink-2: var(--color-text-muted);             /* was #475569 */
  --kpi-mute: #6b7280;                              /* was #94a3b8 */
  --kpi-line: var(--color-border);                  /* was #e7ebf1 */
  --kpi-line-strong: var(--tm-border-light);        /* was #dbe5ef */
  --kpi-primary: var(--color-primary);
  --kpi-primary-deep: var(--color-primary-hover);
  --kpi-success: var(--tm-success);
  --kpi-danger: var(--tm-error);
  --kpi-accent: var(--color-accent);
}

/* KPI card itself - kazanan navy (#111b2e) override */
html.dark-mode .kpi-card,
html.dark-mode .kpi-card.enter,
html.dark-mode .tm-kpi-card,
html.dark-mode .tmv2-kpi-card {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode .kpi-card.accent {
  /* accent KPI: soft primary tint instead of solid bright surface */
  background-color: var(--color-surface) !important;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

/* KPI sub-elements — light pastel bg & dark text — explosive in dark mode */
html.dark-mode .kpi-ic {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
}
html.dark-mode .kpi-card.accent .kpi-ic {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text) !important;
}
html.dark-mode .kpi-label {
  color: var(--color-text-muted) !important;        /* was #1e293b dark on dark */
}
html.dark-mode .kpi-info:hover {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

/* KPI delta pills — pastel patlayan: soft semantic surfaces */
html.dark-mode .kpi-delta.up {
  background: rgba(74, 222, 128, 0.16) !important;    /* was #dcfce7 */
  color: var(--tm-success) !important;                 /* was #15803d */
}
html.dark-mode .kpi-delta.down {
  background: rgba(248, 113, 113, 0.16) !important;   /* was #fee2e2 */
  color: var(--tm-error) !important;                   /* was #b91c1c */
}
html.dark-mode .kpi-livebadge {
  background: rgba(248, 113, 113, 0.16) !important;   /* was #fee2e2 */
  color: var(--tm-error) !important;                   /* was #b91c1c */
}

/* KPI dot end (sparkline) — beyaz border patlaması */
html.dark-mode .kpi-dot {
  border-color: var(--color-surface) !important;      /* was #fff */
  box-shadow: 0 0 0 3px rgba(58, 136, 229, 0.18) !important;
}
html.dark-mode .kpi-card.accent .kpi-dot {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

/* KPI spark area-fill — chart altındaki parlak glow azaltıldı */
html.dark-mode .kpi-spark-area {
  opacity: 0.55 !important;                            /* was 1 */
}

/* ============================================================
   2) tm-vanilla-* NAMESPACE — dashboard-vanilla.css'te sadece light
   tanımlı. Dark mode'da canonical surface'a re-bind. */
html.dark-mode {
  --tm-vanilla-surface: var(--color-surface);            /* was #ffffff */
  --tm-vanilla-surface-soft: var(--color-surface-alt);   /* was #f8fafc */
  --tm-vanilla-border: var(--color-border);              /* was #dbe3ee */
  --tm-vanilla-border-strong: var(--tm-border-light);    /* was #c9d4e1 */
  --tm-vanilla-text: var(--color-text);                  /* was #182433 */
  --tm-vanilla-faint: var(--color-text-muted);           /* was #8c97a7 */
}

/* Canlı Performans — live header/stat/pulseline surface override */
html.dark-mode .tm-live-page .tm-live-header,
html.dark-mode .tm-live-header {
  background-color: var(--color-surface-alt) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
}
html.dark-mode .tm-live-page .tm-live-stat,
html.dark-mode .tm-live-page .tm-live-status,
html.dark-mode .tm-live-page .tm-live-select,
html.dark-mode .tm-live-page .tm-btn,
html.dark-mode .tm-live-pulseline {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
}
html.dark-mode .tm-live-stat__label,
html.dark-mode .tm-live-pulseline .label {
  color: var(--color-text-muted) !important;
}
html.dark-mode .tm-live-stat__value {
  color: var(--color-text) !important;
}

/* ============================================================
   3) ACTION CARD — Canlı Performans sağ panel "Öncelikli Aksiyonlar" */
html.dark-mode .tm-action-card,
html.dark-mode .tm-action-card--warning,
html.dark-mode .tm-action-card--danger,
html.dark-mode .tm-action-card--info,
html.dark-mode .tm-action-card--success {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
}
/* Action icon — light pastel patlamaları */
html.dark-mode .tm-action-card__icon {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}
html.dark-mode .tm-action-card--warning .tm-action-card__icon {
  background: rgba(251, 191, 36, 0.16) !important;     /* was #fef3c7 */
  color: var(--tm-warning) !important;
}
html.dark-mode .tm-action-card--danger .tm-action-card__icon {
  background: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}
html.dark-mode .tm-action-card--success .tm-action-card__icon {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode .tm-action-card--info .tm-action-card__icon {
  background: rgba(58, 136, 229, 0.16) !important;
  color: var(--color-primary) !important;
}
html.dark-mode .tm-action-card__badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text) !important;
}
html.dark-mode .tm-action-card__title {
  color: var(--color-text) !important;
}
html.dark-mode .tm-action-card__chevron {
  color: var(--color-text-muted) !important;
}

/* ============================================================
   4) PROGRESS BARS — Top ürün listesi vb. parlak/beyaz track + neon fill
   Bootstrap default progress + custom progress patterns. */
html.dark-mode .progress,
html.dark-mode .tm-progress,
html.dark-mode .progress-track,
html.dark-mode [class*="progress-track"] {
  background-color: var(--color-surface-alt) !important;
  background-image: none !important;
  --bs-progress-bg: var(--color-surface-alt) !important;
}
/* Bootstrap progress-bar fill: tone down neon */
html.dark-mode .progress-bar {
  background-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-bg)) !important;
}
/* Custom segmented progress fills - top products bar */
html.dark-mode .progress > .progress-bar,
html.dark-mode [class*="top-product"] .progress-bar,
html.dark-mode [class*="product-list"] .progress-bar {
  background-image: none !important;
  filter: saturate(0.85);
}

/* ============================================================
   5) CANLI/LIVE BADGES — sidebar pulse + page-level live indicators */
html.dark-mode .tm-nav-live__pulse,
html.dark-mode [class*="live-badge"]:not([class*="kpi-livebadge"]),
html.dark-mode [class*="live-pulse"] {
  background: var(--tm-error) !important;
  /* keep pulse red but reduce glow */
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55) !important;
}
html.dark-mode .tm-canli-badge,
html.dark-mode [class*="canli-badge"] {
  background: rgba(248, 113, 113, 0.18) !important;
  color: var(--tm-error) !important;
  border: 1px solid rgba(248, 113, 113, 0.32) !important;
}

/* ============================================================
   6) TOP PRODUCTS / SIDEBAR LIST — list item rows */
html.dark-mode [class*="top-products"] .list-item,
html.dark-mode [class*="top-product"] .item,
html.dark-mode .product-list-item,
html.dark-mode [class*="ranking-row"] {
  background-color: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ============================================================
   7) DROPDOWN / DATE PICKER / FLOATING SURFACES */
html.dark-mode .dropdown-menu,
html.dark-mode .tm-dropdown,
html.dark-mode .date-range-picker,
html.dark-mode .tm-popover {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
  color: var(--color-text);
}

/* ============================================================
   8) FORMS — select/textarea/input passive states (safety net) */
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-select,
html.dark-mode .form-control {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
html.dark-mode select option {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   9) GLOBAL SAFETY NET — bg-white & text-white & light pastel pills
   Tailwind/Bootstrap utility class'lar dark mode'da patlamasın */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
  background-color: var(--color-surface) !important;
  background-image: none !important;
}
/* text-white preserved (intentional) */
html.dark-mode .text-gray-900 { color: var(--color-text) !important; }
html.dark-mode .text-gray-800 { color: var(--color-text) !important; }
html.dark-mode .text-gray-700 { color: var(--color-text-muted) !important; }
html.dark-mode .text-gray-600 { color: var(--color-text-muted) !important; }
html.dark-mode .text-gray-500 { color: #6b7280 !important; }
html.dark-mode .text-gray-400 { color: #6b7280 !important; }

/* ============================================================
   2.b) tm-kpi-v3 NAMESPACE (tm-handoff-kpi-2026-06-08.css)
   Bu dosya `html body .tm-kpi-v3 .tm-kpi-v3__delta--up` gibi (0,3,2)
   specificity ile light pastel basıyor. Aynı specificity + html.dark-mode
   prefix ile beat. */
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__delta--up {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__delta--down {
  background: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__delta--flat {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text-muted) !important;
}
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__icon,
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__icon svg,
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__icon i {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   3.b) tm-action-card__icon — #tmLivePerformancePage ID-bumped overrides
   live-dashboard.css:2081-2082 specificity (1,4,1). Aynı specificity + .dark-mode. */
html.dark-mode #tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--critical .tm-action-card__icon,
html.dark-mode #tmLivePerformancePage .tm-action-card[data-severity="critical"] .tm-action-card__icon {
  background: rgba(248, 113, 113, 0.16) !important;       /* was #fee2e2 */
  color: var(--tm-error) !important;                       /* was #dc2626 */
}
html.dark-mode #tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--warning .tm-action-card__icon,
html.dark-mode #tmLivePerformancePage .tm-action-card[data-severity="warning"] .tm-action-card__icon {
  background: rgba(251, 191, 36, 0.16) !important;        /* was #fef3c7 */
  color: var(--tm-warning) !important;                     /* was #b45309 */
}
html.dark-mode #tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__icon {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
}

/* ============================================================
   10) NEUTRAL TOKEN ALIAS NAMING (CEO-spec request) — geri uyumluluk
   için yeni token isimleri canonical token'a alias. */
html.dark-mode {
  --tm-bg: var(--color-bg);
  --tm-bg-soft: #080a0d;                              /* between bg & surface */
  --tm-surface: var(--color-surface);
  --tm-surface-2: var(--color-surface-alt);
  --tm-surface-3: #151b24;
  --tm-border: var(--color-border);
  --tm-border-soft: #1b222c;
  --tm-text: var(--color-text);
  --tm-text-soft: #6b7280;
}

/* ===========================================================================
   PR #2101 — VISUAL POLISH ROUND 2 (2026-06-11 follow-up #3)
   Visual acceptance probe (probe_visual.cjs) tespit etti — bright surfaces
   (luminance > 0.65), navy hardcoded sidebar items, white #fff literals,
   pastel komisyon surfaces, solid warning badges. Hepsi token + soft semantic. */

/* ============================================================
   11) SIDEBAR MODERNIZATION — sidebar-panel.css:1850+ hardcoded navy
   `rgba(30,41,59,0.94)` nav items + bright primary active fill kullanıcı
   "sidebar hâlâ eski lacivert" şikayetinin ana kaynağı. ID-bumped specificity
   ile beat. */
html.dark-mode #sidebar,
html.dark-mode .sidebar,
html.dark-mode .sidebar.sidebar--v2-host {
  background-color: var(--tm-bg-soft) !important;
  background-image: none !important;
}
html.dark-mode #sidebar .sidebar-header,
html.dark-mode .sidebar .sidebar-header {
  background-color: var(--tm-bg-soft) !important;
  border-color: var(--color-border) !important;
}
/* Default nav item — transparent, NOT navy */
html.dark-mode #sidebar .nav-link:not(.active),
html.dark-mode #sidebar .tmv2-nav-item:not(.active) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
}
/* Hover — soft surface-2 */
html.dark-mode #sidebar .nav-link:hover:not(.active),
html.dark-mode #sidebar .tmv2-nav-item:hover:not(.active) {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}
/* Active — surface elevated + left primary accent stripe (NOT full blue fill) */
html.dark-mode #sidebar .nav-link.active,
html.dark-mode #sidebar .tmv2-nav-item.active {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-left: 3px solid var(--color-primary) !important;
  padding-left: calc(var(--tm-page-pad, 12px) - 3px);
  box-shadow: none !important;
}
/* Group header (Raporlar / Kampanya & Komisyon) */
html.dark-mode #sidebar .nav-group-header:not(.admin-accordion) {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: none !important;
}
html.dark-mode #sidebar .nav-group-header:hover:not(.admin-accordion) {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}
html.dark-mode #sidebar .nav-group.expanded .nav-group-header:not(.admin-accordion) {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
}
/* Sublink */
html.dark-mode #sidebar .nav-sublink:not(.active):not(.pia-sidebar-cta) {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: none !important;
}
html.dark-mode #sidebar .nav-sublink:hover:not(.active):not(.pia-sidebar-cta) {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
}
html.dark-mode #sidebar .nav-sublink.active {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: 0 !important;
}
/* Logout */
html.dark-mode #sidebar .nav-link.logout:not(:hover) {
  background: transparent !important;
  color: var(--tm-error) !important;
}
html.dark-mode #sidebar .nav-link.logout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--tm-error) !important;
}
/* Sidebar section labels (GENEL, ÜRÜN, etc.) */
html.dark-mode #sidebar .tmv2-nav-section-label,
html.dark-mode #sidebar .sidebar-section-label,
html.dark-mode .tmv2-sidebar-nav > .label {
  color: var(--color-text-muted) !important;
  opacity: 0.8;
}
/* Sidebar scrollbar */
html.dark-mode #sidebar .sidebar-nav::-webkit-scrollbar-track {
  background: var(--tm-bg-soft) !important;
}
html.dark-mode #sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-border) !important;
}
html.dark-mode #sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--tm-border-light) !important;
}
/* Store / Demo Mağaza box — sidebar üst */
html.dark-mode #sidebar [class*="store-info"],
html.dark-mode #sidebar [class*="store-card"],
html.dark-mode #sidebar [class*="store-box"],
html.dark-mode #sidebar .demo-magaza,
html.dark-mode .tmv2-store-card,
html.dark-mode .tmv2-store-info {
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
/* Pro plan CTA — sidebar alt, soft primary tint instead of bright */
html.dark-mode .tmv2-pro-cta,
html.dark-mode #sidebar [class*="pro-cta"],
html.dark-mode #sidebar [class*="pro-plan"],
html.dark-mode #sidebar [class*="upgrade"],
html.dark-mode #sidebar .pia-sidebar-cta {
  background: linear-gradient(135deg, rgba(58, 136, 229, 0.18) 0%, var(--color-surface) 100%) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid rgba(58, 136, 229, 0.28) !important;
  color: var(--color-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================================
   12) HARDCODED NAVY OVERRIDES — `rgba(30, 41, 59, ...)` (#1e293b) hâlâ
   sidebar dışı yerlerde de basıyor (orders tab, tabbed-page, saas-shell).
   Layout surface'ları neutralize. */
html.dark-mode .filterbar,
html.dark-mode .dashboard-filter-bar,
html.dark-mode .tm-dashboard-toolbar,
html.dark-mode .dashboard-tabbed-toolbar {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   13) WHITE LITERAL HUNTER — `#fff` / `#ffffff` / `bg-white` utility classes
   layout surface olarak dark mode'da yasak (text-white text rengi olarak kalır). */
html.dark-mode .tm-actions-overflow__body,
html.dark-mode div.search,
html.dark-mode .qa-summary,
html.dark-mode #stats-container.qa-summary,
html.dark-mode .qa-filter-chip,
html.dark-mode .qa-filter-chip.active,
html.dark-mode #tableToggleBtn,
html.dark-mode .btn.btn-secondary:not(:hover):not(:active):not(:focus),
html.dark-mode .btn.btn-outline-secondary:not(:hover):not(:active):not(:focus),
html.dark-mode .btn-secondary:not(.btn-secondary--accent),
html.dark-mode .btn-outline-secondary {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
html.dark-mode .btn.btn-secondary:hover,
html.dark-mode .btn.btn-outline-secondary:hover {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--tm-border-light) !important;
}
/* qa-filter-chip active state should be subtle primary tint */
html.dark-mode .qa-filter-chip.active {
  background-color: rgba(58, 136, 229, 0.18) !important;
  color: var(--color-primary) !important;
  border-color: rgba(58, 136, 229, 0.32) !important;
}

/* ============================================================
   14) KOMISYON PASTEL SURFACES — `#f4f6fb`, `#f3f4f6`, `#e5e7eb` light gray
   utility surfaces dark mode'da yüzey olarak yasak. */
html.dark-mode .commission-percentage {
  background: rgba(251, 191, 36, 0.14) !important;
  color: var(--tm-warning) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
}
html.dark-mode .toggle-slider {
  background: var(--color-surface-alt) !important;
}
html.dark-mode .toggle-slider:before {
  background: var(--color-text) !important;
}
html.dark-mode .detail-value,
html.dark-mode .cost-badge {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   15) tm-kpi-v3 multi-class — earlier override (0,3,2) was matched by source.
   Bump with body[class] to (0,3,3) and add ID-specific safety for all .tm-kpi-v3__delta*. */
html.dark-mode body[class] .tm-kpi-v3 .tm-kpi-v3__delta--up,
html.dark-mode body[class] .tm-kpi-v3 .tm-kpi-v3__delta.tm-kpi-v3__delta--up,
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__delta.tm-kpi-v3__delta--flat.tm-kpi-v3__delta--up,
html.dark-mode body[id] .tm-kpi-v3 .tm-kpi-v3__delta--up {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode body[class] .tm-kpi-v3 .tm-kpi-v3__delta--down,
html.dark-mode body[class] .tm-kpi-v3 .tm-kpi-v3__delta.tm-kpi-v3__delta--down,
html.dark-mode body .tm-kpi-v3 .tm-kpi-v3__delta.tm-kpi-v3__delta--flat.tm-kpi-v3__delta--down,
html.dark-mode body[id] .tm-kpi-v3 .tm-kpi-v3__delta--down {
  background: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}
html.dark-mode body[class] .tm-kpi-v3 .tm-kpi-v3__delta--flat,
html.dark-mode body[id] .tm-kpi-v3 .tm-kpi-v3__delta--flat {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text-muted) !important;
}
/* Universal — any v3 delta should never be light pastel in dark */
html.dark-mode .tm-kpi-v3__delta[id] {
  background: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode .tm-kpi-v3__delta[id].tm-kpi-v3__delta--up,
html.dark-mode [id*="-change-badge"].tm-kpi-v3__delta--up,
html.dark-mode [id*="-change-badge"].tm-kpi-v3__delta {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode .tm-kpi-v3__delta[id].tm-kpi-v3__delta--down,
html.dark-mode [id*="-change-badge"].tm-kpi-v3__delta--down {
  background: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}

/* ============================================================
   16) SOLID WARNING/STATUS BADGES — `.badge.rounded-pill` orange (#f59e0b)
   patlak kullanıcının "badge fazla parlak" şikayeti. Solid → soft semantic. */
html.dark-mode .badge.rounded-pill.bg-warning,
html.dark-mode .badge.rounded-pill[class*="warning"],
html.dark-mode .badge.bg-warning {
  background-color: rgba(251, 191, 36, 0.16) !important;
  color: var(--tm-warning) !important;
}
html.dark-mode .badge.rounded-pill.bg-danger,
html.dark-mode .badge.bg-danger {
  background-color: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}
html.dark-mode .badge.rounded-pill.bg-success,
html.dark-mode .badge.bg-success {
  background-color: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode .badge.rounded-pill.bg-info,
html.dark-mode .badge.bg-info {
  background-color: rgba(58, 136, 229, 0.16) !important;
  color: var(--color-primary) !important;
}
html.dark-mode .badge.rounded-pill.bg-primary {
  background-color: rgba(58, 136, 229, 0.18) !important;
  color: var(--color-primary) !important;
}
/* ana-badge demo (Analiz) */
html.dark-mode .ana-badge.ana-badge--demo {
  background: rgba(251, 191, 36, 0.16) !important;
  color: var(--tm-warning) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
}
/* buybox v2 KPI delta — bb-v2-kpi__delta--up was white overlay */
html.dark-mode .bb-v2-kpi__delta--up {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode .bb-v2-kpi__delta--down {
  background: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}
html.dark-mode [id*="filter-count"].count {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-muted) !important;
}

/* ============================================================
   17) INPUT FOCUS POLISH — global soft primary ring (no white outline) */
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  outline: none !important;
  border-color: rgba(58, 136, 229, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(58, 136, 229, 0.18) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode .form-control::placeholder {
  color: #7b8492 !important;
  opacity: 1;
}
/* tm-search-input native search */
html.dark-mode .tmv2-search__input,
html.dark-mode .tm-search-input {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   18) KPI GLOW/GRADIENT — kart altı parlak shine azalt */
html.dark-mode .kpi-card,
html.dark-mode .tm-kpi-card,
html.dark-mode .tm-kpi-v3 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .kpi-card::after,
html.dark-mode .tm-kpi-card::after,
html.dark-mode .tm-kpi-v3::after {
  opacity: 0.35 !important;
  filter: saturate(0.7);
}
/* Spark area glow azalt */
html.dark-mode .kpi-spark-area,
html.dark-mode .tm-kpi-v3 .tm-kpi-v3__spark-area,
html.dark-mode .tm-kpi-v3__chart svg [class*="area"] {
  opacity: 0.45 !important;
}

/* ============================================================
   19) PROGRESS TRACK SAFETY NET — wide selector to neutralize bright tracks */
html.dark-mode .progress,
html.dark-mode .tm-progress,
html.dark-mode [class*="progress-track"],
html.dark-mode .bar-track,
html.dark-mode [class*="bar-track"],
html.dark-mode .product-bar,
html.dark-mode [class*="product-bar"],
html.dark-mode [class*="top-product"] .progress,
html.dark-mode [class*="top-product"] [class*="bar"] {
  background-color: var(--tm-surface-3, #151b24) !important;
  background-image: none !important;
  --bs-progress-bg: var(--tm-surface-3, #151b24) !important;
}
/* Progress fill: keep color but reduce saturation */
html.dark-mode .progress-bar,
html.dark-mode .progress > .progress-bar,
html.dark-mode [class*="bar-fill"] {
  filter: saturate(0.82) brightness(0.92);
}

/* ============================================================
   20) MUTED TEXT READABILITY — bump to #a1a8b3 for stronger contrast */
html.dark-mode {
  --tm-text-muted: #a1a8b3;             /* override from #9ca3af for readability */
}
html.dark-mode .text-muted,
html.dark-mode .tm-text-muted,
html.dark-mode small.text-secondary,
html.dark-mode .form-text,
html.dark-mode .helper-text,
html.dark-mode .tm-helper {
  color: var(--tm-text-muted) !important;
}
/* Tailwind gray-500 (very low contrast was) */
html.dark-mode .text-gray-500 { color: #9ca3af !important; }

/* ============================================================
   21) TABLE / FILTERBAR — ensure neutral, soft separators */
html.dark-mode table,
html.dark-mode .table,
html.dark-mode .data-table {
  --bs-table-bg: var(--color-surface) !important;
  --bs-table-color: var(--color-text) !important;
  --bs-table-border-color: var(--color-border) !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
  color: var(--color-text);
}
html.dark-mode table th,
html.dark-mode .table th,
html.dark-mode .table thead th {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}
html.dark-mode table tr:hover td,
html.dark-mode .table tr:hover td {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

/* ============================================================
   22) GLOW/GLASS REDUCTION — fancy shadows / glass with light rgba
   azalt; ekran parlamasın */
html.dark-mode [style*="box-shadow"][style*="255, 255, 255"],
html.dark-mode .glass-effect,
html.dark-mode [class*="glow"]:not(.tm-nav-live__pulse) {
  box-shadow: none !important;
}

/* ===========================================================================
   PR #2101 — VISUAL POLISH ROUND 4 (specificity bumps for residual offenders)
   probe_visual.cjs sonrası 7 residual selector kaldı; ID-bumped specificity
   ve attribute selectors ile her birini target ediyoruz. */

/* 23) Komisyon — `.app-container .commission-percentage` source specificity
   (0,2,1). Beat with same+more. */
html.dark-mode body .app-container .commission-percentage,
html.dark-mode body .app-container .cost-badge,
html.dark-mode #tmv2App .app-container .commission-percentage,
html.dark-mode #tmv2App .app-container .cost-badge {
  background: rgba(251, 191, 36, 0.16) !important;
  background-image: none !important;
  color: var(--tm-warning) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
}
html.dark-mode body .app-container .detail-value,
html.dark-mode #tmv2App .app-container .detail-value {
  background: var(--color-surface-alt) !important;
  background-image: none !important;
  color: var(--color-text) !important;
}

/* 24) Tailwind `.bg-white` + utility combo on komisyon `.px-2.py-1`
   Possibly inline-styled or .bg-white not on element directly */
html.dark-mode .px-2.py-1[style*="background"],
html.dark-mode span.px-2.py-1,
html.dark-mode .app-container span.px-2.py-1 {
  background-color: var(--color-surface-alt) !important;
  background-image: none !important;
  color: var(--color-text) !important;
}

/* 25) #tableToggleBtn komisyon button - explicit ID + attribute */
html.dark-mode #tableToggleBtn,
html.dark-mode button#tableToggleBtn,
html.dark-mode #tableToggleBtn.btn,
html.dark-mode #tableToggleBtn.btn-secondary,
html.dark-mode #tableToggleBtn.btn.btn-secondary,
html.dark-mode .app-container #tableToggleBtn {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* 26) tm-kpi-v3 delta — IDs catch-all (revenue/profit/margin/orders-change-badge)
   These have IDs and multi-class `--flat` + `--up`/`--down`. */
html.dark-mode #revenue-change-badge,
html.dark-mode #profit-change-badge,
html.dark-mode #margin-change-badge,
html.dark-mode #orders-change-badge,
html.dark-mode #refund-change-badge,
html.dark-mode #returns-change-badge,
html.dark-mode [id$="-change-badge"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  color: var(--color-text-muted) !important;
}
html.dark-mode [id$="-change-badge"].tm-kpi-v3__delta--up {
  background-color: rgba(74, 222, 128, 0.16) !important;
  color: var(--tm-success) !important;
}
html.dark-mode [id$="-change-badge"].tm-kpi-v3__delta--down {
  background-color: rgba(248, 113, 113, 0.16) !important;
  color: var(--tm-error) !important;
}

/* 26.b) v3 delta — source has (0,3,2) so we need (0,4,2)+. Use body[class] +
   ID + class triple-bump. */
html.dark-mode body[class] #profit-change-badge.tm-kpi-v3__delta--up,
html.dark-mode body[class] #profit-change-badge.tm-kpi-v3__delta,
html.dark-mode body[class] #orders-change-badge.tm-kpi-v3__delta--up,
html.dark-mode body[class] #orders-change-badge.tm-kpi-v3__delta,
html.dark-mode body[class] #revenue-change-badge.tm-kpi-v3__delta--up,
html.dark-mode body[class] #revenue-change-badge.tm-kpi-v3__delta {
  background-color: rgba(74, 222, 128, 0.16) !important;
  background-image: none !important;
  color: var(--tm-success) !important;
}
html.dark-mode body[class] #profit-change-badge.tm-kpi-v3__delta--down,
html.dark-mode body[class] #orders-change-badge.tm-kpi-v3__delta--down,
html.dark-mode body[class] #margin-change-badge.tm-kpi-v3__delta--up,
html.dark-mode body[class] #margin-change-badge.tm-kpi-v3__delta--down,
html.dark-mode body[class] #margin-change-badge.tm-kpi-v3__delta,
html.dark-mode body[class] #revenue-change-badge.tm-kpi-v3__delta--down {
  background-color: rgba(248, 113, 113, 0.16) !important;
  background-image: none !important;
  color: var(--tm-error) !important;
}

/* 26.c) Tailwind utility-class bright surface — `.px-2.py-1` with explicit
   bg-white inline or implicit white. Catch via grandparent app-container
   + tag. */
html.dark-mode .app-container span.px-2.py-1,
html.dark-mode .app-container .px-2.py-1,
html.dark-mode #tmv2App .app-container .px-2.py-1,
html.dark-mode body .app-container span.px-2,
html.dark-mode [class~="px-2"][class~="py-1"]:not(.bg-warning):not(.bg-danger):not(.bg-success):not(.bg-info):not(.bg-primary) {
  background-color: var(--color-surface-alt) !important;
  background-image: none !important;
  color: var(--color-text) !important;
}

/* 27) Sidebar active fallback — earlier override might lose specificity. ID-bump. */
html.dark-mode #sidebar .tmv2-nav-item.active,
html.dark-mode #sidebar a.tmv2-nav-item.nav-link.active,
html.dark-mode .sidebar.sidebar--v2-host .tmv2-nav-item.active {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  color: var(--color-primary) !important;
  border-left: 3px solid var(--color-primary) !important;
}