// ========================================
// 🎨 MERCADO LIVE COMPONENT STYLES
// ========================================

.mercado-live-container {
  // ✨ Container base herdado do domain-container
  
  .main-content {
    // ✨ Content base herdado
  }
}

// ========================================
// 🏷️ STATUS BADGES (ESPECÍFICO MERCADO LIVE) - CONSISTENTE COM SIDE CARD
// ========================================

::ng-deep .status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  
  // ✅ Status principais (alinhados com statusConfig)
  &.status-pending {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeaa7;
  }

  &.status-in_transit {
    background-color: #cce7ff;
    color: #004085;
    border-color: #74b9ff;
  }

  &.status-delivered {
    background-color: #d4edda;
    color: #155724;
    border-color: #00b894;
  }

  &.status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #e17055;
  }

  // ✅ Status adicionais
  &.status-delayed {
    background-color: #f5c6cb;
    color: #721c24;
    border-color: #d63031;
  }

  &.status-scheduled {
    background-color: #b2ebf2;
    color: #006064;
    border-color: #00cec9;
  }

  &.status-loading {
    background-color: #e1bee7;
    color: #4a148c;
    border-color: #a29bfe;
  }

  &.status-unloading {
    background-color: #ffecb3;
    color: #e65100;
    border-color: #fdcb6e;
  }

  &.status-on_route {
    background-color: #dcedc8;
    color: #33691e;
    border-color: #6c5ce7;
  }

  &.status-unknown {
    background-color: #f5f5f5;
    color: #666;
    border-color: #ddd;
  }
}

// ========================================
// 🎯 PRIORITY INDICATORS (ESPECÍFICO MERCADO LIVE)
// ========================================

.priority-high {
  color: var(--idt-danger, #dc3545);
  font-weight: 600;
}

.priority-medium {
  color: var(--idt-warning, #fd7e14);
  font-weight: 500;
}

.priority-low {
  color: var(--idt-muted, #6c757d);
  font-weight: 400;
}

// ========================================
// 📱 RESPONSIVE DESIGN
// ========================================

@media (max-width: 768px) {
  .status-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
}

// ========================================
// 🖨️ PRINT STYLES
// ========================================

@media print {
  .mercado-live-container {
    .status-badge {
      border: 1px solid #000;
      background: white !important;
      color: black !important;
    }
    
    .priority-high,
    .priority-medium,
    .priority-low {
      color: black !important;
      font-weight: bold;
    }
  }
}

// ========================================
// 🎨 DARK MODE SUPPORT
// ========================================

[data-theme="dark"] {
  ::ng-deep .status-badge {
    &.status-pending {
      background-color: rgba(255, 243, 205, 0.2);
      color: #ffd60a;
      border-color: rgba(255, 234, 167, 0.3);
    }

    &.status-in_transit {
      background-color: rgba(204, 229, 255, 0.2);
      color: #4dabf7;
      border-color: rgba(116, 185, 255, 0.3);
    }

    &.status-delivered {
      background-color: rgba(209, 237, 255, 0.2);
      color: #3bc9db;
      border-color: rgba(0, 184, 148, 0.3);
    }

    &.status-cancelled {
      background-color: rgba(248, 215, 218, 0.2);
      color: #ff6b6b;
      border-color: rgba(225, 112, 85, 0.3);
    }

    &.status-delayed {
      background-color: rgba(245, 198, 203, 0.2);
      color: #ff7675;
      border-color: rgba(214, 48, 49, 0.3);
    }

    &.status-scheduled {
      background-color: rgba(178, 235, 242, 0.2);
      color: #00cec9;
      border-color: rgba(0, 206, 201, 0.3);
    }

    &.status-loading {
      background-color: rgba(225, 190, 231, 0.2);
      color: #a29bfe;
      border-color: rgba(162, 155, 254, 0.3);
    }

    &.status-unloading {
      background-color: rgba(255, 236, 179, 0.2);
      color: #fdcb6e;
      border-color: rgba(253, 203, 110, 0.3);
    }

    &.status-on_route {
      background-color: rgba(220, 237, 200, 0.2);
      color: #00b894;
      border-color: rgba(108, 92, 231, 0.3);
    }

    &.status-unknown {
      background-color: rgba(245, 245, 245, 0.1);
      color: #b2bec3;
      border-color: rgba(221, 221, 221, 0.2);
    }
  }
}