/* device/device.css */

/* 左侧导航样式 */
.nav-item {
    @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors;
    color: #4b5563;
}

.nav-item:hover {
    @apply bg-gray-100 text-gray-900;
}

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

/* 表格行悬停效果 */
.table-row-hover:hover {
    background-color: #f9fafb;
}

/* 模态框动画 */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

.modal-leave {
    animation: modalLeave 0.2s ease-in;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalLeave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* 分页按钮样式 */
.pagination-btn {
    @apply px-3 py-1 border border-gray-300 rounded-md text-sm font-medium;
}

.pagination-btn:hover:not(.disabled) {
    @apply bg-gray-50;
}

.pagination-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

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

/* 标签样式 */
.device-tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.device-tag.online {
    @apply bg-green-100 text-green-800;
}

.device-tag.offline {
    @apply bg-red-100 text-red-800;
}

.device-tag.fault {
    @apply bg-yellow-100 text-yellow-800;
}

/* 统计卡片动画 */
.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* 加载动画 */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 空状态样式 */
.empty-state {
    @apply py-12 text-center;
}

.empty-state-icon {
    @apply w-16 h-16 text-gray-300 mx-auto mb-4;
}

.empty-state-title {
    @apply text-gray-500 font-medium text-lg;
}

.empty-state-description {
    @apply text-gray-400 text-sm mt-1;
}

/* 表单样式 */
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-input.error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

.form-error {
    @apply mt-1 text-sm text-red-600;
}

/* 按钮样式 */
.btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors;
}

.btn-secondary {
    @apply px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors;
}

.btn-success {
    @apply px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors;
}

.btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .device-list-container {
        margin-left: 0;
    }
    
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .mobile-menu-btn {
        display: block;
    }
}