/*
 * 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.
 */

/* ============================================
   Sidebar Navigation Styles
   ============================================ */

/* Sidebar transition for smooth width changes */
.sidebar-transition {
  transition: width 200ms ease-in-out;
}

/* Sidebar label transitions */
.sidebar-label {
  transition: opacity 150ms ease-in-out, margin-left 150ms ease-in-out;
}

/* Sidebar submenu transitions */
.sidebar-submenu {
  transition: max-height 200ms ease-in-out, opacity 150ms ease-in-out;
}

/* Sidebar submenu toggle chevron rotation */
.submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Sidebar collapsed state */
aside[data-controller="sidebar"].w-20 {
  width: 5rem; /* 80px */
}

/* Sidebar expanded state */
aside[data-controller="sidebar"].w-52 {
  width: 13rem; /* 208px */
}

/* Adjust main content when sidebar is expanded (on hover or pinned) */
@media (min-width: 1024px) {
  main {
    transition: padding-left 200ms ease-in-out;
  }
}

/* ============================================
   Bottom Tab Bar Styles (Mobile)
   ============================================ */

/* Safe area padding for notched phones (iPhone X+) */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Bottom tab item transitions */
.bottom-tab-item {
  transition: color 150ms ease-in-out, transform 100ms ease-in-out;
}

.bottom-tab-item:active {
  transform: scale(0.95);
}

/* Combat button floating circle effect */
nav[data-controller="bottom-nav"] .bottom-tab-item:nth-child(3) .relative > .absolute {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Comm Panel Terminal Styles
   ============================================ */

/* CRT scanline effect (subtle) */
.comm-panel-crt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 10;
}

/* Terminal glow effect */
.comm-panel-glow {
  box-shadow:
    inset 0 0 30px rgba(34, 197, 94, 0.1),
    0 0 30px rgba(34, 197, 94, 0.1);
}

/* Slide in from left animation */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out to left animation */
@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.2s ease-out forwards;
}

.animate-slide-out-left {
  animation: slideOutLeft 0.2s ease-in forwards;
}

/* Mobile bottom sheet slide up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

/* ============================================
   Build Button Animations
   ============================================ */

/* Pulsate/vibrate animation for build buttons */
@keyframes buildPulsate {
  0%, 100% {
    transform: scale(1) translateX(0);
  }
  10% {
    transform: scale(1.02) translateX(-1px);
  }
  20% {
    transform: scale(0.98) translateX(1px);
  }
  30% {
    transform: scale(1.02) translateX(-1px);
  }
  40% {
    transform: scale(0.98) translateX(1px);
  }
  50% {
    transform: scale(1.01) translateX(0);
  }
  60% {
    transform: scale(0.99) translateX(-1px);
  }
  70% {
    transform: scale(1.01) translateX(1px);
  }
  80% {
    transform: scale(0.99) translateX(-1px);
  }
  90% {
    transform: scale(1.01) translateX(1px);
  }
}

/* When building: pulsate the button for ~2 seconds */
.is-building {
  animation: buildPulsate 0.5s ease-in-out 4;
}

/* Shake animation for validation errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

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

/* ============================================
   Instant Tooltips (CSS-only, no delay)
   ============================================ */

/* Tooltip container */
[data-tooltip] {
  position: relative;
}

/* Tooltip bubble */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.9);
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  z-index: 50;
  margin-bottom: 4px;
}

/* Show tooltip on hover */
[data-tooltip]:hover::after {
  opacity: 1;
}

/* Tooltip arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  z-index: 50;
}

[data-tooltip]:hover::before {
  opacity: 1;
}

/* ============================================
   PizzINT-Inspired Terminal Effects
   ============================================ */

/* --- Blinking Animations --- */

/* Slow blink for status indicators */
@keyframes blink-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.blink-slow {
  animation: blink-slow 2s ease-in-out infinite;
}

/* Fast blink for urgent alerts */
@keyframes blink-fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.blink-fast {
  animation: blink-fast 0.5s ease-in-out infinite;
}

/* Cursor blink (terminal style) */
@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink-cursor {
  animation: blink-cursor 1s step-end infinite;
}

