/* ────────────────────────────────────────────────────────────────────
 * iGamingTextLab — стиль клиентского кабинета.
 *
 * Источник: лендинг igamingtextlab.com (палитра, шрифты, формы).
 * Файл подключается ТОЛЬКО из layouts/client.blade.php, поэтому CRM он не
 * задевает — там продолжает работать contenteam-ui.css, который грузится
 * глобально и лежит в стеке ниже.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --igtl-purple: #7f3aef;
  --igtl-purple-dark: #6d2ad9;
  --igtl-lime: #c6ff34;
  --igtl-ink: #171717;
  --igtl-ink-2: #5c5c5c;
  --igtl-ink-3: #757575;
  --igtl-line: #dcdcdc;
  --igtl-panel: #f4f4f4;
  --igtl-chip: #ededed;
  --igtl-dark: #020403;
  --igtl-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --igtl-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --igtl-radius: 6px;
}

/* ── БАЗА ───────────────────────────────────────────────────────── */
body {
  font-family: var(--igtl-sans);
  font-size: 15px;
  color: var(--igtl-ink);
  background: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--igtl-mono);
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--igtl-ink);
}

a { color: var(--igtl-purple); }
a:hover { color: var(--igtl-purple-dark); }

.text-muted { color: var(--igtl-ink-3) !important; }
.text-primary { color: var(--igtl-purple) !important; }
.bg-light { background: var(--igtl-panel) !important; }

/* Мелкая заглавная моношрифтом — фирменный приём лендинга. */
.igtl-label {
  font-family: var(--igtl-mono);
  font-size: 12px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
}

