/* =========================================================
   PEMBAYARAN.CSS
   STYLE MENYERUPAI DATA PENGGUNA
   APLIKASI ADMINISTRASI KEUANGAN
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Poppins', sans-serif;
    background: #eef3f8;
    color: #334155;
    font-size: 13px;
    overflow-x: hidden;
}


a {
    text-decoration: none;
}


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

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;

    background: #303a52;
    color: #fff;

    z-index: 1050;

    overflow-y: auto;
    overflow-x: hidden;

    transition: all .3s ease;

    box-shadow:
        3px 0 15px
        rgba(0,0,0,.08);
}


.sidebar::-webkit-scrollbar {
    width: 5px;
}


.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 10px;
}


/* =========================================================
   LOGO
========================================================= */

.sidebar-logo {
    height: 54px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.sidebar-logo img {
    max-width: 145px;
    max-height: 42px;

    object-fit: contain;
}


.logo-text {
    color: #fff;

    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   SCHOOL INFO
========================================================= */

.school-info {
    padding: 17px 18px 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);
}


.school-info h6 {
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    margin-bottom: 3px;
}


.school-info small {
    color: #aeb8c8;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   MENU SECTION
========================================================= */

.menu-section {
    padding:
        17px
        18px
        5px;

    color: #9ca8bc;

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.sidebar-menu {
    padding: 0 10px;
}


.sidebar-menu a {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 40px;

    padding:
        9px
        12px;

    color: #d6ddea;

    border-radius: 5px;

    margin-bottom: 3px;

    font-size: 11px;

    transition: .2s ease;
}


.sidebar-menu a i {
    width: 18px;

    text-align: center;

    font-size: 14px;
}


.sidebar-menu a:hover {
    color: #fff;

    background:
        rgba(255,255,255,.08);
}


.sidebar-menu a.active {
    background: #2196e9;

    color: #fff;

    font-weight: 500;

    box-shadow:
        0 4px 10px
        rgba(33,150,243,.2);
}


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

.sidebar-footer {
    padding:
        15px
        10px
        20px;
}


.logout-btn {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #ffb3b3;

    padding:
        10px
        12px;

    border-radius: 5px;

    font-size: 11px;
}


.logout-btn:hover {
    background:
        rgba(255,255,255,.08);

    color: #fff;
}


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

body.sidebar-collapsed .sidebar {
    width: 68px;
}


body.sidebar-collapsed .main-wrapper {
    margin-left: 68px;
}


body.sidebar-collapsed .school-info,
body.sidebar-collapsed .menu-section,
body.sidebar-collapsed .sidebar-menu span,
body.sidebar-collapsed .sidebar-footer span,
body.sidebar-collapsed .logo-text {
    display: none;
}


body.sidebar-collapsed .sidebar-logo {
    justify-content: center;
    padding: 0;
}


body.sidebar-collapsed .sidebar-menu {
    padding: 0 8px;
}


body.sidebar-collapsed .sidebar-menu a {
    justify-content: center;

    padding:
        11px
        0;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.main-wrapper {
    margin-left: 220px;

    min-height: 100vh;

    transition: all .3s ease;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    height: 54px;

    background: #1976d2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        18px;

    color: #fff;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.13);
}


.topbar-left {
    display: flex;

    align-items: center;

    gap: 15px;
}


.sidebar-toggle {
    width: 32px;
    height: 32px;

    border: none;

    background: transparent;

    color: #fff;

    font-size: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    cursor: pointer;
}


.sidebar-toggle:hover {
    background:
        rgba(255,255,255,.12);
}


.top-title {
    font-size: 13px;
    font-weight: 500;
}


.topbar-right {
    display: flex;

    align-items: center;

    gap: 7px;
}


.top-icon {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    border-radius: 50%;

    font-size: 16px;
}


.top-icon:hover {
    background:
        rgba(255,255,255,.13);
}


.user-profile {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: 6px;

    padding:
        4px
        7px;

    border-radius: 20px;
}


.user-profile:hover {
    background:
        rgba(255,255,255,.12);
}


.user-avatar {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fff;

    color: #1976d2;

    display: flex;

    align-items: center;

    justify-content: center;
}


.user-name {
    font-size: 10px;
    font-weight: 500;
}


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

.content {
    padding:
        17px
        22px
        30px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb-area {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;
}


.breadcrumb {
    margin: 0;

    font-size: 10px;
}


.breadcrumb-item a {
    color: #2196f3;
}


.breadcrumb-item.active {
    color: #8a96a8;
}


.page-date {
    font-size: 10px;

    color: #8995a6;
}


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

.stat-card {
    position: relative;

    min-height: 108px;

    padding:
        16px
        17px;

    border-radius: 5px;

    color: #fff;

    overflow: hidden;

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.08);

    transition: .25s ease;
}


.stat-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.13);
}


.stat-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    right: -35px;
    bottom: -60px;

    background:
        rgba(255,255,255,.07);
}


.stat-blue {
    background: #2789df;
}


.stat-green {
    background: #35b51a;
}


.stat-orange {
    background: #ff7414;
}


.stat-red {
    background: #f80043;
}


.stat-title {
    font-size: 10px;

    margin-bottom: 6px;
}


.stat-value {
    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;

    margin-bottom: 10px;
}


.stat-footer {
    font-size: 9px;
}


.stat-icon {
    position: absolute;

    right: 15px;
    top: 15px;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.24);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;
}


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

