:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin:0; background:#0b0f14; color:#e8eef6; }
a { color:inherit; text-decoration:none; }
.container { max-width:1100px; margin:24px auto; padding:0 16px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#0f1620; border-bottom:1px solid #1b2635; }
.brand { font-weight:700; letter-spacing:0.5px; }
.nav { display:flex; gap:14px; align-items:center; }
.nav a { opacity:.85; padding:8px 10px; border-radius:10px; }
.nav a.active { background:#182436; opacity:1; }
.inline { display:inline; margin:0; }
.link { background:none; border:none; color:#e8eef6; cursor:pointer; opacity:.85; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px; }
.tile { background:#0f1620; border:1px solid #1b2635; border-radius:14px; padding:16px; }
.tile-title { opacity:.8; font-size:14px; }
.tile-value { font-size:34px; font-weight:700; margin-top:8px; }
.tile-hint { opacity:.6; margin-top:6px; font-size:13px; }
.panel { margin-top:18px; background:#0f1620; border:1px solid #1b2635; border-radius:14px; padding:16px; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.card { width:360px; background:#0f1620; border:1px solid #1b2635; border-radius:14px; padding:18px; }
label { display:block; margin-top:12px; opacity:.85; }
input { width:100%; margin-top:6px; padding:10px 12px; border-radius:10px; border:1px solid #26354a; background:#0b0f14; color:#e8eef6; }
button { margin-top:14px; width:100%; padding:10px 12px; border-radius:10px; border:0; background:#2b70ff; color:white; font-weight:600; cursor:pointer; }
.muted { opacity:.65; }
.alert { margin-top:12px; background:#3a1f1f; border:1px solid #7b2f2f; padding:10px 12px; border-radius:10px; }
.ok { margin-top:12px; background:#13351f; border:1px solid #2e7d4a; padding:10px 12px; border-radius:10px; }

/* --- top navigation like your example --- */
.topnav { display:flex; gap:10px; align-items:center; }
.topnav a { opacity:.85; padding:8px 10px; border-radius:10px; }
.topnav a.active { background:#182436; opacity:1; }

.topright { display:flex; gap:10px; align-items:center; }
.linkbtn { display:inline-block; padding:8px 10px; border-radius:10px; border:1px solid #26354a; background:#0b0f14; opacity:.9; }
.linkbtn.ghost { background:transparent; }
.linkbtn:hover { opacity:1; }

.tabs { display:flex; gap:10px; margin:14px 0 6px; flex-wrap:wrap; }
.tab { padding:10px 12px; border-radius:12px; border:1px solid #1b2635; background:#0f1620; opacity:.85; }
.tab.active { border-color:#2b70ff; opacity:1; }

/* --- prices table alignment --- */
.tbl-prices { table-layout: fixed; width: 100%; }
.tbl-prices th, .tbl-prices td { vertical-align: middle; }
.tbl-prices td { padding-top: 12px; padding-bottom: 12px; }
.tbl-prices .col-name  { width: 220px; }
.tbl-prices .col-stats { width: 260px; }
.tbl-prices .col-last  { width: 220px; }
.tbl-prices .col-diff  { width: 220px; }
.tbl-prices .col-act   { width: 160px; text-align: right; }

/* --- FIX: prices table alignment (override) --- */
.tbl-prices { table-layout: fixed; width: 100%; }

.tbl-prices th,
.tbl-prices td {
  vertical-align: middle;
  text-align: center;          /* центр по умолчанию */
}

.tbl-prices th.col-name,
.tbl-prices td.col-name {
  text-align: left;            /* только "Название" слева */
}

.tbl-prices th { padding: 10px 12px; font-weight: 600; }
.tbl-prices td { padding: 14px 12px; }

.tbl-prices .mono { font-variant-numeric: tabular-nums; }

.tbl-prices .col-name  { width: 240px; }
.tbl-prices .col-stats { width: 280px; }
.tbl-prices .col-last  { width: 240px; }
.tbl-prices .col-diff  { width: 240px; }
.tbl-prices .col-act   { width: 200px; }

.tbl-prices .btn,
.tbl-prices .linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

/* --- prices table: compact + no cut-off --- */
.panel .tablewrap { overflow-x: auto; padding-bottom: 6px; }

.tbl-prices { width: 100%; table-layout: fixed; }
.tbl-prices th, .tbl-prices td { padding: 10px 10px; }
.tbl-prices th, .tbl-prices td { text-align: center; }
.tbl-prices th.col-name, .tbl-prices td.col-name { text-align: left; }

.tbl-prices .col-name  { width: 200px; }
.tbl-prices .col-stats { width: 220px; }
.tbl-prices .col-last  { width: 200px; }
.tbl-prices .col-diff  { width: 200px; }
.tbl-prices .col-act   { width: 140px; }

.tbl-prices td.col-act { white-space: nowrap; }
.tbl-prices .linkbtn, .tbl-prices .btn { min-width: 96px; max-width: 140px; }


/* SPFM: columns modal */
.is-hidden { display: none !important; }

.table-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal.open{ display:flex; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.modal-card{
  position:relative;
  width:min(560px, 92vw);
  max-height:80vh;
  overflow:auto;
  padding:16px;
  border-radius:16px;
  background: rgba(13, 20, 32, .98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.modal-title{
  font-weight:700;
  font-size:16px;
}

.iconbtn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  border-radius:10px;
  width:34px;
  height:34px;
  cursor:pointer;
}

.cols-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.cols-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  user-select:none;
}

.cols-item input{
  width:18px;
  height:18px;
}

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* === SPFM: resizable columns === */
#priceDataTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#priceDataTable th, #priceDataTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#priceDataTable th {
  position: relative;
}
/* скрытие колонки (и ячеек, и col) */
#priceDataTable .is-hidden {
  display: none !important;
}
#priceDataTable col.is-hidden {
  display: none !important;
}

/* "линии" между колонками + область захвата мышью */
#priceDataTable th .col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
#priceDataTable th:last-child .col-resizer {
  display: none;
}
#priceDataTable th .col-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,.10);
}
body.is-resizing {
  cursor: col-resize !important;
}


/* ===== Visible column resize handles ===== */
#priceDataTable thead th { 
  position: relative;
  overflow: visible; /* чтобы полоска не обрезалась */
}

/* зона, за которую тянуть */
#priceDataTable thead th .col-resizer{
  position:absolute;
  top:0;
  right:-7px;
  width:14px;
  height:100%;
  cursor:col-resize;
  z-index:10;
}

/* сама видимая "полоска" */
#priceDataTable thead th .col-resizer::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:22%;
  bottom:22%;
  width:2px;
  border-radius:2px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

/* подсветка при наведении */
/* ===== /Visible column resize handles ===== */

/* highlight ONLY when hovering the handle, not the whole header */
#priceDataTable thead th .col-resizer:hover::before{
  background: rgba(255,255,255,.45);
}



/* === SPFM: resizable columns === */
#msAssortTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#msAssortTable th, #msAssortTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#msAssortTable th {
  position: relative;
}
/* скрытие колонки (и ячеек, и col) */
#msAssortTable .is-hidden {
  display: none !important;
}
#msAssortTable col.is-hidden {
  display: none !important;
}

/* "линии" между колонками + область захвата мышью */
#msAssortTable th .col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
#msAssortTable th:last-child .col-resizer {
  display: none;
}
#msAssortTable th .col-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,.10);
}
body.is-resizing {
  cursor: col-resize !important;
}


/* ===== Visible column resize handles ===== */
#msAssortTable thead th { 
  position: relative;
  overflow: visible; /* чтобы полоска не обрезалась */
}

