/* ══════════════════════════════════════════
   LEAFLET MAP — тактический стиль
══════════════════════════════════════════ */

/* ── Контейнер ── */
.lf-wrap {
  flex: 1; position: relative; overflow: hidden;
}

.lf-container {
  position: absolute; inset: 0;
  background: #0a0f18;
}

/* ── Тёмный оверлей для виньетки ── */
.lf-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 100;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(8,12,20,.6) 100%
  );
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}

/* ── Координатная подпись ── */
.lf-coords {
  z-index: 500;
  position: absolute; bottom: 28px; left: 12px; z-index: 10;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: rgba(200,162,39,.5); letter-spacing: 2px;
  pointer-events: none;
}

/* ── Кастомизация тайлов Leaflet ── */
.lf-container .leaflet-tile-pane {
  filter: brightness(.85) contrast(1.05) saturate(.6) hue-rotate(180deg);
}

/* ── Контролы зума ── */
.lf-container .leaflet-control-zoom {
  border: 1px solid rgba(200,162,39,.3) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  margin-top: 60px !important; /* ниже map-tabs */
  margin-right: 12px !important;
}

.lf-container .leaflet-control-zoom a {
  background: rgba(10,15,24,.92) !important;
  color: var(--gold) !important;
  border-color: rgba(200,162,39,.25) !important;
  font-size: 16px !important; line-height: 26px !important;
  width: 28px !important; height: 28px !important;
  transition: background .15s;
}

.lf-container .leaflet-control-zoom a:hover {
  background: rgba(200,162,39,.1) !important;
}

/* ── Attribution ── */
.lf-container .leaflet-control-attribution {
  background: rgba(10,15,24,.7) !important;
  color: rgba(122,143,168,.4) !important;
  font-size: 7px !important;
}

.lf-container .leaflet-control-attribution a { color: rgba(200,162,39,.4) !important; }

/* ══════════════════════════════════════════
   МАРКЕРЫ ОТРЯДОВ
══════════════════════════════════════════ */

.lf-marker {
  position: relative;
  width: 0; height: 0; /* якорь в центре */
  cursor: pointer;
}

/* Кольцо-пульсация вокруг маркера */
.lf-marker-ring {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--mc, #e8832a);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .5;
  transition: all .2s;
}

.marker-pulse .lf-marker-ring {
  animation: lf-pulse 2.2s ease-out infinite;
}

@keyframes lf-pulse {
  0%   { width: 30px; height: 30px; opacity: .7; }

  70%  { width: 56px; height: 56px; opacity: 0; }

  100% { width: 30px; height: 30px; opacity: 0; }
}

