/* =====================================================================
   Paczka 192 -- wybor etapow u Workera.

   Osobny arkusz, a nie dopisek do styles.css, z jednego powodu:
   .pointStatusGrid jest siatka DWUKOLUMNOWA, a od tej paczki w srodku
   stoja naglowki grup i wiersze przyciskow. Naglowek w takiej siatce
   zajmowalby jedna komorke obok przycisku. Przestawiamy wiec sam
   pojemnik na uklad blokowy, a dwie kolumny schodza o poziom nizej --
   do wiersza grupy. Wyglad samych przyciskow zostaje bez zmian, bo
   regula ".pointStatusGrid button" ze styles.css nadal ich dotyczy.
   ===================================================================== */

#pointStageGrid{display:block}

.stageGroupHeading{
  margin:12px 0 7px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#64748b;
}
.stageGroupHeading:first-child{margin-top:2px}

.stageGroupRow{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Kolor kwadracika mowi stan bez czytania: szary -- do zrobienia,
   niebieski -- zaznaczony teraz, zielony -- juz zatwierdzony. */
#pointStageGrid .statusIcon{background:#cbd5e1}
#pointStageGrid button.selected .statusIcon{background:#2563eb}
#pointStageGrid button.done .statusIcon{background:#16a34a}

/* Etap juz zatwierdzony: widoczny, ale nie do klikniecia. Zostaje na
   ekranie CELOWO -- Worker ma widziec, co jest zrobione, a nie tylko to,
   co zostalo. */
#pointStageGrid button.done{
  background:#f8fafc;color:#64748b;cursor:default;
  border-style:dashed;
}

/* Ostrzezenie o pominietym etapie. Zolte, nie czerwone: to nie jest
   blad i nic nie blokuje -- pominiecie bywa swiadome i ma prawo przejsc
   dalej. Robert: "z jednej strony jest a z drugiej strony nie ma i to
   jest swiadome zeby pojsc z progresem do przodu". */
.pointStageWarning{
  margin:10px 0 0;padding:9px 11px;
  border-radius:10px;border:1px solid #fcd34d;background:#fffbeb;
  color:#92400e;font-size:12.5px;line-height:1.4;
}

/* Tryb kompaktowy portalu (uiOrganizer) sciska przyciski przez reguly
   z !important w assets/pro-design-6.96.css. Tamte celuja w sam
   .pointStatusGrid, wiec wiersz grupy musi dostac to samo osobno. */
.uiOrganizerWorker .stageGroupRow{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.uiOrganizerWorker .stageGroupHeading{margin:8px 0 5px;font-size:10px}

/* =====================================================================
   Paczka 193 -- kolory etapow.

   Kolor mowi, KTORY to etap; stan idzie osobnym kanalem. Inaczej przy
   trzynastu etapach na WAP-ie nie dalo by sie odczytac jednego ani
   drugiego. Paleta i jej uzasadnienie: naglowek w core/Stages.php.
   ===================================================================== */

/* Do zrobienia: sam pierscien w kolorze etapu. Widac, ktory to etap,
   i widac, ze jeszcze go nie ma. */
#pointStageGrid .statusIcon{
  background:transparent;
  box-shadow:inset 0 0 0 3px var(--stageColour,#cbd5e1);
}

/* Zaznaczony teraz: wypelniony. */
#pointStageGrid button.selected .statusIcon{
  background:var(--stageColour,#2563eb);
  box-shadow:inset 0 0 0 1px #0002;
}

/* Zatwierdzony: wypelniony i z ptaszkiem. Ptaszek jest wazniejszy niz
   kolor -- "czy to zrobione" musi dac sie odczytac bez wpatrywania sie
   w odcien, takze komus, kto slabo rozroznia kolory. */
#pointStageGrid button.done .statusIcon{
  background:var(--stageColour,#16a34a);
  box-shadow:inset 0 0 0 1px #0002;
  position:relative;
}
#pointStageGrid button.done .statusIcon::after{
  content:"";
  position:absolute;left:34%;top:14%;
  width:26%;height:52%;
  border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(42deg);
}
/* Na jasnym tle (containment, zolty) bialy ptaszek by znikal. Klase
   dokleja app.js, licząc jasnosc koloru -- nie ma tu listy kolorow,
   ktora trzeba by pamietac przy kazdym nowym etapie. */
#pointStageGrid button.done .statusIcon.lightStage::after{border-color:#334155}

/* =====================================================================
   Punkt na rysunku: ROZOWY, gdy komplet etapow jest zatwierdzony.

   Robert: "na sam koniec (po spelnieniu wszystkich warunkow) chce
   widziec rozowy". Stoi PO regulach statusu w styles.css, wiec wygrywa
   -- i o to chodzi: komplet jest wazniejszy niz to, ktory etap byl
   ostatnio zatwierdzony.
   ===================================================================== */
