/* =========================================================
   USER LIST – PREMIUM ADMIN STYLE
========================================================= */

.userlist-hero,
.userlist-toolbar,
.userlist-table-card{
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:22px !important;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.05);
}

body.dark .userlist-hero,
body.dark .userlist-toolbar,
body.dark .userlist-table-card{
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(15,23,42,.96));
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}

.userlist-hero{
  position:relative;
  overflow:hidden;
}

.userlist-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 120px at 8% 6%, rgba(31,139,36,.06), transparent 60%),
    radial-gradient(260px 120px at 92% 4%, rgba(198,29,35,.06), transparent 60%);
}

body.dark .userlist-hero::before{
  background:
    radial-gradient(260px 120px at 8% 6%, rgba(31,139,36,.10), transparent 60%),
    radial-gradient(260px 120px at 92% 4%, rgba(198,29,35,.10), transparent 60%);
}

.userlist-hero .card-body{
  position:relative;
  z-index:1;
}

.userlist-kicker{
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   BUTTONS
========================================================= */

.userlist-btn{
  min-height:40px;
  border-radius:999px !important;
  padding:.58rem 1rem !important;
  font-weight:750;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.userlist-btn:hover{
  transform:translateY(-1px);
  opacity:1;
}

.userlist-btn:active{
  transform:translateY(0);
}

.userlist-btn-primary{
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg, #0d6efd, #2563eb) !important;
  box-shadow:0 10px 22px rgba(13,110,253,.20);
}

.userlist-btn-primary:hover{
  background:linear-gradient(135deg, #0b5ed7, #1d4ed8) !important;
  box-shadow:0 14px 28px rgba(13,110,253,.24);
}

.userlist-btn-soft{
  border:1px solid rgba(0,0,0,.10) !important;
  color:var(--text) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.userlist-btn-soft:hover{
  background:rgba(255,255,255,.98) !important;
  border-color:rgba(0,0,0,.14) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.08);
}

.userlist-btn-danger{
  border:1px solid rgba(220,53,69,.18) !important;
  color:#dc3545 !important;
  background:rgba(220,53,69,.05) !important;
  box-shadow:0 8px 18px rgba(220,53,69,.08);
}

.userlist-btn-danger:hover{
  background:rgba(220,53,69,.09) !important;
  border-color:rgba(220,53,69,.26) !important;
  box-shadow:0 12px 22px rgba(220,53,69,.12);
}

.userlist-btn-disabled{
  border:1px solid rgba(0,0,0,.08) !important;
  color:var(--muted) !important;
  background:rgba(0,0,0,.03) !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

body.dark .userlist-btn-soft{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:var(--text) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

body.dark .userlist-btn-soft:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.32);
}

body.dark .userlist-btn-danger{
  color:#ff8a95 !important;
  background:rgba(220,53,69,.10) !important;
  border-color:rgba(255,138,149,.16) !important;
}

body.dark .userlist-btn-disabled{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.09) !important;
  color:#94a3b8 !important;
}

/* =========================================================
   STATS
========================================================= */

.userlist-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.userlist-stat-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.05);
  padding:18px 18px 16px;
}

.userlist-stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(180px 80px at 10% 8%, rgba(13,110,253,.05), transparent 65%);
}

body.dark .userlist-stat-card{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(15,23,42,.96));
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}

body.dark .userlist-stat-card::before{
  background:
    radial-gradient(180px 80px at 10% 8%, rgba(96,165,250,.08), transparent 65%);
}

.userlist-stat-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.userlist-stat-title{
  margin:0 0 4px;
  font-size:.9rem;
  font-weight:800;
  color:var(--muted);
}

.userlist-stat-value{
  margin:0;
  font-size:2rem;
  line-height:1;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.04em;
}

.userlist-stat-sub{
  margin:.45rem 0 0;
  font-size:.84rem;
  color:var(--muted);
}

.userlist-stat-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  background:rgba(13,110,253,.08);
  color:#0d6efd;
  border:1px solid rgba(13,110,253,.10);
}

.userlist-stat-icon.role-admin{
  background:rgba(220,53,69,.08);
  color:#dc3545;
  border-color:rgba(220,53,69,.12);
}

.userlist-stat-icon.role-moderator{
  background:rgba(255,193,7,.14);
  color:#8a6500;
  border-color:rgba(255,193,7,.20);
}

.userlist-stat-icon.role-editor{
  background:rgba(13,110,253,.08);
  color:#0d6efd;
  border-color:rgba(13,110,253,.12);
}

body.dark .userlist-stat-icon{
  background:rgba(96,165,250,.12);
  color:#9cc9ff;
  border-color:rgba(96,165,250,.16);
}

body.dark .userlist-stat-icon.role-admin{
  background:rgba(220,53,69,.14);
  color:#ff9aa4;
}

body.dark .userlist-stat-icon.role-moderator{
  background:rgba(255,193,7,.15);
  color:#ffd76a;
}

