/* Occupancy bar (Components/Shared/OccupancyBar.razor; wms-ui "Barra de ocupação", 2026-10-09; first use: zones and apartments of Endereçamento): a
   compact track with the fill and the percent beside it. Colour by state (Services/OccupancyScale), always with the percent written: empty (track
   only), partial (success), near full from 70% (brand gold), full from 90% (danger), over 100% (danger + the percent in danger text), unknown capacity (dashed neutral track,
   "Sem cap."), pending cubage (lighter fill: the volume is a minimum). Colours only by tokens of theme.css (light and dark). */
.occupancy-bar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0
}

.occupancy-track {
    position: relative;
    box-sizing: border-box;
    width: 48px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--chart-track)
}

.occupancy-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius-xs);
    background: var(--success)
}

/* The colours of Services/OccupancyScale, one place for both screens: the address bars and the card "Ocupação por zona" of the dashboard (its bars
   and legend). Green below 70%, orange from 70% to 89.9%, red from 90%. */
.occupancy-bar.is-partial .occupancy-fill,
.zone-occupancy-bars .is-partial i,
.zone-occupancy-legend i.is-partial {
    background: var(--success)
}

.occupancy-bar.is-near .occupancy-fill,
.zone-occupancy-bars .is-near i,
.zone-occupancy-legend i.is-near {
    background: var(--brand-gold)
}

.occupancy-bar.is-full .occupancy-fill,
.zone-occupancy-bars .is-full i,
.zone-occupancy-legend i.is-full {
    background: var(--danger)
}

.occupancy-bar.is-pending .occupancy-fill {
    opacity: .6
}

.occupancy-bar.is-unknown .occupancy-track {
    background: none;
    border: 1px dashed var(--border-strong)
}

.occupancy-text {
    min-width: 34px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-2)
}

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

.occupancy-bar.is-over .occupancy-text {
    color: var(--danger-text)
}