/* Harmonogram planu produkcji - wykres kolejek maszyn.
 *
 * SPIS TREŚCI (sekcje w tej kolejności):
 *   pasek narzędzi: przyciski, ostrzeżenie o połączeniu, podziałka, szybki filtr
 *   układ panelu
 *   wiersz, kolumna maszyn i oś
 *   kafelek
 *   linia "teraz"
 *   zawężenia: zaznaczone zlecenie i filtr
 *   pasek narzędzi - układ
 *   przeciąganie i znaczniki kafelka
 *   wąskie kafelki
 *   kolory statusów
 *   pas stanu poprzedniej operacji
 *
 * UWAGA: kolejność reguł w tym pliku ma znaczenie. .schedule-bar.is-dimmed
 * i .schedule-bar.is-downtime mają tę samą wagę, więc o wyniku decyduje to, która stoi
 * niżej. Przestawianie bloków może zmienić wygląd bez zmiany ani jednej reguły.
 *
 * UWAGA DRUGA: UKOŚNE PASKI ZNACZĄ W KAFELKU JEDNĄ RZECZ - przestój maszyny (czerwone
 * tło, sekcja na końcu pliku). Otwarta sesja raportu nosiła kiedyś najpierw drugi wzór
 * w paski, szary, na wypełnieniu, a potem pomarańczowy pasek u dołu wypełnienia
 * (.is-open-session). Oba zniknęły, bo mówiły to samo, co dziś mówi BARWA KAFELKA:
 * żółty znaczy "W trakcie", czyli "sesja otwarta". Przekroczony plan pasków
 * NIE DOSTAJE - niesie go ramka i napis "+N ponad plan"; jako kreskowane tło przykrywał
 * czerwień wstrzymania i wstrzymana operacja wyglądała jak pracująca. Nie przywracaj
 * żadnego z tych wzorów ani paska.
 *
 * UWAGA TRZECIA: KAFELEK MA JEDEN POZIOMY PAS - stan POPRZEDNIEJ operacji zlecenia
 * (::before kafelka, sekcja na końcu pliku). Grubość nosi zmienna
 * --schedule-stripe-px.
 */

/* ========================================================================== */
/* PASEK NARZĘDZI: PRZYCISKI, OSTRZEŻENIE O POŁĄCZENIU, PODZIAŁKA
   Ostrzeżenie zapala markOffline w JS. Układ trzech grup jest niżej, w sekcji
   "pasek narzędzi - układ". */
/* ========================================================================== */

/* Ostrzeżenie o zerwanej rozmowie z serwerem. Wygląd bierze z .disclaimer, czyli z tego
   samego stylu co pozostałe ostrzeżenia w programie, tylko niższe, żeby nie rozpychało
   paska. Reguła z [hidden] jest konieczna: .disclaimer ustawia display, a to bije
   domyślne ukrywanie atrybutem. */
.schedule-offline {
    padding: 5px 10px;
    font-size: 0.9em;
}

.schedule-offline[hidden] {
    display: none;
}

/* Przełącznik podziałki nad wykresem. Zmiana działki nie odpytuje serwera -
   paski niosą sekundy, a piksele przelicza production_schedule_controller. */
.schedule-scales {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Flaga "Automatyczne odświeżanie" przy przycisku "Teraz". Kreska "teraz" stoi
   nieruchomo w zerze osi, a dane są z chwili wczytania - ta flaga jest jedyną drogą
   do tego, żeby ekran sam się aktualizował. Kwadracik i napis w jednej linii,
   bo pasek narzędzi jest jednowierszowy. Cała etykieta jest klikalna. */
.schedule-autorefresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--color-font-light);
    cursor: pointer;
}

.schedule-scale {
    padding: 2px 10px;
    border-radius: var(--button-radius);
}

.schedule-scale.is-active {
    background: var(--color-background-light);
    color: var(--color-font);
    font-weight: bold;
}

