/* ── Table Widget ───────────────────────────────────────────────────────── */

/* Search */
.trad-table-search-wrap { margin-bottom: 16px; }
.trad-table-search {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.trad-table-search:focus { border-color: #6040e0; }

/* Scroll wrapper */
.trad-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Table */
.trad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

/* Header */
.trad-table thead th {
  background: #6040e0;
  color: #fff;
  padding: 14px 16px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #e5e5e5;
  position: relative;
  user-select: none;
}

/* Sortable */
.trad-table--sortable thead th { cursor: pointer; }
.trad-table--sortable thead th:hover { background: #4f32c0; }
.trad-sort-icon { margin-left: 6px; font-size: .75em; opacity: .6; }
.trad-table thead th.trad-sort-asc  .trad-sort-icon::after { content: ' ↑'; }
.trad-table thead th.trad-sort-desc .trad-sort-icon::after { content: ' ↓'; }

/* Body */
.trad-table tbody td,
.trad-table tbody th {
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  vertical-align: middle;
}
.trad-table tbody tr { background: #fff; transition: background .2s; }

/* Striped */
.trad-table--striped tbody tr:nth-child(odd) { background: #f8f7ff; }

/* Hover */
.trad-table--hover tbody tr:hover { background: #ede9ff; }

/* Footer */
.trad-table tfoot th {
  background: #f5f5f5;
  padding: 12px 16px;
  font-weight: 600;
  border: 1px solid #e5e5e5;
}

/* Cell icon */
.trad-cell-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
}
.trad-cell-icon i   { font-size: inherit; line-height: 1; }
.trad-cell-icon svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; fill: currentColor; }

/* Hidden rows (search) */
.trad-table tbody tr.trad-hidden { display: none; }

/* Links in cells */
.trad-table td a { color: #6040e0; text-decoration: none; }
.trad-table td a:hover { text-decoration: underline; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.trad-table-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  justify-content: flex-end;
}
.trad-table-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  line-height: 1;
}
.trad-table-page-btn:hover:not(.trad-disabled) { background: #6040e0; color: #fff; border-color: #6040e0; }
.trad-table-page-btn.trad-active { background: #6040e0; color: #fff; border-color: #6040e0; font-weight: 700; }
.trad-table-page-btn.trad-disabled { opacity: .4; cursor: default; }

/* ── Cell Image ─────────────────────────────────────────────────────────── */
.trad-cell-img {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
}
.trad-cell-img img {
  display: block;
  width: 32px;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}