/* Shared hover / focus / active interaction system — applied once here and
   reused everywhere via the existing shared classes (.card, .btn,
   .data-table rows, .nav-link, etc.) plus a few opt-in utility classes for
   anything that isn't already one of those. Loaded globally (see
   layouts/base.html) so it reaches every page, including ones outside the
   dashboard shell (e.g. the login screen). */

/* ---- Reusable utility classes ---- */

.hover-lift,
.hover-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.hover-lift:hover,
.hover-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hover-lift:active,
.hover-card:active {
  transform: translateY(-1px) scale(0.98);
}

.hover-row {
  transition: background var(--transition-fast);
}

.hover-row:hover {
  background: var(--color-accent);
}

.interactive-button {
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.interactive-button:active {
  transform: scale(0.98);
}

/* ---- Applied to the shared components already used across every screen ---- */

.card {
  cursor: default;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

a.card,
button.card,
.card[role="button"],
.card.is-clickable {
  cursor: pointer;
}

a.card:hover,
button.card:hover,
.card[role="button"]:hover,
.card.is-clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

a.card:active,
button.card:active,
.card[role="button"]:active,
.card.is-clickable:active {
  transform: translateY(-1px) scale(0.98);
}

.btn {
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

/* Dashboard quick-action tiles and category tiles are clickable cards too. */
.quick-action-btn,
.category-tile {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
}

.quick-action-btn:not(:disabled):hover,
.category-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.quick-action-btn:not(:disabled):active,
.category-tile:active {
  transform: translateY(0) scale(0.98);
}

.summary-card {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.summary-card:hover {
  box-shadow: var(--shadow-sm);
}

/* Any data table row that represents a selectable/clickable record —
   row-select-cell is already the marker every grid in this app (Opening
   Stock, Stock Adjustment, Order to Bill, dispatch history) uses for its
   selectable rows. */
.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:has(.row-select),
.data-table tbody tr[data-bill-no],
.data-table tbody tr[data-adj-no],
.data-table tbody tr.is-clickable {
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: var(--color-accent);
}

/* Sidebar nav links already highlight when active — this just smooths the
   transition and adds a left accent bar on hover, without touching the
   existing active-state background. */
.sidebar-nav .nav-link {
  transition: background var(--transition-fast), border-left-color var(--transition-fast);
  border-left: 3px solid transparent;
}

.sidebar-nav .nav-link:hover {
  border-left-color: var(--color-primary);
}

.sidebar-nav .nav-link.is-active {
  border-left-color: var(--color-primary);
}

/* Icons inside any button/link get a subtle color transition rather than
   jumping instantly. */
.nav-icon svg,
.quick-action-icon svg,
.summary-icon svg {
  transition: color var(--transition-fast);
}

/* ---- Accessibility: visible keyboard focus everywhere ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.card:focus-visible,
.nav-link:focus-visible,
.data-table tbody tr:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .hover-card,
  .hover-row,
  .interactive-button,
  .card,
  .btn,
  .quick-action-btn,
  .category-tile,
  .summary-card,
  .data-table tbody tr,
  .sidebar-nav .nav-link,
  .nav-icon svg,
  .quick-action-icon svg,
  .summary-icon svg {
    transition: none !important;
  }

  .hover-lift:hover,
  .hover-card:hover,
  a.card:hover,
  button.card:hover,
  .card[role="button"]:hover,
  .card.is-clickable:hover,
  .quick-action-btn:not(:disabled):hover,
  .category-tile:hover {
    transform: none !important;
  }
}

/* ---- Touch devices: don't rely on hover for usability ---- */
@media (hover: none) {
  a.card:hover,
  button.card:hover,
  .card[role="button"]:hover,
  .card.is-clickable:hover,
  .quick-action-btn:hover,
  .category-tile:hover,
  .data-table tbody tr:hover {
    transform: none;
    box-shadow: none;
  }
}