/* ============================================================================
   wl-lotos.css  -  тема Белый Лотос для HESK 3.7 (клиентская часть)
   Концепция: Тихий нефрит (Quiet Jade).
   Подключается ПОСЛЕДНИМ в head.txt, перебивает app.min.css при равной
   специфичности. Принцип: сначала палитра через :root, потом точечные правки
   компонентов по реальным классам HESK.
   Один акцент (нефрит #1f6f6b), океан белого, глубина через мягкие тени и
   волосяные линии, сквозной приём - нефритовый штрих лотоса.
   ВНИМАНИЕ: длинные тире в файле не используются (требование проекта).
   ============================================================================ */

/* ============================================================================
   1. :ROOT  -  переопределение переменных HESK плюс новые --wl-*
   ============================================================================ */
:root{
  /* --- Палитра-база (белый-доминанта) --- */
  --main-background:#fdfdfe;        /* фон страницы, почти белый, тёплая нота */
  --surface:#ffffff;               /* карточки, поля, тред-блоки */
  --wl-mist:#f6faf8;               /* единственный около-белый: подложки, чётная строка таблицы, форма ответа */
  --foreground:#16201f;            /* чернила текста, почти чёрный с зелёной ноткой, 16.66:1 */
  --font__pri-clr:#16201f;
  --font__sec-clr:#5b6b69;         /* мягкий текст, даты, метаданные, 5.60:1 */

  /* --- Акцент-нефрит (один токен на всё) --- */
  --primary:#1f6f6b;               /* нефрит: логотип, заголовки, иконки; 5.92:1 в обе стороны */
  --secondary:#185955;             /* глубокий нефрит для hover, 8.08:1 */
  --tertiary:#1f6f6b;
  --wl-jade:#1f6f6b;
  --wl-jade-deep:#185955;
  --wl-jade-soft:#e9f4f3;          /* мягкий фон: круг иконки, hover-строка, активная пилюля нав */
  --wl-line:#eef1f6;               /* волосяные линии, границы карточек, .divider, поля в покое */
  --wl-line-strong:#dfe5ec;        /* границы при hover, граница таблицы */

  /* --- Шапка --- */
  --header__bg:#ffffff;
  --header_logo__clr:#16201f;
  --header_nav__clr:#5b6b69;
  --header_nav__hover_clr:#1f6f6b;
  --header_profile__bg:#ffffff;
  --header_profile__clr:#16201f;

  /* --- Иконки / навлинки --- */
  --icon_circle__clr:#1f6f6b;
  --icon_circle__bg:#e9f4f3;
  --navlink_icon_hover__clr:#ffffff;
  --navlink_icon_hover__bg:#1f6f6b;
  --navlink__bg:#ffffff;
  --navlink__clr:#5b6b69;
  --navlink__title-clr:#16201f;

  /* --- Поля / ссылки / кнопки --- */
  --input-bg:#ffffff;              /* белые поля вместо синеватого #f3faff */
  --input-clr:#16201f;
  --link__pri-clr:#1f6f6b;
  --link__pri-hover-clr:#185955;
  --link__sec-clr:#5b6b69;
  --btn__bg-clr-pri:#1f6f6b;
  --btn__clr-pri:#ffffff;          /* белый на нефрите 5.92:1 */
  --btn__border-clr-pri:#1f6f6b;

  /* --- Таблица заявок --- */
  --table_row__bg:#ffffff;
  --table_row__bg-even:#f6faf8;    /* зебра в нефритовой дымке, не серой */
  --table_row__bg-hover:#e9f4f3;

  /* --- Поиск-герой --- */
  --search__title-clr:#16201f;
  --search__icon-fill:#1f6f6b;
  --search__input-bg:#ffffff;
  --search__bg:transparent;        /* холст просвечивает, стекло-герой даёт фон сам */

  /* --- Семантика статусов --- */
  --info:#155e8c;
  --success:#178a5a;
  --warning:#845812;
  --error:#b3261e;                 /* на белом 6.54:1 */
  --green-1:#178a5a;
  --yellow-1:#845812;
  --red-1:#b3261e;

  /* --- Тени: цвет зелёно-нейтральный, не синий и не чёрный --- */
  --shadow-1-hsla:hsla(174,16%,18%,1);

  /* === Новые --wl-* для своих компонентов === */
  --wl-shadow-card:0 1px 2px rgba(22,32,31,0.04), 0 12px 28px -10px rgba(22,32,31,0.10);
  --wl-shadow-hover:0 2px 4px rgba(22,32,31,0.05), 0 20px 44px -14px rgba(31,111,107,0.18);
  --wl-shadow-btn:0 6px 16px -6px rgba(31,111,107,0.40);
  --wl-shadow-pop:0 12px 40px -8px rgba(22,32,31,0.16);
  --wl-focus-ring:0 0 0 3px rgba(31,111,107,0.18);

  /* статусные пары (все проверены WCAG AA) */
  --wl-st-new-bg:#e7f1fb;      --wl-st-new-fg:#155e8c;     /* 0 Новая */
  --wl-st-wait-bg:#fbf1e0;     --wl-st-wait-fg:#845812;    /* 1 Ждёт ответа клиента */
  --wl-st-answered-bg:#f0ecf8; --wl-st-answered-fg:#5a4189;/* 2 Отвечено */
  --wl-st-work-bg:#e9f4f3;     --wl-st-work-fg:#185955;    /* 4 В работе */
  --wl-st-solved-bg:#e7f5ed;   --wl-st-solved-fg:#136b46;  /* 3 Решена */
  --wl-st-paused-bg:#eef1f0;   --wl-st-paused-fg:#565f5d;  /* 5 Приостановлена */

  /* радиусы и капсула (переменной радиуса в HESK нет, вводим свою) */
  --wl-radius-card:16px;
  --wl-radius-control:12px;
  --wl-pill:999px;

  /* фирменный лотос (inline data-URI, currentColor через stroke) */
  --wl-lotus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke='%231f6f6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M32 36c-8 0-15-5-15-12 0 0 7 1 11 6 1-7 4-12 4-18 0 6 3 11 4 18 4-5 11-6 11-6 0 7-7 12-15 12z'/><path d='M32 36c-5 0-9-6-9-13 0 0 6 2 9 9 3-7 9-9 9-9 0 7-4 13-9 13z'/></svg>");
}

