/*
 * NutriLog – Responsive Layout Fixes
 * Injected as a supplemental stylesheet over the compiled Vite bundle.
 * All rules use high specificity or !important only where strictly necessary
 * to override Tailwind's utility classes.
 *
 * Problems addressed:
 *  1. Bottom nav overflows on narrow phones (10 tabs × 60 px = 600 px min).
 *  2. Reminders card has a fixed sm:w-64 that squeezes on mid-range phones.
 *  3. Container pill rows (flex items-center gap-3) don't wrap gracefully.
 *  4. Text in pills / stat cards gets truncated too aggressively on XS screens.
 *  5. html/body can overflow-x on very narrow viewports.
 */

/* ─── 1. Prevent horizontal scroll on the document ─────────────────────────── */
html,
body {
  overflow-x: hidden;
  /* Ensure the root never exceeds the viewport width */
  max-width: 100vw;
}

/* ─── 2. Bottom navigation bar ──────────────────────────────────────────────── */
/*
 * The nav uses overflow-x-auto + min-w-max so the 10 tabs always fit.
 * On very small screens (< 360 px) this creates a jarring horizontal scroll.
 * We switch to flex-wrap so tabs reflow into two rows before overflowing.
 * Breakpoints:
 *   < 400 px  → 2 rows of 5 (tabs shrink, labels hidden below 350 px)
 *   400–639 px → single scrollable row (existing behaviour, just tidied)
 *   ≥ 640 px  → nav is hidden (sm:hidden), so nothing to change
 */