/* Szybki filtr - sam znaczek, bez napisu. Miar nie ustawiamy: przycisk ma być co do piksela
   taki sam jak sąsiedni "Wyczyść", więc bierze padding i obwódkę z .button-link. Napis
   i tak siedzi w dymku. */
.schedule-quick-filter.is-active {
    background: var(--color-background-light);
    border-color: var(--color-button);
}

/* Znaczek: mały kafelek z pasem u góry, czyli dokładnie to, co szybki filtr zostawia.
   Barwy pasa zmiennymi z sekcji "pas stanu poprzedniej operacji" - znaczek i pas nie mogą
   się rozjechać. Ramka neutralna, bo pas jest tu jedynym komunikatem. */
.schedule-quick-filter::before {
    content: "";
    width: 18px;
    height: 14px;
    border: 1px solid var(--color-gray);
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--schedule-prev-ready) 0%,
        var(--schedule-prev-ready) 25%,
        var(--schedule-prev-started) 25%,
        var(--schedule-prev-started) 50%,
        var(--schedule-prev-running) 50%,
        var(--schedule-prev-running) 75%,
        var(--schedule-prev-held) 75%,
        var(--schedule-prev-held) 100%) top / 100% 4px no-repeat,
        white;
}


/* ========================================================================== */
/* UKŁAD PANELU
   Wysokość wykresu wynika z liczby maszyn - zmienną --schedule-rows podaje widok. */
/* ========================================================================== */

/* Ramka turbo (.bottom-main-content) ma wysokość z siatki strony i overflow: hidden.
   Panel bierze z niej wszystko, co zostało, i jest kolumną, która umie się skurczyć -
   bez tego przy niższym oknie dolna krawędź wykresu schodzi pod obcięcie razem
   z poziomym paskiem przewijania. */
.schedule-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Gdy maszyn jest więcej, niż mieści się w oknie, kurczyć ma się wyłącznie wykres.
   Bez tego flex rozdziela brakujące piksele proporcjonalnie i pasek narzędzi też dostaje
   swoją część, czyli robi się odrobinę niższy niż na pozostałych zakładkach. */
.schedule-panel > .above-table-div {
    flex: 0 0 auto;
}

.schedule {
    --schedule-col-width: 190px;
    --schedule-row-height: 96px;
    --schedule-head-height: 32px;

    position: relative;
    overflow: auto;
    /* Bez tego Chrome przechwytuje poziomy gest, gdy oś dojdzie do końca, i zamienia go
       na nawigację: przeskok karty albo cofnięcie strony. Przy wykresie, po którym jeździ
       się w bok cały czas, zdarza się to co chwilę. "contain" trzyma gest w środku
       wykresu i wyłącza samą nawigację gestem na tym elemencie. */
    overscroll-behavior-x: contain;
    /* Wysokość z liczby maszyn gniazda, którą widok podaje zmienną: małe gniazdo kończy się
       pod ostatnim wierszem, zamiast rozciągać się na całe okno. Gdy maszyn jest więcej,
       niż mieści się w ramce, flex-shrink docina wykres do okna i reszta schodzi pod
       pionowe przewijanie - bez sztywnego limitu wierszy.

       Te 18 px to zapas na poziomy pasek przewijania. W systemach, gdzie pasek zabiera
       miejsce (nie na macOS), bez zapasu odgryzałby kawałek ostatniego wiersza
       i doskakiwałby do tego pionowy pasek na kilkanaście pikseli. */
    height: calc(var(--schedule-head-height)
                 + var(--schedule-rows, 8) * var(--schedule-row-height)
                 + 18px);
    flex: 0 1 auto;
    min-height: 0;
    background: white;
}

/* ========================================================================== */
/* WIERSZ, KOLUMNA MASZYN I OŚ
   Kolumna maszyn i nagłówek osi są przyklejone. Warstwy opisane przy .schedule-machine-col. */
/* ========================================================================== */
/* Wiersz musi być szeroki na tyle, ile jego zawartość. Domyślnie blok bierze szerokość
   okna, a oś jest od niego dużo szersza - wtedy kreska rozdzielająca maszyny urywa się

   przy pierwszym przewinięciu w prawo. */
