:root { font-family: "Recursive", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
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; }
.stack { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.btn-danger { background:#c24141; }
.btn-danger:hover { background:#d14d4d; }
.settings-tab { display:none; }
.settings-tab.active { display:block; }
.settings-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:8px; }
.settings-check { display:flex; align-items:center; gap:8px; }
.settings-check input { width:16px; height:16px; margin:0; }
.settings-note { margin-top:8px; font-size:12px; }
.tg-block { margin-top:12px; text-align:center; }
.tg-title { font-weight:600; margin-bottom:8px; }
.tg-widget { display:flex; justify-content:center; }
.tg-note { margin-top:8px; font-size:13px; }
.divider { position:relative; margin:14px 0; height:1px; background:#1b2635; }
.divider span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:0 8px; background:#0f1620; font-size:12px; color:rgba(232,238,246,0.7); }

/* --- 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; color:#e8eef6; cursor:pointer; width:auto; margin-top:0; display:inline-flex; align-items:center; }
.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);
}
.org-setup-modal .modal-card{
  width:min(420px, 92vw);
}

.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;
}

/* --- admin page --- */
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.admin-title { font-weight:700; font-size:16px; }
.admin-status { margin:6px 0 10px; }
.admin-status.is-error { color:#ff8080; }
.tbl-admin { width:100%; border-collapse: collapse; }
.tbl-admin th, .tbl-admin td { padding:10px 12px; border-bottom:1px solid #1b2635; text-align:left; vertical-align:middle; }
.tbl-admin th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:rgba(232,238,246,.6); }
.tbl-admin tbody tr:hover td { background:rgba(255,255,255,.02); }
.admin-user-name { font-weight:600; }
.admin-user-id { font-size:12px; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.12); }
.badge--pending { background:rgba(255,184,77,.08); color:#ffb84d; border-color:rgba(255,184,77,.3); }
.badge--approved { background:rgba(72,200,120,.08); color:#48c878; border-color:rgba(72,200,120,.3); }
.badge--rejected { background:rgba(255,96,96,.08); color:#ff6060; border-color:rgba(255,96,96,.3); }
.admin-modal { width:min(520px, 92vw); }
.admin-form { display:flex; flex-direction:column; gap:12px; }
.admin-field label { margin:0 0 6px; }
.select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #26354a; background:#0b0f14; color:#e8eef6; }
.admin-sections { display:flex; flex-direction:column; gap:8px; }
.admin-check { display:flex; gap:8px; align-items:center; }
.admin-check input { width:16px; height:16px; margin:0; }
.admin-hint { font-size:12px; margin-top:6px; }

/* === 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;}

/* SPFM: tabular nums for datetime */
#ordersTable,
#orderModalSub,
#orderItemsTable,
#spfmOrderModal,
#spfmOrderModalSummary,
#spfmOrderModalJson {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* SPFM: orders datetime align (tabular nums) */
/* 1) Prefer tabular numbers (if font supports it) */
#ordersTable,
#orderModalSub,
#orderItemsTable,
#spfmOrderModal,
#spfmOrderModalSummary,
#spfmOrderModalJson {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 2) Hard fallback: for date/time columns only, use numeric-friendly mono stack
      (so HH:MM never visually shifts even if font lacks tnum) */
#ordersTable th[data-col="moment"],
#ordersTable td[data-col="moment"],
#ordersTable th[data-col="updated_at"],
#ordersTable td[data-col="updated_at"],
#orderModalSub {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* __SPFM_RESIZE_HANDLES_GENERIC_V2 */
/* Visible column resize handles for ANY table that uses columns_resize.js (data-widths-key) */
table[data-widths-key] thead th{
  position: relative;
  overflow: visible;
}
table[data-widths-key] thead th .col-resizer{
  position:absolute;
  top:0;
  right:-7px;
  width:14px;
  height:100%;
  cursor:col-resize;
  z-index:10;
  user-select:none;
}
table[data-widths-key] thead th:last-child .col-resizer{ display:none; }
table[data-widths-key] 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);
}
table[data-widths-key] thead th .col-resizer:hover::before{
  background: rgba(255,255,255,.45);
}
/* __SPFM_RESIZE_HANDLES_GENERIC_V2 */


/* __SPFM_ORDERS_TABLE_UI_V2 */
/* Make Orders tables look like other SPFM tables (grid lines + hover + ellipsis) */
#ordersTable td,
#orderItemsTable 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;
  white-space: nowrap;
text-overflow: ellipsis;
  overflow: hidden;
  max-width: 1px; /* helps ellipsis in tables */
}

#ordersTable th,
#orderItemsTable th{

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  white-space: nowrap;
text-overflow: ellipsis;
  overflow: visible; /* allow .col-resizer to stick out */
  max-width: none;
  position: relative; /* anchor resizer */
}

#ordersTable th:last-child, #ordersTable td:last-child,
#orderItemsTable th:last-child, #orderItemsTable td:last-child{
  border-right: none;
}
#ordersTable thead th,
#orderItemsTable thead th{
  font-weight: 650;
  background: rgba(255,255,255,.02);
}
#ordersTable tbody tr:hover td,
#orderItemsTable tbody tr:hover td{
  background: rgba(255,255,255,.02);
}

/* Stop “jumping” of time: tabular digits for date/time cells */
#ordersTable td.mono{ font-variant-numeric: tabular-nums; }
#ordersTable td.mono, #ordersTable td.mono *{ font-variant-numeric: tabular-nums; }
/* __SPFM_ORDERS_TABLE_UI_V2 */


/*__SPFM_ORDERS_AT_STATUSCOL_V1__*/
/*__SPFM_ORDERS_AT_COL_FIXED_17PX_V1__*/
/*__SPFM_ORDERS_AT_DD_COMPACT_V1__*/
/*__SPFM_ORDERS_AT_COL_48PX_LOCK_V1__*/
#ordersTable col[data-col="armtek_status"] { width: 56px; min-width: 56px; max-width: 56px; }
/*__SPFM_ORDERS_AT_COL_48PX_LOCK_V1__*/
/*__SPFM_ORDERS_AT_DD_COMPACT_V1__*/
/*__SPFM_ORDERS_AT_COL_FIXED_17PX_V1__*/
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status { text-align:center; padding-left:2px; padding-right:2px; }

