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

.table-box{

    background:var(--white);
    border-radius:24px;
    padding:25px;
    box-shadow:var(--shadow);
    overflow-x:auto;
    margin-top:25px;

}

.table-title{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;

}

.table-title h2{

    font-size:22px;
    font-weight:700;
    color:var(--text);

}

table{

    width:100%;
    border-collapse:collapse;
    min-width:900px;

}

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

table thead th{

    background:var(--primary);
    color:#fff;
    padding:16px 18px;
    text-align:left;
    font-size:14px;
    font-weight:600;

}

table thead th:first-child{

    border-top-left-radius:14px;

}

table thead th:last-child{

    border-top-right-radius:14px;

}

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

table tbody td{

    padding:16px 18px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:14px;
    vertical-align:middle;

}

table tbody tr{

    transition:.25s;

}

table tbody tr:hover{

    background:var(--primary-light);

}

table tbody tr:last-child td{

    border-bottom:none;

}

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

.badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    color:#fff;

}

.badge-primary{

    background:var(--primary);

}

.badge-success{

    background:var(--success);

}

.badge-warning{

    background:var(--warning);

}

.badge-danger{

    background:var(--danger);

}

.badge-info{

    background:var(--info);

}

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

.action{

    display:flex;
    gap:8px;
    flex-wrap:wrap;

}

.btn-icon{

    width:38px;
    height:38px;
    border:none;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    cursor:pointer;
    transition:.25s;
    text-decoration:none;

}

.btn-view{

    background:var(--info);

}

.btn-edit{

    background:var(--warning);

}

.btn-delete{

    background:var(--danger);

}

.btn-print{

    background:var(--success);

}

.btn-icon:hover{

    transform:translateY(-2px);
    filter:brightness(.95);

}

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

.empty{

    text-align:center;
    color:var(--text2);
    padding:40px 20px;
    font-style:italic;

}

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

@media(max-width:768px){

.table-box{

padding:18px;

}

table{

min-width:700px;

}

table thead th,
table tbody td{

padding:12px;

font-size:13px;

}

}