/*
 * Стили профиля пользователей — копия templates/default/controllers/users/
 * styles.css (InstantCMS 2.18.2) с правками В1 (T44, docs/DESIGN-FORMS.md
 * §10): бейджи «Рейтинг/Репутация» и счётчики контента — карточки В1,
 * цвета токенами (светлая и тёмная тема), на телефоне бейджи не разъезжаются.
 * «Последний IP» на странице профиля показывается только админам — это
 * серверная проверка ядра (profile_view.tpl.php), шаблоном не управляется.
 * При обновлении InstantCMS сверить с ядерным файлом.
 */

#user_profile {
    clear:both;
    overflow: hidden;
}

#user_profile_title {
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 42px;
}
#user_profile_title .name h1 {
    margin: 0;
}
#user_profile_title .name h1 > sup {
    font-size: 12px;
    display: inline-block;
    margin: -5px 0 0 0px;
    background: none;
    padding: 0;
}
#user_profile_title .name.name_with_status h1 {
    font-size: 24px;
}
#user_profile_title .avatar, #user_profile_title .name {
    display: inline-block;
    vertical-align: middle;
}

#user_profile_title .avatar img { display:block; border-radius: 50%; }
#user_profile_title .name_with_status { line-height: 28px; margin-top:-4px; }
#user_profile_title .name a { color: var(--ink); text-decoration: none; }
#user_profile_title .name a:hover { text-decoration: underline; }

#user_profile_title .status { font-size:12px; line-height: normal;  }
#user_profile_title .status .text { color: var(--muted); }
#user_profile_title .status .reply {
    margin-left:5px;
    padding-left:18px;
    background:url("../../images/icons/comment-small.png") no-repeat left center;
}

#user_profile_title .status .delete {
    padding-left: 5px;
}

#user_profile_title .is_locked{
    font-size: small;
    color: var(--danger-ink);
    margin-left:15px;
}

/* ========================================================================== */

/* Бейджи «Репутация» (карма) и «Рейтинг» (§10, T44): карточки В1 —
   --card, радиус 18, тень --shadow; значения --ink, подписи --muted;
   синий ядерный блок и белые цифры заменены токенами (обе темы) */
#user_profile_rates, #user_profile_ratings {
    float:right;
    position: relative;
}
#user_profile_ratings {
    margin-right: 10px;
}
#user_profile_rates .block, #user_profile_ratings .block {
    line-height: 20px;
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 20px;
    background-color: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
    text-align: center;
}
#user_profile_ratings .block {
    background-color: var(--card);
    color: var(--ink);
}
.block .user_ratings_hint {
    color: var(--muted);
    line-height: normal;
    font-size: 12px;
}
#user_profile_ratings .positive { color: var(--ok); }
#user_profile_rates .negative { color: var(--danger-ink); }
#user_profile_rates .positive { color: var(--ok); }
#user_profile_rates .karma .value,
#user_profile_rates .karma .thumb{
    display: inline-block;
}
#user_profile_rates .karma .thumb{
    display:inline-block;
    width:16px;
    height:16px;
    background: url("../../images/icons/vote_thumbs.png") no-repeat left center;
    margin-top:2px;
    opacity: 0.5;
}
#user_profile_rates .karma .thumb:hover{
    opacity:1;
}
#user_profile_rates .karma .thumb_up{
    background-position: 0 0;
    margin-right:5px;
}
#user_profile_rates .karma .thumb_down{
    background-position: -16px 0;
    margin-left:5px;
}

/* ========================================================================== */

#user_status_widget{
    background-color: var(--tint);
    padding:5px;
    border-radius: 8px;
    margin-top:-5px;
    overflow: hidden;
}

#user_status_widget .input{
    min-height: 44px;
    padding: 0 16px;
    border-color: var(--field-line);
    border-radius: var(--r-pill);
    background: var(--field-bg);
    color: var(--ink);
    font-size: 15px;
}

#user_status_widget.loading {
    background-position: center center;
}

#user_status_widget.loading .input{
    visibility: hidden;
}

/* ========================================================================== */

#user_profile_tabs { margin-top:15px; }
#user_content_pills { margin-bottom: 20px; }
#user_content_folders { margin-bottom: 20px; }

/* ========================================================================== */

#user_profile #left_column {
    float:left;
}
#user_profile #right_column {
    overflow: auto;
}

/* Блоки левой колонки (§10, T44): карточки В1 вместо ядерной «таблицы»
   с рамками #B3C2C9 — на тёмном фоне рамки нечитаемы */
#user_profile #left_column .block{
    background: var(--card);
    border: none;
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    margin-right: 15px;
    margin-bottom: 12px;
    min-width: 200px;
    padding:12px;
}

#user_profile #left_column .block:last-child{
    border: none;
}

/* ========================================================================== */

#user_profile #avatar {
    padding-bottom:0px;
    text-align: center;
}

/* ========================================================================== */

#user_profile .block .details,
#user_profile .block .details li {
    margin:0;
    padding:0;
    list-style: none;
    color: var(--muted);
    font-size:12px;
}

#user_profile .block .details strong,
#user_profile .block .block-title {
    color: var(--ink);
    font-weight:normal;
}

#user_profile .block .details .online{
    color: var(--ok);
}

#user_profile .block .block-title {
    margin-bottom:6px;
    font-weight: bold;
}

/* ========================================================================== */

/* Счётчики контента (§10, T44): строки-чипы — ссылка --ink, счётчик в
   пилюле на --tint цветом --accent-ink; вместо ядерных строк с рамками */
#user_profile .block .content_counts,
#user_profile .block .content_counts li {
    list-style: none; margin:0; padding:0;
}