/* ── ШАПКА ──────────────────────────────────────────────────────── */
.igtl-hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--igtl-line);
}
.igtl-hdr-in {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.igtl-logo {
  width: 68px;
  height: 33px;
  color: var(--igtl-ink);
  flex: 0 0 auto;
}
.igtl-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.igtl-nav a {
  font-family: var(--igtl-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--igtl-ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.igtl-nav a:hover { opacity: .55; color: var(--igtl-ink); }
.igtl-nav a.active {
  border-bottom-color: var(--igtl-purple);
  color: var(--igtl-ink);
}
.igtl-balance {
  font-family: var(--igtl-mono);
  font-size: 14px;
  color: var(--igtl-ink);
  text-decoration: none;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  padding: 7px 12px;
  white-space: nowrap;
}
.igtl-balance:hover { border-color: var(--igtl-ink); color: var(--igtl-ink); }
.igtl-balance b { color: var(--igtl-purple); font-weight: 500; }

/* ── КНОПКИ ─────────────────────────────────────────────────────── */
.btn {
  font-family: var(--igtl-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  border-radius: var(--igtl-radius);
  border: 1px solid transparent;
  padding: 9px 18px;
  transition: .18s ease;
}
.btn-sm { font-size: 12.5px; padding: 6px 12px; }
.btn-lg { font-size: 16px; padding: 13px 26px; }

.btn-primary,
.btn-success {
  background: var(--igtl-purple);
  border-color: var(--igtl-purple);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background: var(--igtl-purple-dark);
  border-color: var(--igtl-purple-dark);
  color: #fff;
}

/* Неактивная главная кнопка (например «Добавьте хотя бы одну задачу») — белая,
   а не блёклая фиолетовая. opacity: 1 обязателен: бутстраповские .65 превращают
   белый фон в серый и кнопка читается как сломанная. */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
  background: #fff;
  border-color: var(--igtl-line);
  color: var(--igtl-ink-3);
  opacity: 1;
  cursor: not-allowed;
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  background: transparent;
  border-color: rgba(23, 23, 23, .4);
  color: var(--igtl-ink);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-dark:hover, .btn-outline-light:hover {
  background: rgba(23, 23, 23, .04);
  border-color: var(--igtl-ink);
  color: var(--igtl-ink);
}

.btn-danger, .btn-outline-danger { border-radius: var(--igtl-radius); }

/* Акцентная кнопка на лаймовом — редкий, «фирменный» вариант. */
.btn-lime {
  background: var(--igtl-lime);
  border-color: var(--igtl-lime);
  color: var(--igtl-ink);
}
.btn-lime:hover { background: #b9f51f; border-color: #b9f51f; color: var(--igtl-ink); }

/* ── СИНЕГО В КАБИНЕТЕ НЕТ ──────────────────────────────────────────
   Акцентов ровно два: фиолетовый (--igtl-purple) и салатовый (--igtl-lime).
   Всё синее ниже приезжало из бутстраповских умолчаний, которые никто не
   перекрывал: базовый .btn-outline-primary мы переопределили, а его состояние
   :checked — нет, и выбранный режим работы горел бутстраповским #0d6efd.
   Точно так же .btn-info (#0dcaf0) и .btn-link. */

/* Выбранный режим работы — фиолетовый, как и все действия кабинета.
   ⚠️ Салатовый на кнопках НЕ используем: он оставлен одному месту — шапке
   «Созданные задачи», где должен притягивать взгляд. Раскрасив им ещё и
   кнопки, мы бы этот акцент обнулили. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background: var(--igtl-purple);
  border-color: var(--igtl-purple);
  color: #fff;
}
.btn-check:checked + .btn-outline-primary:hover {
  background: var(--igtl-purple-dark);
  border-color: var(--igtl-purple-dark);
  color: #fff;
}

/* .btn-info в кабинете больше не голубая. Класс оставлен работающим, а не
   вычищен из разметки: он встречается и вне формы задачи (профиль), и одна
   строка здесь надёжнее, чем поиск всех мест. */
.btn-info {
  background: var(--igtl-purple);
  border-color: var(--igtl-purple);
  color: #fff;
}
.btn-info:hover, .btn-info:focus {
  background: var(--igtl-purple-dark);
  border-color: var(--igtl-purple-dark);
  color: #fff;
}

/* Ссылка-кнопка — того же цвета, что и обычная ссылка. */
.btn-link { color: var(--igtl-purple); }
.btn-link:hover, .btn-link:focus { color: var(--igtl-purple-dark); }

/* Шапка «Созданные задачи» — без заливки: работает сам заголовок, крупный и по
   центру. (Салатовая подложка тут была и снята по просьбе.)

   ⚠️ Если когда-нибудь понадобится вернуть фон — только с !important: в
   contenteam-ui.css, который грузится раньше, стоит
   `.card-header { background: transparent !important }`, и без него правило
   молча не сработает: ни ошибки, ни предупреждения, просто белая шапка. */
.igtl-created-tasks > .card-header { padding: 16px 18px !important; }

/* Окантовка блоков страницы создания задачи — фиолетовая.

   ⚠️ Двойной класс и !important здесь обязательны, и это не перестраховка:
   у карточек в разметке стоит `.border-0` (bootstrap, `border: 0 !important`),
   а в contenteam-ui.css — `.card { border: 1px solid var(--border) !important }`.
   Правило без !important не сработает молча: ни ошибки, ни предупреждения,
   просто прежняя серая рамка. Селектор (0,2,0) бьёт оба по специфичности.

   Внутренние линии (шапка/подвал карточки, отбивки секций) намеренно
   остаются серыми: фиолетовым выделен контур блока, а не его начинка. */
.card.igtl-taskform,
.card.igtl-created-tasks {
  border: 1px solid var(--igtl-purple) !important;
}

.igtl-created-title {
  margin: 0;
  font-family: var(--igtl-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--igtl-ink);
}

/* Плитки режима — по содержимому, а не во всю ширину. Три коротких подписи,
   растянутые на всю форму, читались как три полосы, а не как выбор из трёх.

   ⚠️ В разметке рядом с `--auto` НЕ должно стоять `igtl-modes--3`: оно объявлено
   ниже в этом же файле и при равной специфичности побеждает, возвращая
   `repeat(3, 1fr)` и растягивая плитки обратно. Ровно на это я и наступил.

   Высоту не трогаем — узкими нужны только по горизонтали. */
/* ⚠️ Селектор ДВОЙНОЙ (`.igtl-modes.igtl-modes--auto`), и это не педантизм.
   Базовый `.igtl-modes` объявлен НИЖЕ в этом файле; при равной специфичности
   побеждает он, и плитки возвращались к `repeat(4, 1fr)` — то есть во всю
   ширину. Я наступил на это трижды подряд, пытаясь лечить порядком строк.
   Двойной класс сильнее одинарного и от перестановки правил не зависит. */
.igtl-modes.igtl-modes--auto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.igtl-modes.igtl-modes--auto .btn {
  font-size: 12px;
  padding: 10px 18px;
  width: auto;
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .igtl-modes.igtl-modes--auto {
    flex-direction: column;
  }
}

/* ── ФОРМА ЗАДАЧИ: ВОЗДУХ ───────────────────────────────────────────
   Полей много, и при общем для кабинета отступе 16px они сливались в сплошную
   сетку. Расширяем только эту карточку: остальные экраны плотнее по замыслу
   (списки, таблицы), и общий отступ там менять незачем. */
.igtl-taskform > .card-body {
  padding: 24px 24px 28px;
}
/* Колонка содержимого. Без неё поля тянутся во всю ширину карточки, а на
   мониторе это 1400+ px: одна строка ввода на полтора экрана. */
.igtl-form-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.igtl-taskform > .card-header,
.igtl-taskform > .card-footer {
  padding: 16px 24px;
}
.igtl-taskform .form-label { margin-bottom: 8px; }
/* Секционные подзаголовки формы («Основные параметры», «Загрузите бриф…»).
   Тот же моно-шрифт и регистр, что у подписей полей, но темнее и по центру —
   они делят форму на смысловые куски, а не подписывают одно поле.

   ⚠️ Черты под заголовком НЕТ намеренно: линия отбивает блок СНИЗУ, после его
   полей (.igtl-form-rule). Под заголовком она отрезала бы его от собственных
   полей, к которым он и относится. */
/* Пометка под секционным заголовком (пачка: «заполняйте только одинаковые
   значения»). Тот же центр, что у заголовка, но обычным шрифтом — это
   пояснение, а не второй заголовок. */
.igtl-form-note {
  margin: 0 0 4px;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--igtl-ink-3);
}
.igtl-form-section {
  font-family: var(--igtl-mono);
  font-size: 12.5px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--igtl-ink);
  text-align: center;
  margin: 4px 0 12px;
}

/* Черта после полей блока. Своя, а не голый <hr>: у бутстраповского слишком
   большие поля сверху и снизу, и в сетке `row` он съедал бы целую строку.

   Сверху отбивка заметная, снизу нулевая: расстояние до следующего блока даёт
   `row g-4` родителя, и своё нижнее поле здесь сложилось бы с ним вдвое. */
.igtl-form-rule {
  border: 0;
  border-top: 1px solid var(--igtl-line);
  margin: 20px 0 0;
  opacity: 1;
}
/* Подзаголовки-раскрывашки («Дополнительные параметры», «Расчёт цены») стоят
   вплотную к предыдущему полю — отбиваем их сверху. */
.igtl-taskform .btn-link.p-0 { margin-top: 4px; }
@media (max-width: 575px) {
  .igtl-taskform > .card-body { padding: 16px; }
  .igtl-taskform > .card-header,
  .igtl-taskform > .card-footer { padding: 12px 16px; }
}

/* Кольцо фокуса. У Bootstrap оно синее у ЛЮБОЙ кнопки и у radio-плиток —
   самый незаметный источник синевы: виден только с клавиатуры. */
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 3px rgba(127, 58, 239, .18);
}

/* Остатки синевы вне формы задачи: полоска своего сообщения в ленте и врезка
   «в работе» на карточке задачи — обе брали бутстраповские primary/info.

   ⚠️ Бейджи здесь НЕ трогаем. Ниже в этом же файле (блок «.badge.bg-*») они
   уже перекрашены, и правило, поставленное выше, просто не сработает: победит
   то, что идёт последним. Дубль выглядел бы как исправление, ничего не
   исправляя. */
.border-primary { border-color: var(--igtl-purple) !important; }
.alert-info {
  background: rgba(198, 255, 52, .18);
  border-color: rgba(198, 255, 52, .55);
  color: var(--igtl-ink);
}

/* Переключатель режима работы в форме задачи. Сетка вместо .btn-group: подписи
   длинные, группа кнопок не переносится и наезжала на соседнюю колонку.
   Сами radio у Bootstrap позиционируются абсолютно, поэтому ячейками сетки
   становятся только подписи. */
.igtl-modes {
  position: relative;   /* якорь для пузыря подсказки, см. .igtl-hint--mode */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.igtl-modes--3 { grid-template-columns: repeat(3, 1fr); }
.igtl-modes .btn {
  font-size: 12px;
  line-height: 1.25;
  padding: 10px 8px;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .igtl-modes,
  .igtl-modes--3 { grid-template-columns: 1fr; }
}

/* ── СПЕЦИАЛЬНОЕ ПРЕДЛОЖЕНИЕ ────────────────────────────────────
   Лаймовая рамка, а не сплошная заливка: баннер стоит над кнопками
   заказа, и заливка перетянула бы внимание с них на себя. */
.igtl-promo {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--igtl-lime);
  border-left: 4px solid var(--igtl-lime);
  border-radius: var(--igtl-radius);
  background: #fbffef;
}
.igtl-promo-body { flex: 1 1 260px; }
.igtl-promo-title {
  font-family: var(--igtl-mono);
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--igtl-ink);
  margin-bottom: 4px;
}
.igtl-promo-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--igtl-ink-2);
}

/* ── ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ────────────────────────────────────────
   Собственные классы вместо бутстраповской пары .btn-secondary /
   .btn-outline-secondary: в кабинете она читалась ЗАДОМ НАПЕРЁД. Этот файл
   перекрашивает .btn-outline-* в контрастную тёмную рамку, а .btn-secondary
   достаётся блёклая заливка из contenteam-ui.css — активный язык выглядел
   выключенным, и клиент первым кликом жал по уже применённому языку.
   Состояние здесь задано ОДНИМ классом .is-active, а не выбором между двумя
   бутстраповскими вариантами, — перекрасить его мимо намерения больше нечем. */
.locale-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  background: #fff;
}
.locale-switch-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--igtl-ink-3);
  font-family: var(--igtl-mono);
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.locale-switch-btn:hover { background: rgba(23, 23, 23, .05); color: var(--igtl-ink); }
/* Применённый язык — сплошная тёмная плашка. Курсор обычный: жать по нему
   незачем, и стрелка это показывает раньше, чем клик ничего не сделает. */
.locale-switch-btn.is-active {
  background: var(--igtl-ink);
  color: #fff;
  cursor: default;
}

/* ── ПОДСКАЗКА-ПУЗЫРЬ ───────────────────────────────────────────
   Свой пузырь вместо нативного title: title у иконки внутри <label>
   не всплывал, а Bootstrap-tooltip требует инициализации JS на каждый
   элемент и в динамической модалке про новые узлы не знает.
   Раскрывает Alpine — здесь только позиция и вид. */
