/* =========================================
   1. VARIABLES & PALETTE
   ========================================= */
:root {
	/* Базовые значения для расчетов высоты */
    --real-vh: 100vh;
    --ui-zoom: 1;
	/* Глобальный компенсатор: при зуме 1 он равен 100%, при 0.75 он станет ~133% */
    --vh-scaled: calc(var(--real-vh) / var(--ui-zoom));
    --vw-scaled: 100%;
	
    /* --- Base Palette --- */
    --palette-white: #FFFFFF;
    --palette-dark-blue: #2C3E50;
    --palette-sky-blue: #3498DB;
    --palette-red: #E74C3C;
	--palette-orange: #f39c12;
    --palette-light-grey: #ECF0F1;
    --palette-slate: #5D6D7E;
    --palette-neutral-grey: #E9ECEF;
    --palette-border-grey: #CED4DA;

    /* --- Functional Colors --- */
    --color-primary: var(--palette-sky-blue);
    --color-primary-hover: #2980b9; 
    --color-secondary: var(--palette-dark-blue);
    --color-secondary-hover: #34495E;
    --color-danger: var(--palette-red);
    --color-danger-hover: #c0392b;

    /* Text */
    --color-text-main: var(--palette-dark-blue);
    --color-text-muted: var(--palette-slate);
    --color-text-light: #999999;
    --color-text-inverse: var(--palette-white);

    /* --- UI Components --- */
    --bg-app: var(--palette-light-grey);
    --bg-surface: var(--palette-white);
    --bg-table-header: #F8F9FA;
    --bg-table-hover: #F0F8FF;
    --border-table: #DEE2E6;
    
    /* Edit Form */
    --bg-surface-edit: #FDFDFD;

    /* Buttons */
    --btn-secondary-bg: var(--palette-slate); 
    --btn-secondary-text: var(--palette-white);
    --btn-secondary-hover: #4B5C6B;

    --btn-outline-bg: var(--palette-white);
    --btn-outline-text: var(--color-text-main);
    --btn-outline-border: var(--palette-border-grey);
    --btn-outline-hover: #F8F9FA;

    --btn-ghost-bg: var(--palette-neutral-grey);
    --btn-ghost-text: var(--color-text-main);
    --btn-ghost-hover: #DDE2E6;

    /* Inputs */
    --bg-input: var(--palette-white); /* Фон всех полей теперь всегда белый */
    --bg-input-focus: var(--palette-white);
    --border-input: var(--palette-border-grey);

    /* --- Sizes --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* --- Layout & Chrome (migrated from style.css) --- */
    --sidebar-bg: var(--palette-dark-blue);
    --sidebar-text: var(--palette-light-grey);
    --sidebar-active-bg: var(--palette-red);
    --sidebar-active-text: var(--palette-white);
    --sidebar-hover-bg: rgba(236, 240, 241, 0.1);
    --top-nav-bg: var(--palette-white);
    --top-nav-text: #5D6D7E;
    --top-nav-active-bg: var(--palette-sky-blue);
    --top-nav-active-text: var(--palette-white);
    --top-nav-hover-bg: var(--palette-light-grey);
    --content-bg: var(--palette-light-grey);
    --content-header-bg: var(--palette-white);
    --main-text-color: var(--palette-dark-blue);
    --border-color: #e2e5e6;
}

/* =========================================
   2. RESET & TYPOGRAPHY
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-main);
    background-color: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* Form elements font inheritance fix */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

/* --- GLOBAL LINKS STYLE --- */
a {
    color: var(--color-primary); /* Цвет как у кнопок Primary/Active */
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 10px; font-weight: 600; color: var(--color-secondary); }
p { margin-top: 0; margin-bottom: 15px; }

/* =========================================
   3. COMPONENTS (BUTTONS & INPUTS)
   ========================================= */

/* Базовый класс кнопки */
.btn-base { 
    padding: 8px 16px; 
    border-radius: var(--radius-md); 
    font-weight: 500; 
    cursor: pointer; 
    font-family: inherit; 
    font-size: 14px; 
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    height: 38px; /* <-- ДОБАВЛЕНО */
}

/* Варианты кнопок */
.btn-primary { 
    background: var(--color-primary); 
    color: var(--color-text-inverse); 
    border-color: var(--color-primary); 
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-danger { 
    background: var(--color-danger); 
    color: var(--color-text-inverse); 
    border-color: var(--color-danger); 
}
/* Кнопка Разработчика (системная) */
.btn-danger { 
    background-color: var(--color-danger); 
    color: var(--color-text-inverse); 
    border-color: var(--color-danger); 
}
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-cancel {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}
.btn-cancel:hover { background: var(--btn-secondary-hover); }

/* Кнопка Отмена/Закрыть/Назад внутри панелей удаления — всегда белая */
.delete-inline-panel .btn-cancel-del,
.delete-inline-panel .btn-back {
    background: white !important;
    color: var(--color-text-main) !important;
    border: 1px solid var(--palette-border-grey) !important;
}
.delete-inline-panel .btn-cancel-del:hover,
.delete-inline-panel .btn-back:hover {
    background: var(--palette-light-grey) !important;
}

.btn-print, .btn-outline { 
    background: var(--btn-outline-bg); 
    color: var(--btn-outline-text); 
    border-color: var(--btn-outline-border); 
}
.btn-print:hover { background: var(--color-primary); color: var(--palette-white); border-color: var(--color-primary); }

.btn-back-light { height: 42px; background: var(--palette-white); color: var(--color-text-muted); border: 1px solid var(--border-table); border-radius: var(--radius-md); padding: 0 16px; font-size: 13px; cursor: pointer; }
.btn-back-light:hover { background: #fff0f0; color: #d32f2f; border-color: #d32f2f; }
.btn-back-process { height: 42px; background: var(--palette-white); color: var(--color-text-muted); border: 1px solid var(--border-table); border-radius: var(--radius-md); padding: 0 16px; font-size: 13px; cursor: pointer; }
.btn-back-process:hover { background: #fff0f0; color: #d32f2f; border-color: #d32f2f; }

.btn-profile, .btn-ghost { 
    background: var(--btn-ghost-bg); 
    color: var(--btn-ghost-text); 
}
.btn-profile:hover { background: var(--btn-ghost-hover); }

/* Inputs */
.form-control {
    width: 100%; 
    height: 38px; 
    padding: 8px 12px;
    background: var(--bg-input); 
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm); 
    color: var(--color-text-main); 
    font-size: 14px;
    font-family: inherit;
}
.form-control:focus {
    background: var(--bg-input-focus);
    border-color: var(--color-primary);
    outline: none;
}
select.form-control option:checked { background: linear-gradient(var(--color-primary), var(--color-primary)); color: #fff; }

/* Исправление для текстовых областей */
textarea.form-control {
    height: auto;
    min-height: 38px;
    resize: vertical;
    line-height: 1.5;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* Input Group (Поле + Кнопка) */
.input-group {
    display: flex;
    align-items: center;
    width: 100%;
}
.search-input-wrap {
    position: relative;
    display: flex;
}
.search-input-wrap .form-control {
    padding-right: 28px;
    width: 250px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.search-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}
.search-clear-btn:hover { color: #333; }
.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.input-group .btn-base {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 38px;
    margin-left: -1px;
}
/* Состояние Disabled для кнопок */
.btn-base:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-image: none;
    box-shadow: none;
    pointer-events: none; /* Запрет кликов */
}
/* --- SETTINGS NAVIGATION ARROWS --- */
.settings-header {
    position: relative;
}
.settings-nav-arrows {
    position: absolute;
    right: 0;
    top: 5px;
    display: flex;
    gap: 10px;
    z-index: 10;
}
.nav-arrow-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.nav-arrow-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--bg-table-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.nav-arrow-btn:active {
    transform: translateY(0);
}
.nav-arrow-btn svg {
    display: block;
}

.input-status-green { 
    background-color: #d4edda !important; 
    color: #155724 !important; 
    border-color: #c3e6cb !important; 
    font-weight: 700;
}
.input-status-orange { 
    background-color: #fff3e0 !important; 
    color: #e65100 !important; 
    border-color: #ffe0b2 !important; 
    font-weight: 700;
}
.input-status-red { 
    background-color: #f8d7da !important; 
    color: #721c24 !important; 
    border-color: #f5c6cb !important; 
    font-weight: 700;
}

.btn-status-green { background-color: #d4edda !important; color: #155724 !important; border-color: #c3e6cb !important; }
.btn-status-orange { background-color: #fff3e0 !important; color: #e65100 !important; border-color: #ffe0b2 !important; }
.btn-status-red { background-color: #f8d7da !important; color: #721c24 !important; border-color: #f5c6cb !important; }

/* Состояние блокировки из-за подписки */
.readonly-locked {
    filter: grayscale(1) !important;
    opacity: 0.5 !important;
    cursor: pointer !important; /* Оставляем курсор, чтобы было понятно, что можно нажать */
}

/* Кастомное окно уведомления об ограничении доступа */
.access-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(44, 62, 80, 0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; transition: opacity 0.2s ease;
}
.access-alert-overlay.visible { opacity: 1; }

.access-alert-box {
    background: #fff;
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    width: 400px;
    text-align: center;
    border-top: 5px solid var(--palette-sky-blue);
}

.access-alert-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--palette-sky-blue);
}

.access-alert-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--palette-dark-blue);
}

.access-alert-text {
    font-size: 14px;
    color: var(--palette-slate);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Дополнительно для палитры конструктора */
.palette-item.readonly-locked {
    cursor: default !important;
    pointer-events: auto !important; /* Чтобы клик дошел до перехватчика */
}
.palette-item.readonly-locked * {
    pointer-events: none; /* Чтобы SVG внутри не мешал клику по родителю */
}

/* Специальное поле фильтра ветки (выглядит как кнопка-инпут) */
#branch-filter-display {
    background-color: var(--bg-table-header);
    border-color: var(--palette-border-grey);
    cursor: pointer;
    font-weight: 500;
}
/* =========================================
   4. LAYOUT COMPONENTS (Header, Sidebar, Tabs)
   ========================================= */

/* Sidebar Navigation (Определяем здесь, а не в фиксах) */
.sidebar-nav .nav-item > a {
    font-size: 16px !important;
    font-weight: 500;
}
.sidebar-nav .submenu li a {
    font-size: 14px !important;
}

/* Заголовок страницы (Справочник) */
.directory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: var(--bg-surface);
    padding: 15px 20px;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
}

/* Вкладки (Tabs) */
.tabs-container {
    display: flex;
    align-items: flex-end;
    margin-bottom: -1px;
    padding-left: 0;
    gap: 5px;
    position: relative;
    z-index: 10;
}

.tab-item {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-item:hover {
    color: var(--color-text-main);
    background-color: rgba(0,0,0,0.03);
}

.tab-item.active {
    background-color: var(--bg-surface);
    color: var(--color-text-main);
    font-weight: 600;
    border-color: var(--border-table);
    border-bottom-color: var(--bg-surface); 
}

/* =========================================
   КАСТОМНЫЙ ДИЗАЙН СКРОЛЛБАРОВ (ГЛОБАЛЬНО)
   ========================================= */

/* Для Firefox (он понимает только эти два свойства) */
* {
    scrollbar-width: thin;
    scrollbar-color: #b0b5ba transparent;
}

/* Для Chrome, Edge, Safari — Firefox не поддерживает ::-webkit-scrollbar */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background-color: #cbd0d5; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: #a0a6ab; }
}

/* =========================================
   5. TABLE BUILDER STYLES
   ========================================= */

/* Обертка */
.tb-wrapper {
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    width: 100%;
    margin-bottom: 20px;
    /* overflow-x: auto; -- УДАЛЕНО, чтобы не обрезать Пикеры */
}

/* Таблица */
.tb-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

/* Шапка */
.tb-thead-tr {
    background-color: var(--bg-table-header);
    text-align: left;
}

.tb-th {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-table);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    /* --- STICKY HEADER STYLES --- */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-table-header); /* <-- ДОБАВЛЕНО */
}

.tb-th.action-column {
    text-align: right;
    width: 100px;
}

/* Строки и ячейки */
.tb-tr {
    background-color: var(--palette-white);
    transition: background-color 0.1s;
}

.tb-tr:hover {
    background-color: var(--bg-table-hover);
}

.tb-td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-table);
    color: var(--color-text-main);
    font-size: 14px;
    vertical-align: middle;
}

.tb-td.action-column {
    text-align: right;
    white-space: nowrap;
}

.tb-empty-td {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
}

/* --- ОБЩИЙ СТИЛЬ: Контейнер таблицы с авто-высотой и скроллом --- */
.table-container-with-scroll {
    min-height: 0; 
    max-height: calc(var(--vh-scaled) - 250px);
    /* УДАЛЕНО: overflow-y: auto - внешний контейнер не должен иметь полосу прокрутки */
    overflow: hidden; 
    padding-bottom: 0 !important; 
}

/* Настройка высоты для панели редактирования через новый класс */
.io-edit-mode .form-inline-panel {
    min-height: 500px; 
    overflow: visible !important; 
}

.table-container-with-scroll .io-edit-mode .form-inline-panel {
    min-height: auto; 
    background-color: #fafdff; 
    /* Линия теперь наследуется из Раздела 6 */
}

.action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: var(--color-text-light);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-icon:hover { color: var(--color-primary); background-color: var(--bg-hover); }
.action-icon.delete:hover { color: var(--color-danger); }
.action-buttons-container .action-icon { padding: 2px; width: 22px; height: 22px; border: 1px solid var(--border-table); background-color: #fff; border-radius: var(--radius-md); color: var(--color-text-muted); }
.action-buttons-container .action-icon:hover { background-color: var(--bg-table-header); color: var(--color-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-color: var(--color-primary); }
.action-buttons-container .action-icon svg { width: 14px; height: 14px; }
.coordinator-block .action-buttons-container .action-icon { width: 28px; height: 28px; }
.coordinator-block .action-buttons-container .action-icon svg { width: 16px; height: 16px; }

/* --- TABLE BUILDER KEBAB MENU --- */
.tb-kebab-wrap {
    position: relative;
    display: inline-block;
}
.dropdown-content.tb-action-menu {
    min-width: 120px;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 2000;
}
.dropdown-content.tb-action-menu button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1.2;
}
.dropdown-content.tb-action-menu button:hover {
    background-color: var(--bg-table-hover);
}
.dropdown-content.tb-action-menu button svg,
.dropdown-content.tb-context-menu button svg {
    color: var(--color-text-light);
    flex-shrink: 0;
}
.dropdown-content.tb-action-menu .tb-action-delete:hover svg,
.dropdown-content.tb-context-menu .tb-action-delete:hover svg {
    color: var(--color-danger);
}
.tb-action-copy {
    color: var(--color-text-muted);
}
.dropdown-content.tb-action-menu .tb-action-delete,
.dropdown-content.tb-context-menu .tb-action-delete {
    color: var(--color-danger);
}
.dropdown-content.tb-action-menu .tb-menu-divider,
.dropdown-content.tb-context-menu .tb-menu-divider {
    border-top: 1px solid var(--border-table);
    margin: 4px 0;
    pointer-events: none;
}

/* --- CONTEXT MENU --- */
.dropdown-content.tb-context-menu {
    min-width: 130px;
    z-index: 3000;
    position: absolute;
}
.dropdown-content.tb-context-menu button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1.2;
}
.dropdown-content.tb-context-menu button:hover {
    background-color: var(--bg-table-hover);
}

/* --- BADGES --- */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
    background-color: #e9ecef;
    color: #495057;
}

.status-badge.blue { background-color: #cfe2ff; color: #084298; }   
.status-badge.cyan { background-color: #d1ecf1; color: #0c5460; }   
.status-badge.green { background-color: #d4edda; color: #0f5132; }  
.status-badge.red { background-color: #f8d7da; color: #842029; }    
.status-badge.yellow { background-color: #fff3cd; color: #664d03; }

/* --- Аватары пользователей в таблицах --- */
.user-photo-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--border-table);
    background-color: var(--palette-light-grey);
}

/* --- Styles for TableBuilder containers with ZOOM support --- */
/* 1. БАЗОВАЯ ТАБЛИЦА (Должности, Пользователи и т.д.) */
.table-container-with-scroll .tb-wrapper {
    max-height: calc(var(--vh-scaled) - 250px) !important;
    overflow-y: auto;
    overflow-x: hidden;
}
/* 2. ТАБЛИЦЫ С ВКЛАДКАМИ */
.tb-container-tabs .tb-wrapper {
    max-height: calc(var(--vh-scaled) - 290px) !important;
}
/* 3. ДЕТАЛИЗАЦИЯ ЛОГОВ */
#log-details-table .tb-wrapper {
    max-height: calc(var(--vh-scaled) - 345px) !important;
}
/* 4. ТАБЛИЦА ВНУТРИ ВИДА СМК */
#smk-view .tb-wrapper {
    max-height: calc(var(--vh-scaled) - 490px) !important;
}

/* --- Скролл таблицы (ограничение ~8 строк) --- */
.table-scroll-7-rows .tb-wrapper {
    max-height: 360px;  /* Увеличено для отображения 8 строк + заголовок */
    overflow-y: auto;   /* Вертикальный скролл */
    overflow-x: hidden; /* Скрыть горизонтальный скролл */
}

/* Гарантируем, что заголовок закреплен и имеет фон (чтобы текст не накладывался) */
.tb-th {
    position: sticky;
    top: 0;
    z-index: 10; /* Поверх контента */
    background-color: var(--bg-table-header, #F8F9FA);
    box-shadow: 0 1px 0 var(--border-table); /* Визуальная граница снизу при скролле */
}
/* --- Обёртка панели участников (внутри td внешней таблицы) --- */
.participants-inner-wrap {
    display: block;
    width: 100%;
    background: #fff;
}

/* --- Таблица участников: переопределяем стили внутри обёртки --- */
.participants-inner-wrap .tb-wrapper {
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    background: #fff !important;
}

.participants-inner-wrap .tb-table {
    width: 100% !important;
    table-layout: auto !important;
    background: #fff;
}

.participants-inner-wrap .tb-thead-tr .tb-th {
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #f4f6f8 !important;
    border-bottom: 2px solid var(--border-table) !important;
    color: var(--color-text-secondary) !important;
}

.participants-inner-wrap .tb-tr {
    background: #fff !important;
    height: auto !important;
}

.participants-inner-wrap .tb-tr:hover {
    background: #f0f8ff !important;
}

.participants-inner-wrap .tb-td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid #edf0f2 !important;
    background: inherit !important;
    color: var(--color-text-main) !important;
    vertical-align: middle !important;
}

/* --- Позиционирование и подсветка новых строк --- */
.tb-tr-active {
    /* Чтобы строка прижималась к шапке при скролле start */
    scroll-margin-top: 45px; 
    animation: tableRowHighlightFade 5s ease-out forwards;
}

/* Подсветка строки при открытом кебаб/контекст-меню */
.tb-tr-menu-active {
    background-color: rgba(243, 156, 18, 0.5) !important;
}
.process-card.tb-tr-menu-active {
    background-color: #e8f4fd !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2) !important;
}

@keyframes tableRowHighlightFade {
    0% {
        /* Используем более заметный оранжевый var(--palette-orange) с прозрачностью */
        background-color: rgba(243, 156, 18, 0.5); 
    }
    15% {
        background-color: rgba(243, 156, 18, 0.3);
    }
    100% {
        background-color: transparent;
    }
}
/* Только это, никаких padding или width для th/td здесь не пишем! */

/* =========================================
   6. INLINE EDIT FORM (Редактирование в таблице)
   ========================================= */

.form-inline-panel {
    padding: 20px; 
    background-color: var(--bg-surface-edit); 
    border-bottom: 2px solid var(--color-primary); /* ФИКС: Синяя линия-отбивка */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    width: 100%; /* Гарантия растяжения */
    box-sizing: border-box;
}

.form-inline-title {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
}

.form-inline-grid {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    width: 100%;
}

/* Утилиты ширины */
.col-grow { flex-grow: 1; }
.col-grow-2 { flex-grow: 2; }
.col-fixed-200 { width: 200px; flex-shrink: 0; }
.col-fixed-80 { width: 80px; flex-shrink: 0; }

.form-inline-actions {
    margin-top: 15px; 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px;
}

/* --- ЕДИНЫЙ СТИЛЬ ПОЛЕЙ (Фикс для KPI и других форм) --- */
/* Принудительно задаем всем полям (input, select, textarea) одинаковую тонкую рамку со всех сторон */
.form-inline-panel .form-control,
.form-inline-panel input,
.form-inline-panel select,
/* Специфика для textarea (высота авто) */
.form-inline-panel textarea {
    height: auto !important;
    min-height: 38px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* Специфика для textarea (высота авто) */
.form-inline-panel textarea {
    height: auto !important;
    min-height: 38px;
}

/* Единый стиль при клике (фокусе) */
.form-inline-panel .form-control:focus,
.form-inline-panel input:focus,
.form-inline-panel select:focus,
.form-inline-panel textarea:focus {
    border: 1px solid var(--color-primary) !important; /* Синяя рамка 1px */
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   7. DELETE PANELS (Блоки удаления)
   ========================================= */

.delete-inline-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0; /* Убираем радиусы для плотного прилегания */
    margin: 0;
    min-height: 80px;
}

.delete-content { 
    flex: 1; 
}

.delete-header {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-danger);
}

.delete-message {
    font-size: 13px;
    color: var(--color-text-main);
    line-height: 1.5;
}

.delete-list {
    margin: 8px 0 0 20px;
    padding: 0;
    color: var(--color-text-main); 
}

.delete-list li { 
    margin-bottom: 4px; 
}

/* Красный вариант (Блокировка / Удаление связей) */
.delete-inline-panel.red {
    background-color: #fff5f5; 
    border-bottom: 2px solid var(--color-danger);
    align-items: flex-start; /* Для длинных списков */
    padding-bottom: 20px;
}

/* Желтый вариант (Стандартное подтверждение) */
.delete-inline-panel.yellow {
    background-color: #fffbf2; 
    border-bottom: 1px solid var(--border-table);
    align-items: center;
}

/* Центрированный вариант */
.delete-inline-panel.center {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 15px;
}

/* Группировка кнопок */
.delete-actions-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
}

.delete-actions-row {
    display: inline-flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Кнопка очистки поискового поля */
.tb-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
}
.tb-search-clear:hover {
    color: #555;
    background-color: #e8e8e8;
}

/* Жирные цифры в таблицах */
.tb-num-active {
    font-weight: 700;
    color: var(--color-text-main);
}

