/* Receiving indicators of the panel (wms-dashboard, 2026-09-28): 30 thin daily bars, stacked bars of receipts by status, the KPI strip and the
   receipts in progress. Colors and layout only; sizes of fields stay in forms.css. */
.chart-legend i.muted-red,
.stacked-segment.is-cancelled {
   background: var(--chart-red)
}

.flow-chart.is-month .bars-area {
   gap: 2px
}

.flow-chart.is-month .bar-pair {
   gap: 1px;
   padding: 0 1px
}

.flow-chart.is-month .chart-bar {
   width: 100%;
   max-width: none;
   min-width: 2px;
   border-radius: var(--radius-xs) var(--radius-xs) 0 0
}

.flow-chart.is-month .bar-group>span {
   font-size: 7px;
   white-space: nowrap;
   overflow: visible
}

.stacked-bar {
   width: 16px;
   max-width: 60%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end
}

.flow-chart.is-month .stacked-bar {
   width: 100%;
   max-width: none;
   min-width: 2px
}

.stacked-segment {
   width: 100%;
   min-height: 2px
}

.stacked-segment:last-child {
   border-radius: var(--radius-sm) var(--radius-sm) 0 0
}

.stacked-segment.is-closed {
   background: linear-gradient(var(--chart-orange-light), var(--chart-orange))
}

.stacked-segment.is-abandoned {
   background: var(--slate)
}

.receiving-kpis {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 10px;
   /* 18px above too: the strip sits between two .charts-grid (flow/capacity above, receipts below), which have no margin of their own. */
   margin: 18px 0
}

.receiving-kpis>div {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0
}

.receiving-kpis span {
   font-size: 9px;
   color: var(--text-muted);
   line-height: 1.4
}

.receiving-kpis strong {
   font: 800 20px 'Manrope', sans-serif;
   letter-spacing: -.5px;
   color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.receiving-grid {
   margin-top: 18px
}

.open-receipts {
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
   display: grid;
   gap: 8px
}

.open-receipts li>button,
.open-receipts li>div {
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr) 36px;
   align-items: center;
   gap: 10px;
   width: 100%;
   border: 0;
   background: none;
   padding: 6px 4px;
   border-radius: var(--radius);
   font-size: 9px;
   color: var(--text-muted);
   text-align: left
}

.open-receipts li>button {
   cursor: pointer
}

.open-receipts li>button:hover {
   background: var(--hover)
}

.open-receipts i {
   display: block;
   height: 8px;
   border-radius: var(--radius-sm);
   background: var(--orange);
   min-width: 2px
}

.open-receipts .is-draft i {
   background: var(--chart-muted)
}

.open-receipts .is-recount i {
   background: var(--chart-red)
}

.open-receipts .is-review i {
   background: var(--purple)
}

.open-receipts strong {
   text-align: right;
   font-weight: 600;
   color: var(--text)
}

.open-receipts-hint {
   font-size: 8px;
   color: var(--text-faint);
   margin: 10px 0 0
}

@media(max-width:850px) {
   .receiving-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

/* Card "Ocupação por zona" (ZoneOccupancyCard, 2026-10-09): the bars of "Recebimentos em andamento" (.open-receipts, Shared/BarList) with the colours
   of the occupancy scale (occupancy-bar.css), a breadcrumb of the steps and "Voltar". Wider label column (codes and, at the last step, addresses). */
.zone-occupancy-row {
   margin-top: 18px
}

.zone-occupancy-path {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
   margin: 4px 0 0
}

.zone-occupancy-path ol {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px;
   min-width: 0;
   margin: 0;
   padding: 0;
   font-size: 9px;
   color: var(--text-muted)
}

.zone-occupancy-path li+li::before {
   content: "›";
   margin-right: 4px;
   color: var(--text-faint)
}

.zone-occupancy-path li button {
   border: 0;
   background: none;
   padding: 3px 4px;
   border-radius: var(--radius-sm);
   font-size: 9px;
   color: var(--primary-text);
   cursor: pointer
}

.zone-occupancy-path li button:hover {
   background: var(--hover)
}

.zone-occupancy-path li span[aria-current] {
   font-weight: 700;
   color: var(--text)
}

.zone-occupancy-bars li>button,
.zone-occupancy-bars li>div {
   grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) 48px
}

.zone-occupancy-bars.is-apartments li>div {
   grid-template-columns: minmax(100px, 190px) minmax(0, 1fr) 48px
}

.zone-occupancy-bars span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

.zone-occupancy-bars .is-empty i,
.zone-occupancy-bars .is-unknown i {
   background: var(--chart-track)
}

.zone-occupancy-bars .is-unknown i {
   background: none;
   height: 0;
   border-top: 1px dashed var(--border-strong)
}

.zone-occupancy-bars .is-empty strong,
.zone-occupancy-bars .is-unknown strong {
   font-weight: 500;
   color: var(--text-faint)
}

.zone-occupancy-bars .is-over strong {
   color: var(--danger-text)
}

.zone-occupancy-bars .is-occupied span {
   font-weight: 700;
   color: var(--text)
}

@media(max-width:640px) {
   .zone-occupancy-bars li>button,
   .zone-occupancy-bars li>div {
      grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 48px
   }

   .zone-occupancy-bars.is-apartments li>div {
      grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 48px
   }
}

/* Journey of the order in the boxes (HomeDashboard, J11 of stage 14, D245): the strip of conferences (4 cells inside the panel) beside the bars of the time of the
   order (the BarList of "Recebimentos em andamento", one colour per stage, the total in the accent colour). */
.journey-grid {
   margin-top: 18px
}

.journey-kpis {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin: 14px 0 0
}

.open-receipts .is-stage-box-check i {
   background: var(--purple)
}

.open-receipts .is-stage-ship-check i {
   background: var(--blue)
}

.open-receipts .is-stage-loading i {
   background: var(--chart-muted)
}

.open-receipts .is-stage-shipping i {
   background: var(--chart-red)
}

.open-receipts .is-stage-total i {
   background: var(--text-faint)
}