/* ============================================================================
 * Table Component Styles
 * Table 元件樣式
 * ============================================================================ */

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead tr {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

.data-table th {
  padding: 12px;
  text-align: left;
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

/* Status Badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.unpaid {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.no-need {
  background: #e0e0e0;
  color: #666666;
}

/* Status Text Only (for contract status) */
.status-active {
  color: #28a745;
  font-weight: 600;
}

.status-expired {
  color: #dc3545;
  font-weight: 600;
}

.status-paid {
  color: #28a745;
  font-weight: 600;
}

.status-unpaid {
  color: #dc3545;
  font-weight: 600;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 20px 0;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state p {
  font-size: 16px;
  margin: 0;
}

/* Responsive Tables */
@media (max-width: 768px) {
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}