Update styles.css

styles.css

@@ -1,11 +1,12 @@
 /* Основные стили */
 body {
     font-family: 'Arial', sans-serif;
-    background-color: #f9f9f9;
-    color: #333;
+    background-color: #f5f5f7;
+    color: #1d1d1f;
     margin: 0;
     padding: 0;
     line-height: 1.6;
+    transition: background-color 0.3s ease;
 }
 
 .container {
@@ -15,6 +16,7 @@ body {
     padding: 20px;
     max-width: 1200px;
     margin: 0 auto;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .column {
@@ -34,7 +36,7 @@ body {
 /* Разделитель для заголовков */
 .column h2 {
     margin-top: 0;
-    color: #333;
+    color: #1d1d1f;
     font-size: 24px;
     font-weight: 600;
     padding-bottom: 10px;
@@ -54,7 +56,7 @@ body {
 .burger-icon {
     font-size: 28px;
     cursor: pointer;
-    background-color: #ff6f61;
+    background-color: #007aff;
     color: #ffffff;
     padding: 12px;
     border-radius: 50%;
@@ -63,7 +65,7 @@ body {
 }
 
 .burger-icon:hover {
-    background-color: #ff3b30;
+    background-color: #005bb5;
 }
 
 .menu-items {
@@ -79,7 +81,7 @@ body {
     padding: 12px;
     cursor: pointer;
     border-bottom: 1px solid #e0e0e0;
-    color: #333;
+    color: #1d1d1f;
     font-size: 16px;
     transition: background-color 0.3s ease;
 }
@@ -101,24 +103,24 @@ form {
 }
 
 input {
-    padding: 15px;
+    padding: 12px;
     font-size: 16px;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     background-color: #ffffff;
-    color: #333;
+    color: #1d1d1f;
     transition: border-color 0.3s ease;
 }
 
 input:focus {
-    border-color: #ff6f61;
+    border-color: #007aff;
     outline: none;
 }
 
 button {
-    padding: 15px;
+    padding: 12px;
     font-size: 16px;
-    background-color: #ff6f61;
+    background-color: #007aff;
     color: #ffffff;
     border: none;
     border-radius: 8px;
@@ -127,19 +129,14 @@ button {
 }
 
 button:hover {
-    background-color: #ff3b30;
+    background-color: #005bb5;
 }
 
 /* Таблицы */
-.table-wrapper {
-    overflow-x: auto;
-    margin-top: 20px;
-}
-
 table {
     width: 100%;
     border-collapse: collapse;
-    min-width: 600px;
+    margin-top: 20px;
 }
 
 th, td {
@@ -149,7 +146,7 @@ th, td {
 }
 
 th {
-    background-color: #ff6f61;
+    background-color: #007aff;
     color: #ffffff;
     font-weight: 600;
 }
@@ -173,12 +170,12 @@ tr:hover {
 }
 
 .add-to-cart-btn {
-    background-color: #ff6f61;
+    background-color: #007aff;
     color: #ffffff;
 }
 
 .add-to-cart-btn:hover {
-    background-color: #ff3b30;
+    background-color: #005bb5;
 }
 
 .add-stock-btn {
@@ -191,119 +188,64 @@ tr:hover {
 }
 
 .delete-btn {
-    background-color: #ffcc00;
-    color: #333;
-}
-
-.delete-btn:hover {
-    background-color: #e6b800;
-}
-
-/* Корзина */
-.cart {
-    background-color: #ffffff;
-}
-
-#sellCartBtn {
-    margin-top: 10px;
-    background-color: #ff6f61;
-}
-
-#sellCartBtn:hover {
     background-color: #ff3b30;
+    color: #ffffff;
 }
 
-/* Стили для контейнера скидки */
-.discount-container {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.discount-container label {
-    font-weight: bold;
-    color: #333;
-}
-
-.discount-container input {
-    padding: 12px;
-    font-size: 16px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    background-color: #ffffff;
-    color: #333;
-    width: 100px;
-    transition: border-color 0.3s ease;
-}
-
-.discount-container input:focus {
-    border-color: #ff6f61;
-    outline: none;
+.delete-btn:hover {
+    background-color: #d70015;
 }
 
 /* Адаптация для мобильных устройств */
 @media (max-width: 768px) {
     .container {
         padding: 10px;
+        overflow-x: hidden; /* Запрещаем горизонтальную прокрутку */
     }
 
     .column {
-        display: none;
+        display: none; /* Скрываем все колонки по умолчанию */
         padding: 15px;
-        width: 100%;
-        box-sizing: border-box;
+        width: 100%; /* Занимаем всю ширину экрана */
+        box-sizing: border-box; /* Учитываем padding в ширине */
     }
 
     .column.active {
-        display: block;
+        display: block; /* Показываем активную колонку */
     }
 
     h2 {
         font-size: 20px;
     }
 
-    form {
-        gap: 10px;
+    /* Улучшаем отображение таблиц на мобильных устройствах */
+    table {
+        display: block;
+        overflow-x: auto; /* Добавляем горизонтальную прокрутку для таблиц */
+        white-space: nowrap; /* Предотвращаем перенос строк */
     }
 
-    input, button {
-        width: 100%;
-        box-sizing: border-box;
+    th, td {
+        min-width: 100px; /* Минимальная ширина ячеек */
     }
 
-    .actions {
-        flex-direction: column;
-        gap: 5px;
+    /* Улучшаем отображение форм на мобильных устройств */
+    form {
+        gap: 10px;
     }
 
-    .add-to-cart-btn, .add-stock-btn, .delete-btn {
-        width: 100%;
+    input, button {
+        width: 100%; /* Занимаем всю ширину экрана */
+        box-sizing: border-box; /* Учитываем padding в ширине */
     }
 
+    /* Улучшаем отображение бургер-меню */
     .burger-menu {
         display: block;
     }
 
     .menu-items {
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    .modal-content {
-        width: 95%;
-        max-width: none;
-    }
-
-    .filter-container {
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .filter-container input[type="date"], .filter-container button {
-        width: 100%;
-        box-sizing: border-box;
+        width: 100%; /* Занимаем всю ширину экрана */
+        box-sizing: border-box; /* Учитываем padding в ширине */
     }
 }