/* V35.7 TARGETED — Employee Management visual parity with Message Management.
 * Scope is strictly #usersPane inside #adminModal.
 * No menu / bottom-navigation / chat selectors are used.
 */

/* Match the message-management table surface and spacing. */
#adminModal #usersPane .table-responsive{
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  border-radius:10px !important;
  -webkit-overflow-scrolling:touch !important;
}
#adminModal #usersPane .admin-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
  border:1px solid var(--border-color) !important;
  border-radius:10px !important;
  background:var(--bg-card,#fff) !important;
}
#adminModal #usersPane .admin-table th{
  padding:11px 12px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.45px !important;
  text-transform:uppercase !important;
  color:var(--text-sub) !important;
  background:rgba(148,163,184,.07) !important;
  white-space:nowrap !important;
}
#adminModal #usersPane .admin-table td{
  padding:11px 12px !important;
  vertical-align:middle !important;
  border-bottom:1px solid var(--border-color) !important;
  background:transparent !important;
}
#adminModal #usersPane .admin-table tbody tr:last-child td{border-bottom:0 !important;}
#adminModal #usersPane .admin-table tbody tr:hover td{background:rgba(148,163,184,.055) !important;}

/* Keep employee role badges visually aligned with the message status treatment. */
#adminModal #usersPane .admin-table .badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:52px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
#adminModal #usersPane .admin-table .badge.user{
  color:#047857 !important;
  background:#d1fae5 !important;
  border:1px solid #34d399 !important;
}
#adminModal #usersPane .admin-table .badge.admin{
  color:#1d4ed8 !important;
  background:#dbeafe !important;
  border:1px solid #60a5fa !important;
}
:root[data-theme="dark"] #adminModal #usersPane .admin-table .badge.user,
body[data-theme="dark"] #adminModal #usersPane .admin-table .badge.user{
  color:#6ee7b7 !important;
  background:#052e2b !important;
  border-color:#10b981 !important;
}
:root[data-theme="dark"] #adminModal #usersPane .admin-table .badge.admin,
body[data-theme="dark"] #adminModal #usersPane .admin-table .badge.admin{
  color:#93c5fd !important;
  background:#172554 !important;
  border-color:#3b82f6 !important;
}

/* Employee actions use the same compact, semantic button language as messages:
   avatar=green, edit=blue, delete=red. */
#adminModal #usersPane .admin-user-actions{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
#adminModal #usersPane #adminUserTable .action-btn,
#adminModal #usersPane #adminUserTable .kick-btn{
  width:34px !important;
  height:32px !important;
  min-width:34px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:8px !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid !important;
  font-size:0 !important;
  line-height:1 !important;
  cursor:pointer !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease !important;
}

/* Avatar — green, matching message visibility/positive action family. */
#adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1){
  background:#d1fae5 !important;
  color:#047857 !important;
  border-color:#34d399 !important;
}
#adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1)::before{
  background:#047857 !important;
}

/* Edit — same blue family as message Edit. */
#adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2){
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border-color:#60a5fa !important;
}
#adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2)::before{
  background:#1d4ed8 !important;
}

/* Delete — same red family as message Delete. */
#adminModal #usersPane #adminUserTable .kick-btn{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  border-color:#f87171 !important;
}
#adminModal #usersPane #adminUserTable .kick-btn::before{
  background:#b91c1c !important;
}

/* Dark mode: same dark-surface + bright semantic accents used by message actions. */
:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1),
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1){
  background:#052e2b !important;color:#6ee7b7 !important;border-color:#10b981 !important;
}
:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1)::before,
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(1)::before{background:#6ee7b7 !important;}

:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2),
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2){
  background:#172554 !important;color:#93c5fd !important;border-color:#3b82f6 !important;
}
:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2)::before,
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .action-btn:nth-of-type(2)::before{background:#93c5fd !important;}

:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .kick-btn,
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .kick-btn{
  background:#450a0a !important;color:#fca5a5 !important;border-color:#ef4444 !important;
}
:root[data-theme="dark"] #adminModal #usersPane #adminUserTable .kick-btn::before,
body[data-theme="dark"] #adminModal #usersPane #adminUserTable .kick-btn::before{background:#fca5a5 !important;}

#adminModal #usersPane #adminUserTable .action-btn:hover,
#adminModal #usersPane #adminUserTable .kick-btn:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.04) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.14) !important;
}
#adminModal #usersPane #adminUserTable .action-btn:focus-visible,
#adminModal #usersPane #adminUserTable .kick-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary,#25D366) 30%,transparent) !important;
  outline-offset:2px !important;
}

/* The Create button follows the same blue action family as Edit. */
#adminModal #usersPane .panel-section-box .add-btn{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border-color:#60a5fa !important;
  font-weight:800 !important;
}
:root[data-theme="dark"] #adminModal #usersPane .panel-section-box .add-btn,
body[data-theme="dark"] #adminModal #usersPane .panel-section-box .add-btn{
  background:#172554 !important;
  color:#93c5fd !important;
  border-color:#3b82f6 !important;
}

/* Mobile/tablet: keep the same visual density and make actions easy to tap. */
@media (max-width:1024px){
  #adminModal #usersPane .admin-table th,
  #adminModal #usersPane .admin-table td{padding:9px 10px !important;}
  #adminModal #usersPane #adminUserTable .action-btn,
  #adminModal #usersPane #adminUserTable .kick-btn{
    width:36px !important;height:34px !important;min-width:36px !important;min-height:34px !important;
  }
}

@media (max-width:767px){
  #adminModal #usersPane .admin-table{min-width:620px !important;}
  #adminModal #usersPane .admin-user-actions{gap:6px !important;}
  #adminModal #usersPane #adminUserTable .action-btn,
  #adminModal #usersPane #adminUserTable .kick-btn{
    width:38px !important;height:36px !important;min-width:38px !important;min-height:36px !important;
  }
}