/**
 * ЕСУПНК Design
 * Главный файл гайдлайн-системы интерфейса
 * 2025 Центр горизонтального бурения (C) Ризванов Руслан
 */
@font-face {
    font-family: "San Francisco";
    font-style: normal;
    font-weight: 300 400;
    src: local("San Francisco"),
    url("/assets/font/SFProText-Regular.woff2") format("woff2")
}
@font-face {
    font-family: "San Francisco";
    font-style: normal;
    font-weight: 500;
    src: local("San Francisco"),
    url("/assets/font/SFProText-Medium.woff2") format("woff2")
}
@font-face {
    font-family: "San Francisco";
    font-style: normal;
    font-weight: 600;
    src: local("San Francisco"),
    url("/assets/font/SFProText-Semibold.woff2") format("woff2")
}
html {
    height: 100%;
    justify-content: center;
    overflow-y: scroll;
    overflow-x: auto; /* Оставляем возможность горизонтальной прокрутки */
    scrollbar-width: thin; /* Firefox - для вертикального скроллбара */
    scrollbar-color: var(--webkit-scrollbar-thumb) transparent; /* Видимый скроллбар для Firefox */
    scrollbar-gutter: stable; /* Резервируем место для скроллбара, чтобы контент не сдвигался */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на мобильных устройствах */
    scroll-behavior: smooth; /* Плавная прокрутка */
    backface-visibility: hidden; /* Предотвращает проблемы с рендерингом */
    -webkit-font-smoothing: antialiased; /* Улучшает рендеринг шрифтов */
    -moz-osx-font-smoothing: grayscale; /* Улучшает рендеринг шрифтов на macOS */
}

/* Оптимизация скроллбара для WebKit - используем GPU-ускорение без лишних repaint */
html::-webkit-scrollbar {
    width: 8px; /* Вертикальный скроллбар */
    height: 0 !important; /* Полностью скрываем горизонтальный скроллбар */
    /* Убираем transform: translateZ(0) - браузер сам оптимизирует скроллбар */
}

html::-webkit-scrollbar-track {
    background: transparent; /* Прозрачный трек для overlay эффекта */
    /* Убираем лишние свойства, которые могут вызывать repaint */
}

html::-webkit-scrollbar-thumb {
    background: var(--webkit-scrollbar-thumb);
    border-radius: 4px;
    /* УБИРАЕМ will-change: background - это вызывает постоянные repaint! */
    /* Скроллбар накладывается поверх контента */
    border: 2px solid transparent;
    background-clip: padding-box;
    /* Используем transition вместо will-change для плавных изменений */
    transition: background-color 0.2s ease;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--webkit-scrollbar-thumb-hover);
    border: 1px solid transparent;
}

html::-webkit-scrollbar-thumb:active {
    background: var(--webkit-scrollbar-thumb-active);
}

/* Блокируем прокрутку основной страницы, когда открыто модальное окно */
html:has(.ModalBackground:not([style*="position:relative"])),
html:has(.SearchPanelParent) {
    overflow-y: hidden;
    overflow-x: auto; /* Горизонтальный скроллбар остается видимым */
    scrollbar-gutter: stable; /* Сохраняем scrollbar-gutter, чтобы контент не сдвигался */
}

html.modal-open {
    overflow-y: hidden;
    overflow-x: auto; /* Горизонтальный скроллбар остается видимым */
    scrollbar-gutter: stable; /* Сохраняем scrollbar-gutter, чтобы контент не сдвигался */
}
body {
    display: flex;
    margin: 0;
    min-height: 100%;
    height: 100%;
    background-color: var(--main-sub-background-filled);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    color:var(--main-text-color);
    font-size: 0.8125rem;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", sans-serif, "Segoe UI", system-ui, Roboto, Ubuntu;
    font-variant-numeric: tabular-nums;
}
input:not([type='checkbox']):not([type='radio']){
    cursor:var(--cursor-text);
    -webkit-font-smoothing:antialiased;
}
/* Чекбоксы и радио-кнопки - простой дизайн в стиле Chrome */
input[type='checkbox'], input[type='radio']{
    cursor: var(--cursor);
    margin: 0 6px -4px 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--main-delimiter);
    background-color: var(--main-background);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Скругление для чекбоксов */
input[type='checkbox']{
    border-radius: 3px;
}

/* Круглая форма для радио */
input[type='radio']{
    border-radius: 50%;
}

/* Состояние при наведении */
input[type='checkbox']:hover:not(:disabled), input[type='radio']:hover:not(:disabled){
    border-color: var(--button-color1);
    background-color: var(--main-sub-background);
}

/* Выбранное состояние для чекбоксов */
input[type='checkbox']:checked{
    background-color: var(--color-checkbox)!important;
    border-color: var(--color-checkbox)!important;
}

/* Выбранное состояние для радио */
input[type='radio']:checked{
    background-color: var(--color-checkbox)!important;
    border-color: var(--color-checkbox)!important;
}

/* Галочка для выбранного чекбокса */
input[type='checkbox']:checked::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/icons/checkbox.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Промежуточное состояние чекбокса (indeterminate) */
input[type='checkbox']:indeterminate{
    background-color: var(--color-checkbox)!important;
    border-color: var(--color-checkbox)!important;
}

input[type='checkbox']:indeterminate::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}

/* Точка для выбранного радио */
input[type='radio']:checked::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/icons/radio.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Эффект при клике/фокусе - скруглённый outline как у ios8-switch */
input[type='checkbox']:focus, input[type='radio']:focus{
    
    border: 2px solid var(--button-color1)!important;
    outline: 4px solid var(--selector-color)!important;
}

/* Disabled состояние */
label:has(> input[type='checkbox']:disabled), label:has(> input[type='radio']:disabled),
label:has(> input[type='checkbox']:disabled) div, label:has(> input[type='radio']:disabled) div
{
    color:var(--main-text-sub-color-advanced)!important;
}

/* Disabled невыбранный - серый фон */
input[type='checkbox']:disabled:not(:checked), input[type='radio']:disabled:not(:checked){
    background-color: var(--gray)!important;
    border-color: var(--main-delimiter-light)!important;
}

/* Disabled выбранный - сохраняем синий цвет */
input[type='checkbox']:disabled:checked, input[type='radio']:disabled:checked{
    background-color: var(--gray)!important;
    border-color: var(--main-delimiter-light)!important;
}
/*input:focus{
    box-shadow: 0 0 0 1px rgba(0,125,250,0.6);
    outline: 4px solid var(--selector-color)!important;
    border: 1px solid var(--button-color-shadow1);
}*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator
{
    transform: scale(0.8);
    padding: 0px;
    margin-right: -4px;
    filter:var(--logo-filter);
    cursor:var(--cursor-pointer);
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]:not(.fieldInput)::-webkit-calendar-picker-indicator,
input[type="time"]:not(.fieldInput)::-webkit-inner-spin-button,
input[type="time"]:not(.fieldInput)::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
.input
{
    background-color: rgba(255,255,255,0);
    border: 0;
    border-bottom: 1px solid rgba(200,200,200,0.5);
    outline:none;
    padding: 5px;
    border-radius: 3px;
    height: 15px;
    color: var(----main-text-color-beauty);
}
table input:not([type='checkbox']):not([type='radio']), .infoField input:not([type='checkbox']):not([type='radio']), .fieldGroup input:not([type='checkbox']):not([type='radio']),
input[type=datetime-local] /* datetime-local для полей ввода вне таблиц */
{
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", sans-serif, "Segoe UI", system-ui, Roboto, Ubuntu;
    background-color: rgba(0,0,0,0);
    color: var(--main-text-color);
    border: 0;
    border: none;
    outline:none;
    padding: 5px;
    border-radius: 2px;
    height: 28px;
    width:100%;
    box-sizing: border-box;
}
input[type='datetime-local'],input[type='date'],input[type='time']{
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.7px;
    position: relative;
}
input:not([type='checkbox'])::placeholder{
    color: var(--main-text-sub-color-advanced)!important;
}
input:focus:not(.chosen-search-input):not([type=checkbox])
{
    border: none;
    box-shadow: 0 0 0 1px rgba(0,125,250,0.6);
}
input:not(.chosen-search-input)::selection
{
    background-color: var(--focus-text-background);
}
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: var(--focus-text-background);/*#B3D7FF;*/
    color:var(--main-text-color);
}
/* Невалидные / disabled поля */
table input:not(:valid), input.fieldInput:not(:valid)
{
    color:var(--main-text-sub-color-advanced)!important;
}
table input:not(:valid):required::placeholder, input:not(:valid):required::placeholder
{
    color:var(--red)!important;
}
#Modal_POLBU input[type=date]:not(:valid){
    color:var(--red);
}
table input:not(:valid):not([type=date])::selection{
    color: var(--main-text-sub-color-advanced);
    background-color: var(--main-text-sub-color-beauty);
}
table input:not(:valid):not([type=date]):focus{
    box-shadow: 0 0 0 4px rgba(200,200,200,0.6);
}
.input_error{
    background: #ff000021!important;
    border-bottom: 1px solid #ff00004f!important;
    box-shadow: inset 0 0 3px #ff00004f;
}
.input_error:focus{
    box-shadow: inset 0 0 3px #f800004f,0 0 0 4px rgba(0,125,250,0.6)!important;
}
.input_success{
    background: rgba(52, 199, 89, 0.13)!important;
    border-bottom: 1px solid rgba(52, 199, 89, 0.31)!important;
    box-shadow: inset 0 0 3px rgba(52, 199, 89, 0.31);
}
.input_success:focus{
    box-shadow: inset 0 0 3px rgba(52, 199, 89, 0.31),0 0 0 4px rgba(0,125,250,0.6)!important;
}
/* Readonly поля */
.input[readonly], input.input[readonly]{
    background-color: var(--main-sub-background);
    cursor: var(--cursor);
    opacity: 0.8;
}
.input[readonly]:focus, input.input[readonly]:focus{
    box-shadow: none;
    outline: none;
}