/* ============================================================================
   2. БАЗОВАЯ ТИПОГРАФИКА И ХОЛСТ
   Шрифты грузятся в head.txt (Manrope для UI/заголовков, Inter для тела).
   ============================================================================ */
html,
body{
  background:var(--main-background);
  color:var(--foreground);
  font-family:'Inter','Manrope',-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,
.search__title,
.article__heading,
.navlink__title,
.btn,
.label{
  font-family:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif;
}

a{ color:var(--link__pri-clr); }
a:hover{ color:var(--link__pri-hover-clr); }

/* единое фокус-кольцо для клавиатуры на любых интерактивных элементах */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navlink:focus-visible,
[ripple]:focus-visible{
  outline:2px solid var(--wl-jade);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================================
   3. SHELL / КОНТЕЙНЕР  -  расширяем ради воздуха, дифференцированно
   ============================================================================ */
.contr{
  padding-inline:24px;
  width:100%;
  margin-inline:auto;
}

/* главная и тред: средняя колонка */
.page-index .contr,
.page-view-ticket .contr{ max-width:960px; }

/* кабинет: таблице нужна ширина */
.page-my-tickets .contr{ max-width:1120px; }

/* формы: узкая колонка читабельнее */
.page-login .contr,
.page-create-ticket .contr{ max-width:720px; }

main.main,
.main__content{
  padding-block:8px 64px;
}

/* ============================================================================
   4. ШАПКА И ЛОГОТИП  -  перекрашиваем существующую, метка-лотос через ::before
   ============================================================================ */
.theme_lotos .header,
.header{
  background:var(--header__bg);
  border-bottom:1px solid var(--wl-line);
  box-shadow:0 1px 0 rgba(22,32,31,0.03);
}

.header__inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* прогрессивное улучшение: матовое стекло на липкой шапке, белый фолбэк выше */
@supports (backdrop-filter:blur(2px)){
  .theme_lotos .header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(18px) saturate(1.4);
  }
}
@media (prefers-reduced-transparency:reduce){
  .theme_lotos .header{ background:#ffffff; backdrop-filter:none; }
}

/* логотип: текст бренда плюс метка-лотос */
.header__logo{
  display:inline-flex;
  align-items:center;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
  color:var(--header_logo__clr);
  text-decoration:none;
}
.header__logo::before{
  content:'';
  display:inline-block;
  width:22px;
  height:22px;
  margin-right:10px;
  background:var(--wl-lotus) center / contain no-repeat;
  vertical-align:middle;
  flex:0 0 auto;
}
.header__logo:hover{ color:var(--header_logo__clr); }

/* навигация шапки */
.header__nav{
  display:flex;
  align-items:center;
  gap:8px;
}
.header__nav .nav-item a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:15px;
  color:var(--header_nav__clr);
  text-decoration:none;
  border-radius:8px;
  transition:color 180ms ease;
}
.header__nav .nav-item a:hover{ color:var(--header_nav__hover_clr); }
/* активный пункт: нефритовый штрих снизу */
.header__nav .nav-item a::after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:2px;
  background:var(--wl-jade);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 180ms ease;
}
.header__nav .nav-item a:hover::after,
.header__nav .nav-item.active a::after{ transform:scaleX(1); }

