/*
 * Тема базы знаний в дизайне основного сайта УП.Среды (enterprise.rvbit.ru).
 *
 * Приложение — собранный Vite/React без исходников, поэтому стили не
 * переписываются, а перекрываются: сначала подменяются токены Tailwind
 * (@theme-переменные из бандла), затем «рисованный» слой поверх компонентов.
 * Правила дизайн-системы взяты из smart-enterprise/frontend/src/index.css:
 * обводка 2px, кривые радиусы, жёсткие тени без блюра, заголовки Caveat,
 * тело Nunito, зелёный акцент.
 *
 * Подключается последним в dist/index.html. Версия в ?v= меняется при правках,
 * иначе браузер отдаст старую копию.
 */

@import url("/fonts/fonts.css");

:root {
  /* Палитра основного сайта */
  --ink: #2b2b2b;
  --ink-soft: #3d3b35;
  --up-text-2: #5c5a52;
  --up-text-3: #6f6d63;
  --up-green: #2f7d32;
  --up-green-dark: #256527;
  --up-green-line: #cfe3cf;
  --up-bg: #fdfdfb;
  --up-warm: #fffdf5;
  --up-warm-green: #f4faf3;
  --up-hover: #f0efe9;
  --up-dash: #d6d3c8;

  /* «Рисованные» радиусы: одна кривая и её зеркало */
  --blob: 255px 15px 225px 15px/15px 225px 15px 255px;
  --blob-alt: 225px 15px 255px 15px/15px 255px 15px 225px;

  --shadow-btn: 3px 3px 0 var(--ink);
  --shadow-panel: 4px 4px 0 var(--ink);

  /* ── Подмена токенов приложения ─────────────────────────────────── */
  --font-sans: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --default-font-family: var(--font-sans);

  --color-primary: var(--ink);
  --color-heading: var(--ink);
  --color-secondary: var(--ink-soft);
  --color-dim: var(--up-text-2);
  --color-muted: var(--up-text-3);
  --color-faint: #8a8880;
  --color-ghost: #b3b1a8;

  --color-accent: var(--up-green);
  --color-accent-strong: var(--up-green-dark);
  --color-accent-bright: #3f9a43;
  --color-accent-soft: var(--up-warm-green);
  --color-accent-glow: rgba(47, 125, 50, 0.1);

  --color-surface: var(--up-bg);
  --color-surface-tint: var(--up-warm);
  --color-card: var(--up-warm);
  --color-raised: var(--up-warm-green);
  --color-code-bg: var(--up-warm-green);
  --color-overlay: rgba(43, 43, 43, 0.45);

  /* Чёрная обводка — только у карточек, кнопок и полей (правила ниже).
     Служебные линии остаются тёплыми, иначе интерфейс становится решёткой. */
  --color-edge: var(--up-dash);
  --color-edge-light: #e6e3d9;
  --color-edge-dark: var(--ink);

  /* Тени на основном сайте жёсткие, без размытия */
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-md: 3px 3px 0 var(--ink);
  --shadow-lg: 4px 4px 0 var(--ink);
  --shadow-glow: 3px 3px 0 var(--ink);
}