.Tiger{
    animation: show 0.1s ease-in-out;
}
.Tiger:not(.even):nth-child(odd of :not(.hidden)) {
    background: var(--main-sub-background);
}
.Tiger.even:nth-child(even of :not(.hidden)) {
    background: var(--main-sub-background);
}
.Tiger td input:not([type='checkbox']){
    background:transparent;
}
.Tiger:focus > td input:not([type='checkbox']){
    color:#FFF!important;
}
.Tiger td .chosen-container{
    width: auto!important;
    margin: 0!important;
    box-shadow: none!important;
    display: inline-block!important;
}
.Tiger td .chosen-container-single .chosen-single{
    background: transparent!important;
    background-color: transparent!important;
    border: none!important;
    box-shadow: none!important;
    padding: 0!important;
    height: auto!important;
    line-height: inherit!important;
    -webkit-box-shadow: none!important;
    width: auto!important;
    overflow: visible!important;
    box-sizing: border-box!important;
}
.Tiger td .chosen-container-single .chosen-single span{
    margin: 0!important;
    margin-right: 0!important;
    font-weight: inherit!important;
    padding: 0 6px!important;
    margin: -2px!important;
    display: inline-block!important;
    overflow: visible!important;
    text-overflow: clip!important;
    white-space: nowrap!important;
    max-width: none!important;
    width: auto!important;
    border-radius: 4px!important;
    box-sizing: border-box!important;
}
.Tiger td .chosen-container-single .chosen-single div{
    display: none!important;
}
.Tiger td .chosen-container.chosen-with-icon .chosen-single:hover {
    background: var(--main-hover-interact)!important;
}
.Tiger:focus > td .chosen-container-single .chosen-single span{
    color: #FFF!important;
}
.Tiger td .chosen-container.chosen-with-icon .chosen-single::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0;
    vertical-align: middle;
    background-image: var(--icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    pointer-events: none;
}
.Tiger:focus > td .chosen-container.chosen-with-icon .chosen-single::before {
    filter: brightness(45%) saturate(125%) contrast(160%) invert(100%) saturate(5%)!important;
}
.Tiger td{
    padding: 4px 8px;
}
.Tiger td:first-child {
    padding-left: 12px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.Tiger td:last-child {
    padding-right: 10px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
/* у нас вроде бы больше нет textarea
table textarea
{
    background-color: rgba(255,255,255,0);
    border: 0;
    border-bottom: 1px solid rgba(200,200,200,0.5);
    padding: 5px;
    border-radius: 4px;
    font-size: 10pt;
    height: 100%;
    background: var(--input-background);
}
table textarea:focus
{
    outline: none;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 4px rgba(0,125,250,0.6);
}
table#Dailys textarea
{
    height: 108px;
    width: 160px;
}*/

.infoField{
    color: var(--main-text-color-beauty-blue);
}
.infoField input:not(.chosen-search-input):not([type='checkbox']):not([type='radio']){
    font-weight: 500;
    text-align: right;
    background: transparent;
    box-shadow: none!important;
    /*border-radius: 0!important;*/
    border-radius: 2px!important;
    padding: 0!important;
    height: 18px;
    max-width: 100%;
}
.infoField > div > div.contenteditable{
    line-height: 1.25!important;
    font-weight: 500!important;
    text-wrap: pretty!important;
    width: 100%!important;
    max-width: 100%!important;
    text-align: left!important;
    word-wrap: break-word!important;
    overflow-wrap: break-word!important;
    word-break: break-word!important;
    overflow-x: hidden!important;
}
/* Apple-style focus для input полей внутри .infoField */
.infoField input:not(.chosen-search-input):not([type=checkbox]):not([type='radio']) {
    outline: 0 solid transparent;
    transition: outline 0.05s ease-in-out;
}
.infoField input:not(.chosen-search-input):not([type=checkbox]):not([type='radio']):disabled,
.infoField input:not(.chosen-search-input):not([type=checkbox]):not([type='radio']):read-only {
    cursor: var(--cursor);

}

/* Серый цвет выделения для readonly полей в infoField */
.infoField input:not(.chosen-search-input):not([type=checkbox]):not([type='radio']):read-only::selection {
    /*background-color: #d3d3d3!important;*/
    background-color: var(--gray)!important;
    color: var(--main-text-color-beauty)!important;
}
.infoField .iB0{
    color:var(--main-text-color);
}

.infoField input:focus:not(.chosen-search-input):not([type=checkbox]):not([type='radio']) {
    overflow: visible;
    outline: 1px solid var(--main-delimiter);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(0,122,255,0.3);
}

.infoField input:focus:not(.chosen-search-input)::placeholder {
    background-color: var(--focus-text-background);
    transition: background-color 0.05s ease-in-out;
}
.card input:focus:not(.chosen-search-input)::placeholder {
    width: max-content;
}
.infoField input:focus:not(.chosen-search-input):not([type=checkbox]):not([type='radio']):read-only::placeholder {
    background-color: var(--gray);
    transition: background-color 0.05s ease-in-out;
}
.infoField .chosen-container{
    min-width: 155px!important;
    max-width: min-content;
    box-shadow: none;
    margin: -10px 0;
}
.infoField .chosen-container-single a.chosen-single,
#UsersAdmin .chosen-container-single a.chosen-single
{
    -webkit-box-shadow: none!important;
    background: transparent!important;
    padding: 0 8px;
    margin: 0 -8px;
    outline: none;
}
.infoField .chosen-container-multi .chosen-choices{
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: right;
}
.infoField .chosen-container-single a.chosen-single span{
    font-weight: 500!important;
    margin: 7px 14px 0 0;
    max-width: 270px;
    font-size: 13px;
}
.infoField .chosen-rtl .chosen-search input[type="text"],
.infoField .chosen-container-single .chosen-single abbr,
.infoField .chosen-container-single .chosen-single div b,
.infoField .chosen-container-single .chosen-search input[type="text"],
.infoField .chosen-container .chosen-results-scroll-down span,
.infoField .chosen-container .chosen-results-scroll-up span{
    background-image: url("lib/chosen-sprite-without-button.png") !important;
}
.infoField .chosen-container-single .chosen-single div b{
    transform: translate(2px, 6px) scale(1.2);
    filter: var(--main-color-filter);
}
.infoField .chosen-results, .infoField .chosen-container input{
    text-align: left;
}
.infoField .QuadButtonContainer{
    margin:0;
}
/* Интерактивный элемент (quad-кнопка) */
.infoField .QuadButton{
    height: 50px;
}
.infoField .QuadButton img{
    width: 28px;
    height: 28px;
}
.infoField > div{
    border:1px solid var(--segmented-controls-border);
    background: var(--segmented-controls-background);
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: row;
    position: relative;
}
.infoField > div:first-child{
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom:none;
}
.infoField > div:only-child{
    border-radius: 0.5rem!important;
    border:1px solid var(--segmented-controls-border)!important;
}
.infoField > div:not(:first-child){
    border-top:none;
}
.infoField > div:not(:last-child){
    border-bottom:none;
}
.infoField > div:last-child{
    border-radius: 0 0 0.5rem 0.5rem;
    border-top:none;
    padding-bottom: 1rem;
}
.infoField:not(:last-child) > div:last-child{
    margin-bottom: 8px;
}
.infoField > div:not(:last-child) > div{
    border-bottom: 1px solid var(--main-delimiter-light);
    padding-bottom: 1rem;
}
.infoField > div > div:first-child{
    width: min-content;
    text-wrap: nowrap;
}

.infoField > div > div:first-child:not(:only-child){
    padding-right: 16px;
}
.infoField > div:not(.infoFieldRow) > div:last-child{
    width: -webkit-fill-available;
    max-width: -webkit-fill-available;
    text-align: right;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}
.infoField > div:not(.infoFieldRow) > div:last-child:has(> input){
    overflow: visible;
}

/* Обрезание текста с многоточием для .iB элементов внутри .infoField */
.infoField .iB:not(.userCard) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    flex-direction: row-reverse; /* Иконка справа от текста */
    background-color: var(--main-background);
    -webkit-box-shadow: 0px 1px 2.5px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
}
.infoField .iB:hover {

}

/* Стили для иконки в .iB внутри .infoField */
.infoField .iB:not(.userCard) img {
    margin-left: 4px; /* Отступ слева от текста */
    margin-right: 0; /* Убираем отступ справа */
}

/* Аналогично для .iB0 внутри .infoField */
.infoField .iB0:not(.userCard) {
    flex-direction: row-reverse; /* Иконка справа от текста */
}

.infoField .iB0:not(.userCard) img {
    margin-left: 2px; /* Отступ слева от текста */
    margin-right: 0; /* Убираем отступ справа */
}

/* Правильное позиционирование элементов в .infoField .iB и .iB0 */
.infoField .iB:not(.userCard) .offline.IconStatus,
.infoField .iB:not(.userCard) .online.IconStatus {
    left: auto !important;
    top: auto !important;
    margin-right: 10px;
    margin-top: 8px;
}

/* Текст должен быть слева (order: 3) */
.infoField .iB:not(.userCard) > div,
.infoField .iB0:not(.userCard) > div {
    order: 2;
    max-width: 240px; /* Ограничиваем ширину текста */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Иконка должна быть справа (order: 1) */
.infoField .iB:not(.userCard) img,
.infoField .iB0:not(.userCard) img {
    order: 1;
}

/* Стили для блока "Руководство" */
.infoField[style*="padding:0;"] {
    background: transparent;
    border: none;
    padding: 0;
}

/* Сетка для подчиненных - 2 столбца */
.infoField div[style*="display:grid"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Кнопки подчиненных занимают всю ширину ячейки */
.infoField div[style*="display:grid"] .userCard {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
/* Центрирование руководителя */
.infoField div[style*="justify-content:center"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Фиксированная ширина для datetime-local в infoField */
.infoField input[type="datetime-local"] {
    width: 130px !important;
}
/* Фиксированная ширина для date в infoField */
.infoField input[type="date"] {
    width: 100px !important;
}
.infoField .chosen-disabled{
    opacity: 1!important;
}
.infoField .chosen-disabled .chosen-single{
    cursor: var(--cursor);
    margin-right: -14px;
    color: var(--main-text-color);
}
.infoField .chosen-disabled .chosen-single b{
    display: none;
}
.infoField > div:not(.infoFieldRow) > div:first-child:not(:only-child) > div:last-child, .subtitle{
    font-size: 0.7rem;
    width: -webkit-fill-available;
    color: var(--main-text-sub-color-blue);
    text-wrap: nowrap;
    padding-top: 5px;
    width: 0;
    overflow: visible;
}
.infoField .infoFieldRow {
    display:flex;
}
.infoField .infoFieldRow > div {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    text-align:left!important;
    padding: 0 12px 12px 0!important;
}
.infoField .infoFieldRow input {
    text-align: left!important;
}
.subtitle, small{
    font-size: 0.7rem;
    width: -webkit-fill-available;
    font-weight: 400;
    color: var(--main-text-sub-color);
    text-wrap: balance;
    padding-top: 5px;
    overflow: visible;
}
.subtitle{
    display: block;
}
small{
    font-size: 0.7rem!important;
}

.tag{
    font-weight:600;
    font-size:6pt;
    background:var(--main-delimiter-light);
    padding:2px 4px;
    border-radius:8px!important;
    color:#FFF;
    transition:all 0.1s;
    position:relative;
    box-sizing: border-box;
    cursor:var(--cursor);
}
.tag.focusContext,.userCard.focusContext{
    background:var(--button-color-pressed)!important;
    box-shadow: 0 0 0 4px var(--button-color-outline);
    color:#FFF!important;
}
.tag.enabled.interactButton::before{
    /*background:var(--color-blue)!important;*/
    right:-4px;
    left:auto;
    transform: translateX(-50%);
}
.tag.enabled.interactButton{
    padding-left:8px;
    padding-right:24px;
}
.tag.interactButton{
    padding:4px 8px;
    padding-left:24px;
    font-size: 10pt;
    color:var(--main-text-sub-color-advanced);
    border-radius:12px!important;
}
.tag.interactButton.lock{
    opacity: 0.3;
    cursor:not-allowed;
}
.tag.interactButton::before{
    content:"";
    display: inline-block;
    position: absolute;
    background: var(--main-general-color);
    transform: translateX(50%);
    left: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition:all 0.3s;
}

.infoField .interactButton{
    float:right;
}
/* Интерактивный элемент (кнопка) */
.interactButton
{
    border-radius: 4px;
    position: relative;
    overflow: hidden!important;
    cursor:var(--cursor-pointer);
    user-select: none;
}
/* Кнопка в тексте */
.interactButton.inline{
    padding: 2px 4px;
    margin: -2px -4px;
    width:max-content;
    align-items: center;
}
/*div:not(.contenteditable):focus,*/
.interactButton:focus,
tr:not(.Data):focus,
.interactButton:focus .subtitle{
    background-color: var(--button-color-hover)!important;
    color:#FFF!important;
}
.interactButton.inline.small{
    -webkit-transition: none;
}
.interactButton.inline.small .profileTourAvatar{
    width: 14px;height: 14px;
}
.interactButton.inline.big{
    border-radius: 10px;
    -webkit-transition: none;
    text-align: left;
    padding: 12px;
    color:var(--main-text-color-beauty-blue);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}
.interactButton.inline.big .profileTourAvatar{
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
}
.iB{
    display: flex;
    align-items: center;
    padding: 1px 4px;
    user-select: none;
    float: left;
    img{
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        padding: 4px;
    }
}
.iB0{
    padding: 0 6px;
    margin: -2px;
    border-radius: 4px;
    cursor:var(--cursor);
    justify-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden !important;
    max-width: -webkit-fill-available;
    div{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden !important;
        max-width: -webkit-fill-available;
    }
    img{
        padding: 0;
        width: 16px;
        margin-right: 2px;
    }
}
.sm-button{
    display: flex;
    flex-direction: row;
    padding: 2px 4px;
    width: max-content;
}
.big-button
{
    display: flex;
    flex-direction: row;
    padding: 12px;
}

/* Защита от сжатия для всех аватаров в userCard */
.userCard{
    -webkit-transition:box-shadow 0.1s!important;
    .profileTourAvatar {
        flex-shrink: 0;
        min-width: 28px;
        min-height: 28px;
    }
}
/* Отступ между аватаром и ФИО для средних и маленьких карточек */
.userCard:not(.big) {
    gap: 4px;
}
.userCard.small .profileTourAvatar {
    flex-shrink: 0;
    min-width: 14px;
    min-height: 14px;
}
.userCard.big .profileTourAvatar {
    min-width: 40px;
    min-height: 40px;
}
/* ============================================
   Стили для карточек пользователей (userCard)
   ============================================ */

/* Выделение только ФИО при hover на карточке пользователя */
.userCard.interactButton:hover:not(.no-hover-native),
.userCard.interactButton.hover {
    background: transparent;
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Ограничение ширины для классов iB0 и sm-button при hover */
.userCard.interactButton:hover:not(.no-hover-native).iB0,
.userCard.interactButton.hover.iB0 {
    max-width: 100% !important;
}
.userCard.interactButton:hover:not(.no-hover-native).sm-button,
.userCard.interactButton.hover.sm-button {
    max-width: 100% !important;
    width: 100% !important;
}
.userCard.interactButton:hover:not(.no-hover-native) .userCardName,
.userCard.interactButton.hover .userCardName {
    background: var(--main-hover-interact);
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: block;
    width: fit-content;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: content-box !important;
    line-height: inherit !important;
    font-size: inherit !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Для обычных и маленьких карточек ФИО не должно растягиваться на всю ширину */
.userCard.interactButton:hover:not(.no-hover-native):not(.big) .userCardName,
.userCard.interactButton.hover:not(.big) .userCardName {
    max-width: none !important;
    width: fit-content !important;
}
.userCard.interactButton:hover:not(.no-hover-native) > div,
.userCard.interactButton.hover > div {
    overflow: visible !important;
    width: -webkit-fill-available !important;
    max-width: -webkit-fill-available !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
    position: relative !important;
}
/* Фиксация ширины карточек в grid контейнерах (предотвращает расширение при hover) */
#subordinatesContainer .userCard,
.infoField [style*="grid-template-columns"] .userCard {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
#subordinatesContainer .userCard:hover:not(.no-hover-native),
#subordinatesContainer .userCard.hover,
.infoField [style*="grid-template-columns"] .userCard:hover:not(.no-hover-native),
.infoField [style*="grid-template-columns"] .userCard.hover {
    max-width: 100% !important;
    width: 100% !important;
}
#subordinatesContainer .userCard:hover:not(.no-hover-native) > div,
#subordinatesContainer .userCard.hover > div,
.infoField [style*="grid-template-columns"] .userCard:hover:not(.no-hover-native) > div,
.infoField [style*="grid-template-columns"] .userCard.hover > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}
#subordinatesContainer .userCard:hover:not(.no-hover-native) .userCardName,
#subordinatesContainer .userCard.hover .userCardName,
.infoField [style*="grid-template-columns"] .userCard:hover:not(.no-hover-native) .userCardName,
.infoField [style*="grid-template-columns"] .userCard.hover .userCardName {
    max-width: 100% !important;
    width: fit-content !important;
}
.userCard.interactButton:hover:not(.no-hover-native) .subtitle,
.userCard.interactButton.hover .subtitle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}
/* Выделение только ФИО при focus (Tab/клик) */
.userCard.interactButton:focus,
.userCard.interactButton:focus-visible {
    background-color: transparent !important;
    color: inherit !important;
    overflow: visible !important;
    outline: none !important;
    box-shadow: none !important;
}
.userCard.interactButton:focus .userCardName,
.userCard.interactButton:focus-visible .userCardName {
    background-color: var(--button-color-hover) !important;
    color: #FFF !important;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: block;
    width: fit-content;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: content-box !important;
    line-height: inherit !important;
    font-size: inherit !important;
}
.userCard.interactButton:focus > div,
.userCard.interactButton:focus-visible > div {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.userCard.interactButton:focus .subtitle,
.userCard.interactButton:focus-visible .subtitle {
    background-color: transparent !important;
    color: inherit !important;
}
/* Обводка только вокруг ФИО при открытии контекстного меню (ПКМ) */
.userCard.focusContext {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}
.userCard.focusContext .userCardName {
    background: var(--button-color-pressed) !important;
    box-shadow: 0 0 0 4px var(--button-color-outline) !important;
    color: #FFF !important;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: block;
    width: fit-content;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    max-width: none !important;
}
.userCard.focusContext > div {
    overflow: visible !important;
}
.userCard.focusContext .subtitle {
    background-color: transparent !important;
    color: inherit !important;
}
/* Убеждаемся, что subtitle всегда остается под ФИО в карточке пользователя */
.userCard .subtitle {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
}
/* Базовые стили для ФИО - ellipsis всегда */
.userCard .userCardName {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}
/* profileTourAvatar всегда остается квадратным */
.profileTourAvatar {
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    background-image: url(/assets/img/avatars/avatar.jpg);
    background-repeat: no-repeat;
    display: inline-block;
}



tr:not(.Data):focus div{
    color:#FFF!important;
}
/*div:focus img,*/
.interactButton:focus img,
tr:not(.Data):focus img{
    filter: brightness(45%) saturate(125%) contrast(160%) invert(100%) saturate(5%) !important;
}
tr:not(.Data):focus td{
    color:#FFF!important;
}
.interactButton div{
    pointer-events: none;
}
.interactButton:hover:not(.no-hover-native), .interactButton.hover{
    background: var(--main-hover-interact);
    /*box-shadow: inset 0 0 0 1px var(--main-hover-interact-outline);*/
}
.interactButton span, .interactButton img{
    pointer-events: none;
}
.interactButton h3{
    margin:0;
}
.QuadButtonContainer{
    display: flex;
    margin: -5px;
}

.QuadButton{
    border-radius: 12px;
    position: relative;
    overflow: hidden!important;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor:var(--cursor-pointer);
    width: 100px;
    height: 100px;
    border: 1px var(--main-delimiter) solid;
    padding: 10px;
    margin: 5px;
    font-size: 9pt;
    font-weight: 500;
    text-align: center;
}
.QuadButton img{
    width: 56px;
    height: 56px;
    pointer-events: none;
}
.QuadButton:hover{
    background: var(--main-hover-interact);
    box-shadow: inset 0 0 0 1px #00000014!important;
}
.QuadButton.disabled{
    background: var(--main-delimiter);
    box-shadow: inset 0 0 0 1px #00000014!important;
    cursor:not-allowed;
}
.QuadButton.L{
    text-align: left;
    height: 68px;
}
.QuadButton.L img{
    width: 32px;
    height: 32px;
    padding-bottom: 4px;
}


button
{
    background: linear-gradient(var(--button-color1), var(--button-color2));
    font-size: 10pt;
    font-weight: 500;
    letter-spacing: calc(1px / 2 );
    border: 0;
    padding: 5px 12px 4px;
    color: #FFF;
    /*letter-spacing: -.022em;*/
    border-radius: 4px;
    cursor:var(--cursor-pointer);
    -webkit-box-shadow: 0px 1px 2.5px 0px var(--button-color-shadow1), 0px 0px 0px 1px var(--button-color-shadow2);
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
}
button img
{
    flex-shrink: 0;
    margin-right: 4px;
    pointer-events: none;
}
button:not(.note-btn):not(.secondary):not(.red):not(.outline):not(:disabled):hover,
button:not(.note-btn):not(.secondary):not(.red):not(.outline):not(:disabled).hover
{
    background:var(--button-color-hover);
    border: 0;
    color: #FFF;
}
button:not(.note-btn):not(.secondary):not(.red):not(.outline):not(:disabled):active
{
    background:var(--button-color-pressed);
}

button:disabled
{
    background: var(--gray);
    color:#666;
    -webkit-box-shadow: 0px 1px 2.5px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
    cursor: var(--cursor);
}
button.secondary:not(:disabled):hover,
button.secondary:not(:disabled).hover
{
    background: var(--button-secondary-hover);
}
button.secondary:not(:disabled):active
{
    background: var(--button-secondary-active);
}
button.secondary
{
    color: var(--button-secondary-color);
    background: var(--button-secondary-background);
    -webkit-box-shadow: var(--button-secondary-shadow);
    box-shadow: var(--button-secondary-shadow);
}
button.btn.outline
{
    --alpha-multiplier: 1;
    background: rgba(var(--keyColor-rgb),calc(var(--alpha-multiplier)*.06));
    color: var(--keyColor);

    border-radius: 1000px;
    display: inline-block;
    padding: 7px 16px;
    transition: background-color .14s ease-out;
    word-break: keep-all;

    font-weight:700;

    /*background: transparent;*/
    color: var(--button-color1);
    border: 1px solid transparent;
    border-radius: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
}
button.btn.outline.small{
    font-size: 11px;
}
button.btn.outline:not(:disabled):hover,
button.btn.outline:not(:disabled).hover
{
    background-color: rgba(var(--keyColor-rgb), calc(var(--alpha-multiplier) * .1));
    transition: background-color .21s ease-out;
}
button.btn.outline:not(:disabled):active
{
    background-color: rgba(var(--keyColor-rgb), calc(var(--alpha-multiplier) * .07));
    transition: background-color .14s ease-out;
}
button.btn.outline:disabled
{
    background: transparent;
    color: var(--gray);
    border: 1px solid var(--gray);
    opacity: 0.5;
    cursor: var(--cursor);
}
button.btn.red
{
    background: linear-gradient(var(--button-red-color1), var(--button-red-color2));
    -webkit-box-shadow: 0px 1px 2.5px 0px var(--button-red-shadow1), 0px 0px 0px 1px var(--button-red-shadow2);
    box-shadow: 0px 1px 2.5px 0px var(--button-red-shadow1), 0px 0px 0px 1px var(--button-red-shadow2);
    color:var(--white);
}
button.btn.red:not(:disabled):active
{
    background: var(--button-red-active);
}
button.btn.red:disabled
{
    background: var(--button-red-disabled);
    color: var(--button-red-disabled-text);
    -webkit-box-shadow: 0px 1px 2.5px 0px var(--button-red-shadow-disabled1), 0px 0px 0px 1px var(--button-red-shadow-disabled2);
    box-shadow: 0px 1px 2.5px 0px var(--button-red-shadow-disabled1), 0px 0px 0px 1px var(--button-red-shadow-disabled2);
    cursor: var(--cursor);
}
button.btn.red.outline
{
    background: rgba(var(--button-red-color1-rgb), calc(var(--alpha-multiplier) * .06));
    color: var(--button-red-color1);

    border-radius: 1000px;
    display: inline-block;
    padding: 7px 16px;
    transition: background-color .14s ease-out;
    word-break: keep-all;

    font-weight:700;

    border: 1px solid transparent;
    border-radius: 16px;
    -webkit-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
}
button.btn.red.outline.small{
    font-size: 11px;
}
button.btn.red.outline:not(:disabled):hover,
button.btn.red.outline:not(:disabled).hover
{
    background-color: rgba(var(--button-red-color1-rgb), calc(var(--alpha-multiplier) * .1));
    transition: background-color .21s ease-out;
}
button.btn.red.outline:not(:disabled):active
{
    background-color: rgba(var(--button-red-color1-rgb), calc(var(--alpha-multiplier) * .07));
    transition: background-color .14s ease-out;
}
button.btn.red.outline:disabled
{
    background: transparent;
    color: var(--gray);
    border: 1px solid var(--gray);
    opacity: 0.5;
    cursor: var(--cursor);
}
/* Loading buttons - using real loading block */
button.loading {
    position: relative;
    pointer-events: none;
    color: transparent!important;
}
button.loading > *:not(.loading) {
    opacity: 0;
}
button.loading .loading{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    left: 0;
}
button.loading:not(.outline):not(.secondary) .loading{
    filter: invert(1);
}
h1
{
    font-size: 48px;
    margin: 0 0 35px;
    color: var(--main-text-color);
}
h1 .subtitle {
    font-size: 28px;
    text-wrap: balance;
}
.section > h1:first-child{
    padding-bottom: 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--main-delimiter-light);
}
h2 {
    display: block;
    font-size: 32px;
    margin: 0 0 25px;
    padding: 0;
    text-align: left;
    color: var(--main-text-color);
}
h2 .subtitle {
    text-wrap: balance;
    font-size: 18px;
}
.section > h2:first-child{
    padding-bottom: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--main-delimiter-light);
}
h3 {
    text-align: left;
    margin: 0 0 19px;
    padding: 0px;
    display: block;
    font-size: 1.2em;
    color: var(--main-text-color);
}
h3 .subtitle {
    text-wrap: balance;
}
.tab-content h3{
    margin-left: 16px;
}
/* Стили для h3 в формах (секции) - гармоничное отображение */
/* Универсальные стили для заголовков секций в унифицированных формах */
/* Класс form-section-title добавляется автоматически в form.js для всех заголовков секций */
h3.form-section-title {
    margin-left: 0 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--main-delimiter-light) !important;
}
/* Первый заголовок секции в форме не должен иметь большой отступ сверху */
h3.form-section-title:first-of-type,
h3.form-section-title:first-child {
    margin-top: 0 !important;
}
/* Исключения: h3 в модальных окнах и tab-content сохраняют свои стили */
.Modal h3,
.tab-content h3 {
    margin-left: 16px;
    margin-top: 0;
    margin-bottom: 19px;
    padding-bottom: 0;
    border-bottom: none;
}
h4 {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--main-text-color);
    line-height: 1.4;
    margin: 0 0 16px 0;
    max-width: 600px;
    letter-spacing: -0.15px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'San Francisco', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0.9;
}
h4 .subtitle {
    display: block;
    margin: 8px 0 0 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--main-text-sub-color);
    line-height: 1.5;
    letter-spacing: -0.05px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'San Francisco', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0.85;
}
.kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: var(--main-sub-background);
    border: 1px solid var(--main-delimiter-light);
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
    font-size: 11px;
    line-height: 1.4;
}
.card{
    padding: 1rem;
    border-radius: 0.5rem !important;
    border: 1px solid var(--segmented-controls-border) !important;
    background: var(--segmented-controls-background);
    color: var(--main-text-color-beauty-blue);
}
/* Класс для центрирования контейнеров */
.container-wide {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: 1661px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.3px;
    padding: 0;
    top: 20px;
}
.container-small {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.3px;
    padding: 0;
    top: 20px;
}
.section{
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    margin:24px 0;
    padding:24px;
    border:1px solid var(--main-delimiter-light);
    border-radius:24px;
    background:var(--main-general-color);
    /*min-height: 180px;*/
}
.section .section {
    border-radius:16px;
    padding:16px;
}
.grid{
    display:grid;
    gap:12px;
}
.grid.cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid.cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid.cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.tab-content {
    padding: 24px;
    background-color: var(--main-general-color);
    border: 1px solid var(--main-delimiter-light);
    border-radius: 32px;
    margin:24px 0;
}
.tab.no-border .tab-content{
    border: none;
    padding: 120px 0 0!important;
    background: transparent;
}
.tab.no-border .segmented-controls{
    margin: 21px 0px -88px;
}
.tab:has(> .segmented-controls) .tab-content {
    display: none;
    padding: 120px 40px 40px;
    margin: 0;
}
.segmented-controls {
    display: flex;
    position: relative;
    overflow: hidden;
    transition: all .2s ease;
    border-radius: 16px;
    /*background: #f8fafc;*/
    border: 1px solid var(--segmented-controls-border);
    background: var(--segmented-controls-background);
    height: max-content;
    min-height: 48px;
    padding: 8px;
    width: -webkit-fill-available;
    flex-wrap: wrap;
    order: -1;
    box-sizing: border-box;
    margin: 0 0 16px;

}
.tab .segmented-controls{
    margin: 55px 40px -88px;
}
.segmented-controls input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
.segmented-controls label {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: var(--cursor-pointer);
    flex: 1 1 0px;
    position: relative;
    height: 30px;
    z-index: 1;
    transition: inherit;
    font-size: 10pt;
    font-weight: 500;
    border-radius: 8px;
    color: var(--main-text-sub-color-blue);
}
.segmented-controls label:last-of-type {
    z-index: 0;
}
.segmented-controls label:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-color: black;
    transition: inherit;
}
.segmented-controls label:not(:first-of-type)::before {
    content: "";
    position: absolute;
    z-index: -3;
    top: 8px;
    left: 0;
    bottom: 8px;
    width: 1px;
    background: rgba(0,0,0,0.15);
    transition: inherit;
}
.segmented-controls input:checked + label::before,
.segmented-controls input:checked + label + input + label::before {
    opacity: 0;
}
.segmented-controls label:last-of-type::after {
    outline: var(--segmented-controls-border) 1px solid;
    background: var(--segmented-controls-active);
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.04), 0px 3px 8px rgba(0, 0, 0, 0.12);

}
.segmented-controls input[type="radio"]:checked + label {
    outline: 1px solid var(--segmented-controls-border);
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--segmented-controls-active);
    color: var(--main-text-color-beauty-blue);
    height: 30px;
}
.segmented-controls label:hover {
    color: var(--main-text-color-beauty-blue);
}

