/* =========================================================================
   Карта — пиксельный перенос MapMaster из apps/ontrack.
   Значения сняты из: MapMasterLayout.vue, MapContentMasterLayout.vue,
   MapLayersMaster.vue, MapLayerPanel.vue, контролов и cross-панелей.
   ========================================================================= */

/* ---------- Каркас (MapMasterLayout) ---------- */
.map-master{
  position:relative;flex:1;min-height:0;
  padding-top:8px;background:#fff;
  display:flex;flex-direction:column;
}
.map-master .main-area{position:relative;flex:1;min-height:0;background:#515c4b;overflow:hidden}

/* контейнер maplibre: id-селектор, чтобы перебить .maplibregl-map{position:relative}
   из maplibre-gl.css (он подключается позже и схлопывал контейнер в 0 по высоте) */
#map-gl,.map-gl{position:absolute !important;inset:0}
.map-gl canvas{outline:none}

/* ---------- Стек слоёв (MapLayersMaster): top 16, left 0, z 1011 ---------- */
.map-layers-master{
  position:absolute;top:16px;left:0;z-index:1011;
  display:flex;flex-direction:column;align-items:center;
}
.map-layers-master .stack{
  display:flex;flex-direction:column;
  overflow:hidden;border-radius:0 4px 4px 0;background:#fff;
}
.layer-stack-btn{
  width:40px;height:40px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--text-600);
}
.layer-stack-btn .ao-icon{font-size:18px}
.layer-stack-btn.is-active{background:#D9E3EE;color:var(--primary)}
.layer-stack-btn.is-off{opacity:.5}
/* кнопка добавления слоя: 24×24, rounded, margin 8, вне белого стека */
.layer-add-btn{
  width:24px;height:24px;margin:8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--text-700);box-shadow:var(--shadow-elevation-2);
}
.layer-add-btn .ao-icon{font-size:12px}

/* ---------- Панель слоя (MapLayerPanel): top 12, left 40, z 1010 ---------- */
.map-layer-panel{
  position:absolute;z-index:1010;
  top:12px;left:2.5rem;bottom:72px;
  padding:.25rem;
  transform:translateX(-150%);transition:transform ease-in .5s;
  pointer-events:none;
}
.map-layer-panel.is-active{transform:translateX(0)}
.map-layer-panel .panel-card{
  pointer-events:auto;position:relative;width:18.5rem;height:100%;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-elevation-4);
  display:flex;flex-direction:column;overflow:hidden;
}
.map-layer-panel .close-button{position:absolute;top:1rem;right:1rem;z-index:1}
.map-layer-panel .panel-scroll{flex:1;overflow-y:auto;padding:16px}
.map-layer-panel .panel-title{font-size:16px;font-weight:500;line-height:150%;padding-right:32px}
.map-layer-panel .panel-section{font-size:10px;font-weight:400;line-height:140%;text-transform:uppercase;color:var(--text-700);margin:14px 0 6px}

/* строка объекта слоя */
.layer-obj-row{
  display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:var(--r);
  font-size:12px;font-weight:400;cursor:pointer;
}
.layer-obj-row:hover{background:var(--primary-50)}
.layer-obj-row.is-active{background:rgba(var(--primary-rgb),.25)}
.layer-obj-row .sub{font-size:10px;color:var(--text-600)}

/* ---------- Верхняя правая полоса контролов: top 16, right 0, z 3 ---------- */
.map-top-controls{
  position:absolute;top:16px;right:0;z-index:3;
  display:flex;align-items:center;justify-content:flex-end;
}
.map-top-controls .ctl-group{display:flex;align-items:center;margin:0 8px}

/* одиночная белая кнопка-контрол 24×24 (ao-icon-btn size=small elevated) */
.map-ctl-btn{
  position:relative;width:24px;height:24px;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--text-900);box-shadow:var(--shadow-elevation-2);
  margin:0 4px;
}
.map-ctl-btn .ao-icon{font-size:15px}
.map-ctl-btn.is-open{color:var(--primary)}
.map-ctl-btn:disabled{opacity:.4}

/* сегментированная группа из 4 кнопок (mab-base-controls-buttons) */
.map-ctl-segment{display:flex}
.map-ctl-segment .map-ctl-btn{margin:0;border-radius:0;box-shadow:var(--shadow-elevation-2)}
.map-ctl-segment .map-ctl-btn:first-child{border-radius:4px 0 0 4px}
.map-ctl-segment .map-ctl-btn:last-child{border-radius:0 4px 4px 0}

