.panel[data-view="user-management"]{
  overflow:hidden;
  container-type:inline-size;
}

.taif-users{
  --users-line:rgba(15,23,42,.08);
  --users-line-strong:rgba(148,163,184,.24);
  --users-shadow:0 14px 30px rgba(15,23,42,.075);
  --users-soft-shadow:0 10px 22px rgba(15,23,42,.055);
  --users-surface:rgba(255,255,255,.94);
  --users-surface-soft:rgba(248,250,252,.92);
  --users-primary:#2563eb;
  --users-primary-strong:#1d4ed8;
  --users-ink:#0f172a;
  --users-muted:#64748b;
  --users-control-height:38px;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px;
  direction:rtl;
  color:var(--users-ink);
  position:relative;
  z-index:1;
  overflow:hidden;
  font-family:var(--taif-font-family, inherit);
}

.taif-users svg{
  display:block;
  width:1em;
  height:1em;
}

.taif-users__toolbar{
  flex:0 0 auto;
  min-height:54px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid var(--users-line);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.90));
  box-shadow:var(--users-shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
}

.taif-users__toolbar-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding-inline:4px 9px;
  border-inline-left:1px solid rgba(148,163,184,.18);
}

.taif-users__section-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#1d4ed8;
  background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(219,234,254,.92));
  border:1px solid rgba(37,99,235,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 8px 18px rgba(37,99,235,.08);
  font-size:20px;
}

.taif-users__titlebox{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.taif-users__titlebox strong{
  margin:0;
  color:#0b1220;
  font-weight:900;
  font-size:18px;
  line-height:1.15;
  white-space:nowrap;
}

.taif-users__titlebox small{
  min-width:0;
  max-width:330px;
  color:#64748b;
  font-weight:800;
  font-size:11.8px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.taif-users__toolbar-controls{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,23,42,.16) transparent;
}

.taif-users__toolbar-controls::-webkit-scrollbar{height:8px}
.taif-users__toolbar-controls::-webkit-scrollbar-track{background:transparent}
.taif-users__toolbar-controls::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:10px}

.taif-users__search{
  flex:1 1 260px;
  min-width:210px;
  max-width:430px;
  height:var(--users-control-height);
  position:relative;
  display:flex;
  align-items:center;
}

.taif-users__search-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  color:#94a3b8;
  pointer-events:none;
}

.taif-users__search input{
  width:100%;
  height:100%;
  border:1px solid rgba(15,23,42,.10);
  border-radius:9px;
  background:rgba(255,255,255,.92);
  color:#0f172a;
  padding:0 38px 0 42px;
  font:800 13px/1 var(--taif-font-family, inherit);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.taif-users__search input::-webkit-search-decoration,
.taif-users__search input::-webkit-search-cancel-button,
.taif-users__search input::-webkit-search-results-button,
.taif-users__search input::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}

.taif-users__search input:focus{
  border-color:rgba(37,99,235,.28);
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.08),inset 0 1px 0 rgba(255,255,255,.88);
}

.taif-users__search-clear{
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:1px solid rgba(220,38,38,.18);
  border-radius:8px;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 8px 15px rgba(185,28,28,.14), inset 0 1px 0 rgba(255,255,255,.16);
}

.taif-users__search-clear svg{width:12px;height:12px}
.taif-users__search-clear.is-hidden{display:none}

.taif-users__select-pill{
  flex:0 0 auto;
  height:var(--users-control-height);
  min-width:132px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
}

.taif-users__select-pill span{
  color:#64748b;
  font:800 11.4px/1 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users__select-pill select{
  flex:1 1 auto;
  min-width:0;
  height:30px;
  border:0;
  outline:none;
  background:transparent;
  color:#0f172a;
  font:900 12.4px/1 var(--taif-font-family, inherit);
  cursor:pointer;
}

.taif-users__tool-btn,
.taif-users-btn{
  position:relative;
  isolation:isolate;
  min-height:var(--users-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  color:#0f172a;
  box-shadow:0 10px 18px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.32);
  padding:0 13px;
  font:900 12.5px/1 var(--taif-font-family, inherit);
  white-space:nowrap;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease;
}

.taif-users__tool-btn::before,
.taif-users-btn::before{
  content:"";
  position:absolute;
  inset:1px 1px auto;
  height:52%;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

.taif-users__tool-btn > *,
.taif-users-btn > *{
  position:relative;
  z-index:1;
}

.taif-users__tool-btn svg{
  width:15px;
  height:15px;
}

.taif-users__tool-btn:hover:not(:disabled),
.taif-users-btn:hover:not(:disabled){
  transform:translateY(-1px);
  filter:saturate(1.04) brightness(1.01);
}

.taif-users__tool-btn:active:not(:disabled),
.taif-users-btn:active:not(:disabled){
  transform:translateY(1px) scale(.985);
}

.taif-users__tool-btn:disabled,
.taif-users-btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none;
}

.taif-users__tool-btn--primary,
.taif-users-btn--primary{
  background:linear-gradient(135deg,#111827 0%,#020617 100%);
  color:#fff;
  border-color:rgba(15,23,42,.25);
  box-shadow:0 14px 22px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.14);
}

.taif-users__tool-btn--primary::before,
.taif-users-btn--primary::before{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
}

.taif-users__tool-btn--soft,
.taif-users-btn--ghost{
  background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(241,245,249,.92));
  color:#334155;
}

