/* ==========================================================
   BMGG WMS V3.0
   table.css
   Advanced table features
========================================================== */

/* Sortable Table */
.table-sort{
cursor:pointer;
user-select:none;
}

.table-sort::after{
content:"↕";
margin-left:6px;
font-size:11px;
opacity:.4;
}

.table-sort.asc::after{
content:"↑";
opacity:1;
color:var(--primary);
}

.table-sort.desc::after{
content:"↓";
opacity:1;
color:var(--primary);
}

/* Row Actions */
.row-actions{
display:flex;
gap:6px;
opacity:0;
transition:opacity var(--transition-fast);
}

tr:hover .row-actions{
opacity:1;
}

.row-action-btn{
width:30px;
height:30px;
border:none;
border-radius:var(--radius-xs);
background:transparent;
cursor:pointer;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
transition:all var(--transition-fast);
color:var(--text-light);
}

.row-action-btn:hover{
background:var(--table-hover);
color:var(--primary);
}

.row-action-btn.danger:hover{
background:#FDECEC;
color:var(--danger);
}

/* Selected Row */
.table tbody tr.selected{
background:#E8F0FE !important;
}

/* Table with expandable rows */
.expand-row{
display:none;
}

.expand-row.show{
display:table-row;
}

.expand-row td{
padding:16px 24px;
background:#F8FAFC;
}

.expand-toggle{
cursor:pointer;
transition:transform .2s;
display:inline-block;
}

.expand-toggle.open{
transform:rotate(90deg);
}

/* Responsive table card mode */
@media(max-width:768px){
.table-responsive table,
.table-responsive thead,
.table-responsive tbody,
.table-responsive th,
.table-responsive td,
.table-responsive tr{
display:block;
}

.table-responsive thead{
display:none;
}

.table-responsive tbody tr{
padding:16px;
margin-bottom:12px;
border:1px solid var(--border-light);
border-radius:var(--radius-md);
background:#fff;
box-shadow:var(--shadow-xs);
}

.table-responsive tbody td{
display:flex;
justify-content:space-between;
padding:8px 0;
border:none;
font-size:13px;
}

.table-responsive tbody td::before{
content:attr(data-label);
font-weight:600;
color:var(--text-light);
font-size:12px;
}

.table-responsive tbody td:not(:last-child){
border-bottom:1px solid var(--border-light);
}
}

/* Table link */
.table-link{
color:var(--primary);
font-weight:500;
cursor:pointer;
}

.table-link:hover{
text-decoration:underline;
}

/* Table currency */
.table .currency::before{
content:"$";
margin-right:2px;
}