.armtek-dot {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid currentColor;
  box-sizing:border-box;
}

.armtek-dot--grey   { color:#6b7280; background:currentColor; border-color:currentColor; opacity:.9; }
.armtek-dot--blue   { color:#3b82f6; background:currentColor; border-color:currentColor; }
.armtek-dot--yellow { color:#f59e0b; background:currentColor; border-color:currentColor; }
.armtek-dot--red    { color:#ef4444; background:currentColor; border-color:currentColor; }
.armtek-dot--green  { color:#22c55e; background:currentColor; border-color:currentColor; }

.armtek-dot--redhalf {
  color:#ef4444;
  border-color:currentColor;
  background:linear-gradient(135deg, currentColor 0 50%, transparent 50% 100%);
}
.armtek-dot--greenhalf {
  color:#22c55e;
  border-color:currentColor;
  background:linear-gradient(135deg, currentColor 0 50%, transparent 50% 100%);
}
/*__SPFM_ORDERS_AT_STATUSCOL_V1__*/


/*__SPFM_ORDERS_AT_FILTER_SELECT_V2__*/
#ordersTable select[data-filter-col="armtek_status"] {
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  min-width: 34px;
  text-align: center;
  text-align-last: center;
}
#ordersTable select[data-filter-col="armtek_status"] option {
  text-align: left;
}
/*__SPFM_ORDERS_AT_FILTER_SELECT_V2__*/


/*__SPFM_ORDERS_AT_FILTER_DD_CSS_V1__*/
/* Custom dropdown for Orders->AT filter. Button uses .inp to match existing inputs/selects. */
#ordersTable .spfm-dd {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 240px;
}

#ordersTable .spfm-dd__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-right: 28px; /* room for chevron */
}

/*__SPFM_ORDERS_FILTER_DD_BTN_ALIGN_TO_INPUT_V1__*/
/* Orders filter-row: align new dropdown buttons (status/customer/store_name) with text inputs.
   Root cause: these buttons had margin-top:0 while inputs have margin-top:6px; also flex+baseline in TH shifts baseline.
   IMPORTANT: do NOT affect armtek_status dropdown. */
#ordersTable thead tr.filter-row .spfm-dd[data-dd="status"] .spfm-dd__btn,
#ordersTable thead tr.filter-row .spfm-dd[data-dd="customer"] .spfm-dd__btn,
#ordersTable thead tr.filter-row .spfm-dd[data-dd="store_name"] .spfm-dd__btn {
  margin-top: 6px;        /* like input */
  margin-bottom: 0;
  display: inline-flex;   /* behave like input (inline-block) inside table-cell */
  vertical-align: middle; /* avoid baseline visual shift */
  height: 35px;           /* keep consistent with inputs */
}
/*__SPFM_ORDERS_FILTER_DD_BTN_ALIGN_TO_INPUT_V1__*/


/*__SPFM_ORDERS_DD_BTN_HEIGHT_MATCH_INPUT_V1__*/
/* Make Orders filter dropdown buttons same height as text inputs (but DO NOT touch armtek_status) */
#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__btn,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__btn,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__btn{
  height: 35px;
  min-height: 35px;
}
/*__SPFM_ORDERS_DD_BTN_HEIGHT_MATCH_INPUT_V1__*/


/*__SPFM_ORDERS_DD_BTN_LIKE_INPUT_V1__*/
  /* Make NEW filter dropdown buttons (status/customer/store_name) look like search input fields (same as base input{...}). */
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="status"]   .spfm-dd__btn,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="customer"] .spfm-dd__btn,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="store_name"] .spfm-dd__btn {
    /* match input {...} from app.css:21 */
    margin-top: 0 !important;              /* override global button margin-top */
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #26354a;
    background: #0b0f14;
    color: #e8eef6;

    /* keep typography identical to table cells */
    font: inherit;
    font-size: 16px;
    line-height: normal;

    /* behave like an input */
    box-sizing: border-box;
    text-align: left;

    /* reset button-ish visuals */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none;

    /* layout of label + chevron */
    justify-content: normal;
    gap: 8px;
    cursor: pointer;
  }

  /* Slight hover/focus like inputs */
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="status"]   .spfm-dd__btn:hover,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="customer"] .spfm-dd__btn:hover,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="store_name"] .spfm-dd__btn:hover {
    border-color: rgba(148,163,184,.55);
  }
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="status"]   .spfm-dd__btn:focus-visible,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="customer"] .spfm-dd__btn:focus-visible,
  #ordersTable thead tr.filter-row .spfm-dd[data-dd="store_name"] .spfm-dd__btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(64,160,255,.25);
  }
/*__SPFM_ORDERS_DD_BTN_LIKE_INPUT_V1__*/

#ordersTable .spfm-dd__label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ordersTable .spfm-dd__chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .7;
}

#ordersTable .spfm-dd__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

#ordersTable .spfm-dd__menu.is-open {
  display: block;
}

/*__SPFM_ORDERS_DD_MENU_MATCH_AT_V2__*/
/* Status/Customer/Store dropdown menus should look like AT (dark panel) */
#ordersTable .spfm-dd[data-dd="status"],
#ordersTable .spfm-dd[data-dd="customer"],
#ordersTable .spfm-dd[data-dd="store_name"]{
  max-width: none;
}

#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__menu,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__menu,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__menu{
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  padding: 6px 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#ordersTable .spfm-dd[data-dd="status"] [data-dd-items],
#ordersTable .spfm-dd[data-dd="customer"] [data-dd-items],
#ordersTable .spfm-dd[data-dd="store_name"] [data-dd-items],
#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__items,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__items,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__items{
  list-style: none;
  margin: 0;
  padding: 0;
}

#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__item,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__item,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__item{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 12px;
  border-radius: 0;
}

#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__txt,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__txt,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__txt{
  width: 100%;
  text-align: left;
}

#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__chev,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__chev,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__chev{
  display: none !important;
}