/* =========================================
   8. ANIMATIONS & LOADERS
   ========================================= */

#app-loader p {
    font-size: 18px;
    color: var(--top-nav-text);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Базовый спиннер (Серый круг) */
.spinner {
    border: 3px solid var(--palette-light-grey); /* Основной круг - светло-серый */
    border-top: 3px solid var(--color-primary);  /* Вращающаяся часть - синяя */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}
/* Модификатор: Белый круг (для использования на серых фонах) */
.spinner.white {
    border-color: #ffffff;
    border-top-color: var(--color-primary);
}
/* Модификатор: Большой размер (x2) */
.spinner.large {
    width: 60px;
    height: 60px;
    border-width: 5px; /* Увеличиваем толщину линии для пропорции */
}

/* Центрирование спиннера в пустой таблице */
.tb-empty-td .spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* Оверлей для блокировки карточек во время AJAX-запроса */
.flow-element-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 6px; /* Соответствует скруглению карточки */
}

/* Приглушение неактивных элементов */
.steps-grid.is-busy .step-card:not(.is-deleting),
.actions-grid.is-busy .action-card:not(.is-deleting) {
    opacity: 0.5;
    pointer-events: none;
}
/* =========================================
   9. SMK COMPONENTS
   ========================================= */

/* --- Контейнер вида СМК --- */
#smk-view {
    display: flex;
    flex-direction: column;
    background-color: var(--palette-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    flex-grow: 1;
    min-height: 0;
}
#smk-view .settings-content {
    flex-grow: 1;
    overflow-y: auto;
}
#smk-view .form-actions-footer {
    margin-top: 20px;
    padding-top: 20px;
}

/* --- Хедер СМК: строка с вкладками и полями Номер/Дата --- */
.smk-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}
.smk-header-fields {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-shrink: 0;
}
.smk-header-fields .form-group {
    margin-bottom: 0;
}
.smk-header-fields label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}
.smk-header-fields input[type="text"],
.smk-header-fields input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    box-sizing: border-box;
}
.smk-header-fields input[type="text"]:focus,
.smk-header-fields input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Единый стиль для заголовков вкладок СМК (Документы, Показатели и т.д.) */
.smk-header {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Единый стиль для поля поиска внутри этих заголовков */
.smk-header .picker-search-input {
    flex-grow: 1;           /* Растягиваться на доступное место */
    max-width: 450px;       /* Но не более чем на 450px, чтобы не занимать всю ширину */
}

/* --- Стили для таблицы "Рабочая группа" --- */
.role-column {
    width: 110px;
    text-align: center;
    vertical-align: middle;
}

.role-column svg {
    color: var(--color-primary);
}

/* --- ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ТАБЛИЦ В СМК --- */
.smk-table-container .tb-wrapper {
    /* Было 575px → 545px → 510px → 475px. Уменьшаем ещё на 35px (стало 440px), чтобы кнопки формы риска помещались */
    max-height: calc(100vh - 440px);
    overflow-y: auto;                 /* Вертикальный скролл */
    overflow-x: hidden;               /* Убираем горизонтальный скролл */
    margin-bottom: 0;                 /* Убираем лишний отступ снизу */
    padding-bottom: 5px;              /* Небольшой отступ внутри для страховки */
}

/* При открытии формы редактирования — сжимаем таблицу, чтобы форма с кнопками помещалась */
.smk-table-container.editing-active .tb-wrapper {
    max-height: 60px;
    overflow-y: hidden;
}

/* При открытии формы редактирования скрываем шапку таблицы */
.smk-table-container table.hidden-header thead {
    display: none;
}

/* =========================================
   10. PROCESS SETTINGS VIEW (Настройки шага)
   ========================================= */

/* --- Контейнер настроек (Объединенный визуальный и структурный стиль) --- */
#item-settings-view {
    background-color: var(--palette-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    line-height: 1.45;
    height: auto !important;
    min-height: 0 !important;
    max-height: 95vh; /* Ограничение по высоте экрана */
}

.settings-header {
    padding: 20px 25px; 
}

#settings-breadcrumb {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color); /* Та самая линия из process_settings.css */
    color: #6c757d;
    font-size: 14px;
}

.settings-header h2 {
    margin: 5px 0 0 0;
    font-size: 20px;
    font-weight: 600;
}

.settings-title-highlight {
    color: var(--palette-sky-blue);
}

#settings-assignee {
    margin-top: 5px;
    color: #444;
    font-size: 14px;
}

#settings-assignee strong {
    color: var(--main-text-color);
}

#item-settings-view .settings-body {
    display: flex;
    padding: 20px 25px 25px 25px;
    gap: 25px;
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto; /* Скролл тела разрешен */
}

#item-settings-view .settings-content {
    flex-grow: 1;
    min-width: 0;
    height: auto !important;
}

/* --- Футер окна настроек --- */
#item-settings-view .settings-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--border-color) !important;
    padding: 20px 25px;
    margin-top: 0 !important;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

/* --- Сетка макета Входов/Выходов (IO) --- */
.io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.io-column h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-text-main);
}

/* --- Переопределение таблиц (TableBuilder) для компактности в этом окне --- */
#item-settings-view .tb-table {
    min-width: 0 !important; /* Снимаем глобальное ограничение ширины */
    width: 100%;
    border-collapse: collapse;
}

#item-settings-view .tb-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px !important; /* Отступ для разделения с кнопками "+" */
}

#item-settings-view .tb-th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
}

#item-settings-view .tb-td {
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

#item-settings-view .tb-tr:last-child .tb-td {
    border-bottom: none;
}

/* --- Кнопки внутри таблиц и форм настроек --- */
.add-table-row-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--main-text-color);
    transition: background 0.2s;
}

.add-table-row-btn:hover {
    background-color: var(--top-nav-hover-bg);
}

.delete-link-row-btn {
    background: none;
    border: none;
    color: var(--palette-red);
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding: 0 5px;
    line-height: 1;
}

#item-settings-view .tb-td,
#item-settings-view .tb-th {
    padding: 8px 8px; /* Более компактные ячейки */
}

#item-settings-view .tb-wrapper {
    margin-bottom: 0 !important; /* Убираем отступ снизу у таблиц */
}

/* --- Стили для вертикальных вкладок (Tabs) --- */
.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.tab-button {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--main-text-color);
    transition: all 0.2s;
}
.tab-button:hover {
    background-color: var(--top-nav-hover-bg);
}
.tab-button.active {
    background-color: var(--palette-sky-blue);
    color: white;
    font-weight: 600;
}

/* --- Стили для контентной области вкладки --- */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

/* --- Стили элементов форм внутри настроек --- */
.settings-content .form-group {
    margin-bottom: 20px;
}

/* Специальное правило: убираем отступ у последнего элемента перед футером */
#item-settings-view .settings-content .form-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-content label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.settings-content textarea,
.settings-content input[type="number"],
.settings-content select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    background-color: #f8f9fa;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.45;
}

/* Группа ввода периода (число + единицы измерения) */
.period-group {
    display: flex;
    gap: 10px;
}
.period-group input {
    flex: 0 0 100px;
}
.period-group select {
    flex-grow: 1;
}

/* --- Навигация (Выпадающий заголовок) --- */
.title-dropdown-container {
    position: relative;
    margin-bottom: 5px;
}

.title-dropdown-btn {
    background: none;
    border: none;
    padding: 4px 8px 4px 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    width: 100%;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.title-dropdown-btn:hover {
    background-color: var(--bg-table-hover);
}

.title-dropdown-icon {
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.title-dropdown-btn.active .title-dropdown-icon {
    transform: rotate(180deg);
}

/* Выпадающее меню */
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 400px;
    max-width: 600px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px 0;
}

.nav-dropdown-menu.show {
    display: block;
}

/* Элементы списка навигации */
.nav-tree-item {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-main);
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

.nav-tree-item:hover {
    background-color: var(--bg-table-hover);
}

.nav-tree-item.current {
    background-color: #e3f2fd; /* Акцентный фон для текущего элемента */
    border-left-color: var(--color-primary);
    font-weight: 600;
}

/* Иерархия отступов */
.indent-0 { padding-left: 15px; font-weight: 600; background-color: #fafafa; }
.indent-1 { padding-left: 35px; }
.indent-2 { padding-left: 55px; }
.indent-3 { padding-left: 75px; }

/* Бейджи типов (Шаг, Действие и т.д.) */
.item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--palette-neutral-grey);
    color: var(--color-text-muted);
    margin-right: 8px;
    white-space: nowrap;
}

/* НОВОЕ ПРАВИЛО: Убираем отступ у последнего элемента перед футером */
#item-settings-view .settings-content .form-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* =========================================
   11. CALENDAR STYLES (NO SCROLL - FIXED HEIGHT)
   ========================================= */
.month-view {
    background: var(--bg-surface);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Стили для кнопок навигации календаря */
.month-header button {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.month-header button:hover { background: var(--color-primary-hover); }

.month-name {
    font-size: 20px;
    font-weight: 700;
    margin-left: 10px;
    color: var(--color-text-main);
}

#month-calendar {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-table);
    border-radius: 4px;
    background-color: var(--bg-table-header);
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}

/* Сетка недели */
.week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-table);
    background-color: var(--palette-white);
    flex: 1; 
    /* УБРАЛИ жесткую минимальную высоту, чтобы ряды могли сжиматься */
    min-height: 0; 
}
.week-row:last-child { border-bottom: none; }

/* Шапка дней недели (Пн, Вт...) - фиксированная высота */
.week-row:first-child { 
    flex: 0 0 30px;
    min-height: 30px; 
    background-color: #f1f3f5;
    border-bottom: 1px solid var(--border-table);
}
.week-row:first-child div {
    text-align: left;
    padding: 5px 10px;
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 14px;
    align-self: center;
}

/* Ячейка дня */
.month-day {
    border-right: 1px solid var(--border-table);
    padding: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    /* УБРАЛИ min-height: 100px, чтобы ячейки сжимались */
    min-height: 0;
    overflow: hidden; 
}
.month-day:last-child { border-right: none; }

.month-day .day-number {
    align-self: flex-end;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.month-day.today .day-number {
    background-color: var(--color-primary);
    color: white !important;
    border-radius: 50%;
}

.month-day.other-month {
    background-color: #f9f9f9;
}

.event-text {
    font-size: 11px;
    background-color: var(--palette-light-grey);
    border-left: 3px solid var(--color-primary);
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-main);
    flex-shrink: 0;
}
.event-text:hover { background-color: #dfe6e9; }

.more-events {
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: center;
    cursor: pointer;
    margin-top: auto;
}

.calendar-inline-editor {
    padding: 15px;
    background: #f8f9fa;
}
.inline-datetime {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* =========================================
   12. INFO / LOADING SCREEN STYLES (Ex-RawInfo)
   ========================================= */
.info-json-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Увеличили вычет высоты (было 120px), чтобы точно влезло в экран без скролла body */
    height: calc(100vh - 200px); 
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden; /* Запрещаем скролл самого контейнера */
}

.info-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow: hidden; /* Чтобы колонка не растягивала родителя */
}

.info-col h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
    flex-shrink: 0; /* Заголовок фиксирован */
}

/* Растягиваем textarea на всю высоту колонки */
.info-col textarea.form-control {
    flex-grow: 1;
    height: 100% !important; 
    resize: none;
    /* Используем стандартный шрифт (наследуем от body), а не monospace */
    font-family: inherit; 
    font-size: 13px;
    line-height: 1.5;
}
/* =========================================
   13. FORM EDITOR STYLES (js/editor_form.js)
   ========================================= */

/* ... (Контейнеры и сайдбар остаются без изменений) ... */
.editor-container {
    display: flex;
    height: 100%;
    background-color: #f0f2f5;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.editor-sidebar {
    width: 180px;
    background-color: var(--palette-white);
    border-right: 1px solid var(--border-table);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.editor-sidebar-header {
    padding: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-table);
    background-color: #f8f9fa;
}

.editor-tools {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
}

.tool-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: 4px;
    cursor: grab;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
}
.tool-item:hover {
    border-color: var(--color-primary);
    background-color: #f0f8ff;
    transform: translateX(2px);
}
.tool-item:active { cursor: grabbing; }

/* Рабочая область */
.editor-workspace {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

.editor-tabs-area {
    display: flex;
    background-color: #f1f3f5;
    border-bottom: 1px solid var(--border-table);
    padding-top: 5px;
    padding-left: 10px;
    gap: 2px;
    height: 45px;
}

.editor-tab {
    padding: 8px 20px;
    background-color: #e9ecef;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.editor-tab.active {
    background-color: #fff;
    color: var(--color-text-main);
    border-color: var(--border-table);
    border-bottom-color: #fff;
    font-weight: 600;
}
.editor-tab-close { font-size: 16px; color: #999; }
.editor-tab-close:hover { color: var(--color-danger); }
.editor-add-tab { padding: 8px 12px; cursor: pointer; font-size: 18px; color: var(--color-primary); }

/* Сетка */
.editor-grid {
    flex-grow: 1;
    position: relative;
    background-image: 
        linear-gradient(to right, #f0f0f0 1px, transparent 1px),
        linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: auto;
}

/* ЭЛЕМЕНТЫ НА СЕТКЕ */
.grid-node {
    position: absolute;
    background-color: #fff;
    border: 1px solid transparent; /* Прозрачный бордюр по умолчанию */
    padding: 2px; /* Минимальный отступ для рамки */
    box-sizing: border-box;
    cursor: move;
    display: flex;
    flex-direction: column;
}

/* Внутренний контейнер для контента (чтобы рамка была снаружи) */
.node-inner-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid #ced4da; /* Видимая граница инпута */
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    overflow: hidden;
}

/* АКТИВНОЕ СОСТОЯНИЕ (ВЫДЕЛЕНИЕ) */
.grid-node.selected {
    border: 2px dashed #3498DB; /* Синяя пунктирная рамка */
    z-index: 1000; /* Поверх всех */
}

.node-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 600;
    outline: none;
    border-bottom: 1px dashed transparent;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-label:focus { border-bottom-color: var(--color-primary); color: var(--color-text-main); }

.node-content {
    flex-grow: 1;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #adb5bd;
    pointer-events: none;
    overflow: hidden;
}
.node-content.type-table {
    justify-content: flex-start;
    align-items: flex-start;
    background: #fff;
    padding: 0;
}
.fake-table-header {
    width: 100%;
    height: 24px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    display: flex;
}
.fake-col { border-right: 1px solid #dee2e6; height: 100%; }

/* --- ПАНЕЛЬ УПРАВЛЕНИЯ (КНОПКИ) --- */
.node-controls {
    position: absolute;
    /* Было -32px. Ставим -14px (половина высоты кнопки), чтобы центр кнопки был на линии */
    top: -14px; 
    right: -10px; /* Немного сдвигаем вправо, чтобы не перекрывать контент и маркер */
    display: none; 
    gap: 4px;
    height: 28px;
    z-index: 1001;
}

/* Показываем кнопки только при выделении */
.grid-node.selected .node-controls {
    display: flex;
}

.node-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
}

.node-btn svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }

/* Цвета кнопок */
.btn-delete { background-color: #E74C3C; } /* Красный */
.btn-delete:hover { background-color: #c0392b; }

.btn-settings { background-color: #3498DB; } /* Синий */
.btn-settings:hover { background-color: #2980b9; }

.btn-table { background-color: #27ae60; } /* Зеленый */
.btn-table:hover { background-color: #219150; }

/* МАРКЕРЫ ИЗМЕНЕНИЯ РАЗМЕРА */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #3498DB; /* Синие точки */
    border: 1px solid #fff;
    border-radius: 50%;
    display: none;
    z-index: 1002;
}

.grid-node.selected .resize-handle { display: block; }

/* Позиционирование маркеров */
.rh-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
.rh-s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.rh-se { bottom: -6px; right: -6px; cursor: se-resize; }

/* =========================================
   14. LAYOUT FIXES FOR FULL HEIGHT EDITOR
   ========================================= */

/* 1. УБРАЛИ жесткую высоту и скрытие скролла */
.content-body.content-body-full-height > .module-container {
    display: flex;
    flex-direction: column;
    /* height: 100%;  <-- УДАЛЕНО (блокировало скролл) */
    /* overflow: hidden; <-- УДАЛЕНО (скрывало контент) */
    min-height: 100%; /* Разрешаем растягиваться */
}

/* 2. Заголовок модуля */
.content-body.content-body-full-height > .module-container > .directory-header {
    flex-shrink: 0;
    margin-bottom: 15px; 
}

/* 3. Контейнер редактора */
#form-editor-mount-point {
    flex-grow: 1;
    height: auto !important; 
    min-height: 600px; /* Минимальная высота для удобства */
    display: flex;
    flex-direction: column;
}

/* =========================================
   15. FORM RENDERER STYLES (js/modules/form_renderer.js)
   ========================================= */

.renderer-container {
    display: flex;
    flex-direction: column;
    /* Фикс высоты, чтобы кнопки всегда были видны внизу экрана */
    height: calc(100vh - 150px) !important;
    background-color: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-table);
    overflow: hidden;
}

.renderer-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-table);
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.renderer-tabs {
    display: flex;
    background-color: #f1f3f5;
    border-bottom: 1px solid var(--border-table);
    padding-left: 20px;
    padding-top: 10px;
    gap: 5px;
}

.renderer-tab-btn {
    padding: 10px 20px;
    background-color: #e9ecef;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-muted);
}

.renderer-tab-btn.active {
    background-color: #fff;
    color: var(--color-text-main);
    font-weight: 600;
    border-color: var(--border-table);
    border-bottom-color: #fff;
}

.renderer-workspace {
    flex-grow: 1;
    overflow-y: auto !important; /* Скроллим только содержимое белого поля */
    position: relative;
    background-color: #f0f2f5; /* Цвет подложки (серый) */
}

.renderer-canvas {
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #fff; /* Белое поле под таблицей */
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* Режим "Потока" для отчетов: предотвращает наслоение блоков под таблицей */
.renderer-canvas.flow-mode {
    display: block; 
    padding: 25px 30px;
    overflow: hidden; 
}

.renderer-canvas.flow-mode .renderer-field {
    position: relative !important;
    float: left; /* Элементы встают в ряд (2 колонки), если ширина позволяет */
    top: auto !important;
    left: auto !important;
    margin-bottom: 25px;
    margin-right: 20px;
}

.renderer-label {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.renderer-input-container .form-control {
    height: 100%;
    width: 100%;
}

.renderer-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #dee2e6;
}
.renderer-data-table th, .renderer-data-table td {
    border: 1px solid #dee2e6;
    padding: 6px;
}
.renderer-data-table th { background-color: #f1f3f5; }

.btn-add-row { margin-top: 5px; font-size: 12px; padding: 4px 8px; cursor: pointer; }
.btn-del-row { border: none; background: none; color: #dc3545; cursor: pointer; font-size: 16px; }

.renderer-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-table);
    background-color: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* =========================================
   16. EDITOR SETTINGS PANEL (Общие настройки - Popover)
   ========================================= */

.settings-panel {
    position: absolute;
    /* Top и Left будут задаваться через JS */
    width: 320px;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border: 1px solid #ced4da;
    z-index: 2000; /* Поверх элементов */
    font-size: 13px;
}

.settings-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    color: var(--color-text-main);
}

.settings-form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.settings-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.settings-form-group label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 3px;
}

.settings-form-group input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    background-color: #fff;
    height: 28px;
}

.settings-form-group input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Кнопки внизу панели */
.settings-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Удаляем overlay, так как теперь это popover */
.settings-overlay {
    display: none;
}
/* --- Styles for Table Settings --- */
.column-settings-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 5px;
    background: #f9f9f9;
}

.column-settings-item {
    display: flex;
    gap: 5px; /* Уменьшили отступ, чтобы все влезло */
    margin-bottom: 5px;
    align-items: center;
}

.column-settings-item input {
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 11px;
}

.column-settings-item .col-name {
    flex-grow: 2; /* Название пошире */
    width: 30%;
}

.column-settings-item .col-var {
    flex-grow: 2; /* Переменная тоже широкая */
    width: 30%;
    background-color: #f0f8ff; /* Чуть подкрасим, чтобы отличалось */
}

.column-settings-item .col-width {
    width: 50px; /* Ширина узкая */
    text-align: center;
    flex-shrink: 0;
}

.btn-icon-sm {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #E74C3C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}
.btn-icon-sm:hover {
    background-color: #ffeaea;
}

.btn-add-col {
    width: 100%;
    padding: 6px;
    border: 1px dashed #aaa;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
}
.btn-add-col:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #f0f8ff;
}

/* Кнопки модалок (Светло-серые для печати) */
.btn-modal-gray { 
    padding: 12px 24px; 
    font-size: 14px; 
    font-weight: 500; 
    border-radius: 6px; 
    cursor: pointer; 
    border: 1px solid #D6DBDF; 
    background-color: #F8F9F9; 
    color: #2C3E50; 
    transition: all 0.2s;
    width: 100%; /* Чтобы кнопки в колонке были одинаковой ширины */
    text-align: left; /* Выравнивание текста */
}
.btn-modal-gray:hover { 
    background-color: #D6EAF8; /* Светло-голубой оттенок при наведении */
    border-color: #AED6F1;
    color: #2874A6;
}

/* =========================================
   17. CUSTOM SYSTEM ALERT (Стили для showSystemAlert)
   ========================================= */

.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    display: flex;
    align-items: center;     /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.custom-alert-overlay.visible {
    opacity: 1;
}

.custom-alert-overlay.fade-out {
    opacity: 0;
}

.custom-alert-box {
    background-color: #fff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    border: 1px solid #dee2e6;
}

.custom-alert-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--color-text-main);
}

.custom-alert-box p {
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    word-wrap: break-word;
    line-height: 1.5;
}

.custom-alert-box p.is-error {
    color: var(--palette-red); /* Красный текст для ошибок */
}

/* --- Правая панель настройки интерфейса --- */
.ui-settings-panel {
    position: fixed; top: 0; right: 0; width: 380px; height: var(--vh-scaled, 100vh);
    background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    z-index: 1100; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s ease;
}
.ui-settings-panel.open { transform: translateX(0); }
.ui-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-table);
}
.ui-settings-header h3 { margin: 0; font-size: 16px; color: var(--color-text-main); }
.ui-settings-close {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--color-text-secondary); line-height: 1; padding: 0 4px;
}
.ui-settings-close:hover { color: var(--color-text-main); }
.ui-settings-body { overflow-y: auto; flex: 1; padding: 16px 20px; }
.ui-settings-section { margin-bottom: 14px; }
.ui-settings-section-title { font-weight: 600; font-size: 13px; color: var(--color-text-main); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-table); }
.ui-settings-items { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.ui-settings-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; font-size: 13px; color: var(--color-text-main); }
.ui-settings-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ui-settings-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-table); }

