/**
 * Siliscia POS — Motion Language
 * Easing: cubic-bezier(0.22, 1, 0.36, 1)
 * Durations: micro 120–220ms | nav 280–400ms | feedback ≤600ms
 */

:root {
  --sil-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sil-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --sil-dur-fast: 140ms;
  --sil-dur: 220ms;
  --sil-dur-nav: 360ms;
  --sil-sky: #38BDF8;
  --sil-sky-dim: rgba(56, 189, 248, 0.35);
  --sil-ok: #34D399;
  --sil-warn: #FBBF24;
  --sil-err: #F87171;
}

/* ---------- Keyframes ---------- */
@keyframes sil-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sil-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sil-fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sil-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes sil-pop {
  0% { transform: scale(0.88); opacity: 0.6; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sil-badge-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes sil-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes sil-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--sil-sky-dim); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes sil-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes sil-pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes sil-check-draw {
  0% { stroke-dashoffset: 24; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes sil-spin {
  to { transform: rotate(360deg); }
}
@keyframes sil-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes sil-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes sil-tab-ink {
  from { transform: scaleX(0.4); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes sil-icon-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  70% { transform: translateY(1px); }
}
@keyframes sil-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes sil-success-flash {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* ---------- Page / layout ---------- */
.sil-page-enter {
  animation: sil-fade-up var(--sil-dur-nav) var(--sil-ease) both;
}
.sil-workspace-enter {
  animation: sil-fade-up 320ms var(--sil-ease) both;
}
.sil-modal-enter {
  animation: sil-fade-scale 280ms var(--sil-ease) both;
}
.sil-overlay-enter {
  animation: sil-fade-in 200ms ease both;
}

/* ---------- Micro-interactions ---------- */
button,
.btn,
.module-card,
.filter-chip,
.loc-tab,
.user-tab,
.prod-tab,
.product-tile,
.sub-item,
.tools-btn,
.icon-btn,
[role="button"] {
  transition:
    transform var(--sil-dur-fast) var(--sil-ease),
    background-color var(--sil-dur) ease,
    border-color var(--sil-dur) ease,
    box-shadow var(--sil-dur) ease,
    color var(--sil-dur) ease,
    opacity var(--sil-dur) ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

button:active,
.btn:active,
.module-card:active,
.filter-chip:active,
.product-tile:active,
.sub-item:active,
.tools-btn:active,
.icon-btn:active {
  transform: scale(0.97);
}

.module-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.18);
}
.module-card:active {
  transform: scale(0.98) translateY(0);
}

.module-card.active .mod-icon,
.module-card:hover .mod-icon {
  animation: sil-pulse-glow 1.8s ease-in-out infinite;
}

.product-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
}

.sil-pressing {
  animation: sil-press 160ms var(--sil-ease) both;
}

.icon-btn:active i,
.tools-btn:active i {
  animation: sil-icon-bounce 280ms var(--sil-ease);
}

/* Toggle / checkbox spring feel */
input[type="checkbox"],
input[type="radio"] {
  transition: transform 160ms var(--sil-ease-spring), accent-color 160ms ease;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  transform: scale(1.08);
}

/* ---------- Navigation tabs ---------- */
.loc-tab,
.user-tab,
.prod-tab,
.sub-item,
.filter-chip,
[data-tab] {
  position: relative;
}
.loc-tab.active,
.user-tab.active,
.prod-tab.active {
  color: #7DD3FC !important;
}
.loc-tab.active::after,
.user-tab.active::after,
.prod-tab.active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0EA5E9, #38BDF8);
  animation: sil-tab-ink 280ms var(--sil-ease) both;
  transform-origin: center;
}

.sub-item.active {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* ---------- Feedback ---------- */
.sil-shake {
  animation: sil-shake 420ms var(--sil-ease) both;
}
.sil-success-pulse {
  animation: sil-success-flash 560ms var(--sil-ease) both;
}
.sil-pop {
  animation: sil-pop 360ms var(--sil-ease-spring) both;
}
.sil-badge-pop {
  animation: sil-badge-pop 420ms var(--sil-ease-spring) both;
}
.sil-pulse-sky {
  animation: sil-pulse-glow 1.6s ease-in-out infinite;
}
.sil-pulse-warn {
  animation: sil-pulse-warn 1.4s ease-in-out infinite;
}
.sil-pulse-danger {
  animation: sil-pulse-danger 1.2s ease-in-out infinite;
}

/* Toast */
.sil-toast-host {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  width: min(92vw, 360px);
}
.sil-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #F1F5F9;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  animation: sil-fade-up 280ms var(--sil-ease) both;
  font-size: 0.875rem;
  font-weight: 500;
}
.sil-toast.ok { border-color: rgba(52, 211, 153, 0.45); }
.sil-toast.err { border-color: rgba(248, 113, 113, 0.5); }
.sil-toast.warn { border-color: rgba(251, 191, 36, 0.5); }
.sil-toast.out {
  animation: sil-fade-in 200ms ease reverse both;
  opacity: 0;
}

/* ---------- Lists / catalog stagger ---------- */
.sil-stagger > * {
  /* no opacity:0 fill — cards must stay visible even if animation is interrupted */
  animation: sil-fade-up 340ms var(--sil-ease);
  opacity: 1 !important;
}
.sil-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.sil-stagger > *:nth-child(2) { animation-delay: 0.05s; }
.sil-stagger > *:nth-child(3) { animation-delay: 0.08s; }
.sil-stagger > *:nth-child(4) { animation-delay: 0.11s; }
.sil-stagger > *:nth-child(5) { animation-delay: 0.14s; }
.sil-stagger > *:nth-child(6) { animation-delay: 0.17s; }
.sil-stagger > *:nth-child(7) { animation-delay: 0.2s; }
.sil-stagger > *:nth-child(8) { animation-delay: 0.23s; }
.sil-stagger > *:nth-child(n + 9) { animation-delay: 0.26s; }

/* Also support existing hub-stagger class */
.hub-stagger > * {
  animation: sil-fade-up 340ms var(--sil-ease);
  opacity: 1 !important;
}

/* Cart badge / tools flags */
#cart-count,
.cart-badge,
[data-badge],
.tools-flag-badge {
  transform-origin: center;
  transition: transform 160ms var(--sil-ease-spring);
}

/* Empty state float */
.sil-empty-float {
  animation: sil-float 3.2s ease-in-out infinite;
}

/* ---------- Loading ---------- */
.sil-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2.5px solid rgba(148, 163, 184, 0.25);
  border-top-color: var(--sil-sky);
  border-radius: 50%;
  animation: sil-spin 0.7s linear infinite;
}
.sil-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.sil-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(4px);
  animation: sil-fade-in 160ms ease both;
}

