/* ============================================================================
   Klar - the Station workspace and the runner (Workspaces/Stations, Run)
   ============================================================================

   The station picker, the station's page, its setup, the operations to run
   and the runner (/run/{id}), built from the station blocks (station.css) and
   the page, editing and value blocks. Only theme tokens (--mud-palette-*,
   --klar-*): Klar and Nucera, light and dark. Linked after the block style
   sheets in both hosts.
   ========================================================================= */

.klar-station-help.is-warning {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.klar-station-help.is-error {
    color: var(--mud-palette-error);
}

/* --- the facts of an operation (instructions, one-off run) ----------------- */

.klar-opfacts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .375rem .75rem;
    margin: .75rem 0 0;
    font-size: .875rem;
}

.klar-opfacts dt {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.klar-opfacts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-opfacts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .375rem;
}

/* --- SN-1 station picker -------------------------------------------------------- */

.klar-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.klar-picker-search {
    max-width: 30rem;
}

.klar-picker-section {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    min-width: 0;
}

.klar-picker-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
}

.klar-picker-note {
    font-size: .875rem;
}

.klar-picker-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 2.75rem;
    padding: 0 .5rem 0 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.klar-picker-toggle:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
    border-radius: var(--klar-radius-control);
}

.klar-picker-ops {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-picker-cat {
    margin: .5rem 0 0;
    font-size: .8125rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.klar-picker-oplist {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-surface);
}

.klar-picker-op {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    min-height: 3.5rem;
    padding: .375rem .5rem .375rem 1rem;
}

.klar-picker-op + .klar-picker-op {
    border-top: 1px solid var(--klar-hairline);
}

.klar-picker-opname {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.klar-picker-opname > .klar-muted {
    font-size: .8125rem;
}

.klar-picker-run.mud-button-root,
.klar-picker-runlist.mud-button-root {
    flex: none;
    min-height: 2.75rem;
}

@media (max-width: 599.98px) {
    .klar-picker-op {
        flex-wrap: wrap;
    }

    .klar-picker-opname {
        flex-basis: 100%;
    }
}

/* --- SN-4 one-off run -------------------------------------------------------------- */

.klar-oneoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    gap: 1.25rem;
    align-items: start;
}

.klar-oneoff:has(> .klar-instructions--collapsed) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.klar-oneoff-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.klar-oneoff-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.klar-oneoff-hint {
    font-size: .8125rem;
}

.klar-oneoff-saved th {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.klar-oneoff-old {
    color: var(--mud-palette-text-secondary);
}

.klar-oneoff-arrow {
    color: var(--mud-palette-text-secondary);
    width: 1.5rem;
    text-align: center;
}

/* --- the page of a station: its favourites (keys 1-9), what it fills in, this PC ------------- */

.klar-stationpage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    outline: none;
}

.klar-stationpage-section {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

.klar-stationpage-ops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-stationpage-op {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .75rem 1rem;
    border: 1px solid var(--klar-hairline);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.klar-stationpage-op:hover,
.klar-stationpage-op:focus-visible {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.klar-stationpage-opname {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.klar-stationpage-values th {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.klar-run-station {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
    padding: .5rem .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: 8px;
}

.klar-run-station-name {
    font-weight: 600;
}

/* --- the runner: one input at a time, all inputs, a table ---------------------------- */

.klar-run-bar,
.klar-run-tablebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.klar-run-views {
    min-width: min(100%, 22rem);
}

.klar-run-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.klar-oneoff-inputs .klar-run-field + .klar-run-field {
    margin-top: .75rem;
}

.klar-run-step {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

.klar-run-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
}

.klar-run-step-nav {
    display: flex;
    gap: .5rem;
}

.klar-run-kept {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .8125rem;
}

.klar-run-kept-chip {
    display: inline-flex;
    gap: .375rem;
    padding: .125rem .5rem;
    border: 1px solid var(--klar-hairline);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.klar-run-kept-chip:hover,
.klar-run-kept-chip:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-run-mode {
    max-width: 14rem;
}

.klar-run-table .klar-run-cell {
    min-width: 8rem;
    vertical-align: top;
}

.klar-run-table .klar-run-cell.is-error .klar-listmode-value {
    border-color: var(--klar-tone-error);
}

.klar-run-cell-error {
    display: block;
    font-size: .75rem;
}

.klar-run-cell-input {
    width: 100%;
    min-width: 8rem;
}

.klar-run-row.is-done td {
    color: var(--mud-palette-text-secondary);
}

.klar-run-mapping {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem 1rem;
}

.klar-run-mapping-unused {
    margin-top: .75rem;
}

@media (max-width: 1099.98px) {
    .klar-oneoff {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* a phone has no keyboard to hint at */
@media (max-width: 599.98px) {
    .klar-oneoff-hint {
        display: none;
    }
}

/* --- DE-10 station setup ------------------------------------------------------------ */

.klar-stsetup-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem 1rem;
}

.klar-stsetup-fields--interface {
    grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr) minmax(8rem, 10rem);
}

/* codes (short code, printer address): the input and its help in the code font, the label as every label */
.klar-stsetup-mono input,
.klar-stsetup-mono .mud-input-helper-text {
    font-family: var(--klar-font-mono);
}

.klar-stsetup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: .75rem;
}

.klar-stsetup-note {
    margin: .5rem 0 0;
    font-size: .875rem;
}

.klar-stsetup-small {
    display: block;
    font-size: .8125rem;
}

.klar-stsetup-ops,
.klar-stsetup-generated {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.klar-stsetup-op {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    min-height: 3rem;
    padding: .375rem 0;
}

.klar-stsetup-op + .klar-stsetup-op {
    border-top: 1px solid var(--klar-hairline);
}

.klar-stsetup-opname {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.klar-stsetup-opname > .klar-muted {
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.klar-stsetup-add {
    max-width: 30rem;
    margin: .75rem 0 .25rem;
}

.klar-stsetup-interface + .klar-stsetup-interface {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--klar-hairline);
}

.klar-stsetup-interface-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.klar-stsetup-batch td {
    vertical-align: middle;
}

@media (max-width: 599.98px) {
    .klar-stsetup-fields--interface {
        grid-template-columns: minmax(0, 1fr);
    }

    .klar-stsetup-batch {
        display: block;
        overflow-x: auto;
        /* its screen reader texts scroll with it instead of widening the page */
        position: relative;
    }
}

/* O2: the products a scan step may take, under the scan field of the one-off run */
.klar-oneoff-scanner {
    margin-top: .25rem;
}

.klar-oneoff-suggest {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-surface);
}

.klar-oneoff-suggest > li + li {
    border-top: 1px solid var(--klar-hairline);
}

.klar-oneoff-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .375rem .75rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.klar-oneoff-suggestion:hover,
.klar-oneoff-suggestion:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-oneoff-suggestion.is-unfit {
    opacity: .6;
}

.klar-oneoff-why {
    flex-basis: 100%;
    font-size: .8125rem;
}

.klar-listmode-value {
    width: 100%;
    min-height: 2.25rem;
    padding: .25rem .5rem;
    border: 1px dashed transparent;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: text;
}

.klar-listmode-value:hover:not(:disabled),
.klar-listmode-value:focus-visible {
    border-color: var(--klar-hairline);
    background-color: var(--mud-palette-action-default-hover);
}

.klar-listmode-value.is-empty {
    color: var(--mud-palette-text-disabled);
}

.klar-listmode-value:disabled {
    cursor: default;
}