/* 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 text-gray-500;
}

.empty-state-icon {
  @apply text-4xl mb-4 block;
}

/* 表格复选框 */
.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);
  }
}