/* Панель редактирования маршрута. Меняйте этот файл — просмотр не затронется. */

/* Панель редактирования: только описание и объекты (медиа и треки — в форме информации). */
.route-edit-panel #route_l1_slot_media,
.route-edit-panel #route_l1_slot_track,
.route-edit-panel #route_l1_panel_media,
.route-edit-panel #route_l1_panel_track{
    display: none !important;
}

.route-edit-panel:not(.route-form--step2) .route-constructor-bookmarks{
    display: none;
}

/* Скрыта до открытия редактора */
#map > .route-edit-panel.route-ui-constructor-hidden{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Контейнер на правом краю карты: drawer слева, rail справа (как route-view-panel) */
#map > .route-edit-panel.route-form-with-tabs:not(.route-ui-constructor-hidden){
    --route-view-rail-w: 2.85rem;
    --route-view-drawer-w: 400px;
    --route-panel-bg: rgba(24, 29, 32, 0.96);
    --route-panel-border: rgba(255, 255, 255, 0.12);
    --route-view-tab-h-standard: 4.9rem;
    --route-view-tab-pad-inline: 0.62rem;
    --route-view-tab-pad-block: 0.32rem;
    --route-view-map-r: 10px;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--route-view-rail-w) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none;
    z-index: 9;
    overflow: visible;
    transform: none !important;
    flex-direction: unset !important;
    align-items: unset !important;
    gap: 0 !important;
}

#map > .route-edit-panel.route-form-with-tabs:not(.route-ui-constructor-hidden).route-edit-panel--drawer-open{
    width: calc(var(--route-view-rail-w) + var(--route-view-drawer-w)) !important;
}

.route-edit-panel .route-edit-drawer{
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--route-view-rail-w);
    width: var(--route-view-drawer-w);
    z-index: 2;
    overflow: hidden;
    display: none;
    pointer-events: none;
    border-radius: var(--route-view-map-r, 10px) 0 0 var(--route-view-map-r, 10px);
    background: rgb(24, 29, 32);
}

.route-edit-panel--drawer-open .route-edit-drawer{
    display: block !important;
    pointer-events: auto;
}

.route-edit-panel .route-edit-map-rail{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--route-view-rail-w);
    z-index: 3;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 0;
    margin: 0;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 var(--route-view-map-r, 10px) var(--route-view-map-r, 10px) 0 !important;
    background: rgba(12, 14, 16, 0.94) !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    flex: none !important;
    min-width: var(--route-view-rail-w) !important;
    max-width: var(--route-view-rail-w) !important;
    align-self: auto !important;
    height: auto !important;
}

.route-edit-panel .route-edit-map-rail > .route-constructor-vtabs__slot{
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible;
}

.route-edit-panel .route-edit-map-rail > .route-constructor-vtabs__slot:last-of-type{
    border-bottom: none !important;
}

.route-edit-panel .route-edit-map-rail > .route-constructor-vtabs__slot:hover{
    background: rgba(255, 255, 255, 0.04) !important;
}

.route-edit-panel .route-edit-map-rail > .route-constructor-vtabs__slot--active,
.route-edit-panel .route-edit-map-rail > .route-constructor-vtabs__slot.route-step2-l1-tabs__slot--active{
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0 !important;
    height: auto !important;
    margin: 0;
    box-sizing: border-box;
    padding-block: var(--route-view-tab-pad-block);
    padding-inline: var(--route-view-tab-pad-inline);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-transform: uppercase;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.35;
    white-space: nowrap;
    color: rgba(248, 250, 252, 0.82);
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.route-edit-panel .route-edit-map-rail #route_l1_slot_objects .route-constructor-vtabs__tab{
    min-height: var(--route-view-tab-h-standard) !important;
    height: var(--route-view-tab-h-standard) !important;
}

.route-edit-panel .route-edit-map-rail #route_l1_slot_main .route-constructor-vtabs__tab{
    min-height: auto !important;
    height: auto !important;
    padding-inline: 0.68rem;
}

.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab-label{
    display: inline !important;
    visibility: visible !important;
}

.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__slot--active .route-constructor-vtabs__tab,
.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab.route-constructor-vtabs__tab--active,
.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab.route-step2-l1-tabs__tab--active{
    color: var(--route-bookmark-accent, #fbca1f);
    background: transparent !important;
    box-shadow: none !important;
}

.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__slot--active .route-constructor-vtabs__tab-label,
.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab.route-constructor-vtabs__tab--active .route-constructor-vtabs__tab-label,
.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__tab.route-step2-l1-tabs__tab--active .route-constructor-vtabs__tab-label{
    color: inherit;
}

.route-edit-panel .route-edit-map-rail .route-constructor-vtabs__slot--no-vis .route-constructor-vtabs__tab{
    flex: 0 0 auto;
    min-height: var(--route-view-tab-h-standard) !important;
    height: var(--route-view-tab-h-standard) !important;
}

#map > .route-edit-panel .route-constructor-panel.add-container{
    align-self: stretch !important;
    max-width: none !important;
    border-radius: var(--route-view-map-r, 10px) 0 0 var(--route-view-map-r, 10px) !important;
}

.route-edit-panel .route-constructor-vpanels{
    border-radius: 0 0 var(--route-shell-r) var(--route-shell-r);
}

.route-edit-panel .route-step2-tabs__panels{
    border-radius: 0 0 var(--route-shell-r) var(--route-shell-r);
    margin-left: 0;
    margin-right: 0;
}

