/* --- ГЛОБАЛЬНІ КОЛЬОРИ ПРОЄКТУ --- */
:root { 
    --primary: #1e293b; 
    --secondary: #334155; 
    --bg-light: #f1f5f9; 
    --text-main: #334155;
    --accent-blue: #3b82f6; 
    --accent-green: #10b981; 
}
/* --- MOBILE ADAPTATION (Адаптація під смартфони як у BUD PRO) --- */
@media (max-width: 768px) {
    /* 1. Верхнє меню */
    .sidebar {
        width: 100%;
        height: auto;
        flex-direction: row; /* Кнопки в рядок */
        position: fixed;
        top: 0;
        left: 0;
        bottom: auto; /* Скасовуємо прив'язку до низу, якщо була */
        padding: 10px 15px;
        z-index: 1000;
        overflow-x: auto; /* Дозволяє свайпати меню вліво-вправо */
        white-space: nowrap;
        align-items: flex-start;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        gap: 15px; /* Відстань між пунктами меню */
    }
    
    .logo {
        display: none; /* Ховаємо лого на телефоні */
    }

    /* 2. Кнопки меню: іконка зверху, текст знизу */
    .nav-item {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px;
        margin-bottom: 0;
        font-size: 11px; /* Дрібний текст як на скріні */
        color: #cbd5e1;
        position: relative; /* Для позиціонування жовтої лінії */
    }

    /* Дизайн активної кнопки (жовта лінія зліва) */
    .nav-item.active {
        background-color: transparent;
        color: white;
    }
    .nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        height: 70%;
        width: 4px;
        background-color: #fbbf24; /* Жовтий колір BUD PRO */
        border-radius: 4px;
    }

    /* 3. Головний контент */
    .main-content {
        margin-left: 0;
        padding: 15px;
        padding-top: 100px; /* Відступ під верхнє меню */
    }

    /* 4. Шапка сайту */
    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .header h2 {
        font-size: 22px; /* Розмір заголовка на телефоні */
        font-weight: 700;
    }

    /* 5. Сітка карток (2 в ряд, як у BUD PRO) */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Жорстко 2 колонки */
        gap: 15px; /* Менша відстань між картками на мобільному */
    }

    .card {
        padding: 15px;
        border-radius: 12px; /* Більш округлі кути карток */
    }
    
    .stat-label {
        font-size: 11px;
    }
    .stat-value {
        font-size: 20px;
    }

    /* 6. Таблиці */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}