.generic-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-radius: var(--radius-lg);
}

.generic-table th,
.generic-table td {
  padding: var(--spacing-4) var(--spacing-5);
  border-right: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  min-height: 40px;
}

.generic-table tr th:last-child,
.generic-table tr td:last-child {
  border-right: none;
}

.generic-table tbody tr:last-child td {
  border-bottom: none;
}

.generic-table th {
  background-color: var(--gray-100);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.generic-table tr:hover {
  background-color: var(--primary-50);
}

.generic-table tr:hover .table-empty, .generic-table tr:hover td:has(.table-empty) {
  background-color: var(--gray-25);
}

.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sort-icon {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.sort-icon-asc,
.sort-icon-desc {
  display: none;
}

.sort-icon-default {
  display: inline;
}

th[data-column-name].active .sort-icon-default {
  display: none;
}

th[data-column-name].active.asc .sort-icon-asc {
  display: inline;
}

th[data-column-name].active.desc .sort-icon-desc {
  display: inline;
}

.sortable:hover {
  background-color: var(--gray-200);
}

.generic-table__toolbar {
  gap: var(--spacing-10);
}

.generic-table__toolbar-top-left {
  width: 100%;
}

.generic-table__toolbar-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: var(--spacing-10);
}

.table-empty {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--gray-900);
  left: 0;
  right: 0;
  position: sticky;
}

.table-empty-image{
  height: 204px;
}

.plain-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-left: none;
  border-right: none;
  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.plain-table th,
.plain-table td {
  padding: var(--spacing-5);
  border-left: none;
  border-right: none;
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  text-align: left;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.plain-table tbody tr:last-child td {
  border-bottom: none;
}

.plain-table th {
  background-color: var(--gray-100);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.plain-table th:first-child{
  border-left: var(--border-width-thin)  var(--border-style-solid) var(--gray-300);
}

.plain-table th:last-child{
  border-right: var(--border-width-thin)  var(--border-style-solid) var(--gray-300);
}

.plain-table tbody td{
  border-right: none;
  border-left: none;
}

.table-header-label {
  max-width: 90%;
}

.inline {
  display: inline !important;
}

@media (max-width: 767px) {
  .generic-table__toolbar{
    margin-top: var(--spacing-8);
  }

  .btn-text{
    display: none;
  }

  .generic-table__toolbar, .generic-table__toolbar-top-right{
    gap: var(--spacing-md);
  }

   .generic-table__toolbar .toolbar__bottom{
    display: flex;
    flex-direction: var(--flex-direction-col);
    margin-top: var(--spacing-6);
    gap: var(--spacing-lg);
    align-items: var(--items-start);
  }

  .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-left, .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-right{
    margin: 0;
  }

  .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-left{
    gap: var(--spacing-md);
    white-space: nowrap;
  }

  .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-left .single-select__dropdown{
    height: var(--spacing-8);
  }

  .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-right nav, .generic-table__toolbar.toolbar__bottom .generic-table__toolbar-right nav a{
    gap: var(--spacing-ml);
  }
}