:root {
    --primary-color: #3b82f6; --primary-hover: #2563eb;
    --secondary-bg: #f3f4f6; --card-bg: #ffffff;
    --text-main: #111827; --text-sub: #6b7280;
    --border-color: #e5e7eb; --input-bg: #ffffff;
    --success-color: #10b981; --danger-color: #ef4444;
    --radius-md: 12px; --radius-sm: 8px;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --card-gradient: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    --header-btn-bg: #f9fafb; --table-head-bg: #f8fafc; --table-row-hover: #f9fafb; --table-text: #111827;
}

[data-theme="dark"] {
    --primary-color: #60a5fa; --primary-hover: #3b82f6;
    --secondary-bg: #0f172a; --card-bg: #1e293b;
    --text-main: #f1f5f9; --text-sub: #94a3b8;
    --border-color: #334155; --input-bg: #334155;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --card-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --header-btn-bg: #334155; --table-head-bg: #0f172a; --table-row-hover: #334155; --table-text: #e2e8f0;
}

body, .stat-card, .controls-card, .header-block, input, select, table, th, td, .modal-box, .row-content { transition: all 0.3s ease; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { 
    margin: 0; 
    font-family: 'Inter', 'Noto Sans SC', sans-serif; 
    background: var(--secondary-bg); 
    color: var(--text-main); 
    
    /* 🔥 核心修复：禁止页面元素被选中，消除点击时的闪烁光标 */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* 标准语法 */
    
    /* 防止移动端点击高亮背景色 */
    -webkit-tap-highlight-color: transparent;
}

input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    
    /* 顺便修复一下光标样式 */
    cursor: text;
}

.selectable {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    
    /* 鼠标放上去变成“工”字形，提示用户这是文本 */
    cursor: text; 
}

.hidden { display: none !important; }

/* ==================== 2. 基础组件 & 按钮 ==================== */
.btn-primary {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white; border: none; border-radius: var(--radius-sm);
    font-size: 16px; font-weight: 600; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.01); background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.btn-primary:active { transform: scale(0.98); box-shadow: none; }

