/* styles.css */

/* Стили для Telegram WebApp */
.telegram-webapp-safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Обычный режим Telegram WebApp (Mini App кнопка) */
body.telegram-webapp {
    background-color: var(--tg-theme-bg-color, #f0f2f5);
    color: var(--tg-theme-text-color, #000000);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    /* Обычные отступы как было раньше */
    padding-bottom: 90px;
}

/* Убираем чёрный фон и добавляем белый */
body.telegram-fullscreen {
    background-color: #f0f2f5 !important;
}

/* Скрываем ТЕКСТ заголовка, но оставляем структуру */
body.telegram-fullscreen .page-header h1 {
    display: none; /* Скрываем только текст "Мои задачи" и "Входящие" */
}

body.telegram-fullscreen .page-header {
    padding-top: 85px; /* Отступ под Close кнопку и меню */
}

body.telegram-fullscreen .container {
    background-color: #f0f2f5; /* Серый фон */
}

/* Фон для поиска в fullscreen */
body.telegram-fullscreen #search-container {
    background-color: #f0f2f5; /* Серый фон вместо черного */
}

body.telegram-fullscreen #search-results-container {
    background-color: #f0f2f5; /* Серый фон вместо черного */
}

/* Заголовки задач в fullscreen - принудительно показываем */
body.telegram-fullscreen .task-title {
    color: #000000 !important; /* Чёрный текст заголовка */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.telegram-fullscreen .task-card .task-title {
    color: #000000 !important;
    display: block !important;
}

/* Модальное окно чек-листа в fullscreen - центрируем */
body.telegram-fullscreen .checklist-modal-content {
    margin-top: 120px; /* Отступ сверху под Header */
    margin-bottom: 40px; /* Отступ снизу */
    max-height: calc(100vh - 200px); /* Ограничиваем высоту */
    overflow-y: auto; /* Скролл если не влезает */
}

/* Заголовок в детальном виде задачи - черный текст */
body.telegram-fullscreen #task-detail-content .task-title,
body.telegram-fullscreen #task-detail-content h3 {
    color: #000000 !important;
    display: block !important;
}

/* Весь текст в детальном виде задачи - черный и видимый */
body.telegram-fullscreen #task-detail-content,
body.telegram-fullscreen #task-detail-content *,
body.telegram-fullscreen #task-detail-container .task-title,
body.telegram-fullscreen #task-detail-container h1,
body.telegram-fullscreen #task-detail-container h2,
body.telegram-fullscreen #task-detail-container h3 {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Модальные окна в fullscreen - не накладываются на Header при открытии клавиатуры */
body.telegram-fullscreen .invite-modal-content,
body.telegram-fullscreen .transfer-modal-content {
    margin-top: 80px; /* Отступ под Header с Close кнопкой */
    max-height: calc(100vh - 160px); /* Ограничиваем высоту */
    overflow-y: auto; /* Скролл если не влезает */
}

/* Исправляем позицию ВСЕХ кнопок действий в полноэкранном режиме */
body.telegram-webapp.fullscreen-mode .task-actions {
    bottom: calc(105px + var(--telegram-safe-area-bottom, 60px)) !important; /* 105px + 60px = 165px */
}

/* Дополнительно для кнопок с классом detail-actions */
body.telegram-webapp.fullscreen-mode .task-actions.detail-actions {
    bottom: calc(105px + var(--telegram-safe-area-bottom, 60px)) !important; /* 105px + 60px = 165px */
}

/* Исправляем позицию кнопки "наверх" в полноэкранном режиме */
body.telegram-webapp.fullscreen-mode .scroll-to-top-btn {
    bottom: calc(110px + var(--telegram-safe-area-bottom, 60px)) !important; /* 110px + 60px = 170px */
}

/* Исправляем все модальные окна в полноэкранном режиме */
body.telegram-webapp.fullscreen-mode .modal {
    padding-bottom: var(--telegram-safe-area-bottom, 60px) !important;
}

/* Исправляем все footer'ы модальных окон в полноэкранном режиме */
body.telegram-webapp.fullscreen-mode .checklist-footer,
body.telegram-webapp.fullscreen-mode .modal-footer,
body.telegram-webapp.fullscreen-mode .invite-footer,
body.telegram-webapp.fullscreen-mode .transfer-footer,
body.telegram-webapp.fullscreen-mode .comment-footer,
body.telegram-webapp.fullscreen-mode .attach-footer {
    padding-bottom: calc(20px + var(--telegram-safe-area-bottom, 60px)) !important;
}

/* Исправляем все элементы с position: fixed в полноэкранном режиме */
body.telegram-webapp.fullscreen-mode [style*="position: fixed"],
body.telegram-webapp.fullscreen-mode [style*="position:fixed"] {
    bottom: calc(var(--original-bottom, 0px) + var(--telegram-safe-area-bottom, 60px)) !important;
}

body {
    background-color: #f0f2f5;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Этот отступ нужен, чтобы контент не уходил под нижнюю навигацию */
    padding-bottom: 90px;
}

html {
    height: 100%; /* Оставляем для правильного расчета высоты body */
}

body {
    height: auto; /* Позволяем body растягиваться под контент */
    overflow-y: scroll; /* Указываем, что прокрутка всегда принадлежит body */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Запрещаем прокрутку у body, она будет у контента */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f0f2f5;
}

.app-container {
    display: flex;
    flex-direction: column; /* Элементы идут друг под другом */
    height: 100vh; /* Занимает 100% высоты экрана */
    box-sizing: border-box;
    padding-top: var(--tg-viewport-header-height);
}

/* --- ШАПКА --- */
.page-header {
    background-color: #ffffff;
    padding: 50px 0 15px 0; /* Убираем боковые паддинги отсюда */
    flex-shrink: 0; /* Запрещаем шапке сжиматься */
    /* position и z-index больше не нужны для компоновки */
}

.header-content {
    /* А вот для контента внутри шапки возвращаем боковые отступы */
    padding-left: 15px;
    padding-right: 15px;
}

.header-content h1 {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}

/* --- ОСНОВНОЙ КОНТЕЙНЕР ДЛЯ ЗАДАЧ --- */
.container, 
#task-detail-container
 {
    flex-grow: 1; /* Позволяем занимать всё оставшееся свободное место */
    overflow-y: auto; /* Включаем собственную вертикальную прокрутку */
    padding-left: 15px;
    padding-right: 15px;
    /* 
       Этот отступ критически важен, чтобы контент внизу
       не перекрывался нижней навигацией.
    */
    padding-bottom: 90px; 
    word-break: break-all;
    /* position и z-index больше не нужны для компоновки */
}


/* Новые стили для фильтров, которые теперь самостоятельный блок */
.filters {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    background-color: #ffffff; /* Тот же фон, что и у шапки, для бесшовного вида */
    padding: 0 15px 15px 15px; /* Отступы по бокам и снизу */
    flex-shrink: 0; /* Важно, чтобы сам блок не сжимался по вертикали */

    /* Скрываем саму полосу прокрутки, оставляя скролл */
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}

.filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Кнопкам запрещаем сжиматься, как и раньше */
.filters .filter-button {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #000;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Стили для активных кнопок остаются без изменений */
.filters .filter-button.active {
    background-color: #ffdd2d; /* Активный желтый цвет */
    font-weight: bold;
}

#tasks-list-container {
    display: flex;
    flex-direction: column;
    padding-top: 15px; /* Добавляем отступ сверху от фильтров */
    padding-bottom: 10px;
}

/* --- Стили для карточек задач (без изменений) --- */
.task-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Сделаем тень чуть заметнее */
    cursor: pointer; /* Указывает, что элемент кликабельный */
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; /* Плавный переход для эффектов */
    -webkit-tap-highlight-color: transparent; /* Убирает синюю подсветку при тапе на мобильных */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
    max-width: 100%; /* Запрещаем выход за границы */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Добавляем выравнивание по центру */
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 10px;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 4px; /* Небольшое расстояние между "Статус:" и самим статусом */
}

.task-status-label {
    color: #8e8e93; /* Тот же цвет, что и у других мета-данных */
    font-size: 12px;
}

.task-deadline {
    display: flex;
    align-items: center;
    height: 100%; /* Занимает всю высоту родителя */
}

/* Стиль для просроченных задач - красный текст срока */
.task-card:has(.status-overdue) .task-deadline {
    color: #D32F2F; /* Красный цвет для срока просроченной задачи */
    font-weight: 600;
}
.task-status {
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: bold;
}
.status-in-progress {
    background-color: #FFF2CC; /* Более темный пастельный желтый/кремовый */
    color: #222222;
}
.status-done {
    background-color: #C2E6CE; /* Светло-зеленый */
    color: #222222;
}

/* Статус "Свободна" (светло-пастельный синий) */
.status-free {
    background-color: #AFC0FF; /* Светло-синий */
    color: #222222; /* Темно-серый текст */
}

/* Статус "Просрочена" (светло-пастельный розовый/красный) */
.status-overdue {
    background-color: #FFEBEB; /* Светло-пастельный розовый/красный */
    color: #222222; /* Темно-серый текст */
}

.task-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px 0;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    word-break: break-word;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.task-description {
    font-size: 14px;
    color: #3c3c43;
    margin: 0;
    line-height: 1.4;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    word-break: break-word;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    text-align: justify;
}
.task-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.action-button {
    flex-grow: 1; /* Кнопки занимают всю ширину */
    padding: 12px 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 380px) {
    .action-button {
        font-size: 14px;
        padding: 12px 10px;
    }
}

@media (min-width: 420px) {
    .action-button {
        font-size: 15px;
        padding: 12px;
    }
}
.action-button.cancel {
    background-color: #FFEBEB; /* Очень светлый розовый */
    color: #222222;
}
.action-button.execute {
    background-color: #DCF5E1; /* Очень светлый зеленый */
    color: #222222;
}

/* --- НИЖНЯЯ ПАНЕЛЬ НАВИГАЦИИ --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    gap: 15px; 
    padding: 8px 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* Этот z-index должен быть САМЫМ ВЫСОКИМ */
    z-index: 1000;
}


/* --- Стили для кнопок на панели (без изменений) --- */
.nav-button {
    flex-grow: 0;
    flex-shrink: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    color: #8A8A8E; /* Цвет неактивного элемента */
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 16px; /* Внутренние отступы для формы */
    border-radius: 16px; /* Скругление */
    transition: background-color 0.2s ease;
}
.nav-button img {
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
}
.nav-button span {
    font-size: 12px;
    line-height: 1.2;
}
.nav-button.active {
    color: #000000;      /* Текст и иконка становятся черными */
    font-weight: bold;   /* и жирными */
}
.nav-button.active .nav-button-content {
    background-color: #F0F1F2; /* Светло-серый фон */
}

/* --- Стили для активных цветных фильтров --- */

/* Убираем стандартный серый фон для всех активных кнопок */
/* Убираем дублирующийся стиль */

/* 1. Желтый для "Текущие" */
.filters .filter-button.active-yellow {
    background-color: #FFEB99; /* Светло-желтый */
    color: #222222;            /* Темно-серый текст */
    font-weight: 600;          /* Полужирный шрифт */
    border: none;              /* Убедимся, что нет лишних рамок */
}

/* 2. Зеленый для "Выполненные" */
.filters .filter-button.active-green {
    background-color: #85CC9E; /* Светло-зеленый фон */
    color: #222222;            /* Темно-серый текст */
    font-weight: 600;
}

/* 3. Красный для "Просроченные" */
.filters .filter-button.active-red {
    background-color: #FFADAD; /* Светло-красный фон */
    color: #000000;            /* Черный текст */
    font-weight: 600;
}

/* 4. Синий для "Свободные" */
.filters .filter-button.active-blue {
    background-color: #AFC0FF; /* Светло-синий фон */
    color: #000000;            /* Черный текст */
    font-weight: 600;
}



.scroll-to-top-btn {
    position: fixed;
    bottom: 110px;
    right: 25px;
    width: 50px;
    height: 50px;
    /* --- ИЗМЕНЕНИЕ ЗДЕСЬ --- */
    border-radius: 14px; /* Вместо 50% ставим конкретное значение */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    border: none;
    cursor: pointer;
    z-index: 999;
    display: flex; /* Добавлено для центрирования стрелки */
    align-items: center; /* Добавлено для центрирования стрелки */
    justify-content: center; /* Добавлено для центрирования стрелки */
    transform: translateY(100%);  /* прячем за нижний край */
    transition: transform .3s cubic-bezier(.32,.06,0,1.2);
    pointer-events: none;         /* пока неактивно */
}
.scroll-to-top-btn.visible {
    transform: translateY(0);     /* появиться плавно */
    pointer-events: auto;
}


.status-in-progress {
    background-color: #FFF2CC; /* Более темный пастельный желтый/кремовый */
    color: #222222;
}

/* Статус "Выполнено" (светло-пастельный зеленый) */
.status-done {
    background-color: #C2E6CE;
    color: #222222;
}

/* НОВЫЙ СТИЛЬ: Статус "Не назначена" (тоже серый) */
.status-unassigned {
    background-color: #e0e0e0;
    color: #8e8e93;
}

/* Статус "Свободна" (светло-пастельный синий) */
.status-free {
    background-color: #AFC0FF; /* Светло-синий */
    color: #222222; /* Темно-серый текст */
}

/* Статус "Просрочена" (светло-пастельный розовый/красный) */
.status-overdue {
    background-color: #FFEBEB; /* Светло-пастельный розовый/красный */
    color: #222222; /* Темно-серый текст */
}


/* --- Стили для кнопок действий --- */

/* Общий стиль для контейнера кнопок */
.task-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Общий стиль для всех кнопок */
.action-button {
    flex-grow: 1;
    padding: 12px 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 380px) {
    .action-button {
        font-size: 14px;
        padding: 12px 10px;
    }
}

