/* ============================
   HERO SIMON
============================ */

.hero-simon{

    background: linear-gradient(135deg,#0d6efd,#198754);
    color:white;

    border-radius:20px;

     padding:18px 25px;

    margin-bottom:30px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.hero-logo{

    width:70px;
    max-width:120px;
    height:auto;

    display:block;

    margin:auto;

}

.hero-title{

    font-size:30px;
    font-weight:700;

    margin-top:20px;

}

.hero-subtitle{

    font-size:18px;

    margin-top:10px;

}

.hero-desc{

    font-size:14px;

     margin-bottom:10px;

}

.hero-line{

    margin:12px auto;
}

#greeting{

    font-size:18px;
    margin-top:8px;
}

#tanggal{

    font-size:22px;

}

#jam{

    font-size:26px;

    font-weight:bold;

}

/* ===================================
   GRID APLIKASI SIMON
=================================== */

.section-title{

    font-size:28px;
    font-weight:700;

    margin-bottom:25px;

    color:#0d47a1;

}

.app-card{

    background:white;

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    height:100%;

}

.app-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.app-icon{

    font-size:52px;

    margin-bottom:20px;

}

.app-card h5{

    color:#222;

    font-weight:bold;

}

.app-card p{

    color:#666;

    font-size:14px;

}

.monitoring{

    border-top:6px solid #0d6efd;

}

.statistik{

    border-top:6px solid #198754;

}

.perencanaan{

    border-top:6px solid #fd7e14;

}
.dashboard-highlight{

    animation: glowCard 2s ease;

}

@keyframes glowCard{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(13,110,253,0);

    }

    50%{

        transform:scale(1.04);

        box-shadow:0 0 35px rgba(13,110,253,.55);

    }

    100%{

        transform:scale(1);

        box-shadow:0 8px 25px rgba(0,0,0,.10);

    }

}
.toast{
    border-radius:16px;
    min-width:360px;
    animation: simonToast .35s ease;
}

.toast-header{
    font-weight:600;
}

.toast-body{
    font-size:14px;
}

@keyframes simonToast{

    from{

        transform:translateX(120px);
        opacity:0;

    }

    to{

        transform:translateX(0);
        opacity:1;

    }

}

/* =========================================================
   RINGKASAN BIDANG - TAMPILAN RAPI
   ========================================================= */

#ringkasanBidang .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Semua kolom */
#ringkasanBidang .row > div {
    min-width: 0;
    text-align: center;
}

/* Program, Kegiatan, Sub */
#ringkasanBidang .row > div:nth-child(1),
#ringkasanBidang .row > div:nth-child(2),
#ringkasanBidang .row > div:nth-child(3) {
    flex: 0 0 12%;
}

/* Pagu dan Realisasi lebih lebar */
#ringkasanBidang .row > div:nth-child(4),
#ringkasanBidang .row > div:nth-child(5) {
    flex: 1 1 32%;
}

/* Judul */
#ringkasanBidang small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 5px;
}

/* Angka jumlah */
#ringkasanBidang #jumlahProgram,
#ringkasanBidang #jumlahKegiatan,
#ringkasanBidang #jumlahSub {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Pagu dan Realisasi */
#ringkasanBidang #nilaiPagu,
#ringkasanBidang #nilaiRealisasi {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* Sedikit jarak antar kolom */
#ringkasanBidang .row > div {
    padding-left: 5px;
    padding-right: 5px;
}

/* =========================================================
   LEGENDA STATUS KALENDER AGENDA SIMON
   ========================================================= */

.agenda-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 8px;
    font-size: 13px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-weight: 500;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}