/* Connected Community — шапка в одну строку, чат на телефоне, правки после проверок дизайна, вкладка «Агенты», Панель бухгалтерии, миссия и ценности, «О себе».
   Часть оформления портала. Файлы подключаются в templates/index.html по порядку номеров: поздние правила перебивают ранние. */
/* ---- Шапка в одну строку на ноутбуках (06.10.2026): при масштабе 100% окно ноутбука ~1333px, и вкладки уезжали на вторую
   строку — пользователь попросил, чтобы при любом масштабе было одинаково. Класс head-one-row ставит fitMasthead() в app.js
   и только когда всё помещается; иначе действуют правила двух строк выше (max-width:1460px). ---- */
@media (min-width:1101px) and (max-width:1460px){
  html.head-one-row .masthead{flex-wrap:nowrap;padding:12px 14px;gap:8px;}
  html.head-one-row .masthead-actions{order:0;margin-left:6px;gap:3px;}
  html.head-one-row .nav-tabs{order:0;flex-basis:auto;margin:0 auto 0 2px;overflow:visible;flex-wrap:nowrap;}
  html.head-one-row .nav-tabs > .nav-item{padding:8px 6px;font-size:12.5px;white-space:nowrap;}
  html.head-one-row .brand{gap:8px;}
  html.head-one-row .brand-mark-img{height:36px;}
  html.head-one-row .brand-wordmark{font-size:17px;}
  html.head-one-row .nav-item.nav-icon,
  html.head-one-row .masthead-actions > .nav-icon{width:34px;height:34px;flex:0 0 34px;}   /* flex-basis тоже: иначе прежние 38px оставили бы значок овальным */
  html.head-one-row .lang-btn{height:34px;padding:0 9px;}
  html.head-one-row .nav-social{gap:4px;}
  html.head-one-row .nav-social::after{margin:0 4px 0 2px;}
  html.head-one-row .nav-social-link{width:30px;height:30px;}
}

/* ---- Чат на телефоне и планшете (06.10.2026, проверка в Safari). Блок страницы здесь переносит детей по строкам
   (ряд инструментов + чат), а чату жёстко задана высота всего блока — вместе они в блок не помещались, и браузеры
   по-разному прятали лишнее: Chrome уводил ряд инструментов под шапку целиком, Safari — наполовину и обрезал поле
   ввода с кнопкой отправки снизу. Делаем однозначно: колонка, ряд инструментов своей высоты, чат — всё остальное. ---- */
@media (max-width:1100px){
  .body-row.chat-mode{flex-direction:column !important;flex-wrap:nowrap !important;gap:0 !important;}
  .body-row.chat-mode .sidenav{flex:0 0 auto !important;}
  .body-row.chat-mode .main{height:auto !important;max-height:none !important;flex:1 1 0 !important;min-height:0 !important;width:100%;}
}

/* ---- Строка заявки не распирает страницу (06.10.2026, проверка в Safari). Подпись заявки (.req-row-sub) идёт одной строкой
   и раньше свободно вылезала за карточку: Chrome лишнее просто не показывал, а в Safari на телефоне страница начинала
   ездить вбок (до 136px на вкладке отпусков HR-панели). Теперь лишнее обрезается многоточием. На телефоне текст заявки
   занимает строку целиком, а статус переносится под него — иначе тексту оставалось 2px ширины. ---- */
.req-row-main{overflow:hidden;}
.req-row-sub{overflow:hidden;text-overflow:ellipsis;}
.req-row-title{overflow-wrap:anywhere;}
@media (max-width:700px){.req-row-main{flex:1 1 60%;}}

/* ---- правки по замечаниям агента-дизайнера (06.10.2026): только поломки, вид не меняется ---- */
/* HR-панель: плиток семь — в шесть колонок слова вылезали из плиток, а седьмая стояла одна */
/* только HR-панель (.hr-tiles-fit): у кабинета руководителя, поддержки IT и закупщика плиток меньше и сетка прежняя —
   общая правка в тот же день разложила их 4 + 1 (нашёл дизайнер во втором проходе) */
.hr-tiles.hr-tiles-fit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
/* остальные панели (кабинет руководителя — 5 плиток, закупщик — 4, поддержка IT): в шести узких колонках слова
   рвались посреди («согласован-ие»); теперь плитки делят всю ширину поровну и встают в один ряд */
