/* ── Stats Row ── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
    animation: fadeUp .3s ease both;
}

.stat-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: border-color var(--tr), background var(--tr);
}
.stat-block:hover { border-color: rgba(249,115,22,.35); }
.stat-clickable { cursor: pointer; }
.stat-clickable:hover { border-color: var(--or); background: rgba(249,115,22,.05); }

.stat-icon {
    width: 36px; height: 36px;
    border-radius: .55rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.stat-total    { background: rgba(249,115,22,.15); color: var(--or); }
.stat-creator  { background: rgba(249,115,22,.12); color: #FB923C; }
.stat-brand    { background: rgba(79,70,229,.15);  color: #A5B4FC; }
.stat-admin    { background: rgba(239,68,68,.15);  color: #F87171; }
.stat-active   { background: rgba(16,185,129,.15); color: #34D399; }
.stat-suspended{ background: rgba(239,68,68,.10);  color: #FCA5A5; }

.stat-value { font-size: 1.15rem; font-weight: 900; color: var(--text); line-height: 1.1; }
.stat-label { font-size: .65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: .15rem; }

@media (max-width: 1200px) { .stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Filter Card ── */
.filter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1rem 1.3rem;
    margin-bottom: 1rem;
    animation: fadeUp .35s ease both;
}
.filter-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.filter-card-header h6 {
    font-weight: 800; font-size: .85rem; color: var(--text);
    margin: 0; display: flex; align-items: center; gap: .4rem;
}
.filter-card-header h6 i { color: var(--or); }

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.5fr 1fr;
    gap: .75rem;
    align-items: end;
}
.filter-item { display: flex; flex-direction: column; }
.filter-label {
    color: var(--text-muted); font-weight: 700; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: .35rem;
    display: flex; align-items: center; gap: .3rem;
}
.filter-label i { color: var(--text-dim); font-size: .75rem; }
.search-input-wrap { display: flex; gap: .35rem; }
.search-input-wrap .finp { flex: 1; }
.search-btn { padding: .52rem .7rem; flex-shrink: 0; }

@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .filter-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── User List ── */
.user-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .15s;
}
.user-row:hover { background: rgba(249,115,22,.06); }
.user-row:last-child { border-bottom: none; }

.user-avatar {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-avatar.creator { background: linear-gradient(135deg, var(--or), var(--yellow)); }
.user-avatar.brand   { background: linear-gradient(135deg, var(--indigo), var(--purple)); }
.user-avatar.admin   { background: linear-gradient(135deg, var(--red), var(--or)); }

.user-info { flex: 1; min-width: 0; }
.user-email { font-weight: 600; color: var(--text); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta  { font-size: .73rem; color: var(--text-dim); display: flex; gap: .75rem; margin-top: .15rem; flex-wrap: wrap; }
.user-extras { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }

/* ── Social chips (list row) ── */
.social-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: rgba(255,255,255,.08); border: 1px solid var(--border);
    border-radius: 4px; font-size: .75rem; color: var(--text-muted); transition: all .15s;
}
.social-chip:hover { background: rgba(249,115,22,.15); border-color: var(--or); color: var(--or); }

/* ── KOC group chip (list row) ── */
.koc-group-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem; border-radius: 1rem;
    font-size: .68rem; font-weight: 700; color: #fff; background: var(--indigo);
}
.koc-group-chip.unassigned { background: transparent; border: 1px dashed var(--border); color: var(--text-dim); }

