/* 
    Основной файл стилей
*/

:root {

    /* Шрифты */
    --main-font: Arial,sans-serif;
    
    /* Фоны */
    --bg-color: #f6f7fa;
    --bg-color-top: #ffffff;
    --bg-color-card: #ffffff;

    /* Текст */
    --text-color: #1a1a2e;
    --text-color-secondary: #5a5a72;
    --text-color-muted: #8e8ea0;
    --text-color-inverse: #ffffff;

    /* Границы */
    --border-color: #d0d0dd;
    --input-border-color: #d8d8e5;
    --input-border-color-focus: #4a56a8;

    /* Акцент */
    --main-accent-color: #2d3a8c;
    --main-accent-color-hover: #1f2a6e;
    --main-accent-color-active: #162052;
    --main-accent-color-medium: #5a66b8;
    --main-accent-color-light: #e8eaf7;
    --main-accent-color-lighter: #f4f5fc;
        /* Ссылки */
        --link-color: #2d3a8c;
        --link-color-hover: #1f2a6e;

    /* Второстепеный акцент */
    --second-accent-color: #7a7a8e;
    --second-accent-color-hover: #5e5e72;

    /* Системные цвета */
    --color-success: #2d8f5e;
    --color-success-bg: #eaf5ef;
    --color-error: #c43a4a;
    --color-error-bg: #fceeef;
    --color-warning: #b88a3a;
    --color-warning-bg: #fdf5e5;
    --color-info: #2d7b8f;
    --color-info-bg: #eaf0f5;

    /* Тени */
    --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.06);
    --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.08);
    --shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.12);
    --shadow-focus: 0 0 0 3px rgba(45, 58, 140, 0.15);

    /* Отступы */
    --margin-l1: 16px;
    --margin-l2: 12px;
    --margin-l3: 8px;
    --margin-l4: 4px;

    /* Радиусы углов */
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;

    /* Описания */
    --description-text-color: #2f2f2f;
    --description-background-color: #efeeee;

    /* Для избранных */
    --color-favorite: #e8a838;
    --color-favorite-bg: #fdf5e5;
    
    
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Добавляем корректный перенос текста */
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}
body{
    font-size: 16px;
    font-family: Arial,sans-serif;
}

/*
    Некоторые стандартные стили для глобальных тегов
*/
code, pre {
    font-family: monospace;
    position: relative;
    background: #E0E0E0;
    word-break: break-all;
    hyphens: none;
}


/*
    Стили стандартных полей
*/
/*Обязательно к заполнению*/
span.required{
    color: red;
    position: relative;
}
span.required::after{
    content: attr(data-info);
    transition: 0.3s;
    transform: scale(0);
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color-top);
    border: 1px solid var(--border-color);
    padding: 0.35em 0.5em;
    font-size: 0.7em;
}
span.required:hover::after{
    content: attr(data-info);
    transform: scale(1);
    position: absolute;
    top: 100%;
    left: 0;
}

/* Поле с недопустимыми символами (data-valid) */
input.muims_invalid,
input.muims_invalid:focus{
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px var(--color-error-bg);
}

/* Описание к полю */
p.description {
    background-color: var(--description-background-color);
    color: var(--description-text-color);
    border: 1px solid transparent;
    padding: var(--margin-l3);
    margin: 0 var(--margin-l2);
}
label p.description {
    margin: 0 var(--margin-l2);
    background: transparent;
    font-size: 85%;
    opacity: 0.7;
    transition: 0.3s;
    padding: 0;
}
label:hover p.description,
label input:focus ~ p.description {
    opacity: 1;
}

/*Текстовое поле строка и другое
    _str - текстовое в одну строк
    _pass - текстовое пароль
    _checkbox - чекбокс
    _time - время
*/ 
label.muims_str,
label.muims_pass,
label.muims_checkbox,
label.muims_time,
label.muims_date,
label.muims_datetime,
label.muims_number,
label.muims_textarea,
label.muims_select,
label.muims_weekday {
    display: grid;
    grid-gap: var(--margin-l4);
    border: 1px solid transparent;
    margin: 0 var(--margin-l2);
}
label.muims_checkbox {
    grid-template-columns: repeat(2, minmax(min-content, auto));
}
label.muims_checkbox p.description {
    grid-column: span 2;
}
label.muims_checkbox .checkboxShow {
    display: inline-block;
    aspect-ratio: 1 / 1;
    height: var(--margin-l1);
    border: 1px solid var(--border-color);
    text-align: center;
    vertical-align: middle;
    color: transparent;
    transition: 0.3s;
}
label.muims_checkbox input{
    display: none;
}
label.muims_checkbox:hover .checkboxShow {
    box-shadow: var(--main-accent-color-medium) 0px 0px 3px 0px;
}
input:checked ~ .checkboxShow {
    color: var(--bg-color);
    background-color: var(--main-accent-color);
}

label.muims_str span,
label.muims_pass span,
label.muims_checkbox span,
label.muims_time span,
label.muims_date span,
label.muims_datetime span,
label.muims_number span,
label.muims_textarea span,
label.muims_select span,
label.muims_weekday span{
    font-size: 0.9em;
}
label.muims_checkbox span {
    grid-column: 1;
}


label.muims_str input,
label.muims_pass input,
label.muims_time input,
label.muims_date input,
label.muims_datetime input,
label.muims_number input,
label.muims_textarea textarea{
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    font-family: var(--main-font);
}
label.muims_str input:hover,
label.muims_pass input:hover,
label.muims_time input:hover,
label.muims_date input:hover,
label.muims_datetime input:hover,
label.muims_number input:hover,
label.muims_textarea textarea:hover{
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_str input:focus,
label.muims_pass input:focus,
label.muims_time input:focus,
label.muims_date input:focus,
label.muims_datetime input:focus,
label.muims_number input:focus,
label.muims_textarea textarea:focus{
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_str input::placeholder,
label.muims_pass input::placeholder,
label.muims_time input::placeholder,
label.muims_date input::placeholder,
label.muims_datetime input::placeholder,
label.muims_number input::placeholder,
label.muims_textarea textarea::placeholder{
    color: var(--second-accent-color);
    font-size: 0.9em;
}

/* Выпадающие списки дат (форматы d / m / y / my поля date) */
label.muims_date select {
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_date select:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date select:focus {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
/* Выпадающий календарь «месяц + год» (format my поля date):
   слева месяцы (сетка 3x4, без «не выбрано»), справа годы (12 на страницу
   со стрелками «ещё» и кнопкой «текущий»), снизу на всю ширину — «не выбрано».
   Ширина ограничена 100% родителя и 500px. */
label.muims_date .myCalendarBlock {
    position: relative;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

label.muims_date .myCalendarBlock .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_date .myCalendarBlock .selected:hover {
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_date .myCalendarBlock .selected:focus-within {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_date .myCalendarBlock .selected .n {
    min-height: 1em;
}
label.muims_date .myCalendarBlock .selected .dayArrow {
    display: inline-flex;
    align-items: center;
    color: var(--main-accent-color);
}
label.muims_date .myCalendarBlock .selected .dayArrow svg {
    width: 18px;
    height: 18px;
}
label.muims_date .myCalendarBlock .myCalendarGrid {
    display: none;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--margin-l4);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: var(--margin-l3);
    border: 1px solid var(--input-border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color);
}
label.muims_date .myCalendarBlock.open .myCalendarGrid {
    display: grid;
}

/* Левая колонка — месяцы (сетка 3x4) */
label.muims_date .myCalendarBlock .my-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--margin-l4);
    height: 100%;
}
label.muims_date .myCalendarBlock .my-month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2em;
    padding: var(--margin-l2);
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
    text-align: center;
}
label.muims_date .myCalendarBlock .my-month-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .myCalendarBlock .my-month-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}

/* Правая колонка — годы */
label.muims_date .myCalendarBlock .my-years {
    display: flex;
    flex-direction: column;
    gap: var(--margin-l3);
}
label.muims_date .myCalendarBlock .my-year-head,
label.muims_date .myCalendarBlock .my-months-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin-l3);
}
label.muims_date .myCalendarBlock .my-year-title,
label.muims_date .myCalendarBlock .my-months-title {
    font-weight: 600;
}
label.muims_date .myCalendarBlock .my-year-current {
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    color: var(--main-accent-color);
    padding: var(--margin-l2) var(--margin-l3);
    transition: 0.3s;
}
label.muims_date .myCalendarBlock .my-year-current:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .myCalendarBlock .my-years-list {
    display: flex;
    flex-direction: column;
    gap: var(--margin-l3);
    max-height: 210px;
    overflow-y: auto;
}
label.muims_date .myCalendarBlock .my-year-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.0em;
    padding: var(--margin-l1) var(--margin-l2);
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
    text-align: center;
}
label.muims_date .myCalendarBlock .my-year-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .myCalendarBlock .my-year-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}
label.muims_date .myCalendarBlock .my-more {
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    color: var(--main-accent-color);
    padding: var(--margin-l1) var(--margin-l2);
    transition: 0.3s;
    text-align: center;
}
label.muims_date .myCalendarBlock .my-more:hover {
    background-color: var(--main-accent-color-light);
}

/* Кнопка «не выбрано» — на всю ширину сетки */
label.muims_date .myCalendarBlock .my-clear {
    grid-column: 1 / -1;
    cursor: pointer;
    border: 1px solid var(--color-warning);
    background: var(--color-favorite-bg);
    color: var(--color-warning);
    font-weight: 600;
    padding: var(--margin-l2);
    transition: 0.3s;
    text-align: center;
}
label.muims_date .myCalendarBlock .my-clear:hover {
    background-color: var(--color-favorite);
    color: var(--text-color-inverse);
    border-color: var(--color-favorite);
}

/* Выпадающий календарь «день» (format d поля date):
   сетка 7 столбцов (дни 1..31) + отдельная ячейка «–» для снятия выбора.
   Ширина ограничена 100% родителя и 500px. */
label.muims_date .dayCalendarBlock {
    position: relative;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}
