/* TexVision-Pro — shared interaction & micro-animation system.

   One place for consistent, subtle hover/focus feedback across the whole app.
   Loaded last on every page so its transitions win over component defaults.
   Only GPU-friendly / non-layout properties are animated (background-color,
   border-color, box-shadow, transform, color, outline). Excluded elements
   (live stream, canvases, data values) are never selected, so they stay instant. */

:root {
  --ix-duration: 160ms;
  --ix-ease: ease-out;
  --ix-lift: translateY(-1px);
  --ix-lift-card: translateY(-2px);
  --ix-shadow-hover: 0 8px 20px rgba(74, 55, 27, .12);
  --ix-focus-ring: 0 0 0 3px rgba(166, 145, 75, .28);
}

/* ── Transitions (interactive surfaces) ─────────────────────────────────── */
.nav-item, .collapse-btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-logout,
.icon-btn, .v-btn, .icon-action, .pw-eye, .modal-x, .pager button, .qa,
.tab, .seg button,
input, select, textarea,
.link, .view-all,
.badge, .role-badge, .status-pill, .pill, .you-badge, .badge-ok, .swatch {
  transition: background-color var(--ix-duration) var(--ix-ease),
              border-color var(--ix-duration) var(--ix-ease),
              box-shadow var(--ix-duration) var(--ix-ease),
              transform var(--ix-duration) var(--ix-ease),
              color var(--ix-duration) var(--ix-ease);
}

/* Cards: gentle shadow on hover (no movement for large content cards). */
.card {
  transition: box-shadow var(--ix-duration) var(--ix-ease),
              border-color var(--ix-duration) var(--ix-ease);
}
.card:hover { box-shadow: var(--ix-shadow-hover); }

/* Small summary/stat tiles: subtle shadow + 2px lift. */
.stat-box, .sum-box, .ana-card, .um-card, .summary-item, .trend, .sys-item {
  transition: box-shadow var(--ix-duration) var(--ix-ease),
              transform var(--ix-duration) var(--ix-ease),
              border-color var(--ix-duration) var(--ix-ease);
}
.stat-box:hover, .sum-box:hover, .ana-card:hover, .um-card:hover,
.summary-item:hover, .trend:hover, .sys-item:hover {
  box-shadow: var(--ix-shadow-hover);
  transform: var(--ix-lift-card);
}

/* Table rows: readability lift via background only (no layout shift). */
.report-table tbody tr, .history-table tbody tr, .um-table tbody tr,
.recent-table tbody tr, .activity-table tbody tr {
  transition: background-color var(--ix-duration) var(--ix-ease);
}

/* ── Button feedback (elevation on hover, press on active) ───────────────── */
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
.btn-danger:hover:not(:disabled), .btn-logout:hover:not(:disabled) {
  transform: var(--ix-lift);
  box-shadow: var(--ix-shadow-hover);
}
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled), .btn-logout:active:not(:disabled),
.btn-ghost:active:not(:disabled), .qa:active {
  transform: translateY(0);
}

/* ── Keyboard focus (accessible, visible) ───────────────────────────────── */
.nav-item:focus-visible, .collapse-btn:focus-visible,
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible,
.btn-danger:focus-visible, .btn-logout:focus-visible,
.icon-btn:focus-visible, .v-btn:focus-visible, .icon-action:focus-visible,
.pager button:focus-visible, .qa:focus-visible, .tab:focus-visible,
.seg button:focus-visible, .link:focus-visible, .view-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ix-focus-ring);
}


/* ── Icons: one global size/alignment + subtle premium hover glow ────────── */
.icon {
  width: 1em; height: 1em; flex: none; display: inline-block;
  vertical-align: -0.14em; color: inherit;
  transition: color var(--ix-duration) var(--ix-ease), filter var(--ix-duration) var(--ix-ease);
}
.icon-lg { width: 1.7em; height: 1.7em; }
a:hover .icon, button:hover .icon, .nav-item:hover .icon, .tab:hover .icon,
.qa:hover .icon, .icon-action:hover .icon, .v-btn:hover .icon, .pw-eye:hover .icon {
  filter: drop-shadow(0 0 2px rgba(166, 145, 75, .55));
}

/* ── Reduced motion: honour the OS preference everywhere ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}