/* кнопка с текстом (Live, скорость, тип снимка) */
.map-ctl-text-btn{
  height:24px;padding:0 8px;border-radius:var(--r);margin:0 4px;
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--text-900);box-shadow:var(--shadow-elevation-2);
  font-size:12px;font-weight:500;
}
.map-ctl-text-btn .ao-icon{font-size:14px}
.map-ctl-text-btn.is-open,.map-ctl-text-btn.is-active{color:var(--primary)}

/* ---------- Тёмные меню контролов (фон #0D1722) ---------- */
.map-dark-menu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:1012;
  min-width:120px;padding:4px;border-radius:var(--r);
  background:#0D1722;box-shadow:var(--shadow-popover);
}
.map-dark-menu .dm-item{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:6px 8px;border:none;border-radius:2px;
  font-size:10px;font-weight:700;line-height:1;text-align:left;
  color:#fff;background:transparent;cursor:pointer;
  transition:background-color .2s ease-in-out;white-space:nowrap;
}
.map-dark-menu .dm-item:hover{background:rgba(255,255,255,.1)}
.map-dark-menu .dm-item.is-active{color:#000;background:#fff}
.map-dark-menu .dm-item .ao-icon{font-size:12px}
.map-dark-menu .dm-divider{height:1px;margin:2px 4px;background:rgba(255,255,255,.35)}

/* меню прозрачности: фон black, вертикальный слайдер */
.map-opacity-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:1012;
  padding:12px;border-radius:var(--r);background:#000;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.map-opacity-menu input[type=range]{
  writing-mode:vertical-lr;direction:rtl;height:96px;width:18px;accent-color:var(--primary);
}
.map-opacity-menu .val{font-size:10px;color:#fff;font-weight:600}

/* ---------- Cross-панели (легенды/подписи): top 34, z 1010 ---------- */
.map-cross-panel{
  position:absolute;z-index:1010;top:2.125rem;
  max-height:calc(100% - 3rem);padding:.25rem;
  transform:translateX(150%);transition:transform ease-in .5s;
  pointer-events:none;
}
.map-cross-panel.is-active{transform:translateX(0)}
.map-cross-panel--legend{right:1rem}
.map-cross-panel--title{right:3rem}
.map-cross-panel .cross-card{
  pointer-events:auto;margin-top:8px;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-elevation-4);
  max-height:50vh;overflow-y:auto;
}
.map-cross-panel--legend .cross-card{width:204px}
.map-cross-panel--title .cross-card{width:300px}
.map-cross-panel .cross-head{padding:12px;font-size:10px;line-height:140%;text-transform:uppercase;color:var(--text-700)}

/* блок слоя в легенде (MapLegendLayer) */
.legend-layer{position:relative;padding:12px}
.legend-layer+.legend-layer::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:1px;width:calc(100% - 24px);background:#E6EEF3;
}
.legend-layer .ll-title{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:12px;font-weight:400}
.legend-layer .ll-title .ao-icon{font-size:14px;color:var(--text-700)}
/* строка легенды (MapLegendItem) */
.legend-row{display:flex;align-items:center;gap:6px;margin:8px 0;font-size:10px;font-weight:400}
.legend-row .vis-btn{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-700);border-radius:var(--r)}
.legend-row .vis-btn:hover{background:var(--panel-grey)}
.legend-row .vis-btn .ao-icon{font-size:12px}
.legend-row .color-preview{width:16px;height:16px;border-radius:50%;flex:0 0 auto;cursor:pointer;border:1px solid rgba(0,0,0,.08)}
.legend-row b{font-weight:600}
.legend-row .agg{margin-left:auto;color:var(--text-600)}

/* ---------- Кнопка создания (MapCreationMaster): bottom 16, right 16, z 1011 ---------- */
.map-creation{position:absolute;bottom:16px;right:16px;z-index:1011}
.map-creation .creation-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;box-shadow:var(--shadow-elevation-4);
}
.map-creation .creation-btn .ao-icon{font-size:18px}
.map-creation .creation-menu{
  position:absolute;bottom:calc(100% + 6px);right:0;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-popover);padding:0;
  min-width:200px;
}
.map-creation .creation-menu button{
  display:flex;align-items:center;gap:4px;width:calc(100% - 8px);
  margin:4px;padding:6px 8px;border-radius:var(--r);
  font-size:12px;font-weight:400;white-space:nowrap;text-align:left;
}
.map-creation .creation-menu button:hover{background:var(--primary-50)}
.map-creation .creation-menu .ao-icon{font-size:14px;color:var(--text-700)}

