/*
  Личный кабинет koncentrat.app — меню нового кабинета (27.10.2026): боковая колонка на разделах, полоса сверху с кнопкой
  «Меню» (список вниз) на открытом дашборде и на узких экранах; строит menu.js. Палитра фирменного стиля.
*/
.klm{--sky:#BEDAF5;--blue:#0167FA;--navy:#014099;--deep:#012354;--soft:rgba(190,218,245,.35);
  position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--sky);font-family:Inter,Arial,sans-serif}
.klm *{box-sizing:border-box}
.klm__in{position:relative;display:flex;align-items:center;gap:20px;height:64px;padding:0 24px 0 20px}
.klm__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:1px solid var(--sky);
  border-radius:20px;background:#fff;color:var(--deep);font:500 15px/1 Inter,Arial,sans-serif;cursor:pointer;position:relative;
  transition:background .15s,border-color .15s,color .15s}
.klm__btn:hover,.klm_open .klm__btn{background:var(--blue);border-color:var(--blue);color:#fff}
.klm__btn:focus-visible,.klm__item:focus-visible,.klm__logo:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.klm__dot{position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--blue);border:2px solid #fff}
.klm_open .klm__dot,.klm__btn:hover .klm__dot{background:#fff;border-color:var(--blue)}
.klm__i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.klm__logo{display:flex;align-items:center;color:var(--deep);text-decoration:none;flex:none}
.klm__logo-img{height:22px;width:auto;display:block}
.klm__crumbs{display:flex;align-items:center;gap:10px;min-width:0;padding-left:20px;border-left:1px solid var(--sky);height:28px}
.klm__crumb{font:500 15px/1.2 Inter,Arial,sans-serif;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klm__crumb_link{color:var(--navy);text-decoration:none;opacity:.85}
.klm__crumb_link:hover{color:var(--blue);opacity:1}
.klm__crumb_now{font-weight:600}
.klm__sep{color:var(--navy);opacity:.5}
.klm__pill{flex:none;padding:4px 10px;border-radius:12px;background:var(--soft);color:var(--navy);font:500 12px/1.2 Inter,Arial,sans-serif}
.klm__sp{flex:1}
/* действия открытого дашборда */
.klm__acts{display:none;align-items:center;gap:10px;flex:none}
.klm_view .klm__acts{display:flex}
.klm_view .klm__email{display:none}
.klm__act{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--sky);border-radius:20px;
  color:var(--deep);text-decoration:none;font:500 14px/1 Inter,Arial,sans-serif;background:#fff;transition:background .15s,color .15s,border-color .15s}
.klm__act[hidden]{display:none}
.klm__act .klm__i{color:var(--blue)}
.klm__act:hover{border-color:var(--blue);color:var(--blue)}
.klm__theme{display:inline-flex;padding:3px;border:1px solid var(--sky);border-radius:20px;background:#fff}
.klm__tbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border:0;border-radius:16px;
  background:transparent;color:var(--navy);cursor:pointer;transition:background .15s,color .15s}
.klm__tbtn .klm__i{width:17px;height:17px}
.klm__tbtn[aria-pressed="true"]{background:var(--blue);color:#fff}
.klm__tbtn:focus-visible,.klm__act:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* тёмная тема дашборда — полоса тоже тёмная */
.klm_dark{background:var(--deep);border-bottom-color:rgba(190,218,245,.18)}
.klm_dark .klm__logo,.klm_dark .klm__crumb_now{color:#fff}
.klm_dark .klm__crumb_link,.klm_dark .klm__sep{color:var(--sky)}
.klm_dark .klm__crumbs{border-left-color:rgba(190,218,245,.25)}
.klm_dark .klm__pill{background:rgba(190,218,245,.16);color:var(--sky)}
.klm_dark .klm__btn,.klm_dark .klm__act,.klm_dark .klm__theme{background:transparent;border-color:rgba(190,218,245,.35);color:#fff}
.klm_dark .klm__act .klm__i,.klm_dark .klm__tbtn{color:var(--sky)}
.klm_dark .klm__tbtn[aria-pressed="true"]{background:var(--blue);color:#fff}
.klm_dark .klm__btn:hover,.klm_dark.klm_open .klm__btn{background:var(--blue);border-color:var(--blue)}
.klm_dark .klm__dot{border-color:var(--deep)}
.klm__email{font:400 14px/1.2 Inter,Arial,sans-serif;color:var(--navy)}
/* панель вниз */
.klm__panel{position:absolute;top:58px;left:20px;width:320px;max-height:calc(100vh - 80px);overflow:auto;background:#fff;
  border:1px solid var(--sky);border-radius:18px;box-shadow:0 18px 40px rgba(1,35,84,.14);padding:8px 8px 10px;
  animation:klm-in .16s ease-out}
@keyframes klm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.klm__panel{animation:none}}
.klm__head{padding:12px 12px 14px;margin-bottom:4px;border-bottom:1px solid var(--sky)}
.klm__head-mail{font:600 15px/1.3 Inter,Arial,sans-serif;color:var(--deep);word-break:break-all}
.klm__head-role{font:400 13px/1.3 Inter,Arial,sans-serif;color:var(--navy);margin-top:2px}
.klm__head-link{display:block;margin:-6px -8px;padding:6px 8px;border-radius:10px;color:inherit;text-decoration:none}
.klm__head-link:hover .klm__head-role{color:var(--blue);text-decoration:underline}
.klm__head-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.klm__group+.klm__group{margin-top:4px;padding-top:4px;border-top:1px solid var(--sky)}
.klm__gt:empty{display:none}
.klm__gt{padding:10px 12px 6px;font:500 12px/1 Inter,Arial,sans-serif;color:var(--navy);opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.klm__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--deep);text-decoration:none;
  font:500 15px/1.25 Inter,Arial,sans-serif;position:relative}
.klm__item .klm__i{color:var(--blue)}
.klm__item:hover{background:var(--soft)}
.klm__item_on{background:var(--soft);color:var(--blue);font-weight:600}
.klm__item_on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--blue)}
.klm__it{flex:1}
.klm__badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue);color:#fff;font:600 12px/20px Inter,Arial,sans-serif;text-align:center}
.klm__i_ext{width:14px;height:14px;color:var(--navy);opacity:.6}
@media (max-width:900px){.klm__email{display:none}}
@media (max-width:640px){
  .klm__in{height:56px;gap:12px;padding:0 12px}
  .klm__btn{padding:0 12px 0 10px}
  .klm__btn-t{display:none}
  .klm__logo-img{height:18px}
  .klm__crumbs{display:none}
  .klm_view .klm__logo{display:none}
  .klm_view .klm__crumbs{display:flex;border-left:0;padding-left:0;flex:1}
  .klm_view .klm__sp{display:none}
  .klm__act{width:40px;padding:0;justify-content:center}
  .klm__act-t,.klm__act .klm__i_ext{display:none}
  /* на телефоне: «←» вместо «Мои дашборды ›», тема — одной кнопкой (показана та, на которую переключит) */
  .klm__crumb_link{font-size:0;flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
  .klm__crumb_link::before{content:"←";font-size:20px;line-height:1}
  .klm__sep,.klm__pill{display:none}
  .klm__theme{padding:0;border:0;background:transparent}
  .klm__tbtn[aria-pressed="true"]{display:none}
  .klm__tbtn{width:40px;height:40px;border:1px solid var(--sky);border-radius:20px}
  .klm_dark .klm__tbtn{border-color:rgba(190,218,245,.35)}
  .klm__panel{top:52px;left:12px;right:12px;width:auto}
}
/* переход список ⇄ дашборд (menu.js: menuOut / menuIn): колонка уезжает влево, полоса — вверх; время = CHROME_MS */
.klm,.kls{transition:transform .34s ease}
.klm_up{transform:translateY(-100%)}
.kls_left{transform:translateX(-100%)}
.klm_snap{transition:none!important}
@media (prefers-reduced-motion:reduce){.klm,.kls{transition:none}}
/* прозрачная подложка под открытым списком: клик мимо (в том числе по дашборду) закрывает список */
.klm__shade{position:fixed;inset:0;z-index:999;background:transparent}
.klm__shade[hidden]{display:none}

/* боковая колонка на страницах кабинета (body.kls_on ставит lk.js); на открытом дашборде и уже 1000 px — полоса сверху */
.kls{display:none}
body.kls_on .klm{display:none}
body.kls_on .kls{--sky:#BEDAF5;--blue:#0167FA;--navy:#014099;--deep:#012354;--soft:rgba(190,218,245,.35);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:264px;box-sizing:border-box;z-index:900;
  padding:24px 14px 16px;background:#fff;border-right:1px solid var(--sky);overflow-y:auto;font-family:Inter,Arial,sans-serif}
body.kls_on #allrecords{padding-left:264px!important}
.kls__logo{display:block;padding:4px 12px 26px;color:var(--deep);text-decoration:none}
.kls__logo svg{display:block;height:21px;width:auto}
.kls__logo:focus-visible,.kls .klm__item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kls__nav .klm__group+.klm__group{margin-top:10px;padding-top:6px;border-top:1px solid var(--sky)}
.kls__nav .klm__gt{padding:12px 12px 8px}
.kls__nav .klm__item{margin:2px 0}
.kls .kls__me{margin:auto 0 0;padding:14px 12px 4px;border-top:1px solid var(--sky);border-bottom:0}
.kls .kls__me[hidden]{display:none}
.kls .kls__me .klm__head-mail{font-size:14px}
@media (max-width:1000px){
  body.kls_on .kls{display:none}
  body.kls_on .klm{display:block}
  body.kls_on #allrecords{padding-left:0!important}
}

/* без моргания при переходах между страницами кабинета: пока lk.js грузится — место под меню и его пустая рамка той же
   геометрии. Класс на <html> ставит код в head страницы Тильды (kl-side — страница кабинета, kl-bar — открытый
   дашборд #d=…), lk.css там же подключён заранее. Готовое меню ставит body.klm-on — рамка уходит. */
@media (min-width:1001px){
  html.kl-side #allrecords{padding-left:264px!important}
  html.kl-side body:not(.klm-on)::before{content:"";position:fixed;top:0;left:0;bottom:0;width:264px;z-index:900;
    box-sizing:border-box;background:#fff;border-right:1px solid #BEDAF5}
}
html.kl-bar body:not(.klm-on)::before{content:"";display:block;height:64px;border-bottom:1px solid #BEDAF5;background:#fff}
@media (max-width:1000px){
  html.kl-side body:not(.klm-on)::before{content:"";display:block;height:64px;border-bottom:1px solid #BEDAF5;background:#fff}
}
@media (max-width:640px){
  html.kl-side body:not(.klm-on)::before,html.kl-bar body:not(.klm-on)::before{height:56px}
}