/* ============================================================
   ТехноСонус — Команда
   Единый CSS для обоих видов: «Список» (дерево) и «Схема» (оргчарт)
   Структура файла:
     1. Токены (:root)
     2. База / сброс
     3. Каркас приложения (сайдбар, шапка, тулбар)
     4. Вид «Список»  — классы .team-*
     5. Вид «Схема»   — классы .org-*
   ============================================================ */

/* ====================== 1. ТОКЕНЫ ====================== */
:root{
  /* палитра (взята из макетов Figma) */
  --c-bg:        #F3F5F7;
  --c-sidebar:   #252C37;
  --c-card:      #FFFFFF;
  --c-accent:    #E63912;
  --c-accent-d:  #CF3210;   /* hover акцента */
  --c-text:      #252C37;
  --c-muted:     #6F767F;
  --c-light:     #8D8D8D;
  --c-border:    #E7E9ED;
  --c-line:      #CFD3D9;   /* линии связей */
  --c-pill:      #F3F5F7;
  --c-soft:      #F6F6F6;
  --c-icon:      #ADB2BB;

  /* размеры каркаса */
  --sidebar-w:   74px;
  --radius:      14px;
  --shadow:      0 1px 3px rgba(37,44,55,.06), 0 1px 2px rgba(37,44,55,.04);

  /* вид «Список» */
  --card-h:      52px;      /* высота строки-карточки */
  --row-pad:     4px;       /* половина зазора между карточками */
  --indent:      30px;      /* шаг вложенности / ширина направляющей */

  /* вид «Схема» */
  --card-w:      186px;     /* ширина карточки оргчарта */
  --conn:        24px;      /* длина коннекторов оргчарта */

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ====================== 2. БАЗА ====================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--c-bg); color:var(--c-text); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* ====================== 3. КАРКАС ====================== */
.app-layout{ display:flex; min-height:100vh; }

/* ----- Сайдбар ----- */
.app-sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--c-sidebar);
  display:flex; flex-direction:column; align-items:center;
  position:sticky; top:0; height:100vh;
}
.app-sidebar-burger{
  width:100%; height:54px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.app-sidebar-nav{
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; margin-top:54px;
}
.app-sidebar-item{
  width:100%; height:72px;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-light); transition:color .15s;
}
.app-sidebar-item:hover{ color:#fff; }
.app-sidebar-item-active,
.app-sidebar-item-active:hover{ background:var(--c-accent); color:#fff; }

/* ----- Правая часть ----- */
.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ----- Верхняя планка: лого + закрыть ----- */
.app-topbar{
  height:54px; display:flex; align-items:center;
  padding:0 24px; background:var(--c-card);
}
.app-logo{ display:flex; align-items:center; gap:8px; }
.app-logo-mark{
  width:26px; height:26px; border-radius:6px; background:var(--c-accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px;
}
.app-logo-text{ line-height:1; }
.app-logo-text b{ display:block; font-size:13px; font-weight:800; letter-spacing:.5px; }
.app-logo-text span{ display:block; font-size:13px; font-weight:600; color:var(--c-muted); letter-spacing:.5px; }
.app-topbar-close{
  margin-left:auto; width:40px; height:40px; border-radius:50%;
  background:var(--c-pill);
  display:flex; align-items:center; justify-content:center; color:var(--c-muted);
}
.app-topbar-close:hover{ background:var(--c-border); }

/* ----- Тулбар страницы ----- */
.app-toolbar{ display:flex; align-items:center; gap:24px; padding:18px 24px 8px; }
.app-title{ font-size:26px; font-weight:800; margin:0; }

.view-switch{ display:flex; align-items:center; gap:18px; font-size:14px; }
.view-switch-label{ color:var(--c-light); }
.view-switch-option{ display:inline-flex; align-items:center; gap:6px; color:var(--c-muted); font-weight:600; cursor: pointer; }
.view-switch-option-active{ color:var(--c-accent); }

.app-toolbar-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }

/* круглая кнопка тулбара: базовая — светлая («Схема»), -dark — тёмная («Список») */
.toolbar-icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-pill); color:var(--c-muted);
}
.toolbar-icon-btn:hover{ background:var(--c-border); }
.toolbar-icon-btn-dark{ background:var(--c-sidebar); color:#fff; }
.toolbar-icon-btn-dark:hover{ background:var(--c-sidebar); opacity:.9; }

.btn-create{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px; border-radius:20px;
  background:var(--c-accent); color:#fff; font-size:14px; font-weight:700;
}
.btn-create:hover{ background:var(--c-accent-d); }

/* ============================================================
   4. ВИД «СПИСОК» — дерево (flex)
   Ряд = [направляющие .team-guides] + [карточка .team-card]
   ============================================================ */
.team-tree{ display:flex; flex-direction:column; padding:8px 24px 32px; }

.team-row{ display:flex; align-items:stretch; padding:var(--row-pad) 0; }

/* полоса направляющих: по колонке на уровень вложенности */
.team-guides{ display:flex; flex:0 0 auto; }
.team-guide{ flex:0 0 var(--indent); position:relative; }

/* сквозная вертикаль (линия проходит к следующему сиблингу) */
.team-guide-line::before,
.team-guide-tee::before{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:var(--c-line); transform:translateX(-.5px);
}
/* «локоть» последнего ребёнка: вертикаль только до центра */
.team-guide-ell::before{
  content:""; position:absolute; left:50%; top:0; height:50%;
  width:1px; background:var(--c-line); transform:translateX(-.5px);
}
/* горизонтальный отвод к карточке (у tee и ell) */
.team-guide-tee::after,
.team-guide-ell::after{
  content:""; position:absolute; left:50%; top:50%; width:50%;
  height:1px; background:var(--c-line); transform:translateY(-.5px);
}

/* карточка-строка */
.team-card{
  position:relative; flex:1 1 auto;
  display:flex; align-items:center; gap:14px;
  min-height:var(--card-h); padding:8px 16px;
  background:var(--c-card); border-radius:var(--radius); box-shadow:var(--shadow);
}
.team-card-active{ box-shadow:var(--shadow), 0 0 0 1px rgba(230,57,18,.12); }
.team-card-active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--c-accent);
}
.team-card-avatar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#d9dde3; border:2px solid var(--c-accent);
  display:flex; align-items:center; justify-content:center;
  color:#9aa1ab; overflow:hidden;
}
.team-card-avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card-name{ font-size:15px; font-weight:600; color:var(--c-text); }
.team-card-spacer{ flex:1 1 auto; }
.team-card-role{ font-size:15px; font-weight:700; color:var(--c-text); text-align:right; white-space:nowrap; }
.team-card-count{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  height:31px; padding:0 12px; border-radius:16px;
  background:var(--c-pill); color:var(--c-muted); font-size:13px; font-weight:600; white-space:nowrap;
}
.team-card-count svg{ color:var(--c-icon); }
.team-card-remove{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--c-icon);
}
.team-card-remove:hover{ background:var(--c-pill); color:var(--c-muted); }
.team-card-dept .team-card-name{ font-weight:600; }