.segmented-controls input:nth-last-of-type(1):checked ~ label:last-of-type::after {transform: translateX(0%);}
.segmented-controls input:nth-last-of-type(2):checked ~ label:last-of-type::after {transform: translateX(-100%);}
.segmented-controls input:nth-last-of-type(3):checked ~ label:last-of-type::after {transform: translateX(-200%);}
.segmented-controls input:nth-last-of-type(4):checked ~ label:last-of-type::after {transform: translateX(-300%);}
.segmented-controls input:nth-last-of-type(5):checked ~ label:last-of-type::after {transform: translateX(-400%);}
.segmented-controls input:nth-last-of-type(6):checked ~ label:last-of-type::after {transform: translateX(-500%);}
.tab {
    display: flex;
    flex-direction: column;
}
a
{
    text-decoration: none;
    user-select: none;
    position: relative;
    color:var(--color-blue);
    cursor:var(--cursor-pointer);
}
a:hover
{
    opacity: 0.7;
}

input[type="checkbox"].ios8-switch {
    position: absolute;
    margin: 0;
    height: 17px;
    width: 27px;
    cursor: var(--cursor);
    z-index: 1;
    opacity: 0;
}
input[type="checkbox"].ios8-switch:focus + label::before
{
    outline: 4px solid var(--selector-color)!important;
    border: 1px solid var(--button-color-shadow1);

}
.infoField >div:not(.infoFieldRow) input[type="checkbox"].ios8-switch + label {
    display: inline;
}
input[type="checkbox"].ios8-switch + label {
    cursor:var(--cursor);
    position: relative;
    padding: 0 0 0 36px;
    display: block;
    margin-bottom: 12px;
    line-height: 1.3em;
    font-size: 10pt;
    color: var(--main-text-color-beauty-blue);
    user-focus: inherit;
}
input[type="checkbox"].ios8-switch + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 25px;
    height: 15px;
    border-radius: 10px;
    background: rgba(200, 200, 200, .36);
    border: 1px solid rgba(200, 200, 200, .36);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:after {
    content: "";
    position: absolute;
    display: block;
    left: 1px;
    top: 1px;
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:hover:after,
input[type="checkbox"].ios8-switch:hover + label:after
{
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
input[type="checkbox"].ios8-switch:checked + label:after {
    margin-left: 10px;
}
input[type="checkbox"].ios8-switch:checked + label:before {
    background: var(--color-checkbox);
    border: 1px solid var(--color-checkbox);
}

input[type="checkbox"].ios8-switch:disabled + label:before {
    background: var(--gray);
    border: 1px solid var(--gray);
}
input[type="checkbox"].ios8-switch:disabled + label,
input[type="checkbox"].ios8-switch:disabled + label div
{
    color: var(--main-text-sub-color-advanced) !important;
}

input[type="checkbox"].ios8-switch:disabled + label:after,
input[type="checkbox"].ios8-switch:disabled:hover + label:after {
    box-shadow: none;
    border: 1px solid transparent;
}
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"])
{
    display: block;
    margin-bottom: 12px;
    font-weight: 400;
}

label:has(> input[type="radio"]) div,
label:has(> input[type="checkbox"]) div,
input[type="checkbox"].ios8-switch + label div
{
    font-size: 0.7rem;
    width: -webkit-fill-available;
    color: var(--main-text-sub-color-blue);
    text-wrap: balance;
    padding-left:25px;
    padding-top: 4px;
}
input[type="checkbox"].ios8-switch + label div{
    padding-left:0;
}
label:has(> input[type="radio"]):last-child,
label:has(> input[type="checkbox"]):last-child,
input[type="checkbox"].ios8-switch + label:last-child{
    margin-bottom:0;
}

.chosen-container.chosen-with-drop .chosen-drop
{
    /*box-shadow: 3px 3px 0 3px rgb(104,175,255), -3px 3px 0 3px rgb(104,175,255)!important;*/
    border-radius: 6px;
    outline:none!important;
    font-variant-numeric: normal;
    opacity: 0;
    margin-top:-20px!important;
    transition: all .07s ease-in-out;
    backdrop-filter: blur(10px);
}
.chosen-with-drop .chosen-choices, .chosen-with-drop .chosen-single{
    /*box-shadow: 3px -3px 0 3px rgb(104,175,255), -3px -3px 0 3px rgb(104,175,255)!important;*/
    /*outline:none!important;*/
}
#UsersAdmin .chosen-rtl .chosen-search input[type="text"],
#UsersAdmin .chosen-container-single .chosen-single abbr,
#UsersAdmin .chosen-container-single .chosen-single div b,
#UsersAdmin .chosen-container-single .chosen-search input[type="text"],
#UsersAdmin .chosen-container .chosen-results-scroll-down span,
#UsersAdmin .chosen-container .chosen-results-scroll-up span{
    background-image: url("lib/chosen-sprite-without-button.png") !important;
}

.chosen-container.chosen-with-drop .chosen-drop{
    opacity: 1;
    margin-top:6px!important;
    box-shadow: var(--drop-shadow);
    cursor:var(--cursor);
}
.search-choice{
    background: var(--main-general-color);
}
.search-choice span{
    color: var(--main-text-color);
}
.chosen-results li:not(.no-results){
    color:var(--main-text-color-beauty);
    cursor:var(--cursor-pointer)!important;
}
.chosen-results .highlighted{
    background-color: var(--main-text-sub-color-beauty)!important;
    color: var(--main-text-color-beauty)!important;
}
.chosen-container-single .chosen-search
{
    background: var(--main-medium);
}
.chosen-container-single .chosen-search input[type="text"]{
    color: var(--main-text-color-beauty);
    border-radius: 4px!important;
}
.chosen-container .chosen-results li.no-results{
    background: var(--main-medium)!important;
}
.chosen-container .chosen-results{
    background: var(--main-medium);
}
.chosen-container .chosen-results::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.chosen-container .chosen-results::-webkit-scrollbar-track {
    background: transparent;
}
.chosen-container .chosen-results::-webkit-scrollbar-thumb {
    background: var(--webkit-scrollbar-thumb);
    border-radius: 3px;
}
.chosen-container .chosen-results::-webkit-scrollbar-thumb:hover {
    background: var(--webkit-scrollbar-thumb-hover);
}
.chosen-container-single a.chosen-single{
    color:var(--main-text-color);
    cursor:var(--cursor-pointer);
    background:var(--input-background);
    background-color:var(--input-background);
    border-radius: 2px;
    font-variant-numeric: normal;
    /*-webkit-box-shadow: 0 0.5px 2.5px 0 rgba(0, 0, 0, .3), 0 0 0 0.5px rgba(0, 122, 255, 0.05)!important;*/
    outline:1px solid var(--main-delimiter-light);
    height: 28px;
}
.chosen-container-single .chosen-single span{
    font-weight: 400;
}
.chosen-container-single .chosen-single div{
    top: -4px!important;
    right: 3px!important;
}
a.chosen-single:hover
{
    opacity: 1;
}


div.contenteditable{
    border: 0;
    padding: 10px 12px;
    border-radius: 2px;
    font-size: 14px;
    cursor:var(--cursor-text);
    background: var(--input-background);
    outline: 1px solid var(--main-delimiter-light);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden;
}
div.contenteditable:empty::before {
    content: attr(placeholder);
    color: var(--main-text-sub-color-advanced);
}
div.contenteditable:empty:focus::before {
    content: "";
}
div[contenteditable=true]:focus{
    outline: 4px solid var(--selector-color)!important;
    border-color: var(--button-color-hover);
    box-shadow: 0 0 0 1px rgba(0, 125, 250, 0.6);
}
div[contenteditable="false"]:focus,
div.contenteditable[readonly]:focus {
    outline: 4px solid var(--gray)!important;
    box-shadow: none;
}
/* Readonly стили для contenteditable */
div.contenteditable[readonly] {
    background-color: var(--main-sub-background);
    cursor: var(--cursor);
    opacity: 0.8;
}
div.contenteditable[readonly]::selection,
div.contenteditable[readonly] div::selection,
div.contenteditable[readonly] br::selection {
    background-color: var(--gray)!important;
    color: var(--main-text-color-beauty)!important;
}
div[contenteditable=true]::selection,div[contenteditable=true] div::selection,div[contenteditable=true] br::selection{
    background-color: var(--focus-text-background);
}
/* Разрешаем выделение текста в .contenteditable элементах */
.contenteditable {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}


.Modal table tr{
    animation: none;
}
.Modal h3 {
    font-size: 19.2px;
    font-weight: 500;
    text-align:left;
    margin:0;
    padding-top:6px;
}
.notifyPanel
{
    position: fixed;
    bottom: 10px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    z-index: 50;
    pointer-events: none;
    align-items: end;
}
.ModalNotify{
    margin-bottom: 10px;
    min-width: 250px;
    background: rgba(0,150,0,0.6);
    color: #FFF;
    padding: 10px;
    border-radius: 8px;
    animation: notify forwards 1s;
    width: max-content;
    max-width: 800px;
}
.ModalNotify.error{
    background: rgba(150, 0, 0, 0.6);
    animation: notifyError forwards 6s;
}
.ModalNotify.info{
    animation: none;
    background: var(--main-background);
    color: var(--main-text-color);
    pointer-events: all;
    -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 1.5px 0 rgba(0, 0, 0, 0.3), 0 7px 22px 0 rgba(0, 0, 0, 0.25);
    width: 450px;
}
.ModalNotify.info img{
    float: left;
    margin: 10px 10px 30px;
}
.ModalNotify.write{
    background: rgba(109, 109, 109, 0.6);
    animation: none;
}
.ModalNotify.writed{
    animation: notifyWrited forwards 1s;
}
.ModalNotify.writedError{
    background: rgba(150, 0, 0, 0.6);
    animation: notifyWritedError forwards 6s;
}
@keyframes notifyError {
    0% {opacity: 0;}
    7% {opacity: 1;}
    93% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes notify {
    0% {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes notifyWrited {
    0% {opacity: 1;background: rgba(109, 109, 109, 0.6)}
    25% {opacity: 1;background: rgba(0,150,0,0.6)}
    75% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes notifyWritedError {
    0% {opacity: 1;background: rgba(109, 109, 109, 0.6)}
    7% {opacity: 1;background: rgba(150, 0, 0, 0.6)}
    93% {opacity: 1;}
    100% {opacity: 0;}
}
.ModalBackground
{
    overflow:auto;
    overflow-y: scroll;
    position: fixed;
    backdrop-filter: blur(0px);
    background-color: rgba(0,0,0,0.00);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", sans-serif, "Segoe UI", system-ui, Roboto, Ubuntu;
    z-index: 10;
    color:var(--main-text-color);
    transition: all .08s ease-in-out;
}
.Modal
{
    width: min-content;
    background: var(--main-background);
    border: 1px var(--main-text-sub-color-beauty) solid;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.25), 0 0 3px 0 rgba(0, 0, 0, 0.55);
    padding: 22px 22px;
    margin-bottom: 10%;
    user-select: none;
    min-width: 350px;
    font-size: 13px;
}
.ModalContainer{
    position: absolute;
    top: 6%;
    left: 50%;
    width: min-content;
    transform: translate(-50%, -4%) scale(0.94);
    user-select: none;

    max-width: 100%;

    opacity: 0;
    transition: all .08s ease-in-out;
}
.ModalBackground.show .ModalContainer{
    opacity: 1;
    transform:translate(-50%, 0) scale(1);
}
.ModalBackground.show{
    backdrop-filter: blur(3px);
    background-color: rgba(0,0,0,0.05);
}
.Modal input:not([type="checkbox"]):not([type="radio"])
{
    width:-webkit-fill-available;
    background: var(--input-background);
    /*-webkit-box-shadow: 0 0.5px 2.5px 0 rgba(0,0,0,.3), 0 0 0 0.5px rgba(0,122,255,0.05);*/
    outline:1px solid var(--main-delimiter-light);
    padding: 5px 10px;
    margin:2px 0;
}
.Modal .fieldGroup .chosen-choices, .Modal .fieldGroup .chosen-single
{
    /*-webkit-box-shadow: 0 0.5px 2.5px 0 rgba(0,0,0,.3), 0 0 0 0.5px rgba(0,122,255,0.05);*/
    outline:1px solid var(--main-delimiter-light);
    padding: 5px 10px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--input-background);
}
.Modal input:not(.chosen-search-input):not([type="checkbox"]):not([type="radio"]):focus
{
    border:0!important;
}
.Modal .contenteditable
{
    width:-webkit-fill-available;
    outline: 1px solid var(--main-delimiter-light);
    padding: 5px 10px;
    margin:2px 0;
    border:0!important;
    border-radius: 2px;
    text-wrap: pretty;
    background: var(--input-background);
}
.ModalFooter
{
    display: flex;
    background: var(--main-text-sub-color-beauty);
    border-top: 1px solid var(--main-delimiter-light);
    margin: 32px -23px -23px;
    margin-top: 32px;
    padding: 22px 23px;
    border-radius: 0 0 12px 12px;
}
.ModalControlBody .ModalFooter{
    margin-left: -22px;
    border-bottom-left-radius: 0;
}
.ModalControl
{
    background: var(--main-text-sub-color-beauty);
    margin: -23px;
    margin-right: 22px;
    border-radius: 12px 0 0 12px;
    width: 180px;
    -webkit-box-shadow: -5px 0px 4px -2px rgba(114, 114, 114, 0.2) inset;
    display: flex;
    flex-direction: column;
    padding: 22px 10px;
}
.ModalControlBody{
    display:flex;
    flex-direction:column;
    height:500px;
    width:700px;
}
.ModalControl div{
    padding: 10px;
    font-size: 10pt;
}
.ModalDescription
{
    width:100%;
    text-align:left;
    font-size: 10pt;
}
.ModalColspan{
    color: var(--main-text-sub-color);
    font-size:10pt;
    font-weight:400;
}
.ModalField
{
    color: var(--main-text-sub-color);
    font-size: 10pt;
    font-weight: 500;
    vertical-align: middle;
    text-align: end;
    padding-right:8px;
}

/* Современные стили для форм в модальных окнах */
.fieldsContainer {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.fieldGroup {
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Стили для layout 'section' - слева label, справа поле (как в incident_ux_improved.html) */
.field-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--main-delimiter-light-super);
    align-items: start;
}

.field-group:last-child {
    border-bottom: none;
}

/* Стили для select-multiple-list компонента */
.select-multiple-list-container {
    background: var(--input-background);
    border-radius: 2px;
    padding: 12px;
    min-height: 60px;
    outline: 1px solid var(--main-delimiter-light);
    transition: outline 0.05s ease-in-out;
}
/* Readonly стили для select-multiple-list-container (сочетаются с остальными полями форм) */
.select-multiple-list-container[data-readonly="true"] {
    background: var(--main-sub-background)!important;
    border-color: var(--main-delimiter-light)!important;
    outline-color: var(--main-delimiter-light)!important;
    opacity: 0.8;
    cursor: var(--cursor)!important;
}

.select-multiple-list-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
    min-height: 20px;
}

.select-multiple-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--main-delimiter-light-super);
    border-radius: 0;
    text-decoration: none;
}

