/* =============================================================
   Motion — page transitions, enter fades, hover/focus polish
   UI-only; does not alter layout structure or behavior.
   ============================================================= */

/* ---------- Page enter (pairs with page-loader) ---------- */
html:not(.is-page-loading) .content:not(.flush) > .container {
  animation: fadeIn .4s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

html:not(.is-page-loading) .content:not(.flush) .page-head {
  animation: fadeInUp .5s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

html:not(.is-page-loading) .content:not(.flush) .grid > *:not(.row-act) {
  animation: fadeIn .45s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(1) { animation-delay: .03s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(2) { animation-delay: .08s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(3) { animation-delay: .13s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(4) { animation-delay: .18s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(5) { animation-delay: .22s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(6) { animation-delay: .26s; }
html:not(.is-page-loading) .content:not(.flush) .grid > *:nth-child(n+7) { animation-delay: .3s; }

html:not(.is-page-loading) .content.flush > *:not(.modal-overlay) {
  animation: fadeIn .4s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

/* Modals must always sit above the shell (sidebar z=40, header z=50) */
.modal-overlay {
  z-index: var(--z-modal);
}

/* ---------- Shell: sidebar & header ---------- */
.sidebar {
  transition: width var(--t), box-shadow var(--t);
}

.nav-item {
  transition:
    background var(--t),
    color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast),
    padding var(--t-fast);
}

.nav-item:hover {
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  transform: translateX(calc(3px * var(--dir, 1)));
}

@media (max-width: 920px) {
  .nav-item:hover {
    transform: none;
  }
}

.nav-item:hover svg {
  color: #FFFFFF;
  transform: scale(1.06);
  transition: color var(--t-fast), transform var(--t-fast);
}

.nav-item svg {
  transition: color var(--t-fast), transform var(--t-fast);
}

.nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(46, 91, 255, .55);
}

.nav-item.active {
  transition: background var(--t), box-shadow var(--t);
}

.side-collapse {
  transition: background var(--t), color var(--t), transform var(--t-fast);
}

.side-collapse:hover {
  transform: scale(1.06);
}

.side-logout {
  transition: background var(--t), color var(--t), transform var(--t-fast);
}

.side-logout:hover {
  transform: translateX(calc(2px * var(--dir, 1)));
}

.header {
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

.profile-chip {
  transition: background var(--t), transform var(--t-fast), box-shadow var(--t-fast);
}

.profile-chip:hover {
  transform: translateY(-1px);
}

.profile-chip:focus-visible {
  box-shadow: var(--sh-focus);
}

.header-search-item {
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.header-search-item:hover {
  transform: translateX(calc(2px * var(--dir, 1)));
}

.notif-row {
  transition: background var(--t-fast), transform var(--t-fast);
}

.notif-row:hover {
  transform: translateX(calc(2px * var(--dir, 1)));
}

.notif-panel {
  animation: softScaleIn .28s var(--ease-spring, cubic-bezier(.34, 1.3, .64, 1)) both;
}

.menu {
  animation: fadeIn .18s ease both;
}

/* ---------- Buttons ---------- */
.btn {
  transition:
    transform var(--t-fast),
    box-shadow var(--t),
    background var(--t),
    border-color var(--t),
    color var(--t),
    filter var(--t-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn-gold:hover {
  box-shadow: var(--sh-gold);
  filter: brightness(1.04);
}

.btn-espresso:hover {
  box-shadow: var(--sh-md);
  filter: brightness(1.06);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-tint);
  box-shadow: var(--sh-xs);
}

.btn-soft:hover {
  background: var(--gold-tint-2);
  box-shadow: var(--sh-xs);
}

.btn-danger:hover {
  background: var(--red-tint);
  border-color: var(--red);
  box-shadow: 0 4px 14px rgba(220, 38, 38, .12);
}

.btn:focus-visible {
  box-shadow: var(--sh-focus);
}

.icon-btn {
  transition:
    background var(--t),
    color var(--t),
    border-color var(--t),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}

.icon-btn:hover {
  background: var(--gold-tint);
  color: var(--gold-deep);
  transform: scale(1.07);
}

.icon-btn:active {
  transform: scale(.96);
}

.icon-btn:focus-visible {
  box-shadow: var(--sh-focus);
  border-color: var(--gold);
}

/* ---------- Cards & stats ---------- */
.card {
  transition:
    box-shadow var(--t),
    border-color var(--t),
    transform var(--t);
}

.card-hover:hover {
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  transform: translateY(-3px);
}

.stat {
  transition:
    box-shadow var(--t),
    border-color var(--t),
    transform var(--t);
}

.stat:hover {
  box-shadow: var(--sh-md);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.stat .si {
  transition: transform var(--t), background var(--t);
}

.stat:hover .si {
  transform: scale(1.08);
}

/* ---------- Forms ---------- */
.input,
.select,
.textarea,
.search input {
  transition:
    border-color var(--t),
    box-shadow var(--t),
    background var(--t),
    transform var(--t-fast);
}

.input:hover,
.select:hover,
.textarea:hover,
.search input:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
}

.input:focus,
.select:focus,
.textarea:focus,
.search input:focus {
  border-color: var(--gold);
  box-shadow: var(--sh-focus);
  outline: none;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.search input:focus-visible {
  animation: focusRing .28s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.choice {
  transition:
    border-color var(--t),
    background var(--t),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}

.choice:hover {
  border-color: var(--gold);
  background: var(--gold-tint);
  transform: translateY(-1px);
  box-shadow: var(--sh-xs);
}

.switch .track,
.switch .track::before {
  transition: background var(--t), transform var(--ease-spring, cubic-bezier(.34, 1.3, .64, 1)) .32s;
}

.contact-opt {
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.contact-opt:hover {
  background: var(--gold-tint);
  transform: translateX(calc(2px * var(--dir, 1)));
}

/* ---------- Tabs, pills, segments ---------- */
.tabs button {
  transition: color var(--t), transform var(--t-fast);
}

.tabs button:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.tabs button::after {
  transition: transform var(--t) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

.pills button {
  transition:
    color var(--t),
    background var(--t),
    border-color var(--t),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}

.pills button:hover {
  color: var(--text);
  border-color: var(--line);
  transform: translateY(-1px);
}

.pills button.active {
  box-shadow: var(--sh-xs);
}

.segment button {
  transition:
    color var(--t),
    background var(--t),
    box-shadow var(--t),
    transform var(--t-fast);
}

.segment button:hover:not(.active) {
  color: var(--text);
  transform: translateY(-1px);
}

.segment button.active {
  transition: background var(--t), box-shadow var(--t), transform var(--t-fast);
}

/* ---------- Tables ---------- */
table.tbl tbody tr {
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

table.tbl tbody tr:hover {
  background: var(--gold-tint);
  box-shadow: inset -3px 0 0 var(--gold);
}

[dir="ltr"] table.tbl tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--gold);
}

.row-act-btn {
  transition: background var(--t), color var(--t), transform var(--t-fast);
}

.row-act-btn:hover {
  background: var(--bg-2);
  color: var(--text);
  transform: scale(1.08);
}

.menu-item {
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.menu-item:hover {
  background: var(--gold-tint);
  transform: translateX(calc(3px * var(--dir, 1)));
}

/* ---------- Modals & toasts ---------- */
.modal-overlay {
  animation: fadeIn .28s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.modal {
  animation: fadeInUp .4s var(--ease-spring, cubic-bezier(.34, 1.3, .64, 1)) both;
}

.modal-head .x {
  transition: background var(--t), color var(--t), transform var(--t-fast);
}

.modal-head .x:hover {
  background: var(--bg-2);
  color: var(--text);
  transform: rotate(90deg) scale(1.05);
}

.toast {
  animation: slideInEnd .4s var(--ease-spring, cubic-bezier(.34, 1.3, .64, 1)) both;
}

/* ---------- Empty / misc ---------- */
.empty .ec {
  transition: transform var(--t), box-shadow var(--t);
}

.empty:hover .ec {
  transform: scale(1.06);
}

.bar > span {
  transition: width var(--t-slow) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* ---------- Page-specific interactive polish ---------- */
.conv-item {
  transition: background var(--t), transform var(--t-fast), box-shadow var(--t-fast);
}

.conv-item:hover {
  background: var(--bg-2);
  transform: translateX(calc(2px * var(--dir, 1)));
}

.ns-btn,
.cl-filters button,
.pager-btn,
button.pager-num,
.transfer-btn,
.cmp-attach-btn {
  transition:
    background var(--t),
    border-color var(--t),
    color var(--t),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}

.ns-btn:hover,
.cl-filters button:hover,
.pager-btn:hover:not(:disabled),
button.pager-num:hover,
.transfer-btn:hover,
.cmp-attach-btn:hover {
  transform: translateY(-1px);
}

.bubble {
  animation: fadeInUp .32s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-page-loading) .content > .container,
  html:not(.is-page-loading) .content.flush > *:not(.modal-overlay),
  html:not(.is-page-loading) .content .page-head,
  html:not(.is-page-loading) .content .grid > *,
  .bubble,
  .modal,
  .modal-overlay,
  .toast,
  .menu,
  .notif-panel {
    animation: none !important;
  }

  .nav-item:hover,
  .btn:hover,
  .icon-btn:hover,
  .card-hover:hover,
  .stat:hover,
  .conv-item:hover,
  .menu-item:hover,
  .choice:hover,
  .profile-chip:hover {
    transform: none;
  }
}