/* ---------- Maintenance tasks: the task page's cards, part numbers, also-closed tasks, the task picker, the definition form ---------- */

.mt-head-button {
    margin-left: auto;
}

.mt-empty {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--ft-line);
    border-radius: var(--ft-radius-sm);
    font-size: 0.85rem;
}

/* A heading inside a card of the task form (what is done). */
.mt-subhead {
    margin: 4px 0 0;
    font: 600 0.9rem var(--ft-font-display);
    letter-spacing: 0.03em;
    color: var(--ft-sky);
}

/* The task picker's options: the task, then its kind and period. */
.mt-taskpick__option {
    display: grid;
    min-width: 0;
}

.mt-taskpick__option small {
    font-size: 0.76rem;
    color: var(--ft-stencil-soft);
}

/* Effective part numbers and the tasks closed with a task. */
.mt-parts,
.mt-pairs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.mt-parts__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-parts__count {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
    white-space: nowrap;
}

.mt-pairs li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
    color: var(--ft-stencil);
}

.mt-pairs__link.mud-icon-root {
    color: var(--ft-caution);
}

.mt-section-actions {
    display: flex;
    justify-content: flex-end;
}

.mt-pairs li .mud-icon-button {
    margin-left: auto;
}

.mt-pairs__task {
    display: grid;
    min-width: 0;
}

.mt-pairs__task small {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.mt-pairs__add {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

/* Task dialog. */
.mt-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mt-dialog__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mt-dialog__group + .mt-dialog__group {
    padding-top: 12px;
    border-top: 1px solid var(--ft-line);
}

.mt-dialog__group h3 {
    margin: 0;
    font: 600 0.9rem var(--ft-font-display);
    letter-spacing: 0.03em;
    color: var(--ft-sky);
}

.mt-dialog__hint {
    margin: 0;
    font-size: 0.8rem;
}

/* The assign dialog's search and "followed only" switch; the switch goes under the search on a phone. */
.mt-dialog__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.mt-dialog__search {
    flex: 1 1 240px;
}

/* A count that opens its rows in a dialog (the task list's followed items). */
.mt-count-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary);
}

.mt-count-link .mud-icon-root {
    font-size: 0.95rem;
}

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

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

.mt-grid--numbers {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.mt-switch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.mt-switch-row__value {
    max-width: 220px;
}

.mt-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

/* A task's interval rows summed up under their table: "100 atış ya da hizmette 30 ay, hangisi önce dolarsa." */
.mt-interval-summary {
    margin: 0;
    padding: 8px 12px;
    gap: 8px;
    font-size: 0.88rem;
}

.fact-card .life-table,
.fact-card .mt-interval-summary {
    margin-top: 12px;
}

/* A followed task's facts may hold several lines (the other rows of its interval). */
.mt-facts dd {
    white-space: pre-line;
}

/* A task's steps: one row each, the maintenance it is, when it falls due as one sentence, "saved", remove; then what follows the last one. */
.mt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mt-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
}

/* After the last step the row's own period runs: drawn lighter, as the list's end rather than one more step. */
.mt-step--then {
    border-style: dashed;
    background: transparent;
    color: var(--ft-stencil-soft);
}

.mt-step__no {
    min-width: 4.5em;
    font: 600 0.85rem var(--ft-font-display);
    color: var(--ft-sky);
    white-space: nowrap;
}

.mt-step__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    min-width: 0;
}

.mt-step__saved {
    margin-left: auto;
}

.mt-step__remove {
    margin-left: auto;
}

.mt-step__saved + .mt-step__remove {
    margin-left: 0;
}

.mt-steps__add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mt-steps__add .mud-input-control {
    flex: 0 1 220px;
}

@media (max-width: 720px) {
    .mt-grid {
        grid-template-columns: 1fr;
    }

    .mt-steps__add .mud-input-control {
        flex: 1 1 100%;
    }

    /* The number, "saved" and remove stay on the first line; the values go below. */
    .mt-step__facts {
        order: 1;
        flex-basis: 100%;
    }
}

/* ---------- Maintenance tracking: colour bands, late values, an item's followed tasks ---------- */

