/* Hover & focus states — universal interactive element layer.
   All transitions use --motion-* tokens from motion.css.
   Requires motion.css to be loaded first. */

/* Card hover — subtle shadow elevation */
.card:hover, .mobile-card:hover {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-fast);
}

/* List row hover — background tint */
.it:hover, .list-row:hover {
  background: var(--bg-secondary);
  transition: background var(--motion-fast);
}

/* Sidebar item — motion token wiring (Worker B defines .sidebar-item structure) */
.sidebar-item {
  transition: background var(--motion-fast), color var(--motion-fast);
}

/* Badge/chip hover when interactive (link or button parent) */
a .chip:hover, button .chip:hover {
  transform: scale(1.02);
  transition: transform var(--motion-fast);
}

/* Button press — bounce-back on release */
.btn,
button:not(.mobile-nav-item):not(.theme-toggle):not(.sidebar-item):not(.sidebar-group-header) {
  transition: transform var(--motion-bounce), opacity var(--motion-fast);
}
.btn:active,
button:not(.mobile-nav-item):not(.theme-toggle):not(.sidebar-item):not(.sidebar-group-header):active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* Filter / workstream pill toggle */
.chip-outline, .issues-filter-chip, .board-filter-chip {
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

/* Status dot pulse for active/monitoring states */
.status-dot[data-status="active"] {
  animation: statusPulseMotion 2s ease-in-out infinite;
}
@keyframes statusPulseMotion {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot[data-status="active"] { animation: none; }
}

/* Live indicator */
.live-indicator { display: inline-flex; align-items: center; gap: 6px; }
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-active);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* Focus ring — 2px accent, accessible, replaces browser default */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Sidebar group collapse/expand (Worker B defines .sidebar-group structure) */
.sidebar-group-chevron {
  transition: transform var(--motion-base);
}
.sidebar-group.collapsed .sidebar-group-chevron {
  transform: rotate(-90deg);
}
.sidebar-group-items {
  overflow: hidden;
  transition: max-height var(--motion-base), opacity var(--motion-base);
}
.sidebar-group.collapsed .sidebar-group-items {
  max-height: 0;
  opacity: 0;
}