label.muims_date .dayCalendarBlock .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_date .dayCalendarBlock .selected:hover {
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_date .dayCalendarBlock .selected:focus-within {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_date .dayCalendarBlock .selected .n {
    min-height: 1em;
}
label.muims_date .dayCalendarBlock .selected .dayArrow {
    display: inline-flex;
    align-items: center;
    color: var(--main-accent-color);
}
label.muims_date .dayCalendarBlock .selected .dayArrow svg {
    width: 18px;
    height: 18px;
}
label.muims_date .dayCalendarBlock .dayCalendarGrid {
    display: none;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: var(--margin-l4);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: var(--margin-l3);
    border: 1px solid var(--input-border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color);
}
label.muims_date .dayCalendarBlock.open .dayCalendarGrid {
    display: grid;
}
label.muims_date .dayCalendarBlock .day-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
}
label.muims_date .dayCalendarBlock .day-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .dayCalendarBlock .day-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}
/* Ячейка «–» (снять выбор) — визуально отдельная */
label.muims_date .dayCalendarBlock .day-clear {
    background-color: var(--color-favorite-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 600;
}
label.muims_date .dayCalendarBlock .day-clear:hover {
    background-color: var(--color-favorite);
    color: var(--text-color-inverse);
    border-color: var(--color-favorite);
}

/* Выпадающий календарь «месяц» (format m поля date):
   сетка 3 столбца (месяцы 1..12, 4 строки) + отдельная строка «не выбрано».
   Ширина ограничена 100% родителя и 500px. */
label.muims_date .monthCalendarBlock {
    position: relative;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}
label.muims_date .monthCalendarBlock .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_date .monthCalendarBlock .selected:hover {
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_date .monthCalendarBlock .selected:focus-within {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_date .monthCalendarBlock .selected .n {
    min-height: 1em;
}
label.muims_date .monthCalendarBlock .selected .dayArrow {
    display: inline-flex;
    align-items: center;
    color: var(--main-accent-color);
}
label.muims_date .monthCalendarBlock .selected .dayArrow svg {
    width: 18px;
    height: 18px;
}
label.muims_date .monthCalendarBlock .monthCalendarGrid {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--margin-l4);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: var(--margin-l3);
    border: 1px solid var(--input-border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color);
}
label.muims_date .monthCalendarBlock.open .monthCalendarGrid {
    display: grid;
}
label.muims_date .monthCalendarBlock .month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1em;
    padding: var(--margin-l2);
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
    text-align: center;
}
label.muims_date .monthCalendarBlock .month-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .monthCalendarBlock .month-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}
/* Ячейка «не выбрано» — отдельная строка на всю ширину сетки */
label.muims_date .monthCalendarBlock .month-clear {
    grid-column: 1 / -1;
    background-color: var(--color-favorite-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 600;
}
label.muims_date .monthCalendarBlock .month-clear:hover {
    background-color: var(--color-favorite);
    color: var(--text-color-inverse);
    border-color: var(--color-favorite);
}

/* Выпадающий календарь «год» (format y поля date):
   сетка 3 столбца x 4 строки (12 лет), шапка «← | диапазон | →»,
   внизу строка «не выбрано». Ширина ограничена 100% родителя и 500px. */
label.muims_date .yearCalendarBlock {
    position: relative;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}
label.muims_date .yearCalendarBlock .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_date .yearCalendarBlock .selected:hover {
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_date .yearCalendarBlock .selected:focus-within {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_date .yearCalendarBlock .selected .n {
    min-height: 1em;
}
label.muims_date .yearCalendarBlock .selected .dayArrow {
    display: inline-flex;
    align-items: center;
    color: var(--main-accent-color);
}
label.muims_date .yearCalendarBlock .selected .dayArrow svg {
    width: 18px;
    height: 18px;
}
label.muims_date .yearCalendarBlock .yearCalendarGrid {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--margin-l4);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: var(--margin-l3);
    border: 1px solid var(--input-border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color);
}
label.muims_date .yearCalendarBlock.open .yearCalendarGrid {
    display: grid;
}
/* Шапка со стрелками и диапазоном */
label.muims_date .yearCalendarBlock .year-nav {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin-l3);
}
label.muims_date .yearCalendarBlock .year-nav .year-title {
    font-weight: 600;
    text-align: center;
    flex: 1 1 auto;
    cursor: pointer;
    padding: var(--margin-l2);
    transition: 0.3s;
}
label.muims_date .yearCalendarBlock .year-nav .year-title:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .yearCalendarBlock .year-nav button {
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    color: var(--main-accent-color);
    font-size: 1.1em;
    line-height: 1;
    padding: var(--margin-l2) var(--margin-l3);
    transition: 0.3s;
}
label.muims_date .yearCalendarBlock .year-nav button:hover:not(:disabled) {
    background-color: var(--main-accent-color-light);
}
label.muims_date .yearCalendarBlock .year-nav button:disabled {
    opacity: 0.4;
    cursor: default;
}
label.muims_date .yearCalendarBlock .year-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1em;
    padding: var(--margin-l2);
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
    text-align: center;
}
label.muims_date .yearCalendarBlock .year-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_date .yearCalendarBlock .year-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}
/* Ячейка «не выбрано» — отдельная строка на всю ширину сетки */
label.muims_date .yearCalendarBlock .year-clear {
    grid-column: 1 / -1;
    background-color: var(--color-favorite-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 600;
}
label.muims_date .yearCalendarBlock .year-clear:hover {
    background-color: var(--color-favorite);
    color: var(--text-color-inverse);
    border-color: var(--color-favorite);
}

/* Выпадающий календарь «день недели» (weekday/dayofweek):
   одна строка «пн-вс» (7 ячеек) + строка «не выбрано» на всю ширину.
   Ширина ограничена 100% родителя и 500px. */
label.muims_weekday .wdCalendarBlock {
    position: relative;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}
label.muims_weekday .wdCalendarBlock .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    background-color: var(--bg-color);
}
label.muims_weekday .wdCalendarBlock .selected:hover {
    background-color: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_weekday .wdCalendarBlock .selected:focus-within {
    box-shadow: var(--input-border-color) 0px 0px 3px 0px;
    border-color: var(--main-accent-color);
    background-color: var(--main-accent-color-light);
}
label.muims_weekday .wdCalendarBlock .selected .n {
    min-height: 1em;
}
label.muims_weekday .wdCalendarBlock .selected .dayArrow {
    display: inline-flex;
    align-items: center;
    color: var(--main-accent-color);
}
label.muims_weekday .wdCalendarBlock .selected .dayArrow svg {
    width: 18px;
    height: 18px;
}
label.muims_weekday .wdCalendarBlock .wdCalendarGrid {
    display: none;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: var(--margin-l4);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin-top: var(--margin-l3);
    border: 1px solid var(--input-border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color);
}
label.muims_weekday .wdCalendarBlock.open .wdCalendarGrid {
    display: grid;
}

/* Календарные гриды полей date/weekday — попап поверх контента (как .select-pop):
   position: fixed (координаты вычисляет JS: positionCalGrid), форма не раздвигается.
   Показ при .open остаётся через правила выше (специфичность выше). */
label.muims_date .myCalendarBlock .myCalendarGrid,
label.muims_date .dayCalendarBlock .dayCalendarGrid,
label.muims_date .monthCalendarBlock .monthCalendarGrid,
label.muims_date .yearCalendarBlock .yearCalendarGrid,
label.muims_weekday .wdCalendarBlock .wdCalendarGrid {
    position: fixed;
    z-index: 1500;
    display: none;
    width: auto;
    max-width: calc(100vw - 16px);
    margin-top: 0;
    border: 1px solid var(--border-color);
    padding: var(--margin-l3);
    background-color: var(--bg-color-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* Стрелка-шеврон триггера календарей (поворот на 180° при .open) */
label.muims_date .myCalendarBlock .selected .dayArrow,
label.muims_date .dayCalendarBlock .selected .dayArrow,
label.muims_date .monthCalendarBlock .selected .dayArrow,
label.muims_date .yearCalendarBlock .selected .dayArrow,
label.muims_weekday .wdCalendarBlock .selected .dayArrow {
    transition: transform 0.25s ease;
}
label.muims_date .myCalendarBlock.open .selected .dayArrow,
label.muims_date .dayCalendarBlock.open .selected .dayArrow,
label.muims_date .monthCalendarBlock.open .selected .dayArrow,
label.muims_date .yearCalendarBlock.open .selected .dayArrow,
label.muims_weekday .wdCalendarBlock.open .selected .dayArrow {
    transform: rotate(180deg);
}

/* Узкий экран: «месяц + год» — одна колонка, сетки ограничены по высоте */
@media (max-width: 480px) {
    label.muims_date .myCalendarBlock.open .myCalendarGrid {
        grid-template-columns: 1fr;
    }
    label.muims_date .myCalendarBlock.open .myCalendarGrid,
    label.muims_date .dayCalendarBlock.open .dayCalendarGrid,
    label.muims_date .monthCalendarBlock.open .monthCalendarGrid,
    label.muims_date .yearCalendarBlock.open .yearCalendarGrid,
    label.muims_weekday .wdCalendarBlock.open .wdCalendarGrid {
        max-height: 60vh;
        overflow-y: auto;
    }
}

label.muims_weekday .wdCalendarBlock .wd-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2em;
    padding: var(--margin-l2);
    cursor: pointer;
    border: 1px solid var(--main-accent-color-medium);
    background: var(--bg-color-card);
    transition: 0.3s;
    user-select: none;
    text-align: center;
}
label.muims_weekday .wdCalendarBlock .wd-cell:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_weekday .wdCalendarBlock .wd-cell.selected {
    background-color: var(--main-accent-color-light);
    outline: 2px solid var(--main-accent-color);
    outline-offset: -2px;
}
/* Ячейка «не выбрано» — отдельная строка на всю ширину сетки */
label.muims_weekday .wdCalendarBlock .wd-clear {
    grid-column: 1 / -1;
    background-color: var(--color-favorite-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 600;
}
label.muims_weekday .wdCalendarBlock .wd-clear:hover {
    background-color: var(--color-favorite);
    color: var(--text-color-inverse);
    border-color: var(--color-favorite);
}

/* Недоступные (запрещённые ограничениями) ячейки календарей:
   приглушаем и запрещаем клик/подсветку */
label.muims_date .dayCalendarBlock .day-cell.disabled,
label.muims_date .monthCalendarBlock .month-cell.disabled,
label.muims_date .yearCalendarBlock .year-cell.disabled,
label.muims_date .myCalendarBlock .my-month-cell.disabled,
label.muims_date .myCalendarBlock .my-year-cell.disabled,
label.muims_weekday .wdCalendarBlock .wd-cell.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--description-text-color);
}
label.muims_date .dayCalendarBlock .day-cell.disabled:hover,
label.muims_date .monthCalendarBlock .month-cell.disabled:hover,
label.muims_date .yearCalendarBlock .year-cell.disabled:hover,
label.muims_date .myCalendarBlock .my-month-cell.disabled:hover,
label.muims_date .myCalendarBlock .my-year-cell.disabled:hover,
label.muims_weekday .wdCalendarBlock .wd-cell.disabled:hover {
    background-color: var(--bg-color);
    outline: none;
}

/* Суббота (6) и Воскресенье (7) — слегка красноватые, т.к. обычно выходные */
label.muims_weekday .wdCalendarBlock .wd-cell.wd-weekend {
    color: #b3342e;
    border-color: rgba(179, 52, 46, 0.45);
    background-color: rgba(179, 52, 46, 0.08);
}
label.muims_weekday .wdCalendarBlock .wd-cell.wd-weekend:hover {
    background-color: rgba(179, 52, 46, 0.16);
}
label.muims_weekday .wdCalendarBlock .wd-cell.wd-weekend.selected {
    background-color: rgba(179, 52, 46, 0.18);
    outline-color: #b3342e;
}

/*
    Стандартные стили кнопок
*/
label.muims_submit,
label.muims_href {
    display: grid;
    grid-gap: var(--margin-l4);
    border: 1px solid transparent;
    margin: 0 var(--margin-l2);
    max-width: 350px;
}
label.muims_href {
    width: fit-content;
}
label.muims_submit button{
    display: grid;
    grid-gap: var(--margin-l4);
    text-align: center;
    align-content: center;
    align-items: center;
    grid-template-columns: var(--grid);
    background-color: var(--main-accent-color);
    color: var(--bg-color);
    border: 1px solid var(--input-border-color);
    transition: 0.3s;
}
label.muims_submit button:hover{
    background-color: var(--main-accent-color-medium);
    border-color: var(--main-accent-color);
}
label.muims_submit button:active{
    transform: scale(0.98);
}
label.muims_submit button svg{
    margin: var(--margin-l4);
}
label.muims_submit button span{
    margin: var(--margin-l4);
}

label.muims_href a{
    display: grid;
    grid-gap: var(--margin-l4);
    text-align: center;
    align-content: center;
    align-items: center;
    grid-template-columns: var(--grid);
    border-bottom: 3px dashed var(--link-color);
    color: var(--link-color);
    text-decoration: none;
    transition: 0.3s;
}
label.muims_href a:hover{
    border-bottom-style: dotted;
}
label.muims_href a:hover svg{
    transform: scale(0.8);
}
label.muims_href a:hover:has(svg) span {
    margin-left: -10%;
}
label.muims_href a:hover:not(:has(svg)) span {
    transform: scale(0.95);
}
label.muims_href a:active{
    background-color: var(--main-accent-color-light);
}
label.muims_href a svg{
    margin: var(--margin-l4);
    transition: 0.3s;
}
label.muims_href a span{
    margin: var(--margin-l4);
    transition: 0.3s;
}

label.muims_button {

}
label.muims_button button{
    border: 1px solid var(--input-border-color);
    outline: none;
    padding: var(--margin-l3);
    display: flex;
    align-items: center;
    background: var(--bg-color);
    color: var(--main-accent-color-active);
    transition: 0.3s;
}
label.muims_button button:hover{
    border-color: var(--main-accent-color-active);
}

/* Про выпадающие списки */
label.muims_select .selectBlock {
    position: relative;
    font-size: 1em;
}
label.muims_select .selectBlock input[type="search"] {
    border: 1px solid var(--input-border-color);
    outline: none;
    font-size: 1em;
    padding: var(--margin-l3);
    transition: 0.3s;
    display: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
}
label.muims_select .selectBlock.open input[type="search"] {
    display: block;
}
label.muims_select .selectBlock .selected {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color);
    display: flex;
    gap: var(--margin-l4);
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    min-height: calc(2 * var(--margin-l4) + 1.6em);
    align-content: center;
    padding: var(--margin-l4) 64px var(--margin-l4) var(--margin-l3);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
label.muims_select .selectBlock .selected:hover {
    border-color: var(--main-accent-color-medium);
}
label.muims_select .selectBlock .selected:focus-within {
    border-color: var(--main-accent-color);
    box-shadow: 0 0 0 3px var(--main-accent-color-light);
}
label.muims_select .selectBlock .selected span.sv {
    background: var(--bg-color);
    display: inline-block;
    padding: var(--margin-l4);
}
label.muims_select .selectBlock .selected span.n {
    display: block;
    color: var(--text-color-muted);
}
/* Стрелка-шеврон триггера (поворот на 180° при .open) */
label.muims_select .selectBlock .select-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-muted);
    pointer-events: none;
    transition: transform 0.25s ease;
}
label.muims_select .selectBlock .select-arrow svg {
    width: 18px;
    height: 18px;
}
label.muims_select .selectBlock.open .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}
label.muims_select .selectBlock .options {
    outline: none;
    font-size: 1em;
    transition: 0.3s;
    display: none;
    grid-gap: var(--margin-l3);
    background: transparent;
    max-height: 260px;
    overflow: auto;
}
label.muims_select .selectBlock.open .options {
    display: grid;
}
label.muims_select .selectBlock .options .option {
    display: grid;
    grid-template-columns: 1fr auto;
    background: transparent;
    align-items: center;
    grid-gap: 2px;
    padding: var(--margin-l3) var(--margin-l4);
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid var(--border-color);
}
label.muims_select .selectBlock .options .option:hover {
    background-color: var(--main-accent-color-light);
}
label.muims_select .selectBlock .options .option.selected {
    background-color: var(--main-accent-color-light);
}
label.muims_select .selectBlock .options .option.active {
    outline: 2px solid var(--main-accent-color-medium);
    outline-offset: -2px;
}
label.muims_select .selectBlock .options .option span.oTitle {
    font-size: 1em;
    display: block;
    margin: 0 var(--margin-l4);
    grid-column: 1;
    grid-row: 1;
}
label.muims_select .selectBlock .options .option p.oDescription {
    font-size: 0.8em;
    display: block;
    margin: 0 var(--margin-l4);
    color: var(--description-text-color);
    background: var(--description-background-color);
    grid-column: 1;
    grid-row: 2;
}


