/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ButtonComponent CSS */
.button__text::after {
  display: block;
  content: attr(data-text);
  font-weight: 500;
  height: 0px;
  overflow: hidden;
  visibility: hidden;
}

.button__text {
  text-wrap: nowrap;
}

.button {
  text-wrap: nowrap;
}

/* DropdownComponent CSS */
.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

/* Dropdown menu performance optimizations */
.dropdown-menu {
  z-index: 50;
  will-change: transform;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
}

.dropdown-item:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.dropdown-item:hover {
  background-color: rgb(63 63 70);
}

.dropdown-item:focus {
  background-color: rgb(63 63 70);
  outline: none;
}

.dropdown-item:active {
  background-color: rgb(82 82 91);
}

/* Color variants */
.dropdown-item-destructive {
  color: rgb(248 113 113);
}

.dropdown-item-destructive:hover {
  background-color: rgba(127 29 29, 0.3);
  color: rgb(252 165 165);
}

.dropdown-item-primary {
  color: rgb(96 165 250);
}

.dropdown-item-primary:hover {
  background-color: rgba(30 58 138, 0.3);
  color: rgb(147 197 253);
}

.dropdown-item-neutral {
  color: rgb(212 212 216);
}

.dropdown-item-neutral:hover {
  background-color: rgb(63 63 70);
  color: rgb(228 228 231);
}

/* Disabled state */
.dropdown-item:disabled,
.dropdown-item.disabled {
  color: rgb(107 114 128);
  cursor: not-allowed;
}

.dropdown-item:disabled:hover,
.dropdown-item.disabled:hover {
  background-color: transparent;
  color: rgb(107 114 128);
}

