/* Data grid tables */
.table-responsive {
  border-radius: var(--msp-radius);
  border: 1px solid var(--msp-border);
  background: #fff;
  box-shadow: var(--msp-shadow);
  overflow: auto;
}

.card > .table-responsive,
.card .table-responsive {
  border: none;
  box-shadow: none;
  border-radius: 0 0 var(--msp-radius) var(--msp-radius);
}

.table {
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13.5px;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--msp-border) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}

.table thead th,
.table thead.table-light th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #F8FAFC !important;
  color: #64748B !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--msp-border) !important;
  white-space: nowrap;
}

.table tbody tr {
  transition: background 0.15s ease;
}

.table-hover > tbody > tr:hover > *,
.table tbody tr:hover > * {
  background: #F8FAFC !important;
}

.table a {
  font-weight: 600;
  color: var(--msp-text);
}

.table a:hover { color: var(--msp-primary); }

.table .btn-sm {
  margin-left: 4px;
}

.msp-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

@keyframes msp-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.table tbody tr {
  animation: msp-row-in 0.28s ease both;
}

.table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.table tbody tr:nth-child(5) { animation-delay: 0.1s; }
.table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.table tbody tr:nth-child(8) { animation-delay: 0.16s; }

.pagination .page-link {
  border-radius: 8px !important;
  margin: 0 2px;
  border-color: var(--msp-border) !important;
  color: var(--msp-text) !important;
}

.pagination .page-item.active .page-link {
  background: var(--msp-primary) !important;
  border-color: var(--msp-primary) !important;
  color: #fff !important;
}