/* Custom styles for Daily Mood Tracker */

/* Selected mood button styling */
.mood-btn.selected[data-mood="angry"] {
    @apply border-red-600 bg-red-300 ring-2 ring-red-400;
}

.mood-btn.selected[data-mood="sad"] {
    @apply border-orange-600 bg-orange-300 ring-2 ring-orange-400;
}

.mood-btn.selected[data-mood="neutral"] {
    @apply border-yellow-600 bg-yellow-300 ring-2 ring-yellow-400;
}

.mood-btn.selected[data-mood="happy"] {
    @apply border-lime-600 bg-lime-300 ring-2 ring-lime-400;
}

.mood-btn.selected[data-mood="excited"] {
    @apply border-green-600 bg-green-300 ring-2 ring-green-400;
}

/* Vanilla Calendar Custom Styling */
.vanilla-calendar-container {
    @apply rounded-lg border border-gray-200;
    min-height: 400px;
}

/* Make the entire calendar larger */
.vanilla-calendar {
    width: 100% !important;
    font-size: 1.1rem !important;
}

/* Larger calendar header */
.vanilla-calendar-header {
    padding: 1rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

/* Larger day cells */
.vanilla-calendar-day {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 1rem !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 4px !important;
}

/* Week header styling */
.vanilla-calendar-week {
    font-weight: 600 !important;
    padding: 0.75rem 0 !important;
}

/* Mood styling for Vanilla Calendar days */
.vanilla-calendar-day.has-mood {
    @apply text-white font-semibold relative;
}

.vanilla-calendar-day.mood-angry {
    background-color: #991b1b !important;
    color: white !important;
}

.vanilla-calendar-day.mood-sad {
    background-color: #f97316 !important;
    color: white !important;
}

.vanilla-calendar-day.mood-neutral {
    background-color: #facc15 !important;
    color: #1f2937 !important;
}

.vanilla-calendar-day.mood-happy {
    background-color: #84cc16 !important;
    color: white !important;
}

.vanilla-calendar-day.mood-excited {
    background-color: #166534 !important;
    color: white !important;
}

/* Emoji styling within calendar days */
.mood-emoji {
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    display: block !important;
}

/* Recent entry styling */
.mood-entry {
    @apply bg-gray-50 rounded-lg p-3 border-l-4;
}

.mood-entry.mood-angry {
    @apply border-red-600;
}

.mood-entry.mood-sad {
    @apply border-orange-500;
}

.mood-entry.mood-neutral {
    @apply border-yellow-500;
}

.mood-entry.mood-happy {
    @apply border-lime-500;
}

.mood-entry.mood-excited {
    @apply border-green-600;
}

/* Success message animation */
.success-message {
    @apply fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50;
}

.success-message.show {
    @apply translate-x-0;
}

/* Smooth transitions */
* {
    @apply transition-colors duration-200;
}

/* Custom scrollbar styles are now handled via JavaScript for better browser compatibility */