/* ==========================================================================
   CSS BỔ SUNG CHO TÍNH NĂNG ĐỀ NGHỊ THANH TOÁN (KẾ THỪA LAYOUT BẢNG LƯƠNG)
   ========================================================================== */

/* 1. ĐỊNH DẠNG RIÊNG CHO CỘT NỘI DUNG DÀI (Bản chất bảng lương đều là white-space: nowrap)
   Riêng cột nội dung thanh toán cần được xả ra để đọc được trọn vẹn văn bản */
.payroll-table td.text-left {
  white-space: normal !important; /* Ghi đè nowrap của bảng lương để cho phép xuống dòng */
  word-break: break-word;        /* Bẻ đôi từ nếu từ quá dài */
  line-height: 1.4;
}

/* 2. CẤU TRÚC HUY HIỆU ĐẾM (BADGES) DƯỚI SỐ ĐỀ NGHỊ */
.tt-meta-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  justify-content: center; /* Căn giữa các badge bên dưới số đề nghị */
}

.meta-item-badge {
  font-size: 10px;
  background: #f1f5f9;
  color: #475569;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  font-weight: 400;
  white-space: nowrap;
}

.comment-badge {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* 3. ĐỊNH DẠNG HUY HIỆU TRẠNG THÁI (STATUS BADGES) */
.tt-badge {
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}

/* Các bộ màu trạng thái cho phiếu thanh toán */
.status-pending { 
  background-color: #fef3c7; 
  color: #d97706; 
}
.status-success { 
  background-color: #dcfce7; 
  color: #16a34a; 
}
.status-danger { 
  background-color: #fee2e2; 
  color: #dc2626; 
}
.status-info { 
  background-color: #e0f2fe; 
  color: #0284c7; 
}
.status-default { 
  background-color: #f3f4f6; 
  color: #4b5563; 
}

/* 4. TIỆN ÍCH BỔ SUNG */
.payroll-table .money {
  font-weight: 600;
  color: #2563eb; /* Tạo điểm nhấn màu sắc cho cột Số tiền */
}

/* Hiệu ứng trỏ chuột khi Hover vào dòng đề nghị */
.payroll-table tbody tr.tt-row {
  cursor: pointer;
}