@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ----------------- Единый контейнер и 12-колоночная сетка ----------------- */
.header-outer{
  background:#ffffff;
  height:72px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  display:flex;
  align-items:center;
}
.header-inner{
  max-width:1360px;
  margin:0 auto;
  padding:0 32px 0 80px; /* слева 80px — логотип со 2-го блока (40+40) */
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  align-items:center;
}

/* Кнопка «Войти в личный кабинет» — блоки 27–32 по горизонтали (правая часть хедера) */
.header-login-wrap{
  grid-column:10 / -1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.header-login-btn{
  font-size:14px;
  font-weight:500;
  color:#ffffff;
  background:#2563EB;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  cursor:pointer;
}

.header-login-btn:hover{
  background:#1D4ED8;
}

/* ----------------- Button.Primary.Logout (Figma) ----------------- */
.btn-primary-logout{
  width:143px;
  height:44px;
  border-radius:6px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px; /* Figma: padding 32px 16px (вертикаль игнорируем из-за фикс. высоты 44px) */
  background:linear-gradient(72deg, #1488E6, #0B4C80);
  color:#FFFFFF;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
  box-sizing:border-box;
}
.btn-primary-logout:focus{
  outline:2px solid rgba(255,255,255,0.8);
  outline-offset:2px;
}
.btn-primary-logout:hover{
  filter:brightness(1.05);
}

/* ----------------- Page.Cabinet layout (Figma spec) ----------------- */
.cabinet-root{
  width:1440px;
  min-height:2805px;
  background:#E0E0E0;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  box-sizing:border-box;
}
.cabinet-top-spacer{
  height:40px;
  width:100%;
}

/* Header block */
.cabinet-header{
  width:1440px;
  height:154px;
  background:#FFFFFF;
  border:3px solid #F5F5F5;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:85px;
  padding-right:85px;
  box-sizing:border-box;
}
.cabinet-header-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cabinet-header-title{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:32px;
  font-weight:600;
  color:#4C4C4C;
}
.cabinet-header-underline{
  width:200px;
  height:5px;
  background:#4C4C4C;
  margin-top:10px;
}

/* Logout button in header */
.cabinet-logout-btn{
  width:237px;
  height:107px;
  border-radius:10px;
  background:#FFFFFF;
  border:1px solid #000000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:24px;
  font-weight:500;
  color:#000000;
  cursor:pointer;
  box-sizing:border-box;
}

/* Под header: зона карточек */
.cabinet-cards-section{
  width:1440px;
  background:#D9D9D9;
  padding:40px 60px;
  box-sizing:border-box;
}
.cabinet-cards-row{
  display:flex;
  flex-direction:row;
  gap:40px;
}
.cabinet-card{
  width:237px;
  height:107px;
  background:#FFFFFF;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  color:#000000;
}

/* ----------------- Новый layout Page.Cabinet (единая grid) ----------------- */
.cabinet-page{
  display:flex;
  justify-content:center;
  /* ИСХОДНО: background:#5F8289; общий фон страницы по макету */
  background:#FFFFFF; /* тест: белая подложка для всей страницы */
  padding:32px 0 60px 0;
  width:100%;
  box-sizing:border-box;
}

.cabinet-container{
  /* ИСХОДНО: 1273px; по макету и измерениям пользователя
     выравниваем ширину контейнера под суммарную длину ряда 1283px */
  width:1283px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:32px;
  row-gap:18px; /* единый вертикальный шаг между рядами */
}


/* Header */
.header-section{
  grid-column:1 / -1;
  background:#FFFFFF;
  border:3px solid #F5F5F5;
  border-radius:4px;
  padding:32px 85px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
  position:relative; /* для позиционирования кнопки в правом верхнем углу */
}
.title-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.title-text{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:32px;
  font-weight:600;
  color:#4C4C4C;
}
.title-underline{
  width:180px;
  height:4px;
  background:#4C4C4C;
  border-radius:2px;
}
.logout-btn{
  position:absolute;
  top:6px;
  right:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px; /* верх/низ 6px, лево/право 10px */
  border:2px solid #4C4C4C;
  border-radius:4px;
  background:#FFFFFF;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:10px;  /* шрифт 10px */
  font-weight:500;
  cursor:pointer;
}

/* KPI wrapper + Stats */
.kpi-wrapper{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:6px; /* небольшой зазор между кнопкой и карточками */
}
.kpi-toggle-btn{
  align-self:flex-start; /* прижимаем к левому краю первого контейнера */
  font-size:10px;
  padding:4px 8px;
  border-radius:4px;
  border:1px solid #4C4C4C;
  background:#FFFFFF;
  cursor:pointer;
}
.stats-strip{
  background:transparent; /* убираем серую плашку под карточками */
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-sizing:border-box;
  margin-bottom:18px; /* вместе с row-gap 18 даёт 36px до следующего ряда */
}
.stat-card{
  width:237px;
  height:107px;
  background:#FFFFFF;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* заголовок у верхнего padding, значение у нижнего */
  padding:18px 16px; /* 18px сверху и снизу */
  box-sizing:border-box;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.stat-card-title{
  color:#000000;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
  margin-bottom:0;
}
.stat-card-value{
  color:#000000;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:24px;
  font-style:normal;
  font-weight:500;
  line-height:normal;
}

/* Charts row (2 блока) */
.charts-wrapper{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.charts-toggle-btn{
  align-self:flex-start;
  font-size:10px;
  padding:4px 8px;
  border-radius:4px;
  border:1px solid #4C4C4C;
  background:#FFFFFF;
  cursor:pointer;
}
.charts-row{
  display:flex;
  gap:24px;
}

/* Discounter only: tighter gap between left/right charts */
.charts-row.discounter-charts-row{
  gap:10px;
}
.chart-left{
  width:755px;
  height:386px;
  /* ИСХОДНО: просто белый прямоугольник без рамки/тени
     ТЕСТ: делаем оформленный блок, как по ТЗ */
  background:#FFFFFF;
  border-radius:4px;
  border:1px solid rgba(217, 217, 217, 0.97);
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.10);
  display:flex;
  flex-direction:column; /* KPI и подпись вертикально, сверху вниз */
  align-items:flex-start;
  justify-content:flex-start;
  padding:24px 24px 0 24px; /* немного внутренних отступов */
  box-sizing:border-box;
  flex:1 1 auto;
  min-width:0;
}

/* KPI в левом блоке первого ряда: значение + подпись */
.total-stores-value{
  color:#000000;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:48px;
  font-style:normal;
  font-weight:700;
  line-height:normal;
  margin-left:-4px; /* ещё на 4px влево */
  margin-top:-18px; /* ещё на 10px вверх */
}

.total-stores-label{
  margin-top:0;    /* ещё на 8px выше */
  margin-left:-4px; /* на 4px влево */
  color:#000000;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
}

.chart-right{
  width:496px;
  height:386px;
  background:transparent; /* убираем общий внешний контур */
  border-radius:4px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:175px 165px 193px 165px; /* как в Figma */
  box-sizing:border-box;
  flex:0 0 496px; /* фиксируем как у small-card */
}

/* 8053 (cabinet_nographs): левый блок должен быть как small-card (496px), правый — тянется */
.charts-row.charts-row--nographs{
  gap:32px; /* как в 1-м ряду */
  /* выравниваем блоки по нижнему краю, чтобы левый
     блок стал на один уровень с виджетами справа */
  align-items:flex-end;
}
.charts-row.charts-row--nographs .chart-left{
  width:496px;
  flex:0 0 496px;
  /* по высоте выравниваем с самим виджетом "Количество по форматам"
     (примерно половина правого блока: (386 - 18) / 2 ≈ 184px) */
  height:184px;
}
.charts-row.charts-row--nographs .chart-right{
  /* правый столбец такого же размера, как блок с картой внизу,
     чтобы все правые края выстроились по одной вертикали */
  width:755px;      /* как у .big-right-card */
  flex:0 0 755px;
}

/* 8053: правый блок во 2-м ряду делим на 2 "карточки" */
.charts-row.charts-row--nographs .chart-right.chart-right--pie{
  /* внешний контейнер делаем прозрачным, чтобы gap выглядел как разделение между блоками */
  background:transparent;
  border-radius:0;
  overflow:visible;
}

/* Вариант правого блока с круговой диаграммой: даём графику занять весь контейнер */
.chart-right.chart-right--pie{
  justify-content:stretch;
  align-items:stretch;
  padding:0;
  /* фиксируем ширину как у small-card (виджет по сетям) */
  width:496px;
  flex:0 0 496px;
}

/* Split layout inside right chart block (2 равные части + разделитель) */
.chart-right-split{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px; /* как между рядами */
}
.chart-right-pane{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  background:#FFFFFF;
  border-radius:4px;
  /* у каждого отдельного виджета своя рамка и тень */
  border:1px solid rgba(217, 217, 217, 0.97);
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.10);
  box-sizing:border-box;
  overflow:hidden; /* чтобы содержимое (виджет) не вылезало за границы */
}

/* Верхний правый блок первого ряда (над "Количество по форматам" и
   "Количество по федеральным округам"): только скругление и белый фон,
   без рамки и тени */
.chart-right-pane--top{
  background:#FFFFFF;
  border-radius:4px;
  border:none;
  box-shadow:none;
}

/* 8053: для верхней панели используем размеры колонки по умолчанию,
   без дополнительного растяжения и смещения — так правый край
   совпадает с нижними блоками и картой */
.charts-row.charts-row--nographs .chart-right-pane--top{
  width:100%;
  margin-left:0;
}

/* Нижняя часть справа: внутри два блока по горизонтали */
.chart-right-pane--bottom{
  background:transparent;
  border-radius:0;
  overflow:visible;
  border:none;       /* убираем общую рамку вокруг двух виджетов */
  box-shadow:none;   /* и общую тень */
}
.chart-right-bottom-row{
  display:flex;
  flex-direction:row;
  gap:32px; /* как между левым и правым блоками ряда */
  width:100%;
  height:100%;
  align-items:stretch;
}

/* Bottom analytics (3-й ряд) */
.bottom-wrapper{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:6px;
  /* слегка уменьшаем расстояние до верхнего ряда (карта ближе к правым блокам выше) */
  margin-top:-6px;
}
.bottom-toggle-btn{
  align-self:flex-start;
  font-size:10px;
  padding:4px 8px;
  border-radius:4px;
  border:1px solid #4C4C4C;
  background:#FFFFFF;
  cursor:pointer;
}
.bottom-row{
  display:flex;
  gap:32px;
}
.bottom-left-column{
  display:flex;
  flex-direction:column;
  gap:13px; /* 303 + 303 + 13 = 619, как высота правого блока */
  height:619px; /* чтобы две карточки слева ровно совпадали с картой по высоте */
}

.bottom-left-column .small-card{
  flex:1 1 0;
  height:auto; /* высота считается от контейнера + gap, чтобы не было расхождений в пикселях */
  min-height:0;
}
.small-card{
  width:496px;
  height:303px;
  background:#FFFFFF;
  border-radius:4px;
  border:1px solid rgba(217, 217, 217, 0.97);
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.10);
}
.big-right-card{
  width:755px;
  height:619px;
  background:#FFFFFF;
  border-radius:4px;
  border:1px solid rgba(217, 217, 217, 0.97);
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.10);
  overflow:hidden; /* чтобы содержимое (карта) повторяло скругление */
}

