/* === Власні таби налаштувань === */
/* Стиль під sidebar nav-link: прозорий фон, сірий текст, легкий ховер,
   оранжевий акцент для активної вкладки. */

.settings-tabbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.settings-tab {
  background-color: transparent;
  color: #656d77;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.settings-tab i {
  margin-right: 0.5rem;
  font-size: 1em;
  color: #9aa4b1;
  transition: color 0.15s ease;
}

.settings-tab:hover {
  background-color: #f3f5f7;
  color: #1d273b;
  transform: translateY(-1px);
}

.settings-tab:hover i {
  color: #f76707;
}

.settings-tab.active {
  background-color: rgba(247, 103, 7, 0.12);
  color: #f76707;
  font-weight: 700;
}

.settings-tab.active i {
  color: #f76707;
}

/* Панелі вкладок: показуємо лише активну. Початковий стан заданий у markup
   (settings-hidden на неактивних), тож FOUC немає. */
.settings-tab-panel.settings-hidden {
  display: none !important;
}

/* Бейджі доступних мов у таблиці матеріалів */
.lang-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.lang-badge-on {
  background: #fff3e6;
  color: #c75509;
}
.lang-badge-off {
  background: #f1f3f5;
  color: #adb5bd;
}

/* Карта «Окупована територія»: зум кнопками вимкнено (zoomControl = FALSE),
   зум — колесом миші / подвійним кліком. Прибираємо фокус-обведення самого
   контейнера карти на всяк випадок. */
.settings-page .leaflet-container,
.settings-page .leaflet-container:focus,
.settings-page .leaflet-interactive:focus {
  outline: none !important;
}

/* Пагінація зверху (лише таблиці вкладки «Дані», клас rt-top-pagination):
   лічильник рядків, навігація сторінками і вибір кількості рядків —
   над таблицею. reactable 0.4.x: .rt-search → .rt-table → .rt-pagination. */
.rt-top-pagination {
  display: flex;
  flex-direction: column;
}
.rt-top-pagination .rt-search {
  order: -2;
}
.rt-top-pagination .rt-pagination {
  order: -1;
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 6px;
}