resolutionflow/frontend/src/index.css

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

@layer base {
  :root {
    /* ResolutionFlow Dark Theme — Slate & Ice Modern */
    --background: 228 12% 7%;
    --foreground: 210 40% 98%;
    --card: 220 10% 10%;
    --card-foreground: 210 40% 98%;
    --popover: 220 10% 10%;
    --popover-foreground: 210 40% 98%;
    --primary: 187 72% 43%;
    --primary-foreground: 228 12% 7%;
    --secondary: 220 8% 14%;
    --secondary-foreground: 210 40% 98%;
    --muted: 220 8% 14%;
    --muted-foreground: 215 10% 58%;
    --accent: 220 8% 14%;
    --accent-foreground: 210 40% 98%;
    --destructive: 350 81% 55%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 8% 14%;
    --input: 220 8% 14%;
    --ring: 187 72% 43%;
    --radius: 0.75rem;

    /* App Shell tokens */
    --sidebar-w: 260px;
    --sidebar-bg: 228 12% 6%;
    --sidebar-hover: 220 8% 14%;
    --sidebar-active: 187 72% 43% / 0.10;
    --border-subtle: 220 8% 12%;
    --text-dimmed: 218 10% 39%;

    /* Glass system */
    --glass-bg: rgba(24, 26, 31, 0.55);
    --glass-bg-hover: rgba(24, 26, 31, 0.7);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(16px);
    --glass-blur-strong: blur(20px);
    --glass-blur-light: blur(12px);

    /* Shadow system */
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08);

    /* Easing */
    --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@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: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Bricolage Grotesque', 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 {
  min-height: 0;
  overflow-y: auto;
}

.main-content {
  min-height: 0;
  min-width: 0;
  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); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes breatheGlow {
  from { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(6, 182, 212, 0.04); }
  to { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.12); }
}

@keyframes bellWobble {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

@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;
  }

  /* Glass card — interactive with hover lift */
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-float);
    transition: transform 200ms var(--ease-out-smooth),
                border-color 200ms var(--ease-out-smooth),
                box-shadow 200ms var(--ease-out-smooth);
  }
  .glass-card:hover {
    transform: scale(1.02);
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-float-hover);
  }

  /* Glass card — static, no hover transform */
  .glass-card-static {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-float);
  }

  /* Breathing glow for highlighted stat cards */
  .active-glow {
    animation: breatheGlow 3s ease-in-out infinite alternate;
  }
}

/* Sonner Toast Customization — outside @layer for higher specificity */
[data-sonner-toast] {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
  border-radius: 0.75rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

[data-sonner-toast] [data-title] {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
}

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

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

[data-sonner-toast][data-type="info"] {
  border-color: hsl(var(--border)) !important;
}
[data-sonner-toast][data-type="info"] [data-icon] {
  color: hsl(var(--muted-foreground));
}

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

[data-sonner-toast] [data-close-button] {
  color: hsl(var(--muted-foreground));
  border-radius: 0.375rem;
  transition: color 150ms, background-color 150ms;
}
[data-sonner-toast] [data-close-button]:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* React Day Picker Customization */
@layer components {
  .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;
  }
}

/* React Flow dark theme overrides */
.react-flow__background {
  background-color: transparent !important;
}

.react-flow__controls {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

.react-flow__controls-button {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  fill: hsl(var(--muted-foreground)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

.react-flow__controls-button:hover {
  background-color: hsl(var(--accent)) !important;
  fill: hsl(var(--foreground)) !important;
}

.react-flow__controls-button svg {
  fill: inherit !important;
}

.react-flow__minimap {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
}

.react-flow__edge-path {
  stroke: hsl(var(--border));
}

.react-flow__edge-text {
  fill: hsl(var(--muted-foreground));
}

.react-flow__edge-textbg {
  fill: hsl(var(--card));
}

/* Hide default React Flow attribution */
.react-flow__attribution {
  display: none;
}

/* Handle styles */
.react-flow__handle {
  background-color: hsl(var(--border));
}