/* ЛЕЙАУТ: карта слева, таблица справа */
.kmap-layout{
  display:grid;
  grid-template-columns: 1fr 420px; /* карта + статистика */
  gap:24px;
  align-items:stretch; /* растягиваем оба блока по высоте */
}

/* таблица: переносы по умолчанию, чтобы отрасли занимали пространство */
.kmap-three th,
.kmap-three td {
  white-space: normal;
  word-break: break-word;
}

/* 2-й столбец — узкий и вправо (шапка тоже вправо для симметрии) */
.kmap-three thead th:nth-child(2),
.kmap-three tbody td:nth-child(2) {
  width: 70px;       /* сделай 60–80 по вкусу */
  max-width: 80px;
  text-align: right; /* значения и шапка вправо */
  white-space: nowrap; /* сами цифры не переносятся */
}

/* 3-й столбец — тоже вправо, чуть шире под "10 млн сом" */
.kmap-three thead th:nth-child(3),
.kmap-three tbody td:nth-child(3) {
  width: 110px;
  max-width: 130px;
  text-align: right;
  white-space: nowrap;
}

/* первая колонка забирает всё остальное место */
.kmap-three thead th:nth-child(1),
.kmap-three tbody td:nth-child(1) {
  width: auto;
}

/* строка Итого — выделение */
.kmap-three tr.k3-total td{
  font-weight: 800;
  background: #f3efe9;
  border-top: 2px solid rgba(0,0,0,.12);
}

/* футер с датой обновления */
.kmap-updated{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  color: #666;
  text-align: right;
}

.kmap-map-col,
.kmap-sidebar{
  display:flex;
  flex-direction:column;
}

.kmap-map{
  width:100%;
  height:100%;       /* теперь карта тянется ровно по высоте таблицы */
  min-height:460px;  /* можно оставить для страховки */
  border-radius:12px;
  overflow:hidden;
}

#map{ width:100%; height:100%; }

.kmap-three th,
.kmap-three td {
  white-space: normal !important;
  word-break: break-word;
}

.kmap-sidebar{
	background: #fff;
    border-radius: 0px;
    padding: 0px 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
    max-height: 100%;
    overflow: auto;
    overflow-x: hidden;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* планшеты */
@media (max-width:1200px){
  .kmap-layout{ grid-template-columns: 1fr 360px; gap:20px; }
}
/* мобильные — таблица вниз */
@media (max-width:768px){
  .kmap-layout{ grid-template-columns:1fr; }
  .kmap-map{ height: clamp(320px, 60vw, 420px); }
}

.leaflet-tooltip.kmap-label {
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 700;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}


/* Фон карты */
#map {
    background-color: #e9e9e9;
}

/* базовые цвета и pointer-events для путей */
.kmap-svg path {
    pointer-events: all;
    transition: fill .12s ease-in-out;
}

/* Бишкек как область — синий #1e3a8a; остальные регионы — #022068 */
.kmap-svg path[data-level="region"][data-bishkek="true"] {
    fill: #1e3a8a;
}

.kmap-svg path[data-level="region"]:not([data-bishkek="true"]) {
    fill: #022068;
}

/* метки (лейблы) */
.kmap-label {
    pointer-events: none;
}

.kmap-label__inner {
    background: rgba(2, 32, 104, .85);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    user-select: none;
}

/* Кнопка назад поверх всего */
#kmap-back { 
  position:absolute;
  top:12px;
  left:48px;         /* сдвиг правее кнопок зума */
  z-index:1000;
  display:none;      /* JS включает в ADM2 */
  background:rgba(255,255,255,.95);
  color:#111;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.1);
  font-size:13px;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.08); 
}

.kmap-label .leaflet-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-shadow:
    -1px -1px 0 #022068,
     1px -1px 0 #022068,
    -1px  1px 0 #022068,
     1px  1px 0 #022068; /* halo */
}

.industry-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Выбранный район — фиксируем класс (на случай ховера) */
.kmap-district-active { fill: #CA9E67 !important; }

/* заголовок над маркером */
.leaflet-tooltip.kmap-title {
    background: #022068;
    color: #222fff;
    border: none;
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 600;
}

#stats-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #222;
}

/* Сетка статистики */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.industry-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.industry-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.industry-title {
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #222;
    font-size: 1.1rem;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

.stat-label {
    font-size: 14px;
    color: #222;
}

.stat-value {
    font-weight: 600;
    color: #222;
}

.no-data {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7);
}

