/* 组件样式 */

/* 主导航 */
.header{margin-bottom:20px;border-bottom:2px solid #e5e7eb;padding-bottom:16px}
.header h1{margin:0 0 16px 0;color:#111827}
.main-nav{display:flex;gap:4px;align-items:center}
.nav-item{background:#f3f4f6;color:#6b7280;border:none;padding:12px 24px;border-radius:8px 8px 0 0;cursor:pointer;font-weight:500;font-size:14px;transition:all 0.2s}
.nav-item:hover{background:#e5e7eb;color:#374151}
.nav-item.active{background:#111827;color:#fff;transform:translateY(2px)}

/* 页面容器 */
.page{display:none}
.page.active{display:block}

/* Tab组件 */
.tabs{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:16px}
.tab{padding:12px 24px;cursor:pointer;border-bottom:2px solid transparent;font-weight:500}
.tab.active{border-bottom-color:#111827;color:#111827}
.tab:not(.active){color:#6b7280}
.tab:hover{color:#374151}
.tab-content{display:none}
.tab-content.active{display:block}

/* 表单网格 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr 100px 120px 120px 80px;gap:12px;align-items:end}

/* 搜索筛选 */
.search-filters{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:16px}
.search-filters .grid{margin-bottom:0}
.search-filters input,.search-filters select{background:#fff}
.search-filters button{background:#6b7280;color:#fff}
.search-filters button:hover{background:#4b5563}
.search-grid{display:grid;grid-template-columns:1fr 1fr 150px 100px 100px;gap:12px;align-items:end}
.closed-search-grid{display:grid;grid-template-columns:1fr 1fr 150px 150px 120px 100px;gap:12px;align-items:end}

/* 分页组件 */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px}
.pagination button{background:#111827;color:#fff;border:1px solid #374151;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px}
.pagination button:hover{background:#374151}
.pagination button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#d1d5db}
.pagination button.active{background:#111827;color:#fff;border-color:#111827}
.pagination-info{font-size:12px;color:#6b7280;margin-left:12px}
.pagination-jump{font-size:12px;color:#6b7280;margin-left:16px}
.pagination-jump input{width:50px;padding:2px 4px;margin:0 4px;font-size:12px}
.pagination-jump button{padding:2px 8px;font-size:12px}

/* 操作按钮 */
.trade-actions{white-space:nowrap}
.trade-actions button{background:#ef4444;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;font-size:11px;margin-left:4px}
.trade-actions button:hover{background:#dc2626}
.trade-actions button.edit{background:#3b82f6}
.trade-actions button.edit:hover{background:#2563eb}

/* 表格排序 */
.sortable{cursor:pointer;user-select:none;position:relative}
.sortable:hover{background:#e5e7eb}
.sort-icon{font-size:12px;color:#9ca3af;margin-left:4px}
.sortable:hover .sort-icon{color:#6b7280}
.sortable.sort-asc .sort-icon{color:#3b82f6}
.sortable.sort-desc .sort-icon{color:#ef4444}
.sortable.sort-asc .sort-icon::before{content:'↑'}
.sortable.sort-desc .sort-icon::before{content:'↓'}
.sortable.sort-asc .sort-icon,
.sortable.sort-desc .sort-icon{font-weight:bold}