/* Motion and feedback. Short, purposeful, and switched off for anyone who asks for less motion.
   Loaded after components.css. Behavior lives in /js/app.js. */

:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms;
  --t: 220ms;
}

/* ---------- Everything interactive answers the pointer ---------- */
.btn, .side-link, .input, .tabs a, .pager-pages a, .seg span, .qty button, .check input, .chip {
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:hover:not(:disabled) { box-shadow: 0 2px 8px -4px rgba(35, 26, 28, .35); }
.data-table tbody tr td { transition: background-color var(--t-fast) var(--ease); }
.pager-pages a:hover { border-color: var(--deep); }
.tabs a:hover { color: var(--deep); }

/* ---------- Busy button: the action was received ---------- */
.btn.is-busy { pointer-events: none; opacity: .85; position: relative; color: transparent !important; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 16px; block-size: 16px;
  border-radius: 50%; border: 2px solid var(--line-2); border-block-start-color: var(--deep);
  animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after { border-color: rgba(255, 255, 255, .35); border-block-start-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Page progress bar ---------- */
.progress-bar { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: 50; pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); }
.progress-bar::before { content: ""; display: block; block-size: 100%; inline-size: 40%; background: var(--metal); border-radius: 0 0 3px 3px; }
.progress-bar.is-active { opacity: 1; }
.progress-bar.is-active::before { animation: progress 1.1s var(--ease) infinite; }
@keyframes progress { from { transform: translateX(60%); } to { transform: translateX(-260%); } }

/* ---------- Page content settles in once ---------- */
.content > * { animation: rise var(--t) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Toasts ---------- */
.toast { animation: toast-in var(--t) var(--ease) both; }
.toast.is-leaving { animation: toast-out var(--t) var(--ease) both; }
.toast-close { margin-inline-start: 6px; text-decoration: none !important; font-size: 18px; line-height: 1; opacity: .8; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Dialog ---------- */
.dialog[open] { animation: dialog-in var(--t) var(--ease) both; }
.dialog[open]::backdrop { animation: fade-in var(--t) var(--ease) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Menu groups open smoothly ---------- */
.side-summary::after { transition: transform var(--t) var(--ease), margin var(--t) var(--ease); }
.side-group-box[open] > .side-children { animation: unfold var(--t) var(--ease) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Rows added or about to go ---------- */
.row-enter { animation: fade-in 320ms var(--ease) both; }
.row-enter td { background: var(--metal-soft) !important; transition: background-color 1.2s var(--ease) .2s; }
.row-leave { opacity: 0; transition: opacity var(--t) var(--ease); }

/* ---------- Waiting for data ---------- */
.skeleton { display: block; block-size: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--sunk) 25%, #efe8e3 37%, var(--sunk) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.skeleton-row { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 16px; padding: 14px 20px; border-block-end: 1px solid #f0eae6; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Focus eases in ---------- */
:focus-visible { transition: outline-offset var(--t-fast) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn.is-busy::after { border-block-start-color: var(--deep); }
}