/* Избранное — лёгкий жёлтый фон */
label.muims_select .selectBlock .options .option.favorite {
    background-color: #fff8e8;
}
label.muims_select .selectBlock .options .option.favorite.selected {
    background-color: #fff0d0;
}

/* Кнопка-звёздочка */
label.muims_select .selectBlock .options .option .favorite-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    background: none;
    border: 1px solid var(--input-border-color);
    padding: 4px 6px;
    cursor: pointer;
    font-size: 0.7em;
    line-height: 1.4;
    color: var(--text-color-muted);
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
label.muims_select .selectBlock .options .option .favorite-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
label.muims_select .selectBlock .options .option .favorite-btn:hover {
    background: var(--color-favorite-bg);
    border-color: var(--color-favorite);
}
label.muims_select .selectBlock .options .option .favorite-btn.is-favorite {
    background: var(--color-favorite);
    border-color: var(--color-favorite);
    color: var(--text-color-inverse);
}
label.muims_select .selectBlock .options .option .favorite-btn.is-favorite svg {
    fill: currentColor;
}
label.muims_select .selectBlock .options .option .favorite-btn.is-favorite:hover {
    background: var(--color-warning);
    border-color: var(--color-warning);
}

/* Чипы выбранных значений */
label.muims_select .selectBlock .selected .selected-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--margin-l4);
    background: var(--main-accent-color);
    color: var(--text-color-inverse);
    padding: 2px var(--margin-l3);
    font-size: 0.85em;
    border-radius: 0px;
    user-select: none;
    white-space: nowrap;
}
label.muims_select .selectBlock .selected .selected-chip .remove-chip {
    cursor: pointer;
    font-weight: bold;
    margin-left: var(--margin-l4);
    padding: 0 2px;
    line-height: 1;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
}
label.muims_select .selectBlock .selected .selected-chip .remove-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0px;
}

/* Счётчик выбранных (абсолютно позиционирован справа у триггера) */
label.muims_select .selectBlock .selected .select-count {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 38px;
    font-size: 0.85em;
    color: var(--text-color-muted);
    white-space: nowrap;
    pointer-events: none;
}

/* Панель действий в шапке раскрытого списка */
label.muims_select .selectBlock .select-toolbar {
    display: none;
    flex-wrap: wrap;
    gap: var(--margin-l3);
}
label.muims_select .selectBlock.open .select-toolbar {
    display: flex;
}
label.muims_select .selectBlock .select-toolbar button {
    cursor: pointer;
    background: var(--bg-color-card);
    border: 1px solid var(--input-border-color);
    color: var(--text-color-secondary);
    padding: var(--margin-l4) var(--margin-l3);
    font-family: inherit;
    font-size: 0.85em;
    line-height: 1.4;
    transition: background-color 0.2s, border-color 0.2s;
}
label.muims_select .selectBlock .select-toolbar button:hover {
    background: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
label.muims_select .selectBlock .select-toolbar .action-only-fav {
    color: var(--color-favorite);
    border-color: var(--color-favorite);
}
label.muims_select .selectBlock .select-toolbar .action-only-fav:hover {
    background: var(--color-favorite-bg);
}

/* Попап раскрытого списка (position: fixed — координаты вычисляет JS) */
label.muims_select .selectBlock .select-pop {
    position: fixed;
    z-index: 1500;
    display: none;
    background: var(--bg-color-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: var(--margin-l3);
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
}
label.muims_select .selectBlock.open .select-pop {
    display: flex;
    flex-direction: column;
    gap: var(--margin-l3);
}

/* Опции при достижении лимита выбора: некликабельны и полупрозрачны */
label.muims_select .selectBlock .options .option.limit-reached {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Стиль для метки на поле */
label[class^="muims_"] span.indF {
    background: var(--border-color);
    padding: 3px 5px;
    margin: 2px;
    font-size: 80%;
}




/*
    Стандартные стили формы
*/
form.muims_form {
    display: grid;
    grid-gap: 0.2em;
    position: relative;
    border: 1px solid transparent;
    margin: var(--margin-l1);
    height: fit-content;
}
form.muims_form h2 {
    margin: 0;
    text-align: center;
}

/*
    Индикатор автосохранения онлайн-форм (пункт 9 «Доведение автосохранения
    до боевого использования»): добавляется initOnlineForms() в конец формы,
    состояния is-saving / is-saved / is-warning / is-error.
*/
.entry-autosave-status {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.4em 0.7em;
    border-radius: 6px;
    margin: 0.4em 0 0;
    min-height: 1.7em;
    transition: opacity 0.4s ease;
    border: 1px solid transparent;
}
.entry-autosave-status.is-saving {
    color: var(--main-accent-color);
    background: var(--main-accent-color-light);
    border-color: var(--main-accent-color-medium);
}
.entry-autosave-status.is-saved {
    color: #1a7f37;
    background: #e6f4ea;
    border-color: #b7dfc0;
}
.entry-autosave-status.is-warning {
    color: #9a6700;
    background: #fff8c5;
    border-color: #f0dc92;
}
.entry-autosave-status.is-error {
    color: #b42318;
    background: #fdeceb;
    border-color: #f3c2bd;
}
.entry-autosave-status.fade {
    opacity: 0;
}

/*
    Стандартные стили блока
*/
.muims_block,
.muims_block_warning,
.muims_block_info,
.muims_block_error {
    display: grid;
    grid-gap: var(--margin-l4);
    border: 1px solid var(--border-color);
    margin: var(--margin-l2);
    background-color: var(--bg-color-top);
}
form .muims_block,
form .muims_block_warning,
form .muims_block_info,
form .muims_block_error {
    border: 1px solid transparent;
    margin: 0 var(--margin-l2);
}
.muims_block h2.std,
.muims_block_warning h2.std,
.muims_block_info h2.std,
.muims_block_error h2.std {
    margin: var(--margin-l4);
    text-align: left;
}
.muims_block p.std,
.muims_block_warning p.std,
.muims_block_info p.std,
.muims_block_error p.std {
    margin: var(--margin-l4);
    text-align: left;
}
.muims_block div.ftr,
.muims_block_warning div.ftr,
.muims_block_info div.ftr,
.muims_block_error div.ftr {
    display: flex;
    justify-content: flex-end;
    margin: var(--margin-l4);
    text-align: left;
}

.muims_size_inline {
    display: flex;
}
.muims_size_block {
    display: grid;
}
.muims_size_box {
    display: grid;
    aspect-ratio: 1/1;
}
.muims_size_box1_2 {
    display: grid;
    aspect-ratio: 1/2;
}
.muims_size_box2_1 {
    display: grid;
    aspect-ratio: 2/1;
}

.muims_block h1:not([class]) {
    margin: var(--margin-l1);
    border-bottom: 1px solid var(--border-color);
}
.muims_block h2:not([class]) {
    margin: var(--margin-l1);
    border-bottom: 1px solid var(--border-color);
}
.muims_block h3:not([class]) {
    margin: 0;
}
.muims_block h4:not([class]) {

}
.muims_block h5:not([class]) {

}
.muims_block h6:not([class]) {

}

.muims_block_warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}
.muims_block_info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info);
}
.muims_block_error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.muims_block h2.std {
    border-bottom: 1px solid var(--text-color);
    padding-bottom: var(--margin-l4);
}
.muims_block_warning h2.std {
    border-bottom: 1px solid var(--color-warning);
    padding-bottom: var(--margin-l4);
}
.muims_block_info h2.std {
    border-bottom: 1px solid var(--color-info);
    padding-bottom: var(--margin-l4);
}
.muims_block_error h2.std {
    border-bottom: 1px solid var(--color-error);
    padding-bottom: var(--margin-l4);
}

/* ==========================================================================
   ЖУРНАЛ (§6.20) — классы getPrintJournal / getJournalParts
   Внешний вид по макету _планы/примеры/deepseek_html_20260912_4bdc4d.html:
   липкая шапка, закрепляемые столбцы, мультисортировка, попапы фильтров.
   ========================================================================== */

