/* Connected Community — основа: цвета и размеры (переменные), каркас страницы, шапка, кнопки, поля, окна, лента новостей, правая колонка.
   Часть оформления портала. Файлы подключаются в templates/index.html по порядку номеров: поздние правила перебивают ранние. */
/* Шрифт портала — Samsung Sans (30.10.2026): официальные файлы прислал CEO, Темирлан попросил поставить. Файлы урезаны до
   латиницы, кириллицы с казахскими буквами и знаков (₸, «», №) и сжаты в woff2 — static/fonts/. Начертания: Light 300,
   Regular 400, Medium 500–600, Bold 700–900. Не загрузился — запасные Golos Text и Roboto, как было с 16.10.2026. */
@font-face{font-family:'Samsung Sans';src:url('../fonts/samsung-sans-light.woff2') format('woff2');font-weight:100 300;font-style:normal;font-display:swap;}
@font-face{font-family:'Samsung Sans';src:url('../fonts/samsung-sans-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Samsung Sans';src:url('../fonts/samsung-sans-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Samsung Sans';src:url('../fonts/samsung-sans-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap;}
:root{
  --bg:#FFFFFF;
  --bg-soft:#FAF8F6;
  --surface:#FFFFFF;
  --ink:#040404;
  --ink-soft:#666666;
  --orange:#FF6600;
  --orange-dark:#D95700;
  --orange-soft:#FFE5D1;
  --orange-tint:#FFF2E8;
  --border:#E9E6E1;
  --danger:#C4432B;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Samsung Sans','Roboto',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
}
a{color:var(--orange-dark);}
.app{min-height:100vh;display:flex;flex-direction:column;}

/* Masthead */
.masthead{
  display:flex;align-items:center;gap:16px;
  padding:16px 26px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{width:34px;height:34px;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;gap:0px;line-height:1.15;}
.brand-name{
  font-family:'Samsung Sans','Golos Text',sans-serif;
  font-weight:700;
  font-size:25px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.brand-name span{color:var(--orange);}
.brand-tag{font-size:11.5px;color:var(--ink-soft);}

.nav-tabs{display:flex;gap:4px;margin-left:8px;margin-right:auto;flex-wrap:wrap;}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  border-radius:999px;
  white-space:nowrap;
}
.nav-item:hover{color:var(--ink);background:var(--bg-soft);}
.nav-item.active{
  color:#fff;
  background:var(--orange);
}
.nav-item.active .nav-count{color:rgba(255,255,255,0.85);}
.nav-count{font-size:12px;color:var(--ink-soft);}

.search-wrap{flex:1;max-width:280px;margin-left:auto;}
.search-wrap input{
  width:100%;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg-soft);
  font-family:'Samsung Sans','Roboto',sans-serif;
  font-size:13.5px;
  color:var(--ink);
}
.search-wrap input:focus{outline:2px solid var(--orange);outline-offset:1px;}

/* Layout */
.body-row{display:flex;flex:1;min-height:0;gap:32px;max-width:1320px;margin:0 auto;width:100%;padding:0 40px;}
.main{flex:1;min-width:0;padding:36px 0 60px;}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.section-title{
  font-family:'Samsung Sans','Golos Text',sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-0.01em;
}
.section-sub{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}
.btn{
  font-family:'Samsung Sans','Roboto',sans-serif;
  font-size:13.5px;font-weight:600;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  cursor:pointer;
}
.btn:hover{background:var(--orange-dark);}
.btn.secondary{background:var(--bg-soft);color:var(--ink);border:1px solid var(--border);}
.btn.secondary:hover{background:var(--orange-tint);border-color:var(--orange-soft);}
.btn.text{border:none;background:none;color:var(--ink-soft);padding:4px 6px;font-weight:600;border-radius:6px;}
.btn.text:hover{color:var(--danger);}

/* Empty state */
.empty{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:44px 24px;
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
  background:var(--bg-soft);
}
.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:0;font-weight:700;font-family:'Samsung Sans','Golos Text',sans-serif;}

/* News */
.news-feature{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 30px;
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
}
.news-feature::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange);
}
.news-feature .news-title{font-size:22px;}
.news-list{display:flex;flex-direction:column;gap:12px;}
.news-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 22px;
}
.news-title{
  font-family:'Samsung Sans','Golos Text',sans-serif;
  font-weight:700;
  font-size:17px;
  margin:0 0 6px;
  letter-spacing:-0.005em;
}
.news-meta{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;}
.news-body{font-size:14.5px;color:var(--ink);white-space:pre-wrap;max-width:70ch;}
/* длинная новость свёрнута до ~6 строк с затуханием, «Читать далее» раскрывает (25.09.2026) */
.news-body.clamp{max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);}
.news-more{display:inline-block;margin-top:6px;padding:4px 0;border:none;background:none;color:var(--orange);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.news-more:hover{text-decoration:underline;}
.card-actions{margin-top:10px;display:flex;gap:6px;}

/* Documents */
.doc-groups{display:flex;flex-direction:column;gap:28px;}
.doc-group-title{
  font-size:16px;font-weight:700;color:var(--ink);
  font-family:'Samsung Sans','Golos Text',sans-serif;
  letter-spacing:-0.005em;
  display:inline-flex;align-items:center;gap:8px;
  padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--orange);
}
.doc-group-title::before{
  content:"";width:8px;height:8px;border-radius:999px;background:var(--orange);flex-shrink:0;
}
.doc-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:14px 4px;border-bottom:1px solid var(--border);
}
.doc-row:last-child{border-bottom:none;}
.doc-name{font-weight:600;font-size:14.5px;}
.doc-desc{font-size:13.5px;color:var(--ink-soft);margin-top:3px;max-width:60ch;}
.doc-link{font-size:12.5px;margin-top:4px;display:inline-block;font-weight:600;}