/* ============================================================
   5. ВИД «СХЕМА» — оргчарт (flex)
   Узел: карточка сверху, дети снизу. Связи — на бордерах псевдоэлементов.
   ============================================================ */
.org-scroll{ overflow-x:auto; padding:8px 24px 40px; }
.org-root{ display:flex; justify-content:flex-start; gap:64px; min-width:max-content; }

.org-node{ display:flex; flex-direction:column; align-items:center; }

/* ---- ветвление: дети в ряд ---- */
.org-children{
  display:flex; justify-content:center; align-items:flex-start;
  position:relative; padding-top:var(--conn);
}
.org-children::before{   /* линия от родителя вниз к шине */
  content:""; position:absolute; top:0; left:50%;
  width:1px; height:var(--conn); background:var(--c-line); transform:translateX(-.5px);
}
.org-children > .org-node{
  position:relative; padding:var(--conn) 16px 0;
  display:flex; flex-direction:column; align-items:center;
}
/* шина (горизонталь) + подвод к карточке (вертикаль) */
.org-children > .org-node::before,
.org-children > .org-node::after{
  content:""; position:absolute; top:0; height:var(--conn); width:50%;
  border-top:1px solid var(--c-line);
}
.org-children > .org-node::before{ right:50%; }
.org-children > .org-node::after{ left:50%; border-left:1px solid var(--c-line); }
.org-children > .org-node:first-child::before{ border-top-color:transparent; }
.org-children > .org-node:last-child::after{ border-top-color:transparent; }
/* единственный ребёнок — прямая вертикаль без шины */
.org-children > .org-node:only-child::before{ display:none; }
.org-children > .org-node:only-child::after{ border-top-color:transparent; }

/* ---- стек листовых сотрудников: дети в колонку ---- */
.org-children-stack{ flex-direction:column; align-items:center; gap:0; padding-top:0; }
.org-children-stack::before{ display:none; }
.org-children-stack > .org-node{ padding:20px 0 0; align-items:center; }
.org-children-stack > .org-node::before{
  content:""; position:absolute; top:0; left:50%; right:auto;
  width:1px; height:20px; background:var(--c-line); border:0; transform:translateX(-.5px);
}
.org-children-stack > .org-node::after{ display:none; }

/* ---- карточки оргчарта ---- */
.org-card{
  position:relative; width:var(--card-w);
  background:var(--c-card); border-radius:var(--radius); box-shadow:var(--shadow);
}
.org-card-title{ font-size:15px; font-weight:700; color:var(--c-text); line-height:1.25; }
.org-card-name{ font-size:13px; color:var(--c-muted); margin-top:4px; }

.org-card-dept{
  display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 16px; text-align:center;
}

.org-card-person{ padding:18px 16px 14px; }
.org-card-active::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c-accent); border-radius:var(--radius) 0 0 var(--radius);
}
.org-avatar{ width:64px; height:64px; border-radius:50%; background:var(--c-soft); margin-bottom:12px; }
.org-card-foot{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.org-pill{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 10px; border-radius:13px;
  background:var(--c-soft); color:var(--c-muted); font-size:12px; font-weight:600; white-space:nowrap;
}
.org-pill svg{ color:var(--c-icon); }
.org-icon-btn{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-soft); color:var(--c-muted);
}
.org-icon-btn:hover{ background:#ececec; }
.org-icon-btn-accent{ color:var(--c-accent); }

/* ====================== Адаптив ====================== */
@media (max-width:760px){
  :root{ --indent:18px; }
  .app-title{ font-size:20px; }
  .team-card-role{ display:none; }
}