/* ============================================================
   数电发票商品编码管理系统 - 样式表
   ============================================================ */

/* ========== 变量 ========== */
:root {
    --primary-color: #4a90e2;
    --primary-dark: #357abd;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --warning-color: #f39c12;
    --text-color: #333;
    --text-light: #666;
    --text-muted: #999;
    --bg-color: #f5f7fa;
    --border-color: #ddd;
    --panel-bg: #fff;
}

/* ========== 基础样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    color: var(--text-color);
    background: var(--bg-color);
    min-height: 100vh;
}

/* ========== 顶部工具栏 ========== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px 6px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.toolbar h1 { font-size: 20px; font-weight: 500; }

/* ========== 按钮 ========== */
.btn {
    padding: 8px 16px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    margin-left: 8px;
    transition: background 0.2s;
}
.btn:hover { background: var(--primary-dark); }
.btn-primary { background: var(--primary-color); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #95a5a6; }
.btn-secondary:hover { background: #7f8c8d; }
.btn-sm { padding: 4px 10px; font-size: 13px; }

.btn-icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; border: none;
    background: transparent;
    color: #333; cursor: pointer;
    font-size: 20px; line-height: 1;
}
.btn-icon:hover { background: #e0e0e0; }
.toolbar .btn { background: rgba(255,255,255,0.2); color: #fff; }
.toolbar .btn:hover { background: rgba(255,255,255,0.3); }
.toolbar .btn-icon { color: #fff; }
.toolbar .btn-icon:hover { background: rgba(255,255,255,0.2); }

/* ========== 主布局 ========== */
.main-content {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 12px;
    padding: 12px;
    min-height: calc(100vh - 60px);
}
.main-content > * { min-width: 0; }   /* 防止 grid 1fr 轨道被内容 min-content 撑开（移动端横向溢出） */

/* ========== 左侧清单导航 ========== */
.sidebar {
    background: var(--panel-bg);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-header {
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.invoice-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.invoice-item {
    padding: 12px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

.invoice-item.active {
    background: #e3f2fd;
    border-left: 3px solid var(--primary-color);
}
.invoice-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px; height: 16px;
    cursor: pointer;
}
.invoice-info { flex: 1; min-width: 0; }
.invoice-info .name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invoice-info .sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.invoice-info.disabled .name,
.invoice-info.disabled .sub { color: #ccc; }
.invoice-actions { display: flex; align-items: center; gap: 2px; }
.invoice-actions .btn-icon { font-size: 15px; }
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.summary {
    font-size: 14px;
    color: var(--text-light);
    text-align: center;
}

/* ========== 发票列表 折叠/展开 ========== */
.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}.sidebar-toggle-btn {
    font-size: 13px;
    transition: transform .2s;
}
.sidebar.collapsed .sidebar-toggle-btn { transform: rotate(-90deg); }
/* 折叠后侧栏不再被 grid 拉伸撑满，高度随内容收缩，消除底部白边 */
.sidebar.collapsed { align-self: start; height: auto; }
/* 折叠后左侧列收缩为窄条，消除折叠条下方大片空白，发票信息区域占满剩余宽度（仅桌面） */
@media (min-width: 769px) {
    .main-content:has(.sidebar.collapsed):not(.collapsed-left) { grid-template-columns: 220px 1fr; }
}
/* 桌面版：隐藏发票列表右上角折叠箭头，列表始终展开（移动端保留折叠功能） */
@media (min-width: 769px) {
    #btnToggleInvoiceList { display: none; }
}
.invoice-list-collapsed { display: none; }
.sidebar.collapsed .invoice-list { display: none; }
.sidebar.collapsed .invoice-list-collapsed { display: block; padding: 8px; }
.sidebar.collapsed .sidebar-footer { display: none; }
/* 折叠条与展开的激活行样式完全一致：仅保留行间距，其余继承 .invoice-item/.active */
.invoice-list-collapsed .invoice-item { margin-bottom: 4px; }

/* ========== 中间内容区 ========== */
.content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.panel {
    background: var(--panel-bg);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}
.panel-title {
    padding: 12px 16px;
    font-weight: 600;
    background: #f8f9fb;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-title-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* 商品明细标题栏：清空表格/生成 按钮统一紧凑样式（同高同宽同样式） */
.product-table .panel-title-actions .btn-primary,
.product-table .panel-title-actions .btn-clear-table {
    min-width: 72px;
    text-align: center;
    margin-left: 0;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.4;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    white-space: nowrap;
}
.product-table .panel-title-actions .btn-primary:hover,
.product-table .panel-title-actions .btn-clear-table:hover { background: var(--primary-dark) !important; }

/* ========== 购方信息 ========== */
.buyer-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.buyer-row {
    display: flex;
    align-items: center;
}
.buyer-row label {
    width: 90px;
    color: var(--text-light);
    flex-shrink: 0;
}
.buyer-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
}
.buyer-row input:focus {
    border-color: var(--primary-color);
    outline: none;
}
.buyer-show-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 2px 0;
}
.buyer-show-row .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-light);
    white-space: nowrap;
}
.buyer-show-row .checkbox-label input {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* ========== 3% 税率开具理由（2选1） ========== */
.discount-hint {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}
.discount-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
}
.discount-option:hover { border-color: var(--primary-color); }
.discount-option input {
    margin-top: 3px;
    flex-shrink: 0;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* ========== 发票设置 ========== */
.settings-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
/* 税率+价格含税 / 收款人+复核人 分组一行 */
.rate-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-column: span 2;
}
/* ========== 发票信息（购方信息+发票设置 合并，可折叠） ========== */
.invoice-panel .buyer-grid { padding: 16px 16px 8px; grid-template-columns: 1fr; }
.invoice-panel .settings-grid { padding: 8px 16px 16px; border-top: 1px solid #eee; }
.panel-collapse-btn {
    font-size: 13px;
    width: 26px;
    height: 26px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid #d5d9e0;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}
.panel-collapse-btn:hover { background: #eef1f5; }
.invoice-panel.collapsed .invoice-info-body { display: none; }
.invoice-panel.collapsed .panel-collapse-btn { transform: rotate(-90deg); }
body.theme-light .panel-collapse-btn { border-color: #c9cdd4; color: #333; }
.setting-item {
    display: flex;
    flex-direction: column;
}
.setting-item label {
    margin-bottom: 6px;
    color: var(--text-light);
    font-size: 14px;
}
.setting-item select,
.setting-item input {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.rate-row > * { min-width: 0; }

/* ========== 商品表格 ========== */
.table-container { overflow-x: auto; max-height: 500px; overflow-y: auto; border: 1px solid #dfe3e8; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* 商品明细：表格保持合理总宽，超出时仅在表格容器内横向滚动，不撑宽整个页面 */
#productTable { min-width: 1060px; width: max(100%, 1060px); }

/* 商品明细：单位列文字居中 */
#productTable th:nth-child(4), #productTable td:nth-child(4) { text-align: center; }
#productTable td:nth-child(4) input { text-align: center; }
thead th {
    background: #f2f4f8;
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 13.5px;
    color: #444;
    border: 1px solid #d8dce3;
    border-top: none;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
thead th:first-child { border-left: none; }
thead th:last-child { border-right: none; }
tbody td {
    padding: 0;
    border: 1px solid #eaecf0;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    background: #fff;
}
/* 斑马纹 */
tbody tr:nth-child(even) td { background: #f8f9fb; }
tbody tr:hover td { background: #eef4fb; }
/* 单元格输入：无边框融入表格，聚焦时高亮 */
tbody td input,
tbody td select {
    width: 100%;
    height: 100%;
    padding: 8px 6px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    text-align: center;
    background: transparent;
    box-sizing: border-box;
}
tbody td input[type="number"] { text-align: right; }
tbody td input:focus,
tbody td select:focus {
    outline: none;
    background: #f7fafd;
    box-shadow: inset 0 0 0 2px var(--primary-color);
    border-radius: 2px;
}
tbody tr:hover td input { background: transparent; }
/* 序号列 */
tbody td:first-child {
    background: #fafbfc;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #888;
}
tbody tr:hover td:first-child { background: #eef2f7; }
/* 文本列左对齐 */
tbody td:nth-child(2), tbody td:nth-child(3), tbody td:nth-child(4) { text-align: left; }
tbody td:nth-child(2) input, tbody td:nth-child(3) input, tbody td:nth-child(4) input { text-align: left; }
/* 数值列右对齐 */
tbody td:nth-child(5), tbody td:nth-child(6), tbody td:nth-child(7) { text-align: right; font-family: 'Courier New', monospace; }
tfoot td {
    padding: 9px 8px;
    background: #f2f4f8;
    font-weight: 600;
    border: 1px solid #d8dce3;
    font-size: 14px;
}
tfoot td:first-child { border-left: none; }
tfoot td:last-child { border-right: none; }
#productTable tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.code-cell {
    text-align: left;
    position: relative;
    background: transparent;
}
.code-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    box-sizing: border-box;
    background: #f6f9fc;
    border: 1px solid #d8e0e8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: border-color 0.15s, background 0.15s;
}
.code-trigger:hover { border-color: var(--primary-color); background: #eef5fb; }
.code-trigger.active { border-color: var(--primary-color); background: #e8f4fd; }
.code-trigger .code-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: #333;
}
.code-trigger .code-name.code-empty { color: #999; }
.code-trigger .chevron {
    flex-shrink: 0;
    font-size: 11px;
    color: #888;
    transition: transform 0.15s;
}
.code-trigger.active .chevron { transform: rotate(180deg); }

.code-menu {
    position: fixed;
    z-index: 30;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    padding: 4px;
    display: none;
    box-sizing: border-box;
}
.code-menu.open { display: block; }
.code-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}
.code-menu-item:hover { background: #eef5fb; color: var(--primary-color); }
.code-menu-item.danger { color: #e74c3c; }
.code-menu-item.danger:hover { background: #fdeeee; color: #c0392b; }
.code-menu-item + .code-menu-item { margin-top: 2px; }

/* ========== 内联树形分级菜单（税收分类编码列，替代模态框） ========== */
.code-tree-menu {
    width: 360px;
    max-width: calc(100vw - 16px);
    z-index: 40;
    padding: 6px;
}
.code-tree-tabs {
    display: flex;
    gap: 4px;
    padding: 0 2px 6px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 4px;
}
.code-tree-tab {
    flex: 1;
    padding: 6px 0;
    border: 1px solid #d8e0e8;
    background: #f6f9fc;
    color: #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}
.code-tree-tab:hover { background: #eef5fb; color: var(--primary-color); }
.code-tree-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 500;
}
.code-tree-body {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.code-tree-empty {
    padding: 24px 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* 关键字搜索框（仅"全部"tab 显示） */
.code-tree-search {
    padding: 6px 10px 2px;
}
.code-tree-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid #d5d9e2;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #333;
}
.code-tree-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
}
.code-tree-search-input::placeholder { color: #a0a6b2; }

/* 推荐叶子列表（仅叶子项，无目录） */
.code-tree-leaf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
}
.code-tree-leaf:hover { background: #eef5fb; }
.code-tree-leaf .ctl-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.code-tree-leaf .ctl-code {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}
.code-tree-leaf .ctl-slv {
    font-size: 12px;
    color: var(--primary-color);
    flex-shrink: 0;
}


/* ========== 底部操作区 ========== */
.bottom-actions {
    padding: 16px;
    background: var(--panel-bg);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.checkbox-label input {
    margin-right: 4px;
    width: 16px; height: 16px;
}

/* ========== 树形菜单（编码库） ========== */
.tree-menu {
    list-style: none;
    padding: 4px 0;
    margin: 0;
    background: #fff;
}
.tree-menu ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.tree-menu li > ul {
    padding-left: 18px;
    display: none;
}
.tree-menu li.open > ul { display: block; }
.tree-row {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
    user-select: none;
    gap: 6px;
    line-height: 1.6;
}
.tree-row:hover { background: #eef3ff; }
.tree-row.active { background: #dbe6ff; color: var(--primary-color); }
.tree-toggle {
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: #666;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.tree-toggle.open { transform: rotate(90deg); color: var(--primary-color); }
.tree-toggle.empty { visibility: hidden; }
.tree-icon {
    font-size: 15px;
    flex-shrink: 0;
}
.tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-row.dir .tree-name { color: var(--primary-color); font-weight: 500; }
.tree-row.leaf .tree-name { color: #333; }
.tree-meta {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
}
.tree-btn {
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--primary-color);
    background: #e8f4fd;
    color: var(--primary-color);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.tree-btn:hover { background: #cfe3f7; }
.tree-count {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}

/* ========== 模态框 ========== */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background: var(--panel-bg);
    border-radius: 8px;
    width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-lg { width: 700px; }
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.modal-search { margin-bottom: 16px; }
.modal-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    margin-bottom: 8px;
}
.modal-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 6px 0;
    background: #fff;
}
.modal-list ul { list-style: none; padding-left: 0; margin: 0; }
.modal-list li > ul { padding-left: 18px; display: none; }
.modal-list li.open > ul { display: block; }

/* ========== 购方选择 ========== */
.buyer-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 10px;
}
.buyer-list .buyer-entry {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.buyer-list .buyer-entry:hover { background: #f0f4ff; }
.buyer-list .buyer-entry .name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.buyer-list .buyer-entry .name { font-weight: 500; }
.buyer-list .buyer-entry .buyer-del-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #c0392b;
    border-radius: 4px;
    cursor: pointer;
}
.buyer-list .buyer-entry .buyer-del-btn:hover { background: #fdecea; }

/* ========== 历史记录 ========== */
.modal-history { width: 780px; }
.modal-history-detail { width: 880px; }
.history-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.history-table th,
.history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
    word-break: break-all;
}
.history-table th { background: #f8f9fb; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.history-table tbody tr:hover { background: #f5f8ff; }
.history-table .col-num { width: 56px; text-align: center; }
.history-table .col-date { width: 150px; }
.history-table .col-amount { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.history-table .col-action { width: 140px; text-align: center; }
.history-table .col-qty { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.history-table .col-price { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.history-table .col-amount-d { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.history-table .col-unit { width: 64px; text-align: center; }
.history-table .col-spec { width: 110px; }
.history-table .col-code { width: 180px; }
.history-table .col-name { width: 160px; }
.history-table .date-main { font-weight: 500; white-space: nowrap; }
.history-table .date-sub { font-size: 12px; color: #999; margin-top: 2px; white-space: nowrap; }
.history-table .amount-val { font-weight: 600; color: #c0392b; }
.history-table .action-btns { display: flex; gap: 6px; justify-content: center; }
.history-table .action-btns .btn-sm { margin: 0; }
.history-table-wrap { max-height: 420px; overflow-y: auto; border: 1px solid #e8ecf1; border-radius: 6px; }
.history-table-wrap .history-table { border: none; }
.history-empty { padding: 40px 20px; text-align: center; color: #aaa; }
.history-empty .empty-title { font-size: 15px; margin-bottom: 4px; }
.history-empty .empty-desc { font-size: 13px; }
.history-info-bar { background: #f8f9fb; border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.history-info-bar .info-item { display: flex; align-items: baseline; gap: 6px; }
.history-info-bar .info-label { color: #888; font-size: 13px; }
.history-info-bar .info-value { font-weight: 500; }
.history-sum-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; background: #fef9f0; border-radius: 6px; border: 1px solid #f5e6c8; }
.history-sum-bar .sum-label { color: #666; }
.history-sum-bar .sum-val { font-weight: 700; color: #c0392b; font-size: 17px; font-variant-numeric: tabular-nums; }
.history-note-bar { margin-top: 10px; padding: 10px 14px; background: #f8f9fb; border-radius: 6px; color: #555; font-size: 13px; line-height: 1.6; }
.history-note-bar .note-label { color: #888; margin-right: 6px; }

/* ========== 设置组 ========== */
.setting-group { margin-bottom: 24px; }
.setting-group h4 {
    margin-bottom: 12px;
    color: var(--text-light);
    font-size: 15px;
    font-weight: 600;
}
.setting-row {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 12px;
}
.setting-row label { color: var(--text-light); white-space: nowrap; }
.setting-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
}

/* 开票信息：两行三列，标签在输入框上方，上下居中 */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}
.billing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.billing-item label {
    color: var(--text-light);
    white-space: nowrap;
    font-size: 14px;
}
.billing-item input,
.billing-item select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.theme-selector { display: flex; gap: 12px; }
.theme-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}
.theme-dot:hover { transform: scale(1.1); }
.theme-dot.selected { box-shadow: 0 0 0 3px var(--primary-color); }

/* ========== 通知 ========== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 2000;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.notification.success { background: var(--success-color); }
.notification.error { background: var(--error-color); }
.notification.info { background: #3498db; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========== 响应式 ========== */
/* 中窗口(769-1200px)：窄侧栏两列布局 */
@media (max-width: 1200px) {
    .main-content { grid-template-columns: 220px 1fr; }
}
/* 中窗口(769-1200px)：sidebar较窄，合计与批量生成上下排列 */
@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-footer { flex-direction: column; align-items: stretch; gap: 8px; }
    .sidebar-footer .summary { text-align: center; }
    .sidebar-footer .btn { width: 100%; }
}
@media (max-width: 768px) {
    body { min-height: 0; }   /* 移动端页面高度随内容，两区收起时不留底部空白 */
    .main-content {
        grid-template-columns: 1fr;
        padding: 8px;
        gap: 8px;
        min-height: 0;   /* 移动端不撑高：两区都收起时不留下方空白 */
    }
    /* 移动端：发票列表与桌面一致——竖向排列（列表纵排、底部合计），仅压缩尺寸 */
    .sidebar {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .sidebar-header {
        border-bottom: 1px solid #eee;
        border-right: none;
        padding: 10px 12px;
    }
    .sidebar-header > span { display: inline; }
    .invoice-list {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 30vh;
        padding: 8px;
        gap: 0;
    }
    .invoice-item {
        flex: none;
        width: auto;
        margin-bottom: 4px;
        padding: 12px 10px;
        white-space: normal;
    }
    .invoice-item .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-footer {
        flex-shrink: 0;
        border-top: 1px solid #eee;
        border-left: none;
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    /* 移动端合计单行显示（与桌面一致） */
    .summary {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        line-height: 1.3;
    }
    /* 顶部工具栏紧凑排布 */
    .toolbar {
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    /* 移动端两行顶栏：第一行 用户状态(左)+版本号(右)，第二行 4 个按钮单排 */
    .toolbar-left { order: 2; margin-left: auto; }
    .toolbar-right { display: contents; }   /* 拆开 userBadge 与按钮组，各自参与顶栏 flex 排布 */
    .user-badge { order: 1; margin-right: auto; }
    .toolbar-actions {
        order: 3;
        flex-basis: 100%;
        display: flex;
        gap: 6px;
    }
    .toolbar-actions .btn {
        flex: 1;
        margin-left: 0;
        text-align: center;
        padding: 7px 4px;
    }
    .toolbar .btn {
        padding: 6px 10px;
        font-size: 13px;
        margin-left: 4px;
    }
    .user-badge { font-size: 13px; }
    .buyer-grid, .settings-grid { grid-template-columns: 1fr; min-width: 0; }
    .rate-row { grid-column: span 1; min-width: 0; }   /* 移动端：税率|价格含税、收款人|复核人仍各自同行 */
    /* 移动端：税收分类名称允许换行铺满显示，不再截断成省略号 */
    .code-trigger .code-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all;
        line-height: 1.35;
    }
    .code-trigger { align-items: flex-start; }
    .code-trigger .chevron { margin-top: 3px; }
    /* 移动端列宽重排（覆盖表头内联宽度），让税收分类列有足够空间铺满文字 */
    #productTable th { width: auto !important; }
    #productTable th:nth-child(1) { width: 44px !important; }   /* 序号列与大窗口一致，3 中文字符宽 */
      #productTable { min-width: 760px; width: max(100%, 760px); }   /* 移动端保持合理列宽，容器内横向滚动 */
    /* 百分比列等比放大到总和 89.5%（固定列 44px+36px），消除 fixed 布局剩余空间，保证序号列精确 44px */
    #productTable th:nth-child(2) { width: 20.8% !important; }
    #productTable th:nth-child(3) { width: 13.5% !important; }
    #productTable th:nth-child(4) { width: 36px !important; }
    #productTable th:nth-child(5) { width: 9.8% !important; }
    #productTable th:nth-child(6) { width: 12.3% !important; }
    #productTable th:nth-child(7) { width: 12.3% !important; }
    #productTable th:nth-child(8) { width: 20.8% !important; }   /* 税收分类编码与商品名称等宽 */
    #productTable .code-cell { min-width: 84px; }
    /* 移动端表格输入与单元格收紧，便于文字铺满 */
    #productTable input { font-size: 14px; }
    #productTable th, #productTable td { padding: 6px 4px; }
    /* 弹窗移动端适配：宽度自适应屏幕，推荐列表编码名换行铺满 */
    .modal-content, .modal-lg, .modal-history, .modal-history-detail { width: 94vw; max-width: 94vw; }
    .modal-body { padding: 14px 12px; }
    .recommend-item .rec-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-all;
        line-height: 1.35;
    }
}

/* ========== 登录/注册页 ========== */
.login-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.login-card {
    position: relative;
    background: #fff;
    padding: 32px 40px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    width: 400px;
    max-width: 92%;
}

.login-help-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #666;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    padding: 0;
    line-height: 1;
}
#helpModal { z-index: 10000; }
#helpModal .help-body { position: relative; }
#helpModal .help-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.login-help-btn:hover {
    background: #4a90e2;
    color: #fff;
    border-color: #4a90e2;
}
.login-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px;
    text-align: center;
}
.login-subtitle {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}
.tabs {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
}
.tab-btn {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: 0;
    color: #888;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
}
.tab-btn.active {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
    font-weight: 500;
}
.login-form .field {
    margin-bottom: 14px;
}
.login-form label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
}
.login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s;
}
.login-form input:focus {
    border-color: #4a90e2;
}
.btn-block {
    width: 100%;
    margin-top: 12px;
}
.form-message {
    min-height: 20px;
    font-size: 14px;
    margin: 4px 0 6px;
    padding: 0 2px;
}
.form-message.error { color: #e74c3c; }
.form-message.success { color: #27ae60; }
.form-message.info { color: #666; }
.guest-hint {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin-top: 14px;
}
.guest-hint a { color: #4a90e2; text-decoration: none; }
.guest-hint a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.app-hidden { display: none; }

.user-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #f0f2f5;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    margin-right: 8px;
}
/* 退出按钮：user-badge 为浅底，必须用深色字才看得清 */
.user-badge .btn {
    color: #333;
    background: rgba(0,0,0,0.08);
}
.user-badge .btn:hover { background: rgba(0,0,0,0.15); }
/* 收起左侧按钮：置于顶栏第二行（功能按钮行）最左侧 */

/* ========== 面板折叠（收起左侧 / 收起右侧） ========== */
/* 两行顶栏（桌面/移动端统一）：第一行 用户状态(左)+版本号(右)，第二行 功能按钮 */
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 2;
    margin-left: auto;
}
.toolbar-right { display: contents; }   /* 拆开 userBadge 与按钮组，各自参与顶栏 flex 排布 */
.user-badge { order: 1; margin-right: auto; }
/* 顶栏第二行：收起左侧按钮(左) + 功能按钮(右) */
.toolbar-actions-bar {
    order: 3;
    flex-basis: 100%;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
/* 按钮+胶囊组合：水平居中，底部与父容器保持 10px */
.panel-left-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}
.toolbar-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.toolbar-actions .btn {
    padding: 7px 24px;
    font-size: 14px;
}
.version-badge {
    font-size: 12px;
    color: #fff;
    opacity: .9;
    white-space: nowrap;
    user-select: none;
}
.panel-toggle {
    width: 30px; height: 30px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.panel-toggle .ic { display: block; }
.panel-toggle .ic-expand { display: none; }
.panel-toggle.is-collapsed .ic-collapse { display: none; }
.panel-toggle.is-collapsed .ic-expand { display: block; }

/* 收起左侧图标：始终显示默认（展开模式）图标，不随收起/展开状态切换 */
#btnCollapseLeft.is-collapsed .ic-collapse { display: block; }
#btnCollapseLeft.is-collapsed .ic-expand { display: none; }

/* 折叠状态：收起左侧后内容区自动占满 */
.main-content.collapsed-left { grid-template-columns: 1fr; }
.main-content.collapsed-left .sidebar { display: none; }
/* 收起左侧后：按钮右侧单行显示当前激活发票内容（仅大窗口；显隐由 updatePanelButtons 控制） */
.panel-collapsed-bar {
    display: none;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.panel-collapsed-bar .collapsed-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 14px;
    background: rgba(0,0,0,0.10);
    border-radius: 14px;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}
.panel-collapsed-bar .collapsed-bar-item .cbi-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.panel-collapsed-bar .collapsed-bar-item .cbi-sub {
    flex-shrink: 0;
    opacity: .9;
}
body.theme-light .panel-collapsed-bar .collapsed-bar-item {
    background: rgba(0,0,0,0.08);
    color: #333;
}

/* 小屏：面板本就自动收起，折叠按钮无意义则隐藏 */
@media (max-width: 768px) {
    .panel-toggle { display: none; }
    .main-content.collapsed-left { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .main-content.collapsed-left .sidebar { display: block; }
    .panel-collapsed-bar { display: none !important; }
}

/* ========== 推荐税收分类弹窗 ========== */
.recommend-hint {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}
.recommend-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}
.recommend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}
.recommend-item:last-child { border-bottom: none; }
.recommend-item:hover { background: #eef5fb; }
.recommend-item .rec-idx {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #aaa;
    background: #f5f6f8;
    border-radius: 3px;
    padding: 2px 0;
}
.recommend-item .rec-name {
    flex: 1;
    text-align: left;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recommend-item .rec-code {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #666;
}
.recommend-item .rec-slv {
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
}

/* ========== 浅色主题（白色）适配：主色为白色时避免白底白字 ========== */
body.theme-light .toolbar-left .btn-icon { color: #333; }
body.theme-light .toolbar-left .btn-icon:hover { background: rgba(0,0,0,0.08); }
body.theme-light .toolbar .btn:not(.btn-primary) { color: #333; background: rgba(0,0,0,0.10); }
body.theme-light .toolbar .btn:not(.btn-primary):hover { background: rgba(0,0,0,0.16); }
/* 编码库 / 树形浏览器内主色文字改深色 */
body.theme-light .tree-row.active { color: #333; }
body.theme-light .tree-row.dir .tree-name { color: #333; }
body.theme-light .tree-toggle.open { color: #666; }
body.theme-light .tree-btn { color: #333; border-color: #bbb; }
body.theme-light .code-menu-item:hover { color: #333; }
body.theme-light .recommend-item .rec-slv { color: #333; }

/* 白色主题：收起左侧图标加深（按钮位于 toolbar-actions-bar，非 toolbar-left，需单独覆盖） */
body.theme-light #btnCollapseLeft { color: #333; }
body.theme-light #btnCollapseLeft:hover { background: rgba(0,0,0,0.08); }
/* 白色主题：清空表格按钮加深（浅蓝底过浅，加深底色并加描边） */
body.theme-light .btn-clear-table { background: #d6e4f6 !important; border: 1px solid #a9c4e6; color: #333 !important; }
body.theme-light .btn-clear-table:hover { background: #c2d6f0 !important; }/* 白色主题：内容区与弹窗内主色底按钮改为浅底深字并加边框（添加行/选择/管理购方/新增/保存等） */
body.theme-light .btn:not(.btn-primary):not(.btn-secondary):not(.toolbar .btn):not(.user-badge .btn) { background: #e6eef9; border: 1px solid #b8cce8; color: #333; }
body.theme-light .btn:not(.btn-primary):not(.btn-secondary):not(.toolbar .btn):not(.user-badge .btn):hover { background: #d6e4f6; }
/* 白色主题：主按钮(btn-primary)原为白底白字不可见，改用深主题蓝底白字，清晰且突出 */
body.theme-light .btn-primary { background: var(--primary-dark); color: #fff; }
body.theme-light .btn-primary:hover { background: #2c6aa8; }
body.theme-light .product-table .panel-title-actions .btn-primary,
body.theme-light .product-table .panel-title-actions .btn-clear-table {
    background: var(--primary-dark) !important;
    color: #fff !important;
    border: none !important;
}
body.theme-light .product-table .panel-title-actions .btn-primary:hover,
body.theme-light .product-table .panel-title-actions .btn-clear-table:hover { background: #2c6aa8 !important; }
/* 白色主题：复选框勾选态原为白底白勾不可见，改用深主题蓝底白勾 */
body.theme-light .checkbox-label input:checked + .cb-box,
body.theme-light .tax-checkbox input:checked + .cb-box,
body.theme-light .invoice-item input:checked + .cb-box {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ===== 商品明细：激活行序号 X 删除按钮 ===== */
tr.row-active { background: #fffbea; }
tr.row-active td { background: transparent; }
.row-index { text-align: center; }
.row-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid #e74c3c;
    background: #fff;
    color: #e74c3c;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}
.row-del-btn:hover { background: #e74c3c; color: #fff; }

/* ========== 移动端两行顶栏（置于文件末尾保证覆盖桌面 .toolbar-right flex 规则） ========== */
@media (max-width: 768px) {
    .toolbar { flex-wrap: wrap; row-gap: 6px; }
    .toolbar-left { order: 2; margin-left: auto; }
    .toolbar-right { display: contents !important; }   /* 拆开 userBadge 与按钮组 */
    .user-badge { order: 1; margin-right: auto; }
    .toolbar-actions {
        order: 3;
        flex-basis: 100%;
        display: flex;
        gap: 6px;
    }
    .toolbar-actions .btn {
        flex: 1;
        margin-left: 0;
        text-align: center;
        padding: 7px 4px;
    }
}
/* ========== 商品明细：标题右侧价格含税复选框 + 表格底部收款人/复核人/备注 ========== */
.tax-checkbox {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
}
.tax-checkbox input {
    width: 15px;
    height: 15px;
    margin: 0;
}
.table-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 12px;
    padding: 12px 16px;
}
.btn-clear-table {
    margin-left: 0;
    white-space: nowrap;
}
.footer-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.footer-item label {
    margin-bottom: 6px;
    color: var(--text-light);
    font-size: 14px;
}
.footer-item input {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .table-footer { grid-template-columns: 1fr 1fr; }
    .footer-item-note { grid-column: 1 / -1; }
}

/* 基础设置模态框：固定宽度，不随窗口变化（覆盖移动端 94vw 适配） */
#settingsModal .modal-content {
    width: 560px !important;
    max-width: 560px !important;
}
/* 展示开关组（主页备注下方） */
.footer-item-show { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; grid-column: 1 / -1; }
.show-group { display: flex; align-items: center; gap: 8px; }
.show-group-label { font-weight: 600; margin-right: 2px; white-space: nowrap; }
.show-group .checkbox-label { margin: 0; white-space: nowrap; }
/* 备注：标签与输入框水平一行 + 加宽 */
.footer-item-note { flex-direction: row; align-items: center; }
.footer-item-note label { margin-bottom: 0; margin-right: 8px; white-space: nowrap; }
.footer-item-note input { flex: 1; }
/* 购方/销方展示复选靠左、复选框之间间距 4px */
.footer-item-show { justify-content: flex-start; text-align: left; }
.show-group { gap: 4px; }
/* 备注输入框：固定最大宽度，右侧留白（覆盖 flex:1） */
.footer-item-note input { flex: 0 1 480px; max-width: 480px; }
/* 页面三区布局：底部操作区（第三区域） */
.app-footer {
    padding: 0 12px 12px;
}
.app-footer .bottom-actions {
    max-width: none;
}
/* ===== 三区域布局：顶部固定、中部两栏独立滚动、底部固定 ===== */
body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
#app { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
header { flex: 0 0 auto; }
.main-content { flex: 1 1 0; min-height: 0; overflow: hidden; }
.sidebar { min-height: 0; }
.content { min-height: 0; overflow-y: auto; }
.app-footer { flex: 0 0 auto; }
/* 商品明细面板：允许表格撑高，由 .content 区滚动 */
.product-table { overflow: visible; }
/* 大窗口：底部操作区归属商品明细区，左右两列并列占满至窗口底部 */
.content { min-height: 0; overflow: hidden; }
.product-table { flex: 1 1 0; min-height: 0; overflow-y: auto; }
/* 商品明细表格不设独立滚动条，滚动由明细区整体承担 */
.content-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.product-table { overflow: visible; }
/* 小窗口：发票列表行按内容高、商品明细行填满剩余，收起列表后明细区紧贴上移 */
@media (max-width: 768px) {
    .main-content { grid-template-rows: auto 1fr; }
}
/* 底部操作栏与商品清单面板同宽（去掉左右留白） */
.app-footer { padding: 0 0 12px; }
/* 商品明细区不显示垂直滚动条（保留滚动功能） */
.content-scroll { scrollbar-width: none; }
.content-scroll::-webkit-scrollbar { display: none; }
/* 表格底部：备注独占一行加宽，展示复选框下移靠左、加大间距 */
.table-footer { grid-template-columns: 1fr; gap: 10px 12px; }
.footer-item-note input { flex: 0 1 560px; max-width: 560px; }
.show-group { justify-content: flex-start; gap: 20px; }
/* 展示复选框靠左对齐 */
.footer-item-show { align-items: flex-start; }
/* 发票列表收起箭头加大一号 */
.sidebar-toggle-btn { font-size: 15px; }
/* 发票列表底部：合计与批量生成并排 */
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-footer .btn { flex-shrink: 0; }
/* 中窗口(769-1200px)：sidebar较窄，合计与批量生成上下排列 */
/* ===== 省份自定义下拉（兼容内置浏览器不渲染原生 select 列表的环境） ===== */
.prov-dropdown { position: relative; width: 100%; }
.prov-trigger { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; background: #fff; text-align: left; cursor: pointer; font-size: 15px; color: #333; display: flex; justify-content: space-between; align-items: center; }
.prov-trigger:hover { border-color: #7c5cff; }
.prov-trigger .prov-arrow { font-size: 11px; color: #999; transition: transform .2s; }
.prov-dropdown.open .prov-trigger .prov-arrow { transform: rotate(180deg); }
.prov-list { display: none; position: absolute; bottom: calc(100% + 4px); left: 0; top: auto; width: 100%; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12); z-index: 1200; }

/* 省份下拉向下展开（模态框滚动进度 >= 50% 时） */
.prov-list.prov-list-down { top: calc(100% + 4px) !important; bottom: auto !important; }
.prov-dropdown.open .prov-list { display: block; }
.prov-item { padding: 8px 10px; font-size: 15px; color: #333; cursor: pointer; }
.prov-item:hover { background: #f3efff; }
.prov-item.active { background: #e8e0ff; color: #5b3df5; font-weight: 600; }

/* ========== 移动端/小窗口：页面不固定视口，全局垂直滚动（明细区随内容自然撑高） ========== */
@media (max-width: 768px) {
    body {
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }
    #app {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
    }
    .main-content {
        flex: none;
        min-height: 0;
        height: auto;
        overflow: visible;
        grid-template-rows: auto auto;
    }
    /* 明细区不再内嵌滚动：随内容自然撑高，由页面整体滚动 */
    .content-scroll {
        flex: none;
        min-height: 0;
        height: auto;
        overflow: visible;
        display: block;
    }
    .panel.product-table {
        display: block;
        flex: none;
        min-height: 0;
        height: auto;
    }
    .panel-title { flex: 0 0 auto; }
    .table-footer { flex: 0 0 auto; }
    /* 表格容器：高度随内容，保留水平滚动，不做内部垂直滚动 */
    .table-container {
        flex: none;
        min-height: 0;
        max-height: none;
        overflow-x: auto;
    }
}

/* ========== 大窗口：商品明细区固定视口内、表格内部滚动（与小窗口一致） ========== */
@media (min-width: 769px) {
    .main-content {
        height: calc(100vh - 60px);
        min-height: 0;
    }
    .content-scroll {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .panel.product-table {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 0;
    }
    .panel-title { flex: 0 0 auto; }
    .table-footer { flex: 0 0 auto; }
    .table-container {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: auto;
    }
}

/* 主页面帮助图标：小窗口默认位置，大窗口往右上角靠 */
.app-help-btn { margin: -4px -4px 0 0; }
@media (min-width: 769px) {
    .app-help-btn { margin-right: -16px; margin-top: -6px; }
}
/* ========== 清空表格/生成按钮：始终水平排列 ========== */
.btn-actions-stack { display: contents; }
/* ========== 复选框统一主题：全部使用自定义方框（兼容华为等手机浏览器原生 checkbox 渲染差异，勾选=主题色） ========== */
.checkbox-label input[type="checkbox"],
.tax-checkbox input[type="checkbox"],
.invoice-item input[type="checkbox"] {
    opacity: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    flex: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.cb-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    margin-left: -15px;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
    flex: none;
    box-sizing: border-box;
    vertical-align: middle;
}
.checkbox-label input:checked + .cb-box,
.tax-checkbox input:checked + .cb-box,
.invoice-item input:checked + .cb-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
    position: relative;
}
.checkbox-label input:checked + .cb-box::after,
.tax-checkbox input:checked + .cb-box::after,
.invoice-item input:checked + .cb-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* ========== 移动端：历史记录卡片式布局（纯卡片无表格格式：默认两行 购方名称/日期+金额，点击卡片展开放大，底部显示 删除/查看 操作行） ========== */
@media (max-width: 768px) {
    #historyModal .modal-content { max-height: 88vh; }
    #historyModal .history-table-wrap {
        max-height: none;
        border: none;
        border-radius: 0;
        overflow-y: auto;
    }
    #historyModal .history-table thead { display: none; }
    #historyModal .history-table,
    #historyModal .history-table tbody { display: block; }
    #historyModal .history-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        margin-bottom: 10px;
        background: #fff;
        padding: 8px 12px 4px;
        cursor: pointer;
        transition: border-color .15s, box-shadow .15s;
    }
    #historyModal .history-table tbody tr:hover { background: #fff; }
    /* 展开态：卡片放大放高（边框主题色+阴影，底部多一行操作） */
    #historyModal .history-table tbody tr.active {
        border-color: var(--primary-color);
        box-shadow: 0 2px 12px rgba(74, 144, 226, 0.18);
        padding-bottom: 6px;
    }
    #historyModal .history-table td {
        display: block;
        box-sizing: border-box;
        background: transparent;
        border: none;
        padding: 2px 0;
        text-align: left;
        height: auto;
    }
    #historyModal .history-table td.col-num { display: none; }
    /* 第一行：购方名称独占整行（超长省略） */
    #historyModal .history-table td:nth-child(3) {
        order: 0;
        flex: 1 1 100%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    /* 第二行：日期（含时间）在左，金额靠右 */
    #historyModal .history-table td.col-date {
        order: 1;
        display: flex;
        align-items: baseline;
        gap: 8px;
        white-space: nowrap;
        min-width: 0;
        font-size: 13px;
        color: #888;
        padding-right: 8px;
    }
    #historyModal .history-table td.col-date .date-main { font-weight: 500; }
    #historyModal .history-table td.col-date .date-sub { font-size: 12px; color: #999; margin-top: 0; }
    #historyModal .history-table td.col-amount { order: 2; margin-left: auto; text-align: right; white-space: nowrap; }
    /* 操作行：默认隐藏，展开时显示（删除/查看 两按钮合并一行紧凑排列） */
    #historyModal .history-table td.col-action {
        order: 3;
        flex: 1 1 100%;
        display: none;
        margin-top: 2px;
        padding: 4px 0 0;
        text-align: left;
    }
    #historyModal .history-table tbody tr.active td.col-action { display: block; }
    #historyModal .history-table td.col-action .action-btns { justify-content: flex-end; gap: 8px; }
    #historyModal .history-table td.col-action .btn-sm { margin: 0; }
    #historyModal .history-table td:only-child { width: 100%; }
}
/* ========== 移动端：税收分类模态框隐藏19位商品编码（只显示名称/税率/数量） ========== */
@media (max-width: 768px) {
    #codeRecommendModal .rec-code { display: none; }
    #codeBrowserModal .tree-meta { display: none; }
    .code-tree-menu .tree-meta { display: none; }
    .code-tree-menu .code-tree-search-input { font-size: 16px; }
}