:root{
  --bg:#f3f5f9; --panel:#ffffff; --panel2:#f6f8fb; --border:#e2e6ef;
  --text:#161a25; --muted:#6b7386; --accent:#2f5fdb; --accent-hover:#2650bd; --accent-soft:#eaf0ff; --accent-ink:#ffffff;
  --ok:#1f9d64; --ok-soft:#e6f7ee; --warn:#b5790a; --warn-soft:#fdf1de; --danger:#d13b52; --danger-soft:#fbe9ec;
  --radius-sm:8px; --radius:10px; --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(20,25,45,.05);
  --shadow-sm:0 2px 8px rgba(20,25,45,.06);
  --shadow-md:0 12px 32px rgba(20,25,45,.14);
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --bg:#0b0e14; --panel:#141924; --panel2:#1a2130; --border:#262f42;
    --text:#e9edf6; --muted:#8891a5; --accent:#5b8bff; --accent-hover:#7ba0ff; --accent-soft:#1c2740; --accent-ink:#081025;
    --ok:#3fd08a; --ok-soft:#12291f; --warn:#e6ac3f; --warn-soft:#2c2312; --danger:#f0637a; --danger-soft:#33161c;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow-md:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0b0e14; --panel:#141924; --panel2:#1a2130; --border:#262f42;
  --text:#e9edf6; --muted:#8891a5; --accent:#5b8bff; --accent-hover:#7ba0ff; --accent-soft:#1c2740; --accent-ink:#081025;
  --ok:#3fd08a; --ok-soft:#12291f; --warn:#e6ac3f; --warn-soft:#2c2312; --danger:#f0637a; --danger-soft:#33161c;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#f3f5f9; --panel:#ffffff; --panel2:#f6f8fb; --border:#e2e6ef;
  --text:#161a25; --muted:#6b7386; --accent:#2f5fdb; --accent-hover:#2650bd; --accent-soft:#eaf0ff; --accent-ink:#ffffff;
  --ok:#1f9d64; --ok-soft:#e6f7ee; --warn:#b5790a; --warn-soft:#fdf1de; --danger:#d13b52; --danger-soft:#fbe9ec;
  --shadow-xs:0 1px 2px rgba(20,25,45,.05);
  --shadow-sm:0 2px 8px rgba(20,25,45,.06);
  --shadow-md:0 12px 32px rgba(20,25,45,.14);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .25s var(--ease),color .25s var(--ease);
}
button,input,select,textarea{font-family:inherit;font-size:14px;}
::selection{background:var(--accent);color:var(--accent-ink);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;border:2px solid var(--bg);background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

#app{display:flex;min-height:100vh;}

/* ---------- Sidebar (боковая навигация) ---------- */
.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(10,13,22,.5);z-index:19;
}
.sidebar{
  width:248px;flex:0 0 auto;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:20;
}
.brand{
  font-weight:800;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;color:var(--text);
  padding:20px 20px 14px;flex:0 0 auto;
}
.brand::before{
  content:"";width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,var(--accent),var(--ok));
  box-shadow:0 0 0 4px var(--accent-soft);
  flex:0 0 auto;
}
.brand .ver{font-weight:500;font-size:11px;color:var(--muted);margin-left:auto;
  background:var(--panel2);border:1px solid var(--border);padding:2px 8px;border-radius:20px;}

.nav-groups{flex:1;overflow-y:auto;padding:4px 12px 16px;}
.nav-group{margin-bottom:6px;}
.nav-group-title{
  font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;padding:14px 10px 6px;
}
.nav-groups button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--muted);
  padding:8px 10px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13.5px;
  margin-bottom:1px;transition:background .15s var(--ease),color .15s var(--ease);
}
.nav-groups button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-icon{width:17px;height:17px;flex:0 0 auto;opacity:.85;}
.nav-groups button.active{background:var(--accent-soft);color:var(--accent);}
.nav-groups button.active .nav-icon{opacity:1;}
.nav-groups button:hover:not(.active){background:var(--panel2);color:var(--text);}

.main-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;}