/* ---------- Нижняя полоса (таймлайн треков) ---------- */
.map-bottom-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.map-timeline{position:relative;width:100%;padding:4px 4px 0}
.map-timeline .timeline-track{
  position:absolute;left:20px;right:0;top:25px;z-index:-1;
  width:calc(100% - 40px);height:5px;border-radius:10px;
  background:#fff;opacity:.3;
}
.map-timeline svg{width:100%;height:60px;display:block}
.map-timeline text{font-family:var(--font-accent);font-weight:600;fill:#fff;font-size:9px}
.map-timeline line{stroke:#fff}
.map-timeline .cursor-label{font-size:9px;fill:#fff;font-weight:600}

/* ---------- Панель аналитики (MapAnalyticsPanel): bottom 0, z 111 ---------- */
.map-analytics{
  position:absolute;left:0;right:0;bottom:0;z-index:111;height:240px;
  background:#fff;
  transform:translateY(calc(100% + 8px));transition:transform ease-in .3s;
}
.map-analytics.is-active{transform:translateY(0)}
.map-analytics .panel-wrapper{position:relative;height:100%;padding:14px 16px 16px}
.map-analytics .resizer-wrapper{
  position:absolute;top:0;left:50%;transform:translate(-50%,-6px);
  display:flex;align-items:flex-start;justify-content:center;
  border-radius:4px 4px 0 0;background:#fff;
}
.map-analytics .resizer-wrapper .rz-btn{
  height:24px;padding:0 4px;color:var(--text-600);margin-top:-4px;
  display:inline-flex;align-items:center;
}
.map-analytics .resizer{color:#86919d;user-select:none;cursor:ns-resize;margin:-4px 24px 0}
.map-analytics .resizer .ao-icon,.map-analytics .rz-btn .ao-icon{font-size:20px}
.map-analytics .close-button{position:absolute;top:0;right:0}
.map-analytics .an-tabs{display:flex;gap:2px;margin-bottom:10px}
.map-analytics .an-body{display:flex;gap:24px;align-items:flex-start;overflow:auto;height:calc(100% - 46px)}

/* ---------- Тултип объекта на карте ---------- */
.map-feature-tip{
  position:absolute;z-index:1000;pointer-events:none;
  background:#22282B;color:#fff;text-align:center;
  border-radius:var(--r);padding:4px 8px;font-size:10px;font-weight:500;
  transform:translate(-50%,calc(-100% - 10px));white-space:nowrap;
}
.map-feature-tip .sub{color:rgba(255,255,255,.7);font-weight:400}

/* ---------- Панель добавления слоя (MapAddingLayerCard) ---------- */
.adding-layer-card{padding:16px;width:18.5rem}
.adding-layer-card .alc-title{font-size:16px;font-weight:500;margin-bottom:10px;padding-right:28px}
.adding-layer-row{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px;border-radius:var(--r);font-size:12px;font-weight:500;text-align:left;
}
.adding-layer-row:hover{background:var(--primary-50)}
.adding-layer-row .ao-icon{font-size:16px;color:var(--text-700)}

/* maplibre: скрыть стандартную атрибуцию логотип-кнопки, оставить текст мелким */
.maplibregl-ctrl-top-right,.maplibregl-ctrl-top-left{display:none}
.maplibregl-ctrl-attrib{font-size:9px;opacity:.7}

/* ---------- Внутренности панели слоя (MapLayerLayout) ---------- */
.map-layer-panel .panel-inner{display:flex;flex-direction:column;height:100%;padding:16px;font-size:10px;font-weight:500}
.map-layer-panel .panel-card.auto-h{height:auto}
.map-layer-panel.no-fill{bottom:auto}
.map-layer-panel.analytics-mode{bottom:auto;transform:translateX(-2rem)}
.map-layer-panel .panel-head{position:relative;display:flex;margin-bottom:12px;z-index:2}
.map-layer-panel .panel-title-row{font-size:14px;font-weight:400;line-height:135%}
.map-layer-panel .head-actions{display:flex;margin-left:auto}
.map-layer-panel .head-actions.is-hidden{display:none}
.subtitle-analytics{margin:-8px 0 12px;font-size:10px;color:var(--text-600)}

/* иконочная кнопка 20px внутри панели */
.pa-btn{
  width:20px;height:20px;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-600);
}
.pa-btn:hover{background:var(--panel-grey)}
.pa-btn .ao-icon{font-size:13px}
.pa-btn.is-on{color:var(--primary)}

/* глобальный фильтр слоя (GlobalFiltersMaster) */
.layer-gf{margin-bottom:12px}
.gf-btn{
  display:flex;align-items:center;width:100%;max-width:240px;height:24px;
  border:1px solid #edf1f2;border-radius:var(--r);padding:0 8px;
  font-size:12px;font-weight:400;color:#576674;background:#fff;text-align:left;
}
.gf-btn:hover{background:#ecf1f7}
.gf-btn .counter{
  display:inline-flex;align-items:center;justify-content:center;height:16px;min-width:16px;
  padding:0 1px;margin-left:4px;background:#ea5d31;border-radius:20px;
  font-weight:700;font-size:8px;line-height:10px;color:#fff;
}
.gf-btn .rot{margin-left:auto;font-size:8px;transform:rotate(0deg)}

/* тулбар панели */
.layer-toolbar{display:flex;align-items:center;margin-bottom:4px}
.layer-toolbar .sort-btn{height:20px;padding:2px 4px;font-size:10px;font-weight:500;color:var(--text-700);border-radius:var(--r)}
.layer-toolbar .sort-btn:hover{background:var(--panel-grey)}
.layer-toolbar .sort-dir{margin-left:4px;color:var(--text-700)}
.layer-toolbar .spacer{flex:1}
.layer-toolbar .pa-btn{margin-left:4px;color:var(--text-700)}

/* список объектов: строки 50px, hover #ecf1f7, «⋯» выезжает поверх агрегатов */
.layer-list{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -16px 12px;padding:12px 16px 0;border-bottom:1px solid var(--border-soft)}
.layer-list.analytics{margin-bottom:0;border-bottom:none;overflow:hidden}
.map-list-item{
  position:relative;display:flex;align-items:center;min-height:50px;
  padding:4px 8px;border-radius:var(--r);background:#fff;cursor:pointer;
  transition:background-color .3s ease-in-out;
}
.map-list-item:hover{background:#ecf1f7}
.map-list-item.is-active{background:rgba(var(--primary-rgb),.25)}
.map-list-item .row-pict{
  width:24px;height:24px;margin-right:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.map-list-item .row-pict svg{width:100%;max-height:100%}
.map-list-item .row-pict.machine{background:var(--secondary);border-radius:var(--r);color:var(--primary)}
.map-list-item .row-pict.machine .ao-icon{font-size:14px}
.map-list-item .row-text{flex:1;min-width:0}
.map-list-item .row-title{font-size:10px;font-weight:700;line-height:140%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-list-item .row-sub{font-size:10px;font-weight:700;color:var(--text-600)}
.map-list-item .row-agg{font-size:10px;font-weight:700;color:var(--text-secondary);text-align:right;opacity:1;transition:opacity .3s ease-in-out;flex-shrink:0}
.map-list-item .menu-action{
  position:absolute;top:50%;right:8px;width:24px;height:24px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--primary-rgb),.12);color:var(--primary);
  transform:translate(40px,-50%);transition:transform .3s ease-in-out;
}
.map-list-item .menu-action .ao-icon{font-size:12px}
.map-list-item:hover .row-agg{opacity:0}
.map-list-item:hover .menu-action{transform:translate(0,-50%)}

/* футер панели */
.layer-footer{display:flex;justify-content:space-between;align-items:center;margin:0 -16px;padding:0 16px;font-size:10px;font-weight:500}
.layer-footer .muted{color:var(--text-600);padding-right:6px}
.layer-footer .agg-row{display:flex;justify-content:space-between;gap:8px}

/* меню пресетов/настроек слоя (v-card width 234, pa-2) */
.preset-menu{
  position:absolute;top:24px;right:0;z-index:5;width:234px;padding:8px;
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-popover);
  font-weight:400;
}
.preset-menu .pm-title{margin-bottom:24px;font-size:10px;text-transform:uppercase;color:#646465;line-height:14px}
.preset-menu .pm-item{
  display:flex;align-items:center;gap:8px;width:100%;height:24px;margin:4px 0;
  padding:4px;border-radius:var(--r);font-size:12px;font-weight:500;color:#576674;text-align:left;
}
.preset-menu .pm-item:hover{background:#ecf1f7}
.preset-menu .pm-item .ao-icon{font-size:13px}

/* боковые подпанели (MapLayerSidebarPanel): top 112, справа от карточки, 288px.
   Сиблинг карточки внутри .map-layer-panel (иначе клипались бы overflow:hidden).
   z-index:-1 — под карточкой, но панель-обёртка (z 1010) держит их над картой. */
.map-side-subpanel{
  position:absolute;z-index:-1;top:7rem;left:100%;bottom:1rem;width:18rem;
  padding:16px 24px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-elevation-2);
  transform:translateX(calc(-100% - 4px));transition:transform ease-in .3s;
  overflow:auto;pointer-events:auto;
}
.map-side-subpanel.is-active{transform:translateX(0)}
.map-side-subpanel .ssp-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:10px;line-height:14px;text-transform:uppercase;color:#646465;
}
.map-side-subpanel .ssp-section{margin:20px 0 10px;font-size:10px;text-transform:uppercase;color:#646465}
.map-side-subpanel .ssp-actions{display:flex;gap:12px;margin-top:16px}
.map-side-subpanel .ssp-actions .ao-btn{flex:1}
.map-side-subpanel .ao-checkbox{font-size:10px;font-weight:700;color:var(--text-body)}

/* шаги добавления слоя */
.alc-steps{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:10px;font-weight:500;color:var(--text-600)}
.alc-title{margin-bottom:4px;font-size:14px;font-weight:400}
.alc-sub{margin-bottom:16px;font-size:10px;font-weight:500;color:var(--text-700)}
.adding-layer-row{
  display:flex;align-items:center;gap:8px;width:100%;height:26px;padding:4px;
  border-radius:var(--r);font-size:12px;font-weight:500;color:var(--text-900);text-align:left;
}
.adding-layer-row:hover{background:#ecf1f7}
.adding-layer-row .ao-icon{font-size:16px;color:var(--text-700)}

/* строка легенды: нативный колорпикер поверх кружка */
.legend-row .color-wrap{position:relative;width:16px;height:16px;margin:0 8px;flex:0 0 auto}
.legend-row .color-wrap input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:16px;height:16px;padding:0;border:none}
.legend-row .color-wrap .color-preview{position:absolute;inset:0;pointer-events:none}
.legend-row .lg-text{font-size:10px;font-weight:500;line-height:140%}
.legend-row.tight{margin:4px 0}
.map-cross-panel{pointer-events:none}
.map-cross-panel .cross-card{pointer-events:auto}
.map-cross-panel .cross-close{pointer-events:auto;position:absolute;top:1rem;right:1rem;z-index:1}
.title-attr-row{display:flex;align-items:center;gap:2px}
.title-attr-row .drag{font-size:12px;color:var(--text-secondary);cursor:grab}

/* верхние контролы: анимация ухода при Live */
.ctl-anim{transition:transform .3s ease-in-out;transform:translateY(0)}
.ctl-anim.is-hidden-y{transform:translateY(-60px)}
.map-ctl-btn,.map-ctl-text-btn{position:relative}

/* инфоблок измерений (MapSaveDeleteControl .infoBlock) */
.measure-info{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  padding:6px 12px;border-radius:var(--r);background:#0d1722;color:#fff;font-size:14px;
}
.measure-info .ao-icon{font-size:14px}

/* подписи полей (TextCluster: Inter 700 white + тёмный контур) */
.map-label{
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  font-family:var(--font-body);color:#fff;line-height:1.15;text-align:center;
  text-shadow:0 0 3px rgba(13,23,34,.9),0 0 6px rgba(13,23,34,.75);
}
.map-label b{font-size:13px;font-weight:700}
.map-label span{font-size:10px;font-weight:600;opacity:.95}

/* пины техники (machinePin: белая капля с цветной обводкой) */
.machine-pin{position:relative;width:36px;height:40px;cursor:pointer}
.machine-pin svg{display:block}
.machine-pin .pin-icon{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:14px;color:var(--text-800);
}
.machine-pin.rewind .pin-icon{top:5px;font-size:12px}

/* маркеры инфраструктуры */
.infra-marker{
  width:26px;height:26px;border-radius:50%;background:#fff;border:2.5px solid #90E723;
  display:flex;align-items:center;justify-content:center;color:var(--text-800);
  box-shadow:var(--shadow-elevation-2);cursor:pointer;
}
.infra-marker .ao-icon{font-size:13px}

/* кнопка «Карта зафиксирована» */
.compare-fixed-btn{position:absolute;right:16px;bottom:0;z-index:3;padding-bottom:16px}

/* панель аналитики: вкладки как в приложении */
.map-analytics .an-kpis{display:flex;gap:10px;flex-wrap:wrap;max-width:44%}