/* Центральный кружок с буквой */
.lf-marker-dot {
  position: absolute;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(10,15,24,.92);
  border: 2px solid var(--mc, #e8832a);
  box-shadow: 0 0 10px var(--mc, #e8832a),
              0 0 20px rgba(0,0,0,.8);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--mc, #e8832a);
  transition: all .2s;
  z-index: 2;
}

/* Выделенный маркер */
.lf-marker-sel .lf-marker-dot {
  width: 34px; height: 34px;
  background: rgba(200,162,39,.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px var(--gold),
              0 0 30px rgba(200,162,39,.4),
              0 0 60px rgba(200,162,39,.15);
  font-size: 16px;
}

.lf-marker-sel .lf-marker-ring {
  border-color: var(--gold);
  opacity: .7;
}

/* Подпись с именем отряда */
.lf-marker-label {
  position: absolute;
  left: 50%; top: calc(50% + 18px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Share Tech Mono', monospace; font-size: 8px;
  color: var(--mc, #e8832a);
  letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(8,12,20,.8);
  border: 1px solid rgba(var(--mc), .2);
  padding: 1px 5px;
  pointer-events: none;
  z-index: 1;
  opacity: .85;
}

.lf-marker-sel .lf-marker-label {
  color: var(--gold); opacity: 1;
}

/* ── Попап деталей поверх карты (SquadDetail) ── */
.map-tabs { z-index: 800; }
 /* уже есть, убеждаемся */

/* ══════════════════════════════════════════
   МАРКЕРЫ ЗАКАЗОВ
══════════════════════════════════════════ */

.lf-order-marker {
  position: relative; width: 0; height: 0; cursor: pointer;
}

.lf-order-dot {
  position: absolute;
  width: 26px; height: 26px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(10,15,24,.92);
  border: 2px solid var(--oc, #f0c040);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 8px var(--oc, #f0c040), 0 2px 8px rgba(0,0,0,.6);
  transition: all .2s; z-index: 2;
}

/* Пульсация для срочных/горящих */
.lf-order-pulse .lf-order-dot {
  animation: lf-pulse-order 1.4s ease-out infinite;
}

/* Кольцо пульсации */
.lf-order-pulse::before {
  content: ''; position: absolute;
  width: 26px; height: 26px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 2px solid var(--oc);
  border-radius: 6px;
  animation: lf-ring-expand 1.4s ease-out infinite;
  z-index: 1; pointer-events: none;
}

@keyframes lf-pulse-order {
  0%,100% { box-shadow: 0 0 6px var(--oc); }
  50%     { box-shadow: 0 0 18px var(--oc), 0 0 32px var(--oc); }
}

@keyframes lf-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

.lf-order-label {
  position: absolute;
  left: 50%; top: calc(50% + 16px); transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Share Tech Mono', monospace; font-size: 7px;
  color: var(--oc, #f0c040); letter-spacing: 1px;
  background: rgba(8,12,20,.85); border: 1px solid rgba(240,192,64,.15);
  padding: 1px 4px; opacity: .8; pointer-events: none;
}

.lf-order-sel .lf-order-dot {
  width: 32px; height: 32px; font-size: 16px;
  background: rgba(240,192,64,.12);
  border-color: var(--gold-hi);
  box-shadow: 0 0 20px var(--oc), 0 4px 12px rgba(0,0,0,.6);
}

.lf-order-done .lf-order-dot { opacity: .4; filter: grayscale(.6); }

/* ── Тултип: тип заказа иконка ── */
.lot-type-icon { font-size: 16px; margin-right: 4px; }

/* ══ Контролы слоёв ══ */
.lf-layers {
  position: absolute; top: 12px; left: 12px; z-index: 800;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10,15,24,.88);
  border: 1px solid var(--steel-hi);
  padding: 8px 10px; min-width: 130px;
  clip-path: polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}

.lf-layers-section { display: flex; flex-direction: column; gap: 4px; }

.lf-layers-title {
  font-family: 'Share Tech Mono', monospace; font-size: 7px;
  color: var(--txt-lo); letter-spacing: 2px;
}

.lf-layer-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(42,53,69,.4); border: 1px solid var(--steel-hi);
  color: var(--txt-lo); font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 600; padding: 4px 8px;
  transition: all var(--transition); cursor: pointer;
}

.lf-layer-btn.on { background: rgba(200,162,39,.1); border-color: rgba(200,162,39,.4); color: var(--gold); }

.lf-layer-btn:hover { border-color: rgba(200,162,39,.3); color: var(--txt-hi); }

.lf-layer-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); box-shadow: 0 0 4px var(--gold);
}

.lf-layer-count {
  margin-left: auto;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: var(--txt-lo);
}

.lf-filter-btn {
  background: none; border: none;
  color: var(--txt-lo); font-family: 'Share Tech Mono', monospace; font-size: 8px;
  letter-spacing: 1px; padding: 2px 4px; cursor: pointer;
  transition: color var(--transition); text-align: left;
}

.lf-filter-btn.on  { color: var(--gold); }

.lf-filter-btn:hover { color: var(--txt-hi); }

/* ══ Легенда ══ */
.lf-legend {
  position: absolute; bottom: 36px; right: 12px; z-index: 800;
  background: rgba(10,15,24,.85); border: 1px solid var(--steel-hi);
  padding: 7px 10px; display: flex; flex-direction: column; gap: 5px;
  clip-path: polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}

.lf-legend-row {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Share Tech Mono', monospace; font-size: 8px; color: var(--txt-lo);
}

.lf-legend-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

/* ══ Тултип / попап заказа ══ */
.lf-order-popup-wrap {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 900; min-width: 320px; max-width: 420px;
  animation: fadeup .18s ease-out;
}

.lf-order-popup-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--txt-lo); font-size: 12px;
  cursor: pointer; transition: color var(--transition);
}

.lf-order-popup-close:hover { color: var(--red); }

/* ── Leaflet popup для заказов ── */
.lf-order-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(10,15,24,.97);
  border: 1px solid var(--gold-lo);
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.8), 0 0 0 1px rgba(200,162,39,.1);
  padding: 0;
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px);
}
.lf-order-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: 280px !important;
}
.lf-order-popup-wrap .leaflet-popup-tip-container {
  display: none;
}
.lf-order-popup-wrap .leaflet-popup-close-button {
  color: var(--txt-lo) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}