@media (min-width: 420px) {
    .action-button {
        font-size: 15px;
        padding: 12px;
    }
}

/* Кнопка "Отменить" (розовая) */
.action-button.cancel {
    background-color: #FFE0E0;
    color: #222222;
    font-weight: 600;
}

/* Кнопка "Выполнить" (зеленая) */
.action-button.execute {
    background-color: #C2E6CE;
    color: #222222;
    font-weight: 600;
}

/* НОВЫЙ СТИЛЬ: Кнопка "Принять задачу" (светло-пастельный синий) */
.action-button.accept {
    background-color: #D6DFFF; /* Светло-синий фон */
    color: #000000;            /* Черный текст */
    font-weight: 600;          /* Полужирный шрифт */
    /* flex-grow: 1; уже унаследован, кнопка сама растянется на всю ширину */
}

/* 1. Контейнер для позиционирования иконки */
.search-bar {
    background-color: white;
    position: relative; /* Включаем позиционирование для дочерних элементов */
    padding: 16px;    /* Боковые отступы, как у вас и было */
    margin-bottom: 20px;
}

/* 2. Иконка поиска внутри поля */
.search-bar .search-icon {
    position: absolute;  /* Позиционируем относительно контейнера .search-bar */
    left: 30px;          /* Отступ слева (15px отступ контейнера + 15px до текста) */
    top: 50%;            /* Располагаем по центру вертикали */
    transform: translateY(-50%); /* Точная центровка по вертикали */
    width: 20px;         /* Размер иконки */
    height: 20px;
    opacity: 0.5;        /* Делаем иконку полупрозрачной для лучшего вида */
}

/* 3. Само поле ввода */
.search-bar input {
    width: 100%;
    padding: 12px 50px 12px 45px; /* Увеличиваем правый отступ для крестика */
    
    border: none; /* <-- ЗАМЕНИТЕ СТРОКУ С BORDER НА ЭТУ */

    border-radius: 12px;
    font-size: 16px;
    background-color: #f7f7f7;
    outline: none;
    box-sizing: border-box;
}

/* 4. Стиль при фокусе (когда пользователь кликнул на поле) */
.search-bar input:focus {
    border-color: #007bff; /* Рамка становится синей */
    background-color: #fff;  /* Фон становится белым */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Добавляем красивое свечение */
}

.clear-icon {
    position: absolute;
    right: 25px; /* Позиционируем по центру отведенного пространства */
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Такой же размер, как у иконки поиска */
    height: 20px;
    cursor: pointer;
    display: block; /* Показываем иконку по умолчанию */
    opacity: 0.6;
    transition: opacity 0.2s ease;
    z-index: 10; /* Убеждаемся, что иконка поверх поля ввода */
}

.clear-icon:hover {
    opacity: 1;
}

#tasks-list-container > div {
    margin-bottom: 15px;
}

#tasks-list-container > div:last-child {
    margin-bottom: 0;
}



#task-detail-container {
    padding: 25px 20px 15px 20px;
    background-color: #f0f2f5; /* Чуть темнее фон */
}

/* Увеличенный отступ только при открытии из поиска */
#task-detail-container[data-came-from-search="true"] {
    padding-bottom: 90px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Отступ только для Telegram FULLSCREEN режима */
body.telegram-fullscreen .detail-header {
    padding-top: 115px; /* Увеличенный отступ под Header Telegram с Close кнопкой */
    padding-bottom: 20px; /* Отступ снизу */
    position: sticky; /* Прилипает при скролле */
    top: -25px; /* Прилипает выше верха чтобы фон начинался раньше */
    background-color: #f0f2f5; /* Фон чтобы не просвечивало */
    z-index: 100; /* Высокий z-index над контентом */
    margin-top: -25px; /* Отрицательный margin чтобы компенсировать top */
}

.detail-header .left-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-button, .action-icon-button, .checklist-button {
    /* --- Размеры из Figma --- */
    width: 48px;
    height: 48px;
    border-radius: 12px; /* Скругление углов */
    
    /* --- Внешний вид --- */
    background-color: #ffffff; /* Белый цвет */
    border: none;              /* Убираем рамку */
    
    /* --- Тень, точно как в Figma --- */
    /* X: 0, Y: 2, Blur: 8, Color: rgba(0,0,0,0.12) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    
    /* --- Центрирование иконки внутри --- */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Убираем отступы */

    /* --- Интерактивность --- */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Эффект при наведении, чтобы было живее */
.back-button:hover, .action-icon-button:hover, .checklist-button:hover {
    transform: translateY(-2px);
}

/* Стили для иконки ВНУТРИ кнопки */
.back-button img, .action-icon-button img, .checklist-button img {
    width: 30px;  /* Стандартный размер для иконки */
    height: 30px;
}

/* Контейнер для иконок действий */
.action-icons {
    display: flex;
    align-items: center;
    gap: 12px; /* Промежуток между иконками */
}

/* Специальные стили для кнопки чек-листа с зеленым фоном */
.checklist-button {
    background-color: #22c55e !important; /* Зеленый фон */
}

.checklist-button img {
    filter: brightness(0) invert(1); /* Делаем иконку белой */
}


.detail-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    /* У него нет тени, так как в вашем макете ее нет */
}

.detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Добавляем выравнивание по центру */
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 12px;
}

.detail-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

/* Статус "В работе" в детальном виде */
.detail-status.status-in-progress {
    background-color: #FFF2CC; /* Светло-пастельный желтый/кремовый */
    color: #222222;
}

/* Статус "Выполнено" в детальном виде */
.detail-status.status-done {
    background-color: #C2E6CE; /* Светло-зеленый */
    color: #222222;
}

/* Статус "Свободна" в детальном виде */
.detail-status.status-free {
    background-color: #AFC0FF; /* Светло-синий */
    color: #222222;
}

/* Статус "Просрочена" в детальном виде */
.detail-status.status-overdue {
    background-color: #FFEBEB; /* Светло-пастельный розовый/красный */
    color: #222222;
}

/* Статус "Не назначена" в детальном виде */
.detail-status.status-unassigned {
    background-color: #e0e0e0; /* Серый */
    color: #8e8e93;
}

.detail-main-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
}

.detail-description {
    font-size: 15px;
    color: #495057;
    line-height: 1.5;
}

.detail-item {
    background-color: transparent; 
    padding: 12px 16px; 
    border-bottom: 1px solid #e0e0e0;
    /* Убираем flex, чтобы элементы встали друг под другом */
}


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

.detail-label {
    display: block; /* Заставляем занимать всю ширину */
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 4px; /* Небольшой отступ снизу */
}

