/* ========================================
   DARK MODE - GECE MODU STİLLERİ
   Trendmetrik için kapsamlı dark theme
   ======================================== */

/* ===== DARK MODE CSS VARIABLES ===== */
html.dark-mode {
  /* Aksent rengi — Linear/Stripe mavi tint (dark mode opacity'li versiyonlar) */
  --tm-accent-50:  rgba(1, 117, 228, 0.08);
  --tm-accent-100: rgba(1, 117, 228, 0.14);
  --tm-accent-200: rgba(1, 117, 228, 0.35);
  --tm-accent-500: #60a5fa;
  --tm-accent-600: #93c5fd;
  --tm-accent-700: #bfdbfe;
  --tm-accent-bar: #3b82f6;

  /* Ana arka plan renkleri (theme-variables ile hizalı) */
  --dm-bg-primary: var(--tm-bg-primary);
  --dm-bg-secondary: var(--tm-bg-secondary);
  --dm-bg-tertiary: var(--tm-bg-tertiary);
  --dm-bg-card: var(--tm-bg-card);
  --dm-bg-hover: var(--tm-bg-hover);
  --dm-bg-input: var(--tm-bg-input);
  
  /* Metin renkleri */
  --dm-text-primary: var(--tm-text-primary);
  --dm-text-secondary: var(--tm-text-secondary);
  --dm-text-muted: var(--tm-text-muted);
  --dm-text-inverse: var(--tm-text-inverse);
  
  /* Border renkleri */
  --dm-border-color: var(--tm-border-color);
  --dm-border-light: var(--tm-border-light);
  --dm-border-dark: var(--tm-border-dark);
  
  /* Gölgeler */
  --dm-shadow-sm: var(--tm-shadow-sm);
  --dm-shadow: var(--tm-shadow-md);
  --dm-shadow-lg: var(--tm-shadow-lg);
  
  /* Bootstrap overrides */
  --bs-body-bg: var(--tm-bg-primary);
  --bs-body-color: var(--tm-text-primary);
  --bs-border-color: var(--tm-border-color);
  --bs-tertiary-bg: var(--tm-bg-card);
  --bs-secondary-bg: var(--tm-bg-tertiary);
  --bs-light: var(--tm-bg-card);
  --bs-dark: var(--tm-text-primary);
  
  /* design-system.css — butonlar tema renklerini kullansın */
  --primary-500: var(--color-primary);
  --primary-600: var(--color-primary-hover);
  --accent-500: var(--color-accent);
  --accent-600: var(--color-accent-hover);
  
  /* Design System overrides */
  --secondary-50: var(--tm-bg-card);
  --secondary-100: var(--tm-bg-tertiary);
  --secondary-200: var(--tm-border-light);
  --neutral-50: var(--tm-bg-card);
  --neutral-100: var(--tm-bg-tertiary);
}

html.dark-mode .btn-primary,
html.dark-mode .btn-accent {
  color: var(--tm-text-on-primary) !important;
}

