/* ────────────────────────────────────────────────────────────────────
 * 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); }

/* Переключатель режима работы в форме задачи. Сетка вместо .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;
}
.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);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
.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-modes — обёртке
   внутри плитки position снимается.
   Пузырь уходит ВНИЗ, а не вверх: сетка режимов стоит первой в модалке, и
   всплывший над ней пузырь обрезала бы прокручиваемая .modal-body. */
.igtl-mode-hint {
  position: static;
  margin-left: 5px;
}
.igtl-mode-hint .igtl-hint-icon { opacity: .6; }
.igtl-hint--mode {
  top: calc(100% + 8px);
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  font-size: 12.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: 991px) {
  .igtl-hdr-in { min-height: 64px; }
  /* На мобильной ширине колонка снова широкая — держим потолок 150px,
     иначе три круга растянутся на пол-экрана. */
  .igtl-staff { justify-content: flex-start; }
}