.igtl-hint-wrap {
  position: relative;
  display: inline-flex;
  margin-left: 6px;   /* иконка не липнет к подписи и к красной звёздочке */
}
.igtl-hint-icon { cursor: help; }
.igtl-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;            /* выше .modal (1055), иначе пузырь уедет под футер */
  width: 280px;
  max-width: 60vw;
  padding: 8px 10px;
  background: var(--igtl-dark);
  color: #fff;
  border-radius: var(--igtl-radius);
  /* ⚠️ Типографика сбрасывается ЯВНО. Пузырь лежит внутри <label>, а .form-label
     задаёт моно-шрифт, uppercase и трекинг -.02em — всё это наследуется, и текст
     подсказки шёл капслоком без пробелов между словами. Наследованное значение
     проигрывает любому объявлению на самом элементе, поэтому порядок правил
     здесь роли не играет. */
  font-family: var(--igtl-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.igtl-hint::after {          /* хвостик к иконке */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--igtl-dark);
}
/* Пузырь у правого края контейнера: центрированный уехал бы за границу модалки
   на половину своей ширины. */
.igtl-hint--end {
  left: auto;
  right: -6px;
  transform: none;
}
.igtl-hint--end::after {
  left: auto;
  right: 6px;
  margin-left: 0;
}

