body {
            font-family: 'Inter', sans-serif; /* Использование Inter для современного вида */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f9;
            color: #333;
            transition: background-color 0.3s ease;
        }

        body.dark-mode {
            background-color: #222;
            color: #eee;
        }

        #allrecords a {
            color: inherit;
            text-decoration: none; /* Убираем подчеркивание ссылок */
        }

        #allrecords {
            background: #fff;
            padding: 25px 35px; /* Увеличены отступы */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Более мягкая тень */
            border-radius: 12px; /* Более скругленные углы */
            width: 90%; /* Немного шире по умолчанию */
            max-width: 1320px;
            overflow-x: auto;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        body.dark-mode #allrecords {
            background: #333;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
        }

        h1 {
            margin-bottom: 25px;
            color: #333;
            text-align: center;
            font-size: 2.2em; /* Более крупный заголовок */
            transition: color 0.3s ease;
        }

        body.dark-mode h1 {
            color: #eee;
        }
        input[type="text"], input[type="number"], select {
            /*width: calc(100% - 22px); /* Корректировка ширины */
            padding: 12px; /* Увеличен padding */
            margin-bottom: 15px;
            border: 1px solid #ddd; /* Более светлая граница */
            border-radius: 8px; /* Скругленные углы */
            font-size: 1em;
            /*margin-right: 10px;*/
            background-color: #fff;
            color: #333;
            transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease;
        }
        input[type="text"]:focus, input[type="number"]:focus, select:focus {
            border-color: #ff4a4a;
            box-shadow: 0 0 0 3px rgba(255, 74, 74, 0.2); /* Фокус-эффект */
            outline: none;
        }

        body.dark-mode input[type="text"],
        body.dark-mode input[type="number"],
        body.dark-mode select {
            background-color: #444;
            border-color: #555;
            color: #eee;
        }

        button {
            padding: 12px 25px; /* Увеличен padding */
            color: #fff;
            border: none;
            border-radius: 8px; /* Скругленные углы */
            font-size: 1.05em;
            cursor: pointer;
            /*margin-top: 15px;*/
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: inline-flex; /* Для выравнивания иконки и текста */
            align-items: center;
            justify-content: center;
            gap: 8px; /* Расстояние между иконкой и текстом */
        }

        button.btn-add { background-color: #28a745; } /* Зеленый */
        button.btn-add:hover { background-color: #218838; }

        button.btn-calculate { background-color: #007bff; } /* Синий */
        button.btn-calculate:hover { background-color: #0056b3; }

        button.btn-download { background-color: #17a2b8; } /* Голубой */
        button.btn-download:hover { background-color: #138496; }

        button.btn-send { background-color: #6366f1; } /* Фиолетовый */
        button.btn-send:hover { background-color: #898bf8; }

        button.remove-btn { background-color: #dc3545; } /* Красный */
        button.remove-btn:hover { background-color: #c82333; }

        button.search-button { background-color: #6c757d; } /* Серый */
        button.search-button:hover { background-color: #5a6268; }

        /* Новые стили для кнопки запроса скидки */
        button.btn-request-discount { background-color: #ff8c00; } /* Оранжевый */
        button.btn-request-discount:hover { background-color: #e07b00; }

        /* Новые стили для кнопки отправки запроса в модальном окне */
        button.btn-send-request { background-color: #20c997; } /* Бирюзовый */
        button.btn-send-request:hover { background-color: #17a2b8; }


        button:active {
            transform: translateY(0);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .code-item {
            display: flex;
            flex-wrap: wrap; /* Разрешить перенос на меньших экранах */
            align-items: center;
            margin-bottom: 15px;
            gap: 15px; /* Увеличен зазор */
            background-color: #f9f9f9; /* Легкий фон для каждого элемента */
            padding: 15px;
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); /* Внутренняя тень */
        }
        body.dark-mode .code-item {
            background-color: #3a3a3a;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .code-item input, .code-item select {
            margin-bottom: 0; /* Убираем нижний отступ, так как есть gap */
            flex-grow: 1;
        }
        
        .code-item2 .quantity {
            min-width: 90px;
        }
        .code-item2 {
            display: flex;
            flex-wrap: wrap; /* Разрешить перенос на меньших экранах */
            align-items: center;
            margin-bottom: 15px;
            gap: 15px; /* Увеличен зазор */
            background-color: #f9f9f9; /* Легкий фон для каждого элемента */
            padding: 15px;
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); /* Внутренняя тень */
        }
        body.dark-mode .code-item2 {
            background-color: #3a3a3a;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .code-item2 input, .code-item2 select {
            margin-bottom: 0; /* Убираем нижний отступ, так как есть gap */
            flex-grow: 1;
        }
        
        .code-item2 .quantity {
            min-width: 90px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 25px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden; /* Для скругленных углов */
        }
        
        body.dark-mode table {
            background-color: #444;
        }

        th, td {
            border: 1px solid #eee; /* Более светлые границы */
            padding: 12px 10px; /* Увеличен padding */
            text-align: center;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        body.dark-mode th, body.dark-mode td {
            border: 1px solid #555;
            color: #eee;
        }

        th {
            background-color: #ff4a4a;
            color: white;
            font-weight: 600; /* Более жирный шрифт */
            transition: background-color 0.3s ease;
            cursor: pointer;
        }
        
        body.dark-mode th {
            background-color: #c0392b;
        }

        .total {
            font-size: 1.4em; /* Уменьшен размер шрифта для лучшей читаемости */
            font-weight: bold;
            text-align: right;
            background: linear-gradient(90deg, rgba(255, 230, 230, 0.8), rgba(255, 255, 255, 0.8));
            padding: 15px;
            border-radius: 8px; /* Скругленные углы */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
            margin-top: 25px;
            display: flex; /* Используем flexbox для выравнивания */
            justify-content: flex-end;
            align-items: center;
            gap: 20px; /* Пространство между элементами */
            flex-wrap: wrap; /* Разрешить перенос на мобильных */
        }
        
        body.dark-mode .total {
            background: linear-gradient(90deg, rgba(100, 50, 50, 0.8), rgba(50, 50, 50, 0.8));
        }
        .total td {
            border: none; /* Убираем границы внутри строки итогов */
            padding: 0;
            text-align: right;
        }

        .total-sum {
            font-size: 1.8em; /* Немного уменьшен, но все еще заметен */
            font-weight: bold;
            color: #d62828;
            text-shadow: 1px 1px 3px rgba(214, 40, 40, 0.4);
            animation: none; /* Убрана анимация мигания */
        }
        .orig-sum {
            text-decoration: line-through;
            color: #777; /* Более приглушенный цвет */
            font-size: 0.9em;
        }
        .savingAmount { 
            color: #28a745; /* Зеленый цвет для экономии */
            font-size: 1.1em;
            font-weight: bold;
        }

        .suggestions-list {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            list-style: none;
            padding: 0;
            margin-top: 0;
            max-height: 200px;
            overflow-y: auto;
            width: calc(100% - 24px); /* Соответствует ширине поля ввода */
            z-index: 10;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: none; /* Скрыто по умолчанию */
        }
        
        body.dark-mode .suggestions-list {
            background-color: #444;
            border-color: #555;
        }

        .suggestions-list li {
            padding: 10px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s ease;
        }
        
        body.dark-mode .suggestions-list li {
            border-bottom: 1px solid #555;
        }

        .suggestions-list li:hover {
            background-color: #f0f0f0;
        }
        
        body.dark-mode .suggestions-list li:hover {
            background-color: #555;
        }

        /* Enhanced styling for search results with additional data */
        .suggestions-list li {
            padding: 12px;
            line-height: 1.4;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        body.dark-mode .suggestions-list li {
            border-bottom: 1px solid #555;
        }

        .suggestions-list li:last-child {
            border-bottom: none;
        }

        /* Mobile-friendly styling for search results */
        .suggestions-list li {
            padding: 15px;
            font-size: 14px;
        }
        
        .suggestions-list li br + span {
            display: block;
            margin-top: 8px;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 3px solid #ff4a4a;
            word-break: break-word;
        }
        
        body.dark-mode .suggestions-list li br + span {
            background-color: #3a3a3a;
            border-left-color: #ff4a4a;
        }

        /* Индикатор загрузки для предложений */
        .suggestions-list.loading::before {
            content: '';
            display: block;
            margin: 10px auto;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #ff4a4a;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Общие стили для модальных окон */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex; /* Используем flexbox для центрирования */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal.open {
            opacity: 1;
            visibility: visible;
        }

        .popup {
            background: white;
            padding: 20px;
            border-radius: 8px;
            max-height: 80vh;
            width: 90%;
            max-width: 500px; /* Уменьшил максимальную ширину для модального окна запроса скидки */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }
        
        body.dark-mode .popup {
            background: #333;
        }

        .modal.open .popup {
            transform: translateY(0);
        }

        /* Стили для input-group внутри модального окна */
        #discountRequestModal .input-group {
            margin-bottom: 15px;
            display: flex; /* Сделать его flex-контейнером */
            flex-direction: column; /* Разместить метку и поле ввода вертикально */
            align-items: flex-start; /* Выровнять элементы по левому краю */
            width: 100%; /* Занять всю ширину всплывающего окна */
        }

        #discountRequestModal .input-group label {
            margin-bottom: 5px; /* Пространство между меткой и полем ввода */
            font-weight: bold;
            color: #555;
        }

        body.dark-mode #discountRequestModal .input-group label {
            color: #bbb;
        }

        #discountRequestModal .input-group select {
            width: 100%; /* Убедиться, что select занимает всю ширину */
            box-sizing: border-box; /* Включить padding и border в ширину */
        }


        .modal .searchByName {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .modal .suggestions-list {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            max-height: 80%;
            overflow: auto;
            width: 100%;
            box-shadow: none;
            border: none;
        }
        
        body.dark-mode .modal .suggestions-list li {
            background-color: #555;
            border-color: #666;
        }

        .modal .suggestions-list li:hover {
            background-color: #e2e2e2;
        }
        
        body.dark-mode .modal .suggestions-list li:hover {
            background-color: #666;
        }

        .modal .close-modal {
            display: block;
            margin: 15px auto 0;
            padding: 10px 20px;
            background-color: #ff4a4a;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            width: 60%;
            max-width: 200px;
        }

        /* Гамбургер-меню */
        .hamburger-menu {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        #menu__toggle { opacity: 0; }
        #menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); }
        #menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); }
        #menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); }
        #menu__toggle:checked ~ .menu__box { right: 0 !important; }
        .menu__btn {
            display: flex;
            align-items: center;
            position: fixed;
            top: 20px;
            right: 20px;
            width: 26px;
            height: 26px;
            cursor: pointer;
            z-index: 1000;
        }
        .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after {
            display: block;
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #616161;
            transition-duration: .25s;
        }
        body.dark-mode .menu__btn > span,
        body.dark-mode .menu__btn > span::before,
        body.dark-mode .menu__btn > span::after {
            background-color: #eee;
        }
        .menu__btn > span::before { content: ''; top: -8px; }
        .menu__btn > span::after { content: ''; top: 8px; }
        .menu__box {
            display: block;
            position: fixed;
            top: 0;
            right: -100%;
            width: 300px;
            height: 100%;
            margin: 0;
            padding: 80px 0;
            list-style: none;
            background-color: #ECEFF1;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
            transition-duration: .25s;
            z-index: 999;
        }
        body.dark-mode .menu__box {
            background-color: #555;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
        }
        .menu__item {
            display: block;
            padding: 12px 24px;
            color: #333;
            font-family: 'Roboto', sans-serif;
            font-size: 20px;
            font-weight: 600;
            text-decoration: none;
            transition-duration: .25s;
        }
        body.dark-mode .menu__item {
            color: #eee;
        }
        .menu__item:hover {
            background-color: #CFD8DC;
        }
        body.dark-mode .menu__item:hover {
            background-color: #666;
        }

        .timer {
            font-size: 28px;
            font-weight: bold;
            color: #ff6b6b;
            text-align: center;
            padding: 10px 20px;
            border: 2px solid #ff6b6b;
            border-radius: 10px;
            display: inline-block;
            background: linear-gradient(90deg, rgba(255, 230, 230, 0.8), rgba(255, 255, 255, 0.8));
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            text-shadow: 2px 2px 5px rgba(255, 107, 107, 0.5);
            animation: pulse 1.5s infinite alternate;
            position: relative;
        }
        .orig-sum { text-decoration: line-through; }
        .savingAmount { color: #4CAF50; font-size: 23px; }

        /* Переключатель темного режима */
        .dark-mode-toggle {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            background-color: #333;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        body.dark-mode .dark-mode-toggle {
            background-color: #eee;
            color: #333;
        }

        /* Пользовательское модальное окно предупреждений */
        .custom-alert-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001; /* Выше других модальных окон */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .custom-alert-modal.open {
            opacity: 1;
            visibility: visible;
        }
        .custom-alert-content {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 400px;
            width: 90%;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }
        .custom-alert-modal.open .custom-alert-content {
            transform: translateY(0);
        }
        .custom-alert-content p {
            margin-bottom: 20px;
            font-size: 18px;
            color: #333;
        }
        .custom-alert-content button {
            background-color: #ff4a4a;
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            border: none;
            transition: background-color 0.2s ease;
        }
        .custom-alert-content button:hover {
            background-color: #cc0000;
        }
        body.dark-mode .custom-alert-content {
            background: #444;
            color: #eee;
        }
        body.dark-mode .custom-alert-content p {
            color: #eee;
        }

        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1002; /* Выше всех остальных */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        body.dark-mode .loading-overlay {
            background: rgba(0, 0, 0, 0.7);
        }
        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ff4a4a;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        /* Адаптивные стили для таблицы (Vanilla JS) */
        .table-controls {
            display: none; /* Скрываем элементы управления таблицей (поиск, пагинация) */
        }
        /* General style for disabled buttons */
.btn-download:disabled,
.btn-send:disabled,
.btn-request-discount:disabled {
    background-color: #cccccc; /* Light gray background */
    color: #666666; /* Darker gray text */
    cursor: not-allowed; /* Change cursor to "not-allowed" */
    border-color: #cccccc; /* Match border color to background */
    opacity: 0.7; /* Slightly reduce opacity to indicate disabled state */
}

/* Optional: Add specific hover/active states for disabled buttons */
.btn-download:disabled:hover,
.btn-send:disabled:hover,
.btn-request-discount:disabled:hover {
    background-color: #cccccc; /* Keep the same background on hover */
    color: #666666; /* Keep the same text color on hover */
    /* Remove any hover effects that apply to active buttons */
    transform: none;
    box-shadow: none;
}
        /* Скрываем раскрывающийся контент и кнопку на ПК */
        @media (min-width: 769px) {
            .collapsible-content, .collapsible-toggle {
                display: none !important;
            }
        }

        /* Mobile specific styles for the table */
        @media (max-width: 768px) {
            #allrecords {
                width: 95%;
                padding: 15px;
            }

            .code-item {
                flex-direction: column;
                align-items: stretch;
                gap: 5px;
            }
            
            .code-item .quantity {
                width: 100%; /* Полная ширина для выбора на мобильных */
            }

            button {
                width: 100%;
                margin-top: 5px;
            }
            
            .table-controls {
                display: none; /* Убеждаемся, что скрыто и на мобильных */
            }

            table {
                font-size: 14px;
            }
            
            /* Manual responsive table display for small screens */
            table, thead, tbody, th, td, tr {
                display: block;
            }
            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            tr {
                border: 1px solid #ccc;
                margin-bottom: 15px;
                display: block;
            }
            td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
                text-align: right;
            }
            td:last-child {
                border-bottom: 0;
            }
            td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
            }
            /* Labels for mobile data */
            td.mobdata:nth-of-type(1):before { content: "კოდი"; }
            td.mobdata:nth-of-type(2):before { content: "სახელი"; }
            td.mobdata:nth-of-type(3):before { content: "შესყიდვის რაოდენობა"; }
            td.mobdata:nth-of-type(4):before { content: "მთავარი საწყობი"; }
            td.mobdata:nth-of-type(8):before { content: "საბოლოო ფასდაკლება"; }
            td.mobdata:nth-of-type(9):before { content: "ფასი ფასდაკლებით (1 ცალი)"; }
            /* Скрываем остальные колонки на мобильных, они будут в раскрывающемся списке */
            td.mobdata:nth-of-type(5) { display: none; }
            td.mobdata:nth-of-type(6) { display: none; }
            td.mobdata:nth-of-type(7) { display: none; }
            td.mobdata:nth-of-type(10) { display: none; }
            td.mobdata:nth-of-type(11) { display: none; }

            .total-sum { float: right; }

            /* New styles for collapsible content on mobile */
            .collapsible-content {
                display: none;
                padding: 10px;
                border-top: 1px solid #eee;
                background-color: #f9f9f9;
                text-align: left;
            }
            body.dark-mode .collapsible-content {
                background-color: #4a4a4a;
            }
            .collapsible-toggle {
                display: block;
                width: 100%;
                padding: 10px;
                background-color: #f0f0f0;
                border: none;
                border-top: 1px solid #ccc;
                cursor: pointer;
                font-size: 14px;
                font-weight: bold;
                text-align: center;
                margin-top: 5px;
                display: flex; /* Используем flexbox для центрирования иконки */
                justify-content: center;
                align-items: center;
                background-color: #d62828;
            }
            body.dark-mode .collapsible-toggle {
                background-color: #d62828;
                color: #eee;
            }
            .collapsible-toggle .icon {
                margin-left: 8px;
                transition: transform 0.3s ease;
            }
            .collapsible-toggle.active .icon {
                transform: rotate(180deg); /* Поворот иконки при активном состоянии */
            }
        }