.panel {
    background: #fff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 5px;

    box-shadow:
        0 3px 12px
        rgba(32,54,74,.04);

    overflow: hidden;
}


.panel-header {
    min-height: 53px;

    padding:
        12px
        17px;

    border-bottom:
        1px solid
        #e8edf2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.panel-title {
    color: #4b5563;

    font-size: 12px;

    font-weight: 500;
}


.panel-title i {
    color: #2196f3;

    margin-right: 6px;
}


.panel-body {
    padding: 17px;
}


/* =========================================================
   SEARCH WRAPPER
========================================================= */

.search-wrapper {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.search-box {
    position: relative;
}


.search-box i {
    position: absolute;

    left: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #9aa6b5;

    font-size: 12px;
}


.search-box input {
    width: 230px;

    height: 34px;

    border:
        1px solid
        #dce3eb;

    border-radius: 4px;

    padding:
        0
        10px
        0
        30px;

    font-family: 'Poppins';

    font-size: 10px;

    outline: none;
}


.search-box input:focus {
    border-color: #2196f3;

    box-shadow:
        0 0 0 2px
        rgba(33,150,243,.08);
}


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

.payment-filter,
.class-filter,
.student-filter,
.status-filter,
.semester-filter,
.tahun-filter {
    height: 34px;

    border:
        1px solid
        #dce3eb;

    border-radius: 4px;

    padding:
        0
        28px
        0
        10px;

    font-family: 'Poppins';

    font-size: 10px;

    color: #64748b;

    outline: none;

    background: #fff;
}


.payment-filter:focus,
.class-filter:focus,
.student-filter:focus,
.status-filter:focus,
.semester-filter:focus,
.tahun-filter:focus {
    border-color: #2196f3;
}


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

.btn-search {
    height: 34px;

    border: none;

    background: #1976d2;

    color: #fff;

    border-radius: 4px;

    padding:
        0
        13px;

    font-size: 10px;

    font-family: 'Poppins';

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


.btn-search:hover {
    background: #1565c0;

    color: #fff;
}


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

.btn-reset {
    height: 34px;

    border:
        1px solid
        #dce3eb;

    background: #fff;

    color: #64748b;

    border-radius: 4px;

    padding:
        0
        12px;

    font-size: 10px;

    font-family: 'Poppins';

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


.btn-reset:hover {
    background: #f5f7fa;

    color: #475569;
}


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

.btn-add {
    height: 34px;

    border: none;

    background: #2196e9;

    color: #fff;

    border-radius: 4px;

    padding:
        0
        13px;

    font-size: 10px;

    font-family: 'Poppins';

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.btn-add:hover {
    background: #1976d2;

    color: #fff;
}


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

.btn-export {
    height: 34px;

    border: none;

    background: #35b51a;

    color: #fff;

    border-radius: 4px;

    padding:
        0
        13px;

    font-size: 10px;

    font-family: 'Poppins';

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.btn-export:hover {
    background: #2c9b16;

    color: #fff;
}


/* =========================================================
   ALERT
========================================================= */

.custom-alert {
    border-radius: 5px;

    border: none;

    font-size: 10px;

    margin-bottom: 15px;
}


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

.table-wrapper {
    width: 100%;

    overflow-x: auto;
}


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

.data-table {
    width: 100%;

    min-width: 1000px;

    border-collapse: collapse;

    margin: 0;
}


.data-table th {
    background: #f7f9fb;

    color: #475569;

    font-size: 10px;

    font-weight: 600;

    padding:
        11px
        10px;

    border:
        1px solid
        #e2e8f0;

    white-space: nowrap;
}


.data-table td {
    color: #697586;

    font-size: 10px;

    padding:
        10px;

    border:
        1px solid
        #e5eaf0;

    vertical-align: middle;
}


.data-table tbody tr {
    transition: .15s;
}


.data-table tbody tr:hover {
    background: #f8fbfe;
}


/* =========================================================
   NUMBER
========================================================= */

.number-cell {
    width: 45px;

    text-align: center;

    color: #8a96a5 !important;
}


/* =========================================================
   STUDENT / USER CELL
========================================================= */

.user-cell {
    display: flex;

    align-items: center;

    gap: 9px;
}


.table-avatar {
    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    background: #eaf4ff;

    color: #1976d2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;
}


.user-detail strong {
    display: block;

    color: #475569;

    font-size: 10px;

    font-weight: 600;

    margin-bottom: 2px;
}


.user-detail small {
    display: block;

    color: #9aa4b2;

    font-size: 8px;
}


/* =========================================================
   PAYMENT CODE
========================================================= */

.payment-code {
    color: #1976d2 !important;

    font-weight: 600;

    font-size: 9px;
}


/* =========================================================
   NOMINAL
========================================================= */

.nominal {
    color: #334155;

    font-weight: 600;

    white-space: nowrap;
}


.nominal-masuk {
    color: #159447;

    font-weight: 600;
}


.nominal-tunggakan {
    color: #e11d48;

    font-weight: 600;
}


/* =========================================================
   DATE
========================================================= */

.date-cell {
    white-space: nowrap;

    color: #64748b;
}


.date-cell i {
    color: #94a3b8;

    margin-right: 4px;
}


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

.payment-badge {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        5px
        8px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 500;

    white-space: nowrap;
}


.payment-lunas {
    color: #087443;

    background: #e8f8f0;
}


.payment-belum {
    color: #b42318;

    background: #fdecec;
}


.payment-sebagian {
    color: #b56513;

    background: #fff4e5;
}


.payment-proses {
    color: #2165a6;

    background: #eaf4ff;
}


.payment-batal {
    color: #64748b;

    background: #f1f5f9;
}


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

.status-badge {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        5px
        8px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 500;

    white-space: nowrap;
}


.status-aktif {
    color: #087443;

    background: #e8f8f0;
}


.status-nonaktif {
    color: #b42318;

    background: #fdecec;
}


.status-lunas {
    color: #087443;

    background: #e8f8f0;
}


.status-belum {
    color: #b42318;

    background: #fdecec;
}


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

.class-badge {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        5px
        8px;

    border-radius: 20px;

    background: #eaf4ff;

    color: #2165a6;

    font-size: 8px;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   JENIS PEMBAYARAN
========================================================= */

.jenis-pembayaran {
    display: flex;

    align-items: center;

    gap: 7px;
}


.jenis-icon {
    width: 30px;
    height: 30px;

    min-width: 30px;

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf4ff;

    color: #1976d2;

    font-size: 13px;
}


.jenis-detail strong {
    display: block;

    color: #475569;

    font-size: 10px;

    font-weight: 600;
}


.jenis-detail small {
    display: block;

    color: #9aa4b2;

    font-size: 8px;

    margin-top: 2px;
}


/* =========================================================
   ACTION
========================================================= */

.action-buttons {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;
}


.action-btn {
    width: 30px;
    height: 30px;

    border: none;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 11px;

    transition: .2s;
}


.action-detail {
    background: #2196e9;
}


.action-detail:hover {
    background: #1976d2;

    color: #fff;
}


.action-edit {
    background: #35b51a;
}


.action-edit:hover {
    background: #2c9b16;

    color: #fff;
}


.action-delete {
    background: #f80043;
}


.action-delete:hover {
    background: #d9003b;

    color: #fff;
}


.action-print {
    background: #6f42c1;
}


.action-print:hover {
    background: #59339d;

    color: #fff;
}


.action-whatsapp {
    background: #20a65a;
}


.action-whatsapp:hover {
    background: #168944;

    color: #fff;
}


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

.table-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 15px;
}


.showing-text {
    color: #8a95a5;

    font-size: 9px;
}


.pagination {
    margin: 0;
}


.pagination .page-link {
    color: #1976d2;

    border-color: #dfe5eb;

    font-size: 9px;

    min-width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        7px;
}


.pagination .page-item.active .page-link {
    background: #1976d2;

    border-color: #1976d2;

    color: #fff;
}


.pagination .page-item.disabled .page-link {
    color: #a8b1bd;

    background: #fff;
}


.pagination .page-link:hover {
    background: #f1f7fd;

    color: #1976d2;
}


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

.empty-data {
    text-align: center;

    padding:
        45px
        20px !important;
}


.empty-icon {
    width: 55px;
    height: 55px;

    margin:
        0
        auto
        10px;

    border-radius: 50%;

    background: #f1f5f9;

    color: #94a3b8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}


.empty-data strong {
    display: block;

    color: #64748b;

    font-size: 11px;

    margin-bottom: 4px;
}


.empty-data span {
    color: #9aa4b2;

    font-size: 9px;
}


/* =========================================================
   PAYMENT SUMMARY
========================================================= */

.payment-summary {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.summary-item {
    min-width: 120px;

    padding:
        9px
        12px;

    background: #f8fafc;

    border:
        1px solid
        #e5eaf0;

    border-radius: 5px;
}


.summary-label {
    display: block;

    color: #94a3b8;

    font-size: 8px;

    margin-bottom: 3px;
}


.summary-value {
    display: block;

    color: #475569;

    font-size: 11px;

    font-weight: 600;
}


.summary-value.green {
    color: #159447;
}


.summary-value.red {
    color: #e11d48;
}


.summary-value.blue {
    color: #1976d2;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    border-top:
        1px solid
        #dfe5eb;

    margin-top: 25px;

    padding:
        15px 0;

    color: #8a95a5;

    font-size: 9px;
}


.footer a {
    color: #2196f3;
}


/* =========================================================
   MODAL
========================================================= */

.modal-content {
    border: none;

    border-radius: 7px;

    overflow: hidden;
}


.modal-header {
    background: #fff;

    border-bottom:
        1px solid
        #edf0f3;
}


.modal-title {
    font-size: 13px;

    font-weight: 600;

    color: #475569;
}


.modal-body {
    padding: 20px;

    font-size: 11px;

    color: #64748b;
}


.modal-footer {
    border-top:
        1px solid
        #edf0f3;

    padding:
        12px
        20px;
}


/* =========================================================
   FORM CONTROL TAMBAHAN
========================================================= */

.form-control,
.form-select {
    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    border-color: #dce3eb;

    border-radius: 4px;
}


.form-control:focus,
.form-select:focus {
    border-color: #2196f3;

    box-shadow:
        0 0 0 2px
        rgba(33,150,243,.08);
}


/* =========================================================
   DETAIL PEMBAYARAN
========================================================= */

.detail-box {
    background: #fff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 5px;

    padding: 15px;

    margin-bottom: 15px;
}


.detail-label {
    color: #94a3b8;

    font-size: 8px;

    margin-bottom: 3px;
}


.detail-value {
    color: #475569;

    font-size: 10px;

    font-weight: 500;
}


.detail-value strong {
    font-weight: 600;
}


/* =========================================================
   BUKTI PEMBAYARAN
========================================================= */

.bukti-box {
    width: 100%;

    min-height: 120px;

    border:
        1px dashed
        #d7dee7;

    border-radius: 5px;

    background: #fafbfc;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 20px;

    text-align: center;
}


.bukti-box i {
    font-size: 28px;

    color: #94a3b8;

    margin-bottom: 8px;
}


.bukti-box span {
    color: #8a95a5;

    font-size: 9px;
}


/* =========================================================
   MOBILE SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {
    display: none;

    position: fixed;

    inset: 0;

    background:
        rgba(0,0,0,.35);

    z-index: 1040;
}


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

@media (max-width: 1199px) {

    .sidebar {
        width: 210px;
    }


    .main-wrapper {
        margin-left: 210px;
    }


    .stat-value {
        font-size: 18px;
    }

}


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

@media (max-width: 991px) {

    .sidebar {
        transform:
            translateX(-100%);

        width: 220px;
    }


    .main-wrapper {
        margin-left: 0;
    }


    body.sidebar-mobile-open .sidebar {
        transform:
            translateX(0);
    }


    body.sidebar-mobile-open .sidebar-overlay {
        display: block;
    }


    .content {
        padding: 15px;
    }


    .breadcrumb-area {
        align-items: flex-start;
    }


    .stat-card {
        min-height: 100px;
    }

}


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

@media (max-width: 767px) {

    .search-wrapper {
        width: 100%;
    }


    .search-box {
        width: 100%;
    }


    .search-box input {
        width: 100%;
    }


    .payment-filter,
    .class-filter,
    .student-filter,
    .status-filter,
    .semester-filter,
    .tahun-filter {
        flex: 1;

        min-width: 130px;
    }


    .btn-search,
    .btn-reset {
        flex: 1;
    }


    .table-footer {
        flex-direction: column;

        align-items: flex-start;
    }


    .panel-header {
        align-items: flex-start;

        gap: 10px;

        flex-direction: column;
    }


    .btn-add {
        width: 100%;

        justify-content: center;
    }


    .payment-summary {
        width: 100%;
    }


    .summary-item {
        flex: 1;
    }

}


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

@media (max-width: 575px) {

    .top-title {
        display: none;
    }


    .user-name {
        display: none;
    }


    .content {
        padding:
            12px;
    }


    .breadcrumb-area {
        display: block;
    }


    .page-date {
        margin-top: 6px;
    }


    .stat-value {
        font-size: 17px;
    }


    .panel-body {
        padding: 12px;
    }


    .panel-header {
        padding:
            12px;
        }

}