.custom-alert-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.alert-ok-btn {
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    background-color: var(--palette-sky-blue); /* Синий по умолчанию */
    color: white;
}

.alert-ok-btn:hover {
    opacity: 0.9;
}

.alert-cancel-btn {
    padding: 8px 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    background-color: #fff;
    color: var(--color-text-main);
}
.alert-cancel-btn:hover {
    background-color: #f0f0f0;
}

/* Красная кнопка для ошибок */
.alert-ok-btn.btn-error {
    background-color: var(--palette-red);
}
.alert-ok-btn.btn-error:hover {
    background-color: #c0392b;
}
/* =========================================
   18. AI IMPORT LAYOUT
   ========================================= */

/* Основная обертка */
.ai-import-wrapper {
    display: flex;
    gap: 20px;
    height: calc(var(--vh-scaled, 100vh) - 180px);
    min-height: 400px;
    width: 100%;
    box-sizing: border-box;
}

/* Колонки */
.ai-import-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    overflow-y: auto;
}

.ai-import-column .description-text {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 15px;
}

/* --- ЕДИНЫЙ СТИЛЬ ЗАГОЛОВКОВ (LABELS) ДЛЯ ВСЕХ ФОРМ ИМПОРТА --- */
.ai-import-column label,
.ai-import-column .form-group label,
.ai-import-column .setting-item label,
.ai-import-column .textarea-container label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;               /* Единый размер */
    font-weight: 600;              /* Единая жирность */
    color: var(--color-text-main); /* Единый цвет */
    margin-bottom: 8px;            /* Единый отступ */
    display: block;
    line-height: 1.4;
}

/* Темная шапка */
.header-dark-container {
    background-color: var(--color-secondary);
    margin: -20px -20px 20px -20px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-dark-container h3 {
    color: var(--palette-white);
    margin: 0;
    font-size: 18px;
}

.header-dark-container .action-icon {
    color: var(--palette-light-grey);
    background: none;
    border: none;
    cursor: pointer;
}
.header-dark-container .action-icon:hover {
    color: var(--palette-white);
}

/* Текстовые поля (JSON и Prompt) */
.ai-import-column .textarea-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    min-height: 0;
}

.ai-import-column .textarea-container textarea {
    flex-grow: 1;
    resize: none;
    font-family: Consolas, 'Courier New', monospace !important;
}

/* Группы полей */
.ai-import-column .form-group {
    margin-bottom: 15px;
}

/* Футер с кнопками */
.ai-import-column .form-actions-footer {
    position: sticky;
    bottom: -20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 10px 20px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-table);
    z-index: 1;
}
.ai-import-column .form-actions-footer.right-align {
    justify-content: flex-end;
}

/* --- СЕТКА НАСТРОЕК PROMPT --- */
.prompt-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 15px;
    padding: 5px 0 15px 0;
    background-color: transparent;
    border: none;
    margin-bottom: 10px;
}

.setting-item {
    display: flex;
    flex-direction: column;
}

/* Поля ввода цифр в настройках */
.input-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-range input.form-control {
    text-align: left;
    padding: 4px 8px;
    height: 32px; /* Компактная высота */
    font-size: 14px;
    width: 100%;
    background-color: #fff;
}

.input-range span {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 20px; /* Размер тире */
    line-height: 1;
}

/* Адаптив */
@media (max-width: 1100px) {
    .ai-import-wrapper {
        flex-direction: column;
        height: auto;
    }
    .ai-import-column {
        min-height: 500px;
    }
}

/* [+] Растягивание обертки при импорте XLS */
#ai-import-view-root:has(#xls-preview-full-container[style*="display: block"]) .ai-import-wrapper {
    display: flex;
    flex-direction: column;
}

/* XLS-панель растягивается на всю высоту обертки */
#xls-upload-panel.bpmn-import-split-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#xls-upload-panel .import-body {
    flex-grow: 1;
}

/* Форма загрузки XLS в стиле BPMN */
.bpmn-import-split-panel .header-dark-container {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* [+] Стили для редактируемых ячеек в предпросмотре XLS */
.xls-editable-cell {
    padding: 4px;
    min-height: 20px;
    border-radius: 4px;
    transition: background 0.2s;
    outline: none;
    cursor: text;
    white-space: pre-wrap; /* Сохраняем переносы строк из Экселя */
}

.xls-editable-cell:hover {
    background-color: var(--bg-table-hover);
}

.xls-editable-cell:focus {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.xls-resp-cell {
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: pre-wrap;
}
.xls-resp-cell:hover {
    background-color: var(--bg-table-hover);
}
.xls-resp-picked {
    color: var(--color-primary);
    font-weight: 500;
}

/* [+] Стили для ЛОГа исправлений */
.spell-error-word {
    color: var(--palette-red);
    font-weight: 700;
    text-decoration: underline wavy var(--palette-red);
}
.spell-error-word.dict-excluded {
    color: #00c853 !important;
    text-decoration: none !important;
}
.spell-error-word.dict-replaced {
    color: #1565c0 !important;
    text-decoration: none !important;
}

.audit-edit-input {
    height: 30px !important;
    font-size: 13px !important;
    padding: 2px 8px !important;
}

#xls-spellcheck-audit-container .tb-wrapper {
    max-height: calc(100vh - 350px) !important;
}

/* [+] Вертикальный макет аудита с боковыми кнопками */
.xls-audit-vertical-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    overflow: hidden;
    /* высота устанавливается через JS с учётом zoom */
}

.audit-side-top {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.xls-resize-handle {
    height: 8px;
    cursor: row-resize;
    flex-shrink: 0;
    background: var(--border-table);
    border-radius: 4px;
    margin: 4px 0;
    transition: background 0.15s;
}
.xls-resize-handle:hover { background: var(--color-primary); }

/* Нижний блок: Горизонтальный сплит (Таблица + Кнопки) */
.audit-side-bottom-row {
    flex: 0 0 280px;
    display: flex;
    gap: 15px;
    min-height: 0;
    overflow: hidden;
}

.audit-table-container {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Принудительный скролл внутри TableBuilder */
.audit-table-container .tb-wrapper {
    flex: 1;
    overflow-y: auto !important;
}

/* Правая панель с кнопками */
.audit-actions-sidebar {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.audit-actions-sidebar .btn-base {
    width: 100%;
    justify-content: center;
    height: 45px;
    font-weight: 600;
}

.audit-side-bottom-row .tb-td {
    white-space: nowrap; /* Запрет переноса строк */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle !important;
}

.audit-side-right {
    background: #fcfdfe;
    padding: 10px;
}

/* =========================================
   19. LOGIN SCREEN STYLES (Точная версия)
   ========================================= */

#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Когда лендинг виден — login-overlay становится полупрозрачной модалкой поверх него */
#login-overlay.over-landing {
    background-color: rgba(0, 0, 0, 0.5);
}

.login-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
    background-color: var(--palette-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 380px;
    border: 1px solid #e9ecef;
}
.login-close-btn {
    display: none; position: absolute; top: 10px; right: 14px;
    background: none; border: none; font-size: 28px; line-height: 1;
    color: #999; cursor: pointer; padding: 0;
}
.login-close-btn:hover { color: #333; }
#login-overlay.over-landing .login-close-btn { display: block; }

.login-container h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 600; /* Средняя жирность */
    margin-bottom: 12px;
    color: var(--color-text-main);
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    height: 48px; /* Выше */
    padding: 0 16px; /* Горизонтальные отступы */
    font-size: 15px;
    color: var(--color-text-main);
    background-color: #f5f7fa; /* Светло-голубоватый фон поля */
    border: 1px solid #e0e5eb; /* Светлая граница */
    border-radius: 8px; /* Более скругленные */
    transition: all 0.2s ease;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--palette-white);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#login-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    margin-top: 8px;
    background-color: var(--color-secondary); /* #2C3E50 */
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#login-btn:hover:not(:disabled) {
    background-color: var(--color-secondary-hover); /* #34495E */
}

#login-btn:disabled {
    background-color: var(--palette-slate);
    cursor: not-allowed;
    opacity: 0.7;
}

#forgot-password-link {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
}
#forgot-password-link:hover { text-decoration: underline; }

#forgot-password-block {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-container input[type="text"]#forgot-email {
    margin-bottom: 0;
}

#forgot-submit-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#forgot-submit-btn:hover:not(:disabled) { background-color: var(--color-primary-dark, #1255a0); }
#forgot-submit-btn:disabled {
    background-color: var(--palette-slate);
    cursor: not-allowed;
    opacity: 0.6;
}

#register-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
#register-overlay.over-landing {
    background-color: rgba(0, 0, 0, 0.5);
}

.register-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px;
    background-color: var(--palette-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 540px;
    border: 1px solid #e9ecef;
    zoom: 0.82;
}

.register-close-btn {
    display: none; position: absolute; top: 10px; right: 14px;
    background: none; border: none; font-size: 28px; line-height: 1;
    color: #999; cursor: pointer; padding: 0;
}
.register-close-btn:hover { color: #333; }
#register-overlay.over-landing .register-close-btn { display: block; }

.register-container h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.register-container input[type="text"] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--color-text-main);
    background-color: #f5f7fa;
    border: 1px solid #e0e5eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.register-container input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--palette-white);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#register-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    margin-top: 8px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#register-btn:hover:not(:disabled) {
    background-color: var(--color-secondary-hover);
}
#register-btn:disabled {
    background-color: var(--palette-slate);
    cursor: not-allowed;
    opacity: 0.7;
}

.login-consent {
    margin-top: 4px;
}
.login-consent__label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.login-consent__label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.login-consent__text a {
    color: var(--color-primary);
    text-decoration: underline;
}
.login-consent__text a:hover {
    text-decoration: none;
}
/* =========================================
   20. AUTOCOMPLETE STYLES (resultsDiv)
   ========================================= */

.autocomplete-results {
    position: absolute;
    z-index: 1000;
    background: var(--palette-white);
    border: 1px solid var(--border-table);
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    top: 100%; /* Должен быть позиционирован ниже поля ввода */
    left: 0;
    width: 100%; /* Ширина будет задана JS в run-time */
}

.autocomplete-item {
    padding: 8px; 
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-main);
}

.autocomplete-item:hover {
    background: var(--bg-table-hover);
}

.autocomplete-item.new-item {
    color: var(--color-primary);
    font-weight: 500;
}

/* --- Исправление "двойной линии" --- */
/* Скрываем контейнер результатов поиска по умолчанию. 
   Иначе его рамка (border) отображается как лишняя линия под полем ввода, 
   пока список не будет открыт скриптом. */
.picker-results {
    display: none;
}

/* =========================================
   21. USERS MODULE STYLES (Перенесены из users.css)
   ========================================= */

/* --- HEADER FIXES --- */
.directory-header.users-header {
    gap: 10px;
}

.users-header .header-actions {
    display: flex;
    gap: 10px; 
    align-items: center;
}

/* --- PHOTO PREVIEW FIXES --- */
.form-inline-panel .photo-preview { 
    width: 150px; 
    height: 150px; 
    margin: 0 auto 10px; 
    border: 1px solid var(--border-table); 
    border-radius: 50%; 
    overflow: hidden; 
    background: #f5f5f5;
    position: relative;
}
.form-inline-panel .photo-preview img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}

/* СТИЛИ АВАТАРКИ ПО УМОЛЧАНИЮ */
.user-default-avatar img {
    width: 100%; 
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-inline-panel .btn-select-photo {
    width: 150px;
}

/* --- STATUS BADGES FIX --- */
.status-badge.status-Пользователь { background-color: #d1ecf1; color: #0c5460; }
.status-badge.status-Администратор { background-color: #cfe2ff; color: #084298; }
.status-badge.status-Заблокирован { background-color: #f8d7da; color: #842029; }

/* =========================================
   22. UNIVERSAL PICKER SYSTEM (Должности, Документы и т.д.)
   ========================================= */

.position-group, .form-group {
    position: relative; /* Создает контекст для вложенных элементов */
}

/* ФИКС: Чтобы Пикер не обрезался краями ячеек при редактировании в таблице */
.io-editor-row td {
    padding: 0 !important;
    border: none !important;
    overflow: visible !important; /* Гарантия видимости Пикера поверх таблицы */
}

.position-picker-host {
    display: none;
    position: absolute; /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ */
    z-index: 5000;
    width: 600px;
    margin-top: 2px;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

/* Popup-пикер должностей в Оргструктуре (fixed, создаётся в document.body) */
.position-picker-popup {
    position: fixed;
    z-index: 5000;
    width: 600px;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
    padding: 0;
}
.position-picker-popup .picker-search-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border-table);
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}
.position-picker-popup .picker-table-container {
    max-height: 300px;
    overflow-y: auto;
}
.position-picker-popup .picker-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}
.position-picker-popup .picker-table th,
.position-picker-popup .picker-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.position-picker-popup .picker-table th {
    background-color: var(--bg-table-header);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.position-picker-popup .picker-table tr:hover td {
    background-color: var(--top-nav-hover-bg);
    cursor: pointer;
}
.position-picker-popup .pos-in-current-dept td {
    font-weight: 600;
    background-color: #ecf5fb;
}
.position-picker-popup .add-pos-btn-header {
    text-align: right;
}

/* --- Стили Селектора (кнопка выбора в формах) --- */
.position-selector {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background-color: var(--palette-white); /* Фон селектора теперь всегда белый */
    font-family: 'Inter', sans-serif;
}
.position-selector .selected-value, 
.position-selector .selected-valueCol {
    flex-grow: 1;
    padding: 10px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}
.position-selector .select-position-btn,
.position-selector .select-department-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    margin: 2px;
    border: none;
    background-color: #e9ecef;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    border-left: 1px solid #ccc;
    color: var(--main-text-color);
}
.position-selector .select-position-btn:hover,
.position-selector .select-department-btn:hover {
    background-color: #dee2e6;
}

/* --- Внутренняя структура Пикера (вылетающего окна) --- */
.picker-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.picker-actions .picker-search-input {
    flex-grow: 1;
    margin-bottom: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}
.picker-actions .picker-add-btn.api-action-btn {
    background-color: transparent;
    border: none;
    color: var(--palette-sky-blue);
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 12px;
    cursor: pointer;
}
.picker-actions .picker-add-btn.api-action-btn:hover {
    text-decoration: underline;
}

.picker-table-container {
    max-height: 250px; 
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.picker-table {
    width: 100%;
    border-collapse: collapse;
}
.picker-table th, .picker-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.picker-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.picker-table tr:hover td {
    background-color: var(--top-nav-hover-bg);
    cursor: pointer;
}

/* --- Адаптация TableBuilder для Пикера --- */
.position-picker-host .tb-wrapper {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.position-picker-host .tb-tr {
    cursor: pointer;
}

.position-picker-host .tb-tr.selected {
    background-color: #e3f2fd;
    font-weight: 600;
    scroll-margin-top: 35px; /* Зазор при автопрокрутке с учетом шапки таблицы */
}

.position-picker-host .tb-tr.selected .tb-td {
    background-color: #e3f2fd;
    border-top: 1px solid #bbdefb;
    border-bottom: 1px solid #bbdefb;
}

.picker-header-area {
    padding: 8px 12px;
    background: #fff; /* Белый фон для чистоты */
    border-bottom: 1px solid var(--border-table);
    display: flex;
    gap: 12px;
    align-items: center;
}

.picker-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.picker-add-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

/* Убираем любые отступы сверху таблицы, чтобы первая строка прилипала к линии */
.picker-table {
    margin-top: 0;
    border-top: none;
}

.picker-table-container {
    max-height: 280px;
    overflow-y: auto;
    border-top: none; /* Убираем двойную линию под поиском */
}

.picker-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0 5px;
    margin-left: auto;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-close-btn:hover {
    color: var(--color-danger);
}

.picker-search-input {
    flex-grow: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.picker-add-btn {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    white-space: nowrap;
    transition: color 0.2s;
}

.picker-add-btn:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.picker-table-container {
    max-height: 300px;
    overflow-y: auto;
}

/* Настройки таблицы внутри пикера для компактности */
.picker-table-container .tb-th {
    top: 0;
    padding: 8px 12px;
    font-size: 12px;
}

.picker-table-container .tb-td {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.picker-table-container .tb-tr:hover {
    background-color: var(--bg-table-hover);
}

/* Элементы иерархического списка (для выбора подразделений) */
.picker-hierarchy-container {
    max-height: 300px;
    overflow-y: auto;
}
.picker-hierarchy-item {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s;
    color: var(--color-text-main);
}
.picker-hierarchy-item:hover {
    background-color: var(--bg-table-hover);
}
.picker-hierarchy-item.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-table-header);
}
/* Стили диалога подтверждения внутри пикера (для Оргструктуры) */
.confirm-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}
.confirm-dialog-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-main);
    font-weight: 500;
}
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.confirm-dialog-actions .confirm-yes {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.confirm-dialog-actions .confirm-no {
    background-color: var(--palette-neutral-grey);
    color: var(--color-text-main);
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
}
/* --- Элементы иерархического списка (Выбор подразделений) --- */
.picker-hierarchy-container {
    max-height: 300px;
    overflow-y: auto;
    padding: 5px 0;
}

.picker-hierarchy-item {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s;
    color: var(--color-text-main);
}

.picker-hierarchy-item:hover {
    background-color: var(--bg-table-hover);
}

.picker-hierarchy-item.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-table-header);
    color: var(--color-text-light);
}

/* --- Диалог подтверждения внутри Пикера (Confirm Dialog) --- */
.confirm-dialog {
    background-color: #f8f9fa !important;
    padding: 15px !important;
}

