.stock-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
    gap: 22px;
    align-items: start
}

.stock-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px
}

.stock-main>* {
    min-width: 0
}

.stock-hint {
    font-size: 9px;
    color: var(--text-faint);
    line-height: 1.6;
    margin: -14px 0 18px
}

.stock-address-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px
}

.stock-capacity {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 16px;
    padding: 16px 18px;
    background: var(--primary-faint);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg)
}

.stock-capacity small,
.stock-capacity strong,
.stock-capacity span {
    display: block
}

.stock-capacity small {
    color: var(--text-muted);
    font-size: 9px
}

.stock-capacity strong {
    margin: 6px 0;
    font: 700 13px 'Manrope', sans-serif;
    color: var(--primary-text)
}

.stock-capacity span {
    font-size: 9px;
    color: var(--text-muted)
}

.stock-warehouse-field {
    margin-bottom: 14px
}

.stock-list-heading {
    min-width: 0
}

.stock-list-heading p {
    font-size: 9px;
    color: var(--text-faint);
    margin: 6px 0 0;
    line-height: 1.5
}

.stock-list .profile-list-title {
    align-items: flex-start
}

.stock-list-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.stock-feedback {
    margin: 0 0 14px
}

.stock-grid-wrap {
    overflow: auto;
    max-height: 440px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg)
}

.stock-grid {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-2)
}

.stock-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--primary-faint);
    text-align: left;
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2px
}

.stock-grid td {
    padding: 12px 14px;
    border-top: 1px solid var(--border-subtle)
}

.stock-grid td strong {
    font-weight: 600
}

.stock-grid tr.selected {
    background: var(--primary-faint)
}

.stock-grid-wrap .profile-empty {
    margin: 24px 16px
}

.stock-edit {
    display: inline-grid;
    place-items: center;
    height: 28px;
    width: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle
}

.stock-edit:hover {
    color: var(--blue);
    border-color: var(--blue)
}

.stock-delete {
    margin-left: 6px
}

.stock-delete:hover {
    color: var(--danger-text);
    border-color: var(--danger)
}

.stock-grid td:last-child {
    white-space: nowrap
}

.stock-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px
}

.stock-selection>div {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-faint);
    min-width: 0
}

.stock-selection>div.is-set {
    border-style: solid;
    border-color: var(--primary-border);
    background: var(--primary-faint);
    color: var(--blue)
}

.stock-selection svg {
    flex-shrink: 0
}

.stock-selection span {
    min-width: 0
}

.stock-selection strong {
    display: block;
    font-size: 11px;
    color: var(--text-2);
    margin-top: 4px;
    overflow-wrap: anywhere
}

.stock-selection>div:not(.is-set) strong {
    font-weight: 400;
    color: var(--text-faint)
}

.stock-field-hint {
    display: block;
    font-size: 8px;
    color: var(--text-faint);
    margin-top: 7px;
    line-height: 1.5
}

.stock-calculation {
    font-size: 10px;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 18px 0 0;
    padding: 10px 14px;
    background: var(--primary-faint);
    border-radius: var(--radius)
}

.stock-calculation strong {
    color: var(--text-2)
}

.stock-unit {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: var(--radius-lg);
    background: var(--indigo-soft);
    color: var(--indigo-text);
    font: 700 9px 'Manrope', sans-serif;
    vertical-align: middle
}

.stock-unit.is-loose {
    background: var(--warning-soft);
    color: var(--warning-text)
}

.stock-loose-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    margin: 4px 0 10px
}

.stock-open-confirm {
    border-color: var(--warning-border);
    background: var(--warning-faint);
    color: var(--warning-text)
}

.stock-open-confirm label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    margin: 8px 0
}

.stock-open-confirm input {
    width: 90px
}

.stock-open-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--warning);
    color: var(--on-fill);
    border: 0;
    cursor: pointer
}

.stock-confirm {
    border: 1px solid var(--danger-border);
    background: var(--danger-faint);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 18px 0 0;
    color: var(--danger-text)
}

.stock-confirm strong {
    font: 700 12px 'Manrope', sans-serif
}

.stock-confirm p {
    font-size: 10px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.stock-confirm>div {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    align-items: center
}

.stock-remove-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--danger);
    color: var(--on-fill);
    border: 0;
    cursor: pointer
}

.stock-page .user-field {
    min-width: 0
}

.stock-hint-direct {
    display: block;
    margin-top: 3px
}

.stock-operational {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 9px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 9px;
    color: var(--text-muted);
    background: var(--primary-faint);
    cursor: help
}

@media(max-width:1200px) {
    .stock-address-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .stock-capacity {
        grid-template-columns: repeat(2, 1fr)
    }
}

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

    .stock-address-fields,
    .stock-selection {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:450px) {

    .stock-address-fields,
    .stock-selection {
        grid-template-columns: 1fr
    }
}

.stock-reserved {
    color: var(--warning-text);
    font-weight: 600
}

.stock-hold {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    border-radius: var(--radius-lg);
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
    vertical-align: middle;
    cursor: help
}

.stock-reserved-hint {
    color: var(--warning-text)
}

.stock-rows-grid {
    table-layout: fixed;
    white-space: normal
}

.stock-rows-grid th,
.stock-rows-grid td {
    padding: 10px 10px;
    vertical-align: top
}

.stock-rows-grid th,
.stock-rows-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.stock-col-warehouse {
    width: 12%
}

.stock-col-apartment {
    width: 17%
}

.stock-col-quantity {
    width: 10%
}

.stock-col-reserved {
    width: 12%
}

.stock-col-volume {
    width: 9%
}

.stock-col-actions {
    width: 84px
}

.stock-rows-grid td:last-child {
    white-space: nowrap
}
/* Blazor (2026-10-08): with the ERP id the second line of the product ("ID-DV · ERP id · pack × size · batch · validity") no longer fits the ~200px
   column at 1440px and the ellipsis hid the validity; the product cell (description + second line) breaks its text instead (full text still in the
   title). */
.stock-rows-grid td:has(> strong + small),
.stock-rows-grid td:has(> strong + small) > * {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip
}