.flow-section{--green:var(--good);--red:var(--danger);--amber:var(--warn);--blue:#3b82f6;--purple:#8b5cf6;--green-dim:#5dd8821f;--red-dim:#ef5a5a1f;--amber-dim:#f5b3421f;--purple-dim:#8b5cf61f;--blue-dim:#3b82f61f;--bg-card:var(--bg-1);--bg-surface:var(--bg);--border:var(--line);--border-strong:var(--line-2);--text-muted:var(--muted);height:100%;font-family:var(--font-ui);color:var(--text);flex-direction:column;font-size:12.5px;display:flex}.flow-page{flex-direction:column;flex:1;gap:20px;padding:20px 24px 32px;display:flex;overflow-y:auto}.page-header{flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.page-header h2{color:var(--text);margin:0;font-size:18px;font-weight:700}.kpi-grid{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}.kpi-grid-4{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:2px;flex-direction:column;gap:4px;padding:14px 16px;display:flex}.kpi-card:hover{border-color:var(--line-2)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:2px;padding:14px 16px}.section-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.section-header h3{color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:12px;font-weight:600}.flow-section table.data-table{border-collapse:collapse;width:100%;font-size:12px}.flow-section table.data-table th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--bg-elevated);white-space:nowrap;padding:8px 12px;font-size:10.5px;font-weight:600}.flow-section table.data-table td{color:var(--text-2);border-bottom:1px solid var(--border);vertical-align:middle;padding:8px 12px}.flow-section table.data-table tr:last-child td{border-bottom:none}.flow-section table.data-table tbody tr:hover td{background:var(--bg-elevated);color:var(--text)}.flow-section .badge{white-space:nowrap;border-radius:10px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.flow-section .badge-transit{background:var(--blue-dim);color:var(--blue)}.flow-section .badge-port{background:var(--purple-dim);color:var(--purple)}.flow-section .badge-delayed{background:var(--red-dim);color:var(--red)}.flow-section .badge-delivered,.flow-section .badge-confirmed{background:var(--green-dim);color:var(--green)}.flow-section .badge-pending{background:var(--amber-dim);color:var(--amber)}.flow-section .badge-in-transit{background:var(--blue-dim);color:var(--blue)}.flow-section .badge-overdue{background:var(--red-dim);color:var(--red)}.flow-section .badge-planned{background:var(--amber-dim);color:var(--amber)}.flow-section .badge-inactive{background:var(--bg-elevated);color:var(--muted)}.flow-section .tab-row{border-bottom:1px solid var(--border);align-items:center;gap:2px;padding-bottom:0;display:flex}.flow-section .tab-btn{appearance:none;color:var(--muted);cursor:pointer;font-size:12.5px;font-weight:500;font-family:var(--font-ui);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:7px 14px;transition:color .15s,border-color .15s}.flow-section .tab-btn:hover{color:var(--text)}.flow-section .tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}.flow-section .kpi-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.flow-section .kpi-value{color:var(--text);font-size:24px;font-weight:700;line-height:1.15}.flow-section .kpi-sub{color:var(--muted);font-size:11px}.split-layout{gap:16px;display:grid}.split-70-30{grid-template-columns:1fr 340px}.split-60-40{grid-template-columns:3fr 2fr}.split-3col-equal{grid-template-columns:repeat(3,1fr)}.map-container{background:var(--bg-elevated);border:1px solid var(--border);border-radius:2px;position:relative;overflow:hidden}.map-legend{border:1px solid var(--border);background:#1a1a1de0;border-radius:2px;flex-direction:column;gap:4px;padding:6px 10px;display:flex;position:absolute;bottom:10px;left:10px}.map-legend-item{color:var(--text-2);align-items:center;gap:6px;font-size:10.5px;display:flex}.filter-tabs{gap:2px;display:flex}.filter-tab{font-family:var(--font-ui);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:2px;padding:4px 10px;font-size:11.5px;position:relative}.filter-tab:hover{background:var(--bg-elevated);color:var(--text-2)}.filter-tab.active{color:var(--accent)}.filter-tab.active:after{content:"";background:var(--accent);border-radius:1px;height:2px;position:absolute;bottom:-1px;left:6px;right:6px}.progress-bar-track{background:var(--bg-elevated);border-radius:99px;height:5px;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:99px;height:100%;transition:width .3s}.alert-item{border-bottom:1px solid var(--border);align-items:flex-start;gap:8px;padding:8px 0;display:flex}.alert-item:last-child{border-bottom:none}.donut-wrapper{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.delta-up{color:var(--good);font-size:11px}.delta-down{color:var(--danger);font-size:11px}.delta-neutral{color:var(--muted);font-size:11px}.flow-section button{appearance:none}.flow-section .btn{font-family:var(--font-ui);cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:2px;align-items:center;gap:5px;padding:5px 10px;font-size:11.5px;display:inline-flex}.flow-section .btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.flow-section .btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}.flow-section .btn-secondary{background:var(--bg-elevated);color:var(--text-2);border-color:var(--border-strong)}.flow-section .btn-secondary:hover{background:var(--bg-2);color:var(--text)}.flow-section .btn-ghost{color:var(--muted);background:0 0;border-color:#0000}.flow-section .btn-ghost:hover{background:var(--bg-elevated);color:var(--text-2)}.flow-section .btn:disabled{opacity:.4;cursor:not-allowed}.flow-section .icon-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:2px;align-items:center;padding:3px;display:inline-flex}.flow-section .icon-btn:hover{background:var(--bg-elevated);color:var(--text-2)}.flow-section .link-btn{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:0;font-size:11.5px}.flow-section .link-btn:hover{color:var(--accent-dim);text-decoration:underline}.flow-section input,.flow-section select,.flow-section textarea{appearance:none;background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text);font-family:var(--font-ui);border-radius:2px;outline:none;width:100%;padding:5px 8px;font-size:12px}.flow-section input:focus,.flow-section select:focus,.flow-section textarea:focus{border-color:var(--accent)}.flow-section input[type=search]{background:var(--bg-elevated)}.flow-section .shipment-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:2px;padding:12px;transition:border-color .1s}.flow-section .shipment-card:hover{border-color:var(--line-2)}.flow-section .shipment-card.active{border-color:var(--accent);background:var(--accent-bg)}.flow-inv-tabs{border-bottom:1px solid var(--border);background:var(--bg-1);flex-shrink:0;gap:0;padding:0 24px;display:flex}.flow-inv-tab{font-family:var(--font-ui);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:8px 12px;font-size:12px;position:relative}.flow-inv-tab:hover{color:var(--text-2)}.flow-inv-tab.active{color:var(--accent)}.flow-inv-tab.active:after{content:"";background:var(--accent);height:2px;position:absolute;bottom:0;left:8px;right:8px}.flow-section .modal-overlay{z-index:200;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.flow-section .modal{background:var(--bg-1);border:1px solid var(--line-2);border-radius:2px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 8px 32px #00000080}.flow-section .modal-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.flow-section .modal-header h3{color:var(--text);margin:0;font-size:14px;font-weight:600}.flow-section .modal-close{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:18px;line-height:1}.flow-section .modal-close:hover{color:var(--text)}.flow-section .modal-body{flex:1;overflow-y:auto}.flow-section .modal-footer{border-top:1px solid var(--border);flex-shrink:0;justify-content:flex-end;align-items:center;gap:8px;padding:12px 20px;display:flex}.flow-section .catalog-search{border-bottom:1px solid var(--border);padding:12px 20px}.flow-section .catalog-category-strip{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:4px;padding:8px 20px;display:flex}.flow-section .catalog-cat-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-2);cursor:pointer;white-space:nowrap;border-radius:2px;padding:3px 8px;font-size:11px}.flow-section .catalog-cat-btn:hover{border-color:var(--line-2);color:var(--text)}.flow-section .catalog-cat-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}.flow-section .catalog-list{max-height:320px;overflow-y:auto}.flow-section .catalog-item{border-bottom:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.flow-section .catalog-item:hover{background:var(--bg-elevated)}.flow-section .catalog-item-left{flex-direction:column;gap:3px;display:flex}.flow-section .catalog-item-name{color:var(--text);font-size:13px;font-weight:500}.flow-section .catalog-item-meta{align-items:center;gap:6px;display:flex}.flow-section .catalog-item-sku{color:var(--muted);font-size:10.5px;font-family:var(--font-mono)}.flow-section .catalog-item-right{align-items:center;gap:10px;display:flex}.flow-section .catalog-item-price{color:var(--text);font-size:13px;font-weight:600}.flow-section .catalog-item-unit{color:var(--muted);font-size:10.5px}.flow-section .add-form{flex-direction:column;gap:12px;padding:16px 24px;display:flex}.flow-section .form-field{flex-direction:column;gap:4px;display:flex}.flow-section .form-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.flow-section .form-row{gap:12px;display:grid}.flow-section .form-row-2{grid-template-columns:1fr 1fr}.flow-section .input-with-addon{display:flex}.flow-section .input-with-addon input{flex:1}.flow-section .input-with-addon select{flex-shrink:0}.flow-section .form-value-display{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-2);border-radius:2px;min-height:30px;padding:5px 8px;font-size:12px}.flow-section .form-value-display.computed{color:var(--muted);font-style:italic}.flow-section .form-divider{border:0;border-top:1px solid var(--border);margin:4px 0}.flow-section .status-preview{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.flow-section .inline-editor{align-items:center;gap:4px;display:flex}.flow-section .inline-editor input{width:80px;padding:2px 6px;font-size:12px}.flow-section .reorder-banner{background:var(--amber-dim);border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);border-radius:2px;flex-shrink:0;align-items:flex-start;gap:10px;padding:10px 14px;display:flex}.timeline-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;margin-top:3px}@media (max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.split-70-30{grid-template-columns:1fr}.split-3col-equal{grid-template-columns:1fr 1fr}}@media (max-width:900px){.kpi-grid,.kpi-grid-4{grid-template-columns:repeat(2,1fr)}}