/* ===============================================
   TAB FIXES - Höchste Priorität für Tab-Styles
   =============================================== */

/* 🚨 ULTIMATIVE REGEL: Rote Unterlinie für alle aktiven Tabs */
html .input-tabs .tab-button.active {
  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;
}

/* 🚨 ULTIMATIVE REGEL: Rote Unterlinie für alle aktiven Tabs im Dark Mode */
html body.dark-mode .input-tabs .tab-button.active {
  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;
}

/* 🚨 FINALE ULTIMATIVE REGEL: Rote Unterlinie für alle aktiven Tabs - Höchste Spezifität */
html body .input-tabs .tab-button.active,
html body .input-tabs .tab-button.active:hover,
html body .input-tabs .tab-button.active:focus {
  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;
}

/* 🚨 FINALE ULTIMATIVE REGEL: Rote Unterlinie für alle aktiven Tabs im Dark Mode - Höchste Spezifität */
html body.dark-mode .input-tabs .tab-button.active,
html body.dark-mode .input-tabs .tab-button.active:hover,
html body.dark-mode .input-tabs .tab-button.active:focus {
  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;
}

/* 🚨 ULTIMATIVE REGEL: Speziell für Datenbank-Tab - Höchste Spezifität */
html body .input-tabs .tab-button[data-tab="database"].active,
html body .input-tabs .tab-button[data-tab="database"].active:hover,
html body .input-tabs .tab-button[data-tab="database"].active:focus {
  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;
}

/* 🚨 ULTIMATIVE REGEL: Speziell für Datenbank-Tab im Dark Mode - Höchste Spezifität */
html body.dark-mode .input-tabs .tab-button[data-tab="database"].active,
html body.dark-mode .input-tabs .tab-button[data-tab="database"].active:hover,
html body.dark-mode .input-tabs .tab-button[data-tab="database"].active:focus {
  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;
}

/* 🆕 Database Action Buttons: Keine rote Unterlinie, auch nicht wenn active */
html body .input-tabs .tab-button.database-action-button,
html body .input-tabs .tab-button.database-action-button.active,
html body .input-tabs .tab-button.database-action-button:hover,
html body .input-tabs .tab-button.database-action-button:focus,
html body.dark-mode .input-tabs .tab-button.database-action-button,
html body.dark-mode .input-tabs .tab-button.database-action-button.active,
html body.dark-mode .input-tabs .tab-button.database-action-button:hover,
html body.dark-mode .input-tabs .tab-button.database-action-button:focus {
  border-bottom: 0 !important; /* Keine rote Unterlinie für Action-Buttons */
  border-bottom-color: transparent !important;
}

/* 🚨 ULTIMATIVE REGEL: Einheitliche Tab-Abstände für alle Tabs */
html #database-tab.tab-content.active {
  padding: 0 !important; /* Komplett eliminiert - kein Abstand mehr */
  margin: 0 !important;
  overflow: visible !important; /* Wichtig für Hover-Effekte der Abteilungsfilter */
}

html .database-controls {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

html .database-table-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 🚨 ULTIMATIVE REGEL: Database-Tab volle Breite in ALLEN Bildschirmgrößen */
@media (max-width: 768px) {
  html #database-tab.tab-content.active {
    padding: 0 !important; /* Komplett eliminiert für alle Bildschirmgrößen */
  }
}

@media (max-width: 480px) {
  html #database-tab.tab-content.active {
    padding: 0 !important; /* Komplett eliminiert für alle Bildschirmgrößen */
  }
}

@media (min-width: 769px) {
  html #database-tab.tab-content.active {
    padding: 0 !important; /* Komplett eliminiert für alle Bildschirmgrößen */
  }
}

/* 🚨 ULTIMATIVE REGEL: Reduziertes Gap für zugeklappte Abteilungsfilter */
html #database-tab .database-controls.compact-gap {
  gap: 0px !important; /* Absolut minimal für zugeklappten Zustand */
}

/* Zusätzlich: Direktes Targeting mit höchster Spezifität */
html body #database-tab .database-controls.compact-gap {
  gap: 0px !important; /* Absolut minimal für zugeklappten Zustand */
}

/* 🚨 ULTIMATIVE REGEL: Abteilungsfilter-Content smooth ausblenden wenn collapsed */
html #departmentFiltersContent.collapsible-content.collapsed {
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  min-height: 0 !important;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              margin 0.3s ease,
              padding 0.3s ease !important;
}