/**
 * CELECT Custom Styles
 * Additional styles beyond Tailwind CSS
 */

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.leaflet-popup-content {
    margin: 0;
}

.leaflet-popup-tip {
    background: white;
}

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

.sidebar-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Legend scrollbar */
.legend::-webkit-scrollbar {
    width: 4px;
}

.legend::-webkit-scrollbar-track {
    background: transparent;
}

.legend::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 2px;
}

/* Animation for loading */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .leaflet-popup-content {
        min-width: 280px !important;
        max-width: 300px !important;
    }

    .popup-chart-container {
        height: 200px !important;
    }
}

/* Print styles */
@media print {
    .sidebar {
        display: none;
    }

    .map-container {
        width: 100%;
        height: 100vh;
    }

    .legend {
        position: static;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* Focus styles for accessibility */
.criteria-slider:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Tooltip styles */
[title] {
    position: relative;
}

/* Admin styles */
.grp-change-form .grp-module h2 {
    background: linear-gradient(135deg, #3b82f6, #10b981);
}