/* =========================================================
   地磅称重管理系统 全局样式
   简洁、大字号、触屏友好，兼容后期手机端
   ========================================================= */
:root{
    --primary:#1677ff;--primary-d:#0958d9;--primary-l:#e6f4ff;
    --success:#52c41a;--warning:#faad14;--danger:#ff4d4f;
    --text:#1f2329;--text-2:#646a73;--text-3:#8f959e;
    --border:#e5e6eb;--bg:#f2f3f5;--card:#fff;
    --sidebar:#1d2b3a;--sidebar-2:#24344a;--sidebar-active:#2f4b6e;
    --radius:8px;--shadow:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
    background:var(--bg);color:var(--text);font-size:14px;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-d)}
button{font-family:inherit}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
    width:210px;background:var(--sidebar);color:#c3ccd8;
    display:flex;flex-direction:column;flex-shrink:0;
    position:fixed;top:0;bottom:0;left:0;z-index:100;
    transition:transform .25s ease;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;color:#fff}
.brand-logo{
    width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#1677ff,#36cfc9);
    display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;flex-shrink:0;
}
.brand-name{font-size:16px;font-weight:bold;white-space:nowrap}
.menu{padding:6px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.menu-item{
    display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:6px;
    color:#c3ccd8;font-size:14px;white-space:nowrap;
}
.menu-item:hover{background:var(--sidebar-2);color:#fff}
.menu-item.active{background:var(--sidebar-active);color:#fff;font-weight:bold}

.main{flex:1;margin-left:210px;display:flex;flex-direction:column;min-width:0}
.topbar{
    height:58px;background:var(--card);border-bottom:1px solid var(--border);
    display:flex;align-items:center;padding:0 20px;gap:14px;
    position:sticky;top:0;z-index:50;
}
.page-title{font-size:17px;font-weight:bold;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:14px}
.store-switch{display:flex;align-items:center;gap:6px}
.store-switch-label{font-size:12px;color:var(--text-3)}
.store-badge{
    background:var(--primary-l);color:var(--primary-d);padding:5px 12px;
    border-radius:20px;font-size:13px;font-weight:bold;
}
.user-box{display:flex;align-items:center;gap:8px}
.user-avatar{
    width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:bold;
}
.user-meta{display:flex;flex-direction:column;line-height:1.3}
.user-meta b{font-size:13px}
.user-meta small{color:var(--text-3);font-size:11px}
.icon-btn{
    background:none;border:none;color:var(--text-2);cursor:pointer;padding:6px;border-radius:6px;
    display:inline-flex;align-items:center;
}
.icon-btn:hover{background:var(--bg);color:var(--primary)}
.only-mobile{display:none}
.sidebar-mask{display:none}

.content{padding:20px;flex:1}
.footer{text-align:center;color:var(--text-3);font-size:12px;padding:14px}

/* ---------- 卡片 / 统计 ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card-title{font-size:15px;font-weight:bold;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card-title .more{margin-left:auto;font-size:13px;font-weight:normal}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.stat-card{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:18px;display:flex;align-items:center;gap:14px;
}
.stat-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:24px;height:24px}
.stat-info .num{font-size:24px;font-weight:bold;line-height:1.2}
.stat-info .lbl{color:var(--text-3);font-size:13px}
.bg-blue{background:#e6f4ff;color:#1677ff}.bg-green{background:#f0fbe8;color:#389e0d}
.bg-orange{background:#fff7e6;color:#d46b08}.bg-purple{background:#f4f0ff;color:#722ed1}
.bg-red{background:#fff1f0;color:#cf1322}.bg-cyan{background:#e6fffb;color:#08979c}

/* 简单柱状图 */
.chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.chart .bar{
    width:70%;max-width:38px;background:linear-gradient(180deg,#4096ff,#1677ff);
    border-radius:4px 4px 0 0;min-height:2px;position:relative;transition:height .4s;
}
.chart .bar span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--text-2);white-space:nowrap}
.chart .bar-col small{font-size:11px;color:var(--text-3);white-space:nowrap}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px 18px}
.form-item{display:flex;flex-direction:column;gap:6px}
.form-item.wide{grid-column:1/-1}
.form-item label{font-size:13px;color:var(--text-2);font-weight:bold}
.form-item label .req{color:var(--danger);margin-left:2px}
.form-item .hint{font-size:12px;color:var(--text-3)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=email],select,textarea{
    width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:6px;
    font-size:14px;font-family:inherit;color:var(--text);background:#fff;outline:none;
    transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,119,255,.12)}
