/*
 * users.css — Kullanıcılar: hizalı, modern veri tablosu (tek başlık +
 *             okunaklı satırlar, sol aksan, dengeli kolon genişlikleri).
 * Created by: Maki
 * Developed by: Zavith
 * Created: 2026-06-23
 */

#view-users {
  --uc-cols:
    minmax(172px, 0.92fr)
    minmax(148px, 176px)
    minmax(0, 1.32fr)
    118px 122px 88px 92px 108px
    minmax(118px, 0.95fr)
    118px;
}

/* ── liste kabuğu ── */
#view-users .user-list {
  background:
    linear-gradient(165deg, rgba(36, 20, 22, .92) 0%, rgba(24, 12, 14, .88) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 42px -28px rgba(0, 0, 0, .85);
}
#view-users .user-cards { display: flex; flex-direction: column; }

/* ── ortak kolon ızgarası — boşlukla ayırım, border yok ── */
#view-users .uc-head,
#view-users .ucard {
  display: grid;
  grid-template-columns: var(--uc-cols);
  column-gap: 18px;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* ── başlık satırı — yalnızca başlıkta ince kolon kılavuzları ── */
#view-users .uc-head {
  padding-top: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(214, 59, 54, .14);
  background: rgba(255, 255, 255, .025);
}
#view-users .uc-head span {
  position: relative;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
}
#view-users .uc-head span:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, .09) 35%,
    rgba(255, 255, 255, .09) 65%,
    transparent
  );
  pointer-events: none;
}
#view-users .uc-head span:last-child {
  text-align: right;
}

/* ── veri satırı ── */
#view-users .ucard {
  --uc-accent: transparent;
  position: relative;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  transition: background .16s, border-color .16s;
  align-items: center;
}
#view-users .ucard:nth-child(even) { background: rgba(255, 255, 255, .012); }
#view-users .ucard:last-child { border-bottom: none; }
#view-users .ucard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--uc-accent);
  opacity: 0;
  transition: opacity .16s;
}
#view-users .ucard:hover {
  background: rgba(214, 59, 54, .055);
}
#view-users .ucard:hover::before { opacity: 1; }
#view-users .ucard.is-online { --uc-accent: var(--green); }
#view-users .ucard.is-banned { --uc-accent: var(--red); }
#view-users .ucard:not(.is-online):not(.is-banned) { --uc-accent: var(--ember); }
#view-users .ucard.is-online:hover { background: rgba(126, 226, 160, .05); }
#view-users .ucard.is-banned:hover { background: rgba(255, 138, 112, .06); }

/* ── kimlik — Üye İstatistikleri .ucell ile aynı tipografi ── */
#view-users .uc-id { min-width: 0; }
#view-users .uc-id-main { min-width: 0; }
#view-users .uc-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-users .ucell .uname { color: var(--text); }
#view-users .ucell:hover .uname { color: var(--peach); }
#view-users .ucell .udisp { color: var(--muted); }
#view-users .ucell .uname,
#view-users .ucell .udisp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-users .avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7);
}
#view-users .presence {
  width: 11px;
  height: 11px;
  border-width: 2.5px;
  right: -3px;
  bottom: -3px;
}

/* ── rozet kolonu ── */
#view-users .uc-badges-cell { align-items: center; }
#view-users .uc-badges-wrap {
  width: 100%;
  cursor: default;
  outline: none;
}
#view-users .uc-badges-wrap:focus-visible .uc-badges {
  border-color: rgba(214, 59, 54, .42);
  box-shadow: 0 0 0 2px rgba(214, 59, 54, .18);
}
#view-users .uc-badges {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  min-height: 38px;
  padding: 5px 8px 5px 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
#view-users .uc-badges-track {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
#view-users .uc-badges-wrap:hover .uc-badges {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
#view-users .uc-badges .uc-badge-ico,
#view-users .uc-badges .reward-badge {
  --badge-size: 26px;
  flex-shrink: 0;
}
/* Liste performansı — tablo içinde aura animasyonu kapalı */
#view-users .uc-badges .reward-aura-stack { display: none; }
#view-users .uc-badges-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 26px;
  margin-left: 4px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(214, 59, 54, .32);
  background: rgba(214, 59, 54, .12);
  color: var(--peach);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .12s, box-shadow .14s;
  box-shadow: 0 4px 12px -8px rgba(214, 59, 54, .45);
}
#view-users .uc-badges-more:hover {
  background: rgba(214, 59, 54, .2);
  border-color: rgba(214, 59, 54, .48);
  box-shadow: 0 4px 14px -8px rgba(214, 59, 54, .45);
}
#view-users .uc-badges-more.hidden { display: none; }
#view-users .uc-badges-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  border-radius: 11px;
  background: rgba(255, 255, 255, .015);
  border: 1px dashed rgba(255, 255, 255, .06);
}

