/* Inventory, warehouses and sites: list cells, the part data plate, the part picker, bins. */

/* ---------- List cells ---------- */

.sn {
    display: block;
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.pn-sub--name {
    font-family: var(--ft-font-body);
    font-size: 0.8rem;
    letter-spacing: 0;
}

.qty {
    font-family: var(--ft-font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qty__unit {
    margin-left: 4px;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.muted {
    color: var(--ft-stencil-soft);
}

.route {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2px;
    font-size: 0.86rem;
}

.route__sep.mud-icon-root {
    width: 16px;
    height: 16px;
    color: #A3AEBB;
}

.route__stop--bin {
    padding: 0 6px;
    border-radius: var(--ft-radius-xs);
    background: var(--ft-chalk-deep);
    font-family: var(--ft-font-display);
    letter-spacing: 0.04em;
}

.route__none {
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.expiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.expiry--soon::before,
.expiry--past::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.expiry--soon {
    color: #7A5A0F;
}

.expiry--soon::before {
    background: var(--ft-caution);
}

.expiry--past {
    color: var(--ft-streamer);
    font-weight: 600;
}

.expiry--past::before {
    background: var(--ft-streamer);
}

/* ---------- Data plate (part nameplate) ---------- */

.plate {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "id facts stamp"
        "foot foot foot";
    gap: 18px 32px;
    padding: 28px 34px 20px;
    overflow: hidden;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(47, 127, 184, 0.07) 0%, transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #F5F8FB 100%);
    color: var(--ft-stencil);
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.9),
        inset 0 0 0 7px var(--ft-chalk-deep),
        var(--ft-shadow-raised);
}

/* The light plate keeps its identity: a thin apron-to-amber band along the top edge. */
.plate::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ft-apron) 0%, var(--ft-altimeter) 62%, var(--ft-caution) 100%);
}

.plate__rivet {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #C3CCD7 55%, #8592A1 100%);
    box-shadow: 0 1px 1px rgba(11, 30, 54, 0.25);
}

.plate__rivet--tl { top: 14px; left: 14px; }
.plate__rivet--tr { top: 14px; right: 14px; }
.plate__rivet--bl { bottom: 14px; left: 14px; }
.plate__rivet--br { bottom: 14px; right: 14px; }

.plate__id {
    grid-area: id;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.plate__key {
    font-family: var(--ft-font-display);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--ft-stencil-soft);
}

.plate__pn {
    font-family: var(--ft-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: var(--ft-apron);
    overflow-wrap: anywhere;
}

.plate__name {
    font-size: 0.98rem;
    color: var(--ft-stencil-soft);
}

.plate__facts {
    grid-area: facts;
    display: grid;
    gap: 8px;
    align-content: start;
    margin: 4px 0 0;
}

.plate__facts div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
}

.plate__facts dt {
    font-family: var(--ft-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ft-stencil-soft);
}

.plate__facts dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ft-stencil);
    overflow-wrap: anywhere;
}

/* The stamp: what the technician types appears here as if struck into the plate. */
.plate__stamp {
    grid-area: stamp;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    padding: 10px 16px 12px;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-caution);
    border-radius: var(--ft-radius-sm);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--ft-chalk) 100%);
    box-shadow: inset 0 1px 2px rgba(11, 30, 54, 0.06);
}

.plate__stamp-value {
    font-family: var(--ft-font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ft-sky);
    overflow-wrap: anywhere;
}

.plate__stamp.is-blank .plate__stamp-value {
    color: var(--ft-line);
}

.plate__foot {
    grid-area: foot;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ft-chalk-deep);
}

.plate__tracks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.plate__tracks li {
    padding: 2px 10px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-pill);
    background: #FFFFFF;
    font-size: 0.76rem;
    color: var(--ft-stencil-soft);
}

.plate__change.mud-button-root {
    color: var(--ft-sky);
    border-color: var(--ft-line);
}

.plate__change.mud-button-root:hover {
    border-color: var(--ft-caution);
    background: rgba(227, 179, 65, 0.1);
}

/* ---------- Header band and part picker (ft3mweb "Stok kaydı oluştur") ---------- */

.picker {
    display: grid;
    gap: 16px;
    width: min(100%, 880px);
    margin: 8px auto 0;
    padding: 18px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-lg);
    background: #FFFFFF;
    box-shadow: var(--ft-shadow-raised);
}

