/* BAGIAN 1 -----> */
/*=========================================================
    PEMINJAMAN BUKU
=========================================================*/
.loan-container{
    display:flex;
    gap:25px;
    align-items:flex-start;
    width:100%;
    margin-top:20px;
}

/*=========================================================
    PANEL
=========================================================*/
.loan-left{
    flex:0 0 35%;
    display:flex;
    flex-direction:column;
    gap:25px;

    /* flex:0 0 35%; */
    min-width:320px;
    box-sizing:border-box;
}

.loan-right{
    /* flex:0 0 calc(65% - 25px); */
    display:flex;
    flex-direction:column;
    gap:25px;

    flex:1;
    min-width:0;
    box-sizing:border-box;
}

/*=========================================================
    PAGE HEADER
=========================================================*/
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.page-header h2{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:#1f2937;
}

.page-header h2 i{
    color:#2563eb;
    margin-right:10px;
}

.page-header p{
    margin-top:5px;
    color:#6b7280;
    font-size:12px;
}

.header-action{
    display:flex;
    gap:12px;
}

.header-action button{
    flex:1;
    font-size:12px;
}

/*=========================================================
    BUTTON
=========================================================*/
.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:11px 24px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:.25s;
    white-space:nowrap;
}

.btn-primary{
    background:#2563eb;
    color:#fff;
}

.btn-primary:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(37,99,235,.25);
}

.btn-secondary{
    background:#fff;
    color:#374151;
    border:1px solid #d1d5db;
}

.btn-secondary:hover{
    background:#f8fafc;
    transform:translateY(-2px);
}

/*=========================================================
    CARD
=========================================================*/
.card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:
        0 5px 15px rgba(0,0,0,.05);
    transition:.25s;
}

.card:hover{
    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}

.card-header{
    width:100%;
    display:flex;
    justify-content: start;
    align-items:center;
    /* gap:12px; */
    padding:3px 0px;
    font-size:14px;
    font-weight:700;
    color:#1f2937;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb;
}

.card-header i{
    width:38px;
    height:38px;
    margin-right:10px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2563eb;
    background:#eff6ff;
}

.card-body{
    padding:0;
    width:100%;
}

.card-body #keterangan{
    width:100%;
    min-height:100px;
    padding:12px 15px;
    font-size:12px;
    font-family:inherit;
    color:#374151;
    background:#fff;
    border:1px solid #dce3eb;
    border-radius:10px;
    resize:vertical;
    outline:none;
    transition:all .25s ease;
    box-sizing:border-box;
    line-height:1.6;
}

.card-body #keterangan:focus{
    font-size:12px;
    border-color:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

.card-body #keterangan::placeholder{
    color:#9ca3af;
    font-style:italic;
    font-size:12px;
}

/*=========================================================
    FORM GROUP
=========================================================*/
.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:18px;
}

.form-group:last-child{
    margin-bottom:0;
}