/* ---------- Topbar (узкая полоса сверху основной колонки) ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 24px;
  background:var(--panel);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.topbar-spacer{flex:1;}
.sidebar-toggle{
  display:none;background:transparent;border:1px solid var(--border);color:var(--text);
  width:34px;height:34px;border-radius:8px;cursor:pointer;align-items:center;justify-content:center;
}
.sidebar-toggle svg{width:18px;height:18px;}
.role-box{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;}
#roleLabel{font-weight:700;color:var(--text);}
#workAsBtn.hidden{display:none;}

.acting-banner{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--warn-soft);color:var(--warn);
  border-bottom:1px solid var(--border);padding:8px 20px;font-size:13.5px;font-weight:600;
}
.acting-banner.hidden{display:none;}

main{flex:1;padding:26px;max-width:1400px;width:100%;margin:0 auto;}

/* Экран входа — без бокового меню/шапки, во весь экран по центру. */
#app.no-chrome .sidebar,
#app.no-chrome .topbar{display:none;}
.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}
.login-card{
  max-width:380px;width:100%;box-shadow:var(--shadow-md);text-align:center;
}
.login-brand{
  font-weight:800;font-size:15px;letter-spacing:.08em;color:var(--accent);
  text-transform:uppercase;margin-bottom:10px;
}
.login-card h2{font-size:22px;}
.login-card .form-row{text-align:left;}

/* ---------- Buttons ---------- */
.btn{
  background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  padding:9px 17px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13.5px;
  box-shadow:var(--shadow-xs);
  transition:background .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease),filter .15s var(--ease);
}
.btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(1px);}
.btn.small{padding:6px 12px;font-size:12px;box-shadow:none;}
.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);box-shadow:none;}
.btn.secondary:hover{border-color:var(--muted);background:var(--panel);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.danger:hover{filter:brightness(1.08);}
.btn.ok{background:var(--ok);color:#04140d;}
.btn.ok:hover{filter:brightness(1.06);}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;box-shadow:none;}

/* ---------- Panels ---------- */
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-xs);
}
h2{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em;}
h3{margin:0 0 12px;font-size:15px;font-weight:700;}
h4{font-weight:700;}

/* ---------- KPI tiles (дашборд, "Обзор") ---------- */
.kpi-tile{display:flex;align-items:center;gap:14px;border-left:3px solid var(--kpi-color,var(--accent));}
.kpi-tile .kpi-icon{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--kpi-soft,var(--accent-soft));color:var(--kpi-color,var(--accent));
}
.kpi-tile .kpi-icon svg{width:22px;height:22px;}
.kpi-tile .kpi-value{font-size:24px;font-weight:700;line-height:1.2;}
.kpi-tile .kpi-label{color:var(--muted);font-size:12.5px;}

/* ---------- Цветная акцент-точка по статусу (таблицы/списки) ---------- */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;flex:0 0 auto;background:var(--muted);}
.status-dot.ok{background:var(--ok);}
.status-dot.warn{background:var(--warn);}
.status-dot.danger{background:var(--danger);}

/* ---------- Аватар-инициалы (клиенты) ---------- */
.avatar-circle{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12.5px;font-weight:700;
}

/* ---------- Kanban board ---------- */
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;}
.board-col{
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-lg);
  min-width:240px;max-width:240px;flex:0 0 auto;padding:12px;max-height:78vh;
  display:flex;flex-direction:column;
}
.board-col h4{
  margin:0 0 10px;font-size:12px;display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  padding-bottom:9px;border-bottom:1px solid var(--border);
}
.board-col h4 span{
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;letter-spacing:0;
}
.board-col .cards{overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 13px;cursor:pointer;font-size:13px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease);
}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.card .bc{font-weight:700;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.01em;}
.card .tag{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;margin-top:6px;margin-right:4px;font-weight:700;letter-spacing:.01em;}
.tag.our{background:var(--accent-soft);color:var(--accent);}
.tag.client{background:#f0e7fc;color:#7c3ce0;}
.tag.foreign{background:var(--warn-soft);color:var(--warn);}
.tag.warn{background:var(--warn-soft);color:var(--warn);}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .tag.client{background:#271b3d;color:#c79dff;} }
:root[data-theme="dark"] .tag.client{background:#271b3d;color:#c79dff;}

/* ---------- Forms ---------- */
.form-row{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  padding:9px 12px;border-radius:8px;width:100%;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.inline{flex-direction:row;align-items:center;gap:8px;}
.radio-group{display:flex;gap:16px;flex-wrap:wrap;}
.radio-group label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);font-weight:500;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;padding:9px 8px;color:var(--muted);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);
}
td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
tbody tr{transition:background .1s var(--ease);}
tr:hover td{background:var(--panel2);}

/* ---------- Modal ---------- */
.modal-root{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-root.hidden{display:none;}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,13,22,.55);backdrop-filter:blur(2px);}
.modal-box{
  position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;max-width:640px;width:92%;max-height:88vh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shadow-md);
  animation:modal-in .18s var(--ease);
}
.modal-box canvas{max-width:100%;height:auto;}
.modal-box table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
@keyframes modal-in{from{opacity:0;transform:translateY(6px) scale(.985);}to{opacity:1;transform:none;}}
.modal-box .close{
  position:absolute;top:14px;right:16px;background:var(--panel2);border:1px solid var(--border);
  color:var(--muted);font-size:16px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease);
}
.modal-box .close:hover{color:var(--text);border-color:var(--muted);background:var(--panel);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);
  border:1px solid var(--border);padding:11px 22px;border-radius:9px;z-index:100;
  box-shadow:var(--shadow-md);pointer-events:none;font-size:13.5px;font-weight:600;
  animation:toast-in .2s var(--ease);
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}
.toast.hidden{display:none;}
.toast.error{background:var(--danger);color:#fff;border-color:var(--danger);}
.toast.ok{background:var(--ok);color:#04140d;border-color:var(--ok);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:800px){.grid2{grid-template-columns:1fr;}}

.badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--border);letter-spacing:.01em;}
.muted{color:var(--muted);}
.photo-thumb{width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:border-color .15s var(--ease),transform .1s var(--ease);}
.photo-thumb:hover{border-color:var(--accent);transform:scale(1.03);}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.scan-box input{font-size:22px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;letter-spacing:.03em;font-weight:600;}
.progress{height:8px;background:var(--panel2);border-radius:5px;overflow:hidden;margin:6px 0;}
.progress > div{height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .3s var(--ease);}

