resolutionflow/frontend/src/index.css

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

@layer base {
  :root {
    /* ResolutionFlow Dark Theme — Purple Gradient Accents */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 100%;
    --card: 240 10% 9.4%;
    --card-foreground: 0 0% 100%;
    --popover: 240 10% 9.4%;
    --popover-foreground: 0 0% 100%;
    --primary: 243 75% 59%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 5.9% 15%;
    --secondary-foreground: 0 0% 100%;
    --muted: 240 5.9% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 5.9% 15%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 5.9% 15%;
    --input: 240 5.9% 15%;
    --ring: 243 75% 59%;
    --radius: 0.75rem;

    /* App Shell tokens */
    --sidebar-w: 260px;
    --sidebar-bg: 240 10% 4.5%;
    --sidebar-hover: 240 6% 12%;
    --sidebar-active: 243 75% 59% / 0.08;
    --border-subtle: 240 6% 12%;
    --text-dimmed: 240 4% 24%;
  }
}

@layer base {
  * {
    @apply border-border;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 9999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground));
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}

/* App Shell Grid Layout */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 200ms ease;
}

.app-shell--collapsed {
  grid-template-columns: 56px 1fr;
}

.topbar {
  grid-column: 1 / -1;
}

.sidebar {
  overflow-y: auto;
}

.main-content {
  overflow-y: auto;
}

/* Mobile: single column */
@media (max-width: 767px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
}

/* Staggered fade-in for page sections */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-from-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slide-in-from-bottom {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@layer utilities {
  .animate-fade-in {
    animation: fade-in 200ms ease-out;
  }

  .animate-fade-in-up {
    animation: fade-in-up 200ms ease-out;
  }

  .animate-slide-in-left {
    animation: slide-in-from-left 200ms ease-out;
  }

  .animate-slide-in-bottom {
    animation: slide-in-from-bottom 200ms ease-out;
  }

  .animate-scale-in {
    animation: scale-in 150ms ease-out;
  }

  /* Button press feedback */
  .btn-press {
    @apply active:scale-[0.98] transition-transform;
  }

  /* Brand gradient text */
  .text-gradient-brand {
    @apply bg-gradient-brand bg-clip-text text-transparent;
  }

  /* ── Legacy glass-card utilities (preserved for backward compatibility) ── */
  /* New components should use bg-card border-border rounded-xl instead */

  .glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

  .glass-card-hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .glass-card-glow {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
  }

  .glass-stat {
    background: rgba(20, 20, 25, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
  }
}

/* Sonner Toast Customization */
@layer components {
  :where([data-sonner-toast]) {
    @apply bg-card text-card-foreground;
    @apply border border-border shadow-lg;
    @apply rounded-xl;
    font-family: 'Inter', system-ui, sans-serif;
    backdrop-filter: blur(10px);
  }

  :where([data-sonner-toast]) [data-title] {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
  }

  :where([data-sonner-toast][data-type="success"]) {
    border-color: rgba(52, 211, 153, 0.3);
  }
  :where([data-sonner-toast][data-type="success"]) [data-icon] {
    color: #34d399;
  }

  :where([data-sonner-toast][data-type="error"]) {
    border-color: rgba(248, 113, 113, 0.3);
  }
  :where([data-sonner-toast][data-type="error"]) [data-icon] {
    color: #f87171;
  }

  :where([data-sonner-toast][data-type="info"]) {
    @apply border-border;
  }
  :where([data-sonner-toast][data-type="info"]) [data-icon] {
    @apply text-muted-foreground;
  }

  :where([data-sonner-toast][data-type="warning"]) {
    border-color: rgba(251, 191, 36, 0.3);
  }
  :where([data-sonner-toast][data-type="warning"]) [data-icon] {
    color: #fbbf24;
  }

  :where([data-sonner-toast]) [data-close-button] {
    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
    @apply rounded-md transition-colors;
  }

  :where([data-sonner-toast]) [data-icon][data-loading] {
    @apply text-white;
  }

  /* React Day Picker Customization */
  .rdp-custom {
    @apply text-foreground;
  }

  .rdp-custom .rdp-month {
    @apply w-full;
  }

  .rdp-custom .rdp-caption {
    @apply flex justify-center items-center mb-4;
  }

  .rdp-custom .rdp-caption_label {
    @apply text-sm font-medium;
  }

  .rdp-custom .rdp-nav {
    @apply flex gap-1;
  }

  .rdp-custom .rdp-nav_button {
    @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
  }

  .rdp-custom .rdp-table {
    @apply w-full border-collapse;
  }

  .rdp-custom .rdp-head_cell {
    @apply text-muted-foreground font-normal text-xs;
  }

  .rdp-custom .rdp-cell {
    @apply text-center text-sm p-0;
  }

  .rdp-custom .rdp-day {
    @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
  }

  .rdp-custom .rdp-day_selected {
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
  }

  .rdp-custom .rdp-day_today {
    @apply bg-accent text-accent-foreground;
  }

  .rdp-custom .rdp-day_outside {
    @apply text-muted-foreground opacity-50;
  }

  .rdp-custom .rdp-day_disabled {
    @apply text-muted-foreground opacity-50;
  }

  .rdp-custom .rdp-day_range_middle {
    @apply bg-accent text-accent-foreground;
  }

  .rdp-custom .rdp-day_hidden {
    @apply invisible;
  }
}