.lf-order-popup-wrap .leaflet-popup-close-button:hover {
  color: var(--txt-hi) !important;
}
.lf-order-popup {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lot-close {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--txt-lo); font-size: 14px; line-height: 1;
  padding: 0 2px;
  transition: color .15s;
}
.lot-close:hover { color: var(--txt-hi); }

.lot-hdr { display: flex; align-items: center; gap: 8px; }

.lot-badge {
  font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 1px;
  padding: 2px 6px; border: 1px solid; border-radius: 2px;
}

.lot-id { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--txt-lo); margin-left: auto; }

.lot-title { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--txt-hi); }

.lot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.lot-client  { font-size: 11px; color: var(--txt); }

.lot-deadline { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--txt-lo); }

.lot-deadline.urgent { color: var(--red); animation: blink 1s step-end infinite; }

.lot-price   { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: var(--gold); }

.lot-loc     { font-size: 10px; color: var(--txt-lo); }

.lot-btn {
  background: rgba(47,214,122,.12); border: 1px solid rgba(47,214,122,.4);
  color: var(--green); font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 7px 0; transition: all var(--transition); cursor: pointer;
}

.lot-btn:hover { background: rgba(47,214,122,.22); box-shadow: 0 0 12px rgba(47,214,122,.3); }

.lot-assigned {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: var(--green); letter-spacing: 1px; text-align: center;
}

/* ── Слой заказов тогл ── */
/* ══ ФИЛЬТРЫ НА КАРТЕ ══ */
.map-filter-panel {
  position: absolute; top: 12px; right: 12px; z-index: 500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* Кнопка открыть */
.map-filter-toggle {
  display: flex; align-items: center; gap: 6px;
  background: rgba(14,21,32,.9); border: 1px solid rgba(200,162,39,.3);
  color: var(--txt-lo); font-family: 'Rajdhani',sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: 2px; padding: 6px 14px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.map-filter-toggle:hover,
.map-filter-toggle.active    { border-color: rgba(200,162,39,.7); color: var(--gold); }
.map-filter-toggle.has-active { border-color: var(--gold); color: var(--gold-hi); }

.map-filter-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); display: inline-block;
  box-shadow: 0 0 6px var(--gold);
}

/* Счётчик */
.map-order-count {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: var(--txt-lo); text-align: right; letter-spacing: 1px;
}
.map-order-count-num { color: var(--gold); font-size: 14px; }

/* Тело фильтров */
.map-filter-body {
  background: rgba(10,15,24,.95); border: 1px solid rgba(200,162,39,.25);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
  min-width: 300px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: fadein .15s ease-out;
}

