/* Тёмный дашборд-стиль страницы сделок. Все цвета — в :root, легко менять. */
:root {
  --bg: #0d1420;
  --panel: #131c2b;
  --panel-2: #182334;
  --row: #111a28;
  --row-alt: #0f1826;
  --row-hover: #1b2940;
  --text: #d7e0ee;
  --text-muted: #7f8da3;
  --border: #223047;
  --accent: #1fb890;
  --accent-ink: #052b22;

  /* Палитра бейджей: фон + цвет текста. */
  --badge-green-bg: #123d30;   --badge-green-fg: #57e0b0;
  --badge-blue-bg: #10314f;    --badge-blue-fg: #63b3f5;
  --badge-violet-bg: #2b2450;  --badge-violet-fg: #a99bf0;
  --badge-amber-bg: #402f12;   --badge-amber-fg: #e6b45a;
  --badge-red-bg: #45201f;     --badge-red-fg: #f08a80;
  --badge-teal-bg: #103b3c;    --badge-teal-fg: #5bd6cf;
  --badge-orange-bg: #402612;  --badge-orange-fg: #f0a35a;
  --badge-sky-bg: #123246;     --badge-sky-fg: #6cc3ee;
  --badge-rose-bg: #45182b;    --badge-rose-fg: #f085a8;
  --badge-yellow-bg: #3d3810;  --badge-yellow-fg: #e6d85a;
  --badge-cyan-bg: #0f3a40;    --badge-cyan-fg: #4fd6e6;
  --badge-lime-bg: #2c3d12;    --badge-lime-fg: #b6e05a;
  --badge-pink-bg: #431a34;    --badge-pink-fg: #f078c4;
  --badge-indigo-bg: #1c2150;  --badge-indigo-fg: #8b93f2;
  --badge-purple-bg: #331848;  --badge-purple-fg: #c47ff0;
  --badge-slate-bg: #253143;   --badge-slate-fg: #93a8c6;
  --badge-brown-bg: #3a2a1c;   --badge-brown-fg: #d0a97a;
  --badge-magenta-bg: #431640; --badge-magenta-fg: #ec72d8;
  --badge-neutral-bg: #1f2a3b; --badge-neutral-fg: #9fb0c9;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Полноэкранная колонка: шапка/тулбар фиксированной высоты, таблица тянется. */
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* --- Topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.topbar__brand { font-weight: 700; letter-spacing: .5px; margin: 0; font-size: 18px; }
.topbar__right { margin-left: auto; color: var(--text-muted); display: flex; gap: 12px; align-items: center; }
.topbar__user { color: var(--text); }

/* --- Toolbar --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.toolbar__spacer { margin-left: auto; }
.toolbar__msg {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
}

/* Фильтры (поиск + ответственный) */
.filters { display: flex; align-items: center; gap: 8px; margin: 0; }
.filters__search,
.filters__select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.filters__search { min-width: 280px; }
.filters__search::placeholder { color: var(--text-muted); }
.filters__search:focus,
.filters__select:focus { outline: none; border-color: var(--accent); }

/* Кнопки и формы-обёртки */
.inline-form { display: inline; margin: 0; }
.btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn--ghost { color: var(--text-muted); }
.btn--sm { padding: 5px 10px; font-size: 13px; }

/* --- Таблица --- */
/* Единственная прокручиваемая область (по вертикали и горизонтали). */
.table-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 24px; }
table.deals {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed; /* колонки не растягиваются под содержимое — таблица влезает по ширине */
}
table.deals thead th {
  position: sticky;
  top: 0; /* прилипает к верху прокручиваемой области .table-wrap */
  z-index: 1;
  background: var(--panel);
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.deals tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  /* Длинный текст переносится, а не расширяет колонку. */
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
/* Сумма — вправо и без переноса. */
table.deals .num { text-align: right; white-space: nowrap; }

/* Пропорции колонок (12 шт.): широкие — тексту, узкие — числам/бейджам. */
table.deals th:nth-child(1),  table.deals td:nth-child(1)  { width: 5%;  white-space: nowrap; }  /* ID Btx */
table.deals th:nth-child(2),  table.deals td:nth-child(2)  { width: 16%; }                        /* Сделка */
table.deals th:nth-child(3),  table.deals td:nth-child(3)  { width: 8%;  white-space: nowrap; }  /* Дата */
table.deals th:nth-child(4),  table.deals td:nth-child(4)  { width: 8%;  white-space: nowrap; }  /* Страна */
table.deals th:nth-child(5),  table.deals td:nth-child(5)  { width: 8%; }                         /* Город */
table.deals th:nth-child(6),  table.deals td:nth-child(6)  { width: 10%; }                        /* Ответственный */
table.deals th:nth-child(7),  table.deals td:nth-child(7)  { width: 10%; }                        /* Кем создан */
table.deals th:nth-child(8),  table.deals td:nth-child(8)  { width: 10%; }                        /* Контакт */
table.deals th:nth-child(9),  table.deals td:nth-child(9)  { width: 11%; }                        /* E-mail */
table.deals th:nth-child(10), table.deals td:nth-child(10) { width: 9%; }                         /* Телефон */
table.deals th:nth-child(11), table.deals td:nth-child(11) { width: 8%;  white-space: nowrap; }  /* Сумма */
table.deals th:nth-child(12), table.deals td:nth-child(12) { width: 7%;  white-space: nowrap; }  /* Валюта */
table.deals tbody tr:nth-child(odd) { background: var(--row); }
table.deals tbody tr:nth-child(even) { background: var(--row-alt); }
table.deals tbody tr:hover { background: var(--row-hover); }
.muted { color: var(--text-muted); }
.count { padding: 12px 18px; color: var(--text-muted); }

/* --- Бейджи --- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge--green  { background: var(--badge-green-bg);   color: var(--badge-green-fg); }
.badge--blue   { background: var(--badge-blue-bg);    color: var(--badge-blue-fg); }
.badge--violet { background: var(--badge-violet-bg);  color: var(--badge-violet-fg); }
.badge--amber  { background: var(--badge-amber-bg);   color: var(--badge-amber-fg); }
.badge--red    { background: var(--badge-red-bg);     color: var(--badge-red-fg); }
.badge--teal   { background: var(--badge-teal-bg);    color: var(--badge-teal-fg); }
.badge--orange { background: var(--badge-orange-bg);  color: var(--badge-orange-fg); }
.badge--sky    { background: var(--badge-sky-bg);     color: var(--badge-sky-fg); }
.badge--rose   { background: var(--badge-rose-bg);    color: var(--badge-rose-fg); }
.badge--yellow { background: var(--badge-yellow-bg);  color: var(--badge-yellow-fg); }
.badge--cyan   { background: var(--badge-cyan-bg);    color: var(--badge-cyan-fg); }
.badge--lime   { background: var(--badge-lime-bg);    color: var(--badge-lime-fg); }
.badge--pink   { background: var(--badge-pink-bg);    color: var(--badge-pink-fg); }
.badge--indigo { background: var(--badge-indigo-bg);  color: var(--badge-indigo-fg); }
.badge--purple { background: var(--badge-purple-bg);  color: var(--badge-purple-fg); }
.badge--slate  { background: var(--badge-slate-bg);   color: var(--badge-slate-fg); }
.badge--brown  { background: var(--badge-brown-bg);   color: var(--badge-brown-fg); }
.badge--magenta{ background: var(--badge-magenta-bg); color: var(--badge-magenta-fg); }
.badge--neutral{ background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* --- Экран входа --- */
.auth {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
}
.auth-card__brand { font-weight: 700; font-size: 20px; letter-spacing: .5px; margin: 0 0 2px; }
.auth-card__title { color: var(--text-muted); margin: 0 0 20px; font-size: 14px; font-weight: 400; }
.auth-card label { display: block; margin-bottom: 14px; color: var(--text-muted); font-size: 13px; }
.auth-card input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .btn { width: 100%; margin-top: 6px; }
.auth-error {
  background: var(--badge-red-bg);
  color: var(--badge-red-fg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 13px;
}