/* Карта внутри большого правого блока: наследуем скругление углов */
.big-right-card .dash-graph,
.big-right-card .js-plotly-plot{
  border-radius:4px;
}

.map-card-inner{
  position:relative;
  width:100%;
  height:100%;
}

.map-card-inner .dash-graph{
  height:100%;
}

.map-show-points-btn{
  position:absolute;
  top:10px;
  left:10px;
  z-index:10;
  border-radius:4px;
  border:1px solid #5F8289;
  background:#5F8289;
  color:#FFF;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:12px;
  font-style:normal;
  font-weight:600;
  line-height:normal;
  padding:8px 12px;
  cursor:pointer;
}

.plant-search-input{
  position:absolute;
  top:10px;
  right:10px;
  z-index:10;
  min-width:180px;
  padding:6px 10px;
  border-radius:4px;
  border:1px solid #CBD5E1;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:12px;
  box-sizing:border-box;
}

.map-show-points-btn.is-off{
  opacity:0.3;
}

/* Final block */
.final-container{
  grid-column:1 / -1;
  height:924px; /* фиксированная высота по макету */
  background:#FFFFFF;
  border-radius:4px;
  border:1px solid #BDBDBD;
  position:relative;
  box-sizing:border-box;
}

.final-inner-bar{
  width:1254px;
  height:28px;
  margin:4px auto 0 auto; /* сверху 4px, по центру по горизонтали */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:4px 8px;  /* небольшой отступ сверху/слева/справа */
  border-radius:4px;
  border:1px solid #BDBDBD;
  background:#FFFFFF;
  box-sizing:border-box;
}

