.nav-tabs .nav-link {
    color: #666 !important; /* обычное состояние */
}

.nav-tabs .nav-link:hover {
    color: #000 !important; /* при наведении */
}

.nav-tabs .nav-link.active {
    color: #000 !important; /* активный таб */
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff;
}

.friend-avatar-sm {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.friend-name {
  color: #222;
  font-weight: 500;
  text-decoration: none;
  margin-left: .5rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-name:hover {
  color: #0056b3;
  text-decoration: underline;
}

.friend-accept-btn {
  padding: 6px 14px;
  font-size: 14px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.friend-accept-btn:hover {
  background-color: #0056b3;
  cursor: pointer;
}

/* Универсальные кнопки запросов дружбы */
:root{
  --btn-radius: 10px;
  --btn-h: 34px;
  --btn-pad-x: 12px;
  --btn-font: 13px;
  --approve-bg: #6185b4;
  --approve-bg-hover: #516e96;
  --approve-text: #fff;
  --approve-border: transparent;

  --decline-bg: #f1f3f5;
  --decline-bg-hover: #e9ecef;
  --decline-text: #495057;
  --decline-border: #dfe3e6;

  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* контейнер пары, чтобы кнопки стояли ровно и не наезжали друг на друга */
.friend-actions{
  display:flex; align-items:center;
}

/* базовая кнопка */
.friend-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h);
  padding:0 var(--btn-pad-x);
  font-size:var(--btn-font); line-height:1; font-weight:600;
  border-radius:var(--btn-radius);
  border:1px solid transparent;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
  box-shadow:var(--shadow);
}
.friend-btn:active{ transform:translateY(1px); }
.friend-btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* варианты */
.friend-btn--approve{
  background:var(--approve-bg); color:var(--approve-text);
  border-color:var(--approve-border);
}
.friend-btn--approve:hover{ background:var(--approve-bg-hover); }

.friend-btn--decline{
  background:var(--decline-bg); color:var(--decline-text);
  border-color:var(--decline-border);
}
.friend-btn--decline:hover{
  background:var(--decline-bg-hover);
  border-color:#d0d7dc;
}

/* размеры */
.friend-btn--sm{ --btn-h: 30px; --btn-pad-x: 10px; --btn-font: 13px; }
.friend-btn--lg{ --btn-h: 42px; --btn-pad-x: 18px; --btn-font: 15px; }

/* иконка (если используешь) */
.friend-btn > .icon{ margin-right:8px; display:inline-flex; }

/* компактная пара в одну строку на узких экранах */
@media (max-width: 480px){
  .friend-actions{ gap:8px; }
  .friend-btn{ flex:1 0 auto; }
}

/* --- Мобильное меню --- */
.friend-actions-wrap{ position:relative; display:flex; align-items:center; gap:10px; justify-content: right; }

.friend-card { position: relative; overflow: visible; }
.friend-row { display:flex; align-items:center; }                     /* компактный промежуток внутри строки */

/* Кнопка 3-точки */
.friend-menu { padding:8px; border:0; border-radius:14px; min-width:120px;
  box-shadow: 0 6px 20px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
}
.friend-menu-item i{ font-size:16px; margin-right:8px; }
.friend-menu-item:hover{ background:#f3f4f6; }
.friend-menu-item.text-danger i{ color:#dc2626; }

/* ① Имя должно ужиматься, а не выпихивать кнопку */
.name-wrap { flex: 1 1 auto; min-width: 0; }

/* ② Кнопка справа фиксированной ширины, не сжимается */
.friend-row > .dropdown { flex: 0 0 auto; margin-left: 8px; }

/* ③ На всякий случай ограничим максимум ширины блока с именем
      так, чтобы оставалось место под кнопку (36px + отступы) */
.friend-row .name-wrap { max-width: calc(100% - 44px); }

/* Триггер (стрелочка/иконка) */
.friend-menu-trigger-1{
  display:none; /* скрыт на десктопе */
  width:24px; height:24px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:#6b7280; /* серый */
  transition:transform .15s ease, color .15s ease;
}
.friend-menu-trigger-1:hover{ color:#111; }

/* Линия с аватаром и именем: даём возможность обрезать текст */
.user-line { min-width: 0; }

/* Трёхточечная кнопка иконкой */
.friend-btn.friend-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0; border: none; background: #fff;
  border-radius: 10px;
}
.friend-btn.friend-btn--icon i { font-size: 16px; }

/* На очень узких экранах — чуть меньше иконки, чтобы всё влезало */
@media (max-width: 380px) {
  .friend-btn.friend-btn--icon { width: 30px; height: 30px; }
  .friend-btn.friend-btn--icon i { font-size: 14px; }
}

.friend-btn--icon:hover i {
  opacity: 0.8;
}

/* Кнопка с тремя точками */
.friend-menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:27px; padding:0;
  border:1px solid #e5e7eb; background:#fff; border-radius:12px;
}
.friend-menu-btn:hover{ background:#f9fafb; }

/* Кнопки внутри меню */
.friend-menu-item{
  display:flex; align-items:center; width:100%; border:0; background:#fff;
  border-radius:10px; padding:6px 6px; font-size:14px;
  transition: background .15s ease, transform .05s ease;
  text-decoration:none;
}
.friend-menu-item + form .friend-menu-item{ margin-top:6px; }

.friend-menu-item:hover{ background:#f3f4f6; }
.friend-menu-item:active{ transform: scale(.98); }

/* Цветовые акценты (приглушённые) */
.friend-menu-item.accept i{ color:#16a34a; }   /* зелёный */
.friend-menu-item.decline i{ color:#dc2626; }  /* красный */

/* На очень узких — компактнее */
@media (max-width:380px){
  .friend-menu{ min-width:90px; }
}

/* Для экранов до 576px (телефоны) */
@media (max-width: 576px) {
    .nav-link, .nav-item {
        margin-right: 0;
    }
    
    #friendsTab .nav-link {
        padding: 6px 10px;      /* было примерно 10px 16px */
        font-size: 14px;        /* чуть компактнее текст */
    }

    #friendsTab {
        flex-wrap: nowrap;      /* чтобы не ломались строки */
        overflow-x: auto;       /* можно скроллить горизонтально */
        scrollbar-width: none;  /* скрыть полосу прокрутки в Firefox */
    }

    #friendsTab::-webkit-scrollbar {
        display: none;          /* скрыть полосу прокрутки в Chrome/Safari */
    }

    /* Чтобы элементы не слипались */
    #friendsTab .nav-item {
        flex: 0 0 auto;
    }
}