/* ============================================
   广西华凯宏泰贸易 - 物流特色增强样式
   🚚 物流网络 · 仓储管理 · 实时追踪
   ============================================ */

/* 物流网络地图 */
.logistics-map {
  position: relative;
  padding: var(--spacing-12);
  background: linear-gradient(135deg, #003D7A 0%, #002952 100%);
  border-radius: var(--radius-3xl);
  color: white;
  overflow: hidden;
}

.logistics-map::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 168, 89, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.map-container {
  position: relative;
  height: 500px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(10px);
}

.map-node {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
  box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  animation: pulse-node 2s ease-out infinite;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.map-node:hover {
  transform: scale(1.2);
  z-index: 10;
}

@keyframes pulse-node {
  0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 165, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

.map-node.major {
  width: 80px;
  height: 80px;
  font-size: 2rem;
  background: linear-gradient(135deg, #00A859 0%, #008547 100%);
  box-shadow: 0 0 0 0 rgba(0, 168, 89, 0.7);
}

@keyframes pulse-node {
  0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 165, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

.map-connection {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(255, 165, 0, 0.3), 
    rgba(0, 168, 89, 0.5), 
    rgba(255, 165, 0, 0.3)
  );
  transform-origin: left center;
  animation: flow-line 3s linear infinite;
}

@keyframes flow-line {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.node-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(0, 0, 0, 0.9);
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.map-node:hover .node-tooltip {
  opacity: 1;
}

/* 实时物流追踪 */
.tracking-timeline {
  padding: var(--spacing-8);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.tracking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-8);
  padding-bottom: var(--spacing-4);
  border-bottom: 2px solid var(--border-color);
}

.tracking-id {
  font-size: 1.5rem;
  font-weight: 700;
  color: #003D7A;
}

.tracking-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: linear-gradient(135deg, #00A859 0%, #008547 100%);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.tracking-status::before {
  content: '🚛';
  font-size: 1.2em;
}

.tracking-steps {
  position: relative;
}

.tracking-steps::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, 
    #00A859 0%, 
    #00A859 50%, 
    #E5E7EB 50%, 
    #E5E7EB 100%
  );
}

.tracking-step {
  position: relative;
  padding-left: var(--spacing-20);
  margin-bottom: var(--spacing-8);
  padding-bottom: var(--spacing-6);
}

.tracking-step:last-child {
  margin-bottom: 0;
}

.tracking-step__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00A859 0%, #008547 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
  z-index: 1;
}

.tracking-step.pending .tracking-step__icon {
  background: #E5E7EB;
  color: #9CA3AF;
}

.tracking-step__time {
  font-size: var(--font-size-sm);
  color: #6B7280;
  margin-bottom: var(--spacing-2);
}

.tracking-step__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #003D7A;
  margin-bottom: var(--spacing-2);
}

.tracking-step__desc {
  color: #6B7280;
  line-height: 1.6;
}

/* 仓储容量可视化 */
.warehouse-capacity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
}

.capacity-card {
  padding: var(--spacing-6);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border-left: 4px solid #00A859;
  transition: all var(--transition-fast);
}

.capacity-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.capacity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.capacity-name {
  font-weight: 700;
  color: #003D7A;
  font-size: 1.1rem;
}

.capacity-icon {
  font-size: 2rem;
}

.capacity-bar-container {
  background: rgba(0, 61, 122, 0.1);
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--spacing-3);
}

.capacity-bar {
  height: 100%;
  background: linear-gradient(90deg, #00A859 0%, #FFA500 100%);
  border-radius: var(--radius-full);
  transition: width 1s ease-out;
}

.capacity-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: #6B7280;
}

.capacity-percentage {
  font-weight: 700;
  color: #00A859;
}

/* 配送车辆状态 */
.fleet-dashboard {
  padding: var(--spacing-8);
  background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
  border-radius: var(--radius-2xl);
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-5);
}

.vehicle-card {
  padding: var(--spacing-5);
  background: white;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.vehicle-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00A859, #FFA500);
}

.vehicle-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.vehicle-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-3);
  display: block;
}

.vehicle-id {
  font-weight: 700;
  color: #003D7A;
  margin-bottom: var(--spacing-2);
}

.vehicle-status {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.vehicle-status.active {
  background: rgba(0, 168, 89, 0.15);
  color: #00A859;
}

.vehicle-status.idle {
  background: rgba(255, 165, 0, 0.15);
  color: #FFA500;
}

.vehicle-status.maintenance {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

/* 配送时效保证 */
.delivery-guarantee {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
  border-radius: var(--radius-2xl);
  color: white;
  position: relative;
  overflow: hidden;
}

.delivery-guarantee::before {
  content: '⚡';
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 15rem;
  opacity: 0.1;
}

.guarantee-icon {
  font-size: 5rem;
  line-height: 1;
}

.guarantee-content h3 {
  font-size: 2rem;
  margin-bottom: var(--spacing-2);
}

.guarantee-content p {
  font-size: 1.1rem;
  opacity: 0.95;
  line-height: 1.6;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .map-container {
    height: 300px;
  }
  
  .map-node {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .map-node.major {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .tracking-steps::before {
    left: 20px;
  }
  
  .tracking-step {
    padding-left: var(--spacing-16);
  }
  
  .tracking-step__icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .delivery-guarantee {
    flex-direction: column;
    text-align: center;
  }
}