.confirm-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.confirm-dialog-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-main);
    font-weight: 500;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.confirm-dialog-actions .confirm-yes {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.confirm-dialog-actions .confirm-no {
    background-color: var(--palette-neutral-grey);
    color: var(--color-text-main);
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
/* Универсальные стили для хостов иерархических пикеров (Выборка, отделы и т.д.) */
.department-picker-host {
    display: none;
    /* position: fixed; - управляется через JS для гибкости */
    z-index: 10000;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* =========================================
   23. BPMN CONSTRUCTOR
   ========================================= */
.bpmn-constructor-wrapper {
    display: flex;
    gap: 20px;
    height: calc(100vh - 150px);
    width: 100%;
    box-sizing: border-box;
}

/* Сайдбар (Палитра) */
.bpmn-palette {
    width: 250px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bpmn-palette h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 10px 0;
    text-align: left;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    background-color: var(--palette-white);
    cursor: grab;
    transition: all 0.2s ease;
}

.palette-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

.palette-item svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.palette-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
}

/* Основная область */
.bpmn-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Шапка конструктора */
.bpmn-header {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bpmn-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bpmn-title-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.bpmn-title-group input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-size: 14px;
    width: 250px;
    color: var(--color-text-main);
    background-color: #fff;
}

.bpmn-title-group input[type="text"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

.process-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background-color: #f8f9fa;
    width: 320px;
    justify-content: space-between;
}

.process-selector span {
    font-size: 14px;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-process-btn {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
    transition: 0.2s;
}

.select-process-btn:hover {
    background-color: #dde2e6;
}

.reset-btn-header {
    background-color: #f1f3f5;
    border: 1px solid var(--border-table);
    color: var(--color-text-main);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    margin-left: auto;
    transition: 0.2s;
}

.reset-btn-header:hover {
    background-color: #e2e6ea;
}

/* Холст */
.bpmn-canvas {
    flex: 1;
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: auto;
    background-image: 
        linear-gradient(to right, #f1f3f5 1px, transparent 1px), 
        linear-gradient(to bottom, #f1f3f5 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

.bpmn-connectors-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

/* Фигуры на холсте */
.bpmn-element {
    position: absolute;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
    border: 2px solid #000;
    background-color: #fff;
    z-index: 20;
}

.bpmn-element.task {
    width: 100px;
    height: 40px;
    border-radius: 8px;
}

.bpmn-element.event {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.bpmn-element.event-end {
    border-width: 4px;
}

.bpmn-element.gateway {
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    transform-origin: center center;
}

.bpmn-element.selected {
    outline: 2px dashed var(--color-primary);
    outline-offset: 4px;
}

/* Пул/Дорожка */
.bpmn-lane-element {
    position: absolute;
    border: 1px solid #000;
    background-color: transparent;
    display: flex;
    box-sizing: border-box;
    z-index: 5;
}

.bpmn-lane-element.selected {
    outline: 2px dashed var(--color-primary);
    outline-offset: 2px;
}

.lane-header {
    width: 40px;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    cursor: move;
}

.lane-header span {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-weight: 500;
    font-size: 13px;
    color: #000;
}

.lane-content {
    flex: 1;
    position: relative;
}

/* Привязанная к справочнику дорожка (Должность) */
.lane-header.linked span {
    color: var(--palette-sky-blue);
}

/* Оверлей взаимодействия (Стрелки) */
.interaction-overlay {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 100;
    border: 1px dashed var(--color-primary);
}

.interaction-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.interaction-handle svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.handle-top { top: 0; left: 50%; transform: translate(-50%, -50%); }
.handle-right { top: 50%; right: 0; transform: translate(50%, -50%); }
.handle-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.handle-left { top: 50%; left: 0; transform: translate(-50%, -50%); }

.handle-top svg { transform: rotate(-90deg); }
.handle-right svg { transform: rotate(0deg); }
.handle-bottom svg { transform: rotate(90deg); }
.handle-left svg { transform: rotate(180deg); }

/* Кнопка удаления */
.delete-btn {
    position: absolute;
    background-color: #fff;
    border: 1px solid var(--border-table);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.delete-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-muted);
    fill: none;
    stroke-width: 2;
}

.delete-btn:hover {
    background-color: #ffeaea;
    border-color: var(--color-danger);
}

.delete-btn:hover svg {
    stroke: var(--color-danger);
}

/* Режим технического отчета */
.bpmn-main.info-mode .bpmn-canvas,
.bpmn-main.info-mode .bpmn-zoom-fixed-container,
.bpmn-palette.info-hidden {
    display: none !important;
}

/* Исправленный контейнер отчета (без отступов для плотного прилегания шапки) */
#scheme-info-container {
    flex: 1;
    background: #fff;
    overflow-y: auto;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    animation: fadeIn 0.2s ease-out;
    display: flex;
    flex-direction: column;
}

/* Форсируем растяжение таблицы на всю ширину */
#scheme-info-container .tb-wrapper {
    width: 100% !important;
    border: none !important; /* Убираем внешнюю рамку, так как она есть у контейнера */
}

#scheme-info-container .tb-table {
    width: 100% !important;
    margin: 0;
}

/* Бейдж для номера дорожки/должности */
.lane-badge {
    background-color: var(--palette-sky-blue);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

/* Светло-зеленый бейдж для самих дорожек */
.lane-badge-green {
    background-color: #2ecc71; /* Зеленый */
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

/* Подсветка привязанной дорожки */
.lane-header.linked span {
    color: var(--palette-sky-blue) !important;
    font-weight: 700;
}

/* Фикс для Пикера внутри холста Конструктора */
#bpmn-lane-picker-host {
    min-width: 600px;
	z-index: 20000 !important;
}

/* =========================================
   24. SIDEBAR COLLAPSED STATE (Для Конструктора)
   ========================================= */
.sidebar {
    transition: width 0.3s ease;
}

/* Базовые стили кнопки переключения (убираем "палку") */
.toggle-sidebar-btn {
    background: none;
    border: none;
    color: var(--palette-white);
    cursor: pointer;
    padding: 0;
    margin-left: auto; /* Прижимаем вправо к краю логотипа */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    outline: none;
}

.toggle-sidebar-btn:hover {
    color: var(--color-primary);
}

/* Стили самой иконки-галочки */
.chevron-icon {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.3s ease;
}

/* Применяется, когда сайдбар свернут */
.sidebar.collapsed {
    width: 70px !important;
}

/* Разворот галочки при сворачивании (из < в >) */
.sidebar.collapsed .toggle-sidebar-btn .chevron-icon {
    transform: rotate(180deg);
}

/* Скрываем текст, логотип и прочие элементы при сворачивании */
.sidebar.collapsed .logo,
.sidebar.collapsed .nav-item a .nav-text,
.sidebar.collapsed .nav-item a .expand-arrow,
.sidebar.collapsed .submenu,
.sidebar.collapsed .close-sidebar-btn {
    display: none !important;
}

/* Выравнивание иконок в свернутом меню */
.sidebar.collapsed .nav-item a {
    justify-content: center;
    padding: 15px 0;
}

.sidebar.collapsed .nav-item .icon {
    margin: 0;
}

.sidebar.collapsed .logo-container {
    justify-content: center;
    padding: 15px 10px; /* Добавили отступы для центровки кнопки */
}

/* =========================================
   25. BPMN CONSTRUCTOR FIXES
   ========================================= */
/* Переопределяем корневой класс конструктора, чтобы зафиксировать элементы в строку */
.bpmn-constructor-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Строго в строку */
    flex-wrap: nowrap !important;   /* ЗАПРЕТ переноса на новую строку */
    align-items: stretch !important;
    gap: 20px;
    height: calc(100vh - 150px);
    width: 100%;
    box-sizing: border-box;
}

/* Гарантируем, что палитра не сожмется */
.bpmn-palette {
    flex-shrink: 0 !important;
    width: 250px !important;
}

/* Гарантируем, что рабочая область займет остаток, но не переполнит родителя */
.bpmn-main {
    flex-grow: 1 !important;
    min-width: 0 !important; /* Критически важно для предотвращения разрыва flex-контейнера */
}
/* =========================================
   26. BPMN NEW SHAPES
   ========================================= */
/* Подпроцесс (плюсик снизу) */
.bpmn-element.subprocess::after {
    content: '+';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    font-size: 14px;
    line-height: 12px;
    text-align: center;
    background-color: #fff;
    font-weight: bold;
}

/* Событие - Сообщение (конверт внутри) */
.bpmn-element.event-message::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 14px;
    border: 2px solid #000;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 14" xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 10,7 20,0" stroke="black" stroke-width="2" fill="none"/></svg>') no-repeat;
}

/* База данных / Хранилище */
.bpmn-element.data-store {
    border: none;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 50 60" xmlns="http://www.w3.org/2000/svg"><path d="M4 14 v 32 q 21 15 42 0 v -32" fill="white" stroke="black" stroke-width="2"/><ellipse cx="25" cy="14" rx="21" ry="8" fill="white" stroke="black" stroke-width="2"/></svg>') no-repeat center center;
    background-size: contain;
}

/* Документ / Объект данных */
.bpmn-element.data-object {
    border: none;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 55" xmlns="http://www.w3.org/2000/svg"><path d="M2 2 L25 2 L38 15 L38 53 L2 53 Z" fill="white" stroke="black" stroke-width="2"/><path d="M25 2 L25 15 L38 15" fill="none" stroke="black" stroke-width="2"/></svg>') no-repeat center center;
    background-size: contain;
}

/* Текстовая аннотация (комментарий) */
.bpmn-element.text-annotation {
    border: none;
    border-left: 2px solid #000;
    background: transparent;
}
.bpmn-element.text-annotation::before,
.bpmn-element.text-annotation::after {
    content: '';
    position: absolute;
    left: -2px;
    width: 10px;
    border-top: 2px solid #000;
}
.bpmn-element.text-annotation::before { top: 0; }
.bpmn-element.text-annotation::after { bottom: 0; }

/* =========================================
   27. BPMN IMPORT SPLIT PANEL (FIXED)
   ========================================= */

/* Контейнер-строка: [Панель Импорта] + [Холст] */
.bpmn-content-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 0;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
}

/* Стили для панели импорта (Левая половина) */
.bpmn-import-split-panel {
    width: 50%;
    min-width: 400px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 2px solid var(--palette-neutral-grey); /* Четкий разделитель */
    animation: slideInLeft 0.2s ease-out;
}

/* Исправленная темная шапка (без отрицательных маржинов) */
.bpmn-import-split-panel .header-dark-container {
    background-color: var(--color-secondary);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0; /* Убрали отрицательные отступы */
    flex-shrink: 0;
}

.bpmn-import-split-panel .header-dark-container h3 {
    color: #fff;
    margin: 0;
    font-size: 16px;
}

/* Внутренний контейнер с контентом */
.bpmn-import-split-panel .import-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0; /* Важно для скролла textarea */
}

/* Текстовая область на всю высоту */
.bpmn-import-split-panel .textarea-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bpmn-import-split-panel textarea.form-control {
    flex-grow: 1;
    height: 100% !important;
    resize: none;
    font-family: Consolas, monospace !important;
    font-size: 12px;
    padding: 15px;
    background-color: #fcfcfc;
}

/* Футер панели */
.bpmn-import-split-panel .form-actions-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    justify-content: flex-end;
    flex-shrink: 0;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Модификация холста при открытом импорте */
#bpmn-canvas.split-view {
    border-left: none;
    border-radius: 0;
}
/* =========================================
   28. BPMN PALETTE COLLAPSE & PREVIEW
   ========================================= */

/* Шапка палитры */
.palette-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    height: 24px; /* Фиксированная высота заголовка */
}

.palette-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--color-text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.palette-toggle-btn:hover {
    background-color: var(--bg-table-hover);
    color: var(--color-primary);
}
.palette-toggle-btn svg {
    width: 18px; height: 18px;
}

/* Состояние: Свернуто */
.bpmn-palette {
    transition: width 0.3s ease;
    overflow-x: hidden; /* Скрываем вылезающий текст */
}

.bpmn-palette.collapsed {
    width: 70px !important;
    padding: 20px 10px;
}

/* Скрываем заголовок "Элементы" при сворачивании */
.bpmn-palette.collapsed .palette-header-row h3 {
    display: none;
}

/* Центрируем кнопку переключения */
.bpmn-palette.collapsed .palette-header-row {
    justify-content: center;
}

/* Поворачиваем стрелку */
.bpmn-palette.collapsed .palette-toggle-btn svg {
    transform: rotate(180deg);
}

/* Скрываем текст элементов */
.bpmn-palette.collapsed .palette-item span {
    display: none;
}

/* Центрируем иконки элементов */
.bpmn-palette.collapsed .palette-item {
    justify-content: center;
    padding: 10px 5px;
}
.bpmn-palette.collapsed .palette-item svg {
    margin: 0;
}
/* =========================================
   29. BPMN ZOOM CONTROLS & CANVAS FIX
   ========================================= */

/* Контейнер для скролла */
#bpmn-canvas {
    overflow: auto; /* Показываем скроллбары, если контент больше холста */
}

/* Внутренний контейнер, который будет масштабироваться */
.bpmn-canvas-content {
    position: relative;
    width: 2500px; /* Большая ширина по умолчанию */
    height: 1500px; /* Большая высота по умолчанию */
    transform-origin: top left; /* Масштабирование от левого верхнего угла */
    transition: transform 0.1s linear, background-size 0.1s linear;
    
    /* Сетка как фон */
    background-image: 
        linear-gradient(to right, #f1f3f5 1px, transparent 1px), 
        linear-gradient(to bottom, #f1f3f5 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Панель управления зумом */
.bpmn-zoom-fixed-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Чтобы быть поверх элементов на холсте */
    pointer-events: none; /* Чтобы контейнер не мешал кликам по холсту */
}

.bpmn-zoom-controls {
    display: flex;
    align-items: center;
    background-color: var(--palette-white);
    border: 1px solid var(--palette-border-grey);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Усилили тень для контраста */
    pointer-events: auto; /* Возвращаем кликабельность самим кнопкам */
}

.zoom-btn {
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.zoom-btn:hover {
    background-color: var(--palette-neutral-grey);
}

#zoom-display {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
    padding: 0 8px;
    min-width: 50px;
    text-align: center;
    border-left: 1px solid var(--palette-border-grey);
    border-right: 1px solid var(--palette-border-grey);
    margin: 0 4px;
}
/* Крестик внутри эксклюзивного шлюза */
.bpmn-element.gateway::before, .bpmn-element.gateway::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 20px;
    background-color: #000;
    transform-origin: center;
    pointer-events: none;
}
.bpmn-element.gateway::before { transform: translate(-50%, -50%) rotate(0deg); }
.bpmn-element.gateway::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Подписи к элементам и стрелкам (BPMN Labels) */
.bpmn-label {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7); /* Полупрозрачный фон для читаемости на сетке */
    padding: 2px;
    font-size: 11px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    z-index: 100;
    pointer-events: none;
    border-radius: 2px;
    white-space: normal; /* Разрешаем перенос строк */
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Стартовое событие - всегда круг */
.bpmn-element.event-start, .bpmn-element.event-end, .bpmn-element.event-message {
    border-radius: 50% !important;
}
/* Горизонтальный заголовок для внешних пулов */
.bpmn-lane-element.horizontal-header { flex-direction: column; }
.bpmn-lane-element.horizontal-header .lane-header {
    width: 100% !important; height: 30px !important;
    border-right: none !important; border-bottom: 1px solid #000;
}
.bpmn-lane-element.horizontal-header .lane-header span { transform: none !important; }

/* Исправление фона документов (розовая заливка только внутри иконки) */
.bpmn-element.data-object { background-color: transparent !important; border: none !important; }

/* Конверт для Message Event */
.bpmn-element.event-message::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 12px;
    background-color: #fff; border: 1px solid #000;
    background-image: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%), 
                      linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
    background-size: 100% 1px; background-repeat: no-repeat; background-position: top;
}

/* =========================================
   30. BPMN SELECTOR CUSTOM STYLES
   ========================================= */
#edit-scheme-element-select option {
    padding: 5px;
}

.access-alert-overlay {
    backdrop-filter: blur(2px);
}

.access-alert-box .tb-wrapper {
    max-height: 400px;
    overflow-y: auto;
}
/* =========================================
   31. TASKS MODULE STYLES
   ========================================= */

.tasks-container .tb-wrapper {
    max-height: calc(100vh - 250px);
}

/* Цветовая индикация приоритетов для задач */
.status-badge.red { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.status-badge.yellow { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.status-badge.blue { background-color: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.status-badge.green { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* Текстовое поле описания в форме */
.task-edit-panel textarea.task-desc {
    resize: none;
    line-height: 1.4;
    padding: 10px;
}

/* Поля селекторов (имитация стиля справочника пользователей) */
.task-pos-selector, .task-user-selector {
    height: 40px;
    box-shadow: none !important;
}

.task-pos-selector .selected-value-pos,
.task-user-selector .selected-value-user {
    color: #333;
    font-weight: 500;
}
/* =========================================
   32. PROCESS GROUPS GRID (Группы процессов)
   ========================================= */
.process-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    align-items: start;
}
/* Компактный режим: не давая медиа-запросу схлопнуть */
body.compact-ui .process-groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
}
body.compact-ui .steps-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
}
body.compact-ui .actions-grid,
body.compact-ui .instructions-grid,
body.compact-ui .scripts-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
/* Компактный режим: отключаем трюк сдвига скроллбара — при zoom он уходит за экран */
body.compact-ui .content-body > .module-container {
    margin-right: -20px;
    padding-right: 20px;
}

.process-card {
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
    position: relative;
    cursor: default;
    min-height: 200px; 
}

.process-card .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.process-card:hover { 
    border-color: #aaa; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); 
}

.process-card.dragging { opacity: 0.5; cursor: grabbing; }

.process-card.drag-over { 
    transform: scale(1.03); 
    outline: 2px dashed var(--palette-sky-blue); 
    outline-offset: 2px; 
    z-index: 10; 
}

.card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 8px; 
    font-size: 14px; 
    color: var(--color-text-light); 
}

.card-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: var(--color-text-main); 
    margin: 0 0 10px 0; 
}

.card-actions {
    margin-bottom: 15px;
    font-size: 14px;
    display: flex;
    gap: 15px;
    white-space: nowrap;
}
.card-actions a { color: var(--palette-sky-blue); text-decoration: none; z-index: 2; position: relative; }
.card-actions a:hover { text-decoration: underline; }

.process-list-wrapper { 
    flex-grow: 1; 
    position: relative; 
    margin-bottom: 10px; 
    max-height: 180px; 
    overflow-y: auto; 
}

.process-list { 
    list-style-type: none; 
    padding-left: 0; 
    margin: 0; 
}

.process-list li { 
    font-size: 14px; 
    line-height: 1.5; 
    padding: 8px 10px; 
    color: var(--color-text-main); 
    cursor: pointer; 
    border-radius: var(--radius-sm); 
}

.process-list li:hover { background-color: var(--bg-table-hover); }

.card-footer { 
    margin-top: auto; 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    border-top: 1px solid var(--border-table); 
    padding-top: 15px; 
    font-size: 13px; 
    color: var(--color-text-light); 
    gap: 8px; 
    flex-wrap: wrap; 
}

.add-process-to-group-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px; 
    font-size: 15px; 
    color: var(--color-text-muted);
    background: var(--bg-table-header);
    border: 2px dashed var(--palette-border-grey);
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin-top: 10px;
    transition: 0.2s;
}

.add-process-to-group-btn:hover {
    background: var(--palette-neutral-grey);
    border-color: #adb5bd;
    color: var(--color-text-main);
}

.group-card-footer-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.add-step-btn.add-process-to-group-btn { min-height: 40px; margin-bottom: 10px; }

.card-group-meta { color: var(--palette-sky-blue); }

.group-card-footer-actions .action-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-table);
    background: var(--palette-white);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}
.group-card-footer-actions .action-icon:hover {
    background-color: var(--bg-table-header);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-color: var(--color-primary);
}

/* Индикатор сохранения (AppModules.pendingSave) */
#save-pending-indicator {
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    pointer-events: none;
}
#save-pending-indicator::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-save 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin-save { to { transform: rotate(360deg); } }

/* =========================================
   33. PROCESS HEADER & INFO PANEL
   ========================================= */

.process-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    background-color: var(--palette-white);
    padding: 10px 20px;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
}

.process-dropdown {
    position: relative;
    min-width: 0;
}

.process-dropdown:first-child {
    flex: 0 1 40%;
    border-right: 1px solid var(--border-table);
    padding-right: 20px;
}

.process-dropdown:last-child {
    flex: 1 1 60%;
}

#current-group-btn,
#current-process-btn {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 10px 35px 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    text-align: left;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.2s;
}

#current-group-btn:hover,
#current-process-btn:hover {
    color: var(--color-primary);
}

#current-group-btn::after,
#current-process-btn::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--palette-white);
    min-width: 100%;
    width: max-content;
    max-width: 500px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid var(--border-table);
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-content.show { display: block; }

.dropdown-content a {
    color: var(--color-text-main);
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px; 
    line-height: 1.4; 
    transition: background-color 0.2s;
}

.dropdown-content a:hover { background-color: var(--bg-table-hover); }

.dropdown-content a.active { 
    background-color: var(--color-primary); 
    color: var(--palette-white);
    font-weight: 500; 
}

/* Инфо-панель */
.info-panel { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header spacer"
        "details metrics";
    gap: 20px; 
    background-color: var(--bg-table-header); 
    padding: 20px; 
    border-radius: var(--radius-lg); 
    margin-bottom: 20px; 
    border: 1px solid var(--border-table); 
}

.info-panel-left { display: flex; flex-direction: column; gap: 8px; }

.info-panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

#info-panel-process-title { font-size: 16px; }

.info-panel-header-row > p { flex: 1; min-width: 0; margin: 0; }

.header-main-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.header-icon-btn {
    width: 42px;
    height: 42px;
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-muted);
}

