/*
 * СКУД Mobile-friendly sidecar — 2026-04-17 (v2)
 *
 * Исправления в v2 после тестов на реальном Android-устройстве:
 *   - Header: явный flex-layout, чтобы bell/аватар/юзернейм не уходили в столбик
 *   - Гамбургер: цвет inherit, а не белый → видно на светлом хедере
 *   - z-index: header ниже модалки, FAB ниже модалки, sider выше оверлея
 *   - Page-headers: flex-wrap, чтобы заголовок не сжимался вертикально
 *   - Модалка: выше sticky-header, FAB скрыт при открытой модалке
 *   - Доп. padding снизу контента, чтобы FAB не прятал действия таблицы
 */

/* =========================================================================
 * 1) ТАБЛЕТКА И ТЕЛЕФОН  (<=768px)
 * ========================================================================= */
@media (max-width: 768px) {

    /* --- Layout: Sider превращаем в выезжающую панель --- */
    .ant-layout-sider {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform .25s ease-out;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
    }
    body.skud-sider-open .ant-layout-sider {
        transform: translateX(0);
    }
    body.skud-sider-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1090;
    }

    /* Контент без Sider gap */
    .ant-layout-has-sider > .ant-layout,
    .ant-layout-has-sider .ant-layout-content,
    .ant-layout .ant-layout-content {
        margin-left: 0 !important;
        padding: 12px !important;
        padding-bottom: 88px !important; /* место под FAB */
    }

    /* --- Header: принудительный flex-layout --- */
    .ant-layout-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 52px !important;
        line-height: 1 !important;
        padding: 0 8px !important;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 800;            /* ниже модалок (они 1000+) */
        overflow: hidden;
    }
    /* Дети header: не ломаться, ужиматься если надо */
    .ant-layout-header > * {
        flex: 0 1 auto;
        min-width: 0;
    }
    /* Правая группа (обычно с колокольчиком/аватаром) прижимаем вправо */
    .ant-layout-header > :last-child {
        margin-left: auto;
    }
    /* Узкое имя пользователя прячем на xs (оставляем аватар) */
    .ant-layout-header .ant-typography,
    .ant-layout-header .ant-dropdown-trigger > span:not(.ant-avatar):not(.anticon) {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- Hamburger (инжектится через JS) --- */
    .skud-mobile-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #262626;             /* тёмный для светлого header */
        cursor: pointer;
        padding: 0;
        margin: 0 4px 0 0;
        border-radius: 6px;
        flex: 0 0 auto;
        transition: background .15s;
    }
    .skud-mobile-hamburger:hover,
    .skud-mobile-hamburger:focus {
        background: rgba(0, 0, 0, 0.06);
        outline: none;
    }
    .skud-mobile-hamburger svg {
        width: 24px;
        height: 24px;
    }
    /* Если в header есть текст белого цвета (тёмная тема) — подстроимся */
    .ant-layout-header[style*="rgb(0"] .skud-mobile-hamburger,
    .ant-layout-header[style*="#0"] .skud-mobile-hamburger {
        color: #fff;
    }

    /* Скрываем текст-подпись логотипа в header-бейдже, оставляем только лого */
    [data-skud-logo-badge="1"] span {
        display: none !important;
    }
    [data-skud-logo-badge="1"] img {
        width: 32px !important;
        height: 32px !important;
    }

    /* --- Page headers (заголовок + кнопки) — всегда wrap --- */
    .ant-space,
    .ant-row,
    [class*="PageHeader"],
    [class*="page-header"] {
        flex-wrap: wrap !important;
    }
    /* Заголовки h1..h3 не сжимаются */
    h1, h2, h3,
    .ant-typography h1,
    .ant-typography h2,
    .ant-typography h3 {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        word-break: normal;
    }
    /* Группа кнопок рядом с заголовком — на новую строку, с gap */
    .ant-space-horizontal {
        gap: 6px !important;
        row-gap: 6px !important;
    }

    /* --- Таблицы: горизонтальный скролл --- */
    .ant-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ant-table {
        font-size: 13px !important;
    }
    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
        padding: 8px !important;
        white-space: nowrap;
    }
    .ant-table-pagination.ant-pagination {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center !important;
    }

    /* --- Формы: всегда одна колонка на мобилке --- */
    .ant-form-horizontal .ant-form-item-label,
    .ant-form-horizontal .ant-form-item-control {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: left !important;
    }
    .ant-form-item {
        margin-bottom: 14px !important;
    }
    .ant-input,
    .ant-input-number,
    .ant-select,
    .ant-picker,
    .ant-cascader-picker {
        width: 100% !important;
    }
    .ant-input-lg,
    .ant-input,
    .ant-select-selector,
    .ant-picker {
        min-height: 40px !important;
    }

    /* --- Кнопки: touch-friendly --- */
    .ant-btn {
        min-height: 40px !important;
        padding: 4px 14px !important;
    }
    .ant-btn-sm {
        min-height: 32px !important;
    }

    /* --- Модалка: поверх header, full-screen --- */
    .ant-modal-root,
    .ant-modal-mask,
    .ant-modal-wrap {
        z-index: 2000 !important;
    }
    .ant-modal {
        max-width: 100vw !important;
        margin: 0 !important;
        top: 0 !important;
        padding-bottom: 0 !important;
    }
    .ant-modal-content {
        min-height: 100vh;
        border-radius: 0 !important;
    }
    .ant-modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-bottom: 24px !important;
    }
    /* Футер модалки прикрепляем внизу */
    .ant-modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-top: 0 !important;
        padding: 10px 16px !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        z-index: 2;
    }

    /* --- FAB / Float button: не должны перекрывать модалку --- */
    .ant-float-btn,
    .ant-float-btn-group {
        z-index: 900 !important;
    }
    /* Прячем FAB, когда открыта модалка (Chrome 105+) */
    body:has(.ant-modal-mask) .ant-float-btn,
    body:has(.ant-modal-mask) .ant-float-btn-group {
        display: none !important;
    }
    /* Резервно для старых Safari — класс добавим через JS */
    body.skud-modal-open .ant-float-btn,
    body.skud-modal-open .ant-float-btn-group {
        display: none !important;
    }
    /* Сам FAB — чуть меньше и ниже, чтобы пальцем комфортно достать */
    .ant-float-btn {
        width: 48px !important;
        height: 48px !important;
    }

    /* --- Drawer AntD --- */
    .ant-drawer-right .ant-drawer-content-wrapper,
    .ant-drawer-left .ant-drawer-content-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* --- Карточки --- */
    .ant-card-body {
        padding: 14px !important;
    }
    .ant-card-head {
        padding: 0 14px !important;
        min-height: 44px !important;
    }
    .ant-card-head-title {
        padding: 10px 0 !important;
    }

    /* --- Логин: уменьшаем логотип --- */
    [data-skud-logo-wrapper="1"] img {
        width: 120px !important;
        height: 120px !important;
    }

    /* --- Tabs: горизонтальный скролл --- */
    .ant-tabs-nav {
        overflow-x: auto;
    }
    .ant-tabs-tab {
        padding: 10px 12px !important;
    }

    /* --- Menu внутри Sider: touch-friendly --- */
    .ant-menu-item,
    .ant-dropdown-menu-item {
        min-height: 40px !important;
        line-height: 40px !important;
    }

    /* --- Typography --- */
    h1.ant-typography,
    .ant-typography h1 { font-size: 22px !important; }
    h2.ant-typography,
    .ant-typography h2 { font-size: 19px !important; }
    h3.ant-typography,
    .ant-typography h3 { font-size: 17px !important; }

    /* Descriptions в одну колонку */
    .ant-descriptions-view table { display: block; }
    .ant-descriptions-row { display: block !important; }
    .ant-descriptions-item-label,
    .ant-descriptions-item-content {
        display: block !important;
        padding: 4px 12px !important;
    }
}

/* =========================================================================
 * 2) ТОЛЬКО ТЕЛЕФОН  (<=480px)
 * ========================================================================= */
@media (max-width: 480px) {
    .ant-layout-content {
        padding: 8px !important;
        padding-bottom: 88px !important;
    }
    .ant-card-body { padding: 10px !important; }
    .ant-modal-body { padding: 14px !important; }
    [data-skud-logo-wrapper="1"] img {
        width: 100px !important;
        height: 100px !important;
    }
    .ant-breadcrumb { display: none !important; }

    /* Длинные имена в хедере совсем прячем, оставляем аватар */
    .ant-layout-header .ant-typography,
    .ant-layout-header span[class*="user"],
    .ant-layout-header .ant-dropdown-trigger > span:not(.ant-avatar):not(.anticon) {
        display: none !important;
    }

    /* Заголовки страниц чуть меньше */
    h1.ant-typography,
    .ant-typography h1 { font-size: 20px !important; }
}

/* =========================================================================
 * 3) ДЕСКТОП  (>=769px): убираем гамбургер
 * ========================================================================= */
@media (min-width: 769px) {
    .skud-mobile-hamburger {
        display: none !important;
    }
}