/* touch.css — Touch device hover parity
   ─────────────────────────────────────────────────────────────────────────
   Problem: on touch screens :hover fires on tap and STAYS until the user
   taps elsewhere — creating stuck glow / animation states.

   Strategy:
     1. Reset :hover back to resting state inside @media (hover: none)
        so the effect never gets "stuck" after lifting a finger.
     2. Apply the FULL desktop hover effect to :active instead —
        it fires on finger-down and clears automatically on finger-up.

   Result: touch users get the same neon glows, animations and colour
   changes as desktop, but only while pressing — never stuck.           */

@media (hover: none) {

  /* ── KPI cards ────────────────────────────────────────────────────────
     Reset hover (prevent sticky animation), mirror full glow on :active */
  .kpi-card:hover {
    border-color: var(--border);
    box-shadow: none;
    background: var(--bg2);
    animation: none;
  }
  .kpi-card:hover::after     { opacity: 0; }
  .kpi-card:hover .kpi-value { text-shadow: none; }

  .kpi-card:active {
    border-color: var(--card-accent, var(--border2));
    box-shadow: 0 0 18px -2px var(--card-accent, transparent),
                inset 0 0 24px -12px var(--card-accent, transparent);
    background: var(--bg3);
    animation: kpi-switch-on 0.35s ease-out forwards;
  }
  .kpi-card:active::after     { opacity: 1; }
  .kpi-card:active .kpi-value { text-shadow: 0 0 12px var(--card-accent, transparent); }

  /* Editable hint */
  .kpi-card.editable:active .kpi-label::after {
    content: ' ✎';
    font-size: 9px;
    opacity: 0.5;
    vertical-align: middle;
  }

  /* Light theme reset */
  [data-theme="light"] .kpi-card:hover {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  }
  [data-theme="light"] .kpi-card:active {
    background: var(--bg3);
    box-shadow: 0 0 0 2px var(--card-accent, var(--border2)),
                0 4px 16px rgba(0,0,0,0.1);
  }

  /* ── Tab buttons ─────────────────────────────────────────────────────
     Active tab already styled via .active class; strip stuck hover glow,
     then apply the same accent color + glow on press.                  */
  .tab-btn:hover                     { box-shadow: none; }
  [data-theme="light"] .tab-btn:hover { box-shadow: none; }

  .tab-btn[data-tab="finances"]:active {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
    box-shadow: 0 2px 8px rgba(0,229,255,0.4);
  }
  .tab-btn[data-tab="crypto"]:active {
    color: var(--purple);
    border-bottom-color: var(--purple);
    box-shadow: 0 2px 8px rgba(192,132,252,0.4);
  }
  .tab-btn[data-tab="shares"]:active {
    color: var(--yellow);
    border-bottom-color: var(--yellow);
    box-shadow: 0 2px 8px rgba(255,215,64,0.4);
  }
  .tab-btn[data-tab="charts"]:active {
    color: var(--green);
    border-bottom-color: var(--green);
    box-shadow: 0 2px 8px rgba(0,230,118,0.4);
  }

  /* ── Week badge ────────────────────────────────────────────────────────
     Shimmer + scanlines + glitch stay active after tap.
     On :active: full cyan glow (matches desktop hover).                */
  .week-badge:hover {
    color: var(--dim);
    border-color: var(--border);
    background: var(--bg3);
    letter-spacing: 2px;
    box-shadow: none;
    animation: none;
  }
  .week-badge:hover::before { background-position: 200% center; transition: none; }
  .week-badge:hover::after  { opacity: 0; }

  .week-badge:active {
    color: var(--cyan);
    border-color: var(--cyan);
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 12px rgba(0,229,255,0.3);
    letter-spacing: 3px;
  }
  .week-badge:active::after { opacity: 1; }

  [data-theme="light"] .week-badge:hover { background: var(--bg3); box-shadow: none; }
  [data-theme="light"] .week-badge:active {
    background: rgba(0,100,122,0.06);
    box-shadow: 0 0 0 2px var(--cyan);
  }

  /* ── Crypto cards ───────────────────────────────────────────────────────
     Full coin-colour glow on :active, not just border change.           */
  .crypto-card:hover {
    border-color: var(--border);
    box-shadow: none;
  }
  .crypto-card:hover::before { box-shadow: 0 0 12px var(--coin-color, var(--cyan)); }
  .crypto-card:hover::after  { opacity: 0; animation: none; }

  .crypto-card:active {
    border-color: var(--coin-color, var(--border2));
    box-shadow: 0 0 32px -8px var(--coin-color, transparent);
  }
  .crypto-card:active::before { box-shadow: 0 0 20px var(--coin-color, transparent); }
  .crypto-card:active::after  { opacity: 1; }

  [data-theme="light"] .crypto-card:hover {
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.07);
  }
  [data-theme="light"] .crypto-card:active {
    border-color: var(--coin-color, var(--border2));
    box-shadow: 0 0 0 2px var(--coin-color, transparent), 0 4px 16px rgba(0,0,0,0.1);
  }

  /* ── Stripe CTA button ──────────────────────────────────────────────────
     Full pink glow + glitch animation on :active.                       */
  .btn-stripe:hover { background: transparent; box-shadow: none; }
  .btn-stripe:hover::before { background-position: 200% center; transition: none; }
  .btn-stripe:hover span    { animation: none; }

  .btn-stripe:active {
    background: rgba(255, 45, 120, 0.12);
    box-shadow: 0 0 24px rgba(255, 45, 120, 0.5), inset 0 0 20px rgba(255, 45, 120, 0.08);
  }
  .btn-stripe:active span { animation: stripe-btn-glitch 0.4s steps(1) 1; }

  /* ── Copy address button ────────────────────────────────────────────────*/
  .btn-copy:hover { background: transparent; box-shadow: none; }
  .btn-copy:active {
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 8px -2px var(--coin-color, transparent);
    border-color: var(--coin-color, var(--border2));
  }

  /* ── Action buttons (primary / danger / ghost) ──────────────────────── */
  .btn-primary:hover { background: transparent; box-shadow: none; }
  .btn-danger:hover  { background: transparent; box-shadow: none; }
  .btn-ghost:hover   { border-color: var(--border2); color: var(--dim); }

  .btn-primary:active {
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 12px rgba(0,229,255,0.3);
  }
  .btn-danger:active {
    background: rgba(255, 45, 120, 0.08);
    box-shadow: 0 0 8px rgba(255,45,120,0.3);
  }
  .btn-ghost:active {
    border-color: var(--dim);
    color: var(--text);
    background: rgba(255,255,255,0.04);
  }

  /* Light theme ghost */
  [data-theme="light"] .btn-ghost:active {
    border-color: rgba(0,0,0,0.3);
    color: var(--text);
  }

  /* ── Finance filter pills ───────────────────────────────────────────────*/
  .fin-filter-btn:hover { border-color: var(--border2); color: var(--dim); }
  .fin-filter-btn:active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0,229,255,0.06);
  }

  /* ── Quick-add template chips ──────────────────────────────────────────*/
  .quick-add-chip:active {
    border-color: var(--cyan);
    background: rgba(0,229,255,0.06);
    box-shadow: 0 0 8px rgba(0,229,255,0.15);
  }

  /* ── Tag chips ─────────────────────────────────────────────────────────*/
  .tag-chip:active {
    border-color: var(--cyan);
    color: var(--cyan);
  }
  .tag-chip.clear:active { background: rgba(255,45,120,0.08); }

  /* ── Data table rows ────────────────────────────────────────────────────*/
  .data-table tbody tr:hover  { background: transparent; }
  .data-table tbody tr:active { background: var(--bg3); }

  /* Row action buttons — always visible on touch (no hover reveal) */
  .row-actions { opacity: 1; }
  .data-table .row-actions { opacity: 1; }

  /* ── Header utility buttons ─────────────────────────────────────────── */
  .btn-theme:hover  { border-color: var(--border2); color: var(--dim); }
  .btn-print:hover  { border-color: var(--border2); color: var(--dim); }
  .btn-donate:hover { border-color: var(--border2); color: var(--dim); box-shadow: none; }
  .currency-select:hover { border-color: var(--border2); }

  .btn-theme:active  { border-color: var(--cyan); color: var(--cyan); }
  .btn-print:active  { border-color: var(--cyan); color: var(--cyan); }
  .btn-donate:active {
    border-color: var(--pink);
    color: var(--pink);
    box-shadow: 0 0 8px rgba(255,45,120,0.3);
  }

  /* ── Timeframe buttons (Charts tab) ─────────────────────────────────── */
  .tf-btn:active {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 6px rgba(0,230,118,0.3);
  }

  /* ── Subtab buttons (Shares) ────────────────────────────────────────── */
  .subtab-btn:active {
    color: var(--yellow);
    border-color: var(--yellow);
  }

  /* ── PWA banner dismiss ────────────────────────────────────────────── */
  .pwa-banner-dismiss:hover  { color: var(--dim); }
  .pwa-banner-dismiss:active { color: var(--pink); }

}

/* ── Hide swipe delete zone on pointer devices (mouse/trackpad) ────────────
   The ::after DEL zone is only useful on touch; on desktop the existing
   row-actions buttons are already visible on hover.                        */
@media (hover: hover) {
  .data-table tbody tr::after { display: none; }
}