/* Custom styles for Personal Training Client Management System */

/* Funky Modal Animations */
@keyframes modalSlideIn {
    0% {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes modalSlideOut {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
}

/* FullCalendar customizations */
.fc {
    font-family: inherit;
}

.fc-button {
    background: #111827 !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
}

.fc-button:hover {
    background: #1F2937 !important;
}

.fc-button-active {
    background: #111827 !important;
}

.fc-today-button {
    background: #111827 !important;
}

.fc-today-button:hover {
    background: #1F2937 !important;
}

/* Available slots styling */
.slot-available {
    background-color: #D1FAE5;
    border-color: #10B981;
}

.slot-booked {
    background-color: #FED7AA;
    border-color: #F97316;
}

.slot-attended {
    background-color: #FECACA;
    border-color: #EF4444;
}

/* Blocked/Unavailable slots styling */
.slot-blocked {
    background-color: #6B7280 !important;
    background-image: repeating-linear-gradient(-45deg, #8b98a9, #8b98a9 5px, #6B7280 5px, #6B7280 10px) !important;
    border-color: #6B7280 !important;
    color: white !important;
}

/* FullCalendar blocked event styling */
.fc-event.blocked-event {
    background-color: #6B7280 !important;
    background-image: repeating-linear-gradient(-45deg, #8b98a9, #8b98a9 5px, #6B7280 5px, #6B7280 10px) !important;
    border-color: #6B7280 !important;
    color: white !important;
}

.fc-event.blocked-event .fc-event-title {
    color: white !important;
    font-weight: 600;
}

/* Ensure calendar event colors are applied */
.fc-event {
    border-width: 2px !important;
    font-weight: 500 !important;
}

.fc-event-title {
    font-weight: 500 !important;
    padding: 2px 4px !important;
}

/* Calendar event colors based on status */
.fc-event[style*="background-color: #4CAF50"] {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: white !important;
}

.fc-event[style*="background-color: #FFC107"] {
    background-color: #FFC107 !important;
    border-color: #FFC107 !important;
    color: #000000 !important;
}

.fc-event[style*="background-color: #1976D2"] {
    background-color: #1976D2 !important;
    border-color: #1976D2 !important;
    color: white !important;
}

.fc-event[style*="background-color: #673AB7"] {
    background-color: #673AB7 !important;
    border-color: #673AB7 !important;
    color: white !important;
}

.fc-event[style*="background-color: #E53935"] {
    background-color: #E53935 !important;
    border-color: #E53935 !important;
    color: white !important;
}

.fc-event[style*="background-color: #616161"] {
    background-color: #616161 !important;
    border-color: #616161 !important;
    color: white !important;
}

.fc-event[style*="background-color: #BDBDBD"] {
    background-color: #BDBDBD !important;
    border-color: #BDBDBD !important;
    color: #000000 !important;
}

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

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Modal animations */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}

.modal-exit {
    opacity: 1;
    transform: scale(1);
}

.modal-exit-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 300ms, transform 300ms;
}

/* Toast notifications */
.toast-enter {
    opacity: 0;
    transform: translateX(100%);
}

.toast-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms, transform 300ms;
}

.toast-exit {
    opacity: 1;
    transform: translateX(0);
}

.toast-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 300ms, transform 300ms;
}

/* Responsive calendar */
@media (max-width: 768px) {
    .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

/* Form improvements */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-available {
    background-color: #E8F5E8;
    color: #4CAF50;
}

.status-pending {
    background-color: #FFF8E1;
    color: #FFC107;
}

.status-confirmed {
    background-color: #E3F2FD;
    color: #1976D2;
}

.status-attended {
    background-color: #F3E5F5;
    color: #673AB7;
}

.status-no-show {
    background-color: #FFEBEE;
    color: #E53935;
}

.status-cancelled {
    background-color: #F5F5F5;
    color: #616161;
}

.status-blocked {
    background-color: #F5F5F5;
    color: #BDBDBD;
}

/* Toggle switch - reusable */
.toggle { cursor: pointer; display: inline-block; }
.toggle-switch {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}
.toggle-switch::before { content: ""; }
.toggle-switch::after { content: ""; }
.toggle-switch::before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s, background 0.25s, box-shadow 0.25s;
}
.toggle:hover .toggle-switch::before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.toggle-checkbox:checked + .toggle-switch { background: #56c080; }
.toggle-checkbox:checked + .toggle-switch::before { left: 30px; }
.toggle-checkbox { position: absolute; visibility: hidden; }
.toggle-label { margin-left: 8px; position: relative; top: 2px; font-size: 0.9rem; color: #374151; }

/* Ensure header always spans full width and aligns consistently */
header.unified-header {
    position: sticky;
    top: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure header inner container uses full available width */
header.unified-header > div.w-full {
    width: 100%;
    box-sizing: border-box;
}