Adjust filter button

js/app.js

@@ -65,11 +65,11 @@ function renderAppBootError(message) {
     if (!appContainer) return;
 
     appContainer.innerHTML = `
-        <div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
-            <div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
-                <p class="text-sm font-semibold" style="color:#f2efe8 !important;">Nie udało się uruchomić aplikacji</p>
-                <p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
-                <button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież aplikację</button>
+        <div class="flex h-full items-center justify-center px-6 text-center" style="background:rgb(var(--app-bg-rgb)) !important;">
+            <div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:rgb(var(--card-soft-rgb)) !important; border-color:rgb(var(--card-strong-rgb)) !important;">
+                <p class="text-sm font-semibold" style="color:rgb(var(--text-emphasis-rgb)) !important;">Nie udało się uruchomić aplikacji</p>
+                <p class="mt-2 text-xs leading-relaxed" style="color:rgb(var(--text-muted-rgb)) !important;">${message}</p>
+                <button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:rgb(var(--sunken-rgb)) !important; border-color:rgb(var(--border-input-rgb)) !important; color:rgb(var(--text-emphasis-rgb)) !important;">Odśwież aplikację</button>
             </div>
         </div>
     `;

js/services/pantryShopping.js

@@ -1,5 +1,5 @@
 import { INGREDIENTS, CATEGORY_LABELS, PRODUCTS, ingredientHasProducts } from '../data/catalog.js?v=9';
-import { PANTRY_STORAGE_KEY, PANTRY_STORAGE_KEY_V2, SHOPPING_STORAGE_KEY } from '../storageKeys.js';
+import { PANTRY_STORAGE_KEY, PANTRY_STORAGE_KEY_V2, SHOPPING_STORAGE_KEY, SHOPPING_SESSION_KEY } from '../storageKeys.js';
 
 export const KITCHEN_LIST_ID = 'kitchen';
 export const MISC_LIST_ID = 'misc';
@@ -535,6 +535,148 @@ export function setPantryProductQty(ingredientId, productId, qty) {
     return pantry;
 }
 
+/**
+ * Dodaj delta do spiżarni (używane przy zakupie ze listy).
+ * @param {string} ingredientId
+ * @param {string|undefined} productId
+ * @param {number} amount
+ */
+export function addAmountToPantry(ingredientId, productId, amount) {
+    const pantry = loadPantry();
+    const rounded = Math.round(amount * 1000) / 1000;
+    if (productId && PRODUCTS[productId]) {
+        let val = pantry[ingredientId];
+        if (!val || typeof val === 'number') {
+            val = { items: [], _total: 0 };
+            pantry[ingredientId] = val;
+        }
+        const idx = val.items.findIndex((i) => i.productId === productId);
+        if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + rounded) * 1000) / 1000;
+        else val.items.push({ productId, qty: rounded });
+        recalcTotal(val);
+    } else {
+        const cur = typeof pantry[ingredientId] === 'number' ? pantry[ingredientId] : 0;
+        pantry[ingredientId] = Math.round((cur + rounded) * 1000) / 1000;
+    }
+    savePantry(pantry);
+    return pantry;
+}
+
+/**
+ * Odejmij delta ze spiżarni (undo zakupu).
+ * @param {string} ingredientId
+ * @param {string|undefined} productId
+ * @param {number} amount
+ */
+export function subtractFromPantry(ingredientId, productId, amount) {
+    const pantry = loadPantry();
+    if (productId && PRODUCTS[productId]) {
+        const val = pantry[ingredientId];
+        if (!val || typeof val === 'number') return pantry;
+        const idx = val.items.findIndex((i) => i.productId === productId);
+        if (idx < 0) return pantry;
+        val.items[idx].qty = Math.max(0, Math.round((val.items[idx].qty - amount) * 1000) / 1000);
+        if (val.items[idx].qty <= 0) val.items.splice(idx, 1);
+        recalcTotal(val);
+        if (val._total <= 0) delete pantry[ingredientId];
+    } else {
+        const cur = typeof pantry[ingredientId] === 'number' ? pantry[ingredientId] : 0;
+        const next = Math.max(0, Math.round((cur - amount) * 1000) / 1000);
+        if (next <= 0) delete pantry[ingredientId];
+        else pantry[ingredientId] = next;
+    }
+    savePantry(pantry);
+    return pantry;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+ * Session zakupowy — selectedDays + log zakupów bieżącej sesji
+ * ══════════════════════════════════════════════════════════════════════ */
+
+/**
+ * @typedef {{ id: string, ingredientId: string, productId?: string, name: string, addedAmount: number, unit: string, category: string, timestamp: number }} SessionLogEntry
+ * @typedef {{ selectedDays: string[], sessionLog: SessionLogEntry[] }} ShoppingSessionState
+ */
+
+function defaultShoppingSession() {
+    return { selectedDays: [], sessionLog: [] };
+}
+
+function normalizeShoppingSession(raw) {
+    if (!raw || typeof raw !== 'object') return defaultShoppingSession();
+    const selectedDays = Array.isArray(raw.selectedDays)
+        ? raw.selectedDays.filter((d) => typeof d === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(d))
+        : [];
+    const sessionLog = Array.isArray(raw.sessionLog)
+        ? raw.sessionLog.filter((e) => e && typeof e.ingredientId === 'string' && Number.isFinite(e.addedAmount))
+        : [];
+    return { selectedDays, sessionLog };
+}
+
+/** @returns {ShoppingSessionState} */
+export function loadShoppingSession() {
+    try {
+        const raw = localStorage.getItem(SHOPPING_SESSION_KEY);
+        if (!raw) return defaultShoppingSession();
+        return normalizeShoppingSession(JSON.parse(raw));
+    } catch {
+        return defaultShoppingSession();
+    }
+}
+
+/** @param {ShoppingSessionState} s */
+export function saveShoppingSession(s) {
+    try {
+        localStorage.setItem(SHOPPING_SESSION_KEY, JSON.stringify(s));
+    } catch { /* ignore */ }
+}
+
+/** @returns {string[]} */
+export function getSelectedDays() {
+    return loadShoppingSession().selectedDays;
+}
+
+/** @param {string[]} days */
+export function setSelectedDays(days) {
+    const s = loadShoppingSession();
+    s.selectedDays = days;
+    saveShoppingSession(s);
+}
+
+/**
+ * @param {{ ingredientId: string, productId?: string, name: string, addedAmount: number, unit: string, category: string }} entry
+ * @returns {string} new entry id
+ */
+export function addSessionLogEntry(entry) {
+    const s = loadShoppingSession();
+    const id = newId('sl');
+    s.sessionLog.push({
+        id,
+        ingredientId: entry.ingredientId,
+        productId: entry.productId || undefined,
+        name: entry.name,
+        addedAmount: Math.round(entry.addedAmount * 100) / 100,
+        unit: entry.unit,
+        category: entry.category,
+        timestamp: Date.now(),
+    });
+    saveShoppingSession(s);
+    return id;
+}
+
+/** @param {string} entryId */
+export function removeSessionLogEntry(entryId) {
+    const s = loadShoppingSession();
+    s.sessionLog = s.sessionLog.filter((e) => e.id !== entryId);
+    saveShoppingSession(s);
+}
+
+export function clearSessionLog() {
+    const s = loadShoppingSession();
+    s.sessionLog = [];
+    saveShoppingSession(s);
+}
+
 /** Kupione ze listy kuchennej → spiżarnia (zawsze ta lista, niezależnie od aktywnej zakładki). */
 export function applyCheckedKitchenListToPantry() {
     const s = loadShoppingState();

js/services/planIngredients.js

@@ -218,6 +218,35 @@ export function aggregateRangeIngredientNeed(plans, startDate, numDays) {
         });
 }
 
+/**
+ * Zapotrzebowanie składników dla konkretnych dni (tablica dateKey-ów).
+ * @param {Record<string, unknown>} plans
+ * @param {string[]} selectedDays — tablica dateKey-ów ('YYYY-MM-DD')
+ */
+export function aggregateSelectedDaysIngredientNeed(plans, selectedDays) {
+    if (!selectedDays || selectedDays.length === 0) return [];
+    const map = new Map();
+    for (const dk of selectedDays) {
+        const [y, m, d] = dk.split('-').map(Number);
+        const day = new Date(y, m - 1, d);
+        const dayPlan = getDayPlan(plans, day);
+        const lines = flattenDayIngredientLines(dayPlan);
+        for (const line of lines) {
+            const key = `${line.ingredientId}\t${line.unit}`;
+            const cur = map.get(key);
+            if (!cur) {
+                map.set(key, { ...line });
+            } else {
+                cur.amount = Math.round((cur.amount + line.amount) * 10) / 10;
+            }
+        }
+    }
+    return [...map.values()].sort((a, b) => {
+        const c = a.category.localeCompare(b.category);
+        return c !== 0 ? c : a.name.localeCompare(b.name, 'pl');
+    });
+}
+
 /**
  * Jedna grupa na porę dnia: nagłówek pory raz, potem bloki przepisów ze składnikami.
  */

js/storageKeys.js

@@ -2,3 +2,4 @@ export const PLANS_STORAGE_KEY = 'recipe-planner-plans-v1';
 export const PANTRY_STORAGE_KEY = 'recipe-pantry-v1';
 export const PANTRY_STORAGE_KEY_V2 = 'recipe-pantry-v2';
 export const SHOPPING_STORAGE_KEY = 'recipe-shopping-v1';
+export const SHOPPING_SESSION_KEY = 'recipe-shopping-session-v1';

js/ui/bottomNav.js

@@ -1,56 +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) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
-    });
-}
-
 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">
-                    <i class="fas fa-search" aria-hidden="true"></i>
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
+                    <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 id="nav-shopping-badge" class="hidden absolute -top-0.5 -right-0.5 min-w-[16px] h-4 rounded-full flex items-center justify-center text-[9px] font-bold leading-none px-1" style="background:rgb(var(--accent-rgb)); color:#1a1a1a;"></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>
+                    <span class="nav-label">Zakupy</span>
                 </button>
             </div>
         </div>
@@ -67,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();
@@ -87,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,11 +80,11 @@ 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:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></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') {
-    const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
+    const color = tone === 'success' ? 'rgb(var(--success-rgb))' : tone === 'muted' ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-body-soft-rgb))';
     return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
 }
 
@@ -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,34 +158,35 @@ 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(0,0,0,0.5);',
-    cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
-    cardStyle = 'background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
+    overlayStyle = 'pointer-events:none;',
+    cardClass = 'calendar-liquid-panel relative w-full max-w-xs rounded-2xl overflow-hidden',
+    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:#393937;">
+                    <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:#6d6c67;"></i>
+                            <i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:rgb(var(--text-subdued-rgb));"></i>
                         </div>
                     </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:#393937; color:#ddd6ca;" 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:#6ee7b7;"></p>
+                            <p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:rgb(var(--success-rgb));"></p>
                         </div>
-                        <h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
-                        <p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
+                        <h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:rgb(var(--text-body-rgb));"></h3>
+                        <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:#393937; color:#ddd6ca;" 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>
@@ -319,24 +326,24 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         const nutritionMeta = hint ? `${unitScope} • ${hint}` : unitScope;
 
         wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
-            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(nutritionMeta)}</p>
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:rgb(var(--text-dim-rgb));">Wartości odżywcze</p>
+            <p class="text-[10px] mb-1.5" style="color:rgb(var(--text-dim-rgb));">${esc(nutritionMeta)}</p>
             <div class="grid grid-cols-4 gap-1.5">
-                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
-                    <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${nutrition.kcal}</p>
-                    <p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:rgb(var(--card-rgb));">
+                    <p class="text-[15px] font-bold tabular-nums leading-tight" style="color:rgb(var(--text-body-rgb));">${nutrition.kcal}</p>
+                    <p class="text-[9px] font-medium" style="color:rgb(var(--text-dim-rgb));">kcal</p>
                 </div>
-                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:rgb(var(--card-rgb));">
                     <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${formatQty(nutrition.protein)}g</p>
-                    <p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
+                    <p class="text-[9px] font-medium" style="color:rgb(var(--text-dim-rgb));">białko</p>
                 </div>
-                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:rgb(var(--card-rgb));">
                     <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${formatQty(nutrition.fat)}g</p>
-                    <p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
+                    <p class="text-[9px] font-medium" style="color:rgb(var(--text-dim-rgb));">tłuszcz</p>
                 </div>
-                <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                <div class="rounded-xl px-2 py-1.5 text-center" style="background:rgb(var(--card-rgb));">
                     <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${formatQty(nutrition.carbs)}g</p>