/* зона, за которую тянуть */
#msAssortTable thead th .col-resizer{
  position:absolute;
  top:0;
  right:-7px;
  width:14px;
  height:100%;
  cursor:col-resize;
  z-index:10;
}

/* сама видимая "полоска" */
#msAssortTable thead th .col-resizer::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:22%;
  bottom:22%;
  width:2px;
  border-radius:2px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

/* подсветка при наведении */
/* ===== /Visible column resize handles ===== */

/* highlight ONLY when hovering the handle, not the whole header */
#msAssortTable thead th .col-resizer:hover::before{
  background: rgba(255,255,255,.45);
}


/* ===== SPFM ICONBTN ===== */
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.iconbtn{
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  cursor:pointer;
}
.iconbtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.iconbtn:active{
  transform: translateY(1px);
}
.iconbtn svg{
  width:18px;
  height:18px;
  opacity:.95;
}
/* ===== /SPFM ICONBTN ===== */

/* ===== panel header: title left, icon button right ===== */
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

/* маленькая квадратная кнопка (в 2 раза меньше) */
.iconbtn{
  width:24px;
  height:24px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.iconbtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.iconbtn svg{
  width:14px;
  height:14px;
  display:block;
}
/* ===== /panel header ===== */



/* ===== panel head (title left, icon right) ===== */
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px 0;
}
.panel-title{ margin:0; }