/* Зеркальный случай — пузырь у ЛЕВОГО края. Значки платных опций (персона,
   иллюстрации) стоят над своими кнопками, у левого края колонок, и центрированный
   пузырь уезжал бы влево за границу формы ровно так же, как крайний правый уезжал
   вправо. */
.igtl-hint--start {
  left: -6px;
  right: auto;
  transform: none;
}
.igtl-hint--start::after {
  left: 6px;
  right: auto;
  margin-left: 0;
}

/* Подсказка к режиму работы. Пузырь растянут на всю сетку режимов, а не привязан
   к плитке: текст на два-три предложения, и центрированный над крайней плиткой
   уезжал бы за край модалки. Якорем поэтому служит сама .igtl-modes — обёртке
   внутри плитки position снимается.
   Пузырь уходит ВНИЗ, а не вверх: сетка режимов стоит первой в модалке, и
   всплывший над ней пузырь обрезала бы прокручиваемая .modal-body. */
.igtl-mode-hint {
  position: static;
  margin-left: 6px;
}
.igtl-mode-hint .igtl-hint-icon { opacity: .6; }
.igtl-hint--mode {
  top: calc(100% + 8px);
  bottom: auto;
  /* Пузырь компактный, как у остальных полей, и отцентрован по РЯДУ режимов.
     Растянутый во всю ширину ряда он читался как полоса, а не как подсказка.

     ⚠️ Якорем остаётся .igtl-modes, а не сама плитка: значок стоит в конце
     подписи, то есть у крайней плитки — почти у края ряда, и центрированный
     на нём пузырь шириной 280px вылезал бы за модалку пачки. Привязка к ряду
     делает вылет невозможным по построению. Поэтому же у него нет хвостика:
     он не указывает на конкретный значок и не должен притворяться. */
  left: 50%;
  right: auto;
  width: 280px;
  max-width: 100%;
  transform: translateX(-50%);
  font-size: 11.5px;
}
.igtl-hint--mode::after { display: none; }

/* ── КАРТОЧКИ И ПАНЕЛИ ──────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  box-shadow: none !important;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--igtl-line);
  font-family: var(--igtl-mono);
  font-size: 13px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--igtl-ink-2);
  padding: 12px 16px;
}
.card-header strong { font-weight: 400; }

.igtl-panel {
  background: var(--igtl-panel);
  border-radius: var(--igtl-radius);
  padding: 20px;
}

/* ── ЗНАЧКИ ─────────────────────────────────────────────────────── */
.badge {
  font-family: var(--igtl-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
}
.badge.bg-secondary { background: var(--igtl-chip) !important; color: var(--igtl-ink-2) !important; }
.badge.bg-primary   { background: var(--igtl-purple) !important; }
.badge.bg-success   { background: var(--igtl-lime) !important; color: var(--igtl-ink) !important; }
.badge.bg-warning   { background: #ffd84d !important; color: var(--igtl-ink) !important; }
.badge.bg-info      { background: var(--igtl-chip) !important; color: var(--igtl-ink-2) !important; }

/* ── ФОРМЫ ──────────────────────────────────────────────────────── */
.form-label {
  font-family: var(--igtl-mono);
  font-size: 12.5px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--igtl-ink-2);
  margin-bottom: 6px;
}
.form-control, .form-select {
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  font-family: var(--igtl-sans);
  font-size: 15px;
  color: var(--igtl-ink);
  padding: 9px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--igtl-purple);
  box-shadow: 0 0 0 3px rgba(127, 58, 239, .14);
}
.form-check-input:checked {
  background-color: var(--igtl-purple);
  border-color: var(--igtl-purple);
}
.form-text { color: var(--igtl-ink-3); font-size: 13px; }