@media (min-width:701px){.hr-tiles:not(.hr-tiles-fit){grid-template-columns:repeat(auto-fit,minmax(118px,1fr));}}
.hr-tile-label{overflow-wrap:break-word;}
@media (max-width:700px){
  .hr-tiles.hr-tiles-fit{grid-template-columns:repeat(2,1fr);}
  .hr-tiles > .hr-tile:last-child:nth-child(odd){grid-column:span 2;}   /* нечётная последняя плитка — во всю ширину, во всех панелях */
  /* «Компания в цифрах»: рядом с плашкой и цифрами названию подразделения не хватало места («Ком…», «Регион…») —
     на телефоне название встаёт второй строкой под плашкой и читается целиком */
  .div-row{flex-wrap:wrap;row-gap:3px;}
  .div-row .div-pct{margin-left:auto;}
  .div-name{order:9;flex:1 1 100%;white-space:normal;overflow:visible;padding-left:21px;}
  /* у подразделения без плашки («Руководство») первая строка оставалась пустой — название стоит в ней, как на ноутбуке */
  .div-row.no-code .div-name{order:0;flex:1 1 0;padding-left:0;min-width:0;}
  .div-row.no-code .div-pct{margin-left:0;}
}
@media (max-width:1100px){
  /* строка инструментов: кнопка текущего раздела была белой с белым текстом */
  .sidenav .nav-item.side.active{background:var(--orange);border-color:var(--orange);color:#fff;}
  /* правая колонка стоит под содержимым — лишний нижний отступ давал пустую полосу */
  .body-row:not(.chat-mode):not(.org-mode) .main{padding-bottom:16px;}
}
/* «Мои заявки» в правой колонке: длинная плашка статуса не вытесняет название заявки */
.widget-myreq.compact .widget-req-top{flex:1 1 45%;min-width:42%;}
.widget-myreq.compact .widget-req-bottom{flex:0 1 auto;min-width:0;}
.widget-myreq.compact .widget-req-bottom .req-status{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- админ-панель → «Агенты» (06.10.2026) ---- */
.agent-card.working{border-color:var(--orange);}
.agent-name{display:flex;align-items:center;gap:8px;}
.agent-name i{display:inline-flex;color:var(--orange);}
.agent-name i svg{width:18px;height:18px;}
.agent-duty{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:2px 0 10px;}
.agent-card .adm-row:last-of-type{margin-bottom:0;}
.agent-line{align-items:flex-start;}
.agent-line b{font-weight:600;line-height:1.45;}
.agent-line em,.agent-log-what em{font-style:normal;font-weight:500;color:var(--ink-soft);white-space:nowrap;}
.agent-log{display:flex;flex-direction:column;}
.agent-log-row{display:grid;grid-template-columns:104px 150px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--border);font-size:13.5px;}
.agent-log-row:first-child{border-top:none;}
.agent-log-when{color:var(--ink-soft);white-space:nowrap;}
.agent-log-who{font-weight:700;}
.agent-log-what{line-height:1.45;overflow-wrap:anywhere;}
.agent-log-row .adm-flag{white-space:nowrap;}
@media (max-width:700px){
  .agent-log-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;}
  .agent-log-when{order:1;}
  .agent-log-row .adm-flag{order:2;justify-self:end;}
  .agent-log-who{order:3;grid-column:1 / -1;}
  .agent-log-what{order:4;grid-column:1 / -1;}
}
/* Road Map на телефоне (06.10.2026, нашёл дизайнер): плашка «CEO» складывалась в столбик по букве, фамилия рвалась посреди слова */
@media (max-width:560px){
  .org-ceo-tag{white-space:nowrap;flex:none;overflow-wrap:normal;}
  .org-ceo-label{font-size:13px;}
  .org-ceo-name{font-size:24px;overflow-wrap:break-word;}
}
/* ---- вторая часть правок по замечаниям UI/UX Designer (06.10.2026) ---- */
/* «Учётные записи»: у приглашённых кнопок больше, и длинная почта заезжала под плашку роли */
.user-main{overflow:hidden;}
.user-name,.user-login{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* кабинет руководителя на телефоне: четыре цифры делят ширину поровну, подпись «в отпуске» не вылезает за рамку */
@media (max-width:820px){
  .mgr-hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 4px;}
  .mgr-hero-stats div{min-width:0;}
  .mgr-hero-stats span{font-size:11px;}
}
/* Road Map: семь руководителей встают в один ряд на ноутбуке (было 6 + 1, и линия к седьмому шла под карточками) */
.org-heads{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}