.schedule-row {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    height: var(--schedule-row-height);
    border-bottom: 1px solid var(--color-gray);
    background: white;
}

.schedule-head {
    position: sticky;
    top: 0;
    z-index: 6;
    height: var(--schedule-head-height);
    color: var(--color-font-light);
}

/* Pierwsza kolumna zostaje na miejscu przy przewijaniu osi w bok */
/* Warstwy w kontenerze: kafelki 0, linia "teraz" 2, przeciągany kafelek 3,
   bieżące trafienie filtra 4, kolumna maszyn 5, nagłówek osi 6. Bez tego linia "teraz"
   wychodziła na kolumnę maszyn, bo obie miały tę samą warstwę, a tor jest w kodzie
   po kolumnie. */
.schedule-machine-col {
    position: sticky;
    left: 0;
    z-index: 5;
    flex: 0 0 var(--schedule-col-width);
    width: var(--schedule-col-width);
    display: flex;
    /* Kolumna, bo w widoku zlecenia pod nazwą maszyny stoi jeszcze podpis
       z gniazdem i numerami operacji. Przy jednej linii wychodzi na to samo. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 12px;
    background: white;
    border-right: 1px solid var(--color-gray);
}

.schedule-head .schedule-machine-col {
    z-index: 7;
}

/* Podpis pod nazwą maszyny: z jakiego jest gniazda i które operacje zlecenia na niej
   stoją. Tylko w widoku zlecenia - w gnieździe wszystkie wiersze są z tego samego
   gniazda i nie ma czego dopisywać. */
.schedule-machine-note {
    max-width: 100%;
    font-size: 12px;
    color: var(--color-font-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Szerokość osi jest ta sama dla nagłówka i wszystkich torów, więc kontroler wpisuje ją
   raz na panelu jako zmienną, a nie w każdy element z osobna. */
.schedule-axis,
.schedule-track {
    position: relative;
    flex: 0 0 auto;
    width: var(--schedule-total-px);
}

/* Z kontrolera przychodzi stylem inline samo przesunięcie działki - reszta jest tutaj. */
.schedule-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 6px;
    font-size: 12px;
    white-space: nowrap;
    border-left: 1px solid var(--color-gray);
}


/* ========================================================================== */
/* KAFELEK
   Geometrię (pozycja, szerokość) ustawia JS stylem inline - powód opisany przy .schedule-bar. */
/* ========================================================================== */
.schedule-bar {
    overflow: hidden;
    padding: 4px 8px;
    border: 1px solid var(--color-gray-2);
    border-radius: 3px;
    background: var(--color-background);
    /* Układ odniesienia dla wypełnienia (.schedule-bar-fill) i pasa stanu poprzedniej
       operacji (::before) - oba stoją na kafelku absolutem. Kiedyś przychodziło tu
       ukradkiem z table.css, z reguły div[title], bo kafelek nosi dymek. */
    position: relative;
}

.schedule-bar:hover {
    border-color: var(--color-font);
}

.schedule-bar-line {
    /* nad wypełnieniem i ogonem przekroczenia */
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    align-items: baseline;
    white-space: nowrap;
    font-size: 13px;
    /* Cztery linie muszą zmieścić się w 80 px kafelka razem z paddingiem */
    line-height: 17px;
}

.schedule-bar-line a {
    font-size: 13px;
}

.schedule-bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-bar-icons {
    align-items: center;
    gap: 6px;
}

.schedule-bar-icons > div {
    display: flex;
    align-items: center;
}

.schedule-bar-icons img {
    height: 16px;
    width: auto;
}

/* Przerwy w sekwencji zlecenia. Minus, czyli nakładanie się operacji, na czerwono. */
.schedule-bar-gaps {
    color: var(--color-font-light);
    font-size: 12px;
    gap: 12px;
}

.schedule-gap {
    font-size: 12px;
}

.schedule-gap-overlap {
    color: var(--color-red);
    font-weight: bold;
}

/* Kreska zamiast liczby: w zleceniu nie ma operacji, od której tę przerwę liczyć.
   Przygaszona, bo stoi tuż przy strzałce i w pełnej czerni czytałaby się jak minus
   przy liczbie, która się nie wczytała. */
.schedule-gap-none {
    color: var(--color-gray-2);
}

/* Wypełnienie: jaka część planowanego czasu jest już zaraportowana. Szerokość w procentach
   podaje serwer, więc zmiana podziałki niczego tu nie przelicza. */
.schedule-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(17, 24, 39, 0.12);
    pointer-events: none;
}

/* Przekroczony plan: ciemnożółta ramka zamiast kreskowanego tła, które zjadało barwę
   statusu. Ile ponad plan, mówi napis przy ikonach i dymek. Ramka działa na każdym
   statusie, więc nie trzeba jej zawężać do realizacji. */
.schedule-bar.is-overrun {
    border-color: #CA8A04;
}

/* Napis "otwarta sesja od N" przy linii postępu. Rozmiar jak sąsiednie .schedule-progress,
   kolor dziedziczony z kafelka - na wstrzymanej operacji tło jest czerwone i własna barwa
   by się na nim zgubiła. */
.schedule-open-session {
    font-size: 12px;
}

.schedule-progress {
    font-size: 12px;
    color: var(--color-font-light);
}

/* Kolor bierze z kafelka, bo na wstrzymanej operacji tło jest już czerwone i czerwony
   druk by się na nim zgubił. Wyróżnia sama grubość. */
.schedule-overrun-label {
    font-size: 12px;
    font-weight: bold;
    color: inherit;
}


/* ========================================================================== */
/* LINIA "TERAZ"
   Stoi nieruchomo w zerze osi, czyli dokładnie tam, gdzie serwer policzył paski.
   Pozycja ze zmiennej --schedule-now-px, jednej na cały panel. */
/* ========================================================================== */
/* Linia nie jedzie i to jest decyzja: paski są z chwili wczytania, więc jadąca kreska
   przy stojących paskach kłamałaby o tym, jak stare są dane. Zamiast niej godzina
   wyliczenia stoi przy podpisie "teraz" na osi, a świeżość daje odświeżenie panelu -
   ręczne albo z pola "Automatyczne odświeżanie". */
.schedule-now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--schedule-now-px);
    width: 0;
    border-left: 1px dashed var(--color-blue);
    pointer-events: none;
    z-index: 2;
}

