/* Поиск игроков (public/search_users.php, elements/players/*, js/pages/players.js) */

.pp {
    --pp-bg: var(--background-color, #0d0d11);
    --pp-card: var(--card-bg, #141419);
    --pp-border: var(--border-color, #22222b);
    --pp-soft: var(--hover-bg-color, #1c1c24);
    --pp-text: var(--text-color, #fff);
    --pp-muted: var(--text-muted, #8b8b98);
    --pp-accent: var(--primary-color, #6a5aff);
    --pp-accent-soft: color-mix(in srgb, var(--pp-accent) 14%, transparent);
    --pp-ok: var(--success-color, #28c76f);

    max-width: var(--page-max);
    margin: 0 auto;
    padding: 26px var(--page-pad) 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--pp-text);
}
.pp h1 { font-weight: normal; margin: 0; font-size: 30px; }
.pp :is(a, button, input, select):focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--pp-accent-soft); font-size: 13px; color: var(--pp-text); }
.pp-note a { color: var(--pp-accent); }

.pp-bar { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.pp-search, .pp-select { position: relative; display: flex; align-items: center; border-radius: 12px; border: 1px solid var(--pp-border); background: var(--pp-card); color: var(--pp-muted); }
.pp-search:focus-within, .pp-select:focus-within { border-color: var(--pp-accent); }
.pp-search { flex: 1; min-width: 220px; gap: 10px; padding: 0 14px; }
.pp-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; color: var(--pp-text); font: inherit; font-size: 15px; }
.pp-search input::placeholder { color: var(--pp-muted); }
.pp-select select { appearance: none; padding: 12px 34px 12px 14px; border: 0; background: none; color: var(--pp-text); font: inherit; font-size: 14px; cursor: pointer; }
.pp-select select option { background: var(--pp-card); }
.pp-select i { position: absolute; right: 13px; font-size: 10px; pointer-events: none; }

#ppResults { display: flex; flex-direction: column; gap: 14px; transition: opacity 0.15s ease; }
#ppResults.is-loading { opacity: 0.55; }
.pp-tabs { align-self: flex-start; display: flex; flex-wrap: wrap; padding: 3px; border-radius: 11px; border: 1px solid var(--pp-border); background: var(--pp-card); }
.pp-tabs a { padding: 6px 14px; border-radius: 8px; font-size: 14px; color: var(--pp-muted); text-decoration: none; white-space: nowrap; }
.pp-tabs a small { opacity: 0.75; }
.pp-tabs a.is-on { background: var(--pp-accent); color: #fff; }
.pp-found { margin: -4px 0 0; font-size: 13px; color: var(--pp-muted); }

.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pp-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--pp-border); background: var(--pp-card); min-width: 0; }
.pp-card:hover { border-color: color-mix(in srgb, var(--pp-accent) 45%, var(--pp-border)); }
.pp-card.is-friend { border-color: color-mix(in srgb, var(--pp-ok) 35%, var(--pp-border)); }
.pp-ava img { width: 56px; height: 56px; border-radius: 13px; display: block; object-fit: cover; image-rendering: pixelated; background: var(--pp-soft); }
.pp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-name { font-size: 16px; color: var(--pp-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-name small { font-size: 11px; color: var(--pp-muted); }
.pp-name:hover { color: var(--pp-accent); }
.pp-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pp-tag { padding: 2px 8px; border-radius: 6px; font-size: 11px; background: var(--pp-soft); color: var(--pp-muted); white-space: nowrap; }
.pp-tag.is-resident { background: var(--pp-accent-soft); color: var(--pp-accent); }
.pp-tag.is-role { background: color-mix(in srgb, #f5a524 15%, transparent); color: #e0951a; }
.pp-tag.is-friend { background: color-mix(in srgb, var(--pp-ok) 14%, transparent); color: var(--pp-ok); }
.pp-since { font-size: 12px; color: var(--pp-muted); }

.pp-actions { flex-basis: 100%; display: flex; gap: 6px; }
.pp-actions .pp-btn:first-child { flex: 1; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 36px; height: 34px; padding: 0 11px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--pp-border); background: var(--pp-soft); color: var(--pp-text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pp-btn:hover:not(:disabled) { border-color: var(--pp-accent); }
.pp-btn.primary { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.pp-btn.ghost { background: none; color: var(--pp-muted); }
.pp-btn.ghost:hover { color: var(--error-color, #ea5455); border-color: var(--error-color, #ea5455); }
.pp-btn:disabled { opacity: 0.6; cursor: default; }

.pp-more { align-self: center; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--pp-border); background: var(--pp-soft); color: var(--pp-text); font-size: 14px; text-decoration: none; }
.pp-more.is-loading { opacity: 0.6; pointer-events: none; }
.pp-empty { padding: 50px 20px; border-radius: 16px; border: 1px dashed var(--pp-border); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--pp-muted); text-align: center; }
.pp-empty i { font-size: 30px; opacity: 0.6; }
.pp-empty p { margin: 0; }

@media (max-width: 760px) {
    .pp { padding: 16px var(--page-pad) 30px; gap: 12px; }
    .pp h1 { font-size: 24px; }
    .pp-search { min-width: 0; flex-basis: 100%; }
    .pp-select { flex: 1; }
    .pp-tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; }
    .pp-grid { grid-template-columns: minmax(0, 1fr); }
}