/* ═══════════════════════════════════════════════════════════════
   TIMPRO — THEME 2026
   Единая дизайн-система в стиле нового лендинга.
   Подключается ПОСЛЕДНЕЙ на всех страницах.
   Принципы:
   • Только визуал поверх существующих классов — логику не трогаем.
   • Никаких тяжёлых эффектов на скролл-контенте (производительность).
   • Размеры макета (--sidebar-width, --topbar-height) не меняем.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ: светлая тема ── */
:root{
  --bg-primary:#f7f8fc;
  --bg-secondary:#ffffff;
  --bg-card:#ffffff;
  --bg-tertiary:#f0f2f8;
  --bg-hover:#e9edf7;
  --bg-active:#e4e9ff;

  --text-primary:#0c0e1a;
  --text-secondary:#3a4156;
  --text-muted:#8189a0;

  --accent:#2e7dff;
  --accent-hover:#1e63e0;
  --accent-light:#e8efff;
  --accent-2:#b83ce6;

  --border:#e4e7f0;
  --border-focus:#7c4dff;

  --shadow-sm:0 1px 2px rgba(18,22,50,.04),0 4px 14px rgba(18,22,50,.05);
  --shadow-md:0 2px 6px rgba(18,22,50,.05),0 14px 34px rgba(18,22,50,.08);
  --shadow-lg:0 6px 18px rgba(18,22,50,.07),0 32px 70px rgba(18,22,50,.12);

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:26px;

  --t26-grad:linear-gradient(120deg,#2e7dff 0%,#7c4dff 52%,#b83ce6 100%);
  --t26-grad-soft:linear-gradient(120deg,rgba(46,125,255,.10),rgba(184,60,230,.10));
  --t26-ease:cubic-bezier(.32,.72,0,1);
  --transition:all .22s cubic-bezier(.32,.72,0,1);
}

/* ── 1б. ТОКЕНЫ: тёмная тема ── */
[data-theme="dark"]{
  --bg-primary:#0a0b13;
  --bg-secondary:#12131f;
  --bg-card:#151724;
  --bg-tertiary:#1c1f30;
  --bg-hover:#242841;
  --bg-active:#2b3052;

  --text-primary:#eef0f8;
  --text-secondary:#aeb4c9;
  --text-muted:#787f98;

  --accent:#5b9aff;
  --accent-hover:#7caeff;
  --accent-light:#1b2440;
  --accent-2:#c56bf0;

  --border:#262a40;
  --border-focus:#8d6bff;

  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 14px 44px rgba(0,0,0,.6);
}

/* ── 2. БАЗА ── */
body{background:var(--bg-primary);color:var(--text-primary)}
::selection{background:rgba(124,77,255,.22)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── 3. КНОПКИ ── */
.btn{border-radius:999px;font-weight:600;letter-spacing:-.01em;
  transition:transform .25s var(--t26-ease),box-shadow .25s var(--t26-ease),background .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--t26-grad);color:#fff;box-shadow:0 6px 18px rgba(96,76,240,.25)}
.btn-primary:hover{background:var(--t26-grad);transform:translateY(-1px);box-shadow:0 10px 26px rgba(96,76,240,.35)}
.btn-secondary{background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--text-muted);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-icon{border-radius:12px}
.btn-danger{box-shadow:0 6px 16px rgba(239,68,68,.2)}
.btn-danger:hover{opacity:1;transform:translateY(-1px);box-shadow:0 10px 24px rgba(239,68,68,.3)}

/* ── 4. ПОЛЯ ВВОДА ── */
.input,select.input,textarea.input{border-radius:13px;border-width:1.5px;background:var(--bg-secondary)}
.input:focus,textarea.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px rgba(124,77,255,.12)}

/* ── 5. КАРТОЧКИ И ПАНЕЛИ ── */
.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow-sm)}

/* ── 6. БЕЙДЖИ ── */
.badge{font-weight:700;letter-spacing:.01em}
.badge-accent{background:var(--t26-grad-soft);color:var(--accent)}