.final-inner-header{
  display:flex;
  align-items:center;
  gap:6px;
}

.final-inner-title{
  margin-left:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  font-weight:500;
  color:#000000;
}

.final-inner-icon{
  font-size:11px;
  line-height:1;
}

.final-inner-row{
  display:flex;
  gap:16px;
  margin-top:15px;
}

.final-card-wrap{
  width:231px;
  display:flex;
  flex-direction:column;
}

.final-inner-card{
  width:231px;
  height:78px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,0.58);
  background:#FFFFFF;
  box-sizing:border-box;
  position:relative;
}

.final-card-title{
  margin-bottom:4px;
  color:#000000;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  font-style:normal;
  font-weight:500;
  line-height:normal;
}

.final-card-plus{
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,0.58);
  background:#FFFFFF;
  font-size:14px;
  font-weight:500;
  line-height:1;
  padding:0;
  cursor:pointer;
}

/* Чекбоксы в списках сводной */
.pivot-checklist{
  margin:4px 4px 4px 20px; /* сдвиг списка вправо на 20px */
}

.pivot-check-input{
  margin-right:4px;
}

.pivot-check-label{
  display:flex;
  align-items:center;
  width:125px; /* 89px + 36px по ТЗ */
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:8px;
  font-style:normal;
  font-weight:300;
  line-height:normal;
  color:#000000;
  padding:2px 0;
  border-bottom:0.5px solid rgba(0,0,0,0.5);
}