/* Стиль для НИЖНЕГО значения (имя, номер...) */
.detail-value {
    display: block; /* Заставляем занимать всю ширину */
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

/* Стили для кликабельных полей с фильтрацией */
.filterable-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filterable-item:hover {
    background-color: #f8f9fa;
}

.filterable-item .detail-value {
    text-decoration: underline;
    cursor: pointer;
}

.detail-actions {
    margin-top: 20px;
}


.detail-divider {
    border: none; /* Убираем стандартную рамку */
    height: 1px;  /* Задаем высоту в 1 пиксель */
    background-color: #f0f2f5; /* Цвет как у фона страницы */
    margin: 16px 0; /* Отступы сверху и снизу */
}

.detail-divider + .detail-item {
    border-top: none;
    padding-top: 0; /* Убираем лишний отступ сверху */
}

#task-detail-content {
    padding-bottom: 95px; /* <- ВАЖНО: Добавляем "пустое место" внизу */
}

.detail-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}



.task-actions.detail-actions {
    /* Фиксируем блок относительно окна браузера */
    position: fixed;

    /* Прижимаем его к низу, оставляя место для главной навигации */
    /* Увеличиваем отступ для корректного отображения над навигацией */
    bottom: 105px; /* Увеличено до 105px для лучшего отступа */ 
    
    left: 0;
    width: 100%;
    
    /* Стилизация самого блока */
    background-color: #ffffff;
    padding: 12px 16px 12px 16px;
    border-top: 1px solid #e9e9eb; /* Тонкая линия сверху */
    box-sizing: border-box; /* Чтобы padding не влиял на ширину */

    /* Располагаем кнопки рядом */
    display: flex;
    gap: 10px;
}

/* Стили для самих кнопок "Отменить" и "Выполнить" */
.task-actions .action-button {
    flex-grow: 1; /* Растягиваем кнопки на всю ширину */
    padding: 14px 8px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 380px) {
    .task-actions .action-button {
        font-size: 14px;
        padding: 14px 10px;
    }
}

@media (min-width: 420px) {
    .task-actions .action-button {
        font-size: 15px;
        padding: 14px;
    }
}

/* Персональные цвета для кнопок */
.task-actions .action-button.cancel {
    background-color: #FFE0E0;
    color: #222222;
    font-weight: 600;
}
.task-actions .action-button.execute {
    background-color: #C2E6CE;
    color: #222222;
    font-weight: 600;
}
.task-actions .action-button.accept {
    background-color: #D6DFFF;
    color: #000000;
    font-weight: 600;
}

/* Увеличенные кнопки в модальных окнах */
#saveInvite.action-button.accept,
#saveComment.action-button.accept,
#saveTransfer.action-button.accept,
#saveAttach.action-button.accept,
#cancelComment.action-button.cancel,
#cancelInvite.action-button.cancel,
#cancelTransfer.action-button.cancel,
#cancelAttach.action-button.cancel {
    padding: 16px 20px; /* Увеличиваем отступы */
    font-size: 16px;    /* Увеличиваем размер шрифта */
    min-height: 48px;   /* Минимальная высота */
}



#search-container {
    flex-grow: 1; /* Занимает всё доступное место по высоте */
    display: flex;
    flex-direction: column; /* Дети (строка, результаты) идут в колонку */
    overflow: hidden; /* Прокрутка у него самого отключена */
    /* Добавьте padding-top здесь, чтобы отбить от шапки */
    padding-top: 0px; /* Отступ от шапки для содержимого поиска */
    /* padding-left и padding-right убраны */
    padding-bottom: 90px; /* Нижний оставьте */
    min-height: 0; /* Важно для flexbox прокрутки */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* 2. Строка поиска. Она прибита к верху и не скроллится. */
#search-container .search-bar {
    flex-shrink: 0; /* Запрещаем сжиматься */
    background-color: #ffffff; /* Добавим фон для отделения */
    margin-bottom: 0; /* Убираем твой старый отступ */
    padding: 16px;
    /* border-bottom: 1px solid #f0f0f0; Линия-разделитель убрана */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* 3. Контейнер для результатов. Он занимает всё место и скроллится. */
#search-container #search-results-container {
    flex-grow: 1; /* Занимает всё оставшееся место */
    overflow-y: auto; /* Вот здесь будет прокрутка! */
    overflow-x: hidden; /* Запрещаем горизонтальную прокрутку */
    padding: 16px 15px 350px 15px; /* Большой отступ снизу для клавиатуры (350px) */
    min-height: 0; /* Важно для flexbox прокрутки */
    height: 100%;
    max-height: none; /* Убираем ограничение высоты */
    -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* Стили для списка результатов поиска */
.search-results-list {
    /* Убеждаемся, что список может растягиваться */
    min-height: 100%;
    padding-bottom: 20px; /* Добавляем отступ снизу для лучшей прокрутки */
}

/* Стили для карточек в результатах поиска */
.search-results-list .task-card {
    /* Убеждаемся, что карточки не сжимаются */
    flex-shrink: 0;
}


body.details-view-active #scrollToTopBtn {
  display: none !important;
}


/* --- Стили для результатов поиска --- */

/* Индикатор загрузки */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f0f0f0;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-loading p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Заголовок результатов */
.search-results-header {
    padding: 20px 0 16px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
}

.search-results-header h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.search-section-stats {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* Список результатов */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Тот же отступ, что и у обычных карточек */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* Карточки в результатах поиска используют стандартные стили .task-card */
.search-results-list .task-card {
    /* Все стили наследуются от .task-card */
    margin-bottom: 0; /* Убираем лишний отступ */
    width: 100%; /* Фиксируем ширину */
    box-sizing: border-box; /* Учитываем padding в ширине */
    max-width: 100%; /* Запрещаем выход за границы */
}

/* Сообщение об отсутствии результатов */
.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.search-no-results p {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.search-suggestion {
    font-size: 14px;
    color: #8e8e93;
    margin: 0;
}

/* Сообщение об ошибке */
.search-error {
    text-align: center;
    padding: 60px 20px;
    color: #d32f2f;
}

.search-error p {
    margin: 0 0 8px 0;
    font-size: 16px;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
    .search-result-item {
        padding: 14px;
    }
    
    .search-result-title {
        font-size: 15px;
    }
    
    .search-result-description {
        font-size: 13px;
    }
    
    .search-results-header h2 {
        font-size: 16px;
    }
}

/* --- Стили для индикатора раздела в результатах поиска --- */

.task-section-indicator {
    margin-bottom: 8px;
}

.section-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f0f0f0;
    color: #666;
    border: 1px solid #e0e0e0;
}

/* --- Гарантированное удаление полоски под заголовком --- */
.page-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* --- Гарантированное удаление полоски сверху у контейнера поиска --- */
#search-container {
    border-top: none !important;
}

/* Стили для сообщений загрузки */
.loading-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.loading-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

.loading-message::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .loading-message {
        padding: 30px 15px;
        font-size: 14px;
        margin: 15px;
    }
    
    .loading-message::after {
        width: 32px;
        height: 32px;
        border-width: 2px;
        margin-bottom: 12px;
    }
}

/* Стили для модальных окон */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    animation: modalBackdropIn 0.4s ease-out;
}

.modal-content {
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalBackdropIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #212529;
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #e9ecef;
}

/* Стили для кнопок */
.btn-primary, .btn-secondary {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 48px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #000000;
}

