/* ── Вертикальные вкладки визарда (WizardListVerticalTabsComponent + .List().Configure().Multiple()) ──
   Слева рельса вкладок (nav-pills, flex-column), справа карточка контента активной вкладки.
   Порт ui-package «nav-custom-vertical» из e-qazyna, перекрашенный в тему Vetka (синий вместо серого).
   Скоупится под .nav-custom-vertical, чтобы не конфликтовать с .vetka-wz--vcards и Bootstrap .nav-pills. */
.nav-custom-vertical {
    align-items: stretch;
    min-height: 55vh;
    gap: 0;
}
.nav-custom-vertical > div:first-child { flex: 0 0 auto; }
.nav-custom-vertical .nav {
    height: 100%;
    min-width: 210px;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    gap: 4px;
}
.nav-custom-vertical .nav-link {
    position: relative;
    text-align: left;
    color: var(--ink-2) !important;
    background: transparent !important;
    border: 0;
    border-radius: var(--r-sm) !important;
    padding: 10px 14px;
    font-size: 13.5px;
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-custom-vertical .nav-link:hover {
    color: var(--ink) !important;
    background: var(--surface-3) !important;
}
.nav-custom-vertical .nav-link.active,
.nav-custom-vertical .nav-link.active.show,
.nav-custom-vertical .nav-link.active:hover {
    color: var(--primary-ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm);
}
/* синий акцент слева у активной вкладки */
.nav-custom-vertical .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--primary);
}
.nav-custom-vertical .nav-link[disabled] { opacity: 1; pointer-events: none; }
.nav-custom-vertical .tab-content {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

/* ── «карандаш» редактирования на лендинге вкладки ── */
.nav-custom-vertical .tab-content .btn-light {
    color: var(--primary-ink) !important;
    background: var(--primary-tint) !important;
    border: 1px solid var(--primary-tint-2) !important;
    border-radius: var(--r-sm) !important;
}
.nav-custom-vertical .tab-content .btn-light:hover {
    background: var(--primary-tint-2) !important;
}
/* read-only значения на лендинге читаются спокойнее, чем активные поля */
.nav-custom-vertical .tab-content [readonly],
.nav-custom-vertical .tab-content .form-control[readonly] {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}