.pivot-check-label:last-child{
  border-bottom:none;
}

.final-selected-display{
  margin-top:2px;
  margin-left:20px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:8px;
  font-style:normal;
  font-weight:300;
  line-height:normal;
  color:#000000;
}

/* Сводная таблица в блоке 4:
   - отступ 24px от зоны настроек
   - занимает всю оставшуюся высоту с зазором 24px снизу */
.pivot-table-wrap{
  margin-top:24px;
  height:calc(100% - 150px - 24px); /* 150px — высота секции настроек при раскрытии */
  box-sizing:border-box;
}
.main-container{
  max-width:1360px;
  margin:0 auto;
  padding:104px 40px 40px 40px; /* сверху под хедер, слева/справа кратно 40px */
  --grid-block:40px;
  min-height:max(100vh, calc(104px + 34 * 40px)); /* зона сводной таблицы до блока 33 */
  box-sizing:border-box;
  position:relative;
  /* Рабочая сетка 40x40px: начало в (0,0) padding-box, чтобы блоки совпадали с линиями */
  background-origin:padding-box;
  background-image:
    linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px);
  background-size:40px 40px;
}

/* Зона сводной таблицы (блоки Y 20..33, X 2..30) */
.pivot-table-section{ }
.pivot-zone-title{
  font-size:14px;
  font-weight:600;
  color:#0F172A;
  margin-bottom:12px;
}
.pivot-zone-subtitle{
  font-size:12px;
  font-weight:500;
  color:#64748B;
  margin-bottom:8px;
}
.pivot-zone-options{
  font-size:12px;
  color:#475569;
  line-height:1.5;
  margin:0;
  padding-left:20px;
}
.pivot-zone-options li{ margin-bottom:6px; }
.pivot-zone-placeholder{ }
.pivot-config-panel{
  flex-shrink:0;
  margin-bottom:12px;
}
.pivot-config-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  align-items:flex-end;
}
.pivot-field-wrap{
  min-width:180px;
}
.pivot-label{
  display:block;
  font-size:11px;
  font-weight:500;
  color:#64748B;
  margin-bottom:4px;
}
.pivot-dropdown{ min-width:160px; }
.pivot-zone-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  margin-bottom:8px;
}
.pivot-header-buttons{
  display:flex;
  gap:6px;
  align-items:center;
}
.pivot-header-btn{
  width:32px;
  height:32px;
  border:1px solid #E5E7EB;
  background:#fff;
  border-radius:6px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:#64748B;
  padding:0;
}
.pivot-header-btn:hover{
  background:#F1F5F9;
  color:#0F172A;
}
/* Выдвижная панель справа, 7 блоков (280px) */
.pivot-zone-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pivot-slide-panel{
  position:absolute;
  top:0;
  right:-280px;
  width:280px;
  height:100%;
  background:#fff;
  border-left:1px solid #E5E7EB;
  box-shadow:-4px 0 12px rgba(0,0,0,0.06);
  padding:12px;
  overflow-y:auto;
  transition:right 0.2s ease;
  z-index:10;
  font-size:11px;
}
.pivot-slide-panel--open{
  right:0;
}
.pivot-panel-title{
  font-size:11px;
  font-weight:600;
  color:#0F172A;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid #E5E7EB;
  white-space:nowrap;
}
.pivot-panel-block{
  margin-bottom:14px;
}
.pivot-panel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.pivot-panel-label{
  font-size:11px;
  font-weight:500;
  color:#475569;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.pivot-panel-dropdown-wrap{
  font-size:11px;
  margin-top:6px;
}
.pivot-panel-dropdown-wrap .Select-control,
.pivot-panel-dropdown-wrap .Select-value-label,
.pivot-panel-value-dropdown .Select-control,
.pivot-panel-value-dropdown .Select-value-label{
  font-size:11px !important;
}
.pivot-panel-plus{
  width:24px;
  height:24px;
  border:1px solid #CBD5E1;
  background:#fff;
  border-radius:4px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  color:#64748B;
  padding:0;
  flex-shrink:0;
}
.pivot-panel-plus:hover{
  background:#E2E8F0;
  color:#0F172A;
}
.pivot-panel-dropdown-wrap{
  margin-top:6px;
}

