/* 牌位打印管理系统 样式 */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#f5f2ec;color:#333;font-size:14px;}
a{color:#8d2a1e;text-decoration:none;}
a:hover{text-decoration:underline;}

/* 顶栏 */
.topbar{background:#7a1f15;color:#fff;display:flex;align-items:center;padding:0 18px;height:50px;gap:24px;position:sticky;top:0;z-index:50;}
.topbar .brand{font-size:17px;font-weight:bold;white-space:nowrap;}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;}
.topbar nav a{color:#f3d9c9;padding:6px 12px;border-radius:5px;font-size:14px;}
.topbar nav a:hover{background:rgba(255,255,255,.14);text-decoration:none;}
.topbar nav a.on{background:#fff;color:#7a1f15;font-weight:bold;}
.topbar .userbox{font-size:13px;color:#e8c9b8;display:flex;gap:10px;align-items:center;white-space:nowrap;}
.topbar .userbox a{color:#fff;}

.wrap{max-width:1240px;margin:18px auto;padding:0 16px;}

/* 通用组件 */
.flash{padding:10px 14px;border-radius:6px;margin-bottom:12px;font-size:14px;}
.flash.ok{background:#e8f5e9;border:1px solid #a5d6a7;color:#2e7d32;}
.flash.err{background:#ffebee;border:1px solid #ef9a9a;color:#c62828;}
.flash.warn{background:#fff8e1;border:1px solid #ffe082;color:#8d6e00;}

.panel{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.07);padding:16px 18px;margin-bottom:16px;}
.panel h2{font-size:16px;margin-bottom:12px;color:#5d4037;}
.panel h2 .sub{font-size:12px;color:#999;font-weight:normal;margin-left:8px;}

table.list{width:100%;border-collapse:collapse;font-size:13px;}
table.list th{background:#faf6f0;color:#6d4c41;text-align:left;padding:8px 8px;border-bottom:2px solid #eaded2;font-weight:normal;white-space:nowrap;}
table.list td{padding:8px;border-bottom:1px solid #f0ebe4;vertical-align:middle;}
table.list tr:hover td{background:#fdfaf6;}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;line-height:1.5;}
.tag.draft{background:#eceff1;color:#546e7a;}
.tag.submitted{background:#e3f2fd;color:#1565c0;}
.tag.approved{background:#e8f5e9;color:#2e7d32;}
.tag.rejected{background:#ffebee;color:#c62828;}
.tag.printed{background:#f3e5f5;color:#6a1b9a;}
.tag.pending{background:#fff3e0;color:#e65100;}
.tag.done{background:#e8f5e9;color:#2e7d32;}
.tag.partial{background:#fff8e1;color:#f57f17;}
.tag.printing{background:#e3f2fd;color:#1565c0;}
.tag.failed{background:#ffebee;color:#c62828;}
.tag.skipped{background:#eceff1;color:#546e7a;}

.btn{display:inline-block;padding:7px 16px;border-radius:6px;border:1px solid transparent;background:#8d2a1e;color:#fff;cursor:pointer;font-size:14px;text-decoration:none!important;line-height:1.5;}
.btn:hover{background:#7a1f15;}
.btn.plain{background:#fff;color:#555;border-color:#ccc;}
.btn.plain:hover{background:#f5f5f5;}
.btn.small{padding:3px 10px;font-size:12px;}
.btn.green{background:#2e7d32;}
.btn.green:hover{background:#1b5e20;}
.btn.blue{background:#1565c0;}
.btn.blue:hover{background:#0d47a1;}
.btn.danger{background:#c62828;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

form.inline{display:inline;}
label.f{display:block;font-size:13px;color:#666;margin:10px 0 4px;}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:#b71c1c;}
textarea{resize:vertical;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 18px;}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.row > div{flex:1;min-width:150px;}
.mut{color:#999;font-size:12px;}
.big{font-size:22px;font-weight:bold;color:#5d4037;}

/* 筛选条 */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end;}
.filters > div{min-width:120px;}
.filters label{display:block;font-size:12px;color:#888;margin-bottom:3px;}
.filters input,.filters select{padding:6px 8px;font-size:13px;}
.pager{margin:14px 0;text-align:center;font-size:13px;}
.pager a,.pager b,.pager span{display:inline-block;padding:4px 10px;margin:0 2px;}
.pager a{border:1px solid #ddd;border-radius:4px;color:#555;}
.pager b{background:#8d2a1e;color:#fff;border-radius:4px;font-weight:normal;}
.pager .mut{margin-left:10px;}

/* 仪表盘 */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px;}
.stat{background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.stat .n{font-size:26px;font-weight:bold;color:#8d2a1e;}
.stat .t{font-size:13px;color:#888;margin-top:4px;}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7a1f15,#b71c1c);}
.login-card{background:#fff;border-radius:12px;padding:36px;width:360px;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.login-card h1{font-size:20px;color:#7a1f15;margin-bottom:4px;text-align:center;}
.login-card .sub{color:#999;font-size:13px;text-align:center;margin-bottom:20px;}
.login-card label{display:block;font-size:13px;color:#666;margin:12px 0 4px;}
.login-card button{width:100%;margin-top:20px;padding:11px;background:#b71c1c;color:#fff;border:0;border-radius:6px;font-size:15px;cursor:pointer;}
.login-card button:hover{background:#8d1a10;}

/* 打印/预览区 */
.preview-area{background:#666;border-radius:8px;padding:18px;overflow:auto;}
.sheet{position:relative;overflow:hidden;background:#fff;page-break-after:always;}
.cell{position:absolute;}
.tablet{position:relative;overflow:hidden;}
.tablet .tx{position:absolute;white-space:nowrap;}
.tablet .rc{position:absolute;}
.tablet .im{position:absolute;object-fit:fill;}
.sheet-stack{transform-origin:top center;margin:0 auto 18px;}
.zoom-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px;color:#eee;font-size:13px;}
.zoom-bar button{padding:4px 12px;background:#fff3;border:1px solid #fff5;color:#fff;border-radius:4px;cursor:pointer;}
.print-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.warnlist{background:#fff8e1;border:1px solid #ffe082;color:#795548;padding:8px 12px;border-radius:6px;font-size:13px;margin-bottom:10px;}

/* 模板元素编辑表 */
.el-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:#faf6f0;border-radius:6px;padding:8px;margin-bottom:6px;}
.el-row .f{display:flex;align-items:center;gap:4px;font-size:12px;color:#666;}
.el-row input,.el-row select{padding:4px 6px;font-size:12px;width:auto;min-width:60px;}
.el-row input[type=text].w{width:110px;}

.checkbox-col{width:26px;}
.steps{display:flex;gap:8px;margin-bottom:16px;}
.steps .step{padding:8px 18px;border-radius:20px;background:#eceff1;color:#78909c;font-size:13px;}
.steps .step.on{background:#8d2a1e;color:#fff;}
.reg-picker{max-height:280px;overflow:auto;border:1px solid #eee;border-radius:6px;padding:6px;}
.reg-picker label{display:flex;gap:8px;padding:5px 6px;border-radius:4px;align-items:center;font-size:13px;}
.reg-picker label:hover{background:#faf6f0;}
.mono{font-family:Consolas,monospace;}

/* 模板编辑器：左编辑右实时预览 */
.editor-layout{display:grid;grid-template-columns:minmax(540px,7fr) minmax(430px,6fr);gap:16px;align-items:start;}
.editor-col{max-height:calc(100vh - 82px);overflow-y:auto;padding-bottom:20px;}
.preview-col{position:sticky;top:62px;display:flex;flex-direction:column;}
.preview-col .pv-frame{width:100%;height:calc(100vh - 218px);min-height:480px;border:0;background:#555;border-radius:6px;}
.pv-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.pv-bar input[type=text]{padding:5px 8px;font-size:13px;width:auto;}
.pv-bar label{font-size:12px;color:#666;display:flex;gap:4px;align-items:center;white-space:nowrap;}
h3.sec{font-size:14px;color:#8d6e63;margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid #f0e4d7;}
@media (max-width:1080px){
  .editor-layout{grid-template-columns:1fr;}
  .editor-col{max-height:none;overflow:visible;}
  .preview-col{position:static;}
  .preview-col .pv-frame{height:620px;}
}
