/* ===== 采购与库存管理系统 样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    font-size: 14px;
    color: #333;
    background: #f0f2f5;
}
a { text-decoration: none; color: inherit; }

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

/* 顶部栏 */
.topbar {
    height: 52px;
    background: linear-gradient(90deg, #1a7d3c, #2e9b4f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    flex-shrink: 0;
}
.topbar-left { display: flex; align-items: baseline; gap: 12px; }
.logo { font-size: 18px; font-weight: bold; }
.subtitle { font-size: 12px; opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.logout-btn { background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 4px; }
.logout-btn:hover { background: rgba(255,255,255,.3); }

/* 主体布局 */
.main-area { flex: 1; display: flex; overflow: hidden; }

/* 侧边栏 */
.sidebar {
    width: 200px;
    background: #fff;
    border-right: 1px solid #e8e8e8;
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 20px;
}
.nav-group { margin-top: 8px; }
.nav-group-title {
    font-size: 12px; color: #999; padding: 10px 16px 4px; font-weight: bold;
}
.nav-item {
    display: block; padding: 9px 18px; color: #555; cursor: pointer;
    border-left: 3px solid transparent; transition: all .15s;
}
.nav-item:hover { background: #f5f9f5; color: #1a7d3c; }
.nav-item.active {
    background: #eaf6ee; color: #1a7d3c; border-left-color: #1a7d3c; font-weight: bold;
}

/* 内容区 */
.content { flex: 1; padding: 16px 20px; overflow-y: auto; }

/* 页面头部 */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.page-title { font-size: 17px; font-weight: bold; color: #222; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 工具栏 */
.toolbar {
    display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
    flex-wrap: wrap; background: #fff; padding: 12px; border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.toolbar input, .toolbar select {
    padding: 7px 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px;
    outline: none;
}
.toolbar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
    padding-right: 26px;
    cursor: pointer;
}
.toolbar input:focus, .toolbar select:focus { border-color: #2e9b4f; }
.filter-group { display: inline-flex; align-items: center; gap: 6px; }
.filter-group label { white-space: nowrap; font-size: 13px; color: #555; }

/* 按钮 */
.btn {
    padding: 7px 16px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 13px; transition: all .15s; display: inline-flex; align-items: center; gap: 4px;
}
.btn-primary { background: #2e9b4f; color: #fff; }
.btn-primary:hover { background: #1a7d3c; }
.btn-default { background: #fff; border: 1px solid #d9d9d9; color: #555; }
.btn-default:hover { border-color: #2e9b4f; color: #2e9b4f; }
.btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.btn-disabled:hover { opacity: 0.5 !important; }
.btn-danger { background: #fff; border: 1px solid #ff7875; color: #ff4d4f; }
.btn-danger:hover { background: #fff1f0; }
.btn-success { background: #2e9b4f; color: #fff; }
.btn-success:hover { background: #1a7d3c; }
.btn-danger-solid { background: #ff4d4f; color: #fff; border: 1px solid #ff4d4f; }
.btn-danger-solid:hover { background: #ff7875; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-link { background: none; color: #2e9b4f; padding: 4px 6px; }
.btn-link:hover { text-decoration: underline; }

/* 卡片 */
.card {
    background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
    padding: 14px; margin-bottom: 14px;
}

/* 表格 */
.table-wrap { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    background: #fafafa; text-align: left; padding: 10px 12px; font-weight: 600;
    color: #555; border-bottom: 1px solid #e8e8e8; white-space: nowrap; position: sticky; top: 0;
}
.data-table td { padding: 9px 12px; border-bottom: 1px solid #f0f0f0; }
.data-table tr:hover td { background: #fbfdfb; }
.data-table .amount { text-align: right; font-variant-numeric: tabular-nums; }
.empty-tip { text-align: center; color: #bbb; padding: 40px; }

/* 批量操作栏 */
.batch-bar {
    display: flex; align-items: center; gap: 10px;
    background: #eaf6e9; border: 1px solid #c3e6c1;
    border-radius: 8px; padding: 10px 16px; margin-bottom: 12px;
    font-size: 14px; animation: slideDown 0.2s ease;
}
.batch-bar #batchCount { font-weight: 600; color: #1a7d3c; min-width: 80px; }
.batch-bar .btn-sm { font-size: 13px; }
@keyframes slideDown { from { opacity:0; transform:-4px; } to { opacity:1; transform:0; } }
.row-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #1a7d3c; }
.row-cb:disabled { cursor: not-allowed; opacity: 0.4; }

/* 状态标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.tag-draft { background: #f5f5f5; color: #888; }
.tag-pending { background: #fff7e6; color: #fa8c16; }
.tag-done { background: #f6ffed; color: #52c41a; }
.tag-submitted { background: #e6f7ff; color: #1890ff; }
.tag-review { background: #fff1f0; color: #ff4d4f; }

/* 弹窗 */
.modal-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: none; align-items: flex-start; justify-content: center; z-index: 100;
    overflow-y: auto; padding: 30px 0;
}
.modal-mask.show { display: flex; }
.modal {
    background: #fff; border-radius: 8px; width: 90%; max-width: 960px;
    box-shadow: 0 8px 30px rgba(0,0,0,.2); animation: slideIn .2s;
}
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
    padding: 14px 20px; border-bottom: 1px solid #eee; display: flex;
    justify-content: space-between; align-items: center;
}
.modal-title { font-size: 16px; font-weight: bold; }
.modal-close { cursor: pointer; font-size: 22px; color: #bbb; line-height: 1; }
.modal-close:hover { color: #666; }
.modal-body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid #eee; text-align: right; display: flex; gap: 8px; justify-content: flex-end; }

/* 表单 */
.form-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.form-item { flex: 1; min-width: 200px; }
.form-item label { display: block; margin-bottom: 5px; color: #666; font-size: 13px; }
.form-item .req { color: #ff4d4f; }
.form-item input, .form-item select, .form-item textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 4px;
    font-size: 13px; outline: none; font-family: inherit;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { border-color: #2e9b4f; }

/* 统计卡片 */
.stat-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-card {
    flex: 1; min-width: 160px; background: #fff; border-radius: 6px; padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); border-left: 4px solid #2e9b4f;
}
.stat-card .num { font-size: 26px; font-weight: bold; color: #1a7d3c; }
.stat-card .label { font-size: 13px; color: #888; margin-top: 4px; }
.stat-card.stat-card-disabled {
    border-left-color: #ccc;
    background: #f5f5f5;
    opacity: 0.6;
}
.stat-card.stat-card-disabled .num,
.stat-card.stat-card-disabled .label { color: #aaa; }

/* 提示 */
.toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color: #fff; padding: 10px 20px; border-radius: 6px;
    z-index: 999; font-size: 14px; display: none;
}
.toast.show { display: block; animation: fadeIn .2s; }
.toast-error { background: #c0392b !important; color: #fff !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 明细选择区 */
.detail-editor { border: 1px dashed #d9d9d9; border-radius: 6px; padding: 12px; margin-top: 8px; }
.detail-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.detail-line input, .detail-line select { padding: 6px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
.detail-line .w-name { flex: 2; min-width: 180px; }
.detail-line .w-num { width: 90px; }
.detail-line .w-del { color: #ff4d4f; cursor: pointer; }

/* 分页 */
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px; color: #888; font-size: 13px; }

/* 流程提示 */
.flow-steps { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.flow-step { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 20px; padding: 6px 16px; font-size: 13px; color: #666; }
.flow-step.active { background: #1a7d3c; color: #fff; border-color: #1a7d3c; }

/* 合并备注 */
.merge-note { font-size: 12px; color: #888; background: #fafafa; padding: 4px 8px; border-radius: 4px; }

/* 报表合计行 */
tr.total-row { background: #f6f8fa; font-weight: bold; border-top: 2px solid #d9d9d9; }
tr.total-row td { color: #333; padding-top: 10px; padding-bottom: 10px; }

/* 产品库多选弹窗 */
#pickerOverlay table.data-table th,
#pickerOverlay table.data-table td {
    padding: 7px 10px;
    font-size: 12.5px;
}
#pickerOverlay .pick-cb {
    width: 16px; height: 16px; cursor: pointer; accent-color: #1a7d3c;
}
#pickerOverlay tr[data-id]:hover td { background: #f0f8f3; }
#pickerOverlay tr[data-id] td:first-child { text-align: center; }

/* 明细表（table模式）*/
#itemTable th, #itemTable td { padding: 8px 10px; }
#itemTable input[type="number"] { width: 70px; padding: 5px 6px; border:1px solid #d9d9d9; border-radius:3px; }
#itemTable input:not([type="number"]) { width:95%; padding:5px 6px; border:1px solid #d9d9d9; border-radius:3px; }
#itemTable tr[data-pid] { transition: background .15s; }
#itemTable tr[data-pid]:hover { background: #fbfdfb; }

/* 隐藏所有 number 输入框的增减按钮，避免误点出现非整数小数 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}