/* ===============================================
   DARK MODE - Zentrale Farbpalette & Styles
   ===============================================
   
   Diese Datei enthält alle Dark Mode Styles in einer
   konsistenten, wartbaren Struktur.
   
   Verwendung:
   - Alle Dark Mode Farben sind als CSS-Variablen definiert
   - Komponenten-spezifische Styles sind nach Funktionsbereichen gruppiert
   - Keine !important Regeln außer zwingend erforderlich
   =============================================== */

/* ===============================================
   DARK MODE FARBPALETTE
   =============================================== */
:root {
  /* Dark Mode Grundfarben */
  --dark-bg-primary: #1a1a1a;           /* Haupt-Hintergrund */
  --dark-bg-secondary: #2d2d2d;         /* Sekundär-Hintergrund */
  --dark-bg-tertiary: #404040;          /* Tertiär-Hintergrund */
  --dark-bg-elevated: #333333;          /* Erhöhte Elemente (Cards, Panels) */
  --dark-bg-overlay: rgba(0, 0, 0, 0.7); /* Overlays, Modals */
  
  /* Dark Mode Textfarben */
  --dark-text-primary: #ffffff;         /* Haupttext */
  --dark-text-secondary: #cccccc;       /* Sekundärtext */
  --dark-text-muted: #999999;           /* Abgeschwächter Text */
  --dark-text-disabled: #666666;        /* Deaktivierter Text */
  --dark-text-inverse: #1a1a1a;         /* Text auf dunklen Hintergründen */
  
  /* Dark Mode Akzentfarben */
  --dark-accent-primary: #e57373;       /* Primäre Akzentfarbe */
  --dark-accent-secondary: #4a9eff;     /* Sekundäre Akzentfarbe */
  --dark-accent-success: #4caf50;       /* Erfolg */
  --dark-accent-warning: #ff9800;       /* Warnung */
  --dark-accent-error: #f44336;         /* Fehler */
  --dark-accent-info: #2196f3;          /* Information */
  
  /* Dark Mode Rahmen & Trennlinien */
  --dark-border-primary: #555555;       /* Hauptrahmen */
  --dark-border-secondary: #444444;     /* Sekundärrahmen */
  --dark-border-subtle: #333333;        /* Subtile Trennlinien */
  --dark-border-focus: #ff6b6b;         /* Fokus-Rahmen */
  
  /* Dark Mode Schatten */
  --dark-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
  --dark-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
  --dark-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.5);
  
  /* Dark Mode Scrollbars */
  --dark-scrollbar-track: #2d2d2d;
  --dark-scrollbar-thumb: #555555;
  --dark-scrollbar-thumb-hover: #666666;
}

/* ===============================================
   DARK MODE GRUNDSTYLES
   =============================================== */
body.dark-mode {
  /* Grundlegende Dark Mode Anwendung */
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  
  /* Smooth Transitions für Dark Mode Wechsel */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===============================================
   DARK MODE TYPOGRAPHY
   =============================================== */
body.dark-mode {
  /* Alle Textelemente erben die Dark Mode Farben */
  color: var(--dark-text-primary);
}

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

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: inherit;
}

body.dark-mode a {
  color: var(--dark-accent-primary);
}

body.dark-mode a:hover {
  color: var(--dark-accent-secondary);
}

/* ===============================================
   DARK MODE FORM ELEMENTS
   =============================================== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
  color: var(--dark-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: var(--dark-border-focus);
  box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.2);
  outline: none;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-text-muted);
}

body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-disabled);
  cursor: not-allowed;
}

/* ===============================================
   DARK MODE BUTTONS
   =============================================== */
body.dark-mode button {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
  color: var(--dark-text-primary);
  transition: all 0.2s ease;
}

body.dark-mode button:hover:not(:disabled) {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode button:active {
  background-color: var(--dark-bg-elevated);
}

body.dark-mode button:disabled {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-disabled);
  cursor: not-allowed;
}

/* Button Varianten */
body.dark-mode button.primary {
  background-color: var(--dark-accent-primary);
  border-color: var(--dark-accent-primary);
  color: var(--dark-text-inverse);
}

body.dark-mode button.primary:hover {
  background-color: #ff5252;
  border-color: #ff5252;
}