/* маленькая квадратная кнопка (в 2 раза меньше) */
.iconbtn{
  width:24px;
  height:24px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform: translateY(-2px); /* на одну линию с заголовком */
}
.iconbtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.iconbtn svg{ width:14px; height:14px; display:block; }

/* ===== columns modal ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.modal.open{ display:flex; }
.modal-card{
  width: min(520px, calc(100vw - 32px));
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,24,34,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title{ font-weight:700; }
.modal-body{
  padding:12px 14px 14px 14px;
  display:grid;
  gap:10px;
}
.chk{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.chk input{ transform: translateY(1px); }

/* ===== Columns modal: scroll (force) ===== */
#colsModal .modal-card{
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* скролл только внутри списка */
}

/* шапка/футер фикс */
#colsModal .modal-head,
#colsModal .modal-foot{
  flex: 0 0 auto !important;
}

/* сам список — единственное место со скроллом */
#colsModal #colsList{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* если вдруг где-то используется .modal-body — тоже пусть не ломает */
#colsModal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* ===== /Columns modal ===== */

/* ===== Columns modal: tighter spacing ===== */
#colsModal #colsList{
  gap: 6px !important;          /* было 10px */
}

#colsModal .cols-item{
  padding: 6px 10px !important;  /* было 10px 12px */
  gap: 8px !important;           /* расстояние между чекбоксом и текстом */
}

#colsModal .cols-item span{
  line-height: 1.2;
}

#colsModal .cols-item input{
  width: 16px;
  height: 16px;
}
/* ===== /Columns modal: tighter spacing ===== */

/* --- spfm toasts (macOS-style) --- */
#toastWrap{
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}
#toastWrap .toast{
  pointer-events: auto;
  width: min(420px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
#toastWrap .toast.show{ opacity: 1; transform: translateY(0); }
#toastWrap .toast.hide{ opacity: 0; transform: translateY(-6px); }
#toastWrap .toast-ic{
  width: 28px; height: 28px;
  border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
}
#toastWrap .toast.t-ok .toast-ic{ background: rgba(40,160,90,.18); color: rgba(20,120,60,.95); }
#toastWrap .toast.t-err .toast-ic{ background: rgba(200,60,60,.16); color: rgba(170,40,40,.95); }
#toastWrap .toast-ttl{ font-weight: 700; font-size: 13px; color: rgba(0,0,0,.80); }
#toastWrap .toast-msg{ margin-top: 2px; font-size: 13px; color: rgba(0,0,0,.75); white-space: pre-wrap; }
#toastWrap .toast-x{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin-top: -2px;
  color: rgba(0,0,0,.55);
}
#toastWrap .toast-x:hover{ color: rgba(0,0,0,.75); }
#toastWrap .toast-bar{
  margin-top: 8px;
  height: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
#toastWrap .toast-bar-i{
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,.22);
  transition: width .18s ease;
}
#toastWrap .toast.t-ok .toast-bar-i{ background: rgba(20,120,60,.55); }
#toastWrap .toast.t-err .toast-bar-i{ background: rgba(170,40,40,.55); }









#toastWrap .toast-bar2{  /* SPFM_TOAST_BAR2_V1 */
  margin-top: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
#toastWrap .toast-bar-i2{
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,.22);
  transition: width .18s ease;
}
#toastWrap .toast.t-ok .toast-bar-i2{ background: rgba(20,120,60,.55); }
#toastWrap .toast.t-err .toast-bar-i2{ background: rgba(170,40,40,.55); }

/* ===== Map modal (field mapping): fullscreen-ish ===== */
#mapModal{ align-items: center; justify-content: center; }

/* почти во весь экран: поля вокруг */
#mapModal .modal-card{
  width: calc(100vw - 96px) !important;   /* 48px слева + 48px справа */
  max-width: 2200px !important;
  height: calc(100vh - 112px) !important; /* 56px сверху + 56px снизу */
  max-height: calc(100vh - 112px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px;
}

/* на маленьких экранах — почти впритык */
@media (max-width: 900px){
  #mapModal .modal-card{
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 12px;
  }
}

#mapModal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* ===== /Map modal ===== */

/* ===== Map modal: fix close buttons (clicks) ===== */
#mapModal { position: fixed; inset: 0; }

#mapModal .modal-backdrop{
  pointer-events: none !important;  /* не ловит клики */
  z-index: 0 !important;
}

#mapModal .modal-card{
  position: relative !important;
  z-index: 2 !important;            /* поверх бэкдропа */
}

