/**
 * Stroka — one-row layout for fields + buttons (etalon: company picker).
 * Default: single horizontal line (nowrap). Opt-out: .stroka-stack
 */

:root {
  --stroka-gap: 10px;
  --stroka-margin-bottom: 12px;
  --stroka-field-min: 120px;
  --stroka-field-preferred: 210px;
}

.stroka,
.sl-search-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--stroka-gap);
  margin-bottom: var(--stroka-margin-bottom);
  width: 100%;
  min-width: 0;
}

/* Fields: prefer ~210px, shrink together so the row stays one line */
.stroka > .poisk,
.stroka > input[type="search"],
.stroka > input[type="text"],
.stroka > select,
.sl-search-row > .poisk,
.sl-search-row > input[type="search"],
.sl-search-row > input[type="text"],
.sl-search-row > select {
  flex: 1 1 var(--stroka-field-preferred);
  width: var(--stroka-field-preferred);
  min-width: var(--stroka-field-min);
  max-width: var(--stroka-field-preferred);
  box-sizing: border-box;
}

.stroka > .sl-search-wrap,
.sl-search-row > .sl-search-wrap,
.stroka > .stroka-field,
.sl-search-row > .stroka-field,
.sl-picker .sl-search-wrap,
.zr-picker .sl-search-wrap,
.zr-picker .zr-search-wrap {
  position: relative;
  flex: 1 1 var(--stroka-field-preferred);
  width: var(--stroka-field-preferred);
  min-width: var(--stroka-field-min);
  max-width: var(--stroka-field-preferred);
  min-height: 0;
}

/* Labeled form cell inside stroka (label ABOVE control) — card/settings forms.
 * Filter toolbar chrome: label LEFT — .stroka-field--filter (zl_stroka_filter_label_left_v1).
 */
.stroka > .stroka-field,
.sl-search-row > .stroka-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  align-self: stretch;
}

/* Marker: zl_stroka_filter_label_left_v1 — filter cell: label LEFT of control
 * Specificity beats .stroka > .stroka-field { flex-direction: column }.
 * Cell width = label + control (~210); NOT control-only 210 squeezing label up. */
.stroka > .stroka-field.stroka-field--filter,
.sl-search-row > .stroka-field.stroka-field--filter,
.zl-stroka-filter-host .stroka-field.stroka-field--filter,
/* Marker: zl_stroka_filter_all_cells_resize_drag_v1 — --btn/--chips label LEFT (same as --filter) */
.stroka > .stroka-field.stroka-field--btn,
.sl-search-row > .stroka-field.stroka-field--btn,
.zl-stroka-filter-host .stroka-field.stroka-field--btn,
.stroka > .stroka-field.stroka-field--chips,
.sl-search-row > .stroka-field.stroka-field--chips,
.zl-stroka-filter-host .stroka-field.stroka-field--chips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /* Marker: zl_stroka_filter_label_flush_control_v1 — sizes SSOT below */
  gap: var(--zl-stroka-filter-label-gap, 2px);
  align-self: center;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* Marker: zl_stroka_filter_label_flush_control_v1 — hug text; STOP -webkit-box@max-width gap */
.stroka > .stroka-field.stroka-field--filter > .stroka-field-label,
.sl-search-row > .stroka-field.stroka-field--filter > .stroka-field-label,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > .stroka-field-label {
  flex: 0 0 auto;
  display: block;
  width: fit-content;
  max-width: var(--zl-stroka-filter-label-max, 7.5em);
  max-height: calc(1.15em * 2);
  white-space: normal;
  line-height: 1.15;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: left;
}
.stroka > .stroka-field.stroka-field--btn > .stroka-field-label,
.sl-search-row > .stroka-field.stroka-field--btn > .stroka-field-label,
.zl-stroka-filter-host .stroka-field.stroka-field--btn > .stroka-field-label,
.stroka > .stroka-field.stroka-field--chips > .stroka-field-label,
.sl-search-row > .stroka-field.stroka-field--chips > .stroka-field-label,
.zl-stroka-filter-host .stroka-field.stroka-field--chips > .stroka-field-label {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  max-width: 12em;
}
.stroka > .stroka-field.stroka-field--filter > .vybor,
.stroka > .stroka-field.stroka-field--filter > .pole,
.stroka > .stroka-field.stroka-field--filter > .poisk,
.stroka > .stroka-field.stroka-field--filter > input,
.stroka > .stroka-field.stroka-field--filter > select,
.sl-search-row > .stroka-field.stroka-field--filter > .vybor,
.sl-search-row > .stroka-field.stroka-field--filter > .pole,
.sl-search-row > .stroka-field.stroka-field--filter > .poisk,
.sl-search-row > .stroka-field.stroka-field--filter > input,
.sl-search-row > .stroka-field.stroka-field--filter > select,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > .vybor,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > .pole,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > .poisk,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > input,
.zl-stroka-filter-host .stroka-field.stroka-field--filter > select {
  flex: 1 1 auto;
  width: var(--stroka-field-preferred, 210px);
  min-width: var(--stroka-field-min, 120px);
  max-width: none;
  box-sizing: border-box;
  /* Marker: zl_stroka_filter_label_flush_control_v1 — control text flush left */
  padding-left: var(--zl-stroka-filter-control-pad-x, 4px);
}