/* Специальные настройки для выпадающего списка Столбцов */
#pivot-cols-dropdown-wrap{
  height:100px;
  overflow-y:auto;
}
.pivot-cols-inner{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pivot-panel-plus--inside{
  align-self:flex-start;
}
#pivot-cols-dropdown-wrap .Select-control,
#pivot-cols-dropdown-wrap .Select-value-label,
#pivot-cols-dropdown-wrap .Select-option{
  font-size:7px !important;
}
.pivot-panel-value-dropdown{ margin-top:4px; }
.pivot-table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
}

/* Подписи к сетке (как в шахматах): сверху по X, слева по Y */
.grid-ruler-top{
  position:absolute;
  top:80px;              /* немного ниже хедера */
  left:40px;             /* совпадает с началом сетки */
  right:40px;
  height:16px;
  display:flex;
  pointer-events:none;
  font-size:10px;
  color:#94A3B8;
}

.grid-ruler-top .grid-ruler-label{
  flex:0 0 40px;         /* один блок = 40px */
  text-align:center;
}

.grid-ruler-left{
  position:absolute;
  top:104px;             /* начало рабочей области */
  bottom:40px;
  left:0;
  width:40px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  pointer-events:none;
  font-size:10px;
  color:#94A3B8;
}

.grid-ruler-left .grid-ruler-label{
  flex:0 0 40px;         /* один блок по вертикали = 40px */
  padding-right:4px;
}

.page-placeholder{
  max-width:1360px;
  margin:32px auto 64px;
  padding:0 32px;
  box-sizing:border-box;
  font-size:16px;
  color:#6B7280;
}

/* ----------------- Форматы: таблица + горизонтальный бар ----------------- */
/* Контейнер, позиционированный по сетке блоков: без отступов, ровно по линиям */
#format-cards-container.format-cards-grid-aligned{
  padding:0;
  margin:0;
  border-radius:0;
  box-sizing:border-box;
}
#format-cards-container.format-cards-grid-aligned .format-table{
  width:100%;
  min-height:100%;
  box-sizing:border-box;
}

.format-table{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:10px;          /* как в списке сетей */
  padding:6px;
  min-height:84px;         /* 5 строк по 16px + 4*1px gap */
}

.format-table-row{
  display:grid;
  /* как .chain-rank-row: узкое имя | бар | значение */
  grid-template-columns:80px 160px 50px;
  column-gap:6px;
  align-items:center;
  height:16px;
  min-height:16px;
  flex-shrink:0;
}

.format-table-header{
  font-weight:600;
  color:#0F172A;
}

.format-table-header-cell{
  font-size:11px;
  color:#64748B;
}

.format-table-bar-header{
  text-align:left;
}

.format-table-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.format-table-count{
  text-align:left;
}

.format-bar-track{
  position:relative;
  width:100%;
  min-width:0;
  height:12px;
  border-radius:0;
  background:#D1D5DB;    /* как у bar по сетям */
  overflow:hidden;
}

.format-bar-fill{
  height:100%;
  border-radius:0;
  background:#1D4ED8;
}
.main-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  row-gap:200px;
  column-gap:6px;
  grid-template-rows:auto 500px;
}
.main-grid-item-kpi{
  /* Форматы: ровно над картой, та же ширина, что и у map-container */
  grid-column:6 / span 7;
}
/* Обёртка: ranking + map в одной строке вплотную, выравнивание по нижнему краю */
.main-grid-item-ranking-map-row{
  grid-column:2 / span 11;
  min-height:500px;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:0;
}
.main-grid-item-ranking{
  min-height:0;
  width:fit-content;
  max-width:100%;
  padding-right:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  flex-shrink:0;
  margin-top:40px; /* начало со 2-го блока по Y (1 блок = 40px) */
}
.main-grid-item-map{
  min-height:0;
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
}
.main-grid-item-map .dash-graph,
.main-grid-item-map .js-plotly-plot{
  flex:1;
  width:100%;
  min-height:0;
}

/* Скруглённые тултипы Plotly (карта и другие графики) */
.js-plotly-plot .hoverlayer .bg{
  rx:4px;
  ry:4px;
}

/* ----------------- DEBUG LAYOUT (DEBUG_LAYOUT=1) ----------------- */
.debug-grid-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  pointer-events:none;
}
.debug-layout .debug-grid-overlay{
  display:block;
}
.debug-grid-overlay .debug-grid-inner{
  max-width:1360px;
  margin:0 auto;
  padding:32px;
  height:100%;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:24px;
  box-sizing:border-box;
}
.debug-grid-overlay .debug-grid-col{
  border-right:1px solid rgba(37,99,235,0.12);
  min-height:100%;
}
.debug-grid-overlay .debug-grid-col:last-child{
  border-right:1px solid rgba(37,99,235,0.12);
}

