/* WorkerNet ERP — Design Tokens v4.2
   Calm palette — синхронизирована с Android Color.kt
   Brand (маркетинг/лого): #1871a5 / #125d88 / #FF6B35
   Action (UI):            #1871a5 / #125d88 / #E2602E
   Статусы совместимы с systemRole из TaskStatusAR.
   Файл подключается поверх style.css — переменные --erpds-*
   не конфликтуют с --main-color-* из style.css.
*/
:root {
  /* === Surfaces & Ink === */
  --erpds-bg:             #FAFAFB;
  --erpds-bg-page:        var(--erpds-bg);
  --erpds-bg-2:           #F2F4F7;
  --erpds-surface:        #FFFFFF;
  --erpds-surface-2:      #F6F7F9;
  --erpds-border:         #DDE1E8;
  --erpds-border-strong:  #C4CAD4;
  --erpds-border-strongest: #9AA3AF;
  --erpds-text:           #0F172A;
  --erpds-text-muted:     #525A66;
  --erpds-text-faint:     #6B7280;

  /* === Brand (logo / mobile / marketing) === */
  --erpds-brand:          #1871a5;
  --erpds-brand-2:        #125d88;

  /* === Action (UI — десатурированная версия бренда) === */
  --erpds-accent:         #1871a5;
  --erpds-accent-hover:   #125d88;
  --erpds-accent-text:    #125d88;
  --erpds-accent-soft:    #deedf5;
  --erpds-accent-soft-hover: #cce0ed;

  /* === Secondary orange === */
  --erpds-orange:         #E2602E;
  --erpds-orange-soft:    #FCE7DA;
  --erpds-ink:            #0F172A;
  --erpds-plan-header:    #848284;   /* фон хедера в режиме «план» */

  /* Текст поверх accent/цветных поверхностей (V-007: dark-mode overridable) */
  --erpds-text-on-accent: #FFFFFF;
  --erpds-on-accent:      #FFFFFF;

  /* === Статусы заявок (systemRole → TaskStatusAR) ===
     1 Новая      → info  #2563B8 (denim)
     2 Ожидание   → hold  #C98A1A (mustard)
     5 В работе   → run   #E07A1F (amber)
     6 Выполнено  → ok    #2E8540 (forest)
     4 Не выполн. → bad   #B62A26 (brick)
     9 Перенесена → bad   #B62A26 (brick)
  */
  --erpds-ok:             #2E8540;
  --erpds-ok-soft:        #E5F1E6;
  --erpds-ok-text:        #1F5E2D;

  --erpds-warn:           #E07A1F;
  --erpds-warn-soft:      #FBEDD9;
  --erpds-warn-text:      #8A4A0A;

  --erpds-hold:           #C98A1A;
  --erpds-hold-soft:      #FAF1DC;
  --erpds-hold-text:      #7A540B;

  --erpds-bad:            #B62A26;
  --erpds-bad-soft:       #F5DDD9;
  --erpds-bad-text:       #821B18;

  --erpds-info:           #2563B8;
  --erpds-info-soft:      #E0EAF6;
  --erpds-info-text:      #163E78;

  /* Соглашение по форматам токенов:
     Light-тема: -soft токены — hex (непрозрачный), хорошо читается на белом фоне.
     Dark-тема (style_dark.css): -soft переопределяются через rgba() с прозрачностью,
     чтобы корректно смешиваться с тёмным фоном. Расхождение форматов намеренное —
     не заменяйте rgba() на hex в dark-overrides. */
  --erpds-purple:         #5520b0;
  --erpds-purple-soft:    #ede8fd;
  --erpds-purple-text:    #3d1880;
  --erpds-rose:           #b0205a;
  --erpds-rose-soft:      #fce7f0;
  --erpds-rose-text:      #7a1240;

  /* === Shadows & Radii === */
  --erpds-shadow-sm:      0 1px 2px rgba(15,23,42,0.04);
  --erpds-shadow:         0 1px 3px rgba(15,23,42,0.06), 0 8px 24px -16px rgba(15,23,42,0.08);
  --erpds-shadow-lg:      0 12px 40px -12px rgba(15,23,42,0.16);

  --erpds-radius-sm:      8px;
  --erpds-radius:         12px;
  --erpds-radius-lg:      14px;
  --erpds-radius-xl:      20px;
  --erpds-radius-xs:      4px;
  --erpds-radius-pill:    999px;

  /* === Алиасы недостающих токенов шкалы ===
     Эти имена использовались в redesign-CSS без определения и без fallback →
     свойства полностью отбрасывались (border/background/shadow не рендерились).
     Заданы как алиасы существующих токенов: dark-режим наследуется лениво
     через var(), отдельные override в style_dark.css не нужны. */
  --erpds-bg-1:           var(--erpds-bg);
  --erpds-bg-3:           var(--erpds-bg-2);
  --erpds-border-soft:    var(--erpds-border);
  --erpds-border-faint:   var(--erpds-border);
  --erpds-border-light:   var(--erpds-border);
  --erpds-border-dark:    var(--erpds-border-strong);
  --erpds-text-strong:    var(--erpds-text);
  --erpds-text-primary:   var(--erpds-text);
  --erpds-text-secondary: var(--erpds-text-muted);
  --erpds-accent-strong:  var(--erpds-accent-hover);
  --erpds-primary:        var(--erpds-accent);
  --erpds-primary-light:  var(--erpds-accent-soft);
  --erpds-link:           var(--erpds-accent);
  --erpds-focus:          var(--erpds-accent);
  --erpds-font:           var(--erpds-sans);
  --erpds-surface-alt:    var(--erpds-surface-2);
  --erpds-surface-hover:  var(--erpds-bg-2);
  --erpds-muted:          var(--erpds-text-muted);
  --erpds-muted-soft:     var(--erpds-bg-2);
  --erpds-danger:         var(--erpds-bad);
  --erpds-danger-bg:      var(--erpds-bad-soft);
  --erpds-warning:        var(--erpds-warn);
  --erpds-error:          var(--erpds-bad);
  --erpds-err:            var(--erpds-bad);
  --erpds-err-bg:         var(--erpds-bad-soft);
  --erpds-err-text:       var(--erpds-bad-text);
  --erpds-ok-bg:          var(--erpds-ok-soft);
  --erpds-warn-bg:        var(--erpds-warn-soft);
  --erpds-ok-border:      color-mix(in srgb, var(--erpds-ok) 35%, var(--erpds-surface));
  --erpds-ok-border-hover: color-mix(in srgb, var(--erpds-ok) 55%, var(--erpds-surface));
  --erpds-info-border:    color-mix(in srgb, var(--erpds-info) 35%, var(--erpds-surface));
  --erpds-info-border-hover: color-mix(in srgb, var(--erpds-info) 55%, var(--erpds-surface));
  --erpds-warn-border:    color-mix(in srgb, var(--erpds-warn) 30%, var(--erpds-surface));
  --erpds-err-border:     color-mix(in srgb, var(--erpds-bad) 35%, var(--erpds-surface));
  --erpds-err-border-hover: color-mix(in srgb, var(--erpds-bad) 55%, var(--erpds-surface));
  --erpds-ok-hover:       color-mix(in srgb, var(--erpds-ok) 82%, black);
  --erpds-bad-hover:      color-mix(in srgb, var(--erpds-bad) 82%, black);
  --erpds-bad-dark:       color-mix(in srgb, var(--erpds-bad) 72%, black);
  --erpds-warn-dark:      color-mix(in srgb, var(--erpds-warn) 70%, black);
  --erpds-shadow-md:      var(--erpds-shadow);
  --erpds-shadow-xs:      var(--erpds-shadow-sm);

  /* === Typography === */
  --erpds-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --erpds-sans: "Inter", "Inter Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --erpds-display: "Inter", "Inter Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  /* Font-size scale */
  --erpds-text-xs:   11px;
  --erpds-text-sm:   12px;
  --erpds-text-base: 13px;
  --erpds-text-md:   14px;
  --erpds-text-lg:   16px;
  --erpds-text-xl:   20px;
  --erpds-text-2xl:  24px;
  --erpds-text-3xl:  32px;

  /* Line-height scale */
  --erpds-leading-tight:  1.25;
  --erpds-leading-snug:   1.35;
  --erpds-leading-normal: 1.5;

  /* === Grid & Spacing === */
  --erpds-grid-gap:        8px;
  --erpds-grid-padding-x:  20px;
  --erpds-grid-padding-y:  12px;
  --erpds-grid-padding-x-mobile: 12px;
  --erpds-grid-padding-y-mobile: 10px;

  /* Spacing scale */
  --erpds-space-1:  4px;
  --erpds-space-2:  8px;
  --erpds-space-3: 12px;
  --erpds-space-4: 16px;
  --erpds-space-6: 24px;
  --erpds-space-8: 32px;

  /* === Motion (интерактивные элементы) === */
  --erpds-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;

  /* === Glassmorphism & Effects === */
  --erpds-glass-bg:       rgba(255, 255, 255, 0.75);
  --erpds-glass-blur:     blur(12px) saturate(180%);
  --erpds-glass-border:   1px solid rgba(255, 255, 255, 0.45);
  --erpds-glass-shadow:   0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  --erpds-overlay-bg:     #263238;
  --erpds-calendar-finished-bg: #DFDFDF;
  --erpds-calendar-finished-border: #c0c0c0;
  --erpds-calendar-finished-text: #3f4752;
  --erpds-calendar-comment-bg: #faf8f8;
  --erpds-calendar-comment-text: #0F172A;
  --erpds-calendar-assign-hover: #BDEFFF;
  --erpds-calendar-assign-blocked: #FFEBEF;

  /* === Z-index manifest (V-012) ===
     Шкала layer'ов. Постепенная миграция raw z-index → токены.
     Используется существующие значения из *-redesign.css как baseline. */
  --erpds-z-base:           0;
  --erpds-z-sticky:         10;     /* navigation tabs, ul#navigation */
  --erpds-z-flyout:         100;    /* aside AJAX flyout */
  --erpds-z-dropdown:       500;    /* select/autocomplete */
  --erpds-z-sticky-bar:     950;    /* customer sticky header */
  --erpds-z-modal-backdrop: 9000;
  --erpds-z-modal:          9100;
  --erpds-z-popover:        9500;
  --erpds-z-toast:          9900;   /* ws-toast */
  --erpds-z-tooltip:        9990;
  --erpds-z-debug:          9999;   /* debug overlay only */
}