-                    <p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
+                    <p class="text-[9px] font-medium" style="color:rgb(var(--text-dim-rgb));">węgl.</p>
                 </div>
             </div>`;
     }
@@ -364,35 +371,35 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         const actionLabel = state.stockEditorOpen ? 'Anuluj' : 'Zmień';
 
         wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
-            <div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:rgb(var(--text-dim-rgb));">Zapas</p>
+            <div class="rounded-2xl border px-3 py-3" style="background:rgb(var(--card-rgb)); border-color:rgb(var(--card-strong-rgb));">
                 <div class="flex items-start justify-between gap-3">
                     <div class="min-w-0 flex-1">
-                        <p class="text-[16px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(stockValueLabel)}</p>
-                        ${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:#9b978f;">${esc(stockSubLabel)}</p>` : ''}
+                        <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 ? '#23221e' : '#2f2f2d'}; color:${state.stockEditorOpen ? '#f2efe8' : '#d7d2c8'};">
+                    <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:#444442;">
+                    <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:#2f2f2d; color:#d7d2c8;" 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:#2f2f2d;">
-                                <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:#ddd6ca; 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:#9b978f;">${esc(draftInputUnit)}</span>
+                            <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
+                                <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:#2f2f2d; color:#d7d2c8;" 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:#9b978f;">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''}
+                        ${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:#9b978f;">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:#ddd6ca; color:#2d2e2b;">Zapisz</button>
+                            <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="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(event.target.value);
+                ? normalizeQty(parseQtyInput(event.target.value) * step)
+                : 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(input?.value ?? state.stockDraftQty ?? qty);
+                ? normalizeQty(parseQtyInput(input?.value) * step)
+                : parseQtyInput(input?.value ?? state.stockDraftQty ?? qty);
             if (product) {
                 setPantryProductQty(def.id, product.id, nextQty);
             } else {
@@ -473,37 +480,37 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         const actionLabel = state.shopEditorOpen ? 'Anuluj' : (hasShoppingItem ? 'Zmień' : 'Dodaj');
 
         wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
-            <div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:rgb(var(--text-dim-rgb));">Lista zakupów</p>
+            <div class="rounded-2xl border px-3 py-3" style="background:rgb(var(--card-rgb)); border-color:rgb(var(--card-strong-rgb));">
                 <div class="flex items-start justify-between gap-3">
                     <div class="min-w-0 flex-1">
-                            <p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? '#ddd6ca' : '#9b978f'};">${esc(shopValueLabel)}</p>
-                            ${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:#9b978f;">${esc(shopSubLabel)}</p>` : ''}
+                            <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 ? '#23221e' : '#2f2f2d'}; color:${state.shopEditorOpen ? '#f2efe8' : '#d7d2c8'};">
+                    <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:#444442;">
+                    <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:#2f2f2d; color:#d7d2c8;" 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:#2f2f2d;">
-                                <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:#ddd6ca; 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:#9b978f;">${esc(shopInputUnit)}</span>
+                            <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
+                                <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:#2f2f2d; color:#d7d2c8;" 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>
-                        ${usesPackStep ? `<p class="text-[10px] mt-2 text-right" style="color:#9b978f;">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''}
+                        ${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">
                             ${hasShoppingItem
-                                ? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:#9b978f;">Usuń z listy</button>'
+                                ? '<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:#ddd6ca; color:#2d2e2b;">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(event.target.value);
+                ? normalizeQty(parseQtyInput(event.target.value) * step)
+                : 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(input?.value ?? state.shopDraftQty ?? defaultAmount);
+                ? normalizeQty(parseQtyInput(input?.value) * step)
+                : parseQtyInput(input?.value ?? state.shopDraftQty ?? defaultAmount);
             let toastText = null;
             if (shoppingItem) {
                 updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);
@@ -611,24 +618,24 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         const shoppingAmount = shoppingItem?.amount || 0;
 
         const pantryLabel = pantryQty > 0 ? `${formatQty(pantryQty)} ${unit}` : '—';
-        const pantryColor = pantryQty > 0 ? '#ddd6ca' : '#6d6c67';
+        const pantryColor = pantryQty > 0 ? 'rgb(var(--text-body-rgb))' : 'rgb(var(--text-subdued-rgb))';
         const shoppingLabel = shoppingAmount > 0 ? `${formatQty(shoppingAmount)} ${unit}` : '';
 
-        return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid transparent;" data-product-id="${esc(productId)}">
+        return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:rgb(var(--card-rgb)); border:1px solid transparent;" data-product-id="${esc(productId)}">
             ${mediaHtml(product.image || def.image, icon)}
             <div class="flex-1 min-w-0">
-                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
-                ${product.packLabel ? `<span class="text-[10px] block mt-0.5" style="color:#9b978f;">${esc(product.packLabel)}</span>` : ''}
+                <span class="text-[13px] font-semibold truncate block" style="color:rgb(var(--text-body-rgb));">${esc(product.name)}</span>
+                ${product.packLabel ? `<span class="text-[10px] block mt-0.5" style="color:rgb(var(--text-dim-rgb));">${esc(product.packLabel)}</span>` : ''}
             </div>
             <div class="flex flex-col items-end gap-0.5 shrink-0 tabular-nums">
                 <span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:${pantryColor};">
-                    <i class="fas fa-box text-[9px]" style="color:#8f8b84;"></i>${esc(pantryLabel)}
+                    <i class="fas fa-box text-[9px]" style="color:rgb(var(--text-faint-rgb));"></i>${esc(pantryLabel)}
                 </span>
-                ${shoppingLabel ? `<span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:#ddd6ca;">
-                    <i class="fas fa-cart-shopping text-[9px]" style="color:#8f8b84;"></i>${esc(shoppingLabel)}
+                ${shoppingLabel ? `<span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:rgb(var(--text-body-rgb));">
+                    <i class="fas fa-cart-shopping text-[9px]" style="color:rgb(var(--text-faint-rgb));"></i>${esc(shoppingLabel)}
                 </span>` : ''}
             </div>
-            <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
+            <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:rgb(var(--text-faint-rgb));"></i>
         </button>`;
     }
 
@@ -649,7 +656,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         const kitchenItems = (kitchen && kitchen.type === 'kitchen') ? kitchen.items : [];
 
         wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:rgb(var(--text-dim-rgb));">Produkty</p>
             <div class="space-y-1.5">
                 ${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, kitchenItems)).join('')}
             </div>`;

js/ui/mealCalendar.js

@@ -1,6 +1,9 @@
 import {
     addDays,
+    addMonths,
+    addWeeks,
     sameDay,
+    sameMonth,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
@@ -19,52 +22,75 @@ export const CALENDAR_MONTHS_SHORT = [
 
 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-[#6d6c67]/75';
+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 showIndicator = !!dayState.showIndicator;
+    const isSelected = typeof meta.isSelected === 'boolean'
+        ? meta.isSelected
+        : !!(selectedDate && sameDay(day, selectedDate));
+    const showIndicator = !!(dayState.showIndicator || dayState.showDot);
     const isDisabled = !!dayState.disabled;
     const isDimmed = !!dayState.dimmed && !isSelected;
-    const defaultBg = '#2f2f2d';
-    const defaultBorder = '#444442';
-    const defaultText = '#d7d2c8';
+    const defaultBg = 'rgb(var(--card-soft-rgb))';
+    const defaultBorder = 'rgb(var(--card-strong-rgb))';
+    const defaultText = 'rgb(var(--text-body-soft-rgb))';
 
     let bg;
     let borderColor;
     let text;
-    let borderClass = 'border';
+    let borderClass = theme.borderClass || 'border';
+    let shadow = theme.shadow || 'none';
 
     if (isSelected) {
-        bg = theme.selectedBg || '#23221e';
-        borderColor = theme.selectedBorder || '#787876';
-        text = theme.selectedText || '#f2efe8';
+        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 ?? theme.bg ?? defaultBg;
-        text = theme.dimText || '#7d7a74';
-        borderClass = 'border-0';
+        bg = theme.dimmedBg ?? 'transparent';
+        text = theme.dimText || 'rgb(var(--text-faint-rgb))';
+        borderClass = theme.dimmedBorderClass || 'border-0';
     } else {
         bg = theme.bg || defaultBg;
         borderColor = theme.border || defaultBorder;
         text = theme.text || defaultText;
     }
 
-    const dot = isSelected ? (theme.selectedDot || '#f2efe8') : (theme.dot || '#a59f92');
+    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 = isDimmed ? 'border:none;' : `border-color:${borderColor};`;
-    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 borderStyle = borderColor ? `border-color:${borderColor};` : 'border:none;';
+    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));
-    while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
+    const maxCells = fixedWeekCount ? fixedWeekCount * 7 : 42;
+    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:#2f2f2d;border-color:#444442;',
-    navButtonClass = 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] 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-[#d7d2c8] 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-[#7d7a74] cursor-default',
+    controlsStyle = 'background:transparent;border-color:rgb(var(--card-strong-rgb));',
+    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',
+    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',
 }) {
     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}">
-                <button type="button" id="${prevId}" class="${navButtonClass}" aria-label="Poprzedni okres">
-                    <i class="fas fa-chevron-left text-[10px]" aria-hidden="true"></i>
-                </button>
+            <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="${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-[#d7d2c8] active:bg-transparent whitespace-nowrap';
-    if (selectedDate != null) {
+        || '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 (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) {
@@ -37,41 +38,52 @@ const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 export function getMealPlanEditorHTML() {
     return `
     <div id="mpe-overlay" class="absolute inset-0 z-[55] bg-black/45 hidden flex items-end" style="pointer-events:none">
-        <div id="mpe-sheet" class="w-full bg-[#2d2e2b] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
-            <div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
+        <div id="mpe-sheet" class="w-full bg-[rgb(var(--app-bg-rgb))] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
+            <div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
                 <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-3"></div>
                 <div class="flex items-start justify-between gap-3">
                     <div class="min-w-0 flex-1">
                         <h2 id="mpe-title" class="text-[15px] font-bold text-gray-900 leading-tight"></h2>
                         <p id="mpe-subtitle" class="text-[11px] text-gray-500 mt-0.5 truncate"></p>
                     </div>
-                    <button id="mpe-confirm-btn" type="button" aria-label="Dodaj do planu" class="shrink-0 mt-0.5 border h-8 px-3 rounded-full font-semibold text-[12px] transition-colors inline-flex items-center justify-center gap-1.5" style="background:#dcd6cb !important; color:#2d2e2b !important; background-image:none !important; border-color:#dcd6cb !important; box-shadow:0 2px 10px rgba(0,0,0,0.18);">
+                    <button id="mpe-confirm-btn" type="button" aria-label="Dodaj do planu" class="shrink-0 mt-0.5 border h-8 px-3 rounded-full font-semibold text-[12px] transition-colors inline-flex items-center justify-center gap-1.5" style="background:rgb(var(--text-body-rgb)) !important; color:rgb(var(--app-bg-rgb)) !important; background-image:none !important; border-color:rgb(var(--text-body-rgb)) !important; box-shadow:0 2px 10px rgba(var(--overlay-rgb),0.18);">
                         <i id="mpe-confirm-icon" class="fas fa-plus text-[10px]" aria-hidden="true"></i>
                         <span id="mpe-confirm-label">Dodaj</span>
                     </button>
                 </div>
             </div>
-            <div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !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()}
-                    <div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
-                    <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>
-                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
+                    ${createCollapsibleCalendarHTML({
+        idPrefix: 'mpe-cal',
+        swipeZoneId: 'mpe-cal-swipe-zone',
+        weekWrapId: 'mpe-cal-week-wrap',
+        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-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>
-            <div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
+                <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 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(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
                 </div>
-            <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));">
                 <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,53 +194,54 @@ 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) {
-            icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
-        }
+        syncCollapsibleCalendarMode({
+            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({
-            gridEl: grid,
-            mode,
-            anchorDate: S.calDate,
+        renderCollapsibleCalendar({
+            weekGridEl: weekGrid,
+            monthGridEl: monthGrid,
+            weekAnchorDate: S.calDate,
+            monthAnchorDate: S.calDate,
             selectedDate: S.date,
-            resolveDayState: (day, meta) => {
-                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),
-                };
-            },
+            resolveDayState: (day, meta) => resolveCalendarDayState(day, meta, plans, today),
         });
         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;
         el.innerHTML = MEAL_SLOTS.filter((s) => r.allowedSlots.includes(s.id)).map((s) => {
             const sel = s.id === S.slotId;
-            const bg = sel ? '#23221e' : '#2f2f2d';
-            const border = sel ? '#787876' : '#444442';
-            const text = sel ? '#f2efe8' : '#d7d2c8';
+            const bg = sel ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))';
+            const border = sel ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--card-strong-rgb))';
+            const text = sel ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
             return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors" data-slot-id="${s.id}" style="background:${bg} !important; background-image:none !important; box-shadow:none !important; border-color:${border} !important; color:${text} !important;">${esc(s.label)}</button>`;
         }).join('');
     }
