:root {
    --bg: #f0f4f8; --panel: #ffffff; --text: #1a202c; --text-muted: #718096; --border: #e2e8f0;
    --blue: #3182ce; --blue-hover: #2b6cb0;
    --st-open: #e53e3e;     --st-open-bg: #fff5f5;
    --st-prog: #3182ce;     --st-prog-bg: #ebf8ff;
    --st-pend: #dd6b20;     --st-pend-bg: #fffff0;
    --st-close: #38a169;    --st-close-bg: #f0fff4;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background-color: var(--bg); color: var(--text); margin: 0; padding: 15px; font-size: 14px; }
* { box-sizing: border-box; }

button { border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 10px 16px; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: #cbd5e0; }

.container { display: flex; gap: 20px; max-width: 1600px; margin: 0 auto; align-items: flex-start; }

.form-panel { 
    background: var(--panel); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    border: 1px solid var(--border); 
    width: 340px; 
    position: sticky; 
    top: 15px; 
    /* Ограничиваем высоту экраном и включаем внутренний скролл */
    max-height: calc(100vh - 30px); 
    overflow-y: auto; 
}

/* скроллбар специально для левой панели */
.form-panel::-webkit-scrollbar { width: 6px; }
.form-panel::-webkit-scrollbar-track { background: transparent; }
.form-panel::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
.form-panel::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; background: #f8fafc; transition: 0.2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); }

.data-panel { flex-grow: 1; min-width: 0; }
.dashboard-header { background: var(--panel); padding: 15px 20px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.filters-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 8px; background: #f8fafc; padding: 6px 12px; border-radius: 8px; border: 1px solid #edf2f7; flex-wrap: wrap; }
.filter-label { font-weight: 700; font-size: 11px; color: var(--text-muted); text-transform: uppercase; margin-right: 4px; }
.filter-btn { padding: 6px 12px; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: 6px; font-size: 13px; font-weight: 600; }
.filter-btn:hover { background: #e2e8f0; }
.filter-btn.active { background: white; color: var(--blue); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.dashboard-header input[type="date"] { width: auto; min-width: 120px; padding: 6px 10px; font-size: 13px; cursor: pointer; }

/* === КАРТОЧКА ТИКЕТА === */
.group-header { font-size: 13px; font-weight: 800; color: #4a5568; text-transform: uppercase; margin: 20px 0 10px; border-bottom: 2px solid var(--border); padding-bottom: 5px; }
.ticket-card { background: white; border-radius: 12px; border: 1px solid var(--border); border-left: 6px solid var(--border); margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: box-shadow 0.2s; }
.ticket-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.ticket-card.st-open { border-left-color: var(--st-open); }
.ticket-card.st-prog { border-left-color: var(--st-prog); }
.ticket-card.st-pend { border-left-color: var(--st-pend); }
.ticket-card.st-close { border-left-color: var(--st-close); opacity: 0.85; }

.ticket-header { padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid var(--border); }
.ticket-object { font-size: 16px; font-weight: 800; color: #1a202c; margin-bottom: 5px; }
.ticket-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }

.type-badge { padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 0.5px; }
.type-bg { background: #805ad5; } .type-cross { background: #dd6b20; } .type-custom { background: #38b2ac; } .type-note { background: #718096; }

/* --- ПОДСВЕТКА ВЫСОКОГО ПРИОРИТЕТА --- */
.ticket-card.high-priority-card {
    background-color: #fff5f5; /* Очень легкий красный фон карточки */
    border-color: #fc8181;     /* Красная рамка */
}
.ticket-card.high-priority-card .ticket-header {
    background-color: #fff5f5; 
    border-bottom: 1px solid #fed7d7;
}
.ticket-card.high-priority-card .ticket-footer {
    background-color: #fff5f5;
    border-top: 1px solid #fed7d7;
}
.ticket-card.high-priority-card .ticket-sidebar {
    background-color: white;   /* Карту оставляем белой, чтобы выделялась */
    border-color: #fed7d7;
}

/* --- ПОДСВЕТКА ЗАКРЫТОГО ТИКЕТА --- */
.ticket-card.closed-card {
    background-color: #f0fff4; /* Бледно-зеленый фон (как у статуса) */
    border-color: #9ae6b4;     /* Зеленая рамка */
}
.ticket-card.closed-card .ticket-header {
    background-color: #f0fff4; 
    border-bottom: 1px solid #c6f6d5;
}
.ticket-card.closed-card .ticket-footer {
    background-color: #f0fff4;
    border-top: 1px solid #c6f6d5;
}
.ticket-card.closed-card .ticket-sidebar {
    background-color: white; /* Карту оставляем белой */
    border-color: #c6f6d5;
}

/* Бейджик приоритета для закрытых */
.pr-closed { 
    background: #f0fff4; 
    color: #38a169; 
    border-color: #9ae6b4; 
}


/* === ДВЕ КОЛОНКИ: ИСТОРИЯ И КАРТА === */
.ticket-body { 
    padding: 20px; 
    display: flex; 
    gap: 25px; /* УМЕНЬШИЛИ ДЫРУ: Подвинули карту ближе к истории */
    flex-wrap: wrap; 
    align-items: flex-start; 
}

.ticket-main { 
    flex: 2 1 450px; /* ГИБКОСТЬ: История занимает ~65% ширины */
    min-width: 280px; 
    display: flex; 
    flex-direction: column; 
}

.ticket-sidebar { 
    flex: 1 1 300px; /* ГИБКОСТЬ: Карта занимает ~35% и заполняет дыру справа */
    background: #f8fafc; 
    padding: 20px; 
    border-radius: 10px; 
    border: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    height: fit-content; 
}

/* Таймлайн */
.ticket-timeline { border-left: 2px solid #e2e8f0; margin-left: 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 20px; }
.timeline-item { position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -28px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e0; border: 2px solid white; box-shadow: 0 0 0 2px #cbd5e0; }

.tl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-time { font-weight: 700; color: #4a5568; font-size: 12px; }
.tl-author { font-size: 11px; background: #edf2f7; padding: 2px 6px; border-radius: 4px; color: #4a5568; }
.tl-status { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 12px; border: 1px solid; text-transform: uppercase; }

.tl-status.open { background: var(--st-open-bg); color: var(--st-open); border-color: #feb2b2; }
.tl-status.prog { background: var(--st-prog-bg); color: var(--st-prog); border-color: #90cdf4; }
.tl-status.pend { background: var(--st-pend-bg); color: var(--st-pend); border-color: #fbd38d; }
.tl-status.close { background: var(--st-close-bg); color: var(--st-close); border-color: #9ae6b4; }
.tl-comment { font-size: 14px; color: #2d3748; line-height: 1.5; }

.btn-edit-icon { background: none; border: none; padding: 2px 5px; cursor: pointer; font-size: 14px; transition: 0.2s; color: var(--text-muted); opacity: 0.7; }
.btn-edit-icon:hover { transform: scale(1.1); color: var(--blue); opacity: 1; }

/* === ГАЛЕРЕЯ МИНИАТЮР (ФОТО И КАРТЫ) === */
.sidebar-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
.sidebar-value { font-size: 14px; font-weight: 700; color: #1a202c; margin-bottom: 15px; line-height: 1.3; }

.tl-media-gallery { margin-top: 12px; }
.media-thumb-wrap { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; transition: 0.2s; background: #edf2f7; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.media-thumb-wrap:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.12); border-color: var(--blue); }

/* РАЗМЕРЫ ФОТО И КАРТЫ */
.map-thumb { width: 100%; height: 220px; } /* Карта теперь широкая, на всю колонку */
.photo-thumb { width: 280px; height: 180px; } /* Фото чуть увеличил, но оставил аккуратным */

.media-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-wrap iframe { width: 100%; height: 100%; pointer-events: none; border: none; display: block; } 
.media-thumb-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.65); color: white; font-size: 11px; padding: 6px; text-align: center; font-weight: bold; backdrop-filter: blur(2px); }

/* === МОДАЛКА ПРОСМОТРА === */
.media-modal { padding: 0; border: none; border-radius: 12px; background: transparent; width: 95vw; max-width: 1200px; max-height: 90vh; overflow: visible; }
.media-modal::backdrop { background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
#mediaContent { width: 100%; height: 85vh; display: flex; justify-content: center; align-items: center; background: white; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
#mediaContent img { max-width: 100%; max-height: 100%; object-fit: contain; }
#mediaContent iframe { width: 100%; height: 100%; border: none; }
.btn-close-media { position: absolute; top: -45px; right: 0; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 14px; cursor: pointer; font-weight: bold; padding: 8px 16px; border-radius: 8px; transition: 0.2s; }
.btn-close-media:hover { background: var(--red); }

.cam-link { display: inline-flex; align-items: center; font-size: 12px; color: var(--blue); text-decoration: none; font-weight: 700; background: #ebf8ff; padding: 4px 10px; border-radius: 6px; width: fit-content; margin-top: 5px;}
.cam-link:hover { background: #bee3f8; }

.ticket-footer { padding: 14px 20px; background: #f8fafc; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }

dialog { border: none; border-radius: 12px; box-shadow: 0 20px 30px rgba(0,0,0,0.15); padding: 25px; width: 90%; max-width: 420px; }
dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }

[contenteditable="true"] { outline: none; padding: 2px 4px; margin-left: -4px; border-radius: 4px; transition: 0.2s; }
[contenteditable="true"]:focus { background: #fff; border-bottom: 1px solid var(--blue); box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.1); }

/* Прячем стрелочку сворачивания тикетов на ПК */
.mobile-create-icon { display: none; }

/* Мобильная адаптация */
@media (max-width: 900px) {
    .container { flex-direction: column; } 
    .form-panel { width: 100%; position: static; max-height: none; overflow-y: visible; }
    .filter-group { width: 100%; justify-content: center; } .date-range-group { flex-wrap: nowrap; }
    .ticket-sidebar { width: 100%; } 
    .photo-thumb { width: 100%; height: 200px; }
}

/* === АДМИН ПАНЕЛЬ (ОБЩИЕ КЛАССЫ) === */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; background: white; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.admin-table th { background: #f8fafc; color: #4a5568; padding: 12px; font-weight: 700; text-transform: uppercase; font-size: 11px; border-bottom: 2px solid var(--border); text-align: left; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid #edf2f7; vertical-align: middle; }
.admin-table tr:hover { background: #f8fafc; }
.btn-sm-del { background: transparent; color: var(--red); border: 1px solid #feb2b2; padding: 4px 8px; font-size: 11px; border-radius: 4px; font-weight: bold; cursor: pointer; }
.btn-sm-del:hover { background: var(--red); color: white; }

/* === ПРИОРИТЕТЫ И ЧЕКБОКСЫ === */
.priority-badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; border: 1px solid; margin-left: 10px; }
.pr-high { background: var(--st-open-bg); color: var(--st-open); border-color: #feb2b2; }
.pr-normal { background: var(--st-pend-bg); color: var(--st-pend); border-color: #fbd38d; }
.pr-low { background: #edf2f7; color: #4a5568; border-color: #cbd5e0; }

.perm-cb-label { display: flex; align-items: center; gap: 8px; text-transform:none; font-size:13px; color:#1a202c; cursor:pointer; font-weight: 600; }
.perm-cb-label input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* === БЛОКИРОВКА ПОЛЕЙ ДЛЯ НЕ АДМИНОВ === */
input[readonly], textarea[readonly], input:disabled, select:disabled {
    background-color: #edf2f7 !important;
    color: #718096 !important;
    border-color: transparent !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Кнопка удаления этапа в модалке */
.btn-delete-event {
    background: transparent;
    border: 1px solid #fed7d7;
    color: var(--red);
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-delete-event:hover { background: #fff5f5; }

/* === НОВЫЙ ДИЗАЙН АДМИН ПАНЕЛИ (СЕТКА И ВКЛАДКИ) === */
.admin-wrapper { display: flex; max-width: 1400px; margin: 20px auto; gap: 30px; align-items: flex-start; }
.admin-sidebar { width: 260px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border); padding: 20px; position: sticky; top: 20px; }
.admin-logo { font-size: 18px; font-weight: 800; color: var(--blue); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
.admin-menu { list-style: none; padding: 0; margin: 0 0 25px 0; display: flex; flex-direction: column; gap: 8px; }
.admin-menu li { padding: 12px 15px; background: #f8fafc; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; color: #4a5568; border: 1px solid transparent; }
.admin-menu li:hover { background: #edf2f7; }
.admin-menu li.active { background: var(--blue); color: white; border-color: var(--blue-hover); box-shadow: 0 4px 10px rgba(49, 130, 206, 0.2); }
.admin-content { flex-grow: 1; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border); padding: 30px; min-width: 0; }
.admin-section { display: none; }
.admin-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.admin-header-title { font-size: 22px; margin: 0 0 25px 0; color: #1a202c; border-bottom: 2px solid var(--border); padding-bottom: 15px; }

/* Таблицы прав доступа к категориям в админке */
.cat-perm-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.cat-perm-table th { font-size: 11px; color: #718096; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--border); text-align: left; }
.cat-perm-table td { padding: 8px 0; border-bottom: 1px dotted #e2e8f0; }


/* === ПАНЕЛЬ ФИЛЬТРОВ (БАЗОВЫЕ И ПК СТИЛИ) === */
.mobile-filter-toggle { display: none; }
.filters-content { display: flex; flex-direction: column; gap: 15px; }

.dates-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.period-group { display: flex; gap: 10px; align-items: center; border: none; background: transparent; padding: 0; }
.period-buttons-wrap { display: flex; gap: 5px; align-items: center; }

.date-range-group { display: flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 0; margin-left: auto; }
.date-inputs-wrap { display: flex; align-items: center; gap: 10px; }
.date-label-mobile { display: none; } /* Скрыто на ПК */

.selects-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; }
.select-box { background: transparent; border: none; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.select-box select { width: 100%; padding: 8px; font-weight: 600; cursor: pointer; }

/* === МОБИЛЬНАЯ АДАПТАЦИЯ (СЕТКА 2x2 ДЛЯ ФИЛЬТРОВ) === */
@media (max-width: 900px) {
    .mobile-filter-toggle {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 13px; font-weight: 800; color: #4a5568; cursor: pointer;
        padding: 5px 0; text-transform: uppercase;
    }
    
    .filters-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
    .filters-content.open { display: flex; animation: fadeIn 0.3s ease; }

    .dates-row { flex-direction: column; gap: 15px; }
    .period-group { flex-direction: column; align-items: stretch; width: 100%; }
    .period-buttons-wrap { width: 100%; gap: 8px; }
    .period-buttons-wrap .filter-btn { flex: 1; padding: 12px; font-size: 13px; text-align: center; }

    .date-range-group { flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; }
    .date-label-mobile { display: block; margin-bottom: 5px; text-align: center; }
    .date-inputs-wrap { justify-content: space-between; width: 100%; gap: 10px; }
    .date-inputs-wrap input { width: 48%; padding: 10px; text-align: center; font-size: 13px; }
    .date-separator { display: none; }

    /* 🔥 ВОТ ОНА: СЕТКА 2x2 ДЛЯ СЕЛЕКТОВ */
    .selects-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .select-box { align-items: stretch; }
    .select-box .filter-label { text-align: center; margin-bottom: 5px; font-size: 10px; }
    
    /* Уменьшаем шрифты внутри выпадающих списков, чтобы всё влезло ровно */
    .select-box select { padding: 10px 4px; font-size: 12px; text-align: center; }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (ФИКС НАЕЗЖАНИЯ И СКРОЛЛА)
   ========================================= */

/* 1. Запрещаем длинному тексту растягивать экран, заставляем переноситься */
.ticket-object {
    word-break: break-word;
}

/* 2. Разрешаем бейджикам и кнопкам переноситься на новую строку, если не влезают */
.ticket-meta {
    flex-wrap: wrap;
    gap: 8px;
}

/* 3. Заставляем внутренний блок с приоритетом и датой тоже переноситься */
.ticket-meta > div {
    flex-wrap: wrap;
    gap: 5px;
}

/* 4. Убираем старый жесткий отступ у приоритета, чтобы он не улетал вправо при переносе */
.priority-badge {
    margin-left: 0 !important;
}

/* 5. Точечные правки для мобильных экранов */
@media (max-width: 900px) {
    /* Полностью отрубаем горизонтальный скролл на странице */
    body {
        overflow-x: hidden;
        padding: 10px; /* Делаем поля по краям чуть меньше */
    }
    
    .container {
        width: 100%;
        box-sizing: border-box;
    }

    /* Чуть уменьшаем отступы внутри самой карточки, чтобы дать больше места тексту */
    .ticket-header, 
    .ticket-body, 
    .ticket-footer {
        padding: 12px 15px; 
    }

    /* Исправляем баг Flexbox, из-за которого история вылезала за края экрана */
    .ticket-main {
        min-width: 0 !important; 
        width: 100%;
    }

    /* 6. Принудительно вписываем ВСЕ модалки в экран */
    dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        box-sizing: border-box;
        margin: auto;
    }

    /* 7. Чтобы текст в истории приоритетов не слипался, ставим его в столбик */
    #priorityHistoryList > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px;
    }
}

/* =========================================
   СВОРАЧИВАНИЕ ФОРМЫ СОЗДАНИЯ НА МОБИЛКАХ
   ========================================= */

/* 1. Прячем стрелочку "вниз" на компьютерах (там форма всегда открыта) */
.mobile-create-icon { 
    display: none; 
}

/* 2. Включаем мобильные стили только для экранов меньше 900px (телефоны) */
@media (max-width: 900px) {
    
    /* Показываем стрелочку */
    .mobile-create-icon { 
        display: inline-block; 
        font-size: 12px; 
        color: var(--text-muted); 
    }
    
    /* Прячем содержимое формы по умолчанию */
    .create-content-mobile { 
        display: none; 
        border-top: 1px solid var(--border); 
        padding-top: 15px; 
    }
    
    /* Показываем содержимое формы, когда скрипт добавит класс .open */
    .create-content-mobile.open { 
        display: block; 
        animation: fadeIn 0.3s ease; 
    }
    
    /* Слегка корректируем заголовок для красоты на телефоне */
    .create-panel-title { 
        padding: 5px 0; 
        color: #4a5568 !important; 
    }
}

/* =========================================
   КРАСИВАЯ ШАПКА "СОЗДАТЬ ТИКЕТ"
   ========================================= */
.create-panel-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    gap: 10px;
}
.create-panel-title {
    margin: 0; 
    font-size: 16px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
    /* Убрали запрет переноса текста, чтобы на ПК всё помещалось как раньше */
}
.create-panel-actions {
    display: flex; 
    gap: 5px;
}
.btn-icon-mobile {
    padding: 4px 8px; 
    font-size: 14px;
    white-space: nowrap; /* Защищаем текст внутри самих кнопок от сплющивания */
}

/* Мобильная версия шапки (экран < 900px) */
@media (max-width: 900px) {
    .create-panel-header {
        flex-wrap: nowrap; 
        border-bottom: 1px solid var(--border); 
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .create-panel-title {
        font-size: 13px; 
        font-weight: 800;
        color: #4a5568 !important;
        text-transform: uppercase;
        flex-grow: 1; 
        justify-content: space-between; 
        padding-right: 15px;
        border-right: 1px solid var(--border); 
        margin-right: 10px;
        white-space: nowrap; /* На мобилках строго в одну строку */
    }
    .desktop-text {
        display: none; /* Прячем текст на мобилках */
    }
    .btn-icon-mobile {
        padding: 6px 10px; 
    }
}

/* =========================================
   ВЫПАДАЮЩЕЕ МЕНЮ СПРАВОЧНИКОВ
   ========================================= */
.tools-dropdown-wrapper { position: relative; display: inline-block; }
.tools-dropdown-content {
    display: none; 
    position: absolute; 
    right: 0; 
    top: 100%; 
    margin-top: 8px;
    background-color: #fff; 
    min-width: 220px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px; 
    border: 1px solid var(--border); 
    z-index: 1000;
    overflow: hidden;
}
.tools-dropdown-content.show { display: flex; flex-direction: column; animation: fadeIn 0.2s ease; }
.tool-link {
    color: #4a5568; 
    padding: 12px 15px; 
    text-decoration: none; 
    display: block;
    font-size: 13px; 
    font-weight: 600; 
    border-bottom: 1px solid #edf2f7;
    transition: 0.2s;
}
.tool-link:last-child { border-bottom: none; }
.tool-link:hover { background-color: #f8fafc; color: var(--blue); padding-left: 20px; }