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

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

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

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

/* Leaflet Tooltip Override */
.school-label {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure no scrollbars and proper viewport fitting */
html,
body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

#content-container {
    max-height: calc(100vh - 2rem);
}

/* Ensure school list and details fit properly */
#school-list {
    overflow-y: auto;
    flex-shrink: 1;
    min-height: 0;
}

#school-details {
    overflow-y: auto;
    flex-shrink: 1;
    min-height: 0;
}

/* Move Leaflet controls to left side on mobile to avoid sidebar overlap */
@media (max-width: 768px) {
    .leaflet-top.leaflet-left {
        left: 0.5rem;
        right: auto;
    }

    .leaflet-top.leaflet-right {
        left: 0.5rem;
        right: auto;
    }

    .leaflet-bottom.leaflet-left {
        left: 0.5rem;
        right: auto;
    }

    .leaflet-bottom.leaflet-right {
        left: 0.5rem;
        right: auto;
    }
}


/* Responsive Design for Mobile and Tablet */
@media (max-width: 768px) {

    /* Sidebar stays on right, takes 50% width on mobile */
    .absolute.inset-y-0.right-0 {
        width: 50% !important;
        right: 0 !important;
        left: auto !important;
    }

    #content-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 0.5rem) !important;
    }

    /* Reduce padding on mobile */
    .absolute.inset-y-0 {
        padding: 0.25rem !important;
        padding-top: 0.25rem !important;
    }

    /* Adjust header for mobile - make it more compact */
    .mb-4.pointer-events-auto {
        margin-bottom: 0.25rem !important;
        flex-shrink: 0;
    }

    .mb-4.pointer-events-auto>div {
        padding: 0.5rem !important;
    }

    .mb-4.pointer-events-auto h1 {
        font-size: 0.875rem !important;
    }

    .mb-4.pointer-events-auto p {
        font-size: 0.625rem !important;
    }

    .mb-4.pointer-events-auto svg {
        width: 1rem !important;
        height: 1rem !important;
    }

    .mb-4.pointer-events-auto .p-2 {
        padding: 0.25rem !important;
    }

    /* Make school list and details fit within viewport */
    #school-list {
        max-height: 30vh;
        font-size: 0.75rem;
        flex-shrink: 1;
    }

    #school-details {
        max-height: calc(65vh - 4rem);
        font-size: 0.75rem;
        flex-shrink: 1;
    }

    /* Compact school list items */
    #school-list>div {
        padding: 0.5rem !important;
    }

    #school-list h3 {
        font-size: 0.75rem !important;
    }

    #school-list span {
        font-size: 0.5rem !important;
        padding: 0.125rem 0.25rem !important;
    }

    /* Reduce image height in details */
    #school-details .relative.h-48 {
        height: 6rem !important;
    }

    #school-details h2 {
        font-size: 1rem !important;
    }

    #school-details p {
        font-size: 0.625rem !important;
    }

    #school-details .p-6 {
        padding: 0.75rem !important;
    }

    #school-details .space-y-6>*+* {
        margin-top: 0.75rem !important;
    }

    /* Hide permanent labels on mobile to reduce clutter */
    .leaflet-tooltip-pane {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /* Tablet adjustments - show more map */
    /* Tablet - sidebar stays on right */
    .absolute.inset-y-0.right-0 {
        width: 380px !important;
        right: 0 !important;
        left: auto !important;
    }

    #content-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 1.5rem) !important;
    }

    /* Adjust padding for tablet */
    .absolute.inset-y-0 {
        padding: 0.75rem !important;
        padding-top: 0.75rem !important;
    }

    /* More compact on tablet */
    #school-list {
        max-height: 30vh;
    }

    #school-details {
        max-height: calc(60vh - 3rem);
    }
}

@media (max-width: 480px) {

    /* Extra small mobile - sidebar stays on right, 45% width */
    .absolute.inset-y-0.right-0 {
        width: 45% !important;
        right: 0 !important;
        left: auto !important;
    }

    #content-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 0.25rem) !important;
    }

    .absolute.inset-y-0 {
        padding: 0.125rem !important;
        padding-top: 0.125rem !important;
    }

    /* Very compact header */
    .mb-4.pointer-events-auto>div {
        padding: 0.25rem !important;
        gap: 0.25rem !important;
    }

    .mb-4.pointer-events-auto h1 {
        font-size: 0.75rem !important;
    }

    .mb-4.pointer-events-auto p {
        font-size: 0.5rem !important;
    }

    /* Smaller school list */
    #school-list {
        max-height: 30vh;
    }

    #school-details {
        max-height: calc(70vh - 3rem);
    }

    #school-list>div {
        padding: 0.375rem !important;
    }

    #school-details .relative.h-48 {
        height: 4rem !important;
    }

    #school-details .p-6 {
        padding: 0.5rem !important;
    }
}

@media (min-width: 1025px) {

    /* Desktop - ensure proper fitting */
    #content-container {
        max-height: calc(100vh - 2rem);
    }

    #school-list {
        max-height: 30vh;
    }

    #school-details {
        max-height: calc(60vh - 2rem);
    }
}