/* 
  Кастомные стили для компактного отображения админки Wagtail 
*/

/* Максимально ужимаем поля и убираем огромные отступы */
.w-field__wrapper,
.w-field {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

/* Если контейнер использует CSS Grid или Flexbox с gap */
.w-panel__content {
    gap: 0.5rem !important;
}

/* Уменьшаем внутренние отступы панелей */
.w-panel {
    margin-bottom: 0.5rem !important;
}

/* Делаем заголовки полей компактнее */
.w-field__label {
    padding-bottom: 0.2rem !important;
    font-size: 0.9rem !important;
}

/* Делаем инпуты более плоскими */
.w-field__input input[type="text"],
.w-field__input input[type="number"],
.w-field__input select,
.w-field__input textarea {
    padding: 0.4rem 0.6rem !important;
    min-height: 2.2rem !important;
}

/* Убираем лишние отступы у вспомогательного текста */
.w-field__help {
    margin-top: 0.1rem !important;
    margin-bottom: 0.2rem !important;
    font-size: 0.8rem !important;
}

/* Ограничиваем ширину для лучшей читаемости на UltraWide мониторах */
.w-field__wrapper {
    max-width: 1000px;
}

/* Заголовок страницы в админке (В Wagtail 6 это поле ввода #id_title) - корпоративный синий цвет */
h1,
.w-header h1,
.w-header__title,
.w-page-header__title,
body#wagtail h1.w-header__title,
.w-header[data-edit-form-header] h1,
.w-header input,
.w-header textarea,
#id_title {
    color: var(--w-color-primary) !important;
    -webkit-text-fill-color: var(--w-color-primary) !important;
    font-weight: 700 !important;
}

/* === КАРДИНАЛЬНОЕ РЕШЕНИЕ: ПЕРЕНОС ФУТЕРА НАВЕРХ === */
/* Wagtail рендерит футер через React, поэтому мы перемещаем его визуально через CSS Fixed Positioning */
/* Скрываем назойливую панель автосохранения, так как футер теперь наверху */
.footer__container--hidden {
    display: none !important;
}

/* Принудительно задаем размер кнопки Сохранить для компактности */
footer.footer nav.actions {
    display: flex;
    align-items: center;
}

/* Разворачиваем выпадающее меню ВНИЗ только для футера */
/* Полностью перехватываем управление позицией у Tippy.js */
.footer.w-grid .w-dropdown,
footer.w-footer .w-dropdown {
    position: relative !important;
}
.footer.w-grid [data-tippy-root],
footer.w-footer [data-tippy-root] {
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    position: absolute !important;
    margin-top: 5px !important;
    width: max-content !important;
    min-width: 240px !important;
}
.footer.w-grid [data-tippy-root] .button,
footer.w-footer [data-tippy-root] .button {
    white-space: nowrap !important;
    justify-content: flex-start !important;
}
.footer.w-grid .tippy-box[data-placement^="top"],
footer.w-footer .tippy-box[data-placement^="top"] {
    margin-top: 0 !important;
}
.footer.w-grid .w-dropdown__toggle-icon.icon-arrow-up,
footer.w-footer .w-dropdown__toggle-icon.icon-arrow-up {
    transform: rotate(180deg) !important;
}

/* Разрешаем выпадающему меню "вываливаться" из хедера (иначе оно обрезается) */
.w-slim-header [class*="w-overflow-hidden"],
.w-slim-header [class*="w-overflow-x-auto"] {
    overflow: visible !important;
}

/* --- БРЕНДИРОВАНИЕ WAGTAIL --- */
:root {
    /* Основные цвета (кнопки, ссылки) */
    --w-color-primary: #003d5c;
    --w-color-primary-200: #002d45;
    
    /* Дополнительные акценты: убираем ядовито-фиолетовый, возвращаем цвет действий Wagtail или делаем синим */
    --w-color-secondary: #003d5c;
    
    /* Цвета левого меню (сайдбара) - оставляем базовый темный цвет для надежности */
    --w-color-surface-menu: #003d5c;
    --w-color-surface-menus: #003d5c;
    --w-color-surface-nav: #003d5c;
    
    /* Активный пункт меню */
    --w-color-surface-menu-item-active: rgba(0, 45, 69, 0.7);
}

/* Переливающийся градиент для ВСЕЙ левой панели */
.sidebar,
.w-sidebar {
    background: linear-gradient(135deg, #111827 0%, #003d5c 50%, #111827 100%) !important;
    background-size: 200% 200% !important;
    animation: sidebarGradientShift 10s ease infinite !important;
}

/* Делаем внутренние блоки прозрачными, чтобы градиент был виден сквозь них */
.sidebar__inner,
.sidebar-main-menu,
.sidebar-footer,
.sidebar-header,
.sidebar-wrapper,
.w-bg-surface-menus,
.w-bg-surface-menu,
.sidebar-footer__account {
    background-color: transparent !important;
    background-image: none !important;
}

/* Возвращаем подсветку при наведении */
.sidebar-menu-item__link:hover,
.sidebar-footer__account:hover,
button.sidebar-footer__account:hover,
button.w-bg-surface-menus:hover,
.sidebar__collapse-toggle:hover {
    background-color: var(--w-color-surface-menu-item-active) !important;
}

@keyframes sidebarGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Стилизация логотипа Сириуса в левом меню */
#custom-admin-logo {
    width: 100% !important;
    max-width: 50px !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Эффект увеличения и свечения при наведении на звезду */
#custom-admin-logo:hover {
    transform: scale(1.2) !important;
    /* Обязательно дублируем brightness(0) invert(1) чтобы логотип не становился синим! */
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important;
}

/* ── Бейдж типа страницы в списке страниц ── */
.page-type-badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: #e8f0fe !important;
    color: #1a73e8 !important;
    margin-right: 6px !important;
    white-space: nowrap !important;
    font-family: system-ui, sans-serif !important;
    letter-spacing: 0.01em !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Также в хедере страницы редактирования (рядом с заголовком) */
.w-header .page-header-type-badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: #e8f0fe !important;
    color: #1a73e8 !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    font-family: system-ui, sans-serif !important;
}