/*
 * ElementsERP UI — micro-interactions.
 * Every press, selection and state change answers with a small, quick movement.
 * Rules: 120–240 ms, transform/opacity only, no bounce longer than one overshoot,
 * nothing loops except loaders, and all of it collapses under prefers-reduced-motion.
 */
:root {
    --eu-dur-fast: 120ms;
    --eu-dur-base: 180ms;
    --eu-dur-slow: 240ms;
    --eu-ease-out: cubic-bezier(.2, 0, 0, 1);
    --eu-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Press feedback ──────────────────────────────────── */
.eu-btn, .mdt-btn, .mdt-action-btn, .mdt-page-btn, .mdt-filter-pill, .eu-menu-item, .eu-segmented button,
.eu-tab, .eu-nav-link, .eu-module, .eu-tag-remove, .eu-user, .eu-sidebar-tenant, .eu-media-add, .eu-dropzone, .mdt-fp-reset, .eu-link-btn {
    transition: transform var(--eu-dur-fast) var(--eu-ease-out), background-color var(--eu-dur-fast) var(--eu-ease-out),
        color var(--eu-dur-fast) var(--eu-ease-out), border-color var(--eu-dur-fast) var(--eu-ease-out), box-shadow var(--eu-dur-base) var(--eu-ease-out);
}
.eu-btn:active:not(:disabled), .mdt-btn:active, .mdt-action-btn:active, .mdt-page-btn:active:not(:disabled), .mdt-filter-pill:active,
.eu-segmented button:active, .eu-user:active, .eu-sidebar-tenant:active, .eu-tag-remove:active { transform: scale(.95); }
.eu-menu-item:active, .eu-nav-link:active, .eu-tab:active { transform: scale(.97); }
.eu-module:active, .eu-dropzone:active, .eu-media-add:active { transform: scale(.98); }
.eu-btn-primary:hover, .mdt-btn-primary:hover { box-shadow: 0 4px 12px -4px rgba(2, 48, 70, .45); }

/* ── Icons answer the pointer ────────────────────────── */
.bx { transition: transform var(--eu-dur-base) var(--eu-ease-spring); }
:is(.eu-btn, .mdt-btn, .eu-menu-item, .mdt-filter-pill):hover .bx-plus { transform: rotate(90deg); }
:is(.eu-btn, .mdt-btn, .eu-menu-item, .eu-link, a):hover :is(.bx-right-arrow-alt, .bx-link-external, .bx-chevron-right) { transform: translateX(3px); }
:is(.eu-btn, .mdt-btn, .eu-menu-item):hover .bx-chevron-left { transform: translateX(-3px); }
:is(.eu-btn, .mdt-btn, .mdt-action-btn, .eu-tag-remove, .mdt-fp-clear):hover .bx-x { transform: rotate(90deg); }
:is(.eu-btn, .mdt-btn, .mdt-action-btn, .eu-menu-item):hover .bx-trash { animation: eu-wiggle 360ms ease; }
:is(.eu-btn, .mdt-btn, .eu-menu-item):hover :is(.bx-revision, .bx-reset) { transform: rotate(-140deg); }
:is(.eu-btn, .mdt-btn, .eu-menu-item, .eu-dropzone):hover :is(.bx-upload, .bx-export, .bx-cloud-upload, .bx-send) { transform: translateY(-2px); }
:is(.eu-btn, .mdt-btn, .eu-menu-item):hover .bx-download { transform: translateY(2px); }
:is(.eu-btn, .mdt-btn, .eu-menu-item, .eu-balance):hover .bx-bot { animation: eu-bob 600ms ease; }
:is(.eu-btn, .mdt-btn, .mdt-action-btn, .eu-menu-item):hover :is(.bx-edit-alt, .bx-edit, .bx-pencil) { transform: rotate(-12deg); }
:is(.eu-btn, .mdt-btn, .mdt-action-btn, .eu-menu-item):hover :is(.bx-show, .bx-search) { transform: scale(1.15); }
:is(.eu-btn, .mdt-btn, .eu-menu-item):hover :is(.bx-printer, .bx-barcode, .bx-save, .bx-check, .bx-copy, .bx-truck, .bx-receipt, .bx-wallet) { transform: scale(1.12); }
:is(.eu-btn, .mdt-btn):hover .bx-slider-alt { transform: rotate(90deg); }
.eu-nav-link:hover > .eu-nav-icon, .eu-nav-link:hover > .eu-nav-sub-icon { transform: translateX(2px); }
.eu-tab:hover .bx { transform: translateY(-1px); }
[aria-expanded="true"] > .bx-chevron-down, [aria-expanded="true"] .mdt-fp-head + .bx-chevron-down { transform: rotate(180deg); }
.eu-bell:hover .bx-bell, .eu-bell.is-ringing .bx-bell { animation: eu-ring 900ms ease; transform-origin: 50% 10%; }
.is-spinning .bx, .bx.is-spinning { animation: eu-spin 700ms linear infinite; }
.eu-theme-turn .bx { animation: eu-spin-once 420ms var(--eu-ease-out); }

/* ── Choice controls ─────────────────────────────────── */
.eu-check input, .eu-toggle input { transition: background-color var(--eu-dur-fast), border-color var(--eu-dur-fast), box-shadow var(--eu-dur-base), transform var(--eu-dur-fast) var(--eu-ease-out); }
.eu-check input:active { transform: scale(.85); }
.eu-check input:hover:not(:disabled) { box-shadow: 0 0 0 4px var(--eu-color-primary-bg); }
.eu-check input[type="checkbox"]:checked::after { animation: eu-check-in 220ms var(--eu-ease-spring); }
.eu-check input:indeterminate::after, .eu-check input[type="radio"]:checked::after { animation: eu-pop 200ms var(--eu-ease-spring); }
.eu-toggle input::after { transition: transform 240ms var(--eu-ease-spring), width var(--eu-dur-fast) var(--eu-ease-out); }
.eu-toggle input:active::after { width: 18px; }
.eu-toggle input:checked:active::after { transform: translateX(8px); }
.eu-segmented button[aria-pressed="true"] { animation: eu-pop-soft 200ms var(--eu-ease-spring); }

/* ── Tabs, pills, chips ──────────────────────────────── */
.eu-tab.is-entering[aria-selected="true"]::after { animation: eu-tab-in 240ms var(--eu-ease-out); }
.eu-tab .eu-tab-count { transition: background-color var(--eu-dur-fast), color var(--eu-dur-fast); }
.eu-tab[aria-selected="true"] .eu-tab-count { background: var(--eu-color-primary); color: var(--eu-color-on-primary); }
.mdt-filter-pill.is-fresh .mdt-fp-chip, .mdt-filter-pill.is-fresh > .bx { animation: eu-pop 260ms var(--eu-ease-spring); }
.mdt-filter-pill.is-active > .bx { color: var(--eu-color-primary-text); }
.eu-badge.is-changed { animation: eu-pop 320ms var(--eu-ease-spring); }

/* ── Rows ────────────────────────────────────────────── */
.mdt-table td { transition: background-color var(--eu-dur-base) var(--eu-ease-out); }
.mdt-actions { transform: translateX(6px); transition: opacity var(--eu-dur-fast), transform var(--eu-dur-base) var(--eu-ease-out); }
.mdt-table tbody tr:hover .mdt-actions, .mdt-table tbody tr:focus-within .mdt-actions, .mdt-table tbody tr.mdt-row-selected .mdt-actions { transform: none; }
@media (hover: none) { .mdt-actions { transform: none; } }
.mdt-table tbody tr.is-removing td { animation: eu-row-out 220ms var(--eu-ease-out) forwards; }
.mdt-table tbody tr.eu-flash td, .eu-flash { animation: eu-flash 1400ms ease-out; }
.mdt-bulk-bar:not([hidden]) { animation: eu-slide-down 200ms var(--eu-ease-out); }
.mdt-skel { background: linear-gradient(90deg, var(--eu-color-bg-muted) 0%, var(--eu-color-bg-subtle) 50%, var(--eu-color-bg-muted) 100%); background-size: 200% 100%; animation: eu-shimmer 1.1s linear infinite; }
.mdt-table th[data-sort] .sort-icon { transition: opacity var(--eu-dur-fast), transform var(--eu-dur-base) var(--eu-ease-spring); }
.mdt-table th.is-sorted[aria-sort="ascending"] .sort-icon { transform: translateY(-1px); }

/* ── Popovers, overlays, toasts ──────────────────────── */
.eu-popover { animation: eu-pop-in 150ms var(--eu-ease-out); transform-origin: top center; }
.eu-overlay.is-leaving { animation: eu-fade-out 160ms var(--eu-ease-out) forwards; }
.eu-overlay.is-leaving > .eu-modal { animation: eu-sink 160ms var(--eu-ease-out) forwards; }
.eu-overlay.is-leaving > .eu-drawer { animation: eu-slide-out 180ms var(--eu-ease-out) forwards; }
.eu-overlay > .eu-modal { animation: eu-rise-spring 240ms var(--eu-ease-spring); }
.eu-modal-icon { flex: none; width: 36px; height: 36px; border-radius: var(--eu-radius-md); display: grid; place-items: center; background: var(--eu-color-primary-bg); color: var(--eu-color-primary-text); font-size: 18px; animation: eu-pop 280ms 60ms var(--eu-ease-spring) both; }
.eu-modal-icon.is-ai { background: var(--eu-color-info-bg); color: var(--eu-color-info); }
.eu-confirm-icon { animation: eu-pop 300ms 60ms var(--eu-ease-spring) both; }
.eu-toast { position: relative; overflow: hidden; animation: eu-toast-in-x 260ms var(--eu-ease-spring); }
.eu-toast.is-leaving { animation: eu-toast-out 180ms var(--eu-ease-out) forwards; }
.eu-toast > .bx { animation: eu-pop 300ms 80ms var(--eu-ease-spring) both; }
.eu-toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--eu-color-primary); opacity: .35; transform-origin: left; animation: eu-timer linear forwards; }
.eu-toast.is-success .eu-toast-timer { background: var(--eu-color-success); }
.eu-toast.is-warning .eu-toast-timer { background: var(--eu-color-warning); }
.eu-toast:hover .eu-toast-timer { animation-play-state: paused; }
.eu-savebar:not([hidden]) { animation: eu-slide-up 220ms var(--eu-ease-out); }
.eu-nav-item.is-open > .eu-nav-sub { animation: eu-sub-in 200ms var(--eu-ease-out); }