#ordersTable .spfm-dd[data-dd="status"] .spfm-dd__item.is-selected,
#ordersTable .spfm-dd[data-dd="customer"] .spfm-dd__item.is-selected,
#ordersTable .spfm-dd[data-dd="store_name"] .spfm-dd__item.is-selected{
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.07);
}
/*__SPFM_ORDERS_DD_MENU_MATCH_AT_V2__*/

/*__SPFM_ORDERS_FILTERROW_TOPALIGN_V1__*/
#ordersTable thead tr.filter-row .spfm-dd[data-dd="status"] .spfm-dd__btn,
#ordersTable thead tr.filter-row .spfm-dd[data-dd="customer"] .spfm-dd__btn,
#ordersTable thead tr.filter-row .spfm-dd[data-dd="store_name"] .spfm-dd__btn{
  margin-top: 6px !important; /* match input {margin-top:6px} */
}
/*__SPFM_ORDERS_FILTERROW_TOPALIGN_V1__*/

#ordersTable .spfm-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

#ordersTable .spfm-dd__item:hover {
  background: rgba(0,0,0,.05);
}

#ordersTable .spfm-dd__txt {
  white-space: nowrap;
}

/*__SPFM_ORDERS_AT_FILTER_DD_CSS_V1__*/


/*__SPFM_ORDERS_AT_FILTER_DD_FIX_V1__*/
/* Fix: dropdown menu can be clipped inside table header (overflow hidden). */
#ordersTable thead,
#ordersTable thead tr,
#ordersTable thead th {
  overflow: visible !important;
}

/* Fix: dot inside .inp button may stretch in some themes. Force exact 12x12 circle. */
#ordersTable .spfm-dd__btn .armtek-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  border-radius: 999px !important;
  flex: 0 0 12px !important;
  display: inline-block !important;
}

/* Make sure menu is above header row and actually visible */
#ordersTable .spfm-dd {
  z-index: 60;
}
#ordersTable .spfm-dd__menu {
  z-index: 70;
}
/*__SPFM_ORDERS_AT_FILTER_DD_FIX_V1__*/


/*__SPFM_ORDERS_AT_DD_DOT_ALL_V1__*/
/* "All" dot: diagonal bands with all used colors (blue/yellow/green/red) */
.armtek-dot--all {
  border-color: rgba(0,0,0,.18);
  background: linear-gradient(
    135deg,
    #9ca3af 0% 20%,
    #3b82f6 20% 40%,
    #f59e0b 40% 60%,
    #22c55e 60% 80%,
    #ef4444 80% 100%
  );
color: transparent; /* dot uses background */
}

/* AT dropdown menu: icons only */
#ordersTable .spfm-dd__menu .spfm-dd__item {
  justify-content: center;
  padding: 10px;
}
#ordersTable .spfm-dd__menu .spfm-dd__item .armtek-dot {
  margin: 0;
}
/*__SPFM_ORDERS_AT_DD_DOT_ALL_V1__*/


/*__SPFM_ORDERS_AT_DD_DOTSONLY_V1__*/
/* Orders -> AT filter dropdown: show dots only (no text) */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__txt {
  display: none !important;
}

/* Optional: also hide label on the button itself (keep dot + chevron) */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn .spfm-dd__label {
  display: none !important;
}



/*__SPFM_ORDERS_AT_DD_BTN_CENTERDOT_V1__
  Armtek status dropdown button contains only dot (label hidden).
  Center dot visually: make flex centered AND compensate right chevron padding by adding same left padding.
*/
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 28px !important; /* mirror padding-right:28px (room for chevron) */
}

/* Make menu items compact & centered */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item {
  justify-content: center;
  padding: 10px 10px;
}

/* "All" dot: includes GREY too + blue/yellow/green/red diagonal stripes */
.armtek-dot--all {
  border-color: rgba(0,0,0,.18) !important;
  background: linear-gradient(
    135deg,
    #9ca3af 0%,
    #9ca3af 20%,
    #3b82f6 20%,
    #3b82f6 40%,
    #facc15 40%,
    #facc15 60%,
    #22c55e 60%,
    #22c55e 80%,
    #ef4444 80%,
    #ef4444 100%
  ) !important;
}
/*__SPFM_ORDERS_AT_DD_DOTSONLY_V1__*/

/*__SPFM_ARMTEK_DOT_ALL_BORDER_OVERFLOW_FIX_V1__*/
/* Force ALL-dot to be truly circular with no grey overlay border and with clipping.
   Current problem: base .armtek-dot applies border:2px and overflow:visible. */
#ordersTable .spfm-dd[data-dd="armtek_status"] [data-dd-dot].armtek-dot.armtek-dot--all {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  border-radius: 999px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-sizing: border-box !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] [data-dd-dot].armtek-dot.armtek-dot--all::before,
#ordersTable .spfm-dd[data-dd="armtek_status"] [data-dd-dot].armtek-dot.armtek-dot--all::after {
  content: none !important;
  display: none !important;
}
/*__SPFM_ARMTEK_DOT_ALL_BORDER_OVERFLOW_FIX_V1__*/

/*__SPFM_ARMTEK_DOT_ALL_GRADIENT_FIX_V1__*/
/* On a small circle, linear-gradient edge segments (0..20 and 80..100) become tiny.
   Extend edges beyond 0..100 so grey+red are visible after circular clipping. */
#ordersTable .spfm-dd[data-dd="armtek_status"] [data-dd-dot].armtek-dot.armtek-dot--all {
  background-image: linear-gradient(
    135deg,
    rgb(156,163,175) -12%, rgb(156,163,175) 24%,
    rgb(59,130,246)  24%, rgb(59,130,246)  46%,
    rgb(250,204,21)  46%, rgb(250,204,21)  66%,
    rgb(34,197,94)   66%, rgb(34,197,94)   86%,
    rgb(239,68,68)   86%, rgb(239,68,68)  112%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
/*__SPFM_ARMTEK_DOT_ALL_GRADIENT_FIX_V1__*/

/*__SPFM_ARMTEK_DOT_ALL_REPEATING_V2__*/
/* "Все": repeating diagonal stripes so edge colors (grey/red) can't disappear on small circles */
#ordersTable .armtek-dot.armtek-dot--all {
  /* 5 stripes, repeated */
  background-image: repeating-linear-gradient(
    135deg,
    rgb(156,163,175) 0px,  rgb(156,163,175) 3px,   /* grey */
    rgb(59,130,246)  3px,  rgb(59,130,246)  6px,   /* blue */
    rgb(250,204,21)  6px,  rgb(250,204,21)  9px,   /* yellow */
    rgb(34,197,94)   9px,  rgb(34,197,94)  12px,   /* green */
    rgb(239,68,68)  12px,  rgb(239,68,68)  15px    /* red */
  ) !important;
  background-size: 100% 100% !important;
  background-repeat: repeat !important;
  background-position: center !important;
}
/*__SPFM_ARMTEK_DOT_ALL_REPEATING_V2__*/