.form-group label{
    margin-bottom:8px;
    font-size:12px;
    font-weight:600;
    color:#374151;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:5px 10px;
    border-radius:10px;
    border:1px solid #d1d5db;
    background:#fff;
    outline:none;
    font-size:12px;
    transition:.25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

/*=========================================================
    RESPONSIVE
=========================================================*/
@media(max-width:1200px){
    .loan-container{
        flex-direction:column;
    }

    .loan-left,
    .loan-right{
        flex:0 0 100%;
        width:100%;
    }
}


@media(max-width:768px){

    .page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .header-action{
        width:100%;
    }

    .header-action button{
        flex:1;
    }
}

/* ========================================================================================================== */
/* BAGIAN 2 -----> */

/*=========================================================
    SEARCH BOX
=========================================================*/
.search-member,
.search-book{
    display:flex;
    align-items:center;
    gap:10px;
}

.search-member input,
.search-book input{
    /* flex:1;
    height:35px;
    width:1000%;
    font-size:12px; */

    width:100%;
    padding:5px 10px;
    border-radius:10px;
    border:1px solid #d1d5db;
    background:#fff;
    outline:none;
    font-size:12px;
    transition:.25s;
}

.search-member input:hover,
.search-book input:hover{
    border-color:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

.search-member input:focus,
.search-book input:focus{
    border-color:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

.search-member button,
.search-book button{
    padding:3px 8px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#2563eb;
    color:#fff;
    transition:.25s;
}

.search-member button:hover,
.search-book button:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(37,99,235,.20);
}

/*=========================================================
    PROFILE ANGGOTA
=========================================================*/
.member-profile{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-top:20px;
}

.member-photo{
    flex:0 0 110px;
}

.member-photo img{
    width:110px;
    min-height:130px;
    border-radius:14px;
    object-fit:cover;
    border:3px solid #eef2f7;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.member-info{
    flex:1;
    min-width:0;
}

.member-info h3{
    margin:0 0 10px;
    font-size:16px;
    font-weight:700;
    color:#1f2937;
}

.member-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3px 0;
    border-bottom:1px solid #edf2f7;
    gap:15px;
}

.member-item:last-child{
    border-bottom:none;
}

.member-item span:first-child{
    color:#64748b;
    font-size:12px;
}

.member-item strong{
    color:#111827;
    font-weight:600;
    text-align:right;
}

.badge-success{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    background:#dcfce7;
    color:#15803d;
    font-size:13px;
    font-weight:600;
}

/*=========================================================
    STATUS BADGE
=========================================================*/
.success{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border-radius:20px;
    background:#dcfce7;
    color:#166534;
    font-size:12px;
    font-weight:700;
}

.warning{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border-radius:20px;
    background:#fef3c7;
    color:#92400e;
    font-size:12px;
    font-weight:700;
}

.danger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border-radius:20px;
    background:#fee2e2;
    color:#991b1b;
    font-size:12px;
    font-weight:700;
}

/*=========================================================
    RINGKASAN TRANSAKSI
=========================================================*/
.summary-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    margin-bottom:12px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #eef2f7;
    transition:.25s;
}

.summary-item:last-child{
    margin-bottom:0;
}

.summary-item:hover{
    background:#eff6ff;
    border-color:#bfdbfe;
    transform:translateX(4px);
}

.summary-item span{
    color:#6b7280;
    font-size:12px;
}

.summary-item strong{
    color:#111827;
    font-size:12px;
    font-weight:700;
}

/*=========================================================
    CARD HOVER EFFECT
=========================================================*/
.loan-left .card,
.loan-right .card{
    transition:
        transform .25s,
        box-shadow .25s;
}

.loan-left .card:hover,
.loan-right .card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

/*=========================================================
    ANIMASI
=========================================================*/
@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(15px);
    }

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

.loan-left .card,
.loan-right .card{
    animation:fadeInUp .35s ease;
}

