/* ==========================================================================
   fs.css — оболочка страницы «Функциональная стратегия ПБ»:
   токены AGM, шапка, вкладки, вкладка «Функциональная стратегия».
   Стили отчёта драйверов — drivers.css, дизайн-система — design.css.

   Токены продублированы из «Аналитики проектов» (там они лежат инлайн
   в index.html) — набор и значения должны совпадать.
   ========================================================================== */
:root {
  --black: #111111;
  --white: #ffffff;
  --red: #eb0000;
  --gray: #888888;
  --lightgray: #f0f0f0;
  --midgray: #cccccc;
  --body: #555555;

  --rose: #f5e1dc;
  --peach: #f0dcc9;
  --sand: #e8d9c4;
  --sage: #d9ddd2;
  --mist: #cfd7dd;
  --clay: #d9b89a;

  --good: #2f6f4f;
  --good-bg: #e4efe7;
  --bad: #c0392b;
  --bad-bg: #fbe9e7;

  --line: #e6e6e6;
  --font: "Cera Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  font-weight: 300;
}
button, input, select, textarea { font-family: var(--font); }

/* Шапка — общие классы «Аналитики проектов» (.page-header, .header-top,
   .page-title, .header-actions, .month-picker, .header-meta, .auth-bar,
   .head-more/.head-menu) из design.css и drivers.css. Здесь — только
   базовый вид кнопок шапки: в «Аналитике» он задан глобальным правилом
   для button, а тут глобальное правило сломало бы вкладки и окна. */