.route-edit-panel .route-constructor-panel.add-container,
.route-edit-panel .route-constructor-panel.add-container.mein-container{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    flex: none !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.65rem !important;
    box-sizing: border-box;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: var(--route-view-map-r, 10px) 0 0 var(--route-view-map-r, 10px) !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgb(24, 29, 32) !important;
    background-color: rgb(24, 29, 32) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
}

.route-edit-panel #routeForm{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.route-edit-panel #step2{
    flex: 1 1 0%;
    min-height: 0;
    /* JS выставляет style.display=block — без !important flex-цепочка не работает */
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.route-edit-panel #routeAreasBlock.route-areas-block{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0 !important;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.route-edit-panel .route-constructor-shell{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.route-edit-panel .route-constructor-vpanels{
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.55rem 0.5rem;
    box-sizing: border-box;
}

.route-edit-panel .route-constructor-vpanel:not([hidden]){
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.route-edit-panel #route_l1_panel_main:not([hidden]){
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.route-edit-panel #route_basics_anchor_step2{
    display: none;
}

/* Вкладка «Описание»: поле на всю высоту панели, прокрутка внутри */
.route-edit-panel #route_l1_panel_main:not([hidden]) > .route-basics{
    flex: 1 1 0% !important;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
    gap: 0.65rem;
}

.route-edit-panel #route_l1_panel_main:not([hidden]) > .route-basics > .form-group:not(#div_route_description){
    flex: 0 0 auto;
    margin: 0 !important;
}

.route-edit-panel #route_track_complexity_block{
    margin: 0 !important;
}

.route-edit-panel #route_l1_panel_main #div_route_description{
    flex: 1 1 0% !important;
    min-height: 0;
    align-self: stretch;
    width: 100%;
    position: relative;
    margin: 0 !important;
    overflow: hidden;
}

/* Поле описания: toolbar + редактор до низа панели (над подписью автора) */
.route-edit-panel #route_l1_panel_main #div_route_description .route-description-editor{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.route-edit-panel #route_l1_panel_main #div_route_description .route-description-toolbar,
.route-edit-panel #route_l1_panel_main #div_route_description #route_desc_emoji_panel{
    flex: 0 0 auto;
}

.route-edit-panel #route_l1_panel_main .route-description-editable{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1 1 0;
    box-sizing: border-box;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    resize: none;
    overflow-y: auto;
    margin: 0;
    color: #f1f5f9;
}

/* Отступ снизу под подпись автора */
.route-edit-panel #route_l1_panel_main #div_route_description:has(#route_authoring_credits:not([hidden])) .route-description-editable{
    padding-bottom: 2.35rem;
}

/* Подписи автора/редактора внизу растянутого поля */
.route-edit-panel #route_l1_panel_main #div_route_description .route-authoring-credits{
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.45rem;
}

.route-edit-panel #route_l1_panel_objects:not([hidden]){
    min-height: 0;
}

.route-edit-panel #route_l1_panel_objects:not([hidden]) .route-step2-tabs__panels{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
}

.route-edit-panel .route-step2-tabs__panel:not([hidden]){
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.route-edit-panel #route_l1_panel_media:not([hidden]),
.route-edit-panel #route_l1_panel_track:not([hidden]){
    min-height: 0;
}

.route-edit-panel .route-areas-toolbar{
    flex-shrink: 0;
}

.route-edit-panel .route-step2-tabs{
    flex-shrink: 0;
}

.route-edit-panel .route-areas-list{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
}

.route-edit-panel .route-areas-list.route-areas-list--scrollable,
.route-edit-panel #route_gps_tracks_list.route-areas-list.route-areas-list--scrollable{
    overflow-y: auto;
    max-height: none !important;
}

.route-edit-panel .route-track-panel-body{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.route-edit-panel .route-track-panel-main{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.route-edit-panel #route_gps_tracks_list.route-track-panel__list{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
}

.route-edit-panel .route-track-detail--dock{
    flex: 0 0 auto;
    margin-top: auto;
    min-height: 0;
    overflow-y: auto;
}

.route-edit-panel .route-areas-list.route-areas-list--scrollable,
.route-edit-panel #route_gps_tracks_list.route-areas-list.route-areas-list--scrollable{
    overflow-y: auto;
    max-height: none !important;
}

.route-edit-panel .route-track-detail{
    flex: 0 0 auto;
}

.route-edit-panel .form-actions{
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.route-edit-panel #route_media_list.route-media-list.route-areas-list{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.route-edit-panel #route_media_list.route-media-list.route-areas-list.route-areas-list--scrollable{
    max-height: none !important;
}

.route-edit-panel .route-areas-instruments{
    flex-shrink: 0;
}

/* Шаг 2: панель к верхнему краю карты (как правая колонка ~10px) */
.route-edit-panel .route-constructor-vpanels,
.route-edit-panel .route-constructor-shell,
.route-edit-panel #routeForm,
.route-edit-panel #step2{
    min-width: 0;
    overflow-x: clip;
}

.route-edit-panel .route-constructor-panel.add-container .track-constructor-title,
.route-edit-panel .route-constructor-panel.add-container .track-constructor-title{
    margin-top: 0;
}

/* Редактирование: скрыть дублирующий блок координат под полем */
.route-edit-panel .route-constructor-panel.add-container .route-basics .coordinates-info{
    display: none;
}