:root{
    --row-bg:#ffffff;
    --row-bg-alt:#f7f8fc;
    --row-bg-hover:#eef1fa;
    --head-bg:#eef1f7;
    --border-light:#e6e7f0;
    --cell-lh:1.4em;
    --pin-shadow:8px 0 12px -8px rgba(45,58,140,.55);
    --pin-shadow-strong:8px 0 14px -7px rgba(45,58,140,.7);
}

.journal-box {
    display: grid;
    gap: var(--margin-l2);
    margin: var(--margin-l2) 0;
}

/* ---------- Панель функций ---------- */
.journal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin-l2);
    flex-wrap: wrap;
}

.journal-toolbar-text {
    min-width: 0;
}

.journal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    display: inline;
}

.journal-description {
    margin: var(--margin-l4) 0 0;
    color: var(--text-color-secondary);
    font-size: 13px;
}

.journal-counter {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color-muted);
    margin-left: var(--margin-l2);
    display: inline;
}

.journal-counter b {
    color: var(--text-color);
    font-weight: 600;
}

.journal-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin-l3);
    align-items: center;
}

/* ---------- Таблица ---------- */
.journal-table-wrap {
    position: relative;
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--border-color);
    background: var(--row-bg);
}

table.journal {
    border-collapse: separate;
    border-spacing: 0;
    /*table-layout: fixed;*/
    table-layout: auto;
    width: 100%;
    min-width: 560px;
}

table.journal thead th {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--head-bg);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 0;
    text-align: left;
    vertical-align: middle;
    transition: box-shadow .15s, border-color .15s;
}

table.journal thead th:last-child { border-right: none; }

.th-inner { padding: 7px 8px; }

.th-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.th-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-tools { display: flex; gap: 1px; flex: 0 0 auto; }

.th-btn {
    border: none;
    background: transparent;
    color: var(--text-color-muted);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 3px 4px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.th-btn svg { width: 13px; height: 13px; }

.th-btn:hover { background: var(--main-accent-color-light); color: var(--main-accent-color); }
.th-btn.active { background: var(--main-accent-color-light); color: var(--main-accent-color); font-weight: 700; }

.sort-ind { font-size: 11px; }
.sort-prio {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    background: transparent;
    color: var(--main-accent-color);
    min-width: 12px;
    text-align: center;
    letter-spacing: 0;
}

/* ---------- Ячейки ---------- */
table.journal tbody td {
    background: var(--row-bg);
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    padding: 7px 9px;
    font-size: 13px;
    color: var(--text-color);
    vertical-align: middle;
    transition: background-color .1s;
}

table.journal tbody td:last-child { border-right: none; }

table.journal tbody tr:nth-child(even) td { background: var(--row-bg-alt); }
table.journal tbody tr:hover td { background: var(--row-bg-hover); }

/* ---------- Sticky-столбцы (§6.20) ---------- */
.is-stuck { position: sticky; }
table.journal thead th.is-stuck { z-index: 35; }
table.journal tbody td.is-stuck { z-index: 12; }

table.journal thead th.is-stuck {
    border-bottom-color: var(--main-accent-color);
    box-shadow: 0 4px 6px -4px rgba(45,58,140,.35);
}

.is-stuck-last { box-shadow: var(--pin-shadow); }
table.journal thead th.is-stuck.is-stuck-last {
    box-shadow: 0 4px 6px -4px rgba(45,58,140,.35), var(--pin-shadow-strong);
}

/* ---------- № и действия ---------- */
table.journal th.num,
table.journal td.num {
    width: 44px;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-color-secondary);
}

table.journal th.actions,
table.journal td.actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    background: var(--row-bg);
}

table.journal tbody tr:nth-child(even) td.actions { background: var(--row-bg-alt); }
table.journal tbody tr:hover td.actions { background: var(--row-bg-hover); }

/* ---------- Пустая / ошибка ---------- */
table.journal td.journal-empty {
    text-align: center;
    color: var(--text-color-muted);
    padding: var(--margin-l2);
}

.journal-error {
    color: var(--color-error);
    padding: var(--margin-l2);
    border: 1px solid var(--color-error-bg);
    background: var(--color-error-bg);
}

/* ---------- Пагинация ---------- */
.journal-pagination {
    display: flex;
    justify-content: center;
    padding: var(--margin-l2) 0;
}

button.journal-more {
    border: 1px solid var(--main-accent-color-medium);
    background: var(--row-bg);
    color: var(--main-accent-color);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color .15s;
}

button.journal-more:hover { background: var(--main-accent-color-light); }

/* ---------- Типы отображения ячеек (§6.11) ---------- */
.cell-single {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cell-multi {
    --lines: var(--multi-lines, 2);
    --lh: var(--cell-lh);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    line-height: var(--lh);
    max-height: calc(var(--lh) * var(--lines));
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}

.cell-multi--scroll:hover {
    display: block;
    -webkit-line-clamp: unset;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cell-multi--scroll:hover::-webkit-scrollbar { width: 8px; }
.cell-multi--scroll:hover::-webkit-scrollbar-thumb { background: var(--border-color); }
.cell-multi--scroll:hover::-webkit-scrollbar-track { background: var(--main-accent-color-lighter); }

.cell-link {
    color: var(--link-color);
    text-decoration: none;
}

.cell-link:hover {
    color: var(--link-color-hover);
    text-decoration: underline;
}

.cell-bool {
    display: inline-block;
    white-space: nowrap;
}

.cell-json {
    color: var(--text-color-muted);
    white-space: nowrap;
}

/* ---------- Бейджи / прогресс ---------- */
.badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--main-accent-color-light);
    color: var(--main-accent-color);
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }

/* ---------- Полномочия: компактный просмотр (access-view) ---------- */
.access-view { display: flex; flex-direction: column; gap: 12px; }
.access-view-module {
    border: 1px solid var(--border-light);
    padding: 10px 12px;
    background: var(--row-bg);
    position: relative;
}
.access-view-module::before {
    content: '';
    width: 2px;
    display: block;
    position: absolute;
    height: calc(100% - 10px - 10px);
    background: var(--input-border-color-focus);
    margin-left: -5px;
}
.access-view-module-title {
    font-weight: 700;
    color: var(--main-accent-color);
    margin-bottom: 2px;
}
.access-view-module .description {
    margin: 0 0 6px;
    font-size: 0.85em;
}
.access-view-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    margin-left: 5px;
}
.access-view-section {
    display: block;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    position: relative;
}
.access-view-section::before {
    content: '';
    width: 5px;
    top: 5px;
    display: block;
    position: absolute;
    height: 2px;
    background: var(--input-border-color-focus);
    margin-left: -10px;
}
.access-view-section-title { font-weight: 600; }
.access-view-section-desc { color: var(--text-color-muted); font-size: 0.85em; }
.access-view-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.access-view-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11px;
    white-space: nowrap;
    background: var(--color-info-bg);
    color: var(--color-info);
}

.progress-wrap { display: flex; align-items: center; gap: 7px; }
.progress {
    flex: 1 1 auto;
    height: 6px;
    min-width: 36px;
    background: var(--main-accent-color-lighter);
    border: 1px solid var(--border-light);
    overflow: hidden;
}
.progress-bar { height: 100%; background: var(--main-accent-color-medium); }
.progress-bar.is-low { background: var(--color-error); }
.progress-bar.is-mid { background: var(--color-warning); }
.progress-bar.is-high { background: var(--color-success); }
.progress-val { font-size: 11px; font-weight: 700; color: var(--text-color-secondary); min-width: 32px; text-align: right; }

/* ---------- Экшены строк (§6.11/§6.18) ---------- */
.row-actions { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }

a.act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--text-color-muted);
    font-family: inherit;
    font-size: 13px;
    padding: 2px 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

a.act-btn svg { width: 16px; height: 16px; }

a.act-btn:hover { background: var(--main-accent-color-light); color: var(--main-accent-color); }
a.act-btn.del:hover { background: var(--color-error-bg); color: var(--color-error); }

.row-num {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color-secondary);
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО «Фильтры и столбцы» (§6.13, §6.15) и попап фильтра
   ========================================================================== */

body.modal-open { overflow: hidden; }

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 46, .45);
    padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal {
    background: var(--bg-color-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin-l2);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.modal-title { margin: 0; font-size: 16px; font-weight: 600; }

.modal-close,
.popover-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-color-muted);
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
}

.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover, .popover-close:hover { color: var(--color-error); background: var(--color-error-bg); }

.modal-body { padding: 18px 20px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-light); }

.modal-section + .modal-section { margin-top: 22px; }

.modal-section h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-color-secondary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-section h4 .hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11px;
    color: var(--text-color-muted);
    margin-left: auto;
}

/* ---------- Столбцы ---------- */
.cols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px 16px;
}

.chk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    font-size: 13px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color .15s, border-color .15s;
}

.chk:hover { background: var(--main-accent-color-light); border-left-color: var(--main-accent-color-medium); }
.chk input { accent-color: var(--main-accent-color); }

/* ---------- Сортировка ---------- */
.sort-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border-light);
    background: var(--bg-color);
    padding: 6px;
    min-height: 44px;
}

.sort-empty { font-size: 12px; color: var(--text-color-muted); padding: 8px; text-align: center; }

.sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--bg-color-card);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--main-accent-color);
    font-size: 13px;
}

.sort-item-prio {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    line-height: 20px;
    text-align: center;
    background: var(--main-accent-color);
    color: var(--text-color-inverse);
    font-size: 11px;
    font-weight: 700;
}

.sort-item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sort-item select {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color-card);
    font-family: inherit;
    font-size: 12px;
    padding: 4px 6px;
    outline: none;
    cursor: pointer;
}

.sort-item select:focus { border-color: var(--main-accent-color); }

.sort-item .sib {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color-card);
    color: var(--text-color-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.sort-item .sib:hover:not(:disabled) { background: var(--main-accent-color-light); color: var(--main-accent-color); border-color: var(--main-accent-color-medium); }
.sort-item .sib.remove:hover { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }

.sort-add {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sort-add select {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color-card);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 8px;
    outline: none;
    cursor: pointer;
    min-width: 140px;
}

.sort-add select:focus { border-color: var(--main-accent-color); }

.btn-add {
    border: 1px solid var(--main-accent-color);
    background: var(--main-accent-color);
    color: var(--text-color-inverse);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color .15s;
}

.btn-add:hover { background: var(--main-accent-color-hover); }

/* ---------- Фильтры ---------- */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 18px;
}

.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-color-secondary);
}

.field input,
.field select {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
    padding: 7px 9px;
    outline: none;
    transition: border-color .2s, background-color .2s;
}

.field input:hover, .field select:hover { background: var(--main-accent-color-light); }
.field input:focus, .field select:focus { border-color: var(--main-accent-color); background: var(--main-accent-color-light); }

.field--limit { border-left: 3px solid var(--main-accent-color); padding-left: 12px; }

/* ---------- JSON-превью запроса ---------- */
.query-preview {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
    background: #1a1a2e;
    color: #e8eaf7;
    padding: 14px 16px;
    overflow: auto;
    max-height: 260px;
    white-space: pre;
    border: 1px solid #162052;
    margin: 0;
}

/* ---------- Попап фильтра по колонке (§6.13) ---------- */
.filter-popover {
    position: fixed;
    z-index: 2000;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: var(--bg-color-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 10px;
    display: none;
}

.filter-popover.open { display: block; }

.filter-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.filter-popover-head b {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-color-secondary);
}

.popover-close { font-size: 14px; }

.fp-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--input-border-color);
    background: var(--bg-color);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 8px;
    outline: none;
    transition: border-color .15s, background-color .15s;
    margin-bottom: 8px;
}

