/* ═══════════════════════════════════════════
   WMS DEMO — OUTBOUND MANAGEMENT
   ═══════════════════════════════════════════ */

/* ─── WORKFLOW STATUS BAR ─── */
.ob-workflow {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 28px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.ob-workflow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.02), rgba(168,85,247,.02));
  pointer-events: none;
}

.ob-wf-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .25s var(--ease);
  position: relative;
  z-index: 1;
}
.ob-wf-step:hover {
  background: rgba(255,255,255,.03);
}
.ob-wf-step.active {
  background: var(--accent-soft);
}

.ob-wf-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: rgba(100,116,139,.08);
  color: #94a3b8;
  transition: all .3s var(--ease);
  position: relative;
}
.ob-wf-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.ob-wf-step:hover .ob-wf-icon::after {
  opacity: .12;
}
/* Default - waiting */
.ob-wf-step[data-status="대기"] .ob-wf-icon {
  background: rgba(100,116,139,.1);
  color: #94a3b8;
}
/* Wave */
.ob-wf-icon.wave {
  background: rgba(59,130,246,.1);
  color: #60a5fa;
}
.ob-wf-icon.wave::after { background: rgba(59,130,246,.5); }
/* Picking */
.ob-wf-icon.picking {
  background: rgba(245,158,11,.1);
  color: #fbbf24;
}
.ob-wf-icon.picking::after { background: rgba(245,158,11,.5); }
/* Inspect */
.ob-wf-icon.inspect {
  background: rgba(168,85,247,.1);
  color: #c084fc;
}
.ob-wf-icon.inspect::after { background: rgba(168,85,247,.5); }
/* Packing */
.ob-wf-icon.packing {
  background: rgba(20,184,166,.1);
  color: #2dd4bf;
}
.ob-wf-icon.packing::after { background: rgba(20,184,166,.5); }
/* Shipped */
.ob-wf-icon.shipped {
  background: rgba(34,197,94,.1);
  color: #4ade80;
}
.ob-wf-icon.shipped::after { background: rgba(34,197,94,.5); }

.ob-wf-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-wf-label {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
}
.ob-wf-count {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--en);
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
}

.ob-wf-arrow {
  color: var(--dim);
  font-size: .65rem;
  padding: 0 4px;
  flex-shrink: 0;
  opacity: .4;
}

/* ─── PRIORITY BADGES ─── */
.badge-priority-긴급 {
  background: rgba(239,68,68,.1);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.12);
}
.badge-priority-일반 {
  background: rgba(59,130,246,.1);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.1);
}
.badge-priority-낮음 {
  background: rgba(100,116,139,.08);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,.08);
}

/* ─── STATUS BADGES ─── */
.badge-status-대기 {
  background: rgba(100,116,139,.08);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,.08);
}
.badge-status-웨이브 {
  background: rgba(59,130,246,.1);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.1);
}
.badge-status-피킹중 {
  background: rgba(245,158,11,.08);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.08);
}
.badge-status-검수 {
  background: rgba(168,85,247,.08);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,.08);
}
.badge-status-패킹 {
  background: rgba(20,184,166,.08);
  color: #2dd4bf;
  border: 1px solid rgba(20,184,166,.08);
}
.badge-status-출하완료 {
  background: rgba(34,197,94,.08);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.08);
}
.badge-status-취소 {
  background: rgba(239,68,68,.06);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.08);
}

/* Priority dot indicator */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
.priority-dot.긴급 { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,.4); }
.priority-dot.일반 { background: var(--accent); }
.priority-dot.낮음 { background: var(--dim); }

/* ─── ITEM ROWS (Create Modal) ─── */
.ob-items-header {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.ob-item-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
  animation: fadeIn .25s var(--ease) both;
}
.ob-item-row:last-child { border-bottom: none; }