/* People */
.people-groups{display:flex;flex-direction:column;gap:28px;}
.people-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.person-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
}
.person-name{font-weight:700;font-size:14.5px;}
.person-role{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.person-email{font-size:12.5px;color:var(--orange-dark);margin-top:10px;display:block;font-weight:600;}

/* Modal */
.overlay{
  position:fixed;inset:0;background:rgba(21,24,27,0.45);
  display:flex;align-items:center;justify-content:center;z-index:50;
  padding:20px;
}
.modal{
  background:var(--surface);width:100%;max-width:480px;
  border-radius:16px;
  max-height:88vh;overflow-y:auto;
  box-shadow:0 20px 50px rgba(21,24,27,0.18);
}
.modal-head{
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.modal-head h3{
  font-family:'Samsung Sans','Golos Text',sans-serif;margin:0;font-size:18px;font-weight:700;
}
.modal-close{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;line-height:1;}
/* все всплывающие окна — с оранжевой рамкой и светло-оранжевой шапкой (просьба пользователя 24.09.2026, «по всему сайту») */
.modal{border:2px solid var(--orange);}
.modal-head{background:var(--orange-tint);border-bottom:1px solid var(--orange-soft);}
.modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field input,.field textarea,.field select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  font-family:'Samsung Sans','Roboto',sans-serif;font-size:14px;background:var(--bg-soft);color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:0;}
.field textarea{min-height:100px;resize:vertical;font-family:'Samsung Sans','Roboto',sans-serif;}
.modal-foot{
  padding:16px 24px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
}
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;font-size:13.5px;
  z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;
}
.toast.show{opacity:1;}
.loading{color:var(--ink-soft);font-size:14px;padding:20px 0;}

@media (max-width:860px){
  .masthead{flex-wrap:wrap;padding:14px 18px;}
  .nav-tabs{order:3;flex-basis:100%;margin:6px 0 0;overflow-x:auto;}
  .search-wrap{max-width:none;order:2;margin-left:auto;width:auto;}
  .main{padding:22px 18px 60px;}
  .brand-tag{display:none;}
}

