/* Custom styles for FutureTree Admin */

/* Fix for full height layout */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Ensure the main flex container takes remaining height */
.h-full {
    height: calc(100vh - 4rem); /* 4rem = 64px for the fixed nav */
}

/* Sidebar scrollbar styling */
nav::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-track {
    background: #1f2937;
}

nav::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Map container styles */
.map-container {
    height: 500px;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Loading spinner */
.animate-spin {
    animation: spin 1s linear infinite;
}

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

/* Data table enhancements */
.datatable-wrapper {
    overflow-x: auto;
}

/* Custom scrollbar for main content */
main::-webkit-scrollbar {
    width: 8px;
}

main::-webkit-scrollbar-track {
    background: #f3f4f6;
}

main::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

main::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}