.select-multiple-list-item:last-child {
    border-bottom: none;
}

.select-multiple-list-item:hover {
    background: var(--main-background-hover);
}

.select-multiple-list-item-text {
    flex: 1;
    font-size: 13px;
    color: var(--link-color);
    cursor: pointer;
}

.select-multiple-list-item-remove {
    background: transparent;
    border: none;
    color: var(--main-text-sub-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.select-multiple-list-item-remove:hover {
    background: var(--red);
    color: white;
}

.select-multiple-list-empty {
    color: var(--main-text-sub-color-advanced);
    font-size: 13px;
    padding: 8px 0;
    text-align: center;
}

.select-multiple-list-controls {
    display: flex;
    gap: 8px;
    padding: 12px 0 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--main-delimiter-light-super);
    align-items: center;
    justify-content: right;
}

.select-multiple-list-add {
    background: var(--main-background);
    outline: 1px solid var(--main-delimiter-light);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--main-text-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1.4;
}

.select-multiple-list-add:hover {
    border-color: var(--main-delimiter);
    outline: 1px solid var(--link-color);
    color: var(--link-color);
    opacity: 1;
}

.select-multiple-list-select {
    display: none !important;
}

/* Стили для модального окна select-multiple-list */
.select-multiple-list-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 200px;
    max-height: 450px;
    width: 100%;
}

