/* ===============================
   GLOBAL
=================================*/

body{
    margin:0;
    padding:0;
    background:#eef2f7;
    font-family:'Segoe UI',sans-serif;
    overflow-x:hidden;
}

/* ===============================
   SIDEBAR
=================================*/

.sidebar{

    position:fixed;

    top:0;
    left:0;

    width:250px;
    height:100vh;

    background:#1f2937;

    color:white;

    z-index:999;

}

.logo{

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111827;

    font-size:22px;

    font-weight:bold;

    letter-spacing:1px;

}

.sidebar a{

    display:block;

    padding:14px 20px;

    color:#d1d5db;

    text-decoration:none;

    transition:.3s;

    font-size:15px;

}

.sidebar a:hover{

    background:#2563eb;

    color:white;

}

.sidebar a.active{

    background:#2563eb;

    color:white;

    border-left:5px solid #fff;

}

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

.content{

    margin-left:250px;

    padding:25px;

}

/* ===============================
   HEADER
=================================*/

.topbar{

    background:white;

    border-radius:12px;

    padding:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    margin-bottom:25px;

}

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

.stat-card{

    border:none;

    border-radius:12px;

    color:white;

    box-shadow:0 2px 10px rgba(0,0,0,.1);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-4px);

}

/* ===============================
   TABLE
=================================*/

.table{

    background:white;

    border-radius:10px;

    overflow:hidden;

}

.table thead th{

    background:#2563eb;

    color:white;

    text-align:center;

    vertical-align:middle;

}

.table td{

    vertical-align:middle;

}

.table tbody tr:hover{

    background:#edf5ff;

}

/* ===============================
   BADGE
=================================*/

.badge{

    min-width:95px;

    font-size:12px;

}

/* ===============================
   BUTTON
=================================*/

.btn{

    border-radius:8px;

    font-weight:bold;

}

/* ==========================================
   LAPORAN MINGGUAN
========================================== */

.week-table{
    font-size:13px;
}

.week-table th{
    text-align:center;
    background:#2563eb;
    color:#fff;
    vertical-align:middle;
}

.week-table td{
    text-align:center;
    vertical-align:middle;
}

.dept-header{
    background:#1f2937 !important;
    color:#fff !important;
    font-weight:bold;
    text-align:left !important;
}

.nama-cell{
    text-align:left !important;
}

.special-name{
    color:#0d6efd;
    font-weight:700;
}

.badge-swh{
    background:#0d6efd;
    color:#fff;
    padding:3px 8px;
    border-radius:6px;
    font-size:11px;
}

.swh-cell{
    background:#0d6efd !important;
    color:#ffffff !important;
    font-weight:bold;
}

.cuti-name{
    color:#198754;
    font-weight:bold;
}

.badge-cuti{
    background:#198754;
    color:#fff;
    padding:3px 8px;
    border-radius:6px;
    font-size:11px;
}

.cuti-cell{
    background:#198754 !important;
    color:#ffffff !important;
    font-weight:bold;
}

.week-saturday{
    background:#fff3cd !important;
}

.week-sunday{
    background:#f8d7da !important;
}

.week-libur{
    background:#e2e3e5 !important;
    color:#555;
}

.week-x{
    background:#dc3545 !important;
    color:#fff;
    font-weight:bold;
}

.week-partial{
    background:#d28b8b !important;
}

.week-late{
    background:#ffc107 !important;
}

.table-responsive{
    border-radius:10px;
}