/**
 * FishERP 后台样式
 */

:root {
    --fish-header-h: 60px;
    --fish-side-w: 220px;
    --fish-primary: #1e9fff;
    --fish-dark: #2b3a4b;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #f2f3f5;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------------- 布局 ---------------- */
.fish-layout { height: 100%; }

.fish-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--fish-header-h);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.fish-header .fish-logo {
    width: var(--fish-side-w);
    font-size: 18px;
    font-weight: 600;
    color: var(--fish-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fish-header .fish-logo i { font-size: 24px; }

/* index.html 用 <div id="header"> 承载注入片段，它需充当 .fish-header 的 flex 行，
   否则 .fish-header-right 的 margin-left:auto 失效、右侧信息会掉到 logo 下一行。 */
.fish-header #header {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.fish-header .fish-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #5a6474;
    font-size: 14px;
}

.fish-header .fish-user { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fish-header .fish-user .layui-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--fish-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }

.fish-side {
    position: fixed;
    top: var(--fish-header-h);
    bottom: 0;
    left: 0;
    width: var(--fish-side-w);
    background: #fff;
    border-right: 1px solid #eee;
    overflow: auto;
    z-index: 999;
}

.fish-body {
    position: fixed;
    top: var(--fish-header-h);
    left: var(--fish-side-w);
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #f2f3f5;
}

.fish-body iframe { width: 100%; height: 100%; border: 0; display: block; }

.fish-footer {
    position: fixed;
    left: var(--fish-side-w);
    right: 0;
    bottom: 0;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #99a2b1;
    font-size: 12px;
    background: #fafafa;
    border-top: 1px solid #eee;
    z-index: 998;
}

/* ---------------- 登录页 ---------------- */
.fish-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e9fff 0%, #16b777 100%);
    position: relative;
    overflow: hidden;
}
.fish-login-wrap::before,
.fish-login-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.fish-login-wrap::before { width: 420px; height: 420px; top: -120px; left: -120px; }
.fish-login-wrap::after  { width: 320px; height: 320px; bottom: -100px; right: -80px; }

.fish-login-box {
    position: relative;
    z-index: 2;
    width: 380px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .15);
    padding: 36px 34px 26px;
}