.barchart{display:flex;flex-direction:column;gap:9px;}
.barchart-row{display:grid;grid-template-columns:minmax(90px,180px) 1fr auto;align-items:center;gap:10px;}
.barchart-label{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.barchart-track{background:var(--panel2);border-radius:5px;height:10px;overflow:hidden;}
.barchart-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));border-radius:5px;transition:width .4s var(--ease);}
.barchart-value{font-size:12.5px;font-weight:700;color:var(--text);min-width:24px;text-align:right;}

@media (max-width:900px){
  .sidebar{
    position:fixed;left:0;top:0;width:264px;transform:translateX(-100%);
    box-shadow:var(--shadow-md);transition:transform .22s var(--ease);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.show{display:block;}
  .sidebar-toggle{display:inline-flex;}
}
@media (max-width:640px){
  main{padding:14px;}
  .topbar{padding:10px 14px;}
  .panel{padding:16px;}
  /* Имя+роль+кнопки в один флекс-ряд на узком экране раньше переносились
     некрасиво посреди слова — имя теперь обрезается многоточием и не
     мешает кнопкам "Работать как…"/"Выйти" переноситься на новую строку. */
  .role-box{flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;font-size:12px;}
  #roleLabel{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}


/* --- знак портала в шапке меню --- */
/* Место знака занимал декоративный квадратик .brand::before — теперь там
   настоящий знак портала: качалка и баллоны. Правило команды не удаляю, а
   прячу: так их правки этого файла ни с чем не столкнутся. Сами правила
   дописаны в конец файла по той же причине. */
.brand::before{display:none;}
.brand-logo{
  width:30px;height:30px;flex:0 0 auto;display:block;
}

/* название портала в две строки */
/* Знак, под ним название и подпись — как в остальных порталах экосистемы.
   Плашку с версией оставляем: она их, и на первой строке место под неё есть.
   Ширина меню 248px, поля по 20px — на подпись остаётся ~169px, поэтому
   размеры подобраны так, чтобы «Корпоративный портал» влезал одной строкой. */
.brand{align-items:center;}
.brand-title{
  display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.15;
}
.brand-name{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{
  font-weight:500;font-size:10.5px;color:var(--muted);white-space:nowrap;
  letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;
}

/* названия разделов — как в Агат Академии */
/* Заголовки групп (.nav-group-title) не трогаем — они остаются их.
   Меняется только сам пункт меню: в Академии это 14px обычной насыщенности
   (Tailwind text-sm + font-medium), у портала было 13.5px и 600 — список
   выглядел плотнее и жирнее. Гарнитура и так одна: оба стека упираются в
   системный шрифт, различались только кегль и насыщенность. */
.nav-groups button{font-size:14px;font-weight:500;}

/* --- подвал меню и сворачивание в рельсу --- */
/* Бургер нужен теперь и на широком экране — там он сворачивает меню. */
.sidebar-toggle{display:inline-flex;}

/* Карточка вошедшего переехала из верхней полосы в подвал меню. Прежние
   правила .role-box писались под ряд в шапке; здесь они перекрыты, а не
   удалены — чтобы правки команды портала в этом файле ни с чем не столкнулись. */
.sidebar .role-box{
  flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;
  margin-top:auto;padding:12px;border-top:1px solid var(--border);
}
.role-who{display:flex;align-items:center;gap:10px;min-width:0;}
.role-avatar{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:14px;
}
.role-lines{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.role-name{
  font-weight:600;font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Селектор с id — иначе прежнее #roleLabel{font-weight:700;color:var(--text)}
   перебьёт по весу и вторая строка не станет подписью. */
#roleLabel.role-sub{
  font-weight:500;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none;
}
.sidebar .role-box .btn{width:100%;justify-content:center;}

@media (min-width:901px){
  .sidebar{transition:width .2s var(--ease);}

  #app.nav-collapsed .sidebar{width:68px;}
  #app.nav-collapsed .brand{padding:20px 0 14px;justify-content:center;}
  #app.nav-collapsed .brand-title{display:none;}

  #app.nav-collapsed .nav-groups{padding:8px 10px 16px;}
  /* Заголовок группы в рельсу шириной 68px не влезает — вместо него
     разделительная линия, чтобы группы не слиплись в один столбец. */
  #app.nav-collapsed .nav-group-title{display:none;}
  #app.nav-collapsed .nav-group + .nav-group{
    border-top:1px solid var(--border);margin-top:6px;padding-top:6px;
  }
  #app.nav-collapsed .nav-groups button{justify-content:center;gap:0;padding:9px 0;}
  #app.nav-collapsed .nav-groups button span{display:none;}

  #app.nav-collapsed .role-who{justify-content:center;}
  #app.nav-collapsed .role-lines{display:none;}
  #app.nav-collapsed .sidebar .role-box{padding:10px 8px;}
  #app.nav-collapsed .sidebar .role-box .btn{padding:7px 2px;font-size:11.5px;}
}

/* --- шапка и подвал меню отделены и залиты фоном страницы --- */
/* Как в Агат Академии: список разделов остаётся на панели, а шапка со знаком
   и подвал с карточкой вошедшего залиты цветом фона страницы и отчёркнуты.
   Оба цвета — переменные темы, поэтому в тёмной теме соотношение сохраняется:
   var(--bg) там тоже отличается от var(--panel). */
.brand{
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.sidebar .role-box{
  background:var(--bg);
}

/* --- шапка меню и верхняя полоса одной высоты --- */
/* Раньше шапка меню была около 64px (поля 20/14 плюс знак и две строки), а
   верхняя полоса — около 58px, и линии под ними не совпадали. Задаём обеим
   одну фиксированную высоту: box-sizing у портала глобально border-box,
   поэтому 64px включают и поля, и нижнюю границу, и линии сходятся точно.
   Вертикальные поля убраны — содержимое и так по центру (align-items:center),
   а с ними высота бы поехала. */
.brand{height:64px;padding:0 20px;}
.topbar{height:64px;padding:0 24px;}

@media (max-width:640px){
  /* Возвращаем их узкие поля. Медиазапрос с ними стоит выше по файлу, а вес
     селекторов одинаковый — без этого моё правило перебивало бы его, и на
     телефоне полоса получила бы поля от широкого экрана. */
  .topbar{padding:0 14px;}
}

/* --- размеры шапки, подвала и иконок — как в Агат Академии --- */
/* Значения сняты с Академии: там боковое меню собрано на Tailwind, и его
   классы дают конкретные пиксели. Высота шапки (64px = h-16) уже совпадала,
   остальное было мельче. */

/* Шапка: знак 40px (h-10), название 16px обычного полужирного, подпись 10px. */
.brand-logo{width:40px;height:40px;}
.brand-name{font-size:16px;font-weight:600;}
.brand-sub{font-size:10px;}

/* Иконки разделов — 18px (h-[18px] в Академии), было 17. */
.nav-icon{width:18px;height:18px;}

/* Подвал: кружок 36px (h-9), имя 14px/500 (text-sm font-medium),
   вторая строка 12px (text-xs). Отступы подвала (12px = p-3) уже совпадали. */
.role-avatar{width:36px;height:36px;font-size:14px;font-weight:600;}
.role-name{font-size:14px;font-weight:500;}
#roleLabel.role-sub{font-size:12px;}

/* Кнопка выхода: 14px и отступы 8/12 (text-sm px-3 py-2). Рамку и заливку
   оставляю их — в Академии это простая текстовая кнопка, и переделывать
   вид кнопки под чужой портал я не стал, речь шла о размерах. */
.sidebar .role-box .btn{font-size:14px;font-weight:500;padding:8px 12px;}

/* --- пилюля «Агат Портал» --- */
/* Ссылка на хаб экосистемы, как в Академии: бирюзовая обводка, чтобы пилюля
   не смешивалась ни с пунктами меню, ни с зелёным знаком портала.
   Открывается в этом же окне — так заведено во всех порталах Агата.
   На экране входа прятать не нужно: там .no-chrome убирает меню целиком.

   В Академии цвет задан одним значением: у неё нет тёмной темы. Здесь она
   есть, поэтому цвета вынесены в переменные и переопределены теми же тремя
   блоками, что и остальная палитра портала. */
:root{
  --hub-pill-ink:#0f766e; --hub-pill-line:#14b8a6; --hub-pill-hover:#f0fdfa;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --hub-pill-ink:#5eead4; --hub-pill-line:#0d9488; --hub-pill-hover:#122b2c;
  }
}
:root[data-theme="dark"]{
  --hub-pill-ink:#5eead4; --hub-pill-line:#0d9488; --hub-pill-hover:#122b2c;
}
:root[data-theme="light"]{
  --hub-pill-ink:#0f766e; --hub-pill-line:#14b8a6; --hub-pill-hover:#f0fdfa;
}

.hub-pill-row{padding:12px 12px 0;}
.hub-pill{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:4px 10px;border:1px solid var(--hub-pill-line);border-radius:999px;
  color:var(--hub-pill-ink);text-decoration:none;
  font-size:12px;font-weight:500;line-height:1.5;
  transition:background .15s var(--ease);
}
.hub-pill:hover{background:var(--hub-pill-hover);}
.hub-pill-icon{width:13px;height:13px;flex:0 0 auto;}

@media (min-width:901px){
  /* В свёрнутой рельсе от пилюли остаётся значок — как в Академии. */
  #app.nav-collapsed .hub-pill-row{padding:12px 10px 0;}
  #app.nav-collapsed .hub-pill{padding:4px 0;}
  #app.nav-collapsed .hub-pill span{display:none;}
}

/* --- фото сотрудника в подвале меню --- */
/* Фото хранится в Агат Портале, здесь только ссылка. Заливку кружка под
   фотографией убираем, иначе она просвечивала бы по краям при загрузке. */
.role-avatar.has-photo{background:none;overflow:hidden;}
.role-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}

/* --- раздел «Сотрудники» --- */
/* Раскладка как в одноимённом разделе Академии: шапка с поиском и кнопкой
   сверки, строка состояния, чипы отделов, таблица с карточкой человека. */
.emp-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;
}
.emp-title{flex:0 0 auto;}
.emp-search{
  flex:0 1 300px;min-width:180px;padding:8px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel);color:var(--text);font-size:14px;
}
.emp-head .btn{margin-left:auto;}