.debug-block .debug-label{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:10000;
  font-size:10px;
  font-family:monospace;
  background:rgba(220,38,38,0.2);
  color:#991b1b;
  padding:2px 6px;
  border-radius:0 0 4px 0;
  pointer-events:none;
}
.debug-layout .debug-block{
  border:1px dashed rgba(220,38,38,0.8); /* вместо outline, ровно по краю блока */
  position:relative;
}
.debug-layout .debug-block .debug-label{
  display:block;
}

/* ----------------- Логотип в стиле Datawrapper (Динамика) ----------------- */
.app-logo{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
  padding-left:10px;
  overflow:visible;
  grid-column:2 / span 4;
}

/* ----------------- Визуальные toggle-переключатели ----------------- */
.region-pill{
  border-radius:999px;
  border:1px solid #E5E7EB;
  padding:4px 10px;
  background:#FFFFFF;
  font-size:11px;
  color:#4B5563;
  cursor:pointer;
}

.region-pill:hover{
  background:#F3F4F6;
}

.region-pill--active{
  border-color:#1D4ED8;
  background:#DBEAFE;
  color:#1D4ED8;
}

/* Вертикальный список регионов в отдельном блоке */
.region-cards{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  width:50%;
  max-width:50%;
  align-self:flex-start;
}

.region-cards-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.region-cards .region-pill{
  width:100%;
  text-align:left;
  justify-content:flex-start;
}

.toggle-row{
  display:flex;
  align-items:center;
  gap:24px;
}

.toggle-switch{
  display:flex;
  align-items:center;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.toggle-track{
  position:relative;
  width:44px;
  height:24px;
  border-radius:9999px;
  background:#D1D5DB; /* off по умолчанию */
  flex-shrink:0;
  box-sizing:border-box;
}

.toggle-switch::before{
  content:"";
  position:relative;
  display:block;
  width:20px;
  height:20px;
  border-radius:9999px;
  background:#FFFFFF;
  margin-left:2px;
  margin-right:2px;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

.toggle-on .toggle-track{
  background:#1D4ED8; /* ярко-синий когда включено */
}

.toggle-on::before{
  margin-left:22px;  /* сдвиг кружка вправо внутри 44px трека */
}

.toggle-label{
  margin-left:12px;
  font-size:14px;
  font-weight:500;
  color:#0F172A;
}

.toggle-on .toggle-label{
  color:#1D4ED8;
}
.app-logo-vbar{
  position:absolute;
  left:-10px;
  bottom:0;
  width:2px;
  top:-6px;
  background:#1f2937;
}
.app-logo-underline{
  position:absolute;
  left:-10px;
  right:0;
  bottom:0;
  height:2px;
  background:#1f2937;
}

/* ----------------- Нижняя таблица 10×8 ----------------- */
.bottom-table-section{
  margin-top:32px;
  padding:0 6px 32px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  box-sizing:border-box;
}

.bottom-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:12px;
}

.bottom-table th,
.bottom-table td{
  border:1px solid #E5E7EB;
  padding:6px;
  text-align:left;
}

.bottom-table th{
  background:#F9FAFB;
  font-weight:500;
  color:#0F172A;
}
.app-logo-text{
  position:relative;
  font-size:20px;
  font-weight:600;
  color:#1f2937;
  letter-spacing:-0.02em;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.kpi-card{
  background:#ffffff;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  width:320px;
}

.kpi-title{
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
}

.kpi-value{
  font-size:30px;
  font-weight:800;
  color:#111827;
  line-height:1.1;
}

/* место под “динамику”, но без цифр */
.kpi-delta-wrap{
  margin-top:10px;
  height:28px;              /* фиксируем “окно” */
  display:flex;
  align-items:center;
}

.kpi-delta-empty{
  width:120px;
  height:18px;
  border-radius:999px;
  background:rgba(17,24,39,0.06); /* лёгкая плашка-заглушка */
}

.kpi-err{
  margin-top:10px;
  color:#b00020;
  font-size:12px;
  white-space:pre-wrap;
}

/* ----------------- Ranking: СЕТИ — ЧИСЛО ТОРГОВЫХ ТОЧЕК (Datawrapper: сетка + прямоугольные бары) ----------------- */
.chain-rank-card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:6px;
  width:fit-content;
  min-width:min-content;
  max-width:100%;
  box-shadow:none;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* Только для виджета "по сетям" (#chain-bar): выравнивание по блокам сетки */
#chain-bar.chain-rank-card{
  width:100%;
  padding:0 10px 20px 10px; /* сверху 0px, снизу 20px, по бокам 10px */
  box-sizing:border-box;
  margin-top:10px; /* лёгкий сдвиг вниз внутри small-card */
}

/* Только для виджета "по регионам" (#region-bar): такие же ширина и "воздух", как у сетей */
#region-bar.chain-rank-card{
  width:100%;
  padding:0 10px 20px 10px; /* сверху 0px, снизу 20px, по бокам 10px */
  box-sizing:border-box;
  margin-top:10px;
}

/* Только для виджета "по округам": как у сетей */
.district-bar.chain-rank-card{
  /* фиксированная ширина под сетку 80/80/160 (+ gap 2px) + padding */
  width:344px;
  padding:0 10px 10px 10px; /* снизу 10px */
  box-sizing:border-box;
  margin-top:0;
  margin-left:0;
  margin-right:0;
}

.district-bar .chain-rank-title{
  margin:0 0 0 0; /* ещё выше: убираем отступ до списка */
  padding-left:0; /* у карточки уже есть padding-left:10px */
}

/* Ещё на 5px ближе: убираем зазор перед линией-разделителем */
.district-bar .chain-rank-divider{
  margin-top:15px;
}

/* у списка тоже убираем общий padding-left, чтобы старт был ровно с 10px */
.district-bar .chain-rank-list{
  padding-left:0;
}

/* Округа: свои ширины колонок */
.district-only .chain-rank-row,
.district-only .chain-rank-row-active{
  grid-template-columns:100px 60px 160px;
  column-gap:2px;
}

/* Форматы: свои ширины колонок */
.format-bar .chain-rank-row,
.format-bar .chain-rank-row-active{
  grid-template-columns:100px 60px 160px;
  column-gap:2px;
}

/* 8053: нижний правый белый блок ужимаем под виджет + 10px воздуха справа */
.chart-right-pane--district{
  /* фиксируем одинаковую подложку для обоих виджетов (форматы/округа) */
  width:354px;           /* 344px виджет + 10px воздуха справа */
  flex:0 0 354px;
  height:100%;
  box-sizing:border-box;
}

#region-bar .chain-rank-row,
#region-bar .chain-rank-row-active{
  /* 1 столбец 40% | 2 столбец 15% | 3 столбец 45% */
  grid-template-columns:40% 15% 45%;
}