/* ── Cards, modules, element tiles ───────────────────── */
.eu-el { transition: transform 260ms var(--eu-ease-spring), background-color var(--eu-dur-base), border-color var(--eu-dur-base), color var(--eu-dur-base); }
.eu-module:hover .eu-el { transform: rotate(-6deg) scale(1.05); }
.eu-module .eu-module-text b { transition: color var(--eu-dur-fast); }
.eu-module:hover .eu-module-text b { color: var(--eu-color-primary-text); }
.eu-stagger > * { animation: eu-rise-in 320ms var(--eu-ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.eu-card-header > .bx { flex: none; font-size: 18px; color: var(--eu-color-icon); }
.eu-card:hover .eu-card-header > .bx { color: var(--eu-color-primary-text); transform: scale(1.08); }
.eu-empty-icon { animation: eu-pop 360ms var(--eu-ease-spring) both; }
.eu-flow-step.is-just-done .eu-el, .eu-flow-step.is-just-done .bx-check { animation: eu-pop 360ms var(--eu-ease-spring) both; }
.eu-flow-step.is-just-done .bx-check { animation-delay: 120ms; }
.eu-timeline li.is-new { animation: eu-rise-in 280ms var(--eu-ease-out) both; }
.eu-copied .bx { color: var(--eu-color-success); animation: eu-pop 260ms var(--eu-ease-spring); }
.eu-ai-busy .bx-bot { animation: eu-bob 700ms ease infinite; }

/* ── Keyframes ───────────────────────────────────────── */
@keyframes eu-pop { from { transform: scale(.5); opacity: 0; } }
@keyframes eu-pop-soft { from { transform: scale(.9); } }
@keyframes eu-check-in { from { transform: translateY(-1px) rotate(-45deg) scale(.2); opacity: 0; } }
@keyframes eu-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes eu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes eu-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes eu-spin-once { from { transform: rotate(-180deg) scale(.6); } }
@keyframes eu-tab-in { from { transform: scaleX(.2); opacity: .3; } }
@keyframes eu-row-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes eu-flash { 0%, 35% { background-color: var(--eu-color-success-bg); } }
@keyframes eu-slide-down { from { opacity: 0; transform: translateY(-6px); } }
@keyframes eu-slide-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes eu-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes eu-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes eu-fade-out { to { opacity: 0; } }
@keyframes eu-sink { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes eu-slide-out { to { opacity: 0; transform: translateX(32px); } }
@keyframes eu-rise-spring { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes eu-toast-in-x { from { opacity: 0; transform: translateX(24px); } }
@keyframes eu-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes eu-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes eu-sub-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes eu-rise-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Reduced motion: keep the feedback, drop the movement ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
    .eu-bond > * { animation: none !important; }
}

/* Gallery + form feedback: shake on invalid submit, rise-in for new rows */
.is-shake { animation: eu-shake 360ms var(--eu-ease); }
.eu-kv-row.is-new, .eu-savebar.is-new, .eu-motion-box.is-new { animation: eu-rise-in 280ms var(--eu-ease-out, ease) both; }
.eu-motion-box.is-changed { animation: eu-pop 320ms var(--eu-ease-spring); }
@keyframes eu-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .is-shake, .eu-bar > span { animation: none; } }