/* ===== 多商户手机数码销售管理系统 v3.0 通用样式 ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#2a5298;--primary-d:#1e3c72;--accent:#4b86e8;
  --green:#0f9d58;--red:#d93025;--orange:#f29900;--purple:#7b5cd6;
  --bg:#f0f3f8;--border:#e6eaf0;--txt:#2c3338;--muted:#8a94a6;
  --side:#1e2c42;--side-a:#2a3f5f;
}
html,body{height:100%}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.85}
code{background:#eef2f8;padding:1px 6px;border-radius:4px;font-family:Consolas,monospace}

/* 表单 */
.inp,select,textarea{width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:7px;font-size:14px;font-family:inherit;background:#fff;outline:none;transition:.15s}
.inp:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(75,134,232,.12)}
textarea{resize:vertical;min-height:70px}
label.lb{display:block;margin:0 0 6px;color:#555;font-size:13px}
.form-row{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
.form-grid .full{grid-column:1/3}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* 按钮 */
.btn{display:inline-block;padding:8px 18px;border:1px solid var(--border);background:#fff;color:var(--txt);border-radius:7px;cursor:pointer;font-size:14px;font-family:inherit;line-height:1.4;vertical-align:middle}
.btn:hover{border-color:var(--accent);color:var(--primary)}
.btn-pri{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-pri:hover{background:var(--primary-d);color:#fff;opacity:1}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-warn{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-sm{padding:4px 11px;font-size:12.5px;border-radius:6px}
.btn-lg{padding:11px 28px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* 后台布局 */
.layout{display:flex;min-height:100vh}
.side{width:218px;background:var(--side);color:#c7d3e6;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:50}
.side .logo{padding:20px 18px;font-size:16px;font-weight:700;color:#fff;line-height:1.4;border-bottom:1px solid rgba(255,255,255,.08)}
.side .logo small{display:block;font-size:11px;color:#7d8db0;font-weight:400;margin-top:3px}
.menu{padding:10px 0 30px}
.menu-group{margin-top:8px}
.menu-group .mg-t{padding:9px 20px;font-size:12px;color:#6f80a0;letter-spacing:1px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#c7d3e6;font-size:14px;border-left:3px solid transparent}
.menu a:hover{background:rgba(255,255,255,.06);color:#fff;opacity:1}
.menu a.on{background:var(--side-a);color:#fff;border-left-color:var(--accent)}
.menu a .mi{width:18px;text-align:center}
.main{flex:1;margin-left:218px;min-width:0;display:flex;flex-direction:column}
.content{flex:1 0 auto}
/* 商户端底部版权 */
.site-foot{flex-shrink:0;text-align:center;font-size:12px;color:#9aa4b5;padding:14px 16px 18px;border-top:1px solid var(--border);background:#fff;line-height:1.7}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:40}
.topbar .tb-title{font-size:16px;font-weight:700}
.topbar .tb-user{display:flex;align-items:center;gap:14px;font-size:13.5px;color:#555}
.topbar .tb-user .avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.content{padding:22px 24px}
/* 移动端汉堡按钮（桌面隐藏） */
.nav-toggle{display:none;width:38px;height:38px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:19px;line-height:1;color:var(--primary-d);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;margin-right:12px;padding:0}
.nav-mask{display:none;position:fixed;inset:0;background:rgba(15,25,45,.5);z-index:45}

/* 卡片 / 统计 */
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-h h3{font-size:15.5px;color:#222}
.card-h .more{font-size:13px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px 20px;position:relative;overflow:hidden}
.stat .s-lbl{color:var(--muted);font-size:13px}
.stat .s-val{font-size:27px;font-weight:800;margin-top:7px;color:#222}
.stat .s-sub{font-size:12px;color:var(--muted);margin-top:5px}
.stat .s-ico{position:absolute;right:14px;top:14px;font-size:30px;opacity:.18}
.stat.g .s-val{color:var(--green)}.stat.b .s-val{color:var(--primary)}.stat.o .s-val{color:var(--orange)}.stat.r .s-val{color:var(--red)}.stat.p .s-val{color:var(--purple)}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.tbl th{background:#f7f9fc;color:#5a6678;font-weight:600;text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid #f0f2f6;vertical-align:middle}
.tbl tr:hover td{background:#fafcff}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ctr{text-align:center}
.tbl .ops{white-space:nowrap}
.tbl-empty{text-align:center;color:var(--muted);padding:44px 0 !important}

/* 徽章 */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;line-height:1.7;white-space:nowrap}
.bd-gray{background:#eef1f5;color:#66707f}.bd-green{background:#e3f5ec;color:#0f9d58}.bd-red{background:#fdecea;color:#d93025}
.bd-blue{background:#e7f0fd;color:#2a5298}.bd-orange{background:#fdf3e2;color:#c87b00}.bd-purple{background:#f0ebfd;color:#7b5cd6}

/* 搜索栏 */
.search-bar{background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px 18px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.search-bar .sf{display:flex;flex-direction:column;gap:5px}
.search-bar .sf label{font-size:12px;color:var(--muted)}
.search-bar .sf .inp,.search-bar .sf select{width:auto;min-width:150px}
.search-bar .sp{flex:1}

/* 分页 */
.pager{margin-top:18px;text-align:right;font-size:13.5px}
.pager a,.pager span{display:inline-block;padding:5px 11px;margin:0 2px;border:1px solid var(--border);border-radius:6px;background:#fff}
.pager .cur{background:var(--primary);color:#fff;border-color:var(--primary)}
/* ThinkPHP paginate 输出 <ul class="pagination"><li> 结构 */
.pager .pagination{list-style:none;margin:0;padding:0;display:inline-block}
.pager .pagination li{display:inline-block;margin:0 1px}
.pager .pagination li a,.pager .pagination li span{display:inline-block;padding:5px 11px;border:1px solid var(--border);border-radius:6px;background:#fff;text-decoration:none;line-height:1.4}
.pager .pagination li.active span{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager .pagination li.disabled span{color:#bbb;background:#f5f5f5;cursor:not-allowed}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(20,30,50,.5);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:50px 14px;overflow-y:auto}
.mask.show{display:flex}
.modal{background:#fff;border-radius:12px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-h{padding:16px 22px;border-bottom:1px solid var(--border);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.modal-h .x{cursor:pointer;color:#999;font-size:20px;border:0;background:none}
.modal-b{padding:22px;max-height:62vh;overflow-y:auto}
.modal-f{padding:14px 22px;border-top:1px solid var(--border);text-align:right}
.modal-lg{max-width:880px}

/* toast */
.toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);background:#333d4d;color:#fff;padding:10px 24px;border-radius:8px;z-index:300;font-size:14px;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:.96}
.toast.ok{background:var(--green)}.toast.err{background:var(--red)}

/* 登录页 */
.login-bg{min-height:100vh;background:linear-gradient(135deg,#1e3c72 0%,#2a5298 60%,#4b86e8 100%);display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:16px;width:400px;max-width:100%;padding:38px 36px 30px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.login-card .lg-logo{text-align:center;font-size:20px;font-weight:800;color:var(--primary-d);margin-bottom:4px}
.login-card .lg-sub{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:26px}
.login-tabs{display:flex;margin-bottom:22px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.login-tabs a{flex:1;text-align:center;padding:10px;color:#777;font-size:14px}
.login-tabs a.on{background:var(--primary);color:#fff}
.login-card .btn{width:100%;margin-top:6px}
.login-foot{text-align:center;margin-top:22px;font-size:12px;color:#9aa4b5;line-height:1.8}

/* 柱状图 */
.bars{display:flex;align-items:flex-end;gap:10px;height:220px;padding:10px 4px 0}
.bars .bar-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bars .bar-v{font-size:11.5px;color:#66707f}
.bars .bar{width:70%;max-width:42px;background:linear-gradient(180deg,#5a9bf0,#2a5298);border-radius:5px 5px 0 0;min-height:2px;position:relative}
.bars .bar:hover{background:linear-gradient(180deg,#78b1ff,#3a67b5)}
.bars .bar-l{font-size:12px;color:var(--muted)}
.hbars{display:flex;flex-direction:column;gap:12px}
.hbars .hb-row{display:grid;grid-template-columns:120px 1fr 70px;align-items:center;gap:10px;font-size:13px}
.hbars .hb-track{background:#eef2f8;height:16px;border-radius:8px;overflow:hidden}
.hbars .hb-fill{height:100%;background:linear-gradient(90deg,#4b86e8,#2a5298);border-radius:8px}
.hbars .hb-val{text-align:right;color:#555;font-variant-numeric:tabular-nums}

/* POS 快速开单 */
.pos-wrap{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
.pos-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.prod-cc{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;transition:.15s;position:relative}
.prod-cc:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(42,82,152,.12);transform:translateY(-2px)}
.prod-cc .p-img{width:100%;height:78px;border-radius:8px;background:#f2f5fa;display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:8px;overflow:hidden}
.prod-cc .p-img img{width:100%;height:100%;object-fit:cover}
.prod-cc .p-nm{font-size:13px;height:38px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prod-cc .p-pr{color:var(--red);font-weight:700;margin-top:5px}
.prod-cc .p-st{font-size:11.5px;color:var(--muted);margin-top:2px}
.prod-cc .tag-imei{position:absolute;left:6px;top:6px;font-size:10.5px;background:#7b5cd6;color:#fff;padding:1px 6px;border-radius:4px}
.pos-cart{background:#fff;border:1px solid var(--border);border-radius:10px;position:sticky;top:78px;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.pos-cart .pc-h{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700}
.pos-cart .pc-list{overflow-y:auto;flex:1;min-height:160px;max-height:42vh}
.pc-item{padding:10px 16px;border-bottom:1px dashed #eef1f5;font-size:13px}
.pc-item .pi-top{display:flex;justify-content:space-between;gap:8px}
.pc-item .pi-nm{flex:1}
.pc-item .pi-del{color:var(--red);cursor:pointer}
.pc-item .pi-mid{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:8px}
.qty-ctl{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.qty-ctl button{width:26px;height:26px;border:0;background:#f5f7fa;cursor:pointer;font-size:15px}
.qty-ctl input{width:46px;height:26px;border:0;text-align:center;border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:0}
.pc-foot{border-top:1px solid var(--border);padding:14px 16px}
.pc-total{display:flex;justify-content:space-between;font-size:15px;margin-bottom:10px}
.pc-total b{font-size:22px;color:var(--red)}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pay-btn{padding:11px 4px;border:1.5px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;text-align:center;font-size:13px}
.pay-btn.sel{border-color:var(--green);background:#f0faf5;color:var(--green);font-weight:700}

/* 工单/详情描述列表 */
.dl{display:grid;grid-template-columns:130px 1fr;gap:0;font-size:13.5px}
.dl dt{padding:10px 12px;background:#f7f9fc;color:#5a6678;border-bottom:1px solid #eef1f5}
.dl dd{padding:10px 14px;border-bottom:1px solid #f0f2f6}

/* 时间轴 */
.timeline{list-style:none}
.timeline li{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--border);margin-left:6px}
.timeline li::before{content:'';position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.timeline .tl-t{font-size:13px;color:var(--muted)}
.timeline .tl-c{font-size:14px;margin-top:2px}

/* 图片上传缩略 */
.up-img{width:120px;height:120px;border:1.5px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;color:#aab;background:#fafbfd;font-size:12.5px;flex-direction:column;gap:4px}
.up-img img{width:100%;height:100%;object-fit:cover}

/* 维修日志时间轴（卡片式） */
.tl-item{position:relative;padding:0 0 18px 24px;border-left:2px solid var(--border);margin-left:6px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#c2ccda;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.tl-dot.on{background:var(--primary);box-shadow:0 0 0 3px #e5ebff}
.tl-body{font-size:13.5px}
.tl-h{margin-bottom:3px}
.tl-h .hint{margin-left:8px;font-weight:400}

/* 进度条（支付占比） */
.pbar{background:#eef2f8;border-radius:6px;height:10px;min-width:120px;overflow:hidden}
.pbar-i{height:100%;background:linear-gradient(90deg,#4f6ef7,#6a8bff);border-radius:6px;transition:width .3s}

/* 柱状图（财务按日趋势） */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:240px;padding:10px 4px 0;border-bottom:1px solid var(--border)}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:34px;height:100%}
.bar-v{font-size:10px;color:#7b8798;margin-bottom:4px;white-space:nowrap}
.bar-i{width:70%;max-width:34px;background:linear-gradient(180deg,#6a8bff,#4f6ef7);border-radius:5px 5px 0 0;min-height:2px}
.bar-l{font-size:10.5px;color:#97a1b0;margin-top:6px;transform:rotate(-35deg);transform-origin:center;white-space:nowrap;height:34px}

/* 排行名次 */
.rank-no{display:inline-flex;width:24px;height:24px;line-height:24px;border-radius:50%;background:#eef1f6;color:#8a94a5;font-weight:700;align-items:center;justify-content:center}
.rank-no.top1{background:linear-gradient(135deg,#ffb347,#ff8f42);color:#fff}
.rank-no.top2{background:linear-gradient(135deg,#aab7c8,#8b98aa);color:#fff}
.rank-no.top3{background:linear-gradient(135deg,#d99a6c,#c47e4e);color:#fff}

/* 关于页特性 */
.about-feat{padding:10px 14px;border-radius:8px;background:#f7f9fc;margin-bottom:8px;font-size:14px;color:#44506a}


/* 打印小票 */
.print-tip{margin-bottom:14px}
@media print{
  body{background:#fff}
  .no-print,.side,.topbar,.print-tip,.site-foot{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
  .card{border:0;margin:0;padding:0}
}
.receipt{width:320px;margin:0 auto;font-family:"Courier New",monospace;font-size:12.5px;color:#000;line-height:1.65}
.receipt h2{text-align:center;font-size:16px;margin-bottom:4px}
.receipt .r-c{text-align:center}.receipt hr{border:0;border-top:1px dashed #000;margin:8px 0}
.receipt table{width:100%;border-collapse:collapse;font-size:12px}
.receipt .r-right{text-align:right}
.receipt .r-total{font-size:15px;font-weight:700}

/* ===================================================================
   响应式适配：手机(≤480) / 平板竖屏(≤768) / 小屏电脑(≤1024) / 电脑
   =================================================================== */

/* —— 平板横屏 / 小屏电脑：侧边栏变抽屉，汉堡按钮出现 —— */
@media(max-width:1024px){
  .nav-toggle{display:inline-flex}
  .side{transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25);width:240px}
  body.nav-open .side{transform:translateX(0)}
  body.nav-open .nav-mask{display:block}
  .main{margin-left:0;width:100%}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .pos-wrap{grid-template-columns:1fr}
  .pos-cart{position:static;max-height:none}
}

/* —— 平板竖屏 / 大手机：双栏全部转单栏、表格横向滚动 —— */
@media(max-width:768px){
  body{font-size:13.5px}
  .content{padding:14px 12px 28px}
  .topbar{padding:0 12px;height:54px}
  .topbar .tb-title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card{padding:15px 14px;border-radius:9px}
  .card-h{margin-bottom:12px;flex-wrap:wrap;gap:8px}

  /* 视图里写死的内联双栏网格全部塌成单栏（统计卡网格除外，单独保持2列） */
  div[style*="grid-template-columns"]:not(.stat-grid){grid-template-columns:1fr !important}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}

  /* 统计卡 2 列紧凑 */
  .stat-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px;margin-bottom:12px}
  .stat{padding:13px 14px}
  .stat .s-val{font-size:21px}
  .stat .s-ico{font-size:24px;top:10px;right:10px}

  /* 宽表格：整体横向滚动，不挤压单元格（table 变 block 后内部自动生成匿名表格） */
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
  .tbl th,.tbl td{white-space:nowrap}

  /* 搜索栏：表单项占满整行 */
  .search-bar{flex-direction:column;align-items:stretch;gap:10px;padding:13px 14px}
  .search-bar .sf{width:100%}
  .search-bar .sf .inp,.search-bar .sf select{width:100%}
  .search-bar .sp{display:none}
  .search-bar .btn{width:100%}

  /* 弹窗：贴边显示，内部滚动 */
  .mask{padding:12px 10px;align-items:flex-start}
  .modal{max-width:100%;border-radius:10px}
  .modal-b{padding:16px 15px;max-height:calc(100vh - 170px)}
  .modal-h,.modal-f{padding:13px 15px}

  /* 详情描述列表转单列 */
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;padding-bottom:2px}
  .dl dd{padding-top:4px}

  /* 分页居中、可换行 */
  .pager{text-align:center;line-height:2.4}

  /* 财务按日趋势图（约30根柱）：容器内横滑 */
  .chart-bars{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;min-width:0!important}
  .chart-bars .bar-col{min-width:30px}

  /* POS 商品卡 2~3 列、支付方式 3 列 */
  .pos-prod-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .prod-cc{padding:9px}
  .prod-cc .p-img{height:64px;font-size:28px}
  .pay-grid{grid-template-columns:repeat(3,1fr)}

  /* 横向排行条标签收窄 */
  .hbars .hb-row{grid-template-columns:92px 1fr 58px;font-size:12px}

  /* 7日柱状图：允许横滑兜底 */
  .bars{overflow-x:auto}
  .bars .bar-i{min-width:38px}

  /* 顶栏：隐藏长文本，只留头像/退出，有效期徽标缩短 */
  .tb-user{gap:9px;font-size:12.5px}
  .tb-user > span:not(.badge){display:none}
  .tb-user .badge{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px}
}

/* —— 手机：进一步紧凑 —— */
@media(max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr) !important}
  .card-h h3{font-size:14.5px}
  .btn{padding:8px 14px}
  .btn-block-m{display:block;width:100%}
  .modal-b{max-height:calc(100vh - 150px)}
  .pay-grid{gap:6px}
  .pay-btn{font-size:12px;padding:10px 2px}
  .pc-total b{font-size:19px}
  .receipt{width:100%;font-size:11.5px}
  /* 表格操作按钮纵向排列避免撑开 */
  .tbl .ops a,.tbl .ops button{display:inline-block;margin:2px 0}
  /* POS 会员积分行 / 混合支付行可换行，防止溢出 */
  .m-points{flex-wrap:wrap}
  .pay-row .inp{min-width:0}
  /* 登录卡收窄内边距 */
  .login-bg{padding:14px}
  .login-card{padding:26px 20px 22px}
}