/* ========================================================================== ovec_cert — หน้าจอฝั่งผู้ดูแล ต่อยอดจากโทเคนใน app.css ไม่ประกาศสีใหม่เอง จะได้เปลี่ยนธีมที่เดียวจบ กติกาเดิมทุกข้อ: ห้าม inline style (CSP บล็อก) · ตัวเล็กสุด 14px ========================================================================== */ body.adm{background:var(--surface-2)} /* ---------- แถบบน ---------- */ .adm-head{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; background:var(--head-bg); color:var(--head-ink); padding:var(--s3) var(--s5); position:sticky; top:0; z-index:20} .adm-brand{display:flex; align-items:center; gap:var(--s3); font-size:17px; font-weight:500} .adm-brand .crest{color:var(--focus)} .adm-me{margin-left:auto; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap} .adm-me .who{font-size:16px} .adm-me .role{font-size:14px; padding:3px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.4)} .role-superadmin{background:rgba(242,169,59,.22)} /* ---------- โครงสองคอลัมน์ ---------- */ .adm-wrap{display:flex; align-items:flex-start; gap:0; min-height:calc(100vh - 58px)} .adm-nav{flex:none; width:210px; background:var(--surface); border-right:1px solid var(--line); padding:var(--s4) 0; position:sticky; top:58px; align-self:stretch} .adm-nav a{display:block; padding:11px var(--s5); color:var(--muted); text-decoration:none; font-size:16px; border-left:3px solid transparent} .adm-nav a:hover{background:var(--surface-2); color:var(--ink)} .adm-nav a.on{background:var(--accent-soft); color:var(--accent-dark); border-left-color:var(--accent); font-weight:500} .adm-main{flex:1; min-width:0; padding:var(--s6) var(--s6) var(--s10)} @media (max-width:820px){ .adm-wrap{flex-direction:column} .adm-nav{width:100%; position:static; display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:0} .adm-nav a{border-left:0; border-bottom:3px solid transparent; white-space:nowrap; padding:12px var(--s4)} .adm-nav a.on{border-left:0; border-bottom-color:var(--accent)} .adm-main{padding:var(--s4)} } /* ---------- หัวเรื่องหน้า ---------- */ .page-head{display:flex; align-items:flex-end; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5)} .page-head h2{margin:0; font-size:24px} .page-head p{margin:var(--s1) 0 0; color:var(--muted); font-size:15px; width:100%} .page-head .act{margin-left:auto; display:flex; gap:var(--s2); flex-wrap:wrap} /* ---------- แผ่นสถิติ ---------- */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s4)} .stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5)} .stat .n{font-size:30px; font-weight:700; line-height:1.15; color:var(--accent-dark)} .stat .t{font-size:15px; color:var(--muted); margin-top:var(--s1)} .stat .sub{font-size:14px; color:var(--faint); margin-top:var(--s2)} .stat.warn .n{color:var(--warn)} .stat.crit .n{color:var(--crit)} /* ---------- ตาราง ---------- */ .tablewrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto} table.data{width:100%; border-collapse:collapse; font-size:16px} table.data th,table.data td{padding:11px var(--s4); text-align:left; vertical-align:top; border-bottom:1px solid var(--line)} table.data th{background:var(--surface-2); font-size:14px; color:var(--muted); font-weight:500; white-space:nowrap; position:sticky; top:0} table.data tbody tr:hover{background:var(--surface-2)} table.data tbody tr:last-child td{border-bottom:0} table.data td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} table.data td.mono{font-family:var(--font-mono); font-size:14px; white-space:nowrap} table.data .dim{color:var(--faint); font-size:14px} .empty{padding:var(--s8) var(--s5); text-align:center; color:var(--muted)} /* ---------- ป้ายสถานะ ---------- */ .tag{display:inline-block; font-size:14px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); white-space:nowrap} .tag.ok{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok)} .tag.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)} .tag.crit{background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit)} .tag.info{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark)} /* ---------- ฟอร์ม ---------- */ .formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s4)} .formgrid .wide{grid-column:1/-1} .fld label{display:block; font-size:15px; color:var(--muted); margin-bottom:var(--s1)} .fld .hint{font-size:14px; color:var(--faint); margin:var(--s1) 0 0} .actions{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line)} .actions .right{margin-left:auto} /* ---------- หน้าล็อกอิน ---------- */ .login-page{min-height:100vh; display:grid; place-items:center; padding:var(--s5); background:var(--head-bg)} .login-box{width:100%; max-width:420px; background:var(--surface); border-radius:var(--radius); padding:var(--s8) var(--s6); box-shadow:0 10px 40px rgba(0,0,0,.28)} .login-box h1{margin:0 0 var(--s2); font-size:22px} .login-box .sub{margin:0 0 var(--s6); color:var(--muted); font-size:15px} .login-box .fld + .fld{margin-top:var(--s4)} .login-box .btn{width:100%; margin-top:var(--s6)} /* ---------- ตัวออกแบบใบเกียรติบัตร ---------- */ .designer{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--s5); align-items:start} @media (max-width:1100px){ .designer{grid-template-columns:1fr} } .canvas{position:relative; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden} .canvas img{display:block; width:100%; height:auto} .canvas .box{position:absolute; border:1px dashed rgba(11,79,138,.75); background:rgba(11,79,138,.07); cursor:move} .canvas .box.sel{border:2px solid var(--accent); background:rgba(11,79,138,.16)} .canvas .box .lbl{position:absolute; top:-19px; left:-1px; font-size:11px; line-height:1.5; background:var(--accent); color:#fff; padding:0 6px; border-radius:3px; white-space:nowrap; pointer-events:none} .fieldlist{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} .fieldlist button.pick{display:flex; gap:var(--s2); align-items:center; width:100%; appearance:none; border:0; border-bottom:1px solid var(--line); background:var(--surface); font:inherit; font-size:15px; text-align:left; padding:10px var(--s4); cursor:pointer} .fieldlist button.pick:hover{background:var(--surface-2)} .fieldlist button.pick.on{background:var(--accent-soft); color:var(--accent-dark); font-weight:500} .fieldlist button.pick .xy{margin-left:auto; font-family:var(--font-mono); font-size:13px; color:var(--faint)} .props{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); margin-top:var(--s4)} .props .row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)} .props label{font-size:14px} .varlist{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s2)} .varlist button{appearance:none; border:1px solid var(--line); background:var(--surface-2); border-radius:999px; font:inherit; font-size:13px; padding:3px 9px; cursor:pointer; font-family:var(--font-mono); color:var(--muted)} .varlist button:hover{border-color:var(--accent); color:var(--accent-dark)} /* ---------- กล่องแก้ไข ---------- */ dialog{border:1px solid var(--line-strong); border-radius:var(--radius); padding:0; max-width:640px; width:calc(100% - 32px); background:var(--surface); color:var(--ink)} dialog::backdrop{background:rgba(11,34,69,.5)} dialog h3{margin-top:0} /* ปุ่มที่กดเปิดดูเลขบัตรแล้ว — เปลี่ยนหน้าตาให้เห็นชัดว่าเป็นค่าจริง ไม่ใช่ปุ่ม */ .btn.shown{background:var(--brass-bg); border-color:var(--brass-line); color:var(--brass); font-family:var(--font-mono); cursor:default} .btn.shown:hover{background:var(--brass-bg); color:var(--brass)} /* .seg ใช้กับทั้ง