/*__SPFM_ARMTEK_DOT_ALL_REPEATING_V3__*/
/* FINAL: "Все" dot — balanced diagonal repeating stripes (grey/red wider, colors thinner), per tested ideal inline style */
#ordersTable .armtek-dot.armtek-dot--all,
#ordersTable .spfm-dd[data-dd="armtek_status"] [data-dd-dot].armtek-dot.armtek-dot--all {
  background-image: repeating-linear-gradient(135deg,
    #9ca3af 0px,    #9ca3af 4.5px,   /* grey (wide) */
    #3b82f6 4.5px,  #3b82f6 7px,     /* blue (thin) */
    #facc15 7px,    #facc15 9.5px,   /* yellow (thin) */
    #22c55e 9.5px,  #22c55e 12px,    /* green (thin) */
    #ef4444 12.5px, #ef4444 17px     /* red (wide) */
  ) !important;
  background-repeat: repeat !important;
  background-position: center !important;
}
/*__SPFM_ARMTEK_DOT_ALL_REPEATING_V3__*/


/*__SPFM_ARMTEK_DD_MENU_DOTS_V1__*/
/* Orders->AT dropdown menu: show ONLY dots (no text), and make "Все" dot multicolor like the header dot */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__txt {
  display: none !important;
}

/* Center items nicely when only dots remain */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item {
  justify-content: center !important;
}

/* Normalize dot size inside menu (same 12x12 as in button) */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .armtek-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  border-radius: 999px !important;
  flex: 0 0 12px !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* "Все" item in menu: force the SAME 'ideal' repeating gradient */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item[data-dd-val=""] .armtek-dot {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;

  background-image: repeating-linear-gradient(135deg,
    #9ca3af 0px,    #9ca3af 4.5px,   /* grey (wide) */
    #3b82f6 4.5px,  #3b82f6 7px,     /* blue (thin) */
    #facc15 7px,    #facc15 9.5px,   /* yellow (thin) */
    #22c55e 9.5px,  #22c55e 12px,    /* green (thin) */
    #ef4444 12.5px, #ef4444 17px     /* red (wide) */
  ) !important;

  background-repeat: repeat !important;
  background-position: center !important;
}
/* Kill any pseudo-element overlays for safety (square overlay symptom) */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item[data-dd-val=""] .armtek-dot::before,
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item[data-dd-val=""] .armtek-dot::after {
  content: none !important;
  display: none !important;
}
/*__SPFM_ARMTEK_DD_MENU_DOTS_V1__*/



/*__SPFM_ORDERS_AT_COL_FIXED_17PX_V1__
  Orders table uses columns_resize.js for table[data-widths-key] (adds .col-resizer handles).
  For AT column we hide the handle to prevent resizing.
*/
table[data-widths-key] thead th[data-col="armtek_status"] .col-resizer{ display:none !important; }
table[data-widths-key] thead th[data-col="armtek_status"]{ cursor: default !important; }
/*__SPFM_ORDERS_AT_COL_FIXED_17PX_V1__*/


/*__SPFM_ORDERS_AT_DD_COMPACT_V1__
  Compact AT dropdown in header:
  - remove max-width 240px for this dd
  - remove chevron/padding-right that forces wide button
  - center dot
  - keep menu visible and centered
*/
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status {
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
}

#ordersTable th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] {
  width: 100% !important;
  max-width: 100% !important; /* kill 240px */
}

#ordersTable th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn {
  width: 100% !important;
  padding-right: 0 !important; /* kill room for chevron */
  padding-left: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

#ordersTable th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__chev {
  display: none !important; /* click by dot */
}

#ordersTable th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] [data-dd-dot] {
  margin: 0 auto !important; /* dot centered */
}

#ordersTable th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 52px; /* чтобы меню не было 1px */
}
/*__SPFM_ORDERS_AT_DD_COMPACT_V1__*/

/*__SPFM_ORDERS_AT_COL_48PX_V1__*/
#ordersTable col[data-col="armtek_status"] { width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
/*__SPFM_ORDERS_AT_COL_48PX_V1__*/

/*__SPFM_ORDERS_AT_COL_48PX_V1__*/
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}
/* lock resizing handle */
table[data-widths-key] thead th[data-col="armtek_status"] .col-resizer{ display:none !important; }
table[data-widths-key] thead th[data-col="armtek_status"]{ cursor: default !important; }
/*__SPFM_ORDERS_AT_COL_48PX_V1__*/

/*__SPFM_ORDERS_AT_DD_WIDTH48_V1__
  AT dropdown in header must be exactly 56px (button + menu), dot centered.
*/
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"]{
  width: 56px !important;
  max-width: 56px !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  width: 56px !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 18px !important; /* room for chevron */
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__chev{
  right: 6px !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

/* menu items: keep centered dots */
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item{
  width: 56px !important;
  justify-content: center;
}
/*__SPFM_ORDERS_AT_DD_WIDTH48_V1__*/

/*__SPFM_ORDERS_AT_DD_PORTAL_FIX_V2__
  AT dropdown: fixed 56px (col + dd + menu). Also provide styles when menu is portaled to <body>.
*/
#ordersTable col[data-col="armtek_status"]{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
}

