/* Eigene Anpassungen auf Tabler-Basis. */
.text-prewrap { white-space: pre-wrap; word-wrap: break-word; }
.avatar-initial { font-weight: 700; }
/* Alpine.js: Elemente mit x-cloak bis zur Initialisierung verbergen (Standard-Regel aus der Alpine-Doku). */
[x-cloak] { display: none !important; }
/* Logo (core/components/logo.html): sm = Navigation, lg = Startseite (schrumpft auf schmalen Bildschirmen). */
.brand-logo { display: block; }
.brand-logo-sm { height: 2rem; width: auto; }
.brand-logo-lg { width: 20rem; max-width: 100%; height: auto; }

/* Seitenleiste (Tabler navbar-vertical): 13rem statt Tablers 16rem. Tabler berechnet daraus auch den Abstand des Inhalts. */
:root { --tblr-sidebar-width: 13rem; }
/* Logo-Link schneidet ab, statt überzulaufen (während die Leiste beim Aufklappen animiert breiter wird). */
.navbar-vertical .navbar-brand > a { min-width: 0; overflow: hidden; }
/* Quadratisches James-Icon: nur in der eingeklappten Icon-Leiste (siehe unten). */
.brand-icon { display: none; width: 2rem; height: 2rem; border-radius: var(--tblr-border-radius); }
/* Einklapp-Button: Icon passend zum Zustand (aria-pressed setzt Tabler). */
[data-bs-toggle="sidebar-folded"][aria-pressed="true"] .sidebar-fold-icon,
[data-bs-toggle="sidebar-folded"][aria-pressed="false"] .sidebar-unfold-icon { display: none; }
/* Pfeil der Modulgruppen dreht sich beim Auf-/Zuklappen (wie Tablers .nav-link-toggle). */
.navbar-vertical .nav-link.dropdown-toggle::after { transition: transform .3s; }
.navbar-vertical .nav-link.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
  .navbar-vertical .nav-link.dropdown-toggle::after { transition: none; }
}
@media (min-width: 992px) {
  /* Tabler setzt die Breite der eingeklappten Leiste beim Überfahren fest auf 16rem. */
  .navbar-vertical.navbar-expand-lg.navbar-folded-hover:has(:focus-visible),
  .navbar-vertical.navbar-expand-lg.navbar-folded-hover:hover,
  :where([data-bs-sidebar=folded-hover]) .navbar-vertical.navbar-expand-lg:has(:focus-visible),
  :where([data-bs-sidebar=folded-hover]) .navbar-vertical.navbar-expand-lg:hover { width: 13rem; }
  /* Gerade per Mausklick eingeklappt (app.js setzt Tablers .navbar-folded, bis die Maus die Leiste verlässt):
     schmal bleiben, obwohl die Maus noch darauf ist – kein Aufklappen, kein Schatten. */
  .navbar-vertical.navbar-expand-lg.navbar-folded:hover,
  .navbar-vertical.navbar-expand-lg.navbar-folded:has(:focus-visible) {
    width: var(--tblr-sidebar-folded-width);
    box-shadow: inset calc(-1 * var(--tblr-navbar-border-width)) 0 0 0 var(--tblr-navbar-border-color);
  }
  /* Eingeklappt (und nicht überfahren): Icon statt des breiten Logos. */
  html[data-bs-sidebar^=folded] .navbar-vertical:not(:hover):not(:has(:focus-visible)) .brand-logo,
  .navbar-vertical.navbar-folded .brand-logo { display: none; }
  html[data-bs-sidebar^=folded] .navbar-vertical:not(:hover):not(:has(:focus-visible)) .brand-icon,
  .navbar-vertical.navbar-folded .brand-icon { display: block; }
  /* Inhalt gleitet beim Ein-/Ausklappen mit der Leiste (gleiche Dauer wie Tablers Breiten-Animation), statt zu springen. */
  .navbar-vertical.navbar-expand-lg ~ .page-wrapper { transition: margin-inline-start .3s; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .navbar-vertical.navbar-expand-lg ~ .page-wrapper { transition: none; }
}