/* =========================================================
   FILTER
========================================================= */

.hari-filter{
    margin-top:25px;
    padding:20px;
}

.hari-filter-form{
    display:flex;
    align-items:end;
    gap:12px;
    flex-wrap:wrap;
}

.hari-filter-form .form-group{
    min-width:220px;
}

.hari-filter-form label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600;
    color:#344054;
}

.hari-filter-form .form-control{
    width:100%;
    min-height:42px;
    padding:0 12px;
    border:1px solid #d7dce3;
    background:#fff;
    color:var(--text);
    outline:none;
}

.hari-filter-form .form-control:focus{
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(57,196,92,.12);
}

.hari-filter-actions{
    display:flex;
    gap:8px;
}



/* =========================================================
   STATISTIK
========================================================= */

.hari-stats{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.hari-stat{
    min-height:125px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:18px;
}

.hari-stat-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    flex:0 0 48px;
}

.hari-stat-icon.blue{
    color:#1677ff;
}

.hari-stat-icon.green{
    color:#20b858;
}

.hari-stat-icon.yellow{
    color:#e9a900;
}

.hari-stat-icon.red{
    color:#e5484d;
}

.hari-stat-number{
    font-size:28px;
    font-weight:700;
    line-height:1.2;
}

.hari-stat-label{
    margin-top:5px;
    font-size:14px;
    font-weight:600;
    color:#24364a;
}



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

.hari-table-panel{
    margin-top:25px;
    overflow:hidden;
}

.hari-table-head{
    min-height:78px;
    padding:15px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--border);
}

.hari-subtitle{
    margin-top:7px;
    color:#536274;
    font-size:14px;
}

.hari-count{
    color:#536274;
    font-size:14px;
    white-space:nowrap;
}

.hari-table-wrap{
    overflow-x:auto;
}

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

.hari-table th,
.hari-table td{
    padding:14px 16px;
    border-bottom:1px solid #e8ebef;
    text-align:left;
    font-size:14px;
    white-space:nowrap;
}

.hari-table th{
    background:#fafbfc;
    color:#233148;
    font-weight:700;
}

.hari-table td{
    color:#26344a;
}

.hari-guru-name{
    font-weight:600;
    color:#172033;
}

.hari-guru-role{
    margin-top:4px;
    font-size:12px;
    color:#667085;
}



/* =========================================================
   STATUS ABSENSI
========================================================= */

.hari-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 11px;
    border-radius:18px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.hari-status.present{
    color:#149346;
    background:#e9f8ee;
}

.hari-status.late{
    color:#a97100;
    background:#fff5d7;
}

.hari-status.not-present{
    color:#d93036;
    background:#fff0f0;
}



/* =========================================================
   WHATSAPP STATUS
========================================================= */

.whatsapp-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 11px;
    border-radius:18px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.whatsapp-status.sent{
    color:#149346;
    background:#e9f8ee;
}

.whatsapp-status.pending{
    color:#a97100;
    background:#fff5d7;
}



/* =========================================================
   EMPTY
========================================================= */

.empty-time{
    color:#98a2b3;
}

.empty-state{
    padding:40px 20px !important;
    text-align:center !important;
    color:var(--muted);
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .hari-stats{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:700px){

    .hari-filter-form{
        display:block;
    }

    .hari-filter-form .form-group{
        width:100%;
        min-width:0;
        margin-bottom:12px;
    }

    .hari-filter-actions{
        width:100%;
    }

    .hari-filter-actions .btn{
        flex:1;
    }

    .hari-stats{
        grid-template-columns:1fr;
    }

    .hari-table-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .hari-count{
        white-space:normal;
    }

}