<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Агро-простір - Управління земельним банком</title>
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#198754">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Агро-простір">
    <meta name="msapplication-TileColor" content="#198754">
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/icon-192x192.png">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/icon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/icon-32x32.png">
    
    <!-- Direct fix for line 401 before any other scripts -->
    <script>
        // Create a direct fix for the booleanValid issue
        window.turf = window.turf || {};
        
        // Use Object.defineProperty to make this immutable
        Object.defineProperty(window.turf, 'booleanValid', {
            value: function(geometry) {
                console.log("Using IMMUTABLE booleanValid");
                return true; // Always return true
            },
            writable: false,
            configurable: false,
            enumerable: true
        });
        
        // Also fix the main validation function
        window.validateGeometry = function(geometry) {
            console.log("Using HEAD validateGeometry");
            return true; // Always return true
        };
        
        console.log("IMMUTABLE PATCH APPLIED");
    </script>
    
    <!-- Add our modal helper before any other app scripts -->
    <script src="js/modal-helper.js"></script>
    
    <!-- Continue with other head elements -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/field-analysis.css">
    <link rel="stylesheet" href="css/pwa-styles.css">
    <link rel="stylesheet" href="css/user-requests.css">
    <link rel="stylesheet" href="css/toast-notifications.css">
    <link rel="stylesheet" href="css/company-cards.css?v=7.1">
    
    <!-- Flutter-style Modern Cards -->
    <link rel="stylesheet" href="css/argon-flutter-cards.css?v=2.6">

    <!-- Мобільні PWA стилі -->
    <link href="css/mobile-pwa.css" rel="stylesheet">

    <!-- Smart Navigation System - КОЛЬОРОВІ іконки мобільного меню (ПІСЛЯ mobile-pwa.css) -->
    <link rel="stylesheet" href="css/smart-navigation.css">
    
    <!-- 🚨 КРИТИЧНО: Mobile Flexbox ПІСЛЯ всіх інших CSS для максимального override -->
    <link rel="stylesheet" href="css/mobile-flexbox-simple.css?v=3.8">
    
    <!-- КРИТИЧНО ВАЖЛИВО: Кольорові іконки для мобільного меню (після mobile-pwa.css) -->
    <style>
        /* Максимальна специфічність для перекриття mobile-pwa.css */
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-primary,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="map"] i {
            color: #0d6efd !important;
        }
        
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-warning,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="my-registry"] i {
            color: #ffc107 !important;
        }
        
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-success,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="notes"] i,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="register"] i {
            color: #198754 !important;
        }
        
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-info,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="resources"] i,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="login"] i {
            color: #0dcaf0 !important;
        }
        
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-secondary,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[href*="cabinet"] i {
            color: #6c757d !important;
        }
        
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item i.text-danger,
        html body nav.mobile-bottom-nav .mobile-nav-item.dropdown .dropdown-menu .dropdown-item[onclick*="logout"] i {
            color: #dc3545 !important;
        }
    </style>
    
    <!-- Стилі для індикаторів актуальності даних (тільки для dashboard) -->
    <style>
        #dashboard-last-update .data-freshness-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 8px;
            vertical-align: middle;
            transition: all 0.3s ease;
        }
        
        #dashboard-last-update .data-freshness-indicator.fresh {
            background: linear-gradient(45deg, #28a745, #34ce57);
            box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
            animation: pulse-fresh 2s ease-in-out infinite;
        }
        
        #dashboard-last-update .data-freshness-indicator.stale {
            background: linear-gradient(45deg, #ffc107, #ffdc3d);
            box-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
        }
        
        #dashboard-last-update .data-freshness-indicator.outdated {
            background: linear-gradient(45deg, #dc3545, #e55467);
            box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
            animation: pulse-outdated 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse-fresh {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }
        
        @keyframes pulse-outdated {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.2); }
        }
        
        #dashboard-last-update {
            color: #6c757d;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }
        
        #dashboard-last-update:has(.data-freshness-indicator.outdated) {
            color: #dc3545;
        }
        
        #dashboard-last-update:has(.data-freshness-indicator.fresh) {
            color: #28a745;
        }
        
        /* Стилі для кнопки оновлення */
        .refresh-btn {
            transition: all 0.3s ease;
            border: none;
            background: linear-gradient(45deg, #007bff, #0056b3);
            color: white;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 0.875rem;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .refresh-btn:hover {
            background: linear-gradient(45deg, #0056b3, #004085);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }
        
        .refresh-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
        }
        
        .refresh-btn.updating {
            background: linear-gradient(45deg, #28a745, #34ce57);
            animation: updating-pulse 1s ease-in-out infinite;
            pointer-events: none;
        }
        
        .refresh-btn.updating::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes updating-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    
    <!-- Add our new accessibility CSS -->
    <link rel="stylesheet" href="css/modal-accessibility.css">
    <link rel="stylesheet" href="css/contracts-analytics.css">
    
    <!-- Early Turf.js fix from previous attempts -->
    <script>
        // Ensure turf exists and has booleanValid function
        window.turf = window.turf || {};
        window.turf.booleanValid = window.turf.booleanValid || function(geom) {
            console.log('Using inline booleanValid polyfill');
            return !!(geom && geom.type && geom.coordinates);
        };
        console.log("Early turf.booleanValid polyfill loaded");
    </script>
    
    <!-- Мобільне меню використовує глобальні стилі з smart-navigation.css -->
</head>
<body class="page-home">
    <!-- Argon навбар -->
    <nav class="navbar navbar-expand-lg argon-navbar">
        <div class="container-fluid">
            <a class="navbar-brand argon-navbar-brand" href="index.html">
                <i class="bi bi-flower1 me-2"></i>Агро-простір
            </a>
            
            <button class="navbar-toggler argon-navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link argon-nav-link active" href="index.html">
                            <i class="bi bi-house me-1"></i>Головна
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link argon-nav-link" href="pages/resources.html">
                            <i class="bi bi-geo-alt me-1"></i>Ресурси
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link argon-nav-link" href="pages/my-registry.html">
                            <i class="bi bi-journal-text me-1"></i>Мій реєстр
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link argon-nav-link" href="pages/notes.html">
                            <i class="bi bi-sticky me-1"></i>Замітки
                        </a>
                    </li>
                    <!-- PWA-specific menu item, hidden in browser mode -->
                    <li class="nav-item pwa-only" style="display: none;">
                        <a class="nav-link argon-nav-link" href="pwa-diagnostics.html">
                            <i class="bi bi-gear me-1"></i>Діагностика
                        </a>
                    </li>
                    <!-- Мобільне меню з трьома крапками -->
                    <li class="nav-item dropdown d-lg-none">
                        <a class="nav-link argon-nav-link dropdown-toggle" href="#" id="mobileMenuDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-three-dots-vertical me-1"></i>Меню
                        </a>
                        <ul class="dropdown-menu argon-dropdown-menu" aria-labelledby="mobileMenuDropdown">
                            <li><a class="dropdown-item argon-dropdown-item" href="pages/settings-simple.html">
                                <i class="bi bi-gear me-2"></i>Параметри
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item argon-dropdown-item" href="#" onclick="logout()">
                                <i class="bi bi-box-arrow-right me-2"></i>Вийти
                            </a></li>
                        </ul>
                    </li>
                </ul>
                
                <!-- Argon соціальні мережі в навбарі -->
                <div class="argon-navbar-social d-flex align-items-center me-3">
                    <a href="register.html" class="btn argon-btn-outline btn-sm me-2" title="Зв'язатись з нами">
                        <i class="bi bi-chat-dots"></i>
                    </a>
                    <button id="installPWA-navbar" class="btn argon-btn-outline btn-sm me-2" title="Встановити додаток">
                        <i class="bi bi-download"></i>
                    </button>
                    <a href="https://t.me/agro_workspace" target="_blank" class="btn argon-btn-outline btn-sm me-2" title="Telegram канал">
                        <i class="bi bi-telegram"></i>
                    </a>
                    <a href="https://invite.viber.com/?g2=AQBuIMLOVsXoilGIsOfkdrpF3js8He7%2FBCfBZcO17ahyDSdyOhnIcqH7437QFc6K" target="_blank" class="btn argon-btn-outline btn-sm me-2" title="Viber спільнота">
                        <i class="bi bi-chat"></i>
                    </a>
                </div>
                
                <!-- Argon користувацьке меню (показується після входу) -->
                <div class="navbar-nav" id="userMenu" style="display: none;">
                    <div class="nav-item dropdown">
                        <a class="nav-link argon-nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span id="userName">Користувач</span>
                        </a>
                        <ul class="dropdown-menu argon-dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item argon-dropdown-item" href="cabinet.html">
                                <i class="bi bi-house me-1"></i>Кабінет
                            </a></li>
                            <li><a class="dropdown-item argon-dropdown-item" href="pages/user-settings.html">
                                <i class="bi bi-gear me-1"></i>Налаштування
                            </a></li>
                            <li><a class="dropdown-item argon-dropdown-item" href="pages/settings-simple.html">
                                <i class="bi bi-sliders me-1"></i>Параметри системи
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item argon-dropdown-item" href="#" onclick="logout()">
                                <i class="bi bi-box-arrow-right me-1"></i>Вихід
                            </a></li>
                        </ul>
                    </div>
                </div>
                
                <!-- Argon кнопки авторизації (показуються до входу) -->
                <div class="d-flex" id="authButtons">
                    <a href="login.html" class="btn argon-btn-outline me-2">Увійти</a>
                    <a href="register.html" class="btn argon-btn-primary">Реєстрація</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container-fluid px-0" id="main-content">
        <!-- Hero section -->
        <div class="bg-light py-5 py-md-5 py-3" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
            <div class="container-fluid px-4 px-md-4 px-xl-5">
                <div class="row align-items-center">
                    <div class="col-md-10 col-xl-11 mx-auto text-center">
                        <!-- Контент для незалогінених користувачів -->
                        <div id="hero-guest-content">
                            <h1 class="display-4 fw-bold text-success">Агро-простір</h1>
                            <p class="lead mb-4">Автоматизуйте процеси управління вашими земельними ділянками та підвищіть ефективність агробізнесу</p>
                            <div class="mt-4">
                                <!-- Головні кнопки дії -->
                                <div class="d-flex justify-content-center align-items-center mb-3" style="gap: 1rem; flex-wrap: wrap;">
                                    <a href="register.html" class="btn btn-success btn-lg" style="width: 180px; height: 48px; display: flex; align-items: center; justify-content: center;">
                                        <i class="bi bi-chat-dots me-1"></i> Зв'язатись
                                    </a>
                                    
                                    <!-- PWA Install Button -->
                                    <button id="installPWA" class="btn btn-outline-success btn-lg" style="width: 180px; height: 48px; display: flex; align-items: center; justify-content: center;">
                                        <i class="bi bi-download me-1"></i> Встановити
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Dashboard для залогінених користувачів -->
                        <div id="hero-user-content" style="display: none;">
                            <!-- Прибираємо заголовок -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 📊 ОКРЕМА СЕКЦІЯ ДЛЯ DASHBOARD: Поза Hero для правильного flexbox -->
        <div id="user-dashboard-grid" class="mt-2 mt-md-4" style="display: none;">
                            <!-- 
                                🏢 КАРТКИ ПІДПРИЄМСТВ - ОСНОВНИЙ КОНТЕЙНЕР
                                📖 Повна документація: COMPANY-CARDS-GUIDE.md
                                🎨 Стилі: css/company-cards.css  
                                ⚙️ Рендерер: js/cached-companies-renderer.js
                                🔍 Контейнер ID: #user-companies-container
                            -->
                            <!-- User Companies Section - на самому верху -->
                            <div class="row g-3 g-md-4 justify-content-center mb-2 mb-md-4">
                                <div class="col-12">
                                    <div id="user-companies-container">
                                        <!-- Companies cards will be loaded here -->
                                        <div class="text-center text-muted py-2 py-md-4">
                                            <div class="spinner-border spinner-border-sm me-2" role="status">
                                                <span class="visually-hidden">Завантаження...</span>
                                            </div>
                                            Завантаження даних про підприємства...
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Main Dashboard Cards -->
                            <div class="row g-4 justify-content-center">
                                <!-- Notes Card -->
                                <div class="col-12 col-lg-4">
                                    <div class="card argon-flutter-card argon-card-info h-100" onclick="location.href='pages/notes.html'" style="cursor: pointer;">
                                        <!-- Компактний заголовок з іконкою -->
                                        <div class="argon-card-header">
                                            <div class="argon-icon-wrapper">
                                                <i class="bi bi-journal-check"></i>
                                            </div>
                                            <div class="argon-card-text">
                                                <h5 class="argon-card-title d-flex align-items-center">
                                                    <span>Замітки та задачі</span>
                                                    <i class="bi bi-arrow-right ms-auto" style="font-size: 1rem; opacity: 0.6;"></i>
                                                </h5>
                                                <p class="argon-card-subtitle text-start">Управління нотатками та завданнями</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Компактна статистика -->
                                        <div class="argon-card-content">
                                            <div class="row g-2">
                                                <div class="col-6 col-lg-3">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-sticky argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="dashboard-total-notes">0</div>
                                                        <div class="argon-compact-stat-label">Заміток</div>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-lg-3">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-list-task argon-compact-stat-icon argon-text-primary"></i>
                                                        <div class="argon-compact-stat-number argon-text-primary" id="dashboard-open-tasks">0</div>
                                                        <div class="argon-compact-stat-label">Активних</div>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-lg-3">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-clock-history argon-compact-stat-icon argon-text-warning"></i>
                                                        <div class="argon-compact-stat-number argon-text-warning" id="dashboard-urgent-notes">0</div>
                                                        <div class="argon-compact-stat-label">Терміново</div>
                                                    </div>
                                                </div>
                                                <div class="col-6 col-lg-3">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-check-circle argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="dashboard-completed-tasks">0</div>
                                                        <div class="argon-compact-stat-label">Виконано</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- My Resources Card -->
                                <div class="col-12 col-lg-4">
                                    <div class="card argon-flutter-card argon-card-primary h-100" onclick="location.href='pages/resources.html'">
                                        <!-- Компактний заголовок з іконкою -->
                                        <div class="argon-card-header">
                                            <div class="argon-icon-wrapper">
                                                <i class="bi bi-geo-alt-fill"></i>
                                            </div>
                                            <div class="argon-card-text">
                                                <h4 class="argon-card-title d-flex align-items-center">
                                                    <span>Мої ресурси</span>
                                                    <i class="bi bi-arrow-right ms-auto" style="font-size: 1rem; opacity: 0.6;"></i>
                                                </h4>
                                                <p class="argon-card-subtitle text-start">Перегляд доданих рад та полів</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Компактна статистика -->
                                        <div class="argon-card-content">
                                            <div class="row g-3">
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-map argon-compact-stat-icon argon-text-primary"></i>
                                                        <div class="argon-compact-stat-number argon-text-primary" id="total-territories">-</div>
                                                        <div class="argon-compact-stat-label">Сільських рад</div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-geo argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="total-fields">-</div>
                                                        <div class="argon-compact-stat-label">Полів</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Secondary Card - Мої запити -->
                                <div class="col-12 col-lg-4">
                                    <div class="card argon-flutter-card argon-card-success h-100" onclick="window.location.href='pages/requests.html'">
                                        <!-- Компактний заголовок з іконкою -->
                                        <div class="argon-card-header">
                                            <div class="argon-icon-wrapper">
                                                <i class="bi bi-envelope-paper"></i>
                                            </div>
                                            <div class="argon-card-text">
                                                <h4 class="argon-card-title d-flex align-items-center">
                                                    <span>Мої запити</span>
                                                    <i class="bi bi-arrow-right ms-auto" style="font-size: 1rem; opacity: 0.6;"></i>
                                                </h4>
                                                <p class="argon-card-subtitle text-start">Історія та створення нових запитів</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Компактна статистика -->
                                        <div class="argon-card-content">
                                            <div class="row g-3">
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-inbox argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="total-requests">-</div>
                                                        <div class="argon-compact-stat-label">Всього запитів</div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-calendar-check argon-compact-stat-icon argon-text-primary"></i>
                                                        <div class="argon-compact-stat-number argon-text-primary" id="this-month">-</div>
                                                        <div class="argon-compact-stat-label">Цього місяця</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Companies Stats Card -->
                                <div class="col-12 col-lg-4">
                                    <div class="card argon-flutter-card argon-card-warning h-100">
                                        <!-- Компактний заголовок з іконкою -->
                                        <div class="argon-card-header">
                                            <div class="argon-icon-wrapper">
                                                <i class="bi bi-building"></i>
                                            </div>
                                            <div class="argon-card-text">
                                                <h5 class="argon-card-title d-flex align-items-center">
                                                    <span>Підприємства</span>
                                                </h5>
                                                <p class="argon-card-subtitle text-start">Статистика по ЄДРПОУ та ділянкам</p>
                                            </div>
                                        </div>
                                        
                                        <!-- Компактна статистика -->
                                        <div class="argon-card-content">
                                            <div class="row g-3">
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-building argon-compact-stat-icon argon-text-warning"></i>
                                                        <div class="argon-compact-stat-number argon-text-warning" id="total-companies">-</div>
                                                        <div class="argon-compact-stat-label">Підприємств</div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-geo-alt argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="total-company-parcels">-</div>
                                                        <div class="argon-compact-stat-label">Ділянок</div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-rulers argon-compact-stat-icon argon-text-info"></i>
                                                        <div class="argon-compact-stat-number argon-text-info" id="total-company-parcels-area">-</div>
                                                        <div class="argon-compact-stat-label">Гектарів усього</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 🔍 АНАЛІЗ НЕВІДПОВІДНОСТЕЙ РРП vs ДЗК -->
                                            <hr class="my-3" style="border-color: rgba(255,255,255,0.1);">
                                            <div class="row g-2">
                                                <div class="col-12">
                                                    <small class="text-muted fw-bold">
                                                        <i class="bi bi-search me-1"></i>
                                                        Аналіз РРП vs ДЗК
                                                    </small>
                                                </div>
                                                <div class="col-4">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-check-circle argon-compact-stat-icon argon-text-success"></i>
                                                        <div class="argon-compact-stat-number argon-text-success" id="rrp-dzk-matched">-</div>
                                                        <div class="argon-compact-stat-label">Співпадінь</div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-exclamation-triangle argon-compact-stat-icon argon-text-warning"></i>
                                                        <div class="argon-compact-stat-number argon-text-warning" id="rrp-dzk-missing">-</div>
                                                        <div class="argon-compact-stat-label">Відсутні</div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="argon-compact-stat">
                                                        <i class="bi bi-plus-circle argon-compact-stat-icon argon-text-info"></i>
                                                        <div class="argon-compact-stat-number argon-text-info" id="rrp-dzk-extra">-</div>
                                                        <div class="argon-compact-stat-label">Додаткові</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 🔧 ІНФОРМАЦІЯ ПРО КЕШ І ОНОВЛЕННЯ В НИЗУ КОНТЕНТУ -->
            <div class="cache-info text-center py-3" id="user-dashboard-controls" style="display: none;">
                <button id="dashboard-refresh-btn" 
                        class="btn btn-outline-primary btn-sm refresh-btn" 
                        onclick="forceRefreshDashboard()"
                        title="Примусово оновити всі показники дашборда">
                    <i class="bi bi-arrow-clockwise me-1"></i>
                    Оновити дані
                </button>
                <small class="text-muted ms-3">
                    <i class="bi bi-info-circle me-1"></i>
                    Останнє оновлення: <span id="last-cache-update">-</span>
                </small>
            </div>
        </div>
    </div>

    <!-- Load scripts in optimal order -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    
    <!-- PDF and Canvas libraries for Ukrainian text support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    
    <!-- FIX: Load turf with specific modules needed -->
    <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
    <script src="js/field-analysis.js"></script>
    
    <!-- PDF Reporter for contractor analysis -->
    <script src="js/pdf-reporter.js"></script>
    
    <!-- Contracts Analytics Dashboard -->
    <script src="js/contracts-analytics.js"></script>
    
    <!-- Add one more failsafe before application scripts -->
    <script>
        // Final check to ensure turf.booleanValid exists
        if (typeof turf.booleanValid !== 'function') {
            console.log("FINAL CHECK: Adding turf.booleanValid");
            
            // Use Object.defineProperty to force it to exist
            Object.defineProperty(window.turf, 'booleanValid', {
                value: function(geometry) {
                    return true;
                },
                writable: false,
                configurable: false
            });
        }
        
        // Add a global error handler for this specific error
        window.addEventListener('error', function(event) {
            if (event.error && event.error.toString().includes('turf.booleanValid is not a function')) {
                console.log("CAUGHT turf.booleanValid error in real-time");
                
                // Re-add the function
                try {
                    Object.defineProperty(window.turf, 'booleanValid', {
                        value: function() { return true; },
                        writable: true,
                        configurable: true
                    });
                } catch (e) {
                    // If we can't redefine it, set it directly
                    window.turf.booleanValid = function() { return true; };
                }
                
                // Stop error propagation
                event.preventDefault();
                return true;
            }
        }, true);
    </script>
    
    <!-- PWA Service Worker -->
    <script>
        // Реєстрація Service Worker для PWA
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', async () => {
                try {
                    const registration = await navigator.serviceWorker.register('sw.js');
                    
                    // Перевіряємо поточну версію
                    if (registration.active) {
                        checkSWVersion(registration.active);
                    }
                    
                    // Слухаємо оновлення
                    registration.addEventListener('updatefound', () => {
                        const newWorker = registration.installing;
                        
                        newWorker.addEventListener('statechange', () => {
                            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                // Примусово активуємо новий SW
                                newWorker.postMessage({ type: 'SKIP_WAITING' });
                            }
                        });
                    });
                    
                    // Слухаємо повідомлення про контроль
                    navigator.serviceWorker.addEventListener('controllerchange', () => {
                        window.location.reload(); // Перезавантажуємо сторінку
                    });
                    
                } catch (error) {
                    // Service Worker не підтримується або помилка реєстрації
                }
            });
        }
        
        // Функція для перевірки версії SW
        function checkSWVersion(worker) {
            const channel = new MessageChannel();
            channel.port1.onmessage = (event) => {
                if (event.data.type === 'VERSION_RESPONSE') {
                    // Версія SW отримана
                }
            };
            worker.postMessage({ type: 'GET_VERSION' }, [channel.port2]);
        }
        
        // Функція для примусового оновлення SW
        function updateServiceWorker() {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.getRegistration().then(registration => {
                    if (registration) {
                        registration.update();
                    }
                });
            }
        }
        
        // Функція для очищення кешу
        function clearAllCaches() {
            if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
                navigator.serviceWorker.controller.postMessage({ type: 'CLEAR_CACHE' });
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            }
        }
    </script>
    
    <!-- PWA Install Script -->
    <script>
        let deferredPrompt;
        const installButton = document.getElementById('installPWA');

        // Функція для відображення інструкцій встановлення
        function showInstallInstructions() {
            const modal = document.createElement('div');
            modal.className = 'modal fade';
            modal.innerHTML = `
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header bg-success text-white">
                            <h5 class="modal-title">📱 Встановлення PWA додатку</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>🖥️ На Windows (Chrome/Edge):</h6>
                                    <ol>
                                        <li>Натисніть іконку <strong>⬇️</strong> в адресному рядку</li>
                                        <li>Або Меню → "Встановити Агро-простір"</li>
                                        <li>Підтвердіть встановлення</li>
                                        <li>Додаток з'явиться в меню Пуск</li>
                                    </ol>
                                </div>
                                <div class="col-md-6">
                                    <h6>📱 На Android (Chrome):</h6>
                                    <ol>
                                        <li>Меню браузера (⋮)</li>
                                        <li>"Додати на головний екран"</li>
                                        <li>Або кнопка "Встановити"</li>
                                        <li>Додаток з'явиться на екрані</li>
                                    </ol>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <h6>🍎 На iOS (Safari):</h6>
                                    <ol>
                                        <li>Кнопка "Поділитися" (⬆️)</li>
                                        <li>"На екран 'Домівка'"</li>
                                        <li>Введіть назву</li>
                                        <li>Натисніть "Додати"</li>
                                    </ol>
                                </div>
                                <div class="col-md-6">
                                    <h6>✨ Переваги PWA:</h6>
                                    <ul>
                                        <li>🚀 Швидший запуск</li>
                                        <li>📱 Повноекранний режим</li>
                                        <li>⚡ Офлайн робота</li>
                                        <li>🔄 Автооновлення</li>
                                        <li>🔒 Безпечність</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="alert alert-info mt-3">
                                <strong>💡 Підказка:</strong> Якщо кнопка встановлення не з'являється в браузері, 
                                спробуйте відкрити сайт через HTTPS або локальний сервер.
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрити</button>
                            <a href="PWA-INSTALL-GUIDE.md" class="btn btn-success" target="_blank">Детальна інструкція</a>
                        </div>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            const bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.show();
            
            // Видаляємо модал після закриття
            modal.addEventListener('hidden.bs.modal', () => {
                document.body.removeChild(modal);
            });
        }

        // Перевірка на наявність нативного install промпта
        window.addEventListener('beforeinstallprompt', (e) => {
            console.log('🎯 PWA готовий до встановлення');
            e.preventDefault();
            deferredPrompt = e;
            
            const installButton = document.getElementById('installPWA');
            const navbarInstallButton = document.getElementById('installPWA-navbar');
            
            // Показуємо кнопки з нативним промптом
            if (installButton && !isPWA()) {
                installButton.innerHTML = '<i class="bi bi-download"></i> Встановити зараз';
                installButton.classList.remove('btn-outline-success');
                installButton.classList.add('btn-success');
                installButton.classList.add('show');
                installButton.title = 'Встановити додаток';
                installButton.disabled = false;
            }
            
            if (navbarInstallButton && !isPWA()) {
                navbarInstallButton.style.display = 'flex';
                navbarInstallButton.classList.remove('btn-outline-light');
                navbarInstallButton.classList.add('btn-light');
            }
        });

        // Додаємо PWA статус та логіку показу кнопки
        document.addEventListener('DOMContentLoaded', () => {
            const installButton = document.getElementById('installPWA');
            const navbarInstallButton = document.getElementById('installPWA-navbar');
            
            if (isPWA()) {
                console.log('✅ Запущено як PWA');
                document.body.classList.add('pwa-mode');
                
                // Показуємо PWA-only навігаційні елементи
                const pwaOnlyItems = document.querySelectorAll('.pwa-only');
                pwaOnlyItems.forEach(item => {
                    item.style.display = 'block';
                });
                
                // Якщо запущено як PWA, приховуємо кнопки установки
                if (installButton) {
                    installButton.classList.remove('show');
                }
                if (navbarInstallButton) {
                    navbarInstallButton.style.display = 'none';
                }
            } else {
                console.log('🌐 Запущено в браузері');
                
                // Показуємо кнопки одразу, незалежно від наявності промпта
                if (installButton) {
                    installButton.innerHTML = '<i class="bi bi-download"></i> Встановити зараз';
                    installButton.classList.add('show');
                    installButton.title = 'Встановити додаток';
                }
                
                if (navbarInstallButton) {
                    navbarInstallButton.style.display = 'flex';
                }
                
                // Через 1 секунду перевіряємо, чи є нативний промпт для оновлення стилю
                setTimeout(() => {
                    if (installButton && deferredPrompt) {
                        installButton.classList.remove('btn-outline-success');
                        installButton.classList.add('btn-success');
                    }
                    if (navbarInstallButton && deferredPrompt) {
                        navbarInstallButton.classList.remove('btn-outline-light');
                        navbarInstallButton.classList.add('btn-light');
                    }
                }, 1000);
            }
        });
        
        // Функція для налаштування обробників PWA кнопок
        function setupPWAButtons() {
            const installButton = document.getElementById('installPWA');
            const navbarInstallButton = document.getElementById('installPWA-navbar');
            
            // Функція обробки кліку
            const handleInstallClick = async () => {
                if (deferredPrompt) {
                    console.log('📱 Встановлення PWA...');
                    // Нативне встановлення PWA
                    deferredPrompt.prompt();
                    const { outcome } = await deferredPrompt.userChoice;
                    
                    if (outcome === 'accepted') {
                        console.log('✅ PWA встановлено успішно');
                        if (installButton) installButton.classList.remove('show');
                        if (navbarInstallButton) navbarInstallButton.style.display = 'none';
                    } else {
                        console.log('❌ Користувач відхилив встановлення');
                    }
                    
                    deferredPrompt = null;
                } else {
                    // Показуємо інструкції встановлення
                    showInstallInstructions();
                }
            };
            
            // Додаємо обробники для обох кнопок
            if (installButton) {
                installButton.addEventListener('click', handleInstallClick);
            }
            
            if (navbarInstallButton) {
                navbarInstallButton.addEventListener('click', handleInstallClick);
            }
        }
        
        // Викликаємо функцію налаштування кнопок
        setupPWAButtons();

        // Приховуємо кнопки після успішного встановлення
        window.addEventListener('appinstalled', () => {
            console.log('PWA was installed successfully');
            const installButton = document.getElementById('installPWA');
            const navbarInstallButton = document.getElementById('installPWA-navbar');
            
            if (installButton) {
                installButton.classList.remove('show');
            }
            if (navbarInstallButton) {
                navbarInstallButton.style.display = 'none';
            }
        });

        // Обробник успішного встановлення PWA (видаляємо дублювання)
        window.addEventListener('appinstalled', () => {
            console.log('PWA успішно встановлено');
            deferredPrompt = null;
        });

        // Перевірка, чи запущено як PWA
        function isPWA() {
            return window.matchMedia('(display-mode: standalone)').matches || 
                   window.navigator.standalone === true;
        }
    </script>
    
    <!-- Now load application scripts -->
    <script src="js/config.js"></script>
    <script src="js/auth.js"></script>
    
    <!-- Dashboard Stats API -->
    <script src="js/dashboard-stats-api.js?v=8.5"></script>
    <script src="js/dashboard-stats-integration.js"></script>
    <script src="js/cached-companies-renderer.js?v=9.3"></script>
    <script src="js/consolidated-companies.js"></script>
    <script src="js/dashboard-dev-tools.js"></script>
    
    <script src="js/user-settings.js"></script>
    <script src="js/smart-navigation.js"></script>
    <script src="js/smart-navigation-scroll.js"></script>
    <script src="js/pwa-navigation-stabilizer.js"></script>
    
    <!-- Material Design Auto-Apply для панелі аналізу -->
    <script src="js/material-design-auto-apply.js"></script>

    <!-- Функція рефрешу головної сторінки -->
    <script>
        // Функція рефрешу головної сторінки (локальна версія для index.html)
        function refreshHomePage() {
            console.log('🔄 Refreshing homepage (already on home page)...');
            
            // Для PWA додаємо очищення кешу та форсований рефреш
            if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
                console.log('📱 PWA detected, forcing cache refresh...');
                
                // Очищаємо кеш сторінки
                if ('caches' in window) {
                    caches.delete('agro-space-dynamic-v1.3.6-spatial-filter-enhanced');
                }
                
                // Форсований рефреш з обходом кешу
                window.location.href = 'index.html?refresh=' + Date.now() + '&t=' + Math.random();
            } else {
                // Звичайний рефреш для браузера
                window.location.href = 'index.html?refresh=' + Date.now();
            }
        }

        // Робимо функцію глобальною
        window.refreshHomePage = refreshHomePage;
        
        // Функція виходу з системи
        function logout() {
            if (confirm('Ви дійсно хочете вийти з системи?')) {
                console.log('🚪 Logging out user...');
                
                // Очищаємо локальне сховище
                localStorage.clear();
                sessionStorage.clear();
                
                // Якщо доступний Supabase - робимо signOut
                if (window.supabase && window.supabase.auth) {
                    window.supabase.auth.signOut().then(() => {
                        console.log('✅ Supabase logout successful');
                        window.location.href = 'login.html';
                    }).catch((error) => {
                        console.error('❌ Logout error:', error);
                        // Все одно перенаправляємо на логін
                        window.location.href = 'login.html';
                    });
                } else {
                    // Якщо Supabase недоступний, просто перенаправляємо
                    window.location.href = 'login.html';
                }
            }
        }
        
        // Робимо функцію глобальною
        window.logout = logout;
        
        // Створюємо резервну функцію для компаній прямо в index.html
        window.loadCompaniesCardsInline = async function() {
            console.log('🏢 Inline: Loading companies cards...');
            
            // Спочатку пробуємо кешований рендерер
            if (typeof window.CachedCompaniesRenderer !== 'undefined') {
                console.log('🏢 Inline: Використовуємо кешований рендерер...');
                const renderer = new window.CachedCompaniesRenderer();
                await renderer.renderFromCache();
                return;
            }
            
            console.log('🏢 Inline: Використовуємо резервний метод...');
            
            try {
                if (!window.supabase) {
                    console.warn('❌ Supabase не доступний');
                    return;
                }

                const { data: { user } } = await window.supabase.auth.getUser();
                if (!user) {
                    console.warn('❌ Користувач не авторизований');
                    return;
                }

                const container = document.getElementById('user-companies-container');
                if (!container) {
                    console.warn('⚠️ Контейнер для карток компаній не знайдено');
                    return;
                }

                // Показуємо спінер
                container.innerHTML = `
                    <div class="text-center text-muted py-4">
                        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                        Завантаження даних про підприємства...
                    </div>
                `;

                // Отримуємо налаштування ЄДРПОУ
                const { data: settings, error: settingsError } = await window.supabase
                    .from('user_settings')
                    .select('setting_key, setting_value')
                    .eq('user_id', user.id)
                    .like('setting_key', 'ЄДРПОУ%');

                if (settingsError) {
                    console.error('❌ Помилка отримання ЄДРПОУ:', settingsError);
                    container.innerHTML = `
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-exclamation-triangle display-6 mb-3"></i>
                            <p>Помилка завантаження налаштувань</p>
                        </div>
                    `;
                    return;
                }

                if (!settings || settings.length === 0) {
                    container.innerHTML = `
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-building display-6 mb-3"></i>
                            <p>Підприємства не знайдені</p>
                            <p class="small">Додайте ЄДРПОУ в <a href="pages/settings-simple.html">налаштуваннях</a></p>
                        </div>
                    `;
                    return;
                }

                console.log('📋 Inline: Found EDRPOU settings:', settings.length);

                // Отримуємо унікальні ЄДРПОУ
                const uniqueEdrpou = [...new Set(settings.map(s => s.setting_value))];

                // Завантажуємо дані для кожного ЄДРПОУ
                const companiesData = await Promise.all(
                    uniqueEdrpou.map(async (edrpou) => {
                        try {
                            // Отримуємо дані підприємства
                            const { data: contractor, error: contractorError } = await window.supabase
                                .from('contractors')
                                .select('id, edrpou, name')
                                .eq('edrpou', edrpou)
                                .single();

                            if (contractorError || !contractor) {
                                console.warn(`⚠️ Підприємство з ЄДРПОУ ${edrpou} не знайдено`);
                                return null;
                            }

                            // Отримуємо кількість property_rights
                            const { count, error: countError } = await window.supabase
                                .from('property_rights')
                                .select('*', { count: 'exact', head: true })
                                .eq('edrpou', edrpou);

                            const propertyCount = countError ? 0 : (count || 0);

                            return {
                                edrpou: contractor.edrpou,
                                name: contractor.name,
                                propertyCount,
                                hasData: propertyCount > 0
                            };
                        } catch (error) {
                            console.error(`❌ Помилка для ЄДРПОУ ${edrpou}:`, error);
                            return null;
                        }
                    })
                );

                const validCompanies = companiesData.filter(company => company !== null);
                console.log('✅ Inline: Loaded companies:', validCompanies.length);

                if (validCompanies.length === 0) {
                    container.innerHTML = `
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-building display-6 mb-3"></i>
                            <p>Підприємства не знайдені в базі</p>
                        </div>
                    `;
                    return;
                }

                // Генеруємо HTML
                const html = validCompanies.map(company => {
                    const formattedCount = company.propertyCount.toLocaleString('uk-UA');
                    const statusClass = company.hasData ? 'text-success' : 'text-muted';
                    
                    // Функція для визначення актуальності даних
                    const getDataFreshness = (lastUpdated) => {
                        if (!lastUpdated) return { class: 'stale', text: 'Невідомо', icon: 'bi-question-circle' };
                        
                        const now = new Date();
                        const updated = new Date(lastUpdated);
                        const monthsDiff = (now.getFullYear() - updated.getFullYear()) * 12 + now.getMonth() - updated.getMonth();
                        
                        if (monthsDiff <= 1) {
                            return { class: 'fresh', text: 'Актуальні', icon: 'bi-check-circle' };
                        } else if (monthsDiff <= 2) {
                            return { class: 'moderate', text: 'Помірно актуальні', icon: 'bi-clock' };
                        } else {
                            return { class: 'stale', text: 'Застарілі', icon: 'bi-exclamation-triangle' };
                        }
                    };
                    
                    // Приблизна дата останнього оновлення (потрібно отримати з бази даних)
                    // Тимчасово використовуємо випадкову дату для демонстрації
                    const mockDate = new Date(Date.now() - Math.floor(Math.random() * 90) * 24 * 60 * 60 * 1000);
                    const freshness = getDataFreshness(mockDate);
                    
                    // Текст для tooltip
                    const getTooltipText = (freshness, lastUpdate) => {
                        const dateStr = lastUpdate ? new Date(lastUpdate).toLocaleDateString('uk-UA') : 'невідома';
                        switch(freshness.class) {
                            case 'fresh':
                                return `Дані актуальні (оновлено ${dateStr})`;
                            case 'moderate':
                                return `Дані помірно актуальні (оновлено ${dateStr})`;
                            case 'stale':
                                return `Дані застарілі (оновлено ${dateStr})`;
                            default:
                                return `Актуальність невідома (дата оновлення: ${dateStr})`;
                        }
                    };
                    
                    const tooltipText = getTooltipText(freshness, mockDate);

                    // Використовуємо новий дизайн прогрес бару для резервної функції
                    const count = company.propertyCount;
                    const rrpCount = count;
                    const dzkCount = Math.floor(count * 0.95); // Імітуємо ДЗК дані
                    const difference = Math.abs(rrpCount - dzkCount);
                    const total = rrpCount + dzkCount;
                    const percentDiff = rrpCount > 0 ? ((difference / rrpCount) * 100).toFixed(1) : '0.0';
                    
                    // Розрахунок відсотків для прогрес бару
                    let rrpPercent = 50;
                    let dzkPercent = 50;
                    
                    if (total > 0) {
                        rrpPercent = Math.round((rrpCount / total) * 100);
                        dzkPercent = Math.round((dzkCount / total) * 100);
                    }
                    
                    // Мінімальна ширина для читабельності
                    if (rrpPercent < 20 && rrpPercent > 0) rrpPercent = 20;
                    if (dzkPercent < 20 && dzkPercent > 0) dzkPercent = 20;
                    if (rrpPercent + dzkPercent > 100) {
                        const scale = 100 / (rrpPercent + dzkPercent);
                        rrpPercent = Math.round(rrpPercent * scale);
                        dzkPercent = Math.round(dzkPercent * scale);
                    }
                    
                    // Позиція перегородки
                    const dividerPosition = rrpPercent;
                    
                    // Статус різниці з базовою інформацією про невідповідності
                    const getDifferenceStatus = () => {
                        if (difference === 0) {
                            return {
                                badgeClass: 'perfect',
                                icon: 'bi-check-circle-fill',
                                text: 'Повний збіг реєстрів',
                                detailText: 'Кількість записів РРП та ДЗК співпадає'
                            };
                        } else if (rrpCount > dzkCount) {
                            const missingCount = rrpCount - dzkCount;
                            return {
                                badgeClass: 'warning',
                                icon: 'bi-search',
                                text: `Відсутні ділянки: ${missingCount} з ${rrpCount}`,
                                detailText: `Можливо відсутні кадастрові номери в ДЗК: ${missingCount}`
                            };
                        } else {
                            const extraCount = dzkCount - rrpCount;
                            return {
                                badgeClass: 'info',
                                icon: 'bi-plus-circle',
                                text: `Додаткові ділянки: +${extraCount} в ДЗК`,
                                detailText: `Більше ділянок в ДЗК ніж записів в РРП: ${extraCount}`
                            };
                        }
                    };

                    const diffStatus = getDifferenceStatus();
                    const dateText = mockDate.toLocaleDateString('uk-UA');

                    return `
                        <div class="col-12 col-lg-6 mb-4">
                            <div class="progress-comparison-card">
                                <!-- Заголовок карти -->
                                <div class="progress-card-header">
                                    <div class="progress-company-name" title="${company.name}">
                                        ${company.name}
                                    </div>
                                    <div class="progress-edrpou">${company.edrpou || 'Не вказано'}</div>
                                </div>
                                
                                <!-- Індикатор різниці зверху -->
                                <div class="difference-indicator-top ${diffStatus.badgeClass}">
                                    <i class="bi ${diffStatus.icon}"></i>
                                    ${diffStatus.text}
                                </div>
                                
                                <!-- Детальна інформація про причини невідповідностей -->
                                ${diffStatus.detailText ? `
                                <div class="mismatch-details mt-2 p-2 bg-light rounded">
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>
                                        ${diffStatus.detailText}
                                    </small>
                                </div>
                                ` : ''}
                                
                                <!-- Лейбли значень -->
                                <div class="progress-labels">
                                    <div class="progress-label-left">
                                        <i class="bi bi-journal-bookmark"></i>
                                        <span>РРП: ${rrpCount.toLocaleString()}</span>
                                    </div>
                                    <div class="progress-label-right">
                                        <i class="bi bi-map"></i>
                                        <span>ДЗК: ${dzkCount.toLocaleString()}</span>
                                    </div>
                                </div>
                                
                                <!-- Подвійний прогрес бар -->
                                <div class="dual-progress-container">
                                    <div class="dual-progress-bar">
                                        <!-- Сегмент РРП -->
                                        <div class="progress-segment-rrp" style="width: ${rrpPercent}%;">
                                            <span class="segment-label">РРП</span>
                                            <span class="segment-value">${rrpCount.toLocaleString()}</span>
                                        </div>
                                        
                                        <!-- Сегмент ДЗК -->
                                        <div class="progress-segment-dzk" style="width: ${dzkPercent}%;">
                                            <span class="segment-label">ДЗК</span>
                                            <span class="segment-value">${dzkCount.toLocaleString()}</span>
                                        </div>
                                        
                                        <!-- Перегородка -->
                                        <div class="progress-divider" style="left: ${dividerPosition}%;"></div>
                                    </div>
                                </div>
                                
                                <!-- Детальна інформація -->
                                <div class="progress-details">
                                    <div class="progress-detail-item">
                                        <i class="bi bi-pie-chart text-primary"></i>
                                        <span>РРП: <span class="progress-percentage">${rrpPercent}%</span></span>
                                    </div>
                                    <div class="progress-detail-item">
                                        <i class="bi bi-calendar3 text-muted"></i>
                                        <span>${dateText}</span>
                                    </div>
                                    <div class="progress-detail-item">
                                        <i class="bi bi-pie-chart text-success"></i>
                                        <span>ДЗК: <span class="progress-percentage">${dzkPercent}%</span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');

                container.innerHTML = `<div class="row g-4">${html}</div>`;
                console.log('✅ Inline: Companies cards displayed');
                
                // Застосовуємо фіксацію статистики після створення карток
                if (window.innerWidth <= 991.98) {
                    fixMobileStatistics();
                }

            } catch (error) {
                console.error('❌ Inline companies loading error:', error);
                const container = document.getElementById('user-companies-container');
                if (container) {
                    container.innerHTML = `
                        <div class="text-center text-danger py-4">
                            <i class="bi bi-exclamation-triangle display-6 mb-3"></i>
                            <p>Помилка завантаження даних</p>
                        </div>
                    `;
                }
            }
        };
    </script>

    <!-- Скрипт для обробки переходу на карту -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔄 index.html DOMContentLoaded: Starting...');
            
            // Форсоване оновлення Service Worker для нової версії
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.getRegistrations().then(function(registrations) {
                    for(let registration of registrations) {
                        console.log('🔄 Force updating Service Worker...');
                        registration.update();
                    }
                });
                
                // Очищуємо старі кеші
                if ('caches' in window) {
                    caches.keys().then(function(cacheNames) {
                        return Promise.all(
                            cacheNames.filter(function(cacheName) {
                                return cacheName.includes('agro-space') && !cacheName.includes('v1.3.8');
                            }).map(function(cacheName) {
                                console.log('🗑️ Deleting old cache:', cacheName);
                                return caches.delete(cacheName);
                            })
                        );
                    });
                }
            }
            
            // Ініціалізуємо userSettings для карток підприємств
            if (typeof UserSettings !== 'undefined') {
                window.userSettings = new UserSettings();
                console.log('✅ UserSettings ініціалізовано на головній сторінці');
            } else {
                console.warn('⚠️ UserSettings клас не знайдено');
            }
            
            // Перевіряємо, чи був запит на рефреш
            const urlParams = new URLSearchParams(window.location.search);
            const refreshParam = urlParams.get('refresh');
            const tParam = urlParams.get('t'); // додатковий параметр для PWA
            
            // Спочатку відновлюємо статистику з кешу для швидкого відображення
            if (typeof window.restoreDashboardStatisticsFromCache === 'function') {
                setTimeout(() => {
                    console.log('🔄 index.html: Restoring from cache...');
                    window.restoreDashboardStatisticsFromCache();
                }, 500);
            }
            
            // Додаємо гарантований виклик статистики через 1 секунду
            setTimeout(async () => {
                console.log('🎯 index.html: Guaranteed statistics call...');
                
                // Перевіряємо чи користувач залогінений
                if (window.supabase && window.supabase.auth) {
                    try {
                        const { data: { user } } = await window.supabase.auth.getUser();
                        const dashboardGrid = document.getElementById('user-dashboard-grid');
                        
                        if (user && dashboardGrid && dashboardGrid.style.display !== 'none') {
                            console.log('✅ index.html: User authenticated and dashboard visible');
                            
                            // Статистика завантажується через updateAuthUI, тут лише перевіряємо доступність
                            console.log('🔍 index.html: Function availability check:', {
                                loadDashboardStatistics: typeof window.loadDashboardStatistics,
                                reloadDashboardStatistics: typeof window.reloadDashboardStatistics,
                                supabase: typeof window.supabase,
                                auth: window.supabase ? typeof window.supabase.auth : 'N/A'
                            });
                            
                            // Дублюючий виклик прибрано - статистика завантажується через updateAuthUI
                            
            // Ініціалізація кешованого рендерера карток підприємств
            console.log('🏢 index.html: Initializing cached companies renderer...');
            if (typeof window.CachedCompaniesRenderer !== 'undefined') {
                window.cachedCompaniesRenderer = new window.CachedCompaniesRenderer();
                console.log('✅ index.html: CachedCompaniesRenderer initialized');
            } else {
                console.warn('⚠️ index.html: CachedCompaniesRenderer not found');
            }
            
            // Картки компаній завантажуються в loadDashboardStatistics разом зі статистикою
            console.log('🏢 index.html: Companies cards will be loaded via loadDashboardStatistics');
            
            // Оновлюємо стилі карток підприємств до нового прогрес бар дизайну
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'childList') {
                        const companyContainer = document.getElementById('user-companies-container');
                        if (companyContainer) {
                            // Знаходимо всі старі картки і оновлюємо їх стилі до нового дизайну
                            const oldCards = companyContainer.querySelectorAll('.card.border-0.shadow-sm, .argon-company-card');
                            oldCards.forEach(card => {
                                if (!card.classList.contains('progress-comparison-card')) {
                                    // Замінюємо класи на новий прогрес бар дизайн
                                    card.className = 'progress-comparison-card';
                                    console.log('✅ Updated company card to progress bar style');
                                }
                            });
                        }
                    }
                });
            });
            
            // Спостерігаємо за змінами в контейнері карток
            const companyContainer = document.getElementById('user-companies-container');
            if (companyContainer) {
                observer.observe(companyContainer, { 
                    childList: true, 
                    subtree: true 
                });
            }                            // Якщо основні функції недоступні, пробуємо прямий виклик
                            if (typeof window.loadDashboardStatistics !== 'function' && typeof window.reloadDashboardStatistics !== 'function') {
                                console.warn('⚠️ index.html: Dashboard functions not available! Available functions:', Object.keys(window).filter(key => key.includes('dashboard') || key.includes('Dashboard')));
                                
                                // Пробуємо викликати функцію безпосередньо з auth.js
                                if (window.supabase && window.supabase.auth) {
                                    console.log('🔄 index.html: Trying direct statistics loading...');
                                    
                                    // Прямий виклик завантаження статистики
                                    (async () => {
                                        try {
                                            const { data: { user: currentUser } } = await window.supabase.auth.getUser();
                                            if (!currentUser) return;
                                            
                                            console.log('👤 Direct call: User:', currentUser.email);
                                            
                                            // Завантажуємо статистику запитів
                                            const { data: allRequests, error: requestsError } = await window.supabase
                                                .from('user_requests')
                                                .select('created_at')
                                                .eq('email', currentUser.email);
                                                
                                            if (!requestsError && allRequests) {
                                                const totalElement = document.getElementById('total-requests');
                                                if (totalElement) {
                                                    totalElement.textContent = allRequests.length;
                                                    console.log('✅ Direct call: Updated total-requests:', allRequests.length);
                                                }
                                                
                                                // Запити цього місяця
                                                const thisMonth = new Date();
                                                thisMonth.setDate(1);
                                                thisMonth.setHours(0, 0, 0, 0);
                                                
                                                const thisMonthCount = allRequests.filter(request => {
                                                    const requestDate = new Date(request.created_at);
                                                    return requestDate >= thisMonth;
                                                }).length;
                                                
                                                const thisMonthElement = document.getElementById('this-month');
                                                if (thisMonthElement) {
                                                    thisMonthElement.textContent = thisMonthCount;
                                                    console.log('✅ Direct call: Updated this-month:', thisMonthCount);
                                                }
                                            }
                                            
                                            // Завантажуємо статистику територій
                                            const { data: permissions, error: permissionsError } = await window.supabase
                                                .from('user_permissions')
                                                .select('id, namecoatuu')
                                                .eq('user_id', currentUser.id);
                                                
                                            if (!permissionsError && permissions) {
                                                const totalTerritoriesElement = document.getElementById('total-territories');
                                                if (totalTerritoriesElement) {
                                                    totalTerritoriesElement.textContent = permissions.length;
                                                    console.log('✅ Direct call: Updated total-territories:', permissions.length);
                                                }
                                                
                                                const activeTerritoriesElement = document.getElementById('active-territories');
                                                if (activeTerritoriesElement) {
                                                    activeTerritoriesElement.textContent = permissions.length;
                                                    console.log('✅ Direct call: Updated active-territories:', permissions.length);
                                                }
                                            }
                                            
                                            // Завантажуємо картки компаній
                                            // Спочатку пробуємо кешований рендерер
                                            if (typeof window.CachedCompaniesRenderer !== 'undefined') {
                                                console.log('🏢 Direct call: Loading cached companies renderer...');
                                                const renderer = new window.CachedCompaniesRenderer();
                                                await renderer.renderFromCache();
                                            } else if (typeof updateCompaniesCards === 'function') {
                                                console.log('🏢 Direct call: Loading companies cards...');
                                                await updateCompaniesCards();
                                            } else if (typeof window.updateCompaniesCards === 'function') {
                                                console.log('🏢 Direct call: Loading window.updateCompaniesCards...');
                                                await window.updateCompaniesCards();
                                            } else {
                                                console.warn('⚠️ updateCompaniesCards function not available in direct call');
                                                // Прямий виклик функції компаній
                                                console.log('🔄 Direct call: Trying manual companies loading...');
                                                
                                                // Ручне завантаження компаній
                                                const companiesContainer = document.getElementById('user-companies-container');
                                                if (companiesContainer && currentUser) {
                                                    try {
                                                        const { data: settings, error } = await window.supabase
                                                            .from('user_settings')
                                                            .select('setting_key, setting_value')
                                                            .eq('user_id', currentUser.id)
                                                            .like('setting_key', 'ЄДРПОУ%');
                                                        
                                                        if (!error && settings && settings.length > 0) {
                                                            console.log('🏢 Manual: Found EDRPOU settings:', settings.length);
                                                            // Показуємо спінер
                                                            companiesContainer.innerHTML = `
                                                                <div class="text-center text-muted py-4">
                                                                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                                                                    Завантаження даних про підприємства...
                                                                </div>
                                                            `;
                                                        }
                                                    } catch (error) {
                                                        console.error('❌ Manual companies loading error:', error);
                                                    }
                                                }
                                            }
                                            
                                        } catch (error) {
                                            console.error('❌ Direct call error:', error);
                                        }
                                    })();
                                }
                            }
                        }
                    } catch (error) {
                        console.error('❌ Direct call error:', error);
                    }
                }
            }, 1000); // Зменшили затримку до 1 секунди для швидшого відгуку
            
            // Fallback виклики видалено - основна система працює через updateAuthUI -> loadDashboardStatistics
            
            if (refreshParam || tParam) {
                console.log('🔄 Detected refresh parameter, reloading dashboard statistics...');
                // Очищаємо URL від параметрів refresh та t
                const newUrl = window.location.pathname;
                window.history.replaceState({}, '', newUrl);
                
                // Для PWA додаємо примусове оновлення
                if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
                    console.log('📱 PWA mode: forcing data refresh...');
                    
                    // Примусово оновлюємо Service Worker
                    navigator.serviceWorker.controller.postMessage({
                        command: 'SKIP_WAITING'
                    });
                }
                
                // Форсуємо перезавантаження статистики через більшу затримку
                setTimeout(() => {
                    console.log('🔍 Refresh: Checking function availability...');
                    console.log('Functions available:', {
                        loadDashboardStatistics: typeof window.loadDashboardStatistics,
                        reloadDashboardStatistics: typeof window.reloadDashboardStatistics
                    });
                    
                    // ВИДАЛЕНО ДОДАТКОВИЙ ВИКЛИК - dashboard завантажується через updateAuthUI -> loadDashboardStatistics
                    console.log('ℹ️ Dashboard статистика завантажується автоматично через auth.js');
                    console.log('ℹ️ Подвійний виклик видалено для запобігання дублювання аналізу GeoJSON');
                        
                }, 2000); // Збільшили затримку для PWA
            }
            
            // Знаходимо посилання на карту
            const mapLink = document.querySelector('a[data-page="map"]');
            
            if (mapLink) {
                mapLink.addEventListener('click', function(e) {
                    e.preventDefault(); // Запобігаємо стандартному переходу
                    
                    // Перевіряємо чи є збережена територія
                    const savedTerritory = localStorage.getItem('agro-current-territory');
                    
                    if (savedTerritory) {
                        // Якщо є збережена територія - переходимо з параметром
                        try {
                            const territory = JSON.parse(savedTerritory);
                            window.location.href = `pages/map.html?coatuu=${territory.coatuu}`;
                        } catch (error) {
                            // Якщо помилка парсингу - очищаємо і переходимо без параметра
                            localStorage.removeItem('agro-current-territory');
                            window.location.href = 'pages/map.html';
                        }
                    } else {
                        // Якщо немає збереженої території - переходимо без параметра
                        // Territory Manager на сторінці карти покаже селектор
                        window.location.href = 'pages/map.html';
                    }
                });
            }
            
            // ✅ Додаємо обробник кліків для кнопок модального вікна аналізу невідповідностей
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-mismatch-details')) {
                    const btn = e.target.closest('.btn-mismatch-details');
                    const edrpou = btn.dataset.edrpou;
                    const companyName = btn.dataset.companyName;
                    
                    console.log('🔍 Clicked mismatch details button for:', edrpou, companyName);
                    
                    if (typeof window.showMismatchDetails === 'function') {
                        window.showMismatchDetails(edrpou, companyName);
                    } else {
                        console.error('❌ showMismatchDetails function not found');
                    }
                }
            });
            
            console.log('✅ index.html: Added mismatch details button handler');
        });
    </script>

    <!-- Уніфіковане мобільне нижнє меню з Smart Navigation -->
    
    <nav class="mobile-bottom-nav">
        <a href="pages/map.html" class="mobile-nav-item" data-page="map">
            <i class="bi bi-map"></i>
            <span>Карта</span>
        </a>
        <a href="pages/my-registry.html" class="mobile-nav-item" data-page="my-registry">
            <i class="bi bi-journal-text"></i>
            <span>Реєстр</span>
        </a>
        <a href="index.html" class="mobile-nav-item active" data-page="home">
            <i class="bi bi-house-fill"></i>
            <span>Головна</span>
        </a>
        <a href="pages/notes.html" class="mobile-nav-item" data-page="notes">
            <i class="bi bi-sticky"></i>
            <span>Замітки</span>
        </a>
        <a href="pages/requests.html" class="mobile-nav-item" data-page="requests">
            <i class="bi bi-chat-dots"></i>
            <span>Запити</span>
        </a>
        <!-- Smart Navigation Dropdown меню з функціями головної сторінки -->
        <div class="mobile-nav-item dropdown" data-page="menu">
            <button class="btn btn-link p-0 text-center w-100 h-100 d-flex flex-column align-items-center justify-content-center" type="button" id="mobileBottomMenuDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-three-dots-vertical"></i>
                <span>Меню</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="mobileBottomMenuDropdown">
                <!-- Основні розділи -->
                <li><a class="dropdown-item" href="pages/map.html" onclick="goToMapWithTerritory()">
                    <i class="bi bi-map text-primary"></i>Карта
                </a></li>
                <li><a class="dropdown-item" href="pages/my-registry.html">
                    <i class="bi bi-journal-bookmark text-warning"></i>Мій реєстр
                </a></li>
                <li><a class="dropdown-item" href="pages/notes.html">
                    <i class="bi bi-sticky text-success"></i>Замітки
                </a></li>
                <li><a class="dropdown-item" href="pages/resources.html">
                    <i class="bi bi-geo-alt text-info"></i>Ресурси
                </a></li>
                <li><hr class="dropdown-divider"></li>
                <!-- Система -->
                <li><a class="dropdown-item" href="#" onclick="logout()">
                    <i class="bi bi-box-arrow-right text-danger"></i>Вийти
                </a></li>
            </ul>
        </div>
    </nav>

    <!-- JavaScript для мобільного меню -->
    <script>
        // Функція для переходу на карту з урахуванням збереженої території
        function goToMapWithTerritory() {
            const savedTerritory = localStorage.getItem('agro-current-territory');
            if (savedTerritory) {
                try {
                    const territory = JSON.parse(savedTerritory);
                    window.location.href = `pages/map.html?coatuu=${territory.coatuu}`;
                } catch (error) {
                    localStorage.removeItem('agro-current-territory');
                    window.location.href = 'pages/map.html';
                }
            } else {
                window.location.href = 'pages/map.html';
            }
        }

        // Функція logout (якщо не існує)
        if (typeof logout === 'undefined') {
            function logout() {
                if (window.supabase && window.supabase.auth) {
                    window.supabase.auth.signOut().then(() => {
                        window.location.href = 'login.html';
                    }).catch(() => {
                        window.location.href = 'login.html';
                    });
                } else {
                    window.location.href = 'login.html';
                }
            }
        }

        // Робимо функції доступними глобально
        window.goToMapWithTerritory = goToMapWithTerritory;
        if (typeof window.logout === 'undefined') {
            window.logout = logout;
        }
    </script>

    <!-- Модальне вікно аналітики договорів -->
    <div class="modal fade" id="contractsAnalyticsModal" tabindex="-1" aria-labelledby="contractsAnalyticsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="contractsAnalyticsModalLabel">
                        <i class="bi bi-graph-up me-2"></i>
                        Аналітика договорів оренди
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрити"></button>
                </div>
                
                <!-- Стан завантаження -->
                <div id="analyticsLoading" class="text-center py-5" style="display: none;">
                    <div class="spinner-border text-info" role="status">
                        <span class="visually-hidden">Завантаження...</span>
                    </div>
                    <p class="mt-3 text-muted">Обробка даних договорів...</p>
                </div>
                
                <!-- Стан помилки -->
                <div id="analyticsError" class="text-center py-5" style="display: none;">
                    <i class="bi bi-exclamation-triangle display-1 text-warning"></i>
                    <h5 class="mt-3">Помилка завантаження</h5>
                    <p class="text-muted" id="analyticsErrorText">Не вдалося завантажити дані для аналітики</p>
                    <button class="btn btn-outline-info" onclick="window.contractsAnalytics.showAnalytics()">
                        <i class="bi bi-arrow-clockwise me-2"></i>Спробувати знову
                    </button>
                </div>
                
                <!-- Основний контент -->
                <div id="analyticsContent" class="modal-body" style="display: none;">
                    <!-- Фільтри та експорт -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label for="yearFilter" class="form-label">Фільтр по роках:</label>
                            <select class="form-select" id="yearFilter">
                                <option value="all">Всі роки</option>
                                <option value="critical">Критичні (≤3 роки)</option>
                                <option value="expired">Прострочені</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="tenantSearch" class="form-label">Пошук орендаря:</label>
                            <input type="text" class="form-control" id="tenantSearch" placeholder="Введіть назву орендаря...">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <button class="btn btn-success w-100" id="exportAnalytics">
                                <i class="bi bi-download me-2"></i>Експорт в Excel
                            </button>
                        </div>
                    </div>
                    
                    <!-- Загальна статистика -->
                    <div class="row mb-4" id="generalStats">
                        <!-- Статистика буде додана динамічно -->
                    </div>
                    
                    <!-- Критичні роки -->
                    <div class="mb-4">
                        <h6 class="mb-3">
                            <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                            Критичні роки (закінчення ≤3 роки)
                        </h6>
                        <div class="row" id="criticalYearsCards">
                            <!-- Картки критичних років будуть додані динамічно -->
                        </div>
                    </div>
                    
                    <!-- Хітмап таблиця -->
                    <div class="mb-4">
                        <h6 class="mb-3">
                            <i class="bi bi-table text-info me-2"></i>
                            Розподіл договорів по орендарям та рокам
                        </h6>
                        <div class="table-responsive" id="heatmapTableContainer">
                            <!-- Таблиця буде додана динамічно -->
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрити</button>
                </div>
            </div>
        </div>
    </div>

    <!-- � ДЕБАГ: Активація Simple Flexbox Layout -->
    <script>
        // Активуємо простий flexbox для ВСІХ пристроїв
        function activateMobileFlexboxLayout() {
            const isMobile = window.innerWidth <= 991.98;
            const html = document.documentElement;
            const body = document.body;
            
            // ЗАВЖДИ активуємо flexbox layout
            html.classList.add('mobile-flexbox-layout');
            
            // Додаємо фіксацію статистики на мобільних
            if (isMobile) {
                body.classList.add('mobile-flexbox-active');
                fixMobileStatistics();
            } else {
                body.classList.remove('mobile-flexbox-active');
            }
            
            if (isMobile) {
                console.log('📱 ✅ АКТИВОВАНО Simple Flexbox Layout (МОБІЛЬНИЙ)');
                console.log('🔍 Ширина екрану:', window.innerWidth);
                console.log('🔍 HTML клас додано:', html.className);
                
                // Перевіряємо чи є потрібні елементи
                setTimeout(() => {
                    const userDashboard = document.querySelector('#user-dashboard-grid');
                    const userCompanies = document.querySelector('#user-companies-container');
                    console.log('🔍 #user-dashboard-grid знайдено:', !!userDashboard);
                    console.log('🔍 #user-companies-container знайдено:', !!userCompanies);
                    
                    if (userDashboard) {
                        console.log('🔍 Dashboard display:', getComputedStyle(userDashboard).display);
                    }
                    if (userCompanies) {
                        console.log('🔍 Companies display:', getComputedStyle(userCompanies).display);
                    }
                }, 500);
                
                // Перевіряємо flexbox властивості
                setTimeout(() => {
                    const navbar = document.querySelector('.navbar');
                    const mainContent = document.querySelector('#main-content');
                    const mobileMenu = document.querySelector('.mobile-bottom-nav');
                    
                    console.log('🔍 FLEXBOX ДЕБАГ:');
                    console.log('Body display:', getComputedStyle(body).display);
                    console.log('Body flex-direction:', getComputedStyle(body).flexDirection);
                    console.log('Body height:', getComputedStyle(body).height);
                    
                    if (mainContent) {
                        console.log('Main flex:', getComputedStyle(mainContent).flex);
                        console.log('Main height:', getComputedStyle(mainContent).height);
                    }
                    
                    if (mobileMenu) {
                        console.log('Menu flex-shrink:', getComputedStyle(mobileMenu).flexShrink);
                        console.log('Menu height:', getComputedStyle(mobileMenu).height);
                    }
                }, 100);
            } else {
                console.log('💻 ✅ АКТИВОВАНО Simple Flexbox Layout (ДЕСКТОП)');
                console.log('� Ширина екрану:', window.innerWidth);
                console.log('🔍 HTML клас активний:', html.className);
            }
        }
        
        // Фіксація статистики ТІЛЬКИ в картках компаній з блочною структурою
        function fixMobileStatistics() {
            setTimeout(() => {
                // Знаходимо ТІЛЬКИ картки компаній з новим дизайном
                const companyCards = document.querySelectorAll('.progress-comparison-card');
                let fixedElements = 0;
                
                companyCards.forEach(card => {
                    // Налаштовуємо контейнер статистики - КОМПАКТНО
                    const statContainer = card.querySelector('.argon-stat-container');
                    if (statContainer) {
                        statContainer.style.setProperty('display', 'flex', 'important');
                        statContainer.style.setProperty('flex-direction', 'column', 'important');
                        statContainer.style.setProperty('gap', '10px', 'important');
                        statContainer.style.setProperty('padding', '12px', 'important');
                    }
                    
                    // Налаштовуємо всі блоки статистики - КОМПАКТНО
                    const statBlocks = card.querySelectorAll('.stat-block');
                    statBlocks.forEach(block => {
                        block.style.setProperty('padding', '10px', 'important');
                        block.style.setProperty('margin-bottom', '8px', 'important');
                        block.style.setProperty('border-radius', '8px', 'important');
                        block.style.setProperty('min-height', 'auto', 'important');
                        fixedElements++;
                    });
                    
                    // Фіксуємо числові значення в блоках - ШИРШІ І БІЛЬШІ
                    const statNumbers = card.querySelectorAll('.argon-stat-number, .text-info, .fw-bold, [class*="text-"]');
                    statNumbers.forEach(element => {
                        if (element.textContent && element.textContent.match(/\d/)) {
                            element.style.setProperty('font-size', '1.4rem', 'important');
                            element.style.setProperty('font-weight', '700', 'important');
                            element.style.setProperty('letter-spacing', '1px', 'important');
                            element.style.setProperty('padding', '8px 12px', 'important');
                            element.style.setProperty('margin', '4px 0', 'important');
                            element.style.setProperty('white-space', 'nowrap', 'important');
                            element.style.setProperty('word-break', 'keep-all', 'important');
                            element.style.setProperty('text-align', 'center', 'important');
                            element.style.setProperty('display', 'inline-block', 'important');
                            element.style.setProperty('background', 'rgba(255, 255, 255, 0.2)', 'important');
                            element.style.setProperty('border-radius', '6px', 'important');
                            element.style.setProperty('box-shadow', '0 1px 3px rgba(0,0,0,0.1)', 'important');
                            fixedElements++;
                        }
                    });
                    
                    // Фіксуємо підписи
                    const statSubtitles = card.querySelectorAll('.argon-card-subtitle');
                    statSubtitles.forEach(element => {
                        element.style.setProperty('white-space', 'nowrap', 'important');
                        element.style.setProperty('word-break', 'keep-all', 'important');
                        element.style.setProperty('font-size', '1rem', 'important');
                        element.style.setProperty('font-weight', '600', 'important');
                        fixedElements++;
                    });
                    
                    // Фіксуємо індикатор різниці
                    const freshnessIndicators = card.querySelectorAll('.data-freshness-indicator');
                    freshnessIndicators.forEach(element => {
                        element.style.setProperty('white-space', 'nowrap', 'important');
                        element.style.setProperty('word-break', 'keep-all', 'important');
                        element.style.setProperty('text-align', 'center', 'important');
                        fixedElements++;
                    });
                });
                
                console.log('🔧 Застосовано блочну структуру для статистики в', companyCards.length, 'картках компаній (' + fixedElements + ' елементів)');
            }, 100);
        }
        
        // Активуємо при завантаженні
        document.addEventListener('DOMContentLoaded', activateMobileFlexboxLayout);
        
        // Активуємо при зміні розміру екрану
        window.addEventListener('resize', activateMobileFlexboxLayout);
        
        // Активуємо зразу
        activateMobileFlexboxLayout();
    </script>

</body>
</html>