.fp-search:hover { background: var(--main-accent-color-light); }
.fp-search:focus { border-color: var(--main-accent-color); background: var(--main-accent-color-light); }

.fp-list {
    max-height: 190px;
    overflow: auto;
    border: 1px solid var(--border-light);
    padding: 4px;
    background: var(--bg-color);
}

.fp-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s;
    border-left: 3px solid transparent;
}

.fp-opt:hover { background: var(--main-accent-color-light); border-left-color: var(--main-accent-color-medium); }
.fp-opt input { accent-color: var(--main-accent-color); }
.fp-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.fp-reset,
.fp-apply {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color-card);
    color: var(--text-color-secondary);
    font-family: inherit;
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background-color .15s;
}

.fp-reset:hover { background: var(--main-accent-color-light); border-color: var(--main-accent-color-medium); }

.fp-apply {
    border-color: var(--main-accent-color);
    background: var(--main-accent-color);
    color: var(--text-color-inverse);
    font-weight: 600;
}

.fp-apply:hover { background: var(--main-accent-color-hover); }

/* ---------- Кнопки модалки ---------- */
.btn-primary {
    border: 1px solid var(--main-accent-color);
    background: var(--main-accent-color);
    color: var(--text-color-inverse);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color .15s;
}

.btn-primary:hover { background: var(--main-accent-color-hover); }

.btn-ghost.muims_button label,
label.muims_button.btn-ghost {
    background: var(--bg-color-top);
    color: var(--main-accent-color);
    border-color: var(--main-accent-color-medium);
}

/* ---------- Выпадающий список: вариант свободного ввода (select-any) ---------- */
.selectBlock .option.custom {
    border-left: 3px solid var(--main-accent-color);
    font-style: italic;
    color: var(--main-accent-color);
}

/* ---------- Поля модалки, построенные через getFields() ---------- */
.cols-grid label.chk-modal {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    font-size: 13px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color .15s, border-color .15s;
}

.cols-grid label.chk-modal:hover { background: var(--main-accent-color-light); border-left-color: var(--main-accent-color-medium); }
.cols-grid label.chk-modal input { accent-color: var(--main-accent-color); }

.filters-grid .muims_text,
.filters-grid .muims_select,
.filters-grid .muims_checkbox {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filters-grid .muims_text > span,
.filters-grid .muims_select > span,
.filters-grid .muims_checkbox > span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-color-secondary);
}

.filters-grid .muims_text input,
.filters-grid .muims_checkbox input {
    border: 1px solid var(--input-border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
    padding: 7px 9px;
    outline: none;
    transition: border-color .2s, background-color .2s;
}

.filters-grid .muims_text input:hover { background: var(--main-accent-color-light); }
.filters-grid .muims_text input:focus { border-color: var(--main-accent-color); background: var(--main-accent-color-light); }

.filters-grid .field--limit .muims_text input,
.filters-grid input[name="jlimit"] {
    border-left: 3px solid var(--main-accent-color);
}

/* ---------- Поле «Запрос» (request-text) под спойлером ---------- */
.request-spoiler { margin: 0; }
.request-spoiler > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-secondary);
    user-select: none;
}
.request-spoiler > summary:hover { color: var(--main-accent-color); }
.request-spoiler[open] > summary { margin-bottom: 8px; }

@media (max-width: 700px){
    .filters-grid { grid-template-columns: 1fr; }
    .cols-grid { grid-template-columns: 1fr; }
    .journal-toolbar { align-items: flex-start; }
}


