


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

    
    <div class="relative bg-white p-6 rounded-xl shadow-md overflow-hidden">
        
        <div class="absolute top-0 left-0 h-full w-1.5 bg-green-500 rounded-l-xl"></div>

        
        <div class="absolute top-4 right-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
        </div>

        <h3 class="text-sm font-medium text-gray-500 mb-2">Total Sampah</h3>
        <p class="text-3xl font-bold" style="color: #447F40;"><span id="total-sampah-today">0</span> kg</p>
        <p class="text-xs text-gray-400 mt-1">Keseluruhan sampah hari ini</p>
    </div>

    
    <div class="relative bg-white p-6 rounded-xl shadow-md overflow-hidden">
        
        <div class="absolute top-0 left-0 h-full w-1.5 bg-blue-500 rounded-l-xl"></div>

        
        <div class="absolute top-4 right-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
            </svg>
        </div>

        <h3 class="text-sm font-medium text-gray-500 mb-2">Fakultas Aktif</h3>
        <p class="text-3xl font-bold text-indigo-600"><span id="active-faculties">0</span></p>
        <p class="text-xs text-gray-400 mt-1">Terhubung dengan EcoScale</p>
    </div>

    
    <div class="relative bg-white p-6 rounded-xl shadow-md overflow-hidden">
        
        <div class="absolute top-0 left-0 h-full w-1.5 bg-purple-500 rounded-l-xl"></div>

        
        <div class="absolute top-4 right-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6" />
            </svg>
        </div>

        <h3 class="text-sm font-medium text-gray-500 mb-2">Rata-rata Pengurangan</h3>
        <p class="text-3xl font-bold text-purple-600"><span id="avg-reduction">0</span>%</p>
        <p class="text-xs text-gray-400 mt-1">Dibanding bulan lalu</p>
    </div>

    
    <div class="relative bg-white p-6 rounded-xl shadow-md overflow-hidden">
        
        <div id="env-status-border" class="absolute top-0 left-0 h-full w-1.5 bg-yellow-500 rounded-l-xl"></div>

        
        <div class="absolute top-4 right-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>

        <h3 class="text-sm font-medium text-gray-500 mb-2">Status Lingkungan</h3>
        <p id="env-status-text" class="text-3xl font-bold text-yellow-600"><span id="env-status">...</span></p>
        <p class="text-xs text-gray-400 mt-1"><span id="env-status-subtitle">Menghitung capaian...</span></p>
    </div>
</div>
<?php /**PATH C:\laragon\www\smart_scale_project\resources\views/components/cards-stats.blade.php ENDPATH**/ ?>