.select-multiple-list-modal-search {
    margin: 0 8px 8px 8px;
}

.select-multiple-list-modal-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.select-multiple-list-modal-column h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--main-text-color);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--main-delimiter-light-super);
}

.select-multiple-list-modal-available,
.select-multiple-list-modal-selected {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--main-background);
    border: 1px solid var(--main-delimiter-light-super);
    border-radius: 6px;
    min-height: 150px;
    max-height: 350px;
}

.select-multiple-list-modal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--segmented-controls-background);
    border: 1px solid var(--main-delimiter-light-super);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.select-multiple-list-modal-item:hover {
    background: var(--main-background-hover);
    border-color: var(--main-delimiter-light);
}

.select-multiple-list-modal-item-text {
    flex: 1;
    font-size: 13px;
    color: var(--main-text-color);
}

.select-multiple-list-modal-item-add,
.select-multiple-list-modal-item-remove {
    background: transparent;
    border: none;
    color: var(--main-text-sub-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
    font-weight: 600;
    text-decoration: none;
}

.select-multiple-list-modal-item-add:hover {
    background: var(--green);
    color: white;
}

.select-multiple-list-modal-item-remove:hover {
    background: var(--red);
    color: white;
}

.select-multiple-list-modal-empty {
    color: var(--main-text-sub-color-advanced);
    font-size: 13px;
    padding: 20px;
    text-align: center;
    font-style: italic;
}

.field-label {
    font-size: 13px;
    color: var(--main-text-sub-color);
    font-weight: 500;
}

.field-label-required::after {
    content: " *";
    color: var(--color-red);
}

.field-label-hint {
    display: block;
    font-size: 11px;
    color: var(--main-text-sub-color-advanced);
    font-weight: 400;
    margin-top: 4px;
}

.field-value {
    font-size: 14px;
    color: var(--main-text-color);
}
.field-value .chosen-container-single a.chosen-single{
    padding: 10px 12px;
    height: 36px;
}
.field-value .chosen-container-single .chosen-single div b{
    margin-top: 6px;
}

.fieldLabel {
    color: var(--main-text-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    margin-top:6px;
}

.fieldInput,
.fieldInput.form-input:not([type='checkbox']):not([type='radio']),
.fieldSelect,
.fieldContenteditable,
.fieldGroup textarea {
    width: 100%;
    padding: 10px 12px;
    border:none;
    outline: 1px solid var(--main-delimiter-light);
    border-radius: 2px;
    height: 36px;
    background: var(--input-background);
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.fieldInput:focus,
.fieldContenteditable:focus,
.fieldContenteditable:active {
    outline: 4px solid var(--selector-color)!important;
    border-color: var(--button-color-hover);
    box-shadow: 0 0 0 1px rgba(0, 125, 250, 0.6);
}

.fieldInput::placeholder {
    color: var(--main-text-sub-color-advanced);
}

.fieldInput:read-only, .fieldInput:disabled {
    background: var(--main-sub-background)!important;
    cursor: var(--cursor)!important;
}
.fieldInput:read-only:focus {
    outline: 4px solid var(--gray)!important;
}
.fieldInput:read-only::selection
{
    background-color: var(--gray)!important;
    color: var(--main-text-color-beauty)!important;
}

.fieldContenteditable {
    min-height: 80px;
    padding: 10px 12px;
    cursor: text;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden;
}

.fieldContenteditable:empty::before {
    content: attr(placeholder);
    color: var(--main-text-sub-color-advanced);
}
/* Readonly стили для fieldContenteditable */
.fieldContenteditable[readonly] {
    background: var(--main-sub-background)!important;
    cursor: var(--cursor)!important;
    opacity: 0.8;
}
.fieldContenteditable[readonly]:focus {
    outline: 4px solid var(--gray)!important;
    box-shadow: none;
}
.fieldContenteditable[readonly]::selection,
.fieldContenteditable[readonly] div::selection,
.fieldContenteditable[readonly] br::selection {
    background-color: var(--gray)!important;
    color: var(--main-text-color-beauty)!important;
}

.sectionHeader {
    color: var(--main-text-color-beauty);
    font-size: 14px;
    font-weight: 600;
    margin: 24px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid var(--main-delimiter-light);
}

.sectionHeader:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}


/* Стили для карточек в модальных окнах */
.Modal .card {
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.Modal .card:last-child {
    margin-bottom: 0;
}

/* Стили для групп infoField в модальных окнах */
.Modal .infoField {
    margin-bottom: 16px;
}

.Modal .infoField:last-child {
    margin-bottom: 0;
}

/* Стили для строк полей в модальных окнах */
.fieldRow {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.fieldRow .fieldGroup {
    flex: 1;
    min-width: 0;
}

/* Стили для infoField с flex (строка полей) */
.Modal .infoField[style*="display:flex"] {
    display: flex !important;
    gap: 16px;
}

.Modal .infoField[style*="display:flex"] > div {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--segmented-controls-border);
    background: var(--segmented-controls-background);
    padding: 1rem;
    border-radius: 1rem;
}

/* Сохраняем обратную совместимость со старыми табличными формами */
.Modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.Modal table tr {
    animation: none;
}

.Modal table td {
    padding: 0;
    border: none;
}
.ModalHeader{
    display:flex;
    align-items: flex-start;
    margin-bottom:12px
}
.ModalIcon{
    border: 5px white solid;
    border-radius: 14px;
    width: 48px;
    margin-left: 11px;
    margin-right: 28px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.25), 0 0 0 0.5px rgba(0,122,255,0.05);
    pointer-events: none;
}
.ModalIcon.small{
    width: 26px;
    border-radius: 10px;
    border-width: 3px;
    margin-right: 11px;
}


div.loading {
    position: relative;
    width: 36px;
    height: 36px;
    margin-left: 50%;
    margin-right: 50%;
    transform: translateX(-50%);
    /*background: rgba(255, 255, 255, 0.5);*/
    padding: 10px;
    border-radius: 10px;
    animation: show 0.25s ease-in-out;
}
div.loading span {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8pt;
    color: var(--main-text-sub-color);
}
@keyframes show {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
div.loading div {
    width: 7%;
    height: 16%;
    background: var(--loading-circle);
    position: absolute;
    left: 49%;
    top: 43%;
    opacity: 0;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    -webkit-animation: fade 1s linear infinite;
}
@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
div.loading div.bar1 {
    -webkit-transform:rotate(0deg) translate(0, -130%);
    -webkit-animation-delay: 0s;
}

div.loading div.bar2 {
    -webkit-transform:rotate(45deg) translate(0, -130%);
    -webkit-animation-delay: -0.875s;
}

div.loading div.bar3 {
    -webkit-transform:rotate(90deg) translate(0, -130%);
    -webkit-animation-delay: -0.75s;
}
div.loading div.bar4 {
    -webkit-transform:rotate(135deg) translate(0, -130%);
    -webkit-animation-delay: -0.625s;
}
div.loading div.bar5 {
    -webkit-transform:rotate(180deg) translate(0, -130%);
    -webkit-animation-delay: -0.5s;
}
div.loading div.bar6 {
    -webkit-transform:rotate(225deg) translate(0, -130%);
    -webkit-animation-delay: -0.375s;
}
div.loading div.bar7 {
    -webkit-transform:rotate(270deg) translate(0, -130%);
    -webkit-animation-delay: -0.25s;
}
div.loading div.bar8 {
    -webkit-transform:rotate(315deg) translate(0, -130%);
    -webkit-animation-delay: -0.125s;
}

/* loading-cell - для ожидания загрузки td */
.loading-cell::before {
    content: "-";
    opacity: 0;
}
.loading-cell {

    height: auto;
    border-radius: 4px;
    min-width:12px;
    /* Включаем глобальный animated background */
    background: var(--loading-cell);
    background-size: 400px 100%;
    animation: loading-wave 1.5s linear infinite;
    /* Передаем каждую ячейку на одну и ту же фазу анимации */
    /* (нет индивидуальных задержек, синхронизировано) */
}
/* Все .skeleton-cell будут двигать фон одинаково */
@keyframes loading-wave {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

/* Toggle Header - компонент для переключения между страницами модуля */
.toggle-header-title
{
    margin: 0 0 16px 0;
    padding: 0;
    font-size: 32px;
    font-weight: 600;
    color: var(--main-text-color);
    width: max-content;
    max-width: 100%;
}
/* ============================================
   БЫСТРЫЕ ССЫЛКИ (Quick Links) - для главной страницы
   Скопировано из body-toggle-header с иконками
   ============================================ */
.quick-links
{
    display: flex;
    gap: 12px;
    padding: 8px 12px 16px 12px; /* Уменьшен вертикальный padding для более компактного вида */
    margin-bottom: 20px;
    border-bottom: 1px solid var(--main-delimiter-light);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain; /* Предотвращает "протягивание" прокрутки на страницу */
    position: sticky;
    left: 259px;
    z-index: 10;
    /* Полоса прокрутки всегда видна, но прозрачна до hover */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: transparent transparent; /* Прозрачная по умолчанию */
}
/* Для Firefox: полоса прокрутки становится видимой при hover */
.quick-links:hover {
    scrollbar-color: var(--main-delimiter-light) transparent; /* Видимая при hover */
}
/* Для WebKit браузеров: полоса прокрутки всегда видна, но прозрачна до hover */
.quick-links::-webkit-scrollbar {
    height: 6px; /* Всегда видима */
    background: transparent;
}
.quick-links::-webkit-scrollbar-track {
    background: transparent; /* Прозрачный track всегда */
}
.quick-links::-webkit-scrollbar-thumb {
    background: transparent; /* Прозрачный thumb по умолчанию */
    border-radius: 3px;
    transition: background 0.2s ease; /* Плавное появление при hover */
}
/* При наведении на блок - полоса прокрутки становится видимой */
.quick-links:hover::-webkit-scrollbar-thumb {
    background: var(--main-delimiter-light);
}
.quick-links:hover::-webkit-scrollbar-thumb:hover {
    background: var(--main-delimiter);
}
/* Псевдоэлементы для центрирования когда элементов мало */
/* Когда появляется прокрутка, псевдоэлементы автоматически сжимаются до 0 */
.quick-links::before,
.quick-links::after {
    content: '';
    flex: 1 1 auto;
    min-width: 0;
}
.body#Home .card > .quick-links
{
    margin-bottom: 0;
    margin-top: 0;
    padding: 8px 12px 16px 12px; /* Уменьшен вертикальный padding для более компактного вида */
    background: transparent;
    border-bottom: none;
    border-radius: 0;
}

.quick-access-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    box-sizing: border-box;
    animation: quick-access-fade-in 0.2s ease-out;
}

@keyframes quick-access-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.quick-access-overlay-content
{
    background: var(--main-background);
    border-radius: 24px;
    padding: 48px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: quick-access-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    will-change: opacity;
    transform: translateZ(0); /* Принудительное включение hardware acceleration для четкого рендеринга */
    backface-visibility: hidden; /* Предотвращает проблемы с рендерингом */
}

@keyframes quick-access-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Анимация появления нового ярлыка в быстром доступе */
@keyframes favorite-item-appear {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.quick-links-item.favorite-item-new {
    opacity: 0;
    animation: favorite-item-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.quick-access-overlay-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 24px;
}

.quick-access-overlay-header h4
{
    flex: 1;
    margin: 0;
}

.quick-access-close
{
    background: transparent;
    border: none;
    padding: 8px;
    cursor: var(--cursor-pointer);
    color: var(--main-text-sub-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.quick-access-close:hover
{
    background: var(--main-sub-background);
    color: var(--main-text-color);
}

.quick-access-overlay .quick-links
{
    margin: 0;
    padding: 8px 12px 16px 12px; /* Уменьшен вертикальный padding для более компактного вида */
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain; /* Предотвращает "протягивание" прокрутки на страницу */
    scrollbar-width: thin;
    scrollbar-color: var(--main-delimiter-light) transparent;
}

.body#Home .card:has(.quick-links)
{
    margin-bottom: 64px;
    margin-top: 0;
    padding: 32px 48px;
}

.body#Home .card:has(.quick-links) h4
{
    margin-bottom: 24px;
    margin-top: 0;
}

@media (min-width: 1025px) {
    .body#Home .card:has(.quick-links)
    {
        padding: 32px 80px;
    }
}

.body#Home .quick-links
{
    margin-bottom: 0;
    margin-top: 0;
    padding: 8px 12px 16px 12px; /* Уменьшен вертикальный padding для более компактного вида */
    background: transparent;
    border-bottom: none;
    border-radius: 0;
}
.quick-links-item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    cursor: var(--cursor);
    font-size: 13px;
    font-weight: 400;
    color: var(--main-text-sub-color);
    background: transparent;
    border: none;
    box-shadow: none;
    user-select: none;
    position: relative;
    flex-shrink: 0; /* Предотвращаем сжатие элементов при прокрутке */
    width: 80px;
    text-align: center;
    backface-visibility: hidden; /* Предотвращает проблемы с рендерингом */
    -webkit-font-smoothing: antialiased; /* Улучшает рендеринг шрифтов */
    -moz-osx-font-smoothing: grayscale; /* Улучшает рендеринг шрифтов на macOS */
}
.quick-links-item.active
{
    color: var(--main-text-color);
    font-weight: 500;
}
/* Подложка для иконки */
.quick-links-item-icon-wrapper
{
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-general-color);
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    margin-bottom: 4px;
    position: relative;
    box-sizing: border-box;
    isolation: isolate; /* Изолируем контекст наложения */
}
/* Псевдоэлемент для рамки hover - не вызывает repaint основного элемента */
.quick-links-item-icon-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    border: 2px solid var(--button-color1);
    opacity:0;
    pointer-events: none;
    /* Создаём отдельный слой композиции для псевдоэлемента */
    transform: translateZ(0);
    will-change: border-color;
}
.quick-links-item-icon-wrapper:hover::before,
.quick-links-item-icon-wrapper.hover::before {
    opacity:1;
    /* Изменение border-color на отдельном слое не вызывает repaint основного элемента */
}
.quick-links.no-hover .quick-links-item-icon-wrapper:hover::before,
.quick-links.no-hover .quick-links-item-icon-wrapper.hover::before {
    opacity:0!important;
}
/* Иконка в quick-links-item */
.quick-links-item-icon-wrapper img,
.quick-links-item-icon-wrapper svg
{
    width: 36px;
    height: 36px;
    pointer-events: none;
    object-fit: contain;
    flex-shrink: 0;
}
/* Текст под иконкой */
.quick-links-item > div:not(.quick-links-item-icon-wrapper)
{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased; /* Улучшает рендеринг шрифтов */
    -moz-osx-font-smoothing: grayscale; /* Улучшает рендеринг шрифтов на macOS */
}
/* Drag and drop стили */
.quick-links-item.dragging
{
    cursor: grabbing !important;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-links-item.drag-over
{
    outline: 2px solid var(--button-color1);
    outline-offset: 4px;
    border-radius: 8px;
    transform: scale(1.05);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-links-item.drag-over-before::before
{
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--button-color1);
    border-radius: 2px;
}
.quick-links-item.drag-over-after::after
{
    content: '';
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--button-color1);
    border-radius: 2px;
}

/* ============================================
   BODY TOGGLE HEADER - простая версия с маленькими иконками перед текстом
   ============================================ */
.body-toggle-header
{
    display: flex;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--main-delimiter-light);
    flex-wrap: wrap;
    left: 0;
}
.toggle-header-item
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: var(--cursor);
    font-size: 13px;
    font-weight: 400;
    color: var(--main-text-sub-color);
    background: transparent;
    font-weight: 500;
    border: none;
    box-shadow: none;
    user-select: none;
    white-space: nowrap;
    position: relative;
}
.toggle-header-item.active
{
    color: var(--main-text-color);
    background: var(--navSidebarSelectedState);
    border-radius: 6px;
}
.toggle-header-item:hover,.toggle-header-item.hover
{
    color: var(--main-text-color);
}
/* Обертка для иконки с точкой уведомления */
.toggle-header-item-icon-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Маленькая иконка перед текстом */
.toggle-header-item-icon
{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.4;
    filter: var(--logo-filter);
    pointer-events: none;
}
.toggle-header-item.active .toggle-header-item-icon,
.toggle-header-item:hover .toggle-header-item-icon,
.toggle-header-item.hover .toggle-header-item-icon
{
    opacity: 1;
}

/* Точка уведомления в правом нижнем углу иконки */
.toggle-header-item-icon-wrapper::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255, 141, 0);
    border: 2px solid var(--main-background);
    box-sizing: border-box;
    display: none;
    z-index: 1;
}