.ob-sku-wrap {
  flex: 3;
  position: relative;
}
.ob-sku-input {
  width: 100%;
}
.ob-sku-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100;
  display: none;
  box-shadow: var(--shadow-lg);
}
.ob-sku-dropdown.show { display: block; }
.ob-sku-option {
  padding: 10px 14px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ob-sku-option:hover {
  background: var(--accent-soft);
}
.ob-sku-option .code {
  font-family: var(--en);
  font-weight: 600;
  color: var(--accent);
  font-size: .75rem;
}
.ob-sku-option .name {
  color: var(--text2);
}

.ob-qty-input {
  flex: 1;
  text-align: center;
}

/* ─── DETAIL MODAL ─── */
.ob-detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.ob-detail-info {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ob-detail-field .lbl {
  font-size: .7rem;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ob-detail-field .val {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

/* ─── PROGRESS BAR ─── */
.ob-progress-wrap {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.ob-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
}
.ob-progress-pct {
  font-family: var(--en);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.ob-progress-bar {
  height: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.ob-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .6s var(--ease);
  position: relative;
}
.ob-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2));
  border-radius: 5px;
}
.ob-progress-fill.complete {
  background: linear-gradient(90deg, var(--green), #16a34a);
}

/* ─── DETAIL ITEMS TABLE ─── */
.ob-detail-items {
  margin-top: 20px;
}
.ob-detail-items h3 {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-detail-items h3 i {
  color: var(--accent);
  font-size: .8rem;
}

/* ─── PICKING LIST ─── */
.ob-pick-list {
  margin-top: 20px;
}
.ob-pick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ob-pick-header h3 {
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-pick-header h3 i { color: var(--amber); }

.ob-pick-path {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--dim);
  font-weight: 600;
}
.ob-pick-path i { color: var(--amber); font-size: .65rem; }

.ob-pick-task {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.ob-pick-task::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--dim);
  transition: background .3s;
}
.ob-pick-task.active::before { background: var(--amber); }
.ob-pick-task.done::before { background: var(--green); }
.ob-pick-task.done { opacity: .6; }
.ob-pick-task:hover { border-color: var(--border2); }

.ob-pick-seq {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(100,116,139,.08);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--en);
  flex-shrink: 0;
}
.ob-pick-task.active .ob-pick-seq {
  background: rgba(245,158,11,.1);
  color: #fbbf24;
}
.ob-pick-task.done .ob-pick-seq {
  background: rgba(34,197,94,.1);
  color: #4ade80;
}

.ob-pick-loc {
  min-width: 100px;
}
.ob-pick-loc .code {
  font-family: var(--en);
  font-weight: 700;
  font-size: .85rem;
  color: var(--text);
  letter-spacing: .3px;
}
.ob-pick-loc .zone {
  font-size: .68rem;
  color: var(--dim);
  margin-top: 2px;
}

.ob-pick-sku {
  flex: 1;
}
.ob-pick-sku .name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text2);
}
.ob-pick-sku .code {
  font-family: var(--en);
  font-size: .72rem;
  color: var(--dim);
  margin-top: 2px;
}

.ob-pick-qty {
  text-align: center;
  min-width: 80px;
}
.ob-pick-qty .main {
  font-family: var(--en);
  font-size: 1rem;
  font-weight: 800;
}
.ob-pick-qty .sub {
  font-size: .68rem;
  color: var(--dim);
  margin-top: 2px;
}

.ob-pick-action {
  flex-shrink: 0;
}

/* ─── PACKING SUMMARY ─── */
.ob-pack-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ob-pack-stat {
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.ob-pack-stat .val {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--en);
  color: var(--text);
}
.ob-pack-stat .lbl {
  font-size: .7rem;
  color: var(--dim);
  margin-top: 4px;
}

/* ─── ACTION BUTTONS IN TABLE ─── */
.ob-action-group {
  display: flex;
  gap: 4px;
}

/* ─── TRACKING NUMBER DISPLAY ─── */
.tracking-code {
  font-family: var(--en);
  font-size: .78rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .3px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .ob-workflow {
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
  }
  .ob-wf-arrow { display: none; }
  .ob-wf-step { flex: 0 0 calc(33.33% - 8px); }
}
@media (max-width: 768px) {
  .ob-wf-step { flex: 0 0 calc(50% - 8px); }
  .ob-detail-info { grid-template-columns: 1fr; }
  .ob-pack-summary { grid-template-columns: 1fr; }
}