/* =============================================================================
   ERP Holzbau – Bewegung (Ausbau 15 „Animierte Oberfläche“)
   -----------------------------------------------------------------------------
   Drei Stufen über html[data-motion] (gesetzt im Kopf von index.html, umschaltbar
   unter Darstellung › Bewegung, gespeichert in localStorage „erp:motion“):
     full    – alles hier Beschriebene (Vorgabe)
     reduced – nur die Blueprint-Übergänge von Overlays (Vorgabe bei
               prefers-reduced-motion)
     off     – keine Übergänge und Animationen
   Alle dekorativen Regeln hängen an :root[data-motion='full'], damit „Dezent“
   automatisch auf den bisherigen Stand zurückfällt. Keyframes laufen ohne
   fill-mode forwards: nach dem Ende ist nichts mehr „in Kraft“ – kein
   Stapelkontext, kein Containing Block für position: fixed (Lektion 18).
   Gegenstück in JS: js/ui/motion.js (Tab-Indikator, Seitenleisten-Marker,
   Ladebalken, Zählwerke, Diagramm-Aufbau, Reihen-Staffelung).
   ============================================================================= */

:root {
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --m-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --m-stagger: 35ms;
}

/* ------------------------------------------------------------------ Aus */
:root[data-motion='off'] *,
:root[data-motion='off'] *::before,
:root[data-motion='off'] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}

/* ------------------------------------------------------------ Keyframes */
@keyframes m-enter-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes m-fade {
  from {
    opacity: 0;
  }
}
@keyframes m-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.12);
  }
}
@keyframes m-drawer-in {
  from {
    transform: translateX(100%);
  }
}
@keyframes m-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
}
@keyframes m-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}
@keyframes m-toast-in {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.98);
  }
}
@keyframes m-toast-timer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes m-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@keyframes m-bar-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes m-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes m-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(3px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-6px);
  }
  40%,
  60% {
    transform: translateX(6px);
  }
}
@keyframes m-grid-pan {
  to {
    background-position:
      48px 48px,
      48px 48px,
      0 0;
  }
}
@keyframes m-progress-indet {
  0% {
    transform: translateX(-100%) scaleX(0.3);
  }
  50% {
    transform: translateX(30%) scaleX(0.55);
  }
  100% {
    transform: translateX(110%) scaleX(0.3);
  }
}
@keyframes m-flash {
  from {
    background-color: var(--m-flash-color, rgba(45, 114, 210, 0.22));
  }
}

/* ------------------------------------------------ Ladebalken (API-Aktivität) */
#m-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 2px;
  z-index: calc(var(--z-login) + 1);
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms linear;
}
#m-progress.on {
  opacity: 1;
  transition-duration: 80ms;
}
#m-progress > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bp-palette-blue-4, #4c90f0) 30%,
    #8abbff 70%,
    transparent
  );
  transform-origin: left center;
  animation: m-progress-indet 1.1s var(--m-ease-out) infinite;
}
:root:not([data-motion='full']) #m-progress {
  display: none;
}

/* ============================================================ Stufe „full“ */

/* ---- Seitenwechsel: Kopf, Reiter, Inhalt gleiten nacheinander herein */
:root[data-motion='full'] #view > .workspace-head {
  animation: m-enter-up var(--m-slow) var(--m-ease-out) backwards;
}
:root[data-motion='full'] #view > .bp6-tabs {
  animation: m-enter-up var(--m-slow) var(--m-ease-out) 40ms backwards;
}
:root[data-motion='full'] #view > .view-panel {
  animation: m-enter-up var(--m-slow) var(--m-ease-out) 80ms backwards;
}

/* ---- Staffelung (Index --i setzt motion.js; höchstens 14 Elemente) */
:root[data-motion='full'] .m-stagger > * {
  animation: m-enter-up var(--m-slow) var(--m-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--m-stagger) + 60ms);
}
:root[data-motion='full'] .m-stagger > .m-no-stagger {
  animation: none;
}

/* ---- Inhalt nach dem Laden (loader() in views/_common.js) */
:root[data-motion='full'] .m-reveal {
  animation: m-fade 260ms var(--m-ease-out) backwards;
}

