/* 自定义样式 */

/* 导航链接样式 */
.nav-link {
  @apply text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-colors duration-200;
}

.nav-link.active {
  @apply text-blue-600 bg-blue-50;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full hover:bg-gray-500 transition-colors;
}

/* 表格行悬停效果 */
table tbody tr:hover {
  @apply bg-gray-50 transition-colors;
}

/* 状态标签样式 */
.status-active {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-inactive {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800;
}

.status-suspended {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

/* 角色标签样式 */
.role-admin {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800;
}

.role-user {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

/* 按钮样式 */
.btn {
  @apply px-4 py-2 rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
}

/* 表单元素样式 */
.form-input,
.form-select,
.form-textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  @apply border-blue-500;
}

/* 卡片阴影效果 */
.card {
  @apply bg-white rounded-lg shadow-sm transition-shadow duration-300 hover:shadow-md;
}

/* 左侧导航栏样式优化 */
#sidebar {
  @apply transition-all duration-300 ease-in-out;
}

#sidebar.collapsed {
  width: 64px;
}

#sidebar.collapsed #sidebarTitle,
#sidebar.collapsed #navDashboard,
#sidebar.collapsed #navUsers,
#sidebar.collapsed #navLogs {
  @apply hidden;
}

#toggleSidebar {
  @apply cursor-pointer transition-all duration-200 hover:bg-gray-200 rounded;
}

/* 标签栏样式优化 */
.tabs-container {
  @apply border-b border-gray-200 bg-white z-10;
}

.tab-item {
  @apply px-4 py-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer transition-all duration-200;
}

.tab-item.active {
  @apply text-blue-600 border-blue-600 bg-blue-50;
}

.close-tab {
  @apply ml-2 text-gray-400 hover:text-gray-600 transition-colors duration-150;
}

/* 标签内容样式 */
.tab-content {
  @apply hidden transition-all duration-300 ease-in-out;
}

.tab-content.active {
  @apply block animate-fadeIn;
}

/* 主内容区样式 */
.main-content {
  @apply flex-1 overflow-y-auto;
}

/* 响应式设计改进 */
@media (max-width: 768px) {
  #sidebar {
    @apply absolute z-20 h-screen;
  }
  
  #sidebar.collapsed {
    @apply transform -translate-x-full;
  }
  
  .content-area {
    @apply ml-0;
  }
}

/* 导航栏滚动效果 */
#navbar.scrolled {
  @apply shadow-md bg-white/95 backdrop-blur-sm;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* 响应式间距 */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

/* 工具提示样式 */
.tooltip {
  @apply relative inline-block cursor-help;
}

.tooltip .tooltiptext {
  @apply invisible absolute z-10 bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap opacity-0 transition-opacity duration-200;
}

.tooltip:hover .tooltiptext {
  @apply visible opacity-100;
}

/* 加载动画 */
.loading-spinner {
  @apply inline-block w-5 h-5 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin;
}

/* 确认对话框样式 */
.confirm-dialog {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden;
}

.confirm-dialog-content {
  @apply bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden;
}

.confirm-dialog-header {
  @apply bg-gray-50 px-6 py-4 border-b border-gray-200;
}

.confirm-dialog-body {
  @apply p-6;
}

.confirm-dialog-footer {
  @apply flex justify-end space-x-3 p-4 bg-gray-50 border-t border-gray-200;
}

/* 数据表格样式增强 */
.data-table {
  @apply min-w-full divide-y divide-gray-200;
}

.data-table thead {
  @apply bg-gray-50;
}

.data-table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-700;
}

/* 用户管理和请求日志表格滚动条样式 */
#userList-container,
#logList-container {
  max-height: 400px; /* 限制最大高度，显示10条记录 */
  overflow-y: auto;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

#userList-container::-webkit-scrollbar,
#logList-container::-webkit-scrollbar {
  width: 8px;
}

#userList-container::-webkit-scrollbar-track,
#logList-container::-webkit-scrollbar-track {
  @apply bg-gray-100;
  border-radius: 4px;
}

#userList-container::-webkit-scrollbar-thumb,
#logList-container::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full hover:bg-gray-500 transition-colors;
  border-radius: 4px;
}

/* Firefox滚动条兼容 */
#userList-container,
#logList-container {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6;
}

/* 表格行样式优化 */
#userList tr,
#logList tr {
  transition: background-color 0.2s ease;
}

#userList tr:hover,
#logList tr:hover {
  @apply bg-blue-50;
}

/* 表格头部固定 */
#userList-container table thead,
#logList-container table thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #f9fafb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#userList-container table thead th,
#logList-container table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #f9fafb;
}

/* 徽章样式 */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  @apply bg-blue-100 text-blue-800;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

/* 分页控件样式 */
.pagination {
  @apply flex space-x-1;
}

.pagination button {
  @apply px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50 transition-colors;
}

.pagination button.active {
  @apply bg-blue-500 text-white border-blue-500;
}

.pagination button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* 搜索框样式 */
.search-input {
  @apply pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200;
}

/* 统计卡片样式 */
.stat-card {
  @apply bg-gray-50 rounded-lg p-4 border border-gray-100 transition-transform hover:transform hover:scale-[1.02] duration-200;
}

/* 图表容器样式 */
.chart-container {
  @apply bg-gray-50 rounded-lg p-4 border border-gray-100;
}

/* 操作按钮组 */
.action-buttons {
  @apply flex space-x-1;
}

.action-buttons button {
  @apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors;
}

.action-buttons .edit-btn:hover {
  @apply text-blue-600;
}

.action-buttons .delete-btn:hover {
  @apply text-red-600;
}

.action-buttons .status-btn:hover {
  @apply text-green-600;
}

/* 模态框动画 */
.modal-enter {
  @apply opacity-0;
}

.modal-enter-active {
  @apply opacity-100 transition-opacity duration-300;
}

.modal-exit {
  @apply opacity-100;
}

.modal-exit-active {
  @apply opacity-0 transition-opacity duration-300;
}

/* 提示框动画 */
.toast-enter {
  @apply opacity-0 transform translate-y-20;
}

.toast-enter-active {
  @apply opacity-100 transform translate-y-0 transition-all duration-300;
}

.toast-exit {
  @apply opacity-100 transform translate-y-0;
}

.toast-exit-active {
  @apply opacity-0 transform translate-y-20 transition-all duration-300;
}