body.dark-mode button.secondary {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode button.danger {
  background-color: var(--dark-accent-error);
  border-color: var(--dark-accent-error);
  color: var(--dark-text-inverse);
}

body.dark-mode button.danger:hover {
  background-color: #d32f2f;
  border-color: #d32f2f;
}

/* ===============================================
   DARK MODE LAYOUT COMPONENTS
   =============================================== */
body.dark-mode .sidebar {
  background-color: var(--dark-bg-secondary);
  border-right: 1px solid var(--dark-border-primary);
}

body.dark-mode .main-content {
  background-color: var(--dark-bg-primary);
}

body.dark-mode .card,
body.dark-mode .panel {
  background-color: var(--dark-bg-elevated);
  border: 1px solid var(--dark-border-primary);
  box-shadow: var(--dark-shadow-light);
}

body.dark-mode .header {
  background-color: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--dark-border-primary);
}

/* ===============================================
   DARK MODE NAVIGATION
   =============================================== */
/* 🎯 EINHEITLICHE DARK MODE TAB-BUTTON-STYLES FÜR ALLE TABS */
body.dark-mode .tab-button {
  background: none !important;
  border: none !important;
  color: var(--dark-text-secondary);
  box-shadow: none !important;
}

body.dark-mode .tab-button:hover {
  background: none !important;
  color: #ff6b6b;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .tab-button.active {
  background: none !important;
  border-bottom: 3px solid #ff6b6b !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: #ff6b6b !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500;
}

/* 🚨 ULTIMATIVE REGEL: Speziell für Datenbank-Tab im Dark Mode */
body.dark-mode .input-tabs .tab-button[data-tab="database"].active,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active:hover,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active:focus,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active *,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active::before,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active::after {
  color: #ff6b6b !important;
  border-bottom: 3px solid #ff6b6b !important;
  border-bottom-color: #ff6b6b !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  border: none !important;
}

body.dark-mode .mobile-tab-button {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-secondary);
}

body.dark-mode .mobile-tab-button.active {
  background-color: var(--dark-accent-primary);
  color: var(--dark-text-inverse);
}

/* ===============================================
   DARK MODE SCROLLBARS
   =============================================== */
body.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-scrollbar-thumb);
  border-radius: 6px;
}

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

/* Spezifische Scrollbar-Styles für Container */
body.dark-mode .thumbnails-container::-webkit-scrollbar-thumb,
body.dark-mode .product-groups-container::-webkit-scrollbar-thumb,
body.dark-mode .database-table-container::-webkit-scrollbar-thumb {
  background: var(--dark-scrollbar-thumb);
}

body.dark-mode .thumbnails-container::-webkit-scrollbar-thumb:hover,
body.dark-mode .product-groups-container::-webkit-scrollbar-thumb:hover,
body.dark-mode .database-table-container::-webkit-scrollbar-thumb:hover {
  background: var(--dark-scrollbar-thumb-hover);
}

/* ===============================================
   DARK MODE TOGGLE BUTTON
   =============================================== */