/* ========================================================================== */
/* ZAWĘŻENIA: ZAZNACZONE ZLECENIE I FILTR
   Przygaszanie idzie kolorami, nie przezroczystością - powód opisany niżej.
   Przygaszenie nie jest tylko wyglądem: na takim kafelku nie da się pracować, czyli ani
   go przeciągnąć, ani zaznaczyć nim zlecenia. Gesty zatrzymuje barActive w kontrolerze,
   a kursor siedzi w sekcji "przeciąganie" (o wyniku decyduje kolejność reguł).
   Linki w kafelku zostają żywe - do operacji i zlecenia wchodzi się także z przygaszonego. */
/* ========================================================================== */
/* Zaznaczone zlecenie: jego operacje podświetlone, reszta przygaszona. Zaznaczenie
   żyje w pamięci przeglądarki, więc trzyma się przy przechodzeniu między gniazdami

   i nie kosztuje ani jednego zapytania. */
.schedule-bar.is-selected-order {
    box-shadow: inset 0 0 0 2px var(--color-button);
}

/* Przygaszenie idzie kolorami, nie przezroczystością. Półprzezroczysty element to dla
   przeglądarki osobna warstwa - przy kilkuset kafelkach gniazda przewijanie osi dławiło
   się po zaznaczeniu zlecenia, a efekt jest ten sam. */
.schedule-bar.is-dimmed,
.schedule-bar.is-dimmed.is-overrun {
    background: #FCFCFC;
    border-color: var(--color-gray);
    color: var(--color-gray-2);
}