.toggle-header-item-icon-wrapper.has-badge::after {
    display: block;
}

/* Оранжевая точка для важных уведомлений */
.toggle-header-item-icon-wrapper.has-badge.orange::after {
    background: rgb(255, 141, 0);
}

/* Синяя точка для обычных уведомлений */
.toggle-header-item-icon-wrapper.has-badge.blue::after {
    background: #2196F3;
}
/* Обертка для иконки с точкой уведомления */
.toggle-header-item-icon-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Точка уведомления в правом нижнем углу иконки */
.toggle-header-item-icon-wrapper::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255, 141, 0);
    border: 2px solid var(--main-background);
    box-sizing: border-box;
    display: none;
}

.toggle-header-item-icon-wrapper.has-badge::after {
    display: block;
}

/* Оранжевая точка для важных уведомлений */
.toggle-header-item-icon-wrapper.has-badge.orange::after {
    background: rgb(255, 141, 0);
}

/* Синяя точка для обычных уведомлений */
.toggle-header-item-icon-wrapper.has-badge.blue::after {
    background: #2196F3;
}

/* AppCard component */
.app-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
    border-radius:12px;
    text-decoration:none;
    color:var(--main-text-color);
    transition:background-color 0.2s;
    position:relative;
}
.app-card:hover{
    opacity: 1;
}
.app-card-icon{
    width:64px;
    height:64px;
    flex-shrink:0;
    border-radius:12px;
    overflow:hidden;
}
.app-card-icon {
    background: var(--main-sub-background);
}
.app-card-icon img {
    width: 101%;
    height: 101%;
    object-fit: cover;
    pointer-events: none;
}
.app-card-metadata {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app-card-metadata h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-text-color);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.app-card-metadata p {
    margin: 0;
    font-size: 12px;
    color: var(--main-text-sub-color);
    height: 16px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.app-card-button {
    flex-shrink: 0;
}


/* внешний вид меню */
.context-menu {
    /* устанавливаем абсолютное позиционирование */
    position: absolute;
    width: 300px;
    /* не показываем меню с самого начала */
    user-select: none;
    user-focus: none;
    /* цвет фона и настройки рамки вокруг меню */
    background-color: var(--main-medium);
    z-index: 1000;
    border: 1px solid var(--main-delimiter-light);
    padding: 4px;
    border-radius: 6px;
    animation: context-menu forwards .1s;

    /* Добавим тени */
    backdrop-filter: blur(12px);
    -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4),0 0 1.5px 0 rgba(0, 0, 0, 0.3),0 7px 22px 0 rgba(0, 0, 0, 0.25);
}
@keyframes context-menu {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}
.context-menu img{
    pointer-events: none;
}
/* общий стиль для списка */
.context-menu ul { list-style: none; margin: 0; padding: 0; }

