/* ==========================================================================
   M15 เจ้าหน้าที่ (prefix .m15-) — STF-01 รายชื่อ · STF-02/03 ฟอร์ม · STF-04 รายละเอียด · STF-05 ตารางสิทธิ์
   Tokens only (tokens.css); layout primitives come from base/components.
   ========================================================================== */

/* ---------- shared: permission cells R / W / X / — ---------- */
.m15-perms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; vertical-align: middle; }
.m15-perm {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px;
  border: 1px solid var(--rv-border); border-radius: var(--rv-radius-control); background: var(--rv-surface);
  font-size: var(--rv-fs-small); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
}
.m15-perm--r { color: var(--rv-info); background: var(--rv-info-bg); border-color: var(--rv-info-border); }
.m15-perm--w { color: var(--rv-success); background: var(--rv-success-bg); border-color: var(--rv-success-border); }
.m15-perm--x { color: var(--rv-violet); background: var(--rv-violet-bg); border-color: var(--rv-violet-border); }
.m15-perms.is-none { color: var(--rv-text-muted); font-weight: 600; min-width: 22px; justify-content: center; }
.m15-cellnote { display: block; margin-top: 2px; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-warning); }
.m15-chiplist { display: flex; flex-wrap: wrap; gap: var(--rv-space-1); margin-top: var(--rv-space-1); }
.m15-kv .rv-kv__row { grid-template-columns: 140px minmax(0, 1fr); }

/* ---------- STF-01 list ---------- */
.m15-kpi .rv-stat.is-selected { border-color: var(--rv-primary-700); background: var(--rv-selected-bg); box-shadow: inset 0 0 0 1px var(--rv-primary-700); }
.m15-who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-2); min-width: 0; }
.m15-who > .rv-cell { min-width: 0; }
.m15-me { flex: 0 0 auto; }
.m15-reason { max-width: 220px; overflow-wrap: anywhere; }

/* ---------- STF-02/03 form ---------- */
.m15-form { display: flex; flex-direction: column; gap: var(--rv-space-4); min-width: 0; }
.m15-avatarfield .rv-imgf__body { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.m15-dname { margin: 0; padding: var(--rv-space-2) var(--rv-space-3); border-radius: var(--rv-radius-control); background: var(--rv-surface-subtle); overflow-wrap: anywhere; }
.m15-roles .rv-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-space-2); }
.m15-roles .rv-radio {
  align-items: flex-start; min-height: 100%; padding: var(--rv-space-3); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-card);
  background: var(--rv-surface); transition: border-color var(--rv-motion-fast) var(--rv-motion-easing), background-color var(--rv-motion-fast) var(--rv-motion-easing);
}
.m15-roles .rv-radio:hover { border-color: var(--rv-neutral-600); }
.m15-roles .rv-radio:has(input:checked) { border-color: var(--rv-primary-700); background: var(--rv-selected-bg); box-shadow: inset 0 0 0 1px var(--rv-primary-700); }
.m15-roles .rv-radio:has(input:disabled) { background: var(--rv-neutral-50); }
.m15-roles .rv-radio > span { font-weight: 500; }
.m15-roles .rv-option__help { margin-top: var(--rv-space-1); font-weight: 400; line-height: var(--rv-lh-small); }
.m15-rolesum { display: flex; flex-direction: column; gap: var(--rv-space-3); }
.m15-rolesum__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--rv-space-2); }
.m15-rolesum__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.m15-rolesum__list > li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rv-space-2); padding: 6px 0; border-bottom: 1px solid var(--rv-divider); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m15-rolesum__list > li:last-child { border-bottom: 0; }
.m15-rolesum__list > li > :last-child { flex: 0 0 auto; text-align: right; max-width: 55%; }
.m15-rolesum__label { min-width: 0; }

