/* Relatórios (wms-reports, Blazor only, 2026-10-11): the filter panel at 270-290px like Movimentações de estoque, the groups of the outbound conference
   report (collapsible, subtotals in the toggle), the conferences, the volumes with the Code 128 of the label and the item tables. Colors and radii only
   by tokens (theme.css); the barcode box uses --label-paper/--label-ink, fixed in both themes, so the bars stay black on white on a dark screen too.
   Wide tables scroll inside their own wrapper (never the page): every grid child has min-width:0. */
.reports-layout {
    grid-template-columns: minmax(270px, 290px) minmax(0, 1fr)
}

.reports-main>*,
.reports-groups,
.reports-group,
.reports-group-body,
.reports-entry,
.reports-volumes,
.reports-volume {
    min-width: 0
}

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

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

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

.reports-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
}

.reports-filters label.reports-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 34px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2)
}

.reports-check input {
    margin: 0
}

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

.reports-main {
    display: grid;
    gap: 12px;
    align-content: start
}

.reports-main-title {
    flex-wrap: wrap;
    gap: 10px
}

/* The global h2 of styles.css has a negative letter-spacing for the big titles: at 14px it glued "Conferência de saída". */
.reports-main-title h2 {
    letter-spacing: 0
}

.reports-main-title .stock-list-actions {
    flex-wrap: wrap;
    gap: 6px
}

.reports-group-by label.inventory-kind {
    margin: 0;
    font-weight: 600
}

.reports-notice {
    margin: 0
}

.reports-totals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px
}

.reports-totals>div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--primary-faint)
}

.reports-totals small,
.reports-totals strong {
    display: block
}

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

.reports-totals strong {
    margin-top: 4px;
    font: 700 13px 'Manrope', sans-serif;
    color: var(--text-2);
    overflow-wrap: anywhere
}

.reports-groups {
    display: grid;
    gap: 10px
}

.reports-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg)
}

.reports-group-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-2);
    text-align: left;
    cursor: pointer
}

.reports-group-toggle:hover {
    background: var(--primary-faint)
}

.reports-group-toggle>svg {
    flex-shrink: 0;
    color: var(--text-faint)
}

.reports-group-title {
    display: grid;
    flex: 1 1 200px;
    min-width: 0
}

.reports-group-title strong {
    font: 700 13px 'Manrope', sans-serif;
    overflow-wrap: anywhere
}

.reports-group-title small {
    font-size: 11px;
    color: var(--text-muted);
    overflow-wrap: anywhere
}

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

.reports-subtotals>span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap
}

.reports-subtotals small {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted)
}

.reports-group-body {
    display: grid;
    gap: 12px;
    padding: 4px 12px 12px
}

.reports-entry {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border)
}

.reports-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px 10px
}

.reports-entry-head>div {
    min-width: 0
}

.reports-entry-head>.compact-status {
    margin-left: auto
}

.reports-entry-head h3 {
    margin: 0;
    font: 700 13px 'Manrope', sans-serif;
    color: var(--text-2)
}

.reports-entry-head small {
    font-size: 11px;
    color: var(--text-muted);
    overflow-wrap: anywhere
}

.reports-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 12px;
    margin: 0
}

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

.reports-facts .is-wide {
    grid-column: 1 / -1
}

.reports-facts dt {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted)
}

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

.reports-volumes {
    display: grid;
    gap: 10px
}

.reports-volume {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius)
}

.reports-volume.is-cancelled {
    opacity: .7
}

.reports-volume-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center
}

.reports-barcode {
    padding: 6px 8px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--label-paper)
}

.reports-barcode .code128 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

.reports-barcode svg {
    display: block;
    width: 210px;
    max-width: 100%;
    height: 46px;
    fill: var(--label-ink)
}

.reports-barcode .code128-text {
    font: 700 12px/1.2 ui-monospace, 'Cascadia Mono', Consolas, monospace;
    letter-spacing: .06em;
    color: var(--label-ink)
}

.reports-facts.is-volume {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
}

.reports-items,
.reports-shortages {
    min-width: 560px;
    white-space: normal
}

.reports-items th,
.reports-items td,
.reports-shortages th,
.reports-shortages td {
    padding: 7px 10px;
    vertical-align: top;
    font-size: 12px
}

.reports-items td small,
.reports-shortages td small {
    display: block;
    font-size: 10px;
    color: var(--text-muted)
}

.reports-items .is-number {
    text-align: right;
    white-space: nowrap
}

.reports-none {
    display: flex;
    align-items: center;
    gap: 10px
}

.reports-none p {
    margin: 0
}

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

    .reports-totals {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
    }
}

@media(max-width:560px) {
    .reports-volume-head {
        grid-template-columns: 1fr
    }

    .reports-barcode {
        justify-self: start
    }
}

/* Item tables of the reports (the comparison of the item check, the items of the boxes; 2026-10-22): the system grid (.stock-grid, stock.css) with the product description in a second line, the
   numbers on the right and the rows that differ in the accent tint. Fonts and paddings come from .stock-grid, never from the browser defaults. */
.reports-compare-wrap {
    max-height: none
}

.reports-compare td small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: normal
}

.reports-compare th.is-number,
.reports-compare td.is-number {
    text-align: right
}

.reports-compare tr.is-divergent td {
    background: var(--warning-faint)
}

/* A free text in a grid of a report (the reason of a decision): it wraps instead of widening the table. */
.reports-compare td.is-text {
    white-space: normal;
    min-width: 200px
}