/*!
 * SmitChipBar — полоса чипов в одну строку.
 * Разметка остаётся прежней (ul.nav + li.nav-item), меняется только раскладка.
 */

.scb-bar {
    display: flex;
    flex-wrap: nowrap;          /* перенос на вторую строку и был проблемой */
    align-items: center;
    /* overflow:hidden тут ставить нельзя — он режет выпадающий список «Ещё».
       Лишние чипы и так убраны атрибутом hidden, за край ничего не выходит. */
    overflow: visible;
    min-width: 0;
}

.scb-bar > li {
    flex: 0 0 auto;
    min-width: 0;
}

.scb-bar > li[hidden] {
    display: none !important;   /* атрибут должен побеждать display у .nav-item */
}

/* ── кнопка «Ещё N» ── */
.scb-more {
    margin-left: auto;          /* прижата к правому краю полосы */
}

.scb-more-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.scb-more-caret {
    font-size: .7em;
    opacity: .65;
    transition: transform .15s ease;
}

.scb-more-btn[aria-expanded="true"] .scb-more-caret {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .scb-more-caret { transition: none; }
}

/* ── выпадающий список с хвостом ── */
.scb-menu {
    /* Карточки KPI идут в разметке ниже полосы и перекрывали список.
       1080 — выше содержимого страницы, но ниже боковых панелей (1090). */
    z-index: 1080;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    min-width: 15rem;
    font-size: var(--sc-fz-sm, .875rem);
}

.scb-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.scb-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scb-menu-count {
    flex: 0 0 auto;
    font-size: .7em;
    /* Счётчики выстраиваются в столбец — цифры не пляшут по ширине */
    font-variant-numeric: tabular-nums;
}

