/* «مشاهده به‌جای کاربر» (view-as.js) */
:root{ --va-warn:#c98a00; --va-warn-bg:#fff6dc; --va-warn-ink:#5a3e00; --va-h:0px; }

/* admin entry button in the top bar, next to the bell */
.va-top-btn{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22); color:#fff; transition:.15s background,.15s border-color;}
.va-top-btn:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4);}
.va-top-btn svg{width:18px; height:18px;}

/* the banner while viewing */
.va-bar{position:sticky; top:0; z-index:12; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  padding:8px 20px; background:var(--va-warn-bg); color:var(--va-warn-ink); border-bottom:2px solid var(--va-warn); font-size:13px;}
body.kp-viewas header.topbar{top:var(--va-h);}
body.kp-viewas::after{content:''; position:fixed; inset:0; border:3px solid var(--va-warn); pointer-events:none; z-index:9999;}
.va-ic svg{width:20px; height:20px; display:block; color:var(--va-warn);}
.va-txt{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; min-width:0;}
.va-txt b{font-weight:700; color:#3d2a00;}
.va-meta{font-size:12px; opacity:.85;}
.va-ro{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--va-warn); color:#fff;}
.va-left{font-size:12px; font-variant-numeric:tabular-nums;}
.va-left.va-soon{color:#b3261e; font-weight:700;}
.va-actions{display:flex; gap:6px; margin-inline-start:auto; flex-wrap:wrap;}
.va-btn{font:inherit; font-size:12.5px; font-weight:600; min-height:34px; padding:6px 12px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(90,62,0,.28); background:#fff; color:var(--va-warn-ink);}
.va-btn:hover{background:#fffaf0;}
.va-btn.va-exit{background:var(--navy); border-color:var(--navy); color:#fff;}
.va-btn.va-exit:hover{background:var(--navy-2);}
@media (max-width:700px){
  .va-bar{padding:8px 12px; font-size:12.5px;}
  .va-actions{width:100%; margin:0;}
  .va-actions .va-btn{flex:1; min-height:40px;}
}

/* dialogs */
.va-overlay{position:fixed; inset:0; z-index:160; background:rgba(16,20,40,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow-y:auto;}
.va-dialog{width:100%; max-width:640px; background:var(--panel,#fff); border-radius:16px; box-shadow:0 20px 60px -20px rgba(16,20,40,.45); overflow:hidden;}
.va-dh{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line);}
.va-dh h3{margin:0; font-size:16px; color:var(--navy);}
.va-x{border:0; background:none; cursor:pointer; color:var(--text-dim); width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;}
.va-x:hover{background:var(--bg);}
.va-db{padding:16px 20px 20px;}
.va-lead{margin:0 0 14px; font-size:13px; line-height:1.9; color:var(--text-dim);}
.va-filters{display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:12px;}
.va-filters input,.va-filters select{font:inherit; font-size:14px; min-height:42px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; color:var(--text); min-width:0;}
.va-filters input{grid-column:1 / -1;}
.va-seg{display:flex; gap:4px; padding:3px; background:var(--bg); border-radius:10px; overflow-x:auto;}
.va-seg button{font:inherit; font-size:13px; font-weight:600; border:0; background:none; color:var(--text-dim); padding:7px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; min-height:36px;}
.va-seg button.on{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(43,40,115,.12);}
.va-sec{font-size:12px; font-weight:700; color:var(--text-dim); margin:14px 0 8px;}
.va-list{display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto;}
.va-row{display:grid; grid-template-columns:1fr auto; gap:2px 12px; text-align:right; font:inherit; width:100%; cursor:pointer;
  border:1px solid var(--line); background:#fff; border-radius:11px; padding:10px 14px;}
.va-row:hover:not(:disabled){border-color:var(--steel); background:var(--steel-tint);}
.va-row:disabled{cursor:default; opacity:.6;}
.va-r1{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text);}
.va-r2{grid-column:1; font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.va-r2 .mono{direction:ltr; unicode-bidi:embed;}
.va-r3{grid-column:2; grid-row:1 / span 2; align-self:center; font-size:11.5px; color:var(--text-dim); white-space:nowrap;}
.va-pill{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--steel-tint); color:var(--steel);}
.va-pill.c{background:#e6f7fb; color:#1a8caf;}
.va-pill.s{background:#eef7f1; color:#2f8f5b;}
.va-empty{padding:18px; text-align:center; font-size:13px; color:var(--text-dim);}
.va-chips{display:flex; flex-wrap:wrap; gap:6px;}
.va-chip{font:inherit; font-size:12.5px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text);}
button.va-chip{cursor:pointer;}
button.va-chip:hover:not(:disabled){border-color:var(--steel); color:var(--steel);}
.va-chip.on{background:var(--steel-tint); border-color:transparent; color:var(--navy);}
.va-chip.off{color:var(--text-dim); background:var(--bg); border-color:transparent;}
.va-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; margin:0 0 6px;}
.va-facts div{background:var(--bg); border-radius:10px; padding:9px 12px;}
.va-facts dt{font-size:11.5px; color:var(--text-dim); margin-bottom:2px;}
.va-facts dd{margin:0; font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere;}
.va-grp{margin-bottom:10px;}
.va-gl{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;}
.va-hidden{margin-top:12px;}
.va-hidden summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px;}
.va-note{margin:14px 0 0; font-size:12px; line-height:1.8; color:var(--text-dim);}
@media (max-width:560px){
  .va-overlay{padding:0; align-items:stretch;}
  .va-dialog{border-radius:0; min-height:100%;}
  .va-filters{grid-template-columns:1fr;}
  .va-row{grid-template-columns:1fr;}
  .va-r3{grid-column:1; grid-row:auto;}
  .va-list{max-height:none;}
}

/* «ترک کار» (staff-offboarding.js) — shares the dialog styles above */
.off-filter{display:flex; gap:4px; padding:3px; background:var(--bg); border-radius:10px; width:max-content; max-width:100%; margin-bottom:12px; overflow-x:auto;}
.off-filter button{font:inherit; font-size:13px; font-weight:600; border:0; background:none; color:var(--text-dim); padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; min-height:36px;}
.off-filter button span{font-weight:400; opacity:.8;}
.off-filter button.on{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(43,40,115,.12);}
tr.off-row td{color:var(--text-dim);}
.off-badge{display:inline-block; margin-inline-start:8px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#f3e9e7; color:#a0402c; white-space:nowrap;}
.off-field{display:flex; flex-direction:column; gap:6px; margin:12px 0 0;}
.off-field span{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.off-field input,.off-field select,.off-field textarea{font:inherit; font-size:14px; min-height:42px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; color:var(--text); width:100%; box-sizing:border-box;}
.off-items{width:100%; border-collapse:collapse; font-size:13px;}
.off-items td{padding:8px 4px; border-bottom:1px solid var(--line); text-align:right;}
.off-items td.n{text-align:left; white-space:nowrap; font-weight:700; color:var(--navy); width:90px;}
.off-items tr.zero td{color:var(--text-dim); font-weight:400;}
.off-sub{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
.off-warn{margin:8px 0 0; font-size:12.5px; color:#a0402c;}
.off-hint{margin:6px 0 0; font-size:12px; color:var(--text-dim); min-height:0;}
.off-hint:empty{display:none;}
.off-what{margin-top:14px; padding:10px 14px; background:var(--bg); border-radius:10px; font-size:12.5px; line-height:1.9;}
.off-what ul{margin:4px 0 0; padding-inline-start:18px;}
.off-err{color:var(--danger); font-size:13px; margin:10px 0 0;}
.off-err:empty{display:none;}
.off-actions{display:flex; gap:8px; justify-content:flex-start; margin-top:14px;}
.rc-badge{display:inline-block; margin-inline-start:6px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#fff4dc; color:#8a5a00; white-space:nowrap;}
.rc-box{margin-top:12px; padding:10px 12px; border:1px solid #f0d9a8; background:#fffaf0; border-radius:10px; font-size:13px;}
.rc-check{display:flex; gap:8px; align-items:flex-start; cursor:pointer; line-height:1.8;}
.rc-check input{margin-top:6px; width:16px; height:16px; flex:none;}
.rc-sub{font-size:12px; color:var(--text-dim); margin-top:6px; line-height:1.8;}
.rc-note{margin:12px 0 0; padding:9px 12px; background:#fffaf0; border:1px solid #f0d9a8; border-radius:10px; font-size:12.5px; line-height:1.9;}
.off-go{background:#a0402c !important; border-color:#a0402c !important; color:#fff !important;}