.header-icon-btn:hover {
    background-color: var(--bg-table-header);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-icon-btn.danger:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.header-icon-btn.locked {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.process-actions {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.process-actions a { color: var(--palette-sky-blue); text-decoration: none; }
.process-actions a:hover { text-decoration: underline; }

.process-actions > div { display: flex; gap: 15px; }

.process-version-date {
    font-size: 13px;
    color: var(--color-text-muted);
}

.process-version-author {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.info-details-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: start;
    margin-top: 12px;
}

.info-version-box {
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    background: var(--bg-table-header);
    white-space: nowrap;
}

.info-row { display: grid; grid-template-columns: 140px 1fr; font-size: 14px; line-height: 1.4; }
.info-label { color: var(--color-text-muted); }
.info-panel-right { font-size: 14px; padding-left: 20px; border-left: 1px solid var(--border-table); }
.info-row-metric { display: flex; justify-content: space-between; padding: 4px 0; }

/* =========================================
   34. PROCESS FLOW (STEPS, ACTIONS, INSTR.)
   ========================================= */

.process-flow { margin-top: 20px; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    position: relative;
}

.step-card {
    background: var(--palette-white);
    border-radius: var(--radius-md);
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--border-table);
    position: relative;
    padding-bottom: 55px;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}
.step-card.nav-highlight,
.action-card.nav-highlight,
.instruction-card.nav-highlight,
.script-card.nav-highlight {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
    background: #eff6ff;
}

.step-header { font-weight: 600; color: var(--color-danger); margin-bottom: 8px; }
.step-description { font-size: 15px; font-weight: 500; margin-bottom: 8px; flex-grow: 1; }
.step-assignee { font-size: 13px; color: var(--color-text-muted); margin-bottom: 15px; }

.step-card-footer {
    position: absolute;
    bottom: 8px; left: 15px; right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-actions-btn {
    background-color: var(--bg-table-header);
    border: 1px solid var(--palette-border-grey);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: 0.2s;
}
.toggle-actions-btn:hover { background-color: var(--palette-neutral-grey); }

.actions-container {
    grid-column: 1 / -1; 
    background-color: rgba(0,0,0,0.02);
    border: 1px solid var(--palette-neutral-grey);
    padding: 15px;
    border-radius: var(--radius-md);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.action-card {
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-md);
    padding: 12px;
    position: relative;
    padding-bottom: 40px; 
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
}
.action-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }

.action-description { font-size: 14px; font-weight: 500; margin-bottom: 8px; flex-grow: 1; }
.action-number { font-weight: 600; color: var(--color-danger); margin-right: 5px; }
.action-assignee { font-size: 12px; color: var(--color-text-light); margin-bottom: 10px; }

.instruction-btn, .script-btn {
    background-color: transparent;
    border: 1px solid var(--border-table);
    color: var(--color-text-main);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
}
.instruction-btn:hover, .script-btn:hover { background-color: var(--bg-table-hover); }

.instructions-container {
    grid-column: 1 / -1;
    padding: 15px;
    margin-top: 15px;
    background-color: var(--bg-table-header);
    border: 1px solid var(--palette-neutral-grey);
    border-radius: var(--radius-md);
}

.instructions-grid, .scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.instruction-card, .script-card {
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 40px; 
    min-height: 90px;
}

.script-card { border-left-color: var(--color-danger); }

.instruction-number, .script-number { font-weight: 600; color: var(--color-text-muted); margin-right: 8px; }

.add-action-btn, .add-instruction-btn, .add-script-btn, .add-step-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 80px; font-size: 13px;
    color: var(--color-text-muted);
    background: var(--bg-table-header);
    border: 2px dashed var(--palette-border-grey);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: 0.2s;
}
.add-action-btn:hover, .add-instruction-btn:hover, .add-script-btn:hover, .add-step-btn:hover {
    background: var(--palette-neutral-grey);
    border-color: #adb5bd;
}

.add-process-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: var(--color-text-muted);
    background: var(--bg-table-header);
    border: 2px dashed var(--palette-border-grey);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
}
.add-process-btn:hover { background: var(--palette-neutral-grey); border-color: #adb5bd; color: var(--color-text-main); }

/* Drag states */
.step-card.dragging, .action-card.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.step-card.drag-over-before { border-top: 3px solid var(--color-primary); }
.step-card.drag-over-after { border-bottom: 3px solid var(--color-primary); }
.action-card.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.instruction-card.dragging, .script-card.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.instruction-card.drag-over, .script-card.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
@keyframes dnd-highlight-fade { 0% { outline-color: rgba(52,152,219,0.8); background-color: #eaf4fd; } 100% { outline-color: transparent; background-color: #fff; } }
.dnd-highlight { outline: 3px solid rgba(52,152,219,0.8) !important; outline-offset: -1px; animation: dnd-highlight-fade 2.5s ease-out forwards !important; }

/* DnD Context Menu */
.dnd-context-menu { position: absolute; z-index: 10000; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 280px; max-width: 400px; overflow: hidden; }
.dnd-menu-title { padding: 10px 14px; background: var(--color-primary, #3498db); font-size: 13px; font-weight: 600; color: #fff; border-bottom: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dnd-menu-option { padding: 10px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid #f0f0f0; }
.dnd-menu-option:hover { background: #e8f4fd; }
.dnd-menu-warning { margin-top: 4px; font-size: 11px; color: #d32f2f; font-weight: 500; }
.dnd-menu-cancel { padding: 8px 14px; font-size: 12px; color: #999; cursor: pointer; text-align: center; }
.dnd-menu-cancel:hover { background: #fff0f0; color: #d32f2f; }

/* Delete states */
.step-card.is-deleting {
    background-color: #fff8f8;
    border-color: var(--color-danger);
    padding: 0;
    min-height: 145px;
}
.action-card.is-deleting {
    background-color: #fff8f8;
    border-color: var(--color-danger);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.step-delete-view, .action-delete-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px 15px;
    height: 100%;
    box-sizing: border-box;
}
.action-delete-view { flex-direction: column; display: block; }
.step-delete-view p, .action-delete-view p { font-size: 14px; font-weight: 500; margin-bottom: 15px; }
.step-delete-view .delete-inline-panel,
.action-delete-view .delete-inline-panel { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px 15px; }

/* Action card footer */
.action-card-footer {
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Instruction card internals */
.instruction-content { width: 100%; flex-grow: 1; }
.instruction-description { font-size: 14px; margin-right: 10px; margin-bottom: 6px; }
.instruction-assignee { font-size: 12px; color: var(--color-text-light); margin: 0; }
.instruction-card-footer {
    position: absolute;
    bottom: 8px;
    left: 12px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
}

/* Script card internals */
.scripts-container {
    grid-column: 1 / -1;
    padding: 15px;
    margin-top: 15px;
    background-color: var(--bg-table-header);
    border: 1px solid var(--palette-neutral-grey);
    border-radius: var(--radius-md);
}
.script-card-footer {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    align-items: center;
}

/* =========================================
   35. FLOW EDIT FORMS (Inside Cards)
   ========================================= */

/* Трансформация карточки при редактировании */
.step-card.is-editing,
.action-card.is-editing,
.instruction-card.is-editing,
.script-card.is-editing {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
    padding: 0;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface-edit);
}
/* Шаг: один слот, без минимальной ширины */
.step-card.is-editing { grid-column: auto !important; min-width: 0 !important; }
/* Действия: auto-fill grid — один слот (не шире шага) */
.action-card.is-editing {
    grid-column: auto;
    min-width: 0;
    z-index: 10;
}
.instruction-card.is-editing, .script-card.is-editing {
    grid-column: auto;
    min-width: 0;
    z-index: 10;
}

.step-edit-form, .action-edit-form, .instruction-edit-form, .script-edit-form {
    padding: 12px;
    width: 100%;
}

/* Ряд "Порядок + Описание" */
.step-edit-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.form-group-order { flex: 0 0 55px; }
.form-group-desc { flex: 1; min-width: 0; }

/* action/instruction/script: input и textarea — прямые дети step-edit-row (без обёрток) */
.step-edit-row .action-edit-order,
.step-edit-row .instruction-edit-order,
.step-edit-row .script-edit-order {
    flex: 0 0 55px;
    width: 55px;
}
.step-edit-row .action-edit-description,
.step-edit-row .instruction-edit-description,
.step-edit-row .script-edit-description {
    flex: 1;
    min-width: 0;
}

/* Поля ввода внутри карточек */
.step-edit-description,
.action-edit-description,
.instruction-edit-description,
.script-edit-description {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--palette-border-grey);
    border-radius: var(--radius-sm);
    background-color: #fff;
    resize: none;
    overflow-y: hidden;
    line-height: 1.4;
}

input[type="number"].edit-order {
    width: 100%;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--palette-border-grey);
    border-radius: var(--radius-sm);
}

/* Стиль фокуса для полей редактирования */
.step-edit-description:focus,
.action-edit-description:focus,
.instruction-edit-description:focus,
.script-edit-description:focus,
input[type="number"].edit-order:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Кнопки действий формы */
.step-form-actions, 
.action-form-actions, 
.instruction-form-actions, 
.script-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding: 10px 12px;
    border-top: 1px solid var(--palette-neutral-grey);
}

/* Специальные кнопки внутри карточек */
.btn-step-ok, .btn-step-cancel,
.btn-step-save,
.btn-confirm-delete, .btn-confirm-cancel {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    border: 1px solid transparent;
}

.btn-step-save {
    background-color: var(--color-primary);
    color: white;
    height: 36px;
    padding: 0 20px;
}
.btn-step-save:hover { background-color: var(--color-primary-hover); }
.btn-step-save:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-step-ok {
    background-color: var(--color-primary);
    color: white;
}

.btn-step-cancel {
    background-color: var(--palette-neutral-grey);
    color: var(--color-text-main);
    border-color: var(--palette-border-grey);
}

/* Иконки действий на карточках (Шестеренка, Удаление и т.д.) */
.step-card-actions {
    display: flex;
    gap: 4px;
}

.step-action-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--palette-border-grey);
    background-color: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}

.step-action-btn svg { width: 14px; height: 14px; stroke: var(--color-text-muted); }
.step-action-btn:hover { border-color: var(--color-primary); background-color: var(--bg-table-hover); }
.step-action-btn:hover svg { stroke: var(--color-primary); }

/* =========================================
   36. PROCESS FORMS, SMK & FILE UPLOADS
   ========================================= */

/* Контейнер формы редактирования процесса (Ин-лайн) */
#process-form-view {
    background-color: var(--palette-white);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-top: 0; /* Убран верхний отступ для ровного прилегания */
    margin-bottom: 20px; /* Отталкиваем шаги вниз */
}

/* Форма редактирования карточки группы (inline) */
.card-edit-view {
    display: flex;
    flex-direction: column;
}

/* Общие стили форм (Группа, Процесс, СМК) */
.form-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}
.form-body .form-group {
    margin-bottom: 10px;
    position: relative;
}
.form-body label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-text-light);
}
.form-body input[type="text"],
.form-body input[type="number"],
.form-body input[type="date"],
.form-body select,
.form-body textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid var(--palette-border-grey); /* Рамка стала четче */
    border-radius: var(--radius-sm);
    background-color: var(--palette-white); /* Фон стал белым */
    box-sizing: border-box;
}
.form-body textarea {
    resize: vertical;
    min-height: 50px;
}
.form-body input[type="text"]:focus,
.form-body input[type="number"]:focus,
.form-body input[type="date"]:focus,
.form-body select:focus,
.form-body textarea:focus { outline: none; border-color: var(--color-primary); }
.form-body .form-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 15px;
}
.form-body .form-row .form-group {
    margin-bottom: 0;
}
.form-body .form-group-small { flex: 0 0 160px; }
.form-body .form-group-large { flex-grow: 1; }
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}
.form-group-checkbox input {
    width: 16px;
    height: 16px;
}

/* Кнопки ОК/Отмена в формах */
.form-actions-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-table);
}
.btn-modal-ok,
.btn-modal-cancel {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}
.btn-modal-ok {
    background-color: var(--color-primary);
    color: var(--palette-white);
}
.btn-modal-ok:hover { background-color: #2980b9; }
.btn-modal-cancel {
    background-color: var(--bg-table-header);
    color: var(--color-text-main);
    border-color: var(--border-table);
}
.btn-modal-cancel:hover {
    background-color: var(--palette-neutral-grey);
    border-color: var(--palette-border-grey);
}

.form-columns-wrapper {
    display: flex;
    gap: 30px;
}

.form-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Загрузка и превью схемы */
.scheme-upload-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.scheme-preview {
    width: 240px;
    height: 160px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--palette-border-grey);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.scheme-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Стили вкладок СМК */
.smk-tabs ul {
    display: flex;
    gap: 5px;
    align-items: center;
}

.smk-tabs .tab-button {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--color-text-main);
    transition: 0.2s;
    cursor: pointer;
}

.smk-tabs .tab-button:hover { background-color: var(--bg-table-hover); }
.smk-tabs .tab-button.active {
    background-color: var(--color-primary);
    color: white;
}

/* Форма документа СМК */
.smk-document-form-instance {
    padding: 20px;
    background-color: #fafdff;
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    animation: fadeIn 0.3s;
}

.smk-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Инлайн редактор документов (Пикер) */
.io-editor-content {
    padding: 15px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: #fff;
}

.picker-doc-table .btn-modal-select {
    padding: 4px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border-table);
    background-color: white;
    transition: 0.2s;
}

.picker-doc-table .btn-modal-select:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Состояние блокировки интерфейса */
#detail-container.is-blocked .header-icon-btn:not(#lock-process-btn):not(#copy-process-btn),
#detail-container.is-blocked .add-step-btn,
#detail-container.is-blocked .step-action-btn {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(1);
}

/* =========================================
   37. FINAL OVERRIDES (Приоритетные стили)
   ========================================= */

/* Гарантированное выделение активной карточки голубым фоном */
#steps-grid-container .step-card.selected,
#steps-grid-container .action-card.selected,
#steps-grid-container .instruction-card.selected,
#steps-grid-container .script-card.selected {
    background-color: #e8f4fd !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2) !important;
}

/* Дополнительно: чуть более яркий текст номера для активной карточки */
.step-card.selected .step-header,
.action-card.selected .action-number {
    color: var(--color-primary) !important;
}

/* =========================================
   38. BUTTON HOVER STATES
   ========================================= */
