/* =========================================================================
   style.css —— 页面外观样式（企业政务风格：蓝白配色、简洁清晰）
   ========================================================================= */

/* 让盒子尺寸计算更符合直觉 */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
    background: #f2f5f9;
    color: #2b3a4b;
}

/* ---------------- 整体布局：左导航 + 右内容 ---------------- */
.layout { display: flex; min-height: 100vh; }

/* ---------------- 左侧纵向导航栏 ---------------- */
.sidebar {
    width: 215px;
    background: linear-gradient(180deg, #1c4d8f, #143565);
    color: #fff;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    flex-shrink: 0;
}
/* 品牌区（顶部 logo + 名称） */
.sidebar .brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 18px 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .logo {
    width: 44px; height: 44px; border-radius: 10px;
    background: #fff; color: #1f4e8c;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
}
.sidebar .brand-text .title { font-size: 18px; font-weight: 600; }
.sidebar .brand-text .subtitle { font-size: 11px; opacity: .75; margin-top: 3px; }

/* 导航菜单 */
.nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 8px;
    color: rgba(255,255,255,.8); text-decoration: none;
    font-size: 14px; transition: .2s;
}
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
/* 当前页高亮 */
.nav-item.active { background: #2f6db5; color: #fff; font-weight: 600; }
.nav-item .icon { font-size: 15px; width: 20px; text-align: center; }

.sidebar-foot {
    padding: 14px 18px; font-size: 11px; opacity: .55;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* ---------------- 右侧内容区 ---------------- */
.main { flex: 1; min-width: 0; }
/* 内容区顶部的当前页标题 */
.page-head { padding: 22px 28px 4px; }
.page-head h1 { margin: 0; font-size: 20px; color: #2b3a4b; }
.page-head p { margin: 5px 0 0; font-size: 12px; color: #7a8ba0; }

/* 页内横向导航菜单（数据管理与分析页的二级菜单）*/
.sub-nav {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-top: 14px;
    border-bottom: 1px solid #e3e9f1;
}
.sub-nav-item {
    border: 0; background: none; cursor: pointer;
    position: relative;
    padding: 10px 18px 12px;
    font-size: 14px; color: #5a6b80;
    border-radius: 8px 8px 0 0;
    transition: color .18s, background .18s;
}
.sub-nav-item:hover { color: #2f6db5; background: #f2f7fd; }
.sub-nav-item.active { color: #2f6db5; font-weight: 600; }
/* 激活项底部蓝色指示条 */
.sub-nav-item.active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
    height: 2px; border-radius: 2px; background: #2f6db5;
}
/* 窄屏：菜单可横向滑动不换行 */
@media (max-width: 720px) {
    .sub-nav { flex-wrap: nowrap; overflow-x: auto; }
    .sub-nav-item { white-space: nowrap; }
}

/* 页签内容区：默认隐藏，激活项显示 */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---------------- 商圈商品价格分析 ---------------- */
.price-toolbar { gap: 12px; flex-wrap: wrap; }
.price-search { flex: 1; min-width: 220px; }
.price-search input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #d5dee8; border-radius: 8px; padding: 9px 12px;
    font-size: 14px; color: #2b3a4b; background: #fff;
}
.price-search input:focus { outline: none; border-color: #2f6db5; box-shadow: 0 0 0 3px rgba(47,109,181,.12); }
.price-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 第二行：两个上传按钮（与第一行分隔开）*/
.price-upload-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 20px; border-bottom: 1px solid #eef2f7; background: #fbfcfe;
}

.price-stats { padding: 10px 16px; font-size: 13px; color: #5a6b80; border-bottom: 1px solid #eef2f7; }
.price-stats b { color: #2b3a4b; }
.price-stats .ps-ok { color: #1e9e55; }
.price-stats .ps-warn { color: #e08600; }

/* 两组列表头：我方=蓝、商圈=橙、对比=灰 */
.price-table th.th-my { background: #eaf2fc; color: #1f4e8c; text-align: center; }
.price-table th.th-comp { background: #fdf2e6; color: #b06a16; text-align: center; }
.price-table th.th-diff { background: #f1f4f8; color: #5a6b80; text-align: center; }
.price-table thead tr:nth-child(2) th { font-weight: 500; }

.price-table .cell-name { font-weight: 600; color: #2b3a4b; }
.price-table .cell-store { color: #b06a16; font-weight: 600; }
.price-table .cell-price { font-weight: 600; color: #1f4e8c; white-space: nowrap; }
.price-table .cell-kw { white-space: normal; min-width: 130px; max-width: 210px; }
.price-table .cell-na { color: #a7b2c0; text-align: center; font-size: 12px; background: #fafbfc; }

/* 行状态：只有我方 / 只有商圈 时整行淡化 */
.price-table tr.row-my-only { background: #f8fbff; color: #8a99ac; }
.price-table tr.row-comp-only { background: #fffaf4; }
.price-table tr.row-my-only:hover,
.price-table tr.row-comp-only:hover { background: #f3f7fc; }

/* 关键词小标签 */
.kw-tag {
    display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px;
    font-size: 12px; line-height: 1.6; border-radius: 10px;
    background: #eef3f9; color: #4a6480; border: 1px solid #dde7f1;
}
.row-comp-only .kw-tag { background: #fdf1e3; color: #a96614; border-color: #f3ddc2; }

/* 差价：商圈贵（暖色）/ 便宜（绿色） */
.diff-up { color: #d9534f; font-weight: 600; white-space: nowrap; text-align: center; }
.diff-down { color: #1e9e55; font-weight: 600; white-space: nowrap; text-align: center; }
.diff-flat { color: #8a94a3; font-weight: 600; white-space: nowrap; text-align: center; }

/* 销量对比组：表头绿底，数字居中 */
.price-table th.th-sales { background: #eef8f2; color: #1e7a49; text-align: center; }
.price-table .cell-sales { text-align: center; font-weight: 600; color: #2b3a4b; white-space: nowrap; }

/* 一个商品对比多家门店：同组视觉（左侧为我方商品合并单元格，右侧一家门店一行）*/
.price-table tr.group-first > td { border-top: 2px solid #e1e9f2; }
.price-table tr.group-first .cell-name { vertical-align: top; }
.price-table tr.group-more > td { background: #fcfdff; }
.price-table tr.group-more:hover > td { background: #f7fafd; }
/* 商品名后的"对比 N 家"小标 */
.grp-count {
    display: inline-block; margin-left: 6px; padding: 0 6px;
    font-size: 11px; line-height: 17px; border-radius: 9px; vertical-align: 1px;
    background: #eaf2fc; color: #1f4e8c; border: 1px solid #d5e4f6; font-weight: 500;
}

/* 商圈商品管理库：匹配结果、来源文件、促销价 */
.match-ok { color: #1e9e55; font-weight: 600; }
.match-score { color: #9aabbe; font-size: 12px; }
.cell-na2 { color: #a7b2c0; }
.cell-src { color: #8a94a3; font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cell-promo { color: #e04536; font-weight: 600; white-space: nowrap; }

/* ---------------- 主体容器 ---------------- */
.container { max-width: 1250px; margin: 22px auto; padding: 0 18px; }

/* ---------------- 统计卡片 ---------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card {
    background: #fff; border-radius: 12px; padding: 16px;
    box-shadow: 0 2px 8px rgba(31,78,140,.08);
    position: relative; overflow: hidden;
}
.card .num { font-size: 30px; font-weight: 700; color: #1f4e8c; }
.card .label { font-size: 13px; color: #7a8ba0; margin-top: 4px; }
.card::after {
    content: ""; position: absolute; right: -20px; bottom: -20px;
    width: 70px; height: 70px; border-radius: 50%; background: rgba(47,109,181,.08);
}

/* ---------------- 工具栏 ---------------- */
.toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* 工具栏右侧按钮组（如：上传门店价格 Excel + 新增商品）*/
.toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 报销列表：年份/月份筛选按钮 + 弹出面板 */
.month-filter { position: relative; }
.month-filter-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
.month-filter-btn .mf-caret { color: #8da0b5; font-size: 12px; }
.month-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    width: 252px; background: #fff; border: 1px solid #cfdbe8; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 40, 70, .16); padding: 12px;
}
.month-panel[hidden] { display: none; }
.mf-row { display: flex; gap: 8px; }
.mf-row .input { flex: 1; min-width: 0; }
.mf-clear {
    margin-top: 10px; width: 100%; border: none; cursor: pointer;
    background: #f1f5fa; color: #2f6db5; border-radius: 8px;
    padding: 8px 0; font-size: 13px; font-family: inherit;
}
.mf-clear:hover { background: #e2edf9; }
.input {
    padding: 9px 12px; border: 1px solid #d5dee8; border-radius: 8px;
    font-size: 14px; background: #fff; min-width: 130px;
}
.input:focus { outline: none; border-color: #2f6db5; }

/* ---------------- 按钮 ---------------- */
.btn { border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; cursor: pointer; transition: .2s; }
.btn-primary { background: #2f6db5; color: #fff; }
.btn-primary:hover { background: #1f4e8c; }
.btn-ghost { background: #fff; color: #2b3a4b; border: 1px solid #d5dee8; }
.btn-ghost:hover { background: #f0f4f9; }

/* ---------------- 面板 / 表格 ---------------- */
.panel { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(31,78,140,.06); margin-bottom: 20px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #eef2f7; }
.panel-head h2 { margin: 0; font-size: 16px; }
.count { color: #7a8ba0; font-size: 13px; }
.hint { color: #9aabbe; font-size: 12px; }
.week-range { color: #2f6db5; font-weight: 600; font-size: 14px; }

/* 排班表格子与状态小圆块 */
.cell { text-align: center; position: relative; transition: background .15s; }
.cell:hover { background: #eef4fb; }
.cell-today { background: #fff8e6; }
.att-chip {
    display: inline-block; min-width: 38px; text-align: center;
    padding: 3px 10px; border-radius: 14px; color: #fff; font-size: 12px;
}

/* ===== 班次排班表（仿纸质表：日期/周几/白班/中班/夜班/备注）===== */
.panel-head-tools { display: flex; align-items: center; gap: 12px; }
.btn-danger-ghost {
    border: 1px solid #f0b0b0; color: #d04040; background: #fff5f5;
    padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.btn-danger-ghost:hover { background: #fde8e8; }

.st-footnote { padding: 10px 4px; font-size: 14px; color: #333; }

/* ===== 排班表预览（后端把 PDF 渲染成图片，直接铺满，没有 PDF 阅读器的黑边工具条）===== */
.sched-pdf-box {
    margin-top: 12px; border: 1px solid #d7dee8; border-radius: 10px;
    background: #f4f6f9; padding: 8px; overflow: hidden;
}
.sched-pdf-img { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; }

/* 门店切换下拉：宽度随门店名，不占太多地方 */
.store-select { width: auto; max-width: 150px; padding: 6px 28px 6px 10px; font-weight: 600; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.table th { background: #f7f9fc; color: #5a6b80; font-weight: 600; }
.table tr:hover { background: #f7fafd; }

/* 状态 / 优先级 标签 */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; }
.st-待处理 { background: #fff3e0; color: #e08600; }
.st-处理中 { background: #e3f0ff; color: #1f6fd0; }
.st-已完成 { background: #e6f6ec; color: #1e9e55; }
.st-已归档 { background: #eceff3; color: #7a8ba0; }
.pri-高 { color: #e03131; font-weight: 600; }
.pri-中 { color: #e08600; font-weight: 600; }
.pri-低 { color: #1e9e55; font-weight: 600; }

/* 库存预警行与标签 */
.row-low { background: #fff7f6; }
.row-low:hover { background: #ffefed !important; }
.tag-warn { color: #e03131; font-size: 12px; border: 1px solid #f3c6c6; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }

/* 商品列表"多媒体宣传材料"格：文字入口，点一下打开管理面板 */
.pt-media-link { color: #1f6fd0; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pt-media-link:hover { text-decoration: underline; }
.pt-media-link.is-empty { color: #8a99ad; }
.pt-media-link.is-empty:hover { color: #1f6fd0; }

/* 多媒体面板里的视频条目：一个视频一块，右上角可删 */
.pm-video-item { position: relative; margin-bottom: 10px; }
.pm-video-item video {
    display: block; width: 100%; max-height: 260px;
    border-radius: 8px; background: #000;
}

/* 筛选里的勾选框 */
.chk { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #5a6b80; }

/* Tab 切换 */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { border: none; background: #fff; color: #5a6b80; padding: 9px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; border: 1px solid #d5dee8; }
.tab.active { background: #2f6db5; color: #fff; border-color: #2f6db5; font-weight: 600; }

/* ---------------- 数据分析页面 ---------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pie-block { display: flex; justify-content: center; padding: 16px 0 8px; }
.pie {
    width: 130px; height: 130px; border-radius: 50%;
    background: conic-gradient(#ccc 0% 0%);
    position: relative;
}
.pie-center {
    position: absolute; inset: 0; margin: auto; width: 70px; height: 70px;
    border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #2f6db5; top: 0; bottom: 0; left: 0; right: 0;
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding-bottom: 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5a6b80; }
.legend-item .dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.legend-item b { color: #2b3a4b; margin-left: 4px; }

/* ---------------- 数据管理页：每日客流漏斗录入 ---------------- */
.tf-date {
    border: 1px solid #d5dee8; border-radius: 8px; padding: 8px 10px;
    font-size: 14px; color: #2b3a4b; background: #fff;
}
.tf-date:focus { outline: none; border-color: #2f6db5; }
.tf-body { padding: 22px 20px; }

/* 漏斗横排：三个录入节点，中间夹两段转化率 */
.tf-funnel { display: flex; align-items: stretch; gap: 8px; }
.tf-node {
    flex: 1; min-width: 0;
    background: #f5f8fc; border: 1px solid #e3e9f1; border-radius: 10px;
    padding: 14px 16px;
}
.tf-node label { display: block; font-size: 13px; font-weight: 600; color: #5a6b80; margin-bottom: 8px; }
.tf-node input {
    width: 100%; box-sizing: border-box;
    font-size: 22px; font-weight: 700; color: #1f4e8c; text-align: center;
    border: 1px solid #d5dee8; border-radius: 8px; padding: 8px 38px 8px 10px; background: #fff;
}
.tf-node input:focus { outline: none; border-color: #2f6db5; box-shadow: 0 0 0 3px rgba(47,109,181,.12); }
/* 去掉 number 输入框的上下小箭头，视觉更干净 */
.tf-node input::-webkit-outer-spin-button,
.tf-node input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tf-node input[type=number] { -moz-appearance: textfield; }

/* 输入框内的单位后缀（人数框的"人"、比率框的"%"）*/
.tf-input-wrap, .tf-rate-wrap { position: relative; }
.tf-input-wrap { width: 100%; }
.tf-unit {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #9aabbe; pointer-events: none; font-weight: 500;
}

/* 节点之间：转化率名称 + 可手填的比率输入框 + 箭头 */
.tf-edge {
    flex: 0 0 116px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
}
.tf-edge-name { font-size: 12px; color: #8a94a3; text-align: center; }
.tf-arrow { font-size: 18px; color: #c0c9d5; line-height: 1; }

/* 比率数字框（绿色，嵌在节点之间；只放纯数字，% 由右侧后缀显示）*/
.tf-rate-input {
    width: 84px; box-sizing: border-box;
    font-size: 15px; font-weight: 700; color: #1e9e55; text-align: center;
    border: 1px solid #bfe3cd; border-radius: 7px; background: #f3fbf6;
    padding: 5px 22px 5px 6px;
}
.tf-rate-input:focus { outline: none; border-color: #1e9e55; background: #fff; box-shadow: 0 0 0 3px rgba(30,158,85,.14); }
.tf-rate-input::-webkit-outer-spin-button,
.tf-rate-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tf-rate-input[type=number] { -moz-appearance: textfield; }
.tf-rate-wrap .tf-unit { right: 7px; font-size: 12px; color: #7fbd97; }

/* 总转化率横幅（曝光 → 下单）：比率框用蓝色 */
.tf-overall {
    margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 12px;
    background: #eef6ff; border: 1px solid #d6e8fb; border-radius: 10px; padding: 12px;
}
.tf-overall-name { font-size: 13px; color: #5a6b80; }
.tf-overall .tf-rate-input {
    width: 92px; color: #1f6fd0; border-color: #b6d4f5; background: #f4f9ff;
    font-size: 16px; padding: 6px 24px 6px 8px;
}
.tf-overall .tf-rate-input:focus { border-color: #1f6fd0; box-shadow: 0 0 0 3px rgba(31,111,208,.14); }
.tf-overall .tf-rate-wrap .tf-unit { color: #6f9fd0; }

.tf-msg { font-size: 12px; color: #e08600; margin-top: 10px; min-height: 16px; }

/* 窄屏：漏斗改为竖排，箭头朝下 */
@media (max-width: 720px) {
    .tf-funnel { flex-direction: column; }
    .tf-edge { flex-basis: auto; flex-direction: row; gap: 8px; padding: 2px 0; }
    .tf-arrow { transform: rotate(90deg); }
}

/* 操作按钮组（小按钮） */
.ops .op { border: none; background: none; cursor: pointer; color: #2f6db5; font-size: 13px; margin: 0 4px; padding: 0; }
.ops .op.del { color: #e03131; }
.ops .op:hover { text-decoration: underline; }

/* 档案表"本月请假天数"列：数字 + 小编辑按钮 */
.staff-leave { white-space: nowrap; }
.staff-leave .sl-num { display: inline-block; min-width: 16px; }
.staff-leave .sl-edit {
    border: none; background: none; cursor: pointer;
    color: #2f6db5; font-size: 12px; padding: 0 0 0 6px;
}
.staff-leave .sl-edit:hover { text-decoration: underline; }

/* 请假登记弹窗：月历格子 */
.leave-cal { border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px; background: #fafbfd; }
.lc-weekrow, .lc-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.lc-weekrow span { text-align: center; font-size: 12px; color: #8a94a3; padding: 2px 0; }
.lc-grid { margin-top: 2px; }
.lc-cell {
    aspect-ratio: 1.6 / 1; border: 1px solid #dfe5ec; border-radius: 6px;
    background: #fff; cursor: pointer; font-size: 13px; color: #334155;
    display: flex; align-items: center; justify-content: center;
}
.lc-cell.lc-blank { border: none; background: transparent; cursor: default; }
.lc-cell.lc-weekend:not(.lc-on) { background: #f6f8fb; color: #8a94a3; }
.lc-cell.lc-today:not(.lc-on) { border-color: #2f6db5; font-weight: 700; color: #2f6db5; }
.lc-cell:not(.lc-blank):hover { border-color: #2f6db5; }
.lc-cell.lc-on {
    background: #e03131; border-color: #c92a2a; color: #fff; font-weight: 700;
}
.leave-summary { padding: 0 22px 4px; font-size: 13px; color: #43566e; min-height: 20px; }

.empty { text-align: center; padding: 40px; color: #9aabbe; }

/* ---------------- 分类分布条形图 ---------------- */
.bars { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .name { width: 120px; font-size: 13px; color: #5a6b80; }
.bar-row .track { flex: 1; background: #eef2f7; border-radius: 8px; height: 18px; overflow: hidden; }
.bar-row .fill { height: 100%; background: linear-gradient(90deg, #2f6db5, #5aa0e8); border-radius: 8px; }
.bar-row .cnt { width: 40px; font-size: 13px; color: #7a8ba0; }

/* ---------------- 弹窗 ---------------- */
.modal-mask {
    position: fixed; inset: 0; background: rgba(20,32,48,.5);
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal { background: #fff; border-radius: 14px; width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid #eef2f7; }
.modal-head h3 { margin: 0; }
.close { border: none; background: none; font-size: 26px; cursor: pointer; color: #7a8ba0; line-height: 1; }
form { padding: 20px 22px; }
.form-row { margin-bottom: 14px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-row label { display: block; font-size: 13px; color: #5a6b80; margin-bottom: 6px; }
.form-row label em { color: #e03131; font-style: normal; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #d5dee8; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: #2f6db5; }
/* 报销/报修弹窗里带候选下拉的输入框，输入文字放大更易读 */
#rfModal .combo > input, #rpModal .combo > input { font-size: 16px; padding: 10px 34px 10px 12px; }
#rfModal .combo > input::placeholder, #rpModal .combo > input::placeholder { font-size: 14px; }   /* 提示语保持小一号 */

/* 问题描述多行框版 combo：文本域铺满、箭头钉在右上角，候选面板同样贴在框下方 */
#rpModal .combo-textarea > textarea {
    width: 100%; font-size: 16px; line-height: 1.5;
    padding: 10px 34px 10px 12px; resize: vertical;
}
.combo-textarea .combo-arrow { top: 8px; transform: none; bottom: auto; }
.combo-textarea .combo-menu { z-index: 70; }   /* 多行框下面紧跟其他字段，避免被遮挡 */

/* 自建候选下拉面板（原生 datalist 弹层字号无法控制，故自建），选项文字 17px */
.combo { position: relative; }
.combo-arrow {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: #9aabbe; font-size: 15px; line-height: 1; cursor: pointer; user-select: none;
    padding: 6px 4px; border-radius: 4px;
}
.combo-arrow:hover { color: #2f6db5; background: #eef5fc; }
.combo-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    background: #fff; border: 1px solid #cfdbe8; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(20, 40, 70, .16);
    padding: 4px; max-height: 238px; overflow-y: auto;
}
.combo-menu[hidden] { display: none; }
.combo-item {
    padding: 10px 12px; font-size: 17px; line-height: 1.4; color: #2b3a4b;
    border-radius: 6px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item:hover, .combo-item.active { background: #eaf3fc; color: #1f6fd0; }
.combo-empty { padding: 10px 12px; font-size: 14px; color: #9aabbe; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* 工具条右侧的一组按钮（新增 / 选项设置 并排，间距 10px） */
.toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 报销选项设置弹窗（费用用途 / 门店归属 / 申请人 三分区） */
.opt-tip { padding: 14px 22px 4px; color: #7a8ba0; font-size: 13px; line-height: 1.6; }
.opt-body { padding: 8px 22px; }
.opt-group { padding: 12px 0; border-top: 1px dashed #e6ecf4; }
.opt-group:first-child { border-top: none; }
.opt-group-title { font-size: 14px; font-weight: 600; color: #2b3a4b; margin-bottom: 10px; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 32px; }
.opt-list:empty::before { content: "暂无选项，请在下方添加"; color: #a6b3c2; font-size: 13px; align-self: center; }
.opt-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px 5px 12px; background: #eef4fb; color: #1f5d99;
    border: 1px solid #cfe0f2; border-radius: 999px; font-size: 13px;
}
.opt-chip button {
    border: none; background: rgba(31, 93, 153, .12); color: #1f5d99;
    width: 18px; height: 18px; border-radius: 50%; font-size: 13px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.opt-chip button:hover { background: #e03131; color: #fff; }
.opt-add { display: flex; gap: 10px; }
.opt-add .input { flex: 1; min-width: 0; }
.opt-foot { padding: 12px 22px 20px; margin-top: 0; align-items: center; }
.opt-dirty { margin-right: auto; color: #e08600; font-size: 13px; }
.opt-dirty[hidden] { display: none; }

/* 报销弹窗里的付款凭证区（付款截图 / 其他图片） */
.rf-voucher { margin-top: 6px; padding-top: 14px; border-top: 1px dashed #e6ecf4; }
.rf-voucher-title { font-size: 14px; font-weight: 600; color: #2b3a4b; margin-bottom: 10px; }
.rf-voucher[hidden] { display: none; }
.rf-voucher-tip {
    margin-top: 10px; padding: 10px 12px; background: #f5f8fc; border: 1px dashed #cfdbe8;
    border-radius: 8px; color: #7a8ba0; font-size: 13px; line-height: 1.6;
}
.rf-voucher-tip[hidden] { display: none; }
/* 凭证在 640px 弹窗里两栏偏挤，收窄间距与主图高度 */
.rf-voucher .po-img-grid { gap: 12px; }
.rf-voucher .po-img-mainpic { max-height: 200px; }

/* 打款弹窗：单据信息 + 滑动开关 + 凭证上传 */
.payout-body { padding: 4px 22px 8px; }
.payout-info {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
    background: #f5f8fc; border: 1px solid #e3e9f1; border-radius: 8px; margin-bottom: 14px;
}
.payout-info strong { font-size: 15px; color: #2b3a4b; }
.payout-info-meta { font-size: 13px; color: #7a8ba0; }
.pay-switch-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pay-switch-label { font-size: 14px; font-weight: 600; color: #2b3a4b; margin-right: 2px; }
/* 开关两侧文字：当前状态高亮加粗，另一侧浅灰；也可直接点击切换 */
.pay-switch-side {
    font-size: 13px; font-weight: 600; color: #a9b4c2; cursor: pointer;
    user-select: none; transition: color .2s ease; line-height: 1;
}
.pay-switch-side.no.active { color: #8a94a3; }
.pay-switch-side.yes.active { color: #1e9e55; }
.pay-switch-side:hover { opacity: .8; }
/* 紧凑 iOS 风滑动开关（48×26），文字在轨道外两侧；未打款=灰（左），已打款=绿（右） */
.pay-switch {
    position: relative; flex: 0 0 auto;
    width: 48px; height: 26px; padding: 0; border: 0; border-radius: 13px;
    background: #d2d9e2; cursor: pointer; transition: background .22s ease;
}
.pay-switch:hover { background: #c3cbd6; }
.pay-switch.on { background: #1e9e55; }
.pay-switch.on:hover { background: #1b8e4c; }
.pay-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: left .2s cubic-bezier(.4,0,.2,1);
}
.pay-switch.on .pay-switch-knob { left: 25px; }
.payout-upload { border-top: 1px dashed #e6ecf4; padding-top: 12px; }
.payout-upload-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.payout-upload-title { font-size: 14px; font-weight: 600; color: #2b3a4b; }
.payout-upload-tip { font-size: 12px; color: #93a1b3; margin-bottom: 8px; line-height: 1.6; }
.payout-stage { position: relative; margin-top: 10px; }
.payout-stage .po-img-mainpic { max-height: 240px; }

/* 打款凭证（只读展示区）：无图显示"无"，有图为缩略图网格，点击放大；无任何上传/删除控件 */
.rf-voucher-readonly .payout-view { display: flex; flex-wrap: wrap; gap: 10px; }
.rf-voucher-readonly .payout-empty {
    width: 100%; padding: 12px 14px; background: #f7f9fc;
    border: 1px dashed #d5deea; border-radius: 8px;
    color: #8a98ab; font-size: 13px;
}
.rf-voucher-readonly .payout-item {
    width: 96px; height: 96px; padding: 0; border: 1px solid #e3e9f1;
    border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in;
}
.rf-voucher-readonly .payout-item:hover { border-color: #1f6fd0; box-shadow: 0 0 0 2px rgba(31,111,208,.15); }
.rf-voucher-readonly .payout-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 详情弹窗里的键值行 */
.detail { padding: 4px 22px 12px; }
.detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed #e6ecf4; font-size: 14px; }
.detail-row .k { color: #7a8ba0; flex-shrink: 0; }
.detail-row .v { color: #2b3a4b; text-align: right; }
.del-btn { color: #e03131; border-color: #f3c6c6; }
.del-btn:hover { background: #fdf0f0; }

/* 新增/编辑表单里的金额大字预览 */
.amount-preview {
    background: #eef4fc; border: 1px solid #d5e3f4; border-radius: 8px;
    padding: 10px 14px; display: flex; align-items: center;
}
.amount-preview span { font-size: 20px; font-weight: 700; color: #2f6db5; }

/* 上传 Excel 按钮行 */
.upload-row { display: flex; align-items: center; gap: 10px; }
.upload-row .hint { font-size: 12px; color: #9aa7b8; }

/* 上传结果与在线预览（弹窗内） */
#importResult { margin-top: 8px; }
.import-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.import-status .ico { font-size: 17px; line-height: 1; }
.import-status.ok { background: #e6f6ec; color: #1e9e55; }
.import-status.err { background: #fce8e8; color: #e03131; }
.import-status.load { background: #eef4fc; color: #2f6db5; }

/* 商品明细表（上传预览 / 详情弹窗共用，宽表格横向滚动） */
.items-scroll { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.items-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.items-table th, .items-table td { border: 1px solid #e2e8f0; padding: 6px 8px; text-align: center; white-space: nowrap; }
.items-table th { background: #f4f7fb; position: sticky; top: 0; font-weight: 600; color: #2b3a4b; }
.items-table td.tleft { text-align: left; white-space: normal; min-width: 140px; }
.detail-items-wrap { padding: 4px 22px 8px; }
.detail-items-title { margin: 10px 0 2px; font-size: 14px; color: #2b3a4b; }

/* 采购单备注行（iframe 下方，可编辑保存） */
.po-remark {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 22px 4px;
    padding: 12px 14px;
    background: #f7f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.po-remark-label { flex: 0 0 auto; padding-top: 7px; font-size: 13px; font-weight: 600; color: #2b3a4b; }
.po-remark-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #2b3a4b;
    border: 1px solid #d4dce8;
    border-radius: 6px;
    resize: vertical;              /* 允许纵向拉高，方便写长备注 */
    font-family: inherit;
    background: #fff;
}
.po-remark-input:focus { outline: none; border-color: #1f6fd0; box-shadow: 0 0 0 2px rgba(31,111,208,.12); }
.po-remark .btn { flex: 0 0 auto; }
.po-remark .po-upload-msg { padding-top: 8px; white-space: nowrap; }

/* 采购单在线 Excel 查看弹窗 */
.modal.modal-xl { width: 1200px; max-width: 97vw; height: 92vh; display: flex; flex-direction: column; }
.view-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-bottom: 1px dashed #e2e8f0; }
.view-bar-item { min-width: 110px; }
.view-bar-item label { display: block; font-size: 11px; color: #9aa7b8; }
.view-bar-item span { font-size: 13px; font-weight: 600; color: #2b3a4b; }
.excel-view-wrap { flex: 1; min-height: 0; padding: 10px 22px; display: flex; }
#puExcelWrap { flex: 1; width: 100%; min-height: 0; }
#puExcelWrap.luckysheet-waiting::before { content: "正在加载在线 Excel…"; color: #9aa7b8; font-size: 14px; }
#puViewModal .modal-foot { padding-bottom: 16px; }

/* ---- 详情页：网页版在线 Excel 外框（固定高度，像一个嵌在页面里的 Excel） ---- */
/* ---- 详情页：采购单上传卡片（在在线 Excel 大组件上方） ---- */
.po-upload-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 14px 0 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
}
.po-upload-title { font-size: 16px; font-weight: 700; color: #1f2d3d; }
.po-upload-sub { font-size: 12px; color: #8a97a8; margin-top: 3px; }
.po-upload-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.po-upload-msg { font-size: 13px; color: #1e9e55; }
.po-upload-msg.err { color: #d9534f; }
.po-upload-msg.busy { color: #1f6fd0; }

#puExcelSlot {
    width: 100%;
    height: 78vh;            /* 固定高度：Luckysheet 必须有明确高度才能渲染 */
    min-height: 520px;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    position: relative;
}
/* Luckysheet 真正的渲染容器：铺满外框 */
#puExcelSlot .pv-excel-box {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#puExcelSlot .excel-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f6fd0;
    font-size: 14px;
    background: #fff;
    z-index: 5;
}
#puExcelSlot .excel-err {
    padding: 28px;
    color: #c0392b;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
}

/* ---- 详情页：iframe 版在线 Excel 外框（采购单 / 收货单共用） ---- */
.excel-frame-slot {
    width: 100%;
    height: 78vh;
    min-height: 520px;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    position: relative;
}
.excel-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.excel-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b8;
    font-size: 14px;
    background: #fafbfd;
}

/* ---- 详情页：收货单图片（左扫描件 / 右原件） ---- */
/* 外层白色卡片，与上面的上传卡片风格统一 */
.po-img-section {
    margin-top: 26px;
    padding: 16px 18px 18px;
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
}
/* 左右两栏：窄屏（手机）自动换成上下堆叠 */
.po-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}
.po-img-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #fafbfd;
    border: 1px dashed #c7d2e0;
    border-radius: 10px;
}
.po-img-label { font-size: 14px; font-weight: 700; color: #1f2d3d; }
/* 未上传时的虚线选择框 */
.po-img-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 170px;
    background: #fff;
    border: 1px dashed #b9c6d8;
    border-radius: 8px;
    color: #8a97a8;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.po-img-drop:hover { border-color: #1f6fd0; color: #1f6fd0; background: #f5f9ff; }
.po-img-plus { font-size: 34px; line-height: 1; font-weight: 300; }
.po-img-drop-tip { font-size: 14px; }
.po-img-drop-sub { font-size: 12px; color: #aab6c6; }
/* 已上传后的缩略图：点击可放大 */
.po-img-thumb {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    cursor: zoom-in;
}
.po-img-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 只有一个上传项时：格子占左半边，宽度与上面两栏的格子保持一致 */
.po-img-grid-single { grid-template-columns: 1fr; max-width: calc(50% - 8px); }
/* 标题右侧的"已传张数/上限"小标志 */
.po-img-count { font-size: 12px; font-weight: 600; color: #1f6fd0; background: #eaf2fd;
    border-radius: 10px; padding: 1px 9px; margin-left: 6px; vertical-align: 1px; }
/* 多图舞台：主图相对定位（删除角标挂右上角） */
.po-img-stage { position: relative; }
.po-img-stage[hidden] { display: none; }
.po-img-mainpic {
    display: block; width: 100%; max-height: 260px; object-fit: contain;
    background: #fff; border: 1px solid #e3e9f1; border-radius: 8px; cursor: zoom-in;
}
/* 删除当前主图的角标 */
.po-img-del {
    position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
    border: 0; border-radius: 50%; background: rgba(217, 83, 79, .92); color: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.po-img-del:hover { background: #d9534f; }
/* 缩略图标志条：一排小方块，点击切换主图，当前选中高亮 */
.po-img-film { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.po-img-film button {
    position: relative; width: 52px; height: 52px; padding: 0;
    border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    background: #fff; cursor: pointer;
}
.po-img-film button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-img-film button.active { border-color: #1f6fd0; box-shadow: 0 0 0 2px rgba(31,111,208,.18); }
/* 缩略图左下角的序号，方便口头说"看第几张" */
.po-img-film button .film-no {
    position: absolute; left: 2px; bottom: 2px; min-width: 16px; height: 16px;
    line-height: 16px; text-align: center; font-size: 11px; color: #fff;
    background: rgba(20,26,36,.65); border-radius: 8px; padding: 0 4px;
}
/* hidden 属性兜底：display:flex/block 会盖过浏览器默认的 [hidden]{display:none} */
.po-img-drop[hidden], .po-img-thumb[hidden], .po-img-film[hidden] { display: none; }

/* =========================================================================
   批量传图弹窗（采购管理页）
     .seg        分段切换（付款证明/发票文件、按月/按日）
     .bi-*       三步弹窗：筛选条 / 勾选列表 / 单图预览
   ========================================================================= */
.seg { display: inline-flex; border: 1px solid #d3dbe6; border-radius: 8px; overflow: hidden; background: #fff; }
.seg button {
    border: 0; background: #fff; color: #566273; padding: 7px 16px;
    font-size: 13px; cursor: pointer; border-right: 1px solid #e3e8f0;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: #f5f9ff; }
.seg button.active { background: #1f6fd0; color: #fff; }
.seg button.active:hover { background: #1f6fd0; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

.bi-body { padding: 6px 22px; max-height: 68vh; overflow-y: auto; }
.bi-step { padding: 12px 0; border-bottom: 1px dashed #e9edf3; }
.bi-step:last-child { border-bottom: 0; }
.bi-step-title { font-size: 14px; font-weight: 600; color: #2c3748; margin-bottom: 10px; }
.bi-step-no {
    display: inline-block; width: 20px; height: 20px; line-height: 20px;
    text-align: center; border-radius: 50%; background: #1f6fd0; color: #fff;
    font-size: 12px; margin-right: 6px;
}
.bi-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.bi-filters .input { width: auto; min-width: 150px; }
.bi-list-head {
    display: flex; justify-content: space-between; align-items: center;
    margin: 6px 0 8px; font-size: 13px; color: #566273;
}
.bi-checkall { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bi-list { max-height: 280px; overflow: auto; border: 1px solid #e9edf3; border-radius: 8px; }
.bi-list .table { margin: 0; }
.bi-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#biPreview {
    width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #f7f9fc;
}
.bi-remark { margin-top: 12px; }
.bi-remark label { display: block; font-size: 13px; color: #566273; margin-bottom: 6px; }
.bi-remark textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid #d3dbe6; border-radius: 8px; padding: 8px 10px;
    font-size: 13px; line-height: 1.6; font-family: inherit;
}
.bi-remark textarea:focus { outline: none; border-color: #1f6fd0; }

/* 全屏大图预览遮罩 */
.img-viewer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(20, 26, 36, .82);
    cursor: zoom-out;
}
.img-viewer[hidden] { display: none; }
.img-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    transform-origin: center center;          /* 以图片中心为锚点缩放 */
    transition: transform .08s ease-out;      /* 滚轮一格格缩放时轻微顺一下 */
    user-select: none;
}
/* 放大后图片可按住拖动：抓手光标，按下时变"抓住"；拖动中关掉过渡保证跟手 */
.img-viewer img.is-zoomed { cursor: grab; }
.img-viewer img.is-zoomed.is-dragging { cursor: grabbing; transition: none; }
.img-viewer-tip {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #cdd7e4;
    font-size: 13px;
    white-space: nowrap;
}
/* 窄屏：两栏改一栏 */
@media (max-width: 860px) {
    .po-img-grid, .po-img-grid-single { grid-template-columns: 1fr; }
    .po-img-grid-single { max-width: 100%; }
}

/* ---------------- 全局提示 ---------------- */
.toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: #2b3a4b; color: #fff; padding: 12px 22px; border-radius: 8px; font-size: 14px;
    opacity: 0; transition: .3s; pointer-events: none; z-index: 200;
}

/* ---------------- 账号管理页：账号/密码展示与"显示 / 隐藏" ---------------- */
.ac-account { font-family: Consolas, "Courier New", monospace; }
.ac-pw-cell { white-space: nowrap; }
.ac-pw { font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; color: #2b3a4b; }
.pw-eye { border: none; background: none; cursor: pointer; color: #2f6db5; font-size: 12px; padding: 0 0 0 8px; }
.pw-eye:hover { text-decoration: underline; }
/* 弹窗里的密码框：右侧留出"显示"按钮的位置，别被文字压住 */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 56px; }
.pw-wrap .pw-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 0; }

/* ---------------- 侧边栏：当前登录人 + 修改密码 / 退出 ---------------- */
.sidebar-user {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-direction: column; gap: 8px;
}
.sidebar-user .su-name {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: rgba(255,255,255,.9);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .su-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #5cf5a8; flex: 0 0 auto;
}
.sidebar-user .su-ops { display: flex; gap: 6px; }
.sidebar-user .su-btn {
    flex: 1; padding: 6px 4px; cursor: pointer;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
    font-size: 12px; font-family: inherit; white-space: nowrap;
}
.sidebar-user .su-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---------------- 登录页 ---------------- */
.login-body {
    margin: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #eef3fa, #dfe8f5);
}
.login-card {
    width: 380px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 14px;
    padding: 30px 28px 22px;
    box-shadow: 0 10px 34px rgba(31,78,140,.16);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand .logo {
    width: 44px; height: 44px; border-radius: 10px;
    background: #1f4e8c; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
}
.login-title { font-size: 19px; font-weight: 600; color: #1c4d8f; }
.login-sub { font-size: 12px; color: #7a8ba0; margin-top: 3px; }

.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 13px; color: #5a6b80; margin-bottom: 6px; }
.login-field input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border: 1px solid #d5dee8; border-radius: 8px;
    font-size: 14px; font-family: inherit;
}
.login-field input:focus { outline: none; border-color: #2f6db5; }
/* 验证码一行：输入框 + 图片 */
.cap-row { display: flex; gap: 10px; align-items: stretch; }
.cap-row input { flex: 1 1 auto; min-width: 0; }
.cap-img {
    width: 132px; height: 44px; flex: 0 0 auto;
    border: 1px solid #d5dee8; border-radius: 8px;
    cursor: pointer; background: #f5f7fa;
}
.login-msg { min-height: 20px; font-size: 13px; color: #7a8ba0; margin: 2px 0 10px; line-height: 1.5; }
.login-msg.err { color: #d04040; }
.login-msg.ok { color: #1e9e55; }
.login-btn { width: 100%; padding: 11px 0; font-size: 15px; }
.login-tip {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #eef2f7;
    font-size: 12px; color: #9aa8ba; line-height: 1.7;
}
.login-tip b { color: #7a8ba0; }

/* 账号旁的"可登录"小标（勾了允许登录才会有） */
.ac-login-tag {
    display: inline-block; margin-left: 6px; padding: 0 6px;
    font-size: 11px; line-height: 17px; border-radius: 9px; vertical-align: 1px;
    background: #e7f7ee; color: #1e9e55; border: 1px solid #c6ebd5; font-weight: 500;
}
/* 弹窗里的"允许登录"勾选行（要盖过 .form-row label 的默认样式） */
.form-row .ac-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #43566e; margin-bottom: 0; cursor: pointer;
}
.form-row .ac-check input { width: auto; margin: 0; cursor: pointer; }
.ac-hint { display: block; margin-top: 4px; font-size: 12px; color: #8a94a3; line-height: 1.5; }

/* ---------------- 窄屏适配：导航栏收窄为纯图标 ---------------- */
@media (max-width: 860px) {
    .sidebar { width: 62px; }
    .sidebar .brand { justify-content: center; padding: 18px 8px; }
    .sidebar .brand-text, .sidebar-foot { display: none; }
    .nav-item { justify-content: center; padding: 12px 0; }
    .nav-label { display: none; }
    /* 侧边栏顶部只剩图标，底部这两个按钮竖着排、字小一点，保证还能点到 */
    .sidebar-user { padding: 10px 6px; }
    .sidebar-user .su-name { display: none; }
    .sidebar-user .su-ops { flex-direction: column; gap: 5px; }
    .sidebar-user .su-btn { font-size: 11px; padding: 6px 2px; }
}