/* Оболочка сотрудника: страница входа, левое меню, меню профиля, строка состояния сверху, заголовок страницы. */

.card-header,
.lc h2,
.lg-l h1,
h1 {
  font-family: var(--font-h);
}
.app {
  display: flex;
  min-height: 100vh;
}
.lm,
aside {
  flex-shrink: 0;
}
aside {
  width: 264px;
  background: var(--side);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transition:
    width 0.35s var(--ease),
    padding 0.35s var(--ease);
}
.lm {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, #14aab6, #0e7c86);
  display: grid;
  place-items: center;
  color: #fff;
}
.av.lg,
.logo {
  font-size:1rem;
  font-family: var(--font-h);
}
.logo,
h1 {
  font-weight: 800;
}
#nav .nav-link,
.logo {
  display: flex;
  align-items: center;
}
.logo {
  gap: 10px;
  color: #fff;
  padding: 4px 8px 22px;
  line-height: 1.1;
}
.logo small {
  display: block;
  font-weight: 500;
  font-size:0.6875rem;
  color: #8fa9b8;
  font-family: Inter, sans-serif;
  margin-top: 2px;
}
#nav {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}
#nav .nav-link {
  gap: 11px;
  text-align: left;
  color: #b4c4d1;
  padding: 0.62rem 0.8rem;
  border-radius: 10px;
  font-weight: 500;
}
#nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
#nav .nav-link.active {
  background: var(--pri-fill);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14, 124, 134, 0.35);
}
#nav .soon {
  color: #b4c4d1;
}
#nav .nav-link svg {
  flex-shrink: 0;
  opacity: 0.9;
}
main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 40px;
}
.top {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.tl,
.top {
  display: flex;
  align-items: center;
  gap: 14px;
}
#login .lc h2 {
  font-size:1.25rem;
  font-weight: 800;
  margin: 0;
}
#login,
.kv {
  display: grid;
}
#login label,
.kv label {
  display: block;
  color: var(--mute);
}
.lg-l,
.pad {
  display: flex;
}
#login {
  position: fixed;
  inset: 0;
  z-index: 100;
  grid-template-columns: 1.1fr 1fr;
}
.lg-l {
  background: linear-gradient(150deg, #0c1e2c 0, #0e4a57 60%, #0e7c86 130%);
  color: #fff;
  padding: 44px 52px;
  flex-direction: column;
  justify-content: space-between;
}
.lg-l h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  max-width: 470px;
  margin-bottom: 14px;
  color: #fff;
  animation: rise 0.9s var(--ease) backwards;
}
.lg-l p {
  color: #b8d0d8;
  max-width: 420px;
  margin: 0;
}
.lg-r {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bs-tertiary-bg);
  overflow: auto;
}
#login .lc {
  background: var(--bs-body-bg);
  border-radius: 18px;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(15, 30, 43, 0.1);
}
#login .lc h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}
#login label {
  font-size:0.75rem;
  margin: 14px 0 4px;
}
#login .btn {
  width: 100%;
  margin-top: 20px;
  padding: 0.65rem;
}
@media (max-width: 900px) {
#login {
    grid-template-columns: 1fr;
  }
.lg-l {
    display: none;
  }
}
@media (max-width: 760px) {
.app {
    flex-direction: column;
  }
aside {
    width: 100%;
    height: auto;
    position: static;
    overflow-x: auto;
    padding: 10px;
  }
.logo {
    padding: 2px 8px 10px;
  }
#nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
#nav .nav-link {
    white-space: nowrap;
  }
main {
    padding: 16px;
  }
}
#login label {
  font-weight: 500;
}
#nav .nav-link {
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
#nav .nav-link:hover {
  transform: translateX(3px);
}
#login {
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
#login.out {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}
#login .lc {
  animation: rise 0.8s var(--ease) 0.1s backwards;
}
.lg-l p {
  animation: rise 0.9s var(--ease) 0.15s backwards;
}
.lg-l {
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0/26px
      26px,
    radial-gradient(60% 50%at 75% 35%, rgba(20, 170, 182, 0.28), transparent),
    linear-gradient(150deg, #0c1e2c 0, #0e4a57 60%, #0e7c86 130%) !important;
}
.lg-l svg.map {
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 8px 0;
}
.lg-l svg .rt {
  animation: dashm 7s linear infinite;
}
.lg-l svg .halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 3s ease-out infinite;
}
.lgd {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size:0.8125rem;
  color: #b8d0d8;
  align-items: center;
}
.lgd i {
  display: inline-block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}
