/* Outbound: customer orders, pick orders, waves, work orders, shipments, loading. Use the tokens from styles.css / docs/DESIGN.md only. */
.ob-view { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.ob-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ob-toolbar h2 { margin: 0; margin-right: auto; }
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.ob-card { padding: var(--space-4); overflow-x: auto; }
.ob-card h2 { margin: 0 0 var(--space-3); font-size: 16px; }
.ob-table { width: 100%; min-width: 0; table-layout: auto; }
.ob-bar { width: 120px; height: 8px; background: var(--surface-2); border-radius: var(--radius-s); overflow: hidden; }
.ob-bar > span { display: block; height: 100%; background: var(--pine); }
.ob-json { max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--space-3); font-size: 12px; }
.ob-ask { min-width: min(420px, 80vw); }
@media (max-width: 640px) { .ob-view { padding: var(--space-3); } .ob-cards { grid-template-columns: 1fr; } }