<!-- LOADING OVERLAY -->
<div id="loadingOverlay"
class="hidden fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center">

    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl p-8 text-center">

        <!-- ICON -->
        <div class="flex justify-center mb-5">

            <div class="relative">

                <div class="w-20 h-20 border-4 border-blue-200 rounded-full"></div>

                <div class="absolute inset-0 w-20 h-20 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>

            </div>

        </div>

        <!-- TITLE -->
        <h2 class="text-2xl font-bold text-gray-800 mb-2">
            Importing Attendance
        </h2>

        <!-- DYNAMIC MESSAGE -->
        <p id="loadingText"
        class="text-gray-500 mb-6 text-sm animate-pulse">
            Preparing import...
        </p>

        <!-- PROGRESS BAR -->
        <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden mb-4">

            <div id="progressBar"
            class="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-500"
            style="width:0%"></div>

        </div>

        <!-- PERCENTAGE -->
        <div class="flex justify-between items-center text-sm">

            <span class="text-gray-500">
                Processing records...
            </span>

            <span id="progressPercent"
            class="font-bold text-blue-700 text-lg">
                0%
            </span>

        </div>

        <!-- FOOTER -->
        <div class="mt-6 text-xs text-gray-400">
            Please wait while attendance data is being synchronized.
        </div>

    </div>

</div>