.btn-primary {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid rgba(144, 202, 249, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #bbdefb, #90caf9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(144, 202, 249, 0.4);
    border-color: rgba(144, 202, 249, 0.5);
}

.btn-secondary {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    border: 1px solid rgba(239, 154, 154, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #ffcdd2, #ef9a9a);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 154, 154, 0.4);
    border-color: rgba(239, 154, 154, 0.5);
}

/* Активное состояние кнопок */
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(144, 202, 249, 0.5);
    border-color: rgba(144, 202, 249, 0.6);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(239, 154, 154, 0.5);
    border-color: rgba(239, 154, 154, 0.6);
}

/* Стили для фокуса кнопок */
.btn-primary:focus,
.btn-secondary:focus,
.btn-clear-file:focus {
    outline: none;
}

.btn-primary:focus {
    border-color: rgba(144, 202, 249, 0.6);
    box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.2);
}

.btn-secondary:focus {
    border-color: rgba(239, 154, 154, 0.6);
    box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.2);
}

.btn-clear-file:focus {
    border-color: rgba(239, 154, 154, 0.6);
    box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.2);
}

/* Отключенное состояние кнопок */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-clear-file:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    border-color: #bdbdbd;
    color: #757575;
}

/* Стили для полей ввода */
.modal-body input[type="text"]:not(.search-input-container input),
.modal-body textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.modal-body input[type="text"]:not(.search-input-container input):focus,
.modal-body textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.modal-body textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