#chain-bar .chain-rank-col-header{
  /* 1: Торговая сеть, 2: Кол-во магазинов, 3: Доля от выборки (бар) */
  grid-template-columns:40% 15% 45%;
}

#chain-bar .chain-rank-row,
#chain-bar .chain-rank-row-active{
  /* 1 столбец 40% | 2 столбец 15% | 3 столбец 45% */
  grid-template-columns:40% 15% 45%;
}

#chain-bar .chain-rank-title{
  margin-bottom:0;
}

#chain-bar .chain-rank-divider{
  margin:6px 0 0; /* 6px воздуха между строкой и началом таблицы */
}

.chain-rank-header{
  display:flex;
  flex-direction:column;
  gap:0;             /* управляем отступами отдельно через margin */
  margin-bottom:0;
  position:relative;
}

.reset-chain-filter{
  position:absolute;
  top:0;
  right:0;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:11px;
  font-weight:700;
  color:#9CA3AF;
  cursor:pointer;
  padding:2px 4px;
}

.chain-rank-col-header{
  display:grid;
  grid-template-columns:15% 15% 25% 45%;
  column-gap:4px;
  margin-top:6px;               /* опускаем подписи столбцов на 6px */
  padding:0 10px 0 10px;        /* вплотную к серой линии */
  box-sizing:border-box;
}

.chain-rank-col-head{
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:7px;
  font-weight:700;
  line-height:normal;
  color:#000000;
}

.chain-rank-title{
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:normal;
  color:#000000;
  letter-spacing:0;
  margin:0 0 20px 0;   /* 20px от заголовка до шапки столбцов */
  padding-left:10px;
}

.chain-rank-subtitle{
  font-size:13px;
  font-weight:500;
  line-height:18px;
  color:#64748B;
  margin-bottom:12px;
}

.chain-reset-button{
  align-self:flex-start;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #E5E7EB;
  background:#FFFFFF;
  color:#64748B;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
}
.chain-reset-button:hover{
  background:#F9FAFB;
}

.chain-rank-divider{
  margin:0;
  height:1px;
  background:#E5E7EB;
}

.chain-rank-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  /* базовая высота для списка — без жёсткой привязки по высоте */
  overflow-y:auto;
  flex-shrink:0;
  padding-left:10px; /* чтобы список начинался на том же отступе, что и заголовок */
}

/* Для виджета "Количество торговых точек по регионам" задаём индивидуальную высоту списка,
   чтобы он заканчивался заметно выше низа блока (оставляем ~40px запаса) */
#region-bar .chain-rank-list{
  max-height:220px;
}

/* Для виджета "Количество торговых точек по сетям" делаем такой же запас снизу,
   чтобы список не упирался в нижний край блока */
#chain-bar .chain-rank-list{
  max-height:220px;
}


