/**
 * EU SwagHub - Hover effects extracted from inline onmouseover/onmouseout.
 *
 * Replaces inline style mutations with CSS :hover rules. Faster, accessible,
 * touch-device safe. Triggered by `data-hover="..."` attributes added by
 * the CSP unsafe-inline removal refactor (spec
 * main-app-csp-unsafe-inline-removal).
 *
 * Original inline behaviour preserved:
 *   - lift-cyan: dashboard refresh / add-product buttons
 *   - lift-green: process-checkout button (cart -> shop, only if not disabled)
 *   - modal-close: variant-modal close X button (red highlight)
 *
 * Each rule keeps the SAME box-shadow + transform values that were inline
 * so visual parity is exact.
 */

/* Cyan lift (dashboard refresh, add product). Inline was:
   transform=translateY(-1px); boxShadow=0 4px 12px rgba(14,165,233,0.3) */
[data-hover="lift-cyan"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-hover="lift-cyan"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--tint-cyan-strong);
}

/* Green lift (process-checkout button). Inline was a guarded version that
   skipped the lift when the button was disabled - native :hover does the
   same because :disabled buttons don't get :hover transform. */
[data-hover="lift-green"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-hover="lift-green"]:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--tint-green-lift);
}

/* Modal-close red highlight (variant-modal close X). Inline was:
   background=rgba(239,68,68,0.08); color=#ef4444 */
[data-hover="modal-close"] {
  transition: background 0.15s ease, color 0.15s ease;
}
[data-hover="modal-close"]:hover {
  background: var(--tint-red-weak);
  color: var(--danger);
}


/* Catalog row hover (replaces inline onmouseover/onmouseout in
   auth-callback.js renderCatalog). Inline was:
     onmouseover -> background: rgba(59,130,246,0.04)
     onmouseout  -> background: '' OR rgba(59,130,246,0.04) if data-changed=1
   The "changed" rows already have the cyan background applied as an
   inline `style="background:..."` so :hover only matters for unchanged
   rows. We keep parity by using a soft cyan tint on hover. */
tr.catalog-row {
  transition: background 0.15s ease;
}
tr.catalog-row:hover {
  background: var(--tint-blue-weak);
}

/* Post-clamp visual nudge for the stock-input cells. Inline `oninput` was
   trimming the value to 999 / 3 chars on every keystroke. We do that in
   JS via a delegated listener; no CSS needed for the clamping itself. */


/* ============================================================
   Theme-aware visibility fixes for header-action buttons
   ============================================================
   The variant-modal close button and the notif-dropdown "Clear All"
   button were both getting hard-to-read text in either light or
   dark theme because their inline / earlier rules used hardcoded
   --text-muted (too pale on white) or white-on-white scenarios.
   These rules add light/dark-aware fallbacks at high specificity.
*/

/* Variant modal close (✕) - default state needs strong contrast in BOTH themes.
   Inline style sets color:var(--text-muted) which is too pale on the
   white modal background. Force a darker default color so the X is
   readable, then let data-hover="modal-close" handle the red flash on
   hover.  Selector includes #variant-modal-close to beat inline color. */
#variant-modal-close,
button#variant-modal-close[data-hover="modal-close"] {
  color: var(--slate-600) !important; /* slate-600 */
}
[data-theme="dark"] #variant-modal-close,
[data-theme="dark"] button#variant-modal-close[data-hover="modal-close"] {
  color: var(--slate-300) !important; /* slate-300 - readable on dark */
  background: var(--tint-slate-dark) !important;
}

/* Notif "Clear All" - already has gradient + white text via earlier
   inline-CSS block, but the `.btn` / `.btn-secondary` chain in the
   stylesheet may set `background: var(--bg-main)` which on light theme
   is near-white and the !important from earlier doesn't always win
   if the rendered specificity differs. Force the gradient again at
   higher specificity. */
button#notif-clear-all.btn-secondary,
.notif-dropdown button#notif-clear-all,
.notif-dropdown-header button#notif-clear-all {
  color: var(--white) !important;
  background: var(--grad-indigo-purple) !important;
  border: 0 !important;
  font-weight: 700 !important;
}
button#notif-clear-all.btn-secondary:hover,
.notif-dropdown button#notif-clear-all:hover {
  background: var(--grad-indigo-purple-hover) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 14px var(--tint-indigo-glow) !important;
  transform: translateY(-1px);
}


/* ============================================================
   Swag-shop dynamic-row hover effects (CSP-safe replacements
   for inline onmouseover/onmouseout in swag-shop.js).
   ============================================================ */

/* Variant row in the variant-modal: cyan tint + slide-right.
   Inline guard was: !.selected && !.variant-oos.
   Native :hover already won't fire on disabled/pointer-none rows
   (variant-oos has pointer-events:none inline). The :not() filter
   keeps the selected row visually pinned. */
.swag-variant-row {
  transition: background 0.15s ease, transform 0.15s ease;
}
.swag-variant-row:not(.selected):not(.variant-oos):hover {
  background: var(--tint-cyan-weak);
  transform: translateX(4px);
}

/* Quantity-picker +/- buttons (inside add-to-cart card). */
.swag-qty-btn {
  transition: background 0.2s ease, color 0.2s ease;
}
.swag-qty-btn:hover {
  background: var(--tint-cyan-soft) !important;
  color: var(--primary) !important;
}

/* Add-from-card primary button (bottom of every product card). */
.swag-add-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.swag-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--tint-cyan-glow) !important;
}

/* Cart-dropdown row hover (header cart drawer). */
.swag-cart-dropdown-row {
  transition: background 0.2s ease;
}
.swag-cart-dropdown-row:hover {
  background: var(--tint-cyan-weak) !important;
}

/* Cart-row remove button (red highlight). */
.swag-cart-remove {
  transition: background 0.2s ease, color 0.2s ease;
}
.swag-cart-remove:hover {
  background: var(--tint-red-soft) !important;
  color: var(--danger-dark) !important;
}

/* Checkout page row hover (faint cyan). */
.swag-checkout-row {
  transition: background 0.2s ease;
}
.swag-checkout-row:hover {
  background: var(--tint-cyan-faint) !important;
}