/* размеры макета (не зависят от темы) */
:root { --sidebar-w: 180px; }

/* ---------- ТЕМЫ ---------- */
:root,
[data-theme="light"] {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #f0f1f4;
  --row-hover: #f6f8fb;
  --text:      #1c1e22;
  --text-mute: #6a7280;
  --link:      #2563eb;
  --border:    #e3e5ea;
  --row-border:#eaecf0;
  --accent:    #2563eb;
  --accent-fg: #ffffff;
  --danger:    #dc2626;
  --warn:      #f59e0b;
  --ok:        #16a34a;
  --shadow:    0 1px 3px rgba(0,0,0,.06);
}

[data-theme="dark"] {
  --bg:        #0f1115;
  --surface:   #1a1d23;
  --surface-2: #232730;
  --row-hover: #20242c;
  --text:      #e5e7eb;
  --text-mute: #9aa3b2;
  --link:      #60a5fa;
  --border:    #2a2f39;
  --row-border:#262b34;
  --accent:    #3b82f6;
  --accent-fg: #ffffff;
  --danger:    #ef4444;
  --warn:      #f59e0b;
  --ok:        #22c55e;
  --shadow:    0 1px 3px rgba(0,0,0,.5);
}

/* ---------- БАЗА ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* один источник правды для шрифта — наследуется всюду */
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}
/* Формы не наследуют font-family/size из body в браузерах — принудительно даём Lato */
input, button, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
small { color: var(--text-mute); }

/* ---------- ICON HELPER (mask-image — красится через color) ---------- */
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
          mask: var(--icon-url) center / contain no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }

/* ---------- TOPBAR ---------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: fixed;             /* всегда сверху, не сдвигается вместе с контентом */
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 40;
}
body { padding-top: 52px; }    /* компенсация под фиксированный topbar */
.topbar .brand a { font-weight: 700; font-size: 18px; color: var(--text); }
.topbar__nav { display: flex; gap: 14px; flex: 1; }
.topbar__nav a { color: var(--text-mute); font-weight: 500; }
.topbar__nav a:hover { color: var(--text); }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.me { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mute); }

.ny-clock {
  font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  white-space: nowrap;
}

.icon-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 14px;
}
.lang-toggle {
  font-weight: 700; font-size: 11px; letter-spacing: .04em;
  min-width: 34px; padding: 4px 8px;
}
.lang-toggle:hover { background: var(--surface-2); }

/* ---------- LAYOUT ---------- */
.container { padding: 18px; max-width: 1200px; margin: 0 auto; }

/* body сдвигается вправо на ширину sidebar когда меню открыто */
body {
  transition: padding-left .2s ease;
}
body.sidebar-open { padding-left: var(--sidebar-w); }

/* Sidebar — фиксированный, слева от края экрана; уезжает влево когда закрыт */
.sidebar {
  position: fixed;
  top: 52px;                 /* под топбаром */
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px;
  box-shadow: 2px 0 12px rgba(0,0,0,.06);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 30;
  overflow-y: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }

/* overlay больше не нужен — прячем полностью */
.sidebar-overlay { display: none; }

/* ---------- HAMBURGER BUTTON ---------- */
.icon-btn--hamburger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 3px; width: 30px; height: 28px; padding: 0;
}
.icon-btn--hamburger span {
  display: block; width: 16px; height: 2px; background: currentColor;
  border-radius: 1px; margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
body.sidebar-open .icon-btn--hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.sidebar-open .icon-btn--hamburger span:nth-child(2) { opacity: 0; }
body.sidebar-open .icon-btn--hamburger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sidebar h3 {
  font-size: 12px; text-transform: uppercase; color: var(--text-mute);
  margin: 0 0 10px; letter-spacing: .08em; font-weight: 800;
}
.sidebar hr { border-top-color: var(--row-border); margin: 16px 0; }

/* ---------- CUSTOM CHECK / RADIO (в стиле Slack) ---------- */
.check {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color .12s;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.check:hover { background: var(--row-hover); }

/* прячем нативный input, рисуем свой кружок (одинаково и checkbox, и radio) */
.check input[type="checkbox"],
.check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--text-mute);   /* контрастная рамка, видна на белом */
  border-radius: 50%;                    /* оба круглые */
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background-color .12s, border-color .12s;
}
.check input:hover { border-color: var(--accent); }

.check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.type-filters { display: flex; flex-direction: column; gap: 1px; }
.type-filters .check span:last-child { color: var(--text); }

