/* =========================================================
   REKAP BULANAN
========================================================= */


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

.rekap-bulanan-filter {

    margin-top: 25px;

    padding: 22px;

}


.rekap-bulanan-filter .rekap-filter-title {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 18px;

}


.rekap-bulanan-filter-form {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    gap: 14px;

    align-items: end;

}


.rekap-bulanan-filter-form .form-group {

    min-width: 0;

}


.rekap-bulanan-filter-form label {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #344054;

}


.rekap-bulanan-filter-form .form-control {

    width: 100%;

    min-height: 42px;

    padding:
        0
        12px;

    border:
        1px solid
        #d7dce3;

    background: #ffffff;

    color: var(--text);

    outline: none;

    box-sizing: border-box;

}


.rekap-bulanan-filter-form .form-control:focus {

    border-color: var(--green);

    box-shadow:
        0 0 0 2px
        rgba(57,196,92,.12);

}


.rekap-bulanan-filter-actions {

    display: flex;

    gap: 8px;

    align-items: center;

}


/* =========================================================
   INFO / LEGENDA
========================================================= */

.rekap-bulanan-info {

    margin-top: 16px;

    padding: 16px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}


.rekap-bulanan-period {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.rekap-bulanan-period strong {

    font-size: 16px;

    color: var(--text);

}


.rekap-bulanan-period span {

    font-size: 13px;

    color: var(--muted);

}


.rekap-bulanan-legend {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}


.rekap-bulanan-legend-item {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    color: #475467;

}


.rekap-bulanan-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    display: inline-block;

}


.rekap-bulanan-dot.present {

    background: #159447;

}


.rekap-bulanan-dot.late {

    background: #e9a400;

}


.rekap-bulanan-dot.absent {

    background: #d92d20;

}


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

.rekap-bulanan-table-panel {

    margin-top: 20px;

    overflow: hidden;

}


.rekap-bulanan-table-head {

    min-height: 76px;

    padding:
        0
        20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}


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

.rekap-bulanan-table-wrap {

    width: 100%;

    overflow-x: auto;

    overflow-y: auto;

    max-height: 900px;

}


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

.rekap-bulanan-table {

    width: max-content;

    min-width: 100%;

    border-collapse: separate;

    border-spacing: 0;

}


.rekap-bulanan-table th,
.rekap-bulanan-table td {

    border-right:
        1px solid
        #e8ebef;

    border-bottom:
        1px solid
        #e8ebef;

}


.rekap-bulanan-table th {

    background: #fafbfc;

    color: #233148;

    font-size: 13px;

    font-weight: 700;

    text-align: center;

    padding:
        10px
        8px;

}


.rekap-bulanan-table td {

    font-size: 13px;

    text-align: center;

    padding:
        12px
        8px;

    white-space: nowrap;

}


/* =========================================================
   HEADER TABEL TETAP DI ATAS
========================================================= */

.rekap-bulanan-table thead th {

    position: sticky;

    top: 0;

    z-index: 10;

    background: #fafbfc;

}


/* =========================================================
   KOLOM STICKY KIRI
========================================================= */

.rekap-bulanan-table .sticky-no {

    position: sticky;

    left: 0;

    z-index: 5;

    width: 55px;

    min-width: 55px;

    max-width: 55px;

    background: #ffffff;

}


.rekap-bulanan-table th.sticky-no {

    position: sticky;

    top: 0;

    left: 0;

    z-index: 30;

    background: #fafbfc;

}


.rekap-bulanan-table .sticky-guru {

    position: sticky;

    left: 55px;

    z-index: 5;

    width: 260px;

    min-width: 260px;

    max-width: 260px;

    background: #ffffff;

    text-align: left;

}


.rekap-bulanan-table th.sticky-guru {

    position: sticky;

    top: 0;

    left: 55px;

    z-index: 30;

    background: #fafbfc;

    text-align: left;

}


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

.tanggal-header {

    width: 62px;

    min-width: 62px;

    max-width: 62px;

}


.tanggal-nomor {

    display: block;

    font-size: 14px;

    font-weight: 700;

    color: #233148;

}


.tanggal-hari {

    display: block;

    margin-top: 3px;

    font-size: 11px;

    font-weight: 500;

    color: #667085;

}


/* =========================================================
   HANYA HARI JUMAT MERAH
========================================================= */

.tanggal-header.friday .tanggal-nomor,
.tanggal-header.friday .tanggal-hari {

    color: #d92d20;

}


/* =========================================================
   GARIS PEMBATAS SETELAH HARI JUMAT
========================================================= */

.tanggal-header.friday {

    border-right:
        2px solid
        #cfd5dc;

}


