feat: Улучшен календарный фильтр заказов - расширен до 19 дней и обновлён дизайн

- Расширен календарь с 9 до 19 дней (±9 от центра)
- Календарь теперь занимает всю ширину страницы
- Исправлены метки "Вчера/Сегодня/Завтра" - теперь привязаны к реальным датам, а не к позициям в ленте
- Добавлена автоматическая отправка формы при выборе даты
- Обновлён дизайн:
  * Сегодняшний день выделен светло-голубым цветом (более мягкий оттенок)
  * Выбранная дата обведена красной рамкой (как на настенном календаре)
- Добавлен блок extra_css в base.html для подключения дополнительных стилей

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

myproject/orders/static/orders/css/date_filter.css

@@ -1,5 +1,5 @@
 /**
- * Стили для календарного фильтра с лентой из 9 дней
+ * Стили для календарного фильтра с лентой из 19 дней
  * Используется в компоненте date_range_filter.html
  */
 
@@ -118,35 +118,44 @@
     text-transform: uppercase;
 }
 
-/* Сегодняшний день (активный) */
+/* Сегодняшний день (более светлый оттенок) */
 .date-btn.today {
-    background: #0d6efd;
+    background: #cfe2ff;
-    border-color: #0d6efd;
+    border-color: #9ec5fe;
-    color: white;
+    color: #084298;
 }
 
 .date-btn.today .date-btn-label,
 .date-btn.today .date-btn-day,
 .date-btn.today .date-btn-weekday {
-    color: white;
+    color: #084298;
 }
 
 .date-btn.today:hover {
-    background: #0b5ed7;
+    background: #b6d4fe;
-    border-color: #0b5ed7;
+    border-color: #6ea8fe;
 }
 
-/* Выбранный день */
+/* Выбранный день (красная рамка как на настенном календаре) */
 .date-btn.selected {
-    background: #198754;
+    background: #fff;
-    border-color: #198754;
+    border-color: #dc3545;
-    color: white;
+    border-width: 3px;
+    color: #212529;
+    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
+}
+
+.date-btn.selected .date-btn-label {
+    color: #dc3545;
+    font-weight: 700;
+}
+
+.date-btn.selected .date-btn-day {
+    color: #dc3545;
 }
 
-.date-btn.selected .date-btn-label,
-.date-btn.selected .date-btn-day,
 .date-btn.selected .date-btn-weekday {
-    color: white;
+    color: #6c757d;
 }
 
 /* Адаптивность для мобильных устройств */

myproject/orders/static/orders/js/date_filter.js

@@ -1,5 +1,5 @@
 /**
- * Календарная лента с 9 днями для фильтрации заказов
+ * Календарная лента с 19 днями для фильтрации заказов
  * Сегодня в центре, навигация стрелками
  */
 
@@ -43,7 +43,7 @@ class DateCarousel {
     }
 
     /**
-     * Генерация и отображение 9 дней
+     * Генерация и отображение 19 дней
      */
     render() {
         this.container.innerHTML = '';
@@ -56,12 +56,12 @@ class DateCarousel {
     }
 
     /**
-     * Генерация массива из 9 дней (±4 от центральной даты)
+     * Генерация массива из 19 дней (±9 от центральной даты)
      */
     generateDays() {
         const days = [];
 
-        for (let i = -4; i <= 4; i++) {
+        for (let i = -9; i <= 9; i++) {
             const date = new Date(this.centerDate);
             date.setDate(date.getDate() + i);
             date.setHours(0, 0, 0, 0);
@@ -81,9 +81,17 @@ class DateCarousel {
      * Определение текстовой метки для даты
      */
     getDateLabel(date, offset) {
-        if (offset === -1) return 'Вчера';
+        const yesterday = new Date(this.today);
-        if (offset === 0 && date.getTime() === this.today.getTime()) return 'Сегодня';
+        yesterday.setDate(yesterday.getDate() - 1);
-        if (offset === 1 && date.getTime() === new Date(this.today.getTime() + 86400000).getTime()) return 'Завтра';
+        yesterday.setHours(0, 0, 0, 0);
+
+        const tomorrow = new Date(this.today);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        tomorrow.setHours(0, 0, 0, 0);
+
+        if (date.getTime() === yesterday.getTime()) return 'Вчера';
+        if (date.getTime() === this.today.getTime()) return 'Сегодня';
+        if (date.getTime() === tomorrow.getTime()) return 'Завтра';
         return '';
     }
 
@@ -170,6 +178,12 @@ class DateCarousel {
         this.render();
 
         console.log(`Selected date: ${formattedDate}`);
+
+        // Автоматическая отправка формы
+        const form = this.minInput.closest('form');
+        if (form) {
+            form.submit();
+        }
     }
 
     /**

myproject/orders/templates/orders/components/date_range_filter.html

@@ -25,7 +25,7 @@
         {{ field_before }}
     </div>
 
-    <!-- Календарная лента с 9 днями -->
+    <!-- Календарная лента с 19 днями -->
     <div class="date-carousel">
         <button type="button" class="carousel-nav-btn carousel-prev"
                 data-min-input="{{ field_after.id_for_label }}"

myproject/orders/templates/orders/order_list.html

@@ -76,7 +76,7 @@
 
                 <!-- Календарный фильтр по дате доставки (вторая строка) -->
                 <div class="row mt-3">
-                    <div class="col-md-6">
+                    <div class="col-12">
                         {% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
                     </div>
                 </div>

myproject/templates/base.html

@@ -14,6 +14,8 @@
     <!-- Качество фото индикаторы -->
     <link rel="stylesheet" href="/static/css/quality_indicator.css">
 
+    {% block extra_css %}{% endblock %}
+
     <style>
         body {
             background-color: #f8f9fa;