.btn-apple {
    border: none; border-radius: 12px; padding: 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 14px; font-weight: 600; color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative; overflow: hidden;
}
.btn-apple::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 12px 12px 0 0; pointer-events: none; }
.btn-apple:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); filter: brightness(1.05); }
.btn-apple:active { transform: scale(0.96); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); filter: brightness(0.9); }
.btn-orange { background: linear-gradient(135deg, #FF9500, #FF5E3A); }
.btn-purple { background: linear-gradient(135deg, #AF52DE, #5856D6); }
.btn-green { background: linear-gradient(135deg, #34C759, #30B0C7); }
.btn-pink { background: linear-gradient(135deg, #FF2D55, #FF375F); }
.btn-blue { background: linear-gradient(135deg, #0ea5e9, #3b82f6); }

.btn-add { background: linear-gradient(90deg, #3b82f6, #06b6d4, #3b82f6); background-size: 200% auto; color: white; border: none; border-radius: var(--radius-sm); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); transition: all 0.4s ease; font-weight: 600; letter-spacing: 0.5px; padding: 10px 16px; cursor: pointer; }
.btn-add:hover { background-position: right center; transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5); }
.btn-add:active { transform: scale(0.95); }

.btn-smart { background: transparent; border: 2px solid transparent; background-image: linear-gradient(var(--card-bg), var(--card-bg)), linear-gradient(135deg, #8b5cf6, #ec4899); background-origin: border-box; background-clip: padding-box, border-box; color: #8b5cf6; font-weight: 600; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 2px 10px rgba(139, 92, 246, 0.1); cursor: pointer; padding: 10px 16px; border-radius: var(--radius-sm);}
.btn-smart:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); color: #fff; background-image: linear-gradient(135deg, #8b5cf6, #ec4899), linear-gradient(135deg, #8b5cf6, #ec4899); transform: translateY(-2px); }

.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;}
.btn-outline:hover { background: #ef4444; border: 1px solid var(--border-color); color: #fff !important; }

/* ==================== 3. 登录 & Toast ==================== */
.auth-container { max-width: 400px; margin: 10vh auto; background: var(--card-bg); padding: 40px; border-radius: var(--radius-md); text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid var(--border-color); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; color: var(--text-main); }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 16px; background: var(--input-bg); color: var(--text-main); }
.error-message { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); padding: 10px; border-radius: 8px; margin-bottom: 15px; display: none; border: 1px solid var(--danger-color); font-size: 14px; }

#toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(0, 0, 0, 0.85); color: white; padding: 10px 20px; border-radius: 50px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: fadeUp 0.3s ease-out forwards; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px); max-width: 90vw; }
.toast.error { background: rgba(239, 68, 68, 0.9); }
[data-theme="dark"] .toast { background: rgba(255, 255, 255, 0.9); color: #000; } 
[data-theme="dark"] .toast.error { background: rgba(239, 68, 68, 0.9); color: white; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } }

/* ==================== 4. 主界面布局 ==================== */
.container { max-width: 1380px; margin: 0 auto; padding: 20px; }
.top-section { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.header-block { background: var(--card-bg); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; gap: 12px; border: 1px solid var(--border-color); }
.header-row-top { display: flex; align-items: center; justify-content: space-between; }
.header-row-bottom { display: flex; align-items: center; gap: 10px; }
.header-title { font-size: 20px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--text-main); }
.shop-wrapper { display: flex; align-items: center; gap: 8px; }
.current-shop { background: rgba(59, 130, 246, 0.1); color: var(--primary-color); padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.btn-switch { border: 1px solid var(--border-color); background: var(--header-btn-bg); color: var(--text-main); padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.user-info { display: flex; align-items: center; gap: 10px; background: var(--header-btn-bg); padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--text-main); font-weight: 500; border: 1px solid var(--border-color); }
.btn-logout { color: var(--danger-color); cursor: pointer; font-size: 12px; font-weight: 600; margin-left: 5px; }

.theme-toggle-btn { background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; width: 36px; height: 36px; color: var(--text-main); }
.theme-toggle-btn:hover { background: rgba(128,128,128,0.1); }
.theme-icon { position: absolute; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); width: 20px; height: 20px; }
.icon-sun { transform: scale(1) rotate(0deg); opacity: 1; }
.icon-moon { transform: scale(0) rotate(90deg); opacity: 0; }
[data-theme="dark"] .icon-sun { transform: scale(0) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .icon-moon { transform: scale(1) rotate(0deg); opacity: 1; }

.stat-card { background: var(--card-gradient); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), #60a5fa); }
.stat-card.orange::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-title { font-size: 13px; color: var(--text-sub); margin-bottom: 8px; font-weight: 500; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--text-main); }
.stat-trend { font-size: 12px; color: var(--success-color); display: flex; align-items: center; gap: 4px; margin-top: 4px; }

.controls-card { background: var(--card-bg); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border-color); }
.controls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.search-bar { grid-column: 1 / -1; position: relative; }
.search-bar input { padding-left: 35px; border-color: var(--primary-color); background: rgba(59, 130, 246, 0.05); }
.search-bar::before {position: absolute; left: 10px; top: 38px; font-size: 14px; color: var(--primary-color); pointer-events: none; }
.control-group label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-sub); font-weight: 600; }
.control-group input, .control-group select { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; background: var(--input-bg); color: var(--text-main); }
.control-group input:focus { border-color: var(--primary-color); outline: none; }


.btn-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-top: 15px; 
    border-top: 1px solid var(--border-color); 
    flex-wrap: nowrap; /* 【修改】强制不换行，确保在一排 */
    gap: 10px; 
}
/* 新增：右侧按钮组的基础样式 */
.right-btns {
    display: flex;
    gap: 10px;
    /* width: 100%;  <--- 【删除】这行是导致换行的罪魁祸首 */
    flex: 1;      /* 【新增】让它自动填充剩余空间 */
    justify-content: flex-end;
}
.left-btns { display: flex; gap: 10px; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==================== 5. 主表格 (Main Table) ==================== */
.table-card { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--border-color); }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--table-head-bg); border-bottom: 1px solid var(--border-color); }
th { padding: 14px; text-align: left; font-size: 13px; color: var(--text-sub); font-weight: 600; }
td { padding: 14px; border-bottom: 1px solid var(--border-color); font-size: 14px; color: var(--table-text) !important; }
tbody tr:last-child td { border: none; }
.badge { background: rgba(59, 130, 246, 0.1); color: var(--primary-color); padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }

.table-toolbar { padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--table-head-bg); }
.count-info { font-size: 13px; color: var(--text-sub); font-weight: 600; }
.sort-widget { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 4px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sort-trigger { display: flex; align-items: center; gap: 4px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--text-main); cursor: pointer; border-radius: 16px; white-space: nowrap; z-index: 2; background: var(--input-bg); }
.sort-trigger:hover { background: rgba(128,128,128,0.1); }
.sort-options { display: flex; gap: 5px; max-width: 0; opacity: 0; transform: translateX(-10px); transition: all 0.5s ease; padding-right: 0; }
.sort-widget.active .sort-options { max-width: 450px; opacity: 1; transform: translateX(0); padding-left: 8px; padding-right: 4px; }
.sort-opt { font-size: 12px; padding: 4px 8px; border-radius: 12px; cursor: pointer; color: var(--text-sub); white-space: nowrap; }
.sort-opt:hover { background: var(--primary-color); color: white; }
.sort-opt.active { color: var(--primary-color); font-weight: bold; background: rgba(59, 130, 246, 0.1); }

/* ==================== 6. 通用模态框 & 产品库 (保持不变) ==================== */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 2000; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card-bg); padding: 25px; border-radius: 16px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 1px solid var(--border-color); color: var(--text-main); }
.modal-header { font-size: 18px; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

.modal-split-view { display: flex; height: 500px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.brand-sidebar { width: 30%; background: var(--header-btn-bg); border-right: 1px solid var(--border-color); overflow-y: auto; }
.product-content { width: 70%; background: var(--card-bg); padding: 10px; overflow-y: auto; display: flex; flex-direction: column; }
.brand-item { padding: 12px; cursor: pointer; font-size: 13px; color: var(--text-main); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.brand-item:hover { background: rgba(59,130,246,0.05); }
.brand-item.active { background: var(--primary-color); color: white; }
.brand-item .btn-del-brand { visibility: hidden; color: #ffcccc; font-size: 16px; padding: 0 4px; }
.brand-item:hover .btn-del-brand { visibility: visible; }

.input-wrapper { display: flex; flex-direction: column; gap: 4px; }
.input-label-text { font-size: 11px; font-weight: 700; color: var(--text-sub); margin-left: 2px; }
.compact-input { width: 100%; padding: 0 8px !important; font-size: 13px !important; height: 34px !important; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-main); box-sizing: border-box; }
.compact-input:focus { border-color: var(--primary-color); outline: none; }

#productList { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding-top: 10px; }
.product-item { display: flex; flex-direction: column; justify-content: space-between; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--header-btn-bg); font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.prod-code { font-weight: 700; color: var(--primary-color); font-size: 13px; margin-bottom: 2px; word-break: break-all; }
.prod-detail-row { display: flex; justify-content: space-between; color: var(--text-sub); font-size: 11px; }
.prod-val { font-weight: 600; color: var(--text-main); }
.card-actions { display: flex; gap: 4px; margin-top: auto; }
.card-actions button { flex: 1; justify-content: center; padding: 2px 0; font-size: 11px; height: 24px; }

/* ==================== 7. 库存管理新UI (字体统一修复版) ==================== */

.qty-highlight {
    /* 移除 font-family: 'Monaco'... 让其继承全局字体 */
    font-size: 16px;
    font-weight: 800; /* 保持加粗，强调数量 */
    color: var(--text-main);
    background: var(--header-btn-bg);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    min-width: 40px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.qty-highlight.low {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.threshold-dim {
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
}

.time-dim {
    font-size: 11px;
    color: var(--text-sub);
    /* 移除 monospace，让时间显示更自然 */
    white-space: nowrap;
}

/* 1. 弹窗容器 */
#inventoryModal .modal-box {
    background: var(--secondary-bg) !important;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 96vw;
    max-width: 1800px;
    height: 92vh;
    max-height: 95vh;
    border: 1px solid var(--border-color);
}

#inventoryModal .modal-header {
    flex-shrink: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-main);
}

/* 2. 顶部仪表盘 */
.inv-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 20px;
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.inv-stat-card {
    flex: 1;
    min-width: 150px;
    background: var(--card-bg);
    border-radius: 6px;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.inv-stat-card .label { font-size: 11px; margin-bottom: 4px; color: var(--text-sub); }
/* 移除 dashboard 的 monospace */
.inv-stat-card .value { font-size: 22px; font-weight: 800; color: var(--text-main); }
.inv-stat-card.blue { border-left: 4px solid #3b82f6; }
.inv-stat-card.danger { border-left: 4px solid #ef4444; }
.inv-stat-card.danger .value { color: #ef4444; }
.inv-stat-card.success { border-left: 4px solid #10b981; }
.inv-stat-card.success .value { color: #10b981; }

/* 3. 录入工具栏 */
.inv-toolbar {
    padding: 10px 20px;
    background: var(--card-bg) !important;
    margin: 10px 20px 0 20px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.toolbar-title { font-size: 13px; margin-bottom: 8px; font-weight: 700; color: var(--text-main); }

.inv-input-group { 
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; width: 100%;
}
.input-col { 
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 100px;
}
.input-col:nth-child(1) { flex: 1.5; min-width: 140px; }
.input-col:nth-child(2) { flex: 1.2; }
.input-col:nth-child(3) { flex: 0.8; }
.input-col:nth-child(4) { flex: 0.8; }
.input-col:nth-child(5) { flex: 2; }

.sub-label { font-size: 11px; font-weight: 600; color: var(--text-sub); }
.input-col input { 
    height: 32px; font-size: 13px; padding: 0 8px; border-radius: 6px; 
    border: 1px solid var(--border-color); 
    background: var(--input-bg);
    color: var(--text-main);
    width: 100%; outline: none;
}
.input-col input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.btn-save-inv {
    height: 32px; padding: 0 15px; font-size: 13px; background: #3b82f6; color: white; 
    border: none; border-radius: 6px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-save-inv:hover { background: #2563eb; transform: translateY(-1px); }

/* 4. 搜索 & 功能栏 */
.inv-func-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0 20px;
    flex-shrink: 0;
    gap: 15px;
}

.inv-search-wrapper {
    flex: 0 0 400px;
    position: relative;
}
.inv-search-wrapper input {
    width: 100%; height: 36px; font-size: 13px; border-radius: 6px; 
    border: 1px solid var(--border-color); padding-left: 35px;
    background: var(--input-bg);
    color: var(--text-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px;
}
.inv-search-wrapper input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); outline: none; }

.inv-actions { display: flex; gap: 10px; align-items: center; }

.btn-sm-func {
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border-color);
    background: var(--header-btn-bg);
    border-radius: 6px; font-size: 13px;
    color: var(--text-main);
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: all 0.2s; font-weight: 600;
}
.btn-sm-func:hover { border-color: #3b82f6; color: #3b82f6; filter: brightness(0.95); }
.btn-sm-func.active { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; color: #3b82f6; }

/* ==================== 5. 表格区域 (修复版：强制全宽 + 自动填充) ==================== */

/* 1. 表格容器：撑满父元素 */
.inv-table-container {
    flex: 1; 
    overflow-y: auto; 
    margin-top: 10px; 
    padding: 0 20px 20px 20px;
    width: 100%; /* 强制宽度 */
}

/* 2. 表格本体：强制 100% 宽度，绝不收缩 */
.inv-table {
    width: 100% !important; 
    min-width: 1000px; /* 给个底线，防止窗口太窄时挤成一团 */
    table-layout: fixed; /* 固定布局，列宽由 CSS 决定 */
    border-collapse: separate; 
    border-spacing: 0;
}

/* 表头吸顶 */
.inv-table thead { position: sticky; top: 0; z-index: 10; background: var(--table-head-bg); }

/* 通用单元格样式 */
.inv-table th { 
    padding: 10px 8px; font-size: 12px; 
    color: var(--text-sub); font-weight: 700; 
    border-bottom: 1px solid var(--border-color); 
    background: var(--table-head-bg); text-align: left;
}
.inv-table td { 
    padding: 6px 8px; border-bottom: 1px solid var(--border-color); font-size: 13px; 
    color: var(--text-main); vertical-align: middle; height: 40px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-table tr:hover { background: var(--table-row-hover); }

/* --- 列宽定义 (总共 8 列) --- */

/* 第1列：货号 (140px) */
.inv-table th:nth-child(1), .inv-table td:nth-child(1) { width: 140px; text-align: left; }

/* 第2列：品牌 (100px) */
.inv-table th:nth-child(2), .inv-table td:nth-child(2) { width: 100px; text-align: left; }

/* 第3列：库存 (100px) */
.inv-table th:nth-child(3), .inv-table td:nth-child(3) { width: 100px; text-align: right; }

/* 第4列：单价 (100px) */
.inv-table th:nth-child(4), .inv-table td:nth-child(4) { width: 100px; text-align: right; }

/* 第5列：预警 (70px) */
.inv-table th:nth-child(5), .inv-table td:nth-child(5) { width: 70px;  text-align: center; }

/* 第6列：时间 (130px) */
.inv-table th:nth-child(6), .inv-table td:nth-child(6) { width: 130px; text-align: center; }

/* 🔥 第7列：备注 (核心修复：不设宽度) 
   注意：这里绝对不要写 width: auto !important; 
   在 fixed 布局下，不写宽度，它就会自动吞掉所有剩余空间！ */
/* style.css Line 584 */
.inv-table th:nth-child(7), .inv-table td:nth-child(7) { 
    text-align: left;
    /* 👇 关键修改：用 100% 强制撑满剩余空间 */
    width: 100%; 
    
    /* 👇 删除 min-width，在 fixed 布局下 width 权限更高，min-width 有时会干扰 */
    /* min-width: 200px; */ 
}

/* 🔥 第8列：操作 (220px) */
.inv-table th:nth-child(8), .inv-table td:nth-child(8) { 
    width: 220px !important; 
    text-align: center; 
    overflow: visible !important; 
}
.status-dot.green { background: #10b981; }
.status-dot.red { background: #ef4444; animation: blink 2s infinite; }
.qty-badge { font-size: 13px; padding: 2px 6px; border-radius: 4px; background: var(--secondary-bg); font-weight: 700; }
.qty-badge.low { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
/* 移除 monospace */
.price-val { font-weight: 700; color: #059669; }
.time-val { font-size: 11px; color: var(--text-sub); }

.row-actions { display: flex; gap: 6px; justify-content: center; }
.btn-icon { 
    width: 38px; height: 26px; font-size: 12px; border-radius: 4px; 
    border: 1px solid var(--border-color); 
    background: var(--header-btn-bg); color: var(--text-main);
    cursor: pointer; display: flex; align-items: center; justify-content: center; 
}
.btn-icon:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.1); }

/* 6. 操作日志小弹窗 (Popover) */
#logPopover {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    width: 350px;
    max-height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 50;
    flex-direction: column;
}
#logPopover.show { display: flex; animation: slideDown 0.2s ease-out; }

.log-header { 
    padding: 12px 15px; border-bottom: 1px solid var(--border-color); 
    font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; 
    align-items: center; 
    background: var(--table-head-bg);
    color: var(--text-main);
}
.log-content { overflow-y: auto; padding: 0; color: var(--text-main); }
.log-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); font-size: 12px; display: flex; gap: 10px; }
.log-item:last-child { border-bottom: none; }
/* 移除日志时间的 monospace */
.log-time { color: var(--text-sub); min-width: 110px; }
.log-user { font-weight: 600; color: #3b82f6; }
.log-action { color: var(--text-main); flex: 1; }
.log-action .highlight { color: #ef4444; font-weight: bold; margin: 0 4px; }

/* 排序下拉菜单 (复用) */
.sort-menu {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border-color); 
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50; min-width: 120px;
}
.sort-menu.show { display: block; }
.sort-menu-item { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text-main); }
.sort-menu-item:hover { background: var(--header-btn-bg); color: #3b82f6; }
.sort-menu-item.active { color: #3b82f6; font-weight: 600; }

/* ==================== 8. 辅助模态框 (保持不变) ==================== */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; background: var(--secondary-bg); padding: 15px; border-radius: 8px; }
.map-item label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 5px; font-weight: bold; }
.map-preview-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 10px; }
.map-preview-table th { background: var(--table-head-bg); padding: 8px; text-align: left; border: 1px solid var(--border-color); }
.map-preview-table td { padding: 8px; border: 1px solid var(--border-color); }

.pickup-options { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; padding: 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; }
.pickup-opt-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-main); cursor: pointer; user-select: none; }
.pickup-opt-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; }

.flatpickr-calendar { background: var(--card-bg) !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border-color) !important; }
.flatpickr-day { color: var(--text-main) !important; }
.flatpickr-day.selected { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.flatpickr-day.has-data { background: rgba(16, 185, 129, 0.1) !important; border-color: transparent !important; color: var(--success-color) !important; font-weight: bold; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text-main) !important; fill: var(--text-main) !important; }

/* ==================== 9. 移动端适配 (卡片式重构版) ==================== */
/* ==================== 9. 移动端适配 (修复数据显示问题版) ==================== */
/* ==================== 9. 移动端适配 (单行四列布局版) ==================== */
/* ==================== 9. 移动端适配 (最终合并版) ==================== */
/* ==================== 9. 移动端适配 (左滑删除版) ==================== */
/* ==================== 9. 移动端适配 (最终优化版) ==================== */
/* ==================== 9. 移动端适配 (最终合并优化版) ==================== */
/* ==================== 9. 移动端适配 (最终完美整合版) ==================== */
/* ==================== 9. 移动端适配 (输入框常驻版) ==================== */
/* ==================== 9. 移动端适配 (最终完整修复版) ==================== */
/* ==================== 9. 移动端适配 (最终完美修复版：徽章统一 + 按钮居中) ==================== */
@media screen and (max-width: 768px) {
    .container { padding: 10px; padding-bottom: 80px; }
    
    /* ------------------- Part A: 主界面 (保持不变) ------------------- */
    
    .top-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .header-block { grid-column: 1 / -1; padding: 15px; }
    
    .stat-card { 
        margin-bottom: 0; padding: 10px 15px; min-height: auto;
        display: flex; flex-direction: column; justify-content: center;
    }
    .stat-title { font-size: 12px; margin-bottom: 2px; color: var(--text-sub); }
    .stat-value { font-size: 20px; font-weight: 800; line-height: 1.2; }
    .stat-trend { font-size: 11px; margin-top: 2px; transform: scale(0.9); transform-origin: left; margin-left: -5px;}

    .controls-card { padding: 15px; }
    .controls { display: flex; flex-direction: column; gap: 10px; }
    .search-bar { width: 100%; }
    
    .btn-row { display: flex !important; flex-direction: row !important; gap: 8px !important; padding-top: 10px; border-top: 1px solid var(--border-color); }
    .left-btns { display: none !important; }
    
	/* --- 替换为以下代码 --- */
	.right-btns { 
	    display: grid !important; 
	    /* 修改点1：改为两列。48px给闪电按钮，1fr给添加按钮，其余空间自动填满 */
	    grid-template-columns: 48px 1fr !important; 
	    gap: 8px !important; 
	    width: 100% !important; 
	}
	
	/* 修改点2：新增一个隐藏类，专门用来隐藏不需要的按钮 */
	.hide-on-mobile {
	    display: none !important;
	}
	
    .right-btns button { margin: 0 !important; width: 100% !important; height: 38px !important; font-size: 13px !important; padding: 0 !important; border-radius: 8px !important; flex: none !important; }
    .mobile-only-btn { display: flex !important; align-items: center; justify-content: center; }

    .table-card { background: transparent; border: none; box-shadow: none; padding: 0; }
    .table-toolbar, .table-card thead { display: none; }
    .table-card table, #recordTable { display: block; width: 100%; }

    /* === 首页列表样式 === */
   /* === 首页列表样式 (优化版) === */
       .m-card-wrapper { position: relative; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: transparent; background-color: var(--secondary-bg); }
       .m-swipe-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: #ef4444; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; z-index: 1; gap: 4px; border-radius: 0 12px 12px 0; }
       .m-card {
		position: relative;
		z-index: 2;
		background: var(--card-bg);
		transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
		will-change: transform;
		border: 1px solid var(--border-color); border-radius: 12px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
		}
       /* 滑动时隐藏右边框，防止视觉重叠 */
       .m-card.swiped { border-right-color: transparent; }
   
    .m-header { padding: 12px 10px; display: grid; grid-template-columns: 1.2fr 1.2fr 2fr 1fr; gap: 8px; align-items: center; cursor: pointer; }
    .m-cell { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    .m-c-sup { font-weight: bold; text-align: left; }
    .m-c-brand { color: var(--text-sub); font-size: 12px; }
    .m-c-code { font-family: 'Monaco', monospace; font-weight: 700; color: var(--primary-color); }
    
    .m-c-qty { 
        font-weight: 800; justify-self: end; width: fit-content; min-width: 32px;
        display: flex; align-items: center; justify-content: center;
        text-align: right; background: rgba(59, 130, 246, 0.1); color: var(--primary-color); 
        padding: 2px 8px; border-radius: 4px; font-size: 12px; 
    }
    .m-body { display: none; padding: 5px 15px 15px 15px; border-top: 1px solid rgba(0,0,0,0.05); animation: slideDown 0.2s ease-out; }
    .m-card.expanded .m-body { display: block; }
    .m-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
    .m-d-label { color: var(--text-sub); display: flex; align-items: center; gap: 8px; font-weight: 500; }
    .m-d-value { color: var(--text-main); font-weight: 600; text-align: right; }
    .m-d-value.money { color: var(--primary-color); }
    .m-card.expanded { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color) inset; }

    .m-inline-input { width: 100%; padding: 6px; font-size: 14px; text-align: right; border: 1px solid var(--primary-color); border-radius: 4px; background: var(--card-bg); color: var(--text-main); outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .m-qty-group { display: flex; gap: 5px; justify-content: flex-end; }
    .m-card-actions { display: flex; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); }
    .m-btn-action { flex: 1; padding: 8px; border-radius: 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
    .m-btn-edit { background: var(--primary-color); color: white; }
    .m-btn-save { background: #10b981; color: white; }
    .m-btn-del { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

    .inv-table th:nth-child(3), .inv-table td:nth-child(3),
    .inv-table th:nth-child(5), .inv-table td:nth-child(5),
    .inv-table th:nth-child(6), .inv-table td:nth-child(6),
    .inv-table th:nth-child(7), .inv-table td:nth-child(7) { display: none; }
    #desktopFuncBtns { display: none !important; }

    /* ------------------- Part B: 产品库模态框 ------------------- */
    
    /* 1. 全局滚动设置 */
    #productModal .modal-box {
        display: block !important;    
        width: 100% !important; height: 100% !important;
        max-height: 100% !important; max-width: 100% !important;
        border-radius: 0 !important; padding: 0 !important;
        background: var(--secondary-bg) !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch; 
        position: relative;
    }

    /* 2. 头部吸顶 */
    #productModal .modal-header {
        position: sticky; top: 0; z-index: 50; width: 100%;
        background: var(--card-bg); padding: 15px;
        display: flex; justify-content: space-between; align-items: center;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    }
    #productModal .modal-header div[style*="display:flex"] { display: none !important; }

    /* 3. 包裹层 */
    .modal-split-view {
        display: block !important; height: auto !important; flex: none !important;
        border: none; overflow: visible !important;
    }

    /* 4. 品牌导航 */
    .brand-sidebar {
        position: sticky; top: 53px; z-index: 40; width: 100%; height: 50px;
        display: flex; flex-direction: row; overflow-x: auto;
        background: var(--card-bg); border-right: none; border-bottom: 1px solid var(--border-color);
        padding: 8px 10px; gap: 8px; scrollbar-width: none; -ms-overflow-style: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .brand-sidebar::-webkit-scrollbar { display: none; }
    .brand-item {
        border-bottom: none; background: var(--header-btn-bg); border: 1px solid var(--border-color);
        border-radius: 20px; padding: 4px 12px; white-space: nowrap; font-size: 13px; color: var(--text-sub);
        flex-shrink: 0; display: flex; align-items: center; gap: 5px;
    }
    .brand-item.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
    .brand-item span:last-child { display: none; }
    .brand-item .btn-del-brand { display: none; }

    /* 5. 内容区域 */
    .product-content {
        width: 100%; height: auto !important; display: block !important;
        padding: 10px; padding-bottom: 120px !important;
        background: var(--secondary-bg); overflow: visible !important;
    }

    /* 6. 编辑框：双列并排优化 */
    .product-content > div[style*="background:var(--header-btn-bg)"] {
        background: var(--card-bg) !important;
        border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 15px !important;
        padding: 0 !important; border: 1px solid var(--border-color);
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 15px !important;
    }
/* 【修复】增加 :not(#productList) 防止误伤列表的第一个产品 */
    .product-content > div:not(#productList) > div:first-child {
        grid-column: 1 / -1; padding: 0 !important; margin-bottom: 10px !important; background: transparent;
        border: none; cursor: default;
    }
    .product-content .controls { display: contents !important; }
    .product-content .controls .input-wrapper:has(#p_remark) { grid-column: 1 / -1; }
    .product-content .controls button { grid-column: 1 / -1; width: 100%; margin-top: 5px; height: 40px !important; }

    /* ==================== 7. 列表样式 (核心修复) ==================== */
    #productList {
        display: flex !important; flex-direction: column; gap: 8px;
        height: auto !important; min-height: 200px;
        overflow: visible !important; padding-bottom: 0 !important;
        background: transparent !important; border: none !important; box-shadow: none !important;
    }

    .product-item {
        display: flex; flex-direction: row; align-items: center; padding: 0 10px;
        flex-shrink: 0 !important; height: 54px !important; min-height: 54px !important;
        background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;
    }

    .prod-info {
        flex: 1; display: flex; flex-direction: row; align-items: center; gap: 8px;
        overflow-x: auto; white-space: nowrap; height: 100%; padding-right: 10px;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .prod-info::-webkit-scrollbar { display: none; }

    /* 【修复1】通用数据条样式：统一加边框、背景、圆角 */
    .prod-info > div, 
    .prod-code { /* 显式选中 .prod-code */
        display: inline-flex !important; 
        align-items: center; justify-content: center;
        background: var(--secondary-bg); 
        border: 1px solid var(--border-color);
        border-radius: 6px; 
        padding: 0 8px; 
        font-size: 13px; color: var(--text-main);
        height: 32px; 
        flex-shrink: 0;
    }

    /* 货号单独配色 */
    .prod-code {
        font-weight: 800; color: var(--primary-color) !important; margin: 0 !important;
        background: rgba(59, 130, 246, 0.08) !important; border-color: rgba(59, 130, 246, 0.2) !important;
    }
    .prod-code::before { content: '货号 '; font-weight: normal; font-size: 11px; opacity: 0.7; margin-right: 4px; color: var(--text-main); }

    .prod-val { font-weight: 700; color: var(--text-main); }
    .prod-val::before { content: none !important; }
    .prod-detail-row:has(.prod-val:contains('¥')) .prod-val { color: var(--primary-color); }
    .prod-detail-row span:first-child { display: inline-block !important; font-size: 11px; color: var(--text-sub); margin-right: 2px; }
    .prod-detail-row span:first-child::after { content: ':'; }
    .prod-source { display: none; }

    /* 【修复2】右侧按钮组：垂直居中 */
    .card-actions {
        flex-shrink: 0; display: flex; gap: 8px; padding-left: 10px;
        border-left: 1px dashed var(--border-color); background: var(--card-bg); z-index: 5;
        height: 100%;           /* 撑满高度 */
        align-items: center;    /* 【关键】让按钮垂直居中 */
    }
    .card-actions button {
        width: 34px; height: 34px; border-radius: 8px; font-size: 16px; background: transparent;
        border: 1px solid var(--border-color) !important; display: flex; align-items: center; justify-content: center;
    }
    .card-actions button:first-child { color: var(--primary-color); background: rgba(59,130,246,0.05); }
    .card-actions button:last-child { color: var(--danger-color); background: rgba(239,68,68,0.05); }

}
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
/* 修复：让同步确认弹窗显示在产品库弹窗之上 */
#syncModal { z-index: 2200 !important; }
/* ==================== 10. 修复夜间模式输入框可见性 ==================== */
[data-theme="dark"] input, 
[data-theme="dark"] select, 
[data-theme="dark"] textarea {
    /* 1.哪怕在弹窗里，也强制背景为深黑蓝，与弹窗的灰色区分开 */
    background-color: #020617 !important; 
    
    /* 2.强制边框为较亮的灰色，画出轮廓 */
    border: 1px solid #64748b !important; 
    
    /* 3.保证文字是亮白色 */
    color: #f8fafc !important; 
}

/* 输入框被选中(聚焦)时的样式 */
[data-theme="dark"] input:focus, 
[data-theme="dark"] select:focus, 
[data-theme="dark"] textarea:focus {
    border-color: #3b82f6 !important; /* 聚焦时变亮蓝 */
    background-color: #0f172a !important; /* 聚焦时背景稍微变亮一点点 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; /* 加光晕 */
}

/* ==================== 底部功能面板样式 ==================== */

/* 遮罩层 */
.mobile-sheet-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 2900;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}
.mobile-sheet-mask.active { opacity: 1; pointer-events: auto; }

/* 底部面板本体 */
.mobile-sheet {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--card-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    z-index: 3000;
    transform: translateY(110%); /* 默认隐藏在底部 */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: 30px; border: 1px solid var(--border-color);
}
.mobile-sheet.active { transform: translateY(0); }

/* 面板头部 */
.mobile-sheet-header {
    padding: 15px 20px; text-align: center; font-weight: bold; color: var(--text-main);
    border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;
}

/* 九宫格布局 */
.mobile-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px;
}

/* 图标按钮样式 */
.mobile-app-icon {
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
}
.mobile-app-icon:active { transform: scale(0.95); opacity: 0.8; }
.app-icon-bg {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.mobile-app-icon span { font-size: 12px; color: var(--text-main); font-weight: 500; }

/* 移动端适配调整 */
/* ==================== 9. 移动端适配 (最终完整修复版) ==================== */
/* ==================== 9. 移动端适配 (全界面完整修复版) ==================== */
/* ==================== 9. 移动端适配 (完整修复版：包含首页修复 + 新版库存) ==================== */
/* ==================== 9. 移动端适配 (最终完美整合版) ==================== */
/* ==================== 9. 移动端适配 (最终完美净化版) ==================== */
@media screen and (max-width: 768px) {
    .container { padding: 10px; padding-bottom: 80px; }
    
    /* --- A. 基础导航与通用按钮 --- */
    #desktopFuncBtns { display: none !important; }
    .mobile-only-btn { display: flex !important; align-items: center; justify-content: center; }
    .btn-row { display: flex !important; flex-direction: row !important; gap: 8px !important; padding-top: 10px; border-top: 1px solid var(--border-color); }
    .btn-row button { margin: 0 !important; height: 40px !important; font-size: 13px !important; }
    
    .right-btns { 
        display: grid !important; 
        grid-template-columns: 48px 1fr !important; 
        gap: 8px !important; 
        width: 100% !important; 
    }
    .hide-on-mobile { display: none !important; }

    /* --- B. 首页：主采购列表 (卡片式布局) --- */
    .table-card { background: transparent; border: none; box-shadow: none; padding: 0; }
    .table-toolbar, .table-card thead { display: none; }
    .table-card table, #recordTable { display: block; width: 100%; }
    
    /* 隐藏PC端表格行，防止样式冲突 */
    #recordTable tr { display: none; }
    #recordTable tr.mobile-row { display: block; } /* 仅备用，实际由JS生成div */

    /* 移动端卡片容器 */
    .m-card-wrapper { position: relative; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: transparent; }
    .m-swipe-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: #ef4444; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; z-index: 1; gap: 4px; border-radius: 0 12px 12px 0; }
    
    .m-card {
        position: relative; z-index: 2; background: var(--card-bg);
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform;
        border: 1px solid var(--border-color); border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
    }
    .m-card.swiped { border-right-color: transparent; }

    .m-header { padding: 12px 10px; display: grid; grid-template-columns: 1.2fr 1.2fr 2fr 1fr; gap: 8px; align-items: center; cursor: pointer; }
    .m-cell { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    .m-c-sup { font-weight: bold; text-align: left; }
    .m-c-brand { color: var(--text-sub); font-size: 12px; }
    .m-c-code { font-family: 'Monaco', monospace; font-weight: 700; color: var(--primary-color); }
    .m-c-qty { font-weight: 800; justify-self: end; width: fit-content; min-width: 32px; display: flex; align-items: center; justify-content: center; text-align: right; background: rgba(59, 130, 246, 0.1); color: var(--primary-color); padding: 2px 8px; border-radius: 4px; font-size: 12px; }

    .m-body { display: none; padding: 5px 15px 15px 15px; border-top: 1px solid rgba(0,0,0,0.05); animation: slideDown 0.2s ease-out; }
    .m-card.expanded .m-body { display: block; }
    .m-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
    .m-d-label { color: var(--text-sub); display: flex; align-items: center; gap: 8px; font-weight: 500; }
    .m-d-value { color: var(--text-main); font-weight: 600; text-align: right; }
    .m-d-value.money { color: var(--primary-color); }
    .m-card.expanded { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color) inset; }

    .m-inline-input { width: 100%; padding: 6px; font-size: 14px; text-align: right; border: 1px solid var(--primary-color); border-radius: 4px; background: var(--card-bg); color: var(--text-main); outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .m-qty-group { display: flex; gap: 5px; justify-content: flex-end; }
    .m-card-actions { display: flex; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); }
    .m-btn-action { flex: 1; padding: 8px; border-radius: 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
    .m-btn-edit { background: var(--primary-color); color: white; }
    .m-btn-save { background: #10b981; color: white; }
    .m-btn-del { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

    /* --- C. 弹窗：库存中心 (修复版) --- */
    




    .inv-table thead { display: none !important; }
    .inv-table, #inventoryList { 
        display: block !important; 
        width: 100% !important; 
        min-width: 0 !important; /* 关键：允许收缩 */
        max-width: 100% !important;
    }

    /* 3. 卡片 Grid 布局 */
    .inv-table tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important; 
        grid-template-rows: auto auto auto auto !important;
        gap: 2px 8px !important; 
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important; 
        margin-bottom: 8px !important; 
        padding: 10px 12px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        height: auto !important;
        width: 100% !important; box-sizing: border-box !important;
    }

    .inv-table td {
        height: auto !important; min-height: 0 !important;
        padding: 0 !important; border: none !important;
        display: block !important;
    }

    /* 列样式定义 */
    .inv-table td:nth-child(1) { grid-row: 1; grid-column: 1 / 2; font-size: 15px !important; font-weight: 800 !important; color: var(--text-main) !important; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inv-table td:nth-child(2) { grid-row: 2; grid-column: 1 / 2; justify-self: start; font-size: 12px !important; color: var(--text-sub) !important; line-height: 20px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inv-table td:nth-child(3) { grid-row: 1 / 3; grid-column: 2 / 3; display: flex !important; align-items: center; justify-content: flex-end; padding-left: 10px !important; }
    .qty-highlight { font-size: 20px !important; padding: 2px 8px !important; border-radius: 6px !important; min-width: 40px; text-align: center; }
    
    .inv-table td:nth-child(4) { grid-row: 2; grid-column: 1 / 2; justify-self: end; font-size: 12px !important; font-weight: 600; color: var(--success-color) !important; line-height: 20px; margin-right: 5px; }
    .inv-table td:nth-child(4)::before { content: '¥'; font-size: 10px; margin-right: 1px; }
    
    .inv-table td:nth-child(5), .inv-table td:nth-child(6) { display: none !important; }
    
    .inv-table td:nth-child(7) { grid-row: 3; grid-column: 1 / -1; font-size: 11px !important; color: var(--text-sub) !important; padding: 4px 6px !important; background: var(--header-btn-bg); border-radius: 4px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inv-table td:nth-child(7):empty { display: none !important; margin-top: 0 !important; }
    
    /* --- 移动端第8列（操作栏）完美撑满修改 --- */
    
.inv-table td:nth-child(8) { 
        grid-row: 4; 
        grid-column: 1 / -1; 
        border-top: 1px dashed var(--border-color) !important; 
        margin-top: 8px; 
        padding-top: 8px !important; 
        padding-bottom: 5px !important;
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        
        display: block !important; 
        width: 100% !important;  /* 🔥🔥🔥 核心修复：强制撑满屏幕，覆盖 PC 端的 220px */
    }

    /* 2. 按钮组容器 */
    .inv-table td:nth-child(8) .btn-action-group { 
        display: flex !important; 
        width: 100% !important;      /* 让内部 Flex 容器也占满 */
        gap: 6px; 
        box-sizing: border-box;
    }

    /* 3. 按钮本体：自动平分宽度 */
    .btn-action-group .btn-icon { 
        flex: 1 !important;          /* 所有按钮平分宽度 */
        width: auto !important;      
        height: 42px !important;     
        font-size: 18px !important;  
        border-radius: 8px !important;
        background: var(--header-btn-bg) !important;
        border: 1px solid var(--border-color) !important;
        margin: 0 !important;
    }

    /* 4. 隐藏中间的分隔线 */
    .btn-action-group > div {
        display: none !important;
    }
    
    /* 5. 触摸反馈 */
    .btn-action-group .btn-icon:active {
        background: var(--border-color) !important;
        transform: scale(0.96);
    }
    /* --- D. 库存头部 (红框区域修复) --- */
    .inv-func-bar {
        padding: 12px 15px !important;
        display: flex !important; 
        flex-direction: column !important; /* 强制垂直排列 */
        gap: 12px !important; 
        background: var(--card-bg) !important; 
        height: auto !important;
        width: 100% !important; 
        box-sizing: border-box !important; 
        flex-shrink: 0;
    }
    
    /* 搜索框：占满宽度 */
    .inv-search-wrapper { flex: none !important; width: 100% !important; }
    
    /* 新建按钮：移动到第一位 */
    .inv-func-bar > .btn-add { 
        width: 100% !important; 
        height: 44px !important; 
        order: -1 !important; /* 提到最前面 */
        margin: 0 !important;
    }
    
    /* 底部按钮组 (排序、导出、日志) */
    .inv-actions { 
        display: grid !important; 
        grid-template-columns: 1fr 1fr 1fr !important; /* 三等分 */
        gap: 8px !important; 
        width: 100% !important; 
        margin-top: 0 !important;
    }
    .btn-sm-func { 
        width: 100% !important; 
        height: 40px !important; 
        justify-content: center !important; 
        margin: 0 !important; 
    }

    /* --- E. 其他弹窗适配 --- */
    #productModal .modal-box { display: block !important; width: 100% !important; height: 100% !important; max-height: 100% !important; max-width: 100% !important; border-radius: 0 !important; padding: 0 !important; background: var(--secondary-bg) !important; }
    #productModal .modal-header { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--card-bg); padding: 15px; }
    #productModal .modal-header div[style*="display:flex"] { display: none !important; }
    .modal-split-view { display: block !important; height: auto !important; border: none; overflow: visible !important; }
    .brand-sidebar { position: sticky; top: 53px; z-index: 40; width: 100%; height: 50px; display: flex; overflow-x: auto; background: var(--card-bg); padding: 8px 10px; }
    .product-content { width: 100%; height: auto !important; padding: 10px; padding-bottom: 120px !important; overflow: visible !important; }
    .product-content > div[style*="background:var(--header-btn-bg)"] { background: var(--card-bg) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 15px !important; }
    .product-content > div:not(#productList) > div:first-child { grid-column: 1 / -1; }
    .product-content .controls { display: contents !important; }
    .product-content .controls .input-wrapper:has(#p_remark) { grid-column: 1 / -1; }
    .product-content .controls button { grid-column: 1 / -1; width: 100%; height: 40px !important; }
    #productList { display: flex !important; flex-direction: column; gap: 8px; }
    .product-item { display: flex; flex-direction: row; align-items: center; padding: 0 10px; height: 54px !important; }
    .prod-info { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; }
    .prod-info > div, .prod-code { display: inline-flex !important; align-items: center; justify-content: center; background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 8px; height: 32px; flex-shrink: 0; }
    .prod-code { color: var(--primary-color) !important; background: rgba(59, 130, 246, 0.08) !important; }
    .card-actions { flex-shrink: 0; display: flex; gap: 8px; padding-left: 10px; border-left: 1px dashed var(--border-color); height: 100%; align-items: center; }

    #invEditModal .modal-box, #stockFlowModal .modal-box { width: 90% !important; max-width: 90% !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto !important; max-height: 80vh !important; border-radius: 12px !important; }
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.input-error {
    border: 2px solid #ef4444 !important; /* 红色边框 */
    background-color: rgba(239, 68, 68, 0.05) !important; /* 浅红背景 */
    animation: shake 0.3s ease-in-out; /* 抖动 0.3秒 */
}

/* ==================== 智能工作台 (V4 最终按钮版) ==================== */

/* ==================== 双子星独立窗口布局 ==================== */

/* 1. 布局容器：居中，左右排列 */
.wb-split-layout {
    display: flex;
    width: 95vw;
    max-width: 1400px;
    height: 80vh; /* 稍微留点空间给下面的关闭按钮 */
    gap: 20px;    /* 左右窗口的间隙 */
    
    /* 绝对定位居中 */
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 2. 通用窗口样式 (白底、圆角、阴影) */
.wb-win {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    
    /* 初始动画 */
    animation: zoomIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* 左窗口：宽一点 (60%) */
.wb-win-left {
    flex: 1.6; 
    min-width: 0; /* 防止Flex子元素溢出 */
}

/* 右窗口：窄一点 (40%) */
.wb-win-right {
    flex: 1;
    min-width: 0;
}

/* 3. 窗口内部结构 */

/* 头部 */
.wb-win-header {
    flex-shrink: 0;
    height: 60px;
    padding: 0 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wb-title { font-size: 18px; font-weight: 800; color: var(--text-main); }

/* 身体 (滚动区) */
.wb-win-body {
    flex: 1;
    overflow-y: auto;
    background: var(--secondary-bg); /* 浅灰底，衬托卡片 */
    padding: 15px;
    position: relative;
}

/* 底部 (仅左侧有) */
.wb-win-footer {
    flex-shrink: 0;
    height: 60px;
    padding: 0 20px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 4. 独立的悬浮关闭按钮 */
/* 4. 独立的悬浮关闭按钮 */
.wb-floating-close {
    position: absolute;
    bottom: 5vh; 
    left: 50%;
    transform: translateX(-50%);
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    
    /* 🔥 核心修改：改用 Flexbox 实现完美居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    font-size: 32px;
    /* line-height: 50px;  <-- 删掉这行，它是导致偏离的罪魁祸首 */
    line-height: 1;     /* <-- 重置行高为 1，消除字体自带的上下间距 */
    
    /* text-align: center; <-- 这行也可以删掉，Flexbox 不需要它 */
    
    cursor: pointer;
    transition: all 0.3s;
    z-index: 3000;
    
    /* 微调：有些字体的 × 视觉重心本身偏高，如果觉得还不准，可以取消下面这行的注释微调 */
    /* padding-bottom: 2px; */
}

.wb-floating-close:hover {
    background: rgba(239, 68, 68, 0.9); /* 悬停变红 */
    transform: translateX(-50%) scale(1.1) rotate(90deg); /* 旋转动画 */
    border-color: transparent;
}

/* 进场动画 */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 移动端适配：手机上还是改为上下排列比较好，不然太挤 */
@media screen and (max-width: 768px) {
    .wb-split-layout {
        flex-direction: column;
        width: 95vw;
        height: 90vh;
        top: 50%;
    }
    .wb-floating-close {
        bottom: 2vh;
        width: 40px; height: 40px; line-height: 40px; font-size: 24px;
    }
}

/* 2. 头部区域 */
.wb-title { font-size: 18px; font-weight: 800; color: var(--text-main); }
.wb-controls { display: flex; gap: 15px; align-items: center; }
.wb-control-group { display: flex; gap: 8px; }

/* 头部输入框 */
.wb-input-main { 
    width: 200px; padding: 8px; border-radius: 6px; 
    border: 1px solid var(--border-color); 
    background: var(--input-bg); color: var(--text-main); 
}
.wb-close {
    font-size: 24px; 
    cursor: pointer; 
    color: var(--text-sub);
    
    /* 3. 核心：利用 margin-left: auto 把关闭按钮推到最右边 */
    margin-left: auto; 
}

.wb-empty-state { text-align: center; color: var(--text-sub); margin-top: 50px; font-size: 14px; }

/* 卡片样式 */
.wb-card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
    transition: all 0.3s;
}

/* 卡片高亮闪烁动画 */
@keyframes highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); border-color: var(--primary-color); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); border-color: var(--primary-color); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.highlight-flash { animation: highlight-pulse 1s ease-out; }

/* 卡片头部 */
.wb-card-header {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.03);
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
.wb-card-remove { color: var(--danger-color); cursor: pointer; font-size: 12px; }

/* 供应商标题输入框 */
.wb-card-title-input {
    background: transparent; border: 1px solid transparent;
    font-size: 14px; font-weight: 700; color: var(--primary-color);
    width: 200px; padding: 2px 4px; border-radius: 4px; outline: none;
}
.wb-card-title-input:focus { background: var(--input-bg); border-color: var(--primary-color); }
.wb-card-title-input:hover { border-color: rgba(59, 130, 246, 0.3); }

/* --- 表格样式 (V4 定制列宽版) --- */
.wb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* 表头基础样式 */
.wb-table th { 
    padding: 4px 8px; 
    font-size: 11px; color: var(--text-sub); 
    border-bottom: 1px solid var(--border-color); 
    background: var(--secondary-bg); text-align: left;
}

/* 【核心修改】定义具体列宽 */
.wb-table th:nth-child(1) { width: 40%; } /* 货号：收窄 */
.wb-table th:nth-child(2) { width: 25%; } /* 数量 */
.wb-table th:nth-child(3) { width: 30%; } /* 单位：变宽放按钮 */
.wb-table th:nth-child(4) { width: 5%; }  /* 删除键 */

.wb-table td { 
    padding: 2px 4px; 
    border-bottom: 1px solid #f1f5f9; 
}
[data-theme="dark"] .wb-table td { border-bottom-color: #334155; }

/* 输入单元格 */
.wb-input-cell {
    width: 100%; height: 28px;
    border: 1px solid transparent; background: transparent;
    padding: 4px 2px;
    font-size: 13px; font-family: 'Monaco', monospace; color: var(--text-main);
    outline: none; border-radius: 2px;
}
.wb-input-cell:focus { 
    background: var(--input-bg); 
    border-bottom: 2px solid var(--primary-color); 
}

/* --- 新增：单位切换按钮组样式 --- */
.wb-unit-group {
    display: flex;
    background: var(--header-btn-bg);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    height: 28px;
    align-items: center;
}
.wb-unit-btn {
    flex: 1; border: none; background: transparent;
    color: var(--text-sub); font-size: 12px; cursor: pointer;
    border-radius: 3px; padding: 0; height: 100%; transition: all 0.2s;
}
.wb-unit-btn.active {
    background: var(--card-bg); color: var(--primary-color);
    font-weight: bold; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- 🔥 幽灵行特效 --- */
@keyframes pulse-ghost {
    0% { opacity: 0.4; transform: scale(0.99); }
    50% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0.4; transform: scale(0.99); }
}
.wb-row.ghost {
    animation: pulse-ghost 2s infinite ease-in-out;
    filter: grayscale(100%);
}
.wb-row.ghost .wb-input-cell { color: #94a3b8; cursor: text; }
.wb-row.ghost .wb-unit-group { opacity: 0.6; }

/* 隐藏幽灵行的删除按钮 */
.wb-row.ghost td:last-child { opacity: 0; pointer-events: none; }


.wb-draft-header { 
    padding: 10px 15px; font-size: 13px; font-weight: 700; 
    border-bottom: 1px solid var(--border-color); 
    background: var(--header-btn-bg); 
    display: flex; justify-content: space-between; align-items: center;
}

/* 草稿箱高亮层 */
.draft-wrapper { 
    /* 1. 布局：自动占满剩余空间 */
    flex: 1; 
    position: relative; 
    
    /* 2. 溢出：必须是 hidden，否则 sticky 头部会失效 */
    overflow: hidden; 
    
    /* 3. 宽度占满 */
    width: 100%;
    
    /* ❌ 删掉 resize: vertical; (禁止拉伸) */
    /* ❌ 删掉 height: 100%; (防止高度计算错误导致截断) */
    
    /* ✅ 加这个：防止在某些浏览器中 flex 子元素高度塌陷 */
    min-height: 0; 
}

.draft-textarea, .draft-backdrop {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    padding: 15px; 
    font-size: 14px; 
    font-family: 'Monaco', 'Menlo', monospace; 
    line-height: 1.6;
    border: none; 
    margin: 0; 
    box-sizing: border-box; 
    resize: none; 
    white-space: pre-wrap; 
    word-wrap: break-word;
}
.draft-textarea { 
    z-index: 2; 
    background: transparent; 
    color: transparent; 
    caret-color: var(--text-main); 
    outline: none; 
    overflow-y: scroll; /* 确保滚动条在文本框上 */
}
.draft-backdrop { 
    z-index: 1; 
    background: var(--card-bg); 
    color: var(--text-main); 
    overflow-y: hidden; 
    pointer-events: none; 
}

.draft-backdrop mark { 
    background: transparent; 
    color: #9ca3af; 
    text-decoration: line-through; 
    padding: 0; 
}


.wb-stat-info { font-size: 13px; color: var(--text-sub); }


/* 核心补充：因为大框去掉了 Padding，我们需要给卡片容器单独加回来 */
#wbCardContainer {
    padding: 15px; /* 把之前父元素的 padding 补在这里 */
}

/* 新增：库存表格的操作按钮样式 */
.btn-action-group {
    display: flex; gap: 4px; justify-content: flex-end;
}

/* 入库按钮 (绿色) */
.btn-icon.green { color: #059669; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); }
.btn-icon.green:hover { background: #10b981; color: white; border-color: #10b981; }

/* 出库按钮 (橙色/红) */
.btn-icon.orange { color: #d97706; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.05); }
.btn-icon.orange:hover { background: #f59e0b; color: white; border-color: #f59e0b; }

/* 普通编辑按钮 (蓝色) */
.btn-icon.blue { color: #2563eb; border-color: rgba(37, 99, 235, 0.3); background: rgba(37, 99, 235, 0.05); }
.btn-icon.blue:hover { background: #3b82f6; color: white; border-color: #3b82f6; }

/* 历史按钮 (灰色) */
.btn-icon.gray { color: #64748b; }

/* 移动端适配：确保新弹窗在手机上也能看 */
@media screen and (max-width: 768px) {
    #invEditModal .modal-box, #stockFlowModal .modal-box {
        width: 90% !important; max-width: 90% !important;
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        height: auto !important; max-height: 80vh !important;
        border-radius: 12px !important;
    }
}
/* ==================== 智能词条 (稳定折叠版) ==================== */

/* 1. 外层容器：控制整体位置 */
.wb-tags-container {
    position: relative; /* 为绝对定位的展开按钮做参照 */
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 50px 10px 15px; /* 右侧留出 50px 给展开按钮 */
    min-height: 54px; /* 保证至少有一行的高度 */
    transition: all 0.3s ease;
    z-index: 20;
    width: 100% !important; /* 强制宽度 */
    box-sizing: border-box;
}

/* 2. 标签列表区域 */
.wb-tags-list {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 8px;
    
    /* 核心：默认限高，只显示一行 */
    height: 34px; 
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

/* 展开状态：高度自动 */
.wb-tags-container.expanded .wb-tags-list {
    height: auto;
    overflow: visible;
}

/* 3. 单个标签样式 */
.wb-tag-item {
    display: inline-flex;
    align-items: center;
    background: #eff6ff; /* 淡蓝色背景 */
    color: var(--primary-color);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 0 4px 0 10px; /* 左边文字宽，右边给删除按钮留位 */
    height: 32px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

/* 夜间模式适配 */
[data-theme="dark"] .wb-tag-item {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.2);
}

.wb-tag-item:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

/* 4. 标签内的删除小叉号 */
.wb-tag-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0.6;
    transition: all 0.2s;
}
.wb-tag-item:hover .wb-tag-del {
    color: white;
    opacity: 0.8;
}
.wb-tag-del:hover {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

/* 5. 右侧固定的展开/收起按钮 */
.wb-tags-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.wb-tags-toggle:hover {
    background: var(--border-color);
    color: var(--text-main);
}
.wb-tags-toggle i {
    font-style: normal;
    font-size: 12px;
    transition: transform 0.3s;
}

/* 展开时图标旋转 */
.wb-tags-container.expanded .wb-tags-toggle i {
    transform: rotate(180deg);
}

/* ==================== 侧边栏新建品牌 (Inline Edit 风格) ==================== */

.brand-create-wrapper {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    position: relative;
    /* 防止输入框被底部遮挡 */
    padding-bottom: 20px; 
}

/* 状态A：按钮态 */
.brand-create-btn {
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    display: block; /* 默认显示 */
}
.brand-create-btn:hover {
    background: var(--primary-color);
    color: white;
    border-style: solid;
}

/* 状态B：输入态 */
.brand-create-input {
    display: none; /* 默认隐藏 */
    width: 100%;
    padding: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    background: var(--card-bg); /* 适配夜间模式 */
    color: var(--text-main);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* 聚焦光晕 */
}

/* 移动端适配调整 */
@media screen and (max-width: 768px) {
    .brand-sidebar {
        /* 确保侧边栏有足够空间显示底部 */
        overflow-x: auto;
    }
    .brand-create-wrapper {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 1px dashed var(--border-color);
        padding-left: 10px;
        display: flex;
        align-items: center;
        /* 移动端横向排列时，保持高度一致 */
        height: 100%;
    }
    .brand-create-btn {
        width: 100px; /* 固定宽度，防止太宽 */
        padding: 6px 0;
        font-size: 12px;
        white-space: nowrap;
    }
    .brand-create-input {
        width: 120px;
        padding: 6px;
    }
}