/* Inner track: allow wrapping on the tiniest screens */
@media (max-width: 399px) {
  /* The div.min-w-max.w-full that holds all tab buttons */
  nav[aria-label="Primary navigation"] > div > div {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  /* Each tab button: make them 20% wide so 5 fit per row */
  nav[aria-label="Primary navigation"] button {
    flex: 0 0 20% !important;
    min-width: 0 !important;
    max-width: 20% !important;
  }

  /* Hide text labels below 350 px to keep icons readable */
  @media (max-width: 349px) {
    nav[aria-label="Primary navigation"] button > span:last-child {
      display: none !important;
    }

    nav[aria-label="Primary navigation"] button {
      min-height: 44px !important;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
  }
}

/* Tighten the outer scroll wrapper so overscroll doesn't bleed into page */
nav[aria-label="Primary navigation"] > div {
  overscroll-behavior-x: contain;
}

/* ─── 3. Reminders card – remove fixed width on small–medium screens ─────────*/
/*
 * The card uses `sm:w-64` which is 256 px. On a 375 px phone the flex row
 * (streak card flex-1 + reminders sm:w-64) squeezes the streak card.
 * We remove the fixed width below the md breakpoint so both cards take equal
 * space, and let the flex-col fallback kick in on xs screens.
 */
@media (max-width: 767px) {
  /* Target the reminders card in the workouts/programs row */
  /* It is a sibling of the streak card inside a flex-col sm:flex-row wrapper */
  .flex.flex-col.sm\\:flex-row > div[class*="sm:w-64"],
  .flex.flex-col.sm\\:flex-row > div[class*="sm\\:w-64"] {
    width: 100% !important;
  }
}

/* ─── 4. Settings quick-access row (Reminders toggle pill) ───────────────────*/
/*
 * The reminder pill inside Settings has `flex items-center gap-3 px-4 py-3`
 * with a long subtitle that uses `truncate`. On < 360 px the toggle can
 * bump into the text. We ensure the text block has a sensible min-width: 0
 * and the toggle stays shrink-0.
 */
/* Already uses flex-1 min-w-0 + shrink-0 in the source — reinforce it */
/* flex-shrink: 0 is merged into rule 67 below */

/* ─── 5. Generic pill / setting-row containers ───────────────────────────────*/
/*
 * Several rows use `flex items-center gap-3 rounded-2xl border px-4 py-3`.
 * When content is long on XS screens the row can clip. We add a min-height
 * and allow the inner text div to shrink below its content size.
 */
.rounded-2xl.border {
  min-height: 0; /* let the browser negotiate height naturally */
}

/* ─── 6. Main content area safe-bottom padding ───────────────────────────────*/
/*
 * pb-nav-safe = calc(4rem + env(safe-area-inset-bottom)).
 * When nav wraps to 2 rows (< 400 px) the nav becomes ~96 px tall.
 * Bump the main padding so content isn't hidden behind it.
 */
@media (max-width: 399px) {
  main.pb-nav-safe,
  main[class*="pb-nav-safe"] {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── 7. Flex-wrap pill groups (day selectors, macro chips) ──────────────────*/
/*
 * `flex gap-1.5 flex-wrap` is already on day-selector buttons — good.
 * We make sure the day buttons never overflow their container on XS.
 */
.flex.gap-1\\.5.flex-wrap > button {
  min-width: 0;
  flex-shrink: 1;
}

/* ─── 8. Scrollable filter tab rows ──────────────────────────────────────────*/
/*
 * Category filter rows use overflow-x-auto touch-pan-x.
 * Ensure they never bleed out of their parent.
 */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ─── 9. Modals / dialogs on very small screens ──────────────────────────────*/
/*
 * sm:max-w-xl dialogs on a 320 px device still render full-width via w-full,
 * but horizontal padding can get lost. Guard against it.
 */
@media (max-width: 399px) {
  [role="dialog"],
  [data-state="open"][class*="max-w"] {
    padding-left: max(env(safe-area-inset-left, 0px), 0px) !important;
    padding-right: max(env(safe-area-inset-right, 0px), 0px) !important;
  }
}

/* ─── 10. Typography scale on XS ─────────────────────────────────────────────*/
@media (max-width: 359px) {
  .text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARCODE SCANNER ENHANCEMENTS
   These inject purely visual polish over the existing camera UI.
   The scanner uses a <video> element inside a rounded container, with
   absolute-positioned overlays.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 11. Animated scan line ─────────────────────────────────────────────── */
/*
 * The existing scan line uses `animate-ping` / CSS from the bundle.
 * We add a classic sweeping green line across the viewfinder.
 * It is injected as a ::before pseudo-element on the video wrapper.
 */
@keyframes nt-scan-sweep {
  0%   { transform: translateY(0%);   opacity: 1; }
  48%  { opacity: 1; }
  50%  { transform: translateY(100%); opacity: 0; }
  50.1%{ transform: translateY(0%);   opacity: 0; }
  52%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 1; }
}

/* The video container is `relative w-full max-w-xs mx-auto rounded-2xl overflow-hidden` */
.relative.w-full.max-w-xs.mx-auto.rounded-2xl.overflow-hidden video {
  /* Ensure video fills the container cleanly */
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Scan sweep line — injected into the aspect-ratio wrapper */
.relative.w-full.max-w-xs.mx-auto.rounded-2xl.overflow-hidden.aspect-\[4\/3\]::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 25%;  /* start in the active crop zone (AT=0.25) */
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 197, 94, 0.0) 10%,
    rgba(34, 197, 94, 0.9) 40%,
    rgba(74, 222, 128, 1.0) 50%,
    rgba(34, 197, 94, 0.9) 60%,
    rgba(34, 197, 94, 0.0) 90%,
    transparent 100%
  );
  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4);
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  /* Sweep within the crop region: from 25% to 75% of the container height */
  animation: nt-scan-sweep 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: top center;
}

/* Hide sweep line when scanner is not in an active scanning phase
   (phases: requesting, confirming, found — show only on ready/confirming) */
/* We can't hook into React state from CSS, so we show it always during camera mode
   and rely on the container being present only when the camera is active */

/* ─── 12. Corner-bracket viewfinder overlay ──────────────────────────────── */
/*
 * Classic 4-corner bracket reticle drawn with CSS box-shadow tricks.
 * Applied as ::before on the same container.
 */
.relative.w-full.max-w-xs.mx-auto.rounded-2xl.overflow-hidden.aspect-\[4\/3\]::before {
  content: '';
  position: absolute;
  /* Centre a box covering ~80% width and 60% height of the viewfinder */
  left: 10%;
  right: 10%;
  top: 18%;
  bottom: 18%;
  pointer-events: none;
  z-index: 11;
  /* 4-corner bracket using outline + box-shadow masking */
  border: 2px solid transparent;
  /* Top-left corner */
  border-top-color: rgba(34, 197, 94, 0.85);
  border-left-color: rgba(34, 197, 94, 0.85);
  border-top-left-radius: 6px;
  /* We use separate pseudo-elements for all 4 corners via a trick:
     draw the TL corner here, then overlay the other 3 with clip-path gradients.
     For simplicity we render all 4 via a repeating gradient border pattern. */
  background:
    linear-gradient(to right,  rgba(34,197,94,0.85) 20px, transparent 20px) top left / 100% 2px no-repeat,
    linear-gradient(to bottom, rgba(34,197,94,0.85) 20px, transparent 20px) top left / 2px 100% no-repeat,
    linear-gradient(to left,   rgba(34,197,94,0.85) 20px, transparent 20px) top right / 100% 2px no-repeat,
    linear-gradient(to bottom, rgba(34,197,94,0.85) 20px, transparent 20px) top right / 2px 100% no-repeat,
    linear-gradient(to right,  rgba(34,197,94,0.85) 20px, transparent 20px) bottom left / 100% 2px no-repeat,
    linear-gradient(to top,    rgba(34,197,94,0.85) 20px, transparent 20px) bottom left / 2px 100% no-repeat,
    linear-gradient(to left,   rgba(34,197,94,0.85) 20px, transparent 20px) bottom right / 100% 2px no-repeat,
    linear-gradient(to top,    rgba(34,197,94,0.85) 20px, transparent 20px) bottom right / 2px 100% no-repeat;
  border: none; /* override the partial border above */
}

/* Pulse the bracket when in confirming state — approximate via the container
   having a sibling/parent we can detect. Best effort since state is in React. */
@keyframes nt-bracket-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ─── 13. Dim vignette around the active crop zone ──────────────────────────*/
/*
 * The scanner crops 5% from each side and 25% from top, scanning 90%×50% area.
 * A subtle vignette darkens the non-scanned edges to guide the user.
 */
.relative.w-full.max-w-xs.mx-auto.rounded-2xl.overflow-hidden {
  /* Vignette via inset box-shadow */
  box-shadow:
    inset 0 0 40px 10px rgba(0, 0, 0, 0.45),
    /* Green glow when confirming — can't target state from CSS directly */
    0 0 0 1px rgba(34, 197, 94, 0.1);
}

/* ─── 14. Smoother phase transitions for the camera status text ──────────── */
/*
 * The hint text ("Hold steady — confirming…" etc.) sits below the viewfinder.
 * Add a fade transition so state changes don't snap.
 */
.text-xs.text-muted-foreground.text-center.max-w-\[220px\] {
  transition: opacity 0.3s ease;
}

/* ─── 15. Confirm-progress bar polish ────────────────────────────────────── */
/*
 * The existing confirm progress indicator uses a simple transform scale.
 * Add a smooth green glow when progress is > 50%.
 */
@keyframes nt-confirm-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 12px rgba(34, 197, 94, 0.9); }
}

/* ─── 16. Better tap targets for scanner toolbar buttons ────────────────────*/
/*
 * Torch and flip-camera buttons are h-9/h-10 rounded-xl.
 * On small phones these need to be at minimum 44×44 for accessibility.
 */