/* ── User badges (list row right side) ── */
.user-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.user-badge { padding: .2rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.ub-creator   { background: rgba(249,115,22,.15); color: #FB923C; }
.ub-brand     { background: rgba(79,70,229,.15);  color: #A5B4FC; }
.ub-admin     { background: rgba(239,68,68,.15);  color: #F87171; }
.ub-active    { background: rgba(16,185,129,.15); color: #34D399; }
.ub-suspended { background: rgba(239,68,68,.15);  color: #F87171; }
.ub-tier-koc   { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }
.ub-tier-basic { background: #F3F4F6; border: 1px solid #D1D5DB; color: #6B7280; }

/* ── Social links (modal) ── */
.social-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .7rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: .5rem; margin: .25rem .25rem .25rem 0;
    font-size: .8rem; text-decoration: none; color: var(--text); transition: all .15s;
}
.social-link:hover { background: rgba(249,115,22,.1); border-color: var(--or); color: var(--or); }
.social-link.no-link { cursor: default; }
.social-link.no-link:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.social-platform { font-weight: 700; color: var(--text-muted); }
.social-handle   { color: var(--text); }
.social-status   { font-size: .7rem; padding: .1rem .35rem; border-radius: .25rem; font-weight: 700; }
.social-link.verified .social-status { background: #D1FAE5; color: #065F46; }
.social-link.pending  .social-status { background: #FEF3C7; color: #92400E; }
.social-link.rejected .social-status { background: #FEE2E2; color: #991B1B; }
.social-extra { font-size: .68rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: .3rem; padding: .08rem .32rem; }
.social-extra.verified { color: #92400E; border-color: #FCD34D; background: #FEF3C7; }
.social-extra.synced   { color: #1D4ED8; border-color: #93C5FD; background: #DBEAFE; }

/* ── Desired Metrics ── */
.adm-metrics-list { display: flex; flex-direction: column; gap: .75rem; }
.adm-metric-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: .6rem; padding: .75rem;
}
.adm-metric-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.adm-metric-platform { font-weight: 700; font-size: .85rem; }
.adm-metric-status { font-size: .7rem; font-weight: 700; padding: .15rem .4rem; border-radius: .3rem; margin-left: auto; }
.adm-metric-status.pending  { background: #FEF3C7; color: #92400E; }
.adm-metric-status.approved { background: #D1FAE5; color: #065F46; }
.adm-metric-status.rejected { background: #FEE2E2; color: #991B1B; }
.adm-metric-values {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
    font-size: .8rem; margin-bottom: .5rem;
}
.adm-metric-values .label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; }
.adm-metric-values .value { font-weight: 600; }
.adm-metric-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.adm-metric-actions .btnx { padding: .3rem .6rem; font-size: .75rem; }
.adm-reject-input { margin-top: .5rem; display: none; }
.adm-reject-input.show { display: block; }
.adm-reject-reason { background: #FEF2F2; border: 1px solid #FECACA; border-radius: .4rem; padding: .4rem .6rem; font-size: .75rem; color: #991B1B; margin-top: .4rem; }

/* ── Pagination ── */
.pagination-bar {
    display: flex; align-items: center; justify-content: center;
    gap: .3rem; padding: .85rem 1rem; border-top: 1px solid var(--border);
}
.page-btn {
    min-width: 32px; height: 32px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04); color: var(--text-muted);
    border-radius: .4rem; font-size: .78rem; font-weight: 600; font-family: inherit;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .55rem; transition: all var(--tr);
}
.page-btn:hover:not(:disabled) { background: rgba(249,115,22,.12); border-color: var(--or); color: var(--or); }
.page-btn.active { background: var(--or); border-color: var(--or); color: #fff; }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-ellipsis { color: var(--text-dim); font-size: .78rem; padding: 0 .2rem; }

/* ── Light theme overrides ── */
[data-theme="light"] .stat-block { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .stat-clickable:hover { background: rgba(249,115,22,.04); }
[data-theme="light"] .filter-card { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .user-row:hover { background: rgba(249,115,22,.04); }
[data-theme="light"] .user-email { color: var(--text); }
[data-theme="light"] .social-link { background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-theme="light"] .ub-tier-koc   { background: #D1FAE5; color: #065F46; }
[data-theme="light"] .ub-tier-basic { background: #F1F5F9; border-color: #CBD5E1; color: #475569; }
[data-theme="light"] .adm-metric-card { background: var(--surface-2); border-color: var(--border); }
[data-theme="light"] .page-btn { background: rgba(0,0,0,.03); border-color: var(--border); color: var(--text-muted); }