.point.complete{
  background:#ec4899a8;
  box-shadow:inset 0 0 0 1px #be185d;
}
/* Zgloszenie czekajace na zatwierdzenie ma nadal wygladac na czekajace,
   nawet jesli reszta etapow jest juz kompletna. */
.point.complete.pending{background:#ec48996b}

/* =====================================================================
   Paczka 197 (Etap 2a) -- zgloszenie wielu punktow naraz.

   Przycisk w pasku narzedzi wyglada jak "Layers" obok (te same wartosci,
   co w assets/staff-nav.css), a na waskim telefonie tak samo chowa napis
   i zostawia sama ikone.
   ===================================================================== */
.toolbar .workerBatchButton{
  display:flex!important;align-items:center!important;gap:7px!important;
  min-height:42px!important;padding:5px 11px 5px 6px!important;
  border:1px solid var(--nav-border,#dbe3ee)!important;border-radius:10px!important;
  background:#fff!important;color:var(--nav-ink,#172238)!important;
  font-size:12px!important;font-weight:700!important;
}
.toolbar .workerBatchButton .workerItemIcon{width:26px!important;height:26px!important;font-size:13px!important}
/* Wlaczony tryb musi byc widoczny z daleka -- w nim dotkniecie punktu
   NIE otwiera jego okna, tylko go zaznacza. Bez wyraznego sygnalu ktos
   zdziwi sie, ze "punkt przestal sie otwierac". */
.toolbar .workerBatchButton[aria-pressed="true"]{
  border-color:#be185d!important;background:#fdf2f8!important;color:#9d174d!important;
}
@media(max-width:600px){
  .toolbar .workerBatchButton{flex:0 0 auto!important;padding:5px!important;gap:0!important}
  .toolbar .workerBatchButton>span:not(.workerItemIcon){display:none!important}
  .toolbar .workerBatchButton .workerItemIcon{width:24px!important;height:24px!important}
}

/* Pasek na dole ekranu. Stoi NAD rysunkiem, ale nie zaslania go calego:
   ograniczona wysokosc i wlasne przewijanie, bo przy WAP-ach bywa
   trzynascie etapow, a rysunek ma byc dalej widac. */
.workerBatchBar{
  position:fixed;left:8px;right:8px;bottom:8px;z-index:60;
  display:grid;gap:9px;
  max-height:52vh;overflow:auto;overscroll-behavior:contain;
  padding:11px 12px 12px;
  border:1px solid #fbcfe8;border-radius:16px;
  background:#fff;box-shadow:0 12px 34px #0f172a33;
}
.workerBatchBar[hidden]{display:none}
.workerBatchHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.workerBatchHead>div:first-child{display:grid;gap:2px}
.workerBatchHead b{font-size:14px;color:#9d174d}
.workerBatchHead span{font-size:12px;color:#64748b}
.workerBatchActions{display:flex;gap:6px}
.workerBatchActions button{min-height:38px;padding:6px 11px}

.workerBatchStages{display:grid;gap:8px}
.workerBatchGroup>span{
  display:block;margin-bottom:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;
}
.workerBatchGroup>div{display:flex;flex-wrap:wrap;gap:6px}

/* Wybrany etap WYPELNIONY swoim kolorem, niewybrany pusty -- tak samo
   jak u kadry przy odhaczaniu (Paczka 196). Liczba mowi, ilu
   z zaznaczonych punktow ten etap naprawde dotyczy. */
.workerBatchStage{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:5px 11px;
  border:1px dashed #cbd5e1;border-radius:999px;background:#fff;
  color:#475569;font-size:12.5px;font-weight:800;white-space:nowrap;
}
.workerBatchStage>b{min-width:18px;padding:1px 5px;border-radius:999px;background:#0f172a14;font-size:11px}
.workerBatchStage.chosen{border:1px solid #0f172a26;background:var(--stageColour,#e2e8f0);color:#fff}
.workerBatchStage.chosen>b{background:#0f172a33}
.workerBatchStage.chosen.lightStage{color:#172238}

.workerBatchFill{
  min-height:44px;border:1px solid #fbcfe8;border-radius:12px;
  background:#fdf2f8;color:#9d174d;font-weight:800;
}
.workerBatchFill:disabled{opacity:.55}

/* Zaznaczony punkt na rysunku. Obwodka, a nie kolor tla -- kolor tla
   mowi o stanie punktu (w tym rozowy "skonczony") i ma zostac czytelny. */
body.workerBatchMode .point{cursor:copy}
.point.batchSelected{
  z-index:6;
  outline:3px solid #be185d!important;outline-offset:2px!important;
  box-shadow:0 0 0 2px #fff,0 0 0 5px #be185d88!important;
}
/* Zeby dolny pasek nie przykryl punktow na samym dole rysunku. */
body.workerBatchMode main{padding-bottom:46vh}