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

:root {
  --background: #0a0a0a;
  --card-bg: #111111;
  --text: #ffffff;
  --purple: #8b5cf6;
  --green: #4ade80;
  --blue: #60a5fa;
  --grid-color: rgba(255, 255, 255, 0.05);
}

body {
  @apply bg-background text-white min-h-screen relative overflow-x-hidden;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Grid background */
.grid-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  z-index: -1;
  opacity: 0.5;
}

/* Gradient overlay */
.gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, 
    rgba(139, 92, 246, 0.15),
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Card styles */
.card {
  @apply rounded-3xl p-8 border border-white/[0.03];
  background-color: var(--card-bg);
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.05);
  background: linear-gradient(
    145deg,
    rgba(17, 17, 17, 1),
    rgba(17, 17, 17, 0.9)
  );
}

#root {
  @apply min-h-screen;
}

.progress-bar-container {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.progress-item {
  @apply space-y-2;
}

.progress-header {
  @apply flex justify-between items-center text-sm text-gray-400;
}

.progress-header span + span {
  @apply ml-2;
}

/* Calendar styles */
.calendar {
  @apply p-4;
}

.calendar .grid {
  @apply gap-2;
}

.calendar .grid > div {
  @apply transition-all duration-200;
}

/* Make the calendar cells more prominent */
.calendar .grid-cols-7 > div {
  @apply text-sm font-medium;
}

.calendar-day.missed {
  background-color: rgba(239, 68, 68, 0.2); /* red-500 with opacity */
  border-color: rgba(239, 68, 68, 0.3);
  color: rgb(239, 68, 68);
} 