/* меню профиля в кабинете: всплывающая карточка */
.header__profile,
.header__nav .dropdown__content{
  background:var(--header_profile__bg);
  color:var(--header_profile__clr);
  border:1px solid var(--wl-line);
  border-radius:12px;
  box-shadow:var(--wl-shadow-pop);
}

/* ============================================================================
   5. ХЛЕБНЫЕ КРОШКИ
   ============================================================================ */
.breadcrumbs{ background:transparent; }
.breadcrumbs__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding-block:20px;
  font-size:13px;
  color:var(--font__sec-clr);
}
.breadcrumbs__inner a{
  color:var(--font__sec-clr);
  text-decoration:none;
}
.breadcrumbs__inner a:hover span{ color:var(--wl-jade); }
.breadcrumbs__inner svg.icon-chevron-right{
  width:14px;
  height:14px;
  color:#8a9794;
  fill:currentColor;
}
.breadcrumbs__inner .last{
  color:var(--foreground);
  pointer-events:none;
}

/* ============================================================================
   6. ГЕРОЙ / ПОИСК  -  открытый воздушный блок, штрих и водяной знак лотоса
   ============================================================================ */
.help-search{
  position:relative;
  margin-top:64px;
  padding:56px 40px;
  border-radius:var(--wl-radius-card);
  background:var(--surface);
  box-shadow:var(--wl-shadow-card);
  overflow:hidden;
  text-align:center;
}
/* прогрессивное улучшение: стеклянная подложка героя */
@supports (backdrop-filter:blur(2px)){
  .help-search{
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(20px) saturate(1.3);
  }
}
@supports not (backdrop-filter:blur(2px)){
  .help-search{ background:#ffffff; }
}
@media (prefers-reduced-transparency:reduce){
  .help-search{ background:#ffffff; backdrop-filter:none; }
}

/* водяной знак лотоса в правом верхнем углу */
.help-search::after{
  content:'';
  position:absolute;
  top:-10px;
  right:24px;
  width:200px;
  height:130px;
  background:var(--wl-lotus) center / contain no-repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}

.help-search > *{ position:relative; z-index:1; }

.search__title{
  position:relative;
  display:inline-block;
  max-width:18ch;
  margin:0 auto;
  font-weight:700;
  font-size:40px;
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--search__title-clr);
}
/* фирменный нефритовый штрих слева от заголовка */
.search__title::before{
  content:'';
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:56px;
  background:var(--wl-jade);
}

/* поле поиска (главная и кабинет) */
.help-search .form-control,
.help-search input[type="text"]{
  height:52px;
  border-radius:var(--wl-radius-control);
  background:var(--search__input-bg);
  border:1px solid var(--wl-line);
  padding-left:44px;
}

/* ============================================================================
   7. КАРТОЧКИ NAVLINK (главная)
   ============================================================================ */
.nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:48px;
}
.navlink{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px;
  background:var(--navlink__bg);
  color:var(--navlink__clr);
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-card);
  box-shadow:var(--wl-shadow-card);
  text-decoration:none;
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.navlink:hover{
  transform:translateY(-2px);
  box-shadow:var(--wl-shadow-hover);
}
.navlink .icon-in-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--icon_circle__bg);
  transition:background 180ms ease;
}
.navlink .icon-in-circle svg.icon{
  width:26px;
  height:26px;
  color:var(--icon_circle__clr);
  fill:currentColor;
}
.navlink:hover .icon-in-circle{ background:var(--navlink_icon_hover__bg); }
.navlink:hover .icon-in-circle svg.icon{ color:var(--navlink_icon_hover__clr); }
.navlink__title{
  margin:0;
  font-weight:650;
  font-size:19px;
  color:var(--navlink__title-clr);
}
.navlink__descr{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--font__sec-clr);
}
.navlink:focus-visible{
  outline:2px solid var(--wl-jade);
  outline-offset:2px;
}

/* ссылка в панель администрирования: скромная, без карточки */
.article__footer{
  margin-top:32px;
  text-align:center;
}
.article__footer a.link{
  color:var(--wl-jade);
  font-weight:600;
}

/* отключаем сдвиг для тех, кто не любит движение, тень оставляем */
@media (prefers-reduced-motion:reduce){
  .navlink,
  .navlink:hover{ transform:none; }
}

/* ============================================================================
   8. ФОРМЫ / ПОЛЯ / КНОПКИ / КАПЧА
   ============================================================================ */
