Adjust filter button

index.html

@@ -383,11 +383,68 @@
             font-size: 0.54rem;
             line-height: 0.72rem;
         }
+        #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.7) !important;
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.34) !important;
+            border-radius: 1.08rem !important;
+            box-shadow:
+                0 1px 2px rgba(var(--overlay-rgb), 0.06),
+                0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
+            backdrop-filter: blur(14px) saturate(140%);
+            -webkit-backdrop-filter: blur(14px) saturate(140%);
+        }
+        .dark #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.62) !important;
+            border-color: rgba(255, 255, 255, 0.1) !important;
+            box-shadow:
+                0 1px 2px rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.26) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
+            height: 5.45rem;
+            background: rgb(var(--skeleton-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
+            padding: 0.62rem;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
+            min-height: 2.64rem;
+            margin-bottom: 0.5rem;
+            font-size: 0.68rem;
+            font-weight: 650 !important;
+            line-height: 0.88rem;
+            color: rgb(var(--text-emphasis-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
+            margin-bottom: 0;
+            padding-top: 0.1rem;
+            color: rgb(var(--text-muted-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
+            color: rgb(var(--text-dim-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card > div:first-child::after {
+            display: none;
+        }
+        #recipe-grid > .recipe-catalog-card:active {
+            transform: scale(0.985);
+        }
         #recipe-grid > *:hover,
         #planner-picker-grid > *:hover {
             transform: translateY(-2px);
             box-shadow: none !important;
         }
+        #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(var(--overlay-rgb), 0.08),
+                0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
+        }
+        .dark #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(0, 0, 0, 0.24),
+                0 14px 30px rgba(0, 0, 0, 0.34) !important;
+        }
         #recipe-grid > * img,
         #planner-picker-grid > * img {
             transition: transform 240ms ease;
@@ -405,38 +462,243 @@
             background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
             pointer-events: none;
         }
-        #recipe-topbar #recipe-search-shell {
+        #recipe-search-shell,
-            min-height: 0;
+        #pantry-search-shell {
-            width: 100%;
-            margin-inline: 0;
             isolation: auto;
         }
-        #recipe-topbar #recipe-search-shell::after {
+        #recipe-search-shell::after,
+        #pantry-search-shell::after {
             display: none;
         }
-        #recipe-topbar #recipe-search-shell,
+        #recipe-bottom-controls,
-        #recipe-topbar #recipe-search-shell:focus-within {
+        #recipe-bottom-default-actions,
-            background: rgb(var(--sunken-rgb)) !important;
+        #pantry-bottom-controls,
-            border: 1px solid rgb(var(--border-input-rgb)) !important;
+        #shopping-bottom-controls {
-            backdrop-filter: none;
+            bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
-            -webkit-backdrop-filter: none;
+            height: var(--recipe-bottom-control-size, 3.9rem) !important;
-        }
-        #recipe-topbar #recipe-search-input {
-            appearance: none;
-            -webkit-appearance: none;
             background: transparent !important;
             border: none !important;
             box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            transition: opacity 160ms ease;
+        }
+        html.is-nav-menu-open #recipe-bottom-controls,
+        html.is-nav-menu-open #pantry-bottom-controls,
+        html.is-nav-menu-open #shopping-bottom-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+        html.is-nav-menu-open #recipe-bottom-controls *,
+        html.is-nav-menu-open #pantry-bottom-controls *,
+        html.is-nav-menu-open #shopping-bottom-controls * {
+            pointer-events: none !important;
+        }
+        #recipe-search-shell.recipe-search-field,
+        #recipe-search-shell.recipe-search-field:focus-within,
+        #pantry-search-shell.recipe-search-field,
+        #pantry-search-shell.recipe-search-field:focus-within {
+            position: absolute !important;
+            left: var(--catalog-menu-left, 1rem);
+            right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
+            bottom: 0;
+            min-width: 0;
+            height: var(--recipe-bottom-control-size, 3.9rem);
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.2) !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #recipe-search-shell.recipe-search-field,
+        .dark #recipe-search-shell.recipe-search-field:focus-within,
+        .dark #pantry-search-shell.recipe-search-field,
+        .dark #pantry-search-shell.recipe-search-field:focus-within {
+            background: rgba(255, 255, 255, 0.04) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #recipe-search-input,
+        #pantry-search-input {
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent !important;
+            background-color: transparent !important;
+            background-image: none !important;
+            border: none !important;
+            border-radius: 0 !important;
+            box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
             color: rgb(var(--text-body-rgb)) !important;
             caret-color: rgb(var(--text-body-rgb));
+            padding: 0 !important;
         }
-        #recipe-topbar #recipe-search-input::placeholder {
+        #recipe-search-input::-webkit-search-cancel-button,
+        #recipe-search-input::-webkit-search-decoration,
+        #recipe-search-input::-webkit-search-results-button,
+        #recipe-search-input::-webkit-search-results-decoration,
+        #pantry-search-input::-webkit-search-cancel-button,
+        #pantry-search-input::-webkit-search-decoration,
+        #pantry-search-input::-webkit-search-results-button,
+        #pantry-search-input::-webkit-search-results-decoration {
+            display: none;
+        }
+        #recipe-search-input::placeholder,
+        #pantry-search-input::placeholder {
             color: rgb(var(--text-dim-rgb)) !important;
             opacity: 1;
         }
-        #recipe-topbar #recipe-filter-btn {
+        #recipe-search-close,
+        #recipe-search-close:hover,
+        #recipe-search-close:focus,
+        #recipe-search-close:focus-visible,
+        #recipe-search-close:active,
+        #pantry-search-close,
+        #pantry-search-close:hover,
+        #pantry-search-close:focus,
+        #pantry-search-close:focus-visible,
+        #pantry-search-close:active {
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent !important;
+            background-color: transparent !important;
+            background-image: none !important;
+            border: none !important;
+            box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            outline: none;
+        }
+        #main-view .recipe-glass-btn,
+        #pantry-view .recipe-glass-btn,
+        #shopping-view .recipe-glass-btn,
+        #app-bottom-nav .recipe-nav-toggle {
+            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            background: rgba(255, 255, 255, 0.2) !important;
+            background-image: none !important;
+            color: rgb(var(--text-body-rgb));
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #main-view .recipe-glass-btn,
+        .dark #pantry-view .recipe-glass-btn,
+        .dark #shopping-view .recipe-glass-btn,
+        .dark #app-bottom-nav .recipe-nav-toggle {
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            background: rgba(255, 255, 255, 0.04) !important;
+            background-image: none !important;
+            color: rgb(var(--text-body-rgb));
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #main-view .recipe-glass-btn:hover,
+        #pantry-view .recipe-glass-btn:hover,
+        #shopping-view .recipe-glass-btn:hover,
+        #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(var(--overlay-rgb), 0.1) !important;
+            color: rgb(var(--text-emphasis-rgb));
+            transform: translateY(-1px);
+        }
+        .dark #main-view .recipe-glass-btn:hover,
+        .dark #pantry-view .recipe-glass-btn:hover,
+        .dark #shopping-view .recipe-glass-btn:hover,
+        .dark #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(255, 255, 255, 0.09) !important;
+        }
+        #main-view #recipe-search-shell.recipe-search-field:hover,
+        #pantry-view #pantry-search-shell.recipe-search-field:hover {
+            transform: none;
+        }
+        #recipe-filter-btn,
+        #pantry-filter-bottom-btn {
             border-radius: 999px;
         }
+        #main-view #recipe-filter-btn.recipe-bottom-action,
+        #pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
+            border-radius: 999px;
+        }
+        #main-view #recipe-filter-wrap,
+        #pantry-view #pantry-filter-bottom-wrap {
+            left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
+            right: auto !important;
+            bottom: 0;
+        }
+        #main-view #recipe-search-wrap,
+        #pantry-view #pantry-search-wrap {
+            left: var(--catalog-search-btn-left, calc(100vw - 7.6rem)) !important;
+            right: auto !important;
+            bottom: 0;
+        }
+        #main-view .recipe-bottom-action,
+        #pantry-view .recipe-bottom-action,
+        #shopping-view .recipe-bottom-action {
+            width: var(--recipe-bottom-control-size, 3.9rem);
+            height: var(--recipe-bottom-control-size, 3.9rem);
+            border-radius: 999px;
+            font-size: 1rem;
+        }
+        #main-view .recipe-bottom-action i,
+        #pantry-view .recipe-bottom-action i,
+        #shopping-view .recipe-bottom-action i {
+            font-size: 1rem;
+            line-height: 1;
+        }
+        html.is-inline-search-open #recipe-bottom-controls,
+        html.is-inline-search-open #pantry-bottom-controls {
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) !important;
+        }
+        html.is-inline-search-open #recipe-search-shell.recipe-search-field,
+        html.is-inline-search-open #recipe-search-shell.recipe-search-field:focus-within,
+        html.is-inline-search-open #pantry-search-shell.recipe-search-field,
+        html.is-inline-search-open #pantry-search-shell.recipe-search-field:focus-within {
+            left: var(--catalog-inline-search-field-left, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
+            right: var(--catalog-inline-search-field-right, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+        }
+        html.is-inline-search-open #main-view #recipe-filter-wrap,
+        html.is-inline-search-open #pantry-view #pantry-filter-bottom-wrap {
+            left: var(--catalog-inline-search-close-left, calc(100vw - 3.9rem)) !important;
+        }
+        html.is-inline-search-open #main-view .recipe-bottom-action,
+        html.is-inline-search-open #pantry-view .recipe-bottom-action {
+            width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+        }
+        html.is-inline-search-open #recipe-filter-float-controls,
+        html.is-inline-search-open #pantry-top-controls,
+        html.is-inline-search-open #shopping-top-controls {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(0.35rem) scale(0.985);
+        }
+        .dark #pantry-filter-popover {
+            background: rgba(var(--app-bg-rgb), 0.82) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46) !important;
+        }
         #planner-picker-search-shell {
             min-height: 3rem;
             width: min(calc(100% - 0.5rem), 22.4rem);
@@ -476,6 +738,90 @@
                 inset 0 2px 7px rgba(var(--overlay-rgb), 0.18),
                 inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
         }
+        #planner-view #planner-cal-bar {
+            position: absolute !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            margin-top: 0 !important;
+            z-index: 20;
+            background: rgba(255, 255, 255, 0.5) !important;
+            border-bottom: 1px solid rgba(var(--line-rgb), 0.08) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #planner-view #planner-cal-bar {
+            background: rgba(35, 34, 32, 0.5) !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+        }
+        #planner-view #calendar-swipe-zone,
+        #planner-view #calendar-week-wrap,
+        #planner-view #calendar-month-wrap {
+            background: transparent !important;
+        }
+        #planner-view #planner-scroll {
+            padding-top: 10rem !important;
+        }
+        #planner-meal-slots .planner-add-meal {
+            background: rgba(var(--overlay-rgb), 0.05) !important;
+            border: 1px solid rgba(255, 255, 255, 0.28) !important;
+            color: rgb(var(--text-body-soft-rgb)) !important;
+            backdrop-filter: blur(18px) saturate(180%);
+            -webkit-backdrop-filter: blur(18px) saturate(180%);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 1px 3px rgba(var(--overlay-rgb), 0.08);
+            transition: background-color 160ms ease, transform 160ms ease;
+        }
+        #planner-meal-slots .planner-add-meal:hover {
+            background: rgba(var(--overlay-rgb), 0.1) !important;
+            transform: translateY(-1px);
+        }
+        #planner-meal-slots .planner-add-meal:active {
+            transform: scale(0.96);
+        }
+        .dark #planner-meal-slots .planner-add-meal {
+            background: rgba(255, 255, 255, 0.06) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.12),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .dark #planner-meal-slots .planner-add-meal:hover {
+            background: rgba(255, 255, 255, 0.1) !important;
+        }
+        #planner-meal-slots > div[data-slot-id] {
+            box-shadow:
+                0 2px 4px rgba(var(--overlay-rgb), 0.08),
+                0 14px 32px rgba(var(--overlay-rgb), 0.18) !important;
+        }
+        #planner-meal-slots > div[data-slot-id] > div:first-child {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+        }
+        .dark #planner-meal-slots > div[data-slot-id] {
+            box-shadow:
+                0 2px 4px rgba(0, 0, 0, 0.22),
+                0 14px 32px rgba(0, 0, 0, 0.4) !important;
+        }
+        .dark #planner-meal-slots > div[data-slot-id] > div:first-child {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        }
+        #planner-meal-slots .planner-kcal-pill {
+            background: rgba(var(--overlay-rgb), 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.28);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06);
+        }
+        .dark #planner-meal-slots .planner-kcal-pill {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.12),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22);
+        }
         #planner-picker-search {
             appearance: none;
             -webkit-appearance: none;
@@ -489,8 +835,7 @@
             font-weight: 400;
             letter-spacing: -0.02em;
         }
-        #planner-picker-search::placeholder,
+        #planner-picker-search::placeholder {
-        #pantry-search::placeholder {
             color: rgba(var(--text-body-soft-rgb), 0.72) !important;
             opacity: 1;
         }
@@ -536,28 +881,173 @@
             inset-inline: 0;
             bottom: 0;
             z-index: 30;
+            --dock-width: min(calc(100% - 2.4rem), 24.5rem);
+            --dock-pad: 0.42rem;
+            --dock-gap: 0.06rem;
+            --dock-radius: 999px;
+            --recipe-dock-width: var(--dock-width);
+            --recipe-bottom-control-size: 3.9rem;
+            --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
+            --recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
+            --recipe-collapsed-dock-radius: 999px;
+            --recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
             display: flex;
             justify-content: center;
             padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
             pointer-events: none;
+            transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+        html.is-inline-search-open #app-bottom-nav {
+            opacity: 1;
+            pointer-events: none;
+            transform: none;
+        }
+        #app-bottom-nav .recipe-nav-toggle {
+            display: none;
+            position: absolute;
+            top: var(--dock-pad);
+            bottom: var(--dock-pad);
+            left: var(--dock-pad);
+            width: var(--recipe-toggle-size);
+            height: auto;
+            margin: 0;
+            padding: 0;
+            border-radius: 999px;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+            pointer-events: auto;
+            cursor: pointer;
+            z-index: 2;
+            transition:
+                transform 220ms ease,
+                color 160ms ease,
+                background-color 160ms ease,
+                box-shadow 180ms ease,
+                opacity 280ms ease;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
+            background: transparent !important;
+            border-color: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+            -webkit-backdrop-filter: none;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
+            width: var(--recipe-collapsed-dock-width);
+            height: var(--recipe-collapsed-dock-height);
+            border-radius: var(--recipe-collapsed-dock-radius);
+            opacity: 1;
+            transform: translate(
+                calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
+            opacity: 0;
+            transform: translateY(0) scale(0.98);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
+            opacity: 1;
+            width: var(--recipe-dock-width);
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-compact-tab .bottom-dock {
+            width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
+            transform: translate(
+                var(--nav-compact-translate-x, 0px),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            border-radius: 999px;
         }
         #app-bottom-nav .bottom-dock {
             position: relative;
             box-sizing: border-box;
-            width: min(calc(100% - 2.4rem), 24.5rem);
+            width: var(--dock-width);
-            height: 3.34rem;
+            height: var(--recipe-bottom-control-size, 3.9rem);
             display: grid;
-            grid-template-columns: repeat(5, minmax(0, 1fr));
+            grid-template-columns: repeat(4, minmax(0, 1fr));
             align-items: stretch;
-            gap: 0.06rem;
+            gap: 0.02rem;
-            padding: 0.22rem;
+            padding: 0.28rem;
-            border-radius: 1.68rem;
+            border-radius: var(--dock-radius);
-            background: rgb(var(--card-rgb));
+            background: rgba(255, 255, 255, 0.2) !important;
-            border: 1px solid rgb(var(--border-card-rgb));
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            overflow: hidden;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
             box-shadow:
-                inset 0 1px 8px rgba(var(--overlay-rgb), 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
-                var(--shadow-shell);
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
             pointer-events: auto;
+            transform-origin: left center;
+            transition:
+                opacity 220ms ease,
+                width 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                height 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        html.is-inline-search-open #app-bottom-nav .bottom-dock {
+            width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            border-radius: 999px;
+            transform: translate(
+                calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) - var(--recipe-dock-width)) / 2),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            pointer-events: auto;
+        }
+        html.is-inline-search-open #app-bottom-nav .recipe-nav-toggle {
+            display: inline-flex;
+            width: var(--recipe-inline-toggle-size, var(--recipe-toggle-size));
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            background: transparent !important;
+            border-color: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+            -webkit-backdrop-filter: none;
+        }
+        html.is-inline-search-open #app-bottom-nav .nav-slot {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .dark #app-bottom-nav .bottom-dock {
+            background: rgba(255, 255, 255, 0.04) !important;
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
         }
         #app-bottom-nav .nav-slot {
             min-width: 0;
@@ -565,6 +1055,17 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            opacity: 1;
+            transition: opacity 140ms ease;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
+            opacity: 0;
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
+            opacity: 0;
+            transition: none;
+            pointer-events: none;
         }
         #app-bottom-nav .nav-tab,
         #app-bottom-nav .nav-action {
@@ -573,14 +1074,16 @@
             border: 0;
             background: transparent !important;
             box-shadow: none !important;
-            width: 2.18rem;
+            width: 2.33rem;
-            height: 2.18rem;
+            height: 2.33rem;
             margin: 0;
             padding: 0;
-            border-radius: 1.35rem;
+            border-radius: 999px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            flex-direction: column;
+            gap: 0.16rem;
             flex: 0 0 auto;
             color: rgba(var(--text-primary-rgb), 0.94);
             cursor: pointer;
@@ -592,9 +1095,34 @@
         }
         #app-bottom-nav .nav-tab i,
         #app-bottom-nav .nav-action i {
-            font-size: 0.95rem;
+            font-size: 0.88rem;
             line-height: 1;
         }
+        #app-bottom-nav .nav-label {
+            display: none;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.62rem;
+            font-weight: 500;
+            line-height: 1.18;
+        }
+        #app-bottom-nav .nav-tab.is-active::after {
+            display: block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.62rem;
+            font-weight: 500;
+            line-height: 1.18;
+            content: "";
+        }
+        #app-bottom-nav #nav-planner.is-active::after { content: "Planer"; }
+        #app-bottom-nav #nav-recipes.is-active::after { content: "Katalog"; }
+        #app-bottom-nav #nav-pantry.is-active::after { content: "Spiżarnia"; }
+        #app-bottom-nav #nav-shopping.is-active::after { content: "Zakupy"; }
         #app-bottom-nav .nav-tab:hover,
         #app-bottom-nav .nav-action:hover {
             transform: translateY(-1px);
@@ -602,12 +1130,40 @@
             background: var(--hover-overlay) !important;
         }
         #app-bottom-nav .nav-tab.is-active {
-            width: 100%;
+            width: min(100%, 4rem);
-            height: 100%;
+            height: 3.15rem;
+            padding: 0.32rem 0.22rem 0.28rem;
             color: rgb(var(--text-primary-rgb));
-            background: rgb(var(--app-bg-rgb)) !important;
+            background: rgba(var(--overlay-rgb), 0.24) !important;
-            border-radius: 1.46rem;
+            border-radius: 999px;
-            box-shadow: none !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.08),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
+        }
+        #app-bottom-nav .nav-tab.is-active .nav-label {
+            display: none;
+        }
+        #app-bottom-nav .nav-tab.is-active i {
+            font-size: 0.88rem;
+        }
+        #app-bottom-nav .nav-tab.is-active::after {
+            font-size: 0.66rem;
+            line-height: 1.1;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+            font-size: 0.62rem;
+            line-height: 1.24;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active {
+            height: 3.25rem;
+            padding: 0.28rem 0.2rem 0.32rem;
+        }
+        .dark #app-bottom-nav .nav-tab.is-active {
+            color: #fff;
+            background: rgba(0, 0, 0, 0.26) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.06),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
         }
         #app-bottom-nav .nav-tab:active,
         #app-bottom-nav .nav-action:active {
@@ -622,24 +1178,63 @@
         @media (max-width: 380px) {
             #app-bottom-nav {
                 padding-inline: 0.7rem;
+                --dock-width: min(calc(100% - 1.6rem), 22.5rem);
+                --dock-pad: 0.38rem;
+                --dock-gap: 0.05rem;
+                --dock-radius: 999px;
+                --recipe-bottom-control-size: 3.78rem;
+                --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
+                --recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
+                --recipe-collapsed-dock-radius: 999px;
             }
             #app-bottom-nav .bottom-dock {
-                width: min(calc(100% - 1.6rem), 22.5rem);
+                width: var(--dock-width);
-                height: 3.12rem;
+                height: var(--recipe-bottom-control-size, 3.78rem);
-                gap: 0.05rem;
+                gap: 0.01rem;
-                padding: 0.2rem;
+                padding: 0.24rem;
-                border-radius: 1.56rem;
+                border-radius: var(--dock-radius);
             }
             #app-bottom-nav .nav-tab,
             #app-bottom-nav .nav-action {
-                width: 2.02rem;
+                width: 2.18rem;
-                height: 2.02rem;
+                height: 2.18rem;
-                border-radius: 1.28rem;
+                border-radius: 999px;
             }
             #app-bottom-nav .nav-tab.is-active {
-                height: 100%;
+                width: min(100%, 3.72rem);
-                width: 100%;
+                height: 2.88rem;
-                border-radius: 1.36rem;
+                padding: 0.24rem 0.18rem 0.2rem;
+                border-radius: 999px;
+            }
+            #app-bottom-nav .nav-label {
+                font-size: 0.56rem;
+            }
+            #app-bottom-nav .nav-tab.is-active::after {
+                font-size: 0.62rem;
+            }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+                font-size: 0.58rem;
+                line-height: 1.24;
+            }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active {
+                height: 2.94rem;
+                padding: 0.22rem 0.18rem 0.24rem;
+            }
+            #app-bottom-nav.is-compact-tab .bottom-dock {
+                width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
+                transform: translate(
+                    var(--nav-compact-translate-x, 0px),
+                    calc(var(--recipe-controls-lift, 0px) * -1)
+                );
+            }
+            html.is-inline-search-open #app-bottom-nav.is-compact-tab .bottom-dock,
+            html.is-inline-search-open #app-bottom-nav .bottom-dock {
+                width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
+                height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
+                transform: translate(
+                    calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)) - var(--recipe-dock-width)) / 2),
+                    calc(var(--recipe-controls-lift, 0px) * -1)
+                );
             }
         }
 
