/* ══════════════════════════════════════════════════════════════════════
   motion.css — smooth transitions for every CRM page (React and hand-coded).
   Linked in the <head> of every page. Everything here is presentation only
   and switches off for people who ask their device for reduced motion.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Moving between pages: a quick cross-fade instead of a white flash.
      The sidebar and top bar keep still while only the page content changes
      (same-origin navigations, Chrome / Edge / Safari 18+; others just load). */
@view-transition { navigation: auto; }
aside.fixed.inset-y-0.left-0 { view-transition-name: crm-sidebar; }
header.h-16.fixed { view-transition-name: crm-header; }
::view-transition-old(root) { animation: crm-vt-out .16s ease-in both; }
::view-transition-new(root) { animation: crm-vt-in .22s ease-out both; }
::view-transition-group(crm-sidebar),
::view-transition-group(crm-header) { animation-duration: 0s; }
@keyframes crm-vt-out { to { opacity: 0; } }
@keyframes crm-vt-in { from { opacity: 0; } }

/* 2. Page content fades in when it first renders and when a React page
      swaps its content (opacity only, so fixed pop-ups inside keep their place). */
main > *, #app-shell-root main > * { animation: crm-fade-in .22s ease-out both; }
.cp-body, #cp-body, .pr-body, .al-list, #list-region > *, .rp-grid { animation: crm-fade-in .2s ease-out both; }
@keyframes crm-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 3. Hover / focus / press feel the same everywhere. Low specificity
      (:where) so any component's own transition still wins. */
:where(button, a, input, select, textarea, summary, [role="button"], [role="tab"], .card, .sidebar-link, .btn, .badge) {
  transition-property: color, background-color, border-color, box-shadow, opacity, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: ease;
}
:where(button, [role="button"], .btn, .btn-primary, .btn-secondary):not(:disabled):active { transform: scale(.98); }
:where(input, select, textarea):focus-visible { outline-offset: 1px; }
html { scroll-behavior: smooth; }

/* 4. Pop-ups: overlays fade, panels slide / pop in.
      React modals (Tailwind "fixed inset-0" overlays) and our own drawers. */
.fixed.inset-0 { animation: crm-fade-in .18s ease-out both; }
.fixed.inset-0 > .card, .fixed.inset-0 > div > .card, .fixed.inset-0 > [role="dialog"],
.fixed.inset-0 > .bg-white, .fixed.inset-0 > div.rounded-xl, .fixed.inset-0 > div.rounded-2xl { animation: crm-pop-in .22s cubic-bezier(.2, .8, .2, 1) both; }
/* Meetings page drawer */
.drawer-backdrop:not(.is-hidden) { animation: crm-fade-in .18s ease-out both; }
.drawer-backdrop:not(.is-hidden) .drawer { animation: crm-slide-in .26s cubic-bezier(.2, .8, .2, 1) both; }
.drawer-backdrop.crm-leaving { animation: crm-fade-out .18s ease-in both; }
.drawer-backdrop.crm-leaving .drawer { animation: crm-slide-out .18s ease-in both; }
/* CPR drawer */
.cp-back { animation: crm-fade-in .18s ease-out both; }
.cp-back .cp-drawer { animation: crm-slide-in .26s cubic-bezier(.2, .8, .2, 1) both; }
.cp-back.crm-leaving { animation: crm-fade-out .18s ease-in both; }
.cp-back.crm-leaving .cp-drawer { animation: crm-slide-out .18s ease-in both; }
/* Tasks / Trials / Orders / Alerts dialogs (hand-coded pages) */
[data-tx-dialog], .trl-back, .ox-back, .al-back { animation: crm-fade-in .18s ease-out both; }
[data-tx-dialog] > *, .trl-back > *, .ox-back > *, .al-back > * { animation: crm-pop-in .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crm-fade-out { to { opacity: 0; } }
@keyframes crm-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes crm-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes crm-slide-out { to { transform: translateX(100%); } }

/* 5. Docked sidebar on Meetings / Quotations / Payroll: hold its space from
      the first paint (set early in the page head) so the page doesn't jump. */
html.crm-docked-early { padding-left: 256px; }
html.crm-docked-early body::before {
  content: ""; position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 0;
  background: #fff; border-right: 1px solid #e2e8f0;
}
html.crm-docked-early.dark body::before { background: #0f172a; border-color: #1e293b; }
@media (max-width: 1023.98px) {
  html.crm-docked-early { padding-left: 0; }
  html.crm-docked-early body::before { display: none; }
}

/* 6. Less motion when asked. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}