.article__heading.article__heading--form{
  font-weight:700;
  font-size:26px;
  color:var(--foreground);
  display:flex;
  align-items:center;
  gap:10px;
}
.article__heading .icon-in-circle{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--icon_circle__bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.article__heading .icon-in-circle svg{
  width:22px;
  height:22px;
  color:var(--icon_circle__clr);
  fill:currentColor;
}

.form-groups.centered{
  max-width:560px;
  margin-inline:auto;
}
.form-group{ margin-bottom:24px; }

label.label{
  display:block;
  margin-bottom:8px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--foreground);
}
.form-group.required > label.label::after,
.label.required::after,
.required > .label::after{
  content:' *';
  color:var(--error);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
  width:100%;
  min-height:48px;
  background:var(--input-bg);
  color:var(--input-clr);
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-control);
  padding:12px 16px;
  font-family:'Inter',sans-serif;
  font-size:16px;            /* 16px, чтобы iOS не зумил поле */
  line-height:1.4;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
textarea,
textarea.form-control{
  min-height:140px;
  resize:vertical;
}

/* единый фокус полей: нефрит плюс мягкое кольцо, без браузерного синего */
.form-control:focus,
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--wl-jade);
  box-shadow:var(--wl-focus-ring);
}
/* индикатор клавиатуры сохраняем */
.form-control:focus-visible,
textarea:focus-visible,
select:focus-visible{
  border-color:var(--wl-jade);
  box-shadow:var(--wl-focus-ring);
}

/* ошибка поля */
.form-control__error{
  margin-top:6px;
  font-size:13px;
  color:var(--error);
  display:flex;
  align-items:center;
  gap:6px;
}
.form-group.error .form-control,
.has-error .form-control{
  border-color:var(--error);
}

/* select #select_category (selectize) приводим к виду полей */
.selectize-input{
  min-height:48px;
  border:1px solid var(--wl-line) !important;
  border-radius:var(--wl-radius-control) !important;
  background:var(--input-bg) !important;
  box-shadow:none !important;
  padding:11px 16px !important;
  font-size:16px;
}
.selectize-input.focus{
  border-color:var(--wl-jade) !important;
  box-shadow:var(--wl-focus-ring) !important;
}
.selectize-dropdown{
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-control);
  box-shadow:var(--wl-shadow-pop);
  overflow:hidden;
}
.selectize-dropdown .option{ padding:10px 16px; }
.selectize-dropdown .option.active,
.selectize-dropdown .option:hover{ background:var(--wl-jade-soft); color:var(--foreground); }
.selectize-dropdown .option.selected{ background:var(--wl-jade); color:#ffffff; }

/* радио-кастом */
.radio-group .radio-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.radio-custom{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--wl-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease;
}
.radio-custom input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin:0;
  border:1px solid var(--wl-line-strong);
  border-radius:50%;
  flex:0 0 auto;
  position:relative;
  transition:border-color 160ms ease;
}
.radio-custom input[type="radio"]:checked{
  border-color:var(--wl-jade);
}
.radio-custom input[type="radio"]:checked::after{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--wl-jade);
}
.radio-custom input[type="radio"]:checked ~ label,
.radio-custom:has(input:checked){
  background:var(--wl-jade-soft);
  border-color:var(--wl-jade);
}
.radio-custom input[type="radio"]:focus-visible{
  outline:none;
  box-shadow:var(--wl-focus-ring);
}

/* капча */
.captcha-block{
  background:var(--surface);
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-card);
  padding:20px;
  box-shadow:var(--wl-shadow-card);
}
.captcha-block h3{
  margin:0 0 12px;
  font-size:16px;
  font-weight:650;
  color:var(--foreground);
}
.captcha-block img{
  border:1px solid var(--wl-line);
  border-radius:10px;
}
.btn-refresh{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--wl-line);
  background:#ffffff;
  cursor:pointer;
  transition:background 160ms ease;
}
.btn-refresh svg.icon-refresh{
  width:18px;
  height:18px;
  color:var(--wl-jade);
  fill:currentColor;
}
.btn-refresh:hover{ background:var(--wl-jade-soft); }

.divider{
  height:1px;
  background:var(--wl-line);
  border:0;
  margin:24px 0;
}

/* кнопки */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 28px;
  font-family:'Manrope',sans-serif;
  font-weight:650;
  font-size:15px;
  letter-spacing:0.01em;
  border-radius:var(--wl-radius-control);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.btn-full{ width:100%; }

/* основная кнопка отправки */
.btn-full,
.btn--blue,
.form-submit-ticket button[type="submit"]{
  background:var(--btn__bg-clr-pri);
  color:var(--btn__clr-pri);
  border-color:var(--btn__border-clr-pri);
  box-shadow:var(--wl-shadow-btn);
}
.btn-full:hover,
.btn--blue:hover,
.form-submit-ticket button[type="submit"]:hover{
  background:var(--wl-jade-deep);
  color:#ffffff;
  transform:translateY(-1px);
}
.btn-full:active,
.btn--blue:active,
.form-submit-ticket button[type="submit"]:active{ transform:none; }