body {
  background: var(--up-bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* ── Рукописные заголовки ───────────────────────────────────────────── */

h1, h2, h3,
.nav-title,
.guide-content h1,
.guide-content h2,
.guide-content h3 {
  font-family: Caveat, "Segoe Script", cursive;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Caveat мельче гротеска при равном кегле — поднимаем размеры */
.guide-content h1 { font-size: 2.9rem; margin-bottom: 0.4em; }
.guide-content h2 { font-size: 2.15rem; margin-top: 1.5em; }
.guide-content h3 { font-size: 1.7rem; }
.guide-content h4 { font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; }

/* Мелкие служебные подписи рукописными быть не должны */
.pill-badge, .doc-tag, .caps, .sidebar-link, .toc-link, .nav-label,
button, input, select, textarea {
  font-family: var(--font-sans);
}

/* ── Шапка ──────────────────────────────────────────────────────────── */

.app-header {
  background: rgba(253, 253, 251, 0.94);
  border-bottom: 2px solid var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── Карточки и панели ──────────────────────────────────────────────── */

.section-card,
.nav-card,
.search-result {
  background: var(--up-warm);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: none;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.section-card:hover,
.nav-card:hover,
.search-result:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-panel);
  border-color: var(--ink);
}

/* ── Кнопки ─────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--up-green);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--blob);
  box-shadow: var(--shadow-btn);
  font-weight: 700;
  filter: none;
}
.btn-primary:hover { background: var(--up-green-dark); color: #fff; }
.btn-primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--blob-alt);
  font-weight: 700;
}
.btn-secondary:hover { background: var(--up-hover); }
.btn-secondary:active { transform: translate(1px, 1px); }

/* ── Бейджи и теги ──────────────────────────────────────────────────── */

.pill-badge {
  background: var(--up-warm-green);
  color: var(--up-green-dark);
  border: 2px solid var(--ink);
  border-radius: var(--blob);
  font-weight: 700;
}

.doc-tag {
  border: 2px solid var(--ink);
  border-radius: var(--blob-alt);
  background: transparent;
  font-weight: 700;
}
.doc-tag:hover { background: var(--up-hover); }

/* ── Поиск ──────────────────────────────────────────────────────────── */

.search-input {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
}
.search-input:focus,
.search-input:focus-visible {
  outline: 2px solid var(--up-green);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Боковое меню и оглавление ──────────────────────────────────────── */

.sidebar { border-right: 2px solid var(--ink); background: var(--up-bg); }

.sidebar-link {
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink-soft);
}
.sidebar-link:hover { background: var(--up-hover); color: var(--ink); }
.sidebar-link.is-active,
.sidebar-link[aria-current="page"] {
  background: var(--up-warm-green);
  color: var(--up-green-dark);
  border: 2px solid var(--ink);
  font-weight: 700;
}

.sidebar-section-btn { font-weight: 700; color: var(--ink); }

.toc-link { color: var(--up-text-3); border-left: 2px solid var(--up-green-line); border-radius: 0; }
.toc-link:hover { color: var(--up-green); border-left-color: var(--up-green); }
.toc-link.is-active { color: var(--up-green-dark); font-weight: 700; border-left-color: var(--up-green); }

/* ── Текст статьи ───────────────────────────────────────────────────── */

.guide-content { color: var(--ink-soft); }

.guide-content a { color: var(--up-green); text-underline-offset: 3px; }
.guide-content a:hover { color: #1f5c22; }

.guide-content strong { color: var(--ink); }

/* Цитаты — это наши блоки «путь клика», предупреждения и фразы консультанту */
.guide-content blockquote,
.prose blockquote {
  border: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--up-warm);
  padding: 14px 18px;
  margin: 1.25em 0;
  font-style: normal;
  color: var(--ink-soft);
  quotes: none;
}
.guide-content blockquote::before,
.guide-content blockquote::after { content: none; }
.guide-content blockquote p:first-child { margin-top: 0; }
.guide-content blockquote p:last-child { margin-bottom: 0; }

.guide-content code,
.prose code {
  background: var(--up-warm-green);
  border: 1px solid var(--up-green-line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--up-green-dark);
  font-weight: 600;
}
.guide-content pre,
.prose pre {
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--up-warm-green);
  padding: 16px 18px;
  overflow-x: auto;
}
.guide-content pre code { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 400; }

.guide-content hr { border: 0; border-top: 2px dashed var(--up-dash); }

/* ── Таблицы ────────────────────────────────────────────────────────── */

.guide-content table,
.prose table {
  border: 2px solid var(--ink);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  background: #fff;
}
.guide-content th,
.prose th {
  background: var(--up-warm-green);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
}
.guide-content td,
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--up-dash);
  vertical-align: top;
}
.guide-content tr:last-child td { border-bottom: 0; }

/* Широкие таблицы не должны растягивать страницу */
.guide-content table { display: block; overflow-x: auto; }

/* ── Списки ─────────────────────────────────────────────────────────── */

.guide-content ul li::marker { color: var(--up-green); }
.guide-content ol li::marker { color: var(--up-green); font-weight: 700; }

/* ── Фокус и выделение — как на основном сайте ──────────────────────── */

::selection { background: #cde8cf; }
*:focus-visible { outline: 2px solid var(--up-green); outline-offset: 2px; }

/* ── Админка: тот же язык, но без рукописных заголовков в формах ────── */

.adm-card, .adm-stat-card {
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--up-warm);
  box-shadow: none;
}
.adm-header, .adm-toolbar { border-bottom: 2px solid var(--ink); }
.adm-input { border: 2px solid var(--ink); border-radius: 10px; font-family: var(--font-sans); }
.adm-btn-primary {
  background: var(--up-green);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--blob);
  box-shadow: var(--shadow-btn);
  font-weight: 700;
}
.adm-btn-ghost { border: 2px solid var(--ink); border-radius: var(--blob-alt); font-weight: 700; }
.adm-nav-item.is-active { background: var(--up-warm-green); color: var(--up-green-dark); font-weight: 700; }

/* Редактор статей: рукописный шрифт мешает править текст */
.ProseMirror, .tiptap-editor { font-family: var(--font-sans); }

/* ── Узкие экраны ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .guide-content h1 { font-size: 2.3rem; }
  .guide-content h2 { font-size: 1.8rem; }
  .guide-content h3 { font-size: 1.45rem; }
  .section-card, .nav-card { border-radius: 16px; }
}

/* ── Подвал ─────────────────────────────────────────────────────────── */

/* Ссылка на сайт продукта переехала в шапку (site-chrome.js): внизу её
   заслоняла кнопка консультанта. Здесь прячем, чтобы не было двух одинаковых. */
footer a[href*="enterprise"] { display: none; }

/* Запас снизу, чтобы кружок консультанта ничего не перекрывал */
footer { border-top: 2px solid var(--ink) !important; padding-bottom: 46px; }

/* Кнопки в шапке крупные, поэтому шапка должна подрасти под них, а не обрезать их.
   Без min-height содержимое упиралось в нижнюю границу и наезжало на неё. */
.app-header {
  min-height: 74px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}