/*
 * ForFeed compatibility layer for the LTE template.
 * Loaded after the LTE and component styles so fixes stay local to this theme.
 */

/*
 * Modern's list templates do not constrain the image holder. Old group logos
 * can therefore render at their original 224-300px size while newer thumbs are
 * 64px. Keep user avatars and group logos on one predictable square canvas.
 */
#users_profiles_list > .item.media > a.icms-user-avatar,
.groups-list > .item.media > a.icms-user-avatar,
.item.media > a.icms-user-avatar[href^="/u/"],
.item.media > a.icms-user-avatar[href^="/users/"],
.item.media > a.icms-user-avatar[href^="/clubs/"] {
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    min-width: 64px;
    max-width: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: #f1f3f5;
}

#users_profiles_list > .item.media > a.icms-user-avatar > *,
.groups-list > .item.media > a.icms-user-avatar > *,
.item.media > a.icms-user-avatar[href^="/u/"] > *,
.item.media > a.icms-user-avatar[href^="/users/"] > *,
.item.media > a.icms-user-avatar[href^="/clubs/"] > * {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    color: transparent;
    font-size: 0;
}

#users_profiles_list > .item.media > .media-body,
.groups-list > .item.media > .media-body {
    min-width: 0;
}

#users_profiles_list > .item.media > .media-body h5,
.groups-list > .item.media > .media-body h5,
#users_profiles_list > .item.media > .media-body a,
.groups-list > .item.media > .media-body a {
    overflow-wrap: anywhere;
}

/* Group page heading: avoid using an old logo's full source dimensions. */
h1.d-flex.align-items-center > .avatar.icms-user-avatar {
    align-items: center;
    justify-content: center;
    flex: 0 0 144px;
    width: 144px;
    height: 144px;
    min-width: 144px;
    max-width: 144px;
    overflow: hidden;
    border-radius: 50%;
    background: #f1f3f5;
}

h1.d-flex.align-items-center > .avatar.icms-user-avatar > * {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    color: transparent;
    font-size: 0;
}

h1.d-flex.align-items-center > .avatar.icms-user-avatar + span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The sidebar becomes icon-only when collapsed, so keep native SVGs aligned. */
.main-sidebar .nav-sidebar .nav-link > .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    min-width: 1.6rem;
    margin-right: .35rem;
}

.main-sidebar .nav-sidebar .nav-link > .nav-icon > .icms-svg-icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* Parent title/icon follows its URL; the wide arrow remains the tree toggle. */
.main-sidebar .nav-sidebar .nav-link[data-lte-sidebar-parent-link] {
    padding-right: 3rem;
}

.main-sidebar .nav-sidebar .lte-sidebar-tree-toggle {
    cursor: pointer;
}

.main-sidebar .nav-sidebar .lte-sidebar-tree-toggle::before {
    content: "";
    position: absolute;
    inset: -.75rem -1rem;
}

.main-sidebar .nav-sidebar .lte-sidebar-tree-toggle:focus-visible {
    border-radius: .25rem;
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/*
 * Legacy avatars can point to the original image instead of a generated
 * thumbnail. Fix the holders as well as their children so one old image does
 * not stretch the whole friends row, profile heading or Smartwall tooltip.
 */
#left_column .content_counts .friends-list > .icms-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    line-height: 0;
}

#left_column .content_counts .friends-list > .icms-user-avatar > * {
    display: block;
    width: 36px !important;
    height: 36px !important;
    min-width: 0;
    min-height: 0;
    max-width: 36px;
    max-height: 36px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

#user_profile_title > .avatar.icms-user-avatar {
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    line-height: 0;
}

#user_profile_title > .avatar.icms-user-avatar > * {
    display: block;
    width: 64px !important;
    height: 64px !important;
    min-width: 0;
    min-height: 0;
    max-width: 64px;
    max-height: 64px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.tpd-content .sw_user_infobox,
.sw_user_infobox {
    min-height: 64px;
}

.tpd-content .sw_user_infobox .sw_ui_avatar,
.sw_user_infobox .sw_ui_avatar {
    display: block;
    width: 64px;
    height: 64px;
    min-width: 64px;
    max-width: 64px;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
}

.tpd-content .sw_user_infobox .sw_ui_avatar > *,
.sw_user_infobox .sw_ui_avatar > * {
    display: block;
    width: 64px !important;
    height: 64px !important;
    min-width: 0;
    min-height: 0;
    max-width: 64px;
    max-height: 64px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.dark-mode #users_profiles_list > .item.media > a.icms-user-avatar,
.dark-mode .groups-list > .item.media > a.icms-user-avatar,
.dark-mode .item.media > a.icms-user-avatar[href^="/u/"],
.dark-mode .item.media > a.icms-user-avatar[href^="/users/"],
.dark-mode .item.media > a.icms-user-avatar[href^="/clubs/"],
.dark-mode h1.d-flex.align-items-center > .avatar.icms-user-avatar {
    background: var(--lte-surface-raised, #2d343a);
}

@media (max-width: 575.98px) {
    /* Undo the 300px override in my.css and restore Bootstrap's sm breakpoint. */
    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .float-sm-right {
        float: none !important;
    }

    h1.d-flex.align-items-center > .avatar.icms-user-avatar {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        min-width: 72px;
        max-width: 72px;
        margin-right: .75rem !important;
    }

    #users_profiles_list > .item.media > a.icms-user-avatar,
    .groups-list > .item.media > a.icms-user-avatar,
    .item.media > a.icms-user-avatar[href^="/u/"],
    .item.media > a.icms-user-avatar[href^="/users/"],
    .item.media > a.icms-user-avatar[href^="/clubs/"] {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        min-width: 56px;
        max-width: 56px;
        margin-right: .75rem !important;
    }

    .groups-list > .item.media,
    #users_profiles_list > .item.media {
        align-items: flex-start !important;
    }
}