.dark-mode-toggle {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
  color: var(--dark-text-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

.dark-mode-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

body.dark-mode .dark-mode-toggle {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode .dark-mode-icon {
  fill: var(--dark-text-primary);
}

body.dark-mode .sun-icon {
  display: block;
}

body.dark-mode .moon-icon {
  display: none;
}

/* ===============================================
   ACCESSIBILITY & REDUCED MOTION
   =============================================== */
@media (prefers-reduced-motion: reduce) {
  body.dark-mode *,
  body.dark-mode *::before,
  body.dark-mode *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  body.dark-mode {
    --dark-bg-primary: #000000;
    --dark-text-primary: #ffffff;
    --dark-border-primary: #ffffff;
    --dark-accent-primary: #ffff00;
  }
}

/* ===============================================
   DARK MODE DATABASE UI STYLES
   =============================================== */

/* Database Controls */
body.dark-mode .database-controls {
  background-color: var(--dark-bg-secondary);
}

/* Database Buttons */
body.dark-mode .database-button {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-primary);
  transition: all 0.2s ease;
}

body.dark-mode .database-button:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode .database-button svg {
  fill: var(--dark-text-primary);
}

body.dark-mode .database-button.danger {
  background-color: rgba(244, 67, 54, 0.2);
  color: var(--dark-accent-error);
  border-color: var(--dark-accent-error);
}

body.dark-mode .database-button.danger:hover {
  background-color: rgba(244, 67, 54, 0.3);
  border-color: var(--dark-accent-error);
}

body.dark-mode .database-button.danger svg {
  fill: var(--dark-accent-error);
}

/* Database Search */
body.dark-mode .database-search {
  background-color: var(--dark-bg-secondary);
}

body.dark-mode .database-search input {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .database-search input:focus {
  border-color: var(--dark-border-focus);
  box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.2);
}

body.dark-mode .database-search button {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .database-search button:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode .database-search button svg {
  fill: var(--dark-text-primary);
}

body.dark-mode .search-action-button {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .search-action-button:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode .search-action-button svg {
  fill: var(--dark-text-primary);
}

/* 🎯 NEUE UX-VERBESSERUNG: Aktive Suche Highlighting (Dark Mode) */
body.dark-mode .search-action-button.clear-mode.search-active {
  background-color: #ff6b6b !important;
  border-color: #ff4757 !important;
  color: white !important;
  animation: searchPulse 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(229, 115, 115, 0.4);
}

body.dark-mode .search-action-button.clear-mode.search-active svg {
  fill: white !important;
}

body.dark-mode .search-action-button.clear-mode.search-active:hover {
  background-color: #ff4757 !important;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 115, 115, 0.5);
}

/* Suchfeld-Highlighting für aktive Suche (Dark Mode) */
body.dark-mode #databaseSearchInput.search-active {
  background-color: rgba(229, 115, 115, 0.1) !important;
  border-color: rgba(229, 115, 115, 0.4) !important;
  box-shadow: 0 0 8px rgba(229, 115, 115, 0.3) !important;
}

/* Department Filters */
body.dark-mode .filter-label {
  color: var(--dark-text-primary);
}

body.dark-mode .department-filter-button {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
  transition: all 0.2s ease;
}

body.dark-mode .department-filter-button:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

body.dark-mode .department-filter-button.active {
  background-color: var(--dark-accent-primary);
  color: var(--dark-text-inverse);
  border-color: var(--dark-accent-primary);
}

/* Altware Button */
body.dark-mode .department-filter-button.altware-button {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-secondary);
  color: var(--dark-text-primary) !important;
}

body.dark-mode .department-filter-button.altware-button:hover {
  background-color: var(--dark-bg-elevated);
  border-color: var(--dark-border-focus);
}

body.dark-mode .department-filter-button.altware-button.active {
  background-color: var(--dark-accent-warning);
  color: var(--dark-text-inverse);
  border-color: var(--dark-accent-warning);
}

body.dark-mode .department-filter-button.altware-button.active:hover {
  background-color: #e68900;
  border-color: #e68900;
}

/* Lager 5 Button */
body.dark-mode .department-filter-button.lager5-button {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-secondary);
  color: var(--dark-text-primary) !important;
}

body.dark-mode .department-filter-button.lager5-button:hover {
  background-color: var(--dark-bg-elevated);
  border-color: var(--dark-border-focus);
}

body.dark-mode .department-filter-button.lager5-button.active {
  background-color: #8d6e63;
  color: var(--dark-text-inverse);
  border-color: #8d6e63;
}

body.dark-mode .department-filter-button.lager5-button.active:hover {
  background-color: #a1887f;
  border-color: #a1887f;
}

/* Lager 8 Button */
body.dark-mode .department-filter-button.lager8-button {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-secondary);
  color: var(--dark-text-primary) !important;
}

body.dark-mode .department-filter-button.lager8-button:hover {
  background-color: var(--dark-bg-elevated);
  border-color: var(--dark-border-focus);
}

body.dark-mode .department-filter-button.lager8-button.active {
  background-color: #78909c;
  color: var(--dark-text-inverse);
  border-color: #78909c;
}

body.dark-mode .department-filter-button.lager8-button.active:hover {
  background-color: #90a4ae;
  border-color: #90a4ae;
}

/* Lager 85 Button */
body.dark-mode .department-filter-button.lager85-button {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-secondary);
  color: var(--dark-text-primary) !important;
}

body.dark-mode .department-filter-button.lager85-button:hover {
  background-color: var(--dark-bg-elevated);
  border-color: var(--dark-border-focus);
}

body.dark-mode .department-filter-button.lager85-button.active {
  background-color: #8e24aa;
  color: var(--dark-text-inverse);
  border-color: #8e24aa;
}

body.dark-mode .department-filter-button.lager85-button.active:hover {
  background-color: #ab47bc;
  border-color: #ab47bc;
}

/* Database Status */
body.dark-mode .database-status-mini {
  color: var(--dark-text-secondary);
}

/* Database Table Container */
body.dark-mode .database-table-container {
  background-color: var(--dark-bg-primary);
  border: none; /* Kein Border für volle Breite im Dark Mode */
}

/* ===============================================
   EINHEITLICHE DATENBANK-KOPFZEILE IM DARK MODE
   =============================================== */