@@ -665,14 +1260,18 @@
 </head>
 <body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
     <script>
-        const savedTheme = localStorage.getItem('theme');
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
+        const applySystemTheme = (isDark) => {
-        if (useDarkTheme) document.documentElement.classList.add('dark');
+            document.documentElement.classList.toggle('dark', isDark);
             const themeMeta = document.querySelector('meta[name="theme-color"]');
             if (themeMeta) {
-            const appBgRgb = getComputedStyle(document.documentElement).getPropertyValue('--app-bg-rgb').trim();
+                const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
-            if (appBgRgb) themeMeta.setAttribute('content', `rgb(${appBgRgb})`);
+                const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+                if (rgb) themeMeta.setAttribute('content', `rgb(${rgb})`);
             }
+        };
+        applySystemTheme(darkModeQuery.matches);
+        darkModeQuery.addEventListener('change', (e) => applySystemTheme(e.matches));
     </script>
 
     <div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
@@ -682,7 +1281,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260417-svg6';
+        const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 

js/ui/bottomNav.js

@@ -1,59 +1,32 @@
-function syncThemeToggleButton(btn, isDark) {
-    if (!btn) return;
-    const icon = btn.querySelector('i');
-    if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
-    btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
-    btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
-}
-
-function setupThemeToggle() {
-    const btn = document.getElementById('nav-theme-toggle');
-    if (!btn) return;
-
-    btn.addEventListener('click', () => {
-        const html = document.documentElement;
-        const isDark = html.classList.toggle('dark');
-        localStorage.setItem('theme', isDark ? 'dark' : 'light');
-
-        syncThemeToggleButton(btn, isDark);
-
-        const meta = document.querySelector('meta[name="theme-color"]');
-        if (meta) {
-            const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
-            const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-            if (rgb) meta.setAttribute('content', `rgb(${rgb})`);
-        }
-    });
-}
-
 export function getBottomNavHTML() {
-    const isDark = document.documentElement.classList.contains('dark');
     return `
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
-        <div class="bottom-dock">
+        <div id="app-bottom-nav-dock" class="bottom-dock">
+            <button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
+                <i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" aria-hidden="true"></i>
+            </button>
             <div class="nav-slot">
                 <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
                     <i class="far fa-calendar-alt" aria-hidden="true"></i>
+                    <span class="nav-label">Planer</span>
                 </button>
             </div>
             <div class="nav-slot">
-                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
-                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <i class="fas fa-book-open" aria-hidden="true"></i>
+                    <span class="nav-label">Katalog</span>
                 </button>
             </div>
             <div class="nav-slot">
                 <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
                     <i class="fas fa-warehouse" aria-hidden="true"></i>
+                    <span class="nav-label">Spiżarnia</span>
                 </button>
             </div>
             <div class="nav-slot" style="position:relative;">
                 <button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
                     <i class="fas fa-cart-shopping" aria-hidden="true"></i>
-                </button>
+                    <span class="nav-label">Zakupy</span>
-            </div>
-            <div class="nav-slot">
-                <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
-                    <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
                 </button>
             </div>
         </div>
@@ -70,12 +43,130 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     if (!main || !planner || !pantry || !shopping || !nav) return;
 
     const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
+    const COLLAPSED_TABS = new Set();
+    const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
+    const DOUBLE_COMPACT_TABS = new Set();
+    const COLLAPSED_TAB_ICON = {
+        recipes: 'fas fa-book-open',
+        planner: 'far fa-calendar-alt',
+        pantry: 'fas fa-warehouse',
+        shopping: 'fas fa-cart-shopping',
+    };
+    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu', planner: 'Otwórz menu', pantry: 'Otwórz menu', shopping: 'Otwórz menu' };
+    let isRecipeMenuOpen = false;
+    let activeTab = 'planner';
+    let previousTab = 'planner';
+    let collapseTimer = null;
+
+    const syncRecipeNavMetrics = () => {
+        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
+        const navStyles = window.getComputedStyle(nav);
+        const navPadLeft = parseFloat(navStyles.paddingLeft) || 0;
+        const navPadRight = parseFloat(navStyles.paddingRight) || 0;
+        const navContentWidth = nav.clientWidth - navPadLeft - navPadRight;
+        const isCompact = window.matchMedia('(max-width: 380px)').matches;
+        const dockInset = (isCompact ? 1.6 : 2.4) * rootFontSize;
+        const dockMax = (isCompact ? 22.5 : 24.5) * rootFontSize;
+        const dockWidth = Math.min(navContentWidth - dockInset, dockMax);
+        if (dockWidth <= 0) return;
+
+        const padLeft = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const padRight = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
+        const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
+        const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
+        const bottomControlSize = controlSize * 1.28;
+        const controlGap = 0.5 * rootFontSize;
+        const inlineSearchControlSize = bottomControlSize * 0.8;
+        const controlsLift = 0;
+        const collapsedDockWidth = bottomControlSize;
+        const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
+        const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
+        const controlCluster = bottomControlSize + controlGap;
+        const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
+        const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
+        const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
+        const inlineSearchCloseLeft = dockLeft + dockWidth - inlineSearchControlSize;
+        const inlineSearchFieldLeft = dockLeft + inlineSearchControlSize + controlGap;
+        const inlineSearchFieldRight = Math.max(16, nav.clientWidth - inlineSearchCloseLeft + controlGap);
+
+        nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
+        nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
+        nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
+        nav.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
+        nav.style.setProperty('--recipe-inline-toggle-size', `${inlineCollapsedSlotWidth}px`);
+        nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
+        nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
+        document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
+        document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
+        document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
+        document.documentElement.style.setProperty('--catalog-filter-left', `${toolbarButtonLeft}px`);
+        document.documentElement.style.setProperty('--catalog-search-btn-left', `${toolbarButtonLeft}px`);
+        document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-close-left', `${inlineSearchCloseLeft}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-field-left', `${inlineSearchFieldLeft}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-field-right', `${inlineSearchFieldRight}px`);
+        document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
+        document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
+        document.documentElement.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
+        document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
+    };
+
+    const updateToggleForTab = (tab) => {
+        const icon = document.getElementById('recipe-nav-toggle-icon');
+        const button = document.getElementById('recipe-nav-toggle');
+        const nextIconClass = COLLAPSED_TAB_ICON[tab];
+        if (icon && nextIconClass) {
+            icon.className = nextIconClass;
+        }
+        if (button && COLLAPSED_TAB_LABEL[tab]) {
+            button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
+        }
+    };
+
+    const setRecipeMenuOpen = (open) => {
+        syncRecipeNavMetrics();
+        window.clearTimeout(collapseTimer);
+        isRecipeMenuOpen = open;
+        nav.classList.remove('is-nav-collapsing');
+        nav.classList.toggle('is-nav-menu-open', open);
+        document.documentElement.classList.toggle('is-nav-menu-open', open);
+        document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
+    };
 
     const apply = (tab) => {
+        const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
+        const isCollapsedTab = COLLAPSED_TABS.has(tab);
+        const isCompactTab = (EXTRA_CONTROL_SLOTS[tab] || 0) > 0;
+        const isDoubleCompact = DOUBLE_COMPACT_TABS.has(tab);
         main.classList.toggle('hidden', tab !== 'recipes');
         planner.classList.toggle('hidden', tab !== 'planner');
         pantry.classList.toggle('hidden', tab !== 'pantry');
         shopping.classList.toggle('hidden', tab !== 'shopping');
+        nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
+        nav.classList.toggle('is-compact-tab', isCompactTab);
+        nav.classList.toggle('is-double-compact', isDoubleCompact);
+        activeTab = tab;
+        updateToggleForTab(tab);
+        syncRecipeNavMetrics();
+        setRecipeMenuOpen(false);
+
+        if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
+            nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
+            document.documentElement.classList.add('is-nav-menu-open');
+            document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        nav.classList.remove('is-nav-menu-open');
+                        document.documentElement.classList.remove('is-nav-menu-open');
+                        collapseTimer = window.setTimeout(() => {
+                            nav.classList.remove('is-nav-collapsing');
+                        }, 500);
+                    });
+                });
+            });
+        }
 
         if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
         if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
@@ -90,18 +181,60 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
                 else btn.removeAttribute('aria-current');
             }
         });
+
+        window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
+        previousTab = tab;
     };
 
     nav.addEventListener('click', (e) => {
+        const toggle = e.target.closest('#recipe-nav-toggle');
+        if (toggle) {
+            e.stopPropagation();
+            const wasInlineSearchOpen = document.documentElement.classList.contains('is-inline-search-open');
+            if (wasInlineSearchOpen) {
+                setRecipeMenuOpen(false);
+                window.closeRecipeSearch?.();
+                window.closePantrySearch?.();
+                window.closePantryFilter?.();
+                window.closeShoppingCalendar?.();
+                window.closeShoppingBoughtPopup?.();
+                window.closeFilters?.();
+                return;
+            }
+            setRecipeMenuOpen(!isRecipeMenuOpen);
+            window.closeRecipeSearch?.();
+            window.closePantrySearch?.();
+            window.closePantryFilter?.();
+            window.closeShoppingCalendar?.();
+            window.closeShoppingBoughtPopup?.();
+            window.closeFilters?.();
+            return;
+        }
+
         const btn = e.target.closest('.nav-tab[data-tab]');
         if (!btn || btn.hasAttribute('disabled')) return;
         const tab = btn.getAttribute('data-tab');
         if (TABS.includes(tab)) apply(tab);
     });
 
-    setupThemeToggle();
+    document.addEventListener('click', (e) => {
+        if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
+        if (e.composedPath().includes(nav)) return;
+        setRecipeMenuOpen(false);
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isRecipeMenuOpen) setRecipeMenuOpen(false);
+    });
+
+    window.addEventListener('resize', syncRecipeNavMetrics);
+
     apply('planner');
 
+    window.switchAppTab = (tab) => {
+        if (TABS.includes(tab)) apply(tab);
+    };
+
     window.refreshStockViews = () => {
         if (typeof refreshPantry === 'function') refreshPantry();
     };

js/ui/calendarPopover.js

@@ -0,0 +1,270 @@
+const STYLE_ID = 'calendar-popover-liquid-styles';
+const DEFAULT_POPOVER_CLASS = 'absolute left-0 right-0 top-full mt-2 z-[50] transition-all duration-200 pointer-events-none';
+const DEFAULT_POPOVER_STYLE = 'opacity:0; transform:translateY(-6px) scale(0.98);';
+const DEFAULT_PANEL_CLASS = 'calendar-liquid-panel rounded-[1.35rem] py-3';
+const DEFAULT_PANEL_STYLE = 'background-image:none !important;';
+
+const DEFAULT_OPEN_TRIGGER_STYLE = {
+    background: 'rgb(var(--sunken-rgb))',
+    borderColor: 'rgb(var(--border-input-rgb))',
+};
+
+const DEFAULT_CLOSED_TRIGGER_STYLE = {
+    background: 'rgb(var(--card-rgb))',
+    borderColor: 'rgb(var(--border-card-rgb))',
+};
+
+export function ensureCalendarPopoverStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+        .calendar-liquid-panel {
+            background: rgba(255, 255, 255, 0.2) !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+
+        .dark .calendar-liquid-panel {
+            background: rgba(255, 255, 255, 0.04) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+
+        .calendar-liquid-btn {
+            background: rgba(255, 255, 255, 0.16) !important;
+            border: 1px solid rgba(255, 255, 255, 0.24) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.45),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.08),
+                0 6px 14px rgba(var(--overlay-rgb), 0.14) !important;
+            backdrop-filter: blur(22px) saturate(165%);
+            -webkit-backdrop-filter: blur(22px) saturate(165%);
+            transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
+        }
+
+        .calendar-liquid-btn:hover {
+            background: rgba(255, 255, 255, 0.22) !important;
+            transform: translateY(-1px);
+        }
+
+        .dark .calendar-liquid-btn {
+            background: rgba(255, 255, 255, 0.06) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.2),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.2),
+                0 8px 18px rgba(0, 0, 0, 0.28) !important;
+        }
+
+        .dark .calendar-liquid-btn:hover {
+            background: rgba(255, 255, 255, 0.1) !important;
+        }
+
+        .calendar-liquid-btn input,
+        .calendar-liquid-btn input:focus,
+        .calendar-liquid-btn input:active {
+            background: transparent !important;
+            background-color: transparent !important;
+            background-image: none !important;
+            border: none !important;
+            box-shadow: none !important;
+            outline: none !important;
+            appearance: none !important;
+            -webkit-appearance: none !important;
+            -moz-appearance: textfield !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            filter: none !important;
+        }
+
+        .calendar-liquid-btn input[type='number']::-webkit-outer-spin-button,
+        .calendar-liquid-btn input[type='number']::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        .calendar-liquid-btn input:-webkit-autofill,
+        .calendar-liquid-btn input:-webkit-autofill:hover,
+        .calendar-liquid-btn input:-webkit-autofill:focus {
+            -webkit-text-fill-color: rgb(var(--text-body-rgb));
+            -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+            box-shadow: 0 0 0 1000px transparent inset !important;
+            transition: background-color 9999s ease-in-out 0s;
+        }
+
+    `;
+    document.head.appendChild(style);
+}
+
+function byId(idOrElement) {
+    if (!idOrElement) return null;
+    if (typeof idOrElement === 'string') return document.getElementById(idOrElement);
+    return idOrElement;
+}
+
+function setStyles(el, styles = {}, important = false) {
+    if (!el) return;
+    Object.entries(styles).forEach(([name, value]) => {
+        if (value == null) return;
+        if (important) {
+            const cssName = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+            el.style.setProperty(cssName, value, 'important');
+        }
+        else el.style[name] = value;
+    });
+}
+
+export function createCalendarPopoverHTML({
+    id,
+    calendarHTML,
+    popoverClass = DEFAULT_POPOVER_CLASS,
+    popoverStyle = DEFAULT_POPOVER_STYLE,
+    panelClass = DEFAULT_PANEL_CLASS,
+    panelStyle = DEFAULT_PANEL_STYLE,
+    wrapInPanel = true,
+}) {
+    ensureCalendarPopoverStyles();
+    const body = wrapInPanel
+        ? `<div class="${panelClass}" style="${panelStyle}">${calendarHTML}</div>`
+        : calendarHTML;
+    return `
+        <div id="${id}" class="${popoverClass}" style="${popoverStyle}">
+            ${body}
+        </div>
+    `;
+}
+
+export function syncCalendarPopoverVisibility({
+    popup,
+    isOpen,
+    chevron,
+    chevronOpenTransform = 'rotate(180deg)',
+    chevronClosedTransform = 'rotate(0deg)',
+    trigger,
+    openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
+    closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
+    triggerImportant = false,
+}) {
+    const popupEl = byId(popup);
+    if (popupEl) {
+        popupEl.style.opacity = isOpen ? '1' : '0';
+        popupEl.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
+        popupEl.style.pointerEvents = isOpen ? 'auto' : 'none';
+    }
+
+    const chevronEl = byId(chevron);
+    if (chevronEl) chevronEl.style.transform = isOpen ? chevronOpenTransform : chevronClosedTransform;
+
+    setStyles(
+        byId(trigger),
+        isOpen ? openTriggerStyle : closedTriggerStyle,
+        triggerImportant,
+    );
+}
+
+export function stabilizeSwipeCalendarLayout({
+    calendar,
+    viewport,
+    hideViewport = false,
+    maxAttempts = 8,
+}) {
+    const viewportEl = byId(viewport);
+    if (hideViewport && viewportEl) {
+        viewportEl.style.opacity = '0';
+        viewportEl.style.visibility = 'hidden';
+        viewportEl.style.transition = 'opacity 120ms ease';
+    }
+
+    calendar?.render?.();
+
+    const ensureStableLayout = (attempt = 0) => {
+        const width = viewportEl ? (viewportEl.clientWidth || viewportEl.getBoundingClientRect().width) : 0;
+        if (viewportEl && width < 8 && attempt < maxAttempts) {
+            requestAnimationFrame(() => ensureStableLayout(attempt + 1));
+            return;
+        }
+
+        calendar?.reapplyLayout?.();
+        calendar?.resetTrackPosition?.();
+        requestAnimationFrame(() => {
+            calendar?.reapplyLayout?.();
+            calendar?.resetTrackPosition?.();
+            if (hideViewport && viewportEl) {
+                viewportEl.style.visibility = 'visible';
+                viewportEl.style.opacity = '1';
+            }
+        });
+    };
+
+    requestAnimationFrame(() => ensureStableLayout());
+}
+
+export function createCalendarPopoverController({
+    popupId,
+    viewportId,
+    triggerId,
+    chevronId,
+    chevronOpenTransform,
+    chevronClosedTransform,
+    getCalendar,
+    openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
+    closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
+    triggerImportant = false,
+    hideViewportDuringLayout = false,
+}) {
+    const calendar = () => (typeof getCalendar === 'function' ? getCalendar() : null);
+
+    const sync = (isOpen) => {
+        syncCalendarPopoverVisibility({
+            popup: popupId,
+            isOpen,
+            chevron: chevronId,
+            chevronOpenTransform,
+            chevronClosedTransform,
+            trigger: triggerId,
+            openTriggerStyle,
+            closedTriggerStyle,
+            triggerImportant,
+        });
+    };
+
+    const stabilize = () => {
+        stabilizeSwipeCalendarLayout({
+            calendar: calendar(),
+            viewport: viewportId,
+            hideViewport: hideViewportDuringLayout,
+        });
+    };
+
+    const close = ({ clearPendingRange = false } = {}) => {
+        sync(false);
+        const instance = calendar();
+        if (clearPendingRange) instance?.clearPendingRange?.();
+        instance?.resetTrackPosition?.();
+    };
+
+    const open = () => {
+        sync(true);
+        stabilize();
+    };
+
+    return {
+        sync,
+        open,
+        close,
+        stabilize,
+    };
+}

js/ui/filterPopover.js

@@ -0,0 +1,75 @@
+const STYLE_ID = 'filter-popover-liquid-styles';
+
+export function ensureFilterPopoverStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+        .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
+            --filter-liquid-border: rgba(255, 255, 255, 0.32);
+            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
+            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
+            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
+            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
+            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.16),
+                0 22px 52px rgba(var(--overlay-rgb), 0.24);
+        }
+
+        .dark .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
+            --filter-liquid-border: rgba(255, 255, 255, 0.12);
+            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
+            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46);
+        }
+
+        .filter-liquid-panel {
+            isolation: isolate;
+            background: var(--filter-liquid-panel-bg) !important;
+            background-image: none !important;
+            border: 1px solid var(--filter-liquid-border) !important;
+            box-shadow: var(--filter-liquid-shadow) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+
+        .filter-liquid-surface.filter-liquid-panel-soft {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.52);
+        }
+
+        .dark .filter-liquid-surface.filter-liquid-panel-soft {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.6);
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+ensureFilterPopoverStyles();
+
+export function filterChipStyle(active) {
+    const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
+    const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
+    const borderRule = active
+        ? 'border:1px solid var(--filter-liquid-chip-active-border);'
+        : 'border:1px solid transparent;';
+    const shadow = active
+        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
+        : 'box-shadow:none;';
+    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
+}

js/ui/ingredientCard.js

@@ -19,6 +19,7 @@ import {
     updateKitchenItemAmount,
 } from '../services/pantryShopping.js?v=2';
 import { showAppToast } from './toast.js';
+import { ensureCalendarPopoverStyles } from './calendarPopover.js';
 
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
@@ -79,7 +80,7 @@ function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg
         const fit = image.endsWith('.svg') ? 'object-contain' : 'object-cover';
         return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} ${fit} shrink-0">`;
     }
