/* Small additions on top of zoe's compiled Tailwind/icomoon design system.
   Everything visual stays in zoe's vocabulary; this only covers behaviour
   the original handled in React (mobile drawer, toasts, drag rows). */

@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast { animation: toastIn .18s ease-out; }
.toast.hide { opacity: 0; transform: translateY(-8px); transition: all .25s ease; }

/* Mobile sidebar drawer (zoe used a headless-ui dialog; this is the CSS twin). */
@media (max-width: 1023px) {
    .sidebar.sidebar-open { transform: translateX(0); }
}
[data-sidebar-backdrop].show { opacity: 1; pointer-events: auto; }

/* Drag-to-reorder rows. */
.drag-row { cursor: grab; }
.drag-row.dragging { opacity: .4; }
.drag-row.drop-target { box-shadow: inset 0 2px 0 0 #10b981; }