/*==========================================
BINGKAI DATA BUKU
==========================================*/
/* .main-page-data {
    display:grid;
    grid-template-columns:4fr 1fr;
    gap:25px;
    align-items:start;
} */

.main-page-data{
    display:grid;
    /* grid-template-columns:4fr 1fr; */
    grid-template-columns:minmax(0,1fr) minmax(300px,340px);
    grid-template-areas:
        "header toolbar"
        "books pagination";
    gap:24px;
    align-items:start;
}

.toolbar{
    grid-area:toolbar;
}

.book-grid{
    grid-area:books;
}

.pagination{
    grid-area:pagination;
}

/* Sidebar kanan */

.toolbar,
.pagination{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Daftar buku */

/* .book-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
} */

@media (max-width:768px){
    .main-page-data{
        grid-template-columns:1fr;
        grid-template-areas:
            "toolbar"
            "header"
            "books"
            "pagination";
    }
}
/* ================================================== */
    
/*======================================
TOOLBAR
======================================*/
    
.toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
    gap:20px;
    flex-wrap:wrap;
}
    
.search-box{
    display:flex;
    align-items:center;
    background:#fff;
    padding:0 18px;
    height:50px;
    border-radius:12px;
    box-shadow:var(--shadow);
    width:100%;
}
    
.search-box input{
    border:none;
    outline:none;
    flex:1;
    margin-left:10px;
    width:95%;
}
    
.toolbar-right{
    display:flex;
    gap:15px;
}
    
.toolbar select{
    padding:0 16px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#fff;
}
    
.btn-refresh{
    width:50px;
    height:50px;
    border:none;
    background:#2563eb;
    color:#fff;
    border-radius:12px;
    cursor:pointer;
}
    
/*======================================
BOOK GRID
======================================*/
/* ini tampilan list buku 2 kolom */
/* .book-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:25px;
} */

.book-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:25px;
}

@media (max-width:992px){
    .book-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:576px){
    .book-grid{
        grid-template-columns:1fr;
    }
}

.book-card{
    background:#fff;
    border-radius:20px;
    padding:15px;
    overflow:hidden;
    box-shadow:var(--shadow);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:.35s;
}

.book-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.book-card .book-cover{
    width:100%;
    position:relative;
    display:flex;
    justify-content: center;
    padding:10px 5px;
    height:auto;
    /* padding:15px; */
    overflow:hidden;
}

.book-cover img{
    width:75%;
    max-height:100%;
    object-fit:cover;
    transition:.35s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.book-card:hover .book-cover img{ transform:scale(1.05); }

.status{
    position:absolute;
    top:15px;
    right:15px;
    color:#fff;
    padding:7px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

.available{ background:#22c55e; }

.borrow{ background:#f59e0b; }

.empty{ background:#ef4444; }

.book-info{ padding:10px; }

.category{
    display:inline-block;
    background:#dbeafe;
    color:#2563eb;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    margin-bottom:12px;
}

.book-info h3{
    font-size:14px;
    margin-bottom:8px;
}

.book-info p{
    font-size:14px;
    color:#777;
    margin-bottom:18px;
}

.book-meta{
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
    color:#666;
    font-size:13px;
}

.book-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

.book-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.rating{
    color:#f59e0b;
    font-size:15px;
}

.actions{
    display:flex;
    gap:8px;
}

.actions button{
    width:26px;
    height:26px;
    border:none;
    border-radius:5px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.actions button:hover{ transform:scale(1.08); }
.view{ background:#2563eb; }
.edit{ background:#22c55e;}
.delete{ background:#ef4444; }

@media(max-width:768px){
    .book-grid{ grid-template-columns:1fr; }
}
    
/*======================================
BUTTON
======================================*/
.btn-action{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    color:#fff;
    margin-right:4px;
    transition:.3s;
}
    
.warna-biru{ background:#2563eb; }
.warna-hijau{ background:#22c55e; }
.warna-merah{ background:#ef4444; }
.btn-action:hover{ transform:scale(1.08); }
    
/*======================================
PAGINATION
======================================*/
.pagination{
    display:flex;
    justify-content:flex-end;
    margin-top:25px;
    gap:8px;
}
    
.pagination button{
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    background:#fff;
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:.3s;
}
    
.pagination button:hover{
    background:#2563eb;
    color:#fff;
}
    
.pagination .active{
    background:#2563eb;
    color:#fff;
}
    
/*======================================
RESPONSIVE
======================================*/
@media(max-width:768px){    
    .search-box{ width:100%;}
    .toolbar{ flex-direction:column; }
    .toolbar-right{ width:100%; justify-content:space-between; }
}