/* Grundlegende Header-Styles - EINHEITLICH */
body.dark-mode .database-table th {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  border-bottom: 1px solid var(--dark-border-primary) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  font-weight: 600 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Erste Spalte (Index) - EINHEITLICH mit allen anderen */
body.dark-mode .database-table th:nth-child(1) {
  background-color: #1a1a1a !important;
  border-right: 1px solid #1a1a1a !important;
  z-index: 15 !important;
}

/* Alle anderen Spalten - EINHEITLICHE Darstellung */
body.dark-mode .database-table th:nth-child(2),
body.dark-mode .database-table th:nth-child(3),
body.dark-mode .database-table th:nth-child(4),
body.dark-mode .database-table th:nth-child(5),
body.dark-mode .database-table th:nth-child(6),
body.dark-mode .database-table th:nth-child(7),
body.dark-mode .database-table th:nth-child(8),
body.dark-mode .database-table th:nth-child(9),
body.dark-mode .database-table th:nth-child(10),
body.dark-mode .database-table th:last-child {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--dark-border-primary) !important;
}

/* Column Header Container - EINHEITLICH */
body.dark-mode .database-table th .column-header {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
}

/* Column Header Small Text - EINHEITLICH */
body.dark-mode .database-table th .column-header .column-header-small {
  background-color: #1a1a1a !important;
  color: var(--dark-text-muted) !important;
  border: none !important;
}

/* Höchste Spezifität für alle Header-Elemente - EINHEITLICH */
body.dark-mode .database-table th *,
body.dark-mode .database-table thead *,
body.dark-mode .database-table th .column-header *,
body.dark-mode .database-table th div,
body.dark-mode .database-table th span,
body.dark-mode .database-table th strong,
body.dark-mode .database-table th em,
body.dark-mode .database-table th b,
body.dark-mode .database-table th i {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
}

/* Spezifische Überschreibung für alle möglichen Header-Klassen - EINHEITLICH */
body.dark-mode .database-table th[class*="header"],
body.dark-mode .database-table th[class*="column"],
body.dark-mode .database-table th[class*="sort"],
body.dark-mode .database-table th[class*="text"],
body.dark-mode .database-table th[class*="align"] {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
}