/* ============================================================
   КОМПОНЕНТЫ
   Классы с префиксом .erpds- не перекрывают существующие стили.
   ============================================================ */

/* --- Global layout/accessibility baseline ---
   Loaded after legacy style.css, so this normalizes old table/form pages too. */
html {
  -webkit-tap-highlight-color: rgba(24, 113, 165, 0.16);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body,
.table_block,
.table_data,
.table_item,
.div_space,
.erpds-card,
.erpds-card-lg,
[class^="erpds-"],
[class*=" erpds-"] {
  min-width: 0;
}

a,
button,
input,
select,
textarea,
label,
[onclick]:not(a):not(button):not(input):not(select):not(textarea) {
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

#main_content:focus {
  outline: none;
}

.erpds-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--erpds-z-tooltip, 9990);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--erpds-border-strong, #9AA3AF);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface, #FFFFFF);
  color: var(--erpds-accent-text, #125d88);
  font: 600 13px/1.2 var(--erpds-sans, ui-sans-serif, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: var(--erpds-shadow, 0 1px 3px rgba(15,23,42,0.06));
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.erpds-skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

.table_item td,
.table_data .report > div,
.table_data .item > div,
.div_space,
.erpds-card,
.erpds-card-lg {
  overflow-wrap: anywhere;
}

.table_block:not(.erpds-card) .item > div,
.div_space {
  line-height: 1.45;
}

.table_block:not(.erpds-card) .left_data,
.table_block:not(.erpds-card) .settings_option_name {
  color: var(--erpds-text-muted, #525A66);
  font-weight: 600;
}

/* --- Legacy readability normalization ---
   Старые шаблоны часто передают смысл только цветом. Усиливаем контраст,
   сканируемость и поведение длинного текста без изменения PHP-разметки. */
nav ul li {
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

#div_yellow_info {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  color: var(--erpds-text, #0F172A);
}

#div_yellow_info .div_info_block {
  margin: 0;
  padding: 10px 12px;
  background: var(--erpds-info-soft, #E0EAF6);
  border: 1px solid var(--erpds-info-border, #AFC7E8);
  border-left: 4px solid var(--erpds-info, #2563B8);
  border-radius: var(--erpds-radius-sm, 8px);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}

#div_yellow_info .div_info_block_advert {
  background: var(--erpds-ok-soft, #E5F1E6);
  border-color: var(--erpds-ok-border, #BBD9C1);
  border-left-color: var(--erpds-ok, #2E8540);
}

#div_yellow_info .important {
  background: var(--erpds-warn-soft, #FBEDD9);
  border-color: var(--erpds-warn-border, #EAC99D);
  border-left-color: var(--erpds-warn, #E07A1F);
}

#div_yellow_info .div_info_block .caption {
  margin: 0 0 4px;
  color: var(--erpds-text, #0F172A);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#div_yellow_info .div_info_block .text {
  color: var(--erpds-text-muted, #525A66);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#div_yellow_info .div_info_block .text span {
  color: var(--erpds-text, #0F172A);
  font-weight: 700;
}

#div_yellow_info .div_info_block a {
  color: var(--erpds-accent-text, #125d88);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#div_yellow_info .div_info_block a:hover {
  color: var(--erpds-accent-hover, #125d88);
}

.table_table .green_text,
.table_table .red_text,
.table_item .green_text,
.table_item .red_text,
.div_space .green_text,
.div_space .red_text {
  font-weight: 700;
}

.table_table .green_text,
.table_item .green_text,
.div_space .green_text {
  color: var(--erpds-ok-text, #1F5E2D);
}

.table_table .red_text,
.table_item .red_text,
.div_space .red_text {
  color: var(--erpds-bad-text, #821B18);
}

.gray_column {
  background: var(--erpds-bg-2, #F2F4F7);
  color: var(--erpds-text-muted, #525A66);
  font-weight: 600;
}

.table_block .link_dashed,
.table_table .link_dashed,
.table_data .link_dashed,
.table_item .link_dashed,
.j_card_div .link_dashed,
.erpds-card .link_dashed,
.erpds-card-lg .link_dashed,
.div_space .link_dashed,
.erpds-action-row .link_dashed,
.table_block .link_dashed2,
.table_table .link_dashed2,
.table_data .link_dashed2,
.table_item .link_dashed2,
.j_card_div .link_dashed2,
.erpds-card .link_dashed2,
.erpds-card-lg .link_dashed2,
.div_space .link_dashed2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 4px;
  border-radius: var(--erpds-radius-xs, 4px);
  color: var(--erpds-accent-text, #125d88);
  line-height: 1.35;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

button.link_dashed,
button.link_dashed2 {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--erpds-accent-text, #125d88);
}

.table_block .link_dashed:hover,
.table_table .link_dashed:hover,
.table_data .link_dashed:hover,
.table_item .link_dashed:hover,
.j_card_div .link_dashed:hover,
.erpds-card .link_dashed:hover,
.erpds-card-lg .link_dashed:hover,
.div_space .link_dashed:hover,
.erpds-action-row .link_dashed:hover,
.table_block .link_dashed2:hover,
.table_table .link_dashed2:hover,
.table_data .link_dashed2:hover,
.table_item .link_dashed2:hover,
.j_card_div .link_dashed2:hover,
.erpds-card .link_dashed2:hover,
.erpds-card-lg .link_dashed2:hover,
.div_space .link_dashed2:hover {
  background: var(--erpds-accent-soft, #deedf5);
  color: var(--erpds-accent-hover, #125d88);
  text-decoration: none;
}

.table_block .link_dashed:focus-visible,
.table_table .link_dashed:focus-visible,
.table_data .link_dashed:focus-visible,
.table_item .link_dashed:focus-visible,
.j_card_div .link_dashed:focus-visible,
.erpds-card .link_dashed:focus-visible,
.erpds-card-lg .link_dashed:focus-visible,
.div_space .link_dashed:focus-visible,
.erpds-action-row .link_dashed:focus-visible,
.table_block .link_dashed2:focus-visible,
.table_table .link_dashed2:focus-visible,
.table_data .link_dashed2:focus-visible,
.table_item .link_dashed2:focus-visible,
.j_card_div .link_dashed2:focus-visible,
.erpds-card .link_dashed2:focus-visible,
.erpds-card-lg .link_dashed2:focus-visible,
.div_space .link_dashed2:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 2px;
}

.table_block .link_dashed > .us-icon,
.table_table .link_dashed > .us-icon,
.table_data .link_dashed > .us-icon,
.table_item .link_dashed > .us-icon,
.j_card_div .link_dashed > .us-icon,
.erpds-card .link_dashed > .us-icon,
.erpds-card-lg .link_dashed > .us-icon,
.div_space .link_dashed > .us-icon {
  color: var(--erpds-text-muted, #525A66);
  flex: 0 0 auto;
}

.table_block .link_dashed:hover > .us-icon,
.table_table .link_dashed:hover > .us-icon,
.table_data .link_dashed:hover > .us-icon,
.table_item .link_dashed:hover > .us-icon,
.j_card_div .link_dashed:hover > .us-icon,
.erpds-card .link_dashed:hover > .us-icon,
.erpds-card-lg .link_dashed:hover > .us-icon,
.div_space .link_dashed:hover > .us-icon {
  color: currentColor;
}

.label_error,
.label_alert,
#div_failuremsg {
  max-width: min(100%, 760px);
  border: 1px solid var(--erpds-err-border, #DFA8A5);
  border-left: 4px solid var(--erpds-bad, #B62A26);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-bad-soft, #F5DDD9);
  color: var(--erpds-bad-text, #821B18);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.label_error,
.label_alert {
  margin: 10px 0;
  padding: 10px 12px;
  font-size: 13px;
}

#div_failuremsg {
  width: auto;
  margin: 10px 0;
}

#div_failuremsg_header {
  padding: 8px 12px;
  background: transparent;
  color: var(--erpds-bad-text, #821B18);
  border-bottom: 1px solid var(--erpds-err-border, #DFA8A5);
  font-weight: 700;
}

#div_failuremsg_div {
  padding: 10px 12px;
}

.table_block .good_info_text,
.table_table .good_info_text,
.table_data .good_info_text,
.table_item .good_info_text,
.j_card_div .good_info_text,
.erpds-card .good_info_text,
.erpds-card-lg .good_info_text,
.div_space .good_info_text,
.table_block .bad_info_text,
.table_table .bad_info_text,
.table_data .bad_info_text,
.table_item .bad_info_text,
.j_card_div .bad_info_text,
.erpds-card .bad_info_text,
.erpds-card-lg .bad_info_text,
.div_space .bad_info_text,
.table_block .info_block,
.table_table .info_block,
.table_data .info_block,
.table_item .info_block,
.j_card_div .info_block,
.erpds-card .info_block,
.erpds-card-lg .info_block,
.div_space .info_block {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--erpds-radius-pill, 999px);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.table_block .good_info_text,
.table_table .good_info_text,
.table_data .good_info_text,
.table_item .good_info_text,
.j_card_div .good_info_text,
.erpds-card .good_info_text,
.erpds-card-lg .good_info_text,
.div_space .good_info_text {
  background: var(--erpds-ok-soft, #E5F1E6);
  color: var(--erpds-ok-text, #1F5E2D);
}

.table_block .bad_info_text,
.table_table .bad_info_text,
.table_data .bad_info_text,
.table_item .bad_info_text,
.j_card_div .bad_info_text,
.erpds-card .bad_info_text,
.erpds-card-lg .bad_info_text,
.div_space .bad_info_text {
  background: var(--erpds-bad-soft, #F5DDD9);
  color: var(--erpds-bad-text, #821B18);
}

.table_block .info_block,
.table_table .info_block,
.table_data .info_block,
.table_item .info_block,
.j_card_div .info_block,
.erpds-card .info_block,
.erpds-card-lg .info_block,
.div_space .info_block {
  background: var(--erpds-bg-2, #F2F4F7);
  color: var(--erpds-text-muted, #525A66);
}

#usersearch,
#usersearch2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  height: auto;
  padding: 6px 48px 6px 10px;
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface, #FFFFFF);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
  line-height: 1.35;
}

#usersearch:focus-within,
#usersearch2:focus-within {
  border-color: var(--erpds-focus, #1871a5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erpds-focus, #1871a5) 16%, transparent);
}

#usersearch .field,
#usersearch2 .field {
  flex: 1 1 auto;
  width: auto;
  min-width: 140px;
  height: 30px;
  margin-left: 0;
  border-radius: var(--erpds-radius-xs, 4px);
  color: var(--erpds-text, #0F172A);
  background: var(--erpds-surface, #FFFFFF);
}

#usersearch .button,
#usersearch2 .button {
  width: 40px;
  min-height: 40px;
  border-radius: 0 var(--erpds-radius-sm, 8px) var(--erpds-radius-sm, 8px) 0;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

#usersearch .check,
#usersearch2 .check {
  width: auto;
  margin: 0;
  color: var(--erpds-text-muted, #525A66);
  font-size: 12px;
  line-height: 1.35;
}

ul#navigation,
ul#navigation2 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: auto;
  min-height: 40px;
  margin: 10px 0 12px;
  padding: 0 0 0 4px;
  border-bottom: 1px solid var(--erpds-border, #DDE1E8);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

ul#navigation li,
ul#navigation2 li {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: var(--erpds-radius-sm, 8px) var(--erpds-radius-sm, 8px) 0 0;
  background: transparent;
}

ul#navigation li a:link,
ul#navigation li a:visited,
ul#navigation2 li a:link,
ul#navigation2 li a:visited {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: auto;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--erpds-radius-sm, 8px) var(--erpds-radius-sm, 8px) 0 0;
  background: transparent;
  color: var(--erpds-text-muted, #525A66);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

ul#navigation li a:hover,
ul#navigation2 li a:hover {
  background: var(--erpds-bg-2, #F2F4F7);
  color: var(--erpds-text, #0F172A);
}

ul#navigation li.selected a:link,
ul#navigation li.selected a:visited,
ul#navigation2 li.selected a:link,
ul#navigation2 li.selected a:visited {
  background: var(--erpds-surface, #FFFFFF);
  color: var(--erpds-accent-text, #125d88);
  border-color: var(--erpds-border, #DDE1E8);
  box-shadow: inset 0 3px 0 var(--erpds-accent, #1871a5);
}

@media (max-width: 640px) {
  #usersearch,
  #usersearch2 {
    flex-wrap: wrap;
    padding-right: 48px;
  }

  #usersearch .field,
  #usersearch2 .field {
    flex-basis: calc(100% - 6px);
  }

  ul#navigation,
  ul#navigation2 {
    margin-left: -4px;
    padding-left: 4px;
  }
}

/* --- Status Pills --- */
.erpds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  background: var(--erpds-bg-2);
  color: var(--erpds-text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--erpds-sans);
}
.erpds-pill .erpds-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* systemRole → CSS modifier */
.erpds-pill.run,
.erpds-pill.status-5        { background: var(--erpds-warn-soft); color: var(--erpds-warn-text); }
.erpds-pill.run .erpds-dot,
.erpds-pill.status-5 .erpds-dot  { background: var(--erpds-warn); }

.erpds-pill.successful,
.erpds-pill.status-6        { background: var(--erpds-ok-soft); color: var(--erpds-ok-text); }
.erpds-pill.successful .erpds-dot,
.erpds-pill.status-6 .erpds-dot  { background: var(--erpds-ok); }

.erpds-pill.failed,
.erpds-pill.status-4        { background: var(--erpds-bad-soft); color: var(--erpds-bad-text); }
.erpds-pill.failed .erpds-dot,
.erpds-pill.status-4 .erpds-dot  { background: var(--erpds-bad); }

.erpds-pill.holded,
.erpds-pill.unfinished,
.erpds-pill.status-2        { background: var(--erpds-hold-soft); color: var(--erpds-hold-text); }
.erpds-pill.holded .erpds-dot,
.erpds-pill.unfinished .erpds-dot,
.erpds-pill.status-2 .erpds-dot  { background: var(--erpds-hold); }

.erpds-pill.cancelled       { background: var(--erpds-bg-2); color: var(--erpds-text-faint); border-color: var(--erpds-border); }
.erpds-pill.cancelled .erpds-dot { background: var(--erpds-text-faint); }

.erpds-pill.new,
.erpds-pill.info,
.erpds-pill.status-1        { background: var(--erpds-info-soft); color: var(--erpds-info-text); }
.erpds-pill.new .erpds-dot,
.erpds-pill.info .erpds-dot,
.erpds-pill.status-1 .erpds-dot  { background: var(--erpds-info); }

/* transferred = same as failed */
.erpds-pill.transferred,
.erpds-pill.status-9        { background: var(--erpds-bad-soft); color: var(--erpds-bad-text); }
.erpds-pill.transferred .erpds-dot,
.erpds-pill.status-9 .erpds-dot  { background: var(--erpds-bad); }

/* --- Buttons --- */
.erpds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--erpds-border);
  background: var(--erpds-surface);
  color: var(--erpds-text);
  font-family: var(--erpds-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: var(--erpds-transition);
  box-sizing: border-box;
}
.erpds-btn:hover  { background: var(--erpds-bg-2); text-decoration: none; }
.erpds-btn:active { transform: translateY(1px); }

.erpds-btn.primary {
  background: var(--erpds-accent);
  border-color: var(--erpds-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.10);
}
.erpds-btn.primary:hover { background: var(--erpds-accent-hover); border-color: var(--erpds-accent-hover); color: #fff; }

.erpds-btn.accent {
  background: var(--erpds-orange);
  border-color: var(--erpds-orange);
  color: #fff;
}
.erpds-btn.accent:hover { background: #C8521F; border-color: #C8521F; color: #fff; }

.erpds-btn.ghost   { border-color: transparent; background: transparent; }
.erpds-btn.ghost:hover { background: var(--erpds-bg-2); }

.erpds-btn.ink     { background: var(--erpds-ink); border-color: var(--erpds-ink); color: #fff; }
.erpds-btn.danger  { background: var(--erpds-bad); border-color: var(--erpds-bad); color: #fff; }
.erpds-btn.sm      { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }

/* --- table_block card elevation (Sber-style upgrade) ---
   design-tokens.css loads after style.css → additive override.
   overflow: hidden clips cells to border-radius on display:table (modern browsers). */
.table_block {
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius, 12px);
  overflow: hidden;
  background: var(--erpds-surface, #FFFFFF);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}

/* Reset inside dialogs and nested contexts where card frame conflicts */
#dialog-box .table_block,
#dialogConfirmbox .table_block,
.gray_block_left .table_block,
.slider_content_double .table_block,
.inventory-filter-row > .table_block {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* --- Card surface --- */
.erpds-card {
  background: var(--erpds-surface);
  border: 1px solid var(--erpds-border);
  border-radius: var(--erpds-radius);
  box-shadow: var(--erpds-shadow-sm);
  box-sizing: border-box;
  min-width: 0;
}
.erpds-card-lg {
  background: var(--erpds-surface);
  border: 1px solid var(--erpds-border);
  border-radius: var(--erpds-radius-lg);
  box-shadow: var(--erpds-shadow);
}
.erpds-card[style*="padding: 16px"],
.j_card_div[style*="padding: 16px"] {
  padding: 12px !important;
}

/* --- Utilities --- */
.erpds-mono   { font-family: var(--erpds-mono); font-feature-settings: "tnum"; }
.erpds-muted  { color: var(--erpds-text-muted); }
.erpds-faint  { color: var(--erpds-text-faint); }
.erpds-divider { height: 1px; background: var(--erpds-border); }

/* Spacing Utilities */
.erpds-mt-4 { margin-top: 4px !important; }
.erpds-mt-8 { margin-top: 8px !important; }
.erpds-mt-12 { margin-top: 12px !important; }
.erpds-mt-16 { margin-top: 16px !important; }
.erpds-mt-24 { margin-top: 24px !important; }
.erpds-mb-4 { margin-bottom: 4px !important; }
.erpds-mb-8 { margin-bottom: 8px !important; }
.erpds-mb-12 { margin-bottom: 12px !important; }
.erpds-mb-16 { margin-bottom: 16px !important; }
.erpds-mb-24 { margin-bottom: 24px !important; }
.erpds-pt-4 { padding-top: 4px !important; }
.erpds-pt-8 { padding-top: 8px !important; }
.erpds-pt-12 { padding-top: 12px !important; }
.erpds-pt-16 { padding-top: 16px !important; }
.erpds-pt-24 { padding-top: 24px !important; }
.erpds-pb-4 { padding-bottom: 4px !important; }
.erpds-pb-8 { padding-bottom: 8px !important; }
.erpds-pb-12 { padding-bottom: 12px !important; }
.erpds-pb-16 { padding-bottom: 16px !important; }
.erpds-pb-24 { padding-bottom: 24px !important; }
.erpds-p-12 { padding: 12px !important; }
.erpds-p-16 { padding: 16px !important; }

/* --- Stat tile (used on customer/dashboard cards) --- */
.erpds-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--erpds-radius-sm);
  background: var(--erpds-surface-2);
  border: 1px solid var(--erpds-border);
  transition: var(--erpds-transition);
}
.erpds-stat-tile:hover {
  background: var(--erpds-surface);
  border-color: var(--erpds-border-strong);
  box-shadow: var(--erpds-shadow-sm);
}
.erpds-stat-tile .label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--erpds-text-faint);
}
.erpds-stat-tile .value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--erpds-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erpds-stat-tile .sub {
  font-size: 11.5px;
  color: var(--erpds-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Legacy dialogs ---
   Дополняет старый #dialog-box / #dialogConfirmbox: стабильные размеры,
   читаемая прокрутка и видимый keyboard focus внутри модальных форм. */
#dialog-box,
#dialogConfirmbox {
  max-width: min(92vw, 760px);
  max-height: calc(100vh - 32px);
  overscroll-behavior: contain;
}

#dialog-box .dialog-content,
#dialogConfirmbox .dialog-content,
#dialogConfirmbox .dialogConfirmContent {
  max-height: calc(100vh - 108px);
  overflow: auto;
  line-height: 1.5;
}

#dialog-box .dialog_header,
#dialog-box .deleteDialog,
#dialogConfirmbox .dialog_header,
#dialogConfirmbox .deleteDialog {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#dialog-box input[type="text"]:focus-visible,
#dialog-box input[type="number"]:focus-visible,
#dialog-box input[type="email"]:focus-visible,
#dialog-box input[type="password"]:focus-visible,
#dialog-box select:focus-visible,
#dialog-box textarea:focus-visible,
#dialogConfirmbox input:focus-visible,
#dialogConfirmbox select:focus-visible,
#dialogConfirmbox textarea:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 1px;
  border-color: var(--erpds-focus, #1871a5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erpds-focus, #1871a5) 18%, transparent);
}

#dialog-box .button:focus-visible,
#dialog-box input[type="submit"].button:focus-visible,
#dialogConfirmbox .button:focus-visible,
#dialog-box .link_dashed:focus-visible,
#dialogConfirmbox .link_dashed:focus-visible {
  outline: 2px solid var(--erpds-focus, #1871a5);
  outline-offset: 2px;
}

#dialog-box .link_dashed,
#dialogConfirmbox .link_dashed {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: var(--erpds-radius-xs, 4px);
}

#dialog-box .link_dashed:hover,
#dialogConfirmbox .link_dashed:hover {
  background: var(--erpds-bg-2, #F2F4F7);
}

@media (max-width: 640px) {
  #dialog-box,
  #dialogConfirmbox {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  #dialog-box .dialog-content,
  #dialogConfirmbox .dialog-content,
  #dialogConfirmbox .dialogConfirmContent {
    max-height: calc(100vh - 92px);
    padding: 12px;
  }
}

/* --- Settings billing edit page ---
   Scoped polish for SettingsBillingHtml::dialogAddEdit. */
.settings-billing-edit {
  max-width: 920px;
  margin: 0 auto 32px;
  color: var(--erpds-text, #0F172A);
}

.settings-billing-edit > .div_space {
  margin: 0 0 12px;
}

.settings-billing-edit > .div_space a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--erpds-radius-sm, 8px);
  color: var(--erpds-text-muted, #525A66);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--erpds-transition);
}

.settings-billing-edit > .div_space a:hover {
  background: var(--erpds-bg-2, #F2F4F7);
  color: var(--erpds-accent-text, #125d88);
  text-decoration: none;
}

.settings-billing-edit > br {
  display: none;
}

.settings-billing-edit .label_h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
  color: var(--erpds-text, #0F172A);
  font-family: var(--erpds-display, var(--erpds-sans));
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.settings-billing-edit .label_h2::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: var(--erpds-radius-pill, 999px);
  background: var(--erpds-accent, #1871a5);
}

.settings-billing-edit form {
  margin: 0;
}

.settings-billing-edit .table_block.erpds-card {
  padding: 4px 0 !important;
  border-radius: var(--erpds-radius-sm, 8px);
  box-shadow: var(--erpds-shadow, 0 1px 3px rgba(15,23,42,0.06));
}

.settings-billing-edit .table_block.erpds-card + .label_h2 {
  margin-top: 26px;
}

.settings-billing-edit .erpds-card.table_block .item:not([style*="display:none"]):not([style*="display: none"]) {
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  column-gap: 20px;
  padding: 0;
  border-bottom-color: var(--erpds-border, #DDE1E8);
}

.settings-billing-edit .erpds-card.table_block .item > div {
  padding: 12px 16px;
}

.settings-billing-edit .erpds-card.table_block .left_data {
  width: auto !important;
  max-width: none;
  color: var(--erpds-text-muted, #525A66);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  background: var(--erpds-surface-2, #F6F7F9);
  white-space: normal;
  overflow-wrap: anywhere;
}

.settings-billing-edit .info_block {
  display: block;
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--erpds-text-faint, #6B7280);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.settings-billing-edit .erpds-card.table_block .item > div:not(.left_data) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--erpds-text, #0F172A);
  line-height: 1.45;
}

.settings-billing-edit input.input_box,
.settings-billing-edit select,
.settings-billing-edit input[type="password"],
.settings-billing-edit input[type="url"],
.settings-billing-edit input[type="number"],
.settings-billing-edit input[type="text"] {
  width: min(100%, 420px);
  min-height: 34px;
}

.settings-billing-edit input[name="billing_currency"],
.settings-billing-edit input[name="traffic_update_interval"] {
  width: 110px;
}

.settings-billing-edit input[type="file"] {
  max-width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--erpds-border-strong, #C4CAD4);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface-2, #F6F7F9);
  color: var(--erpds-text-muted, #525A66);
  font-size: 12px;
}

.settings-billing-edit input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--erpds-accent, #1871a5);
}

.settings-billing-edit .settings-billing-image {
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface, #FFFFFF);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}

.settings-billing-edit .settings-billing-image img {
  max-width: 96px;
  height: auto;
  padding: 8px;
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface-2, #F6F7F9);
}

.settings-billing-edit form > .div_center:not(.settings-billing-image) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.settings-billing-edit .link_dashed {
  min-height: 32px;
}

@media (max-width: 767px) {
  .settings-billing-edit {
    max-width: none;
    margin-bottom: 20px;
  }

  .settings-billing-edit .erpds-card.table_block .item:not([style*="display:none"]):not([style*="display: none"]) {
    grid-template-columns: 1fr;
  }

  .settings-billing-edit .erpds-card.table_block .left_data {
    padding-bottom: 4px;
    background: transparent;
  }

  .settings-billing-edit .erpds-card.table_block .item > div:not(.left_data) {
    padding-top: 4px;
  }

  .settings-billing-edit input.input_box,
  .settings-billing-edit select,
  .settings-billing-edit input[type="password"],
  .settings-billing-edit input[type="url"],
  .settings-billing-edit input[type="number"],
  .settings-billing-edit input[type="text"] {
    width: 100%;
  }
}

/* Глобальные скроллбары (симметрия с dark — style_dark.css:255) */
/* Firefox: тонкий тематический скроллбар (webkit-аналог ниже) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--erpds-border-strong) var(--erpds-bg-2);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--erpds-bg-2);
}
::-webkit-scrollbar-thumb {
  background: var(--erpds-border-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--erpds-text-faint);
}

/* Выделение текста — brand accent (цвет текста наследуется → читаемо в обеих темах) */
::selection {
  background: var(--erpds-accent-soft, #deedf5);
}

/* Аффорданс: не-нативные кликабельные элементы (div/span/td/tr/i с onclick)
   показывают pointer. Нативные (a/button/input/select/textarea) исключены —
   у них корректный курсор (в т.ч. I-beam у text-инпутов с onclick). */
[onclick]:not(a):not(button):not(input):not(select):not(textarea):not(label) {
  cursor: pointer;
}

/* --- Sidebar nav li: kill legacy 2s "all" transition (li a already has fast 0.1s) --- */
nav ul li {
  transition: none;
}

/* --- Sidebar: white surface against page bg (Sber panel style) --- */
nav#nav_id {
  background: var(--erpds-surface, #FFFFFF);
}

/* --- Top header bar: depth shadow for sticky elevation --- */
#top_topline_all,
#top_topline_current {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
}

/* --- Table row hover: neutral grey (surgical override, calendar unchanged) --- */
.table_table tbody tr:hover {
  background: var(--erpds-bg-2, #F2F4F7);
}

/* --- Table links: no underline (color is sufficient affordance in table rows) --- */
.table_table a:not(.link_dashed) {
  text-decoration: none;
}

/* --- Table column headers: sentence case, no tracking (Sber-style) --- */
.table_table thead td,
.table_table thead th {
  text-transform: none;
  letter-spacing: 0;
}

/* --- Table legend header: match thead surface --- */
.table_legend {
  background: var(--erpds-surface-2, #F6F7F9);
  font-weight: 600;
}

/* --- Page title: Sber-style (no uppercase, stronger weight) --- */
.div_razdel {
  text-transform: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--erpds-text, #1A2133);
}
@media (max-width: 900px) {
  .div_razdel {
    font-size: 16px;
  }
}

/* --- Section headers: Sber-style (no uppercase, full-weight color) --- */
.label_h3_hr {
  text-transform: none;
  letter-spacing: 0;
  color: var(--erpds-text, #1A2133);
  font-weight: 600;
}

.label_h3_hr_wo {
  color: var(--erpds-text, #1A2133);
  font-weight: 600;
}

/* --- Notification captions: sentence case (Sber-style) --- */
.notify_caption {
  text-transform: none;
  font-weight: 600;
}

/* --- News block titles: sentence case, lighter weight --- */
#div_news .div_news_block h3 {
  text-transform: none;
  font-size: 16px;
  font-weight: 600;
}

/* --- Plan-mode header: tokenised (was hardcoded #848284) --- */
#top_topline_plan {
  background: var(--erpds-plan-header, #848284);
}

/* --- Footer support heading: sentence case (Sber-style) --- */
footer #down_support_div h2,
.footer2 #down_support_div h2 {
  text-transform: none;
  font-weight: 600;
}

/* --- Search field: Sber pill (desktop only — mobile overrides with !important) --- */
@media (min-width: 901px) {
  #top_search {
    display: flex;
    background: var(--erpds-surface-2, #F6F7F9);
    border: 1px solid var(--erpds-border, #DDE1E8);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  #top_search:focus-within {
    border-color: var(--erpds-accent, #1871a5);
    box-shadow: 0 0 0 3px var(--erpds-accent-soft, #deedf5);
  }
  #top_search #top_field {
    flex: 1;
    width: auto;
    height: 30px;
    line-height: 30px;
    background: transparent;
    padding-right: 8px;
  }
  #top_search #top_button,
  #top_search #top_button:hover {
    position: static;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }
}

/* --- Customer list / tags: compact action matrix --- */
.erpds-customer-tags-page.table_block.erpds-card {
  display: block;
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 6px !important;
  background: var(--erpds-surface, #fff);
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius, 12px);
  box-shadow: var(--erpds-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}

.erpds-customer-tags-page.table_block.erpds-card .item.erpds-customer-tags-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 6px;
  align-items: stretch;
  padding: 4px 6px;
  border-radius: var(--erpds-radius-sm, 8px);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.erpds-customer-tags-page.table_block.erpds-card
  .item.erpds-customer-tags-row:has(> :nth-child(3)):not(:has(> script)):not([style*="display:none"]):not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
}

.erpds-customer-tags-page.table_block.erpds-card .item.erpds-customer-tags-row + .item.erpds-customer-tags-row {
  margin-top: 1px;
}

.erpds-customer-tags-page.table_block.erpds-card .item.erpds-customer-tags-row:hover {
  background: var(--erpds-surface-2, #F6F7F9);
}

.erpds-customer-tags-page.table_block.erpds-card .item.erpds-customer-tags-row > div {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.erpds-customer-tags-page.table_block.erpds-card .erpds-customer-tags-name {
  display: flex !important;
  align-items: center;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding-right: 8px !important;
  box-sizing: border-box;
  text-align: left !important;
  background: transparent !important;
  overflow: hidden;
}

.erpds-customer-tags-page .erpds-customer-tags-badge {
  display: inline-block;
  min-width: 0;
  max-width: calc(100% - 8px);
  min-height: 28px;
  box-sizing: border-box;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-accent-soft, #deedf5);
  color: var(--erpds-accent-text, #125d88);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpds-customer-tags-page .erpds-customer-tags-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.erpds-customer-tags-page .erpds-customer-tags-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  flex: 1 1 auto;
  padding: 4px 9px;
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-radius: var(--erpds-radius-sm, 8px);
  background: var(--erpds-surface, #fff);
  color: var(--erpds-accent-text, #125d88);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erpds-customer-tags-page .erpds-customer-tags-action a:hover,
.erpds-customer-tags-page .erpds-customer-tags-action a:focus-visible {
  border-color: var(--erpds-accent, #1871a5);
  background: var(--erpds-accent-soft, #deedf5);
  color: var(--erpds-accent-hover, #125d88);
}

.erpds-customer-tags-page .erpds-customer-tags-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: var(--erpds-radius-pill, 999px);
  background: var(--erpds-bg-2, #F2F4F7);
  color: var(--erpds-text, #0F172A);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .erpds-customer-tags-page.table_block.erpds-card {
    width: 100%;
    padding: 6px !important;
  }

  .erpds-customer-tags-page.table_block.erpds-card .item.erpds-customer-tags-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .erpds-customer-tags-page.table_block.erpds-card
    .item.erpds-customer-tags-row:has(> :nth-child(3)):not(:has(> script)):not([style*="display:none"]):not([style*="display: none"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .erpds-customer-tags-page.table_block.erpds-card .erpds-customer-tags-name {
    grid-column: 1 / -1;
    padding-right: 0 !important;
  }

  .erpds-customer-tags-page .erpds-customer-tags-badge,
  .erpds-customer-tags-page .erpds-customer-tags-action a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Уменьшение движения (macOS / Windows / WCAG): без анимированных переходов */
@media (prefers-reduced-motion: reduce) {
  :root {
    --erpds-transition: none;
  }

  .erpds-btn:active {
    transform: none;
  }

  nav ul li,
  #dialog-box .button,
  #dialog-box input[type="submit"].button,
  #dialogConfirmbox .button,
  .erpds-stat-tile {
    transition: none;
  }
}