/* ---- Панель бухгалтера и заявка «Компенсация по чекам» (06.10.2026) ---- */
.sidenav-title.accountant-only{margin-top:18px;}
.user-role.accountant{background:#E9F1FB;color:#1F5A9A;}
[data-theme="dark"] .user-role.accountant{background:#182A40;color:#8FBDF0;}
.trip-form input[type="file"]{width:100%;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--bg-soft);font-family:inherit;font-size:14px;color:var(--ink);}
.trip-form input[type="file"]::file-selector-button{margin-right:12px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;}
/* цифра на пункте меню не обрезается длинным названием («Кабинет руководителя» — нашёл QA Engineer 06.10.2026) */
.nav-item.side > span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.nav-item.side > .side-badge{flex:none;}
/* поле «Чек»: подпись формата не липнет к следующему полю; на телефоне текст рядом с кнопкой выбора не обрезается (UI/UX Designer, 06.10.2026) */
.trip-form .field-hint{margin:6px 0 12px;}
@media (max-width:700px){
  .trip-form input[type="file"]{font-size:12.5px;padding:8px 10px;}
  .trip-form input[type="file"]::file-selector-button{padding:5px 10px;margin-right:8px;font-size:12.5px;}
}

/* чек выбран — видно сразу (06.10.2026) */
.trip-form input[type="file"].has-file{border-style:solid;border-color:#2E9B57;background:#EEF9F1;}
[data-theme="dark"] .trip-form input[type="file"].has-file{background:#173324;border-color:#3FAE6C;}
.file-picked{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:#1F7A43;overflow-wrap:anywhere;}
[data-theme="dark"] .file-picked{color:#7FD6A1;}
.file-picked[hidden]{display:none;}
.file-picked svg{width:16px;height:16px;flex:none;}

/* панель бухгалтера: выбор месяца и скачивание таблицы (06.10.2026) */
.acc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 14px;}
.acc-bar select{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);}
.acc-bar .btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px;}

/* программа лояльности: временно закрытая карточка (06.10.2026) */
.lp-card.soon{cursor:default;opacity:.55;}
.lp-card.soon .lp-ico{color:var(--ink-soft);background:var(--bg-soft);}
.lp-card.soon .lp-more{color:var(--ink-soft);}
.user-role.cfo{background:#F1ECFA;color:#5B3A9A;}
[data-theme="dark"] .user-role.cfo{background:#2A2040;color:#C2A8F0;}

/* бот для HR (06.10.2026): блок с токеном на вкладке «Сервисы» и подключение Telegram в HR-панели */
#hrBotBox:empty{display:none;}
#hrBotBox .adm-small{margin-bottom:10px;}
#hrBotBox .tg-actions{margin-top:12px;}
.tg-mine.hr-tg{margin:0 0 14px;background:var(--surface);}
.tg-mine .adm-inline{flex-wrap:wrap;}

/* «Миссия и ценности» (07.10.2026) */
.val-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;}
.val-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.val-head h3{margin:0;font-family:'Samsung Sans','Golos Text',sans-serif;font-size:19px;flex:1;}
.val-mark{width:38px;height:38px;border-radius:10px;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center;}
.val-mark svg{width:20px;height:20px;}
.val-body{font-size:15px;line-height:1.6;max-width:80ch;}
.val-body p{margin:0 0 12px;}
.val-body p:last-child{margin-bottom:0;}
.val-list{margin:0 0 12px;padding-left:22px;}
.val-list li{margin:4px 0;}
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.val-card{border:1px solid var(--orange-soft);border-radius:var(--radius);padding:16px 18px;background:var(--bg-soft);}
.val-num{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:800;font-size:13px;color:var(--orange);letter-spacing:.08em;}
.val-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:17px;margin-top:4px;}
.val-text{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-top:6px;}
@media (max-width:600px){.val-block{padding:16px;}.val-grid{grid-template-columns:1fr;}}

/* профиль «О себе» (07.10.2026) */
.emp-profile{margin-top:0;}
.emp-profile-row{display:flex;flex-direction:column;gap:4px;padding:9px 0;border-top:1px solid var(--border);font-size:14px;}
.profile-about .emp-profile-row:first-child{border-top:0;}
.profile-hidden{font-style:normal;font-size:12px;color:var(--ink-soft);}
.field-row.three{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:600px){.field-row.three{grid-template-columns:1fr;}}
.emp-profile-row>span{font-size:12px;color:var(--ink-soft);}
.emp-profile-text{white-space:pre-wrap;line-height:1.5;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--orange-tint);color:var(--orange-dark);font-size:13px;font-weight:600;}
.profile-about{padding:18px 0;border-top:1px solid var(--border);}
.profile-about .emp-profile{margin-top:0;border-top:0;margin-bottom:12px;}