/* Custom styles on top of Tailwind CDN */

/* Map full-screen heights */
.map-height {
    height: calc(100vh - 8rem);
}

/* Fix z-index: modals must be above Leaflet map (which uses z-index: 400) */
.task-modal,
#delete-confirm,
#annotation-modal,
#user-modal {
    z-index: 1000 !important;
}

/* Map containers need low z-index so modals appear on top */
.leaflet-container {
    z-index: 0;
}

/* Task panel - mobile bottom sheet */
#task-panel {
    transition: transform 0.3s ease-in-out;
}

#task-panel:not(.hidden) {
    transform: translateY(0);
}

/* Custom scrollbar for task lists */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Task type badges */
.badge-photo { background: #fef3c7; color: #92400e; }
.badge-quiz { background: #dbeafe; color: #1e40af; }
.badge-multiple-choice { background: #f3e8ff; color: #6b21a8; }
.badge-future { background: #f1f5f9; color: #475569; }
.badge-hidden { background: #fee2e2; color: #991b1b; }
.badge-visible { background: #dcfce7; color: #166534; }

/* Task card */
.task-card {
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}
.task-card:hover {
    border-left-color: #16a34a;
    background: #f8fafc;
}

/* Loading spinner */
.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #e2e8f0;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile task panel bottom sheet */
@media (max-width: 640px) {
    #task-panel {
        max-height: 60vh;
        border-radius: 12px 12px 0 0;
    }
}