/* ================= ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (до 600px) ================= */
@media (max-width: 600px) {
    /* 1. Шапка: сжимаем всё */
    .header { padding: 10px 0; gap: 4px; }
    .logo { font-size: 15px; padding: 4px 8px; }
    .header-right { gap: 4px; }
    .icon-btn { width: 32px; height: 32px; font-size: 14px; }
    .city { padding: 4px 8px; font-size: 11px; }

    /* 2. Поиск: уменьшаем высоту и кнопку */
    .search-bar { height: 44px; padding: 3px 3px 3px 10px; gap: 8px; }
    .search-bar input { font-size: 14px; }
    .btn-search { height: 34px; padding: 0 12px; font-size: 12px; }
    
    /* Исправляем сплющенную иконку в поиске */
    .am-logo { 
        width: 26px; 
        height: 26px; 
        min-width: 26px; /* Запрещаем сжиматься */
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    .am-logo svg { width: 12px; height: 12px; }

    /* 3. Заголовки */
    .hero h1 { font-size: 18px; }
    .hero p { font-size: 12px; }
    .tabs { gap: 0; }
    .tab { padding: 8px 4px; font-size: 12px; }

    /* 4. Модальные окна (все, включая каталог и ЛК) */
    .modal {
        width: 92% !important; /* Отступы по бокам */
        max-width: 92% !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 16px !important; /* Круглые углы со всех сторон */
        max-height: 85vh !important;
    }
    
    #modal-catalog { max-width: 92% !important; }
    #modal-catalog .modal-body { padding: 16px !important; }
    .catalog-grid-dark { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .catalog-card-dark { padding: 16px 8px !important; }
}

/* ================= ВЕРТИКАЛЬНОЕ МЕНЮ ЛК НА МОБИЛЬНЫХ ================= */
@media (max-width: 600px) {
    /* Делаем контейнер вкладок колонкой */
    #profile-tabs-menu {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 16px !important;
        border-bottom: none !important;
        background: #0f172a;
    }

    /* Стилизуем кнопки вкладок */
    #profile-tabs-menu .dark-tab {
        width: 100%;
        text-align: left;
        padding: 14px 16px !important;
        border-bottom: none !important; /* Убираем нижнее подчеркивание */
        border-left: 4px solid transparent; /* Добавляем полоску слева */
        border-radius: 8px;
        background: transparent;
        color: #94a3b8;
        font-size: 15px;
    }

    /* Активная вкладка */
    #profile-tabs-menu .dark-tab.active {
        border-left-color: #2563eb !important;
        background: #1e293b;
        color: #fff;
        font-weight: 600;
    }

    /* Убираем горизонтальную линию под меню */
    #profile-screen > div:nth-child(2) {
        border-bottom: 1px solid #1e293b;
        padding-bottom: 8px;
    }
}

/* ================= УМЕНЬШАЕМ ТЕКСТ В МЕНЮ ЛК ================= */
@media (max-width: 600px) {
    #profile-tabs-menu .dark-tab {
        font-size: 13px !important; /* Было 15px */
        padding: 12px 14px !important; /* Чуть меньше отступы */
    }
}

/* ================= УМЕНЬШАЕМ ШРИФТ И ОТСТУПЫ В ЛК НА МОБИЛЬНЫХ ================= */
@media (max-width: 600px) {
    /* 1. Уменьшаем шрифт заголовков и текста внутри ЛК */
    .dark-modal h2, 
    .dark-modal h3 {
        font-size: 16px !important;
    }
    
    .dark-modal p, 
    .dark-modal span, 
    .dark-modal label,
    .dark-modal div {
        font-size: 13px !important;
    }

    /* 2. Уменьшаем отступы в шапке ЛК (аватар, имя, кнопки) */
    .dark-modal .modal-body > div:first-child {
        padding: 16px !important;
        gap: 12px !important;
    }
    
    .dark-modal .modal-body > div:first-child div[style*="width:48px"] {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* 3. Уменьшаем отступы в контенте (Модули, настройки) */
    .dark-modal #tab-content {
        padding: 16px !important;
    }
    
    .dark-modal .lk-card, 
    .dark-modal div[style*="background: #1e293b"] {
        padding: 12px !important;
    }

    /* 4. Уменьшаем кнопки "Сохранить" и "Обновить Docs" */
    .dark-modal button[style*="background: #2563eb"] {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* 5. Уменьшаем чекбоксы и подписи к ним */
    .dark-modal input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }
    
    .dark-modal label span {
        font-size: 13px !important;
    }
}