.stroka-field-label,
.stroka > .stroka-field > label,
.sl-search-row > .stroka-field > label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.2;
}

.stroka > .stroka-field > input,
.stroka > .stroka-field > select,
.stroka > .stroka-field > textarea,
.stroka > .stroka-field > .sl-search-wrap,
.stroka > .stroka-field > .stroka-control,
.sl-search-row > .stroka-field > input,
.sl-search-row > .stroka-field > select,
.sl-search-row > .stroka-field > textarea,
.sl-search-row > .stroka-field > .sl-search-wrap,
.sl-search-row > .stroka-field > .stroka-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: none;
  box-sizing: border-box;
}

/* Full-width cell — only textarea / explicit user request (NOT default for counterparty) */
.stroka > .stroka-field--wide,
.sl-search-row > .stroka-field--wide {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Prefer wider share — only when user explicitly asks */
.stroka > .stroka-field--grow,
.sl-search-row > .stroka-field--grow {
  flex: 1.4 1 240px;
  max-width: none;
  width: auto;
  min-width: var(--stroka-field-min);
}

/* Date pair cell: fits two × 210px + gap + sep (not stretch) */
.stroka > .stroka-field--dates,
.sl-search-row > .stroka-field--dates {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

.stroka > .sl-search-wrap > input,
.sl-search-row > .sl-search-wrap > input,
.stroka > .stroka-field > input,
.sl-search-row > .stroka-field > input,
.stroka > .stroka-field > .sl-search-wrap > input,
.stroka > .stroka-field > .stroka-control > input,
.stroka > .stroka-field > .zr-search-wrap > input,
.sl-search-row > .stroka-field > .sl-search-wrap > input,
.sl-search-row > .stroka-field > .stroka-control > input,
.sl-picker .sl-search-wrap > input,
.zr-picker .sl-search-wrap > input,
.zr-picker .zr-search-wrap > input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: none;
  box-sizing: border-box;
}

.stroka > .knopka,
.stroka > button,
.stroka > .sl-btn-primary,
.stroka > .sl-btn-secondary,
.sl-search-row > .knopka,
.sl-search-row > button,
.sl-search-row > .sl-btn-primary,
.sl-search-row > .sl-btn-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
}

/* Explicit wrap allowed (rare) */
.stroka-wrap,
.stroka.stroka-wrap,
.sl-search-row.stroka-wrap {
  flex-wrap: wrap;
}

