/* ==========================================================
   Motion & Micro-Interaction Layer
   ----------------------------------------------------------
   Loaded LAST (after app.css, validation.css and
   ui-ux-enhancements.css) so every rule here wins the
   cascade cleanly without needing to touch the existing
   files' selectors. Pure CSS only — no markup/JS required.
   Inherits the global `prefers-reduced-motion` guard already
   defined in ui-ux-enhancements.css (a `*` selector), so all
   animations/transitions added below are automatically
   disabled for users who ask for reduced motion.
   ========================================================== */

/* ---------- 1. Page entrance ----------
   Blazor Server tears down/recreates the routed component on
   navigation, so this replays on every page change for free.

   Deliberately NOT animated on `.page-content` itself, and
   `.modal-backdrop` is explicitly excluded below — every page
   renders its modal as a direct child of `.page-content`
   (`@if (_showModal) { <div class="modal-backdrop"> ... }` sits
   right next to the page's `.card`), and giving an ANCESTOR of
   a `position:fixed` element any `transform` OR any `opacity`
   below 1 hijacks that fixed element's containing block /
   stacking context away from the viewport for as long as the
   animation is active:
     - `transform` (even a "finished" translateY(0) left by
       animation-fill-mode:both) makes `position:fixed`
       resolve against that ancestor's box instead of the
       viewport — tall modals rendered with their header
       pushed off-screen.
     - `opacity < 1` (true for the whole animation, not just
       the end) makes that ancestor establish a new stacking
       context, so the modal's own z-index stops being compared
       against the rest of the page and it can render BEHIND
       sibling chrome like the sticky top bar.
   Animating `.page-content`'s other children instead (anything
   that isn't the modal, or doesn't wrap one) gets the same
   visual entrance with neither ancestor ever touching
   `.modal-backdrop`. Excluding by `:has()` rather than just
   `:not(.modal-backdrop)` matters: ResourceManagement's Resource
   modal wraps its `.modal-backdrop` inside an extra
   `<div class="modal"><EditForm>...` — that outer `.modal` div
   IS a direct child of `.page-content` and does NOT match
   `.modal-backdrop` by name, so it still got animated and broke
   the same way. `:has(.modal-backdrop)` catches that wrapper
   (and any future one) without needing to know its class name. */