/* вторичная кнопка-контур */
.btn--blue-border{
  background:transparent;
  color:var(--wl-jade);
  border:1.5px solid var(--wl-jade);
  box-shadow:none;
}
.btn--blue-border:hover{
  background:var(--wl-jade-soft);
  color:var(--wl-jade-deep);
}

/* тихая иконочная кнопка действия (печать) */
.btn-action{
  min-height:40px;
  width:auto;
  padding:0 12px;
  background:transparent;
  border:1px solid var(--wl-line);
  border-radius:10px;
  color:var(--font__sec-clr);
  box-shadow:none;
}
.btn-action:hover{ background:var(--wl-mist); color:var(--wl-jade); }
.btn-action svg{ width:18px; height:18px; fill:currentColor; }

/* волна ripple остаётся, делаем светлой на нефрите */
[ripple]{ position:relative; overflow:hidden; }
.btn-full[ripple]::after,
.btn--blue[ripple]::after{ background:rgba(255,255,255,0.4); }

.form-footer{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.form-footer a.link{ color:var(--wl-jade); font-weight:600; }

/* ============================================================================
   9. ТАБЛИЦА КАБИНЕТА  -  скруглённая обёртка, зебра в нефритовой дымке
   ============================================================================ */
.table-wrap{
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-card);
  overflow:hidden;
  box-shadow:var(--wl-shadow-card);
  background:#ffffff;
}
table.table.sindu-table,
table#default-table.sindu-table{
  width:100%;
  border-collapse:collapse;
  background:var(--table_row__bg);
}
.sindu-table thead th{
  background:#ffffff;
  padding:14px 20px;
  text-align:left;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--font__sec-clr);
  border-bottom:1px solid var(--wl-line-strong);
  white-space:nowrap;
}
.sindu-handle a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.sindu-handle .sort span,
.sindu-handle i.handle{ color:#8a9794; }
.sindu-handle a:hover .sort span,
.sindu-handle a:hover i.handle{ color:var(--wl-jade); }

.sindu-table tbody tr{
  background:var(--table_row__bg);
  transition:background 140ms ease;
}
.sindu-table tbody tr:nth-child(even){ background:var(--table_row__bg-even); }
.sindu-table tbody tr:hover{ background:var(--table_row__bg-hover); }
.sindu-table tbody td{
  padding:16px 20px;
  font-size:15px;
  color:var(--foreground);
  border-bottom:1px solid var(--wl-line);
  vertical-align:middle;
}
.sindu-table tbody tr:last-child td{ border-bottom:0; }

/* непрочитанная заявка: нефритовый штрих слева, чуть жирнее тема */
.sindu-table tbody tr.new td:first-child{
  box-shadow:inset 3px 0 0 0 var(--wl-jade);
}
.sindu-table tbody tr.new td{ font-weight:600; }

/* ссылка trackid моноширинно */
.sindu-table td a[href*="track"],
.sindu-table .trackid a{
  color:var(--wl-jade);
  font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;
  text-decoration:none;
}
.sindu-table td a[href*="track"]:hover{ text-decoration:underline; }

/* пагинатор */
.pagination a,
.pagination span,
.pages a,
.pages span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border-radius:10px;
  color:var(--font__sec-clr);
  text-decoration:none;
}
.pagination a:hover,
.pages a:hover{ background:var(--wl-mist); color:var(--wl-jade); }
.pagination .active,
.pages .active,
.pagination .current{
  background:var(--wl-jade-soft);
  color:var(--wl-jade-deep);
  font-weight:600;
}

/* ============================================================================
   10. ТРЕД ЗАЯВКИ  -  лента наше vs клиента, штрих и подложка вместо ярких пузырей
   ============================================================================ */
.ticket__body{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.ticket__body_block{
  position:relative;
  max-width:92%;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-card);
  box-shadow:var(--wl-shadow-card);
}

/* сообщение клиента: нейтральная белая карточка, прижата влево */
.ticket__body_block{
  border-left:3px solid var(--wl-line-strong);
  align-self:flex-start;
}

/* ответ персонала: светлый нефрит-намёк и нефритовый штрих */
.ticket__body_block.staff,
.ticket__body_block.is-staff,
.ticket__body_block[style*="--ticket_response__bg"],
.ticket__body_block.reply-staff{
  background:#f4fbfa;
  border-left:3px solid var(--wl-jade);
}

