/* ShadCN UI dark theme variables */
:root {
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  
  --primary: 292 90% 60%;
  --primary-foreground: 0 0% 98%;
  
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
}

/* Custom styles for the reward chart */
.task-item {
  border: 2px solid hsl(var(--border));
  transition: all 0.3s ease;
  background-color: hsl(var(--card));
  border-radius: var(--radius);
}

.task-item:hover {
  border-color: hsl(var(--primary) / 50%);
}

/* Enhanced star styling for better touch targets */
.star {
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  background-color: #f59e0b;
  color: #78350f;
  /* Larger touch target for mobile */
  min-width: 2.5rem;
  min-height: 2.5rem;
  -webkit-tap-highlight-color: transparent;
}

/* Make sure icons are centered properly */
.star i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
}

.star:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.star:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Special styling for the single draggable star - enhanced for visibility */
.single-star {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.7);
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
  /* Make sure it's grabable on mobile */
  touch-action: none;
  /* Larger size for better visibility and touch target */
  min-width: 3rem;
  min-height: 3rem;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.single-star:hover {
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.9);
}

/* Improved dropzone for mobile touch */
.dropzone {
  min-height: 3rem;
  transition: all 0.3s ease;
  border: 2px dashed hsl(var(--border));
  background-color: hsl(var(--secondary) / 30%);
  border-radius: var(--radius);
  /* Better padding for mobile */
  padding: 0.75rem;
}

.dropzone.highlight {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 10%);
}

/* Modified for mobile-friendly star removal */
.dropzone .star {
  cursor: pointer;
  position: relative;
  margin: 0.25rem;
}

/* Larger touch target for removing stars */
.dropzone .star:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.dropzone .star:hover:after {
  content: '×';
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: hsl(var(--destructive));
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-title {
  flex-grow: 1;
}

/* Animation for completed tasks */
@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.star-added {
  animation: starPulse 0.5s ease;
}

/* Mobile-specific improvements */
/* Star Bank styles */
#bank-balance {
    transition: all 0.3s ease;
}

#bank-balance.updated {
    animation: bankUpdate 0.5s ease;
}

@keyframes bankUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Countdown timer styles */
#countdown-timer {
    transition: color 0.3s ease;
}

/* Add padding to the bottom of the container to account for the fixed countdown */
.container {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
    /* More compact spacing for mobile */
    .task-item {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
    }
    
    /* Make sure text doesn't overflow */
    .task-title {
        font-size: 0.9rem;
        word-break: break-word;
    }
    
    /* Ensure dropzone is always visible */
    .dropzone {
        min-height: 2.5rem;
        margin-top: 0.5rem;
    }

    /* Adjust countdown position for mobile */
    .container {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
    }
}