/*
    Карточки разделов
*/
.pathCards {
    display: grid;
    grid-gap: var(--margin-l3);
    margin: var(--margin-l1);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.pathCards label.card {
    display: grid;
    grid-gap: var(--margin-l4);
    border: 1px solid var(--border-light);
    background-color: var(--bg-color);
}
.pathCards label.card a.title {
    margin: var(--margin-l4) var(--margin-l2);
    color: var(--link-color);
    font-size: 1.2em;
}
.pathCards label.card p.description {

}
.pathCards label.card a.link {
    margin: var(--margin-l4) var(--margin-l2);
    color: var(--link-color);
}

/* ==========================================================================
   МУЛЬТИ-СЕКЦИОННЫЕ ENTRY-ФОРМЫ (план-gibkie-polya-entry, §2.3)
   .entry-section — секция формы (fieldset+legend);
   .entry-group — группа полей внутри секции main;
   .entry-list — поле-список (В2): строки + «Добавить»/«Удалить»;
   .entry-field[data-show-if] — conditional (В6), скрывается классом
   .entry-conditional-hidden; .entry-relation-preview — превью выбранной записи (В1).
   ========================================================================== */

.entry-section {
    display: grid;
    grid-gap: var(--margin-l2);
    border: 1px solid var(--border-light);
    padding: var(--margin-l3);
    margin: var(--margin-l2) 0;
    background-color: var(--bg-color);
    min-width: 0;
}
.entry-section legend {
    padding: 0 var(--margin-l2);
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.entry-section-cols-2 .entry-group,
.entry-section-cols-2 > .entry-field {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: var(--margin-l2);
}
.entry-group {
    display: grid;
    grid-gap: var(--margin-l2);
    border: 1px dashed var(--border-light);
    border-radius: 0px;
    padding: var(--margin-l3);
}
.entry-group-title {
    font-weight: 600;
    font-size: 0.95em;
    opacity: 0.85;
}

/* Поле-список (В2): jsonb-массив строк */
.entry-list {
    display: grid;
    grid-gap: var(--margin-l2);
    padding: var(--margin-l3);
    border: 1px solid var(--border-light);
    border-radius: 0px;
    background-color: var(--bg-color-top, var(--bg-color));
}
.entry-list-title {
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.entry-list-rows {
    display: grid;
    grid-gap: var(--margin-l2);
}
.entry-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: var(--margin-l2);
    align-items: center;
}
.entry-list-row input[data-entry-item] {
    border: 1px solid var(--input-border-color);
    border-radius: 0px;
    padding: 0.5em 0.7em;
    background: var(--bg-color);
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
}
.entry-list-row input[data-entry-item]:focus {
    outline: none;
    border-color: var(--main-accent-color-medium);
}
.entry-list-remove {
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    border-radius: 0px;
    background: transparent;
    color: var(--text-color);
    width: 32px;
    height: 32px;
    font-size: 1.1em;
    line-height: 1;
}
.entry-list-remove:hover {
    border-color: var(--color-danger, #c0392b);
    color: var(--color-danger, #c0392b);
}
.entry-list-add {
    justify-self: start;
    cursor: pointer;
    border: 1px dashed var(--input-border-color);
    border-radius: 0px;
    background: transparent;
    color: var(--main-accent-color, inherit);
    padding: 0.35em 0.9em;
}
.entry-list-add:hover {
    border-color: var(--main-accent-color-medium);
    background: var(--main-accent-color-light);
}
.entry-list-template {
    display: none;
}

/* ==========================================================================
   КОНТЕЙНЕРЫ getFields() (план-встраивание-групп-полей-getfields, Задача 2)
   .fgroup — повторяемая группа; .muims_if_then — условные группы;
   .muims_cascade — каскадные уровни. Стили консистентны с .entry-list (В2).
   ========================================================================== */

/* --- Повторяемая группа полей (group) --- */
.fgroup {
    display: grid;
    grid-gap: var(--margin-l2);
    padding: var(--margin-l3);
    border: 1px solid var(--border-light);
    border-radius: 0px;
    background-color: var(--bg-color-top, var(--bg-color));
    margin: var(--margin-l2) 0;
    min-width: 0;
}
.fgroup-title {
    padding: 0 var(--margin-l2);
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.fgroup-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: var(--margin-l2);
    align-items: start;
    border: 1px dashed var(--border-light);
    border-radius: 0px;
    padding: var(--margin-l3);
    background: var(--bg-color);
}
.fgroup-fields {
    display: grid;
    grid-gap: var(--margin-l2);
    min-width: 0;
}
/* Раскладка полей строки в N колонок (columns) */
.fgroup-cols-2 .fgroup-fields,
.fgroup-cols-3 .fgroup-fields,
.fgroup-cols-4 .fgroup-fields {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.fgroup-remove {
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    border-radius: 0px;
    background: transparent;
    color: var(--text-color);
    width: 32px;
    height: 32px;
    font-size: 1.1em;
    line-height: 1;
    justify-self: end;
}
.fgroup-remove:hover {
    border-color: var(--color-danger, #c0392b);
    color: var(--color-danger, #c0392b);
}
.fgroup-add {
    justify-self: start;
    cursor: pointer;
    border: 1px dashed var(--input-border-color);
    border-radius: 0px;
    background: transparent;
    color: var(--main-accent-color, inherit);
    padding: 0.35em 0.9em;
}
.fgroup-add:hover {
    border-color: var(--main-accent-color-medium);
    background: var(--main-accent-color-light);
}
.fgroup-template {
    display: none;
}

/* --- Условные группы (if-then) --- */
.muims_if_then {
    display: grid;
    grid-gap: var(--margin-l2);
    margin: var(--margin-l2) 0;
    min-width: 0;
}
.ifthen-title {
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.ifthen-groups {
    display: grid;
    grid-gap: var(--margin-l2);
}
.ifthen-group {
    display: grid;
    grid-gap: var(--margin-l2);
    border: 1px dashed var(--border-light);
    border-radius: 0px;
    padding: var(--margin-l3);
    background: var(--bg-color);
    min-width: 0;
}
.ifthen-group-title {
    font-weight: 600;
    font-size: 0.95em;
    opacity: 0.85;
}
.ifthen-hidden {
    display: none !important;
}

/* --- Каскадные уровни (cascade) --- */
.muims_cascade {
    display: grid;
    grid-gap: var(--margin-l2);
    margin: var(--margin-l2) 0;
    min-width: 0;
}
.cascade-title {
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.cascade-levels {
    display: grid;
    grid-gap: var(--margin-l2);
}
.cascade-select {
    min-width: 0;
}

/* --- Полномочия (access) --- */
.muims_access {
    display: grid;
    grid-gap: var(--margin-l2);
    margin: var(--margin-l2) 0;
    min-width: 0;
}
.access-title {
    font-weight: 600;
    color: var(--main-accent-color, inherit);
}
.access-sections {
    display: grid;
    grid-gap: var(--margin-l2);
}
/* Пустой выбор модуля: секции скрыты целиком (JS добавляет класс) */
.access-sections.access-empty {
    display: none;
}
.access-module {
    display: grid;
    grid-gap: var(--margin-l2);
    border: 1px dashed var(--border-light);
    border-radius: 0px;
    padding: var(--margin-l3);
    background: var(--bg-color);
    min-width: 0;
    width: calc(100% + 26px);
}
.access-module-title {
    font-weight: 600;
    font-size: 0.95em;
    opacity: 0.85;
}
.access-module-desc {
    margin: 0;
}
.access-section-row {
    display: grid;
    grid-gap: var(--margin-l3);
    min-width: 0;
}
.access-section-desc {
    margin: 0;
}
.access-hidden {
    display: none !important;
}

/* Conditional (В6): скрытое условное поле */
.entry-field.entry-conditional-hidden {
    display: none !important;
}

/* Превью выбранной записи relation-секции (В1) */
.entry-relation-preview {
    margin-top: var(--margin-l2);
    padding: var(--margin-l2);
    border-left: 3px solid var(--main-accent-color-medium);
    background: var(--bg-color-top, var(--bg-color));
    font-size: 0.92em;
    opacity: 0.9;
}


/*
    Готовлю стили для карточки пользователя, но возможно будут использоваться и в других местах. Названия буду использовать нейтральные
*/
.entryData-card {
    display: grid;
    grid-gap: var(--margin-l2);
    padding: var(--margin-l3);
    border: 1px solid var(--border-light);
    background-color: var(--bg-color-top, var(--bg-color));
}

/* ==========================================================================
   КОНТАКТЫ И ПРОИЗВОЛЬНЫЕ ПОЛЯ ПОЛЬЗОВАТЕЛЯ
   (план-контакты-и-информация-пользователей, §5.3)
   Редакторы .ucontacts / .uinfo (entry/edit.php) и отображение
   .users-contact-* / .users-info-* (entry/view.php).
   Стили консистентны с .entry-list (В2) и .fgroup (контейнеры getFields).
   ========================================================================== */

/* --- Редактор контактов (edit) --- */
.ucontacts,
.uinfo {
    display: grid;
    grid-gap: var(--margin-l2);
    padding: var(--margin-l3);
    border: 1px solid var(--border-light);
    margin: 0 var(--margin-l2);
    background-color: var(--bg-color-top, var(--bg-color));
}
.ucontacts-rows,
.uinfo-rows {
    display: grid;
    grid-gap: var(--margin-l2);
}
/* Строка контакта: select типа | title | value | country | удалить */
.ucontacts-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.9fr) minmax(150px, 1fr) minmax(160px, 1.4fr) minmax(70px, 0.5fr) auto;
    grid-gap: var(--margin-l2);
    align-items: center;
}
/* Строка произвольного поля: name | value | удалить */
.uinfo-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) auto;
    grid-gap: var(--margin-l2);
    align-items: center;
}
.ucontacts-row select,
.ucontacts-row input,
.uinfo-row input {
    border: 1px solid var(--input-border-color);
    border-radius: 0px;
    padding: 0.5em 0.7em;
    background: var(--bg-color);
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
}
.ucontacts-row select:focus,
.ucontacts-row input:focus,
.uinfo-row input:focus {
    outline: none;
    border-color: var(--main-accent-color-medium);
}
/* Поле country видно ТОЛЬКО при type=phone (toggle из functions.js) */
.ucontacts-country-hidden {
    display: none;
}

/* --- Просмотр (view) --- */
.users-contact-item,
.users-info-item {
    display: block;
    padding: 2px 0;
}
.users-contact-type {
    color: var(--text-color-muted, inherit);
    font-size: 0.92em;
    font-style: italic;
}
.users-empty {
    color: var(--text-color-muted, var(--text-color));
    font-style: italic;
    opacity: 0.8;
}
/* --- Расширение 19.10, разд. 1 «Безопасность» --- */
/* Политики паролей (Р-7): подсветка полей и список требований */
input.policy-invalid {
    border-color: #d33 !important;
    box-shadow: 0 0 0 1px rgba(221, 51, 51, 0.25);
}
input.policy-valid {
    border-color: #2a7d2a !important;
    box-shadow: 0 0 0 1px rgba(42, 125, 42, 0.2);
}
.policy-requirements {
    font-size: 0.9em;
}
.policy-requirements.policy-invalid-text {
    color: #c0392b;
}
.policy-hint {
    font-size: 0.9em;
}

/* Страница выбора пользователя (/muims_auth/select/, Р-5) */
.auth-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.auth-select-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--main-accent-color-medium, #ccc);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    background: var(--block-bg, #fff);
    transition: border-color 0.15s, background 0.15s;
}
.auth-select-card:hover {
    border-color: var(--main-accent-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}
.auth-select-name {
    font-weight: 600;
}
.auth-select-org {
    font-size: 0.9em;
    color: var(--text-color-muted, inherit);
}

/* ===== Структура организации (Этап 4 Расширения 19.10): SVG-схема (Р-22) ===== */
.org-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.org-mode-switch { display: inline-flex; gap: 4px; }
.org-mode-btn { cursor: pointer; }
.org-view { overflow-x: auto; }
.org-svg { width: 100%; height: auto; max-width: 100%; min-height: 220px; }
.org-svg-bg { fill: var(--block-bg, #fff); }
.org-edge { fill: none; stroke: var(--text-color-muted, #94a3b8); stroke-width: 1.5; }
.org-arrow-head { fill: var(--text-color-muted, #94a3b8); }
.org-node { cursor: pointer; }
.org-node-rect { fill: var(--block-bg, #fff); stroke: var(--main-accent-color, #3b82f6); stroke-width: 1.5; }
.org-node:hover .org-node-rect { fill: rgba(59, 130, 246, 0.08); }
.org-node-inactive .org-node-rect { stroke: var(--text-color-muted, #94a3b8); opacity: 0.65; }
.org-node-title { fill: var(--text-color, #1f2937); font-size: 13px; font-weight: 600; }
.org-node-sub { fill: var(--text-color-muted, #64748b); font-size: 11px; }
.org-node-meta { fill: var(--text-color-muted, #94a3b8); font-size: 10px; }
.org-toggle { cursor: pointer; }
.org-toggle-circle { fill: var(--main-accent-color, #3b82f6); }
.org-toggle-text { fill: #fff; font-size: 12px; font-weight: 700; }

/* =====================================================================
   Единый дизайн: кнопки getButtons() — правила §7 (задача #29 / пункт 12)
   Варианты: btn-primary (целевая), btn-white/btn-ghost (нейтральные),
   btn-danger (опасная), вложенные children[] -> .btn-group.
   Каскадные уточнения поверх прежних label.muims_* (без их переопределения).
   ===================================================================== */
label.muims_submit.btn-primary,
label.muims_button.btn-primary,
label.muims_link.btn-primary,
label.muims_href.btn-primary,
label.muims_submit.btn-white,
label.muims_button.btn-white,
label.muims_link.btn-white,
label.muims_href.btn-white,
label.muims_submit.btn-ghost,
label.muims_button.btn-ghost,
label.muims_link.btn-ghost,
label.muims_href.btn-ghost,
label.muims_submit.btn-danger,
label.muims_button.btn-danger,
label.muims_link.btn-danger,
label.muims_href.btn-danger {
    display: inline-flex;
    margin: 0;
    max-width: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: auto;
}

label.muims_submit.btn-primary button,
label.muims_submit.btn-white button,
label.muims_submit.btn-ghost button,
label.muims_submit.btn-danger button,
label.muims_button.btn-primary button,
label.muims_button.btn-white button,
label.muims_button.btn-ghost button,
label.muims_button.btn-danger button,
label.muims_link.btn-primary button,
label.muims_link.btn-white button,
label.muims_link.btn-ghost button,
label.muims_link.btn-danger button,
label.muims_href.btn-primary a,
label.muims_href.btn-white a,
label.muims_href.btn-ghost a,
label.muims_href.btn-danger a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--main-font, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

label.muims_submit.btn-primary button svg,
label.muims_button.btn-primary button svg,
label.muims_link.btn-primary button svg,
label.muims_href.btn-primary a svg,
label.muims_submit.btn-white button svg,
label.muims_button.btn-white button svg,
label.muims_link.btn-white button svg,
label.muims_href.btn-white a svg,
label.muims_submit.btn-ghost button svg,
label.muims_button.btn-ghost button svg,
label.muims_link.btn-ghost button svg,
label.muims_href.btn-ghost a svg,
label.muims_submit.btn-danger button svg,
label.muims_button.btn-danger button svg,
label.muims_link.btn-danger button svg,
label.muims_href.btn-danger a svg {
    width: 14px;
    height: 14px;
    flex: none;
}

label.muims_submit.btn-primary button svg + span,
label.muims_button.btn-primary button svg + span,
label.muims_link.btn-primary button svg + span,
label.muims_href.btn-primary a svg + span,
label.muims_submit.btn-white button svg + span,
label.muims_button.btn-white button svg + span,
label.muims_link.btn-white button svg + span,
label.muims_href.btn-white a svg + span,
label.muims_submit.btn-ghost button svg + span,
label.muims_button.btn-ghost button svg + span,
label.muims_link.btn-ghost button svg + span,
label.muims_href.btn-ghost a svg + span,
label.muims_submit.btn-danger button svg + span,
label.muims_button.btn-danger button svg + span,
label.muims_link.btn-danger button svg + span,
label.muims_href.btn-danger a svg + span {
    margin: 0;
}

/* --- btn-primary: целевое действие формы (фон акцент, белый текст) --- */
label.muims_submit.btn-primary button,
label.muims_button.btn-primary button,
label.muims_link.btn-primary button,
label.muims_href.btn-primary a {
    background: var(--main-accent-color);
    border-color: var(--main-accent-color);
    color: var(--text-color-inverse);
}
label.muims_submit.btn-primary button:hover,
label.muims_button.btn-primary button:hover,
label.muims_link.btn-primary button:hover,
label.muims_href.btn-primary a:hover {
    background: var(--main-accent-color-hover);
    border-color: var(--main-accent-color-hover);
}
label.muims_submit.btn-primary button:active,
label.muims_button.btn-primary button:active,
label.muims_link.btn-primary button:active,
label.muims_href.btn-primary a:active {
    background: var(--main-accent-color-active);
    border-color: var(--main-accent-color-active);
}

/* --- btn-white: средняя нейтральность (белый фон, серый текст, тонкая рамка) --- */
label.muims_submit.btn-white button,
label.muims_button.btn-white button,
label.muims_link.btn-white button,
label.muims_href.btn-white a {
    background: var(--bg-color-top);
    border-color: var(--border-color);
    color: var(--text-color-secondary);
}
label.muims_submit.btn-white button:hover,
label.muims_button.btn-white button:hover,
label.muims_link.btn-white button:hover,
label.muims_href.btn-white a:hover {
    background: var(--main-accent-color-light);
    color: var(--main-accent-color);
}

/* --- btn-ghost: акцентное вторичное действие (белый фон, акцентный текст) --- */
label.muims_submit.btn-ghost button,
label.muims_button.btn-ghost button,
label.muims_link.btn-ghost button,
label.muims_href.btn-ghost a {
    background: var(--bg-color-top);
    border-color: var(--main-accent-color-medium);
    color: var(--main-accent-color);
}
label.muims_submit.btn-ghost button:hover,
label.muims_button.btn-ghost button:hover,
label.muims_link.btn-ghost button:hover,
label.muims_href.btn-ghost a:hover {
    background: var(--main-accent-color-light);
    border-color: var(--main-accent-color);
}

/* --- btn-danger: опасное действие (красная рамка + светлый красный фон) --- */
label.muims_submit.btn-danger button,
label.muims_button.btn-danger button,
label.muims_link.btn-danger button,
label.muims_href.btn-danger a {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}
label.muims_submit.btn-danger button:hover,
label.muims_button.btn-danger button:hover,
label.muims_link.btn-danger button:hover,
label.muims_href.btn-danger a:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--text-color-inverse);
}

/* --- Вложенные кнопки children[]: .btn-group (правила §7.3) --- */
.btn-group { position: relative; display: inline-flex; align-items: center; }
.btn-group > label { margin: 0; }
.btn-group > label + .btn-group__caret { border-left: 0; }
.btn-group__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--bg-color-top);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    color: var(--text-color-secondary);
    padding: 0;
}
.btn-group__caret:hover { background: var(--main-accent-color-light); }
.btn-group__caret svg { width: 12px; height: 12px; }
.btn-group__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.btn-group__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: var(--bg-color-top);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: none;
    z-index: 80;
}
.btn-group__menu.is-open { display: block; }
.btn-group__menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--text-color);
    cursor: pointer;
}
.btn-group__menu button:hover { background: var(--main-accent-color-light); }
.btn-group__menu button svg { width: 14px; height: 14px; flex: none; }

/* --- Иконочная кнопка 34x34 (правила §7.2) --- */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--bg-color-top);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    color: var(--text-color-secondary);
    text-decoration: none;
}
.icon-btn:hover { background: var(--main-accent-color-light); color: var(--main-accent-color); }
.icon-btn svg { width: 16px; height: 16px; }

/* --- Ссылочные кнопки вёрстки «btn btn-*» (profile/tasks) — те же варианты §7.2 --- */
a.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--main-font, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color-secondary);
    transition: background-color .15s, border-color .15s, color .15s;
}
a.btn svg, button.btn svg { width: 14px; height: 14px; flex: none; }
a.btn.btn-primary { background: var(--main-accent-color); border-color: var(--main-accent-color); color: var(--text-color-inverse); }
a.btn.btn-primary:hover { background: var(--main-accent-color-hover); border-color: var(--main-accent-color-hover); }
a.btn.btn-white { background: var(--bg-color-top); border-color: var(--border-color); color: var(--text-color-secondary); }
a.btn.btn-white:hover { background: var(--main-accent-color-light); color: var(--main-accent-color); }
a.btn.btn-ghost { background: var(--bg-color-top); border-color: var(--main-accent-color-medium); color: var(--main-accent-color); }
a.btn.btn-ghost:hover { background: var(--main-accent-color-light); border-color: var(--main-accent-color); }
a.btn.btn-danger { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
a.btn.btn-danger:hover { background: var(--color-error); border-color: var(--color-error); color: var(--text-color-inverse); }

/* --- SVG-иконки внутри кнопок-стрелок сортировки модалки (.sib) --- */
.sort-item .sib svg { width: 14px; height: 14px; vertical-align: middle; display: block; }
.sort-item .sib { display: inline-flex; align-items: center; justify-content: center; }

/* --- SVG-иконки в кнопках удаления строк/групп и навигации года календаря --- */
.entry-list-remove svg,
.fgroup-remove svg,
.modal-close svg,
.popover-close svg {
    width: 14px;
    height: 14px;
    display: block;
    margin: auto;
}
.entry-list-remove,
.fgroup-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
label.muims_date .yearCalendarBlock .year-nav button svg,
label.muims_myCalendar .yearCalendarBlock .year-nav button svg {
    width: 14px;
    height: 14px;
    display: block;
    margin: auto;
}
.org-card-label { width: 160px; color: var(--text-color-muted, #64748b); vertical-align: top; }

/* --- Резервные коды 2FA (пункт 5 «Резервные коды 2FA») --- */
.recovery-codes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}
.recovery-code-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--surface-alt, #f8fafc);
    font-variant-numeric: tabular-nums;
}
.recovery-code-num {
    color: var(--text-color-muted, #64748b);
    font-size: 12px;
}
.recovery-code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 14px;
    letter-spacing: 1px;
    user-select: all;
}

/* =====================================================================
   ЕДИНЫЙ ДИЗАЙН (issue #29, правила-дизайна-и-разметки.md)
   Дополнительные токены §2.2 + примитивы карточек §5 + шкала акцентов §10
   + макеты §11. Классы ядра НЕ переопределяются — только новые muims-* / ws-*.
   ===================================================================== */

/* --- Дополнительные токены единого дизайна (правила §2.2) --- */
.pg-builder,
.pg-preview,
.entry-view--two-col,
.entry-view--one-col-sidebar {
    --accent-deep: #4a5178;
    --graphite: #3d4a63;
    --surface: #f0f2f5;
    --line: #d5d8dd;
    --color-blocker: #7a1f2b;
    --color-blocker-bg: #f6e6e9;
}

/* --- Единая шкала акцентов (правила §10): бейджи 5 уровней --- */
.muims-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.muims-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.muims-badge--accent  { background: var(--main-accent-color-light); color: var(--main-accent-color); }
.muims-badge--warn    { background: var(--color-warning-bg); color: var(--color-warning); }
.muims-badge--error   { background: var(--color-error-bg); color: var(--color-error); }
.muims-badge--blocker { background: var(--color-blocker-bg, #f6e6e9); color: var(--color-blocker, #7a1f2b); }

/* --- Карточка-блок (правила §5.1) --- */
.muims-card {
    background: var(--bg-color-top);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.muims-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-light);
    background: #f7f8f9;
}
.muims-card__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-color-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.muims-card__title svg { width: 16px; height: 16px; color: var(--text-color-muted); flex: none; }
.muims-card__spacer { flex: 1; }
.muims-card__hint { font-size: 11px; font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--text-color-muted); }
.muims-card__body { padding: 18px; }
.muims-card--actions .muims-card__body { background: #f7f8f9; }

/* --- Примитивы блоков (правила §5.2) --- */
.muims-profile { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.muims-avatar {
    width: 80px; height: 80px; flex-shrink: 0;
    background: var(--graphite); color: #f4f5f7;
    font-size: 26px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0; user-select: none; letter-spacing: .5px;
}
.muims-profile__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.muims-profile__name { font-size: 18px; font-weight: bold; color: var(--text-color); }
.muims-profile__meta { font-size: 13px; color: var(--text-color-secondary); }
.muims-profile__status { margin-top: 2px; }

.muims-fields { display: grid; gap: 14px 24px; }
.muims-fields--1 { grid-template-columns: 1fr; }
.muims-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.muims-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .muims-fields--2, .muims-fields--3 { grid-template-columns: 1fr; } }
.muims-field { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.muims-field > svg { width: 16px; height: 16px; color: var(--text-color-muted); flex: none; margin-top: 2px; }
.muims-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.muims-field__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-color-secondary); }
.muims-field__label .key { font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--text-color-muted); font-family: "Courier New", monospace; font-size: 10px; }
.muims-field__value { font-size: 14px; color: var(--text-color); overflow-wrap: anywhere; }
.muims-field__value .muted { color: var(--text-color-muted); }

.muims-metrics { display: grid; gap: 16px; }
.muims-metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.muims-metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.muims-metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .muims-metrics--2, .muims-metrics--3, .muims-metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.muims-metric { border: 1px solid var(--border-light); background: var(--bg-color-top); padding: 14px 16px; }
.muims-metric__value { font-size: 20px; font-weight: 700; color: var(--text-color); }
.muims-metric__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-color-muted); margin-top: 4px; }

.muims-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.muims-chip {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700;
    background: var(--bg-color); color: var(--text-color-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 10px; border-radius: 0;
}

.muims-timeline { display: flex; flex-direction: column; }
.muims-tl-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.muims-tl-item:last-child { border-bottom: 0; }
.muims-tl-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--main-accent-color-light); color: var(--main-accent-color);
    display: flex; align-items: center; justify-content: center;
}
.muims-tl-icon svg { width: 14px; height: 14px; }
.muims-tl-body { min-width: 0; }
.muims-tl-text { font-size: 13px; color: var(--text-color); overflow-wrap: anywhere; }
.muims-tl-time { font-size: 11px; color: var(--text-color-muted); font-family: "Courier New", monospace; margin-top: 2px; }

.muims-related { display: flex; flex-direction: column; }
.muims-related-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 6px; border-bottom: 1px solid var(--border-light);
    text-decoration: none; color: var(--text-color);
}
.muims-related-item:last-child { border-bottom: 0; }
.muims-related-item:hover .muims-related-item__name { color: var(--link-color-hover); }
.muims-related-item__icon {
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--surface); color: var(--text-color-muted);
    display: flex; align-items: center; justify-content: center;
}
.muims-related-item__icon svg { width: 14px; height: 14px; }
.muims-related-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.muims-related-item__name { font-size: 13px; font-weight: 700; color: var(--link-color); overflow-wrap: anywhere; }
.muims-related-item__meta { font-size: 11px; color: var(--text-color-muted); }
.muims-related-item__arrow { margin-left: auto; flex: none; color: var(--text-color-muted); }
.muims-related-cols { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.muims-related-col { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; }
.muims-related-col em { font-style: normal; color: var(--text-color-muted); }
.muims-related-col b { font-weight: 600; color: var(--text-color); overflow-wrap: anywhere; }

.muims-note { display: flex; flex-direction: column; gap: 10px; }
.muims-note__text { font-size: 13px; color: var(--text-color); overflow-wrap: anywhere; }
.muims-note__meta { font-size: 11px; color: var(--text-color-muted); }

.muims-actions__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.muims-actions__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Макеты (правила §11) --- */
.muims-layout { display: grid; gap: 20px; align-items: start; }
.muims-layout--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.muims-layout--sidebar { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1080px) {
    .muims-layout--2col, .muims-layout--sidebar { grid-template-columns: minmax(0, 1fr); }
}
.muims-layout__col, .muims-layout__main, .muims-layout__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* --- Pagehead карточки записи (правила §4.2) --- */
.entry-view-pagehead { padding: 0; }
.entry-view-pagehead .ws-pagehead__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.entry-view-pagehead .ws-pagehead__title { font-size: 20px; font-weight: bold; color: var(--text-color); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-view-pagehead .ws-pagehead__id { font-family: "Courier New", monospace; font-size: 12px; font-weight: normal; color: var(--text-color-muted); background: var(--surface); padding: 3px 8px; }
.entry-view-pagehead .ws-pagehead__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.entry-view-pagehead .description { margin-top: 4px; }

.entry-view--two-col .entry-section,
.entry-view--one-col-sidebar .entry-section,
.entry-view--two-col .pg-block-card,
.entry-view--one-col-sidebar .pg-block-card { margin-bottom: 0; }

/* =====================================================================
   КОНСТРУКТОР СТРАНИЦ ЗАПИСЕЙ (issue #29) — классы pg-*
   Лэйаут: топбар / палитра 240px / холст / инспектор 360px / статус-бар 26px
   ===================================================================== */
.pg-builder {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    font-family: var(--main-font, Arial, sans-serif);
    color: var(--text-color);
}
.pg-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-color-top);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.pg-topbar__title { font-size: 14px; font-weight: 700; color: var(--text-color); }
.pg-topbar__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pg-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 0; align-items: stretch; }
@media (max-width: 1200px) { .pg-workspace { grid-template-columns: 200px minmax(0, 1fr); } .pg-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border-color); } }
@media (max-width: 860px)  { .pg-workspace { grid-template-columns: 1fr; } .pg-palette { border-right: 0; border-bottom: 1px solid var(--border-color); } }
.pg-palette { background: var(--bg-color-top); border-right: 1px solid var(--border-color); padding: 12px; overflow-y: auto; max-height: 70vh; }
.pg-palette__title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-color-muted); margin-bottom: 10px; }
.pg-palette__cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-color-secondary); margin: 12px 0 6px; }
.pg-palette__item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; margin-bottom: 6px;
    background: var(--bg-color-top); border: 1px solid var(--border-color); border-radius: 0;
    cursor: pointer; font-family: inherit;
}
.pg-palette__item:hover { border-color: var(--main-accent-color-medium); background: var(--main-accent-color-light); }
.pg-palette__item-title { display: block; font-size: 13px; font-weight: 700; color: var(--text-color); }
.pg-palette__item-key { display: block; font-size: 10px; color: var(--text-color-muted); font-family: "Courier New", monospace; margin-top: 2px; }
.pg-palette__preset { display: block; width: 100%; margin-top: 14px; padding: 8px 10px; font-size: 12px; background: var(--surface); border: 1px dashed var(--border-color); border-radius: 0; cursor: pointer; font-family: inherit; color: var(--text-color-secondary); }
.pg-palette__preset:hover { border-color: var(--main-accent-color-medium); color: var(--main-accent-color); }
.pg-palette__preset.pg-preset-btn { margin-top: 10px; }

.pg-canvas {
    background: var(--surface);
    padding: 16px;
    min-height: 320px;
    max-height: 70vh;
    overflow-y: auto;
}
.pg-canvas__hint {
    border: 1px dashed var(--line);
    padding: 32px 20px;
    text-align: center;
    color: var(--text-color-muted);
    font-size: 13px;
    background: var(--bg-color-top);
}
.pg-canvas__list { display: flex; flex-direction: column; gap: 12px; }
.pg-block { border: 2px solid transparent; background: var(--bg-color-top); box-shadow: var(--shadow-sm); }
.pg-block--selected { border-color: var(--input-border-color-focus, #4a56a8); }
.pg-block--drop-before { border-top: 2px solid var(--main-accent-color-medium); }
.pg-block--drop-after { border-bottom: 2px solid var(--main-accent-color-medium); }
.pg-block--selected .pg-block__head { background: var(--main-accent-color-lighter); }
.pg-block__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    background: #f7f8f9;
}
.pg-block__num {
    min-width: 22px; height: 22px;
    background: var(--accent-deep); color: var(--text-color-inverse);
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.pg-block__title { font-size: 13px; font-weight: 700; color: var(--text-color); }
.pg-block__type { font-size: 10px; color: var(--text-color-muted); font-family: "Courier New", monospace; }
.pg-block__tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.pg-block__drag { cursor: grab; color: var(--text-color-muted); font-size: 12px; user-select: none; padding: 0 4px; }
.pg-block--dragging { opacity: .5; }
.pg-block__body { padding: 10px 12px; font-size: 12px; color: var(--text-color-secondary); }
.pg-block__body-label { font-family: "Courier New", monospace; font-size: 11px; color: var(--text-color-muted); margin-bottom: 4px; overflow-wrap: anywhere; }
.pg-block__body-preview { color: var(--text-color-secondary); }

.pg-inspector { background: var(--bg-color-top); border-left: 1px solid var(--border-color); overflow-y: auto; max-height: 70vh; }
.pg-inspector__tabs { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-color-top); }
.pg-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color-secondary);
    background: none; border: 0; border-bottom: 2px solid transparent;
    cursor: pointer; font-family: inherit; text-align: center;
}
.pg-tab.is-active { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.pg-inspector__empty { padding: 20px 14px; font-size: 12px; color: var(--text-color-muted); }

.pg-fieldgroup { padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.pg-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-color-secondary); margin-bottom: 6px; }
.pg-input, .pg-select {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-color);
    background: var(--bg-color-top);
    border: 1px solid var(--input-border-color);
    border-radius: 0;
}
.pg-input:focus, .pg-select:focus { border-color: var(--input-border-color-focus); outline: none; }
.pg-input--sm { padding: 5px 8px; font-size: 12px; }
.pg-input--area { resize: vertical; }
.pg-select--sm { width: auto; min-width: 90px; }
.pg-hint { font-size: 11px; color: var(--text-color-muted); padding: 4px 0; }
.pg-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-color); padding: 3px 0; cursor: pointer; }
.pg-check input { accent-color: var(--main-accent-color); }
.pg-check-key { font-family: "Courier New", monospace; font-size: 10px; color: var(--text-color-muted); margin-left: auto; }
.pg-checklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--border-light); padding: 6px 10px; background: var(--bg-color-top); }