/* --- Pulse/Glow Animations --- */

/* Subtle pulse glow */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
    opacity: 0.9;
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Text glow pulse */
@keyframes text-pulse {
  0%, 100% {
    text-shadow: 0 0 5px currentColor;
  }
  50% {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  }
}

.text-pulse {
  animation: text-pulse 2s ease-in-out infinite;
}

/* Border pulse for alerts */
@keyframes border-pulse {
  0%, 100% {
    border-color: currentColor;
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 3px currentColor;
  }
}

.border-pulse {
  animation: border-pulse 1.5s ease-in-out infinite;
}

/* --- Terminal Text Effects --- */

/* Terminal text glow (static) */
.terminal-glow {
  text-shadow: 0 0 10px currentColor;
}

/* Stronger glow for headers */
.terminal-glow-strong {
  text-shadow: 0 0 5px currentColor, 0 0 15px currentColor, 0 0 25px currentColor;
}

/* --- CRT Monitor Effects --- */

/* Scanline overlay (apply to container with position:relative) */
.crt-scanlines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0.08) 2px
  );
  pointer-events: none;
  z-index: 10;
}

/* Screen flicker - noticeable but not annoying */
@keyframes screen-flicker {
  0% { opacity: 1; }
  5% { opacity: 0.94; }
  10% { opacity: 1; }
  15% { opacity: 0.98; }
  20% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0.92; }
  52% { opacity: 1; }
  75% { opacity: 1; }
  76% { opacity: 0.95; }
  77% { opacity: 0.98; }
  78% { opacity: 1; }
  100% { opacity: 1; }
}

.crt-flicker {
  animation: screen-flicker 3s ease-in-out infinite;
}

/* CRT color fringing / chromatic aberration on text */
.crt-effect {
  text-shadow:
    0.5px 0 0 rgba(255, 0, 0, 0.3),
    -0.5px 0 0 rgba(0, 255, 255, 0.3);
}

/* Animated scanline that moves down the screen */
@keyframes scanline-move {
  0% { top: -10%; }
  100% { top: 110%; }
}

.crt-effect::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100vw;
  height: 10px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  animation: scanline-move 8s linear infinite;
  pointer-events: none;
  z-index: 9998;
}

/* CRT screen curve effect (subtle vignette) */
.crt-vignette {
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 0, 0, 0.2);
}

/* Combined CRT effect class - works on body element */
.crt-effect::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0.08) 2px
  );
  pointer-events: none;
  z-index: 9999;
}

/* --- Ticker/Marquee Animations --- */

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-scroll {
  animation: ticker-scroll var(--ticker-duration, 30s) linear infinite;
}

.ticker-scroll:hover {
  animation-play-state: paused;
}

/* --- Status Indicator Animations --- */

