/* ===========================================
   HALAMAN DATA PENGARANG
=========================================== */
.main-page-pengarang{
    animation:fadePage .25s ease;
    display:grid;
    /* grid-template-columns:4fr 1fr; */
    grid-template-columns:minmax(0,1fr) minmax(300px,340px);
    grid-template-areas:
        "header toolbar"
        "pengarang pagination";
    gap:24px;
    align-items:start;
}

/* ===========================================
   TOOLBAR
=========================================== */
.main-page-pengarang .toolbar{
    grid-area:toolbar;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.main-page-pengarang .toolbar-left{
    flex:1;
}

.main-page-pengarang .toolbar-right{
    display:flex;
    gap:10px;
}

/* ===========================================
   SEARCH BOX
=========================================== */
.main-page-pengarang .search-box{
    position:relative;
    max-width:420px;
}

.main-page-pengarang .search-box i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
}

.main-page-pengarang .search-box input{
    width:100%;
    height:48px;
    border:1px solid #dbe5f1;
    border-radius:12px;
    padding-left:45px;
    padding-right:15px;
    font-size:14px;
    transition:.25s;
    background:#fff;
}

.main-page-pengarang .search-box input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* ===========================================
   CARD
=========================================== */
.main-page-pengarang .card{
    grid-area:pengarang;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(30,41,59,.05);
    overflow:hidden;
}

.main-page-pengarang .card-body{
    padding:0;
}

/* ===========================================
   TABLE
=========================================== */
.main-page-pengarang .table-data{
    width:100%;
    border-collapse:collapse;
}

.main-page-pengarang .table-data thead{
    background:#f8fafc;
}

.main-page-pengarang .table-data th{
    padding:16px;
    text-align:left;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#64748b;
    border-bottom:1px solid #edf2f7;
}

.main-page-pengarang .table-data td{
    padding:16px;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
}

.main-page-pengarang .table-data tbody tr{
    transition:.2s;
}

.main-page-pengarang .table-data tbody tr:hover{
    background:#f8fbff;
}

/* ===========================================
   FOTO PENGARANG
=========================================== */
.author-photo{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #eef4ff;
    box-shadow:0 3px 8px rgba(0,0,0,.08);
}

/* ===========================================
   NAMA PENGARANG
=========================================== */
.author-name{
    font-weight:600;
    color:#233044;
    font-size:15px;
}

.author-info{
    font-size:13px;
    color:#94a3b8;
    margin-top:3px;
}

/* ===========================================
   BADGE
=========================================== */
.badge-book{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    padding:6px 12px;
    border-radius:30px;
    background:#e0f2fe;
    color:#0284c7;
    font-size:13px;
    font-weight:600;
}

/* ===========================================
   BUTTON AKSI
=========================================== */
.action-group{
    display:flex;
    gap:8px;
}

.btn-edit,
.btn-delete{
    width:38px;
    height:38px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}

.btn-edit{
    background:#e8f1ff;
    color:#2563eb;
}

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

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

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

/* ===========================================
   DATA KOSONG
=========================================== */
.table-empty{
    text-align:center;
    padding:70px 20px !important;
    color:#94a3b8;
    font-size:15px;
}

.table-empty i{
    display:block;
    font-size:32px;
    margin-bottom:12px;
    color:#cbd5e1;
}

/* ===========================================
   PAGINATION
=========================================== */
.main-page-pengarang .pagination{
    grid-area:pagination;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:25px;
}

/* ===========================================
   RESPONSIVE
=========================================== */
@media(max-width:992px){
    .main-page-pengarang .page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .main-page-pengarang .toolbar{
        flex-direction:column;
        gap:15px;
        align-items:stretch;
    }

    .main-page-pengarang .search-box{
        max-width:100%;
    }

    .main-page-pengarang .card{
        overflow:auto;
    }

    .main-page-pengarang .table-data{
        min-width:850px;
    }
}

/* ===========================================
   ANIMATION
=========================================== */
@keyframes fadePage{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}