#ordersTable .spfm-dd[data-dd="armtek_status"]{
  width: 56px !important;
  max-width: 56px !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  width: 56px !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 18px !important; /* room for chevron */
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__chev{
  right: 6px !important;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

/* When menu is portaled to body */
.spfm-dd__menu.spfm-dd__menu--portal{
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: none; /* default hidden */
  background: rgba(15, 23, 42, 0.98); /* safe dark panel */
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  padding: 6px 0;
}
.spfm-dd__menu.spfm-dd__menu--portal.is-open{
  display: block;
}
.spfm-dd__menu.spfm-dd__menu--portal .spfm-dd__item{
  width: 48px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
/*__SPFM_ORDERS_AT_DD_PORTAL_FIX_V2__*/


/*__SPFM_ORDERS_AT_COL_48PX_LOCK_V1__*/
#ordersTable th[data-col="armtek_status"],
#ordersTable td.td-armtek-status {
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
}
/* disable drag-resize handle only for AT column */
table[data-widths-key] thead th[data-col="armtek_status"] .col-resizer{ display:none !important; }
table[data-widths-key] thead th[data-col="armtek_status"]{ cursor: default !important; }
/*__SPFM_ORDERS_AT_COL_48PX_LOCK_V1__*/

/*__SPFM_ORDERS_AT_PORTAL_MENU_BORDERBOX_48PX_V2__
  Portal menu had width:48px but box-sizing:content-box + 1px borders => real width ~50px.
  Make 48px truly 48px so centering is exact.
*/
body > .spfm-dd__menu--portal[data-dd-menu]{
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/*__SPFM_ORDERS_AT_PORTAL_MENU_BORDERBOX_48PX_V2__*/


/*__SPFM_ORDERS_AT_FILTERROW_TH_48PX_V1__
  Root cause: AT dropdown button is inside <tr class="filter-row">.
  That TH had padding L/R=4px and box-sizing:content-box -> content width ~39-40px, so BTN becomes 39px.
  Fix: make filter-row armtek_status TH truly 56px and remove padding that steals width.
*/
#ordersTable thead tr.filter-row th[data-col="armtek_status"]{
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"],
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}
/*__SPFM_ORDERS_AT_FILTERROW_TH_48PX_V1__*/


/*__SPFM_ORDERS_AT_BTN_36PX_V1__
  Keep column/cell 56px, but make the dropdown button 36px and center it.
  Also shrink the portal menu to 36px to keep visual alignment.
*/
#ordersTable thead tr.filter-row th[data-col="armtek_status"]{
  /* keep cell 56px */
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  text-align: center !important;
}

/* center wrapper and allow smaller btn */
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"]{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* button = 36px */
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* menu inside dd (if non-portal) */
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu{
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

/* portal menu */
body > .spfm-dd__menu--portal[data-dd-menu] {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}
/*__SPFM_ORDERS_AT_BTN_36PX_V1__*/

/*__SPFM_ORDERS_AT_BTN_36PX_FIX_DRIFT_V1__
  Fix visual drift: filter-row AT button is 36px wide, but global AT btn rule adds padding-right:18px for chevron,
  which steals half of the button and makes it look shifted. For filter-row, we remove that padding and pin chevron.
*/
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  padding-right: 0 !important;
  padding-left: 0 !important;
  justify-content: center !important;
}
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__chev{
  right: 2px !important;
}
/*__SPFM_ORDERS_AT_BTN_36PX_FIX_DRIFT_V1__*/

/*__SPFM_ORDERS_AT_FILTERROW_CHEV_ABSOLUTE_V1__
  Fix: AT filter-row dot looks shifted when chevron participates in flex layout.
  Take chevron out of flow (absolute) so dot is truly centered.
*/
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn{
  position: relative !important;
}
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"] .spfm-dd__chev{
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}
/*__SPFM_ORDERS_AT_FILTERROW_CHEV_ABSOLUTE_V1__*/

/*__SPFM_ORDERS_AT_FILTERROW_HCENTER_V1__
  Fix: AT filter button horizontally shifted when TH has asymmetric padding.
  Keep vertical layout intact; only normalize horizontal padding + center dd.
*/
#ordersTable thead tr.filter-row th[data-col="armtek_status"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important; /* safe for table-cell */
}

/* center dropdown wrapper without affecting vertical positioning */
#ordersTable thead tr.filter-row th[data-col="armtek_status"] .spfm-dd[data-dd="armtek_status"]{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/*__SPFM_ORDERS_AT_FILTERROW_HCENTER_V1__*/



/*__SPFM_ORDERS_AT_PORTAL_MENU_REAL48_BORDERBOX_V3__
  Portal dropdown menu: REAL width 48px (borders included), so centering math stays exact.
*/
body > .spfm-dd__menu--portal[data-dd-menu]{
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  box-sizing: border-box !important;
}
/*__SPFM_ORDERS_AT_PORTAL_MENU_REAL48_BORDERBOX_V3__*/


/*__SPFM_ORDERS_AT_PORTAL_MENU_DISPLAY_BY_ISOPEN_V1__
  Root cause: outside-close removes .is-open but menu stays visible because inline display:block remains.
  Fix: portal menu is hidden unless it has .is-open (override inline styles via !important).
*/
body > .spfm-dd__menu--portal[data-dd-menu] {
  display: none !important;
  pointer-events: none !important;
}

body > .spfm-dd__menu--portal.is-open[data-dd-menu] {
  display: block !important;
  pointer-events: auto !important;
}
/*__SPFM_ORDERS_AT_PORTAL_MENU_DISPLAY_BY_ISOPEN_V1__*/