.taif-users__details{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(128px,1fr));
  gap:7px;
}

.taif-users-detail{
  min-width:0;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  border:1px solid var(--users-line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  box-shadow:var(--users-soft-shadow);
  overflow:hidden;
}

.taif-users-detail__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
}

.taif-users-detail__text span{
  color:#64748b;
  font:900 12.2px/1.2 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-detail__text strong{
  color:#0f172a;
  font:900 25px/1 var(--taif-font-family, inherit);
  letter-spacing:.01em;
  direction:ltr;
  unicode-bidi:plaintext;
}

.taif-users-detail__text small{
  color:#64748b;
  font:800 11.5px/1.2 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-detail__icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:20px;
  border:1px solid rgba(37,99,235,.10);
  background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(219,234,254,.92));
  color:#2563eb;
}

.taif-users-detail--active .taif-users-detail__icon{
  color:#059669;
  background:linear-gradient(180deg,rgba(236,253,245,.98),rgba(209,250,229,.88));
  border-color:rgba(5,150,105,.12);
}

.taif-users-detail--suspended .taif-users-detail__icon{
  color:#dc2626;
  background:linear-gradient(180deg,rgba(254,242,242,.98),rgba(254,226,226,.86));
  border-color:rgba(220,38,38,.12);
}

.taif-users-detail--admins .taif-users-detail__icon{
  color:#7c3aed;
  background:linear-gradient(180deg,rgba(245,243,255,.98),rgba(237,233,254,.9));
  border-color:rgba(124,58,237,.12);
}

.taif-users-detail--last .taif-users-detail__icon{
  color:#1d4ed8;
}

.taif-users-detail--last .taif-users-detail__text strong{
  font-size:20px;
}

.taif-users__table-card,
.taif-users__activity{
  min-width:0;
  border:1px solid var(--users-line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.90));
  box-shadow:var(--users-shadow);
  overflow:hidden;
}

.taif-users__table-card{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.taif-users__table-head,
.taif-users__activity-head{
  flex:0 0 auto;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--users-line-strong);
  background:linear-gradient(180deg,rgba(233,237,243,.98),rgba(223,229,237,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56);
}

.taif-users__table-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.taif-users__table-title > span{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.72);
  color:#334155;
  border:1px solid rgba(148,163,184,.18);
  font-size:16px;
}

.taif-users__table-title h2{
  margin:0;
  color:#0f172a;
  font:900 18px/1.1 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users__table-meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.taif-users__table-meta span{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(255,255,255,.66);
  color:#475569;
  font:900 12px/1 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users__table-wrap{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,23,42,.16) transparent;
}

.taif-users__table-wrap::-webkit-scrollbar{width:9px;height:9px}
.taif-users__table-wrap::-webkit-scrollbar-track{background:transparent}
.taif-users__table-wrap::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(15,23,42,.16)}

.taif-users-table{
  width:100%;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

.taif-users-table th,
.taif-users-table td{
  text-align:right;
  vertical-align:middle;
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:7px 10px;
  color:#334155;
}

.taif-users-table th{
  position:sticky;
  top:0;
  z-index:2;
  height:40px;
  background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(241,245,249,.96));
  color:#475569;
  font:900 12px/1.1 var(--taif-font-family, inherit);
  white-space:nowrap;
  box-shadow:inset 0 -1px 0 rgba(148,163,184,.20);
}

.taif-users-table td{
  height:58px;
  background:rgba(255,255,255,.88);
  font:800 13px/1.3 var(--taif-font-family, inherit);
}

.taif-users-table tr:nth-child(even) td{
  background:rgba(248,250,252,.86);
}

