/* ===========================================================================
   Skeleton-Loader-Styles (geteilt zwischen Frontend und Admin-Backend).

   Wird ueber js/skeleton.js eingehaengt. Liefert visuelle Platzhalter
   waehrend asynchroner Datenladevorgaenge (Tabellen, Formularfelder,
   Dropdowns, Pane-Overlays). Setzt auf Bootstrap-5-Placeholder-Glow auf,
   ergaenzt um Helle/Dunkle Pulse-Farben und Layout-Helper.

   A11y: Container, die ein Skeleton enthalten, bekommen aria-busy="true";
   das Skeleton-Markup selbst ist aria-hidden="true". js/skeleton.js setzt
   beides automatisch.
   =========================================================================== */

/* Basis-Pulse: dezenter Gradient, identisch zu Bootstrap-Placeholder, aber
   mit konsistenter Farbe ueber Theme-Grenzen hinweg. */
.skel-pulse {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  background-color: rgba(13, 18, 23, 0.10);
  border-radius: 0.25rem;
  animation: skel-pulse-anim 1.4s ease-in-out infinite;
}
@keyframes skel-pulse-anim {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Dark-Mode: hellere Pulse-Streifen auf dunklem Untergrund. Sowohl
   data-theme (Frontend) als auch data-bs-theme (Admin-Header) abdecken. */
[data-theme="dark"] .skel-pulse,
[data-bs-theme="dark"] .skel-pulse {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Komponenten-Varianten. Hoehen sind so gewaehlt, dass sie ihren echten
   Pendants in Hoehe/Linehight entsprechen -> kein Layout-Shift beim Swap. */
.skel-line     { height: 1rem;     width: 100%; display: block; margin: .3rem 0; }
.skel-line-sm  { height: .75rem;   width: 80%;  display: block; margin: .25rem 0; }
.skel-badge    { height: 1.1rem;   width: 4rem; display: inline-block; }
.skel-input    { height: 2.25rem;  width: 100%; display: block; }
.skel-circle   { width: 2rem; height: 2rem; border-radius: 50%; display: inline-block; }
.skel-btn      { height: 1.85rem;  width: 2rem; display: inline-block; }

/* Tabellen-Skeleton-Zeile: nutzt normales <tr><td>-Layout, damit das
   echte <tbody> nach renderTable() einfach via innerHTML-Swap uebernehmen
   kann. Skeleton-tr bekommt eine Markerklasse fuer das Aufraeumen. */
.skel-tr td { padding: .55rem .75rem; }

/* Pane-Overlay (SDA-Wizard): liegt absolute ueber dem aktiven tab-pane,
   bedeckt es vollstaendig, blockiert Klicks. Pane selbst bleibt unangetastet
   (Klassen fade/show/active werden NICHT manipuliert). */
.skel-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  padding: 1rem;
  pointer-events: all;
}
[data-theme="dark"] .skel-overlay,
[data-bs-theme="dark"] .skel-overlay {
  background: rgba(20, 24, 28, 0.65);
}
.skel-overlay-inner { width: 100%; max-width: 100%; }

/* Container, der das Overlay aufnimmt, muss position:relative haben.
   js/skeleton.js setzt eine Marker-Klasse statt inline-styles, damit
   keine pre-existing inline-positions ueberschrieben werden. */
.skel-host-rel { position: relative; }

/* Dropdown-Skeleton: laeuft als kleines Pulse-Element auf gleichem
   Platz wie das eigentliche <select>, damit Layout stabil bleibt. */
.skel-select {
  width: 100%;
  height: calc(1.5em + .75rem + 2px);   /* Bootstrap form-select default */
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: .375rem;
  background-clip: padding-box;
}
.skel-select-sm {
  height: calc(1.5em + .5rem + 2px);    /* Bootstrap form-select-sm */
}