.chart-container{background:#fff;padding:24px;border-radius:0.75rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
        #chart-container1{background:#fff;padding:24px;border-radius:0.75rem;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }
        .card {
            background-color: #fff;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s, box-shadow 0.2s;
            text-align: center;
            border-left-width: 5px;
            border-left-style: solid;
        }
        .card:hover {
            
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .card.blue-border { border-color: #3b82f6; }
        .card.green-border { border-color: #22c55e; }
        .card.orange-border { border-color: #f97316; }
        .card.purple-border { border-color: #a855f7; }
        .icon { font-size: 2rem; margin-bottom: 0.25rem; }
        .card-title { font-size: 0.9rem; font-weight: 500; color: #6b7280; }
        .card-value { font-size: 2rem; font-weight: 700; margin-top: 0.25rem; }
        .card-description { font-size: 0.75rem; color: #9ca3af; }
        body, html {
            margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: auto; background-color: white;
        }
        #main-container { max-width: 1400px; margin: 0 auto; padding: 24px; }
        #map-container {
            position: relative; height: 400px; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden; margin-top: 2rem;
        }
        #sidebar {
            position: absolute; top: 20px; right: -350px; height: auto; max-height: calc(400px - 40px); width: 350px; background-color: #fff; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1000; overflow-y: auto; border-radius: 10px;
        }
        #sidebar.active { right: 20px; }
        #close-btn {
            position: absolute; top: 15px; right: 15px; font-size: 28px; cursor: pointer; color: blue-600; background: none; border: none; z-index: 1000; transition: color 0.2s;
        }
        #close-btn:hover { color: #ccc; }
        .sidebar-content h3 {
            background-image: linear-gradient(to right, #4a90e2, #5a67d8); color: white; padding: 15px 20px; margin: -20px -20px 20px -20px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 1.75rem; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center;
        }
        .detail-item { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
        .detail-item:last-child { border-bottom: none; }
        .label { font-weight: bold; color: #555; margin-bottom: 5px; display: block; }
        .value { color: #333; }
        .close-button {
            display: block; width: 100%; padding: 10px; margin-top: 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; text-align: center; transition: background-color 0.2s;
        }
        .close-button:hover { background-color: #0056b3; }
   
        /* --- Summary Card Styles --- */
        

        /* --- Chart Styles (from original index.php) --- */
        #chart-container {
            border-radius: 1rem;
            display: flex;
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
            justify-content: center;
            align-items: flex-start; /* Align charts to the top */
            gap: 0px;
            padding: 20px 0; /* Adjust padding as needed */
            margin-top: 2rem; /* Space from summary cards */
        }
        #mainPie, #subPie {
            background-color: #ffffff;
            border-radius: 0rem;
           
            padding: 1rem;
            min-height: 400px; /* Ensure charts have a minimum height */
            flex: 1; /* Allow charts to grow and shrink */
            min-width: 300px; /* Minimum width before wrapping */
        }
        #subPie {
            flex: 2; /* Sub-pie chart can be larger */
            min-width: 500px;
        }
       

        /* Responsive adjustments */
        @media (max-width: 768px) {
            #chart-container {
                flex-direction: column; /* Stack charts vertically on small screens */
                align-items: center;
            }
            #mainPie, #subPie {
                min-width: unset; /* Remove min-width to allow full width */
                width: 90%; /* Take up more width */
            }
        }
 .dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: auto; }
        .chart-container { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }