/* ShiftFlow 1.3 – Premium UX */

:root {
  --sf-ease: cubic-bezier(.22, 1, .36, 1);
  --sf-fast: 160ms;
  --sf-normal: 280ms;
  --sf-slow: 420ms;
}

html {
  scroll-behavior: smooth;
}

body {
  transition:
    background-color var(--sf-slow) var(--sf-ease),
    color var(--sf-normal) var(--sf-ease);
}

body,
.app-sidebar,
.dashboard-widget,
.button,
input,
select,
textarea,
nav a {
  transition:
    background-color var(--sf-normal) var(--sf-ease),
    color var(--sf-normal) var(--sf-ease),
    border-color var(--sf-normal) var(--sf-ease),
    box-shadow var(--sf-normal) var(--sf-ease),
    transform var(--sf-fast) var(--sf-ease),
    opacity var(--sf-fast) ease;
}

.button,
button,
nav a,
.quick-action-grid a,
.calendar-day,
.week-list article {
  -webkit-tap-highlight-color: transparent;
}

.button:hover,
.quick-action-grid a:hover {
  transform: translateY(-2px) scale(1.01);
}

.button:active,
button:active,
nav a:active,
.quick-action-grid a:active {
  transform: translateY(0) scale(.985);
}

.dashboard-widget,
.calendar-day,
.week-list article,
.insight-item {
  will-change: transform;
}

.dashboard-widget:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-b) 26%, var(--app-border));
  box-shadow:
    0 24px 70px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in srgb, var(--accent-b) 9%, transparent);
}

.app-sidebar nav {
  position: relative;
}

.app-sidebar nav a {
  position: relative;
  overflow: hidden;
}

.app-sidebar nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent-a) 16%, transparent),
    color-mix(in srgb, var(--accent-b) 12%, transparent)
  );
  transition: opacity var(--sf-normal) var(--sf-ease);
}

.app-sidebar nav a:hover::before,
.app-sidebar nav a.active::before {
  opacity: 1;
}

.app-sidebar nav a > * {
  position: relative;
  z-index: 1;
}

.motion-reveal {
  opacity: 0;
  transform: translateY(12px) scale(.995);
}

.motion-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 540ms var(--sf-ease),
    transform 540ms var(--sf-ease);
}

.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 380ms var(--sf-ease),
    color 300ms var(--sf-ease),
    border-color 300ms var(--sf-ease),
    box-shadow 380ms var(--sf-ease),
    fill 300ms var(--sf-ease),
    stroke 300ms var(--sf-ease) !important;
}

.sf-page-enter {
  animation: sfPageEnter 420ms var(--sf-ease) both;
}

@keyframes sfPageEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sf-click-ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.22);
  animation: sfRipple 520ms ease-out forwards;
}

@keyframes sfRipple {
  to {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
}

.typing-indicator i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-b);
  animation: sfTyping 1s infinite ease-in-out;
}

.typing-indicator i:nth-child(2) { animation-delay: .13s; }
.typing-indicator i:nth-child(3) { animation-delay: .26s; }

@keyframes sfTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.live-countdown strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .dashboard-widget:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-page-enter,
  .typing-indicator i,
  .sf-click-ripple {
    animation: none !important;
  }

  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* v1.5.1 – Scale-Effekte deaktiviert */
.button:hover,
.quick-action-grid a:hover {
  transform: translateY(-2px) !important;
}

.button:active,
button:active,
nav a:active,
.quick-action-grid a:active {
  transform: translateY(0) !important;
}

.sf-page-enter {
  animation: sfCleanPageEnter 360ms var(--ease-clean) both !important;
}