.taif-users-table tr:hover td{
  background:rgba(239,246,255,.82);
}

.taif-users-table th:nth-child(1),.taif-users-table td:nth-child(1){width:210px}
.taif-users-table th:nth-child(2),.taif-users-table td:nth-child(2){width:150px}
.taif-users-table th:nth-child(3),.taif-users-table td:nth-child(3){width:116px}
.taif-users-table th:nth-child(4),.taif-users-table td:nth-child(4){width:116px}
.taif-users-table th:nth-child(5),.taif-users-table td:nth-child(5){width:150px}
.taif-users-table th:nth-child(6),.taif-users-table td:nth-child(6){width:150px}
.taif-users-table th:nth-child(7),.taif-users-table td:nth-child(7){width:220px}

.taif-users-person{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}

.taif-users-avatar{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#111827,#020617);
  color:#fff;
  font:900 15px/1 var(--taif-font-family, inherit);
  box-shadow:0 8px 18px rgba(15,23,42,.17), inset 0 1px 0 rgba(255,255,255,.14);
}

.taif-users-person__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.taif-users-person strong{
  min-width:0;
  max-width:135px;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0f172a;
  font:900 13.5px/1.15 var(--taif-font-family, inherit);
}

.taif-users-person small{
  color:#64748b;
  font:800 11.5px/1.2 var(--taif-font-family, inherit);
}

.taif-users-username{
  display:inline-flex;
  max-width:100%;
  min-height:28px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(239,246,255,.96),rgba(219,234,254,.88));
  color:#1d4ed8;
  font:900 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.taif-users-role,
.taif-users-status{
  min-height:30px;
  min-width:78px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  padding:0 11px;
  font:900 12.2px/1 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-role--owner{
  background:#fef2f2;
  color:#b42318;
}

.taif-users-role--admin{
  background:#eef4ff;
  color:#3538cd;
}

.taif-users-role--accountant{
  background:#ecfdf3;
  color:#067647;
}

.taif-users-role--cashier{
  background:#fff7ed;
  color:#c2410c;
}

.taif-users-role--viewer{
  background:#f2f4f7;
  color:#475467;
}

.taif-users-status i{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.taif-users-status.is-on{
  background:#ecfdf3;
  color:#067647;
}

.taif-users-status.is-off{
  background:#fef3f2;
  color:#b42318;
}

.taif-users-date{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#334155;
}

.taif-users-date strong{
  color:#0f172a;
  font:900 13px/1.15 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-date small{
  color:#64748b;
  font:800 11.5px/1.2 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-actions{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.taif-users-actions button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.92));
  color:#334155;
  font:900 12px/1 var(--taif-font-family, inherit);
  cursor:pointer;
  box-shadow:0 8px 15px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.62);
  transition:transform .14s ease,filter .14s ease,border-color .14s ease;
}

.taif-users-actions button svg{
  width:14px;
  height:14px;
}

.taif-users-actions button:hover{
  transform:translateY(-1px);
  filter:saturate(1.03);
}

.taif-users-actions button.is-danger{
  border-color:#fecdca;
  background:#fff7f6;
  color:#b42318;
}

.taif-users-actions button.is-activate{
  border-color:#abefc6;
  background:#ecfdf3;
  color:#067647;
}

.taif-users__table-footer{
  flex:0 0 auto;
  border-top:1px solid var(--users-line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));
}

.taif-users-pager{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 11px;
}

.taif-users-pager__range,
.taif-users-pager__chip{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  border:1px solid rgba(37,99,235,.14);
  background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(219,234,254,.92));
  color:#1d4ed8;
  padding:0 12px;
  font:900 12px/1 var(--taif-font-family, inherit);
  white-space:nowrap;
}

.taif-users-pager__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.taif-users-pager__button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:9px;
  background:#fff;
  color:#334155;
  padding:0 10px;
  font:900 12px/1 var(--taif-font-family, inherit);
  cursor:pointer;
}

.taif-users-pager__button span{
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
}

.taif-users-pager__button:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.taif-users-pager__size{
  display:flex;
  align-items:center;
  gap:7px;
  color:#64748b;
  font:900 12px/1 var(--taif-font-family, inherit);
}

.taif-users-pager__size select{
  height:34px;
  min-width:70px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  padding:0 8px;
  font:900 12px/1 var(--taif-font-family, inherit);
  outline:none;
}

.taif-users__activity{
  flex:0 0 auto;
  max-height:168px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.taif-users__activity-head{
  min-height:42px;
}

.taif-users__activity-head .taif-users__tool-btn{
  min-height:32px;
}

.taif-users-logs{
  min-height:0;
  overflow:auto;
  display:grid;
  gap:6px;
  padding:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,23,42,.16) transparent;
}