#mapModal .modal-head,
#mapModal .modal-foot,
#mapModal [data-close]{
  position: relative;
  z-index: 3;
  pointer-events: auto !important;  /* кнопки кликабельны */
}
/* ===== /Map modal: fix close buttons ===== */

/* Mapping preview: inset + sticky header */
.map-preview-scroll{
  position: relative;
  max-height: calc(100vh - 260px);
  overflow: auto;

  /* чуть больше внутренних отступов, чтобы контент не лип к рамке и скроллбару */
  padding: 12px 12px 14px 12px;

  border-radius: 14px;
  background: rgba(0,0,0,0.18);

  /* важно: рамку рисуем ОТДЕЛЬНО поверх через ::after */
  box-shadow: none;

  /* чтобы скроллбар не "съедал" правый край (где поддерживается) */
  scrollbar-gutter: stable both-edges;
}

.map-preview-scroll::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;

  /* одинаковая рамка со всех сторон + "вдавленность" */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 18px 40px rgba(0,0,0,0.55);
}
/* table inside scroll wrapper */
.map-preview-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* sticky letters (A,B,C...) */
.map-preview-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(12, 16, 26, 0.92);
  backdrop-filter: blur(6px);
}

/* optional: make header corners nicer */
.map-preview-table thead th:first-child{ border-top-left-radius: 10px; }
.map-preview-table thead th:last-child{ border-top-right-radius: 10px; }


/* --- MAP PREVIEW: frame OUTSIDE scroll (fix right/bottom clipping) --- */

/* внешний НЕскроллящийся контейнер с рамкой/инсетом */
.map-preview-frame{
  position: relative;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}

/* рамка/вдавленность поверх контента, всегда видна */
.map-preview-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 18px 40px rgba(0,0,0,0.55);
}

/* внутренний скролл */
.map-preview-frame > .map-preview-scroll{
  max-height: calc(100vh - 260px);
  overflow: auto;
  border-radius: 14px;

  /* отступы важны: чтобы контент/скроллбар не "съедали" правый/нижний край рамки */
  padding: 12px 18px 18px 12px;

  background: transparent;

  /* где поддерживается — резервируем место под скроллбар */
  scrollbar-gutter: stable both-edges;
}

/* выключаем старую попытку рамки на .map-preview-scroll (если она осталась выше в файле) */
.map-preview-scroll::after{
  content: none !important;
}


/* --- MAP MODAL: правильный flex-лейаут, чтобы ничего не обрезалось --- */
#mapModal .modal-card{
  display: flex;
  flex-direction: column;
  max-height: 88vh; /* чтобы влезало на экран */
}

/* тело модалки растягивается и НЕ даёт рамке клипаться */
#mapModal .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* важно: скролл внутри превью, а не у body */
  padding: 12px 0 0 0 !important; /* твой inline */
}

/* статус больше не занимает место */
#mapModal #mapStatus{
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* контейнер контента — растягиваемый, меньше нижнего отступа */
#mapModal #mapContent{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 8px 16px !important; /* ближе к кнопке */
}

/* подвал не растягивается */
#mapModal .modal-foot{
  flex: 0 0 auto;
}


/* mapping selects row + sticky letters row */
.map-preview-table thead tr:first-child th{
  position: sticky;
  top: 0 !important;
  z-index: 8;
  background: rgba(12, 16, 26, 0.92);
  backdrop-filter: blur(6px);
  padding: 6px 6px;
}

.map-preview-table thead tr:nth-child(2) th{
  position: sticky;
  top: 42px !important; /* высота строки селектов */
  z-index: 7;
  background: rgba(12, 16, 26, 0.92);
  backdrop-filter: blur(6px);
}

.map-col-select{
  width: 100%;
  min-width: 70px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  outline: none;
  font-size: 12px;
}


/* --- Toast must be above mapping modal --- */
#toastWrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
}

