/* ATHAR Production — المستخدمين / users (desktop #tab-departments) */

html.athar-staging-redesign.mr-desktop-ui .main:has(#tab-departments.active),
html.athar-staging-redesign.mr-desktop-ui #appWrap .main:has(#tab-departments.active) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui .content:has(#tab-departments.active),
html.athar-staging-redesign.mr-desktop-ui .main:has(#tab-departments.active) .content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui #appWrap #tab-departments.tab-content.active {
  padding: 24px 24px 16px !important;
  box-sizing: border-box !important;
}
html.athar-staging-redesign.mr-desktop-ui #tab-departments > .panel,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .wf-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.athar-staging-redesign.mr-desktop-ui #tab-departments .wf-panel-intro,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-meta-row,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .wf-count {
  display: none !important;
}

/* Keep add/import/export visible (staging hid the whole desk IO group) */
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-io-group--desk {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

@keyframes atharRdCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.rd-ticket-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text3);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  flex: 1 1 auto;
  min-height: 0;
}
.rd-ticket-empty i {
  display: block;
  font-size: 22px;
  margin-bottom: 10px;
  opacity: 0.7;
}

/* ── desktop toolbar + host ── */

html.athar-staging-redesign.mr-desktop-ui #tab-departments.tab-content.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .wf-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments #usersDeskHost {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments #usersList {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-controls {
  flex-shrink: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-toolbar,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 0 14px !important;
}

/* نفس شريط بحث صفحة الجداول */
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .wf-search,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .figma-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 320px !important;
  width: 320px !important;
  flex: 0 0 320px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  background: var(--searchFill) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  direction: rtl !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .wf-search::before,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .figma-search-wrap::before {
  content: "\f002" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: var(--text3) !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .wf-search .figma-search-btn,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .figma-search-wrap .figma-search-btn {
  display: none !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .wf-search .figma-search-input,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .figma-search-wrap .figma-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: start !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .users-filters-toolbar .figma-search-input::placeholder {
  font-size: 12.5px !important;
  color: var(--text3) !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
}

/* ── users desktop table ── */

html.athar-staging-redesign.mr-desktop-ui #tab-departments #usersDeskHost.wf-desk-tickets-host,
html.athar-staging-redesign.mr-desktop-ui #tab-departments .mr-users-list-wrap.wf-table-wrap,
html.athar-staging-redesign.mr-desktop-ui #tab-departments #usersList.rd-usr-desk {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .mr-users-list-wrap.wf-table-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments #usersList.rd-usr-desk {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui #tab-departments .rd-desk-table--users {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  isolation: isolate !important;
  -webkit-overflow-scrolling: touch;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table:not(.rd-desk-table--users) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__head,
html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(120px, 0.95fr) minmax(0, 1.2fr) 72px !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__head > *,
html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__row > * {
  min-width: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__head > *:last-child,
html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__row > *:last-child {
  justify-self: end !important;
  overflow: visible !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-sort {
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font: inherit !important;
  color: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-sort i {
  font-size: 9px !important;
  color: var(--text3) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-sort.is-active i {
  color: var(--text2) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table__head {
  background: var(--surface2) !important;
  background-clip: padding-box !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users > .rd-desk-table__head {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  flex-shrink: 0 !important;
  background: var(--surface2) !important;
  border-start-start-radius: 15px !important;
  border-start-end-radius: 15px !important;
  box-shadow: 0 1px 0 var(--border) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table__row {
  border-top: 1px solid var(--border) !important;
  animation: atharRdCardIn .35s ease both;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-user__av {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--surface2) !important;
  color: var(--text2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-user__dot {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--text3) !important;
  border: 2px solid var(--surface) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-user__dot.is-on {
  background: var(--success) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-user__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-role {
  display: inline-flex !important;
  max-width: 100% !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--rc, var(--gold)) 14%, transparent) !important;
  color: var(--rc, var(--gold)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  color: var(--text2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-muted {
  font-size: 12px !important;
  color: var(--text2) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-clip {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__head > *:nth-child(5),
html.athar-staging-redesign.mr-desktop-ui .rd-desk-table--users .rd-desk-table__row > .rd-desk-phone {
  text-align: start !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-phone {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  color: var(--text2) !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-phone__val {
  display: inline-block !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-variant-numeric: tabular-nums !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-acts {
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-act {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text2) !important;
  cursor: pointer !important;
}

html.athar-staging-redesign.mr-desktop-ui .rd-desk-act--danger {
  color: var(--danger) !important;
}

/* ── optional mobile rd-usr cards (inactive until mobile redesign) ── */

.rd-usr {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  animation: atharRdCardIn 0.4s ease both;
  direction: rtl;
}
.rd-usr__role {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--rc, #8e8e93) 14%, transparent);
  color: var(--rc, #8e8e93);
  z-index: 1;
}
.rd-usr__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
}
.rd-usr__av-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.rd-usr__av-fallback,
.rd-usr__av-media {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface2);
  color: var(--text2);
  font-size: 14px;
  font-weight: 700;
}
.rd-usr__av-media img,
.rd-usr__av-media .profile-hero__default-svg,
.rd-usr__av-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-usr__dot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text3);
  border: 2px solid var(--surface);
}
.rd-usr__dot.is-on { background: var(--success); }
.rd-usr__body { flex: 1; min-width: 0; }
.rd-usr__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.rd-usr__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 9px;
}
.rd-usr__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text2);
  min-width: 0;
}
.rd-usr__row i {
  width: 13px;
  color: var(--text3);
  font-size: 11px;
  flex-shrink: 0;
  text-align: center;
}
.rd-usr__row--clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-usr__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rd-usr__btn {
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rd-usr__btn i { font-size: 10px; }
.rd-usr__btn--danger { color: var(--danger); }
.rd-usr__btn:active { opacity: 0.88; }