.sidebar-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sidebar-select:hover  { border-color: var(--accent); }
.sidebar-select:focus  { outline: none; border-color: var(--accent); }

.ws-status { display: flex; align-items: center; gap: 6px; color: var(--text-mute); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--on  { background: var(--ok); }
.dot--off { background: var(--danger); }

/* ---------- FEED ---------- */
.feed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* прижимаем feed к левому краю — компенсируем padding у .container */
  margin-left: -18px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.rows { display: flex; flex-direction: column; }

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- ROW (flex, одна строка, всё всегда видно) ---------- */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 42px;
  min-width: 0;
}
/* Колонки в flex.
   Имя — ФИКСИРОВАННАЯ ширина 220px (короткие имена оставляют пустоту,
   длинные обрезаются эллипсисом). Тогда иконки у всех строк начинаются
   на ОДНОМ вертикальном уровне, как в Slack.
   На узких экранах имя может ужиматься (shrink:1) — иначе не влезет.
   margin-left: auto на .cell-log отталкивает часики+таймер к правому краю. */
.cell-type    { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cell-ava     { flex: 0 0 auto; display: flex; justify-content: center; }
.cell-name    {
  flex: 0 1 220px;           /* базовая 220px, при нехватке места сжимается */
  min-width: 0;              /* КРИТИЧНО чтобы flex-item мог ужиматься */
  overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
}
.cell-name .client-link {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; display: inline-block;
}
.cell-tags    { flex: 0 0 auto; display: flex; gap: 3px; }
.cell-actions { flex: 0 0 auto; display: flex; gap: 3px; }
/* Правый край: log-иконка и таймер — оба ФИКСИРОВАННОЙ ширины,
   таймер выравнивается по правому краю строки → числа заканчиваются
   на одной вертикали независимо от их длины ("29", "1:08", "12:45" и т.д.) */
/* фиксированное место под ! — всегда зарезервировано, чтобы строки были ровными */
.cell-excl    { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }
/* время + i вместе, тесно, прижаты к правому краю */
.cell-end     { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cell-status  { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; }
.cell-log     { flex: 0 0 auto; display: flex; justify-content: center; }

/* ---------- АДАПТИВ (окно на треть экрана) ---------- */
@media (max-width: 900px) {
  .row { gap: 6px; padding: 7px 10px; }
  .cell-name { flex-basis: 180px; }         /* имя чуть уже, иконки всё равно выровнены */
  .status-tag { width: 24px; height: 24px; padding: 2px; }
  .status-tag img { width: 16px; height: 16px; }
  .act-btn { width: 24px; height: 24px; padding: 2px; }
  .act-btn__icon { width: 16px; height: 16px; }
  .cell-tags, .cell-actions { gap: 2px; }
}

@media (max-width: 640px) {
  .row { gap: 4px; padding: 6px 8px; }
  .cell-name { flex-basis: 140px; }
  .status-tag { width: 22px; height: 22px; padding: 1px; }
  .status-tag img { width: 14px; height: 14px; }
  .act-btn { width: 22px; height: 22px; padding: 1px; }
  .act-btn__icon { width: 14px; height: 14px; }
  .hot-call-mark { width: 16px; height: 16px; flex: 0 0 16px; }
  .cell-log { flex: 0 0 16px; }              /* часы остаются, ужимаем */
  .log-icon { width: 14px; height: 14px; }
  .type-image { width: 20px; height: 20px; }
  .status-cell { font-size: 12px; }
  .avatar--xs { width: 22px; height: 22px; }
}

@media (max-width: 460px) {
  .row { gap: 3px; padding: 5px 6px; }
  .cell-name { flex-basis: 100px; }
  .status-tag { width: 20px; height: 20px; padding: 1px; }
  .status-tag img { width: 12px; height: 12px; }
  .act-btn { width: 20px; height: 20px; padding: 1px; }
  .act-btn__icon { width: 12px; height: 12px; }
  .status-cell { font-size: 11px; }
  .type-image { width: 18px; height: 18px; }
  .hot-call-mark { width: 14px; height: 14px; flex: 0 0 14px; }
  .avatar--xs { width: 20px; height: 20px; }
}

/* Контейнер / сайдбар / топбар — адаптив под узкие окна */
@media (max-width: 900px) {
  .container { padding: 10px; }
  .feed { margin-left: -10px; margin-right: -10px; }
  /* Сайдбар при открытии не двигает контент — рисуется поверх */
  body.sidebar-open { padding-left: 0; }
  body.sidebar-open .sidebar-overlay {
    display: block;
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 25;
  }
  /* Топбар компактнее */
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar__nav { gap: 8px; }
  .topbar__nav a { font-size: 13px; }
  .ny-clock { display: none; }             /* NY-часы прячем — редко нужны */
}

@media (max-width: 640px) {
  .container { padding: 6px; }
  .feed { margin-left: -6px; margin-right: -6px; border-radius: 0; }
  /* Топбар совсем узкий — прячем брендинг и второстепенные подписи */
  .topbar .me { display: none; }           /* имя оператора вверху — скрываем */
  .topbar__nav a { font-size: 12px; }
}

@media (max-width: 460px) {
  .container { padding: 4px; }
  .feed { margin-left: -4px; margin-right: -4px; }
  .topbar { padding: 0 6px; }
  .topbar__nav { gap: 6px; }
}
.row:hover { background: var(--row-hover); }

/* «Горячий звонок» (4+ lead/booked с номера за час) — картинка того же размера
   что иконка типа, стоит слева от неё */
.hot-call-mark {
  width: 22px; height: 22px;
  object-fit: contain;
  cursor: help;
  flex: 0 0 22px;
}
.row--hot-call { background: rgba(239, 68, 68, .06); }
.row--hot-call:hover { background: rgba(239, 68, 68, .12); }

/* ---------- ACT-BTN (inline-кнопка действия) ---------- */
.act-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s, transform .1s;
}
.act-btn:hover { background: var(--row-hover); transform: scale(1.05); }
.act-btn__icon { width: 18px; height: 18px; object-fit: contain; }
.act-btn--danger:hover { background: rgba(239, 68, 68, .15); }

/* ---------- STATUS-TAG (тыкаемый эмодзи-тег) ---------- */
.status-tag {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3px;
  opacity: .28;                        /* сильно прозрачный когда неактивный */
  transition: opacity .12s, background-color .12s, transform .1s;
  display: inline-flex; align-items: center; justify-content: center;
}
.status-tag:hover { opacity: .7; background: var(--row-hover); transform: scale(1.05); }
.status-tag--active { opacity: 1; background: var(--row-hover); }
.status-tag--active:hover { opacity: 1; background: var(--border); }
.status-tag--locked { opacity: .18; cursor: not-allowed; }
.status-tag--locked:hover { opacity: .18; background: transparent; transform: none; }
.status-tag img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* ---------- TOAST-LAYER (undo для «Готово») ---------- */
.toast-layer {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  min-width: 280px; max-width: 380px;
  font-size: 13px;
  animation: toast-in .18s ease-out;
}
.toast--leaving { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in  { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to   { transform: translateX(20px); opacity: 0; } }
.toast__text { flex: 1 1 auto; color: var(--text); }
.toast__count { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.toast__undo {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: background-color .12s, color .12s;
}
.toast__undo:hover { background: var(--accent); color: var(--accent-fg); }

.log-icon {
  width: 16px; height: 16px;
  color: var(--text-mute);
  cursor: help;
  opacity: .5;
  transition: opacity .12s, color .12s;
}
.log-icon:hover { opacity: 1; color: var(--accent); }

.client-preview {
  color: var(--text-mute);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

/* акцентная полоска слева */
.row--new     { box-shadow: inset 2px 0 0 var(--accent); }
.row--in_work { box-shadow: inset 2px 0 0 var(--warn); }
/* НЕ используем opacity — она создаёт stacking context и ломает z-index
   выпадающего меню при наведении на соседние строки. Приглушаем через цвет. */
.row--archived { box-shadow: inset 2px 0 0 var(--ok); color: var(--text-mute); }
.row--archived .avatar { filter: grayscale(.3); }

/* ---------- TYPE CELL ---------- */
.type-icon { /* использует .icon, цвет задаётся inline */
  width: 20px; height: 20px;
}
/* многоцветный SVG (без mask-покраски) — для типов без заданного color */
.type-image {
  width: 22px; height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
}
.type-image--sm { width: 16px; height: 16px; }
.type-text {
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
  font-family: Consolas, "SF Mono", monospace;
  text-transform: lowercase;
}

/* ---------- AVATAR ---------- */
.avatar {
  border-radius: 4px;
  background: var(--surface-2);
  object-fit: cover;
  display: block;
}
.avatar--xs { width: 26px; height: 26px; }

/* оператор на выходном — приглушённая аватарка + 💤 в углу */
.cell-ava { position: relative; }
.cell-ava--off .avatar { filter: grayscale(1); opacity: .6; }
.ava-off {
  position: absolute; right: -3px; bottom: -4px;
  font-size: 12px; line-height: 1; cursor: help;
  filter: drop-shadow(0 0 2px var(--surface)) drop-shadow(0 0 1px var(--surface));
}
.avatar--sm { width: 28px; height: 28px; }
.avatar--lg { width: 64px; height: 64px; border-radius: 50%; }

/* ---------- CLIENT NAME ---------- */
.client-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
}
a.client-link:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
span.client-link { cursor: default; }
.row--archived .client-link { color: var(--text-mute); text-decoration: line-through; }

/* помечено «на удаление» (крестик-действие) — зачёркнуто как в архиве, сигнал админу */
.row--pending-delete .client-link { color: var(--text-mute); text-decoration: line-through; }

/* ---------- STATUS CELL ---------- */
.status-cell {
  display: inline-flex; align-items: center; justify-content: flex-end;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.status-cell--hot    { color: var(--danger); }
.status-cell--wrench { color: var(--text-mute); font-size: 14px; }
.status-cell--done   { color: var(--ok); font-size: 14px; }
.status-cell .icon   { width: 18px; height: 18px; }
.status-emoji { width: 18px; height: 18px; vertical-align: middle; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.btn:hover { filter: brightness(0.95); }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--danger  { background: var(--danger); color: white; border-color: var(--danger); }
.btn--danger:hover { filter: brightness(1.08); }
.btn--small   { padding: 3px 8px; font-size: 12px; }
.btn--ghost   { background: transparent; }
.btn--google  { background: white; color: #1c1e22; border: 1px solid #ddd; justify-content: center; padding: 10px 14px; }
.g-icon { font-weight: 700; color: #4285F4; }

/* ---------- FORMS / CARDS ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}

/* ---------- ADMIN NAV ---------- */
.admin-nav {
  display: flex; gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.admin-nav a {
  padding: 10px 16px;
  color: var(--text-mute);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.admin-nav a:hover { color: var(--text); text-decoration: none; }
.admin-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- SETTINGS FORM ---------- */
.settings-form { display: flex; flex-direction: column; gap: 22px; }
.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--row-border);
}
.setting:last-of-type { border-bottom: none; }
.setting__title { font-weight: 700; font-size: 15px; grid-column: 1; grid-row: 1; }
.setting__desc  { color: var(--text-mute); font-size: 13px; grid-column: 1; grid-row: 2; line-height: 1.5; }
.setting__control {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  display: flex; align-items: center; gap: 8px;
}
.setting__control input[type=number] {
  width: 90px; text-align: right;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600;
}
.setting__unit { color: var(--text-mute); font-size: 13px; min-width: 50px; }
.settings-form__actions { display: flex; justify-content: flex-end; padding-top: 6px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-mute); }
input[type=text], input[type=email], input[type=password], input[type=file], select, textarea {
  padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit;
}
input:disabled { color: var(--text-mute); }
.avatar-row { display: flex; align-items: center; gap: 14px; }

.login-card {
  max-width: 360px; margin: 60px auto;
  background: var(--surface); padding: 28px;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.login-card h1 { margin-top: 0; font-weight: 700; }
.or { text-align: center; color: var(--text-mute); margin: 14px 0; position: relative; }
.or::before, .or::after {
  content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.or::before { left: 0; }
.or::after { right: 0; }
.or span { background: var(--surface); padding: 0 8px; position: relative; z-index: 1; }
.hint { color: var(--text-mute); font-size: 12px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; vertical-align: middle; }
.table th { color: var(--text-mute); font-weight: 600; }
.table-actions { display: flex; gap: 6px; }

/* ---------- OPERATORS LIST (flex-строки, всё в одну линию) ---------- */
.op-header, .op-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--row-border);
}
.op-header { padding: 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); font-weight: 700; }
.op-row:last-child { border-bottom: none; }
.op-row:hover { background: var(--row-hover); border-radius: 6px; }

/* колонки — email сжатый чтобы всё сдвинулось правее */
.op-header__email, .op-row__email {
  flex: 0 0 200px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.op-row__email-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row__name { width: 100%; box-sizing: border-box; }

/* колонка аватарки — эскиз + кнопка выбора файла */
.op-header__avatar, .op-row__avatar {
  flex: 0 0 140px;
  display: flex; align-items: center; gap: 8px;
}
.op-row__avatar-img {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.op-row__avatar-pick {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  transition: background-color .12s, border-color .12s;
}
.op-row__avatar-pick:hover { background: var(--surface-2); border-color: var(--accent); }
.op-row__avatar-pick input[type="file"] { display: none; }

/* «остальное» — как раньше, только email больше не растягивается */
.op-header__ext, .op-row__ext {
  flex: 0 0 140px;
  display: flex; flex-direction: column; gap: 4px;
}
.op-row__ext input {
  width: 100%; box-sizing: border-box;
  padding: 4px 8px; font-size: 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
}

.op-header__check, .op-row__check {
  flex: 0 0 80px;
  display: flex; justify-content: center; align-items: center;
}
.op-header__pw, .op-row__pw { flex: 1 1 0; min-width: 220px; }  /* пароль растягивается, минимум 220px */
.op-row__pw input { width: 100%; box-sizing: border-box; }

.op-header__actions, .op-row__actions {
  flex: 0 0 160px;
  display: flex; gap: 6px; justify-content: flex-end;
}

.flashes { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.flash { padding: 8px 12px; border-radius: 6px; font-weight: 500; }
.flash--error   { background: rgba(220,38,38,.1); color: var(--danger); }
.flash--success { background: rgba(22,163,74,.12); color: var(--ok); }
.flash--warning { background: rgba(245,158,11,.12); color: var(--warn); }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal[hidden] { display: none; }
/* при открытом сайдбаре центрируем окно по видимой области (правее панели) */
body.sidebar-open .modal { padding-left: var(--sidebar-w); }
@media (max-width: 900px) { body.sidebar-open .modal { padding-left: 0; } }
.modal__inner {
  background: var(--surface); padding: 20px; border-radius: 10px; min-width: 320px;
  border: 1px solid var(--border);
  max-height: 90vh; overflow-y: auto;
}
.modal__inner--wide { min-width: 480px; max-width: 640px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- GUIDE (инструкция по типам уведомлений) ---------- */
.guide-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
}
.guide-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.guide-icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-block;
  object-fit: contain;
}
.guide-icon--mask {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.guide-icon--empty { background: var(--border); border-radius: 6px; }
.guide-row__body { flex: 1 1 auto; min-width: 0; }
.guide-row__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; margin-bottom: 2px;
}
.guide-row__title code {
  background: var(--border); color: var(--text);
  padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.guide-row__desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.guide-empty { color: var(--muted); text-align: center; padding: 12px; }

/* Секции в модалке — заголовок и подсказка */
.guide-section-h {
  margin: 22px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.guide-section-h:first-of-type { margin-top: 10px; }
.guide-info {
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.28);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

/* ---------- HOVER TOOLTIP (детали уведомления при наведении) ---------- */
.notif-tooltip {
  position: absolute;
  z-index: 60;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  padding: 10px 12px;
  animation: tt-fade .12s ease-out;
}
.notif-tooltip[hidden] { display: none; }
@keyframes tt-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.tt__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tt__badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  color: white; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
/* когда у типа нет цвета — рисуем спокойный "капсульный" бейдж */
.tt__badge--neutral {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- MINI TOOLTIP (маленькая тёмная плашка над элементом) ---------- */
.mini-tooltip {
  position: absolute;
  z-index: 70;
  background: #1c1e22;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-line;      /* поддержка \n для многострочных логов */
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  pointer-events: none;
  animation: tt-fade .12s ease-out;
}
[data-theme="dark"] .mini-tooltip { background: #2a2f39; }
.mini-tooltip[hidden] { display: none; }
.tt__time { color: var(--text-mute); font-size: 10px; white-space: nowrap; }

.tt__client {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.tt__client-name { font-weight: 700; font-size: 12px; }
.tt__client-phone {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-mute);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tt__client-phone:hover { color: var(--link); text-decoration: underline; }
.tt__owner  { color: var(--text-mute); font-size: 9px; margin-bottom: 6px; }

.tt__audio {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 7px;
  transition: filter .12s;
}
.tt__audio:hover { filter: brightness(1.1); text-decoration: none; }

.settings-textarea {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: 13px;
  resize: vertical;
  min-height: 60px;
}

.tt__hot-call {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, .14);          /* красный — «горячий» звонок (4+) */
  color: #ef4444;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 7px;
}

.tt__text {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 10px; line-height: 1.4;
  margin-bottom: 7px;
}
.tt__meta { display: flex; flex-direction: column; gap: 3px; font-size: 9px; }
.tt__meta-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 6px;
  padding: 3px 0; border-bottom: 1px solid var(--row-border);
}
.tt__meta-row:last-child { border-bottom: none; }
.tt__k { color: var(--text-mute); font-weight: 500; }
.tt__v {
  word-break: break-word;
  white-space: pre-line;  /* сохраняем \n как реальные переводы строк */
}

/* ---------- COMMENTS in tooltip ---------- */
.tt__comments-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font: inherit; font-size: 10px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 11px;
  cursor: pointer;
  margin: 3px 0 7px;
  transition: background-color .12s;
}
.tt__comments-toggle:hover { background: var(--surface-2); }

.tt__comments { margin-bottom: 7px; }
.tt__cmt-loading, .tt__cmt-empty {
  color: var(--text-mute); font-size: 10px; padding: 4px 0;
}
.tt__cmt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.tt__cmt {
  display: flex; gap: 6px;
  padding: 6px;
  background: var(--surface-2);
  border-radius: 6px;
}
.tt__cmt-avatar { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.tt__cmt-body { flex: 1; min-width: 0; }
.tt__cmt-head { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.tt__cmt-name { font-weight: 700; font-size: 10px; }
.tt__cmt-time { color: var(--text-mute); font-size: 9px; }
.tt__cmt-text { font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }

.tt__cmt-form { display: flex; flex-direction: column; gap: 4px; }
.tt__cmt-input {
  width: 100%; box-sizing: border-box;
  min-height: 36px;
  resize: vertical;
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: 11px;
}
.tt__cmt-send {
  align-self: flex-end;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit; font-size: 10px; font-weight: 600;
  cursor: pointer;
  transition: filter .12s;
}
.tt__cmt-send:hover:not(:disabled) { filter: brightness(1.08); }
.tt__cmt-send:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- DETAILS MODAL ---------- */
.details__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.details__badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  color: white; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.details__time { color: var(--text-mute); font-size: 12px; }
.details__client { margin: 6px 0 4px; font-weight: 700; font-size: 18px; }
.details__owner { color: var(--text-mute); font-size: 13px; margin-bottom: 12px; }

.details__section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 700; margin: 14px 0 6px;
}
.details__text {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 14px; line-height: 1.5;
}
.details__meta { width: 100%; border-collapse: collapse; font-size: 13px; }
.details__meta td { padding: 6px 10px; border-bottom: 1px solid var(--row-border); vertical-align: top; }
.details__meta tr:last-child td { border-bottom: none; }
.details__k { color: var(--text-mute); width: 35%; font-weight: 500; }
.details__v { color: var(--text); word-break: break-word; }

.cell-type { cursor: help; }
.cell-type:hover .type-icon,
.cell-type:hover .type-text { filter: brightness(1.2); }

/* ---------- DETAILS MODAL (клик по строке → статусы + действия) ---------- */
/* вся строка кликабельна */
.row { cursor: pointer; }

/* накопленные статус-иконки прямо в строке */
.cell-tags { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.status-chip { width: 18px; height: 18px; object-fit: contain; }

/* компактное окно: только иконки статусов и действий, подписи — на hover */
/* Попап у строки (НЕ модалка): #details-modal — прозрачный слой на весь экран
   (ловит клик-вне, чтобы закрыть). #details-inner — компактное окошко в одну
   строку, позиционируется из JS (positionDetails) над кликнутой строкой. */
#details-modal { background: transparent; }
#details-inner {
  position: absolute;
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
/* всё в одну строку: действия · разделитель · статусы */
.dm-icon-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0px; }
.dm-sep { width: 1px; align-self: stretch; background: var(--border); margin: 3px 4px; }
/* только смайлики, без обводки; компактно */
.dm-icon-btn {
  width: 24px; height: 32px;
  border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 15px; line-height: 1;
  transition: transform .1s, opacity .12s;
}
.dm-icon-btn:hover:not(:disabled) { transform: scale(1.15); }
.dm-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.dm-icon-btn img { width: 18px; height: 18px; object-fit: contain; }
.dm-icon-btn--undo { font-size: 17px; }

/* подсказка когда статусы недоступны (не своё уведомление) */
.dm-note {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.28);
  border-radius: 8px; font-size: 11px; line-height: 1.45; color: var(--text);
  max-width: 280px;
}