.header-1 {color:#fff; position: fixed; left:0; top:0; bottom: 0; overflow: auto; z-index: 10; width: 64px; font-size: 0; padding: .5rem 0; transition: .3s;
    background: url(/assets/bg.jpeg) no-repeat;}
.header-1:hover {width: 330px; font-size: 1rem;}
.header-1:hover .d-md-block {display: block !important;}
.header-1:hover .d-md-flex {display: flex !important;}
.header-1:hover .d-md-none {display: none !important;}
body.site > .module:not(.header-1) {margin-left: 64px;}
@media (min-width: 768px) {
    .header-1 {width: 230px; font-size: 1rem;}
    body.site > .module:not(.header-1) {margin-left: 230px;}
}
@media (min-width: 992px) {
    .header-1 {width: 330px;}
    body.site > .module:not(.header-1) {margin-left: 330px;}
}


.header-1 a {color:#fff;}

header #logo {text-align:center;}
.header-1 .nav-tabs {flex-wrap:nowrap; border-bottom:none; justify-content: space-between; width: 100%;}
.header-1 .nav-tabs > li {display: block; margin: 0; padding: 0; width: 33.33%; text-align: center;}
.header-1 .nav-tabs > li .nav-link {display: block; margin: 0; padding: .5rem; width: 100%; overflow: hidden; text-overflow: ellipsis;}
.header-1 .nav-tabs.nav-justified > li {width: 50%;}
/* активная вкладка на белом фоне — белый текст на ховере делал её нечитаемой */
.header-1 .nav-tabs > li .nav-link:not(.active):hover {color:#fff;}

.header-1 .bootstrap-select {max-width: 320px;}
.header-1 .bootstrap-select a {color:#333;}

header .sidebar-glass {padding: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; }
header .sidebar-glass +.sidebar-glass,
header .sidebar-glass:has( + .sidebar-glass) { margin-bottom: 1rem; }
header .sidebar-glass .photo {width: 3rem; height: 3rem; background:#fff; border-radius:50%; object-fit: contain; object-fit: contain; object-position: bottom; max-width: fit-content;}
header .sidebar-glass .user-title {white-space: nowrap; margin:0 .5rem;}

header .menu .sidebar-glass ul {margin:0; padding:0; position:relative;}
/* position:relative — точка отсчёта для бейджа непрочитанных в свёрнутом меню.
   Иконке пункта (абсолютный a::before) это не мешает: li той же ширины, что ul,
   от которого она считалась раньше. */
header .menu .sidebar-glass ul li {margin:0; padding:0; display:block; position:relative;}
header .menu .sidebar-glass ul li a {display:flex; justify-content:space-between; align-items:center; color:#fff; padding:1.5rem .5rem;  border-radius:.5rem;}
header .menu .sidebar-glass ul li a.logout-modal div {padding-right:10px;}
header .menu .sidebar-glass ul li.active a,
header .menu .sidebar-glass ul li:hover a {background:#fff; color: var(--color-black);}
header .menu .sidebar-glass ul li.selected a img,
header .menu .sidebar-glass ul li:hover a img {filter: grayscale(1) invert(1);}
@media screen and (max-width: 576px) {
    body header.hide.hover {display: flex!important; flex-direction: column;}
    body header.hide.hover #nav-tabContent {flex: 1 1 auto; display: flex!important; flex-direction: column;}
    body header.hide.hover #left_menu {flex: 1 1 auto; display: flex; flex-direction: column;}
    body header.hide.hover .tab-pane { flex: 1 1 auto; }
    body header.hide.hover .tab-pane:last-child {flex: 0 1 auto; background-color:#2B64F6; position: sticky; padding-bottom: 0px; bottom:9px; margin-top: 20px;}
    body header.hide.hover .tab-pane:last-child::before { content: ''; display: block; width: 100%; background: linear-gradient(to bottom, rgba(255,0,0,0), #0D5BBC); height: 20px; margin-top: -20px; }
    body header.hide.hover .tab-pane:last-child::after { content: ''; display: block; width: 100%; background: #0D5BBC; height: 9px; margin-bottom: -9px; }
    header #left_menu ul.bottom-tab {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background: #0D5BBC;}
    header #left_menu ul.bottom-tab li {display: none;}
    header #left_menu ul.bottom-tab li.minimize {order:1; display: inline-block;}
    header #left_menu ul.bottom-tab li.minimize.hideSidebar {order:2;}
}

header #left_menu.shadow ul {-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
header #left_menu ul li.hideSidebar a>div:first-child {padding-right: 10px;}
header #left_menu ul li.hideSidebar .arrow {width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.75); border-right: none; border-bottom: none; transform: translateX(-12px) rotate(-45deg); transition: .3s; margin-right: -10px; margin-left: 10px;}
header #left_menu ul li.hideSidebar:hover .arrow {border-color:var(--color-black);}
header .shadow {-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));}

@media (hover: none) {
    header #left_menu ul li.hideSidebar:hover a {background: transparent; color: inherit;}
    header #left_menu ul li.hideSidebar:hover .arrow {border-color: rgba(255, 255, 255, 0.75);}
}

.sidebar-light header {background: url(/upload/bg.jpeg) no-repeat; position:fixed; top:0; left:0; bottom:0; width:64px; z-index:100; transition:.3s;}

/* .sidebar-light header {transition: 0s;} */
/* .sidebar-light header #logo.sidebar-glass {padding: 0;} */
.sidebar-light header #logo+.sidebar-glass.bottom_menu { padding: 5px;}
.sidebar-light header #logo+.sidebar-glass .photo { --photo-size: 44px; width: var(--photo-size); height: var(--photo-size);}

/* .sidebar-light header:hover, */
.sidebar-light header.hover {width:300px;}
.sidebar-light .container-fluid > .row > .col-10 {width:100%; margin-left:64px;}
.sidebar-light header nav {display:none;}
.sidebar-light header .sidebar-glass .user-title + a,
.sidebar-light header .sidebar-glass .user-title,
.sidebar-light header .balance {display: none!important;}
.sidebar-light header #left_menu li div {display:none;}
.sidebar-light header #left_menu li div.arrow {display:block; transform: translateX(2px) rotate(135deg); margin-right: 7px; margin-left: 0px;}

.sidebar-light header.hover #left_menu li div {display:block;}
.sidebar-light header.hover nav {display:block;}
.sidebar-light header.hover .sidebar-glass .user-title + a,
.sidebar-light header.hover .sidebar-glass .user-title {display: block!important;}
.sidebar-light header.hover .balance {display: flex!important;}
.sidebar-light header .sidebar-glass .photo {width:1.5rem; height:1.5rem;}
.sidebar-light header.hover .sidebar-glass .photo {width:3rem; height:3rem;}
.sidebar-light header .registration {display:none}
.sidebar-light header.hover .registration {display:block}
.sidebar-light header.hover nav,
.sidebar-light header.hover nav {display: block;}

.bootstrap-select .dropdown-menu {width: calc(100% + 5rem);}





header #menu-client ul li a::before {content:none; position: absolute; right: 50%; transform: translateX(50%);}
header:hover #menu-client ul li a::before {right: .5rem; transform: none;}
header #menu-client ul li a::before {content:url('/assets/icons/menu-icon/003.svg');}
header #menu-client ul li:nth-child(2) a::before {content:url('/assets/icons/menu-icon/004.svg');}
header #menu-client ul li:nth-child(3) a::before {content:url('/assets/icons/menu-icon/027.svg');}
header #menu-client ul li:nth-child(4) a::before {content:url('/assets/icons/menu-icon/021.svg');}
header #menu-client ul li:nth-child(5) a::before {content:url('/assets/icons/menu-icon/006.svg');}
header #menu-client ul li:nth-child(6) a::before {content:url('/assets/icons/menu-icon/020.svg');}
header #menu-client ul li:nth-child(7) a::before {content:url('/assets/icons/menu-icon/011.svg');}
header #menu-client ul li:nth-child(8) a::before {content:url('/assets/icons/menu-icon/026.svg');}
header #menu-client ul li:nth-child(9) a::before {content:url('/assets/icons/menu-icon/028.svg');}
header #menu-client ul li.active a::before {filter: invert(1);}
header #menu-client ul li a:hover::before {filter: invert(1);}

/* Бейдж непрочитанных сообщений и иконка пункта дерутся за правый край:
   иконка это абсолютный a::before, прижатый вправо, а бейдж — последний
   flex-элемент ссылки. Уводим бейдж левее иконки. В меню поставщика иконок
   нет, поэтому отступ только здесь. */
header #menu-client ul li a .js-menu-unread {margin-right: 2rem;}

/* Свёрнутое меню (64px): текста пункта не видно, и бейдж с числом уезжает
   вместе с ним. Оставляем от него точку в углу иконки — число в 8 пикселей
   всё равно не прочитать, а факт непрочитанного виден. */
.sidebar-light header:not(.hover) .menu .sidebar-glass ul li a .js-menu-unread {
	position: absolute;
	top: 50%;
	right: .3rem;
	margin: -.85rem 0 0 0;
	width: .5rem;
	height: .5rem;
	min-width: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	border-radius: 50%;
}

@media (min-width: 768px) {
    header #menu-client ul li a::before {right: .5rem;transform: none;}
}

header .min-logo {background: #fff; padding: .5rem; border-radius: .5rem;}
header .min-logo img {height: 30px;}
.unslctbl {white-space: nowrap; overflow: auto;}
/* ── Блок пользователя (bottom_menu): FA-иконки + адаптация ── */
header .sidebar-glass.bottom_menu .user-title { min-width: 0; }
header .sidebar-glass.bottom_menu .user-name {
    text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
header .sidebar-glass.bottom_menu .user-company .bootstrap-select { max-width: 100%; width: 100%; }

/* иконка настроек */
header .sidebar-glass.bottom_menu .settings-link {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; opacity: .8; transition: opacity .15s;
}
header .sidebar-glass.bottom_menu .settings-link:hover { opacity: 1; }
header .sidebar-glass.bottom_menu .settings-link i { font-size: 1.2rem; }

/* кнопка пополнения баланса */
header .sidebar-glass.bottom_menu .addBalance {
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--color-base, #365edc); color: #fff; flex: 0 0 auto;
}
header .sidebar-glass.bottom_menu .addBalance i { font-size: .8rem; color: #fff; }
header .sidebar-glass.bottom_menu .balance a { min-width: 0; }


[data-color="#000000FF"] {color:#000000FF}

.create textarea {text-align: center; overflow: hidden;}

.main-page .wrap-sort {background: #F8FAFB; border-radius: 1rem; padding: 1rem 16px; margin: -1rem -1rem 0 -1rem; position: sticky; top: -1rem; z-index: 10; margin-bottom: 0rem;}

.main-page > :first-child .card:hover {background: #2B64F6; color: #fff;}
.main-page > :first-child .card {cursor: pointer; transition: .3s;}
.main-page .card-dashed {border: 1px dashed #024CA9; box-shadow: 2px 2px 2px 0px rgba(2, 76, 169, 0.25); border-radius: 15px; padding: 8px; gap: 5px;}

/* Оверлей (затемнение) */
.popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 15; visibility: hidden;}
.popup-overlay.active {background: rgba(0, 0, 0, 0.5); visibility: visible;}
.side-popup {position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; box-shadow: -2px 0 10px rgba(0,0,0,0.1); z-index: 15; transition: right 0.3s ease;}
.side-popup.active {right: 0;}
.popup-content {padding: 20px; height: 100%; overflow-y: auto; position: relative;}
.close-btn {position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; cursor: pointer; color: #666; transition: color 0.2s; z-index: 15;}
.close-btn:hover {color: #000;}

.create .overflow_auto {margin-bottom: 1rem;}
@media (min-width: 768px) {
    .create .overflow_auto {height: calc(100vh - 270px); padding-right: 1rem; margin-right: -1rem; margin-bottom:0; overflow-y: auto; }
}
.create .overflow_auto img {height:100px; width: 100%; object-fit: contain;}

.create #createMap {height: 50vh; margin: -1rem -1rem 0; border-radius:1rem; overflow:hidden;}
@media (min-width: 768px) {
    .create #createMap {height: calc(100% + 2rem); margin: -1rem -1rem -1rem 0;}
}

/* ── Итоговый расчёт заказа ── */
.order-summary {border:1px solid #e3e8ef; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(2,76,169,.06);}
.order-summary .os-head {background:linear-gradient(135deg,#2B64F6,#024CA9); color:#fff; padding:18px 20px;}
.order-summary .os-head-label {font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
.order-summary .os-head-sum {font-size:1.9rem; font-weight:700; line-height:1.15; margin-top:2px;}
.order-summary .os-head-math {font-size:.76rem; opacity:.82; margin-top:8px; word-break:break-word;}
.order-summary .os-meta {padding:16px 20px; display:flex; flex-direction:column; gap:12px;}
.order-summary .os-meta-row {display:flex; align-items:flex-start; gap:12px;}
.order-summary .os-meta-icon {color:#2B64F6; width:18px; flex:0 0 18px; text-align:center; margin-top:3px;}
.order-summary .os-meta-body {display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.order-summary .os-meta-label {font-size:.7rem; color:#93a0b5; text-transform:uppercase; letter-spacing:.03em;}
.order-summary .os-meta-body > span:last-child {font-size:.9rem; color:#1f2733; word-break:break-word;}
.order-summary .os-items {padding:4px 20px 8px; border-top:1px dashed #d6deea;}
.order-summary .os-items-head {font-size:.7rem; color:#93a0b5; text-transform:uppercase; letter-spacing:.03em; margin:14px 0 6px;}
.order-summary .os-item {display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:11px 0; border-bottom:1px solid #f0f3f8;}
.order-summary .os-item:last-child {border-bottom:0;}
.order-summary .os-item-title {font-weight:600; font-size:.9rem; color:#1f2733;}
.order-summary .os-item-desc {font-size:.76rem; color:#93a0b5; margin-top:2px;}
.order-summary .os-item-price {text-align:right; flex:0 0 auto;}
.order-summary .os-item-total {font-weight:700; font-size:.95rem; color:#1f2733; white-space:nowrap;}
.order-summary .os-item-calc {font-size:.74rem; color:#93a0b5; margin-top:2px;}
.order-summary .os-total {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:#f6f9fe; font-weight:700; color:#1f2733;}
.order-summary .os-total-sum {font-size:1.2rem; color:#024CA9;}

/* ── Приложенные файлы ── */
.order-attachments {display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.order-attachments:empty {display:none;}
.attach-chip {display:flex; align-items:center; gap:10px; border:1px solid #e3e8ef; border-radius:10px; padding:8px 10px; background:#f8fafc;}
.attach-chip .attach-icon {width:34px; height:34px; flex:0 0 34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; background:#2B64F6; overflow:hidden;}
.attach-chip .attach-icon img {width:100%; height:100%; object-fit:cover;}
.attach-chip.is-doc .attach-icon {background:#6c7a91;}
.attach-chip .attach-body {min-width:0; flex:1;}
.attach-chip .attach-name {font-size:.85rem; color:#1f2733; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.attach-chip .attach-size {font-size:.72rem; color:#93a0b5;}
.attach-chip .attach-remove {border:0; background:none; color:#c0392b; font-size:1rem; line-height:1; padding:4px 6px; cursor:pointer;}
.attach-chip.is-uploading {opacity:.6;}

/* Подсветка автоподставленной даты окончания */
.create input[name="date_end"].date-autofill,
#new-order input[name="date_end"].date-autofill {animation: date-autofill-flash 1.4s ease-out;}
@keyframes date-autofill-flash {
    0%   {background-color: #fff3cd; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .45);}
    100% {background-color: transparent; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, 0);}
}

.b-car {width: 17px; height: 30px; background: url('/assets/images/car.png'); background-repeat: no-repeat; background-size: cover; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
.b-car-direction-n   { transform: translate(-50%, -50%) rotate(0deg); }

.b-car-direction-nne { transform: translate(-50%, -50%) rotate(22.5deg); }
.b-car-direction-ne  { transform: translate(-50%, -50%) rotate(45deg); }
.b-car-direction-nee { transform: translate(-50%, -50%) rotate(67.5deg); }

.b-car-direction-e   { transform: translate(-50%, -50%) rotate(90deg); }

.b-car-direction-see { transform: translate(-50%, -50%) rotate(112.5deg); }
.b-car-direction-se  { transform: translate(-50%, -50%) rotate(135deg); }
.b-car-direction-sse { transform: translate(-50%, -50%) rotate(157.5deg); }

.b-car-direction-s   { transform: translate(-50%, -50%) rotate(180deg); }

.b-car-direction-ssw { transform: translate(-50%, -50%) rotate(202.5deg); }
.b-car-direction-sw  { transform: translate(-50%, -50%) rotate(225deg); }
.b-car-direction-sww { transform: translate(-50%, -50%) rotate(247.5deg); }

.b-car-direction-w   { transform: translate(-50%, -50%) rotate(270deg); }

.b-car-direction-nww { transform: translate(-50%, -50%) rotate(292.5deg);}
.b-car-direction-nw  { transform: translate(-50%, -50%) rotate(315deg);}
.b-car-direction-nnw { transform: translate(-50%, -50%) rotate(337.5deg);}



.login {display: none;}
.nav.nav-tabs {justify-content: center;}