/* ═══════════════════════════════════════════════════════════════
   АРНИ — Базовые стили (общие для всех страниц)
   ═══════════════════════════════════════════════════════════════ */

/* ── Переменные ── */
:root {
  --primary:       #5b67d8;
  --primary-hover: #4a54c8;
  --danger:        #d93025;
  --success:       #1a7f37;

  --bg:       #f3f4f6;
  --surface:  #ffffff;
  --surface2: #f5f6fa;
  --border:   #e0e0e0;
  --border2:  #e4e6ef;

  --text:     #1f2328;
  --muted:    #6b7280;
  --count:    #9aa0a6;

  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── РАЗМЕР ШРИФТА — единственное место для глобального изменения ──
     Измените --fs-base, и все шрифты на всех страницах пересчитаются. */
  --fs-base: 18px;                            /* ← главный рычаг       */
  --fs-xl:   calc(var(--fs-base) + 5px);      /* 23px: крупные заголовки */
  --fs-lg:   calc(var(--fs-base) + 1px);      /* 19px: заголовки секций  */
  --fs-md:   var(--fs-base);                  /* 18px: основной текст    */
  --fs-ui:   calc(var(--fs-base) - 1px);      /* 17px: кнопки, поля      */
  --fs-sm:   calc(var(--fs-base) - 2px);      /* 16px: вспомогательный   */
  --fs-xs:   calc(var(--fs-base) - 3px);      /* 15px: мобильный/мелкий  */
  --fs-xxs:  calc(var(--fs-base) - 4px);      /* 14px: подсказки, ошибки */

  /* Алиас для обратной совместимости */
  --font-size: var(--fs-base);
}

/* ── Сброс ── */
*, *::before, *::after { box-sizing: border-box; }

/* html задаёт базу для rem — при изменении --fs-base масштабируется весь сайт */
html { font-size: var(--fs-base); }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

a { color: var(--primary); }

/* ── Топбар ── */
.topbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  margin: 12px 0 0;
  position: sticky;
  top: 6px;
  z-index: 100;
  /* Небольшая тень чтобы был виден при скролле */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.topbar-logo    { height: 30px; display: block; flex-shrink: 0; }
.topbar-brand, .topbar-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.topbar-brand-name {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.topbar-sep     {
  width: 1px;
  flex-shrink: 0;
  background: var(--border2);
  align-self: stretch;
  height: auto;
  min-height: 22px;
}
.topbar-spacer  { flex: 1; min-width: 8px; }
.topbar-group   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topbar-label   { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }

/* Кнопки и пункты меню в шапке: при нехватке ширины текст переносится на вторую строку */
.topbar .btn,
.topbar .app-nav-link {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  min-width: 0;
  justify-content: center;
}

/* ── Кнопки ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  font-family: var(--font);
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: #eef0f8; border-color: #b0b4c8; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  font-weight: 600;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

/* ── Выпадающий список сортировки ── */
.sort-select {
  font-size: var(--fs-sm);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
}
.sort-select:focus { outline: none; border-color: var(--primary); }

/* ── Карточки ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}

/* ── Уведомление ── */
.notification {
  display: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 10px;
  font-size: var(--fs-ui);
  font-weight: 500;
}
.notification.success { background: #f0fdf4; border-color: var(--success); color: var(--success); }
.notification.error   { background: #fff5f5; border-color: var(--danger);  color: var(--danger); }

/* ── Пагинация ── */
.pager {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ── Шапка страниц со ссылкой назад ── */
.page-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
}

/* ── Утилиты ── */
.muted   { color: var(--muted); font-size: var(--fs-ui); }
.count   { color: var(--count); white-space: nowrap; flex-shrink: 0; }
.nowrap  { white-space: nowrap; }
.hidden  { display: none !important; }

/* ── Медиа ── */
@media (max-width: 860px) {
  .topbar-sep    { display: none; }
  .topbar-spacer { display: none; }
  .topbar        { margin: 8px 0 0; gap: 6px; }
}

@media (max-width: 480px) {
  .topbar     { margin: 6px 0 0; padding: 6px 8px; }
  .btn        { padding: 6px 9px; font-size: var(--fs-xs); }
  .page-topbar { padding: 8px 10px; }
}