/* 访客管理系统 · 管理后台样式（零依赖，无构建） */
:root{
  --navy:#1f4678; --navy-2:#2b5a93; --bg:#f4f6fa; --card:#fff; --line:#e3e8f0;
  --txt:#1f2937; --muted:#6b7280; --ok:#0f9d58; --warn:#e8a33d; --err:#d93025;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--navy-2);text-decoration:none}
.boot{padding:60px;text-align:center;color:var(--muted)}

/* 布局 */
.layout{display:flex;min-height:100vh}
.side{width:210px;background:var(--navy);color:#cdd8e8;flex:0 0 210px;padding:14px 0}
.side .brand{padding:6px 18px 16px;color:#fff;font-weight:700;font-size:15px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:8px}
.side .brand small{display:block;font-weight:400;font-size:11px;color:#8fa6c7;margin-top:3px}
.side a{display:block;padding:9px 18px;color:#cdd8e8;font-size:13.5px;border-left:3px solid transparent}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:#7fb2ff;font-weight:600}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:52px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:5}
.top h2{margin:0;font-size:16px}
.top .who{color:var(--muted);font-size:13px;white-space:nowrap}
.content{padding:18px;max-width:1400px;width:100%}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card .n{font-size:26px;font-weight:700;color:var(--navy);line-height:1.2}
.card .t{color:var(--muted);font-size:12.5px;margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 12px;font-size:14.5px;color:var(--navy)}
.note{background:#fff8e6;border:1px solid #f0dca8;color:#7a5a10;padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f8fafc;color:var(--muted);font-weight:600;white-space:nowrap}
tr:hover td{background:#fafcff}
.tw{overflow-x:auto}

/* 表单与按钮 */
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid #cfd8e3;border-radius:8px;background:#fff;width:100%}
textarea{min-height:60px}
.btn{display:inline-block;padding:7px 14px;border-radius:8px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--navy-2)}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.danger{border-color:var(--err);background:var(--err)}
.btn.mini{padding:3px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.row>div{flex:0 0 auto;min-width:130px}
.row>div.grow{flex:1 1 200px}
.row label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}

/* 徽标 */
.bg{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;line-height:1.7}
.bg.ok{background:#e6f4ea;color:var(--ok)}
.bg.warn{background:#fef3e2;color:#a1660a}
.bg.err{background:#fdecea;color:var(--err)}
.bg.mute{background:#eef1f5;color:var(--muted)}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1f4678,#2b5a93)}
.login{width:340px;background:#fff;border-radius:14px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.login h1{margin:0 0 4px;font-size:19px;color:var(--navy)}
.login p.sub{margin:0 0 18px;color:var(--muted);font-size:12.5px}
.login label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.login .btn{width:100%;margin-top:16px;padding:10px}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:86vh;overflow:auto;padding:20px}
.modal h3{margin:0 0 12px;font-size:16px;color:var(--navy)}
.qr{display:block;width:240px;height:240px;margin:8px auto;border:1px solid var(--line);border-radius:8px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:13px}
.kv b{color:var(--muted);font-weight:400}

/* 凭据 / 单号弹层（替代 alert：内容可选中、可一键复制） */
.cred{display:flex;flex-direction:column;gap:10px}
.cred label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.cred-line{display:flex;gap:8px;align-items:center}
.cred-line input,.cred-line textarea{font-family:Consolas,Menlo,monospace;font-size:14.5px;letter-spacing:.4px;
  background:#f7f9fc;color:#12263f;font-weight:600}
.cred-line .btn{flex:0 0 auto}
.cred-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}

/* 访客照片（缩略图 / 拍照弹层预览） */
.photo-thumb{object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;vertical-align:middle}
.photo-preview{margin-top:10px;padding:10px;border:1px dashed #cfd8e3;border-radius:8px;text-align:center;color:var(--muted);font-size:12.5px}
.photo-preview img{max-height:300px}
.pwd{font:700 22px/1 ui-monospace,Consolas,monospace;letter-spacing:3px;color:var(--navy);text-align:center;margin:6px 0 12px}
.tip{color:var(--muted);font-size:12px}
.empty{padding:26px;text-align:center;color:var(--muted)}
@media (max-width:820px){
  .layout{flex-direction:column}
  .side{width:auto;flex:none;display:flex;overflow-x:auto;padding:0}
  .side .brand{display:none}
  .side a{flex:0 0 auto;border-left:none;border-bottom:3px solid transparent;padding:10px 14px}
  .side a.on{border-left:none;border-bottom-color:#7fb2ff}
  .content{padding:12px}
}

/* ==========================================================================
   手机适配（甲方 2026-09-23：手机上也要能登录后台并操作）
   - ≤ 820px：左侧菜单变成「抽屉」，顶部出汉堡按钮，点菜单项自动收起
   - 表单行纵向堆叠、输入框 16px（防 iOS 自动放大）、按钮加大触摸区
   - 表格横向滚动（.tw 已有），弹层接近全屏
   ========================================================================== */
.top{gap:10px}
.top-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.top-left h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menuBtn{display:none;border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:8px;width:38px;height:34px;font-size:17px;line-height:1;padding:0}
.nav-mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40}

/* 顶栏「前台首页」入口（相对路径 /，自动跟随当前域名/端口；新标签打开不影响后台登录态） */
#goH5{display:inline-block;padding:4px 9px;border:1px solid var(--line);border-radius:8px;color:var(--navy);
  background:#fff;font-size:12.5px;white-space:nowrap}
#goH5:hover{background:#f2f6fc;border-color:var(--navy-2)}
#goH5 .ico{margin-right:4px}
/* 侧栏底部入口 */
.side-foot{padding:10px 12px 4px;margin-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.side-foot a{font-size:12.5px;color:#8fa6c7;padding:4px 0;border:0;text-align:left}
.side-foot a:hover{color:#fff;background:transparent}
/* 登录页底部链接 */
.login .tip.center a{color:var(--navy-2);font-size:12.5px}

@media (max-width: 820px){
  /* 禁止整页横向滚动：表格在 .tw 里自己横滚，页面本身不横滚 */
  html,body{overflow-x:hidden}

  /* 菜单改成「九宫格」两列平铺，不再一长条竖排 */
  .side{width:88%;max-width:360px}
  .side .nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px 12px 18px}
  .side .nav a{border:1px solid rgba(255,255,255,.18);border-radius:10px;text-align:center;
    padding:12px 6px;font-size:14px;border-left:1px solid rgba(255,255,255,.18)}
  .side .nav a.on{background:rgba(255,255,255,.16);border-color:#7fb2ff;font-weight:700}
  .side-foot a{border:0;text-align:left;padding:6px 0;font-size:13px}
  /* 手机端：顶栏角色文案太挤就藏掉，只留姓名与两个操作 */
  .top .who .role{display:none}
  .top .who{font-size:12.5px}
  .top .who a{margin-left:6px}
  /* 抽屉式侧栏 */
  .layout{position:relative}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:50;width:76%;max-width:300px;
    transform:translateX(-102%);visibility:hidden;opacity:0;
    transition:transform .22s ease,opacity .15s ease,visibility .22s;
    box-shadow:6px 0 24px rgba(15,23,42,.25);overflow-y:auto;padding-top:10px}
  .layout.nav-open .side{transform:translateX(0);visibility:visible;opacity:1}
  .layout.nav-open .nav-mask{display:block}
  .side a{padding:12px 18px;font-size:15px}
  #menuBtn{display:inline-block}

  /* 顶部栏与内容 */
  .top{padding:0 12px;height:50px}
  .top h2{font-size:15px}
  .top .who{font-size:12px}
  .top .who a{margin-left:4px}
  .content{padding:12px}
  .panel{padding:12px;border-radius:9px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
  .card .n{font-size:22px}

  /* 筛选行纵向堆叠，按钮撑满更好点 */
  .row{flex-direction:column;align-items:stretch;gap:10px}
  .row>div,.row>div.grow{flex:1 1 auto;min-width:0}
  .row .btn{width:100%}
  .btn{padding:10px 14px;font-size:14.5px}
  .btn.mini{padding:6px 10px;font-size:13px}

  /* 表格：只做横向滚动，不挤成一列；操作列按钮允许换行 */
  .tw{-webkit-overflow-scrolling:touch}
  .tw table{min-width:0}
  .tw td .btn,.tw td .btn.mini{margin:2px 2px 2px 0}

  /* 手机端浏览器对 <16px 的输入框会自动放大，这里统一 16px */
  input,select,textarea{font-size:16px}

  /* 弹层：接近全屏、底部对齐，方便单手操作 */
  .mask{align-items:flex-end;padding:0}
  .modal{max-width:none;width:100%;max-height:92vh;border-radius:14px 14px 0 0;padding:16px}
  .kv{grid-template-columns:88px 1fr;font-size:13px}
  .login{width:92vw;padding:22px}
  .login-wrap{padding:14px}
  .photo-preview img{max-height:200px}

  /* 列表：一页一条（字段名 + 值都显示全），翻页看上一条/下一条 —— 不用左右拉动 */
  .mob-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
  .mob-pager button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:8px;
    padding:8px 12px;font-size:13.5px}
  .mob-pager button:disabled{opacity:.4}
  .mob-pager .idx{color:var(--muted);font-size:12.5px}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:auto}
  .tw tr{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;margin-bottom:10px}
  .tw td{border:none;padding:6px 0;display:flex;gap:10px;align-items:flex-start;text-align:left}
  .tw td::before{content:attr(data-label);flex:0 0 76px;color:var(--muted);font-size:12.5px;line-height:1.9}
  .tw td:not([data-label])::before{display:none}
  .tw td[colspan]::before{display:none}
  .tw td .photo-thumb{margin-left:0}
}
@media (max-width: 420px){
  .top .who a[href="#/change-password"]{display:none}
  .side .nav a{font-size:14px;padding:11px 6px}
  /* 超窄屏：顶栏「前台首页」只留 🏠 图标，别把标题挤没 */
  #goH5 .txt{display:none}
  #goH5{padding:4px 7px;margin-left:0}
  #goH5 .ico{margin-right:0}
  .top h2{font-size:14px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card{padding:12px}
}

/* 登录页图形验证码（2026-09-23：所有登录页都要验证码，含员工通道） */
.captcha-line{display:flex;gap:10px;align-items:center}
.captcha-line input{flex:1;min-width:0}
.captcha-line img{width:120px;height:40px;border:1px solid #cfd8e3;border-radius:8px;cursor:pointer;background:#fff;flex:0 0 auto}
@media (max-width:420px){.captcha-line img{width:104px;height:38px}}