/**
 * Calendar Component Styles
 * 
 * @package LatinoPack
 * @subpackage Staff Portal
 */

/* Calendar View */
.calendar-view {
    @apply transition-opacity duration-200;
}

.calendar-view.hidden {
    @apply opacity-0;
}

.calendar-view.active {
    @apply opacity-100;
}

/* Calendar Grid */
#calendar-days {
    grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
}

/* Calendar Day Cell */
.calendar-day {
    @apply relative h-full min-h-[120px] p-2 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200;
}

.calendar-day:not(.empty):hover {
    @apply cursor-pointer;
}

.calendar-day.today .day-number {
    @apply bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center;
}

.calendar-day.other-month {
    @apply opacity-50;
}

/* Event Items */
.event-item {
    @apply text-xs px-2 py-1 rounded w-full text-left truncate mb-1 last:mb-0
           hover:opacity-90 transition-opacity cursor-pointer;
}

.event-item[data-type="meeting"] {
    @apply bg-blue-600 text-white;
}

.event-item[data-type="task"] {
    @apply bg-green-600 text-white;
}

.event-item[data-type="reminder"] {
    @apply bg-yellow-600 text-white;
}

.event-item[data-type="other"] {
    @apply bg-purple-600 text-white;
}

/* List View */
.event-list-item {
    @apply flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer;
}

.event-list-date {
    @apply px-4 py-2 bg-gray-50 dark:bg-gray-700/50 text-sm font-medium;
}

/* Color Options */
.color-option input:checked + span {
    @apply ring-2 ring-offset-2 ring-primary-500;
}

/* Modal */
.event-modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.event-modal-container {
    @apply inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden 
           shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
}

/* Form Controls */
.form-input,
.form-select,
.form-textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm 
           focus:border-primary-500 focus:ring-primary-500
           dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

/* Buttons */
.btn {
    @apply inline-flex justify-center rounded-md border shadow-sm px-4 py-2
           text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:text-sm;
}

.btn-primary {
    @apply border-transparent bg-primary-600 text-white 
           hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply border-gray-300 bg-white text-gray-700
           hover:bg-gray-50 focus:ring-primary-500
           dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600;
}

.btn-danger {
    @apply border-transparent bg-red-600 text-white
           hover:bg-red-700 focus:ring-red-500;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Dark Mode Adjustments */
.dark .calendar-day:hover {
    @apply bg-gray-700/50;
}

.dark .event-list-date {
    @apply bg-gray-700/50 text-gray-100;
}

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
    @apply border-primary-500 ring-primary-500;
}

/* Improve dark mode text readability */
.dark .event-item {
    @apply font-semibold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.dark .event-item .text-white {
    @apply font-medium;
}

/* Ensure background contrast in dark mode */
.dark #calendar-days > div {
    @apply border-gray-600;
}

/* We're now using solid colors with white text */
.dark .event-item {
    color: white !important;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    #calendar-days {
        grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
    }

    .calendar-day {
        @apply min-h-[100px];
    }

    .event-item {
        @apply text-[10px] px-1 py-0.5;
    }
}