/* UWAGA przy dokładaniu treści do kafelka: przygaszenie działa przez ustawienie color
   na samym kafelku, a to dziedziczy się tylko tam, gdzie nikt nie ustawił własnego
   koloru. Każdy element ze swoim color MUSI więc trafić na tę listę, inaczej zostanie
   w pełnej barwie na przygaszonym kafelku. Tak było z linią przerw: .schedule-bar-gaps
   ma własny kolor, więc czasy świeciły pełną siłą, choć reszta kafelka była szara. */
.schedule-bar.is-dimmed a,
.schedule-bar.is-dimmed .schedule-bar-gaps,
.schedule-bar.is-dimmed .schedule-gap-overlap,
.schedule-bar.is-dimmed .schedule-progress,
.schedule-bar.is-dimmed .schedule-overrun-label {
    color: var(--color-gray-2);
}

/* Wypełnienie i ikony na przygaszonym kafelku zostałyby w pełnym kolorze i ściągały oko.
   Razem z wypełnieniem gaśnie pasek otwartej sesji, bo siedzi na nim (jego ::after). */
.schedule-bar.is-dimmed .schedule-bar-fill,
.schedule-bar.is-dimmed .schedule-bar-icons {
    display: none;
}

/* ========================================================================== */
/* PASEK NARZĘDZI - UKŁAD
   Trzy grupy: akcje po lewej, zawężenia pośrodku, podziałka po prawej. W środkowej
   stoją razem zaznaczone zlecenie, szybki filtr i pole filtra - wszystkie trzy decydują
   o tym, co widać na osi. */
/* ========================================================================== */
/* Zawężenia stoją pośrodku paska, żeby nie sklejały się z podziałką. Wolne miejsce dzielą
   po równo grupy po bokach, więc środek wypada w środku strony, a nie w środku luki między
   nimi - inaczej uciekałby w prawo, gdy po lewej zapali się ostrzeżenie. Obie grupy mają
   domyślne min-width: auto, więc szersza od połowy nic nie ściśnie, tylko zepchnie je z osi. */
.schedule-panel .left-actions,
.schedule-panel .right-actions {
    flex: 1 1 0;
}

.schedule-panel .right-actions {
    justify-content: flex-end;
}

