/*
 *  WakcedonDesign5 - css/modules/user.css
 *
 *  Page-specific styles for the "user" pages.
 *
 *  RULES (see docs/namelessmc-design-playbook.md):
 *  1. Global theme (colors for light + dark) lives ONLY in css/custom.css
 *     under :root and body.dark, as --wk-* variables.
 *  2. This module must reference those variables (var(--wk-...)) and must
 *     NOT redefine colors, backgrounds or borders per theme.
 *  3. Keep here only layout, sizes, spacing, radius, animations, hover
 *     states and responsive rules that are unique to the user pages.
 *  4. Everything below is scoped under #page-members so /profile and
 *     /user pages are not affected by the members restyle.
 */

/* ============================================================
 *  [ PAGE SCAFFOLD ] — heading
 * ============================================================ */

#page-members h2.ui.header {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.3;
}

#page-members .ui.message {
    border-radius: var(--wk-radius-md);
}

/* ============================================================
 *  [ SIDEBAR MENU ] — overview & member lists
 * ============================================================ */

#page-members .ui.fluid.vertical.menu.pointing {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    padding: .6rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

#page-members .ui.fluid.vertical.menu.pointing .item {
    color: var(--wk-text);
    border: none;
    border-radius: var(--wk-radius-md);
    padding: .85rem 1rem;
    margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}

#page-members .ui.fluid.vertical.menu.pointing .item i.icon {
    color: var(--wk-text-muted);
    transition: color .15s ease;
}

#page-members .ui.fluid.vertical.menu.pointing .item:hover {
    background: color-mix(in srgb, var(--wk-accent) 8%, transparent);
    color: var(--wk-text);
}

#page-members .ui.fluid.vertical.menu.pointing .item:hover i.icon {
    color: var(--wk-accent);
}

#page-members .ui.fluid.vertical.menu.pointing .item.active {
    background: color-mix(in srgb, var(--wk-accent) 14%, var(--wk-surface));
    color: var(--wk-accent-hover);
    font-weight: 700;
}

#page-members .ui.fluid.vertical.menu.pointing .item.active i.icon {
    color: var(--wk-accent);
}

#page-members .ui.vertical.pointing.menu .active.item:after {
    display: none;
}

/* ============================================================
 *  [ SIDEBAR CARDS ] — find member, view group, new members
 * ============================================================ */

#page-members .ui.fluid.card {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    /* Не обрезаем выпадающие списки: дропдаун «Просмотр группы» и
       результаты поиска открываются ниже карточки. */
    overflow: visible;
    margin-bottom: 1.25rem;
}

#page-members .ui.fluid.card > .content:first-child {
    padding: 1.25rem 1.4rem;
}

#page-members .ui.fluid.card h4.ui.header {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--wk-border);
    padding-bottom: .6rem;
    margin-bottom: .9rem;
}

#page-members .ui.fluid.card .content .description {
    color: var(--wk-text-muted);
}

/* -- search field -------------------------------------------- */

#page-members .ui.search .ui.icon.input input {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-md);
    color: var(--wk-text);
}

#page-members .ui.search .ui.icon.input input:focus {
    border-color: var(--wk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-accent) 20%, transparent);
}

#page-members .ui.search .ui.icon.input .search.icon {
    color: var(--wk-text-muted);
}

/* -- search results dropdown -------------------------------- */

#page-members .ui.search > .results {
    background: var(--wk-surface-raised);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-md);
    box-shadow: var(--wk-shadow-md);
    overflow: hidden;
}

#page-members .ui.search > .results .result {
    background: transparent;
    border-bottom: 1px solid var(--wk-border);
    transition: background .15s ease;
}

#page-members .ui.search > .results .result:hover {
    background: color-mix(in srgb, var(--wk-accent) 8%, transparent);
}

#page-members .ui.search > .results .result .image {
    border-radius: 50%;
}

#page-members .ui.search > .results .result .title {
    color: var(--wk-heading);
}

#page-members .ui.search > .results .result .description {
    color: var(--wk-text-muted);
}

/* -- view group dropdown ------------------------------------- */

#page-members .ui.selection.dropdown {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-md);
    color: var(--wk-text);
}