button[aria-label*="torch"],
button[aria-label*="Torch"],
button[aria-label*="flip"],
button[aria-label*="camera"],
button[aria-label*="Camera"],
button[aria-label*="zoom"],
button[aria-label*="Retry camera"],
button[aria-label*="Add manually"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ─── 17. Scanner modal full-height on mobile ───────────────────────────────*/
@media (max-width: 639px) {
  [class*="max-h-\[100dvh\]"] {
    height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOALS SCREEN ENHANCEMENTS
   Visual polish for the Daily Goals page: preset cards, macro bars,
   nutrient inputs, and the calorie breakdown section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 18. Macro progress bars — taller + gradient finish ─────────────────── */
/*
 * The bars are `h-2 rounded-full bg-muted overflow-hidden`.
 * We bump them to h-2.5 and add a subtle shimmer on the fill.
 */
.h-2.rounded-full.bg-muted.overflow-hidden {
  height: 10px !important;
  border-radius: 9999px;
}

/* Protein bar (bg-blue-500) */
.h-full.rounded-full.transition-all.duration-500 {
  position: relative;
  overflow: hidden;
}

/* Shimmer overlay on all macro fill bars */
.h-full.rounded-full.transition-all.duration-500::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: nt-bar-shimmer 2.5s ease-in-out infinite;
}

@keyframes nt-bar-shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* ─── 19. Goal preset card hover/active states ────────────────────────────── */
/*
 * The preset buttons already have `transition-all duration-200` and
 * border-primary on selected. Add a subtle lift on hover and a scale on active.
 */
button.relative.text-left.p-4.rounded-xl.border-2 {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

button.relative.text-left.p-4.rounded-xl.border-2:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

button.relative.text-left.p-4.rounded-xl.border-2:active {
  transform: translateY(0px) scale(0.98);
}

/* Selected preset — green glow */
button.relative.text-left.p-4.rounded-xl.border-2.border-primary {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(34, 197, 94, 0.1);
}

/* ─── 20. Nutrient target input group polish ─────────────────────────────── */
/*
 * The `grid grid-cols-1 sm:grid-cols-2 gap-4` inputs show the unit suffix
 * as an absolute-positioned element. Add a subtle right-side indicator color.
 */
.relative > span.absolute.right-3 {
  color: var(--primary);
  opacity: 0.6;
  font-weight: 500;
}

/* ─── 21. Number inputs — larger touch target on mobile ─────────────────── */
@media (max-width: 639px) {
  input[id^="goal-"] {
    height: 2.75rem !important;
    font-size: 1rem !important;
  }
}

/* ─── 22. Calorie breakdown section — macro label colors ────────────────── */
/*
 * The breakdown rows are plain `text-foreground`. Adding subtle colored
 * dots/labels makes it easier to parse at a glance.
 */

/* Make the macro bar track slightly more visible in dark mode */
.dark .h-2.rounded-full.bg-muted.overflow-hidden,
.dark .h-full.rounded-full.bg-muted.overflow-hidden {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── 23. Save Goals button — success pulse on save ────────────────────── */
@keyframes nt-save-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ─── 24. Preset card macro pill badges ─────────────────────────────────── */
/*
 * The `mt-2 flex gap-3 text-xs text-muted-foreground` macro preview row
 * on each preset card. Wrap items into small pill badges for clarity.
 */
button.relative.text-left.p-4.rounded-xl.border-2 > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

button.relative.text-left.p-4.rounded-xl.border-2 > div:last-child > span {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  padding: 1px 8px;
  font-size: 0.7rem;
  line-height: 1.4;
}

.dark button.relative.text-left.p-4.rounded-xl.border-2 > div:last-child > span {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Selected preset — badge highlight */
button.relative.text-left.p-4.rounded-xl.border-2.border-primary > div:last-child > span {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: var(--primary);
}

/* ─── 25. Goals page on XS — single-column inputs full-width ────────────── */
@media (max-width: 479px) {
  .grid.grid-cols-1.sm\:grid-cols-2.gap-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD ENHANCEMENTS
   Polish for the calorie ring (ZE component), calorie card (dD),
   macro cards (fD), and compact macro rows (pD).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 26. Calorie ring SVG — animated draw-in on mount ──────────────────── */
/*
 * The ring uses strokeDashoffset animated via React inline style (0.5s ease).
 * We add a soft glow on the progress track so the ring pops against dark bg.
 */
@keyframes nt-ring-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.35)); }
  50%       { filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.55)); }
}

/* Target the SVG wrapping the ZE ring — it sits inside the calorie card */
.col-span-full svg circle:last-child,
svg circle[stroke-dasharray] {
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.3));
  transition: filter 0.4s ease;
}

/* ─── 27. Calorie card (dD) — number display refinements ────────────────── */
/*
 * "Calories Today" label, the big number, and the remaining/over line.
 * Add a subtle fade-in animation and tighten line height.
 */
.text-3xl.font-bold.text-foreground.leading-none.tabular-nums {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  /* Smooth count-up appearance */
  transition: color 0.3s ease;
}

