body { 
            font-family: 'Segoe UI', Arial, sans-serif; 
            margin: 0; 
            background: #f4f7f6; 
            display: flex; 
            height: 100vh; 
            overflow: hidden; 
        }

        #student-details {
            border: 1px solid black;
            padding: 3px;
            color: black;
            background-color: antiquewhite;
        }
        /* Responsive Layout: Sidebar becomes Top bar on mobile */
        #sidebar { 
            width: 350px; 
            background: #2c3e50; 
            color: white; 
            padding: 20px; 
            box-shadow: 2px 0 10px rgba(0,0,0,0.2); 
            z-index: 10; 
            overflow-y: auto; 
            display: flex; 
            flex-direction: column;
        }

        #map-container { 
            flex: 1; 
            position: relative; 
            background: #fff; 
            overflow: hidden;
        }

        /* Mobile specific adjustments */
        @media (max-width: 768px) {
            body { flex-direction: column; overflow: auto; }
            #sidebar { 
                width: 100%; 
                height: auto; 
                box-sizing: border-box; 
                padding: 15px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            }
            #map-container { 
                height: 500px; /* Fixed height on mobile so user can scroll past it */
                width: 100%;
            }
            .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
            .legend { display: none; } /* Hide legend on small screens to save space */
        }

        
        h1 { font-size: 1.2em; margin: 0 0 5px 0; color: #fff; }
        .stat-card { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; margin-top: 10px; border-left: 4px solid #3498db; }
        .val { font-size: 1.5em; font-weight: bold; color: #3498db; display: block; }
        .loc-name { font-size: 0.85em; color: #bdc3c7; display: block; }
        .label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #ecf0f1; }
        #controls { margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 8px; }
        select { width: 100%; padding: 8px; border-radius: 4px; background: #34495e; color: white; border: none; }
        
        svg { width: 100%; height: 100%; }
        .district { stroke: #fff; stroke-width: 0.2px; transition: all 0.2s; cursor: pointer; }
        .district:hover { stroke: #333; stroke-width: 1px; fill-opacity: 0.7; }
        
        .tooltip {
            position: absolute; pointer-events: none; background: rgba(255, 255, 255, 0.95);
            padding: 10px; border: 1px solid #2c3e50; border-radius: 4px; font-size: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 100;
        }
        .legend { margin-top: auto; padding-top: 15px; font-size: 11px; }
        .legend-item { display: flex; align-items: center; margin-bottom: 4px; }
        .legend-color { width: 16px; height: 10px; margin-right: 8px; }
        .district {cursor: pointer;transition: fill 0.2s;}