frontend/app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --font-sans: "Inter", "Public Sans", sans-serif;

  /* Refined Nuxt Green scale */
  --color-green-50: #f0fdf6;
  --color-green-100: #dcfce9;
  --color-green-200: #bbf7d4;
  --color-green-300: #86efba;
  --color-green-400: #4ade8d;
  --color-green-500: #00dc82;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;

  --color-glass-border: rgba(255, 255, 255, 0.6);
  --color-glass-bg: rgba(255, 255, 255, 0.4);
}

/* ─── Base ─────────────────────────────────────────────────────── */
body {
  background-color: #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

/* ─── Noise texture ─────────────────────────────────────────────── */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}

/* ─── Glass primitives ──────────────────────────────────────────── */
.premium-glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.32) 100%
  );
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.025),
    0 12px 28px -6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.glass-dark {
  background: rgba(10, 14, 22, 0.85);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── Inputs ────────────────────────────────────────────────────── */
.premium-input {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.025);
  transition: all 0.2s ease;
}
.premium-input:focus {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--color-green-400);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.01),
    0 0 0 3px rgba(0, 220, 130, 0.15);
  outline: none;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn-premium {
  position: relative;
  background: linear-gradient(160deg, #00dc82 0%, #00b869 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 14px rgba(0, 220, 130, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-premium:hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow:
    0 8px 22px rgba(0, 220, 130, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-premium:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: 0 2px 8px rgba(0, 220, 130, 0.3);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.btn-glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ─── Status badge colors ───────────────────────────────────────── */
.badge-completed {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
.badge-in-progress {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.22);
}
.badge-pending {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.18);
}

/* ─── Animations ────────────────────────────────────────────────── */
@keyframes blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}
.animate-blob {
  animation: blob 7s infinite alternate;
}
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shimmer {
  from {
    background-position: -200% center;
  }
  to {
    background-position: 200% center;
  }
}
.animate-shimmer {
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* ─── Studio mode ring ──────────────────────────────────────────── */
@keyframes progress-ring {
  from {
    stroke-dashoffset: 220;
  }
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 2px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* ─── Plyr overrides ────────────────────────────────────────────── */
.plyr--video {
  border-radius: 0;
}
.plyr--video .plyr__controls {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.plyr__control--overlaid {
  background: rgba(0, 220, 130, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(0, 220, 130, 0.25) !important;
}
.plyr__control:hover {
  background: rgba(0, 220, 130, 0.8) !important;
}
.plyr--full-ui input[type="range"] {
  color: #00dc82;
}

/* ─── NavLink active state ──────────────────────────────────────── */
.nav-link-active {
  color: #00dc82 !important;
}

/* ─── Project Groups: drag-and-drop ─────────────────────────────── */
.drop-zone-active {
  outline: 2px dashed #00dc82;
  outline-offset: -4px;
  background: rgba(0, 220, 130, 0.04);
}

.dragging-card {
  opacity: 0.45;
  pointer-events: none;
  transform: scale(0.97);
}

@keyframes groupSlide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.group-slide-in {
  animation: groupSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}