/* Remaining calories — emphasise with slightly larger type */
.text-sm.font-semibold.mt-1.text-primary {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

/* Over-goal state — pulse the destructive text */
@keyframes nt-over-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
.text-sm.font-semibold.mt-1.text-destructive {
  animation: nt-over-pulse 2s ease-in-out infinite;
}

/* ─── 28. Macro cards (fD) — elevated hover + progress bar glow ─────────── */
/*
 * `hover:shadow-md transition-shadow duration-200` is already on fD.
 * We amplify the hover shadow and add a color-matched glow under each bar.
 */
.hover\:shadow-md:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.hover\:shadow-md {
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* ─── 29. Dashboard "Calories Today" label — uppercase badge style ───────── */
.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wide {
  letter-spacing: 0.08em;
  font-size: 0.65rem;
}

/* ─── 30. Compact macro rows (pD) progress bars ─────────────────────────── */
/*
 * pD uses `flex-1 min-w-0 space-y-1` with a progress bar inside.
 * The bars are already covered by rule #18 (h-2 bump).
 * Add color-coded left border to each macro row for quick scanning.
 */
.flex-1.min-w-0.space-y-1 {
  padding-left: 0;
}

/* ─── 31. Dashboard date header — subtle gradient underline ──────────────── */
/*
 * The date text ("Wednesday, August 13") sits at the top of the dashboard.
 * Add a faint bottom border to separate it from the cards.
 */

/* ─── 32. Meal section headers — pill style ──────────────────────────────── */
/*
 * Meal section labels (Breakfast, Lunch, etc.) use text-sm font-semibold.
 * Add a colored left accent bar to distinguish sections.
 */

/* ─── 33. Dashboard grid responsiveness on XS ────────────────────────────── */
/*
 * The macro cards are in a grid. On very small screens they should stack.
 * Already handled by the grid-cols-2/sm:grid-cols-4 pattern in the source.
 * Force single column below 360px for better readability.
 */
@media (max-width: 359px) {
  /* Macro card grid — 2 columns minimum, stack if needed */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 34. "kcal remaining" / "kcal over" — animated badge ───────────────── */
/*
 * Add a pill background to the remaining/over line for visual hierarchy.
 */
.text-sm.font-semibold.mt-1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.8rem;
}

.text-sm.font-semibold.mt-1.text-primary {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.text-sm.font-semibold.mt-1.text-destructive {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS SCREEN ENHANCEMENTS  (xle / K7 / U7 / G7 / z7 / V7 / H7)
   Visual polish for the Progress page: chart cards, stat tiles,
   Recharts SVG elements, and the weight-log dialog.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 35. Progress page fade-in animation ───────────────────────────────── */
/*
 * xle wraps everything in `space-y-8 animate-fade-in`.
 * Tailwind may not have animate-fade-in in this build, so we define it.
 */
@keyframes nt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: nt-fade-in 0.4s ease both;
}

/* ─── 36. Progress page heading ─────────────────────────────────────────── */
/*
 * The h1 "Progress" uses `text-3xl font-bold tracking-tight text-foreground`.
 * Already handled by rule 10 scale for XS; add a gradient accent on wider screens.
 */

/* ─── 37. Time-range tab group (7d / 30d / 90d) ─────────────────────────── */
/*
 * vD / bD / xD form a segmented toggle. Enhance the selected segment with a
 * green-tinted background so the active range is immediately obvious.
 */
[data-state="on"].text-xs.px-3,
[aria-pressed="true"].text-xs.px-3 {
  background: rgba(34, 197, 94, 0.12) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 600 !important;
}

/* ─── 38. Chart card (K7) icon badge ────────────────────────────────────── */
/*
 * Each chart card header has `.p-1.5.rounded-md.bg-primary\/10` wrapping the icon.
 * Add a gentle glow that strengthens on card hover.
 */
.p-1\.5.rounded-md.bg-primary\/10 {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hover\:shadow-md:hover .p-1\.5.rounded-md.bg-primary\/10 {
  background-color: rgba(34, 197, 94, 0.18) !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

/* ─── 39. Stat tile cards (U7) — number pop animation ───────────────────── */
/*
 * U7 tiles render inside HC (Card) with `p-5` content.
 * The big stat value is `.text-2xl.font-bold.text-foreground.leading-none`.
 * Add a pop-in and subtle color shift for trend indicators.
 */
.text-2xl.font-bold.text-foreground.leading-none {
  transition: color 0.3s ease;
}

/* Trend indicator row (flex items-center gap-1 mt-2 text-xs font-medium) */
.flex.items-center.gap-1.mt-2.text-xs.font-medium {
  padding: 2px 6px;
  border-radius: 9999px;
  width: fit-content;
  font-size: 0.7rem;
}

/* Green (down = under goal = good) */
.flex.items-center.gap-1.mt-2.text-xs.font-medium.text-primary {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

/* Red (up = over goal = bad) */
.flex.items-center.gap-1.mt-2.text-xs.font-medium.text-destructive {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.15);
  animation: nt-over-pulse 3s ease-in-out infinite;
}

/* Neutral */
.flex.items-center.gap-1.mt-2.text-xs.font-medium.text-muted-foreground {
  background: rgba(0, 0, 0, 0.04);
}
.dark .flex.items-center.gap-1.mt-2.text-xs.font-medium.text-muted-foreground {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── 40. Progress stat grid (G7) — 2-col on XS ─────────────────────────── */
/*
 * G7 uses `grid grid-cols-2 lg:grid-cols-4 gap-4`.
 * On phones < 360px the 2-col grid still squeezes cards. Stack to 1-col.
 */
@media (max-width: 359px) {
  .grid.grid-cols-2.lg\:grid-cols-4.gap-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ─── 41. Recharts chart containers — rounded corners & overflow ─────────── */
/*
 * Recharts renders SVG inside a div with inline height style.
 * Add border-radius and a subtle background to contain the chart cleanly.
 */
[style*="height: 220"],
[style*="height:220"],
[style*="height: 260"],
[style*="height:260"] {
  border-radius: 8px;
  overflow: hidden;
}

/* ─── 42. Recharts SVG tooltip ───────────────────────────────────────────── */
/*
 * mle (custom tooltip) uses `rounded-lg border border-border bg-card px-3 py-2.5 shadow-lg`.
 * Ensure it has proper backdrop and z-index on mobile.
 */
.rounded-lg.border.border-border.bg-card.px-3.shadow-lg.text-sm {
  backdrop-filter: blur(4px);
  z-index: 50;
}

/* ─── 43. Weight chart goal reference line label ─────────────────────────── */
/*
 * The `text-xs text-muted-foreground mt-3` legend under the weight chart:
 * "Solid line = logged entries · Dashed = estimated trend"
 * Style it as a subtle pill note.
 */
.text-xs.text-muted-foreground.mt-3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.7rem;
}
.dark .text-xs.text-muted-foreground.mt-3 {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}

/* ─── 44. "Log Weight" button (progress page header) ────────────────────── */
/*
 * The outline button in the xle header row uses standard Shadcn button.
 * Add a green tint hover to distinguish it from generic outline buttons.
 */

/* ─── 45. q7 "estimated data" info banner ────────────────────────────────── */
/*
 * `flex items-start gap-2 rounded-lg border border-border bg-muted/30 px-4 py-3`
 * Polish: add a left accent stripe and a soft shadow.
 */
.flex.items-start.gap-2.rounded-lg.border.border-border.bg-muted\/30.px-4.py-3 {
  border-left: 3px solid rgba(34, 197, 94, 0.5) !important;
  background: rgba(34, 197, 94, 0.04) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ─── 46. No-data empty state (ble) ─────────────────────────────────────── */
/*
 * `p-4 rounded-2xl bg-muted/50` icon container.
 * Animate a gentle pulse to draw the eye.
 */
@keyframes nt-empty-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.04); opacity: 0.85; }
}

.flex.flex-col.items-center.justify-center.py-20 > div.p-4.rounded-2xl.bg-muted\/50 {
  animation: nt-empty-pulse 3s ease-in-out infinite;
}

/* ─── 47. Preview overlay (opacity-60 pointer-events-none) ──────────────── */
/*
 * When no real data, the charts are shown at 60% opacity with a "Preview" label.
 * Add a frosted-glass tint and a blur to reinforce the locked-state feel.
 */
.opacity-60.pointer-events-none.select-none {
  filter: blur(0.3px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTORY SCREEN ENHANCEMENTS  (eue / Zle / $le / n9 / Cle)
   Visual polish for the History page: date nav header, logged-day list,
   stat summary tiles, and the log-detail view.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 48. History stat tiles (Zle — Days Logged / This Week / Streak) ────── */
/*
 * Each tile: `flex flex-col items-center gap-1 rounded-xl bg-card border
 *             border-border/60 py-3.5 px-2 shadow-xs hover:shadow-sm`
 * Amplify the hover shadow and add a shimmer-like border on hover.
 */
.flex.flex-col.items-center.gap-1.rounded-xl.bg-card.border {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.flex.flex-col.items-center.gap-1.rounded-xl.bg-card.border:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  transform: translateY(-1px);
}

/* Streak value — amber glow when ≥ 3 is conveyed by the icon; add a badge bg */
.text-xl.font-bold.text-foreground.leading-none {
  letter-spacing: -0.5px;
}

/* ─── 49. History logged-day row ($le) ──────────────────────────────────── */
/*
 * `w-full flex items-center gap-3 px-4 py-3 rounded-xl border transition-all`
 * Selected state already has `border-primary/50 bg-primary/5 shadow-sm`.
 * Non-selected: smooth hover. Add a left accent bar on selected rows.
 */
button.w-full.flex.items-center.gap-3.px-4.py-3.rounded-xl.border {
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.12s ease !important;
}

/* Non-selected hover — lift + slight bg */
button.w-full.flex.items-center.gap-3.px-4.py-3.rounded-xl.border:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

/* Selected active — left accent bar via ::before */
button.w-full.flex.items-center.gap-3.px-4.py-3.rounded-xl.border.border-primary\/50::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 3px;
  background: hsl(var(--primary));
  border-radius: 0 3px 3px 0;
}

/* Date-number badge — selected gets primary background (already in React) */
/* Non-selected date badge: `h-10 w-10 rounded-lg bg-muted` — ensure 44×44 tap target */
.h-10.w-10.rounded-lg.shrink-0 {
  min-width: 40px;
  min-height: 40px;
}

/* ─── 50. History mini progress bar inside each day row ─────────────────── */
/*
 * `flex-1 h-1.5 rounded-full bg-muted/60 overflow-hidden`
 * Bump height slightly for better visibility.
 */
.flex-1.h-1\.5.rounded-full.bg-muted\/60.overflow-hidden {
  height: 5px !important;
  border-radius: 9999px;
}

/* ─── 51. "View Progress Charts" navigation button (Zle) ─────────────────── */
/*
 * `w-full flex items-center justify-between gap-3 px-4 py-3 rounded-xl
 *  border border-border/60 bg-card hover:border-primary/30 hover:bg-primary/5`
 * Add a right-arrow animation on hover.
 */
button.w-full.flex.items-center.justify-between.gap-3.px-4.py-3.rounded-xl {
  transition: border-color 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease !important;
}

button.w-full.flex.items-center.justify-between.gap-3.px-4.py-3.rounded-xl:hover {
  box-shadow: 0 3px 12px rgba(34, 197, 94, 0.08);
}

/* ChevronRight inside the "View Progress" button — slide on hover */
button.w-full.flex.items-center.justify-between.gap-3.px-4.py-3.rounded-xl svg {
  transition: transform 0.2s ease !important;
}

button.w-full.flex.items-center.justify-between.gap-3.px-4.py-3.rounded-xl:hover svg {
  transform: translateX(3px);
}

/* ─── 52. History date navigation header (Cle) ───────────────────────────── */
/*
 * The prev/next buttons use `h-9 w-9 shrink-0` and the centre date button
 * uses `flex flex-col items-center gap-0.5 min-w-0 flex-1 rounded-lg px-3 py-2`.
 * Ensure min 44×44 tap targets for the arrow buttons.
 */
button[aria-label="Previous day"],
button[aria-label="Next day"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Active (open) calendar toggle — green ring */
button[aria-expanded="true"].flex.flex-col.items-center {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}

/* ─── 53. History empty state (n9) ──────────────────────────────────────── */
/*
 * `flex flex-col items-center justify-center py-14 text-center space-y-6 animate-fade-in`
 * The animate-fade-in is shared with Progress — already defined in rule 35.
 */

/* ─── 54. History / Progress responsive — stack on narrow phones ──────────── */
/*
 * The Progress grid `grid-cols-1 lg:grid-cols-2 gap-6` is already mobile-first.
 * On XS phones give the chart cards a bit more breathing room.
 */
@media (max-width: 399px) {
  .grid.grid-cols-1.lg\:grid-cols-2.gap-6 {
    gap: 1rem !important;
  }

  /* The History stat tiles (Zle) at grid-cols-3 gap-3 become too narrow on XS */
  .grid.grid-cols-3.gap-3 {
    gap: 0.5rem !important;
  }

  /* Tile text shrinks gracefully */
  .grid.grid-cols-3.gap-3 .text-xl.font-bold {
    font-size: 1.1rem !important;
  }

  .grid.grid-cols-3.gap-3 .text-xs.text-muted-foreground {
    font-size: 0.6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS SCREEN ENHANCEMENTS  (lue / l9 / u9 / d9)
   Visual polish for the Settings page: theme cards, unit toggles,
   settings rows, section cards, and the Danger Zone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 55. Settings page max-width & section spacing ──────────────────────── */
/*
 * lue renders `max-w-2xl mx-auto space-y-8 animate-fade-in`.
 * On narrow phones 2xl = 672px which is fine, but space-y-8 (2rem) between
 * cards wastes vertical space. Tighten slightly on XS.
 */
@media (max-width: 479px) {
  .max-w-2xl.mx-auto.space-y-8 {
    /* Reduce the gap between cards on small phones */
    row-gap: 1.25rem !important;
  }
}

/* ─── 56. Section card header icon badge ─────────────────────────────────── */
/*
 * Each section header has `flex items-center gap-2` with an icon.
 * Add a subtle pill container around icon + title for visual grouping.
 */

/* The icon in every card header is `.h-4.w-4.text-primary` */
/* Wrap effect via the parent `flex items-center gap-2` div */

/* ─── 57. Theme preview cards (l9) ──────────────────────────────────────── */
/*
 * l9 uses `relative w-full text-left rounded-xl border-2 overflow-hidden
 *          transition-all duration-200 group`.
 * Selected: `border-primary shadow-md shadow-primary/10`
 * Non-selected: `border-border hover:border-primary/50 hover:shadow-sm`
 *
 * Enhancements:
 *  - Lift on hover (translateY)
 *  - Scale-down on active
 *  - Stronger glow on selected
 */
button[aria-label$="theme"].relative.w-full.text-left.rounded-xl.border-2 {
  transition: transform 0.15s ease, box-shadow 0.2s ease,
              border-color 0.2s ease !important;
}

button[aria-label$="theme"].relative.w-full.text-left.rounded-xl.border-2:hover {
  transform: translateY(-2px);
}

button[aria-label$="theme"].relative.w-full.text-left.rounded-xl.border-2:active {
  transform: translateY(0) scale(0.98);
}

/* Selected theme card — amplified glow */
button[aria-label$="theme"].relative.w-full.text-left.rounded-xl.border-2[aria-pressed="true"] {
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.15),
    0 4px 20px rgba(34, 197, 94, 0.15) !important;
}

/* Theme cards grid — responsive */
@media (max-width: 399px) {
  /* 3-col theme grid can be tight on 360px — allow wrapping */
  .grid.grid-cols-3.gap-3:has(button[aria-label$="theme"]) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─── 58. Unit toggle (u9) — selected segment glow ─────────────────────── */
/*
 * u9 wraps the pill in `inline-flex rounded-lg border border-border bg-muted/40`.
 * The selected button has `bg-background shadow-sm ring-1 ring-border/50`.
 * Add a green tint to the selected option for clear affordance.
 */
[role="group"].inline-flex.rounded-lg.border.border-border {
  /* Slightly taller for easier mobile tapping */
  padding: 3px !important;
}

[role="group"].inline-flex.rounded-lg.border.border-border button[aria-pressed="true"] {
  background: rgba(34, 197, 94, 0.08) !important;
  color: hsl(var(--primary)) !important;
  ring-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.12), 0 0 0 1px rgba(34, 197, 94, 0.2) !important;
  font-weight: 600 !important;
}

/* Ensure tap targets are accessible */
[role="group"].inline-flex.rounded-lg.border.border-border button {
  min-height: 36px;
  min-width: 48px;
}

/* ─── 59. Settings row (d9) — hover highlight & divider refinement ────────── */
/*
 * d9 = `flex items-center justify-between gap-4 py-3`
 * inside `divide-y divide-border` card content.
 * Add a subtle hover background and transition.
 */
.divide-y.divide-border > .flex.items-center.justify-between.gap-4.py-3 {
  border-radius: 8px;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  transition: background-color 0.15s ease;
}

.divide-y.divide-border > .flex.items-center.justify-between.gap-4.py-3:hover {
  background: rgba(0, 0, 0, 0.025);
}
.dark .divide-y.divide-border > .flex.items-center.justify-between.gap-4.py-3:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* ─── 60. Settings row label & description typography ────────────────────── */
/*
 * Inside d9 the label is plain text and description is text-sm text-muted-foreground.
 * Stack them vertically with better spacing and a stronger label weight.
 */

/* ─── 61. Section card header icon containers ────────────────────────────── */
/*
 * `flex items-center gap-2` with icon + WC (CardTitle `text-base font-semibold`).
 * Wrap the icon in a subtle pill badge for visual anchoring.
 */
.flex.items-center.gap-2 > svg.h-4.w-4.text-primary {
  padding: 4px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.1);
  /* Icon itself is 16px; with 4px padding = 24px total box */
  box-sizing: content-box;
  flex-shrink: 0;
}

/* ─── 62. Section card titles (`text-base font-semibold`) ────────────────── */
/*
 * All card section titles use WC with `text-base font-semibold`.
 * Bump to slightly bolder for better hierarchy.
 */
.text-base.font-semibold {
  font-weight: 650 !important; /* Tailwind doesn't have 650; browser will round to 700 or nearest */
}

/* ─── 63. GC (CardDescription) under each section title ────────────────── */
/*
 * The description uses Shadcn's CardDescription which defaults to text-sm text-muted-foreground.
 * Add a small top margin tweak so it reads as a subtitle, not run-on text.
 */
[data-slot="card-description"] {
  margin-top: 0.125rem;
  font-size: 0.8rem !important;
  line-height: 1.4;
}

/* ─── 64. Danger zone / data section buttons ─────────────────────────────── */
/*
 * The data-management section has destructive buttons.
 * Add a subtle red left-accent and hover state to the danger card.
 */

/* ─── 65. Settings page on XS — responsive row layout ────────────────────── */
/*
 * d9 rows use `justify-between gap-4 py-3`.
 * On very small phones (< 360px) the label + toggle can collide.
 * Allow the row to wrap: label on top, control on bottom-right.
 */
@media (max-width: 359px) {
  .divide-y.divide-border > .flex.items-center.justify-between.gap-4.py-3 {
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
  }

  /* Unit toggles should stay inline but may need to be smaller */
  [role="group"].inline-flex.rounded-lg.border.border-border button {
    min-width: 36px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.8rem !important;
  }
}

/* ─── 66. "Autosave" / auto-save notice under Settings heading ────────────── */
/*
 * The subtitle "All changes are saved automatically."
 * Add a subtle animated green dot to reinforce the live-save UX.
 */
.text-muted-foreground.mt-1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-muted-foreground.mt-1::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
  animation: nt-autosave-pulse 2.5s ease-in-out infinite;
}

@keyframes nt-autosave-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ─── 67. Switch (r9) — enlarge the toggle track on mobile ──────────────── */
/*
 * The switch uses data-size=default which gives h-[18.4px] w-[32px].
 * This is quite small on mobile. Bump it up via a size override.
 * Also: flex-shrink:0 ensures it never gets squashed in tight rows.
 */
[role="switch"] {
  flex-shrink: 0 !important;
  transform: scale(1.15);
  transform-origin: right center;
}

/* ─── 68. Reminders section — reminder item cards ────────────────────────── */
/*
 * Reminder list items use flex-row layout with enabled/disabled state.
 * Add smooth visual feedback on the enabled/disabled toggle.
 */

/* ─── 69. Cloud Sync status badge ────────────────────────────────────────── */
/*
 * The sync status ("synced" / "syncing" / "error" / "offline") is shown as
 * a small indicator. Add appropriate coloring.
 */

/* ─── 70. Settings page max-width center on desktop ─────────────────────── */
/*
 * max-w-2xl is 672px. On desktop the settings page is nicely contained.
 * Add a visual left-border accent on each section card for depth.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   WORKOUTS SCREEN ENHANCEMENTS  (Bde / Rde / Pde / wde)
   Visual polish for the Workouts page: program cards, streak banner,
   exercise rows, set-completion buttons, difficulty badges, and the
   active-program detail view.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 71. Workouts page slide-in animation ───────────────────────────────── */
/*
 * Bde wraps the browse view in `space-y-6 animate-fade-in`.
 * `animate-fade-in` is already defined in rule 35 — reused here.
 */

/* Stagger-in for exercise rows (Pde uses `animate-stagger-in`) */
@keyframes nt-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-stagger-in {
  animation: nt-stagger-in 0.3s ease both;
}

/* ─── 72. Streak banner card ─────────────────────────────────────────────── */
/*
 * Streak card: `flex items-center gap-3 rounded-2xl border px-4 py-3 flex-1`
 * When active (streak > 0): `border-orange-500/30 bg-orange-500/5`
 * Polish: pulsing orange glow on the icon when streak is active.
 */
@keyframes nt-streak-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}

/* The streak icon container is `h-10 w-10 rounded-xl flex items-center justify-center shrink-0` */
/* When streak > 0 it has `bg-orange-500/15` — add the glow */
.h-10.w-10.rounded-xl.flex.items-center.justify-center.shrink-0.bg-orange-500\/15 {
  animation: nt-streak-glow 2s ease-in-out infinite;
}

/* Streak card hover lift */
.flex.items-center.gap-3.rounded-2xl.border.px-4.py-3.flex-1 {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.flex.items-center.gap-3.rounded-2xl.border.px-4.py-3.flex-1:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

/* ─── 73. Program cards (Rde) ────────────────────────────────────────────── */
/*
 * Program cards in the grid use HC (Card) with `hover:shadow-md`.
 * Already handled by rule 28; add category-color top accent stripe via ::before.
 *
 * Difficulty badges:
 *   beginner:     bg-green-500/15 text-green-600
 *   intermediate: bg-amber-500/15 text-amber-600
 *   advanced:     bg-red-500/15   text-red-600
 *
 * Polish:
 *  - Difficulty badge gets a stronger background + border
 *  - Program name line-clamp maintained, but add font-size boost on large screens
 *  - Category icon badge gets a subtle shadow
 */

/* Difficulty badge boost — beginner */
.bg-green-500\/15.text-green-600,
.bg-green-500\/15.dark\:text-green-400 {
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-weight: 600;
}

/* Difficulty badge boost — intermediate */
.bg-amber-500\/15.text-amber-600,
.bg-amber-500\/15.dark\:text-amber-400 {
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-weight: 600;
}

/* Difficulty badge boost — advanced */
.bg-red-500\/15.text-red-600,
.bg-red-500\/15.dark\:text-red-400 {
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-weight: 600;
}

/* ─── 74. Active program highlight card ──────────────────────────────────── */
/*
 * When a program is actively in progress the card gets a primary-bordered card.
 * Add a green glow to visually distinguish it from library cards.
 */
[data-active-program="true"],
.border-primary.bg-primary\/5 {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12), 0 4px 16px rgba(34, 197, 94, 0.08) !important;
}

/* ─── 75. Program progress bar (week completion) ─────────────────────────── */
/*
 * Program card has a progress bar: `h-1.5 rounded-full bg-muted overflow-hidden`
 * with a fill `h-full rounded-full bg-primary transition-all duration-700`.
 * Add the shimmer from rule 18 and bump height slightly.
 */
.h-1\.5.rounded-full.bg-muted.overflow-hidden {
  height: 5px !important;
  border-radius: 9999px;
}

/* ─── 76. Exercise row (Pde) — hover state ───────────────────────────────── */
/*
 * Pde renders `flex items-start gap-3 py-2.5 animate-stagger-in`.
 * These rows are inside a list separated by `divide-y`.
 * Add a hover background and a left accent on hover for scannability.
 */
.flex.items-start.gap-3.py-2\.5.animate-stagger-in {
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
  transition: background-color 0.15s ease;
}

.flex.items-start.gap-3.py-2\.5.animate-stagger-in:hover {
  background: rgba(0, 0, 0, 0.025);
}
.dark .flex.items-start.gap-3.py-2\.5.animate-stagger-in:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* Exercise number bubble `h-6 w-6 rounded-full bg-muted` */
.h-6.w-6.rounded-full.bg-muted {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ─── 77. Set-completion buttons (wde) ───────────────────────────────────── */
/*
 * `h-11 w-11 rounded-xl flex items-center justify-center border-2 active:scale-95`
 * Completed: `bg-primary border-primary text-primary-foreground scale-105`
 * Incomplete: `border-border hover:border-primary/50 hover:bg-primary/5`
 *
 * Enhancements:
 *  - Completed state gets a green drop-shadow glow
 *  - Hover state gets a faster border transition
 *  - Ensure 44×44 tap target (already 44px — confirm via min)
 */
.h-11.w-11.rounded-xl.flex.items-center.justify-center.shrink-0 {
  min-width: 44px;
  min-height: 44px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* Completed set button — green glow pulse */
@keyframes nt-set-complete-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  60%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.h-11.w-11.rounded-xl.flex.items-center.justify-center.shrink-0.bg-primary {
  animation: nt-set-complete-glow 0.5s ease forwards;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ─── 78. Day type badge (training / rest / active-recovery) ─────────────── */
/*
 * Day row badges (from jde):
 *   training:        bg-primary/10 border-primary/20 text-primary
 *   rest:            bg-muted/60   border-border      text-muted-foreground
 *   active-recovery: bg-teal-500/10 border-teal-500/20 text-teal-600
 * Bump font-weight and add subtle glow on training days.
 */
.bg-primary\/10.border-primary\/20.text-primary {
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.bg-teal-500\/10.border-teal-500\/20.text-teal-600 {
  font-weight: 600;
}

/* ─── 79. Workout program grid — responsive ──────────────────────────────── */
/*
 * Programs are displayed in a grid. On narrow phones ensure cards don't
 * overflow and have adequate touch targets.
 */
@media (max-width: 479px) {
  /* Program grid — force single column on XS so cards aren't crammed */
  .grid.grid-cols-1.sm\:grid-cols-2.gap-4,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 80. "Create Program" / CTA button highlight ───────────────────────── */
/*
 * The header-area "Create Program" button uses `shrink-0 gap-2`.
 * No special class to target — covered by global button hover rules.
 */

/* ─── 81. Workout detail sheet — week/day header ────────────────────────── */
/*
 * The detail view (when f === 'detail') renders `space-y-6`.
 * Week headers and day accordion rows use various bg-muted/border patterns.
 * Add visual depth to the week group headers.
 */

/* Week number header — `text-xs font-semibold text-muted-foreground uppercase tracking-widest` */
.text-xs.font-semibold.text-muted-foreground.uppercase.tracking-widest {
  letter-spacing: 0.12em;
  opacity: 0.7;
}

/* ─── 82. Category color icon badge ──────────────────────────────────────── */
/*
 * G9 maps categories to icon colors (text-green-500, text-blue-500, etc.).
 * The icon is wrapped in a small `p-2 rounded-lg` container.
 * Add a matching background tint.
 */
.p-2.rounded-lg.bg-muted {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hover\:shadow-md:hover .p-2.rounded-lg.bg-muted {
  background: rgba(34, 197, 94, 0.06) !important;
}

/* ─── 83. Workouts empty state ───────────────────────────────────────────── */
/*
 * Empty state icon containers use `p-4 rounded-2xl bg-muted/50` (same as ble).
 * Rule 46 already animates those — shared. Add specific workout icon bounce.
 */
@keyframes nt-workout-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.flex.flex-col.items-center.justify-center.py-14 > div.p-4.rounded-2xl,
.flex.flex-col.items-center.justify-center.py-20 > div.p-4.rounded-2xl {
  animation: nt-workout-bounce 3s ease-in-out infinite;
}

/* ─── 84. Workouts page on XS — spacing tweaks ───────────────────────────── */
@media (max-width: 399px) {
  /* Stats row: stack streak + reminders vertically */
  .flex.flex-col.sm\:flex-row.gap-3 {
    gap: 0.625rem !important;
  }

  /* Day training badge text — shrink if needed */
  .bg-primary\/10.border-primary\/20.text-primary,
  .bg-muted\/60.border-border.text-muted-foreground {
    font-size: 0.65rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
}