/* ===============================================
   SCROLLBAR STYLES - Konsolidiert & Optimiert
   =============================================== */

/* Globale Scrollbar-Styles für alle Container */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
}

/* Webkit-basierte Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  transition: background-color var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Dark Mode Scrollbar-Styles */
body.dark-mode * {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Spezifische Container-Scrollbars */
.thumbnails-container::-webkit-scrollbar,
.product-groups-container::-webkit-scrollbar {
  height: 6px;
}

.thumbnails-container::-webkit-scrollbar-track,
.product-groups-container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.thumbnails-container::-webkit-scrollbar-thumb,
.product-groups-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.thumbnails-container::-webkit-scrollbar-thumb:hover,
.product-groups-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.database-table-container::-webkit-scrollbar {
  width: 6px;
}

.database-table-container::-webkit-scrollbar-track {
  background: transparent;
}

.database-table-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.database-table-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Dark Mode für spezifische 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-color: rgba(255, 255, 255, 0.2);
}

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-color: rgba(255, 255, 255, 0.4);
}