/* Левая панель инструментов рисования — тот же визуальный язык, что и .map-control */

:root {
  /* Чуть прозрачнее — линии карты слева не «теряются» под сплошной плашкой */
  --map-ui-bg: rgba(15, 23, 42, 0.78);
  /* Внутренние разделители/кнопки — тоньше, чем оболочка панели */
  --map-ui-border: rgba(255, 255, 255, 0.038);
  --map-ui-radius: 8px;
  /* Выпадающие списки — чуть заметнее фона, без тяжёлой каймы */
  --map-ui-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.22);
  --map-ui-popover: rgba(30, 41, 59, 0.98);
  /* Синхрон с .map-control / .map-btn (компакт, как 2rem у кнопок формы) */
  --map-floating-inset: 10px;
  --map-floating-pad: 4px;
  --map-floating-btn: 32px;
  --map-floating-gap: 4px;
  --map-floating-after-zoom: 8px;
}

/* В одной колонке с .map-control: тот же inset, сразу под зумом (внутри #map, position: relative) */
/* Инструменты рисования перенесены в форму (вкладка «Области и линии») — колонка на карте скрыта */
.edit-panel.edit-panel--legacy-toolbar {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.edit-panel {
  position: absolute;
  left: var(--map-floating-inset);
  top: calc(
    var(--map-floating-inset) + var(--map-floating-pad) + var(--map-floating-btn) +
      var(--map-floating-gap) + var(--map-floating-btn) + var(--map-floating-gap) + var(--map-floating-btn) +
      var(--map-floating-pad) + var(--map-floating-after-zoom)
  );
  transform: none;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

/* Нижняя часть левой колонки — та же логика оболочки, что у .map-control (без border + толстой тени) */
.edit-toolbar {
  background: var(--map-ui-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--map-ui-radius);
  padding: 5px 4px;
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 36px;
  pointer-events: auto;
  /* Тёмные нативные контролы (стрелки number) в духе панели */
  color-scheme: dark;
}

/* Разделитель: режим/цвет от числовых параметров — тонкая линия в общем стиле панели */
.edit-toolbar > .thickness-wrapper {
  padding-top: 4px;
  margin-top: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Цвет --- */
.color-selector-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--map-ui-border);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.color-preview:hover {
  transform: scale(1.06);
  border-color: rgba(251, 202, 31, 0.5);
}

.color-preview.active {
  border-color: rgba(251, 202, 31, 0.75);
  box-shadow: 0 0 0 1px rgba(251, 202, 31, 0.35);
}

.color-dropdown {
  position: absolute;
  left: calc(var(--map-floating-btn) + 6px);
  top: 0;
  transform: none;
  background: var(--map-ui-popover);
  border-radius: var(--map-ui-radius);
  padding: 5px;
  box-shadow: var(--map-ui-shadow);
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  z-index: 1001;
  border: 1px solid var(--map-ui-border);
  min-width: 72px;
}

.color-dropdown.show {
  display: grid;
}

.color-option {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.color-option:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.45);
}

.color-option.selected {
  border-color: rgba(248, 250, 252, 0.85);
  box-shadow: none;
}

.color-red { background: #ef4444; }
.color-blue { background: #3b82f6; }
.color-green { background: #009a63; }
.color-yellow { background: #f7b239; }
.color-purple { background: #8b5cf6; }
.color-pink { background: #bc5d58; }
.color-orange { background: #a64703; }
.color-teal { background: #308446; }
.color-black { background: #1f2937; }
.color-white { background: #ffffff; border: 1px solid #e2e8f0; }

/* --- Толщина и скругление: без отдельной «коробки», в общем фоне .edit-toolbar --- */
.thickness-wrapper,
.thickness-rounding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  min-width: var(--map-floating-btn);
  width: var(--map-floating-btn);
  box-shadow: none;
}

/* Как .map-btn: 32×32 (2rem), та же «плитка» */
.thickness-wrapper input[type="number"],
.thickness-rounding input[type="number"] {
  width: var(--map-floating-btn);
  min-width: var(--map-floating-btn);
  height: var(--map-floating-btn);
  box-sizing: border-box;
  padding: 0 0 0 2px;
  margin: 0;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.thickness-wrapper input[type="number"]:hover,
.thickness-rounding input[type="number"]:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.08);
}

.thickness-wrapper input[type="number"]:focus,
.thickness-rounding input[type="number"]:focus {
  outline: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(251, 202, 31, 0.35);
}

/* WebKit/Chromium: зона стрелок уже и аккуратнее, без «светлой полосы» */
.thickness-wrapper input[type="number"]::-webkit-inner-spin-button,
.thickness-rounding input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  display: block;
  opacity: 1;
  cursor: pointer;
  height: 26px;
  margin: 1px 1px 0 0;
  padding: 0;
}

.thickness-wrapper input[type="number"]::-webkit-outer-spin-button,
.thickness-rounding input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Тип линии --- */
.line-type-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.line-type-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--map-ui-border);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.line-type-preview:hover {
  transform: scale(1.05);
  border-color: rgba(251, 202, 31, 0.45);
}

.line-type-preview.active {
  border-color: rgba(251, 202, 31, 0.75);
  box-shadow: 0 0 0 1px rgba(251, 202, 31, 0.28);
}

.line-type-preview svg {
  width: 100%;
  height: 100%;
}

.line-type-dropdown {
  position: absolute;
  left: calc(var(--map-floating-btn) + 6px);
  top: 0;
  transform: none;
  background: var(--map-ui-popover);
  border-radius: var(--map-ui-radius);
  padding: 5px;
  box-shadow: var(--map-ui-shadow);
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 1001;
  border: 1px solid var(--map-ui-border);
}

.line-type-dropdown.show {
  display: flex;
}

.line-type-option {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  border: 1px solid var(--map-ui-border);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.line-type-option:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(251, 202, 31, 0.4);
}

.line-type-option.selected {
  border-color: #fbca1f;
  background: rgba(251, 202, 31, 0.12);
}

.line-type-option svg {
  width: 100%;
  height: 100%;
}

/* Полоска трека (если используется) */
.track-preview {
  position: fixed;
  bottom: 20px;
  left: 20px;
  height: 120px;
  width: 4px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 999;
  border-radius: 4px;
}

.track-preview-line {
  width: 100%;
  height: 0.5cm;
  background: #3b82f6;
  transition: all 0.2s;
  border-radius: 4px;
}

/* --- Линия / область --- */
.area-selector-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.area-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--map-ui-border);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.area-preview:hover {
  transform: scale(1.05);
  border-color: rgba(251, 202, 31, 0.45);
}

.area-preview.active {
  border-color: rgba(251, 202, 31, 0.75);
  box-shadow: 0 0 0 1px rgba(251, 202, 31, 0.28);
}

.area-preview-dropdown {
  position: absolute;
  left: calc(var(--map-floating-btn) + 6px);
  top: -2px;
  transform: none;
  background: var(--map-ui-popover);
  border-radius: var(--map-ui-radius);
  padding: 5px;
  box-shadow: var(--map-ui-shadow);
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  z-index: 1001;
  border: 1px solid var(--map-ui-border);
  min-width: 72px;
}

.area-preview-dropdown.show {
  display: grid;
}

.area-preview-option {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  border: 1px solid var(--map-ui-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  padding: 0;
}

.area-preview-option:hover {
  transform: scale(1.06);
  border-color: rgba(251, 202, 31, 0.45);
}

.area-preview-option.selected {
  border-color: #fbca1f;
  background: rgba(251, 202, 31, 0.1);
}

.area-preview-option svg {
  width: 100%;
  height: 100%;
}

/* SVG в панели: в разметке stroke тёмный (#2C3E50 и т.д.) — на тёмном фоне линии «пропадают» */
.edit-panel svg path {
  stroke: #f1f5f9 !important;
}

.edit-panel svg line {
  stroke: #f1f5f9 !important;
}

.edit-panel .area-preview-dropdown svg polygon,
.edit-panel #areaArea svg polygon {
  stroke: rgba(241, 245, 249, 0.92) !important;
  fill: rgba(52, 211, 153, 0.42) !important;
}