/* The way back from a home screen scope to the whole list. */
.mt-scope__all {
    font-weight: 600;
    color: var(--ft-altimeter-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mt-bands {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.mt-band {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
    box-shadow: inset 4px 0 0 var(--mt-band, var(--ft-line));
}

.mt-band strong {
    font: 600 1.4rem var(--ft-font-display);
    color: var(--ft-stencil);
}

.mt-band span {
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

.mt-band--overdue {
    --mt-band: var(--ft-streamer);
}

.mt-band--intolerance {
    --mt-band: #E07B24;
}

.mt-band--approaching {
    --mt-band: var(--ft-caution);
}

.mt-band--dueunknown {
    --mt-band: var(--ft-stencil-soft);
}

.mt-band--healthy {
    --mt-band: var(--ft-clear);
}

.mt-late {
    font-weight: 600;
    color: var(--ft-streamer);
}

/* A due that cannot be computed: the way to give it a start, quiet (not an alarm). */
.mt-nostart {
    font-style: italic;
    color: var(--ft-stencil-soft);
}

.lt__row.mt-row--late td:first-child {
    box-shadow: inset 3px 0 0 var(--ft-streamer);
}

.mt-follow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.mt-follow__row--overdue {
    box-shadow: inset 3px 0 0 var(--ft-streamer);
}

.mt-follow__row--intolerance {
    box-shadow: inset 3px 0 0 #E07B24;
}

.mt-follow__row--approaching {
    box-shadow: inset 3px 0 0 var(--ft-caution);
}

.mt-follow__row--dueunknown {
    box-shadow: inset 3px 0 0 var(--ft-stencil-soft);
}

.mt-follow__task {
    display: grid;
    min-width: 0;
}

.mt-follow__task strong {
    overflow: hidden;
    font-weight: 600;
    color: var(--ft-stencil);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-follow__task small,
.mt-follow__facts {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.mt-follow__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 14px;
}

.mt-follow__facts strong {
    color: var(--ft-stencil);
}

.tick-list.mt-ticks {
    grid-template-columns: 1fr;
}

@media (max-width: 720px) {
    .mt-bands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-band:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .mt-follow__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .mt-follow__facts {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* ---------- Maintenance work orders: subject in the dialog, hero title, follow-up actions, completion ---------- */

.mt-subject {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0 0 4px;
    padding: 10px 14px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
    font-size: 0.85rem;
}

.mt-subject dt {
    color: var(--ft-stencil-soft);
}

.mt-subject dd {
    margin: 0;
    min-width: 0;
    color: var(--ft-stencil);
    overflow-wrap: anywhere;
}

.mt-hero__title {
    margin: 10px 0 0;
    font-family: var(--ft-font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

.mt-hero__title + .fault-hero__desc {
    margin-top: 4px;
}

/* Task instructions (TaskGuide): a quiet panel under the work order's head and in the "Talimat" dialog; a long text folds to
   TaskGuideText.FoldLines lines. */
.mt-guide {
    margin-top: 12px;
    padding: 10px 14px 8px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
}

.mud-dialog-content .mt-guide {
    margin-top: 0;
}

.mt-guide__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.mt-guide__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 0.85rem var(--ft-font-display);
    letter-spacing: 0.03em;
    color: var(--ft-stencil);
}

.mt-guide__title .mud-icon-root {
    color: var(--ft-altimeter);
}

/* The task's reference code sits next to the title; the document button stays on the right. */
.mt-guide__ref {
    margin-right: auto;
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.mt-guide__doc {
    background: #FFFFFF;
}

.mt-guide__text {
    margin: 8px 0 2px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--ft-stencil);
}

.mt-guide__text--folded {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.mt-guide__more {
    margin-left: -8px;
}

@media (max-width: 480px) {
    .mt-guide__doc {
        width: 100%;
    }

    /* A followed task's buttons (instructions, document, work order, last maintenance, history) get a line of their own. */
    .mt-follow__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

.mt-follow__actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mt-follow__wo {
    padding: 2px 8px;
    border: 1px solid var(--ft-line);
    border-radius: 999px;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
}

.mt-complete {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 3px solid var(--ft-clear);
}

.mt-complete__last,
.mt-complete__date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.mt-complete__sub {
    margin: 8px 0 0;
    font-family: var(--ft-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

.mt-alts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mt-alts__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(160px, 220px);
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 2px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
}

.mt-alts__row.is-chosen {
    border-color: var(--ft-altimeter);
    box-shadow: inset 3px 0 0 var(--ft-altimeter);
}

.mt-alts__task {
    display: grid;
    min-width: 0;
}

.mt-alts__task small {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.mt-warnings {
    margin: 0 0 8px;
    padding-left: 18px;
}

@media (max-width: 720px) {
    .mt-alts__row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mt-alts__value {
        grid-column: 1 / -1;
        padding-left: 12px;
    }
}

.mt-complete > .mud-input-control {
    max-width: 340px;
}

/* ---------- Supplies: task list in the dialog, quantity field, material list picker, work order supply chips ---------- */

.mt-supplies {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mt-supplies__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
}

.mt-supplies__part {
    display: grid;
    min-width: 0;
}

.mt-supplies__part small {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.mt-supplies__qty {
    white-space: nowrap;
}

.mt-supplies__actions {
    display: inline-flex;
    gap: 2px;
}

.mt-supplies__add {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--ft-line);
}

.mt-supplies__add h3 {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

.mt-supplies__new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mt-qty {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mt-qty__value {
    width: 170px;
}

.wo-supplies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.wo-supplies .fault-label {
    flex-basis: 100%;
}

.wo-supplies__chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    padding: 3px 10px;
    border: 1px solid var(--ft-line);
    border-radius: 999px;
    background: var(--ft-chalk);
    font-size: 0.8rem;
}

.wo-supplies__hint {
    flex-basis: 100%;
    margin: 0;
}

button.wo-supplies__chip {
    font: inherit;
    font-size: 0.8rem;
    color: inherit;
    cursor: pointer;
}

.wo-supplies__chip.is-suggestion:hover,
.wo-supplies__chip.is-suggestion:focus-visible {
    border-color: var(--ft-altimeter);
}

.wo-supplies__chip.is-added {
    border-color: var(--ft-altimeter);
    box-shadow: inset 3px 0 0 var(--ft-altimeter);
}

/* A part the work needs but does not take from stock (a tool, an equipment, a serial part). */
.wo-supplies__chip.is-not-consumed {
    border-style: dashed;
    background: transparent;
    color: var(--ft-stencil-soft);
}

.wo-supplies__note {
    font-size: 0.72rem;
}

@media (max-width: 720px) {
    .mt-supplies__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mt-supplies__qty,
    .mt-supplies__row .mt-qty {
        grid-column: 1 / -1;
    }
}

/* ---------- Tasks a main system's items could follow but do not ---------- */

.mt-unassigned {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--ft-caution);
}

.mt-unassigned__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* The open list keeps its gap to the header; a closed card is the header line alone. */
.mt-unassigned__head:not(:last-child) {
    margin-bottom: 8px;
}

/* The warning summary that opens and closes the list. */
.mt-unassigned__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mt-unassigned__toggle:hover,
.mt-unassigned__toggle:focus-visible {
    background: var(--ft-chalk);
}

.mt-unassigned__warn {
    color: var(--ft-caution);
}

.mt-unassigned__head .muted {
    font-size: 0.82rem;
}

.mt-unassigned__export {
    margin-left: auto;
}

/* The search over the open list, with what it found beside it. */
.mt-unassigned__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.mt-unassigned__tools .muted {
    font-size: 0.82rem;
}

.mt-unassigned__search {
    flex: 0 1 380px;
    margin: 0;
}

.mt-unassigned__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: min(50vh, 420px);
    overflow-y: auto;
}

.mt-unassigned__list > li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid var(--ft-line);
}

.mt-unassigned__item {
    display: grid;
    min-width: 0;
}

/* "Assign tasks" stays on one line beside an item whose task names are open. */
.mt-unassigned__list > li > .mud-button-root {
    flex-shrink: 0;
    white-space: nowrap;
}

.mt-unassigned__item small {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

/* An item's task count, which opens the names of the tasks it does not follow. */
.mt-unassigned__count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: var(--ft-caution);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.mt-unassigned__count:hover,
.mt-unassigned__count:focus-visible {
    background: var(--ft-chalk);
}

.mt-unassigned__tasks {
    margin: 4px 0 2px;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--ft-stencil);
}

/* Alternative part numbers dialog and the part page's supply usage: the lists' headings. */
.alt-parts__title,
.part-usage__head h3 {
    margin: 4px 0 0;
    font-family: var(--ft-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

/* Part page: where the part is used as a supply, one group per list kind; the site switch wraps under the heading on phones. */
.part-usage__group {
    display: grid;
    gap: 8px;
}

.part-usage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 12px;
}

/* Task type (MSG-3): the code chip of the task list and facts. */
.mt-type {
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* An item's maintenance history: the task's type chip before its number and name. */
.mt-hist-task {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mt-type__definition {
    display: block;
    margin-top: 2px;
}

/* A partner closed along with a hand-entered last maintenance: one field per counter its task reads. */
.mt-alts__counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}