/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : components/table.css
   Purpose : Professional Table System
========================================================== */


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

.table-card{
    overflow:hidden;
}

.table-responsive{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}


/* ===========================
   SCROLLBAR
=========================== */

.table-responsive::-webkit-scrollbar{
    height:8px;
}

.table-responsive::-webkit-scrollbar-track{
    background:#f1f5f9;
}

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

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


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

.table{
    width:100%;
    margin:0;
    border-collapse:separate;
    border-spacing:0;
    background:var(--table-bg);
    color:var(--text);
    font-size:14px;
}


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

.table thead{
    background:var(--table-head);
}

.table thead th{

    padding:15px 16px;

    background:var(--table-head);

    color:#fff;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    white-space:nowrap;

    border:none;

    vertical-align:middle;

}

.table thead th:first-child{
    border-top-left-radius:var(--radius-md);
}

.table thead th:last-child{
    border-top-right-radius:var(--radius-md);
}


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

.table tbody td{

    padding:14px 16px;

    border-bottom:1px solid var(--border);

    vertical-align:middle;

    color:var(--text);

    transition:var(--transition);

}

.table tbody tr{
    transition:var(--transition);
}

.table tbody tr:nth-child(even){
    background:#fafbfc;
}

.table tbody tr:hover td{
    background:var(--table-hover);
}

.table tbody td:first-child{
    font-weight:600;
}

.table tbody td:last-child{
    white-space:nowrap;
}


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

.table tfoot td{

    padding:15px 16px;

    font-weight:600;

    background:#f8fafc;

    border-top:1px solid var(--border);

}


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

.table-bordered{
    border:1px solid var(--border);
}

.table-bordered th,
.table-bordered td{
    border:1px solid var(--border);
}


/* ===========================
   STRIPED
=========================== */

.table-striped tbody tr:nth-child(odd){
    background:#fcfcfd;
}


/* ===========================
   HOVER
=========================== */

.table-hover tbody tr:hover{
    background:var(--table-hover);
}


/* ===========================
   COMPACT
=========================== */

.table-sm th,
.table-sm td{
    padding:10px 12px;
}


/* ===========================
   LARGE
=========================== */

.table-lg th,
.table-lg td{
    padding:18px 20px;
}


/* ===========================
   ALIGNMENT
=========================== */

.table-middle td,
.table-middle th{
    vertical-align:middle;
}

.table-center td,
.table-center th{
    text-align:center;
}

.table-right td,
.table-right th{
    text-align:right;
}


/* ===========================
   PHOTO
=========================== */

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

.table-photo{

    display:block;

    width:46px;
    min-width:46px;

    height:46px;
    min-height:46px;

    max-width:none;

    margin:auto;

    object-fit:cover;
    object-position:center;

    border-radius:50%;
    border:2px solid var(--border);

    background:var(--white);

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

    flex-shrink:0;

}

.table-photo:hover{

    transform:scale(1.08);

    border-color:var(--primary);

}


/* ===========================
   EMPTY STATE
=========================== */

.table-empty{
    padding:60px 20px;
    text-align:center;
    color:var(--text-muted);
}

.table-empty i{
    display:block;
    margin-bottom:15px;
    font-size:48px;
    color:var(--gray-300);
}

.table-empty h5{
    margin-bottom:8px;
    color:var(--heading-color);
}

.table-empty p{
    margin:0;
    color:var(--text-muted);
}


/* ===========================
   LOADING
=========================== */

.table-loading{
    padding:40px;
    text-align:center;
}


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

@media (max-width:768px){

    .table{

        font-size:13px;

    }

    .table thead th{

        padding:12px;

        font-size:11px;

    }

    .table tbody td{

        padding:12px;

    }

    .table-photo{

        width:40px;

        height:40px;

    }

}

@media (max-width:576px){

    .table{

        font-size:12px;

    }

    .table thead th{

        padding:10px;

        font-size:10px;

    }

    .table tbody td{

        padding:10px;

    }

    .table-photo{

        width:36px;

        height:36px;

    }

}