.scb-menu-item.active,
.scb-menu-item.active:focus {
    background-color: var(--sc-brand, #43b77a);
    color: #fff;
}

.scb-menu-item.active .badge {
    background-color: rgba(255, 255, 255, .25) !important;
    color: #fff;
}

/* Клавиатурный фокус виден и на кнопке, и на пунктах списка */
.scb-more-btn:focus-visible,
.scb-menu-item:focus-visible {
    outline: 2px solid var(--sc-brand, #43b77a);
    outline-offset: 2px;
}

/* ── тёмная тема ── */
body.dark-theme .scb-more-btn,
[data-bs-theme="dark"] .scb-more-btn {
    color: #9aaab4;
}

body.dark-theme .scb-more-btn:hover,
[data-bs-theme="dark"] .scb-more-btn:hover {
    color: #d5dee4;
}

/* ── мобильный: полоса и так узкая, «Ещё» не должно прилипать к краю ── */
@media (max-width: 575.98px) {
    .scb-more-btn { padding-left: .5rem; padding-right: .5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Личный вид полосы (build 2050). Класс ставит сервер по
   UserProfile.ui_prefs.tabs_bar, поэтому полоса не мигает при загрузке.
   ═══════════════════════════════════════════════════════════════════════ */

/* Что показывать */
.scb-bar.scb-no-counts .nav-link .badge { display: none; }
.scb-bar.scb-no-icons .nav-link > i:first-child { display: none; }

/* ── Таблетки ── */
.scb-bar.scb-style-pills { border-bottom: 0; gap: 4px; }
.scb-bar.scb-style-pills .nav-link {
    border: 0 !important;
    border-radius: 999px;
    padding: .32rem .8rem;
}
.scb-bar.scb-style-pills .nav-link.active {
    background: var(--sc-brand, #43b77a);
    color: #fff;
}
.scb-bar.scb-style-pills .nav-link.active .badge {
    background: rgba(255, 255, 255, .28) !important;
    color: #fff;
}

/* ── Подчёркивание ── */
.scb-bar.scb-style-underline .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
}
.scb-bar.scb-style-underline .nav-link.active {
    border-bottom-color: var(--sc-brand, #43b77a) !important;
    color: var(--sc-brand, #43b77a);
}

/* ── Компактный: только иконки, подпись остаётся скринридеру ── */
.scb-bar.scb-style-compact .nav-link { padding: .34rem .5rem; }
.scb-bar.scb-style-compact .nav-link > i:first-child { margin-right: 0 !important; }
.scb-bar.scb-style-compact .nav-link .tp-label,
.scb-bar.scb-style-compact .nav-link .scb-text { display: none; }
/* У полосы без иконок прятать подписи нельзя — от кнопки ничего не останется. */
.scb-bar.scb-style-compact.scb-no-icons .nav-link .tp-label,
.scb-bar.scb-style-compact.scb-no-icons .nav-link .scb-text { display: inline; }

/* ── Tubelight: пилюля с подсветкой сверху ── */
.scb-bar.scb-style-tubelight { border-bottom: 0; gap: 3px; }
.scb-bar.scb-style-tubelight .nav-link {
    border: 0 !important;
    border-radius: 999px;
    position: relative;
}
.scb-bar.scb-style-tubelight .nav-link.active {
    background: rgba(67, 183, 122, .14);
    color: var(--sc-brand, #43b77a);
}
.scb-bar.scb-style-tubelight .nav-link.active::before {
    content: '';
    position: absolute;
    top: -2px; left: 20%; right: 20%;
    height: 3px;
    border-radius: 3px;
    background: var(--sc-brand, #43b77a);
    box-shadow: 0 0 10px 2px rgba(67, 183, 122, .55);
}

/* ── Свечение: цвет типа + мягкая подсветка ── */
.scb-bar.scb-style-glow { border-bottom: 0; gap: 3px; }
.scb-bar.scb-style-glow .nav-link {
    border: 0 !important;
    border-radius: 8px;
}
.scb-bar.scb-style-glow .nav-link.active {
    background: rgba(67, 183, 122, .12);
    box-shadow: 0 0 0 1px rgba(67, 183, 122, .45), 0 0 12px rgba(67, 183, 122, .35);
}
/* Иконка типа в этом стиле светится своим цветом — она и так им покрашена. */
.scb-bar.scb-style-glow .nav-link > i:first-child {
    filter: drop-shadow(0 0 4px currentColor);
}

@media (prefers-reduced-motion: reduce) {
    .scb-bar .nav-link { transition: none; }
}

/* ── Кнопка «Параметры» ── */
.scb-gear { margin-left: 2px; }
.scb-gear-btn {
    background: none;
    border: 0;
    color: #9aa4ae;
    cursor: pointer;
    padding: .3rem .5rem;
    line-height: 1;
}
.scb-gear-btn:hover { color: var(--sc-brand, #43b77a); }
.scb-gear-btn:focus-visible {
    outline: 2px solid var(--sc-brand, #43b77a);
    outline-offset: 2px;
}

/* ── Панель настроек ── */
.scb-set-label {
    font-size: .74rem;
    color: #6c757d;
    margin: 10px 0 6px;
}
.scb-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
.scb-style-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 9px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.scb-style-card:hover { border-color: rgba(67, 183, 122, .55); }
.scb-style-card.sel {
    border-color: var(--sc-brand, #43b77a);
    box-shadow: 0 0 0 1px var(--sc-brand, #43b77a) inset;
}
.scb-style-card:focus-visible {
    outline: 2px solid var(--sc-brand, #43b77a);
    outline-offset: 2px;
}
.scb-style-name { font-size: .82rem; font-weight: 600; }
.scb-style-hint { font-size: .72rem; color: #6c757d; }

/* Образец внутри карточки: те же правила, что и у настоящей полосы,
   поэтому выбор видно до применения. */
.scb-style-demo {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 5px;
    pointer-events: none;
}
.scb-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .64rem;
    padding: 2px 6px;
    color: #6c757d;
    white-space: nowrap;
}
.scb-demo-chip i { font-size: .85em; }
.scb-style-demo.scb-style-classic .scb-demo-chip.active {
    border: 1px solid #dee2e6;
    border-bottom-color: transparent;
    border-radius: 5px 5px 0 0;
    color: #212529;
}
.scb-style-demo.scb-style-pills .scb-demo-chip.active,
.scb-style-demo.scb-style-tubelight .scb-demo-chip.active {
    background: var(--sc-brand, #43b77a);
    color: #fff;
    border-radius: 999px;
}
.scb-style-demo.scb-style-underline .scb-demo-chip.active {
    border-bottom: 2px solid var(--sc-brand, #43b77a);
    color: var(--sc-brand, #43b77a);
}
.scb-style-demo.scb-style-compact .scb-demo-chip { font-size: 0; gap: 0; padding: 2px 4px; }
.scb-style-demo.scb-style-compact .scb-demo-chip i { font-size: .78rem; }
.scb-style-demo.scb-style-compact .scb-demo-chip.active { color: var(--sc-brand, #43b77a); }
.scb-style-demo.scb-style-glow .scb-demo-chip.active {
    background: rgba(67, 183, 122, .14);
    color: var(--sc-brand, #43b77a);
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(67, 183, 122, .45);
}

.scb-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 2px;
    cursor: pointer;
    margin: 0;
}
.scb-opt .form-check { display: inline-flex; align-items: center; min-height: auto; padding-left: 2.4em; }
.scb-opt-name { display: block; font-size: .84rem; }
.scb-opt-hint { display: block; font-size: .72rem; color: #6c757d; line-height: 1.35; }
.scb-set-note {
    font-size: .74rem;
    color: #6c757d;
    margin: 12px 0 0;
    line-height: 1.4;
}

/* Запасная панель, если SmitDrawer на странице не подключён */
.scb-settings-fallback {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 2500;
    width: min(420px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.scb-set-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── тёмная тема ── */
[data-bs-theme="dark"] .scb-style-card,
body.dark-theme .scb-style-card { border-color: #2a2f37; }
[data-bs-theme="dark"] .scb-demo-chip,
body.dark-theme .scb-demo-chip { color: #9aaab4; }
[data-bs-theme="dark"] .scb-style-demo.scb-style-classic .scb-demo-chip.active,
body.dark-theme .scb-style-demo.scb-style-classic .scb-demo-chip.active {
    border-color: #3a4049;
    color: #e9ecef;
}
[data-bs-theme="dark"] .scb-settings-fallback,
body.dark-theme .scb-settings-fallback { background: #1f2227; color: #cfd8e3; }
[data-bs-theme="dark"] .scb-gear-btn,
body.dark-theme .scb-gear-btn { color: #7f8c98; }

/* На узком экране образцы стилей идут в одну колонку */
@media (max-width: 575.98px) {
    .scb-style-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Список «Ещё N» на телефоне — шторка снизу (build 2053).
   Popper позиционирует меню от кнопки, а кнопка прижата к правому краю
   полосы: на узком экране список начинался за пределами вьюпорта, и клик
   выглядел как «ничего не произошло». inset и transform перебиваем
   !important — их Popper пишет инлайном.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .scb-menu.dropdown-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0;
    max-height: 72dvh;
    margin: 0 !important;
    padding-top: 16px;
    border: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .22);
  }
  /* Полоска-ручка: подсказывает, что список пришёл снизу. */
  .scb-menu.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 6px; left: 50%;
    width: 36px; height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: rgba(128, 128, 128, .35);
  }
  .scb-menu .scb-menu-item { padding: .6rem 1rem; font-size: .9rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Нижняя панель фильтров на телефоне (build 2059). Пять режимов, повторяют
   вкладки карточки клиента (/admin/settings/system/abonent_profile/):
   палец дотягивается до низа экрана, а верх занимает шапка.
   Панель собирается из тех же чипов, ссылки и счётчики берутся из них.
   ═══════════════════════════════════════════════════════════════════════ */
.scb-mnav { display: none; }

@media (max-width: 767.98px) {
  .scb-mnav {
    display: block;
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 1035;
    padding: 5px 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .16);
    backdrop-filter: blur(8px);
  }
  .scb-mnav-list {
    display: flex; align-items: center; justify-content: space-between;
    gap: 3px; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; scrollbar-width: none;
  }
  .scb-mnav-list::-webkit-scrollbar { display: none; }
  .scb-mnav-item { flex: 0 0 auto; }
  .scb-mnav-link {
    display: inline-flex; align-items: center; gap: 0;
    padding: 8px 10px; border-radius: 999px;
    color: #64748b; text-decoration: none; white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
  }
  .scb-mnav-link i { font-size: 1rem; opacity: .85; }
  /* Подпись раскрывается только у активной — иначе панель не влезает. */
  .scb-mnav-label {
    max-width: 0; opacity: 0; overflow: hidden;
    font-size: .72rem; font-weight: 600;
    transition: max-width .2s ease, opacity .2s ease, margin .2s ease;
  }
  .scb-mnav-item.is-active .scb-mnav-link {
    background: var(--sc-brand, #43b77a); color: #fff;
  }
  .scb-mnav-item.is-active .scb-mnav-link i { color: #fff; opacity: 1; }
  .scb-mnav-item.is-active .scb-mnav-label {
    max-width: 120px; opacity: 1; margin-left: 6px;
  }
  .scb-mnav-badge {
    margin-left: 5px; font-size: .62rem; font-weight: 700;
    background: rgba(100, 116, 139, .18); color: inherit;
    border-radius: 999px; padding: 1px 5px;
  }
  .scb-mnav-item.is-active .scb-mnav-badge { background: rgba(255, 255, 255, .28); }

  /* Полосу прячем, когда её роль взяла на себя нижняя панель.
     #tabs в responsive.css объявлен через id и !important — перебить его
     можно только таким же весом, отсюда id в селекторе. */
  .scb-bar.scb-has-mnav,
  #tabs.scb-has-mnav { display: none !important; }
  /* Контент не должен упираться в панель. */
  body:has(.scb-mnav) { padding-bottom: 64px; }
  /* Плавающая кнопка действия садилась прямо на панель вкладок: поднимаем её
     выше и делаем компактнее — на телефоне 56px занимали заметный угол. */
  body:has(.scb-mnav) .smf-fab {
    width: 46px; height: 46px; font-size: 1.15rem;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    right: 14px;
  }
  .smf-fab { width: 48px; height: 48px; font-size: 1.2rem; }

  /* ── Раскрывающиеся: панель во всю ширину снизу ── */
  .scb-mnav.scb-mnav-style-expandable {
    left: 0; right: 0; bottom: 0;
    border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
  }
  .scb-mnav-style-expandable .scb-mnav-list { justify-content: space-evenly; }
  .scb-mnav-style-expandable .scb-mnav-item.is-active .scb-mnav-link { padding: 8px 14px; }

  /* ── Панель иконок: подписи не показываем даже у активной ── */
  .scb-mnav.scb-mnav-style-icon_bar { padding: 4px; border-radius: 14px; }
  .scb-mnav-style-icon_bar .scb-mnav-list { justify-content: space-around; gap: 2px; }
  .scb-mnav-style-icon_bar .scb-mnav-label,
  .scb-mnav-style-icon_bar .scb-mnav-item.is-active .scb-mnav-label {
    max-width: 0 !important; opacity: 0 !important; margin: 0 !important;
  }
  .scb-mnav-style-icon_bar .scb-mnav-link { padding: 8px 12px; border-radius: 10px; }
  .scb-mnav-style-icon_bar .scb-mnav-link i { font-size: 1.05rem; }

  /* ── Док: активная крупнее и приподнята ── */
  .scb-mnav.scb-mnav-style-dock { padding: 6px 10px; border-radius: 22px; }
  .scb-mnav-style-dock .scb-mnav-list { justify-content: space-around; align-items: flex-end; }
  .scb-mnav-style-dock .scb-mnav-link {
    flex-direction: column; gap: 2px; padding: 6px 10px;
    transform-origin: bottom center;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s;
  }
  .scb-mnav-style-dock .scb-mnav-link i { font-size: 1.25rem; opacity: .9; }
  .scb-mnav-style-dock .scb-mnav-item.is-active .scb-mnav-link {
    transform: translateY(-6px) scale(1.16);
  }
  .scb-mnav-style-dock .scb-mnav-item.is-active .scb-mnav-label {
    max-width: 80px; margin: 1px 0 0; font-size: .58rem;
  }
  .scb-mnav-style-dock .scb-mnav-badge { display: none; }

  /* ── Цветные: свой цвет у каждой вкладки ── */
  .scb-mnav.scb-mnav-style-colored { padding: 4px 6px; }
  .scb-mnav-style-colored .scb-mnav-list { justify-content: space-around; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+1) .scb-mnav-link { --tab-glow: #43b77a; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+2) .scb-mnav-link { --tab-glow: #0d6efd; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+3) .scb-mnav-link { --tab-glow: #7b2ff7; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+4) .scb-mnav-link { --tab-glow: #e6007e; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+5) .scb-mnav-link { --tab-glow: #fd7e14; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+6) .scb-mnav-link { --tab-glow: #00a8a8; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+7) .scb-mnav-link { --tab-glow: #dc3545; }
  .scb-mnav-style-colored .scb-mnav-item:nth-child(8n+8) .scb-mnav-link { --tab-glow: #6f42c1; }
  .scb-mnav-style-colored .scb-mnav-link i { color: var(--tab-glow); opacity: 1; }
  .scb-mnav-style-colored .scb-mnav-label { display: none; }
  .scb-mnav-style-colored .scb-mnav-item.is-active .scb-mnav-link {
    background: var(--tab-glow);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--tab-glow) 50%, transparent);
  }
  .scb-mnav-style-colored .scb-mnav-item.is-active .scb-mnav-link i { color: #fff; }

  /* ── тёмная тема ── */
  [data-bs-theme="dark"] .scb-mnav,
  body.dark-theme .scb-mnav {
    background: rgba(30, 34, 40, .96);
    border-color: #3a3f47;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  }
  [data-bs-theme="dark"] .scb-mnav-link,
  body.dark-theme .scb-mnav-link { color: #9aaab4; }
}

@media (prefers-reduced-motion: reduce) {
  .scb-mnav-link,
  .scb-mnav-label { transition: none !important; }
  .scb-mnav-style-dock .scb-mnav-item.is-active .scb-mnav-link { transform: none; }
}

/* ── Иконка типа в списке «Ещё N» ── */
.scb-menu-ic { flex: 0 0 auto; width: 1.05rem; text-align: center; opacity: .9; }

/* ── Образцы мобильных режимов в панели настроек ── */
.scb-mdemo {
  display: flex; align-items: center; justify-content: space-around;
  gap: 3px; margin-bottom: 5px; padding: 4px 5px;
  border-radius: 10px; background: rgba(100, 116, 139, .1);
  pointer-events: none;
}
.scb-mdemo-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6rem; color: #64748b; padding: 2px 5px; border-radius: 999px;
}
.scb-mdemo-chip span { display: none; }
.scb-mdemo-chip i { font-size: .72rem; }
.scb-mdemo-chip.active { background: var(--sc-brand, #43b77a); color: #fff; }
.scb-mdemo-chip.active span { display: inline; }
.scb-mdemo-classic { background: transparent; justify-content: flex-start; }
.scb-mdemo-classic .scb-mdemo-chip span { display: inline; }
.scb-mdemo-classic .scb-mdemo-chip.active { border-radius: 5px; }
.scb-mdemo-icon_bar .scb-mdemo-chip.active span { display: none; }
.scb-mdemo-icon_bar .scb-mdemo-chip.active { border-radius: 6px; }
.scb-mdemo-dock .scb-mdemo-chip.active { transform: translateY(-3px) scale(1.15); }
.scb-mdemo-dock .scb-mdemo-chip.active span { display: none; }
.scb-mdemo-colored .scb-mdemo-chip span { display: none; }
.scb-mdemo-colored .scb-mdemo-chip:nth-child(1) i { color: #43b77a; }
.scb-mdemo-colored .scb-mdemo-chip:nth-child(2) i { color: #0d6efd; }
.scb-mdemo-colored .scb-mdemo-chip:nth-child(3) i { color: #7b2ff7; }
.scb-mdemo-colored .scb-mdemo-chip:nth-child(4) i { color: #fd7e14; }
.scb-mdemo-colored .scb-mdemo-chip.active i { color: #fff; }
[data-bs-theme="dark"] .scb-mdemo,
body.dark-theme .scb-mdemo { background: rgba(148, 163, 184, .14); }