.pg-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pg-row-del { flex: none; }
.pg-row--bref { background: var(--surface); padding: 5px 8px; }
.pg-row__label { font-size: 10px; color: var(--text-color-muted); width: 100%; text-transform: uppercase; letter-spacing: .3px; }
.pg-match-col, .pg-bfield-col, .pg-column-col { width: auto; }
.pg-checkgroup { display: flex; flex-direction: column; gap: 8px; }
.pg-check-result { font-size: 12px; }
.pg-check-rows { margin-top: 6px; font-size: 11px; overflow-wrap: anywhere; }
.pg-check-rows code { background: var(--surface); padding: 2px 5px; display: inline-block; margin-bottom: 2px; }

/* Статус профиля (issue #36, пункт 4): превью и карта условий */
.pg-status-preview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding: 8px 10px; background: var(--surface); border: 1px dashed var(--line); }
.pg-status-preview__label { font-size: 11px; color: var(--text-color-muted); }
.pg-status-preview__level { font-size: 11px; color: var(--text-color-muted); }
.pg-statusmap-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 4px; }

/* Информация об источнике (issue #36, пункт 2) */
.pg-source-info { margin-top: 8px; font-size: 11px; color: var(--text-color-secondary);
  background: var(--surface); padding: 6px 10px; border: 1px solid var(--border-light); }

