/**
 * Custom Scrollbar – wie Panel (Dark & Light)
 * Vertikal + horizontal, Viewport und alle scrollbaren Bereiche.
 */

html {
  scrollbar-width: thin;
  scrollbar-gutter: stable; /* nur Viewport – sonst Gap bei Tabellen/Cards */
}

* {
  scrollbar-width: thin;
}

/* ========== DARK MODE ========== */
html[data-pc-theme="dark"],
body[data-pc-theme="dark"],
html[data-pc-theme="dark"] *,
body[data-pc-theme="dark"] * {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

html[data-pc-theme="dark"]::-webkit-scrollbar,
body[data-pc-theme="dark"]::-webkit-scrollbar,
html[data-pc-theme="dark"] *::-webkit-scrollbar,
body[data-pc-theme="dark"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-pc-theme="dark"]::-webkit-scrollbar-track,
body[data-pc-theme="dark"]::-webkit-scrollbar-track,
html[data-pc-theme="dark"] *::-webkit-scrollbar-track,
body[data-pc-theme="dark"] *::-webkit-scrollbar-track {
  background: transparent;
}

html[data-pc-theme="dark"]::-webkit-scrollbar-thumb,
body[data-pc-theme="dark"]::-webkit-scrollbar-thumb,
html[data-pc-theme="dark"] *::-webkit-scrollbar-thumb,
body[data-pc-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

html[data-pc-theme="dark"]::-webkit-scrollbar-thumb:hover,
body[data-pc-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-pc-theme="dark"] *::-webkit-scrollbar-thumb:hover,
body[data-pc-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

html[data-pc-theme="dark"]::-webkit-scrollbar-corner,
body[data-pc-theme="dark"]::-webkit-scrollbar-corner,
html[data-pc-theme="dark"] *::-webkit-scrollbar-corner,
body[data-pc-theme="dark"] *::-webkit-scrollbar-corner {
  background: transparent;
}

/* ========== LIGHT MODE ========== */
html[data-pc-theme="light"],
body[data-pc-theme="light"],
html[data-pc-theme="light"] *,
body[data-pc-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

html[data-pc-theme="light"]::-webkit-scrollbar,
body[data-pc-theme="light"]::-webkit-scrollbar,
html[data-pc-theme="light"] *::-webkit-scrollbar,
body[data-pc-theme="light"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-pc-theme="light"]::-webkit-scrollbar-track,
body[data-pc-theme="light"]::-webkit-scrollbar-track,
html[data-pc-theme="light"] *::-webkit-scrollbar-track,
body[data-pc-theme="light"] *::-webkit-scrollbar-track {
  background: transparent;
}

html[data-pc-theme="light"]::-webkit-scrollbar-thumb,
body[data-pc-theme="light"]::-webkit-scrollbar-thumb,
html[data-pc-theme="light"] *::-webkit-scrollbar-thumb,
body[data-pc-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

html[data-pc-theme="light"]::-webkit-scrollbar-thumb:hover,
body[data-pc-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-pc-theme="light"] *::-webkit-scrollbar-thumb:hover,
body[data-pc-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

html[data-pc-theme="light"]::-webkit-scrollbar-corner,
body[data-pc-theme="light"]::-webkit-scrollbar-corner,
html[data-pc-theme="light"] *::-webkit-scrollbar-corner,
body[data-pc-theme="light"] *::-webkit-scrollbar-corner {
  background: transparent;
}

/* Fallback ohne Theme-Attribut (vor JS) */
html:not([data-pc-theme])::-webkit-scrollbar,
body:not([data-pc-theme])::-webkit-scrollbar,
*:not([data-pc-theme])::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html:not([data-pc-theme]),
body:not([data-pc-theme]),
*:not([data-pc-theme]) {
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}