/* Divider styling */
.dropdown-divider {
  border-top-width: 1px;
  border-color: rgb(63 63 70);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Icons in dropdown items */
.dropdown-item svg {
  flex-shrink: 0;
}

/* Typography System */
:root {
  /* Font families */
  --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Font colors for dark theme */
  --text-primary: rgb(255 255 255);      /* white */
  --text-secondary: rgb(156 163 175);    /* gray-400 */
  --text-tertiary: rgb(107 114 128);     /* gray-500 */
  --text-muted: rgb(75 85 99);           /* gray-600 */
  
  /* Status colors */
  --text-accent: rgb(96 165 250);        /* blue-400 */
  --text-success: rgb(52 211 153);       /* emerald-400 */
  --text-warning: rgb(251 191 36);       /* amber-400 */
  --text-danger: rgb(248 113 113);       /* red-400 */
}

/* Display Typography */
.display-large {
  font-size: 3.75rem;    /* text-6xl */
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.display-medium {
  font-size: 3rem;       /* text-5xl */
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.display-small {
  font-size: 2.25rem;    /* text-4xl */
  line-height: 2.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

/* Headline Typography */
.headline-large {
  font-size: 2rem;       /* text-3xl */
  line-height: 2.25rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.headline-medium {
  font-size: 1.5rem;     /* text-2xl */
  line-height: 2rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.headline-small {
  font-size: 1.25rem;    /* text-xl */
  line-height: 1.75rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

/* Title Typography */
.title-large {
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.title-medium {
  font-size: 1rem;       /* text-base */
  line-height: 1.5rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.title-small {
  font-size: 0.875rem;   /* text-sm */
  line-height: 1.25rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

/* Body Typography */
.body-large {
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.body-medium {
  font-size: 1rem;       /* text-base */
  line-height: 1.5rem;
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.body-small {
  font-size: 0.875rem;   /* text-sm */
  line-height: 1.25rem;
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  font-family: var(--font-primary);
}

.body-xs {
  font-size: 0.75rem;    /* text-xs */
  line-height: 1rem;
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  font-family: var(--font-primary);
}

/* Label Typography */
.label-large {
  font-size: 1rem;       /* text-base */
  line-height: 1.25rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.label-medium {
  font-size: 0.875rem;   /* text-sm */
  line-height: 1.125rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

.label-small {
  font-size: 0.75rem;    /* text-xs */
  line-height: 1rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  font-family: var(--font-primary);
}

/* Code Typography */
.code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-accent);
  background-color: rgb(31 41 55 / 0.5);  /* gray-800/50 */
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Color Modifiers */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }
.text-danger { color: var(--text-danger); }

/* Weight Modifiers */
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }

/* Base Font Family */
body, html {
  font-family: var(--font-primary);
}

/* Font Family Utilities */
.font-primary { 
  font-family: var(--font-primary); 
}

.font-mono { 
  font-family: var(--font-mono); 
}

/* Archive Toggle Animations */
.archive-toggle {
  transition: background-color 0.4s ease;
}

.archive-toggle-knob {
  transition: transform 0.4s ease;
}

/* Retros Grid Fade and Slide Animation */
.retros-grid {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .archive-toggle,
  .archive-toggle-knob,
  .retros-grid {
    transition: none;
  }
}

/* Emotion Fireworks Animation */
.emotion-fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.firework {
  position: absolute;
  font-size: 2rem;
  animation: firework 2s ease-out forwards;
  opacity: 0;
}

@keyframes firework {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  15% {
    opacity: 1;
    transform: translateY(-50px) scale(1.2);
  }
  30% {
    opacity: 1;
    transform: translateY(-80px) scale(1.5);
  }
  45% {
    opacity: 1;
    transform: translateY(-100px) scale(1.8);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-120px) scale(2) rotate(360deg);
  }
  80% {
    opacity: 0.4;
    transform: translateY(-140px) scale(2.5) rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-160px) scale(3) rotate(1080deg);
  }
}

.firework.burst {
  animation: firework-burst 1.5s ease-out forwards;
}

@keyframes firework-burst {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.5) rotate(180deg);
  }
  40% {
    opacity: 1;
    transform: scale(2) rotate(360deg);
  }
  60% {
    opacity: 0.8;
    transform: scale(2.5) rotate(540deg);
  }
  80% {
    opacity: 0.4;
    transform: scale(3) rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: scale(4) rotate(900deg);
  }
}

.celebration-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10000;
  animation: celebration-popup 3s ease-out forwards;
  pointer-events: none;
}

@keyframes celebration-popup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .firework,
  .celebration-message {
    animation: none;
    opacity: 0;
  }
}

/* ============================== */
/* Polish: shared motion utilities */
/* ============================== */

/* Turbo navigation progress bar — app teal instead of the default blue */
body .turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #14b8a6, #2dd4bf) !important;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
  border-radius: 0 2px 2px 0;
}

/* Content arriving over Action Cable rises in briefly. The class is applied
   by JS only to elements that didn't exist before the update, so initial
   page loads never replay the animation. */
@keyframes streamed-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.streamed-in {
  /* backwards (not both): release the transform at the end so inline
     transforms from dragging/sorting aren't overridden forever */
  animation: streamed-in 0.2s ease-out backwards;
}

/* Live counters pulse once when their value changes */
@keyframes count-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.count-bump {
  display: inline-block;
  animation: count-bump 0.3s ease;
}

/* Action menus pop in (fade with a slight rise) and fade out in place.
   Positioning is applied with an inline transform; the animation shifts with
   the separate `translate` property so the two compose instead of the
   keyframe replacing the computed position. Classes are managed by
   dropdown_controller.js (open adds .dropdown-enter; close adds
   .dropdown-exit and defers `hidden` until the fade ends). */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.dropdown-enter {
  animation: dropdown-enter 0.16s ease-out;
}

@keyframes dropdown-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dropdown-exit {
  animation: dropdown-exit 0.12s ease-in forwards;
}

/* Header presence stack: overlapping theme-colored initials, a gentle
   staggered breathe so the group looks alive, and a hover tooltip with the
   person's full name. Built by retro_subscription_controller.js. */
.presence-avatar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  z-index: 1;
  animation: presence-pulse 3.2s ease-in-out infinite;
}

.presence-avatar + .presence-avatar {
  margin-left: -0.4rem; /* ~20% overlap of the 32px circle */
}

/* Hovered avatar and its tooltip rise above neighboring overlaps, and the
   breathe pauses so the tooltip holds steady under the cursor */
.presence-avatar:hover {
  z-index: 10;
  animation-play-state: paused;
}

.presence-avatar-circle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgb(39 39 42);
  font-size: 11px;
  font-weight: 500;
  color: rgb(255 255 255);
  user-select: none;
}

@keyframes presence-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

.presence-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: rgb(39 39 42);
  border: 1px solid rgb(63 63 70);
  color: rgb(255 255 255);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, translate 0.15s ease;
  z-index: 60;
}

.presence-avatar:hover .presence-tip {
  opacity: 1;
  translate: -50% 0;
}

/* Column spotlight / focus mode. The controller adds .spotlight-on to the
   columns row and .spotlight-active to the chosen tile; everything else on
   the row (including the add-column tile) recedes. */
.spotlight-on > * {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.spotlight-on > *:not(.spotlight-active) {
  opacity: 0.35;
  filter: grayscale(0.4);
}

.spotlight-active .spotlight-toggle {
  color: rgb(251 191 36);
  background: rgb(251 191 36 / 0.15);
}

/* One-time board entrance: cards cascade in with a staggered per-card delay
   (style="animation-delay: …ms" set server-side). Initial page loads only —
   broadcast-replaced lists intentionally omit this class. */
@keyframes board-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.board-enter {
  /* backwards holds the from-state during the stagger delay and releases
     the transform afterwards — never overriding drag/sort transforms */
  animation: board-enter 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .streamed-in,
  .count-bump,
  .board-enter,
  .dropdown-enter,
  .dropdown-exit {
    animation: none;
  }

  .spotlight-on > * {
    transition: none;
  }

  .presence-avatar {
    animation: none;
  }

  body .turbo-progress-bar {
    transition: none;
  }
}