feat(109): checkbox multiselect filters

Phase 109 complete:
- Add checkbox dropdown enhancement for statistics multi-select filters
- Preserve GET contract for channels[] and status_groups[]
- Update PAUL plan context to read .paul/codebase docs

Co-Authored-By: Codex <noreply@openai.com>

resources/scss/app.scss

@@ -1085,6 +1085,111 @@ h4.section-title {
   padding-bottom: 6px;
 }
 
+.checkbox-multiselect {
+  position: relative;
+  width: 100%;
+
+  select[data-checkbox-multiselect-enhanced] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.checkbox-multiselect__trigger {
+  width: 100%;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border: 1px solid var(--c-border);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font: inherit;
+  color: var(--c-text-strong);
+  background: #ffffff;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.checkbox-multiselect__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox-multiselect__arrow {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid #64748b;
+  border-bottom: 1.5px solid #64748b;
+  transform: rotate(45deg) translateY(-2px);
+}
+
+.checkbox-multiselect__dropdown {
+  display: none;
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 8px 8px 6px;
+  border: 1px solid var(--c-primary);
+  border-radius: 0 0 6px 6px;
+  background: #ffffff;
+  box-shadow: 0 18px 38px rgba(45, 55, 72, 0.16);
+}
+
+.checkbox-multiselect.is-open {
+  .checkbox-multiselect__trigger {
+    border-color: var(--c-primary);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: var(--focus-ring);
+  }
+
+  .checkbox-multiselect__dropdown {
+    display: grid;
+    gap: 4px;
+  }
+
+  .checkbox-multiselect__arrow {
+    transform: rotate(225deg) translate(-2px, -1px);
+  }
+}
+
+.checkbox-multiselect__option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+  color: var(--c-text);
+  font-size: 13px;
+  line-height: 1.25;
+  cursor: pointer;
+
+  input {
+    width: 17px;
+    height: 17px;
+    margin: 0;
+    flex: 0 0 auto;
+    accent-color: var(--c-primary);
+  }
+}
+
+.checkbox-multiselect__option--all {
+  color: var(--c-text-strong);
+  font-weight: 700;
+}
+
 .statistics-orders-table-wrap {
   overflow-x: auto;
 }

resources/views/layouts/app.php

@@ -187,6 +187,7 @@
   </div>
   <script src="/assets/js/modules/jquery-alerts.js?ver=<?= filemtime(dirname(__DIR__, 3) . '/public/assets/js/modules/jquery-alerts.js') ?: 0 ?>"></script>
   <script src="/assets/js/modules/global-search.js?ver=<?= filemtime(dirname(__DIR__, 3) . '/public/assets/js/modules/global-search.js') ?: 0 ?>"></script>
+  <script src="/assets/js/modules/checkbox-multiselect.js?ver=<?= filemtime(dirname(__DIR__, 3) . '/public/assets/js/modules/checkbox-multiselect.js') ?: 0 ?>"></script>
   <script>
   (function () {
     var STORAGE_KEY = 'sidebarCollapsed';

resources/views/statistics/orders.php

@@ -47,7 +47,15 @@ foreach ($channelOptions as $channelOption) {
 
     <label class="form-field">
       <span class="field-label"><?= $e($t('statistics.orders.filters.channels')) ?></span>
-      <select class="form-control statistics-orders-multiselect" name="channels[]" multiple size="6">
+      <select class="form-control statistics-orders-multiselect js-checkbox-multiselect"
+        name="channels[]"
+        multiple
+        size="6"
+        data-checkbox-multiselect
+        data-all-label="Wszystkie"
+        data-empty-label="Nic nie wybrano"
+        data-selected-label-singular="zaznaczono"
+        data-selected-label-plural="zaznaczono">
         <?php foreach ($channelOptions as $channelOption): ?>
           <?php
           $key = (string) ($channelOption['key'] ?? '');
@@ -65,7 +73,15 @@ foreach ($channelOptions as $channelOption) {
 
     <label class="form-field">
       <span class="field-label"><?= $e($t('statistics.orders.filters.status_groups')) ?></span>
-      <select class="form-control statistics-orders-multiselect" name="status_groups[]" multiple size="6">
+      <select class="form-control statistics-orders-multiselect js-checkbox-multiselect"
+        name="status_groups[]"
+        multiple
+        size="6"
+        data-checkbox-multiselect
+        data-all-label="Wszystkie"
+        data-empty-label="Nic nie wybrano"
+        data-selected-label-singular="zaznaczono"
+        data-selected-label-plural="zaznaczono">
         <?php foreach ($statusGroupOptions as $groupOption): ?>
           <?php
           $groupId = (int) ($groupOption['id'] ?? 0);