/*__SPFM_ORDERS_AT_MENU_HOVER_BG_V1__
  Hover/focus background for Armtek status dots menu items (both in-table and portaled-to-body menu).
  Goal: highlight item under cursor like table hover.
*/
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item,
.spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item {
  border-radius: 8px;
  transition: background-color .12s ease;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item:hover,
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item:focus-visible,
.spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item:hover,
.spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item:focus-visible {
  background-color: rgba(0,0,0,.06);
  outline: none;
}
/*__SPFM_ORDERS_AT_MENU_HOVER_BG_V1__*/


/*__SPFM_ORDERS_AT_MENU_HOVER_MATCH_TABLE_V1__
  Match hover background of AT dropdown menu items to #ordersTable row hover.
  Source: #ordersTable tbody tr:hover td => background: rgba(255,255,255,.02)
*/
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item,
body > .spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item {
  border-radius: 8px;
  transition: background-color .12s ease;
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item:hover,
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__menu .spfm-dd__item:focus-visible,
body > .spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item:hover,
body > .spfm-dd__menu--portal[data-dd-menu][data-dd-owner="armtek_status"] .spfm-dd__item:focus-visible {
  background: rgba(255,255,255,.02);
  outline: none;
}
/*__SPFM_ORDERS_AT_MENU_HOVER_MATCH_TABLE_V1__*/


/*__SPFM_ORDERS_AT_BTN_MATCH_GLOBAL_INPUT_SKIN_V1__
  Search inputs are styled by global rule:
    input { border-radius:10px; border:1px solid #26354a; background:#0b0f14; color:#e8eef6; }
  Make AT dropdown button look the same (skin only; sizing handled elsewhere).
*/
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn {
  background: #0b0f14 !important;
  border: 1px solid #26354a !important;
  border-radius: 10px !important;
  color: #e8eef6 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
/*__SPFM_ORDERS_AT_BTN_MATCH_GLOBAL_INPUT_SKIN_V1__*/


/*__SPFM_ORDERS_AT_BTN_ALIGN_WITH_INPUTS_MARGIN_V1__
  Root cause:
    input { margin-top:6px; }
    button { margin-top:14px; }
  AT dropdown is a <button>, so it drops lower than inputs in filter row.
*/
#ordersTable thead tr.filter-row .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn {
  margin-top: 6px !important;
}
/*__SPFM_ORDERS_AT_BTN_ALIGN_WITH_INPUTS_MARGIN_V1__*/


/*__SPFM_ORDERS_AT_MULTISELECT_CLEAN_CSS_V1__
  AT dropdown multi-select visuals:
  - highlight selected dots in menu
  - show count badge on button when >1 selected
*/
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item.is-selected {
  background: rgba(255,255,255,.04);
}
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__item.is-selected .armtek-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
}

#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn[data-at-multi] {
  position: relative;
}
#ordersTable .spfm-dd[data-dd="armtek_status"] .spfm-dd__btn[data-at-multi]::after {
  content: attr(data-at-multi);
  position: absolute;
  right: 4px;
  top: 3px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  color: rgba(232,238,246,.95);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
/*__SPFM_ORDERS_AT_MULTISELECT_CLEAN_CSS_V1__*/


/*__SPFM_AT_PORTAL_HOVER_SELECTED_CSS_V1__
  AT dropdown portal menu lives in <body>, so table-scoped selectors don't apply.
*/
body > .spfm-dd__menu--portal .spfm-dd__item:hover {
  background: rgba(255,255,255,.06);
}
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected {
  background: rgba(255,255,255,.04);
}
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected .armtek-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
}
/*__SPFM_AT_PORTAL_HOVER_SELECTED_CSS_V1__*/


/*__SPFM_AT_SELECTED_BRIGHTER_CSS_V1__
  Make selected AT dots/items more visible (portal menu + normal menu).
*/

/* 1) Portal menu in <body> */
body > .spfm-dd__menu--portal .spfm-dd__item:hover {
  background: rgba(255,255,255,.10);
}
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected {
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected .armtek-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 0 10px rgba(255,255,255,.08);
}

/* 2) Non-portal menu (if rendered inside dropdown) */
.spfm-dd__menu .spfm-dd__item:hover {
  background: rgba(255,255,255,.10);
}
.spfm-dd__menu .spfm-dd__item.is-selected {
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.spfm-dd__menu .spfm-dd__item.is-selected .armtek-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 0 10px rgba(255,255,255,.08);
}

/*__SPFM_AT_SELECTED_BRIGHTER_CSS_V1__*/


/*__SPFM_AT_HIGHLIGHT_CLIP_V1__
  Fix highlight bleeding outside dropdown menu: clip on menu container + safe item rendering.
*/

/* Portal menu container: clip everything inside rounded corners */
body > .spfm-dd__menu--portal.spfm-dd__menu {
  overflow: hidden;
  border-radius: 12px;
  background-clip: padding-box;
}

/* Non-portal menu container as well (just in case) */
.spfm-dd__menu {
  overflow: hidden;
  border-radius: 12px;
  background-clip: padding-box;
}

/* Items: ensure backgrounds don't draw outside */
body > .spfm-dd__menu--portal .spfm-dd__item,
.spfm-dd__menu .spfm-dd__item {
  background-clip: padding-box;
}

/* Selected: use outline instead of inset shadow (less weird overflow), still clipped by menu */
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected,
.spfm-dd__menu .spfm-dd__item.is-selected {
  outline: 1px solid rgba(255,255,255,.10);
  outline-offset: -1px;
}

/*__SPFM_AT_HIGHLIGHT_CLIP_V1__*/


/*__SPFM_AT_PORTAL_KILL_OUTLINE_OVERRIDE_V1__
  Hard override: remove any "frame" around selected/focused items in Armtek portal dropdown.
  We keep only background highlight.
*/
body > .spfm-dd__menu--portal {
  overflow: hidden; /* clip highlight strictly inside menu */
}

body > .spfm-dd__menu--portal .spfm-dd__item.is-selected,
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected:focus,
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected:focus-visible,
body > .spfm-dd__menu--portal .spfm-dd__item:focus,
body > .spfm-dd__menu--portal .spfm-dd__item:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body > .spfm-dd__menu--portal .spfm-dd__item.is-selected {
  background: rgba(255,255,255,.07); /* a bit brighter, without border */
}

/* if "frame" is drawn on dot itself */
body > .spfm-dd__menu--portal .spfm-dd__item.is-selected .armtek-dot {
  box-shadow: none !important;
  outline: none !important;
}
/*__SPFM_AT_PORTAL_KILL_OUTLINE_OVERRIDE_V1__*/



