/* ============================================================
   售后库房管理系统 - 暗色主题
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #1D1F27;
  --bg-secondary: #252830;
  --bg-tertiary: #2D303A;
  --bg-card: #2A2D37;
  --bg-hover: #323540;
  --bg-input: #1A1C24;
  --text-primary: #E8E9ED;
  --text-secondary: #9CA0AC;
  --text-tertiary: #6B6F7C;
  --a-start: #a855f7;
  --a-mid: #8b5cf6;
  --a-end: #06b6d4;
  --gradient: linear-gradient(135deg, #a855f7, #06b6d4);
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #3b82f6;
  --border: #363946;
  --border-light: #2E313C;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --sidebar-w: 220px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

html, body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans SC',sans-serif; background:var(--bg-primary); color:var(--text-primary); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--a-mid); text-decoration:none; }
a:hover { color:var(--a-end); }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-tertiary); }

.app-layout { display:flex; min-height:100vh; }

/* ---- 侧边栏 ---- */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  background:var(--bg-secondary); border-right:1px solid var(--border-light);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-header { display:flex; align-items:center; padding:16px; border-bottom:1px solid var(--border-light); }
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.sidebar-title { font-size:16px; font-weight:600; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sidebar-nav { flex:1; padding:8px; display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); color:var(--text-secondary); text-decoration:none; transition:all 0.2s; cursor:pointer; }
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { background:rgba(139,92,246,0.15); color:var(--a-mid); }
.nav-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-icon svg { width:20px; height:20px; }
.nav-label { font-size:13px; font-weight:500; white-space:nowrap; }
.sidebar-footer { padding:12px; border-top:1px solid var(--border-light); }

/* ---- 主内容 ---- */
.main-content { flex:1; padding:24px 32px; overflow-y:auto; max-height:100vh; }
.page { animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h2 { font-size:22px; font-weight:600; }

/* ---- 统计卡片 ---- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; display:flex; align-items:center; gap:14px; transition:all 0.2s;
}
.stat-icon { width:44px; height:44px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-number { font-size:26px; font-weight:700; line-height:1.2; }
.stat-label { font-size:12px; color:var(--text-tertiary); margin-top:2px; }

/* ---- 表单 ---- */
.form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; max-width:560px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:10px 12px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary); outline:none; transition:border-color 0.2s,box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--a-mid); box-shadow:0 0 0 3px rgba(139,92,246,0.15);
}
.form-group textarea { resize:vertical; min-height:50px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-error { margin-top:10px; background:rgba(239,68,68,0.1); color:var(--danger); padding:10px 14px; border-radius:var(--radius); font-size:13px; }
.search-input {
  width:100%; padding:9px 12px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary); outline:none; font-size:13px;
}
.search-input:focus { border-color:var(--a-mid); }

/* ---- 出入库多选物品列表 ---- */
.trans-item-list { max-height:400px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); padding:4px; }
.trans-item-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); cursor:pointer; transition:all 0.15s; }
.trans-item-row:hover { background:var(--bg-hover); }
.trans-item-row.selected { background:rgba(139,92,246,0.1); }
.trans-item-info { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.trans-item-name { font-size:13px; }
.trans-item-meta { font-size:11px; color:var(--text-tertiary); }
.trans-item-meta code { font-size:11px; color:var(--a-end); }
.trans-item-avail { font-size:12px; color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }
.trans-item-qty { width:60px; padding:4px 6px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-size:13px; text-align:center; outline:none; flex-shrink:0; }
.trans-item-qty:focus { border-color:var(--a-mid); }

/* ---- 按钮 ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border:none; border-radius:var(--radius);
  font-weight:500; font-size:13px; cursor:pointer; transition:all 0.2s; white-space:nowrap;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary { background:var(--gradient); color:white; }
.btn-primary:hover:not(:disabled) { box-shadow:0 4px 15px rgba(168,85,247,0.3); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-danger { background:rgba(239,68,68,0.15); color:var(--danger); }
.btn-danger:hover { background:rgba(239,68,68,0.25); }
.btn-sm { padding:5px 12px; font-size:12px; }

/* ---- 徽标 ---- */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.badge-available { background:rgba(34,197,94,0.15); color:var(--success); }
.badge-occupied { background:rgba(234,179,8,0.15); color:var(--warning); }
.badge-type-new { background:rgba(34,197,94,0.15); color:var(--success); }
.badge-type-lend { background:rgba(234,179,8,0.15); color:var(--warning); }
.badge-type-return { background:rgba(59,130,246,0.15); color:var(--info); }
.badge-type-scrap { background:rgba(239,68,68,0.15); color:var(--danger); }

/* ---- 表格 ---- */
.table-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:auto; margin-bottom:16px; }
.data-table { width:100%; border-collapse:collapse; min-width:600px; }
.data-table th { text-align:left; padding:10px 14px; font-size:12px; font-weight:600; color:var(--text-tertiary); background:var(--bg-secondary); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--border-light); font-size:13px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg-hover); }
.empty-td { text-align:center; padding:40px!important; color:var(--text-tertiary); font-size:13px; }
.data-table code { background:var(--bg-input); padding:2px 6px; border-radius:4px; font-size:12px; color:var(--a-end); }

/* ---- 盘点输入框 ---- */
.inv-input { width:80px; padding:6px 8px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); outline:none; font-size:13px; text-align:center; }
.inv-input:focus { border-color:var(--a-mid); }

/* ---- 弹窗 ---- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  padding:20px; animation:fadeIn 0.2s ease;
}
.modal {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.modal-header h3 { font-size:17px; font-weight:600; }
.modal-close { background:none; border:none; color:var(--text-tertiary); font-size:24px; cursor:pointer; padding:4px; line-height:1; }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:20px 24px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:0 24px 20px; }

/* ---- Toast ---- */
.toast {
  position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:var(--radius);
  font-weight:500; font-size:13px; z-index:9999; animation:slideIn 0.3s ease; box-shadow:var(--shadow-lg);
}
.toast-success { background:rgba(34,197,94,0.9); color:white; }
.toast-error { background:rgba(239,68,68,0.9); color:white; }
.toast-info { background:rgba(59,130,246,0.9); color:white; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---- 用户信息 ---- */
.user-info-mini { display:flex; align-items:center; gap:10px; overflow:hidden; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:white; flex-shrink:0; }
.user-meta { overflow:hidden; }
.user-name { font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:var(--text-tertiary); }

/* ---- 移动端 ---- */
.mobile-view { flex-direction:column; }
.mobile-topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--border-light); }
.mobile-menu-btn { background:none; border:none; color:var(--text-primary); cursor:pointer; padding:6px; border-radius:4px; }
.mobile-title { font-size:16px; font-weight:600; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.mobile-nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; animation:fadeIn 0.2s ease; }
.mobile-nav-panel { width:280px; max-width:80vw; background:var(--bg-secondary); height:100vh; display:flex; flex-direction:column; border-right:1px solid var(--border); animation:slideInLeft 0.25s ease; }
@keyframes slideInLeft { from{transform:translateX(-100%)} to{transform:translateX(0)} }
.mobile-view .main-content { max-height:none; padding:16px; overflow-y:visible; }
.mobile-view .form-row { grid-template-columns:1fr; }
.mobile-view .stats-grid { grid-template-columns:1fr 1fr; }
.mobile-view .data-table thead { display:none; }
.mobile-view .data-table tr { display:flex; flex-direction:column; padding:10px 12px; border-bottom:1px solid var(--border-light); }
.mobile-view .data-table td { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border:none; font-size:12px; }

@media (max-width:768px) {
  .sidebar { display:none; }
  .main-content { padding:16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}