/* Дефолтные кнопки pagehead (issue #36, пункт 3) */
.pg-pagedefaults { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
  padding: 10px; background: var(--surface); border: 1px dashed var(--line); }
.pg-pagedefaults__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-pagedefaults__btns { display: inline-flex; gap: 8px; align-items: center; }
.pg-pagedefaults__btn { pointer-events: none; display: inline-flex; align-items: center; }
.pg-pagedefaults__btn .muims_button { cursor: default; }

.pg-statusbar {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-color-secondary);
    background: var(--bg-color-top);
    border-top: 1px solid var(--border-color);
}
.pg-icon { width: 14px; height: 14px; flex: none; }
.pg-builder .pg-topbar .muims_button button svg,
.pg-builder .pg-topbar .muims_button button svg + span { vertical-align: middle; }
.pg-preview { background: var(--surface); padding: 16px; }
.pg-preview .muims-card { margin-bottom: 16px; }
.pg-preview-wrap { background: var(--surface); }

/* ════════════════════════════════════════════════════════════════════════
   ЕДИНАЯ ВЕРХНЯЯ ПАНЕЛЬ + DRAWER-НАВИГАЦИЯ (issue #33, пункт 2)
   Эталон — .ws-topbar из примера «Настройка АПИ» (референс задачи #29).
   Принцип «не ломать»: новые классы (nav-*, ws-*) не переопределяют классы
   ядра; токены — только :root + дополнительные (--accent-deep/--graphite/--line).
   Навигация остаётся внутри .navigation (drawer шириной 280px, поиск по
   мета-данным: название + описание, фильтрация с 3 символов).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --accent-deep: #4a5178;
  --graphite: #3d4a63;
  --line: #d5d8dd;
  --color-blocker: #7a1f2b;
  --color-blocker-bg: #f6e6e9;
}

.nav-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  background: var(--bg-color-top);
  border-bottom: 1px solid var(--line);
}
.ws-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-color-secondary); background: var(--bg-color-top);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ws-menu-btn:hover { background: #f2f3f5; border-color: var(--line); }
.ws-menu-btn:focus-visible { outline: 2px solid var(--main-accent-color); outline-offset: 1px; }
.ws-brand { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 14px; color: var(--text-color); }
.ws-brand__mark { width: 24px; height: 24px; background: var(--accent-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; }
.ws-topbar__title { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 14px; font-weight: bold; color: var(--text-color); white-space: nowrap; pointer-events: none; }
.ws-topbar__title small { display: block; font-size: 11px; color: var(--text-color-muted); margin-top: 1px; }
.ws-topbar__spacer { flex: 1; }
.ws-user { position: relative; }
.ws-user-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 6px;
  background: var(--bg-color-top); border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font-family: inherit; transition: background .15s, border-color .15s; }
.ws-user-btn:hover { background: #f7f8f9; border-color: var(--line); }
.ws-user-btn:focus-visible { outline: 2px solid var(--main-accent-color); outline-offset: 1px; }
.ws-user-btn svg { width: 12px; height: 12px; color: var(--text-color-muted); flex-shrink: 0;
  transition: transform .15s; }
.ws-user-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ws-user-avatar { width: 28px; height: 28px; background: var(--graphite); color: #f4f5f7;
  font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.ws-user-name { font-size: 13px; color: var(--text-color); font-weight: bold; line-height: 1.1; text-align: left; }
.ws-user-name small { display: block; font-size: 10px; font-weight: normal; color: var(--text-color-muted); }
.ws-user-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px;
  background: var(--bg-color-top); border: 1px solid var(--border-color); box-shadow: var(--shadow-md);
  display: none; z-index: 85; }
.ws-user-menu.is-open { display: block; }
.ws-user-menu__item { display: block; padding: 9px 12px; font-size: 13px; font-weight: 700;
  color: var(--text-color); text-decoration: none; border-bottom: 1px solid var(--border-light); }
.ws-user-menu__item:last-child { border-bottom: none; }
.ws-user-menu__item:hover { background: var(--main-accent-color-light); }

.nav-overlay { position: fixed; inset: 0; background: rgba(28,32,38,.35); z-index: 80;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.navigation-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
  background: var(--bg-color-top); border-right: 1px solid var(--line); z-index: 90;
  display: flex; flex-direction: column; transform: translateX(-100%);
  transition: transform .22s ease; overflow: visible; }
.navigation-drawer.is-open { transform: translateX(0); }
.navigation__head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
.navigation__head .ws-brand { flex: 1; }
.navigation__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-color-top); border: 1px solid var(--line); color: var(--text-color-secondary);
  cursor: pointer; }
.navigation__close:hover { background: #f2f3f5; }
.navigation__close:focus-visible { outline: 2px solid var(--main-accent-color); outline-offset: 1px; }
.navigation__body { flex: 1; overflow-y: auto; padding: 8px 0 16px; }

.ws-nav-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px;
  border: 1px solid var(--border-color); background: var(--bg-color-top); border-radius: 0; }
.ws-nav-search svg { color: var(--text-color-muted); flex-shrink: 0; margin-left: 8px; }
.ws-nav-search input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-family: inherit;
  font-size: 13px; color: var(--text-color); background: transparent; border: none; outline: none; }
.ws-nav-search input::placeholder { color: var(--text-color-muted); }
.ws-nav-no-results { display: none; font-size: 12px; color: var(--text-color-muted); padding: 10px 16px; }
.ws-nav-no-results.is-visible { display: block; }

.muims_menu.ws-nav { display: block; margin: 6px 0 0; padding: 0; }
.muims_menu_section.ws-nav__section { margin-bottom: 6px; }
.muims_menu_title.ws-nav__title { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-color-muted); text-decoration: none; }
.muims_menu_title.ws-nav__title:hover { color: var(--accent-deep); }
.muims_menu_list.ws-nav__list { list-style: none; margin: 0; padding: 0; }
.ws-nav-section-desc { display: block; font-size: 10px; color: var(--text-color-muted); padding-left: 34px; }
.muims_menu_list.ws-nav__list li { position: relative; }
.muims_menu_list.ws-nav__list a { display: block; padding: 8px 16px 8px 34px; font-size: 13px;
  color: var(--text-color-secondary); text-decoration: none; border-left: 2px solid transparent; }
.muims_menu_list.ws-nav__list a:hover { background: #f7f8f9; color: var(--text-color); }
.muims_menu_list.ws-nav__list a.is-active { border-left-color: var(--accent-deep); background: var(--main-accent-color-light);
  color: var(--accent-deep); font-weight: 700; }
.ws-nav__list li.is-hidden { display: none; }
.ws-nav__section.is-hidden { display: none; }
.navigation-drawer .muims_menu_icon svg { width: 14px; height: 14px; vertical-align: middle; }

/* Тултип описания раздела (issue #36, пункт 5): показывается при наведении
   на заголовок секции дольше 0.3 сек; в самой навигации описание не выводится. */
.ws-nav-desc-tip { position: fixed; z-index: 120; max-width: 260px; padding: 7px 10px;
  font-size: 12px; line-height: 1.4; color: var(--text-color); background: var(--bg-color-top);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.ws-nav-desc-tip.is-visible { opacity: 1; visibility: visible; }