body.dark .userlist-stat-icon.role-editor{
  background:rgba(59,130,246,.14);
  color:#8fc0ff;
}

/* =========================================================
   SEARCH
========================================================= */

.userlist-toolbar .card-body{
  padding:1rem 1rem 1.05rem;
}

.userlist-search{
  width:min(760px, 100%);
}

.userlist-search .input-group{
  flex-wrap:nowrap;
}

.userlist-search .input-group-text{
  border-radius:999px 0 0 999px;
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
}

.userlist-search .form-control{
  min-height:46px;
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
  box-shadow:none;
}

.userlist-search .form-control:focus{
  border-color:rgba(13,110,253,.32);
  box-shadow:0 0 0 .2rem rgba(13,110,253,.08);
}

body.dark .userlist-search .input-group-text,
body.dark .userlist-search .form-control{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:var(--text);
}

body.dark .userlist-search .form-control::placeholder{
  color:#94a3b8;
}

.userlist-pagehint{
  font-weight:700;
}

/* =========================================================
   TABLE
========================================================= */

.userlist-table-card .card-header{
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight:800;
}

body.dark .userlist-table-card .card-header{
  border-bottom-color:rgba(255,255,255,.08);
}

.userlist-table-wrap{
  overflow-x:auto;
}

.userlist-table{
  margin-bottom:0;
  vertical-align:middle;
}

.userlist-table thead th{
  background:transparent;
  color:var(--muted);
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.02em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:1rem 1rem;
  white-space:nowrap;
}

.userlist-table tbody td{
  padding:1rem 1rem;
  border-top:1px solid rgba(0,0,0,.05);
  vertical-align:middle;
}

.userlist-table tbody tr{
  transition:background .16s ease;
}

.userlist-table tbody tr:hover{
  background:rgba(0,0,0,.018);
}

body.dark .userlist-table thead th{
  border-bottom-color:rgba(255,255,255,.08);
}

body.dark .userlist-table tbody td{
  border-top-color:rgba(255,255,255,.06);
}

body.dark .userlist-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}

.userlist-id{
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   USER CELL
========================================================= */

.userlist-usercell{
  display:flex;
  align-items:center;
  gap:12px;
}

.userlist-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(13,110,253,.10), rgba(13,110,253,.06));
  color:#0d6efd;
  border:1px solid rgba(13,110,253,.10);
  box-shadow:0 6px 16px rgba(13,110,253,.08);
}

body.dark .userlist-avatar{
  background:linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.10));
  color:#9cc9ff;
  border-color:rgba(96,165,250,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

.userlist-usermeta{
  min-width:0;
}

.userlist-usermeta .fw-semibold{
  color:var(--text);
  word-break:break-word;
}

.userlist-self-label{
  color:#0d6efd;
  font-weight:800;
}

body.dark .userlist-self-label{
  color:#9cc9ff;
}

/* =========================================================
   ROLE CHIPS
========================================================= */

.role-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.42rem .82rem;
  border-radius:999px;
  font-size:.84rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.role-chip-admin{
  color:#b42318;
  background:rgba(220,53,69,.08);
  border:1px solid rgba(220,53,69,.14);
}

.role-chip-moderator{
  color:#8a6500;
  background:rgba(255,193,7,.14);
  border:1px solid rgba(255,193,7,.22);
}

.role-chip-editor{
  color:#0d6efd;
  background:rgba(13,110,253,.08);
  border:1px solid rgba(13,110,253,.14);
}

.role-chip-default{
  color:var(--text);
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
}

body.dark .role-chip-admin{
  color:#ff9aa4;
  background:rgba(220,53,69,.14);
  border-color:rgba(255,154,164,.18);
}

body.dark .role-chip-moderator{
  color:#ffd76a;
  background:rgba(255,193,7,.14);
  border-color:rgba(255,215,106,.16);
}

body.dark .role-chip-editor{
  color:#9cc9ff;
  background:rgba(59,130,246,.14);
  border-color:rgba(156,201,255,.16);
}

body.dark .role-chip-default{
  color:#e2e8f0;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

/* =========================================================
   ACTIONS
========================================================= */

.userlist-table .td-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

html[dir="rtl"] .userlist-table .td-actions{
  justify-content:flex-end;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px){
  .userlist-stats-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 767.98px){
  .userlist-search{
    width:100%;
  }

  .userlist-pagehint{
    width:100%;
    margin-left:0 !important;
  }
}

@media (max-width: 576px){
  .userlist-stats-grid{
    grid-template-columns:1fr;
  }

  .userlist-btn{
    width:100%;
  }

  .userlist-usercell{
    gap:10px;
  }

  .userlist-avatar{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
  }

  .userlist-table thead th,
  .userlist-table tbody td{
    padding:.85rem .8rem;
  }

  .userlist-table .td-actions .userlist-btn{
    width:auto;
  }
}