/* Bagian 3 */
/* =================================================== */
/*==========================================
BINGKAI FORM
==========================================*/
.main-dashboard {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    align-items:start;
}

/*==================================================
    DASHBOARD GRID
==================================================*/
.grid{
    width:100%;
}

/*==================================================
    PANEL
==================================================*/
.panel{
    background:#fff;
    border-radius:22px;
    padding:25px;
    box-shadow:var(--shadow);
    transition:.3s;
}

.panel:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.panel.large{
    min-height:420px;
}

/*==================================================
    PANEL HEADER
==================================================*/
.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.panel-header h3{
    font-size:20px;
    font-weight:600;
    color:#222;
}

.panel-header a{
    text-decoration:none;
    color:var(--primary);
    font-size:14px;
    font-weight:500;
}

.panel-header a:hover{
    text-decoration:underline;
}

.panel-header select{
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 12px;
    background:#fff;
    outline:none;
    font-family:'Poppins',sans-serif;
}

/*==================================================
    CHART
==================================================*/
#chart{
    width:100% !important;
    height:320px !important;
}

/*==================================================
    BOOK LIST
==================================================*/
.book-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.book{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px;
    border-radius:16px;
    transition:.3s;
}

.book:hover{
    background:#f8faff;
}

.book img{
    width:60px;
    height:85px;
    object-fit:cover;
    border-radius:10px;
    box-shadow:0 5px 12px rgba(0,0,0,.15);
}

.book div{
    flex:1;
}

.book h4{
    font-size:15px;
    margin-bottom:5px;
    color:#222;
}

.book small{
    color:#777;
    font-size:13px;
}

.book span{
    background:#dcfce7;
    color:#15803d;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/*==================================================
    ACTIVITY
==================================================*/
.activity{
    list-style:none;
}

.activity li{
    position:relative;
    padding-left:28px;
    margin-bottom:18px;
    color:#555;
    line-height:1.6;
    font-size:14px;
}

.activity li::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    position:absolute;
    left:0;
    top:8px;
}

.activity li b{
    color:#222;
}

/*==================================================
    REMINDER
==================================================*/
.reminder{
    list-style:none;
}

.reminder li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid #edf1f7;
    font-size:15px;
}

.reminder li:last-child{
    border-bottom:none;
}

.reminder span{
    min-width:34px;
    height:34px;
    background:var(--primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:13px;
    font-weight:600;
}

/*==================================================
    STATUS BADGE
==================================================*/
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge.success{
    background:#dcfce7;
    color:#15803d;
}

.badge.warning{
    background:#fef3c7;
    color:#b45309;
}

.badge.danger{
    background:#fee2e2;
    color:#b91c1c;
}

.badge.primary{
    background:#dbeafe;
    color:#2563eb;
}

/*==================================================
    TABLE (UNTUK HALAMAN LAIN)
==================================================*/
.table-responsive{
    overflow:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#f8f9fb;
    padding:14px;
    text-align:left;
    font-size:14px;
}

table td{
    padding:14px;
    border-bottom:1px solid #edf1f7;
    font-size:14px;
}

table tr:hover{
    background:#fafcff;
}

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

.card,
.panel{
    animation:fadeUp .5s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*==================================================
    CUSTOM SCROLLBAR
==================================================*/
::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-thumb{
    background:#cfd8e3;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#aab7c7;
}

::-webkit-scrollbar-track{
    background:#f5f7fb;
}

/*==================================================
    RESPONSIVE
==================================================*/
@media(max-width:1200px){
    .grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .panel{
        padding:20px;
    }

    .panel-header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .book{
        align-items:flex-start;
    }

    .book img{
        width:55px;
        height:78px;
    }

}

@media(max-width:576px){
    .panel.large{
        min-height:auto;
    }

    #chart{
        height:250px !important;
    }

    .book{
        flex-wrap:wrap;
    }

    .book span{
        margin-left:75px;
    }

    .activity li{
        font-size:13px;
    }

    .reminder li{
        font-size:14px;
    }
}

/*=========================================
    COLLAPSE SIDEBAR
=========================================*/
.sidebar{
    width:270px;
    transition:width .35s ease;
}

.content{
    margin-left:270px;
    width:calc(100% - 270px);
    transition:.35s;
}

/* sidebar kecil */

.sidebar.collapsed{
    width:88px;
}

/* content ikut bergeser */
.sidebar.collapsed + .content{
    margin-left:88px;
    width:calc(100% - 88px);
}

/*=========================================
    HIDE TEXT
=========================================*/
.sidebar.collapsed .logo h3,
.sidebar.collapsed .logo span,
.sidebar.collapsed .menu-text,
.sidebar.collapsed .arrow,
.sidebar.collapsed .sidebar-card h3,
.sidebar.collapsed .sidebar-card p,
.sidebar.collapsed .logout span{
    opacity:0;
    visibility:hidden;
}

/*=========================================
    CENTER ICON
=========================================*/
.sidebar.collapsed .menu a{
    justify-content:center;
    padding:16px;
}

.sidebar.collapsed .menu-left{
    justify-content:center;
}

.sidebar.collapsed .menu-left i{
    margin:0;
    font-size:20px;
}

/*=========================================
    LOGO
=========================================*/
.sidebar.collapsed .logo{
    justify-content:center;
}

.sidebar.collapsed .logo-icon{
    margin:0;
}

/*=========================================
    SIDEBAR CARD
=========================================*/
.sidebar.collapsed .sidebar-card{
    padding:15px;
}

.sidebar.collapsed .sidebar-card img{
    width:45px;
}

/*=========================================
    SUBMENU
=========================================*/
/* .sidebar.collapsed .submenu{
    display:none;
} */

.menu li{
    position:relative;
}

.tooltip{
    position:absolute;
    left:85px;
    top:50%;
    transform:translateY(-50%);
    background:#2563eb;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    font-size:13px;
    pointer-events:none;
    z-index:999;
}

.sidebar.collapsed .menu li:hover .tooltip{
    opacity:1;
    visibility:visible;
}

@media(max-width:992px){
    .sidebar{
        left:-270px;
        width:270px;
        position:fixed;
        z-index:999;
    }
    
    .sidebar.show{
        left:0;
    }
    
    .sidebar.collapsed{
        width:270px;
    }
    
    .sidebar.collapsed .menu-text,
    .sidebar.collapsed .logo h3,
    .sidebar.collapsed .logo span,
    .sidebar.collapsed .sidebar-card h3,
    .sidebar.collapsed .sidebar-card p{
        display:block;
        opacity:1;
        visibility:visible;
    }
    
    .content{
        margin-left:0;
        width:100%;
    }
}