/* ---- extensions: pin, badges, comments, photos, faq, events ---- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
  padding:3px 9px;border-radius:999px;
}
.badge.required{background:var(--orange-soft);color:var(--orange-dark);}
.badge.pinned{background:var(--orange);color:#fff;}   /* была чёрной; 08.10.2026 — в фирменных цветах, в тёмной теме чёрная плашка не читалась */
.badge.holiday{background:var(--orange);color:#fff;}
.badge.vac{background:#E3F4E9;color:#1F6B3E;}
html[data-theme="dark"] .badge.vac{background:#173323;color:#8FD9A4;}

.news-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.news-image{
  width:100%;max-width:520px;border-radius:8px;margin:12px 0;display:block;
  border:1px solid var(--border);
}
.icon-btn{   /* 17.10.2026: как второстепенная кнопка (.btn.secondary) — белая с рамкой; раньше серая, «Скачать» выглядела по-разному */
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.icon-btn:hover{border-color:var(--orange);color:var(--orange-dark);}
.icon-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}

.comments{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.comment{padding:8px 0;border-bottom:1px solid var(--border);}
.comment:last-child{border-bottom:none;}
.comment-meta{font-size:12px;color:var(--ink-soft);margin-bottom:2px;font-weight:600;}
.comment-text{font-size:13.5px;}
.comment-form{display:flex;gap:8px;margin-top:12px;}
.comment-form input{
  flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:999px;
  font-family:'Samsung Sans','Roboto',sans-serif;font-size:13.5px;background:var(--bg-soft);
}
.comment-form button{
  border:none;background:var(--orange);color:#fff;border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
}
.comments-toggle{font-size:12.5px;color:var(--orange-dark);font-weight:600;cursor:pointer;margin-top:10px;display:inline-block;}

.file-drop{
  border:1px dashed var(--border);border-radius:8px;padding:14px;text-align:center;
  font-size:13px;color:var(--ink-soft);cursor:pointer;background:var(--bg-soft);
}
.file-drop:hover{border-color:var(--orange);}
.preview-thumb{max-width:100%;max-height:140px;border-radius:8px;margin-top:8px;display:block;}

.person-photo{
  width:64px;height:64px;border-radius:999px;object-fit:cover;
  background:var(--orange-soft);margin-bottom:10px;
}
.person-photo-fallback{
  width:64px;height:64px;border-radius:999px;background:var(--orange-soft);
  color:var(--orange-dark);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:20px;margin-bottom:10px;
}
.person-extra{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}

.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.faq-q{
  padding:16px 18px;font-weight:600;font-size:14.5px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-q:hover{background:var(--bg-soft);}
.faq-a{padding:0 18px 16px;font-size:14px;color:var(--ink-soft);display:none;}
.faq-item.open .faq-a{display:block;}
.faq-arrow{transition:transform .15s;color:var(--orange);flex-shrink:0;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}

.event-row{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 4px;border-bottom:1px solid var(--border);
}
.event-row:last-child{border-bottom:none;}
.event-date{
  min-width:78px;font-weight:700;font-family:'Samsung Sans','Golos Text',sans-serif;
  color:var(--orange-dark);font-size:14px;
}
.event-title{font-weight:600;font-size:14.5px;}
.event-desc{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.event-type{margin-left:auto;flex-shrink:0;}

.suggestion-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;
}
.suggestion-text{font-size:14.5px;}
.suggestion-meta{font-size:12px;color:var(--ink-soft);margin-top:8px;}

/* ---- sidebar widgets ---- */
.side-widgets{
  width:280px;flex-shrink:0;
  padding:36px 0 60px;
  display:flex;flex-direction:column;gap:20px;
}
.widget-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;
}
.widget-title{
  font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:14px;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.widget-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.widget-row:last-child{border-bottom:none;}
.widget-row-name{font-weight:600;color:var(--ink);}
.widget-row-date{color:var(--orange-dark);font-weight:600;white-space:nowrap;font-size:12px;}
.widget-empty{font-size:12.5px;color:var(--ink-soft);}

@media (max-width:1100px){
  .side-widgets{display:none;}
  .body-row{padding:0 18px;}
}

/* ---- lightbox (click to enlarge photos) ---- */
.zoomable{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,12,13,0.85);
  display:flex;align-items:center;justify-content:center;z-index:70;padding:30px;
}
.lightbox-overlay img{max-width:min(90vw,700px);max-height:85vh;border-radius:10px;object-fit:contain;}
.lightbox-close{
  position:absolute;top:20px;right:26px;color:#fff;font-size:30px;
  background:none;border:none;cursor:pointer;line-height:1;
}

/* ---- onboarding steps timeline ---- */
.onboard-list{display:flex;flex-direction:column;gap:0;}
.onboard-step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);}
.onboard-step:last-child{border-bottom:none;}
.onboard-num{
  width:30px;height:30px;border-radius:999px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  flex-shrink:0;font-family:'Samsung Sans','Golos Text',sans-serif;
}
.onboard-title{font-weight:700;font-size:15px;font-family:'Samsung Sans','Golos Text',sans-serif;}
.onboard-desc{font-size:13.5px;color:var(--ink-soft);margin-top:3px;white-space:pre-line;line-height:1.6;overflow-wrap:anywhere;}
.onboard-step > div[style*="flex:1"]{min-width:0;}   /* длинная ссылка в описании шага не раздвигает страницу (проверка 25.09.2026) */
@media (max-width:640px){.onboard-step{flex-wrap:wrap;}.onboard-step .card-actions{width:100%;justify-content:flex-end;}}

/* ---- ИИ-помощник (ask box) ---- */
.ask-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--orange-tint) 0%,var(--surface) 62%);
  padding:18px 20px 20px;
  margin-bottom:30px;
}
.ask-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.ask-spark{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  border-radius:9px;background:var(--orange);color:#fff;
  font-size:17px;line-height:1;
}
.ask-title{font-family:'Samsung Sans','Golos Text',sans-serif;font-weight:700;font-size:16.5px;}
.ask-sub{font-size:12.5px;color:var(--ink-soft);margin-top:1px;}

