@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../resources/**/*.js';
@source '../../../../resources/**/*.blade.php';
@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/* Import Saade FullCalendar styles and source files */
@import '../../../../vendor/saade/filament-fullcalendar/resources/css/filament-fullcalendar.css';
@source '../../../../vendor/saade/filament-fullcalendar/resources/views/**/*.blade.php';

/* Import Awcodes Palette styles and source files */
@source '../../../../vendor/awcodes/palette/resources/**/*.blade.php';

/*
** Full Calendar Customizations
*/

/* Main Calendar Container */
.fc {
    /* gray-200 */
    --fc-border-radius: 0.75rem;
    /* rounded-xl */
    --fc-button-bg-color: rgb(255 255 255 / 1);
    --fc-button-border-color: rgb(229 231 235 / 1);
    --fc-button-hover-bg-color: rgb(249 250 251 / 1);
    --fc-button-hover-border-color: rgb(209 213 219 / 1);
    --fc-button-active-bg-color: rgb(243 244 246 / 1);
    --fc-today-bg-color: rgb(254 252 232 / 0.5);
    /* yellow-50 with opacity */
    --fc-event-border-radius: 0.5rem;
    /* rounded-lg */
    --radius-xl: 0;
}

/* Dark mode support */
.dark .fc {
    --fc-border-color: rgb(55 65 81 / 1);
    /* gray-700 */
    --fc-button-bg-color: rgb(31 41 55 / 1);
    /* gray-800 */
    --fc-button-border-color: rgb(55 65 81 / 1);
    --fc-button-hover-bg-color: rgb(55 65 81 / 1);
    --fc-button-hover-border-color: rgb(75 85 99 / 1);
    --fc-button-active-bg-color: rgb(75 85 99 / 1);
    --fc-today-bg-color: rgb(254 252 232 / 0.1);
}

/* Calendar wrapper */
.fc .fc-view-harness {
    border-radius: var(--fc-border-radius);
    overflow: hidden;
}

/* Toolbar styling */
.fc .fc-toolbar {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    @apply text-gray-900;
}

.dark .fc .fc-toolbar-title {
    @apply text-gray-100;
}

