/*
 * Application Custom Styles
 *
 * This file loads AFTER Tailwind CSS (loaded in layout as "tailwind")
 * Use this for custom styles that extend or override Tailwind.
 *
 * The Rubik font is configured in app/assets/tailwind/application.css
 * and is automatically used as Tailwind's default sans-serif font.
 *
 * You can use Tailwind's font utilities:
 * - font-sans (uses Rubik)
 * - font-light (300), font-normal (400), font-medium (500)
 * - font-semibold (600), font-bold (700), font-extrabold (800), font-black (900)
 */

/* ============================================
   Custom Styles
   ============================================ */

/* Tap/hover tooltip for mobile-friendly tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background-color: var(--color-surface-alt, #374151);
  color: var(--color-body, #d1d5db);
  border: 1px solid var(--color-default, #4b5563);
  z-index: 60;
}

[data-tooltip]:hover::after,
[data-tooltip]:active::after,
[data-tooltip]:focus::after {
  opacity: 1;
}

/* Fade-in animation for Turbo Stream prepends (activity feed) */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-out;
}

/* Brief background flash for the set referenced by a #set-<id> URL hash on
   the workout show page. Used by set_highlight_controller.js so the stats
   PR feed click-through immediately highlights the originating set. */
@keyframes set-highlight-flash {
  0%   { background-color: var(--color-success-bg); }
  60%  { background-color: var(--color-success-bg); }
  100% { background-color: transparent; }
}

.set-highlight-flash {
  animation: set-highlight-flash 2.2s ease-out;
  border-radius: 0.375rem;
  margin: -0.125rem -0.25rem;
  padding: 0.125rem 0.25rem;
}

/* ============================================
   Trainer Background Pattern
   ============================================ */

.trainer-bg {
  background-color: var(--color-page);
  background-image: url("/assets/trainer-bg-4485b5e9.jpg");
  background-size: 360px 360px;
}

@media (prefers-color-scheme: dark) {
  .trainer-bg {
    background-image: url("/assets/trainer-bg-dark-9bc08e7f.jpg");
  }
}

/* ============================================
   Trainer Set Stack
   ============================================ */

.set-stack {
  position: relative;
}

/* Peek card edges below the active card */
.set-stack__peek {
  position: absolute;
  bottom: 0;
  height: 16px;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  border: 1px solid var(--color-default, rgb(0 0 0 / 0.06));
  border-top: none;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  pointer-events: none;
}

/* Active card — enters from behind (forward) */
.set-stack__active--entering {
  animation: stack-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes stack-enter {
  from {
    opacity: 0.5;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Active card — slides in from right (backward/previous) */
.set-stack__active--slide-in {
  animation: stack-slide-in 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes stack-slide-in {
  from {
    transform: translateX(105%);
  }
  to {
    transform: translateX(0);
  }
}

/* Stationary card underneath (backward/previous) */
.set-stack__underneath {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

/* Leaving card — slides out left (forward) */
.set-stack__leaving {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  animation: stack-leave 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
  pointer-events: none;
}


@keyframes stack-leave {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-35%) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-105%) rotate(-5deg);
  }
}


/* Background scroll on exercise transitions.
   Clip only the sideways overflow of the card animations. This class sits on
   <body>, and a body's overflow is propagated to the viewport: `overflow:
   hidden` there made the whole trainer impossible to scroll by touch or wheel,
   so a post-exercise screen taller than the phone lost its Continue button
   (Gitea #262). */
.trainer-bg {
  overflow-x: clip;
  transition: background-position-y 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Inside the Android app the native toolbar and tab bar shorten the viewport,
   so the trainer can be taller than it. Same sideways clip, explicit vertical
   scroll (kept as it was, the app's WebView is already tuned to it). */
.trainer-bg--app {
  overflow-x: clip;
  overflow-y: auto;
}


/* Touch targets — primary CTAs.
   Ensure primary action buttons meet the 44px minimum on mobile (one-handed
   gym use). Scoped to genuine CTAs: `bg-btn` action buttons/links, emerald
   `a.bg-cta` link CTAs (e.g. "New Workout"), and form submit inputs.
   Deliberately excludes `button.bg-cta` (stateful toggles, which would jump
   height between pressed states), `span.bg-cta` (badges), and dense secondary
   controls (filter selects, inline text actions). */
@media (max-width: 767px) {
  a.bg-btn,
  button.bg-btn,
  a.bg-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  input[type="submit"] {
    min-height: 44px;
  }
}