/* ==========================================================================
   管理后台样式表  admin.css
   --------------------------------------------------------------------------
   说明（给以后要改样式的同学）：
     1. 这个文件是纯手写的，不依赖 Bootstrap、不引任何网上的字体和图标，
        服务器断网也能正常显示。改样式只改这一个文件就够了。
     2. 颜色、圆角这些都写在最上面的 :root 变量里，想统一换主题色只改一行。
     3. 一套样式同时管电脑和手机：
          屏幕宽度 >= 900px  →  左边固定菜单栏 + 右边内容
          屏幕宽度 <  900px  →  菜单收进左上角的「汉堡按钮」，表格自动变成一张张卡片
     4. 表格变卡片的原理：给每个 <td> 加 data-label="列名"，
        手机上用 CSS 的 ::before 把列名显示在值的前面。所以写表格时别忘了加 data-label。
   ========================================================================== */

/* ---------- 1. 全局变量（想换配色改这里） ---------- */
:root {
    --pri:        #0f766e;   /* 主色：深蓝绿 */
    --pri-dark:   #0b5d56;   /* 主色按下去时的深色 */
    --pri-soft:   #e6f4f2;   /* 主色的浅底，用于选中、提示块 */
    --bg:         #f4f6f8;   /* 页面底色 */
    --card:       #ffffff;   /* 卡片底色 */
    --bd:         #e5e7eb;   /* 分割线、边框 */
    --tx:         #1f2937;   /* 正文文字 */
    --tx-mut:     #6b7280;   /* 次要文字（说明、表头） */
    --ok:         #16a34a;   /* 成功绿 */
    --ok-soft:    #e8f7ee;
    --warn:       #ea580c;   /* 警告橙 */
    --warn-soft:  #fdf0e6;
    --err:        #dc2626;   /* 错误红 */
    --err-soft:   #fdecec;
    --purple:     #7c3aed;   /* 退款紫 */
    --purple-soft:#f1ebfe;
    --gray:       #6b7280;   /* 中性灰 */
    --gray-soft:  #f1f2f4;
    --radius:     8px;
    --shadow:     0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --sidebar-w:  208px;
    --topbar-h:   56px;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

img { max-width: 100%; vertical-align: middle; }
a   { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 10px; }

/* 长链接、长 JSON 一律折行，防止手机上把页面撑宽 */
.break { word-break: break-all; overflow-wrap: anywhere; }

/* ---------- 3. 顶栏 ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid var(--bd);
    z-index: 40;
}
.topbar .brand {
    font-size: 16px; font-weight: 600; color: var(--tx);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .brand:hover { text-decoration: none; }
.topbar .spacer { flex: 1 1 auto; }
.topbar .top-user { color: var(--tx-mut); font-size: 13px; white-space: nowrap; }
.topbar .top-link {
    font-size: 13px; color: var(--tx-mut);
    padding: 5px 10px; border: 1px solid var(--bd); border-radius: 6px;
    white-space: nowrap;
}
.topbar .top-link:hover { color: var(--pri); border-color: var(--pri); text-decoration: none; }

/* 顶栏里的「模拟支付」提醒小标 */
.chip-mock {
    font-size: 12px; color: #fff; background: var(--err);
    padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.chip-mock:hover { color: #fff; text-decoration: none; opacity: .88; }

/* 汉堡按钮：只在窄屏显示 */
.hamb {
    display: none;
    width: 34px; height: 30px; padding: 6px 5px;
    background: none; border: 1px solid var(--bd); border-radius: 6px;
    cursor: pointer; flex-direction: column; justify-content: space-between;
}
.hamb span { display: block; height: 2px; background: var(--tx); border-radius: 2px; }

/* ---------- 4. 侧栏 ---------- */
.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--bd);
    overflow-y: auto;
    padding: 12px 0 24px;
    z-index: 35;
}
.sidebar .nav-title {
    padding: 14px 18px 6px; font-size: 12px; color: #9ca3af; letter-spacing: .5px;
}
.sidebar a.nav-a {
    display: block; padding: 10px 18px;
    color: var(--tx); font-size: 14px;
    border-left: 3px solid transparent;
}
.sidebar a.nav-a:hover { background: #f8f9fa; text-decoration: none; }
.sidebar a.nav-a.on {
    background: var(--pri-soft); color: var(--pri);
    border-left-color: var(--pri); font-weight: 600;
}

/* 窄屏时点开菜单，背后盖一层半透明遮罩 */
.backdrop {
    display: none;
    /* 不用 inset 简写，老一点的 Safari 不认，会导致遮罩没有大小 */
    position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0;
    background: rgba(17,24,39,.35);
    z-index: 30;
}

/* ---------- 5. 主内容区 ---------- */
.main {
    margin-left: var(--sidebar-w);
    padding: calc(var(--topbar-h) + 18px) 20px 48px;
    min-height: 100vh;
    overflow-x: hidden;      /* 双保险：任何情况下都不让页面横向滚动 */
}
.page-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
}
.page-title { font-size: 20px; }
.page-head .spacer { flex: 1 1 auto; }
.page-sub { color: var(--tx-mut); font-size: 13px; margin-top: 4px; }

/* ---------- 6. 卡片 ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.card-hd {
    padding: 13px 16px;
    border-bottom: 1px solid var(--bd);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-hd .card-title { font-size: 15px; font-weight: 600; }
.card-hd .spacer { flex: 1 1 auto; }
.card-bd { padding: 16px; }
.card-bd.tight { padding: 0; }

/* ---------- 7. 数字卡片（首页概览用） ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.stat {
    background: #fff; border: 1px solid var(--bd); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px;
}
.stat .stat-num { font-size: 26px; font-weight: 700; line-height: 1.2; word-break: break-all; }
.stat .stat-label { color: var(--tx-mut); font-size: 13px; margin-top: 6px; }
.stat.is-warn .stat-num { color: var(--warn); }
.stat.is-err  .stat-num { color: var(--err); }
.stat.is-ok   .stat-num { color: var(--pri); }

/* ---------- 8. 表格 ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.tb { width: 100%; border-collapse: collapse; }
.tb th, .tb td {
    padding: 10px 12px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--bd);
}
.tb th {
    background: #fafbfc; color: var(--tx-mut);
    font-weight: 600; font-size: 13px; white-space: nowrap;
}
.tb tbody tr:last-child td { border-bottom: 0; }
.tb tbody tr:hover { background: #fafbfc; }
.tb .nowrap { white-space: nowrap; }
.tb .num { font-variant-numeric: tabular-nums; }

/* 缺货的整行浅橙底，一眼就能看到 */
.tb tr.row-warn { background: #fff7ed; }
.tb tr.row-warn:hover { background: #ffedd5; }

/* 空数据提示 */
.empty { padding: 34px 16px; text-align: center; color: var(--tx-mut); }
.empty .empty-big { font-size: 15px; color: var(--tx); margin-bottom: 4px; }

/* 商品缩略图 */
.thumb {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 6px; object-fit: cover;
    border: 1px solid var(--bd); background: #f6f7f9;
}
.thumb-none {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 6px; border: 1px dashed var(--bd); background: #fafbfc;
    color: #b6bbc4; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.media { display: flex; align-items: center; gap: 8px; min-width: 0; }
.media .media-tx { min-width: 0; }
.media .media-tx b { display: block; font-weight: 600; }
.media .media-tx small { color: var(--tx-mut); }

/* ---------- 9. 状态小标签 ---------- */
.badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 12px; line-height: 1.7; white-space: nowrap;
}
.badge-ok     { background: var(--ok-soft);     color: var(--ok); }
.badge-err    { background: var(--err-soft);    color: var(--err); }
.badge-gray   { background: var(--gray-soft);   color: var(--gray); }
.badge-warn   { background: var(--warn-soft);   color: var(--warn); }
.badge-purple { background: var(--purple-soft); color: var(--purple); }
.badge-pri    { background: var(--pri-soft);    color: var(--pri); }

/* ---------- 10. 按钮 ---------- */
.btn {
    display: inline-block; padding: 8px 16px;
    font-size: 14px; line-height: 1.4; font-family: inherit;
    color: var(--tx); background: #fff;
    border: 1px solid var(--bd); border-radius: 6px;
    cursor: pointer; white-space: nowrap; text-align: center;
}
.btn:hover { border-color: #cbd0d8; background: #fafbfc; text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }
.btn-pri    { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-pri:hover { background: var(--pri-dark); border-color: var(--pri-dark); color: #fff; }
.btn-danger { color: var(--err); border-color: #f3c2c2; background: #fff; }
.btn-danger:hover { background: var(--err-soft); border-color: var(--err); }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 5px; }
.btn-block { display: block; width: 100%; }

/* 一行操作按钮，自动换行不会撑破卡片 */
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions form { display: inline; margin: 0; }

/* ---------- 11. 表单 ---------- */
.fld { margin-bottom: 16px; }
.fld > label {
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 600; color: var(--tx);
}
.fld .req { color: var(--err); margin-left: 2px; }
/* .hint 是通用的灰色说明文字，不一定非要放在 .fld 里面 */
.hint { margin-top: 6px; color: var(--tx-mut); font-size: 12.5px; line-height: 1.8; }
.hint code, .note code, .login-tip code {
    background: var(--gray-soft); border-radius: 3px; padding: 1px 5px;
    font-family: Consolas, Menlo, "Courier New", monospace; font-size: 12px; color: #b45309;
    word-break: break-all;
}

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=email], select, textarea {
    display: block; width: 100%; max-width: 100%;
    padding: 9px 11px;
    font: inherit; font-size: 14px; color: var(--tx);
    background: #fff;
    border: 1px solid var(--bd); border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--pri);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
input[readonly], input:disabled, textarea[readonly] { background: #f7f8f9; color: var(--tx-mut); }
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
textarea.mono {
    font-family: Consolas, Menlo, "Courier New", monospace;
    font-size: 13px;
}

/* 两列表单：窄屏自动变一列 */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* 筛选条 */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.filter-bar .fb-item { flex: 1 1 160px; min-width: 0; }
.filter-bar .fb-item label {
    display: block; font-size: 12.5px; color: var(--tx-mut); margin-bottom: 4px;
}
.filter-bar .fb-btns { flex: 0 0 auto; display: flex; gap: 8px; }

/* ---------- 12. 提示条 / 横幅 ---------- */
.flash {
    padding: 11px 14px; border-radius: var(--radius);
    margin-bottom: 14px; font-size: 14px;
    transition: opacity .5s;
}
.flash-ok  { background: var(--ok-soft);  color: #14683a; border: 1px solid #b9e6c9; }
.flash-err { background: var(--err-soft); color: #a02020; border: 1px solid #f3c2c2; }
.flash.fade-out { opacity: 0; }

.banner-danger {
    background: var(--err); color: #fff;
    padding: 13px 16px; border-radius: var(--radius);
    margin-bottom: 16px; font-size: 14px; line-height: 1.7;
}
.banner-danger b { font-size: 15px; }

.note {
    background: var(--pri-soft); border: 1px solid #bfe3de;
    color: #0b5d56; padding: 12px 14px; border-radius: var(--radius);
    font-size: 13.5px; line-height: 1.8;
}
.note-warn { background: var(--warn-soft); border-color: #f6cfae; color: #9a3412; }
.note ol, .note ul { margin: 6px 0 0; padding-left: 20px; }
.note li { margin-bottom: 4px; }

/* ---------- 13. 键值信息（订单详情用） ---------- */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.kv .kv-row {
    display: flex; gap: 10px; padding: 9px 0;
    border-bottom: 1px dashed #eef0f2; font-size: 14px;
}
.kv .kv-k { flex: 0 0 92px; color: var(--tx-mut); }
.kv .kv-v { flex: 1 1 auto; min-width: 0; word-break: break-all; }

/* ---------- 14. 开锁记录时间线 ---------- */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: var(--bd);
}
.tl-item { position: relative; padding: 0 0 16px 4px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .tl-dot {
    position: absolute; left: -19px; top: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gray); border: 2px solid #fff;
}
.tl-item.is-ok  .tl-dot { background: var(--ok); }
.tl-item.is-err .tl-dot { background: var(--err); }
.tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-time { color: var(--tx-mut); font-size: 13px; }
.tl-body {
    margin-top: 6px; background: #fafbfc; border: 1px solid var(--bd);
    border-radius: 6px; padding: 8px 10px;
    font-family: Consolas, Menlo, "Courier New", monospace;
    font-size: 12.5px; color: #4b5563;
    white-space: pre-wrap; word-break: break-all;
}

/* ---------- 15. 分页（Paginator::links 生成的结构） ---------- */
.pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 14px 16px; border-top: 1px solid var(--bd);
}
.pager .pg {
    display: inline-block; min-width: 32px; padding: 5px 10px;
    text-align: center; font-size: 13px; color: var(--tx);
    border: 1px solid var(--bd); border-radius: 5px; background: #fff;
}
.pager a.pg:hover { border-color: var(--pri); color: var(--pri); text-decoration: none; }
.pager .pg.cur { background: var(--pri); border-color: var(--pri); color: #fff; }
.pager .pg.disabled, .pager .pg.dots { color: #b6bbc4; background: #fafbfc; }
.pager .pager-info { color: var(--tx-mut); font-size: 13px; margin-left: auto; }

/* ---------- 16. 图片上传区 ---------- */
.up-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.up-item { position: relative; width: 92px; }
.up-item img {
    width: 92px; height: 92px; object-fit: cover;
    border: 1px solid var(--bd); border-radius: 6px; background: #fafbfc;
}
.up-item .up-del {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; line-height: 20px; text-align: center;
    background: var(--err); color: #fff; border: 0; border-radius: 50%;
    font-size: 15px; cursor: pointer; padding: 0;
}
.up-add {
    width: 92px; height: 92px;
    border: 1px dashed #c8ccd4; border-radius: 6px; background: #fafbfc;
    color: var(--tx-mut); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.up-add:hover { border-color: var(--pri); color: var(--pri); }
.up-add input[type=file] { display: none; }

/* ---------- 17. 二维码链接页 ---------- */
.link-big {
    background: #fafbfc; border: 1px solid var(--bd); border-radius: var(--radius);
    padding: 16px; font-size: 17px; line-height: 1.6;
    font-family: Consolas, Menlo, "Courier New", monospace;
    word-break: break-all; color: #0b5d56;
}

/* ---------- 18. 登录页（不套后台框架，单独一套） ---------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: var(--bg);
}
.login-card {
    width: 100%; max-width: 380px;
    background: #fff; border: 1px solid var(--bd); border-radius: 12px;
    box-shadow: 0 6px 28px rgba(16,24,40,.08);
    padding: 30px 26px 26px;
}
.login-card .login-logo {
    text-align: center; font-size: 20px; font-weight: 700; color: var(--pri);
    margin-bottom: 4px;
}
.login-card .login-sub {
    text-align: center; color: var(--tx-mut); font-size: 13px; margin-bottom: 22px;
}
.login-tip { margin-top: 18px; text-align: center; color: #9ca3af; font-size: 12.5px; }

/* ---------- 19. 加载遮罩（点了按钮等接口返回时显示） ---------- */
.hg-busy {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
    background: rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: center;
}
.hg-busy span {
    background: rgba(31,41,55,.86); color: #fff;
    padding: 10px 20px; border-radius: 20px; font-size: 14px;
}

/* ---------- 20. 零碎工具类 ---------- */
.mt0 { margin-top: 0; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; }
.mb8 { margin-bottom: 8px; }
.muted { color: var(--tx-mut); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.money { color: var(--err); font-weight: 600; font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.hide { display: none !important; }

/* ==========================================================================
   窄屏（手机 / 小平板）适配 —— 900px 是分界线
   ========================================================================== */
@media (max-width: 899px) {

    .hamb { display: flex; }

    .sidebar {
        width: 78%; max-width: 260px;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 2px 0 12px rgba(16,24,40,.12);
    }
    body.nav-open .sidebar  { transform: translateX(0); }
    body.nav-open .backdrop { display: block; }
    body.nav-open { overflow: hidden; }

    .main { margin-left: 0; padding: calc(var(--topbar-h) + 14px) 12px 40px; }

    .topbar .top-user { display: none; }   /* 顶栏太挤，名字挪到侧栏里显示 */

    .page-title { font-size: 18px; }

    /* 数字卡片两列 */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 13px; }
    .stat .stat-num { font-size: 22px; }

    /* 表单、键值信息统统变一列 */
    .form-grid { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; }

    /* -------- 表格变卡片 -------- */
    .table-wrap { overflow-x: visible; }
    .tb-card, .tb-card tbody, .tb-card tr, .tb-card td { display: block; width: 100%; }
    .tb-card thead { display: none; }
    .tb-card tr {
        background: #fff;
        border: 1px solid var(--bd); border-radius: var(--radius);
        margin: 0 0 10px; padding: 4px 12px;
    }
    .tb-card tr:hover { background: #fff; }
    .tb-card tr.row-warn { background: #fff7ed; border-color: #f6cfae; }
    .tb-card td {
        display: flex; gap: 10px; align-items: flex-start;
        padding: 8px 0; border: 0; border-bottom: 1px dashed #f0f1f3;
        word-break: break-word;
    }
    .tb-card td:last-child { border-bottom: 0; }
    .tb-card td::before {
        content: attr(data-label);
        flex: 0 0 76px; color: var(--tx-mut); font-size: 13px;
    }
    .tb-card td[data-label=""]::before { display: none; }
    .tb-card td.nowrap { white-space: normal; }

    .pager { justify-content: center; }
    .pager .pager-info { margin-left: 0; width: 100%; text-align: center; }

    .card-bd { padding: 13px; }

    /* 筛选条在手机上一行一个，按钮占满宽度 */
    .filter-bar .fb-item { flex: 1 1 100%; }
    .filter-bar .fb-btns { flex: 1 1 100%; }
    .filter-bar .fb-btns .btn { flex: 1 1 0; }
}

/* 超窄屏（375px 及以下）再收一点，保证不出现横向滚动条 */
@media (max-width: 400px) {
    .main { padding-left: 10px; padding-right: 10px; }
    .stat-grid { grid-template-columns: 1fr; }
    .tb-card td::before { flex: 0 0 68px; font-size: 12.5px; }
    .link-big { font-size: 15px; padding: 12px; }
}