---
phase: 53-mobile-status-panel-toggle
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - resources/views/components/order-status-panel.php
  - resources/scss/app.scss
  - public/assets/css/app.css
autonomous: false
---

<objective>
## Goal
Na mobile (<=768px) panel statusow na stronie listy zamowien powinien byc domyslnie zwinity i rozwijany po kliknieciu w naglowek. Na desktop bez zmian.

## Purpose
Panel statusow zajmuje duzo miejsca na ekranie mobilnym, przesuwajac liste zamowien ponizej fold. Uzytkownik musi scrollowac, zeby zobaczyc zamowienia. Zwiniecie panelu daje natychmiastowy dostep do listy.

## Output
- Panel statusow zamkniety domyslnie na mobile
- Klikniecie w naglowek "Statusy" rozwija/zwija panel
- Strzalka wskazujaca stan (rozwiniety/zwiniety)
- Na desktop panel zawsze widoczny bez zmian
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/STATE.md

## Source Files
@resources/views/components/order-status-panel.php
@resources/scss/app.scss
</context>

<acceptance_criteria>

## AC-1: Panel zwiniety domyslnie na mobile
```gherkin
Given urzadzenie z szerokosc viewportu <= 768px
When strona /orders/list sie laduje
Then panel statusow jest zwiniety (widoczny tylko naglowek "Statusy")
And lista zamowien jest widoczna bez scrollowania
```

## AC-2: Rozwijanie i zwijanie panelu
```gherkin
Given panel statusow na mobile
When uzytkownik klika naglowek "Statusy"
Then panel rozwija sie pokazujac drzewko statusow
And strzalka obraca sie wskazujac stan otwarty
When uzytkownik klika ponownie
Then panel zwija sie do samego naglowka
```

## AC-3: Desktop bez zmian
```gherkin
Given urzadzenie z szerokosc viewportu > 768px
When strona /orders/list sie laduje
Then panel statusow jest zawsze widoczny (jak dotychczas)
And naglowek nie reaguje na klikniecie jako toggle
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Zamiana order-status-panel na details/summary</name>
  <files>resources/views/components/order-status-panel.php</files>
  <action>
    Zamien strukture HTML panelu na natywny element `<details>`:

    1. Zamien `<aside class="card order-statuses-side">` na `<details class="card order-statuses-side" id="js-status-panel">`
    2. Zamien `<div class="order-statuses-side__title">` na `<summary class="order-statuses-side__title">`
       - Dodaj SVG strzalke (chevron down, 14x14) na koncu summary: `<svg class="order-statuses-side__arrow" ...>`
       - Zamknij `</summary>` zamiast `</div>`
    3. Opakuj cala zawartosc grup statusow (petla foreach) w `<div class="order-statuses-side__body">`
    4. Zamknij `</details>` zamiast `</aside>`

    Struktura wynikowa:
    ```
    <details class="card order-statuses-side" id="js-status-panel">
      <summary class="order-statuses-side__title">
        Statusy
        <svg class="order-statuses-side__arrow" ...chevron-down.../>
      </summary>
      <div class="order-statuses-side__body">
        ...grupy statusow...
      </div>
    </details>
    ```

    Dodaj na koncu pliku maly blok `<script>` (inline):
    - Na mobile (matchMedia 768px) panel domyslnie zamkniety (brak atrybutu open)
    - Na desktop: dodaj atrybut `open` i zablokuj zamykanie (preventDefault na summary click)
    - Listener na matchMedia change: reset stanu przy resize

    Unikaj: zewnetrznych plikow JS, jQuery
  </action>
  <verify>Otworz /orders/list — panel renderuje sie jako details/summary z poprawna struktura HTML</verify>
  <done>AC-1, AC-2, AC-3 satisfied (struktura HTML)</done>
</task>

<task type="auto">
  <name>Task 2: SCSS dla toggle panelu statusow</name>
  <files>resources/scss/app.scss</files>
  <action>
    1. Dodaj style do istniejacego bloku `.order-statuses-side`:

    `.order-statuses-side__title` (jako summary):
    - cursor: pointer na mobile
    - display: flex, align-items: center, justify-content: space-between
    - list-style: none (usun domyslny marker details)
    - &::-webkit-details-marker { display: none }

    `.order-statuses-side__arrow`:
    - width: 14px, height: 14px
    - transition: transform 0.2s ease
    - opacity: 0.5
    - Ukryj na desktop (display: none)
    - Pokaz na mobile (display: block w media query)

    `details[open] .order-statuses-side__arrow`:
    - transform: rotate(180deg)

    `.order-statuses-side__body`:
    - Brak dodatkowych stylow (flow domyslny)

    2. W media query `@media (max-width: 768px)`:
    Dodaj:
    ```scss
    .order-statuses-side__arrow {
      display: block;
    }
    ```

    Unikaj: zmian w istniejacych stylach desktop panelu
  </action>
  <verify>Na mobile strzalka widoczna, na desktop ukryta. Klikniecie toggle'uje panel.</verify>
  <done>AC-1, AC-2, AC-3 satisfied (style)</done>
</task>

<task type="auto">
  <name>Task 3: Build CSS</name>
  <files>public/assets/css/app.css</files>
  <action>
    Skompiluj SCSS do CSS: npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map
  </action>
  <verify>Nowe klasy (order-statuses-side__arrow, order-statuses-side__body) obecne w wynikowym CSS</verify>
  <done>Plik CSS aktualny</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Rozwijany/zwijany panel statusow na mobile</what-built>
  <how-to-verify>
    1. Otworz https://orderpro.projectpro.pl/orders/list (lub lokalnie)
    2. Wlacz DevTools > Device Toolbar > 375px
    3. Sprawdz: panel statusow zwiniety, widoczny tylko naglowek "Statusy" ze strzalka
    4. Kliknij "Statusy" — panel rozwija sie, strzalka obraca sie
    5. Kliknij ponownie — panel zwija sie
    6. Przelacz na desktop (> 768px) — panel zawsze widoczny, bez strzalki
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- resources/views/orders/list.php (widok glowny nie wymaga zmian)
- resources/views/layouts/app.php (menu mobilne juz gotowe)
- Logika PHP generowania statusPanel (kontroler/repozytorium)
- Inne komponenty uzytkujace order-status-panel (sprawdzic czy jest reuse)

## SCOPE LIMITS
- Tylko panel statusow na mobile — zadne inne elementy listy zamowien
- Nie zmieniaj wygladu poszczegolnych statusow (kolory, badge, hover)
- Nie dodawaj nowych zaleznosci JS

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Panel zwiniety domyslnie na mobile
- [ ] Klik na naglowek rozwija/zwija panel
- [ ] Strzalka obraca sie przy toggle
- [ ] Desktop: panel zawsze widoczny, strzalka ukryta
- [ ] Brak bledow JS w konsoli
- [ ] Inne strony uzywajace panelu statusow dzialaja poprawnie
</verification>

<success_criteria>
- Wszystkie 3 acceptance criteria spelnione
- Panel nie zajmuje miejsca na mobile gdy zwiniety
- Plynna animacja strzalki (CSS transition)
- Zero regresji na desktop
</success_criteria>

<output>
After completion, create `.paul/phases/53-mobile-status-panel-toggle/53-01-SUMMARY.md`
</output>