/* Стили для списка айыл аймаков */
.ayyl-list-container {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ayyl-list-title {
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
    font-size: 1.1rem;
}

.ayyl-scroll-container {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

.ayyl-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.ayyl-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.ayyl-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.ayyl-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.ayyl-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ayyl-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.ayyl-item.active {
    background: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.ayyl-name {
    flex-grow: 1;
    color: #222;
}

.ayyl-stats-badge {
    font-size: 12px;
    opacity: 0.7;
    color: #222;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    #stats {
        padding: 15px;
    }
    
    .industry-card {
        padding: 12px;
    }
    
    .ayyl-item {
        padding: 10px 12px;
    }
}

/* Общие улучшения читаемости */
#stats-content {
    color: rgba(255, 255, 255, 0.95);
}

.stat-value {
    color: #222;
    font-weight: 700;
}

.stat-label {
    color: #222;
}

/* Компактная матрица (строки = метрики, столбцы = отрасли) */
.kmap-matrix-wrap{
  overflow-x:hidden;             /* если не влезет по ширине — аккуратный скролл */
  margin-top:8px;
}
.kmap-matrix{
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  overflow:hidden;
  width:auto;                  /* не растягиваем на всю ширину */
  max-width:100%;
  font-size:13px;              /* компактный шрифт */
  table-layout:auto;
}

/* --- Узкая таблица 3 колонки: Отрасль | Кол-во техники | Сумма лизинга --- */
.kmap-three-wrap{
  /* раньше было overflow-x:auto; — из-за этого появлялся скролл */
  overflow-x: hidden;   /* запрещаем горизонтальный скролл внутри обёртки */
  margin-top:8px;
}

.kmap-three{
  width:100%;
  max-width:100%;       /* не выходить за пределы панели */
  table-layout: fixed;  /* фиксированная раскладка колонок — не расползается */
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  overflow:hidden;
  font-size:14px;
  color:#111;
}

.kmap-three thead th{
  background:#CA9E67;
  padding:10px 12px;
  text-align:left;
  font-weight:800;
  /* не ставим white-space:nowrap; чтобы шапка переносилась */
}

.kmap-three td{
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
  vertical-align:middle;
  word-break: break-word; /* длинные слова переносятся */
}

.kmap-three tbody tr:nth-child(even) td{ background:#fbfbfb; }
.kmap-three .k3-name{ font-weight:600; }
.kmap-three .k3-qty,
.kmap-three .k3-amt{ text-align:right; white-space:nowrap; } /* цифры не переносятся */

.kmap-matrix thead th{
  background:#CA9E67;          /* как у тебя в скрине */
  color:#111;
  white-space:nowrap;
  padding:8px 10px;            /* меньше отступы */
  text-align:center;
  font-weight:800;
}
.kmap-matrix tbody th.kmap-rowhead{
  background:#f7f7f7;
  color:#111;
  padding:8px 10px;
  text-align:left;
  font-weight:700;
  white-space:nowrap;
  border-top:1px solid rgba(0,0,0,.08);
}
.kmap-matrix td{
  padding:8px 10px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
  vertical-align:middle;
}
.kmap-matrix tbody tr:nth-child(even) td{
  background:#fbfbfb;
}
.kmap-matrix .kmap-num{
  text-align:center;           /* можно right, если хочешь выровнять по правому краю */
  white-space:nowrap;
  color: #111111;
}

.kmap-title{ margin: 0 0 6px 0; }
#stats{ padding: 12px 16px; }

.leaflet-tooltip.kmap-hover{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.15);
  border-radius:6px;
  padding:4px 8px;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Управляем шириной колонок через nth-child */
.kmap-three { table-layout: fixed; }                 /* фиксированная сетка */

.kmap-three thead th:nth-child(2),
.kmap-three tbody td:nth-child(2) {
  width: 93px;               /* сделай 60–80 по вкусу */
  max-width: 93px;
  text-align: center;
  white-space: nowrap;
}

.kmap-three thead th:nth-child(3),
.kmap-three tbody td:nth-child(3) {
  width: 140px;              /* под "10 млн сом" */
  max-width: 160px;
  text-align: right;
  white-space: nowrap;
}

.kmap-last-upd{
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* первая колонка занимает остаток */
.kmap-three thead th:nth-child(1),
.kmap-three tbody td:nth-child(1) {
  width: auto;
}

/* 📱 Адаптив под телефоны */
@media (max-width: 768px) {
  .kmap-three {
    font-size: 13px;  /* чуть меньше шрифт */
  }

  .kmap-three thead th,
  .kmap-three tbody td {
    padding: 6px 8px; /* компактные отступы */
  }

  /* колонка "Кол-во техники" ещё уже */
  .kmap-three thead th:nth-child(2),
  .kmap-three tbody td:nth-child(2) {
    width: 66px;
    max-width: 70px;
    font-size: 10px;
  }

  /* колонка "Сумма лизинга" поуже тоже */
  .kmap-three thead th:nth-child(3),
  .kmap-three tbody td:nth-child(3) {
    width: 88px;
    max-width: 90px;
    font-size: 10px;
  }

  /* колонка "Отрасль" занимает всё оставшееся */
  .kmap-three thead th:nth-child(1),
  .kmap-three tbody td:nth-child(1) {
    width: auto;
  }
}

@media (max-width: 480px) {
  .kmap-three {
    font-size: 12px;
  }

  .kmap-three thead th,
  .kmap-three tbody td {
    padding: 5px 6px;
  }
}

/* строка Итого */
.kmap-three tr.k3-total td{
  font-weight:800;
  background:#f3efe9;
  border-top:2px solid rgba(0,0,0,.12);
}