/* Navigation chrome — sheet animations, safe-area utilities, mobile tap fixes.
   Imported by application.tailwind.css via the responsive_navbar generator. */

/* --- Base interactive cursor ------------------------------------------- */
/* Tailwind v4's reset removed the default `cursor: pointer` for buttons.
   Put it back so the hamburger / collapse toggle / dropdowns feel clickable. */
@layer base {
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

/* --- Sheet animations (slide in/out from left, fade backdrop) ----------- */
@keyframes sheet-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes sheet-slide-left-out {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes sheet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheet-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sheet-enter-left    { animation: sheet-slide-left 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-exit-left     { animation: sheet-slide-left-out 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.sheet-backdrop-enter { animation: sheet-fade-in 220ms ease-out; }
.sheet-backdrop-exit  { animation: sheet-fade-out 200ms ease-in forwards; }

/* --- Mobile touch interaction fixes ------------------------------------- */
/* iOS Safari auto-zooms when focusing form fields under 16px. */
input, select, textarea {
  font-size: 16px;
}

/* Eliminate the legacy 300ms double-tap-zoom delay on interactive elements. */
button, a, [role="button"], input[type="submit"], input[type="button"],
label[for], summary, select {
  touch-action: manipulation;
}

/* Avoid the sticky tap-highlight gray on iOS without losing active state. */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Native-feeling momentum scroll on mobile scroll containers. */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* --- Horizontal scroll strips ------------------------------------------ */
/* Hide the scrollbar chrome for a clean look while keeping the element
   scrollable (mouse wheel, trackpad, keyboard, touch). Used by the
   horizontal-scroll Stimulus controller (e.g. fund-history ticker rows). */
.no-scrollbar {
  scrollbar-width: none;            /* Firefox */
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;                    /* Safari / Chrome */
}

/* Keyboard focus ring for a horizontal-scroll strip (the element is
   tabindex=0 so users can focus it and arrow-scroll). Defined here as plain
   CSS because this app's Tailwind build doesn't emit focus-visible:ring-*. */
.hscroll-strip:focus { outline: none; }
.hscroll-strip:focus-visible {
  outline: 2px solid #cbd5e1;       /* slate-300 */
  outline-offset: 1px;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet-enter-left,
  .sheet-exit-left,
  .sheet-backdrop-enter,
  .sheet-backdrop-exit {
    animation-duration: 0.01ms !important;
  }
}