.configuration-scope strong {
    color: var(--text-2)
}

.configuration-scope svg {
    color: var(--primary-text)
}

/* Layout only (field and button sizes come from forms.css): list wide enough for the duplication chip. */
.configuration-layout {
    grid-template-columns: minmax(340px, 1fr) minmax(0, 1.7fr)
}

.configuration-page .form-step>.permission-option {
    margin-top: 0
}

.configuration-page .form-step>.permission-note {
    margin-top: 12px
}

@media(max-width:1000px) {
    .configuration-layout {
        grid-template-columns: 1fr
    }
}

/* Receiving (wms-receiving): minimum shelf life field and its hint. */
.configuration-shelf-life {
    max-width: 140px
}

.configuration-hint {
    display: block;
    font-size: 9px;
    color: var(--text-faint);
    margin-top: 5px;
    line-height: 1.5
}
/* Step 1 "Instalação do coletor" (wms-coletor, 2026-10-09): server, APK and status of the code, the two QR codes and the actions. The QR codes keep the
   paper and ink of the scannable labels (black on white in both themes, theme.css). */
.coletor-install-facts {
    display: grid;
    gap: 10px;
    margin-bottom: 12px
}

.coletor-install-fact {
    display: grid;
    gap: 3px;
    min-width: 0
}

.coletor-install-fact>span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-faint)
}

.coletor-install-fact strong {
    font-size: 12px;
    color: var(--text-2);
    overflow-wrap: anywhere
}

.coletor-install-fact small {
    font-size: 10px;
    color: var(--text-muted)
}

.coletor-install-fact strong.coletor-install-status.is-active {
    color: var(--success-text)
}

.coletor-install-fact strong.coletor-install-status.is-off {
    color: var(--warning-text)
}

.coletor-install-warning {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--warning-text)
}

.coletor-install-warning svg {
    flex-shrink: 0;
    margin-top: 2px
}

.coletor-install-qrs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 6px 0 12px
}

.coletor-install-qr {
    display: grid;
    gap: 10px;
    justify-items: center;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg)
}

.coletor-install-qr .qr-code {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1
}

.coletor-install-qr figcaption {
    display: grid;
    gap: 4px;
    width: 100%
}

.coletor-install-qr figcaption strong {
    font-size: 12px;
    color: var(--text-2)
}

.coletor-install-qr figcaption small {
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted)
}

.qr-code-paper {
    fill: var(--label-paper)
}

.qr-code-ink {
    fill: var(--label-ink)
}

.coletor-install-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px
}

.coletor-install-fields {
    margin: 10px 0
}

.configuration-page .form-step.coletor-install>.permission-note {
    margin-top: 10px
}

/* Address of the collector and the APK sent from the screen (master): field + action side by side, wrapping on small screens. */
.coletor-install-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    min-width: 0
}

.coletor-install-edit>.user-field {
    flex: 1 1 260px;
    min-width: 0
}

.coletor-install-edit .profile-name-input {
    width: 100%
}

.coletor-install-signer,
.coletor-install-file {
    overflow-wrap: anywhere
}

.coletor-install-file {
    margin: 8px 0;
    font-size: 11px;
    color: var(--text-2)
}