/* Pasek operacji na zakładce "Operacje podzleceń" zlecenia produkcyjnego.
 *
 * To NIE jest oś czasu - kafelek ma tyle szerokości, ile potrzeba na jego treść.
 * Od rysowania czasu jest "Plan - harmonogram" i jego schedule.css.
 *
 * Kolory kafelków NIE SIEDZĄ TUTAJ. Bierze je operation_state_span z tablicy
 * OperationsHelper::OPERATION_STATE_STYLES, tej samej, z której barwi się kolumna
 * "Plan" w tabelach planu produkcji. Zmiana koloru stanu idzie tam, nie tu.
 */

/* Pasek zostaje jednowierszowy, a długa technologia wyjeżdża w prawo pod poziomy
   pasek przewijania tabeli. Zawijanie rozpychałoby wiersze na różne wysokości. */
.sub-operations-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
}

/* Wysokość, zaokrąglenie i wyśrodkowanie daje .status-span. Układ środka kafelka
   siedzi na linku, bo to on jest jedynym dzieckiem plakietki. */
.status-span.sub-operation-chip {
    white-space: nowrap;
}

.sub-operation-chip a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

/* O dwa piksele niżej niż na kafelku harmonogramu, bo plakietka ma tylko 22 px. */
.sub-operation-chip img {
    height: 14px;
    width: auto;
}

.sub-operation-cell {
    font-weight: 600;
}

/* Przerwa jest lżejsza od kafelków: oko ma najpierw zobaczyć, co jest w zleceniu,
   a dopiero potem ile się czeka. */
.sub-operation-gap {
    color: var(--color-font-light);
    font-size: 12px;
    white-space: nowrap;
}

/* Nachodzenie operacji na siebie - jedyny stan na tym pasku, który jest problemem. */
.sub-operation-gap.is-overlap {
    color: var(--color-red);
    font-weight: bold;
}