/* Scanning animation for loading states */
@keyframes scanning {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.scanning {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(74, 222, 128, 0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: scanning 2s linear infinite;
}

/* Progress fill animation */
@keyframes progress-fill {
  from { width: 0; }
}

.animate-fill {
  animation: progress-fill 0.5s ease-out;
}

/* --- Typewriter Effect --- */

@keyframes typewriter-cursor {
  0%, 100% { border-right-color: currentColor; }
  50% { border-right-color: transparent; }
}

.typewriter-cursor {
  border-right: 2px solid currentColor;
  animation: typewriter-cursor 0.7s step-end infinite;
}

/* --- Heat Level Specific --- */

/* Heat level bar gradient backgrounds */
.heat-cold { background: linear-gradient(90deg, #22c55e 0%, #22c55e 100%); }
.heat-warm { background: linear-gradient(90deg, #22c55e 0%, #eab308 100%); }
.heat-elevated { background: linear-gradient(90deg, #eab308 0%, #f97316 100%); }
.heat-hot { background: linear-gradient(90deg, #f97316 0%, #ef4444 100%); }
.heat-critical { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }

/* --- Sparkline Container --- */

.sparkline {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 16px;
}

.sparkline-bar {
  width: 3px;
  background: currentColor;
  border-radius: 1px 1px 0 0;
  transition: height 0.2s ease-out;
}

/* --- Boot Sequence --- */

@keyframes boot-line {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.boot-line {
  opacity: 0;
  animation: boot-line 0.15s ease-out forwards;
}

/* Staggered delays for boot lines */
.boot-line:nth-child(1) { animation-delay: 0s; }
.boot-line:nth-child(2) { animation-delay: 0.1s; }
.boot-line:nth-child(3) { animation-delay: 0.2s; }
.boot-line:nth-child(4) { animation-delay: 0.3s; }
.boot-line:nth-child(5) { animation-delay: 0.4s; }
.boot-line:nth-child(6) { animation-delay: 0.5s; }
.boot-line:nth-child(7) { animation-delay: 0.6s; }
.boot-line:nth-child(8) { animation-delay: 0.7s; }

/* ============================================
   Navigation Button Animations (PizzINT/Terminal Style)
   ============================================ */

/* --- Nav Link Base Styles --- */

/* Sidebar nav link with terminal glow on hover */
.nav-link {
  position: relative;
  transition: all 150ms ease-out;
}

.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: all 150ms ease-out;
}

/* Hover state - green glow appears */
.nav-link:hover {
  background: rgba(34, 197, 94, 0.08);
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.nav-link:hover::before {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34, 197, 94, 0.5);
}

.nav-link:hover .nav-icon {
  filter: drop-shadow(0 0 4px currentColor);
}

/* Active state - solid indicator with pulse */
.nav-link--active {
  background: rgba(34, 197, 94, 0.15) !important;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.nav-link--active::before {
  background: #4ade80 !important;
  box-shadow: 0 0 10px #4ade80, 0 0 20px rgba(74, 222, 128, 0.6) !important;
  animation: nav-indicator-pulse 2s ease-in-out infinite;
}

.nav-link--active .nav-icon {
  filter: drop-shadow(0 0 6px currentColor);
}

/* Nav indicator pulse animation */
@keyframes nav-indicator-pulse {
  0%, 100% {
    box-shadow: 0 0 10px #4ade80, 0 0 20px rgba(74, 222, 128, 0.6);
  }
  50% {
    box-shadow: 0 0 15px #4ade80, 0 0 30px rgba(74, 222, 128, 0.8);
  }
}

/* Click/tap animation - quick press effect */
.nav-link:active {
  transform: scale(0.97);
  background: rgba(34, 197, 94, 0.2);
}

/* --- Sidebar Scanline Sweep on Hover --- */

@keyframes nav-scanline {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.6), transparent);
  opacity: 0;
  pointer-events: none;
}

.nav-link:hover::after {
  animation: nav-scanline 0.4s ease-out;
}

/* --- Top Nav Button Styles --- */

.topnav-btn {
  position: relative;
  transition: all 150ms ease-out;
  border-radius: 0.5rem;
}

.topnav-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: #4ade80;
  transition: transform 200ms ease-out;
  box-shadow: 0 0 8px #4ade80;
}

.topnav-btn:hover {
  color: #4ade80;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.topnav-btn:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.topnav-btn:hover svg,
.topnav-btn:hover .nav-icon {
  filter: drop-shadow(0 0 4px currentColor);
}

/* Active top nav button */
.topnav-btn--active {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.1);
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

.topnav-btn--active::after {
  transform: translateX(-50%) scaleX(1);
  animation: topnav-glow-pulse 2s ease-in-out infinite;
}

.topnav-btn--active svg,
.topnav-btn--active .nav-icon {
  filter: drop-shadow(0 0 5px currentColor);
}

@keyframes topnav-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 8px #4ade80;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 15px #4ade80, 0 0 25px rgba(74, 222, 128, 0.5);
    opacity: 0.9;
  }
}

/* Press effect */
.topnav-btn:active {
  transform: scale(0.95);
  background: rgba(34, 197, 94, 0.2);
}

/* --- Bottom Tab Bar Enhanced Styles --- */

.bottom-tab {
  position: relative;
  transition: all 150ms ease-out;
}

/* Active indicator line at top */
.bottom-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: #4ade80;
  transition: transform 200ms ease-out;
  border-radius: 0 0 2px 2px;
}

.bottom-tab--active::before {
  transform: translateX(-50%) scaleX(1);
  box-shadow: 0 0 8px #4ade80, 0 2px 12px rgba(74, 222, 128, 0.4);
  animation: bottom-tab-glow 2s ease-in-out infinite;
}

@keyframes bottom-tab-glow {
  0%, 100% {
    box-shadow: 0 0 8px #4ade80, 0 2px 12px rgba(74, 222, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 12px #4ade80, 0 4px 20px rgba(74, 222, 128, 0.6);
  }
}

/* Active state glow on icon */
.bottom-tab--active svg {
  filter: drop-shadow(0 0 6px currentColor);
}

/* Tap ripple effect */
@keyframes tap-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.bottom-tab:active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgba(74, 222, 128, 0.3);
  border-radius: 50%;
  animation: tap-ripple 0.3s ease-out;
  pointer-events: none;
}

/* Combat button special treatment */
.bottom-tab--combat .combat-orb {
  transition: all 200ms ease-out;
}

.bottom-tab--combat:hover .combat-orb,
.bottom-tab--combat.bottom-tab--active .combat-orb {
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6), 0 0 30px rgba(239, 68, 68, 0.3);
}

.bottom-tab--combat.bottom-tab--active .combat-orb {
  animation: combat-pulse 1.5s ease-in-out infinite;
}

@keyframes combat-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6), 0 0 30px rgba(239, 68, 68, 0.3);
    scale: 1;
  }
  50% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 0 40px rgba(239, 68, 68, 0.5);
    scale: 1.02;
  }
}

