@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@import "../../../support/resources/css/colors.css";

@source '../../resources/views';

.full-calendar {
    --fc-small-font-size: 0.85em;
    --fc-page-bg-color: rgb(255 255 255 / 1);
    --fc-neutral-bg-color: rgb(249 250 251 / 1);
    --fc-neutral-text-color: #808080;
    --fc-border-color: rgb(229 231 235 / 1);

    --fc-button-text-color: #fff;
    --fc-button-bg-color: rgb(79 70 229 / 1);
    --fc-button-border-color: rgb(79 70 229 / 1);
    --fc-button-hover-bg-color: rgb(99 102 241 / 1);
    --fc-button-hover-border-color: rgb(99 102 241 / 1);
    --fc-button-active-bg-color: rgb(99 102 241 / 1);
    --fc-button-active-border-color: rgb(99 102 241 / 1);

    --fc-event-bg-color: rgb(79 70 229 / 1);
    --fc-event-border-color: rgb(79 70 229 / 1);
    --fc-event-text-color: #fff;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;

    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;

    --fc-non-business-color: rgba(215, 215, 215, 0.3);
    --fc-bg-event-color: rgb(143, 223, 130);
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(99, 102, 241, 0.1);
    --fc-today-bg-color: rgba(99, 102, 241, 0.2);
    --fc-now-indicator-color: red;

    --fc-list-event-hover-bg-color: rgb(249 250 251 / 1);
}

html.dark .full-calendar {
    --fc-page-bg-color: rgb(17 24 39 / 1);
    --fc-neutral-bg-color: rgba(31 41 55 / 0.8);
    --fc-border-color: rgba(55 65 81 / 0.5);

    --fc-button-bg-color: rgb(99 102 241 / 1);
    --fc-button-border-color: rgb(79 70 229 / 1);
    --fc-button-hover-bg-color: rgb(129 140 248 / 1);
    --fc-button-hover-border-color: rgb(99 102 241 / 1);
    --fc-button-active-bg-color: rgb(129 140 248 / 1);
    --fc-button-active-border-color: rgb(99 102 241 / 1);

    --fc-event-bg-color: rgb(99 102 241 / 1);
    --fc-event-border-color: rgb(79 70 229 / 1);

    --fc-list-event-hover-bg-color: rgba(31 41 55 / 0.8);
}

.full-calendar .fc-toolbar-chunk {
    @apply space-y-1;
}

.full-calendar .fc-toolbar-title {
    @apply !text-lg leading-5 md:!text-3xl font-semibold text-gray-950 dark:text-white;
}

.full-calendar.fc .fc-button {
    @apply px-3 py-2 text-sm font-medium text-white transition-all duration-200 border rounded-lg shadow-sm outline-none min-h-9 bg-primary-600 hover:bg-primary-500 active:bg-primary-700 border-primary-600 hover:border-primary-500 active:border-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

.full-calendar.fc .fc-button-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active,
.full-calendar.fc .fc-button-primary:not(:disabled):active {
    @apply shadow-none bg-primary-700 border-primary-700;
}

/* Dark mode button styles */
html.dark .full-calendar.fc .fc-button {
    @apply bg-primary-500 hover:bg-primary-400 active:bg-primary-600 border-primary-600 hover:border-primary-500 active:border-primary-600 focus:ring-primary-400 focus:ring-offset-gray-900;
}

html.dark .full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active,
html.dark .full-calendar.fc .fc-button-primary:not(:disabled):active {
    @apply bg-primary-600 border-primary-600;
}

/* Table and view styling */
.full-calendar .fc-view table,
.full-calendar .fc-view:not(.fc-list) table th,
.full-calendar .fc-list {
    @apply overflow-hidden rounded-t-xl;
}

.full-calendar .fc-list {
    @apply bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-700;
}

.full-calendar .fc-list .fc-list-event-title a {
    @apply text-gray-900 transition-colors cursor-pointer dark:text-gray-100 hover:text-primary-600 dark:hover:text-primary-400;
}

.full-calendar .fc-list-sticky .fc-list-day th {
    @apply font-medium text-gray-900 bg-gray-50 dark:bg-gray-800 dark:text-gray-100;
}

/* Day grid and time grid improvements */
.full-calendar .fc-daygrid-day {
    @apply bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700;
}

.full-calendar .fc-daygrid-day-top {
    @apply text-gray-700 dark:text-gray-300;
}

.full-calendar .fc-day-today {
    @apply bg-primary-50 dark:bg-primary-950;
}

/* Event styling */
.full-calendar .fc-event {
    @apply text-white border-0 rounded-md shadow-sm;
}

.full-calendar .fc-event-title {
    @apply text-sm font-medium;
}

/* Popover and tooltip improvements */
.full-calendar .fc-popover {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700;
}

.full-calendar .fc-popover-title {
    @apply px-4 py-2 font-semibold text-gray-900 rounded-t-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-100;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .full-calendar .fc-toolbar {
        @apply flex-col space-y-2;
    }

    .full-calendar .fc-toolbar-chunk {
        @apply flex justify-center;
    }

    .full-calendar .fc-button {
        @apply px-2 text-xs min-h-8;
    }
}

/* Time grid specific styles */
.full-calendar .fc-timegrid-slot {
    @apply border-gray-200 dark:border-gray-700;
}

.full-calendar .fc-timegrid-axis {
    @apply text-xs text-gray-600 dark:text-gray-400;
}

/* More link styling */
.full-calendar .fc-more-link {
    @apply px-2 py-1 text-xs font-medium bg-gray-100 rounded text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 dark:bg-gray-800;
}

/* Scrollbar styling for better integration */
.full-calendar .fc-scroller::-webkit-scrollbar {
    @apply w-2 h-2;
}

.full-calendar .fc-scroller::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded dark:bg-gray-800;
}

.full-calendar .fc-scroller::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500;
}