/* ---------- dialogs: role delta, own-account warning, invite ---------- */
.m15-dlg-who { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--rv-space-2); padding: var(--rv-space-2) var(--rv-space-3); border: 1px solid var(--rv-divider); border-radius: var(--rv-radius-control); background: var(--rv-surface-subtle); margin-bottom: var(--rv-space-3); }
.m15-delta { display: flex; flex-direction: column; gap: var(--rv-space-3); margin-bottom: var(--rv-space-3); }
.m15-delta__menus { display: flex; align-items: center; gap: var(--rv-space-2); margin: 0; padding: var(--rv-space-2) var(--rv-space-3); border-radius: var(--rv-radius-control); background: var(--rv-primary-50); color: var(--rv-primary-900); }
.m15-delta__wrap { max-height: 260px; }
.m15-delta__table th[scope="row"] { font-weight: 500; min-width: 160px; }
.m15-delta__chg { white-space: nowrap; }
.m15-dl { display: inline-flex; align-items: center; margin: 0 4px 0 0; padding: 0 6px; min-height: 22px; border-radius: var(--rv-radius-pill); font-size: var(--rv-fs-small); font-weight: 600; }
.m15-dl--gain { color: var(--rv-success); background: var(--rv-success-bg); }
.m15-dl--lose { color: var(--rv-danger); background: var(--rv-danger-bg); }
.m15-delta__list { display: flex; flex-direction: column; gap: 2px; }
.m15-selfwarn { display: flex; flex-direction: column; gap: var(--rv-space-2); margin-bottom: var(--rv-space-3); }
.m15-selfwarn__check { font-weight: 500; }
.m15-invite .rv-alert { margin: 0; }
.m15-mail { border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); overflow: hidden; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m15-mail__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--rv-space-2); padding: 6px var(--rv-space-3); border-bottom: 1px solid var(--rv-divider); background: var(--rv-surface-subtle); }
.m15-mail__row > span { color: var(--rv-text-muted); }
.m15-mail__row > strong { font-weight: 500; overflow-wrap: anywhere; }
.m15-mail__body { padding: var(--rv-space-3); }
.m15-pw { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px dashed var(--rv-warning-border); border-radius: var(--rv-radius-card); background: var(--rv-warning-bg); }
.m15-pw__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-space-2); }
.m15-pw__code { flex: 1 1 200px; min-height: 40px; display: inline-flex; align-items: center; padding: var(--rv-space-2) var(--rv-space-3); background: var(--rv-surface); border: 1px solid var(--rv-border); font-size: var(--rv-fs-section); line-height: var(--rv-lh-section); letter-spacing: .08em; user-select: all; overflow-wrap: anywhere; }
.m15-pw__note { display: flex; align-items: flex-start; gap: var(--rv-space-1); margin: 0; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-warning); font-weight: 500; }
.m15-pw__note .rv-icon, .m15-pw__note svg { margin-top: 2px; flex: 0 0 auto; }

/* ---------- STF-04 detail ---------- */
.m15-dhead .rv-dhead__body { gap: var(--rv-space-3); }
.m15-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-space-3) var(--rv-space-4); margin: 0; }
.m15-facts > div { min-width: 0; }
.m15-facts dt { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.m15-facts dd { margin: 2px 0 0; min-width: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); overflow-wrap: anywhere; }
.m15-tabbody { min-width: 0; }
.m15-capstable th[scope="row"] { font-weight: 400; min-width: 200px; }
.m15-capstable tr.is-none th, .m15-capstable tr.is-none td { color: var(--rv-text-muted); }
.m15-menugroups { display: flex; flex-direction: column; gap: var(--rv-space-3); }
.m15-menugroup__title { margin: 0 0 var(--rv-space-1); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); font-weight: 600; color: var(--rv-text-secondary); }
.m15-menulist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.m15-menulist > li { display: flex; align-items: center; gap: var(--rv-space-2); min-height: 28px; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-primary); }
.m15-menulist > li svg { color: var(--rv-primary-700); }
.m15-work { display: flex; flex-direction: column; gap: var(--rv-space-1); }
.m15-work__chips { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); }
.m15-workchip { min-height: 32px; padding: 0 var(--rv-space-3); border-color: var(--rv-border); background: var(--rv-surface); }
.m15-workchip:hover { border-color: var(--rv-primary-700); background: var(--rv-primary-50); color: var(--rv-primary-900); }
.m15-workchip:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.m15-workchip strong { margin-left: var(--rv-space-1); }
.m15-summary { max-width: 420px; overflow-wrap: anywhere; }

