body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.table-responsive {
    border-radius: 8px;
    overflow: hidden;
}

.ttn-input {
    min-width: 130px;
}

.badge {
    font-size: 0.85em;
}

/* --- АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ ТЕЛЕФОНІВ --- */
@media (max-width: 768px) {
    /* Змушуємо таблицю працювати як блочні елементи */
    .table-responsive table, 
    .table-responsive thead, 
    .table-responsive tbody, 
    .table-responsive th, 
    .table-responsive td, 
    .table-responsive tr { 
        display: block; 
    }
    
    /* Ховаємо стандартні заголовки таблиці */
    .table-responsive thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* Оформлюємо кожен рядок як окрему картку */
    .table-responsive tr { 
        border: 1px solid #dee2e6; 
        margin-bottom: 15px;
        border-radius: 12px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    
    /* Стилізуємо комірки (поля всередині картки) */
    #orders-list td, 
    #products-list td { 
        border: none;
        border-bottom: 1px solid #f1f1f1; 
        position: relative;
        padding: 10px 10px 10px 45%; 
        text-align: right;
        min-height: 45px;
    }
    
    /* Прибираємо лінію в останньому полі картки */
    #orders-list td:last-child, 
    #products-list td:last-child { 
        border-bottom: 0; 
        padding-bottom: 5px;
    }
    
    /* Додаємо підписи до полів зліва (щоб розуміти, де які дані) */
    #orders-list td::before, 
    #products-list td::before { 
        position: absolute;
        top: 12px;
        left: 10px;
        width: 40%; 
        text-align: left;
        font-weight: 600;
        color: #495057;
        white-space: nowrap;
    }
    
    /* --- Підписи для картки ЗАМОВЛЕННЯ --- */
    #orders-list td:nth-of-type(1)::before { content: "Дата:"; }
    #orders-list td:nth-of-type(2)::before { content: "Клієнт:"; }
    #orders-list td:nth-of-type(3)::before { content: "Телефон:"; }
    #orders-list td:nth-of-type(4)::before { content: "Товар:"; }
    #orders-list td:nth-of-type(5)::before { content: "К-сть:"; }
    #orders-list td:nth-of-type(6)::before { content: "Сума:"; color: #0d6efd; }
    #orders-list td:nth-of-type(7)::before { content: "Маржа:"; color: #198754; }
    #orders-list td:nth-of-type(8)::before { content: "Статус:"; }
    #orders-list td:nth-of-type(9)::before { content: "ТТН:"; }
    #orders-list td:nth-of-type(10)::before { content: "Дії:"; }
    
    /* --- Підписи для картки СКЛАДУ --- */
    #products-list td:nth-of-type(1)::before { content: "ID:"; }
    #products-list td:nth-of-type(2)::before { content: "Назва:"; }
    #products-list td:nth-of-type(3)::before { content: "Залишок:"; }
    #products-list td:nth-of-type(4)::before { content: "Закупівля:"; }

    /* Розтягуємо кнопки та поля на всю ширину для зручного натискання пальцем */
    .btn, .form-select, .form-control { 
        width: 100% !important; 
        margin-bottom: 8px; 
        box-sizing: border-box;
    }
    
    /* Відступи для блоків статистики */
    .card {
        margin-bottom: 15px;
    }
}