/* ==========================================================
   PORTAL GTK KABUPATEN KONAWE
   DASHBOARD SYSTEM
   Version : 8.5 Premium
==========================================================*/


/* ==========================================================
   DASHBOARD
==========================================================*/

.dashboard{

    width:95%;
    max-width:1200px;

    margin:40px auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

}


/* ==========================================================
   CARD
==========================================================*/

.dashboard-item{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:18px;

    min-height:110px;

    padding:22px 24px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:all .35s ease;

}


/* ==========================================================
   GARIS ATAS
==========================================================*/

.dashboard-item::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

}


/* ==========================================================
   WARNA MASING-MASING KARTU
==========================================================*/

.dashboard-item:nth-child(1)::after{

    background:#1565C0;

}

.dashboard-item:nth-child(2)::after{

    background:#16A34A;

}

.dashboard-item:nth-child(3)::after{

    background:#EA580C;

}

.dashboard-item:nth-child(4)::after{

    background:#7C3AED;

}

.dashboard-item:nth-child(5)::after{

    background:#10B981;

}

.dashboard-item:nth-child(5) .icon{

    background:#ECFDF5;

    color:#10B981;

}


/* ==========================================================
   HOVER
==========================================================*/

.dashboard-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/* ==========================================================
   ICON
==========================================================*/

.dashboard-item .icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

    transition:.35s;

}


/* ==========================================================
   ICON WARNA
==========================================================*/

.dashboard-item:nth-child(1) .icon{

    background:#EEF5FF;

    color:#1565C0;

}

.dashboard-item:nth-child(2) .icon{

    background:#ECFDF5;

    color:#16A34A;

}

.dashboard-item:nth-child(3) .icon{

    background:#FFF7ED;

    color:#EA580C;

}

.dashboard-item:nth-child(4) .icon{

    background:#F5F3FF;

    color:#7C3AED;

}


/* ==========================================================
   ICON HOVER
==========================================================*/

.dashboard-item:hover .icon{

    transform:rotate(-8deg) scale(1.10);

}


/* ==========================================================
   CONTENT
==========================================================*/

.dashboard-content{

    flex:1;

}


/* ==========================================================
   TITLE
==========================================================*/

.dashboard-title{

    font-size:13px;

    color:var(--text-light);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:8px;

}


/* ==========================================================
   VALUE
==========================================================*/

.dashboard-value{

    font-size:18px;

    font-weight:700;

    color:var(--text);

    line-height:1.5;

}


#tanggal,
#jam,
#ucapan{

    font-size:18px;

    font-weight:700;

    color:var(--text);

}


/* ==========================================================
   SHINE EFFECT
==========================================================*/

.dashboard-item::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transition:.9s;

}

.dashboard-item:hover::before{

    left:150%;

}


/* ==========================================================
   ANIMATION
==========================================================*/

.dashboard-item{

    animation:dashboardFade .7s ease both;

}

.dashboard-item:nth-child(1){

    animation-delay:.10s;

}

.dashboard-item:nth-child(2){

    animation-delay:.20s;

}

.dashboard-item:nth-child(3){

    animation-delay:.30s;

}

.dashboard-item:nth-child(4){

    animation-delay:.40s;

}


@keyframes dashboardFade{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   TABLET
==========================================================*/

@media(max-width:992px){

.dashboard{

    grid-template-columns:repeat(2,1fr);

}

}


/* ==========================================================
   MOBILE
==========================================================*/

@media(max-width:768px){

.dashboard{

    grid-template-columns:1fr;

    gap:18px;

}

.dashboard-item{

    min-height:95px;

    padding:18px;

}

.dashboard-item .icon{

    width:52px;

    height:52px;

    font-size:24px;

}

.dashboard-title{

    font-size:12px;

}

.dashboard-value{

    font-size:16px;

}

}


/* ==========================================================
   EXTRA SMALL
==========================================================*/

@media(max-width:480px){

.dashboard-item{

    min-height:90px;

    padding:16px;

}

.dashboard-item .icon{

    width:46px;

    height:46px;

    font-size:22px;

}

.dashboard-value{

    font-size:15px;

}

}

/* ==========================================================
   AI ONLINE STATUS
==========================================================*/

.ai-online{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:#16A34A;

}


.online-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#16A34A;

    box-shadow:

        0 0 0 rgba(22,163,74,.5);

    animation:onlinePulse 2s infinite;

}


/* ==========================================================
   ONLINE ANIMATION
==========================================================*/

@keyframes onlinePulse{

    0%{

        transform:scale(1);

        box-shadow:

            0 0 0 0 rgba(22,163,74,.45);

    }

    70%{

        transform:scale(1.15);

        box-shadow:

            0 0 0 10px rgba(22,163,74,0);

    }

    100%{

        transform:scale(1);

        box-shadow:

            0 0 0 0 rgba(22,163,74,0);

    }

}


/* ==========================================================
   AI ONLINE
==========================================================*/

.ai-online{

    display:flex;

    align-items:center;

    gap:10px;

    color:#16A34A;

    font-weight:700;

}

.online-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#16A34A;

    animation:aiPulse 2s infinite;

}

@keyframes aiPulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(22,163,74,.45);

    }

    70%{

        transform:scale(1.15);

        box-shadow:0 0 0 10px rgba(22,163,74,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(22,163,74,0);

    }

}


/* ==========================================================
   STATUS WARNA
==========================================================*/

.status-ready{

    color:#16A34A;

}

.status-search{

    color:#2563EB;

}

.status-thinking{

    color:#7C3AED;

}

.status-success{

    color:#16A34A;

}

.status-warning{

    color:#EA580C;

}

/* ==========================================================
   AI ICON ANIMATION
==========================================================*/

#dashboardIcon{

    display:inline-block;

    transition:.35s ease;

}

.dashboard-item:hover #dashboardIcon{

    transform:scale(1.15) rotate(-8deg);

}