.ask-input-row{display:flex;gap:10px;align-items:flex-end;}
.ask-input-row textarea{
  flex:1;min-width:0;
  font-family:'Samsung Sans','Roboto',sans-serif;font-size:14.5px;line-height:1.45;
  color:var(--ink);
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  resize:none;overflow-y:auto;
  height:44px;
}
.ask-input-row textarea:focus{outline:none;border-color:var(--orange);}
.ask-input-row .btn{flex-shrink:0;height:44px;}
.ask-input-row .btn:disabled{opacity:0.6;cursor:default;}

.ask-result:empty{display:none;}
.ask-answer{
  margin-top:14px;padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--orange);
  border-radius:8px;
  font-size:14.5px;line-height:1.62;
  white-space:normal;
}
.ask-answer.error{border-left-color:var(--danger);color:var(--danger);}
.ask-answer.thinking{
  display:flex;align-items:center;gap:10px;
  color:var(--ink-soft);border-left-color:var(--orange-soft);
}
.ask-dots{display:inline-flex;gap:4px;}
.ask-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  animation:askBlink 1.3s infinite ease-in-out both;
}
.ask-dots i:nth-child(2){animation-delay:0.18s;}
.ask-dots i:nth-child(3){animation-delay:0.36s;}
@keyframes askBlink{0%,80%,100%{opacity:0.25;}40%{opacity:1;}}

.faq-divider{
  display:flex;align-items:center;gap:12px;
  margin:0 0 16px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ink-soft);
}
.faq-divider::after{content:"";flex:1;height:1px;background:var(--border);}

/* ---- AI Staff Bot: примеры вопросов ---- */
.ask-examples{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.ask-examples-label{font-size:13px;color:var(--ink-soft);margin-right:2px;}
.ask-chip{
  font-family:'Samsung Sans','Roboto',sans-serif;
  font-size:13px;font-weight:500;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 14px;
  cursor:pointer;
}
.ask-chip:hover{border-color:var(--orange);background:var(--orange-tint);color:var(--orange-dark);}

/* ---- меню: если 7 вкладок не помещаются, отдаём им отдельную строку ---- */
@media (max-width:1180px){
  .masthead{flex-wrap:wrap;}
  .nav-tabs{
    order:3;flex-basis:100%;
    margin:8px 0 0;
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;
  }
  .nav-tabs::-webkit-scrollbar{display:none;}
}