/* ── 7. ТОСТЫ: в одном стиле с системными уведомлениями (.ntoast) ── */
.toast{
  display:flex;align-items:center;gap:11px;padding:12px 14px;min-width:260px;max-width:380px;
  border-radius:18px;background:var(--bg-secondary);border:1px solid var(--border);
  box-shadow:0 16px 48px -12px rgba(15,23,42,.35);
  font-size:13px;font-weight:500;color:var(--text-primary);
  opacity:0;transform:translateX(110%);animation:none;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.1),opacity .3s}
.toast.show{opacity:1;transform:none}
.toast.hide{opacity:0;transform:translateX(110%)}
/* старые цветные бортики слева больше не нужны */
.toast.success,.toast.error,.toast.info,.toast.warning{border-left:1px solid var(--border)}
.toast .toast-ic{width:32px;height:32px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff}
.toast .toast-ic svg{width:16px;height:16px}
.toast.success .toast-ic{background:linear-gradient(135deg,#10b981,#22c55e);box-shadow:0 4px 12px rgba(34,197,94,.35)}
.toast.error .toast-ic{background:linear-gradient(135deg,#ef4444,#f43f5e);box-shadow:0 4px 12px rgba(239,68,68,.35)}
.toast.warning .toast-ic{background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 4px 12px rgba(245,158,11,.35)}
.toast.info .toast-ic{background:var(--t26-grad);box-shadow:0 4px 12px rgba(96,76,240,.35)}
.toast .toast-msg{min-width:0;line-height:1.4;word-break:break-word}

/* ── 8. МОДАЛКИ (общие классы проекта) ── */
.modal,.modal-box,.modal-content,.modal-window{border-radius:var(--radius-xl)}
.modal-overlay,.overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ── 9. РАБОЧИЙ СТОЛ: навигация и списки ── */
.nav-item{border-radius:14px}
.nav-item.active{color:var(--accent)}
.dialog-item{border-radius:15px}
.dialog-item.unread::before{background:var(--t26-grad)}
.chat-input-area textarea,.chat-input-area .input{border-radius:16px}
.send-btn,.team-send-btn{background:var(--t26-grad) !important;border-radius:50%;box-shadow:0 4px 14px rgba(96,76,240,.3)}
.send-btn:hover,.team-send-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(96,76,240,.4)}

/* пузыри сообщений: исходящие — фирменный градиент */
.msg-row.outgoing .msg-bubble{background:linear-gradient(135deg,#2e7dff,#7c4dff);color:#fff;box-shadow:0 2px 10px rgba(96,76,240,.22)}
[data-theme="dark"] .msg-row.outgoing .msg-bubble{background:linear-gradient(135deg,#3b82f6,#7c5cff)}

/* ── 10. КАБИНЕТЫ И АДМИН ── */
.cab-tab{border-radius:12px}
.cab-tab.active{background:var(--t26-grad-soft);color:var(--accent)}
.admin-nav-item{border-radius:12px}
.admin-nav-item.active{background:var(--t26-grad-soft);color:var(--accent)}
.admin-sidebar,.cab-sidebar{background:var(--bg-secondary)}

/* ── 11. CRM ── */
.crm-card{border-radius:14px;box-shadow:var(--shadow-sm)}
.crm-card:hover{box-shadow:var(--shadow-md)}
.crm-col,.kanban-col{border-radius:var(--radius-lg)}

/* ── 12. ЗАДАЧИ ── */
.task-card{border-radius:14px}
.task-card:hover{box-shadow:var(--shadow-md)}

/* ── 13. ТАБЛИЦЫ ── */
table th{font-weight:700;letter-spacing:.02em;color:var(--text-muted)}
table tr{transition:background .15s}

/* ── 14. ФОКУС ВИДИМЫЙ (доступность) ── */
/* ── 22. ФИЛЬТР-ЧИПЫ МЕССЕНДЖЕРОВ: нормализация размеров ── */
/* SVG-иконки в чипах рендерятся по-разному в разных браузерах без явного size.
   Фиксируем высоту чипа и размер картинки, чтобы «Все» и «TG»/«VK» были одинаковы. */
.filter-chip{height:28px;box-sizing:border-box;align-items:center}
.filter-chip img,.filter-chip .msgr-logo{
  width:14px;height:14px;flex-shrink:0;object-fit:contain;display:block}


.btn:focus-visible,.input:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--border-focus);outline-offset:2px}

/* ═══ 15. МОБИЛЬНАЯ АДАПТАЦИЯ (доводка поверх responsive.css) ═══ */
@media (max-width:768px){
  :root{
    --radius-lg:16px;--radius-xl:20px;
    /* лёгкие тени на телефоне — быстрее композитинг */
    --shadow-md:0 2px 8px rgba(18,22,50,.08);
    --shadow-lg:0 6px 20px rgba(18,22,50,.12);
  }
  .btn{min-height:44px}
  .icon-btn{min-width:42px;min-height:42px}
  .modal,.modal-box,.modal-content,.modal-window{
    border-radius:20px 20px 0 0;max-height:92dvh}
  /* безопасные зоны iPhone */
  body{padding-bottom:env(safe-area-inset-bottom)}
  #toast-container{bottom:max(16px,env(safe-area-inset-bottom));right:12px;left:12px}
  .toast{min-width:0;width:100%}
}
@media (pointer:coarse){
  /* убираем hover-подъёмы на тач-экранах: меньше перерисовок */
  .btn:hover,.btn-primary:hover,.btn-secondary:hover,.card:hover,
  .dialog-item:hover,.nav-item:hover,.crm-card:hover,.task-card:hover{transform:none}
}

/* ═══ 16. ПРОИЗВОДИТЕЛЬНОСТЬ И ДВИЖЕНИЕ ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ═══ 17. САЙДБАР: СЕКЦИЯ КАБИНЕТОВ ═══ */
.nav-bottom{border-top:1px solid var(--border);padding-top:6px;margin-top:6px}
.nav-account{border-radius:14px;transition:background .2s var(--t26-ease),transform .2s var(--t26-ease);position:relative}
.nav-account:hover{background:var(--bg-hover)}
.nav-account:active{transform:scale(.985)}
.nav-account-name{font-weight:700;letter-spacing:-.01em}
.nav-account-sub{color:var(--text-muted);font-size:11px}
.nav-avatar{box-shadow:0 0 0 2px var(--bg-secondary),0 0 0 3.5px var(--border)}

/* ═══ 18. МОБИЛЬНЫЙ ЯЩИК НАВИГАЦИИ: аккуратные «менюшки» ═══ */
@media (max-width:768px){
  /* ящик: воздух, безопасные зоны, плавный скролл */
  body.is-workspace .nav-sidebar{
    width:min(320px,86vw) !important;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    border-radius:0 22px 22px 0;
    -webkit-overflow-scrolling:touch}
  body.is-workspace .nav-sidebar .nav-item{min-height:46px;border-radius:13px;margin:1px 8px}
  /* секция кабинетов прижата к низу ящика и оформлена карточками */
  body.is-workspace .nav-sidebar .nav-bottom{
    margin-top:auto;padding:10px 8px max(10px,env(safe-area-inset-bottom));
    border-top:1px solid var(--border);background:var(--bg-primary);
    border-radius:0 0 22px 0}
  body.is-workspace .nav-account{
    display:flex;align-items:center;gap:11px;width:calc(100% - 8px);
    margin:3px 4px;padding:9px 12px;border-radius:14px;
    background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
  body.is-workspace .nav-account::after{
    content:"›";margin-left:auto;color:var(--text-muted);font-size:17px;line-height:1}
  body.is-workspace .nav-account .nav-account-info{display:flex;flex-direction:column;min-width:0;text-align:left}
  body.is-workspace .nav-account .nav-account-name{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.is-workspace .nav-account .nav-account-sub{font-size:11px}
  body.is-workspace .nav-account .nav-avatar{width:38px;height:38px;flex:none}
}

/* ═══ 19. КРОССБРАУЗЕРНОСТЬ ═══ */
/* Firefox: тонкий скроллбар (webkit-правила он игнорирует) */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* Safari/старые браузеры без dvh: высота не схлопывается */
@supports not (height:100dvh){
  body.is-workspace .workspace,body.is-workspace .nav-sidebar{height:100vh !important}
}
/* iOS Safari: серый таб-хайлайт убираем, жесты не дёргают интерфейс */
*{-webkit-tap-highlight-color:transparent}
input[type="text"],input[type="email"],input[type="password"],input[type="search"],
input[type="tel"],input[type="number"],textarea{-webkit-appearance:none;appearance:none;border-radius:inherit}

/* ═══ 20. МОБИЛЬНЫЕ DRAWER-МЕНЮ КАБИНЕТОВ (js/mobile-drawers.js) ═══ */
/* плавающая кнопка ☰ и затемнение — видны только на телефоне */
.mdr-btn{display:none}
.mdr-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1290}
/* страховка от старого кеша: оверлей на уровне body не накрывает профиль (z 600) */
body > .mdr-overlay{z-index:599}
.mdr-overlay.on{display:block}

@media (max-width:768px){
  .mdr-btn{
    display:flex;position:fixed;top:10px;left:10px;z-index:1280;
    width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border-radius:13px;border:1px solid var(--border);background:var(--bg-secondary);
    box-shadow:var(--shadow-md);cursor:pointer}
  .mdr-btn span{width:17px;height:2px;border-radius:2px;background:var(--text-primary)}

  /* ── Личный кабинет (оверлей профиля) ── */
  .profile-page .profile-layout{display:block}
  .profile-page .profile-sidebar{
    position:fixed;top:0;bottom:0;left:0;height:100dvh;
    width:min(320px,86vw);z-index:1300;
    transform:translateX(-105%);transition:transform .25s ease;
    border-radius:0 22px 22px 0;box-shadow:16px 0 48px rgba(15,23,42,.3);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .profile-page .profile-sidebar.mdr-open{transform:translateX(0)}
  .profile-page .profile-main{
    width:100%;box-sizing:border-box;
    height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:64px 16px max(20px,env(safe-area-inset-bottom)) !important}

  /* ── Кабинет компании: сайдбар-шапка → выдвижной ящик ── */
  .cab-sidebar{
    position:fixed !important;top:0 !important;bottom:0;left:0;height:100dvh !important;
    width:min(320px,86vw) !important;max-height:none !important;z-index:1300;
    transform:translateX(-105%);transition:transform .25s ease;
    border-right:1px solid var(--border) !important;border-bottom:none !important;
    border-radius:0 22px 22px 0;box-shadow:16px 0 48px rgba(15,23,42,.3);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:14px 12px max(14px,env(safe-area-inset-bottom)) !important}
  .cab-sidebar.mdr-open{transform:translateX(0)}
  .cab-main{padding:64px 14px 20px !important}

  /* ── Админ-панель ── */
  .admin-sidebar{height:100dvh;z-index:1300 !important;width:min(300px,84vw);
    border-radius:0 22px 22px 0;box-shadow:16px 0 48px rgba(15,23,42,.3);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .admin-sidebar.open,.admin-sidebar.mdr-open{transform:translateX(0) !important}
  .admin-content{padding-top:64px !important}
}

/* при открытом профиле кнопка ☰ рабочего стола скрывается — остаётся кнопка профиля */
@media (max-width:768px){
  body:has(.profile-page.open) #mNavBtn{display:none !important}
}

/* ═══ 21. КАБИНЕТ КОМПАНИИ: МОБИЛЬНАЯ ДОВОДКА ═══ */
@media (max-width:768px){

  /* ── Модалки → шторки снизу, как в iOS ── */
  .cab-layout ~ .modal-overlay,
  body .modal-overlay{align-items:flex-end !important;padding:0 !important}
  .modal-overlay .modal{
    width:100vw !important;max-width:none !important;
    border-radius:22px 22px 0 0 !important;
    max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:18px 16px max(22px,env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .modal-overlay.show .modal{transform:translateY(0)}
  /* «ручка» шторки */
  .modal-overlay .modal::before{
    content:"";display:block;width:38px;height:4px;border-radius:4px;
    background:var(--border);margin:0 auto 14px}
  .modal-close{width:36px;height:36px}
  /* кнопка ассистента не торчит над шторкой */
  body:has(.modal-overlay.show) #asstBar,
  body:has(.modal-overlay.show) #asstBubble{display:none !important}

  /* ── Шапки кабинета. Раньше кнопки были flex-соседями текста и
        зажимали название компании в узкий столбик по одному слову. ──
     Общий случай (без логотипа, напр. Техподдержка): текст на всю
     ширину, кнопки парой под ним. */
  .cab-header{flex-wrap:wrap;gap:8px 12px}
  .cab-header > div[style*="flex:1"]{flex:1 1 100%;min-width:0}
  .cab-header .cab-title{font-size:19px;line-height:1.3;word-break:break-word}
  .cab-header .cab-role-tag{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
  .cab-header .cab-subtitle{line-height:1.45}
  .cab-header .btn{flex:1 1 calc(50% - 6px);min-height:44px;justify-content:center}
  /* Шапка компании (с логотипом): grid «аватар | текст», кнопки своими строками */
  .cab-header:has(.cab-company-badge){display:grid !important;
    grid-template-columns:52px minmax(0,1fr);gap:6px 12px;align-items:start}
  .cab-header:has(.cab-company-badge) > div[style*="flex:1"]{flex:none;min-width:0}
  .cab-header:has(.cab-company-badge) .btn{grid-column:1 / -1;width:100%;margin-top:2px}

  /* ── Вкладки: прокрутка с намёком-градиентом по краям + снап ── */
  .cab-tabs{
    scroll-snap-type:x proximity;
    -webkit-mask:linear-gradient(90deg,#000 0,#000 92%,transparent);
    mask:linear-gradient(90deg,#000 0,#000 92%,transparent);
    padding-bottom:2px}
  .cab-tab{scroll-snap-align:center;min-height:42px;white-space:nowrap;flex:none}

  /* ── Карточки линий: действия под заголовком, крупные ── */
  .line-card{padding:14px}
  .line-card-head{flex-wrap:wrap;gap:8px}
  .line-card-actions{margin-left:0;width:100%;gap:8px}
  .line-card-actions .btn,.line-card-actions .icon-btn{min-height:40px}

  /* ── Строки менеджеров и списков: пальце-дружелюбно ── */
  .member-row{padding:10px 0;row-gap:8px}
  .member-row .btn,.member-row .icon-btn{min-height:40px;min-width:40px}
  .cab-company-item{min-height:46px}
  .cab-side-link{min-height:44px;display:flex;align-items:center}

  /* ── Таблицы (контакты, табель, аналитика): инерционный скролл + рамка-намёк ── */
  #cabSection table{
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--line-2);border-radius:12px}
  #cabSection th,#cabSection td{padding:10px 12px;white-space:nowrap}

  /* ── Формы внутри секций: метки и поля на всю ширину ── */
  #cabSection .input,#cabSection select,#cabSection textarea{width:100%}
  #cabSection .flex:not(.cab-tabs){flex-wrap:wrap}

  /* ── Цветные чекбоксы мессенджеров (.ck-msgr) и длительности: крупнее ── */
  .ck-msgr,.ck-dur{min-height:42px}
}

/* ═══ 23. КОНТЕКСТНОЕ МЕНЮ СООБЩЕНИЯ: полировка ═══ */
/* Уравниваем с диалоговым меню (#dialogCtxMenu) — скруглённая карточка,
   глубокая тень, цветные иконки-чипы, разделитель перед опасным действием. */
.msg-context-menu{
  border-radius:16px !important;
  padding:6px !important;
  min-width:200px !important;
  box-shadow:0 20px 60px -8px rgba(10,14,26,.28),
             0 2px 10px rgba(10,14,26,.06) !important;
  animation:ctxIn .16s cubic-bezier(.2,.7,.2,1) both !important}
.msg-ctx-item{
  display:flex !important;
  align-items:center !important;
  border-radius:10px !important;
  padding:7px 10px !important;
  font-size:13.5px !important;
  font-weight:500;
  gap:10px !important;
  text-align:left;
  color:var(--text-primary) !important}
.msg-ctx-item:hover{background:var(--bg-hover) !important}
.msg-ctx-item.danger{color:var(--danger) !important}
.msg-ctx-item.danger:hover{background:rgba(239,68,68,.08) !important}
[data-theme="dark"] .msg-ctx-item.danger:hover{background:rgba(239,68,68,.12) !important}
/* Цветные иконки-чипы */
.msg-ctx-ic{
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-ctx-ic svg{width:15px;height:15px}
/* Разделитель перед опасным пунктом */
.msg-ctx-sep{height:1px;background:var(--border);margin:5px 4px}