/* Button styling */
.fc .fc-button {
    padding: 0.5rem 1rem;
    @apply rounded-lg;
    font-weight: 500;
    font-size: 0.875rem;
    background-color: var(--fc-button-bg-color);
    border: 1px solid var(--fc-button-border-color);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.fc .fc-button:hover {
    background-color: var(--fc-button-hover-bg-color);
    border-color: var(--fc-button-hover-border-color);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.fc .fc-button:focus {
    @apply outline-blue-500;
    @apply outline-2;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.fc .fc-button-active {
    background-color: var(--fc-button-active-bg-color);
    border-color: var(--fc-button-border-color);
    @apply text-gray-900;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    @apply bg-blue-500;
    border-color: rgb(59 130 246 / 1);
    color: white;
}

.fc .fc-button-group>.fc-button {
    border-radius: 0.5rem;
    margin: 0;
}

/* Table headers */
.fc .fc-col-header-cell {
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    @apply text-gray-500;
    @apply bg-gray-50;
    border-color: var(--fc-border-color);
}

.dark .fc .fc-col-header-cell {
    @apply text-gray-400;
    @apply bg-gray-800;
}

.fc .fc-col-header-cell-cushion {
    padding: 0;
}

/* Day cells */
.fc .fc-daygrid-day {
    border-color: var(--fc-border-color);
}

.fc .fc-daygrid-day-frame {
    padding: 0.5rem;
    min-height: 6rem;
}

.fc .fc-daygrid-day-top {
    flex-direction: row;
    padding: 0.25rem 0.5rem;
}

.fc .fc-daygrid-day-number {
    padding: 0.25rem 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;

    @apply text-gray-700;
    @apply rounded-md;

    transition: background-color 150ms;
}

.dark .fc .fc-daygrid-day-number {
    color: rgb(209 213 219 / 1);
}

.fc .fc-daygrid-day-number:hover {
    @apply bg-gray-100;
}

.dark .fc .fc-daygrid-day-number:hover {
    @apply bg-gray-800;
}

/* Today highlight */
.fc .fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    @apply bg-yellow-500;
    @apply text-black;

    font-weight: 600;
}

/* Other month days */
.fc .fc-day-other .fc-daygrid-day-number {
    @apply text-gray-400;
}

.dark .fc .fc-day-other .fc-daygrid-day-number {
    @apply text-gray-500;
}

/* Events */
.fc-event {
    border-radius: var(--fc-event-border-radius) !important;
    border: none !important;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-event:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

.fc-event-title {
    font-weight: 500;
}

.fc .fc-list-event-dot {
    border-radius: 9999px;
    width: 0.625rem;
    height: 0.625rem;
    border-width: 0;
}

.fc .fc-daygrid-more-link {
    @apply bg-blue-500;
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 150ms;
}

.fc .fc-daygrid-more-link:hover {
    @apply bg-blue-50;
}

.dark .fc .fc-daygrid-more-link:hover {
    @apply bg-blue-200;
}

.unit-boundary-event {
    padding-top: 10px;
    text-align: right;
}

.unit-boundary-event .boundary-title {
    flex: 1;
    padding: 0;
    margin: 0 !important;
}

/* Popover for more events */
.fc .fc-popover {
    border-radius: 0.75rem;
    border-color: var(--fc-border-color);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

.fc .fc-popover-header {
    padding: 0.75rem 1rem;
    background-color: rgb(249 250 251 / 1);
    border-bottom: 1px solid var(--fc-border-color);
    font-weight: 600;
}

.dark .fc .fc-popover-header {
    background-color: rgb(31 41 55 / 1);
}

.fc .fc-popover-body {
    padding: 0.5rem;
}

/* Time grid view */
.fc .fc-timegrid-slot {
    height: 3rem;
}

.fc .fc-timegrid-slot-label {
    font-size: 0.8125rem;
    color: rgb(107 114 128 / 1);
}

.dark .fc .fc-timegrid-slot-label {
    color: rgb(156 163 175 / 1);
}

/* Scrollbar styling */
.fc-scroller::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.fc-scroller::-webkit-scrollbar-track {
    background-color: rgb(243 244 246 / 1);
    border-radius: 9999px;
}

.dark .fc-scroller::-webkit-scrollbar-track {
    background-color: rgb(31 41 55 / 1);
}

.fc-scroller::-webkit-scrollbar-thumb {
    background-color: rgb(209 213 219 / 1);
    border-radius: 9999px;
}

.dark .fc-scroller::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99 / 1);
}

.fc-scroller::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175 / 1);
}

.dark .fc-scroller::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128 / 1);
}

/* List view */
.fc .fc-list-table {
    border-radius: 0.75rem;
    overflow: hidden;
}

.fc .fc-list-day-cushion {
    padding: 0.75rem 1rem;
    background-color: rgb(249 250 251 / 1);
    font-weight: 600;
}

.dark .fc .fc-list-day-cushion {
    background-color: rgb(31 41 55 / 1);
}

.fc .fc-list-event {
    transition: background-color 150ms;
}

.fc .fc-list-event:hover td {
    background-color: rgb(249 250 251 / 1);
}

.dark .fc .fc-list-event:hover td {
    background-color: rgb(31 41 55 / 1);
}

/* Remove default box shadows that conflict with our styles */
.fc .fc-button:not(:disabled):active:focus,
.fc .fc-button:not(:disabled).fc-button-active:focus {
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .fc .fc-toolbar-title {
        text-align: center;
        margin-bottom: 0.5rem;
    }
}

/* Animation for event creation/updates */
@keyframes eventFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fc-event {
    animation: eventFadeIn 200ms ease-out;
}