/* Список ожидания в админке (admin_waitlist.js): фильтр, отметки, «Удалить».
   Телефон: действия строки уходят под адрес, ничего не вылезает за край;
   под пальцем отметки, фильтр и кнопки — не меньше 44 точек. */

#waitlist-list { --wl-stick: var(--topbar-h, 64px); }
#waitlist-list .wl-tools {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; margin: 0 -8px 6px; padding: 8px; border-bottom: 1px solid transparent;
}
/* Что-то отмечено — панель прилипает под шапкой: в длинном списке «Удалить
   отмеченные (N)» и счётчик на виду. Фон карточки, чтобы строки уходили под неё;
   отступы те же, что без отметок, — строка под пальцем не сдвигается. */
#waitlist-list .wl-tools.has-picked {
    position: sticky; top: var(--wl-stick); z-index: 4;
    background: var(--bg-card); border-bottom-color: var(--border);
}
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent;
    color: var(--text-mid); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wl-chip:hover { border-color: var(--border-strong); color: var(--text); }
.wl-chip[aria-pressed="true"] {
    background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--text-strong);
}
.wl-chip-n { color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.wl-chip[aria-pressed="true"] .wl-chip-n { color: inherit; }
.wl-chip:focus-visible,
.wl-hit input:focus-visible,
.wl-all input:focus-visible,
.wl-confirm-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wl-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wl-all {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
    color: var(--text-mid); font-size: 12px; cursor: pointer;
}

.wl-row { justify-content: flex-start; }
.wl-row.is-picked { background: rgba(var(--accent-rgb), 0.06); }
.wl-hit {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; margin-left: -4px; cursor: pointer;
}
.wl-hit input, .wl-all input, .wl-confirm-check input {
    width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
.wl-main { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }   /* основа 0: длинный адрес не уводит текст под отметку */
.wl-note { color: var(--text-mid); }
.wl-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.btn.btn-ghost.wl-del { color: var(--danger); }
.btn.btn-ghost.wl-del:where(:not(:disabled)):hover {
    color: var(--danger); border-color: rgba(var(--danger-rgb), 0.5); background: rgba(var(--danger-rgb), 0.08);
}
.wl-none { margin: 0; padding: 14px 0; }

/* Отметка «и отозвать приглашение» в общем окне подтверждения (#vmodal-body). */
.wl-confirm-check {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    white-space: normal; cursor: pointer;
}
.wl-confirm-check input { flex: 0 0 auto; margin-top: 3px; }

/* Выданное приглашение: ссылка на случай, если письмо не ушло. */
.wl-invite-head { margin-bottom: 4px; color: var(--text-dim); font-size: 12px; }
.wl-invite-link { display: flex; gap: 8px; }
.wl-invite-link input {
    flex: 1; min-width: 0; padding: 8px; font-size: 11px;
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
}

@media (pointer: coarse) {
    .wl-hit { width: 44px; height: 44px; margin-left: -10px; }
    .wl-chip, .wl-all { min-height: 44px; }
    .wl-hit input, .wl-all input, .wl-confirm-check input { width: 20px; height: 20px; }
    #waitlist-list .btn-sm, #waitlist-new-invite .btn-sm { min-height: 44px; }
}

/* Телефон и планшет стоя: шапка .m-header — 60 точек. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #waitlist-list { --wl-stick: calc(var(--safe-top, 0px) + 60px); }
}
@media (max-width: 767px) {
    /* Под шапкой ещё липкая полоса вкладок админки (52 точки, vault.css). Прилипает
       только строка с кнопкой: панель без своей коробки (display: contents), фильтр
       уезжает вместе со списком. */
    #waitlist-list { --wl-stick: calc(var(--safe-top, 0px) + 112px); }
    #waitlist-list .wl-tools, #waitlist-list .wl-tools.has-picked { display: contents; }
    .wl-chips { margin: 0 0 4px; }
    .wl-bulk {
        justify-content: space-between; margin: 0 -14px 6px; padding: 6px 14px;
        border-bottom: 1px solid transparent;
    }
    #waitlist-list .wl-tools.has-picked .wl-bulk {
        position: sticky; top: var(--wl-stick); z-index: 4;
        background: var(--bg-card); border-bottom-color: var(--border);
    }
    .wl-row { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
    .wl-acts { width: 100%; justify-content: flex-start; padding-left: 40px; }
    .wl-invite-link { flex-wrap: wrap; }
    .wl-invite-link input { flex-basis: 100%; }
}
@media (max-width: 767px) and (pointer: coarse) {
    .wl-acts { padding-left: 46px; }
}