/* users.css — maintained by section. */

/* users-redesign-20261008 */
/* privateTheme link ID excludes these theme-aware rules from legacy recoloring. */
#asUsers {
    --us-panel: var(--private-final-panel,#182940);
    --us-top: var(--private-final-panel-top,#20344f);
    --us-fill: var(--private-panel-fill,linear-gradient(180deg,var(--us-top),var(--us-panel)));
    --us-text: var(--private-final-text,#eef4fb);
    --us-muted: var(--private-final-muted,#b9c8d8);
    --us-border: var(--private-final-border,rgba(167,218,255,.2));
    --us-shadow: var(--private-final-shadow,rgba(3,10,20,.55));
    --us-accent: var(--private-accent,var(--us-text));
    --us-hover: color-mix(in srgb,var(--us-accent) 55%,var(--us-border));
    flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0;
    color: var(--us-text); font: 14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html[data-private-mode="neutral"][data-private-theme="none"] #asUsers { --us-accent: var(--us-text); }
#asUsers *, #asUsers *::before, #asUsers *::after { box-sizing: border-box; }
#asUsers .us-panel {
    width: 100%; margin: 0; padding: 18px; border: 1px solid var(--us-border) !important; border-radius: 14px !important;
    background-color: var(--us-panel) !important; background-image: var(--us-fill) !important;
    box-shadow: inset 0 1px 0 #ffffff0e,inset 0 -2px 3px var(--us-shadow),0 5px 10px var(--us-shadow) !important;
}
#asUsers h1 { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--us-border); color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important; font: 750 24px/1.35 ui-sans-serif,system-ui,sans-serif; }
#asUsers .us-filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.42fr); gap: 16px; align-items: end; margin-bottom: 16px; }
#asUsers .us-filters > div { min-width: 0; }
#asUsers label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--us-muted) !important; }
#asUsers .us-search-controls { display: flex; gap: 8px; }
#asUsers .us-search-input { position: relative; flex: 1 1 auto; min-width: 0; }
#asUsers .us-search-input > #search_login { padding-right: 43px; }
#asUsers .us-search-clear {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px;
    margin: 0; padding: 0; border: 0 !important; border-radius: 7px !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--us-muted) !important; -webkit-text-fill-color: var(--us-muted) !important;
    font: 26px/1 system-ui,sans-serif; cursor: pointer;
}
#asUsers .us-search-clear[hidden] { display: none !important; }
#asUsers .us-search-clear:hover {
    color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important;
    background: color-mix(in srgb,var(--us-text) 10%,transparent) !important;
}
#asUsers .form-control { width: 100%; min-width: 0; height: 43px; margin: 0; padding: 10px 12px; border: 1px solid var(--us-border) !important; border-radius: 9px !important; background-color: var(--us-panel) !important; background-image: var(--us-fill) !important; color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important; box-shadow: inset 0 2px 4px color-mix(in srgb,var(--us-shadow) 60%,transparent) !important; font: inherit; }
#asUsers .form-control::placeholder { color: var(--us-muted) !important; -webkit-text-fill-color: var(--us-muted) !important; opacity: .8; }
#asUsers select option { background: var(--us-panel); color: var(--us-text); }
#asUsers .us-button, #asUsers #users > .friend > div > a {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 34px; padding: 6px 10px; margin: 0;
    border: 1px solid var(--us-border) !important; border-radius: 8px !important;
    background-color: var(--us-panel) !important; background-image: var(--us-fill) !important;
    color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important;
    box-shadow: inset 0 1px 0 #ffffff10,0 2px 4px var(--us-shadow); font: 600 12px/1.5 ui-sans-serif,system-ui,sans-serif;
    max-width: 100%; overflow: visible; overflow-wrap: anywhere; text-overflow: clip;
    text-decoration: none !important; text-align: center; white-space: normal; cursor: pointer; transition: border-color .15s,box-shadow .15s;
}
#asUsers .us-search-controls > .us-button { min-width: 86px; min-height: 43px; font-size: 13px; }
#asUsers .us-button:hover, #asUsers #users > .friend > div > a:hover { border-color: var(--us-hover) !important; box-shadow: inset 0 1px 0 #ffffff18,0 3px 6px var(--us-shadow); }
#asUsers .us-add-friend:disabled { cursor: default; color: var(--us-muted) !important; -webkit-text-fill-color: var(--us-muted) !important; box-shadow: none !important; border-color: var(--us-border) !important; }
#asUsers .us-friend-feedback { padding: 10px 12px; margin: 0 0 14px; border: 1px solid var(--us-border); border-radius: 9px; color: var(--us-text); background: var(--us-fill); }
#asUsers .us-friend-feedback[hidden] { display: none !important; }
#asUsers :is(a,button,input,select):focus-visible { outline: 2px solid var(--us-accent) !important; outline-offset: 2px; }
#asUsers #users { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; min-width: 0; padding: 0; margin: 0; }
#asUsers #users > .friend {
    display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 14px; align-items: center;
    float: none; width: 100%; min-width: 0; min-height: 62px; margin: 0; padding: 11px 14px;
    border: 1px solid var(--us-border) !important; border-radius: 10px !important;
    background-color: var(--us-panel) !important; background-image: var(--us-fill) !important;
    box-shadow: inset 0 1px 0 #ffffff08,0 3px 5px color-mix(in srgb,var(--us-shadow) 45%,transparent);
    color: var(--us-text); transition: border-color .15s; overflow: visible;
}
#asUsers #users > .friend:is(:hover,:focus-within) { border-color: var(--us-hover) !important; }
#asUsers #users > .friend::before, #asUsers #users > .friend::after { display: none; }
#asUsers #users > .friend > .users-list-avatar { display: block; position: relative; width: 38px; height: 38px; margin: 0; padding: 0; float: none; overflow: visible; }
#asUsers #users .users-list-avatar > .friend-avatar-image { display: block; width: 38px !important; height: 38px !important; max-width: none; margin: 0; object-fit: cover; border-radius: 50%; box-shadow: 0 2px 5px var(--us-shadow); }
#asUsers #users .users-list-avatar > img:not(.friend-avatar-image) { position: absolute; inset: -5px; width: 48px !important; height: 48px !important; max-width: none; margin: 0; pointer-events: none; }
#asUsers #users > .friend > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; min-width: 0; margin: 0; padding: 0; float: none; }
#asUsers #users .users-list-title-row { display: flex; flex: 1 1 190px; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; }
#asUsers #users .users-list-title-row > a { display: inline; max-width: 100%; margin: 0; font: 650 14px/1.45 ui-sans-serif,system-ui,sans-serif; color: var(--us-text); opacity: 1; text-decoration: none; overflow-wrap: anywhere; }
#asUsers #users .users-list-title-row > a:hover { text-decoration: underline; text-underline-offset: 3px; }
#asUsers #users .users-list-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; }
#asUsers #users .users-list-badges img { display: inline-block; width: 18px; height: 18px; margin: 0; object-fit: contain; }
#asUsers .us-empty { display: none; }
#asUsers #users:not(:has(> *)) + .us-empty, #asUsers #users > .empty-element { display: block; width: 100%; padding: 28px 14px; margin: 0; border: 1px solid var(--us-border); border-radius: 10px; color: var(--us-muted) !important; text-align: center; }
#asUsers #pagination2 { margin: 16px 0 24px; }
@media(max-width:767px) {
    #asUsers .us-panel { padding: 14px; }
    #asUsers h1 { font-size: 21px; }
    #asUsers .us-filters { grid-template-columns: minmax(0,1fr); gap: 12px; }
    #asUsers #users > .friend { gap: 12px; padding: 12px; align-items: start; }
    #asUsers #users .users-list-title-row { flex-basis: 100%; min-height: 38px; }
    #asUsers #users > .friend > div > a, #asUsers .us-add-friend { min-height: 40px; padding: 7px 9px; }
    #asUsers .us-search-controls > .us-button { min-width: 72px; }
}
@media(prefers-reduced-motion:reduce) { #asUsers #users > .friend, #asUsers .us-button, #asUsers #users > .friend > div > a { transition: none; } }

/* Custom dropdowns: options inherit the same theme as their containing page/modal. */
#asUsers select.us-select-native { display: none !important; }
#asUsers .us-select { display: inline-block; position: relative; width: 100%; min-width: 0; vertical-align: middle; }
#asUsers .as-server-select > .us-select { max-width: 600px; flex: 1 1 auto; }
body:has(#asUsers) .us-modal .input-group > .us-select { flex: 1 1 auto; width: 1%; }
#asUsers .us-select-trigger {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; height: auto;
    padding: 10px 12px; margin: 0; text-align: left; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.5;
    color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important;
    background-color: var(--us-panel) !important; background-image: var(--us-fill) !important;
    border: 1px solid var(--us-border) !important; border-radius: 9px !important;
    box-shadow: inset 0 2px 4px color-mix(in srgb,var(--us-shadow) 60%,transparent) !important;
    transition: border-color .15s,box-shadow .15s;
}
#asUsers .us-select-text { display: block; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
#asUsers .us-select-trigger::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin: -4px 2px 0 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .75; }
#asUsers .us-select-trigger[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
#asUsers .us-select-trigger:is(:hover,[aria-expanded="true"]) { border-color: var(--us-hover) !important; }
#asUsers .us-select-trigger:focus-visible { outline: 2px solid var(--us-accent) !important; outline-offset: 2px; }
#asUsers .us-select-trigger:disabled { opacity: .42 !important; cursor: not-allowed; box-shadow: none !important; }
#asUsers .us-select-menu {
    position: fixed; z-index: 1080; display: block; padding: 6px; margin: 0; list-style: none;
    min-width: 0; overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
    background-color: var(--us-panel) !important; background-image: var(--us-fill) !important;
    color: var(--us-text) !important; border: 1px solid var(--us-border) !important; border-radius: 11px !important;
    box-shadow: inset 0 1px 0 #ffffff10,0 8px 22px var(--us-shadow) !important;
    scrollbar-width: thin; scrollbar-color: var(--us-muted) transparent; font-size: 14px; text-align: left;
}
#asUsers .us-select-menu[hidden] { display: none !important; }
#asUsers .us-select-option {
    position: relative; display: block; padding: 10px 36px 10px 12px; margin: 0; min-height: 42px;
    border: 1px solid transparent !important; border-radius: 7px !important; background: transparent !important;
    color: var(--us-text) !important; -webkit-text-fill-color: var(--us-text) !important;
    font: inherit; line-height: 1.45; list-style: none; overflow-wrap: anywhere; cursor: pointer; text-align: left;
}
#asUsers .us-select-option::before { display: none !important; }
#asUsers .us-select-option[aria-selected="true"]::after { content: '✓'; position: absolute; right: 12px; top: 10px; color: currentColor; font-weight: 700; }
#asUsers .us-select-option.is-active { border-color: var(--us-hover) !important; background: color-mix(in srgb,var(--us-accent) 10%,transparent) !important; box-shadow: inset 0 1px 0 #ffffff08; }
#asUsers .us-select-option[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
#asUsers .us-select-group { padding: 8px 12px 4px; margin: 0; color: var(--us-muted) !important; font-size: 11px; font-weight: 700; list-style: none; }
@media (prefers-reduced-motion: reduce) { #asUsers .us-select-trigger { transition: none; } }

/* Same segmented pagination as notifications; retain server links as a fallback. */
#asUsers #pagination2.us-pagination-ready {
    --us-pagination-accent: var(--private-accent, var(--private-final-text, #eee));
    display: flex; justify-content: center; width: 100%; margin: 16px 0 28px;
}
html[data-private-theme="none"][data-private-mode="neutral"] #asUsers #pagination2.us-pagination-ready {
    --us-pagination-accent: var(--private-final-text, #fff);
}
#asUsers #pagination2.us-pagination-ready > .pagination { display: none !important; }
	#asUsers #pagination2 .us-pagination {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-width: 100%;
		margin: 0;
		overflow-x: auto;
		padding: 3px;
		box-sizing: border-box;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		scrollbar-width: thin;
	}
	#asUsers #pagination2 .us-pagination-pages { display: flex; flex: 0 0 auto; align-items: center; margin-left: -1px; }

	#asUsers #pagination2 .us-pagination :is(a, button, span) {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		box-sizing: border-box !important;
		min-width: 38px !important;
		height: 38px !important;
		margin: 0 !important;
		padding: 0 10px !important;
		border: 1px solid var(--private-final-border, rgba(255,255,255,.16)) !important;
		border-radius: 0 !important;
		background-color: var(--private-final-panel, #223a5a) !important;
		background-image: linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%), var(--private-panel-fill, none) !important;
		color: var(--private-final-text, #eee) !important;
		-webkit-text-fill-color: var(--private-final-text, #eee) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.065), inset 0 -2px 3px var(--private-final-shadow, rgba(0,0,0,.24)), 0 3px 7px var(--private-final-shadow, rgba(0,0,0,.24)) !important;
		font: 700 13px/1 ui-sans-serif, system-ui, sans-serif !important;
		text-decoration: none !important;
		cursor: pointer !important;
	}

	#asUsers #pagination2 .us-pagination > :is(a, button) + :is(a, button, .us-pagination-pages),
	#asUsers #pagination2 .us-pagination-pages > :is(a, span) + :is(a, span),
	#asUsers #pagination2 .us-pagination-pages + :is(a, button) { margin-left: -1px !important; }
	#asUsers #pagination2 .us-pagination > :first-child { border-radius: 9px 0 0 9px !important; }
	#asUsers #pagination2 .us-pagination > :last-child { border-radius: 0 9px 9px 0 !important; }

	#asUsers #pagination2 .us-pagination :is(a, button):not(:disabled):is(:hover, :focus-visible),
	#asUsers #pagination2 .us-pagination a.active {
		position: relative !important;
		z-index: 2 !important;
		border-color: var(--us-pagination-accent, var(--private-final-text, #eee)) !important;
		background-color: var(--private-final-hover, #292929) !important;
		background-image: var(--private-hover-fill, none) !important;
		color: var(--us-pagination-accent, var(--private-final-text, #eee)) !important;
		-webkit-text-fill-color: var(--us-pagination-accent, var(--private-final-text, #eee)) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 3px var(--private-final-shadow, rgba(0,0,0,.24)), 0 4px 9px var(--private-final-shadow, rgba(0,0,0,.28)) !important;
		outline: none !important;
	}
	#asUsers #pagination2 .us-pagination a.active {
		font-weight: 850 !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 0 var(--us-pagination-accent, var(--private-final-text, #eee)), 0 4px 9px var(--private-final-shadow, rgba(0,0,0,.28)) !important;
		cursor: default !important;
	}
	#asUsers #pagination2 .us-pagination button:disabled { opacity: .42 !important; cursor: default !important; }
	#asUsers #pagination2 .us-pagination-ellipsis {
		min-width: 30px !important;
		padding: 0 7px !important;
		border-right: 0 !important;
		border-left: 0 !important;
		box-shadow: none !important;
		cursor: default !important;
	}

@media (max-width: 767px) {
    #asUsers #pagination2 .us-pagination :is(a, button, span) {
        min-width: 34px !important; height: 36px !important; padding: 0 8px !important;
    }
}