/* стиль отдельных элементов */
.context-menu ul li { margin: 0; padding: 0; display: block;user-select: none;
    user-focus: none; }

/* стиль ссылок в меню */
.context-menu ul li a {
    color: var(--main-text-color-beauty);
    cursor: var(--cursor);
    text-decoration: none;
    font-size: 12px;
    display: block;
    padding: 4px 10px;
    border-radius: 6px;
    user-select: none;
    user-focus: none;
    opacity: 1!important;
}
.context-menu ul li a > span{
    float: right;
    font-size: 9pt;
    pointer-events: none;
}
.context-menu ul li a > span > span{
    outline: 1px solid var(--main-hover-interact-outline);
    padding: 1px 4px;
    border-radius: 4px;
}
.context-menu ul li a.disabled {
    background:none!important;
    color: var(--main-text-sub-color-advanced)!important;
}
.context-menu .line{
    margin: 8px 10px;
    border-bottom: 1px solid var(--main-sub-background);
}
/* меняем фон в пункте меню при наведении мыши */
.context-menu ul li a:hover:not(.no-hover-native),.context-menu ul li a.hover {
    background:var(--main-hover-interact);
    border: 0;
    opacity: unset;
}

table
{
    width: max-content;
    border-collapse: collapse;
    margin: 0;
}

/* Для таблиц с классом table-tiger используем фиксированную раскладку */
table.table-tiger {
    width: 100%; /* Переопределяем width: max-content для table-tiger */
}

.hidden{
    display: none!important;
}

.table-arrow-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 0 2px 0 2px;
}

.table-arrow-icon img {
    filter: var(--main-icon-filter);
    height: 8px;
}

.table-folder-icon {
    height: 14px;
    vertical-align: middle;
    margin: -2px 6px 2px 0;
    filter: var(--main-icon-filter);
}

