/* Database View Styles */

/* 搜索输入框 */
.search-input {
  @apply bg-dark-700 border border-dark-500 rounded-lg px-4 py-2.5 pl-10 text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all;
}

/* 输入框 */
.input-field {
  @apply w-full bg-dark-700 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all;
}

/* 主要按钮 */
.btn-primary {
  @apply px-4 py-2 rounded-lg bg-gradient-to-r from-primary-cyan to-blue-500 text-white hover:from-cyan-500 hover:to-blue-600 transition-all flex items-center gap-2;
}

/* 次要按钮 */
.btn-secondary {
  @apply px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-all flex items-center gap-2;
}

/* 图标按钮 */
.btn-icon {
  @apply p-2 rounded-lg hover:bg-dark-600 transition-colors;
}

/* 表格行 */
.table-row {
  @apply border-b border-dark-600 hover:bg-dark-600/50 transition-colors;
}

/* 空状态（已不使用） */
.empty-state {
  @apply py-16 text-center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 自定义空状态盒子 */
.empty-box {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  margin-bottom: 20px;
}

.empty-icon i {
  font-size: 40px;
  color: #6b7280;
}

.empty-text {
  color: #d1d5db;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.empty-tip {
  color: #6b7280;
  font-size: 0.875rem;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: #4b5563;
}

.empty-state-title {
  color: #d1d5db;
  font-size: 1.25rem;
  font-weight: 500;
}

.empty-state-hint {
  color: #6b7280;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* 表格复选框 */
.table-checkbox {
  @apply flex-shrink-0;
}

/* 弹窗遮罩 */
.modal-overlay {
  animation: fadeIn 0.2s ease-out;
}

/* 弹窗内容 */
.modal-content {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}