/**
 * 📱 ПРОСТИЙ FLEXBOX ПІДХІД - УНІВЕРСАЛЬНА АДАПТИВНІСТЬ
 * Заміна CSS Grid на надійний flexbox з миттєвою адаптацією
 * Version: 5.8 - Картка центрована і розтягнута до країв на мобільному
 */

/* 🎯 CSS ЗМІННІ */
:root {
    --header-height: 56px; /* Стандартна висота Bootstrap navbar */
    --mobile-menu-height: 60px; /* Висота мобільного меню */
}

/* 🔧 ГЛОБАЛЬНІ OVERRIDE - застосовуються завжди коли є клас mobile-flexbox-layout */
html.mobile-flexbox-layout, 
html.mobile-flexbox-layout body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* 📐 КОНТЕЙНЕР: Body як вертикальний flex на весь екран - ЗАВЖДИ */
html.mobile-flexbox-layout body,
html.mobile-flexbox-layout body.page-home {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: 100vh !important; /* Фіксована висота */
    margin: 0 !important;
    padding: 0 !important;
}

/* 🏗️ NAVBAR: Фіксована висота та flex-shrink */
html.mobile-flexbox-layout .navbar {
    flex-shrink: 0 !important;
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
}

/* 📊 DASHBOARD GRID: Займає всю доступну висоту main - ЗАВЖДИ */
html.mobile-flexbox-layout #user-dashboard-grid {
    flex: 1 !important; /* Займає всю доступну висоту */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Центруємо вертикально */
    align-items: center !important; /* Центруємо горизонтально */
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* Без прокрутки на desktop */
}

/* 📱 CARDS CONTAINER: Займає всю доступну висоту */
html.mobile-flexbox-layout #user-dashboard-grid .container-fluid {
    flex: 1 !important; /* Займає всю доступну висоту */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Центруємо вертикально */
    align-items: center !important; /* Центруємо горизонтально */
    padding: 8px !important; /* Зменшені поля для більшого простору контенту */
    max-width: none !important;
}

/* 📱 МОБІЛЬНА ОПТИМІЗАЦІЯ CONTAINER-FLUID */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout #user-dashboard-grid .container-fluid {
        padding: 0 !important; /* Без полів для повноекранного режиму */
        width: 100% !important; /* Повна ширина */
        height: 100% !important; /* Повна висота */
        justify-content: stretch !important; /* Розтягуємо контент */
        align-items: stretch !important; /* Розтягуємо по висоті */
    }
}

/* 🏢 ОГОРТАННЯ КАРТОК: Додаємо тіні та заокруглення */
html.mobile-flexbox-layout #user-companies-container {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    width: 100% !important; /* Повна ширина контейнера */
}

/* 🎯 ЦЕНТРУВАННЯ КАРТОК НА DESKTOP */
@media (min-width: 768px) {
    html.mobile-flexbox-layout #user-companies-container {
        max-width: 900px !important; /* Збільшуємо максимальну ширину */
        width: 100% !important; /* Заповнюємо доступну ширину */
        margin: 0 !important; /* Центрування через батьківський контейнер */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
        border-radius: 16px !important;
        height: auto !important; /* Автоматична висота */
        overflow: visible !important; /* Без прокрутки */
    }
}

/* 📱 ПОВНОЕКРАННА КАРТКА НА MOBILE */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout #user-companies-container {
        width: 100% !important; /* Повна ширина main */
        max-width: 100% !important; /* Без обмежень ширини */
        height: 100% !important; /* Повна висота main */
        margin: 0 !important; /* Без відступів */
        box-shadow: none !important; /* Без тіні для повноекранного режиму */
        border-radius: 0 !important; /* Без заокруглень для повного заповнення */
        border: none !important; /* Без рамки */
        min-height: 100% !important; /* Мінімальна висота 100% */
        overflow: visible !important; /* Показуємо весь контент */
        min-width: 100vw !important; /* Мінімальна ширина 100% viewport */
    }

    /* Збільшуємо ширину самих карток компаній */
    html.mobile-flexbox-layout .argon-company-card {
        min-width: 95vw !important; /* Мінімальна ширина 95% viewport */
        width: 100% !important;
        max-width: none !important; /* Знімаємо обмеження */
    }
}

/* 🎨 ОСНОВНІ КАРТКИ: Також з тінями і відступами */
html.mobile-flexbox-layout .card.argon-flutter-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    margin: 8px 0 !important; /* Відступи навколо карток */
}