/* ── ТАБЛИЦЫ И СПИСКИ ───────────────────────────────────────────── */
.table { color: var(--igtl-ink); }
.table > thead th {
  font-family: var(--igtl-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
  background: #fff;
  border-bottom: 1px solid var(--igtl-line);
}
.table > tbody td { border-color: var(--igtl-line); }
.table-hover > tbody > tr:hover > * { background: var(--igtl-panel); }

.list-group-item {
  border-color: var(--igtl-line);
  color: var(--igtl-ink);
}
.list-group-item-action:hover { background: var(--igtl-panel); }

/* ── ПРОЧЕЕ ─────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--igtl-radius);
  border: 1px solid var(--igtl-line);
  background: var(--igtl-panel);
  color: var(--igtl-ink);
}
.alert-success { border-color: rgba(127, 58, 239, .35); background: rgba(198, 255, 52, .18); }
.alert-warning { border-color: #ffd84d; background: rgba(255, 216, 77, .18); }
.alert-danger  { border-color: #f0a3a3; background: rgba(240, 163, 163, .16); }

.page-link {
  font-family: var(--igtl-mono);
  font-size: 13px;
  color: var(--igtl-ink);
  border-color: var(--igtl-line);
}
.page-item.active .page-link {
  background: var(--igtl-purple);
  border-color: var(--igtl-purple);
}

.dropdown-menu {
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.dropdown-item { font-size: 14px; }
.dropdown-item:active { background: var(--igtl-purple); }

hr { border-color: var(--igtl-line); opacity: 1; }
code { color: var(--igtl-purple); font-family: var(--igtl-mono); }

/* ── ДАШБОРД ────────────────────────────────────────────────────── */
.igtl-welcome {
  font-family: var(--igtl-mono);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.05em;
  margin-bottom: 4px;
}

/* Команда: круглые аватарки в ряд, подпись под каждой.
   Рамки у карточки нет — круг сам по себе достаточно читается как объект. */
/* 150px — потолок, а не фиксация: левая колонка занимает треть экрана, и на
   1280px три жёстких круга в неё не встали бы. flex даёт им ужиматься вместе,
   оставаясь в одном ряду и круглыми. */
.igtl-staff { display: flex; gap: 16px; }
.igtl-staff-card { flex: 1 1 0; max-width: 150px; min-width: 0; text-align: center; }
.igtl-staff-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  background: var(--igtl-panel);
}
.igtl-staff-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--igtl-mono);
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: -.04em;
  color: var(--igtl-ink-3);
  background: var(--igtl-chip);
}
.igtl-staff-body { padding: 10px 2px 0; }
.igtl-staff-name { font-family: var(--igtl-mono); font-size: 14px; letter-spacing: -.03em; }
.igtl-staff-role {
  font-family: var(--igtl-mono);
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
  margin-top: 2px;
}

/* Плитки баланса. */
.igtl-money {
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  padding: 14px 16px;
}
.igtl-money .v {
  font-family: var(--igtl-mono);
  font-size: 24px;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.igtl-money--accent { background: var(--igtl-ink); border-color: var(--igtl-ink); color: #fff; }
.igtl-money--accent .igtl-label { color: rgba(255, 255, 255, .6); }
.igtl-money--accent .v { color: var(--igtl-lime); }

/* Секции задач справа. */
.igtl-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--igtl-line);
}
.igtl-sec-title {
  font-family: var(--igtl-mono);
  font-size: 13px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.igtl-count {
  font-family: var(--igtl-mono);
  font-size: 12px;
  color: var(--igtl-ink-3);
}

.igtl-task {
  display: block;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--igtl-ink);
  transition: border-color .15s, background .15s;
}
.igtl-task:hover { border-color: var(--igtl-ink); background: var(--igtl-panel); color: var(--igtl-ink); }
.igtl-task--attention { border-left: 3px solid var(--igtl-purple); }
.igtl-task--done { border-left: 3px solid var(--igtl-lime); }
.igtl-task-title { font-size: 14.5px; line-height: 1.3; }
.igtl-task-meta {
  font-family: var(--igtl-mono);
  font-size: 11.5px;
  color: var(--igtl-ink-3);
  margin-top: 4px;
}

/* Лента сообщений от менеджеров. */
.igtl-msg { padding: 12px 0; border-bottom: 1px solid var(--igtl-line); }
.igtl-msg:last-child { border-bottom: 0; }
.igtl-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--igtl-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
  margin-bottom: 4px;
}
.igtl-msg-body { font-size: 14.5px; line-height: 1.45; color: var(--igtl-ink-2); }

.igtl-empty {
  font-family: var(--igtl-mono);
  font-size: 13px;
  color: var(--igtl-ink-3);
  padding: 14px 0;
}

