/* Blazor (2026-10-06): the filter panel at 270-290px. The shared rule of components.css (.reservations-layout,.kardex-layout) loads before
   profiles.css, whose .profiles-layout (same specificity) won and left the panel at .9fr (~370px) and the grid squeezed; here, after profiles.css
   and before the narrow-screen rule below, it applies again (same fix as kardex.css). */
.reservations-layout {
    grid-template-columns: minmax(270px, 290px) minmax(0, 1fr)
}

/* Blazor (2026-10-06): the product results of the 290px filter panel (code + description, one line): the title breaks its own text instead of an
   ellipsis. The rows of the stock picker of a new hold (address + lot + available + hold icon + Inativo) use the shared two-line row without a code
   balloon (.compact-row.is-two-line, compact-list.css; wms-ui "Linha de lista em duas linhas", 2026-10-08). */
.reservation-products .compact-row .compact-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere
}

/* Blazor (2026-10-06): the captions of the grid stay on one line (ellipsis), the cells break. */
.reservation-grid th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Blazor (2026-10-06): product, address and reference break instead of ellipsis (the ~734px grid cut 4 of 5 descriptions and every dock address). */
.reservation-grid td>span:not(.reservation-status),
.reservation-grid td>small {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip
}

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

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

.reservation-filters {
    display: grid;
    gap: 12px
}

.reservation-filters .profile-list-title {
    margin-bottom: 4px
}

.reservation-filters .profile-list-title svg {
    color: var(--text-faint)
}

.reservation-filter-actions {
    margin-top: 4px;
    padding-top: 12px
}

.reservation-search:hover {
    color: var(--blue)
}

.reservation-chip button:hover {
    color: var(--danger-text)
}

.reservation-stock {
    max-height: 260px;
    margin-top: 12px
}

.reservation-hold-icon {
    color: var(--warning-text);
    flex-shrink: 0
}

.reservation-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: 9px;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--text-2);
    white-space: nowrap
}

.reservation-status.is-active {
    background: var(--accent-soft);
    color: var(--accent-text)
}

.reservation-status.is-released {
    background: var(--success-soft);
    color: var(--success-text)
}

.reservation-status.is-consumed {
    background: var(--primary-faint);
    color: var(--primary-text)
}

.reservation-status.is-expired {
    background: var(--surface-2);
    color: var(--text-muted)
}

.reservation-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer
}

.reservation-close:hover {
    color: var(--danger-text);
    border-color: var(--danger)
}

.reservation-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0 0 16px
}

.reservation-facts>div {
    min-width: 0
}

.reservation-facts .is-wide {
    grid-column: span 2
}

.reservation-facts dt {
    font-size: 9px;
    color: var(--text-faint);
    margin-bottom: 3px
}

.reservation-facts dd {
    margin: 0;
    font-size: 11px;
    color: var(--text-2);
    overflow-wrap: anywhere
}

.reservation-facts dd small {
    display: block;
    font-size: 9px;
    color: var(--text-faint);
    margin-top: 2px
}

.reservation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px
}

.reservation-release {
    color: var(--danger-text)
}

.reservation-inline {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface)
}

.reservation-inline .profile-form-footer {
    margin-top: 12px
}

.reservation-history h3 {
    font-size: 11px;
    color: var(--text-2);
    margin: 6px 0 10px
}

.reservation-history ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--border-subtle);
    display: grid;
    gap: 10px
}

.reservation-history li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    font-size: 10px;
    color: var(--text-2)
}

.reservation-history li strong {
    color: var(--text-2)
}

.reservation-history li small {
    grid-column: 1/-1;
    font-size: 9px;
    color: var(--text-faint)
}

.reservation-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    /* Air between the totals and the grid below (the list panel is a block, not a grid: nothing else separates them). */
    margin-bottom: 16px
}

.reservation-total {
    display: block;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--primary-faint);
    cursor: pointer;
    min-width: 0
}

.reservation-total {
    padding: 10px 12px
}

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

.reservation-total strong {
    margin: 4px 0 2px;
    font-size: 12px;
    color: var(--text-2)
}

.reservation-total span {
    font-size: 9px;
    color: var(--text-faint)
}

.reservation-total[aria-pressed=true] {
    border-color: var(--accent-border);
    background: var(--accent-faint)
}

.reservation-total.is-active strong {
    color: var(--accent-text)
}

.reservation-total.is-released strong {
    color: var(--success-text)
}

.reservation-total.is-consumed strong {
    color: var(--primary-text)
}

.reservation-grid-wrap {
    max-height: 520px
}

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

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

.reservation-grid td>span.reservation-status {
    display: inline-flex
}

/* Blazor (2026-10-06): widths for the grid at ~718px (1440px with the panel at 290px; React: 16/28/16/11/12/17). The date button
   "06/10/2026, 14:35" is nowrap and needs ~100px; "Quantidade (emb.)" and "Motivo / referência" need ~85-95px of caption; the product gives the
   space (full text in the title). */
.reservation-col-created {
    width: 18%
}

.reservation-col-product {
    width: 21%
}

.reservation-col-address {
    width: 14%
}

.reservation-col-quantity {
    width: 15%
}

.reservation-col-status {
    width: 13%
}

.reservation-col-reason {
    width: 19%
}

.reservation-open {
    border: 0;
    background: none;
    padding: 0;
    color: var(--primary-text);
    cursor: pointer;
    text-align: left;
    white-space: nowrap
}

.reservation-open:hover {
    text-decoration: underline
}

.reservation-more small {
    font-size: 10px;
    color: var(--text-faint)
}

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

    .reservation-facts {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:700px) {
    .reservation-totals {
        grid-template-columns: 1fr 1fr
    }
}

/* "Tratar avaria" of a HOLD of a damaged picking short (picking validation r2). */
.reservation-damage {
    display: grid;
    gap: 6px;
    justify-items: start;
    margin: 8px 0
}