/* Connected Community — книги от руководителей, история заявки, остаток отпуска, счётчики меню, проверка дизайна перед запуском.
   Часть оформления портала. Файлы подключаются в templates/index.html по порядку номеров: поздние правила перебивают ранние. */
/* книги от руководителей (09.10.2026): кто советует, стрелки и точки */
.book-by{font-size:12.5px;font-weight:700;color:var(--orange-dark);margin:-4px 0 8px;}
.book-by-full{font-weight:400;color:var(--ink-soft);}
.book-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;}
.book-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--orange);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.book-arrow svg{width:16px;height:16px;}
.book-arrow:last-child svg{transform:rotate(180deg);}
.book-arrow:hover{border-color:var(--orange);background:var(--orange-tint);}
.book-dots{display:flex;gap:5px;}
.book-dots i{width:6px;height:6px;border-radius:50%;background:var(--border);display:block;}
.book-dots i.on{background:var(--orange);}
.book-cover-empty{display:flex;align-items:center;justify-content:center;background:var(--orange-tint);color:var(--orange-dark);font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:800;font-size:15px;text-align:center;padding:14px;}
.widget-book.book-row .book-cover-empty{width:92px;height:138px;font-size:12px;padding:8px;}
.people-leaders .leader-excerpt{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.people-leaders-head{margin-top:4px;}

/* открыто окно — страница под ним не прокручивается (09.10.2026) */
body.modal-open{overflow:hidden;}
html{scrollbar-gutter:stable;}

/* книга месяца — карточка одного размера для всех книг: стрелки не прыгают, текст не вылезает и не обрезается (09.10.2026) */
.book-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.widget-book .book-text{min-height:80px;min-width:0;}
.widget-book .book-title{overflow-wrap:break-word;}
.widget-book .book-title.long{font-size:14px;line-height:1.25;}   /* длинное название — мельче, но целиком */
.widget-book .book-author{overflow-wrap:break-word;}
.widget-book.book-row .book-body{min-height:138px;}
.widget-book.book-row .book-text{min-height:0;flex:1;min-width:0;}

/* история заявки по шагам с точным временем (09.10.2026) */
.req-log{margin:14px 0 4px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg-soft);}
.req-log-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:800;font-size:14px;margin-bottom:8px;}
.req-log-row{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--border);font-size:13.5px;}
.req-log-title + .req-log-row{border-top:0;}
.req-log-time{flex:none;width:112px;color:var(--orange-dark);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.req-log-what{min-width:0;overflow-wrap:anywhere;}
.req-log-text{color:var(--ink-soft);margin-top:2px;}
.req-row .req-row-date{white-space:nowrap;}
.req-detail-top{flex-wrap:wrap;row-gap:6px;}
.req-detail-top .req-row-date{white-space:normal;min-width:0;}
@media (max-width:720px){.req-log-row{flex-direction:column;gap:2px;}.req-log-time{width:auto;}}
@media (max-width:700px){.req-detail-top .req-row-date{display:block;}}   /* в окне заявки дата и время видны и на телефоне (09.10.2026) */

/* остаток отпуска — личный блок в «Моём отпуске» (09.10.2026) */
.vac-balance{background:var(--surface);border:2px solid var(--orange);border-radius:16px;padding:20px 22px;margin-bottom:22px;}
.vac-balance-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.vac-balance-date{font-size:12.5px;color:var(--ink-soft);}
.vac-bal-item{margin-bottom:16px;}
.vac-bal-total{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.vac-bal-total .vac-num{color:var(--orange);font-size:40px;line-height:1;}
.vac-bal-table{border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:13.5px;}
.vac-bal-row{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));gap:8px;padding:8px 12px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums;}
.vac-bal-row:first-child{border-top:0;}
.vac-bal-row.head{background:var(--bg-soft);font-weight:700;font-size:12px;color:var(--ink-soft);}
.vac-bal-row span{min-width:0;overflow-wrap:anywhere;}
.vac-bal-row span:not(:first-child){text-align:right;}
@media (max-width:720px){.vac-bal-row{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));font-size:12.5px;padding:8px;}.vac-bal-row.head{font-size:10.5px;}}