.rekap-bulanan-cell.friday-column {

    border-right:
        2px solid
        #cfd5dc;

}


/* =========================================================
   NAMA GURU
========================================================= */

.rekap-bulanan-guru-name {

    font-weight: 600;

    color: #26344a;

    line-height: 1.35;

}


.rekap-bulanan-guru-id {

    margin-top: 3px;

    font-size: 11px;

    color: var(--muted);

}


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

.rekap-bulanan-cell.present {

    background: #e9f8ee;

    color: #149346;

    font-weight: 700;

}


.rekap-bulanan-cell.late {

    background: #fff5d7;

    color: #a97100;

    font-weight: 700;

}


.rekap-bulanan-cell.absent {

    background: #fff0f0;

    color: #d92d20;

    font-weight: 700;

}


/* =========================================================
   CATATAN
========================================================= */

.rekap-bulanan-note {

    margin-top: 14px;

    padding:
        12px
        15px;

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    background: #f5f9ff;

    border:
        1px solid
        #dbeafe;

    color: #315a87;

    font-size: 13px;

}


.rekap-bulanan-note strong {

    color: #233148;

}


.rekap-bulanan-note b {

    font-weight: 700;

}


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

@media (max-width: 1100px) {

    .rekap-bulanan-filter-form {

        grid-template-columns:
            1fr
            1fr;

    }


    .rekap-bulanan-filter-actions {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 600px) {

    .rekap-bulanan-filter {
        padding: 16px;
    }

    .rekap-bulanan-filter-form {
        grid-template-columns: 1fr;
    }

    .rekap-bulanan-filter-actions {
        grid-column: auto;
    }

    .rekap-bulanan-filter-actions .btn {
        flex: 1;
    }

    .rekap-bulanan-info {
        padding: 15px;
    }


    /* =====================================================
       HEADER REKAP MOBILE
    ===================================================== */
    
    .rekap-bulanan-table-head {
    
        min-height: auto;
    
        padding: 12px 15px;
    
        display: flex;
    
        flex-direction: row;
    
        align-items: flex-start;
    
        justify-content: space-between;
    
        gap: 10px;
    
    }
    
    
    /* =====================================================
       JUDUL + BULAN
    ===================================================== */
    
    .rekap-bulanan-table-head > div:first-child {
    
        min-width: 0;
    
        flex: 1;
    
    }
    
    
    .rekap-bulanan-table-head .panel-title {
    
        font-size: 18px;
    
        line-height: 1.2;
    
        white-space: nowrap;
    
    }
    
    
    .rekap-bulanan-table-head .rekap-subtitle {
    
        font-size: 14px;
    
        line-height: 1.2;
    
        margin-top: 3px;
    
    }
    
    
    /* =====================================================
       EXPORT PDF
    ===================================================== */
    
    .rekap-bulanan-table-head .btn {
    
        flex-shrink: 0;
    
        width: auto;
    
        min-width: 115px;
    
        padding: 9px 12px;
    
        white-space: nowrap;
    
    }
    
    
    /* =====================================================
       JUMLAH GURU
    ===================================================== */
    
    .rekap-bulanan-table-head .rekap-count {
    
        display: none;
    
    }


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

    .rekap-bulanan-table-wrap {

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

    }


    .rekap-bulanan-table {

        width: max-content;

        min-width: 100%;

    }


    /* =====================================================
       KOLOM NO
    ====================================================== */

    .rekap-bulanan-table .sticky-no {

        width: 55px;

        min-width: 55px;

        max-width: 55px;

    }


    /* =====================================================
       KOLOM NAMA GURU
    ====================================================== */

    .rekap-bulanan-table .sticky-guru {

        left: 55px;

        width: 170px;

        min-width: 170px;

        max-width: 170px;

    }


    .rekap-bulanan-guru-name {

        display: block;

        width: 100%;

        max-width: 100%;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .rekap-bulanan-guru-id {

        display: block;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


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

    .rekap-bulanan-table .tanggal-header {

        width: 58px;

        min-width: 58px;

        max-width: 58px;

        padding: 7px 3px;

        text-align: center;

    }


    .rekap-bulanan-table .tanggal-nomor {

        display: block;

        font-size: 14px;

        font-weight: 700;

        line-height: 1.1;

    }


    .rekap-bulanan-table .tanggal-hari {

        display: block;

        margin-top: 3px;

        font-size: 10px;

        line-height: 1;

    }


    /* =====================================================
       ISI KOLOM TANGGAL
    ====================================================== */

    .rekap-bulanan-table td:not(.sticky-no):not(.sticky-guru) {

        width: 58px;

        min-width: 58px;

        max-width: 58px;

    }

}