/*
==========================================================
TABLES & DATATABLES
File: assets/css/tables.css
==========================================================
*/

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

.table{
    width:100%;
    margin-bottom:1rem;
    background:#fff;
    border-collapse:collapse;
    vertical-align:middle;
}

.table th,
.table td{
    padding:12px 15px;
    vertical-align:middle;
}

.table thead th{
    background:#01796F;
    color:#fff;
    font-weight:600;
    border:none;
}

.table tbody tr:hover{
    background:#F1F8F4;
}

.table-bordered{
    border:1px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd){
    background:#FAFCFB;
}

.table-responsive{
    overflow-x:auto;
}

/* ==========================
   DATATABLES
========================== */

.dataTables_wrapper{
    margin-top:15px;
    margin-bottom:15px;
}

.dataTables_length,
.dataTables_filter{
    margin-bottom:15px;
}

.dataTables_filter input{
    border:1px solid #ced4da;
    border-radius:6px;
    padding:6px 10px;
    margin-left:5px;
}

.dataTables_length select{
    border:1px solid #ced4da;
    border-radius:6px;
    padding:5px 10px;
}

.dataTables_info{
    margin-top:15px;
    color:#6c757d;
}

.dataTables_paginate{
    margin-top:15px;
}

/* ==========================
   PAGINATION
========================== */

.paginate_button{
    padding:6px 12px !important;
    border-radius:6px !important;
    margin:0 2px;
}

.paginate_button.current{
    background:#01796F !important;
    border:1px solid #01796F !important;
    color:#fff !important;
}

.paginate_button:hover{
    background:#015e56 !important;
    color:#fff !important;
}

/* ==========================
   EXPORT BUTTONS
========================== */

.dt-buttons{
    margin-bottom:15px;
}

.dt-button{
    background:#01796F !important;
    color:#fff !important;
    border:none !important;
    border-radius:6px !important;
    padding:8px 15px !important;
    margin-right:5px !important;
    transition:.3s;
}

.dt-button:hover{
    background:#015e56 !important;
}

/* ==========================
   SEARCH BOX
========================== */

.dataTables_filter label{
    font-weight:600;
    color:#01796F;
}

/* ==========================
   SORT ICONS
========================== */

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{
    background-position:right center;
}

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

.dataTables_empty{
    text-align:center;
    padding:25px;
    color:#6c757d;
}

/* ==========================
   CHECKBOX COLUMN
========================== */

.table-checkbox{
    width:45px;
    text-align:center;
}

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

.table-actions{
    white-space:nowrap;
}

.table-actions .btn{
    margin-right:4px;
    margin-bottom:2px;
}

/* ==========================
   BADGES
========================== */

.badge-status{
    padding:6px 10px;
    border-radius:20px;
    font-size:12px;
}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    .dt-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .dt-button{
        margin-bottom:5px !important;
    }

    .table th,
    .table td{
        white-space:nowrap;
    }

}