/* ==========================================
   Dashboard Table
========================================== */

.dashboard-table{

    width:100%;

    overflow-x:auto;

    border-radius:22px;

}


/* ==========================================
   Table
========================================== */

.cf-table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

    background:#FFFFFF;

}


/* ==========================================
   Table Head
========================================== */

.cf-table thead{

    background:linear-gradient(135deg,#0B3C5D,#0A9396);

}

.cf-table thead th{

    padding:18px 22px;

    text-align:left;

    color:#FFFFFF;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

    white-space:nowrap;

}


/* ==========================================
   Table Body
========================================== */

.cf-table tbody tr{

    transition:.30s;

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

}

.cf-table tbody tr:last-child{

    border-bottom:none;

}

.cf-table tbody tr:hover{

    background:#F8FCFD;

}

.cf-table td{

    padding:18px 22px;

    font-size:15px;

    color:var(--dashboard-text);

    vertical-align:middle;

}


/* ==========================================
   Profile Image
========================================== */

.table-profile-photo{

    width:60px;

    height:60px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid #E5F7F7;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}


/* ==========================================
   Name
========================================== */

.table-name{

    font-weight:600;

    color:var(--dashboard-title);

}


/* ==========================================
   Category Badge
========================================== */

.category-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 16px;

    border-radius:999px;

    background:#ECFEFF;

    color:#0A9396;

    border:1px solid #A5F3FC;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}


/* ==========================================
   Action Buttons
========================================== */

.table-actions{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.table-action-form{

    margin:0;

}


/* ==========================================
   Action Button
========================================== */

.table-action-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.30s;

    text-decoration:none;

}


/* ==========================================
   Edit Button
========================================== */

.edit-btn{

    background:#EFF6FF;

    color:#2563EB;

}

.edit-btn:hover{

    background:#2563EB;

    color:#FFFFFF;

    transform:translateY(-2px);

}


/* ==========================================
   Delete Button
========================================== */

.delete-btn{

    background:#FEF2F2;

    color:#DC2626;

}

.delete-btn:hover{

    background:#DC2626;

    color:#FFFFFF;

    transform:translateY(-2px);

}


/* ==========================================
   Icons
========================================== */

.table-action-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Empty Table
========================================== */

.table-empty{

    text-align:center;

    padding:70px 20px !important;

    font-size:17px;

    font-weight:600;

    color:#94A3B8;

}


/* ==========================================
   Scrollbar
========================================== */

.dashboard-table::-webkit-scrollbar{

    height:8px;

}

.dashboard-table::-webkit-scrollbar-track{

    background:#F1F5F9;

    border-radius:20px;

}

.dashboard-table::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

.dashboard-table::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:1199.98px){

    .cf-table{

        min-width:850px;

    }

}


@media (max-width:767.98px){

    .cf-table thead th{

        padding:15px 18px;

        font-size:14px;

    }

    .cf-table td{

        padding:15px 18px;

        font-size:14px;

    }

    .table-profile-photo{

        width:50px;

        height:50px;

    }

    .table-action-btn{

        width:38px;

        height:38px;

    }

}