.table-tiger {
    border-collapse: collapse;
    table-layout: fixed; /* Фиксированная раскладка таблицы - ширина колонок определяется явно заданными значениями */
    width: auto; /* Таблица не растягивается на всю ширину контейнера */
    /* Принудительно применяем заданные ширины колонок, игнорируя содержимое */
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Если таблица должна скроллиться */
.table-tiger.table-scrollable {
    /* Ширина таблицы определяется содержимым (суммой колонок) */
    /* Не задаем width: 100%, чтобы таблица могла быть шире контейнера и появился скролл */
    min-width: 0; /* Позволяет таблице сужаться меньше контейнера для прокрутки */
}

/* Если таблица не скроллится - контейнер подгоняется под ширину */
.table-tiger:not(.table-scrollable) {
    width: auto; /* Ширина определяется содержимым */
}

/* Пустая колонка в конце таблицы заполняет оставшееся пространство */
/* Для обычных таблиц - фиксированная ширина 12px */
.table-tiger:not(.table-scrollable) thead th:last-child,
.table-tiger:not(.table-scrollable) tbody td:last-child {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
}

/* Для scrollable таблиц - последняя колонка заполняет оставшееся пространство */
.table-tiger.table-scrollable thead th:last-child,
.table-tiger.table-scrollable tbody td:last-child {
    width: auto !important;
    min-width: 12px !important;
    max-width: none !important;
}

/* Принудительно применяем ширину заголовков к ячейкам - колонки не могут быть шире заданной ширины */
/* В режиме table-layout: fixed ширина определяется первым рядом (thead th) */
/* Ячейки автоматически получают ту же ширину, что и заголовки */
/* Содержимое обрезается через overflow: hidden и text-overflow: ellipsis */

/* Предотвращаем пересчет layout при добавлении строк через lazy loading */
.table-tiger.table-adding-rows {
    contain: layout style;
    will-change: contents;
}

/* Стили для строки загрузки - предотвращаем схлопывание таблицы */
.table-tiger tbody tr.loading-tr {
    display: table-row !important;
}

.table-tiger tbody tr.loading-tr td {
    min-width: 0 !important;
    max-width: none !important;
}

/* Стили для пустых строк-заглушек (minRows) */
.table-tiger tbody tr.empty-placeholder-row {
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
}

/* Пустые строки не должны выделяться при hover */
.table-tiger tbody tr.empty-placeholder-row:focus,
.table-tiger tbody tr.empty-placeholder-row.active {
    outline: none !important;
    background: inherit !important;
}

.table-tiger thead {
    border-bottom: 1px solid var(--main-delimiter-light);
    position: sticky;
    left: 259px;
    top: 25px;
    z-index: 1;
    background-color: var(--main-background);
}

/* Учитываем отступы контейнера таблицы при фиксации шапки */
/* Контейнер таблицы имеет padding:20px, поэтому шапка должна прилипать с учетом этого отступа */
.body .table-tiger thead {
    top: 0;
}

.table-tiger th,
.table-tiger td {
    padding: 2px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Убираем ограничения на минимальную ширину, чтобы колонка могла быть меньше содержимого */
    min-width: 0 !important; /* !important чтобы переопределить inline стили */
    max-width: 100%;
    /* Убеждаемся, что ширина может быть меньше содержимого */
    box-sizing: border-box;
    /* Принудительно ограничиваем ширину - содержимое обрезается */
    /* В режиме table-layout: fixed ширина определяется первым рядом (thead) */
}

/* Стили для заголовков групп в таблице */
.table-tiger tbody tr.group-header {
    font-weight: bold;
}

.table-tiger .Data {
    font-size: 13px;
}

/* Второй столбец (главный) не может быть меньше 80px */
.table-tiger thead th:nth-child(2),
.table-tiger tbody tr td:nth-child(2) {
    min-width: 80px !important;
}

/* Стили для hover-элементов в таблице */
.table-tiger td {
    position: relative;
}

.table-tiger td .table-cell-content {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Позволяет тексту сжиматься */
    max-width: 100%; /* По умолчанию занимает всю ширину */
}

/* По умолчанию текст не имеет отступа - иконка скрыта */
.table-tiger td.has-hover-elements .table-cell-content {
    padding-right: 0; /* По умолчанию без отступа */
    max-width: 100%; /* Текст занимает всю ширину */
}

.table-tiger td .table-hover-elements {
    display: none !important; /* Скрыта по умолчанию, не занимает место */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    line-height: 0; /* Предотвращаем изменение высоты ячейки */
    z-index: 10;
    margin: 0; /* Убираем все отступы */
    padding: 0; /* Убираем все отступы */
    /* Иконка абсолютно позиционирована, поэтому не влияет на размер ячейки */
}

.table-tiger tbody tr.Data:hover td .table-hover-elements,
.table-tiger tbody tr.Data.active td .table-hover-elements {
    display: block !important; /* Показываем при наведении и для активных строк */
}

/* При наведении и для активных строк текст сдвигается, чтобы освободить место для иконки */
.table-tiger tbody tr.Data:hover td.has-hover-elements .table-cell-content,
.table-tiger tbody tr.Data.active td.has-hover-elements .table-cell-content {
    padding-right: 28px; /* Оставляем место для иконки (16px + 8px gap) */
    max-width: calc(100% - 28px); /* Ограничиваем ширину текста */
}

/* Стили для иконки More (меню действий) */
.table-hover-elements .three-dots-menu {
    display: block;
    cursor: var(--cursor);
    user-select: none;
    -webkit-user-select: none;
    line-height: 0; /* Предотвращаем изменение высоты ячейки */
    height: 16px; /* Фиксированная высота */
    width: 16px; /* Фиксированная ширина */
}

.table-hover-elements .three-dots-menu img {
    height: 16px;
    width: 16px;
    filter: var(--blue-filter);
    display: block; /* Убираем лишние отступы */
    line-height: 0; /* Дополнительная защита от изменения высоты */
}

.table-hover-elements .three-dots-menu:hover img {
    opacity: 0.8;
}

/* Визуальный разделитель между колонками в заголовке */
.table-tiger th:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: 0;
    width: 1px;
    background-color: var(--main-delimiter-light);
    pointer-events: none;
}

/* Стили для изменения ширины колонок */
.table-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.table-resize-handle:hover {
    background-color: var(--main-blue);
    opacity: 0.5;
}

.table-tiger.resizing .table-resize-handle {
    background-color: var(--main-blue);
    opacity: 0.8;
}

.table-tiger th.resizing {
    background-color: var(--main-hover-interact);
    opacity: 0.3;
}

/* Стили для перетаскивания колонок */
.table-tiger th.dragging-column {
    opacity: 0.5;
    cursor: move;
}

.table-tiger th.drag-over {
    border-left: 2px solid var(--main-blue);
    border-right: 2px solid var(--main-blue);
}

.table-tiger.dragging-column {
    cursor: move;
}
.Data.Tiger{
    border-radius: 6px;
    padding: 2px 12px;
}
.Data.active{
    background-color:var(--button-color-hover)!important;
    color: white;
}
.Data.active td{
    background-color:var(--button-color-hover)!important;
    color: white;
}
.Data:focus{
    outline: none;
}
.Data.active .iB0 {
    color:white!important;
}
.Data.active .iB0 img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(2%) hue-rotate(314deg) brightness(103%) contrast(100%)!important;
}
.DataFooter{
    display: flex;
    flex-direction: row-reverse;
    background:var(--main-background);
    box-shadow: 0px -1px 0px var(--main-delimiter-light);
}
.DataFooter div{
    padding: 6px 14px;
    cursor: var(--cursor-pointer);
}
.DataFooter div:hover{
    background: var(--main-hover-interact);
}
.DataFooter div:active{
    background: var(--main-delimiter-light);
}
.DataPanelData summary{
    padding: 4px 12px;
    font-weight: 500;
    color: var(--main-text-color-beauty);
}
.Data.active img{
    filter: brightness(45%) saturate(125%) contrast(160%) invert(100%) saturate(5%) !important;
}

/* Стили для перетаскивания строк таблицы */
.table-tiger tbody tr.Data.active.dragging {
    opacity: 0.6;
}

/*.context-menu ul li a:not(.disabled):hover > span > span{
    outline: 1px solid #FFFFFF77;
}*/

/* Индикаторы изменения метрик производства */
.production-metric-lean-change {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.production-metric-lean-change.positive {
    color: var(--success-color);
    background: var(--light-green);
}

.production-metric-lean-change.negative {
    color: var(--error-color);
    background: var(--light-red);
}

.production-metric-lean-change.neutral {
    color: var(--main-text-sub-color);
    background: var(--main-sub-background);
}

/* Тэги */
.tag-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-text-sub-color);
    background: transparent;
    border: 1px solid var(--main-text-sub-color);
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Стили для бейджа MagicCursor (ЕСУПНК 1.2.0+) */
.native-hover-magic-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--button-color1) 0%, var(--button-color-outline) 100%);
    color: #FFF;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
    margin-right: 8px;
}

/* FAQ Component (Вопрос-Ответ) - Минималистичный стиль Apple/Tesla (CSS only) */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.faq-item {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
}

.faq-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.faq-item:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.faq-item:hover:not(.no-hover-native),
.faq-item.hover {
    background: var(--main-sub-background);
}

/* Отключаем hover для открытых элементов */
.faq-item:has(.faq-checkbox:checked):hover:not(.no-hover-native),
.faq-item:has(.faq-checkbox:checked).hover {
    background: transparent;
}

/* Скрытый чекбокс */
.faq-checkbox {
    position: absolute!important;
    opacity: 0!important;
    pointer-events: none!important;
    width: 0!important;
    height: 0!important;
}

.faq-question {
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    text-align: left;
    cursor: var(--cursor-pointer);
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    gap: 16px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0;
}

.faq-question:hover:not(.no-hover-native),
.faq-question.hover {
    color: var(--main-text-color);
}

/* Отключаем hover для открытых элементов */
.faq-checkbox:checked + .faq-question:hover:not(.no-hover-native),
.faq-checkbox:checked + .faq-question.hover {
    color: var(--main-text-color);
}

.faq-question:focus {
    outline: none;
}

.faq-question:focus-visible {
    outline: 2px solid var(--selector-color);
    outline-offset: -2px;
    border-radius: 8px;
}

.faq-question-text {
    flex: 1;
    line-height: 1.5;
    color: var(--main-text-color);
}

.faq-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--main-text-sub-color);
    transform: rotate(0deg);
}

/* Состояние при checked - поворот иконки (стрелка вверх) */
.faq-checkbox:checked + .faq-question .faq-icon {
    transform: rotate(180deg);
    color: var(--main-text-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: transparent;
}

/* Состояние при checked - показ ответа */
.faq-checkbox:checked ~ .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 20px 16px 20px;
    color: var(--main-text-sub-color);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.faq-answer-content p {
    margin: 0 0 12px 0;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Разделитель между элементами FAQ */
.faq-item:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--main-delimiter-light);
    margin: 0 20px;
}

/* FAQ внутри карточки - компенсация padding карточки */
.card .faq-container {
    margin: -1rem;
    padding: 0;
}

.card .faq-item:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.card .faq-item:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* Стили для значка подсказки */
.help-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: var(--main-text-sub-color);
    background: var(--main-delimiter-light);
    border-radius: 50%;
    margin-left: 4px;
    cursor: help;
    transition: all 0.2s ease;
    cursor: var(--cursor);
}

.help-icon:hover {
    color: var(--main-text-color);
}