/* ===== Генератор графика смен =====
   Поверх /styles.css — только то, чего нет в основном файле.
*/

:root {
  --gs-accent: #2563EB;
  --gs-on-bg: #EFF6FF;
  --gs-on-text: #1D4ED8;
  --gs-weekend: #FEF2F2;
}

/* ---------- Шапка ----------
   Общая шапка сайта, но без бургера: мобильное меню живёт в script.js главной
   и завязано на её разметку. Здесь навигация просто скрывается на узких экранах,
   кнопки «Войти» и «Начать бесплатно» остаются.
*/
@media (max-width: 900px) {
  .gs-nav { display: none; }
}
/* На главной «Начать бесплатно» на мобильных прячется в бургер-меню, и общий
   стиль её скрывает. Бургера здесь нет, поэтому кнопку возвращаем — иначе на
   телефоне у страницы не остаётся главного действия. */
@media (max-width: 768px) {
  .header__right .header__cta { display: inline-flex; }
}
/* Совсем узкие экраны: две кнопки рядом с логотипом уже не помещаются,
   оставляем главное действие. */
@media (max-width: 480px) {
  .header__login { display: none; }
}

/* Шапка сайта — position:fixed, поэтому первая секция обязана отступить,
   иначе она уезжает под неё. На главной для этого у .hero стоит padding 120px. */
.gs-hero { padding: 120px 0 24px; }
.gs-hero__badge {
  display: inline-block;
  background: #1d4ed8;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.gs-hero__title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--color-text);
}
.gs-hero__title span { color: var(--gs-accent); }
.gs-hero__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: 0;
}

/* ---------- Форма ---------- */
.gs-app { padding: 8px 0 48px; }
.gs-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.gs-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.gs-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
.gs-field--sm { flex: 0 1 150px; }
.gs-field--full { flex: 1 1 100%; }
.gs-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.gs-field__hint {
  font-size: 12px;
  color: var(--color-text-light);
}
.gs-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.gs-input:focus {
  outline: none;
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.gs-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.gs-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.gs-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gs-accent); flex-shrink: 0; }
.gs-check strong { display: block; font-size: 14px; color: var(--color-text); }
.gs-check small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }

.gs-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gs-btn { padding: 12px 28px; font-size: 16px; }
.gs-btn-sm { padding: 8px 16px; font-size: 14px; }
.gs-form__note { color: #DC2626; font-size: 14px; font-weight: 500; }
.gs-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--gs-accent);
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  line-height: 1.3;
}
.gs-link-btn:hover { color: #1D4ED8; }

/* ---------- Результат ---------- */
.gs-result { margin-top: 32px; }
.gs-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gs-result__title { font-size: 22px; font-weight: 700; margin: 0; color: var(--color-text); }
/* Три кнопки экспорта в ряд не помещаются на телефоне — переносим. */
.gs-result__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gs-result__hint {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

/* Таблица широкая по определению — скроллим её саму, а не страницу. */
.gs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.gs-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.gs-table th, .gs-table td {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  padding: 0;
}
.gs-table thead th {
  background: #F8FAFC;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 6px 2px;
  position: sticky;
  top: 0;
}
.gs-table__day { min-width: 34px; }
.gs-table__day span { display: block; font-size: 13px; color: var(--color-text); }
.gs-table__day small { display: block; font-size: 10px; text-transform: uppercase; opacity: .65; }
.gs-table__day--weekend { background: var(--gs-weekend); }

/* Имя приклеено слева: при 31 колонке иначе непонятно, чья это строка. */
.gs-table__name {
  text-align: left;
  padding: 8px 12px;
  min-width: 180px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 1;
}
.gs-table thead .gs-table__name { background: #F8FAFC; z-index: 2; }

.gs-table__cell {
  cursor: pointer;
  height: 34px;
  font-weight: 700;
  color: transparent;
  user-select: none;
  transition: background .12s ease;
}
.gs-table__cell--weekend { background: var(--gs-weekend); }
.gs-table__cell:hover { background: #E2E8F0; }
.gs-table__cell.is-on { background: var(--gs-on-bg); color: var(--gs-on-text); }
.gs-table__cell.is-on:hover { background: #DBEAFE; }
.gs-table__cell:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: -2px; }

.gs-table__total {
  min-width: 58px;
  padding: 8px 6px;
  font-weight: 700;
  color: var(--color-text);
  background: #F8FAFC;
}

/* Строка «человек в смене»: главное отличие от калькуляторов личного графика —
   они считают одного человека, а руководителю нужно видеть покрытие по дням. */
.gs-table tfoot td {
  background: #F1F5F9;
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text);
  padding: 8px 2px;
}
.gs-table tfoot .gs-table__name { background: #F1F5F9; font-size: 13px; }
.gs-table__perday { min-width: 34px; }
.gs-table__perday.is-empty { background: #FEE2E2; color: #B91C1C; }

/* На время съёмки в PDF: html2canvas не умеет ни скролл, ни position:sticky —
   разворачиваем таблицу целиком и отлепляем колонку с именами. */
.gs-table-wrap.is-capturing { overflow: visible; width: max-content; }
.gs-table-wrap.is-capturing .gs-table__name,
.gs-table-wrap.is-capturing .gs-table thead th { position: static; }

.gs-warn {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  color: #B91C1C;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Три выгоды: короткие карточки вместо стены текста ---------- */
.gs-value { padding: 48px 0 8px; }
.gs-value__title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 28px;
  color: var(--color-text);
}
.gs-value__grid { display: flex; gap: 20px; flex-wrap: wrap; }
.gs-value__card {
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.gs-value__icon { font-size: 26px; line-height: 1; display: block; margin-bottom: 12px; }
.gs-value__card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text);
}
.gs-value__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.gs-value__foot { text-align: center; margin-top: 28px; }
.gs-value__demo { padding: 12px 28px; font-size: 16px; }
.gs-value__note {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-light);
}

/* ---------- Как это выглядит в продукте ---------- */
.gs-showcase { padding: 48px 0; background: #F8FAFC; }
.gs-showcase__title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px;
  color: var(--color-text);
}
.gs-showcase__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.gs-shots { display: flex; flex-direction: column; gap: 20px; }
.gs-shots__pair { display: flex; gap: 20px; flex-wrap: wrap; }
.gs-shot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gs-shots__pair .gs-shot { flex: 1 1 320px; }
.gs-shot img { display: block; width: 100%; height: auto; }
.gs-shot figcaption {
  padding: 14px 18px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.gs-shot figcaption strong {
  display: block;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.gs-showcase__foot { text-align: center; margin-top: 28px; }

/* ---------- Переход в продукт ---------- */
.gs-cta {
  margin-top: 28px;
  padding: 28px;
  background: linear-gradient(135deg, #EFF6FF, #F8FAFC);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-lg);
  text-align: center;
}
.gs-cta__title { font-size: 21px; font-weight: 700; margin: 0 0 10px; color: var(--color-text); }
.gs-cta__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto 20px;
}
.gs-cta__btn { padding: 13px 32px; font-size: 16px; }
.gs-cta__note {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-light);
}

/* ---------- SEO-текст и вопросы ---------- */
.gs-seo { padding: 40px 0; background: #F8FAFC; }
.gs-seo__inner { max-width: 760px; }
.gs-seo h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 28px 0 12px;
  color: var(--color-text);
}
.gs-seo h2:first-child { margin-top: 0; }
.gs-seo p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.gs-faq { padding: 40px 0 56px; }
.gs-faq__inner { max-width: 760px; }
.gs-faq__title { font-size: 24px; font-weight: 700; margin: 0 0 20px; color: var(--color-text); }
.gs-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
}
.gs-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  list-style: none;
}
.gs-faq__item summary::-webkit-details-marker { display: none; }
.gs-faq__item summary::after { content: ' +'; color: var(--gs-accent); font-weight: 700; }
.gs-faq__item[open] summary::after { content: ' –'; }
.gs-faq__item p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ---------- Мобильные ---------- */
@media (max-width: 640px) {
  .gs-hero { padding: 100px 0 16px; }
  .gs-hero__title { font-size: 27px; }
  .gs-hero__subtitle { font-size: 15px; }
  .gs-form { padding: 18px; }
  .gs-field--sm { flex: 1 1 140px; }
  .gs-table__name { min-width: 130px; padding: 8px; font-size: 12px; }
  .gs-result__actions { width: 100%; }
  .gs-result__actions .gs-btn-sm { flex: 1 1 auto; }
  .gs-value__title, .gs-showcase__title { font-size: 21px; }
  .gs-cta { padding: 20px; }
  .gs-cta__title { font-size: 18px; }
}

/* ---------- Печать: только сам график ---------- */
@media print {
  .header, .gs-hero, .gs-form, .gs-cta, .gs-seo, .gs-faq, .gs-showcase, .gs-value,
  .footer, .gs-result__actions, .gs-result__hint, .gs-warn, .cookie-banner { display: none !important; }
  .gs-table-wrap { overflow: visible; border: none; }
  .gs-table { font-size: 10px; }
  .gs-table__cell { height: 22px; }
  .gs-table__name { position: static; min-width: 0; }
  .gs-table thead th { position: static; }
  .gs-result__title { font-size: 16px; margin-bottom: 8px; }
  @page { size: landscape; margin: 10mm; }
}