-    return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
+    return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:transparent;"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
 }
 
 function compactMetaText(text, tone = 'default') {
@@ -123,6 +124,11 @@ function formatPackCount(amount, packSize) {
     return `${formatPreciseQty((Number(amount) || 0) / Number(packSize))} opak.`;
 }
 
+function parseQtyInput(value) {
+    const normalized = String(value ?? '').trim().replace(',', '.');
+    return normalizeQty(Number(normalized) || 0);
+}
+
 function getQtyStepMeta(def, product = null) {
     const productPackSize = Number(product?.packSize);
     if (Number.isFinite(productPackSize) && productPackSize > 0) {
@@ -152,17 +158,18 @@ function getQtyStepMeta(def, product = null) {
 export function getIngredientCardHTML({
     idBase,
     overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
-    overlayStyle = 'pointer-events:none; background:rgba(var(--overlay-rgb),0.5);',
+    overlayStyle = 'pointer-events:none;',
-    cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
+    cardClass = 'calendar-liquid-panel relative w-full max-w-xs rounded-2xl overflow-hidden',
-    cardStyle = 'background:rgb(var(--app-bg-rgb)); pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
+    cardStyle = 'pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
 } = {}) {
     if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
+    ensureCalendarPopoverStyles();
     return `
     <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
         <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
             <div class="relative px-4 pt-4 pb-2">
                 <div class="flex items-start gap-3 pr-10">
-                    <div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:rgb(var(--card-rgb));">
+                    <div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:transparent;">
                         <img id="${idBase}-img" class="w-full h-full hidden" alt="" />
                         <div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center">
                             <i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:rgb(var(--text-subdued-rgb));"></i>
@@ -170,7 +177,7 @@ export function getIngredientCardHTML({
                     </div>
                     <div class="flex-1 min-w-0 pt-0.5">
                         <div class="flex items-center gap-1.5">
-                            <button type="button" id="${idBase}-back" class="hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika">
+                            <button type="button" id="${idBase}-back" class="calendar-liquid-btn hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika">
                                 <i class="fas fa-chevron-left text-[9px]"></i>
                             </button>
                             <p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:rgb(var(--success-rgb));"></p>
@@ -179,7 +186,7 @@ export function getIngredientCardHTML({
                         <p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:rgb(var(--text-dim-rgb));"></p>
                     </div>
                 </div>
-                <button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Zamknij">
+                <button type="button" id="${idBase}-close" class="calendar-liquid-btn absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="color:rgb(var(--text-body-rgb));" aria-label="Zamknij">
                     <i class="fas fa-times text-sm"></i>
                 </button>
             </div>
@@ -371,28 +378,28 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
                         <p class="text-[16px] font-bold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(stockValueLabel)}</p>
                         ${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(stockSubLabel)}</p>` : ''}
                     </div>
-                    <button type="button" class="ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.stockEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
+                    <button type="button" class="calendar-liquid-btn ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
                         ${esc(actionLabel)}
                     </button>
                 </div>
                 ${state.stockEditorOpen ? `
                     <div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
                         <div class="flex items-center gap-2">
-                            <button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
+                            <button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
                                 <i class="fas fa-minus text-xs"></i>
                             </button>
-                            <label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));">
+                            <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
-                                <input type="number" min="0" step="${usesPackStep ? '1' : step}" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
+                                <input type="text" inputmode="decimal" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
                                 <span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(draftInputUnit)}</span>
                             </label>
-                            <button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu">
+                            <button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu">
                                 <i class="fas fa-plus text-xs"></i>
                             </button>
                         </div>
                         ${usesPackStep ? `<p class="text-[10px] mt-2 text-right" style="color:rgb(var(--text-dim-rgb));">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''}
                         <div class="flex items-center justify-between gap-3 mt-3">
                             <button type="button" class="ingredient-card-stock-clear text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Wyzeruj</button>
-                            <button type="button" class="ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button>
+                            <button type="button" class="calendar-liquid-btn ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
                         </div>
                     </div>` : ''}
             </div>`;
@@ -420,8 +427,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
 
         wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => {
             state.stockDraftQty = usesPackStep
-                ? normalizeQty((Number(event.target.value) || 0) * step)
+                ? normalizeQty(parseQtyInput(event.target.value) * step)
-                : normalizeQty(event.target.value);
+                : parseQtyInput(event.target.value);
         });
 
         wrap.querySelector('.ingredient-card-stock-clear')?.addEventListener('click', () => {
@@ -432,8 +439,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         wrap.querySelector('.ingredient-card-stock-save')?.addEventListener('click', () => {
             const input = wrap.querySelector('.ingredient-card-stock-input');
             const nextQty = usesPackStep
-                ? normalizeQty((Number(input?.value) || 0) * step)
+                ? normalizeQty(parseQtyInput(input?.value) * step)
-                : normalizeQty(input?.value ?? state.stockDraftQty ?? qty);
+                : parseQtyInput(input?.value ?? state.stockDraftQty ?? qty);
             if (product) {
                 setPantryProductQty(def.id, product.id, nextQty);
             } else {
@@ -480,21 +487,21 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
                             <p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? 'rgb(var(--text-body-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(shopValueLabel)}</p>
                             ${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(shopSubLabel)}</p>` : ''}
                     </div>
-                    <button type="button" class="ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.shopEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
+                    <button type="button" class="calendar-liquid-btn ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
                         ${esc(actionLabel)}
                     </button>
                 </div>
                 ${state.shopEditorOpen ? `
                     <div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
                         <div class="flex items-center gap-2">
-                            <button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście">
+                            <button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście">
                                 <i class="fas fa-minus text-xs"></i>
                             </button>
-                            <label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));">
+                            <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
-                                <input type="number" min="0" step="${usesPackStep ? '1' : defaultAmount}" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
+                                <input type="text" inputmode="decimal" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
                                 <span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(shopInputUnit)}</span>
                             </label>
-                            <button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście">
+                            <button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście">
                                 <i class="fas fa-plus text-xs"></i>
                             </button>
                         </div>
@@ -503,7 +510,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
                             ${hasShoppingItem
                                 ? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Usuń z listy</button>'
                                 : '<span></span>'}
-                            <button type="button" class="ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button>
+                            <button type="button" class="calendar-liquid-btn ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
                         </div>
                     </div>` : ''}
             </div>`;
@@ -531,8 +538,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
 
         wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => {
             state.shopDraftQty = usesPackStep
-                ? normalizeQty((Number(event.target.value) || 0) * step)
+                ? normalizeQty(parseQtyInput(event.target.value) * step)
-                : normalizeQty(event.target.value);
+                : parseQtyInput(event.target.value);
         });
 
         wrap.querySelector('.ingredient-card-shop-remove')?.addEventListener('click', () => {
@@ -549,8 +556,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         wrap.querySelector('.ingredient-card-shop-save')?.addEventListener('click', () => {
             const input = wrap.querySelector('.ingredient-card-shop-input');
             const nextAmount = usesPackStep
-                ? normalizeQty((Number(input?.value) || 0) * step)
+                ? normalizeQty(parseQtyInput(input?.value) * step)
-                : normalizeQty(input?.value ?? state.shopDraftQty ?? defaultAmount);
+                : parseQtyInput(input?.value ?? state.shopDraftQty ?? defaultAmount);
             let toastText = null;
             if (shoppingItem) {
                 updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);

js/ui/mealCalendar.js

@@ -1,6 +1,9 @@
 import {
     addDays,
+    addMonths,
+    addWeeks,
     sameDay,
+    sameMonth,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
@@ -21,10 +24,19 @@ export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd
 export const CALENDAR_DAY_ATTR = 'data-calendar-day';
 export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[rgb(var(--text-subdued-rgb))]/75';
 
-function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
+function escapeAttrValue(value) {
+    return String(value)
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/</g, '&lt;');
+}
+
+function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}, options = {}) {
     const { mode, selectedDate } = meta;
-    const isSelected = selectedDate && sameDay(day, selectedDate);
+    const isSelected = typeof meta.isSelected === 'boolean'
-    const showIndicator = !!dayState.showIndicator;
+        ? meta.isSelected
+        : !!(selectedDate && sameDay(day, selectedDate));
+    const showIndicator = !!(dayState.showIndicator || dayState.showDot);
     const isDisabled = !!dayState.disabled;
     const isDimmed = !!dayState.dimmed && !isSelected;
     const defaultBg = 'rgb(var(--card-soft-rgb))';
@@ -34,16 +46,25 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
     let bg;
     let borderColor;
     let text;
-    let borderClass = 'border';
+    let borderClass = theme.borderClass || 'border';
+    let shadow = theme.shadow || 'none';
 
     if (isSelected) {
-        bg = theme.selectedBg || 'rgb(var(--card-rgb))';
+        const keepDimmedBg = !!dayState.dimmed
+            && theme.selectedBg == null
+            && theme.selectedUsesDimmedBg !== false;
+        bg = theme.selectedBg
+            || (keepDimmedBg ? (theme.dimmedBg ?? 'transparent') : null)
+            || theme.bg
+            || 'rgb(var(--card-rgb))';
         borderColor = theme.selectedBorder || 'rgb(var(--border-input-rgb))';
         text = theme.selectedText || 'rgb(var(--text-emphasis-rgb))';
+        shadow = theme.selectedShadow || shadow;
+        borderClass = theme.selectedBorderClass || 'border';
     } else if (isDimmed) {
         bg = theme.dimmedBg ?? 'transparent';
         text = theme.dimText || 'rgb(var(--text-faint-rgb))';
-        borderClass = 'border-0';
+        borderClass = theme.dimmedBorderClass || 'border-0';
     } else {
         bg = theme.bg || defaultBg;
         borderColor = theme.border || defaultBorder;
@@ -53,18 +74,23 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
     const dot = isSelected ? (theme.selectedDot || 'rgb(var(--text-emphasis-rgb))') : (theme.dot || 'rgb(var(--text-faint-rgb))');
     const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
     const borderStyle = borderColor ? `border-color:${borderColor};` : 'border:none;';
-    const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
+    const extraClass = !isDisabled && options.dayClassName ? ` ${options.dayClassName}` : '';
+    const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass}${extraClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
     const innerClass = mode === 'month'
         ? 'relative flex h-full w-full flex-col items-center justify-center'
         : 'relative flex h-full w-full items-center justify-center';
     const dotBottom = mode === 'month' ? '0.24rem' : '0.2rem';
     const tagName = isDisabled ? 'div' : 'button';
-    const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
+    const dayAttrValue = typeof options.getDayAttrValue === 'function'
+        ? options.getDayAttrValue(day, meta)
+        : day.getTime();
+    const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${escapeAttrValue(dayAttrValue)}"`;
+    const dayStyle = options.dayStyle || '';
 
     return `
         <${tagName}${buttonAttrs}
             class="${outerClass}"
-            style="background:${bg};${borderStyle}color:${text};opacity:${opacity};">
+            style="background:${bg};${borderStyle}color:${text};opacity:${opacity};box-shadow:${shadow};${dayStyle}">
             <span class="${innerClass}">
                 <span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
                 ${showIndicator
@@ -75,12 +101,13 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
     `;
 }
 
-function getMonthCells(monthAnchor) {
+export function getCalendarMonthCells(monthAnchor, { fixedWeekCount = null } = {}) {
     const first = startOfMonth(monthAnchor);
     const startGrid = startOfWeekMonday(first);
     const cells = [];
-    for (let i = 0; i < 42; i++) cells.push(addDays(startGrid, i));
+    const maxCells = fixedWeekCount ? fixedWeekCount * 7 : 42;
-    while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
+    for (let i = 0; i < maxCells; i++) cells.push(addDays(startGrid, i));
+    while (!fixedWeekCount && cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
         cells.splice(-7);
     }
     return { cells, month: first.getMonth() };
@@ -99,7 +126,7 @@ function getDayState(day, meta, resolveDayState) {
     return {
         disabled: !!resolved.disabled,
         dimmed: !!resolved.dimmed,
-        showIndicator: !!resolved.showIndicator,
+        showIndicator: !!(resolved.showIndicator || resolved.showDot),
     };
 }
 
@@ -114,34 +141,64 @@ export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT
 }
 
 export function createCalendarTopbarHTML({
-    prevId,
     todayId,
-    nextId,
     wrapperClass = 'px-4 pt-4 pb-3 flex items-center justify-end',
-    controlsStyle = 'background:rgb(var(--card-soft-rgb));border-color:rgb(var(--card-strong-rgb));',
+    controlsStyle = 'background:transparent;border-color:rgb(var(--card-strong-rgb));',
-    navButtonClass = 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[rgb(var(--text-body-soft-rgb))] transition-colors',
+    todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
-    todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
+    todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-3 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
-    todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
 }) {
     return `
         <div class="${wrapperClass}">
-            <div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center gap-px rounded-full border px-0.5" style="${controlsStyle}">
+            <div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center justify-center rounded-full border" style="${controlsStyle}">
-                <button type="button" id="${prevId}" class="${navButtonClass}" aria-label="Poprzedni okres">
-                    <i class="fas fa-chevron-left text-[10px]" aria-hidden="true"></i>
-                </button>
                 <button type="button" id="${todayId}"
                         class="${todayButtonActiveClass}"
                         data-cal-active-class="${todayButtonActiveClass}"
                         data-cal-dim-class="${todayButtonDimClass}">
                 </button>
-                <button type="button" id="${nextId}" class="${navButtonClass}" aria-label="Następny okres">
-                    <i class="fas fa-chevron-right text-[10px]" aria-hidden="true"></i>
-                </button>
             </div>
         </div>
     `;
 }
 
+export function createCollapsibleCalendarHTML({
+    idPrefix = 'calendar',
+    swipeZoneId = `${idPrefix}-swipe-zone`,
+    weekWrapId = `${idPrefix}-week-wrap`,
+    weekGridId = `${idPrefix}-week-grid`,
+    monthWrapId = `${idPrefix}-month-wrap`,
+    monthGridId = `${idPrefix}-month-grid`,
+    toggleId = `${idPrefix}-mode-toggle`,
+    iconId = `${idPrefix}-handle-icon`,
+    wrapperClass = 'overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
+    wrapperStyle = 'touch-action: none',
+    weekWrapClass = 'px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
+    weekWrapStyle = 'overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem',
+    monthWrapClass = 'px-3 bg-[rgb(var(--app-bg-rgb))]',
+    monthWrapStyle = 'overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0',
+    weekGridClass = 'grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden',
+    monthGridClass = 'grid grid-cols-7 gap-1.5',
+    toggleClass = 'w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors',
+    toggleLabel = 'Przełącz widok kalendarza',
+    weekdayLabels = CALENDAR_WEEKDAYS_SHORT,
+    weekdayHeaderOptions = {},
+} = {}) {
+    return `
+        <div id="${swipeZoneId}" class="${wrapperClass}" style="${wrapperStyle}">
+            <div id="${weekWrapId}" class="${weekWrapClass}" style="${weekWrapStyle}">
+                ${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
+                <div id="${weekGridId}" class="${weekGridClass}"></div>
+            </div>
+            <div id="${monthWrapId}" class="${monthWrapClass}" style="${monthWrapStyle}">
+                ${createCalendarWeekdayHeaderHTML(weekdayLabels, weekdayHeaderOptions)}
+                <div id="${monthGridId}" class="${monthGridClass}"></div>
+            </div>
+            <button id="${toggleId}" type="button" class="${toggleClass}" aria-label="${toggleLabel}">
+                <i id="${iconId}" class="fas fa-chevron-down text-[10px]"></i>
+            </button>
+        </div>
+    `;
+}
+
 export function formatCalendarMonthYear(date) {
     return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
 }
@@ -150,6 +207,27 @@ export function formatCalendarSelectedDate(date) {
     return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
 }
 
+export function formatCalendarWeekRange(weekAnchorDate) {
+    const start = startOfWeekMonday(weekAnchorDate);
+    const end = addDays(start, 6);
+    const sameYear = start.getFullYear() === end.getFullYear();
+    const sameMonth = sameYear && start.getMonth() === end.getMonth();
+
+    if (sameMonth) {
+        return `${start.getDate()}–${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
+    }
+    if (sameYear) {
+        return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
+    }
+    return `${start.getDate()} ${CALENDAR_MONTHS_SHORT[start.getMonth()]} ${start.getFullYear()} – ${end.getDate()} ${CALENDAR_MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
+}
+
+export function formatCalendarPeriodLabel(mode, weekAnchorDate, monthAnchorDate) {
+    return mode === 'week'
+        ? formatCalendarWeekRange(weekAnchorDate)
+        : formatCalendarMonthYear(monthAnchorDate);
+}
+
 export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
     const today = startOfDay(new Date());
     if (!sameDay(selectedDate, today)) return false;
@@ -166,10 +244,13 @@ export function syncCalendarTodayButton(buttonEl, isOnToday, selectedDate, optio
     const {
         ariaLabelGo = 'Przejdź do dzisiejszego dnia',
         ariaLabelCurrent = 'Widok jest ustawiony na bieżący okres',
+        labelText,
     } = options;
     const active = buttonEl.dataset.calActiveClass
-        || 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
+        || 'h-full shrink-0 inline-flex min-w-[7.25rem] max-w-[12.5rem] items-center justify-center rounded-full bg-transparent px-3 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
-    if (selectedDate != null) {
+    if (labelText != null) {
+        buttonEl.textContent = labelText;
+    } else if (selectedDate != null) {
         buttonEl.textContent = formatCalendarSelectedDate(selectedDate);
     }
     buttonEl.className = active;
@@ -183,8 +264,13 @@ export function renderCalendarGrid({
     mode,
     anchorDate,
     selectedDate,
+    isSelectedDate,
     resolveDayState,
     dayAttr = CALENDAR_DAY_ATTR,
+    getDayAttrValue,
+    dayClassName = '',
+    dayStyle = '',
+    fixedWeekCount = null,
     theme,
 }) {
     if (!gridEl) return;
@@ -194,25 +280,48 @@ export function renderCalendarGrid({
         const cells = [];
         for (let i = 0; i < 7; i++) {
             const day = addDays(weekStart, i);
+            const selected = typeof isSelectedDate === 'function'
+                ? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth: true })
+                : !!(selectedDate && sameDay(day, selectedDate));
             const meta = {
                 mode,
                 selectedDate,
                 inCurrentMonth: true,
+                isSelected: selected,
             };
-            cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme));
+            cells.push(getCalendarDayHTML(
+                day,
+                meta,
+                getDayState(day, meta, resolveDayState),
+                dayAttr,
+                theme,
+                { getDayAttrValue, dayClassName, dayStyle },
+            ));
         }
         gridEl.innerHTML = cells.join('');
         return;
     }
 
-    const { cells, month } = getMonthCells(anchorDate);
+    const { cells, month } = getCalendarMonthCells(anchorDate, { fixedWeekCount });
     gridEl.innerHTML = cells.map((day) => {
+        const inCurrentMonth = day.getMonth() === month;
+        const selected = typeof isSelectedDate === 'function'
+            ? !!isSelectedDate(day, { mode, selectedDate, inCurrentMonth })
+            : !!(selectedDate && sameDay(day, selectedDate));
         const meta = {
             mode,
             selectedDate,
-            inCurrentMonth: day.getMonth() === month,
+            inCurrentMonth,
+            isSelected: selected,
         };
-        return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme);
+        return getCalendarDayHTML(
+            day,
+            meta,
+            getDayState(day, meta, resolveDayState),
+            dayAttr,
+            theme,
+            { getDayAttrValue, dayClassName, dayStyle },
+        );
     }).join('');
 }
 
@@ -224,6 +333,7 @@ export function renderCollapsibleCalendar({
     selectedDate,
     resolveDayState,
     dayAttr = CALENDAR_DAY_ATTR,
+    theme,
 }) {
     renderCalendarGrid({
         gridEl: weekGridEl,
@@ -232,6 +342,7 @@ export function renderCollapsibleCalendar({
         selectedDate,
         resolveDayState,
         dayAttr,
+        theme,
     });
     renderCalendarGrid({
         gridEl: monthGridEl,
@@ -240,6 +351,7 @@ export function renderCollapsibleCalendar({
         selectedDate,
         resolveDayState,
         dayAttr,
+        theme,
     });
 }
 
@@ -265,6 +377,253 @@ export function syncCollapsibleCalendarMode({
     if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
 }
 
+export function syncCollapsibleCalendarToggleIcon(iconEl, mode) {
+    if (iconEl) iconEl.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
+}
+
+export function bindCollapsibleCalendarSwipeGesture({
+    zoneEl,
+    weekWrapEl,
+    monthWrapEl,
+    getMode,
+    setMode,
+    getWeekAnchor,
+    setWeekAnchor,
+    getMonthAnchor,
+    setMonthAnchor,
+    getSelectedDate,
+    setSelectedDate,
+    rerender,
+    resolveDayState,
+    dayAttr = CALENDAR_DAY_ATTR,
+    theme,
+    selectOnNavigateOutside = true,
+    enableVerticalModeSwipe = true,
+    threshold = 40,
+    animationMs = 260,
+} = {}) {
+    if (!zoneEl) return () => {};
+
+    let startX = 0;
+    let startY = 0;
+    let ptrId = null;
+    let moved = false;
+    let axisLocked = null;
+    let suppressClickUntil = 0;
+    let animatingNav = false;
+
+    let dragWrap = null;
+    let wrapWidth = 0;
+    let prevGhost = null;
+    let nextGhost = null;
+    let prevWrapPosition = '';
+    let prevWrapOverflow = '';
+
+    const getActiveWrap = () => (getMode?.() === 'week' ? weekWrapEl : monthWrapEl);
+
+    const buildGhost = (anchorDate, mode) => {
+        if (!dragWrap) return null;
+        const ghost = dragWrap.cloneNode(true);
+        ghost.removeAttribute('id');
+        ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+        ghost.style.position = 'absolute';
+        ghost.style.top = '0';
+        ghost.style.width = '100%';
+        ghost.style.pointerEvents = 'none';
+        ghost.setAttribute('aria-hidden', 'true');
+        let ghostGridEl = null;
+        ghost.querySelectorAll('.grid-cols-7').forEach((grid) => {
+            if (!grid.classList.contains('text-center')) ghostGridEl = grid;
+        });
+        if (ghostGridEl) {
+            renderCalendarGrid({
+                gridEl: ghostGridEl,
+                mode,
+                anchorDate,
+                selectedDate: getSelectedDate?.(),
+                resolveDayState,
+                dayAttr,
+                theme,
+            });
+        }
+        return ghost;
+    };
+
+    const activateCarousel = () => {
+        const mode = getMode?.() || 'week';
+        dragWrap = getActiveWrap();
+        if (!dragWrap) return;
+        wrapWidth = dragWrap.getBoundingClientRect().width || zoneEl.getBoundingClientRect().width;
+        if (wrapWidth <= 0) return;
+        prevWrapPosition = dragWrap.style.position;
+        prevWrapOverflow = dragWrap.style.overflow;
+        dragWrap.style.position = 'relative';
+        dragWrap.style.overflow = 'visible';
+
+        const prevAnchor = mode === 'week'
+            ? addWeeks(getWeekAnchor?.() || new Date(), -1)
+            : addMonths(getMonthAnchor?.() || new Date(), -1);
+        const nextAnchor = mode === 'week'
+            ? addWeeks(getWeekAnchor?.() || new Date(), 1)
+            : addMonths(getMonthAnchor?.() || new Date(), 1);
+
+        prevGhost = buildGhost(prevAnchor, mode);
+        nextGhost = buildGhost(nextAnchor, mode);
+        if (prevGhost) {
+            prevGhost.style.left = `-${wrapWidth}px`;
+            dragWrap.appendChild(prevGhost);
+        }
+        if (nextGhost) {
+            nextGhost.style.left = `${wrapWidth}px`;
+            dragWrap.appendChild(nextGhost);
+        }
+        dragWrap.style.willChange = 'transform';
+        dragWrap.style.transition = 'none';
+    };
+
+    const clearCarousel = () => {
+        if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
+        if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
+        prevGhost = null;
+        nextGhost = null;
+        if (dragWrap) {
+            dragWrap.style.transition = '';
+            dragWrap.style.transform = '';
+            dragWrap.style.willChange = '';
+            dragWrap.style.position = prevWrapPosition;
+            dragWrap.style.overflow = prevWrapOverflow;
+        }
+        dragWrap = null;
+    };
+
+    const setTranslate = (x, ms) => {
+        if (!dragWrap) return;
+        dragWrap.style.transition = ms ? `transform ${ms}ms ease` : 'none';
+        dragWrap.style.transform = `translate3d(${x}px, 0, 0)`;
+    };
+
+    const onPointerDown = (event) => {
+        if (ptrId !== null || animatingNav) return;
+        if (event.pointerType === 'mouse' && event.button !== 0) return;
+        startX = event.clientX;
+        startY = event.clientY;
+        ptrId = event.pointerId;
+        moved = false;
+        axisLocked = null;
+        try { zoneEl.setPointerCapture(event.pointerId); } catch (_) {}
+    };
+
+    const onPointerMove = (event) => {
+        if (event.pointerId !== ptrId) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+        if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
+            moved = true;
+            axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+            if (axisLocked === 'x') activateCarousel();
+        }
+        if (axisLocked === 'x' && dragWrap) {
+            setTranslate(dx, 0);
+        }
+    };
+
+    const onPointerUp = (event) => {
+        if (event.pointerId !== ptrId) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+        ptrId = null;
+
+        if (!moved) return;
+        const horizontal = axisLocked === 'x';
+
+        if (horizontal && dragWrap) {
+            if (Math.abs(dx) < threshold) {
+                setTranslate(0, animationMs);
+                setTimeout(clearCarousel, animationMs + 20);
+                return;
+            }
+
+            suppressClickUntil = performance.now() + 500;
+            animatingNav = true;
+            const targetX = dx > 0 ? wrapWidth : -wrapWidth;
+            setTranslate(targetX, animationMs);
+            setTimeout(() => {
+                const mode = getMode?.() || 'week';
+                const sign = dx > 0 ? -1 : 1;
+                const selected = getSelectedDate?.();
+                if (mode === 'week') {
+                    const nextWeek = addWeeks(getWeekAnchor?.() || selected || new Date(), sign);
+                    setWeekAnchor?.(nextWeek);
+                    if (selectOnNavigateOutside && selected && !weekContains(nextWeek, selected)) {
+                        setSelectedDate?.(new Date(nextWeek));
+                    }
+                } else {
+                    const nextMonth = addMonths(getMonthAnchor?.() || selected || new Date(), sign);
+                    setMonthAnchor?.(nextMonth);
+                    if (selectOnNavigateOutside && selected && !sameMonth(nextMonth, selected)) {
+                        setSelectedDate?.(startOfMonth(nextMonth));
+                    }
+                }
+                clearCarousel();
+                rerender?.();
+                animatingNav = false;
+            }, animationMs);
+            return;
+        }
+
+        if (enableVerticalModeSwipe && !horizontal && Math.abs(dy) >= 30) {
+            const mode = getMode?.() || 'week';
+            const selected = getSelectedDate?.() || new Date();
+            let triggered = false;
+            if (mode === 'week' && dy > 0) {
+                setMode?.('month');
+                setMonthAnchor?.(startOfMonth(selected));
+                triggered = true;
+            } else if (mode === 'month' && dy < 0) {
+                setMode?.('week');
+                setWeekAnchor?.(startOfWeekMonday(selected));
+                triggered = true;
+            }
+            if (triggered) {
+                suppressClickUntil = performance.now() + 350;
+                rerender?.();
+            }
+        }
+    };
+
+    const onClickCapture = (event) => {
+        if (performance.now() < suppressClickUntil) {
+            event.stopPropagation();
+            event.preventDefault();
+            suppressClickUntil = 0;
+        }
+    };
+
+    const onPointerCancel = () => {
+        ptrId = null;
+        moved = false;
+        if (dragWrap) {
+            setTranslate(0, animationMs);
+            setTimeout(clearCarousel, animationMs + 20);
+        }
+    };
+
+    zoneEl.addEventListener('pointerdown', onPointerDown);
+    zoneEl.addEventListener('pointermove', onPointerMove);
+    zoneEl.addEventListener('pointerup', onPointerUp);
+    zoneEl.addEventListener('click', onClickCapture, { capture: true });
+    zoneEl.addEventListener('pointercancel', onPointerCancel);
+
+    return () => {
+        zoneEl.removeEventListener('pointerdown', onPointerDown);
+        zoneEl.removeEventListener('pointermove', onPointerMove);
+        zoneEl.removeEventListener('pointerup', onPointerUp);
+        zoneEl.removeEventListener('click', onClickCapture, { capture: true });
+        zoneEl.removeEventListener('pointercancel', onPointerCancel);
+        if (dragWrap) clearCarousel();
+    };
+}
+
 export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
     if (!containerEl || typeof onSelect !== 'function') return;
     containerEl.addEventListener('click', (event) => {
@@ -275,3 +634,208 @@ export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_
         onSelect(new Date(ts), button, event);
     });
 }
+
+/**
+ * Binds a carousel-style horizontal swipe on zoneEl. Swipe right → onPrev,
+ * swipe left → onNext. Pass `renderGhost(ghostGridEl, direction)` to render
+ * adjacent periods that appear alongside the zone during the gesture. The
+ * callback can return `false` to block that direction (ghost not added).
+ * Returns an unbind function.
+ */
+export function bindCalendarHorizontalSwipe(zoneEl, {
+    onPrev,
+    onNext,
+    renderGhost,
+    threshold = 40,
+    animationMs = 260,
+} = {}) {
+    if (!zoneEl) return () => {};
+
+    let ptrId = null;
+    let startX = 0;
+    let startY = 0;
+    let moved = false;
+    let axisLocked = null;
+    let suppressClickUntil = 0;
+    let animatingNav = false;
+
+    let wrapWidth = 0;
+    let prevGhost = null;
+    let nextGhost = null;
+    let savedStyles = null;
+    let carouselActive = false;
+
+    const prevTouchAction = zoneEl.style.touchAction;
+    const prevUserSelect = zoneEl.style.userSelect;
+    zoneEl.style.touchAction = 'pan-y';
+    zoneEl.style.userSelect = 'none';
+
+    const buildGhost = (direction) => {
+        if (typeof renderGhost !== 'function') return null;
+        const ghost = zoneEl.cloneNode(false);
+        ghost.removeAttribute('id');
+        ghost.style.position = 'absolute';
+        ghost.style.top = '0';
+        ghost.style.width = '100%';
+        ghost.style.pointerEvents = 'none';
+        ghost.setAttribute('aria-hidden', 'true');
+        let ok = true;
+        try {
+            const res = renderGhost(ghost, direction);
+            if (res === false) ok = false;
+        } catch (_) { ok = false; }
+        return ok ? ghost : null;
+    };
+
+    const activateCarousel = () => {
+        if (typeof renderGhost !== 'function') return;
+        wrapWidth = zoneEl.getBoundingClientRect().width;
+        if (wrapWidth <= 0) return;
+        const parentEl = zoneEl.parentElement;
+        savedStyles = {
+            position: zoneEl.style.position,
+            overflow: zoneEl.style.overflow,
+            parentEl,
+            parentOverflow: parentEl ? parentEl.style.overflow : '',
+        };
+        zoneEl.style.position = 'relative';
+        zoneEl.style.overflow = 'visible';
+        if (parentEl) parentEl.style.overflow = 'hidden';
+
+        prevGhost = buildGhost('prev');
+        if (prevGhost) {
+            prevGhost.style.left = `-${wrapWidth}px`;
+            zoneEl.appendChild(prevGhost);
+        }
+        nextGhost = buildGhost('next');
+        if (nextGhost) {
+            nextGhost.style.left = `${wrapWidth}px`;
+            zoneEl.appendChild(nextGhost);
+        }
+
+        zoneEl.style.willChange = 'transform';
+        zoneEl.style.transition = 'none';
+        carouselActive = true;
+    };
+
+    const clearCarousel = () => {
+        if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
+        if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
+        prevGhost = null;
+        nextGhost = null;
+        if (savedStyles) {
+            zoneEl.style.position = savedStyles.position;
+            zoneEl.style.overflow = savedStyles.overflow;
+            if (savedStyles.parentEl) savedStyles.parentEl.style.overflow = savedStyles.parentOverflow;
+            savedStyles = null;
+        }
+        zoneEl.style.transition = '';
+        zoneEl.style.transform = '';
+        zoneEl.style.willChange = '';
+        carouselActive = false;
+    };
+
+    const setTranslate = (x, ms) => {
+        zoneEl.style.transition = ms ? `transform ${ms}ms ease` : 'none';
+        zoneEl.style.transform = `translate3d(${x}px, 0, 0)`;
+    };
+
+    const onDown = (e) => {
+        if (ptrId !== null || animatingNav) return;
+        if (e.pointerType === 'mouse' && e.button !== 0) return;
+        startX = e.clientX;
+        startY = e.clientY;
+        ptrId = e.pointerId;
+        moved = false;
+        axisLocked = null;
+        try { zoneEl.setPointerCapture(e.pointerId); } catch (_) {}
+        if (e.pointerType === 'mouse') e.preventDefault();
+    };
+
+    const onMove = (e) => {
+        if (e.pointerId !== ptrId) return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
+            moved = true;
+            axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+            if (axisLocked === 'x') activateCarousel();
+        }
+        if (axisLocked === 'x' && carouselActive) {
+            let tx = dx;
+            if (dx > 0 && !prevGhost) tx = dx * 0.15;
+            if (dx < 0 && !nextGhost) tx = dx * 0.15;
+            setTranslate(tx, 0);
+        }
+    };
+
+    const onUp = (e) => {
+        if (e.pointerId !== ptrId) return;
+        const dx = e.clientX - startX;
+        ptrId = null;
+
+        if (!moved || axisLocked !== 'x' || !carouselActive) {
+            if (carouselActive) {
+                setTranslate(0, animationMs);
+                setTimeout(clearCarousel, animationMs + 20);
+            }
+            return;
+        }
+
+        const directionGhost = dx > 0 ? prevGhost : nextGhost;
+        const handler = dx > 0 ? onPrev : onNext;
+        const passes = Math.abs(dx) >= threshold
+            && directionGhost
+            && typeof handler === 'function';
+
+        if (!passes) {
+            setTranslate(0, animationMs);
+            setTimeout(clearCarousel, animationMs + 20);
+            return;
+        }
+
+        suppressClickUntil = performance.now() + 500;
+        animatingNav = true;
+        const targetX = dx > 0 ? wrapWidth : -wrapWidth;
+        setTranslate(targetX, animationMs);
+        setTimeout(() => {
+            clearCarousel();
+            handler();
+            animatingNav = false;
+        }, animationMs);
+    };
+
+    const onClickCapture = (ev) => {
+        if (performance.now() < suppressClickUntil) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            suppressClickUntil = 0;
+        }
+    };
+
+    const onCancel = () => {
+        ptrId = null;
+        moved = false;
+        if (carouselActive) {
+            setTranslate(0, animationMs);
+            setTimeout(clearCarousel, animationMs + 20);
+        }
+    };
+
+    zoneEl.addEventListener('pointerdown', onDown);
+    zoneEl.addEventListener('pointermove', onMove);
+    zoneEl.addEventListener('pointerup', onUp);
+    zoneEl.addEventListener('pointercancel', onCancel);
+    zoneEl.addEventListener('click', onClickCapture, { capture: true });
+
+    return () => {
+        zoneEl.removeEventListener('pointerdown', onDown);
+        zoneEl.removeEventListener('pointermove', onMove);
+        zoneEl.removeEventListener('pointerup', onUp);
+        zoneEl.removeEventListener('pointercancel', onCancel);
+        zoneEl.removeEventListener('click', onClickCapture, { capture: true });
+        zoneEl.style.touchAction = prevTouchAction;
+        zoneEl.style.userSelect = prevUserSelect;
+        if (carouselActive) clearCarousel();
+    };
+}

js/ui/mealPlanEditor.js

@@ -1,10 +1,7 @@
 import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
-    addDays,
-    addMonths,
     sameDay,
-    sameMonth,
     startOfDay,
     startOfWeekMonday,
 } from '../services/dateUtils.js';
@@ -17,13 +14,17 @@ import {
 import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
 import { loadPantry } from '../services/pantryShopping.js?v=2';
 import {
+    bindCollapsibleCalendarSwipeGesture,
     bindCalendarDayClicks,
+    createCollapsibleCalendarHTML,
     createCalendarTopbarHTML,
-    createCalendarWeekdayHeaderHTML,
+    formatCalendarPeriodLabel,
     isCalendarOnToday,
-    renderCalendarGrid,
+    renderCollapsibleCalendar,
     syncCalendarTodayButton,
-} from './mealCalendar.js?v=11';
+    syncCollapsibleCalendarMode,
+    syncCollapsibleCalendarToggleIcon,
+} from './mealCalendar.js?v=15';
 import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-116';
 
 function esc(s) {
@@ -51,27 +52,38 @@ export function getMealPlanEditorHTML() {
                     </button>
                 </div>
             </div>
-            <div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
+            <div id="mpe-cal-wrap" class="hidden relative z-[2] shrink-0 px-5 pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
+                <div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(var(--overlay-rgb),0.12), rgba(var(--overlay-rgb),0.03), rgba(var(--overlay-rgb),0));"></div>
                 <div id="mpe-cal-section" class="hidden">
                     ${createCalendarTopbarHTML({
-        prevId: 'mpe-cal-prev',
         todayId: 'mpe-cal-today',
-        nextId: 'mpe-cal-next',
         wrapperClass: 'mb-2 flex items-center justify-end gap-3',
     })}
-                    ${createCalendarWeekdayHeaderHTML()}
+                    ${createCollapsibleCalendarHTML({
-                    <div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
+        idPrefix: 'mpe-cal',
-                    <button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
+        swipeZoneId: 'mpe-cal-swipe-zone',
-                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
+        weekWrapId: 'mpe-cal-week-wrap',
-                    <div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
+        weekGridId: 'mpe-cal-week-grid',
+        monthWrapId: 'mpe-cal-month-wrap',
+        monthGridId: 'mpe-cal-month-grid',
+        toggleId: 'mpe-cal-toggle',
+        iconId: 'mpe-cal-toggle-icon',
+        weekWrapClass: 'overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]',
+        monthWrapClass: 'bg-[rgb(var(--app-bg-rgb))]',
+        weekWrapStyle: 'overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.25rem',
+        toggleClass: 'w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors',
+    })}
                 </div>
             </div>
-            <div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
-                <div id="mpe-nutrition-section"></div>
-                <div id="mpe-servings-row" class="mt-3"></div>
-                <div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(var(--overlay-rgb),0.12), rgba(var(--overlay-rgb),0.03), rgba(var(--overlay-rgb),0));"></div>
-            </div>
             <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));">
+                <div id="mpe-slot-section" class="pt-3 pb-1 hidden">
+                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
+                    <div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
+                </div>
+                <div id="mpe-summary-wrap" class="relative z-[1] pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
+                    <div id="mpe-nutrition-section"></div>
+                    <div id="mpe-servings-row" class="mt-3"></div>
+                </div>
                 <div id="mpe-ing-section" class="mb-4">
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
                     <div id="mpe-ing-list" class="space-y-1.5"></div>
@@ -156,6 +168,18 @@ export function setupMealPlanEditor() {
 
     /* ── Calendar ──────────────────────────────────── */
 
+    function resolveCalendarDayState(day, meta, plans = loadPlans(), today = startOfDay(new Date())) {
+        const isSelected = S.date && sameDay(day, S.date);
+        const isPast = day.getTime() < today.getTime();
+        return {
+            disabled: isPast && !isSelected,
+            dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
+            showIndicator: meta.mode === 'month'
+                ? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
+                : dayHasAnyMeal(plans, day),
+        };
+    }
+
     function renderCal() {
         const wrap = document.getElementById('mpe-cal-wrap');
         const sec = document.getElementById('mpe-cal-section');
@@ -170,45 +194,46 @@ export function setupMealPlanEditor() {
         }
         wrap.classList.remove('hidden');
         sec.classList.remove('hidden');
-        const grid = document.getElementById('mpe-cal-grid');
+        const weekGrid = document.getElementById('mpe-cal-week-grid');
+        const monthGrid = document.getElementById('mpe-cal-month-grid');
         const todayBtn = document.getElementById('mpe-cal-today');
         const icon = document.getElementById('mpe-cal-toggle-icon');
-        if (!grid) return;
+        if (!weekGrid || !monthGrid) return;
         const today = startOfDay(new Date());
         const plans = loadPlans();
         const mode = S.calExpanded ? 'month' : 'week';
 
-        if (icon) {
+        syncCollapsibleCalendarMode({
-            icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
+            mode,
-        }
+            weekWrapEl: document.getElementById('mpe-cal-week-wrap'),
+            monthWrapEl: document.getElementById('mpe-cal-month-wrap'),
+            activePaddingBottom: '0.25rem',
+        });
+        syncCollapsibleCalendarToggleIcon(icon, mode);
         syncCalendarTodayButton(
             todayBtn,
             isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
             S.date,
+            {
+                labelText: formatCalendarPeriodLabel(mode, S.calDate, S.calDate),
+            },
         );
 
-        renderCalendarGrid({
+        renderCollapsibleCalendar({
-            gridEl: grid,
+            weekGridEl: weekGrid,
-            mode,
+            monthGridEl: monthGrid,
-            anchorDate: S.calDate,
+            weekAnchorDate: S.calDate,
+            monthAnchorDate: S.calDate,
             selectedDate: S.date,
-            resolveDayState: (day, meta) => {
+            resolveDayState: (day, meta) => resolveCalendarDayState(day, meta, plans, today),
-                const isSelected = S.date && sameDay(day, S.date);
-                const isPast = day.getTime() < today.getTime();
-                return {
-                    disabled: isPast && !isSelected,
-                    dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
-                    showIndicator: meta.mode === 'month'
-                        ? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
-                        : dayHasAnyMeal(plans, day),
-                };
-            },
         });
         syncScrollShadows();
     }
 
     function renderSlots() {
         const el = document.getElementById('mpe-slot-chips');
+        const sec = document.getElementById('mpe-slot-section');
+        if (sec) sec.classList.toggle('hidden', !S.showCal);
         if (!el || !S.showCal) return;
         const r = RECIPES[S.recipeId];
         if (!r) return;
@@ -612,21 +637,39 @@ export function setupMealPlanEditor() {
         });
     }
     document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
-    bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
+    const selectCalendarDate = (date) => {
         S.date = date;
         S.calDate = new Date(date);
         renderCal();
-    });
+    };
 
-    document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
+    bindCalendarDayClicks(document.getElementById('mpe-cal-week-grid'), selectCalendarDate);
-        if (!S.showCal) return;
+    bindCalendarDayClicks(document.getElementById('mpe-cal-month-grid'), selectCalendarDate);
-        S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
+
-        renderCal();
+    bindCollapsibleCalendarSwipeGesture({
-    });
+        zoneEl: document.getElementById('mpe-cal-swipe-zone'),
-    document.getElementById('mpe-cal-next')?.addEventListener('click', () => {
+        weekWrapEl: document.getElementById('mpe-cal-week-wrap'),
-        if (!S.showCal) return;
+        monthWrapEl: document.getElementById('mpe-cal-month-wrap'),
-        S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
+        getMode: () => (S.calExpanded ? 'month' : 'week'),
-        renderCal();
+        setMode: (mode) => {
+            S.calExpanded = mode === 'month';
+        },
+        getWeekAnchor: () => S.calDate,
+        setWeekAnchor: (date) => {
+            S.calDate = startOfDay(date);
+        },
+        getMonthAnchor: () => S.calDate,
+        setMonthAnchor: (date) => {
+            S.calDate = startOfDay(date);
+        },
+        getSelectedDate: () => S.date,
+        setSelectedDate: (date) => {
+            S.date = startOfDay(date);
+        },
+        rerender: renderCal,
+        resolveDayState: (day, meta) => resolveCalendarDayState(day, meta),
+        selectOnNavigateOutside: false,
+        enableVerticalModeSwipe: false,
     });
     document.getElementById('mpe-cal-today')?.addEventListener('click', () => {
         const today = startOfDay(new Date());
@@ -796,7 +839,10 @@ export function setupMealPlanEditor() {
         if (e.target.closest('#mpe-add-btn')) {
             S.addOpen = true; S.addQuery = '';
             renderAddArea();
-            document.getElementById('mpe-add-search')?.focus();
+            requestAnimationFrame(() => {
+                document.getElementById('mpe-add-area')?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                document.getElementById('mpe-add-search')?.focus({ preventScroll: true });
+            });
             return;
         }
 

js/ui/swipePopoverCalendar.js

@@ -0,0 +1,355 @@
+import { addDays, startOfMonth } from '../services/dateUtils.js';
+import { renderCalendarGrid } from './mealCalendar.js?v=15';
+
+const DEFAULT_WEEKDAYS = ['pn', 'wt', 'śr', 'cz', 'pt', 'sb', 'nd'];
+const DEFAULT_MONTHS_LONG = [
+    'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
+    'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
+];
+
+const DEFAULT_THEME = {
+    selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
+    selectedBorderClass: 'border',
+    selectedText: 'rgb(var(--text-emphasis-rgb))',
+    selectedDot: 'rgb(var(--text-emphasis-rgb))',
+    selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
+    bg: 'rgb(var(--app-bg-rgb))',
+    border: 'transparent',
+    borderClass: 'border-0',
+    text: 'rgb(var(--text-body-soft-rgb))',
+    dimmedBg: 'transparent',
+    dimmedBorderClass: 'border-0',
+    dimText: 'rgb(var(--text-faint-rgb))',
+    dimOpacity: 0.58,
+    dot: 'rgb(var(--text-faint-rgb))',
+};
+
+function dateKeyLocal(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+
+function keyToDate(key) {
+    return new Date(`${key}T00:00:00`);
+}
+
+function normalizeMonth(date) {
+    return startOfMonth(date instanceof Date ? date : new Date());
+}
+
+function monthLabel(date, monthsLong) {
+    return `${monthsLong[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+function dayRange(aKey, bKey) {
+    const a = keyToDate(aKey);
+    const b = keyToDate(bKey);
+    const [from, to] = a <= b ? [a, b] : [b, a];
+    const out = [];
+    for (let d = new Date(from); d <= to; d = addDays(d, 1)) out.push(dateKeyLocal(d));
+    return out;
+}
+
+export function createSwipePopoverCalendarHTML({
+    idPrefix,
+    weekdays = DEFAULT_WEEKDAYS,
+    monthLabelTextClass = 'text-[10px] font-semibold leading-none tabular-nums whitespace-nowrap',
+}) {
+    const weekdayHeader = `
+        <div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium uppercase tracking-wide mb-1.5 leading-none" style="color:rgb(var(--text-dim-rgb));">
+            ${weekdays.map((d) => `<div>${d}</div>`).join('')}
+        </div>
+    `;
+
+    return `
+        <div class="pb-3 px-3 flex items-center justify-end gap-3">
+            <div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center justify-center rounded-full border" style="background:transparent; border-color:rgb(var(--border-input-rgb));">
+                <span id="${idPrefix}-month-label" class="h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center px-3 ${monthLabelTextClass}" style="color:rgb(var(--text-body-soft-rgb));"></span>
+            </div>
+        </div>
+        <div id="${idPrefix}-viewport" style="overflow:hidden; position:relative; touch-action:pan-y; -webkit-user-select:none; user-select:none; cursor:grab;">
+            <div id="${idPrefix}-track" style="display:flex; align-items:flex-start; position:relative; will-change:transform;">
+                <div class="swc-panel" data-panel="prev" style="flex-shrink:0; pointer-events:none; position:relative; overflow:hidden;">
+                    ${weekdayHeader}
+                    <div id="${idPrefix}-prev-grid" class="grid grid-cols-7 gap-1.5"></div>
+                </div>
+                <div class="swc-panel" data-panel="current" style="flex-shrink:0; position:relative; overflow:hidden;">
+                    ${weekdayHeader}
+                    <div id="${idPrefix}-grid" class="grid grid-cols-7 gap-1.5"></div>
+                </div>
+                <div class="swc-panel" data-panel="next" style="flex-shrink:0; pointer-events:none; position:relative; overflow:hidden;">
+                    ${weekdayHeader}
+                    <div id="${idPrefix}-next-grid" class="grid grid-cols-7 gap-1.5"></div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+export function initSwipePopoverCalendar({
+    idPrefix,
+    selectionMode = 'single',
+    monthsLong = DEFAULT_MONTHS_LONG,
+    theme = DEFAULT_THEME,
+    getMonthAnchor,
+    setMonthAnchor,
+    canNavigateToMonth,
+    getSelectionKeys,
+    onSelectionCommit,
+    resolveDayState,
+    panelHandlePx = null,
+    panelHandleRatio = 0.045,
+    panelHandleMin = 10,
+    panelHandleMax = 16,
+}) {
+    const monthLabelEl = document.getElementById(`${idPrefix}-month-label`);
+    const gridEl = document.getElementById(`${idPrefix}-grid`);
+    const prevGridEl = document.getElementById(`${idPrefix}-prev-grid`);
+    const nextGridEl = document.getElementById(`${idPrefix}-next-grid`);
+    const track = document.getElementById(`${idPrefix}-track`);
+    const viewport = document.getElementById(`${idPrefix}-viewport`);
+    if (!gridEl || !track || !viewport) {
+        return {
+            render: () => {},
+            reapplyLayout: () => {},
+            resetTrackPosition: () => {},
+        };
+    }
+
+    const MOVE_THRESHOLD = 6;
+    const SWIPE_THRESHOLD = 40;
+    const ANIMATION_MS = 260;
+
+    let panelWidth = 0;
+    let panelInset = 0;
+    let restOffset = 0;
+    let animatingNav = false;
+    let pendingRangeStart = null;
+    let suppressClickUntil = 0;
+
+    const panels = Array.from(track.querySelectorAll('.swc-panel'));
+
+    const applyLayout = () => {
+        const vw = viewport.clientWidth || viewport.getBoundingClientRect().width;
+        if (!vw) return;
+        const computedInset = panelHandlePx == null
+            ? Math.round(vw * panelHandleRatio)
+            : panelHandlePx;
+        panelInset = Math.max(panelHandleMin, Math.min(panelHandleMax, computedInset));
+        panelWidth = vw;
+        restOffset = -panelWidth;
+        panels.forEach((panel) => {
+            panel.style.width = `${panelWidth}px`;
+            panel.style.boxSizing = 'border-box';
+            panel.style.paddingLeft = `${panelInset}px`;
+            panel.style.paddingRight = `${panelInset}px`;
+        });
+        track.style.transition = 'none';
+        track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
+    };
+
+    const resetTrackPosition = () => {
+        track.style.transition = 'none';
+        track.style.transform = `translate3d(${restOffset}px, 0, 0)`;
+    };
+
+    const setDragTranslate = (dx, ms) => {
+        track.style.transition = ms ? `transform ${ms}ms ease` : 'none';
+        track.style.transform = `translate3d(${restOffset + dx}px, 0, 0)`;
+    };
+
+    const snapBack = () => {
+        setDragTranslate(0, ANIMATION_MS);
+    };
+
+    const getNavigationTarget = (monthDelta) => {
+        const anchor = normalizeMonth(getMonthAnchor());
+        return startOfMonth(new Date(anchor.getFullYear(), anchor.getMonth() + monthDelta, 1));
+    };
+
+    const canNavigate = (monthDelta) => {
+        if (typeof canNavigateToMonth !== 'function') return true;
+        const anchor = normalizeMonth(getMonthAnchor());
+        const target = getNavigationTarget(monthDelta);
+        return canNavigateToMonth(target, { currentMonth: anchor, monthDelta }) !== false;
+    };
+
+    const getAllowedDragDx = (dx) => {
+        if (dx === 0) return 0;
+        return canNavigate(dx > 0 ? -1 : 1) ? dx : 0;
+    };
+
+    const getSelectedSet = (previewSelection = null) => {
+        const raw = previewSelection ?? getSelectionKeys();
+        if (Array.isArray(raw)) return new Set(raw);
+        if (typeof raw === 'string' && raw) return new Set([raw]);
+        return new Set();
+    };
+
+    const renderMonthGrid = (targetGrid, monthAnchor, selectedSet) => {
+        if (!targetGrid) return;
+        const calendarTheme = {
+            ...DEFAULT_THEME,
+            ...theme,
+            borderClass: theme.borderClass || DEFAULT_THEME.borderClass,
+            dimmedBorderClass: theme.dimmedBorderClass || DEFAULT_THEME.dimmedBorderClass,
+            selectedBorderClass: theme.selectedBorderClass || DEFAULT_THEME.selectedBorderClass,
+        };
+
+        renderCalendarGrid({
+            gridEl: targetGrid,
+            mode: 'month',
+            anchorDate: monthAnchor,
+            fixedWeekCount: 6,
+            selectedDate: null,
+            isSelectedDate: (day) => selectedSet.has(dateKeyLocal(day)),
+            dayAttr: 'data-dk',
+            getDayAttrValue: dateKeyLocal,
+            dayClassName: 'swc-day',
+            dayStyle: 'touch-action:pan-y;',
+            theme: calendarTheme,
+            resolveDayState: (day, { inCurrentMonth, isSelected }) => {
+                const resolved = (typeof resolveDayState === 'function'
+                    ? resolveDayState(day, { inCurrentMonth, isSelected })
+                    : {}) || {};
+                return {
+                    disabled: !!resolved.disabled,
+                    dimmed: !!resolved.dimmed,
+                    showIndicator: !!resolved.showDot,
+                };
+            },
+        });
+    };
+
+    const render = (previewSelection = null) => {
+        const anchor = normalizeMonth(getMonthAnchor());
+        const rangePreview = selectionMode === 'range' && pendingRangeStart ? [pendingRangeStart] : null;
+        const selectedSet = getSelectedSet(previewSelection ?? rangePreview);
+        if (monthLabelEl) monthLabelEl.textContent = monthLabel(anchor, monthsLong);
+        renderMonthGrid(gridEl, anchor, selectedSet);
+        renderMonthGrid(prevGridEl, new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1), selectedSet);
+        renderMonthGrid(nextGridEl, new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1), selectedSet);
+        applyLayout();
+    };
+
+    const commitNavigation = (monthDelta) => {
+        if (!canNavigate(monthDelta)) {
+            snapBack();
+            return;
+        }
+        animatingNav = true;
+        const targetDx = monthDelta < 0 ? panelWidth : -panelWidth;
+        setDragTranslate(targetDx, ANIMATION_MS);
+        setTimeout(() => {
+            setMonthAnchor(getNavigationTarget(monthDelta));
+            render();
+            resetTrackPosition();
+            animatingNav = false;
+        }, ANIMATION_MS);
+    };
+
+    if (selectionMode === 'range') {
+        gridEl.addEventListener('click', (e) => {
+            const btn = e.target.closest('.swc-day');
+            if (!btn) return;
+            e.stopPropagation();
+            const selectedKey = btn.dataset.dk;
+            if (!pendingRangeStart) {
+                pendingRangeStart = selectedKey;
+                if (typeof onSelectionCommit === 'function') onSelectionCommit([selectedKey]);
+                render([selectedKey]);
+                return;
+            }
+
+            const range = dayRange(pendingRangeStart, selectedKey);
+            pendingRangeStart = null;
+            if (typeof onSelectionCommit === 'function') onSelectionCommit(range);
+            render();
+        });
+    } else {
+        gridEl.addEventListener('click', (e) => {
+            const btn = e.target.closest('.swc-day');
+            if (!btn) return;
+            e.stopPropagation();
+            if (typeof onSelectionCommit === 'function') onSelectionCommit(btn.dataset.dk);
+            render();
+        });
+    }
+
+    let ptrId = null;
+    let startX = 0;
+    let startY = 0;
+    let moved = false;
+    let axis = null;
+    let hasPointerCapture = false;
+
+    viewport.addEventListener('pointerdown', (e) => {
+        if (animatingNav || ptrId !== null) return;
+        if (e.pointerType === 'mouse' && e.button !== 0) return;
+        if (!panelWidth) applyLayout();
+        ptrId = e.pointerId;
+        startX = e.clientX;
+        startY = e.clientY;
+        moved = false;
+        axis = null;
+        hasPointerCapture = false;
+    });
+
+    viewport.addEventListener('pointermove', (e) => {
+        if (e.pointerId !== ptrId || animatingNav) return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        if (!moved && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) {
+            moved = true;
+            axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+        }
+        if (axis === 'x') {
+            e.preventDefault();
+            suppressClickUntil = Date.now() + 450;
+            if (!hasPointerCapture) {
+                try {
+                    viewport.setPointerCapture(e.pointerId);
+                    hasPointerCapture = true;
+                } catch (_) {}
+            }
+            setDragTranslate(getAllowedDragDx(dx), 0);
+        }
+    });
+
+    const endGesture = (e) => {
+        if (e && e.pointerId !== ptrId) return;
+        if (e && hasPointerCapture) {
+            try { viewport.releasePointerCapture(e.pointerId); } catch (_) {}
+        }
+        hasPointerCapture = false;
+        ptrId = null;
+        if (!moved || axis !== 'x') return;
+        const dx = e ? e.clientX - startX : 0;
+        const monthDelta = dx > 0 ? -1 : 1;
+        if (Math.abs(dx) >= SWIPE_THRESHOLD && canNavigate(monthDelta)) commitNavigation(monthDelta);
+        else {
+            snapBack();
+        }
+        moved = false;
+        axis = null;
+    };
+
+    viewport.addEventListener('click', (e) => {
+        if (Date.now() > suppressClickUntil) return;
+        suppressClickUntil = 0;
+        e.preventDefault();
+        e.stopPropagation();
+    }, true);
+    window.addEventListener('pointerup', endGesture);
+    window.addEventListener('pointercancel', endGesture);
+    window.addEventListener('resize', applyLayout);
+
+    const clearPendingRange = () => {
+        pendingRangeStart = null;
+        render();
+    };
+
+    return { render, reapplyLayout: applyLayout, resetTrackPosition, clearPendingRange };
+}

js/views/Filter.js

@@ -1,25 +1,28 @@
-import { RECIPES } from '../data/catalog.js?v=9';
+import { RECIPES, CATEGORY_LABELS } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { applyFilters, getFilterState } from './RecipeList.js';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
+
+const PANTRY_CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
+const PANTRY_SECTION_FILTERS = [
+    { id: 'shortfalls', label: 'Potrzebne' },
+    { id: 'sufficient', label: 'W spiżarni' },
+    { id: 'notPlanned', label: 'Poza planem' },
+];
 
 const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
-const FILTER_SURFACE = 'rgb(var(--sunken-rgb))';
+const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
-const FILTER_SURFACE_SOFT = 'rgb(var(--app-bg-rgb))';
+const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
-const FILTER_BORDER = 'rgb(var(--border-input-rgb))';
+const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
-const FILTER_CHIP_ACTIVE_BG = 'rgb(var(--card-rgb))';
+const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
-const FILTER_TEXT_SECONDARY = 'rgb(var(--text-body-soft-rgb))';
-const FILTER_TEXT_MUTED = 'rgb(var(--text-muted-rgb))';
-const FILTER_TEXT_ACTIVE = 'rgb(var(--text-emphasis-rgb))';
-const FILTER_TRACK = 'rgb(var(--card-rgb))';
-const FILTER_TRACK_FILL = 'rgba(var(--border-input-rgb), 0.58)';
 const PREP_TIME_MIN = 5;
 const PREP_TIME_MAX = 120;
 const PREP_TIME_STEP = 5;
 const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
 const FILTER_CONTEXTS = {
     recipes: {
-        anchorShellId: 'recipe-topbar',
+        anchorShellId: 'recipe-filter-float-btn',
-        buttonId: 'recipe-filter-btn',
+        buttonId: 'recipe-filter-float-btn',
         getState: () => getFilterState(),
         applyState: (nextState) => applyFilters(nextState),
         showSlots: true,
@@ -61,6 +64,15 @@ export function getFilterHTML() {
             pointer-events: auto;
         }
 
+        #filter-panel::before {
+            display: none;
+        }
+
+        #filter-panel > * {
+            position: relative;
+            z-index: 1;
+        }
+
         #filter-view .prep-time-range-track,
         #filter-view .prep-time-range-fill {
             border-radius: 9999px;
@@ -71,15 +83,27 @@ export function getFilterHTML() {
             width: 1rem;
             height: 1rem;
             border-radius: 9999px;
-            border: 1px solid rgba(var(--text-emphasis-rgb),0.16);
+            border: 1px solid rgba(255,255,255,0.34);
-            background: ${FILTER_TRACK_FILL};
+            background: rgba(var(--surface-rgb),0.42);
-            box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12);
+            box-shadow:
+                inset 0 1px 0 rgba(255,255,255,0.42),
+                0 0 0 1px rgba(var(--overlay-rgb),0.1),
+                0 4px 10px rgba(var(--overlay-rgb),0.18);
             touch-action: none;
             outline: none;
         }
+
+        .dark #filter-view .prep-time-range-handle {
+            border-color: rgba(255,255,255,0.18);
+            background: rgba(255,255,255,0.26);
+            box-shadow:
+                inset 0 1px 0 rgba(255,255,255,0.24),
+                0 0 0 1px rgba(0,0,0,0.22),
+                0 4px 12px rgba(0,0,0,0.34);
+        }
     </style>
-    <div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
+    <div id="filter-view" class="filter-liquid-surface absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
-        <div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:var(--shadow-shell); width:min(calc(100% - 1.5rem), 22rem);">
+        <div id="filter-panel" class="filter-liquid-panel absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
             <div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
                 <p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
                 <button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
@@ -174,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, maxMinutes) {
     return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
 }
 
-function getChipStyle(active) {
-    const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
-    const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
-    const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
-    const shadow = active
-        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 function clampTimeValue(value) {
     return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
 }
@@ -197,6 +211,12 @@ function getSliderPercent(value) {
     return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100;
 }
 
+function getClosedPanelTransform(panel) {
+    return panel?.dataset.placement === 'below'
+        ? 'translateY(-0.5rem) scale(0.98)'
+        : 'translateY(0.65rem) scale(0.98)';
+}
+
 function setActiveTimeHandle(activeHandle) {
     const minHandle = document.getElementById('prep-time-min-handle');
     const maxHandle = document.getElementById('prep-time-max-handle');
@@ -244,19 +264,33 @@ function positionFilterPanel() {
 
     const viewRect = view.getBoundingClientRect();
     const anchorRect = (searchShell || button).getBoundingClientRect();
-    const gap = 8;
+    const isRecipeContext = activeFilterContext === 'recipes';
+    const gap = isRecipeContext ? 12 : 8;
     const margin = 12;
-    const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
+    const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
-    const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
+    const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
-    const left = Math.max(
+    const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
-        margin,
+    const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
-        Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
+    const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
-    );
+    const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
-    const maxHeight = Math.max(220, viewRect.height - top - margin);
+    const maxHeight = opensUpward
-
+        ? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
+        : Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
+    const leftBase = isRecipeContext
+        ? (viewRect.width - width) / 2
+        : anchorRect.left - viewRect.left;
+    const left = Math.max(margin, Math.min(leftBase, viewRect.width - width - margin));
     panel.style.width = `${width}px`;
     panel.style.left = `${left}px`;
-    panel.style.top = `${top}px`;
+    panel.style.transformOrigin = opensUpward ? 'bottom center' : 'top center';
+    panel.dataset.placement = opensUpward ? 'above' : 'below';
+    if (opensUpward) {
+        panel.style.top = 'auto';
+        panel.style.bottom = `${Math.max(margin, viewRect.bottom - anchorRect.top + gap)}px`;
+    } else {
+        panel.style.top = `${Math.max(margin, anchorRect.bottom - viewRect.top + gap)}px`;
+        panel.style.bottom = 'auto';
+    }
     panel.style.maxHeight = `${maxHeight}px`;
     if (body) body.style.maxHeight = `${maxHeight - 56}px`;
 }
@@ -276,6 +310,7 @@ function showFilterPanel() {
     view.style.pointerEvents = 'auto';
     view.setAttribute('aria-hidden', 'false');
     positionFilterPanel();
+    panel.style.transform = getClosedPanelTransform(panel);
     setRecipeAreaBlur(true);
 
     syncPanelCount();
@@ -296,7 +331,7 @@ function hideFilterPanel() {
     view.style.pointerEvents = 'none';
     view.setAttribute('aria-hidden', 'true');
     panel.style.opacity = '0';
-    panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
+    panel.style.transform = getClosedPanelTransform(panel);
     setRecipeAreaBlur(false);
     syncPanelCount();
 
@@ -315,7 +350,7 @@ function renderSlotChips() {
 
     wrap.innerHTML = MEAL_SLOTS.map((slot) => {
         const active = localSlots.includes(slot.id);
-        return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
+        return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
     }).join('');
 
     wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
@@ -337,7 +372,7 @@ function renderTagChips() {
     const allTags = collectAllTags();
     wrap.innerHTML = allTags.map((tag) => {
         const active = localTags.includes(tag.toLowerCase());
-        return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`;
+        return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(tag)}</button>`;
     }).join('');
 
     wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
@@ -373,10 +408,17 @@ function syncPanelCount() {
 
     if (button) {
         const highlight = isFilterPanelOpen() || count > 0;
-        button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
+        const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
+        if (isRecipeGlassButton) {
+            button.style.removeProperty('background');
+            button.style.removeProperty('border-color');
+            button.style.removeProperty('color');
+        } else {
+            button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
             button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
             button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
         }
+    }
 
     const badge = button?.querySelector('[id$="-filter-count"]');
     if (!badge) return;
@@ -397,6 +439,7 @@ function syncLiveFilters() {
 }
 
 export function setupFilter() {
+    ensureFilterPopoverStyles();
     const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
     const minHandle = document.getElementById('prep-time-min-handle');
     const maxHandle = document.getElementById('prep-time-max-handle');

js/views/MealPlanner.js

@@ -1,14 +1,10 @@
 import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
-    addMonths,
-    addWeeks,
     sameDay,
-    sameMonth,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
-    weekContains,
 } from '../services/dateUtils.js';
 import {
     computeEntryNutrition,
@@ -26,16 +22,18 @@ import {
     savePlans,
 } from '../services/planStore.js?v=2';
 import {
-    CALENDAR_HANDLE_CLASS,
     CALENDAR_MONTHS_SHORT,
+    bindCollapsibleCalendarSwipeGesture,
     bindCalendarDayClicks,
+    createCollapsibleCalendarHTML,
     createCalendarTopbarHTML,
-    createCalendarWeekdayHeaderHTML,
+    formatCalendarPeriodLabel,
     isCalendarOnToday,
     renderCollapsibleCalendar,
     syncCalendarTodayButton,
     syncCollapsibleCalendarMode,
-} from '../ui/mealCalendar.js?v=11';
+    syncCollapsibleCalendarToggleIcon,
+} from '../ui/mealCalendar.js?v=15';
 import {
     filterRecipesByQuery,
     renderRecipeGrid,
@@ -66,6 +64,9 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
         document.getElementById('cal-go-today'),
         isCalendarOnToday(mode, weekStart, monthAnchor, selected),
         selected,
+        {
+            labelText: formatCalendarPeriodLabel(mode, weekStart, monthAnchor),
+        },
     );
 }
 
@@ -73,31 +74,16 @@ export function getMealPlannerHTML() {
     return `
     <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[rgb(var(--app-bg-rgb))] z-10">
         <div id="planner-cal-bar" class="shrink-0 bg-[rgb(var(--app-bg-rgb))] border-b border-[rgb(var(--card-strong-rgb))] mt-3 relative z-10">
-            <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
+            <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-end gap-3 min-w-0">
-                <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
                 ${createCalendarTopbarHTML({
-        prevId: 'cal-prev',
         todayId: 'cal-go-today',
-        nextId: 'cal-next',
         wrapperClass: 'flex shrink-0 items-center justify-end',
     })}
             </div>
-            <div id="calendar-swipe-zone" class="overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="touch-action: none">
+            ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
-                <div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
-                </div>
-                <div id="calendar-month-wrap" class="px-3 bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
-                </div>
-                <button id="calendar-mode-toggle" type="button" class="w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors" aria-label="Przełącz widok kalendarza">
-                    <i id="calendar-handle-icon" class="fas fa-chevron-down text-[10px]"></i>
-                </button>
-            </div>
         </div>
 
-        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]">
+        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-32 bg-[rgb(var(--app-bg-rgb))]">
             <div id="planner-summary-card" class="mb-3">
                 <div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;">
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
@@ -193,61 +179,7 @@ function syncModeToggle(mode) {
         weekWrapEl: document.getElementById('calendar-week-wrap'),
         monthWrapEl: document.getElementById('calendar-month-wrap'),
     });
-    const icon = document.getElementById('calendar-handle-icon');
+    syncCollapsibleCalendarToggleIcon(document.getElementById('calendar-handle-icon'), mode);
-    if (icon) icon.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
-}
-
-function bindCalendarSwipeGesture(state, rerender) {
-    const zone = document.getElementById('calendar-swipe-zone');
-    if (!zone) return;
-
-    let startY = 0;
-    let ptrId = null;
-    let moved = false;
-
-    zone.addEventListener('pointerdown', (e) => {
-        if (ptrId !== null) return;
-        startY = e.clientY;
-        ptrId = e.pointerId;
-        moved = false;
-    });
-
-    zone.addEventListener('pointermove', (e) => {
-        if (e.pointerId !== ptrId) return;
-        if (Math.abs(e.clientY - startY) > 10) moved = true;
-    });
-
-    zone.addEventListener('pointerup', (e) => {
-        if (e.pointerId !== ptrId) return;
-        const dy = e.clientY - startY;
-        ptrId = null;
-
-        if (!moved || Math.abs(dy) < 30) return;
-
-        let switched = false;
-        if (state.mode === 'week' && dy > 30) {
-            state.mode = 'month';
-            state.monthAnchor = startOfMonth(state.selected);
-            switched = true;
-        } else if (state.mode === 'month' && dy < -30) {
-            state.mode = 'week';
-            state.weekStart = startOfWeekMonday(state.selected);
-            switched = true;
-        }
-
-        if (switched) {
-            zone.addEventListener('click', (ev) => {
-                ev.stopPropagation();
-                ev.preventDefault();
-            }, { capture: true, once: true });
-            rerender();
-        }
-    });
-
-    zone.addEventListener('pointercancel', () => {
-        ptrId = null;
-        moved = false;
-    });
 }
 
 function showPlannerToast(message) {
@@ -507,8 +439,8 @@ function renderDayContent(state, onMealRemoved = null) {
                             <i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
                         </span>
                     </button>`
-                : `<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
+                : `<button type="button" class="planner-edit-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
-                        <i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
+                        <i class="fas fa-pencil text-[10px]" aria-hidden="true"></i>
                     </button>`;
             return `
             <div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-white/5' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}>
@@ -543,32 +475,32 @@ function renderDayContent(state, onMealRemoved = null) {
         const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] flex items-center justify-center shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
 
         const kcalPill = slotKcal > 0
-            ? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:rgb(var(--app-bg-rgb)); color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
+            ? `<span class="planner-kcal-pill text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
             : '';
 
         const filledCard = `
-        <div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
+        <div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
+            <div class="flex items-center gap-2 px-4 py-3 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
                 <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
                 <span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
                 <span class="ml-auto"></span>
                 ${kcalPill}
                 ${addBtn}
             </div>
-            ${entries.length > 0 ? `<div class="px-2.5 pb-2.5 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.625rem;">${entryCards}</div>` : ''}
+            ${entries.length > 0 ? `<div class="px-3 pb-3 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.75rem;">${entryCards}</div>` : ''}
         </div>`;
 
         if (entries.length > 0) return filledCard;
 
         return `
-        <div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
+        <div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5">
+            <div class="flex items-center gap-2 px-4 py-3">
                 <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
                 <span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
                 <span class="ml-auto"></span>
                 ${addBtn}
             </div>
-            <div class="px-3 pb-2.5 -mt-0.5">
+            <div class="px-4 pb-3 -mt-0.5">
                 <p class="text-[11px] text-[rgb(var(--text-faint-rgb))] italic pl-9">Zaplanuj posiłek</p>
             </div>
         </div>`;
@@ -1130,17 +1062,8 @@ export function setupMealPlanner() {
         maxMinutes: PICKER_FILTER_MAX_MINUTES,
     };
 
-    const rerender = () => {
+    const resolveCalendarDayState = (day, meta) => {
-        syncModeToggle(state.mode);
-        syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
         const today = startOfDay(new Date());
-        renderCollapsibleCalendar({
-            weekGridEl: weekGrid,
-            monthGridEl: monthGrid,
-            weekAnchorDate: state.weekStart,
-            monthAnchorDate: state.monthAnchor,
-            selectedDate: state.selected,
-            resolveDayState: (day, meta) => {
         const isSelected = sameDay(day, state.selected);
         const isPast = day.getTime() < today.getTime();
         return {
@@ -1150,7 +1073,18 @@ export function setupMealPlanner() {
                 ? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
                 : dayHasAnyMeal(state.plans, day),
         };
-            },
+    };
+
+    const rerender = () => {
+        syncModeToggle(state.mode);
+        syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
+        renderCollapsibleCalendar({
+            weekGridEl: weekGrid,
+            monthGridEl: monthGrid,
+            weekAnchorDate: state.weekStart,
+            monthAnchorDate: state.monthAnchor,
+            selectedDate: state.selected,
+            resolveDayState: resolveCalendarDayState,
         });
         renderDayContent(state, persist);
     };
@@ -1161,15 +1095,11 @@ export function setupMealPlanner() {
     };
 
     /* ── calendar scroll shadow ─────────────────── */
-    const plannerScroll = document.getElementById('planner-scroll');
     const calBar = document.getElementById('planner-cal-bar');
-    if (plannerScroll && calBar) {
+    if (calBar) {
         const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
+        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);pointer-events:none;';
         calBar.appendChild(shadow);
-        plannerScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = plannerScroll.scrollTop > 2 ? '1' : '0';
-        });
     }
 
     bindCalendarDayClicks(weekGrid, (date) => {
@@ -1181,36 +1111,6 @@ export function setupMealPlanner() {
         rerender();
     });
 
-    document.getElementById('cal-prev')?.addEventListener('click', () => {
-        if (state.mode === 'week') {
-            state.weekStart = addWeeks(state.weekStart, -1);
-            if (!weekContains(state.weekStart, state.selected)) {
-                state.selected = new Date(state.weekStart);
-            }
-        } else {
-            state.monthAnchor = addMonths(state.monthAnchor, -1);
-            if (!sameMonth(state.monthAnchor, state.selected)) {
-                state.selected = startOfMonth(state.monthAnchor);
-            }
-        }
-        rerender();
-    });
-
-    document.getElementById('cal-next')?.addEventListener('click', () => {
-        if (state.mode === 'week') {
-            state.weekStart = addWeeks(state.weekStart, 1);
-            if (!weekContains(state.weekStart, state.selected)) {
-                state.selected = new Date(state.weekStart);
-            }
-        } else {
-            state.monthAnchor = addMonths(state.monthAnchor, 1);
-            if (!sameMonth(state.monthAnchor, state.selected)) {
-                state.selected = startOfMonth(state.monthAnchor);
-            }
-        }
-        rerender();
-    });
-
     document.getElementById('cal-go-today')?.addEventListener('click', () => {
         const today = startOfDay(new Date());
         state.selected = today;
@@ -1428,7 +1328,30 @@ export function setupMealPlanner() {
         rerender();
     };
 
-    bindCalendarSwipeGesture(state, rerender);
+    bindCollapsibleCalendarSwipeGesture({
+        zoneEl: document.getElementById('calendar-swipe-zone'),
+        weekWrapEl: document.getElementById('calendar-week-wrap'),
+        monthWrapEl: document.getElementById('calendar-month-wrap'),
+        getMode: () => state.mode,
+        setMode: (mode) => {
+            state.mode = mode;
+        },
+        getWeekAnchor: () => state.weekStart,
+        setWeekAnchor: (date) => {
+            state.weekStart = startOfWeekMonday(date);
+        },
+        getMonthAnchor: () => state.monthAnchor,
+        setMonthAnchor: (date) => {
+            state.monthAnchor = startOfMonth(date);
+        },
+        getSelectedDate: () => state.selected,
+        setSelectedDate: (date) => {
+            state.selected = startOfDay(date);
+        },
+        rerender,
+        resolveDayState: resolveCalendarDayState,
+        selectOnNavigateOutside: false,
+    });
 
     document.getElementById('calendar-mode-toggle')?.addEventListener('click', () => {
         if (state.mode === 'week') {

js/views/Pantry.js

@@ -3,17 +3,20 @@ import {
     CATEGORY_LABELS,
 } from '../data/catalog.js?v=9';
 import { loadPantry, getPantryTotal } from '../services/pantryShopping.js?v=2';
-import { loadPlans } from '../services/planStore.js?v=2';
+import { loadPlans, dateKey } from '../services/planStore.js?v=2';
-import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth } from '../services/dateUtils.js';
+import { addDays, sameDay, startOfDay, startOfMonth } from '../services/dateUtils.js';
 import { aggregateRangeIngredientNeed, dayHasAnyMeal } from '../services/planIngredients.js?v=4';
 import {
-    bindCalendarDayClicks,
+    createSwipePopoverCalendarHTML,
-    createCalendarTopbarHTML,
+    initSwipePopoverCalendar,
-    createCalendarWeekdayHeaderHTML,
+} from '../ui/swipePopoverCalendar.js';
-    renderCalendarGrid,
+import {
-    syncCalendarTodayButton,
+    createCalendarPopoverHTML,
-} from '../ui/mealCalendar.js?v=11';
+    stabilizeSwipeCalendarLayout,
+    syncCalendarPopoverVisibility,
+} from '../ui/calendarPopover.js';
 import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
 
 /* ── helpers ── */
 
@@ -48,16 +51,6 @@ function getActivePantryFilterCount() {
     return pantryFilters.categories.length + pantryFilters.sections.length;
 }
 
-function filterChipStyle(active) {
-    const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
-    const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
-    const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
-    const shadow = active
-        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -79,10 +72,9 @@ const DAY_NAMES_SHORT = ['nd.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'];
 const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
 
 const DEFAULT_HORIZON_DAYS = 7;
-const PANTRY_CALENDAR_DAY_ATTR = 'data-pantry-calendar-day';
 const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
 const PANTRY_CALENDAR_THEME = {
-    bg: 'rgb(var(--app-bg-rgb))',
+    bg: 'rgba(255,255,255,0.08)',
     border: 'rgb(var(--card-raised-rgb))',
     text: 'rgb(var(--text-body-soft-rgb))',
     dimText: 'rgb(var(--text-faint-rgb))',
@@ -90,21 +82,23 @@ const PANTRY_CALENDAR_THEME = {
     dimmedBg: 'transparent',
     dimmedBorder: 'transparent',
     dot: 'rgb(var(--text-faint-rgb))',
-    selectedBg: 'rgb(var(--card-rgb))',
+    selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
-    selectedBorder: 'rgb(var(--border-input-rgb))',
     selectedText: 'rgb(var(--text-emphasis-rgb))',
     selectedDot: 'rgb(var(--text-emphasis-rgb))',
+    selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
 };
 
 /* ── state ── */
 
 let ingredientCard = null;
 let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
-let isSearchExpanded = false;
 let isCalendarOpen = false;
 let isFilterOpen = false;
 let calendarMonthAnchor = startOfMonth(horizonEndDate);
 let pantryGlobalListenersBound = false;
+let pantryCalendar = null;
+let pantrySearchQuery = '';
+let pantrySearchOpen = false;
 let pantryFilters = {
     categories: [],
     sections: [],
@@ -140,10 +134,6 @@ function formatHorizonLabel(date) {
     return sameDay(date, getToday()) ? 'Do dziś' : `Do ${formatEndDate(date)}`;
 }
 
-function formatRangeSummary(date) {
-    return sameDay(date, getToday()) ? 'Zakres: tylko dziś' : `Zakres: dziś - ${formatEndDate(date)}`;
-}
-
 function formatDayContext(dayStrings) {
     const dayNames = dayStrings.map((ds) => {
         const d = new Date(ds + 'T00:00:00');
@@ -171,29 +161,68 @@ function photoStripMedia(image, icon, accentBg) {
 export function getPantryHTML() {
     return `
     <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
+    <style id="pantry-view-styles">
+        .pv2-tile {
+            background: rgba(var(--surface-rgb), 0.62) !important;
+            border: 1px solid rgba(255, 255, 255, 0.26) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.48),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.04),
+                0 1px 2px rgba(var(--overlay-rgb), 0.06),
+                0 6px 14px rgba(var(--overlay-rgb), 0.1) !important;
+            backdrop-filter: blur(18px) saturate(160%);
+            -webkit-backdrop-filter: blur(18px) saturate(160%);
+        }
 
-        <!-- ── floating top bar ── -->
+        .dark .pv2-tile {
-        <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
+            background: rgba(255, 255, 255, 0.06) !important;
-            <div class="pointer-events-auto relative z-[1] w-full">
+            border-color: rgba(255, 255, 255, 0.1) !important;
-                <div id="pantry-topbar" class="relative min-h-12">
+            box-shadow:
-                    <div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
+                inset 0 1px 0 rgba(255, 255, 255, 0.18),
-                        <h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 2px 4px rgba(0, 0, 0, 0.24),
+                0 8px 18px rgba(0, 0, 0, 0.3) !important;
+        }
 
-                        <div id="pantry-horizon-wrap" class="relative shrink">
+        .pv2-track {
-                            <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
+            background: rgba(var(--overlay-rgb), 0.12);
+        }
+
+        .dark .pv2-track {
+            background: rgba(255, 255, 255, 0.1);
+        }
+    </style>
+
+        <!-- ── floating horizon pill above bottom nav ── -->
+        <div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:var(--catalog-menu-left, 1rem); width:calc(var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width) - 0.5rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
+                <button type="button" id="pantry-horizon-compact" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3">
                     <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
-                                <i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
+                    <i id="pantry-horizon-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
+                </button>
+                ${createCalendarPopoverHTML({
+        id: 'pantry-calendar-popover',
+        calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
+        popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
+        popoverStyle: 'left:0; right:auto; width:var(--recipe-dock-width, calc(100% - 2rem)); opacity:0; transform:translateY(-6px) scale(0.98);',
+    })}
+            </div>
+            <div id="pantry-filter-pill-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
+                <button type="button" id="pantry-filter-pill-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="pantry-filter-pill-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
                 </button>
             </div>
+        </div>
 
-                        <div id="pantry-filter-wrap" class="relative shrink-0">
+        <!-- ── scrollable content ── -->
-                            <button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
+        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
-                                <i class="fas fa-sliders-h text-[12px]"></i>
+            <div id="pantry-board"></div>
-                                <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
+        </div>
-                            </button>
 
-                            <div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
+        <!-- ── floating bottom controls (search + filter) ── -->
-                                <div class="flex items-center justify-between gap-3 px-0.5 pb-3">
+        <div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 1.15rem); opacity:0;">
+            <div class="flex items-center justify-between gap-3 px-0.5 pb-2">
                 <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
                 <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
                     Wyczyść
@@ -201,52 +230,28 @@ export function getPantryHTML() {
             </div>
             <div id="pantry-filter-panel-body" class="space-y-4"></div>
         </div>
-                        </div>
 
-                        <button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
+        <div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
-                            <i class="fas fa-search text-[13px]"></i>
+            <div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
+                <button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <span id="pantry-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
                 </button>
             </div>
-
+            <div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
-
+                <i class="fas fa-search shrink-0" aria-hidden="true"></i>
-                    <div id="pantry-calendar-popover" class="absolute left-0 right-0 top-full mt-2 rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
+                <input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
-                        ${createCalendarTopbarHTML({
+                    class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
-    prevId: 'pantry-cal-prev',
-    todayId: 'pantry-cal-today',
-    nextId: 'pantry-cal-next',
-    wrapperClass: 'pb-3 flex items-center justify-end gap-3',
-    controlsStyle: `background:${PANTRY_CALENDAR_THEME.bg};border-color:${PANTRY_CALENDAR_THEME.border};`,
-    navButtonClass: 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[rgb(var(--text-body-soft-rgb))] transition-colors',
-    todayButtonActiveClass: 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
-    todayButtonDimClass: 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
-})}
-                        ${createCalendarWeekdayHeaderHTML(undefined, {
-    wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[rgb(var(--text-dim-rgb))] uppercase tracking-wide mb-1 leading-none',
-})}
-                        <div id="pantry-calendar-grid" class="grid grid-cols-7 gap-1.5"></div>
-
-                        <div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
-                            <p id="pantry-cal-selection" class="min-w-0 text-[11px] leading-snug" style="color:rgb(var(--text-dim-rgb));"></p>
-                        </div>
             </div>
 
-                    <div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
+            <div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
+                <button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
-                        <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
+                    <i id="pantry-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
-                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
+                    <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
-                        <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
                 </button>
             </div>
         </div>
     </div>
-        </div>
-
-        <!-- ── scrollable content ── -->
-        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
-            <div id="pantry-board"></div>
-        </div>
-    </div>
     ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
 }
 
@@ -255,114 +260,106 @@ export function getPantryHTML() {
 function syncHorizonUI() {
     ensureValidHorizonDate();
 
-    const defaultRow = document.getElementById('pantry-default-row');
-    const searchShell = document.getElementById('pantry-search-shell');
     const popover = document.getElementById('pantry-calendar-popover');
     const filterPopover = document.getElementById('pantry-filter-popover');
-    const filterToggle = document.getElementById('pantry-filter-toggle');
     const filterCount = document.getElementById('pantry-filter-count');
+    const filterPillCount = document.getElementById('pantry-filter-pill-count');
+    const searchWrap = document.getElementById('pantry-search-wrap');
+    const searchShell = document.getElementById('pantry-search-shell');
+    const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
+    const rightBtn = document.getElementById('pantry-filter-bottom-btn');
+    const rightIcon = document.getElementById('pantry-right-btn-icon');
+    const searchDot = document.getElementById('pantry-search-active-dot');
     const compactLabel = document.getElementById('pantry-horizon-compact-label');
     const compactPill = document.getElementById('pantry-horizon-compact');
     const chevron = document.getElementById('pantry-horizon-chevron');
-    const selectionEl = document.getElementById('pantry-cal-selection');
-    const prevBtn = document.getElementById('pantry-cal-prev');
-    const todayBtn = document.getElementById('pantry-cal-today');
 
     if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
-    if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate);
 
-    const showCalendar = isCalendarOpen && !isSearchExpanded;
-    const showDefault = !isSearchExpanded;
-    const showFilter = isFilterOpen && showDefault;
     const activeFilterCount = getActivePantryFilterCount();
 
-    if (defaultRow) {
+    syncCalendarPopoverVisibility({
-        defaultRow.style.opacity = showDefault ? '1' : '0';
+        popup: popover,
-        defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
+        isOpen: isCalendarOpen,
-        defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
+        chevron,
-    }
+        chevronOpenTransform: 'rotate(180deg)',
-
+        chevronClosedTransform: 'rotate(0deg)',
-    if (compactPill) {
+        trigger: compactPill,
-        compactPill.style.setProperty('background', showCalendar ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
+        openTriggerStyle: {},
-        compactPill.style.setProperty('border-color', showCalendar ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
+        closedTriggerStyle: {},
-    }
+        triggerImportant: true,
-
+    });
-    if (popover) {
-        popover.style.opacity = showCalendar ? '1' : '0';
-        popover.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
-        popover.style.pointerEvents = showCalendar ? 'auto' : 'none';
-    }
-    if (chevron) {
-        chevron.style.transform = showCalendar ? 'rotate(180deg)' : 'rotate(0deg)';
-    }
 
     if (filterPopover) {
-        filterPopover.style.opacity = showFilter ? '1' : '0';
+        filterPopover.style.opacity = isFilterOpen ? '1' : '0';
-        filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
+        filterPopover.style.transform = isFilterOpen
-        filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
+            ? 'translateX(-50%) translateY(0) scale(1)'
-    }
+            : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
-    if (filterToggle) {
+        filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
-        const isActive = showFilter || hasActivePantryFilters();
-        filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
-        filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
-        filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
     }
     if (filterCount) {
         filterCount.textContent = String(activeFilterCount);
-        filterCount.classList.toggle('hidden', activeFilterCount === 0);
+        filterCount.classList.toggle('hidden', true);
-        filterCount.classList.toggle('flex', activeFilterCount > 0);
+        filterCount.classList.toggle('flex', false);
     }
-
+    if (filterPillCount) {
-    if (prevBtn) {
+        filterPillCount.textContent = String(activeFilterCount);
-        const isCurrentMonth = sameMonth(calendarMonthAnchor, getToday());
+        filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
-        prevBtn.disabled = isCurrentMonth;
+        filterPillCount.classList.toggle('flex', activeFilterCount > 0);
-        prevBtn.style.opacity = isCurrentMonth ? '0.45' : '1';
-        prevBtn.style.cursor = isCurrentMonth ? 'default' : 'pointer';
     }
-    syncCalendarTodayButton(
+    if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
-        todayBtn,
-        sameMonth(calendarMonthAnchor, getToday()),
-        horizonEndDate,
-        {
-            ariaLabelGo: 'Pokaż bieżący miesiąc w kalendarzu',
-            ariaLabelCurrent: 'Wyświetlany jest bieżący miesiąc',
-        },
-    );
-
     if (searchShell) {
-        searchShell.style.opacity = isSearchExpanded ? '1' : '0';
+        searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
-        searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
+        searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
-        searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
+        searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
     }
+    if (rightIcon) rightIcon.className = 'fas fa-xmark';
+    if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
+    if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
 
     renderCalendarPopover();
     renderFilterPopover();
 }
 
 function renderCalendarPopover() {
-    const gridEl = document.getElementById('pantry-calendar-grid');
+    pantryCalendar?.render();
-    if (!gridEl) return;
+}
 
-    ensureValidHorizonDate();
+function bindPantryCalendarInteractions() {
-    const today = getToday();
+    pantryCalendar = initSwipePopoverCalendar({
-    const plans = loadPlans();
+        idPrefix: 'pantry-cal',
-
+        selectionMode: 'single',
-    renderCalendarGrid({
+        panelHandlePx: 10,
-        gridEl,
+        panelHandleMin: 8,
-        mode: 'month',
+        panelHandleMax: 12,
-        anchorDate: calendarMonthAnchor,
+        getMonthAnchor: () => calendarMonthAnchor,
-        selectedDate: horizonEndDate,
+        setMonthAnchor: (nextMonth) => {
-        resolveDayState: (day, meta) => {
+            const nextAnchor = startOfMonth(nextMonth);
-            const isPast = day.getTime() < today.getTime();
+            const minAnchor = startOfMonth(getToday());
+            if (nextAnchor.getTime() < minAnchor.getTime()) return;
+            calendarMonthAnchor = nextAnchor;
+        },
+        canNavigateToMonth: (nextMonth) => {
+            const nextAnchor = startOfMonth(nextMonth);
+            const minAnchor = startOfMonth(getToday());
+            return nextAnchor.getTime() >= minAnchor.getTime();
+        },
+        getSelectionKeys: () => dateKey(horizonEndDate),
+        onSelectionCommit: (selectedKey) => {
+            selectHorizonDate(new Date(`${selectedKey}T00:00:00`));
+        },
+        resolveDayState: (day, { inCurrentMonth }) => {
+            const isPast = day.getTime() < getToday().getTime();
             return {
                 disabled: isPast,
-                dimmed: isPast || !meta.inCurrentMonth,
+                dimmed: isPast || !inCurrentMonth,
-                showIndicator: dayHasAnyMeal(plans, day),
+                showDot: dayHasAnyMeal(loadPlans(), day),
             };
         },
-        dayAttr: PANTRY_CALENDAR_DAY_ATTR,
         theme: PANTRY_CALENDAR_THEME,
     });
+    pantryCalendar.render();
 }
 
 function filterChipHtml(kind, value, label, active) {
@@ -409,41 +406,54 @@ function renderFilterPopover() {
     `;
 }
 
-function closeSearch() {
+function clearSearchInput() {
-    const input = document.getElementById('pantry-search');
+    const hadQuery = Boolean(pantrySearchQuery);
-    const hadQuery = Boolean(input?.value);
+    pantrySearchQuery = '';
-    if (input) {
-        input.value = '';
-        input.blur();
-    }
-    isSearchExpanded = false;
-    syncHorizonUI();
     if (hadQuery) renderBoard();
 }
 
-function openSearch() {
+function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
-    isSearchExpanded = true;
+    const hadQuery = Boolean(pantrySearchQuery);
+    pantrySearchOpen = open;
+    if (open) {
         isCalendarOpen = false;
         isFilterOpen = false;
+    }
+    document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
+    if (clearQuery) pantrySearchQuery = '';
+    const input = document.getElementById('pantry-search-input');
+    if (input) {
+        if (open) {
+            input.value = pantrySearchQuery;
+            if (focusInput) {
+                input.focus();
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        } else {
+            input.blur();
+        }
+    }
     syncHorizonUI();
-    window.requestAnimationFrame(() => {
+    if (clearQuery && hadQuery) renderBoard();
-        document.getElementById('pantry-search')?.focus();
-    });
 }
 
 function closeCalendar() {
     if (!isCalendarOpen) return;
     isCalendarOpen = false;
+    pantryCalendar?.resetTrackPosition();
     syncHorizonUI();
 }
 
 function openCalendar() {
     ensureValidHorizonDate();
     calendarMonthAnchor = startOfMonth(horizonEndDate);
-    isSearchExpanded = false;
     isFilterOpen = false;
     isCalendarOpen = true;
     syncHorizonUI();
+    stabilizeSwipeCalendarLayout({
+        calendar: pantryCalendar,
+        viewport: 'pantry-cal-viewport',
+    });
 }
 
 function closeFilter() {
@@ -453,8 +463,8 @@ function closeFilter() {
 }
 
 function toggleFilterPanel() {
+    if (pantrySearchOpen) return;
     isCalendarOpen = false;
-    isSearchExpanded = false;
     isFilterOpen = !isFilterOpen;
     syncHorizonUI();
 }
@@ -552,8 +562,8 @@ function classifyIngredients(searchQuery) {
 /* ══════════════════════ TILE RENDERING ══════════════════════ */
 
 function tileIconHtml(item, size = 'sm') {
-    const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
+    const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
-    const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
+    const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
     if (item.image) {
         return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
     }
@@ -563,12 +573,12 @@ function tileIconHtml(item, size = 'sm') {
 function shortfallTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item, 'lg')}
         <div class="flex-1 min-w-0 flex flex-col gap-1">
             <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
             <div class="flex items-center gap-2">
-                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
                     <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
                 </div>
                 <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -580,12 +590,12 @@ function shortfallTileHtml(item) {
 function sufficientTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item, 'lg')}
         <div class="flex-1 min-w-0 flex flex-col gap-1">
             <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
             <div class="flex items-center gap-2">
-                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
                     <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
                 </div>
                 <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -598,7 +608,7 @@ function notPlannedChipHtml(item) {
     const hasStock = item.qty > 0;
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item)}
         <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p>
         <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
@@ -619,7 +629,7 @@ function renderBoard() {
     const root = document.getElementById('pantry-board');
     if (!root) return;
 
-    const q = document.getElementById('pantry-search')?.value || '';
+    const q = pantrySearchQuery;
     const hasFilters = hasActivePantryFilters();
     const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
 
@@ -698,6 +708,8 @@ export function refreshPantry() {
 }
 
 export function setupPantry() {
+    ensureFilterPopoverStyles();
+
     if (!ingredientCard) {
         ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
         ingredientCard.bind();
@@ -706,26 +718,32 @@ export function setupPantry() {
     syncHorizonUI();
     renderBoard();
 
-    // Scroll shadow under top bar
-    const pantryScroll = document.getElementById('pantry-scroll');
-    const topbarOuter = document.getElementById('pantry-topbar-outer');
-    if (pantryScroll && topbarOuter) {
-        const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
-        topbarOuter.appendChild(shadow);
-        pantryScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
-        });
-    }
-
     // Search
-    document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
+    document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
-    document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
+        event.stopPropagation();
-        if (event.key === 'Escape') closeSearch();
+        setPantrySearchOpen(true, { focusInput: true });
+    });
+    document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
+        pantrySearchQuery = event.target.value.trim();
+        renderBoard();
+    });
+    document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
+        if (event.key !== 'Escape') return;
+        event.stopPropagation();
+        setPantrySearchOpen(false, { clearQuery: true });
+    });
+    document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (pantrySearchOpen) {
+            setPantrySearchOpen(false, { clearQuery: true });
+        }
+    });
+    document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (pantrySearchOpen) return;
+        closeCalendar();
+        toggleFilterPanel();
     });
-    document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
-    document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
-    document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
     document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
         event.stopPropagation();
         pantryFilters = { categories: [], sections: [] };
@@ -767,23 +785,7 @@ export function setupPantry() {
         event.stopPropagation();
         isCalendarOpen ? closeCalendar() : openCalendar();
     });
-    document.getElementById('pantry-cal-prev')?.addEventListener('click', () => {
+    bindPantryCalendarInteractions();
-        const prevMonth = addMonths(calendarMonthAnchor, -1);
-        if (prevMonth.getTime() < startOfMonth(getToday()).getTime()) return;
-        calendarMonthAnchor = prevMonth;
-        syncHorizonUI();
-    });
-    document.getElementById('pantry-cal-next')?.addEventListener('click', () => {
-        calendarMonthAnchor = addMonths(calendarMonthAnchor, 1);
-        syncHorizonUI();
-    });
-    document.getElementById('pantry-cal-today')?.addEventListener('click', () => {
-        calendarMonthAnchor = startOfMonth(getToday());
-        syncHorizonUI();
-    });
-    bindCalendarDayClicks(document.getElementById('pantry-calendar-grid'), (date) => {
-        selectHorizonDate(date);
-    }, PANTRY_CALENDAR_DAY_ATTR);
 
     if (!pantryGlobalListenersBound) {
         pantryGlobalListenersBound = true;
@@ -793,10 +795,30 @@ export function setupPantry() {
             if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
                 closeCalendar();
             }
-            if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
+            if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
                 closeFilter();
             }
         });
+        document.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape') return;
+            if (pantrySearchOpen) {
+                setPantrySearchOpen(false, { clearQuery: true });
+                return;
+            }
+            if (pantrySearchQuery) clearSearchInput();
+            if (isFilterOpen) closeFilter();
+        });
+        window.addEventListener('app-tab-change', () => {
+            if (pantrySearchOpen) setPantrySearchOpen(false);
+            closeFilter();
+            closeCalendar();
+        });
+        window.closePantrySearch = () => {
+            if (pantrySearchOpen) setPantrySearchOpen(false);
+        };
+        window.closePantryFilter = () => {
+            closeFilter();
+        };
     }
 
     window.refreshPantry = refreshPantry;

js/views/RecipeList.js

@@ -12,8 +12,8 @@ let filterState = {
     maxMinutes: DEFAULT_MAX_MINUTES,
 };
 
-let isSearchExpanded = false;
 let recipeListDocListenersBound = false;
+let recipeSearchOpen = false;
 
 function matchesFilters(recipe) {
     const { query, slots, tags, minMinutes, maxMinutes } = filterState;
@@ -43,53 +43,80 @@ function getFilteredRecipes() {
     return Object.values(RECIPES).filter(matchesFilters);
 }
 
-function syncRecipeScrollShadow() {
+function getActiveRecipeFilterCount() {
-    const searchShell = document.getElementById('recipe-search-shell');
+    let count = filterState.slots.length + filterState.tags.length;
-    if (searchShell) {
+    if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
-        searchShell.style.boxShadow = 'var(--shadow-shell)';
+    return count;
 }
+
+function syncRecipeScrollShadow() {
+    syncRecipeTopbarUI();
 }
 
 function syncRecipeTopbarUI() {
-    const defaultRow = document.getElementById('recipe-default-row');
+    const searchWrap = document.getElementById('recipe-search-wrap');
     const searchShell = document.getElementById('recipe-search-shell');
-
+    const rightWrap = document.getElementById('recipe-filter-wrap');
-    const showSearch = isSearchExpanded;
+    const rightBtn = document.getElementById('recipe-filter-btn');
-
+    const rightIcon = document.getElementById('recipe-right-btn-icon');
-    if (defaultRow) {
+    const filterCount = document.getElementById('recipe-filter-count');
-        defaultRow.style.opacity = showSearch ? '0' : '1';
+    const floatingFilterCount = document.getElementById('recipe-filter-float-count');
-        defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
+    const dot = document.getElementById('recipe-search-active-dot');
-        defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
+    const isOpen = recipeSearchOpen;
-    }
+    if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
-
     if (searchShell) {
-        searchShell.style.opacity = showSearch ? '1' : '0';
+        searchShell.style.opacity = isOpen ? '1' : '0';
-        searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
+        searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
-        searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
+        searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
-        searchShell.style.boxShadow = 'var(--shadow-shell)';
+    }
+    if (rightIcon) {
+        rightIcon.className = 'fas fa-xmark';
+    }
+    if (rightBtn) {
+        rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    }
+    if (rightWrap) {
+        rightWrap.classList.toggle('hidden', !isOpen);
+    }
+    if (filterCount) {
+        const showCount = false;
+        filterCount.classList.toggle('hidden', !showCount);
+        filterCount.classList.toggle('flex', showCount);
+    }
+    if (floatingFilterCount) {
+        const activeCount = getActiveRecipeFilterCount();
+        floatingFilterCount.textContent = String(activeCount);
+        floatingFilterCount.classList.toggle('hidden', activeCount === 0);
+        floatingFilterCount.classList.toggle('flex', activeCount > 0);
+    }
+    if (dot) {
+        const hasQuery = Boolean(filterState.query);
+        dot.classList.toggle('hidden', !hasQuery);
     }
 }
 
-function closeSearch() {
+function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+    const hadQuery = Boolean(filterState.query);
+    recipeSearchOpen = open;
+    if (open) window.closeFilters?.();
+    document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
+    if (clearQuery) {
+        filterState.query = '';
+    }
     const input = document.getElementById('recipe-search-input');
-    const hadQuery = Boolean(input?.value);
     if (input) {
-        input.value = '';
+        if (open) {
+            input.value = filterState.query;
+            if (focusInput) {
+                input.focus();
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        } else {
             input.blur();
         }
-    filterState.query = '';
-    isSearchExpanded = false;
-    syncRecipeTopbarUI();
-    if (hadQuery) renderGrid();
     }
-
-function openSearch() {
-    isSearchExpanded = true;
-    window.closeFilters?.();
     syncRecipeTopbarUI();
-    window.requestAnimationFrame(() => {
+    if (clearQuery && hadQuery) renderGrid();
-        document.getElementById('recipe-search-input')?.focus();
-    });
 }
 
 function renderGrid() {
@@ -102,7 +129,7 @@ function renderGrid() {
         emptyStateEl: emptyState,
         recipes: getFilteredRecipes(),
         showSlotLabels: false,
-        cardClassName: 'recipe-list-card',
+        cardClassName: 'recipe-list-card recipe-catalog-card',
     });
     syncRecipeTopbarUI();
     requestAnimationFrame(syncRecipeScrollShadow);
@@ -111,46 +138,43 @@ function renderGrid() {
 export function getRecipeListHTML() {
     return `
     <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
-            <div class="pointer-events-auto relative z-[1] w-full">
-                <div id="recipe-topbar" class="relative min-h-12">
-
-                    <div id="recipe-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
-                        <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>
-
-                        <div id="recipe-filter-wrap" class="relative shrink-0">
-                            <button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
-                                <i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
-                                <span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
-                            </button>
-                        </div>
-
-                        <button type="button" id="recipe-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));" aria-label="Szukaj">
-                            <i class="fas fa-search text-[13px]" aria-hidden="true"></i>
-                        </button>
-                    </div>
-
-                    <div id="recipe-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
-                        <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
-                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
-                        <button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         ${getRecipeGridSectionHTML({
         scrollId: 'recipe-scroll',
         gridId: 'recipe-grid',
         emptyStateId: 'recipe-empty-state',
-        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-[5.35rem] pb-24 bg-[rgb(var(--app-bg-rgb))]',
+        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
         gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
         emptyTitle: 'Brak wyników',
         emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
     })}
+        <div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
+                <button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+            <div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
+                <i class="fas fa-search shrink-0" aria-hidden="true"></i>
+                <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
+                    class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
+            </div>
+
+            <div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
+                <button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+        </div>
+        <div id="recipe-filter-float-controls" class="pointer-events-none absolute inset-x-0 z-[33] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="recipe-filter-float-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
+                <button type="button" id="recipe-filter-float-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="recipe-filter-float-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+        </div>
     </div>
     `;
 }
@@ -175,23 +199,28 @@ export function refreshRecipeList() {
 export function setupRecipeList() {
     renderGrid();
 
+    document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        setSearchOpen(true, { focusInput: true });
+    });
     document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
         filterState.query = e.target.value.trim();
         renderGrid();
     });
     document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') closeSearch();
+        if (e.key !== 'Escape') return;
+        e.stopPropagation();
+        setSearchOpen(false, { clearQuery: true });
     });
-
-    document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
-    document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
-
     document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
         e.stopPropagation();
-        if (isSearchExpanded) {
+        if (recipeSearchOpen) {
-            isSearchExpanded = false;
+            setSearchOpen(false, { clearQuery: true });
-            syncRecipeTopbarUI();
         }
+    });
+    document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (recipeSearchOpen) return;
         window.openFilters?.('recipes');
     });
 
@@ -202,24 +231,24 @@ export function setupRecipeList() {
         if (recipeId) window.openRecipeDetail?.(recipeId);
     });
 
-    const recipeScroll = document.getElementById('recipe-scroll');
-    const recipeTopBar = document.getElementById('recipe-top-bar');
-    if (recipeScroll && recipeTopBar) {
-        const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
-        recipeTopBar.appendChild(shadow);
-        recipeScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
-        });
-    }
-
     if (!recipeListDocListenersBound) {
         recipeListDocListenersBound = true;
         document.addEventListener('keydown', (e) => {
-            if (e.key !== 'Escape' || !isSearchExpanded) return;
+            const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
-            if (!document.getElementById('main-view')?.classList.contains('hidden')) {
+            if (e.key !== 'Escape') return;
-                closeSearch();
+            if (isRecipeViewVisible) {
+                if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
             }
         });
+
+        window.addEventListener('app-tab-change', () => {
+            if (recipeSearchOpen) setSearchOpen(false);
+            syncRecipeTopbarUI();
+        });
+
+        window.closeRecipeSearch = () => {
+            if (recipeSearchOpen) setSearchOpen(false);
+            syncRecipeTopbarUI();
+        };
     }
 }

js/views/ShoppingList.js

@@ -14,8 +14,11 @@ import {
 } from '../services/pantryShopping.js?v=2';
 import { aggregateSelectedDaysIngredientNeed } from '../services/planIngredients.js?v=2';
 import { loadPlans, dateKey } from '../services/planStore.js?v=2';
-import { addDays, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
+import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
+import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
+import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
 import { showAppToast } from '../ui/toast.js';
+import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';
 
 /* ── helpers ── */
 
@@ -57,11 +60,13 @@ const CALENDAR_DIM_TEXT = 'rgb(var(--text-faint-rgb))';
 const CALENDAR_DIM_OPACITY = '0.58';
 
 /* ── module state ── */
-let boughtSectionOpen = false;
+let boughtPopupOpen = false;
 let expandedIngredientId = null;
 let expandedAmount = 0;
 let calendarOpen = false;
 let calendarMonth = startOfMonth(new Date());
+let shoppingCalendar = null;
+let shoppingCalendarPopover = null;
 
 /* ── day helpers ── */
 
@@ -112,72 +117,52 @@ function groupByCategory(items) {
 /* ══════════════════════ HTML SHELL ══════════════════════ */
 
 export function getShoppingListHTML() {
-    const weekdayHeader = WEEKDAY_SHORT
-        .map((d) => `<div>${d}</div>`)
-        .join('');
-
     return `
     <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-
+        <!-- ── floating range pill above bottom nav ── -->
-        <!-- ── header ── -->
+        <div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
-        <div class="shrink-0 px-4 pt-5 pb-0">
+            <div id="shopping-range-wrap" class="pointer-events-auto absolute bottom-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); position:relative;">
-
+                <button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
-            <!-- title row + pill (position:relative anchors the popup) -->
-            <div class="flex items-center gap-2 mb-3" style="position:relative;">
-                <h1 class="flex-1 text-[18px] font-bold" style="color:rgb(var(--text-emphasis-rgb));">Lista zakupów</h1>
-                <button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
                     <span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
-                    <i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
+                    <i id="sl-range-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                 </button>
 
-                <!-- popup calendar (absolute, overlays content below) -->
+                <!-- popup calendar (absolute, overlays content above) -->
-                <div id="sl-calendar-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
+                ${createCalendarPopoverHTML({
-                    <div class="rounded-[1.35rem] px-3 py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
+        id: 'sl-calendar-popup',
-                        <!-- month nav topbar -->
+        calendarHTML: createSwipePopoverCalendarHTML({
-                        <div class="pb-3 flex items-center justify-end gap-3">
+        idPrefix: 'sl-cal',
-                            <div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center gap-px rounded-full border px-0.5" style="background:rgb(var(--app-bg-rgb)); border-color:rgb(var(--card-raised-rgb));">
+        weekdays: WEEKDAY_SHORT,
-                                <button type="button" id="sl-cal-prev" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full bg-transparent transition-colors" style="color:rgb(var(--text-body-soft-rgb));">
+    }),
-                                    <i class="fas fa-chevron-left text-[10px]"></i>
+        popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
-                                </button>
+    })}
-                                <span id="sl-cal-month-label" class="h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center px-1.5 text-[10px] font-semibold leading-none tabular-nums whitespace-nowrap" style="color:rgb(var(--text-body-soft-rgb));"></span>
-                                <button type="button" id="sl-cal-next" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full bg-transparent transition-colors" style="color:rgb(var(--text-body-soft-rgb));">
-                                    <i class="fas fa-chevron-right text-[10px]"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <!-- weekday header -->
-                        <div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium uppercase tracking-wide mb-1 leading-none" style="color:rgb(var(--text-dim-rgb));">${weekdayHeader}</div>
-                        <!-- day grid -->
-                        <div id="sl-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- progress -->
-            <div id="sl-progress-wrap" class="mb-3">
-                <span class="text-[12px] font-semibold block mb-1.5" style="color:rgb(var(--text-dim-rgb));">Kupione</span>
-                <div class="flex items-center gap-2">
-                    <div class="flex-1 h-1.5 rounded-full overflow-hidden" style="background:rgb(var(--card-rgb));">
-                        <div id="sl-progress-bar" class="h-full rounded-full transition-all duration-300" style="background:rgb(var(--success-rgb)); width:0%;"></div>
-                    </div>
-                    <button type="button" id="sl-clear-session" class="flex items-center justify-center flex-shrink-0" style="color:rgb(var(--text-subdued-rgb));" aria-label="Wyczyść kupione">
-                        <i class="fas fa-trash-can" style="font-size:14px;" aria-hidden="true"></i>
-                    </button>
-                </div>
         </div>
         </div>
 
         <!-- ── scrollable list ── -->
-        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
+        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
             <div id="sl-board"></div>
+        </div>
 
-            <!-- bought section -->
+        <div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
-            <div id="sl-bought-section" class="mt-3 hidden">
+            <div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-bottom-control-size, 3.9rem));">
-                <button type="button" id="sl-bought-toggle" class="flex items-center gap-2 w-full py-2 px-1 text-left" style="color:rgb(var(--text-dim-rgb));">
+                <button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
-                    <i id="sl-bought-chevron" class="fas fa-chevron-right text-[10px] transition-transform duration-200"></i>
+                    <i class="fas fa-check" aria-hidden="true"></i>
-                    <span class="text-[11px] font-bold uppercase tracking-wider">Kupione (<span id="sl-bought-count">0</span>)</span>
+                    <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
                 </button>
-                <div id="sl-bought-list" class="hidden mt-1"></div>
+
+                <!-- popup bought (absolute, overlays content above controls) -->
+                <div id="sl-bought-popup" style="position:absolute; bottom:calc(100% + 0.5rem); right:0; width:min(calc(100vw - 1.5rem), 22rem); z-index:50; pointer-events:none; opacity:0; transform:translateY(6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
+                    <div class="filter-liquid-surface filter-liquid-panel rounded-[1.35rem] px-3 py-3">
+                        <div class="flex items-center justify-between mb-2 px-1">
+                            <span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span>
+                            <button type="button" id="sl-clear-session" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
+                                Wyczyść
+                            </button>
+                        </div>
+                        <div id="sl-bought-list" class="max-h-[50vh] overflow-y-auto no-scrollbar"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>`;
@@ -185,115 +170,51 @@ export function getShoppingListHTML() {
 
 /* ══════════════════════ CALENDAR ══════════════════════ */
 
-function getDayRange(startDk, endDk) {
+function initShoppingCalendar() {
-    const a = new Date(startDk + 'T00:00:00');
+    shoppingCalendar = initSwipePopoverCalendar({
-    const b = new Date(endDk + 'T00:00:00');
+        idPrefix: 'sl-cal',
-    const [from, to] = a <= b ? [a, b] : [b, a];
+        selectionMode: 'range',
-    const days = [];
+        monthsLong: MONTHS_LONG,
-    for (let d = new Date(from); d <= to; d = addDays(d, 1)) days.push(dateKey(d));
+        getMonthAnchor: () => calendarMonth,
-    return days;
+        setMonthAnchor: (nextMonth) => {
-}
+            calendarMonth = startOfMonth(nextMonth);
-
+        },
-function renderCalendarGrid(previewDays = null) {
+        getSelectionKeys: () => getSelectedDays(),
-    const grid = document.getElementById('sl-cal-grid');
+        onSelectionCommit: (rangeKeys) => {
-    const monthLabel = document.getElementById('sl-cal-month-label');
+            setSelectedDays(rangeKeys);
-    if (!grid) return;
-
-    if (monthLabel) {
-        monthLabel.textContent = `${MONTHS_LONG[calendarMonth.getMonth()]} ${calendarMonth.getFullYear()}`;
-    }
-
-    const selected = previewDays ?? new Set(getSelectedDays());
-    const today = todayKey();
-    const first = startOfMonth(calendarMonth);
-    const gridStart = startOfWeekMonday(first);
-
-    const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
-    while (cells.length > 35 && cells.slice(-7).every((d) => d.getMonth() !== first.getMonth())) {
-        cells.splice(-7);
-    }
-
-    grid.innerHTML = cells.map((day) => {
-        const dk = dateKey(day);
-        const inMonth = day.getMonth() === first.getMonth();
-        const isSel = selected.has(dk);
-        const isToday = dk === today;
-
-        let bg, borderColor, color, opacity, borderClass;
-        if (isSel) {
-            bg = 'rgb(var(--card-rgb))'; borderColor = 'rgb(var(--border-input-rgb))'; color = 'rgb(var(--text-emphasis-rgb))'; opacity = '1'; borderClass = 'border';
-        } else if (!inMonth) {
-            bg = 'transparent'; borderColor = 'transparent'; color = CALENDAR_DIM_TEXT; opacity = CALENDAR_DIM_OPACITY; borderClass = 'border-0';
-        } else {
-            bg = 'rgb(var(--app-bg-rgb))'; borderColor = 'rgb(var(--card-raised-rgb))'; color = 'rgb(var(--text-body-soft-rgb))'; opacity = '1'; borderClass = 'border';
-        }
-
-        const dot = isToday && !isSel
-            ? `<span class="absolute left-1/2 -translate-x-1/2 w-1 h-1 rounded-full opacity-75" style="bottom:0.24rem; background:rgb(var(--text-faint-rgb));"></span>`
-            : '';
-
-        return `<button type="button" class="sl-cal-day mx-auto flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium leading-tight overflow-hidden"
-            style="background:${bg}; border-color:${borderColor}; color:${color}; opacity:${opacity}; touch-action:none;"
-            data-dk="${esc(dk)}">
-            <span class="relative flex h-full w-full flex-col items-center justify-center">
-                <span class="text-[13px] font-semibold leading-none${dot ? ' -translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
-                ${dot}
-            </span>
-        </button>`;
-    }).join('');
-}
-
-function bindCalendarEvents() {
-    const grid = document.getElementById('sl-cal-grid');
-    if (!grid) return;
-
-    let dragStartDk = null;
-    let dragCurrentDk = null;
-    let dragging = false;
-
-    grid.addEventListener('pointerdown', (e) => {
-        e.stopPropagation();
-        const btn = e.target.closest('.sl-cal-day');
-        if (!btn) return;
-        dragStartDk = btn.dataset.dk;
-        dragCurrentDk = btn.dataset.dk;
-        dragging = true;
-        grid.setPointerCapture(e.pointerId);
-        renderCalendarGrid(new Set([dragStartDk]));
-    });
-
-    grid.addEventListener('pointermove', (e) => {
-        if (!dragging || !dragStartDk) return;
-        e.preventDefault();
-        const el = document.elementFromPoint(e.clientX, e.clientY);
-        const btn = el?.closest('.sl-cal-day');
-        if (!btn?.dataset.dk || btn.dataset.dk === dragCurrentDk) return;
-        dragCurrentDk = btn.dataset.dk;
-        renderCalendarGrid(new Set(getDayRange(dragStartDk, dragCurrentDk)));
-    });
-
-    grid.addEventListener('pointerup', (e) => {
-        if (!dragging) return;
-        dragging = false;
-        const range = getDayRange(dragStartDk, dragCurrentDk);
-        dragStartDk = null;
-        dragCurrentDk = null;
-        setSelectedDays(range);
             expandedIngredientId = null;
             updatePillLabel();
-        renderCalendarGrid();
             renderAll();
+        },
+        resolveDayState: (day, { inCurrentMonth, isSelected }) => ({
+            disabled: false,
+            dimmed: !inCurrentMonth,
+            showDot: dateKey(day) === todayKey() && !isSelected,
+        }),
+        theme: {
+            selectedBorder: 'rgba(var(--text-emphasis-rgb),0.34)',
+            selectedText: 'rgb(var(--text-emphasis-rgb))',
+            selectedDot: 'rgb(var(--text-emphasis-rgb))',
+            selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
+            bg: 'rgba(255,255,255,0.08)',
+            border: 'transparent',
+            text: 'rgb(var(--text-body-soft-rgb))',
+            dimmedBg: 'transparent',
+            dimText: CALENDAR_DIM_TEXT,
+            dimOpacity: Number(CALENDAR_DIM_OPACITY),
+            dot: 'rgb(var(--text-faint-rgb))',
+        },
     });
-
+    shoppingCalendarPopover = createCalendarPopoverController({
-    grid.addEventListener('pointercancel', () => {
+        popupId: 'sl-calendar-popup',
-        dragging = false;
+        viewportId: 'sl-cal-viewport',
-        dragStartDk = null;
+        triggerId: 'sl-range-pill',
-        dragCurrentDk = null;
+        chevronId: 'sl-range-chevron',
-        renderCalendarGrid();
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
+        getCalendar: () => shoppingCalendar,
+        hideViewportDuringLayout: true,
     });
-
-    // Prevent bubbled click events (generated after pointerup) from closing the popup
-    grid.addEventListener('click', (e) => e.stopPropagation());
 }
 
 function updatePillLabel() {
@@ -302,43 +223,54 @@ function updatePillLabel() {
 }
 
 function openCalendar() {
+    if (boughtPopupOpen) closeBoughtPopup();
     calendarOpen = true;
     calendarMonth = startOfMonth(new Date());
-    const popup = document.getElementById('sl-calendar-popup');
+    shoppingCalendarPopover?.open();
-    const chevron = document.getElementById('sl-range-chevron');
+}
-    const pill = document.getElementById('sl-range-pill');
+
+function closeCalendar() {
+    calendarOpen = false;
+    shoppingCalendarPopover?.close({ clearPendingRange: true });
+}
+
+function toggleCalendar() {
+    calendarOpen ? closeCalendar() : openCalendar();
+}
+
+function openBoughtPopup() {
+    if (calendarOpen) closeCalendar();
+    boughtPopupOpen = true;
+    const popup = document.getElementById('sl-bought-popup');
+    const btn = document.getElementById('sl-bought-btn');
     if (popup) {
         popup.style.pointerEvents = 'auto';
         popup.style.opacity = '1';
         popup.style.transform = 'translateY(0) scale(1)';
     }
-    if (chevron) chevron.style.transform = 'rotate(180deg)';
+    if (btn) {
-    if (pill) {
+        btn.style.background = 'rgb(var(--sunken-rgb))';
-        pill.style.background = 'rgb(var(--sunken-rgb))';
+        btn.style.borderColor = 'rgb(var(--border-input-rgb))';
-        pill.style.borderColor = 'rgb(var(--border-input-rgb))';
     }
-    renderCalendarGrid();
 }
 
-function closeCalendar() {
+function closeBoughtPopup() {
-    calendarOpen = false;
+    boughtPopupOpen = false;
-    const popup = document.getElementById('sl-calendar-popup');
+    const popup = document.getElementById('sl-bought-popup');
-    const chevron = document.getElementById('sl-range-chevron');
+    const btn = document.getElementById('sl-bought-btn');
-    const pill = document.getElementById('sl-range-pill');
     if (popup) {
         popup.style.pointerEvents = 'none';
         popup.style.opacity = '0';
-        popup.style.transform = 'translateY(-6px) scale(0.98)';
+        popup.style.transform = 'translateY(6px) scale(0.98)';
     }
-    if (chevron) chevron.style.transform = '';
+    if (btn) {
-    if (pill) {
+        btn.style.background = 'rgb(var(--card-rgb))';
-        pill.style.background = 'rgb(var(--card-rgb))';
+        btn.style.borderColor = 'rgb(var(--border-card-rgb))';
-        pill.style.borderColor = 'rgb(var(--border-card-rgb))';
     }
 }
 
-function toggleCalendar() {
+function toggleBoughtPopup() {
-    calendarOpen ? closeCalendar() : openCalendar();
+    boughtPopupOpen ? closeBoughtPopup() : openBoughtPopup();
 }
 
 /* ══════════════════════ ITEM ROWS ══════════════════════ */
@@ -357,11 +289,11 @@ function activeItemHtml(item) {
     const stepAmt = isExpanded ? expandedAmount : Math.max(step, Math.round(item.shortfall / step) * step);
 
     return `
-    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--success-rgb)); box-shadow:var(--shadow-card);">
+    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
-        <div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end">
+        <div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end" style="background:rgb(var(--success-rgb)); opacity:0;">
             <i class="fas fa-check text-white text-lg"></i>
         </div>
-        <div class="sl-swipe-inner rounded-xl" style="background:rgb(var(--card-rgb)); position:relative;"
+        <div class="sl-swipe-inner" style="background:rgb(var(--card-rgb)); position:relative;"
             data-id="${esc(item.ingredientId)}" data-unit="${esc(item.unit)}" data-shortfall="${item.shortfall}">
             <div class="sl-item-main flex items-center gap-3 py-1.5 px-3 cursor-pointer select-none">
                 ${mediaHtml}
@@ -397,23 +329,20 @@ function boughtItemHtml(entry) {
     const image = def?.image;
     const mediaFit = image?.endsWith('.svg') ? 'object-contain' : 'object-cover';
     const mediaHtml = image
-        ? `<img src="${esc(image)}" alt="" class="w-8 h-8 rounded-lg ${mediaFit} shrink-0 opacity-50">`
+        ? `<img src="${esc(image)}" alt="" class="w-8 h-8 rounded-lg ${mediaFit} shrink-0">`
-        : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 opacity-50" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-xs" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
+        : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-xs" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
 
     return `
-    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--danger-rgb)); box-shadow:var(--shadow-card);">
+    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
-        <div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start">
+        <div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start" style="background:rgb(var(--danger-rgb)); opacity:0;">
             <i class="fas fa-rotate-left text-white text-lg"></i>
         </div>
-        <div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3 rounded-xl" style="background:rgb(var(--card-soft-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
+        <div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
-            <div class="shrink-0 w-6 h-6 rounded-full flex items-center justify-center" style="background:rgb(var(--success-rgb));">
-                <i class="fas fa-check text-[10px]" style="color:rgb(var(--on-accent-rgb));"></i>
-            </div>
             ${mediaHtml}
-            <div class="flex-1 min-w-0 opacity-60">
+            <div class="flex-1 min-w-0">
-                <span class="block text-[13px] font-medium leading-tight truncate line-through" style="color:rgb(var(--text-body-rgb));">${esc(entry.name)}</span>
+                <span class="block text-[13px] font-medium leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(entry.name)}</span>
             </div>
-            <span class="text-[13px] tabular-nums shrink-0 opacity-60" style="color:rgb(var(--text-muted-rgb));">${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))}</span>
+            <span class="text-[13px] font-semibold tabular-nums shrink-0" style="color:rgb(var(--text-muted-rgb));">${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))}</span>
         </div>
     </div>`;
 }
@@ -423,6 +352,10 @@ function boughtItemHtml(entry) {
 function attachSwipe(container, opts) {
     const inner = container.querySelector('.sl-swipe-inner');
     if (!inner) return;
+    const bgBuy = container.querySelector('.sl-swipe-bg-buy');
+    const bgUndo = container.querySelector('.sl-swipe-bg-undo');
+    const showBg = (el) => { if (el) el.style.opacity = '1'; };
+    const hideBgs = () => { if (bgBuy) bgBuy.style.opacity = '0'; if (bgUndo) bgUndo.style.opacity = '0'; };
     let startX = 0, startY = 0, dx = 0, tracking = false, decided = false, goingH = false;
 
     container.addEventListener('pointerdown', (e) => {
@@ -441,10 +374,10 @@ function attachSwipe(container, opts) {
             decided = true;
             goingH = Math.abs(ddx) > Math.abs(ddy);
         }
-        if (!goingH) { tracking = false; inner.style.transform = ''; return; }
+        if (!goingH) { tracking = false; inner.style.transform = ''; hideBgs(); return; }
         dx = ddx;
-        if (dx > 0 && opts.onRight) inner.style.transform = `translateX(${Math.min(dx, 90)}px)`;
+        if (dx > 0 && opts.onRight) { inner.style.transform = `translateX(${Math.min(dx, 90)}px)`; showBg(bgBuy); }
-        else if (dx < 0 && opts.onLeft) inner.style.transform = `translateX(${Math.max(dx, -90)}px)`;
+        else if (dx < 0 && opts.onLeft) { inner.style.transform = `translateX(${Math.max(dx, -90)}px)`; showBg(bgUndo); }
     });
 
     const finish = () => {
@@ -460,6 +393,7 @@ function attachSwipe(container, opts) {
             setTimeout(opts.onLeft, 180);
         } else {
             inner.style.transform = '';
+            hideBgs();
         }
         dx = 0;
     };
@@ -469,6 +403,7 @@ function attachSwipe(container, opts) {
         tracking = false;
         inner.style.transition = 'transform 0.2s ease';
         inner.style.transform = '';
+        hideBgs();
         dx = 0;
     });
 }
@@ -516,14 +451,15 @@ function undoBoughtEntry(entryId) {
 
 /* ══════════════════════ RENDERING ══════════════════════ */
 
-function renderProgress(activeItems, sessionLog) {
+function renderBoughtBadge(count) {
-    const touchedIds = new Set(sessionLog.map((e) => e.ingredientId));
+    const badge = document.getElementById('sl-bought-badge');
-    const bought = touchedIds.size;
+    if (!badge) return;
-    const untouched = activeItems.filter((i) => !touchedIds.has(i.ingredientId)).length;
+    if (count > 0) {
-    const total = bought + untouched;
+        badge.textContent = String(count);
-
+        badge.style.display = 'flex';
-    const barEl = document.getElementById('sl-progress-bar');
+    } else {
-    if (barEl) barEl.style.width = total > 0 ? `${Math.round((bought / total) * 100)}%` : '0%';
+        badge.style.display = 'none';
+    }
 }
 
 function renderBoard() {
@@ -576,22 +512,17 @@ function renderBoard() {
 
 function renderBought() {
     const sessionLog = getSessionLog();
-    const section = document.getElementById('sl-bought-section');
+    const countEl = document.getElementById('sl-bought-popup-count');
-    const countEl = document.getElementById('sl-bought-count');
     const list = document.getElementById('sl-bought-list');
-    if (!section || !list || !countEl) return;
+    if (!list || !countEl) return;
 
-    if (sessionLog.length === 0) { section.classList.add('hidden'); return; }
-
-    section.classList.remove('hidden');
     countEl.textContent = String(sessionLog.length);
 
-    const chevron = document.getElementById('sl-bought-chevron');
+    if (sessionLog.length === 0) {
-    if (chevron) chevron.style.transform = boughtSectionOpen ? 'rotate(90deg)' : '';
+        list.innerHTML = `<div class="py-6 text-center text-[12px]" style="color:rgb(var(--text-dim-rgb));">Brak kupionych</div>`;
+        return;
+    }
 
-    if (!boughtSectionOpen) { list.classList.add('hidden'); return; }
-
-    list.classList.remove('hidden');
     list.innerHTML = [...sessionLog].reverse().map((e) => boughtItemHtml(e)).join('');
     list.querySelectorAll('.sl-swipe-wrap').forEach((wrap) => {
         const entryId = wrap.querySelector('.sl-swipe-inner')?.dataset.entryId;
@@ -601,9 +532,8 @@ function renderBought() {
 }
 
 function renderAll() {
-    const activeItems = computeActiveItems();
     const sessionLog = getSessionLog();
-    renderProgress(activeItems, sessionLog);
+    renderBoughtBadge(sessionLog.length);
     renderBoard();
     renderBought();
 }
@@ -648,52 +578,53 @@ function bindActiveRowEvents(root, activeItems) {
 export function refreshShoppingList() {
     updatePillLabel();
     renderAll();
+    if (calendarOpen) shoppingCalendar?.render();
 }
 
 export function setupShoppingList() {
+    ensureFilterPopoverStyles();
+
     if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
 
     updatePillLabel();
     renderAll();
 
-    bindCalendarEvents();
+    initShoppingCalendar();
 
     document.getElementById('sl-range-pill')?.addEventListener('click', (e) => {
         e.stopPropagation();
         toggleCalendar();
     });
 
+    document.getElementById('sl-bought-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleBoughtPopup();
+    });
+
     document.addEventListener('click', (e) => {
-        if (!calendarOpen) return;
+        if (calendarOpen) {
             const popup = document.getElementById('sl-calendar-popup');
             const pill = document.getElementById('sl-range-pill');
             if (popup && !popup.contains(e.target) && pill && !pill.contains(e.target)) {
                 closeCalendar();
             }
+        }
+        if (boughtPopupOpen) {
+            const popup = document.getElementById('sl-bought-popup');
+            const btn = document.getElementById('sl-bought-btn');
+            if (popup && !popup.contains(e.target) && btn && !btn.contains(e.target)) {
+                closeBoughtPopup();
+            }
+        }
     });
 
-    document.getElementById('sl-cal-prev')?.addEventListener('click', (e) => {
+    document.getElementById('sl-clear-session')?.addEventListener('click', (e) => {
         e.stopPropagation();
-        calendarMonth = startOfMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() - 1, 1));
-        renderCalendarGrid();
-    });
-
-    document.getElementById('sl-cal-next')?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        calendarMonth = startOfMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1));
-        renderCalendarGrid();
-    });
-
-
-    document.getElementById('sl-clear-session')?.addEventListener('click', () => {
         clearSessionLog();
         renderAll();
     });
 
-    document.getElementById('sl-bought-toggle')?.addEventListener('click', () => {
+    window.closeShoppingCalendar = () => closeCalendar();
-        boughtSectionOpen = !boughtSectionOpen;
+    window.closeShoppingBoughtPopup = () => closeBoughtPopup();
-        renderBought();
-    });
-
     window.refreshShoppingList = refreshShoppingList;
 }