/* исходное сообщение: тема и шапка контакта */
.original-message h1{
  margin:0 0 16px;
  font-weight:700;
  font-size:22px;
  color:var(--foreground);
}
.block--head{ margin-bottom:8px; }
.block--head .d-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* карточка контакта: аватар-инициал, имя, email */
.contact.grid .requester,
.dropdown.customer .requester-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.dropdown.customer .requester::before,
.requester-header::before{
  content:attr(data-initial);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--wl-jade-soft);
  color:var(--wl-jade-deep);
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:16px;
  flex:0 0 auto;
}
.contact .name,
.requester .name{ font-weight:600; font-size:15px; color:var(--foreground); }
.contact .email,
.requester .email{ font-size:14px; color:var(--font__sec-clr); }

time.timeago{
  font-size:13px;
  color:var(--font__sec-clr);
}
time.timeago.tooltip:hover::after,
.tooltip:hover::after{ box-shadow:var(--wl-shadow-pop); }

/* форма ответа (add-reply): акцентная зона с подложкой */
.ticket .form,
form[id*="reply"],
.add-reply{
  background:var(--wl-mist);
  border:1px solid rgba(31,111,107,0.25);
  border-radius:var(--wl-radius-card);
  padding:24px;
  box-shadow:var(--wl-shadow-card);
}
.add-reply textarea,
.ticket .form textarea{ min-height:120px; border-radius:var(--wl-radius-control); }

/* dropzone вложений */
.dropzone,
.dz-default,
.attachments-dropzone{
  border:1px dashed var(--wl-line-strong);
  border-radius:var(--wl-radius-control);
  background:#ffffff;
  color:var(--font__sec-clr);
  transition:background 160ms ease, border-color 160ms ease;
}
.dropzone:hover,
.attachments-dropzone:hover{ background:var(--wl-mist); border-color:var(--wl-jade); }
.dropzone .dz-message svg,
.attachments-dropzone svg{ color:var(--wl-jade); fill:currentColor; }

/* ============================================================================
   11. СТАТУС-ПИЛЮЛИ  -  капсула, лепесток-лотос перед текстом, 6 статусов
   ============================================================================ */
.status,
.ticket-status,
.label.status,
[class*="status-"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--wl-pill);
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  line-height:1.2;
  white-space:nowrap;
}
/* лепестковая метка лотоса перед текстом, в цвете текста статуса */
.status::before,
.ticket-status::before,
[class*="status-"]::before{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  flex:0 0 auto;
  -webkit-mask:var(--wl-lotus) center / contain no-repeat;
  mask:var(--wl-lotus) center / contain no-repeat;
  background:currentColor;
}

/* 0 Новая */
.status-0,.status.new,.status--0{ background:var(--wl-st-new-bg); color:var(--wl-st-new-fg); }
/* 1 Ждёт ответа клиента */
.status-1,.status.waiting,.status--1{ background:var(--wl-st-wait-bg); color:var(--wl-st-wait-fg); }
/* 2 Отвечено */
.status-2,.status.replied,.status--2{ background:var(--wl-st-answered-bg); color:var(--wl-st-answered-fg); }
/* 3 Решена */
.status-3,.status.resolved,.status--3{ background:var(--wl-st-solved-bg); color:var(--wl-st-solved-fg); }
/* 4 В работе */
.status-4,.status.in-progress,.status--4{ background:var(--wl-st-work-bg); color:var(--wl-st-work-fg); }
/* 5 Приостановлена */
.status-5,.status.on-hold,.status--5{ background:var(--wl-st-paused-bg); color:var(--wl-st-paused-fg); }

/* приоритет: мелкая пилюля или цветная точка с подписью (не только цвет) */
.priority{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
}
.priority::before{
  content:'';
  width:8px; height:8px; border-radius:50%;
  flex:0 0 auto;
  background:currentColor;
}
.priority.critical,.priority-critical,.priority.high{ color:var(--error); }
.priority-medium,.priority.medium{ color:var(--warning); }
.priority.low,.priority-low{ color:var(--font__sec-clr); }

/* ============================================================================
   12. УВЕДОМЛЕНИЯ
   ============================================================================ */
