@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

/* Contoh custom CSS */
.custom-text {
    color: #ff5733; /* Warna teks custom */
    font-size: 2rem; /* Ukuran font custom */
}

.custom-button {
    background-color: #4caf50; /* Warna latar belakang tombol */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
/* Add this CSS to your existing styles */

/* Time Grid Styling */
.time-slot-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.time-slot-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.time-slot-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Available time slots */
.time-slot-btn[data-available="true"]:not(:disabled) {
    background-color: rgb(239 246 255);
    border-color: rgb(191 219 254);
    color: rgb(29 78 216);
}

.time-slot-btn[data-available="true"]:hover:not(:disabled) {
    background-color: rgb(219 234 254);
    border-color: rgb(147 197 253);
}

/* Selected time slot */
.time-slot-btn.selected {
    background-color: rgb(220 252 231) !important;
    border-color: rgb(74 222 128) !important;
    color: rgb(21 128 61) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

/* Not available time slots */
.time-slot-btn[data-available="false"] {
    background-color: rgb(254 242 242);
    border-color: rgb(254 202 202);
    color: rgb(185 28 28);
    cursor: not-allowed;
}

/* Past time slots */
.time-slot-btn:disabled {
    background-color: rgb(249 250 251);
    border-color: rgb(209 213 219);
    color: rgb(156 163 175);
    cursor: not-allowed;
}

/* Loading animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Time grid container */
#time-grid-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar styling for time grid */
#time-grid-container::-webkit-scrollbar {
    width: 6px;
}

#time-grid-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

#time-grid-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#time-grid-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .time-slot-btn {
        min-height: 40px;
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    #time-grid-container {
        max-height: 300px;
    }
}

/* Legend styling */
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Focus states for accessibility */
.time-slot-btn:focus {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

/* Animation for time grid appearance */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#time-grid-container > div {
    animation: fadeIn 0.3s ease-out;
}

/* FullCalendar Dark Mode Styles */
.dark .fc {
    --fc-border-color: rgb(55 65 81);
    --fc-page-bg-color: rgb(31 41 55);
    --fc-neutral-bg-color: rgb(55 65 81);
    --fc-neutral-text-color: rgb(229 231 235);
    --fc-today-bg-color: rgba(59, 130, 246, 0.15);
}

.dark .fc-theme-standard td,
.dark .fc-theme-standard th {
    border-color: rgb(55 65 81);
}

.dark .fc-theme-standard .fc-scrollgrid {
    border-color: rgb(55 65 81);
}

.dark .fc-col-header-cell {
    background-color: rgb(55 65 81);
}

.dark .fc-col-header-cell-cushion {
    color: rgb(229 231 235);
}

.dark .fc-daygrid-day-number {
    color: rgb(229 231 235);
}

.dark .fc-daygrid-day.fc-day-today {
    background-color: rgba(59, 130, 246, 0.25);
}

.dark .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background-color: rgba(59, 130, 246, 0.2);
    border: 2px solid rgb(96 165 250);
    border-radius: 4px;
}

.dark .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: rgb(96 165 250);
    font-weight: bold;
    background-color: rgb(59 130 246);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

/* Light mode today styling */
.fc-daygrid-day.fc-day-today {
    background-color: rgba(59, 130, 246, 0.1);
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background-color: rgba(59, 130, 246, 0.08);
    border: 2px solid rgb(59 130 246);
    border-radius: 4px;
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: white;
    font-weight: bold;
    background-color: rgb(59 130 246);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

.dark .fc-button-primary {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(229 231 235);
}

.dark .fc-button-primary:hover {
    background-color: rgb(75 85 99);
    border-color: rgb(107 114 128);
}

.dark .fc-button-primary:disabled {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
}

.dark .fc-button-primary:not(:disabled).fc-button-active,
.dark .fc-button-primary:not(:disabled):active {
    background-color: rgb(59 130 246);
    border-color: rgb(59 130 246);
}

.dark .fc-toolbar-title {
    color: rgb(229 231 235);
}

.dark .fc-daygrid-day-frame {
    background-color: rgb(31 41 55);
}

.dark .fc-daygrid-day:hover .fc-daygrid-day-frame {
    background-color: rgb(55 65 81);
}

.dark .fc-daygrid-more-link {
    color: rgb(96 165 250);
}

.dark .fc-popover {
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.dark .fc-popover-header {
    background-color: rgb(55 65 81);
    color: rgb(229 231 235);
}

.dark .fc-popover-body {
    color: rgb(229 231 235);
}

/* Time slot dark mode */
.dark .time-slot-btn[data-available="true"]:not(:disabled) {
    background-color: rgb(30 58 138);
    border-color: rgb(59 130 246);
    color: rgb(191 219 254);
}

.dark .time-slot-btn[data-available="true"]:hover:not(:disabled) {
    background-color: rgb(37 99 235);
    border-color: rgb(96 165 250);
}

.dark .time-slot-btn.selected {
    background-color: rgb(22 101 52) !important;
    border-color: rgb(34 197 94) !important;
    color: rgb(187 247 208) !important;
}

.dark .time-slot-btn[data-available="false"] {
    background-color: rgb(127 29 29);
    border-color: rgb(185 28 28);
    color: rgb(254 202 202);
}

.dark .time-slot-btn:disabled {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(107 114 128);
}

.dark #time-grid-container::-webkit-scrollbar-track {
    background: rgb(31 41 55);
}

.dark #time-grid-container::-webkit-scrollbar-thumb {
    background: rgb(75 85 99);
}

.dark #time-grid-container::-webkit-scrollbar-thumb:hover {
    background: rgb(107 114 128);
}