/* Кастомный файловый input */
.custom-file-input {
    width: 100%;
    min-height: 80px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-file-input:hover {
    border-color: #007bff;
    background-color: #e7f3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

.custom-file-input:focus-within {
    outline: none;
    border-color: #007bff;
    background-color: #e7f3ff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Скрываем стандартный input */
.custom-file-input input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Контент файлового input */
.file-input-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
    z-index: 1;
    pointer-events: none;
}

/* Кнопка выбора файла */
.file-button {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
}

.file-button:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.file-icon {
    font-size: 16px;
}

.file-text {
    white-space: nowrap;
}

/* Статус файла */
.file-status {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

.modal-body input[type="file"]:hover {
    border-color: #007bff;
    background-color: #e7f3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

.modal-body input[type="file"]:focus {
    outline: none;
    border-color: #007bff;
    background-color: #e7f3ff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.modal-body input[type="file"]:focus::before {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

/* Стили для drag & drop */
.custom-file-input.drag-over {
    border-color: #28a745;
    background-color: #d4edda;
    transform: scale(1.02);
}

.custom-file-input.drag-over .file-button {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    transform: scale(1.05);
}

.custom-file-input.drag-over .file-status {
    color: #28a745;
    font-weight: 600;
}

/* Стили для выбранного файла */
.custom-file-input.file-selected {
    border-color: #28a745;
    background-color: #f8fff9;
}

.custom-file-input.file-selected .file-status {
    color: #28a745;
    font-weight: 600;
}

/* Стили для состояния загрузки */
.custom-file-input.uploading {
    border-color: #ffc107;
    background-color: #fff8e1;
}

.custom-file-input.uploading .file-status {
    color: #ffc107;
    font-weight: 600;
}

.custom-file-input.uploading .file-button {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    animation: pulse 1.5s infinite;
}

/* Анимация пульсации */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Скрываем стандартную кнопку "Выберите файл" */
.modal-body input[type="file"]::-webkit-file-upload-button {
    display: none;
}

.modal-body input[type="file"]::file-selector-button {
    display: none;
}

/* Скрываем стандартный текст браузера */
.modal-body input[type="file"]::-webkit-file-upload-button,
.modal-body input[type="file"]::file-selector-button {
    display: none;
}

/* Скрываем стандартный текст "No file chosen" */
.modal-body input[type="file"]::-webkit-file-upload-button,
.modal-body input[type="file"]::file-selector-button,
.modal-body input[type="file"]::-webkit-file-upload-button + span,
.modal-body input[type="file"]::file-selector-button + span {
    display: none !important;
}

/* Дополнительное скрытие стандартных элементов */
.modal-body input[type="file"] {
    color: transparent !important;
}

.modal-body input[type="file"]::-webkit-input-placeholder {
    color: transparent !important;
}

.modal-body input[type="file"]::-moz-placeholder {
    color: transparent !important;
}

.modal-body input[type="file"]:-ms-input-placeholder {
    color: transparent !important;
}

.modal-body input[type="file"]::placeholder {
    color: transparent !important;
}

/* Кастомная кнопка для выбора файла */
.modal-body input[type="file"]::before {
    content: '📎 Выберите файл';
    display: inline-block;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    order: 1;
}

.modal-body input[type="file"]:hover::before {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.modal-body input[type="file"]:active::before {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Стили для текста "Файл не выбран" */
.modal-body input[type="file"]::after {
    content: 'Файл не выбран';
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    order: 2;
    margin-top: 4px;
}

.file-info {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    border: 2px solid #dee2e6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    animation: fileInfoSlideIn 0.3s ease-out;
}

.file-info p {
    margin: 6px 0;
    font-size: 14px;
    color: #495057;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-info p:first-child::before {
    content: '📄';
    font-size: 16px;
}

.file-info p:last-child::before {
    content: '📊';
    font-size: 16px;
}

/* Кнопка очистки файла */
.btn-clear-file {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #000000;
    border: 1px solid rgba(239, 154, 154, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(239, 154, 154, 0.3);
}

.btn-clear-file:hover {
    background: linear-gradient(135deg, #ffcdd2, #ef9a9a);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 154, 154, 0.4);
    border-color: rgba(239, 154, 154, 0.5);
}

.btn-clear-file:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(239, 154, 154, 0.3);
    border-color: rgba(239, 154, 154, 0.6);
}

@keyframes fileInfoSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Кнопка закрытия */
.close-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover {
    background-color: #f8f9fa;
    color: #495057;
    transform: scale(1.1);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: none;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 18px 28px;
        min-height: 60px;
        font-size: 18px;
        border-radius: 14px;
        border-width: 1px;
    }
    
    /* Улучшения для мобильных устройств */
    .modal-content {
        margin: 10% auto;
        border-radius: 12px;
    }
    
    .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-body input[type="text"]:not(.search-input-container input),
    .modal-body textarea {
        font-size: 16px; /* Предотвращает зум на iOS */
        padding: 14px 16px;
    }
    
    .modal-body textarea {
        min-height: 100px;
    }
    
    /* Стили для файлового input на мобильных */
    .custom-file-input {
        min-height: 90px;
    }
    
    .file-input-content {
        padding: 24px 16px;
        gap: 12px;
    }
    
    .file-button {
        padding: 16px 24px;
        font-size: 16px;
    }
    
    .file-status {
        font-size: 16px;
        margin-top: 8px;
    }
    
    .file-info {
        margin-top: 16px;
        padding: 14px;
    }
    
    .file-info p {
        font-size: 14px;
        margin: 4px 0;
    }
    
    .btn-clear-file {
        padding: 12px 20px;
        font-size: 14px;
        margin-top: 16px;
        border-width: 1px;
    }
}

/* Стили для уведомлений */
.notification {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.notification-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Анимации для уведомлений */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Стили для статуса "Принята" */
.task-status.status-accepted {
    color: #2e7d32;
    font-weight: 600;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Стили для статуса "Выполнена" */
.task-status.status-completed {
    color: #1976d2;
    font-weight: 600;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(25, 118, 210, 0.3);
}

/* Стили для кнопки "Выполнить задачу" в состоянии выполнения */
.action-button.execute:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: #757575;
    transform: none !important;
    box-shadow: none !important;
}

.action-button.execute:hover:disabled {
    transform: none !important;
    box-shadow: none !important;
}

/* Стили для кнопки "Отменить задачу" в состоянии отмены */
.action-button.cancel:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: #757575;
    transform: none !important;
    box-shadow: none !important;
}

.action-button.cancel:hover:disabled {
    transform: none !important;
    box-shadow: none !important;
}

/* Стили для специальных полей в детальном просмотре */
.detail-comment .comment-content {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-top: 8px;
    white-space: pre-wrap;
    line-height: 1.5;
}

.detail-variants .variants-list {
    margin-top: 8px;
}

.variant-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
}

.variant-number {
    background: #007bff;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.variant-text {
    flex: 1;
    line-height: 1.4;
}

.detail-files .files-list {
    margin-top: 8px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
}

.file-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.file-name {
    flex: 1;
    font-weight: 500;
}

.file-size {
    color: #6c757d;
    font-size: 12px;
}

.detail-history .history-list {
    margin-top: 8px;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
    font-size: 13px;
}

.history-date {
    color: #6c757d;
    min-width: 80px;
}

.history-user {
    color: #007bff;
    font-weight: 500;
    min-width: 100px;
}

.history-action {
    flex: 1;
    color: #495057;
}

/* Стили для дополнительных исполнителей */
.detail-additional-executors .additional-executors-list {
    margin-top: 8px;
}

.executor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
}

.executor-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.executor-name {
    flex: 1;
    font-weight: 500;
}

/* Стили для чек-листа */
.detail-checklist .checklist-list {
    margin-top: 8px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
}

.checklist-checkbox {
    font-size: 16px;
    flex-shrink: 0;
    color: #6c757d;
}

.checklist-text {
    flex: 1;
    line-height: 1.4;
    order: 1; /* Текст слева */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .variant-item,
    .file-item,
    .history-item,
    .executor-item,
    .checklist-item {
        padding: 10px 14px;
        margin-bottom: 8px;
    }
    
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .history-date,
    .history-user {
        min-width: auto;
    }
    
    .detail-comment .comment-content {
        padding: 14px;
        font-size: 14px;
    }

    /* Адаптивность для header с иконками на мобильных */
    .detail-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .detail-header .left-buttons {
        gap: 12px;
    }

    .action-icons {
        gap: 8px; /* Уменьшаем промежуток между иконками на мобильных */
    }

    .back-button, .action-icon-button, .checklist-button {
        width: 40px;  /* Уменьшаем размер кнопок */
        height: 40px;
    }

    .back-button img, .action-icon-button img, .checklist-button img {
        width: 24px;  /* Уменьшаем размер иконок */
        height: 24px;
    }

    /* Адаптация модальных окон для маленьких экранов */
    .invite-modal-content,
    .transfer-modal-content {
        top: 56% !important;
        max-height: 65vh;
        min-height: 450px;
    }

    .comment-modal-content {
        top: 61% !important;
        max-height: 52vh;
        min-height: 350px;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
    .detail-header {
        padding: 0 10px;
    }

    .action-icons {
        gap: 6px; /* Еще меньше промежуток */
    }

    .back-button, .action-icon-button, .checklist-button {
        width: 36px;  /* Еще меньше кнопки */
        height: 36px;
    }

    .back-button img, .action-icon-button img, .checklist-button img {
        width: 20px;  /* Еще меньше иконки */
        height: 20px;
    }
}

/* Стили для фильтруемых полей */
.filterable-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filterable-item:hover {
    background-color: rgba(0, 123, 255, 0.05);
    border-radius: 6px;
}

.filter-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    opacity: 0.6;
    vertical-align: middle;
}

.filterable-item .detail-label {
    display: flex;
    align-items: center;
}

/* === Новое модальное окно приглашения пользователя === */

.invite-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.invite-modal-content {
    background-color: white;
    border-radius: 24px;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 450px;
    min-height: 500px;
    max-height: 75vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.invite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.invite-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.invite-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.invite-close:hover {
    background-color: #f5f5f5;
}

.invite-body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.invite-search-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f8f8;
    margin-bottom: 16px;
    height: 48px;
}

.invite-search-icon {
    width: 18px;
    height: 18px;
    margin-left: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

.invite-search-field input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
    color: #333;
    height: 100%;
}

.invite-search-field input::placeholder {
    color: #999;
}

.invite-clear-icon {
    width: 18px;
    height: 18px;
    margin-right: 16px;
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
}

.invite-clear-icon:hover {
    opacity: 0.7;
}

.invite-users-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.invite-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.invite-user-item:last-child {
    border-bottom: none;
}

.invite-user-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.invite-user-item.selected {
    background-color: rgba(74, 144, 226, 0.1);
}

.invite-user-info {
    flex: 1;
}

.invite-user-name {
    font-weight: 400;
    font-size: 16px;
    color: #333;
    line-height: 1.2;
}

.invite-user-role {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

.invite-user-check {
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.invite-user-item.selected .invite-user-check {
    background-color: #4a90e2;
    border-color: #4a90e2;
}

.invite-user-check-icon {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.invite-user-item.selected .invite-user-check-icon {
    opacity: 1;
}

.invite-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px 20px;
}

.invite-btn-cancel,
.invite-btn-accept {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invite-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.invite-btn-cancel:hover {
    background: #e8e8e8;
}

.invite-btn-accept {
    background: #C2E6CE;
    color: #000;
}

.invite-btn-accept:hover {
    background: #A8D9B8;
}

.invite-btn-accept:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.invite-no-users {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* === Модальное окно передачи задачи (копия стилей приглашения) === */

.transfer-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.transfer-modal-content {
    background-color: white;
    border-radius: 24px;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 450px;
    min-height: 500px;
    max-height: 75vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.transfer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.transfer-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.transfer-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.transfer-close:hover {
    background-color: #f5f5f5;
}

.transfer-body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.transfer-search-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f8f8;
    margin-bottom: 16px;
    height: 48px;
}

.transfer-search-icon {
    width: 18px;
    height: 18px;
    margin-left: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

.transfer-search-field input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
    color: #333;
    height: 100%;
}

.transfer-search-field input::placeholder {
    color: #999;
}

.transfer-clear-icon {
    width: 18px;
    height: 18px;
    margin-right: 16px;
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
}

.transfer-clear-icon:hover {
    opacity: 0.7;
}

.transfer-users-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.transfer-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.transfer-user-item:last-child {
    border-bottom: none;
}

.transfer-user-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.transfer-user-item.selected {
    background-color: rgba(74, 144, 226, 0.1);
}

.transfer-user-info {
    flex: 1;
}

.transfer-user-name {
    font-weight: 400;
    font-size: 16px;
    color: #333;
    line-height: 1.2;
}

.transfer-user-role {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

.transfer-user-check {
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.transfer-user-item.selected .transfer-user-check {
    background-color: #4a90e2;
    border-color: #4a90e2;
}

.transfer-user-check-icon {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.transfer-user-item.selected .transfer-user-check-icon {
    opacity: 1;
}

.transfer-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px 20px;
}

.transfer-btn-cancel,
.transfer-btn-accept {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transfer-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.transfer-btn-cancel:hover {
    background: #e8e8e8;
}

.transfer-btn-accept {
    background: #C2E6CE;
    color: #000;
}

.transfer-btn-accept:hover {
    background: #A8D9B8;
}

.transfer-btn-accept:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.transfer-no-users {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* === Модальное окно комментария === */

.comment-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.comment-modal-content {
    background-color: white;
    border-radius: 24px;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 450px;
    min-height: 400px;
    max-height: 85vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.comment-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.comment-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.comment-close:hover {
    background-color: #f5f5f5;
}

.comment-body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comment-textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comment-textarea-container textarea {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f8f8;
    padding: 16px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 120px;
    color: #333;
    line-height: 1.4;
}

.comment-textarea-container textarea::placeholder {
    color: #999;
}

.comment-textarea-container textarea:focus {
    border-color: #4a90e2;
    background: white;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.comment-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px 20px;
}

.comment-btn-cancel,
.comment-btn-accept {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.comment-btn-cancel:hover {
    background: #e8e8e8;
}

.comment-btn-accept {
    background: #C2E6CE;
    color: #000;
}

.comment-btn-accept:hover {
    background: #A8D9B8;
}

.comment-btn-accept:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* === МОДАЛЬНОЕ ОКНО ЧЕК-ЛИСТА === */
.checklist-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.checklist-modal-content {
    background-color: white;
    margin: 7.5% auto;
    border-radius: 12px;
    width: 95%;
    max-width: 450px;
    min-height: 600px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.checklist-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.checklist-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.checklist-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checklist-close:hover {
    background: #f5f5f5;
    color: #666;
}

.checklist-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.checklist-item:hover {
    background: #f0f3f6;
}

.checklist-item.required {
    border-color: #ffc107;
    background: #fff8e1;
}

.checklist-item.completed {
    background: #e8f5e8;
    border-color: #4caf50;
}

.checklist-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #f5f5f5;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checklist-checkbox.checked {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #000; /* Черная галочка */
}

.checklist-checkbox:hover {
    border-color: #4caf50;
}

.checklist-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    order: 1; /* Текст слева */
}

.checklist-text.completed {
    text-decoration: line-through;
    color: #666;
}

.checklist-item.required .checklist-text {
    font-weight: bold;
    color: #d32f2f;
}

.checklist-required-badge {
    background: #ffc107;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.checklist-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.checklist-btn-cancel,
.checklist-btn-accept {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.checklist-btn-cancel:hover {
    background: #e8e8e8;
}

.checklist-btn-accept {
    background: #C2E6CE;
    color: #000;
}

.checklist-btn-accept:hover {
    background: #A8D9B8;
}

.checklist-btn-accept:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .checklist-modal-content {
        margin: 5% auto;
        width: 95%;
        min-height: 70vh;
        max-height: 90vh;
    }

    .checklist-item {
        padding: 12px;
    }

    .checklist-text {
        font-size: 13px;
    }
}

/* === МОДАЛЬНОЕ ОКНО ПРИКРЕПЛЕНИЯ ФАЙЛА === */
.attach-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.attach-modal-content {
    background-color: white;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 358px;
    height: 576px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
}

.attach-header {
    padding: 12px;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}

.attach-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.attach-header-left h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.attach-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.attach-header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.attach-files-count {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 26px;
}

.attach-add-btn {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #FFFFFF;
    color: #000000;
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    height: 36px;
    line-height: 26px;
}

.attach-add-btn:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), #FFFFFF;
}

.attach-add-btn img {
    width: 24px;
    height: 24px;
}

.attach-close {
    background: #FFFFFF;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 4px;
    gap: 4px;
}

.attach-close:hover {
    background: #f5f5f5;
    color: #666;
}

.attach-body {
    flex: 1;
    padding: 0px 12px 0px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.attach-upload-zone {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background: #fafafa;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.attach-upload-zone:hover {
    border-color: #4caf50;
    background: #f8fff8;
}

.attach-upload-zone.dragover {
    border-color: #4caf50;
    background: #f0f8f0;
}

.attach-upload-icon {
    margin-bottom: 16px;
}

.attach-upload-icon img {
    width: 48px;
    height: 48px;
    opacity: 0.6;
}

.attach-upload-text {
    margin-bottom: 20px;
}

.attach-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.attach-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.attach-select-btn {
    background: #000;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attach-select-btn:hover {
    background: #333;
}

.attach-files-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-height: 460px;
    overflow-y: auto;
    width: 100%;
    height: 460px;
}

.attach-file-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    min-height: 86px;
    height: auto;
    box-sizing: border-box;
    gap: 8px;
    width: 100%;
    flex: none;
}

.attach-file-item:hover {
    background: #f0f3f6;
}

.attach-file-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #FFFFFF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
}

.attach-file-icon.success {
    background: #C2E6CE;
}

.attach-file-icon.success::after {
    content: "✓";
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.attach-file-icon.uploading {
    background: #E3F2FD;
}

.attach-file-icon.uploading::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #1976D2;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.attach-file-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 62px;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.attach-file-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 36px;
    height: auto;
}

.attach-file-content {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-height: 36px;
    height: auto;
}

.attach-file-title-section {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-height: 36px;
    height: auto;
}

.attach-file-name {
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    min-height: 24px;
    height: auto;
    flex: 1;
    max-width: 220px;
    width: 100%;
}

.attach-file-meta {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.56);
    display: flex;
    gap: 4px;
    align-items: center;
    line-height: 18px;
    min-height: 18px;
    height: auto;
    flex-wrap: wrap;
}

.attach-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-remove-btn:hover {
    opacity: 0.7;
}

.attach-remove-btn img {
    width: 24px;
    height: 24px;
    filter: invert(15%) sepia(94%) saturate(7489%) hue-rotate(1deg) brightness(104%) contrast(119%);
}

.attach-file-meta .separator {
    width: 2px;
    height: 2px;
    background: rgba(0, 0, 0, 0.56);
    border-radius: 50%;
    flex-shrink: 0;
}

.attach-files-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.attach-files-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.attach-files-empty-text {
    font-size: 16px;
    margin-bottom: 8px;
}

.attach-files-empty-subtitle {
    font-size: 14px;
    opacity: 0.8;
}

.attach-footer {
    padding: 10px 12px;
    border-top: none;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    height: 68px;
    box-sizing: border-box;
}

.attach-btn-accept {
    width: 334px;
    height: 48px;
    padding: 10px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-btn-accept {
    background: linear-gradient(0deg, rgba(0, 148, 52, 0.24), rgba(0, 148, 52, 0.24)), #FFFFFF;
    color: #000000;
    opacity: 1;
}

.attach-btn-accept:hover {
    opacity: 0.8;
}

.attach-btn-accept:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Мобильная адаптация для прикрепления файла */
@media (max-width: 480px) {
    .attach-modal-content {
        margin: 5% auto;
        width: 95%;
        min-height: 60vh;
        max-height: 90vh;
    }

    .attach-upload-zone {
        padding: 30px 15px;
    }

    .attach-upload-icon {
        font-size: 36px;
    }

    .attach-title {
        font-size: 14px;
    }

    .attach-subtitle {
        font-size: 12px;
    }
}

/* === ОТОБРАЖЕНИЕ ФАЙЛОВ В КАРТОЧКЕ ЗАДАЧИ === */
.task-files-section {
    margin-top: 12px;
}

.task-files-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-file-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    gap: 12px;
    transition: all 0.2s ease;
    flex-wrap: wrap;
}

.task-file-item.clickable {
    cursor: pointer;
}

.task-file-item.clickable:hover {
    background: #f8f9fa;
    border-color: #007bff;
    transform: translateY(-1px);
}

.task-file-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.task-file-icon img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.task-file-info {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.task-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    word-break: break-word;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.task-file-size {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-file-download {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.task-file-item:hover .task-file-download {
    opacity: 1;
}

.task-file-download img {
    width: 16px;
    height: 16px;
}

/* Мобильная адаптация для файлов в задаче */
@media (max-width: 480px) {
    .task-file-item {
        padding: 10px;
        gap: 8px;
    }

    .task-file-name {
        font-size: 13px;
    }

    .task-file-size {
        font-size: 11px;
        max-width: 100%;
    }

    .task-file-info {
        flex: 1 1 100%;
        max-width: calc(100% - 40px);
    }

    .task-file-icon {
        width: 20px;
        height: 20px;
    }

    .task-file-icon img {
        width: 14px;
        height: 14px;
    }
}

/* === МОДАЛЬНОЕ ОКНО ПОДТВЕРЖДЕНИЯ ВЫПОЛНЕНИЯ ЗАДАЧИ === */
.execute-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.execute-modal-content {
    background-color: white;
    position: absolute;
    top: calc(50% + 30px);
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    width: 95%;
    max-width: 350px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.execute-header {
    padding: 20px;
    text-align: left;
}

.execute-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.execute-footer {
    display: flex;
    padding: 20px;
    gap: 12px;
}

.execute-btn-cancel,
.execute-btn-confirm {
    flex: 1;
    padding: 16px 20px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.execute-btn-cancel {
    background-color: #f5f5f5;
    color: #666;
}

.execute-btn-cancel:hover {
    background-color: #e9e9e9;
}

.execute-btn-confirm {
    background-color: #C2E6CE;
    color: black;
}

.execute-btn-confirm:hover {
    background-color: #B8E2C4;
}

.execute-btn-confirm:active {
    background-color: #AEDEBA;
}

/* Новые стили для пошагового модального окна */
.execute-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.execute-close:hover {
    color: #333;
}

.execute-body {
    padding: 0 20px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.execute-step {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 12px;
}

.execute-step:last-child {
    margin-bottom: 0;
}

.execute-step-header {
    margin-bottom: 8px;
}

.execute-step-number {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.execute-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.execute-step-content {
    margin-top: 12px;
}

.execute-checklist-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: all 0.2s ease;
}

.execute-checklist-item:hover {
    background: #f0f3f6;
}

.execute-checklist-item:last-child {
    margin-bottom: 0;
}

.execute-checklist-item.required {
    border-color: #ffc107;
    background: #fff8e1;
}

.execute-checklist-item.completed {
    background: #e8f5e8;
    border-color: #4caf50;
}

.execute-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #4CAF50;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

.execute-checkbox.checked {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}

.execute-check-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #4CAF50;
}

.execute-item-text {
    flex: 1;
    font-size: 13px;
    color: #333;
}

.execute-file-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: white;
    border: 2px dashed #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    width: 100%;
}

.execute-file-button:hover {
    background-color: #f8f9fa;
    border-color: #999;
}

.execute-comment-info {
    padding: 12px;
    background-color: white;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.execute-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: #C2E6CE;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.execute-action-button:hover {
    background-color: #B8E2C4;
}

.execute-action-button:active {
    background-color: #AEDEBA;
}

.execute-step-status {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

.execute-comment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: white;
    border: 2px solid #C2E6CE;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.execute-comment-button:hover {
    background-color: #f8f9fa;
    border-color: #B8E2C4;
}

.execute-comment-preview {
    margin-top: 12px;
    padding: 12px;
    background-color: white;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    border-left: 3px solid #C2E6CE;
}

.execute-comment-save-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background: #C2E6CE;
    color: #000;
    transition: all 0.2s ease;
}

.execute-comment-save-btn:hover {
    background: #A8D9B8;
}

.execute-comment-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .execute-modal-content {
        width: 90%;
        max-width: none;
    }

    .execute-header h3 {
        font-size: 16px;
        padding-right: 40px;
    }

    .execute-btn-cancel,
    .execute-btn-confirm {
        font-size: 16px;
        padding: 14px 18px;
        min-height: 48px;
    }

    .execute-step-title {
        font-size: 15px;
    }

    .execute-item-text {
        font-size: 13px;
    }
}

/* Стили для модального окна просмотра изображений */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.image-modal-content {
    background-color: white;
    border-radius: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.image-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #EEEEEE;
    flex-shrink: 0;
}

.image-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.image-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.image-close:hover {
    color: #666;
    background-color: #F5F5F5;
}

.image-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    background-color: #F8F9FA;
}

.image-body img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.image-footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px 20px;
    border-top: 1px solid #EEEEEE;
    flex-shrink: 0;
}

.image-btn-download {
    background: var(--tg-theme-button-color, #2AABEE);
    color: var(--tg-theme-button-text-color, white);
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    display: none; /* Скрываем кнопку скачивания */
    align-items: center;
    justify-content: center;
}

.image-btn-download:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.image-btn-download:active {
    transform: translateY(0);
}

/* Мобильная адаптация для модального окна изображения */
@media (max-width: 480px) {
    .image-modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .image-header {
        padding: 16px 20px 12px;
    }

    .image-header h3 {
        font-size: 16px;
    }

    .image-body {
        padding: 16px;
    }

    .image-footer {
        padding: 12px 20px 16px;
    }

    .image-btn-download {
        font-size: 16px;
        padding: 14px 20px;
    }
}