/* ================= Вход e-Qurylys: подложка сайта qazwater.kz =================
 * Перенесено 2026-08-17 по просьбе пользователя. Приём тот же, что на самом
 * сайте (Tilda, блок t396): фотография cover → чёрный слой 70% → белый текст.
 * Фото скопировано К СЕБЕ (upload_file) — портал не зависит от чужого CDN.
 * 2026-08-26: файл пережат (511→259 КБ, JPEG q55 progressive) — быстрее грузится.
 *
 * Область действия: ТОЛЬКО страница входа. Якорь двойной —
 * body.public-page (страница доступна без авторизации) И наличие формы входа,
 * поэтому фон не протечёт на рабочие страницы, даже если публичных станет
 * больше. Общая тема портала не тронута: там page_background_color светлый,
 * и таблицы обязаны остаться читаемыми.
 * ========================================================================== */
body.public-page:has(.auth-form-element) {
  background-image: url("https://digital.qazwater.kz/media/user_files/0vLqop5REeKrpghb5oFmFhKlgeJTqt8n_8ed502de82e5bd4521064343aa96a32ff99a8c171eba05018038c9023559f71a.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* fixed на iOS Safari рисуется рывками и «прыгает» при появлении клавиатуры —
 * на касательных экранах фон обычный. Проверено: на 390px переполнения нет. */
@media (hover: none) {
  body.public-page:has(.auth-form-element) { background-attachment: scroll; }
}
/* затемняющий слой — как .t396__filter на сайте */
body.public-page:has(.auth-form-element)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
  pointer-events: none;
  z-index: 0;
}
body.public-page:has(.auth-form-element) .page,
body.public-page:has(.auth-form-element) .page__content,
body.public-page:has(.auth-form-element) .element__wrapper,
body.public-page:has(.auth-form-element) .element__inner-wrapper {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body.public-page:has(.auth-form-element) .page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  gap: 4px;
}
/* надпись как на сайте */
.sk-cover-title,
.sk-cover-title * {
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  letter-spacing: .01em;
  line-height: 1.25;
}
/* размер задаём здесь, а не темой: тема heading_1 общая на весь портал, и
 * поднимать её ради одной страницы значило бы менять все заголовки */
.sk-cover-title,
.sk-cover-title .element,
.sk-cover-title h1 {
  font-size: clamp(26px, 3.4vw, 40px) !important;
  font-weight: 700 !important;
  margin: 0 0 26px !important;
}
/* карточка формы поверх фотографии */
body.public-page:has(.auth-form-element) .auth-form-element {
  background: rgba(255, 255, 255, .96);
  padding: 26px 24px 22px;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  max-width: 380px;
  min-width: 320px;
  width: 100%;
}
/* акцент сайта — коралловый #FF8562, только на кнопке входа */
body.public-page:has(.auth-form-element) .auth-form-element button,
body.public-page:has(.auth-form-element) .auth-form-element .ab-button {
  background-color: #ff8562 !important;
  border-color: #ff8562 !important;
  color: #ffffff !important;
}
body.public-page:has(.auth-form-element) .auth-form-element button:hover,
body.public-page:has(.auth-form-element) .auth-form-element .ab-button:hover {
  background-color: #ef6f4b !important;
  border-color: #ef6f4b !important;
}

/* ===== sk-staff-delete-modal: модальное подтверждение удаления сотрудника (/staff) =====
 * Контейнер с css_classes sk-modal существует в DOM только при открытом
 * page_parameter staff_del (visibility_condition), поэтому оверлей не
 * висит на странице постоянно. Карточка — вложенный контейнер
 * sk-modal-card, кнопка «Отмена» — sk-modal-cancel. */
.sk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 8, 16, .55);
  overflow: auto;
  padding: 10vh 16px 16px;
}
.sk-modal .sk-modal-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 22px 24px;
  max-width: 460px;
  margin: 0 auto;
}
.sk-modal .sk-modal-cancel .ab-button {
  background-color: #eef2f5 !important;
  border-color: #cfe0e6 !important;
  color: #0b3d4d !important;
}

/* sk-multiline — таблица-коллекция, уважающая переводы строк в ячейках.
 * Формульные поля вида «Стороны и роли» join-ятся через \n; без этого
 * правила HTML схлопывает переносы в пробел. Вешается css_classes на
 * элемент-таблицу. */
.sk-multiline td .ab-text,
.sk-multiline td {
  white-space: pre-line;
}

/* sk-multiline на ТЕКСТ-элементе (карточки, модалка деталей): формулы с \n
 * вне таблиц — те же переводы строк без правки разметки. */
.sk-multiline p,
.sk-multiline .ab-text,
p.sk-multiline {
  white-space: pre-line;
}