/* 📱 МОБІЛЬНІ: Спеціальні стилі для cache-info */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout .cache-info {
        padding: 12px 16px !important; /* Більший padding на мобільних */
        margin: 8px 12px 80px 12px !important; /* Відступи з боків та знизу для мобільного меню */
        border-radius: 8px !important; /* Заокруглення на мобільних */
        background: rgba(248, 249, 250, 0.9) !important; /* Більш непрозорий фон */
    }
    
    html.mobile-flexbox-layout .cache-info .btn {
        margin: 0 auto 8px auto !important; /* Більший відступ під кнопкою */
        padding: 6px 16px !important; /* Більша кнопка на мобільних */
        font-size: 15px !important; /* Більший шрифт */
    }
    
    html.mobile-flexbox-layout .cache-info small {
        font-size: 13px !important; /* Більший текст на мобільних */
        line-height: 1.4 !important;
    }
}

/* 💻 DESKTOP: Поля для карток і центрування */
@media (min-width: 768px) {
    /* Desktop: ще компактніша cache-info */
    html.mobile-flexbox-layout .cache-info {
        padding: 6px 20px !important; /* Мінімальний padding на desktop */
    }
    
    /* Desktop: повноширинні картки в Bootstrap grid */
    html.mobile-flexbox-layout .row.g-3.g-md-4.justify-content-center .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    html.mobile-flexbox-layout .card.argon-flutter-card {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
}

/* 🔧 ІНФОРМАЦІЯ ПРО КЕШ В НИЗУ КОНТЕНТУ - БАЗОВІ СТИЛІ */
html.mobile-flexbox-layout .cache-info {
    margin-top: auto !important; /* Виштовхуємо в низ */
    padding: 8px 20px !important; /* Базовий padding (перевизначається в медіазапитах) */
    background: rgba(248, 249, 250, 0.8) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    min-height: auto !important;
}

html.mobile-flexbox-layout .cache-info .btn {
    max-width: 150px !important;
    margin: 0 auto 5px auto !important;
    display: block !important;
    padding: 4px 12px !important; /* Базовий padding (перевизначається в медіазапитах) */
    font-size: 14px !important; /* Базовий розмір (перевизначається в медіазапитах) */
}

html.mobile-flexbox-layout .cache-info small {
    font-size: 12px !important; /* Базовий розмір (перевизначається в медіазапитах) */
    margin: 0 !important;
}

/* 🌟 MAIN: Займає ВСЮ вільну площу БЕЗ футера - ЗАВЖДИ */
html.mobile-flexbox-layout #main-content,
html.mobile-flexbox-layout #main-content.container-fluid {
    flex: 1 !important; /* Займає всю доступну висоту */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important; /* Приховуємо прокрутку на main */
    margin: 0 !important; /* Перебиваємо Bootstrap margin */
}

/* 🎨 HERO SECTION: Приховано - ЗАВЖДИ */
html.mobile-flexbox-layout .bg-light {
    display: none !important; /* ❌ ПРИХОВУЄМО hero - там немає корисної інформації */
}

/* 🏢 КАРТКИ КОМПАНІЙ: Звичайні картки без фіксованої висоти - ЗАВЖДИ */
html.mobile-flexbox-layout .mobile-fullheight,
html.mobile-flexbox-layout .card.mobile-fullheight {
    display: block !important; /* Звичайний блок замість flex */
    margin: 8px 0 !important; /* Стандартні відступи */
    padding: 0 !important;
    overflow: visible !important; /* Дозволяємо природне відображення */
}