.header-actions button {
  padding: 9px 16px; border: 1px solid var(--black); background: var(--white);
  color: var(--black); font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
.header-actions button:hover { background: var(--black); color: var(--white); }
.header-actions button:disabled { opacity: .4; cursor: default; }
.header-actions button.primary { background: var(--red); border-color: var(--red); color: var(--white); }
.header-actions button.primary:hover { background: var(--black); border-color: var(--black); }
.header-actions button[hidden], .month-picker[hidden] { display: none; }
.head-menu button:hover { background: var(--red); color: #fff; }
.header-meta .head-status.err { color: var(--bad); font-style: normal; }

/* ---------- вкладки ---------- */
.fs-tabs { display: flex; gap: 0; margin-top: 18px; overflow-x: auto; }
.fs-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--gray, #888);
  padding: 10px 18px; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.fs-tab:hover { color: var(--black, #111); }
.fs-tab.is-active { color: var(--black, #111); font-weight: 600; border-bottom-color: var(--red, #eb0000); }
.fs-tab:focus-visible { outline: 2px solid var(--red, #eb0000); outline-offset: -2px; }

/* ---------- контент ---------- */
.fs-main { padding: 0; }
.fs-panel[hidden] { display: none; }
.fs-frame { display: block; width: 100%; height: calc(100vh - 108px); border: 0; }

/* В «Аналитике проектов» вкладка драйверов скрыта (drivers.css: display:none),
   здесь это полноценный раздел — возвращаем показ. drivers.css не правим,
   чтобы копия оставалась идентичной оригиналу. */
#driversView { display: block; }

/* ---------- вкладка «Функциональная стратегия» ---------- */
#panel-fs { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }

.fs-hero { margin-bottom: 40px; }
.fs-hero .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--red, #eb0000);
  text-transform: uppercase; margin-bottom: 10px;
}
.fs-hero h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; font-weight: 400; color: var(--black, #111); }
.fs-hero-period { font-size: 13px; color: var(--black, #111); font-weight: 600; }
.fs-hero-meta { font-size: 11px; color: var(--gray, #888); margin-top: 4px; }

.fs-block { margin-bottom: 44px; }
.fs-block > h3 {
  margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red, #eb0000);
}
.fs-lead { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: #555; max-width: 80ch; }
.fs-note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--gray, #888); font-style: italic; }
.fs-subhead {
  margin: 22px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #555;
}
.fs-subhead:first-of-type { margin-top: 0; }

/* ЦКП */
.fs-kcp { background: #f5e1dc; padding: 18px 20px; margin-bottom: 20px; }
.fs-kcp-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red, #eb0000); margin-bottom: 6px;
}
.fs-kcp-text { font-size: 15px; line-height: 1.5; color: var(--black, #111); }

/* карточки */
.fs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fs-cards-4 { grid-template-columns: repeat(4, 1fr); }
.fs-card { background: #f0f0f0; padding: 16px 18px; }
.fs-card h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--black, #111);
}
.fs-card ul { margin: 0; padding-left: 16px; }
.fs-card li, .fs-card p { font-size: 12px; line-height: 1.55; color: #555; margin: 0 0 6px; }
.fs-card li:last-child, .fs-card p:last-child { margin-bottom: 0; }

/* таблицы */
.fs-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.fs-table th {
  background: var(--black, #111); color: #fff; text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 12px; white-space: nowrap;
}
.fs-table td {
  border-bottom: 1px solid #e6e6e6; padding: 10px 12px;
  font-size: 12px; line-height: 1.45; color: #333; vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.fs-table .fs-td-key { font-weight: 600; color: var(--black, #111); }
.fs-table tbody tr:hover td { background: #fafafa; }

/* ---------- адаптив ---------- */
@media (max-width: 1024px) {
  .fs-cards, .fs-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .fs-tabs { margin-top: 12px; }
  .fs-tab { padding: 10px 12px; font-size: 12px; }
  #panel-fs { padding: 24px 16px 48px; }
  .fs-hero h2 { font-size: 24px; }
  .fs-cards, .fs-cards-4 { grid-template-columns: 1fr; }
  .fs-frame { height: calc(100vh - 132px); }
  .fs-table { display: block; overflow-x: auto; }
}

/* ---------- печать / экспорт в PDF ---------- */
/* Кнопка «Экспорт в PDF» вызывает window.print(): в диалоге печати браузера
   выбирается «Сохранить как PDF». Печатается только отчёт драйверов. */
@media print {
  @page { size: A4 landscape; margin: 10mm; }

  /* всё лишнее убираем */
  .page-header, .fs-tabs, .up-overlay, #ssoLoginOverlay { display: none !important; }
  #panel-fs, #panel-roadmap { display: none !important; }

  html, body { background: #fff; }
  body { font-size: 10pt; }

  .fs-main { padding: 0; }
  #driversView { display: block !important; }
  .dr-report { padding: 0; }

  /* таблицы и графики не рвём посреди строки */
  .dr-table { page-break-inside: auto; }
  .dr-table tr { page-break-inside: avoid; page-break-after: auto; }
  .dr-table thead { display: table-header-group; }   /* шапка на каждой странице */
  .dr-sec-head { page-break-after: avoid; }          /* заголовок не отрывается от таблицы */
  .dr-chart-wrap, .dr-cards { page-break-inside: avoid; }

  /* фоновые заливки статусов и карточек — иначе PDF выйдет обесцвеченным */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

 }

/* ---------- окно «Архив срезов» ---------- */
.arc-filter { display: inline-flex; align-items: center; gap: 8px; }
.arc-filter > span {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray, #888);
}
.arc-filter select {
  padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--midgray, #ccc); background: #fff; color: var(--black, #111);
}
#arcTable td { font-variant-numeric: tabular-nums; }
.arc-dim { color: var(--gray, #888); }
.arc-tag {
  display: inline-block; font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray, #888); background: var(--lightgray, #f0f0f0);
  padding: 1px 5px; margin-left: 4px; white-space: nowrap;
}
#arcNote { margin-top: 10px; }

/* чипы «Данные по»: загруженные — чёрным, отсутствующие — блёклые,
   период набора — второй строкой внутри чипа */
.arc-parts { display: flex; flex-wrap: wrap; gap: 4px; }
.arc-part {
  display: inline-flex; flex-direction: column; align-items: center;
  font-size: 10px; line-height: 1.3; padding: 2px 6px; white-space: nowrap;
  border: 1px solid var(--line, #e6e6e6); color: var(--midgray, #ccc);
}
.arc-part.is-on {
  border-color: var(--black, #111); color: var(--black, #111); font-weight: 600;
}
.arc-part i {
  font-style: normal; font-weight: 400; font-size: 9px;
  color: var(--gray, #888); font-variant-numeric: tabular-nums;
}
/* набор, загруженный за другой период, чем остальные в срезе */
.arc-part.is-odd { border-color: var(--red, #eb0000); color: var(--red, #eb0000); }
.arc-part.is-odd i { color: var(--red, #eb0000); }

.arc-ver { white-space: nowrap; }

/* авторы: у каждого — свой список наборов */
.arc-users { line-height: 1.35; }
.arc-user + .arc-user { margin-top: 5px; }
.arc-user i {
  display: block; font-style: normal; font-size: 9px; color: var(--gray, #888);
}
/* срез, где наборы загружены за разные окна */
.arc-mismatch {
  margin-top: 3px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--red, #eb0000); font-weight: 700;
}
tr.arc-warn td { background: var(--bad-bg, #fbe9e7); }
.arc-warn-text { color: var(--bad, #c0392b); }