.taif-users-log{
  min-height:38px;
  display:grid;
  grid-template-columns:130px minmax(140px,1fr) 170px 110px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(15,23,42,.06);
  border-radius:10px;
  background:rgba(248,250,252,.92);
  padding:7px 10px;
}

.taif-users-log__action{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  border-radius:999px;
  background:#eef4ff;
  color:#3538cd;
  padding:0 9px;
  font:900 11.5px/1 var(--taif-font-family, inherit);
}

.taif-users-log strong{
  color:#0f172a;
  font:900 12.5px/1.2 var(--taif-font-family, inherit);
}

.taif-users-log time,
.taif-users-log small{
  color:#64748b;
  font:800 11.5px/1.2 var(--taif-font-family, inherit);
}

.taif-users-empty{
  padding:22px;
  text-align:center;
  color:#64748b;
  font:900 13px/1.5 var(--taif-font-family, inherit);
}

.taif-users-empty--page{
  position:relative;
  z-index:1;
  margin:18px;
  border:1px solid var(--users-line, rgba(15,23,42,.08));
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}

.taif-users-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  direction:rtl;
  background:rgba(15,23,42,.44);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.taif-users-modal{
  width:min(720px,100%);
  max-height:calc(100vh - 42px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  box-shadow:0 30px 92px rgba(15,23,42,.30);
  padding:22px;
}

.taif-users-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.taif-users-modal__title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}

.taif-users-modal__title > span{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:#eef4ff;
  color:#1d4ed8;
  font-size:22px;
}

.taif-users-modal__title h2{
  margin:0;
  color:#101828;
  font:900 24px/1.15 var(--taif-font-family, inherit);
}

.taif-users-modal__title p{
  margin:4px 0 0;
  color:#667085;
  font:800 13px/1.4 var(--taif-font-family, inherit);
}

.taif-users-modal__header > button{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:0;
  border-radius:13px;
  background:#f2f4f7;
  color:#101828;
  font-size:24px;
  cursor:pointer;
}

.taif-users-modal__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.taif-users-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.taif-users-field--full{
  grid-column:1/-1;
}

.taif-users-field span{
  color:#344054;
  font:900 13px/1.2 var(--taif-font-family, inherit);
}

.taif-users-field input,
.taif-users-field select,
.taif-users-field textarea{
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:15px;
  background:#fff;
  color:#101828;
  padding:10px 12px;
  font:800 14px/1.4 var(--taif-font-family, inherit);
  outline:none;
}

.taif-users-field textarea{
  resize:vertical;
  min-height:88px;
}

.taif-users-field input:focus,
.taif-users-field select:focus,
.taif-users-field textarea:focus{
  border-color:#1570ef;
  box-shadow:0 0 0 4px rgba(21,112,239,.11);
}

.taif-users-field input[readonly]{
  background:#f9fafb;
  color:#667085;
}

.taif-users-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.taif-users-modal__actions .taif-users-btn{
  min-height:42px;
  padding:0 17px;
  border-radius:14px;
}

@container (max-width: 1220px){
  .taif-users__toolbar{
    grid-template-columns:1fr;
  }

  .taif-users__toolbar-identity{
    border-inline-left:0;
    border-bottom:1px solid rgba(148,163,184,.14);
    padding-bottom:6px;
  }

  .taif-users__details{
    grid-template-columns:repeat(3,minmax(140px,1fr));
  }
}

@container (max-width: 900px){
  .taif-users{
    overflow:auto;
  }

  .taif-users__toolbar-controls{
    flex-wrap:wrap;
    overflow:visible;
  }

  .taif-users__search{
    flex:1 1 100%;
    max-width:none;
  }

  .taif-users__details{
    grid-template-columns:repeat(2,minmax(140px,1fr));
  }

  .taif-users-pager{
    align-items:stretch;
    flex-direction:column;
  }

  .taif-users-pager__controls,
  .taif-users-pager__size{
    justify-content:center;
  }

  .taif-users-log{
    grid-template-columns:1fr;
  }

  .taif-users-modal__grid{
    grid-template-columns:1fr;
  }
}

@container (max-width: 560px){
  .taif-users__details{
    grid-template-columns:1fr;
  }

  .taif-users__select-pill{
    flex:1 1 150px;
  }

  .taif-users__table-head,
  .taif-users__activity-head{
    align-items:flex-start;
    flex-direction:column;
  }
}