.notification{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  border-radius:var(--wl-radius-control);
  background:#ffffff;
  border-left:4px solid var(--info);
  box-shadow:var(--wl-shadow-card);
  color:var(--foreground);
  font-size:15px;
  line-height:1.5;
}
.notification svg,
.notification .icon{ flex:0 0 auto; }
.notification.orange{ background:var(--wl-st-wait-bg); border-left-color:var(--warning); }
.notification.green,
.notification.success{ background:#e7f5ed; border-left-color:var(--success); }
.notification.red,
.notification.error{ background:#fbeceb; border-left-color:var(--error); }
.notification.blue,
.notification.info{ background:var(--wl-st-new-bg); border-left-color:var(--info); }

/* ============================================================================
   13. МОДАЛКА (#forgot-modal)
   ============================================================================ */
.modal{
  background:rgba(22,32,31,0.45);
}
@supports (backdrop-filter:blur(2px)){
  .modal{ backdrop-filter:blur(2px); }
}
#modal-contents,
.modal .modal-contents,
.modal__content{
  background:#ffffff;
  border-radius:var(--wl-radius-card);
  padding:32px;
  max-width:440px;
  box-shadow:var(--wl-shadow-pop);
  animation:wl-modal-in 180ms ease both;
}
@keyframes wl-modal-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.modal .close,
.modal__close{
  width:36px; height:36px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--wl-line);
  color:var(--font__sec-clr);
  cursor:pointer;
}
.modal .close:hover,
.modal__close:hover{ background:var(--wl-mist); color:var(--wl-jade); }
@media (prefers-reduced-motion:reduce){
  #modal-contents,.modal .modal-contents,.modal__content{ animation:none; }
}

/* ============================================================================
   14. ПОДВАЛ  -  Powered by HESK приглушаем (оставляем), бренд через footer.txt
   ============================================================================ */
.footer{
  margin-top:64px;
  padding:24px 0 16px;
  border-top:1px solid var(--wl-line);
  background:transparent;
}
.footer p.text-center{
  font-size:12px;
  color:#647170;            /* 5.08:1 на белом, AA пройден, остаётся приглушённым */
  text-align:center;
  margin:0;
}
/* HESK ставит инлайн display:block!important на powered-by, перебиваем размер,
   но не скрываем (требование EULA: подвал остаётся видимым) */
.footer p.text-center a{
  color:#647170;            /* кликабельная ссылка HESK остаётся читаемой, AA 5.08:1 */
  text-decoration:underline;
}
.footer p.text-center a:hover{ color:var(--wl-jade); }

/* брендовый подвал Белый Лотос рендерится из footer.txt ниже powered-by */
.wl-brand-footer{
  margin-top:8px;
  padding:20px 24px 32px;
  text-align:center;
  color:var(--font__sec-clr);
  font-size:13px;
  line-height:1.6;
}
.wl-brand-footer__mark{
  display:inline-block;
  width:18px; height:18px;
  margin-bottom:8px;
  background:var(--wl-lotus) center / contain no-repeat;
}
.wl-brand-footer__name{
  color:var(--foreground);
  font-family:'Manrope',sans-serif;
  font-weight:650;
}
.wl-brand-footer a{ color:var(--wl-jade); text-decoration:none; }
.wl-brand-footer a:hover{ text-decoration:underline; }

/* ============================================================================
   15. АДАПТИВ
   ============================================================================ */
@media (max-width:768px){
  .contr{ padding-inline:16px; }

  .header__inner{ min-height:60px; }
  .header__logo{ font-size:17px; }

  .help-search{
    margin-top:40px;
    padding:32px 20px;
  }
  .help-search::after{ display:none; }   /* водяной знак не мешает чтению на телефоне */
  .search__title{
    font-size:clamp(28px,7vw,40px);
  }
  .search__title::before{ display:none; }

  .nav{ grid-template-columns:1fr; gap:16px; }
  .navlink{ padding:22px; }

  .form-groups.centered{ max-width:100%; }

  .ticket__body_block{ max-width:100%; padding:18px; }

  /* таблица: горизонтальный скролл с индикатором края */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sindu-table thead th,
  .sindu-table tbody td{ padding:12px 14px; }
}

@media (max-width:480px){
  .header__nav{ gap:4px; }
  .header__nav .nav-item a{ padding:6px 8px; font-size:14px; }
  .search__title{ font-size:26px; }
  .article__heading.article__heading--form{ font-size:22px; }
}
/* ============================================================================
   16. ПРАВКИ ПОСЛЕ ВИЗУАЛЬНОЙ ПРОВЕРКИ (29.06.2026)
   ============================================================================ */

/* 16.1 Капча. HESK задаёт .captcha-block max-width:300px, margin:auto и
   text-align:center, поэтому подпись и поле зажаты и выглядят обрезанными.
   Разворачиваем карточку капчи во всю ширину колонки формы, по левому краю. */
.captcha-block{
  max-width:100% !important;
  width:100%;
  margin:24px 0 !important;
  text-align:left !important;
  box-sizing:border-box;
}
.captcha-block .form-group{ margin-bottom:0; }
.captcha-block img{ max-width:100%; height:auto; }
.captcha-block label.required{ display:block; position:relative; margin:14px 0 8px; }
/* подпись капчи без класса .label, поэтому абсолютная звёздочка HESK
   (right:-9px) улетала к правому краю карточки. Возвращаем её в поток текста. */
.captcha-block label.required::after{ position:static; right:auto; margin-left:3px; }

/* 16.2 Дропдаун приоритета. Наш бейдж .priority (точка через ::before и flex)
   случайно сел на виджет div.dropdown-select.priority. Глушим точку там и
   приводим селект приоритета к белому виду с волосяной рамкой. */
.dropdown-select.priority::before,
.priority.dropdown-select::before{ content:none !important; }
.dropdown-select.priority{ display:inline-block; }
.dropdown-select{
  background:#ffffff;
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-control);
}
.dropdown-select:hover{ border-color:var(--wl-line-strong); }