.fish-login-box h2 {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.fish-login-box .fish-sub {
    text-align: center;
    color: #99a2b1;
    font-size: 13px;
    margin-bottom: 26px;
}

.fish-login-box .layui-form-item { margin-bottom: 18px; }
.fish-login-box .layui-input { height: 42px; line-height: 42px; }

.fish-captcha-row { display: flex; gap: 10px; }
.fish-captcha-row .layui-input { flex: 1; }
.fish-captcha-row img {
    height: 42px;
    width: 120px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    cursor: pointer;
    background: #fafafa;
}

.fish-login-btn { width: 100%; height: 42px; font-size: 15px; }

.fish-login-tip {
    margin-top: 14px;
    text-align: center;
    color: #a6aeb8;
    font-size: 12px;
}

/* ---------------- 内容页 ---------------- */
.fish-page { padding: 14px; }

.fish-panel {
    background: #fff;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 12px;
}

.fish-search-form .layui-form-item { margin-bottom: 0; }

.fish-toolbar { margin-bottom: 10px; }

/* 统计卡片 */
.fish-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fish-card {
    flex: 1;
    min-width: 180px;
    background: #fff;
    border-radius: 4px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fish-card .fish-card-icon {
    width: 52px; height: 52px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
}
.fish-card .fish-card-info .fish-card-num { font-size: 24px; font-weight: 600; color: #333; line-height: 1.2; }
.fish-card .fish-card-info .fish-card-label { font-size: 13px; color: #99a2b1; margin-top: 4px; }

.bg-blue { background: #1e9fff; }
.bg-green { background: #16b777; }
.bg-orange { background: #ffb800; }
.bg-red { background: #ff5722; }
.bg-purple { background: #a233c6; }

/* 简易柱状图（无第三方图表库） */
.fish-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding-top: 10px; }
.fish-chart-item { flex: 1; text-align: center; }
.fish-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, #1e9fff, #7ec5ff);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height .4s;
}
.fish-chart-item .fish-chart-label { font-size: 12px; color: #99a2b1; margin-top: 6px; }
.fish-chart-item .fish-chart-value { font-size: 12px; color: #666; margin-bottom: 4px; }

.fish-empty { text-align: center; color: #a6aeb8; padding: 30px 0; }

/* 表格内文本过长省略 */
.fish-ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 出入库单据（入库单 / 出库单） ---------- */
.so-sub { color: #8a94a6; font-size: 12px; }
.so-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.so-total { font-size: 13px; color: #5a6474; }
.so-total b { color: #1e9fff; font-size: 15px; margin: 0 2px; }
.so-meta { font-size: 13px; color: #5a6474; line-height: 24px; }
.so-meta b { color: #333; }
/* 明细编辑表格里的输入框 */
#itemTable + .layui-table-view .layui-table-cell { height: auto; overflow: visible; }
#itemTable + .layui-table-view .layui-table-cell input.layui-input { height: 30px; line-height: 30px; }

/* ---------- 供应商关联 / 选商品弹窗 / 商品详情 ---------- */
.so-link { color: #1e9fff; cursor: pointer; }
.so-link:hover { text-decoration: underline; }
.so-sp-info { background: #f7f9fc; border: 1px solid #eef1f5; border-radius: 4px; padding: 8px 12px;
    margin: 0 0 10px; font-size: 13px; color: #5a6474; line-height: 22px; }
.so-sp-info b { color: #333; }
.so-handler-tip { color: #98a2b3; font-size: 12px; margin-left: 110px; }

.so-pick-thumb { width: 56px; height: 44px; object-fit: cover; border-radius: 4px; background: #f2f3f5; display: block; }
.so-pick-thumb-empty { width: 56px; height: 44px; line-height: 44px; text-align: center; color: #bbb;
    background: #f7f8fa; border-radius: 4px; font-size: 12px; }
.so-pick-name { color: #1e9fff; cursor: pointer; }
.so-pick-name:hover { text-decoration: underline; }

.so-pd { display: flex; gap: 16px; }
.so-pd-left { width: 260px; flex: none; }
.so-pd-main { width: 260px; height: 260px; border: 1px solid #eef1f5; border-radius: 6px;
    background: #f7f8fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.so-pd-main img { width: 100%; height: 100%; object-fit: contain; }
.so-pd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.so-pd-thumbs img { width: 58px; height: 58px; object-fit: cover; border: 1px solid #eef1f5;
    border-radius: 4px; cursor: pointer; }
.so-pd-thumbs img.on { border-color: #1e9fff; }
.so-pd-right { flex: 1; min-width: 0; }
.so-pd-title { font-size: 17px; font-weight: 600; color: #222; margin-bottom: 4px; }
.so-pd-sub { color: #8a94a6; font-size: 12px; margin-bottom: 10px; }
.so-pd-grid { display: flex; flex-wrap: wrap; font-size: 13px; color: #5a6474; }
.so-pd-grid > div { width: 50%; padding: 3px 0; box-sizing: border-box; }
.so-pd-grid .k { color: #8a94a6; }
.so-pd-price { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0; padding: 8px 12px;
    background: #f7f9fc; border-radius: 4px; font-size: 13px; color: #5a6474; }
.so-pd-price b { color: #ff5722; font-size: 15px; }
.so-pd-sec { margin-top: 12px; font-size: 13px; }
.so-pd-sec h4 { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; padding-left: 8px;
    border-left: 3px solid #1e9fff; }
.so-pd-desc { color: #5a6474; font-size: 13px; line-height: 22px; max-height: 140px; overflow: auto; word-break: break-word; }
.so-pd-empty { color: #a6aeb8; font-size: 13px; padding: 6px 0; }

/* 出库类型标签：销售出库保持中性色，活体死亡 / 其他损耗这类损耗出库标红 */
.so-tag { display: inline-block; padding: 0 8px; height: 22px; line-height: 22px; border-radius: 2px;
    font-size: 12px; background: #eef2f7; color: #46536b; }
.so-tag-loss { background: #fff1f0; color: #c9302c; }

/* 出库损耗统计条（列表上方） */
.so-stat { padding: 10px 12px; margin-bottom: 10px; background: #f7f9fc; border: 1px solid #eef1f5;
    border-radius: 4px; font-size: 13px; color: #5a6474; line-height: 22px; }
.so-stat-item { color: #5a6474; }
.so-stat-item b { color: #333; margin: 0 1px; }
.so-stat-item.is-loss,
.so-stat-item.is-loss b { color: #c9302c; }
.so-stat-sep { display: inline-block; width: 1px; height: 12px; background: #dfe6ee;
    margin: 0 12px; vertical-align: middle; }

/* 负数金额（损耗类出库的金额记账为负）统一标红 */
.so-neg { color: #c9302c; }

/* ---------- 列表「商品」列：缩略图 + 名称（点击看商品完整资料） ---------- */
.so-goods { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    margin-right: 10px; cursor: pointer; vertical-align: middle; }
.so-goods:hover .so-goods-name { color: #1e9fff; text-decoration: underline; }
.so-goods-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 3px;
    background: #f2f3f5; flex: none; display: inline-block; }
.so-goods-thumb.is-empty { line-height: 32px; text-align: center; color: #bbb;
    font-size: 12px; background: #f7f8fa; }
.so-goods-name { display: inline-block; max-width: 120px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; color: #333; }
.so-goods-more { display: inline-block; padding: 0 6px; height: 20px; line-height: 20px;
    border-radius: 10px; font-size: 12px; background: #eef2f7; color: #46536b; cursor: pointer; }
.so-goods-more:hover { background: #e3ebf5; color: #1e9fff; }
/* 单据详情弹窗里的商品单元格：宽度放开一点 */
.so-goods-inline .so-goods-name { max-width: 240px; }

/* ---------- 销售开单：结算区（商品金额 → 应收 → 已收 → 未收） ---------- */
.sa-settle { margin-top: 12px; padding: 10px 14px; background: #f7f9fc;
    border: 1px solid #eef1f5; border-radius: 4px; font-size: 13px; color: #5a6474; }
.sa-settle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 5px 0; line-height: 32px; }
.sa-settle-row + .sa-settle-row { border-top: 1px dashed #e6ebf2; }
.sa-k { color: #8a94a6; margin-left: 8px; }
.sa-settle-row .sa-k:first-child { margin-left: 0; }
.sa-settle-row b { color: #333; font-size: 15px; }
.sa-num { width: 100px !important; height: 32px; display: inline-block; }
.sa-settle-row select { width: 120px; height: 32px; }
.sa-pay { color: #ff5722 !important; }
/* 详情弹窗里的静态结算行：只需要左右对齐，不要输入框 */
.sa-settle-static .sa-k { margin-left: 18px; }
.sa-settle-static .sa-k:first-child { margin-left: 0; }

/* ---------- 客户：消费/欠款速览（客户详情、销售单里的客户弹窗共用） ---------- */
.cu-stat { display: flex; flex-wrap: wrap; gap: 22px; padding: 10px 14px; margin-bottom: 6px;
    background: #f7f9fc; border: 1px solid #eef1f5; border-radius: 4px;
    font-size: 13px; color: #5a6474; }
.cu-stat b { color: #333; font-size: 15px; }
.cu-owe { color: #ff5722; font-weight: 600; }
.cu-owe-zero { color: #a6aeb8; }

/* ---------- 库存盘点：差异染色 / 明细表格 / 选商品计数 ---------- */
/* 盘盈为绿色（库存变多），盘亏为红色（货少了，要醒目）；账实相符用灰色不抢视线。
   注意与「损耗类出库金额记负数」保持同一套负号标红约定（见 .so-neg）。 */
.so-pos { color: #2e8b57; font-weight: 600; }
.sc-zero { color: #a6aeb8; }

/* 列表「差异商品」列：缩略图 + 名称 + 该商品的差异数量 */
.sc-goods-diff { margin-left: 4px; font-size: 12px; }

/* 表单里的明细表格：单元格贴合输入框，避免行高被撑开 */
.sc-table td { padding: 4px 6px !important; vertical-align: middle; }
.sc-table .layui-input { height: 30px; min-width: 80px; }
.sc-table tbody tr:hover { background: #fafcff; }

/* 表单底部合计条 */
.sc-settle { margin-top: 12px; padding: 10px 14px; background: #f7f9fc;
    border: 1px solid #eef1f5; border-radius: 4px; font-size: 13px; color: #5a6474; }
.sc-settle span { margin-right: 22px; }
.sc-settle b { color: #333; font-size: 15px; }

/* 详情弹窗里的状态提示条 */
.sc-tip { margin: 8px 0 2px; padding: 8px 12px; background: #fff9ec; border: 1px solid #ffe7ba;
    border-radius: 4px; font-size: 12px; color: #b8860b; }

/* 选商品弹窗右上角的已加入计数 */
.sc-pick-count { margin-left: 12px; font-size: 12px; color: #5a6474; }
.sc-pick-count b { color: #ff5722; font-size: 14px; }

/* ---------- 商品详情弹窗的图集（盘点 / 调拨选商品时点名称打开） ---------- */
.so-pd-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.so-pd-media { width: 132px; height: 132px; object-fit: cover; border: 1px solid #eef1f5;
    border-radius: 4px; background: #f7f9fc; }

/* ---------- 仓库管理 ---------- */
.wh-name { font-weight: 600; color: #333; }
.wh-badge { display: inline-block; margin-left: 6px; padding: 0 6px; height: 18px; line-height: 18px;
    font-size: 11px; border-radius: 2px; background: #eef4fb; color: #4a7cb5; vertical-align: middle; }
.wh-badge.is-default { background: #fff4e6; color: #d48806; }
.wh-stat-num { color: #333; font-weight: 600; }

/* 编辑默认仓时的说明（默认仓不能停用、不能删除） */
.wh-default-tip { margin-top: 6px; font-size: 12px; color: #8a94a6; line-height: 18px; }
.wh-default-tip b { color: #d48806; }

/* 账实漂移提示条：有漂移报红、账实相符报绿 */
.wh-drift { margin: 8px 0 0; padding: 8px 12px; border-radius: 4px; font-size: 12px;
    background: #fff1f0; border: 1px solid #ffccc7; color: #c9302c; }
.wh-drift b { font-size: 13px; }
.wh-drift.is-ok { background: #f6ffed; border-color: #b7eb8f; color: #2e8b57; }
.wh-drift .layui-btn { margin-left: 8px; }

/* ---------- 库存调拨 ---------- */
.tr-wh { color: #333; }
.tr-arrow { margin: 0 6px; color: #1e9fff; font-weight: 600; }
.tr-qty { margin-left: 4px; color: #8a94a6; font-size: 12px; }

/* ---------- 批次与保质期 / 库存预警 ---------- */

/* 状态徽标：批次状态、保质期状态、预警档位共用一套底色
   （is-on 在库/正常 · is-used 用尽 · is-void 作废 · is-expired 过期/缺货
     · is-expiring 临期/低于预警 · is-normal 保质期正常 · is-none 无保质期/未设） */
.sb-badge { display: inline-block; padding: 0 7px; height: 20px; line-height: 20px;
    font-size: 12px; border-radius: 2px; background: #eef2f7; color: #46536b; white-space: nowrap; }
.sb-badge.is-on      { background: #e8f6ee; color: #2e8b57; }
.sb-badge.is-normal  { background: #eef4fb; color: #4a7cb5; }
.sb-badge.is-expiring,
.sb-badge.is-low     { background: #fff7e6; color: #d48806; }
.sb-badge.is-expired,
.sb-badge.is-out     { background: #fff1f0; color: #c9302c; }
.sb-badge.is-used    { background: #f2f4f7; color: #8a94a6; }
.sb-badge.is-void    { background: #f7f7f7; color: #a6aeb8; text-decoration: line-through; }
.sb-badge.is-none    { background: #f2f4f7; color: #8a94a6; }

/* 页签条（批次页 / 预警页共用） */
.sb-tabs { display: inline-block; vertical-align: middle; }
.sb-tab { display: inline-block; margin-right: 4px; padding: 0 12px; height: 28px; line-height: 28px;
    font-size: 13px; color: #5a6474; background: #f4f6f9; border-radius: 3px; cursor: pointer;
    user-select: none; }
.sb-tab:hover { color: #1e9fff; }
.sb-tab.is-on { background: #1e9fff; color: #fff; }

/* 批号突出显示（列表第一列） */
.sb-no { font-weight: 600; color: #333; letter-spacing: .3px; }

/* 登记表单里的商品选择块 */
.sb-pick { display: inline-block; min-width: 240px; padding: 6px 12px; margin-right: 8px;
    border: 1px dashed #d8e0ea; border-radius: 4px; background: #f9fbfd; vertical-align: middle; }
.sb-pick-name { font-size: 13px; font-weight: 600; color: #333; }
.sb-pick-sub { margin-left: 8px; font-size: 12px; color: #8a94a6; }

/* 预警页：已选取数量 / 库存为 0 */
.sa-picked { margin-right: 10px; font-size: 12px; color: #5a6474; }
.sa-picked b { color: #ff5722; font-size: 14px; }
.sa-out { color: #c9302c; font-weight: 600; }

/* 统计条里的「临期 / 低于预警」用橙色，与「过期 / 缺货」的红色区分开 */
.so-stat-item.is-warn,
.so-stat-item.is-warn b { color: #d48806; }

/* ---------- 经营看板 / 经营报表 ---------- */

.fish-panel-head { display: flex; align-items: center; justify-content: space-between;
    font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.fish-panel-extra { font-size: 12px; color: #99a2b1; font-weight: 400; }
.fish-panel-extra a { color: #1e9fff; text-decoration: none; margin: 0 4px; }
.fish-panel-extra a:hover { text-decoration: underline; }

/* SVG 趋势图容器 */
.ds-svg-wrap { width: 100%; overflow-x: auto; }
.ds-svg-wrap svg { width: 100%; min-width: 600px; height: 220px; display: block; }

/* 库存快照卡（看板用） */
.ds-snap-cell { padding: 8px 12px; border: 1px solid #eef0f3; border-radius: 4px; background: #fafbfc; margin-bottom: 12px; }
.ds-snap-label { font-size: 12px; color: #99a2b1; }
.ds-snap-val    { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 2px 0 4px; }
.ds-snap-sub    { font-size: 12px; color: #8a94a6; }

/* 「需要关注」列表 */
.ds-watch-section { margin-bottom: 14px; }
.ds-watch-section:last-child { margin-bottom: 0; }
.ds-watch-title { font-size: 13px; color: #5a6474; margin-bottom: 6px; font-weight: 600; }
.ds-watch-tag { display: inline-block; margin-left: 4px; padding: 0 6px; height: 16px; line-height: 16px;
    font-size: 11px; background: #f0f4f9; color: #5a6474; border-radius: 2px; font-weight: 400; }
.ds-watch-list { list-style: none; margin: 0; padding: 0; }
.ds-watch-list li { display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px dashed #f0f2f5; font-size: 13px; }
.ds-watch-list li:last-child { border-bottom: 0; }
.ds-watch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-watch-meta { font-size: 12px; color: #5a6474; white-space: nowrap; margin-left: 8px; }

/* 库存档位小徽标（复用 sb-badge 风格但更紧凑） */
.ds-stock-pill { display: inline-block; margin-right: 6px; padding: 0 6px; height: 18px; line-height: 18px;
    font-size: 11px; border-radius: 2px; background: #eef2f7; color: #46536b; }
.ds-stock-pill.is-out     { background: #fff1f0; color: #c9302c; }
.ds-stock-pill.is-low     { background: #fff7e6; color: #d48806; }
.ds-stock-pill.is-expired { background: #fff1f0; color: #c9302c; }

/* 报表页签条 */
.rp-tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid #eef0f3; padding-bottom: 0; }
.rp-tab { padding: 8px 16px; font-size: 13px; color: #5a6474; cursor: pointer;
    border-radius: 3px 3px 0 0; user-select: none; }
.rp-tab:hover { color: #1e9fff; }
.rp-tab.is-on { color: #1e9fff; background: #fff; border-bottom: 2px solid #1e9fff; margin-bottom: -1px; font-weight: 600; }

/* 报表页范围标签 */
.rp-range-label { display: inline-block; padding: 0 10px; height: 24px; line-height: 24px;
    font-size: 12px; background: #f4f6f9; color: #5a6474; border-radius: 3px; }

/* ---------- 商品表单：按类型的扩展属性区块 ---------- */
/* 默认隐藏，仅当选中某个有扩展属性的类型时由 JS 加 .on 显示，
   区块标题随类型变化（如「水草属性」「鱼缸属性」），不写死为活体 */
#extBox, #extFields { display: none; }
#extBox.on, #extFields.on { display: block; }
#extBox.on.layui-field-title { display: block; }

/* 扩展属性字段网格：每个字段一个单元格，自动换行，紧凑排布 */
.ext-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 2px; }
.ext-cell { min-width: 150px; }
.ext-cell > label { display: block; color: #666; font-size: 12px; margin-bottom: 4px; }
.ext-cell .layui-input, .ext-cell .layui-select, .ext-cell select { width: 160px; }
.ext-cell textarea.layui-textarea { width: 100%; min-height: 56px; }
.ext-cell.full { flex-basis: 100%; }