.map-filter-section { display: flex; flex-direction: column; gap: 6px; }

.map-filter-label {
  font-family: 'Rajdhani',sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 3px; color: var(--txt-lo); text-transform: uppercase;
}

.map-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.map-filter-chip {
  font-family: 'Rajdhani',sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; padding: 3px 10px;
  background: rgba(26,34,48,.9); border: 1px solid rgba(255,255,255,.1);
  color: var(--txt-lo); cursor: pointer; transition: all .12s; white-space: nowrap;
}
.map-filter-chip:hover  { border-color: rgba(200,162,39,.4); color: var(--txt); }
.map-filter-chip.active { border-color: var(--gold); color: var(--gold-hi); background: rgba(200,162,39,.12); }

.map-filter-reset {
  width: 100%; font-family: 'Rajdhani',sans-serif; font-size: 10px;
  font-weight: 700; letter-spacing: 2px; padding: 6px;
  background: rgba(224,64,64,.08); border: 1px solid rgba(224,64,64,.25);
  color: var(--red); cursor: pointer; transition: all .12s; margin-top: 4px;
}
.map-filter-reset:hover { background: rgba(224,64,64,.15); }
/* ── map-wrap / map-canvas (новый MapLeaflet) ── */
.map-wrap   { flex:1; position:relative; overflow:hidden; height:100%; }

/* ══ TOAST — новый заказ ══ */
.map-toast {
  position: absolute; bottom: 60px; left: 16px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,15,24,.96); border: 1px solid rgba(47,214,122,.4);
  padding: 10px 14px; min-width: 260px; max-width: 340px;
  box-shadow: 0 4px 24px rgba(0,0,0,.7), 0 0 20px rgba(47,214,122,.15);
  animation: toast-slide-in .3s cubic-bezier(.16,1,.3,1);
}
@keyframes toast-slide-in {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.map-toast-icon  { font-size: 22px; flex-shrink: 0; }
.map-toast-body  { flex: 1; min-width: 0; }
.map-toast-title { font-family: 'Rajdhani',sans-serif; font-size: 9px; font-weight:700; letter-spacing:3px; color: var(--green); text-transform:uppercase; }
.map-toast-text  { font-size: 12px; color: var(--txt-hi); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-toast-loc   { font-size: 10px; color: var(--teal); margin-top: 2px; }
.map-toast-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.map-toast-btn     { background: rgba(47,214,122,.15); border: 1px solid rgba(47,214,122,.4); color: var(--green); font-size:12px; padding:4px 8px; cursor:pointer; transition:all .12s; }
.map-toast-btn:hover { background: rgba(47,214,122,.25); }
.map-toast-dismiss { background: none; border: 1px solid rgba(255,255,255,.1); color: var(--txt-lo); font-size:11px; padding:4px 8px; cursor:pointer; }
.map-toast-dismiss:hover { color: var(--red); border-color: rgba(224,64,64,.4); }

/* ── Анимация нового маркера ── */
.lf-order-new .lf-order-dot {
  animation: new-order-pop .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes new-order-pop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%,-50%) scale(1.3); }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

/* ── map-filter-panel top row ── */
.map-filter-top { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.map-canvas { position:absolute; inset:0; background:#0a0f18; z-index:1; }

/* ── Leaflet в новом контейнере ── */
.map-canvas .leaflet-tile-pane { filter: brightness(.85) contrast(1.1) saturate(.7); }
.map-canvas .leaflet-control-zoom {
  border: 1px solid rgba(200,162,39,.3) !important;
  background: rgba(14,21,32,.9) !important;
  margin-bottom: 60px !important;
}
.map-canvas .leaflet-control-zoom a {
  background: transparent !important; color: var(--gold) !important;
  border-color: rgba(200,162,39,.2) !important;
  font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important;
  line-height: 26px !important;
}
.map-canvas .leaflet-control-attribution { display: none !important; }