/* Opt out: stack vertically */
.stroka-stack,
.stroka.stroka-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.stroka-stack > .sl-search-wrap,
.stroka-stack > .stroka-field,
.stroka-stack > .poisk,
.stroka-stack > input,
.stroka-stack > select {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

/* Narrow screens: allow wrap only below ~560px */
@media (max-width: 560px) {
  .stroka:not(.stroka-stack),
  .sl-search-row:not(.stroka-stack) {
    flex-wrap: wrap;
  }
}

/* Dept pickers (zerno/zakupka/obecpeheny): card wide enough for one row */
body.zr-picker .zr-main,
body.zr-picker main.sl-page.zr-main {
  max-width: min(980px, calc(100vw - 16px));
}

/* Marker: zl_stroka_filter_cells_resize_drag_v1 — opt-in; leftover does NOT fill */
/* Marker: zl_stroka_filter_row_shrinkwrap_independent_v1 — row = sum(cells);
   shrink one cell → only that cell; shrink rightmost → row shrinks (no neighbor stretch) */
.zl-stroka-filter-host[data-zl-stroka-filters="1"] {
  /* Marker: zl_stroka_filter_label_flush_control_v1 — size tokens (no page dupes) */
  --zl-stroka-filter-label-gap: 2px;
  --zl-stroka-filter-control-pad-x: 4px;
  --zl-stroka-filter-label-max: 7.5em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row {
  flex: 0 0 auto;
  /* Was width:100% — leftover invited flex-grow siblings to stretch.
     Row width = content; host still 100% so empty stays OUTSIDE the row. */
  width: max-content;
  max-width: 100%;
  /* Marker: zl_stroka_filter_hscroll_only_when_needed_v1 — no bar when content fits */
  overflow-x: hidden;
  flex-wrap: nowrap;
  /* Marker: zl_stroka_filter_row_pack_start_v1 — cells flush left */
  justify-content: flex-start;
  align-items: center;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka.zl-stroka-row--hscroll,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row.zl-stroka-row--hscroll {
  overflow-x: auto;
}

/* Marker: zl_stroka_filter_row_pack_start_v1 — trailing chrome (col-vis) right; no flex:1 spacer left */
.zl-stroka-filter-host[data-zl-stroka-filters="1"] .zl-stroka-row-tail,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] [data-zl-stroka-tail="1"] {
  margin-left: auto;
  flex: 0 0 auto;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .zl-stroka-row-spacer,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .zl-stroka-row-spacer {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  pointer-events: none;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > datalist,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > datalist {
  display: none;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] .stroka-field.stroka-field--filter,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] .stroka-field.stroka-field--btn,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] .stroka-field.stroka-field--chips {
  position: relative;
  /* Beat default .stroka > .stroka-field { flex: 1 1 210 } — independent widths */
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--stroka-field-preferred);
  min-width: 140px;
  max-width: none;
  overflow: hidden;
  box-sizing: border-box;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--btn,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--btn,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] .stroka-field.stroka-field--btn {
  width: auto;
  min-width: 0;
}

/* Marker: zl_stroka_filter_chips_auto_width_v1 — horizontal chip strip; no 210 column wrap */
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--chips,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--chips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /* Marker: zl_stroka_filter_label_flush_control_v1 — same gap token as --filter */
  gap: var(--zl-stroka-filter-label-gap, 2px);
  width: auto;
  min-width: 0;
  max-width: none;
  overflow-x: hidden;
  overflow-y: hidden;
  align-self: center;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--chips.zl-stroka-field--hscroll,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--chips.zl-stroka-field--hscroll {
  overflow-x: auto;
}

/* Marker: zl_stroka_filter_title_no_hscroll_v1 — «Блок …» shrinkwrap; never inner bar */
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--title,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--title,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--chips:has(> .rmi-block-title),
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--chips:has(> .rmi-block-title) {
  width: auto;
  min-width: 0;
  max-width: none;
  overflow-x: hidden;
  overflow-y: hidden;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--title.zl-stroka-field--hscroll,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--title.zl-stroka-field--hscroll,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field--chips:has(> .rmi-block-title).zl-stroka-field--hscroll,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field--chips:has(> .rmi-block-title).zl-stroka-field--hscroll {
  overflow-x: hidden;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field > .zl-stroka-field-resize,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field > .zl-stroka-field-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  margin-right: -4px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
  user-select: none;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field > .zl-stroka-field-resize::after,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field > .zl-stroka-field-resize::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 3px;
  width: 2px;
  border-radius: 1px;
  background: transparent;
}

.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field:hover > .zl-stroka-field-resize::after,
.zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field:hover > .zl-stroka-field-resize::after,
.zl-stroka-filters--resizing .zl-stroka-field-resize::after {
  background: #94a3b8;
}

.zl-stroka-filter-host .zl-stroka-field--dragging {
  opacity: 0.45;
}

/* Marker: zl_chrome_cell_drag_by_title_v1 — grab by filter title */
.zl-stroka-filter-host .stroka-field-label--draggable {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.zl-stroka-filters--dragging .stroka-field-label--draggable {
  cursor: grabbing;
}

/* Marker: zl_stroka_layout_include_hidden_cells_v1 — no empty gray scroll bars */
.zl-stroka-filter-host > .stroka.zl-stroka-row--empty,
.zl-stroka-filter-host > .stroka.zl-stroka-row--all-hidden {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.zl-stroka-filter-host .zl-stroka-row--drop-target {
  outline: 2px dashed #94a3b8;
  outline-offset: 2px;
  border-radius: 6px;
}

.zl-stroka-field--drag-ghost {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  background: #fff;
  border-radius: 6px;
  padding: 4px;
}

@media (max-width: 560px) {
  .zl-stroka-filter-host[data-zl-stroka-filters="1"] > .stroka > .stroka-field > .zl-stroka-field-resize,
  .zl-stroka-filter-host[data-zl-stroka-filters="1"] > .sl-search-row > .stroka-field > .zl-stroka-field-resize {
    display: none;
  }
}

/* Marker: zl_stroka_registry_tabs_cells_v1 — status tabs = --btn cells; no page flex-wrap engine */
.zl-stroka-filter-host[data-zl-stroka-filters="1"].zl-stroka-registry-tabs,
.zl-stroka-filter-host[data-zl-stroka-filters="1"].zl-table-registry-tabs,
.zl-stroka-filter-host[data-zl-stroka-filters="1"].tr-tabs {
  flex-wrap: nowrap;
  margin: 0 0 10px;
  gap: 6px;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs > .stroka,
.zl-stroka-filter-host.zl-table-registry-tabs > .stroka,
.zl-stroka-filter-host.tr-tabs > .stroka {
  gap: 6px;
  margin-bottom: 0;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  padding: 5px 10px;
  gap: 6px;
  min-height: 34px;
  box-sizing: border-box;
  cursor: default;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:hover {
  background: #f8fafc;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn > .stroka-field-label {
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn > .zl-table-registry-tab,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn > .tr-tab {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.is-active),
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.active),
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.tr-tab.active) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.tr-tab.active):hover,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.active):hover,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.is-active):hover {
  background: #1d4ed8;
}

.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.tr-tab.active) .tr-tab-count,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.active) .zl-table-registry-tab-count,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.zl-table-registry-tab.is-active) .zl-table-registry-tab-count,
.zl-stroka-filter-host.zl-stroka-registry-tabs .stroka-field.stroka-field--btn:has(.tr-tab.active) .zl-table-registry-tab-count {
  background: rgba(255, 255, 255, 0.22);
}
