/* ================================================================
   TOUCH DEVICE FIX — Disable sticky hover transforms
   ================================================================
   On touch screens (mobile/tablet), :hover states stick after tap.
   This causes cards, buttons, and icons to remain "lifted" or "scaled"
   until the user taps elsewhere.

   IMPORTANT: Do NOT use *:hover — it breaks elements that use
   transform for positioning (e.g. notification panel centering).
   Only target specific selectors that have hover animations.
   ================================================================ */

@media (hover: none) {

  /* ================================================================
     TAP HIGHLIGHT REMOVAL
     Kills the grey/blue rectangle browsers paint on touch by default.
     Applied to every card/button that has a hover or active state.
     ================================================================ */
  .db-stat-card,
  .db-balance-card,
  .db-action-card,
  .db-owe-person-card,
  .db-detail-card .list-group-item,
  .exp-stat-card,
  .exp-card,
  .exp-toggle-btn,
  .exp-filter-btn,
  .exp-month-item,
  .exp-hero-btn,
  .exp-btn-primary,
  .exp-btn-ghost,
  .exp-btn-danger,
  .exp-card-actions button,
  .grp-card,
  .grp-stat-card,
  .grp-prev-card,
  .grp-btn,
  .grp-view-btn,
  .sw-tile {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Dashboard Cards — disable sticky hover transforms ── */
  .db-stat-card:hover,
  .db-stat-card:hover .db-stat-icon,
  .db-balance-card:hover,
  .db-balance-card:hover .db-balance-icon,
  .db-action-card:hover,
  .db-action-card:hover .db-action-icon,
  .db-detail-card:hover,
  .db-chart-card:hover,
  .db-owe-person-card:hover,
  .db-detail-card .list-group-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Dashboard — touch :active press states (instant tactile feedback) */
  .db-stat-card:active {
    transform: scale(0.975) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .db-balance-card:active {
    transform: scale(0.978) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .db-action-card:active {
    transform: scale(0.972) !important;
    opacity: 0.88 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .db-owe-person-card:active {
    transform: scale(0.978) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .db-detail-card .list-group-item:active {
    transform: scale(0.985) !important;
    opacity: 0.88 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }

  /* ── Expense Page Cards — disable sticky hover transforms ── */
  .exp-stat-card:hover,
  .exp-stat-card:hover .exp-stat-icon,
  .exp-toggle-btn:hover,
  .exp-filter-btn:hover,
  .exp-month-item:hover,
  .exp-hero-btn:hover,
  .exp-btn-primary:hover,
  .exp-btn-ghost:hover,
  .exp-btn-danger:hover,
  .exp-card-actions .exp-card-edit:hover,
  .exp-card-actions .exp-card-delete:hover,
  .exp-card-actions .exp-card-receipt-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Expense — touch :active press states */
  .exp-stat-card:active {
    transform: scale(0.975) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .exp-toggle-btn:active,
  .exp-filter-btn:active {
    transform: scale(0.93) !important;
    opacity: 0.85 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }
  .exp-month-item:active {
    transform: scale(0.96) !important;
    opacity: 0.88 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }
  .exp-btn-primary:active,
  .exp-btn-ghost:active,
  .exp-btn-danger:active {
    transform: scale(0.94) !important;
    opacity: 0.85 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }
  .exp-card-actions button:active {
    transform: scale(0.88) !important;
    opacity: 0.8 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }

  /* ── Auth Page ── */
  .feature-list li:hover,
  .steps-list li:hover,
  .btn-main:hover,
  .contact-item:hover {
    transform: none !important;
  }

  /* ── Design System Cards, sw-tile & Buttons ── */
  .card:hover,
  .card-hover:hover,
  .card-premium:hover,
  .card-lift:hover,
  .stat-card:hover,
  /* sw-tile covers all dashboard/expense/groups tiles using the design system */
  .sw-tile:hover,
  .sw-tile[style*="background"]:hover,
  .stats-card.sw-tile:hover,
  .action-card.sw-tile:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-success:hover,
  .btn-danger:hover,
  .btn-outline-primary:hover,
  .btn-outline-danger:hover,
  .filter-btn:hover {
    transform: none !important;
    filter: none !important;
  }

  /* sw-tile touch :active press */
  .sw-tile:active {
    transform: scale(0.975) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }

  /* ── Navigation (sidebar links shift/scale) ── */
  .sidebar .nav-link:hover {
    transform: none !important;
  }
  .sidebar .nav-link:hover i {
    transform: none !important;
  }
  .sidebar .notification-bell:hover,
  .notification-bell:hover {
    transform: none !important;
  }
  .desktop-nav-toggle:hover,
  .mobile-menu-btn:hover {
    transform: none !important;
  }

  /* ── Top Nav ── */
  .sw-tn-link:hover,
  .sw-tn-link:hover i,
  .sw-tn-bell:hover,
  .sw-tn-brand:hover {
    transform: none !important;
  }

  /* ── Notification Items (NOT the panel container) ── */
  .notification-item:hover,
  .notification-item:hover .notification-icon {
    transform: none !important;
  }

  /* ── Dashboard Layout (legacy) ── */
  .expense-card:hover,
  .group-card:hover,
  .summary-card:hover,
  .quick-action-card:hover,
  .quick-action:hover {
    transform: none !important;
  }

  /* ── Tables & Lists ── */
  table tbody tr:hover,
  .table-hover tbody tr:hover,
  .list-group-item-action:hover,
  .list-group-item:hover {
    transform: none !important;
  }

  /* ── Misc interactive elements ── */
  .dropdown-item:hover,
  .badge:hover,
  .toast:hover {
    transform: none !important;
  }

  /* ── Groups Page Cards (grp-*) ── */
  .grp-stat-card:hover,
  .grp-stat-card:hover .grp-stat-icon,
  .grp-card:hover,
  .grp-card:hover .grp-card-avatar,
  .grp-prev-card:hover,
  .grp-btn:hover,
  .grp-view-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Keep border-color change on touch for visual feedback */
  .grp-stat-card:hover { border-color: var(--grp-border) !important; }
  .grp-card:hover       { border-color: var(--grp-border) !important; }

  /* Touch active press states — give instant tactile feedback */
  .grp-card:active {
    transform: scale(0.982) !important;
    opacity: 0.88 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .grp-stat-card:active {
    transform: scale(0.975) !important;
    opacity: 0.9 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .grp-prev-card:active {
    transform: scale(0.978) !important;
    opacity: 0.88 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }
  .grp-btn:active,
  .grp-view-btn:active {
    transform: scale(0.94) !important;
    opacity: 0.85 !important;
    transition: transform 0.07s ease, opacity 0.07s ease !important;
  }
}

/* ================================================================
   OVERFLOW / OVERSCROLL PREVENTION  (site-wide, all pages)
   ================================================================
   Prevents:
   • Horizontal scroll bleed from elements wider than the viewport
   • Left / right rubber-band on macOS trackpads & Windows precision
     touchpads (overscroll-behavior-x: none)
   • Top / bottom elastic bounce on laptop trackpads
     — only on (hover:hover)+(pointer:fine) devices so that mobile
       pull-to-refresh is NOT disabled.

   NOTE: overflow-y is intentionally NOT set here — each page controls
   its own vertical scroll container (body on simple pages, .main-content
   on dashboard/settings layout pages). Forcing overflow-y:auto globally
   conflicts with fixed-height sidebar layouts.
   ================================================================ */

html {
  overflow-x: hidden;           /* prevent horizontal bleed - safe on html */
  scrollbar-gutter: stable;    /* reserve scrollbar space always → NO layout shift */
  overscroll-behavior-x: none; /* block horizontal bounce on html root */
}

body {
  overscroll-behavior-x: none; /* block horizontal rubber-band */
}

/* Laptop / desktop trackpad — also block vertical elastic bounce.
   (hover:hover)+(pointer:fine) targets mice/trackpads, not phones,
   so mobile pull-to-refresh still works. */
@media (hover: hover) and (pointer: fine) {
  html,
  body {
    overscroll-behavior: none; /* no rubber-band bounce in any direction */
  }
}