/*
 * 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;
  }
}