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

.table-responsive{

    border-radius:10px;

    overflow:auto;

    width:100%;

    display:block;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x pan-y;

    overscroll-behavior-x:contain;

    contain:layout paint;
}

.table{

    margin:0;

    vertical-align:middle;

    border-color:
    rgba(229,231,235,0.7);
}

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

.table thead th{

    background:#f8fafc !important;

    color:#475569;

    font-size:13px;

    font-weight:700;

    letter-spacing:0.3px;

    text-transform:uppercase;

    padding:13px 12px;

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

    white-space:nowrap;
}

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

.table tbody td{

    padding:13px 12px;

    border-bottom:
    1px solid rgba(229,231,235,0.6);

    color:#111827;

    font-size:14px;

    vertical-align:middle;
}

.table tbody tr{

    background:white;
}

.table tbody tr.table-warning-soft{

    background:#fff7ed;
}

.table tbody tr.table-warning-soft:hover{

    background:#ffedd5;
}

.table-compact thead th{

    padding:10px 10px;

    font-size:12px;
}

.table-compact tbody td{

    padding:9px 10px;

    font-size:13px;
}

.table-kader{

    min-width:1360px;

    width:1360px;

    table-layout:fixed;
}

.table-kader .col-id{

    width:56px;
}

.table-kader .col-action{

    width:80px;
}

.table-kader .col-name{

    width:190px;

    min-width:190px;

    max-width:190px;
}

.table-kader .col-gender{

    width:70px;
}

.table-kader .col-phone{

    width:112px;
}

.table-kader .col-job{

    width:105px;
}

.table-kader .col-marhalah{

    width:95px;
}

.table-kader .col-halaqah{

    width:180px;
}

.table-kader .col-role{

    width:220px;

    min-width:220px;

    max-width:220px;
}

.table-kader .col-category{

    width:96px;
}

.table-kader .col-source{

    width:78px;
}

.table-kader .col-status{

    width:78px;
}

.table-kader td{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.table-kader th{

    white-space:normal;

    line-height:1.15;

    vertical-align:middle;

    word-break:normal;
}

.table-kader td.col-name{

    white-space:normal;

    overflow:hidden;
}

.table-kader td.col-name .name-text{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-overflow:ellipsis;

    word-break:break-word;

    line-height:1.35;
}

.table-kader td.col-job,
.table-kader td.col-marhalah,
.table-kader td.col-category,
.table-kader td.col-source,
.table-kader td.col-status{

    white-space:normal;

    line-height:1.3;
}

.table-kader .badge{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;
}

.table-kader td.col-halaqah{

    white-space:normal;

    line-height:1.35;

    overflow:hidden;
}

.table-kader td.col-halaqah a,
.table-kader td.col-halaqah .halaqah-text{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-overflow:ellipsis;

    word-break:break-word;
}

.table-kader td.col-role{

    white-space:normal;

    line-height:1.35;

    overflow:hidden;
}

.table-kader td.col-role .role-text{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-overflow:ellipsis;

    word-break:break-word;
}

.table-kader tbody tr:nth-child(odd){

    background:#ffffff;
}

.table-kader tbody tr:nth-child(even){

    background:#f0fdf4;
}

.table-kader tbody tr:hover{

    background:#dcfce7;
}

.table-halaqah{

    min-width:820px;
}

.table-attendance{

    min-width:880px;
}

.table-attendance .col-action{

    width:124px;
}

.table-halaqah .col-member-count{

    width:64px;

    min-width:64px;
}

.table-position{

    min-width:1080px;

    table-layout:fixed;
}

.table-position .col-id{

    width:72px;
}

.table-position .col-action{

    width:92px;
}

.table-position .col-name{

    width:220px;
}

.table-position th:nth-child(4){

    width:140px;
}

.table-position th:nth-child(5){

    width:190px;
}

.table-position th:nth-child(6){

    width:110px;
}

.table-position th:nth-child(7){

    width:150px;
}

.table-position th:nth-child(8){

    width:92px;
}

.table-position thead th{

    overflow:hidden;

    text-overflow:clip;
}

.table-position td{

    line-height:1.35;
}

.table-position td:nth-child(3),
.table-position td:nth-child(4),
.table-position td:nth-child(5),
.table-position td:nth-child(6),
.table-position td:nth-child(7){

    white-space:normal;

    overflow-wrap:anywhere;
}

.table-position tbody tr:nth-child(odd){

    background:#ffffff;
}

.table-position tbody tr:nth-child(even){

    background:#f0fdf4;
}

.table-position tbody tr:hover{

    background:#dcfce7;
}

.halaqah-meta{

    margin-top:3px;

    color:#94a3b8;

    font-size:12px;

    line-height:1.35;

    font-weight:400;
}

.table:not(.table-kader):not(.table-position) tbody tr:hover{

    background:#f8fbff;
}

/* ================= TABLE CARD FEEL ================= */

.table-card{

    background:white;

    border-radius:12px;

    overflow:hidden;

    border:
    1px solid rgba(229,231,235,0.7);

    box-shadow:none;
}

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

.table-action{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:nowrap;

    white-space:nowrap;

    min-width:max-content;
}

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

.btn-action{

    width:34px;

    height:34px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    font-size:15px;
}

.btn-table-icon{

    width:32px;

    height:32px;

    min-width:32px;

    min-height:32px;

    flex:0 0 32px;

    padding:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;
}

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

.badge-soft-primary{

    background:
    rgba(37,99,235,0.12);

    color:#2563eb;
}

.badge-soft-success{

    background:
    rgba(22,163,74,0.12);

    color:#16a34a;
}

.badge-soft-warning{

    background:
    rgba(245,158,11,0.15);

    color:#d97706;
}

.badge-soft-danger{

    background:
    rgba(220,38,38,0.12);

    color:#dc2626;
}

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

.pagination{

    gap:8px;

    flex-wrap:wrap;
}

.page-item .page-link{

    border:none;

    min-width:42px;

    height:42px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#334155;

    font-weight:600;

    background:white;

    box-shadow:none;
}

.page-item.active .page-link{

    background:var(--color-primary);

    color:white;
}

.page-item .page-link:hover{

    background:#eff6ff;

    color:var(--color-primary);
}

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

.table-empty{

    text-align:center;

    padding:28px 16px;

    color:#94a3b8;
}

/* ================= SEARCH BAR ================= */

.table-filter-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:22px;

    flex-wrap:wrap;
}