/* หน้าพนักงาน (self-service) — ใช้ตัวแปรสีชุดเดียวกับแอพ */
body:has(#staffApp) .m-bottom-nav, body:has(#staffApp) .ai-fab{display:none !important;}
body:has(#staffApp){padding:0;}
#staffApp{max-width:720px; margin:0 auto; padding:0 12px calc(30px + env(safe-area-inset-bottom)); font-size:16px;}
#staffApp .sp-top{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 4px 10px; background:var(--bg-top, var(--surface)); border-bottom:1px solid var(--border);}
#staffApp .sp-av{width:42px; height:42px; font-size:18px;}
#staffApp .sp-who{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3;}
#staffApp .sp-who b{font-size:1.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#staffApp .sp-who span{font-size:.8em; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#staffApp .sp-tabs{display:flex; gap:6px; margin:12px 0; overflow-x:auto; scrollbar-width:none;}
#staffApp .sp-tabs button{flex:1 0 auto; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-soft); padding:9px 14px; font:inherit; font-size:.92em; font-weight:700; cursor:pointer;}
#staffApp .sp-tabs button.on{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
#staffApp .sp-h{font-size:.95em; margin:16px 2px 8px; color:var(--text-soft);}
#staffApp .panel{padding:12px 14px; border-radius:14px; box-shadow:none;}
#staffApp .sp-bal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
#staffApp .sp-balc{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px;}
#staffApp .sp-balc b{font-size:1.8em; line-height:1.1; color:var(--accent);}
#staffApp .sp-bl{font-size:.85em; font-weight:700;} #staffApp .sp-bs{font-size:.72em; color:var(--text-soft);}
#staffApp .sp-wide{width:100%; margin-top:12px; min-height:46px; font-size:1em;}
#staffApp .sp-list{display:flex; flex-direction:column; padding:4px 14px;}
#staffApp .sp-item{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); text-align:left; background:none; border-left:0; border-right:0; border-top:0; font:inherit; color:inherit; width:100%;}
#staffApp .sp-item:last-child{border-bottom:0;}
#staffApp .sp-slip{cursor:pointer;}
#staffApp .sp-it-main{display:flex; flex-direction:column; min-width:0; gap:1px;} #staffApp .sp-it-main span{font-size:.85em; color:var(--text-soft);}
#staffApp .sp-sub{font-size:.78em !important; color:var(--text-soft);}
#staffApp .sp-it-side{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto;}
#staffApp .sp-net{font-size:1.05em;}
#staffApp .sp-kv{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border);}
#staffApp .sp-kv:last-child{border-bottom:0;} #staffApp .sp-kv span{color:var(--text-soft); font-size:.9em;} #staffApp .sp-kv b{text-align:right;}
#staffApp .sp-note{font-size:.85em; color:var(--text-soft); margin:8px 2px;}
#staffApp .sp-foot{font-size:.75em; color:var(--text-soft); text-align:center; margin-top:22px;}
.sp-modal .sp-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.sp-modal .sp-half{display:inline-flex; gap:8px; align-items:center; margin:2px 0 8px;}
.sp-modal .sp-warn{color:var(--held, #b7791f); font-size:.88em; min-height:1em;}
.sp-modal input, .sp-modal select, .sp-modal textarea{font-size:16px !important; width:100%;}
.sp-modal .sp-slipdoc{background:#fff; color:#222; border-radius:8px; padding:10px; overflow:auto;}
.sp-toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#333; color:#fff; padding:10px 16px; border-radius:999px; z-index:3000; font-size:14px; max-width:90vw; text-align:center;}
@media (max-width:640px){
  .sp-modal.modal-backdrop{padding:0; place-items:end stretch;}
  .sp-modal .modal-box{max-width:100% !important; width:100%; max-height:94dvh; border-radius:16px 16px 0 0; padding:16px 14px calc(14px + env(safe-area-inset-bottom));}
}
@media print{
  body.sp-printing > *{display:none !important;}
  body.sp-printing > .sp-modal{display:block !important; position:static; background:none; padding:0;}
  body.sp-printing .sp-modal .modal-box{box-shadow:none; border:0; max-height:none; overflow:visible; padding:0;}
  body.sp-printing .sp-modal .form-actions{display:none !important;}
}