/* Entfernung aller hellgrauen Rahmen und Hintergründe - EINHEITLICH */
body.dark-mode .database-table th,
body.dark-mode .database-table th *,
body.dark-mode .database-table thead th,
body.dark-mode .database-table thead th * {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ABSOLUTE ÜBERSCHREIBUNG - Entfernung aller hellgrauen Rahmen */
body.dark-mode .database-table th,
body.dark-mode .database-table th *,
body.dark-mode .database-table thead,
body.dark-mode .database-table thead *,
body.dark-mode .database-table th > *,
body.dark-mode .database-table th > * > *,
body.dark-mode .database-table th div,
body.dark-mode .database-table th span,
body.dark-mode .database-table th strong,
body.dark-mode .database-table th em,
body.dark-mode .database-table th b,
body.dark-mode .database-table th i,
body.dark-mode .database-table th p,
body.dark-mode .database-table th a,
body.dark-mode .database-table th label,
body.dark-mode .database-table th input,
body.dark-mode .database-table th button,
body.dark-mode .database-table th select,
body.dark-mode .database-table th option {
  background-color: #1a1a1a !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--dark-border-primary) !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Datenbank-Zeilen */
body.dark-mode .database-table td {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  border-bottom: 1px solid var(--dark-border-subtle);
}

body.dark-mode .database-table tr:hover:not(.selected):not(.selected-row):not(.active-row):not(.empty-message) {
  background-color: var(--dark-bg-secondary);
}

/* Leere Nachrichtenzeile im Dark Mode: Keine Hover-Effekte */
body.dark-mode .database-table tr.empty-message:hover {
  background-color: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Erste Spalte (Index) - Zeilen */
body.dark-mode .database-table td:nth-child(1) {
  background-color: var(--dark-bg-secondary);
  border-right: 1px solid #1a1a1a !important;
}

body.dark-mode .database-table td:nth-child(1):hover {
  background-color: var(--dark-bg-elevated);
}

body.dark-mode .database-table tr.selected td:nth-child(1):hover {
  background-color: var(--dark-accent-primary);
}

body.dark-mode .database-table td:nth-child(1):hover .running-number {
  color: var(--dark-text-primary);
}

body.dark-mode .database-table tr.selected td:nth-child(1):hover .running-number {
  color: var(--dark-text-inverse);
}

/* Row Selection - Gelbe Hervorhebung für bereits ausgewählte Artikel */
body.dark-mode .database-table tr.selected:not(.active-row) {
  background-color: rgba(255, 255, 0, 0.3) !important;
}

body.dark-mode .database-table tr.selected:not(.active-row):hover {
  background-color: rgba(255, 255, 0, 0.4) !important;
}

body.dark-mode .database-table tr.selected-row:not(.active-row) {
  background-color: rgba(255, 255, 0, 0.25) !important;
}

body.dark-mode .database-table tr.selected-row:not(.active-row):hover {
  background-color: rgba(255, 255, 0, 0.35) !important;
}

/* Dark Mode: Bessere Textlesbarkeit auf gelben Hintergründen - ALLE Textelemente */
body.dark-mode .database-table tr.selected:not(.active-row) .column-header-small,
body.dark-mode .database-table tr.selected-row:not(.active-row) .column-header-small,
body.dark-mode .database-table tr.selected:not(.active-row) td,
body.dark-mode .database-table tr.selected-row:not(.active-row) td {
  color: #000 !important; /* Schwarz für optimalen Kontrast auf Gelb auch im Dark Mode */
  font-weight: 500; /* Etwas fetter für bessere Lesbarkeit */
}

body.dark-mode .database-table tr.selected:not(.active-row):hover .column-header-small,
body.dark-mode .database-table tr.selected-row:not(.active-row):hover .column-header-small,
body.dark-mode .database-table tr.selected:not(.active-row):hover td,
body.dark-mode .database-table tr.selected-row:not(.active-row):hover td {
  color: #000 !important; /* Schwarz bleibt beim Hover */
  font-weight: 600; /* Noch fetter beim Hover */
}

/* Zusätzliche Spezifität für Dark Mode gelbe Markierungen */
body.dark-mode .database-table tr.selected:not(.active-row) td {
  background-color: rgba(255, 255, 0, 0.3) !important;
}

body.dark-mode .database-table tr.selected:not(.active-row):hover td {
  background-color: rgba(255, 255, 0, 0.4) !important;
}

body.dark-mode .database-table tr.selected-row:not(.active-row) td {
  background-color: rgba(255, 255, 0, 0.25) !important;
}

body.dark-mode .database-table tr.selected-row:not(.active-row):hover td {
  background-color: rgba(255, 255, 0, 0.35) !important;
}

body.dark-mode .database-table tr.clickable-row:hover {
  background-color: var(--dark-bg-secondary);
}

body.dark-mode .database-table tr.clickable-row:hover:not(.selected):not(.selected-row):not(.active-row) td {
  background-color: var(--dark-bg-secondary);
}

/* Active Row (Thumbnail) - HÖCHSTE Priorität */
body.dark-mode .database-table tr.active-row {
  background: rgba(229, 115, 115, 0.2) !important;
  border: 2px dashed #ffd700 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  position: relative;
  z-index: 1; /* Niedriger als Header (z-index: 10), damit Zeile unter Header bleibt */
}

body.dark-mode .database-table tr.active-row:hover {
  background: rgba(229, 115, 115, 0.25) !important;
}

body.dark-mode .database-table tr.active-row td {
  background: rgba(229, 115, 115, 0.2) !important;
}

body.dark-mode .database-table tr.active-row:hover td {
  background: rgba(229, 115, 115, 0.25) !important;
}

/* Dark Mode: Bessere Textlesbarkeit auf roten Hintergründen */
body.dark-mode .database-table tr.active-row .column-header-small {
  color: #fff !important; /* Weißer Text für besseren Kontrast auf Rot im Dark Mode */
}

body.dark-mode .database-table tr.active-row:hover .column-header-small {
  color: #fff !important; /* Weiß bleibt beim Hover */
}

/* Action Buttons */
body.dark-mode .edit-article-button:hover {
  background-color: var(--dark-accent-info);
  border-color: var(--dark-accent-info);
}

body.dark-mode .delete-article-button:hover {
  background-color: var(--dark-accent-error);
  border-color: var(--dark-accent-error);
}

body.dark-mode .edit-article-button svg,
body.dark-mode .delete-article-button svg {
  fill: var(--dark-text-primary);
}

body.dark-mode .edit-article-button:hover svg,
body.dark-mode .delete-article-button:hover svg {
  fill: var(--dark-text-inverse);
}

/* Pagination */
body.dark-mode .database-pagination button {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .database-pagination button:hover:not(:disabled) {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-focus);
}

/* ✨ Dark Mode: Minimalistische Suchtreffer */
body.dark-mode .recognized-articles {
  /* Kein spezielles Styling - transparent */
}

body.dark-mode .recognized-articles-label {
  color: #999;
  /* Kein Background - transparent auch im Dark Mode */
}

body.dark-mode .recognized-article-item {
  background: #2a3f2a;
  color: #c8e6c9;
  border-color: #4a6741;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.dark-mode .recognized-article-item:hover {
  background: #355935;
  border-color: #66bb6a;
  color: #e8f5e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ✨ Dark Mode: Out-of-Stock Styling für Chips - Weniger ausgegraut */
body.dark-mode .recognized-article-item.out-of-stock {
  opacity: 0.7; /* Weniger transparent als 0.5 */
  background: #1a2e1a !important;
  color: #66bb6a !important; /* Hellere Schriftfarbe für bessere Sichtbarkeit */
  border-color: #355935 !important; /* Sichtbarere Rahmenfarbe */
}

body.dark-mode .recognized-article-item.out-of-stock:hover {
  opacity: 0.85; /* Beim Hover noch sichtbarer */
  background: #2a3f2a !important;
  border-color: #4caf50 !important; /* Grünerer Rahmen beim Hover */
  color: #a8d4a8 !important; /* Hellere Hover-Farbe */
  transform: translateY(-1px);
}

/* ✨ Dark Mode: Tooltips sind IMMER voll sichtbar - auch bei Out-of-Stock */
body.dark-mode .recognized-article-item.out-of-stock .recognized-article-tooltip,
body.dark-mode .recognized-article-item.out-of-stock:hover .recognized-article-tooltip {
  opacity: 1 !important; /* Tooltip immer 100% sichtbar */
  background: rgba(0, 0, 0, 0.95) !important; /* Volle Farbe, keine Transparenz */
}

body.dark-mode .recognized-article-item.out-of-stock .recognized-article-tooltip::after,
body.dark-mode .recognized-article-item.out-of-stock:hover .recognized-article-tooltip::after {
  opacity: 1 !important; /* Pfeil auch immer voll sichtbar */
  border-top-color: rgba(0, 0, 0, 0.95) !important; /* Volle Pfeilfarbe */
}

body.dark-mode .database-pagination button svg {
  fill: var(--dark-text-primary);
}

body.dark-mode .database-pagination span {
  color: var(--dark-text-secondary);
}

/* Soft Delete Controls */
body.dark-mode .soft-delete-controls {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .soft-delete-checkbox {
  color: var(--dark-text-primary);
}

body.dark-mode .soft-delete-stats,
body.dark-mode .stats-label,
body.dark-mode .stats-value {
  color: var(--dark-text-secondary);
}

body.dark-mode .soft-delete-checkbox .checkmark {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .soft-delete-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: var(--dark-accent-primary);
  border-color: var(--dark-accent-primary);
}

body.dark-mode .soft-delete-checkbox input[type="checkbox"]:checked + .checkmark::after {
  border-color: var(--dark-text-inverse);
}

body.dark-mode .soft-delete-checkbox .label-text {
  color: var(--dark-text-primary);
}

body.dark-mode .soft-delete-checkbox:hover .checkmark {
  border-color: var(--dark-border-focus);
}

/* Deleted Rows */
body.dark-mode tr.deleted {
  background-color: rgba(244, 67, 54, 0.1);
}

body.dark-mode tr.deleted td {
  color: var(--dark-text-muted);
}

body.dark-mode .database-table tr.deleted {
  background-color: rgba(244, 67, 54, 0.1);
}

body.dark-mode .database-table tr.deleted td {
  color: var(--dark-text-muted);
}

body.dark-mode tr.deleted {
  background-color: rgba(244, 67, 54, 0.1);
}

body.dark-mode .deleted-info-compact {
  color: var(--dark-text-muted);
  background-color: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Lock System */
body.dark-mode .lock-indicator {
  background-color: var(--dark-accent-warning);
  border: 1px solid var(--dark-accent-warning);
}

body.dark-mode .lock-indicator:hover {
  background-color: #e68900;
  border-color: #e68900;
}

body.dark-mode .lock-timer {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

body.dark-mode .lock-indicator .lock-timer {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

body.dark-mode .database-table .lock-indicator .lock-timer {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

body.dark-mode .lock-icon {
  fill: var(--dark-text-inverse);
}

body.dark-mode .lock-name {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

body.dark-mode .lock-indicator .lock-name {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

body.dark-mode .database-table .lock-indicator .lock-name {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

/* Lock Timer States */
body.dark-mode .lock-timer.timer-critical {
  color: var(--dark-accent-error) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .lock-timer.timer-warning {
  color: var(--dark-accent-warning) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .lock-timer.timer-normal {
  color: var(--dark-accent-success) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .lock-indicator .lock-timer.timer-critical {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .lock-indicator .lock-timer.timer-warning {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .lock-indicator .lock-timer.timer-normal {
  color: var(--dark-text-inverse) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* Locked by Other */
body.dark-mode .database-table tr.locked-by-other {
  background-color: rgba(255, 152, 0, 0.1);
  opacity: 0.7;
}

body.dark-mode .database-table tr.locked-by-other:hover {
  background-color: rgba(255, 152, 0, 0.15);
  opacity: 0.8;
}

/* Admin Panel */
body.dark-mode .admin-content {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .admin-panel .admin-header h3 {
  color: var(--dark-text-primary);
}

body.dark-mode .admin-panel .admin-header {
  background-color: var(--dark-bg-tertiary);
  border-bottom: 1px solid var(--dark-border-primary);
}

body.dark-mode .stats-card {
  background-color: var(--dark-bg-elevated);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .stats-card h4 {
  color: var(--dark-text-primary);
}

body.dark-mode .stat-label {
  color: var(--dark-text-secondary);
}

body.dark-mode .stat-value {
  color: var(--dark-text-primary);
}

body.dark-mode .trend-list,
body.dark-mode .department-list,
body.dark-mode .product-group-list {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .department-name,
body.dark-mode .product-group-name {
  color: var(--dark-text-primary);
}

body.dark-mode .department-stats,
body.dark-mode .product-group-stats {
  color: var(--dark-text-secondary);
}

/* ===============================================
   DARK MODE IMPORT GUIDE STYLES
   =============================================== */

/* Import Guide Container */
body.dark-mode .import-guide-modern {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
  box-shadow: var(--dark-shadow-medium);
}

/* Import Header */
body.dark-mode .import-title {
  color: var(--dark-text-primary);
}

body.dark-mode .import-subtitle {
  color: var(--dark-text-secondary);
}

/* Import Cards */
body.dark-mode .import-card {
  background-color: var(--dark-bg-elevated);
  border: 1px solid var(--dark-border-primary);
  box-shadow: var(--dark-shadow-light);
}

body.dark-mode .import-card:hover {
  box-shadow: var(--dark-shadow-medium);
}

/* Card Header */
body.dark-mode .card-header {
  background-color: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--dark-border-primary);
}

body.dark-mode .card-title {
  color: var(--dark-text-primary);
}

body.dark-mode .card-description {
  color: var(--dark-text-secondary);
}

body.dark-mode .card-status {
  background-color: var(--dark-accent-success);
  color: var(--dark-text-inverse);
}

/* Card Content */
body.dark-mode .card-content {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

body.dark-mode .card-content p {
  color: var(--dark-text-secondary);
}

body.dark-mode .card-content strong {
  color: var(--dark-text-primary);
}

body.dark-mode .card-content code {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-accent-primary);
  border: 1px solid var(--dark-border-primary);
}

/* Import Steps */
body.dark-mode .import-step {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .import-step-number {
  background-color: var(--dark-accent-primary);
  color: var(--dark-text-inverse);
}

body.dark-mode .import-step-title {
  color: var(--dark-text-primary);
}

body.dark-mode .import-step-description {
  color: var(--dark-text-secondary);
}

/* Import Tips */
body.dark-mode .import-tip {
  background-color: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: var(--dark-text-primary);
}

body.dark-mode .import-tip .tip-icon {
  color: var(--dark-accent-info);
}

/* Import Warnings */
body.dark-mode .import-warning {
  background-color: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: var(--dark-text-primary);
}

body.dark-mode .import-warning .warning-icon {
  color: var(--dark-accent-warning);
}

/* Import Errors */
body.dark-mode .import-error {
  background-color: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: var(--dark-text-primary);
}

body.dark-mode .import-error .error-icon {
  color: var(--dark-accent-error);
}

/* File Upload Area */
body.dark-mode .file-upload-area {
  background-color: var(--dark-bg-secondary);
  border: 2px dashed var(--dark-border-primary);
}

body.dark-mode .file-upload-area:hover {
  border-color: var(--dark-border-focus);
  background-color: var(--dark-bg-tertiary);
}

body.dark-mode .file-upload-text {
  color: var(--dark-text-secondary);
}

body.dark-mode .file-upload-icon {
  color: var(--dark-text-muted);
}

/* Progress Indicators */
body.dark-mode .import-progress {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-primary);
}

body.dark-mode .progress-bar {
  background-color: var(--dark-bg-tertiary);
}

body.dark-mode .progress-bar-fill {
  background-color: var(--dark-accent-primary);
}

body.dark-mode .progress-text {
  color: var(--dark-text-secondary);
}

/* ===============================================
   DARK MODE ARTIKELDETAILFENSTER STYLES
   =============================================== */

/* Artikeldetail Dialog Container */
body.dark-mode .edit-dialog {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Dialog Header */
body.dark-mode .edit-dialog h3 {
  background: rgba(26, 26, 26, 0.95);
  color: #ffffff;
  border-bottom-color: #ff6b6b;
}

body.dark-mode .edit-dialog-close-btn {
  color: #ffffff;
}

body.dark-mode .edit-dialog-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Dialog Form Container */
body.dark-mode #edit-form {
  background: rgba(26, 26, 26, 0.98);
}

/* Article Sections */
body.dark-mode .article-section {
  background: linear-gradient(145deg, #2d2d2d 0%, #404040 100%);
  border-color: rgba(229, 115, 115, 0.2);
}

body.dark-mode .article-section-header {
  color: #ffffff;
  border-bottom-color: #555555;
}

/* Form Fields */
body.dark-mode .form-field label,
body.dark-mode .price-field label,
body.dark-mode .stock-field label {
  color: #ffffff;
}

/* Währungszeichen im Dark Mode */
body.dark-mode .price-field::after {
  color: #ffffff;
}

body.dark-mode .form-field input,
body.dark-mode .price-field input,
body.dark-mode .stock-field input {
  background: #404040;
  color: #ffffff;
  border-color: #555555;
}

body.dark-mode .form-field input:focus,
body.dark-mode .price-field input:focus,
body.dark-mode .stock-field input:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.2);
}

body.dark-mode .form-field input:hover,
body.dark-mode .price-field input:hover,
body.dark-mode .stock-field input:hover {
  border-color: #666666;
}

/* Prices and Stock Sections */
body.dark-mode .prices-section,
body.dark-mode .stock-section {
  background: rgba(45, 45, 45, 0.5);
  border-color: rgba(229, 115, 115, 0.1);
}

body.dark-mode .prices-section-header,
body.dark-mode .stock-section-header {
  color: #ffffff;
  border-bottom-color: #555555;
}

/* Price History */
body.dark-mode .price-history-compact {
  background: #2d2d2d;
  border-color: #555555;
}

body.dark-mode .price-history-summary-compact {
  background: #404040;
  border-color: #555555;
}

body.dark-mode .summary-stat-compact {
  background: #2d2d2d;
  border-color: #555555;
}

body.dark-mode .summary-stat-compact .stat-label {
  color: #cccccc;
}

body.dark-mode .summary-stat-compact .stat-value {
  color: #ffffff;
}

body.dark-mode .summary-stat-compact .stat-value.vk-neu {
  color: #4caf50;
}

body.dark-mode .price-history-entry-compact {
  background: #404040;
  border-color: #555555;
  color: #ffffff;
}

body.dark-mode .price-history-entry-compact:hover {
  background: #4a4a4a;
  border-color: #666666;
}

body.dark-mode .price-history-entry-compact.current {
  border-color: #ff6b6b;
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

body.dark-mode .price-history-date-compact {
  color: #ffffff;
}

body.dark-mode .price-history-source-compact {
  background: #555555;
  color: #ffffff;
}

body.dark-mode .price-history-entry-compact.current .price-history-source-compact {
  background: #ff6b6b;
  color: #ffffff;
}

body.dark-mode .price-label-compact {
  color: #cccccc;
}

body.dark-mode .price-value-compact {
  background: #555555;
  color: #ffffff;
  border-color: #666666;
}

body.dark-mode .price-item-compact.vk-neu .price-value-compact {
  background: #4caf50;
  color: #ffffff;
  border-color: #45a049;
}

body.dark-mode .price-history-user-compact {
  color: #cccccc;
}

/* Form Actions */
body.dark-mode .form-actions {
  border-top-color: #555555;
}

body.dark-mode .delete-button {
  background: linear-gradient(135deg, #f44336, #d32f2f);
}

body.dark-mode .delete-button:hover {
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
}

body.dark-mode #edit-cancel {
  background: linear-gradient(135deg, #666666, #555555);
}

body.dark-mode #edit-save {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
}

/* Readonly Fields */
body.dark-mode .form-field input[readonly],
body.dark-mode .price-field input[readonly],
body.dark-mode .stock-field input[readonly] {
  background: linear-gradient(145deg, #333333 0%, #404040 100%);
  color: #999999;
  border-color: #555555;
}

body.dark-mode .form-field input[readonly]:hover,
body.dark-mode .price-field input[readonly]:hover,
body.dark-mode .stock-field input[readonly]:hover {
  border-color: #555555;
}

/* Loading States */
body.dark-mode .price-history-loading-compact {
  color: #cccccc;
}

body.dark-mode .price-history-loading-compact::before {
  border-color: #555555;
  border-top-color: #ff6b6b;
}

/* ===============================================
   PRINT STYLES
   =============================================== */
@media print {
  body.dark-mode {
    background-color: white !important;
    color: black !important;
  }
  
  body.dark-mode * {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
  }
}