.band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(47, 127, 184, 0.16);
    border-radius: var(--ft-radius);
    background: rgba(47, 127, 184, 0.06);
}

.band__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-apron);
    color: var(--ft-caution);
}

.band__text {
    min-width: 0;
}

.band__title {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ft-apron);
}

.band__hint {
    margin: 2px 0 0;
    font-size: 0.84rem;
    color: var(--ft-stencil-soft);
}

.picker__actions {
    display: flex;
    justify-content: flex-end;
}

.partpick {
    display: grid;
    gap: 10px;
}

.partpick__input input {
    font-size: 1.02rem;
}

.partpick__results {
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
    overflow: hidden;
}

.partpick__note {
    margin: 0;
    padding: 18px 16px;
    color: var(--ft-stencil-soft);
    font-size: 0.88rem;
}

.partpick__note--error {
    color: var(--ft-streamer);
}

.partpick__head,
.partpick__row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.9fr) minmax(160px, 1.5fr) 160px;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
}

.partpick__head {
    min-height: 34px;
    background: #EEF2F6;
    font-family: var(--ft-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.partpick__list {
    max-height: 300px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
}

.partpick__row {
    min-height: 44px;
    border-radius: var(--ft-radius-sm);
    cursor: pointer;
}

.partpick__row.is-active {
    background: rgba(47, 127, 184, 0.09);
    box-shadow: inset 3px 0 0 var(--ft-caution);
}

.partpick__row.is-locked {
    cursor: not-allowed;
    color: var(--ft-stencil-soft);
}

.partpick__row.is-locked .pn {
    color: var(--ft-stencil-soft);
}

.partpick__maker,
.partpick__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partpick__maker {
    font-size: 0.84rem;
    color: var(--ft-stencil-soft);
}

.partpick__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--ft-line);
    background: #FBFCFD;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.partpick__chosen {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 8px 6px 14px;
    border: 1.5px solid var(--ft-altimeter);
    border-radius: var(--ft-radius);
    background: rgba(47, 127, 184, 0.05);
}

.partpick__chosen-icon {
    display: grid;
    color: var(--ft-clear);
}

.partpick__chosen .pn {
    font-size: 1.05rem;
}

.partpick__chosen-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Editor extras ---------- */

.num-input input {
    text-align: right;
    font-family: var(--ft-font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.date-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.counter-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.counter {
    display: grid;
    gap: 6px;
}

.counter__gauge {
    height: 6px;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-chalk-deep);
    overflow: hidden;
}

.counter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ft-clear);
    transition: width 200ms ease;
}

.counter__fill.is-near {
    background: var(--ft-caution);
}

.counter__fill.is-over {
    background: var(--ft-streamer);
}

.counter__limit {
    font-family: var(--ft-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--ft-stencil-soft);
}

/* ---------- Warehouses: list + bins ---------- */

.wh-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
}