@media (max-width: 991.98px) {
  .igtl-hdr-in { min-height: 64px; flex-wrap: wrap; align-content: flex-start; gap: 12px; padding: 14px 0; }
  /* Раскрытое меню на телефоне — ниже логотипа и кнопки, во всю ширину:
     список разделов столбиком, под ним одной строкой баланс, колокольчик,
     язык и меню пользователя. Раньше блок вставал В РЯД с логотипом, и
     разделы разъезжались по экрану вбок. */
  .igtl-hdr #mainNav { flex-basis: 100%; }
  /* !important — у блока классы Bootstrap align-items-center/gap-3 с
     !important, иначе пункты не растягиваются и жмутся к центру. */
  .igtl-hdr #mainNav.show,
  .igtl-hdr #mainNav.collapsing { display: flex; flex-direction: column; align-items: stretch !important; gap: 14px !important; }
  .igtl-hdr #mainNav.show { padding-bottom: 14px; }
  .igtl-hdr #mainNav .igtl-nav {
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0 !important; padding: 0 !important;
    border-top: 1px solid var(--igtl-line);
  }
  .igtl-hdr #mainNav .igtl-nav a {
    padding: 14px 0; font-size: 14px;
    border-bottom: 1px solid var(--igtl-line);
  }
  .igtl-hdr #mainNav .igtl-nav a.active { color: var(--igtl-purple); border-bottom-color: var(--igtl-line); }
  .igtl-hdr-tools { gap: 10px !important; }
  /* На мобильной ширине колонка снова широкая — держим потолок 150px,
     иначе три круга растянутся на пол-экрана. */
  .igtl-staff { justify-content: flex-start; }
}

/* ── Комбобокс справочников (гео, язык) ──────────────────────────────────────
   Список абсолютный, поэтому обёртка обязана быть position: relative — без неё
   меню отсчитается от ближайшего позиционированного предка и уедет к краю
   карточки. z-index выше .modal-content (1055): в модалке пачки поле такое же. */
.igtl-combo { position: relative; }

.igtl-combo-menu {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.igtl-combo-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--igtl-ink);
  font-size: 13px;
  text-align: left;
  line-height: 1.3;
}

/* Подсветка одна и та же для мыши и для стрелок: hi ведёт и то и другое,
   поэтому отдельного :hover нет — иначе под курсором светились бы две строки. */
.igtl-combo-item.is-active { background: var(--igtl-panel); }
.igtl-combo-item.is-selected { color: var(--igtl-purple); font-weight: 500; }

.igtl-combo-empty {
  padding: 7px 10px;
  color: var(--igtl-ink-3);
  font-size: 13px;
}

/* Обращение под фотографиями команды. Намеренно без рамки и подложки: это
   вводный текст, а не уведомление, и оформленный карточкой он спорил бы за
   внимание с балансом и лентой сообщений — теми блоками, ради которых клиент
   и открывает кабинет. */
.igtl-intro {
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--igtl-ink-2);
}
.igtl-intro p { margin: 0 0 8px; }

/* Плитки баланса в одну строку — они переехали в правую колонку, под баннеры
   акций. Подписи там длинные («Доступно для новых задач»), поэтому плитка
   тянется по содержимому, а не делит ширину поровну: короткое «В резерве»
   не должно занимать треть строки ради симметрии.
   Строка НЕ переносится: три числа рядом — это одно утверждение о деньгах, и
   разорванное на два ряда оно читается как два разных блока. Место экономит
   подпись, которая переносится внутри плитки. На телефоне строка всё-таки
   распускается — там ей просто не хватает ширины. */