/*=========================================================
    RESPONSIVE
=========================================================*/
@media(max-width:768px){
    .member-profile{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .member-info{
        width:100%;
    }

    .member-item{
        justify-content:space-between;
    }
}

/* ========================================================================================================== */
/* BAGIAN 3 -----> */

/*=========================================================
    TABLE BUKU
=========================================================*/
.loan-book-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.loan-book-list .loan-empty{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.loan-empty h2{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:#1e293b;
    margin-bottom:10px;
}

.loan-empty p{
    font-size:12px;
    font-style:italic;
}

.loan-book-card{
    display:grid;
    grid-template-columns:100px 1fr 130px;
    gap:10px;
    align-items:top;
    background:#fff;
    /* border:1px solid #e5e7eb; */
    border-radius:12px;
    padding:0;
    transition:.25s;
}

.loan-book-card:hover{
    border-color:#3b82f6;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.loan-cover{
    width:90px;
    margin-top:5px;
}

.loan-cover img{
    width:100px;
    min-height:120px;
    border-radius:14px;
    object-fit:cover;
    border:3px solid #eef2f7;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.loan-info{
    min-width:0;
}

.loan-title{
    margin:0;
    font-size:14px;
    color:#1f2937;
    font-weight:600;
}

.loan-author{
    margin-top:8px;
    color:#64748b;
    font-size:14px;
}

.loan-meta{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.loan-meta span{
    padding:6px 12px;
    background:#f1f5f9;
    border-radius:30px;
    font-size:13px;
    color:#475569;
}

.loan-action{
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:stretch;
}

.loan-action label{
    font-size:12px;
    color:#64748b;
    font-weight:600;
}

.qty-control{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.qty-control button{
    padding:3px 8px;
    border:none;
    background:#2563eb;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
}

.qty-control input{
    width:55px;
    height:34px;
    text-align:center;
    border:1px solid #d1d5db;
    border-radius:8px;
}

.btn-delete-book{
    height:40px;
    border:none;
    border-radius:8px;
    background:#ef4444;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    font-size:12px;
}

@media(max-width:900px){
    .loan-book-card{
        grid-template-columns:80px 1fr;
    }
    
    .loan-action{
        grid-column:1 / span 2;
        margin-top:15px;
    }
}
/*=========================================================
    COVER BUKU
=========================================================*/
.book-cover{
    width:55px;
    height:78px;
    border-radius:8px;
    object-fit:cover;
    border:1px solid #e5e7eb;
    box-shadow:0 5px 10px rgba(0,0,0,.08);
}

.book-title{
    font-weight:700;
    color:#1f2937;
    margin-bottom:4px;
}

.book-isbn{
    font-size:12px;
    color:#9ca3af;
}


/*=========================================================
    JUMLAH BUKU
=========================================================*/
.qty-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.qty-btn{
    width:30px;
    height:30px;
    border:none;
    border-radius:8px;
    background:#eff6ff;
    color:#2563eb;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    transition:.25s;
}

.qty-btn:hover{
    background:#2563eb;
    color:#fff;
}

.qty-input{
    width:45px;
    height:32px;
    border:1px solid #d1d5db;
    border-radius:8px;
    text-align:center;
    font-weight:600;
}

/*=========================================================
    BUTTON HAPUS
=========================================================*/
.btn-delete{
    width:38px;
    height:38px;
    border:none;
    border-radius:10px;
    background:#fee2e2;
    color:#dc2626;
    cursor:pointer;
    transition:.25s;
}

.btn-delete:hover{
    background:#dc2626;
    color:#fff;
}

/*=========================================================
    EMPTY DATA
=========================================================*/
.empty-data{
    text-align:center;
    padding:50px 20px;
    color:#9ca3af;
}

.empty-data i{
    font-size:48px;
    margin-bottom:15px;
    color:#d1d5db;
}

.empty-data h4{
    margin:10px 0;
    color:#6b7280;
}

.empty-data p{
    margin:0;
}

/*=========================================================
    FOOTER TABLE
=========================================================*/
.loan-footer{
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:20px;
    border-top:1px solid #e5e7eb;
}

.loan-total{
    font-size:18px;
    font-weight:700;
    color:#2563eb;
}

/*=========================================================
    TEXTAREA CATATAN
=========================================================*/
#keterangan{
    width:100%;
    min-height:120px;
    resize:vertical;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:15px;
    font-size:14px;
    outline:none;
    transition:.25s;
}

#keterangan:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/*=========================================================
    SCROLL TABLE
=========================================================*/
.table-wrapper{
    max-height:500px;
    overflow-y:auto;
}

.table-wrapper::-webkit-scrollbar{
    width:8px;
}

.table-wrapper::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/*=========================================================
    BADGE STOK
=========================================================*/
.stock{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:35px;
    padding:5px 10px;
    border-radius:20px;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:700;
}

.stock.low{
    background:#fef3c7;
    color:#92400e;
}

.stock.empty{
    background:#fee2e2;
    color:#991b1b;
}

/*=========================================================
    RESPONSIVE
=========================================================*/
@media(max-width:992px){
    .table-wrapper{
        overflow-x:auto;
    }

    .table-loan{
        min-width:900px;
    }
}

@media(max-width:768px){
    .loan-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .loan-total{
        width:100%;
        text-align:right;
    }
}

/*=========================================================
    MODAL
=========================================================*/
.main-page-pinjam .pilih-buku{
    cursor:pointer;
}