/* =====================================================================
   Боксы — панель «Глубина» (fos/s-boxes.js). Классы раздела .bx-*;
   общие куски (миниатюры, окна, тумблер, таблицы на телефоне) — в s-warehouse.css (.wh-*).
   ===================================================================== */

/* ---------- панель над таблицей ---------- */
.bx-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bx-search{width:380px;max-width:100%}
.bx-search input::-webkit-search-cancel-button{cursor:pointer}
.bx-btn{font:400 13.5px var(--font);gap:6px}
.bx-btn .g-ico{width:15px;height:15px}
.bx-new{padding:0 18px}

/* ---------- таблица ---------- */
.bx-t{--cols:80px minmax(0,1.6fr) minmax(0,1fr) 130px 100px 110px 130px 40px}
.bx-code{font:500 13px var(--mono);color:var(--ink)}
.bx-name{display:flex;flex-direction:column;min-width:0}
.bx-name__t{font:400 14px var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bx-name__s{font:300 12px var(--font);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-map{color:var(--soft);text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px}
.bx-map:hover{color:var(--link-hover)}
.bx-nogeo{color:var(--faint)}
.bx-note{color:var(--soft)}
.bx-t .bx-pr{justify-content:flex-start}
.bx-t .bx-pr .wh-ib{margin-left:-8px}
.bx-place{font:300 13px var(--font);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}   /* «Белград · / Врачар» — перенос, как в прототипе на 1280 */
.bx-t .wh-when{font-size:11px}
.bx-t .g-tr.is-click:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.bx-nf{border-top:1px solid var(--line-row)}
.bx-nf .g-link{font:400 14px var(--font)}

/* ---------- карточка бокса (боковая панель 640) ---------- */
.bx-panel{gap:16px}
.bx-head{display:flex;align-items:flex-start;gap:12px}
.bx-codecap{height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--teal-tint);display:flex;align-items:center;flex:none;font:500 14px var(--mono);color:var(--ink)}
.bx-codecap.is-new{font-size:11px;letter-spacing:.08em}
.bx-head__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bx-head__t .g-panel__t{overflow-wrap:anywhere}
.bx-edit{font:400 13.5px var(--font)}
.bx-state{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--surface-3);flex-wrap:wrap}
.bx-state .g-sq{border-radius:3px}
.bx-state__l{font:400 15px var(--font)}
.bx-state__s{font:300 13.5px var(--font);color:var(--soft)}
.bx-state__s--n{font-size:14px}
.bx-panel > .g-banner--warn{cursor:default}
.bx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bx-kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.bx-kpi__v{font:300 26px/1 var(--font);white-space:nowrap}
.bx-kpi__l{font:400 12px var(--font);color:var(--soft)}
.bx-kpi .g-uline{margin-top:4px}
.bx-typ{margin:0;font:300 13.5px var(--font);color:var(--muted)}
.bx-notes{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid var(--line-soft)}
.bx-notes p{margin:0;font:300 14px/1.5 var(--font);color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.bx-t-pk{--cols:96px 106px minmax(0,1fr) 110px 70px}
.bx-t-pk .g-thead,.bx-t-pk .g-tr{padding-left:18px;padding-right:18px;gap:12px}
.bx-drv{display:block;font:400 13.5px var(--font)}
.bx-none{margin:0;font:300 14px var(--font);color:var(--soft)}
.bx-foot{display:flex;align-items:center;gap:12px;padding-top:4px;margin-top:auto}
.bx-foot .g-link--teal{font-size:15px}
.bx-foot .bx-nogeo{font:300 13px var(--font)}

/* форма бокса */
.bx-form{display:flex;flex-direction:column;gap:14px}
.bx-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bx-f input,.bx-f textarea{height:46px;border:1px solid var(--line);border-radius:var(--r-field-sm);padding:0 14px;font:400 14px var(--font);background:#fff;color:var(--ink);width:100%}
.bx-f textarea{height:auto;min-height:90px;padding:12px 14px;line-height:1.5;resize:vertical}
.bx-f .g-dialog__hint a{color:inherit}
.bx-formbtns{display:flex;gap:8px;justify-content:flex-end;padding-top:4px}

/* окно «Наклейки на боксы» */
.bx-pick{display:flex;flex-direction:column;gap:8px}
.bx-pick__bar{display:flex;align-items:center;gap:8px}
.bx-pick__bar .g-link{font:400 13px var(--font)}
.bx-pick__list{display:flex;flex-direction:column;max-height:min(320px,40vh);overflow:auto;border:1px solid var(--line);border-radius:14px;padding:4px}
.bx-pick__row{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border-radius:10px;cursor:pointer;font:400 14px var(--font)}
.bx-pick__row:hover{background:var(--hover)}
.bx-pick__row input{width:18px;height:18px;accent-color:var(--ink);flex:none;margin:0}
.bx-pick__row.is-off{color:var(--soft)}
.bx-pick__n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-pick__off{font:400 12px var(--font);color:var(--faint);flex:none}

/* ---------- сжатие десктопа ---------- */
@container wh (max-width:960px){
  .bx-t{--cols:70px minmax(0,1.6fr) minmax(0,1fr) 112px 84px 84px 110px 36px}
  .bx-t .g-thead,.bx-t .g-tr{gap:10px}
}
@container wh (max-width:820px){
  .bx-t{--cols:64px minmax(0,1.6fr) minmax(0,.9fr) 104px 80px 70px 36px}
  .bx-t .g-thead > :nth-child(7),.bx-t .g-tr > :nth-child(7){display:none}
  .bx-search{width:300px}
}

/* =====================================================================
   ТЕЛЕФОН (≤ 860 px): список карточками, карточка бокса в одну колонку (Т4)
   ===================================================================== */
@media (max-width:860px){
  .bx-bar{gap:8px}
  .bx-search{width:100%;height:48px}
  .bx-search input{font-size:16px}
  .bx-bar .g-count{padding:0 4px}
  .bx-bar .g-spacer{display:none}
  .bx-mlist{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;padding:6px 4px}
  .bx-m{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
  .bx-m:last-child{border-bottom:0}
  .bx-m:active{opacity:.7}
  .bx-m.is-off{opacity:.5}
  .bx-m__top{display:flex;align-items:center;gap:12px}
  .bx-m__top .g-sq{border-radius:3px}
  .bx-m__sub{font:300 12.5px var(--font);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bx-nf{border:0;padding:12px 4px}

  .bx-panel--m{gap:12px;background:var(--bg)}
  .bx-panel--m > .bx-back{align-self:flex-start;flex:none}
  .bx-panel--m .bx-head [data-close].g-ibtn{display:none}
  .bx-panel--m > .bx-head,.bx-panel--m > .bx-state,.bx-panel--m > .bx-kpis,.bx-panel--m > .bx-foot,.bx-panel--m > .bx-notes{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px}
  .bx-panel--m > .bx-head .g-panel__t{font-size:24px}
  .bx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .bx-panel--m > .g-label{padding:4px 4px 0}
  .bx-panel--m > .bx-typ{padding:0 4px}
  .bx-mpks{border-radius:24px;padding:6px 4px;display:flex;flex-direction:column}
  .bx-mpk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .bx-mpk:last-child{border-bottom:0}
  .bx-mpk__l{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .bx-mpk__t{font:400 14px var(--font)}
  .bx-mpk__s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:400 12.5px var(--font);color:var(--soft)}
  .bx-foot .bx-btn{display:none}
  .bx-2{grid-template-columns:1fr}
  .bx-f input,.bx-f textarea{font-size:16px;height:48px}
  .bx-f textarea{height:auto}
  .bx-formbtns .g-btn{flex:1;height:52px;font-size:16px}
  .bx-pick__row{min-height:48px}
}