.btn-step-ok:hover { background-color: var(--color-primary-hover); }
.btn-step-cancel:hover { background-color: #DDE2E6; }
.btn-confirm-delete { background-color: var(--color-danger); color: white; }
.btn-confirm-delete:hover { background-color: var(--color-danger-hover); }
.btn-confirm-cancel { background-color: var(--color-primary); color: white; }
.btn-confirm-cancel:hover { background-color: var(--color-primary-hover); }

/* =========================================
   38b. LAYOUT & CHROME (migrated from style.css)
   ========================================= */

.app-container {
    display: flex;
    height: var(--vh-scaled, 100vh);
    width: 100%;
    overflow: hidden;
}

/* --- Сайдбар --- */
.sidebar { width: 240px; background-color: var(--sidebar-bg); padding-top: 0; display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease-in-out; }
.logo-container { display: flex; align-items: center; padding: 24px 16px; padding-top: calc(24px + env(safe-area-inset-top)); }
.logo { font-size: 24px; font-weight: 700; color: var(--palette-white); padding: 0 8px; flex-grow: 1; }
.sidebar-nav { padding: 0 16px; flex: 1; overflow-y: auto; }
.sidebar-footer { display: none; padding: 16px; border-top: 1px solid rgba(255,255,255,0.15); }
.sidebar-nav-footer { display: none; border-top: 1px solid rgba(255,255,255,0.15); padding: 12px 0 8px; margin-top: 8px; }
.sidebar-logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.1); color: var(--sidebar-text); border: none; border-radius: 8px; font-size: 15px; font-family: inherit; cursor: pointer; transition: background-color 0.2s; }
.sidebar-logout-btn:hover { background: var(--palette-red); color: #fff; }
.sidebar-logout-btn svg { stroke: currentColor; flex-shrink: 0; }
.nav-item a { display: flex; align-items: center; text-decoration: none; color: var(--sidebar-text); padding: 12px 40px 12px 16px; border-radius: 8px; margin-bottom: 4px; transition: background-color 0.2s ease, color 0.2s ease; position: relative; }
.nav-item .icon { margin-right: 16px; display: flex; align-items: center; flex-shrink: 0; }
.nav-item .icon svg { stroke: var(--sidebar-text); transition: stroke 0.2s ease; }
.nav-item:not(.active-parent) > a:hover { background-color: var(--sidebar-hover-bg); color: var(--palette-white); }
.nav-item.active-parent > a { background-color: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; }
.nav-item.active-parent > a .icon svg, .nav-item:not(.active-parent) > a:hover .icon svg { stroke: var(--palette-white); }
.nav-item a > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.expand-arrow { display: none; position: absolute; right: 16px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-right: 2px solid var(--sidebar-text); border-bottom: 2px solid var(--sidebar-text); transform: rotate(45deg); transition: transform 0.3s ease; }
.nav-item.active-parent > a .expand-arrow { border-color: var(--sidebar-active-text); }
.nav-item.open > a .expand-arrow { transform: rotate(-135deg); margin-top: -4px; }
.submenu { list-style: none; padding-left: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.nav-item.open > .submenu { max-height: 500px; }
.submenu li a { padding-left: 54px; font-size: 14px; font-weight: 400; }
.submenu li a.active { color: var(--palette-white); font-weight: 600; background-color: rgba(0,0,0,0.2); }

/* --- Основной контент --- */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.content-header {
    background-color: var(--content-header-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.header-top-row, .header-bottom-row { display: flex; width: 100%; align-items: center; }
.header-title-block { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-main-content { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.content-title { font-size: 28px; font-weight: 600; color: var(--main-text-color); margin: 0; }
.content-subtitle { display: none; }
.header-actions { margin-left: 20px; }
.header-action-button { background-color: var(--palette-red); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.2s ease; }
.header-action-button:hover { background-color: #c0392b; }
.header-bottom-row .top-nav { flex-grow: 1; }

/* --- Верхняя навигация --- */
.top-nav { width: 100%; }
.top-nav ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 8px; }
.top-nav a { display: inline-block; padding: 8px 16px; text-decoration: none; color: var(--top-nav-text); font-size: 16px; border-radius: 6px; transition: all 0.2s ease-in-out; background-color: transparent; font-family: 'Inter', sans-serif; font-weight: 400; }
.top-nav a:hover { color: var(--main-text-color); background-color: var(--top-nav-hover-bg); }
.top-nav a.active { background-color: var(--top-nav-active-bg); color: var(--top-nav-active-text); font-weight: 600; }
.top-nav-actions { display: none; align-items: center; gap: 10px; margin-left: auto; margin-right: 20px; }
.top-nav-actions button { display: flex; align-items: center; gap: 8px; background-color: var(--palette-white); border: 1px solid #ccc; color: var(--main-text-color); padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s; font-family: 'Inter', sans-serif; white-space: nowrap; }
.top-nav-actions button:hover { background-color: #f0f0f0; }
.top-nav-actions button svg { stroke: var(--main-text-color); }
.mobile-header-actions { display: none; }

.content-body {
    /* Тянем весь контент вниз на полную высоту экрана с учетом зума */
    min-height: calc(var(--vh-scaled) - 130px);
    max-height: calc(var(--vh-scaled, 100vh) - 130px);

    padding: 0 20px 20px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content-body > .module-container { 
    flex: 1; 
    min-height: 0; 
    overflow-y: auto; 
    
    /* Сдвигаем скроллбар вплотную к правому краю монитора */
    margin-right: -20px;
    padding-right: 20px; 
}
.placeholder-content { padding: 60px 40px; text-align: center; }
.placeholder-content p { font-size: 18px; color: var(--top-nav-text); }
.module-container { margin-top: 0px; }
.content-body.content-body-full-height { padding-top: 20px; padding-bottom: 20px; display: flex; flex-direction: column; }
.content-body.content-body-full-height > .module-container,
.content-body.content-body-full-height > .org-structure-wrapper { flex-grow: 1; }

/* --- Hamburger / мобильное меню --- */
.hamburger-menu { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin-right: 15px; z-index: 1001; color: var(--main-text-color); }
.hamburger-menu svg { display: block; stroke: currentColor; }
.close-sidebar-btn { display: none; color: var(--sidebar-text); background: none; border: none; cursor: pointer; padding: 6px; line-height: 0; }
.close-sidebar-btn svg { display: block; stroke: currentColor; }
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
.menu-overlay.active { opacity: 1; pointer-events: auto; }

/* --- Утилиты хедера --- */
.api-loader-container, .json-importer-container, #user-actions-container { display: none; align-items: center; gap: 10px; }
.api-loader-container { margin-left: 24px; }
#user-actions-container { position: absolute; top: 24px; right: 40px; z-index: 100; display: flex; align-items: center; }
.user-login-display { padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--main-text-color); background-color: var(--palette-light-grey); border-radius: 6px; border: 1px solid var(--border-color); }
.logout-btn { display: flex; align-items: center; gap: 8px; background-color: var(--palette-white); border: 1px solid var(--border-color); color: var(--main-text-color); }
.api-action-btn.logout-btn:hover { background-color: var(--palette-red); color: white; border-color: var(--palette-red); }
.logout-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; }

/* --- API кнопки --- */
.api-action-btn { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); background-color: var(--palette-white); color: var(--main-text-color); transition: background-color 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; }
.api-action-btn:hover { background-color: var(--palette-light-grey); }
.api-action-btn.active-undo { background-color: #7f8c8d; color: white; border-color: #707b7c; }
.api-action-btn.active-undo:hover { background-color: #95a5a6; }

/* --- App Loader --- */
#app-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--content-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10001; gap: 20px; }

/* --- Прочие утилиты --- */
.disabled-option { color: #999 !important; cursor: not-allowed; }
.disabled-option:hover { background-color: transparent !important; }
.btn-modal-gray { padding: 10px 24px; font-size: 15px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; background-color: #5D6D7E; color: var(--palette-white); }
.btn-modal-gray:disabled { background-color: #BDC3C7; cursor: not-allowed; opacity: 0.7; }
#toggle-delete-mode-btn.active-danger { background-color: var(--palette-red); color: var(--palette-white); border-color: var(--palette-red); }

/* =========================================
   39. RESPONSIVE → перенесено в css/main_mobil.css
   ========================================= */

/* =========================================
   40. ORG STRUCTURE
   ========================================= */
/* Прижимаем горизонтальный скроллбар в Оргструктуре к самому низу экрана */
body:has(.org-structure-wrapper) .content-body {
    padding-bottom: 0 !important;
}
/* Обертка Оргструктуры */
.org-structure-wrapper {
    width: auto;
	/* Просто тянем до низа */
    min-height: calc(var(--vh-scaled) - 165px);
    margin-top: 10px;
    padding-left: 0px; /* <-- Обнулили паддинг, из-за него резался край */
    text-align: left;
    overflow-x: auto;
    overflow-y: auto;
    margin-right: -20px;
    padding-right: 20px;
}

/* 3. Опускаем ГОРИЗОНТАЛЬНЫЙ скроллбар в самый низ экрана */
body:has(.org-structure-wrapper) .content-body {
    padding-bottom: 0 !important;
}
#grid-container { 
    display: inline-grid; 
    gap: 0px; 
    position: relative; 
    transition: grid-template-columns 0.4s ease, grid-template-rows 0.4s ease; 
    
    /* <-- НОВАЯ БРОНЯ: Жесткий отступ слева. Дерево никогда не прилипнет к краю */
    margin-left: 20px; 
    
    /* Добавим немного воздуха снизу, чтобы нижний скролл не терся о карточки */
    padding-bottom: 40px; 
}
#dynamic-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.header-controls { display: none; }
.grid-cell { display: none; }
.dynamic-cell-number { display: none; }
.block-base { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; pointer-events: auto; cursor: grab; transition: all 0.3s ease; border-radius: 6px; box-shadow: 0 1px 4px rgba(44, 62, 80, 0.1); padding: 8px 10px 25px 10px; min-height: 90px; height: auto; }
.block-base.is-expanded { z-index: 15; height: auto; }
.block-base > .department-name { font-weight: bold; margin-bottom: 4px; text-align: center; white-space: normal; overflow: visible; word-wrap: break-word; }
.department-head-name { font-size: 13px; font-weight: 500; color: #34495e; text-align: center; margin-bottom: 8px; white-space: normal; overflow: visible; word-wrap: break-word; padding-bottom: 4px; border-bottom: 1px solid #e0e0e0; }
.positions-list { list-style-type: none; padding: 4px 0 0 0; margin: 4px 0 0 0; font-size: 9pt; color: #34495e; line-height: 1.4; border-top: 1px solid #e0e0e0; }
.positions-list li { padding: 1px 0; white-space: normal; overflow: visible; word-wrap: break-word; }
.ceo-block { background-color: var(--palette-white); color: var(--palette-dark-blue); border: 2px solid var(--palette-dark-blue); font-size: 12pt; z-index: 11; cursor: default; }
.administration-block { background-color: var(--palette-white); color: var(--palette-dark-blue); border: 1px solid var(--palette-dark-blue); font-size: 10pt; z-index: 11; cursor: default; }
.coordinator-block { background-color: var(--palette-white); color: var(--palette-dark-blue); border: 2px solid var(--palette-sky-blue); font-size: 11pt; z-index: 10; }
.department-block, .sub-department-block { background-color: var(--palette-white); color: var(--palette-dark-blue); border: 1px solid var(--palette-dark-blue); font-size: 10pt; z-index: 9; }
.department-block .department-name, .sub-department-block .department-name, .group-block .department-name, .unit-block .department-name, .element-block .department-name, .administration-block .department-name { color: var(--palette-sky-blue); }
.group-block { background-color: var(--palette-white); color: var(--palette-dark-blue); border: 1px dashed #bdc3c7; font-size: 9pt; z-index: 8; }
.unit-block { background-color: #fdfefe; color: var(--palette-dark-blue); border: 1px dotted #7f8c8d; font-size: 9pt; z-index: 7; }
.element-block { background-color: #fbfcfc; color: var(--palette-dark-blue); border: 1px solid #e5e7e9; font-size: 8pt; z-index: 6; }
.sub-element-block { background-color: #f8f9f9; color: var(--palette-dark-blue); border: 1px dotted #e5e7e9; font-size: 8pt; z-index: 5; }
.sub-sub-element-block { background-color: #f6f7f7; color: #5D6D7E; border: 1px dotted #eaeded; font-size: 7pt; z-index: 4; }
.expand-indicator { position: absolute; bottom: 4px; left: 4px; font-size: 8pt; font-weight: bold; color: var(--color-primary); opacity: 0.85; cursor: pointer; }
.toggle-positions-btn { position: absolute; bottom: 2px; left: 28px; background: none; border: none; color: #888; font-size: 8pt; cursor: pointer; padding: 2px 4px; font-family: 'Inter', sans-serif; font-weight: 500; }
.toggle-positions-btn:hover { color: var(--palette-sky-blue); text-decoration: underline; }
.toggle-positions-btn.active { background-color: var(--palette-sky-blue); color: var(--palette-white); border-radius: 4px; }
.connector-line { position: absolute; background-color: #bdc3c7; z-index: 5; transition: all 0.3s ease; }
.dragging { opacity: 0.5; cursor: grabbing; }
.drop-hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4); }
.valid-drop-target { outline: 2px dashed var(--palette-sky-blue) !important; outline-offset: 2px; }
.virtual-drop-zone { position: absolute; box-sizing: border-box; border: 2px dashed var(--palette-sky-blue) !important; background-color: rgba(52, 152, 219, 0.1) !important; z-index: 12; pointer-events: auto; transition: all 0.3s ease; border-radius: 6px; }
.action-buttons-container { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 2px; align-items: center; padding-left: 3px; }
.action-button { background: none; border: none; padding: 2px 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s; }
.action-button:hover { background-color: rgba(0,0,0,0.08); }
.action-button svg { width: 16px; height: 16px; stroke-width: 2; }
.edit-button { color: var(--main-text-color); }
.delete-button { color: var(--palette-red); }
.add-button { color: var(--palette-sky-blue); }
.positions-button { color: #8e44ad; }
.add-button-ceo { padding: 2px 8px; font-size: 12px; font-weight: 500; background: var(--btn-outline-bg); color: var(--btn-outline-text); border: 1px solid var(--btn-outline-border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
.add-button-ceo:hover { background: var(--bg-table-header); color: var(--color-primary); border-color: var(--color-primary); }
.block-base.edit-mode { z-index: 101; cursor: default; box-shadow: 0 5px 20px rgba(44, 62, 80, 0.3); min-height: 120px; }
.block-base.org-card-menu-active { outline: 2px solid var(--color-primary); background-color: var(--bg-table-hover); z-index: 10; }
/* --- Zoom control --- */
#org-zoom-control { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 1000; align-items: center; gap: 0; background: #fff; border: 1px solid var(--border-table); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.12); overflow: hidden; }
body:has(.org-structure-wrapper) #org-zoom-control { display: flex; }
body:has(#ai-import-view-root) #org-zoom-control { display: none; }
#org-zoom-control button { background: none; border: none; cursor: pointer; padding: 6px 12px; font-size: 16px; font-weight: 600; color: var(--color-text-muted); line-height: 1; transition: background 0.15s, color 0.15s; }
#org-zoom-control button:hover { background: var(--bg-table-header); color: var(--color-primary); }
#org-zoom-pct { font-size: 12px; font-weight: 600; color: var(--color-text-main); min-width: 42px; text-align: center; cursor: pointer; padding: 0 2px; border-left: 1px solid var(--border-table); border-right: 1px solid var(--border-table); }
#org-zoom-pct:hover { color: var(--color-primary); }
.block-base .department-name.hidden, .block-base .department-head-name.hidden, .block-base .positions-list.hidden, .block-base .action-buttons-container.hidden, .block-base .expand-indicator.hidden, .block-base .toggle-positions-btn.hidden { display: none; }
.edit-form-container { padding: 10px 5px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex-grow: 1; justify-content: center; }
.edit-form-container input, .edit-form-container textarea { width: 100%; padding: 8px; font-size: 10pt; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; resize: none; line-height: 1.4; outline: none; }
.edit-form-container input:focus, .edit-form-container textarea:focus { border-color: var(--color-primary); }
.edit-form-container p { font-size: 10pt; text-align: center; margin: 5px 0; font-weight: 500; color: var(--palette-red); }
.edit-form-actions { display: flex; justify-content: center; gap: 8px; margin-top: auto; }
.edit-form-actions button { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
.edit-form-ok { background-color: var(--palette-sky-blue); color: white; }
.edit-form-ok:hover { background-color: #2980b9; }
.edit-form-cancel { background-color: #f1f1f1; color: #333; }
.edit-form-cancel:hover { background-color: #e1e1e1; }
.edit-form-delete { background-color: var(--palette-red); color: white; }
.edit-form-delete:hover { background-color: #c0392b; }
.edit-form-container input[readOnly] { background-color: #f1f1f1; cursor: not-allowed; color: #777; border-color: #ddd; text-align: center; font-weight: 500; }
.edit-form-container .parent-selector-group { position: relative; }
.parent-selector { position: relative; display: flex; align-items: center; width: 100%; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; font-family: 'Inter', sans-serif; box-sizing: border-box; height: 40px; }
.parent-selector .selected-parent-value { flex-grow: 1; padding: 10px; font-size: 10pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.parent-selector .select-parent-btn { flex-shrink: 0; padding: 8px; margin: 0; border: none; background-color: #e9ecef; border-radius: 0 3px 3px 0; cursor: pointer; border-left: 1px solid #ccc; height: 100%; display: flex; align-items: center; justify-content: center; }
.parent-selector .select-parent-btn:hover { background-color: #dee2e6; }
.parent-picker-host { display: none; position: absolute; top: 100%; left: 0; z-index: 110; margin-top: 5px; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; background-color: var(--palette-white); box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: 100%; min-width: 400px; }
.picker-search-input { width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.picker-search-row { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.picker-search-row .form-control { flex: 1; min-width: 0; margin-bottom: 0 !important; }
.picker-search-close { flex-shrink: 0; width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: #999; font-size: 18px; line-height: 1; padding: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.picker-search-close:hover { color: #e74c3c; background: #fef2f2; }
tr.reg-row-active td { background: #eff6ff !important; }
.picker-hierarchy-container { max-height: 250px; overflow-y: auto; border-radius: 4px; }
.picker-hierarchy-item { padding: 8px 12px; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.2s; border-radius: 4px; }
.picker-hierarchy-item:hover { background-color: var(--top-nav-hover-bg); }
.picker-hierarchy-item.picker-item-disabled { color: #aaa; cursor: not-allowed; background-color: #f8f9fa !important; font-style: italic; }
.department-head-name:hover, .positions-list li:hover { background-color: rgba(52, 152, 219, 0.1); }
.positions-list.positions-list-no-border { border-top: none; padding-top: 0; margin-top: 4px; }
.position-inline-editor { position: absolute; z-index: 120; width: 300px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); padding: 15px; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.p-editor-group { display: flex; flex-direction: column; gap: 5px; }
.p-editor-row { display: flex; gap: 10px; align-items: flex-end; }
.p-editor-group-priority { flex: 0 1 80px; }
.p-editor-group-category { flex: 1 1 auto; }
.position-inline-editor label { font-size: 13px; font-weight: 500; color: #555; }
.position-inline-editor textarea, .position-inline-editor input, .position-inline-editor select { width: 100%; padding: 8px 10px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.position-inline-editor textarea { resize: vertical; min-height: 50px; }
.p-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 5px; }
.p-editor-main-actions { display: flex; gap: 8px; }
.p-editor-actions button { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; transition: all 0.2s ease; }
.p-editor-delete { background-color: transparent; color: var(--palette-red); padding: 8px 0; }
.p-editor-delete:hover { text-decoration: underline; }
.p-editor-delete.confirm { background-color: var(--palette-red); color: white; padding: 8px 16px; text-decoration: none; }
.p-editor-delete.confirm:hover { background-color: #c0392b; }
.p-editor-ok { background-color: var(--palette-sky-blue); color: white; }
.p-editor-ok:hover { background-color: #2980b9; }
.p-editor-cancel { background-color: #f1f1f1; color: #333; }
.p-editor-cancel:hover { background-color: #e1e1e1; }
.debug-max-priority { position: absolute; background-color: red; color: white; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: bold; z-index: 20; display: flex; align-items: center; justify-content: center; }
.debug-top-priority { position: absolute; background-color: #5D6D7E; color: white; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: bold; z-index: 20; display: flex; align-items: center; justify-content: center; }
.position-highlight { background-color: rgba(52, 152, 219, 0.15) !important; border-radius: 4px; font-weight: 500; }
.edit-form-container select.edit-form-status-select { width: 100%; padding: 8px; font-size: 10pt; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; line-height: 1.4; background-color: white; height: 40px; }
.ceo-block.is-vacant > .department-name { color: #888; font-style: italic; font-weight: 500; }
.block-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; justify-content: center; z-index: 102; border-radius: 6px; backdrop-filter: blur(1px); }
.block-loading-spinner { width: 32px; height: 32px; border: 4px solid var(--palette-light-grey); border-top-color: var(--palette-sky-blue); border-radius: 50%; animation: spin 1s linear infinite; }
.priority-display { position: absolute; top: -2px; left: -3px; color: #5f6368; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; z-index: 1; }
.priority-display.director-priority { color: #0c5460; }
.priority-display.ceo-priority { color: #0c5460; }
.block-base .parent-picker-host { min-width: 600px; }
.parent-picker-host .picker-hierarchy-item.disabled-option { color: #999; font-style: italic; background-color: #f4f4f4; cursor: not-allowed; }

/* =========================================
   41. TASKS
   ========================================= */
.tasks-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.tasks-header h2 { margin: 0; flex-grow: 1; }
.tasks-search-container { display: flex; align-items: center; gap: 8px; }
#tasks-search-input { width: 250px; flex-shrink: 0; }
.tasks-action-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; background-color: var(--palette-dark-blue); color: white; transition: background-color 0.2s; }
.tasks-action-btn.search-btn { background-color: var(--palette-sky-blue); }
.tasks-action-btn:hover { opacity: 0.9; }
.tasks-tabs-container { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--border-color); margin-bottom: 0; }
.folder-tab { padding: 10px 15px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background-color: transparent; cursor: pointer; font-size: 15px; font-weight: 500; color: #555; position: relative; top: 1px; }
.folder-tab:hover { background-color: #f0f0f0; }
.folder-tab.active { background-color: var(--palette-white); border-color: var(--border-color); color: var(--main-text-color); font-weight: 600; }
.add-folder-btn { margin-left: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-color); background-color: #f8f9fa; color: var(--main-text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.add-folder-btn:hover { background-color: #e9ecef; }
#task-form-container { padding: 20px; background-color: #fafdff; border: 1px solid var(--border-color); border-radius: 8px; animation: fadeIn 0.3s; }
.task-form-instance .form-title { margin-top: 0; margin-bottom: 15px; padding-bottom: 12px; font-size: 16px; border-bottom: 1px solid var(--border-color); }
.form-fields-grid { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
.form-fields-grid .form-group { display: flex; flex-direction: column; gap: 6px; }
.form-fields-grid .form-group label { font-size: 13px; font-weight: 500; }
.form-actions { margin-top: 15px; display: flex; gap: 10px; justify-content: flex-end; }
.tasks-table-container { overflow: visible; }
#tasks-table-container .tb-wrapper { border: 1px solid var(--border-color); border-radius: 8px; }
#tasks-table-container .task-form-instance { padding: 20px; background-color: #fafdff; border-bottom: 2px solid var(--palette-sky-blue); }
.folder-tab.is-editing { padding: 5px; }
.folder-tab.is-editing input { border: 1px solid var(--palette-sky-blue); border-radius: 4px; padding: 4px 8px; font-size: 15px; font-weight: 500; outline: none; width: 120px; }
.status-новая { background-color: #cfe2ff; }
.status-в-работе { background-color: #fff3cd; }
.status-выполнена { background-color: #d4edda; }
.status-отменена { background-color: #f8d7da; }
.function-position-selector { position: relative; display: flex; align-items: center; width: 100%; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--palette-white); height: 37px; }
.function-position-selector .selected-value { flex-grow: 1; padding: 8px 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.function-position-selector .select-position-btn { flex-shrink: 0; padding: 0 12px; border: none; background-color: #e9ecef; border-radius: 0 3px 3px 0; cursor: pointer; font-size: 14px; border-left: 1px solid var(--border-color); color: var(--main-text-color); height: 100%; }
.function-position-selector .select-position-btn:hover { background-color: #dee2e6; }
.function-position-picker-host { display: none; position: absolute; top: 100%; left: 0; z-index: 110; margin-top: 4px; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; background-color: var(--palette-white); box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: 100%; min-width: 350px; }
.function-position-picker-host .picker-search-input { width: 100%; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; }
.function-position-picker-host .picker-list-container { max-height: 250px; overflow-y: auto; }
.function-position-picker-host .picker-list-item { padding: 8px 10px; font-size: 14px; cursor: pointer; border-radius: 4px; }
.function-position-picker-host .picker-list-item:hover, .function-position-picker-host .picker-list-item.selected { background-color: var(--top-nav-hover-bg); }
.picker-list-item .picker-item-main { font-weight: 500; }
.picker-list-item .picker-item-sub { font-size: 12px; color: #6c757d; }

/* =========================================
   41b. KANBAN
   ========================================= */
.kanban-settings { padding: 16px 20px; background-color: #f8f9fa; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 20px; }
.kanban-settings-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kanban-settings-row:last-child { margin-bottom: 0; }
.kanban-settings-row label { font-size: 13px; font-weight: 500; white-space: nowrap; }

.kanban-board { display: flex; gap: 16px; padding-bottom: 14px; align-items: flex-start; }
.kanban-col { flex: 0 0 280px; min-width: 280px; background-color: #f1f3f5; border-radius: 10px; display: flex; flex-direction: column; height: calc(100vh - 270px); }
.kanban-col-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.kanban-col-title { font-size: 14px; font-weight: 600; color: var(--color-text-main); flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-col-title-input { flex-grow: 1; font-size: 14px; font-weight: 600; border: 1px solid var(--color-primary); border-radius: 4px; padding: 2px 6px; outline: none; }
.kanban-col-count { font-size: 12px; font-weight: 600; color: #868e96; background: #dee2e6; border-radius: 10px; padding: 1px 8px; min-width: 22px; text-align: center; }
.kanban-col-del { background: none; border: none; color: #adb5bd; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.kanban-col-del:hover { color: var(--palette-red); }

.kanban-col-body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-col-body.drag-over { background-color: rgba(52, 152, 219, 0.08); border-radius: 0 0 10px 10px; }

.kanban-card { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; cursor: grab; transition: box-shadow 0.15s, opacity 0.15s; border-left: 3px solid #adb5bd; }
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card.prio-critical { border-left-color: #e74c3c; }
.kanban-card.prio-high { border-left-color: #f39c12; }
.kanban-card.prio-medium { border-left-color: #3498db; }
.kanban-card.prio-low { border-left-color: #27ae60; }

.kanban-card-title { font-size: 13px; font-weight: 500; color: var(--color-text-main); margin-bottom: 6px; line-height: 1.4; }
.kanban-card-assignee { font-size: 12px; color: #6c757d; margin-bottom: 4px; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kanban-card-deadline { font-size: 11px; color: #868e96; }
.kanban-card-prio { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.kanban-card-prio.prio-critical { background: #fde8e8; color: #e74c3c; }
.kanban-card-prio.prio-high { background: #fef3e2; color: #e67e22; }
.kanban-card-prio.prio-medium { background: #e8f4fd; color: #2980b9; }
.kanban-card-prio.prio-low { background: #e8f8ef; color: #27ae60; }

.kanban-cancel-zone { position: fixed; bottom: 0; left: 240px; right: 0; z-index: 50; border-top: 2px dashed #f0b0b0; padding: 12px 20px; transition: all 0.2s; background-color: #fef2f2; min-height: 48px; }
.kanban-cancel-zone.drag-active { border-color: #e74c3c; background-color: #fde8e8; }
.kanban-cancel-zone.drag-over { border-color: #e74c3c; background-color: #fbd5d5; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }
.kanban-cancel-label { display: flex; align-items: center; gap: 8px; color: #c0706e; font-size: 14px; font-weight: 500; }
.kanban-cancel-zone.drag-active .kanban-cancel-label,
.kanban-cancel-zone.drag-over .kanban-cancel-label { color: #e74c3c; }
.kanban-cancel-count { font-size: 12px; font-weight: 600; background: #f0c0c0; color: #a04040; border-radius: 10px; padding: 1px 8px; min-width: 22px; text-align: center; }
.kanban-cancel-zone.drag-active .kanban-cancel-count { background: #e8a0a0; color: #c0392b; }

/* Переключатель канбанов */
.kanban-switcher { position: relative; }
.kanban-switcher-btn { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ced4da; border-radius: 6px; padding: 6px 14px; font-size: 15px; font-weight: 600; cursor: pointer; min-width: 200px; color: var(--color-text-main); }
.kanban-switcher-btn:hover { border-color: var(--color-primary); }
.kanban-switcher-btn span { flex: 1; text-align: left; }
.kanban-switcher-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 280px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 200; overflow: hidden; }
.kanban-sw-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.kanban-sw-item:last-child { border-bottom: none; }
.kanban-sw-item:hover { background: #f8f9fa; }
.kanban-sw-item.active { background: #e8f4fd; }
.kanban-sw-name { flex: 1; font-size: 14px; color: var(--color-text-main); display: flex; align-items: center; gap: 8px; }
.kanban-sw-main-badge { font-size: 10px; font-weight: 600; background: #27ae60; color: #fff; border-radius: 4px; padding: 1px 6px; }
.kanban-sw-actions { display: flex; gap: 4px; }
.kanban-sw-btn { background: none; border: none; cursor: pointer; color: #adb5bd; font-size: 16px; padding: 2px 6px; line-height: 1; border-radius: 4px; }
.kanban-sw-btn:hover { color: var(--color-primary); background: #e8f4fd; }
.kanban-sw-btn.del:hover { color: var(--palette-red); background: #fde8e8; }

/* =========================================
   42. PRINT SETTINGS
   ========================================= */
#print-layout-container { display: flex; gap: 24px; align-items: stretch; }
.print-templates-column, .print-options-column { flex: 1; min-width: 0; }
#print-layout-container .settings-panel { width: 100%; height: 100%; padding: 24px 32px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
#print-settings-panel .settings-footer { margin-top: auto; }
.settings-header { text-align: center; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.settings-header h2 { font-size: 22px; font-weight: 600; color: var(--main-text-color); margin-bottom: 8px; }
.settings-header p { font-size: 15px; color: var(--top-nav-text); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin-bottom: 40px; }
.settings-group h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); color: var(--main-text-color); }
.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.radio-group label, .checkbox-group label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.radio-group input, .checkbox-group input { cursor: pointer; width: 16px; height: 16px; }
.settings-footer { padding-top: 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; }
.print-templates-column h3 { font-size: 18px; font-weight: 600; color: var(--main-text-color); margin-bottom: 20px; }
#print-templates-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.print-template-item { background-color: var(--palette-sky-blue); color: var(--palette-white); padding: 16px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.print-template-item:hover { background-color: #3e5770; }
.templates-placeholder { font-size: 15px; color: var(--top-nav-text); padding: 20px 10px; text-align: center; border: 2px dashed var(--border-color); border-radius: 6px; margin-bottom: 20px; }

/* =========================================
   43. REPORTS
   ========================================= */
.reports-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 20px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; gap: 20px; }
.reports-header h2 { margin: 0; font-size: 20px; flex-shrink: 0; }
.reports-search-container { display: flex; flex-grow: 1; max-width: 400px; margin-left: auto; }
#reports-search-input { width: 100%; padding: 10px 15px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px 0 0 6px; border-right: none; outline: none; }
#reports-search-input:focus { border-color: var(--palette-sky-blue); }
.reports-action-btn { display: flex; align-items: center; gap: 8px; background-color: var(--palette-sky-blue); color: white; border: none; padding: 10px 15px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
.reports-action-btn:hover { background-color: #2980b9; }
.reports-table-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; }
.reports-table-container p { margin-bottom: 15px; font-size: 14px; color: #555; }
#reports-table { width: 100%; border-collapse: collapse; }
#reports-table th, #reports-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
#reports-table th:nth-child(1) { width: 10%; }
#reports-table th:nth-child(2) { width: 75%; }
#reports-table th:nth-child(3) { width: 15%; text-align: right; }
#reports-table td:nth-child(3) { text-align: right; }
#reports-table th { background-color: #f8f9fa; font-weight: 600; }
#reports-table tbody tr:hover { background-color: var(--top-nav-hover-bg); }
#reports-table .action-cell { display: flex; justify-content: flex-end; }
#reports-table .form-btn { background-color: var(--palette-sky-blue); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: background-color 0.2s; }
#reports-table .form-btn:hover { background-color: #2980b9; }
.search-btn { border-radius: 0 6px 6px 0 !important; flex-shrink: 0; }

/* =========================================
   44. EVENTS DIRECTORY
   ========================================= */
.events-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 20px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; gap: 20px; }
.events-header h2 { margin: 0; font-size: 20px; flex-shrink: 0; }
.events-search-container { display: flex; flex-grow: 1; max-width: 400px; margin-left: auto; }
#events-search-input { width: 100%; padding: 10px 15px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px 0 0 6px; border-right: none; outline: none; }
#events-search-input:focus { border-color: var(--palette-sky-blue); }
.events-action-btn { display: flex; align-items: center; gap: 8px; background-color: var(--palette-sky-blue); color: white; border: none; padding: 10px 15px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
.events-action-btn:hover { background-color: #2980b9; }
.events-table-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; }
#events-table { width: 100%; border-collapse: collapse; }
#events-table th, #events-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
#events-table th:nth-child(1) { width: 10%; }
#events-table th:nth-child(2) { width: 55%; }
#events-table th:nth-child(3) { width: 20%; }
#events-table th:nth-child(4) { width: 15%; text-align: right; }
#events-table td:nth-child(4) { text-align: right; }
#events-table td { white-space: normal; }
#events-table th { background-color: #f8f9fa; font-weight: 600; }
#events-table tbody tr:not(.event-editor-row):hover { background-color: var(--top-nav-hover-bg); }
#events-table .action-cell { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: nowrap; }
#events-table .action-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; color: #5D6D7E; }
#events-table .action-btn:hover { background-color: rgba(0, 0, 0, 0.1); }
#events-table .action-btn.edit:hover { color: var(--palette-sky-blue); }
#events-table .action-btn.delete:hover { color: var(--palette-red); }
#events-table .action-btn.structure:hover { color: #27ae60; }
#events-table .action-btn svg { width: 16px; height: 16px; stroke: currentColor; }
#event-form-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; }
#event-form-container .form-title { margin-top: 0; margin-bottom: 25px; font-size: 18px; font-weight: 600; }
#event-form-container .form-row { display: flex; gap: 20px; }
#event-form-container .form-group { margin-bottom: 20px; }
#event-form-container label { display: block; margin-bottom: 8px; font-size: 14px; color: #555; }
#event-form-container input[type="text"], #event-form-container select { width: 100%; padding: 10px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
#event-form-container .form-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
#event-form-container .btn-modal-ok, #event-form-container .btn-modal-cancel { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; }
#event-form-container .btn-modal-ok { background-color: var(--palette-sky-blue); color: white; }
#event-form-container .btn-modal-ok:hover { background-color: #2980b9; }
#event-form-container .btn-modal-cancel { background-color: var(--palette-red); color: white; }
#event-form-container .btn-modal-cancel:hover { background-color: #c0392b; }
.event-editor-row td { padding: 0 !important; border-bottom: 2px solid var(--palette-sky-blue); background-color: #fafdff; }
.event-editor-grid { display: grid; grid-template-columns: 4fr 2fr 2fr; gap: 20px; align-items: end; padding: 20px; }
.editor-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #555; }
.editor-group input, .editor-group select { width: 100%; padding: 10px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.editor-group-actions { grid-column: 3 / 4; }
.editor-group-actions .form-actions { display: flex; gap: 10px; justify-content: flex-start; }
.editor-group-actions .btn-modal-ok, .editor-group-actions .btn-modal-cancel { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; }
.editor-group-actions .btn-modal-ok { background-color: var(--palette-sky-blue); color: white; }
.editor-group-actions .btn-modal-cancel { background-color: var(--palette-red); color: white; }
.status-активный { background-color: #d4edda; color: #155724; }
.status-разработка { background-color: #fff3cd; color: #856404; }
.status-архив { background-color: #e9ecef; color: #6c757d; }

/* =========================================
   45. DATES / CALENDAR
   ========================================= */
/* Календарь и Планирование — дополнительный flex для module-container */
body:has(.month-view) .content-body > .module-container { display: flex; flex-direction: column; margin-top: 0; }
body:has(#planning-table-container) .content-body > .module-container { display: flex; flex-direction: column; margin-top: 0; }
body:has(#planning-table-container) #planning-table-container { flex: 1; min-height: 0; max-height: none; }
/* ПРИМЕЧАНИЕ: body{} из dates.css пропущен — дублирует main.css */
.container { width: 100%; margin: 0 auto; background-color: white; padding: 10px; box-sizing: border-box; margin-top: 20px; }
.calendar-controls { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 8px; }
.calendar-controls button { background: var(--color-primary); color: white; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-weight: bold; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.calendar-controls button:hover { background: var(--color-primary-hover); }
.year-title { font-size: 22px; font-weight: bold; margin: 0 16px; }
#year-view { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg-surface); border: 1px solid var(--border-table); border-radius: var(--radius-lg); padding: 15px; overflow: hidden; }
.months-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; overflow: hidden; }
.month-container { cursor: pointer; padding: 4px 6px; border-radius: 4px; background-color: #f9f9f9; transition: background-color 0.2s; overflow: hidden; display: flex; flex-direction: column; }
.month-container:hover { background-color: #e9e9e9; }
.month-title { text-align: center; font-weight: bold; margin-bottom: 3px; color: #333; font-size: 13px; flex-shrink: 0; }
.month-calendar { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); align-content: space-evenly; }
.day-header { text-align: center; font-size: 10px; font-weight: bold; color: #666; padding: 1px 0; }
.day-cell { display: flex; align-items: center; justify-content: center; font-size: 11px; border: none; }
.day-cell.other-month { color: #ccc; }
.day-cell.has-event { background-color: #e1f5fe; }
.day-cell.today { background: var(--color-primary) !important; color: #fff !important; border-radius: 3px; font-weight: bold; }
/* .month-view, .month-header, .week-row, .month-day, .event-text, .more-events —
   определены в секции 11 (CALENDAR STYLES) и не переопределяются здесь */
.month-day.active { outline: 2px solid var(--palette-sky-blue); outline-offset: -2px; z-index: 10; }
/* Выходные в месяце — заголовки Сб/Вс синим */
.week-row > *:nth-child(6):not(.month-day),
.week-row > *:nth-child(7):not(.month-day) { color: var(--color-primary); }
/* Выходные в месяце — числа дат синим, фон убран */
.week-row > .month-day:nth-child(6):not(.other-month) .day-number,
.week-row > .month-day:nth-child(7):not(.other-month) .day-number { color: var(--color-primary); font-weight: 600; }
/* Мини-календари года — заголовки Сб/Вс синим */
.month-calendar > .day-header:nth-child(6),
.month-calendar > .day-header:nth-child(7) { color: var(--color-primary); }
/* Мини-календари года — числа Сб/Вс синим, без фона */
.month-calendar > .day-cell:nth-child(7n-1):not(.other-month),
.month-calendar > .day-cell:nth-child(7n):not(.other-month) { color: var(--color-primary); font-weight: 600; }
/* .week-row.editor-row — без переопределения, наследует flex:1 от .week-row; форма выходит за пределы строки как overlay */
/* .editor-container-cell — gridColumn задаётся через JS inline style, CSS не нужен */
.calendar-inline-editor .editor-title { margin-top: 0; margin-bottom: 15px; font-size: 16px; font-weight: 600; }
.calendar-inline-editor .editor-grid-calendar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.calendar-inline-editor .editor-form-group { display: flex; flex-direction: column; }
.calendar-inline-editor .editor-form-group.editor-form-group-full { grid-column: 1 / -1; }
.calendar-inline-editor .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.calendar-inline-editor .form-row-split .editor-form-group { margin-bottom: 0; }
.calendar-inline-editor .editor-form-group label { margin-bottom: 6px; font-size: 13px; color: #555; }
.calendar-inline-editor .editor-form-group input, .calendar-inline-editor .editor-form-group select { width: 100%; padding: 8px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; }
.calendar-inline-editor .editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.calendar-inline-editor .btn-modal-ok, .calendar-inline-editor .btn-modal-cancel { padding: 8px 18px; font-size: 14px; border-radius: 6px; }
.calendar-inline-editor .btn-modal-ok { background-color: var(--palette-sky-blue); color: white; }
.calendar-inline-editor .btn-modal-cancel { background-color: var(--palette-red); color: white; }
.calendar-inline-editor .btn-modal-ok:hover { background-color: #2980b9; }
.calendar-inline-editor .btn-modal-cancel:hover { background-color: #c0392b; }
/* .inline-datetime — определено в секции 11, здесь не переопределяется */
.date-part { border: 1px solid var(--palette-sky-blue) !important; }
/* === Custom Date Picker === */
.dp-popup { position: fixed; z-index: 9999; background: #fff; border: 1px solid var(--palette-sky-blue); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 12px; width: 240px; font-size: 13px; }
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-nav { background: none; border: none; cursor: pointer; color: var(--palette-sky-blue); font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.dp-nav:hover { background: #e8f4fd; }
.dp-month-label { font-weight: 600; font-size: 13px; }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: #888; font-size: 11px; margin-bottom: 4px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cell { text-align: center; padding: 5px 2px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.dp-cell:hover { background: #e8f4fd; }
.dp-cell.dp-other { color: #ccc; cursor: default; }
.dp-cell.dp-other:hover { background: none; }
.dp-cell.dp-today { font-weight: 700; color: var(--palette-sky-blue); }
.dp-cell.dp-selected { background: var(--palette-sky-blue); color: #fff; font-weight: 600; }
.dp-cell.dp-selected:hover { background: #2980b9; }
.dp-footer { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; }
.dp-btn-clear, .dp-btn-today { background: none; border: none; cursor: pointer; color: var(--palette-sky-blue); font-size: 12px; padding: 2px 4px; }
.dp-btn-clear:hover, .dp-btn-today:hover { text-decoration: underline; }
.custom-select-wrapper { position: relative; }
.custom-select-display { display: flex; align-items: center; width: 100%; height: 35px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; padding: 0 5px 0 10px; }
.custom-select-display .selected-value { flex-grow: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-display .select-btn { flex-shrink: 0; padding: 4px 12px; border: none; background-color: var(--palette-sky-blue); color: white; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background-color 0.2s; }
.custom-select-display .select-btn:hover { background-color: #2980b9; }
.custom-select-dropdown { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 6px 6px; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.custom-select-dropdown .search-input { width: 100%; padding: 8px; border: none; border-bottom: 1px solid #eee; outline: none; }
.custom-select-dropdown .options-list .option { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.custom-select-dropdown .options-list .option:hover { background-color: #f0f8ff; }

/* =========================================
   46. PLANNING
   ========================================= */
.planning-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 20px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; gap: 20px; }
.planning-header h2 { margin: 0; font-size: 20px; flex-shrink: 0; }
.planning-search-container { display: flex; flex-grow: 1; max-width: 400px; margin-left: auto; }
#planning-search-input { width: 100%; padding: 10px 15px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px 0 0 6px; border-right: none; outline: none; }
#planning-search-input:focus { border-color: var(--palette-sky-blue); }
.planning-action-btn { display: flex; align-items: center; gap: 8px; background-color: var(--palette-sky-blue); color: white; border: none; padding: 10px 15px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
.planning-action-btn:hover { background-color: #2980b9; }
.planning-table-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; overflow-x: auto; }
#planning-table { width: 100%; border-collapse: collapse; min-width: 1200px; }
#planning-table th, #planning-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
#planning-table th { background-color: #f8f9fa; font-weight: 600; vertical-align: bottom; }
#planning-table tbody tr:not(.plan-editor-row):hover { background-color: var(--top-nav-hover-bg); }
#planning-table .action-cell { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
#planning-table .action-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; color: #5D6D7E; }
#planning-table .action-btn:hover { background-color: rgba(0, 0, 0, 0.1); }
#planning-table .action-btn svg { width: 16px; height: 16px; stroke: currentColor; }
#plan-form-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; }
#plan-form-container .form-title { margin-top: 0; margin-bottom: 25px; font-size: 18px; font-weight: 600; }
#plan-form-container .form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
#plan-form-container .form-group-full-width { grid-column: 1 / -1; }
#plan-form-container label { display: block; margin-bottom: 8px; font-size: 14px; color: #555; }
#plan-form-container input, #plan-form-container select { width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; }
#plan-form-container .form-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
#plan-form-container .btn-modal-ok { background-color: var(--palette-sky-blue); color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 6px; cursor: pointer; }
#plan-form-container .btn-modal-cancel { background-color: var(--palette-red); color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 6px; cursor: pointer; }
.plan-editor-row td { padding: 0 !important; border-bottom: 2px solid var(--palette-sky-blue); background-color: #fafdff; vertical-align: top; }
.plan-editor-wrapper { padding: 15px 10px; }
.plan-editor-grid { display: grid; grid-template-columns: 4% 13% 13% 15% 10% 18% 15% 6%; grid-template-rows: auto auto; gap: 10px; align-items: start; grid-template-areas: "id start end type number department state actions" ". . . process process process process ."; }
.plan-editor-grid .editor-cell:nth-child(1) { grid-area: id; }
.plan-editor-grid .editor-cell:nth-child(2) { grid-area: start; }
.plan-editor-grid .editor-cell:nth-child(3) { grid-area: end; }
.plan-editor-grid .editor-cell:nth-child(4) { grid-area: type; }
.plan-editor-grid .editor-cell:nth-child(5) { grid-area: number; }
.plan-editor-grid .editor-cell:nth-child(6) { grid-area: department; }
.plan-editor-grid .editor-cell:nth-child(7) { grid-area: state; }
.plan-editor-grid .editor-cell:nth-child(8) { grid-area: actions; }
.plan-editor-grid .editor-cell:nth-child(9) { grid-area: process; }
.editor-cell { min-width: 0; }
.editor-cell-id { visibility: hidden; }
.plan-editor-wrapper input, .plan-editor-wrapper select { width: 100%; box-sizing: border-box; padding: 8px; font-size: 13px; border-radius: 4px; border: 1px solid #ccc; font-family: 'Inter', sans-serif; }
.plan-editor-wrapper .inline-datetime { display: flex; flex-wrap: wrap; gap: 4px; }
.plan-editor-wrapper .inline-datetime .date-part { flex-basis: 100%; margin-bottom: 4px; }
.plan-editor-wrapper .inline-datetime .time-inputs { display: flex; align-items: center; gap: 4px; width: 100%; }
.plan-editor-wrapper .inline-datetime .time-inputs .hour-part, .plan-editor-wrapper .inline-datetime .time-inputs .minute-part { flex-grow: 1; }
.plan-editor-wrapper .inline-datetime .time-separator { font-size: 13px; }
.plan-editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.plan-editor-actions .btn-modal-ok, .plan-editor-actions .btn-modal-cancel { padding: 8px 16px; font-size: 13px; border-radius: 6px; border: none; cursor: pointer; color: white; }
.plan-editor-actions .btn-modal-ok { background-color: var(--palette-sky-blue); }
.plan-editor-actions .btn-modal-cancel { background-color: var(--palette-red); }
.state-badge.state-запланировано { background-color: #cfe2ff; color: #004085; }
.state-badge.state-в-работе { background-color: #fff3cd; color: #856404; }
.state-badge.state-завершено { background-color: #d4edda; color: #155724; }
.state-badge.state-отменено { background-color: #f8d7da; color: #721c24; }

/* =========================================
   47. FORM RENDERER
   ========================================= */
.form-renderer-wrapper { margin-top: 20px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; height: 100%; display: flex; flex-direction: column; }
.form-renderer-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.form-renderer-header .form-title { margin: 0; font-size: 20px; font-weight: 600; }
.form-renderer-tabs { display: flex; padding: 10px 20px 0 20px; border-bottom: 1px solid var(--border-color); background-color: #f8f9fa; gap: 5px; align-items: flex-end; flex-shrink: 0; }
.form-renderer-tab { padding: 8px 15px; background-color: #e9ecef; border: 1px solid var(--border-color); border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 14px; color: #495057; transition: all 0.2s; position: relative; bottom: -1px; }
.form-renderer-tab:hover { background-color: #dfe4e8; }
.form-renderer-tab.active { background-color: var(--palette-white); border-color: var(--border-color); border-bottom: 1px solid var(--palette-white); font-weight: 600; color: var(--main-text-color); }
.form-renderer-body { overflow-y: auto; flex-grow: 1; }
.form-renderer-tab-content { display: none; padding: 20px; grid-template-columns: repeat(6, 1fr); gap: 20px; align-content: start; }
.form-renderer-tab-content.active { display: grid; }
.form-renderer-group { display: flex; flex-direction: column; }
.form-renderer-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #333; }
.form-renderer-group input[type="text"], .form-renderer-group input[type="number"], .form-renderer-group textarea, .form-renderer-group select { width: 100%; padding: 10px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-family: 'Inter', sans-serif; background-color: white; }
.form-renderer-group input:focus, .form-renderer-group textarea:focus, .form-renderer-group select:focus { outline: none; border-color: var(--palette-sky-blue); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); }
.form-renderer-group input[readonly] { background-color: #e9ecef; cursor: not-allowed; }
.form-renderer-group textarea { min-height: 100px; resize: vertical; flex-grow: 1; }
.form-renderer-group.full-width { grid-column: 1 / -1; }
.form-renderer-table-wrapper { overflow-x: auto; }
.form-renderer-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.form-renderer-table th, .form-renderer-table td { border: 1px solid #ccc; padding: 8px; text-align: left; font-size: 14px; }
.form-renderer-table th { background-color: #f8f9fa; }
.form-renderer-table td { background-color: white; }
.form-renderer-table td[contenteditable="true"]:focus { outline: 2px solid var(--palette-sky-blue); background-color: #f0f8ff; }
.form-renderer-table th.action-col { width: 40px; padding: 0; text-align: center; }
.form-renderer-table td.action-col { text-align: center; vertical-align: middle; padding: 4px; }
.delete-row-btn { background: none; border: none; color: var(--palette-red); cursor: pointer; font-size: 20px; font-weight: bold; line-height: 1; padding: 0 5px; opacity: 0.6; transition: opacity 0.2s; }
.delete-row-btn:hover { opacity: 1; }
.form-renderer-add-row { background-color: #e9ecef; border: 1px dashed #ccc; cursor: pointer; text-align: center; padding: 6px; font-size: 14px; border-radius: 4px; }
.form-renderer-add-row:hover { background-color: #dfe4e8; }
.form-renderer-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); text-align: right; flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px; background-color: #f8f9fa; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.form-renderer-footer button { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; }
.form-renderer-footer .form-btn-ok { background-color: var(--palette-sky-blue); color: white; }
.form-renderer-footer .form-btn-ok:hover { background-color: #2980b9; }
.form-renderer-footer .form-btn-cancel { background-color: var(--palette-red); color: white; }
.form-renderer-footer .form-btn-cancel:hover { background-color: #c0392b; }
.form-renderer-group .inline-datetime { display: flex; gap: 5px; }

/* =========================================
   48. PARSERS
   ========================================= */
.parser-container { display: flex; flex-direction: column; height: 100%; gap: 15px; padding-top: 15px; }
.parser-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.parser-tab-btn { padding: 10px 20px; cursor: pointer; border: none; background-color: transparent; font-size: 16px; color: var(--top-nav-text); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.parser-tab-btn.active { color: var(--palette-sky-blue); font-weight: 600; border-bottom-color: var(--palette-sky-blue); }
.parser-tab-content { display: none; flex-grow: 1; flex-direction: column; gap: 15px; }
.parser-tab-content.active { display: flex; }
.parser-instructions { padding: 15px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; color: #555; margin-top: 10px; }
.parser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex-grow: 1; }
.parser-box { display: flex; flex-direction: column; gap: 10px; }
.parser-box label { font-weight: 600; font-size: 16px; }
.parser-textarea { width: 100%; height: 100%; min-height: 400px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 14px; border: 1px solid var(--border-color); border-radius: 6px; resize: none; }
.parser-textarea:focus { outline: none; border-color: var(--palette-sky-blue); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); }
#json-output, #word-output { background-color: #f8f9fa; }
.parser-actions { display: flex; justify-content: center; padding-bottom: 20px; }
.parser-btn { background-color: var(--palette-sky-blue); color: white; border: none; padding: 12px 25px; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.parser-btn:hover { background-color: #2980b9; }

/* =========================================
   49. EVENT STRUCTURE EDITOR
   ========================================= */
.structure-editor-container { display: flex; height: 100%; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.structure-editor-sidebar { width: 220px; flex-shrink: 0; background-color: #f8f9fa; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
.structure-editor-sidebar .sidebar-title { padding: 15px 20px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--border-color); color: var(--main-text-color); flex-shrink: 0; }
.structure-editor-sidebar .sidebar-content { padding: 15px; flex-grow: 1; overflow-y: auto; }
.sidebar-element { padding: 12px 15px; background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 10px; cursor: grab; font-size: 14px; text-align: center; transition: background-color 0.2s, box-shadow 0.2s; user-select: none; }
.sidebar-element:hover { background-color: #f0f0f0; border-color: #ccc; }
.sidebar-element.dragging { opacity: 0.5; cursor: grabbing; background-color: var(--palette-sky-blue); color: white; border-color: var(--palette-sky-blue); }
.structure-editor-main { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
.structure-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background-color: var(--palette-white); z-index: 10; }
.structure-editor-header h2 { margin: 0; font-size: 20px; font-weight: 600; white-space: nowrap; }
.structure-editor-header .header-actions-right { display: flex; gap: 10px; margin-left: auto; }
.structure-editor-header .header-btn { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); background-color: var(--palette-white); color: var(--main-text-color); transition: background-color 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; }
.structure-editor-header .header-btn:hover { background-color: var(--palette-light-grey); }
.structure-editor-header .header-btn.primary-btn { background-color: var(--palette-sky-blue); color: var(--palette-white); border-color: var(--palette-sky-blue); }
.structure-editor-header .header-btn.primary-btn:hover { background-color: #2980b9; border-color: #2980b9; }
.structure-editor-header .header-btn.danger-btn { background-color: var(--palette-red); color: var(--palette-white); border-color: var(--palette-red); }
.structure-editor-header .header-btn.danger-btn:hover { background-color: #c0392b; border-color: #c0392b; }
.tabs-container { display: flex; padding: 10px 20px 0 20px; border-bottom: 1px solid var(--border-color); background-color: #f8f9fa; flex-shrink: 0; gap: 5px; align-items: flex-end; }
.tab { padding: 8px 30px 8px 15px; background-color: #e9ecef; border: 1px solid var(--border-color); border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 14px; color: #495057; transition: all 0.2s; position: relative; bottom: -1px; display: flex; align-items: center; }
.tab:hover { background-color: #dfe4e8; }
.tab.active { background-color: var(--palette-white); border-color: var(--border-color); border-bottom: 1px solid var(--palette-white); font-weight: 600; color: var(--main-text-color); }
.tab input { border: 1px solid var(--palette-sky-blue); padding: 2px 4px; font-size: 14px; font-family: inherit; outline: none; max-width: 120px; }
.tab .tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delete-tab-btn { display: none; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: none; background-color: transparent; color: #6c757d; font-size: 18px; font-weight: bold; line-height: 18px; text-align: center; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tab:hover .delete-tab-btn, .tab.active .delete-tab-btn { display: block; }
.delete-tab-btn:hover { background-color: #dc3545; color: white; }
.add-tab-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background-color: var(--palette-sky-blue); color: white; font-size: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; transition: background-color 0.2s; }
.add-tab-btn:hover { background-color: #2980b9; }
.structure-editor-grid { flex-grow: 1; overflow: auto; background-color: #fff; background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px); background-size: 20px 20px; background-position: -1px -1px; position: relative; }
.structure-editor-grid.drag-over { border: 2px dashed var(--palette-sky-blue); background-color: #f0f8ff; }
.grid-element { position: absolute; width: 200px; min-width: 150px; min-height: 70px; background: #ffffff; border: 1px solid #ccc; border-radius: 6px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: move; overflow: visible; display: flex; flex-direction: column; }
.grid-element.active-element { border: 2px dashed var(--palette-sky-blue); z-index: 1001; }
.resize-handle { position: absolute; width: 12px; height: 12px; background: var(--palette-sky-blue); border: 1px solid white; border-radius: 50%; display: none; }
.grid-element.active-element .resize-handle { display: block; }
.resize-handle.n { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.resize-handle.s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.resize-handle.e { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
.resize-handle.w { top: 50%; left: -6px; transform: translateY(-50%); cursor: w-resize; }
.resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
.resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
.resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
.resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.grid-element .editable-label { font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #333; padding: 2px 4px; border-radius: 3px; outline: none; transition: background-color 0.2s; flex-shrink: 0; }
.grid-element .editable-label:focus { background-color: #e9f3ff; box-shadow: 0 0 0 1px var(--palette-sky-blue); }
.grid-element .editable-input { width: 100%; padding: 8px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-family: 'Inter', sans-serif; line-height: 1.4; overflow: auto; background-color: white; outline: none; flex-grow: 1; }
.grid-element .editable-input:focus { border-color: var(--palette-sky-blue); }
.grid-element input, .grid-element select, .grid-element button { flex-shrink: 0; }
.grid-element input, .grid-element textarea, .grid-element select, .grid-element button { width: 100%; padding: 8px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-family: 'Inter', sans-serif; }
.grid-element textarea { flex-grow: 1; resize: none; }
.grid-element input.readonly-manager-field { background-color: #e9ecef; color: #495057; cursor: not-allowed; }
.grid-element.default-element { background-color: #f8f9fa; cursor: not-allowed; }
.grid-element.default-element input { background-color: #e9ecef; }
.action-buttons { position: absolute; bottom: 15px; right: 20px; display: flex; gap: 10px; }
.action-buttons .grid-element { position: static; width: auto; padding: 0; border: none; box-shadow: none; background: transparent; cursor: default; display: block; }
.action-buttons button { padding: 10px 25px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; min-width: 100px; }
.action-buttons [data-type="ok-button"] button { background-color: var(--palette-sky-blue); color: white; }
.action-buttons [data-type="cancel-button"] button { background-color: var(--palette-red); color: white; }
.element-controls { position: absolute; top: -12px; right: -12px; display: none; flex-direction: row-reverse; gap: 6px; z-index: 1002; }
.grid-element.active-element:not(.default-element) .element-controls { display: flex; }
.delete-element-btn, .element-settings-btn { width: 24px; height: 24px; border: 1px solid white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.delete-element-btn { background-color: var(--palette-red); color: white; }
.element-settings-btn { background-color: var(--palette-sky-blue); color: white; }
.delete-element-btn svg, .element-settings-btn svg { width: 14px; height: 14px; }
.settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.settings-overlay .settings-panel { background-color: white; padding: 20px; border-radius: 8px; width: 90%; max-width: 550px; }
.settings-overlay .settings-panel h3 { margin-top: 0; }
.settings-form { display: flex; gap: 10px; margin-bottom: 15px; }
.settings-form input { flex-grow: 1; }
.settings-list { list-style: none; padding: 0; max-height: 250px; overflow-y: auto; border: 1px solid #ccc; border-radius: 4px; }
.settings-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; gap: 10px; }
.settings-list li:last-child { border-bottom: none; }
.settings-list .column-name-span { flex-grow: 1; outline: none; border: 1px solid transparent; padding: 4px; border-radius: 3px; }
.settings-list .column-name-span:focus { border-color: var(--palette-sky-blue); background-color: #f0f8ff; }
.settings-list .column-width-input { width: 80px; flex-shrink: 0; }
.settings-list .delete-item-btn { background: none; border: none; color: var(--palette-red); cursor: pointer; flex-shrink: 0; }
.settings-actions { text-align: right; margin-top: 20px; }
.grid-element-table-wrapper { flex-grow: 1; overflow: auto; }
.grid-element-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid-element-table th, .grid-element-table td { border: 1px solid #ccc; padding: 6px; text-align: left; font-size: 13px; word-wrap: break-word; }
.grid-element-table th { background-color: #f8f9fa; }
.grid-element-table td { background-color: white; }
.add-table-row-btn-constructor { margin-top: 8px; width: 100%; background-color: #f0f0f0; border: 1px dashed #ccc; cursor: pointer; text-align: center; padding: 5px; flex-shrink: 0; }
.grid-element-table th.action-col-constructor { width: 30px; padding: 2px; }
.grid-element-table td.action-col-constructor { text-align: center; padding: 2px; }
.delete-row-btn-constructor { background: none; border: none; color: var(--palette-red); cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.7; }
.delete-row-btn-constructor:hover { opacity: 1; }
.tab.dragging { opacity: 0.5; background: #cce5ff; }

/* =========================================
   50. PROCESS ITEM SETTINGS (уникальные)
   ========================================= */
#item-settings-view .settings-header {
    text-align: left;
    margin-bottom: 0;
    padding: 20px 25px;
}
.settings-header-block { padding: 20px 20px 0 20px; flex-shrink: 0; }
#item-settings-view .form-body { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 20px; }
#item-settings-view .form-actions-footer { padding: 20px; border-top: 1px solid var(--border-color); margin-top: auto; flex-shrink: 0; display: flex; gap: 10px; }
#item-settings-view .form-breadcrumb { font-size: 14px; color: #6c757d; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
#item-settings-view .form-assignee { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 15px; }
#item-settings-view .form-title { margin-top: 0; margin-bottom: 0; font-size: 18px; font-weight: 600; }
#settings-tab-content-container { flex-grow: 1; display: flex; min-height: 0; padding-top: 20px; padding-bottom: 20px; }
.settings-general-grid { display: flex; gap: 20px; width: 100%; flex-grow: 1; }
.settings-result-panel, .io-panel { flex: 1; display: flex; flex-direction: column; }
.settings-result-panel { flex-basis: 40%; flex-grow: 0; }
.settings-links-panel { flex: 1; display: flex; flex-direction: column; }
.links-table-container, .io-table-container { border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; overflow-y: auto; background-color: #f8f8f8; }
.settings-period-row { display: flex; gap: 15px; margin-top: 15px; flex-shrink: 0; }
.settings-period-row .form-group { flex-grow: 1; flex-basis: 0; }
.settings-form-input { width: 100%; padding: 10px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; box-sizing: border-box; }
.settings-data-table { width: 100%; border-collapse: collapse; }
.settings-data-table th, .settings-data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 14px; }
.settings-data-table th { background-color: #f2f2f2; font-weight: 600; }
.settings-data-table td { background-color: #fff; }
.document-selector-cell { display: flex; align-items: center; gap: 8px; }
.document-selector-cell .selected-doc-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-selector-cell .select-doc-btn { flex-shrink: 0; padding: 4px 10px; font-size: 13px; font-weight: 500; }
.settings-data-table td[contenteditable="true"]:focus { outline: 2px solid var(--palette-sky-blue); background-color: #f0f8ff; }
.settings-data-table td:last-child[contenteditable="true"] { -webkit-user-modify: read-write-plaintext-only; word-break: break-all; color: var(--main-text-color); text-decoration: none; }
.settings-data-table select { width: 100%; border: none; background: transparent; font-size: 14px; -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; }

/* =========================================
   51. DOCUMENTS
   ========================================= */
.documents-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.documents-header h2 { margin: 0; flex-grow: 1; }
.documents-search-container { display: flex; align-items: center; gap: 8px; }
#documents-search-input { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 14px; width: 250px; }
.documents-action-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; border: none; background-color: var(--palette-sky-blue); color: white; transition: background-color 0.2s; }
.documents-action-btn.search-btn { background-color: var(--palette-sky-blue); }
.documents-action-btn:hover { opacity: 0.9; }
.documents-tabs-container { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
#document-form-container { padding: 20px; background-color: #fafdff; border: 1px solid var(--border-color); border-radius: 8px; animation: fadeIn 0.3s; }
.document-form-instance .form-title { margin-top: 0; margin-bottom: 15px; font-size: 16px; }
.documents-table-container { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; overflow-x: auto; }
#documents-table { width: 100%; border-collapse: collapse; }
#documents-table th, #documents-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
#documents-table th { background-color: #f8f9fa; font-weight: 600; }
#documents-table td:nth-child(2), #documents-table td:nth-child(3) { white-space: normal; min-width: 250px; }
#documents-table .action-cell { text-align: right; }
#documents-table .action-cell .action-btn { margin-left: 8px; }
.document-editor-row td { padding: 0 !important; border: none !important; }
.document-editor-row .document-form-instance { padding: 20px; background-color: #fafdff; }

/* =========================================
   52. AI IMPORT (уникальные селекторы)
   ========================================= */
.header-dark-text { color: #fff; margin: 0; font-size: 18px; font-weight: 600; }
.context-textarea { height: 80px; min-height: 80px; }
.json-input-area { flex-grow: 1; font-family: Consolas, 'Courier New', monospace !important; }
.prompt-textarea { flex-grow: 1; font-family: Consolas, 'Courier New', monospace !important; }
.ai-import-wrapper .input-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.ai-import-wrapper .input-group label { font-weight: 600; font-size: 13px; color: var(--main-text-color); margin-bottom: 6px; }

/* =========================================
   53. RAW INFO
   ========================================= */
body:has(#id_organization) .raw-info-container { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
body:has(#id_organization) h3 { font-size: 18px; font-weight: 600; color: var(--main-text-color); margin: 0 0 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
body:has(#id_organization) textarea { width: 100%; min-height: 200px; padding: 12px; font-family: monospace; font-size: 13px; border: 1px solid var(--border-color); border-radius: 6px; background-color: #fff; resize: vertical; }
body:has(#id_organization) #id_organization { display: flex; flex-wrap: wrap; gap: 12px; }
body:has(#id_organization) .info-part-block { box-sizing: border-box; width: 180px; height: 120px; padding: 10px; border: 1px solid var(--palette-sky-blue); border-radius: 6px; background-color: #fafdff; display: flex; flex-direction: column; font-size: 14px; }
body:has(#id_organization) .info-part-block b { font-weight: 700; color: var(--palette-dark-blue); margin-bottom: 8px; }
body:has(#id_organization) .info-part-block .part-name { color: #5D6D7E; flex-grow: 1; }
body:has(#id_organization) .raw-info-placeholder { padding: 40px; text-align: center; background-color: #fff; border: 1px dashed var(--border-color); border-radius: 8px; color: #888; font-size: 16px; }
body:has(#bp-hierarchy-json-output) .raw-info-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(350px, auto); gap: 20px; padding-top: 20px; padding-bottom: 40px; height: auto; box-sizing: border-box; }
body:has(#bp-hierarchy-json-output) .raw-info-item { background-color: var(--palette-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; height: 100%; }
body:has(#bp-hierarchy-json-output) .raw-info-item h2 { margin: 0; font-size: 18px; font-weight: 600; flex-shrink: 0; }
body:has(#bp-hierarchy-json-output) .raw-info-item textarea { width: 100%; flex-grow: 1; resize: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; font-family: Consolas, 'Courier New', monospace; font-size: 13px; background-color: #f8f9fa; line-height: 1.5; box-sizing: border-box; }

/* === РЕЖИМ ПОЛЬЗОВАТЕЛЯ: скрытие служебных кнопок (admin_mode = 0) === */
body.user-mode #export-org-json-btn,
body.user-mode #undo-last-change-btn,
body.user-mode #export-calendar-json-btn { display: none !important; }

/* =====================================================
   Задачи проектов в календаре
   ===================================================== */
.cal-task-strip {
    font-size: 11px;
    background-color: #eaf4fe;
    border-left: 3px solid #3498db;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--main-text-color);
    flex-shrink: 0;
}
.cal-filter-panel {
    display: flex;
    gap: 14px;
    align-items: end;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cal-filter-panel label {
    font-size: 11px;
    color: #868e96;
    margin-bottom: 3px;
    display: block;
}
.cal-filter-panel select,
.cal-filter-panel input[type="date"] {
    font-size: 13px;
    height: 32px;
}

/* Dropdown фильтра проектов */
.project-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 8px 0;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
}
.pf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.pf-item:hover { background: #f1f3f5; }
.pf-all {
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    padding-bottom: 8px;
    font-weight: 600;
}

/* =====================================================
   PROJECTS — Переключаемые колонки и меню
   ===================================================== */

/* Ячейка с именем задачи / проекта — показывает кнопки при наведении */
.proj-task-name-cell { position: relative; }
.proj-task-inline-actions {
    display: none;
    gap: 4px;
    align-items: center;
    margin-left: 8px;
}
.proj-task-name-cell:hover .proj-task-inline-actions,
.tb-tr:hover .proj-task-inline-actions { display: inline-flex; }

/* Кнопка «⋯» в заголовке колонки */
.proj-col-menu-btn {
    display: none;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #adb5bd;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
th:hover .proj-col-menu-btn { display: block; }
.proj-col-menu-btn:hover { color: #495057; }

/* Drag-and-drop состояния заголовков */
.proj-col-dragging { opacity: 0.5; }
.proj-col-dragover { background: #e9ecef !important; outline: 2px dashed #6c757d; }

/* Контекстное меню (колонки / строки) */
.proj-col-context-menu {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 130px;
    padding: 4px 0;
    font-size: 11px;
    zoom: var(--ui-zoom);
}
.proj-col-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--color-text-main);
    white-space: nowrap;
    line-height: 1.2;
    transition: background-color 0.2s;
}
.proj-col-menu-item:hover {
    background-color: var(--bg-table-hover);
}
.proj-col-menu-item.tb-action-delete {
    color: var(--color-danger);
}
.proj-col-menu-item.tb-action-delete:hover svg {
    color: var(--color-danger);
}
.proj-task-active { background: #fff3cd !important; }
.proj-col-menu-icon {
    width: 14px;
    height: 14px;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   GANTT CHART — Диаграмма Ганта
   ===================================================== */
.gantt-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
}
.gantt-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gantt-sidebar-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: 600;
    font-size: 13px;
    color: var(--main-text-color);
    border-bottom: 1px solid var(--border-color);
    background: #f8f9fa;
}
.gantt-sidebar-rows {
    flex: 1;
    overflow-y: hidden;
}
.gantt-sidebar-row {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-sidebar-row:hover { background: #f8f9fa; }
.gantt-canvas-wrap {
    flex: 1;
    overflow: auto;
    position: relative;
}
.gantt-canvas-wrap canvas {
    display: block;
}

/* Панель редактирования зависимостей */
.gantt-dep-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.gantt-dep-panel-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
    color: #343a40;
}
.gantt-dep-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.gantt-dep-row {
    display: grid;
    grid-template-columns: 2fr 1fr 80px 32px;
    gap: 10px;
    align-items: end;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 6px;
}
.gantt-dep-row .form-group {
    margin-bottom: 0;
}
.gantt-dep-row label {
    font-size: 11px;
    color: #868e96;
    margin-bottom: 3px;
    display: block;
}
.gantt-dep-del {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #e74c3c;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    align-self: end;
}
.gantt-dep-del:hover {
    background: #fde8e8;
}
.gantt-dep-add-btn {
    font-size: 13px;
    margin-bottom: 12px;
}
.gantt-dep-actions {
    display: flex;
    gap: 10px;
}

/* =====================================================
   Timelogs — Журнал учёта времени
   ===================================================== */
.tl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0;
}
.tl-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tl-nav-btn {
    font-size: 18px;
    padding: 2px 10px;
    line-height: 1;
}
.tl-nav-today {
    font-size: 13px;
    padding: 4px 14px;
}
.tl-period {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-text-color);
    margin-left: 10px;
}
.tl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tl-table th,
.tl-table td {
    border-bottom: 1px solid #e9ecef;
    padding: 0;
}
.tl-table thead th {
    padding: 10px 8px;
    font-weight: 600;
    font-size: 11px;
    color: #868e96;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid #dee2e6;
}
.tl-info-col {
    min-width: 260px;
    max-width: 340px;
    padding: 10px 14px !important;
    text-align: left !important;
}
.tl-task-line {
    font-size: 13px;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.tl-project-line {
    font-size: 12px;
    color: #868e96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-right: 6px;
    vertical-align: middle;
}
.tl-badge-task { background: #4dabf7; }
.tl-badge-proj { background: #845ef7; }
.tl-day-col {
    text-align: center;
    min-width: 90px;
    padding: 10px 6px !important;
    position: relative;
}
.tl-day-col.tl-today {
    background: #e8f4fd;
}
thead .tl-day-col.tl-today {
    background: #4dabf7;
    color: #fff;
    border-radius: 0;
}
.tl-time-val {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    color: #212529;
    background: #fff;
    min-width: 50px;
}
.tl-timer-icon {
    font-size: 11px;
    color: #868e96;
    margin-right: 2px;
}
.tl-total-col {
    font-weight: 600;
    color: #212529;
    min-width: 80px;
}
.tl-act-col {
    width: 36px;
    text-align: center;
    padding: 0 !important;
}
.tl-del-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #adb5bd;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.tl-del-btn:hover {
    color: #e74c3c;
}
.tl-row:hover {
    background: #f8f9fa;
}
.tl-empty {
    text-align: center;
    padding: 30px !important;
    color: #868e96;
    font-size: 14px;
}
.task-timer-row .btn-danger {
    background: #e74c3c;
    color: #fff;
}

/* =====================================================
   Task Tabs — Вкладки карточки задачи
   ===================================================== */
.task-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 15px;
}
.task-tab-btn {
    padding: 8px 20px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.task-tab-btn:hover {
    color: #495057;
}
.task-tab-btn.active {
    color: #2196F3;
    border-bottom-color: #2196F3;
}
.task-tab-content {
    display: none;
}
.task-tab-content.active {
    display: block;
}
.task-editor-row td { padding: 0 !important; border: none !important; }
.task-editor-row .task-form-instance { padding: 20px; background-color: #fafdff; }

/* =====================================================
   Workload — Загрузка исполнителей
   ===================================================== */
.wl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 10px;
}
.wl-toolbar-left,
.wl-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wl-mode-tabs {
    display: flex;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}
.wl-mode-btn {
    background: #fff;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    color: #495057;
    transition: background 0.15s;
}
.wl-mode-btn:not(:last-child) {
    border-right: 1px solid #dee2e6;
}
.wl-mode-btn.active {
    background: #4dabf7;
    color: #fff;
    font-weight: 600;
}
.wl-mode-btn:hover:not(.active) {
    background: #f1f3f5;
}
.wl-scale-wrap {
    position: relative;
}
.wl-scale-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    color: #495057;
    transition: background 0.15s;
    white-space: nowrap;
}
.wl-scale-btn:hover {
    background: #f1f3f5;
}
.wl-scale-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
}
.wl-scale-menu.open {
    display: block;
}
.wl-scale-item {
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    color: #495057;
    white-space: nowrap;
}
.wl-scale-item:hover {
    background: #f1f3f5;
}
.wl-scale-item.active {
    background: #e7f5ff;
    color: #1c7ed6;
    font-weight: 600;
}
.wl-table thead th.wl-group-header {
    border-bottom: 1px solid #dee2e6;
    font-size: 11px;
    font-weight: 700;
    color: #343a40;
    background: #f1f3f5;
}
.wl-table thead th.wl-sub-header {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 6px;
}
.wl-col-day {
    text-align: center;
    min-width: 56px;
    white-space: nowrap;
}
.wl-col-week {
    text-align: center;
    min-width: 72px;
    white-space: nowrap;
}
.wl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.wl-table th,
.wl-table td {
    border-bottom: 1px solid #e9ecef;
    padding: 8px 10px;
}
.wl-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 1;
}
.wl-name-col {
    text-align: left !important;
    min-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-load-col {
    text-align: center;
    min-width: 90px;
    white-space: nowrap;
}
.wl-month-col {
    text-align: center;
    min-width: 90px;
    white-space: nowrap;
}
.wl-month-col.wl-current {
    background: #e8f4fd;
}
thead .wl-month-col.wl-current {
    background: #d0ebff;
}
.wl-cell-red { background: #ffe3e3; }
.wl-cell-yellow { background: #fff9db; }
.wl-load-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    min-width: 45px;
    text-align: center;
}
.wl-load-green { background: #d3f9d8; color: #2b8a3e; }
.wl-load-yellow { background: #fff3bf; color: #e67700; }
.wl-load-red { background: #ffe0e0; color: #c92a2a; }
.wl-row-user {
    font-weight: 600;
    background: #f8f9fa;
}
.wl-row-user:hover { background: #f1f3f5; }
.wl-row-project { background: #fff; }
.wl-row-project:hover { background: #f8f9fa; }
.wl-row-task { color: #495057; }
.wl-row-task:hover { background: #f8f9fa; }
.wl-indent-1 { padding-left: 30px !important; }
.wl-indent-2 { padding-left: 54px !important; }
.wl-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-right: 5px;
    vertical-align: middle;
}
.wl-badge-proj { background: #845ef7; }
.wl-badge-task { background: #4dabf7; }
.wl-toggle {
    display: inline-block;
    width: 16px;
    font-size: 10px;
    color: #868e96;
    text-align: center;
    user-select: none;
}
.wl-empty {
    text-align: center;
    padding: 30px !important;
    color: #868e96;
    font-size: 14px;
}

/* =========================================
   ТАРИФЫ — карточки
   ========================================= */
.tcard-grid {
    display: flex;
    gap: 20px;
    padding: 24px 0 16px;
    flex-wrap: wrap;
}
.tcard {
    flex: 1 1 220px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    cursor: default;
}
.tcard:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}
/* Шапки карточек — цвет по тарифу */
.tcard-header {
    padding: 20px 20px 14px;
    background: #f0f4ff;
}
.tcard-personal .tcard-header { background: #f5f5f5; }
.tcard-team     .tcard-header { background: #e8f4fd; }
.tcard-business .tcard-header { background: #e8f0ff; }
.tcard-corp     .tcard-header { background: #1a62d4; }
.tcard-corp .tcard-name,
.tcard-corp .tcard-audience { color: #fff !important; }

.tcard-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--color-text-main);
    margin-bottom: 4px;
}
.tcard-audience {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
/* Блок цены */
.tcard-price {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border-table);
}
.tcard-price-main {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.1;
}
.tcard-price-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}
.tcard-price-year {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
}
.tariff-economy {
    font-size: 11px;
    color: #2ecc71;
    font-weight: 600;
    margin-left: 4px;
}
/* Строки параметров */
.tcard-rows {
    flex: 1;
    padding: 8px 0;
}
.tcard-footer {
    padding: 14px 18px 18px;
}
.tcard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 18px;
    border-bottom: 1px solid #f0f0f0;
    gap: 8px;
}
.tcard-row:last-child { border-bottom: none; }
.tcard-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    flex: 1;
    line-height: 1.3;
}
.tcard-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-main);
    text-align: right;
    flex-shrink: 0;
}
/* Да / Нет бейджи */
.tariff-yes {
    display: inline-block;
    background: #2ecc71;
    color: #fff;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}
.tariff-no {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}
.tariff-note {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-weight: 400;
}
/* Поддержка */
.tariff-support-badge {
    border-radius: 10px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
}
.tariff-support-base { background: #f1f3f5; color: #495057; }
.tariff-support-std  { background: #d0ebff; color: #1971c2; }
.tariff-support-pri  { background: #d3f9d8; color: #2f9e44; }
.tariff-support-ded  { background: #1a62d4; color: #fff; }

/* Иконка подсказки в тарифах */
.tcard-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #4a5568;
    border: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    padding: 0;
    margin-left: 4px;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.tcard-info-btn:hover { background: var(--color-primary); color: #fff; }

/* Расширение системы */
.tariff-expansion {
    padding: 8px 0 8px;
}
.tariff-exp-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 4px;
}
.tariff-exp-sub {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.tariff-exp-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}
.tariff-exp-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.tariff-exp-card {
    flex: 1 1 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    padding: 18px 22px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tariff-exp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.13);
}
.tariff-exp-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 4px;
}
.tariff-exp-card-sub {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}
.tariff-exp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: var(--color-text-main);
    gap: 12px;
}
.tariff-exp-row:last-child { border-bottom: none; }
.tariff-exp-row strong {
    color: #1a62d4;
    white-space: nowrap;
}