/* B-Motion-1A/B — Performance-safe UI motion guardrails
   Scope:
   - Guardrails first: no table-row transforms and reduced-motion support.
   - Safe polish only: KPI/interactive card lift, button lift, modal enter, toast enter.
   - No page transitions, no row entrance animations, no continuous motion. */

:root {
  --cx-motion-duration-fast: 120ms;
  --cx-motion-duration-base: 160ms;
  --cx-motion-duration-modal: 180ms;
  --cx-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --cx-motion-lift-card: -2px;
  --cx-motion-lift-control: -1px;
}

/* Guardrail: data-heavy tables may grow with companies/branches; keep rows layout-stable. */
.cx-table tbody tr,
.cx-table tbody tr:hover,
.cx-table tbody tr.is-selected,
.cx-table tbody tr[aria-selected="true"] {
  transform: none !important;
}

.cx-table tbody tr {
  transition:
    background var(--cx-transition),
    background-color var(--cx-transition),
    color var(--cx-transition),
    box-shadow var(--cx-transition) !important;
}

.cx-table-actions {
  transition:
    opacity var(--cx-transition),
    color var(--cx-transition),
    background var(--cx-transition),
    border-color var(--cx-transition) !important;
}

.cx-table tr:hover .cx-table-actions,
.cx-table tr.is-selected .cx-table-actions,
.cx-table tr[aria-selected="true"] .cx-table-actions {
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Safe cards: KPI + explicitly interactive cards only. Generic heavy sections stay static. */
  .cx-kpi,
  .cx-dashboard-kpis .cx-kpi,
  .cost-control-kpis .cx-kpi,
  .cx-card[data-interactive="true"],
  .cx-card[data-clickable="true"],
  .cx-semantic-card[data-interactive="true"],
  .cx-semantic-card[data-clickable="true"],
  [data-smart-detail].cx-kpi,
  [data-smart-detail].cx-card,
  [data-smart-detail].cx-semantic-card {
    transition:
      transform var(--cx-motion-duration-base) var(--cx-motion-ease),
      box-shadow var(--cx-motion-duration-base) var(--cx-motion-ease),
      border-color var(--cx-motion-duration-base) var(--cx-motion-ease),
      background var(--cx-motion-duration-base) var(--cx-motion-ease);
  }

  .cx-kpi:hover,
  .cx-dashboard-kpis .cx-kpi:hover,
  .cost-control-kpis .cx-kpi:hover,
  .cx-card[data-interactive="true"]:hover,
  .cx-card[data-clickable="true"]:hover,
  .cx-semantic-card[data-interactive="true"]:hover,
  .cx-semantic-card[data-clickable="true"]:hover,
  [data-smart-detail].cx-kpi:hover,
  [data-smart-detail].cx-card:hover,
  [data-smart-detail].cx-semantic-card:hover {
    transform: translate3d(0, var(--cx-motion-lift-card), 0);
    box-shadow: var(--cx-shadow-card);
  }

  .cx-kpi:active,
  .cx-card[data-interactive="true"]:active,
  .cx-card[data-clickable="true"]:active,
  .cx-semantic-card[data-interactive="true"]:active,
  .cx-semantic-card[data-clickable="true"]:active,
  [data-smart-detail].cx-kpi:active,
  [data-smart-detail].cx-card:active,
  [data-smart-detail].cx-semantic-card:active {
    transform: translate3d(0, var(--cx-motion-lift-control), 0);
  }

  /* Buttons/controls: single element composited lift, never layout dimensions. */
  .cx-btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-loading) {
    transition:
      transform var(--cx-motion-duration-fast) var(--cx-motion-ease),
      box-shadow var(--cx-motion-duration-fast) var(--cx-motion-ease),
      border-color var(--cx-motion-duration-fast) var(--cx-motion-ease),
      background var(--cx-motion-duration-fast) var(--cx-motion-ease),
      color var(--cx-motion-duration-fast) var(--cx-motion-ease);
  }

  .cx-btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-loading):hover {
    transform: translate3d(0, var(--cx-motion-lift-control), 0);
  }

  .cx-btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-loading):active {
    transform: translate3d(0, 0, 0);
  }

  /* Modal/toast: one-time entry only. No continuous animation and no detail-table row motion. */
  .cx-modal-backdrop:not([hidden]) {
    animation: cx-motion-backdrop-in var(--cx-motion-duration-base) var(--cx-motion-ease) both;
  }

  .cx-modal-backdrop:not([hidden]) > .cx-modal:not(.cx-modal-detail):not(.cx-smart-detail-modal) {
    animation: cx-motion-modal-in var(--cx-motion-duration-modal) var(--cx-motion-ease) both;
    transform-origin: center top;
  }

  .cx-toast {
    animation: cx-motion-toast-in var(--cx-motion-duration-base) var(--cx-motion-ease) both;
  }

  .cx-toast[data-motion="exiting"] {
    animation: cx-motion-toast-out var(--cx-motion-duration-fast) ease-in both;
  }
}

.cx-btn:focus-visible,
.cx-kpi:focus-visible,
.cx-card[data-interactive="true"]:focus-visible,
.cx-card[data-clickable="true"]:focus-visible,
.cx-semantic-card[data-interactive="true"]:focus-visible,
.cx-semantic-card[data-clickable="true"]:focus-visible {
  outline: 3px solid var(--cx-focus);
  outline-offset: 3px;
}

@keyframes cx-motion-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cx-motion-modal-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cx-motion-toast-in {
  from { opacity: 0; transform: translate3d(10px, -4px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cx-motion-toast-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(10px, -4px, 0) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .cx-kpi,
  .cx-card,
  .cx-semantic-card,
  .cx-btn,
  .cx-toast,
  .cx-modal,
  .cx-table tbody tr,
  .cx-table-actions {
    transform: none !important;
  }
}

/* B-Motion-1C: skeleton is allowed only while loading and must stop under reduced-motion. */
.cx-loading-state {
  contain: layout paint;
}

@media (prefers-reduced-motion: reduce) {
  .cx-skeleton {
    animation: none !important;
    background-position: 0 0 !important;
  }
}