vfxreview/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Dark-first CSS variables (shadcn/ui compatible) ─────────────────────── */
@layer base {
  :root {
    /* Zinc dark palette — always dark */
    --background: 0 0% 3.9%;        /* zinc-950 */
    --foreground: 0 0% 98%;         /* white */

    --card: 0 0% 9%;                /* zinc-900 */
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 9%;             /* zinc-900 */
    --popover-foreground: 0 0% 98%;

    /* Amber accent — brand colour */
    --primary: 38 92% 50%;          /* amber-500 */
    --primary-foreground: 38 100% 6%;

    --secondary: 0 0% 14.9%;        /* zinc-800 */
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;            /* zinc-800 */
    --muted-foreground: 0 0% 63.9%; /* zinc-400 */

    --accent: 0 0% 14.9%;           /* zinc-800 */
    --accent-foreground: 0 0% 98%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;           /* zinc-800 */
    --input: 0 0% 9%;               /* zinc-900 */
    --ring: 38 92% 50%;             /* amber-500 */

    --radius: 0.625rem;             /* 10px */

    /* Status colors */
    --status-approved: 142 71% 45%;
    --status-rejected: 0 72% 51%;
    --status-pending: 38 92% 50%;
    --status-changes: 271 76% 53%;
  }

  /* Force dark mode globally */
  html {
    color-scheme: dark;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }
}

/* ── Custom utilities ────────────────────────────────────────────────────── */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Cinematic glow effect for review player */
  .player-glow {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 120px rgba(0, 0, 0, 0.2);
  }

  /* Annotation canvas cursor crosshair */
  .cursor-crosshair {
    cursor: crosshair;
  }

  /* Timeline scrub cursor */
  .cursor-ew-resize {
    cursor: ew-resize;
  }

  /* Status colors */
  .status-approved {
    color: hsl(var(--status-approved));
  }
  .status-rejected {
    color: hsl(var(--status-rejected));
  }
  .status-pending {
    color: hsl(var(--status-pending));
  }
  .status-changes {
    color: hsl(var(--status-changes));
  }

  .bg-status-approved {
    background-color: hsl(var(--status-approved) / 0.15);
  }
  .bg-status-rejected {
    background-color: hsl(var(--status-rejected) / 0.15);
  }
  .bg-status-pending {
    background-color: hsl(var(--status-pending) / 0.15);
  }
  .bg-status-changes {
    background-color: hsl(var(--status-changes) / 0.15);
  }
}

/* ── Review player specific styles ──────────────────────────────────────── */
.review-player-container {
  position: relative;
  background: #000;
  user-select: none;
}

.review-player-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Annotation canvas overlay */
.annotation-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.annotation-canvas-overlay.is-annotating {
  pointer-events: auto;
}

/* Frame timeline */
.frame-timeline {
  position: relative;
  height: 48px;
  background: hsl(0 0% 6%);
  border-top: 1px solid hsl(0 0% 14%);
  cursor: ew-resize;
  overflow: hidden;
}

/* Comment badge on timeline */
.timeline-comment-marker {
  position: absolute;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(213 94% 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Keyframe indicator */
.playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: hsl(0 72% 51%);
  pointer-events: none;
  z-index: 10;
}

/* Player controls glassmorphism */
.player-controls {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}