/* ==========================================================================
   COMANDA — Tables & Datatables
   ========================================================================== */

.table-card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
}

.table-responsive-wrap{ overflow-x:auto; }

.table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
  font-size:.86rem;
}

.table thead th{
  background:var(--paper);
  color:var(--ink-500);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--ink-100);
  white-space:nowrap;
}
.table thead th.sortable{ cursor:pointer; user-select:none; }
.table thead th.sortable i{ font-size:.7rem; margin-left:.25rem; color:var(--ink-300); }
.table thead th.sortable:hover{ color:var(--ink-700); }

.table tbody td{
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--ink-100);
  color:var(--ink-700);
  vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background var(--dur-fast) var(--ease); }
.table tbody tr:hover{ background:var(--paper); }

.table .cell-primary{ color:var(--ink-900); font-weight:600; }

.table-cell-user{ display:flex; align-items:center; gap:.7rem; }
.table-cell-user img{
  width:36px; height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.table-cell-user .name{ font-weight:600; color:var(--ink-900); font-size:.87rem; }
.table-cell-user .sub{ font-size:.76rem; color:var(--ink-500); }

.row-actions{
  display:flex;
  align-items:center;
  gap:.35rem;
  justify-content:flex-end;
}

/* ---------------------------------------------------------------------- */
/* Datatable toolbar (search / filters / add button)                     */
/* ---------------------------------------------------------------------- */

.datatable-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--ink-100);
}

.datatable-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding:1rem 1.4rem;
  border-top:1px solid var(--ink-100);
}
.datatable-count{ font-size:.8rem; color:var(--ink-500); }
.datatable-count strong{ color:var(--ink-900); }

/* Pagination */
.pagination-comanda{
  display:flex;
  align-items:center;
  gap:.3rem;
  list-style:none;
  margin:0; padding:0;
}
.pagination-comanda button{
  min-width:32px; height:32px;
  padding:0 .4rem;
  border-radius:var(--radius-xs);
  border:1px solid var(--ink-200);
  background:var(--white);
  color:var(--ink-700);
  font-size:.8rem;
  font-weight:600;
}
.pagination-comanda button:hover{ background:var(--ink-100); }
.pagination-comanda button.active{
  background:var(--navy-900);
  border-color:var(--navy-900);
  color:var(--white);
}
.pagination-comanda button:disabled{ opacity:.4; pointer-events:none; }
.pagination-comanda .ellipsis{ color:var(--ink-300); padding:0 .3rem; }

/* Empty state within a table */
.table-empty{
  padding:3rem 1rem;
  text-align:center;
  color:var(--ink-500);
}
.table-empty i{ font-size:2rem; color:var(--ink-200); margin-bottom:.6rem; display:block; }

/* Responsive: collapse to stacked cards below 768px */
@media (max-width: 767.98px){
  .table-stack thead{ display:none; }
  .table-stack tbody tr{
    display:block;
    padding:.9rem 1.1rem;
    border-bottom:8px solid var(--paper);
  }
  .table-stack tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:0;
    padding:.4rem 0;
    text-align:right;
  }
  .table-stack tbody td::before{
    content:attr(data-label);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--ink-500);
    text-align:left;
  }
}