/* Button loading state */
.btn.is-loading,
button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after,
button.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sil-spin 0.65s linear infinite;
}

/* Top progress bar (cloud sync) */
.sil-top-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10001;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.sil-top-progress > span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--sil-sky), transparent);
  animation: sil-progress 1s ease-in-out infinite;
}

/* Skeleton */
.sil-skeleton {
  background: linear-gradient(
    90deg,
    rgba(51, 65, 85, 0.45) 25%,
    rgba(100, 116, 139, 0.55) 50%,
    rgba(51, 65, 85, 0.45) 75%
  );
  background-size: 200% 100%;
  animation: sil-shimmer 1.4s ease-in-out infinite;
  border-radius: 0.5rem;
}
.sil-skeleton-row {
  height: 2.75rem;
  margin-bottom: 0.5rem;
}
.sil-skeleton-card {
  height: 6.5rem;
  margin-bottom: 0.75rem;
}
.sil-skeleton-text {
  height: 0.75rem;
  margin-bottom: 0.4rem;
}

/* Dialog / modal cards from UI.js */
.ui-dialog-overlay {
  animation: sil-fade-in 180ms ease both;
}
.ui-dialog-card {
  animation: sil-fade-scale 260ms var(--sil-ease) both;
}

/* Modal shells */
.modal-shell,
.modal-shell-lg,
.modal-shell-sm {
  animation: sil-fade-scale 280ms var(--sil-ease) both;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .module-card:hover,
  .product-tile:hover {
    transform: none;
  }
  .sil-empty-float,
  .sil-pulse-sky,
  .sil-pulse-warn,
  .sil-pulse-danger,
  .module-card.active .mod-icon {
    animation: none !important;
  }
}