.lgd .ms {
  margin-left: auto;
  opacity: 0.7;
}
.lg-l > div:nth-child(2) {
  margin-top: 34px;
}
.lg-l {
  gap: 8px;
}
/* Боковое меню: кнопка сворачивания и режим узкой панели с иконками */
.side-toggle{position:absolute;top:26px;right:-14px;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--bs-body-bg);color:var(--mute);display:grid;place-items:center;box-shadow:0 2px 8px rgba(8,19,28,.25);cursor:pointer;z-index:5;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.side-toggle:hover{background:var(--pri-fill);border-color:var(--bs-primary);color:#fff;box-shadow:0 4px 14px rgba(14,124,134,.45)}
.side-toggle:active{transform:scale(.92)}
.side-toggle svg{transition:transform .35s var(--ease)}
.app.min .side-toggle svg{transform:rotate(180deg)}
.side-bot{margin-top:auto;padding-top:14px}
@media(min-width:761px) {
.app.min aside{width:78px;padding-left:12px;padding-right:12px}
.app.min .logo{justify-content:center;padding-left:0;padding-right:0}
.app.min .logo>span:last-child{display:none}
.app.min #nav .nav-link{justify-content:center;padding:.7rem 0;position:relative}
.app.min #nav .nav-link span{display:none}
.app.min #nav .nav-link:hover{transform:none}
.app.min #nav .nav-link::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-4px);background:#15303f;border:1px solid rgba(255,255,255,.1);color:#fff;font-size:0.8125rem;font-weight:500;padding:.4rem .7rem;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:30}
.app.min #nav .nav-link:hover::after{opacity:1;transform:translateY(-50%)}
}
@media(max-width:760px) {
.side-toggle,.side-bot{display:none}
}
/* Меню профиля внизу левого меню */
.pm{position:relative;margin-bottom:8px}
.pm-card{display:flex;align-items:center;gap:10px;width:100%;padding:.5rem .6rem;border:0;border-radius:12px;background:rgba(255,255,255,.05);color:#e6eef5;text-align:left;transition:background-color .2s}
.pm-card:hover,.pm.open .pm-card{background:rgba(255,255,255,.11)}
.pm-card .av{background:var(--pri-fill);color:#fff}
.pm-txt{flex:1;min-width:0;line-height:1.25}
.pm-txt b{display:block;font-size:0.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-txt small{color:#8fa9b8;font-size:0.75rem}
.pm-chev{color:#8fa9b8;display:grid;transition:transform .25s var(--ease)}
.pm.open .pm-chev{transform:rotate(180deg)}
.pm-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px rgba(8,19,28,.35);padding:6px;display:none;z-index:40}
.pm.open .pm-menu{display:block;animation:pop .22s var(--ease)}
.pm-item{display:flex;align-items:center;gap:10px;width:100%;padding:.55rem .7rem;border:0;background:none;border-radius:9px;color:inherit;font-size:0.9rem;text-align:left;text-decoration:none;transition:background-color .15s}
.pm-item:hover{background:var(--bs-tertiary-bg)}
.pm-item svg{color:var(--mute);flex-shrink:0}
.pm-item.out,.pm-item.out svg{color:var(--bs-danger)}
.pm-item.out:hover{background:var(--bs-danger-bg-subtle)}
.pm-sep{height:1px;background:var(--line);margin:6px 2px}
@media(min-width:761px) {
.app.min .pm-card{justify-content:center;padding:.5rem 0}
.app.min .pm-txt,.app.min .pm-chev{display:none}
.app.min .pm-menu{left:calc(100% + 14px);right:auto;bottom:0;width:240px}
}
@media(max-width:760px) {
.side-bot{display:block!important;margin:0 0 0 auto;padding:0;border:0}
.pm{margin:0}
.pm-card{width:auto;padding:.3rem;background:none}
.pm-txt,.pm-chev{display:none}
.pm-menu{position:fixed;left:auto;right:10px;top:58px;bottom:auto;width:240px}
}
/* Справочники */
#nav .nav-link{white-space:nowrap}
/* Выпадающее меню профиля: безопасное положение на любых экранах */
.pm-menu{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
#login{overflow:auto}
@media(max-height:760px) and (min-width:761px) {
aside #nav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
}
/* Меню профиля: компактное, роли для демонстрации сворачиваются */
.pm-menu{overflow-y:visible}
.pm-th{display:flex;align-items:center;justify-content:space-between;padding:.45rem .7rem;font-size:0.9rem}
.pm-seg{display:inline-flex;background:var(--bs-tertiary-bg);border-radius:10px;padding:2px;gap:2px}
.pm-seg button{border:0;background:none;padding:.28rem .55rem;border-radius:8px;color:var(--bs-secondary-color);display:grid;place-items:center;font-size:0.75rem;font-weight:600;transition:background-color .2s,color .2s}
.pm-seg button.on{background:var(--bs-body-bg);color:var(--bs-primary);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.lg-r{position:relative}
.lg-th{position:absolute;top:18px;right:18px;z-index:2;display:flex;gap:10px}
.tick{display:flex;gap:20px;align-items:center;padding:8px 28px;margin:-24px -28px 20px;background:#0c1e2c;color:#b4c4d1;font-size:0.75rem;white-space:nowrap;overflow:hidden}
.tick b{color:#fff;font-weight:600;margin-left:3px}
.tick .sp{flex:1}
.tick .tk-g b{color:#7bd39a}
.tick .tk-r{color:#ff8a80}
[data-bs-theme=dark] .tick{background:#07111a}
@media(max-width:760px) {
.tick{display:none}
}
@media(min-width:761px) {
.app.min aside{width:74px;padding-left:12px;padding-right:12px}
.app.min #nav .nav-link{width:48px;height:44px;margin:0 auto;padding:0;justify-content:center}
.app.min #nav .nav-link.active{background:var(--pri-fill);color:#fff;box-shadow:0 6px 18px rgba(14,124,134,.5)}
.app.min #nav .nav-link.active::before{display:none}
}
/* Карточки цифр B и центр событий */
.top .tl{margin-right:auto}
.top{gap:12px}
/* Кликабельные верхняя полоса и цифры; таблицы без лишней прокрутки */
.tkb{border:0;background:none;color:inherit;font:inherit;padding:.15rem .5rem;margin:0 -.5rem;border-radius:8px;white-space:nowrap;transition:background-color .15s}
.tkb:hover{background:rgba(255,255,255,.12);color:#fff}
.tkb:focus-visible{box-shadow:0 0 0 2px #3bc2cc}
main .wrap:not(#twrap) td{white-space:normal}
@media(max-width:1200px) {
main .wrap:not(#twrap) th,main .wrap:not(#twrap) td{padding-left:.5rem;padding-right:.5rem;font-size:0.9rem}
}
[data-bs-theme=dark] #nav .nav-link.active,[data-bs-theme=dark] .app.min #nav .nav-link.active{background:var(--pri-solid);color:#fff}
[data-bs-theme=dark] .pm-card .av,[data-bs-theme=dark] .av{color:#fff}
.pm-card .av{background:var(--pri-solid)}
/* Сдвиг пункта при наведении не должен вызывать горизонтальную прокрутку меню. */
aside #nav { overflow-x: hidden; }
/* Подсказку свёрнутого меню показывает .side-tip: встроенная подсказка макета обрезается краем меню. */
.app.min #nav .nav-link::after { display: none; }
.side-tip { position: fixed; z-index: 1080; transform: translateY(-50%); padding: 5px 10px; border-radius: 8px; background: #0e1e2b; color: #fff; font-size: 0.8125rem; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); animation: appear 0.15s var(--ease) both; }
/* Строка состояния из макета. */
.tick a.tkb { color: inherit; text-decoration: none; }
.tick a.tkb:hover b { text-decoration: underline; }
#page-error { margin-bottom: 16px; }
/* На странице записи (рейс, груз, поставщик) заголовок — в шапке записи, верхний не повторяет его. */
body.record-page main > .top { display: none; }
@media (prefers-reduced-motion: reduce) {
.appear, .side-tip, .blink { animation: none; }
}