/* ---- Tabellenzeilen beim ersten Befüllen */
:root[data-motion='full'] tr.m-row {
  animation: m-enter-up 240ms var(--m-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 16ms);
}
/* Wertänderung (Zählwerk / neu eingefügte Zeile) */
:root[data-motion='full'] .m-flash {
  animation: m-flash 1.2s ease-out;
}

/* ---- Skelett: Lichtkante statt Pulsieren */
:root[data-motion='full'] .skeleton-block .bp6-skeleton,
:root[data-motion='full'] .bp6-skeleton.m-shimmer {
  animation: m-shimmer 1.4s linear infinite;
  background: linear-gradient(
    90deg,
    rgba(211, 216, 222, 0.28) 0%,
    rgba(211, 216, 222, 0.28) 35%,
    rgba(229, 232, 235, 0.75) 50%,
    rgba(211, 216, 222, 0.28) 65%,
    rgba(211, 216, 222, 0.28) 100%
  );
  background-size: 200% 100%;
}
:root[data-motion='full'] body.bp6-dark .skeleton-block .bp6-skeleton,
:root[data-motion='full'] body.bp6-dark .bp6-skeleton.m-shimmer {
  background-image: linear-gradient(
    90deg,
    rgba(56, 62, 71, 0.7) 0%,
    rgba(56, 62, 71, 0.7) 35%,
    rgba(95, 107, 124, 0.55) 50%,
    rgba(56, 62, 71, 0.7) 65%,
    rgba(56, 62, 71, 0.7) 100%
  );
}

/* ---- Overlays: Drawer federt herein, Dialog skaliert, Hintergrund weichgezeichnet */
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer {
  animation: m-drawer-in 340ms var(--m-ease-out);
}
:root[data-motion='full'] #drawer-root .bp6-drawer {
  transition-duration: 200ms;
  transition-timing-function: var(--m-ease-in);
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-header,
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-body > *,
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-footer {
  animation: m-enter-up 360ms var(--m-ease-out) backwards;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-header {
  animation-delay: 70ms;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-body > :nth-child(1) {
  animation-delay: 110ms;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-body > :nth-child(2) {
  animation-delay: 145ms;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-body > :nth-child(3) {
  animation-delay: 180ms;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-body > :nth-child(n + 4) {
  animation-delay: 215ms;
}
:root[data-motion='full'] #drawer-root .bp6-overlay-open .bp6-drawer-footer {
  animation-delay: 160ms;
}
:root[data-motion='full'] #dialog-root .bp6-overlay-open .bp6-dialog,
:root[data-motion='full'] #palette-root .bp6-overlay-open .bp6-dialog {
  animation: m-dialog-in 260ms var(--m-spring);
}
:root[data-motion='full'] #drawer-root .bp6-overlay-backdrop,
:root[data-motion='full'] #dialog-root .bp6-overlay-backdrop,
:root[data-motion='full'] #palette-root .bp6-overlay-backdrop {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
:root[data-motion='full'] .bp6-overlay-open > .bp6-overlay-backdrop {
  animation: m-fade 220ms linear;
}

/* ---- Dropdown-Menüs der Kopfzeile (Neu, Darstellung, Benutzer) */
:root[data-motion='full'] .bp6-menu.dropdown {
  animation: m-menu-in 170ms var(--m-ease-out);
  transform-origin: top right;
}
:root[data-motion='full'] .bp6-menu.dropdown.dropdown-left {
  transform-origin: top left;
}
:root[data-motion='full'] .bp6-menu.dropdown > li {
  animation: m-fade 200ms var(--m-ease-out) backwards;
}
:root[data-motion='full'] .bp6-menu.dropdown > li:nth-child(2) {
  animation-delay: 20ms;
}
:root[data-motion='full'] .bp6-menu.dropdown > li:nth-child(3) {
  animation-delay: 40ms;
}
:root[data-motion='full'] .bp6-menu.dropdown > li:nth-child(4) {
  animation-delay: 60ms;
}
:root[data-motion='full'] .bp6-menu.dropdown > li:nth-child(n + 5) {
  animation-delay: 80ms;
}

/* ---- Toasts: von rechts, Restzeit als Balken (pausiert beim Überfahren) */
:root[data-motion='full'] #toast-root .bp6-toast {
  animation: m-toast-in 320ms var(--m-spring);
}
:root[data-motion='full'] #toast-root .bp6-toast.toast-out {
  transform: translateX(28px);
  transition:
    opacity 180ms var(--m-ease-in),
    transform 180ms var(--m-ease-in);
}
#toast-root .bp6-toast.has-timer {
  position: relative;
  overflow: hidden;
}
:root[data-motion='full'] #toast-root .bp6-toast.has-timer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: m-toast-timer var(--toast-ms, 4000ms) linear forwards;
}
:root[data-motion='full'] #toast-root .bp6-toast.has-timer:hover::after {
  animation-play-state: paused;
}