/* 💻 DESKTOP: Card-body займає весь main з центруванням */
@media (min-width: 768px) {
    html.mobile-flexbox-layout #user-dashboard-grid .container-fluid {
        flex: 1 !important; /* Займає всю висоту */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Центруємо вертикально */
        align-items: center !important; /* Центруємо горизонтально */
        padding: 20px !important; /* Рівномірні поля навколо */
        overflow: hidden !important; /* Без прокрутки на контейнері */
    }
    
    html.mobile-flexbox-layout .row.g-3.g-md-4.justify-content-center.mb-2.mb-md-4 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Центруємо вертикально */
        align-items: center !important; /* Центруємо горизонтально */
        margin: 0 !important;
        width: 100% !important; /* Повна ширина */
        max-width: 900px !important; /* Максимальна ширина для кращого вигляду */
        height: auto !important; /* Автоматична висота */
        min-height: 0 !important; /* Без мінімальної висоти */
    }
    
    html.mobile-flexbox-layout .mobile-fullheight,
    html.mobile-flexbox-layout .card.mobile-fullheight {
        display: flex !important; /* Картка як flex */
        flex-direction: column !important;
        width: 100% !important; /* Повна ширина контейнера */
        height: auto !important; /* Автоматична висота під контент */
        min-height: 0 !important; /* Без мінімальної висоти */
        max-height: none !important; /* Без обмеження висоти */
        overflow: visible !important; /* Без прокрутки */
    }

    /* 📱 МОБІЛЬНА ПОВНОЕКРАННА КАРТКА */
    @media (max-width: 767.98px) {
        html.mobile-flexbox-layout .mobile-fullheight,
        html.mobile-flexbox-layout .card.mobile-fullheight {
            width: 100% !important; /* Повна ширина */
            height: 100% !important; /* Повна висота */
            flex: 1 !important; /* Займає весь доступний простір */
            border-radius: 0 !important; /* Без заокруглень */
            border: none !important; /* Без рамки */
            box-shadow: none !important; /* Без тіні */
        }
    }
    
    /* 📦 CARD BODY: Природний розмір під контент */
    html.mobile-flexbox-layout .card-body {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important; /* БЕЗ прокрутки на card-body */
        padding: 20px !important; /* Збільшені внутрішні поля */
        margin: 0 !important;
        height: auto !important; /* Автоматична висота */
        min-height: 0 !important; /* Без мінімальної висоти */
    }

    /* 📱 МОБІЛЬНА ОПТИМІЗАЦІЯ CARD-BODY */
    @media (max-width: 767.98px) {
        html.mobile-flexbox-layout .card-body {
            padding: 10px !important; /* Мінімальний padding для більшого простору */
            font-size: 14px !important; /* Оптимізований розмір шрифту */
            line-height: 1.4 !important; /* Кращий line-height для читабельності */
            flex: 1 !important; /* Займає весь доступний простір */
            height: 100% !important; /* Повна висота */
            min-width: 95vw !important; /* Мінімальна ширина 95% viewport */
            width: 100% !important; /* Повна ширина */
            overflow-x: visible !important; /* Показуємо весь контент по горизонталі */
        }

        /* 📊 МОБІЛЬНА ОПТИМІЗАЦІЯ ТАБЛИЦЬ ТА ПОКАЗНИКІВ */
        html.mobile-flexbox-layout .table-responsive {
            font-size: 12px !important; /* Менший шрифт для таблиць */
            overflow-x: auto !important; /* Горизонтальна прокрутка для таблиць */
        }

        html.mobile-flexbox-layout .table {
            margin-bottom: 0 !important; /* Без зайвих відступів */
        }

        html.mobile-flexbox-layout .table td,
        html.mobile-flexbox-layout .table th {
            padding: 6px 4px !important; /* Компактний padding для комірок */
            font-size: 11px !important; /* Менший шрифт в комірках */
            line-height: 1.2 !important;
        }

        /* 📈 ПОКАЗНИКИ: компактне відображення */
        html.mobile-flexbox-layout .badge {
            font-size: 10px !important; /* Менші badges */
            padding: 2px 6px !important;
        }

        html.mobile-flexbox-layout .btn-sm {
            font-size: 11px !important; /* Менші кнопки */
            padding: 4px 8px !important;
        }

        /* 🏢 КОМПАНІЇ: оптимізація назв та показників */
        html.mobile-flexbox-layout .argon-card-title {
            font-size: 12px !important; /* Ще менша назва підприємства */
            line-height: 1.1 !important;
            margin-bottom: 4px !important; /* Зменшуємо відступ */
            max-height: 1.5em !important; /* Максимум 1.5 рядка замість 2 */
            overflow: hidden !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 1 !important; /* Тільки 1 рядок */
            line-clamp: 1 !important; /* Стандартна властивість */
            -webkit-box-orient: vertical !important;
        }

        /* 🏢 ЗМЕНШУЄМО ПРОСТІР НАЗВИ ПІДПРИЄМСТВА */
        html.mobile-flexbox-layout .d-flex.align-items-start {
            flex-direction: row !important; /* Повертаємо горизонтальну структуру */
            gap: 8px !important; /* Невеликий проміжок */
        }

        html.mobile-flexbox-layout .d-flex.align-items-start .flex-grow-1 {
            flex: 0 0 35% !important; /* Обмежуємо назву до 35% ширини */
            max-width: 35% !important;
            min-width: 0 !important;
        }

        html.mobile-flexbox-layout .argon-icon-wrapper {
            flex: 0 0 auto !important;
            margin-right: 5px !important; /* Зменшуємо відступ */
        }

        /* Badge EDRPOU також компактніший */
        html.mobile-flexbox-layout .badge.argon-bg-gradient-secondary {
            font-size: 9px !important;
            padding: 2px 4px !important;
            margin-top: 2px !important;
        }

        /* 📊 СТАТИСТИЧНІ КОНТЕЙНЕРИ: ЗБІЛЬШУЄМО ПРОСТІР */
        html.mobile-flexbox-layout .d-flex.align-items-start {
            flex-direction: row !important; /* Горизонтальна структура */
            gap: 8px !important;
        }

        html.mobile-flexbox-layout .d-flex.align-items-start .flex-grow-1 {
            flex: 0 0 35% !important; /* Назва займає тільки 35% */
            max-width: 35% !important;
        }

        html.mobile-flexbox-layout .argon-stat-container {
            flex: 1 !important; /* Показники займають решту 65% простору */
            margin-top: 0 !important; /* Без верхнього відступу */
            width: auto !important;
            min-width: auto !important;
            max-width: 65% !important;
            overflow: visible !important;
        }

        /* 📈 ПОКАЗНИКИ РРП та ДЗК: радикальна перебудова для одного рядка */
        html.mobile-flexbox-layout .argon-stat-container .text-center {
            text-align: left !important;
        }

        html.mobile-flexbox-layout .property-count-wrapper {
            display: block !important; /* Блочний елемент для повного контролю */
            width: 100% !important;
            white-space: nowrap !important;
            overflow: visible !important; /* Показуємо весь контент */
            padding: 3px 0 !important; /* Менший padding */
        }

        /* Перетворюємо всю структуру в один inline рядок */
        html.mobile-flexbox-layout .property-count-wrapper > * {
            display: inline !important; /* Всі дочірні елементи в одну лінію */
            white-space: nowrap !important;
            vertical-align: middle !important;
        }

        /* Компактна іконка + назва */
        html.mobile-flexbox-layout .d-flex.align-items-center.justify-content-center {
            display: inline !important; /* Inline замість flex */
            margin: 0 6px 0 0 !important;
            white-space: nowrap !important;
        }

        html.mobile-flexbox-layout .d-flex.align-items-center.justify-content-center i {
            font-size: 11px !important;
            margin-right: 2px !important;
        }

        html.mobile-flexbox-layout .argon-card-subtitle {
            font-size: 13px !important; /* Збільшуємо шрифт для РРП/ДЗК */
            font-weight: bold !important;
            margin: 0 6px 0 0 !important;
            display: inline !important;
            white-space: nowrap !important;
        }

        html.mobile-flexbox-layout .argon-stat-number {
            font-size: 16px !important; /* Збільшуємо цифри */
            font-weight: bold !important;
            margin: 0 6px 0 0 !important;
            display: inline !important;
            white-space: nowrap !important;
            color: #2d5aa0 !important;
            min-width: 50px !important;
        }

        html.mobile-flexbox-layout .argon-stat-label {
            font-size: 10px !important;
            margin: 0 !important;
            display: inline !important;
            white-space: nowrap !important;
            color: #6c757d !important;
            max-width: 120px !important; /* Обмежуємо ширину опису */
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            vertical-align: middle !important;
        }

        html.mobile-flexbox-layout .data-freshness-indicator {
            display: none !important;
        }

        /* Убираємо всі Bootstrap margin класи */
        html.mobile-flexbox-layout .property-count-wrapper .mb-2,
        html.mobile-flexbox-layout .property-count-wrapper .mb-3,
        html.mobile-flexbox-layout .property-count-wrapper .me-2 {
            margin: 0 !important;
        }

        /* Форсуємо однорядковість через псевдо-елементи */
        html.mobile-flexbox-layout .property-count-wrapper::after {
            content: '';
            display: block;
            clear: both;
        }

        /* 🚨 КРИТИЧНЕ: Глобальний override для всіх текстових елементів в показниках */
        html.mobile-flexbox-layout .property-count-wrapper,
        html.mobile-flexbox-layout .property-count-wrapper *,
        html.mobile-flexbox-layout .argon-stat-container,
        html.mobile-flexbox-layout .argon-stat-container * {
            word-break: keep-all !important; /* Заборонити розрив слів */
            word-wrap: normal !important; /* Заборонити перенос */
            hyphens: none !important; /* Без переносів */
            overflow-wrap: normal !important; /* Без автоматичного переносу */
        }

        /* 📏 Оптимізована ширина для card-body на мобільних */
        html.mobile-flexbox-layout .card-body {
            width: 100% !important;
            overflow-x: visible !important; /* Показуємо весь контент */
        }
    }
    
    /* 📱 MOBILE MENU: Приховуємо на десктопі */
    html.mobile-flexbox-layout .mobile-bottom-nav {
        display: none !important; /* Приховуємо мобільне меню на десктопі */
    }
}