#page-members .ui.selection.dropdown {
    position: relative;
    z-index: 30;
}

#page-members .ui.selection.dropdown .menu {
    background: var(--wk-surface-raised);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-md);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}

#page-members .ui.selection.dropdown .menu > .item {
    color: var(--wk-text);
    transition: background .15s ease;
}

#page-members .ui.selection.dropdown .menu > .item:hover {
    background: color-mix(in srgb, var(--wk-accent) 8%, transparent);
}

/* -- new members grid ---------------------------------------- */

#page-members #new-members-grid {
    padding: 0;
}

#page-members #new-members-grid .column {
    padding: .35rem;
}

#page-members #new-members-grid .column a {
    display: block;
}

#page-members #new-members-grid img.ui.circular.image {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--wk-border-strong);
    box-shadow: 0 0 0 3px var(--wk-surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#page-members #new-members-grid .column a:hover img.ui.circular.image {
    border-color: var(--wk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-accent) 30%, transparent);
    transform: translateY(-2px);
}

/* ============================================================
 *  [ MEMBER LISTS ] — main content segment
 * ============================================================ */

#page-members .ui.stackable.equal.width.left.aligned.three.column.grid.segment {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    padding: 1.5rem 1.75rem;
}

#page-members .ui.grid.segment .column h3 {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 1rem;
}

/* -- member rows --------------------------------------------- */

#page-members .ui.list.selection > .item {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-md);
    padding: .85rem 1.1rem;
    margin-bottom: .65rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

#page-members .ui.list.selection > .item:hover {
    background: color-mix(in srgb, var(--wk-accent) 6%, var(--wk-surface));
    border-color: color-mix(in srgb, var(--wk-accent) 45%, var(--wk-border));
}

#page-members .ui.list.selection > .item .ui.avatar.image {
    border-radius: 50%;
    border: 2px solid var(--wk-border-strong);
    box-shadow: 0 0 0 2px var(--wk-surface-raised);
    flex-shrink: 0;
}

#page-members .ui.list.selection > .item .right.floated.content {
    float: none;
    margin-left: auto;
    flex-shrink: 0;
}

#page-members .ui.list.selection > .item .right.floated.content h3.ui.header {
    color: var(--wk-accent);
    font-weight: 800;
    margin: 0;
}

#page-members .ui.list.selection > .item .middle.aligned.content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .85rem;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#page-members .ui.list.selection > .item .middle.aligned.content > span {
    color: var(--wk-text);
    font-weight: 700;
}

#page-members .ui.list.selection > .item .middle.aligned.content .description {
    flex-basis: 100%;
    color: var(--wk-text-muted);
    font-size: .9rem;
}

#page-members .ui.list.selection > .item .middle.aligned.content .description .ui.text.small {
    color: var(--wk-text-muted);
}

/* -- "view all" button ---------------------------------------- */

#page-members .ui.grey.basic.button {
    background: var(--wk-surface-raised);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-md);
    color: var(--wk-link);
    box-shadow: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

#page-members .ui.grey.basic.button:hover {
    color: var(--wk-accent-hover);
    border-color: var(--wk-accent);
    background: color-mix(in srgb, var(--wk-accent) 8%, transparent);
}

/* ============================================================
 *  [ PAGINATION ]
 * ============================================================ */

#page-members .ui.pagination.menu {
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-md);
    box-shadow: var(--wk-shadow-sm);
    margin: 1rem 0;
}

#page-members .ui.pagination.menu .item {
    color: var(--wk-text);
}

#page-members .ui.pagination.menu .item.active {
    background: var(--wk-accent);
    color: var(--wk-accent-contrast);
}

/* ============================================================
 *  [ RESPONSIVE ]
 * ============================================================ */

@media only screen and (max-width: 768px) {
    #page-members .ui.stackable.equal.width.left.aligned.three.column.grid.segment {
        padding: 1.1rem 1.15rem;
    }

    #page-members .ui.fluid.card > .content:first-child {
        padding: 1rem 1.15rem;
    }

    #page-members .ui.list.selection > .item {
        padding: .75rem .9rem;
    }
}