/* ==========================================================================
 time-bucket-bars.css — TimeBucketBars Custom-SVG-Chart

 Konsument: web/js/domain/charts/time-bucket-bars.js (window.TimeBucketBars)

 TimeBucketBars rendert intern dieselbe SVG-Struktur wie das Dashboard-
 DailyChart (`.dash-daily-chart-host` als inner Wrapper) und nutzt
 `.tbb-*`-Klassen statt `.dc-*`. Die Compound-Selektoren `.dash-daily-
 chart-host .tbb-*` greifen, weil der Renderer `<div class="tbb-chart">
 <div class="dash-daily-chart-host" data-tbb-chart></div></div>` aufbaut.

 Tooltip-Klassen `.dc-tooltip*` werden geteilt und liegen separat in
 domain/dashboard/chart-tooltip.css.

 Aus domain/dashboard/daily-chart.css extrahiert
 in die Mirror-Topologie zu web/js/domain/charts/. Chart ist Domain-
 "charts", nicht "dashboard" — daher eigenes Verzeichnis.
 ========================================================================== */

.dash-daily-chart-host .tbb-svg,
.tbb-chart .tbb-svg                         { display: block; width: 100%; height: 100%; }
.tbb-chart .dash-daily-chart-host           { min-height: 180px; }
.tbb-chart .dash-daily-chart-host .tbb-svg  { height: 180px; }
.dash-daily-chart-host .tbb-grid,
.tbb-chart .tbb-grid                        { stroke: var(--color-border-light); stroke-width: 1; shape-rendering: crispEdges; }
.dash-daily-chart-host .tbb-y-label,
.dash-daily-chart-host .tbb-x-label,
.tbb-chart .tbb-y-label,
.tbb-chart .tbb-x-label                     { font-family: inherit; font-size: 10.5px; fill: var(--color-text-muted); }
.dash-daily-chart-host .tbb-bar,
.tbb-chart .tbb-bar                         { transition: opacity var(--duration-quick); cursor: pointer; }
.dash-daily-chart-host .tbb-bar:hover,
.tbb-chart .tbb-bar:hover                   { opacity: 0.85; }
.dash-daily-chart-host .tbb-hover,
.tbb-chart .tbb-hover                       { cursor: pointer; }
.tbb-chart .tbb-ref                         { pointer-events: none; }
.tbb-chart .tbb-tooltip                     { /* Tooltip uebernimmt .dc-tooltip-Styles aus chart-tooltip.css */ }

/* Loading-State: Skeleton-Shimmer ueber dem existierenden Plot.
   Existierende Daten werden abgedimmt sichtbar, ein animierter Streifen
   laeuft horizontal durch — verhindert Verwirrung beim Range-Switch. */
.tbb-chart.is-loading {
  position: relative;
  pointer-events: none;
}
.tbb-chart.is-loading > * {
  opacity: 0.45;
  filter: grayscale(0.4);
  transition: opacity var(--duration-quick);
}
.tbb-chart.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: tbb-skeleton-shimmer var(--duration-shimmer) var(--ease-inout-soft) infinite;
  pointer-events: none;
}
@keyframes tbb-skeleton-shimmer {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* Legend-Linie (Reference) — `.dc-tooltip .kvc-tip-line` Compound-Selector
   bleibt parallel in chart-tooltip.css. Hier nur die TBB-Variante. */
.dash-daily-legend .tbb-legend-line {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid;
  vertical-align: middle;
  margin-right: var(--space-1);
}