/* =========================================================
   餐饮进销存管理系统 · 统一设计系统
   设计原则：干净、专业、统一；默认兼容电脑 + 手机
   ========================================================= */

/* ---------- 设计 Token ---------- */
:root{
  /* 颜色 */
  --bg:        #f4f6fb;        /* 页面背景 */
  --surface:   #ffffff;        /* 卡片/面板 */
  --surface-2: #f8fafc;        /* 次级表面（表头/输入框底） */
  --line:      #e8edf3;        /* 分隔线 */
  --line-2:    #dbe3ec;        /* 略重分隔线 */

  --text:      #1f2733;        /* 主文字 */
  --text-2:    #5a6573;        /* 次文字 */
  --muted:     #8a94a3;        /* 弱文字/占位 */

  --primary:   #2f6bff;        /* 主色（蓝） */
  --primary-d: #1f53e0;        /* 主色按下 */
  --primary-l: #eaf1ff;        /* 主色浅底 */
  --primary-t: #2f6bff1a;      /* 主色透明 */

  --ok:    #16a34a; --ok-l:#e7f6ec; --ok-d:#11803a;
  --warn:  #e8590c; --warn-l:#fff1e8; --warn-d:#c4470a;
  --danger:#e11d48; --danger-l:#fdeaef; --danger-d:#b30f33;
  --info:  #0ea5e9; --info-l:#e6f6fe;

  /* 侧边栏 */
  --nav-bg:   #0f1c33;
  --nav-bg-2: #16294d;
  --nav-text: #aebdd6;
  --nav-text-2:#6f82a3;

  /* 排版 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px;

  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* 圆角 / 阴影 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(16,28,51,.05), 0 1px 3px rgba(16,28,51,.06);
  --sh-2: 0 4px 14px rgba(16,28,51,.08);
  --sh-3: 0 10px 30px rgba(16,28,51,.12);

  --nav-w: 232px;            /* 侧边栏宽度（桌面） */
  --topbar-h: 56px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:var(--fs); line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:var(--primary);text-decoration:none}
input,select,textarea{font-family:inherit;font-size:var(--fs);color:var(--text);
  width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);transition:border-color .15s, box-shadow .15s, background .15s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-t);background:#fff}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' stroke='%238a94a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* =========================================================
   登录页
   ========================================================= */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 15% -10%, #1d3a78 0%, transparent 55%),
             radial-gradient(1000px 500px at 110% 110%, #2f6bff 0%, transparent 50%),
             linear-gradient(135deg, #0f1c33 0%, #16306a 100%)}
.login-wrap::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;opacity:.6;pointer-events:none}
.login-card{position:relative;z-index:1;width:380px;max-width:100%;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:36px 32px 28px}
.login-logo{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 14px;
  background:linear-gradient(135deg,#2f6bff,#1f53e0);box-shadow:0 8px 20px rgba(47,107,255,.35)}
.login-card h1{font-size:var(--fs-xl);text-align:center;letter-spacing:.5px}
.login-card .sub{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin:6px 0 24px}
.login-card .field{margin-bottom:14px;position:relative}
.login-card label{display:block;font-size:var(--fs-xs);color:var(--text-2);margin-bottom:6px;font-weight:600}
.login-card .lg-btn{width:100%;background:var(--primary);color:#fff;padding:12px;border-radius:var(--r);
  font-size:var(--fs-md);font-weight:700;margin-top:6px;transition:background .15s, transform .05s}
.login-card .lg-btn:hover{background:var(--primary-d)}
.login-card .lg-btn:active{transform:translateY(1px)}
.login-card .rg-link{width:100%;margin-top:12px;padding:10px;border:1px solid var(--line-2);
  border-radius:var(--r);color:var(--text-2);font-weight:600;font-size:var(--fs-sm)}
.login-card .rg-link:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-l)}
.lg-msg{color:var(--danger);font-size:var(--fs-sm);min-height:18px;margin-top:10px;text-align:center;font-weight:600}
.lg-demo{margin-top:16px;font-size:var(--fs-xs);color:var(--muted);text-align:center;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:10px;line-height:1.7}
.lg-demo b{color:var(--text-2)}

/* 注册弹层 */
.modal-mask{position:fixed;inset:0;background:rgba(15,28,51,.5);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-mask.show{display:flex}
.modal{width:420px;max-width:100%;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:24px;max-height:92vh;overflow:auto}
.modal h3{font-size:var(--fs-lg);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.modal .row{display:flex;flex-wrap:wrap;gap:12px}
.modal .row>div{flex:1;min-width:140px}
.modal label{display:block;font-size:var(--fs-xs);color:var(--text-2);margin:10px 0 6px;font-weight:600}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.modal-actions .btn{flex:1}
.rg-msg{color:var(--danger);font-size:var(--fs-sm);min-height:18px;margin-top:8px}

/* =========================================================
   应用外壳：侧边栏 + 内容区
   ========================================================= */
#app{display:flex;min-height:100vh}

/* 侧边栏（桌面） */
#nav{width:var(--nav-w);flex-shrink:0;background:linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg-2) 100%);
  color:var(--nav-text);display:flex;flex-direction:column;padding:14px 12px;position:sticky;top:0;height:100vh}
#nav .brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px;color:#fff}
#nav .brand .logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:linear-gradient(135deg,#2f6bff,#1f53e0);box-shadow:0 4px 12px rgba(47,107,255,.4)}
#nav .brand .name{font-weight:800;font-size:15px;letter-spacing:.5px}
#nav .brand .name small{display:block;font-weight:500;font-size:10px;color:var(--nav-text-2);letter-spacing:1px}
.nav-scroll{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:var(--nav-text);
  padding:11px 12px;border-radius:10px;font-size:var(--fs);margin-bottom:3px;transition:background .15s,color .15s}
.nav-btn .ico{width:20px;text-align:center;font-size:16px;flex-shrink:0}
.nav-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(47,107,255,.4)}
.nav-foot{margin-top:10px;padding:10px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
#nav-user{font-size:var(--fs-xs);color:var(--nav-text-2);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-foot .btn-logout{display:inline-flex;align-items:center;gap:5px;color:var(--nav-text);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 10px;font-size:var(--fs-xs);white-space:nowrap}
.nav-foot .btn-logout:hover{background:rgba(255,255,255,.08);color:#fff}

/* 内容区 */
#view{flex:1;min-width:0;padding:24px 28px 32px;overflow-x:hidden}
.mtop{display:none}   /* 移动端顶栏，桌面隐藏 */

/* 页头 */
.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.section-head .title-wrap{display:flex;align-items:center;gap:10px}
.section-head h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:.3px}
.section-head .sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}

/* =========================================================
   按钮
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--primary);
  color:#fff;padding:9px 16px;border-radius:var(--r-sm);font-weight:700;font-size:var(--fs);
  transition:background .15s, transform .05s, box-shadow .15s;white-space:nowrap}
.btn:hover{background:var(--primary-d)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary);box-shadow:none}
.btn.ghost:hover{background:var(--primary-l)}
.btn.sm{padding:6px 12px;font-size:var(--fs-sm);border-radius:7px}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:var(--danger-d)}
.btn.danger.ghost{background:#fff;color:var(--danger);border-color:var(--danger)}
.btn.danger.ghost:hover{background:var(--danger-l)}
.btn.ok{background:var(--ok)}
.btn.ok:hover{background:var(--ok-d)}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* =========================================================
   卡片 / 统计
   ========================================================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.stat.warn::before{background:var(--warn)}
.stat.ok::before{background:var(--ok)}
.stat .label{color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.stat .value{font-size:26px;font-weight:800;margin-top:8px;letter-spacing:.5px}
.stat .value small{font-size:14px;font-weight:600;color:var(--muted)}
.stat.warn .value{color:var(--warn)}
.stat.ok .value{color:var(--ok)}

/* =========================================================
   表格（桌面）；手机端自动转卡片（见媒体查询）
   ========================================================= */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden}
