<!-- ================== CUSTOM STYLE MODERN ================== -->
<style>

/* Background Halus */
.content-wrapper {
    background: linear-gradient(135deg, #eef2f7, #f8fbff);
    padding: 20px;
}

/* ================= HEADER PREMIUM ================= */
.content-header {
    padding: 30px 25px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    color: #fff;
    margin-bottom: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.content-header:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    top: -50px;
    right: -50px;
}

.content-header h1 {
    font-weight: 600;
    font-size: 26px;
    margin: 0;
    letter-spacing: 1px;
}

.content-header i {
    margin-right: 10px;
}

/* ===== LIVE CLOCK STYLE ===== */
/* ===== FIX NEON CLOCK (ANTI PUTIH) ===== */

.live-datetime{
    margin-top:15px;
    display:inline-block;
    padding:14px 22px;
    border-radius:18px;
    background:rgba(0,0,0,0.25); /* Dibikin gelap supaya kontras */
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.2);
}

/* JAM */
#live-clock{
    font-size:30px;
    font-weight:700;
    letter-spacing:3px;
    color:#ffffff !important; /* Paksa putih terang */
    text-shadow:
        0 0 8px #c084fc,
        0 0 16px #a855f7,
        0 0 30px #7c3aed,
        0 0 45px #6d28d9;
}

/* TANGGAL */
#live-date{
    font-size:14px;
    margin-top:6px;
    color:#f3e8ff !important;
    letter-spacing:1px;
}

/* ================= CARD MODERN ================= */
.box {
    border-radius: 22px !important;
    border: none !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 25px;
    background: #fff;
}

.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.box-header {
    padding: 18px 22px;
    border-bottom: none;
    color: #fff;
}

.box-title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.box-body {
    padding: 22px;
    font-size: 14px;
    color: #555;
    background: #ffffff;
}

/* Gradient Variasi */
.box-default .box-header {
    background: linear-gradient(135deg, #a855f7, #c084fc);
}

.box-primary .box-header {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
}

.box-success .box-header {
    background: linear-gradient(135deg, #7c3aed, #c084fc);
}

/* Collapse Button */
.btn-box-tool {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 30px;
    transition: 0.3s;
    color: #fff;
}

.btn-box-tool:hover {
    background: rgba(255,255,255,0.4);
}

</style>


<!-- ================== HEADER ================== -->
<section class="content-header">
    <h1>
        <i class="fa fa-desktop"></i>
        <?php if(!empty($site_name)){ echo $site_name; } ?>
    </h1>

    <!-- JAM & TANGGAL -->
    <div class="live-datetime">
        <div id="live-clock"></div>
        <div id="live-date"></div>
    </div>

    <ol class="breadcrumb">
        <li>
            <a href="<?php echo site_url(); ?>/manager">
                <i class="fa fa-home"></i> Home
            </a>
        </li>
        <li class="active">Dashboard</li>
    </ol>
</section>


<!-- ================== MAIN CONTENT ================== -->
<section class="content">

    <!-- CARD 1 -->
    <div class="box box-default collapsed-box">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-mobile"></i> INAS EXAM MOBILE
            </h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        <div class="box-body">
            <p>
                Sistem ujian berbasis mobile yang modern, responsif, 
                dan mendukung pelaksanaan CBT secara efisien.
            </p>
        </div>
    </div>

    <!-- CARD 2 -->
    <div class="box box-primary collapsed-box">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-bar-chart"></i> Statistik & Informasi
            </h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        <div class="box-body">
            <p>
                Ringkasan aktivitas sistem, jumlah peserta, 
                tes aktif, dan laporan akan ditampilkan di sini.
            </p>
        </div>
    </div>

    <!-- CARD 3 -->
    <div class="box box-success collapsed-box">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-cogs"></i> Pengaturan Sistem
            </h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        <div class="box-body">
            <p>
                Kelola konfigurasi sistem, pengaturan ujian, 
                dan kontrol manajemen dari dashboard ini.
            </p>
        </div>
    </div>

</section>


<script>
function updateClock(){
    const now = new Date();

    const options = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
    };

    let hours = now.getHours().toString().padStart(2,'0');
    let minutes = now.getMinutes().toString().padStart(2,'0');
    let seconds = now.getSeconds().toString().padStart(2,'0');

    // Efek titik dua berkedip
    let blink = (seconds % 2 === 0) ? ":" : " ";

    const time = hours + blink + minutes + blink + seconds;
    const date = now.toLocaleDateString('id-ID', options);

    document.getElementById('live-clock').innerHTML = time;
    document.getElementById('live-date').innerHTML = date;
}

setInterval(updateClock, 1000);
updateClock();
</script>