/*__SPFM_AT_BTN_DOT_ALWAYS_GREY_CSS_V1__*/
/* User request: button dot must be ALWAYS light-grey; no coloring logic */
.spfm-dd[data-dd="armtek_status"] [data-dd-btn] .armtek-dot {
  background: rgba(255,255,255,.70) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* also neutralize "multi" class on the button dot */
.spfm-dd[data-dd="armtek_status"] [data-dd-btn] .armtek-dot.armtek-dot--multi {
  background: rgba(255,255,255,.70) !important;
}
/*__SPFM_AT_BTN_DOT_ALWAYS_GREY_CSS_V1__*/

/*__SPFM_AT_BTN_MULTI_DOT_CSS_V2__
  Multi indicator dot for Armtek filter button.
  Accent fill, no рамка, не вылезает за круг.
*/
.armtek-dot.armtek-dot--multi {
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  /* multi indicator: diagonal colorful fill (old style) */

  background: rgba(255,255,255,.75) !important;
}



/*__SPFM_AT_BTN_MULTI_DOT_CSS_V2__*/


/*__SPFM_AT_BTN_MULTI_DOT_CSS_V1__
  Button dot for 0 or 2+ selected statuses (multi indicator).
  No frame/border; keep it inside button.
*/
.armtek-dot--multi {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  /* subtle accent fill; uses existing theme via currentColor if your button sets it */
  background: rgba(255,255,255,.70);
}
/*__SPFM_AT_BTN_MULTI_DOT_CSS_V1__*/


/*__SPFM_ORDERS_COL_RESIZER_CSS_V2__*/
/* Make column resize handles visible in Orders table headers */
#ordersTable thead th[data-col] {
  position: relative;
}
#ordersTable thead th[data-col] .col-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
}
#ordersTable thead th[data-col] .col-resizer::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.18);
}
#ordersTable thead th[data-col] .col-resizer:hover::before {
  background: rgba(255,255,255,.35);
}
/*__SPFM_ORDERS_COL_RESIZER_CSS_V2__*/


/*__SPFM_TOPBAR_OVERLAP_FIX_V1__*/
/* Fix: .topbar overlaps page content -> prevents clicking table header resizers.
   Add top padding to common content wrappers under a fixed topbar.
*/
:root {
  --spfm-topbar-h: 56px; /* safe default */
}
header.topbar {
  /* keep as is, but define a stable height hint when possible */
  height: var(--spfm-topbar-h);
}
body {
  /* if there is no existing offset, this prevents content from sliding under fixed header */
  padding-top: var(--spfm-topbar-h);
}
/* In case body padding is already used elsewhere, also support common wrappers (harmless duplicates) */
main {
  display: block;
}
/*__SPFM_TOPBAR_OVERLAP_FIX_V1__*/


/*__SPFM_ORDERS_RESIZER_FORCE_VISIBLE_V1__*/
/* Orders table: ensure resizer hits are not clipped and have real geometry */
#ordersTable,
#ordersTable thead,
#ordersTable thead tr {
  overflow: visible !important;
}

#ordersTable thead th[data-col] {
  position: relative !important;
  overflow: visible !important;
}

#ordersTable thead th[data-col] .col-resizer {
  position: absolute !important;
  top: 0 !important;
  right: -6px !important;
  width: 12px !important;
  height: 100% !important;
  cursor: col-resize !important;
  user-select: none !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

#ordersTable thead th[data-col] .col-resizer::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  left: 5px !important;
  width: 2px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.22) !important;
}

#ordersTable thead th[data-col] .col-resizer:hover::before {
  background: rgba(255,255,255,.40) !important;
}
/*__SPFM_ORDERS_RESIZER_FORCE_VISIBLE_V1__*/



/*__SPFM_ORDERS_LASTCOL_RESIZER_SHOW_V1__*/
#ordersTable[data-widths-key] thead th:last-child .col-resizer{ display:block !important; }
/*__SPFM_ORDERS_LASTCOL_RESIZER_SHOW_V1__*/


/*__SPFM_ORDERS_TH_TITLE_ELLIPSIS_CSS_V1__*/
/* Orders table header: keep TH overflow visible for resizer, but ellipsis for text wrapper */
#ordersTable thead th[data-col] {
  overflow: visible !important; /* resizer can stick out */
}
#ordersTable thead tr.head-row th[data-col] .spfm-col-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 14px; /* space for resizer handle */
}
/*__SPFM_ORDERS_TH_TITLE_ELLIPSIS_CSS_V1__*/

/*__SPFM_ORDERS_TH_TITLE_FILTERROW_NOPAD_V1__*/
/* Filter row contains controls inside .spfm-col-title; padding shifts them by +14px. */
#ordersTable thead tr.filter-row th[data-col] .spfm-col-title{
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}
/*__SPFM_ORDERS_TH_TITLE_FILTERROW_NOPAD_V1__*/



/*__SPFM_TOPBAR_FIXED_WITH_SPACER_V1__*/
/* Header must ALWAYS stay on top, and there must be no scrollable area "above" it.
   Use fixed topbar + in-flow spacer (spacer is covered by header, so no visible gap). */

html, body {
  margin: 0;
  padding: 0;
}

:root {
  --spfm-topbar-h: 72px; /* adjust if needed */
}

header.topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* Spacer occupies the header height in the normal flow */
.spfm-topbar-spacer {
  height: var(--spfm-topbar-h);
}

/* Kill any legacy fixed-header compensation that creates weird top zones */
body {
  padding-top: 0 !important;
}
/*__SPFM_TOPBAR_FIXED_WITH_SPACER_V1__*/


/*__SPFM_TOPBAR_STICKY_NO_TOPSPACE_V1__*/
/* Goal: header always on top, but page must NOT have any scrollable area "above" it.
   Use sticky header (in flow) instead of fixed overlay + padding hacks. */

/* safety: remove default browser margins */
html, body {
  margin: 0;
  padding: 0;
}

/* make topbar sticky (in-flow) */
header.topbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  height: 45px;
  min-height: 45px;
  padding-top: 0;
  padding-bottom: 0;
}

/*__SPFM_TOPBAR_HEIGHT_45PX_V1__*/

/*__SPFM_TOPBAR_HALF_HEIGHT_V1__*/


/*__SPFM_TOPBAR_DOUBLE_HEIGHT_V1__*/