/* sk-wide-2 / sk-wide-4 — столбец «Роль в e-Qurylys» таблицы-коллекции
 * (2-й у подрядчика/куратора, 4-й у админа). У элемента-таблицы конструктора
 * НЕТ настройки ширины столбца, поэтому — классом на элементе-таблице.
 * Значение роли — плашка (tags), по умолчанию она не переносит текст и
 * сжимает столбец; здесь переносим по словам и держим умеренный минимум
 * ширины, чтобы плашка не рассыпалась на слово-в-строку. */
.sk-wide-2 table th:nth-child(2),
.sk-wide-2 table td:nth-child(2) { min-width: 150px; }
.sk-wide-4 table th:nth-child(4),
.sk-wide-4 table td:nth-child(4) { min-width: 150px; }
.sk-wide-2 table td:nth-child(2),
.sk-wide-2 table td:nth-child(2) *,
.sk-wide-4 table td:nth-child(4),
.sk-wide-4 table td:nth-child(4) * {
  white-space: normal;
  overflow-wrap: break-word;
  height: auto;
}

/* Плашки (tags) в таблицах sk-multiline — полностью и столбиком.
 * Штатный .ab-tag обрезает текст: max-width 140px + nowrap/ellipsis
 * (снято из /_nuxt/entry.*.css опубликованного рантайма). Здесь плашка
 * показывается целиком и каждая с новой строки; fit-content держит фон
 * плашки по тексту, а не на всю ширину ячейки. Область действия — только
 * таблицы с css_classes sk-multiline (три таблицы сотрудников), плашки
 * ролей и статусов в остальных таблицах не тронуты. */
.sk-multiline td .ab-tag,
.sk-multiline .baserow-table__cell .ab-tag {
  display: block;
  width: fit-content;
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  margin: 2px 0;
}

/* Обёртка плашек tags-колонки — <div class="tag-field"> (компонент TagsField)
 * — в рантайме flex-СТРОКА с nowrap и overflow:hidden: block у .ab-tag она
 * игнорирует, а не влезшие плашки прячет. Поэтому складывание столбиком
 * делается на ней, а не на плашках. Область та же — таблицы sk-multiline. */
.sk-multiline .tag-field {
  flex-flow: column;
  align-items: flex-start;
  overflow: visible;
  gap: 4px;
}

/* sk-wide-3 — то же, что sk-wide-2/4, для 3-го столбца: в кураторских
 * таблицах назначений роль сдвинулась на третью позицию колонкой
 * «Организация». Классы комбинируются: sk-wide-2 sk-wide-3. */
.sk-wide-3 table th:nth-child(3),
.sk-wide-3 table td:nth-child(3) { min-width: 150px; }
.sk-wide-3 table td:nth-child(3),
.sk-wide-3 table td:nth-child(3) * {
  white-space: normal;
  overflow-wrap: break-word;
  height: auto;
}

/* ===== sk-site-bg: фотография сайта на ВСЕХ страницах (2026-08-25) =========
 * Просьба пользователя: фон страницы входа — на весь портал. Фото то же,
 * ссылка та же (лежит у себя, upload_file). Контент РАБОЧИХ страниц остаётся
 * на светлой панели: ячейки таблиц в теме прозрачные, и без панели текст
 * лёг бы прямо на фотографию. Страница входа этим блоком не меняется — её
 * собственный блок выше специфичнее (тёмный слой 70%, прозрачные контейнеры,
 * белая карточка формы). */
body {
  background-image: url("https://digital.qazwater.kz/media/user_files/0vLqop5REeKrpghb5oFmFhKlgeJTqt8n_8ed502de82e5bd4521064343aa96a32ff99a8c171eba05018038c9023559f71a.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #f7fafbff; /* пока фото не догрузилось */
}
@media (hover: none) {
  body { background-attachment: scroll; } /* iOS: fixed рисуется рывками */
}
/* Рабочие страницы (всё, где нет формы входа): подложки страницы делаются
 * прозрачными, а чтение живёт на одной светлой панели контента. */
body:not(:has(.auth-form-element)) .page,
body:not(:has(.auth-form-element)) .page__content-wrapper {
  background: transparent !important;
}
body:not(:has(.auth-form-element)) .page__content {
  background: rgba(247, 250, 251, .95) !important;
  border-radius: 12px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .28);
  padding: 20px 24px 28px;
  margin: 16px auto 28px;
  max-width: 1320px;
}
/* Шапка с меню (__shared__) — та же панель, без зазора сверху. */
body:not(:has(.auth-form-element)) header,
body:not(:has(.auth-form-element)) .header {
  background: rgba(247, 250, 251, .95);
}
/* sk-menu-emphasis — пункты главного меню жирнее и крупнее (просьба
   пользователя 2026-08-26). Разметка: .menu-element__menu-item-link >
   a.ab-link; базовый рендер 13px/400. Задевает и compact-вариант
   (мобильный dropdown) — те же классы. */
.menu-element__menu-item-link .ab-link {
  font-size: 15px;
  font-weight: 700;
}