/* HR-панель → Отпуск: остатки отпусков всех сотрудников, видят HR и админ (09.10.2026) */
.hr-bal-head{margin-top:26px;}
.hr-bal-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.hr-bal-top input{flex:1;min-width:180px;max-width:360px;}
.hr-bal-date{font-size:12.5px;color:var(--ink-soft);}
.hr-bal-row{cursor:pointer;}
.hr-bal-row:hover{border-color:var(--orange);}
.hr-bal-chip{background:var(--orange-tint);color:var(--orange-dark);white-space:nowrap;}
.modal .vac-balance{border:0;padding:0;margin:0;}
.hr-bal-top input{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;}
.hr-bal-top input:focus{outline:none;border-color:var(--orange);}
/* счётчик в меню — на углу значка (09.10.2026): длинные названия («Панель администратора», «Кабинет руководителя») не обрезаются */
@media (min-width:1101px){
  /* пункты чуть шире за счёт полей меню: «Панель администратора» (169px) помещается целиком */
  body:not(.sidenav-collapsed) .sidenav{padding-left:6px;padding-right:6px;}
  body:not(.sidenav-collapsed) .nav-item.side{padding-left:8px;padding-right:4px;gap:8px;}   /* запас 6px на разницу шрифтов в браузерах */
  body:not(.sidenav-collapsed) .sidenav-title{padding-left:10px;padding-right:10px;}
  body:not(.sidenav-collapsed) .nav-item.side > .side-badge{position:absolute;left:19px;top:1px;margin:0;min-width:15px;height:15px;padding:0 3px;font-size:9.5px;box-shadow:0 0 0 2px var(--bg);}
  body:not(.sidenav-collapsed) .nav-item.side.active > .side-badge{background:#fff;color:var(--orange);box-shadow:none;}
}
/* проверка дизайна перед показом (09.10.2026) */
/* книга месяца на телефоне: обложка слева, название справа — как в компактном виде на ноутбуке, а не обложка во весь экран */
@media (max-width:860px){
  .widget-book .book-body{display:flex;align-items:center;gap:14px;min-height:138px;}
  .widget-book .book-cover{width:92px !important;height:138px !important;flex:none;margin:0;}
  .widget-book .book-cover-empty{font-size:12px;padding:8px;}
  .widget-book .book-text{min-height:0;flex:1;min-width:0;}
}
/* календарь, список «Ближайшие» на телефоне: дата и плашка в одну строку, название и описание под ними во всю ширину */
@media (max-width:600px){
  .event-row{flex-wrap:wrap;row-gap:4px;}
  .event-row .event-type{margin-left:auto;}
  .event-row > .event-main{flex-basis:100%;order:2;}
  .event-row > .btn{order:3;}
}
/* «Мой отпуск» на телефоне: плитки с цифрами поровну в ряд */
@media (max-width:720px){ .vac-tiles{display:flex;gap:10px;} .vac-tile{flex:1 1 0;min-width:0;} }
/* окно «У вас нет прав»: подпись под названием ровно, значок не вплотную к шапке */
.cw-denied .cw-brand{text-align:left;}
.cw-denied-mark{margin-top:14px;}

/* ===== проверка дизайна перед показом 09.10.2026 ===== */
/* «Частые вопросы» у новичков: знак вопроса был оранжевым на оранжевом */
.faq-link-mark,html[data-theme="dark"] .faq-link-mark{color:#fff;}
/* тёмная тема: квадратик «Праздник» в легенде календаря и плашка «Только для руководителей» */
html[data-theme="dark"] .cal-legend .hol::before{background:var(--orange-soft);border-color:var(--orange);}
html[data-theme="dark"] .req-type-badge{color:#FFB27A;}
/* почта в карточке сотрудника: перенос перед «@», а не посреди слова */
.person-card .person-email{overflow-wrap:break-word;word-break:normal;}
/* блок «Руководители» в «Сотрудниках»: отступ до следующего заголовка, «Читать →» на одной линии */
.people-leaders{margin-bottom:28px;}
.people-leaders .leader-card{display:flex;flex-direction:column;}
.people-leaders .leader-more{margin-top:auto;padding-top:10px;}
/* партнёры: у карточки без сайта не рисуем пустую линию-разделитель */
.partner-foot:not(:has(.partner-link)){border-top:0;padding-top:0;}
/* Road Map: название подразделения целиком, а не «Коммерция и развитие бизн…» */
.og-band-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;}
/* панель администратора: длинное значение — под подписью во всю ширину; «Скачать» без подчёркивания */
.adm-row b{overflow-wrap:break-word;min-width:0;}
.adm-row.long{flex-direction:column;align-items:flex-start;gap:2px;}
.adm-row.long b{text-align:left;}
a.icon-btn{text-decoration:none;}
/* 09.10.2026: восьмое подразделение (Smart Industry & Infrastructure) — плитки руководителей на Road Map в один ряд */
@media (min-width:861px){ .org-heads{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));} }
/* блок «Руководители»: семь карточек — по четыре в ряд, неполный ряд по центру, без одинокой карточки слева */
@media (min-width:1101px){
  .people-leaders{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
  .people-leaders > .person-card{flex:0 0 calc((100% - 36px) / 4);min-width:0;box-sizing:border-box;}
}
.vac-bal-used{font-size:12.5px;color:var(--ink-soft);margin:2px 0 6px;}   /* вычет по отпускам, согласованным на портале (15.10.2026) */
/* видео месяца (02.11.2026, вместо книги): обложка 16:9 с кнопкой, смена свайпом как у книг */
.widget-video.clickable{cursor:pointer;transition:border-color .15s;}
.widget-video.clickable:hover{border-color:var(--orange);}
.widget-video.clickable:hover .video-title{color:var(--orange);}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--bg-soft);margin:4px 0 10px;}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.video-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(29,29,31,.78);display:flex;align-items:center;justify-content:center;}
.video-play svg{width:22px;height:22px;fill:#fff;margin-left:2px;}
.video-title{font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:3.9em;}
.video-body{transition:transform .26s ease,opacity .26s ease;}
.widget-video.vid-out .video-body,.widget-video.vid-out .book-by{transform:translateX(-24px);opacity:0;transition:transform .26s ease,opacity .26s ease;}
.widget-video.vid-out-back .video-body,.widget-video.vid-out-back .book-by{transform:translateX(24px);opacity:0;transition:transform .26s ease,opacity .26s ease;}
.widget-video.vid-in .video-body,.widget-video.vid-in .book-by{animation:vidIn .26s ease;}
.widget-video.vid-in-back .video-body,.widget-video.vid-in-back .book-by{animation:vidInBack .26s ease;}
@keyframes vidIn{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes vidInBack{from{transform:translateX(-24px);opacity:0;}to{transform:none;opacity:1;}}
.video-card-thumb{margin:0 0 12px;}
.video-card-title{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:6px;}
.video-modal .modal-foot a.btn{text-decoration:none;}