.emp-hub{padding:11px 14px;font-size:13px;margin-bottom:12px;}
.emp-hub-warn{color:var(--warn);}
.emp-hub-err{color:var(--danger);}

.emp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.emp-chip{
  background:var(--panel);border:1px solid var(--border);color:var(--muted);
  border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.emp-chip span{opacity:.6;margin-left:3px;}
.emp-chip:hover{border-color:var(--muted);color:var(--text);}
.emp-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.emp-chip.active span{opacity:.75;}

.emp-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.emp-table th{
  text-align:left;font-weight:500;color:var(--muted);font-size:12px;
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--panel2);
  white-space:nowrap;
}
.emp-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
.emp-table tr:last-child td{border-bottom:0;}
.emp-table select{min-width:132px;}
.emp-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;}

.emp-who{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.emp-photo{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;object-fit:cover;display:block;
}
.emp-photo-letter{
  display:flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--muted);font-weight:600;font-size:14px;
}
.emp-who-lines{min-width:0;}
.emp-name{font-weight:600;color:var(--text);}
.emp-mail{font-size:12px;color:var(--muted);}
.emp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.emp-tag{
  border-radius:999px;padding:1px 8px;font-size:11px;
  background:var(--panel2);color:var(--muted);
}
.emp-tag.warn{background:var(--danger-soft);color:var(--danger);}

@media (max-width:640px){
  /* Поиск на всю ширину, кнопка под ним: втроём в одну строку они не влезают. */
  .emp-search{flex:1 1 100%;}
  .emp-head .btn{margin-left:0;}
}