.table-wrap .tw-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.table-wrap .tw-head .t{font-weight:700;font-size:var(--fs-md)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
thead th{background:var(--surface-2);color:var(--text-2);font-weight:700;text-align:left;
  padding:11px 14px;white-space:nowrap;position:sticky;top:0;border-bottom:1px solid var(--line)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fafcff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.text-ok{color:var(--ok);font-weight:600}
.text-warn{color:var(--warn);font-weight:700}
.text-danger{color:var(--danger);font-weight:700}
.text-muted{color:var(--muted)}

/* 状态标签 */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;background:var(--primary-l);color:var(--primary-d);white-space:nowrap}
.tag.main{background:#e7f6ec;color:var(--ok-d)}
.tag.warn{background:var(--warn-l);color:var(--warn-d)}
.tag.ok{background:var(--ok-l);color:var(--ok-d)}
.tag.danger{background:var(--danger-l);color:var(--danger-d)}
.tag.info{background:var(--info-l);color:#0b7fb3}
.tag.gray{background:#eef1f5;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.danger{background:var(--danger)} .dot.gray{background:var(--muted)}

.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions .btn{padding:5px 10px;font-size:var(--fs-xs)}

/* 空状态 */
.empty{padding:42px 20px;text-align:center;color:var(--muted)}
.empty .em-ico{font-size:34px;opacity:.5;margin-bottom:8px}
.empty .em-t{font-weight:600;color:var(--text-2)}
.empty .em-s{font-size:var(--fs-sm);margin-top:4px}

/* =========================================================
   表单面板（内联新增/编辑）
   ========================================================= */
.form{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-2);
  padding:18px 18px 16px;margin-bottom:18px;display:none}
.form.show{display:block;animation:slideDown .2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.form .form-title{font-weight:800;font-size:var(--fs-md);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.form .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.form .grid>div{display:flex;flex-direction:column}
.form label{font-size:var(--fs-xs);color:var(--text-2);margin-bottom:5px;font-weight:600}
.form .form-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.form .form-actions .btn{flex:0 0 auto}

/* 通用行（报表/盘点筛选） */
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.row>div{flex:1;min-width:150px;display:flex;flex-direction:column}
.row>div label{font-size:var(--fs-xs);color:var(--text-2);margin-bottom:5px;font-weight:600}

/* 商品明细行 */
.item-row{display:grid;grid-template-columns:2.4fr 1fr 1fr 1.2fr 1.2fr auto;gap:8px;margin-bottom:8px;align-items:end}
.item-row .del{background:#fff;color:var(--danger);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:9px 12px;font-size:var(--fs);font-weight:700}
.item-row .del:hover{background:var(--danger-l);border-color:var(--danger)}
.items-box{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r);padding:12px;margin:6px 0 4px}

/* 提示文字 */
.hint{font-size:var(--fs-sm);color:var(--muted);line-height:1.7}
.note-box{background:var(--info-l);border:1px solid #bfe6f7;color:#0b6e96;border-radius:var(--r-sm);
  padding:10px 12px;font-size:var(--fs-sm);line-height:1.6;margin-bottom:16px}

/* 扫码 / 盘点 卡片 */
.scan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:16px;margin-bottom:16px}
.scan-card video{width:100%;max-width:340px;border-radius:var(--r-sm);margin-top:12px;background:#000}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12px}

/* =========================================================
   Toast 轻提示（替代 alert）
   ========================================================= */
#toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:#1f2733;color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;box-shadow:var(--sh-3);max-width:90vw;display:flex;align-items:center;gap:8px;
  animation:toastIn .25s ease;opacity:1;transition:opacity .3s, transform .3s}
.toast.ok{background:#11803a} .toast.warn{background:#c4470a} .toast.danger{background:#b30f33}
.toast .ti{font-size:15px}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateY(-10px)}

/* 全局致命错误条 */
#__fatal{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#b30f33;color:#fff;
  font-size:13px;padding:10px 16px;display:none;line-height:1.5}
#__fatal.show{display:block}

/* =========================================================
   响应式：平板 / 手机
   ========================================================= */
@media(max-width:1024px){
  #view{padding:20px 18px 28px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}

@media(max-width:768px){
  /* 外壳改纵向：顶栏在上、内容在下；侧边栏变底部导航（关键：否则顶栏与内容会横着并排错位） */
  #app{flex-direction:column}

  /* 侧边栏 → 底部导航条 */
  #nav{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;flex-direction:row;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:50;overflow:hidden;
    background:rgba(15,28,51,.96);backdrop-filter:blur(8px);align-items:center;
    box-shadow:0 -4px 18px rgba(0,0,0,.25)}
  #nav .brand{display:none}
  /* 导航按钮横向滑动展示（之前被整体隐藏，导致手机无法切换页面） */
  #nav .nav-scroll{display:flex;flex-direction:row;flex:1;min-width:0;overflow-x:auto;
    margin:0;padding:0 4px;gap:2px;align-items:center;scrollbar-width:none}
  #nav .nav-scroll::-webkit-scrollbar{display:none}
  #nav .nav-scroll .nav-btn{flex:0 0 auto;flex-direction:column;gap:2px;min-width:54px;
    justify-content:center;align-items:center;padding:6px 6px;margin-bottom:0;
    font-size:10px;border-radius:10px}
  #nav .nav-scroll .nav-btn .ico{font-size:18px}
  .nav-foot{display:flex!important;margin:0 0 0 auto;padding:0 6px;border:none;flex:0 0 auto}
  #nav-user{display:none}
  .nav-foot .btn-logout{padding:8px 12px;font-size:13px;white-space:nowrap}

  /* 移动顶栏（顶部固定，无负边距，避免横向错位） */
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;
    background:var(--surface);border-bottom:1px solid var(--line);margin:0;padding:12px 14px}
  .mtop .m-logo{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:16px;background:linear-gradient(135deg,#2f6bff,#1f53e0);color:#fff}
  .mtop h1{font-size:var(--fs-lg);font-weight:800}
  .mtop .m-user{margin-left:auto;font-size:var(--fs-xs);color:var(--muted)}

  #view{padding:14px 14px 86px;overflow-x:hidden}

  /* 统计卡 2 列 */
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:13px 14px}
  .stat .value{font-size:21px}

  /* 表格 → 卡片 */
  .table-wrap{background:transparent;border:none;box-shadow:none;overflow:visible}
  .table-wrap .tw-head{background:transparent;border:none;padding:0 2px 10px}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh-1);padding:6px 14px;margin-bottom:10px}
  tbody td{border:none;padding:8px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right}
  tbody td::before{content:attr(data-label);color:var(--text-2);font-weight:700;font-size:var(--fs-xs);text-align:left;flex-shrink:0}
  tbody td:last-child{border-bottom:none}
  .row-actions{justify-content:flex-end}

  /* 表单 / 筛选 单列 */
  .item-row{grid-template-columns:1fr 1fr;gap:8px}
  .item-row .del{grid-column:1 / -1}
  .form .grid{grid-template-columns:1fr 1fr}
  .row>div{min-width:120px}
}

@media(max-width:420px){
  .cards{grid-template-columns:1fr 1fr}
  .form .grid{grid-template-columns:1fr}
  .item-row{grid-template-columns:1fr}
}