/* Мобильная адаптация SidePanel (слайдера задачи)
   Подключается через init.php, не трогает /bitrix/ файлы */

@media (max-width: 768px) {

    /* --- Заголовок --- */
    .ui-sidepanel-layout-header {
        min-height: 56px !important;
        max-height: 64px !important;
        padding: 0 12px !important;
    }

    .ui-sidepanel-layout-title {
        font-size: 17px !important;
        line-height: 22px !important;
        height: auto !important;
        padding: 12px 0 12px 4px !important;
        white-space: normal !important;          /* разрешаем перенос длинных заголовков */
    }

    /* --- Боковое меню (если присутствует) --- */
    .ui-sidepanel-menu,
    .ui-sidepanel-submenu {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Ссылки меню — увеличиваем тап-зону */
    .ui-sidepanel-menu-link,
    .ui-sidepanel-submenu-link {
        height: 44px !important;           /* Apple HIG: минимум 44px */
        font-size: 16px !important;
        padding: 0 12px 0 20px !important;
        touch-action: manipulation;
    }

    /* --- Контент --- */
    .ui-sidepanel-layout-content-margin {
        padding: 12px !important;
    }

    /* --- Footer с кнопками --- */
    .ui-sidepanel-layout-footer {
        /* На мобильных учитываем safe-area (iPhone с notch/home bar) */
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    .ui-sidepanel-layout-buttons {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Кнопки на всю ширину на маленьких экранах */
    .ui-sidepanel-layout-buttons .ui-btn {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
    }
}

/* Совсем маленькие экраны (телефоны в portrait) */
@media (max-width: 480px) {

    .ui-sidepanel-layout-title {
        font-size: 15px !important;
    }

    .ui-sidepanel-layout-content-margin {
        padding: 8px !important;
    }

    .ui-sidepanel-layout-buttons {
        padding: 8px !important;
    }
}

/* Убираем hover-эффекты на touch-устройствах (они "залипают" после тапа) */
@media (pointer: coarse) {

    .ui-sidepanel-menu-link:hover,
    .ui-sidepanel-submenu-link:hover {
        background-color: transparent !important;
    }

    /* Заменяем hover на :active — реагирует только на реальный тап */
    .ui-sidepanel-menu-link:active,
    .ui-sidepanel-submenu-link:active {
        background-color: #e3e8eb !important;
    }

    /* Отключаем transition на hover-анимациях меню — они не нужны на touch */
    .ui-sidepanel-toggle-btn {
        transition: none !important;
    }

    .ui-sidepanel-menu-action-icon {
        max-width: 100% !important;      /* иконки действий всегда видны, не только при hover */
        opacity: 0.5 !important;
    }
}