/* 16.3 Радиокнопки на входе: длинные подписи в столбик, без переноса вбок. */
.page-login .radio-list{ flex-direction:column; align-items:flex-start; gap:6px; }

/* 16.4 Заголовок героя: пусть «Чем мы можем Вам помочь?» живёт в одну строку
   на десктопе (узкий max-width давал лишний перенос). */
.search__title{ max-width:none; }

/* ============================================================================
   17. ПРАВКИ ПО КАБИНЕТУ И ТРЕДУ (после проверки на реальных данных, 29.06.2026)
   ============================================================================ */

/* 17.1 Статус-пилюли по реальным ключам статусов HESK
   (open=Новая, waitingreply=Ждёт ответа, replied=Отвечено, resolved=Решена,
   inprogress=В работе, onhold=Приостановлена). Класс один и в таблице кабинета,
   и в сайдбаре заявки, поэтому пилюли появляются везде. */
span.open, span.new, span.waitingreply, span.waiting,
span.replied, span.resolved, span.inprogress, span.onhold{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--wl-pill);
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  line-height:1.25;
  white-space:nowrap;
}
span.open::before, span.new::before, span.waitingreply::before, span.waiting::before,
span.replied::before, span.resolved::before, span.inprogress::before, span.onhold::before{
  content:'';
  width:8px; height:8px;
  flex:0 0 auto;
  -webkit-mask:var(--wl-lotus) center / contain no-repeat;
  mask:var(--wl-lotus) center / contain no-repeat;
  background:currentColor;
}
span.open, span.new{ background:var(--wl-st-new-bg); color:var(--wl-st-new-fg); }
span.waitingreply, span.waiting{ background:var(--wl-st-wait-bg); color:var(--wl-st-wait-fg); }
span.replied{ background:var(--wl-st-answered-bg); color:var(--wl-st-answered-fg); }
span.resolved{ background:var(--wl-st-solved-bg); color:var(--wl-st-solved-fg); }
span.inprogress{ background:var(--wl-st-work-bg); color:var(--wl-st-work-fg); }
span.onhold{ background:var(--wl-st-paused-bg); color:var(--wl-st-paused-fg); }

/* 17.2 Дедуп приоритета: HESK рисует свой флажок .priority_img, наша точка лишняя.
   Гасим точку там, где есть флажок (таблица и сайдбар заявки). */
.priority.with-label::before,
.value.priority::before,
.priority:has(.priority_img)::before{ content:none !important; }

/* 17.3 Ответ персонала vs сообщение клиента. Реальные классы HESK:
   .original-message (клиент) и .response (персонал). */
.ticket__body_block.response{
  background:#f4fbfa;
  border-left:3px solid var(--wl-jade);
}
.ticket__body_block.original-message{
  border-left:3px solid var(--wl-line-strong);
}

/* 17.4 Шапка блока заявки: убираем наш аватар-кружок (HESK не отдаёт инициал,
   кружок оставался пустым и ломал раскладку даты в столбик). Возвращаем
   нормальный поток и не даём дате рваться по буквам. */
.dropdown.customer .requester::before,
.requester-header::before,
.contact.grid .requester::before{ content:none !important; }
.contact.grid .requester{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.block--head time.timeago,
.contact time.timeago{ white-space:nowrap; }
.block--head .d-flex{ gap:16px; align-items:flex-start; }
.contact.grid{ min-width:0; }

/* ============================================================================
   18. САЙДБАР ЗАЯВКИ (панель «Информация»)
   ============================================================================ */
.ticket__params .params--block{
  background:#ffffff;
  border:1px solid var(--wl-line);
  border-radius:var(--wl-radius-card);
  box-shadow:var(--wl-shadow-card);
  padding:8px 20px 18px;
}
/* заголовок панели: в одну строку, длинная подпись обновления прячется
   (иконка и доступность остаются), поэтому «Информация» не переносится */
.ticket__params .accordion-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--foreground);
  margin:8px 0 6px;
}
.ticket__params .accordion-title > span:first-child{
  flex:0 0 auto;
  white-space:nowrap;
  margin-right:auto;
}
.ticket__params .accordion-title a.btn.link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:var(--wl-jade);
}
.ticket__params .accordion-title a.btn.link svg{ width:16px; height:16px; }
.ticket__params .accordion-title a.btn.link .ml-1{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.ticket__params .accordion-title .btn-toggler{ flex:0 0 auto; }
.ticket__params .accordion-body{ font-size:14px; }