/* 📊 КОНТЕЙНЕРИ КАРТОК: Також займають всю висоту - ЗАВЖДИ */
html.mobile-flexbox-layout #user-companies-container {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin: 0 !important; /* ПРИБИРАЄМО margin */
    padding: 0 !important; /* ПРИБИРАЄМО padding */
}

/* 🎯 МОБІЛЬНА СЕКЦІЯ ПІДПРИЄМСТВ: Автоматичний розмір на Desktop */
html.mobile-flexbox-layout #user-companies-container {
    overflow: visible !important; /* Без прокрутки за замовчуванням */
}

/* Desktop: оптимізація контейнера карток */
@media (min-width: 768px) {
    html.mobile-flexbox-layout #user-companies-container {
        height: auto !important; /* Автоматична висота */
        min-height: 0 !important; /* Без мінімальної висоти */
        overflow: visible !important; /* Без прокрутки */
    }
}

/* Mobile: прокрутка тільки на мобільних */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout #user-companies-container {
        flex: 1 1 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        /* Центрування контенту */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px !important; /* Мінімальні відступи від країв */
    }
    
    /* Картка розтягується максимально на мобільному */
    html.mobile-flexbox-layout .col-12.col-lg-6.mb-4.mobile-fullscreen-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Сама картка розтягується до країв контейнера */
    html.mobile-flexbox-layout .mobile-fullscreen-card .argon-flutter-card.argon-company-card {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 8px !important; /* Трохи округлені кути */
    }
}