.igtl-money-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.igtl-money-row .igtl-money {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
}
.igtl-money-row .igtl-money .igtl-label {
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
}
.igtl-money-row .igtl-money .v {
  font-size: 20px;
  margin-top: 2px;
}
/* Ссылка на историю — не плитка: она действие, а не число. */
.igtl-money-link {
  align-self: center;
  font-family: var(--igtl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--igtl-ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 2px;
}
.igtl-money-link:hover { color: var(--igtl-ink); text-decoration: underline; }

@media (max-width: 575.98px) {
  .igtl-money-row { flex-wrap: wrap; }
  .igtl-money-row .igtl-money { flex: 1 1 45%; }
}

/* ── Переписка ветками: слева темы, справа сама ветка ───────────────────────
   Раскладка почтового ящика. Левый рельс узкий и фиксированный по ширине:
   темы — это указатель, а не содержание, и отдавать им половину блока значит
   сузить то, ради чего человек сюда пришёл. На узком экране рельс превращается
   в горизонтальную полосу тем над сообщениями — вертикальный список там съел бы
   весь первый экран. */
.igtl-threads {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}
.igtl-threads-list {
  flex: 0 0 200px;
  max-width: 200px;
  border-right: 1px solid var(--igtl-line);
  overflow-y: auto;
  max-height: 460px;
}
.igtl-thread {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--igtl-line);
  border-left: 3px solid transparent;
  padding: 10px 12px;
  cursor: pointer;
}
.igtl-thread:hover { background: var(--igtl-panel); }
.igtl-thread.is-active { background: var(--igtl-panel); border-left-color: var(--igtl-purple); }
.igtl-thread-title {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--igtl-ink);
  /* Тема в две строки максимум: третья строка превращает список в простыню. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.igtl-thread-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--igtl-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
  margin-top: 2px;
}
.igtl-thread-count {
  display: inline-block;
  font-family: var(--igtl-mono);
  font-size: 10.5px;
  color: var(--igtl-ink-3);
}
.igtl-thread-pane {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px 14px;
  overflow-y: auto;
  max-height: 460px;
}
.igtl-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--igtl-line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.igtl-thread-head-title { font-size: 15px; line-height: 1.3; color: var(--igtl-ink); }
.igtl-msg-title { font-size: 14px; color: var(--igtl-ink); margin-bottom: 2px; }
/* Реплики различаются ИМЕНЕМ автора, а не цветной полосой: в разговоре, где
   пишут менеджер, редактор и коллега по компании, «моё или ваше» отвечает не на
   тот вопрос. Полоса осталась только у активной ветки в списке слева. */
.igtl-msg-author { color: var(--igtl-ink); font-weight: 500; }

/* Шильдик канала — откуда пришло сообщение. */
.igtl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--igtl-line);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--igtl-ink-3);
}
.igtl-chip .bi { font-size: 11px; }
.igtl-chip--telegram { border-color: #a8d5f2; color: #1b7fb8; }
.igtl-chip--email { border-color: #cfcfe8; color: #5b5b8a; }
.igtl-chip--cabinet { border-color: #cfe8d5; color: #3d7a52; }

@media (max-width: 767.98px) {
  .igtl-threads { flex-direction: column; }
  .igtl-threads-list {
    flex: 0 0 auto;
    max-width: none;
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--igtl-line);
    max-height: none;
  }
  .igtl-threads-list .igtl-thread { width: auto; min-width: 160px; border-bottom: 0; }
  .igtl-thread-pane { max-height: none; }
}

/* Реплики не должны слипаться: в ветке подряд идут короткие фразы разных людей,
   и без воздуха между ними разговор читается как один абзац. */
.igtl-thread-pane .igtl-msg { padding: 14px 0; }
.igtl-thread-pane .igtl-msg-head {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  text-transform: none;
}
.igtl-thread-pane .igtl-msg-body { white-space: pre-wrap; }

/* Кнопка «Обновить» в шапке переписки: прямоугольник по высоте строки
   заголовка. Голая иконка терялась среди текста — в неё не целились, потому
   что она не выглядела кнопкой. */
.igtl-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 34px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--igtl-line);
  border-radius: var(--igtl-radius);
  line-height: 1;
  color: var(--igtl-ink-2);
  cursor: pointer;
}
.igtl-refresh .bi { font-size: 15px; }
.igtl-refresh:hover { color: var(--igtl-ink); border-color: var(--igtl-ink-3); }
.igtl-refresh:disabled { cursor: default; opacity: .6; }
.igtl-spin { display: inline-block; animation: igtl-spin 0.8s linear infinite; }
@keyframes igtl-spin { to { transform: rotate(360deg); } }