#user_profile .block .content_counts {
    margin:0;
}

#user_profile .block .content_counts li {
    border-bottom: none;
}

#user_profile .block .content_counts li:last-child {
    border:none;
}

#user_profile .block .content_counts a {
    color: var(--ink);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:36px;
    padding:4px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

#user_profile .block .content_counts a:hover {
    background: var(--tint);
    text-decoration:none;
}

#user_profile .block .content_counts a .counter {
    display:inline-block;
    overflow:hidden;
    min-width:28px;
    height:22px;
    line-height:22px;
    text-align:center;
    padding:0 8px;
    border-radius: var(--r-pill);
    background: var(--tint);
    color: var(--accent-ink);
    font-size:12px;
    font-weight:800;
}

/* ========================================================================== */

#user_profile .friends-list {
    overflow: hidden;
    max-width: 200px;
}

#user_profile .friends-list a {
    text-decoration:none;
    display: block;
    float:left;
    overflow: hidden;
    margin-right: 1px;
    margin-bottom: 1px;
}

#user_profile .friends-list a span {
    display: block;
    float: left;
    height:32px;
    line-height:32px;
}

#user_profile .friends-list a:hover {
    opacity: 0.75;
}

/* ========================================================================== */

#user_profile #information{
    padding:0px;
}

#user_profile #information .fieldset_title{
    border-top: dotted 1px var(--field-line);
    margin-bottom: 25px;
    margin-top:10px;
}

#user_profile #information .fieldset_title h3{
    margin:0;
    margin-top:-10px;
    background: var(--card);
    padding-right:10px;
    float:left;
    color: var(--muted);
    font-weight: normal;
    font-size:14px;
}

#user_profile #information .fieldset {
    padding-bottom:15px;
}

#user_profile #information .fieldset .field {
    margin-left:15px;
    margin-bottom: 5px;
}

#user_profile #information .fieldset .field .title{
    color: var(--muted);
}
#users_profiles_list .field {
    line-height: 18px;
    color: var(--ink);
}
#users_profiles_list .title_left {
    display: inline-block;
    margin-right: 10px;
}
#users_profiles_list .title_left + .value {
    display: inline-block;
}

#users_profiles_list .title_top { margin-bottom:5px; }
/* ========================================================================== */

#users_karma_log_list .date{
    color: var(--muted);
    padding-left:5px;
    font-size:12px;
}

#users_karma_log_list .comment{
    margin-top: 4px;
    line-height: 18px;
}

#users_karma_log_list .value{
    float:right;
    margin-right: 0;
    border-radius: 4px;
    padding:3px;
}

#users_karma_log_list .value span{
    width:16px;
    height:16px;
    display: block;
    text-indent: -10000px;
    font-weight: bold;
    background: url("../../images/icons/vote_thumbs.png") no-repeat left center;
}

#users_karma_log_list .positive{
    border:solid 1px var(--ok);
}
#users_karma_log_list .positive span{
    background-position:0 0;
}

#users_karma_log_list .negative{
    border:solid 1px var(--danger-ink);
}
#users_karma_log_list .negative span{
    background-position:-16px 0;
}

#groups_invite_window{ padding:20px; }
#groups_invite_window h3 { margin:0; }
#groups_invite_window .list { margin:10px 0; }
#groups_invite_window .list select { width:300px; }

.buttons_delete_profile {
    float: right;
}
input.button.delete_profile {
    background: #c0392b;
}
input.button.delete_profile:hover {
    background: #e74c3c;
}

@media screen and (max-width: 640px) {
    #user_profile #left_column { float:none; }
    #user_profile #left_column .block {
        margin-right: 0;
    }
    #user_profile #left_column .block:last-child {
        margin-bottom: 15px;
    }
    #user_profile #left_column #avatar { display: block; margin-right: 0; }
    #user_profile #left_column #avatar img { width:100%; max-width:250px; }
    #user_profile_title .avatar { display:none; }
    #user_profile_title .name { padding-left:0; }
}

/* Редактирование профиля на телефоне (T44, DESIGN-FORMS.md §10, аудит T48
   классов «а» и «б»): поле «Адрес профиля» с длинным префиксом ядра
   (http://…/users/) не влезало в строку, кнопка «Удалить профиль»
   наезжала на «Сохранить», таблица сеансов вылезала на 25px.
   Правила только раскладывают штатную разметку ядра, поля и имена не
   меняются. */
@media screen and (max-width: 768px) {
    .m-body form .input-prefix-suffix { flex-wrap: wrap; }
    .m-body form .input-prefix-suffix .prefix,
    .m-body form .input-prefix-suffix .suffix {
        flex: 1 0 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .m-body form .input-prefix-suffix .prefix {
        border-right: 1.5px solid var(--field-line);
        border-radius: 16px 16px 0 0;
    }
    .m-body form .input-prefix-suffix .suffix {
        border-left: 1.5px solid var(--field-line);
        border-radius: 0 0 16px 16px;
    }
    .m-body form .input-prefix-suffix .input {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        border-radius: 0 0 16px 16px;
    }
    .m-body form .input-prefix-suffix .prefix ~ .input { border-top: none; }
    .m-body form .input-prefix-suffix .input:first-child { border-radius: 16px; }

    .buttons_delete_profile {
        float: none;
        clear: both;
        margin-top: 12px;
    }
    .buttons_delete_profile .btn { width: 100%; }

    .sess_messages + .data_list {
        width: 100%;
        table-layout: fixed;
    }
    .sess_messages + .data_list th,
    .sess_messages + .data_list td {
        padding: 6px 4px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }
    .sess_messages + .data_list th.actions { width: 52px; }
}