/* 🔥 RESPONSIVE Bootstrap Grid Override */
html.mobile-flexbox-layout .row.g-4 {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

/* Desktop: звичайний розмір */
@media (min-width: 768px) {
    html.mobile-flexbox-layout .row.g-4 {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Mobile: повна висота */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout .row.g-4 {
        flex: 1 1 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        /* Центрування картки */
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Responsive col-12 стилі */
html.mobile-flexbox-layout .col-12 {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Desktop: автоматичний розмір */
@media (min-width: 768px) {
    html.mobile-flexbox-layout .col-12 {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Mobile: повна висота */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout .col-12 {
        flex-grow: 1 !important;
        height: 100% !important;
        min-height: 100% !important;
    }
}

/* 🎯 КОНКРЕТНІ КАРТКИ: Звичайні стилі - ЗАВЖДИ */
html.mobile-flexbox-layout .argon-company-card {
    margin: 8px 0 !important; /* Стандартні відступи */
}

/* 📦 КОНТЕНТ КАРТКИ: Звичайний контент - ЗАВЖДИ */
html.mobile-flexbox-layout .card-body {
    display: block !important; /* Звичайний блок */
    overflow: visible !important; /* Дозволяємо природне відображення */
}

/* 🚫 ВІДКЛЮЧАЄМО СТАРІ calc(100vh) СТИЛІ - ЗАВЖДИ */
html.mobile-flexbox-layout .mobile-fullscreen-card,
html.mobile-flexbox-layout .mobile-fullheight,
html.mobile-flexbox-layout .card.mobile-fullheight {
    height: 100% !important;
    min-height: 100% !important;
}

/* 🎯 BOOTSTRAP OVERRIDE: Переписуємо Bootstrap стилі - ЗАВЖДИ */
html.mobile-flexbox-layout .col-12.col-lg-6.mb-4.mobile-fullscreen-card {
    flex: 1 1 100% !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 🎯 ВАЖЛИВО: Переконуємося що dashboard-grid показується - ЗАВЖДИ */
html.mobile-flexbox-layout #user-dashboard-grid {
    display: flex !important;
    flex: 1 !important; /* Додатково переконуємося */
}

/* 💻 DESKTOP: Приховуємо mobile menu на великих екранах */
@media (min-width: 992px) {
    html.mobile-flexbox-layout .mobile-bottom-nav {
        display: none !important; /* Приховуємо mobile menu на desktop */
    }
}

/* ✅ ПОКАЗУЄМО ТІЛЬКИ СЕКЦІЮ ПІДПРИЄМСТВ - адаптивно */
html.mobile-flexbox-layout .row.g-3.g-md-4.justify-content-center.mb-2.mb-md-4 {
    margin-bottom: 0 !important; /* ПРИБИРАЄМО Bootstrap margin */
    margin-top: 0 !important; /* ПРИБИРАЄМО Bootstrap margin */
    padding: 0 !important;
}

/* Desktop: flex з центруванням */
@media (min-width: 768px) {
    html.mobile-flexbox-layout .row.g-3.g-md-4.justify-content-center.mb-2.mb-md-4 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Mobile: повноекранний flex */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout .row.g-3.g-md-4.justify-content-center.mb-2.mb-md-4 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important; /* Розтягуємо на весь простір */
        align-items: stretch !important; /* Розтягуємо по ширині */
        height: 100% !important; /* Повна висота */
        margin: 0 !important; /* Без відступів */
    }
}

/* 📱 OVERRIDE: .col-12 в секції підприємств - адаптивно */
html.mobile-flexbox-layout .row.g-3.g-md-4 .col-12 {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Desktop: flex стилі */
@media (min-width: 768px) {
    html.mobile-flexbox-layout .row.g-3.g-md-4 .col-12 {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Mobile: повноекранний режим */
@media (max-width: 767.98px) {
    html.mobile-flexbox-layout .row.g-3.g-md-4 .col-12 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important; /* Повна ширина */
        height: 100% !important; /* Повна висота */
        flex: 1 !important; /* Займає весь доступний простір */
    }
}

/* 🔧 ДОДАТКОВО: Переписуємо mt-2 mt-md-4 класи */
html.mobile-flexbox-layout .mt-2,
html.mobile-flexbox-layout .mt-md-4,
html.mobile-flexbox-layout .mb-2,
html.mobile-flexbox-layout .mb-md-4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 📱 МЕДІА ЗАПИТ: Специфічні стилі тільки для мобільних пристроїв */
@media (max-width: 991.98px) {
    /* 🎯 DASHBOARD GRID: Повноекранний режим на мобільних */
    html.mobile-flexbox-layout #user-dashboard-grid {
        justify-content: stretch !important; /* Розтягуємо на весь простір */
        align-items: stretch !important; /* Розтягуємо по висоті */
        overflow-y: auto !important; /* Прокрутка на мобільних */
        padding: 0 !important; /* Без полів для повноекранного режиму */
    }

    /* 🎯 HEADER: Адаптивна висота - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .navbar,
    html.mobile-flexbox-layout .bg-light {
        flex-shrink: 0 !important;
    }

    /* 🎨 HERO SECTION: Компактний на мобільних - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .bg-light {
        padding: 5px 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* 🚫 OVERRIDE Bootstrap padding classes на hero section - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .bg-light.py-5,
    html.mobile-flexbox-layout .bg-light.py-md-5,
    html.mobile-flexbox-layout .bg-light.py-3 {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    
    /* 📱 CONTAINER-FLUID всередині hero: Мінімізуємо - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .bg-light .container-fluid {
        padding: 2px 8px !important;
    }

    /* 📊 MAIN CONTENT: Враховуємо мобільне меню внизу - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout #main-content,
    html.mobile-flexbox-layout #main-content.container-fluid {
        padding-bottom: var(--mobile-menu-height) !important; /* Простір для мобільного меню */
    }

    /* 📱 MOBILE MENU: Показуємо та закріплюємо внизу - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        height: var(--mobile-menu-height) !important;
    }

    /* 📊 MAIN CONTENT: Менший padding оскільки cache-info має власний margin - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout #main-content {
        padding-bottom: 0 !important; /* Видаляємо padding, cache-info має власний margin */
    }

    /* 📱 MOBILE MENU: Компактне мобільне меню - ТІЛЬКИ МОБІЛЬНІ */
    html.mobile-flexbox-layout .mobile-bottom-nav {
        flex-shrink: 0 !important;
        height: 50px !important;
    }

    /* 🚫 ПРИХОВУЄМО ДОДАТКОВІ КАРТКИ НА МОБІЛЬНИХ - ТІЛЬКИ МОБІЛЬНІ */
    /* БІЛЬШ СПЕЦИФІЧНИЙ селектор щоб НЕ торкатися карток підприємств */
    html.mobile-flexbox-layout .row.g-4.justify-content-center:not(.companies-container):not([id*="companies"]) {
        display: none !important; /* Приховуємо Notes, Resources, Requests картки */
    }
    
    /* 🎯 ДОДАТКОВО: Приховуємо конкретні картки статистики за ID */
    html.mobile-flexbox-layout #dashboard-notes-card,
    html.mobile-flexbox-layout #dashboard-resources-card,
    html.mobile-flexbox-layout #dashboard-requests-card {
        display: none !important; /* Приховуємо конкретні картки статистики */
    }
    
    /* ✅ ВАЖЛИВО: ЗАВЖДИ показуємо контейнер з картками підприємств */
    html.mobile-flexbox-layout #user-companies-container,
    html.mobile-flexbox-layout #user-companies-container .row,
    html.mobile-flexbox-layout #user-companies-container .row.g-4 {
        display: flex !important; /* ОБОВ'ЯЗКОВО показуємо контейнер підприємств */
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 🖥️ МЕДІА ЗАПИТ: Оптимізація для десктопу */
@media (min-width: 992px) {
    /* 🚫 ПРИХОВУЄМО МОБІЛЬНЕ МЕНЮ НА ДЕСКТОПІ */
    html.mobile-flexbox-layout .mobile-bottom-nav {
        display: none !important; /* Мобільне меню не показується на десктопі */
    }
    
    /* 🌟 BODY: На десктопі фіксована висота БЕЗ прокрутки */
    html.mobile-flexbox-layout body,
    html.mobile-flexbox-layout body.page-home {
        height: 100vh !important; /* Точно 100vh */
        max-height: 100vh !important;
        overflow: hidden !important; /* Заборонено прокрутку body */
    }
    
    /* 🌟 MAIN: Займає всю доступну висоту */
    html.mobile-flexbox-layout #main-content,
    html.mobile-flexbox-layout #main-content.container-fluid {
        flex: 1 !important; /* Займає всю доступну висоту між header та footer */
        overflow-y: auto !important; /* Дозволяємо прокрутку main */
        overflow-x: hidden !important; /* Заборонено горизонтальну прокрутку */
    }
}

/* 🔧 HIGH PRIORITY FIXES: Override argon-flutter-cards.css conflicts - ONLY FOR COMPANY CARDS */
@media (max-width: 768px) {
    /* ЗБІЛЬШУЄМО ЗАГАЛЬНИЙ ШРИФТ для мобільних */
    html.mobile-flexbox-layout {
        font-size: 16px !important; /* Базовий розмір збільшено */
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active body {
        font-size: 16px !important;
    }
    
    /* ЗБІЛЬШУЄМО шрифти в картках */
    html.mobile-flexbox-layout .mobile-flexbox-active .card {
        font-size: 15px !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .btn {
        font-size: 16px !important;
        padding: 12px 20px !important;
    }
    
    /* � ТИМЧАСОВО ПРИХОВУЄМО деталізацію підприємства */
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .argon-stat-container {
        display: block !important; /* Показуємо блок статистики РРП/ДЗК/різниця */
    }
    
    /* ✅ КАРТКИ МАЮТЬ БУТИ ВИДИМИМИ на мобільному! */
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card {
        display: flex !important; /* ОБОВ'ЯЗКОВО показуємо картки */
        flex-direction: column !important;
        min-height: auto !important;
        padding-bottom: 20px !important; /* Додаємо трохи відступу знизу */
        visibility: visible !important; /* Додаткова гарантія видимості */
        opacity: 1 !important; /* Переконуємося що не прозорі */
    }
    
    /* ✅ КОНТЕЙНЕРИ карток також мають бути видимими */
    html.mobile-flexbox-layout .mobile-flexbox-active .col-12.col-lg-6 {
        display: block !important; /* Показуємо колонки Bootstrap */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .row.g-4 {
        display: flex !important; /* Показуємо рядок Bootstrap */
        flex-direction: column !important; /* На мобільному - колонка */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* ✅ Основна інформація картки також має бути видимою */
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .d-flex.align-items-start,
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .argon-card-title,
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .badge,
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .argon-icon-wrapper,
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .card-body {
        display: block !important; /* Показуємо назву, ЄДРПОУ та іконку */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 🎯 ДОДАТКОВО: Забезпечуємо видимість flex контейнерів */
    html.mobile-flexbox-layout .argon-flutter-card.argon-company-card .d-flex {
        display: flex !important; /* Flex контейнери мають залишатися flex */
    }
    
    /* 
    ===============================================================================
    🚫 ТИМЧАСОВО ЗАКОМЕНТОВАНО - деталізація підприємства прихована
    ===============================================================================
    
    /* 📈 ГРАФІЧНІ блоки статистики */
    /*
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)) !important;
        border-radius: 15px !important;
        padding: 20px !important;
        margin-bottom: 15px !important;
        border: none !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        backdrop-filter: blur(10px) !important;
        min-height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: stretch !important;
    }
    */
    
    /* 🎨 Кольорові градієнти для блоків - ЗАКОМЕНТОВАНО */
    /*
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.rrp-block {
        background: linear-gradient(45deg, #007bff, #0056b3) !important;
        color: white !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.rrp-block::before {
        content: '📊' !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        font-size: 1.8rem !important;
        opacity: 0.7 !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.dzk-block {
        background: linear-gradient(45deg, #28a745, #1e7e34) !important;
        color: white !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.dzk-block::before {
        content: '🌱' !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        font-size: 1.8rem !important;
        opacity: 0.7 !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.diff-block {
        background: linear-gradient(45deg, #ffc107, #e0a800) !important;
        color: #333 !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.diff-block::before {
        content: '📈' !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        font-size: 1.8rem !important;
        opacity: 0.7 !important;
    }
    
    /* 🎯 ГРАФІЧНІ числа з прогрес-барами - ЗАКОМЕНТОВАНО */
    /*
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .text-info,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .argon-stat-number,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block div[class*="text-"],
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .fw-bold,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .property-count-wrapper .text-info,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .property-count-wrapper .fw-bold {
        font-size: 2rem !important;
        font-weight: 800 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        background: none !important;
        border-radius: 0 !important;
        margin: 10px 0 !important;
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 2 !important;
    }
    */
    
    /* ===== ВСІ ІНШІ ПРАВИЛА ДЕТАЛІЗАЦІЇ ТИМЧАСОВО ЗАКОМЕНТОВАНІ ===== */
    /*
    
    /* 📊 Прогрес-бар під числами */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .text-info::after,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .argon-stat-number::after,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .fw-bold::after {
        content: '' !important;
        position: absolute !important;
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        height: 4px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px !important;
        overflow: hidden !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .text-info::before,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .argon-stat-number::before,
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block .fw-bold::before {
        content: '' !important;
        position: absolute !important;
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60% !important;
        height: 4px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 2px !important;
        animation: progressGlow 2s ease-in-out infinite !important;
    }
    
    @keyframes progressGlow {
        0%, 100% { width: 60%; opacity: 0.8; }
        50% { width: 80%; opacity: 1; }
    }
    
    /* 📋 Стильні підписи з іконками */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .argon-card-subtitle {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        opacity: 0.9 !important;
        position: relative !important;
        padding-left: 20px !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.rrp-block .argon-card-subtitle::before {
        content: '📊' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.dzk-block .argon-card-subtitle::before {
        content: '🌱' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.diff-block .argon-card-subtitle::before {
        content: '📈' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* 🏷️ Стильні індикатори */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .data-freshness-indicator {
        font-size: 0.8rem !important;
        margin-top: 10px !important;
        text-align: center !important;
        padding: 8px 15px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 20px !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    }
    
    /* КОМПАКТНІ описи статистики */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-company-card .argon-stat-label {
    /* ✨ Анімації появи блоків */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block {
        animation: slideInUp 0.6s ease-out !important;
        animation-fill-mode: both !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.rrp-block {
        animation-delay: 0.1s !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.dzk-block {
        animation-delay: 0.2s !important;
    }
    
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.diff-block {
        animation-delay: 0.3s !important;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 🌟 Ефект hover для інтерактивності */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* 💫 Пульсуючий ефект для важливих показників */
    html.mobile-flexbox-layout .mobile-flexbox-active .argon-flutter-card.argon-company-card .stat-block.diff-block {
        animation: pulse 3s ease-in-out infinite !important;
    }
    
    @keyframes pulse {
        0%, 100% { box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3); }
        50% { box-shadow: 0 8px 35px rgba(255, 193, 7, 0.5); }
    */
    /* ===== КІНЕЦЬ ЗАКОМЕНТОВАНИХ ПРАВИЛ ДЕТАЛІЗАЦІЇ ===== */
}

/* ===================================================================================
 * 📝 CHANGELOG: 
 * v5.3 - ВИПРАВЛЕНО: Приховуємо тільки деталізацію, картка залишається видимою
 *        - display: none тільки для .argon-stat-container (РРП/ДЗК/різниця)
 *        - Картка з назвою, ЄДРПОУ та іконкою залишається видимою
 *        - Видалено приховування .property-count-wrapper
 *        - Картки тепер компактні але видимі
 * ===================================================================================
 */