/*==================================================
  tables.css
  LinksHub UI v2
==================================================*/

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

.table-wrapper{

    width:100%;

    overflow-x:auto;

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

    border-radius:var(--radius-lg);

    background:var(--surface);

    box-shadow:var(--shadow);

}

.table-card{

    background:var(--surface);

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

    border-radius:var(--radius-lg);

    overflow:hidden;

}

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

.table{

    width:100%;

    border-collapse:collapse;

    min-width:800px;

}

.table thead{

    background:var(--surface-alt);

}

.table thead th{

    padding:18px 20px;

    text-align:left;

    font-size:14px;

    font-weight:700;

    color:var(--text);

    white-space:nowrap;

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

}

.table tbody td{

    padding:18px 20px;

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

    color:var(--text-light);

    vertical-align:middle;

}

.table tbody tr{

    transition:var(--transition);

}

.table tbody tr:hover{

    background:rgba(79,70,229,.04);

}

.table tbody tr:last-child td{

    border-bottom:none;

}

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

.table-sm thead th{

    padding:12px 16px;

}

.table-sm tbody td{

    padding:12px 16px;

}

/*==============================
  Striped
==============================*/

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

    background:#fafafa;

}

/*==============================
  Bordered
==============================*/

.table-bordered td,
.table-bordered th{

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

}

/*==============================
  Sticky Header
==============================*/

.table-sticky thead th{

    position:sticky;

    top:0;

    z-index:10;

}

/*==============================
  Sortable
==============================*/

.sortable{

    cursor:pointer;

    user-select:none;

}

.sortable:hover{

    color:var(--primary);

}

.sort-icon{

    margin-left:6px;

    font-size:12px;

    color:var(--muted);

}

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

.table-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 24px;

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

    background:var(--surface);

}

.table-toolbar-left{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.table-toolbar-right{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

/*==================================================
  Search Box
==================================================*/

.table-search{

    position:relative;

    min-width:280px;

}

.table-search input{

    width:100%;

    padding:12px 16px 12px 42px;

}

.table-search i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:var(--muted);

}

/*==================================================
  Filters
==================================================*/

.table-filter{

    min-width:170px;

}

.table-filter select{

    min-height:46px;

}

/*==================================================
  Bulk Actions
==================================================*/

.bulk-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.bulk-count{

    font-size:14px;

    font-weight:600;

    color:var(--muted);

}

/*==================================================
  Status Badge
==================================================*/

.status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

}

.status-active{

    background:#dcfce7;

    color:#166534;

}

.status-active::before{

    background:#22c55e;

}

.status-disabled{

    background:#fee2e2;

    color:#991b1b;

}

.status-disabled::before{

    background:#ef4444;

}

.status-pending{

    background:#fef3c7;

    color:#92400e;

}

.status-pending::before{

    background:#f59e0b;

}

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

.table-actions{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

.action-btn{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:var(--surface-alt);

    transition:var(--transition);

}

.action-btn:hover{

    transform:translateY(-2px);

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

}

.action-view{

    color:var(--info);

}

.action-edit{

    color:var(--warning);

}

.action-copy{

    color:var(--primary);

}

.action-delete{

    color:var(--danger);

}

/*==================================================
  Checkbox Column
==================================================*/

.checkbox-column{

    width:48px;

    text-align:center;

}

.checkbox-column input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

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

.table-empty{

    padding:70px 25px;

    text-align:center;

}

.table-empty i{

    font-size:52px;

    color:var(--primary);

    margin-bottom:18px;

}

.table-empty h3{

    margin-bottom:10px;

}

.table-empty p{

    color:var(--muted);

}

/*==================================================
  Responsive
==================================================*/

@media(max-width:992px){

.table-toolbar{

    flex-direction:column;

    align-items:stretch;

}

.table-toolbar-left,

.table-toolbar-right{

    width:100%;

}

.table-search{

    min-width:100%;

}

}

@media(max-width:768px){

.table{

    min-width:650px;

}

.bulk-actions{

    width:100%;

}

.table-actions{

    justify-content:center;

}

}