/* ============================================
   DASHBOARD DARK MODE STYLES
   ============================================ */

/* ========== MD3 Dark Theme Surface Colors ========== */
html.dark-mode {
  --md-surface: #1C1B1B;
  --md-surface-dim: #1C1B1B;
  --md-surface-bright: #434241;
  --md-surface-container-lowest: #0E0E0E;
  --md-surface-container-low: #201F1E;
  --md-surface-container: #252423;
  --md-surface-container-high: #2F2E2D;
  --md-surface-container-highest: #3A3938;
  
  --md-on-surface: #E8E2E0;
  --md-on-surface-variant: #D4C4C1;
  --md-inverse-surface: #E8E2E0;
  --md-inverse-on-surface: #322F2E;
  
  --md-outline: #9E8E8B;
  --md-outline-variant: #4D4544;
  
  --md-primary-container: #7A3000;
  --md-on-primary-container: #FFE4D6;
  
  --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --md-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.4), 0 2px 3px rgba(0,0,0,0.5);
  --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.4), 0 4px 4px rgba(0,0,0,0.5);
  
  --dashboard-bg: var(--md-surface);
  --dashboard-bg-solid: var(--md-surface);
  --card-bg: var(--md-surface-container-low);
  --card-border: var(--md-outline-variant);
  --card-border-hover: var(--md-outline);
  --text-primary: var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted: var(--md-outline);
  
  --gray-50: #1e293b;
  --gray-100: #334155;
  --gray-200: #475569;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;
  
  --surface-elevated: var(--md-surface-container-low);
  --surface-base: var(--md-surface-container);
  --surface-muted: var(--md-surface-container-high);
  --surface-sunken: var(--md-surface-container-lowest);
  
  --shadow-card: var(--md-elevation-1);
  --shadow-card-hover: var(--md-elevation-2);
  
  --primary-bg: rgba(var(--color-primary-rgb), 0.15);
  --primary-hover: rgba(var(--color-primary-rgb), 0.22);
  
  --success-bg: rgba(34, 197, 94, 0.12);
  --success-border: rgba(34, 197, 94, 0.25);
  --success-light: #4ade80;
  
  --warning-bg: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.25);
  --warning-light: #fbbf24;
  
  --error-bg: rgba(239, 68, 68, 0.12);
  --error-border: rgba(239, 68, 68, 0.25);
  --error-light: #f87171;
  
  --info-bg: rgba(59, 130, 246, 0.12);
  --info-border: rgba(59, 130, 246, 0.25);
  --info-light: #60a5fa;
  
  --purple-bg: rgba(0, 112, 224, 0.14);
  --purple-border: rgba(112, 176, 240, 0.35);
  --purple-light: #70b0f0;
  
  --md-success-container: rgba(34, 197, 94, 0.2);
  --md-on-success-container: #4ade80;
  --md-error-container: rgba(239, 68, 68, 0.2);
  --md-on-error-container: #f87171;
  --md-warning-container: rgba(245, 158, 11, 0.2);
  --md-on-warning-container: #fbbf24;
  --md-tertiary-container: rgba(0, 112, 224, 0.2);
  --md-on-tertiary-container: #70b0f0;
}

/* ========== DARK MODE BODY & CONTAINERS — canonical token, flat (audit 2026-06-11) ========== */
html.dark-mode body,
html.dark-mode body:has(#mainTabContainer) {
  background-color: var(--color-bg) !important;
  background-image: none !important;
  color: var(--color-text) !important;
}

html.dark-mode .sticky-header {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #334155 !important;
}