/* ---- Tab-Indikator gleitet (Element setzt motion.js als erstes Kind der Liste) */
.bp6-tab-indicator-wrapper.m-tab-ind {
  transition-duration: 260ms;
  transition-timing-function: var(--m-ease-out);
}
.bp6-tab-list:has(> .m-tab-ind) > .bp6-tab[aria-selected='true'] {
  box-shadow: none;
}
:root[data-motion='full'] .bp6-tab {
  transition: color var(--m-fast) linear;
}

/* ---- Seitenleiste: gleitender Marker, Icons federn beim Überfahren */
.sidebar .m-side-ind {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 40px;
  border-radius: 0 2px 2px 0;
  background: var(--bp-intent-primary-rest, #2d72d2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--y, 0));
  transition:
    transform 320ms var(--m-ease-out),
    opacity 200ms linear;
  z-index: 1;
}
body.bp6-dark .sidebar .m-side-ind {
  background: var(--bp-palette-blue-5, #8abbff);
}
.sidebar .m-side-ind.on {
  opacity: 1;
}
.sidebar.m-has-ind .bp6-menu-item.bp6-active {
  box-shadow: none;
}
:root[data-motion='full'] .sidebar .bp6-menu-item {
  transition:
    background-color 150ms linear,
    color 150ms linear;
}
:root[data-motion='full'] .sidebar .bp6-menu-item > .bp6-icon {
  transition:
    transform 260ms var(--m-spring),
    color 150ms linear;
}
:root[data-motion='full'] .sidebar .bp6-menu-item:hover > .bp6-icon {
  transform: scale(1.12);
}
:root[data-motion='full'] .sidebar .bp6-menu-item > .bp6-fill {
  transform: translateX(-6px);
  transition:
    opacity 160ms linear,
    transform 240ms var(--m-ease-out);
}
:root[data-motion='full'] body.sidebar-expanded .sidebar .bp6-menu-item > .bp6-fill,
:root[data-motion='full'] .sidebar:focus-within .bp6-menu-item > .bp6-fill {
  transform: none;
}
@media (hover: hover) and (min-width: 1200px) {
  :root[data-motion='full'] .sidebar:hover .bp6-menu-item > .bp6-fill {
    transform: none;
  }
}
:root[data-motion='full'] .sidebar {
  transition: width 240ms var(--m-ease-out);
}

/* ---- Bedienelemente: Druckgefühl und weiche Zustände */
:root[data-motion='full'] .bp6-button {
  transition:
    background-color var(--m-fast) linear,
    box-shadow var(--m-fast) linear,
    color var(--m-fast) linear,
    transform 90ms var(--m-ease-out);
}
:root[data-motion='full'] .bp6-button:not(:disabled):not(.bp6-disabled):active {
  transform: scale(0.965);
}
:root[data-motion='full'] .bp6-button > .bp6-icon {
  transition: transform 220ms var(--m-spring);
}
:root[data-motion='full'] .bp6-button[aria-expanded='true'] > .bp6-icon-caret-down,
:root[data-motion='full'] .bp6-button[aria-expanded='true'] > .bp6-icon-chevron-down {
  transform: rotate(180deg);
}
:root[data-motion='full'] .bp6-input,
:root[data-motion='full'] .bp6-html-select select,
:root[data-motion='full'] textarea.bp6-input {
  transition:
    box-shadow 180ms var(--m-ease-out),
    background-color 180ms linear;
}
:root[data-motion='full'] .bp6-tag {
  transition:
    background-color var(--m-fast) linear,
    transform 180ms var(--m-spring);
}
:root[data-motion='full'] .navbar .bp6-tag {
  animation: m-pop 360ms var(--m-ease-out) backwards;
}

/* ---- Karten und Kacheln heben sich beim Überfahren */
:root[data-motion='full'] .stat-tile,
:root[data-motion='full'] .bp6-card.bp6-interactive,
:root[data-motion='full'] .crm-card {
  transition:
    transform 220ms var(--m-ease-out),
    box-shadow 220ms var(--m-ease-out),
    border-color 150ms linear;
}
@media (hover: hover) {
  :root[data-motion='full'] .stat-tile.clickable:hover,
  :root[data-motion='full'] .bp6-card.bp6-interactive:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(17, 20, 24, 0.1),
      0 4px 12px rgba(17, 20, 24, 0.18);
  }
  :root[data-motion='full'] body.bp6-dark .stat-tile.clickable:hover,
  :root[data-motion='full'] body.bp6-dark .bp6-card.bp6-interactive:hover {
    box-shadow:
      0 0 0 1px rgba(17, 20, 24, 0.3),
      0 6px 16px rgba(0, 0, 0, 0.45);
  }
}
:root[data-motion='full'] .crm-card.is-dragging {
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
:root[data-motion='full'] .widget {
  transition: opacity 200ms linear;
}

/* ---- Diagramme bauen sich auf */
:root[data-motion='full'] .viz-bars .viz-bar.m-anim {
  transform-box: fill-box;
  transform-origin: left center;
  animation: m-bar-grow 620ms var(--m-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}
:root[data-motion='full'] .viz-bars .viz-value.m-anim {
  animation: m-fade 300ms linear backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 480ms);
}
:root[data-motion='full'] .m-draw {
  stroke-dasharray: 1;
  animation: m-draw 900ms var(--m-ease-out) 120ms backwards;
}
:root[data-motion='full'] .viz-area.m-anim {
  animation: m-fade 700ms linear 400ms backwards;
}
:root[data-motion='full'] .viz-dot.m-anim {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-pop 380ms var(--m-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 25ms + 700ms);
}
:root[data-motion='full'] .viz-meter-fill.m-anim {
  transform-origin: left center;
  animation: m-bar-grow 700ms var(--m-ease-out) 150ms backwards;
}

/* ---- Anmeldung: Blaupausen-Raster, Karte federt herein, Fehler schüttelt */
:root[data-motion='full'] .login::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(76, 144, 240, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 144, 240, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, rgba(45, 114, 210, 0.16), transparent 60%);
  background-size:
    48px 48px,
    48px 48px,
    100% 100%;
  animation: m-grid-pan 14s linear infinite;
}
:root[data-motion='full'] .login > * {
  position: relative;
}
:root[data-motion='full'] .login-card:not([hidden]) {
  animation: m-dialog-in 520ms var(--m-spring) 60ms backwards;
}
:root[data-motion='full'] .login-card .bp6-form-group,
:root[data-motion='full'] .login-card #login-submit {
  animation: m-enter-up 420ms var(--m-ease-out) backwards;
}
:root[data-motion='full'] .login-card .bp6-form-group:nth-of-type(1) {
  animation-delay: 180ms;
}
:root[data-motion='full'] .login-card .bp6-form-group:nth-of-type(2) {
  animation-delay: 230ms;
}
:root[data-motion='full'] .login-card .bp6-form-group:nth-of-type(3) {
  animation-delay: 280ms;
}
:root[data-motion='full'] .login-card #login-submit {
  animation-delay: 330ms;
}
:root[data-motion='full'] .login-card.m-shake {
  animation: m-shake 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
:root[data-motion='full'] #login-error:not([hidden]) {
  animation: m-enter-up 260ms var(--m-ease-out);
}

/* ---- Callouts, leere Zustände, Meldungen */
:root[data-motion='full'] .workspace .bp6-non-ideal-state {
  animation: m-enter-up 420ms var(--m-ease-out) backwards;
}