/* Pipeline flow arrow pulse for bottlenecks */
@keyframes pipeline-pulse-red {
  0%, 100% {
    color: rgb(75, 85, 99); /* gray-600 */
  }
  50% {
    color: rgb(239, 68, 68); /* red-500 */
  }
}

.pipeline-pulse-red {
  animation: pipeline-pulse-red 2s ease-in-out infinite;
}

/* --- Sublink/Submenu Animations --- */

.nav-sublink {
  position: relative;
  transition: all 150ms ease-out;
}

.nav-sublink::before {
  content: ">";
  position: absolute;
  left: -12px;
  opacity: 0;
  color: #4ade80;
  font-family: monospace;
  transition: all 150ms ease-out;
  text-shadow: 0 0 4px #4ade80;
}

.nav-sublink:hover::before,
.nav-sublink--active::before {
  opacity: 1;
  left: -8px;
}

.nav-sublink--active {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.nav-sublink--active::after {
  content: "_";
  animation: blink-cursor 0.7s step-end infinite;
  margin-left: 2px;
  color: #4ade80;
}

/* --- Chevron Animation (submenu toggle) --- */

.nav-chevron {
  transition: transform 200ms ease-out;
}

.nav-chevron--expanded {
  transform: rotate(90deg);
}

/* Glow on chevron when submenu open */
.nav-chevron--expanded svg {
  filter: drop-shadow(0 0 4px #4ade80);
  color: #4ade80;
}

/* --- Terminal Selection Flash --- */

@keyframes terminal-select {
  0% {
    background: rgba(74, 222, 128, 0.4);
  }
  100% {
    background: rgba(74, 222, 128, 0.1);
  }
}

.nav-link:focus-visible,
.topnav-btn:focus-visible,
.bottom-tab:focus-visible {
  outline: none;
  animation: terminal-select 0.3s ease-out;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5);
}

/* --- Notification Badge Pulse --- */

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}

.nav-badge {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* --- Divider Glow --- */

.nav-divider {
  position: relative;
  background: linear-gradient(to bottom, transparent, #374151, transparent);
}

.nav-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(74, 222, 128, 0.2), transparent);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.nav-divider:hover::after {
  opacity: 1;
}

/* ============================================
   Caution/Warning Animation
   ============================================ */

/* Caution pulse - yellow to darker yellow */
@keyframes caution-pulse {
  0%, 100% {
    color: #eab308; /* yellow-500 */
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.5));
  }
  50% {
    color: #a16207; /* yellow-700 */
    filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.8));
  }
}

.animate-caution-pulse {
  animation: caution-pulse 2s ease-in-out infinite;
}