/* Faults, work orders, workshops and fault codes. */

/* Fault code lists: one segment per list above the table. */
.fc-kinds {
    margin: 0 0 12px;
    flex-wrap: wrap;
}

/* The fault symbol as a mark: "/" follow-up (altimeter), "–" limits use (caution), "X" grounds (streamer). */
.fault-mark {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk-deep);
    font: 700 0.95rem var(--ft-font-display);
    color: var(--ft-stencil-soft);
}

.fault-mark--slash { background: rgba(47, 127, 184, 0.12); color: var(--ft-altimeter-deep); }
.fault-mark--dash { background: rgba(227, 179, 65, 0.2); color: #7A5A00; }
.fault-mark--cross { background: rgba(200, 16, 46, 0.12); color: var(--ft-streamer); }

.fault-mark--large {
    min-width: 56px;
    height: 56px;
    border-radius: var(--ft-radius);
    font-size: 1.6rem;
}

.fault-target {
    display: flex;
    flex-direction: column;
}

.fault-target small,
.fault-muted {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.fault-kind {
    align-self: flex-start;
}

.fault-location {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fault-location__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ft-stencil-soft);
}

.fault-location__chosen,
.fault-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 12px;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-caution);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
}

.fault-item > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.fault-location .cfgtree {
    max-height: 420px;
}

.fault-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fault-grid__wide {
    grid-column: 1 / -1;
}

.fault-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ft-stencil-soft);
}

.fault-symbols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.fault-symbol {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    color: var(--ft-stencil);
    cursor: pointer;
}

.fault-symbol.is-selected {
    border-color: var(--ft-altimeter);
    box-shadow: inset 0 0 0 1px var(--ft-altimeter);
}

.fault-symbol:focus-visible {
    outline: 2px solid var(--ft-altimeter);
    outline-offset: 2px;
}

.fault-error {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ft-streamer);
}

/* Fault page: the symbol and description up front, facts in two columns. */
.fault-hero {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-left: 5px solid var(--ft-line);
}

.fault-hero--slash { border-left-color: var(--ft-altimeter); }
.fault-hero--dash { border-left-color: var(--ft-caution); }
.fault-hero--cross { border-left-color: var(--ft-streamer); }

.fault-hero__body {
    flex: 1;
    min-width: 0;
}

.fault-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fault-hero__desc {
    margin: 10px 0 6px;
    font-size: 1.02rem;
    white-space: pre-line;
    color: var(--ft-stencil);
}

.fault-hero__meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.fault-code {
    display: block;
}

@media (max-width: 600px) {
    .fault-grid,
    .fault-symbols {
        grid-template-columns: 1fr;
    }
}

/* Work order processing: consumables as rows with a quantity box; flight ground stations reuse the people head. */
.wo-people {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wo-people__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.wo-consumables {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wo-consumable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
}

.wo-consumable.is-short {
    border-color: var(--ft-streamer);
}

.wo-consumable__part {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wo-consumable__part small {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

/* A lot past its expiry day, on a line or in the picker. */
.wo-consumable__expired {
    color: var(--ft-streamer);
    font-weight: 600;
}

/* The consumable picker: part number, name, lot, expiry date, quantity. */
.partpick--consumables .partpick__head,
.partpick--consumables .partpick__row {
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.4fr) minmax(100px, 0.9fr) minmax(120px, 0.9fr) minmax(90px, 0.7fr);
}

@media (max-width: 600px) {
    .wo-consumable {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .wo-consumable__part {
        grid-column: 1 / -1;
    }

    .partpick--consumables .partpick__row > :nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .partpick--consumables .partpick__row > :nth-child(4) {
        display: block;
        grid-column: 2;
        grid-row: 3;
    }

    .partpick--consumables .partpick__row > :nth-child(5) {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Parts a work order waits for, beside the assignment session. */
.wo-waiting__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wo-waiting__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-caution);
    border-radius: var(--ft-radius-sm);
}

.wo-waiting__list li > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 0.85rem;
}

/* The main system line above a work order's LRU board. */
.wo-system {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    margin-bottom: 12px;
    padding: 10px 16px;
}

.wo-system .ms-bar__name {
    font: 600 1.05rem var(--ft-font-display);
    color: var(--ft-stencil);
}

/* A work order's family tree in its work order card: the main work order, its subs and theirs, the one on screen marked. */
.wo-tree-block {
    margin-top: 14px;
}

.wo-tree__title {
    margin: 0 0 8px;
    font: 600 0.82rem var(--ft-font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ft-stencil-soft);
}

.wo-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    overflow: hidden;
}

.wo-tree__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 7px 12px 7px calc(12px + min(var(--wo-depth, 0), 6) * 22px);
    border-bottom: 1px solid var(--ft-line);
    font-size: 0.86rem;
}

.wo-tree__row:last-child {
    border-bottom: 0;
}

.wo-tree__row.is-root {
    background: var(--ft-chalk);
}

.wo-tree__row.is-current {
    box-shadow: inset 3px 0 0 var(--ft-altimeter);
    background: rgba(226, 165, 41, 0.08);
}

.wo-tree__number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 170px;
    min-width: 0;
}

.wo-tree__number .mud-icon-root {
    color: var(--ft-altimeter);
}

.wo-tree__here {
    font-size: 0.75rem;
    color: var(--ft-stencil-soft);
}

.wo-tree__kind {
    font-size: 0.8rem;
    color: var(--ft-sky);
}

.wo-tree__meta {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

/* A short note on the processing form: what is entered only on completion. */
.wo-note {
    margin: 6px 0 0;
    font-size: 0.82rem;
}

/* A work order's LRU section: the installs and removals on the processing page, the tasks its installed items miss and what was done under it. */
.wo-lru {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

/* A main system has hundreds of slots: on a work order they scroll in their own box, the header and filters kept in view. */
.wo-lru .assign-slots .lt__scroll {
    max-height: 60vh;
    overflow: auto;
}

.wo-lru .assign-slots .lt__table thead {
    position: sticky;
    top: 0;
    z-index: 4;
}

.wo-lru > .mt-unassigned,
.wo-lru > .wo-system,
.wo-lru > .assign-note {
    margin-bottom: 0;
}

.wo-lru__lead {
    margin: -6px 0 0;
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

/* Unscheduled maintenance, special maintenance and flight line inspection work orders: the hero takes the kind's colour and icon. */
.swo-hero--unscheduled { border-left-color: var(--ft-caution); }
.swo-hero--special { border-left-color: var(--ft-sky); }
.swo-hero--line { border-left-color: var(--ft-altimeter); }

.swo-hero__icon {
    flex: none;
    margin-top: 2px;
    color: var(--ft-sky);
    font-size: 2rem;
}
.swo-hero--servicing { border-left-color: var(--ft-clear); }