.schedule-panel .schedule-filter {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Ile kafelków przechodzi filtr. Bez tej liczby ekran, na którym nic nie pasuje,
   wygląda tak samo jak popsuty - wszystko szare i nie wiadomo dlaczego.
   Bez własności display, żeby działał zwykły atrybut hidden. */
.schedule-panel .schedule-filter-count {
    font-size: 13px;
    color: var(--color-font-light);
    white-space: nowrap;
}

.schedule-selection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.schedule-selection[hidden] {
    display: none;
}

.schedule-selection-label {
    color: var(--color-font-light);
}

/* ========================================================================== */
/* PRZECIĄGANIE I ZNACZNIKI KAFELKA
   Kafelek przeciągany, ostatnio przestawiony, bieżące trafienie filtra i kafelek ze złymi czasami. */
/* ========================================================================== */
/* Kafelek, na którym stanął obchód trafień (Enter w polu filtra). Obwódka jest
   z zewnątrz i w kolorze, którego nie używa żaden status ani zaznaczenie zlecenia,
   żeby dało się ją wypatrzyć po przewinięciu przez pół gniazda. */
.schedule-bar.is-current-match {
    outline: 2px solid var(--color-orange);
    outline-offset: 1px;
    z-index: 4;
}

/* Kafelek, którego nie dało się postawić, bo przyszły złe czasy. Bez tego znaku taki
   kafelek po prostu zlewa się z innymi przy lewej krawędzi i wygląda jak niedziałający
   skrypt - patrz markBroken w production_schedule_controller.js. */
.schedule-bar.is-broken {
    outline: 2px dashed var(--color-red);
    outline-offset: -1px;
}

/* Ostatnio przestawiony kafelek. Po przeciągnięciu wraca cały harmonogram, więc bez
   obwódki trudno wypatrzyć, co się właśnie ruszyło. Znika przy kolejnym odświeżeniu. */
.schedule-bar.is-moved {
    border: 2px solid var(--color-font);
}


/* Przeciąganie w obrębie kolejki własnej maszyny. touch-action wyłącza przewijanie
   palcem nad paskiem, inaczej gest ucieka do kontenera zamiast chwytać kafelek. */
.schedule-bar[data-draggable="true"] {
    cursor: grab;
    touch-action: none;
}

/* Przygaszony kafelek wypada z pracy, więc nie może zapraszać łapką do przeciągania -
   patrz barActive w kontrolerze. touch-action wraca do domyślnego, żeby palcem dało się
   nad nim przewijać oś: chwytać i tak nie ma czego.

   Linki w kafelku zostają żywe i zachowują własną łapkę z przeglądarki, więc na
   przygaszonym kafelku kursor mówi wprost, co jeszcze działa: sam link.

   UWAGA: ta reguła MUSI stać poniżej reguły z data-draggable. Obie mają tę samą wagę
   (klasa plus klasa kontra klasa plus atrybut), więc o kursorze decyduje kolejność.
   Dlatego nie siedzi w sekcji "zawężenia", gdzie jest reszta przygaszenia. */
.schedule-bar.is-dimmed {
    cursor: default;
    touch-action: auto;
}

/* Ciągnięty kafelek przesuwa się transformem, więc uprzedzamy przeglądarkę, żeby
   trzymała go w osobnej warstwie i nie przemalowywała przy każdym drgnięciu myszy. */
.schedule-bar.is-dragging {
    cursor: grabbing;
    z-index: 3;
    opacity: 0.9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    will-change: transform;
}


/* ========================================================================== */
/* WĄSKIE KAFELKI
   Progi czytelności ustawia placeBar w JS klasami is-tiny, is-compact i is-vertical. */
/* ========================================================================== */
/* Skrót na wąski kafelek: ZL-9/4, czyli kod zlecenia bez zer wiodących i numer operacji.
   Pokazuje go dopiero klasa is-compact, bo na pełnym kafelku jest cały nagłówek. */
.schedule-bar-short {
    display: none;
    /* nad wypełnieniem, tak jak zwykłe linie kafelka */
    position: relative;
    z-index: 1;
    font-size: 13px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    /* Gdy i skrót się nie mieści, lepsze wielokropek niż cichy cios: obcięte ZL-99999
       wygląda jak poprawny kod innego zlecenia. */
    text-overflow: ellipsis;
    /* Bez własnego koloru: skrót nie jest linkiem, a linkowy błękit obiecywał kliknięcie,
       którego nie ma. W zlecenie wchodzi się dwuklikiem w kafelek. Dziedziczenie załatwia
       też przestój i przygaszenie - kolor idzie z kafelka. */
}

/* Progi czytelności - klasy dokłada production_schedule_controller po zmierzeniu paska */
.schedule-bar.is-tiny {
    padding: 0;
}

.schedule-bar.is-tiny .schedule-bar-line {
    display: none;
}

/* Wąski kafelek: zamiast urwanego w połowie nagłówka sam skrót */
.schedule-bar.is-compact {
    padding: 4px;
}

.schedule-bar.is-compact .schedule-bar-line {
    display: none;
}

.schedule-bar.is-compact .schedule-bar-short {
    display: block;
}

/* Najwęższe kafelki z pasma: skrót nie mieści się w poziomie, więc kładziemy go pionowo.
   writing-mode to zwykły layout, nie osobna warstwa jak obrót transformem, więc przy
   setkach kafelków nic nie kosztuje. Wysokość wiersza daje około 79 px, czyli tyle,
   ile potrzeba na ZL-9/4. */
.schedule-bar.is-vertical {
    padding: 2px;
}

.schedule-bar.is-vertical .schedule-bar-short {
    writing-mode: vertical-rl;
    /* Obrót o pół obrotu odwraca kierunek czytania na dolny do górnego, czyli tak jak
       podpisuje się osie wykresów. Robimy to transformem, a nie wartością sideways-lr,
       bo tamta jest dużo młodsza i nie wszędzie działa. Sam obrót nie tworzy osobnej
       warstwy, więc przewijania nie dotyka. */
    transform: rotate(180deg);
    height: 100%;
}

/* Od jedenastu znaków (ZL-99999/12 w górę) skrót nie mieści się w 73 px przebiegu
   przy 13 px, a przy 11 px wchodzi nawet ZL-999999/23, czyli najdłuższy możliwy numer. */
.schedule-bar.is-vertical .schedule-bar-short.is-long {
    font-size: 11px;
    line-height: 14px;
}


/* ========================================================================== */
/* KOLORY STATUSÓW
   Tło i obwódka kafelka zależnie od statusu operacji. Zakończone na wykres nie trafiają. */
/* ========================================================================== */
/* Kolory statusów: Zaplanowane błękitne, Rozpoczęte pomarańczowe, W trakcie żółte,
   Wstrzymane czerwone. Te same trójki (tło, obwódka, druk) noszą plakietki statusu
   w tabelach i kwadraciki kolejności operacji - patrz OPERATION_STATE_COLORS
   w OperationsHelper, jedyne źródło tych barw po stronie Ruby.

   ROZPOCZĘTE I W TRAKCIE SĄ BLIŹNIAKAMI i tablica reguł nie odróżnia ich ani jednym
   wierszem: wolno przy nich dokładnie to samo. Różni je jedno zdanie - czy ktoś pracuje
   przy operacji TERAZ - i właśnie po to są dwie barwy.

   DLACZEGO OSTRZEGAWCZY ORANŻ TRAFIŁ NA ROZPOCZĘTE, a nie na realizację: pomarańczowy
   woła o uwagę, a wołać ma ten stan, z którym planista ma co zrobić. "Ruszyła i stoi"
   to pytanie "co się stało" - może zabrakło materiału, może ktoś zapomniał wystartować
   sesji. "Dzieje się teraz" nie wymaga od planisty niczego, więc zostaje przy spokojnej
   żółci - tej samej, którą W trakcie nosiło w tym programie od początku, więc nikt się
   nie musi niczego od nowa uczyć. */
.schedule-bar-waiting {
    background: #F0F9FF;
    border-color: #7DD3FC;
    color: #0C4A6E;
}

.schedule-bar-started {
    background: #FFEDD5;
    border-color: #F97316;
    color: #7C2D12;
}

.schedule-bar-in_progress {
    background: #FEF9C3;
    border-color: #EAB308;
    color: #713F12;
}

.schedule-bar-on_hold {
    background: #FEE2E2;
    border-color: #F87171;
    color: #7F1D1D;
}


/* ========================================================================== */
/* PRZESTOJE MASZYN
   Ten sam kształt kafelka co operacja, wyróżnia go czerwone kreskowane tło,
   dzięki czemu stojąca maszyna rzuca się w oczy bez najeżdżania kursorem. */
/* ========================================================================== */
.schedule-bar.is-downtime {
    background: repeating-linear-gradient(45deg,
        #FECACA,
        #FECACA 6px,
        #FEE2E2 6px,
        #FEE2E2 12px);
    border-color: #F87171;
    color: #7F1D1D;
}

/* ZAWĘŻENIE - bez tego kreskowanie świeci pełną siłą na wygaszonym wykresie:
   is-downtime ma tę samą wagę co is-dimmed, a ta sekcja stoi na końcu pliku. */
.schedule-bar.is-dimmed.is-downtime {
    background: #FCFCFC;
    border-color: var(--color-gray);
    color: var(--color-gray-2);
}


/* ========================================================================== */
/* PAS STANU POPRZEDNIEJ OPERACJI
   Cienki pas u góry kafelka mówiący o SĄSIEDZIE, nie o samym kafelku: czy tę
   operację da się już zacząć.
     zielony      - nic nie blokuje (pierwsza w zleceniu albo poprzednia zakończona),
     pomarańczowy - poprzednia jest rozpoczęta, ale nikt przy niej teraz nie pracuje,
     żółty        - poprzednia leci właśnie na maszynie, czyli zaraz się zwolni,
     czerwony     - poprzednia wstrzymana, czyli coś się zacięło.

   CZTERY KOLORY, NIE WIĘCEJ, i każdy jest innym zdaniem o tym, kiedy ta operacja ruszy.
   Oranż z żółcią rozdzieliły się razem ze statusami Rozpoczęte i W trakcie: oranż znaczy
   "tamta stoi, zapytaj dlaczego", żółty "tamta pracuje, po prostu czekaj". Poprzednia czekająca w kolejce albo jeszcze poza planem pasa nie dostaje:
   to zwykłe "jeszcze długo", stan większości kafelków - pas na każdym z nich robi się
   szumem i gubi te, które coś znaczą. Barwy są z palety statusów, bo pas pokazuje
   po prostu stan tamtej operacji - nic nowego nie trzeba się uczyć.

   DLACZEGO PAS, A NIE OBWÓDKA: obwódka niesie już status samego kafelka, a do tego
   nadpisuje ją "ostatnio przestawiony" (.is-moved). ::before jest jedynym wolnym kanałem
   NA SAMYM KAFELKU.

   DLACZEGO GEOMETRIA, A NIE IKONA: poniżej 150 px kafelek gubi ikony i cały tekst,
   poniżej 20 px zostaje sam kolor - a przy grubej podziałce, czyli wtedy, gdy się
   planuje, większość kafelków jest właśnie taka. Pas widać na każdej szerokości.

   Klasy rozdaje ScheduleHelper#schedule_predecessor_class - tylko operacjom
   zaplanowanym, bo ta w trakcie już wystartowała, a wstrzymana stoi z własnego
   powodu. Słowami to samo mówi dymek, patrz #schedule_predecessor_title. */
/* ========================================================================== */
/* Barwy w zmiennych, bo nosi je też próbka na pigułce "Następne w kolejce" - hexy
   w dwóch miejscach rozjechałyby się przy pierwszej zmianie. */
.schedule-panel {
    --schedule-prev-ready: #4ADE80;
    --schedule-prev-started: #F97316;
    --schedule-prev-running: #EAB308;
    --schedule-prev-held: #F87171;

    /* Czarny pas stoi POZA tą czwórką i poza próbką na pigułce "Następne w kolejce":
       tamte cztery mówią "można zacząć albo zaraz będzie można", a ten jest ich
       przeciwieństwem - poprzedniej operacji nie ma jeszcze w planie. */
    --schedule-blocked-unplanned: #111827;

    /* Grubość pasa stanu poprzedniej operacji. Trzy piksele, bo pas ma się czytać
       także na kafelku zwężonym do samego koloru. */
    --schedule-stripe-px: 3px;
}

.schedule-bar.is-prev-ready::before,
.schedule-bar.is-prev-started::before,
.schedule-bar.is-prev-running::before,
.schedule-bar.is-prev-held::before,
.schedule-bar.is-blocked-unplanned::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--schedule-stripe-px);
    pointer-events: none;
}

.schedule-bar.is-prev-ready::before {
    background: var(--schedule-prev-ready);
}

.schedule-bar.is-prev-started::before {
    background: var(--schedule-prev-started);
}

.schedule-bar.is-prev-running::before {
    background: var(--schedule-prev-running);
}

.schedule-bar.is-prev-held::before {
    background: var(--schedule-prev-held);
}

.schedule-bar.is-blocked-unplanned::before {
    background: var(--schedule-blocked-unplanned);
}

/* ZAWĘŻENIE - na przygaszonym kafelku pas świeciłby pełną siłą i ściągał oko,
   tak samo jak wypełnienie i ikony, które znikają w sekcji "zawężenia".
   Waga ta sama co reguły wyżej, więc ta MUSI stać pod nimi. */
.schedule-bar.is-dimmed::before {
    display: none;
}