/* if somewhere you had compensating padding/margin for fixed header — kill it */
body {
  padding-top: 0 !important;
}
/* common wrappers sometimes used for offset */
.main, main, .page, .content, .container, .app {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/*__SPFM_TOPBAR_STICKY_NO_TOPSPACE_V1__*/


/*__SPFM_TOPBAR_GLASS_MATCH_ORDERS_V1__*/
/* Orders panel background is rgb(15,22,32). Match topbar glass to it. */
header.topbar {
  z-index: 50000 !important;
  isolation: isolate;

  /* base: rgb(15,22,32) with alpha */
  background: rgba(15, 22, 32, 0.62) !important;

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* keep table UI below topbar */
#ordersTable thead,
#ordersTable thead th {
  z-index: 1;
}
#ordersTable th .col-resizer {
  z-index: 2;
}
/*__SPFM_TOPBAR_GLASS_MATCH_ORDERS_V1__*/


/*__SPFM_FONT_RECURSIVE_AXES_V1__*/
/* User spec:
   - Text: MONO=0 (proportional)
   - Digits: tabular nums (stable columns)
   - Both text+digits: CASL=0.5
*/
:root {
  --spfm-rec-mono: 0;
  --spfm-rec-casl: 1;
  --spfm-rec-wght: 420;
  --spfm-rec-slnt: 0;
  --spfm-rec-crsv: 0;
}

html, body, button, input, textarea, select, option {
  font-family: inherit;

  /* stable digits everywhere */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "liga" 0;
  font-variant-ligatures: none;

  /* Recursive "character" */
  font-variation-settings:
    "MONO" var(--spfm-rec-mono),
    "CASL" var(--spfm-rec-casl),
    "wght" var(--spfm-rec-wght),
    "slnt" var(--spfm-rec-slnt),
    "CRSV" var(--spfm-rec-crsv);
}
/*__SPFM_FONT_RECURSIVE_AXES_V1__*/


/*__SPFM_FONT_RECURSIVE_GLOBAL_V1__*/
/* Recursive axes:
   MONO=0 (not monospace), CASL=1 (casual), CRSV=0.5 (auto cursive), slnt=0.
   Numbers: tabular (no "jumping"). */
:root {
  --spfm-font-MONO: 0;
  --spfm-font-CASL: 1;
  --spfm-font-CRSV: 0.5;
  --spfm-font-slnt: 0;
}

*, *::before, *::after {
  font-variation-settings:
    "MONO" var(--spfm-font-MONO),
    "CASL" var(--spfm-font-CASL),
    "CRSV" var(--spfm-font-CRSV),
    "slnt" var(--spfm-font-slnt);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

body, button, input, textarea, select, option {
  font-family: inherit;
}
/*__SPFM_FONT_RECURSIVE_GLOBAL_V1__*/


/*__SPFM_TBL_TH_ALIGNLEFT_V1__*/
/* All tables: column headers should be left-aligned.
   Exception: Armtek status column header "AT" must stay centered (title='Статус Armtek'). */
.tbl thead th {
  text-align: left;
}

.tbl thead th[title="Статус Armtek"] {
  text-align: center;
}
/*__SPFM_TBL_TH_ALIGNLEFT_V1__*/


/*__SPFM_AT_CENTER_PAD_SYMM_V1__*/
/* AT header looked off-center because .spfm-col-title had padding-right:14px and padding-left:0.
   Make padding symmetric so visual centering is real. */
#ordersTable thead tr.head-row th[data-col="armtek_status"] .spfm-col-title {
  padding-left: 14px !important;
  padding-right: 14px !important;
  text-align: center !important;
}
/*__SPFM_AT_CENTER_PAD_SYMM_V1__*/


/*__SPFM_TABLE_ALIGN_TEXTNUM_V1__*/
/* Global tables:
   - text cells left (default)
   - numeric-ish columns right by data-col heuristics
   - IMPORTANT: do NOT right-align time/date just because it's .mono
   Note: AT column (armtek_status) keeps center by its own #ordersTable rules (more specific). */

.tbl td {
  text-align: left;
}

/* Keep name/text columns explicitly left */
.tbl td.col-name {
  text-align: left;
}

/* Numeric columns by data-col patterns (broader match) */
.tbl td[data-col^="price"],
.tbl td[data-col^="stock"],
.tbl td[data-col^="qty"],
.tbl td[data-col^="count"],
.tbl td[data-col^="sum"],
.tbl td[data-col^="total"],
.tbl td[data-col^="amount"],
.tbl td[data-col^="cost"],
.tbl td[data-col^="discount"],
.tbl td[data-col^="margin"],
.tbl td[data-col^="percent"],
.tbl td[data-col^="vat"],

.tbl td[data-col*="price"],
.tbl td[data-col*="stock"],
.tbl td[data-col*="qty"],
.tbl td[data-col*="count"],
.tbl td[data-col*="sum"],
.tbl td[data-col*="total"],
.tbl td[data-col*="amount"],
.tbl td[data-col*="cost"],
.tbl td[data-col*="discount"],
.tbl td[data-col*="margin"],
.tbl td[data-col*="percent"],
.tbl td[data-col*="vat"],

/* Explicit known numeric fields */
.tbl td[data-col="purchase_price"],
.tbl td[data-col="wholesale_price"],
.tbl td[data-col="price_change"],
.tbl td[data-col="stock_ms"],
.tbl td[data-col="stock_prices"] {
  text-align: right;
}


/*__SPFM_ALIGN_POSITIONS_SHIPPED_V1__
  Extra numeric-ish columns:
  - positions / items count
  - shipped / sent / delivered quantities
*/
.tbl td[data-col^="pos"],
.tbl td[data-col*="pos"],
.tbl td[data-col*="position"],
.tbl td[data-col*="positions"],
.tbl td[data-col*="items"],
.tbl td[data-col*="item_count"],
.tbl td[data-col*="positions_count"],

.tbl td[data-col*="shipped"],
.tbl td[data-col*="ship_qty"],
.tbl td[data-col*="sent"],
.tbl td[data-col*="sent_qty"],
.tbl td[data-col*="delivered"],
.tbl td[data-col*="delivered_qty"] {
  text-align: right;
}
/*__SPFM_ALIGN_POSITIONS_SHIPPED_V1__*/

/* But NEVER force right-align for time/date columns */
.tbl td[data-col="moment"],
.tbl td[data-col="created_at"],
.tbl td[data-col="updated_at"] {
  text-align: left;
}
/*__SPFM_TABLE_ALIGN_TEXTNUM_V1_END__*/