:root {
	--theme-text-color: #2b2b2b;
	--theme-red-icons: #642929;
}

:root.dark {
	--theme-text-color: #c0c0c0;
	--background: #202020;
	--surfacePrimary: #303030;
	--surfaceSecondary: #404040;
	--theme-red-icons: #c8556e;
	
	--blue: #c8556e;
    --dark-blue: #c8556e;
}



html body header button.action span.counter {
  background: var(--theme-red-icons) !important;
  color: #ffffff !important;
}

/* ===== FINAL Badge Override ===== */
header button.action span.counter {
  background: var(--theme-red-icons) !important;
  background-color: var(--theme-red-icons) !important;
  color: #ffffff !important;
}

/* ===== Badge FINAL überschreiben ===== */
.action .counter {
  background: var(--theme-red-icons) !important;
  color: #ffffff !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;

  top: -4px !important;
  right: -4px !important;
}


/* etwas Feinschliff */
.action .counter {
  border-radius: 50% !important;
  font-weight: bold !important;
}x

/* ===== GLOBAL: Standard-Blau ersetzen ===== */
:root {
  --blue: var(--theme-red-icons) !important;
}

/* Badge Text */
span.counter {
  color: #ffffff !important;
  font-weight: bold !important;
}

/* ===== Badge überschreiben (final) ===== */
span.counter {
  background: var(--theme-red-icons) !important;
  color: #ffffff !important;
  
  border-radius: 50% !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-weight: bold !important;

  display: inline-block !important;
}

/* sicherstellen, dass Button Bezugspunkt hat */
button.action {
  position: relative !important;
}

/* ===== BLAUES STANDARD-HIGHLIGHT ENTFERNEN ===== */
#listing .item[aria-selected="true"],
#listing .item.selected {
  background: rgba(0, 0, 0, 0.04) !important; /* dezentes grau */
  color: #2b2b2b !important;
}

/* ===== Hover ===== */
#listing .item:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ===== Fokus / Klickzustände (wichtig gegen blau) ===== */
#listing .item:focus,
#listing .item:active {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ===== Tabellen / Listen allgemein ===== */
.listing .item {
  background: transparent !important;
}




/* ===== ALLE TEXTE ROT ===== */
body,
span,
div,
p,
label,
a,
h1, h2, h3, h4, h5,
td, th {
  color: var(--theme-text-color) !important;
}


/* ===== Material Icons (entscheidend!) ===== */
.material-icons {
  color: var(--theme-red-icons) !important;
}

/* ===== Ordner-Icons (die blauen) ===== */
.icon-folder {
  color: var(--theme-red-icons) !important;
  fill: var(--theme-red-icons) !important;
}

/* ===== Allgemeine Icons fallback ===== */
i,
svg {
  color: var(--theme-red-icons) !important;
  fill: var(--theme-red-icons) !important;
}

/* harte Methode für Ordner */
.icon-folder {
  color: var(--theme-red-icons) !important;
  fill: var(--theme-red-icons) !important;
}

/* ===== Ordner-Icons ===== */
.file-icon svg,
.file-icon i,
.item svg {
  fill: var(--theme-red-icons) !important;
  color: var(--theme-red-icons) !important;
}

/* ===== Toolbar Icons (oben rechts) ===== */
.actions svg,
.actions i,
button svg {
  fill: var(--theme-red-icons) !important;
  color: var(--theme-red-icons) !important;
}

/* ===== Sidebar Icons ===== */
.sidebar svg,
.sidebar i {
  fill: #ffffff !important; /* bleibt weiß für Kontrast */
}

/* ===== Hover (optional schöner Effekt) ===== */
.actions svg:hover,
.file-icon svg:hover {
  fill: #8a2f2f !important;
}

/* Logo ersetzen */
.logo img {
  content: url("/img/logo.svg") !important;
  height: 40px;

}