/* ========== DARK MODE CARDS ========== */
html.dark-mode .modern-card {
  background: var(--md-surface-container-low) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html.dark-mode .modern-card:hover {
  box-shadow: var(--md-elevation-2) !important;
}

html.dark-mode .performance-card-enhanced {
  background: var(--md-surface-container-low) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html.dark-mode .performance-card-enhanced:hover {
  box-shadow: var(--md-elevation-2) !important;
}

html.dark-mode .metric-card {
  background: var(--md-surface-container-low) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html.dark-mode .metric-card:hover {
  box-shadow: var(--md-elevation-2) !important;
}

/* ========== DARK MODE TEXT COLORS ========== */
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900,
html.dark-mode [class*="text-gray-8"],
html.dark-mode [class*="text-gray-9"] {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-500,
html.dark-mode .text-gray-600,
html.dark-mode .text-gray-700,
html.dark-mode [class*="text-gray-5"],
html.dark-mode [class*="text-gray-6"],
html.dark-mode [class*="text-gray-7"] {
  color: #94a3b8 !important;
}

/* ========== DARK MODE WELCOME SECTION ========== */
html.dark-mode .welcome-section,
html.dark-mode .greeting-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .welcome-section h1,
html.dark-mode .welcome-section h2,
html.dark-mode .welcome-section h3,
html.dark-mode .greeting-card h1,
html.dark-mode .greeting-card h2 {
  color: #f1f5f9 !important;
}

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

/* ========== DARK MODE TAB BUTTONS ========== */
html.dark-mode .tab-button-modern {
  background: #334155 !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

html.dark-mode .tab-button-modern:hover {
  background: #475569 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .tab-button-modern.active,
html.dark-mode .btn-primary.tab-button-modern.active {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* ========== DARK MODE STAT CARDS ========== */
html.dark-mode .stat-card-green,
html.dark-mode [class*="bg-green-"],
html.dark-mode [class*="bg-emerald-"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

html.dark-mode .stat-card-yellow,
html.dark-mode .stat-card-amber,
html.dark-mode [class*="bg-yellow-"],
html.dark-mode [class*="bg-amber-"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html.dark-mode .stat-card-blue,
html.dark-mode [class*="bg-blue-"] {
  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 .stat-card-red,
html.dark-mode [class*="bg-red-"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

html.dark-mode .stat-card-purple,
html.dark-mode [class*="bg-purple-"],
html.dark-mode [class*="bg-violet-"] {
  background: linear-gradient(135deg, rgba(0, 112, 224, 0.22) 0%, rgba(0, 88, 179, 0.16) 100%) !important;
  border: 1px solid rgba(112, 176, 240, 0.45) !important;
}

/* ========== DARK MODE DATE PICKER ========== */
html.dark-mode .date-range-container,
html.dark-mode .date-picker-trigger {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* ========== DARK MODE CHARTS ========== */
html.dark-mode .chart-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .chart-card .chart-title,
html.dark-mode .chart-card h5,
html.dark-mode .chart-card h6 {
  color: #f1f5f9 !important;
}

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

/* ========== DARK MODE ORDER CARDS ========== */
html.dark-mode .order-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .order-card:active {
  background: #334155 !important;
}

html.dark-mode .order-card__title {
  color: #f1f5f9 !important;
}

html.dark-mode .order-card__image {
  background: #334155 !important;
  border-color: #475569 !important;
}

/* ========== DARK MODE PLATFORM DROPDOWN ========== */
html.dark-mode .platform-dropdown-trigger {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

html.dark-mode #platform-dropdown-menu {
  background: #1e293b !important;
  border-color: #334155 !important;
}

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

html.dark-mode .platform-dropdown-item:hover {
  background: #334155 !important;
}

/* ========== DARK MODE BORDERS & BACKGROUNDS ========== */
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 {
  border-color: #334155 !important;
}

html.dark-mode .bg-white {
  background: #1e293b !important;
}

html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100 {
  background: #0f172a !important;
}

html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-100:hover {
  background: #334155 !important;
}

/* ========== DARK MODE LINKS ========== */
html.dark-mode .modern-card a:not(.btn) {
  color: #60a5fa !important;
}

html.dark-mode .modern-card a:not(.btn):hover {
  color: #93c5fd !important;
}

/* ========== DARK MODE ICONS ========== */
html.dark-mode .expand-icon svg,
html.dark-mode .chart-card svg,
html.dark-mode .icon-muted {
  color: #64748b !important;
}

/* ========== DARK MODE BUTTONS ========== */
html.dark-mode .refresh-btn,
html.dark-mode [class*="btn-refresh"] {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .refresh-btn:hover {
  background: #475569 !important;
}

/* ========== DARK MODE LOADING STATES ========== */
html.dark-mode .loading-overlay {
  background: rgba(15, 23, 42, 0.9) !important;
}

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

/* ========== DARK MODE EMPTY STATES ========== */
html.dark-mode .empty-state {
  color: #94a3b8 !important;
}

html.dark-mode .empty-state svg {
  color: #475569 !important;
}

/* ========== DARK MODE TOOLTIPS ========== */
html.dark-mode [data-tippy-root] .tippy-box {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

/* ========== DARK MODE WIDGETS ========== */
html.dark-mode .quick-access-card,
html.dark-mode .add-shortcut-card,
html.dark-mode .alert-item,
html.dark-mode .product-item:hover,
html.dark-mode .shortcut-option {
  background: #334155 !important;
  border-color: #475569 !important;
}

html.dark-mode .quick-access-card .title,
html.dark-mode .alert-item .alert-title,
html.dark-mode .product-item .product-name,
html.dark-mode .shortcut-option .option-title {
  color: #f1f5f9 !important;
}

html.dark-mode .quick-access-card .subtitle,
html.dark-mode .alert-item .alert-subtitle,
html.dark-mode .product-item .product-meta,
html.dark-mode .shortcut-option .option-subtitle {
  color: #94a3b8 !important;
}

html.dark-mode .shortcut-modal {
  background: #1e293b !important;
}

html.dark-mode .shortcut-modal-header,
html.dark-mode .shortcut-modal-footer {
  border-color: #334155 !important;
}

html.dark-mode .shortcut-modal-header h4 {
  color: #f1f5f9 !important;
}

/* ========== DARK MODE BREADCRUMBS ========== */
html.dark-mode .breadcrumb-item {
  color: #94a3b8 !important;
}

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

/* ========== DARK MODE SEPARATORS ========== */
html.dark-mode hr,
html.dark-mode .divider {
  border-color: #334155 !important;
}

/* ========== DARK MODE DASHBOARD SETTINGS ========== */
html.dark-mode .dashboard-settings-tab {
  color: #94a3b8;
}

html.dark-mode .dashboard-settings-tab:hover {
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
}

html.dark-mode .dashboard-settings-tab.active {
  background: var(--color-primary);
  color: #fff;
}

html.dark-mode .widget-settings-item {
  background: #1e293b;
  border-color: #334155;
}

html.dark-mode .widget-settings-item:hover {
  border-color: #475569;
}

html.dark-mode .widget-size-select {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

html.dark-mode .dashboard-settings-btn {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
  border-color: #475569 !important;
}

html.dark-mode .dashboard-settings-btn .tab-icon {
  color: #94a3b8 !important;
}

/* ========== DARK MODE QUICK ACCESS ========== */
html.dark-mode .quick-actions-card,
html.dark-mode .activity-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .activity-link {
  color: #60a5fa !important;
}

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

/* ========== DARK MODE KPI KARTLARI ========== */
html.dark-mode .kpi-card {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
}

html.dark-mode .kpi-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

html.dark-mode .kpi-card--revenue {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
}

html.dark-mode .kpi-card--profit {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  border-color: #22c55e40;
}

html.dark-mode .kpi-card--orders {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  border-color: #f59e0b40;
}

html.dark-mode .kpi-card--margin {
  background: linear-gradient(135deg, #004080 0%, #0070e0 100%);
  border-color: #70b0f040;
}

html.dark-mode .kpi-card--cost {
  background: linear-gradient(135deg, #1a2332 0%, #1e3a5f 100%);
  border-color: #3b82f640;
}

html.dark-mode .kpi-value {
  color: #f1f5f9;
}

html.dark-mode .kpi-value--profit {
  color: #86efac;
}

html.dark-mode .kpi-value--orders {
  color: #fde68a;
}

html.dark-mode .kpi-value--margin {
  color: #9cc8f5;
}

html.dark-mode .kpi-value--cost {
  color: #9cc8f5;
}

html.dark-mode .kpi-label {
  color: #cbd5e1;
}

html.dark-mode .kpi-card--profit .kpi-label,
html.dark-mode .kpi-card--profit .kpi-prev {
  color: #86efac;
}

html.dark-mode .kpi-card--orders .kpi-label,
html.dark-mode .kpi-card--orders .kpi-prev {
  color: #fde68a;
}

html.dark-mode .kpi-card--margin .kpi-label,
html.dark-mode .kpi-card--margin .kpi-prev {
  color: #ddd6fe;
}

html.dark-mode .kpi-card--cost .kpi-label,
html.dark-mode .kpi-card--cost .kpi-prev {
  color: #93c5fd;
}

html.dark-mode .kpi-prev {
  color: #94a3b8;
}

html.dark-mode .kpi-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

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

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

html.dark-mode .kpi-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .kpi-icon--revenue .kpi-icon,
html.dark-mode .kpi-icon-wrapper .kpi-icon {
  color: #93c5fd;
}

html.dark-mode .kpi-icon--profit .kpi-icon {
  color: #86efac;
}

html.dark-mode .kpi-icon--orders .kpi-icon {
  color: #fde68a;
}

html.dark-mode .kpi-icon--margin .kpi-icon {
  color: #ddd6fe;
}

/* ========== DARK MODE PLATFORM KARTLARI ========== */
html.dark-mode .platform-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(55, 48, 163, 0.6) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .platform-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(var(--color-accent-rgb), 0.4);
}

html.dark-mode .platform-card::before {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

html.dark-mode .platform-name {
  color: #f1f5f9;
}

html.dark-mode .platform-name::after {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

html.dark-mode .platform-stat {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-mode .platform-card:hover .platform-stat {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .platform-stat-value {
  color: #f1f5f9;
}

html.dark-mode .platform-stat-label {
  color: #94a3b8;
}

/* ========== DARK MODE WİDGET'LAR ========== */
html.dark-mode .welcome-insight-card {
  background: linear-gradient(135deg, rgba(0, 40, 90, 0.85) 0%, rgba(0, 70, 150, 0.65) 50%, rgba(0, 112, 224, 0.45) 100%);
  border: none;
}

html.dark-mode .welcome-background-decoration {
  background: rgba(255, 255, 255, 0.1);
}

html.dark-mode .welcome-background-decoration::before {
  background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .welcome-background-decoration::after {
  background: rgba(0, 112, 224, 0.22);
}

html.dark-mode .welcome-insight-card:hover,
html.dark-mode .goal-tracker-card:hover,
html.dark-mode .insights-card:hover,
html.dark-mode .notifications-card:hover,
html.dark-mode .chart-widget:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html.dark-mode .welcome-title {
  color: #f1f5f9;
}

html.dark-mode .welcome-greeting,
html.dark-mode .goal-label,
html.dark-mode .insights-title span,
html.dark-mode .notifications-title span,
html.dark-mode .chart-widget-title {
  color: #f1f5f9;
}

html.dark-mode .store-label,
html.dark-mode .profit-text,
html.dark-mode .tip-text {
  color: #cbd5e1;
}

html.dark-mode .welcome-profit-insight {
  background: rgba(0, 50, 100, 0.45);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .profit-insight-label {
  color: #fbbf24;
}

html.dark-mode .profit-icon {
  color: #fbbf24;
}

html.dark-mode .profit-margin-value {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-mode .profit-badge--excellent {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%);
  color: #86efac;
}

html.dark-mode .profit-badge--good {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%);
  color: #93c5fd;
}

html.dark-mode .profit-badge--average {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.2) 100%);
  color: #fde68a;
}

html.dark-mode .profit-badge--low {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%);
  color: #fca5a5;
}

html.dark-mode .welcome-tip-section {
  background: rgba(0, 50, 100, 0.45);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tip-header-label {
  color: #fbbf24;
}

html.dark-mode .tip-header-icon {
  color: #fbbf24;
}

html.dark-mode .tip-link {
  color: #fbbf24;
}

html.dark-mode .tip-link:hover {
  color: #fcd34d;
}

html.dark-mode .welcome-date,
html.dark-mode .goal-values,
html.dark-mode .goal-percentage-outside,
html.dark-mode .insights-count,
html.dark-mode .chart-widget-subtitle {
  color: #94a3b8;
}

html.dark-mode .tip-section {
  background: rgba(0, 112, 224, 0.2);
}

html.dark-mode .tip-icon-wrapper {
  background: rgba(255, 255, 255, 0.15);
}

html.dark-mode .tip-label,
html.dark-mode .tip-text {
  color: #c8e6fc;
}

html.dark-mode .goal-tracker-card,
html.dark-mode .insights-card,
html.dark-mode .notifications-card,
html.dark-mode .chart-widget {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
}

html.dark-mode .goal-progress-bar {
  background: var(--md-surface-container-high);
}

html.dark-mode .goal-celebration {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
  color: #86efac;
}

html.dark-mode .goal-motivation {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
  color: #fde68a;
}

html.dark-mode .insights-header,
html.dark-mode .notifications-header,
html.dark-mode .chart-widget-header {
  border-bottom-color: var(--md-outline-variant);
}

html.dark-mode .insight-item {
  background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .insight-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .insight-text,
html.dark-mode .notification-title {
  color: #e2e8f0;
}

html.dark-mode .notification-desc {
  color: #94a3b8;
}

html.dark-mode .notification-item {
  background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .notification-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .notification-count--danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

html.dark-mode .notification-count--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
}

html.dark-mode .notification-count--info {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

html.dark-mode .notifications-view-all {
  background: var(--md-surface-container);
}

html.dark-mode .notifications-view-all:hover {
  background: var(--md-surface-container-high);
}

/* ========== DARK MODE WİDGET AYARLARI ========== */
html.dark-mode .widget-settings-btn {
  background: var(--md-surface-container);
  border-color: var(--md-outline-variant);
}

html.dark-mode .widget-settings-btn:hover {
  background: var(--md-surface-container-high);
}

html.dark-mode .widget-settings-panel {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark-mode .widget-settings-header {
  border-bottom-color: var(--md-outline-variant);
  color: #f1f5f9;
}

html.dark-mode .widget-settings-close:hover {
  background: var(--md-surface-container-high);
}

html.dark-mode .widget-toggle {
  border-bottom-color: var(--md-outline-variant);
}

html.dark-mode .widget-toggle label {
  color: #e2e8f0;
}

html.dark-mode .widget-toggle label i {
  color: #94a3b8;
}

html.dark-mode .widget-settings-footer {
  background: var(--md-surface-container);
  border-top-color: var(--md-outline-variant);
}

html.dark-mode .widget-reset-btn {
  color: #94a3b8;
}

html.dark-mode .widget-reset-btn:hover {
  background: var(--md-surface-container-high);
  color: #e2e8f0;
}

/* ========== DARK MODE CHART WİDGET ========== */
html.dark-mode .chart-toggle-group {
  background: var(--md-surface-container);
}

html.dark-mode .chart-toggle-btn {
  color: #94a3b8;
}

html.dark-mode .chart-toggle-btn:hover {
  background: var(--md-surface-container-high);
  color: #e2e8f0;
}

html.dark-mode .chart-toggle-btn.active {
  background: var(--md-primary);
  color: white;
}

html.dark-mode .platform-legend-item {
  color: #e2e8f0;
}

/* =================================================================
   DARK MODE — DASHBOARD UTILITY CLASS OVERRIDES
   ----------------------------------------------------------------
   Sorun: Şablonlarda Bootstrap (.bg-white) ve Tailwind
   (.border-gray-200, .text-gray-XXX, .shadow-sm) sınıfları light
   renkleri zorluyor. Dark mode'da büyük beyaz container'lara sebep
   oluyordu (KPI section, widget-inner, quick-access).
   Aşağıdaki override'lar SADECE dashboard sekme scope'unda çalışır.
   ================================================================= */

html.dark-mode #tmv2App #overviewTab .bg-white,
html.dark-mode #tmv2App #ordersTab .bg-white,
html.dark-mode #tmv2App #analyticsTab .bg-white,
html.dark-mode #tmv2App #productsTab .bg-white,
html.dark-mode #tmv2App #pricingTab .bg-white,
html.dark-mode #tmv2App #xmlTab .bg-white,
html.dark-mode #tmv2App #reportsTab .bg-white {
  background-color: var(--tm-surface-raised, #161c23) !important;
  color: var(--tm-text-primary, #f4f4f5);
}

html.dark-mode #tmv2App #overviewTab .border-gray-200,
html.dark-mode #tmv2App #overviewTab .border-gray-100,
html.dark-mode #tmv2App #ordersTab .border-gray-200,
html.dark-mode #tmv2App #ordersTab .border-gray-100,
html.dark-mode #tmv2App #analyticsTab .border-gray-200,
html.dark-mode #tmv2App #analyticsTab .border-gray-100,
html.dark-mode #tmv2App #productsTab .border-gray-200,
html.dark-mode #tmv2App #pricingTab .border-gray-200,
html.dark-mode #tmv2App #xmlTab .border-gray-200,
html.dark-mode #tmv2App #reportsTab .border-gray-200 {
  border-color: var(--tm-border, #27272a) !important;
}

html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-900,
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-800 {
  color: var(--tm-text-primary, #f4f4f5);
}
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-700,
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-600 {
  color: var(--tm-text-secondary, #a1a1aa);
}
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-500,
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-gray-400 {
  color: var(--tm-text-muted, #71717a);
}

html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .text-dark {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

/* Bootstrap shadow-sm dark mode'da görünmüyor — token'lı shadow'a geç */
html.dark-mode #tmv2App :is(#overviewTab, #ordersTab, #analyticsTab) .shadow-sm {
  box-shadow: var(--tm-shadow-sm, 0 1px 3px rgba(0, 0, 0, .4)) !important;
}

/* Ana wrapper'lar — KPI section ve genel container'ların beyaz kalmasını önler */
html.dark-mode #overviewTab .dashboard-shell--main,
html.dark-mode #ordersTab .dashboard-shell--main,
html.dark-mode #analyticsTab .dashboard-shell--main {
  background: var(--tm-surface, #0f1419) !important;
  border-color: var(--tm-border, #27272a) !important;
}

html.dark-mode #tmv2App .dashboard-widget-inner,
html.dark-mode #tmv2App .tm-dashboard-tab-inner {
  background: transparent !important;
}

/* Quick access (Hızlı erişim) — ana kural .quick-access-card artık var(--tm-bg-card)
 * + var(--tm-border-color) kullanıyor; theme-variables.css üzerinden otomatik tema uyar.
 * Bu blok yalnızca dark moda özgü hover tinti ve içerik renklerini ekler. */
html.dark-mode .quick-access-card {
  color: var(--tm-text-primary);
}
html.dark-mode .quick-access-card:hover {
  background: color-mix(in srgb, var(--tm-brand-500) 8%, var(--tm-bg-card));
}
html.dark-mode .quick-access-card .title { color: var(--tm-text-primary); }
html.dark-mode .quick-access-card .subtitle { color: var(--tm-text-muted); }
html.dark-mode .quick-access-card .icon-wrapper {
  background: color-mix(in srgb, var(--tm-text-primary) 8%, transparent);
  color: var(--tm-text-secondary);
}

/* Empty state — chart kartları boşken */
html.dark-mode #overviewTab .platform-dist-empty {
  background: transparent;
  color: var(--tm-text-muted, #71717a);
}
html.dark-mode #overviewTab .platform-dist-empty svg,
html.dark-mode #overviewTab .platform-dist-empty i {
  color: var(--tm-text-disabled, #52525b);
}
html.dark-mode #overviewTab .platform-dist-empty__title {
  color: var(--tm-text-secondary, #a1a1aa);
}
html.dark-mode #overviewTab .platform-dist-empty__sub {
  color: var(--tm-text-muted, #71717a);
}

/* Header search input dark mode kontrastı */
html.dark-mode .tmv2-header-search input,
html.dark-mode .tmv2-search input {
  background: var(--tm-surface-raised, #161c23);
  color: var(--tm-text-primary, #f4f4f5);
  border-color: var(--tm-border, #27272a);
}
html.dark-mode .tmv2-header-search input::placeholder,
html.dark-mode .tmv2-search input::placeholder {
  color: var(--tm-text-muted, #71717a);
}