/* Строгая 3-колоночная сетка: 160px | 160px | 72px, gap 12px */
.chain-rank-row,
.chain-rank-row-active{
  display:grid;
  /* 1: название 15%, 2: число 15%, 3: (пусто/доля) 25%, 4: бар 45% */
  grid-template-columns:15% 15% 25% 45%;
  column-gap:4px;
  align-items:center;
  height:16px;
  min-height:16px;
  flex-shrink:0;
  border-radius:0;
  transition:background-color 150ms ease;
  cursor:pointer;
  width:100%;
  border:none;
  background:transparent;
  padding:0;
  font:inherit;
  text-align:left;
}

/* Для всех трёх вариантов (сети, регионы, форматы) используем одну сетку 30% | 60% | 10% */

/* ----------------- Таблица регионов (правый блок): чекбокс | регион | кол-во ТТ ----------------- */
.region-filter-table-wrap{
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow:auto;
  display:flex;
  flex-direction:column;
}

.region-filter-table-body{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}

.region-filter-table-row{
  display:grid;
  grid-template-columns:0.5fr 4fr 3fr;
  gap:0;
  align-items:center;
  min-height:8px;
  border-bottom:1px solid #E5E7EB;
  padding:0 8px;
}

.region-filter-table-header{
  background:#F1F5F9;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#0F172A;
  position:sticky;
  top:0;
  z-index:1;
}

.region-filter-table-cell{
  padding:3px 8px;
  font-size:10px;
  font-weight:400;
  color:#0F172A;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.region-filter-table-cell:first-child{
  white-space:normal;
}

.region-filter-table-cell-region{
  white-space:normal;
  word-break:break-word;
}

.region-filter-table-cell-count{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.region-filter-table-th{
  color:#0F172A;
  font-weight:500;
}

.region-filter-checkbox{
  width:16px;
  height:16px;
  cursor:pointer;
}

.region-filter-table-empty{
  padding:12px;
  font-size:13px;
  color:#94A3B8;
}

.region-filter-indicator{
  margin-right:8px;
  font-size:10px;
  color:#6b7280;
}

.format-filter-indicator{
  margin-right:8px;
  font-size:10px;
  color:#6b7280;
}

.district-filter-indicator{
  margin-right:8px;
  font-size:10px;
  color:#6b7280;
}

.chain-rank-row-active{
  background:#EFF6FF;
}

.chain-rank-row:hover{
  background:#f8fafc;
}

.chain-rank-row.is-selected{
  background:#f1f5f9;
}

.chain-rank-row.is-selected .chain-rank-name,
.chain-rank-row.is-selected .chain-rank-value{
  font-weight:600;
}

.chain-rank-row.is-selected .chain-rank-bar-fill{
  background:#5F8289;
}

/* Колонка 1: название сети (максимально компактно) */
.chain-rank-name{
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:11px;
  font-weight:300;
  color:#000000;
  line-height:normal;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Колонка 2: bar container — строгий прямоугольник, без скруглений */
.chain-rank-bar-track{
  display:block;
  width:100%;
  min-width:0;
  height:12px;
  background:#D1D5DB;
  border-radius:0;
  overflow:hidden;
}

.chain-rank-bar-fill,
.chain-rank-bar-fill-active{
  display:block;
  height:12px;
  background:#5F8289;
  border-radius:0;
  transition:width 200ms ease;
}

.chain-rank-bar-fill-active{
  background:#1D4ED8;
}

.chain-rank-row:hover .chain-rank-bar-fill{
  background:#2563EB;
}

/* Колонка 3: число, рядом с баром, tabular-nums */
.chain-rank-value,
.chain-rank-value-active{
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:11px;
  font-weight:300;
  line-height:normal;
  color:#000000;
  font-variant-numeric:tabular-nums;
  text-align:left;
}

.chain-rank-value-active{
  font-weight:600;
  color:#1D4ED8;
}

.chain-rank-empty{
  font-size:13px;
  color:#94a3b8;
  padding:8px 0;
}

/* ----------------- KPI форматы: плоский список (формат + число + вертикальный разделитель) ----------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

.format-lines{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:24px;
  font-family:Inter, system-ui, -apple-system, "SF Pro Text", sans-serif;
}

.format-line-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  padding-right:16px;
}

.format-line-label{
  font-size:12px;
  font-weight:500;
  line-height:18px;
  color:#0F172A;
  min-width:0;
}

.format-line-value{
  font-size:10px;
  font-weight:400;
  line-height:16px;
  color:#0F172A;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.format-line-divider{
  position:absolute;
  top:0;
  right:0;
  width:1px;
  height:100%;
  background:#E5E7EB;
}

.format-line-item:last-child .format-line-divider{
  display:none;
}