/* ───────────────────────────────
   Theme-Variablen (anpassen nach Wunsch!)
──────────────────────────────── */
:root {
    --primary-color:    #008080; /* gleiche Farbe wie dein Tabellen-Header */
    --primary-light:    #e6f7f7; /* leichter Hintergrund für den Filterbereich */
    --primary-contrast: #ffffff; /* Weiß für Text/Icons */
}
  
/* Dynamischer Column Selector */
/* Column-Selector in 3 Spalten */
[id^="column-selector-"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
  
[id^="column-selector-"] label {
    flex: 0 0 calc(33.333% - 8px);
    display: flex;
    align-items: center;
    gap: 5px;
}
  

#column-selector {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    gap: 8px; /* Abstand zwischen den Checkboxen */
}

#column-selector label {
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen Checkbox und Text */
}

#filters {
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.filter-field,
.filter-value {
    padding: 5px;
    font-size: 14px;
}

.remove-filter {
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}

.remove-filter:hover {
    background: #ff1a1a;
}

/* Filter-Row und Header-Filter Inputs/Selects */
.filter-row input,
.filter-row select,
.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 3px;
  padding: 4px 6px;
}

/* Alle Filter-Controls „aktiv“ weiß und mit schwarzer Schrift */
[id^="filters-"] input,
[id^="filters-"] select,
[id^="filters-"] button:not(.ecg-button) {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  padding: 4px 8px !important;
  cursor: pointer;
}

/* Abstand zwischen Checkbox-Liste und Filter-Bereich */
[id^="column-selector-"] {
    margin-bottom: 1.5rem; /* oder 1rem, je nachdem wie groß das Leer­zeile sein soll */
  }
  
  /* Abstand oben und unten am Filter-Bereich */
  [id^="filters-"] {
    margin: 1.5rem 0; /* 1.5rem Abstand oben UND unten */
  }
  
/* ─────────────────────────────────────────────
   Tabulator Table Header passend einfärben
───────────────────────────────────────────── */
 
  /* Hintergrund für alle Header-Zellen */
  .tabulator .tabulator-header .tabulator-col {
    background-color: #009da5 !important;
    color:            #ffffff !important;
    border:           none !important;
  }

/* ───────────────────────────────────────────
   Filter-Area Primary-Buttons (#889e33)
──────────────────────────────────────────── */
.ecg-button {
    background-color: #889e33 !important; /* Dein Grün */
    border:           1px solid #889e33 !important;
    color:            #fff      !important; /* Weißer Text */
    border-radius:    4px       !important;
    padding:          0.4rem 0.8rem !important;
    font-weight:      bold      !important;
    cursor:           pointer   !important;
  }

  [id^="filters-"] .remove-filter {
    background: transparent !important;
    color:      #889e33     !important;
    border:     none         !important;
    padding:    0.2rem 0.5rem !important;
  }

  /* ─────────────────────────────────────────────
   Column-Selector Checkboxen & Labels einfärben
───────────────────────────────────────────── */
[id^="column-selector-"] input[type="checkbox"] {
    /* Moderner Ansatz: accent-color */
    accent-color: #889e33;
    /* Optional etwas größer, damit man die Farbe besser sieht */
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
  }
  
  [id^="column-selector-"] label {
    /* Label-Text farblich anpassen */
    color: #333;           /* dunkles Grau für Lesbarkeit */
  }
  
  .tabulator-cell a {
    color: #889e33 !important; 
}

/* Min-Max Headerfilter Inputs einheitlich stylen */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
  height: 26px;
  padding: 4px 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Container für Min/Max Inputs: flex nebeneinander */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter span {
  display: flex;
  gap: 4px;
  align-items: center;
}



/* Custom Multiselect Header Filter Input */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input[readonly] {
  background-color: #fff !important;
  cursor: pointer !important;
}