/* Навигация корпоративной системы «Долгов Авто».
 *
 * Всё под .dgn — чтобы стили страницы и панели не смешивались ни в одну
 * сторону. Цвета заданы явно, без переменных страницы: панель обязана
 * выглядеть одинаково на всех витринах.
 *
 * Почему так, а не иначе:
 *  — названия отделов НЕ стоят в строке рядом с кнопками. В прошлой версии
 *    строка читалась как «Логистика Диспетчерская Продажи Продажи Структура»,
 *    где не отличить подпись от кнопки. Отдел теперь виден при наведении и в
 *    мобильном меню, а в строке работает порядок и разделители;
 *  — активный пункт выделен заливкой, а не только линией снизу: заливка
 *    заметна боковым зрением, линия — нет;
 *  — иконки нарисованы прямо здесь. Внешние шрифты значков грузить нельзя:
 *    витрины закрыты авторизацией и живут на трёх разных доменах.
 */
.dgn, .dgn *{box-sizing:border-box}
.dgn{
  position:sticky; top:0; z-index:9999;
  background:#fff; border-bottom:1px solid #e5e7eb;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13.5px; line-height:1.3; color:#374151;
}
.dgn-in{max-width:1280px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; gap:14px}

.dgn-brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:#111827; white-space:nowrap; flex:none}
.dgn-mark{width:26px; height:26px; border-radius:8px; background:#111827; color:#fff;
          display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; letter-spacing:.02em}
.dgn-brand-name{font-weight:650; font-size:14px}

.dgn-tabs{display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none}
.dgn-tabs::-webkit-scrollbar{display:none}
.dgn-tab{
  display:flex; align-items:center; gap:7px; flex:none;
  padding:7px 11px; border-radius:9px;
  color:#4b5563; text-decoration:none; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.dgn-tab svg{width:16px; height:16px; flex:none; opacity:.75}
.dgn-tab:hover{background:#f3f4f6; color:#111827}
.dgn-tab:hover svg{opacity:1}
.dgn-tab.on{background:#eff6ff; color:#1d4ed8; font-weight:600}
.dgn-tab.on svg{opacity:1}
.dgn-tab:focus-visible{outline:2px solid #2563eb; outline-offset:1px}
.dgn-div{width:1px; height:20px; background:#e5e7eb; margin:0 5px; flex:none}

.dgn-right{margin-left:auto; display:flex; align-items:center; gap:12px; flex:none}
.dgn-user{color:#6b7280; font-size:12.5px; white-space:nowrap}
.dgn-out{color:#4b5563; font-size:12.5px; text-decoration:none; padding:5px 9px; border-radius:8px}
.dgn-out:hover{background:#f3f4f6; color:#111827}

.dgn-burger{display:none; align-items:center; justify-content:center; width:38px; height:38px;
            margin-left:auto; border:1px solid #e5e7eb; border-radius:9px; background:#fff; cursor:pointer; color:#374151}
.dgn-burger:hover{background:#f9fafb}
.dgn-burger svg{width:18px; height:18px}

/* Телефон: строка табов уезжает в выпадающее меню, где подписи отделов уже
   уместны — там они стоят заголовками над своими пунктами, а не в одну
   строку с ними. */
@media (max-width:820px){
  .dgn-burger{display:flex}
  .dgn-right{display:none}
  .dgn-tabs{
    display:none; position:absolute; left:0; right:0; top:56px;
    background:#fff; border-bottom:1px solid #e5e7eb; box-shadow:0 10px 24px rgba(17,24,39,.08);
    flex-direction:column; align-items:stretch; gap:0; padding:8px; overflow:visible;
  }
  .dgn.open .dgn-tabs{display:flex}
  .dgn-tab{border-radius:8px; padding:11px 12px}
  .dgn-div{display:none}
  .dgn-dept{
    display:block; padding:10px 12px 4px; color:#9ca3af;
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  }
  .dgn-mobile-user{display:block; border-top:1px solid #f3f4f6; margin-top:6px; padding:10px 12px 4px; color:#6b7280; font-size:12.5px}
}
@media (min-width:821px){
  .dgn-dept, .dgn-mobile-user{display:none}
}