@@ -245,12 +270,12 @@ export function setupMealPlanEditor() {
         el.innerHTML = `
             <div class="flex items-center justify-between gap-3">
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
-                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
-                    <button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
+                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:rgb(var(--card-soft-rgb));border-color:rgb(var(--card-strong-rgb));box-shadow:var(--shadow-card);">
+                    <button type="button" id="mpe-serv-minus" class="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" aria-label="Zmniejsz liczbę porcji">
                         <i class="fas fa-minus text-[10px]"></i>
                     </button>
-                    <span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
-                    <button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
+                    <span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[rgb(var(--text-body-soft-rgb))] tabular-nums">${S.servings}</span>
+                    <button type="button" id="mpe-serv-plus" class="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" aria-label="Zwiększ liczbę porcji">
                         <i class="fas fa-plus text-[10px]"></i>
                     </button>
                 </div>
@@ -269,7 +294,7 @@ export function setupMealPlanEditor() {
         const removeBtn = (cls, attrs) =>
             `<button type="button" class="${cls} shrink-0 w-6 h-6 rounded-full border border-gray-200 text-gray-300 hover:text-red-500 hover:border-red-200 hover:bg-red-50 flex items-center justify-center transition-colors" ${attrs}><i class="fas fa-minus text-[8px]"></i></button>`;
         const ingredientRowClass = 'mpe-ing-row rounded-xl px-3 py-3';
-        const ingredientRowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
+        const ingredientRowStyle = 'background:rgb(var(--card-rgb)) !important; background-image:none !important; box-shadow:var(--shadow-card) !important; border:none !important;';
 
         for (const ing of r.ingredients) {
             const id = ing.ingredientId;
@@ -317,12 +342,12 @@ export function setupMealPlanEditor() {
                     const isSel = eid === altId;
                     const checkbox = `
                         <span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
-                              style="border:1.5px solid #56534f; background:transparent;">
-                            ${isSel ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
+                              style="border:1.5px solid rgba(var(--border-input-rgb), 0.58); background:transparent;">
+                            ${isSel ? '<i class="fas fa-check" style="color:rgb(var(--text-dim-rgb)); font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
                         </span>`;
                     const n = nutFor(altId, disp, ing.unit);
                     const nLine = n ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${n.kcal} kcal · ${n.protein}g B · ${n.fat}g T · ${n.carbs}g W</div>` : '';
-                    html += `<button type="button" class="mpe-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(name)}</div>${nLine}</div>${checkbox}</div></button>`;
+                    html += `<button type="button" class="mpe-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:rgb(var(--card-soft-rgb)) !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(name)}</div>${nLine}</div>${checkbox}</div></button>`;
                 }
                 html += '</div>';
             }
@@ -341,7 +366,7 @@ export function setupMealPlanEditor() {
             const addedBadge = addedProduct
                 ? `<div class="flex items-center gap-1 mt-0.5"><span class="text-[10px] text-emerald-400 truncate">${esc(addedProduct.name)}</span></div>`
                 : '';
-            html += `<div class="flex-1 min-w-0 mpe-open-product-card cursor-pointer" data-eid="${esc(a.ingredientId)}" data-pid="${esc(addedPid)}"><div class="flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>${addedBadge}</div>`;
+            html += `<div class="flex-1 min-w-0 mpe-open-product-card cursor-pointer" data-eid="${esc(a.ingredientId)}" data-pid="${esc(addedPid)}"><div class="flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[rgb(var(--text-faint-rgb))]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>${addedBadge}</div>`;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
             html += `<span class="text-[11px] text-gray-500">${esc(a.unit)}</span></button>`;
@@ -365,7 +390,7 @@ export function setupMealPlanEditor() {
         const el = document.getElementById('mpe-add-area');
         if (!el) return;
         if (!S.addOpen) {
-            el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed text-[12px] font-semibold transition-colors" style="border-color:#444442; color:#9b978f; background:transparent !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
+            el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed text-[12px] font-semibold transition-colors" style="border-color:rgb(var(--card-strong-rgb)); color:rgb(var(--text-dim-rgb)); background:transparent !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
             return;
         }
         const recipe = RECIPES[S.recipeId];
@@ -376,15 +401,15 @@ export function setupMealPlanEditor() {
         const q = S.addQuery.toLowerCase().trim();
         const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
         el.innerHTML = `
-            <div class="rounded-xl p-3" style="background:#393937 !important; border:1px solid #444442;">
+            <div class="rounded-xl p-3" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--card-strong-rgb));">
                 <div class="flex items-center gap-2 mb-2">
-                    <input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
-                    <button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
+                    <input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[rgb(var(--text-faint-rgb))]" style="background:rgb(var(--card-soft-rgb)) !important; border:1px solid rgb(var(--card-strong-rgb)); color:rgb(var(--text-body-rgb));" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
+                    <button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:rgb(var(--text-dim-rgb));">Anuluj</button>
                 </div>
                 <div class="max-h-40 overflow-y-auto space-y-1 no-scrollbar" id="mpe-add-results">
                     ${avail.length === 0
-                        ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
-                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('')}
+                        ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:rgb(var(--card-soft-rgb)) !important; color:rgb(var(--text-dim-rgb));">Brak wyników</p>'
+                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:rgb(var(--card-soft-rgb)) !important; color:rgb(var(--text-body-rgb));" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('')}
                 </div>
             </div>`;
     }
@@ -400,8 +425,8 @@ export function setupMealPlanEditor() {
         const q = S.addQuery.toLowerCase().trim();
         const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
         results.innerHTML = avail.length === 0
-            ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
-            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('');
+            ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:rgb(var(--card-soft-rgb)) !important; color:rgb(var(--text-dim-rgb));">Brak wyników</p>'
+            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:rgb(var(--card-soft-rgb)) !important; color:rgb(var(--text-body-rgb));" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('');
     }
 
     function renderIngredients() {
@@ -417,23 +442,23 @@ export function setupMealPlanEditor() {
         if (!el) return;
         const n = totalNutrition();
         el.innerHTML = `
-            <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+            <div class="h-full pb-2 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>
                 <div class="flex-1 flex items-center">
                     <div class="grid grid-cols-4 gap-1.5 w-full">
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${n.kcal}</p>
                             <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${n.protein}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">białko</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${n.fat}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${n.carbs}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                         </div>
@@ -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', () => {
-        if (!S.showCal) return;
-        S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
-        renderCal();
-    });
-    document.getElementById('mpe-cal-next')?.addEventListener('click', () => {
-        if (!S.showCal) return;
-        S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
-        renderCal();
+    bindCalendarDayClicks(document.getElementById('mpe-cal-week-grid'), selectCalendarDate);
+    bindCalendarDayClicks(document.getElementById('mpe-cal-month-grid'), selectCalendarDate);
+
+    bindCollapsibleCalendarSwipeGesture({
+        zoneEl: document.getElementById('mpe-cal-swipe-zone'),
+        weekWrapEl: document.getElementById('mpe-cal-week-wrap'),
+        monthWrapEl: document.getElementById('mpe-cal-month-wrap'),
+        getMode: () => (S.calExpanded ? 'month' : 'week'),
+        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());
@@ -753,7 +796,7 @@ export function setupMealPlanEditor() {
             const ingBase = S.overrides[origId] ?? recipeIng?.amount ?? 0;
             const ingDisp = ingBase * S.servings;
 
-            const checkmark = (sel) => `<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center" style="border:1.5px solid #56534f; background:transparent;">${sel ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}</span>`;
+            const checkmark = (sel) => `<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center" style="border:1.5px solid rgba(var(--border-input-rgb), 0.58); background:transparent;">${sel ? '<i class="fas fa-check" style="color:rgb(var(--text-dim-rgb)); font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}</span>`;
 
             let pickerHtml = '<div class="mpe-product-picker mt-2 ml-1 space-y-1">';
             for (const p of products) {
@@ -766,7 +809,7 @@ export function setupMealPlanEditor() {
                 const f = g / 100;
                 const n = pNut ? { kcal: Math.round(pNut.kcal * f), protein: Math.round(pNut.protein * f * 10) / 10, fat: Math.round(pNut.fat * f * 10) / 10, carbs: Math.round(pNut.carbs * f * 10) / 10 } : null;
                 const nLine = n ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${n.kcal} kcal · ${n.protein}g B · ${n.fat}g T · ${n.carbs}g W</div>` : '';
-                pickerHtml += `<button type="button" class="mpe-prod-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-eid="${esc(eid)}" data-prod-id="${esc(p.id)}">
+                pickerHtml += `<button type="button" class="mpe-prod-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:rgb(var(--card-soft-rgb)) !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-eid="${esc(eid)}" data-prod-id="${esc(p.id)}">
                     <div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(p.name)}</div>${nLine}</div>${checkmark(isSel)}</div>
                 </button>`;
             }
@@ -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/recipeGrid.js

@@ -33,22 +33,22 @@ function renderRecipeCard(recipe, { showSlotLabels = true, cardClassName = '' }
     const className = ['recipe-browser-card', cardClassName].filter(Boolean).join(' ');
 
     return `
-        <button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer text-left transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.28) !important;">
-            <div class="recipe-browser-card-media h-32 bg-[#d4d4d4] relative overflow-hidden">
+        <button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[rgb(var(--card-rgb))] cursor-pointer text-left transition-shadow" style="background:rgb(var(--card-rgb)) !important; border:none !important; box-shadow:var(--shadow-card) !important;">
+            <div class="recipe-browser-card-media h-32 bg-[rgb(var(--skeleton-rgb))] relative overflow-hidden">
                 ${recipe.image
                     ? `<img src="${escapeHtml(recipe.image)}" alt="${escapeHtml(recipe.title)}" class="w-full h-full object-cover">`
                     : `<span class="absolute inset-0 flex items-center justify-center text-white font-medium text-xs">${escapeHtml(recipe.thumbLabel)}</span>`}
             </div>
             <div class="recipe-browser-card-body p-3 flex flex-col flex-1">
-                <h3 class="recipe-browser-card-title text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
+                <h3 class="recipe-browser-card-title text-sm font-medium underline decoration-1 underline-offset-2 text-[rgb(var(--text-primary-rgb))] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
                 <div class="recipe-browser-card-footer mt-auto">
-                    <div class="recipe-browser-card-meta flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2">
-                        <div class="flex items-center gap-1"><i class="fas fa-clock text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div>
-                        <div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
+                    <div class="recipe-browser-card-meta flex items-center justify-between text-[11px] text-[rgb(var(--text-muted-rgb))] font-medium mb-2">
+                        <div class="flex items-center gap-1"><i class="fas fa-clock text-[rgb(var(--text-faint-rgb))]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div>
+                        <div class="flex items-center gap-1"><i class="fas fa-fire text-[rgb(var(--text-faint-rgb))]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
                     </div>
                     ${labels.length > 0
                         ? `<div class="recipe-browser-card-labels flex flex-wrap gap-1">
-                            ${labels.map((label) => `<span class="recipe-browser-card-label px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
+                            ${labels.map((label) => `<span class="recipe-browser-card-label px-2 py-0.5 bg-[rgb(var(--card-soft-rgb))] text-[rgb(var(--text-body-soft-rgb))] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
                         </div>`
                         : ''}
                 </div>
@@ -71,14 +71,14 @@ export function getRecipeGridSectionHTML({
     scrollId,
     gridId,
     emptyStateId,
-    scrollClassName = 'relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]',
-    gridClassName = 'grid grid-cols-2 gap-3 bg-[#2d2e2b]',
+    scrollClassName = 'relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[rgb(var(--app-bg-rgb))]',
+    gridClassName = 'grid grid-cols-2 gap-3 bg-[rgb(var(--app-bg-rgb))]',
     emptyTitle = 'Brak wyników',
     emptyMessage = 'Zmień kryteria wyszukiwania lub filtry',
 } = {}) {
     return `
-        <div id="${escapeHtml(scrollId)}" class="${scrollClassName}" style="background:#2d2e2b !important;">
-            <div id="${escapeHtml(gridId)}" class="${gridClassName}" style="background:#2d2e2b !important;"></div>
+        <div id="${escapeHtml(scrollId)}" class="${scrollClassName}" style="background:rgb(var(--app-bg-rgb)) !important;">
+            <div id="${escapeHtml(gridId)}" class="${gridClassName}" style="background:rgb(var(--app-bg-rgb)) !important;"></div>
             ${getEmptyStateHTML({
         emptyStateId,
         title: emptyTitle,

js/ui/recipeSearchField.js

@@ -1,5 +1,5 @@
 export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
-    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 2px 6px rgba(0,0,0,0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';
+    'var(--shadow-shell), inset 0 2px 6px rgba(var(--overlay-rgb),0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';
 
 function escapeHtml(s) {
     return String(s)
@@ -27,11 +27,11 @@ export function getRecipeSearchFieldHTML({
     const ariaLabel = inputAriaLabel || placeholder;
 
     return `
-        <div id="${escapeHtml(shellId)}" class="relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${RECIPE_SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
+        <div id="${escapeHtml(shellId)}" class="relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; border-radius:999px !important; box-shadow:${RECIPE_SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
             <input type="text" id="${escapeHtml(inputId)}" value="${escapeHtml(inputValue)}" placeholder="${escapeHtml(placeholder)}" aria-label="${escapeHtml(ariaLabel)}" class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] ${inputPadding}" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
             ${hasFilterButton
                 ? `
-                <button id="${escapeHtml(filterButtonId)}"${actionAttr} class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="${escapeHtml(filterButtonLabel)}">
+                <button id="${escapeHtml(filterButtonId)}"${actionAttr} class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[rgb(var(--text-body-soft-rgb))] hover:text-[rgb(var(--text-emphasis-rgb))] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="${escapeHtml(filterButtonLabel)}">
                     <i class="fas fa-sliders-h" aria-hidden="true"></i>
                 </button>`
                 : ''}

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,26 +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 = '#23221e';
-const FILTER_SURFACE_SOFT = '#2d2e2b';
-const FILTER_BORDER = '#787876';
-const FILTER_CHIP_ACTIVE_BG = '#393937';
-const FILTER_TEXT_SECONDARY = '#d7d2c8';
-const FILTER_TEXT_MUTED = '#b5afa5';
-const FILTER_TEXT_ACTIVE = '#f2efe8';
-const FILTER_TRACK = '#393937';
-const FILTER_TRACK_FILL = '#56534f';
-const FILTER_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
+const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
+const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
+const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
+const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
 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',
-        buttonId: 'recipe-filter-btn',
+        anchorShellId: 'recipe-filter-float-btn',
+        buttonId: 'recipe-filter-float-btn',
         getState: () => getFilterState(),
         applyState: (nextState) => applyFilters(nextState),
         showSlots: true,
@@ -62,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;
@@ -72,15 +83,27 @@ export function getFilterHTML() {
             width: 1rem;
             height: 1rem;
             border-radius: 9999px;
-            border: 1px solid rgba(242,239,232,0.16);
-            background: ${FILTER_TRACK_FILL};
-            box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
+            border: 1px solid rgba(255,255,255,0.34);
+            background: rgba(var(--surface-rgb),0.42);
+            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-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:${FILTER_SHADOW}; width:min(calc(100% - 1.5rem), 22rem);">
+    <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="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>
@@ -175,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(0,0,0,0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 function clampTimeValue(value) {
     return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
 }
@@ -198,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');
@@ -245,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 top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
-    const left = Math.max(
-        margin,
-        Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
-    );
-    const maxHeight = Math.max(220, viewRect.height - top - margin);
-
+    const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
+    const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
+    const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
+    const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
+    const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
+    const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
+    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`;
 }
@@ -277,6 +310,7 @@ function showFilterPanel() {
     view.style.pointerEvents = 'auto';
     view.setAttribute('aria-hidden', 'false');
     positionFilterPanel();
+    panel.style.transform = getClosedPanelTransform(panel);
     setRecipeAreaBlur(true);
 
     syncPanelCount();
@@ -297,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();
 
@@ -316,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) => {
@@ -338,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) => {
@@ -374,9 +408,16 @@ function syncPanelCount() {
 
     if (button) {
         const highlight = isFilterPanelOpen() || count > 0;
-        button.style.setProperty('background', highlight ? '#23221e' : '#393937', 'important');
-        button.style.setProperty('border-color', highlight ? '#787876' : '#41423f', 'important');
-        button.style.setProperty('color', highlight ? '#f2efe8' : '#ddd6ca', '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"]');
@@ -398,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,13 +1,10 @@
 import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
-    addMonths,
-    addWeeks,
-    sameMonth,
+    sameDay,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
-    weekContains,
 } from '../services/dateUtils.js';
 import {
     computeEntryNutrition,
@@ -25,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,
@@ -65,56 +64,44 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
         document.getElementById('cal-go-today'),
         isCalendarOnToday(mode, weekStart, monthAnchor, selected),
         selected,
+        {
+            labelText: formatCalendarPeriodLabel(mode, weekStart, monthAnchor),
+        },
     );
 }
 
 export function getMealPlannerHTML() {
     return `
-    <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10">
-        <div id="planner-cal-bar" class="shrink-0 bg-[#2d2e2b] border-b border-[#444442] 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">
-                <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:#f2efe8;font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
+    <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-end gap-3 min-w-0">
                 ${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-[#2d2e2b]" style="touch-action: none">
-                <div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[#2d2e2b]" 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-[#2d2e2b]" 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>
-                <div id="calendar-drag-handle" class="flex items-center justify-center pb-2 pt-0.5">
-                    <span id="calendar-handle-icon" class="${CALENDAR_HANDLE_CLASS}" aria-hidden="true"></span>
-                </div>
-            </div>
+            ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
         </div>
 
-        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[#2d2e2b]">
+        <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:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+                <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>
                     <div class="flex-1 flex items-center">
                         <div class="grid grid-cols-4 gap-1.5 w-full">
-                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                                 <p id="planner-nutrition-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                             </div>
-                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                                 <p id="planner-nutrition-p" class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">białko</p>
                             </div>
-                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                                 <p id="planner-nutrition-f" class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                             </div>
-                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                                 <p id="planner-nutrition-c" class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                             </div>
@@ -122,19 +109,19 @@ export function getMealPlannerHTML() {
                     </div>
                 </div>
             </div>
-            <button type="button" id="planner-open-ingredients" class="hidden w-full mb-3 flex items-center justify-center gap-2 py-2.5 rounded-xl border border-dashed border-[#444442] bg-[#2d2e2b] text-[13px] font-semibold text-[#d7d2c8] hover:border-[#6d6c67] hover:bg-[#3a3a37] transition-colors">
-                <i class="fas fa-shopping-basket text-[#9b978f] text-xs" aria-hidden="true"></i>
+            <button type="button" id="planner-open-ingredients" class="hidden w-full mb-3 flex items-center justify-center gap-2 py-2.5 rounded-xl border border-dashed border-[rgb(var(--card-strong-rgb))] bg-[rgb(var(--app-bg-rgb))] text-[13px] font-semibold text-[rgb(var(--text-body-soft-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] transition-colors">
+                <i class="fas fa-shopping-basket text-[rgb(var(--text-dim-rgb))] text-xs" aria-hidden="true"></i>
                 Składniki na ten dzień
             </button>
-            <div id="planner-meal-slots" class="space-y-3 pb-2 bg-[#2d2e2b]"></div>
+            <div id="planner-meal-slots" class="space-y-3 pb-2 bg-[rgb(var(--app-bg-rgb))]"></div>
         </div>
     </div>
 
     <div id="planner-picker-backdrop" class="absolute inset-0 z-[55] bg-black/45 hidden opacity-0 transition-opacity duration-200" aria-hidden="true"></div>
-    <div id="planner-picker-sheet" data-off-transform="${PLANNER_PICKER_OFF_TRANSFORM}" class="absolute inset-x-0 bottom-0 z-[60] flex flex-col will-change-transform rounded-t-[1.85rem] overflow-hidden" style="top:calc(env(safe-area-inset-top) + 0.35rem); visibility: hidden; transform: ${PLANNER_PICKER_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:#2d2e2b !important; background-image:none !important;" role="dialog" aria-label="Wybierz przepis" aria-modal="true">
+    <div id="planner-picker-sheet" data-off-transform="${PLANNER_PICKER_OFF_TRANSFORM}" class="absolute inset-x-0 bottom-0 z-[60] flex flex-col will-change-transform rounded-t-[1.85rem] overflow-hidden" style="top:calc(env(safe-area-inset-top) + 0.35rem); visibility: hidden; transform: ${PLANNER_PICKER_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;" role="dialog" aria-label="Wybierz przepis" aria-modal="true">
         <div class="pointer-events-none absolute inset-x-0 top-0 z-[2] px-4 pt-3">
             <div class="pointer-events-auto pb-4 touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
-                <div class="w-10 h-1 bg-[#6d6c67]/75 rounded-full mx-auto" aria-hidden="true"></div>
+                <div class="w-10 h-1 bg-[rgb(var(--text-subdued-rgb))]/75 rounded-full mx-auto" aria-hidden="true"></div>
             </div>
             <div class="pointer-events-auto">
                 ${getRecipeSearchFieldHTML({
@@ -148,8 +135,8 @@ export function getMealPlannerHTML() {
     })}
             </div>
         </div>
-        <div id="planner-picker-scroll" class="relative min-h-0 flex-1 overflow-y-auto px-4 pt-28 pb-8 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
-            <div id="planner-picker-grid" class="grid grid-cols-3 gap-2 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
+        <div id="planner-picker-scroll" class="relative min-h-0 flex-1 overflow-y-auto px-4 pt-28 pb-8 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important;">
+            <div id="planner-picker-grid" class="grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important;"></div>
             <div id="planner-picker-empty-state" class="hidden flex flex-col items-center justify-center py-16 text-center">
                 <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                     <i class="fas fa-search text-2xl text-gray-300" aria-hidden="true"></i>
@@ -161,20 +148,20 @@ export function getMealPlannerHTML() {
     </div>
 
     <div id="planner-ing-backdrop" class="absolute inset-0 z-[55] bg-black/45 hidden opacity-0 transition-opacity duration-200" aria-hidden="true"></div>
-    <div id="planner-ing-sheet" class="absolute left-0 right-0 bottom-0 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] flex flex-col will-change-transform" style="visibility: hidden; height: auto; max-height: calc(100vh - env(safe-area-inset-top) - 1rem); transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:#2d2e2b !important; background-image:none !important;" role="dialog" aria-labelledby="planner-ing-title" aria-modal="true">
-        <div class="shrink-0 px-4 pt-3 pb-2 border-b border-[#444442] touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
-            <div class="w-10 h-1 bg-[#6d6c67]/75 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
-            <h2 id="planner-ing-title" class="text-[15px] font-bold text-[#ddd6ca] leading-tight pr-2">Składniki i spiżarnia</h2>
-            <p id="planner-ing-sub" class="text-[11px] text-[#9b978f] mt-1">Porównanie potrzeb z zapasami.</p>
+    <div id="planner-ing-sheet" class="absolute left-0 right-0 bottom-0 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(var(--overlay-rgb),0.12)] flex flex-col will-change-transform" style="visibility: hidden; height: auto; max-height: calc(100vh - env(safe-area-inset-top) - 1rem); transform: ${PLANNER_SHEET_OFF_TRANSFORM}; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;" role="dialog" aria-labelledby="planner-ing-title" aria-modal="true">
+        <div class="shrink-0 px-4 pt-3 pb-2 border-b border-[rgb(var(--card-strong-rgb))] touch-none cursor-grab active:cursor-grabbing select-none" data-planner-sheet-drag-zone aria-label="Przeciągnij w dół, by zamknąć">
+            <div class="w-10 h-1 bg-[rgb(var(--text-subdued-rgb))]/75 rounded-full mx-auto mb-2.5" aria-hidden="true"></div>
+            <h2 id="planner-ing-title" class="text-[15px] font-bold text-[rgb(var(--text-body-rgb))] leading-tight pr-2">Składniki i spiżarnia</h2>
+            <p id="planner-ing-sub" class="text-[11px] text-[rgb(var(--text-dim-rgb))] mt-1">Porównanie potrzeb z zapasami.</p>
         </div>
         <div id="planner-ing-body" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 py-2 pb-2"></div>
-        <div id="planner-ing-footer" class="shrink-0 p-4 pt-2 pb-5 border-t border-[#444442] bg-[#2d2e2b] space-y-2">
+        <div id="planner-ing-footer" class="shrink-0 p-4 pt-2 pb-5 border-t border-[rgb(var(--card-strong-rgb))] bg-[rgb(var(--app-bg-rgb))] space-y-2">
             <button type="button" id="planner-ing-add-all" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold shadow-sm transition-colors text-[13px] flex items-center justify-center gap-2">
                 <i class="fas fa-cart-plus text-xs" aria-hidden="true"></i>
                 Dodaj braki na dziś do listy
             </button>
-            <button type="button" id="planner-ing-add-btn" class="hidden w-full border border-[#444442] bg-[#2d2e2b] text-[#d7d2c8] hover:bg-[#3a3a37] py-2.5 rounded-xl font-semibold text-[13px] flex items-center justify-center gap-2 transition-colors">
-                <i class="fas fa-calendar-week text-[#9b978f] text-[11px]" aria-hidden="true"></i>
+            <button type="button" id="planner-ing-add-btn" class="hidden w-full border border-[rgb(var(--card-strong-rgb))] bg-[rgb(var(--app-bg-rgb))] text-[rgb(var(--text-body-soft-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] py-2.5 rounded-xl font-semibold text-[13px] flex items-center justify-center gap-2 transition-colors">
+                <i class="fas fa-calendar-week text-[rgb(var(--text-dim-rgb))] text-[11px]" aria-hidden="true"></i>
                 Dodaj braki na cały tydzień
             </button>
         </div>
@@ -191,61 +178,8 @@ function syncModeToggle(mode) {
         mode,
         weekWrapEl: document.getElementById('calendar-week-wrap'),
         monthWrapEl: document.getElementById('calendar-month-wrap'),
-        handleEl: document.getElementById('calendar-handle-icon'),
-    });
-}
-
-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;
     });
+    syncCollapsibleCalendarToggleIcon(document.getElementById('calendar-handle-icon'), mode);
 }
 
 function showPlannerToast(message) {
@@ -469,27 +403,27 @@ function renderDayContent(state, onMealRemoved = null) {
                 (entry.addedIngredients?.length > 0) ||
                 (entry.substitutions && Object.keys(entry.substitutions).length > 0);
             const customDot = hasCustom ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block shrink-0 ml-1"></span>' : '';
-            const servLabel = servings > 1 ? `<span class="mx-1.5 text-[#6d6c67]">·</span>×${servings}` : '';
+            const servLabel = servings > 1 ? `<span class="mx-1.5 text-[rgb(var(--text-subdued-rgb))]">·</span>×${servings}` : '';
             const rowStyle = `--planner-swipe-progress:${isPendingDelete ? '1' : '0'};`;
             const rowAttrs = isPendingDelete ? 'data-pending-delete="true"' : '';
             const backgroundStyle = isPendingDelete
-                ? 'background:linear-gradient(90deg, rgba(65,64,60,0.08), rgba(65,64,60,0.2));'
-                : 'background:rgba(203,74,72, calc(0.18 + var(--planner-swipe-progress) * 0.5));';
+                ? 'background:linear-gradient(90deg, rgba(var(--border-card-rgb),0.08), rgba(var(--border-card-rgb),0.2));'
+                : 'background:rgba(var(--danger-rgb), calc(0.18 + var(--planner-swipe-progress) * 0.5));';
             const backgroundLabel = isPendingDelete
-                ? `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(210,204,194,0.42);">
+                ? `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(var(--text-body-soft-rgb),0.42);">
                         <i class="fas fa-hourglass-half text-[10px]" aria-hidden="true"></i>
                         Usuwanie
                     </span>`
-                : `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(250,234,234, calc(0.55 + var(--planner-swipe-progress) * 0.45));">
+                : `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(var(--text-emphasis-rgb), calc(0.55 + var(--planner-swipe-progress) * 0.45));">
                         <i class="fas fa-trash text-[10px]" aria-hidden="true"></i>
                         Usuń
                     </span>`;
             const titleClass = isPendingDelete
-                ? 'text-[13px] font-normal text-[#bcb5ab] truncate'
-                : 'text-[13px] font-normal text-[#ddd6ca] truncate';
+                ? 'text-[13px] font-normal text-[rgb(var(--text-muted-rgb))] truncate'
+                : 'text-[13px] font-normal text-[rgb(var(--text-body-rgb))] truncate';
             const metaClass = isPendingDelete
-                ? 'text-[11px] text-[#878079] mt-0.5 tabular-nums'
-                : 'text-[11px] text-[#9b978f] mt-0.5 tabular-nums';
+                ? 'text-[11px] text-[rgb(var(--text-faint-rgb))] mt-0.5 tabular-nums'
+                : 'text-[11px] text-[rgb(var(--text-dim-rgb))] mt-0.5 tabular-nums';
             const actionWrapClass = isPendingDelete
                 ? 'relative z-[2] flex items-center shrink-0 self-center'
                 : 'flex items-center gap-1 shrink-0 self-center';
@@ -501,22 +435,22 @@ function renderDayContent(state, onMealRemoved = null) {
                 : 0;
             const entryAction = isPendingDelete
                 ? `<button type="button" class="planner-cancel-pending-remove rounded-full p-[1.5px] transition-transform hover:scale-[1.02] active:scale-[0.98]" style="background:${getPendingMealRemovalButtonStyle(remainingProgress)};" data-pending-delete-progress data-day-key="${selectedDayKey}" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Anuluj usunięcie posiłku">
-                        <span class="flex h-7 w-7 items-center justify-center rounded-full bg-[#343530] text-[#e2ddd4] shadow-[0_1px_2px_rgba(0,0,0,0.28)]">
+                        <span class="flex h-7 w-7 items-center justify-center rounded-full bg-[rgb(var(--card-raised-rgb))] text-[rgb(var(--text-body-rgb))] shadow-[0_1px_2px_rgba(var(--overlay-rgb),0.28)]">
                             <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-[#444442] text-[#9b978f] hover:text-[#ddd6ca] hover:border-[#6d6c67] hover:bg-[#3a3a37] 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>
+                : `<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-[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}>
                 <div class="pointer-events-none absolute inset-0 flex items-center justify-end px-4" style="${backgroundStyle}">
                     ${backgroundLabel}
                 </div>
-                <div class="relative z-[1] rounded-lg p-2 planner-open-recipe cursor-pointer" style="background:${isPendingDelete ? 'rgba(45,45,43,0.76)' : '#2d2e2b'}; box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); transform:${isPendingDelete ? 'translateX(0) scale(0.988)' : 'translateX(0)'}; transition:transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, background-color 180ms ease; touch-action:pan-y; opacity:1;" data-planner-swipe-card data-slot-id="${slot.id}" data-entry-id="${eid}" data-recipe-id="${escapeHtml(recipe.id)}">
+                <div class="relative z-[1] rounded-lg p-2 planner-open-recipe cursor-pointer" style="background:${isPendingDelete ? 'rgba(var(--app-bg-rgb),0.76)' : 'rgb(var(--app-bg-rgb))'}; box-shadow:inset 0 1px 3px rgba(var(--overlay-rgb),0.3); transform:${isPendingDelete ? 'translateX(0) scale(0.988)' : 'translateX(0)'}; transition:transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, background-color 180ms ease; touch-action:pan-y; opacity:1;" data-planner-swipe-card data-slot-id="${slot.id}" data-entry-id="${eid}" data-recipe-id="${escapeHtml(recipe.id)}">
                     <div class="relative flex items-start justify-between gap-2">
                         <div class="flex items-center gap-2 min-w-0" style="${contentToneStyle}">
-                            <div class="w-8 h-8 rounded-lg bg-[#3a3a37] overflow-hidden shrink-0">
+                            <div class="w-8 h-8 rounded-lg bg-[rgb(var(--card-raised-rgb))] overflow-hidden shrink-0">
                                 ${recipe.image
                                     ? `<img src="${escapeHtml(recipe.image)}" alt="" class="w-full h-full object-cover">`
                                     : `<span class="w-full h-full flex items-center justify-center text-white text-[8px] font-medium">${escapeHtml(recipe.thumbLabel)}</span>`}
@@ -524,9 +458,9 @@ function renderDayContent(state, onMealRemoved = null) {
                             <div class="min-w-0">
                                 <div class="flex items-center"><p class="${titleClass}">${escapeHtml(recipe.title)}</p>${customDot}</div>
                                 <p class="${metaClass}">
-                                    <i class="fas fa-clock text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
-                                    <span class="mx-1.5 text-[#6d6c67]">·</span>
-                                    <i class="fas fa-fire text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${entryN.kcal} kcal${servLabel}
+                                    <i class="fas fa-clock text-[rgb(var(--text-faint-rgb))] mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
+                                    <span class="mx-1.5 text-[rgb(var(--text-subdued-rgb))]">·</span>
+                                    <i class="fas fa-fire text-[rgb(var(--text-faint-rgb))] mr-0.5" aria-hidden="true"></i>${entryN.kcal} kcal${servLabel}
                                 </p>
                             </div>
                         </div>
@@ -538,36 +472,36 @@ function renderDayContent(state, onMealRemoved = null) {
             </div>`;
         }).join('');
 
-        const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[#444442] text-[#9b978f] 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 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:#2d2e2b; color:#d7d2c8;">${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-[#393937] overflow-hidden" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5 bg-[#393937]" style="background:#393937 !important;">
-                <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
-                <span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0">${slot.label}</span>
+        <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-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-[#444442]" 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-[#393937] overflow-hidden" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5">
-                <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
-                <span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0">${slot.label}</span>
+        <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-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">
-                <p class="text-[11px] text-[#7d7a74] italic pl-9">Zaplanuj posiłek</p>
+            <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>`;
     }).join('');
@@ -594,7 +528,7 @@ function getPendingMealRemovalProgress(state, dayKey, slotId, entryId) {
 function getPendingMealRemovalButtonStyle(progress) {
     const clamped = Math.max(0, Math.min(1, progress));
     const angle = Math.round(clamped * 360);
-    return `conic-gradient(from -90deg, rgba(229,223,214,0.96) 0deg, rgba(229,223,214,0.96) ${angle}deg, rgba(109,108,103,0.24) ${angle}deg, rgba(109,108,103,0.24) 360deg)`;
+    return `conic-gradient(from -90deg, rgba(var(--text-body-rgb),0.96) 0deg, rgba(var(--text-body-rgb),0.96) ${angle}deg, rgba(var(--text-subdued-rgb),0.24) ${angle}deg, rgba(var(--text-subdued-rgb),0.24) 360deg)`;
 }
 
 function stopPendingMealRemovalTicker(state) {
@@ -970,7 +904,7 @@ function renderIngredientsSheet(state) {
     if (subEl) subEl.textContent = 'Porównanie potrzeb z zapasami w spiżarni.';
 
     if (!today || today.items.length === 0) {
-        body.innerHTML = '<p class="text-sm text-[#9b978f] text-center py-8">Najpierw zaplanuj posiłki.</p>';
+        body.innerHTML = '<p class="text-sm text-[rgb(var(--text-dim-rgb))] text-center py-8">Najpierw zaplanuj posiłki.</p>';
         updateIngButtons(state);
         return;
     }
@@ -980,8 +914,8 @@ function renderIngredientsSheet(state) {
     let html = '';
 
     if (shortItems.length === 0) {
-        html += `<div class="rounded-xl bg-[#2d2e2b] border border-emerald-400/40 p-3 mb-4 flex items-center gap-2.5">
-            <div class="w-8 h-8 rounded-full bg-[#24352a] flex items-center justify-center shrink-0">
+        html += `<div class="rounded-xl bg-[rgb(var(--app-bg-rgb))] border border-emerald-400/40 p-3 mb-4 flex items-center gap-2.5">
+            <div class="w-8 h-8 rounded-full bg-[rgba(var(--success-rgb), 0.14)] flex items-center justify-center shrink-0">
                 <i class="fas fa-check text-emerald-600 text-sm"></i>
             </div>
             <div>
@@ -990,8 +924,8 @@ function renderIngredientsSheet(state) {
             </div>
         </div>`;
     } else {
-        html += `<div class="rounded-xl bg-[#2d2e2b] border border-red-300/40 p-3 mb-4 flex items-center gap-2.5">
-            <div class="w-8 h-8 rounded-full bg-[#3a2326] flex items-center justify-center shrink-0">
+        html += `<div class="rounded-xl bg-[rgb(var(--app-bg-rgb))] border border-red-300/40 p-3 mb-4 flex items-center gap-2.5">
+            <div class="w-8 h-8 rounded-full bg-[rgba(var(--danger-rgb), 0.14)] flex items-center justify-center shrink-0">
                 <i class="fas fa-exclamation text-red-500 text-sm"></i>
             </div>
             <div>
@@ -1006,15 +940,15 @@ function renderIngredientsSheet(state) {
             <p class="text-[10px] font-bold text-red-400 uppercase tracking-wider mb-2 px-0.5">
                 <i class="fas fa-cart-shopping text-[9px] mr-1"></i>Do kupienia
             </p>
-            <ul class="border border-red-300/30 rounded-xl overflow-hidden bg-[#2d2e2b] divide-y divide-[#3a2326]">
+            <ul class="border border-red-300/30 rounded-xl overflow-hidden bg-[rgb(var(--app-bg-rgb))] divide-y divide-[rgba(var(--danger-rgb), 0.14)]">
                 ${shortItems.map((ing) => `
                 <li class="flex items-start gap-3 py-3 px-3">
                     <div class="w-2 h-2 rounded-full bg-red-400 mt-1.5 shrink-0"></div>
                     <div class="flex-1 min-w-0">
-                        <p class="text-[13px] font-semibold text-[#ddd6ca]">${escapeHtml(ing.name)}</p>
-                        <p class="text-[11px] text-[#9b978f] mt-0.5">
-                            potrzeba <span class="font-medium text-[#d7d2c8]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
-                            <span class="mx-1 text-[#6d6c67]">&middot;</span>
+                        <p class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))]">${escapeHtml(ing.name)}</p>
+                        <p class="text-[11px] text-[rgb(var(--text-dim-rgb))] mt-0.5">
+                            potrzeba <span class="font-medium text-[rgb(var(--text-body-soft-rgb))]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
+                            <span class="mx-1 text-[rgb(var(--text-subdued-rgb))]">&middot;</span>
                             w spiżarni <span class="font-medium ${ing.pantryQty > 0 ? 'text-amber-600' : 'text-gray-400'}">${ing.pantryQty > 0 ? formatAmount(ing.pantryQty) + ' ' + escapeHtml(ing.pantryUnit) : 'brak'}</span>
                         </p>
                     </div>
@@ -1032,15 +966,15 @@ function renderIngredientsSheet(state) {
             <p class="text-[10px] font-bold text-emerald-500 uppercase tracking-wider mb-2 px-0.5">
                 <i class="fas fa-check text-[9px] mr-1"></i>W spiżarni
             </p>
-            <ul class="border border-[#444442] rounded-xl overflow-hidden bg-[#2d2e2b] divide-y divide-[#353632]">
+            <ul class="border border-[rgb(var(--card-strong-rgb))] rounded-xl overflow-hidden bg-[rgb(var(--app-bg-rgb))] divide-y divide-[rgb(var(--card-raised-rgb))]">
                 ${okItems.map((ing) => `
                 <li class="flex items-start gap-3 py-2.5 px-3">
                     <div class="w-2 h-2 rounded-full bg-emerald-400 mt-1.5 shrink-0"></div>
                     <div class="flex-1 min-w-0">
-                        <p class="text-[13px] font-medium text-[#d7d2c8]">${escapeHtml(ing.name)}</p>
-                        <p class="text-[11px] text-[#9b978f] mt-0.5">
-                            potrzeba <span class="font-medium text-[#d7d2c8]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
-                            <span class="mx-1 text-[#6d6c67]">&middot;</span>
+                        <p class="text-[13px] font-medium text-[rgb(var(--text-body-soft-rgb))]">${escapeHtml(ing.name)}</p>
+                        <p class="text-[11px] text-[rgb(var(--text-dim-rgb))] mt-0.5">
+                            potrzeba <span class="font-medium text-[rgb(var(--text-body-soft-rgb))]">${formatAmount(ing.amount)} ${escapeHtml(ing.pantryUnit)}</span>
+                            <span class="mx-1 text-[rgb(var(--text-subdued-rgb))]">&middot;</span>
                             masz <span class="font-medium text-emerald-600">${formatAmount(ing.pantryQty)} ${escapeHtml(ing.pantryUnit)}</span>
                         </p>
                     </div>
@@ -1059,7 +993,7 @@ function renderIngredientsSheet(state) {
                     const wd = WEEKDAYS_LONG[day.date.getDay()];
                     const label = `${wd}, ${day.date.getDate()} ${CALENDAR_MONTHS_SHORT[day.date.getMonth()]}`;
                     const shorts = day.items.filter((it) => !it.enough);
-                    return `<div class="rounded-xl border border-amber-200/80 bg-[#2d2e2b] p-3">
+                    return `<div class="rounded-xl border border-amber-200/80 bg-[rgb(var(--app-bg-rgb))] p-3">
                         <p class="text-[12px] font-semibold text-amber-900">
                             <i class="fas fa-calendar-day text-[10px] mr-1.5 text-amber-500"></i>${escapeHtml(label)}
                         </p>
@@ -1128,6 +1062,19 @@ export function setupMealPlanner() {
         maxMinutes: PICKER_FILTER_MAX_MINUTES,
     };
 
+    const resolveCalendarDayState = (day, meta) => {
+        const today = startOfDay(new Date());
+        const isSelected = sameDay(day, state.selected);
+        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(state.plans, day)
+                : dayHasAnyMeal(state.plans, day),
+        };
+    };
+
     const rerender = () => {
         syncModeToggle(state.mode);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
@@ -1137,12 +1084,7 @@ export function setupMealPlanner() {
             weekAnchorDate: state.weekStart,
             monthAnchorDate: state.monthAnchor,
             selectedDate: state.selected,
-            resolveDayState: (day, meta) => ({
-                dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
-                showIndicator: meta.mode === 'month'
-                    ? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
-                    : dayHasAnyMeal(state.plans, day),
-            }),
+            resolveDayState: resolveCalendarDayState,
         });
         renderDayContent(state, persist);
     };
@@ -1153,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(0,0,0,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) => {
@@ -1173,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;
@@ -1420,7 +1328,41 @@ 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') {
+            state.mode = 'month';
+            state.monthAnchor = startOfMonth(state.selected);
+        } else {
+            state.mode = 'week';
+            state.weekStart = startOfWeekMonday(state.selected);
+        }
+        rerender();
+    });
 
     requestAnimationFrame(() => {
         const ww = document.getElementById('calendar-week-wrap');

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 { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth } from '../services/dateUtils.js';
+import { loadPlans, dateKey } from '../services/planStore.js?v=2';
+import { addDays, sameDay, startOfDay, startOfMonth } from '../services/dateUtils.js';
 import { aggregateRangeIngredientNeed, dayHasAnyMeal } from '../services/planIngredients.js?v=4';
 import {
-    bindCalendarDayClicks,
-    createCalendarTopbarHTML,
-    createCalendarWeekdayHeaderHTML,
-    renderCalendarGrid,
-    syncCalendarTodayButton,
-} from '../ui/mealCalendar.js?v=11';
+    createSwipePopoverCalendarHTML,
+    initSwipePopoverCalendar,
+} from '../ui/swipePopoverCalendar.js';
+import {
+    createCalendarPopoverHTML,
+    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 ? '#393937' : '#2d2e2b';
-    const color = active ? '#f2efe8' : '#d7d2c8';
-    const borderRule = active ? 'border:1px solid #787876;' : 'border:none;';
-    const shadow = active
-        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -78,34 +71,34 @@ const PANTRY_SECTION_FILTERS = [
 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 SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
 const DEFAULT_HORIZON_DAYS = 7;
-const PANTRY_CALENDAR_DAY_ATTR = 'data-pantry-calendar-day';
-const SHORTFALL_ACCENT = '#CB4A48';
+const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
 const PANTRY_CALENDAR_THEME = {
-    bg: '#272622',
-    border: '#34312c',
-    text: '#d7d2c8',
-    dimText: '#5a5752',
-    dimOpacity: 0.38,
+    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))',
+    dimOpacity: 0.58,
     dimmedBg: 'transparent',
     dimmedBorder: 'transparent',
-    dot: '#7d7a74',
-    selectedBg: '#393937',
-    selectedBorder: '#787876',
-    selectedText: '#f2efe8',
-    selectedDot: '#f2efe8',
+    dot: 'rgb(var(--text-faint-rgb))',
+    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)',
 };
 
 /* ── 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: [],
@@ -141,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');
@@ -162,8 +151,8 @@ function photoStripMedia(image, icon, accentBg) {
             <img src="${esc(image)}" alt="" class="absolute inset-0 w-full h-full object-cover">
         </div>`;
     }
-    return `<div class="w-[4.5rem] shrink-0 flex items-center justify-center self-stretch" style="background:#333331;">
-        <i class="fas ${icon} text-[22px]" style="color:rgba(255,255,255,0.10);"></i>
+    return `<div class="w-[4.5rem] shrink-0 flex items-center justify-center self-stretch" style="background:rgb(var(--card-soft-rgb));">
+        <i class="fas ${icon} text-[22px]" style="color:var(--icon-watermark);"></i>
     </div>`;
 }
 
@@ -171,89 +160,98 @@ 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:#2d2e2b !important;">
+    <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 ── -->
-        <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:#2d2e2b !important; border:none !important;">
-            <div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
-                <div id="pantry-topbar" class="relative min-h-12">
-                    <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);">
-                        <h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:#f2efe8;font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
+        .dark .pv2-tile {
+            background: rgba(255, 255, 255, 0.06) !important;
+            border-color: rgba(255, 255, 255, 0.1) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.18),
+                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;
+        }
 
-                        <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 shrink" style="background:#393937 !important; border:1px solid #41423f !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
-                            <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:#ddd6ca;"></span>
-                            <i class="fas fa-chevron-down text-[10px] shrink-0" style="color:#9b978f;"></i>
+        .pv2-track {
+            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-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                 </button>
-
-                        <div id="pantry-filter-wrap" class="relative shrink-0">
-                            <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:#393937; border:1px solid #41423f; box-shadow:${SEARCH_SHELL_SHADOW}; color:#ddd6ca;">
-                                <i class="fas fa-sliders-h text-[12px]"></i>
-                                <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:#23221e; border:1px solid #787876; color:#f2efe8;"></span>
+                ${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-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:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-6px) scale(0.98);">
-                                <div class="flex items-center justify-between gap-3 px-0.5 pb-3">
-                                    <p class="text-[11px] font-semibold leading-none" style="color:#f2efe8;">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:#b5afa5;">
+        <!-- ── scrollable content ── -->
+        <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);">
+            <div id="pantry-board"></div>
+        </div>
+
+        <!-- ── floating bottom controls (search + filter) ── -->
+        <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ść
                 </button>
             </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:#393937 !important; border:1px solid #41423f !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; color:#ddd6ca;">
-                            <i class="fas fa-search text-[13px]"></i>
+        <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;">
+            <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-horizon-expanded" class="absolute inset-0 transition-all duration-200 pointer-events-none" style="opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <div id="pantry-horizon-wrap" class="relative">
-                            <button type="button" id="pantry-horizon-toggle" class="w-full h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
-                                <span id="pantry-horizon-label" class="flex-1 min-w-0 text-left text-[13px] font-normal truncate" style="color:#ddd6ca;"></span>
-                                <i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:#9b978f;"></i>
-                            </button>
-
-                            <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:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-6px) scale(0.98);">
-                                ${createCalendarTopbarHTML({
-        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-[#d7d2c8] 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-[#d7d2c8] 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-[#7d7a74] cursor-default',
-    })}
-                                ${createCalendarWeekdayHeaderHTML(undefined, {
-        wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[#9b978f] 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:#444442;">
-                                    <p id="pantry-cal-selection" class="min-w-0 text-[11px] leading-snug" style="color:#9b978f;"></p>
-                                </div>
-                            </div>
-                        </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>
+                <input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
+                    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="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:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:#9b978f;"></i>
-                        <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
-                            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:#ddd6ca; margin:0;">
-                        <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:#2f2f2d; border:none; color:#9b978f;">
-                            <i class="fas fa-xmark text-[13px]"></i>
+            <div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
+                <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">
+                    <i id="pantry-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <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>
             </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:#2d2e2b !important;">
-            <div id="pantry-board"></div>
-        </div>
-    </div>
     ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
 }
 
@@ -262,117 +260,106 @@ export function getPantryHTML() {
 function syncHorizonUI() {
     ensureValidHorizonDate();
 
-    const defaultRow = document.getElementById('pantry-default-row');
-    const horizonExpanded = document.getElementById('pantry-horizon-expanded');
-    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 horizonLabel = document.getElementById('pantry-horizon-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 (horizonLabel) horizonLabel.textContent = formatHorizonLabel(horizonEndDate);
-    if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate);
 
-    const showCalendar = isCalendarOpen && !isSearchExpanded;
-    const showDefault = !isSearchExpanded && !isCalendarOpen;
-    const showFilter = isFilterOpen && showDefault;
     const activeFilterCount = getActivePantryFilterCount();
 
-    if (defaultRow) {
-        defaultRow.style.opacity = showDefault ? '1' : '0';
-        defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
-    }
-
-    if (horizonExpanded) {
-        horizonExpanded.style.opacity = showCalendar ? '1' : '0';
-        horizonExpanded.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        horizonExpanded.style.pointerEvents = showCalendar ? 'auto' : 'none';
-    }
-
-    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)';
-    }
+    syncCalendarPopoverVisibility({
+        popup: popover,
+        isOpen: isCalendarOpen,
+        chevron,
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
+        trigger: compactPill,
+        openTriggerStyle: {},
+        closedTriggerStyle: {},
+        triggerImportant: true,
+    });
 
     if (filterPopover) {
-        filterPopover.style.opacity = showFilter ? '1' : '0';
-        filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
-        filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
-    }
-    if (filterToggle) {
-        const isActive = showFilter || hasActivePantryFilters();
-        filterToggle.style.setProperty('background', isActive ? '#23221e' : '#393937', 'important');
-        filterToggle.style.setProperty('border-color', isActive ? '#787876' : '#41423f', 'important');
-        filterToggle.style.setProperty('color', isActive ? '#f2efe8' : '#ddd6ca', 'important');
+        filterPopover.style.opacity = isFilterOpen ? '1' : '0';
+        filterPopover.style.transform = isFilterOpen
+            ? 'translateX(-50%) translateY(0) scale(1)'
+            : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
+        filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
     }
     if (filterCount) {
         filterCount.textContent = String(activeFilterCount);
-        filterCount.classList.toggle('hidden', activeFilterCount === 0);
-        filterCount.classList.toggle('flex', activeFilterCount > 0);
+        filterCount.classList.toggle('hidden', true);
+        filterCount.classList.toggle('flex', false);
     }
-
-    if (prevBtn) {
-        const isCurrentMonth = sameMonth(calendarMonthAnchor, getToday());
-        prevBtn.disabled = isCurrentMonth;
-        prevBtn.style.opacity = isCurrentMonth ? '0.45' : '1';
-        prevBtn.style.cursor = isCurrentMonth ? 'default' : 'pointer';
+    if (filterPillCount) {
+        filterPillCount.textContent = String(activeFilterCount);
+        filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
+        filterPillCount.classList.toggle('flex', activeFilterCount > 0);
     }
-    syncCalendarTodayButton(
-        todayBtn,
-        sameMonth(calendarMonthAnchor, getToday()),
-        horizonEndDate,
-        {
-            ariaLabelGo: 'Pokaż bieżący miesiąc w kalendarzu',
-            ariaLabelCurrent: 'Wyświetlany jest bieżący miesiąc',
-        },
-    );
-
+    if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
     if (searchShell) {
-        searchShell.style.opacity = isSearchExpanded ? '1' : '0';
-        searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
+        searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
+        searchShell.style.pointerEvents = pantrySearchOpen ? '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');
-    if (!gridEl) return;
+    pantryCalendar?.render();
+}
 
-    ensureValidHorizonDate();
-    const today = getToday();
-    const plans = loadPlans();
-
-    renderCalendarGrid({
-        gridEl,
-        mode: 'month',
-        anchorDate: calendarMonthAnchor,
-        selectedDate: horizonEndDate,
-        resolveDayState: (day, meta) => {
-            const isPast = day.getTime() < today.getTime();
+function bindPantryCalendarInteractions() {
+    pantryCalendar = initSwipePopoverCalendar({
+        idPrefix: 'pantry-cal',
+        selectionMode: 'single',
+        panelHandlePx: 10,
+        panelHandleMin: 8,
+        panelHandleMax: 12,
+        getMonthAnchor: () => calendarMonthAnchor,
+        setMonthAnchor: (nextMonth) => {
+            const nextAnchor = startOfMonth(nextMonth);
+            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,
-                showIndicator: dayHasAnyMeal(plans, day),
+                dimmed: isPast || !inCurrentMonth,
+                showDot: dayHasAnyMeal(loadPlans(), day),
             };
         },
-        dayAttr: PANTRY_CALENDAR_DAY_ATTR,
         theme: PANTRY_CALENDAR_THEME,
     });
+    pantryCalendar.render();
 }
 
 function filterChipHtml(kind, value, label, active) {
@@ -409,51 +396,64 @@ function renderFilterPopover() {
 
     body.innerHTML = `
         <section>
-            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:#b5afa5;">Kategorie</p>
+            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:rgb(var(--text-muted-rgb));">Kategorie</p>
             <div class="flex flex-wrap gap-2">${categoryChips}</div>
         </section>
         <section>
-            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:#b5afa5;">Sekcje</p>
+            <p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:rgb(var(--text-muted-rgb));">Sekcje</p>
             <div class="flex flex-wrap gap-2">${sectionChips}</div>
         </section>
     `;
 }
 
-function closeSearch() {
-    const input = document.getElementById('pantry-search');
-    const hadQuery = Boolean(input?.value);
-    if (input) {
-        input.value = '';
-        input.blur();
-    }
-    isSearchExpanded = false;
-    syncHorizonUI();
+function clearSearchInput() {
+    const hadQuery = Boolean(pantrySearchQuery);
+    pantrySearchQuery = '';
     if (hadQuery) renderBoard();
 }
 
-function openSearch() {
-    isSearchExpanded = true;
+function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+    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(() => {
-        document.getElementById('pantry-search')?.focus();
-    });
+    if (clearQuery && hadQuery) renderBoard();
 }
 
 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() {
@@ -463,8 +463,8 @@ function closeFilter() {
 }
 
 function toggleFilterPanel() {
+    if (pantrySearchOpen) return;
     isCalendarOpen = false;
-    isSearchExpanded = false;
     isFilterOpen = !isFilterOpen;
     syncHorizonUI();
 }
@@ -561,26 +561,28 @@ function classifyIngredients(searchQuery) {
 
 /* ══════════════════════ TILE RENDERING ══════════════════════ */
 
-function tileIconHtml(item) {
+function tileIconHtml(item, size = 'sm') {
+    const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
+    const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
     if (item.image) {
-        return `<div class="w-6 h-6 rounded-md shrink-0 overflow-hidden" style="background:#2f2f2d;"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain" style="padding:1px;"></div>`;
+        return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
     }
-    return `<div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${item.icon} text-[11px]" style="color:#7d7a74;"></i></div>`;
+    return `<div class="${wrap} flex items-center justify-center shrink-0"><i class="fas ${item.icon} ${iconSize}" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
 }
 
 function shortfallTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
-        <div class="flex items-center gap-1.5 min-w-0">
-            ${tileIconHtml(item)}
-            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
-        </div>
-        <div class="w-full flex items-center gap-2">
-            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
+    <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="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:#ddd6ca;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
+                <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>
+            </div>
         </div>
     </button>`;
 }
@@ -588,16 +590,16 @@ 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 flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
-        <div class="flex items-center gap-1.5 min-w-0">
-            ${tileIconHtml(item)}
-            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
+    <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="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>
-        <div class="w-full flex items-center gap-2">
-            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
-                <div class="h-full rounded-full" style="width:100%; background:#6ee7b7;"></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>
             </div>
-            <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
         </div>
     </button>`;
 }
@@ -606,10 +608,10 @@ 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:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" 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 ? '#b7ada1' : '#9b978f'};">${esc(item.name)}</p>
-        <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? '#9b978f' : '#6d6c67'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
+        <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>
     </button>`;
 }
 
@@ -619,7 +621,7 @@ function sectionHeaderHtml(icon, iconBg, iconColor, title, titleColor, count) {
     return `
     <div class="flex items-center gap-2 mb-2.5 px-0.5">
         <span class="text-[10px] font-bold uppercase tracking-wider" style="color:${titleColor};">${esc(title)}</span>
-        <span class="text-[10px]" style="color:#6d6c67;">${count}</span>
+        <span class="text-[10px]" style="color:rgb(var(--text-subdued-rgb));">${count}</span>
     </div>`;
 }
 
@@ -627,13 +629,13 @@ 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);
 
     const totalVisible = shortfalls.length + sufficient.length + notPlanned.length;
     if (totalVisible === 0 && (q || hasFilters)) {
-        root.innerHTML = `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień filtry lub wyszukiwanie.</p>`;
+        root.innerHTML = `<p class="text-sm text-center py-10" style="color:rgb(var(--text-dim-rgb));">Brak wyników — zmień filtry lub wyszukiwanie.</p>`;
         return;
     }
 
@@ -642,7 +644,7 @@ function renderBoard() {
     // Section 1: Potrzebne (shortfalls)
     if (shortfalls.length > 0) {
         html += `<section class="mb-5">`;
-        html += sectionHeaderHtml('fa-exclamation', '#2f2f2d', SHORTFALL_ACCENT, 'Potrzebne', '#7B756D', shortfalls.length);
+        html += sectionHeaderHtml('fa-exclamation', 'rgb(var(--card-soft-rgb))', SHORTFALL_ACCENT, 'Potrzebne', 'rgb(var(--text-faint-rgb))', shortfalls.length);
         html += `<div class="flex flex-wrap gap-2">`;
         html += shortfalls.sort((a, b) => a.name.length - b.name.length).map(shortfallTileHtml).join('');
         html += `</div></section>`;
@@ -651,7 +653,7 @@ function renderBoard() {
     // Section 2: W spiżarni (sufficient)
     if (sufficient.length > 0) {
         html += `<section class="mb-5">`;
-        html += sectionHeaderHtml('fa-check', '#1a2e22', '#6ee7b7', 'W spiżarni', '#7B756D', sufficient.length);
+        html += sectionHeaderHtml('fa-check', 'rgba(var(--success-rgb), 0.14)', 'rgb(var(--success-rgb))', 'W spiżarni', 'rgb(var(--text-faint-rgb))', sufficient.length);
         html += `<div class="flex flex-wrap gap-2">`;
         html += sufficient.sort((a, b) => a.name.length - b.name.length).map(sufficientTileHtml).join('');
         html += `</div></section>`;
@@ -660,7 +662,7 @@ function renderBoard() {
     // Section 3: Poza planem
     if (notPlanned.length > 0) {
         html += `<section class="mb-5">`;
-        html += sectionHeaderHtml('fa-minus', '#2a2a28', '#6d6c67', 'Poza planem', '#7B756D', notPlanned.length);
+        html += sectionHeaderHtml('fa-minus', 'rgb(var(--app-bg-rgb))', 'rgb(var(--text-subdued-rgb))', 'Poza planem', 'rgb(var(--text-faint-rgb))', notPlanned.length);
         html += `<div class="flex flex-wrap gap-2">`;
         html += notPlanned.map(notPlannedChipHtml).join('');
         html += `</div></section>`;
@@ -670,11 +672,11 @@ function renderBoard() {
     if (shortfalls.length === 0 && sufficient.length === 0 && !q && !hasFilters) {
         html = `
         <div class="flex flex-col items-center justify-center py-10 text-center mb-6">
-            <div class="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style="background:#393937;">
-                <i class="fas fa-calendar-xmark text-lg" style="color:#6d6c67;"></i>
+            <div class="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style="background:rgb(var(--card-rgb));">
+                <i class="fas fa-calendar-xmark text-lg" style="color:rgb(var(--text-subdued-rgb));"></i>
             </div>
-            <p class="text-[13px] font-semibold mb-1" style="color:#ddd6ca;">Brak zaplanowanych posiłków</p>
-            <p class="text-[11px] max-w-[16rem]" style="color:#9b978f;">Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.</p>
+            <p class="text-[13px] font-semibold mb-1" style="color:rgb(var(--text-body-rgb));">Brak zaplanowanych posiłków</p>
+            <p class="text-[11px] max-w-[16rem]" style="color:rgb(var(--text-dim-rgb));">Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.</p>
         </div>` + html;
     }
 
@@ -706,6 +708,8 @@ export function refreshPantry() {
 }
 
 export function setupPantry() {
+    ensureFilterPopoverStyles();
+
     if (!ingredientCard) {
         ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
         ingredientCard.bind();
@@ -714,27 +718,34 @@ 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(0,0,0,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')?.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') closeSearch();
+    document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
+        event.stopPropagation();
+        setPantrySearchOpen(true, { focusInput: true });
     });
-    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', () => {
+    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-filter-clear')?.addEventListener('click', (event) => {
+        event.stopPropagation();
         pantryFilters = { categories: [], sections: [] };
         syncHorizonUI();
         renderBoard();
@@ -746,6 +757,8 @@ export function setupPantry() {
         const chip = target.closest('[data-pantry-filter-kind]');
         if (!(chip instanceof Element)) return;
 
+        event.stopPropagation();
+
         const kind = chip.getAttribute('data-pantry-filter-kind');
         const value = chip.getAttribute('data-pantry-filter-value');
         if (!kind || !value) return;
@@ -770,32 +783,9 @@ export function setupPantry() {
     // Horizon pill + calendar
     document.getElementById('pantry-horizon-compact')?.addEventListener('click', (event) => {
         event.stopPropagation();
-        openCalendar();
+        isCalendarOpen ? closeCalendar() : openCalendar();
     });
-    document.getElementById('pantry-horizon-toggle')?.addEventListener('click', () => {
-        if (isCalendarOpen) {
-            closeCalendar();
-            return;
-        }
-        openCalendar();
-    });
-    document.getElementById('pantry-cal-prev')?.addEventListener('click', () => {
-        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);
+    bindPantryCalendarInteractions();
 
     if (!pantryGlobalListenersBound) {
         pantryGlobalListenersBound = true;
@@ -805,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/RecipeDetailV2.js

@@ -10,15 +10,15 @@ function escapeHtml(s) {
 }
 
 const RD_THEME = Object.freeze({
-    surface: '#393937',
-    surfaceSoft: '#2f2f2d',
-    surfaceActive: '#23221e',
-    border: '#444442',
-    borderSoft: '#56534f',
-    borderStrong: '#787876',
-    textPrimary: '#ddd6ca',
-    textSecondary: '#d7d2c8',
-    textMuted: '#9b978f',
+    surface: 'rgb(var(--card-rgb))',
+    surfaceSoft: 'rgb(var(--card-soft-rgb))',
+    surfaceActive: 'rgb(var(--sunken-rgb))',
+    border: 'rgb(var(--card-strong-rgb))',
+    borderSoft: 'rgba(var(--border-input-rgb), 0.58)',
+    borderStrong: 'rgb(var(--border-input-rgb))',
+    textPrimary: 'rgb(var(--text-body-rgb))',
+    textSecondary: 'rgb(var(--text-body-soft-rgb))',
+    textMuted: 'rgb(var(--text-dim-rgb))',
 });
 
 function forceBg(bg) {
@@ -31,27 +31,27 @@ function forceBgBorder(bg, border) {
 
 export function getRecipeDetailHTML() {
     return `
-    <div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
+    <div id="recipe-detail-view" class="absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none overflow-hidden" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
         <div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
-            <button id="rd-back-btn" onclick="closeRecipeDetail()" class="w-9 h-9 rounded-full flex items-center justify-center transition-opacity opacity-95 hover:opacity-100" style="background:rgba(57,57,55,0.93) !important; backdrop-filter:none !important; box-shadow:0 4px 9px rgba(0,0,0,0.33) !important; color:#ddd6ca !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
+            <button id="rd-back-btn" onclick="closeRecipeDetail()" class="w-9 h-9 rounded-full flex items-center justify-center transition-opacity opacity-95 hover:opacity-100" style="background:rgba(var(--card-rgb),0.93) !important; backdrop-filter:none !important; box-shadow:0 4px 9px rgba(var(--overlay-rgb),0.33) !important; color:rgb(var(--text-body-rgb)) !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
                 <i class="fas fa-arrow-left text-[13px]"></i>
             </button>
-            <button id="rd-add-to-planner-btn" class="h-9 px-3 rounded-full flex items-center justify-center gap-1.5 transition-opacity opacity-95 hover:opacity-100 text-[12px] font-semibold" style="background:rgba(57,57,55,0.93) !important; backdrop-filter:none !important; box-shadow:0 3px 8px rgba(0,0,0,0.28) !important; color:#ddd6ca !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
+            <button id="rd-add-to-planner-btn" class="h-9 px-3 rounded-full flex items-center justify-center gap-1.5 transition-opacity opacity-95 hover:opacity-100 text-[12px] font-semibold" style="background:rgba(var(--card-rgb),0.93) !important; backdrop-filter:none !important; box-shadow:0 3px 8px rgba(var(--overlay-rgb),0.28) !important; color:rgb(var(--text-body-rgb)) !important; transition:box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease;">
                 <i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
             </button>
         </div>
 
         <div id="rd-scroll-container" class="absolute inset-0 z-10 overflow-y-auto no-scrollbar" style="overscroll-behavior-y:none;">
-            <div id="rd-hero" class="h-[236px] w-full relative overflow-hidden" style="background:linear-gradient(180deg, #3a3937 0%, #23221e 100%) !important; will-change:height,opacity;">
+            <div id="rd-hero" class="h-[236px] w-full relative overflow-hidden" style="background:linear-gradient(180deg, rgb(var(--card-raised-rgb)) 0%, rgb(var(--sunken-rgb)) 100%) !important; will-change:height,opacity;">
                 <img id="rd-hero-img" src="" alt="" class="w-full h-full object-cover hidden" style="will-change:transform;">
-                <div class="absolute inset-0 pointer-events-none" style="background:linear-gradient(to bottom, rgba(45,46,43,0.1), rgba(45,46,43,0.4), rgba(45,46,43,0.92));"></div>
-                <span id="rd-hero-label" class="absolute inset-0 z-10 flex items-center justify-center font-medium text-[15px]" style="color:#ddd6ca;"></span>
+                <div class="absolute inset-0 pointer-events-none" style="background:linear-gradient(to bottom, rgba(var(--app-bg-rgb),0.1), rgba(var(--app-bg-rgb),0.4), rgba(var(--app-bg-rgb),0.92));"></div>
+                <span id="rd-hero-label" class="absolute inset-0 z-10 flex items-center justify-center font-medium text-[15px]" style="color:rgb(var(--text-body-rgb));"></span>
             </div>
 
-            <div id="rd-content-body" class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 min-h-screen" style="background:#2d2e2b !important; background-image:none !important; box-shadow:0 -8px 20px rgba(0,0,0,0.35) !important;">
+            <div id="rd-content-body" class="bg-[rgb(var(--app-bg-rgb))] rounded-t-3xl -mt-6 relative z-30 pt-6 min-h-screen" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:0 -8px 20px rgba(var(--overlay-rgb),0.35) !important;">
                 <div class="mb-3 px-5">
                     <div class="flex justify-between items-start mb-2.5">
-                        <h1 id="rd-title" class="text-xl font-bold leading-tight" style="color:#ddd6ca;"></h1>
+                        <h1 id="rd-title" class="text-xl font-bold leading-tight" style="color:rgb(var(--text-body-rgb));"></h1>
                     </div>
                 </div>
 
@@ -253,17 +253,17 @@ function renderNutritionSummary(recipe) {
         ? `
             <div class="mt-3 flex items-center justify-between gap-3">
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
-                <p class="pr-1 text-[13px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</p>
+                <p class="pr-1 text-[13px] font-semibold leading-none text-[rgb(var(--text-body-soft-rgb))] tabular-nums">${currentServings}</p>
             </div>`
         : `
             <div class="mt-3 flex items-center justify-between gap-3">
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
-                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
-                    <button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
+                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:rgb(var(--card-soft-rgb));border-color:rgb(var(--card-strong-rgb));box-shadow:var(--shadow-card);">
+                    <button type="button" id="rd-serv-minus" class="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" aria-label="Zmniejsz liczbę porcji">
                         <i class="fas fa-minus text-[10px]"></i>
                     </button>
-                    <span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
-                    <button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
+                    <span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[rgb(var(--text-body-soft-rgb))] tabular-nums">${currentServings}</span>
+                    <button type="button" id="rd-serv-plus" class="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" aria-label="Zwiększ liczbę porcji">
                         <i class="fas fa-plus text-[10px]"></i>
                     </button>
                 </div>
@@ -271,23 +271,23 @@ function renderNutritionSummary(recipe) {
 
     return `
         <div class="mb-4">
-            <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+            <div class="h-full pb-2 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>
                 <div class="flex-1 flex items-center">
                     <div class="grid grid-cols-4 gap-1.5 w-full">
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${total.kcal}</p>
                             <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${total.protein}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">białko</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${total.fat}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                         </div>
-                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:rgb(var(--card-rgb));">
                             <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${total.carbs}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                         </div>
@@ -306,12 +306,12 @@ function renderIngredients(recipe) {
         const items = buildVisibleIngredients(recipe);
         const rows = items.map((item) => {
             const rowClass = 'rd-ing-row rounded-xl px-3 py-3 w-full text-left cursor-pointer transition-colors active:scale-[0.99]';
-            const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
+            const rowStyle = 'background:rgb(var(--card-rgb)) !important; background-image:none !important; box-shadow:var(--shadow-card) !important; border:none !important;';
             const productBadge = item.productName
                 ? `<div class="flex items-center gap-1 mt-0.5"><span class="text-[10px] text-emerald-400 truncate">${escapeHtml(item.productName)}</span></div>`
                 : '';
             const addedMark = item.added
-                ? '<span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span>'
+                ? '<span class="shrink-0 inline-flex items-center justify-center text-[rgb(var(--text-faint-rgb))]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span>'
                 : '';
             return `<li>
                 <button type="button" class="${rowClass}" style="${rowStyle}" data-rd-open-ingredient data-rd-ingredient-id="${escapeHtml(item.ingredientId)}" data-rd-product-id="${escapeHtml(item.productId || '')}">
@@ -364,7 +364,7 @@ function renderIngredients(recipe) {
         const scaledAmount = ing.amount * currentServings;
         const isExpanded = expandedAlternatives.has(origId);
         const rowClass = 'rd-ing-row rounded-xl px-3 py-3';
-        const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
+        const rowStyle = 'background:rgb(var(--card-rgb)) !important; background-image:none !important; box-shadow:var(--shadow-card) !important; border:none !important;';
 
         const toggleBtn = hasAlts
             ? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
@@ -392,14 +392,14 @@ function renderIngredients(recipe) {
                 const altNutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
                 const checkbox = `
                     <span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
-                          style="border:1.5px solid #56534f; background:transparent;">
-                        ${isSelected ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
+                          style="border:1.5px solid rgba(var(--border-input-rgb), 0.58); background:transparent;">
+                        ${isSelected ? '<i class="fas fa-check" style="color:rgb(var(--text-dim-rgb)); font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
                     </span>`;
                 const nutritionLine = altNutrition
                     ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${altNutrition.kcal} kcal · ${altNutrition.protein}g B · ${altNutrition.fat}g T · ${altNutrition.carbs}g W</div>`
                     : '';
 
-                return `<button type="button" class="rd-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${escapeHtml(altName)}</div>${nutritionLine}</div>${checkbox}</div></button>`;
+                return `<button type="button" class="rd-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:rgb(var(--card-soft-rgb)) !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${escapeHtml(altName)}</div>${nutritionLine}</div>${checkbox}</div></button>`;
             });
             altListHtml = `
             <div class="mt-2 ml-1 space-y-1 rd-alt-options" data-original-id="${escapeHtml(origId)}">
@@ -506,8 +506,8 @@ export function setupRecipeDetail() {
             const effectiveShadowY = isRoundButton ? shadowY + 1 : shadowY;
             const effectiveShadowBlur = isRoundButton ? shadowBlur + 1 : shadowBlur;
             const effectiveShadowAlpha = isRoundButton ? shadowAlpha + 0.05 : shadowAlpha;
-            button.style.boxShadow = `0 ${effectiveShadowY}px ${effectiveShadowBlur}px rgba(0,0,0,${effectiveShadowAlpha})`;
-            button.style.background = `rgba(57,57,55,${backgroundAlpha})`;
+            button.style.boxShadow = `0 ${effectiveShadowY}px ${effectiveShadowBlur}px rgba(var(--overlay-rgb),${effectiveShadowAlpha})`;
+            button.style.background = `rgba(var(--card-rgb),${backgroundAlpha})`;
         });
     }
 

js/views/RecipeList.js

@@ -4,9 +4,6 @@ import { getRecipeGridSectionHTML, renderRecipeGrid } from '../ui/recipeGrid.js'
 const DEFAULT_MIN_MINUTES = 5;
 const DEFAULT_MAX_MINUTES = 120;
 
-/** Jak w spiżarni — cień „pigówek” i powłoki wyszukiwania */
-const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
-
 let filterState = {
     query: '',
     slots: [],
@@ -15,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;
@@ -46,53 +43,80 @@ function getFilteredRecipes() {
     return Object.values(RECIPES).filter(matchesFilters);
 }
 
-function syncRecipeScrollShadow() {
-    const searchShell = document.getElementById('recipe-search-shell');
-    if (searchShell) {
-        searchShell.style.boxShadow = SEARCH_SHELL_SHADOW;
+function getActiveRecipeFilterCount() {
+    let count = filterState.slots.length + filterState.tags.length;
+    if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
+    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 showSearch = isSearchExpanded;
-
-    if (defaultRow) {
-        defaultRow.style.opacity = showSearch ? '0' : '1';
-        defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
-        defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
-    }
-
+    const rightWrap = document.getElementById('recipe-filter-wrap');
+    const rightBtn = document.getElementById('recipe-filter-btn');
+    const rightIcon = document.getElementById('recipe-right-btn-icon');
+    const filterCount = document.getElementById('recipe-filter-count');
+    const floatingFilterCount = document.getElementById('recipe-filter-float-count');
+    const dot = document.getElementById('recipe-search-active-dot');
+    const isOpen = recipeSearchOpen;
+    if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
     if (searchShell) {
-        searchShell.style.opacity = showSearch ? '1' : '0';
-        searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
-        searchShell.style.boxShadow = SEARCH_SHELL_SHADOW;
+        searchShell.style.opacity = isOpen ? '1' : '0';
+        searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
+        searchShell.style.transform = isOpen ? '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', !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(() => {
-        document.getElementById('recipe-search-input')?.focus();
-    });
+    if (clearQuery && hadQuery) renderGrid();
 }
 
 function renderGrid() {
@@ -105,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);
@@ -113,47 +137,44 @@ function renderGrid() {
 
 export function getRecipeListHTML() {
     return `
-    <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !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:#2d2e2b !important; border:none !important;">
-            <div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
-                <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:#f2efe8;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:#393937; border:1px solid #41423f; box-shadow:${SEARCH_SHELL_SHADOW}; color:#ddd6ca;" 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:#23221e; border:1px solid #787876; color:#f2efe8;"></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:#393937 !important; border:1px solid #41423f !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; color:#ddd6ca;" 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:#23221e !important; border:1px solid #787876 !important; box-shadow:${SEARCH_SHELL_SHADOW} !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:#9b978f;"></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:#ddd6ca; 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:#2f2f2d; border:none; color:#9b978f;">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
+    <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;">
         ${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-[#2d2e2b]',
-        gridClassName: 'grid grid-cols-3 gap-2 bg-[#2d2e2b]',
+        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>
     `;
 }
@@ -178,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) {
-            isSearchExpanded = false;
-            syncRecipeTopbarUI();
+        if (recipeSearchOpen) {
+            setSearchOpen(false, { clearQuery: true });
         }
+    });
+    document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (recipeSearchOpen) return;
         window.openFilters?.('recipes');
     });
 
@@ -205,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(0,0,0,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;
-            if (!document.getElementById('main-view')?.classList.contains('hidden')) {
-                closeSearch();
+            const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
+            if (e.key !== 'Escape') return;
+            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

@@ -1,20 +1,24 @@
-import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js?v=9';
+import { INGREDIENTS } from '../data/catalog.js?v=9';
 import {
-    KITCHEN_LIST_ID,
-    loadShoppingState,
-    saveShoppingState,
-    addOrMergeShoppingLines,
-    removeItemFromList,
-    clearCheckedInList,
     loadPantry,
-    savePantry,
     computeShortfalls,
     categoryLabel,
+    addAmountToPantry,
+    subtractFromPantry,
+    getSelectedDays,
+    setSelectedDays,
+    addSessionLogEntry,
+    removeSessionLogEntry,
+    clearSessionLog,
+    loadShoppingSession,
 } from '../services/pantryShopping.js?v=2';
-import { aggregateWeekIngredientNeed } from '../services/planIngredients.js?v=2';
-import { loadPlans } from '../services/planStore.js?v=2';
-import { startOfWeekMonday } from '../services/dateUtils.js';
+import { aggregateSelectedDaysIngredientNeed } from '../services/planIngredients.js?v=2';
+import { loadPlans, dateKey } from '../services/planStore.js?v=2';
+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 ── */
 
@@ -22,15 +26,20 @@ function esc(s) {
     return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
-function unitLabel(u) {
-    return u === 'szt' ? 'szt.' : u;
-}
-
 function formatQty(n) {
     const rounded = Math.round((Number(n) || 0) * 10) / 10;
     return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
 }
 
+function unitLabel(u) {
+    return u === 'szt' ? 'szt.' : String(u);
+}
+
+function stepForUnit(unit) {
+    return (unit === 'szt.' || unit === 'szt') ? 1 : 10;
+}
+
+
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -41,46 +50,59 @@ const CATEGORY_ICONS = {
     przyprawy: 'fa-leaf',
     inne: 'fa-jar',
 };
-
 const CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
+const DAY_ABBR = ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb'];
+const DAY_NAMES_SHORT = ['nd.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'];
+const WEEKDAY_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'sb', 'nd'];
+const MONTHS_LONG = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
+const MONTHS_SHORT = ['sty','lut','mar','kwi','maj','cze','lip','sie','wrz','paź','lis','gru'];
+const CALENDAR_DIM_TEXT = 'rgb(var(--text-faint-rgb))';
+const CALENDAR_DIM_OPACITY = '0.58';
 
-/* ══════════════════════ HTML SHELL ══════════════════════ */
+/* ── module state ── */
+let boughtPopupOpen = false;
+let expandedIngredientId = null;
+let expandedAmount = 0;
+let calendarOpen = false;
+let calendarMonth = startOfMonth(new Date());
+let shoppingCalendar = null;
+let shoppingCalendarPopover = null;
 
-export function getShoppingListHTML() {
-    return `
-    <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">
+/* ── day helpers ── */
 
-        <!-- ── header ── -->
-        <div class="shrink-0 px-4 pt-5 pb-2">
-            <div class="flex items-center justify-between mb-3">
-                <h1 class="text-[18px] font-bold" style="color:#f2efe8;">Lista zakupów</h1>
-                <button type="button" id="sl-clear-checked" class="text-[11px] font-semibold px-3 py-1.5 rounded-full transition-colors" style="background:#393937; color:#9b978f; border:1px solid #444442;" aria-label="Usuń kupione">
-                    Wyczyść kupione
-                </button>
-            </div>
-            <button type="button" id="sl-generate" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#393937; color:#ddd6ca; border:1px solid #444442;">
-                <i class="fas fa-wand-magic-sparkles text-[12px]" style="color:rgb(var(--accent-rgb));"></i>
-                Generuj braki z planera
-            </button>
-        </div>
+function todayKey() { return dateKey(new Date()); }
 
-        <!-- ── scrollable list ── -->
-        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-2 pb-24" style="background:#2d2e2b !important;">
-            <div id="sl-board"></div>
-        </div>
-    </div>`;
+function getDefaultSelectedDays() {
+    const today = startOfDay(new Date());
+    return Array.from({ length: 7 }, (_, i) => dateKey(addDays(today, i)));
 }
 
-/* ══════════════════════ RENDERING ══════════════════════ */
-
-function getKitchenItems() {
-    const state = loadShoppingState();
-    const list = state.lists.find((l) => l.id === KITCHEN_LIST_ID && l.type === 'kitchen');
-    return list ? /** @type {import('../services/pantryShopping.js').KitchenShoppingItem[]} */ (list.items) : [];
+function formatRangePill(selectedDays) {
+    if (selectedDays.length === 0) return 'Wybierz dni';
+    const sorted = [...selectedDays].sort();
+    const fmt = (dk) => {
+        const d = new Date(dk + 'T00:00:00');
+        return `${DAY_NAMES_SHORT[d.getDay()]} ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
+    };
+    if (sorted.length === 1) return fmt(sorted[0]);
+    return `${fmt(sorted[0])} – ${fmt(sorted[sorted.length - 1])}`;
 }
 
-function groupItemsByCategory(items) {
-    /** @type {Map<string, typeof items>} */
+/* ── computed data ── */
+
+function computeActiveItems() {
+    const selectedDays = getSelectedDays();
+    if (selectedDays.length === 0) return [];
+    const plans = loadPlans();
+    const needLines = aggregateSelectedDaysIngredientNeed(plans, selectedDays);
+    return computeShortfalls(needLines, loadPantry());
+}
+
+function getSessionLog() {
+    return loadShoppingSession().sessionLog;
+}
+
+function groupByCategory(items) {
     const groups = new Map();
     for (const item of items) {
         const cat = item.category || 'inne';
@@ -92,195 +114,517 @@ function groupItemsByCategory(items) {
         .map((cat) => ({ cat, items: groups.get(cat) }));
 }
 
-function itemRowHtml(item) {
-    const def = INGREDIENTS[item.ingredientId];
-    const icon = def ? (CATEGORY_ICONS[def.category] || 'fa-jar') : 'fa-jar';
-    const image = def?.image;
-    const checked = item.checked;
+/* ══════════════════════ HTML SHELL ══════════════════════ */
 
-    const mediaFit = image && image.endsWith('.svg') ? 'object-contain' : 'object-cover';
+export function getShoppingListHTML() {
+    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 ── -->
+        <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 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">
+                    <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-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
+                </button>
+
+                <!-- popup calendar (absolute, overlays content above) -->
+                ${createCalendarPopoverHTML({
+        id: 'sl-calendar-popup',
+        calendarHTML: createSwipePopoverCalendarHTML({
+        idPrefix: 'sl-cal',
+        weekdays: WEEKDAY_SHORT,
+    }),
+        popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
+    })}
+        </div>
+        </div>
+
+        <!-- ── scrollable list ── -->
+        <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>
+
+        <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-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-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
+                    <i class="fas fa-check" aria-hidden="true"></i>
+                    <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>
+
+                <!-- 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>`;
+}
+
+/* ══════════════════════ CALENDAR ══════════════════════ */
+
+function initShoppingCalendar() {
+    shoppingCalendar = initSwipePopoverCalendar({
+        idPrefix: 'sl-cal',
+        selectionMode: 'range',
+        monthsLong: MONTHS_LONG,
+        getMonthAnchor: () => calendarMonth,
+        setMonthAnchor: (nextMonth) => {
+            calendarMonth = startOfMonth(nextMonth);
+        },
+        getSelectionKeys: () => getSelectedDays(),
+        onSelectionCommit: (rangeKeys) => {
+            setSelectedDays(rangeKeys);
+            expandedIngredientId = null;
+            updatePillLabel();
+            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({
+        popupId: 'sl-calendar-popup',
+        viewportId: 'sl-cal-viewport',
+        triggerId: 'sl-range-pill',
+        chevronId: 'sl-range-chevron',
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
+        getCalendar: () => shoppingCalendar,
+        hideViewportDuringLayout: true,
+    });
+}
+
+function updatePillLabel() {
+    const el = document.getElementById('sl-range-label');
+    if (el) el.textContent = formatRangePill(getSelectedDays());
+}
+
+function openCalendar() {
+    if (boughtPopupOpen) closeBoughtPopup();
+    calendarOpen = true;
+    calendarMonth = startOfMonth(new Date());
+    shoppingCalendarPopover?.open();
+}
+
+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 (btn) {
+        btn.style.background = 'rgb(var(--sunken-rgb))';
+        btn.style.borderColor = 'rgb(var(--border-input-rgb))';
+    }
+}
+
+function closeBoughtPopup() {
+    boughtPopupOpen = false;
+    const popup = document.getElementById('sl-bought-popup');
+    const btn = document.getElementById('sl-bought-btn');
+    if (popup) {
+        popup.style.pointerEvents = 'none';
+        popup.style.opacity = '0';
+        popup.style.transform = 'translateY(6px) scale(0.98)';
+    }
+    if (btn) {
+        btn.style.background = 'rgb(var(--card-rgb))';
+        btn.style.borderColor = 'rgb(var(--border-card-rgb))';
+    }
+}
+
+function toggleBoughtPopup() {
+    boughtPopupOpen ? closeBoughtPopup() : openBoughtPopup();
+}
+
+/* ══════════════════════ ITEM ROWS ══════════════════════ */
+
+function activeItemHtml(item) {
+    const def = INGREDIENTS[item.ingredientId];
+    const icon = CATEGORY_ICONS[def?.category] || 'fa-jar';
+    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">`
-        : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-xs" style="color:#8f8b84;"></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>`;
+
+    const isExpanded = expandedIngredientId === item.ingredientId;
+    const step = stepForUnit(item.unit);
+    const stepAmt = isExpanded ? expandedAmount : Math.max(step, Math.round(item.shortfall / step) * step);
 
     return `
-    <div class="sl-row flex items-center gap-3 py-2.5 px-3 rounded-xl mb-1.5 transition-all duration-200 ${checked ? 'sl-checked' : ''}" style="background:${checked ? '#2f2f2d' : '#393937'}; border:1px solid ${checked ? '#3a3a38' : '#444442'};" data-id="${esc(item.id)}">
-        <button type="button" class="sl-check shrink-0 w-6 h-6 rounded-full flex items-center justify-center transition-colors" style="background:${checked ? 'rgb(var(--success-rgb))' : 'transparent'}; border:2px solid ${checked ? 'rgb(var(--success-rgb))' : '#6d6c67'};" aria-label="${checked ? 'Oznacz jako niekupione' : 'Oznacz jako kupione'}">
-            ${checked ? '<i class="fas fa-check text-[10px]" style="color:#1a1a1a;"></i>' : ''}
-        </button>
-        ${mediaHtml}
-        <div class="flex-1 min-w-0 ${checked ? 'opacity-40' : ''}">
-            <span class="block text-[13px] font-medium leading-tight truncate ${checked ? 'line-through' : ''}" style="color:#ddd6ca;">${esc(item.name)}</span>
+    <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" style="background:rgb(var(--success-rgb)); opacity:0;">
+            <i class="fas fa-check text-white text-lg"></i>
         </div>
-        <span class="text-[13px] font-semibold tabular-nums shrink-0 ${checked ? 'opacity-40 line-through' : ''}" style="color:#b7ada1;">${esc(formatQty(item.amount))} ${esc(unitLabel(item.unit))}</span>
-        <button type="button" class="sl-remove shrink-0 w-7 h-7 rounded-full flex items-center justify-center transition-colors" style="background:transparent; color:#6d6c67;" aria-label="Usuń">
-            <i class="fas fa-xmark text-xs"></i>
+        <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}
+                <div class="flex-1 min-w-0">
+                    <span class="block text-[13px] font-medium leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</span>
+                </div>
+                <span class="text-[13px] font-semibold tabular-nums shrink-0" style="color:rgb(var(--text-muted-rgb));">${esc(formatQty(item.shortfall))} ${esc(unitLabel(item.unit))}</span>
+                <i class="fas fa-chevron-${isExpanded ? 'up' : 'down'} text-[9px] shrink-0" style="color:rgb(var(--text-subdued-rgb));"></i>
+            </div>
+            <div class="sl-step-row overflow-hidden" data-step-for="${esc(item.ingredientId)}"
+                style="max-height:${isExpanded ? '60px' : '0'}; transition: max-height 0.2s ease;">
+                <div class="flex items-center gap-2 px-3 pb-3">
+                    <button type="button" class="sl-step-minus w-9 h-9 rounded-xl flex items-center justify-center shrink-0 active:scale-95" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" aria-label="Zmniejsz ilość">
+                        <i class="fas fa-minus text-xs"></i>
                     </button>
+                    <div class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));">
+                        <span class="sl-exp-amount text-[14px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(stepAmt))}</span>
+                        <span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(unitLabel(item.unit))}</span>
+                    </div>
+                    <button type="button" class="sl-step-plus w-9 h-9 rounded-xl flex items-center justify-center shrink-0 active:scale-95" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" aria-label="Zwiększ ilość">
+                        <i class="fas fa-plus text-xs"></i>
+                    </button>
+                    <button type="button" class="sl-step-confirm px-3 py-1.5 rounded-lg text-[12px] font-semibold shrink-0 active:scale-95" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Dodaj</button>
+                </div>
+            </div>
+        </div>
     </div>`;
 }
 
+function boughtItemHtml(entry) {
+    const def = INGREDIENTS[entry.ingredientId];
+    const icon = CATEGORY_ICONS[def?.category] || 'fa-jar';
+    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">`
+        : `<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="box-shadow:var(--shadow-card);">
+        <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" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
+            ${mediaHtml}
+            <div class="flex-1 min-w-0">
+                <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] font-semibold tabular-nums shrink-0" style="color:rgb(var(--text-muted-rgb));">${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))}</span>
+        </div>
+    </div>`;
+}
+
+/* ══════════════════════ SWIPE ══════════════════════ */
+
+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) => {
+        startX = e.clientX; startY = e.clientY; dx = 0;
+        tracking = true; decided = false; goingH = false;
+        inner.style.transition = 'none';
+        container.setPointerCapture(e.pointerId);
+    });
+
+    container.addEventListener('pointermove', (e) => {
+        if (!tracking) return;
+        const ddx = e.clientX - startX;
+        const ddy = e.clientY - startY;
+        if (!decided) {
+            if (Math.abs(ddx) < 6 && Math.abs(ddy) < 6) return;
+            decided = true;
+            goingH = Math.abs(ddx) > Math.abs(ddy);
+        }
+        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)`; showBg(bgBuy); }
+        else if (dx < 0 && opts.onLeft) { inner.style.transform = `translateX(${Math.max(dx, -90)}px)`; showBg(bgUndo); }
+    });
+
+    const finish = () => {
+        if (!tracking) return;
+        tracking = false;
+        inner.style.transition = 'transform 0.2s ease';
+        const thr = 65;
+        if (dx > thr && opts.onRight) {
+            inner.style.transform = 'translateX(120%)';
+            setTimeout(opts.onRight, 180);
+        } else if (dx < -thr && opts.onLeft) {
+            inner.style.transform = 'translateX(-120%)';
+            setTimeout(opts.onLeft, 180);
+        } else {
+            inner.style.transform = '';
+            hideBgs();
+        }
+        dx = 0;
+    };
+
+    container.addEventListener('pointerup', finish);
+    container.addEventListener('pointercancel', () => {
+        tracking = false;
+        inner.style.transition = 'transform 0.2s ease';
+        inner.style.transform = '';
+        hideBgs();
+        dx = 0;
+    });
+}
+
+/* ══════════════════════ EXPAND / STEPPER ══════════════════════ */
+
+function toggleExpand(ingredientId, unit, shortfall) {
+    if (expandedIngredientId === ingredientId) {
+        expandedIngredientId = null;
+    } else {
+        expandedIngredientId = ingredientId;
+        const step = stepForUnit(unit);
+        expandedAmount = Math.max(step, Math.round(shortfall / step) * step);
+    }
+    renderBoard();
+}
+
+function updateExpandedAmountDisplay() {
+    const el = document.querySelector(`[data-step-for="${expandedIngredientId}"] .sl-exp-amount`);
+    if (el) el.textContent = formatQty(expandedAmount);
+}
+
+/* ══════════════════════ BUY / UNDO ══════════════════════ */
+
+function buyItem(ingredientId, unit, amount) {
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    addAmountToPantry(ingredientId, undefined, amount);
+    addSessionLogEntry({ ingredientId, name: def.name, addedAmount: amount, unit, category: def.category || 'inne' });
+    expandedIngredientId = null;
+    renderAll();
+    if (typeof window.refreshPantry === 'function') window.refreshPantry();
+}
+
+function undoBoughtEntry(entryId) {
+    const log = getSessionLog();
+    const entry = log.find((e) => e.id === entryId);
+    if (!entry) return;
+    subtractFromPantry(entry.ingredientId, entry.productId, entry.addedAmount);
+    removeSessionLogEntry(entryId);
+    renderAll();
+    if (typeof window.refreshPantry === 'function') window.refreshPantry();
+    showAppToast('Cofnięto zakup');
+}
+
+/* ══════════════════════ RENDERING ══════════════════════ */
+
+function renderBoughtBadge(count) {
+    const badge = document.getElementById('sl-bought-badge');
+    if (!badge) return;
+    if (count > 0) {
+        badge.textContent = String(count);
+        badge.style.display = 'flex';
+    } else {
+        badge.style.display = 'none';
+    }
+}
+
 function renderBoard() {
     const root = document.getElementById('sl-board');
     if (!root) return;
 
-    const items = getKitchenItems();
-
-    if (items.length === 0) {
+    const selectedDays = getSelectedDays();
+    if (selectedDays.length === 0) {
         root.innerHTML = `
         <div class="flex flex-col items-center justify-center py-16 text-center">
-            <div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-4" style="background:#393937;">
-                <i class="fas fa-cart-shopping text-xl" style="color:#6d6c67;"></i>
+            <div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-4" style="background:rgb(var(--card-rgb));">
+                <i class="fas fa-calendar-days text-xl" style="color:rgb(var(--text-subdued-rgb));"></i>
             </div>
-            <p class="text-[14px] font-semibold mb-1" style="color:#ddd6ca;">Lista jest pusta</p>
-            <p class="text-[12px] max-w-[14rem]" style="color:#9b978f;">Kliknij „Generuj braki z planera" aby dodać składniki na bieżący tydzień.</p>
+            <p class="text-[14px] font-semibold mb-1" style="color:rgb(var(--text-body-rgb));">Wybierz dni</p>
+            <p class="text-[12px] max-w-[14rem]" style="color:rgb(var(--text-dim-rgb));">Otwórz kalendarz i zaznacz dni, na które chcesz zrobić zakupy.</p>
         </div>`;
         return;
     }
 
-    const groups = groupItemsByCategory(items);
-    const html = groups.map(({ cat, items: catItems }) => {
-        const icon = CATEGORY_ICONS[cat] || 'fa-jar';
-        const uncheckedCount = catItems.filter((i) => !i.checked).length;
-        return `
-        <section class="mb-4">
-            <div class="flex items-center gap-1.5 mb-2 px-1">
-                <i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
-                <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
-                <span class="text-[10px]" style="color:#6d6c67;">${uncheckedCount}/${catItems.length}</span>
+    const activeItems = computeActiveItems();
+
+    if (activeItems.length === 0) {
+        root.innerHTML = `
+        <div class="flex flex-col items-center justify-center py-16 text-center">
+            <div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-4" style="background:rgb(var(--card-rgb));">
+                <i class="fas fa-check text-xl" style="color:rgb(var(--success-rgb));"></i>
             </div>
-            ${catItems.map((item) => itemRowHtml(item)).join('')}
-        </section>`;
-    }).join('');
-
-    root.innerHTML = html;
-    bindRowEvents(root);
-}
-
-/* ══════════════════════ EVENTS ══════════════════════ */
-
-function bindRowEvents(root) {
-    root.querySelectorAll('.sl-row').forEach((row) => {
-        const id = row.dataset.id;
-
-        row.querySelector('.sl-check')?.addEventListener('click', () => {
-            handleToggle(id);
-        });
-
-        row.querySelector('.sl-remove')?.addEventListener('click', () => {
-            removeItemFromList(KITCHEN_LIST_ID, id);
-            renderBoard();
-            updateBadge();
-        });
-    });
-}
-
-function handleToggle(itemId) {
-    const state = loadShoppingState();
-    const list = state.lists.find((l) => l.id === KITCHEN_LIST_ID);
-    if (!list) return;
-    const item = list.items.find((i) => i.id === itemId);
-    if (!item) return;
-
-    const wasChecked = item.checked;
-    item.checked = !wasChecked;
-    saveShoppingState(state);
-
-    if (!wasChecked) {
-        // Just checked → apply to pantry
-        applyItemToPantry(item);
-    }
-
-    renderBoard();
-    updateBadge();
-
-    if (typeof window.refreshPantry === 'function') window.refreshPantry();
-}
-
-function applyItemToPantry(item) {
-    const def = INGREDIENTS[item.ingredientId];
-    if (!def) return;
-
-    const pantry = loadPantry();
-
-    if (item.productId) {
-        let val = pantry[item.ingredientId];
-        if (!val || typeof val === 'number') {
-            val = { items: [], _total: 0 };
-            pantry[item.ingredientId] = val;
-        }
-        const idx = val.items.findIndex((i) => i.productId === item.productId);
-        if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + item.amount) * 1000) / 1000;
-        else val.items.push({ productId: item.productId, qty: Math.round(item.amount * 1000) / 1000 });
-        val._total = Math.round(val.items.reduce((s, i) => s + i.qty, 0) * 1000) / 1000;
-    } else {
-        const cur = typeof pantry[item.ingredientId] === 'number' ? pantry[item.ingredientId] : 0;
-        pantry[item.ingredientId] = Math.round((cur + item.amount) * 1000) / 1000;
-    }
-
-    savePantry(pantry);
-}
-
-function handleGenerate() {
-    const plans = loadPlans();
-    const weekStart = startOfWeekMonday(new Date());
-    const needLines = aggregateWeekIngredientNeed(plans, weekStart);
-    const pantry = loadPantry();
-    const shortfalls = computeShortfalls(needLines, pantry);
-
-    if (shortfalls.length === 0) {
-        showAppToast('Wszystko masz w spiżarni!');
+            <p class="text-[14px] font-semibold mb-1" style="color:rgb(var(--text-body-rgb));">Wszystko masz</p>
+            <p class="text-[12px] max-w-[14rem]" style="color:rgb(var(--text-dim-rgb));">Spiżarnia pokrywa zapotrzebowanie na wybrane dni.</p>
+        </div>`;
         return;
     }
 
-    const lines = shortfalls.map((s) => ({
-        ingredientId: s.ingredientId,
-        amount: s.shortfall,
-        unit: s.unit,
-        name: s.name,
-        category: s.category,
-        sourceNote: 'Z planera',
-    }));
+    const groups = groupByCategory(activeItems);
+    root.innerHTML = groups.map(({ cat, items: catItems }) => {
+        const icon = CATEGORY_ICONS[cat] || 'fa-jar';
+        return `
+        <section class="mb-4">
+            <div class="flex items-center gap-1.5 mb-2 px-1">
+                <i class="fas ${icon} text-[10px]" style="color:rgb(var(--text-dim-rgb));"></i>
+                <p class="text-[10px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">${esc(categoryLabel(cat))}</p>
+                <span class="text-[10px]" style="color:rgb(var(--text-subdued-rgb));">${catItems.length}</span>
+            </div>
+            ${catItems.map((item) => activeItemHtml(item)).join('')}
+        </section>`;
+    }).join('');
 
-    addOrMergeShoppingLines(lines, KITCHEN_LIST_ID);
+    bindActiveRowEvents(root, activeItems);
+}
+
+function renderBought() {
+    const sessionLog = getSessionLog();
+    const countEl = document.getElementById('sl-bought-popup-count');
+    const list = document.getElementById('sl-bought-list');
+    if (!list || !countEl) return;
+
+    countEl.textContent = String(sessionLog.length);
+
+    if (sessionLog.length === 0) {
+        list.innerHTML = `<div class="py-6 text-center text-[12px]" style="color:rgb(var(--text-dim-rgb));">Brak kupionych</div>`;
+        return;
+    }
+
+    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;
+        if (!entryId) return;
+        attachSwipe(wrap, { onLeft: () => undoBoughtEntry(entryId) });
+    });
+}
+
+function renderAll() {
+    const sessionLog = getSessionLog();
+    renderBoughtBadge(sessionLog.length);
     renderBoard();
-    updateBadge();
-    showAppToast(`Dodano ${shortfalls.length} pozycji z planera`);
+    renderBought();
 }
 
-function handleClearChecked() {
-    clearCheckedInList(KITCHEN_LIST_ID);
-    renderBoard();
-    updateBadge();
-}
+/* ══════════════════════ ACTIVE ROW EVENTS ══════════════════════ */
 
-/* ══════════════════════ BADGE ══════════════════════ */
+function bindActiveRowEvents(root, activeItems) {
+    root.querySelectorAll('.sl-swipe-wrap').forEach((wrap) => {
+        const inner = wrap.querySelector('.sl-swipe-inner');
+        const ingredientId = inner?.dataset.id;
+        const unit = inner?.dataset.unit;
+        const shortfall = parseFloat(inner?.dataset.shortfall || '0');
+        if (!ingredientId) return;
 
-function updateBadge() {
-    const items = getKitchenItems();
-    const uncheckedCount = items.filter((i) => !i.checked).length;
-    const badge = document.getElementById('nav-shopping-badge');
-    if (!badge) return;
-    if (uncheckedCount > 0) {
-        badge.textContent = String(uncheckedCount > 99 ? '99+' : uncheckedCount);
-        badge.classList.remove('hidden');
-    } else {
-        badge.classList.add('hidden');
-    }
+        const item = activeItems.find((i) => i.ingredientId === ingredientId);
+        attachSwipe(wrap, { onRight: item ? () => buyItem(item.ingredientId, item.unit, item.shortfall) : undefined });
+
+        inner.querySelector('.sl-item-main')?.addEventListener('click', () => toggleExpand(ingredientId, unit, shortfall));
+
+        inner.querySelector('.sl-step-minus')?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const step = stepForUnit(unit);
+            expandedAmount = Math.max(step, expandedAmount - step);
+            updateExpandedAmountDisplay();
+        });
+
+        inner.querySelector('.sl-step-plus')?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            expandedAmount += stepForUnit(unit);
+            updateExpandedAmountDisplay();
+        });
+
+        inner.querySelector('.sl-step-confirm')?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (expandedAmount > 0) buyItem(ingredientId, unit, expandedAmount);
+        });
+    });
 }
 
 /* ══════════════════════ PUBLIC API ══════════════════════ */
 
 export function refreshShoppingList() {
-    renderBoard();
-    updateBadge();
+    updatePillLabel();
+    renderAll();
+    if (calendarOpen) shoppingCalendar?.render();
 }
 
 export function setupShoppingList() {
-    renderBoard();
-    updateBadge();
+    ensureFilterPopoverStyles();
 
-    document.getElementById('sl-generate')?.addEventListener('click', handleGenerate);
-    document.getElementById('sl-clear-checked')?.addEventListener('click', handleClearChecked);
+    if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
 
+    updatePillLabel();
+    renderAll();
+
+    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) {
+            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-clear-session')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        clearSessionLog();
+        renderAll();
+    });
+
+    window.closeShoppingCalendar = () => closeCalendar();
+    window.closeShoppingBoughtPopup = () => closeBoughtPopup();
     window.refreshShoppingList = refreshShoppingList;
 }