.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  gap: 4px;
}

.status-badge--draft,
.status-badge--not_contacted {
  background: var(--gray-100);
  color: var(--gray-600);
}

.status-badge--active,
.status-badge--confirmed,
.status-badge--approved {
  background: var(--success-100);
  color: var(--success-700);
}

.status-badge--completed {
  background: var(--primary-100);
  color: var(--primary-700);
}

.status-badge--paused,
.status-badge--negotiating {
  background: var(--warning-100);
  color: var(--warning-700);
}

.status-badge--pending {
  background: #F3E8FF;
  color: #7C3AED;
}

.status-badge--published {
  background: #f0fdf4;
  color: #15803d;
}

.status-badge--cancelled,
.status-badge--rejected {
  background: var(--error-100);
  color: var(--error-700);
}

.status-badge--contacted {
  background: #E0E7FF;
  color: #4338CA;
}

/* Ô bọc select trạng thái — căn giữa trong cột */
.status-dropdown-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Status dropdown - select đổi trạng thái trong bảng */
.status-dropdown {
  display: block;
  width: 100%;
  max-width: 100px;
  height: 22px;
  padding: 0 8px 0 2px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  text-align-last: center;
}

/* Màu nền và text dropdown hiển thị theo trạng thái */
.status-dropdown.status-not_contacted {
  background: var(--gray-100);
  color: var(--gray-600);
}

.status-dropdown.status-pending {
  background: #F3E8FF;
  /* Purple 50 */
  color: #7C3AED;
  /* Purple 600 - tím rõ ràng */
}

.status-dropdown.status-not_approved {
  background: var(--error-100);
  color: var(--error-700);
}

.status-dropdown.status-negotiating {
  background: var(--warning-100);
  color: var(--warning-700);
}

.status-dropdown.status-confirmed {
  background: var(--primary-100);
  color: var(--primary-700);
}

.status-dropdown.status-completed {
  background: var(--success-100);
  color: var(--success-700);
}

/* Options khi xổ xuống: nền trắng, text đen */
.status-dropdown option {
  background: #ffffff;
  color: #000000;
  font-size: 11px;
  padding: 2px 4px;
}

/* === Task Status Dropdown Colors === */
.status-dropdown.status-todo {
  background: var(--gray-100);
  color: var(--gray-600);
}

.status-dropdown.status-in_progress {
  background: #DBEAFE;
  color: #1D4ED8;
}

.status-dropdown.status-done {
  background: var(--success-100);
  color: var(--success-700);
}

.status-dropdown.status-cancelled {
  background: var(--error-100);
  color: var(--error-700);
}

/* === Priority Dropdown Colors === */
.priority-dropdown {
  display: block;
  width: 100%;
  max-width: 100px;
  height: 22px;
  padding: 0 8px 0 2px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  text-align-last: center;
}

.priority-dropdown option {
  background: #ffffff;
  color: #000000;
  font-size: 11px;
  padding: 2px 4px;
}

.priority-dropdown.priority-low {
  background: var(--success-200);
  color: var(--success-700);
  font-weight: 600;
}

.priority-dropdown.priority-medium {
  background: var(--warning-200);
  color: var(--warning-700);
  font-weight: 600;
}

.priority-dropdown.priority-high {
  background: var(--error-200);
  color: var(--error-700);
  font-weight: 600;
}

.priority-dropdown:disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* Cột trạng thái trong bảng tabular */
.tabular-table th.col-status,
.tabular-table td.col-status {
  padding: 4px var(--table-cell-px, 6px);
  vertical-align: middle;
  text-align: center;
}

.tabular-table td.col-status>span {
  display: block;
  width: 100%;
}

/* Video progress bar (dùng chung videos + campaign-detail) */
.video-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}

.video-progress--clickable {
  cursor: pointer;
}

.video-progress-empty {
  color: #d1d5db;
  font-size: 12px;
}

.video-progress-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #f1f5f9;
}

.video-progress-bar__segment--published {
  background: #22c55e;
}

.video-progress-bar__segment--pending {
  background: #94a3b8;
}

.video-progress-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.video-progress-label.is-complete {
  color: #15803d;
}

/* Video status badge (dùng chung videos + campaign-detail) */
.video-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}

.video-status-badge .video-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.video-status-badge--pending {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.video-status-badge--pending .video-status-dot {
  background: #94a3b8;
}

.video-status-badge--published {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}

.video-status-badge--published .video-status-dot {
  background: #22c55e;
}

/* Deadline badge */
.deadline-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.deadline-badge--completed {
  background: #ecfdf5;
  color: #065f46;
  border-color: #86efac;
}

.deadline-badge--late {
  background: #fff1f2;
  color: #991b1b;
  border-color: #fecaca;
}

.deadline-badge--today {
  background: #fff7ed;
  color: #b45309;
  border-color: #fcd34d;
}

.deadline-badge--soon {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}

.deadline-badge--daysleft {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #93c5fd;
}

.deadline-badge--no_deadline {
  background: #f9fafb;
  color: #9ca3af;
  border-color: #e5e7eb;
}

/* Classification badge (Nano/Micro/Macro KOC) */
.classification-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.classification-badge--nano {
  background: #E0F2FE;
  color: #0369A1;
}

.classification-badge--micro {
  background: #F3E8FF;
  color: #7C3AED;
}

.classification-badge--macro {
  background: #FEF3C7;
  color: #B45309;
}