/* ====================================================================== */
/* MOBILE-MAIN.CSS - ВСЕ МОБИЛЬНЫЕ СТИЛИ ИЗ MAIN.CSS                      */
/* Этот файл содержит ВСЕ медиа-запросы с max-width из main.css           */
/* ВНИМАНИЕ: Стили шапки и подвала перенесены в mobile-header-footer.css  */
/* ====================================================================== */

/* ==================== ВСЕ МОБИЛЬНЫЕ МЕДИА-ЗАПРОСЫ ==================== */

/* MOBILE FIX: Мобильные улучшения для тач-устройств */
@media (hover: none) and (pointer: coarse) {
    /* Стили для устройств без hover (мобильные) */
    button, 
    .btn, 
    a.btn, 
    .profile-btn, 
    .theme-toggle,
    .search-btn,
    .lk-action-btn,
    .lk-btn-notes,
    .lk-btn-remove,
    .scroll-btn,
    .period-toggle,
    .stock-switcher {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Увеличение тап-зоны для ссылок */
    .footer-section a,
    .user-dropdown-item,
    .lk-widget-link,
    .lk-btn-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Предотвращение авто-зума iOS при фокусе на полях ввода */
@media (max-width: 768px) {
    input, 
    textarea, 
    select {
        font-size: 16px !important;
    }
    
    /* MOBILE FIX: Адаптация для мобильных устройств */
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .search-large {
        flex-direction: column;
    }
    
    .search-btn {
        padding: 12px;
    }
    
    .company-header {
        flex-direction: column;
    }
    
    .company-actions {
        width: 100%;
        align-items: flex-start;
    }
    
    .update-info {
        text-align: left;
    }
    
    .tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 🔥 MOBILE FIX: Адаптация метрик для мобильных устройств */
    .metrics-grid {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
    
    .metric-card {
        max-width: none;
    }
    
    /* 🔥 MOBILE FIX: Сбрасываем центрирование на мобильных */
    .metrics-grid .metric-card:nth-last-child(1):nth-child(4n+1),
    .metrics-grid .metric-card:nth-last-child(2):nth-child(4n+1),
    .metrics-grid .metric-card:nth-last-child(1):nth-child(4n+2) {
        grid-column: auto;
    }
    
    /* ==================== ИСПРАВЛЕНИЕ: ВЫРАВНИВАНИЕ ВСЕХ МЕТРИК ПО ЦЕНТРУ ==================== */
    /* Все метрики (обычные и ключевые) выравниваем по центру на мобильных */
    .metric {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .metric .name,
    .metric .value {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .key-metric {
        text-align: center !important;
    }
    
    .key-metric .label,
    .key-metric .value {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* ==================== 🔥 ИСПРАВЛЕНИЕ: УБИРАЕМ ПСЕВДОЭЛЕМЕНТЫ ==================== */
    /* Полностью отключаем старые значки вопроса из CSS */
    .company-card .metric .name::after,
    .company-card .key-metric .label::after,
    .metric .name::after,
    .key-metric .label::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
    }
    
    /* ==================== 🔥 ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ КНОПКИ-ТРИГГЕРА ПОДСКАЗКИ ==================== */
    .metric-tooltip-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 50% !important;
        background: var(--sea-turquoise) !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: bold !important;
        line-height: 1 !important;
        border: none !important;
        cursor: pointer !important;
        margin: 2px auto 0 !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    .metric-tooltip-btn:hover,
    .metric-tooltip-btn:active {
        transform: scale(1.1) !important;
        background: var(--dark-blue) !important;
    }

    /* Для темной темы */
    :root[data-theme="dark"] .metric-tooltip-btn {
        background: var(--sea-turquoise) !important;
        color: var(--dark-blue) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
    }

    /* Увеличиваем для touch-устройств */
    @media (hover: none) and (pointer: coarse) {
        .metric-tooltip-btn {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            font-size: 0.8rem !important;
            margin: 4px auto 0 !important;
        }
    }
    
    /* ==================== ИСПРАВЛЕНИЕ: АДАПТАЦИЯ ТОП КАРТОЧЕК КОМПАНИЙ ==================== */
    /* Для очень маленьких экранов - перенос элементов */
    @media (max-width: 480px) {
        .top-company-card .company-head {
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .top-company-card .comp-left {
            flex: 1;
            min-width: 0;
        }
        
        .top-company-card .comp-ticker {
            font-size: 0.85rem;
            flex-wrap: wrap;
        }
        
        .top-company-card .price {
            width: 100%;
            text-align: center;
            margin-top: 8px;
            order: 3;
        }
    }
    
    /* Для средних мобильных - адаптивная ширина */
    .top-company-card {
        width: calc(100vw - 32px) !important;
        max-width: 340px !important;
        min-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* ==================== ИСПРАВЛЕНИЕ: КОМПАКТНЫЕ МЕТРИКИ ДЛЯ ВСЕХ КАРТОЧЕК ==================== */
    /* Родительский контейнер метрик - обеспечивает равную ширину всех колонок */
    .company-card .metrics,
    .top-company-card .metrics {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
        width: 100% !important;
        margin-bottom: 0px !important;
    }
    
    /* Убираем отступ у последнего блока метрик */
    .company-card .metrics:last-child,
    .top-company-card .metrics:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Каждая метрика - одинаковая высота и центрирование */
    .company-card .metric,
    .top-company-card .metric {
        padding: 8px 4px !important;
        min-height: 75px !important;
        height: 75px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Название метрики */
    .company-card .metric .name,
    .top-company-card .metric .name {
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Значение метрики */
    .company-card .metric .value,
    .top-company-card .metric .value {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        width: 100% !important;
    }
    
    /* Период расчета - компактный */
    .company-card .metric .period-note,
    .top-company-card .metric .period-note {
        font-size: 0.6rem !important;
        line-height: 1 !important;
        margin-top: 1px !important;
        opacity: 0.8;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Ключевые метрики (Доля и Лучшая цена) */
    .company-card .key-metrics,
    .top-company-card .key-metrics {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 4px !important;
        padding: 8px !important;
        width: 100% !important;
    }
    
    .company-card .key-metric,
    .top-company-card .key-metric {
        padding: 8px 4px !important;
        min-height: 48px !important;
        height: 48px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .company-card .key-metric .label,
    .top-company-card .key-metric .label {
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .company-card .key-metric .value,
    .top-company-card .key-metric .value {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        width: 100% !important;
    }
    
    /* Для очень маленьких экранов - дополнительные правки */
    @media (max-width: 480px) {
        .company-card .metric,
        .top-company-card .metric {
            min-height: 75px !important;
            height: 75px !important;
            padding: 6px 3px !important;
        }
        
        .company-card .metric .name,
        .top-company-card .metric .name {
            font-size: 10px !important;
        }
        
        .company-card .metric .value,
        .top-company-card .metric .value {
            font-size: 0.85rem !important;
        }
        
        .company-card .metric .period-note,
        .top-company-card .metric .period-note {
            font-size: 0.55rem !important;
        }
        
        .company-card .key-metric,
        .top-company-card .key-metric {
            min-height: 44px !important;
            height: 44px !important;
            padding: 6px 3px !important;
        }
        
        .company-card .key-metric .label,
        .top-company-card .key-metric .label {
            font-size: 10px !important;
        }
        
        .company-card .key-metric .value,
        .top-company-card .key-metric .value {
            font-size: 0.95rem !important;
        }
    }
    
    /* 🔥 НОВОЕ: Исправление высоты блоков метрик для устранения вертикальных пустот */
    .top-company-card .metrics,
    .company-card .metrics {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* MOBILE FIX: Отключаем hover эффекты на мобильных */
    .data-table tbody tr:hover {
        background-color: transparent;
    }
    
    .data-table tbody tr:hover td:first-child {
        background-color: transparent;
    }
    
    /* MOBILE FIX: Адаптация таблиц для мобильных */
    .data-table {
        font-size: 0.85rem;
    }
    
    .data-table th, 
    .data-table td {
        padding: 8px 4px;
    }
    
    /* MOBILE FIX: Уменьшаем кнопки прокрутки на мобильных */
    .scroll-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    /* MOBILE FIX: Адаптация карточек компаний для мобильных */
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* MOBILE FIX: Адаптация мета-информации на мобильных */
    .meta-row {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
    }
    
    .meta-row .meta-label {
        min-width: auto;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .meta-row .meta-value {
        font-size: 1rem;
    }
    
    /* MOBILE FIX: Адаптация навигации карточек для мобильных */
    .table-scroll-wrapper .scroll-btn.left {
        display: none;
    }
    
    .table-scroll-wrapper .scroll-btn.right {
        display: none;
    }
    
    /* MOBILE FIX: Адаптация секции результатов поиска */
    .search-results-section {
        padding: 20px 16px;
        margin-bottom: 20px;
    }
    
    .search-results-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* MOBILE FIX: Адаптация сообщения "Ничего не найдено" */
    #noResultsMessage {
        padding: 30px 16px;
    }
    
    #noResultsMessage div:first-child {
        font-size: 2.5rem;
    }
    
    /* MOBILE FIX: Адаптация сектора (аккордеона) */
    .sector-header {
        padding: 10px 14px;
    }
    
    .sector-body {
        padding: 14px;
    }
    
    /* MOBILE FIX: Адаптация ключевых метрики */
    .key-metrics {
        flex-direction: column;
        gap: 8px;
    }
    
    .key-metric {
        padding: 10px 8px;
    }
    
    .key-metric .value {
        font-size: 1rem;
    }
    
    /* MOBILE FIX: Адаптация хлебных крошек */
    .breadcrumb {
        font-size: 0.85rem;
        flex-wrap: wrap;
    }
    
    /* MOBILE FIX: Адаптация подсказок карточек */
    .card-tiptext {
        padding: 16px;
    }
    
    /* MOBILE FIX: Адаптация под-вкладок */
    .tab {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    /* ==================== ОБЩИЕ СТИЛИ ДЛЯ МОБИЛЬНОЙ ФИНАНСОВОЙ СТРАНИЦЫ ==================== */
    
    /* Общий контейнер мобильной финансовой страницы */
    .financials-mobile-page {
        width: 100%;
        padding: 0;
        margin: 0;
        background: var(--card-bg);
    }
    
    /* Скрытие десктопных элементов на мобильных */
    .mobile-tab-content .table-desktop {
        display: none !important;
    }
    
    .mobile-tab-content .table-mobile {
        display: block !important;
    }
}

/* MOBILE FIX: Планшеты и небольшие экраны */
@media (max-width: 980px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 🔥 MOBILE FIX: Адаптация для планшетов */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 🔥 MOBILE FIX: Сбрасываем центрирование на планшетах */
    .metrics-grid .metric-card:nth-last-child(1):nth-child(4n+1),
    .metrics-grid .metric-card:nth-last-child(2):nth-child(4n+1),
    .metrics-grid .metric-card:nth-last-child(1):nth-child(4n+2) {
        grid-column: auto;
    }
    
    /* MOBILE FIX: Адаптация таблиц на планшетах */
    .table-scroll-wrapper {
        max-height: 500px;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 8px;
    }
}

/* MOBILE FIX: Очень маленькие экраны */
@media (max-width: 620px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .key-metrics {
        flex-direction: column;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    /* MOBILE FIX: Адаптация верхних компаний на очень маленьких экранах */
    .top-companies-cards .top-company-card {
        width: 280px;
        flex: 0 0 280px;
        min-width: 280px;
    }
    
    /* MOBILE FIX: Адаптация отступов контейнера */
    .container {
        padding: 0 12px;
        margin: 12px auto;
    }
    
    /* MOBILE FIX: Адаптация секции ТОП компаний */
    .top-companies-section {
        padding: 20px 16px;
    }
}

/* MOBILE FIX: Очень маленькие экраны (смартфоны) */
@media (max-width: 480px) {
    /* MOBILE FIX: Адаптация модальных окон для очень маленьких экранов */
    .modal-content {
        margin: 0;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 60px 15px 20px;
    }
    
    .close-modal {
        position: fixed;
        top: 15px;
        right: 15px;
        background: var(--card-bg);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    /* MOBILE FIX: Адаптация Telegram QR-кода */
    .telegram-qr-code {
        width: 180px;
        height: 180px;
        margin: 0 auto 15px;
    }
    
    /* MOBILE FIX: Адаптация иконок обратной связи */
    .feedback-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }
    
    /* MOBILE FIX: Адаптация контактных опций */
    .contact-option {
        padding: 12px;
        min-height: 55px;
    }
    
    /* MOBILE FIX: Адаптация контейнера графика для очень маленьких экранов */
    .chart-container {
        height: auto;
        padding: 5px;
    }
    
    /* MOBILE FIX: Адаптация кнопок управления графиком */
    .scroll-controls .scroll-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    /* MOBILE FIX: Адаптация герой-секции */
    .hero {
        padding: 60px 16px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* MOBILE FIX: Адаптация метрик */
    .metric-card {
        padding: 14px;
    }
    
    .metric-value {
        font-size: 1.2rem;
    }
    
    /* MOBILE FIX: Адаптация названий секций */
    .section-title {
        font-size: 1.4rem;
    }
}

/* MOBILE FIX: Составной медиа-запрос для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* MOBILE FIX: Адаптация ТОП компаний на планшетах */
    .top-company-card {
        width: 320px;
        flex: 0 0 320px;
    }
}

/* MOBILE FIX: Дополнительные стили для улучшения UX на мобильных */
@media (max-width: 768px) {
    /* Улучшение прокрутки на iOS */
    .table-scroll-wrapper {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Увеличение отступов для лучшего тапа */
    .company-card,
    .lk-widget,
    .card {
        padding: 16px;
    }
    
    /* Увеличение шрифтов для лучшей читаемости */
    .comp-title,
    .lk-page-header h1,
    .lk-widget-title {
        font-size: 1.2rem;
    }
    
    /* Адаптация поисковых полей */
    .search-large .input {
        padding: 14px 16px;
        font-size: 16px;
    }
    
    /* Адаптация кнопок действий */
    .company-actions .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Адаптация переключателей периодов */
    .period-toggle {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    /* Адаптация переключателя акций */
    .stock-switcher {
        padding: 4px 8px;
        font-size: 0.9rem;
    }
    
    /* Адаптация подсказок таблиц */
    .table-tooltip .table-tiptext {
        max-width: 280px;
        font-size: 0.85rem;
        padding: 10px;
    }
    
    /* Адаптация аккордеонов секторов */
    .sector-controls {
        font-size: 0.85rem;
    }
}

/* MOBILE FIX: Специальные исправления для горизонтальной прокрутки */
@media (max-width: 768px) {
    .table-container {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-scroll-wrapper {
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .table-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* Показываем индикатор горизонтальной прокрутки */
    .table-scroll-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            var(--sea-turquoise) 20%, 
            var(--sea-turquoise) 80%, 
            transparent 100%);
        opacity: 0.3;
    }
}

/* MOBILE FIX: Улучшение доступности для скринридеров */
@media (max-width: 768px) {
    /* Увеличиваем контрастность для лучшей читаемости */
    :root[data-theme="light"] {
        --muted: rgba(13,26,41,0.75);
    }
    
    :root[data-theme="dark"] {
        --muted: rgba(248,244,242,0.85);
    }
    
    /* Улучшаем видимость фокуса */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 2px solid var(--sea-turquoise);
        outline-offset: 2px;
    }
}

/* MOBILE FIX: Исправление проблем с отображением графиков */
@media (max-width: 768px) {
    .chart-container {
        position: relative;
        width: 100%;
        height: 300px;
    }
    
    .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Адаптация легенды графика для мобильных */
    .chart-legend {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    
    .legend-item {
        font-size: 12px;
    }
}

/* ============ МОБИЛЬНЫЕ СТИЛИ ДЛЯ ТОП КАРТОЧЕК ============ */

/* Планшеты среднего размера (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .top-company-card {
        width: 350px;
        flex: 0 0 350px;
    }
}

/* Планшеты (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-company-card {
        width: 320px;
        flex: 0 0 320px;
    }
}

/* Мобильные (до 767px) */
@media (max-width: 767px) {
    .top-companies-cards .top-company-card {
        width: 300px;
        flex: 0 0 300px;
        min-width: 300px;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .top-companies-cards .top-company-card {
        width: 280px;
        flex: 0 0 280px;
        min-width: 280px;
    }
}

/* Адаптация пустого состояния для мобильных */
@media (max-width: 768px) {
    .no-top-companies {
        padding: 20px;
        font-size: 0.9rem;
    }
}

/* ==================== ТЕМНАЯ ТЕМА НА МОБИЛЬНЫХ ==================== */

@media (max-width: 768px) {
    :root[data-theme="dark"] {
        --muted: rgba(248,244,242,0.8);
    }
    
    :root[data-theme="dark"] .company-card {
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    :root[data-theme="dark"] .metric {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.1);
    }
    
    :root[data-theme="dark"] .key-metrics {
        background: rgba(95,170,184,0.05);
        border-color: rgba(95,170,184,0.1);
    }
}

/* ==================== ИСПРАВЛЕНИЕ: ДОБАВЛЕНИЕ ОТСТУПА ПОСЛЕ УДАЛЕНИЯ ПУСТОГО КОНТЕЙНЕРА ==================== */

@media (max-width: 768px) {
  .financials-mobile-page .mobile-prices-container {
    margin-top: 20px !important;
  }
}

/* ==================== ИСПРАВЛЕНИЕ: ПРЕДОТВРАЩЕНИЕ MARGIN COLLAPSING ==================== */

@media (max-width: 768px) {
  .financials-mobile-page {
    padding-top: 20px !important;
    display: flow-root !important;
  }
  
  .financials-mobile-page .mobile-prices-container {
    margin-top: 0 !important;
    margin-right: 16px !important;
    margin-bottom: 20px !important;
    margin-left: 16px !important;
  }
}

/* ==================== ИСПРАВЛЕНИЕ ПОИСКА НА МОБИЛЬНЫХ ==================== */

@media (max-width: 768px) {
    .search-large {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .search-large .input {
        width: 100%;
        padding: 14px 16px;
        padding-left: 48px !important;
        font-size: 16px;
        box-sizing: border-box;
        background: rgba(255,255,255,0.1);
    }
    
    .search-large:before {
        content: "🔍";
        position: absolute;
        left: 16px !important;
        top: 14px !important;
        transform: none !important;
        font-size: 1.2rem;
        opacity: 0.6;
        z-index: 2;
        pointer-events: none;
    }
    
    .search-large .search-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .search-large .input {
        padding-left: 42px !important;
    }
    
    .search-large:before {
        left: 12px !important;
        font-size: 1.1rem;
    }
}

/* ==================== СТИЛИ ИЗ FINANCIALS.HTML ==================== */

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .meta-row {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
    }
    
    .meta-row .meta-label {
        min-width: auto;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .meta-row .meta-value {
        font-size: 1rem;
    }
}

/* ==================== 🔥 ПЕРЕОПРЕДЕЛЕНИЕ ДЛЯ КНОПОК ПОДСКАЗОК ==================== */
/* Эти правила переопределяют общие стили для кнопок на мобильных */
@media (hover: none) and (pointer: coarse) {
    .metric-tooltip-btn {
        min-width: 10px !important;
        min-height: 10px !important;
        width: 10px !important;
        height: 10px !important;
        font-size: 0.5rem !important;
    }
}

/* Специально для планшетов (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .company-card .metric .name,
    .top-company-card .metric .name {
        font-size: 14px !important;
        white-space: normal !important;  /* разрешаем перенос */
        line-height: 1.3 !important;
    }
    
    .company-card .metric,
    .top-company-card .metric {
        min-height: 85px !important;
        height: auto !important;  /* авто-высота */
        padding: 8px 2px !important;
    }
}

/* ==================== КОНЕЦ МОБИЛЬНЫХ СТИЛЕЙ ==================== */
/* Этот файл должен подключаться ПОСЛЕ main.css в шаблонах */
/* Пример подключения: <link rel="stylesheet" href="{% static 'css/mobile-main.css' %}" media="(max-width: 768px)"> */

/* ==================== 🔥 НОВЫЕ ИСПРАВЛЕНИЯ: ОПТИМИЗАЦИЯ МЕТРИКИ "РОСТ ПРИБЫЛИ" С ПЕРИОДОМ ==================== */

@media (max-width: 768px) {
    /* 1. Уменьшаем отступ у названия метрики, когда есть период */
    .company-card .metric:has(.period-note) .name,
    .top-company-card .metric:has(.period-note) .name {
        margin-bottom: 0 !important;
        font-size: 10px !important;
    }

    /* 2. Уменьшаем размер значения */
    .company-card .metric:has(.period-note) .value,
    .top-company-card .metric:has(.period-note) .value {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
    }

    /* 3. Уменьшаем и поднимаем кнопку "?" */
    .company-card .metric:has(.period-note) .metric-tooltip-btn,
    .top-company-card .metric:has(.period-note) .metric-tooltip-btn {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 0.6rem !important;
        margin-top: -2px !important;
        margin-bottom: 2px !important;
    }

    /* 4. Уменьшаем шрифт периода */
    .company-card .metric .period-note,
    .top-company-card .metric .period-note {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin-top: 0 !important;
        letter-spacing: -0.02em;
    }

    /* 5. Для очень маленьких экранов - еще компактнее */
    @media (max-width: 480px) {
        .company-card .metric:has(.period-note) .name {
            font-size: 9px !important;
        }
        
        .company-card .metric:has(.period-note) .value {
            font-size: 0.8rem !important;
        }
        
        .company-card .metric .period-note {
            font-size: 0.45rem !important;
        }
    }
}
/* ==================== КОНЕЦ НОВЫХ ИСПРАВЛЕНИЙ ==================== */