/* ===== "+ Yaratish" oqimi ===== */
#tool-panel{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-create{ width: 100%; }

.btn-secondary{
  background: var(--color-panel-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .12s var(--ease);
}
.btn-secondary:hover{ border-color: var(--color-border-strong); background: var(--color-bg); }
.btn-secondary:active{ transform: translateY(1px); }

/* MUHIM: endi bu qator xaritaning O'ZI USTIDA suzuvchi (floating) overlay —
   shu sabab ixcham (kichkina) tugmalar + o'zining fon/blur paneli bilan. */
.instrument-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: color-mix(in srgb, var(--color-panel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  width: fit-content;
  max-width: 100%;
}

/*
 * GIS asboblar paneli uslubida: ikonka yuqorida (rangli, geometriya turiga
 * mos belgi bilan — QGIS/ArcGIS'dagi kabi har bir tur o'z rangiga ega),
 * nomi pastda TO'LIQ ko'rinadi (kesilmaydi/qisqarmaydi).
 */
.create-option{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: 32px;
  height: 32px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  transition: border-color .15s ease, transform .1s var(--ease), box-shadow .15s ease, color .15s ease, background .15s ease;
}
/* MUHIM: nomi (masalan "Yo'nalish sxemasi") endi ekranda ko'rinmaydi (joy
   tejash uchun) — sichqoncha ustiga olib borilganda `title` orqali chiqadi. */
.create-option span:last-child{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.create-option .tool-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}
/* Har bir asbob — GIS legendasidagi kabi o'z rangiga ega, tez tanib olish uchun. */
.create-option[data-instrument="axis"] .tool-icon{ color: #7f8c9a; }
.create-option[data-instrument="road"] .tool-icon{ color: #2f6fed; }
.create-option[data-instrument="cross"] .tool-icon{ color: #f5a623; }
.create-option[data-instrument="railway"] .tool-icon{ color: #4a4a4a; }
.create-option[data-instrument="stop"] .tool-icon{ color: #e5484d; }
.create-option[data-instrument="direction"] .tool-icon{ color: #16a34a; }
.create-option[data-instrument="marker"] .tool-icon{ color: #b3893a; }

.create-option:not(:disabled):hover{
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-panel);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.create-option:not(:disabled):hover .tool-icon{ border-color: var(--color-primary); }
.create-option:disabled{ opacity: .4; cursor: not-allowed; }

.create-option.active-instrument{
  background: linear-gradient(165deg, var(--color-primary-light), var(--color-primary-dark));
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
}
.create-option.active-instrument .tool-icon{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: #fff !important;
}
.create-option.active-instrument:not(:disabled):hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(36,84,224,.4);
}

/* Tugmaning o'ng tomoni 3s bosib turilganda — doimiy sozlama modali ochilishidan oldingi izoh. */
.create-option.long-pressing{
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 0 4px rgba(249,115,22,.18);
  transition: box-shadow 3s linear, border-color .1s ease;
}

.instrument-settings-modal{
  width: min(360px, calc(100vw - 32px));
}
.instrument-settings-modal .form-hint{ margin: 2px 0 10px; }

/* ===== Toifa/polosa formasi (Yo'l, Chorraha, Yo'nalish, Yo'l o'qi) ===== */
.road-form{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * Toifa tanlash formalari va tahrirlash ko'rinish paneli — panel oqimida joy
 * egallamasligi uchun kartaning USTIGA suzuvchi kichik modal sifatida
 * ko'rsatiladi (js/tools/toolPanel.js orqali map-wrap ichiga ko'chiriladi).
 * Shu mantiq barcha asboblar (Yo'l, Chorraha, Yo'nalish, Yo'l o'qi, tahrirlash)
 * uchun bir xil.
 */
.map-overlay-form{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 650;
  width: 220px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: color-mix(in srgb, var(--color-panel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  font-size: 12.5px;
  animation: overlay-in .16s var(--ease);
}
@keyframes overlay-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }

.form-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.category-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.category-btn{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  padding-left: 18px;
  transition: border-color .12s ease, background .12s ease, transform .1s var(--ease);
}
.category-btn:hover{ border-color: var(--color-border-strong); transform: translateY(-1px); }
.category-btn::before{
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat-color, var(--color-text-muted));
}
.category-btn.selected{
  border-color: var(--cat-color, var(--color-primary));
  background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 12%, var(--color-panel));
}

/*
 * Ikonkaga ega toifalar (masalan Chorraha, Temir yo'l) — nomi yozilmaydi,
 * faqat aniq belgi ko'rsatiladi (hover'da nomi "title" sifatida chiqadi).
 */
.category-list-icons{ gap: 5px; }

/* Yo'l o'qi — MAJBURIY 3 tugma/qator (1-qator: bir tomonlama, 2-qator: ikki tomonlama). */
.category-list-axis-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.category-btn-icon{
  padding: 4px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}
.category-btn-icon::before{ display: none; }
.category-btn-icon.selected{
  border-color: var(--cat-color, var(--color-primary));
  background: color-mix(in srgb, var(--cat-color, var(--color-primary)) 16%, var(--color-panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, var(--color-primary)) 25%, transparent);
}

/* Chiziqli obyekt toifalari (Yo'l) — matn o'rniga haqiqiy QALINLIKNI ko'rsatuvchi chiziq. */
.category-bar{
  display: block;
  width: 22px;
  border-radius: 2px;
}

/*
 * Yo'l o'qi — xaritadagi HAQIQIY ko'rinishni aks ettiruvchi kichik belgi:
 * ingichka markaziy chiziq + rangli qoplama. BIR TOMONLAMA'da qoplama faqat
 * chiziqning bir tomonida (pastda), IKKI TOMONLAMA'da chiziq atrofida
 * simmetrik (ikki tomonida ham) — xaritada chizilgan shakl bilan bir xil mantiq.
 */
.axis-symbol{
  position: relative;
  display: block;
  width: 24px;
  height: 20px;
}
.axis-symbol-line{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--color-text-muted);
  transform: translateY(-50%);
}
.axis-symbol-fill{
  position: absolute;
  left: 1px;
  right: 1px;
  border-radius: 1px;
  opacity: .85;
}
.axis-symbol-fill-right{ top: 50%; }
.axis-symbol-fill-both{ top: 50%; transform: translateY(-50%); }

/* Yo'nalish (Borish/Qaytish) — chiziq + yo'nalishni bildiruvchi strelka uchi. */
.category-bar-arrow-wrap{
  display: flex;
  align-items: center;
}
.category-bar-arrowhead{
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  flex-shrink: 0;
}
.category-bar-arrowhead-right{ border-left: 7px solid; }
.category-bar-arrowhead-left{ border-right: 7px solid; }

.form-select{
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text);
}

.form-actions{
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.form-actions button{ flex: 1; }

/* ===== Tahrirlanayotgan obyekt ko'rinishi paneli — nozik, chap chetida yashil chiziq ===== */
.style-edit-panel{
  border-left: 3px solid #2ecc71;
}
.style-edit-panel .form-label{ margin-top: 0; color: #1e9e57; }
.style-edit-error{
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-danger);
  background: rgba(229,72,77,.1);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 8px;
}

/* ===== Obyekt ko'rinishi: rangi, kontur/chegara va chiziq qalinligi ===== */
.style-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}
.style-field{
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 60px;
  min-width: 60px;
}
.style-field label{
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-color{
  width: 100%;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 2px;
  background: var(--color-bg);
  cursor: pointer;
}
.form-number{
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 8px;
  padding: 8px 8px;
  font-size: 13px;
  color: var(--color-text);
}

/* ===== Chizish jarayoni paneli — ikkala panel uchun umumiy, suzuvchi (floating) holat paneli ===== */
.draw-active-bar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 10px 16px;
  max-width: 90vw;
}
.draw-active-label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
}
.draw-active-hint{
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ===== "Bog'langan" ustuni va bog'lash tugmasi ===== */
.col-link{ text-align: center; width: 30px; }
.row-link{
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  padding: 2px 4px;
}
.row-link:hover{ color: var(--color-primary-dark); }

/* ===== Jadval ===== */
.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.data-table thead th{
  position: sticky;
  top: 0;
  background: var(--color-panel-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 5px 6px;
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--color-border);
}
/* Har bir qator o'zidan keyingisidan yaqqol ajralib turishi uchun kuchliroq
   zebra chizig'i + har qatorning pastki chegarasi aniqroq. */
.data-table tbody tr:nth-child(odd){
  background: var(--color-panel);
}
.data-table tbody tr:nth-child(even){
  background: var(--color-panel-alt);
}
.data-table tbody td{
  padding: 3px 6px;
  border-bottom: 1px solid var(--color-border);
}
.data-table input[type="text"]{
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--color-text);
}
.data-table input[type="text"]:hover,
.data-table input[type="text"]:focus{
  border-color: var(--color-border);
  background: var(--color-bg);
  outline: none;
}
.data-table input[type="number"]{
  width: 64px;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--color-text);
}
.data-table input[type="number"]:hover,
.data-table input[type="number"]:focus{
  border-color: var(--color-border);
  background: var(--color-bg);
  outline: none;
}
.col-check{ width: 28px; }
.col-action{ width: 54px; white-space: nowrap; }

/*
 * Bitta umumiy jadvalda REAL (chapda, ko'k) va TOPO (o'ngda, qizg'ish)
 * ma'lumotlari yonma-yon, nozik/och tint fon bilan ajratiladi — to'q rang
 * emas, faqat mansublikni bildiruvchi yengil belgi.
 */
.data-table-merged .col-real{ background: var(--tint-real); }
.data-table-merged .col-topo{ background: var(--tint-topo); }
.data-table-merged thead .col-real{ background: var(--tint-real-strong); }
.data-table-merged thead .col-topo{ background: var(--tint-topo-strong); }
.data-table-merged .col-real-first{ border-left: 2px solid var(--tint-real-strong); }
.data-table-merged .col-topo-first{ border-left: 2px solid var(--tint-topo-strong); }
.data-table-merged .table-group-row th{
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  border-bottom: none;
  box-shadow: none;
}
.data-table-merged .group-label-real{ color: #3b82f6; }
.data-table-merged .group-label-topo{ color: #f43f5e; }
.data-table-merged thead tr:last-child th{ top: 21px; }
.data-table-merged .table-group-row th{ position: sticky; top: 0; z-index: 1; }

/* Tez-tez bosiladigan asosiy amal — ko'zga yaqqol tashlanishi uchun katta,
   aniq chegarali tugma (kichik matn belgisi emas). */
.row-edit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .1s var(--ease), box-shadow .12s ease;
}
.row-edit:hover{
  color: var(--color-primary);
  background: var(--color-panel);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.row-edit:active{ transform: translateY(0); }

/* Tahrirlash FAOL bo'lganda — FAQAT aynan shu tomon (real/topo) tugmasi
   "yonib turgandek" aniq ko'rinsin (ikkinchi tomon tegilmaydi). */
.editing-row{ background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.row-edit.active-edit{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
  animation: edit-pulse 1.4s ease-in-out infinite;
}
@keyframes edit-pulse{
  0%, 100%{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
  50%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 10%, transparent); }
}

.data-table tbody tr{ animation: row-fade-in .18s var(--ease) both; transition: background .12s ease; }
@keyframes row-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
.data-table tbody tr[data-row-id]{ cursor: pointer; }
.data-table tbody tr[data-row-id]:hover{ background: var(--color-bg); }
.selected-row{
  background: rgba(250,204,21,.18) !important;
  box-shadow: inset 3px 0 0 #eab308;
}

/* ===== Tahrirlash rejimidagi vertex nuqtalar ("yonib" turadi) ===== */
.vertex-handle{
  cursor: move;
  filter: drop-shadow(0 0 5px rgba(46,204,113,.9)) drop-shadow(0 0 2px rgba(46,204,113,.9));
  animation: vertex-pulse 1.2s ease-in-out infinite;
}
.vertex-handle.dragging{
  filter: drop-shadow(0 0 7px rgba(255,152,0,.95)) drop-shadow(0 0 3px rgba(255,152,0,.95));
  animation: none;
}
@keyframes vertex-pulse{
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ===== Instrumentlar paneli (QGIS "Create Features" uslubida) ===== */
.instrument-toolbar{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 6px;
}
.instrument-toolbar-icon{ font-size: 13px; opacity: .7; }
.instrument-search{
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--color-text);
  padding: 4px 2px;
}
.instrument-search:focus{ outline: none; }

.instrument-tree{ font-size: 12.5px; }
.instrument-tree thead{ display: none; }

.instrument-cell{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
}
.instrument-swatch{
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.instrument-type-icon{
  font-size: 12px;
  width: 14px;
  text-align: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.instrument-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instrument-row{ cursor: pointer; }
.instrument-row:hover{ background: var(--color-bg); }
.instrument-row.active-instrument{
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-panel));
}
.instrument-row.active-instrument .instrument-name{ font-weight: 700; }
.instrument-row.active-instrument{
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.row-delete{
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
}
.row-delete:hover{
  color: var(--color-danger);
  background: rgba(229,72,77,.1);
}

/* ===================================================== */
/* ============ Xarita qatlam (basemap) tugmasi ========= */
/* ===================================================== */
.basemap-control{
  background: color-mix(in srgb, var(--color-panel) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: visible;
  font-family: inherit;
}

.basemap-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.basemap-toggle:hover{ background: var(--color-bg); }
.basemap-toggle .swatch{
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.15);
}

.basemap-menu{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  min-width: 170px;
}
.basemap-menu.open{ display: block; animation: overlay-in .14s var(--ease); }

.basemap-option{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  text-align: left;
  transition: background .12s ease;
}
.basemap-option:hover{ background: var(--color-bg); }
.basemap-option.selected{
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.basemap-option .swatch{
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.15);
  flex-shrink: 0;
}
.basemap-option .swatch.none{
  background: repeating-conic-gradient(#ccc 0% 25%, #eee 0% 50%) 50% / 10px 10px;
}

/* ===== Leaflet boshqaruv elementlari — ilova uslubiga moslashtirilgan ===== */
/* MUHIM: sarlavha va instrument paneli endi xarita ustida (chap-yuqori
   burchakda) suzib turadi — zoom (+/-) tugmasi ular bilan kesishmasligi
   uchun pastroqqa (ancha o'rtaroqqa) tushirilgan. */
.leaflet-top.leaflet-left{ margin-top: 56px; }
.leaflet-control-zoom{
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-panel);
  border-radius: 8px !important;
  overflow: hidden;
}
.leaflet-control-zoom a{
  background: var(--color-panel) !important;
  color: var(--color-text) !important;
  font-weight: 700;
}
.leaflet-control-zoom a:hover{ background: var(--color-bg) !important; }
.leaflet-control-scale-line{
  background: rgba(255,255,255,.9) !important;
  border: 2px solid var(--color-primary) !important;
  border-top: none !important;
  font-weight: 700;
  color: var(--color-text) !important;
  padding: 1px 6px !important;
  border-radius: 0 0 4px 4px;
}
.leaflet-container{ font-family: inherit; background: #ffffff; }
.leaflet-pane{ transition: opacity .2s ease; }

/* ===== "Qo'shimcha axborot belgisi" — ikonka (emoji yoki tashqi rasm) ===== */
.map-marker-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  pointer-events: auto;
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}
.map-marker-icon img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ===== Chorraha ikonkasi — doira MARKAZIGA aniq markazlangan holda ===== */
.cross-icon-label{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}
.map-marker-icon-mini{ font-size: 12px; filter: none; }

/* ===== Tor ekranlar — basemap menyusi va Leaflet boshqaruvlari ekrandan
   chiqib ketmasligi, hamda pastdagi jadval bilan kesishmasligi uchun. ===== */
@media (max-width: 860px){
  .basemap-menu{ max-width: calc(100vw - 90px); }
  .leaflet-control-zoom a{ width: 30px; height: 30px; line-height: 30px; }
  .leaflet-top.leaflet-left{ margin-top: 56px; margin-left: 6px; }
  .leaflet-bottom.leaflet-left{ margin-bottom: 6px; margin-left: 6px; }
}

/* ===== Global "orqaga/oldinga" (undo/redo) — REAL xaritaning chap-pastki
   burchagida, Leaflet boshqaruvi sifatida (bazaviy xarita tugmasi ostida),
   TEPA-PAST (vertikal) joylashadi. Xarita ustida "suzib" tursa ham hech qanday
   panel/jadval/menyu bilan ustma-ust tushmaydi (burchak bo'sh joy). ===== */
.history-control{
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px;
}
.history-control-btn{
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color .12s ease, background .12s ease, color .12s ease, transform .1s var(--ease);
}
.history-control-btn:not(:disabled):hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.history-control-btn:disabled{ opacity: .3; cursor: not-allowed; }

/* Faol tabdan yuqoridagi chiziqli qatlam bosishni pastdagi qatlamga o'tkazadi (js/tools/tables.js: applyTabInteractivity) */
.gis-clickthrough, .gis-clickthrough svg, .gis-clickthrough svg *{ pointer-events: none !important; }