/* ===== GENEL BODY VE ARKA PLAN ===== */
html.dark-mode body {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .main-content {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

/* Main Content ID Override - Inline style'ları override etmek için */
html.dark-mode #mainContent {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* Main element override - Tüm main elementleri için */
html.dark-mode main#mainContent {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* XML Sources sayfası için main-content override - JavaScript inline style'ları override etmek için */
html.dark-mode .xml-sources-page ~ .main-content,
html.dark-mode .xml-sources-page + .main-content,
html.dark-mode body:has(.xml-sources-page) .main-content,
html.dark-mode body .xml-sources-page ~ .main-content,
html.dark-mode body .xml-sources-page + .main-content,
html.dark-mode .main-content[style*="#f2f6fa"],
html.dark-mode .main-content[style*="#f2f6fa"],
html.dark-mode [class*="main-content"][style*="#f2f6fa"],
html.dark-mode [class*="main-content"][style*="#f2f6fa"],
html.dark-mode #mainContent:has(.xml-sources-page),
html.dark-mode main#mainContent:has(.xml-sources-page),
html.dark-mode .main-content:has(.xml-sources-page),
html.dark-mode div.main-content:has(.xml-sources-page) {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
  background-image: none !important;
}

/* XML fiyatlandırma / ekleme: sayfa stack şeffaf; kartlar ve .page-shell yüzey verir */
html.dark-mode .pricing-page,
html.dark-mode .xml-upload-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* XML Upload Page - Inline style override (daha güçlü selector'ler) */
html.dark-mode div.xml-upload-page[style*="#f2f6fa"],
html.dark-mode div.xml-upload-page[style*="#f2f6fa"],
html.dark-mode div.xml-upload-page[style*="background"],
html.dark-mode div.xml-upload-page[style*="background-color"],
html.dark-mode .xml-upload-page[style*="background: #f2f6fa"],
html.dark-mode .xml-upload-page[style*="background-color: #f2f6fa"],
html.dark-mode .xml-upload-page[style*="background:#f2f6fa"],
html.dark-mode .xml-upload-page[style*="background-color:#f2f6fa"] {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

html.dark-mode .main-content:has(.xml-upload-page),
html.dark-mode #mainContent:has(.xml-upload-page),
html.dark-mode main:has(.xml-upload-page),
html.dark-mode body:has(.xml-upload-page) .main-content,
html.dark-mode body:has(.xml-upload-page) #mainContent {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.dark-mode .xml-upload-page .container-fluid,
html.dark-mode .xml-upload-page .container-fluid.py-1,
html.dark-mode .xml-upload-page .container-fluid.px-2,
html.dark-mode .xml-upload-page .container-fluid.px-md-2,
html.dark-mode .xml-upload-page .container-fluid[class*="py-1"],
html.dark-mode .xml-upload-page .container-fluid[class*="px-2"],
html.dark-mode .xml-upload-page .container-fluid[style*="#f2f6fa"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* XML Sources Page Override - XML kaynakları listesi sayfası için */
html.dark-mode .xml-sources-page {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* XML Sources Page - Inline style override (daha güçlü selector'ler) */
html.dark-mode div.xml-sources-page[style*="#f2f6fa"],
html.dark-mode div.xml-sources-page[style*="#f2f6fa"],
html.dark-mode div.xml-sources-page[style*="background"],
html.dark-mode div.xml-sources-page[style*="background-color"],
html.dark-mode .xml-sources-page[style*="background: #f2f6fa"],
html.dark-mode .xml-sources-page[style*="background-color: #f2f6fa"],
html.dark-mode .xml-sources-page[style*="background:#f2f6fa"],
html.dark-mode .xml-sources-page[style*="background-color:#f2f6fa"] {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* XML Sources Page - Parent div override */
html.dark-mode .main-content:has(.xml-sources-page),
html.dark-mode #mainContent:has(.xml-sources-page),
html.dark-mode main:has(.xml-sources-page),
html.dark-mode body:has(.xml-sources-page) .main-content,
html.dark-mode body:has(.xml-sources-page) #mainContent {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* INLINE STYLE OVERRIDES - FORCE */
html.dark-mode [style*="background: #f2f6fa"],
html.dark-mode [style*="background-color: #f2f6fa"],
html.dark-mode [style*="background:#f2f6fa"],
html.dark-mode [style*="background-color:#f2f6fa"],
html.dark-mode [style*="background: #f2f6fa"],
html.dark-mode [style*="background-color: #f2f6fa"],
html.dark-mode [style*="background:#f2f6fa"],
html.dark-mode [style*="background-color:#f2f6fa"],
html.dark-mode [style*="background: #f2f6fa !important"],
html.dark-mode [style*="background-color: #f2f6fa !important"],
html.dark-mode [style*="background:#f2f6fa !important"],
html.dark-mode [style*="background-color:#f2f6fa !important"],
html.dark-mode [style*="background: #f2f6fa !important"],
html.dark-mode [style*="background-color: #f2f6fa !important"],
html.dark-mode [style*="background:#f2f6fa !important"],
html.dark-mode [style*="background-color:#f2f6fa !important"],
html.dark-mode .pricing-page[style*="background"],
html.dark-mode .pricing-page[style*="background-color"],
html.dark-mode .xml-upload-page[style*="background"],
html.dark-mode .xml-upload-page[style*="background-color"],
html.dark-mode .xml-upload-page .container-fluid[style*="background"],
html.dark-mode .xml-upload-page .container-fluid[style*="background-color"],
html.dark-mode .xml-sources-page[style*="background"],
html.dark-mode .xml-sources-page[style*="background-color"],
html.dark-mode div[class*="xml-upload-page"][style*="background"],
html.dark-mode div[class*="xml-upload-page"][style*="background-color"],
html.dark-mode div[class*="xml-sources-page"][style*="background"],
html.dark-mode div[class*="xml-sources-page"][style*="background-color"] {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

html.dark-mode [style*="background: white"],
html.dark-mode [style*="background-color: white"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background-color: #ffffff"] {
  background: var(--tm-bg-card) !important;
}

html.dark-mode [style*="background: #f8f9fa"],
html.dark-mode [style*="background-color: #f8f9fa"],
html.dark-mode [style*="background: #f3f4f6"],
html.dark-mode [style*="background-color: #f3f4f6"],
html.dark-mode [style*="background: #f9fafb"],
html.dark-mode [style*="background-color: #f9fafb"] {
  background: var(--tm-bg-primary) !important;
}

/* INLINE COLOR OVERRIDES */
html.dark-mode [style*="color: #111827"],
html.dark-mode [style*="color:#111827"],
html.dark-mode [style*="color: #1f2937"],
html.dark-mode [style*="color:#1f2937"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode [style*="color: #374151"],
html.dark-mode [style*="color:#374151"],
html.dark-mode [style*="color: #4b5563"],
html.dark-mode [style*="color:#4b5563"],
html.dark-mode [style*="color: #6b7280"],
html.dark-mode [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* INLINE BORDER OVERRIDES */
html.dark-mode [style*="border-color: #e5e7eb"],
html.dark-mode [style*="border-color:#e5e7eb"],
html.dark-mode [style*="border-color: #d1d5db"],
html.dark-mode [style*="border-color:#d1d5db"] {
  border-color: var(--tm-border-color) !important;
}

/* ===== KAPSAMLI ARKA PLAN RENK OVERRIDE'LARI ===== */
html.dark-mode .bg-secondary-100,
html.dark-mode .bg-light,
html.dark-mode .bg-white,
html.dark-mode [class*="bg-neutral-"],
html.dark-mode [class*="bg-secondary-50"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-gray-200 {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Tüm beyaz arka planları override et */
html.dark-mode [class*="bg-white"],
html.dark-mode .bg-light,
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-secondary-50,
html.dark-mode .bg-secondary-100,
html.dark-mode .bg-neutral-50,
html.dark-mode .bg-neutral-100,
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"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background-color:#ffffff"],
html.dark-mode [style*="background-color: #ffffff"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Container'lar için özel override'lar */
html.dark-mode .container,
html.dark-mode .container-fluid,
html.dark-mode [class*="container-"] {
  background: transparent !important;
}

html.dark-mode .container .bg-white,
html.dark-mode .container-fluid .bg-white,
html.dark-mode .container .card,
html.dark-mode .container-fluid .card {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Wrapper ve section elementleri */
html.dark-mode section,
html.dark-mode .section,
html.dark-mode .wrapper,
html.dark-mode [class*="wrapper"],
html.dark-mode [class*="section"] {
  background: transparent !important;
}

html.dark-mode section.bg-white,
html.dark-mode .section.bg-white,
html.dark-mode .wrapper.bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* ===== HEADER ===== */
html.dark-mode .header-wrapper {
  background: transparent !important;
}

html.dark-mode .header-bar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

html.dark-mode .header-logo-link:hover {
  background: var(--tm-header-surface-hover) !important;
}

html.dark-mode .header-logo-text {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .header-logo-link:hover .header-logo-text {
  color: var(--tm-header-logo-hover) !important;
}

/* Üst bar CTA: gölge/transform yok; hover sadece bir ton yukarı */
html.dark-mode .header-bar .btn-nasil-yapilir {
  box-shadow: none !important;
}

html.dark-mode .header-bar .btn-nasil-yapilir:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--color-primary-hover) !important;
}

html.dark-mode .header-bar .btn-nasil-yapilir-icon {
  background: rgba(232, 200, 160, 0.28) !important;
}

html.dark-mode .header-dropdown-btn {
  color: #94a3b8 !important;
}

html.dark-mode .header-dropdown-btn:hover {
  background: rgba(148, 163, 184, 0.1) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .btn-nasil-yapilir {
  background: var(--color-primary) !important;
  color: var(--tm-text-on-primary) !important;
  box-shadow: none !important;
}

/* ===== SIDEBAR (masaüstü kart) — mobil drawer ayrı */
@media (min-width: 1025px) {
  html.dark-mode .sidebar,
  html.dark-mode #sidebar {
    background: var(--tm-bg-card) !important;
    border-color: var(--tm-border-color) !important;
  }
}

html.dark-mode .sidebar-link,
html.dark-mode .sidebar .nav-link,
html.dark-mode .sidebar a {
  color: #94a3b8 !important;
}

html.dark-mode .sidebar-link:hover,
html.dark-mode .sidebar .nav-link:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar-link.active,
html.dark-mode .sidebar .nav-link.active,
html.dark-mode .sidebar .active {
  background: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border-color: var(--tm-active-soft-border) !important;
}

html.dark-mode .sidebar .nav-group-header,
html.dark-mode .sidebar .sidebar-heading {
  color: #64748b !important;
}

html.dark-mode .sidebar-submenu,
html.dark-mode .nav-submenu {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ===== CARDS ===== */
html.dark-mode .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .card-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .card-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .card-title,
html.dark-mode .card-text {
  color: var(--tm-text-primary) !important;
}

/* Stat cards */
html.dark-mode .stat-card,
html.dark-mode [class*="stat-"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== DROPDOWNS & MENUS ===== */
html.dark-mode .dropdown-menu,
html.dark-mode .header-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-item {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .dropdown-divider {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .dropdown-header {
  color: #64748b !important;
}

/* ===== TABLES ===== */
html.dark-mode .table {
  color: var(--tm-text-primary) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: var(--tm-table-row-hover-bg);
}

html.dark-mode .table thead th {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .table td,
html.dark-mode .table th {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode .table-hover > tbody > tr:hover {
  background: var(--tm-table-row-hover-bg) !important;
}

html.dark-mode .table-responsive {
  background: transparent !important;
}

/* DataTables */
html.dark-mode .dataTables_wrapper {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .dataTables_filter input,
html.dark-mode .dataTables_length select {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== FORMS & INPUTS ===== */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="search"],
html.dark-mode input[type="date"],
html.dark-mode input[type="datetime-local"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="url"],
html.dark-mode textarea,
html.dark-mode select {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #64748b !important;
}

html.dark-mode .form-label,
html.dark-mode label {
  color: #94a3b8 !important;
}

html.dark-mode .form-text {
  color: #64748b !important;
}

html.dark-mode .input-group-text {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .form-check-input {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Bootstrap switch: tek katman (checkmark + thumb çakışmasını önle), net açık/kapalı */
html.dark-mode .form-switch .form-check-input {
  --bs-form-check-bg-image: none !important;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e2e8f0'/%3e%3c/svg%3e") !important;
  background-color: var(--tm-bg-active) !important;
  border-color: var(--tm-border-light) !important;
  background-image: var(--bs-form-switch-bg) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 1em 1em !important;
}

html.dark-mode .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: var(--bs-form-switch-bg) !important;
  background-position: right center !important;
}

html.dark-mode .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.28) !important;
}

/* ===== BUTTONS ===== */
html.dark-mode .btn-light {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .btn-light:hover {
  background: var(--tm-bg-active) !important;
  border-color: #64748b !important;
}

html.dark-mode .btn-outline-secondary {
  border-color: var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

html.dark-mode .btn-outline-secondary:hover {
  background: var(--tm-bg-hover) !important;
  border-color: #64748b !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .btn-outline-primary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: white !important;
}

html.dark-mode .btn-link {
  color: #94a3b8 !important;
}

html.dark-mode .btn-link:hover {
  color: var(--color-primary) !important;
}

html.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .btn-white,
html.dark-mode .btn-outline-light {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== MODALS ===== */
html.dark-mode .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modal-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modal-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal-backdrop {
  background-color: var(--tm-modal-backdrop, rgba(0, 0, 0, 0.7)) !important;
}

/* ===== ALERTS ===== */
html.dark-mode .alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

html.dark-mode .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

html.dark-mode .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

html.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

html.dark-mode .alert-primary {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
  color: var(--color-primary-hover) !important;
}

html.dark-mode .alert-secondary {
  background: rgba(100, 116, 139, 0.15) !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
  color: #94a3b8 !important;
}

/* ===== BADGES ===== */
html.dark-mode .badge.bg-light {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .badge.bg-secondary {
  background: var(--tm-bg-active) !important;
}

html.dark-mode .badge.bg-white {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== BORDERS ===== */
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end,
html.dark-mode [class*="border-"] {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .border-light {
  border-color: var(--tm-border-light) !important;
}

/* ===== TEXT COLORS ===== */
html.dark-mode .text-muted {
  color: #64748b !important;
}

html.dark-mode .text-secondary {
  color: #94a3b8 !important;
}

html.dark-mode .text-dark {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-body {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-black {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-gray-500,
html.dark-mode .text-gray-600,
html.dark-mode .text-gray-700 {
  color: #94a3b8 !important;
}

html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, 
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3,
html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode p {
  color: #e2e8f0 !important;
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #60a5fa !important;
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #93c5fd !important;
}

/* ===== SCROLLBAR ===== */
html.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: var(--tm-scrollbar-track);
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--tm-scrollbar-thumb);
  border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--tm-scrollbar-thumb-hover);
}

/* ===== LIST GROUPS ===== */
html.dark-mode .list-group-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .list-group-item:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .list-group-item.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ===== PROGRESS BARS ===== */
html.dark-mode .progress {
  background: var(--tm-bg-hover) !important;
}

/* ===== NAV TABS ===== */
html.dark-mode .nav-tabs {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .nav-tabs .nav-link {
  color: #b6c2d1 !important;
}

html.dark-mode .nav-tabs .nav-link.active {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) var(--tm-border-color) var(--tm-bg-card) !important;
  color: var(--tm-active-soft-text) !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .nav-pills .nav-link {
  color: #b6c2d1 !important;
}

html.dark-mode .nav-pills .nav-link.active {
  background: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border: 1px solid var(--tm-active-soft-border) !important;
}

/* ===== PAGINATION ===== */
html.dark-mode .page-link {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .page-link:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .page-item.active .page-link {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-text-on-primary) !important;
}

html.dark-mode .page-item.disabled .page-link {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-muted) !important;
}

/* ===== ACCORDION ===== */
html.dark-mode .accordion-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .accordion-button {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .accordion-button:not(.collapsed) {
  background: var(--tm-bg-primary) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .accordion-button::after {
  filter: invert(1);
}

html.dark-mode .accordion-body {
  background: var(--tm-bg-card) !important;
}

/* ===== OFFCANVAS ===== */
html.dark-mode .offcanvas {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .offcanvas-header {
  border-color: var(--tm-border-color) !important;
}

/* ===== TOOLTIPS ===== */
html.dark-mode .tooltip-inner {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .tooltip .tooltip-arrow::before {
  border-top-color: var(--tm-bg-primary) !important;
}

/* ===== POPOVERS ===== */
html.dark-mode .popover {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .popover-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .popover-body {
  color: var(--tm-text-primary) !important;
}

/* ===== TOASTS ===== */
html.dark-mode .toast {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .toast-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== BREADCRUMBS ===== */
html.dark-mode .breadcrumb {
  background: transparent !important;
}

html.dark-mode .breadcrumb-item a {
  color: #60a5fa !important;
}

html.dark-mode .breadcrumb-item.active {
  color: #94a3b8 !important;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #64748b !important;
}

/* ===== CODE & PRE ===== */
html.dark-mode pre,
html.dark-mode code {
  background: var(--tm-bg-primary) !important;
  color: #e2e8f0 !important;
}

html.dark-mode kbd {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== SHADOWS ===== */
html.dark-mode .shadow,
html.dark-mode .shadow-sm,
html.dark-mode .shadow-lg {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ===== CHART.JS ===== */
/* Global canvas filter kaldırıldı (Chart.js redraw + GPU). Gerekirse sayfa/Chart tema ile ayarla. */

/* ===== SPINNERS ===== */
html.dark-mode .spinner-border {
  color: var(--color-primary) !important;
}

/* ===== HR ===== */
html.dark-mode hr {
  border-color: var(--tm-border-color) !important;
  opacity: 1 !important;
}

/* ===== SPECIFIC PAGE ELEMENTS ===== */

/* Account pages */
html.dark-mode .account-page-wrapper,
html.dark-mode .profile-page-wrapper,
html.dark-mode .subscription-page-wrapper,
html.dark-mode .shipping-page-wrapper,
html.dark-mode .security-page-wrapper,
html.dark-mode .notifications-page-wrapper,
html.dark-mode .balance-page-wrapper,
html.dark-mode .integration-page-wrapper {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

/* Account navigation */
html.dark-mode .account-nav,
html.dark-mode .account-sidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .account-nav a,
html.dark-mode .account-sidebar a {
  color: #94a3b8 !important;
}

html.dark-mode .account-nav a:hover,
html.dark-mode .account-sidebar a:hover,
html.dark-mode .account-nav a.active,
html.dark-mode .account-sidebar a.active {
  color: var(--color-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

/* API warning banner */
html.dark-mode .api-warning-banner > div {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Subscription banners */
html.dark-mode .subscription-banner-inner {
  border-width: 1px !important;
}

/* Nasıl Yapılır Modal */
html.dark-mode #nasilYapilirModal .modal-content,
html.dark-mode #nasilYapilirModal .tmv2-guide-modal__content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__header {
  background: var(--tm-bg-card) !important;
  border-bottom-color: var(--tm-border-color) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__header .modal-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__header-sub {
  color: var(--tm-text-secondary) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__header-icon {
  background: var(--tm-bg-secondary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__body {
  background: var(--color-bg) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__quick {
  background: var(--tm-bg-secondary) !important;
  border-bottom-color: var(--tm-border-color) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__quick-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__quick-text {
  color: var(--tm-text-secondary) !important;
}

html.dark-mode #nasilYapilirModal .tmv2-guide-modal__close {
  filter: invert(1) grayscale(1);
  opacity: 0.9;
}

html.dark-mode #nasilYapilirModal .tutorial-step-btn {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode #nasilYapilirModal .tutorial-step-btn:hover {
  background: var(--tm-bg-active) !important;
  border-color: var(--color-primary) !important;
}

html.dark-mode #nasilYapilirModal .tutorial-step-btn span {
  color: var(--tm-text-primary) !important;
}

/* Notification items */
html.dark-mode .notification-item {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .notification-item:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .notification-item.unread {
  background: rgba(59, 130, 246, 0.1) !important;
  border-left-color: #3b82f6 !important;
}

/* Dashboard stats */
html.dark-mode .dashboard-stat,
html.dark-mode .stat-box,
html.dark-mode .info-box {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Select2 */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-results__option {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .select2-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .select2-search__field {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}

/* Flatpickr (date picker) */
html.dark-mode .flatpickr-calendar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .flatpickr-day {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .flatpickr-day:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .flatpickr-day.selected {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Mobile overlay */
html.dark-mode #mobileSidebarOverlay.active {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* ===== TAILWIND OVERRIDES ===== */
html.dark-mode .tw-bg-white {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .tw-bg-gray-50,
html.dark-mode .tw-bg-gray-100 {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .tw-text-gray-900,
html.dark-mode .tw-text-gray-800,
html.dark-mode .tw-text-gray-700 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .tw-text-gray-600,
html.dark-mode .tw-text-gray-500 {
  color: #94a3b8 !important;
}

html.dark-mode .tw-border-gray-200,
html.dark-mode .tw-border-gray-300 {
  border-color: var(--tm-border-color) !important;
}

/* ===== DARK MODE TOGGLE ANIMATION ===== */
#darkModeToggle {
  transition: all 0.3s ease;
}

#darkModeToggle:hover {
  transform: rotate(15deg) scale(1.1);
}

html.dark-mode #darkModeToggle {
  color: #fbbf24 !important;
}

/* ===== TRANSITIONS ===== */
/* Global * transition kaldırıldı (performans). İsteğe bağlı: toggle sırasında
   html.dark-mode-transitioning sınıfı eklenirse bu kural animasyonları kapatır. */
html.dark-mode-transitioning * {
  transition: none !important;
}

/* ===== INLINE STYLE OVERRIDES ===== */
/* Override common inline styles that use light colors */

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"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background-color: #ffffff"],
html.dark-mode [style*="background-color:#ffffff"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode [style*="background: #f"],
html.dark-mode [style*="background:#f"] {
  background: var(--tm-bg-card) !important;
}

html.dark-mode [style*="color: #1"],
html.dark-mode [style*="color:#1"],
html.dark-mode [style*="color: #2"],
html.dark-mode [style*="color:#2"],
html.dark-mode [style*="color: #3"],
html.dark-mode [style*="color:#3"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode [style*="border-color: #e"],
html.dark-mode [style*="border-color:#e"],
html.dark-mode [style*="border: 1px solid #e"],
html.dark-mode [style*="border:1px solid #e"] {
  border-color: var(--tm-border-color) !important;
}

/* ===== ADMIN SPECIFIC STYLES ===== */
html.dark-mode .admin-page-container {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

html.dark-mode .admin-header {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .admin-header-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .admin-header-subtitle {
  color: #94a3b8 !important;
}

html.dark-mode .admin-sidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .admin-content {
  background: transparent !important;
}

html.dark-mode .admin-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== STORE SPECIFIC STYLES ===== */
html.dark-mode .store-header,
html.dark-mode .store-navbar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .store-product-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .store-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== AUTH PAGE STYLES ===== */
html.dark-mode .auth-container {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

html.dark-mode .auth-card,
html.dark-mode .login-card,
html.dark-mode .register-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== DASHBOARD SPECIFIC ===== */
html.dark-mode .dashboard-wrapper,
html.dark-mode .main-content {
  background: transparent !important;
}

html.dark-mode .dashboard-card,
html.dark-mode .widget-card,
html.dark-mode .stat-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== XML SYNC & PRODUCT PAGES ===== */
html.dark-mode .xml-source-card,
html.dark-mode .product-card,
html.dark-mode .category-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .step-indicator {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .step-indicator.active {
  background: var(--color-primary) !important;
  color: white !important;
}

/* ===== CHART CONTAINER ===== */
html.dark-mode .chart-container,
html.dark-mode .chart-wrapper {
  background: var(--tm-bg-card) !important;
}

/* ===== LOADING & SKELETON ===== */
html.dark-mode .skeleton,
html.dark-mode .loading-skeleton {
  background: linear-gradient(90deg, var(--tm-bg-card) 25%, var(--tm-bg-hover) 50%, var(--tm-bg-card) 75%) !important;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== EMPTY STATE ===== */
html.dark-mode .empty-state,
html.dark-mode .no-data {
  color: #94a3b8 !important;
}

/* ===== FILTER & SEARCH BARS ===== */
html.dark-mode .filter-bar,
html.dark-mode .search-bar,
html.dark-mode .toolbar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== INTRO.JS TOUR ===== */
html.dark-mode .introjs-tooltip {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .introjs-helperLayer {
  background: rgba(15, 23, 42, 0.7) !important;
}

html.dark-mode .introjs-tooltiptext {
  color: var(--tm-text-primary) !important;
}

/* ===== PRODUCT QA SPECIFIC ===== */
html.dark-mode .qa-card,
html.dark-mode .qa-item,
html.dark-mode .qa-message {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .qa-question {
  background: rgba(59, 130, 246, 0.1) !important;
  border-left-color: #3b82f6 !important;
}

html.dark-mode .qa-answer {
  background: rgba(34, 197, 94, 0.1) !important;
  border-left-color: #22c55e !important;
}

/* ===== COMMISSION & ANALYSIS PAGES ===== */
html.dark-mode .commission-card,
html.dark-mode .analysis-card,
html.dark-mode .report-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .profit-positive {
  color: #4ade80 !important;
}

html.dark-mode .profit-negative {
  color: #f87171 !important;
}

/* ===== MOBILE MENU ===== */
html.dark-mode .mobile-menu,
html.dark-mode .mobile-sidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== FOOTER ===== */
html.dark-mode footer,
html.dark-mode .footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

/* ===== MISC ELEMENTS ===== */
html.dark-mode blockquote {
  border-left-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode mark {
  background: rgba(var(--color-primary-rgb), 0.3) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode ::selection {
  background: rgba(var(--color-primary-rgb), 0.4) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== FORCE DARK ON SPECIFIC CONTAINERS ===== */
html.dark-mode div[style*="background: linear-gradient"],
html.dark-mode div[style*="background:linear-gradient"] {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
}

/* Page wrappers with light backgrounds */
html.dark-mode .page-wrapper,
html.dark-mode .content-wrapper,
html.dark-mode .main-wrapper {
  background: transparent !important;
}

/* Special peach/cream backgrounds */
html.dark-mode [style*="#f2f6fa"],
html.dark-mode [style*="#f2f6fa"],
html.dark-mode [style*="#FFF8F0"],
html.dark-mode [style*="#fff8f0"],
html.dark-mode [style*="#ffecd1"],
html.dark-mode [style*="#FFECD1"] {
  background: var(--tm-bg-primary) !important;
}

/* ========================================
   DASHBOARD SPECIFIC DARK MODE STYLES
   Dashboard sayfasına özel stiller
======================================== */

/* Dashboard Container & Background */
html.dark-mode body:has(#mainTabContainer),
html.dark-mode .main-content {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

/* Modern Card */
html.dark-mode .modern-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .modern-card:hover {
  border-color: var(--tm-border-light) !important;
}

/* Performance Cards */
html.dark-mode .performance-card-enhanced {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Metric Cards - Dashboard stat kartları */
html.dark-mode .metric-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .metric-card:hover {
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .metric-card .metric-title,
html.dark-mode .metric-card .metric-label {
  color: #94a3b8 !important;
}

html.dark-mode .metric-card .metric-value,
html.dark-mode .metric-card .metric-amount {
  color: var(--tm-text-primary) !important;
}

/* Tab Buttons */
html.dark-mode .nav-tabs,
html.dark-mode .tab-container {
  background: var(--tm-bg-secondary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .nav-tabs .nav-link,
html.dark-mode .tab-btn,
html.dark-mode [class*="tab-"] {
  background: var(--tm-bg-tertiary) !important;
  color: #b6c2d1 !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .nav-tabs .nav-link:hover,
html.dark-mode .tab-btn:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .nav-tabs .nav-link.active,
html.dark-mode .tab-btn.active,
html.dark-mode [class*="tab-"].active {
  background: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border-color: var(--tm-active-soft-border) !important;
  box-shadow: none !important;
}

/* Sticky Header — backdrop-filter scroll’da pahalı; opak zemin yeterli */
html.dark-mode .sticky-header {
  background: rgba(17, 27, 46, 0.98) !important;
  border-color: var(--tm-border-color) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Welcome Card */
html.dark-mode .welcome-card,
html.dark-mode .welcome-section {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .welcome-card h1,
html.dark-mode .welcome-card h2,
html.dark-mode .welcome-card h3 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .welcome-card p,
html.dark-mode .welcome-card span {
  color: #94a3b8 !important;
}

/* Platform Dropdown */
html.dark-mode .platform-dropdown,
html.dark-mode .platform-dropdown-wrapper,
html.dark-mode #platform-dropdown-menu {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .platform-dropdown-item:hover {
  background: var(--tm-bg-hover) !important;
}

/* Date Picker */
html.dark-mode .date-picker-container,
html.dark-mode .date-range-picker {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Chart Cards */
html.dark-mode .chart-card,
html.dark-mode .chart-container {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .chart-card .card-header,
html.dark-mode .chart-card .chart-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .chart-card .card-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .chart-card .card-subtitle {
  color: #64748b !important;
}

/* Activity Links */
html.dark-mode .activity-link,
html.dark-mode .quick-link {
  color: #60a5fa !important;
}

html.dark-mode .activity-link:hover,
html.dark-mode .quick-link:hover {
  color: #93c5fd !important;
}

/* Stats with colored backgrounds - Override inline styles */
html.dark-mode [style*="background: linear-gradient(135deg, #dcfce7"],
html.dark-mode [style*="background: linear-gradient(135deg, #d1fae5"],
html.dark-mode [style*="background:linear-gradient(135deg, #dcfce7"],
html.dark-mode [style*="background: #dcfce7"],
html.dark-mode [style*="background:#dcfce7"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode [style*="background: linear-gradient(135deg, #fef3c7"],
html.dark-mode [style*="background: linear-gradient(135deg, #fef9c3"],
html.dark-mode [style*="background:linear-gradient(135deg, #fef3c7"],
html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fef3c7"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode [style*="background: linear-gradient(135deg, #dbeafe"],
html.dark-mode [style*="background:linear-gradient(135deg, #dbeafe"],
html.dark-mode [style*="background: #dbeafe"],
html.dark-mode [style*="background:#dbeafe"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode [style*="background: linear-gradient(135deg, #fee2e2"],
html.dark-mode [style*="background:linear-gradient(135deg, #fee2e2"],
html.dark-mode [style*="background: #fee2e2"],
html.dark-mode [style*="background:#fee2e2"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode [style*="background: linear-gradient(135deg, #f3e8ff"],
html.dark-mode [style*="background:linear-gradient(135deg, #f3e8ff"],
html.dark-mode [style*="background: #f3e8ff"],
html.dark-mode [style*="background:#f3e8ff"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* White backgrounds in stats */
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:#ffffff"] {
  background: var(--tm-bg-card) !important;
}

/* Gray backgrounds */
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f8fafc"],
html.dark-mode [style*="background: var(--tm-text-primary)"],
html.dark-mode [style*="background:var(--tm-text-primary)"],
html.dark-mode [style*="background: #f9fafb"],
html.dark-mode [style*="background:#f9fafb"],
html.dark-mode [style*="background: #f3f4f6"],
html.dark-mode [style*="background:#f3f4f6"],
html.dark-mode [style*="background-color: #f8fafc"],
html.dark-mode [style*="background-color:#f8fafc"],
html.dark-mode [style*="background-color: var(--tm-text-primary)"],
html.dark-mode [style*="background-color:var(--tm-text-primary)"],
html.dark-mode [style*="background-color: #f9fafb"],
html.dark-mode [style*="background-color:#f9fafb"],
html.dark-mode [style*="background-color: #f3f4f6"],
html.dark-mode [style*="background-color:#f3f4f6"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Dark text colors to 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: #111827"],
html.dark-mode [style*="color:#111827"],
html.dark-mode [style*="color: #1f2937"],
html.dark-mode [style*="color:#1f2937"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode [style*="color: #374151"],
html.dark-mode [style*="color:#374151"],
html.dark-mode [style*="color: #4b5563"],
html.dark-mode [style*="color:#4b5563"],
html.dark-mode [style*="color: #6b7280"],
html.dark-mode [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* Border colors */
html.dark-mode [style*="border-color: #e5e7eb"],
html.dark-mode [style*="border-color:#e5e7eb"],
html.dark-mode [style*="border: 1px solid #e5e7eb"],
html.dark-mode [style*="border:1px solid #e5e7eb"],
html.dark-mode [style*="border: 1.5px solid #e5e7eb"],
html.dark-mode [style*="border:1.5px solid #e5e7eb"] {
  border-color: var(--tm-border-color) !important;
}

/* Order Table */
html.dark-mode .orders-table,
html.dark-mode .order-list {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .order-row,
html.dark-mode .order-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .order-row:hover,
html.dark-mode .order-item:hover {
  background: var(--tm-table-row-hover-bg) !important;
}

/* Filter Pills */
html.dark-mode .filter-pill,
html.dark-mode .filter-btn {
  background: var(--tm-bg-tertiary) !important;
  color: #b6c2d1 !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .filter-pill:hover,
html.dark-mode .filter-btn:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .filter-pill.active,
html.dark-mode .filter-btn.active {
  background: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border-color: var(--tm-active-soft-border) !important;
}

/* Sidebar for Dashboard */
html.dark-mode .sidebar-divider {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .sidebar-category-title {
  color: #64748b !important;
}

/* Notification Badge */
html.dark-mode .notification-count {
  background: #ef4444 !important;
  color: white !important;
}

/* Empty State */
html.dark-mode .empty-orders,
html.dark-mode .no-data-message {
  color: #94a3b8 !important;
}

/* Refresh Button */
html.dark-mode .refresh-btn {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .refresh-btn:hover {
  background: var(--tm-bg-active) !important;
  color: var(--tm-text-primary) !important;
}

/* Expand/Collapse Icons */
html.dark-mode .expand-icon,
html.dark-mode .collapse-icon {
  color: #94a3b8 !important;
}

/* Tooltip Override */
html.dark-mode [title] {
  --tooltip-bg: #0f172a;
  --tooltip-color: var(--tm-text-primary);
}

/* Loading States */
html.dark-mode .loading-overlay {
  background: rgba(15, 23, 42, 0.8) !important;
}

html.dark-mode .loading-spinner {
  border-color: var(--tm-border-color) !important;
  border-top-color: var(--color-primary) !important;
}

/* Card Icons with Backgrounds */
html.dark-mode .icon-wrapper,
html.dark-mode .stat-icon {
  opacity: 0.9;
}

/* Ensure text in colored stat cards is readable */
html.dark-mode .performance-card-enhanced .stat-value,
html.dark-mode .performance-card-enhanced .stat-label,
html.dark-mode .metric-card .value,
html.dark-mode .metric-card .label {
  color: var(--tm-text-primary) !important;
}

/* Dashboard Quick Actions */
html.dark-mode .quick-action-btn {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .quick-action-btn:hover {
  background: var(--tm-bg-active) !important;
  border-color: #64748b !important;
}

/* ========================================
   XML PAGES DARK MODE STYLES
   XML Yönetimi, XML Ekleme, XML Sync vb.
======================================== */

/* XML Page Backgrounds */
html.dark-mode .xml-sources-page,
html.dark-mode .xml-sync-page,
html.dark-mode .xml-add-page,
html.dark-mode [class*="xml-"] {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

/* XML Cards */
html.dark-mode .xml-source-card,
html.dark-mode .xml-card,
html.dark-mode .source-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* XML Step Cards - Renkli gradient kartlar için */
html.dark-mode .step-card,
html.dark-mode [class*="step-card"],
html.dark-mode .wizard-step {
  opacity: 0.9;
}

/* Quick Action Cards - Hızlı İşlemler */
html.dark-mode .quick-action-card,
html.dark-mode .action-card {
  opacity: 0.95;
}

/* XML Table */
html.dark-mode .xml-table,
html.dark-mode .sources-table {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .xml-table thead,
html.dark-mode .sources-table thead {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode .xml-table th,
html.dark-mode .sources-table th {
  background: var(--tm-bg-primary) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .xml-table td,
html.dark-mode .sources-table td {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .xml-table tr:hover td,
html.dark-mode .sources-table tr:hover td {
  background: var(--tm-table-row-hover-bg) !important;
}

/* XML Form Elements */
html.dark-mode .xml-form input,
html.dark-mode .xml-form select,
html.dark-mode .xml-form textarea {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* XML Modal */
html.dark-mode .xml-modal .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* XML Status Badges */
html.dark-mode .xml-status-active {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

html.dark-mode .xml-status-inactive {
  background: rgba(100, 116, 139, 0.2) !important;
  color: #94a3b8 !important;
}

html.dark-mode .xml-status-error {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

/* XML Progress */
html.dark-mode .xml-progress {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .xml-progress-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)) !important;
}

/* XML Buttons in Cards */
html.dark-mode .xml-sources-page .btn-light,
html.dark-mode .xml-sync-page .btn-light {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* XML Empty State */
html.dark-mode .xml-empty-state {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

/* XML Kurulum Süreci Section */
html.dark-mode .setup-guide,
html.dark-mode .kurulum-section {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .setup-guide h3,
html.dark-mode .kurulum-section h3 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .setup-guide p,
html.dark-mode .kurulum-section p {
  color: #94a3b8 !important;
}

/* Colored Gradient Cards - Make text always readable */
html.dark-mode [style*="linear-gradient(135deg, #3b82f6"],
html.dark-mode [style*="linear-gradient(135deg, #ef4444"],
html.dark-mode [style*="linear-gradient(135deg, #8b5cf6"],
html.dark-mode [style*="linear-gradient(135deg, #10b981"],
html.dark-mode [style*="linear-gradient(135deg, #f59e0b"],
html.dark-mode [style*="linear-gradient(to right, #3b82f6"],
html.dark-mode [style*="linear-gradient(to right, #ef4444"],
html.dark-mode [style*="linear-gradient(to right, #10b981"],
html.dark-mode [style*="linear-gradient(to right, #f97316"],
html.dark-mode [class*="bg-gradient"] {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* XML Sources Table Specific */
html.dark-mode [style*="background-color: #f9fafb"] {
  background-color: var(--tm-bg-primary) !important;
}

/* Action Buttons in XML pages */
html.dark-mode .xml-sources-page button[style*="background-color: #f3f4f6"],
html.dark-mode .xml-sync-page button[style*="background-color: #f3f4f6"],
html.dark-mode [style*="background-color: #f3f4f6"] {
  background-color: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-light) !important;
}

/* XML Filter Buttons */
html.dark-mode .filter-btn[style*="background-color: #f3f4f6"] {
  background-color: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .filter-btn[style*="background-color: #0175e4"],
html.dark-mode .filter-btn.active {
  background-color: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border-color: var(--tm-active-soft-border) !important;
}

/* XML Sync Progress Panel */
html.dark-mode #loadingStats,
html.dark-mode .loading-stats {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* XML Action Modal */
html.dark-mode .action-btn[style*="background-color: #f3f4f6"] {
  background-color: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .action-btn[style*="background-color: #fef2f2"] {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

/* Max Width Container */
html.dark-mode .max-w-7xl {
  background: transparent !important;
}

/* Tailwind Gray Backgrounds in XML */
html.dark-mode .xml-sources-page .bg-gray-50,
html.dark-mode .xml-sources-page .bg-gray-100,
html.dark-mode .xml-sync-page .bg-gray-50,
html.dark-mode .xml-sync-page .bg-gray-100 {
  background: var(--tm-bg-card) !important;
}

/* XML Toggle Switch */
html.dark-mode [style*="background-color: #d1d5db"] {
  background-color: var(--tm-bg-active) !important;
}

/* XML Info Boxes */
html.dark-mode .info-box,
html.dark-mode .help-box {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

/* XML Field Mapping Page */
html.dark-mode .field-mapping-container,
html.dark-mode .mapping-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .field-item,
html.dark-mode .mapping-row {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .field-item:hover,
html.dark-mode .mapping-row:hover {
  background: var(--tm-bg-hover) !important;
}

/* XML Category Mapping */
html.dark-mode .category-mapping-container,
html.dark-mode .category-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .category-item {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* XML Pricing Page */
html.dark-mode .pricing-container,
html.dark-mode .pricing-card,
html.dark-mode .rule-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .pricing-rule,
html.dark-mode .rule-item {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* Lucide Icons in Dark Mode */
html.dark-mode .xml-sources-page [data-lucide],
html.dark-mode .xml-sync-page [data-lucide] {
  color: #94a3b8;
}

/* XML Page Text Colors */
html.dark-mode .xml-sources-page h1,
html.dark-mode .xml-sources-page h2,
html.dark-mode .xml-sources-page h3,
html.dark-mode .xml-sources-page h4,
html.dark-mode .xml-sync-page h1,
html.dark-mode .xml-sync-page h2,
html.dark-mode .xml-sync-page h3 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .xml-sources-page p,
html.dark-mode .xml-sources-page span:not([style*="color"]),
html.dark-mode .xml-sync-page p,
html.dark-mode .xml-sync-page span:not([style*="color"]) {
  color: #94a3b8 !important;
}

/* Ensure white text on colored cards stays white */
html.dark-mode [style*="color: #ffffff"],
html.dark-mode [style*="color:#ffffff"],
html.dark-mode [style*="color: white"],
html.dark-mode [style*="color:white"],
html.dark-mode .text-white {
  color: #ffffff !important;
}

/* XML Add Source Page Specific */
html.dark-mode .add-source-container,
html.dark-mode .upload-container {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .upload-zone,
html.dark-mode .dropzone {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

html.dark-mode .upload-zone:hover,
html.dark-mode .dropzone:hover {
  border-color: var(--color-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.05) !important;
}

/* ========================================
   DASHBOARD DARK MODE - KAPSAMLI GÜNCELLEME
   Trendmetrik Dashboard için tam dark theme
   ======================================== */

/* === DASHBOARD ANA CONTAINER === */
html.dark-mode body:has(#mainTabContainer),
html.dark-mode .dashboard-wrapper,
html.dark-mode .tab-content {
  background: transparent !important;
}

/* === WELCOME CARD (Sol üst karşılama kartı) === */
html.dark-mode .welcome-card,
html.dark-mode [class*="welcome-section"],
html.dark-mode .md-card-filled {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-hover) 100%) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .welcome-card h1,
html.dark-mode .welcome-card h2,
html.dark-mode .welcome-card h3,
html.dark-mode .welcome-card .welcome-name {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .welcome-card p,
html.dark-mode .welcome-card span:not([style*="color"]):not(.comparison-badge) {
  color: #cbd5e1 !important;
}

/* === KÂR MARJI BADGE (Karşılama kartındaki) === */
html.dark-mode .md-assist-chip {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .md-assist-chip span {
  color: #cbd5e1 !important;
}

html.dark-mode .md-assist-chip strong {
  color: #4ade80 !important;
}

/* === COMPARISON BADGE (Değişim yüzdeleri) === */
html.dark-mode .comparison-badge {
  border: none !important;
}

html.dark-mode .comparison-badge.positive {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

html.dark-mode .comparison-badge.negative {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

/* === MD3 BUTONLAR === */
html.dark-mode .md-btn-tonal {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary-hover) !important;
  border: none !important;
}

html.dark-mode .md-btn-tonal:hover {
  background: rgba(var(--color-primary-rgb), 0.25) !important;
}

html.dark-mode .md-btn-outlined {
  background: transparent !important;
  color: var(--color-primary-hover) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .md-btn-outlined:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: var(--color-primary-hover) !important;
}

/* === PROMOSYON CTA BANNER === */
html.dark-mode .md-cta-banner {
  background: rgba(51, 65, 85, 0.5) !important;
  border: 1px solid var(--tm-border-light) !important;
}

html.dark-mode .md-cta-banner p {
  color: #e2e8f0 !important;
}

/* === SAĞ TARAF - TARİH SEÇİCİ VE METRİK KARTLARI === */
html.dark-mode .dashboard-date-metrics-card,
html.dark-mode .md-card-elevated {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-border-color) !important;
}

/* === TARİH SEÇİCİ INPUT === */
html.dark-mode .md-text-field,
html.dark-mode #dateRangeDisplay {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .md-icon-btn,
html.dark-mode .md-icon-btn-tonal {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary-hover) !important;
  border: none !important;
}

html.dark-mode .md-icon-btn:hover,
html.dark-mode .md-icon-btn-tonal:hover {
  background: rgba(var(--color-primary-rgb), 0.25) !important;
}

/* === METRİK KARTLARI - RENKLI ARKA PLANLAR === */
/* Kâr Tutarı - Yeşil */
html.dark-mode .metric-card[style*="success-bg"],
html.dark-mode .metric-card[style*="var(--success-bg)"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

/* Kâr / Maliyet Oranı - Mavi */
html.dark-mode .metric-card[style*="info-bg"],
html.dark-mode .metric-card[style*="var(--info-bg)"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Kâr Marjı - Sarı/Amber */
html.dark-mode .metric-card[style*="warning-bg"],
html.dark-mode .metric-card[style*="var(--warning-bg)"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Ciro - Mor */
html.dark-mode .metric-card[style*="purple-bg"],
html.dark-mode .metric-card[style*="var(--purple-bg)"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Tüm metrik kartlarındaki metin renkleri */
html.dark-mode .metric-card .metric-card-label span,
html.dark-mode .metric-card .text-sm,
html.dark-mode .metric-card .text-gray-800,
html.dark-mode .metric-card .font-semibold {
  color: #e2e8f0 !important;
}

html.dark-mode .metric-card .metric-card-amount,
html.dark-mode .metric-card h3 {
  color: #f8fafc !important;
}

html.dark-mode .metric-card .metric-card-prev,
html.dark-mode .metric-card .metric-card-subtitle {
  color: #94a3b8 !important;
}

/* Metrik kart info butonu */
html.dark-mode .metric-card-info .btn {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px solid var(--tm-border-light) !important;
}

/* Metrik kart ikon opacity ayarı */
html.dark-mode .metric-card-icon {
  opacity: 0.3 !important;
}

/* === ÜRÜN MALİYETLERİNDE EKSİK VAR UYARI BANNER === */
html.dark-mode .border-warning-200,
html.dark-mode [class*="border-warning"],
html.dark-mode .text-warning-700,
html.dark-mode .text-warning-600 {
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .bg-warning-50,
html.dark-mode [class*="bg-warning-"],
html.dark-mode .border-t.border-gray-200.mt-2.pt-2 {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

html.dark-mode .text-warning-700 {
  color: #fbbf24 !important;
}

html.dark-mode .text-warning-600 {
  color: #f59e0b !important;
}

/* Uyarı kapatma butonu */
html.dark-mode .hover\:bg-warning-100:hover {
  background: rgba(245, 158, 11, 0.2) !important;
}

/* === TAB NAVIGATION (Genel Bakış, Siparişler, Analiz, Ayarlar) === */
html.dark-mode .dashboard-tabs,
html.dark-mode .tab-container {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .tab-btn,
html.dark-mode .dashboard-tab-btn {
  background: transparent !important;
  color: #b6c2d1 !important;
  border-color: transparent !important;
}

html.dark-mode .tab-btn:hover,
html.dark-mode .dashboard-tab-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08) !important;
  color: var(--tm-active-soft-text) !important;
}

html.dark-mode .tab-btn.active,
html.dark-mode .dashboard-tab-btn.active {
  background: var(--tm-active-soft-bg) !important;
  color: var(--tm-active-soft-text) !important;
  border-color: var(--tm-active-soft-border) !important;
  box-shadow: none !important;
}

/* === HIZLI ERİŞİM WİDGET === */
html.dark-mode .quick-access-widget,
html.dark-mode .dashboard-widget {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .quick-access-widget .fw-bold,
html.dark-mode .dashboard-widget h5,
html.dark-mode .dashboard-widget .fw-bold {
  color: var(--tm-text-primary) !important;
}

/* Hızlı erişim kartları */
html.dark-mode .quick-access-card {
  background: var(--tm-bg-primary) !important;
  border: 1px solid var(--tm-border-color) !important;
}

html.dark-mode .quick-access-card:hover {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-strong) !important;
  box-shadow: none !important;
}

html.dark-mode .quick-access-card .title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .quick-access-card .subtitle {
  color: #94a3b8 !important;
}

/* Düzenle butonu */
html.dark-mode #editQuickAccessBtn {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
  border: none !important;
}

html.dark-mode #editQuickAccessBtn:hover {
  background: var(--tm-bg-active) !important;
  color: var(--tm-text-primary) !important;
}

/* Kısayol ekleme kartı */
html.dark-mode .add-shortcut-card {
  background: var(--tm-bg-primary) !important;
  border: 2px dashed var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

html.dark-mode .add-shortcut-card:hover {
  border-color: var(--color-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.05) !important;
}

html.dark-mode .add-shortcut-card span {
  color: #94a3b8 !important;
}

/* === UYARILAR WİDGET === */
html.dark-mode .alerts-widget,
html.dark-mode #widget-alerts .dashboard-widget {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .alert-item {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .alert-item:hover {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .alert-item .alert-title,
html.dark-mode .alert-item strong {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .alert-item .alert-subtitle,
html.dark-mode .alert-item .text-muted,
html.dark-mode .alert-item small {
  color: #94a3b8 !important;
}

/* Tümü butonu */
html.dark-mode .alerts-widget a[href*="uyarilar"],
html.dark-mode .dashboard-widget a.text-primary {
  color: var(--color-primary-hover) !important;
}

/* === SİPARİŞLER TAB === */
html.dark-mode .orders-tab-btn {
  background: transparent !important;
  color: #b6c2d1 !important;
}

html.dark-mode .orders-tab-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08) !important;
}

html.dark-mode .orders-tab-btn.orders-tab-active {
  background: rgba(1, 117, 228, 0.14) !important;
  color: #93c5fd !important;
  border-color: rgba(1, 117, 228, 0.5) !important;
  box-shadow: inset 2px 0 0 0 #2563eb !important;
}

html.dark-mode .orders-tab-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}

html.dark-mode .orders-tab-btn.orders-tab-active .orders-tab-badge {
  background: rgba(1, 117, 228, 0.22) !important;
  color: #93c5fd !important;
}

/* Sipariş tablosu */
html.dark-mode #ordersTable,
html.dark-mode .orders-table {
  background: var(--tm-bg-card) !important;
}

html.dark-mode #ordersTable thead th,
html.dark-mode .orders-table thead th {
  background: var(--tm-bg-primary) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #ordersTable tbody td,
html.dark-mode .orders-table tbody td {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #ordersTable tbody tr:hover td,
html.dark-mode .orders-table tbody tr:hover td {
  background: var(--tm-table-row-hover-bg) !important;
}

/* Sipariş filtre butonları */
html.dark-mode .compact-filter-btn {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #b6c2d1 !important;
}

html.dark-mode .compact-filter-btn:hover {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .compact-filter-btn.active {
  background: var(--tm-active-soft-bg) !important;
  border-color: var(--tm-active-soft-border) !important;
  color: var(--tm-active-soft-text) !important;
}

html.dark-mode .compact-filter-btn .badge,
html.dark-mode .compact-filter-btn .valid-status-count {
  background: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-secondary) !important;
}

html.dark-mode .compact-filter-btn.active .badge,
html.dark-mode .compact-filter-btn.active .valid-status-count {
  background: rgba(var(--color-primary-rgb), 0.25) !important;
  color: var(--tm-active-soft-text) !important;
}

/* === FİNANSAL ÖZET WİDGET === */
html.dark-mode .financial-summary-widget,
html.dark-mode #widget-financial-summary .dashboard-widget {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .financial-summary-widget h5,
html.dark-mode .financial-summary-widget .fw-bold {
  color: var(--tm-text-primary) !important;
}

/* Finansal özet satırları */
html.dark-mode #financial-profit-margin,
html.dark-mode #financial-total-revenue {
  background: rgba(51, 65, 85, 0.3) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .financial-summary-widget .text-muted,
html.dark-mode .financial-summary-widget small {
  color: #94a3b8 !important;
}

/* === ÜRÜN PERFORMANS WİDGET === */
html.dark-mode .product-performance-widget,
html.dark-mode #widget-product-performance .dashboard-widget {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .product-item {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .product-item:hover {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .product-item .product-name {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .product-item .product-meta {
  color: #94a3b8 !important;
}

/* === GRAFİK KARTLARI === */
html.dark-mode .chart-card,
html.dark-mode .chart-container,
html.dark-mode [class*="chart-wrapper"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .chart-card .card-header,
html.dark-mode .chart-card .chart-title {
  background: transparent !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* === MODAL - KISAYOL EKLEME === */
html.dark-mode .shortcut-modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .shortcut-modal-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .shortcut-modal-header h5 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .shortcut-option {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .shortcut-option:hover {
  background: var(--tm-bg-card) !important;
  border-color: var(--color-primary) !important;
}

html.dark-mode .shortcut-option .option-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .shortcut-option .option-subtitle {
  color: #94a3b8 !important;
}

/* Shortcut kategori başlıkları */
html.dark-mode .shortcut-category-title {
  color: #94a3b8 !important;
  border-color: var(--tm-border-color) !important;
}

/* === TARİH ARALIĞI PICKER === */
html.dark-mode .date-range-picker,
html.dark-mode .date-picker-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .date-range-picker .preset-btn {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .date-range-picker .preset-btn:hover,
html.dark-mode .date-range-picker .preset-btn.active {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-hover) !important;
}

/* === PLATFORM DROPDOWN === */
html.dark-mode .platform-dropdown-wrapper,
html.dark-mode #platform-dropdown-menu,
html.dark-mode #platform-dropdown-menu-mobile {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .platform-dropdown-item {
  color: #e2e8f0 !important;
}

html.dark-mode .platform-dropdown-item:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .platform-dropdown-item.active {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary-hover) !important;
}

/* === BORDER-T, BORDER-GRAY OVERRIDES === */
html.dark-mode .border-t,
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-100 {
  border-color: var(--tm-border-color) !important;
}

/* === TEXT COLOR OVERRIDES === */
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600 {
  color: #cbd5e1 !important;
}

html.dark-mode .text-gray-500,
html.dark-mode .text-gray-400 {
  color: #94a3b8 !important;
}

/* === BG-WHITE VE BG-GRAY OVERRIDES === */
html.dark-mode .bg-white,
html.dark-mode .bg-gray-50 {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .bg-gray-100 {
  background: var(--tm-bg-primary) !important;
}

/* === ROUNDED-LG KARTLAR === */
html.dark-mode .rounded-lg.bg-white,
html.dark-mode .rounded-lg[class*="bg-white"],
html.dark-mode .rounded-lg.shadow-sm {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-border-color) !important;
}

/* === İNLİNE STYLE OVERRIDES - Dashboard Specific === */
/* Success colored backgrounds */
html.dark-mode [style*="background: var(--success-bg)"],
html.dark-mode [style*="background:var(--success-bg)"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%) !important;
}

/* Info colored backgrounds */
html.dark-mode [style*="background: var(--info-bg)"],
html.dark-mode [style*="background:var(--info-bg)"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
}

/* Warning colored backgrounds */
html.dark-mode [style*="background: var(--warning-bg)"],
html.dark-mode [style*="background:var(--warning-bg)"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
}

/* Purple colored backgrounds */
html.dark-mode [style*="background: var(--purple-bg)"],
html.dark-mode [style*="background:var(--purple-bg)"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
}

/* Border overrides for colored cards */
html.dark-mode [style*="border: 1px solid var(--success-border)"],
html.dark-mode [style*="border:1px solid var(--success-border)"] {
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode [style*="border: 1px solid var(--info-border)"],
html.dark-mode [style*="border:1px solid var(--info-border)"] {
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode [style*="border: 1px solid var(--warning-border)"],
html.dark-mode [style*="border:1px solid var(--warning-border)"] {
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode [style*="border: 1px solid var(--purple-border)"],
html.dark-mode [style*="border:1px solid var(--purple-border)"] {
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* === COLOR VARIABLE OVERRIDES === */
html.dark-mode {
  /* Override CSS variables for dark mode */
  --success-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
  --success-border: rgba(34, 197, 94, 0.3);
  --info-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
  --info-border: rgba(59, 130, 246, 0.3);
  --warning-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
  --warning-border: rgba(245, 158, 11, 0.3);
  --purple-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
  --purple-border: rgba(139, 92, 246, 0.3);
  --error-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
  --error-border: rgba(239, 68, 68, 0.3);
}

/* === SCROLL CONTAINER === */
html.dark-mode .overflow-x-auto,
html.dark-mode .overflow-y-auto {
  scrollbar-color: var(--tm-scrollbar-thumb) var(--tm-scrollbar-track);
}

/* === LOADING STATES === */
html.dark-mode .spinner-border-sm {
  border-color: var(--tm-border-light) !important;
  border-right-color: var(--color-primary) !important;
}

/* === EMPTY STATE === */
html.dark-mode .empty-state,
html.dark-mode .no-data {
  color: #94a3b8 !important;
}

html.dark-mode .empty-state i,
html.dark-mode .no-data i {
  color: var(--tm-text-muted) !important;
}

/* === ICON WRAPPERS === */
html.dark-mode .icon-wrapper[style*="background: linear-gradient"] {
  opacity: 0.9;
}

/* === SİPARİŞ DETAY MODAL === */
html.dark-mode #orderDetailModal .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #orderDetailModal .modal-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #orderDetailModal .modal-body {
  background: var(--tm-bg-card) !important;
}

html.dark-mode #orderDetailModal .table td,
html.dark-mode #orderDetailModal .table th {
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* === HESAPLAMA DETAYLARI MODAL === */
html.dark-mode #calculationDetailsModal .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #calculationDetailsModal .modal-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border-color: var(--color-primary-hover) !important;
}

html.dark-mode #calculationDetailsModal .modal-header .modal-title {
  color: #ffffff !important;
}

html.dark-mode #calculationDetailsModal .modal-body {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .modal-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* Modal içindeki tablolar */
html.dark-mode #calculationDetailsModal .table {
  background: transparent !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .table td,
html.dark-mode #calculationDetailsModal .table th {
  background: transparent !important;
  border-color: var(--tm-border-color) !important;
  color: #e2e8f0 !important;
}

html.dark-mode #calculationDetailsModal .table .fw-bold {
  color: var(--tm-text-primary) !important;
}

/* Başlık renkleri */
html.dark-mode #calculationDetailsModal h6.text-primary {
  color: var(--color-primary-hover) !important;
}

html.dark-mode #calculationDetailsModal h6.text-success {
  color: #4ade80 !important;
}

html.dark-mode #calculationDetailsModal h6.text-danger {
  color: #f87171 !important;
}

/* Tablo hücre değerleri - renkli text sınıfları */
html.dark-mode #calculationDetailsModal .text-primary {
  color: var(--color-primary-hover) !important;
}

html.dark-mode #calculationDetailsModal .text-secondary {
  color: #94a3b8 !important;
}

html.dark-mode #calculationDetailsModal .text-success {
  color: #4ade80 !important;
}

html.dark-mode #calculationDetailsModal .text-danger {
  color: #f87171 !important;
}

html.dark-mode #calculationDetailsModal .text-warning {
  color: #fbbf24 !important;
}

html.dark-mode #calculationDetailsModal .text-info {
  color: #60a5fa !important;
}

/* Mobil görünüm */
html.dark-mode #calculationDetailsModal .mobile-calc-view {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-label {
  color: #94a3b8 !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-value {
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-divider {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-highlight {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-profit {
  color: #4ade80 !important;
}

html.dark-mode #calculationDetailsModal .mobile-calc-ratio {
  color: #60a5fa !important;
}

/* Modal butonları */
html.dark-mode #calculationDetailsModal .btn-secondary {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: #e2e8f0 !important;
}

html.dark-mode #calculationDetailsModal .btn-secondary:hover {
  background: var(--tm-bg-active) !important;
}

html.dark-mode #calculationDetailsModal .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border-color: var(--color-primary-hover) !important;
  color: white !important;
}

/* Hesaplama modalı — yenilenmiş yüzeyler (calc-details-modal) */
html.dark-mode #calculationDetailsModal .calc-details-modal.modal-content {
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55) !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__header.modal-header {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 45%, #f97316 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__kicker {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__body.modal-body {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .modal-product-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: none !important;
}

html.dark-mode #calculationDetailsModal .modal-product-image,
html.dark-mode #calculationDetailsModal .modal-product-image-placeholder {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #64748b !important;
}

html.dark-mode #calculationDetailsModal .modal-product-name {
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .modal-product-meta {
  color: #94a3b8 !important;
}

html.dark-mode #calculationDetailsModal .modal-product-meta strong {
  color: #cbd5e1 !important;
}

html.dark-mode #calculationDetailsModal .modal-grid-item {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #calculationDetailsModal .modal-grid-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode #calculationDetailsModal .modal-grid-item-label {
  color: #94a3b8 !important;
}

html.dark-mode #calculationDetailsModal .modal-section-title.text-primary {
  color: #93c5fd !important;
  border-left-color: #60a5fa !important;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%) !important;
}

html.dark-mode #calculationDetailsModal .modal-section-title.text-danger {
  color: #fca5a5 !important;
  border-left-color: #f87171 !important;
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.18) 0%, transparent 100%) !important;
}

html.dark-mode #calculationDetailsModal .modal-section-title.text-success {
  color: #86efac !important;
  border-left-color: #4ade80 !important;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.15) 0%, transparent 100%) !important;
}

html.dark-mode #calculationDetailsModal .modal-section-title.text-warning {
  color: #fcd34d !important;
  border-left-color: #fbbf24 !important;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, transparent 100%) !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__barem,
html.dark-mode #calculationDetailsModal .calc-details-modal__barem--mobile {
  background: linear-gradient(90deg, rgba(30, 64, 175, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-left-color: #60a5fa !important;
  color: #e2e8f0 !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__barem-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__barem-lines {
  color: #94a3b8 !important;
}

html.dark-mode #calculationDetailsModal .calc-details-modal__footer.modal-footer {
  background: var(--tm-bg-primary) !important;
  border-top-color: #334155 !important;
}

/* === UPLOAD MODAL === */
html.dark-mode #uploadModal .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #uploadModal .modal-header {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
  border-color: #34d399 !important;
}

html.dark-mode #uploadModal .modal-body {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #uploadModal .modal-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #uploadModal .form-label {
  color: #e2e8f0 !important;
}

html.dark-mode #uploadModal .form-control {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* === WIDGET AYARLARI MODAL === */
html.dark-mode #widgetSettingsModal .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #widgetSettingsModal .modal-body {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #widgetSettingsModal .modal-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #widgetSettingsModal .form-label {
  color: #e2e8f0 !important;
}

html.dark-mode #widgetSettingsModal .form-select {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #widgetSettingsModal .form-check-label {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #e2e8f0 !important;
}

html.dark-mode #widgetSettingsModal .form-check-label span {
  color: #e2e8f0 !important;
}

html.dark-mode #widgetSettingsModal [style*="background: #f8fafc"],
html.dark-mode #widgetSettingsModal [style*="background:#f8fafc"] {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode #widgetSettingsModal [style*="background: linear-gradient(135deg, #f0fdf4"],
html.dark-mode #widgetSettingsModal [style*="background:linear-gradient(135deg, #f0fdf4"] {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark-mode #widgetSettingsModal [style*="color: #374151"],
html.dark-mode #widgetSettingsModal [style*="color:#374151"] {
  color: #e2e8f0 !important;
}

html.dark-mode #widgetSettingsModal [style*="border: 1px solid #e5e7eb"],
html.dark-mode #widgetSettingsModal [style*="border:1px solid #e5e7eb"] {
  border-color: var(--tm-border-light) !important;
}

/* Widget settings tab butonları */
html.dark-mode #widgetSettingsModal .widget-settings-tab {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode #widgetSettingsModal .widget-settings-tab.active {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-hover) !important;
}

/* === TÜM MODAL'LAR İÇİN GENEL STİLLER === */
html.dark-mode .modal-content {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modal-header {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modal-header .modal-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal-body {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* Modal içi tablo stilleri */
html.dark-mode .modal .table {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal .table td,
html.dark-mode .modal .table th {
  background: transparent !important;
  border-color: var(--tm-border-color) !important;
  color: #e2e8f0 !important;
}

html.dark-mode .modal .table .fw-bold {
  color: var(--tm-text-primary) !important;
}

/* Modal backdrop */
html.dark-mode .modal-backdrop {
  background-color: var(--tm-modal-backdrop, rgba(0, 0, 0, 0.7)) !important;
}

/* === DATE RANGE PICKER MODAL === */
html.dark-mode .date-range-modal {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .date-range-modal input[type="date"] {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* === AYARLAR TAB === */
html.dark-mode .settings-section,
html.dark-mode .settings-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .settings-section h6,
html.dark-mode .settings-card h6 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .settings-section p,
html.dark-mode .settings-card p {
  color: #94a3b8 !important;
}

/* ========================================
   SİPARİŞLER PANELİ - KAPSAMLI DARK MODE
   Orders list, tabs ve tablo düzeltmeleri
   ======================================== */

/* === SİPARİŞLER CONTAINER VE WRAPPER === */
html.dark-mode .dashboard-widget-inner,
html.dark-mode .bg-white.rounded-lg,
html.dark-mode .bg-white.shadow-sm {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* === SİPARİŞ SEKMELERİ HEADER === */
html.dark-mode .orders-tab-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* === SİPARİŞ TAB BUTONLARI - GELİŞTİRİLMİŞ === */
html.dark-mode .orders-tab-btn {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-border-color) !important;
  color: #b6c2d1 !important;
}

html.dark-mode .orders-tab-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.08) !important;
  border-color: var(--tm-border-strong) !important;
  color: var(--tm-active-soft-text) !important;
}

/* Seçili tab */
html.dark-mode .orders-tab-btn.orders-tab-active {
  background: var(--tm-active-soft-bg) !important;
  border-color: var(--tm-active-soft-border) !important;
  color: var(--tm-active-soft-text) !important;
  box-shadow: none !important;
}

html.dark-mode .orders-tab-btn.orders-tab-active .orders-tab-icon,
html.dark-mode .orders-tab-btn.orders-tab-active .orders-tab-text {
  color: var(--tm-active-soft-text) !important;
}

/* Tab badge'leri */
html.dark-mode .orders-tab-badge {
  background: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-secondary) !important;
}

html.dark-mode .orders-tab-btn.orders-tab-active .orders-tab-badge {
  background: rgba(var(--color-primary-rgb), 0.28) !important;
  color: var(--tm-active-soft-text) !important;
}

/* === SİPARİŞ ARAMA KUTUSU === */
html.dark-mode .orders-search-input,
html.dark-mode #searchInput {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .orders-search-input::placeholder,
html.dark-mode #searchInput::placeholder {
  color: #64748b !important;
}

html.dark-mode .orders-search-input:focus,
html.dark-mode #searchInput:focus {
  border-color: var(--tm-active-soft-border) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12) !important;
}

/* === SİPARİŞ TABLOSU - KAPSAMLI === */
html.dark-mode #ordersTable,
html.dark-mode .orders-table,
html.dark-mode table.table {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #ordersTable thead,
html.dark-mode .orders-table thead,
html.dark-mode table.table thead {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode #ordersTable thead th,
html.dark-mode .orders-table thead th,
html.dark-mode table.table thead th {
  background: var(--tm-bg-primary) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-color) !important;
  border-bottom: 1px solid var(--tm-border-color) !important;
}

html.dark-mode #ordersTable tbody,
html.dark-mode .orders-table tbody,
html.dark-mode table.table tbody {
  background: var(--tm-bg-card) !important;
}

html.dark-mode #ordersTable tbody tr,
html.dark-mode .orders-table tbody tr,
html.dark-mode table.table tbody tr {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #ordersTable tbody td,
html.dark-mode .orders-table tbody td,
html.dark-mode table.table tbody td {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #ordersTable tbody tr:hover,
html.dark-mode .orders-table tbody tr:hover,
html.dark-mode table.table tbody tr:hover {
  background: var(--tm-table-row-hover-bg) !important;
}

html.dark-mode #ordersTable tbody tr:hover td,
html.dark-mode .orders-table tbody tr:hover td,
html.dark-mode table.table tbody tr:hover td {
  background: var(--tm-table-row-hover-bg) !important;
}

/* Tablo içi badge'ler */
html.dark-mode #ordersTable .badge,
html.dark-mode .orders-table .badge {
  background: var(--tm-bg-hover) !important;
  color: #e2e8f0 !important;
}

html.dark-mode #ordersTable .badge.bg-primary,
html.dark-mode .orders-table .badge.bg-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  color: white !important;
}

html.dark-mode #ordersTable .badge.bg-info,
html.dark-mode .orders-table .badge.bg-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

html.dark-mode #ordersTable .badge.bg-success,
html.dark-mode .orders-table .badge.bg-success {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

html.dark-mode #ordersTable .badge.bg-warning,
html.dark-mode .orders-table .badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

html.dark-mode #ordersTable .badge.bg-danger,
html.dark-mode .orders-table .badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

html.dark-mode #ordersTable .badge.bg-secondary,
html.dark-mode .orders-table .badge.bg-secondary {
  background: var(--tm-bg-active) !important;
  color: #e2e8f0 !important;
}

html.dark-mode #ordersTable .badge.bg-light,
html.dark-mode .orders-table .badge.bg-light {
  background: var(--tm-bg-hover) !important;
  color: #e2e8f0 !important;
}

/* Tablo içi butonlar */
html.dark-mode #ordersTable .btn-link,
html.dark-mode .orders-table .btn-link {
  color: var(--color-primary-hover) !important;
}

html.dark-mode #ordersTable .btn-link:hover,
html.dark-mode .orders-table .btn-link:hover {
  color: var(--color-primary) !important;
}

/* Editable cost input */
html.dark-mode #ordersTable .editable-cost input,
html.dark-mode .orders-table .editable-cost input {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* === DURUM FİLTRE BUTONLARI === */
html.dark-mode .valid-status-btn {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

html.dark-mode .valid-status-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
  color: var(--color-primary-hover) !important;
}

html.dark-mode .valid-status-btn.is-active {
  background: rgba(1, 117, 228, 0.14) !important;
  border-color: rgba(1, 117, 228, 0.5) !important;
  color: #93c5fd !important;
  box-shadow: inset 2px 0 0 0 #2563eb !important;
}

html.dark-mode .valid-status-count {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .valid-status-btn.is-active .valid-status-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Tablo başlığı - template'teki .orders-table-header (#ffddc9) override */
html.dark-mode th.orders-table-header,
html.dark-mode #ordersTable thead th.orders-table-header {
  background: var(--tm-bg-primary) !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid var(--tm-border-color) !important;
}

html.dark-mode .orders-table-header .fw-semibold,
html.dark-mode #ordersTable thead th.orders-table-header .fw-semibold {
  color: #94a3b8 !important;
}

html.dark-mode .orders-table-sort-btn,
html.dark-mode #ordersTable thead th .orders-table-sort-btn {
  color: #94a3b8 !important;
}

html.dark-mode .orders-table-sort-btn:hover {
  color: var(--color-primary-hover) !important;
}

/* Baklava outline buton - dark */
html.dark-mode .btn-baklava-outline {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

html.dark-mode .btn-baklava-outline:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
  color: var(--color-primary-hover) !important;
}

/* Maliyet input - inline background override */
html.dark-mode .cost-input,
html.dark-mode .editable-cost .cost-input,
html.dark-mode #ordersTable .form-control.cost-input {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* Tablo loading overlay */
html.dark-mode #tableLoadingOverlay {
  background: rgba(15, 23, 42, 0.92) !important;
}

html.dark-mode #tableLoadingOverlay .text-muted {
  color: #94a3b8 !important;
}

/* Sipariş widget başlıkları ve kenarlıklar */
html.dark-mode #widget-orders-table .border-gray-200 {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #widget-orders-table h5.fw-bold,
html.dark-mode #widget-orders-table h6.fw-bold {
  color: #e2e8f0 !important;
}

/* Sayfalama alanı - sipariş tablosu altı */
html.dark-mode #widget-orders-table .p-3.border-t.border-gray-200,
html.dark-mode #widget-orders-table .p-3.border-t.bg-white {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #widget-orders-table .p-3.border-t .form-select,
html.dark-mode #itemsPerPageSelect,
html.dark-mode #cancelledItemsPerPageSelect,
html.dark-mode #returnedItemsPerPageSelect {
  background-color: var(--tm-bg-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
  -webkit-text-fill-color: var(--tm-text-primary) !important;
}

html.dark-mode #widget-orders-table .p-3.border-t small.text-muted {
  color: #94a3b8 !important;
}

/* Tablo içi metin renkleri */
html.dark-mode #ordersTable .text-dark {
  color: #e2e8f0 !important;
}

html.dark-mode #ordersTable .text-muted,
html.dark-mode #ordersTable small.text-muted {
  color: #94a3b8 !important;
}

html.dark-mode #ordersTable .text-primary {
  color: var(--color-primary-hover) !important;
}

html.dark-mode #ordersTable .text-success {
  color: #4ade80 !important;
}

/* Gelişmiş Filtreler paneli */
html.dark-mode #advancedFiltersSection .bg-white,
html.dark-mode #advancedFiltersSection .rounded-lg.border {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #advancedFiltersSection .form-label,
html.dark-mode #advancedFiltersSection [style*="color: #1e293b"] {
  color: #e2e8f0 !important;
}

html.dark-mode #advancedFiltersSection .form-control,
html.dark-mode #advancedFiltersSection .form-select {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* Mobil sipariş kartları - dark */
html.dark-mode .orders-cards-container .order-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .orders-cards-container .order-card__title {
  color: #e2e8f0 !important;
}

html.dark-mode .orders-cards-container .order-card__image {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .orders-cards-container .order-card__date,
html.dark-mode .orders-cards-container .order-card__price {
  color: #94a3b8 !important;
}

html.dark-mode .orders-cards-container .order-card__ratio.positive {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

html.dark-mode .orders-cards-container .order-card__ratio.negative {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

html.dark-mode .orders-cards-container .order-card__action {
  border-left-color: var(--tm-border-color) !important;
}

/* ========================================
   DASHBOARD ANA SEKME BUTONLARI
   (Genel Bakış, Siparişler, Analiz, Ayarlar)
   ======================================== */

html.dark-mode .dashboard-tabs,
html.dark-mode [class*="dashboard-tab"] {
  background: transparent !important;
}

/* Dashboard tab butonları */
html.dark-mode .dashboard-tab-btn,
html.dark-mode [role="tab"],
html.dark-mode .nav-link[data-bs-toggle="tab"] {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-border-color) !important;
  color: #b6c2d1 !important;
}

html.dark-mode .dashboard-tab-btn:hover,
html.dark-mode [role="tab"]:hover,
html.dark-mode .nav-link[data-bs-toggle="tab"]:hover {
  background: rgba(var(--color-primary-rgb), 0.08) !important;
  border-color: var(--tm-border-strong) !important;
  color: var(--tm-active-soft-text) !important;
}

/* Seçili dashboard tab */
html.dark-mode .dashboard-tab-btn.active,
html.dark-mode [role="tab"][aria-selected="true"],
html.dark-mode .nav-link[data-bs-toggle="tab"].active {
  background: var(--tm-active-soft-bg) !important;
  border-color: var(--tm-active-soft-border) !important;
  color: var(--tm-active-soft-text) !important;
  box-shadow: none !important;
}

/* ========================================
   BASE.HTML BİLEŞENLERİ - DARK MODE
   Account pages, navigation, wrappers
   ======================================== */

/* === SAYFA WRAPPERLARI === */
html.dark-mode .account-page-wrapper,
html.dark-mode .profile-page-wrapper,
html.dark-mode .subscription-page-wrapper,
html.dark-mode .shipping-page-wrapper,
html.dark-mode .security-page-wrapper,
html.dark-mode .notifications-page-wrapper,
html.dark-mode .balance-page-wrapper,
html.dark-mode .integration-page-wrapper,
html.dark-mode .cart-page-wrapper,
html.dark-mode .favorites-page-wrapper,
html.dark-mode .orders-page-wrapper {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* === ACCOUNT NAVIGATION === */
html.dark-mode .account-navigation {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
  border-bottom-color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .account-nav-wrapper a,
html.dark-mode .account-navigation a {
  color: #94a3b8 !important;
}

html.dark-mode .account-nav-wrapper a:hover,
html.dark-mode .account-navigation a:hover {
  color: var(--color-primary-hover) !important;
}

html.dark-mode .account-nav-wrapper a.active,
html.dark-mode .account-navigation a.active {
  color: var(--color-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

/* === RADIO CARD (Fatura tipi seçimi vb.) === */
html.dark-mode .tm-radio-label {
  background: var(--tm-bg-card) !important;
  color: #94a3b8 !important;
  border: 1px solid var(--tm-border-color) !important;
}

html.dark-mode .tm-radio-card > .form-check-input:checked + .tm-radio-label {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary-hover) !important;
  border-color: var(--color-primary) !important;
}

/* === CONTAINER WRAPPERLARI === */
html.dark-mode .account-container-wrapper,
html.dark-mode .profile-container-wrapper,
html.dark-mode .subscription-container-wrapper,
html.dark-mode .shipping-container-wrapper,
html.dark-mode .security-container-wrapper,
html.dark-mode .notifications-container-wrapper,
html.dark-mode .balance-container-wrapper,
html.dark-mode .integration-container-wrapper {
  background: transparent !important;
}

/* === BAKLAVA DESIGN SYSTEM OVERRIDES === */
html.dark-mode .bg-orange-light {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* === GENEL UTILITY OVERRIDES === */
/* bg-white sınıfları */
html.dark-mode .bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* rounded-lg kartlar */
html.dark-mode .rounded-lg {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .rounded-lg.shadow-sm,
html.dark-mode .rounded-lg.shadow {
  background: var(--tm-bg-card) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* border-gray sınıfları */
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-100,
html.dark-mode .border-b {
  border-color: var(--tm-border-color) !important;
}

/* === INLINE ALERT WİDGET === */
html.dark-mode .md-alerts-inline {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .md-alerts-inline > div:first-child {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode #inlineAlertsList {
  background: var(--tm-bg-card) !important;
}

/* === TAB CONTENT === */
html.dark-mode .tab-content {
  background: transparent !important;
}

html.dark-mode #ordersTab,
html.dark-mode #overviewTab,
html.dark-mode #analysisTab,
html.dark-mode #settingsTab {
  background: transparent !important;
}

/* === BORDER VE SHADOW OVERRIDES === */
html.dark-mode [class*="shadow-sm"],
html.dark-mode [class*="shadow"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode [class*="border-gray"] {
  border-color: var(--tm-border-color) !important;
}

/* === TEXT COLOR OVERRIDES === */
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900,
html.dark-mode [style*="color: #1e293b"],
html.dark-mode [style*="color:#1e293b"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600,
html.dark-mode [style*="color: #64748b"],
html.dark-mode [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* === P TAG OVERRIDES === */
html.dark-mode p {
  color: #e2e8f0 !important;
}

/* === SPAN TAG İÇ METİNLER === */
html.dark-mode span:not([style*="color"]):not(.badge):not(.orders-tab-text):not(.orders-tab-badge):not(.tab-text) {
  color: inherit;
}

/* === WIDGET ROW === */
html.dark-mode .widget-row {
  background: transparent !important;
}

/* === EMPTY STATE (Sipariş yok) === */
html.dark-mode .empty-orders,
html.dark-mode .no-orders {
  color: #94a3b8 !important;
}

html.dark-mode .empty-orders i,
html.dark-mode .no-orders i {
  color: var(--tm-text-muted) !important;
}

/* === FİLTRE DROPDOWN === */
html.dark-mode .filter-dropdown,
html.dark-mode [class*="filter-dropdown"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .filter-dropdown-item {
  color: #e2e8f0 !important;
}

html.dark-mode .filter-dropdown-item:hover {
  background: var(--tm-bg-hover) !important;
}

/* === PAGINATION === */
html.dark-mode .pagination .page-link {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .pagination .page-link:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary-hover) !important;
}

html.dark-mode .pagination .page-item.active .page-link {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-text-on-primary) !important;
}

/* === BG-F8FAFC VE DİĞER AÇIK ARKA PLANLAR === */
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f8fafc"],
html.dark-mode [style*="background-color: #f8fafc"],
html.dark-mode [style*="background-color:#f8fafc"],
html.dark-mode [style*="background: var(--tm-text-primary)"],
html.dark-mode [style*="background:var(--tm-text-primary)"] {
  background: var(--tm-bg-primary) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* === BG-WHITE İNLINE STYLE === */
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"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background-color: #ffffff"],
html.dark-mode [style*="background-color:#ffffff"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* ========================================
   GLOBAL.CSS OVERRIDES - KAPSAMLI
   global.css'deki hardcoded renkleri dark mode'da override et
   ======================================== */

/* === NAVBAR (global.css: nav.w-full background: white !important) === */
html.dark-mode nav.w-full {
  background: var(--tm-bg-card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  border-bottom: 1px solid #334155 !important;
}

/* === MAIN CONTENT (global.css: .main-content background: #f2f6fa !important) === */
html.dark-mode .main-content {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
}

/* === TOGGLE BUTTON (global.css: .toggle-btn background: white !important) === */
html.dark-mode .toggle-btn {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .toggle-btn:hover {
  background: var(--tm-bg-active) !important;
  color: var(--tm-text-primary) !important;
}

/* === DATE FILTER SECTION (global.css: hardcoded light gradient) === */
html.dark-mode .date-filter-section {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
  border-color: var(--tm-border-color) !important;
}

/* === DATE INPUTS (global.css: #start_date, #end_date white bg) === */
html.dark-mode #start_date,
html.dark-mode #end_date {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode #start_date:focus,
html.dark-mode #end_date:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* === QUICK FILTER BUTTONS (global.css: .quick-filter-btn background: white) === */
html.dark-mode .quick-filter-btn {
  background: var(--tm-bg-card) !important;
  color: #94a3b8 !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .quick-filter-btn:hover {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .quick-filter-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 6px rgba(var(--color-primary-rgb), 0.3) !important;
}

html.dark-mode .quick-filter-btn.active:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
}

/* === SIDEBAR DATETIME (global.css: .sidebar-datetime) === */
html.dark-mode .sidebar-datetime {
  background: var(--tm-bg-primary) !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .datetime-content {
  color: #94a3b8 !important;
}

/* === SIDEBAR USER PROFILE (global.css: .sidebar-user) === */
html.dark-mode .sidebar-user {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .user-name {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .user-email {
  color: #94a3b8 !important;
}

html.dark-mode .user-avatar {
  border-color: var(--tm-border-light) !important;
}

/* === ACTION BUTTONS (global.css: .action-btn) === */
html.dark-mode .action-btn {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .action-btn:hover {
  background: var(--tm-bg-active) !important;
  color: var(--tm-text-primary) !important;
}

/* === NOTIFICATION BADGE (global.css: border: 2px solid white) === */
html.dark-mode .notification-badge {
  border-color: #1e293b !important;
}

/* === PROFILE DROPDOWN (global.css: .profile-dropdown background: white) === */
html.dark-mode .profile-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* === NOTIFICATION DROPDOWN (global.css: .notification-dropdown) === */
html.dark-mode .notification-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .notification-header {
  border-bottom-color: #334155 !important;
}

html.dark-mode .notification-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .notification-footer {
  border-top-color: #334155 !important;
}

html.dark-mode .notification-link {
  color: var(--color-primary) !important;
}

html.dark-mode .notification-link:hover {
  color: var(--color-primary-hover) !important;
}

/* === DROPDOWN ITEMS (global.css scope) === */
html.dark-mode .dropdown-item {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .dropdown-item:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .dropdown-item.logout {
  color: #f87171 !important;
}

html.dark-mode .dropdown-item.logout:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

html.dark-mode .dropdown-divider {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-color) !important;
}

/* === NAV LINKS - global.css overrides === */
html.dark-mode .nav-link {
  color: #94a3b8 !important;
}

html.dark-mode .nav-link:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .nav-link.active {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(255, 133, 51, 0.1) 100%) !important;
  color: var(--color-primary) !important;
}

/* === NAV SUBLINKS (global.css: .nav-sublink hardcoded light colors) === */
html.dark-mode .nav-sublink {
  color: #94a3b8 !important;
}

html.dark-mode .nav-sublink:hover {
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .nav-sublink.active {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary) !important;
}

/* === NAV GROUP HEADER (global.css: .nav-group-header) === */
html.dark-mode .nav-group-header {
  color: #94a3b8 !important;
}

html.dark-mode .nav-group-header:hover {
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
  color: var(--tm-text-primary) !important;
}

/* === LOGOUT NAV LINK (global.css: .nav-link.logout) === */
html.dark-mode .nav-link.logout {
  color: #f87171 !important;
}

html.dark-mode .nav-link.logout:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

/* === SIDEBAR HOVER BORDERS (global.css) === */
html.dark-mode .sidebar:hover .sidebar-user {
  border-bottom-color: #334155 !important;
}

/* === SIDEBAR HEADER (global.css) === */
html.dark-mode .sidebar-header {
  background: var(--tm-bg-card) !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .brand-title {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .brand-subtitle {
  color: #64748b !important;
}

html.dark-mode .sidebar-toggle {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .sidebar-toggle:hover {
  background: var(--tm-bg-active) !important;
  color: var(--tm-text-primary) !important;
}

/* === SIDEBAR NAV (global.css: sidebar nav scroll) === */
html.dark-mode .sidebar-nav::-webkit-scrollbar-track {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--tm-bg-active) !important;
}

html.dark-mode .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* === SCROLLBAR GLOBAL (global.css uses !important) === */
html.dark-mode ::-webkit-scrollbar-track {
  background: var(--tm-bg-card) !important;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--tm-bg-active) !important;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* ========================================
   DESIGN-SYSTEM.CSS OVERRIDES
   design-system.css'deki hardcoded renkleri override et
   ======================================== */

/* === FORM INPUT (design-system.css: .form-input background: white) === */
html.dark-mode .form-input {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .form-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

html.dark-mode .form-input:disabled {
  background-color: var(--tm-bg-primary) !important;
  color: #64748b !important;
}

/* === TABLE CONTAINER (design-system.css: .table-container background: white) === */
html.dark-mode .table-container {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* === LOADING CONTAINER (design-system.css: .loading-container background: white) === */
html.dark-mode .loading-container {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

/* === CARD OVERRIDES (design-system.css uses white) === */
html.dark-mode .card {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .card-body {
  background-color: transparent !important;
  color: var(--tm-text-primary) !important;
}

/* === FORM LABEL, FORM SELECT (design-system.css) === */
html.dark-mode .form-label {
  color: #94a3b8 !important;
}

html.dark-mode .form-group label {
  color: #94a3b8 !important;
}

html.dark-mode .form-select {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* === TABLE (design-system.css) === */
html.dark-mode .table th {
  background-color: var(--tm-bg-primary) !important;
  color: #94a3b8 !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .table td {
  border-bottom-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.dark-mode .table tbody tr:hover {
  background-color: var(--tm-table-row-hover-bg) !important;
}

/* === BADGE (design-system.css) === */
html.dark-mode .badge-primary {
  background-color: rgba(var(--color-primary-rgb), 0.2) !important;
  color: var(--color-primary-hover) !important;
}

html.dark-mode .badge-secondary {
  background-color: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .badge-success {
  background-color: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}

html.dark-mode .badge-warning {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}

html.dark-mode .badge-error {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

/* === ALERT (design-system.css) === */
html.dark-mode .alert-primary {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
  color: var(--color-primary-hover) !important;
}

html.dark-mode .alert-secondary {
  background-color: rgba(100, 116, 139, 0.15) !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
  color: #94a3b8 !important;
}

html.dark-mode .alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

html.dark-mode .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

html.dark-mode .alert-error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* === BUTTON SECONDARY (design-system.css) === */
html.dark-mode .btn-secondary {
  background-color: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .btn-secondary:hover:not(:disabled) {
  background-color: var(--tm-bg-active) !important;
  border-color: #64748b !important;
}

/* === BUTTON OUTLINE (design-system.css) === */
html.dark-mode .btn-outline {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

html.dark-mode .btn-outline:hover:not(:disabled) {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* ========================================
   CSS VARIABLE OVERRIDES FOR DESIGN SYSTEM
   Dark mode'da CSS değişkenlerini override et
   ======================================== */
html.dark-mode {
  /* Override design-system.css light colors */
  --secondary-50: var(--tm-bg-card);
  --secondary-100: var(--tm-bg-hover);
  --secondary-200: var(--tm-border-light);
  --secondary-300: var(--tm-text-muted);
  --neutral-50: var(--tm-bg-card);
  --neutral-100: var(--tm-bg-hover);
  --neutral-200: var(--tm-border-light);
  --primary-50: rgba(var(--color-primary-rgb), 0.1);
  --primary-100: rgba(var(--color-primary-rgb), 0.2);

  /* Shadow overrides for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ========================================
   UNIVERSAL CATCH-ALL DARK MODE RULES
   Tüm sayfalar için ortak beyaz arka plan yakalama kuralları
   ======================================== */

/* === Tüm bg-white class'ları === */
html.dark-mode .bg-white {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-light {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100 {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-gray-200 {
  background-color: var(--tm-bg-hover) !important;
}

/* === Tüm text renkleri === */
html.dark-mode .text-dark,
html.dark-mode .text-black {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600 {
  color: #cbd5e1 !important;
}

html.dark-mode .text-gray-500,
html.dark-mode .text-gray-400 {
  color: #94a3b8 !important;
}

/* === Bootstrap bg overrides === */
html.dark-mode .bg-body {
  background-color: var(--tm-bg-primary) !important;
}

html.dark-mode .bg-body-secondary {
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-body-tertiary {
  background-color: var(--tm-bg-hover) !important;
}

/* === Container fluid / Wrapper bg catch === */
html.dark-mode .container-fluid {
  background-color: transparent !important;
}

/* === Even/Odd row colors (global.css safelistten gelen) === */
html.dark-mode .odd\:bg-gray-50:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode .even\:bg-white:nth-child(even) {
  background-color: transparent !important;
}

html.dark-mode .hover\:bg-gray-50:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .hover\:bg-gray-100:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* === Focus states === */
html.dark-mode .focus\:bg-white:focus {
  background-color: var(--tm-bg-card) !important;
}

/* === Border color catch-all === */
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .border-gray-100 {
  border-color: #1e293b !important;
}

/* === Placeholder colors === */
html.dark-mode .placeholder-gray-400::placeholder,
html.dark-mode .placeholder-gray-500::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #64748b !important;
}

/* === Bootstrap input-group === */
html.dark-mode .input-group-text {
  background-color: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: #94a3b8 !important;
}

/* === Loading overlay bg-white içerikleri === */
html.dark-mode #loading-overlay .bg-white,
html.dark-mode #globalLoadingOverlay .bg-white {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* === Search inputs === */
html.dark-mode input[type="search"],
html.dark-mode .search-input {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* === Data tables specific === */
html.dark-mode table,
html.dark-mode .table {
  color: var(--tm-text-primary) !important;
}

html.dark-mode table thead,
html.dark-mode .table thead {
  background-color: var(--tm-bg-primary) !important;
}

html.dark-mode table tbody tr {
  background-color: transparent !important;
}

html.dark-mode table tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-mode table tbody tr:hover {
  background-color: var(--tm-table-row-hover-bg) !important;
}

html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode .table-hover > tbody > tr:hover > th {
  background-color: var(--tm-table-row-hover-bg) !important;
}

/* === Genel white bg div'ler === */
html.dark-mode div.bg-white,
html.dark-mode section.bg-white,
html.dark-mode main.bg-white,
html.dark-mode article.bg-white {
  background-color: var(--tm-bg-card) !important;
}

/* === Backdrop filter correction === */
html.dark-mode .backdrop-blur {
  background-color: rgba(15, 23, 42, 0.8) !important;
}

/* === Tab content areas === */
html.dark-mode .tab-content {
  background-color: transparent !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .tab-pane {
  background-color: transparent !important;
  color: var(--tm-text-primary) !important;
}

/* === Popover and tooltip text === */
html.dark-mode .popover-body {
  color: var(--tm-text-primary) !important;
}

/* === Small text and helper text === */
html.dark-mode small,
html.dark-mode .small,
html.dark-mode .text-xs,
html.dark-mode .text-sm {
  color: inherit;
}

/* === Ensure all dark-mode specificity beats global.css !important === */
html.dark-mode .sidebar .nav-link {
  color: #94a3b8 !important;
}

html.dark-mode .sidebar .nav-link:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(255, 133, 51, 0.1) 100%) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar .nav-sublink {
  color: #94a3b8 !important;
}

html.dark-mode .sidebar .nav-sublink:hover {
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar .nav-sublink.active {
  background-color: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar .nav-group-header {
  color: #94a3b8 !important;
}

html.dark-mode .sidebar .nav-group-header:hover {
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
  color: var(--tm-text-primary) !important;
}

/* ========================================
   PAGE-SPECIFIC CSS OVERRIDES
   Sayfa özel CSS dosyalarındaki eksik dark mode override'ları
   ======================================== */

/* === ACCOUNT SIDEBAR STORE (account_sidebar_store.css) === */
html.dark-mode .account-sidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .account-sidebar .sidebar-header {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
}

html.dark-mode .sidebar-nav-link:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

html.dark-mode .sidebar-nav-link.active {
  background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 100%) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .sidebar-nav-divider {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .sidebar-nav-logout:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* === XML SOURCES CUSTOM (xml_sources_custom.css) === */
html.dark-mode .xml-sources-page .xml-source-row {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .xml-sources-page .xml-source-row:hover {
  background: var(--tm-bg-hover) !important;
}

/* === ADVANTAGE (advantage.css) === */
html.dark-mode .advantage-card {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .popup-container {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* === STORE ADMIN ORDERS (store_admin_orders.css) === */
html.dark-mode .orders-header {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .orders-header .stat-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .bulk-actions-bar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .orders-controls {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .filter-tab {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .filter-tab:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

html.dark-mode .filter-tab.active {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .filter-summary {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.05) 100%) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .orders-list-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .orders-list-container {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .order-list-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .order-list-item:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .item-refund-info {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode .refund-amount-display {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .refund-notice {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .empty-state {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .date-range-picker-modal {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .date-picker-btn-clear {
  background: var(--tm-bg-hover) !important;
  color: #94a3b8 !important;
}

html.dark-mode .date-picker-btn-clear:hover {
  background: var(--tm-bg-active) !important;
}

html.dark-mode .modal-close-btn:hover {
  background: var(--tm-bg-hover) !important;
}

/* === MOBILE RESPONSIVE (mobile-responsive.css) === */
html.dark-mode .mobile-menu-toggle {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .mobile-menu-toggle:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .mobile-nav {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .mobile-stats .stat-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .mobile-list .list-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .mobile-alert.success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode .mobile-alert.warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .mobile-alert.error {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .mobile-alert.info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* === STORE MOBILE (store_mobile.css) === */
html.dark-mode .mobile-nav-sidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .mobile-nav-item:active {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

html.dark-mode .mobile-nav-footer {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modern-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modern-item-card {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modern-item-card:hover {
  background: var(--tm-bg-card) !important;
}

html.dark-mode .modern-stat-card {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modern-empty-state {
  background: linear-gradient(135deg, var(--tm-bg-card) 0%, var(--tm-bg-primary) 100%) !important;
  border-color: var(--tm-border-color) !important;
}

/* === CAMPAIGN (campaign.css) === */
html.dark-mode .custom-toggle .toggle-slider:before {
  background: #94a3b8 !important;
}

/* ========================================
   PAGE WRAPPER OVERRIDES
   Tüm sayfa wrapper'larının #f2f6fa arka planlarını override et
   ======================================== */
html.dark-mode .pricing-page-wrapper,
html.dark-mode #qa-page-container,
html.dark-mode .notif-page-wrapper,
html.dark-mode .xml-sync-page,
html.dark-mode .xml-field-mapping-page,
html.dark-mode .category-mapping-page,
html.dark-mode .return-loss-page-wrapper,
html.dark-mode .profit-margin-page,
html.dark-mode #profit-margin-page-wrapper,
html.dark-mode .product-profit-page-wrapper,
html.dark-mode .product-delete-page,
html.dark-mode .order-profit-page,
html.dark-mode .category-profit-page-wrapper,
html.dark-mode .buybox-page,
html.dark-mode .admin-xml-page,
html.dark-mode .advantage-page-card,
html.dark-mode .product-settings-page,
html.dark-mode .commission-page,
html.dark-mode .plus-commission-page,
html.dark-mode .settlements-page,
html.dark-mode [class*="-page-wrapper"],
html.dark-mode [class*="-page"] {
  background: linear-gradient(135deg, var(--tm-bg-primary) 0%, var(--tm-bg-secondary) 100%) !important;
  background-color: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}

/* Buybox: module-page yok; kabuk (page-shell) zemini görünsün — [class*="-page"] ile çakışma ihtimaline karşı */
html.dark-mode .page-shell__inner > .page-stack.buybox-control-module,
html.dark-mode .page-shell__inner .page-stack.buybox-control-module {
  background: transparent !important;
  background-color: transparent !important;
}

html.dark-mode .buybox-control-module .bb-header {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  border-bottom-color: var(--tm-border-color) !important;
}

/* Sayfa header'ları */
html.dark-mode .notif-page-header,
html.dark-mode [class*="page-header"] {
  color: var(--tm-text-primary) !important;
}

/* Page info badge'leri */
html.dark-mode .page-info,
html.dark-mode #pageInfo {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

/* === TABLE STICKY COLUMNS (mobile-responsive.css) === */
html.dark-mode .table th:first-child,
html.dark-mode .table td:first-child {
  background: inherit !important;
}

/* ========================================
   MEGA CATCH-ALL: Tüm yakalanmamış beyaz alanları zorla override et
   ======================================== */

/* Herhangi bir elementin beyaz arka planını dark mode'da override et */
html.dark-mode [class*="bg-white"],
html.dark-mode [class*="bg-light"] {
  background-color: var(--tm-bg-card) !important;
}

/* Tüm form elementleri */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Submit ve button tipi inputlar hariç tut */
html.dark-mode input[type="submit"],
html.dark-mode input[type="button"],
html.dark-mode input[type="reset"],
html.dark-mode button {
  background-color: unset;
  border-color: unset;
  color: unset;
}

/* Checkbox ve radio hariç tut */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  background-color: var(--tm-bg-card) !important;
}

/* Color picker hariç tut */
html.dark-mode input[type="color"] {
  background-color: transparent !important;
}

/* Range slider hariç tut */
html.dark-mode input[type="range"] {
  background-color: transparent !important;
}

/* ===== KAPSAMLı DARK MODE CONTAINER FİX'LERİ ===== */
/* Tüm div, section, article elementlerinin beyaz arka planlarını override et */
html.dark-mode div[class*="bg-white"],
html.dark-mode div[class*="bg-light"],
html.dark-mode section[class*="bg-white"],
html.dark-mode section[class*="bg-light"],
html.dark-mode article[class*="bg-white"],
html.dark-mode article[class*="bg-light"],
html.dark-mode aside[class*="bg-white"],
html.dark-mode aside[class*="bg-light"],
html.dark-mode main[class*="bg-white"],
html.dark-mode main[class*="bg-light"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Card body ve içerik alanları */
html.dark-mode .card-body,
html.dark-mode .card-content,
html.dark-mode [class*="card-body"],
html.dark-mode [class*="content-"] {
  background: transparent !important;
}

html.dark-mode .card-body.bg-white,
html.dark-mode .card-content.bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Panel ve box elementleri */
html.dark-mode .panel,
html.dark-mode .box,
html.dark-mode [class*="panel-"],
html.dark-mode [class*="box-"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* List group items */
html.dark-mode .list-group-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .list-group-item:hover {
  background: var(--tm-bg-hover) !important;
}

html.dark-mode .list-group-item.active {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(255, 133, 51, 0.1) 100%) !important;
  border-color: var(--color-primary) !important;
}

/* Accordion */
html.dark-mode .accordion-item {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .accordion-button {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .accordion-button:not(.collapsed) {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .accordion-body {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}

/* Nav tabs */
html.dark-mode .nav-tabs {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .nav-tabs .nav-link {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .nav-tabs .nav-link.active {
  background: var(--tm-bg-primary) !important;
  color: var(--color-primary) !important;
  border-color: #334155 #334155 transparent !important;
}

html.dark-mode .tab-content {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* Alert komponenti */
html.dark-mode .alert {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .alert-primary {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
  border-color: rgba(var(--color-primary-rgb), 0.4) !important;
  color: #ffa64d !important;
}

html.dark-mode .alert-secondary {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}

html.dark-mode .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fde68a !important;
}

html.dark-mode .alert-danger,
html.dark-mode .alert-error {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

html.dark-mode .alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

html.dark-mode .alert-light {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: #94a3b8 !important;
}

html.dark-mode .alert-dark {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* Progress bar */
html.dark-mode .progress {
  background: var(--tm-bg-primary) !important;
  border: 1px solid var(--tm-border-color) !important;
}

html.dark-mode .progress-bar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
}

/* Pagination */
html.dark-mode .pagination {
  --bs-pagination-bg: #1e293b;
  --bs-pagination-border-color: #334155;
  --bs-pagination-hover-bg: #334155;
  --bs-pagination-hover-border-color: #475569;
  --bs-pagination-focus-bg: #334155;
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-disabled-bg: #0f172a;
  --bs-pagination-disabled-border-color: #334155;
}

html.dark-mode .page-link {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .page-link:hover {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .page-item.active .page-link {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-text-on-primary) !important;
}

html.dark-mode .page-item.disabled .page-link {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: #64748b !important;
}

/* Breadcrumb */
html.dark-mode .breadcrumb {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-border-color) !important;
}

html.dark-mode .breadcrumb-item {
  color: #94a3b8 !important;
}

html.dark-mode .breadcrumb-item.active {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #64748b !important;
}

/* Popover */
html.dark-mode .popover {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .popover-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .popover-body {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .popover-arrow::before,
html.dark-mode .popover-arrow::after {
  border-color: var(--tm-border-color) !important;
}

/* Tooltip */
html.dark-mode .tooltip-inner {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--tm-bg-primary) !important;
}

html.dark-mode .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #0f172a !important;
}

html.dark-mode .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #0f172a !important;
}

html.dark-mode .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #0f172a !important;
}

/* Toast */
html.dark-mode .toast {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .toast-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .toast-body {
  color: var(--tm-text-primary) !important;
}

/* Offcanvas */
html.dark-mode .offcanvas {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .offcanvas-header {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .offcanvas-title {
  color: var(--tm-text-primary) !important;
}

/* Spinner */
html.dark-mode .spinner-border,
html.dark-mode .spinner-grow {
  border-color: var(--tm-border-color) !important;
  border-right-color: var(--color-primary) !important;
}

html.dark-mode .spinner-border-sm,
html.dark-mode .spinner-grow-sm {
  border-color: var(--tm-border-color) !important;
  border-right-color: var(--color-primary) !important;
}

/* ===== ÖZELLİKLİ CONTAINER'LAR ===== */
/* Content wrapper ve main content alanları */
html.dark-mode .content-wrapper,
html.dark-mode [class*="content-wrapper"],
html.dark-mode .main-wrapper,
html.dark-mode [class*="main-wrapper"] {
  background: transparent !important;
}

/* Page wrapper */
html.dark-mode .page-wrapper,
html.dark-mode [class*="page-wrapper"] {
  background: transparent !important;
}

/* Grid containers */
html.dark-mode .grid,
html.dark-mode [class*="grid-"],
html.dark-mode .row,
html.dark-mode [class*="row-"] {
  background: transparent !important;
}

/* Col içindeki kartlar */
html.dark-mode .col .card,
html.dark-mode [class*="col-"] .card,
html.dark-mode .row .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Widget containers */
html.dark-mode .widget,
html.dark-mode [class*="widget-"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Dashboard specific */
html.dark-mode .dashboard-card,
html.dark-mode [class*="dashboard-"],
html.dark-mode .stat-box,
html.dark-mode [class*="stat-"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== INLINE STYLE COMPREHENSIVE OVERRIDE ===== */
/* Tüm beyaz ve açık renk inline style'larını override et */
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"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background-color:#ffffff"],
html.dark-mode [style*="background-color: #ffffff"],
html.dark-mode [style*="background:#FFFFFF"],
html.dark-mode [style*="background: #FFFFFF"],
html.dark-mode [style*="background-color:#FFFFFF"],
html.dark-mode [style*="background-color: #FFFFFF"],
html.dark-mode [style*="background:rgb(255,255,255)"],
html.dark-mode [style*="background: rgb(255,255,255)"],
html.dark-mode [style*="background:rgb(255, 255, 255)"],
html.dark-mode [style*="background: rgb(255, 255, 255)"],
html.dark-mode [style*="background-color:rgb(255,255,255)"],
html.dark-mode [style*="background-color: rgb(255,255,255)"],
html.dark-mode [style*="background-color:rgb(255, 255, 255)"],
html.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Açık gri tonları */
html.dark-mode [style*="background:#f8f9fa"],
html.dark-mode [style*="background: #f8f9fa"],
html.dark-mode [style*="background-color:#f8f9fa"],
html.dark-mode [style*="background-color: #f8f9fa"],
html.dark-mode [style*="background:#f3f4f6"],
html.dark-mode [style*="background: #f3f4f6"],
html.dark-mode [style*="background-color:#f3f4f6"],
html.dark-mode [style*="background-color: #f3f4f6"],
html.dark-mode [style*="background:#f9fafb"],
html.dark-mode [style*="background: #f9fafb"],
html.dark-mode [style*="background-color:#f9fafb"],
html.dark-mode [style*="background-color: #f9fafb"],
html.dark-mode [style*="background:#fafafa"],
html.dark-mode [style*="background: #fafafa"],
html.dark-mode [style*="background-color:#fafafa"],
html.dark-mode [style*="background-color: #fafafa"],
html.dark-mode [style*="background:#f5f5f5"],
html.dark-mode [style*="background: #f5f5f5"],
html.dark-mode [style*="background-color:#f5f5f5"],
html.dark-mode [style*="background-color: #f5f5f5"] {
  background: var(--tm-bg-primary) !important;
  background-color: var(--tm-bg-primary) !important;
}

/* ===== TEXT COLOR FIX'LER ===== */
/* Koyu text renklerini açık yap */
html.dark-mode [style*="color:#000"],
html.dark-mode [style*="color: #000"],
html.dark-mode [style*="color:#000000"],
html.dark-mode [style*="color: #000000"],
html.dark-mode [style*="color:black"],
html.dark-mode [style*="color: black"],
html.dark-mode [style*="color:rgb(0,0,0)"],
html.dark-mode [style*="color: rgb(0,0,0)"],
html.dark-mode [style*="color:rgb(0, 0, 0)"],
html.dark-mode [style*="color: rgb(0, 0, 0)"] {
  color: var(--tm-text-primary) !important;
}

/* Koyu gri text renklerini açık yap */
html.dark-mode [style*="color:#111827"],
html.dark-mode [style*="color: #111827"],
html.dark-mode [style*="color:#1f2937"],
html.dark-mode [style*="color: #1f2937"],
html.dark-mode [style*="color:#374151"],
html.dark-mode [style*="color: #374151"],
html.dark-mode [style*="color:#4b5563"],
html.dark-mode [style*="color: #4b5563"] {
  color: #94a3b8 !important;
}

/* ===== BORDER COLOR FIX'LER ===== */
/* Açık border renklerini koyu yap */
html.dark-mode [style*="border-color:#e5e7eb"],
html.dark-mode [style*="border-color: #e5e7eb"],
html.dark-mode [style*="border-color:#d1d5db"],
html.dark-mode [style*="border-color: #d1d5db"],
html.dark-mode [style*="border-color:#f3f4f6"],
html.dark-mode [style*="border-color: #f3f4f6"] {
  border-color: var(--tm-border-color) !important;
}

/* ===== EKSTRA MODAL VE DROPDOWN GÜÇLENDİRMELERİ ===== */
/* Tüm modal'lar için kapsamlı override */
html.dark-mode .modal,
html.dark-mode [class*="modal"],
html.dark-mode [id*="modal"],
html.dark-mode [id*="Modal"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .modal .modal-content,
html.dark-mode [class*="modal"] .modal-content,
html.dark-mode [id*="modal"] .modal-content,
html.dark-mode [id*="Modal"] .modal-content {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .modal .modal-body,
html.dark-mode [class*="modal"] .modal-body,
html.dark-mode [id*="modal"] .modal-body,
html.dark-mode [id*="Modal"] .modal-body {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

/* Modal içindeki white background'ları override et */
html.dark-mode .modal .bg-white,
html.dark-mode .modal [class*="bg-white"],
html.dark-mode [id*="modal"] .bg-white,
html.dark-mode [id*="Modal"] .bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Modal içindeki card'lar */
html.dark-mode .modal .card,
html.dark-mode [id*="modal"] .card,
html.dark-mode [id*="Modal"] .card {
  background: var(--tm-bg-hover) !important;
  background-color: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
}

/* Modal içindeki list group */
html.dark-mode .modal .list-group-item,
html.dark-mode [id*="modal"] .list-group-item {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

/* Modal içindeki formlar */
html.dark-mode .modal input,
html.dark-mode .modal textarea,
html.dark-mode .modal select,
html.dark-mode [id*="modal"] input,
html.dark-mode [id*="Modal"] input,
html.dark-mode [id*="modal"] textarea,
html.dark-mode [id*="Modal"] textarea,
html.dark-mode [id*="modal"] select,
html.dark-mode [id*="Modal"] select {
  background: var(--tm-bg-primary) !important;
  background-color: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* Dropdown menü güçlendirmeleri */
html.dark-mode .dropdown-menu,
html.dark-mode [class*="dropdown-menu"],
html.dark-mode .dropdown,
html.dark-mode [class*="dropdown"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .dropdown-menu .dropdown-item,
html.dark-mode [class*="dropdown-menu"] .dropdown-item,
html.dark-mode [class*="dropdown-menu"] a,
html.dark-mode [class*="dropdown-menu"] button {
  background: transparent !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .dropdown-menu .dropdown-item:hover,
html.dark-mode [class*="dropdown-menu"] .dropdown-item:hover,
html.dark-mode [class*="dropdown-menu"] a:hover,
html.dark-mode [class*="dropdown-menu"] button:hover {
  background: var(--tm-bg-hover) !important;
  background-color: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .dropdown-menu .dropdown-item.active,
html.dark-mode [class*="dropdown-menu"] .dropdown-item.active {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  color: var(--color-primary) !important;
}

/* Select2 ve özel dropdown'lar */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .select2-dropdown {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .select2-results__option {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .select2-results__option--highlighted {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}

/* Bootstrap dropdown toggle */
html.dark-mode .dropdown-toggle,
html.dark-mode [data-bs-toggle="dropdown"] {
  background: transparent !important;
  color: var(--tm-text-primary) !important;
}

/* Popover ve Tooltip */
html.dark-mode .popover,
html.dark-mode [class*="popover"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .popover .popover-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .popover .popover-body {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

/* Sadece görünür Bootstrap tooltip — [class*="tooltip"] kpi-tooltip / gizli örnekleri sürekli görünür yapıyordu */
html.dark-mode .tooltip.show,
html.dark-mode .tooltip.showing {
  opacity: 1 !important;
}

html.dark-mode .tooltip .tooltip-inner {
  background: var(--tm-bg-primary) !important;
  background-color: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Context menu ve right-click menüler */
html.dark-mode .context-menu,
html.dark-mode [class*="context-menu"] {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Offcanvas */
html.dark-mode .offcanvas,
html.dark-mode [class*="offcanvas"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .offcanvas-header {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .offcanvas-body {
  background: var(--tm-bg-card) !important;
}

/* ===== TÜM SAYFALARA GENEL UYGULANACAK FİNAL KURALLAR ===== */
/* Her türlü div, section, article'ın beyaz bg'sini override et */
html.dark-mode div[style*="background"],
html.dark-mode section[style*="background"],
html.dark-mode article[style*="background"],
html.dark-mode main[style*="background"],
html.dark-mode aside[style*="background"],
html.dark-mode header[style*="background"],
html.dark-mode footer[style*="background"] {
  /* Bu selector'ler zaten CSS'te var, sadece önemlisi vurgulamak için tekrar ekliyoruz */
}

/* Bootstrap component overrides - specificity artırma */
html.dark-mode .card.bg-white,
html.dark-mode .card.bg-light,
html.dark-mode .card.bg-gray-50,
html.dark-mode .alert.bg-white,
html.dark-mode .alert.bg-light,
html.dark-mode .badge.bg-white,
html.dark-mode .badge.bg-light {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Nav pills ve tabs */
html.dark-mode .nav-pills .nav-link {
  background: var(--tm-bg-card) !important;
  color: #94a3b8 !important;
}

html.dark-mode .nav-pills .nav-link:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  color: white !important;
}

/* Collapse content */
html.dark-mode .collapse,
html.dark-mode [class*="collapse"] {
  background: transparent !important;
}

html.dark-mode .collapse .card,
html.dark-mode [class*="collapse"] .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== SAYFA BAZLI ÖZEL DÜZELTMELER ===== */
/* XML sayfaları için özel fix */
html.dark-mode .xml-sources-page,
html.dark-mode .xml-upload-page,
html.dark-mode .xml-pricing-page,
html.dark-mode [class*="xml-"] {
  background: transparent !important;
}

html.dark-mode .xml-sources-page .card,
html.dark-mode .xml-upload-page .card,
html.dark-mode [class*="xml-"] .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Product sayfaları */
html.dark-mode .product-settings-page,
html.dark-mode .product-delete-page,
html.dark-mode [class*="product-"] {
  background: transparent !important;
}

/* Dashboard sayfaları */
html.dark-mode body:has(#mainTabContainer),
html.dark-mode [class*="dashboard-"] {
  background: transparent !important;
}

html.dark-mode body:has(#mainTabContainer) .card,
html.dark-mode [class*="dashboard-"] .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* ===== IMPORTANT OVERRIDE'LAR - EN YÜKSEK ÖNCELİK ===== */
/* CSS specificity'yi maximum'a çıkar */
html.dark-mode body div.bg-white,
html.dark-mode body section.bg-white,
html.dark-mode body main.bg-white,
html.dark-mode body article.bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode body div[class*="bg-white"],
html.dark-mode body section[class*="bg-white"],
html.dark-mode body main[class*="bg-white"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Container'lar için maximum specificity */
html.dark-mode body .container.bg-white,
html.dark-mode body .container-fluid.bg-white,
html.dark-mode body [class*="container"].bg-white {
  background: transparent !important;
  background-color: transparent !important;
}

/* Son çare - tüm beyaz bg'leri yakala */
html.dark-mode * [class*="bg-white"],
html.dark-mode * [class*="bg-light"],
html.dark-mode * [class*="bg-gray-50"] {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* ===== END OF COMPREHENSIVE DARK MODE FIXES ===== */

/* ===== SCOPED PAGE STYLES - DARK MODE OVERRIDES ===== */
/* XML Category Mapping ve benzeri sayfalar için */
html.dark-mode .category-mapping-page {
  background: transparent !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .page-header {
  background: linear-gradient(135deg, #3730a3 0%, #4c1d95 100%) !important;
  border-color: var(--tm-border-light) !important;
}

html.dark-mode .category-mapping-page .page-header h1,
html.dark-mode .category-mapping-page .page-header h2,
html.dark-mode .category-mapping-page .page-header h3 {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .page-header p {
  color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .category-mapping-page .progress-card,
html.dark-mode .category-mapping-page .stats-card,
html.dark-mode .category-mapping-page .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .progress-step.active {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  color: var(--color-primary) !important;
}

html.dark-mode .category-mapping-page .progress-step.completed {
  color: #86efac !important;
}

html.dark-mode .category-mapping-page .stats-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .category-mapping-page .stats-icon {
  background: #2563eb !important;
  color: white !important;
}

html.dark-mode .category-mapping-page .table {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .table thead {
  background: var(--tm-bg-primary) !important;
}

html.dark-mode .category-mapping-page .table td,
html.dark-mode .category-mapping-page .table th {
  border-color: var(--tm-border-color) !important;
}

html.dark-mode .category-mapping-page .form-control,
html.dark-mode .category-mapping-page .form-select,
html.dark-mode .category-mapping-page input,
html.dark-mode .category-mapping-page select,
html.dark-mode .category-mapping-page textarea {
  background: var(--tm-bg-primary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .form-control:focus,
html.dark-mode .category-mapping-page .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25) !important;
}

html.dark-mode .category-mapping-page .btn-light {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-light) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .category-mapping-page .btn-light:hover {
  background: var(--tm-bg-active) !important;
  border-color: #64748b !important;
}

html.dark-mode .category-mapping-page .alert {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

html.dark-mode .category-mapping-page .badge {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  color: #ffa64d !important;
}

html.dark-mode .category-mapping-page .badge.bg-success {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}

html.dark-mode .category-mapping-page .badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fde68a !important;
}

html.dark-mode .category-mapping-page .badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

/* Product Settings Page */
html.dark-mode .product-settings-page {
  background: transparent !important;
}

html.dark-mode .product-settings-page .card,
html.dark-mode .product-settings-page .stats-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* XML Sync Page */
html.dark-mode .xml-sync-page {
  background: transparent !important;
}

html.dark-mode .xml-sync-page .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Product Delete Page */
html.dark-mode .product-delete-page {
  background: transparent !important;
}

html.dark-mode .product-delete-page .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

/* Tüm sayfalardaki scoped style'lar için genel kural */
html.dark-mode [class*="-page"] {
  color: var(--tm-text-primary) !important;
}

html.dark-mode [class*="-page"] .card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
}

html.dark-mode [class*="-page"] .btn-light,
html.dark-mode [class*="-page"] .bg-light {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode [class*="-page"] .bg-white {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

/* ===== FINAL NUCLEAR OPTION - EN SON ÇARE ===== */
/* Eğer yukarıdaki tüm kurallar işe yaramazsa */
html.dark-mode * {
  /* Sadece bg-white class'ı olan elementler için */
}

html.dark-mode *.bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode *.bg-light {
  background: var(--tm-bg-hover) !important;
  background-color: var(--tm-bg-hover) !important;
}

html.dark-mode *.bg-gray-50,
html.dark-mode *.bg-gray-100 {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

/* Text-dark class'ları için */
html.dark-mode *.text-dark,
html.dark-mode *.text-black {
  color: var(--tm-text-primary) !important;
}

html.dark-mode *.text-muted {
  color: #94a3b8 !important;
}

html.dark-mode *.text-secondary {
  color: #94a3b8 !important;
}

/* ========================================================================
   DARK MODE AUDIT 2026-06-06 — NAMESPACE COVERAGE FIX PACK (A–F)
   Storefront + Homepage v2 + Bootstrap utility + commission/advantage
   + hardcoded orange surfaces (banner/footer) + tip-icon visibility.
   Sırasıyla: sayfa shell → container → element. Hiçbir light değer
   kalmamalı; aksent renkler dark-uyumlu canlı tonlara remap.
   ======================================================================== */

/* ---- A1) Storefront layout (store_layout.html) — header + body ---- */
html.dark-mode .store-header,
html.dark-mode .store-header *:not(.store-search-icon):not(svg):not(path) {
  /* nested element bg'lerini şeffaf yap; kabuk dark yüzey verir */
}
html.dark-mode .store-header {
  background: var(--tm-bg-card) !important;
  border-bottom-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode .store-header .store-logo,
html.dark-mode .store-header .store-logo a {
  color: var(--color-primary) !important;
}
html.dark-mode .store-header .search-input,
html.dark-mode .store-header .store-search-input,
html.dark-mode .store-header input.search-input,
html.dark-mode input.store-search-input {
  background: var(--tm-bg-input) !important;
  border-color: var(--tm-border-input) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .store-header .search-input::placeholder {
  color: var(--tm-text-muted) !important;
}
html.dark-mode .store-header .header-action-btn,
html.dark-mode .store-header .store-header-icon-btn {
  background: transparent !important;
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .store-header .header-action-btn:hover,
html.dark-mode .store-header .store-header-icon-btn:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--color-primary) !important;
}
/* Üst duyuru bandı (Free shipping ribbon) — turuncu yerine derin lacivert */
html.dark-mode .announcement-bar,
html.dark-mode .store-announcement-bar,
html.dark-mode .top-announcement-strip {
  background: linear-gradient(90deg, var(--tm-bg-secondary), var(--tm-bg-tertiary)) !important;
  color: var(--tm-text-primary) !important;
  border-bottom-color: var(--tm-border-color) !important;
}

/* ---- A2) Store account sidebar (storeAccountNavigation) ---- */
html.dark-mode .store-account-sidebar,
html.dark-mode nav.store-account-sidebar,
html.dark-mode #storeAccountNavigation,
html.dark-mode nav#storeAccountNavigation {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}
html.dark-mode .store-sidebar-brand-bar,
html.dark-mode .store-account-sidebar__brand {
  /* Markalı turuncu yerine yumuşak primary tint, beyaz logo metni okunaklı */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--tm-logo-blue-deep) 100%) !important;
  color: var(--tm-fg-on-brand, #ffffff) !important;
  border-color: transparent !important;
}
html.dark-mode .store-sidebar-brand-bar *,
html.dark-mode .store-account-sidebar__brand * {
  color: #ffffff !important;
}
html.dark-mode .store-sidebar-section-title {
  color: var(--tm-text-muted) !important;
}
html.dark-mode .store-sidebar-row,
html.dark-mode a.store-sidebar-row {
  background: transparent !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-light) !important;
}
html.dark-mode .store-sidebar-row:hover,
html.dark-mode a.store-sidebar-row:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .store-sidebar-row.active,
html.dark-mode a.store-sidebar-row.active {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
  color: var(--tm-text-primary) !important;
  border-left-color: var(--color-primary) !important;
}
html.dark-mode .store-sidebar-row i,
html.dark-mode .store-sidebar-row svg {
  color: var(--color-primary) !important;
  stroke: currentColor !important;
}

/* ---- A3) account-sidebar (account_sidebar_store.css base class) ---- */
/* The base account-sidebar already covered earlier; ensure storefront pages
   that load account_sidebar_store.css also get correct dark surface. */
html.dark-mode aside.account-sidebar,
html.dark-mode #accountSidebar,
html.dark-mode aside#accountSidebar {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}
html.dark-mode .sidebar-header {
  background: linear-gradient(135deg, var(--tm-bg-tertiary), var(--tm-bg-elevated)) !important;
  border-bottom-color: var(--tm-border-color) !important;
}
html.dark-mode .sidebar-user-avatar {
  background: linear-gradient(135deg, var(--tm-bg-hover), var(--tm-bg-active)) !important;
  border-color: var(--color-primary) !important;
}
html.dark-mode .user-avatar-placeholder,
html.dark-mode .sidebar-nav-link i {
  color: var(--color-primary) !important;
}
html.dark-mode .sidebar-user-name { color: var(--tm-text-primary) !important; }
html.dark-mode .sidebar-user-email { color: var(--tm-text-muted) !important; }
html.dark-mode .sidebar-nav-link {
  color: var(--tm-text-secondary) !important;
  border-left-color: transparent !important;
}
html.dark-mode .sidebar-nav-link:hover {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-primary) !important;
  border-left-color: var(--color-primary) !important;
}
html.dark-mode .sidebar-nav-link.active {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
  color: var(--tm-text-primary) !important;
  border-left-color: var(--color-primary) !important;
}
html.dark-mode .sidebar-nav-divider {
  background: var(--tm-border-light) !important;
}
html.dark-mode .sidebar-nav-logout {
  border-top-color: var(--tm-border-color) !important;
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .sidebar-nav-logout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--tm-error) !important;
}
html.dark-mode .sidebar-nav-logout i { color: var(--tm-error) !important; }

/* ---- A4) Marketplace page (/account/marketplace) ---- */
html.dark-mode .marketplace-content,
html.dark-mode div.marketplace-content {
  background: transparent !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .marketplace-card,
html.dark-mode div.marketplace-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: var(--tm-shadow-md) !important;
}
html.dark-mode .marketplace-card h1,
html.dark-mode .marketplace-card h2,
html.dark-mode .marketplace-card h3,
html.dark-mode .marketplace-card h4,
html.dark-mode .marketplace-card h5,
html.dark-mode .marketplace-card h6,
html.dark-mode .marketplace-card label,
html.dark-mode .marketplace-card p {
  color: var(--tm-text-primary) !important;
}
html.dark-mode .quick-action-card,
html.dark-mode a.quick-action-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: var(--tm-shadow-sm) !important;
}
html.dark-mode .quick-action-card:hover,
html.dark-mode a.quick-action-card:hover {
  background: var(--tm-bg-elevated) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
}
html.dark-mode .quick-action-card .icon,
html.dark-mode .quick-action-card i {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
  color: var(--color-primary) !important;
}

/* ---- A5) Balance page (/balance) ---- */
html.dark-mode .balance-card,
html.dark-mode div.balance-card {
  background: linear-gradient(135deg, var(--tm-bg-card), var(--tm-bg-elevated)) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: var(--tm-shadow-md) !important;
}
html.dark-mode .balance-card h1,
html.dark-mode .balance-card h2,
html.dark-mode .balance-card h3,
html.dark-mode .balance-card h4,
html.dark-mode .balance-card h5,
html.dark-mode .balance-card h6,
html.dark-mode .balance-card .balance-label,
html.dark-mode .balance-card .balance-title {
  color: var(--tm-text-primary) !important;
}
html.dark-mode .balance-card .balance-amount,
html.dark-mode .balance-card .balance-value {
  color: var(--color-primary) !important;
  text-shadow: none !important;
}
html.dark-mode .balance-card .balance-icon,
html.dark-mode .balance-card .icon-wrap {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
  color: var(--color-primary) !important;
}
html.dark-mode .payment-method-buttons,
html.dark-mode div.payment-method-buttons {
  background: var(--tm-bg-secondary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .payment-method-btn,
html.dark-mode label.payment-method-btn,
html.dark-mode .btn.payment-method-btn {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .payment-method-btn:hover {
  background: var(--tm-bg-elevated) !important;
  border-color: var(--color-primary) !important;
}
html.dark-mode .payment-method-btn.active,
html.dark-mode input[type="radio"]:checked + .payment-method-btn,
html.dark-mode label.payment-method-btn.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
html.dark-mode .payment-method-btn .pay-soon,
html.dark-mode .payment-method-btn .badge-soon {
  color: var(--tm-text-muted) !important;
}
html.dark-mode .balance-filters,
html.dark-mode div.balance-filters {
  background: var(--tm-bg-secondary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .balance-filters label,
html.dark-mode .balance-filters .filter-label {
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .table-empty,
html.dark-mode #tableEmpty.table-empty,
html.dark-mode div.table-empty {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .table-empty h3,
html.dark-mode .table-empty p {
  color: var(--tm-text-primary) !important;
}

/* ---- B1) Homepage v2 marketing page ---- */
html.dark-mode nav#mainNavbar,
html.dark-mode nav#mainNavbar.navbar {
  background: rgba(11, 18, 32, 0.85) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: var(--tm-text-primary) !important;
  backdrop-filter: blur(12px);
}
html.dark-mode nav#mainNavbar a,
html.dark-mode nav#mainNavbar .nav-link,
html.dark-mode nav#mainNavbar .navbar-brand {
  color: var(--tm-text-primary) !important;
}
html.dark-mode .v2-btn--ghost,
html.dark-mode a.v2-btn--ghost {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .v2-btn--ghost:hover,
html.dark-mode a.v2-btn--ghost:hover {
  background: var(--tm-bg-hover) !important;
  border-color: var(--color-primary) !important;
}
html.dark-mode .v2-btn--primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html.dark-mode .v2-mock,
html.dark-mode div.v2-mock {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}
html.dark-mode .v2-mock__url,
html.dark-mode span.v2-mock__url {
  background: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-muted) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .v2-mock__kpi,
html.dark-mode div.v2-mock__kpi {
  background: var(--tm-bg-tertiary) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .v2-mock__kpi .label,
html.dark-mode .v2-mock__kpi small {
  color: var(--tm-text-muted) !important;
}
html.dark-mode .v2-panel__tabs,
html.dark-mode div.v2-panel__tabs {
  background: var(--tm-bg-tertiary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .v2-panel__tabs button,
html.dark-mode .v2-panel__tabs a {
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .v2-panel__tabs button.active,
html.dark-mode .v2-panel__tabs a.active {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .v2-kpi-card,
html.dark-mode div.v2-kpi-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
  box-shadow: var(--tm-shadow-md) !important;
}
html.dark-mode .v2-kpi-card .label,
html.dark-mode .v2-kpi-card .v2-kpi-label,
html.dark-mode .v2-kpi-card small {
  color: var(--tm-text-muted) !important;
}
html.dark-mode .v2-kpi-card .value,
html.dark-mode .v2-kpi-card .v2-kpi-value,
html.dark-mode .v2-kpi-card strong {
  color: var(--tm-text-primary) !important;
}
html.dark-mode section.v2-problem,
html.dark-mode section#features.v2-features,
html.dark-mode .v2-features,
html.dark-mode .v2-section,
html.dark-mode .v2-hero,
html.dark-mode .v2-cta,
html.dark-mode .v2-pricing,
html.dark-mode .v2-testimonials,
html.dark-mode .v2-footer {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .v2-section h1,
html.dark-mode .v2-section h2,
html.dark-mode .v2-section h3,
html.dark-mode .v2-features h2,
html.dark-mode .v2-problem h2,
html.dark-mode .v2-hero h1 {
  color: var(--tm-text-primary) !important;
}
html.dark-mode .v2-section p,
html.dark-mode .v2-features p,
html.dark-mode .v2-problem p {
  color: var(--tm-text-secondary) !important;
}
html.dark-mode .v2-card,
html.dark-mode .v2-feature-card,
html.dark-mode .v2-pricing-card,
html.dark-mode .v2-testimonial,
html.dark-mode .v2-tile {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode body[data-page="homepage"] {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}

/* ---- C) Bootstrap .bg-white utility — stronger override
   Mevcut html.dark-mode *.bg-white kuralı bazı sayfalarda specifity
   savaşını kaybediyor (.commission-page-card.bg-white). Çift class
   ile aynı specifity'ye eşit-ya-fazla yükselt + position kazanç. */
html.dark-mode .bg-white,
html.dark-mode div.bg-white,
html.dark-mode section.bg-white,
html.dark-mode article.bg-white,
html.dark-mode aside.bg-white,
html.dark-mode header.bg-white,
html.dark-mode .card.bg-white,
html.dark-mode .commission-page-card.bg-white,
html.dark-mode .advantage-page-card.bg-white,
html.dark-mode [class*="page-card"].bg-white,
html.dark-mode [class*="-card"].bg-white {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .table-container,
html.dark-mode div.table-container {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .kom-empty,
html.dark-mode div.kom-empty,
html.dark-mode .empty-state,
html.dark-mode div.empty-state {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .kom-empty h3,
html.dark-mode .kom-empty h2,
html.dark-mode .empty-state h3 {
  color: var(--tm-text-primary) !important;
}
/* Bootstrap text utilities used as headings on white bg */
html.dark-mode .text-dark,
html.dark-mode h1.text-dark,
html.dark-mode h2.text-dark,
html.dark-mode h3.text-dark,
html.dark-mode h4.text-dark {
  color: var(--tm-text-primary) !important;
}

/* ---- D) komisyon / advantage shell — pol-ink-* token dark remap ---- */
html.dark-mode {
  --pol-ink-900: var(--tm-text-primary);   /* başlık metni */
  --pol-ink-700: #c7d2dc;
  --pol-ink-500: var(--tm-text-secondary); /* subtitle */
  --pol-ink-400: var(--tm-text-muted);
  --pol-ink-300: #6b7a90;
  --pol-ink-200: var(--tm-border-light);
  --pol-ink-100: var(--tm-border-color);
  --pol-ink-50:  var(--tm-bg-secondary);
}
/* Bonus: tmv2-page-title direkt fallback (selectörlerin biri kaçırsa diye) */
html.dark-mode h1.tmv2-page-title,
html.dark-mode .tmv2-page-title,
html.dark-mode #tmv2App .tmv2-page-title,
html.dark-mode #tmv2App .kom-page .tmv2-page-title,
html.dark-mode #tmv2App .kom-page h1.tmv2-page-title.kom-hero__title {
  color: var(--tm-text-primary) !important;
}
html.dark-mode #tmv2App .tmv2-page-subtitle,
html.dark-mode #tmv2App .kom-page .tmv2-page-subtitle {
  color: var(--tm-text-secondary) !important;
}

/* ---- E) "Nasıl Yapılır?" tip-icon (🧭) — okunur kontrast ---- */
html.dark-mode .btn-nasil-yapilir-icon,
html.dark-mode div.btn-nasil-yapilir-icon,
html.dark-mode #tmv2App .btn-nasil-yapilir-icon {
  background: color-mix(in srgb, var(--tm-warning) 28%, var(--tm-bg-card)) !important;
  color: var(--tm-warning) !important;
  border: 1px solid color-mix(in srgb, var(--tm-warning) 35%, transparent) !important;
  text-shadow: none !important;
}
html.dark-mode .btn-nasil-yapilir,
html.dark-mode #tmv2App .btn-nasil-yapilir {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .btn-nasil-yapilir:hover,
html.dark-mode #tmv2App .btn-nasil-yapilir:hover {
  background: var(--tm-bg-elevated) !important;
  border-color: var(--color-primary) !important;
}

/* ---- F) Inline hardcoded orange/cream — attribute-selector dark remap
   F27A1A (sıcak turuncu), FFF8F0 / FFE5CC / FFF3E4 (krem dolgular),
   FF8C3D (gradient ucu), f97316 (commission CTA button bg).
   Sadece dark mode'da, sadece [style*="..."] taşıyan elementlerde geçerli. */
html.dark-mode [style*="background: linear-gradient(to bottom, #FFF8F0"],
html.dark-mode [style*="background: linear-gradient(to right, #FFF3E4"],
html.dark-mode [style*="background:#FFF8F0"],
html.dark-mode [style*="background: #FFF8F0"],
html.dark-mode [style*="background-color: #FFF8F0"],
html.dark-mode [style*="background-color:#FFF8F0"] {
  background: var(--tm-bg-secondary) !important;
  background-color: var(--tm-bg-secondary) !important;
  background-image: none !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode [style*="border-color: #FFE5CC"],
html.dark-mode [style*="border-color:#FFE5CC"] {
  border-color: var(--tm-border-color) !important;
}
html.dark-mode [style*="color: #F27A1A"],
html.dark-mode [style*="color:#F27A1A"] {
  /* Sıcak parlak turuncu yerine dark-uyumlu accent: harmonik canlı */
  color: var(--color-accent) !important;
}
html.dark-mode [style*="background: linear-gradient(to right, #F27A1A, #FF8C3D)"],
html.dark-mode [style*="background:linear-gradient(to right,#F27A1A,#FF8C3D)"] {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
  background-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Commission "Ara" CTA bg directly inlined as #f97316 → dark accent */
html.dark-mode [style*="background-color: #f97316"],
html.dark-mode [style*="background-color:#f97316"],
html.dark-mode [style*="background: #f97316"],
html.dark-mode [style*="background:#f97316"] {
  background: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Dashboard analytics tip-icon yellow inline (#fef3c7) */
html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fef3c7"],
html.dark-mode [style*="background-color: #fef3c7"],
html.dark-mode [style*="background-color:#fef3c7"] {
  background: color-mix(in srgb, var(--tm-warning) 22%, var(--tm-bg-card)) !important;
  background-color: color-mix(in srgb, var(--tm-warning) 22%, var(--tm-bg-card)) !important;
  color: var(--tm-warning) !important;
}
/* Excel button white-text inline border-less */
html.dark-mode a#excelDownloadBtn[style*="color: white"],
html.dark-mode a#excelDownloadBtn[style*="color:white"] {
  /* keep white text; ensure visible bg via class fallback */
  background: linear-gradient(135deg, var(--tm-success), #16a34a) !important;
}

/* ---- Top announcement bar (DHL eCommerce ribbon — turuncu marquee) ---- */
html.dark-mode .topbar-announcement,
html.dark-mode .announcement-strip,
html.dark-mode .top-marquee,
html.dark-mode .marquee-bar,
html.dark-mode div[class*="announcement"][class*="bar"] {
  background: linear-gradient(90deg, var(--tm-bg-secondary), var(--tm-bg-tertiary)) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .topbar-announcement *,
html.dark-mode .announcement-strip * {
  color: var(--tm-text-primary) !important;
}

/* Campaign banner — store_header.html marquee gradient remap (audit 2026-06-06).
 * Light: #F27A1A → #ff8c3d (parlak turuncu); Dark: yumuşak primary tint dilim. */
html.dark-mode .campaign-banner,
html.dark-mode div.campaign-banner {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary) 28%, var(--tm-bg-secondary)),
    color-mix(in srgb, var(--color-primary) 18%, var(--tm-bg-tertiary))
  ) !important;
  border-bottom: 1px solid var(--tm-border-color) !important;
}
html.dark-mode .campaign-banner .marquee-content,
html.dark-mode .campaign-banner .marquee-track,
html.dark-mode .campaign-banner span {
  color: var(--tm-text-primary) !important;
}

/* ========================================================================
   DARK MODE AUDIT 2026-06-06 — PASS 2 (real-toggle TEST RCA)
   PR #1768 sonrası gerçek-toggle akışıyla yapılan inceleme: bazı
   sayfalarda görünür beyaz yüzeyler kaldı. Kök neden:
   (1) komisyon-shell.css `#tmv2App .kom-page .X { background: #fff !important }`
       PR #1768 kuralından daha yüksek specificity (1,2,0) — !important + scope
       savaşını specificity kazanıyor.
   (2) homepage-v2.css `#tm-home-v2 { --tm-bg-card: #ffffff }` local token
       override — dark mode'da bile #tm-home-v2 içindeki var(--tm-bg-card)
       beyazı çözüyor.
   Çözüm: (1) html.dark-mode + #tmv2App + .kom-page zincirleriyle specificity
   yükselt; (2) html.dark-mode #tm-home-v2 scope'unda token re-bind.
   ======================================================================== */

/* ---- (1) komisyon/advantage shell: specificity 1,4,1 > komisyon-shell 1,2,0 ---- */
html.dark-mode #tmv2App .kom-page .commission-page-card,
html.dark-mode #tmv2App .kom-page .commission-page-card.bg-white,
html.dark-mode #tmv2App .kom-page .advantage-page-card,
html.dark-mode #tmv2App .kom-page .advantage-page-card.bg-white,
html.dark-mode #tmv2App .kom-page .plus-commission-page-card,
html.dark-mode #tmv2App .kom-page .table-container,
html.dark-mode #tmv2App .kom-page .table-wrapper,
html.dark-mode #tmv2App .kom-page .kom-empty,
html.dark-mode #tmv2App .kom-page .empty-state,
html.dark-mode #tmv2App .kom-page .data-table,
html.dark-mode #tmv2App .kom-page .commission-box,
html.dark-mode #tmv2App .kom-page .commission-card,
html.dark-mode #tmv2App .kom-page .filter-bar,
html.dark-mode #tmv2App .kom-page .filter-section {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode #tmv2App .kom-page .kom-empty {
  border: 1px dashed var(--tm-border-color) !important;
}
html.dark-mode #tmv2App .kom-page .data-table thead th {
  background: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode #tmv2App .kom-page .data-table tbody tr {
  background: transparent !important;
  border-color: var(--tm-border-light) !important;
}
html.dark-mode #tmv2App .kom-page .data-table tbody tr:hover {
  background: var(--tm-bg-hover) !important;
}
html.dark-mode #tmv2App .kom-page .data-table td {
  color: var(--tm-text-primary) !important;
}
html.dark-mode #tmv2App .kom-page .kom-empty h2,
html.dark-mode #tmv2App .kom-page .kom-empty h3,
html.dark-mode #tmv2App .kom-page .kom-empty p {
  color: var(--tm-text-primary) !important;
}

/* ---- (2) homepage v2: local token re-bind ----
 * `#tm-home-v2 { --tm-bg-card: #ffffff; --tm-bg-soft: #f4f6fa; }` light scope'u
 * dark mode'da silinmediği için tüm var(--tm-bg-card/soft) referansları beyaz
 * çözüyor. Specificity 1,1,1 > 1,0,0 — token'lar dark değerlere remap olur,
 * v2-mock / v2-kpi-card / v2-features dahil tüm child'lar otomatik düzelir. */
html.dark-mode #tm-home-v2 {
  --tm-bg-card: #111b2e;
  --tm-bg-soft: #1b2a44;
  --tm-bg-primary: #0b1220;
  background: var(--tm-bg-primary) !important;
}

/* Belt-and-suspenders: v2-mock chrome'un (browser frame görünümü) ana yüzeyi
 * — design intent'inde "browser pencere" görseli ama dark zeminde white chrome
 * göz yorar; yumuşak elevated yüzeye al. */
html.dark-mode #tm-home-v2 .v2-mock {
  background: var(--tm-bg-elevated) !important;
  border-color: var(--tm-border-color) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode #tm-home-v2 .v2-mock__topbar,
html.dark-mode #tm-home-v2 .v2-mock__head {
  background: var(--tm-bg-tertiary) !important;
  border-bottom-color: var(--tm-border-color) !important;
}
html.dark-mode #tm-home-v2 .v2-mock__url {
  background: var(--tm-bg-card) !important;
  color: var(--tm-text-muted) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode #tm-home-v2 .v2-mock__kpi,
html.dark-mode #tm-home-v2 .v2-kpi-card {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode #tm-home-v2 .v2-mock__kpi .label,
html.dark-mode #tm-home-v2 .v2-mock__kpi small,
html.dark-mode #tm-home-v2 .v2-kpi-card .label,
html.dark-mode #tm-home-v2 .v2-kpi-card small {
  color: var(--tm-text-muted) !important;
}
html.dark-mode #tm-home-v2 .v2-panel,
html.dark-mode #tm-home-v2 .v2-panel__tabs {
  background: var(--tm-bg-tertiary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode #tm-home-v2 .v2-features,
html.dark-mode #tm-home-v2 .v2-problem,
html.dark-mode #tm-home-v2 .v2-hero,
html.dark-mode #tm-home-v2 .v2-section,
html.dark-mode #tm-home-v2 .v2-cta,
html.dark-mode #tm-home-v2 .v2-pricing,
html.dark-mode #tm-home-v2 .v2-testimonials,
html.dark-mode #tm-home-v2 .v2-footer {
  background: var(--tm-bg-primary) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode #tm-home-v2 .v2-card,
html.dark-mode #tm-home-v2 .v2-feature-card,
html.dark-mode #tm-home-v2 .v2-pricing-card,
html.dark-mode #tm-home-v2 .v2-testimonial,
html.dark-mode #tm-home-v2 .v2-tile {
  background: var(--tm-bg-card) !important;
  border-color: var(--tm-border-color) !important;
  color: var(--tm-text-primary) !important;
}

/* ---- (3) Belt-and-suspenders: body.dark-mode root variant
 * Bazı sayfalar dark mode'u body class'ı olarak set ediyor olabilir (uncommon
 * ama defensive). Aynı kuralları body.dark-mode için de tekrarla. light bozmaz
 * çünkü zaten dark-mode class konulmadıkça matchsiz. */
body.dark-mode #tmv2App .kom-page .commission-page-card,
body.dark-mode #tmv2App .kom-page .commission-page-card.bg-white,
body.dark-mode #tmv2App .kom-page .table-container,
body.dark-mode #tmv2App .kom-page .kom-empty {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
body.dark-mode #tm-home-v2 {
  --tm-bg-card: #111b2e;
  --tm-bg-soft: #1b2a44;
  --tm-bg-primary: #0b1220;
}