/* ── veri hücreleri ── */
#view-users .uc-c {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#view-users .uc-verify,
#view-users .uc-c .tag,
#view-users .uc-c .tier-tag {
  max-width: 100%;
}
#view-users .uc-verify .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#view-users .uc-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--muted);
}
#view-users .uc-status.is-on {
  color: var(--green);
  background: rgba(126, 226, 160, .08);
  border-color: rgba(126, 226, 160, .22);
}
#view-users .uc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
#view-users .uc-status.is-on .uc-status-dot {
  box-shadow: 0 0 8px rgba(126, 226, 160, .75);
}
#view-users .uc-email-addr {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-users .uc-when {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── aksiyonlar ── */
#view-users .uc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#view-users .access-btn {
  padding: 7px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: 10px;
  background: rgba(214, 59, 54, .1);
  border: 1px solid rgba(214, 59, 54, .24);
  transition: background .14s, border-color .14s, transform .12s;
}
#view-users .access-btn:hover {
  background: rgba(214, 59, 54, .18);
  border-color: rgba(214, 59, 54, .38);
  box-shadow: 0 4px 14px -8px rgba(214, 59, 54, .35);
}
#view-users .access-btn svg { width: 13px; height: 13px; }
#view-users .mini-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .03);
  transition: background .14s, border-color .14s;
}
#view-users .mini-btn:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--border);
}
#view-users .mini-btn svg { width: 15px; height: 15px; }

/* ── rozetler — okunaklı, tablo ile uyumlu ── */
#view-users .tag {
  padding: 5px 10px;
  font-size: var(--text-xs);
  gap: 5px;
  max-width: 100%;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
  box-sizing: border-box;
}
#view-users .tag svg { width: 11px; height: 11px; flex-shrink: 0; }
#view-users .tier-tag {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
#view-users .tier-tag-ico svg { width: 10px; height: 10px; }
#view-users .role-tag {
  padding: 3px 8px;
  font-size: 9.5px;
}
#view-users .tier-remain {
  font-size: var(--text-sm);
  gap: 5px;
  color: var(--text);
  font-weight: var(--weight-semibold);
}
#view-users .tier-remain-ico { width: 13px; height: 13px; }
#view-users .tier-remain--empty { color: var(--dim); font-weight: var(--weight-medium); }

/* ── skeleton & boş ── */
#view-users .uc-skel {
  height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .03) 70%);
  background-size: 200% 100%;
  animation: uc-shimmer 1.2s linear infinite;
}
#view-users .empty-state { padding: 48px 20px; }

@keyframes uc-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── rozet hover popover (body seviyesi, overflow'dan etkilenmez) ── */
.uc-badge-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100020;
  width: min(320px, 92vw);
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(28, 14, 16, .98);
  border: 1px solid rgba(214, 59, 54, .22);
  box-shadow:
    0 4px 6px -2px rgba(0, 0, 0, .35),
    0 18px 40px -12px rgba(0, 0, 0, .75),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.uc-badge-pop.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.uc-badge-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.uc-badge-pop-head em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(214, 59, 54, .14);
  border: 1px solid rgba(214, 59, 54, .22);
  color: var(--peach);
}
.uc-badge-pop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  padding-right: 2px;
}
.uc-badge-pop-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 10px 5px 6px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--rc, #ffc56d) 12%, rgba(255, 255, 255, .04));
  border: 1px solid color-mix(in srgb, var(--rc, #ffc56d) 28%, rgba(255, 255, 255, .08));
}
.uc-badge-pop-ico { --badge-size: 22px; flex-shrink: 0; }
.uc-badge-pop-ico .reward-aura-stack { display: none; }
.uc-badge-pop-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── dar ekran ── */
@media (max-width: 1180px) {
  #view-users .user-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #view-users .uc-head,
  #view-users .ucard { min-width: 1220px; }
}