.page-content > *:not(.modal-backdrop):not(:has(.modal-backdrop)) {
  animation: pageEnter 0.4s ease both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 2. List / table / card stagger ----------
   Incremental delay via :nth-child so rows/cards cascade in
   instead of popping all at once. Capped at 12 so long tables
   don't take seconds to finish settling; everything past the
   cap still fades in together on the last delay step. */
.data-table tbody tr,
.stats-row .stat-card,
.contacts-grid .contact-card,
.resources-list .resource-item,
.transfer-item {
  animation: rowIn 0.35s ease both;
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.data-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.data-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.data-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.data-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
.data-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
.data-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
.data-table tbody tr:nth-child(n+12) { animation-delay: 0.24s; }

.stats-row .stat-card:nth-child(1),
.contacts-grid .contact-card:nth-child(1),
.resources-list .resource-item:nth-child(1),
.transfer-item:nth-child(1) { animation-delay: 0.03s; }
.stats-row .stat-card:nth-child(2),
.contacts-grid .contact-card:nth-child(2),
.resources-list .resource-item:nth-child(2),
.transfer-item:nth-child(2) { animation-delay: 0.08s; }
.stats-row .stat-card:nth-child(3),
.contacts-grid .contact-card:nth-child(3),
.resources-list .resource-item:nth-child(3),
.transfer-item:nth-child(3) { animation-delay: 0.13s; }
.stats-row .stat-card:nth-child(4),
.resources-list .resource-item:nth-child(4),
.transfer-item:nth-child(4) { animation-delay: 0.18s; }
.stats-row .stat-card:nth-child(5),
.resources-list .resource-item:nth-child(5),
.transfer-item:nth-child(5) { animation-delay: 0.23s; }
.stats-row .stat-card:nth-child(n+6),
.resources-list .resource-item:nth-child(n+6),
.transfer-item:nth-child(n+6) { animation-delay: 0.28s; }

/* ---------- 3. Hover / press polish ---------- */
.card,
.stat-card,
.contact-card {
  transition: transform var(--transition-base, 0.2s ease-in-out),
              box-shadow var(--transition-base, 0.2s ease-in-out);
}

.card:hover,
.stat-card:hover,
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}

/* .card:hover already changes border-color in ui-ux-enhancements.css;
   the lift above layers on top of it without overriding that rule. */

.btn,
.btn-sm,
.btn-lg {
  transition: transform var(--transition-fast, 0.15s ease-in-out),
              box-shadow var(--transition-fast, 0.15s ease-in-out),
              background var(--transition-fast, 0.15s ease-in-out),
              border-color var(--transition-fast, 0.15s ease-in-out),
              color var(--transition-fast, 0.15s ease-in-out);
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.btn-secondary:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.btn-danger:active:not(:disabled) {
  transform: scale(0.96);
}

/* Table row hover already recolors background/inset ring in
   ui-ux-enhancements.css; just make the recolor itself smoother. */
.data-table tbody tr {
  transition: background var(--transition-fast, 0.15s ease-in-out),
              box-shadow var(--transition-fast, 0.15s ease-in-out);
}

/* Sidebar nav + topbar micro-interactions */
.sidebar-nav a,
.sidebar-nav button {
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}

.sidebar-nav a:hover .nav-icon,
.sidebar-nav button:hover .nav-icon {
  transform: scale(1.15);
}

.nav-icon {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.topbar-avatar {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.topbar-user:hover .topbar-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--primary-light, #eff6ff);
}

.topbar-logout {
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.topbar-logout:hover {
  transform: scale(1.08);
}

.modal-close {
  transition: background var(--transition-fast, 0.15s ease-in-out),
              color var(--transition-fast, 0.15s ease-in-out),
              transform var(--transition-fast, 0.15s ease-in-out);
}

.modal-close:hover {
  transform: rotate(90deg);
}

/* ---------- 4. Status / badge life ---------- */
.license-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge-active .badge-dot,
.badge-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ---------- 5. Modal / toast refinement ----------
   NOTE: deliberately NOT animating `transform`/`scale` on
   `.modal-dialog` itself — that element also has
   `overflow: auto` for tall forms (e.g. the Resellers modal),
   and animating a scale transform on a scrollable container
   made the browser open it already scrolled past its header.
   The existing `slideUp` (translateY + opacity, no scale)
   from ui-ux-enhancements.css is left as-is; it never had
   this problem. */

.toast {
  animation: slideInRight var(--transition-slow, 0.3s ease-in-out) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- 6. Tab underline, generalized ----------
   `expandWidth` is already defined (ui-ux-enhancements.css)
   for the `.tab-btn.active` system; extend the same grow-in
   effect to the other `.tab`/`.tabs` system used elsewhere
   (ResellerDetail, ResourceManagement, ClientDetail). */
.tab.active::after {
  animation: expandWidth var(--transition-base, 0.2s ease-in-out);
}

.tab-button {
  transition: color var(--transition-base, 0.2s ease-in-out),
              background var(--transition-base, 0.2s ease-in-out);
}

/* ---------- 7. Spinner redesign ----------
   Same class names/markup, nicer dual-ring look for the large
   standalone loading spinners. Small inline button spinners
   (.spinner-sm) are left untouched since they sit on colored
   button backgrounds. */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  color: var(--text-muted, #9098b1);
}

.spinner,
.progress-spinner,
.spinner-large {
  position: relative;
}

.spinner-large {
  width: 48px;
  height: 48px;
  border: 4px solid var(--bg-tertiary, #f3f4f6);
  border-top-color: var(--primary, #0066cc);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner::after,
.progress-spinner::after,
.spinner-large::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--accent, #0066cc);
  opacity: 0.4;
  animation: spin 1.6s linear infinite reverse;
}

/* ---------- 8. Focus-visible pass (keyboard accessibility) ---------- */
a:focus-visible,
.nav-icon:focus-visible,
.tab-btn:focus-visible,
.tab:focus-visible,
.sidebar-nav a:focus-visible,
.sidebar-nav button:focus-visible {
  outline: 2px solid var(--primary, #0066cc);
  outline-offset: 2px;
  border-radius: var(--radius, 8px);
}

/* ---------- 9. Empty state ---------- */
.empty-state {
  animation: emptyIn 0.4s ease both;
}

@keyframes emptyIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state-icon,
.empty-icon {
  animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}