/* ---------- STF-05 matrix ---------- */
.m15-rolecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-space-3); }
.m15-rolecard { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); background: var(--rv-surface); min-width: 0; }
.m15-rolecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-2); }
.m15-rolecard__n strong { font-size: var(--rv-fs-stat-sm); line-height: var(--rv-lh-stat-sm); font-weight: 500; }
.m15-rolecard p { margin: 0; color: var(--rv-text-secondary); }
.m15-legend { display: flex; flex-wrap: wrap; gap: var(--rv-space-2) var(--rv-space-4); padding: 0 var(--rv-space-4) var(--rv-space-3); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.m15-legend__item { display: inline-flex; align-items: center; gap: var(--rv-space-1); }
.m15-capstoggle { flex-wrap: nowrap; }
.m15-mtable th[scope="row"] { min-width: 240px; font-weight: 400; }
.m15-mtable__label { font-weight: 500; }
.m15-mtable td { min-width: 120px; }
.m15-capkeys { display: none; margin-top: var(--rv-space-1); gap: 4px; flex-wrap: wrap; }
.m15-matrix.is-caps .m15-capkeys { display: flex; }
.m15-mcards { list-style: none; margin: 0; padding: 0 var(--rv-space-3) var(--rv-space-3); display: flex; flex-direction: column; gap: var(--rv-space-2); }
.m15-mcard { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-card); }
.m15-mcard p { margin: 0; }
.m15-mcard__title { font-weight: 500; }
.m15-mcard__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-space-2); margin: 0; }
.m15-mcard__roles dt { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.m15-mcard__roles dd { margin: 2px 0 0; min-width: 0; }
.m15-navtable th[scope="row"] { font-weight: 400; }
.m15-navtable__group th { background: var(--rv-surface-subtle); font-weight: 600; font-size: var(--rv-fs-small); color: var(--rv-text-secondary); }
.m15-navtable tfoot th, .m15-navtable tfoot td { border-top: 1px solid var(--rv-border); background: var(--rv-surface-subtle); }
.m15-navitem { display: inline-flex; align-items: center; gap: var(--rv-space-2); }
.m15-navitem svg { color: var(--rv-primary-700); }
.m15-yes { display: inline-flex; color: var(--rv-success); }
.m15-no { color: var(--rv-text-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .m15-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m15-roles .rv-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .m15-facts { grid-template-columns: minmax(0, 1fr); }
  .m15-rolecards { grid-template-columns: minmax(0, 1fr); }
  .m15-avatarfield .rv-imgf__body { grid-template-columns: minmax(0, 1fr); }
  .m15-rolesum__list > li { flex-direction: column; }
  .m15-rolesum__list > li > :last-child { max-width: none; text-align: left; }
  .m15-mcard__roles { grid-template-columns: minmax(0, 1fr); }
  .m15-mcard__roles > div { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rv-space-2); }
  .m15-mcard__roles dd { margin: 0; text-align: right; }
  .m15-kv .rv-kv__row { grid-template-columns: 112px minmax(0, 1fr); }
  .m15-legend { padding: 0 var(--rv-space-3) var(--rv-space-3); }
  .m15-mtable td, .m15-mtable th[scope="row"] { min-width: 0; }
  .m15-reason { max-width: none; }
}
@media (pointer: coarse) {
  .m15-workchip { min-height: var(--rv-touch); }
  .m15-roles .rv-radio { min-height: var(--rv-touch); }
}