input[readonly]{background:var(--bg);color:var(--text-2)}
textarea{min-height:70px;resize:vertical}
.input-suffix{position:relative}
.input-suffix .unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:13px}
.input-with-btn{display:flex;gap:8px}
.input-with-btn input{flex:1}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 18px;border-radius:6px;border:1px solid var(--border);
    background:#fff;color:var(--text);font-size:14px;cursor:pointer;
    transition:all .15s;white-space:nowrap;line-height:1.2;
}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background:#389e0d;border-color:#389e0d;color:#fff}
.btn-danger{background:#fff;border-color:#ffccc7;color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-warning{background:#fff;border-color:#ffd591;color:#d46b08}
.btn-warning:hover{background:var(--warning);border-color:var(--warning);color:#fff}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-lg{padding:12px 24px;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-link{border:none;background:none;color:var(--primary);padding:4px 8px;cursor:pointer;font-size:13px}
.btn-link.danger{color:var(--danger)}
.btn-link:hover{text-decoration:underline;background:none}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .spacer{flex:1}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
.data-table th,.data-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table th{background:#fafbfc;color:var(--text-2);font-weight:bold;font-size:13px}
.data-table tbody tr:hover{background:#f5f9ff}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table td.wrap{white-space:normal;min-width:120px}
.data-table .ops{white-space:nowrap;text-align:right}
.data-table .ops .btn-link{padding:3px 6px}
tr.void-row td{color:var(--text-3);text-decoration:line-through}

/* ---------- 徽章 / 状态 ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;line-height:1.7}
.badge-green{background:#f0fbe8;color:#389e0d}
.badge-gray{background:#f2f3f5;color:#86909c}
.badge-red{background:#fff1f0;color:#cf1322}
.badge-blue{background:var(--primary-l);color:var(--primary-d)}
.badge-orange{background:#fff7e6;color:#d46b08}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.dot-on{background:var(--success)}.dot-off{background:var(--text-3)}

/* ---------- 提示 ---------- */
.alert{padding:11px 16px;border-radius:6px;margin-bottom:14px;font-size:13.5px;position:relative;padding-right:38px}
.alert-ok{background:#f0fbe8;border:1px solid #b7eb8f;color:#389e0d}
.alert-error{background:#fff2f0;border:1px solid #ffccc7;color:#cf1322}
.alert-warn{background:#fffbe6;border:1px solid #ffe58f;color:#ad6800}
.alert-info{background:var(--primary-l);border:1px solid #91caff;color:var(--primary-d)}
.alert-close{position:absolute;right:10px;top:8px;border:none;background:none;font-size:18px;cursor:pointer;color:inherit;opacity:.6}
.empty{text-align:center;padding:50px 20px;color:var(--text-3)}
.empty svg{width:56px;height:56px;margin-bottom:10px;opacity:.5}

/* ---------- 筛选条 ---------- */
.filter-bar{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:14px 16px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
.filter-bar .f-item{display:flex;flex-direction:column;gap:4px}
.filter-bar .f-item label{font-size:12px;color:var(--text-3)}
.filter-bar input,.filter-bar select{min-width:130px}

/* ---------- 分页 ---------- */
.pagination{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.pagination a,.pagination span{
    min-width:32px;height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:6px;background:#fff;font-size:13px;color:var(--text);
}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .cur{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination .info{border:none;background:none;color:var(--text-3)}

/* ---------- 弹窗确认 ---------- */
.modal-mask{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
    align-items:center;justify-content:center;padding:20px;
}
.modal-mask.show{display:flex}
.modal{background:#fff;border-radius:10px;width:100%;max-width:440px;overflow:hidden}
.modal-head{padding:16px 20px;font-weight:bold;font-size:16px;border-bottom:1px solid var(--border)}
.modal-body{padding:20px;font-size:14px;color:var(--text-2)}
.modal-foot{padding:12px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);background:#fafbfc}

/* ---------- 登录页 ---------- */
.login-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    background:linear-gradient(135deg,#1d2b3a 0%,#2b5a8f 55%,#1677ff 100%);
}
.login-card{background:#fff;border-radius:14px;padding:38px 34px;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:6px}
.login-logo .logo-mark{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#1677ff,#36cfc9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold}
.login-card h1{font-size:20px;text-align:center}
.login-sub{text-align:center;color:var(--text-3);font-size:13px;margin:8px 0 24px}
.login-form .form-item{margin-bottom:16px}
.login-form input{padding:11px 12px;font-size:15px}
.login-tip{margin-top:16px;font-size:12px;color:var(--text-3);text-align:center;line-height:1.8}

/* ---------- 打印模板编辑器 ---------- */
.tpl-layout{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.tpl-editor textarea{min-height:420px;font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.6}
.var-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.var-chip{
    font-family:Consolas,monospace;font-size:12px;padding:3px 9px;border:1px solid #91caff;
    background:var(--primary-l);border-radius:4px;cursor:pointer;color:var(--primary-d);
}
.var-chip:hover{background:var(--primary);color:#fff}
.tpl-preview{background:#fafafa;border:1px dashed var(--border);border-radius:8px;padding:14px;min-height:300px;overflow:auto}

/* ---------- 打印预览页 ---------- */
.print-page{background:#e9e9e9;min-height:100vh;padding:0}
.print-bar{
    position:sticky;top:0;background:#fff;padding:12px 20px;display:flex;gap:10px;
    align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:10;flex-wrap:wrap;
}
.print-bar select{width:auto;min-width:160px;padding:8px 10px}
.print-wrap{
    background:#fff;width:fit-content;margin:20px auto;padding:18px 24px;
    border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.12);
}

/* ---------- 开关 ---------- */
.switch{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
    position:absolute;cursor:pointer;inset:0;background:#c9cdd4;border-radius:22px;transition:.2s;
}
.switch .slider:before{
    content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switch-row{display:flex;align-items:center;gap:10px}

/* ---------- 响应式（手机/平板） ---------- */
@media (max-width:1100px){
    .tpl-layout{grid-template-columns:1fr}
}
@media (max-width:900px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .sidebar.open ~ .sidebar-mask,.sidebar-mask.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90}
    .main{margin-left:0}
    .only-mobile{display:inline-flex}
    .user-meta{display:none}
    .store-switch-label{display:none}
    .content{padding:14px 12px}
    .form-grid{grid-template-columns:1fr 1fr}
    .topbar{padding:0 12px;gap:8px}
}
@media (max-width:560px){
    .form-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
    .stat-card{padding:14px}
    .stat-info .num{font-size:20px}
    .toolbar .btn{padding:9px 14px}
    .page-title{font-size:16px}
}