/* Шапка админ-страницы — общая для /admin/gallery* и /admin/content/*.
   Порядок блоков задан в partials/admin_page_header.html:
   .admin-nav (верхний уровень) → .section-intro → .admin-toolbar (вкладки+фильтры).
   Отдельный файл: admin.css у лимита «CSS ≤ ~250 строк».
   Только токены, см. design-system.md §2. */

/* Дышащий отступ от липкой шапки и футера: своего hero у админ-страницы нет,
   без этого eyebrow липнет к шапке, а контент — к подвалу. Один класс на оба
   раздела — вертикальный ритм задаётся в одном месте. */
.admin-page {
  /* top — общесайтовый ритм секции (--space-5), увеличенный bottom держит
     контент над футером даже при зуме страницы */
  padding-block: var(--space-5) var(--space-8);
}

/* Warning-tinted eyebrow: панель нельзя спутать с публичной галереей, где тот
   же section-intro янтарный. */
.admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--warning);
}

.admin-eyebrow .icon {
  width: 16px;
  height: 16px;
}

.admin-meta__dot {
  color: var(--text-faint);
}

/* ---------- Верхний уровень: Галерея | Контент ----------
   Отдельная строка НАД section-intro и ВНЕ .admin-toolbar (иначе становился бы
   его flex-элементом и прыгал вслед за вкладками/фильтром). Визуально — плоский
   ряд ссылок с разделителем на всю ширину контейнера, а не сегмент-контрол:
   два уровня навигации не должны читаться как один контрол. */
.admin-nav {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.admin-nav__item {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-nav);
}

.admin-nav__item:hover {
  color: var(--text);
}

.admin-nav__item--active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--space-2);
}

/* ---------- Тулбар: вкладки второго уровня + фильтры ----------
   space-between разводит вкладки и фильтр по краям; когда фильтра нет
   (альбомы/лог/участники/ссылки), единственный элемент остаётся слева и
   ничего не растягивается. */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Вкладки — общий сегмент-контрол .tabs/.tab (components.css, §7.10).
   На узком экране 5 вкладок не помещаются, а перенос разваливал пилюлю —
   поэтому ряд остаётся одной строкой и прокручивается. */
.admin-tabs {
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Полоса прокрутки внутри пилюли выглядела бы поломкой контрола. */
.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tabs .tab {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: center;
  scroll-margin-inline: var(--space-4);
}

.admin-gallery-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-gallery-tab__count {
  min-width: 1.5em;
  padding: 0 var(--space-1);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

.admin-gallery-tab__count--accent {
  background: var(--accent-weak);
  color: var(--accent);
}

@media (max-width: 600px) {
  .admin-nav__item,
  .admin-tabs .tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}