/* SPFM: mapping advanced */
.adv-map-fields{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px 12px;
  align-items: center;
}
.adv-map-fields .adv-lbl{
  font-size: 13px;
  color: rgba(255,255,255,.80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-map-fields .adv-inp{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.adv-map-fields .adv-inp:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

/* SPFM: map modal - keep modal width, scroll only preview table */
#mapModal .modal-card { overflow: hidden; }          /* чтобы контент не расширял карточку */
#mapModal .modal-body { overflow-x: hidden; }        /* чтобы модалка НЕ скроллилась по X */
#mapModal #mapContent { overflow-x: hidden; }        /* защита, если table тянет контейнер */

#mapModal .map-preview-scroll{
  max-width: 100%;
  overflow-x: auto;                                  /* X-скролл только тут */
  overflow-y: auto;
}

#mapModal .map-preview-table{
  width: max-content;                                /* таблица может быть шире, но внутри скролла */
  min-width: 100%;
}

/* SPFM: fix clipping of advanced mapping panel */
#mapModal .modal-card { overflow: visible !important; }   /* НЕ режем контент по краям */
#mapModal .modal-body { overflow-x: hidden !important; }  /* X-скролл запрещён на модалке */
#mapModal #mapContent { overflow-x: hidden !important; }

#mapModal #mapAdvanced,
#mapModal #mapAdvancedBar{
  box-sizing: border-box;
  width: 100%;
}

/* чуть больше воздуха справа, чтобы инпуты не упирались в край */
#mapModal #mapAdvanced > div { padding-right: 24px !important; }

/* === SPFM: price table visual fixes (override) === */
#priceDataTable th, #priceDataTable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
#priceDataTable th:last-child, #priceDataTable td:last-child{
  border-right: none;
}
#priceDataTable thead th{
  font-weight: 650;
  background: rgba(255,255,255,.02);
}
#priceDataTable tbody tr:hover td{
  background: rgba(255,255,255,.02);
}

/* === SPFM: ellipsis for overflowing cells === */
#priceDataTable th, #priceDataTable td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === SPFM: force ellipsis in price table === */
#priceDataTable th, #priceDataTable td{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 1px; /* помогает text-overflow в таблицах */
}




/* === SPFM: price table visual fixes (override) === */
#msAssortTable th, #msAssortTable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
#msAssortTable th:last-child, #msAssortTable td:last-child{
  border-right: none;
}
#msAssortTable thead th{
  font-weight: 650;
  background: rgba(255,255,255,.02);
}
#msAssortTable tbody tr:hover td{
  background: rgba(255,255,255,.02);
}

/* === SPFM: ellipsis for overflowing cells === */
#msAssortTable th, #msAssortTable td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === SPFM: force ellipsis in price table === */
#msAssortTable th, #msAssortTable td{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 1px; /* помогает text-overflow в таблицах */
}



/* --- pager (price table) --- */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pager-left, .pager-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.pager-select{
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
}
.page-buttons{
  display:flex;
  align-items:center;
  gap:6px;
}
.page-buttons .ellipsis{
  color:#888;
  padding:0 4px;
}
.btn.is-active{
  outline:2px solid rgba(0,0,0,0.15);
}


/* --- SPFM: shared segmented + ios-switch (used in settings) --- */
.segmented{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:12px;background:rgba(255,255,255,.06);border:0;overflow:hidden;}
.segmented::before{content:"";position:absolute;inset:0;border-radius:12px;border:1px solid rgba(255,255,255,.14);pointer-events:none;}
.segmented input{position:absolute;opacity:0;pointer-events:none;}
.segmented label{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;margin:0!important;line-height:1;cursor:pointer;user-select:none;}
.segmented input:checked + label{background:rgba(10,15,25,.85);box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);}

.ios-switch{display:inline-flex;align-items:center;justify-content:flex-end;cursor:pointer;}
.ios-switch input{position:absolute;opacity:0;pointer-events:none;}
.ios-switch .track{width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);position:relative;transition:all .15s ease;}
.ios-switch .track:after{content:"";width:24px;height:24px;border-radius:50%;position:absolute;top:1px;left:1px;background:rgba(255,255,255,.90);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:all .15s ease;}
.ios-switch input:checked + .track{background:rgba(64,160,255,.55);border-color:rgba(64,160,255,.70);}
.ios-switch input:checked + .track:after{transform:translateX(18px);background:rgba(255,255,255,.95);}

.slide{max-height:0;opacity:0;overflow:hidden;transition:max-height .20s ease, opacity .20s ease;}
.slide.is-open{max-height:900px;opacity:1;}
.cfg-disabled{opacity:.45;pointer-events:none;filter:grayscale(.2);}

.times-list{display:flex;flex-direction:column;gap:8px;}
.time-row{display:flex;gap:10px;align-items:center;}
.time-row input[type="time"],.time-row input[type="text"]{flex:1 1 auto;}
.time-row .tinybtn{width:auto;margin:0;padding:8px 10px;border-radius:10px;border:1px solid #26354a;background:#0b0f14;color:#e8eef6;cursor:pointer;opacity:.9;}
.time-row .tinybtn:hover{opacity:1;}