/*
  Ubrianza Wise — Touch/iOS overrides (desktop untouched)

  Goals:
  - Keep the desktop (mouse/trackpad) styling EXACTLY as designed.
  - On touch devices, prevent iOS/Safari “sticky hover/focus” after tap.
  - Ensure pressed feedback is visible.
  - Fix iOS safe-areas + Members offcanvas height.

  Important note:
  - Do NOT rely on Bootstrap --bs-btn-* vars for primary, because the theme
    overrides .btn-primary colors via CSS (not vars). We therefore neutralize
    sticky states using your theme vars (--uw-*) directly.
*/

@media (pointer: coarse) {
  /* Make taps feel immediate and remove iOS tap highlight */
  * { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"], .btn { touch-action: manipulation; }

  /* Touch animation (desktop unaffected)
     Bootstrap transitions colors/box-shadow, but not transform/filter.
     Add them so the pressed feedback feels "animated" instead of instantaneous. */
  .btn,
  .btn-tap,
  .icon-btn,
  .pg-mem-btn {
    /* Use !important so this still animates even if iOS has Reduce Motion enabled
       (Bootstrap disables transitions under prefers-reduced-motion). */
    transition:
      color .15s ease-in-out,
      background-color .15s ease-in-out,
      border-color .15s ease-in-out,
      box-shadow .15s ease-in-out,
      transform .08s ease-out,
      filter .08s ease-out !important;
    will-change: transform, filter;
  }

  /* ─────────────────────────────────────────────
     1) Stop sticky hover on touch
     iOS often keeps :hover after a tap. We make hover == normal state.
     (Desktop keeps hover because this block never applies there.)
     ───────────────────────────────────────────── */

  /* Selected members are .btn-primary (green theme). Keep them green on hover. */
  .btn-primary:hover,
  .btn-primary:focus:hover {
    background-color: var(--uw-primary) !important;
    border-color: var(--uw-primary) !important;
  }

  /* iOS often keeps :focus on the last tapped button (even when it drops :hover).
     Some Bootstrap/Bootswatch themes change the background on :focus.
     Force the focused primary to remain in your green theme (not blue). */
  .btn-primary:focus,
  .btn-primary:focus-visible {
    background-color: var(--uw-primary) !important;
    border-color: var(--uw-primary) !important;
  }

  /* Unselected members are outline-secondary. Keep them as outline on hover. */
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus:hover {
    background: transparent !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: var(--uw-text) !important;
  }

  /* Same rationale as primary: keep focus from switching colors on iOS. */
  .btn-outline-secondary:focus,
  .btn-outline-secondary:focus-visible {
    background: transparent !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: var(--uw-text) !important;
  }

  /* Outline-light tap buttons (Back/PDF/etc.) */
  .btn-outline-light:hover,
  .btn-outline-light.btn-tap:hover {
    background: transparent !important;
    border-color: rgba(255,255,255,.25) !important;
    color: rgba(255,255,255,.92) !important;
  }

  /* Icon buttons
     On iOS/Android, :hover can stick after tap (especially dropdown toggles).
     We therefore make hover == base state, and use only :active/.uw-pressed
     for the pressed feedback.
  */
  .icon-btn:hover,
  .icon-btn:focus:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--uw-border) !important;
  }

  .icon-btn:focus,
  .icon-btn:focus-visible {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--uw-border) !important;
  }

  /* Dropdown kebab in Groups: never leave a "latched" hover/focus/expanded state */
  .pg-groups-kebab-wrap .dropdown-toggle:hover,
  .pg-groups-kebab-wrap .dropdown-toggle:focus,
  .pg-groups-kebab-wrap .dropdown-toggle:focus-visible,
  .pg-groups-kebab-wrap .dropdown-toggle[aria-expanded="true"],
  .pg-groups-kebab-wrap .dropdown-toggle.show {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--uw-border) !important;
  }

  /* If iOS fails to apply :active reliably, we add/remove this class via JS
     to guarantee a pressed feedback that always releases. */
  .uw-pressed {
    filter: brightness(0.90) !important;
    transform: scale(0.985) !important;
  }

  /* Ensure the hover neutralization does not cancel our JS-based pressed feedback */
  .btn:hover:not(:active):not(.uw-pressed),
  .btn-tap:hover:not(:active):not(.uw-pressed),
  .icon-btn:hover:not(:active):not(.uw-pressed),
  .pg-mem-btn:hover:not(:active):not(.uw-pressed) {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* ─────────────────────────────────────────────
     2) Stop sticky focus ring on touch
     iOS keeps focus on the last tapped button → blue ring/dark border.
     We remove only the ring (not colors) to avoid side effects.
     ───────────────────────────────────────────── */
  .btn:focus,
  .btn-tap:focus,
  .icon-btn:focus,
  .pg-mem-btn:focus,
  .btn-check:focus + .btn {
    outline: none !important;
    box-shadow: none !important;
  }

  /* ─────────────────────────────────────────────
     3) Pressed feedback (momentary)
     Keep a subtle feedback that always releases.
     ───────────────────────────────────────────── */
  .btn:active:not(:disabled),
  .btn-tap:active:not(:disabled),
  .icon-btn:active:not(:disabled),
  .pg-mem-btn:active:not(:disabled) {
    filter: brightness(0.90) !important;
    transform: scale(0.985) !important;
  }

  /* Ensure “primary pressed” never becomes Bootstrap blue */
  .btn-primary:active:not(:disabled) {
    background-color: var(--uw-primary-2) !important;
    border-color: var(--uw-primary-2) !important;
  }

  /* Make outline-secondary pressed state subtle (and never theme-blue) */
  .btn-outline-secondary:active:not(:disabled) {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.22) !important;
  }

  /* ─────────────────────────────────────────────
     4) Safe areas + layout (PWA & Safari)
     ───────────────────────────────────────────── */

  /* Page content clear of fixed navbar + home indicator */
  #page-content {
    padding-top: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Navbar background fills notch area; inner content stays aligned */
  .uw-navbar.navbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top));
    min-height: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top));
  }
  .uw-navbar.navbar .container-fluid {
    height: var(--uw-nav-h, 56px);
    align-items: center;
  }
  .uw-banner-alert {
    top: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top) + 10px);
  }

  /* Offcanvas panels below navbar + match visible viewport (fix Safari bottom bar) */
  .uw-offcanvas.offcanvas-start,
  .uw-offcanvas.offcanvas-end {
    top: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top)) !important;
    height: calc(100dvh - (var(--uw-nav-h, 56px) + env(safe-area-inset-top))) !important;
    max-height: calc(100dvh - (var(--uw-nav-h, 56px) + env(safe-area-inset-top))) !important;
    bottom: 0 !important;
  }

  /* Members: keep Save button tappable but not “too high” */
  .pg-members-offcanvas .pg-mem-footer {
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
  }
  .pg-members-offcanvas .offcanvas-body {
    padding-bottom: 0.35rem;
  }
}

/* Fallback for older iOS without reliable 100dvh */
@supports not (height: 100dvh) {
  @media (pointer: coarse) {
    .uw-offcanvas.offcanvas-start,
    .uw-offcanvas.offcanvas-end {
      height: calc(100vh - (var(--uw-nav-h, 56px) + env(safe-area-inset-top))) !important;
      max-height: calc(100vh - (var(--uw-nav-h, 56px) + env(safe-area-inset-top))) !important;
    }
  }
}