.wh-name,
.site-name {
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* A site in a picker: its name, then its project (a main system's project is its site's). */
.site-option {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.site-option__project {
    font-size: 0.72rem;
}

.bins {
    position: sticky;
    top: calc(var(--ft-topbar-h) + 16px);
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
    box-shadow: var(--ft-shadow-soft);
}

.bins__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 12px;
    text-align: center;
    color: var(--ft-stencil-soft);
}

.bins__empty p {
    margin: 0;
    max-width: 30ch;
}

.bins__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bins__title {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.bins__meta {
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.bins__add {
    margin: 0;
}

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

.rows__item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 6px 0 12px;
    border-bottom: 1px solid var(--ft-line);
}

.rows__item:last-child {
    border-bottom: 0;
}

.rows__item:hover {
    background: rgba(47, 127, 184, 0.05);
}

.rows__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rows__meta {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
    white-space: nowrap;
}

.bin-code {
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.types {
    display: grid;
    gap: 12px;
}

/* ---------- Name dialog ---------- */

.name-dialog {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

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

/* ---------- Narrow windows ---------- */

@media (max-width: 1100px) {
    .wh-split {
        grid-template-columns: 1fr;
    }

    .bins {
        position: static;
    }
}

@media (max-width: 900px) {
    .plate {
        grid-template-columns: 1fr;
        grid-template-areas: "id" "facts" "stamp" "foot";
        padding: 24px 22px 18px;
    }

    .plate__stamp {
        min-width: 0;
    }

    .partpick__head {
        display: none;
    }

    .partpick__row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 8px 12px;
    }

    .partpick__maker {
        display: none;
    }

    .partpick__name {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .counter__fill {
        transition: none;
    }
}

/* Serial numbers are stored upper-case; show them that way while typing. */
.sn-input input {
    text-transform: uppercase;
}

/* ---------- Special parts ---------- */

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

.limit-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid rgba(227, 179, 65, 0.55);
    border-radius: var(--ft-radius-pill);
    background: rgba(227, 179, 65, 0.08);
    font-size: 0.78rem;
    white-space: nowrap;
}

.limit-chip__name {
    color: var(--ft-stencil-soft);
}

.limit-chip__value {
    font-family: var(--ft-font-display);
    font-weight: 700;
    color: var(--ft-apron);
}

.limit-chip__tol {
    font-family: var(--ft-font-display);
    color: #7A5A0F;
}

.fixed-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    font-size: 0.82rem;
}

.tracking {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
}

.tracking__label {
    font-family: var(--ft-font-display);
    font-weight: 600;
    font-size: 0.86rem;
}

/* ---------- Installed on a main system: the list cell and the item page's strip under the plate ---------- */

.installed-on {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}

.installed-on__system {
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ft-altimeter-deep);
    text-decoration: none;
}

.installed-on__system:hover,
.installed-on__system:focus-visible {
    text-decoration: underline;
}

.installed-on__slot {
    font-size: 0.86em;
    color: var(--ft-stencil-soft);
    overflow-wrap: anywhere;
}

.installed-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-altimeter);
    border-radius: var(--ft-radius);
}

.installed-fact__icon {
    display: inline-flex;
    color: var(--ft-altimeter);
}

.installed-fact__label {
    font-family: var(--ft-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ft-stencil-soft);
}

/* Dependent-LRU groups: the chain as an indented list, each slot with the item in it; rows wrap on a phone. */
.grp-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    overflow: hidden;
}

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

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

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

.grp-tree__row.is-empty {
    color: var(--ft-stencil-soft);
}

.grp-tree__slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
    font-family: var(--ft-font-display);
    font-weight: 600;
    color: var(--ft-apron);
}

.grp-tree__slot .mud-icon-root {
    color: var(--ft-altimeter);
}

.grp-tree__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    flex: 2 1 240px;
    min-width: 0;
}

.grp-tree__item--empty {
    font-style: italic;
}

.grp-tree__sn {
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.grp-tree__pn {
    font-family: var(--ft-font-display);
    color: var(--ft-sky);
    white-space: nowrap;
}

.grp-tree__name {
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

.grp-tree__actions {
    margin-left: auto;
}

.grp-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grp-dialog__root {
    font-family: var(--ft-font-display);
    font-weight: 600;
    color: var(--ft-apron);
}

@media (max-width: 600px) {
    .grp-tree__row {
        padding-left: calc(10px + min(var(--grp-depth, 0), 4) * 12px);
    }
}

/* ---------- Item records: overhauls (DB stage 12c), life inspections and status history (DB stage 12f) ---------- */

/* The card's two buttons sit at the right of its head and wrap under the title on a phone. */
.item-records-card .card__head {
    flex-wrap: wrap;
}

/* "Revizyon kaydı yok" under the card's hint, after a list's life badge; its title says why. */
.ovh-unrecorded {
    display: inline-flex;
    margin: 4px 6px 0 0;
    cursor: help;
}

.item-records-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.record-document {
    display: grid;
    gap: 4px;
}

.record-document__number {
    font-family: var(--ft-font-display);
    letter-spacing: 0.03em;
}

/* A status change: the status before, an arrow and the status after, wrapping on a phone. */
.status-change {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.status-change__arrow {
    color: var(--ft-stencil-soft);
}

/* The dialog's TSN / TSO table scrolls sideways on a narrow screen rather than squeezing its inputs. */
.overhaul-counters__scroll {
    overflow-x: auto;
}

.overhaul-counters {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.overhaul-counters th,
.overhaul-counters td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ft-line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.overhaul-counters thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ft-stencil-soft);
}

.overhaul-counters td.qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.overhaul-counters .num-input {
    min-width: 110px;
}