/* =========================================================================
   Ergänzende Styles: Animationen, Modals, Dropdowns, Tooltips, Druck.
   Das Designsystem (Buttons, Karten, Formulare) ist in partials/head.php
   als Tailwind-Komponenten definiert.
   ========================================================================= */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; }
::selection { background: color-mix(in oklab, var(--brand) 22%, white); }
[x-cloak], [hidden] { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Einblenden beim Scrollen (nur mit JS aktiv) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 60ms !important; }
.reveal-delay-2 { transition-delay: 120ms !important; }
.reveal-delay-3 { transition-delay: 180ms !important; }

/* ---------- Sidebar (mobil) ---------- */
.sidebar { transition: transform .3s var(--ease-out); }
@media (max-width: 1023.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 20px 60px -10px rgb(15 23 42 / .25); }
  body.sidebar-open .sidebar { transform: none; }
}
.sidebar-backdrop { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); }
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- Dropdown ---------- */
[data-dropdown] { position: relative; }
.dropdown-menu {
  position: absolute; z-index: 60; min-width: 13rem; padding: .375rem;
  background: #fff; border-radius: .9rem; box-shadow: 0 10px 38px -8px rgb(15 23 42 / .22), 0 0 0 1px rgb(226 232 240);
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: top right; pointer-events: none; visibility: hidden;
  transition: opacity .16s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s;
}
.dropdown-menu.right-0 { right: 0; }
.dropdown-menu:not(.bottom-full) { top: calc(100% + 6px); }
[data-dropdown].is-open > .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; visibility: hidden; pointer-events: none; }
@media (min-width: 640px) { .modal { align-items: center; } }
.modal-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s var(--ease-out); }
.modal-panel {
  position: relative; width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; border-radius: 1.1rem;
  box-shadow: 0 30px 80px -20px rgb(15 23 42 / .45); opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-panel { opacity: 1; transform: none; }
body.modal-open { overflow: hidden; }

/* ---------- Toasts ---------- */
.toast { animation: toast-in .4s var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out .25s var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---------- Tooltip (data-tip) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 75;
  transform: translate(-50%, 4px); padding: .3rem .55rem; border-radius: .45rem; background: #0f172a; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; letter-spacing: normal; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; }
[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }

/* ---------- Ladezustand von Buttons ---------- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.1rem; height: 1.1rem; border-radius: 9999px;
  border: 2px solid currentColor; border-color: rgb(255 255 255 / .9) rgb(255 255 255 / .9) rgb(255 255 255 / .25) rgb(255 255 255 / .25);
  animation: spin .7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: rgb(71 85 105) rgb(71 85 105) rgb(203 213 225) rgb(203 213 225); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Mikrointeraktionen ---------- */
.press { transition: transform .12s ease; } .press:active { transform: scale(.97); }
.pulse-dot { position: relative; }
.pulse-dot::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: currentColor; opacity: .35; animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(.8); opacity: .45; } 80%, 100% { transform: scale(2.1); opacity: 0; } }

.flash-row { animation: flash-row 1.2s var(--ease-out); }
@keyframes flash-row { from { background: color-mix(in oklab, var(--brand) 12%, white); } to { background: transparent; } }

.item-row { animation: item-in .32s var(--ease-out) both; }
.item-row.is-removing { animation: item-out .22s var(--ease-out) both; }
@keyframes item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes item-out { to { opacity: 0; transform: translateX(-12px); } }

.number-tick { display: inline-block; animation: tick .35s var(--ease-out); }
@keyframes tick { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out), opacity .3s; opacity: 0; }
.collapse > * { overflow: hidden; }
.collapse.is-open { grid-template-rows: 1fr; opacity: 1; }

.bar { transform-origin: bottom; animation: bar-grow .9s var(--ease-out) both; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: none; } }

.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: .5rem; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn.is-loading::after { animation: spin 1.5s linear infinite !important; animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
}

/* ---------- Druck (Offerten als PDF speichern) ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .card { box-shadow: none !important; border: 0 !important; --tw-ring-shadow: 0 0 #0000 !important; }
  .no-print, #toasts, .modal { display: none !important; }
  a[href]::after { content: none !important; }
  table { page-break-inside: auto; } tr { page-break-inside: avoid; }
}