/* 管理面板主样式文件 */

/* 引入CSS变量 */
@import url('variables.css');

/* 引入基础样式 */
@import url('base.css');

/* 引入侧边栏样式 */
@import url('sidebar.css');

/* 引入组件样式 */
@import url('components.css');

/* 引入表格和仪表板样式 */
@import url('tables.css');

/* 引入通知和动画样式 */
@import url('notifications.css');

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding-left: 0;
    }
    
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .table-controls {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .pagination {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

@media (max-width: 480px) {
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
}